@usefy/use-permission 0.20.0

package/README.md

@@ -0,0 +1,124 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/mirunamu00/usefy/master/assets/logo.png" alt="usefy logo" width="120" />
+</p>
+
+<h1 align="center">@usefy/use-permission</h1>
+
+<p align="center">
+  <strong>Permissions API status with live updates — SSR-safe, typed, and race-safe.</strong>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@usefy/use-permission"><img src="https://img.shields.io/npm/v/@usefy/use-permission.svg?style=flat-square&color=007acc" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/@usefy/use-permission"><img src="https://img.shields.io/npm/dm/@usefy/use-permission.svg?style=flat-square&color=007acc" alt="npm downloads" /></a>
+  <a href="https://bundlephobia.com/package/@usefy/use-permission"><img src="https://img.shields.io/bundlephobia/minzip/@usefy/use-permission?style=flat-square&color=007acc" alt="bundle size" /></a>
+  <a href="https://github.com/mirunamu00/usefy/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@usefy/use-permission.svg?style=flat-square&color=007acc" alt="license" /></a>
+</p>
+
+<p align="center">
+  <a href="#installation">Installation</a> •
+  <a href="#quick-start">Quick Start</a> •
+  <a href="#api">API</a> •
+  <a href="#testing">Testing</a> •
+  <a href="#license">License</a>
+</p>
+
+<p align="center">
+  <a href="https://mirunamu00.github.io/usefy/?path=/docs/hooks-usepermission--docs" target="_blank" rel="noopener noreferrer">
+    <strong>📚 View Storybook Demo</strong>
+  </a>
+</p>
+
+---
+
+## Overview
+
+`usePermission` is part of the [@usefy](https://www.npmjs.com/org/usefy) ecosystem — a collection of production-ready, TypeScript-first, SSR-safe React hooks. It reads the [Permissions API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API) status of a permission and keeps it up to date live, so your UI reacts when the user grants or revokes access.
+
+## Features
+
+- **Live updates** — subscribes to the `PermissionStatus` `change` event, so `state` reflects grant/revoke without polling or a re-mount.
+- **Rich, honest return** — `{ state, status, isSupported, error }` makes the async, unsupported, and error paths explicit instead of hiding them behind a bare `PermissionState`.
+- **Any permission name** — accepts a superset of `PermissionDescriptor`, so `camera`, `microphone`, `push`, `midi`, and future names all typecheck.
+- **Stable descriptor identity** — keyed on the descriptor's serialized contents, so an inline `{ name: 'camera' }` literal does not re-query every render (no caller-side `useMemo`).
+- **SSR-safe & StrictMode-safe** — reports `unsupported` on the server; the async query is race-guarded and the change listener is cleaned up on unmount.
+- **TypeScript-first** — full type inference and exported types.
+- **Tiny & tree-shakeable** — zero dependencies, published as its own package.
+
+## Installation
+
+```bash
+# npm
+npm install @usefy/use-permission
+
+# yarn
+yarn add @usefy/use-permission
+
+# pnpm
+pnpm add @usefy/use-permission
+```
+
+Requires React 18 or 19 (`peerDependencies: "react": "^18.0.0 || ^19.0.0"`).
+
+## Quick Start
+
+```tsx
+import { usePermission } from "@usefy/use-permission";
+
+function CameraStatus() {
+  const { state, status } = usePermission({ name: "camera" });
+
+  // Branch on `status` (deterministic "idle" on the first render, both on the
+  // server and client) so the UI is hydration-safe.
+  if (status === "idle" || status === "pending") return <span>Checking…</span>;
+  if (status === "unsupported") return <span>Permissions API unavailable</span>;
+  if (status === "error") return <span>Could not read camera permission</span>;
+
+  return <span>Camera: {state}</span>; // 'granted' | 'denied' | 'prompt'
+}
+```
+
+## API
+
+### `usePermission(descriptor)`
+
+```ts
+function usePermission(descriptor: UsePermissionDescriptor): UsePermissionReturn;
+```
+
+#### Parameters
+
+| Param | Type | Description |
+| ----- | ---- | ----------- |
+| `descriptor` | `UsePermissionDescriptor` | The permission to query, e.g. `{ name: 'camera' }`, `{ name: 'geolocation' }`, `{ name: 'push', userVisibleOnly: true }`, `{ name: 'midi', sysex: true }`. `name` accepts the standard `PermissionName` values (with autocomplete) plus any browser-specific string. Pass an inline literal freely — the hook keys re-queries on the descriptor's serialized contents, not its object identity. |
+
+#### Returns — `UsePermissionReturn`
+
+| Field | Type | Description |
+| ----- | ---- | ----------- |
+| `state` | `PermissionState \| null` | The raw permission state (`'granted' \| 'denied' \| 'prompt'`), or `null` until the first query resolves and whenever the API is unsupported or the query errored. |
+| `status` | `UsePermissionStatus` | Coarse lifecycle: `'idle' \| 'pending' \| 'granted' \| 'denied' \| 'prompt' \| 'unsupported' \| 'error'`. The three permission values mirror `state`, so you can branch on either. |
+| `isSupported` | `boolean` | Whether `navigator.permissions.query` is available. Starts `false` (on the server and the first client render, for hydration safety) and becomes `true` after mount in a supporting browser. Branch your first render on `status` (`'idle'`), not `isSupported`. |
+| `error` | `Error \| null` | The error thrown by `navigator.permissions.query()`, if the query rejected (e.g. an unknown permission name in a browser that throws). |
+
+#### Helpers
+
+- `isPermissionsSupported(): boolean` — capability check used internally; exported for feature-detection.
+- `serializeDescriptor(descriptor): string` — the stable-key function the hook uses to decide when to re-query (exported for advanced use; not part of the umbrella surface).
+
+### Notes on behavior
+
+- **Descriptor identity.** `usePermission({ name: 'camera' })` receives a fresh object literal every render. Rather than require callers to `useMemo` it, the hook derives a stable string key from the descriptor's own fields (sorted, JSON-serialized) and keys its effect on that. It re-queries only when the meaningful contents change, e.g. `name` `'camera'` → `'microphone'` or `userVisibleOnly` `true` → `false`.
+- **Unsupported.** If `navigator.permissions` is missing (SSR or an unsupporting browser), `status` is `'unsupported'`, `isSupported` is `false`, and `state` is `null`.
+- **Errors.** Some browsers reject `query()` for permission names they don't recognize (e.g. `camera` in Firefox) instead of returning `'denied'`. That surfaces as `status: 'error'` with the thrown `error`.
+- **Race safety.** If the component unmounts while a query is in flight, the stale resolution/rejection is ignored — no state update after unmount — and the `change` listener is always removed on cleanup.
+
+## Testing
+
+📊 <a href="https://mirunamu00.github.io/usefy/coverage/use-permission/src/index.html" target="_blank" rel="noopener noreferrer"><strong>View Detailed Coverage Report</strong></a> (GitHub Pages) — **18 tests**, 100% statement coverage.
+
+## License
+
+MIT © [mirunamu](https://github.com/mirunamu00)
+
+This package is part of the [usefy](https://github.com/mirunamu00/usefy) monorepo.

package/dist/index.d.mts

@@ -0,0 +1,145 @@
+/**
+ * Coarse lifecycle status for a permission query.
+ *
+ * - `idle` — no query has resolved yet (initial render, before the effect runs).
+ * - `pending` — a `navigator.permissions.query()` call is in flight.
+ * - `granted` / `denied` / `prompt` — the resolved {@link PermissionState}. These
+ *   mirror the raw `state` field, so you can branch on either.
+ * - `unsupported` — the Permissions API is unavailable in this environment
+ *   (SSR, or a browser without `navigator.permissions`).
+ * - `error` — the query rejected (e.g. an unknown permission name in a browser
+ *   that throws instead of returning `denied`). See {@link UsePermissionReturn.error}.
+ */
+type UsePermissionStatus = "idle" | "pending" | "granted" | "denied" | "prompt" | "unsupported" | "error";
+/**
+ * Permission descriptor accepted by {@link usePermission}.
+ *
+ * A superset of the DOM `PermissionDescriptor` so that *all* permission names
+ * typecheck — including the ones missing from the standard `PermissionName`
+ * union in `lib.dom` (`'camera'`, `'microphone'`, `'clipboard-read'`, …) and the
+ * extra fields required by specific permissions (`userVisibleOnly` for `'push'`,
+ * `sysex` for `'midi'`, device fields for `'camera'`). The index signature keeps
+ * it forward-compatible with descriptor fields not yet in the lib types.
+ *
+ * @example
+ * ```ts
+ * const camera: UsePermissionDescriptor = { name: "camera" };
+ * const push: UsePermissionDescriptor = { name: "push", userVisibleOnly: true };
+ * const midi: UsePermissionDescriptor = { name: "midi", sysex: true };
+ * ```
+ */
+interface UsePermissionDescriptor {
+    /**
+     * The permission name. Accepts the standard `PermissionName` values with
+     * autocomplete, plus any other string (e.g. `'camera'`, `'microphone'`) that a
+     * given browser supports.
+     */
+    name: PermissionName | (string & {});
+    /** Required for the `'push'` permission — must be `true`, browsers reject `false`. */
+    userVisibleOnly?: boolean;
+    /** Requests SysEx access for the `'midi'` permission. */
+    sysex?: boolean;
+    /** Forward-compatible with descriptor fields not yet in the lib types. */
+    [key: string]: unknown;
+}
+/**
+ * Return value of {@link usePermission}.
+ *
+ * Destructure the field you need — the roadmap's `const { state } = usePermission(...)`
+ * reads naturally, while `status`, `isSupported`, and `error` cover the async and
+ * unsupported/error edges that a bare `PermissionState` cannot express.
+ */
+interface UsePermissionReturn {
+    /**
+     * The raw permission state (`'granted' | 'denied' | 'prompt'`), or `null` until
+     * the first query resolves and whenever the API is unsupported or the query
+     * errored.
+     */
+    state: PermissionState | null;
+    /** Coarse lifecycle status. See {@link UsePermissionStatus}. */
+    status: UsePermissionStatus;
+    /** Whether the Permissions API is available in the current environment. */
+    isSupported: boolean;
+    /** The error thrown by `navigator.permissions.query()`, if the query rejected. */
+    error: Error | null;
+}
+
+/**
+ * Track the status of a Permissions API permission, with live updates.
+ *
+ * Calls `navigator.permissions.query(descriptor)` and subscribes to the returned
+ * `PermissionStatus`'s `change` event, so the returned `state` reflects the user
+ * granting or revoking the permission without a re-mount. The hook is SSR-safe
+ * (reports `unsupported` on the server) and StrictMode/concurrent-safe (the async
+ * query is race-guarded and the listener is cleaned up on unmount).
+ *
+ * **Descriptor identity:** the effect is keyed on a *serialized* copy of the
+ * descriptor's fields (`name`, `userVisibleOnly`, `sysex`, …), not on the object
+ * reference. So passing an inline literal — `usePermission({ name: 'camera' })` —
+ * does not re-query on every render; it re-queries only when the descriptor's
+ * contents actually change. No `useMemo` on the caller's side is required.
+ *
+ * @param descriptor - The permission to query, e.g. `{ name: 'camera' }`,
+ *   `{ name: 'geolocation' }`, `{ name: 'push', userVisibleOnly: true }`,
+ *   `{ name: 'midi', sysex: true }`. Accepts any permission name (the standard
+ *   ones plus browser-specific ones like `'camera'`/`'microphone'`).
+ * @returns `{ state, status, isSupported, error }` — see {@link UsePermissionReturn}.
+ *
+ * @example
+ * ```tsx
+ * function CameraBadge() {
+ *   const { state, status } = usePermission({ name: "camera" });
+ *
+ *   // Branch on `status` (deterministic "idle" on the first render, both on the
+ *   // server and client) so the UI is hydration-safe.
+ *   if (status === "idle" || status === "pending") return <span>Checking…</span>;
+ *   if (status === "unsupported") return <span>Permissions API unavailable</span>;
+ *   if (status === "error") return <span>Could not read camera permission</span>;
+ *
+ *   return <span>Camera: {state}</span>; // 'granted' | 'denied' | 'prompt'
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Live updates: the badge re-renders when the user changes the permission in
+ * // the browser UI — no polling, no re-mount.
+ * function MicIndicator() {
+ *   const { state } = usePermission({ name: "microphone" });
+ *   return <div data-granted={state === "granted"}>Mic: {state ?? "unknown"}</div>;
+ * }
+ * ```
+ */
+declare function usePermission(descriptor: UsePermissionDescriptor): UsePermissionReturn;
+
+/**
+ * Whether the Permissions API (`navigator.permissions.query`) is available in the
+ * current environment. Returns `false` during SSR (no `navigator`) and in browsers
+ * that do not implement the Permissions API.
+ *
+ * @example
+ * ```ts
+ * if (isPermissionsSupported()) {
+ *   // safe to call navigator.permissions.query(...)
+ * }
+ * ```
+ */
+declare function isPermissionsSupported(): boolean;
+/**
+ * Produce a stable string key from a permission descriptor's meaningful fields.
+ *
+ * `usePermission` keys its effect on this string, not on the descriptor object's
+ * reference — so an inline `usePermission({ name: 'camera' })` (a fresh object
+ * literal every render) does **not** re-query on every render. It re-queries only
+ * when the descriptor's actual contents change. Keys are sorted so field order in
+ * the literal does not affect the result.
+ *
+ * @example
+ * ```ts
+ * serializeDescriptor({ name: "midi", sysex: true }); // '{"name":"midi","sysex":true}'
+ * serializeDescriptor({ sysex: true, name: "midi" }); // same string
+ * ```
+ */
+declare function serializeDescriptor(descriptor: UsePermissionDescriptor): string;
+
+export { type UsePermissionDescriptor, type UsePermissionReturn, type UsePermissionStatus, isPermissionsSupported, serializeDescriptor, usePermission };

package/dist/index.d.ts

@@ -0,0 +1,145 @@
+/**
+ * Coarse lifecycle status for a permission query.
+ *
+ * - `idle` — no query has resolved yet (initial render, before the effect runs).
+ * - `pending` — a `navigator.permissions.query()` call is in flight.
+ * - `granted` / `denied` / `prompt` — the resolved {@link PermissionState}. These
+ *   mirror the raw `state` field, so you can branch on either.
+ * - `unsupported` — the Permissions API is unavailable in this environment
+ *   (SSR, or a browser without `navigator.permissions`).
+ * - `error` — the query rejected (e.g. an unknown permission name in a browser
+ *   that throws instead of returning `denied`). See {@link UsePermissionReturn.error}.
+ */
+type UsePermissionStatus = "idle" | "pending" | "granted" | "denied" | "prompt" | "unsupported" | "error";
+/**
+ * Permission descriptor accepted by {@link usePermission}.
+ *
+ * A superset of the DOM `PermissionDescriptor` so that *all* permission names
+ * typecheck — including the ones missing from the standard `PermissionName`
+ * union in `lib.dom` (`'camera'`, `'microphone'`, `'clipboard-read'`, …) and the
+ * extra fields required by specific permissions (`userVisibleOnly` for `'push'`,
+ * `sysex` for `'midi'`, device fields for `'camera'`). The index signature keeps
+ * it forward-compatible with descriptor fields not yet in the lib types.
+ *
+ * @example
+ * ```ts
+ * const camera: UsePermissionDescriptor = { name: "camera" };
+ * const push: UsePermissionDescriptor = { name: "push", userVisibleOnly: true };
+ * const midi: UsePermissionDescriptor = { name: "midi", sysex: true };
+ * ```
+ */
+interface UsePermissionDescriptor {
+    /**
+     * The permission name. Accepts the standard `PermissionName` values with
+     * autocomplete, plus any other string (e.g. `'camera'`, `'microphone'`) that a
+     * given browser supports.
+     */
+    name: PermissionName | (string & {});
+    /** Required for the `'push'` permission — must be `true`, browsers reject `false`. */
+    userVisibleOnly?: boolean;
+    /** Requests SysEx access for the `'midi'` permission. */
+    sysex?: boolean;
+    /** Forward-compatible with descriptor fields not yet in the lib types. */
+    [key: string]: unknown;
+}
+/**
+ * Return value of {@link usePermission}.
+ *
+ * Destructure the field you need — the roadmap's `const { state } = usePermission(...)`
+ * reads naturally, while `status`, `isSupported`, and `error` cover the async and
+ * unsupported/error edges that a bare `PermissionState` cannot express.
+ */
+interface UsePermissionReturn {
+    /**
+     * The raw permission state (`'granted' | 'denied' | 'prompt'`), or `null` until
+     * the first query resolves and whenever the API is unsupported or the query
+     * errored.
+     */
+    state: PermissionState | null;
+    /** Coarse lifecycle status. See {@link UsePermissionStatus}. */
+    status: UsePermissionStatus;
+    /** Whether the Permissions API is available in the current environment. */
+    isSupported: boolean;
+    /** The error thrown by `navigator.permissions.query()`, if the query rejected. */
+    error: Error | null;
+}
+
+/**
+ * Track the status of a Permissions API permission, with live updates.
+ *
+ * Calls `navigator.permissions.query(descriptor)` and subscribes to the returned
+ * `PermissionStatus`'s `change` event, so the returned `state` reflects the user
+ * granting or revoking the permission without a re-mount. The hook is SSR-safe
+ * (reports `unsupported` on the server) and StrictMode/concurrent-safe (the async
+ * query is race-guarded and the listener is cleaned up on unmount).
+ *
+ * **Descriptor identity:** the effect is keyed on a *serialized* copy of the
+ * descriptor's fields (`name`, `userVisibleOnly`, `sysex`, …), not on the object
+ * reference. So passing an inline literal — `usePermission({ name: 'camera' })` —
+ * does not re-query on every render; it re-queries only when the descriptor's
+ * contents actually change. No `useMemo` on the caller's side is required.
+ *
+ * @param descriptor - The permission to query, e.g. `{ name: 'camera' }`,
+ *   `{ name: 'geolocation' }`, `{ name: 'push', userVisibleOnly: true }`,
+ *   `{ name: 'midi', sysex: true }`. Accepts any permission name (the standard
+ *   ones plus browser-specific ones like `'camera'`/`'microphone'`).
+ * @returns `{ state, status, isSupported, error }` — see {@link UsePermissionReturn}.
+ *
+ * @example
+ * ```tsx
+ * function CameraBadge() {
+ *   const { state, status } = usePermission({ name: "camera" });
+ *
+ *   // Branch on `status` (deterministic "idle" on the first render, both on the
+ *   // server and client) so the UI is hydration-safe.
+ *   if (status === "idle" || status === "pending") return <span>Checking…</span>;
+ *   if (status === "unsupported") return <span>Permissions API unavailable</span>;
+ *   if (status === "error") return <span>Could not read camera permission</span>;
+ *
+ *   return <span>Camera: {state}</span>; // 'granted' | 'denied' | 'prompt'
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Live updates: the badge re-renders when the user changes the permission in
+ * // the browser UI — no polling, no re-mount.
+ * function MicIndicator() {
+ *   const { state } = usePermission({ name: "microphone" });
+ *   return <div data-granted={state === "granted"}>Mic: {state ?? "unknown"}</div>;
+ * }
+ * ```
+ */
+declare function usePermission(descriptor: UsePermissionDescriptor): UsePermissionReturn;
+
+/**
+ * Whether the Permissions API (`navigator.permissions.query`) is available in the
+ * current environment. Returns `false` during SSR (no `navigator`) and in browsers
+ * that do not implement the Permissions API.
+ *
+ * @example
+ * ```ts
+ * if (isPermissionsSupported()) {
+ *   // safe to call navigator.permissions.query(...)
+ * }
+ * ```
+ */
+declare function isPermissionsSupported(): boolean;
+/**
+ * Produce a stable string key from a permission descriptor's meaningful fields.
+ *
+ * `usePermission` keys its effect on this string, not on the descriptor object's
+ * reference — so an inline `usePermission({ name: 'camera' })` (a fresh object
+ * literal every render) does **not** re-query on every render. It re-queries only
+ * when the descriptor's actual contents change. Keys are sorted so field order in
+ * the literal does not affect the result.
+ *
+ * @example
+ * ```ts
+ * serializeDescriptor({ name: "midi", sysex: true }); // '{"name":"midi","sysex":true}'
+ * serializeDescriptor({ sysex: true, name: "midi" }); // same string
+ * ```
+ */
+declare function serializeDescriptor(descriptor: UsePermissionDescriptor): string;
+
+export { type UsePermissionDescriptor, type UsePermissionReturn, type UsePermissionStatus, isPermissionsSupported, serializeDescriptor, usePermission };

package/dist/index.js

@@ -0,0 +1,103 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  isPermissionsSupported: () => isPermissionsSupported,
+  serializeDescriptor: () => serializeDescriptor,
+  usePermission: () => usePermission
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/usePermission.ts
+var import_react = require("react");
+
+// src/utils.ts
+function isPermissionsSupported() {
+  return typeof navigator !== "undefined" && typeof navigator.permissions !== "undefined" && typeof navigator.permissions.query === "function";
+}
+function serializeDescriptor(descriptor) {
+  const keys = Object.keys(descriptor).sort();
+  const normalized = {};
+  for (const key of keys) {
+    normalized[key] = descriptor[key];
+  }
+  return JSON.stringify(normalized);
+}
+
+// src/usePermission.ts
+function usePermission(descriptor) {
+  const [state, setState] = (0, import_react.useState)(null);
+  const [status, setStatus] = (0, import_react.useState)("idle");
+  const [error, setError] = (0, import_react.useState)(null);
+  const [isSupported, setIsSupported] = (0, import_react.useState)(false);
+  const descriptorRef = (0, import_react.useRef)(descriptor);
+  descriptorRef.current = descriptor;
+  const serialized = serializeDescriptor(descriptor);
+  (0, import_react.useEffect)(() => {
+    const supported = isPermissionsSupported();
+    setIsSupported(supported);
+    if (!supported) {
+      setState(null);
+      setStatus("unsupported");
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    let permissionStatus = null;
+    let changeHandler = null;
+    setState(null);
+    setStatus("pending");
+    setError(null);
+    navigator.permissions.query(descriptorRef.current).then((result) => {
+      if (cancelled) return;
+      permissionStatus = result;
+      setState(result.state);
+      setStatus(result.state);
+      changeHandler = () => {
+        setState(result.state);
+        setStatus(result.state);
+      };
+      result.addEventListener("change", changeHandler);
+    }).catch((err) => {
+      if (cancelled) return;
+      setState(null);
+      setStatus("error");
+      setError(err instanceof Error ? err : new Error(String(err)));
+    });
+    return () => {
+      cancelled = true;
+      if (permissionStatus && changeHandler) {
+        permissionStatus.removeEventListener("change", changeHandler);
+      }
+    };
+  }, [serialized]);
+  return (0, import_react.useMemo)(
+    () => ({ state, status, isSupported, error }),
+    [state, status, isSupported, error]
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  isPermissionsSupported,
+  serializeDescriptor,
+  usePermission
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/usePermission.ts","../src/utils.ts"],"sourcesContent":["export { usePermission } from \"./usePermission\";\nexport { isPermissionsSupported, serializeDescriptor } from \"./utils\";\nexport type {\n  UsePermissionStatus,\n  UsePermissionDescriptor,\n  UsePermissionReturn,\n} from \"./types\";\n","import { useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n  UsePermissionDescriptor,\n  UsePermissionReturn,\n  UsePermissionStatus,\n} from \"./types\";\nimport { isPermissionsSupported, serializeDescriptor } from \"./utils\";\n\n/**\n * Track the status of a Permissions API permission, with live updates.\n *\n * Calls `navigator.permissions.query(descriptor)` and subscribes to the returned\n * `PermissionStatus`'s `change` event, so the returned `state` reflects the user\n * granting or revoking the permission without a re-mount. The hook is SSR-safe\n * (reports `unsupported` on the server) and StrictMode/concurrent-safe (the async\n * query is race-guarded and the listener is cleaned up on unmount).\n *\n * **Descriptor identity:** the effect is keyed on a *serialized* copy of the\n * descriptor's fields (`name`, `userVisibleOnly`, `sysex`, …), not on the object\n * reference. So passing an inline literal — `usePermission({ name: 'camera' })` —\n * does not re-query on every render; it re-queries only when the descriptor's\n * contents actually change. No `useMemo` on the caller's side is required.\n *\n * @param descriptor - The permission to query, e.g. `{ name: 'camera' }`,\n *   `{ name: 'geolocation' }`, `{ name: 'push', userVisibleOnly: true }`,\n *   `{ name: 'midi', sysex: true }`. Accepts any permission name (the standard\n *   ones plus browser-specific ones like `'camera'`/`'microphone'`).\n * @returns `{ state, status, isSupported, error }` — see {@link UsePermissionReturn}.\n *\n * @example\n * ```tsx\n * function CameraBadge() {\n *   const { state, status } = usePermission({ name: \"camera\" });\n *\n *   // Branch on `status` (deterministic \"idle\" on the first render, both on the\n *   // server and client) so the UI is hydration-safe.\n *   if (status === \"idle\" || status === \"pending\") return <span>Checking…</span>;\n *   if (status === \"unsupported\") return <span>Permissions API unavailable</span>;\n *   if (status === \"error\") return <span>Could not read camera permission</span>;\n *\n *   return <span>Camera: {state}</span>; // 'granted' | 'denied' | 'prompt'\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Live updates: the badge re-renders when the user changes the permission in\n * // the browser UI — no polling, no re-mount.\n * function MicIndicator() {\n *   const { state } = usePermission({ name: \"microphone\" });\n *   return <div data-granted={state === \"granted\"}>Mic: {state ?? \"unknown\"}</div>;\n * }\n * ```\n */\nexport function usePermission(\n  descriptor: UsePermissionDescriptor\n): UsePermissionReturn {\n  // Every returned field starts deterministic (identical on server and the\n  // first client render) so the hook never causes a hydration mismatch; the\n  // effect corrects them after mount. In particular `isSupported` is NOT\n  // computed in render — that would be `false` on the server and `true` on the\n  // client's first paint, mismatching any UI that branches on it.\n  const [state, setState] = useState<PermissionState | null>(null);\n  const [status, setStatus] = useState<UsePermissionStatus>(\"idle\");\n  const [error, setError] = useState<Error | null>(null);\n  const [isSupported, setIsSupported] = useState(false);\n\n  // Read the latest descriptor from a ref inside the effect. The effect is keyed\n  // on the serialized descriptor (a primitive), so it re-runs on content changes\n  // while `descriptorRef` guarantees the query uses the current fields.\n  const descriptorRef = useRef(descriptor);\n  descriptorRef.current = descriptor;\n\n  const serialized = serializeDescriptor(descriptor);\n\n  useEffect(() => {\n    const supported = isPermissionsSupported();\n    setIsSupported(supported);\n    if (!supported) {\n      setState(null);\n      setStatus(\"unsupported\");\n      setError(null);\n      return;\n    }\n\n    let cancelled = false;\n    let permissionStatus: PermissionStatus | null = null;\n    let changeHandler: (() => void) | null = null;\n\n    // Clear any prior permission's value so consumers don't read stale `state`\n    // while the new query for a changed descriptor is in flight.\n    setState(null);\n    setStatus(\"pending\");\n    setError(null);\n\n    navigator.permissions\n      .query(descriptorRef.current as PermissionDescriptor)\n      .then((result) => {\n        if (cancelled) return;\n        permissionStatus = result;\n        setState(result.state);\n        setStatus(result.state);\n\n        changeHandler = () => {\n          // Read the fresh value off the live PermissionStatus object.\n          setState(result.state);\n          setStatus(result.state);\n        };\n        result.addEventListener(\"change\", changeHandler);\n      })\n      .catch((err: unknown) => {\n        if (cancelled) return;\n        setState(null);\n        setStatus(\"error\");\n        setError(err instanceof Error ? err : new Error(String(err)));\n      });\n\n    return () => {\n      cancelled = true;\n      if (permissionStatus && changeHandler) {\n        permissionStatus.removeEventListener(\"change\", changeHandler);\n      }\n    };\n    // `serialized` is the stable primitive key; `descriptorRef`/setters are stable.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [serialized]);\n\n  return useMemo<UsePermissionReturn>(\n    () => ({ state, status, isSupported, error }),\n    [state, status, isSupported, error]\n  );\n}\n","import type { UsePermissionDescriptor } from \"./types\";\n\n/**\n * Whether the Permissions API (`navigator.permissions.query`) is available in the\n * current environment. Returns `false` during SSR (no `navigator`) and in browsers\n * that do not implement the Permissions API.\n *\n * @example\n * ```ts\n * if (isPermissionsSupported()) {\n *   // safe to call navigator.permissions.query(...)\n * }\n * ```\n */\nexport function isPermissionsSupported(): boolean {\n  return (\n    typeof navigator !== \"undefined\" &&\n    typeof navigator.permissions !== \"undefined\" &&\n    typeof navigator.permissions.query === \"function\"\n  );\n}\n\n/**\n * Produce a stable string key from a permission descriptor's meaningful fields.\n *\n * `usePermission` keys its effect on this string, not on the descriptor object's\n * reference — so an inline `usePermission({ name: 'camera' })` (a fresh object\n * literal every render) does **not** re-query on every render. It re-queries only\n * when the descriptor's actual contents change. Keys are sorted so field order in\n * the literal does not affect the result.\n *\n * @example\n * ```ts\n * serializeDescriptor({ name: \"midi\", sysex: true }); // '{\"name\":\"midi\",\"sysex\":true}'\n * serializeDescriptor({ sysex: true, name: \"midi\" }); // same string\n * ```\n */\nexport function serializeDescriptor(descriptor: UsePermissionDescriptor): string {\n  const keys = Object.keys(descriptor).sort();\n  const normalized: Record<string, unknown> = {};\n  for (const key of keys) {\n    normalized[key] = descriptor[key];\n  }\n  return JSON.stringify(normalized);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAqD;;;ACc9C,SAAS,yBAAkC;AAChD,SACE,OAAO,cAAc,eACrB,OAAO,UAAU,gBAAgB,eACjC,OAAO,UAAU,YAAY,UAAU;AAE3C;AAiBO,SAAS,oBAAoB,YAA6C;AAC/E,QAAM,OAAO,OAAO,KAAK,UAAU,EAAE,KAAK;AAC1C,QAAM,aAAsC,CAAC;AAC7C,aAAW,OAAO,MAAM;AACtB,eAAW,GAAG,IAAI,WAAW,GAAG;AAAA,EAClC;AACA,SAAO,KAAK,UAAU,UAAU;AAClC;;;ADUO,SAAS,cACd,YACqB;AAMrB,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiC,IAAI;AAC/D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAA8B,MAAM;AAChE,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAuB,IAAI;AACrD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAKpD,QAAM,oBAAgB,qBAAO,UAAU;AACvC,gBAAc,UAAU;AAExB,QAAM,aAAa,oBAAoB,UAAU;AAEjD,8BAAU,MAAM;AACd,UAAM,YAAY,uBAAuB;AACzC,mBAAe,SAAS;AACxB,QAAI,CAAC,WAAW;AACd,eAAS,IAAI;AACb,gBAAU,aAAa;AACvB,eAAS,IAAI;AACb;AAAA,IACF;AAEA,QAAI,YAAY;AAChB,QAAI,mBAA4C;AAChD,QAAI,gBAAqC;AAIzC,aAAS,IAAI;AACb,cAAU,SAAS;AACnB,aAAS,IAAI;AAEb,cAAU,YACP,MAAM,cAAc,OAA+B,EACnD,KAAK,CAAC,WAAW;AAChB,UAAI,UAAW;AACf,yBAAmB;AACnB,eAAS,OAAO,KAAK;AACrB,gBAAU,OAAO,KAAK;AAEtB,sBAAgB,MAAM;AAEpB,iBAAS,OAAO,KAAK;AACrB,kBAAU,OAAO,KAAK;AAAA,MACxB;AACA,aAAO,iBAAiB,UAAU,aAAa;AAAA,IACjD,CAAC,EACA,MAAM,CAAC,QAAiB;AACvB,UAAI,UAAW;AACf,eAAS,IAAI;AACb,gBAAU,OAAO;AACjB,eAAS,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,GAAG,CAAC,CAAC;AAAA,IAC9D,CAAC;AAEH,WAAO,MAAM;AACX,kBAAY;AACZ,UAAI,oBAAoB,eAAe;AACrC,yBAAiB,oBAAoB,UAAU,aAAa;AAAA,MAC9D;AAAA,IACF;AAAA,EAGF,GAAG,CAAC,UAAU,CAAC;AAEf,aAAO;AAAA,IACL,OAAO,EAAE,OAAO,QAAQ,aAAa,MAAM;AAAA,IAC3C,CAAC,OAAO,QAAQ,aAAa,KAAK;AAAA,EACpC;AACF;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,74 @@
+// src/usePermission.ts
+import { useEffect, useMemo, useRef, useState } from "react";
+
+// src/utils.ts
+function isPermissionsSupported() {
+  return typeof navigator !== "undefined" && typeof navigator.permissions !== "undefined" && typeof navigator.permissions.query === "function";
+}
+function serializeDescriptor(descriptor) {
+  const keys = Object.keys(descriptor).sort();
+  const normalized = {};
+  for (const key of keys) {
+    normalized[key] = descriptor[key];
+  }
+  return JSON.stringify(normalized);
+}
+
+// src/usePermission.ts
+function usePermission(descriptor) {
+  const [state, setState] = useState(null);
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState(null);
+  const [isSupported, setIsSupported] = useState(false);
+  const descriptorRef = useRef(descriptor);
+  descriptorRef.current = descriptor;
+  const serialized = serializeDescriptor(descriptor);
+  useEffect(() => {
+    const supported = isPermissionsSupported();
+    setIsSupported(supported);
+    if (!supported) {
+      setState(null);
+      setStatus("unsupported");
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    let permissionStatus = null;
+    let changeHandler = null;
+    setState(null);
+    setStatus("pending");
+    setError(null);
+    navigator.permissions.query(descriptorRef.current).then((result) => {
+      if (cancelled) return;
+      permissionStatus = result;
+      setState(result.state);
+      setStatus(result.state);
+      changeHandler = () => {
+        setState(result.state);
+        setStatus(result.state);
+      };
+      result.addEventListener("change", changeHandler);
+    }).catch((err) => {
+      if (cancelled) return;
+      setState(null);
+      setStatus("error");
+      setError(err instanceof Error ? err : new Error(String(err)));
+    });
+    return () => {
+      cancelled = true;
+      if (permissionStatus && changeHandler) {
+        permissionStatus.removeEventListener("change", changeHandler);
+      }
+    };
+  }, [serialized]);
+  return useMemo(
+    () => ({ state, status, isSupported, error }),
+    [state, status, isSupported, error]
+  );
+}
+export {
+  isPermissionsSupported,
+  serializeDescriptor,
+  usePermission
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/usePermission.ts","../src/utils.ts"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n  UsePermissionDescriptor,\n  UsePermissionReturn,\n  UsePermissionStatus,\n} from \"./types\";\nimport { isPermissionsSupported, serializeDescriptor } from \"./utils\";\n\n/**\n * Track the status of a Permissions API permission, with live updates.\n *\n * Calls `navigator.permissions.query(descriptor)` and subscribes to the returned\n * `PermissionStatus`'s `change` event, so the returned `state` reflects the user\n * granting or revoking the permission without a re-mount. The hook is SSR-safe\n * (reports `unsupported` on the server) and StrictMode/concurrent-safe (the async\n * query is race-guarded and the listener is cleaned up on unmount).\n *\n * **Descriptor identity:** the effect is keyed on a *serialized* copy of the\n * descriptor's fields (`name`, `userVisibleOnly`, `sysex`, …), not on the object\n * reference. So passing an inline literal — `usePermission({ name: 'camera' })` —\n * does not re-query on every render; it re-queries only when the descriptor's\n * contents actually change. No `useMemo` on the caller's side is required.\n *\n * @param descriptor - The permission to query, e.g. `{ name: 'camera' }`,\n *   `{ name: 'geolocation' }`, `{ name: 'push', userVisibleOnly: true }`,\n *   `{ name: 'midi', sysex: true }`. Accepts any permission name (the standard\n *   ones plus browser-specific ones like `'camera'`/`'microphone'`).\n * @returns `{ state, status, isSupported, error }` — see {@link UsePermissionReturn}.\n *\n * @example\n * ```tsx\n * function CameraBadge() {\n *   const { state, status } = usePermission({ name: \"camera\" });\n *\n *   // Branch on `status` (deterministic \"idle\" on the first render, both on the\n *   // server and client) so the UI is hydration-safe.\n *   if (status === \"idle\" || status === \"pending\") return <span>Checking…</span>;\n *   if (status === \"unsupported\") return <span>Permissions API unavailable</span>;\n *   if (status === \"error\") return <span>Could not read camera permission</span>;\n *\n *   return <span>Camera: {state}</span>; // 'granted' | 'denied' | 'prompt'\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Live updates: the badge re-renders when the user changes the permission in\n * // the browser UI — no polling, no re-mount.\n * function MicIndicator() {\n *   const { state } = usePermission({ name: \"microphone\" });\n *   return <div data-granted={state === \"granted\"}>Mic: {state ?? \"unknown\"}</div>;\n * }\n * ```\n */\nexport function usePermission(\n  descriptor: UsePermissionDescriptor\n): UsePermissionReturn {\n  // Every returned field starts deterministic (identical on server and the\n  // first client render) so the hook never causes a hydration mismatch; the\n  // effect corrects them after mount. In particular `isSupported` is NOT\n  // computed in render — that would be `false` on the server and `true` on the\n  // client's first paint, mismatching any UI that branches on it.\n  const [state, setState] = useState<PermissionState | null>(null);\n  const [status, setStatus] = useState<UsePermissionStatus>(\"idle\");\n  const [error, setError] = useState<Error | null>(null);\n  const [isSupported, setIsSupported] = useState(false);\n\n  // Read the latest descriptor from a ref inside the effect. The effect is keyed\n  // on the serialized descriptor (a primitive), so it re-runs on content changes\n  // while `descriptorRef` guarantees the query uses the current fields.\n  const descriptorRef = useRef(descriptor);\n  descriptorRef.current = descriptor;\n\n  const serialized = serializeDescriptor(descriptor);\n\n  useEffect(() => {\n    const supported = isPermissionsSupported();\n    setIsSupported(supported);\n    if (!supported) {\n      setState(null);\n      setStatus(\"unsupported\");\n      setError(null);\n      return;\n    }\n\n    let cancelled = false;\n    let permissionStatus: PermissionStatus | null = null;\n    let changeHandler: (() => void) | null = null;\n\n    // Clear any prior permission's value so consumers don't read stale `state`\n    // while the new query for a changed descriptor is in flight.\n    setState(null);\n    setStatus(\"pending\");\n    setError(null);\n\n    navigator.permissions\n      .query(descriptorRef.current as PermissionDescriptor)\n      .then((result) => {\n        if (cancelled) return;\n        permissionStatus = result;\n        setState(result.state);\n        setStatus(result.state);\n\n        changeHandler = () => {\n          // Read the fresh value off the live PermissionStatus object.\n          setState(result.state);\n          setStatus(result.state);\n        };\n        result.addEventListener(\"change\", changeHandler);\n      })\n      .catch((err: unknown) => {\n        if (cancelled) return;\n        setState(null);\n        setStatus(\"error\");\n        setError(err instanceof Error ? err : new Error(String(err)));\n      });\n\n    return () => {\n      cancelled = true;\n      if (permissionStatus && changeHandler) {\n        permissionStatus.removeEventListener(\"change\", changeHandler);\n      }\n    };\n    // `serialized` is the stable primitive key; `descriptorRef`/setters are stable.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [serialized]);\n\n  return useMemo<UsePermissionReturn>(\n    () => ({ state, status, isSupported, error }),\n    [state, status, isSupported, error]\n  );\n}\n","import type { UsePermissionDescriptor } from \"./types\";\n\n/**\n * Whether the Permissions API (`navigator.permissions.query`) is available in the\n * current environment. Returns `false` during SSR (no `navigator`) and in browsers\n * that do not implement the Permissions API.\n *\n * @example\n * ```ts\n * if (isPermissionsSupported()) {\n *   // safe to call navigator.permissions.query(...)\n * }\n * ```\n */\nexport function isPermissionsSupported(): boolean {\n  return (\n    typeof navigator !== \"undefined\" &&\n    typeof navigator.permissions !== \"undefined\" &&\n    typeof navigator.permissions.query === \"function\"\n  );\n}\n\n/**\n * Produce a stable string key from a permission descriptor's meaningful fields.\n *\n * `usePermission` keys its effect on this string, not on the descriptor object's\n * reference — so an inline `usePermission({ name: 'camera' })` (a fresh object\n * literal every render) does **not** re-query on every render. It re-queries only\n * when the descriptor's actual contents change. Keys are sorted so field order in\n * the literal does not affect the result.\n *\n * @example\n * ```ts\n * serializeDescriptor({ name: \"midi\", sysex: true }); // '{\"name\":\"midi\",\"sysex\":true}'\n * serializeDescriptor({ sysex: true, name: \"midi\" }); // same string\n * ```\n */\nexport function serializeDescriptor(descriptor: UsePermissionDescriptor): string {\n  const keys = Object.keys(descriptor).sort();\n  const normalized: Record<string, unknown> = {};\n  for (const key of keys) {\n    normalized[key] = descriptor[key];\n  }\n  return JSON.stringify(normalized);\n}\n"],"mappings":";AAAA,SAAS,WAAW,SAAS,QAAQ,gBAAgB;;;ACc9C,SAAS,yBAAkC;AAChD,SACE,OAAO,cAAc,eACrB,OAAO,UAAU,gBAAgB,eACjC,OAAO,UAAU,YAAY,UAAU;AAE3C;AAiBO,SAAS,oBAAoB,YAA6C;AAC/E,QAAM,OAAO,OAAO,KAAK,UAAU,EAAE,KAAK;AAC1C,QAAM,aAAsC,CAAC;AAC7C,aAAW,OAAO,MAAM;AACtB,eAAW,GAAG,IAAI,WAAW,GAAG;AAAA,EAClC;AACA,SAAO,KAAK,UAAU,UAAU;AAClC;;;ADUO,SAAS,cACd,YACqB;AAMrB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiC,IAAI;AAC/D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA8B,MAAM;AAChE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAuB,IAAI;AACrD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAKpD,QAAM,gBAAgB,OAAO,UAAU;AACvC,gBAAc,UAAU;AAExB,QAAM,aAAa,oBAAoB,UAAU;AAEjD,YAAU,MAAM;AACd,UAAM,YAAY,uBAAuB;AACzC,mBAAe,SAAS;AACxB,QAAI,CAAC,WAAW;AACd,eAAS,IAAI;AACb,gBAAU,aAAa;AACvB,eAAS,IAAI;AACb;AAAA,IACF;AAEA,QAAI,YAAY;AAChB,QAAI,mBAA4C;AAChD,QAAI,gBAAqC;AAIzC,aAAS,IAAI;AACb,cAAU,SAAS;AACnB,aAAS,IAAI;AAEb,cAAU,YACP,MAAM,cAAc,OAA+B,EACnD,KAAK,CAAC,WAAW;AAChB,UAAI,UAAW;AACf,yBAAmB;AACnB,eAAS,OAAO,KAAK;AACrB,gBAAU,OAAO,KAAK;AAEtB,sBAAgB,MAAM;AAEpB,iBAAS,OAAO,KAAK;AACrB,kBAAU,OAAO,KAAK;AAAA,MACxB;AACA,aAAO,iBAAiB,UAAU,aAAa;AAAA,IACjD,CAAC,EACA,MAAM,CAAC,QAAiB;AACvB,UAAI,UAAW;AACf,eAAS,IAAI;AACb,gBAAU,OAAO;AACjB,eAAS,eAAe,QAAQ,MAAM,IAAI,MAAM,OAAO,GAAG,CAAC,CAAC;AAAA,IAC9D,CAAC;AAEH,WAAO,MAAM;AACX,kBAAY;AACZ,UAAI,oBAAoB,eAAe;AACrC,yBAAiB,oBAAoB,UAAU,aAAa;AAAA,MAC9D;AAAA,IACF;AAAA,EAGF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AAAA,IACL,OAAO,EAAE,OAAO,QAAQ,aAAa,MAAM;AAAA,IAC3C,CAAC,OAAO,QAAQ,aAAa,KAAK;AAAA,EACpC;AACF;","names":[]}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@usefy/use-permission",
+  "version": "0.20.0",
+  "description": "A React hook for reading Permissions API status with live updates, SSR-safe and typed",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "jsdom": "^27.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rimraf": "^6.0.1",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mirunamu00/usefy.git",
+    "directory": "packages/hooks/use-permission"
+  },
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "hooks",
+    "permissions",
+    "permission",
+    "permissions-api",
+    "navigator",
+    "usePermission"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist"
+  }
+}