### Development install and build

Source: https://github.com/donghaxkim/react-rewrite/blob/main/README.md

Commands to install dependencies, build the project, and run tests for contributing to the react-rewrite repository.

```bash
pnpm install
pnpm build
pnpm test -- --run
```

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

### Run react-rewrite

Source: https://github.com/donghaxkim/react-rewrite/blob/main/packages/cli/README.md

Execute the CLI to start the proxy and visual editor.

```bash
npx react-rewrite
```

```bash
npx react-rewrite-cli@latest
```

```bash
npx react-rewrite 3000
```

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

### Install react-rewrite-cli

Source: https://github.com/donghaxkim/react-rewrite/blob/main/packages/cli/README.md

Add the CLI as a development dependency to your React project.

```bash
npm install -D react-rewrite-cli
```

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

### Run react-rewrite CLI without installation

Source: https://github.com/donghaxkim/react-rewrite/blob/main/README.md

Execute the latest version of the react-rewrite CLI directly using npx without prior installation.

```bash
npx react-rewrite-cli@latest
```

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

### Run React Rewrite CLI

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Commands to install and execute the React Rewrite CLI tool.

```bash
# Install as dev dependency
npm install -D react-rewrite-cli

# Start your dev server first, then run:
npx react-rewrite

# Or run without installing:
npx react-rewrite-cli@latest
```

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

### Run react-rewrite CLI

Source: https://github.com/donghaxkim/react-rewrite/blob/main/README.md

Start react-rewrite from your project root after your development server is running. This command will automatically detect and proxy your dev server.

```bash
npx react-rewrite
```

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

### Initialize Proxy Server

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Sets up an HTTP proxy to inject the overlay script into HTML responses and handle WebSocket traffic.

```typescript
import { createProxyServer } from "react-rewrite-cli/inject";

const proxy = createProxyServer({
  targetPort: 3000,      // Dev server port
  targetHost: "localhost",
  proxyPort: 3456,       // Proxy listen port
  wsPort: 3457,          // WebSocket server port
  getActiveClient: () => wsClient
});

proxy.listen(3456, () => {
  console.log("Proxy running on http://localhost:3456");
});

// Proxy automatically:
// - Injects overlay script into HTML responses
// - Serves overlay bundle from /__react-rewrite/overlay.js
// - Proxies WebSocket connections for HMR
// - Handles dev server disconnection/reconnection
```

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

### Initialize Sketch Server

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Creates a WebSocket server to manage transformation requests, Tailwind config resolution, and file operations.

```typescript
import { createSketchServer } from "react-rewrite-cli/server";

const server = createSketchServer({ port: 3457 });

// Server automatically handles:
// - Tailwind config resolution and token mapping
// - File path validation (prevents writes outside project)
// - Undo stack management per connection
// - Sequential processing queue for mutations

// Get active WebSocket client
const client = server.getActiveClient();

// Graceful shutdown
server.close();
```

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

### createProxyServer()

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Sets up an HTTP proxy to inject the development overlay into HTML responses and manage WebSocket connections for HMR.

```APIDOC
## createProxyServer()

### Description
Create the HTTP proxy that injects the overlay into HTML responses.

### Usage
```typescript
import { createProxyServer } from "react-rewrite-cli/inject";

const proxy = createProxyServer({
  targetPort: 3000,      // Dev server port
  targetHost: "localhost",
  proxyPort: 3456,       // Proxy listen port
  wsPort: 3457,          // WebSocket server port
  getActiveClient: () => wsClient
});

proxy.listen(3456, () => {
  console.log("Proxy running on http://localhost:3456");
});

// Proxy automatically:
// - Injects overlay script into HTML responses
// - Serves overlay bundle from /__react-rewrite/overlay.js
// - Proxies WebSocket connections for HMR
// - Handles dev server disconnection/reconnection
```
```

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

### CLI Options Reference

Source: https://github.com/donghaxkim/react-rewrite/blob/main/packages/cli/README.md

Available arguments and flags for configuring the react-rewrite proxy.

```text
react-rewrite [options] [port]

Arguments:
  port           Dev server port override

Options:
  --no-open      Don't open browser automatically
  --host <host>  Dev server host (default: "localhost")
  --verbose      Enable debug logging
```

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

### createSketchServer()

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Creates a WebSocket server to handle transformation requests, managing Tailwind token mapping, file validation, and mutation queues.

