dyelight 1.1.2 → 1.2.0

package/README.md

@@ -31,6 +31,7 @@ A lightweight TypeScript React component for highlighting characters in textarea
 - **Modern UI Friendly**: Optimized for integration with Tailwind CSS and UI libraries like shadcn/ui
 - **Smart Placeholder**: Placeholders remain visible even with the transparent character-highlighting overlay
 - **Storybook Playground**: Explore the component interactively with the bundled Storybook setup
+- **AI-Powered Debugging**: Built-in telemetry system for diagnosing sync issues with AI assistance
 
 ## Development
 
@@ -202,6 +203,91 @@ function RefExample() {
 }
 ```
 
+## AI-Powered Debugging
+
+DyeLight includes a built-in telemetry system that can help diagnose synchronization issues between the textarea and React state. This is especially useful for hard-to-reproduce bugs.
+
+### Enabling Debug Mode
+
+Simply add the `debug` prop to enable telemetry collection:
+
+```tsx
+import { useRef, useState } from 'react';
+import { DyeLight, type DyeLightRef } from 'dyelight';
+
+function DebugExample() {
+    const [text, setText] = useState('');
+    const dyeLightRef = useRef<DyeLightRef>(null);
+
+    const handleExportDebug = async () => {
+        const report = dyeLightRef.current?.exportForAI();
+        
+        if (report) {
+            // Copy to clipboard
+            await navigator.clipboard.writeText(report);
+            alert('Debug report copied! Paste it into Claude or ChatGPT for analysis.');
+        }
+    };
+
+    return (
+        <div>
+            <DyeLight
+                ref={dyeLightRef}
+                value={text}
+                onChange={setText}
+                debug={true}
+                rows={10}
+            />
+            
+            <button onClick={handleExportDebug}>
+                Export Debug Report
+            </button>
+        </div>
+    );
+}
+```
+
+### Using the Debug Report
+
+When you experience sync issues:
+
+1. **Enable debug mode** - Add `debug={true}` to your DyeLight component
+2. **Reproduce the issue** - Use the component normally until the bug occurs
+3. **Export the report** - Call `ref.current?.exportForAI()` to get a JSON report
+4. **Get AI diagnosis**:
+   - Go to [claude.ai](https://claude.ai) or [chat.openai.com](https://chat.openai.com)
+   - Paste the exported JSON
+   - Ask: *"Please analyze this DyeLight debug report and identify the issue"*
+5. **Get instant diagnosis** - The AI will identify the root cause and suggest fixes
+
+### What's Included in Debug Reports
+
+The exported report contains:
+
+- **Complete event timeline** - Every onChange, resize, and sync operation
+- **State snapshots** - DOM and React state at each event
+- **Automatic issue detection** - Pre-identified problems like:
+  - State mismatches between DOM and React
+  - Rapid successive events (race conditions)
+  - Excessive resize operations
+  - Layout thrashing
+- **Timing information** - Millisecond-precise event timing
+- **Browser metadata** - User agent, platform, React version
+- **AI instructions** - Built-in guidance for AI analysis
+
+### Debug Mode Options
+
+```tsx
+<DyeLight
+    debug={true}              // Enable telemetry collection
+    debugMaxEvents={1000}     // Max events to retain (default: 1000)
+    value={text}
+    onChange={setText}
+/>
+```
+
+**Note**: Debug mode has minimal performance impact but should generally be disabled in production unless troubleshooting specific issues.
+
 ## API Reference
 
 ### DyeLight Props
@@ -218,6 +304,8 @@ function RefExample() {
 | `containerClassName` | `string`                         | `''`        | CSS class for the wrapper container  |
 | `dir`              | `'ltr' \| 'rtl'`                   | `'ltr'`     | Text direction                       |
 | `rows`             | `number`                           | `4`         | Number of visible rows               |
+| `debug`            | `boolean`                          | `false`     | Enable telemetry collection          |
+| `debugMaxEvents`   | `number`                           | `1000`      | Max telemetry events to retain       |
 
 All standard textarea HTML attributes are also supported.
 
@@ -242,6 +330,8 @@ type CharacterRange = {
 | `setSelectionRange(start, end)` | Set text selection         |
 | `getValue()`                    | Get current value          |
 | `setValue(value)`               | Set value programmatically |
+| `scrollToPosition(pos, offset?, behavior?)` | Scroll to character position |
+| `exportForAI()`                 | Export debug report (requires `debug={true}`) |
 
 ## HighlightBuilder Utilities
 
@@ -269,6 +359,8 @@ Create a single selection highlight.
 
 Create line-level highlights.
 
+## Styling
+
 DyeLight uses CSS-in-JS for core functionality but allows complete customization through CSS classes.
 
 ### Modern Layout & UI (Tailwind CSS)

package/dist/index.d.mts

@@ -7,22 +7,22 @@ import React from "react";
  */
 declare const HighlightBuilder: {
   /**
-       * Creates highlights for individual characters using absolute positions
-       * @param chars - Array of character highlight configurations
-       * @param chars[].index - Zero-based character index in the text
-       * @param chars[].className - Optional CSS class name to apply
-       * @param chars[].style - Optional inline styles to apply
-       * @returns Array of character range highlights
-       * @example
-       * ```tsx
-       * // Highlight characters at positions 5, 10, and 15
-       * const highlights = HighlightBuilder.characters([
-       *   { index: 5, className: 'highlight-error' },
-       *   { index: 10, className: 'highlight-warning' },
-       *   { index: 15, style: { backgroundColor: 'yellow' } }
-       * ]);
-       * ```
-       */
+   * Creates highlights for individual characters using absolute positions
+   * @param chars - Array of character highlight configurations
+   * @param chars[].index - Zero-based character index in the text
+   * @param chars[].className - Optional CSS class name to apply
+   * @param chars[].style - Optional inline styles to apply
+   * @returns Array of character range highlights
+   * @example
+   * ```tsx
+   * // Highlight characters at positions 5, 10, and 15
+   * const highlights = HighlightBuilder.characters([
+   *   { index: 5, className: 'highlight-error' },
+   *   { index: 10, className: 'highlight-warning' },
+   *   { index: 15, style: { backgroundColor: 'yellow' } }
+   * ]);
+   * ```
+   */
   characters: (chars: Array<{
     className?: string;
     index: number;
@@ -34,21 +34,21 @@ declare const HighlightBuilder: {
     style: React.CSSProperties | undefined;
   }[];
   /**
-       * Creates line highlights for entire lines
-       * @param lines - Array of line highlight configurations
-       * @param lines[].line - Zero-based line number
-       * @param lines[].className - Optional CSS class name to apply to the line
-       * @param lines[].color - Optional color value (CSS color, hex, rgb, etc.)
-       * @returns Object mapping line numbers to highlight values
-       * @example
-       * ```tsx
-       * // Highlight lines 0 and 2 with different styles
-       * const lineHighlights = HighlightBuilder.lines([
-       *   { line: 0, className: 'error-line' },
-       *   { line: 2, color: '#ffff00' }
-       * ]);
-       * ```
-       */
+   * Creates line highlights for entire lines
+   * @param lines - Array of line highlight configurations
+   * @param lines[].line - Zero-based line number
+   * @param lines[].className - Optional CSS class name to apply to the line
+   * @param lines[].color - Optional color value (CSS color, hex, rgb, etc.)
+   * @returns Object mapping line numbers to highlight values
+   * @example
+   * ```tsx
+   * // Highlight lines 0 and 2 with different styles
+   * const lineHighlights = HighlightBuilder.lines([
+   *   { line: 0, className: 'error-line' },
+   *   { line: 2, color: '#ffff00' }
+   * ]);
+   * ```
+   */
   lines: (lines: Array<{
     className?: string;
     color?: string;
@@ -57,29 +57,29 @@ declare const HighlightBuilder: {
     [lineNumber: number]: string;
   };
   /**
-       * Highlights text matching a pattern using absolute positions
-       * @param text - The text to search within
-       * @param pattern - Regular expression or string pattern to match
-       * @param className - Optional CSS class name to apply to matches
-       * @param style - Optional inline styles to apply to matches
-       * @returns Array of character range highlights for all matches
-       * @example
-       * ```tsx
-       * // Highlight all JavaScript keywords
-       * const highlights = HighlightBuilder.pattern(
-       *   code,
-       *   /\b(function|const|let|var|if|else|for|while)\b/g,
-       *   'keyword-highlight'
-       * );
-       *
-       * // Highlight all email addresses
-       * const emailHighlights = HighlightBuilder.pattern(
-       *   text,
-       *   /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g,
-       *   'email-highlight'
-       * );
-       * ```
-       */
+   * Highlights text matching a pattern using absolute positions
+   * @param text - The text to search within
+   * @param pattern - Regular expression or string pattern to match
+   * @param className - Optional CSS class name to apply to matches
+   * @param style - Optional inline styles to apply to matches
+   * @returns Array of character range highlights for all matches
+   * @example
+   * ```tsx
+   * // Highlight all JavaScript keywords
+   * const highlights = HighlightBuilder.pattern(
+   *   code,
+   *   /\b(function|const|let|var|if|else|for|while)\b/g,
+   *   'keyword-highlight'
+   * );
+   *
+   * // Highlight all email addresses
+   * const emailHighlights = HighlightBuilder.pattern(
+   *   text,
+   *   /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g,
+   *   'email-highlight'
+   * );
+   * ```
+   */
   pattern: (text: string, pattern: RegExp | string, className?: string, style?: React.CSSProperties) => {
     className: string | undefined;
     end: number;
@@ -87,23 +87,23 @@ declare const HighlightBuilder: {
     style: React.CSSProperties | undefined;
   }[];
   /**
-       * Creates character range highlights using absolute positions
-       * @param ranges - Array of character range configurations
-       * @param ranges[].start - Zero-based start index (inclusive)
-       * @param ranges[].end - Zero-based end index (exclusive)
-       * @param ranges[].className - Optional CSS class name to apply
-       * @param ranges[].style - Optional inline styles to apply
-       * @returns Array of character range highlights
-       * @example
-       * ```tsx
-       * // Highlight specific ranges in the text
-       * const highlights = HighlightBuilder.ranges([
-       *   { start: 0, end: 5, className: 'title-highlight' },
-       *   { start: 10, end: 20, style: { backgroundColor: 'yellow' } },
-       *   { start: 25, end: 30, className: 'error-highlight' }
-       * ]);
-       * ```
-       */
+   * Creates character range highlights using absolute positions
+   * @param ranges - Array of character range configurations
+   * @param ranges[].start - Zero-based start index (inclusive)
+   * @param ranges[].end - Zero-based end index (exclusive)
+   * @param ranges[].className - Optional CSS class name to apply
+   * @param ranges[].style - Optional inline styles to apply
+   * @returns Array of character range highlights
+   * @example
+   * ```tsx
+   * // Highlight specific ranges in the text
+   * const highlights = HighlightBuilder.ranges([
+   *   { start: 0, end: 5, className: 'title-highlight' },
+   *   { start: 10, end: 20, style: { backgroundColor: 'yellow' } },
+   *   { start: 25, end: 30, className: 'error-highlight' }
+   * ]);
+   * ```
+   */
   ranges: (ranges: Array<{
     className?: string;
     end: number;
@@ -116,23 +116,23 @@ declare const HighlightBuilder: {
     style: React.CSSProperties | undefined;
   }[];
   /**
-       * Highlights text between specific start and end positions
-       * Convenience method for highlighting a single selection range
-       * @param start - Zero-based start index (inclusive)
-       * @param end - Zero-based end index (exclusive)
-       * @param className - Optional CSS class name to apply
-       * @param style - Optional inline styles to apply
-       * @returns Array containing a single character range highlight
-       * @example
-       * ```tsx
-       * // Highlight a selection from position 10 to 25
-       * const selectionHighlight = HighlightBuilder.selection(
-       *   10,
-       *   25,
-       *   'selection-highlight'
-       * );
-       * ```
-       */
+   * Highlights text between specific start and end positions
+   * Convenience method for highlighting a single selection range
+   * @param start - Zero-based start index (inclusive)
+   * @param end - Zero-based end index (exclusive)
+   * @param className - Optional CSS class name to apply
+   * @param style - Optional inline styles to apply
+   * @returns Array containing a single character range highlight
+   * @example
+   * ```tsx
+   * // Highlight a selection from position 10 to 25
+   * const selectionHighlight = HighlightBuilder.selection(
+   *   10,
+   *   25,
+   *   'selection-highlight'
+   * );
+   * ```
+   */
   selection: (start: number, end: number, className?: string, style?: React.CSSProperties) => {
     className: string | undefined;
     end: number;
@@ -140,30 +140,30 @@ declare const HighlightBuilder: {
     style: React.CSSProperties | undefined;
   }[];
   /**
-       * Highlights entire words that match specific terms
-       * @param text - The text to search within
-       * @param words - Array of words to highlight
-       * @param className - Optional CSS class name to apply to matched words
-       * @param style - Optional inline styles to apply to matched words
-       * @returns Array of character range highlights for all matched words
-       * @example
-       * ```tsx
-       * // Highlight specific programming keywords
-       * const highlights = HighlightBuilder.words(
-       *   sourceCode,
-       *   ['function', 'const', 'let', 'var', 'return'],
-       *   'keyword'
-       * );
-       *
-       * // Highlight important terms with custom styling
-       * const termHighlights = HighlightBuilder.words(
-       *   document,
-       *   ['TODO', 'FIXME', 'NOTE'],
-       *   undefined,
-       *   { backgroundColor: 'orange', fontWeight: 'bold' }
-       * );
-       * ```
-       */
+   * Highlights entire words that match specific terms
+   * @param text - The text to search within
+   * @param words - Array of words to highlight
+   * @param className - Optional CSS class name to apply to matched words
+   * @param style - Optional inline styles to apply to matched words
+   * @returns Array of character range highlights for all matched words
+   * @example
+   * ```tsx
+   * // Highlight specific programming keywords
+   * const highlights = HighlightBuilder.words(
+   *   sourceCode,
+   *   ['function', 'const', 'let', 'var', 'return'],
+   *   'keyword'
+   * );
+   *
+   * // Highlight important terms with custom styling
+   * const termHighlights = HighlightBuilder.words(
+   *   document,
+   *   ['TODO', 'FIXME', 'NOTE'],
+   *   undefined,
+   *   { backgroundColor: 'orange', fontWeight: 'bold' }
+   * );
+   * ```
+   */
   words: (text: string, words: string[], className?: string, style?: React.CSSProperties) => {
     className: string | undefined;
     end: number;
@@ -219,6 +219,7 @@ type CharacterRange = {
  *       rows={10}
  *       className="my-editor"
  *       placeholder="Enter your code here..."
+ *       debug={true}
  *     />
  *   );
  * };
@@ -247,10 +248,14 @@ interface DyeLightProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
   rows?: number;
   /** Controlled value */
   value?: string;
+  /** Enable debug mode to collect telemetry data */
+  debug?: boolean;
+  /** Maximum number of telemetry events to retain in memory */
+  debugMaxEvents?: number;
 }
 /**
  * Methods exposed by the DyeLight component through its ref
- * Provides programmatic access to common textarea operations
+ * Provides programmatic access to common textarea operations and debug features
  * @example
  * ```tsx
  * const MyComponent = () => {
@@ -265,7 +270,20 @@ interface DyeLightProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
  *     console.log('Current value:', value);
  *   };
  *
