@miliastry/quasar 1.1.0 → 1.2.0

package/dist/index.js

@@ -6234,6 +6234,42 @@ var SemanticAnalyzer = class {
         return diagnostics.length > 0 ? diagnostics : null;
       }
     });
+    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 = [
+          {
+            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
+          }
+        );
+      }
+    });
   }
   /**
    * Create a validator for a specific tag/kind.
@@ -8331,10 +8367,29 @@ var KIND_TO_TAG_NAME = {
 function hasAttrValue(value) {
   return value !== void 0 && value !== null && String(value) !== "";
 }
-function normalizeColorToHex(color) {
+function expandHexForOsu(body) {
+  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:
+      return body[0] + body[0] + body[1] + body[1] + body[2] + body[2];
+    case 6:
+      return body;
+    case 8:
+      return body.slice(0, 6);
+    default:
+      return null;
+  }
+}
+function normalizeColorToHex(color, target = "miliastry") {
   if (!color) return color;
   const trimmed = color.trim();
-  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) {
     const r = parseInt(rgbMatch[1], 10).toString(16).padStart(2, "0");
@@ -8342,6 +8397,10 @@ function normalizeColorToHex(color) {
     const b = parseInt(rgbMatch[3], 10).toString(16).padStart(2, "0");
     return `#${r}${g}${b}`.toLowerCase();
   }
+  if (target === "osu" && /\d/.test(trimmed)) {
+    const expanded = expandHexForOsu(trimmed);
+    if (expanded !== null) return `#${expanded}`;
+  }
   return trimmed;
 }
 var BBCodeExporter = class extends Visitor {
@@ -8466,7 +8525,7 @@ var BBCodeExporter = class extends Visitor {
           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;
@@ -8549,7 +8608,7 @@ var BBCodeExporter = class extends Visitor {
         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("$")) {
@@ -8652,7 +8711,7 @@ var BBCodeExporter = class extends Visitor {
         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);
@@ -8977,6 +9036,23 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
    * LYNE's forum renderer applies.
    */
   tableDepth = 0;
+  /**
+   * ¿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.
+   */
+  isOsu() {
+    return this.options.dialect === "osu";
+  }
+  /** osu recorta los saltos pegados a la apertura y al cierre de box/notice. */
+  static trimOsuEdges(html) {
+    return html.replace(/^[\t ]*\r?\n/, "").replace(/\r?\n[\t ]*$/, "");
+  }
   idAttr(node) {
     if (_HTMLRenderer.idMode === "none") return "";
     if (_HTMLRenderer.idMode === "all") return ` data-node-id="${node.id}"`;
@@ -9107,7 +9183,7 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
       case "spoiler":
         return this.wrapInline("span", node, 'class="spoiler"');
       case "color":
-        return this.wrapInline("span", node, this.colorStyle(node));
+        return this.renderColor(node);
       case "font_size":
         return this.wrapInline("span", node, this.fontSizeStyle(node));
       case "font":
@@ -9125,11 +9201,11 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
       case "audio":
         return this.renderAudio(node);
       case "center":
-        return this.wrapBlock("div", node, 'style="text-align:center;"');
+        return this.renderAlignAs(node, "center");
       case "right":
-        return this.wrapBlock("div", node, 'style="text-align:right;"');
+        return this.renderAlignAs(node, "right");
       case "left":
-        return this.wrapBlock("div", node, 'style="text-align:left;"');
+        return this.renderAlignAs(node, "left");
       // Sigue siendo siempre `h2`, como antes: el nivel de BBCode no mapea al
       // de HTML y un `[heading=9]` daría un `<h9>` inválido. `data-bare-level`
       // sólo anota que el 2 lo puso el renderer, para que el camino de vuelta
@@ -9262,12 +9338,10 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
       case "paint":
         return this.renderEffectSegments(node, "paint");
       case "spacing":
-        if (this.options.osuBehaviour && this.isNextCodeBlock(node)) return "\n";
-        if (this.isTrailingBlockBoundary(node)) return "\n";
-        return this.isPrevBlockBoundary(node) ? "\n" : `<br${this.idAttr(node)}>`;
+        if (this.isNewlineSwallowed(node)) return "\n";
+        return `<br${this.idAttr(node)}>`;
       case "empty_line":
-        if (this.options.osuBehaviour && this.isImmediateEmptyLineBeforeCode(node)) return "\n";
-        if (this.isTrailingBlockBoundary(node)) return "\n";
+        if (this.isNewlineSwallowed(node)) return "\n";
         return `<div class="bb-empty-line"${this.idAttr(node)}><br></div>`;
       case "group":
         return this.wrapInline("span", node, 'class="group"');
@@ -9303,58 +9377,241 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
         return this.escapeHtml(node.text || "");
     }
   }