```APIDOC
## createSketchServer()

### Description
Create the WebSocket server that handles all transformation requests.

### Usage
```typescript
import { createSketchServer } from "react-rewrite-cli/server";

const server = createSketchServer({ port: 3457 });

// Server automatically handles:
// - Tailwind config resolution and token mapping
// - File path validation (prevents writes outside project)
// - Undo stack management per connection
// - Sequential processing queue for mutations

// Get active WebSocket client
const client = server.getActiveClient();

// Graceful shutdown
server.close();
```
```

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

### Configure CLI Options

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

CLI flags for customizing port, host, logging, and browser behavior.

```bash
# Specify a custom dev server port
npx react-rewrite 3000

# Use custom host
npx react-rewrite --host 192.168.1.100

# Enable debug logging
npx react-rewrite --verbose

# Prevent auto-opening browser
npx react-rewrite --no-open

# Full options
npx react-rewrite [port] --host <host> --verbose --no-open
```

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

### Detect Framework and Verify Server

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Utility functions for identifying the project framework and checking server health.

```typescript
import { detect, healthCheck } from "react-rewrite-cli";

// Detect framework from current directory
const detection = await detect();
// Returns: { framework: "nextjs" | "vite" | "cra", port: number, projectRoot: string }

console.log(detection.framework); // "nextjs"
console.log(detection.port);      // 3000

// Detect from custom directory
const customDetection = await detect("/path/to/project");

// Verify dev server is running
await healthCheck(detection.port, "localhost");
// Throws if server not responding after 3 retries
```

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

### Keyboard Shortcuts

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Reference for keyboard shortcuts available in the overlay during editing.

```APIDOC
## Keyboard Shortcuts

Reference for overlay keyboard shortcuts available during editing.

```typescript
// Shortcuts handled by the overlay:

// Undo canvas changes (before committing to source)
// Ctrl/Cmd + Z → canvasUndo()

// Toggle changelog panel
// Ctrl/Cmd + Shift + L → setChangelogOpen(!isChangelogOpen())

// Follow links through the overlay
// Ctrl/Cmd + Click → passes through to underlying element

// Double-click text → enters inline text editing mode
```
```

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

### Overlay Keyboard Shortcuts

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Reference for keyboard interactions supported by the overlay during editing.

```typescript
// Shortcuts handled by the overlay:

// Undo canvas changes (before committing to source)
// Ctrl/Cmd + Z → canvasUndo()

// Toggle changelog panel
// Ctrl/Cmd + Shift + L → setChangelogOpen(!isChangelogOpen())

// Follow links through the overlay
// Ctrl/Cmd + Click → passes through to underlying element

// Double-click text → enters inline text editing mode
```

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

### Framework Detection API

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Functions to automatically detect the React framework and verify the status of the development server.

```APIDOC
## detect()

### Description
Automatically detects the React framework and default port based on project configuration files.

### Parameters
- **path** (string) - Optional - The directory path to scan for project configuration.

### Response
- **framework** (string) - The detected framework (nextjs, vite, or cra).
- **port** (number) - The detected development server port.
- **projectRoot** (string) - The absolute path to the project root.

## healthCheck()

### Description
Verifies that the development server is running and responsive.

### Parameters
- **port** (number) - Required - The port to check.
- **host** (string) - Required - The host address to check.

### Response
- Throws an error if the server is not responding after 3 retries.
```

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

### executeBatch()

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Executes multiple operations atomically with intelligent node resolution and undo support.

```APIDOC
## executeBatch()

### Description
Execute multiple operations atomically with intelligent node resolution and undo support.

### Parameters
- **operations** (Array<BatchOperation>) - Required - List of operations to perform.
- **projectPath** (string) - Required - The root path of the project.

### Response
- **results** (Array) - Status of each operation.
- **undoEntries** (Array) - Data required to revert changes.
```

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

### Iterative CLI development

Source: https://github.com/donghaxkim/react-rewrite/blob/main/README.md

Command to run the react-rewrite CLI in development mode for iterative testing. Requires a separate supported React app running locally for end-to-end testing.

```bash
pnpm dev
```

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

### Run react-rewrite CLI with explicit port

Source: https://github.com/donghaxkim/react-rewrite/blob/main/README.md

If auto-detection fails, specify the port your React development server is running on when launching react-rewrite.