- *   return <DyeLight ref={dyeLightRef} />;
+ *   const handleExportDebug = async () => {
+ *     const report = dyeLightRef.current?.exportForAI();
+ *     if (report) {
+ *       await navigator.clipboard.writeText(report);
+ *       alert('Debug report copied to clipboard');
+ *     }
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <DyeLight ref={dyeLightRef} debug={true} />
+ *       <button onClick={handleExportDebug}>Export Debug Report</button>
+ *     </>
+ *   );
  * };
  * ```
  */
@@ -276,7 +294,8 @@ type DyeLightRef = {
   select: () => void; /** Sets the selection range in the textarea */
   setSelectionRange: (start: number, end: number) => void; /** Sets the value of the textarea programmatically */
   setValue: (value: string) => void; /** Scrolls the character position into view with an optional pixel offset */
-  scrollToPosition: (pos: number, offset?: number, behavior?: ScrollBehavior) => void;
+  scrollToPosition: (pos: number, offset?: number, behavior?: ScrollBehavior) => void; /** Exports AI-optimized debug report as JSON string (requires debug mode) */
+  exportForAI: () => string;
 };
 //#endregion
 //#region src/DyeLight.d.ts
@@ -344,5 +363,155 @@ declare const DyeLight: React.ForwardRefExoticComponent<DyeLightProps & React.Re
  */
 declare const autoResize: (textArea: HTMLTextAreaElement) => void;
 //#endregion
-export { CharacterRange, DyeLight, DyeLightProps, DyeLightRef, HighlightBuilder, autoResize, createLineElement, renderHighlightedLine };
+//#region src/telemetry.d.ts
+/**
+ * Represents a single telemetry event with full context
+ */
+type AITelemetryEvent = {
+  /** Unix timestamp in milliseconds */timestamp: number; /** ISO 8601 formatted timestamp */
+  timestampISO: string; /** Milliseconds since the last event, or null for first event */
+  timeSinceLastEvent: number | null; /** Event type identifier */
+  type: string; /** Event category for grouping and analysis */
+  category: 'state' | 'dom' | 'sync' | 'user' | 'system'; /** Human-readable description of the event */
+  description: string; /** Event-specific data payload */
+  data: Record<string, unknown>; /** Complete state snapshot at the time of this event */
+  stateSnapshot: {
+    /** Actual value in the textarea DOM element */textareaValue: string; /** Value in React state */
+    reactValue: string; /** Whether DOM and React state are synchronized */
+    valuesMatch: boolean; /** Current height of the textarea in pixels */
+    textareaHeight: number | undefined; /** Whether the component is in controlled mode */
+    isControlled: boolean;
+  }; /** Detected anomalies or issues at this event */
+  anomalies: string[];
+};
+/**
+ * Complete AI-readable debug report structure
+ */
+type AIDebugReport = {
+  /** Metadata about the report and environment */metadata: {
+    /** When this report was generated */generatedAt: string; /** DyeLight version */
+    componentVersion: string; /** Total number of events recorded */
+    totalEvents: number; /** Time range covered by events */
+    timespan: {
+      /** ISO timestamp of first event */start: string; /** ISO timestamp of last event */
+      end: string; /** Duration in milliseconds */
+      durationMs: number;
+    }; /** Browser user agent string */
+    browser: string; /** Platform identifier */
+    platform: string; /** React version */
+    reactVersion: string;
+  }; /** Analysis summary with detected issues */
+  summary: {
+    /** High-level description of findings */description: string; /** List of detected issues sorted by severity */
+    detectedIssues: Array<{
+      /** Issue severity level */severity: 'critical' | 'warning' | 'info'; /** Issue description */
+      issue: string; /** When this issue first occurred */
+      firstOccurrence: string; /** How many times this issue occurred */
+      occurrenceCount: number; /** Event indices where this issue occurred */
+      relatedEvents: number[];
+    }>; /** Suspicious patterns detected in event sequences */
+    suspiciousPatterns: string[]; /** Recommended actions to resolve issues */
+    recommendations: string[];
+  }; /** Different views of the event timeline */
+  timeline: {
+    /** User interactions and their impacts */userActions: Array<{
+      /** When the action occurred */timestamp: string; /** What the user did */
+      action: string; /** Number of state changes triggered */
+      resultingStateChanges: number;
+    }>; /** All state mutations in chronological order */
+    stateChanges: Array<{
+      /** When the change occurred */timestamp: string; /** Type of state change */
+      type: string; /** Previous value */
+      before: unknown; /** New value */
+      after: unknown; /** Whether this change was unexpected */
+      unexpected: boolean;
+    }>; /** Synchronization operations between textarea and overlay */
+    syncOperations: Array<{
+      /** When the sync occurred */timestamp: string; /** Type of synchronization */
+      operation: string; /** Whether sync was successful */
+      success: boolean; /** Additional sync details */
+      details: Record<string, unknown>;
+    }>;
+  }; /** Complete chronological list of all events */
+  events: AITelemetryEvent[]; /** Final state at time of export */
+  finalState: {
+    /** Current textarea DOM value */textareaValue: string; /** Current React state value */
+    reactValue: string; /** Whether values are synchronized */
+    inSync: boolean; /** Current height in pixels */
+    height: number | undefined; /** Current scroll position */
+    scrollPosition: {
+      top: number;
+      left: number;
+    }; /** Current highlights configuration */
+    highlights: unknown[];
+  };
+};
+/**
+ * AI-optimized telemetry collector for the DyeLight component.
+ * Records events with full context and generates comprehensive debug reports
+ * that can be analyzed by AI language models.
+ */
+declare class AIOptimizedTelemetry {
+  private events;
+  private maxEvents;
+  private enabled;
+  private lastEventTimestamp;
+  private issueRegistry;
+  /**
+   * Creates a new telemetry instance
+   * @param enabled Whether telemetry collection is initially enabled
+   * @param maxEvents Maximum number of events to retain in memory
+   */
+  constructor(enabled?: boolean, maxEvents?: number);
+  /**
+   * Enable or disable telemetry collection
+   * @param enabled Whether to enable telemetry
+   */
+  setEnabled(enabled: boolean): void;
+  /**
+   * Records an event with full context for AI analysis
+   * @param type Event type identifier
+   * @param category Event category for grouping
+   * @param data Event-specific data
+   * @param textareaRef Reference to the textarea element
+   * @param currentValue Current React state value
+   * @param textareaHeight Current textarea height
+   * @param isControlled Whether component is in controlled mode
+   */
+  record(type: string, category: 'state' | 'dom' | 'sync' | 'user' | 'system', data: Record<string, unknown>, textareaRef: React.RefObject<HTMLTextAreaElement | null>, currentValue: string | undefined, textareaHeight: number | undefined, isControlled: boolean): void;
+  /**
+   * Generates a human-readable description for an event
+   * @param type Event type
+   * @param category Event category
+   * @param data Event data
+   * @returns Human-readable description
+   */
+  private generateDescription;
+  /**
+   * Generates a comprehensive AI-readable debug report
+   * @param textareaRef Reference to the textarea element
+   * @param currentValue Current React state value
+   * @param textareaHeight Current textarea height
+   * @param highlights Current highlights configuration
+   * @param lineHighlights Current line highlights configuration
+   * @returns Complete debug report
+   */
+  generateAIReport(textareaRef: React.RefObject<HTMLTextAreaElement | null>, currentValue: string | undefined, textareaHeight: number | undefined, highlights: unknown[], lineHighlights: Record<number, string>): AIDebugReport;
+  /**
+   * Exports telemetry data in AI-optimized format with instructions
+   * @param textareaRef Reference to the textarea element
+   * @param currentValue Current React state value
+   * @param textareaHeight Current textarea height
+   * @param highlights Current highlights configuration
+   * @param lineHighlights Current line highlights configuration
+   * @returns JSON string containing debug report and AI instructions
+   */
+  exportForAI(textareaRef: React.RefObject<HTMLTextAreaElement | null>, currentValue: string | undefined, textareaHeight: number | undefined, highlights: unknown[], lineHighlights: Record<number, string>): string;
+  /**
+   * Clears all recorded events and issue registry
+   */
+  clear(): void;
+}
+//#endregion
+export { AIDebugReport, AIOptimizedTelemetry, AITelemetryEvent, CharacterRange, DyeLight, DyeLightProps, DyeLightRef, HighlightBuilder, autoResize, createLineElement, renderHighlightedLine };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/builder.ts","../src/types.ts","../src/DyeLight.tsx","../src/domUtils.ts"],"mappings":";;;;AAcA;;;cAAa,gBAAA;EAAA;;;;;;;;;;;;;;;;;EAAA,UAAA,GAAA,KAAA,EAkBW,KAAA;IAAA,SAAA;IAAA,KAAA;IAAA,KAAA,GAAmD,KAAA,CAAM,aAAA;EAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA;;;;;;;;;;;;;;;;;;iBAoB9D,KAAA;IAAA,SAAA;IAAA,KAAA;IAAA,IAAA;EAAA;IAAA,CAAA,UAAA;EAAA;EAAA;;;;;;;;;;;;;;;AC9BnB;AA4CA;;;;;;AA4CA;;ED1DmB,OAAA,GAAA,IAAA,UAAA,OAAA,EAgCkB,MAAA,WAAA,SAAA,WAAA,KAAA,GAA6C,KAAA,CAAM,aAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA;;;;;;;;;;;;;;AC9DxF;AA4CA;;;;;mBD2CqB,KAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA,GAAgE,KAAA,CAAM,aAAA;EAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA;;;;;;;;;;;ACvF3F;AA4CA;;;;;;AA4CA;;sEDqBwE,KAAA,CAAM,aAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA;;;;;;;;;AC7G9E;AA4CA;;;;;;AA4CA;;;;ACrFA;AAwBA;;;;;AAyEA;qEFsCuE,KAAA,CAAM,aAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA;;;;;;AC1I7E;AA4CA;;;;;;AA4CA;;;;KAxFY,cAAA;EAAA,gEAAA,SAAA;EAAA,GAAA;EAAA,KAAA;EAAA,KAAA,GAQA,KAAA,CAAM,aAAA;AAAA;AAAA;AAoClB;;;;;;AA4CA;;;;ACrFA;AAwBA;;;;;AAyEA;;;;;;;;;AC5FA;;;;;;;AFAkB,UAoCD,aAAA,SAAsB,IAAA,CAAK,KAAA,CAAM,sBAAA,CAAuB,mBAAA;EAAA;EAAA,SAAA;EAAA;EAAA,kBAAA;EAAA;EAAA,YAAA;EAAA;EAAA,GAAA;EAAA;EAAA,gBAAA;EAAA;EAAA,UAAA,GAYxD,cAAA;EAAA;EAAA,cAAA;IAAA,CAAA,UAAA;EAAA;EAAA;EAAA,QAAA,IAAA,KAAA;EAAA;EAAA,IAAA;EAAA;EAAA,KAAA;AAAA;AAAA;;;AAgCjB;;;;ACrFA;AAwBA;;;;;AAyEA;;;;;;;;AD5CiB,KAgCL,WAAA;EAAA,sCAAA,IAAA;EAAA,KAAA;EAAA,QAAA;EAAA,MAAA;EAAA,iBAAA,GAAA,KAAA,UAAA,GAAA;EAAA,QAAA,GAAA,KAAA;EAAA,gBAAA,GAAA,GAAA,UAAA,MAAA,WAAA,QAAA,GAcoD,cAAA;AAAA;;;;ACnGhE;AAwBA;;;;;AAyEA;;;;;AAjGA;AAwBA;cAxBa,iBAAA,GAAA,OAAA,EACA,KAAA,CAAM,SAAA,EAAA,SAAA,UAAA,aAAA,cAGhB,KAAA,CAAM,YAAA;AAAA;AAoBT;;AApBS,cAoBI,qBAAA,GAAA,IAAA,UAAA,SAAA,UAAA,MAAA,EAGD,KAAA;EAAA,aAAA;EAAA,SAAA;EAAA,GAAA;EAAA,KAAA;EAAA,KAAA,GAKI,KAAA,CAAM,aAAA;AAAA,IAAA,aAAA,cAGnB,KAAA,CAAM,YAAA;AAAA;;AA8DT;;;AA9DS,cA8DI,QAAA,EAAQ,KAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,KAAA,CAAA,aAAA,CAAA,WAAA;;;;AC5FrB;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;cAAa,UAAA,GAAA,QAAA,EAAwB,mBAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/builder.ts","../src/types.ts","../src/DyeLight.tsx","../src/domUtils.ts","../src/telemetry.ts"],"mappings":"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"}

package/dist/index.mjs

@@ -1,3 +1,3 @@
-import{forwardRef as e,useCallback as t,useEffect as n,useImperativeHandle as r,useMemo as i,useRef as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l={characters:e=>e.map(({className:e,index:t,style:n})=>({className:e,end:t+1,start:t,style:n})),lines:e=>{let t={};return e.forEach(({className:e,color:n,line:r})=>{t[r]=e||n||``}),t},pattern:(e,t,n,r)=>{let i=typeof t==`string`?new RegExp(t,`g`):new RegExp(t.source,`g`);return Array.from(e.matchAll(i)).map(e=>({className:n,end:e.index+e[0].length,start:e.index,style:r}))},ranges:e=>e.map(({className:e,end:t,start:n,style:r})=>({className:e,end:t,start:n,style:r})),selection:(e,t,n,r)=>[{className:n,end:t,start:e,style:r}],words:(e,t,n,r)=>{let i=RegExp(`\\b(${t.join(`|`)})\\b`,`g`);return l.pattern(e,i,n,r)}},u=e=>{let t=getComputedStyle(e),n=parseFloat(t.borderTopWidth)||0,r=parseFloat(t.borderBottomWidth)||0;e.style.height=`auto`;let i=e.scrollHeight,a=n+r,o=a>2?i+a:i;e.style.height=`${o}px`},d=e=>{let[n,r]=o();return{handleAutoResize:t(t=>{e&&(u(t),r(t.scrollHeight))},[e]),textareaHeight:n}},f=e=>{let t=e.split(`
-`),n=[],r=0;return t.forEach((e,i)=>{n.push(r),r+=e.length+(i<t.length-1?1:0)}),{lineStarts:n,lines:t}},p=(e,t)=>{for(let n=t.length-1;n>=0;n--)if(e>=t[n])return{char:e-t[n],line:n};return{char:0,line:0}},m=e=>/^(#|rgb|hsl|var\(--.*?\)|transparent|currentColor|inherit|initial|unset)/i.test(e)||/^[a-z]+$/i.test(e),h=(e,t,n,r)=>{let{lines:i,lineStarts:a}=f(e),o={};return t.forEach(e=>{let t=p(e.start,a),n=p(e.end-1,a);for(let r=t.line;r<=n.line;r++){o[r]||(o[r]=[]);let t=a[r],n=Math.max(e.start-t,0),s=Math.min(e.end-t,i[r].length);s>n&&o[r].push({absoluteStart:e.start,className:e.className,end:s,start:n,style:e.style})}}),i.map((e,t)=>{let i=n[t];return r(e,t,o[t]||[],i)})},g=(e,t,n,r)=>i(()=>h(e,t,n,r),[e,t,n,r]),_=(e,t)=>{if(!e||!t)return;let{scrollLeft:n,scrollTop:r}=e;t.scrollTop=r,t.scrollLeft=n},v=(e,t,n=getComputedStyle)=>{if(!e||!t)return;let r=n(e);t.style.padding=r.padding,t.style.fontSize=r.fontSize,t.style.fontFamily=r.fontFamily,t.style.lineHeight=r.lineHeight,t.style.letterSpacing=r.letterSpacing,t.style.wordSpacing=r.wordSpacing,t.style.textIndent=r.textIndent,t.style.whiteSpace=r.whiteSpace,t.style.wordBreak=r.wordBreak,t.style.overflowWrap=r.overflowWrap,t.style.tabSize=r.tabSize,t.style.borderTopWidth=r.borderTopWidth,t.style.borderRightWidth=r.borderRightWidth,t.style.borderBottomWidth=r.borderBottomWidth,t.style.borderLeftWidth=r.borderLeftWidth,t.style.borderTopStyle=r.borderTopStyle,t.style.borderRightStyle=r.borderRightStyle,t.style.borderBottomStyle=r.borderBottomStyle,t.style.borderLeftStyle=r.borderLeftStyle,t.style.borderColor=`transparent`;let i=parseFloat(r.borderLeftWidth)||0,a=parseFloat(r.borderRightWidth)||0,o=e.offsetWidth-e.clientWidth-i-a;if(o>0)if(r.direction===`rtl`){let e=parseFloat(r.paddingLeft)||0;t.style.paddingLeft=`${e+o}px`}else{let e=parseFloat(r.paddingRight)||0;t.style.paddingRight=`${e+o}px`}},y=()=>{let e=a(null);return{highlightLayerRef:e,syncScroll:t(t=>{_(t.current,e.current)},[]),syncStyles:t(t=>{v(t.current,e.current)},[])}},b=(e,t,n,r,i)=>{if(!e)return;let a=e.value;a!==t&&(n||r(a),i?.(a))},x=(e,t,n,r,i)=>{e!==t&&(n||r(e),i?.(e))},S=(e,t,n,r,i)=>{e&&(e.value=t,n||r(t),i?.(t))},C=(e,r=``,i)=>{let s=a(null),[c,l]=o(e??r),u=e!==void 0,d=u?e:c,f=t(()=>{b(s.current,d,u,l,i)},[d,u,i]),p=t(e=>{x(e.target.value,d,u,l,i)},[d,u,i]),m=t(e=>{S(s.current,e,u,l,i)},[u,i]);return n(()=>{f()},[f]),n(()=>{u&&s.current&&s.current.value!==e&&(s.current.value=e)},[u,e]),{currentValue:d,handleChange:p,setValue:m,textareaRef:s}},w={display:`block`,position:`relative`,width:`100%`},T={background:`transparent`,boxSizing:`border-box`,caretColor:`#000000`,color:`transparent`,minHeight:`auto`,position:`relative`,width:`100%`,zIndex:2},E={border:`0px none transparent`,bottom:0,boxSizing:`border-box`,color:`inherit`,fontFamily:`inherit`,fontSize:`inherit`,left:0,lineHeight:`inherit`,margin:0,overflow:`hidden`,pointerEvents:`none`,position:`absolute`,right:0,top:0,whiteSpace:`pre-wrap`,wordWrap:`break-word`,zIndex:1},D=(e,t,n)=>{if(!n)return s(`div`,{children:e},t);let r=m(n);return s(`div`,{className:r?void 0:n,style:r?{backgroundColor:n}:void 0,children:e},t)},O=(e,t,n,r)=>{if(n.length===0)return D(e||`\xA0`,t,r);let i=n.toSorted((e,t)=>e.start-t.start),a=[],o=0;if(i.forEach((n,r)=>{let{className:i,end:c,start:l,style:u}=n,d=Math.max(0,Math.min(l,e.length)),f=Math.max(d,Math.min(c,e.length));if(d>o){let t=e.slice(o,d);t&&a.push(t)}if(f>d){let o=e.slice(d,f);a.push(s(`span`,{className:i,style:u,"data-range-start":n.absoluteStart,children:o},`highlight-${t}-${r.toString()}`))}o=Math.max(o,f)}),o<e.length){let t=e.slice(o);t&&a.push(t)}return D(a.length===0?`\xA0`:a,t,r)},k=e(({className:e=``,containerClassName:i=``,defaultValue:o=``,dir:l=`ltr`,enableAutoResize:u=!0,highlights:f=[],lineHighlights:p={},onChange:m,rows:h=4,style:_,value:v,...b},x)=>{let S=a(null),{currentValue:D,handleChange:k,setValue:A,textareaRef:j}=C(v,o,m),{handleAutoResize:M,textareaHeight:N}=d(u),{highlightLayerRef:P,syncScroll:F,syncStyles:I}=y(),L=g(D,f,p,O),R=t(e=>{k(e),M(e.target)},[k,M]),z=t(e=>{A(e),j.current&&M(j.current)},[A,M,j]);n(()=>{},[]);let B=t(()=>{F(j)},[F,j]);r(x,()=>({blur:()=>j.current?.blur(),focus:()=>j.current?.focus(),getValue:()=>D,scrollToPosition:(e,t=40,n=`auto`)=>{if(P.current&&j.current){let r=P.current.querySelector(`[data-range-start="${e.toString()}"]`);if(r instanceof HTMLElement){let e=j.current,i=r.offsetTop;n===`smooth`?e.scrollTo({behavior:`smooth`,top:i-t}):e.scrollTop=i-t}}},select:()=>j.current?.select(),setSelectionRange:(e,t)=>j.current?.setSelectionRange(e,t),setValue:z}),[D,z,P,j]),n(()=>{j.current&&u&&M(j.current),I(j)},[D,M,u,I,j]),n(()=>{if(!j.current)return;let e=j.current,t,n=new ResizeObserver(()=>{cancelAnimationFrame(t),t=requestAnimationFrame(()=>{I(j),u&&M(e)})});return n.observe(e),()=>{n.disconnect(),cancelAnimationFrame(t)}},[j,I,M,u]);let V={...T,color:D?`transparent`:`inherit`,height:N?`${N}px`:void 0,resize:u?`none`:`vertical`},H={...E,direction:l,height:N?`${N}px`:void 0,padding:j.current?getComputedStyle(j.current).padding:`8px 12px`};return c(`div`,{className:i,ref:S,style:{...w,..._},children:[s(`div`,{"aria-hidden":`true`,ref:P,style:H,children:L}),s(`textarea`,{className:e,dir:l,onChange:R,onScroll:B,ref:j,rows:h,style:V,value:D,...b})]})});k.displayName=`DyeLight`;export{k as DyeLight,l as HighlightBuilder,u as autoResize,D as createLineElement,O as renderHighlightedLine};
+import e,{forwardRef as t,useCallback as n,useEffect as r,useImperativeHandle as i,useMemo as a,useRef as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";const u={characters:e=>e.map(({className:e,index:t,style:n})=>({className:e,end:t+1,start:t,style:n})),lines:e=>{let t={};return e.forEach(({className:e,color:n,line:r})=>{t[r]=e||n||``}),t},pattern:(e,t,n,r)=>{let i=typeof t==`string`?new RegExp(t,`g`):new RegExp(t.source,`g`);return Array.from(e.matchAll(i)).map(e=>({className:n,end:e.index+e[0].length,start:e.index,style:r}))},ranges:e=>e.map(({className:e,end:t,start:n,style:r})=>({className:e,end:t,start:n,style:r})),selection:(e,t,n,r)=>[{className:n,end:t,start:e,style:r}],words:(e,t,n,r)=>{let i=RegExp(`\\b(${t.join(`|`)})\\b`,`g`);return u.pattern(e,i,n,r)}},d=e=>{let t=getComputedStyle(e),n=parseFloat(t.borderTopWidth)||0,r=parseFloat(t.borderBottomWidth)||0;e.style.height=`auto`;let i=e.scrollHeight,a=n+r,o=a>2?i+a:i;e.style.height=`${o}px`},f=(e,t,r,i,a)=>{let[o,c]=s();return{handleAutoResize:n(n=>{if(!e)return;let o=n.scrollHeight;d(n);let s=n.scrollHeight;t?.record(`autoResize`,`system`,{afterHeight:s,beforeHeight:o,changed:o!==s,textLength:n.value.length},r??{current:n},i?.()??n.value,s,a??!1),c(n.scrollHeight)},[e,t,r,i,a]),textareaHeight:o}},p=e=>{let t=e.split(`
+`),n=[],r=0;return t.forEach((e,i)=>{n.push(r),r+=e.length+(i<t.length-1?1:0)}),{lineStarts:n,lines:t}},m=(e,t)=>{for(let n=t.length-1;n>=0;n--)if(e>=t[n])return{char:e-t[n],line:n};return{char:0,line:0}},h=e=>/^(#|rgb|hsl|var\(--.*?\)|transparent|currentColor|inherit|initial|unset)/i.test(e)||/^[a-z]+$/i.test(e),g=(e,t,n,r)=>{let{lines:i,lineStarts:a}=p(e),o={};return t.forEach(e=>{let t=m(e.start,a),n=m(e.end-1,a);for(let r=t.line;r<=n.line;r++){o[r]||(o[r]=[]);let t=a[r],n=Math.max(e.start-t,0),s=Math.min(e.end-t,i[r].length);s>n&&o[r].push({absoluteStart:e.start,className:e.className,end:s,start:n,style:e.style})}}),i.map((e,t)=>{let i=n[t];return r(e,t,o[t]||[],i)})},_=(e,t,n,r)=>a(()=>g(e,t,n,r),[e,t,n,r]),v=(e,t)=>{if(!e||!t)return;let{scrollLeft:n,scrollTop:r}=e;t.scrollTop=r,t.scrollLeft=n},y=(e,t,n=getComputedStyle)=>{if(!e||!t)return;let r=n(e);t.style.padding=r.padding,t.style.fontSize=r.fontSize,t.style.fontFamily=r.fontFamily,t.style.lineHeight=r.lineHeight,t.style.letterSpacing=r.letterSpacing,t.style.wordSpacing=r.wordSpacing,t.style.textIndent=r.textIndent,t.style.whiteSpace=r.whiteSpace,t.style.wordBreak=r.wordBreak,t.style.overflowWrap=r.overflowWrap,t.style.tabSize=r.tabSize,t.style.borderTopWidth=r.borderTopWidth,t.style.borderRightWidth=r.borderRightWidth,t.style.borderBottomWidth=r.borderBottomWidth,t.style.borderLeftWidth=r.borderLeftWidth,t.style.borderTopStyle=r.borderTopStyle,t.style.borderRightStyle=r.borderRightStyle,t.style.borderBottomStyle=r.borderBottomStyle,t.style.borderLeftStyle=r.borderLeftStyle,t.style.borderColor=`transparent`;let i=parseFloat(r.borderLeftWidth)||0,a=parseFloat(r.borderRightWidth)||0,o=e.offsetWidth-e.clientWidth-i-a;if(o>0)if(r.direction===`rtl`){let e=parseFloat(r.paddingLeft)||0;t.style.paddingLeft=`${e+o}px`}else{let e=parseFloat(r.paddingRight)||0;t.style.paddingRight=`${e+o}px`}},b=(e,t,r,i,a)=>{let s=o(null);return{highlightLayerRef:s,syncScroll:n(n=>{let o={scrollLeft:s.current?.scrollLeft,scrollTop:s.current?.scrollTop};v(n.current,s.current);let c={scrollLeft:s.current?.scrollLeft,scrollTop:s.current?.scrollTop};e?.record(`syncScroll`,`sync`,{after:c,before:o,changed:o.scrollTop!==c.scrollTop||o.scrollLeft!==c.scrollLeft},t??n,r?.()??``,i?.(),a??!1)},[e,t,r,i,a]),syncStyles:n(n=>{if(!n.current||!s.current)return;let o=getComputedStyle(n.current),c=n.current.offsetWidth-n.current.clientWidth-(parseFloat(o.borderLeftWidth)||0)-(parseFloat(o.borderRightWidth)||0);y(n.current,s.current),e?.record(`syncStyles`,`sync`,{direction:o.direction,fontSize:o.fontSize,padding:o.padding,scrollbarWidth:c},t??n,r?.()??``,i?.(),a??!1)},[e,t,r,i,a])}},x=(e,t,n,r,i)=>{if(!e)return;let a=e.value;a!==t&&(n||r(a),i?.(a))},S=(e,t,n,r,i)=>{e!==t&&(n||r(e),i?.(e))},C=(e,t,n,r,i)=>{e&&(e.value=t,n||r(t),i?.(t))},w=(e,t=``,i,a,c,l)=>{let u=o(null),[d,f]=s(e??t),p=e!==void 0,m=p?e??``:d,h=c??u,g=n(()=>{x(h.current,m,p,f,i)},[m,p,i,h]),_=n(e=>{let t=e.target.value;a?.record(`onChange`,`user`,{lengthDelta:t.length-m.length,newValue:t,previousValue:m,valueLength:t.length},h,m,l?.(),p),S(t,m,p,f,i)},[m,p,i,a,h,l]),v=n(e=>{a?.record(`setValue`,`state`,{newValue:e,previousValue:m},h,m,l?.(),p),C(h.current,e,p,f,i)},[p,i,a,h,l,m]);return r(()=>{g()},[g]),r(()=>{p&&h.current&&h.current.value!==m&&(h.current.value=m)},[p,m,h]),r(()=>{h.current&&h.current.value!==m&&a?.record(`valueMismatch`,`state`,{domValue:h.current.value,stateValue:m},h,m,l?.(),p)},[m,p,a,h,l]),{currentValue:m,handleChange:_,setValue:v,textareaRef:h}},T={display:`block`,position:`relative`,width:`100%`},E={background:`transparent`,boxSizing:`border-box`,caretColor:`#000000`,color:`transparent`,minHeight:`auto`,position:`relative`,width:`100%`,zIndex:2},D={border:`0px none transparent`,bottom:0,boxSizing:`border-box`,color:`inherit`,fontFamily:`inherit`,fontSize:`inherit`,left:0,lineHeight:`inherit`,margin:0,overflow:`hidden`,pointerEvents:`none`,position:`absolute`,right:0,top:0,whiteSpace:`pre-wrap`,wordWrap:`break-word`,zIndex:1};var O=class{events=[];maxEvents=1e3;enabled=!1;lastEventTimestamp=null;issueRegistry=new Map;constructor(e=!1,t=1e3){this.enabled=e,this.maxEvents=t}setEnabled(e){this.enabled=e}record(e,t,n,r,i,a,o){if(!this.enabled)return;let s=Date.now(),c=this.lastEventTimestamp?s-this.lastEventTimestamp:null,l=r.current?.value??``,u=i??``,d=l===u,f=[];if(d||(f.push(`State mismatch: DOM="${l}" vs React="${u}"`),this.issueRegistry.set(`state_mismatch`,(this.issueRegistry.get(`state_mismatch`)??0)+1)),c!==null&&c<5&&(f.push(`Rapid event: ${c}ms since last event`),this.issueRegistry.set(`rapid_events`,(this.issueRegistry.get(`rapid_events`)??0)+1)),t===`user`&&e===`onChange`){let e=Math.abs(l.length-u.length);e>100&&(f.push(`Large paste detected: ${e} characters changed`),this.issueRegistry.set(`large_paste`,(this.issueRegistry.get(`large_paste`)??0)+1))}let p={anomalies:f,category:t,data:n,description:this.generateDescription(e,t,n),stateSnapshot:{isControlled:o,reactValue:u,textareaHeight:a,textareaValue:l,valuesMatch:d},timeSinceLastEvent:c,timestamp:s,timestampISO:new Date(s).toISOString(),type:e};this.events.push(p),this.lastEventTimestamp=s,this.events.length>this.maxEvents&&(this.events=this.events.slice(-this.maxEvents))}generateDescription(e,t,n){switch(e){case`onChange`:return`User typed/pasted text. New length: ${n.valueLength}`;case`autoResize`:return`Textarea auto-resized from ${n.beforeHeight}px to ${n.afterHeight}px`;case`syncScroll`:return`Synchronized scroll position to top:${n.after?.scrollTop??0}`;case`syncStyles`:return`Synchronized styles (padding, font, borders) between textarea and overlay`;case`valueMismatch`:return`CRITICAL: DOM value differs from React state`;case`setValue`:return`Programmatic value change via ref.setValue()`;case`snapshot`:return`Periodic state snapshot for debugging`;default:return`${t} event: ${e}`}}generateAIReport(t,n,r,i,a){let o=this.events[0],s=this.events[this.events.length-1],c=s&&o?s.timestamp-o.timestamp:0,l=[];for(let[e,t]of this.issueRegistry.entries()){let n=this.events.map((t,n)=>t.anomalies.some(t=>t.includes(e))?n:-1).filter(e=>e!==-1),r=n.length>0?this.events[n[0]].timestampISO:``,i=`info`,a=e;e===`state_mismatch`?(i=`critical`,a=`State desynchronization between DOM and React detected`):e===`rapid_events`?(i=t>10?`warning`:`info`,a=`Rapid successive events detected (possible race condition)`):e===`large_paste`&&(i=`warning`,a=`Large paste operations detected (may trigger sync issues)`),l.push({firstOccurrence:r,issue:a,occurrenceCount:t,relatedEvents:n,severity:i})}l.sort((e,t)=>{let n={critical:0,info:2,warning:1};return n[e.severity]-n[t.severity]});let u=[],d=this.events.filter(e=>e.type===`autoResize`),f=this.events.filter(e=>e.type===`onChange`);d.length>f.length*2&&u.push(`Excessive resize operations (${d.length} resizes vs ${f.length} value changes). May indicate infinite ResizeObserver loop.`);let p=this.events.filter(e=>e.category===`sync`);p.length>this.events.length*.3&&u.push(`High frequency of sync operations (${p.length}/${this.events.length} events). May indicate layout thrashing.`);let m=[];l.some(e=>e.issue.includes(`desynchronization`))&&m.push(`State desynchronization detected. Check if multiple onChange handlers are bound or if external code is modifying the textarea DOM directly.`),u.some(e=>e.includes(`ResizeObserver`))&&m.push(`Possible infinite ResizeObserver loop. Ensure resize operations are debounced with requestAnimationFrame.`),l.some(e=>e.issue.includes(`race condition`))&&m.push(`Rapid events detected. Consider debouncing onChange handlers or checking for double-bound event listeners.`);let h={stateChanges:this.events.filter(e=>e.category===`state`).map(e=>({after:e.data.newValue,before:e.data.previousValue,timestamp:e.timestampISO,type:e.type,unexpected:e.anomalies.length>0})),syncOperations:this.events.filter(e=>e.category===`sync`).map(e=>({details:e.data,operation:e.type,success:!e.anomalies.length,timestamp:e.timestampISO})),userActions:this.events.filter(e=>e.category===`user`).map(e=>({action:e.description,resultingStateChanges:this.events.filter(t=>t.timestamp>e.timestamp&&t.timestamp<e.timestamp+100&&t.category===`state`).length,timestamp:e.timestampISO}))};return{events:this.events,finalState:{height:r,highlights:i,inSync:(t.current?.value??``)===(n??``),reactValue:n??``,scrollPosition:{left:t.current?.scrollLeft??0,top:t.current?.scrollTop??0},textareaValue:t.current?.value??``},metadata:{browser:navigator.userAgent,componentVersion:`1.1.3`,generatedAt:new Date().toISOString(),platform:navigator.platform,reactVersion:e.version??`unknown`,timespan:{durationMs:c,end:s?.timestampISO??``,start:o?.timestampISO??``},totalEvents:this.events.length},summary:{description:l.length>0?`Found ${l.length} issue(s) during ${this.events.length} recorded events over ${(c/1e3).toFixed(1)}s`:`No issues detected during ${this.events.length} events over ${(c/1e3).toFixed(1)}s`,detectedIssues:l,recommendations:m,suspiciousPatterns:u},timeline:h}}exportForAI(e,t,n,r,i){let a=this.generateAIReport(e,t,n,r,i);return JSON.stringify({aiInstructions:{commonIssues:{rapidEvents:`Events firing <5ms apart - possible race condition or double-bound handlers`,resizeLoop:`Excessive resize operations - likely infinite ResizeObserver loop`,stateMismatch:`DOM value differs from React state - likely caused by multiple onChange handlers or direct DOM manipulation`},keyFields:{"events[].anomalies":`Issues detected at each event`,"events[].stateSnapshot":`Full state at each event for comparison`,finalState:`Current state at time of export`,"summary.detectedIssues":`Automatically detected problems, sorted by severity`,"timeline.stateChanges":`Chronological view of all state mutations`},purpose:`This is a debug report from the DyeLight React component. A textarea with highlighting overlay is experiencing synchronization issues.`,yourTask:[`1. Review the summary.detectedIssues for critical problems`,`2. Examine timeline.stateChanges for unexpected state transitions`,`3. Look for patterns in events where stateSnapshot.valuesMatch is false`,`4. Check for rapid events (<5ms apart) that might indicate race conditions`,`5. Identify the root cause and suggest specific code fixes`]},debugReport:a},null,2)}clear(){this.events=[],this.issueRegistry.clear(),this.lastEventTimestamp=null}};const k=(e,t,n)=>{if(!n)return c(`div`,{children:e},t);let r=h(n);return c(`div`,{className:r?void 0:n,style:r?{backgroundColor:n}:void 0,children:e},t)},A=(e,t,n,r)=>{if(n.length===0)return k(e||`\xA0`,t,r);let i=n.toSorted((e,t)=>e.start-t.start),a=[],o=0;if(i.forEach((n,r)=>{let{className:i,end:s,start:l,style:u}=n,d=Math.max(0,Math.min(l,e.length)),f=Math.max(d,Math.min(s,e.length));if(f<=o)return;let p=Math.max(d,o);if(p>o){let t=e.slice(o,p);t&&a.push(t)}if(f>p){let o=e.slice(p,f);a.push(c(`span`,{className:i,style:u,"data-range-start":n.absoluteStart,children:o},`highlight-${t}-${r.toString()}`))}o=Math.max(o,f)}),o<e.length){let t=e.slice(o);t&&a.push(t)}return k(a.length===0?`\xA0`:a,t,r)},j=t(({className:e=``,containerClassName:t=``,defaultValue:s=``,dir:u=`ltr`,enableAutoResize:d=!0,highlights:p=[],lineHighlights:m={},onChange:h,rows:g=4,style:v,value:y,debug:x=!1,debugMaxEvents:S=1e3,...C},k)=>{let j=o(null),M=o(void 0),N=a(()=>new O(x,S),[x,S]);r(()=>{N.setEnabled(x)},[x,N]);let P=y!==void 0,F=n(()=>M.current,[]),{currentValue:I,handleChange:L,setValue:R,textareaRef:z}=w(y,s,h,N,void 0,F),B=n(()=>I,[I]),{handleAutoResize:V,textareaHeight:H}=f(d,N,z,B,P);r(()=>{M.current=H},[H]);let{highlightLayerRef:U,syncScroll:W,syncStyles:G}=b(N,z,B,F,P),K=_(I,p,m,A),q=n(e=>{L(e),V(e.target)},[L,V]),J=n(e=>{R(e),z.current&&V(z.current)},[R,V,z]);r(()=>{},[]);let Y=n(()=>{W(z)},[W,z]);r(()=>{if(!x)return;let e=setInterval(()=>{N.record(`snapshot`,`system`,{},z,I,H,P)},1e3);return()=>clearInterval(e)},[x,N,z,I,H,P]),i(k,()=>({blur:()=>z.current?.blur(),exportForAI:()=>N.exportForAI(z,I,H,p,m),focus:()=>z.current?.focus(),getValue:()=>I,scrollToPosition:(e,t=40,n=`auto`)=>{if(U.current&&z.current){let r=U.current.querySelector(`[data-range-start="${e.toString()}"]`);if(r instanceof HTMLElement){let e=z.current,i=r.offsetTop;n===`smooth`?e.scrollTo({behavior:`smooth`,top:i-t}):e.scrollTop=i-t}}},select:()=>z.current?.select(),setSelectionRange:(e,t)=>z.current?.setSelectionRange(e,t),setValue:J}),[I,J,U,z,N,H,p,m]),r(()=>{z.current&&d&&V(z.current),G(z)},[I,V,d,G,z]),r(()=>{if(!z.current)return;let e=z.current,t,n=new ResizeObserver(()=>{cancelAnimationFrame(t),t=requestAnimationFrame(()=>{G(z),d&&V(e)})});return n.observe(e),()=>{n.disconnect(),cancelAnimationFrame(t)}},[z,G,V,d]);let X={...E,color:I?`transparent`:`inherit`,height:H?`${H}px`:void 0,resize:d?`none`:`vertical`},Z={...D,direction:u,height:H?`${H}px`:void 0,padding:z.current?getComputedStyle(z.current).padding:`8px 12px`};return l(`div`,{className:t,ref:j,style:{...T,...v},children:[c(`div`,{"aria-hidden":`true`,ref:U,style:Z,children:K}),c(`textarea`,{className:e,dir:u,onChange:q,onScroll:Y,ref:z,rows:g,style:X,value:I,...C})]})});j.displayName=`DyeLight`;export{O as AIOptimizedTelemetry,j as DyeLight,u as HighlightBuilder,d as autoResize,k as createLineElement,A as renderHighlightedLine};
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["renderHighlightedLine"],"sources":["../src/builder.ts","../src/domUtils.ts","../src/hooks/useAutoResize.ts","../src/textUtils.ts","../src/hooks/useHighlightedContent.ts","../src/hooks/useHighlightSync.ts","../src/hooks/useTextareaValue.ts","../src/styles.ts","../src/DyeLight.tsx"],"sourcesContent":["/**\n * @fileoverview HighlightBuilder - Utility functions for creating highlight objects\n *\n * This module provides a convenient API for building highlight configurations\n * for the DyeLight component. It includes methods for creating character-level\n * highlights, line-level highlights, pattern-based highlights, and more.\n */\n\nimport type React from 'react';\n\n/**\n * Utility functions for building highlight objects for the DyeLight component\n * Provides a fluent API for creating various types of text highlights\n */\nexport const HighlightBuilder = {\n    /**\n     * Creates highlights for individual characters using absolute positions\n     * @param chars - Array of character highlight configurations\n     * @param chars[].index - Zero-based character index in the text\n     * @param chars[].className - Optional CSS class name to apply\n     * @param chars[].style - Optional inline styles to apply\n     * @returns Array of character range highlights\n     * @example\n     * ```tsx\n     * // Highlight characters at positions 5, 10, and 15\n     * const highlights = HighlightBuilder.characters([\n     *   { index: 5, className: 'highlight-error' },\n     *   { index: 10, className: 'highlight-warning' },\n     *   { index: 15, style: { backgroundColor: 'yellow' } }\n     * ]);\n     * ```\n     */\n    characters: (chars: Array<{ className?: string; index: number; style?: React.CSSProperties }>) => {\n        return chars.map(({ className, index, style }) => ({ className, end: index + 1, start: index, style }));\n    },\n\n    /**\n     * Creates line highlights for entire lines\n     * @param lines - Array of line highlight configurations\n     * @param lines[].line - Zero-based line number\n     * @param lines[].className - Optional CSS class name to apply to the line\n     * @param lines[].color - Optional color value (CSS color, hex, rgb, etc.)\n     * @returns Object mapping line numbers to highlight values\n     * @example\n     * ```tsx\n     * // Highlight lines 0 and 2 with different styles\n     * const lineHighlights = HighlightBuilder.lines([\n     *   { line: 0, className: 'error-line' },\n     *   { line: 2, color: '#ffff00' }\n     * ]);\n     * ```\n     */\n    lines: (lines: Array<{ className?: string; color?: string; line: number }>) => {\n        const result: { [lineNumber: number]: string } = {};\n        lines.forEach(({ className, color, line }) => {\n            result[line] = className || color || '';\n        });\n        return result;\n    },\n\n    /**\n     * Highlights text matching a pattern using absolute positions\n     * @param text - The text to search within\n     * @param pattern - Regular expression or string pattern to match\n     * @param className - Optional CSS class name to apply to matches\n     * @param style - Optional inline styles to apply to matches\n     * @returns Array of character range highlights for all matches\n     * @example\n     * ```tsx\n     * // Highlight all JavaScript keywords\n     * const highlights = HighlightBuilder.pattern(\n     *   code,\n     *   /\\b(function|const|let|var|if|else|for|while)\\b/g,\n     *   'keyword-highlight'\n     * );\n     *\n     * // Highlight all email addresses\n     * const emailHighlights = HighlightBuilder.pattern(\n     *   text,\n     *   /\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Z|a-z]{2,}\\b/g,\n     *   'email-highlight'\n     * );\n     * ```\n     */\n    pattern: (text: string, pattern: RegExp | string, className?: string, style?: React.CSSProperties) => {\n        const regex = typeof pattern === 'string' ? new RegExp(pattern, 'g') : new RegExp(pattern.source, 'g');\n        const matches = Array.from(text.matchAll(regex));\n\n        return matches.map((match) => ({ className, end: match.index! + match[0].length, start: match.index!, style }));\n    },\n\n    /**\n     * Creates character range highlights using absolute positions\n     * @param ranges - Array of character range configurations\n     * @param ranges[].start - Zero-based start index (inclusive)\n     * @param ranges[].end - Zero-based end index (exclusive)\n     * @param ranges[].className - Optional CSS class name to apply\n     * @param ranges[].style - Optional inline styles to apply\n     * @returns Array of character range highlights\n     * @example\n     * ```tsx\n     * // Highlight specific ranges in the text\n     * const highlights = HighlightBuilder.ranges([\n     *   { start: 0, end: 5, className: 'title-highlight' },\n     *   { start: 10, end: 20, style: { backgroundColor: 'yellow' } },\n     *   { start: 25, end: 30, className: 'error-highlight' }\n     * ]);\n     * ```\n     */\n    ranges: (ranges: Array<{ className?: string; end: number; start: number; style?: React.CSSProperties }>) => {\n        return ranges.map(({ className, end, start, style }) => ({ className, end, start, style }));\n    },\n\n    /**\n     * Highlights text between specific start and end positions\n     * Convenience method for highlighting a single selection range\n     * @param start - Zero-based start index (inclusive)\n     * @param end - Zero-based end index (exclusive)\n     * @param className - Optional CSS class name to apply\n     * @param style - Optional inline styles to apply\n     * @returns Array containing a single character range highlight\n     * @example\n     * ```tsx\n     * // Highlight a selection from position 10 to 25\n     * const selectionHighlight = HighlightBuilder.selection(\n     *   10,\n     *   25,\n     *   'selection-highlight'\n     * );\n     * ```\n     */\n    selection: (start: number, end: number, className?: string, style?: React.CSSProperties) => {\n        return [{ className, end, start, style }];\n    },\n\n    /**\n     * Highlights entire words that match specific terms\n     * @param text - The text to search within\n     * @param words - Array of words to highlight\n     * @param className - Optional CSS class name to apply to matched words\n     * @param style - Optional inline styles to apply to matched words\n     * @returns Array of character range highlights for all matched words\n     * @example\n     * ```tsx\n     * // Highlight specific programming keywords\n     * const highlights = HighlightBuilder.words(\n     *   sourceCode,\n     *   ['function', 'const', 'let', 'var', 'return'],\n     *   'keyword'\n     * );\n     *\n     * // Highlight important terms with custom styling\n     * const termHighlights = HighlightBuilder.words(\n     *   document,\n     *   ['TODO', 'FIXME', 'NOTE'],\n     *   undefined,\n     *   { backgroundColor: 'orange', fontWeight: 'bold' }\n     * );\n     * ```\n     */\n    words: (text: string, words: string[], className?: string, style?: React.CSSProperties) => {\n        const pattern = new RegExp(`\\\\b(${words.join('|')})\\\\b`, 'g');\n        return HighlightBuilder.pattern(text, pattern, className, style);\n    },\n};\n","/**\n * @fileoverview DOM utility functions for textarea manipulation\n *\n * This module provides utility functions for working with DOM elements,\n * specifically focused on textarea auto-resizing functionality used by\n * the DyeLight component.\n */\n\n/**\n * Automatically resizes a textarea element to fit its content\n *\n * This function adjusts the textarea height to match its scroll height,\n * effectively removing scrollbars when the content fits and expanding\n * the textarea as content is added. The height is first set to 'auto'\n * to allow the element to shrink if content is removed.\n *\n * @param textArea - The HTML textarea element to resize\n * @example\n * ```ts\n * const textarea = document.querySelector('textarea');\n * if (textarea) {\n *   autoResize(textarea);\n * }\n *\n * // Or in an event handler:\n * const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n *   autoResize(e.target);\n * };\n * ```\n */\nexport const autoResize = (textArea: HTMLTextAreaElement) => {\n    const computedStyle = getComputedStyle(textArea);\n    const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;\n    const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;\n\n    // Reset height to auto to force accurate scrollHeight calculation (shrink if needed)\n    textArea.style.height = 'auto';\n\n    const scrollHeight = textArea.scrollHeight;\n    const totalBorderHeight = borderTop + borderBottom;\n\n    // Only add border compensation if borders are significant (> 2px), otherwise trust scrollHeight\n    // This handles browser differences in how scrollHeight reports when box-sizing is border-box\n    const finalHeight = totalBorderHeight > 2 ? scrollHeight + totalBorderHeight : scrollHeight;\n\n    // Set height including borders for border-box\n    textArea.style.height = `${finalHeight}px`;\n};\n","import { useCallback, useState } from 'react';\n\nimport { autoResize } from '@/domUtils';\n\nexport const createAutoResizeHandler = (\n    enableAutoResize: boolean,\n    setTextareaHeight: (height: number | undefined) => void,\n    resize: (element: HTMLTextAreaElement) => void = autoResize,\n) => {\n    return (element: HTMLTextAreaElement) => {\n        if (!enableAutoResize) {\n            return;\n        }\n\n        resize(element);\n        setTextareaHeight(element.scrollHeight);\n    };\n};\n\n/**\n * Hook for managing textarea auto-resize functionality\n */\nexport const useAutoResize = (enableAutoResize: boolean) => {\n    const [textareaHeight, setTextareaHeight] = useState<number | undefined>();\n\n    /**\n     * Handles automatic resizing of the textarea based on content\n     */\n    const handleAutoResize = useCallback(\n        (element: HTMLTextAreaElement) => {\n            if (!enableAutoResize) {\n                return;\n            }\n            autoResize(element);\n            setTextareaHeight(element.scrollHeight);\n        },\n        [enableAutoResize],\n    );\n\n    return { handleAutoResize, textareaHeight };\n};\n","/**\n * @fileoverview Text utility functions for position calculations and text processing\n *\n * This module provides utilities for converting between absolute text positions\n * and line-relative positions, as well as other text processing functions used\n * by the DyeLight component for highlight positioning.\n */\n\n/**\n * Analyzes text content and returns line information with position mappings\n * @param text - The text content to analyze\n * @returns Object containing lines array and line start positions\n * @returns returns.lines - Array of individual lines (without newline characters)\n * @returns returns.lineStarts - Array of absolute positions where each line starts\n * @example\n * ```ts\n * const text = \"Hello\\nWorld\\nTest\";\n * const { lines, lineStarts } = getLinePositions(text);\n * // lines: [\"Hello\", \"World\", \"Test\"]\n * // lineStarts: [0, 6, 12]\n * ```\n */\nexport const getLinePositions = (text: string) => {\n    const lines = text.split('\\n');\n    const lineStarts: number[] = [];\n    let position = 0;\n\n    lines.forEach((line, index) => {\n        lineStarts.push(position);\n        position += line.length + (index < lines.length - 1 ? 1 : 0); // +1 for \\n except last line\n    });\n\n    return { lineStarts, lines };\n};\n\n/**\n * Converts an absolute text position to line-relative coordinates\n * @param absolutePos - Zero-based absolute position in the entire text\n * @param lineStarts - Array of line start positions (from getLinePositions)\n * @returns Object containing line number and character position within that line\n * @returns returns.line - Zero-based line number\n * @returns returns.char - Zero-based character position within the line\n * @example\n * ```ts\n * const text = \"Hello\\nWorld\\nTest\";\n * const { lineStarts } = getLinePositions(text);\n * const pos = absoluteToLinePos(8, lineStarts);\n * // pos: { line: 1, char: 2 } (the 'r' in \"World\")\n * ```\n */\nexport const absoluteToLinePos = (absolutePos: number, lineStarts: number[]) => {\n    for (let i = lineStarts.length - 1; i >= 0; i--) {\n        if (absolutePos >= lineStarts[i]) {\n            return { char: absolutePos - lineStarts[i], line: i };\n        }\n    }\n    return { char: 0, line: 0 };\n};\n\n/**\n * Determines if a string value represents a CSS color value\n * @param value - The string value to test\n * @returns True if the value appears to be a color value, false otherwise\n * @example\n * ```ts\n * isColorValue('#ff0000'); // true\n * isColorValue('rgb(255, 0, 0)'); // true\n * isColorValue('red'); // true\n * isColorValue('my-css-class'); // false (contains hyphens)\n * isColorValue('transparent'); // true\n * isColorValue('var(--primary-color)'); // true\n * ```\n */\nexport const isColorValue = (value: string): boolean => {\n    return (\n        /^(#|rgb|hsl|var\\(--.*?\\)|transparent|currentColor|inherit|initial|unset)/i.test(value) ||\n        /^[a-z]+$/i.test(value)\n    );\n};\n","import { useMemo } from 'react';\nimport { absoluteToLinePos, getLinePositions } from '@/textUtils';\nimport type { CharacterRange } from '@/types';\n\nexport const computeHighlightedContent = (\n    text: string,\n    highlights: CharacterRange[],\n    lineHighlights: { [lineNumber: number]: string },\n    renderHighlightedLine: (\n        line: string,\n        lineIndex: number,\n        ranges: Array<{\n            absoluteStart: number;\n            className?: string;\n            end: number;\n            start: number;\n            style?: React.CSSProperties;\n        }>,\n        lineHighlight?: string,\n    ) => React.ReactElement,\n) => {\n    const { lines, lineStarts } = getLinePositions(text);\n\n    const highlightsByLine: {\n        [lineIndex: number]: Array<{\n            absoluteStart: number;\n            className?: string;\n            end: number;\n            start: number;\n            style?: React.CSSProperties;\n        }>;\n    } = {};\n\n    highlights.forEach((highlight) => {\n        const startPos = absoluteToLinePos(highlight.start, lineStarts);\n        const endPos = absoluteToLinePos(highlight.end - 1, lineStarts);\n\n        for (let lineIndex = startPos.line; lineIndex <= endPos.line; lineIndex++) {\n            if (!highlightsByLine[lineIndex]) {\n                highlightsByLine[lineIndex] = [];\n            }\n\n            const lineStart = lineStarts[lineIndex];\n\n            const rangeStart = Math.max(highlight.start - lineStart, 0);\n            const rangeEnd = Math.min(highlight.end - lineStart, lines[lineIndex].length);\n\n            if (rangeEnd > rangeStart) {\n                highlightsByLine[lineIndex].push({\n                    absoluteStart: highlight.start,\n                    className: highlight.className,\n                    end: rangeEnd,\n                    start: rangeStart,\n                    style: highlight.style,\n                });\n            }\n        }\n    });\n\n    return lines.map((line, lineIndex) => {\n        const lineHighlight = lineHighlights[lineIndex];\n        const ranges = highlightsByLine[lineIndex] || [];\n\n        return renderHighlightedLine(line, lineIndex, ranges, lineHighlight);\n    });\n};\n\n/**\n * Hook for computing highlighted content from text and highlight ranges\n */\nexport const useHighlightedContent = (\n    text: string,\n    highlights: CharacterRange[],\n    lineHighlights: { [lineNumber: number]: string },\n    renderHighlightedLine: (\n        line: string,\n        lineIndex: number,\n        ranges: Array<{\n            absoluteStart: number;\n            className?: string;\n            end: number;\n            start: number;\n            style?: React.CSSProperties;\n        }>,\n        lineHighlight?: string,\n    ) => React.ReactElement,\n) => {\n    /**\n     * Computes the highlighted content by processing text and highlight ranges\n     * Groups highlights by line and renders each line with appropriate highlighting\n     */\n    const highlightedContent = useMemo(\n        () => computeHighlightedContent(text, highlights, lineHighlights, renderHighlightedLine),\n        [text, highlights, lineHighlights, renderHighlightedLine],\n    );\n\n    return highlightedContent;\n};\n","import { useCallback, useRef } from 'react';\n\nexport const syncScrollPositions = (\n    textarea: Pick<HTMLTextAreaElement, 'scrollLeft' | 'scrollTop'> | null,\n    highlightLayer: Pick<HTMLDivElement, 'scrollLeft' | 'scrollTop'> | null,\n) => {\n    if (!textarea || !highlightLayer) {\n        return;\n    }\n\n    const { scrollLeft, scrollTop } = textarea;\n    highlightLayer.scrollTop = scrollTop;\n    highlightLayer.scrollLeft = scrollLeft;\n};\n\nexport const syncHighlightStyles = (\n    textarea: HTMLTextAreaElement | null,\n    highlightLayer: HTMLDivElement | null,\n    computeStyle: (element: Element) => CSSStyleDeclaration = getComputedStyle,\n) => {\n    if (!textarea || !highlightLayer) {\n        return;\n    }\n\n    const computedStyle = computeStyle(textarea);\n\n    highlightLayer.style.padding = computedStyle.padding;\n    highlightLayer.style.fontSize = computedStyle.fontSize;\n    highlightLayer.style.fontFamily = computedStyle.fontFamily;\n    highlightLayer.style.lineHeight = computedStyle.lineHeight;\n    highlightLayer.style.letterSpacing = computedStyle.letterSpacing;\n    highlightLayer.style.wordSpacing = computedStyle.wordSpacing;\n    highlightLayer.style.textIndent = computedStyle.textIndent;\n\n    // Sync wrapping strategies to ensure identical layout\n    highlightLayer.style.whiteSpace = computedStyle.whiteSpace;\n    highlightLayer.style.wordBreak = computedStyle.wordBreak;\n    highlightLayer.style.overflowWrap = computedStyle.overflowWrap;\n    highlightLayer.style.tabSize = computedStyle.tabSize;\n\n    // Sync border width and style to ensure box-model matches, but keep transparent\n    highlightLayer.style.borderTopWidth = computedStyle.borderTopWidth;\n    highlightLayer.style.borderRightWidth = computedStyle.borderRightWidth;\n    highlightLayer.style.borderBottomWidth = computedStyle.borderBottomWidth;\n    highlightLayer.style.borderLeftWidth = computedStyle.borderLeftWidth;\n    highlightLayer.style.borderTopStyle = computedStyle.borderTopStyle;\n    highlightLayer.style.borderRightStyle = computedStyle.borderRightStyle;\n    highlightLayer.style.borderBottomStyle = computedStyle.borderBottomStyle;\n    highlightLayer.style.borderLeftStyle = computedStyle.borderLeftStyle;\n    highlightLayer.style.borderColor = 'transparent';\n\n    // Calculate scrollbar width to ensure content width is identical\n    // offsetWidth includes borders, padding, and scrollbar\n    // clientWidth includes padding but excludes borders and scrollbar\n    // scrollbarWidth = offsetWidth - clientWidth - (borderLeft + borderRight)\n    const borderLeft = parseFloat(computedStyle.borderLeftWidth) || 0;\n    const borderRight = parseFloat(computedStyle.borderRightWidth) || 0;\n    const scrollbarWidth = textarea.offsetWidth - textarea.clientWidth - borderLeft - borderRight;\n\n    if (scrollbarWidth > 0) {\n        const isRTL = computedStyle.direction === 'rtl';\n        if (isRTL) {\n            const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n            highlightLayer.style.paddingLeft = `${paddingLeft + scrollbarWidth}px`;\n        } else {\n            const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n            highlightLayer.style.paddingRight = `${paddingRight + scrollbarWidth}px`;\n        }\n    }\n};\n\n/**\n * Hook for managing highlight layer synchronization\n */\nexport const useHighlightSync = () => {\n    const highlightLayerRef = useRef<HTMLDivElement>(null);\n\n    const syncScroll = useCallback((textareaRef: React.RefObject<HTMLTextAreaElement | null>) => {\n        syncScrollPositions(textareaRef.current, highlightLayerRef.current);\n    }, []);\n\n    const syncStyles = useCallback((textareaRef: React.RefObject<HTMLTextAreaElement | null>) => {\n        syncHighlightStyles(textareaRef.current, highlightLayerRef.current);\n    }, []);\n\n    return { highlightLayerRef, syncScroll, syncStyles };\n};\n","import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport const syncValueWithDOM = (\n    textarea: HTMLTextAreaElement | null,\n    currentValue: string,\n    isControlled: boolean,\n    setInternalValue: (value: string) => void,\n    onChange?: (value: string) => void,\n) => {\n    if (!textarea) {\n        return;\n    }\n\n    const domValue = textarea.value;\n    if (domValue !== currentValue) {\n        if (!isControlled) {\n            setInternalValue(domValue);\n        }\n        onChange?.(domValue);\n    }\n};\n\nexport const handleChangeValue = (\n    newValue: string,\n    currentValue: string,\n    isControlled: boolean,\n    setInternalValue: (value: string) => void,\n    onChange?: (value: string) => void,\n) => {\n    if (newValue === currentValue) {\n        return;\n    }\n\n    if (!isControlled) {\n        setInternalValue(newValue);\n    }\n\n    onChange?.(newValue);\n};\n\nexport const applySetValue = (\n    textarea: HTMLTextAreaElement | null,\n    newValue: string,\n    isControlled: boolean,\n    setInternalValue: (value: string) => void,\n    onChange?: (value: string) => void,\n) => {\n    if (!textarea) {\n        return;\n    }\n\n    textarea.value = newValue;\n\n    if (!isControlled) {\n        setInternalValue(newValue);\n    }\n\n    onChange?.(newValue);\n};\n\n/**\n * Hook for managing textarea value state and synchronization\n * Handles both controlled and uncontrolled modes, plus programmatic changes\n */\nexport const useTextareaValue = (value?: string, defaultValue = '', onChange?: (value: string) => void) => {\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const [internalValue, setInternalValue] = useState(value ?? defaultValue);\n\n    const isControlled = value !== undefined;\n    const currentValue = isControlled ? value : internalValue;\n\n    const syncValueWithDOMCallback = useCallback(() => {\n        syncValueWithDOM(textareaRef.current, currentValue, isControlled, setInternalValue, onChange);\n    }, [currentValue, isControlled, onChange]);\n\n    const handleChange = useCallback(\n        (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n            handleChangeValue(e.target.value, currentValue, isControlled, setInternalValue, onChange);\n        },\n        [currentValue, isControlled, onChange],\n    );\n\n    const setValue = useCallback(\n        (newValue: string) => {\n            applySetValue(textareaRef.current, newValue, isControlled, setInternalValue, onChange);\n        },\n        [isControlled, onChange],\n    );\n\n    useEffect(() => {\n        syncValueWithDOMCallback();\n    }, [syncValueWithDOMCallback]);\n\n    useEffect(() => {\n        if (isControlled && textareaRef.current && textareaRef.current.value !== value) {\n            textareaRef.current.value = value;\n        }\n    }, [isControlled, value]);\n\n    return { currentValue, handleChange, setValue, textareaRef };\n};\n","/**\n * @fileoverview Default styles for DyeLight component elements\n *\n * This module contains the default CSS-in-JS styles used by the DyeLight component\n * for its container, textarea, and highlight layer elements. These styles ensure\n * proper layering, positioning, and visual alignment between the textarea and\n * its highlight overlay.\n */\n\nimport type React from 'react';\n\n/**\n * Default styles for the main container element that wraps the entire component\n * Creates a positioned container that serves as the reference for absolutely positioned children\n */\nexport const DEFAULT_CONTAINER_STYLE: React.CSSProperties = {\n    /** Ensures the container behaves as a block-level element */\n    display: 'block',\n    /** Enables absolute positioning for child elements */\n    position: 'relative',\n    /** Takes full width of parent container */\n    width: '100%',\n};\n\n/**\n * Default styles for the textarea element\n * Makes the textarea transparent while maintaining its functionality and positioning\n */\nexport const DEFAULT_BASE_STYLE: React.CSSProperties = {\n    /** Transparent background to show highlights underneath */\n    background: 'transparent',\n    /** Ensures consistent box model calculations */\n    boxSizing: 'border-box',\n    /** Maintains visible text cursor */\n    caretColor: '#000000',\n    /** Transparent text to reveal highlights while keeping cursor and selection */\n    color: 'transparent',\n    /** Prevents unwanted height constraints */\n    minHeight: 'auto',\n    /** Positioned above the highlight layer */\n    position: 'relative',\n    /** Takes full width of container */\n    width: '100%',\n    /** Ensures textarea appears above highlight layer */\n    zIndex: 2,\n};\n\n/**\n * Default styles for the highlight layer that renders behind the textarea\n * Positioned absolutely to overlay perfectly with the textarea content\n */\nexport const DEFAULT_HIGHLIGHT_LAYER_STYLE: React.CSSProperties = {\n    /** Transparent border to match textarea default border - now synced dynamically */\n    border: '0px none transparent',\n    /** Stretch to fill container bottom */\n    bottom: 0,\n    /** Consistent box model with textarea */\n    boxSizing: 'border-box',\n    /** Inherit text color from parent */\n    color: 'inherit',\n    /** Match textarea font family */\n    fontFamily: 'inherit',\n    /** Match textarea font size */\n    fontSize: 'inherit',\n    /** Stretch to fill container left */\n    left: 0,\n    /** Match textarea line height */\n    lineHeight: 'inherit',\n    /** Remove default margins */\n    margin: 0,\n    /** Hide scrollbars on highlight layer */\n    overflow: 'hidden',\n    /** Prevent highlight layer from capturing mouse events */\n    pointerEvents: 'none',\n    /** Positioned absolutely within container */\n    position: 'absolute',\n    /** Stretch to fill container right */\n    right: 0,\n    /** Stretch to fill container top */\n    top: 0,\n    /** Preserve whitespace and line breaks like textarea */\n    whiteSpace: 'pre-wrap',\n    /** Break long words like textarea */\n    wordWrap: 'break-word',\n    /** Ensure highlight layer appears behind textarea */\n    zIndex: 1,\n};\n","import type React from 'react';\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport { useAutoResize } from './hooks/useAutoResize';\nimport { useHighlightedContent } from './hooks/useHighlightedContent';\nimport { useHighlightSync } from './hooks/useHighlightSync';\nimport { useTextareaValue } from './hooks/useTextareaValue';\nimport { DEFAULT_BASE_STYLE, DEFAULT_CONTAINER_STYLE, DEFAULT_HIGHLIGHT_LAYER_STYLE } from './styles';\nimport { isColorValue } from './textUtils';\nimport type { DyeLightProps, DyeLightRef } from './types';\n\n/**\n * @fileoverview DyeLight - A React textarea component with advanced text highlighting capabilities\n *\n * This component provides a textarea with overlay-based text highlighting that supports:\n * - Character-level highlighting using absolute text positions\n * - Line-level highlighting with CSS classes or color values\n * - Automatic height adjustment based on content\n * - Synchronized scrolling between textarea and highlight layer\n * - Both controlled and uncontrolled usage patterns\n * - RTL text direction support\n */\n\n/**\n * Creates a line element with optional highlighting\n */\nexport const createLineElement = (\n    content: React.ReactNode,\n    lineIndex: number,\n    lineHighlight?: string,\n): React.ReactElement => {\n    if (!lineHighlight) {\n        return <div key={lineIndex}>{content}</div>;\n    }\n\n    const isColor = isColorValue(lineHighlight);\n    return (\n        <div\n            className={isColor ? undefined : lineHighlight}\n            key={lineIndex}\n            style={isColor ? { backgroundColor: lineHighlight } : undefined}\n        >\n            {content}\n        </div>\n    );\n};\n\n/**\n * Renders a single line with character-level highlights and optional line-level highlighting\n */\nexport const renderHighlightedLine = (\n    line: string,\n    lineIndex: number,\n    ranges: Array<{\n        absoluteStart: number;\n        className?: string;\n        end: number;\n        start: number;\n        style?: React.CSSProperties;\n    }>,\n    lineHighlight?: string,\n): React.ReactElement => {\n    if (ranges.length === 0) {\n        const content = line || '\\u00A0';\n        return createLineElement(content, lineIndex, lineHighlight);\n    }\n\n    // Sort ranges by start position\n    const sortedRanges = ranges.toSorted((a, b) => a.start - b.start);\n\n    const result: React.ReactNode[] = [];\n    let lastIndex = 0;\n\n    sortedRanges.forEach((range, idx) => {\n        const { className, end, start, style: rangeStyle } = range;\n\n        // Clamp range to line bounds\n        const clampedStart = Math.max(0, Math.min(start, line.length));\n        const clampedEnd = Math.max(clampedStart, Math.min(end, line.length));\n\n        // Add text before highlight\n        if (clampedStart > lastIndex) {\n            const textBefore = line.slice(lastIndex, clampedStart);\n            if (textBefore) {\n                result.push(textBefore);\n            }\n        }\n\n        // Add highlighted text\n        if (clampedEnd > clampedStart) {\n            const highlightedText = line.slice(clampedStart, clampedEnd);\n            result.push(\n                <span\n                    className={className}\n                    key={`highlight-${lineIndex}-${idx.toString()}`}\n                    style={rangeStyle}\n                    data-range-start={range.absoluteStart}\n                >\n                    {highlightedText}\n                </span>,\n            );\n        }\n\n        lastIndex = Math.max(lastIndex, clampedEnd);\n    });\n\n    // Add remaining text\n    if (lastIndex < line.length) {\n        const textAfter = line.slice(lastIndex);\n        if (textAfter) {\n            result.push(textAfter);\n        }\n    }\n\n    const content = result.length === 0 ? '\\u00A0' : result;\n    return createLineElement(content, lineIndex, lineHighlight);\n};\n\n/**\n * A textarea component with support for highlighting character ranges using absolute positions\n * and optional line-level highlighting. Perfect for syntax highlighting, error indication,\n * and text annotation without the complexity of line-based positioning.\n */\nexport const DyeLight = forwardRef<DyeLightRef, DyeLightProps>(\n    (\n        {\n            className = '',\n            containerClassName = '',\n            defaultValue = '',\n            dir = 'ltr',\n            enableAutoResize = true,\n            highlights = [],\n            lineHighlights = {},\n            onChange,\n            rows = 4,\n            style,\n            value,\n            ...props\n        },\n        ref,\n    ) => {\n        const containerRef = useRef<HTMLDivElement>(null);\n\n        // Custom hooks for managing component logic\n        const { currentValue, handleChange, setValue, textareaRef } = useTextareaValue(value, defaultValue, onChange);\n\n        const { handleAutoResize, textareaHeight } = useAutoResize(enableAutoResize);\n\n        const { highlightLayerRef, syncScroll, syncStyles } = useHighlightSync();\n\n        const highlightedContent = useHighlightedContent(\n            currentValue,\n            highlights,\n            lineHighlights,\n            renderHighlightedLine,\n        );\n\n        // Enhanced change handler that includes auto-resize\n        const handleChangeWithResize = useCallback(\n            (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n                handleChange(e);\n                handleAutoResize(e.target);\n            },\n            [handleChange, handleAutoResize],\n        );\n\n        // Enhanced setValue that includes auto-resize\n        const setValueWithResize = useCallback(\n            (newValue: string) => {\n                setValue(newValue);\n                if (textareaRef.current) {\n                    handleAutoResize(textareaRef.current);\n                }\n            },\n            [setValue, handleAutoResize, textareaRef],\n        );\n\n        // Scroll handler with ref binding\n        useEffect(() => {}, []);\n\n        const handleScroll = useCallback(() => {\n            syncScroll(textareaRef);\n        }, [syncScroll, textareaRef]);\n\n        // Expose ref methods\n        useImperativeHandle(\n            ref,\n            () => ({\n                blur: () => textareaRef.current?.blur(),\n                focus: () => textareaRef.current?.focus(),\n                getValue: () => currentValue,\n                scrollToPosition: (pos: number, offset = 40, behavior: ScrollBehavior = 'auto') => {\n                    if (highlightLayerRef.current && textareaRef.current) {\n                        const span = highlightLayerRef.current.querySelector(`[data-range-start=\"${pos.toString()}\"]`);\n                        if (span instanceof HTMLElement) {\n                            const textarea = textareaRef.current;\n                            const spanTop = span.offsetTop;\n                            if (behavior === 'smooth') {\n                                textarea.scrollTo({ behavior: 'smooth', top: spanTop - offset });\n                            } else {\n                                textarea.scrollTop = spanTop - offset;\n                            }\n                        }\n                    }\n                },\n                select: () => textareaRef.current?.select(),\n                setSelectionRange: (start: number, end: number) => textareaRef.current?.setSelectionRange(start, end),\n                setValue: setValueWithResize,\n            }),\n            [currentValue, setValueWithResize, highlightLayerRef, textareaRef],\n        );\n\n        // Sync styles and handle auto-resize on value changes\n        // 'currentValue' is a dependency to ensure we trigger resize/sync when the value prop changes programmatically\n        useEffect(() => {\n            if (textareaRef.current && enableAutoResize) {\n                handleAutoResize(textareaRef.current);\n            }\n            syncStyles(textareaRef);\n        }, [currentValue, handleAutoResize, enableAutoResize, syncStyles, textareaRef]);\n\n        // Use ResizeObserver to handle structural changes (e.g. container resize, scrollbar appearance)\n        useEffect(() => {\n            if (!textareaRef.current) {\n                return;\n            }\n\n            const textarea = textareaRef.current;\n            let rafId: number;\n\n            const observer = new ResizeObserver(() => {\n                cancelAnimationFrame(rafId);\n                rafId = requestAnimationFrame(() => {\n                    syncStyles(textareaRef);\n                    // We re-trigger auto-resize in case width changed and text wrapped\n                    if (enableAutoResize) {\n                        handleAutoResize(textarea);\n                    }\n                });\n            });\n\n            observer.observe(textarea);\n            return () => {\n                observer.disconnect();\n                cancelAnimationFrame(rafId);\n            };\n        }, [textareaRef, syncStyles, handleAutoResize, enableAutoResize]);\n\n        // Compute styles\n        const baseTextareaStyle: React.CSSProperties = {\n            ...DEFAULT_BASE_STYLE,\n            color: currentValue ? 'transparent' : 'inherit',\n            height: textareaHeight ? `${textareaHeight}px` : undefined,\n            resize: enableAutoResize ? 'none' : 'vertical',\n        };\n\n        const highlightLayerStyle: React.CSSProperties = {\n            ...DEFAULT_HIGHLIGHT_LAYER_STYLE,\n            direction: dir,\n            height: textareaHeight ? `${textareaHeight}px` : undefined,\n            padding: textareaRef.current ? getComputedStyle(textareaRef.current).padding : '8px 12px',\n        };\n\n        return (\n            <div className={containerClassName} ref={containerRef} style={{ ...DEFAULT_CONTAINER_STYLE, ...style }}>\n                <div aria-hidden=\"true\" ref={highlightLayerRef} style={highlightLayerStyle}>\n                    {highlightedContent}\n                </div>\n\n                <textarea\n                    className={className}\n                    dir={dir}\n                    onChange={handleChangeWithResize}\n                    onScroll={handleScroll}\n                    ref={textareaRef}\n                    rows={rows}\n                    style={baseTextareaStyle}\n                    value={currentValue}\n                    {...props}\n                />\n            </div>\n        );\n    },\n);\n\nDyeLight.displayName = 'DyeLight';\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/builder.ts","../src/domUtils.ts","../src/hooks/useAutoResize.ts","../src/textUtils.ts","../src/hooks/useHighlightedContent.ts","../src/hooks/useHighlightSync.ts","../src/hooks/useTextareaValue.ts","../src/styles.ts","../src/telemetry.ts","../src/DyeLight.tsx"],"sourcesContent":["/**\n * @fileoverview HighlightBuilder - Utility functions for creating highlight objects\n *\n * This module provides a convenient API for building highlight configurations\n * for the DyeLight component. It includes methods for creating character-level\n * highlights, line-level highlights, pattern-based highlights, and more.\n */\n\nimport type React from 'react';\n\n/**\n * Utility functions for building highlight objects for the DyeLight component\n * Provides a fluent API for creating various types of text highlights\n */\nexport const HighlightBuilder = {\n    /**\n     * Creates highlights for individual characters using absolute positions\n     * @param chars - Array of character highlight configurations\n     * @param chars[].index - Zero-based character index in the text\n     * @param chars[].className - Optional CSS class name to apply\n     * @param chars[].style - Optional inline styles to apply\n     * @returns Array of character range highlights\n     * @example\n     * ```tsx\n     * // Highlight characters at positions 5, 10, and 15\n     * const highlights = HighlightBuilder.characters([\n     *   { index: 5, className: 'highlight-error' },\n     *   { index: 10, className: 'highlight-warning' },\n     *   { index: 15, style: { backgroundColor: 'yellow' } }\n     * ]);\n     * ```\n     */\n    characters: (chars: Array<{ className?: string; index: number; style?: React.CSSProperties }>) => {\n        return chars.map(({ className, index, style }) => ({ className, end: index + 1, start: index, style }));\n    },\n\n    /**\n     * Creates line highlights for entire lines\n     * @param lines - Array of line highlight configurations\n     * @param lines[].line - Zero-based line number\n     * @param lines[].className - Optional CSS class name to apply to the line\n     * @param lines[].color - Optional color value (CSS color, hex, rgb, etc.)\n     * @returns Object mapping line numbers to highlight values\n     * @example\n     * ```tsx\n     * // Highlight lines 0 and 2 with different styles\n     * const lineHighlights = HighlightBuilder.lines([\n     *   { line: 0, className: 'error-line' },\n     *   { line: 2, color: '#ffff00' }\n     * ]);\n     * ```\n     */\n    lines: (lines: Array<{ className?: string; color?: string; line: number }>) => {\n        const result: { [lineNumber: number]: string } = {};\n        lines.forEach(({ className, color, line }) => {\n            result[line] = className || color || '';\n        });\n        return result;\n    },\n\n    /**\n     * Highlights text matching a pattern using absolute positions\n     * @param text - The text to search within\n     * @param pattern - Regular expression or string pattern to match\n     * @param className - Optional CSS class name to apply to matches\n     * @param style - Optional inline styles to apply to matches\n     * @returns Array of character range highlights for all matches\n     * @example\n     * ```tsx\n     * // Highlight all JavaScript keywords\n     * const highlights = HighlightBuilder.pattern(\n     *   code,\n     *   /\\b(function|const|let|var|if|else|for|while)\\b/g,\n     *   'keyword-highlight'\n     * );\n     *\n     * // Highlight all email addresses\n     * const emailHighlights = HighlightBuilder.pattern(\n     *   text,\n     *   /\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Z|a-z]{2,}\\b/g,\n     *   'email-highlight'\n     * );\n     * ```\n     */\n    pattern: (text: string, pattern: RegExp | string, className?: string, style?: React.CSSProperties) => {\n        const regex = typeof pattern === 'string' ? new RegExp(pattern, 'g') : new RegExp(pattern.source, 'g');\n        const matches = Array.from(text.matchAll(regex));\n\n        return matches.map((match) => ({ className, end: match.index! + match[0].length, start: match.index!, style }));\n    },\n\n    /**\n     * Creates character range highlights using absolute positions\n     * @param ranges - Array of character range configurations\n     * @param ranges[].start - Zero-based start index (inclusive)\n     * @param ranges[].end - Zero-based end index (exclusive)\n     * @param ranges[].className - Optional CSS class name to apply\n     * @param ranges[].style - Optional inline styles to apply\n     * @returns Array of character range highlights\n     * @example\n     * ```tsx\n     * // Highlight specific ranges in the text\n     * const highlights = HighlightBuilder.ranges([\n     *   { start: 0, end: 5, className: 'title-highlight' },\n     *   { start: 10, end: 20, style: { backgroundColor: 'yellow' } },\n     *   { start: 25, end: 30, className: 'error-highlight' }\n     * ]);\n     * ```\n     */\n    ranges: (ranges: Array<{ className?: string; end: number; start: number; style?: React.CSSProperties }>) => {\n        return ranges.map(({ className, end, start, style }) => ({ className, end, start, style }));\n    },\n\n    /**\n     * Highlights text between specific start and end positions\n     * Convenience method for highlighting a single selection range\n     * @param start - Zero-based start index (inclusive)\n     * @param end - Zero-based end index (exclusive)\n     * @param className - Optional CSS class name to apply\n     * @param style - Optional inline styles to apply\n     * @returns Array containing a single character range highlight\n     * @example\n     * ```tsx\n     * // Highlight a selection from position 10 to 25\n     * const selectionHighlight = HighlightBuilder.selection(\n     *   10,\n     *   25,\n     *   'selection-highlight'\n     * );\n     * ```\n     */\n    selection: (start: number, end: number, className?: string, style?: React.CSSProperties) => {\n        return [{ className, end, start, style }];\n    },\n\n    /**\n     * Highlights entire words that match specific terms\n     * @param text - The text to search within\n     * @param words - Array of words to highlight\n     * @param className - Optional CSS class name to apply to matched words\n     * @param style - Optional inline styles to apply to matched words\n     * @returns Array of character range highlights for all matched words\n     * @example\n     * ```tsx\n     * // Highlight specific programming keywords\n     * const highlights = HighlightBuilder.words(\n     *   sourceCode,\n     *   ['function', 'const', 'let', 'var', 'return'],\n     *   'keyword'\n     * );\n     *\n     * // Highlight important terms with custom styling\n     * const termHighlights = HighlightBuilder.words(\n     *   document,\n     *   ['TODO', 'FIXME', 'NOTE'],\n     *   undefined,\n     *   { backgroundColor: 'orange', fontWeight: 'bold' }\n     * );\n     * ```\n     */\n    words: (text: string, words: string[], className?: string, style?: React.CSSProperties) => {\n        const pattern = new RegExp(`\\\\b(${words.join('|')})\\\\b`, 'g');\n        return HighlightBuilder.pattern(text, pattern, className, style);\n    },\n};\n","/**\n * @fileoverview DOM utility functions for textarea manipulation\n *\n * This module provides utility functions for working with DOM elements,\n * specifically focused on textarea auto-resizing functionality used by\n * the DyeLight component.\n */\n\n/**\n * Automatically resizes a textarea element to fit its content\n *\n * This function adjusts the textarea height to match its scroll height,\n * effectively removing scrollbars when the content fits and expanding\n * the textarea as content is added. The height is first set to 'auto'\n * to allow the element to shrink if content is removed.\n *\n * @param textArea - The HTML textarea element to resize\n * @example\n * ```ts\n * const textarea = document.querySelector('textarea');\n * if (textarea) {\n *   autoResize(textarea);\n * }\n *\n * // Or in an event handler:\n * const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n *   autoResize(e.target);\n * };\n * ```\n */\nexport const autoResize = (textArea: HTMLTextAreaElement) => {\n    const computedStyle = getComputedStyle(textArea);\n    const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;\n    const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;\n\n    // Reset height to auto to force accurate scrollHeight calculation (shrink if needed)\n    textArea.style.height = 'auto';\n\n    const scrollHeight = textArea.scrollHeight;\n    const totalBorderHeight = borderTop + borderBottom;\n\n    // Only add border compensation if borders are significant (> 2px), otherwise trust scrollHeight\n    // This handles browser differences in how scrollHeight reports when box-sizing is border-box\n    const finalHeight = totalBorderHeight > 2 ? scrollHeight + totalBorderHeight : scrollHeight;\n\n    // Set height including borders for border-box\n    textArea.style.height = `${finalHeight}px`;\n};\n","/**\n * @fileoverview Hook for managing textarea auto-resize functionality\n */\n\nimport { useCallback, useState } from 'react';\nimport { autoResize } from '@/domUtils';\nimport type { AIOptimizedTelemetry } from '../telemetry';\n\n/**\n * Creates an auto-resize handler function\n * @param enableAutoResize Whether auto-resize is enabled\n * @param setTextareaHeight Function to update textarea height state\n * @param resize The resize function to use (defaults to autoResize)\n * @returns Handler function that resizes the textarea\n */\nexport const createAutoResizeHandler = (\n    enableAutoResize: boolean,\n    setTextareaHeight: (height: number | undefined) => void,\n    resize: (element: HTMLTextAreaElement) => void = autoResize,\n) => {\n    return (element: HTMLTextAreaElement) => {\n        if (!enableAutoResize) {\n            return;\n        }\n\n        resize(element);\n        setTextareaHeight(element.scrollHeight);\n    };\n};\n\n/**\n * Hook for managing textarea auto-resize functionality\n * Automatically adjusts textarea height based on content\n *\n * @param enableAutoResize Whether to enable automatic resizing\n * @param telemetry Optional telemetry collector for debugging\n * @param textareaRef Optional textarea reference for telemetry\n * @param getCurrentValue Optional function to get current value for telemetry\n * @param isControlled Whether the component is in controlled mode\n * @returns Object containing resize handler and current height\n */\nexport const useAutoResize = (\n    enableAutoResize: boolean,\n    telemetry?: AIOptimizedTelemetry,\n    textareaRef?: React.RefObject<HTMLTextAreaElement>,\n    getCurrentValue?: () => string,\n    isControlled?: boolean,\n) => {\n    const [textareaHeight, setTextareaHeight] = useState<number | undefined>();\n\n    /**\n     * Handles automatic resizing of the textarea based on content\n     * Records telemetry data if telemetry is enabled\n     */\n    const handleAutoResize = useCallback(\n        (element: HTMLTextAreaElement) => {\n            if (!enableAutoResize) {\n                return;\n            }\n\n            const beforeHeight = element.scrollHeight;\n\n            autoResize(element);\n\n            const afterHeight = element.scrollHeight;\n\n            telemetry?.record(\n                'autoResize',\n                'system',\n                { afterHeight, beforeHeight, changed: beforeHeight !== afterHeight, textLength: element.value.length },\n                textareaRef ?? { current: element },\n                getCurrentValue?.() ?? element.value,\n                afterHeight,\n                isControlled ?? false,\n            );\n\n            setTextareaHeight(element.scrollHeight);\n        },\n        [enableAutoResize, telemetry, textareaRef, getCurrentValue, isControlled],\n    );\n\n    return { handleAutoResize, textareaHeight };\n};\n","/**\n * @fileoverview Text utility functions for position calculations and text processing\n *\n * This module provides utilities for converting between absolute text positions\n * and line-relative positions, as well as other text processing functions used\n * by the DyeLight component for highlight positioning.\n */\n\n/**\n * Analyzes text content and returns line information with position mappings\n * @param text - The text content to analyze\n * @returns Object containing lines array and line start positions\n * @returns returns.lines - Array of individual lines (without newline characters)\n * @returns returns.lineStarts - Array of absolute positions where each line starts\n * @example\n * ```ts\n * const text = \"Hello\\nWorld\\nTest\";\n * const { lines, lineStarts } = getLinePositions(text);\n * // lines: [\"Hello\", \"World\", \"Test\"]\n * // lineStarts: [0, 6, 12]\n * ```\n */\nexport const getLinePositions = (text: string) => {\n    const lines = text.split('\\n');\n    const lineStarts: number[] = [];\n    let position = 0;\n\n    lines.forEach((line, index) => {\n        lineStarts.push(position);\n        position += line.length + (index < lines.length - 1 ? 1 : 0); // +1 for \\n except last line\n    });\n\n    return { lineStarts, lines };\n};\n\n/**\n * Converts an absolute text position to line-relative coordinates\n * @param absolutePos - Zero-based absolute position in the entire text\n * @param lineStarts - Array of line start positions (from getLinePositions)\n * @returns Object containing line number and character position within that line\n * @returns returns.line - Zero-based line number\n * @returns returns.char - Zero-based character position within the line\n * @example\n * ```ts\n * const text = \"Hello\\nWorld\\nTest\";\n * const { lineStarts } = getLinePositions(text);\n * const pos = absoluteToLinePos(8, lineStarts);\n * // pos: { line: 1, char: 2 } (the 'r' in \"World\")\n * ```\n */\nexport const absoluteToLinePos = (absolutePos: number, lineStarts: number[]) => {\n    for (let i = lineStarts.length - 1; i >= 0; i--) {\n        if (absolutePos >= lineStarts[i]) {\n            return { char: absolutePos - lineStarts[i], line: i };\n        }\n    }\n    return { char: 0, line: 0 };\n};\n\n/**\n * Determines if a string value represents a CSS color value\n * @param value - The string value to test\n * @returns True if the value appears to be a color value, false otherwise\n * @example\n * ```ts\n * isColorValue('#ff0000'); // true\n * isColorValue('rgb(255, 0, 0)'); // true\n * isColorValue('red'); // true\n * isColorValue('my-css-class'); // false (contains hyphens)\n * isColorValue('transparent'); // true\n * isColorValue('var(--primary-color)'); // true\n * ```\n */\nexport const isColorValue = (value: string): boolean => {\n    return (\n        /^(#|rgb|hsl|var\\(--.*?\\)|transparent|currentColor|inherit|initial|unset)/i.test(value) ||\n        /^[a-z]+$/i.test(value)\n    );\n};\n","import { useMemo } from 'react';\nimport { absoluteToLinePos, getLinePositions } from '@/textUtils';\nimport type { CharacterRange } from '@/types';\n\nexport const computeHighlightedContent = (\n    text: string,\n    highlights: CharacterRange[],\n    lineHighlights: { [lineNumber: number]: string },\n    renderHighlightedLine: (\n        line: string,\n        lineIndex: number,\n        ranges: Array<{\n            absoluteStart: number;\n            className?: string;\n            end: number;\n            start: number;\n            style?: React.CSSProperties;\n        }>,\n        lineHighlight?: string,\n    ) => React.ReactElement,\n) => {\n    const { lines, lineStarts } = getLinePositions(text);\n\n    const highlightsByLine: {\n        [lineIndex: number]: Array<{\n            absoluteStart: number;\n            className?: string;\n            end: number;\n            start: number;\n            style?: React.CSSProperties;\n        }>;\n    } = {};\n\n    highlights.forEach((highlight) => {\n        const startPos = absoluteToLinePos(highlight.start, lineStarts);\n        const endPos = absoluteToLinePos(highlight.end - 1, lineStarts);\n\n        for (let lineIndex = startPos.line; lineIndex <= endPos.line; lineIndex++) {\n            if (!highlightsByLine[lineIndex]) {\n                highlightsByLine[lineIndex] = [];\n            }\n\n            const lineStart = lineStarts[lineIndex];\n\n            const rangeStart = Math.max(highlight.start - lineStart, 0);\n            const rangeEnd = Math.min(highlight.end - lineStart, lines[lineIndex].length);\n\n            if (rangeEnd > rangeStart) {\n                highlightsByLine[lineIndex].push({\n                    absoluteStart: highlight.start,\n                    className: highlight.className,\n                    end: rangeEnd,\n                    start: rangeStart,\n                    style: highlight.style,\n                });\n            }\n        }\n    });\n\n    return lines.map((line, lineIndex) => {\n        const lineHighlight = lineHighlights[lineIndex];\n        const ranges = highlightsByLine[lineIndex] || [];\n\n        return renderHighlightedLine(line, lineIndex, ranges, lineHighlight);\n    });\n};\n\n/**\n * Hook for computing highlighted content from text and highlight ranges\n */\nexport const useHighlightedContent = (\n    text: string,\n    highlights: CharacterRange[],\n    lineHighlights: { [lineNumber: number]: string },\n    renderHighlightedLine: (\n        line: string,\n        lineIndex: number,\n        ranges: Array<{\n            absoluteStart: number;\n            className?: string;\n            end: number;\n            start: number;\n            style?: React.CSSProperties;\n        }>,\n        lineHighlight?: string,\n    ) => React.ReactElement,\n) => {\n    /**\n     * Computes the highlighted content by processing text and highlight ranges\n     * Groups highlights by line and renders each line with appropriate highlighting\n     */\n    const highlightedContent = useMemo(\n        () => computeHighlightedContent(text, highlights, lineHighlights, renderHighlightedLine),\n        [text, highlights, lineHighlights, renderHighlightedLine],\n    );\n\n    return highlightedContent;\n};\n","/**\n * @fileoverview Hook for managing highlight layer synchronization\n */\n\nimport { useCallback, useRef } from 'react';\nimport type { AIOptimizedTelemetry } from '../telemetry';\n\n/**\n * Synchronizes scroll positions between textarea and highlight layer\n * @param textarea The textarea element\n * @param highlightLayer The highlight overlay element\n */\nexport const syncScrollPositions = (\n    textarea: Pick<HTMLTextAreaElement, 'scrollLeft' | 'scrollTop'> | null,\n    highlightLayer: Pick<HTMLDivElement, 'scrollLeft' | 'scrollTop'> | null,\n) => {\n    if (!textarea || !highlightLayer) {\n        return;\n    }\n\n    const { scrollLeft, scrollTop } = textarea;\n    highlightLayer.scrollTop = scrollTop;\n    highlightLayer.scrollLeft = scrollLeft;\n};\n\n/**\n * Synchronizes styles between textarea and highlight layer for pixel-perfect alignment\n * @param textarea The textarea element\n * @param highlightLayer The highlight overlay element\n * @param computeStyle Function to compute styles (defaults to getComputedStyle)\n */\nexport const syncHighlightStyles = (\n    textarea: HTMLTextAreaElement | null,\n    highlightLayer: HTMLDivElement | null,\n    computeStyle: (element: Element) => CSSStyleDeclaration = getComputedStyle,\n) => {\n    if (!textarea || !highlightLayer) {\n        return;\n    }\n\n    const computedStyle = computeStyle(textarea);\n\n    highlightLayer.style.padding = computedStyle.padding;\n    highlightLayer.style.fontSize = computedStyle.fontSize;\n    highlightLayer.style.fontFamily = computedStyle.fontFamily;\n    highlightLayer.style.lineHeight = computedStyle.lineHeight;\n    highlightLayer.style.letterSpacing = computedStyle.letterSpacing;\n    highlightLayer.style.wordSpacing = computedStyle.wordSpacing;\n    highlightLayer.style.textIndent = computedStyle.textIndent;\n\n    highlightLayer.style.whiteSpace = computedStyle.whiteSpace;\n    highlightLayer.style.wordBreak = computedStyle.wordBreak;\n    highlightLayer.style.overflowWrap = computedStyle.overflowWrap;\n    highlightLayer.style.tabSize = computedStyle.tabSize;\n\n    highlightLayer.style.borderTopWidth = computedStyle.borderTopWidth;\n    highlightLayer.style.borderRightWidth = computedStyle.borderRightWidth;\n    highlightLayer.style.borderBottomWidth = computedStyle.borderBottomWidth;\n    highlightLayer.style.borderLeftWidth = computedStyle.borderLeftWidth;\n    highlightLayer.style.borderTopStyle = computedStyle.borderTopStyle;\n    highlightLayer.style.borderRightStyle = computedStyle.borderRightStyle;\n    highlightLayer.style.borderBottomStyle = computedStyle.borderBottomStyle;\n    highlightLayer.style.borderLeftStyle = computedStyle.borderLeftStyle;\n    highlightLayer.style.borderColor = 'transparent';\n\n    const borderLeft = parseFloat(computedStyle.borderLeftWidth) || 0;\n    const borderRight = parseFloat(computedStyle.borderRightWidth) || 0;\n    const scrollbarWidth = textarea.offsetWidth - textarea.clientWidth - borderLeft - borderRight;\n\n    if (scrollbarWidth > 0) {\n        const isRTL = computedStyle.direction === 'rtl';\n        if (isRTL) {\n            const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n            highlightLayer.style.paddingLeft = `${paddingLeft + scrollbarWidth}px`;\n        } else {\n            const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n            highlightLayer.style.paddingRight = `${paddingRight + scrollbarWidth}px`;\n        }\n    }\n};\n\n/**\n * Hook for managing highlight layer synchronization\n * Provides functions to sync scroll and styles between textarea and overlay\n *\n * @param telemetry Optional telemetry collector for debugging\n * @param textareaRef Optional textarea reference for telemetry\n * @param getCurrentValue Optional function to get current value for telemetry\n * @param getHeight Optional function to get current height for telemetry\n * @param isControlled Whether the component is in controlled mode\n * @returns Object containing highlight layer ref and sync functions\n */\nexport const useHighlightSync = (\n    telemetry?: AIOptimizedTelemetry,\n    textareaRef?: React.RefObject<HTMLTextAreaElement>,\n    getCurrentValue?: () => string,\n    getHeight?: () => number | undefined,\n    isControlled?: boolean,\n) => {\n    const highlightLayerRef = useRef<HTMLDivElement>(null);\n\n    /**\n     * Synchronizes scroll position between textarea and highlight layer\n     * @param textareaRefParam The textarea ref to sync from\n     */\n    const syncScroll = useCallback(\n        (textareaRefParam: React.RefObject<HTMLTextAreaElement | null>) => {\n            const before = {\n                scrollLeft: highlightLayerRef.current?.scrollLeft,\n                scrollTop: highlightLayerRef.current?.scrollTop,\n            };\n\n            syncScrollPositions(textareaRefParam.current, highlightLayerRef.current);\n\n            const after = {\n                scrollLeft: highlightLayerRef.current?.scrollLeft,\n                scrollTop: highlightLayerRef.current?.scrollTop,\n            };\n\n            telemetry?.record(\n                'syncScroll',\n                'sync',\n                {\n                    after,\n                    before,\n                    changed: before.scrollTop !== after.scrollTop || before.scrollLeft !== after.scrollLeft,\n                },\n                textareaRef ?? textareaRefParam,\n                getCurrentValue?.() ?? '',\n                getHeight?.(),\n                isControlled ?? false,\n            );\n        },\n        [telemetry, textareaRef, getCurrentValue, getHeight, isControlled],\n    );\n\n    /**\n     * Synchronizes styles between textarea and highlight layer\n     * @param textareaRefParam The textarea ref to sync from\n     */\n    const syncStyles = useCallback(\n        (textareaRefParam: React.RefObject<HTMLTextAreaElement | null>) => {\n            if (!textareaRefParam.current || !highlightLayerRef.current) {\n                return;\n            }\n\n            const computedStyle = getComputedStyle(textareaRefParam.current);\n            const scrollbarWidth =\n                textareaRefParam.current.offsetWidth -\n                textareaRefParam.current.clientWidth -\n                (parseFloat(computedStyle.borderLeftWidth) || 0) -\n                (parseFloat(computedStyle.borderRightWidth) || 0);\n\n            syncHighlightStyles(textareaRefParam.current, highlightLayerRef.current);\n\n            telemetry?.record(\n                'syncStyles',\n                'sync',\n                {\n                    direction: computedStyle.direction,\n                    fontSize: computedStyle.fontSize,\n                    padding: computedStyle.padding,\n                    scrollbarWidth,\n                },\n                textareaRef ?? textareaRefParam,\n                getCurrentValue?.() ?? '',\n                getHeight?.(),\n                isControlled ?? false,\n            );\n        },\n        [telemetry, textareaRef, getCurrentValue, getHeight, isControlled],\n    );\n\n    return { highlightLayerRef, syncScroll, syncStyles };\n};\n","/**\n * @fileoverview Hook for managing textarea value state and synchronization\n */\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport type { AIOptimizedTelemetry } from '../telemetry';\n\n/**\n * Synchronizes the textarea DOM value with React state\n * @param textarea The textarea DOM element\n * @param currentValue Current React state value\n * @param isControlled Whether the component is in controlled mode\n * @param setInternalValue Function to update internal state\n * @param onChange Optional onChange callback\n */\nexport const syncValueWithDOM = (\n    textarea: HTMLTextAreaElement | null,\n    currentValue: string,\n    isControlled: boolean,\n    setInternalValue: (value: string) => void,\n    onChange?: (value: string) => void,\n) => {\n    if (!textarea) {\n        return;\n    }\n\n    const domValue = textarea.value;\n    if (domValue !== currentValue) {\n        if (!isControlled) {\n            setInternalValue(domValue);\n        }\n        onChange?.(domValue);\n    }\n};\n\n/**\n * Handles value changes from user input\n * @param newValue New value from user input\n * @param currentValue Current React state value\n * @param isControlled Whether the component is in controlled mode\n * @param setInternalValue Function to update internal state\n * @param onChange Optional onChange callback\n */\nexport const handleChangeValue = (\n    newValue: string,\n    currentValue: string,\n    isControlled: boolean,\n    setInternalValue: (value: string) => void,\n    onChange?: (value: string) => void,\n) => {\n    if (newValue === currentValue) {\n        return;\n    }\n\n    if (!isControlled) {\n        setInternalValue(newValue);\n    }\n\n    onChange?.(newValue);\n};\n\n/**\n * Applies a programmatic value change via setValue\n * @param textarea The textarea DOM element\n * @param newValue New value to set\n * @param isControlled Whether the component is in controlled mode\n * @param setInternalValue Function to update internal state\n * @param onChange Optional onChange callback\n */\nexport const applySetValue = (\n    textarea: HTMLTextAreaElement | null,\n    newValue: string,\n    isControlled: boolean,\n    setInternalValue: (value: string) => void,\n    onChange?: (value: string) => void,\n) => {\n    if (!textarea) {\n        return;\n    }\n\n    textarea.value = newValue;\n\n    if (!isControlled) {\n        setInternalValue(newValue);\n    }\n\n    onChange?.(newValue);\n};\n\n/**\n * Hook for managing textarea value state and synchronization\n * Handles both controlled and uncontrolled modes, plus programmatic changes\n *\n * @param value Controlled value (optional)\n * @param defaultValue Default value for uncontrolled mode\n * @param onChange Callback when value changes\n * @param telemetry Optional telemetry collector for debugging\n * @param textareaRef Optional external textarea ref\n * @param getHeight Optional function to get current textarea height\n * @returns Object containing current value, change handler, setValue function, and textarea ref\n */\nexport const useTextareaValue = (\n    value?: string,\n    defaultValue = '',\n    onChange?: (value: string) => void,\n    telemetry?: AIOptimizedTelemetry,\n    textareaRef?: React.RefObject<HTMLTextAreaElement>,\n    getHeight?: () => number | undefined,\n) => {\n    const internalTextareaRef = useRef<HTMLTextAreaElement>(null);\n    const [internalValue, setInternalValue] = useState(value ?? defaultValue);\n\n    const isControlled = value !== undefined;\n    const currentValue = isControlled ? (value ?? '') : internalValue;\n    const actualTextareaRef = textareaRef ?? internalTextareaRef;\n\n    const syncValueWithDOMCallback = useCallback(() => {\n        syncValueWithDOM(actualTextareaRef.current, currentValue, isControlled, setInternalValue, onChange);\n    }, [currentValue, isControlled, onChange, actualTextareaRef]);\n\n    const handleChange = useCallback(\n        (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n            const newValue = e.target.value;\n\n            telemetry?.record(\n                'onChange',\n                'user',\n                {\n                    lengthDelta: newValue.length - currentValue.length,\n                    newValue,\n                    previousValue: currentValue,\n                    valueLength: newValue.length,\n                },\n                actualTextareaRef,\n                currentValue,\n                getHeight?.(),\n                isControlled,\n            );\n\n            handleChangeValue(newValue, currentValue, isControlled, setInternalValue, onChange);\n        },\n        [currentValue, isControlled, onChange, telemetry, actualTextareaRef, getHeight],\n    );\n\n    const setValue = useCallback(\n        (newValue: string) => {\n            telemetry?.record(\n                'setValue',\n                'state',\n                { newValue, previousValue: currentValue },\n                actualTextareaRef,\n                currentValue,\n                getHeight?.(),\n                isControlled,\n            );\n\n            applySetValue(actualTextareaRef.current, newValue, isControlled, setInternalValue, onChange);\n        },\n        [isControlled, onChange, telemetry, actualTextareaRef, getHeight, currentValue],\n    );\n\n    useEffect(() => {\n        syncValueWithDOMCallback();\n    }, [syncValueWithDOMCallback]);\n\n    useEffect(() => {\n        if (isControlled && actualTextareaRef.current && actualTextareaRef.current.value !== currentValue) {\n            actualTextareaRef.current.value = currentValue;\n        }\n    }, [isControlled, currentValue, actualTextareaRef]);\n\n    useEffect(() => {\n        if (actualTextareaRef.current && actualTextareaRef.current.value !== currentValue) {\n            telemetry?.record(\n                'valueMismatch',\n                'state',\n                { domValue: actualTextareaRef.current.value, stateValue: currentValue },\n                actualTextareaRef,\n                currentValue,\n                getHeight?.(),\n                isControlled,\n            );\n        }\n    }, [currentValue, isControlled, telemetry, actualTextareaRef, getHeight]);\n\n    return { currentValue, handleChange, setValue, textareaRef: actualTextareaRef };\n};\n","/**\n * @fileoverview Default styles for DyeLight component elements\n *\n * This module contains the default CSS-in-JS styles used by the DyeLight component\n * for its container, textarea, and highlight layer elements. These styles ensure\n * proper layering, positioning, and visual alignment between the textarea and\n * its highlight overlay.\n */\n\nimport type React from 'react';\n\n/**\n * Default styles for the main container element that wraps the entire component\n * Creates a positioned container that serves as the reference for absolutely positioned children\n */\nexport const DEFAULT_CONTAINER_STYLE: React.CSSProperties = {\n    /** Ensures the container behaves as a block-level element */\n    display: 'block',\n    /** Enables absolute positioning for child elements */\n    position: 'relative',\n    /** Takes full width of parent container */\n    width: '100%',\n};\n\n/**\n * Default styles for the textarea element\n * Makes the textarea transparent while maintaining its functionality and positioning\n */\nexport const DEFAULT_BASE_STYLE: React.CSSProperties = {\n    /** Transparent background to show highlights underneath */\n    background: 'transparent',\n    /** Ensures consistent box model calculations */\n    boxSizing: 'border-box',\n    /** Maintains visible text cursor */\n    caretColor: '#000000',\n    /** Transparent text to reveal highlights while keeping cursor and selection */\n    color: 'transparent',\n    /** Prevents unwanted height constraints */\n    minHeight: 'auto',\n    /** Positioned above the highlight layer */\n    position: 'relative',\n    /** Takes full width of container */\n    width: '100%',\n    /** Ensures textarea appears above highlight layer */\n    zIndex: 2,\n};\n\n/**\n * Default styles for the highlight layer that renders behind the textarea\n * Positioned absolutely to overlay perfectly with the textarea content\n */\nexport const DEFAULT_HIGHLIGHT_LAYER_STYLE: React.CSSProperties = {\n    /** Transparent border to match textarea default border - now synced dynamically */\n    border: '0px none transparent',\n    /** Stretch to fill container bottom */\n    bottom: 0,\n    /** Consistent box model with textarea */\n    boxSizing: 'border-box',\n    /** Inherit text color from parent */\n    color: 'inherit',\n    /** Match textarea font family */\n    fontFamily: 'inherit',\n    /** Match textarea font size */\n    fontSize: 'inherit',\n    /** Stretch to fill container left */\n    left: 0,\n    /** Match textarea line height */\n    lineHeight: 'inherit',\n    /** Remove default margins */\n    margin: 0,\n    /** Hide scrollbars on highlight layer */\n    overflow: 'hidden',\n    /** Prevent highlight layer from capturing mouse events */\n    pointerEvents: 'none',\n    /** Positioned absolutely within container */\n    position: 'absolute',\n    /** Stretch to fill container right */\n    right: 0,\n    /** Stretch to fill container top */\n    top: 0,\n    /** Preserve whitespace and line breaks like textarea */\n    whiteSpace: 'pre-wrap',\n    /** Break long words like textarea */\n    wordWrap: 'break-word',\n    /** Ensure highlight layer appears behind textarea */\n    zIndex: 1,\n};\n","/**\n * @fileoverview AI-Optimized Telemetry System for DyeLight\n *\n * This format is specifically designed to be parsed by LLMs for debugging.\n * It includes rich context, clear narratives, and structured anomaly detection.\n */\n\nimport React from 'react';\n\n/**\n * Represents a single telemetry event with full context\n */\nexport type AITelemetryEvent = {\n    /** Unix timestamp in milliseconds */\n    timestamp: number;\n    /** ISO 8601 formatted timestamp */\n    timestampISO: string;\n    /** Milliseconds since the last event, or null for first event */\n    timeSinceLastEvent: number | null;\n    /** Event type identifier */\n    type: string;\n    /** Event category for grouping and analysis */\n    category: 'state' | 'dom' | 'sync' | 'user' | 'system';\n    /** Human-readable description of the event */\n    description: string;\n    /** Event-specific data payload */\n    data: Record<string, unknown>;\n    /** Complete state snapshot at the time of this event */\n    stateSnapshot: {\n        /** Actual value in the textarea DOM element */\n        textareaValue: string;\n        /** Value in React state */\n        reactValue: string;\n        /** Whether DOM and React state are synchronized */\n        valuesMatch: boolean;\n        /** Current height of the textarea in pixels */\n        textareaHeight: number | undefined;\n        /** Whether the component is in controlled mode */\n        isControlled: boolean;\n    };\n    /** Detected anomalies or issues at this event */\n    anomalies: string[];\n};\n\n/**\n * Complete AI-readable debug report structure\n */\nexport type AIDebugReport = {\n    /** Metadata about the report and environment */\n    metadata: {\n        /** When this report was generated */\n        generatedAt: string;\n        /** DyeLight version */\n        componentVersion: string;\n        /** Total number of events recorded */\n        totalEvents: number;\n        /** Time range covered by events */\n        timespan: {\n            /** ISO timestamp of first event */\n            start: string;\n            /** ISO timestamp of last event */\n            end: string;\n            /** Duration in milliseconds */\n            durationMs: number;\n        };\n        /** Browser user agent string */\n        browser: string;\n        /** Platform identifier */\n        platform: string;\n        /** React version */\n        reactVersion: string;\n    };\n\n    /** Analysis summary with detected issues */\n    summary: {\n        /** High-level description of findings */\n        description: string;\n        /** List of detected issues sorted by severity */\n        detectedIssues: Array<{\n            /** Issue severity level */\n            severity: 'critical' | 'warning' | 'info';\n            /** Issue description */\n            issue: string;\n            /** When this issue first occurred */\n            firstOccurrence: string;\n            /** How many times this issue occurred */\n            occurrenceCount: number;\n            /** Event indices where this issue occurred */\n            relatedEvents: number[];\n        }>;\n        /** Suspicious patterns detected in event sequences */\n        suspiciousPatterns: string[];\n        /** Recommended actions to resolve issues */\n        recommendations: string[];\n    };\n\n    /** Different views of the event timeline */\n    timeline: {\n        /** User interactions and their impacts */\n        userActions: Array<{\n            /** When the action occurred */\n            timestamp: string;\n            /** What the user did */\n            action: string;\n            /** Number of state changes triggered */\n            resultingStateChanges: number;\n        }>;\n        /** All state mutations in chronological order */\n        stateChanges: Array<{\n            /** When the change occurred */\n            timestamp: string;\n            /** Type of state change */\n            type: string;\n            /** Previous value */\n            before: unknown;\n            /** New value */\n            after: unknown;\n            /** Whether this change was unexpected */\n            unexpected: boolean;\n        }>;\n        /** Synchronization operations between textarea and overlay */\n        syncOperations: Array<{\n            /** When the sync occurred */\n            timestamp: string;\n            /** Type of synchronization */\n            operation: string;\n            /** Whether sync was successful */\n            success: boolean;\n            /** Additional sync details */\n            details: Record<string, unknown>;\n        }>;\n    };\n\n    /** Complete chronological list of all events */\n    events: AITelemetryEvent[];\n\n    /** Final state at time of export */\n    finalState: {\n        /** Current textarea DOM value */\n        textareaValue: string;\n        /** Current React state value */\n        reactValue: string;\n        /** Whether values are synchronized */\n        inSync: boolean;\n        /** Current height in pixels */\n        height: number | undefined;\n        /** Current scroll position */\n        scrollPosition: { top: number; left: number };\n        /** Current highlights configuration */\n        highlights: unknown[];\n    };\n};\n\n/**\n * AI-optimized telemetry collector for the DyeLight component.\n * Records events with full context and generates comprehensive debug reports\n * that can be analyzed by AI language models.\n */\nexport class AIOptimizedTelemetry {\n    private events: AITelemetryEvent[] = [];\n    private maxEvents = 1000;\n    private enabled = false;\n    private lastEventTimestamp: number | null = null;\n    private issueRegistry = new Map<string, number>();\n\n    /**\n     * Creates a new telemetry instance\n     * @param enabled Whether telemetry collection is initially enabled\n     * @param maxEvents Maximum number of events to retain in memory\n     */\n    constructor(enabled = false, maxEvents = 1000) {\n        this.enabled = enabled;\n        this.maxEvents = maxEvents;\n    }\n\n    /**\n     * Enable or disable telemetry collection\n     * @param enabled Whether to enable telemetry\n     */\n    setEnabled(enabled: boolean) {\n        this.enabled = enabled;\n    }\n\n    /**\n     * Records an event with full context for AI analysis\n     * @param type Event type identifier\n     * @param category Event category for grouping\n     * @param data Event-specific data\n     * @param textareaRef Reference to the textarea element\n     * @param currentValue Current React state value\n     * @param textareaHeight Current textarea height\n     * @param isControlled Whether component is in controlled mode\n     */\n    record(\n        type: string,\n        category: 'state' | 'dom' | 'sync' | 'user' | 'system',\n        data: Record<string, unknown>,\n        textareaRef: React.RefObject<HTMLTextAreaElement | null>,\n        currentValue: string | undefined,\n        textareaHeight: number | undefined,\n        isControlled: boolean,\n    ) {\n        if (!this.enabled) {\n            return;\n        }\n\n        const now = Date.now();\n        const timeSinceLastEvent = this.lastEventTimestamp ? now - this.lastEventTimestamp : null;\n\n        const textareaValue = textareaRef.current?.value ?? '';\n        const reactValue = currentValue ?? '';\n        const valuesMatch = textareaValue === reactValue;\n\n        const anomalies: string[] = [];\n\n        if (!valuesMatch) {\n            anomalies.push(`State mismatch: DOM=\"${textareaValue}\" vs React=\"${reactValue}\"`);\n            this.issueRegistry.set('state_mismatch', (this.issueRegistry.get('state_mismatch') ?? 0) + 1);\n        }\n\n        if (timeSinceLastEvent !== null && timeSinceLastEvent < 5) {\n            anomalies.push(`Rapid event: ${timeSinceLastEvent}ms since last event`);\n            this.issueRegistry.set('rapid_events', (this.issueRegistry.get('rapid_events') ?? 0) + 1);\n        }\n\n        if (category === 'user' && type === 'onChange') {\n            const lengthDelta = Math.abs(textareaValue.length - reactValue.length);\n            if (lengthDelta > 100) {\n                anomalies.push(`Large paste detected: ${lengthDelta} characters changed`);\n                this.issueRegistry.set('large_paste', (this.issueRegistry.get('large_paste') ?? 0) + 1);\n            }\n        }\n\n        const event: AITelemetryEvent = {\n            anomalies,\n            category,\n            data,\n            description: this.generateDescription(type, category, data),\n            stateSnapshot: { isControlled, reactValue, textareaHeight, textareaValue, valuesMatch },\n            timeSinceLastEvent,\n            timestamp: now,\n            timestampISO: new Date(now).toISOString(),\n            type,\n        };\n\n        this.events.push(event);\n        this.lastEventTimestamp = now;\n\n        if (this.events.length > this.maxEvents) {\n            this.events = this.events.slice(-this.maxEvents);\n        }\n    }\n\n    /**\n     * Generates a human-readable description for an event\n     * @param type Event type\n     * @param category Event category\n     * @param data Event data\n     * @returns Human-readable description\n     */\n    private generateDescription(type: string, category: string, data: Record<string, unknown>): string {\n        switch (type) {\n            case 'onChange':\n                return `User typed/pasted text. New length: ${data.valueLength}`;\n            case 'autoResize':\n                return `Textarea auto-resized from ${data.beforeHeight}px to ${data.afterHeight}px`;\n            case 'syncScroll':\n                return `Synchronized scroll position to top:${(data as any).after?.scrollTop ?? 0}`;\n            case 'syncStyles':\n                return `Synchronized styles (padding, font, borders) between textarea and overlay`;\n            case 'valueMismatch':\n                return `CRITICAL: DOM value differs from React state`;\n            case 'setValue':\n                return `Programmatic value change via ref.setValue()`;\n            case 'snapshot':\n                return `Periodic state snapshot for debugging`;\n            default:\n                return `${category} event: ${type}`;\n        }\n    }\n\n    /**\n     * Generates a comprehensive AI-readable debug report\n     * @param textareaRef Reference to the textarea element\n     * @param currentValue Current React state value\n     * @param textareaHeight Current textarea height\n     * @param highlights Current highlights configuration\n     * @param lineHighlights Current line highlights configuration\n     * @returns Complete debug report\n     */\n    generateAIReport(\n        textareaRef: React.RefObject<HTMLTextAreaElement | null>,\n        currentValue: string | undefined,\n        textareaHeight: number | undefined,\n        highlights: unknown[],\n        lineHighlights: Record<number, string>,\n    ): AIDebugReport {\n        const firstEvent = this.events[0];\n        const lastEvent = this.events[this.events.length - 1];\n        const timespan = lastEvent && firstEvent ? lastEvent.timestamp - firstEvent.timestamp : 0;\n\n        const detectedIssues: AIDebugReport['summary']['detectedIssues'] = [];\n\n        for (const [issueType, count] of this.issueRegistry.entries()) {\n            const relatedEvents = this.events\n                .map((e, i) => (e.anomalies.some((a) => a.includes(issueType)) ? i : -1))\n                .filter((i) => i !== -1);\n\n            const firstOccurrence = relatedEvents.length > 0 ? this.events[relatedEvents[0]].timestampISO : '';\n\n            let severity: 'critical' | 'warning' | 'info' = 'info';\n            let issue = issueType;\n\n            if (issueType === 'state_mismatch') {\n                severity = 'critical';\n                issue = 'State desynchronization between DOM and React detected';\n            } else if (issueType === 'rapid_events') {\n                severity = count > 10 ? 'warning' : 'info';\n                issue = 'Rapid successive events detected (possible race condition)';\n            } else if (issueType === 'large_paste') {\n                severity = 'warning';\n                issue = 'Large paste operations detected (may trigger sync issues)';\n            }\n\n            detectedIssues.push({ firstOccurrence, issue, occurrenceCount: count, relatedEvents, severity });\n        }\n\n        detectedIssues.sort((a, b) => {\n            const severityOrder = { critical: 0, info: 2, warning: 1 };\n            return severityOrder[a.severity] - severityOrder[b.severity];\n        });\n\n        const suspiciousPatterns: string[] = [];\n\n        const resizeEvents = this.events.filter((e) => e.type === 'autoResize');\n        const valueChanges = this.events.filter((e) => e.type === 'onChange');\n        if (resizeEvents.length > valueChanges.length * 2) {\n            suspiciousPatterns.push(\n                `Excessive resize operations (${resizeEvents.length} resizes vs ${valueChanges.length} value changes). ` +\n                    `May indicate infinite ResizeObserver loop.`,\n            );\n        }\n\n        const syncEvents = this.events.filter((e) => e.category === 'sync');\n        if (syncEvents.length > this.events.length * 0.3) {\n            suspiciousPatterns.push(\n                `High frequency of sync operations (${syncEvents.length}/${this.events.length} events). ` +\n                    `May indicate layout thrashing.`,\n            );\n        }\n\n        const recommendations: string[] = [];\n\n        if (detectedIssues.some((i) => i.issue.includes('desynchronization'))) {\n            recommendations.push(\n                'State desynchronization detected. Check if multiple onChange handlers are bound or ' +\n                    'if external code is modifying the textarea DOM directly.',\n            );\n        }\n\n        if (suspiciousPatterns.some((p) => p.includes('ResizeObserver'))) {\n            recommendations.push(\n                'Possible infinite ResizeObserver loop. Ensure resize operations are debounced with requestAnimationFrame.',\n            );\n        }\n\n        if (detectedIssues.some((i) => i.issue.includes('race condition'))) {\n            recommendations.push(\n                'Rapid events detected. Consider debouncing onChange handlers or checking for double-bound event listeners.',\n            );\n        }\n\n        const timeline = {\n            stateChanges: this.events\n                .filter((e) => e.category === 'state')\n                .map((e) => ({\n                    after: e.data.newValue,\n                    before: e.data.previousValue,\n                    timestamp: e.timestampISO,\n                    type: e.type,\n                    unexpected: e.anomalies.length > 0,\n                })),\n\n            syncOperations: this.events\n                .filter((e) => e.category === 'sync')\n                .map((e) => ({\n                    details: e.data,\n                    operation: e.type,\n                    success: !e.anomalies.length,\n                    timestamp: e.timestampISO,\n                })),\n            userActions: this.events\n                .filter((e) => e.category === 'user')\n                .map((e) => ({\n                    action: e.description,\n                    resultingStateChanges: this.events.filter(\n                        (se) =>\n                            se.timestamp > e.timestamp && se.timestamp < e.timestamp + 100 && se.category === 'state',\n                    ).length,\n                    timestamp: e.timestampISO,\n                })),\n        };\n\n        return {\n            events: this.events,\n\n            finalState: {\n                height: textareaHeight,\n                highlights,\n                inSync: (textareaRef.current?.value ?? '') === (currentValue ?? ''),\n                reactValue: currentValue ?? '',\n                scrollPosition: {\n                    left: textareaRef.current?.scrollLeft ?? 0,\n                    top: textareaRef.current?.scrollTop ?? 0,\n                },\n                textareaValue: textareaRef.current?.value ?? '',\n            },\n            metadata: {\n                browser: navigator.userAgent,\n                componentVersion: '1.1.3',\n                generatedAt: new Date().toISOString(),\n                platform: navigator.platform,\n                reactVersion: (React as any).version ?? 'unknown',\n                timespan: {\n                    durationMs: timespan,\n                    end: lastEvent?.timestampISO ?? '',\n                    start: firstEvent?.timestampISO ?? '',\n                },\n                totalEvents: this.events.length,\n            },\n\n            summary: {\n                description:\n                    detectedIssues.length > 0\n                        ? `Found ${detectedIssues.length} issue(s) during ${this.events.length} recorded events over ${(timespan / 1000).toFixed(1)}s`\n                        : `No issues detected during ${this.events.length} events over ${(timespan / 1000).toFixed(1)}s`,\n                detectedIssues,\n                recommendations,\n                suspiciousPatterns,\n            },\n\n            timeline,\n        };\n    }\n\n    /**\n     * Exports telemetry data in AI-optimized format with instructions\n     * @param textareaRef Reference to the textarea element\n     * @param currentValue Current React state value\n     * @param textareaHeight Current textarea height\n     * @param highlights Current highlights configuration\n     * @param lineHighlights Current line highlights configuration\n     * @returns JSON string containing debug report and AI instructions\n     */\n    exportForAI(\n        textareaRef: React.RefObject<HTMLTextAreaElement | null>,\n        currentValue: string | undefined,\n        textareaHeight: number | undefined,\n        highlights: unknown[],\n        lineHighlights: Record<number, string>,\n    ): string {\n        const report = this.generateAIReport(textareaRef, currentValue, textareaHeight, highlights, lineHighlights);\n\n        return JSON.stringify(\n            {\n                aiInstructions: {\n                    commonIssues: {\n                        rapidEvents: 'Events firing <5ms apart - possible race condition or double-bound handlers',\n                        resizeLoop: 'Excessive resize operations - likely infinite ResizeObserver loop',\n                        stateMismatch:\n                            'DOM value differs from React state - likely caused by multiple onChange handlers or direct DOM manipulation',\n                    },\n                    keyFields: {\n                        'events[].anomalies': 'Issues detected at each event',\n                        'events[].stateSnapshot': 'Full state at each event for comparison',\n                        finalState: 'Current state at time of export',\n                        'summary.detectedIssues': 'Automatically detected problems, sorted by severity',\n                        'timeline.stateChanges': 'Chronological view of all state mutations',\n                    },\n                    purpose:\n                        'This is a debug report from the DyeLight React component. ' +\n                        'A textarea with highlighting overlay is experiencing synchronization issues.',\n                    yourTask: [\n                        '1. Review the summary.detectedIssues for critical problems',\n                        '2. Examine timeline.stateChanges for unexpected state transitions',\n                        '3. Look for patterns in events where stateSnapshot.valuesMatch is false',\n                        '4. Check for rapid events (<5ms apart) that might indicate race conditions',\n                        '5. Identify the root cause and suggest specific code fixes',\n                    ],\n                },\n                debugReport: report,\n            },\n            null,\n            2,\n        );\n    }\n\n    /**\n     * Clears all recorded events and issue registry\n     */\n    clear() {\n        this.events = [];\n        this.issueRegistry.clear();\n        this.lastEventTimestamp = null;\n    }\n}\n","import type React from 'react';\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';\nimport { useAutoResize } from './hooks/useAutoResize';\nimport { useHighlightedContent } from './hooks/useHighlightedContent';\nimport { useHighlightSync } from './hooks/useHighlightSync';\nimport { useTextareaValue } from './hooks/useTextareaValue';\nimport { DEFAULT_BASE_STYLE, DEFAULT_CONTAINER_STYLE, DEFAULT_HIGHLIGHT_LAYER_STYLE } from './styles';\nimport { AIOptimizedTelemetry } from './telemetry';\nimport { isColorValue } from './textUtils';\nimport type { DyeLightProps, DyeLightRef } from './types';\n\n/**\n * @fileoverview DyeLight - A React textarea component with advanced text highlighting capabilities\n *\n * This component provides a textarea with overlay-based text highlighting that supports:\n * - Character-level highlighting using absolute text positions\n * - Line-level highlighting with CSS classes or color values\n * - Automatic height adjustment based on content\n * - Synchronized scrolling between textarea and highlight layer\n * - Both controlled and uncontrolled usage patterns\n * - RTL text direction support\n */\n\n/**\n * Creates a line element with optional highlighting\n */\nexport const createLineElement = (\n    content: React.ReactNode,\n    lineIndex: number,\n    lineHighlight?: string,\n): React.ReactElement => {\n    if (!lineHighlight) {\n        return <div key={lineIndex}>{content}</div>;\n    }\n\n    const isColor = isColorValue(lineHighlight);\n    return (\n        <div\n            className={isColor ? undefined : lineHighlight}\n            key={lineIndex}\n            style={isColor ? { backgroundColor: lineHighlight } : undefined}\n        >\n            {content}\n        </div>\n    );\n};\n\n/**\n * Renders a single line with character-level highlights and optional line-level highlighting\n */\nexport const renderHighlightedLine = (\n    line: string,\n    lineIndex: number,\n    ranges: Array<{\n        absoluteStart: number;\n        className?: string;\n        end: number;\n        start: number;\n        style?: React.CSSProperties;\n    }>,\n    lineHighlight?: string,\n): React.ReactElement => {\n    if (ranges.length === 0) {\n        const content = line || '\\u00A0';\n        return createLineElement(content, lineIndex, lineHighlight);\n    }\n\n    const sortedRanges = ranges.toSorted((a, b) => a.start - b.start);\n\n    const result: React.ReactNode[] = [];\n    let lastIndex = 0;\n\n    sortedRanges.forEach((range, idx) => {\n        const { className, end, start, style: rangeStyle } = range;\n\n        const clampedStart = Math.max(0, Math.min(start, line.length));\n        const clampedEnd = Math.max(clampedStart, Math.min(end, line.length));\n\n        if (clampedEnd <= lastIndex) {\n            return;\n        }\n\n        const effectiveStart = Math.max(clampedStart, lastIndex);\n\n        if (effectiveStart > lastIndex) {\n            const textBefore = line.slice(lastIndex, effectiveStart);\n            if (textBefore) {\n                result.push(textBefore);\n            }\n        }\n\n        if (clampedEnd > effectiveStart) {\n            const highlightedText = line.slice(effectiveStart, clampedEnd);\n            result.push(\n                <span\n                    className={className}\n                    key={`highlight-${lineIndex}-${idx.toString()}`}\n                    style={rangeStyle}\n                    data-range-start={range.absoluteStart}\n                >\n                    {highlightedText}\n                </span>,\n            );\n        }\n\n        lastIndex = Math.max(lastIndex, clampedEnd);\n    });\n\n    if (lastIndex < line.length) {\n        const textAfter = line.slice(lastIndex);\n        if (textAfter) {\n            result.push(textAfter);\n        }\n    }\n\n    const content = result.length === 0 ? '\\u00A0' : result;\n    return createLineElement(content, lineIndex, lineHighlight);\n};\n\n/**\n * A textarea component with support for highlighting character ranges using absolute positions\n * and optional line-level highlighting. Perfect for syntax highlighting, error indication,\n * and text annotation without the complexity of line-based positioning.\n */\nexport const DyeLight = forwardRef<DyeLightRef, DyeLightProps>(\n    (\n        {\n            className = '',\n            containerClassName = '',\n            defaultValue = '',\n            dir = 'ltr',\n            enableAutoResize = true,\n            highlights = [],\n            lineHighlights = {},\n            onChange,\n            rows = 4,\n            style,\n            value,\n            debug = false,\n            debugMaxEvents = 1000,\n            ...props\n        },\n        ref,\n    ) => {\n        const containerRef = useRef<HTMLDivElement>(null);\n        const textareaHeightRef = useRef<number | undefined>(undefined);\n\n        const telemetry = useMemo(() => new AIOptimizedTelemetry(debug, debugMaxEvents), [debug, debugMaxEvents]);\n\n        useEffect(() => {\n            telemetry.setEnabled(debug);\n        }, [debug, telemetry]);\n\n        const isControlled = value !== undefined;\n        const getHeight = useCallback(() => textareaHeightRef.current, []);\n\n        const { currentValue, handleChange, setValue, textareaRef } = useTextareaValue(\n            value,\n            defaultValue,\n            onChange,\n            telemetry,\n            undefined,\n            getHeight,\n        );\n\n        const getCurrentValue = useCallback(() => currentValue, [currentValue]);\n\n        const { handleAutoResize, textareaHeight } = useAutoResize(\n            enableAutoResize,\n            telemetry,\n            textareaRef,\n            getCurrentValue,\n            isControlled,\n        );\n\n        useEffect(() => {\n            textareaHeightRef.current = textareaHeight;\n        }, [textareaHeight]);\n\n        const { highlightLayerRef, syncScroll, syncStyles } = useHighlightSync(\n            telemetry,\n            textareaRef,\n            getCurrentValue,\n            getHeight,\n            isControlled,\n        );\n\n        const highlightedContent = useHighlightedContent(\n            currentValue,\n            highlights,\n            lineHighlights,\n            renderHighlightedLine,\n        );\n\n        const handleChangeWithResize = useCallback(\n            (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n                handleChange(e);\n                handleAutoResize(e.target);\n            },\n            [handleChange, handleAutoResize],\n        );\n\n        const setValueWithResize = useCallback(\n            (newValue: string) => {\n                setValue(newValue);\n                if (textareaRef.current) {\n                    handleAutoResize(textareaRef.current);\n                }\n            },\n            [setValue, handleAutoResize, textareaRef],\n        );\n\n        useEffect(() => {}, []);\n\n        const handleScroll = useCallback(() => {\n            syncScroll(textareaRef);\n        }, [syncScroll, textareaRef]);\n\n        useEffect(() => {\n            if (!debug) {\n                return;\n            }\n\n            const intervalId = setInterval(() => {\n                telemetry.record('snapshot', 'system', {}, textareaRef, currentValue, textareaHeight, isControlled);\n            }, 1000);\n\n            return () => clearInterval(intervalId);\n        }, [debug, telemetry, textareaRef, currentValue, textareaHeight, isControlled]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                blur: () => textareaRef.current?.blur(),\n                exportForAI: () => {\n                    return telemetry.exportForAI(textareaRef, currentValue, textareaHeight, highlights, lineHighlights);\n                },\n                focus: () => textareaRef.current?.focus(),\n                getValue: () => currentValue,\n                scrollToPosition: (pos: number, offset = 40, behavior: ScrollBehavior = 'auto') => {\n                    if (highlightLayerRef.current && textareaRef.current) {\n                        const span = highlightLayerRef.current.querySelector(`[data-range-start=\"${pos.toString()}\"]`);\n                        if (span instanceof HTMLElement) {\n                            const textarea = textareaRef.current;\n                            const spanTop = span.offsetTop;\n                            if (behavior === 'smooth') {\n                                textarea.scrollTo({ behavior: 'smooth', top: spanTop - offset });\n                            } else {\n                                textarea.scrollTop = spanTop - offset;\n                            }\n                        }\n                    }\n                },\n                select: () => textareaRef.current?.select(),\n                setSelectionRange: (start: number, end: number) => textareaRef.current?.setSelectionRange(start, end),\n                setValue: setValueWithResize,\n            }),\n            [\n                currentValue,\n                setValueWithResize,\n                highlightLayerRef,\n                textareaRef,\n                telemetry,\n                textareaHeight,\n                highlights,\n                lineHighlights,\n            ],\n        );\n\n        useEffect(() => {\n            if (textareaRef.current && enableAutoResize) {\n                handleAutoResize(textareaRef.current);\n            }\n            syncStyles(textareaRef);\n        }, [currentValue, handleAutoResize, enableAutoResize, syncStyles, textareaRef]);\n\n        useEffect(() => {\n            if (!textareaRef.current) {\n                return;\n            }\n\n            const textarea = textareaRef.current;\n            let rafId: number;\n\n            const observer = new ResizeObserver(() => {\n                cancelAnimationFrame(rafId);\n                rafId = requestAnimationFrame(() => {\n                    syncStyles(textareaRef);\n                    if (enableAutoResize) {\n                        handleAutoResize(textarea);\n                    }\n                });\n            });\n\n            observer.observe(textarea);\n            return () => {\n                observer.disconnect();\n                cancelAnimationFrame(rafId);\n            };\n        }, [textareaRef, syncStyles, handleAutoResize, enableAutoResize]);\n\n        const baseTextareaStyle: React.CSSProperties = {\n            ...DEFAULT_BASE_STYLE,\n            color: currentValue ? 'transparent' : 'inherit',\n            height: textareaHeight ? `${textareaHeight}px` : undefined,\n            resize: enableAutoResize ? 'none' : 'vertical',\n        };\n\n        const highlightLayerStyle: React.CSSProperties = {\n            ...DEFAULT_HIGHLIGHT_LAYER_STYLE,\n            direction: dir,\n            height: textareaHeight ? `${textareaHeight}px` : undefined,\n            padding: textareaRef.current ? getComputedStyle(textareaRef.current).padding : '8px 12px',\n        };\n\n        return (\n            <div className={containerClassName} ref={containerRef} style={{ ...DEFAULT_CONTAINER_STYLE, ...style }}>\n                <div aria-hidden=\"true\" ref={highlightLayerRef} style={highlightLayerStyle}>\n                    {highlightedContent}\n                </div>\n\n                <textarea\n                    className={className}\n                    dir={dir}\n                    onChange={handleChangeWithResize}\n                    onScroll={handleScroll}\n                    ref={textareaRef}\n                    rows={rows}\n                    style={baseTextareaStyle}\n                    value={currentValue}\n                    {...props}\n                />\n            </div>\n        );\n    },\n);\n\nDyeLight.displayName = 'DyeLight';\n"],"mappings":"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"}

