npm - dyelight - Versions diffs - 1.2.2 → 1.2.3 - Mend

dyelight 1.2.2 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.mts","names":[],"sources":["../src/builder.ts","../src/types.ts","../src/DyeLight.tsx","../src/domUtils.ts","../src/telemetry.ts"],"mappings":";;;;;;;cAca,gBAAA;EA+FwE;;;;;;;;;;;;;;;;;sBA7E7D,KAAA;IAAQ,SAAA;IAAoB,KAAA;IAAe,KAAA,GAAQ,OAAA,CAAM,aAAA;EAAA;;;;;;EAoBlB;;;;;;;;;;;;;;;;iBAA5C,KAAA;IAAQ,SAAA;IAAoB,KAAA;IAAgB,IAAA;EAAA;IAAA;;EAyDsB;;;;;;;;;;;;;;;;;;;;;;;;0BAzB3D,OAAA,EAAW,MAAA,WAAe,SAAA,WAAoB,KAAA,GAAU,OAAA,CAAM,aAAA;;;;;;;;;;;;;;;;AC9DxF;;;;;;;;mBDuFqB,KAAA;IAAQ,SAAA;IAAoB,GAAA;IAAa,KAAA;IAAe,KAAA,GAAQ,OAAA,CAAM,aAAA;EAAA;;;;;;EC1ChD;;;;;;;;;;;;;;;;;;6BDgEd,GAAA,UAAa,SAAA,WAAoB,KAAA,GAAU,OAAA,CAAM,aAAA;;;;;;ECFvD;;;;;;;;;;;;;;;;;;;;AA2BvB;;;;;wBDIwB,KAAA,YAAiB,SAAA,WAAoB,KAAA,GAAU,OAAA,CAAM,aAAA;;;;;;;;;;;;;;;;;;;;;KC1IjE,cAAA;kEAER,SAAA,WDQoB;ECNpB,GAAA,UDMgD;ECJhD,KAAA,UDIuE;ECFvE,KAAA,GAAQ,OAAA,CAAM,aAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAqCD,aAAA,SAAsB,IAAA,CAAK,OAAA,CAAM,sBAAA,CAAuB,mBAAA;;EAErE,SAAA;;EAEA,kBAAA;;EAEA,YAAA;;EAEA,GAAA;;EAEA,gBAAA;EDsDsC;ECpDtC,UAAA,GAAa,cAAA;EDoD6D;EClD1E,cAAA;IAAA,CAAoB,UAAA;EAAA;;EAEpB,QAAA,IAAY,KAAA;;EAEZ,IAAA;;EAEA,KAAA;EDyEoB;ECtEpB,KAAA;EDsEmE;ECpEnE,cAAA;AAAA;;;;;;;;;;;;AAtEJ;;;;;;;;;;;;AA6CA;;;;;;;;;;;KA8DY,WAAA;EA9D6D,sCAgErE,IAAA,cA5DA;EA8DA,KAAA,cA1DA;EA4DA,QAAA,gBAxDA;EA0DA,MAAA,cAxDA;EA0DA,iBAAA,GAAoB,KAAA,UAAe,GAAA,mBAxDnC;EA0DA,QAAA,GAAW,KAAA,mBAxDX;EA0DA,gBAAA,GAAmB,GAAA,UAAa,MAAA,WAAiB,QAAA,GAAW,cAAA;EArD5D;;;;AAuCJ;EAqBI,WAAA;AAAA;;;;KAMQ,gBAAA;EAnBR,qCAqBA,SAAA,UAnBoB;EAqBpB,YAAA,UAnBA;EAqBA,kBAAA,iBAnBA;EAqBA,IAAA,UArBgC;EAuBhC,QAAA,gDAvBiD;EAyBjD,WAAA,UAlBW;EAoBX,IAAA,EAAM,MAAA,mBAdE;EAgBR,aAAA;IAFM,sFAIF,aAAA,UAhBJ;IAkBI,UAAA,UAdJ;IAgBI,WAAA,WAZJ;IAcI,cAAA,sBAVJ;IAYI,YAAA;EAAA,GARA;EAWJ,SAAA;AAAA;;;;KAMQ,aAAA;EANC,gDAQT,QAAA;IAFqB,qCAIjB,WAAA,UAyBgB;IAvBhB,gBAAA,UAqDc;IAnDd,WAAA,UAgEgB;IA9DhB,QAAA;MA2EoB,mCAzEhB,KAAA,UAVR;MAYQ,GAAA,UARJ;MAUI,UAAA;IAAA,GAJA;IAOJ,OAAA,UAHI;IAKJ,QAAA;EAAA,GAIJ;EAAA,OAAA;IAII,yCAFA,WAAA,UAII;IAFJ,cAAA,EAAgB,KAAA;MAMZ,2BAJA,QAAA,mCAQA;MANA,KAAA,UAWJ;MATI,eAAA,UAeJ;MAbI,eAAA,UAeA;MAbA,aAAA;IAAA,IAoBJ;IAjBA,kBAAA,YAmBI;IAjBJ,eAAA;EAAA,GAuBI;EAnBR,QAAA;IAwBI,0CAtBA,WAAA,EAAa,KAAA;MAwBT,+BAtBA,SAAA,UA0BA;MAxBA,MAAA,UA0BS;MAxBT,qBAAA;IAAA,IAgCR;IA7BI,YAAA,EAAc,KAAA;MAiCd,+BA/BI,SAAA,UAmCJ;MAjCI,IAAA,UAmCc;MAjCd,MAAA,WAmCJ;MAjCI,KAAA,WAyCU;MAvCV,UAAA;IAAA;IAGJ,cAAA,EAAgB,KAAA;mCAEZ,SAAA,UC5NX;MD8NW,SAAA,UC9NX;MDgOW,OAAA,WClPO;MDoPP,OAAA,EAAS,MAAA;IAAA;EAAA,GCjPlB;EDsPC,MAAA,EAAQ,gBAAA,ICvOX;ED0OG,UAAA;ICrOS,wDDuOL,aAAA,UCpKP;IDsKO,UAAA,UCtOI;IDwOJ,MAAA,WCxKP;ID0KO,MAAA,sBC5OJ;ID8OI,cAAA;MAAkB,GAAA;MAAa,IAAA;IAAA,GCzO/B;ID2OA,UAAA;EAAA;ECzOQ;;;;;EDiPZ,aAAA;IAAA,CAAkB,GAAA;EAAA;AAAA;;;;AD7RtB;;;;;;;;;;;;;cEYa,iBAAA,GACT,OAAA,EAAS,OAAA,CAAM,SAAA,EACf,SAAA,UACA,aAAA,cACD,OAAA,CAAM,YAAA;;;;cAoBI,qBAAA,GACT,IAAA,UACA,SAAA,UACA,MAAA,EAAQ,KAAA;EACJ,aAAA;EACA,SAAA;EACA,GAAA;EACA,KAAA;EACA,KAAA,GAAQ,OAAA,CAAM,aAAA;AAAA,IAElB,aAAA,cACD,OAAA,CAAM,YAAA;;;;;;cA+DI,QAAA,EAAQ,OAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,OAAA,CAAA,aAAA,CAAA,WAAA;;;;;;AF9GrB;;;;;;;;;;;;;;;;;;;;;;;;;;cGgBa,UAAA,GAAc,QAAA,EAAU,mBAAA;;;;;AHhBrC;;;~~cIuLa~~,oBAAA;EAAA,QACD,MAAA;EAAA,QACA,SAAA;EAAA,QACA,OAAA;EAAA,QACA,kBAAA;EAAA,QACA,aAAA;EAAA,QACA,aAAA;~~EJ9FyE~~;;;;;~~cIqGrE~~,OAAA,YAAiB,SAAA;;;;;EAS7B,UAAA,CAAW,OAAA;~~EJ3LiB~~;;;;;;;;;;~~EIyM5B~~,MAAA,CACI,IAAA,UACA,QAAA,gDACA,IAAA,EAAM,MAAA,mBACN,WAAA,EAAa,KAAA,CAAM,SAAA,CAAU,mBAAA,UAC7B,YAAA,sBACA,cAAA,sBACA,YAAA;;;;;;;;~~UAwEI~~,mBAAA;;;;;;;;;EA6BR,gBAAA,CACI,WAAA,EAAa,KAAA,CAAM,SAAA,CAAU,mBAAA,UAC7B,YAAA,sBACA,cAAA,sBACA,UAAA,cACD,aAAA;;;;;;;;;EAkEH,WAAA,CACI,WAAA,EAAa,KAAA,CAAM,SAAA,CAAU,mBAAA,UAC7B,YAAA,sBACA,cAAA,sBACA,UAAA;~~EJnTsD~~;;;~~EIuW1D~~,KAAA,CAAA;AAAA"}
1	+ {"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 CHANGED Viewed

@@ -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,n,r,i,a)=>{let[s,c]=o();return{handleAutoResize:t(t=>{if(!e)return;let o=t.scrollHeight;u(t);let s=t.scrollHeight;n?.record(`autoResize`,`system`,{afterHeight:s,beforeHeight:o,changed:o!==s,textLength:t.value.length},r??{current:t},i?.()??t.value,s,a??!1),c(t.scrollHeight)},[e,n,r,i,a]),textareaHeight:s}},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=(e,n,r,i,o)=>{let s=a(null);return{highlightLayerRef:s,syncScroll:t(t=>{let a={scrollLeft:s.current?.scrollLeft,scrollTop:s.current?.scrollTop};_(t.current,s.current);let c={scrollLeft:s.current?.scrollLeft,scrollTop:s.current?.scrollTop};e?.record(`syncScroll`,`sync`,{after:c,before:a,changed:a.scrollTop!==c.scrollTop||a.scrollLeft!==c.scrollLeft},n??t,r?.()??``,i?.(),o??!1)},[e,n,r,i,o]),syncStyles:t(t=>{if(!t.current||!s.current)return;let a=getComputedStyle(t.current),c=t.current.offsetWidth-t.current.clientWidth-(parseFloat(a.borderLeftWidth)||0)-(parseFloat(a.borderRightWidth)||0);v(t.current,s.current),e?.record(`syncStyles`,`sync`,{direction:a.direction,fontSize:a.fontSize,padding:a.padding,scrollbarWidth:c},n??t,r?.()??``,i?.(),o??!1)},[e,n,r,i,o])}},b=(e,t,n,r,i)=>{if(!e||n)return;let a=e.value;a!==t&&(r(a),i?.(a))},x=(e,t,n,r,i,a)=>{e!==t&&(n?a?.(e):r(e),i?.(e))},S=(e,t,n,r,i,a)=>{e&&(e.value=t,n?a?.(t):r(t),i?.(t))},C=(e,r=``,i,s,c,l)=>{let u=a(null),[d,f]=o(e??r),[p,m]=o(e??r),h=e!==void 0,g=h?p:d,_=c??u,v=t(()=>{b(_.current,g,h,f,i)},[g,h,i,_]),y=t(e=>{let t=e.target.value;s?.record(`onChange`,`user`,{lengthDelta:t.length-g.length,newValue:t,previousValue:g,valueLength:t.length},_,g,l?.(),h),x(t,g,h,f,i,m)},[g,h,i,s,_,l]),C=t(e=>{s?.record(`setValue`,`state`,{newValue:e,previousValue:g},_,g,l?.(),h),S(_.current,e,h,f,i,m)},[h,i,s,_,l,g]);return n(()=>{v()},[v]),n(()=>{if(!h)return;let t=e??``;t!==p&&m(t)},[h,e,p]),n(()=>{_.current&&_.current.value!==g&&s?.record(`valueMismatch`,`state`,{domValue:_.current.value,stateValue:g},_,g,l?.(),h)},[g,h,s,_,l]),{currentValue:g,handleChange:y,setValue:C,textareaRef:_}},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};function D(e,t){let n=[];for(let[r,i]of e.entries()){let e={large_paste:`Large paste detected`,rapid_events:`Rapid event`,state_mismatch:`State mismatch`}[r]??r,a=t.map((t,n)=>t.anomalies.some(t=>t.includes(e))?n:-1).filter(e=>e!==-1),o=a.length>0?t[a[0]].timestampISO:``,s=`info`,c=r;r===`state_mismatch`?(s=`critical`,c=`State desynchronization between DOM and React detected`):r===`rapid_events`?(s=i>10?`warning`:`info`,c=`Rapid successive events detected (possible race condition)`):r===`large_paste`&&(s=`warning`,c=`Large paste operations detected (may trigger sync issues)`),n.push({firstOccurrence:o,issue:c,occurrenceCount:i,relatedEvents:a,severity:s})}return n.sort((e,t)=>{let n={critical:0,info:2,warning:1};return n[e.severity]-n[t.severity]}),n}function O(e){let t=[],n=e.filter(e=>e.type===`autoResize`),r=e.filter(e=>e.type===`onChange`);n.length>r.length*2&&t.push(`Excessive resize operations (${n.length} resizes vs ${r.length} value changes). May indicate infinite ResizeObserver loop.`);let i=e.filter(e=>e.category===`sync`);return i.length>e.length*.3&&t.push(`High frequency of sync operations (${i.length}/${e.length} events). May indicate layout thrashing.`),t}function k(e,t){let n=[];return e.some(e=>e.issue.includes(`desynchronization`))&&n.push(`State desynchronization detected. Check if multiple onChange handlers are bound or if external code is modifying the textarea DOM directly.`),t.some(e=>e.includes(`ResizeObserver`))&&n.push(`Possible infinite ResizeObserver loop. Ensure resize operations are debounced with requestAnimationFrame.`),e.some(e=>e.issue.includes(`race condition`))&&n.push(`Rapid events detected. Consider debouncing onChange handlers or checking for double-bound event listeners.`),e.some(e=>e.issue.includes(`Large paste`))&&n.push(`Large paste operations detected. Ensure e.preventDefault() is called BEFORE reading clipboard data in your onPaste handler to prevent the browser from inserting raw content into the DOM.`),n}function A(e){return{stateChanges:e.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:e.filter(e=>e.category===`sync`).map(e=>({details:e.data,operation:e.type,success:!e.anomalies.length,timestamp:e.timestampISO})),userActions:e.filter(e=>e.category===`user`).map(t=>({action:t.description,resultingStateChanges:e.filter(e=>e.timestamp>t.timestamp&&e.timestamp<t.timestamp+100&&e.category===`state`).length,timestamp:t.timestampISO}))}}var j=class{registry=new Map;reverseRegistry=new Map;nextId=0;threshold=1e3;store(e){if(e.length<=this.threshold)return e;if(this.reverseRegistry.has(e))return this.reverseRegistry.get(e);let t=`<REF:value_${this.nextId}>`;return this.registry.set(t,e),this.reverseRegistry.set(e,t),this.nextId++,t}getRegistry(){return Object.fromEntries(this.registry)}clear(){this.registry.clear(),this.reverseRegistry.clear(),this.nextId=0}},M=class{events=[];maxEvents=1e3;enabled=!1;lastEventTimestamp=null;issueRegistry=new Map;valueRegistry=new j;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.slice(0,50)}..." vs React="${u.slice(0,50)}..."`),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=this.valueRegistry.store(l),m=this.valueRegistry.store(u),h={anomalies:f,category:t,data:n,description:this.generateDescription(e,t,n),stateSnapshot:{isControlled:o,reactValue:m,textareaHeight:a,textareaValue:p,valuesMatch:d},timeSinceLastEvent:c,timestamp:s,timestampISO:new Date(s).toISOString(),type:e};this.events.push(h),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(e,t,n,r){let i=this.events[0],a=this.events[this.events.length-1],o=a&&i?a.timestamp-i.timestamp:0,s=D(this.issueRegistry,this.events),c=O(this.events),l=k(s,c),u=A(this.events),d=this.valueRegistry.store(e.current?.value??``),f=this.valueRegistry.store(t??``);return{events:this.events,finalState:{height:n,highlights:r,inSync:(e.current?.value??``)===(t??``),reactValue:f,scrollPosition:{left:e.current?.scrollLeft??0,top:e.current?.scrollTop??0},textareaValue:d},metadata:{browser:navigator.userAgent,componentVersion:`1.1.3`,generatedAt:new Date().toISOString(),platform:navigator.platform,timespan:{durationMs:o,end:a?.timestampISO??``,start:i?.timestampISO??``},totalEvents:this.events.length},summary:{description:s.length>0?`Found ${s.length} issue(s) during ${this.events.length} recorded events over ${(o/1e3).toFixed(1)}s`:`No issues detected during ${this.events.length} events over ${(o/1e3).toFixed(1)}s`,detectedIssues:s,recommendations:l,suspiciousPatterns:c},timeline:u,valueRegistry:this.valueRegistry.getRegistry()}}exportForAI(e,t,n,r){let i=this.generateAIReport(e,t,n,r);return JSON.stringify({aiInstructions:{commonIssues:{largePaste:`Large paste operations where e.preventDefault() is called AFTER clipboard data is read - browser inserts raw text into DOM before React state updates`,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`,valueRegistry:`Deduplicated text values - references like <REF:value_0> point to entries here`},purpose:`This is a debug report from the DyeLight React component. A textarea with highlighting overlay is experiencing synchronization issues.`,valueDeduplication:`IMPORTANT: Text values longer than 1000 characters are stored in valueRegistry and referenced as <REF:value_N>. When you see <REF:value_0> in stateSnapshot.textareaValue, look up the actual value in debugReport.valueRegistry["<REF:value_0>"]. This optimization prevents the JSON from becoming huge when users paste large blocks of text. Example: If textareaValue is "<REF:value_0>" and valueRegistry is {"<REF:value_0>": "...40KB of text..."}, then the actual textarea value is that 40KB text.`,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. If you see <REF:value_N> references, look them up in valueRegistry`,`6. Identify the root cause and suggest specific code fixes`]},debugReport:i},null,2)}clear(){this.events=[],this.issueRegistry.clear(),this.lastEventTimestamp=null,this.valueRegistry.clear()}};const N=(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)},P=(e,t,n,r)=>{if(n.length===0)return N(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(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(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 N(a.length===0?`\xA0`:a,t,r)},F=e(({className:e=``,containerClassName:o=``,defaultValue:l=``,dir:u=`ltr`,enableAutoResize:f=!0,highlights:p=[],lineHighlights:m={},onChange:h,rows:_=4,style:v,value:b,debug:x=!1,debugMaxEvents:S=1e3,...D},O)=>{let k=a(null),A=a(void 0),j=i(()=>new M(x,S),[x,S]);n(()=>{j.setEnabled(x)},[x,j]);let N=b!==void 0,F=t(()=>A.current,[]),{currentValue:I,handleChange:L,setValue:R,textareaRef:z}=C(b,l,h,j,void 0,F),B=t(()=>I,[I]),{handleAutoResize:V,textareaHeight:H}=d(f,j,z,B,N);n(()=>{A.current=H},[H]);let{highlightLayerRef:U,syncScroll:W,syncStyles:G}=y(j,z,B,F,N),K=g(I,p,m,P),q=t(e=>{L(e),V(e.target)},[L,V]),J=t(e=>{R(e),z.current&&V(z.current)},[R,V,z]);n(()=>{},[]);let Y=t(()=>{W(z)},[W,z]);n(()=>{if(!x)return;let e=setInterval(()=>{j.record(`snapshot`,`system`,{},z,I,H,N)},1e3);return()=>clearInterval(e)},[x,j,z,I,H,N]),r(O,()=>({blur:()=>z.current?.blur(),exportForAI:()=>j.exportForAI(z,I,H,p),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,j,H,p]),n(()=>{z.current&&f&&V(z.current),G(z)},[I,V,f,G,z]),n(()=>{if(!z.current)return;let e=z.current,t,n=new ResizeObserver(()=>{cancelAnimationFrame(t),t=requestAnimationFrame(()=>{G(z),f&&V(e)})});return n.observe(e),()=>{n.disconnect(),cancelAnimationFrame(t)}},[z,G,V,f]);let X={...T,color:I?`transparent`:`inherit`,height:H?`${H}px`:void 0,resize:f?`none`:`vertical`},Z={...E,direction:u,height:H?`${H}px`:void 0,padding:z.current?getComputedStyle(z.current).padding:`8px 12px`};return c(`div`,{className:o,ref:k,style:{...w,...v},children:[s(`div`,{"aria-hidden":`true`,ref:U,style:Z,children:K}),s(`textarea`,{className:e,dir:u,onChange:q,onScroll:Y,ref:z,rows:_,style:X,value:I,...D})]})});F.displayName=`DyeLight`;export{M as AIOptimizedTelemetry,F as DyeLight,l as HighlightBuilder,u as autoResize,N as createLineElement,P as renderHighlightedLine};
+`),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=(e,n,r,i,o)=>{let s=a(null);return{highlightLayerRef:s,syncScroll:t(t=>{let a={scrollLeft:s.current?.scrollLeft,scrollTop:s.current?.scrollTop};_(t.current,s.current);let c={scrollLeft:s.current?.scrollLeft,scrollTop:s.current?.scrollTop};e?.record(`syncScroll`,`sync`,{after:c,before:a,changed:a.scrollTop!==c.scrollTop||a.scrollLeft!==c.scrollLeft},n??t,r?.()??``,i?.(),o??!1)},[e,n,r,i,o]),syncStyles:t(t=>{if(!t.current||!s.current)return;let a=getComputedStyle(t.current),c=t.current.offsetWidth-t.current.clientWidth-(parseFloat(a.borderLeftWidth)||0)-(parseFloat(a.borderRightWidth)||0);v(t.current,s.current),e?.record(`syncStyles`,`sync`,{direction:a.direction,fontSize:a.fontSize,padding:a.padding,scrollbarWidth:c},n??t,r?.()??``,i?.(),o??!1)},[e,n,r,i,o])}},b=(e,t,n,r,i)=>{if(!e||n)return;let a=e.value;a!==t&&(r(a),i?.(a))},x=(e,t,n,r,i,a)=>{e!==t&&(n?a?.(e):r(e),i?.(e))},S=(e,t,n,r,i,a)=>{e&&(e.value=t,n?a?.(t):r(t),i?.(t))},C=(e,r=``,i,s,c,l)=>{let u=a(null),[d,f]=o(e??r),[p,m]=o(e??r),h=e!==void 0,g=h?p:d,_=c??u,v=t(()=>{b(_.current,g,h,f,i)},[g,h,i,_]),y=t(e=>{let t=e.target.value;s?.record(`onChange`,`user`,{lengthDelta:t.length-g.length,newValue:t,previousValue:g,valueLength:t.length},_,g,l?.(),h),x(t,g,h,f,i,m)},[g,h,i,s,_,l]),C=t(e=>{s?.record(`setValue`,`state`,{newValue:e,previousValue:g},_,g,l?.(),h),S(_.current,e,h,f,i,m)},[h,i,s,_,l,g]);return n(()=>{v()},[v]),n(()=>{if(!h)return;let t=e??``;t!==p&&m(t)},[h,e,p]),n(()=>{_.current&&_.current.value!==g&&s?.record(`valueMismatch`,`state`,{domValue:_.current.value,stateValue:g},_,g,l?.(),h)},[g,h,s,_,l]),{currentValue:g,handleChange:y,setValue:C,textareaRef:_}},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};var D=`1.2.3`;function O(e,t){let n=[];for(let[r,i]of e.entries()){let e={large_paste:`Large paste detected`,rapid_events:`Rapid event`,state_mismatch:`State mismatch`}[r]??r,a=t.map((t,n)=>t.anomalies.some(t=>t.includes(e))?n:-1).filter(e=>e!==-1),o=a.length>0?t[a[0]].timestampISO:``,s=`info`,c=r;r===`state_mismatch`?(s=`critical`,c=`State desynchronization between DOM and React detected`):r===`rapid_events`?(s=i>10?`warning`:`info`,c=`Rapid successive events detected (possible race condition)`):r===`large_paste`&&(s=`warning`,c=`Large paste operations detected (may trigger sync issues)`),n.push({firstOccurrence:o,issue:c,occurrenceCount:i,relatedEvents:a,severity:s})}return n.sort((e,t)=>{let n={critical:0,info:2,warning:1};return n[e.severity]-n[t.severity]}),n}function k(e){let t=[],n=e.filter(e=>e.type===`autoResize`),r=e.filter(e=>e.type===`onChange`);n.length>r.length*2&&t.push(`Excessive resize operations (${n.length} resizes vs ${r.length} value changes). May indicate infinite ResizeObserver loop.`);let i=e.filter(e=>e.category===`sync`);return i.length>e.length*.3&&t.push(`High frequency of sync operations (${i.length}/${e.length} events). May indicate layout thrashing.`),t}function A(e,t){let n=[];return e.some(e=>e.issue.includes(`desynchronization`))&&n.push(`State desynchronization detected. Check if multiple onChange handlers are bound or if external code is modifying the textarea DOM directly.`),t.some(e=>e.includes(`ResizeObserver`))&&n.push(`Possible infinite ResizeObserver loop. Ensure resize operations are debounced with requestAnimationFrame.`),e.some(e=>e.issue.includes(`race condition`))&&n.push(`Rapid events detected. Consider debouncing onChange handlers or checking for double-bound event listeners.`),e.some(e=>e.issue.includes(`Large paste`))&&n.push(`Large paste operations detected. Ensure e.preventDefault() is called BEFORE reading clipboard data in your onPaste handler to prevent the browser from inserting raw content into the DOM.`),n}function j(e){return{stateChanges:e.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:e.filter(e=>e.category===`sync`).map(e=>({details:e.data,operation:e.type,success:!e.anomalies.length,timestamp:e.timestampISO})),userActions:e.filter(e=>e.category===`user`).map(t=>({action:t.description,resultingStateChanges:e.filter(e=>e.timestamp>t.timestamp&&e.timestamp<t.timestamp+100&&e.category===`state`).length,timestamp:t.timestampISO}))}}var M=class{registry=new Map;reverseRegistry=new Map;nextId=0;threshold=1e3;store(e){if(e.length<=this.threshold)return e;if(this.reverseRegistry.has(e))return this.reverseRegistry.get(e);let t=`<REF:value_${this.nextId}>`;return this.registry.set(t,e),this.reverseRegistry.set(e,t),this.nextId++,t}getRegistry(){return Object.fromEntries(this.registry)}clear(){this.registry.clear(),this.reverseRegistry.clear(),this.nextId=0}},N=class{events=[];maxEvents=1e3;enabled=!1;lastEventTimestamp=null;issueRegistry=new Map;valueRegistry=new M;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&&!(t===`user`&&e===`onChange`)&&(f.push(`State mismatch: DOM="${l.slice(0,50)}..." vs React="${u.slice(0,50)}..."`),this.issueRegistry.set(`state_mismatch`,(this.issueRegistry.get(`state_mismatch`)??0)+1)),c!==null&&c<2&&(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=this.valueRegistry.store(l),m=this.valueRegistry.store(u),h={anomalies:f,category:t,data:n,description:this.generateDescription(e,t,n),stateSnapshot:{isControlled:o,reactValue:m,textareaHeight:a,textareaValue:p,valuesMatch:d},timeSinceLastEvent:c,timestamp:s,timestampISO:new Date(s).toISOString(),type:e};this.events.push(h),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(e,t,n,r){let i=this.events[0],a=this.events[this.events.length-1],o=a&&i?a.timestamp-i.timestamp:0,s=O(this.issueRegistry,this.events),c=k(this.events),l=A(s,c),u=j(this.events),d=this.valueRegistry.store(e.current?.value??``),f=this.valueRegistry.store(t??``);return{events:this.events,finalState:{height:n,highlights:r,inSync:(e.current?.value??``)===(t??``),reactValue:f,scrollPosition:{left:e.current?.scrollLeft??0,top:e.current?.scrollTop??0},textareaValue:d},metadata:{browser:navigator.userAgent,componentVersion:D,generatedAt:new Date().toISOString(),platform:navigator.platform,timespan:{durationMs:o,end:a?.timestampISO??``,start:i?.timestampISO??``},totalEvents:this.events.length},summary:{description:s.length>0?`Found ${s.length} issue(s) during ${this.events.length} recorded events over ${(o/1e3).toFixed(1)}s`:`No issues detected during ${this.events.length} events over ${(o/1e3).toFixed(1)}s`,detectedIssues:s,recommendations:l,suspiciousPatterns:c},timeline:u,valueRegistry:this.valueRegistry.getRegistry()}}exportForAI(e,t,n,r){let i=this.generateAIReport(e,t,n,r);return JSON.stringify({aiInstructions:{commonIssues:{largePaste:`Large paste operations where e.preventDefault() is called AFTER clipboard data is read - browser inserts raw text into DOM before React state updates`,rapidEvents:`Events firing <2ms 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`,valueRegistry:`Deduplicated text values - references like <REF:value_0> point to entries here`},purpose:`This is a debug report from the DyeLight React component. A textarea with highlighting overlay is experiencing synchronization issues.`,valueDeduplication:`IMPORTANT: Text values longer than 1000 characters are stored in valueRegistry and referenced as <REF:value_N>. When you see <REF:value_0> in stateSnapshot.textareaValue, look up the actual value in debugReport.valueRegistry["<REF:value_0>"]. This optimization prevents the JSON from becoming huge when users paste large blocks of text. Example: If textareaValue is "<REF:value_0>" and valueRegistry is {"<REF:value_0>": "...40KB of text..."}, then the actual textarea value is that 40KB text.`,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 (<2ms apart) that might indicate race conditions`,`5. If you see <REF:value_N> references, look them up in valueRegistry`,`6. Identify the root cause and suggest specific code fixes`]},debugReport:i},null,2)}clear(){this.events=[],this.issueRegistry.clear(),this.lastEventTimestamp=null,this.valueRegistry.clear()}};const P=(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)},F=(e,t,n,r)=>{if(n.length===0)return P(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(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(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 P(a.length===0?`\xA0`:a,t,r)},I=e(({className:e=``,containerClassName:o=``,defaultValue:l=``,dir:u=`ltr`,enableAutoResize:f=!0,highlights:p=[],lineHighlights:m={},onChange:h,rows:_=4,style:v,value:b,debug:x=!1,debugMaxEvents:S=1e3,...D},O)=>{let k=a(null),A=a(void 0),j=i(()=>new N(x,S),[x,S]);n(()=>{j.setEnabled(x)},[x,j]);let M=b!==void 0,P=t(()=>A.current,[]),{currentValue:I,handleChange:L,setValue:R,textareaRef:z}=C(b,l,h,j,void 0,P),B=t(()=>I,[I]),{handleAutoResize:V,textareaHeight:H}=d(f,j,z,B,M);n(()=>{A.current=H},[H]);let{highlightLayerRef:U,syncScroll:W,syncStyles:G}=y(j,z,B,P,M),K=g(I,p,m,F),q=t(e=>{L(e),V(e.target)},[L,V]),J=t(e=>{R(e),z.current&&V(z.current)},[R,V,z]);n(()=>{},[]);let Y=t(()=>{W(z)},[W,z]);n(()=>{if(!x)return;let e=setInterval(()=>{j.record(`snapshot`,`system`,{},z,I,H,M)},1e3);return()=>clearInterval(e)},[x,j,z,I,H,M]),r(O,()=>({blur:()=>z.current?.blur(),exportForAI:()=>j.exportForAI(z,I,H,p),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,j,H,p]),n(()=>{z.current&&f&&V(z.current),G(z)},[I,V,f,G,z]),n(()=>{if(!z.current)return;let e=z.current,t,n=new ResizeObserver(()=>{cancelAnimationFrame(t),t=requestAnimationFrame(()=>{G(z),f&&V(e)})});return n.observe(e),()=>{n.disconnect(),cancelAnimationFrame(t)}},[z,G,V,f]);let X={...T,color:I?`transparent`:`inherit`,height:H?`${H}px`:void 0,resize:f?`none`:`vertical`},Z={...E,direction:u,height:H?`${H}px`:void 0,padding:z.current?getComputedStyle(z.current).padding:`8px 12px`};return c(`div`,{className:o,ref:k,style:{...w,...v},children:[s(`div`,{"aria-hidden":`true`,ref:U,style:Z,children:K}),s(`textarea`,{className:e,dir:u,onChange:q,onScroll:Y,ref:z,rows:_,style:X,value:I,...D})]})});I.displayName=`DyeLight`;export{N as AIOptimizedTelemetry,I as DyeLight,l as HighlightBuilder,u as autoResize,P as createLineElement,F as renderHighlightedLine};
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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 \| null>,\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 \| null>,\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 if (isControlled) {\n return;\n }\n\n const domValue = textarea.value;\n if (domValue !== currentValue) {\n setInternalValue(domValue);\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 setRenderValue?: (value: string) => void,\n) => {\n if (newValue === currentValue) {\n return;\n }\n\n if (isControlled) {\n setRenderValue?.(newValue);\n } else {\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 setRenderValue?: (value: string) => void,\n) => {\n if (!textarea) {\n return;\n }\n\n textarea.value = newValue;\n\n if (isControlled) {\n setRenderValue?.(newValue);\n } else {\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 \| null>,\n getHeight?: () => number \| undefined,\n) => {\n const internalTextareaRef = useRef<HTMLTextAreaElement \| null>(null);\n const [internalValue, setInternalValue] = useState(value ?? defaultValue);\n const [renderValue, setRenderValue] = useState(value ?? defaultValue);\n\n const isControlled = value !== undefined;\n const currentValue = isControlled ? renderValue : 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, setRenderValue);\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, setRenderValue);\n },\n [isControlled, onChange, telemetry, actualTextareaRef, getHeight, currentValue],\n );\n\n useEffect(() => {\n syncValueWithDOMCallback();\n }, [syncValueWithDOMCallback]);\n\n useEffect(() => {\n if (!isControlled) {\n return;\n }\n\n const nextValue = value ?? '';\n if (nextValue !== renderValue) {\n setRenderValue(nextValue);\n }\n }, [isControlled, value, renderValue]);\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","import type { AIDebugReport, AITelemetryEvent } from './types';\n\n/\n Detects issues from the issue registry and creates structured issue records\n /\nfunction detectIssues(\n issueRegistry: Map<string, number>,\n events: AITelemetryEvent[],\n): AIDebugReport['summary']['detectedIssues'] {\n const detectedIssues: AIDebugReport['summary']['detectedIssues'] = [];\n for (const [issueType, count] of issueRegistry.entries()) {\n const issueIndicators: Record<string, string> = {\n large_paste: 'Large paste detected',\n rapid_events: 'Rapid event',\n state_mismatch: 'State mismatch',\n };\n const indicator = issueIndicators[issueType] ?? issueType;\n const relatedEvents = events\n .map((e, i) => (e.anomalies.some((a) => a.includes(indicator)) ? i : -1))\n .filter((i) => i !== -1);\n const firstOccurrence = relatedEvents.length > 0 ? events[relatedEvents[0]].timestampISO : '';\n let severity: 'critical' \| 'warning' \| 'info' = 'info';\n let issue = issueType;\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 detectedIssues.push({ firstOccurrence, issue, occurrenceCount: count, relatedEvents, severity });\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 return detectedIssues;\n}\n\n/\n Detects suspicious patterns in the event sequence\n /\nfunction detectSuspiciousPatterns(events: AITelemetryEvent[]): string[] {\n const suspiciousPatterns: string[] = [];\n\n const resizeEvents = events.filter((e) => e.type === 'autoResize');\n const valueChanges = 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 = events.filter((e) => e.category === 'sync');\n if (syncEvents.length > events.length * 0.3) {\n suspiciousPatterns.push(\n `High frequency of sync operations (${syncEvents.length}/${events.length} events). ` +\n `May indicate layout thrashing.`,\n );\n }\n\n return suspiciousPatterns;\n}\n\n/*\n Generates recommendations based on detected issues and patterns\n /\nfunction generateRecommendations(\n detectedIssues: AIDebugReport['summary']['detectedIssues'],\n suspiciousPatterns: string[],\n): string[] {\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 if (detectedIssues.some((i) => i.issue.includes('Large paste'))) {\n recommendations.push(\n 'Large paste operations detected. Ensure e.preventDefault() is called BEFORE reading clipboard data ' +\n 'in your onPaste handler to prevent the browser from inserting raw content into the DOM.',\n );\n }\n\n return recommendations;\n}\n\n/\n Builds the timeline view from events\n /\nfunction buildTimeline(events: AITelemetryEvent[]): AIDebugReport['timeline'] {\n return {\n stateChanges: 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: 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\n userActions: events\n .filter((e) => e.category === 'user')\n .map((e) => ({\n action: e.description,\n resultingStateChanges: events.filter(\n (se) => se.timestamp > e.timestamp && se.timestamp < e.timestamp + 100 && se.category === 'state',\n ).length,\n timestamp: e.timestampISO,\n })),\n };\n}\n\n/\n Registry for deduplicating large text values\n * Stores values >1000 chars once and returns a reference key\n /\nclass ValueRegistry {\n private registry = new Map<string, string>();\n private reverseRegistry = new Map<string, string>();\n private nextId = 0;\n private readonly threshold = 1000; // Only deduplicate values >1KB\n\n /\n Stores a value and returns either the value itself (if small) or a reference\n /\n store(value: string): string {\n // Don't deduplicate small values\n if (value.length <= this.threshold) {\n return value;\n }\n\n // Check if we've already stored this exact value\n if (this.reverseRegistry.has(value)) {\n return this.reverseRegistry.get(value)!;\n }\n\n // Store new value\n const ref = `<REF:value_${this.nextId}>`;\n this.registry.set(ref, value);\n this.reverseRegistry.set(value, ref);\n this.nextId++;\n\n return ref;\n }\n\n /\n Gets the actual registry for export\n /\n getRegistry(): { [key: string]: string } {\n return Object.fromEntries(this.registry);\n }\n\n /\n Clears the registry\n /\n clear() {\n this.registry.clear();\n this.reverseRegistry.clear();\n this.nextId = 0;\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 private valueRegistry = new ValueRegistry();\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(\n `State mismatch: DOM=\"${textareaValue.slice(0, 50)}...\" vs React=\"${reactValue.slice(0, 50)}...\"`,\n );\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 // Deduplicate large values using the registry\n const deduplicatedTextareaValue = this.valueRegistry.store(textareaValue);\n const deduplicatedReactValue = this.valueRegistry.store(reactValue);\n\n const event: AITelemetryEvent = {\n anomalies,\n category,\n data,\n description: this.generateDescription(type, category, data),\n stateSnapshot: {\n isControlled,\n reactValue: deduplicatedReactValue,\n textareaHeight,\n textareaValue: deduplicatedTextareaValue,\n valuesMatch,\n },\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 * @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 ): 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 = detectIssues(this.issueRegistry, this.events);\n const suspiciousPatterns = detectSuspiciousPatterns(this.events);\n const recommendations = generateRecommendations(detectedIssues, suspiciousPatterns);\n const timeline = buildTimeline(this.events);\n\n // Deduplicate final state values\n const finalTextareaValue = this.valueRegistry.store(textareaRef.current?.value ?? '');\n const finalReactValue = this.valueRegistry.store(currentValue ?? '');\n\n return {\n events: this.events,\n\n finalState: {\n height: textareaHeight,\n highlights,\n inSync: (textareaRef.current?.value ?? '') === (currentValue ?? ''),\n reactValue: finalReactValue,\n scrollPosition: {\n left: textareaRef.current?.scrollLeft ?? 0,\n top: textareaRef.current?.scrollTop ?? 0,\n },\n textareaValue: finalTextareaValue,\n },\n\n metadata: {\n browser: navigator.userAgent,\n componentVersion: '1.1.3',\n generatedAt: new Date().toISOString(),\n platform: navigator.platform,\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 valueRegistry: this.valueRegistry.getRegistry(),\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 * @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 ): string {\n const report = this.generateAIReport(textareaRef, currentValue, textareaHeight, highlights);\n\n return JSON.stringify(\n {\n aiInstructions: {\n commonIssues: {\n largePaste:\n 'Large paste operations where e.preventDefault() is called AFTER clipboard data is read - ' +\n 'browser inserts raw text into DOM before React state updates',\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 valueRegistry: 'Deduplicated text values - references like <REF:value_0> point to entries here',\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 valueDeduplication:\n 'IMPORTANT: Text values longer than 1000 characters are stored in valueRegistry and referenced as <REF:value_N>. ' +\n 'When you see <REF:value_0> in stateSnapshot.textareaValue, look up the actual value in debugReport.valueRegistry[\"<REF:value_0>\"]. ' +\n 'This optimization prevents the JSON from becoming huge when users paste large blocks of text. ' +\n 'Example: If textareaValue is \"<REF:value_0>\" and valueRegistry is {\"<REF:value_0>\": \"...40KB of text...\"}, ' +\n 'then the actual textarea value is that 40KB text.',\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. If you see <REF:value_N> references, look them up in valueRegistry',\n '6. 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 this.valueRegistry.clear();\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);\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 ],\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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"}
1	+ {"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","../package.json","../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 \| null>,\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 \| null>,\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 if (isControlled) {\n return;\n }\n\n const domValue = textarea.value;\n if (domValue !== currentValue) {\n setInternalValue(domValue);\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 setRenderValue?: (value: string) => void,\n) => {\n if (newValue === currentValue) {\n return;\n }\n\n if (isControlled) {\n setRenderValue?.(newValue);\n } else {\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 setRenderValue?: (value: string) => void,\n) => {\n if (!textarea) {\n return;\n }\n\n textarea.value = newValue;\n\n if (isControlled) {\n setRenderValue?.(newValue);\n } else {\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 \| null>,\n getHeight?: () => number \| undefined,\n) => {\n const internalTextareaRef = useRef<HTMLTextAreaElement \| null>(null);\n const [internalValue, setInternalValue] = useState(value ?? defaultValue);\n const [renderValue, setRenderValue] = useState(value ?? defaultValue);\n\n const isControlled = value !== undefined;\n const currentValue = isControlled ? renderValue : 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, setRenderValue);\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(\n actualTextareaRef.current,\n newValue,\n isControlled,\n setInternalValue,\n onChange,\n setRenderValue,\n );\n },\n [isControlled, onChange, telemetry, actualTextareaRef, getHeight, currentValue],\n );\n\n useEffect(() => {\n syncValueWithDOMCallback();\n }, [syncValueWithDOMCallback]);\n\n useEffect(() => {\n if (!isControlled) {\n return;\n }\n\n const nextValue = value ?? '';\n if (nextValue !== renderValue) {\n setRenderValue(nextValue);\n }\n }, [isControlled, value, renderValue]);\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","","import { version } from '@/../package.json';\nimport type { AIDebugReport, AITelemetryEvent } from './types';\n\n/\n Detects issues from the issue registry and creates structured issue records\n /\nfunction detectIssues(\n issueRegistry: Map<string, number>,\n events: AITelemetryEvent[],\n): AIDebugReport['summary']['detectedIssues'] {\n const detectedIssues: AIDebugReport['summary']['detectedIssues'] = [];\n for (const [issueType, count] of issueRegistry.entries()) {\n const issueIndicators: Record<string, string> = {\n large_paste: 'Large paste detected',\n rapid_events: 'Rapid event',\n state_mismatch: 'State mismatch',\n };\n const indicator = issueIndicators[issueType] ?? issueType;\n const relatedEvents = events\n .map((e, i) => (e.anomalies.some((a) => a.includes(indicator)) ? i : -1))\n .filter((i) => i !== -1);\n const firstOccurrence = relatedEvents.length > 0 ? events[relatedEvents[0]].timestampISO : '';\n let severity: 'critical' \| 'warning' \| 'info' = 'info';\n let issue = issueType;\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 detectedIssues.push({ firstOccurrence, issue, occurrenceCount: count, relatedEvents, severity });\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 return detectedIssues;\n}\n\n/\n Detects suspicious patterns in the event sequence\n /\nfunction detectSuspiciousPatterns(events: AITelemetryEvent[]): string[] {\n const suspiciousPatterns: string[] = [];\n\n const resizeEvents = events.filter((e) => e.type === 'autoResize');\n const valueChanges = 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 = events.filter((e) => e.category === 'sync');\n if (syncEvents.length > events.length * 0.3) {\n suspiciousPatterns.push(\n `High frequency of sync operations (${syncEvents.length}/${events.length} events). ` +\n `May indicate layout thrashing.`,\n );\n }\n\n return suspiciousPatterns;\n}\n\n/*\n Generates recommendations based on detected issues and patterns\n /\nfunction generateRecommendations(\n detectedIssues: AIDebugReport['summary']['detectedIssues'],\n suspiciousPatterns: string[],\n): string[] {\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 if (detectedIssues.some((i) => i.issue.includes('Large paste'))) {\n recommendations.push(\n 'Large paste operations detected. Ensure e.preventDefault() is called BEFORE reading clipboard data ' +\n 'in your onPaste handler to prevent the browser from inserting raw content into the DOM.',\n );\n }\n\n return recommendations;\n}\n\n/\n Builds the timeline view from events\n /\nfunction buildTimeline(events: AITelemetryEvent[]): AIDebugReport['timeline'] {\n return {\n stateChanges: 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: 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\n userActions: events\n .filter((e) => e.category === 'user')\n .map((e) => ({\n action: e.description,\n resultingStateChanges: events.filter(\n (se) => se.timestamp > e.timestamp && se.timestamp < e.timestamp + 100 && se.category === 'state',\n ).length,\n timestamp: e.timestampISO,\n })),\n };\n}\n\n/\n Registry for deduplicating large text values\n * Stores values >1000 chars once and returns a reference key\n /\nclass ValueRegistry {\n private registry = new Map<string, string>();\n private reverseRegistry = new Map<string, string>();\n private nextId = 0;\n private readonly threshold = 1000; // Only deduplicate values >1KB\n\n /\n Stores a value and returns either the value itself (if small) or a reference\n /\n store(value: string): string {\n // Don't deduplicate small values\n if (value.length <= this.threshold) {\n return value;\n }\n\n // Check if we've already stored this exact value\n if (this.reverseRegistry.has(value)) {\n return this.reverseRegistry.get(value)!;\n }\n\n // Store new value\n const ref = `<REF:value_${this.nextId}>`;\n this.registry.set(ref, value);\n this.reverseRegistry.set(value, ref);\n this.nextId++;\n\n return ref;\n }\n\n /\n Gets the actual registry for export\n /\n getRegistry(): { [key: string]: string } {\n return Object.fromEntries(this.registry);\n }\n\n /\n Clears the registry\n /\n clear() {\n this.registry.clear();\n this.reverseRegistry.clear();\n this.nextId = 0;\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 private valueRegistry = new ValueRegistry();\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 // Skip mismatch detection during onChange: the browser updates the DOM before\n // React state, so a transient mismatch is expected for controlled components.\n const isOnChangeEvent = category === 'user' && type === 'onChange';\n if (!valuesMatch && !isOnChangeEvent) {\n anomalies.push(\n `State mismatch: DOM=\"${textareaValue.slice(0, 50)}...\" vs React=\"${reactValue.slice(0, 50)}...\"`,\n );\n this.issueRegistry.set('state_mismatch', (this.issueRegistry.get('state_mismatch') ?? 0) + 1);\n }\n\n if (timeSinceLastEvent !== null && timeSinceLastEvent < 2) {\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 // Deduplicate large values using the registry\n const deduplicatedTextareaValue = this.valueRegistry.store(textareaValue);\n const deduplicatedReactValue = this.valueRegistry.store(reactValue);\n\n const event: AITelemetryEvent = {\n anomalies,\n category,\n data,\n description: this.generateDescription(type, category, data),\n stateSnapshot: {\n isControlled,\n reactValue: deduplicatedReactValue,\n textareaHeight,\n textareaValue: deduplicatedTextareaValue,\n valuesMatch,\n },\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 * @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 ): 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 = detectIssues(this.issueRegistry, this.events);\n const suspiciousPatterns = detectSuspiciousPatterns(this.events);\n const recommendations = generateRecommendations(detectedIssues, suspiciousPatterns);\n const timeline = buildTimeline(this.events);\n\n // Deduplicate final state values\n const finalTextareaValue = this.valueRegistry.store(textareaRef.current?.value ?? '');\n const finalReactValue = this.valueRegistry.store(currentValue ?? '');\n\n return {\n events: this.events,\n\n finalState: {\n height: textareaHeight,\n highlights,\n inSync: (textareaRef.current?.value ?? '') === (currentValue ?? ''),\n reactValue: finalReactValue,\n scrollPosition: {\n left: textareaRef.current?.scrollLeft ?? 0,\n top: textareaRef.current?.scrollTop ?? 0,\n },\n textareaValue: finalTextareaValue,\n },\n\n metadata: {\n browser: navigator.userAgent,\n componentVersion: version,\n generatedAt: new Date().toISOString(),\n platform: navigator.platform,\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 valueRegistry: this.valueRegistry.getRegistry(),\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 * @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 ): string {\n const report = this.generateAIReport(textareaRef, currentValue, textareaHeight, highlights);\n\n return JSON.stringify(\n {\n aiInstructions: {\n commonIssues: {\n largePaste:\n 'Large paste operations where e.preventDefault() is called AFTER clipboard data is read - ' +\n 'browser inserts raw text into DOM before React state updates',\n rapidEvents: 'Events firing <2ms 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 valueRegistry: 'Deduplicated text values - references like <REF:value_0> point to entries here',\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 valueDeduplication:\n 'IMPORTANT: Text values longer than 1000 characters are stored in valueRegistry and referenced as <REF:value_N>. ' +\n 'When you see <REF:value_0> in stateSnapshot.textareaValue, look up the actual value in debugReport.valueRegistry[\"<REF:value_0>\"]. ' +\n 'This optimization prevents the JSON from becoming huge when users paste large blocks of text. ' +\n 'Example: If textareaValue is \"<REF:value_0>\" and valueRegistry is {\"<REF:value_0>\": \"...40KB of text...\"}, ' +\n 'then the actual textarea value is that 40KB text.',\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 (<2ms apart) that might indicate race conditions',\n '5. If you see <REF:value_N> references, look them up in valueRegistry',\n '6. 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 this.valueRegistry.clear();\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);\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 ],\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 CHANGED Viewed

@@ -5,20 +5,20 @@
     "description": "A lightweight TypeScript React component to allow highlighting characters in textareas.",
     "devDependencies": {
         "@biomejs/biome": "^2.3.14",
-        "@storybook/addon-docs": "^10.2.7",
-        "@storybook/react-vite": "^10.2.7",
+        "@storybook/addon-docs": "^10.2.8",
+        "@storybook/react-vite": "^10.2.8",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/react": "^16.3.2",
         "@types/bun": "^1.3.8",
         "@types/react": "^19.2.13",
         "@types/react-dom": "^19.2.3",
         "semantic-release": "^25.0.3",
-        "storybook": "^10.2.7",
+        "storybook": "^10.2.8",
         "tsdown": "^0.20.3",
-        "vite-tsconfig-paths": "^6.0.5"
+        "vite-tsconfig-paths": "^6.1.0"
     },
     "engines": {
-        "bun": ">=1.3.8",
+        "bun": ">=1.3.9",
         "node": ">=24.x"
     },
     "exports": {
@@ -43,7 +43,7 @@
     "main": "./dist/index.mjs",
     "module": "./dist/index.mjs",
     "name": "dyelight",
-    "packageManager": "bun@1.3.8",
+    "packageManager": "bun@1.3.9",
     "peerDependencies": {
         "react": "^19.2.4",
         "react-dom": "^19.2.4"
@@ -61,5 +61,5 @@
     },
     "type": "module",
     "types": "./dist/index.d.mts",
-    "version": "1.2.2"
+    "version": "1.2.3"
 }