```bash
npx react-rewrite 3000
```

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

### Overlay Bridge API

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

APIs for communication between the browser overlay and the CLI via a WebSocket bridge.

```APIDOC
## Overlay Bridge API

### WebSocket Communication

The browser overlay communicates with the CLI through a WebSocket bridge.

### Usage
```typescript
import { connect, disconnect, send, onMessage } from "react-rewrite/bridge";

// Connect to CLI WebSocket server
connect(3457);

// Send transformation request
send({
  type: "updateProperty",
  filePath: "src/App.tsx",
  lineNumber: 10,
  columnNumber: 4,
  tailwindPrefix: "p",
  tailwindToken: "8",
  value: "32px",
  framework: "tailwind"
});

// Listen for responses
const unsubscribe = onMessage((msg) => {
  if (msg.type === "updatePropertyComplete") {
    if (msg.success) {
      console.log("Property updated, undoId:", msg.undoId);
    } else {
      console.error("Failed:", msg.error, msg.errorCode);
    }
  }
});

// Request file discovery for composite components
const filePath = await requestFileDiscovery("MyComponent");
// Returns: "src/components/MyComponent.tsx" or null

// Request file stat for staleness detection
const stat = await requestFileStat("src/App.tsx");
// Returns: { mtime: 1234567890, size: 1024 }

// Cleanup
unsubscribe();
disconnect();
```
```

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

### resolveTailwindConfig()

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Extracts Tailwind CSS tokens from the project's configuration to be used in the property inspector.

```APIDOC
## Tailwind Token Resolution

### resolveTailwindConfig()

Extract Tailwind CSS tokens from the project's configuration for the property inspector.

### Usage
```typescript
import { resolveTailwindConfig } from "react-rewrite-cli/tailwind-resolver";

const { tokens } = resolveTailwindConfig("/path/to/project");

// tokens: TailwindTokenMap
// {
//   spacing: { "0": "0px", "1": "0.25rem", "2": "0.5rem", ... },
//   colors: { "red-500": "#ef4444", "blue-500": "#3b82f6", ... },
//   fontSize: { "xs": "0.75rem", "sm": "0.875rem", ... },
//   borderRadius: { "none": "0", "sm": "0.125rem", ... },
//   // Reverse maps for CSS value → token lookup
//   spacingReverse: { "0px": "0", "4px": "1", "8px": "2", ... },
//   colorsReverse: { "#ef4444": "red-500", ... }
// }
```
```

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

### Handle Server WebSocket Messages

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Event listener pattern for processing completion status and error messages from the CLI server.

```typescript
// Listen for server messages
onMessage((msg) => {
  switch (msg.type) {
    case "reorderComplete":
      // { type: "reorderComplete", success: boolean, error?: string }
      break;
    case "updatePropertyComplete":
      // { type: "updatePropertyComplete", success: boolean, error?: string, errorCode?: "DYNAMIC_CLASSNAME" | "FILE_CHANGED", undoId?: string }
      break;
    case "updateTextComplete":
      // { type: "updateTextComplete", success: boolean, error?: string, reason?: "no-match", undoId?: string }
      break;
    case "commitBatchComplete":
      // { type: "commitBatchComplete", success: boolean, results: [...], undoIds: string[] }
      break;
    case "tailwindTokens":
      // { type: "tailwindTokens", tokens: TailwindTokenMap }
      break;
  }
});
```

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

### Send Client WebSocket Messages

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Payload structures for requesting source file transformations from the CLI server.

