Bug: conditional sibling causes insertBefore crash in <box>

[IsraelAraujo70]

Summary

When rendering a <textarea> and then conditionally rendering a sibling <line-number> before it (after the textarea ref becomes available), OpenTUI crashes with:
Error: Anchor does not exist
at insertBefore (Renderable.ts:1161:17)
This looks like React trying to insertBefore() into a <box> container, but the anchor resolution fails.

Environment

• Runtime: Bun
• @opentui/core: 0.1.62
• @opentui/react: 0.1.62
• react: 19.2.3
• OS: (fill in)

Steps to Reproduce

1. Render a <textarea> and store its instance via a callback ref.
2. Conditionally render <line-number target={textareaInstance} /> before the textarea once the ref is set.
   Minimal repro:

const [target, setTarget] = useState<any>(null)
return (
  <box flexDirection="row">
    {target && <line-number target={target} />}
    <textarea ref={setTarget} />
  </box>
)

Expected

mounts and attaches to the textarea without crashing.
Actual
Crash with Error: Anchor does not exist coming from insertBefore.

Notes / Suspected Cause

• On initial render, only <textarea> exists.
• After the ref sets state, React re-renders and attempts to insert before an existing child.
• The host implementation (or its internal children tracking) appears to mishandle insertBefore anchor resolution in this scenario.
  Workarounds
• Render <textarea> first (so gets appended when it becomes available), and use flexDirection="row-reverse" to keep line numbers on the left.
• Alternatively, render unconditionally and hide it until target exists (avoid insertion entirely).

[msmps]

@IsraelAraujo70 i will look into this but was there a reason you needed to set the target over using parent/child?

import { createCliRenderer } from "@opentui/core"
import { createRoot } from "@opentui/react"

const initialContent = `const results = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

// Calculate the sum
const sum = results.reduce((acc, val) => acc + val, 0)
console.log('Sum:', sum)

// Find even numbers
const evens = results.filter(n => n % 2 === 0)
console.log('Even numbers:', evens)`

export const App = () => {
  return (
    <line-number>
      <textarea focused initialValue={initialContent} />
    </line-number>
  )
}

const renderer = await createCliRenderer()
createRoot(renderer).render(<App />)

[IsraelAraujo70]

@msmps Thanks for the suggestion! I tried wrapping the <textarea> with <line-number> as you showed:

<line-number fg={colors.comment} bg={colors.background} paddingRight={1}>
  <textarea
    ref={textareaRef}
    key={buffer.id}
    flexGrow={1}
    height={height}
    initialValue={buffer.content}
    focused={focused}
    backgroundColor={colors.background}
    textColor={colors.foreground}
    // ...
  />
</line-number>

However, I'm now getting a different error when switching between files/buffers (when the textarea gets unmounted):

Error: LineNumberRenderable: Cannot remove target directly. Use clearTarget() instead.
    at remove (/node_modules/@opentui/src/renderables/LineNumberRenderable.ts:469:17)
    at removeChild (/node_modules/@opentui/react/index.js:381:18)
    ...

It seems like when React tries to unmount the child <textarea>, the component doesn't handle the removal correctly through the React reconciler.
Is there a way to properly handle this? Maybe the React bindings need to call clearTarget() before removing the child?

[kommander]

Mhh to support react with the LineNumberRenderable properly, it should probably handle clearTarget internally when the target is removed. Would be more aligned with other APIs in the core.