@miliastry/quasar 1.0.0

package/src/Tests/BlockPatcherWindowed.test.ts

@@ -0,0 +1,364 @@
+/**
+ * BlockPatcher — windowed (O(edit)) reconciliation tests.
+ *
+ * The windowed path is the 500k-character fast path: when the model knows the
+ * source range of the edit (`TextChangeRange`, attached to the root as
+ * `__changeRange` by `DocumentModel.applyTextUpdate`), `patchBlocksInto`
+ * reconciles ONLY the runs overlapping that range instead of walking every
+ * run of the document.
+ *
+ * The invariant is the same as the full path: the patched DOM must equal
+ * `morphHTML(container, renderer.render(root))`. The differential loops below
+ * check that after EVERY edit — the windowed path must never leave the DOM
+ * diverging, no matter where the edit lands (start, middle, end, run
+ * boundaries, block insertions/deletions).
+ */
+
+import { describe, it, expect } from 'vitest'
+import { BBCodeDocumentModel } from '../BBCode/BBCodeDocumentModel'
+import { HTMLRenderer } from '../Visitors/HTMLRenderer'
+import { morphHTML } from '../Visitors/DOMMorpher'
+import { patchBlocksInto } from '../Visitors/BlockPatcher'
+
+const renderer = new HTMLRenderer()
+
+/**
+ * Force the windowed path on small documents. Production defaults to
+ * `MIN_WINDOWED_BLOCKS` (200) — below it the full keyed walk beats the
+ * windowed bookkeeping — but these tests must exercise the window machinery
+ * itself, so they opt in with `0`.
+ */
+const WIN_OPTS = { renderer, minWindowedBlocks: 0 }
+
+/** Strip data-node-id attributes so cross-model comparisons are structural. */
+function stripIds(html: string): string {
+  return html.replace(/ data-node-id="[^"]*"/g, '')
+}
+
+/** Same-model reference: morphHTML on the given model's root. */
+function morphDOM(model: BBCodeDocumentModel): HTMLDivElement {
+  const el = document.createElement('div')
+  if (model.redRoot) morphHTML(el, renderer.render(model.redRoot))
+  return el
+}
+
+/**
+ * Un documento GRANDE (≥2500 chars) con `n` párrafos de relleno ANTES del
+ * contenido real.
+ *
+ * El camino por ventana exige DOS cosas que solo pasan en documentos grandes:
+ *  1. el parser incremental (umbral `MIN_SOURCE_LENGTH` = 2500 chars) — sin
+ *     reparse incremental no hay green-sharing ni reference-identity;
+ *  2. que la ventana de edición sea menor que la mitad del documento.
+ * El relleno da ambas a la vez: los bloques fuera de la ventana son los MISMOS
+ * objetos RedNode que cacheó el patch anterior.
+ */
+function padded(prefix: string, n = 240): string {
+  const filler: string[] = []
+  for (let i = 0; i < n; i++) filler.push(`relleno ${i}`)
+  return filler.join('\n') + '\n\n' + prefix
+}
+
+describe('patchBlocksInto — windowed path (model-attached change range)', () => {
+  it('editar texto en medio corre por ventana (stats.windowed=true) y equivale al morph', () => {
+    const model = new BBCodeDocumentModel({
+      source: padded('uno\n\n[box]caja[/box]\n\n[quote]cita[/quote]\n\nfinal'),
+    })
+    const el = document.createElement('div')
+    patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+
+    model.applyTextUpdate(padded('uno\n\n[box]caja EDITADA[/box]\n\n[quote]cita[/quote]\n\nfinal'))
+    model.ensureAnalyzed()
+
+    const stats = patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+    expect(stats.mode).toBe('blocks')
+    expect(stats.windowed).toBe(true)
+    expect(stats.patched).toBeGreaterThanOrEqual(1)
+    // El rango viaja con el root: el modelo lo adjuntó tras applyTextUpdate.
+    expect((model.redRoot as unknown as { __changeRange?: unknown }).__changeRange).toBeTruthy()
+
+    const elExpected = morphDOM(model)
+    expect(stripIds(el.innerHTML)).toBe(stripIds(elExpected.innerHTML))
+  })
+
+  it('insertar al inicio es O(1) en mutaciones DOM a 400 bloques (regresión 500k)', () => {
+    const lines: string[] = []
+    for (let i = 0; i < 400; i++) lines.push(`linea ${i}`)
+    const src = lines.join('\n')
+
+    const model = new BBCodeDocumentModel({ source: src })
+    const el = document.createElement('div')
+    patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+
+    model.applyTextUpdate('AAA' + src)
+    model.ensureAnalyzed()
+
+    const mo = new MutationObserver(() => {})
+    mo.observe(el, { childList: true })
+    const stats = patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+    const mutations = mo.takeRecords().length
+    mo.disconnect()
+
+    expect(stats.windowed).toBe(true)
+    // O(1): huérfano (1) + bloque nuevo (1) + margen del parser — nunca O(n).
+    expect(mutations).toBeLessThanOrEqual(6)
+
+    const elExpected = morphDOM(model)
+    expect(stripIds(el.innerHTML)).toBe(stripIds(elExpected.innerHTML))
+  })
+
+  it('bloques FUERA de la ventana conservan su identidad DOM y estado runtime', () => {
+    // Box a al INICIO, relleno en el medio, box c al FINAL. Editar un párrafo
+    // del relleno deja ambos boxes fuera de la ventana de edición.
+    const filler: string[] = []
+    for (let i = 0; i < 240; i++) filler.push(`relleno ${i}`)
+    const body = filler.join('\n')
+
+    const model = new BBCodeDocumentModel({ source: `[box]a[/box]\n\n${body}\n\n[box]c[/box]` })
+    const el = document.createElement('div')
+    patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+
+    const details = el.querySelectorAll('details')
+    const boxA = details[0]
+    const boxC = details[1]
+    ;(boxA as HTMLDetailsElement).open = true
+
+    model.applyTextUpdate(`[box]a[/box]\n\n${body.replace('relleno 5', 'relleno 5 EDITADO')}\n\n[box]c[/box]`)
+    model.ensureAnalyzed()
+
+    const stats = patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+    expect(stats.windowed).toBe(true)
+
+    const after = el.querySelectorAll('details')
+    // Fuera de la ventana: ni se movieron ni se reconstruyeron.
+    expect(after[0]).toBe(boxA)
+    expect((after[0] as HTMLDetailsElement).open).toBe(true)
+    expect(after[1]).toBe(boxC)
+    // Y el contenido editado del medio sí llegó.
+    expect(el.textContent).toContain('relleno 5 EDITADO')
+  })
+
+  it('borrar una región ENTERA del medio (ventana antigua por endOld) no deja nodos fantasma', () => {
+    // El escenario que rompía un windowing por índice: borrar muchos bloques
+    // del medio. La ventana vieja se ubica con endOld (coordenadas viejas),
+    // así que todos los runs eliminados quedan dentro y se quitan del DOM.
+    const lines: string[] = []
+    for (let i = 0; i < 200; i++) lines.push(`linea ${i}`)
+    const src = ['[box]inicio[/box]', ...lines, '[box]fin[/box]'].join('\n')
+
+    const model = new BBCodeDocumentModel({ source: src })
+    const el = document.createElement('div')
+    patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+
+    // Borrar las 200 líneas del medio.
+    const newSrc = '[box]inicio[/box]\n[box]fin[/box]'
+    model.applyTextUpdate(newSrc)
+    model.ensureAnalyzed()
+
+    const stats = patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+    // La ventana cubre casi todo el doc viejo → full reconcile es lo correcto,
+    // pero el DOM debe quedar exacto (sin nodos fantasma).
+    expect(stats.mode).toBe('blocks')
+
+    const elExpected = morphDOM(model)
+    expect(stripIds(el.innerHTML)).toBe(stripIds(elExpected.innerHTML))
+    // Exactamente 2 details, no 202.
+    expect(el.querySelectorAll('details').length).toBe(2)
+  })
+
+  it('cambiar el text run antes de [code] (fusión de textNodes) mantiene la alineación por ventana', () => {
+    const model = new BBCodeDocumentModel({ source: padded('[quote]cita[/quote]\n\n[code]x[/code]') })
+    const el = document.createElement('div')
+    patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+
+    // Más líneas en blanco → el run de '\n\n' crece a '\n\n\n\n'.
+    model.applyTextUpdate(padded('[quote]cita[/quote]\n\n\n\n[code]x[/code]'))
+    model.ensureAnalyzed()
+
+    const stats = patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+    expect(stats.windowed).toBe(true)
+
+    const elExpected = morphDOM(model)
+    expect(stripIds(el.innerHTML)).toBe(stripIds(elExpected.innerHTML))
+  })
+
+  it('append al final (cambio tras el último bloque) funciona por ventana', () => {
+    const model = new BBCodeDocumentModel({ source: padded('uno\n\ndos\n\ntres') })
+    const el = document.createElement('div')
+    patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+
+    model.applyTextUpdate(padded('uno\n\ndos\n\ntres\n\ncuatro agregado'))
+    model.ensureAnalyzed()
+
+    const stats = patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+    expect(stats.windowed).toBe(true)
+
+    const elExpected = morphDOM(model)
+    expect(stripIds(el.innerHTML)).toBe(stripIds(elExpected.innerHTML))
+  })
+
+  it('backspace al final (edición en EOF, ningún bloque nuevo extiende el rango) no crashea', () => {
+    // Regresión: en EOF el árbol NUEVO no tiene ningún bloque con
+    // `range.end > change.start` (el último bloque termina justo en el punto
+    // de la edición) → `firstChanged` quedaba en `n` → `winEnd = n+1` →
+    // `blocks[winEnd - 1]` era undefined (TypeError fuera del try/catch).
+    const model = new BBCodeDocumentModel({ source: padded('uno\n\ndos\n\nfinal') })
+    const el = document.createElement('div')
+    patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+
+    // Borrar la última letra: el nuevo último bloque termina EXACTO en el
+    // punto de la edición (caso que antes crasheaba).
+    model.applyTextUpdate(padded('uno\n\ndos\n\nfina'))
+    model.ensureAnalyzed()
+
+    const stats = patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+    expect(stats.windowed).toBe(true)
+
+    const elExpected = morphDOM(model)
+    expect(stripIds(el.innerHTML)).toBe(stripIds(elExpected.innerHTML))
+    expect(el.textContent).toContain('fina')
+    expect(el.textContent).not.toContain('final')
+  })
+
+  it('borrar el último bloque completo (región de cola) funciona por ventana', () => {
+    const model = new BBCodeDocumentModel({ source: padded('uno\n\ndos\n\n[box]caja final[/box]') })
+    const el = document.createElement('div')
+    patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+
+    // Quitar el último bloque: el rango de cambio llega hasta el final del doc.
+    model.applyTextUpdate(padded('uno\n\ndos'))
+    model.ensureAnalyzed()
+
+    const stats = patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+    expect(stats.windowed).toBe(true)
+
+    const elExpected = morphDOM(model)
+    expect(stripIds(el.innerHTML)).toBe(stripIds(elExpected.innerHTML))
+    expect(el.querySelectorAll('details').length).toBe(0)
+  })
+
+  it('un editor completo de mitad de doc (ventana enorme) cae al camino full y es correcto', () => {
+    const model = new BBCodeDocumentModel({ source: 'a\n\nb\n\nc\n\nd\n\ne' })
+    const el = document.createElement('div')
+    patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+
+    // Reemplazar casi todo: la ventana supera la mitad → full reconcile.
+    model.applyTextUpdate('a\n\n[heading]NUEVO[/heading]\n\n[box]contenido[/box]\n\nz')
+    model.ensureAnalyzed()
+
+    const stats = patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+    expect(stats.windowed).toBeUndefined()
+
+    const elExpected = morphDOM(model)
+    expect(stripIds(el.innerHTML)).toBe(stripIds(elExpected.innerHTML))
+  })
+
+  it('un documento nuevo en el mismo contenedor (hint presente pero todo churn) cae al camino full', () => {
+    const modelA = new BBCodeDocumentModel({ source: 'a\n\nb\n\nc' })
+    const el = document.createElement('div')
+    patchBlocksInto(el, modelA.redRoot!, WIN_OPTS)
+
+    // Model B: otra instancia, ids completamente nuevos. Pasar un change chico
+    // (hint desactualizado/incompatible) debe ser detectado por el churn guard
+    // (bloques fuera de la ventana no son reference-identical) → full reconcile.
+    const modelB = new BBCodeDocumentModel({ source: 'x\n\ny\n\nz\n\nw' })
+    const stats = patchBlocksInto(el, modelB.redRoot!, {
+      renderer,
+      minWindowedBlocks: 0,
+      change: { start: 1, end: 2, endOld: 2 },
+    })
+    expect(stats.windowed).toBeUndefined()
+    expect(stats.mode).toBe('full')
+
+    const elExpected = morphDOM(modelB)
+    expect(stripIds(el.innerHTML)).toBe(stripIds(elExpected.innerHTML))
+  })
+
+  it('secuencia diferencial: el DOM patcheado equivale al morph completo tras cada edición', () => {
+    // Doc GRANDE para que el reparse incremental (≥2500 chars) active el
+    // camino por ventana en cada paso: el relleno nunca cambia, así que todos
+    // los bloques fuera de la ventana son reference-identical.
+    const big = padded('')
+    // Cada fuente es el resultado realista de la edición anterior: inline en
+    // el medio, prepend (re-key del primer bloque), cambio de elemento con
+    // hijos, append, borrado de bloque, insert tipo Enter, run boundaries,
+    // borrado de bloque del medio, edición de [code].
+    const sources = [
+      '[box]a[/box]\n\nprimer parrafo\n\n[quote]cita original[/quote]\n\n[code]code[/code]\n\nfinal',
+      // inline en el medio
+      '[box]a[/box]\n\nprimer parrafo EDITADO\n\n[quote]cita original[/quote]\n\n[code]code[/code]\n\nfinal',
+      // prepend de un heading
+      '[heading]Top[/heading]\n\n[box]a[/box]\n\nprimer parrafo EDITADO\n\n[quote]cita original[/quote]\n\n[code]code[/code]\n\nfinal',
+      // cambio de quote (elemento con hijos)
+      '[heading]Top[/heading]\n\n[box]a[/box]\n\nprimer parrafo EDITADO\n\n[quote]cita MODIFICADA[/quote]\n\n[code]code[/code]\n\nfinal',
+      // append al final
+      '[heading]Top[/heading]\n\n[box]a[/box]\n\nprimer parrafo EDITADO\n\n[quote]cita MODIFICADA[/quote]\n\n[code]code[/code]\n\nfinal\n\nultimo bloque nuevo',
+      // borrar el box inicial
+      '[heading]Top[/heading]\n\nprimer parrafo EDITADO\n\n[quote]cita MODIFICADA[/quote]\n\n[code]code[/code]\n\nfinal\n\nultimo bloque nuevo',
+      // insert tipo Enter en el medio
+      '[heading]Top[/heading]\n\nprimer parrafo EDITADO\n\n[center]centrado[/center]\n\n[quote]cita MODIFICADA[/quote]\n\n[code]code[/code]\n\nfinal\n\nultimo bloque nuevo',
+      // crecer el text run antes de [code]
+      '[heading]Top[/heading]\n\nprimer parrafo EDITADO\n\n[center]centrado[/center]\n\n[quote]cita MODIFICADA[/quote]\n\n\n\n\n[code]code[/code]\n\nfinal\n\nultimo bloque nuevo',
+      // borrar el centro
+      '[heading]Top[/heading]\n\nprimer parrafo EDITADO\n\n[quote]cita MODIFICADA[/quote]\n\n\n\n\n[code]code[/code]\n\nfinal\n\nultimo bloque nuevo',
+      // editar el código
+      '[heading]Top[/heading]\n\nprimer parrafo EDITADO\n\n[quote]cita MODIFICADA[/quote]\n\n\n\n\n[code]code EDITADO[/code]\n\nfinal\n\nultimo bloque nuevo',
+      // editar el último bloque (append región)
+      '[heading]Top[/heading]\n\nprimer parrafo EDITADO\n\n[quote]cita MODIFICADA[/quote]\n\n\n\n\n[code]code EDITADO[/code]\n\nfinal\n\nultimo bloque NUEVO',
+    ]
+
+    const bigSources = sources.map((s) => big + '\n\n' + s)
+    const model = new BBCodeDocumentModel({ source: bigSources[0] })
+    const el = document.createElement('div')
+    patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+
+    for (let i = 1; i < bigSources.length; i++) {
+      model.applyTextUpdate(bigSources[i])
+      model.ensureAnalyzed()
+
+      const stats = patchBlocksInto(el, model.redRoot!, WIN_OPTS)
+      expect(stats.mode).toBe('blocks')
+
+      const elExpected = morphDOM(model)
+      expect(
+        stripIds(el.innerHTML),
+        `divergencia tras la edición ${i}: ${bigSources[i].slice(0, 60)}`,
+      ).toBe(stripIds(elExpected.innerHTML))
+    }
+  })
+})
+
+describe('DocumentModel — lastChangeRange (fuente del hint)', () => {
+  it('applyTextUpdate expone {start, end, endOld} en coordenadas nuevas/viejas', () => {
+    const model = new BBCodeDocumentModel({ source: 'hola mundo' })
+    expect(model.lastChangeRange).toBeNull() // el bootstrap es un rebuild
+
+    // Editar "mundo" → "MUNDO": 5 caracteres en la posición 5..10.
+    model.applyTextUpdate('hola MUNDO')
+    const range = model.lastChangeRange!
+    expect(range.start).toBe(5)
+    expect(range.end).toBe(10) // 'MUNDO' (5 chars) desde 5
+    expect(range.endOld).toBe(10) // 'mundo' (5 chars) viejo
+  })
+
+  it('un rebuild limpia el rango y el root no lleva hint', () => {
+    const model = new BBCodeDocumentModel({ source: 'hola' })
+    model.applyTextUpdate('hola mundo')
+    expect(model.lastChangeRange).not.toBeNull()
+
+    model.rebuild('otro documento')
+    expect(model.lastChangeRange).toBeNull()
+    expect(
+      (model.redRoot as unknown as { __changeRange?: unknown }).__changeRange,
+    ).toBeNull()
+  })
+
+  it('el rango viaja adjunto al root que lo produjo', () => {
+    const model = new BBCodeDocumentModel({ source: 'a\n\nb\n\nc' })
+    model.applyTextUpdate('a\n\nb EDITADO\n\nc')
+    const carried = (model.redRoot as unknown as { __changeRange?: { start: number } }).__changeRange
+    expect(carried?.start).toBeGreaterThanOrEqual(0)
+  })
+})
+
+