```typescript
// Reorder sibling JSX elements
send({
  type: "reorder",
  filePath: "src/components/Card.tsx",
  fromLine: 15,
  toLine: 18,
  fromComponent: "Header",
  toComponent: "Footer"
});

// Update Tailwind className
send({
  type: "updateProperty",
  filePath: "src/components/Button.tsx",
  lineNumber: 8,
  columnNumber: 4,
  property: "paddingTop",
  cssProperty: "padding-top",
  value: "16px",
  tailwindPrefix: "pt",
  tailwindToken: "4",
  framework: "tailwind",
  tagName: "button",
  className: "bg-blue-500 text-white"
});

// Batch multiple property updates
send({
  type: "updateProperties",
  filePath: "src/components/Card.tsx",
  lineNumber: 12,
  columnNumber: 2,
  updates: [
    { property: "padding", tailwindPrefix: "p", tailwindToken: "6", value: "24px" },
    { property: "margin", tailwindPrefix: "m", tailwindToken: "4", value: "16px" }
  ],
  framework: "tailwind"
});

// Update text content
send({
  type: "updateText",
  filePath: "src/components/Hero.tsx",
  lineNumber: 5,
  columnNumber: 6,
  originalText: "Welcome to our site",
  newText: "Welcome to React Rewrite"
});

// Commit batch of operations atomically
send({
  type: "commitBatch",
  operations: [
    { op: "updateClass", file: "src/App.tsx", line: 10, col: 4, updates: [...] },
    { op: "updateText", file: "src/App.tsx", line: 15, col: 8, originalText: "Hello", newText: "Hi" },
    { op: "reorder", file: "src/App.tsx", fromLine: 20, toLine: 25 }
  ]
});

// Revert changes by undo IDs
send({ type: "revertChanges", undoIds: ["uuid-1", "uuid-2"] });
```

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

### Execute Batch Transformations

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Performs multiple atomic operations on files with support for undo entries and intelligent node resolution.

```typescript
import { executeBatch, type BatchOperation, type BatchResult } from "react-rewrite-cli/batch-transform";

const operations: BatchOperation[] = [
  {
    op: "updateClass",
    file: "src/App.tsx",
    line: 10,
    col: 4,
    tagName: "div",
    className: "container mx-auto",
    updates: [
      { tailwindPrefix: "p", tailwindToken: "8", value: "32px" }
    ]
  },
  {
    op: "updateText",
    file: "src/App.tsx",
    line: 15,
    col: 8,
    tagName: "h1",
    originalText: "Hello World",
    newText: "Hello React"
  },
  {
    op: "reorder",
    file: "src/App.tsx",
    fromLine: 20,
    toLine: 25
  },
  {
    op: "moveSpacing",
    file: "src/App.tsx",
    line: 30,
    col: 6,
    axis: "x",
    token: "4",
    pxDelta: 16,
    direction: "positive",
    layoutContext: "flex"
  }
];

const result: BatchResult = executeBatch(operations, "/path/to/project");

// Result structure:
// {
//   results: [
//     { op: "updateClass", file: "src/App.tsx", line: 10, success: true },
//     { op: "updateText", file: "src/App.tsx", line: 15, success: true },
//     { op: "reorder", file: "src/App.tsx", line: 20, success: true },
//     { op: "moveSpacing", file: "src/App.tsx", line: 30, success: true }
//   ],
//   undoEntries: [
//     { filePath: "/path/to/project/src/App.tsx", content: "...", afterContent: "..." }
//   ]
// }

// Operations are coalesced per-file, parsed once, and written once
// Structural operations (reorder) are applied bottom-up to preserve line numbers
```

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

### parseSource()

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Parses JSX/TSX source code into a jscodeshift AST for manipulation.

```APIDOC
## parseSource()

### Description
Parses JSX/TSX source code into a jscodeshift AST for manipulation.

### Parameters
- **source** (string) - Required - The source code string to parse.
- **fileName** (string) - Required - The name of the file being parsed.

### Response
- **j** (object) - The jscodeshift instance.
- **root** (object) - The AST root.
- **quoteStyle** (string) - The detected quote style.
```

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

### WebSocket Message Protocol

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Defines the message types sent between the browser overlay and the CLI server to perform source file mutations.

```APIDOC
## Client Messages

### Description
Messages sent from the browser overlay to the CLI server to trigger file transformations.

### Message Types
- **reorder**: Reorders sibling JSX elements.
- **updateProperty**: Updates a specific Tailwind CSS property.
- **updateProperties**: Batch updates multiple properties.
- **updateText**: Updates text content within a component.
- **commitBatch**: Atomically commits multiple operations.
- **revertChanges**: Reverts changes based on provided undo IDs.

## Server Messages

### Description
Responses from the CLI server indicating the status of requested operations.

### Message Types
- **reorderComplete**: Status of reorder operation.
- **updatePropertyComplete**: Status of property update, includes optional undoId.
- **updateTextComplete**: Status of text update.
- **commitBatchComplete**: Status of batch commit, returns array of results and undoIds.
- **tailwindTokens**: Returns a map of available Tailwind tokens.
```

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

