preact-missing-hooks 4.4.0 → 4.6.0

package/docs/main.js

@@ -20,6 +20,8 @@ const {
   useWorkerNotifications,
   useLLMMetadata,
   useRefPrint,
+  useRBAC,
+  usePrefetch,
 } = await import(
   isLocal ? '../dist/index.module.js' : 'https://unpkg.com/preact-missing-hooks/dist/index.module.js'
 );
@@ -83,6 +85,32 @@ function DemoNetworkState() {
   );
 }
 
+function DemoPrefetch() {
+  const { prefetch, isPrefetched } = usePrefetch();
+  const [lastUrl, setLastUrl] = useState('');
+  const demoUrl = 'https://example.com/prefetched-page';
+  const fetchUrl = 'https://httpbin.org/get';
+  const doPrefetchDoc = () => { prefetch(demoUrl); setLastUrl(demoUrl); };
+  const doPrefetchFetch = () => { prefetch(fetchUrl, { as: 'fetch' }); setLastUrl(fetchUrl); };
+  return h('div', {},
+    h('div', { style: { marginBottom: '0.5rem', fontSize: '0.85rem' } }, [
+      h('button', {
+        onClick: doPrefetchDoc,
+        onMouseEnter: doPrefetchDoc,
+      }, 'Prefetch document'),
+      ' ',
+      h('button', {
+        onClick: doPrefetchFetch,
+        onMouseEnter: doPrefetchFetch,
+      }, 'Prefetch (fetch)'),
+    ]),
+    lastUrl
+      ? h('span', { class: 'badge green', style: { marginLeft: '0.35rem' } },
+        'Prefetched: ' + lastUrl + (isPrefetched(lastUrl) ? ' ✓' : ''))
+      : h('span', { class: 'status' }, 'Hover or click to prefetch a URL (document or fetch).')
+  );
+}
+
 function DemoClipboard() {
   const { copy, paste, copied, error } = useClipboard();
   const [pasted, setPasted] = useState('');
@@ -341,6 +369,89 @@ function DemoRefPrint() {
   );
 }
 
