dyelight 1.0.1 → 1.0.3

package/README.md

@@ -3,6 +3,7 @@
 A lightweight TypeScript React component for highlighting characters in textareas with powerful text annotation capabilities.
 
 [![wakatime](https://wakatime.com/badge/user/a0b906ce-b8e7-4463-8bce-383238df6d4b/project/897368ef-62b9-48be-bba9-7c530f10e3da.svg)](https://wakatime.com/badge/user/a0b906ce-b8e7-4463-8bce-383238df6d4b/project/897368ef-62b9-48be-bba9-7c530f10e3da)
+[![codecov](https://codecov.io/gh/ragaeeb/dyelight/graph/badge.svg?token=7VETE1WNMP)](https://codecov.io/gh/ragaeeb/dyelight)
 ![Bun](https://img.shields.io/badge/Bun-%23000000.svg?style=for-the-badge&logo=bun&logoColor=white)
 [![Node.js CI](https://github.com/ragaeeb/dyelight/actions/workflows/build.yml/badge.svg)](https://github.com/ragaeeb/dyelight/actions/workflows/build.yml)
 ![GitHub License](https://img.shields.io/github/license/ragaeeb/dyelight)

package/dist/index.d.ts

@@ -331,4 +331,11 @@ type DyeLightRef = {
     setValue: (value: string) => void;
 };
 
-export { type CharacterRange, type DyeLightProps, type DyeLightRef, HighlightBuilder, autoResize };
+/**
+ * A textarea component with support for highlighting character ranges using absolute positions
+ * and optional line-level highlighting. Perfect for syntax highlighting, error indication,
+ * and text annotation without the complexity of line-based positioning.
+ */
+declare const DyeLight: React.ForwardRefExoticComponent<DyeLightProps & React.RefAttributes<DyeLightRef>>;
+
+export { type CharacterRange, DyeLight, type DyeLightProps, type DyeLightRef, HighlightBuilder, autoResize };

package/dist/index.js

@@ -1,3 +1,3 @@
-import"react";var J={characters:e=>e.map(({className:r,index:t,style:n})=>({className:r,end:t+1,start:t,style:n})),lines:e=>{let r={};return e.forEach(({className:t,color:n,line:i})=>{r[i]=t||n||""}),r},pattern:(e,r,t,n)=>{let i=typeof r=="string"?new RegExp(r,"g"):new RegExp(r.source,"g");return Array.from(e.matchAll(i)).map(c=>({className:t,end:c.index+c[0].length,start:c.index,style:n}))},ranges:e=>e.map(({className:r,end:t,start:n,style:i})=>({className:r,end:t,start:n,style:i})),selection:(e,r,t,n)=>[{className:t,end:r,start:e,style:n}],words:(e,r,t,n)=>{let i=new RegExp(`\\b(${r.join("|")})\\b`,"g");return J.pattern(e,i,t,n)}};var I=e=>{e.style.height="auto",e.style.height=`${e.scrollHeight}px`};import{forwardRef as K,useCallback as T,useEffect as Q,useImperativeHandle as X,useMemo as Z,useRef as P,useState as $}from"react";import"react";var V={display:"block",position:"relative",width:"100%"},z={background:"transparent",boxSizing:"border-box",caretColor:"#000000",color:"transparent",minHeight:"auto",position:"relative",width:"100%",zIndex:2},F={border:"transparent solid 1px",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 k=e=>{let r=e.split(`
-`),t=[],n=0;return r.forEach((i,l)=>{t.push(n),n+=i.length+(l<r.length-1?1:0)}),{lines:r,lineStarts:t}},N=(e,r)=>{for(let t=r.length-1;t>=0;t--)if(e>=r[t])return{char:e-r[t],line:t};return{char:0,line:0}},Y=e=>/^(#|rgb|hsl|var\(--.*?\)|transparent|currentColor|inherit|initial|unset)/i.test(e)||/^[a-z]+$/i.test(e);import{jsx as R,jsxs as re}from"react/jsx-runtime";var U=(e,r,t)=>{if(!t)return R("div",{children:e},r);let n=Y(t);return R("div",{className:n?void 0:t,style:n?{backgroundColor:t}:void 0,children:e},r)},ee=(e,r,t,n)=>{if(t.length===0)return U(e||"\xA0",r,n);let i=t.toSorted((g,u)=>g.start-u.start),l=[],c=0;if(i.forEach((g,u)=>{let{className:A,end:v,start:o,style:d}=g,h=Math.max(0,Math.min(o,e.length)),x=Math.max(h,Math.min(v,e.length));if(h>c){let f=e.slice(c,h);f&&l.push(f)}if(x>h){let f=e.slice(h,x);l.push(R("span",{className:A,style:d,children:f},`highlight-${r}-${u}`))}c=Math.max(c,x)}),c<e.length){let g=e.slice(c);g&&l.push(g)}let C=l.length===0?"\xA0":l;return U(C,r,n)},te=K(({className:e="",defaultValue:r="",dir:t="ltr",enableAutoResize:n=!0,highlights:i=[],lineHighlights:l={},onChange:c,rows:C=4,style:g,value:u,...A},v)=>{let o=P(null),d=P(null),h=P(null),[x,f]=$(u??r),[L,B]=$(),y=u!==void 0?u:x,S=T(s=>{n&&(I(s),B(s.scrollHeight))},[n]),G=T(s=>{let a=s.target.value;u===void 0&&f(a),c?.(a),S(s.target)},[u,c,S]),O=T(()=>{if(o.current&&d.current){let{scrollLeft:s,scrollTop:a}=o.current;d.current.scrollTop=a,d.current.scrollLeft=s}},[]),w=T(()=>{if(!o.current||!d.current)return;let s=getComputedStyle(o.current),a=d.current;a.style.padding=s.padding,a.style.fontSize=s.fontSize,a.style.fontFamily=s.fontFamily,a.style.lineHeight=s.lineHeight,a.style.letterSpacing=s.letterSpacing,a.style.wordSpacing=s.wordSpacing,a.style.textIndent=s.textIndent},[]);X(v,()=>({blur:()=>o.current?.blur(),focus:()=>o.current?.focus(),getValue:()=>y,select:()=>o.current?.select(),setSelectionRange:(s,a)=>o.current?.setSelectionRange(s,a),setValue:s=>{u===void 0&&f(s),o.current&&(o.current.value=s,S(o.current))}}),[y,u,S]),Q(()=>{o.current&&n&&S(o.current),w()},[y,S,n,w]);let W=Z(()=>{let{lines:s,lineStarts:a}=k(y),E={};return i.forEach(m=>{let b=N(m.start,a),H=N(m.end-1,a);for(let p=b.line;p<=H.line;p++){E[p]||(E[p]=[]);let D=a[p],M=Math.max(m.start-D,0),_=Math.min(m.end-D,s[p].length);_>M&&E[p].push({className:m.className,end:_,start:M,style:m.style})}}),s.map((m,b)=>{let H=l[b],p=E[b]||[];return ee(m,b,p,H)})},[y,i,l]),j={...z,height:L?`${L}px`:void 0,resize:n?"none":"vertical"},q={...F,direction:t,height:L?`${L}px`:void 0,padding:o.current?getComputedStyle(o.current).padding:"8px 12px"};return re("div",{ref:h,style:{...V,...g},children:[R("div",{"aria-hidden":"true",ref:d,style:q,children:W}),R("textarea",{className:e,dir:t,onChange:G,onScroll:O,ref:o,rows:C,style:j,value:y,...A})]})});te.displayName="DyeLight";import"react";export{J as HighlightBuilder,I as autoResize};
+import"react";var J={characters:e=>e.map(({className:n,index:t,style:r})=>({className:n,end:t+1,start:t,style:r})),lines:e=>{let n={};return e.forEach(({className:t,color:r,line:s})=>{n[s]=t||r||""}),n},pattern:(e,n,t,r)=>{let s=typeof n=="string"?new RegExp(n,"g"):new RegExp(n.source,"g");return Array.from(e.matchAll(s)).map(a=>({className:t,end:a.index+a[0].length,start:a.index,style:r}))},ranges:e=>e.map(({className:n,end:t,start:r,style:s})=>({className:n,end:t,start:r,style:s})),selection:(e,n,t,r)=>[{className:t,end:n,start:e,style:r}],words:(e,n,t,r)=>{let s=new RegExp(`\\b(${n.join("|")})\\b`,"g");return J.pattern(e,s,t,r)}};var N=e=>{e.style.height="auto",e.style.height=`${e.scrollHeight}px`};import{forwardRef as re,useCallback as T,useEffect as ne,useImperativeHandle as se,useRef as oe}from"react";import{useCallback as K,useState as Q}from"react";var M=e=>{let[n,t]=Q();return{handleAutoResize:K(s=>{e&&(N(s),t(s.scrollHeight))},[e]),textareaHeight:n}};import{useMemo as X}from"react";var P=e=>{let n=e.split(`
+`),t=[],r=0;return n.forEach((s,i)=>{t.push(r),r+=s.length+(i<n.length-1?1:0)}),{lines:n,lineStarts:t}},L=(e,n)=>{for(let t=n.length-1;t>=0;t--)if(e>=n[t])return{char:e-n[t],line:t};return{char:0,line:0}},I=e=>/^(#|rgb|hsl|var\(--.*?\)|transparent|currentColor|inherit|initial|unset)/i.test(e)||/^[a-z]+$/i.test(e);var V=(e,n,t,r)=>X(()=>{let{lines:i,lineStarts:a}=P(e),m={};return n.forEach(c=>{let g=L(c.start,a),h=L(c.end-1,a);for(let o=g.line;o<=h.line;o++){m[o]||(m[o]=[]);let l=a[o],p=Math.max(c.start-l,0),d=Math.min(c.end-l,i[o].length);d>p&&m[o].push({className:c.className,end:d,start:p,style:c.style})}}),i.map((c,g)=>{let h=t[g],o=m[g]||[];return r(c,g,o,h)})},[e,n,t,r]);import{useCallback as w,useRef as Z}from"react";var D=()=>{let e=Z(null),n=w(r=>{if(r.current&&e.current){let{scrollLeft:s,scrollTop:i}=r.current;e.current.scrollTop=i,e.current.scrollLeft=s}},[]),t=w(r=>{if(!r.current||!e.current)return;let s=getComputedStyle(r.current),i=e.current;i.style.padding=s.padding,i.style.fontSize=s.fontSize,i.style.fontFamily=s.fontFamily,i.style.lineHeight=s.lineHeight,i.style.letterSpacing=s.letterSpacing,i.style.wordSpacing=s.wordSpacing,i.style.textIndent=s.textIndent},[]);return{highlightLayerRef:e,syncScroll:n,syncStyles:t}};import{useCallback as E,useEffect as C,useRef as ee,useState as te}from"react";var z=(e,n="",t)=>{let r=ee(null),[s,i]=te(e??n),a=e!==void 0?e:s,m=E(()=>{if(r.current){let o=r.current.value;o!==a&&(e===void 0&&i(o),t?.(o))}},[a,e,t]),c=E(o=>{let l=o.target.value;e===void 0&&i(l),t?.(l)},[e,t]),g=E(o=>{let l=o.currentTarget.value;l!==a&&(e===void 0&&i(l),t?.(l))},[a,e,t]),h=E(o=>{r.current&&(r.current.value=o,e===void 0&&i(o),t?.(o))},[e,t]);return C(()=>{m()},[m]),C(()=>{e!==void 0&&r.current&&r.current.value!==e&&(r.current.value=e)},[e]),C(()=>{let o=r.current;if(!o)return;let l=new MutationObserver(()=>{m()});l.observe(o,{attributeFilter:["value"],attributes:!0});let p=setInterval(()=>{o.value!==a&&m()},100);return()=>{l.disconnect(),clearInterval(p)}},[a,m]),{currentValue:a,handleChange:c,handleInput:g,setValue:h,textareaRef:r}};import"react";var _={display:"block",position:"relative",width:"100%"},F={background:"transparent",boxSizing:"border-box",caretColor:"#000000",color:"transparent",minHeight:"auto",position:"relative",width:"100%",zIndex:2},k={border:"transparent solid 1px",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};import{jsx as b,jsxs as ce}from"react/jsx-runtime";var Y=(e,n,t)=>{if(!t)return b("div",{children:e},n);let r=I(t);return b("div",{className:r?void 0:t,style:r?{backgroundColor:t}:void 0,children:e},n)},ie=(e,n,t,r)=>{if(t.length===0)return Y(e||"\xA0",n,r);let s=t.toSorted((c,g)=>c.start-g.start),i=[],a=0;if(s.forEach((c,g)=>{let{className:h,end:o,start:l,style:p}=c,d=Math.max(0,Math.min(l,e.length)),S=Math.max(d,Math.min(o,e.length));if(d>a){let R=e.slice(a,d);R&&i.push(R)}if(S>d){let R=e.slice(d,S);i.push(b("span",{className:h,style:p,children:R},`highlight-${n}-${g}`))}a=Math.max(a,S)}),a<e.length){let c=e.slice(a);c&&i.push(c)}let m=i.length===0?"\xA0":i;return Y(m,n,r)},ae=re(({className:e="",defaultValue:n="",dir:t="ltr",enableAutoResize:r=!0,highlights:s=[],lineHighlights:i={},onChange:a,rows:m=4,style:c,value:g,...h},o)=>{let l=oe(null),{currentValue:p,handleChange:d,handleInput:S,setValue:R,textareaRef:u}=z(g,n,a),{handleAutoResize:y,textareaHeight:x}=M(r),{highlightLayerRef:O,syncScroll:A,syncStyles:v}=D(),$=V(p,s,i,ie),U=T(f=>{d(f),y(f.target)},[d,y]),B=T(f=>{S(f),y(f.currentTarget)},[S,y]),H=T(f=>{R(f),u.current&&y(u.current)},[R,y,u]),W=T(()=>{A(u)},[A,u]);se(o,()=>({blur:()=>u.current?.blur(),focus:()=>u.current?.focus(),getValue:()=>p,select:()=>u.current?.select(),setSelectionRange:(f,q)=>u.current?.setSelectionRange(f,q),setValue:H}),[p,H]),ne(()=>{u.current&&r&&y(u.current),v(u)},[p,y,r,v,u]);let G={...F,height:x?`${x}px`:void 0,resize:r?"none":"vertical"},j={...k,direction:t,height:x?`${x}px`:void 0,padding:u.current?getComputedStyle(u.current).padding:"8px 12px"};return ce("div",{ref:l,style:{..._,...c},children:[b("div",{"aria-hidden":"true",ref:O,style:j,children:$}),b("textarea",{className:e,dir:t,onChange:U,onInput:B,onScroll:W,ref:u,rows:m,style:G,value:p,...h})]})});ae.displayName="DyeLight";import"react";export{ae as DyeLight,J as HighlightBuilder,N as autoResize};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/builder.ts","../src/domUtils.ts","../src/DyeLight.tsx","../src/styles.ts","../src/textUtils.ts","../src/types.ts"],"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 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 }) => ({\n            className,\n            end: index + 1,\n            start: index,\n            style,\n        }));\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) => ({\n            className,\n            end: match.index! + match[0].length,\n            start: match.index!,\n            style,\n        }));\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 }) => ({\n            className,\n            end,\n            start,\n            style,\n        }));\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    // Reset height to auto to allow shrinking\n    textArea.style.height = 'auto';\n    // Set height to scroll height to fit content\n    textArea.style.height = `${textArea.scrollHeight}px`;\n};\n","import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\n\nimport type { DyeLightProps, DyeLightRef } from './types';\n\nimport { autoResize } from './domUtils';\nimport { DEFAULT_BASE_STYLE, DEFAULT_CONTAINER_STYLE, DEFAULT_HIGHLIGHT_LAYER_STYLE } from './styles';\nimport { absoluteToLinePos, getLinePositions, isColorValue } from './textUtils';\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 * @param content - The content to render inside the line element\n * @param lineIndex - The index of the line for React key prop\n * @param lineHighlight - Optional CSS class name or color value for line highlighting\n * @returns A React div element with the line content and optional highlighting\n */\nconst createLineElement = (content: React.ReactNode, lineIndex: number, lineHighlight?: string): 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 * @param line - The text content of the line\n * @param lineIndex - The index of the line for React key prop\n * @param ranges - Array of character ranges to highlight within the line\n * @param lineHighlight - Optional CSS class name or color value for line highlighting\n * @returns A React element representing the highlighted line\n */\nconst renderHighlightedLine = (\n    line: string,\n    lineIndex: number,\n    ranges: Array<{ className?: string; end: number; start: number; style?: React.CSSProperties }>,\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 className={className} key={`highlight-${lineIndex}-${idx}`} style={rangeStyle}>\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 *\n * Features:\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 * - Support for both controlled and uncontrolled usage\n * - Accessibility-friendly with proper ARIA attributes\n * - RTL text direction support\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   const [text, setText] = useState('Hello world\\nSecond line');\n *\n *   // Highlight characters 0-5 (absolute positions)\n *   const highlights = HighlightBuilder.ranges([\n *     { start: 0, end: 5, className: 'bg-yellow-200' },\n *     { start: 12, end: 18, className: 'bg-blue-200' }\n *   ]);\n *\n *   // Highlight keywords automatically\n *   const keywordHighlights = HighlightBuilder.pattern(\n *     text,\n *     /\\b(function|const|let)\\b/g,\n *     'text-blue-600'\n *   );\n *\n *   // Optional line highlights\n *   const lineHighlights = HighlightBuilder.lines([\n *     { line: 1, className: 'bg-red-100' }\n *   ]);\n *\n *   return (\n *     <DyeLight\n *       value={text}\n *       onChange={setText}\n *       highlights={[...highlights, ...keywordHighlights]}\n *       lineHighlights={lineHighlights}\n *     />\n *   );\n * };\n * ```\n */\nconst DyeLight = forwardRef<DyeLightRef, DyeLightProps>(\n    (\n        {\n            className = '',\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 textareaRef = useRef<HTMLTextAreaElement>(null);\n        const highlightLayerRef = useRef<HTMLDivElement>(null);\n        const containerRef = useRef<HTMLDivElement>(null);\n\n        const [internalValue, setInternalValue] = useState(value ?? defaultValue);\n        const [textareaHeight, setTextareaHeight] = useState<number | undefined>();\n\n        const currentValue = value !== undefined ? value : internalValue;\n\n        /**\n         * Handles automatic resizing of the textarea based on content\n         * @param element - The textarea element to resize\n         */\n        const handleAutoResize = useCallback(\n            (element: HTMLTextAreaElement) => {\n                if (!enableAutoResize) return;\n\n                autoResize(element);\n                setTextareaHeight(element.scrollHeight);\n            },\n            [enableAutoResize],\n        );\n\n        /**\n         * Handles textarea value changes and triggers auto-resize if enabled\n         * @param e - The change event from the textarea\n         */\n        const handleChange = useCallback(\n            (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n                const newValue = e.target.value;\n\n                if (value === undefined) {\n                    setInternalValue(newValue);\n                }\n\n                onChange?.(newValue);\n                handleAutoResize(e.target);\n            },\n            [value, onChange, handleAutoResize],\n        );\n\n        /**\n         * Synchronizes scroll position between textarea and highlight layer\n         */\n        const syncScroll = useCallback(() => {\n            if (textareaRef.current && highlightLayerRef.current) {\n                const { scrollLeft, scrollTop } = textareaRef.current;\n                highlightLayerRef.current.scrollTop = scrollTop;\n                highlightLayerRef.current.scrollLeft = scrollLeft;\n            }\n        }, []);\n\n        /**\n         * Synchronizes computed styles from textarea to highlight layer\n         * Ensures font, padding, and spacing properties match exactly\n         */\n        const syncStyles = useCallback(() => {\n            if (!textareaRef.current || !highlightLayerRef.current) return;\n\n            const computedStyle = getComputedStyle(textareaRef.current);\n            const highlightLayer = highlightLayerRef.current;\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\n        useImperativeHandle(\n            ref,\n            () => ({\n                blur: () => textareaRef.current?.blur(),\n                focus: () => textareaRef.current?.focus(),\n                getValue: () => currentValue,\n                select: () => textareaRef.current?.select(),\n                setSelectionRange: (start: number, end: number) => textareaRef.current?.setSelectionRange(start, end),\n                setValue: (newValue: string) => {\n                    if (value === undefined) {\n                        setInternalValue(newValue);\n                    }\n                    if (textareaRef.current) {\n                        textareaRef.current.value = newValue;\n                        handleAutoResize(textareaRef.current);\n                    }\n                },\n            }),\n            [currentValue, value, handleAutoResize],\n        );\n\n        useEffect(() => {\n            if (textareaRef.current && enableAutoResize) {\n                handleAutoResize(textareaRef.current);\n            }\n            syncStyles();\n        }, [currentValue, handleAutoResize, enableAutoResize, syncStyles]);\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            const { lines, lineStarts } = getLinePositions(currentValue);\n\n            // Group highlights by line\n            const highlightsByLine: {\n                [lineIndex: number]: Array<{\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                // Handle highlights that span multiple lines\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                    // Calculate highlight range within this line\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                            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        }, [currentValue, highlights, lineHighlights]);\n\n        const baseTextareaStyle: React.CSSProperties = {\n            ...DEFAULT_BASE_STYLE,\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 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={handleChange}\n                    onScroll={syncScroll}\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\nexport default DyeLight;\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 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 */\n    border: 'transparent solid 1px',\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 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 { lines, lineStarts };\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 {\n                char: absolutePos - lineStarts[i],\n                line: i,\n            };\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","/**\n * @fileoverview Type definitions for the DyeLight component\n *\n * This module contains all TypeScript type definitions used by the DyeLight\n * component, including props interfaces, ref methods, and highlight configurations.\n * These types provide comprehensive type safety and IntelliSense support.\n */\n\nimport React from 'react';\n\n/**\n * Represents a character range to highlight in the entire text using absolute positions\n * @example\n * ```tsx\n * const highlight: CharacterRange = {\n *   start: 0,\n *   end: 5,\n *   className: 'highlight-keyword',\n *   style: { backgroundColor: 'yellow', fontWeight: 'bold' }\n * };\n * ```\n */\nexport type CharacterRange = {\n    /** Optional CSS class name to apply to the highlighted range */\n    className?: string;\n    /** Zero-based end index in the entire text (exclusive) */\n    end: number;\n    /** Zero-based start index in the entire text (inclusive) */\n    start: number;\n    /** Optional inline styles to apply to the highlighted range */\n    style?: React.CSSProperties;\n};\n\n/**\n * Props for the DyeLight component\n * Extends standard textarea props while replacing onChange with a simplified version\n * @example\n * ```tsx\n * const MyEditor = () => {\n *   const [code, setCode] = useState('const x = 1;');\n *\n *   const highlights = HighlightBuilder.pattern(\n *     code,\n *     /\\b(const|let|var)\\b/g,\n *     'keyword-highlight'\n *   );\n *\n *   const lineHighlights = HighlightBuilder.lines([\n *     { line: 0, className: 'current-line' }\n *   ]);\n *\n *   return (\n *     <DyeLight\n *       value={code}\n *       onChange={setCode}\n *       highlights={highlights}\n *       lineHighlights={lineHighlights}\n *       enableAutoResize={true}\n *       rows={10}\n *       className=\"my-editor\"\n *       placeholder=\"Enter your code here...\"\n *     />\n *   );\n * };\n * ```\n */\nexport interface DyeLightProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {\n    /** CSS class name for the textarea element */\n    className?: string;\n    /** Default value for uncontrolled usage */\n    defaultValue?: string;\n    /** Text direction - supports left-to-right and right-to-left */\n    dir?: 'ltr' | 'rtl';\n    /** Enable automatic height adjustment based on content */\n    enableAutoResize?: boolean;\n    /** Character range highlights using absolute positions in the entire text */\n    highlights?: CharacterRange[];\n    /** Line-level highlights mapped by line number (0-based) to CSS color/class */\n    lineHighlights?: { [lineNumber: number]: string };\n    /** Callback fired when the textarea value changes */\n    onChange?: (value: string) => void;\n    /** Number of visible text lines */\n    rows?: number;\n    /** Controlled value */\n    value?: string;\n}\n\n/**\n * Methods exposed by the DyeLight component through its ref\n * Provides programmatic access to common textarea operations\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   const dyeLightRef = useRef<DyeLightRef>(null);\n *\n *   const handleFocus = () => {\n *     dyeLightRef.current?.focus();\n *   };\n *\n *   const handleGetValue = () => {\n *     const value = dyeLightRef.current?.getValue();\n *     console.log('Current value:', value);\n *   };\n *\n *   return <DyeLight ref={dyeLightRef} />;\n * };\n * ```\n */\nexport type DyeLightRef = {\n    /** Removes focus from the textarea */\n    blur: () => void;\n    /** Sets focus to the textarea */\n    focus: () => void;\n    /** Gets the current value of the textarea */\n    getValue: () => string;\n    /** Selects all text in the textarea */\n    select: () => void;\n    /** Sets the selection range in the textarea */\n    setSelectionRange: (start: number, end: number) => void;\n    /** Sets the value of the textarea programmatically */\n    setValue: (value: string) => void;\n};\n"],"mappings":"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","names":["HighlightBuilder","chars","className","index","style","lines","result","color","line","text","pattern","regex","match","ranges","end","start","words","autoResize","textArea","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","DEFAULT_CONTAINER_STYLE","DEFAULT_BASE_STYLE","DEFAULT_HIGHLIGHT_LAYER_STYLE","getLinePositions","text","lines","lineStarts","position","line","index","absoluteToLinePos","absolutePos","i","isColorValue","value","jsx","jsxs","createLineElement","content","lineIndex","lineHighlight","isColor","isColorValue","renderHighlightedLine","line","ranges","sortedRanges","a","b","result","lastIndex","range","idx","className","end","start","rangeStyle","clampedStart","clampedEnd","textBefore","highlightedText","textAfter","DyeLight","forwardRef","defaultValue","dir","enableAutoResize","highlights","lineHighlights","onChange","rows","style","value","props","ref","textareaRef","useRef","highlightLayerRef","containerRef","internalValue","setInternalValue","useState","textareaHeight","setTextareaHeight","currentValue","handleAutoResize","useCallback","element","autoResize","handleChange","e","newValue","syncScroll","scrollLeft","scrollTop","syncStyles","computedStyle","highlightLayer","useImperativeHandle","useEffect","highlightedContent","useMemo","lines","lineStarts","getLinePositions","highlightsByLine","highlight","startPos","absoluteToLinePos","endPos","lineStart","rangeStart","rangeEnd","baseTextareaStyle","DEFAULT_BASE_STYLE","highlightLayerStyle","DEFAULT_HIGHLIGHT_LAYER_STYLE","DEFAULT_CONTAINER_STYLE"]}
+{"version":3,"sources":["../src/builder.ts","../src/domUtils.ts","../src/DyeLight.tsx","../src/hooks/useAutoResize.ts","../src/hooks/useHighlightedContent.ts","../src/textUtils.ts","../src/hooks/useHighlightSync.ts","../src/hooks/useTextareaValue.ts","../src/styles.ts","../src/types.ts"],"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 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 }) => ({\n            className,\n            end: index + 1,\n            start: index,\n            style,\n        }));\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) => ({\n            className,\n            end: match.index! + match[0].length,\n            start: match.index!,\n            style,\n        }));\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 }) => ({\n            className,\n            end,\n            start,\n            style,\n        }));\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    // Reset height to auto to allow shrinking\n    textArea.style.height = 'auto';\n    // Set height to scroll height to fit content\n    textArea.style.height = `${textArea.scrollHeight}px`;\n};\n","import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport type { DyeLightProps, DyeLightRef } from './types';\n\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';\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 */\nconst createLineElement = (content: React.ReactNode, lineIndex: number, lineHighlight?: string): 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 */\nconst renderHighlightedLine = (\n    line: string,\n    lineIndex: number,\n    ranges: Array<{ className?: string; end: number; start: number; style?: React.CSSProperties }>,\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 className={className} key={`highlight-${lineIndex}-${idx}`} style={rangeStyle}>\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            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, handleInput, setValue, textareaRef } = useTextareaValue(\n            value,\n            defaultValue,\n            onChange,\n        );\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 input handler that includes auto-resize\n        const handleInputWithResize = useCallback(\n            (e: React.FormEvent<HTMLTextAreaElement>) => {\n                handleInput(e);\n                handleAutoResize(e.currentTarget);\n            },\n            [handleInput, 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        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                select: () => textareaRef.current?.select(),\n                setSelectionRange: (start: number, end: number) => textareaRef.current?.setSelectionRange(start, end),\n                setValue: setValueWithResize,\n            }),\n            [currentValue, setValueWithResize],\n        );\n\n        // Sync styles and handle auto-resize on value changes\n        useEffect(() => {\n            if (textareaRef.current && enableAutoResize) {\n                handleAutoResize(textareaRef.current);\n            }\n            syncStyles(textareaRef);\n        }, [currentValue, handleAutoResize, enableAutoResize, syncStyles, textareaRef]);\n\n        // Compute styles\n        const baseTextareaStyle: React.CSSProperties = {\n            ...DEFAULT_BASE_STYLE,\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 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                    onInput={handleInputWithResize}\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","import { useCallback, useState } from 'react';\n\nimport { autoResize } from '@/domUtils';\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) return;\n\n            autoResize(element);\n            setTextareaHeight(element.scrollHeight);\n        },\n        [enableAutoResize],\n    );\n\n    return {\n        handleAutoResize,\n        textareaHeight,\n    };\n};\n","import { useMemo } from 'react';\n\nimport type { CharacterRange } from '@/types';\n\nimport { absoluteToLinePos, getLinePositions } from '@/textUtils';\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<{ className?: string; end: number; start: number; style?: React.CSSProperties }>,\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        const { lines, lineStarts } = getLinePositions(text);\n\n        // Group highlights by line\n        const highlightsByLine: {\n            [lineIndex: number]: Array<{\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            // Handle highlights that span multiple lines\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                // Calculate highlight range within this line\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                        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    }, [text, highlights, lineHighlights, renderHighlightedLine]);\n\n    return highlightedContent;\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 { lines, lineStarts };\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 {\n                char: absolutePos - lineStarts[i],\n                line: i,\n            };\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 { useCallback, useRef } from 'react';\n\n/**\n * Hook for managing highlight layer synchronization\n */\nexport const useHighlightSync = () => {\n    const highlightLayerRef = useRef<HTMLDivElement>(null);\n\n    /**\n     * Synchronizes scroll position between textarea and highlight layer\n     */\n    const syncScroll = useCallback((textareaRef: React.RefObject<HTMLTextAreaElement | null>) => {\n        if (textareaRef.current && highlightLayerRef.current) {\n            const { scrollLeft, scrollTop } = textareaRef.current;\n            highlightLayerRef.current.scrollTop = scrollTop;\n            highlightLayerRef.current.scrollLeft = scrollLeft;\n        }\n    }, []);\n\n    /**\n     * Synchronizes computed styles from textarea to highlight layer\n     */\n    const syncStyles = useCallback((textareaRef: React.RefObject<HTMLTextAreaElement | null>) => {\n        if (!textareaRef.current || !highlightLayerRef.current) return;\n\n        const computedStyle = getComputedStyle(textareaRef.current);\n        const highlightLayer = highlightLayerRef.current;\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\n    return {\n        highlightLayerRef,\n        syncScroll,\n        syncStyles,\n    };\n};\n","import { useCallback, useEffect, useRef, useState } from 'react';\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 currentValue = value !== undefined ? value : internalValue;\n\n    /**\n     * Syncs the current value with the actual DOM value\n     * This is crucial for handling programmatic value changes\n     */\n    const syncValueWithDOM = useCallback(() => {\n        if (textareaRef.current) {\n            const domValue = textareaRef.current.value;\n            if (domValue !== currentValue) {\n                if (value === undefined) {\n                    // Uncontrolled mode - update internal state\n                    setInternalValue(domValue);\n                }\n                // Notify parent of the change\n                onChange?.(domValue);\n            }\n        }\n    }, [currentValue, value, onChange]);\n\n    /**\n     * Handles textarea value changes\n     */\n    const handleChange = useCallback(\n        (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n            const newValue = e.target.value;\n\n            if (value === undefined) {\n                setInternalValue(newValue);\n            }\n\n            onChange?.(newValue);\n        },\n        [value, onChange],\n    );\n\n    /**\n     * Handles input events to catch programmatic changes\n     */\n    const handleInput = useCallback(\n        (e: React.FormEvent<HTMLTextAreaElement>) => {\n            const newValue = e.currentTarget.value;\n\n            // Check if this is a programmatic change (value differs from our state)\n            if (newValue !== currentValue) {\n                if (value === undefined) {\n                    setInternalValue(newValue);\n                }\n                onChange?.(newValue);\n            }\n        },\n        [currentValue, value, onChange],\n    );\n\n    /**\n     * Programmatically sets the textarea value\n     */\n    const setValue = useCallback(\n        (newValue: string) => {\n            if (textareaRef.current) {\n                textareaRef.current.value = newValue;\n\n                // Update internal state\n                if (value === undefined) {\n                    setInternalValue(newValue);\n                }\n\n                // Notify parent\n                onChange?.(newValue);\n            }\n        },\n        [value, onChange],\n    );\n\n    // Sync with DOM value on mount and when external changes occur\n    useEffect(() => {\n        syncValueWithDOM();\n    }, [syncValueWithDOM]);\n\n    // Handle controlled value changes\n    useEffect(() => {\n        if (value !== undefined && textareaRef.current && textareaRef.current.value !== value) {\n            textareaRef.current.value = value;\n        }\n    }, [value]);\n\n    // Use a MutationObserver to detect programmatic value changes\n    useEffect(() => {\n        const textarea = textareaRef.current;\n        if (!textarea) return;\n\n        const observer = new MutationObserver(() => {\n            syncValueWithDOM();\n        });\n\n        // Watch for attribute changes (like value attribute)\n        observer.observe(textarea, {\n            attributeFilter: ['value'],\n            attributes: true,\n        });\n\n        // Also use a polling mechanism as a fallback\n        const intervalId = setInterval(() => {\n            if (textarea.value !== currentValue) {\n                syncValueWithDOM();\n            }\n        }, 100);\n\n        return () => {\n            observer.disconnect();\n            clearInterval(intervalId);\n        };\n    }, [currentValue, syncValueWithDOM]);\n\n    return {\n        currentValue,\n        handleChange,\n        handleInput,\n        setValue,\n        textareaRef,\n    };\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 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 */\n    border: 'transparent solid 1px',\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 Type definitions for the DyeLight component\n *\n * This module contains all TypeScript type definitions used by the DyeLight\n * component, including props interfaces, ref methods, and highlight configurations.\n * These types provide comprehensive type safety and IntelliSense support.\n */\n\nimport React from 'react';\n\n/**\n * Represents a character range to highlight in the entire text using absolute positions\n * @example\n * ```tsx\n * const highlight: CharacterRange = {\n *   start: 0,\n *   end: 5,\n *   className: 'highlight-keyword',\n *   style: { backgroundColor: 'yellow', fontWeight: 'bold' }\n * };\n * ```\n */\nexport type CharacterRange = {\n    /** Optional CSS class name to apply to the highlighted range */\n    className?: string;\n    /** Zero-based end index in the entire text (exclusive) */\n    end: number;\n    /** Zero-based start index in the entire text (inclusive) */\n    start: number;\n    /** Optional inline styles to apply to the highlighted range */\n    style?: React.CSSProperties;\n};\n\n/**\n * Props for the DyeLight component\n * Extends standard textarea props while replacing onChange with a simplified version\n * @example\n * ```tsx\n * const MyEditor = () => {\n *   const [code, setCode] = useState('const x = 1;');\n *\n *   const highlights = HighlightBuilder.pattern(\n *     code,\n *     /\\b(const|let|var)\\b/g,\n *     'keyword-highlight'\n *   );\n *\n *   const lineHighlights = HighlightBuilder.lines([\n *     { line: 0, className: 'current-line' }\n *   ]);\n *\n *   return (\n *     <DyeLight\n *       value={code}\n *       onChange={setCode}\n *       highlights={highlights}\n *       lineHighlights={lineHighlights}\n *       enableAutoResize={true}\n *       rows={10}\n *       className=\"my-editor\"\n *       placeholder=\"Enter your code here...\"\n *     />\n *   );\n * };\n * ```\n */\nexport interface DyeLightProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {\n    /** CSS class name for the textarea element */\n    className?: string;\n    /** Default value for uncontrolled usage */\n    defaultValue?: string;\n    /** Text direction - supports left-to-right and right-to-left */\n    dir?: 'ltr' | 'rtl';\n    /** Enable automatic height adjustment based on content */\n    enableAutoResize?: boolean;\n    /** Character range highlights using absolute positions in the entire text */\n    highlights?: CharacterRange[];\n    /** Line-level highlights mapped by line number (0-based) to CSS color/class */\n    lineHighlights?: { [lineNumber: number]: string };\n    /** Callback fired when the textarea value changes */\n    onChange?: (value: string) => void;\n    /** Number of visible text lines */\n    rows?: number;\n    /** Controlled value */\n    value?: string;\n}\n\n/**\n * Methods exposed by the DyeLight component through its ref\n * Provides programmatic access to common textarea operations\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   const dyeLightRef = useRef<DyeLightRef>(null);\n *\n *   const handleFocus = () => {\n *     dyeLightRef.current?.focus();\n *   };\n *\n *   const handleGetValue = () => {\n *     const value = dyeLightRef.current?.getValue();\n *     console.log('Current value:', value);\n *   };\n *\n *   return <DyeLight ref={dyeLightRef} />;\n * };\n * ```\n */\nexport type DyeLightRef = {\n    /** Removes focus from the textarea */\n    blur: () => void;\n    /** Sets focus to the textarea */\n    focus: () => void;\n    /** Gets the current value of the textarea */\n    getValue: () => string;\n    /** Selects all text in the textarea */\n    select: () => void;\n    /** Sets the selection range in the textarea */\n    setSelectionRange: (start: number, end: number) => void;\n    /** Sets the value of the textarea programmatically */\n    setValue: (value: string) => void;\n};\n"],"mappings":"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","names":["HighlightBuilder","chars","className","index","style","lines","result","color","line","text","pattern","regex","match","ranges","end","start","words","autoResize","textArea","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useCallback","useState","useAutoResize","enableAutoResize","textareaHeight","setTextareaHeight","useState","useCallback","element","autoResize","useMemo","getLinePositions","text","lines","lineStarts","position","line","index","absoluteToLinePos","absolutePos","i","isColorValue","value","useHighlightedContent","text","highlights","lineHighlights","renderHighlightedLine","useMemo","lines","lineStarts","getLinePositions","highlightsByLine","highlight","startPos","absoluteToLinePos","endPos","lineIndex","lineStart","rangeStart","rangeEnd","line","lineHighlight","ranges","useCallback","useRef","useHighlightSync","highlightLayerRef","syncScroll","textareaRef","scrollLeft","scrollTop","syncStyles","computedStyle","highlightLayer","useCallback","useEffect","useRef","useState","useTextareaValue","value","defaultValue","onChange","textareaRef","internalValue","setInternalValue","currentValue","syncValueWithDOM","domValue","handleChange","e","newValue","handleInput","setValue","textarea","observer","intervalId","DEFAULT_CONTAINER_STYLE","DEFAULT_BASE_STYLE","DEFAULT_HIGHLIGHT_LAYER_STYLE","jsx","jsxs","createLineElement","content","lineIndex","lineHighlight","isColor","isColorValue","renderHighlightedLine","line","ranges","sortedRanges","a","b","result","lastIndex","range","idx","className","end","start","rangeStyle","clampedStart","clampedEnd","textBefore","highlightedText","textAfter","DyeLight","forwardRef","defaultValue","dir","enableAutoResize","highlights","lineHighlights","onChange","rows","style","value","props","ref","containerRef","useRef","currentValue","handleChange","handleInput","setValue","textareaRef","useTextareaValue","handleAutoResize","textareaHeight","useAutoResize","highlightLayerRef","syncScroll","syncStyles","useHighlightSync","highlightedContent","useHighlightedContent","handleChangeWithResize","useCallback","e","handleInputWithResize","setValueWithResize","newValue","handleScroll","useImperativeHandle","useEffect","baseTextareaStyle","DEFAULT_BASE_STYLE","highlightLayerStyle","DEFAULT_HIGHLIGHT_LAYER_STYLE","DEFAULT_CONTAINER_STYLE"]}

package/package.json

@@ -5,7 +5,7 @@
         "url": "https://github.com/ragaeeb/dyelight.git"
     },
     "module": "./dist/index.js",
-    "version": "1.0.1",
+    "version": "1.0.3",
     "types": "./dist/index.d.ts",
     "exports": {
         ".": {
@@ -52,6 +52,7 @@
     ],
     "license": "MIT",
     "scripts": {
-        "build": "tsup"
+        "build": "tsup",
+        "test": "bun test --coverage --coverage-reporter=lcov"
     }
 }