### reorderComponent()

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Reorders sibling JSX elements by swapping their positions in the AST.

```APIDOC
## reorderComponent()

### Description
Reorder sibling JSX elements by swapping their positions in the AST.

### Parameters
- **filePath** (string) - Required - Path to the file.
- **fromLine** (number) - Required - The line number of the component to move.
- **toLine** (number) - Required - The target line number to move to.
```

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

### Resolve Tailwind Configuration

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Extracts and maps Tailwind CSS tokens from a project configuration for use in the property inspector.

```typescript
import { resolveTailwindConfig } from "react-rewrite-cli/tailwind-resolver";

const { tokens } = resolveTailwindConfig("/path/to/project");

// tokens: TailwindTokenMap
// {
//   spacing: { "0": "0px", "1": "0.25rem", "2": "0.5rem", ... },
//   colors: { "red-500": "#ef4444", "blue-500": "#3b82f6", ... },
//   fontSize: { "xs": "0.75rem", "sm": "0.875rem", ... },
//   borderRadius: { "none": "0", "sm": "0.125rem", ... },
//   // Reverse maps for CSS value → token lookup
//   spacingReverse: { "0px": "0", "4px": "1", "8px": "2", ... },
//   colorsReverse: { "#ef4444": "red-500", ... }
// }
```

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

### updateTextContent()

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Updates text content within JSX elements, handling cross-element text and whitespace normalization.

```APIDOC
## updateTextContent()

### Description
Update text content within JSX elements, handling cross-element text and whitespace normalization.

### Parameters
- **filePath** (string) - Required - Path to the file.
- **lineNumber** (number) - Required - Line number of the element.
- **columnNumber** (number) - Required - Column number of the element.
- **originalText** (string) - Required - The text to be replaced.
- **newText** (string) - Required - The new text content.
```

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

### WebSocket Bridge Communication

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Manages connection and message exchange between the browser overlay and the CLI server.

```typescript
import { connect, disconnect, send, onMessage } from "react-rewrite/bridge";

// Connect to CLI WebSocket server
connect(3457);

// Send transformation request
send({
  type: "updateProperty",
  filePath: "src/App.tsx",
  lineNumber: 10,
  columnNumber: 4,
  tailwindPrefix: "p",
  tailwindToken: "8",
  value: "32px",
  framework: "tailwind"
});

// Listen for responses
const unsubscribe = onMessage((msg) => {
  if (msg.type === "updatePropertyComplete") {
    if (msg.success) {
      console.log("Property updated, undoId:", msg.undoId);
    } else {
      console.error("Failed:", msg.error, msg.errorCode);
    }
  }
});

// Request file discovery for composite components
const filePath = await requestFileDiscovery("MyComponent");
// Returns: "src/components/MyComponent.tsx" or null

// Request file stat for staleness detection
const stat = await requestFileStat("src/App.tsx");
// Returns: { mtime: 1234567890, size: 1024 }

// Cleanup
unsubscribe();
disconnect();
```

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

### JSXStructuralPath

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Defines a deterministic element identity for reliable node resolution across HMR updates, used in batch operations.

```APIDOC
## JSX Structural Path Resolution

### JSXStructuralPath

Deterministic element identity for reliable node resolution across HMR updates.

### Usage
```typescript
import type { JSXStructuralPath, JSXPathSegment } from "@react-rewrite/shared";

// Path identifies element within component tree
const path: JSXStructuralPath = {
  componentName: "ProductCard",
  filePath: "src/components/ProductCard.tsx",
  segments: [
    { name: "div", discriminator: { type: "root" } },
    { name: "div", discriminator: { type: "index", value: 0 }, classHint: ["flex", "gap-4"] },
    { name: "button", discriminator: { type: "key", value: "add-to-cart" } }
  ]
};

// Used in batch operations for precise targeting
const operation: BatchOperation = {
  op: "updateClass",
  file: "src/components/ProductCard.tsx",
  line: 15,
  col: 8,
  jsxPath: path,  // Preferred resolution method
  tagName: "button",  // Fallback hint
  className: "bg-blue-500",  // Fuzzy matching hint
  updates: [...]
};
```
```

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

### updateClassName()

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Updates Tailwind CSS classes on a JSX element, handling string literals, template literals, and cn()/clsx() calls.

