### Start Create React App example

Source: https://github.com/ericclemmons/click-to-component/blob/main/packages/click-to-react-component/README.md

Navigate to the Create React App example directory and start the development server.

```shell
cd apps/cra
pnpm start
```

--------------------------------

### Start Next.js example

Source: https://github.com/ericclemmons/click-to-component/blob/main/packages/click-to-react-component/README.md

Navigate to the Next.js example directory and start the development server.

```shell
cd apps/next
pnpm dev
```

--------------------------------

### Install project dependencies with pnpm

Source: https://github.com/ericclemmons/click-to-component/blob/main/packages/click-to-react-component/README.md

Install all necessary project dependencies using the pnpm package manager.

```shell
pnpm install
```

--------------------------------

### Install click-to-react-component with npm

Source: https://github.com/ericclemmons/click-to-component/blob/main/packages/click-to-react-component/README.md

Install the package using npm. It will be automatically removed from production builds due to tree-shaking.

```shell
npm install click-to-react-component
```

--------------------------------

### Run Next.js Development Server

Source: https://github.com/ericclemmons/click-to-component/blob/main/apps/next/README.md

Execute these commands to start the local development server for your Next.js application. Open your browser to http://localhost:3000 to view the application.

```bash
npm run dev
```

```bash
yarn dev
```

--------------------------------

### Install click-to-react-component with pnpm

Source: https://github.com/ericclemmons/click-to-component/blob/main/packages/click-to-react-component/README.md

Install the package using pnpm. It will be automatically removed from production builds due to tree-shaking.

```shell
pnpm add click-to-react-component
```

--------------------------------

### Configure Docusaurus for Click-to-Component

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Install the Babel plugin and configure `babel.config.js` to enable `_debugSource` for development builds. This setup is required for click-to-react-component to function correctly.

```javascript
// Install dependency:
// npm install @babel/plugin-transform-react-jsx-source

// babel.config.js
module.exports = {
  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
  plugins: [
    ...(process.env.BABEL_ENV === 'development'
      ? ['@babel/plugin-transform-react-jsx-source']
      : []),
  ],
}
```

```javascript
// src/theme/Root.js
import { ClickToComponent } from 'click-to-react-component'
import React from 'react'

export default function Root({ children }) {
  return (
    <>
      <ClickToComponent />
      {children}
    </>
  )
}
```

--------------------------------

### Install click-to-react-component with yarn

Source: https://github.com/ericclemmons/click-to-component/blob/main/packages/click-to-react-component/README.md

Install the package using yarn. It will be automatically removed from production builds due to tree-shaking.

```shell
yarn add click-to-react-component
```

--------------------------------

### Configure Docusaurus for ClickToComponent

Source: https://github.com/ericclemmons/click-to-component/blob/main/packages/click-to-react-component/README.md

Install the necessary Babel plugin and configure your Docusaurus root component to include ClickToComponent for source navigation.

```js
module.exports = {
  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
  plugins: [
    ...(process.env.BABEL_ENV === 'development'
      ? ['@babel/plugin-transform-react-jsx-source']
      : []),
  ],
};

```

```js
import { ClickToComponent } from 'click-to-react-component';
import React from 'react';

// Default implementation, that you can customize
export default function Root({ children }) {
  return (
    <>
      <ClickToComponent />
      {children}
    </>
  );
}

```

--------------------------------

### Get Ancestor Fibers with getReactInstancesForElement

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Walks the React Fiber tree upward from a DOM element, collecting all ancestor Fibers into an array. This generates the component hierarchy for context menus.

```javascript
import { getReactInstancesForElement } from 'click-to-react-component/src/getReactInstancesForElement.js'

const el = document.querySelector('.product-card')
const instances = getReactInstancesForElement(el)

instances.forEach((fiber) => {
  const source = fiber._debugSource
  if (source) {
    console.log(`${fiber.type?.name} → ${source.fileName}:${source.lineNumber}`)
  }
})
// ProductCard  → src/components/ProductCard.tsx:5
// ProductList  → src/pages/Shop.tsx:22
// ShopPage     → src/pages/Shop.tsx:1
// App          → src/App.tsx:8
```

--------------------------------

### Get Element Source with Fallback

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Looks up the source code location for a given DOM element. It first tries to find the direct Fiber for the element and, if that fails, walks up the DOM tree to find an ancestor with source information. Useful for elements like text nodes or host elements that don't directly correspond to user-defined React components. Throws an error if no parent with source info is found.

