@miliastry/quasar 1.1.0 → 1.2.0

package/dist/types/BBCode/BBCodeDocumentModel.d.ts

@@ -28,7 +28,7 @@ import { type InterningMode } from '../Syntax/GreenNodePool';
 import { GreenNode } from '../Syntax/GreenNode';
 import { RedNode } from '../Syntax/RedNode';
 import { type BBCodeDialect } from './BBCodeToGreenNode';
-import { HTMLRenderer } from '../Visitors/HTMLRenderer';
+import { HTMLRenderer, type HTMLRendererOptions } from '../Visitors/HTMLRenderer';
 export interface BBCodeDocumentModelOptions extends DocumentModelOptions {
     /** Source BBCode text to parse */
     source?: string;
@@ -64,6 +64,15 @@ export declare class BBCodeDocumentModel extends DocumentModel {
     get dialect(): BBCodeDialect;
     get root(): RedNode | null;
     toHTML(renderer?: HTMLRenderer): string;
+    /**
+     * Fast-path read-only rendering for forum posts, comments, and static views.
+     *
+     * Completely bypasses semantic analysis (linter), undo stack allocations, and
+     * editor node ids (idMode: 'none') to maximize throughput and minimize memory.
+     */
+    static renderForum(source: string, options?: HTMLRendererOptions & {
+        dialect?: BBCodeDialect;
+    }): string;
     /**
      * Parse BBCode text directly to a GreenNode tree using the
      * DocumentEngine's built-in BBCode Lexer + Parser.
@@ -90,3 +99,4 @@ export declare class BBCodeDocumentModel extends DocumentModel {
      */
     protected exportSource(root: RedNode): string;
 }
+export declare const renderForumBBCode: typeof BBCodeDocumentModel.renderForum;

package/dist/types/Visitors/DOMMorpher.d.ts

@@ -11,3 +11,9 @@
  * - Zero extra wrapper <div> elements
  */
 export declare function morphHTML(container: HTMLElement, newHTML: string): void;
+/**
+ * Reconcile two HTML elements of the same tag in-place.
+ * Syncs attributes, preserves interactive states (<details open>, .open classes),
+ * and recursively morphs child nodes.
+ */
+export declare function morphElement(oldEl: Element, newEl: Element): void;

package/dist/types/Visitors/HTMLRenderer.d.ts

@@ -15,8 +15,19 @@ import { type TokenResolverFn, type TokenSource } from '../Tokens';
 export interface HTMLRendererOptions {
     /**
      * Replicate osu! forum BBCode spacing quirks.
-     * Defaults to true for full compatibility with Miliastry.
-     * Set to false for a more logical, predictable rendering engine.
+     *
+     * NO LO LEE NADIE desde que el motor implementa las reglas reales de
+     * consumo de saltos (ver {@link HTMLRenderer.NEWLINE_RULES}). Sólo gobernaba
+     * dos heurísticas sobre `[code]` que resultaron ser falsas — osu no se come
+     * ningún salto ANTES de un bloque, y el resto de las reglas nunca estuvo
+     * condicionado. El espaciado ya no es opcional: Miliastry es "osu con
+     * esteroides" y rompe líneas igual, así que apagarlo no tendría a qué
+     * volver.
+     *
+     * Se conserva porque es API pública del renderer y quitarlo rompería a quien
+     * lo pase. Es candidato a borrarse en la próxima ruptura de versión.
+     *
+     * @deprecated Sin efecto. El espaciado de osu es ahora incondicional.
      */
     osuBehaviour?: boolean;
     /** Registry for resolving custom tags */
@@ -153,6 +164,19 @@ export declare class HTMLRenderer extends Visitor<string> {
      * LYNE's forum renderer applies.
      */
     private tableDepth;
+    /**
+     * ¿Estamos emitiendo el vocabulario de clases de osu!?
+     *
+     * osu estiliza box, spoilerbox, notice, imagemap, youtube, los alineados y
+     * los perfiles POR NOMBRE DE CLASE, no por estilo inline. Sobre una userpage
+     * real el HTML de Quasar salía sin estilo porque emitía su propio
+     * vocabulario (`<details>`, `.notice`, `.imagemap-container`…). Bajo
+     * `dialect: 'osu'` se emiten las clases y la estructura de osu; el resto de
+     * dialectos conserva la suya, que es la que sus hojas de estilo esperan.
+     */
+    private isOsu;
+    /** osu recorta los saltos pegados a la apertura y al cierre de box/notice. */
+    private static trimOsuEdges;
     private idAttr;
     /**
      * Kinds that carry `data-node-id`.
@@ -193,12 +217,50 @@ export declare class HTMLRenderer extends Visitor<string> {
      */
     renderChildren(node: RedNode): string;
     private renderNode;
-    /** osu! quirk: newlines immediately preceding a [code] block are completely ignored */
-    private isNextCodeBlock;
-    /** Checks if this is the LAST empty_line right before a code block (skipping only spacing) */
-    private isImmediateEmptyLineBeforeCode;
-    private isPrevBlockBoundary;
-    private isTrailingBlockBoundary;
+    /** How many newlines a construct swallows around its own tags. */
+    private static readonly NEWLINE_RULES;
+    /**
+     * What a Miliastry-only block does. This is what the old
+     * `isPrevBlockBoundary` / `isTrailingBlockBoundary` pair did for every block:
+     * eat the first newline after the open, every newline before the close, and
+     * the first newline after the close.
+     */
+    private static readonly LEGACY_BLOCK_RULE;
+    /**
+     * Containers whose opening tag occupies no source text, so a backwards scan
+     * has to walk straight through them.
+     */
+    private static readonly WIDTHLESS_OPEN;
+    /**
+     * Same for the closing side. `list_item` is here because `[/*]` is never
+     * written: an item ends where the next `[*]` or the `[/list]` begins, so
+     * `\s*\[/list\]` sees the newline that Quasar stores inside the item.
+     */
+    private static readonly WIDTHLESS_CLOSE;
+    private newlineRule;
+    private static isNewlineNode;
+    private static isBlankText;
+    /**
+     * Whether this `spacing` / `empty_line` leaf is eaten by a neighbouring tag
+     * and therefore renders nothing.
+     *
+     * Each leaf is exactly ONE source newline (the parser splits a run into one
+     * node per `\n`), so the four scans below can be read straight off the
+     * regexes they mirror. A newline eaten by any of them is eaten: osu's passes
+     * run in a fixed order, but since a consumed newline is consumed whichever
+     * pass claimed it, the union is enough — the per-pass order only matters for
+     * a budget that could be spent elsewhere, and budgets here are counted from
+     * the tag outwards, exactly as `\n?\n?` counts.
+     */
+    private isNewlineSwallowed;
+    /** `\[box\]\n*`, `\[quote\]\s*`, `[centre]\n`. */
+    private eatenByOpeningTag;
+    /** `\n*\[/box\]`, `\s*\[/quote\]`, `\s*\[/list\]`. */
+    private eatenByClosingTag;
+    /** `\[/box\]\n?`, `\[/list\]\n?\n?`. */
+    private eatenAfterClosingTag;
+    /** `\s*\[\*\]` — the only pass that eats whitespace BEFORE an opening tag. */
+    private eatenBeforeOpeningTag;
     private renderError;
     private wrapInline;
     private wrapBlock;
@@ -208,6 +270,30 @@ export declare class HTMLRenderer extends Visitor<string> {
     /** Keyword-or-number CSS values (font-weight, font-style, text-decoration). */
     private isCssKeyword;
     /** Read a metadata field, falling back to the raw tag attribute. */
+    /**
+     * Lo único que osu! acepta en `[color=…]`.
+     *
+     * Su `BBCodeForDB::parseColour` sella el tag con un uid sólo si el valor
+     * matchea `#[[:xdigit:]]{6}` o `[[:alpha:]]+` — nada más. No valida que el
+     * nombre sea un color CSS de verdad (`banana` pasa), pero `#fff`, `#ffffffff`,
+     * `rgb(...)`, `$token` o un hex sin `#` no pasan. Sin uid, la segunda pasada
+     * no ve el tag y el opener *y* el closer quedan como texto en la página.
+     */
+    private static readonly OSU_COLOR_RE;
+    /**
+     * `[color]` con el vocabulario de cada dialecto.
+     *
+     * Miliastry (y Lyne) aceptan a propósito más que osu: `#RGB`, `#RGBA`, un
+     * `$token` de diseño, nombres propios. Bajo `dialect: 'osu'` eso es una
+     * mentira: el editor pintaría color donde la página publicada muestra el
+     * BBCode crudo. Así que replicamos lo que hace osu — literal el opener,
+     * literal el closer, y los hijos renderizados normalmente en el medio.
+     *
+     * El chequeo mira el texto crudo del atributo, no el valor saneado: osu
+     * matchea sobre la fuente, así que `[color="#ffffff"]` (con comillas) también
+     * se le escapa.
+     */
+    private renderColor;
     private colorStyle;
     private fontSizeStyle;
     private fontStyle;
@@ -252,12 +338,30 @@ export declare class HTMLRenderer extends Visitor<string> {
     private renderRaw;
     private renderPlain;
     private renderAlign;
+    /**
+     * `[centre]` / `[left]` / `[right]` (y `[align=…]`).
+     *
+     * osu! no usa `text-align` inline: estiliza el bloque por nombre de clase,
+     * con la grafía británica `centre`. Fuera del dialecto osu el estilo inline
+     * se mantiene, porque ni Miliastry ni Lyne traen esas reglas.
+     */
+    private renderAlignAs;
     private renderEffect;
     private renderAnim;
     private renderContainer;
     private static readonly STYLE_PROP_WHITELIST;
     private renderStyleTag;
     private renderQuote;
+    /**
+     * La estructura exacta que `bbcode-spoilerbox` de osu-web espera.
+     *
+     * El toggle de osu es JS: `js-spoilerbox__link` es el gancho del click y
+     * `js-spoilerbox__body` el panel que abre. Si falta cualquiera de las dos
+     * clases el box queda mudo, así que la estructura no es decorativa.
+     */
+    private renderOsuSpoilerbox;
+    /** El rótulo de un box bajo osu: el del autor, o `SPOILER` en mayúsculas. */
+    private osuBoxTitle;
     private renderSpoilerbox;
     private renderBox;
     /**
@@ -268,6 +372,14 @@ export declare class HTMLRenderer extends Visitor<string> {
      * escrito y devolvía `[box=Box]`.
      */
     private bareTitleAttr;
+    /**
+     * ¿El título del box lo escribió el autor, o es el relleno del parser?
+     *
+     * `BBCodeToGreenNode` ya deja `metadata.title = 'Box'`/`'Spoiler'` para un
+     * tag pelado, así que el `fallback` de `renderTitle` nunca llega a usarse:
+     * quien quiera otro rótulo por defecto tiene que preguntar por aquí.
+     */
+    private hasOwnTitle;
     private renderTitle;
     /**
      * `[box=Title:#hex]`, `[tables=striped:#hex]`, `[columns=2:#hex]` → un

package/dist/types/Visitors/index.d.ts

@@ -2,7 +2,7 @@ export { Visitor } from './Visitor';
 export type { VisitorContext } from './Visitor';
 export { BBCodeExporter } from './BBCodeExporter';
 export { HTMLRenderer } from './HTMLRenderer';
-export { morphHTML } from './DOMMorpher';
+export { morphHTML, morphElement } from './DOMMorpher';
 export { MarkdownExporter } from './MarkdownExporter';
 export { JSONExporter } from './JSONExporter';
 export { SVGRenderer } from './SVGRenderer';

package/dist/types/Visuals/BoxDrawer.d.ts

@@ -29,13 +29,18 @@ export interface BoxDrawerOptions {
     easing?: string;
 }
 /**
- * Animate one `<details>` to its opposite state, reversing cleanly when it is
- * already mid-animation.
- *
- * Exported so hosts that toggle boxes programmatically (a keyboard command, an
- * "expand all" action) go through the same animation as a click.
+ * Animate one `<details>` to its opposite state. Exported so hosts that toggle
+ * boxes programmatically go through the same animation as a click.
  */
 export declare function toggleBoxWithDrawer(details: HTMLDetailsElement, options?: BoxDrawerOptions): void;
+/**
+ * Lo mismo para la caja del dialecto osu, que no es un `<details>`: es
+ * `div.js-spoilerbox > a.js-spoilerbox__link + div.js-spoilerbox__body`, y su
+ * estado abierto es la clase `js-spoilerbox--open` en el contenedor. Marcado
+ * distinto, misma animación — y la misma razón para vivir aquí: Quasar es
+ * quien emite el marcado, así que también define cómo se abre.
+ */
+export declare function toggleSpoilerboxWithDrawer(box: HTMLElement, options?: BoxDrawerOptions): void;
 /**
  * Intercept the native toggle of every box inside `root`.
  *

package/dist/types/Visuals/LyneAudio.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Quasar Document Engine — Visuals / LyneAudio.ts
+ *
+ * Interactive runtime for Quasar's Lyne / SYNE custom audio player (.lx-audio).
+ * Supports both scoped root binding (bindLyneAudio) and global document delegation.
+ */
+export declare function bindLyneAudio(root?: HTMLElement): () => void;
+export declare const setupLyneAudioRuntime: typeof bindLyneAudio;

package/dist/types/Visuals/index.d.ts

@@ -24,6 +24,7 @@
  */
 export { bindBoxDrawer, toggleBoxWithDrawer } from './BoxDrawer';
 export type { BoxDrawerOptions } from './BoxDrawer';
+export { setupLyneAudioRuntime, bindLyneAudio } from './LyneAudio';
 export declare const visualThemes: readonly [{
     readonly id: 'osu';
     readonly name: 'osu! Forum Style';

package/dist/types/index.d.ts

@@ -86,7 +86,7 @@ export { Visitor, type VisitorContext } from './Visitors/Visitor';
 export { BBCodeExporter, MILIASTRY_ONLY_TAGS, LYNE_ONLY_TAGS, type ExportTarget, type BBCodeExporterOptions, type BBCodeExportOptions } from './Visitors/BBCodeExporter';
 export { BBBlocksExporter, type UIBBBlock } from './Visitors/BBBlocksExporter';
 export { HTMLRenderer, type HTMLRendererOptions } from './Visitors/HTMLRenderer';
-export { morphHTML } from './Visitors/DOMMorpher';
+export { morphHTML, morphElement } from './Visitors/DOMMorpher';
 export { patchBlocksInto, clearPatchCache, type PatchBlocksOptions, type PatchBlocksStats } from './Visitors/BlockPatcher';
 export { SVGRenderer } from './Visitors/SVGRenderer';
 export { MarkdownExporter } from './Visitors/MarkdownExporter';
@@ -114,7 +114,7 @@ export { PluginRegistry, type PluginManifest, type PluginContribution } from './
 export { repairNesting, type NestingRepair, type OrphanCloser, type UnclosedOpener } from './Repair/NestingRepair';
 export { reconcileVisualDOMToBBCode, computeTextDelta, type SurgicalEdit as QuasarSurgicalEdit, type ReconcileResult } from './Reconciler/SurgicalReconciler';
 export * from './Edits';
-export { BBCodeDocumentModel } from './BBCode/BBCodeDocumentModel';
+export { BBCodeDocumentModel, renderForumBBCode } from './BBCode/BBCodeDocumentModel';
 export type { BBCodeDocumentModelOptions } from './BBCode/BBCodeDocumentModel';
 export { bbBlocksToRedTree, bbBlocksToGreenTree, bbBlockToGreenNode, greenToRedNode, tagToNodeKind, nodeKindToTag, isBlockKind, BBCODE_TAG_NAMES, getBBCodeTagNames, type BBCodeDialect, } from './BBCode/BBCodeToGreenNode';
 export type { BBBlock } from './BBCode/BBCodeToGreenNode';
@@ -122,7 +122,7 @@ export { DocumentEventBus, type DocumentEvent, type DocumentEventHandler } from
 export { transformOffset, transformRange, type TransformBias } from './Collab/positions';
 export { visualThemes } from './Visuals/index';
 export type { VisualThemeId } from './Visuals/index';
-export { bindBoxDrawer, toggleBoxWithDrawer } from './Visuals/BoxDrawer';
+export { bindBoxDrawer, toggleBoxWithDrawer, toggleSpoilerboxWithDrawer } from './Visuals/BoxDrawer';
 export type { BoxDrawerOptions } from './Visuals/BoxDrawer';
 export { applyGradient, applyGrow, applyRainbow, applyCentralGradient, applyMultiGradient, applyEffect, countTextLength } from './Utils/treeTransformers';
 export type { GradientEffect, GrowEffect, RainbowEffect, CentralGradientEffect, MultiGradientEffect, TreeEffect } from './Utils/treeTransformers';
@@ -152,3 +152,4 @@ export { nodeAttrValue, parseImgAttr, sanitizeColor, sanitizeFontSize, sanitizeF
 export type { ImgAttr } from './Syntax/nodeAttr';
 export { toTokenResolver, resolveTokenValue, } from './Tokens/index';
 export type { DocumentTokens, TokenResolverFn, TokenSource, } from './Tokens/index';
+export { setupLyneAudioRuntime, bindLyneAudio } from './Visuals/LyneAudio';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miliastry/quasar",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Quasar Document Engine - Advanced BBCode/Markdown/HTML AST Engine",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/BBCode/BBCodeDocumentModel.ts

@@ -32,7 +32,7 @@ import { greenToRedNode, greenToRedNodeReusing, type BBCodeDialect } from './BBC
 import { parseTokensToGreen } from './Parser'
 import { scanBBCode } from '../Lexer/BBCodeLexer'
 import { BBCodeExporter } from '../Visitors/BBCodeExporter'
-import { HTMLRenderer } from '../Visitors/HTMLRenderer'
+import { HTMLRenderer, type HTMLRendererOptions } from '../Visitors/HTMLRenderer'
 
 export interface BBCodeDocumentModelOptions extends DocumentModelOptions {
   /** Source BBCode text to parse */
@@ -110,6 +110,39 @@ export class BBCodeDocumentModel extends DocumentModel {
     return r.render(this.redRoot)
   }
 
+  /**
+   * Fast-path read-only rendering for forum posts, comments, and static views.
+   *
+   * Completely bypasses semantic analysis (linter), undo stack allocations, and
+   * editor node ids (idMode: 'none') to maximize throughput and minimize memory.
+   */
+  static renderForum(
+    source: string,
+    options: HTMLRendererOptions & { dialect?: BBCodeDialect } = {}
+  ): string {
+    const previousIdMode = HTMLRenderer.idMode
+    HTMLRenderer.idMode = 'none'
+    try {
+      const dialect = options.dialect ?? (options.theme === 'lyne' ? 'lyne' : 'miliastry')
+      const doc = new BBCodeDocumentModel({
+        source: source || ' ',
+        dialect,
+        autoAnalyze: false,
+        maxUndo: 0,
+        incremental: false,
+      })
+      if (!doc.redRoot) return ''
+      const renderer = new HTMLRenderer({
+        ...options,
+        dialect,
+        registry: options.registry ?? doc.tagRegistry,
+      })
+      return renderer.render(doc.redRoot)
+    } finally {
+      HTMLRenderer.idMode = previousIdMode
+    }
+  }
+
   /**
    * Parse BBCode text directly to a GreenNode tree using the
    * DocumentEngine's built-in BBCode Lexer + Parser.
@@ -176,3 +209,5 @@ export class BBCodeDocumentModel extends DocumentModel {
     return new BBCodeExporter(this.tagRegistry, exportTarget).export(root)
   }
 }
+
+export const renderForumBBCode = BBCodeDocumentModel.renderForum

package/src/HTML/HTMLToGreenNode.ts

@@ -189,6 +189,14 @@ function domToGreenTree(root: HTMLElement): GreenNode {
                }
             });
           }
+          else if (el.classList.contains('lx-audio')) {
+            kind = 'audio';
+            const audioSrc = el.getAttribute('data-src') || el.querySelector('audio')?.getAttribute('src') || '';
+            if (audioSrc) {
+              children.push(greenLeaf('text', audioSrc));
+              currentOffset += audioSrc.length;
+            }
+          }
           else if (el.style.textAlign === 'center') kind = 'center';
           else if (el.style.textAlign === 'right') kind = 'right';
           else if (el.style.textAlign === 'left') kind = 'left';

package/src/Semantic/SemanticAnalyzer.ts

@@ -2213,6 +2213,49 @@ export class SemanticAnalyzer {
         return diagnostics.length > 0 ? diagnostics : null
       },
     })
+
+    // ── Box missing '=' validator ────────────────────────────────
+    // In osu!, [box] without '=' is not parsed as a collapsible box.
+    // Miliastry can preview it as a default-titled box, but osu! forum compatibility
+    // requires [box=] (or [box=Title]).
+    this.register({
+      code: 'box-missing-equals',
+      severity: 'warning',
+      kinds: ['box'],
+      validate: (node, ctx) => {
+        if (node.text.startsWith('=')) return null
+        const openEnd = node.innerStart > node.range.start ? node.innerStart : node.range.start + 5
+        if (node.range.start < 0 || openEnd > ctx.source.length) return null
+        const openTag = ctx.source.slice(node.range.start, openEnd)
+        if (openTag.includes('=')) return null
+
+        const fixes: DiagnosticFix[] = [
+          {
+            description: "Add '=' to [box]",
+            isAutomatic: true,
+            operations: [
+              {
+                kind: 'replace_text',
+                range: { start: node.range.start, end: openEnd },
+                newText: '[box=]',
+              },
+            ],
+          },
+        ]
+
+        return createDiagnostic(
+          'box-missing-equals',
+          "[box] without '=' can be previewed in Miliastry, but osu! requires [box=] to parse it correctly",
+          'warning',
+          {
+            nodeId: node.id,
+            nodeKind: node.kind,
+            range: { start: node.range.start, end: openEnd },
+            fixes,
+          },
+        )
+      },
+    })
   }
 
   /**

package/src/Visitors/BBCodeExporter.ts

@@ -199,12 +199,49 @@ function hasAttrValue(value: unknown): boolean {
   return value !== undefined && value !== null && String(value) !== ''
 }
 
-function normalizeColorToHex(color: string): string {
+/**
+ * Expande un cuerpo hexadecimal a los 6 dígitos que exige osu, o `null` si no
+ * es un hex de longitud reconocible (3, 4, 6 u 8).
+ *
+ * El canal alfa se descarta a propósito: osu no soporta transparencia en
+ * ninguna forma, así que la alternativa a perderlo es publicar un `[color=…]`
+ * que su parser rechaza y deja como texto literal en la página.
+ */
+function expandHexForOsu(body: string): string | null {
+  if (!/^[0-9a-fA-F]+$/.test(body)) return null
+  switch (body.length) {
+    case 3:
+      return body[0] + body[0] + body[1] + body[1] + body[2] + body[2]
+    case 4:
+      // RGBA corto: expandimos RGB y tiramos el alfa.
+      return body[0] + body[0] + body[1] + body[1] + body[2] + body[2]
+    case 6:
+      // Ya es legal: se devuelve tal cual, sin tocar mayúsculas del autor.
+      return body
+    case 8:
+      // RGBA largo: los dos últimos dígitos son el alfa.
+      return body.slice(0, 6)
+    default:
+      return null
+  }
+}
+
+/**
+ * `target` decide si además de convertir `rgb()` hay que adaptar el hex a la
+ * gramática de osu (`BBCodeForDB::parseColour`), que sólo acepta `#` + 6
+ * dígitos hex o una secuencia puramente alfabética. Para 'miliastry' y 'lyne'
+ * el comportamiento es el de siempre: no se reescribe nada.
+ */
+function normalizeColorToHex(color: string, target: ExportTarget = 'miliastry'): string {
   if (!color) return color
   const trimmed = color.trim()
   // Un hex ya es canónico: bajarlo a minúsculas reescribía `[color=#FF0000]`
   // del autor en cada exportación, y `Analysis/RoundTrip` fija lo contrario.
-  if (trimmed.startsWith('#')) return trimmed
+  if (trimmed.startsWith('#')) {
+    if (target !== 'osu') return trimmed
+    const expanded = expandHexForOsu(trimmed.slice(1))
+    return expanded === null ? trimmed : `#${expanded}`
+  }
 
   const rgbMatch = trimmed.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)$/i)
   if (rgbMatch) {
@@ -214,6 +251,15 @@ function normalizeColorToHex(color: string): string {
     return `#${r}${g}${b}`.toLowerCase()
   }
 
+  // Hex desnudo: osu exige el `#`, así que `ff0000` se publicaría roto. Sólo
+  // lo tratamos como hex si trae algún dígito; una palabra puramente
+  // alfabética (`red`, y también `beef`, que es hex válido) ya matchea la
+  // alternativa alfabética de osu y no hay que tocarla.
+  if (target === 'osu' && /\d/.test(trimmed)) {
+    const expanded = expandHexForOsu(trimmed)
+    if (expanded !== null) return `#${expanded}`
+  }
+
   return trimmed
 }
 
@@ -365,7 +411,7 @@ export class BBCodeExporter extends Visitor<string> {
           if (this.shouldResolveTokens() && col.startsWith('$')) {
             col = resolveTokenValue(col, this.tokenResolver)
           }
-          out = `[color=${normalizeColorToHex(col)}]${out}[/color]`
+          out = `[color=${normalizeColorToHex(col, this.target)}]${out}[/color]`
         }
         if (style.fontSize) {
           let size = style.fontSize
@@ -476,7 +522,7 @@ export class BBCodeExporter extends Visitor<string> {
         if (this.shouldResolveTokens() && color.startsWith('$')) {
           color = resolveTokenValue(color, this.tokenResolver)
         }
-        return `=${normalizeColorToHex(color)}`
+        return `=${normalizeColorToHex(color, this.target)}`
       } else if (node.kind === 'font' && hasAttrValue(node.metadata.font)) {
         let font = String(node.metadata.font)
         if (this.shouldResolveTokens() && font.startsWith('$')) {
@@ -589,7 +635,7 @@ export class BBCodeExporter extends Visitor<string> {
         if (this.shouldResolveTokens() && col.startsWith('$')) {
           col = resolveTokenValue(col, this.tokenResolver)
         }
-        return `=${normalizeColorToHex(col)}`
+        return `=${normalizeColorToHex(col, this.target)}`
       }
       if (this.shouldResolveTokens() && text.startsWith('=')) {
         let val = text.slice(1)

package/src/Visitors/BlockPatcher.ts

@@ -41,7 +41,7 @@
 
 import { RedNode } from '../Syntax/RedNode'
 import { HTMLRenderer } from './HTMLRenderer'
-import { morphHTML } from './DOMMorpher'
+import { morphHTML, morphElement } from './DOMMorpher'
 import type { TextChangeRange } from '../Incremental/ChangeTracker'
 
 export interface PatchBlocksOptions {
@@ -215,6 +215,21 @@ function blockKey(node: RedNode, index: number): string {
   return node.id ?? `__block_${index}`
 }
 
+/**
+ * Blocks whose HTML is NOT a function of the node alone.
+ *
+ * A newline leaf renders `<br>` or nothing depending on which tags surround
+ * it — `[/box]\n` loses the newline, `text\n` keeps it (see
+ * `HTMLRenderer.isNewlineSwallowed`). The block cache is keyed by node
+ * identity, so reordering blocks without touching them keeps every id and
+ * every cached fragment while changing what the newlines between them mean.
+ * Re-rendering them unconditionally costs a couple of sibling hops and keeps
+ * the patched DOM equal to a full render, which is the whole contract.
+ */
+function isContextSensitive(node: RedNode): boolean {
+  return node.kind === 'spacing' || node.kind === 'empty_line'
+}
+
 /** Build a DOM node from an HTML fragment (first child), decoding entities. */
 function nodeFromHtml(html: string): Node {
   const t = document.createElement('template')
@@ -279,7 +294,6 @@ function shouldMorphInPlace(
   return (
     run.kind === 'element' &&
     !!run.node.id &&
-    run.node.children.length > 0 &&
     canMorphInPlace(run.node) &&
     renderedTag(run.html) === element.tagName
   )
@@ -401,7 +415,7 @@ function reconcileKeyed(
   let patched = 0
   try {
     runs = buildRuns(blocks, keys, (node, key) => {
-      if (cache.lastNode.get(key) === node) {
+      if (cache.lastNode.get(key) === node && !isContextSensitive(node)) {
         return { html: cache.lastHtml.get(key) ?? '', kind: cache.lastClass.get(key) ?? 'none' }
       }
       const html = renderer.render(node)
@@ -469,13 +483,19 @@ function reconcileKeyed(
       }
 
       if (element.nodeType === 1 && shouldMorphInPlace(element as Element, run)) {
-        // Element with children and a matching tag: morph its inner content in
-        // place, preserving the element (and runtime state like an open
-        // `<details>`). Tag mismatch (kind change at a stable slot) or wrapper
-        // kinds (code/svg/imagemap) go the replace path below.
-        morphHTML(element as HTMLElement, renderer.renderChildren(run.node))
+        // Element with a matching tag: morph its attributes and children in
+        // place via morphElement, preserving the element identity and runtime state
+        // (such as an open <details>, its <summary> and title, or media playback).
+        // Tag mismatch (kind change at a stable slot) or wrapper kinds
+        // (code/svg/imagemap) go the replace path below.
+        const newEl = nodeFromHtml(run.html)
+        if (newEl && newEl.nodeType === 1 && (newEl as Element).tagName === (element as Element).tagName) {
+          morphElement(element as Element, newEl as Element)
+        } else {
+          container.replaceChild(newEl, element)
+        }
       } else {
-        // Text run, an element leaf (img/video/audio/`<br>`), a kind whose tag
+        // Text run, an element leaf (img/video/audio/<br>), a kind whose tag
         // changed, or a wrapper renderer kind: the node's own structure must
         // change — replace outright.
         container.replaceChild(nodeFromHtml(run.html), element)
@@ -639,7 +659,7 @@ function reconcileWindowed(
   let runs: PatchRun[]
   try {
     runs = buildRuns(blocks, keys, (node, key) => {
-      if (cache.lastNode.get(key) === node) {
+      if (cache.lastNode.get(key) === node && !isContextSensitive(node)) {
         return { html: cache.lastHtml.get(key) ?? '', kind: cache.lastClass.get(key) ?? 'none' }
       }
       const html = renderer.render(node)
@@ -909,7 +929,12 @@ function reconcileWindowed(
       }
 
       if (element.nodeType === 1 && shouldMorphInPlace(element as Element, run)) {
-        morphHTML(element as HTMLElement, renderer.renderChildren(run.node))
+        const newEl = nodeFromHtml(run.html)
+        if (newEl && newEl.nodeType === 1 && (newEl as Element).tagName === (element as Element).tagName) {
+          morphElement(element as Element, newEl as Element)
+        } else {
+          container.replaceChild(newEl, element)
+        }
       } else {
         container.replaceChild(nodeFromHtml(run.html), element)
       }