+const RBAC_STORAGE_KEY = 'demo-rbac-user';
+const RBAC_ROLE_DEFS = [
+  { role: 'admin', condition: (u) => u && u.role === 'admin' },
+  { role: 'editor', condition: (u) => u && (u.role === 'editor' || u.role === 'admin') },
+  { role: 'viewer', condition: (u) => u && (u.id != null || u.role === 'viewer') },
+];
+const RBAC_ROLE_CAPS = {
+  admin: ['*'],
+  editor: ['posts:edit', 'posts:create', 'posts:read', 'comments:edit'],
+  viewer: ['posts:read', 'comments:read'],
+};
+
+function DemoRBAC() {
+  const [storageType, setStorageType] = useState('localStorage');
+  const userSource = storageType === 'sessionStorage'
+    ? { type: 'sessionStorage', key: RBAC_STORAGE_KEY }
+    : { type: 'localStorage', key: RBAC_STORAGE_KEY };
+  const rbac = useRBAC({
+    userSource,
+    roleDefinitions: RBAC_ROLE_DEFS,
+    roleCapabilities: RBAC_ROLE_CAPS,
+  });
+
+  useEffect(() => {
+    rbac.refetch();
+  }, [storageType]);
+
+  const loginAs = (role) => {
+    const user = { id: Date.now(), role, email: role + '@demo.app' };
+    rbac.setUserInStorage(user, storageType, RBAC_STORAGE_KEY);
+  };
+  const logout = () => rbac.setUserInStorage(null, storageType, RBAC_STORAGE_KEY);
+
+  if (!rbac.isReady) return h('div', { class: 'status' }, 'Loading RBAC…');
+  if (rbac.error) return h('div', { style: { color: 'var(--red)' } }, rbac.error.message);
+
+  return h('div', { class: 'rbac-demo' },
+    h('div', { class: 'rbac-toolbar' },
+      h('span', { style: { marginRight: '0.5rem', fontSize: '0.85rem', color: 'var(--textMuted)' } }, 'Source:'),
+      h('button', {
+        class: storageType === 'localStorage' ? 'badge green' : '',
+        onClick: () => setStorageType('localStorage'),
+        style: { marginRight: '0.25rem' },
+      }, 'localStorage'),
+      h('button', {
+        class: storageType === 'sessionStorage' ? 'badge green' : '',
+        onClick: () => setStorageType('sessionStorage'),
+      }, 'sessionStorage'),
+    ),
+    h('div', { class: 'rbac-actions' },
+      h('button', { onClick: () => loginAs('admin') }, 'Login as Admin'),
+      h('button', { onClick: () => loginAs('editor') }, 'Login as Editor'),
+      h('button', { onClick: () => loginAs('viewer') }, 'Login as Viewer'),
+      h('button', { onClick: logout }, 'Logout'),
+    ),
+    h('div', { class: 'rbac-state' },
+      h('div', { class: 'rbac-state-row' },
+        h('strong', {}, 'User: '),
+        h('code', { style: { fontSize: '0.8rem', wordBreak: 'break-all' } },
+          rbac.user ? JSON.stringify(rbac.user) : '(none)'),
+      ),
+      h('div', { class: 'rbac-state-row' },
+        h('strong', {}, 'Roles: '),
+        h('span', {}, rbac.roles.length ? rbac.roles.join(', ') : '(none)'),
+      ),
+      h('div', { class: 'rbac-state-row' },
+        h('strong', {}, 'Capabilities: '),
+        h('span', {}, rbac.capabilities.length ? rbac.capabilities.join(', ') : '(none)'),
+      ),
+    ),
+    h('div', { class: 'rbac-conditional' },
+      h('div', { class: 'card-title', style: { marginBottom: '0.5rem' } }, 'Conditional UI (by capability)'),
+      rbac.can('posts:read') && h('span', { class: 'badge green', style: { marginRight: '0.35rem' } }, 'View posts'),
+      rbac.can('posts:edit') && h('span', { class: 'badge amber', style: { marginRight: '0.35rem' } }, 'Edit posts'),
+      rbac.can('posts:create') && h('span', { class: 'badge', style: { marginRight: '0.35rem', background: 'var(--accentDim)', color: 'var(--accent)' } }, 'Create posts'),
+      rbac.can('*') && h('span', { class: 'badge', style: { background: 'var(--red)', color: '#fff' } }, 'Full access (*)'),
+      (!rbac.roles.length && h('span', { style: { color: 'var(--textMuted)', fontSize: '0.85rem' } }, 'Log in to see capabilities')) || null,
+    ),
+    h('div', { style: { marginTop: '0.75rem', fontSize: '0.8rem', color: 'var(--textMuted)' } },
+      'Roles: admin → * | editor → posts/comments edit, create, read | viewer → read only. Switch storage to see session vs persistent auth.'),
+  );
+}
+
 function DemoLLMMetadata() {
   const [route, setRoute] = useState('/');
   useLLMMetadata({
@@ -427,6 +538,13 @@ const HOOKS = [
     code: `const state = useNetworkState();\n// state.online, state.effectiveType, ...`,
     Live: DemoNetworkState,
   },
+  {
+    name: 'usePrefetch',
+    flow: 'Component → usePrefetch() → prefetch(url, options?) → link rel=prefetch or fetch()',
+    summary: 'Preload URLs (documents or data) so they are cached before navigation or use. Ideal for link hover or route preloading.',
+    code: `const { prefetch, isPrefetched } = usePrefetch();\n<a onMouseEnter={() => prefetch(href)} href={href}>Link</a>\n// or prefetch(url, { as: 'fetch' }) for API`,
+    Live: DemoPrefetch,
+  },
   {
     name: 'useClipboard',
     flow: 'Component → useClipboard() → copy(text) / paste() → Clipboard API',
@@ -483,6 +601,20 @@ const HOOKS = [
     code: `const printRef = useRef(null);\nconst { print } = useRefPrint(printRef, { documentTitle: 'My Doc', downloadAsPdf: true });\n// ... <div ref={printRef}>Content</div> ... <button onClick={print}>Print</button>`,
     Live: DemoRefPrint,
   },
+  {
+    name: 'useRBAC',
+    flow: 'userSource + roleDefinitions + roleCapabilities → user, roles, capabilities, hasRole, can(), setUserInStorage',
+    summary: 'Frontend-only role-based access control. Define roles with conditions, assign capabilities per role. Pluggable: localStorage, sessionStorage, API, or custom. Full flexibility for frontend-only or API-backed auth.',
+    code: `const { roles, can, hasRole, setUserInStorage } = useRBAC({
+  userSource: { type: 'localStorage', key: 'user' },
+  roleDefinitions: [
+    { role: 'admin', condition: (u) => u?.role === 'admin' },
+    { role: 'editor', condition: (u) => u?.role === 'editor' },
+  ],
+  roleCapabilities: { admin: ['*'], editor: ['posts:edit', 'posts:create'] },
+});\nif (can('posts:edit')) { ... }`,
+    Live: DemoRBAC,
+  },
   {
     name: 'useLLMMetadata',
     flow: 'Component → useLLMMetadata({ route, mode, title?, ... } | null) → <script type="application/llm+json" data-llm="true"> in <head>',

package/llm.package.json

@@ -1,277 +1,151 @@
 {
   "name": "preact-missing-hooks",
-  "version": "4.2.0",
+  "version": "4.4.0",
   "description": "A lightweight, extendable collection of missing React-like hooks for Preact — plus fresh, powerful new ones designed specifically for modern Preact apps.",
   "exports": {
     "useTransition": {
       "type": "function",
-      "description": "A hook that provides a transition state and a function to start a transition. It is used to defer non-urgent updates to avoid blocking the UI during high-priority updates.",
+      "description": "Hook that tracks a pending state for an async operation, providing a boolean `isPending` and a `startTransition` function to wrap state updates. Useful for deferring non-urgent UI updates so the interface stays responsive during slow operations.",
       "hook": true,
-      "params": "options?: { timeoutMs?: number }",
-      "returns": "Array containing a boolean indicating if a transition is in progress and a function to start a transition"
+      "params": "callback: () => void",
+      "returns": "{ isPending: boolean, startTransition: (callback: () => void) => void }",
+      "example": "const [isPending, startTransition] = useTransition(); startTransition(() => { /* heavy work */ });"
     },
     "useMutationObserver": {
       "type": "function",
-      "description": "A hook that observes DOM mutations on a given element and calls a callback when mutations occur. It is useful for reacting to changes in the DOM structure or attributes.",
+      "description": "Hook that creates a MutationObserver on a DOM element and calls a callback when mutations occur. Ideal for reacting to DOM changes like attributes, child list, or subtree modifications without manual cleanup.",
       "hook": true,
-      "params": "element: Element, callback: (mutations: MutationRecord[]) => void, options?: MutationObserverInit",
-      "returns": "void"
-    },
-    "UseMutationObserverOptions": {
-      "type": "type",
-      "description": "An interface defining the options for the useMutationObserver hook. It extends MutationObserverInit and includes additional properties specific to the hook.",
-      "hook": false,
-      "params": "N/A",
-      "returns": "N/A"
+      "params": "target: Element, callback: (mutations: MutationRecord[]) => void, options?: MutationObserverInit",
+      "returns": "void",
+      "example": "useMutationObserver(ref.current, (m) => console.log(m), { childList: true });"
     },
     "useEventBus": {
       "type": "function",
-      "description": "A hook that provides a simple event bus for component communication. It allows components to emit and listen to events without prop drilling.",
+      "description": "Hook that subscribes to a PubSub event bus, returning an emitter object to publish events and an array of listeners for specific topics. Simplifies decoupled communication between components.",
       "hook": true,
-      "params": "N/A",
-      "returns": "Object with emit and on methods for event handling"
+      "params": "none",
+      "returns": "{ emit: (topic: string, data: any) => void, on: (topic: string, fn: (data: any) => void) => () => void }",
+      "example": "const { emit, on } = useEventBus(); on('update', (d) => console.log(d)); emit('update', { foo: 'bar' });"
     },
     "useWrappedChildren": {
       "type": "function",
-      "description": "A hook that wraps child components with additional functionality or styling. It is useful for applying consistent behavior or appearance to a group of child components.",
+      "description": "Hook that wraps child components or elements with additional logic or styling, returning a wrapped version of the children. Useful for injecting context, props, or wrappers without altering the original structure.",
       "hook": true,
       "params": "children: ReactNode, wrapper: (child: ReactNode) => ReactNode",
-      "returns": "ReactNode"
-    },
-    "InjectableProps": {
-      "type": "type",
-      "description": "An interface defining the props that can be injected into a component. It is used to specify the properties that can be dynamically added to a component.",
-      "hook": false,
-      "params": "N/A",
-      "returns": "N/A"
+      "returns": "ReactNode",
+      "example": "const wrapped = useWrappedChildren(children, (c) => <div className='wrapper'>{c}</div>);"
     },
     "usePreferredTheme": {
       "type": "function",
-      "description": "A hook that provides the user's preferred theme (light or dark) based on system preferences or user settings. It is useful for implementing theme-aware components.",
+      "description": "Hook that detects the user's preferred color scheme (light/dark) via `prefers-color-scheme` media query and returns the current theme. Automatically updates when the system theme changes.",
       "hook": true,
-      "params": "N/A",
-      "returns": "String representing the preferred theme ('light' or 'dark')"
-    },
-    "PreferredTheme": {
-      "type": "type",
-      "description": "A type alias for the possible theme values ('light' or 'dark'). It is used to ensure type safety when working with theme-related values.",
-      "hook": false,
-      "params": "N/A",
-      "returns": "N/A"
+      "params": "none",
+      "returns": "'light' | 'dark' | 'no-preference'",
+      "example": "const theme = usePreferredTheme();"
     },
     "useNetworkState": {
       "type": "function",
-      "description": "React hook that returns the current network state of the device, including connection type, effective connection type, and whether the device is online or offline. It uses the browser's Network Information API to provide real-time updates when the network conditions change.",
+      "description": "Hook that tracks the browser's online/offline status and optionally network type, returning an object with `online` boolean and `networkType`. Reacts to connectivity changes for offline-aware UIs.",
       "hook": true,
-      "params": "options?: { refreshRate?: number }",
-      "returns": "NetworkState: { online: boolean, since: number, downlink: number, downlinkMax: number, effectiveType: EffectiveConnectionType, rtt: number, saveData: boolean, type: ConnectionType }",
-      "example": "const { online, type, effectiveType } = useNetworkState()"
-    },
-    "EffectiveConnectionType": {
-      "type": "type",
-      "description": "TypeScript type representing the effective connection type as defined by the Network Information API. It includes values like 'slow-2g', '2g', '3g', '4g' that indicate the effective network speed the browser detects.",
-      "hook": false,
-      "example": "'slow-2g' | '2g' | '3g' | '4g'"
-    },
-    "ConnectionType": {
-      "type": "type",
-      "description": "TypeScript type representing the connection type as defined by the Network Information API. It includes values like 'bluetooth', 'cellular', 'ethernet', 'wifi', 'wimax', 'none', 'unknown', 'other' that indicate the physical connection type.",
-      "hook": false,
-      "example": "'bluetooth' | 'cellular' | 'ethernet' | 'wifi' | 'wimax' | 'none' | 'unknown' | 'other'"
-    },
-    "NetworkState": {
-      "type": "type",
-      "description": "TypeScript type representing the complete network state object returned by useNetworkState hook. It includes online status, timestamps, bandwidth information, effective connection type, round-trip time, data saver status, and connection type.",
-      "hook": false,
-      "example": "{ online: boolean, since: number, downlink: number, downlinkMax: number, effectiveType: EffectiveConnectionType, rtt: number, saveData: boolean, type: ConnectionType }"
+      "params": "none",
+      "returns": "{ online: boolean, networkType?: string }",
+      "example": "const { online, networkType } = useNetworkState();"
     },
     "useClipboard": {
       "type": "function",
-      "description": "React hook that provides access to the system clipboard, allowing reading and writing of clipboard content. It returns an object with methods to read and write text to the clipboard, handling browser compatibility and permissions.",
+      "description": "Hook that provides async read/write access to the system clipboard, returning `write` and `read` functions. Useful for copy/paste features without directly using the Clipboard API.",
       "hook": true,
-      "params": "options?: UseClipboardOptions",
-      "returns": "UseClipboardReturn: { readText: () => Promise<string>, writeText: (text: string) => Promise<void> }",
-      "example": "const { readText, writeText } = useClipboard()"
-    },
-    "UseClipboardOptions": {
-      "type": "type",
-      "description": "TypeScript type representing the options object for the useClipboard hook. Currently it may include configuration options for clipboard behavior, though the exact properties depend on the implementation.",
-      "hook": false,
-      "example": "{}"
-    },
-    "UseClipboardReturn": {
-      "type": "type",
-      "description": "TypeScript type representing the return value of the useClipboard hook. It includes readText and writeText methods that return promises for asynchronous clipboard operations.",
-      "hook": false,
-      "example": "{ readText: () => Promise<string>, writeText: (text: string) => Promise<void> }"
+      "params": "none",
+      "returns": "{ write: (data: string) => Promise<void>, read: () => Promise<string> }",
+      "example": "const { write } = useClipboard(); write('hello');"
     },
     "useRageClick": {
       "type": "function",
-      "description": "React hook that detects rapid, repeated clicks on an element, commonly known as rage clicks. It helps identify user frustration by tracking multiple clicks in quick succession and provides a callback when such behavior is detected.",
+      "description": "Hook that detects rapid, repeated clicks on an element and triggers a callback, often used to implement 'rage click' UX patterns like retrying failed actions. Configurable for click count and delay.",
       "hook": true,
-      "params": "options?: { threshold?: number, timeWindow?: number, callback?: (event: MouseEvent) => void }",
+      "params": "callback: () => void, options?: { count?: number, delay?: number }",
       "returns": "void",
-      "example": "useRageClick({ threshold: 3, timeWindow: 1000, callback: (event) => console.log('Rage click detected!') })"
-    },
-    "RageClickPayload": {
-      "type": "type",
-      "description": "Interface describing the payload structure for rage click events, typically containing timestamp, element info, and click count. Used when tracking rapid repeated clicks for UX analysis or error reporting.",
-      "hook": false
-    },
-    "UseRageClickOptions": {
-      "type": "type",
-      "description": "Configuration options for the useRageClick hook, including threshold for clicks per second, timeout duration, and callback handler. Allows customization of rage click detection sensitivity and behavior.",
-      "hook": false
+      "example": "useRageClick(() => retry(), { count: 3, delay: 500 });"
     },
     "useThreadedWorker": {
       "type": "function",
-      "description": "Hook that creates and manages a Web Worker thread for offloading heavy computations or operations. Returns worker instance and control methods for communication and lifecycle management.",
+      "description": "Creates a reusable thread pool for executing CPU-intensive tasks in Web Workers. Useful for offloading heavy computations without blocking the UI thread, returning a handle to dispatch jobs and retrieve results.",
       "hook": true,
-      "params": "options: UseThreadedWorkerOptions",
-      "returns": "UseThreadedWorkerReturn",
-      "example": "const { worker, postMessage, terminate } = useThreadedWorker({ worker: myWorker });"
-    },
-    "ThreadedWorkerMode": {
-      "type": "type",
-      "description": "Enumeration defining worker modes: 'shared' for SharedWorker instances or 'dedicated' for standard Web Workers. Determines how worker threads are instantiated and shared across components.",
-      "hook": false
-    },
-    "UseThreadedWorkerOptions": {
-      "type": "type",
-      "description": "Configuration object for useThreadedWorker hook containing worker script URL or blob, mode selection, and optional initialization parameters. Defines how the worker thread should be created and configured.",
-      "hook": false
-    },
-    "RunOptions": {
-      "type": "type",
-      "description": "Options object for controlling execution behavior of threaded operations, including timeout settings, retry logic, and error handling strategies. Used to customize how tasks run in worker threads.",
-      "hook": false
-    },
-    "UseThreadedWorkerReturn": {
-      "type": "type",
-      "description": "Return type from useThreadedWorker hook containing worker instance, message posting method, event listeners, and cleanup functions. Provides complete interface for interacting with the managed worker thread.",
-      "hook": false
+      "params": "options: { maxThreads?: number, workerUrl?: string }, callback?: (result: any) => void",
+      "returns": "WorkerPool instance with methods like dispatch() and terminate()",
+      "sideEffect": false,
+      "example": "const pool = useThreadedWorker({ maxThreads: 4 }); pool.dispatch(heavyTask);"
     },
     "useIndexedDB": {
       "type": "function",
-      "description": "Hook for managing IndexedDB database operations including opening connections, reading, writing, and deleting data. Provides reactive state management for database changes and error handling.",
+      "description": "Provides a React hook to interact with IndexedDB for client-side storage. Handles opening databases, transactions, and CRUD operations, making it easy to persist data offline with automatic error handling.",
       "hook": true,
-      "params": "dbName: string, options?: { version?: number, objectStores?: string[] }",
-      "returns": "{ db: IDBDatabase | null, error: Error | null, isOpen: boolean, close: () => void }",
-      "example": "const { db, isOpen, error } = useIndexedDB('myDatabase');"
-    },
-    "IndexedDBConfig": {
-      "type": "type",
-      "description": "Configuration object for IndexedDB operations, specifying database name, version, and store schema. Use when setting up persistent client-side storage with custom store structures.",
-      "hook": false,
-      "params": "{ dbName: string, version?: number, stores: { name: string, keyPath?: string, autoIncrement?: boolean }[] }"
-    },
-    "IDBController": {
-      "type": "class",
-      "description": "Controller class managing IndexedDB instance lifecycle, providing methods to open, close, and interact with the database. Use when you need programmatic control over IndexedDB operations beyond basic hooks.",
-      "hook": false,
-      "params": "constructor(config: IndexedDBConfig)",
-      "returns": "IDBController instance with open(), close(), getStore(), and transaction methods"
-    },
-    "UseIndexedDBReturn": {
-      "type": "type",
-      "description": "Return type from useIndexedDB hook containing database instance, store references, and utility methods. Use to access structured data operations and transaction capabilities within React components.",
-      "hook": false,
-      "params": "{ db: IDBDatabase, stores: Record<string, IDBObjectStore>, transaction: (stores: string[], mode?: IDBTransactionMode) => IDBTransaction }"
+      "params": "storeName: string, options?: { version?: number, upgrade?: (db: IDBDatabase) => void }",
+      "returns": "{ get, set, delete, clear, getAll }",
+      "sideEffect": false,
+      "example": "const { get, set } = useIndexedDB('myStore'); set('key', data);"
     },
     "useWebRTCIP": {
       "type": "function",
-      "description": "Hook that retrieves local WebRTC IP addresses by creating a peer connection and parsing ICE candidates. Use when you need to detect client IP addresses for WebRTC signaling or network diagnostics.",
+      "description": "Detects and retrieves the client's public and local IP addresses using WebRTC. Useful for network diagnostics or peer-to-peer connections, returning an array of detected IPs with metadata about each.",
       "hook": true,
-      "params": "options?: UseWebRTCIPOptions",
-      "returns": "UseWebRTCIPReturn containing ipAddresses: string[] and loading: boolean"
-    },
-    "UseWebRTCIPOptions": {
-      "type": "type",
-      "description": "Configuration options for useWebRTCIP hook, allowing customization of timeout duration and STUN/TURN server configuration. Use to control how long the hook waits for ICE gathering and which servers to use.",
-      "hook": false,
-      "params": "{ timeout?: number, iceServers?: RTCIceServer[] }"
-    },
-    "UseWebRTCIPReturn": {
-      "type": "type",
-      "description": "Return object from useWebRTCIP hook containing detected IP addresses and loading state. Use to access the gathered IP addresses and determine when the operation is complete.",
-      "hook": false,
-      "params": "{ ipAddresses: string[], loading: boolean }"
+      "params": "options?: { timeout?: number }",
+      "returns": "{ ips: string[], localIps: string[], publicIps: string[] }",
+      "sideEffect": false,
+      "example": "const { ips } = useWebRTCIP(); console.log('Detected IPs:', ips);"
     },
     "useWasmCompute": {
       "type": "function",
-      "description": "Hook that loads and executes WebAssembly modules for high-performance computation in the browser. Use when you need to run CPU-intensive tasks like image processing, cryptography, or numerical computations without blocking the main thread.",
+      "description": "Loads and executes WebAssembly modules for high-performance computation. Ideal for tasks like image processing or cryptography, providing a simple interface to call exported functions with typed arrays.",
       "hook": true,
-      "params": "options: UseWasmComputeOptions",
-      "returns": "Promise resolving to Wasm module instance with exported functions"
-    },
-    "UseWasmComputeOptions": {
-      "type": "type",
-      "description": "Configuration object for useWasmCompute hook specifying WASM module source, imports, and execution parameters. Use to configure memory limits, import objects, and execution environment for WebAssembly modules.",
-      "hook": false,
-      "params": "{ moduleUrl: string, imports?: Record<string, any>, memorySize?: number }"
-    },
-    "UseWasmComputeReturn": {
-      "type": "type",
-      "description": "Type definition for the return value of a WASM compute function. Represents the structured result of a WebAssembly-based computation, typically containing status, data, and error information.",
-      "hook": false
+      "params": "wasmUrl: string, imports?: Record<string, any>",
+      "returns": "WasmModule instance with methods to call exported functions",
+      "sideEffect": false,
+      "example": "const wasm = useWasmCompute('/compute.wasm'); wasm.multiply(2, 3);"
     },
     "useWorkerNotifications": {
       "type": "function",
-      "description": "React hook that subscribes to notifications from a Web Worker. Provides real-time updates from background processing tasks, allowing components to react to worker events without manual event listener management.",
+      "description": "Manages push notifications from Web Workers, enabling background tasks to trigger user notifications. Useful for long-running processes that need to alert users upon completion without blocking the main thread.",
       "hook": true,
-      "params": "options: UseWorkerNotificationsOptions",
-      "returns": "UseWorkerNotificationsReturn",
-      "example": "const { notifications, error } = useWorkerNotifications({ worker: myWorker })"
-    },
-    "WorkerEventType": {
-      "type": "type",
-      "description": "Enumeration of possible event types that can be emitted by a Web Worker. Defines the standard set of notification categories for worker-to-main-thread communication, enabling type-safe event handling.",
-      "hook": false
-    },
-    "WorkerNotificationEvent": {
-      "type": "type",
-      "description": "Type definition for a worker notification event object. Contains metadata about a specific event from a Web Worker, including type, timestamp, and payload data for structured communication.",
-      "hook": false
-    },
-    "UseWorkerNotificationsOptions": {
-      "type": "type",
-      "description": "Configuration object type for the useWorkerNotifications hook. Specifies parameters like the worker instance, event filters, and optional callback handlers for customizing notification subscription behavior.",
-      "hook": false
-    },
-    "UseWorkerNotificationsReturn": {
-      "type": "type",
-      "description": "Return type for the useWorkerNotifications hook. Provides an object containing the current notifications array, error state, and optional methods for managing the subscription to worker events.",
-      "hook": false
+      "params": "workerUrl: string, notificationOptions?: NotificationOptions",
+      "returns": "{ postMessage, onNotification, requestPermission }",
+      "sideEffect": false,
+      "example": "const { postMessage } = useWorkerNotifications('/worker.js'); postMessage({ type: 'start' });"
     },
     "useLLMMetadata": {
       "type": "function",
-      "description": "React hook that retrieves metadata about the underlying LLVM/WebAssembly compilation environment. Provides information about the current runtime capabilities, version, and available features for debugging and optimization.",
+      "description": "Extracts and processes metadata from LLVM bitcode or compiled modules. Useful for analyzing compiled code structure, retrieving function signatures, and understanding module dependencies in development tools.",
       "hook": true,
-      "returns": "object containing metadata properties",
-      "example": "const metadata = useLLMMetadata()"
-    },
-    "OGType": {
-      "type": "type",
-      "description": "Type definition for Open Graph metadata types. Represents the standardized vocabulary for social media sharing metadata, used to control how content appears when shared on platforms like Facebook and Twitter.",
-      "hook": false
+      "params": "bitcode: Uint8Array, options?: { extractFunctions?: boolean }",
+      "returns": "{ functions: string[], metadata: Record<string, any> }",
+      "sideEffect": false,
+      "example": "const { functions } = useLLMMetadata(bitcodeBuffer); console.log('Functions:', functions);"
     },
-    "LLMConfig": {
-      "type": "type",
-      "description": "Configuration object for setting up an LLM client, including model details, API keys, and connection parameters. Use this to define how the LLM should behave and connect.",
-      "hook": false,
-      "params": "Optional: { model: string, apiKey: string, endpoint: string, temperature?: number, maxTokens?: number }",
-      "returns": "A typed configuration object for LLM initialization",
+    "useRefPrint": {
+      "type": "function",
+      "description": "Provides a hook to manage print operations for DOM elements referenced via refs. Useful for triggering print dialogs or generating print layouts for specific components without affecting the entire page.",
+      "hook": true,
+      "params": "ref: React.RefObject<HTMLElement>, options?: { media?: string }",
+      "returns": "{ print, isPrinting: boolean }",
       "sideEffect": false,
-      "example": "const config: LLMConfig = { model: 'gpt-4', apiKey: 'your-key', endpoint: 'https://api.openai.com/v1' }"
+      "example": "const { print } = useRefPrint(ref); print();"
     },
-    "LLMPayload": {
-      "type": "type",
-      "description": "Payload structure for sending requests to an LLM, containing the prompt, conversation context, and optional parameters. Use this to format data sent to the LLM service.",
-      "hook": false,
-      "params": "Optional: { prompt: string, messages?: Message[], temperature?: number, maxTokens?: number, stream?: boolean }",
-      "returns": "A typed payload object for LLM requests",
+    "useRBAC": {
+      "type": "function",
+      "description": "Implements Role-Based Access Control (RBAC) for React applications. Manages user roles and permissions, providing utilities to check access and conditionally render components based on defined policies.",
+      "hook": true,
+      "params": "roles: string[], permissions: string[], options?: { defaultRole?: string }",
+      "returns": "{ hasRole, hasPermission, canAccess: (resource: string) => boolean }",
       "sideEffect": false,
-      "example": "const payload: LLMPayload = { prompt: 'Translate to French:', messages: [{ role: 'user', content: 'Hello world' }] }"
+      "example": "const { canAccess } = useRBAC(userRoles, userPermissions); if (canAccess('admin')) { /* render admin UI */ }"
+    },
+    "usePrefetch": {
+      "type": "function",
+      "description": "A custom hook that prefetches a resource or module in a Preact application, typically used to improve performance by loading data or code in advance. It accepts a URL or module identifier and returns a loading state or prefetch result, enabling developers to optimize user experience by reducing latency.",
+      "hook": true,
+      "params": "url: string, options?: { priority?: 'high' | 'low', timeout?: number }",
+      "returns": "Promise<void> | { loading: boolean, error?: Error }",
+      "example": "const [loading, error] = usePrefetch('/api/data', { priority: 'high' });"
     }
   },
   "hooks": [
@@ -288,7 +162,10 @@
     "useWebRTCIP",
     "useWasmCompute",
     "useWorkerNotifications",
-    "useLLMMetadata"
+    "useLLMMetadata",
+    "useRefPrint",
+    "useRBAC",
+    "usePrefetch"
   ],
   "frameworks": [
     "preact",
@@ -296,7 +173,7 @@
   ],
   "generatedBy": "hayagriva-llm@1.2.0",
   "mode": "ai",
-  "summary": "Preact-Missing-Hooks is a lightweight, extendable collection of missing React-like hooks for Preact, offering both familiar hooks and fresh, powerful new ones designed specifically for modern Preact apps.",
+  "summary": "Preact-Missing-Hooks is a lightweight, extendable collection of missing React-like hooks for Preact — plus fresh, powerful new ones designed specifically for modern Preact apps. It bridges the gap between Preact and React's hook ecosystem while adding innovative hooks for advanced web features like WebRTC, WebAssembly, IndexedDB, and more.",
   "sideEffects": [],
   "keywords": [
     "preact",
@@ -315,16 +192,26 @@
     "useWebRTCIP",
     "useWasmCompute",
     "useWorkerNotifications",
+    "useLLMMetadata",
+    "useRefPrint",
+    "useRBAC",
+    "usePrefetch",
     "typescript",
-    "modern-web"
+    "modern-web",
+    "web-development",
+    "frontend",
+    "ui-components"
   ],
-  "whenToUse": "Choose Preact-Missing-Hooks when building modern Preact applications that need advanced, React-like hooks not natively available in Preact, or when you want to leverage powerful new hooks for tasks like clipboard management, WebRTC IP detection, WebAssembly computation, IndexedDB access, or rage-click detection. It's ideal for developers seeking a lightweight, extendable hook library that works seamlessly with both Preact and React.",
+  "whenToUse": "Choose Preact-Missing-Hooks when building modern Preact applications that need advanced, React-like hooks not natively available in Preact, or when you want to leverage powerful new hooks for tasks like clipboard management, WebRTC IP detection, WebAssembly computation, IndexedDB access, or rage-click detection. It's ideal for developers seeking a lightweight, extendable hook library that works seamlessly with both Preact and React, especially when building feature-rich applications requiring modern browser APIs and advanced state management.",
   "reasonToUse": [
     "Provides missing React-like hooks for Preact",
     "Offers powerful new hooks for modern web features",
     "Lightweight and extendable",
     "Framework-agnostic (works with Preact and React)",
-    "Production-ready with TypeScript support"
+    "Production-ready with TypeScript support",
+    "Includes advanced hooks for WebRTC, WebAssembly, IndexedDB, and more",
+    "Helps detect user frustration with rage-click detection",
+    "Provides network state monitoring and theme detection hooks"
   ],
   "useCases": [
     "Building a Preact app that needs React's useTransition functionality",
@@ -336,13 +223,15 @@
     "Wrapping children components to inject additional props",
     "Detecting user's preferred theme for dark/light mode support",
     "Monitoring network state changes for offline/online handling",
-    "Tracking worker notifications and task execution in real-time"
+    "Tracking worker notifications and task execution in real-time",
+    "Retrieving local WebRTC IP addresses for signaling or diagnostics"
   ],
   "documentation": "See README",
   "relatedPackages": [
     "preact",
     "react",
     "react-hooks",
-    "preact/hooks"
+    "preact/hooks",
+    "preact/compat"
   ]
 }