preact-missing-hooks 2.0.0 → 3.0.0

package/Readme.md

@@ -15,7 +15,7 @@
 
 If this package helps you, please consider dropping a star on the [GitHub repo](https://github.com/prakhardubey2002/Preact-Missing-Hooks).
 
-A lightweight, extendable collection of React-like hooks for Preact, including utilities for transitions, DOM mutation observation, global event buses, theme detection, network status, clipboard access, rage-click detection (e.g. for Sentry), a priority task queue (sequential or parallel), and a production-ready **IndexedDB** hook with tables, transactions, and a full CRUD API.
+A lightweight, extendable collection of React-like hooks for Preact, including utilities for transitions, DOM mutation observation, global event buses, theme detection, network status, clipboard access, rage-click detection (e.g. for Sentry), a priority task queue (sequential or parallel), a production-ready **IndexedDB** hook with tables, transactions, and a full CRUD API, and **WebRTC-based IP detection** (`useWebRTCIP`) for frontend-only IP hints.
 
 ---
 
@@ -31,6 +31,8 @@ A lightweight, extendable collection of React-like hooks for Preact, including u
 - **`useRageClick`** — Detects rage clicks (repeated rapid clicks in the same spot). Use with Sentry or similar to detect and fix rage-click issues and lower rage-click-related support.
 - **`useThreadedWorker`** — Run async work in a queue with **sequential** (single worker, priority-ordered) or **parallel** (worker pool) mode. Optional priority (1 = highest); FIFO within same priority.
 - **`useIndexedDB`** — IndexedDB abstraction with database/table init, insert, update, delete, exists, query (cursor + filter), upsert, bulk insert, clear, count, and full transaction support. Singleton connection, Promise-based API, optional `onSuccess`/`onError` callbacks.
+- **`useWebRTCIP`** — Detects client IP addresses using WebRTC ICE candidates and a STUN server (frontend-only). **Not highly reliable**; use as a first-priority hint and fall back to a public IP API (e.g. [ipapi.co](https://ipapi.co), [ipify](https://www.ipify.org), [ip-api.com](https://ip-api.com)) when it fails or returns empty.
+- **`useWasmCompute`** — Runs WebAssembly computation off the main thread via a Web Worker. Flow: Preact Component → useWasmCompute() → Web Worker → WASM Module → return result. Validates environment (browser, Worker, WebAssembly) and returns `compute(input)`, `result`, `loading`, `error`, `ready`.
 - Fully TypeScript compatible
 - Bundled with Microbundle
 - Zero dependencies (except `preact`)
@@ -55,8 +57,10 @@ npm install preact-missing-hooks
   ```ts
   import { useThreadedWorker } from 'preact-missing-hooks/useThreadedWorker'
   import { useClipboard } from 'preact-missing-hooks/useClipboard'
+  import { useWebRTCIP } from 'preact-missing-hooks/useWebRTCIP'
+  import { useWasmCompute } from 'preact-missing-hooks/useWasmCompute'
   ```
-  All hooks are available: `useTransition`, `useMutationObserver`, `useEventBus`, `useWrappedChildren`, `usePreferredTheme`, `useNetworkState`, `useClipboard`, `useRageClick`, `useThreadedWorker`, `useIndexedDB`.
+  All hooks are available: `useTransition`, `useMutationObserver`, `useEventBus`, `useWrappedChildren`, `usePreferredTheme`, `useNetworkState`, `useClipboard`, `useRageClick`, `useThreadedWorker`, `useIndexedDB`, `useWebRTCIP`, `useWasmCompute`.
 
 ---
 
@@ -373,6 +377,83 @@ function App() {
 
 ---
 
+### `useWebRTCIP`
+
+Detects client IP addresses using WebRTC ICE candidates and a STUN server (**frontend-only**, no backend). **Not highly reliable** — use as a **first-priority** hint; if it fails or returns empty, fall back to a public IP API (e.g. [ipapi.co](https://ipapi.co), [ipify](https://www.ipify.org), [ip-api.com](https://ip-api.com)).
+
+Returns `{ ips: string[], loading: boolean, error: string | null }`. Options: `stunServers`, `timeout` (ms), `onDetect(ip)`.
+
+```tsx
+import { useWebRTCIP } from 'preact-missing-hooks'
+import { useState, useEffect } from 'preact/hooks'
+
+function ClientIP() {
+  const { ips, loading, error } = useWebRTCIP({
+    timeout: 4000,
+    onDetect: (ip) => {
+      /* optional: e.g. analytics */
+    },
+  })
+  const [fallbackIP, setFallbackIP] = useState<string | null>(null)
+
+  // Fallback to public IP API when WebRTC fails or returns empty
+  useEffect(() => {
+    if (loading || ips.length > 0) return
+    if (error) {
+      fetch('https://api.ipify.org?format=json')
+        .then((r) => r.json())
+        .then((d) => setFallbackIP(d.ip))
+        .catch(() => {})
+    }
+  }, [loading, ips.length, error])
+
+  if (loading) return <p>Detecting IP…</p>
+  if (ips.length > 0) return <p>IPs (WebRTC): {ips.join(', ')}</p>
+  if (fallbackIP) return <p>IP (fallback API): {fallbackIP}</p>
+  if (error) return <p>WebRTC failed. Try fallback API.</p>
+  return null
+}
+```
+
+---
+
+### `useWasmCompute`
+
+Runs WebAssembly computation in a Web Worker so the main thread stays responsive. Flow: **Preact Component → useWasmCompute() → Web Worker → WASM Module → return result.** The hook checks that the environment supports `window`, `Worker`, and `WebAssembly`; in SSR or unsupported environments it sets `error` and leaves `ready` false.
+
+Returns `{ compute, result, loading, error, ready }`. Options: `wasmUrl` (required), `exportName` (default `'compute'`), optional `workerUrl` (custom worker script), optional `importObject` (must be serializable for the default worker).
+
+```tsx
+import { useWasmCompute } from 'preact-missing-hooks'
+
+function AddWithWasm() {
+  const { compute, result, loading, error, ready } = useWasmCompute<
+    number,
+    number
+  >({
+    wasmUrl: '/add.wasm',
+    exportName: 'add',
+  })
+
+  const handleClick = () => {
+    if (ready) compute(2).then(() => {})
+  }
+
+  if (error) return <p>WASM unavailable: {error}</p>
+  if (!ready) return <p>Loading WASM…</p>
+  return (
+    <div>
+      <button onClick={handleClick} disabled={loading}>
+        Add 2
+      </button>
+      {result != null && <p>Result: {result}</p>}
+    </div>
+  )
+}
+```
+
+---
+
 ## Built With
 
 - [Preact](https://preactjs.com)

package/demo/index.html

@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Preact Missing Hooks — Demo</title>
+    <script type="importmap">
+      {
+        "imports": {
+          "preact": "https://esm.sh/preact@10",
+          "preact/hooks": "https://esm.sh/preact@10/hooks"
+        }
+      }
+    </script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      :root {
+        --bg: #0f0f12;
+        --surface: #18181c;
+        --surface2: #222228;
+        --border: #2e2e36;
+        --text: #e4e4e7;
+        --textMuted: #a1a1aa;
+        --accent: #7c3aed;
+        --accentDim: rgba(124, 58, 237, 0.15);
+        --green: #22c55e;
+        --greenDim: rgba(34, 197, 94, 0.12);
+        --amber: #f59e0b;
+        --red: #ef4444;
+        --radius: 10px;
+        --radiusSm: 6px;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        font-family: 'DM Sans', system-ui, sans-serif;
+        background: var(--bg);
+        color: var(--text);
+        line-height: 1.5;
+        min-height: 100vh;
+      }
+      .page-header {
+        padding: 2rem 1.5rem;
+        text-align: center;
+        border-bottom: 1px solid var(--border);
+      }
+      .page-header h1 {
+        margin: 0;
+        font-size: 1.75rem;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+      }
+      .page-header p {
+        margin: 0.5rem 0 0;
+        color: var(--textMuted);
+        font-size: 0.95rem;
+      }
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 1.5rem;
+      }
+      .hook-section {
+        margin-bottom: 3rem;
+      }
+      .hook-section h2 {
+        margin: 0 0 0.5rem;
+        font-size: 1.35rem;
+        font-weight: 600;
+        color: var(--text);
+      }
+      .flow {
+        display: inline-block;
+        margin-bottom: 0.5rem;
+        padding: 0.25rem 0.6rem;
+        font-size: 0.75rem;
+        font-family: 'JetBrains Mono', monospace;
+        color: var(--accent);
+        background: var(--accentDim);
+        border-radius: var(--radiusSm);
+      }
+      .summary {
+        margin: 0 0 1rem;
+        font-size: 0.9rem;
+        color: var(--textMuted);
+        max-width: 60ch;
+      }
+      .cards {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1rem;
+      }
+      @media (max-width: 800px) {
+        .cards {
+          grid-template-columns: 1fr;
+        }
+      }
+      .card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        overflow: hidden;
+      }
+      .card-title {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.75rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--textMuted);
+        border-bottom: 1px solid var(--border);
+      }
+      .card-code {
+        padding: 0.75rem;
+        font-family: 'JetBrains Mono', monospace;
+        font-size: 0.8rem;
+        line-height: 1.45;
+        color: var(--textMuted);
+        background: #0d0d0f;
+        overflow-x: auto;
+        white-space: pre;
+      }
+      .card-live {
+        padding: 1rem;
+        min-height: 80px;
+      }
+      .card-live .status {
+        font-size: 0.85rem;
+      }
+      .card-live button {
+        padding: 0.4rem 0.75rem;
+        margin: 0.2rem 0.2rem 0 0;
+        font-family: inherit;
+        font-size: 0.85rem;
+        background: var(--surface2);
+        border: 1px solid var(--border);
+        border-radius: var(--radiusSm);
+        color: var(--text);
+        cursor: pointer;
+      }
+      .card-live button:hover {
+        background: var(--border);
+      }
+      .card-live button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      .badge {
+        display: inline-block;
+        padding: 0.2rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.8rem;
+      }
+      .badge.green {
+        background: var(--greenDim);
+        color: var(--green);
+      }
+      .badge.amber {
+        color: var(--amber);
+      }
+      /* IndexedDB demo: reactive table + action buttons */
+      .idb-actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.35rem;
+        margin-bottom: 0.75rem;
+      }
+      .idb-table-viz {
+        background: var(--surface2);
+        border-radius: var(--radiusSm);
+        padding: 0.5rem;
+        font-size: 0.8rem;
+        max-height: 180px;
+        overflow-y: auto;
+      }
+      .idb-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.35rem 0.5rem;
+        border-radius: 4px;
+        margin-bottom: 2px;
+      }
+      .idb-row:nth-child(odd) {
+        background: rgba(255, 255, 255, 0.03);
+      }
+      .idb-row-actions {
+        display: flex;
+        gap: 0.25rem;
+      }
+      .idb-count {
+        margin-bottom: 0.5rem;
+        font-weight: 600;
+        color: var(--textMuted);
+      }
+      /* useWasmCompute flow diagram */
+      .wasm-flow {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 0.25rem;
+        padding: 0.75rem;
+        margin-bottom: 0.75rem;
+        background: var(--surface2);
+        border-radius: var(--radiusSm);
+      }
+      .wasm-flow-node {
+        padding: 0.3rem 0.5rem;
+        font-size: 0.7rem;
+        font-family: 'JetBrains Mono', monospace;
+        border-radius: 4px;
+        border: 1px solid var(--border);
+        color: var(--textMuted);
+        transition: background 0.2s, border-color 0.2s;
+      }
+      .wasm-flow-node.active {
+        border-color: var(--accent);
+        background: var(--accentDim);
+        color: var(--accent);
+      }
+      .wasm-flow-arrow {
+        color: var(--textMuted);
+        font-size: 0.75rem;
+      }
+    </style>
+  </head>
+  <body>
+    <header class="page-header">
+      <h1>Preact Missing Hooks</h1>
+    </header>
+    <main class="container" id="root"></main>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>

package/demo/main.js

@@ -0,0 +1,312 @@
+import { h, render } from 'https://esm.sh/preact@10';
+import { useState, useEffect, useRef } from 'https://esm.sh/preact@10/hooks';
+import {
+  useTransition,
+  useMutationObserver,
+  useEventBus,
+  useWrappedChildren,
+  usePreferredTheme,
+  useNetworkState,
+  useClipboard,
+  useRageClick,
+  useThreadedWorker,
+  useIndexedDB,
+  useWebRTCIP,
+  useWasmCompute,
+} from 'https://unpkg.com/preact-missing-hooks/dist/index.module.js';
+
+// ——— Hook demo components ———
+
+function DemoTransition() {
+  const [startTransition, isPending] = useTransition();
+  const [count, setCount] = useState(0);
+  return h('div', {},
+    h('button', { onClick: () => startTransition(() => setCount((c) => c + 1)) }, 'Increment'),
+    ' ',
+    isPending ? h('span', { class: 'badge amber' }, 'Pending…') : null,
+    h('span', { style: { marginLeft: '0.5rem' } }, 'Count: ' + count)
+  );
+}
+
+function DemoMutationObserver() {
+  const ref = useRef(null);
+  const [log, setLog] = useState([]);
+  useMutationObserver(ref, (mutations) => {
+    setLog((prev) => [...prev.slice(-2), mutations.length + ' mutation(s)']);
+  }, { childList: true, subtree: true });
+  return h('div', {},
+    h('div', { ref, style: { padding: '0.5rem', background: 'var(--surface2)', borderRadius: '6px', marginBottom: '0.5rem' } },
+      h('span', {}, 'Watch this area → '),
+      h('button', { onClick: () => { const el = ref.current; if (el) { const s = document.createElement('span'); s.textContent = ' +new'; el.appendChild(s); } } }, 'Add node')
+    ),
+    h('div', { class: 'status' }, log.length ? log.join(' · ') : 'No mutations yet')
+  );
+}
+
+function DemoEventBus() {
+  const { emit, on } = useEventBus();
+  const [msg, setMsg] = useState('');
+  useEffect(() => {
+    return on('greet', setMsg);
+  }, [on]);
+  return h('div', {},
+    h('button', { onClick: () => emit('greet', 'Hello from bus!') }, 'Emit greet'),
+    msg ? h('span', { style: { marginLeft: '0.5rem' }, class: 'badge green' }, msg) : null
+  );
+}
+
+function DemoWrappedChildren() {
+  const children = [h('button', {}, 'A'), h('button', {}, 'B')];
+  const wrapped = useWrappedChildren(children, { style: { marginRight: '0.25rem' } });
+  return h('div', {}, wrapped);
+}
+
+function DemoPreferredTheme() {
+  const theme = usePreferredTheme();
+  return h('div', {}, h('span', { class: 'badge ' + (theme === 'dark' ? 'green' : 'amber') }, theme));
+}
+
+function DemoNetworkState() {
+  const state = useNetworkState();
+  return h('div', { class: 'status' },
+    state.online ? h('span', { class: 'badge green' }, 'Online') : h('span', { class: 'badge', style: { background: 'var(--red)', color: '#fff' } }, 'Offline'),
+    state.effectiveType ? ' ' + state.effectiveType : ''
+  );
+}
+
+function DemoClipboard() {
+  const { copy, paste, copied, error } = useClipboard();
+  const [pasted, setPasted] = useState('');
+  return h('div', {},
+    h('button', { onClick: () => copy('Hello from useClipboard!') }, copied ? 'Copied!' : 'Copy'),
+    ' ',
+    h('button', { onClick: () => paste().then(setPasted) }, 'Paste'),
+    pasted ? h('div', { style: { marginTop: '0.5rem', fontSize: '0.85rem' } }, 'Pasted: ' + pasted) : null,
+    error ? h('div', { style: { color: 'var(--red)', fontSize: '0.8rem' } }, error.message) : null
+  );
+}
+
+function DemoRageClick() {
+  const ref = useRef(null);
+  const [count, setCount] = useState(0);
+  useRageClick(ref, { onRageClick: () => setCount((c) => c + 1), threshold: 3 });
+  return h('div', {},
+    h('div', { ref, style: { padding: '1rem', background: 'var(--surface2)', borderRadius: '6px', cursor: 'pointer', userSelect: 'none' } }, 'Click here 3+ times fast (rage click)'),
+    count ? h('div', { class: 'badge amber', style: { marginTop: '0.5rem' } }, 'Rage clicks: ' + count) : null
+  );
+}
+
+function DemoThreadedWorker() {
+  const { run, loading, result } = useThreadedWorker(
+    (x) => new Promise((r) => setTimeout(() => r('Result: ' + x), 500)),
+    { mode: 'sequential' }
+  );
+  return h('div', {},
+    h('button', { onClick: () => run('task'), disabled: loading }, loading ? 'Running…' : 'Run task'),
+    result ? h('span', { style: { marginLeft: '0.5rem' }, class: 'badge green' }, result) : null
+  );
+}
+
+function DemoIndexedDB() {
+  const { db, isReady, error } = useIndexedDB({ name: 'demo-db', version: 1, tables: { items: { keyPath: 'id' } } });
+  const [items, setItems] = useState([]);
+  const [count, setCount] = useState(null);
+
+  const refresh = () => {
+    if (!db) return;
+    db.table('items').query(() => true).then(setItems);
+    db.table('items').count().then(setCount);
+  };
+
+  useEffect(() => {
+    if (!db || !isReady) return;
+    refresh();
+  }, [db, isReady]);
+
+  const insert = () => db && db.table('items').insert({ id: Date.now(), label: 'Item ' + (items.length + 1), created: Date.now() }).then(refresh);
+  const bulkInsert = () => db && db.table('items').bulkInsert([
+    { id: Date.now() + 1, label: 'Bulk A', created: Date.now() },
+    { id: Date.now() + 2, label: 'Bulk B', created: Date.now() },
+  ]).then(refresh);
+  const update = (id, label) => db && db.table('items').update(id, { label }).then(refresh);
+  const remove = (id) => db && db.table('items').delete(id).then(refresh);
+  const clear = () => db && db.table('items').clear().then(refresh);
+
+  if (error) return h('div', { style: { color: 'var(--red)' } }, error.message);
+  if (!isReady) return h('div', { class: 'status' }, 'Opening DB…');
+
+  return h('div', {},
+    h('div', { class: 'idb-actions' }, [
+      h('button', { onClick: insert }, 'Insert'),
+      h('button', { onClick: bulkInsert }, 'Bulk insert'),
+      h('button', { onClick: refresh }, 'Query all'),
+      h('button', { onClick: clear }, 'Clear'),
+    ]),
+    h('div', { class: 'idb-count' }, 'Count: ' + (count ?? '—')),
+    h('div', { class: 'idb-table-viz' },
+      items.length === 0
+        ? h('div', { style: { color: 'var(--textMuted)', padding: '0.5rem' } }, 'No rows. Use Insert or Bulk insert.')
+        : items.map((row) =>
+          h('div', { key: row.id, class: 'idb-row' }, [
+            h('span', {}, row.label || 'id:' + row.id),
+            h('div', { class: 'idb-row-actions' }, [
+              h('button', { onClick: () => update(row.id, (row.label || '') + '✓') }, 'Update'),
+              h('button', { onClick: () => remove(row.id) }, 'Delete'),
+            ])
+          ])
+        )
+    )
+  );
+}
+
+function DemoWebRTCIP() {
+  const { ips, loading, error } = useWebRTCIP({ timeout: 4000 });
+  if (loading) return h('div', { class: 'status' }, 'Detecting IP…');
+  if (error) return h('div', { style: { color: 'var(--red)', fontSize: '0.85rem' } }, error);
+  return h('div', {}, ips.length ? h('span', { class: 'badge green' }, ips.join(', ')) : 'No IPs');
+}
+
+function DemoWasmCompute() {
+  const { compute, result, loading, error, ready } = useWasmCompute({
+    wasmUrl: new URL('./add.wasm', import.meta.url).href,
+    exportName: 'compute',
+  });
+  const flowSteps = [
+    { id: 'component', label: 'Component' },
+    { id: 'hook', label: 'useWasmCompute()' },
+    { id: 'worker', label: 'Web Worker' },
+    { id: 'wasm', label: 'WASM' },
+    { id: 'result', label: 'result' },
+  ];
+  const activeId = result != null ? 'result' : ready ? (loading ? 'wasm' : 'wasm') : 'worker';
+
+  if (error) return h('div', { style: { color: 'var(--red)' } }, error);
+  return h('div', {},
+    h('div', { class: 'wasm-flow' },
+      flowSteps.map((s, i) => [
+        i > 0 && h('span', { class: 'wasm-flow-arrow' }, '→'),
+        h('span', { class: 'wasm-flow-node' + (s.id === activeId ? ' active' : '') }, s.label),
+      ]).flat()
+    ),
+    !ready && h('div', { class: 'status' }, 'Loading WASM in worker…'),
+    ready && h('div', { style: { marginBottom: '0.5rem' } }, [
+      h('button', { onClick: () => compute(41), disabled: loading }, loading ? 'Computing…' : 'compute(41)'),
+      h('button', { onClick: () => compute(100), disabled: loading }, 'compute(100)'),
+      h('button', { onClick: () => compute(0), disabled: loading }, 'compute(0)'),
+    ]),
+    result != null && h('div', { class: 'badge green', style: { marginTop: '0.5rem' } }, 'Result: ' + result)
+  );
+}
+
+// ——— Page data: heading, flow, summary, code, LiveComponent ———
+
+const HOOKS = [
+  {
+    name: 'useTransition',
+    flow: 'Component → useTransition() → startTransition(cb) → deferred state update',
+    summary: 'Defers state updates so the UI stays responsive. Returns [startTransition, isPending].',
+    code: `const [startTransition, isPending] = useTransition();\nstartTransition(() => setCount(c => c + 1));`,
+    Live: DemoTransition,
+  },
+  {
+    name: 'useMutationObserver',
+    flow: 'Component → ref + useMutationObserver(ref, callback, options) → DOM changes trigger callback',
+    summary: 'Observes DOM mutations (childList, attributes, etc.) on the element attached to ref.',
+    code: `const ref = useRef(null);\nuseMutationObserver(ref, (mutations) => { ... }, { childList: true });`,
+    Live: DemoMutationObserver,
+  },
+  {
+    name: 'useEventBus',
+    flow: 'Components → useEventBus() → emit(name, ...args) / on(name, fn) → cross-component events',
+    summary: 'Publish/subscribe event bus so components can talk without prop drilling.',
+    code: `const { emit, on } = useEventBus();\non('greet', setMsg);\nemit('greet', 'Hello');`,
+    Live: DemoEventBus,
+  },
+  {
+    name: 'useWrappedChildren',
+    flow: 'Parent → useWrappedChildren(children, props) → children with merged props',
+    summary: 'Injects props into every child (e.g. style, className) with preserve or override strategy.',
+    code: `const wrapped = useWrappedChildren(children, { style: { marginRight: 8 } });`,
+    Live: DemoWrappedChildren,
+  },
+  {
+    name: 'usePreferredTheme',
+    flow: 'Component → usePreferredTheme() → matchMedia(prefers-color-scheme) → theme',
+    summary: 'Returns the user’s preferred color scheme: light, dark, or no-preference.',
+    code: `const theme = usePreferredTheme(); // 'light' | 'dark' | 'no-preference'`,
+    Live: DemoPreferredTheme,
+  },
+  {
+    name: 'useNetworkState',
+    flow: 'Component → useNetworkState() → online + connection (effectiveType, etc.)',
+    summary: 'Tracks online/offline and connection type (when the Network Information API is available).',
+    code: `const state = useNetworkState();\n// state.online, state.effectiveType, ...`,
+    Live: DemoNetworkState,
+  },
+  {
+    name: 'useClipboard',
+    flow: 'Component → useClipboard() → copy(text) / paste() → Clipboard API',
+    summary: 'Copy and paste text with the Clipboard API; returns copied and error state.',
+    code: `const { copy, copied, paste } = useClipboard();\ncopy('Hello');`,
+    Live: DemoClipboard,
+  },
+  {
+    name: 'useRageClick',
+    flow: 'ref + useRageClick(ref, { onRageClick }) → N fast clicks in same spot → callback',
+    summary: 'Detects rage clicks (e.g. for Sentry) when the user clicks repeatedly in the same area.',
+    code: `useRageClick(ref, { onRageClick: (p) => report(p.count), threshold: 5 });`,
+    Live: DemoRageClick,
+  },
+  {
+    name: 'useThreadedWorker',
+    flow: 'useThreadedWorker(fn, { mode }) → run(data) → queue → fn runs → result',
+    summary: 'Runs async work in a queue; sequential or parallel mode with optional priority.',
+    code: `const { run, loading, result } = useThreadedWorker(fn, { mode: 'sequential' });\nrun(data);`,
+    Live: DemoThreadedWorker,
+  },
+  {
+    name: 'useIndexedDB',
+    flow: 'useIndexedDB({ name, version, tables }) → db.table(name).insert/query/...',
+    summary: 'IndexedDB with tables, insert, update, delete, query, count, and transactions.',
+    code: `const { db, isReady } = useIndexedDB({ name: 'my-db', tables: { items: { keyPath: 'id' } } });\ndb.table('items').insert({ id: 1 });`,
+    Live: DemoIndexedDB,
+  },
+  {
+    name: 'useWebRTCIP',
+    flow: 'useWebRTCIP() → STUN + ICE candidates → extract IPv4 → ips[]',
+    summary: 'Tries to detect client IP via WebRTC; use as a hint and fall back to an IP API if needed.',
+    code: `const { ips, loading, error } = useWebRTCIP({ timeout: 3000 });`,
+    Live: DemoWebRTCIP,
+  },
+  {
+    name: 'useWasmCompute',
+    flow: 'Component → useWasmCompute({ wasmUrl }) → Web Worker → WASM → compute(input) → result',
+    summary: 'Runs WebAssembly in a worker; returns compute(input), result, loading, ready.',
+    code: `const { compute, result, ready } = useWasmCompute({ wasmUrl: '/add.wasm' });\ncompute(41); // → 42`,
+    Live: DemoWasmCompute,
+  },
+];
+
+function App() {
+  return h('div', {},
+    HOOKS.map((hook) =>
+      h('section', { key: hook.name, class: 'hook-section' }, [
+        h('h2', {}, hook.name),
+        h('div', { class: 'flow' }, hook.flow),
+        h('p', { class: 'summary' }, hook.summary),
+        h('div', { class: 'cards' }, [
+          h('div', { class: 'card' }, [
+            h('div', { class: 'card-title' }, 'Example'),
+            h('pre', { class: 'card-code' }, hook.code),
+          ]),
+          h('div', { class: 'card' }, [
+            h('div', { class: 'card-title' }, 'Live'),
+            h('div', { class: 'card-live' }, h(hook.Live)),
+          ]),
+        ]),
+      ])
+    )
+  );
+}
+
+render(h(App), document.getElementById('root'));

package/dist/index.d.ts

@@ -8,3 +8,5 @@ export * from './useClipboard';
 export * from './useRageClick';
 export * from './useThreadedWorker';
 export * from './useIndexedDB';
+export * from './useWebRTCIP';
+export * from './useWasmCompute';