import { describe, it, expect } from 'vitest'
import { dom } from '@remix-run/events'
import type { Remix } from '../src/lib/component.ts'
import { Catch, Frame } from '../src/lib/component.ts'
import { renderToStream } from '../src/lib/stream.ts'
import { hydrated } from '../src/lib/hydrated.ts'
import { invariant } from '../src/lib/invariant.ts'
import {
  drain,
  observeMutations,
  simulateBrowserDocument,
  waitForMutations,
  withResolvers,
} from '../src/lib/test/utils.ts'

import { createReconciler, TOP_FRAME } from './reconciler.ts'
import { Fragment } from '../src/lib/component.ts'

describe('reconciler', () => {
  describe('createReconciler', () => {
    it('should create a reconciler', () => {
      let reconciler = createReconciler(document.createElement('div'))
      expect(reconciler).toBeDefined()
    })
  })

  describe('basic rendering', () => {
    it('renders basic HTML', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)
      reconciler.render('<div>Hello, world!</div>')
      expect(container.innerHTML).toBe('<div>Hello, world!</div>')
    })

    it('renders basic Remix.RemixElements', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)
      reconciler.render(<div>Hello, world!</div>)
      expect(container.innerHTML).toBe('<div>Hello, world!</div>')
    })

    it('renders basic text nodes', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)
      reconciler.render('Hello, world!')
      expect(container.innerHTML).toBe('Hello, world!')
    })

    it('renders components', () => {
      let container = document.createElement('div')
      function App() {
        return <div>Hello, world!</div>
      }
      let reconciler = createReconciler(container)
      reconciler.render(<App />)
      expect(container.innerHTML).toBe('<div>Hello, world!</div>')
    })
  })

  describe('basic node retention', () => {
    it('retains parsed HTML nodes', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      reconciler.render('<div>Hello, <span>world!</span></div>')

      let div = container.querySelector('div')
      let span = container.querySelector('span')

      invariant(div instanceof HTMLDivElement)
      invariant(span instanceof HTMLSpanElement)
      expect(container.textContent).toBe('Hello, world!')

      reconciler.render('<div>Hello, <span>universe!</span></div>')

      let newDiv = container.querySelector('div')
      let newSpan = container.querySelector('span')

      invariant(newDiv instanceof HTMLDivElement)
      invariant(newSpan instanceof HTMLSpanElement)
      expect(container.textContent).toBe('Hello, universe!')
      expect(newDiv).toBe(div)
      expect(newSpan).toBe(span)
    })

    it('retains Remix.RemixElement nodes', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      reconciler.render(
        <div>
          Hello, <span>world!</span>
        </div>,
      )
      let div = container.querySelector('div')
      let span = container.querySelector('span')

      invariant(div instanceof HTMLDivElement)
      invariant(span instanceof HTMLSpanElement)
      expect(container.textContent).toBe('Hello, world!')

      reconciler.render(
        <div>
          Hello, <span>universe!</span>
        </div>,
      )

      let newDiv = container.querySelector('div')
      let newSpan = container.querySelector('span')

      invariant(newDiv instanceof HTMLDivElement)
      invariant(newSpan instanceof HTMLSpanElement)
      expect(container.textContent).toBe('Hello, universe!')
      expect(newDiv).toBe(div)
      expect(newSpan).toBe(span)
    })

    it('retains text nodes', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      reconciler.render('Hello, world!')

      let textNode = container.firstChild

      invariant(textNode instanceof Text)
      expect(textNode.textContent).toBe('Hello, world!')

      reconciler.render('Hello, universe!')

      let newTextNode = container.firstChild

      invariant(newTextNode instanceof Text)
      expect(newTextNode.textContent).toBe('Hello, universe!')
      expect(newTextNode).toBe(textNode)
    })

    it('retains components', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      function Greeting({ name }: { name: string }) {
        return <h1>Hello, {name}!</h1>
      }

      // Initial render
      reconciler.render(<Greeting name="World" />)

      let h1 = container.querySelector('h1')
      invariant(h1 instanceof HTMLHeadingElement)
      let text = h1.firstChild
      invariant(text instanceof Text)

      expect(h1.textContent).toBe('Hello, World!')

      // Update render
      reconciler.render(<Greeting name="Universe" />)

      let newH1 = container.querySelector('h1')
      invariant(newH1 instanceof HTMLHeadingElement)
      let newText = newH1.firstChild
      invariant(newText instanceof Text)

      expect(newH1).toBe(h1)
      expect(newText).toBe(text)
      expect(newH1.textContent).toBe('Hello, Universe!')
    })

    it('retains component handles', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      let setupCalls = 0
      let renderCalls = 0
      function Greeting(this: Remix.Handle) {
        setupCalls++
        return ({ name }: { name: string }) => {
          renderCalls++
          return <h1>{name}</h1>
        }
      }

      // Initial render
      reconciler.render(<Greeting name="Hello" />)

      expect(container.textContent).toBe('Hello')

      // Update render
      reconciler.render(<Greeting name="Goodbye" />)

      expect(container.textContent).toBe('Goodbye')
      expect(setupCalls).toBe(1)
      expect(renderCalls).toBe(2)
    })
  })

  describe('components', () => {
    it('retains descendant components', () => {
      let parentSetupCalls = 0
      let parentRenderCalls = 0
      let childSetupCalls = 0
      let childRenderCalls = 0

      function App(this: Remix.Handle) {
        parentSetupCalls++
        let count = 0
        return () => {
          parentRenderCalls++
          return (
            <div>
              <h1>App</h1>
              <button
                id="app"
                on={dom.click(() => {
                  count++
                  this.render()
                })}
              >
                App {count}
              </button>
              <Child />
            </div>
          )
        }
      }

      function Child(this: Remix.Handle) {
        childSetupCalls++
        let count = 0
        return () => {
          childRenderCalls++
          return (
            <button
              id="child"
              on={dom.click(() => {
                count++
                this.render()
              })}
            >
              Child {count}
            </button>
          )
        }
      }

      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      reconciler.render(<App />)

      let child = container.querySelector('button#child')
      invariant(child instanceof HTMLButtonElement)

      expect(parentSetupCalls).toBe(1)
      expect(parentRenderCalls).toBe(1)
      expect(childSetupCalls).toBe(1)
      expect(childRenderCalls).toBe(1)
      expect(child.textContent).toBe('Child 0')

      child.click()
      reconciler.flush()

      expect(child.textContent).toBe('Child 1')
      expect(childSetupCalls).toBe(1)
      expect(childRenderCalls).toBe(2)

      let parent = container.querySelector('button#app')
      invariant(parent instanceof HTMLButtonElement)
      parent.click()
      reconciler.flush()

      expect(parentSetupCalls).toBe(1)
      expect(parentRenderCalls).toBe(2)
      expect(childSetupCalls).toBe(1)
      expect(childRenderCalls).toBe(3)
      expect(child.textContent).toBe('Child 1')
    })

    describe('ref', () => {
      it('calls back with the DOM node', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        let capturedElement: HTMLButtonElement | null = null
        function Test(this: Remix.Handle) {
          return () => (
            <button
              ref={(el) => {
                capturedElement = el
              }}
            />
          )
        }

        reconciler.render(<Test />)
        expect(capturedElement).toBe(container.querySelector('button'))
      })

      it('calls cleanup when the element is removed', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        let cleanupCalls = 0
        function Test(this: Remix.Handle) {
          let show = true
          return () =>
            show ? (
              <button
                ref={(el) => {
                  el.addEventListener('click', () => {
                    show = false
                    this.render()
                  })
                  return () => {
                    cleanupCalls++
                  }
                }}
              />
            ) : (
              <span />
            )
        }

        reconciler.render(<Test />)
        let button = container.querySelector('button')
        invariant(button instanceof HTMLButtonElement)
        button.click()
        reconciler.flush()
        expect(cleanupCalls).toBe(1)
      })

      it('is only called on mount and unmount, not updates', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        let calls = 0
        let cleanups = 0

        function App(this: Remix.Handle) {
          return ({ label }: { label: string }) => (
            <button
              ref={() => {
                calls++
                return () => {
                  cleanups++
                }
              }}
            >
              {label}
            </button>
          )
        }

        reconciler.render(<App label="A" />)
        expect(calls).toBe(1)

        reconciler.render(<App label="B" />)
        expect(calls).toBe(1) // no re-attach on update

        reconciler.render(<span />)
        expect(cleanups).toBe(1)
      })
      it('calls cleanup before new attach on replacement', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        let events: string[] = []

        function A(this: Remix.Handle) {
          return () => (
            <div
              ref={() => {
                events.push('attach A')
                return () => events.push('cleanup A')
              }}
            />
          )
        }

        reconciler.render(<A />)
        expect(events).toEqual(['attach A'])

        function B(this: Remix.Handle) {
          return () => (
            <span
              ref={() => {
                events.push('attach B')
                return () => events.push('cleanup B')
              }}
            />
          )
        }

        reconciler.render(<B />)
        expect(events).toEqual(['attach A', 'cleanup A', 'attach B'])
      })

      it('cleans up nested host refs when removing a wrapper component', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        let cleaned = 0

        function Wrapped(this: Remix.Handle) {
          return () => (
            <section>
              <button
                ref={() => {
                  return () => cleaned++
                }}
              />
            </section>
          )
        }

        function App(this: Remix.Handle) {
          let show = true
          return () => (show ? <Wrapped /> : <div />)
        }

        reconciler.render(<App />)
        expect(cleaned).toBe(0)

        // Re-render App such that Wrapped is removed
        function App2(this: Remix.Handle) {
          return () => <div />
        }
        reconciler.render(<App2 />)
        expect(cleaned).toBe(1)
      })

      it('attaches once during adopt/hydration and not on update', async () => {
        let container = document.createElement('div')
        container.innerHTML = `
        <div>
          <button>SSR</button>
          <script type="application/json" rmx-hydrated>{
            "moduleUrl": "/cmp.js",
            "exportName": "Cmp",
            "props": {},
            "id": "h1"
          }</script>
        </div>
      `

        let attaches = 0

        function Cmp() {
          return (
            <button
              ref={() => {
                attaches++
                return () => {}
              }}
            >
              SSR
            </button>
          )
        }

        let reconciler = createReconciler(container, {
          loadModule: () => Cmp,
        })

        await reconciler.adopt()
        expect(attaches).toBe(1)

        await reconciler.render(`
        <div>
          <button>SSR</button>
          <script type="application/json" rmx-hydrated>{
            "moduleUrl": "/cmp.js",
            "exportName": "Cmp",
            "props": {},
            "id": "h1"
          }</script>
        </div>
      `)

        expect(attaches).toBe(1)
      })
    })

    describe('updates', () => {
      it('updates when components call render()', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        function Counter(this: Remix.Handle) {
          let count = 0
          return () => (
            <button
              ref={(node) => {
                node.addEventListener('click', () => {
                  count++
                  this.render()
                })
              }}
            >
              Count: {count}
            </button>
          )
        }

        reconciler.render(<Counter />)
        expect(container.innerHTML).toContain('Count: 0')

        let button = container.querySelector('button')
        invariant(button instanceof HTMLButtonElement)
        button.click()
        reconciler.flush() // need this
        expect(container.innerHTML).toContain('Count: 1')
      })
    })

    describe('returning arbitrary nodes', () => {
      it('toggles element -> null (text node)', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        function Toggle(this: Remix.Handle, { show }: { show: boolean }) {
          return show ? <span>hi</span> : null
        }

        reconciler.render(<Toggle show={true} />)
        expect(container.innerHTML).toBe('<span>hi</span>')

        reconciler.render(<Toggle show={false} />)
        expect(container.innerHTML).toBe('')
      })

      it('toggles text -> element', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        function Toggle(this: Remix.Handle, { mode }: { mode: 'text' | 'el' }) {
          return mode === 'text' ? 5 : <span>5</span>
        }

        reconciler.render(<Toggle mode="text" />)
        expect(container.innerHTML).toBe('5')

        reconciler.render(<Toggle mode="el" />)
        expect(container.innerHTML).toBe('<span>5</span>')
      })

      it('updates text -> text in place', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        function Show(this: Remix.Handle, { n }: { n: number }) {
          return n
        }

        reconciler.render(<Show n={1} />)
        expect(container.innerHTML).toBe('1')

        reconciler.render(<Show n={2} />)
        expect(container.innerHTML).toBe('2')
      })

      it('toggles element -> boolean (empty)', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        function Toggle(this: Remix.Handle, { show }: { show: boolean }) {
          return show ? <b>on</b> : false
        }

        reconciler.render(<Toggle show={true} />)
        expect(container.innerHTML).toBe('<b>on</b>')

        reconciler.render(<Toggle show={false} />)
        expect(container.innerHTML).toBe('')
      })
    })

    describe('hierarchical IDs', () => {
      it('assigns hierarchical IDs to components during rendering', async () => {
        function Child(this: Remix.Handle) {
          return () => <div>Child ID: {this.id}</div>
        }

        function Parent(this: Remix.Handle) {
          return () => (
            <div>
              Parent ID: {this.id}
              <Child />
              <Child />
            </div>
          )
        }

        function App(this: Remix.Handle) {
          return () => (
            <div>
              App ID: {this.id}
              <Parent />
            </div>
          )
        }

        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        await reconciler.render(<App />)

        expect(container.innerHTML).toContain('App ID: 0')
        expect(container.innerHTML).toContain('Parent ID: 0-2')
        expect(container.innerHTML).toContain('Child ID: 0-2-2')
        expect(container.innerHTML).toContain('Child ID: 0-2-3')
      })
    })

    describe('on prop', () => {
      it('calls event handlers', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        let clicked = false
        function App(this: Remix.Handle) {
          return () => (
            <button
              on={dom.click(() => {
                clicked = true
              })}
            >
              Click me
            </button>
          )
        }

        reconciler.render(<App />)
        expect(clicked).toBe(false)

        let button = container.querySelector('button')
        invariant(button instanceof HTMLButtonElement)
        button.click()
        expect(clicked).toBe(true)
      })
    })

    describe('css prop', () => {
      it('works with vdom', () => {
        let container = document.createElement('div')
        document.body.appendChild(container)
        let reconciler = createReconciler(container)

        reconciler.render(<div css={{ color: 'rgb(255, 0, 0)' }}>Hello</div>)
        let div = container.querySelector('div')
        invariant(div instanceof HTMLDivElement)
        expect(getComputedStyle(div).color).toBe('rgb(255, 0, 0)')
        expect(div.className).toMatch(/^rmx-/)
      })

      it('replaces rmx-* class on update (no accumulation)', () => {
        let container = document.createElement('div')
        document.body.appendChild(container)
        let reconciler = createReconciler(container)

        reconciler.render(
          <div className="x" css={{ color: 'rgb(255, 0, 0)' }}>
            Hello
          </div>,
        )
        let div = container.querySelector('div')
        invariant(div instanceof HTMLDivElement)

        let rmx1 = Array.from(div.classList).filter((c) => c.startsWith('rmx-'))
        expect(rmx1.length).toBe(1)

        reconciler.render(
          <div className="x" css={{ color: 'rgb(0, 0, 255)' }}>
            Hello
          </div>,
        )
        let rmx2 = Array.from(div.classList).filter((c) => c.startsWith('rmx-'))
        expect(rmx2.length).toBe(1)
        expect(rmx2[0]).not.toBe(rmx1[0])
        expect(div.classList.contains('x')).toBe(true)
      })

      it('removes rmx-* class when css prop is removed', () => {
        let container = document.createElement('div')
        document.body.appendChild(container)
        let reconciler = createReconciler(container)

        reconciler.render(<div css={{ color: 'rgb(255, 0, 0)' }}>Hello</div>)
        let div = container.querySelector('div')
        invariant(div instanceof HTMLDivElement)
        expect(Array.from(div.classList).some((c) => c.startsWith('rmx-'))).toBe(true)

        reconciler.render(<div>Hello</div>)
        expect(Array.from(div.classList).some((c) => c.startsWith('rmx-'))).toBe(false)
      })

      it.todo('hydrates styles, adopting style tag from server')
    })

    describe('context', () => {
      it('provides and reads context', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        function App(this: Remix.Handle<{ value: string }>) {
          this.context.set({ value: 'test' })
          return ({ children }: { children: Remix.RemixNode }) => <div>{children}</div>
        }

        function Child(this: Remix.Handle) {
          let { value } = this.context.get(App) as { value: string }
          return () => <main>Child: {value}</main>
        }

        reconciler.render(
          <App>
            <Child />
          </App>,
        )
        expect(container.innerHTML).toContain('Child: test')
      })

      it('renders descendants in order of appearance', () => {
        let container = document.createElement('div')

        let options: string[] = []
        let renderListbox = () => {}

        function Listbox(this: Remix.Handle<{ registerOption: (option: string) => void }>) {
          this.context.set({
            registerOption: (option: string) => {
              options.push(option)
            },
          })

          renderListbox = this.render

          return ({ children }: { children: Remix.RemixNode }) => {
            options = []
            return <div>{children}</div>
          }
        }

        function Option(this: Remix.Handle) {
          let { registerOption } = this.context.get(Listbox)
          return ({ value }: { value: string }) => {
            registerOption(value)
            return <div>Option</div>
          }
        }

        function App(this: Remix.Handle) {
          return () => (
            <Listbox>
              <Option value="Option 1" />
              <Option value="Option 2" />
              <Option value="Option 3" />
            </Listbox>
          )
        }

        let reconciler = createReconciler(container)

        reconciler.render(<App />)
        expect(options).toEqual(['Option 1', 'Option 2', 'Option 3'])

        renderListbox()
        reconciler.flush()
        expect(options).toEqual(['Option 1', 'Option 2', 'Option 3'])
      })
    })

    describe('queueTask', () => {
      it.todo('calls tasks after render')
      it.todo('provides signal to manage re-entry')
    })

    it.todo('sends errors to Catch with this.raise')
  })

  describe('head managed elements', () => {
    it.todo('hoists title elements to head')
    it.todo('hoists meta elements to head')
    it.todo('hoists ld+json elements to head')
    it.todo('hoists link elements to head')
    it.todo('adopts head managed elements from server')
  })

  describe('Fragment', () => {
    it('renders children', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      function App() {
        return (
          <Fragment>
            <h1>Title</h1>
            <p>Paragraph</p>
          </Fragment>
        )
      }

      reconciler.render(<App />)
      expect(container.innerHTML).toBe('<h1>Title</h1><p>Paragraph</p>')
    })

    it('works as <></>', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      function App() {
        return (
          <>
            <h1>Title</h1>
            <p>Paragraph</p>
          </>
        )
      }

      reconciler.render(<App />)
      expect(container.innerHTML).toBe('<h1>Title</h1><p>Paragraph</p>')
    })
  })

  describe('Catch', () => {
    it('<Catch> shows fallback when descendant throws during setup', () => {
      let container = document.createElement('div')

      function ThrowDuringSetup(this: Remix.Handle) {
        throw new Error('Setup error')
      }

      function App() {
        return (
          <div>
            <h1>App</h1>
            <Catch fallback={(error) => <div>Error: {error.message}</div>}>
              <div>Before error</div>
              <ThrowDuringSetup />
              <div>After error</div>
            </Catch>
          </div>
        )
      }

      let reconciler = createReconciler(container)
      reconciler.render(<App />)

      expect(container.innerHTML).toContain('<h1>App</h1>')
      expect(container.innerHTML).toContain('Error: Setup error')
      expect(container.innerHTML).not.toContain('Before error')
      expect(container.innerHTML).not.toContain('After error')
    })

    it('<Catch> shows fallback when descendant throws during render', () => {
      let container = document.createElement('div')

      function ThrowDuringRender() {
        return () => {
          throw new Error('Render error')
        }
      }

      function App() {
        return (
          <div>
            <h1>App</h1>
            <Catch fallback={(error) => <div>Error: {error.message}</div>}>
              <div>Before error</div>
              <ThrowDuringRender />
              <div>After error</div>
            </Catch>
          </div>
        )
      }

      let reconciler = createReconciler(container)
      reconciler.render(<App />)

      // Sibling should render immediately
      expect(container.innerHTML).toContain('<h1>App</h1>')
      expect(container.innerHTML).toContain('Error: Render error')
      expect(container.innerHTML).not.toContain('Before error')
      expect(container.innerHTML).not.toContain('After error')
    })

    it('<Catch> shows fallback when descendant throws during re-render', () => {
      let container = document.createElement('div')

      function KaboomComponent(this: Remix.Handle) {
        let count = 0
        return () => {
          if (count > 1) {
            throw new Error('Kaboom!')
          }
          return (
            <div>
              <button
                on={dom.click(() => {
                  count++
                  this.render()
                })}
              >
                Count: {count}
              </button>
            </div>
          )
        }
      }

      function App() {
        return (
          <div>
            <h1>App</h1>
            <Catch fallback={(error) => <div>Error: {error.message}</div>}>
              <div>Before kaboom</div>
              <KaboomComponent />
              <div>After kaboom</div>
            </Catch>
          </div>
        )
      }

      let reconciler = createReconciler(container)
      reconciler.render(<App />)

      // Initially should render successfully
      expect(container.innerHTML).toContain('<h1>App</h1>')
      expect(container.innerHTML).toContain('Before kaboom')
      expect(container.innerHTML).toContain('Count: 0')
      expect(container.innerHTML).toContain('After kaboom')
      expect(container.innerHTML).not.toContain('Error: Kaboom!')

      // Click button multiple times to trigger re-renders
      let button = container.querySelector('button')
      invariant(button instanceof HTMLButtonElement)

      // Click 1: count = 1, still fine
      button.click()
      reconciler.flush()
      expect(container.innerHTML).toContain('Count: 1')
      expect(container.innerHTML).not.toContain('Error: Kaboom!')

      // Click 2: count = 2, should throw and show error boundary
      button.click()
      reconciler.flush()

      // After error, should show fallback instead of component content
      expect(container.innerHTML).toContain('<h1>App</h1>') // Sibling still renders
      expect(container.innerHTML).toContain('Error: Kaboom!')
      expect(container.innerHTML).not.toContain('Before kaboom')
      expect(container.innerHTML).not.toContain('Count:')
      expect(container.innerHTML).not.toContain('After kaboom')
    })

    it.todo('renders errors from event handlers')
  })

  describe('hydration', () => {
    it('hydrates a simple component', async () => {
      let container = document.createElement('div')
      container.innerHTML = `
      <div>
        <button>Hello, World!</button>
        <script type="application/json" rmx-hydrated>
        {
          "moduleUrl": "/components/counter.js",
          "exportName": "Counter",
          "props": {"name": "World"},
          "id": "h1"
        }
        </script>
      </div>
    `

      let div = container.querySelector('div')
      let button = container.querySelector('button')
      let script = container.querySelector('script[rmx-hydrated]')

      invariant(div instanceof HTMLDivElement)
      invariant(button instanceof HTMLButtonElement)
      invariant(script instanceof HTMLScriptElement)

      // Track component mounting
      let componentMounted = false
      let mountedProps: any = null

      function Greeting({ name }: { name: string }) {
        componentMounted = true
        mountedProps = { name }
        return <button>Hello, {name}!</button>
      }

      let reconciler = createReconciler(container, {
        loadModule: async (url: string, name: string) => {
          expect(url).toBe('/components/counter.js')
          expect(name).toBe('Counter')
          return Greeting
        },
      })

      // Wait for initial hydration to complete
      await reconciler.adopt()

      // Verify component was mounted with correct props
      expect(componentMounted).toBe(true)
      expect(mountedProps).toEqual({ name: 'World' })

      // Verify script was removed
      expect(container.querySelector('script[rmx-hydrated]')).toBeNull()

      // Verify DOM elements were preserved (not replaced)
      expect(container.querySelector('div')).toBe(div)
      expect(container.querySelector('button')).toBe(button)

      // Verify no structural changes - same button text
      expect(button.textContent).toBe('Hello, World!')
    })

    it('hydrates a nested components', async () => {
      let container = document.createElement('div')
      container.innerHTML = `
        <div>
          <h1>Hydrated Root</h1>
          <div>
            <h2>Nested</h2>
            <p>Parent: Hydrated Root</p>
          </div>
        </div>
        <script type="application/json" rmx-hydrated>
          {
            "moduleUrl": "/test.js",
            "exportName": "Test",
            "props": { "name": "Hydrated Root" },
            "id": "h1"
          }
        </script>
      `

      function Test({ name }: { name: string }) {
        return (
          <div>
            <h1>{name}</h1>
            <Nested name={name} />
          </div>
        )
      }

      let nestedMounted = false
      let nestedProps: any = null
      function Nested({ name }: { name: string }) {
        nestedMounted = true
        nestedProps = { name }
        return (
          <div>
            <h2>Nested</h2>
            <p>Parent: {name}</p>
          </div>
        )
      }

      let reconciler = createReconciler(container, {
        loadModule: async (url: string, name: string) => {
          return Test
        },
      })

      // Wait for initial hydration to complete
      await reconciler.adopt()

      // Verify component was mounted with correct props
      expect(nestedMounted).toBe(true)
      expect(nestedProps).toEqual({ name: 'Hydrated Root' })

      // Verify the nested component content was preserved
      expect(container.innerHTML).toContain('Parent: Hydrated Root')
    })

    it('updates hydrated components with new props from the server', async () => {
      let container = document.createElement('div')

      container.innerHTML = `
      <div>
        <h1>Static DOM</h1>
        <h2>Hydrated Component</h2>
        <script type="application/json" rmx-hydrated>
        {
          "moduleUrl": "/components/test.js",
          "exportName": "Test",
          "props": {"label": "Hydrated Component"},
          "id": "h1"
        }
        </script>
      </div>
    `

      // track original DOM elements, don't mutate them
      let h1 = container.querySelector('h1')
      let h2 = container.querySelector('h2')
      invariant(h1 instanceof HTMLHeadingElement)
      invariant(h2 instanceof HTMLHeadingElement)

      // Track component lifecycle
      let setupCount = 0
      let renderCount = 0
      let lastProps: any = null

      function Test(this: Remix.Handle) {
        setupCount++
        return (props: { label: string }) => {
          renderCount++
          lastProps = props
          return <h2>{props.label}</h2>
        }
      }

      let reconciler = createReconciler(container, {
        loadModule: async () => Test,
      })

      await reconciler.adopt()

      expect(setupCount).toBe(1)
      expect(renderCount).toBe(1)
      expect(lastProps).toEqual({ label: 'Hydrated Component' })
      expect(h2.textContent).toBe('Hydrated Component')
      expect(container.querySelector('h1')).toBe(h1)
      expect(container.querySelector('h2')).toBe(h2)

      // Server sends updated HTML with new props
      await reconciler.render(`
      <div>
        <h1>Static DOM</h1>
        <h2>Updated</h2>
        <script type="application/json" rmx-hydrated>
        {
          "moduleUrl": "/components/test.js",
          "exportName": "Test",
          "props": {"label": "Updated"},
          "id": "h1"
        }
        </script>
      </div>
    `)

      // Component should update, not remount
      expect(setupCount).toBe(1) // No new mount
      expect(renderCount).toBe(2) // Update happened
      expect(lastProps).toEqual({ label: 'Updated' })

      // DOM should be preserved but text updated
      expect(container.querySelector('h1')).toBe(h1)
      expect(container.querySelector('h2')).toBe(h2)
      expect(h2.textContent).toBe('Updated')
    })

    /**
     * This test can be a little confusing because we track component setup
     * calls to verify components are hydrated, but the server render calls also
     * setup the components, so the counters increment for both.
     */
    it('hydrates new components from the server after updates', async () => {
      let container = document.createElement('div')

      let divSetupCalls = 0
      let TestDiv = hydrated('/test.js#TestDiv', function (this: Remix.Handle) {
        divSetupCalls++
        return () => <div>test div</div>
      })

      let buttonSetupCalls = 0
      let TestButton = hydrated('/test.js#TestButton', function (this: Remix.Handle) {
        buttonSetupCalls++
        return () => <button>test button</button>
      })

      let ssrCount = 0
      function renderContent() {
        ssrCount++
        return (
          <main>
            <TestDiv />
            {ssrCount > 1 && <TestButton />}
          </main>
        )
      }

      let stream = renderToStream(renderContent())
      let simulator = simulateBrowserDocument(container, stream)
      await simulator.nextChunk()

      // ssr setup
      expect(divSetupCalls).toBe(1)
      expect(buttonSetupCalls).toBe(0) // not rendered

      let reconciler = createReconciler(container, {
        loadModule: async (_, name) => {
          if (name === 'TestDiv') return TestDiv
          if (name === 'TestButton') return TestButton
          throw new Error(`Unknown module: ${name}`)
        },
      })
      await reconciler.adopt()

      // hydration call
      expect(divSetupCalls).toBe(2)

      // sanity check initial render
      let div = container.querySelector('div')
      invariant(div instanceof HTMLDivElement)
      expect(div.textContent.trim()).toBe('test div')
      expect(container.querySelectorAll('main').length).toBe(1)

      // server render again
      let updateStream = renderToStream(renderContent())

      // ssr calls
      expect(divSetupCalls).toBe(3) // ssr + hydration + ssr
      expect(buttonSetupCalls).toBe(1) // new

      await reconciler.render(await drain(updateStream))

      // verify DOM retention
      expect(container.querySelector('div')).toBe(div)

      // verify new content
      let button = container.querySelector('button')
      invariant(button instanceof HTMLButtonElement)
      expect(button.textContent.trim()).toBe('test button')

      // verify no new content
      expect(container.querySelectorAll('main').length).toBe(1)

      // hydration calls it again
      expect(buttonSetupCalls).toBe(2) // ssr + hydration
      expect(divSetupCalls).toBe(3) // no new calls, reconciled correctly
    })
  })

  describe('adopt', () => {
    it('resolves without mutations when no hydration scripts exist', async () => {
      let container = document.createElement('div')
      container.innerHTML = `<div><p>hello</p></div>`
      let mutations = observeMutations(container)

      let reconciler = createReconciler(container)
      await reconciler.adopt()

      expect(mutations.consume()).toHaveLength(0)
      expect(container.innerHTML).toBe(`<div><p>hello</p></div>`)
    })

    it('adopts a streaming initial document late frames', async () => {
      let container = document.createElement('div')

      // control the frame resolution
      let [framePromise, resolveFrame] = withResolvers<Remix.RemixElement>()

      // Create initial stream with pending frame
      let stream = renderToStream(
        <div>
          <h1>Page Title</h1>
          <Frame src="/fragments/sidebar" fallback={<nav>Loading sidebar...</nav>} />
          <p>Main content</p>
        </div>,
        { resolveFrame: async () => framePromise },
      )

      let simulator = simulateBrowserDocument(container, stream)
      await simulator.nextChunk()

      // Track original elements to verify they're preserved
      let h1 = container.querySelector('h1')
      let p = container.querySelector('p')
      let frameEl = container.querySelector('nav')

      invariant(h1 && p && frameEl)

      // Verify initial state
      expect(h1.textContent).toBe('Page Title')
      expect(p.textContent).toBe('Main content')
      expect(frameEl.textContent).toBe('Loading sidebar...')

      // Create reconciler and adopt the initial content
      let reconciler = createReconciler(container)
      await reconciler.adopt()

      // Resolve the frame content
      resolveFrame(<nav>Loaded</nav>)

      // wait for the frame template to be inserted into the document
      await waitForMutations(frameEl, simulator.nextChunk)

      // verify DOM retention
      expect(container.querySelector('nav')).toBe(frameEl)
      expect(container.querySelector('h1')).toBe(h1)
      expect(container.querySelector('p')).toBe(p)

      // verify the frame content updated
      expect(frameEl.textContent).toBe('Loaded')

      simulator.releaseLock()
    })

    it('adopts early frames on initial document streams', async () => {
      let container = document.createElement('div')

      // control the frame resolution
      let [framePromise, resolveFrame] = withResolvers<Remix.RemixElement>()

      // Create initial stream with pending frame
      let stream = renderToStream(
        <div>
          <h1>Page Title</h1>
          <Frame src="/fragments/sidebar" fallback={<nav>Loading sidebar...</nav>} />
          <p>Main content</p>
        </div>,
        { resolveFrame: async () => framePromise },
      )

      let simulator = simulateBrowserDocument(container, stream)

      // initial document
      await simulator.nextChunk()

      // Track original elements to verify they're preserved
      let h1 = container.querySelector('h1')
      let p = container.querySelector('p')
      let frameEl = container.querySelector('nav')

      invariant(h1 && p && frameEl)

      // Verify initial state
      expect(h1.textContent).toBe('Page Title')
      expect(p.textContent).toBe('Main content')
      expect(frameEl.textContent).toBe('Loading sidebar...')

      // KEY: stream template in before adoption
      resolveFrame(<nav>Loaded</nav>)
      await simulator.nextChunk()
      expect(container.querySelector('template[id="f1"]')).toBeDefined()

      // Create reconciler and adopt the initial content after the template is inserted
      let reconciler = createReconciler(container)

      // Wait for the frame to be replaced
      await waitForMutations(frameEl, reconciler.adopt)

      // verify DOM retention
      expect(container.querySelector('nav')).toBe(frameEl)
      expect(container.querySelector('h1')).toBe(h1)
      expect(container.querySelector('p')).toBe(p)

      // verify the frame content updated
      expect(frameEl.textContent).toBe('Loaded')

      simulator.releaseLock()
    })

    it.todo('handles mismatches')
  })

  describe('vdom patches', () => {
    it('insert', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      reconciler.render(<div />)
      expect(container.innerHTML).toBe('<div></div>')

      reconciler.render(
        <div>
          <span>a</span>
        </div>,
      )
      expect(container.innerHTML).toBe('<div><span>a</span></div>')
    })

    it('remove', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      reconciler.render(
        <div>
          <span>a</span>
          <b>b</b>
        </div>,
      )
      expect(container.innerHTML).toBe('<div><span>a</span><b>b</b></div>')

      reconciler.render(
        <div>
          <span>a</span>
        </div>,
      )
      expect(container.innerHTML).toBe('<div><span>a</span></div>')
    })

    it('replace', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      reconciler.render(
        <div>
          <span>a</span>
        </div>,
      )
      expect(container.innerHTML).toBe('<div><span>a</span></div>')

      reconciler.render(
        <div>
          <b>b</b>
        </div>,
      )
      expect(container.innerHTML).toBe('<div><b>b</b></div>')
    })

    describe('keyed children', () => {
      it('preserves identity on middle insert with keys', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(
          <div>
            <span key="a">a</span>
            <b key="b">b</b>
          </div>,
        )

        let a = container.querySelector('span')
        let b = container.querySelector('b')
        invariant(a instanceof HTMLSpanElement)
        invariant(b instanceof HTMLElement)

        reconciler.render(
          <div>
            <span key="a">a</span>
            <i key="i">i</i>
            <b key="b">b</b>
          </div>,
        )

        expect(container.querySelector('span')).toBe(a)
        expect(container.querySelector('b')).toBe(b)
        expect(container.innerHTML).toBe('<div><span>a</span><i>i</i><b>b</b></div>')
      })

      it('preserves identity on simple swap using keys', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(
          <div>
            <span key="a">a</span>
            <b key="b">b</b>
          </div>,
        )

        let a = container.querySelector('span')
        let b = container.querySelector('b')
        invariant(a instanceof HTMLSpanElement)
        invariant(b instanceof HTMLElement)

        reconciler.render(
          <div>
            <b key="b">b</b>
            <span key="a">a</span>
          </div>,
        )

        expect(container.querySelector('span')).toBe(a)
        expect(container.querySelector('b')).toBe(b)
        expect(container.innerHTML).toBe('<div><b>b</b><span>a</span></div>')
      })

      describe('complex moves', () => {
        it('prepends new keyed node and preserves following identities', () => {
          let container = document.createElement('div')
          let reconciler = createReconciler(container)

          reconciler.render(
            <div>
              <span key="a">a</span>
              <b key="b">b</b>
              <i key="c">c</i>
            </div>,
          )

          let a = container.querySelector('span')
          let b = container.querySelector('b')
          let c = container.querySelector('i')
          invariant(a instanceof HTMLSpanElement)
          invariant(b instanceof HTMLElement)
          invariant(c instanceof HTMLElement)

          reconciler.render(
            <div>
              <u key="x">x</u>
              <span key="a">a</span>
              <b key="b">b</b>
              <i key="c">c</i>
            </div>,
          )

          expect(container.querySelector('span')).toBe(a)
          expect(container.querySelector('b')).toBe(b)
          expect(container.querySelector('i')).toBe(c)
          expect(container.innerHTML).toBe('<div><u>x</u><span>a</span><b>b</b><i>c</i></div>')
        })

        it('moves last to first with keys', () => {
          let container = document.createElement('div')
          let reconciler = createReconciler(container)

          reconciler.render(
            <div>
              <span key="a">a</span>
              <b key="b">b</b>
              <i key="c">c</i>
            </div>,
          )

          let a = container.querySelector('span')
          let b = container.querySelector('b')
          let c = container.querySelector('i')
          invariant(a instanceof HTMLSpanElement)
          invariant(b instanceof HTMLElement)
          invariant(c instanceof HTMLElement)

          reconciler.render(
            <div>
              <i key="c">c</i>
              <span key="a">a</span>
              <b key="b">b</b>
            </div>,
          )

          expect(container.querySelector('span')).toBe(a)
          expect(container.querySelector('b')).toBe(b)
          expect(container.querySelector('i')).toBe(c)
          expect(container.innerHTML).toBe('<div><i>c</i><span>a</span><b>b</b></div>')
        })

        it('moves first to last with keys', () => {
          let container = document.createElement('div')
          let reconciler = createReconciler(container)

          reconciler.render(
            <div>
              <span key="a">a</span>
              <b key="b">b</b>
              <i key="c">c</i>
            </div>,
          )

          let a = container.querySelector('span')
          let b = container.querySelector('b')
          let c = container.querySelector('i')
          invariant(a instanceof HTMLSpanElement)
          invariant(b instanceof HTMLElement)
          invariant(c instanceof HTMLElement)

          reconciler.render(
            <div>
              <b key="b">b</b>
              <i key="c">c</i>
              <span key="a">a</span>
            </div>,
          )

          expect(container.querySelector('span')).toBe(a)
          expect(container.querySelector('b')).toBe(b)
          expect(container.querySelector('i')).toBe(c)
          expect(container.innerHTML).toBe('<div><b>b</b><i>c</i><span>a</span></div>')
        })

        it('removes first and inserts two at start with keys', () => {
          let container = document.createElement('div')
          let reconciler = createReconciler(container)

          reconciler.render(
            <div>
              <span key="a">a</span>
              <b key="b">b</b>
              <i key="c">c</i>
            </div>,
          )

          let b = container.querySelector('b')
          let c = container.querySelector('i')
          invariant(b instanceof HTMLElement)
          invariant(c instanceof HTMLElement)

          reconciler.render(
            <div>
              <u key="x">x</u>
              <em key="y">y</em>
              <b key="b">b</b>
              <i key="c">c</i>
            </div>,
          )

          expect(container.querySelector('b')).toBe(b)
          expect(container.querySelector('i')).toBe(c)
          expect(container.innerHTML).toBe('<div><u>x</u><em>y</em><b>b</b><i>c</i></div>')
        })

        it('interleaved insert/remove in middle with keys', () => {
          let container = document.createElement('div')
          let reconciler = createReconciler(container)

          reconciler.render(
            <div>
              <span key="a">a</span>
              <b key="b">b</b>
              <i key="c">c</i>
              <u key="d">d</u>
            </div>,
          )

          let a = container.querySelector('span')
          let c = container.querySelector('i')
          invariant(a instanceof HTMLSpanElement)
          invariant(c instanceof HTMLElement)

          reconciler.render(
            <div>
              <span key="a">a</span>
              <em key="x">x</em>
              <i key="c">c</i>
            </div>,
          )

          expect(container.querySelector('span')).toBe(a)
          expect(container.querySelector('i')).toBe(c)
          expect(container.innerHTML).toBe('<div><span>a</span><em>x</em><i>c</i></div>')
        })
      })
    })

    it.skip('inserts a sibling in the middle (structure is correct)', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      reconciler.render(
        <div>
          <span>a</span>
          <b>b</b>
        </div>,
      )

      let span = container.querySelector('span')
      let b = container.querySelector('b')

      invariant(span instanceof HTMLSpanElement)
      invariant(b instanceof HTMLElement)

      reconciler.render(
        <div>
          <span>a</span>
          <i>i</i>
          <b>b</b>
        </div>,
      )

      expect(container.querySelector('span')).toBe(span)
      expect(container.querySelector('b')).toBe(b)

      expect(container.innerHTML).toBe('<div><span>a</span><i>i</i><b>b</b></div>')
    })

    it('setAttribute', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      // Initial render with attributes
      reconciler.render(
        <button id="btn1" className="primary" disabled={true}>
          Click me
        </button>,
      )

      let button = container.querySelector('button')
      invariant(button instanceof HTMLButtonElement)

      expect(button.id).toBe('btn1')
      expect(button.className).toBe('primary')
      expect(button.disabled).toBe(true)

      // Update attributes
      reconciler.render(
        <button id="btn2" className="secondary" disabled={false}>
          Click me
        </button>,
      )

      // Should be the same button element
      let updatedButton = container.querySelector('button')
      expect(updatedButton).toBe(button)

      // Attributes should be updated
      expect(button.id).toBe('btn2')
      expect(button.className).toBe('secondary')
      expect(button.disabled).toBe(false)
    })

    it('removeAttribute', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      // Initial render with attributes
      reconciler.render(
        <button id="btn1" className="primary" disabled={true}>
          Click me
        </button>,
      )

      let button = container.querySelector('button')
      invariant(button instanceof HTMLButtonElement)

      expect(button.id).toBe('btn1')
      expect(button.className).toBe('primary')
      expect(button.disabled).toBe(true)

      // Update: remove all attributes by omitting them
      reconciler.render(<button>Click me</button>)

      let updatedButton = container.querySelector('button')
      expect(updatedButton).toBe(button)

      // Attributes should be removed
      expect(button.hasAttribute('id')).toBe(false)
      expect(button.id).toBe('')

      expect(button.hasAttribute('class')).toBe(false)
      expect(button.className).toBe('')

      expect(button.hasAttribute('disabled')).toBe(false)
      expect(button.disabled).toBe(false)
    })

    describe('aria and data boolean attributes', () => {
      it('handles aria-* booleans like old reconciler (true -> "", false -> "false", omit -> remove)', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        // true -> empty string
        reconciler.render(<button aria-expanded={true}>x</button>)
        let btn = container.querySelector('button')
        invariant(btn instanceof HTMLButtonElement)
        expect(btn.getAttribute('aria-expanded')).toBe('')

        // false -> "false"
        reconciler.render(<button aria-expanded={false}>x</button>)
        expect(btn.getAttribute('aria-expanded')).toBe('false')

        // omit -> remove
        reconciler.render(<button>x</button>)
        expect(btn.hasAttribute('aria-expanded')).toBe(false)
      })

      it('handles data-* booleans like old reconciler (true -> "", false -> "false", omit -> remove)', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        // true -> empty string
        reconciler.render(<div data-active={true}>x</div>)
        let div = container.querySelector('div')
        invariant(div instanceof HTMLDivElement)
        expect(div.getAttribute('data-active')).toBe('')

        // false -> "false"
        reconciler.render(<div data-active={false}>x</div>)
        expect(div.getAttribute('data-active')).toBe('false')

        // omit -> remove
        reconciler.render(<div>x</div>)
        expect(div.hasAttribute('data-active')).toBe(false)
      })

      it('preserves explicit string values for aria/data attributes', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(
          <button aria-expanded="true" data-active="false">
            x
          </button>,
        )
        let btn = container.querySelector('button')
        invariant(btn instanceof HTMLButtonElement)
        expect(btn.getAttribute('aria-expanded')).toBe('true')
        expect(btn.getAttribute('data-active')).toBe('false')
      })
    })

    describe('innerHTML', () => {
      it('sets innerHTML on initial render', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(<div innerHTML="<span>a</span>" />)

        let div = container.querySelector('div')
        invariant(div instanceof HTMLDivElement)
        expect(div.innerHTML).toBe('<span>a</span>')
      })

      it('updates innerHTML string on rerender', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(<div innerHTML="<span>a</span>" />)

        let div = container.querySelector('div')
        invariant(div instanceof HTMLDivElement)
        expect(div.innerHTML).toBe('<span>a</span>')

        reconciler.render(<div innerHTML="<b>b</b>" />)
        expect(div.innerHTML).toBe('<b>b</b>')
      })

      it('removes innerHTML when prop omitted', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(<div innerHTML="<span>a</span>" />)

        let div = container.querySelector('div')
        invariant(div instanceof HTMLDivElement)
        expect(div.innerHTML).toBe('<span>a</span>')

        reconciler.render(<div />)
        expect(div.innerHTML).toBe('')
      })
    })

    describe('style prop', () => {
      it('applies and updates string style, and removes when omitted', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(<div style="color: red; padding: 2px;">x</div>)

        let div = container.querySelector('div')
        invariant(div instanceof HTMLDivElement)

        expect(div.style.color).toBe('red')
        expect(div.style.padding).toBe('2px')

        reconciler.render(<div style="color: blue; margin: 1px;">x</div>)

        expect(div.style.color).toBe('blue')
        expect(div.style.padding).toBe('')
        expect(div.style.margin).toBe('1px')

        // Omit style to remove all inline styles
        reconciler.render(<div>x</div>)
        expect(div.style.cssText).toBe('')
      })

      it('diffs object styles shallowly: updates changed keys and removes missing', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(<div style={{ color: 'red', backgroundColor: 'white' }}>x</div>)

        let div = container.querySelector('div')
        invariant(div instanceof HTMLDivElement)

        expect(div.style.color).toBe('red')
        expect(div.style.backgroundColor).toBe('white')

        // Update only color; backgroundColor should be removed by shallow diff
        reconciler.render(<div style={{ color: 'blue' }}>x</div>)

        expect(div.style.color).toBe('blue')
        expect(div.style.backgroundColor).toBe('')
      })

      it('replaces style on cross-type changes (string <-> object)', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(<div style="color: red; padding: 2px;">x</div>)

        let div = container.querySelector('div')
        invariant(div instanceof HTMLDivElement)

        expect(div.style.color).toBe('red')
        expect(div.style.padding).toBe('2px')

        // Switch to object style: previous string-based styles should be cleared
        reconciler.render(<div style={{ margin: '1px' }}>x</div>)
        expect(div.style.color).toBe('')
        expect(div.style.padding).toBe('')
        expect(div.style.margin).toBe('1px')

        // Switch back to string style: object-based styles should be cleared
        reconciler.render(<div style="color: green">x</div>)
        expect(div.style.margin).toBe('')
        expect(div.style.color).toBe('green')
      })

      it('supports camelCase keys and CSS custom properties', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(
          <div style={{ backgroundColor: 'black', '--theme-primary': 'red' }}>x</div>,
        )

        let div = container.querySelector('div')
        invariant(div instanceof HTMLDivElement)

        expect(div.style.backgroundColor).toBe('black')
        expect(div.style.getPropertyValue('--theme-primary')).toBe('red')

        // Update both
        reconciler.render(
          <div style={{ backgroundColor: 'white', '--theme-primary': 'blue' }}>x</div>,
        )
        expect(div.style.backgroundColor).toBe('white')
        expect(div.style.getPropertyValue('--theme-primary')).toBe('blue')
      })
    })

    describe('setProperty', () => {
      it('sets input value via property and preserves caret on rerender', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        // Initial render
        reconciler.render(<input type="text" value="hello" />)

        let input = container.querySelector('input')
        invariant(input instanceof HTMLInputElement)
        expect(input.value).toBe('hello')

        // Simulate user cursor at index 3
        input.focus()
        input.setSelectionRange(3, 3)

        // Rerender with the same value should not thrash value property
        reconciler.render(<input type="text" value="hello" />)

        expect(input.value).toBe('hello')
        expect(input.selectionStart).toBe(3)
        expect(input.selectionEnd).toBe(3)

        // Update value and ensure property changes
        reconciler.render(<input type="text" value="hello!" />)
        expect(input.value).toBe('hello!')
      })

      it('toggles checkbox checked via property (attribute remains unset)', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        // Initial render unchecked
        reconciler.render(<input type="checkbox" checked={false} />)

        let input = container.querySelector('input')
        invariant(input instanceof HTMLInputElement)
        expect(input.checked).toBe(false)
        expect(input.getAttribute('checked')).toBeNull()

        // Toggle to checked
        reconciler.render(<input type="checkbox" checked={true} />)

        expect(input.checked).toBe(true)
        // Property updates do not mirror to attributes
        expect(input.getAttribute('checked')).toBeNull()
      })

      it('sets select.multiple and selectedIndex after options are present', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(
          <select multiple={true} selectedIndex={1}>
            <option>One</option>
            <option>Two</option>
          </select>,
        )

        let select = container.querySelector('select')
        invariant(select instanceof HTMLSelectElement)
        expect(select.multiple).toBe(true)
        expect(select.selectedIndex).toBe(1)

        // Update selectedIndex
        reconciler.render(
          <select multiple={true} selectedIndex={0}>
            <option>One</option>
            <option>Two</option>
          </select>,
        )
        expect(select.selectedIndex).toBe(0)
      })

      it('removes input value when prop omitted (value -> "")', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(<input type="text" value="hi" />)

        let input = container.querySelector('input')
        invariant(input instanceof HTMLInputElement)
        expect(input.value).toBe('hi')

        // Omit value prop
        reconciler.render(<input type="text" />)

        expect(input.value).toBe('')
      })

      it('removes checkbox checked when prop omitted (checked -> false)', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(<input type="checkbox" checked={true} />)

        let input = container.querySelector('input')
        invariant(input instanceof HTMLInputElement)
        expect(input.checked).toBe(true)

        // Omit checked prop
        reconciler.render(<input type="checkbox" />)

        expect(input.checked).toBe(false)
        expect(input.getAttribute('checked')).toBeNull()
      })

      it('removes selectedIndex when prop omitted (-> -1)', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(
          <select selectedIndex={1}>
            <option>One</option>
            <option>Two</option>
          </select>,
        )

        let select = container.querySelector('select')
        invariant(select instanceof HTMLSelectElement)
        expect(select.selectedIndex).toBe(1)

        // Omit selectedIndex prop
        reconciler.render(
          <select>
            <option>One</option>
            <option>Two</option>
          </select>,
        )

        expect(select.selectedIndex).toBe(-1)
      })

      it('toggles select multiple off (true -> false)', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(
          <select multiple={true}>
            <option>One</option>
            <option>Two</option>
          </select>,
        )

        let select = container.querySelector('select')
        invariant(select instanceof HTMLSelectElement)
        expect(select.multiple).toBe(true)

        // Toggle off
        reconciler.render(
          <select multiple={false}>
            <option>One</option>
            <option>Two</option>
          </select>,
        )
        expect(select.multiple).toBe(false)
      })

      it('handles textarea value via property and removal to empty string', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(<textarea value="abc" />)

        let ta = container.querySelector('textarea')
        invariant(ta instanceof HTMLTextAreaElement)
        expect(ta.value).toBe('abc')

        // Update value
        reconciler.render(<textarea value="xyz" />)
        expect(ta.value).toBe('xyz')

        // Remove value prop
        reconciler.render(<textarea />)
        expect(ta.value).toBe('')
      })
    })

    describe('className', () => {
      it('adds and removes classes when className changes (string -> string)', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(<div className="a b">x</div>)

        let div = container.querySelector('div')
        invariant(div instanceof HTMLDivElement)
        expect(div.classList.contains('a')).toBe(true)
        expect(div.classList.contains('b')).toBe(true)

        // Update: remove "a", keep "b", add "c"
        reconciler.render(<div className="b c">x</div>)

        expect(div.classList.contains('a')).toBe(false)
        expect(div.classList.contains('b')).toBe(true)
        expect(div.classList.contains('c')).toBe(true)
      })

      it('removes all classes when className is omitted', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(<div className="a b">x</div>)

        let div = container.querySelector('div')
        invariant(div instanceof HTMLDivElement)
        expect(div.className).toBe('a b')

        // Omit className
        reconciler.render(<div>x</div>)
        expect(div.className).toBe('')
        expect(div.getAttribute('class')).toBeNull()
      })

      it('applies the class order specified by the updated className', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(<div className="a b c d">x</div>)

        let div = container.querySelector('div')
        invariant(div instanceof HTMLDivElement)
        expect(div.className).toBe('a b c d')

        // Complex change: remove c, add e, and reorder to d b e a
        reconciler.render(<div className="d b e a">x</div>)

        expect(div.className).toBe('d b e a')
      })
    })
  })

  describe('dom node patches', () => {
    describe('structure', () => {
      it('insert', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render('<div><span>a</span></div>')

        let span = container.querySelector('span')
        invariant(span instanceof HTMLSpanElement)

        reconciler.render('<div><span>a</span><i>i</i></div>')

        expect(container.querySelector('span')).toBe(span)
        expect(container.innerHTML).toBe('<div><span>a</span><i>i</i></div>')
      })

      it('remove', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render('<div><span>a</span><b>b</b></div>')

        let span = container.querySelector('span')
        invariant(span instanceof HTMLSpanElement)

        reconciler.render('<div><span>a</span></div>')

        expect(container.querySelector('span')).toBe(span)
        expect(container.innerHTML).toBe('<div><span>a</span></div>')
      })

      it('replace', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render('<div><span>a</span></div>')

        reconciler.render('<div><b>b</b></div>')

        expect(container.innerHTML).toBe('<div><b>b</b></div>')
      })

      it('set text', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render('<div><span>a</span></div>')

        let span = container.querySelector('span')
        invariant(span instanceof HTMLSpanElement)

        reconciler.render('<div><span>b</span></div>')

        expect(container.querySelector('span')).toBe(span)
        expect(container.innerHTML).toBe('<div><span>b</span></div>')
      })
    })

    describe('attributes', () => {
      it('sets attributes', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        // Initial DOM-render (string) with attributes
        reconciler.render('<button id="btn1">Click me</button>')

        let button = container.querySelector('button')
        invariant(button instanceof HTMLButtonElement)
        expect(button.getAttribute('id')).toBe('btn1')

        // add class attribute
        reconciler.render('<button id="btn2" class="primary">Click me</button>')

        let updatedButton = container.querySelector('button')
        expect(updatedButton).toBe(button)

        expect(button.getAttribute('id')).toBe('btn2')
        expect(button.getAttribute('class')).toBe('primary')
      })

      it('updates attributes', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        // Initial DOM-render (string) with attributes
        reconciler.render('<button class="primary">Click me</button>')

        let button = container.querySelector('button')
        invariant(button instanceof HTMLButtonElement)
        expect(button.getAttribute('class')).toBe('primary')

        // Update DOM-render (string) with changed class
        reconciler.render('<button class="secondary">Click me</button>')

        let updatedButton = container.querySelector('button')
        expect(updatedButton).toBe(button)

        expect(button.getAttribute('class')).toBe('secondary')
      })

      it('removes attributes', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render('<button id="btn1" class="primary">Click me</button>')

        let button = container.querySelector('button')
        invariant(button instanceof HTMLButtonElement)
        expect(button.getAttribute('id')).toBe('btn1')
        expect(button.getAttribute('class')).toBe('primary')

        reconciler.render('<button id="btn1">Click me</button>')
        expect(button.getAttribute('id')).toBe('btn1')
        expect(button.getAttribute('class')).toBeNull()
      })
    })

    describe('dom state', () => {
      it.todo('does not change value on inputs')
      it.todo('maintains focus on moved element')
      it.todo('maintains selection on moved element')
    })

    describe('keyed moves/inserts/removes', () => {
      it('preserves identity on middle insert with keys', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render('<div><span data-key="a">a</span><b data-key="b">b</b></div>')

        let a = container.querySelector('span')
        let b = container.querySelector('b')
        invariant(a instanceof HTMLSpanElement)
        invariant(b instanceof HTMLElement)

        reconciler.render(
          '<div><span data-key="a">a</span><i data-key="i">i</i><b data-key="b">b</b></div>',
        )

        expect(container.querySelector('span')).toBe(a)
        expect(container.querySelector('b')).toBe(b)

        let parent = container.querySelector('div')
        invariant(parent instanceof HTMLDivElement)
        let order = Array.from(parent.children).map((el) => el.tagName)
        expect(order).toEqual(['SPAN', 'I', 'B'])
      })

      it('preserves identity on simple swap using keys', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render('<div><span data-key="a">a</span><b data-key="b">b</b></div>')

        let a = container.querySelector('span')
        let b = container.querySelector('b')
        invariant(a instanceof HTMLSpanElement)
        invariant(b instanceof HTMLElement)

        reconciler.render('<div><b data-key="b">b</b><span data-key="a">a</span></div>')

        expect(container.querySelector('span')).toBe(a)
        expect(container.querySelector('b')).toBe(b)

        let parent = container.querySelector('div')
        invariant(parent instanceof HTMLDivElement)
        let order = Array.from(parent.children).map((el) => el.tagName)
        expect(order).toEqual(['B', 'SPAN'])
      })

      it('prepends new keyed node and preserves following identities', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(
          '<div><span data-key="a">a</span><b data-key="b">b</b><i data-key="c">c</i></div>',
        )

        let a = container.querySelector('span')
        let b = container.querySelector('b')
        let c = container.querySelector('i')
        invariant(a instanceof HTMLSpanElement)
        invariant(b instanceof HTMLElement)
        invariant(c instanceof HTMLElement)

        reconciler.render(
          '<div><u data-key="x">x</u><span data-key="a">a</span><b data-key="b">b</b><i data-key="c">c</i></div>',
        )

        expect(container.querySelector('span')).toBe(a)
        expect(container.querySelector('b')).toBe(b)
        expect(container.querySelector('i')).toBe(c)

        let parent = container.querySelector('div')
        invariant(parent instanceof HTMLDivElement)
        let order = Array.from(parent.children).map((el) => el.tagName)
        expect(order).toEqual(['U', 'SPAN', 'B', 'I'])
      })

      it('moves last to first with keys', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(
          '<div><span data-key="a">a</span><b data-key="b">b</b><i data-key="c">c</i></div>',
        )

        let a = container.querySelector('span')
        let b = container.querySelector('b')
        let c = container.querySelector('i')
        invariant(a instanceof HTMLSpanElement)
        invariant(b instanceof HTMLElement)
        invariant(c instanceof HTMLElement)

        reconciler.render(
          '<div><i data-key="c">c</i><span data-key="a">a</span><b data-key="b">b</b></div>',
        )

        expect(container.querySelector('span')).toBe(a)
        expect(container.querySelector('b')).toBe(b)
        expect(container.querySelector('i')).toBe(c)

        let parent = container.querySelector('div')
        invariant(parent instanceof HTMLDivElement)
        let order = Array.from(parent.children).map((el) => el.tagName)
        expect(order).toEqual(['I', 'SPAN', 'B'])
      })

      it('moves first to last with keys', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(
          '<div><span data-key="a">a</span><b data-key="b">b</b><i data-key="c">c</i></div>',
        )

        let a = container.querySelector('span')
        let b = container.querySelector('b')
        let c = container.querySelector('i')
        invariant(a instanceof HTMLSpanElement)
        invariant(b instanceof HTMLElement)
        invariant(c instanceof HTMLElement)

        reconciler.render(
          '<div><b data-key="b">b</b><i data-key="c">c</i><span data-key="a">a</span></div>',
        )

        expect(container.querySelector('span')).toBe(a)
        expect(container.querySelector('b')).toBe(b)
        expect(container.querySelector('i')).toBe(c)

        let parent = container.querySelector('div')
        invariant(parent instanceof HTMLDivElement)
        let order = Array.from(parent.children).map((el) => el.tagName)
        expect(order).toEqual(['B', 'I', 'SPAN'])
      })

      it('removes first and inserts two at start with keys', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(
          '<div><span data-key="a">a</span><b data-key="b">b</b><i data-key="c">c</i></div>',
        )

        let b = container.querySelector('b')
        let c = container.querySelector('i')
        invariant(b instanceof HTMLElement)
        invariant(c instanceof HTMLElement)

        reconciler.render(
          '<div><u data-key="x">x</u><em data-key="y">y</em><b data-key="b">b</b><i data-key="c">c</i></div>',
        )

        expect(container.querySelector('b')).toBe(b)
        expect(container.querySelector('i')).toBe(c)

        let parent = container.querySelector('div')
        invariant(parent instanceof HTMLDivElement)
        let order = Array.from(parent.children).map((el) => el.tagName)
        expect(order).toEqual(['U', 'EM', 'B', 'I'])
      })

      it('interleaved insert/remove in middle with keys', () => {
        let container = document.createElement('div')
        let reconciler = createReconciler(container)

        reconciler.render(
          '<div><span data-key="a">a</span><b data-key="b">b</b><i data-key="c">c</i><u data-key="d">d</u></div>',
        )

        let a = container.querySelector('span')
        let c = container.querySelector('i')
        invariant(a instanceof HTMLSpanElement)
        invariant(c instanceof HTMLElement)

        reconciler.render(
          '<div><span data-key="a">a</span><em data-key="x">x</em><i data-key="c">c</i></div>',
        )

        expect(container.querySelector('span')).toBe(a)
        expect(container.querySelector('i')).toBe(c)

        let parent = container.querySelector('div')
        invariant(parent instanceof HTMLDivElement)
        let order = Array.from(parent.children).map((el) => el.tagName)
        expect(order).toEqual(['SPAN', 'EM', 'I'])
      })
    })

    describe('comment-bounded reconcilers', () => {
      it('replaces entire interior with a different root element', async () => {
        let host = document.createElement('div')
        let start = document.createComment('frame:start:test')
        let end = document.createComment('frame:end:test')
        host.appendChild(start)
        host.appendChild(end)

        let reconciler = createReconciler([start, end])

        await reconciler.render('<div id="r"><span>X</span></div>')

        let firstRoot = host.querySelector('#r')
        invariant(firstRoot instanceof HTMLElement)
        let firstSpan = host.querySelector('span')
        invariant(firstSpan instanceof HTMLSpanElement)
        expect(firstSpan.textContent).toBe('X')

        await reconciler.render(
          '<section id="r"><span>X updated</span><button>New</button></section>',
        )

        let newRoot = host.querySelector('#r')
        invariant(newRoot instanceof HTMLElement)
        expect(newRoot.tagName).toBe('SECTION')
        expect(newRoot).not.toBe(firstRoot)

        let span = host.querySelector('span')
        invariant(span instanceof HTMLSpanElement)
        expect(span.textContent).toBe('X updated')
        let button = host.querySelector('button')
        invariant(button instanceof HTMLButtonElement)
        expect(button.textContent).toBe('New')
      })

      it('preserves keyed child identity under same root', async () => {
        let host = document.createElement('div')
        let start = document.createComment('frame:start:test2')
        let end = document.createComment('frame:end:test2')
        host.appendChild(start)
        host.appendChild(end)

        let reconciler = createReconciler([start, end])

        await reconciler.render('<div><span data-key="x">X</span></div>')

        let span = host.querySelector('span[data-key="x"]')
        invariant(span instanceof HTMLSpanElement)

        await reconciler.render(
          '<div><b data-key="y">Y</b><span data-key="x">X updated</span></div>',
        )

        let newSpan = host.querySelector('span[data-key="x"]')
        invariant(newSpan instanceof HTMLSpanElement)
        expect(newSpan).toBe(span)
        expect(newSpan.textContent).toBe('X updated')

        let b = host.querySelector('b[data-key="y"]')
        invariant(b instanceof HTMLElement)
        expect(b.textContent).toBe('Y')
      })
    })
  })

  describe('frames', () => {
    it('maintains static DOM and hydrated component state within sub-reconcilers', async () => {
      let container = document.createElement('div')

      // Initial HTML with frame containing static + hydrated content
      // TODO: switch to renderToStream
      container.innerHTML = `
      <h1>Main Title</h1>
      <!-- frame:start:f1 -->
      <div>
        <h2>Static Frame Content</h2>
        <button>Hydrated Button</button>
        <script type="application/json" rmx-hydrated>
        {
          "moduleUrl": "/test.js",
          "exportName": "Button",
          "props": {"label": "Hydrated Button"},
          "id": "h1"
        }
        </script>
      </div>
      <!-- frame:end:f1 -->
      <script type="application/json" rmx-frame>
      {
        "src": "/fragments/test",
        "id": "f1",
        "status": "resolved"
      }
      </script>
    `

      // Track elements
      let h1 = container.querySelector('h1')
      let h2 = container.querySelector('h2')
      let button = container.querySelector('button')
      let frameScript = container.querySelector('script[rmx-frame]')

      invariant(h1 instanceof HTMLHeadingElement)
      invariant(h2 instanceof HTMLHeadingElement)
      invariant(button instanceof HTMLButtonElement)
      invariant(frameScript instanceof HTMLScriptElement)

      // Track component lifecycle
      let buttonSetupCount = 0
      let buttonRenderCount = 0
      let buttonLastProps: any = null

      function Button(this: Remix.Handle) {
        buttonSetupCount++
        return (props: { label: string }) => {
          buttonRenderCount++
          buttonLastProps = props
          return <button>{props.label}</button>
        }
      }

      // Create reconciler and adopt
      let reconciler = createReconciler(container, {
        loadModule: async (url: string, name: string) => {
          if (name === 'Button') return Button
          throw new Error(`Unknown module: ${url}#${name}`)
        },
      })

      await reconciler.adopt()

      // Verify sub-reconciler was created and adopted its content
      expect(buttonSetupCount).toBe(1)
      expect(buttonRenderCount).toBe(1)
      expect(buttonLastProps).toEqual({ label: 'Hydrated Button' })

      // Frame script should be removed during adopt
      expect(container.querySelector('script[rmx-frame]')).toBeNull()

      // DOM should be preserved
      expect(container.querySelector('h1')).toBe(h1)
      expect(container.querySelector('h2')).toBe(h2)
      expect(container.querySelector('button')).toBe(button)

      // Then render new content with updated frame
      await reconciler.render(`
      <h1>Main Title</h1>
      <!-- frame:start:f1 -->
      <div>
        <h2>Updated Frame Content</h2>
        <button>Updated Button</button>
        <script type="application/json" rmx-hydrated>
        {
          "moduleUrl": "/test.js", 
          "exportName": "Button",
          "props": {"label": "Updated Button"},
          "id": "h1"
        }
        </script>
      </div>
      <!-- frame:end:f1 -->
      <script type="application/json" rmx-frame>
      {
        "src": "/fragments/test",
        "id": "f1",
        "status": "resolved"
      }
      </script>
    `)

      // Component should update, not remount
      expect(buttonSetupCount).toBe(1) // No new mount
      expect(buttonRenderCount).toBe(2) // Update happened
      expect(buttonLastProps).toEqual({ label: 'Updated Button' })

      // Verify DOM preservation
      expect(container.querySelector('h1')).toBe(h1) // Main preserved
      expect(container.querySelector('h2')).toBe(h2) // Frame static preserved
      expect(container.querySelector('button')).toBe(button) // Frame hydrated preserved
      expect(h2.textContent).toBe('Updated Frame Content')
      expect(button.textContent).toBe('Updated Button')
    })

    it('creates nested sub-reconcilers and maintains their state', async () => {
      let container = document.createElement('div')

      // Initial HTML with nested frames
      container.innerHTML = `
      <h1>Top Level</h1>
      <!-- frame:start:outer -->
      <div>
        <h2>Outer Frame</h2>
        <!-- frame:start:inner -->
        <div>
          <h3>Inner Frame</h3>
          <span>Inner Content</span>
        </div>
        <!-- frame:end:inner -->
        <script type="application/json" rmx-frame>
        {
          "src": "/fragments/inner",
          "id": "inner",
          "status": "resolved"
        }
        </script>
        <p>Outer Content</p>
      </div>
      <!-- frame:end:outer -->
      <script type="application/json" rmx-frame>
      {
        "src": "/fragments/outer",
        "id": "outer",
        "status": "resolved"
      }
      </script>
    `

      // Track elements
      let h1 = container.querySelector('h1')
      let h2 = container.querySelector('h2')
      let h3 = container.querySelector('h3')
      let span = container.querySelector('span')
      let p = container.querySelector('p')

      invariant(h1 && h2 && h3 && span && p)

      // Create reconciler and adopt
      let reconciler = createReconciler(container)
      await reconciler.adopt()

      // Frame scripts should be removed during adopt
      expect(container.querySelectorAll('script[rmx-frame]').length).toBe(0)

      // Update with new content
      await reconciler.render(`
      <h1>Top Level Updated</h1>
      <!-- frame:start:outer -->
      <div>
        <h2>Outer Frame Updated</h2>
        <!-- frame:start:inner -->
        <div>
          <h3>Inner Frame Updated</h3>
          <span>Inner Content Updated</span>
        </div>
        <!-- frame:end:inner -->
        <script type="application/json" rmx-frame>
        {
          "src": "/fragments/inner",
          "id": "inner",
          "status": "resolved"
        }
        </script>
        <p>Outer Content Updated</p>
      </div>
      <!-- frame:end:outer -->
      <script type="application/json" rmx-frame>
      {
        "src": "/fragments/outer",
        "id": "outer",
        "status": "resolved"
      }
      </script>
    `)

      // All elements should be preserved
      expect(container.querySelector('h1')).toBe(h1)
      expect(container.querySelector('h2')).toBe(h2)
      expect(container.querySelector('h3')).toBe(h3)
      expect(container.querySelector('span')).toBe(span)
      expect(container.querySelector('p')).toBe(p)

      // Content should be updated
      expect(h1.textContent).toBe('Top Level Updated')
      expect(h2.textContent).toBe('Outer Frame Updated')
      expect(h3.textContent).toBe('Inner Frame Updated')
      expect(span.textContent).toBe('Inner Content Updated')
      expect(p.textContent).toBe('Outer Content Updated')
    })

    it('skips reconciliation of pending sub-reconcilers', async () => {
      let container = document.createElement('div')

      // Initial HTML with nested frames
      container.innerHTML = `
      <h1>Top Level</h1>
      <!-- frame:start:outer -->
      <div>
        <h2>Outer Frame</h2>
        <!-- frame:start:inner -->
        <div>
          <h3>Inner Frame</h3>
          <span>Inner Content</span>
        </div>
        <!-- frame:end:inner -->
        <script type="application/json" rmx-frame>
        {
          "src": "/fragments/inner",
          "id": "inner",
          "status": "resolved"
        }
        </script>
        <p>Outer Content</p>
      </div>
      <!-- frame:end:outer -->
      <script type="application/json" rmx-frame>
      {
        "src": "/fragments/outer",
        "id": "outer",
        "status": "resolved"
      }
      </script>
    `

      // Track elements
      let h1 = container.querySelector('h1')
      let h2 = container.querySelector('h2')
      let h3 = container.querySelector('h3')
      let span = container.querySelector('span')
      let p = container.querySelector('p')

      invariant(h1 && h2 && h3 && span && p)

      // Create reconciler and adopt
      let reconciler = createReconciler(container)
      await reconciler.adopt()

      // Frame scripts should be removed during adopt
      expect(container.querySelectorAll('script[rmx-frame]').length).toBe(0)

      // Update with new content
      await reconciler.render(`
      <h1>Top Level Updated</h1>
      <!-- frame:start:outer -->
      <div>
        <h2>Outer Frame Updated</h2>
        <!-- frame:start:inner -->
        <div>
          <h3>Inner Frame Loading</h3>
          <span>Inner Content Loading</span>
        </div>
        <!-- frame:end:inner -->
        <script type="application/json" rmx-frame>
        {
          "src": "/fragments/inner",
          "id": "inner",
          "status": "pending"
        }
        </script>
        <p>Outer Content Updated</p>
      </div>
      <!-- frame:end:outer -->
      <script type="application/json" rmx-frame>
      {
        "src": "/fragments/outer",
        "id": "outer",
        "status": "resolved"
      }
      </script>
    `)

      // All elements should be preserved
      expect(container.querySelector('h1')).toBe(h1)
      expect(container.querySelector('h2')).toBe(h2)
      expect(container.querySelector('h3')).toBe(h3)
      expect(container.querySelector('span')).toBe(span)
      expect(container.querySelector('p')).toBe(p)

      // Content should be updated
      expect(h1.textContent).toBe('Top Level Updated')
      expect(h2.textContent).toBe('Outer Frame Updated')
      expect(p.textContent).toBe('Outer Content Updated')

      // Inner content should not update
      expect(h3.textContent).toBe('Inner Frame')
      expect(span.textContent).toBe('Inner Content')
    })

    it('hydrated components can replace their frame', async () => {
      let container = document.createElement('div')
      let [replacePromise, resolveReplace] = withResolvers()

      // fake server handler returning content for initial and updated content
      let serverCount = 0
      function fakeServerHandler() {
        return (
          <section>
            <h2>SSR Header {++serverCount}</h2>
            <ReplaceButton />
          </section>
        )
      }

      // hydrated component that replaces the frame
      let ReplaceButton = hydrated('/reload.js#ReplaceButton', function (this: Remix.Handle) {
        let handleClick = async () => {
          let content = await drain(renderToStream(fakeServerHandler()))
          await this.frame.replace(content)
          resolveReplace()
        }

        return () => (
          <button
            ref={(el) => {
              el.addEventListener('click', handleClick)
            }}
          >
            Replace
          </button>
        )
      })

      // simulate initial browser render
      let stream = renderToStream(fakeServerHandler())
      let simulator = simulateBrowserDocument(container, stream)
      await simulator.nextChunk()

      // assert initial document content
      let h2 = container.querySelector('h2')
      let button = container.querySelector('button')
      invariant(h2 && button)
      expect(h2.textContent).toBe('SSR Header 1')
      expect(button.textContent).toBe('Replace')

      // hydrate/adopt
      let reconciler = createReconciler(container, {
        loadModule: async () => ReplaceButton,
      })
      await reconciler.adopt()

      // sanity check: button is retained through hydration
      expect(container.querySelector('button')).toBe(button)

      // initiate content replacement
      button.click()
      await replacePromise

      // assert content replacement with node retention
      expect(container.querySelector('button')).toBe(button)
      expect(container.querySelector('h2')).toBe(h2)
      expect(h2.textContent).toBe('SSR Header 2')
    })

    it('reconciles new content', async () => {
      let container = document.createElement('div')

      // fake server handler returning content for initial and updated content
      let serverCount = 0
      function fakeServerHandler() {
        return (
          <section>
            <h2>SSR Header {++serverCount}</h2>
          </section>
        )
      }

      let stream = renderToStream(fakeServerHandler())
      let simulator = simulateBrowserDocument(container, stream)
      await simulator.nextChunk()

      let h2 = container.querySelector('h2')
      invariant(h2)
      expect(h2.textContent).toBe('SSR Header 1')

      let reconciler = createReconciler(container)
      await reconciler.adopt()

      let newContent = await drain(renderToStream(fakeServerHandler()))
      let frame = reconciler.frames.get(TOP_FRAME)
      invariant(frame)
      await frame.replace(newContent)

      expect(container.querySelector('h2')).toBe(h2)
      expect(h2.textContent).toBe('SSR Header 2')
    })

    describe('new frames', () => {
      it('immediately adopts resolved frames', async () => {
        let container = document.createElement('div')

        let serverCount = 0
        function renderServerStream() {
          return renderToStream(
            <section>
              <h2>SSR Header {++serverCount}</h2>
              {serverCount > 1 && <Frame src="/test" name="test" />}
            </section>,
            { resolveFrame: async () => <div>Resolved</div> },
          )
        }

        let stream = renderServerStream()

        let simulator = simulateBrowserDocument(container, stream)
        await simulator.nextChunk()

        let reconciler = createReconciler(container)
        await reconciler.adopt()

        let h2 = container.querySelector('h2')
        invariant(h2 instanceof HTMLHeadingElement)

        let newContent = await drain(renderServerStream())
        await reconciler.render(newContent)

        // outer node retained
        expect(container.querySelector('h2')).toBe(h2)
        // frame adopted
        expect(reconciler.frames.get('test')).toBeDefined()
        expect(container.querySelectorAll('script[rmx-frame]').length).toBe(0)
        // frame content rendered
        expect(container.innerHTML).toContain('Resolved')
      })

      // not sure what broke this
      it.skip('replaces early frames', async () => {
        let container = document.createElement('div')

        // First render has no frame; second render introduces a non-blocking frame
        let serverCount = 0
        function renderServerStream() {
          return renderToStream(
            <section>
              <h2>Header {++serverCount}</h2>
              {serverCount > 1 && (
                <Frame src="/fragments/early" name="early" fallback={<nav>Loading...</nav>} />
              )}
            </section>,
            { resolveFrame: async () => <nav>Loaded</nav> },
          )
        }

        // Initial document without the frame
        let simulator = simulateBrowserDocument(container, renderServerStream())
        await simulator.nextChunk()

        let reconciler = createReconciler(container)
        await reconciler.adopt()

        // Next server render introduces the frame; drain to include the template
        let nextHtml = await drain(renderServerStream())
        await reconciler.render(nextHtml)

        let nav = container.querySelector('nav')
        invariant(nav instanceof HTMLElement)
        expect(nav.textContent.trim()).toBe('Loaded')

        // Sub-reconciler handle is registered
        expect(reconciler.frames.get('early')).toBeDefined()

        // No frame scripts or templates left behind
        expect(container.querySelector('script[rmx-frame]')).toBeNull()
        expect(container.querySelectorAll('template').length).toBe(0)
      })

      it('replaces streamed frames', async () => {
        let [framePromise, resolveFrame] = withResolvers<Remix.RemixElement>()

        let container = document.createElement('div')

        // First render has no frame; second render introduces a non-blocking frame
        let serverCount = 0
        function renderServerStream() {
          return renderToStream(
            <section>
              <h2>Header {++serverCount}</h2>
              {serverCount > 1 && (
                <Frame src="/late" name="late" fallback={<nav>Loading...</nav>} />
              )}
            </section>,
            { resolveFrame: () => framePromise },
          )
        }

        let simulator = simulateBrowserDocument(container, renderServerStream())
        await simulator.nextChunk()
        simulator.releaseLock()

        let reconciler = createReconciler(container)
        await reconciler.adopt()

        let section = container.querySelector('section')
        invariant(section instanceof HTMLElement)

        let nextStream = renderServerStream()
        let renderPromise = reconciler.render(nextStream)

        // first streamed chunk should render fallback nav
        await waitForMutations(section)
        let fallbackNav = container.querySelector('nav')
        invariant(fallbackNav instanceof HTMLElement)
        expect(fallbackNav.textContent.trim()).toBe('Loading...')

        // resolve the frame to trigger frame replacement
        resolveFrame(<nav>Loaded</nav>)

        // wait for frame replacement
        await renderPromise

        // identity preserved and text updated
        let nav = container.querySelector('nav')
        invariant(nav instanceof HTMLElement)
        expect(nav).toBe(fallbackNav)
        expect(nav.textContent.trim()).toBe('Loaded')

        // sub-reconciler exists and no artifacts remain
        expect(reconciler.frames.get('late')).toBeDefined()
        expect(container.querySelector('script[rmx-frame]')).toBeNull()
        expect(container.querySelectorAll('template').length).toBe(0)
      })

      it.todo('handles complex nesting')
      it.todo('hydrates new components in new frames')
      it.todo('retains existing frames')
    })

    describe('frame.reload', () => {
      it('reloads the frame with frame src', async () => {
        let container = document.createElement('div')

        // fake server handler returning content for initial and updated content
        let serverCount = 0
        function fakeServerHandler() {
          return (
            <section>
              <h2>SSR Header {++serverCount}</h2>
            </section>
          )
        }

        let stream = renderToStream(fakeServerHandler())
        let simulator = simulateBrowserDocument(container, stream)
        await simulator.nextChunk()

        let h2 = container.querySelector('h2')
        invariant(h2)
        expect(h2.textContent).toBe('SSR Header 1')

        let capturedSrc = ''
        let reconciler = createReconciler(container, {
          async resolveFrame(src) {
            capturedSrc = src
            return drain(renderToStream(fakeServerHandler()))
          },
        })
        await reconciler.adopt()

        let frame = reconciler.frames.get(TOP_FRAME)
        invariant(frame)
        await frame.reload()

        expect(container.querySelector('h2')).toBe(h2)
        expect(h2.textContent).toBe('SSR Header 2')
        expect(capturedSrc).toBe('/')
      })
    })
  })

  describe('special case html attribute -> prop normalization ', () => {
    it.todo('className')
    it.todo('htmlFor')
    it.todo('acceptCharset')
    it.todo('httpEquiv')

    it('renders tabindex attribute from tabIndex prop and allows focusing', () => {
      let container = document.createElement('div')
      document.body.appendChild(container)
      let reconciler = createReconciler(container)

      reconciler.render(<div tabIndex={-1}>x</div>)

      let div = container.querySelector('div')
      invariant(div instanceof HTMLDivElement)

      // Attribute should be lowercase `tabindex` for HTML
      expect(div.getAttribute('tabindex')).toBe('-1')

      // The DOM property should also reflect focusability
      expect(div.tabIndex).toBe(-1)

      // Focus should succeed without throwing and document.activeElement should be the div
      div.focus()
      expect(document.activeElement === div || div.matches(':focus')).toBe(true)
    })

    it('maps htmlFor prop to `for` attribute on labels', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      reconciler.render(
        <div>
          <label htmlFor="my-input">Label</label>
          <input id="my-input" />
        </div>,
      )

      let label = container.querySelector('label')
      invariant(label instanceof HTMLLabelElement)
      expect(label.getAttribute('for')).toBe('my-input')
      expect(label.htmlFor).toBe('my-input')
    })

    it('maps acceptCharset prop to `accept-charset` attribute on forms', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      reconciler.render(<form acceptCharset="utf-8" />)

      let form = container.querySelector('form')
      invariant(form instanceof HTMLFormElement)
      expect(form.getAttribute('accept-charset')).toBe('utf-8')
      expect(form.acceptCharset.toLowerCase()).toBe('utf-8')
    })

    it('lowercases general camelCase HTML attributes (no hyphen insertion)', () => {
      let container = document.createElement('div')
      let reconciler = createReconciler(container)

      reconciler.render(<input autoCapitalize="on" />)

      let input = container.querySelector('input')
      invariant(input instanceof HTMLInputElement)
      // Attribute name should be autocapitalize (lowercase), not auto-capitalize
      expect(input.hasAttribute('autocapitalize')).toBe(true)
      expect(input.getAttribute('autocapitalize')).toBe('on')
    })
  })

  it.todo('autoFocus')

  it('renders SVG elements with proper namespace and case-sensitive attributes', () => {
    let container = document.createElement('div')
    let reconciler = createReconciler(container)

    reconciler.render(
      <svg viewBox="0 0 24 24" fill="none">
        <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
      </svg>,
    )

    let svg = container.querySelector('svg')
    let path = container.querySelector('path')

    expect(svg).toBeInstanceOf(SVGSVGElement)
    expect(svg?.namespaceURI).toBe('http://www.w3.org/2000/svg')
    expect(svg?.getAttribute('viewBox')).toBe('0 0 24 24')

    expect(path).toBeInstanceOf(SVGPathElement)
    expect(path?.namespaceURI).toBe('http://www.w3.org/2000/svg')
    expect(path?.getAttribute('stroke-linecap')).toBe('round')
    expect(path?.getAttribute('stroke-linejoin')).toBe('round')
  })
})