```typescript
import { getSourceForElement } from 'click-to-react-component/src/getSourceForElement.js'

// Direct component element — returns immediately
const source1 = getSourceForElement(document.querySelector('.button'))
// → { fileName: 'src/Button.tsx', lineNumber: 7, columnNumber: 2 }

// Deeply nested span inside a component — climbs to nearest component
const source2 = getSourceForElement(document.querySelector('span.label'))
// → { fileName: 'src/Label.tsx', lineNumber: 3, columnNumber: 4 }

// If no ancestor has source info, throws Error('No parent found for element')
```

--------------------------------

### Get Serializable Component Props

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Extracts scalar props (string, number, boolean, symbol) from a React Fiber's `memoizedProps`. It filters out `key`, children, functions, and props matching the component's `defaultProps`. The result is used for hoverable tooltips in the component list.

```typescript
import { getPropsForInstance } from 'click-to-react-component/src/getPropsForInstance.js'

// Given a Fiber for: <Button variant="primary" disabled={true} onClick={fn} count={3}>
const fiber = getReactInstanceForElement(document.querySelector('button'))
const props = getPropsForInstance(fiber)

console.log(props)
```

--------------------------------

### Get Human-Readable Component Name

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Resolves a human-readable display name from a React Fiber. It uses the Fiber's `tag` value to determine the React work type (function component, class component, memo, etc.) and returns an appropriate name. For unknown tags, it returns 'Unknown Component' and logs a warning.

```typescript
import { getDisplayNameForInstance } from 'click-to-react-component/src/getDisplayNameFromReactInstance.js'

const fiber = getReactInstanceForElement(document.querySelector('.modal'))

console.log(getDisplayNameForInstance(fiber))
```

--------------------------------

### Navigate to the project directory

Source: https://github.com/ericclemmons/click-to-component/blob/main/packages/click-to-react-component/README.md

Change the current directory to the cloned project's root folder.

```shell
cd click-to-component
```

--------------------------------

### Clone the click-to-component repository

Source: https://github.com/ericclemmons/click-to-component/blob/main/packages/click-to-react-component/README.md

Clone the project repository locally using the 'gh repo clone' command.

```shell
gh repo clone ericclemmons/click-to-component
```

--------------------------------

### Integrate ClickToComponent in Create React App

Source: https://github.com/ericclemmons/click-to-component/blob/main/packages/click-to-react-component/README.md

Import and render the ClickToComponent in your application's entry point (e.g., index.js) to enable the click-to-source functionality.

```diff
+import { ClickToComponent } from 'click-to-react-component';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
@@ -8,7 +7,6 @@ import reportWebVitals from './reportWebVitals';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
+    <ClickToComponent />
     <App />
   </React.StrictMode>
 );

```

--------------------------------

### Build Editor URL with getUrl

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Assembles `editor://file/...` URLs from an editor name and source path. Handles absolute POSIX and relative paths for VSCode's URI handler protocol.

```typescript
import { getUrl } from 'click-to-react-component/src/getUrl.js'

// Absolute path (most common on macOS/Linux)
getUrl({ editor: 'vscode', pathToSource: '/home/user/app/src/Button.tsx:10:3' })
// → 'vscode://file/home/user/app/src/Button.tsx:10:3'
```

```typescript
// Absolute path starting with /
getUrl({ editor: 'cursor', pathToSource: '/Users/alice/project/App.tsx:1:1' })
// → 'cursor://file/Users/alice/project/App.tsx:1:1'
```

```typescript
// Relative / Windows-style path
getUrl({ editor: 'vscode-insiders', pathToSource: 'C:/projects/app/src/App.tsx:5:2' })
// → 'vscode-insiders://file/C:/projects/app/src/App.tsx:5:2'
```

--------------------------------

### `getUrl` — Editor URL builder

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Assembles the final `editor://file/...` URL from an editor name and a resolved source path string. Handles both absolute POSIX paths (prefixed with `/`) and relative paths to produce correct URL shapes accepted by VSCode's URI handler protocol.

```APIDOC
## `getUrl` — Editor URL builder

### Description
Internal utility that assembles the final `editor://file/...` URL from an editor name and a resolved source path string. Handles both absolute POSIX paths (prefixed with `/`) and relative paths to produce correct URL shapes accepted by VSCode's URI handler protocol.