package/src/Tests/BoxDrawer.test.ts

@@ -0,0 +1,217 @@
+import { describe, it, expect } from 'vitest'
+
+import { bindBoxDrawer, toggleBoxWithDrawer } from '../Visuals/BoxDrawer'
+
+/**
+ * jsdom has neither layout nor the Web Animations API, so both are stubbed.
+ *
+ * The stub deliberately keeps `cancel()` from firing its event synchronously:
+ * real animation events are dispatched on a later frame, and every bug this
+ * suite covers comes from a superseded animation's event landing *after* the
+ * next one has already taken over.
+ */
+
+const COLLAPSED = 40
+const EXPANDED = 200
+
+interface FakeAnimation {
+  keyframes: { height: [string, string] }
+  duration: number
+  cancelled: boolean
+  cancel: () => void
+  addEventListener: (type: string, cb: () => void) => void
+  fire: (type: 'finish' | 'cancel') => void
+}
+
+function makeBox() {
+  const host = document.createElement('div')
+  host.innerHTML = '<details><summary>title</summary><p>content</p></details>'
+  const details = host.querySelector('details') as HTMLDetailsElement
+
+  /** One-shot override standing in for the height a running animation paints. */
+  let painted: number | null = null
+
+  details.getBoundingClientRect = () => {
+    if (painted !== null) {
+      const height = painted
+      painted = null
+      return { height } as DOMRect
+    }
+    return { height: details.open ? EXPANDED : COLLAPSED } as DOMRect
+  }
+
+  const anims: FakeAnimation[] = []
+  details.animate = ((keyframes: any, options: any) => {
+    const listeners: Record<string, Array<() => void>> = {}
+    const anim: FakeAnimation = {
+      keyframes,
+      duration: options.duration,
+      cancelled: false,
+      cancel: () => { anim.cancelled = true },
+      addEventListener: (type, cb) => { (listeners[type] ||= []).push(cb) },
+      fire: (type) => { (listeners[type] || []).forEach(cb => cb()) },
+    }
+    anims.push(anim)
+    return anim as unknown as Animation
+  }) as typeof details.animate
+
+  return {
+    host,
+    details,
+    anims,
+    /** Simulate an interruption: the next height read reports mid-flight. */
+    setPaintedHeight: (h: number) => { painted = h },
+    /** Drive a toggle all the way to its resting state. */
+    settle: () => anims[anims.length - 1].fire('finish'),
+  }
+}
+
+describe('BoxDrawer', () => {
+  it('opens from the collapsed height to the expanded one', () => {
+    const box = makeBox()
+
+    toggleBoxWithDrawer(box.details)
+
+    expect(box.anims[0].keyframes.height).toEqual([`${COLLAPSED}px`, `${EXPANDED}px`])
+    expect(box.details.style.overflow).toBe('hidden')
+    // Stays open during the animation so the content is there to be uncovered.
+    expect(box.details.open).toBe(true)
+
+    box.settle()
+    expect(box.details.open).toBe(true)
+    expect(box.details.style.overflow).toBe('')
+  })
+
+  it('keeps the content mounted while closing, then closes at the end', () => {
+    const box = makeBox()
+    toggleBoxWithDrawer(box.details)
+    box.settle()
+
+    toggleBoxWithDrawer(box.details)
+
+    expect(box.anims[1].keyframes.height).toEqual([`${EXPANDED}px`, `${COLLAPSED}px`])
+    expect(box.details.open).toBe(true)
+
+    box.settle()
+    expect(box.details.open).toBe(false)
+  })
+
+  it('resumes from the painted height instead of snapping', () => {
+    const box = makeBox()
+    toggleBoxWithDrawer(box.details)
+
+    box.setPaintedHeight(120)
+    toggleBoxWithDrawer(box.details)
+
+    expect(box.anims[0].cancelled).toBe(true)
+    expect(box.anims[1].keyframes.height).toEqual(['120px', `${COLLAPSED}px`])
+  })
+
+  it('reverses a close back into an open', () => {
+    const box = makeBox()
+    toggleBoxWithDrawer(box.details)
+    box.settle()
+
+    toggleBoxWithDrawer(box.details) // closing
+    box.setPaintedHeight(150)
+    toggleBoxWithDrawer(box.details) // reversed mid-close
+
+    // Direction comes from the running intent; reading `open` here would say
+    // "open" — the box is held open while it closes — and close it again.
+    expect(box.anims[2].keyframes.height).toEqual(['150px', `${EXPANDED}px`])
+
+    box.settle()
+    expect(box.details.open).toBe(true)
+  })
+
+  it('ignores a superseded animation\'s late cancel', () => {
+    const box = makeBox()
+    toggleBoxWithDrawer(box.details)
+    box.setPaintedHeight(120)
+    toggleBoxWithDrawer(box.details)
+
+    box.anims[0].fire('cancel')
+
+    // Without the ownership guard the outgoing animation strips the incoming
+    // one's clipping and the content spills out of a small box.
+    expect(box.details.style.overflow).toBe('hidden')
+  })
+
+  it('ignores a superseded animation\'s late finish', () => {
+    const box = makeBox()
+    toggleBoxWithDrawer(box.details)
+    box.settle()
+
+    toggleBoxWithDrawer(box.details) // closing
+    box.setPaintedHeight(150)
+    toggleBoxWithDrawer(box.details) // reversed to opening
+
+    box.anims[1].fire('finish')
+
+    // The close's `open = false` landing late would freeze the box shut.
+    expect(box.details.open).toBe(true)
+    expect(box.details.style.overflow).toBe('hidden')
+  })
+
+  it('scales the duration by the distance left to travel', () => {
+    const box = makeBox()
+
+    toggleBoxWithDrawer(box.details)
+    expect(box.anims[0].duration).toBe(400)
+
+    // Interrupted 10px above collapsed: a sliver of travel, floored so it still
+    // reads as motion rather than a snap.
+    box.setPaintedHeight(COLLAPSED + 10)
+    toggleBoxWithDrawer(box.details)
+    expect(box.anims[1].duration).toBe(120)
+  })
+
+  it('restores the author\'s overflow across a chain of interruptions', () => {
+    const box = makeBox()
+    box.details.style.overflow = 'auto'
+
+    toggleBoxWithDrawer(box.details)
+    box.setPaintedHeight(120)
+    toggleBoxWithDrawer(box.details)
+    box.settle()
+
+    expect(box.details.style.overflow).toBe('auto')
+  })
+
+  it('falls back to a plain toggle without the animation API', () => {
+    const box = makeBox()
+    delete (box.details as Partial<HTMLDetailsElement>).animate
+
+    toggleBoxWithDrawer(box.details)
+
+    expect(box.details.open).toBe(true)
+    expect(box.details.style.overflow).toBe('')
+  })
+
+  it('binds and unbinds a delegated summary handler', () => {
+    const box = makeBox()
+    const dispose = bindBoxDrawer(box.host)
+    const summary = box.details.querySelector('summary')!
+
+    const first = new MouseEvent('click', { bubbles: true, cancelable: true })
+    summary.dispatchEvent(first)
+    expect(first.defaultPrevented).toBe(true)
+    expect(box.anims).toHaveLength(1)
+
+    dispose()
+
+    summary.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+    expect(box.anims).toHaveLength(1)
+  })
+
+  it('leaves clicks outside a summary alone', () => {
+    const box = makeBox()
+    bindBoxDrawer(box.host)
+
+    const event = new MouseEvent('click', { bubbles: true, cancelable: true })
+    box.details.querySelector('p')!.dispatchEvent(event)
+
+    expect(event.defaultPrevented).toBe(false)
+    expect(box.anims).toHaveLength(0)
+  })
+})