```APIDOC
## updateClassName()

### Description
Update Tailwind CSS classes on a JSX element, handling string literals, template literals, and cn()/clsx() calls.

### Parameters
- **filePath** (string) - Required - Path to the file.
- **lineNumber** (number) - Required - Line number of the element.
- **columnNumber** (number) - Required - Column number of the element.
- **updates** (Array<ClassNameUpdate>) - Required - List of class updates to apply.
```

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

### Define JSX Structural Path

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Provides a deterministic way to identify elements within the component tree for reliable node resolution.

```typescript
import type { JSXStructuralPath, JSXPathSegment } from "@react-rewrite/shared";

// Path identifies element within component tree
const path: JSXStructuralPath = {
  componentName: "ProductCard",
  filePath: "src/components/ProductCard.tsx",
  segments: [
    { name: "div", discriminator: { type: "root" } },
    { name: "div", discriminator: { type: "index", value: 0 }, classHint: ["flex", "gap-4"] },
    { name: "button", discriminator: { type: "key", value: "add-to-cart" } }
  ]
};

// Used in batch operations for precise targeting
const operation: BatchOperation = {
  op: "updateClass",
  file: "src/components/ProductCard.tsx",
  line: 15,
  col: 8,
  jsxPath: path,  // Preferred resolution method
  tagName: "button",  // Fallback hint
  className: "bg-blue-500",  // Fuzzy matching hint
  updates: [...]
};
```

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

### Reorder JSX Components

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Swaps the positions of sibling JSX elements within the AST.

```typescript
import { reorderComponent, getSiblings } from "react-rewrite-cli/transform";

// Get sibling info for drag targets
const siblings = getSiblings("src/components/List.tsx", 10); // parent line
// Returns: [{ componentName: "Header", lineNumber: 11 }, { componentName: "Body", lineNumber: 15 }]

// Swap elements: move element at line 15 to before element at line 11
const newSource = reorderComponent(
  "src/components/List.tsx",
  15,  // fromLine
  11   // toLine
);
```

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

### Parse JSX/TSX Source Code

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Converts source code into a jscodeshift AST for manipulation and provides methods to locate elements and serialize changes back to source.

```typescript
import { parseSource, findJSXElementAt } from "react-rewrite-cli/transform";

const source = `
export function Button({ children }) {
  return <button className="px-4 py-2">{children}</button>;
}
`;

const { j, root, quoteStyle } = parseSource(source, "Button.tsx");

// Find element at specific line:column
const target = findJSXElementAt(j, root, 3, 9);
console.log(target.node.openingElement.name.name); // "button"

// Serialize back to source
const newSource = root.toSource({ quote: quoteStyle });
```

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

### Update Tailwind CSS Classes

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Updates Tailwind classes on JSX elements, supporting string literals, template literals, and cn()/clsx() utility calls.

```typescript
import { updateClassName, type ClassNameUpdate } from "react-rewrite-cli/transform";

// Update padding on element at line 8, column 4
const updates: ClassNameUpdate[] = [
  {
    tailwindPrefix: "pt",
    tailwindToken: "6",      // Results in "pt-6"
    value: "24px",
    relatedPrefixes: ["p", "py"],  // Will split shorthand if present
  },
  {
    tailwindPrefix: "bg",
    tailwindToken: "blue-500",
    value: "#3b82f6",
    classPattern: "^bg-"     // Custom pattern for matching
  }
];

const newSource = updateClassName(
  "src/components/Card.tsx",
  8,   // lineNumber
  4,   // columnNumber
  updates
);

// Handles various className formats:
// className="px-4 py-2"           → string literal
// className={`px-4 ${dynamic}`}   → template literal
// className={cn("px-4", cond)}    → cn/clsx calls
```

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

### Update JSX Text Content

Source: https://context7.com/donghaxkim/react-rewrite/llms.txt

Modifies text content within JSX elements, including handling text spread across nested child elements.

```typescript
import { updateTextContent } from "react-rewrite-cli/transform";

// Simple text replacement
const newSource = updateTextContent(
  "src/components/Hero.tsx",
  5,    // lineNumber
  2,    // columnNumber
  "Welcome to our site",  // originalText (from DOM textContent)
  "Welcome to React Rewrite"  // newText
);

// Handles text across child elements:
// <p>Hello <strong>world</strong>!</p>
// DOM textContent: "Hello world!"
// Can replace "world" even though it's inside <strong>
```

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