### Usage
```ts
import { getUrl } from 'click-to-react-component/src/getUrl.js'

// Absolute path (most common on macOS/Linux)
getUrl({ editor: 'vscode', pathToSource: '/home/user/app/src/Button.tsx:10:3' })
// → 'vscode://file/home/user/app/src/Button.tsx:10:3'

// Absolute path starting with /
getUrl({ editor: 'cursor', pathToSource: '/Users/alice/project/App.tsx:1:1' })
// → 'cursor://file/Users/alice/project/App.tsx:1:1'

// Relative / Windows-style path
getUrl({ editor: 'vscode-insiders', pathToSource: 'C:/projects/app/src/App.tsx:5:2' })
// → 'vscode-insiders://file/C:/projects/app/src/App.tsx:5:2'
```
```

--------------------------------

### Integrate ClickToComponent in Vite

Source: https://github.com/ericclemmons/click-to-component/blob/main/packages/click-to-react-component/README.md

Import and render the ClickToComponent in your Vite-based React application's entry point to enable the click-to-source functionality.

```diff
+import { ClickToComponent } from "click-to-react-component";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
+   <ClickToComponent />
  </React.StrictMode>
);

```

--------------------------------

### Configure Editor Target with 'editor' Prop

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Specify the target editor using the 'editor' prop, which accepts predefined strings like 'vscode', 'vscode-insiders', 'cursor', or custom URI handlers. Environment variables can also be used for per-developer configuration.

```tsx
// Explicit editor string
<ClickToComponent editor="cursor" />
```

```tsx
// Via environment variable (Next.js)
// .env.local:
//   NEXT_PUBLIC_CTC_EDITOR=vscode-insiders
<ClickToComponent editor={process.env.NEXT_PUBLIC_CTC_EDITOR} />
```

```tsx
// Custom editor with a registered vscode-like URI handler
<ClickToComponent editor="my-editor" />
// Opens: my-editor://file//home/user/project/src/App.tsx:12:5
```

--------------------------------

### Integrate ClickToComponent in Next.js

Source: https://github.com/ericclemmons/click-to-component/blob/main/packages/click-to-react-component/README.md

Import and render the ClickToComponent within the MyApp component in your Next.js application to enable the click-to-source functionality.

```diff
+import { ClickToComponent } from 'click-to-react-component'
 import type { AppProps } from 'next/app'
 import '../styles/globals.css'

 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <>
+      <ClickToComponent />
       <Component {...pageProps} />
     </>
   )

```

--------------------------------

### `getReactInstancesForElement` — Full ancestor Fiber chain

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Walks the React Fiber tree upward from a given DOM element by repeatedly following `_debugOwner` references, collecting every ancestor Fiber into an ordered array. This produces the complete component hierarchy shown in the right-click context menu.

```APIDOC
## `getReactInstancesForElement` — Full ancestor Fiber chain

### Description
Walks the React Fiber tree upward from a given DOM element by repeatedly following `_debugOwner` references, collecting every ancestor Fiber into an ordered array. This produces the complete component hierarchy shown in the right-click context menu.

### Usage
```ts
import { getReactInstancesForElement } from 'click-to-react-component/src/getReactInstancesForElement.js'

const el = document.querySelector('.product-card')
const instances = getReactInstancesForElement(el)

instances.forEach((fiber) => {
  const source = fiber._debugSource
  if (source) {
    console.log(`${fiber.type?.name} → ${source.fileName}:${source.lineNumber}`)
  }
})
// ProductCard  → src/components/ProductCard.tsx:5
// ProductList  → src/pages/Shop.tsx:22
// ShopPage     → src/pages/Shop.tsx:1
// App          → src/App.tsx:8
```
```

--------------------------------

### Component State Machine Constants

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Defines the three states of the `ClickToComponent` interaction state machine: `IDLE`, `HOVER`, and `SELECT`. These states are driven by keyboard and mouse events and are used to control the overlay and context menu. The states also provide CSS hooks for custom styling.

```typescript
import { State } from 'click-to-react-component/src/ClickToComponent.js'

console.log(State.IDLE)   // 'IDLE'   — no interaction active
console.log(State.HOVER)  // 'HOVER'  — Alt held, hovering; data-click-to-component="HOVER" on body
console.log(State.SELECT) // 'SELECT' — context menu visible; data-click-to-component="SELECT" on body

