{"owner":"gilbarbara","repo":"react-joyride","hasSkills":true,"hasMcp":false,"mcpConfig":null,"found":["CLAUDE.md"],"skills":{"CLAUDE.md":"# CLAUDE.md\n\n## Overview\n\nReact Joyride is a React library for creating guided tours (tooltips, walkthroughs, onboarding). Supports React 16.8-19 and SSR.\n\nFor deep architecture details, see `docs/architecture.md`.\n\n## Commands\n\nPackage manager: **pnpm**\n\n```bash\npnpm lint              # ESLint with --fix on src/, test/, and e2e/\npnpm typecheck         # tsc using test/tsconfig.json\npnpm test              # Vitest (run once)\npnpm test:coverage     # With coverage\npnpm test:watch        # Watch mode\npnpm e2e               # Playwright (chromium, firefox, webkit)\npnpm e2e:chromium      # Chromium only\npnpm website           # Website at localhost:3000\npnpm website:build     # Build website for production\npnpm website:start     # Serve built website locally\npnpm website:serve     # Build + start website\npnpm build             # tsdown\npnpm check             # lint → typecheck → test:coverage\npnpm validate          # check → build → size → typevalidation\n```\n\nSingle test: `pnpm test modules/store` | Single e2e: `pnpm e2e:chromium standard`\n\n## How It Works\n\nSingleton `Store` class (ref-based) manages frozen state snapshots. React subscribes via `useSyncExternalStore`.\n\nTwo public APIs: `<Joyride>` component and `useJoyride()` hook (returns `{ controls, failures, on, state, step, Tour }`).\n\n**State machine** has two dimensions: tour `Status` (`idle → ready → waiting → running ↔ paused → finished/skipped`) and step `Lifecycle` (`init → ready → beacon_before → beacon → tooltip_before → tooltip → complete`). See architecture.md for full details.\n\n**Event system**: Single `onEvent(data, controls)` callback receives discriminated events and tour controls: `tour:start`, `step:before_hook`, `step:before`, `scroll:start`, `scroll:end`, `beacon`, `tooltip`, `step:after`, `step:after_hook`, `tour:end`, `tour:status`, `error:target_not_found`, `error`.\n\n**Controlled** (with `stepIndex` prop): Tour pauses at COMPLETE; parent manages index via `onEvent`. **Uncontrolled**: Store manages index internally; supports `initialStepIndex`.\n\n## Key Files\n\n| File | Role |\n|------|------|\n| `src/index.tsx` | SSR-safe wrapper, exports types and literals |\n| `src/hooks/useJoyride.tsx` | Public hook: orchestrates tour, returns controls/state/Tour |\n| `src/hooks/useTourEngine.ts` | Store init, subscriptions, delegates to sub-hooks |\n| `src/hooks/useControls.ts` | Tour control methods (next, prev, start, stop, etc.) |\n| `src/hooks/useEventEmitter.ts` | Centralized event emission with controls |\n| `src/hooks/usePropSync.ts` | Syncs run/steps props to store |\n| `src/hooks/useLifecycleEffect.ts` | 5 effects: action tracking, target resolution, presentation, transitions, tour flow |\n| `src/hooks/useScrollEffect.ts` | Scroll-to-target with placement adjustments |\n| `src/hooks/usePortalElement.ts` | Portal DOM element management |\n| `src/hooks/useTargetPosition.ts` | Target rect tracking via ResizeObserver |\n| `src/hooks/useFocusTrap.ts` | Focus trap for tooltip accessibility |\n| `src/modules/store.ts` | State machine + frozen snapshots |\n| `src/modules/dom.ts` | Element lookup, scroll, visibility |\n| `src/modules/step.ts` | Step merging + validation |\n| `src/modules/helpers.tsx` | Utilities (deepMerge, mergeProps, logDebug) |\n| `src/modules/changes.ts` | State transition detection (treeChanges) |\n| `src/modules/svg.ts` | SVG path generation for overlay/spotlight |\n| `src/defaults.ts` | Default props, locale, options |\n| `src/styles.ts` | Style generation from step |\n| `src/literals/index.ts` | Constants (ACTIONS, EVENTS, LIFECYCLE, ORIGIN, STATUS) |\n\n## Components\n\n| Component | File | Purpose |\n|-----------|------|---------|\n| TourRenderer | `src/components/TourRenderer.tsx` | Conditional rendering, keyboard handler (ESC) |\n| Step | `src/components/Step.tsx` | Validates step + target, renders Floater |\n| Floater | `src/components/Floater.tsx` | Dual Floating UI instances (beacon + tooltip), arrow |\n| Beacon | `src/components/Beacon.tsx` | Animated pulsing indicator |\n| Tooltip | `src/components/Tooltip/index.tsx` | Button handlers, custom component support |\n| DefaultTooltip | `src/components/Tooltip/DefaultTooltip.tsx` | Default tooltip layout |\n| CloseButton | `src/components/Tooltip/CloseButton.tsx` | SVG close icon |\n| Arrow | `src/components/Arrow.tsx` | Tooltip arrow, customizable via `arrowComponent` |\n| Overlay | `src/components/Overlay.tsx` | SVG-based spotlight with path cutout |\n| Loader | `src/components/Loader.tsx` | Loading indicator during target wait/before hooks |\n| Portal | `src/components/Portal.tsx` | React portal wrapper |\n\n## Types\n\nSplit into 8 domain files under `src/types/`: `common`, `components`, `events`, `floating`, `props`, `state`, `step`, `utilities`. Re-exported from `src/types/index.ts`.\n\n## Path Alias\n\n`~/*` maps to `src/*` (tsconfig.json; vitest via native `resolve.tsconfigPaths`; playwright uses website webServer).\n\n## Test Structure\n\n- **Unit tests** (Vitest + jsdom): `test/modules/`, `test/components/`, `test/hooks/`, `test/tours/`\n- **E2E tests** (Playwright): `e2e/` with screenshot snapshots per browser\n- **Fixtures**: `test/__fixtures__/` — Demo components used by both suites\n\nCoverage thresholds: 90% statements, 80% branches, 90% functions, 90% lines.\n\n## Key Dependencies\n\n| Package | Purpose |\n|---------|---------|\n| `@floating-ui/react-dom` | Tooltip/beacon positioning |\n| `@fastify/deepmerge` | Deep object merging (React element aware) |\n| `@gilbarbara/hooks` | useMemoDeepCompare, useMount, usePrevious, useUpdateEffect, useWindowSize |\n| `@gilbarbara/deep-equal` | Deep equality checking |\n| `scroll` / `scrollparent` | Smooth scrolling and scroll parent detection |\n| `react-innertext` | Extract text from React elements |\n| `is-lite` | Type checking utilities |\n\n## Website\n\nNext.js 16 documentation and demo site in `website/`. Imports library via local path (`\"react-joyride\": \"../\"`).\n\n**Stack**: HeroUI v2, Tailwind CSS v4, MDX (rehype-pretty-code + Shiki), next-themes, DocSearch.\n\n**Bundler**: `dev` runs on Turbopack; `build` stays on `--webpack` (`dev:webpack` is the fallback). `next build --turbopack` fails: `@next/mdx`'s Turbopack path never applies the `isServer` vendored-RSC-React alias (its `webpack()` hook does), so server-evaluated modules get the `react-server` React and any interactive HeroUI component's `@react-aria/ssr` `createContext` throws app-wide. The webpack alias in `next.config.ts` masks this; Turbopack has no server-only alias equivalent (a global `resolveAlias` pulls server React into the client bundle). Upstream: nextui-org/nextui#3967, shuding/nextra#4703.\n\n**Documentation** (`website/src/app/docs/`): MDX pages covering getting-started, new-in-v3, how-it-works, hook, props (options, styles, floating-options), step, events, custom-components, exports, accessibility, migration.\n\n**Demos** (`website/src/app/demos/`): 8 interactive examples — overview, controlled, custom-components, scroll, modal, carousel, chat, multi-route.\n\n**Key patterns**:\n- `ConfigContext` — centralized tour configuration for demos\n- `website/src/components/` — 33 components (ConfigPanel, custom tour components, code blocks, navigation)\n- `website/src/config/` — sidebar nav, default values, hero content\n\n## Visual Customization\n- Visual/cosmetic options (colors, borders, sizes) belong in `styles.*`, not as new Options fields.\n- Before adding a new option for appearance, check if it fits an existing or new `styles` key.\n"},"files":{"CLAUDE.md":"# CLAUDE.md\n\n## Overview\n\nReact Joyride is a React library for creating guided tours (tooltips, walkthroughs, onboarding). Supports React 16.8-19 and SSR.\n\nFor deep architecture details, see `docs/architecture.md`.\n\n## Commands\n\nPackage manager: **pnpm**\n\n```bash\npnpm lint              # ESLint with --fix on src/, test/, and e2e/\npnpm typecheck         # tsc using test/tsconfig.json\npnpm test              # Vitest (run once)\npnpm test:coverage     # With coverage\npnpm test:watch        # Watch mode\npnpm e2e               # Playwright (chromium, firefox, webkit)\npnpm e2e:chromium      # Chromium only\npnpm website           # Website at localhost:3000\npnpm website:build     # Build website for production\npnpm website:start     # Serve built website locally\npnpm website:serve     # Build + start website\npnpm build             # tsdown\npnpm check             # lint → typecheck → test:coverage\npnpm validate          # check → build → size → typevalidation\n```\n\nSingle test: `pnpm test modules/store` | Single e2e: `pnpm e2e:chromium standard`\n\n## How It Works\n\nSingleton `Store` class (ref-based) manages frozen state snapshots. React subscribes via `useSyncExternalStore`.\n\nTwo public APIs: `<Joyride>` component and `useJoyride()` hook (returns `{ controls, failures, on, state, step, Tour }`).\n\n**State machine** has two dimensions: tour `Status` (`idle → ready → waiting → running ↔ paused → finished/skipped`) and step `Lifecycle` (`init → ready → beacon_before → beacon → tooltip_before → tooltip → complete`). See architecture.md for full details.\n\n**Event system**: Single `onEvent(data, controls)` callback receives discriminated events and tour controls: `tour:start`, `step:before_hook`, `step:before`, `scroll:start`, `scroll:end`, `beacon`, `tooltip`, `step:after`, `step:after_hook`, `tour:end`, `tour:status`, `error:target_not_found`, `error`.\n\n**Controlled** (with `stepIndex` prop): Tour pauses at COMPLETE; parent manages index via `onEvent`. **Uncontrolled**: Store manages index internally; supports `initialStepIndex`.\n\n## Key Files\n\n| File | Role |\n|------|------|\n| `src/index.tsx` | SSR-safe wrapper, exports types and literals |\n| `src/hooks/useJoyride.tsx` | Public hook: orchestrates tour, returns controls/state/Tour |\n| `src/hooks/useTourEngine.ts` | Store init, subscriptions, delegates to sub-hooks |\n| `src/hooks/useControls.ts` | Tour control methods (next, prev, start, stop, etc.) |\n| `src/hooks/useEventEmitter.ts` | Centralized event emission with controls |\n| `src/hooks/usePropSync.ts` | Syncs run/steps props to store |\n| `src/hooks/useLifecycleEffect.ts` | 5 effects: action tracking, target resolution, presentation, transitions, tour flow |\n| `src/hooks/useScrollEffect.ts` | Scroll-to-target with placement adjustments |\n| `src/hooks/usePortalElement.ts` | Portal DOM element management |\n| `src/hooks/useTargetPosition.ts` | Target rect tracking via ResizeObserver |\n| `src/hooks/useFocusTrap.ts` | Focus trap for tooltip accessibility |\n| `src/modules/store.ts` | State machine + frozen snapshots |\n| `src/modules/dom.ts` | Element lookup, scroll, visibility |\n| `src/modules/step.ts` | Step merging + validation |\n| `src/modules/helpers.tsx` | Utilities (deepMerge, mergeProps, logDebug) |\n| `src/modules/changes.ts` | State transition detection (treeChanges) |\n| `src/modules/svg.ts` | SVG path generation for overlay/spotlight |\n| `src/defaults.ts` | Default props, locale, options |\n| `src/styles.ts` | Style generation from step |\n| `src/literals/index.ts` | Constants (ACTIONS, EVENTS, LIFECYCLE, ORIGIN, STATUS) |\n\n## Components\n\n| Component | File | Purpose |\n|-----------|------|---------|\n| TourRenderer | `src/components/TourRenderer.tsx` | Conditional rendering, keyboard handler (ESC) |\n| Step | `src/components/Step.tsx` | Validates step + target, renders Floater |\n| Floater | `src/components/Floater.tsx` | Dual Floating UI instances (beacon + tooltip), arrow |\n| Beacon | `src/components/Beacon.tsx` | Animated pulsing indicator |\n| Tooltip | `src/components/Tooltip/index.tsx` | Button handlers, custom component support |\n| DefaultTooltip | `src/components/Tooltip/DefaultTooltip.tsx` | Default tooltip layout |\n| CloseButton | `src/components/Tooltip/CloseButton.tsx` | SVG close icon |\n| Arrow | `src/components/Arrow.tsx` | Tooltip arrow, customizable via `arrowComponent` |\n| Overlay | `src/components/Overlay.tsx` | SVG-based spotlight with path cutout |\n| Loader | `src/components/Loader.tsx` | Loading indicator during target wait/before hooks |\n| Portal | `src/components/Portal.tsx` | React portal wrapper |\n\n## Types\n\nSplit into 8 domain files under `src/types/`: `common`, `components`, `events`, `floating`, `props`, `state`, `step`, `utilities`. Re-exported from `src/types/index.ts`.\n\n## Path Alias\n\n`~/*` maps to `src/*` (tsconfig.json; vitest via native `resolve.tsconfigPaths`; playwright uses website webServer).\n\n## Test Structure\n\n- **Unit tests** (Vitest + jsdom): `test/modules/`, `test/components/`, `test/hooks/`, `test/tours/`\n- **E2E tests** (Playwright): `e2e/` with screenshot snapshots per browser\n- **Fixtures**: `test/__fixtures__/` — Demo components used by both suites\n\nCoverage thresholds: 90% statements, 80% branches, 90% functions, 90% lines.\n\n## Key Dependencies\n\n| Package | Purpose |\n|---------|---------|\n| `@floating-ui/react-dom` | Tooltip/beacon positioning |\n| `@fastify/deepmerge` | Deep object merging (React element aware) |\n| `@gilbarbara/hooks` | useMemoDeepCompare, useMount, usePrevious, useUpdateEffect, useWindowSize |\n| `@gilbarbara/deep-equal` | Deep equality checking |\n| `scroll` / `scrollparent` | Smooth scrolling and scroll parent detection |\n| `react-innertext` | Extract text from React elements |\n| `is-lite` | Type checking utilities |\n\n## Website\n\nNext.js 16 documentation and demo site in `website/`. Imports library via local path (`\"react-joyride\": \"../\"`).\n\n**Stack**: HeroUI v2, Tailwind CSS v4, MDX (rehype-pretty-code + Shiki), next-themes, DocSearch.\n\n**Bundler**: `dev` runs on Turbopack; `build` stays on `--webpack` (`dev:webpack` is the fallback). `next build --turbopack` fails: `@next/mdx`'s Turbopack path never applies the `isServer` vendored-RSC-React alias (its `webpack()` hook does), so server-evaluated modules get the `react-server` React and any interactive HeroUI component's `@react-aria/ssr` `createContext` throws app-wide. The webpack alias in `next.config.ts` masks this; Turbopack has no server-only alias equivalent (a global `resolveAlias` pulls server React into the client bundle). Upstream: nextui-org/nextui#3967, shuding/nextra#4703.\n\n**Documentation** (`website/src/app/docs/`): MDX pages covering getting-started, new-in-v3, how-it-works, hook, props (options, styles, floating-options), step, events, custom-components, exports, accessibility, migration.\n\n**Demos** (`website/src/app/demos/`): 8 interactive examples — overview, controlled, custom-components, scroll, modal, carousel, chat, multi-route.\n\n**Key patterns**:\n- `ConfigContext` — centralized tour configuration for demos\n- `website/src/components/` — 33 components (ConfigPanel, custom tour components, code blocks, navigation)\n- `website/src/config/` — sidebar nav, default values, hero content\n\n## Visual Customization\n- Visual/cosmetic options (colors, borders, sizes) belong in `styles.*`, not as new Options fields.\n- Before adding a new option for appearance, check if it fits an existing or new `styles` key.\n"},"items":[{"name":"CLAUDE.md","path":"CLAUDE.md","title":"CLAUDE.md","content":"# CLAUDE.md\n\n## Overview\n\nReact Joyride is a React library for creating guided tours (tooltips, walkthroughs, onboarding). Supports React 16.8-19 and SSR.\n\nFor deep architecture details, see `docs/architecture.md`.\n\n## Commands\n\nPackage manager: **pnpm**\n\n```bash\npnpm lint              # ESLint with --fix on src/, test/, and e2e/\npnpm typecheck         # tsc using test/tsconfig.json\npnpm test              # Vitest (run once)\npnpm test:coverage     # With coverage\npnpm test:watch        # Watch mode\npnpm e2e               # Playwright (chromium, firefox, webkit)\npnpm e2e:chromium      # Chromium only\npnpm website           # Website at localhost:3000\npnpm website:build     # Build website for production\npnpm website:start     # Serve built website locally\npnpm website:serve     # Build + start website\npnpm build             # tsdown\npnpm check             # lint → typecheck → test:coverage\npnpm validate          # check → build → size → typevalidation\n```\n\nSingle test: `pnpm test modules/store` | Single e2e: `pnpm e2e:chromium standard`\n\n## How It Works\n\nSingleton `Store` class (ref-based) manages frozen state snapshots. React subscribes via `useSyncExternalStore`.\n\nTwo public APIs: `<Joyride>` component and `useJoyride()` hook (returns `{ controls, failures, on, state, step, Tour }`).\n\n**State machine** has two dimensions: tour `Status` (`idle → ready → waiting → running ↔ paused → finished/skipped`) and step `Lifecycle` (`init → ready → beacon_before → beacon → tooltip_before → tooltip → complete`). See architecture.md for full details.\n\n**Event system**: Single `onEvent(data, controls)` callback receives discriminated events and tour controls: `tour:start`, `step:before_hook`, `step:before`, `scroll:start`, `scroll:end`, `beacon`, `tooltip`, `step:after`, `step:after_hook`, `tour:end`, `tour:status`, `error:target_not_found`, `error`.\n\n**Controlled** (with `stepIndex` prop): Tour pauses at COMPLETE; parent manages index via `onEvent`. **Uncontrolled**: Store manages index internally; supports `initialStepIndex`.\n\n## Key Files\n\n| File | Role |\n|------|------|\n| `src/index.tsx` | SSR-safe wrapper, exports types and literals |\n| `src/hooks/useJoyride.tsx` | Public hook: orchestrates tour, returns controls/state/Tour |\n| `src/hooks/useTourEngine.ts` | Store init, subscriptions, delegates to sub-hooks |\n| `src/hooks/useControls.ts` | Tour control methods (next, prev, start, stop, etc.) |\n| `src/hooks/useEventEmitter.ts` | Centralized event emission with controls |\n| `src/hooks/usePropSync.ts` | Syncs run/steps props to store |\n| `src/hooks/useLifecycleEffect.ts` | 5 effects: action tracking, target resolution, presentation, transitions, tour flow |\n| `src/hooks/useScrollEffect.ts` | Scroll-to-target with placement adjustments |\n| `src/hooks/usePortalElement.ts` | Portal DOM element management |\n| `src/hooks/useTargetPosition.ts` | Target rect tracking via ResizeObserver |\n| `src/hooks/useFocusTrap.ts` | Focus trap for tooltip accessibility |\n| `src/modules/store.ts` | State machine + frozen snapshots |\n| `src/modules/dom.ts` | Element lookup, scroll, visibility |\n| `src/modules/step.ts` | Step merging + validation |\n| `src/modules/helpers.tsx` | Utilities (deepMerge, mergeProps, logDebug) |\n| `src/modules/changes.ts` | State transition detection (treeChanges) |\n| `src/modules/svg.ts` | SVG path generation for overlay/spotlight |\n| `src/defaults.ts` | Default props, locale, options |\n| `src/styles.ts` | Style generation from step |\n| `src/literals/index.ts` | Constants (ACTIONS, EVENTS, LIFECYCLE, ORIGIN, STATUS) |\n\n## Components\n\n| Component | File | Purpose |\n|-----------|------|---------|\n| TourRenderer | `src/components/TourRenderer.tsx` | Conditional rendering, keyboard handler (ESC) |\n| Step | `src/components/Step.tsx` | Validates step + target, renders Floater |\n| Floater | `src/components/Floater.tsx` | Dual Floating UI instances (beacon + tooltip), arrow |\n| Beacon | `src/components/Beacon.tsx` | Animated pulsing indicator |\n| Tooltip | `src/components/Tooltip/index.tsx` | Button handlers, custom component support |\n| DefaultTooltip | `src/components/Tooltip/DefaultTooltip.tsx` | Default tooltip layout |\n| CloseButton | `src/components/Tooltip/CloseButton.tsx` | SVG close icon |\n| Arrow | `src/components/Arrow.tsx` | Tooltip arrow, customizable via `arrowComponent` |\n| Overlay | `src/components/Overlay.tsx` | SVG-based spotlight with path cutout |\n| Loader | `src/components/Loader.tsx` | Loading indicator during target wait/before hooks |\n| Portal | `src/components/Portal.tsx` | React portal wrapper |\n\n## Types\n\nSplit into 8 domain files under `src/types/`: `common`, `components`, `events`, `floating`, `props`, `state`, `step`, `utilities`. Re-exported from `src/types/index.ts`.\n\n## Path Alias\n\n`~/*` maps to `src/*` (tsconfig.json; vitest via native `resolve.tsconfigPaths`; playwright uses website webServer).\n\n## Test Structure\n\n- **Unit tests** (Vitest + jsdom): `test/modules/`, `test/components/`, `test/hooks/`, `test/tours/`\n- **E2E tests** (Playwright): `e2e/` with screenshot snapshots per browser\n- **Fixtures**: `test/__fixtures__/` — Demo components used by both suites\n\nCoverage thresholds: 90% statements, 80% branches, 90% functions, 90% lines.\n\n## Key Dependencies\n\n| Package | Purpose |\n|---------|---------|\n| `@floating-ui/react-dom` | Tooltip/beacon positioning |\n| `@fastify/deepmerge` | Deep object merging (React element aware) |\n| `@gilbarbara/hooks` | useMemoDeepCompare, useMount, usePrevious, useUpdateEffect, useWindowSize |\n| `@gilbarbara/deep-equal` | Deep equality checking |\n| `scroll` / `scrollparent` | Smooth scrolling and scroll parent detection |\n| `react-innertext` | Extract text from React elements |\n| `is-lite` | Type checking utilities |\n\n## Website\n\nNext.js 16 documentation and demo site in `website/`. Imports library via local path (`\"react-joyride\": \"../\"`).\n\n**Stack**: HeroUI v2, Tailwind CSS v4, MDX (rehype-pretty-code + Shiki), next-themes, DocSearch.\n\n**Bundler**: `dev` runs on Turbopack; `build` stays on `--webpack` (`dev:webpack` is the fallback). `next build --turbopack` fails: `@next/mdx`'s Turbopack path never applies the `isServer` vendored-RSC-React alias (its `webpack()` hook does), so server-evaluated modules get the `react-server` React and any interactive HeroUI component's `@react-aria/ssr` `createContext` throws app-wide. The webpack alias in `next.config.ts` masks this; Turbopack has no server-only alias equivalent (a global `resolveAlias` pulls server React into the client bundle). Upstream: nextui-org/nextui#3967, shuding/nextra#4703.\n\n**Documentation** (`website/src/app/docs/`): MDX pages covering getting-started, new-in-v3, how-it-works, hook, props (options, styles, floating-options), step, events, custom-components, exports, accessibility, migration.\n\n**Demos** (`website/src/app/demos/`): 8 interactive examples — overview, controlled, custom-components, scroll, modal, carousel, chat, multi-route.\n\n**Key patterns**:\n- `ConfigContext` — centralized tour configuration for demos\n- `website/src/components/` — 33 components (ConfigPanel, custom tour components, code blocks, navigation)\n- `website/src/config/` — sidebar nav, default values, hero content\n\n## Visual Customization\n- Visual/cosmetic options (colors, borders, sizes) belong in `styles.*`, not as new Options fields.\n- Before adding a new option for appearance, check if it fits an existing or new `styles` key.\n","category":"root","tokens":1865}]}