-  // ─── Render Helpers ─────────────────────────────────────
-  /** osu! quirk: newlines immediately preceding a [code] block are completely ignored */
-  isNextCodeBlock(node) {
-    let next = node.nextSibling;
-    while (next && (next.kind === "spacing" || next.kind === "empty_line")) {
-      next = next.nextSibling;
-    }
-    return next?.kind === "code";
-  }
-  /** Checks if this is the LAST empty_line right before a code block (skipping only spacing) */
-  isImmediateEmptyLineBeforeCode(node) {
-    let next = node.nextSibling;
-    while (next && next.kind === "spacing") {
-      next = next.nextSibling;
-    }
-    return next?.kind === "code";
-  }
-  isPrevBlockBoundary(node) {
-    let prev = node.previousSibling;
-    while (prev) {
-      if (prev.kind === "spacing" || prev.kind === "empty_line") {
-        prev = prev.previousSibling;
-        continue;
+  // ─── Newline swallowing ─────────────────────────────────
+  //
+  // osu! turns newlines into `<br />` with one flat rule at the very end of
+  // `BBCodeFromDB::toHTML` — `str_replace("\n", '<br />')`. Every subtlety
+  // lives BEFORE that line: each block pass is a regex that eats the newlines
+  // touching its own tags, so those newlines are simply gone by the time the
+  // flat rule runs. The amount eaten differs per tag, and the asymmetries are
+  // not decorative:
+  //
+  //   parseBox      `\[box=…\]\n*`   `\n*\[/box\]\n?`
+  //   parseCode     `\[code\]\n*`    `\n*\[/code\]\n?`
+  //   parseNotice   `\[notice\]\n*`  `\n*\[/notice\]\n?`
+  //   parseList     `\s*\[\*\]`      `\s*\[/list\]\n?\n?`
+  //   parseQuote    `\[quote…\]\s*`  `\s*\[/quote\]\n?\n?`
+  //   parseHeading  —                `\[/heading\]\n?`
+  //   parseImagemap —                `\[/imagemap\]\n?`
+  //   parseAlignment  strtr of `[centre]\n` and `[/centre]\n` — exactly one
+  //
+  // Quasar used to approximate all of that with two neighbourhood heuristics
+  // (`isPrevBlockBoundary` / `isTrailingBlockBoundary`) that treated every
+  // block alike, so they over-ate at `[centre]`/`[/imagemap]` and under-ate at
+  // `[/list]`/`[/quote]`. This models the real rules instead.
+  //
+  // Deliberately NOT gated on the dialect: Miliastry is "osu with steroids"
+  // and has to break lines the same way. Blocks that only exist in Miliastry
+  // (tables, gallery, columns, scroll, …) have no osu counterpart to copy, so
+  // they keep the legacy behaviour via {@link HTMLRenderer.LEGACY_BLOCK_RULE}.
+  /** How many newlines a construct swallows around its own tags. */
+  static NEWLINE_RULES = {
+    // `\n*` inside both edges, one newline after the close.
+    box: { afterOpen: "all", beforeClose: "all", beforeOpen: "none", afterClose: 1 },
+    boxw: { afterOpen: "all", beforeClose: "all", beforeOpen: "none", afterClose: 1 },
+    spoilerbox: { afterOpen: "all", beforeClose: "all", beforeOpen: "none", afterClose: 1 },
+    notice: { afterOpen: "all", beforeClose: "all", beforeOpen: "none", afterClose: 1 },
+    wnotice: { afterOpen: "all", beforeClose: "all", beforeOpen: "none", afterClose: 1 },
+    code: { afterOpen: "all", beforeClose: "all", beforeOpen: "none", afterClose: 1 },
+    // `\s*` — not just newlines — and TWO newlines after the close.
+    quote: { afterOpen: "whitespace", beforeClose: "whitespace", beforeOpen: "none", afterClose: 2 },
+    // `[list]` itself eats nothing after its opening tag: the pass that eats
+    // is `\s*\[\*\]`, which needs an item to follow. `[list]\n\nloose text`
+    // keeps both newlines; `[list]\n[*]a` loses one to the item, not the list.
+    list: { afterOpen: "none", beforeClose: "whitespace", beforeOpen: "none", afterClose: 2 },
+    // `\s*\[\*\]`. The matching `[/*]` of the table exists only in legacy
+    // phpBB rows — `BBCodeForDB` never emits one — so the item's close is
+    // width-less here and its two-newline budget is unreachable by design;
+    // `[*]a\n\n[*]b` loses both newlines to the NEXT item's `\s*`, which is
+    // the same output by a different route.
+    list_item: { afterOpen: "none", beforeClose: "none", beforeOpen: "whitespace", afterClose: 0 },
+    // strtr with `[centre]\n` / `[/centre]\n`: exactly one on each outer edge,
+    // and nothing before the close — `x\n[/centre]` really does keep its `<br>`.
+    center: { afterOpen: "one", beforeClose: "none", beforeOpen: "none", afterClose: 1 },
+    left: { afterOpen: "one", beforeClose: "none", beforeOpen: "none", afterClose: 1 },
+    right: { afterOpen: "one", beforeClose: "none", beforeOpen: "none", afterClose: 1 },
+    align: { afterOpen: "one", beforeClose: "none", beforeOpen: "none", afterClose: 1 },
+    heading: { afterOpen: "none", beforeClose: "none", beforeOpen: "none", afterClose: 1 },
+    imagemap: { afterOpen: "none", beforeClose: "none", beforeOpen: "none", afterClose: 1 },
+    // `[img]` is inline in osu and swallows nothing at all.
+    image: { afterOpen: "none", beforeClose: "none", beforeOpen: "none", afterClose: 0 },
+    document: { afterOpen: "none", beforeClose: "none", beforeOpen: "none", afterClose: 0 }
+  };
+  /**
+   * 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.
+   */
+  static LEGACY_BLOCK_RULE = {
+    afterOpen: "one",
+    beforeClose: "all",
+    beforeOpen: "none",
+    afterClose: 1
+  };
+  /**
+   * Containers whose opening tag occupies no source text, so a backwards scan
+   * has to walk straight through them.
+   */
+  static WIDTHLESS_OPEN = /* @__PURE__ */ new Set(["paragraph", "group"]);
+  /**
+   * 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.
+   */
+  static WIDTHLESS_CLOSE = /* @__PURE__ */ new Set(["paragraph", "group", "list_item"]);
+  newlineRule(kind) {
+    const rule = _HTMLRenderer.NEWLINE_RULES[kind];
+    if (rule) return rule;
+    return this.BLOCK_TAGS.has(kind) ? _HTMLRenderer.LEGACY_BLOCK_RULE : null;
+  }
+  static isNewlineNode(node) {
+    return node.kind === "spacing" || node.kind === "empty_line";
+  }
+  static isBlankText(node) {
+    return node.kind === "text" && node.children.length === 0 && node.text.trim() === "";
+  }
+  /**
+   * 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.
+   */
+  isNewlineSwallowed(node) {
+    return this.eatenByOpeningTag(node) || this.eatenByClosingTag(node) || this.eatenAfterClosingTag(node) || this.eatenBeforeOpeningTag(node);
+  }
+  /** `\[box\]\n*`, `\[quote\]\s*`, `[centre]\n`. */
+  eatenByOpeningTag(node) {
+    let cur = node;
+    let newlinesBetween = 0;
+    let blankBetween = false;
+    for (; ; ) {
+      const prev = cur.previousSibling;
+      if (prev) {
+        if (_HTMLRenderer.isNewlineNode(prev)) {
+          newlinesBetween++;
+          cur = prev;
+          continue;
+        }
+        if (_HTMLRenderer.isBlankText(prev)) {
+          blankBetween = true;
+          cur = prev;
+          continue;
+        }
+        return false;
       }
-      if (prev.kind === "text" && prev.text.trim() === "") {
-        prev = prev.previousSibling;
+      const parent = cur.parent;
+      if (!parent) return false;
+      if (_HTMLRenderer.WIDTHLESS_OPEN.has(parent.kind)) {
+        cur = parent;
         continue;
       }
-      break;
+      const rule = this.newlineRule(parent.kind);
+      if (!rule) return false;
+      switch (rule.afterOpen) {
+        case "whitespace":
+          return true;
+        // `\n*` matches newlines only: a stray space breaks the run.
+        case "all":
+          return !blankBetween;
+        case "one":
+          return !blankBetween && newlinesBetween === 0;
+        default:
+          return false;
+      }
     }
-    if (prev && this.BLOCK_TAGS.has(prev.kind) && prev.kind !== "image" && prev.kind !== "imagemap") return true;
-    if (!prev && node.parent && this.BLOCK_TAGS.has(node.parent.kind) && node.parent.kind !== "image" && node.parent.kind !== "imagemap") return true;
-    return false;
   }
-  isTrailingBlockBoundary(node) {
-    let next = node.nextSibling;
-    while (next) {
-      if (next.kind === "spacing" || next.kind === "empty_line") {
-        next = next.nextSibling;
+  /** `\n*\[/box\]`, `\s*\[/quote\]`, `\s*\[/list\]`. */
+  eatenByClosingTag(node) {
+    let cur = node;
+    let blankBetween = false;
+    for (; ; ) {
+      const next = cur.nextSibling;
+      if (next) {
+        if (_HTMLRenderer.isNewlineNode(next)) {
+          cur = next;
+          continue;
+        }
+        if (_HTMLRenderer.isBlankText(next)) {
+          blankBetween = true;
+          cur = next;
+          continue;
+        }
+        return false;
+      }
+      const parent = cur.parent;
+      if (!parent) return false;
+      if (_HTMLRenderer.WIDTHLESS_CLOSE.has(parent.kind)) {
+        cur = parent;
         continue;
       }
-      if (next.kind === "text" && next.text.trim() === "") {
-        next = next.nextSibling;
+      const rule = this.newlineRule(parent.kind);
+      if (!rule) return false;
+      switch (rule.beforeClose) {
+        case "whitespace":
+          return true;
+        case "all":
+          return !blankBetween;
+        default:
+          return false;
+      }
+    }
+  }
+  /** `\[/box\]\n?`, `\[/list\]\n?\n?`. */
+  eatenAfterClosingTag(node) {
+    let cur = node;
+    let newlinesBetween = 0;
+    for (; ; ) {
+      const prev = cur.previousSibling;
+      if (!prev) {
+        const parent = cur.parent;
+        if (parent && _HTMLRenderer.WIDTHLESS_OPEN.has(parent.kind)) {
+          cur = parent;
+          continue;
+        }
+        return false;
+      }
+      if (_HTMLRenderer.isNewlineNode(prev)) {
+        newlinesBetween++;
+        cur = prev;
         continue;
       }
-      break;
+      let closer = prev;
+      while (_HTMLRenderer.WIDTHLESS_CLOSE.has(closer.kind) && closer.children.length > 0) {
+        closer = closer.children[closer.children.length - 1];
+      }
+      const rule = this.newlineRule(closer.kind);
+      return rule !== null && newlinesBetween < rule.afterClose;
     }
-    if (!next && node.parent && this.BLOCK_TAGS.has(node.parent.kind) && node.parent.kind !== "document") {
-      return true;
+  }
+  /** `\s*\[\*\]` — the only pass that eats whitespace BEFORE an opening tag. */
+  eatenBeforeOpeningTag(node) {
+    let cur = node;
+    for (; ; ) {
+      const next = cur.nextSibling;
+      if (next) {
+        if (_HTMLRenderer.isNewlineNode(next) || _HTMLRenderer.isBlankText(next)) {
+          cur = next;
+          continue;
+        }
+        return this.newlineRule(next.kind)?.beforeOpen === "whitespace";
+      }
+      const parent = cur.parent;
+      if (!parent) return false;
+      if (_HTMLRenderer.WIDTHLESS_CLOSE.has(parent.kind)) {
+        cur = parent;
+        continue;
+      }
+      return false;
     }
-    return false;
   }
+  // ─── Render Helpers ─────────────────────────────────────
   renderError(node) {
     const errorMsg = this.escapeHtml(node.metadata?.message || node.text || "Syntax Error");
     const content = this.renderChildren(node) || this.escapeHtml(node.text || "");
@@ -9406,6 +9663,41 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
     return !!raw && /^[a-z]{2,20}(?: [a-z]{2,20})?$|^[1-9]00$/i.test(raw.trim());
   }
   /** 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.
+   */
+  static OSU_COLOR_RE = /^(?:#[0-9a-fA-F]{6}|[a-zA-Z]+)$/;
+  /**
+   * `[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.
+   */
+  renderColor(node) {
+    if (this.options.dialect === "osu") {
+      const text = node.text || "";
+      const eq = text.indexOf("=");
+      const raw = eq >= 0 ? text.slice(eq + 1) : text ? "" : nodeAttrValue(node, "color");
+      if (!_HTMLRenderer.OSU_COLOR_RE.test(raw)) {
+        const opener = eq >= 0 ? `[color${text}]` : `[${text || "color"}]`;
+        return this.escapeHtml(opener) + this.renderChildren(node) + this.escapeHtml("[/color]");
+      }
+    }
+    return this.wrapInline("span", node, this.colorStyle(node));
+  }
   colorStyle(node) {
     const color = sanitizeColor(nodeAttrValue(node, "color"), this.tokenResolver);
     return color ? `style="color:${color};"` : "";
@@ -9447,6 +9739,11 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
         return `<strong${entity}><a${this.idAttr(node)} href="${this.escapeHtml(link.href)}"${ext}>${content}</a></strong>`;
       }
     }
+    if (type === "profile" && this.isOsu()) {
+      const key2 = val || `@${this.collectNodeText(node)}`;
+      const href = `https://osu.ppy.sh/users/${encodeURIComponent(key2)}`;
+      return `<a${this.idAttr(node)}${entity} class="user-name js-usercard" data-user-id="${this.escapeHtml(key2)}" href="${href}">${content}</a>`;
+    }
     if (type === "profile") {
       const url = this.options.theme === "lyne" || this.options.dialect === "lyne" ? `/u/${encodeURIComponent(val || content)}` : `https://osu.ppy.sh/users/${this.escapeHtml(val || content)}`;
       return `<strong${entity}><a${this.idAttr(node)} href="${url}" target="_blank" rel="noopener">${content}</a></strong>`;
@@ -9501,13 +9798,25 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
     if (!id) return this.mediaError("youtube", "[youtube] missing video ID");
     const ytMatch = /(?:youtu\.be\/|v=|\/embed\/|\/shorts\/)([\w-]{11})/.exec(id);
     if (ytMatch) id = ytMatch[1];
-    return `<iframe${this.idAttr(node)} class="bb-youtube" data-youtube="${this.escapeHtml(id)}" src="https://www.youtube.com/embed/${this.escapeHtml(id)}" frameborder="0" allowfullscreen></iframe>`;
+    const cls = this.isOsu() ? "u-embed-wide u-embed-wide--bbcode" : "bb-youtube";
+    const rel = this.isOsu() ? "?rel=0" : "";
+    return `<iframe${this.idAttr(node)} class="${cls}" data-youtube="${this.escapeHtml(id)}" src="https://www.youtube.com/embed/${this.escapeHtml(id)}${rel}" frameborder="0" allowfullscreen></iframe>`;
   }
   renderAudio(node) {
     let src = String(node.metadata?.src ?? "") || node.text || "";
     if (this.options.mediaProxy && src) {
       src = this.options.mediaProxy(src);
     }
+    const isLyne = this.options.theme === "lyne" || this.options.dialect === "lyne";
+    if (isLyne) {
+      const rawName = src.split("?")[0].split("#")[0].split("/").filter(Boolean).pop() || "audio_track.mp3";
+      let fileName = rawName;
+      try {
+        fileName = decodeURIComponent(rawName);
+      } catch {
+      }
+      return `<div${this.idAttr(node)} class="lx-audio bb-audio" data-src="${this.escapeHtml(src)}"><audio preload="metadata" src="${this.escapeHtml(src)}"></audio><div class="lx-track" role="progressbar" aria-label="Audio progress"><div class="fill"></div></div><div class="lx-row"><button type="button" class="lx-btn" aria-label="Play"><svg viewBox="0 0 16 16"><path d="M3 1.5 14 8 3 14.5z"/></svg></button><div class="lx-title"><div class="name">${this.escapeHtml(fileName)}</div><div class="label"><span class="dot"></span> <span class="status-text">audio</span></div></div><div class="lx-vol"><button type="button" class="lx-vol-btn" aria-label="Mute"><svg viewBox="0 0 16 16"><path d="M10.707 11.182A4.5 4.5 0 0 0 12.025 8a4.5 4.5 0 0 0-1.318-3.182L10 5.525A3.5 3.5 0 0 1 11.025 8 3.5 3.5 0 0 1 10 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06"/></svg></button><input type="range" class="lx-vol-slider" min="0" max="1" step="0.01" value="0.2" aria-label="Volume" style="background:linear-gradient(to right, var(--color-accent, #2EE6E2) 20%, var(--color-inset-well, #080D20) 20%);" /></div><button type="button" class="lx-speed" aria-label="Playback speed">1.0\xD7</button><div class="lx-time"><span class="cur">0:00</span> / <span class="total">\u2013:\u2013\u2013</span></div></div></div>`;
+    }
     return `<audio${this.idAttr(node)} controls src="${this.escapeHtml(src)}" class="bb-audio"></audio>`;
   }
   hexToRgba(hex, alpha) {
@@ -9533,6 +9842,10 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
       const warningIcon = warning ? `<span aria-hidden class="bb-notice-mark"${markStyle}>\u26A0</span>` : "";
       return `<div${this.idAttr(node)} class="notice bb-cut-panel bb-notice${warning ? " bb-wnotice" : ""}" role="note"${styleAttr}>${warningIcon}<div class="bb-notice-body">${content}</div></div>`;
     }
+    if (this.isOsu()) {
+      const content = _HTMLRenderer.trimOsuEdges(this.renderChildren(node));
+      return `<div${this.idAttr(node)} class="well">${content}</div>`;
+    }
     return this.wrapBlock("div", node, 'class="notice"');
   }
   renderTables(node) {
@@ -9638,7 +9951,21 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
   renderAlign(node) {
     const alignVal = (String(node.metadata?.align ?? "") || nodeAttrValue(node) || "center").trim().toLowerCase();
     const validAlign = alignVal === "left" || alignVal === "right" ? alignVal : "center";
-    return this.wrapBlock("div", node, `style="text-align:${validAlign};"`);
+    return this.renderAlignAs(node, validAlign);
+  }
+  /**
+   * `[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.
+   */
+  renderAlignAs(node, align) {
+    if (this.isOsu()) {
+      const name = align === "center" ? "centre" : align;
+      return this.wrapBlock("div", node, `class="bbcode__align-${name}"`);
+    }
+    return this.wrapBlock("div", node, `style="text-align:${align};"`);
   }
   renderEffect(node) {
     const raw = (String(node.metadata?.effectType ?? "") || nodeAttrValue(node) || "glow").toLowerCase().trim();
@@ -9827,7 +10154,25 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
     }
     return `<blockquote${this.idAttr(node)}>${content}</blockquote>`;
   }
+  /**
+   * 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.
+   */
+  renderOsuSpoilerbox(node, title, extra) {
+    const content = _HTMLRenderer.trimOsuEdges(this.renderChildren(node));
+    return `<div${this.idAttr(node)} class="js-spoilerbox bbcode-spoilerbox"${extra}><a class="js-spoilerbox__link bbcode-spoilerbox__link" href="#"><span class="bbcode-spoilerbox__link-icon"></span><span class="bbcode-spoilerbox__link-text">${title}</span></a><div class="js-spoilerbox__body bbcode-spoilerbox__body">${content}</div></div>`;
+  }
+  /** El rótulo de un box bajo osu: el del autor, o `SPOILER` en mayúsculas. */
+  osuBoxTitle(node) {
+    return this.hasOwnTitle(node) ? this.renderTitle(node, "SPOILER") : "SPOILER";
+  }
   renderSpoilerbox(node) {
+    if (this.isOsu()) {
+      return this.renderOsuSpoilerbox(node, this.osuBoxTitle(node), this.bareTitleAttr(node));
+    }
     const title = this.renderTitle(node, "Spoiler");
     const bare = this.bareTitleAttr(node);
     const content = this.renderChildren(node);
@@ -9837,6 +10182,9 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
     return `<details${this.idAttr(node)}${bare}${accent}><summary><span class="bb-box-heading">${title}</span></summary><div class="${bodyCls}">${content}</div></details>`;
   }
   renderBox(node) {
+    if (this.isOsu()) {
+      return this.renderOsuSpoilerbox(node, this.osuBoxTitle(node), this.bareTitleAttr(node));
+    }
     const title = this.renderTitle(node, "Box");
     const bare = this.bareTitleAttr(node);
     const content = this.renderChildren(node);
@@ -9854,9 +10202,18 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
    * escrito y devolvía `[box=Box]`.
    */
   bareTitleAttr(node) {
+    return this.hasOwnTitle(node) ? "" : ' data-bare-title="1"';
+  }
+  /**
+   * ¿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í.
+   */
+  hasOwnTitle(node) {
     const raw = node.metadata?.rawTitle;
-    const hasOwnTitle = raw !== void 0 ? String(raw) !== "" : node.metadata?.title !== void 0;
-    return hasOwnTitle ? "" : ' data-bare-title="1"';
+    return raw !== void 0 ? String(raw) !== "" : node.metadata?.title !== void 0;
   }
   renderTitle(node, fallback) {
     const titleNodes = node.metadata?.titleNodes;
@@ -9955,8 +10312,17 @@ var HTMLRenderer = class _HTMLRenderer extends Visitor {
       if (areaUrl && !areaUrl.startsWith("http://") && !areaUrl.startsWith("https://") && !areaUrl.startsWith("mailto:")) {
         areaUrl = "https://" + areaUrl;
       }
+      if (this.isOsu()) {
+        const pos = `left:${x}%;top:${y}%;width:${w}%;height:${h}%;`;
+        const title = ` title="${this.escapeHtml(label)}"`;
+        areas += url === "#" ? `<span class="imagemap__link" style="${pos}"${title}></span>` : `<a class="imagemap__link" href="${this.escapeHtml(areaUrl)}" style="${pos}"${title}></a>`;
+        continue;
+      }
       areas += `<a${this.idAttr(node)} href="${this.escapeHtml(areaUrl)}" target="_blank" rel="noopener" class="imagemap-area bbcode-imap-area" style="position:absolute;left:${x}%;top:${y}%;width:${w}%;height:${h}%;" title="${this.escapeHtml(label || "Link")}"></a>`;
     }
+    if (this.isOsu()) {
+      return `<div${this.idAttr(node)} class="imagemap"><img class="imagemap__image" loading="lazy" src="${this.escapeHtml(imageUrl)}" alt="">${areas}</div>`;
+    }
     return `<div${this.idAttr(node)} class="imagemap-container bbcode-imagemap" style="position:relative;display:inline-block;"><img src="${this.escapeHtml(imageUrl)}" alt="imagemap" style="max-width:100%;height:auto;display:block;">${areas}</div>`;
   }
   collectNodeText(node) {
@@ -10241,38 +10607,39 @@ function morphNodes(parent, newParent) {
           oldNode.nodeValue = newNode.nodeValue;
         }
       } else if (oldNode.nodeType === 1 && newNode.nodeType === 1 && oldNode.tagName === newNode.tagName) {
-        const oldEl = oldNode;
-        const newEl = newNode;
-        if (oldEl.tagName === "DETAILS" && oldEl.hasAttribute("open")) {
-          newEl.setAttribute("open", "");
-        }
-        if (oldEl.classList.contains("open")) {
-          newEl.classList.add("open");
-        }
-        if (oldEl.classList.contains("is-open")) {
-          newEl.classList.add("is-open");
-        }
-        const newAttrs = newEl.attributes;
-        for (let i2 = 0; i2 < newAttrs.length; i2++) {
-          const attr = newAttrs[i2];
-          if (oldEl.getAttribute(attr.name) !== attr.value) {
-            oldEl.setAttribute(attr.name, attr.value);
-          }
-        }
-        const oldAttrs = oldEl.attributes;
-        for (let i2 = oldAttrs.length - 1; i2 >= 0; i2--) {
-          const name = oldAttrs[i2].name;
-          if (!newEl.hasAttribute(name)) {
-            oldEl.removeAttribute(name);
-          }
-        }
-        morphNodes(oldEl, newEl);
+        morphElement(oldNode, newNode);
       } else {
         oldNode.parentNode.replaceChild(newNode.cloneNode(true), oldNode);
       }
     }
   }
 }
+function morphElement(oldEl, newEl) {
+  if (oldEl.tagName === "DETAILS" && oldEl.hasAttribute("open")) {
+    newEl.setAttribute("open", "");
+  }
+  if (oldEl.classList.contains("open")) {
+    newEl.classList.add("open");
+  }
+  if (oldEl.classList.contains("is-open")) {
+    newEl.classList.add("is-open");
+  }
+  const newAttrs = newEl.attributes;
+  for (let i = 0; i < newAttrs.length; i++) {
+    const attr = newAttrs[i];
+    if (oldEl.getAttribute(attr.name) !== attr.value) {
+      oldEl.setAttribute(attr.name, attr.value);
+    }
+  }
+  const oldAttrs = oldEl.attributes;
+  for (let i = oldAttrs.length - 1; i >= 0; i--) {
+    const name = oldAttrs[i].name;
+    if (!newEl.hasAttribute(name)) {
+      oldEl.removeAttribute(name);
+    }
+  }
+  morphNodes(oldEl, newEl);
+}
 
 // src/Visitors/BlockPatcher.ts
 var caches = /* @__PURE__ */ new WeakMap();
@@ -10310,6 +10677,9 @@ function getCache(container) {
 function blockKey(node, index) {
   return node.id ?? `__block_${index}`;
 }
+function isContextSensitive(node) {
+  return node.kind === "spacing" || node.kind === "empty_line";
+}
 function nodeFromHtml(html) {
   const t = document.createElement("template");
   t.innerHTML = html;
@@ -10328,7 +10698,7 @@ function renderedTag(html) {
   return m ? m[1].toUpperCase() : null;
 }
 function shouldMorphInPlace(element, run) {
-  return run.kind === "element" && !!run.node.id && run.node.children.length > 0 && canMorphInPlace(run.node) && renderedTag(run.html) === element.tagName;
+  return run.kind === "element" && !!run.node.id && canMorphInPlace(run.node) && renderedTag(run.html) === element.tagName;
 }
 function buildRuns(blocks, keys, getHtml, baseStart) {
   const runs = [];
@@ -10394,7 +10764,7 @@ function reconcileKeyed(container, rootNode, keys, renderer, cache, options) {
   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);
@@ -10435,7 +10805,12 @@ function reconcileKeyed(container, rootNode, keys, renderer, cache, options) {
         continue;
       }
       if (element.nodeType === 1 && shouldMorphInPlace(element, run)) {
-        morphHTML(element, renderer.renderChildren(run.node));
+        const newEl = nodeFromHtml(run.html);
+        if (newEl && newEl.nodeType === 1 && newEl.tagName === element.tagName) {
+          morphElement(element, newEl);
+        } else {
+          container.replaceChild(newEl, element);
+        }
       } else {
         container.replaceChild(nodeFromHtml(run.html), element);
       }
@@ -10502,7 +10877,7 @@ function reconcileWindowed(container, rootNode, change, renderer, cache, options
   let runs;
   try {
     runs = buildRuns(blocks, keys, (node2, key) => {
-      if (cache.lastNode.get(key) === node2) {
+      if (cache.lastNode.get(key) === node2 && !isContextSensitive(node2)) {
         return { html: cache.lastHtml.get(key) ?? "", kind: cache.lastClass.get(key) ?? "none" };
       }
       const html = renderer.render(node2);
@@ -10661,7 +11036,12 @@ function reconcileWindowed(container, rootNode, change, renderer, cache, options
         continue;
       }
       if (element.nodeType === 1 && shouldMorphInPlace(element, run)) {
-        morphHTML(element, renderer.renderChildren(run.node));
+        const newEl = nodeFromHtml(run.html);
+        if (newEl && newEl.nodeType === 1 && newEl.tagName === element.tagName) {
+          morphElement(element, newEl);
+        } else {
+          container.replaceChild(newEl, element);
+        }
       } else {
         container.replaceChild(nodeFromHtml(run.html), element);
       }
@@ -11883,6 +12263,13 @@ function domToGreenTree(root) {
                 children.push(greenLeaf("spacing", ""));
               }
             });
+          } 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";
@@ -12616,7 +13003,7 @@ var GreenNodePool = class _GreenNodePool {
 };
 
 // src/BBCode/BBCodeDocumentModel.ts
-var BBCodeDocumentModel = class extends DocumentModel {
+var BBCodeDocumentModel = class _BBCodeDocumentModel extends DocumentModel {
   _strictMode;
   _dialect;
   /** Per-document interner, or null when interning is off. */
@@ -12652,6 +13039,35 @@ var BBCodeDocumentModel = class extends DocumentModel {
     const r = renderer ?? new HTMLRenderer({ dialect: this._dialect, theme: this._dialect === "lyne" ? "lyne" : "osu" });
     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, options = {}) {
+    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.
@@ -12702,6 +13118,7 @@ var BBCodeDocumentModel = class extends DocumentModel {
     return new BBCodeExporter(this.tagRegistry, exportTarget).export(root);
   }
 };
+var renderForumBBCode = BBCodeDocumentModel.renderForum;
 
 // src/Edits/Rules/Rule.ts
 function endOf(p) {
@@ -13264,31 +13681,32 @@ function transformRange(range3, changes) {
 // src/Visuals/BoxDrawer.ts
 var DEFAULT_DURATION_MS = 400;
 var MIN_DURATION_MS = 120;
+var OSU_OPEN_CLASS = "js-spoilerbox--open";
 var DEFAULT_EASING = "cubic-bezier(0.33, 1, 0.68, 1)";
 var running = /* @__PURE__ */ new WeakMap();
 function prefersReducedMotion() {
   return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
-function toggleBoxWithDrawer(details, options = {}) {
+function animateDrawer(details, isOpen, setOpen, options = {}) {
   if (typeof details.animate !== "function" || prefersReducedMotion()) {
-    details.open = !details.open;
+    setOpen(!isOpen());
     return;
   }
   const from = details.getBoundingClientRect().height;
   const previous = running.get(details);
   const restoreOverflow = previous ? previous.restoreOverflow : details.style.overflow;
-  const opening = previous ? !previous.opening : !details.open;
+  const opening = previous ? !previous.opening : !isOpen();
   previous?.animation.cancel();
   let collapsed;
   let expanded;
-  if (details.open) {
+  if (isOpen()) {
     expanded = details.getBoundingClientRect().height;
-    details.open = false;
+    setOpen(false);
     collapsed = details.getBoundingClientRect().height;
-    details.open = true;
+    setOpen(true);
   } else {
     collapsed = details.getBoundingClientRect().height;
-    details.open = true;
+    setOpen(true);
     expanded = details.getBoundingClientRect().height;
   }
   const to = opening ? expanded : collapsed;
@@ -13307,15 +13725,36 @@ function toggleBoxWithDrawer(details, options = {}) {
   const settle = (finished) => {
     if (running.get(details)?.animation !== animation) return;
     running.delete(details);
-    if (finished) details.open = opening;
+    if (finished) setOpen(opening);
     details.style.overflow = restoreOverflow;
   };
   animation.addEventListener("finish", () => settle(true));
   animation.addEventListener("cancel", () => settle(false));
 }
+function toggleBoxWithDrawer(details, options = {}) {
+  animateDrawer(details, () => details.open, (v) => {
+    details.open = v;
+  }, options);
+}
+function toggleSpoilerboxWithDrawer(box, options = {}) {
+  animateDrawer(
+    box,
+    () => box.classList.contains(OSU_OPEN_CLASS),
+    (v) => box.classList.toggle(OSU_OPEN_CLASS, v),
+    options
+  );
+}
 function bindBoxDrawer(root, options = {}) {
   const handleClick = (e) => {
     const target = e.target;
+    const osuLink = target?.closest(".js-spoilerbox__link");
+    if (osuLink) {
+      const box = osuLink.closest(".js-spoilerbox");
+      if (!(box instanceof HTMLElement) || !root.contains(box)) return;
+      e.preventDefault();
+      toggleSpoilerboxWithDrawer(box, options);
+      return;
+    }
     const summary = target?.closest("summary");
     if (!summary) return;
     const details = summary.parentElement;
@@ -13328,6 +13767,314 @@ function bindBoxDrawer(root, options = {}) {
   return () => root.removeEventListener("click", handleClick);
 }
 
+// src/Visuals/LyneAudio.ts
+function bindLyneAudio(root = typeof document !== "undefined" ? document.documentElement : void 0) {
+  if (!root || typeof root.addEventListener !== "function") {
+    return () => {
+    };
+  }
+  const formatTime = (seconds) => {
+    if (!isFinite(seconds) || isNaN(seconds) || seconds < 0) return "\u2013:\u2013\u2013";
+    const m = Math.floor(seconds / 60);
+    const s = Math.floor(seconds % 60);
+    return `${m}:${s < 10 ? "0" : ""}${s}`;
+  };
+  const PLAY_SVG = '<svg viewBox="0 0 16 16"><path d="M3 1.5 14 8 3 14.5z"/></svg>';
+  const PAUSE_SVG = '<svg viewBox="0 0 16 16"><path d="M3 2h3.6v12H3zM9.4 2H13v12H9.4z"/></svg>';
+  const RETRY_SVG = '<svg viewBox="0 0 16 16"><path d="M8 2a6 6 0 1 0 6 6h-2a4 4 0 1 1-4-4v3l5-4-5-4z"/></svg>';
+  const VOL_LOW_SVG = '<svg viewBox="0 0 16 16"><path d="M10.707 11.182A4.5 4.5 0 0 0 12.025 8a4.5 4.5 0 0 0-1.318-3.182L10 5.525A3.5 3.5 0 0 1 11.025 8 3.5 3.5 0 0 1 10 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06"/></svg>';
+  const VOL_HIGH_SVG = '<svg viewBox="0 0 16 16"><path d="M11.536 14.01A8.47 8.47 0 0 0 14.026 8a8.47 8.47 0 0 0-2.49-6.01l-.708.707A7.48 7.48 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303z"/><path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.48 5.48 0 0 1 11.025 8a5.48 5.48 0 0 1-1.61 3.89z"/><path d="M8.707 11.182A4.5 4.5 0 0 0 10.025 8a4.5 4.5 0 0 0-1.318-3.182L8 5.525A3.5 3.5 0 0 1 9.025 8 3.5 3.5 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06"/></svg>';
+  const VOL_MUTE_SVG = '<svg viewBox="0 0 16 16"><path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06m7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0"/></svg>';
+  const DEFAULT_VOLUME = 0.2;
+  const applyDefaultVolume = (audio) => {
+    if (audio && audio.dataset.volSet !== "true") {
+      audio.volume = DEFAULT_VOLUME;
+      audio.dataset.volSet = "true";
+    }
+  };
+  const updateVolUI = (player, vol) => {
+    const btn = player.querySelector(".lx-vol-btn");
+    const slider = player.querySelector(".lx-vol-slider");
+    if (slider) {
+      if (Math.abs(parseFloat(slider.value) - vol) > 5e-3) {
+        slider.value = String(vol);
+      }
+      const pct = (vol * 100).toFixed(1);
+      slider.style.background = `linear-gradient(to right, var(--color-accent, #2EE6E2) ${pct}%, var(--color-inset-well, #080D20) ${pct}%)`;
+    }
+    if (btn) {
+      if (vol <= 1e-3) {
+        btn.innerHTML = VOL_MUTE_SVG;
+        btn.setAttribute("aria-label", "Unmute");
+      } else if (vol > 0.5) {
+        btn.innerHTML = VOL_HIGH_SVG;
+        btn.setAttribute("aria-label", "Mute");
+      } else {
+        btn.innerHTML = VOL_LOW_SVG;
+        btn.setAttribute("aria-label", "Mute");
+      }
+    }
+  };
+  const onClick = (e) => {
+    const target = e.target;
+    if (!target) return;
+    const btn = target.closest(".lx-btn");
+    if (btn) {
+      const player = btn.closest(".lx-audio");
+      const audio = player?.querySelector("audio");
+      if (audio && player) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (player.classList.contains("is-error")) {
+          player.classList.remove("is-error");
+          player.classList.add("is-loading");
+          audio.load();
+          const p = audio.play();
+          if (p !== void 0) {
+            p.catch((err) => {
+              console.warn("[LyneAudio] retry playback failed:", err);
+              player.classList.remove("is-loading");
+              player.classList.add("is-error");
+            });
+          }
+        } else if (audio.paused) {
+          const doc = root.ownerDocument || document;
+          doc.querySelectorAll(".lx-audio.is-playing").forEach((other) => {
+            if (other !== player) {
+              const otherAudio = other.querySelector("audio");
+              if (otherAudio && !otherAudio.paused) {
+                otherAudio.pause();
+              }
+            }
+          });
+          player.classList.add("is-loading");
+          const p = audio.play();
+          if (p !== void 0) {
+            p.then(() => {
+              player.classList.remove("is-loading");
+            }).catch((err) => {
+              console.warn("[LyneAudio] play failed:", err);
+              player.classList.remove("is-loading");
+              player.classList.add("is-error");
+            });
+          }
+        } else {
+          audio.pause();
+        }
+      }
+      return;
+    }
+    const track = target.closest(".lx-track");
+    if (track) {
+      const player = track.closest(".lx-audio");
+      const audio = player?.querySelector("audio");
+      if (audio) {
+        e.preventDefault();
+        e.stopPropagation();
+        const rect = track.getBoundingClientRect();
+        const pct = Math.min(Math.max((e.clientX - rect.left) / rect.width, 0), 1);
+        if (audio.duration && isFinite(audio.duration)) {
+          audio.currentTime = pct * audio.duration;
+        }
+        const fill = track.querySelector(".fill");
+        if (fill) fill.style.width = `${pct * 100}%`;
+      }
+      return;
+    }
+    const speed = target.closest(".lx-speed");
+    if (speed) {
+      const player = speed.closest(".lx-audio");
+      const audio = player?.querySelector("audio");
+      if (audio) {
+        e.preventDefault();
+        e.stopPropagation();
+        const rates = [1, 1.25, 1.5, 0.75];
+        const curRate = audio.playbackRate || 1;
+        const curIdx = rates.indexOf(curRate);
+        const nextRate = rates[(curIdx + 1) % rates.length];
+        audio.playbackRate = nextRate;
+        speed.textContent = `${nextRate}\xD7`;
+        speed.classList.toggle("active", nextRate !== 1);
+      }
+      return;
+    }
+    const volBtn = target.closest(".lx-vol-btn");
+    if (volBtn) {
+      const player = volBtn.closest(".lx-audio");
+      const audio = player?.querySelector("audio");
+      if (audio && player) {
+        e.preventDefault();
+        e.stopPropagation();
+        audio.dataset.volSet = "true";
+        if (audio.muted || audio.volume <= 1e-3) {
+          const prev = parseFloat(audio.dataset.prevVol || String(DEFAULT_VOLUME)) || DEFAULT_VOLUME;
+          audio.muted = false;
+          audio.volume = prev;
+          updateVolUI(player, prev);
+        } else {
+          audio.dataset.prevVol = String(audio.volume);
+          audio.muted = true;
+          updateVolUI(player, 0);
+        }
+      }
+      return;
+    }
+  };
+  const onInput = (e) => {
+    const target = e.target;
+    if (!target) return;
+    const slider = target.closest(".lx-vol-slider");
+    if (slider) {
+      const player = slider.closest(".lx-audio");
+      const audio = player?.querySelector("audio");
+      if (audio) {
+        const val = parseFloat(slider.value);
+        const clamped = isNaN(val) ? DEFAULT_VOLUME : Math.max(0, Math.min(1, val));
+        audio.dataset.volSet = "true";
+        audio.muted = clamped === 0;
+        audio.volume = clamped;
+        if (player) {
+          updateVolUI(player, clamped);
+        }
+      }
+    }
+  };
+  const onPlay = (e) => {
+    const audio = e.target;
+    if (audio?.tagName !== "AUDIO") return;
+    applyDefaultVolume(audio);
+    const player = audio.closest(".lx-audio");
+    if (!player) return;
+    player.classList.remove("is-loading");
+    player.classList.add("is-playing");
+    const btn = player.querySelector(".lx-btn");
+    if (btn) {
+      btn.innerHTML = PAUSE_SVG;
+      btn.setAttribute("aria-label", "Pause");
+    }
+    const label = player.querySelector(".lx-title .label .status-text");
+    if (label) label.textContent = "playing";
+    updateVolUI(player, audio.muted ? 0 : audio.volume);
+  };
+  const onPause = (e) => {
+    const audio = e.target;
+    if (audio?.tagName !== "AUDIO") return;
+    const player = audio.closest(".lx-audio");
+    if (!player) return;
+    player.classList.remove("is-playing", "is-loading");
+    const btn = player.querySelector(".lx-btn");
+    if (btn) {
+      btn.innerHTML = PLAY_SVG;
+      btn.setAttribute("aria-label", "Play");
+    }
+    const label = player.querySelector(".lx-title .label .status-text");
+    if (label) label.textContent = "audio";
+  };
+  const onTimeUpdate = (e) => {
+    const audio = e.target;
+    if (audio?.tagName !== "AUDIO") return;
+    const player = audio.closest(".lx-audio");
+    if (!player) return;
+    const cur = audio.currentTime || 0;
+    const dur = audio.duration || 0;
+    const fill = player.querySelector(".lx-track .fill");
+    const curTime = player.querySelector(".lx-time .cur");
+    if (fill && dur > 0 && isFinite(dur)) {
+      fill.style.width = `${cur / dur * 100}%`;
+    }
+    if (curTime) {
+      curTime.textContent = formatTime(cur);
+    }
+  };
+  const onLoadedMetadata = (e) => {
+    const audio = e.target;
+    if (audio?.tagName !== "AUDIO") return;
+    applyDefaultVolume(audio);
+    const player = audio.closest(".lx-audio");
+    if (!player) return;
+    const dur = audio.duration || 0;
+    const totalTime = player.querySelector(".lx-time .total");
+    if (totalTime && dur > 0 && isFinite(dur)) {
+      totalTime.textContent = formatTime(dur);
+    }
+    updateVolUI(player, audio.muted ? 0 : audio.volume);
+  };
+  const onWaiting = (e) => {
+    const audio = e.target;
+    if (audio?.tagName !== "AUDIO") return;
+    const player = audio.closest(".lx-audio");
+    if (!player) return;
+    player.classList.add("is-loading");
+    const label = player.querySelector(".lx-title .label .status-text");
+    if (label) label.textContent = "buffering\u2026";
+  };
+  const onError = (e) => {
+    const audio = e.target;
+    if (audio?.tagName !== "AUDIO") return;
+    const player = audio.closest(".lx-audio");
+    if (!player) return;
+    player.classList.remove("is-playing", "is-loading");
+    player.classList.add("is-error");
+    const label = player.querySelector(".lx-title .label .status-text");
+    if (label) label.textContent = "unavailable \u2014 file error";
+    const btn = player.querySelector(".lx-btn");
+    if (btn) {
+      btn.innerHTML = RETRY_SVG;
+      btn.setAttribute("aria-label", "Retry");
+      btn.style.background = "var(--color-danger, #FF3B5C)";
+    }
+    const curTime = player.querySelector(".lx-time .cur");
+    const totalTime = player.querySelector(".lx-time .total");
+    if (curTime) curTime.textContent = "\u2013:\u2013\u2013";
+    if (totalTime) totalTime.textContent = "\u2013:\u2013\u2013";
+  };
+  const onVolumeChange = (e) => {
+    const audio = e.target;
+    if (audio?.tagName !== "AUDIO") return;
+    const player = audio.closest(".lx-audio");
+    if (!player) return;
+    updateVolUI(player, audio.muted ? 0 : audio.volume);
+  };
+  try {
+    root.querySelectorAll("audio").forEach((audio) => {
+      applyDefaultVolume(audio);
+      const player = audio.closest(".lx-audio");
+      if (player) {
+        updateVolUI(player, audio.muted ? 0 : audio.volume);
+      }
+    });
+  } catch {
+  }
+  root.addEventListener("click", onClick, true);
+  root.addEventListener("input", onInput, true);
+  root.addEventListener("change", onInput, true);
+  root.addEventListener("play", onPlay, true);
+  root.addEventListener("pause", onPause, true);
+  root.addEventListener("timeupdate", onTimeUpdate, true);
+  root.addEventListener("loadedmetadata", onLoadedMetadata, true);
+  root.addEventListener("durationchange", onLoadedMetadata, true);
+  root.addEventListener("waiting", onWaiting, true);
+  root.addEventListener("error", onError, true);
+  root.addEventListener("volumechange", onVolumeChange, true);
+  return () => {
+    root.removeEventListener("click", onClick, true);
+    root.removeEventListener("input", onInput, true);
+    root.removeEventListener("change", onInput, true);
+    root.removeEventListener("play", onPlay, true);
+    root.removeEventListener("pause", onPause, true);
+    root.removeEventListener("timeupdate", onTimeUpdate, true);
+    root.removeEventListener("loadedmetadata", onLoadedMetadata, true);
+    root.removeEventListener("durationchange", onLoadedMetadata, true);
+    root.removeEventListener("waiting", onWaiting, true);
+    root.removeEventListener("error", onError, true);
+    root.removeEventListener("volumechange", onVolumeChange, true);
+  };
+}
+var setupLyneAudioRuntime = bindLyneAudio;
+if (typeof window !== "undefined" && typeof document !== "undefined") {
+  bindLyneAudio(document.documentElement);
+}
+
 // src/Visuals/index.ts
 var visualThemes = [
   {
@@ -17764,6 +18511,7 @@ exports.bbBlockToGreenNode = bbBlockToGreenNode;
 exports.bbBlocksToGreenTree = bbBlocksToGreenTree;
 exports.bbBlocksToRedTree = bbBlocksToRedTree;
 exports.bindBoxDrawer = bindBoxDrawer;
+exports.bindLyneAudio = bindLyneAudio;
 exports.blendHex = blendHex;
 exports.buildRangeScope = buildRangeScope;
 exports.buildSampleTable = buildSampleTable;
@@ -17818,6 +18566,7 @@ exports.mixHex = mixHex;
 exports.mixHexOklab = mixHexOklab;
 exports.mixMultiple = mixMultiple;
 exports.mixMultipleStops = mixMultipleStops;
+exports.morphElement = morphElement;
 exports.morphHTML = morphHTML;
 exports.nodeAttrValue = nodeAttrValue;
 exports.nodeKindToTag = nodeKindToTag;
@@ -17836,6 +18585,7 @@ exports.positionedChildren = positionedChildren;
 exports.posterizeHex = posterizeHex;
 exports.randAt = randAt;
 exports.reconcileVisualDOMToBBCode = reconcileVisualDOMToBBCode;
+exports.renderForumBBCode = renderForumBBCode;
 exports.repairNesting = repairNesting;
 exports.resolveEditConflicts = resolveEditConflicts;
 exports.resolveTokenValue = resolveTokenValue;
@@ -17844,6 +18594,7 @@ exports.samplePaintGrid = samplePaintGrid;
 exports.sanitizeColor = sanitizeColor;
 exports.sanitizeFontFamily = sanitizeFontFamily;
 exports.sanitizeFontSize = sanitizeFontSize;
+exports.setupLyneAudioRuntime = setupLyneAudioRuntime;
 exports.shortenableHex = shortenableHex;
 exports.solveCubicBezierY = solveCubicBezierY;
 exports.spatialFromParams = spatialFromParams;
@@ -17855,6 +18606,7 @@ exports.stringifyPaintPalette = stringifyPaintPalette;
 exports.tagToNodeKind = tagToNodeKind;
 exports.toTokenResolver = toTokenResolver;
 exports.toggleBoxWithDrawer = toggleBoxWithDrawer;
+exports.toggleSpoilerboxWithDrawer = toggleSpoilerboxWithDrawer;
 exports.transformOffset = transformOffset;
 exports.transformRange = transformRange;
 exports.validateExpression = validateExpression;