// CSS hooks written by the state machine for custom styling:
// [data-click-to-component="HOVER"] *            { pointer-events: auto !important }
// [data-click-to-component-target="HOVER"]       { outline: -webkit-focus-ring-color auto 1px }
// CSS custom property overrides:
// --click-to-component-cursor   (default: context-menu)
// --click-to-component-outline  (default: -webkit-focus-ring-color auto 1px)
```

--------------------------------

### CSS Custom Properties for Visual Customization

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Allows host applications to override the hover cursor and outline style globally or scoped to a specific subtree by defining CSS custom properties. This enables visual customization without modifying the library's core styles.

```css
/* Override the hover cursor and outline globally */
:root {
  --click-to-component-cursor: crosshair;
  --click-to-component-outline: 2px solid royalblue;
}

/* Or scope to a specific subtree */
#app {
  --click-to-component-cursor: cell;
  --click-to-component-outline: 3px dashed orange;
}
```

--------------------------------

### `getReactInstanceForElement` — Fiber lookup

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Finds the React Fiber node associated with a given DOM element. Uses React DevTools' global hook (`__REACT_DEVTOOLS_GLOBAL_HOOK__`) as the primary lookup strategy, then falls back to scanning element properties for `__reactFiber*` and `__reactInternalInstance$*` keys, covering both legacy and concurrent-mode React.

```APIDOC
## `getReactInstanceForElement` — Fiber lookup

### Description
Finds the React Fiber node associated with a given DOM element. Uses React DevTools' global hook (`__REACT_DEVTOOLS_GLOBAL_HOOK__`) as the primary lookup strategy, then falls back to scanning element properties for `__reactFiber*` and `__reactInternalInstance$*` keys, covering both legacy and concurrent-mode React.

### Usage
```ts
import { getReactInstanceForElement } from 'click-to-react-component/src/getReactInstanceForElement.js'

const button = document.querySelector('#submit-button')
const fiber = getReactInstanceForElement(button)

if (fiber) {
  console.log(fiber.type.name)       // e.g. 'SubmitButton'
  console.log(fiber._debugSource)    // { fileName, lineNumber, columnNumber }
  console.log(fiber._debugOwner)     // parent Fiber
}
// Returns undefined if the element has no associated React Fiber
```
```

--------------------------------

### `getSourceForInstance` — Debug source extractor

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Reads the `_debugSource` property from a React Fiber (only present in development builds with `@babel/plugin-transform-react-jsx-source`) and returns a normalized `{ fileName, lineNumber, columnNumber }` object. Returns `undefined` for Fibers without debug source information (e.g., built-in host components that have no JSX origin).

```APIDOC
## `getSourceForInstance` — Debug source extractor

### Description
Reads the `_debugSource` property from a React Fiber (only present in development builds with `@babel/plugin-transform-react-jsx-source`) and returns a normalized `{ fileName, lineNumber, columnNumber }` object. Returns `undefined` for Fibers without debug source information (e.g., built-in host components that have no JSX origin).

### Usage
```ts
import { getSourceForInstance } from 'click-to-react-component/src/getSourceForInstance.js'

const fiber = getReactInstanceForElement(document.querySelector('.my-btn'))

const source = getSourceForInstance(fiber)
if (source) {
  console.log(source.fileName)     // '/home/user/project/src/Button.tsx'
  console.log(source.lineNumber)   // 14
  console.log(source.columnNumber) // 3
} else {
  console.warn('No debug source available — is this a production build?')
}
```
```

--------------------------------

### Integrate ClickToComponent in Next.js, Vite, and CRA

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Place the ClickToComponent once at the root of your application. It automatically disables in production builds. Configure the target editor using the 'editor' prop.

```tsx
// Next.js: pages/_app.tsx
import { ClickToComponent } from 'click-to-react-component'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      {/* Option+Click any component to open its source in VS Code */}
      <ClickToComponent editor="vscode" />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp
```

```tsx
// ─── Vite / React 18: src/main.tsx ───────────────────────────────────────────
import { ClickToComponent } from 'click-to-react-component'
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
    <ClickToComponent editor="vscode-insiders" />
  </React.StrictMode>
)
```

```js
// ─── Create React App: src/index.js ──────────────────────────────────────────
import { ClickToComponent } from 'click-to-react-component'
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <ClickToComponent />
    <App />
  </React.StrictMode>
)
```

--------------------------------

### Configure ClickToComponent editor to vscode-insiders

Source: https://github.com/ericclemmons/click-to-component/blob/main/packages/click-to-react-component/README.md

Explicitly set the editor to 'vscode-insiders' when rendering ClickToComponent if you use the Insiders build of VS Code.

```diff
-<ClickToComponent />
+<ClickToComponent editor="vscode-insiders" />

