{"owner":"fkhadra","repo":"react-toastify","hasSkills":true,"totalSkillsCount":2,"totalTokensCount":2074,"categories":["anthropic-skill","claude-rule"],"hasMcp":false,"mcpConfig":null,"found":["packages/use-notification-center/package.json","CLAUDE.md"],"skills":{"packages/use-notification-center/package.json":"{\n  \"name\": \"use-notification-center\",\n  \"private\": true,\n  \"version\": \"0.0.0\",\n  \"description\": \"Internal workspace package for the useNotificationCenter addon. Not published separately — built into react-toastify's /addons directory by tsup at the repo root.\",\n  \"main\": \"src/index.ts\",\n  \"types\": \"src/index.ts\",\n  \"dependencies\": {\n    \"react-toastify\": \"workspace:*\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^18 || ^19\"\n  }\n}\n","CLAUDE.md":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Commands\n\nPackage manager is **pnpm** (CI uses pnpm 9, Node 22). Do not use npm or yarn.\n\n| Task                                                                           | Command         |\n| ------------------------------------------------------------------------------ | --------------- |\n| Install deps (also wires the playground to the local source via the workspace) | `pnpm install`  |\n| Run the playground (interactive demo / dev harness)                            | `pnpm start`    |\n| Open Cypress component-test UI                                                 | `pnpm test`     |\n| Run Cypress component tests headlessly (CI uses this)                          | `pnpm test:run` |\n| Build the library (`tsup` + copy `style.css` → `dist/ReactToastify.css`)       | `pnpm build`    |\n| Format `src/` with Prettier                                                    | `pnpm prettier` |\n\n### Running a single test\n\nTests are **Cypress component tests**, not Jest. Files live next to source as `*.cy.tsx` (e.g. `src/components/Toast.cy.tsx`). To run one file headlessly:\n\n```sh\npnpm exec cypress run --component -b chrome --spec src/components/Toast.cy.tsx\n```\n\nOr use `pnpm test` to open the interactive runner and pick a spec.\n\n### Lint / formatting\n\nThere is **no ESLint**. Code style is Prettier only (config inline in `package.json`: `printWidth: 120`, single quotes, no trailing commas, avoid arrow parens). A **lefthook** pre-commit hook runs `lint-staged`, which runs Prettier on staged `*.{js,jsx,ts,tsx,md,html,css}` files. The CI workflow's lint step is currently commented out — Prettier is the only gate.\n\n## Architecture\n\n### Two public entry points + one addon\n\n`tsup.config.ts` produces three independent bundles:\n\n1. **`react-toastify`** (default) — `src/index.ts`. Its `ToastContainer` export is the **`StyledToastContainer`** wrapper at `src/components/StyledToastContainer.tsx`, which imports `src/style.css` as a string (via Vite's `?raw` suffix; tsup uses `loader: { '.css': 'text' }` plus a small esbuild plugin that strips the `?raw` query) and injects it via `useStyleSheet(css, props.nonce)` on mount. Users can pass a `nonce` prop for Content Security Policy compliance. All bundles are prefixed with `\"use client\";` for React Server Components.\n2. **`react-toastify/unstyled`** — `src/unstyled.ts`. Re-exports the **raw** `ToastContainer` from `./components` without the styled wrapper, so nothing is injected at runtime. Use this subpath when consumers want to ship their own CSS (from `react-toastify/dist/ReactToastify.css` or elsewhere).\n3. **`react-toastify/addons/use-notification-center`** — built from the internal workspace package at `packages/use-notification-center/` into the `/addons` directory (not `/dist`); declared in `package.json#exports`.\n\nThe raw stylesheet is also exposed as `react-toastify/dist/ReactToastify.css`.\n\n### Runtime model: imperative global store bridged by `useSyncExternalStore`\n\nThe library is **not** Context- or Redux-based. The flow is:\n\n- `src/core/store.ts` — a module-level singleton. Holds a `Map<containerId, ContainerObserver>` and a `renderQueue` that buffers `toast()` calls issued before any `<ToastContainer>` mounts.\n- `src/core/toast.ts` — the public imperative API (`toast()`, `toast.success`, `toast.update`, `toast.promise`, `toast.onChange`, …). Dispatches through the store.\n- `src/core/containerObserver.ts` — one instance per `<ToastContainer>`. Owns per-container state: toast `Map`, waiting `queue` (when `limit > 0`), snapshot for `useSyncExternalStore`, prop validation, and lifecycle callbacks (`onOpen` / `onClose`).\n- `src/hooks/useToastContainer.ts` — the **only** bridge to React. `<ToastContainer>` subscribes to its observer via `useSyncExternalStore`, which is why nothing in the tree needs to re-render just because a toast was pushed.\n\nConsequence: multiple `<ToastContainer>` instances are supported via `containerId`; the store routes toasts to the right container (default id is `1`).\n\n### Components (`src/components/`)\n\n- `ToastContainer.tsx` — positions the portal, manages stacking (CSS-variable transforms computed in a layout effect), keyboard focus / `Alt+T` hotkey, collapse state.\n- `Toast.tsx` — per-toast wrapper; consumes `useToast` (drag-to-dismiss, pause-on-hover, pause-on-blur, timer).\n- `ProgressBar.tsx`, `CloseButton.tsx`, `Icons.tsx` — the pieces a toast renders.\n- `Transitions.tsx` — `Bounce` / `Flip` / `Slide` / `Zoom` built with `cssTransition` from `src/utils/cssTransition.tsx`.\n\n### Hooks (`src/hooks/`)\n\n- `useToastContainer.ts` — store → React bridge (see above). The most important file in the repo.\n- `useToast.ts` — per-toast UX behavior.\n- `useIsomorphicLayoutEffect.ts` — SSR-safe layout effect.\n- `useStyleSheet.ts` — runtime CSS injection (replaces the old tsup shim). Per-document `Map` so multiple `<ToastContainer>` instances only inject once per document (shadow DOM / iframe safe). If a later mount supplies a nonce and the previous injection had none, the attribute is updated on the existing `<style>` tag — see `src/hooks/useStyleSheet.ts`.\n\n### Stacked / limit / queue semantics\n\n- `ToastContainerProps.limit` — excess toasts are buffered in a per-container queue inside `containerObserver.ts`; as toasts close, the next queued toast is emitted. `toast.clearWaitingQueue()` drains it.\n- `ToastContainerProps.stacked` — `ToastContainer.tsx` measures toast heights in a layout effect and sets CSS custom properties (`--y`, `--g`, `--s`) that drive `translate3d`-based stacking and a collapsed state.\n\n### Types\n\nPublic types are centralized in `src/types.ts` and re-exported from `src/index.ts`. Notable: `ToastOptions<Data>`, `UpdateOptions<Data>`, `ToastContainerProps`, `ToastContent<T>`, `ToastItem<Data>` (payload for `toast.onChange`), `TypeOptions`, `Theme`.\n\n### Addon: `use-notification-center`\n\nLives at `packages/use-notification-center/` as a **private pnpm workspace package** (see its `package.json` — `\"private\": true`). It exports a `useNotificationCenter()` hook — a **persistent** notification store independent from the transient toast queue. It subscribes to `toast.onChange()` to capture lifecycle events and provides filtering, read/unread, and sort.\n\nThe addon declares `\"react-toastify\": \"workspace:*\"` as a dependency, so its source can `import 'react-toastify'` and pnpm resolves it via a symlink at `packages/use-notification-center/node_modules/react-toastify → <repo root>`. No Vite alias or tsconfig `paths` entry is needed.\n\nIt is **not published separately**. The root `tsup.config.ts` builds it into `/addons/use-notification-center/` at the repo root, which the main `react-toastify` package includes via `package.json#files` and exposes via the `react-toastify/addons/use-notification-center` and `react-toastify/notification-center` subpath exports. Consumers still install only `react-toastify`.\n\n## Playground\n\n`/playground` is a standalone Vite app used as the demo and manual-QA harness. It is declared as a workspace in `pnpm-workspace.yaml` and depends on the root package via `\"react-toastify\": \"workspace:*\"`, so `pnpm install` symlinks the root into `playground/node_modules/react-toastify`. `pnpm start` runs it (via `pnpm --filter playground dev`). Most changes should be verified in the playground before running Cypress.\n\n### Workspace layout\n\n`pnpm-workspace.yaml` lists:\n\n- **root** (`react-toastify`) — the published library.\n- **`packages/*`** — currently just `packages/use-notification-center/` (private internal addon package, see Addon section above).\n- **`playground`** — dev harness.\n\nBoth `playground` and `packages/use-notification-center` depend on the root via `workspace:*`. `pnpm install` is the only setup step — no `pnpm link` required.\n\n## CI\n\n`.github/workflows/build.yaml` runs on every push and PR: install → `pnpm build` → `pnpm test:run` → upload Cypress screenshots/videos on failure → report coverage to Coveralls. Coverage is instrumented at runtime by `vite-plugin-istanbul` (see `vite.config.mts`) and collected by `@cypress/code-coverage`.\n"},"files":{"packages/use-notification-center/package.json":"{\n  \"name\": \"use-notification-center\",\n  \"private\": true,\n  \"version\": \"0.0.0\",\n  \"description\": \"Internal workspace package for the useNotificationCenter addon. Not published separately — built into react-toastify's /addons directory by tsup at the repo root.\",\n  \"main\": \"src/index.ts\",\n  \"types\": \"src/index.ts\",\n  \"dependencies\": {\n    \"react-toastify\": \"workspace:*\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^18 || ^19\"\n  }\n}\n","CLAUDE.md":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Commands\n\nPackage manager is **pnpm** (CI uses pnpm 9, Node 22). Do not use npm or yarn.\n\n| Task                                                                           | Command         |\n| ------------------------------------------------------------------------------ | --------------- |\n| Install deps (also wires the playground to the local source via the workspace) | `pnpm install`  |\n| Run the playground (interactive demo / dev harness)                            | `pnpm start`    |\n| Open Cypress component-test UI                                                 | `pnpm test`     |\n| Run Cypress component tests headlessly (CI uses this)                          | `pnpm test:run` |\n| Build the library (`tsup` + copy `style.css` → `dist/ReactToastify.css`)       | `pnpm build`    |\n| Format `src/` with Prettier                                                    | `pnpm prettier` |\n\n### Running a single test\n\nTests are **Cypress component tests**, not Jest. Files live next to source as `*.cy.tsx` (e.g. `src/components/Toast.cy.tsx`). To run one file headlessly:\n\n```sh\npnpm exec cypress run --component -b chrome --spec src/components/Toast.cy.tsx\n```\n\nOr use `pnpm test` to open the interactive runner and pick a spec.\n\n### Lint / formatting\n\nThere is **no ESLint**. Code style is Prettier only (config inline in `package.json`: `printWidth: 120`, single quotes, no trailing commas, avoid arrow parens). A **lefthook** pre-commit hook runs `lint-staged`, which runs Prettier on staged `*.{js,jsx,ts,tsx,md,html,css}` files. The CI workflow's lint step is currently commented out — Prettier is the only gate.\n\n## Architecture\n\n### Two public entry points + one addon\n\n`tsup.config.ts` produces three independent bundles:\n\n1. **`react-toastify`** (default) — `src/index.ts`. Its `ToastContainer` export is the **`StyledToastContainer`** wrapper at `src/components/StyledToastContainer.tsx`, which imports `src/style.css` as a string (via Vite's `?raw` suffix; tsup uses `loader: { '.css': 'text' }` plus a small esbuild plugin that strips the `?raw` query) and injects it via `useStyleSheet(css, props.nonce)` on mount. Users can pass a `nonce` prop for Content Security Policy compliance. All bundles are prefixed with `\"use client\";` for React Server Components.\n2. **`react-toastify/unstyled`** — `src/unstyled.ts`. Re-exports the **raw** `ToastContainer` from `./components` without the styled wrapper, so nothing is injected at runtime. Use this subpath when consumers want to ship their own CSS (from `react-toastify/dist/ReactToastify.css` or elsewhere).\n3. **`react-toastify/addons/use-notification-center`** — built from the internal workspace package at `packages/use-notification-center/` into the `/addons` directory (not `/dist`); declared in `package.json#exports`.\n\nThe raw stylesheet is also exposed as `react-toastify/dist/ReactToastify.css`.\n\n### Runtime model: imperative global store bridged by `useSyncExternalStore`\n\nThe library is **not** Context- or Redux-based. The flow is:\n\n- `src/core/store.ts` — a module-level singleton. Holds a `Map<containerId, ContainerObserver>` and a `renderQueue` that buffers `toast()` calls issued before any `<ToastContainer>` mounts.\n- `src/core/toast.ts` — the public imperative API (`toast()`, `toast.success`, `toast.update`, `toast.promise`, `toast.onChange`, …). Dispatches through the store.\n- `src/core/containerObserver.ts` — one instance per `<ToastContainer>`. Owns per-container state: toast `Map`, waiting `queue` (when `limit > 0`), snapshot for `useSyncExternalStore`, prop validation, and lifecycle callbacks (`onOpen` / `onClose`).\n- `src/hooks/useToastContainer.ts` — the **only** bridge to React. `<ToastContainer>` subscribes to its observer via `useSyncExternalStore`, which is why nothing in the tree needs to re-render just because a toast was pushed.\n\nConsequence: multiple `<ToastContainer>` instances are supported via `containerId`; the store routes toasts to the right container (default id is `1`).\n\n### Components (`src/components/`)\n\n- `ToastContainer.tsx` — positions the portal, manages stacking (CSS-variable transforms computed in a layout effect), keyboard focus / `Alt+T` hotkey, collapse state.\n- `Toast.tsx` — per-toast wrapper; consumes `useToast` (drag-to-dismiss, pause-on-hover, pause-on-blur, timer).\n- `ProgressBar.tsx`, `CloseButton.tsx`, `Icons.tsx` — the pieces a toast renders.\n- `Transitions.tsx` — `Bounce` / `Flip` / `Slide` / `Zoom` built with `cssTransition` from `src/utils/cssTransition.tsx`.\n\n### Hooks (`src/hooks/`)\n\n- `useToastContainer.ts` — store → React bridge (see above). The most important file in the repo.\n- `useToast.ts` — per-toast UX behavior.\n- `useIsomorphicLayoutEffect.ts` — SSR-safe layout effect.\n- `useStyleSheet.ts` — runtime CSS injection (replaces the old tsup shim). Per-document `Map` so multiple `<ToastContainer>` instances only inject once per document (shadow DOM / iframe safe). If a later mount supplies a nonce and the previous injection had none, the attribute is updated on the existing `<style>` tag — see `src/hooks/useStyleSheet.ts`.\n\n### Stacked / limit / queue semantics\n\n- `ToastContainerProps.limit` — excess toasts are buffered in a per-container queue inside `containerObserver.ts`; as toasts close, the next queued toast is emitted. `toast.clearWaitingQueue()` drains it.\n- `ToastContainerProps.stacked` — `ToastContainer.tsx` measures toast heights in a layout effect and sets CSS custom properties (`--y`, `--g`, `--s`) that drive `translate3d`-based stacking and a collapsed state.\n\n### Types\n\nPublic types are centralized in `src/types.ts` and re-exported from `src/index.ts`. Notable: `ToastOptions<Data>`, `UpdateOptions<Data>`, `ToastContainerProps`, `ToastContent<T>`, `ToastItem<Data>` (payload for `toast.onChange`), `TypeOptions`, `Theme`.\n\n### Addon: `use-notification-center`\n\nLives at `packages/use-notification-center/` as a **private pnpm workspace package** (see its `package.json` — `\"private\": true`). It exports a `useNotificationCenter()` hook — a **persistent** notification store independent from the transient toast queue. It subscribes to `toast.onChange()` to capture lifecycle events and provides filtering, read/unread, and sort.\n\nThe addon declares `\"react-toastify\": \"workspace:*\"` as a dependency, so its source can `import 'react-toastify'` and pnpm resolves it via a symlink at `packages/use-notification-center/node_modules/react-toastify → <repo root>`. No Vite alias or tsconfig `paths` entry is needed.\n\nIt is **not published separately**. The root `tsup.config.ts` builds it into `/addons/use-notification-center/` at the repo root, which the main `react-toastify` package includes via `package.json#files` and exposes via the `react-toastify/addons/use-notification-center` and `react-toastify/notification-center` subpath exports. Consumers still install only `react-toastify`.\n\n## Playground\n\n`/playground` is a standalone Vite app used as the demo and manual-QA harness. It is declared as a workspace in `pnpm-workspace.yaml` and depends on the root package via `\"react-toastify\": \"workspace:*\"`, so `pnpm install` symlinks the root into `playground/node_modules/react-toastify`. `pnpm start` runs it (via `pnpm --filter playground dev`). Most changes should be verified in the playground before running Cypress.\n\n### Workspace layout\n\n`pnpm-workspace.yaml` lists:\n\n- **root** (`react-toastify`) — the published library.\n- **`packages/*`** — currently just `packages/use-notification-center/` (private internal addon package, see Addon section above).\n- **`playground`** — dev harness.\n\nBoth `playground` and `packages/use-notification-center` depend on the root via `workspace:*`. `pnpm install` is the only setup step — no `pnpm link` required.\n\n## CI\n\n`.github/workflows/build.yaml` runs on every push and PR: install → `pnpm build` → `pnpm test:run` → upload Cypress screenshots/videos on failure → report coverage to Coveralls. Coverage is instrumented at runtime by `vite-plugin-istanbul` (see `vite.config.mts`) and collected by `@cypress/code-coverage`.\n"},"items":[{"name":"package.json","path":"packages/use-notification-center/package.json","rawUrl":"https://raw.githubusercontent.com/fkhadra/react-toastify/HEAD/packages/use-notification-center/package.json","title":"use-notification-center","category":"anthropic-skill","format":"json","content":"{\n  \"name\": \"use-notification-center\",\n  \"private\": true,\n  \"version\": \"0.0.0\",\n  \"description\": \"Internal workspace package for the useNotificationCenter addon. Not published separately — built into react-toastify's /addons directory by tsup at the repo root.\",\n  \"main\": \"src/index.ts\",\n  \"types\": \"src/index.ts\",\n  \"dependencies\": {\n    \"react-toastify\": \"workspace:*\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^18 || ^19\"\n  }\n}\n","frontmatter":{"name":"use-notification-center","private":true,"version":"0.0.0","description":"Internal workspace package for the useNotificationCenter addon. Not published separately — built into react-toastify's /addons directory by tsup at the repo root.","main":"src/index.ts","types":"src/index.ts","dependencies":{"react-toastify":"workspace:*"},"peerDependencies":{"react":"^18 || ^19"}},"isInternal":false,"tokens":116,"sizeBytes":435},{"name":"CLAUDE.md","path":"CLAUDE.md","rawUrl":"https://raw.githubusercontent.com/fkhadra/react-toastify/HEAD/CLAUDE.md","title":"Claude Agent Guidelines & System Prompt","category":"claude-rule","format":"markdown","content":"# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Commands\n\nPackage manager is **pnpm** (CI uses pnpm 9, Node 22). Do not use npm or yarn.\n\n| Task                                                                           | Command         |\n| ------------------------------------------------------------------------------ | --------------- |\n| Install deps (also wires the playground to the local source via the workspace) | `pnpm install`  |\n| Run the playground (interactive demo / dev harness)                            | `pnpm start`    |\n| Open Cypress component-test UI                                                 | `pnpm test`     |\n| Run Cypress component tests headlessly (CI uses this)                          | `pnpm test:run` |\n| Build the library (`tsup` + copy `style.css` → `dist/ReactToastify.css`)       | `pnpm build`    |\n| Format `src/` with Prettier                                                    | `pnpm prettier` |\n\n### Running a single test\n\nTests are **Cypress component tests**, not Jest. Files live next to source as `*.cy.tsx` (e.g. `src/components/Toast.cy.tsx`). To run one file headlessly:\n\n```sh\npnpm exec cypress run --component -b chrome --spec src/components/Toast.cy.tsx\n```\n\nOr use `pnpm test` to open the interactive runner and pick a spec.\n\n### Lint / formatting\n\nThere is **no ESLint**. Code style is Prettier only (config inline in `package.json`: `printWidth: 120`, single quotes, no trailing commas, avoid arrow parens). A **lefthook** pre-commit hook runs `lint-staged`, which runs Prettier on staged `*.{js,jsx,ts,tsx,md,html,css}` files. The CI workflow's lint step is currently commented out — Prettier is the only gate.\n\n## Architecture\n\n### Two public entry points + one addon\n\n`tsup.config.ts` produces three independent bundles:\n\n1. **`react-toastify`** (default) — `src/index.ts`. Its `ToastContainer` export is the **`StyledToastContainer`** wrapper at `src/components/StyledToastContainer.tsx`, which imports `src/style.css` as a string (via Vite's `?raw` suffix; tsup uses `loader: { '.css': 'text' }` plus a small esbuild plugin that strips the `?raw` query) and injects it via `useStyleSheet(css, props.nonce)` on mount. Users can pass a `nonce` prop for Content Security Policy compliance. All bundles are prefixed with `\"use client\";` for React Server Components.\n2. **`react-toastify/unstyled`** — `src/unstyled.ts`. Re-exports the **raw** `ToastContainer` from `./components` without the styled wrapper, so nothing is injected at runtime. Use this subpath when consumers want to ship their own CSS (from `react-toastify/dist/ReactToastify.css` or elsewhere).\n3. **`react-toastify/addons/use-notification-center`** — built from the internal workspace package at `packages/use-notification-center/` into the `/addons` directory (not `/dist`); declared in `package.json#exports`.\n\nThe raw stylesheet is also exposed as `react-toastify/dist/ReactToastify.css`.\n\n### Runtime model: imperative global store bridged by `useSyncExternalStore`\n\nThe library is **not** Context- or Redux-based. The flow is:\n\n- `src/core/store.ts` — a module-level singleton. Holds a `Map<containerId, ContainerObserver>` and a `renderQueue` that buffers `toast()` calls issued before any `<ToastContainer>` mounts.\n- `src/core/toast.ts` — the public imperative API (`toast()`, `toast.success`, `toast.update`, `toast.promise`, `toast.onChange`, …). Dispatches through the store.\n- `src/core/containerObserver.ts` — one instance per `<ToastContainer>`. Owns per-container state: toast `Map`, waiting `queue` (when `limit > 0`), snapshot for `useSyncExternalStore`, prop validation, and lifecycle callbacks (`onOpen` / `onClose`).\n- `src/hooks/useToastContainer.ts` — the **only** bridge to React. `<ToastContainer>` subscribes to its observer via `useSyncExternalStore`, which is why nothing in the tree needs to re-render just because a toast was pushed.\n\nConsequence: multiple `<ToastContainer>` instances are supported via `containerId`; the store routes toasts to the right container (default id is `1`).\n\n### Components (`src/components/`)\n\n- `ToastContainer.tsx` — positions the portal, manages stacking (CSS-variable transforms computed in a layout effect), keyboard focus / `Alt+T` hotkey, collapse state.\n- `Toast.tsx` — per-toast wrapper; consumes `useToast` (drag-to-dismiss, pause-on-hover, pause-on-blur, timer).\n- `ProgressBar.tsx`, `CloseButton.tsx`, `Icons.tsx` — the pieces a toast renders.\n- `Transitions.tsx` — `Bounce` / `Flip` / `Slide` / `Zoom` built with `cssTransition` from `src/utils/cssTransition.tsx`.\n\n### Hooks (`src/hooks/`)\n\n- `useToastContainer.ts` — store → React bridge (see above). The most important file in the repo.\n- `useToast.ts` — per-toast UX behavior.\n- `useIsomorphicLayoutEffect.ts` — SSR-safe layout effect.\n- `useStyleSheet.ts` — runtime CSS injection (replaces the old tsup shim). Per-document `Map` so multiple `<ToastContainer>` instances only inject once per document (shadow DOM / iframe safe). If a later mount supplies a nonce and the previous injection had none, the attribute is updated on the existing `<style>` tag — see `src/hooks/useStyleSheet.ts`.\n\n### Stacked / limit / queue semantics\n\n- `ToastContainerProps.limit` — excess toasts are buffered in a per-container queue inside `containerObserver.ts`; as toasts close, the next queued toast is emitted. `toast.clearWaitingQueue()` drains it.\n- `ToastContainerProps.stacked` — `ToastContainer.tsx` measures toast heights in a layout effect and sets CSS custom properties (`--y`, `--g`, `--s`) that drive `translate3d`-based stacking and a collapsed state.\n\n### Types\n\nPublic types are centralized in `src/types.ts` and re-exported from `src/index.ts`. Notable: `ToastOptions<Data>`, `UpdateOptions<Data>`, `ToastContainerProps`, `ToastContent<T>`, `ToastItem<Data>` (payload for `toast.onChange`), `TypeOptions`, `Theme`.\n\n### Addon: `use-notification-center`\n\nLives at `packages/use-notification-center/` as a **private pnpm workspace package** (see its `package.json` — `\"private\": true`). It exports a `useNotificationCenter()` hook — a **persistent** notification store independent from the transient toast queue. It subscribes to `toast.onChange()` to capture lifecycle events and provides filtering, read/unread, and sort.\n\nThe addon declares `\"react-toastify\": \"workspace:*\"` as a dependency, so its source can `import 'react-toastify'` and pnpm resolves it via a symlink at `packages/use-notification-center/node_modules/react-toastify → <repo root>`. No Vite alias or tsconfig `paths` entry is needed.\n\nIt is **not published separately**. The root `tsup.config.ts` builds it into `/addons/use-notification-center/` at the repo root, which the main `react-toastify` package includes via `package.json#files` and exposes via the `react-toastify/addons/use-notification-center` and `react-toastify/notification-center` subpath exports. Consumers still install only `react-toastify`.\n\n## Playground\n\n`/playground` is a standalone Vite app used as the demo and manual-QA harness. It is declared as a workspace in `pnpm-workspace.yaml` and depends on the root package via `\"react-toastify\": \"workspace:*\"`, so `pnpm install` symlinks the root into `playground/node_modules/react-toastify`. `pnpm start` runs it (via `pnpm --filter playground dev`). Most changes should be verified in the playground before running Cypress.\n\n### Workspace layout\n\n`pnpm-workspace.yaml` lists:\n\n- **root** (`react-toastify`) — the published library.\n- **`packages/*`** — currently just `packages/use-notification-center/` (private internal addon package, see Addon section above).\n- **`playground`** — dev harness.\n\nBoth `playground` and `packages/use-notification-center` depend on the root via `workspace:*`. `pnpm install` is the only setup step — no `pnpm link` required.\n\n## CI\n\n`.github/workflows/build.yaml` runs on every push and PR: install → `pnpm build` → `pnpm test:run` → upload Cypress screenshots/videos on failure → report coverage to Coveralls. Coverage is instrumented at runtime by `vite-plugin-istanbul` (see `vite.config.mts`) and collected by `@cypress/code-coverage`.\n","isInternal":false,"tokens":1958,"sizeBytes":8266}],"systemPromptSnippet":"<yakaai_skills repo=\"fkhadra/react-toastify\">\n<!-- File: packages/use-notification-center/package.json (Tokens: ~116 | Category: anthropic-skill) -->\n{\n  \"name\": \"use-notification-center\",\n  \"private\": true,\n  \"version\": \"0.0.0\",\n  \"description\": \"Internal workspace package for the useNotificationCenter addon. Not published separately — built into react-toastify's /addons directory by tsup at the repo root.\",\n  \"main\": \"src/index.ts\",\n  \"types\": \"src/index.ts\",\n  \"dependencies\": {\n    \"react-toastify\": \"workspace:*\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^18 || ^19\"\n  }\n}\n\n<!-- File: CLAUDE.md (Tokens: ~1958 | Category: claude-rule) -->\n# CLAUDE.md\n\nThis file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.\n\n## Commands\n\nPackage manager is **pnpm** (CI uses pnpm 9, Node 22). Do not use npm or yarn.\n\n| Task                                                                           | Command         |\n| ------------------------------------------------------------------------------ | --------------- |\n| Install deps (also wires the playground to the local source via the workspace) | `pnpm install`  |\n| Run the playground (interactive demo / dev harness)                            | `pnpm start`    |\n| Open Cypress component-test UI                                                 | `pnpm test`     |\n| Run Cypress component tests headlessly (CI uses this)                          | `pnpm test:run` |\n| Build the library (`tsup` + copy `style.css` → `dist/ReactToastify.css`)       | `pnpm build`    |\n| Format `src/` with Prettier                                                    | `pnpm prettier` |\n\n### Running a single test\n\nTests are **Cypress component tests**, not Jest. Files live next to source as `*.cy.tsx` (e.g. `src/components/Toast.cy.tsx`). To run one file headlessly:\n\n```sh\npnpm exec cypress run --component -b chrome --spec src/components/Toast.cy.tsx\n```\n\nOr use `pnpm test` to open the interactive runner and pick a spec.\n\n### Lint / formatting\n\nThere is **no ESLint**. Code style is Prettier only (config inline in `package.json`: `printWidth: 120`, single quotes, no trailing commas, avoid arrow parens). A **lefthook** pre-commit hook runs `lint-staged`, which runs Prettier on staged `*.{js,jsx,ts,tsx,md,html,css}` files. The CI workflow's lint step is currently commented out — Prettier is the only gate.\n\n## Architecture\n\n### Two public entry points + one addon\n\n`tsup.config.ts` produces three independent bundles:\n\n1. **`react-toastify`** (default) — `src/index.ts`. Its `ToastContainer` export is the **`StyledToastContainer`** wrapper at `src/components/StyledToastContainer.tsx`, which imports `src/style.css` as a string (via Vite's `?raw` suffix; tsup uses `loader: { '.css': 'text' }` plus a small esbuild plugin that strips the `?raw` query) and injects it via `useStyleSheet(css, props.nonce)` on mount. Users can pass a `nonce` prop for Content Security Policy compliance. All bundles are prefixed with `\"use client\";` for React Server Components.\n2. **`react-toastify/unstyled`** — `src/unstyled.ts`. Re-exports the **raw** `ToastContainer` from `./components` without the styled wrapper, so nothing is injected at runtime. Use this subpath when consumers want to ship their own CSS (from `react-toastify/dist/ReactToastify.css` or elsewhere).\n3. **`react-toastify/addons/use-notification-center`** — built from the internal workspace package at `packages/use-notification-center/` into the `/addons` directory (not `/dist`); declared in `package.json#exports`.\n\nThe raw stylesheet is also exposed as `react-toastify/dist/ReactToastify.css`.\n\n### Runtime model: imperative global store bridged by `useSyncExternalStore`\n\nThe library is **not** Context- or Redux-based. The flow is:\n\n- `src/core/store.ts` — a module-level singleton. Holds a `Map<containerId, ContainerObserver>` and a `renderQueue` that buffers `toast()` calls issued before any `<ToastContainer>` mounts.\n- `src/core/toast.ts` — the public imperative API (`toast()`, `toast.success`, `toast.update`, `toast.promise`, `toast.onChange`, …). Dispatches through the store.\n- `src/core/containerObserver.ts` — one instance per `<ToastContainer>`. Owns per-container state: toast `Map`, waiting `queue` (when `limit > 0`), snapshot for `useSyncExternalStore`, prop validation, and lifecycle callbacks (`onOpen` / `onClose`).\n- `src/hooks/useToastContainer.ts` — the **only** bridge to React. `<ToastContainer>` subscribes to its observer via `useSyncExternalStore`, which is why nothing in the tree needs to re-render just because a toast was pushed.\n\nConsequence: multiple `<ToastContainer>` instances are supported via `containerId`; the store routes toasts to the right container (default id is `1`).\n\n### Components (`src/components/`)\n\n- `ToastContainer.tsx` — positions the portal, manages stacking (CSS-variable transforms computed in a layout effect), keyboard focus / `Alt+T` hotkey, collapse state.\n- `Toast.tsx` — per-toast wrapper; consumes `useToast` (drag-to-dismiss, pause-on-hover, pause-on-blur, timer).\n- `ProgressBar.tsx`, `CloseButton.tsx`, `Icons.tsx` — the pieces a toast renders.\n- `Transitions.tsx` — `Bounce` / `Flip` / `Slide` / `Zoom` built with `cssTransition` from `src/utils/cssTransition.tsx`.\n\n### Hooks (`src/hooks/`)\n\n- `useToastContainer.ts` — store → React bridge (see above). The most important file in the repo.\n- `useToast.ts` — per-toast UX behavior.\n- `useIsomorphicLayoutEffect.ts` — SSR-safe layout effect.\n- `useStyleSheet.ts` — runtime CSS injection (replaces the old tsup shim). Per-document `Map` so multiple `<ToastContainer>` instances only inject once per document (shadow DOM / iframe safe). If a later mount supplies a nonce and the previous injection had none, the attribute is updated on the existing `<style>` tag — see `src/hooks/useStyleSheet.ts`.\n\n### Stacked / limit / queue semantics\n\n- `ToastContainerProps.limit` — excess toasts are buffered in a per-container queue inside `containerObserver.ts`; as toasts close, the next queued toast is emitted. `toast.clearWaitingQueue()` drains it.\n- `ToastContainerProps.stacked` — `ToastContainer.tsx` measures toast heights in a layout effect and sets CSS custom properties (`--y`, `--g`, `--s`) that drive `translate3d`-based stacking and a collapsed state.\n\n### Types\n\nPublic types are centralized in `src/types.ts` and re-exported from `src/index.ts`. Notable: `ToastOptions<Data>`, `UpdateOptions<Data>`, `ToastContainerProps`, `ToastContent<T>`, `ToastItem<Data>` (payload for `toast.onChange`), `TypeOptions`, `Theme`.\n\n### Addon: `use-notification-center`\n\nLives at `packages/use-notification-center/` as a **private pnpm workspace package** (see its `package.json` — `\"private\": true`). It exports a `useNotificationCenter()` hook — a **persistent** notification store independent from the transient toast queue. It subscribes to `toast.onChange()` to capture lifecycle events and provides filtering, read/unread, and sort.\n\nThe addon declares `\"react-toastify\": \"workspace:*\"` as a dependency, so its source can `import 'react-toastify'` and pnpm resolves it via a symlink at `packages/use-notification-center/node_modules/react-toastify → <repo root>`. No Vite alias or tsconfig `paths` entry is needed.\n\nIt is **not published separately**. The root `tsup.config.ts` builds it into `/addons/use-notification-center/` at the repo root, which the main `react-toastify` package includes via `package.json#files` and exposes via the `react-toastify/addons/use-notification-center` and `react-toastify/notification-center` subpath exports. Consumers still install only `react-toastify`.\n\n## Playground\n\n`/playground` is a standalone Vite app used as the demo and manual-QA harness. It is declared as a workspace in `pnpm-workspace.yaml` and depends on the root package via `\"react-toastify\": \"workspace:*\"`, so `pnpm install` symlinks the root into `playground/node_modules/react-toastify`. `pnpm start` runs it (via `pnpm --filter playground dev`). Most changes should be verified in the playground before running Cypress.\n\n### Workspace layout\n\n`pnpm-workspace.yaml` lists:\n\n- **root** (`react-toastify`) — the published library.\n- **`packages/*`** — currently just `packages/use-notification-center/` (private internal addon package, see Addon section above).\n- **`playground`** — dev harness.\n\nBoth `playground` and `packages/use-notification-center` depend on the root via `workspace:*`. `pnpm install` is the only setup step — no `pnpm link` required.\n\n## CI\n\n`.github/workflows/build.yaml` runs on every push and PR: install → `pnpm build` → `pnpm test:run` → upload Cypress screenshots/videos on failure → report coverage to Coveralls. Coverage is instrumented at runtime by `vite-plugin-istanbul` (see `vite.config.mts`) and collected by `@cypress/code-coverage`.\n</yakaai_skills>"}