package/src/Tests/BoxRichTitle.test.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect } from 'vitest'
+import { BBCodeDocumentModel } from '../BBCode/BBCodeDocumentModel'
+import { HTMLRenderer } from '../Visitors/HTMLRenderer'
+import { BBCodeExporter } from '../Visitors/BBCodeExporter'
+import { MarkdownExporter } from '../Visitors/MarkdownExporter'
+
+describe('Box & Spoilerbox Rich Title Support', () => {
+  it('parses and renders images, colors, and bold formatting inside box title', () => {
+    const source = `[box=[b][color=#efefef]▎[/color][/b]💛⠀[b][color=#efefef]Gifts from People (,,>﹏<,,)[/color][/b] [img]https://example.com/tja000.gif[/img][img]https://example.com/nyeee.gif[/img]]Body content[/box]`
+    const model = new BBCodeDocumentModel({ source })
+    const box = model.redRoot!.children.find(c => c.kind === 'box')!
+
+    expect(box).toBeDefined()
+    expect(box.metadata.rawTitle).toBe('[b][color=#efefef]▎[/color][/b]💛⠀[b][color=#efefef]Gifts from People (,,>﹏<,,)[/color][/b] [img]https://example.com/tja000.gif[/img][img]https://example.com/nyeee.gif[/img]')
+    expect(box.metadata.title).toBe('▎💛⠀Gifts from People (,,>﹏<,,) https://example.com/tja000.gifhttps://example.com/nyeee.gif')
+
+    const titleNodes = box.metadata.titleNodes as typeof box.children
+    expect(titleNodes).toBeDefined()
+    expect(titleNodes.length).toBeGreaterThan(0)
+
+    // Check images in titleNodes
+    const imageNodes = titleNodes.filter(n => n.kind === 'image')
+    expect(imageNodes.length).toBe(2)
+    expect(imageNodes[0].metadata.src).toBe('https://example.com/tja000.gif')
+    expect(imageNodes[1].metadata.src).toBe('https://example.com/nyeee.gif')
+
+    // Render HTML
+    const renderer = new HTMLRenderer()
+    const html = renderer.render(model.redRoot!)
+
+    expect(html).toContain('<details')
+    expect(html).toContain('class="box"')
+    expect(html).toContain('<summary>')
+    expect(html).toContain('style="color:#efefef;">▎</span>')
+    expect(html).toContain('Gifts from People (,,&gt;﹏&lt;,,)')
+    expect(html).toContain('<img')
+    expect(html).toContain('src="https://example.com/tja000.gif"')
+    expect(html).toContain('src="https://example.com/nyeee.gif"')
+  })
+
+  it('renders testforquasar fixture correctly', () => {
+    const source = `[box=[b][color=#efefef]▎[/color][/b]💛⠀[b][color=#efefef]Gifts from People (,,>﹏<,,)[/color][/b] [img]https://blogger.googleusercontent.com/img/b/tja000.gif[/img][img]https://blogger.googleusercontent.com/img/b/nyeee.gif[/img][img]https://blogger.googleusercontent.com/img/b/vy_2.gif[/img]][color=#efefef]Thank you so much[/color][/box]`
+    const model = new BBCodeDocumentModel({ source })
+    const renderer = new HTMLRenderer()
+    const html = renderer.render(model.redRoot!)
+
+    expect(html).toContain('<summary>')
+    expect(html).toContain('src="https://blogger.googleusercontent.com/img/b/tja000.gif"')
+    expect(html).toContain('src="https://blogger.googleusercontent.com/img/b/nyeee.gif"')
+    expect(html).toContain('src="https://blogger.googleusercontent.com/img/b/vy_2.gif"')
+    expect(html).toContain('style="color:#efefef;">Thank you so much</span>')
+  })
+
+  it('renders testforquasar2 fixture correctly', () => {
+    const source = `[box=[b][color=#ff4040][c]D[/c][/color][color=#ff9240][c]O[/c][/color][c] [/c][color=#ffe440][c]N[/c][/color][color=#c8ff40][c]O[/c][/color][color=#76ff40][c]T[/c][/color][c] [/c][color=#40ff5b][c]C[/c][/color][color=#40ffad][c]L[/c][/color][color=#40ffff][c]I[/c][/color][color=#40adff][c]C[/c][/color][color=#405bff][c]K[/c][/color][c] [/c][color=#7640ff][c]H[/c][/color][color=#c840ff][c]E[/c][/color][color=#ff40e4][c]R[/c][/color][color=#ff4092][c]E[/c][/color][/b]
+][notice][size=200][color=#ccd7be]𝓹[/color][color=#bacef9]𝓮[/color][color=#f38fe2]𝓮[/color][color=#eea5b7]𝓴[/color] [color=#bcc4c7]𝓪[/color] [color=#9c85f1]𝓫[/color][color=#ccc793]𝓸[/color][color=#d390c9]𝓸[/color] [color=#d1abb8]>[/color][color=#bee1e8].[/color][color=#c4eefb]<[/color][/size]
+[/notice]
+[/box]`
+    const model = new BBCodeDocumentModel({ source })
+    const renderer = new HTMLRenderer()
+    const html = renderer.render(model.redRoot!)
+
+    expect(html).toContain('<details')
+    expect(html).toContain('<summary>')
+    expect(html).toContain('style="color:#ff4040;"><code')
+    expect(html).toContain('>D</code>')
+    expect(html).toContain('style="color:#ff9240;"><code')
+    expect(html).toContain('>O</code>')
+    expect(html).toContain('<div')
+    expect(html).toContain('class="notice"')
+    expect(html).toContain('style="font-size:200%;"')
+    expect(html).toContain('𝓹')
+  })
+
+  it('preserves rich title during BBCode export', () => {
+    const source = `[box=[b][color=#efefef]▎[/color][/b]💛⠀[img]https://example.com/tja000.gif[/img]]Content[/box]`
+    const model = new BBCodeDocumentModel({ source })
+    const exporter = new BBCodeExporter()
+    const exported = exporter.export(model.redRoot!)
+
+    expect(exported).toContain('[box=[b][color=#efefef]▎[/color][/b]💛⠀[img]https://example.com/tja000.gif[/img]]')
+  })
+
+  it('exports rich title to Markdown', () => {
+    const source = `[box=[b]Bold Title[/b]]Content[/box]`
+    const model = new BBCodeDocumentModel({ source })
+    const exporter = new MarkdownExporter()
+    const exported = exporter.export(model.redRoot!)
+
+    expect(exported).toContain('**Bold Title**')
+  })
+
+  it('allows offset lookups inside the rich title', () => {
+    const source = `[box=[img]https://example.com/tja000.gif[/img]]Content[/box]`
+    const model = new BBCodeDocumentModel({ source })
+    const box = model.redRoot!.children.find(c => c.kind === 'box')!
+    const imageNode = (box.metadata.titleNodes as typeof box.children)[0]
+
+    expect(imageNode.kind === 'image').toBe(true)
+    // Offset inside [img]...[/img] should locate the image node
+    const found = model.redRoot!.findNodeAtOffset(10)
+    expect(found).toBeDefined()
+    expect(found?.kind === 'text' || found?.kind === 'image').toBe(true)
+  })
+})