package/package.json

@@ -4,18 +4,18 @@
     },
     "description": "A lightweight TypeScript React component to allow highlighting characters in textareas.",
     "devDependencies": {
-        "@biomejs/biome": "^2.3.11",
-        "@storybook/addon-docs": "^10.1.11",
-        "@storybook/react-vite": "^10.1.11",
+        "@biomejs/biome": "^2.3.13",
+        "@storybook/addon-docs": "^10.2.0",
+        "@storybook/react-vite": "^10.2.0",
         "@testing-library/dom": "^10.4.1",
-        "@testing-library/react": "^16.3.1",
+        "@testing-library/react": "^16.3.2",
         "@types/bun": "^1.3.6",
-        "@types/react": "^19.2.8",
+        "@types/react": "^19.2.9",
         "@types/react-dom": "^19.2.3",
         "semantic-release": "^25.0.2",
-        "storybook": "^10.1.11",
-        "tsdown": "^0.20.0-beta.3",
-        "vite-tsconfig-paths": "^6.0.4"
+        "storybook": "^10.2.0",
+        "tsdown": "^0.20.1",
+        "vite-tsconfig-paths": "^6.0.5"
     },
     "engines": {
         "bun": ">=1.3.6",
@@ -45,8 +45,8 @@
     "name": "dyelight",
     "packageManager": "bun@1.3.6",
     "peerDependencies": {
-        "react": "^19.2.3",
-        "react-dom": "^19.2.3"
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4"
     },
     "repository": {
         "type": "git",
@@ -61,5 +61,5 @@
     },
     "type": "module",
     "types": "./dist/index.d.mts",
-    "version": "1.1.2"
+    "version": "1.2.0"
 }