```

--------------------------------

### Resolve Source Path with getPathToSource

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Combines `fileName`, `lineNumber`, and `columnNumber` into a `path:line:col` string. Optionally applies a `pathModifier` for path rewriting in containerized or remote environments. Falls back to line 1, column 1 if values are missing.

```typescript
import { getPathToSource } from 'click-to-react-component/src/getPathToSource.js'

const source = {
  fileName: '/home/user/project/src/components/Button.tsx',
  lineNumber: 42,
  columnNumber: 7,
}

// Without modifier
getPathToSource(source, undefined)
// → '/home/user/project/src/components/Button.tsx:42:7'
```

```typescript
// With a path modifier (e.g., Docker remapping)
getPathToSource(source, (p) => p.replace('/home/user/project', '/workspace'))
// → '/workspace/src/components/Button.tsx:42:7'
```

```typescript
// Falls back to line 1, column 1 when values are missing
getPathToSource({ fileName: '/src/App.tsx' }, undefined)
// → '/src/App.tsx:1:1'
```

--------------------------------

### `getSourceForElement`

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Retrieves the source code location (fileName, lineNumber, columnNumber) for a given DOM element. It first attempts to find the source directly associated with the element's React instance. If not found, it traverses up the DOM tree to find the nearest ancestor element with source information. If no source information can be found for any ancestor, it throws an error.

```APIDOC
## `getSourceForElement` — Element-level source lookup with fallback

Higher-level utility combining `getReactInstanceForElement` and `getSourceForInstance`. If the direct Fiber for an element has no debug source, it walks up the DOM tree via `parentElement` until it finds an ancestor with source info. Useful for elements like text nodes or host elements that don't directly correspond to user-defined React components.

### Method Signature
`getSourceForElement(element: Element): { fileName: string, lineNumber: number, columnNumber: number } | Error`

### Parameters
- **element** (Element) - The DOM element to inspect.

### Returns
- An object containing `fileName`, `lineNumber`, and `columnNumber` if source information is found.
- Throws an `Error` if no parent element with source information is found.

### Example
```ts
import { getSourceForElement } from 'click-to-react-component/src/getSourceForElement.js'

// Direct component element — returns immediately
const source1 = getSourceForElement(document.querySelector('.button'))
// → { fileName: 'src/Button.tsx', lineNumber: 7, columnNumber: 2 }

// Deeply nested span inside a component — climbs to nearest component
const source2 = getSourceForElement(document.querySelector('span.label'))
// → { fileName: 'src/Label.tsx', lineNumber: 3, columnNumber: 4 }

// If no ancestor has source info, throws Error('No parent found for element')
```
```

--------------------------------

### Extract Debug Source with getSourceForInstance

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Reads the `_debugSource` property from a React Fiber and returns a normalized `{ fileName, lineNumber, columnNumber }` object. Returns `undefined` if debug source is unavailable (e.g., production builds).

```javascript
import { getSourceForInstance } from 'click-to-react-component/src/getSourceForInstance.js'

const fiber = getReactInstanceForElement(document.querySelector('.my-btn'))

const source = getSourceForInstance(fiber)
if (source) {
  console.log(source.fileName)     // '/home/user/project/src/Button.tsx'
  console.log(source.lineNumber)   // 14
  console.log(source.columnNumber) // 3
} else {
  console.warn('No debug source available — is this a production build?')
}
```

--------------------------------

### Transform File Paths with 'pathModifier' Prop

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Use the 'pathModifier' function prop to transform file paths before they are opened in the editor. This is useful for remapping paths in containerized or remote development environments.

```tsx
// Remap a Docker container path to the host machine path
function containerToHostPath(path: string): string {
  return path.replace('/app/', '/Users/alice/projects/myapp/')
}

<ClickToComponent
  editor="vscode"
  pathModifier={containerToHostPath}
/>
// Without modifier: vscode://file//app/src/Button.tsx:8:3
// With modifier:    vscode://file//Users/alice/projects/myapp/src/Button.tsx:8:3
```

```tsx
// Strip a monorepo prefix for workspace-relative navigation
<ClickToComponent
  pathModifier={(path) => path.replace('/workspace/packages/ui/', '/ui/')}
/>
```

--------------------------------

### `getPathToSource` — Source path resolver

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Combines `fileName`, `lineNumber`, and `columnNumber` from a React Fiber's `_debugSource` object into a single `path:line:col` string. Optionally applies a `pathModifier` function to the result before returning it, enabling path rewriting for containerized or remote environments.

```APIDOC
## `getPathToSource` — Source path resolver

### Description
Combines `fileName`, `lineNumber`, and `columnNumber` from a React Fiber's `_debugSource` object into a single `path:line:col` string. Optionally applies a `pathModifier` function to the result before returning it, enabling path rewriting for containerized or remote environments.

### Usage
```ts
import { getPathToSource } from 'click-to-react-component/src/getPathToSource.js'

const source = {
  fileName: '/home/user/project/src/components/Button.tsx',
  lineNumber: 42,
  columnNumber: 7,
}

// Without modifier
getPathToSource(source, undefined)
// → '/home/user/project/src/components/Button.tsx:42:7'

// With a path modifier (e.g., Docker remapping)
getPathToSource(source, (p) => p.replace('/home/user/project', '/workspace'))
// → '/workspace/src/components/Button.tsx:42:7'

// Falls back to line 1, column 1 when values are missing
getPathToSource({ fileName: '/src/App.tsx' }, undefined)
// → '/src/App.tsx:1:1'
```
```

--------------------------------

### `getDisplayNameForInstance`

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Resolves a human-readable display name for a React Fiber instance. It interprets the Fiber's `tag` value to determine the component type (e.g., function component, class component, memoized component) and returns an appropriate name. It handles various React work tags, including those in React 18+.

```APIDOC
## `getDisplayNameForInstance` — Human-readable component name

Resolves a human-readable display name from a React Fiber based on its `tag` value, which encodes the React work type (function component, class component, memo, lazy, context, etc.). Covers all React work tags through the current React 18+ internals.

### Method Signature
`getDisplayNameForInstance(fiber: Fiber): string`

### Parameters
- **fiber** (Fiber) - The React Fiber instance to inspect.

### Returns
- A string representing the human-readable display name of the component.

### Example
```ts
import { getDisplayNameForInstance } from 'click-to-react-component/src/getDisplayNameFromReactInstance.js'

const fiber = getReactInstanceForElement(document.querySelector('.modal'))

console.log(getDisplayNameForInstance(fiber))
// FunctionComponent (tag 0) → 'Modal'
// ClassComponent    (tag 1) → 'LegacyForm'
// HostComponent     (tag 5) → 'div'
// MemoComponent     (tag 14/15) → 'Button' (from wrapped type name)
// ForwardRef        (tag 11) → 'React.forwardRef'
// React.lazy        (tag 16) → 'React.lazy'
// Unknown tag       → 'Unknown Component' + console.warn
```
```

--------------------------------

### `getPropsForInstance`

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Extracts serializable props from a React Fiber instance. It filters out non-scalar values such as functions, children, and keys, as well as any props that match the component's default props. The extracted props are intended for display in UI tooltips.

```APIDOC
## `getPropsForInstance` — Serializable props extractor

Extracts scalar (string, number, boolean, symbol) props from a Fiber's `memoizedProps`, filtering out `key`, children, functions, and any prop matching the component's `defaultProps`. The result is shown in the context menu's component list as hoverable `<var>` tooltips.

### Method Signature
`getPropsForInstance(fiber: Fiber): object`

### Parameters
- **fiber** (Fiber) - The React Fiber instance to inspect.

### Returns
- An object containing the serializable props of the component.

### Example
```ts
import { getPropsForInstance } from 'click-to-react-component/src/getPropsForInstance.js'

// Given a Fiber for: <Button variant="primary" disabled={true} onClick={fn} count={3}>
const fiber = getReactInstanceForElement(document.querySelector('button'))
const props = getPropsForInstance(fiber)

console.log(props)
// {
//   variant: 'primary',   ← string: included
//   disabled: true,        ← boolean: included
//   count: 3,              ← number: included
//   // onClick: [Function] ← function: excluded
//   // children: ...       ← object: excluded
// }
```
```

--------------------------------

### Find React Fiber with getReactInstanceForElement

Source: https://context7.com/ericclemmons/click-to-component/llms.txt

Finds the React Fiber node for a DOM element using React DevTools hook or by scanning element properties. Covers legacy and concurrent-mode React.

```javascript
import { getReactInstanceForElement } from 'click-to-react-component/src/getReactInstanceForElement.js'

const button = document.querySelector('#submit-button')
const fiber = getReactInstanceForElement(button)

if (fiber) {
  console.log(fiber.type.name)       // e.g. 'SubmitButton'
  console.log(fiber._debugSource)    // { fileName, lineNumber, columnNumber }
  console.log(fiber._debugOwner)     // parent Fiber
}
// Returns undefined if the element has no associated React Fiber
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.