@miliastry/quasar 1.0.5 → 1.1.0

package/src/Visitors/MarkdownExporter.ts

@@ -1,14 +1,13 @@
 /**
  * DocumentEngine — MarkdownExporter
  *
- * Exports the Document Model to Markdown.
- * Demonstrates the format-agnostic power of the engine:
- * BBCode in → DocumentModel → Markdown out.
- *
- * A single visitor, no parser changes needed.
+ * Exports the Document Model to Markdown with hybrid BBCode embedding
+ * for features not natively supported in standard CommonMark (color, size,
+ * underline, alignment, collapsible boxes).
  */
 
 import { RedNode } from '../Syntax/RedNode'
+import { nodeAttrValue } from '../Syntax/nodeAttr'
 import { Visitor } from './Visitor'
 
 export class MarkdownExporter extends Visitor<string> {
@@ -34,35 +33,99 @@ export class MarkdownExporter extends Visitor<string> {
     switch (node.kind) {
       case 'bold': return `**${content}**`
       case 'italic': return `*${content}*`
-      case 'underline': return content
+      case 'underline': return `++${content}++`
       case 'strikethrough': return `~~${content}~~`
       case 'inline_code': return `\`${content}\``
       case 'code': return `\`\`\`\n${content}\n\`\`\``
       case 'spoiler': return `||${content}||`
-      case 'color': return content
-      case 'font_size': return content
-      case 'font': return content
-      case 'heading': return `${'#'.repeat(Math.min(depth + 1, 6))} ${content}`
-      case 'center': return content
-      case 'right': return content
-      case 'left': return content
-      case 'url': return `[${content}](${this.extractValue(node) || content})`
-      case 'email': return `[${content}](mailto:${this.extractValue(node) || content})`
-      case 'profile': return `[${content}](https://osu.ppy.sh/users/${this.extractValue(node) || content})`
-      case 'image': return `![Image](${node.text || ''})`
+      case 'color': {
+        const c = (node.metadata?.color as string) || this.extractValue(node) || '#ffffff'
+        return `[${content}]{${c}}`
+      }
+      case 'font_size': {
+        const s = (node.metadata?.size as string) || this.extractValue(node) || '100'
+        return `[${content}]{size="${s}"}`
+      }
+      case 'font': {
+        const f = (node.metadata?.font as string) || this.extractValue(node) || 'sans-serif'
+        return `[${content}]{font="${f}"}`
+      }
+      case 'heading': {
+        const level = (node.metadata?.level as number) || depth + 1
+        return `${'#'.repeat(Math.min(level, 6))} ${content}`
+      }
+      case 'center': return `-> ${content.trim()} <-`
+      case 'right': return `-> ${content.trim()} ->`
+      case 'left': return `[left]${content}[/left]`
+      case 'align': {
+        const a = (node.metadata?.align as string) || this.extractValue(node) || 'center'
+        if (a === 'center') return `-> ${content.trim()} <-`
+        if (a === 'right') return `-> ${content.trim()} ->`
+        return `[align=${a}]${content}[/align]`
+      }
+      case 'url': return `[${content}](${node.metadata?.href || this.extractValue(node) || content})`
+      case 'email': {
+        const addr = (node.metadata?.href as string)?.replace('mailto:', '') || this.extractValue(node) || content
+        return `[${content}](mailto:${addr})`
+      }
+      case 'profile': return `[${content}](https://osu.ppy.sh/users/${node.metadata?.username || this.extractValue(node) || content})`
+      case 'image': {
+        const src = (node.metadata?.src as string) || (node.text && !node.text.startsWith('=') ? node.text : '') || content
+        const alt = (node.metadata?.alt as string) || (content && content !== src ? content : 'Image')
+        return `![${alt}](${src})`
+      }
       case 'video': return `[🎥 YouTube Video](https://youtube.com/watch?v=${node.text || ''})`
       case 'audio': return `[🎵 Audio](${node.text || ''})`
-      case 'quote': return `> **${this.extractValue(node) || 'Quote'}**\n> ${content.replace(/\\n/g, '\n> ')}`
-      case 'notice': return `> [!NOTE]\n> ${content.replace(/\\n/g, '\n> ')}`
-      case 'spoilerbox': return `**${this.renderTitleMarkdown(node) || 'Spoiler'}**\n${content}`
+      case 'quote': {
+        const source = (node.metadata?.source as string) || this.extractValue(node)
+        const header = source ? `**${source}**\n> ` : ''
+        return `> ${header}${content.replace(/\n/g, '\n> ')}`
+      }
+      case 'notice': {
+        const color = (node.metadata?.color as string) || this.extractValue(node)
+        const colorAttr = color ? `=${color}` : ''
+        return `[notice${colorAttr}]\n${content}\n[/notice]`
+      }
+      case 'wnotice': {
+        const color = (node.metadata?.color as string) || this.extractValue(node)
+        const colorAttr = color ? `=${color}` : ''
+        return `[wnotice${colorAttr}]\n${content}\n[/wnotice]`
+      }
+      case 'spoilerbox':
       case 'box':
-      case 'boxw': return `**${this.renderTitleMarkdown(node) || 'Box'}**\n${content}`
-      case 'list': return content
-      case 'list_item': return `${'  '.repeat(Math.max(0, depth - 1))}- ${content.trim()}`
+      case 'boxw': {
+        const title = this.renderTitleMarkdown(node)
+        const header = title ? `::: details ${title}` : '::: details'
+        return `${header}\n${content}\n:::`
+      }
+      case 'list': {
+        const lines: string[] = []
+        let orderIdx = 1
+        for (const child of node.children) {
+          if (child.kind === 'list_item') {
+            const itemContent = child.children.map(c => this.exportNode(c, depth)).join('')
+            const isOrdered = node.metadata?.ordered
+            const prefix = isOrdered ? `${orderIdx++}. ` : '- '
+            lines.push(`${'  '.repeat(Math.max(0, depth))}${prefix}${itemContent.trim()}`)
+          }
+        }
+        return lines.length > 0 ? lines.join('\n') + '\n' : content
+      }
+      case 'list_item': {
+        const isOrdered = node.parent?.metadata?.ordered
+        const prefix = isOrdered ? '1. ' : '- '
+        return `${'  '.repeat(Math.max(0, depth - 1))}${prefix}${content.trim()}`
+      }
+      case 'separator': return '---'
       case 'spacing': return '\n'
       case 'empty_line': return '\n'
-      case 'text':
-      default: return content || node.text || ''
+      case 'paragraph': return content
+      case 'text': return content || node.text || ''
+      default: {
+        const val = this.extractValue(node) || (node.metadata?.value as string) || (node.metadata?.raw as string)
+        const attr = val !== undefined && val !== null && String(val) !== '' ? `=${val}` : ''
+        return `[${node.kind}${attr}]${content}[/${node.kind}]`
+      }
     }
   }
 
@@ -76,24 +139,18 @@ export class MarkdownExporter extends Visitor<string> {
 
   /**
    * Read a BBCode tag's `=VALUE` attribute.
+   */
+  /**
+   * El atributo del nodo, o `undefined` si no lleva.
    *
-   * This previously read `node.properties` / `node.attributes`, neither of
-   * which exists on RedNode — so it silently returned `undefined` for every
-   * node and every call site fell through to its placeholder. That is why
-   * Markdown export dropped link targets and quote/box titles.
+   * El recorte lo hace `nodeAttrValue`, el mismo lector del `HTMLRenderer`;
+   * aquí sólo se cambia el contrato del caso vacío. Este exportador encadena
+   * `metadata ?? atributo ?? contenido`, así que necesita un `undefined`
+   * explícito donde `nodeAttrValue` devuelve el texto crudo — es la única
+   * diferencia, y por eso no se llama directamente.
    */
   private extractValue(node: RedNode): string | undefined {
-    const text = node.text || ''
-    const eqIdx = text.indexOf('=')
-    if (eqIdx < 0) return undefined
-
-    let value = text.slice(eqIdx + 1)
-    if (
-      (value.startsWith('"') && value.endsWith('"')) ||
-      (value.startsWith("'") && value.endsWith("'"))
-    ) {
-      value = value.slice(1, -1)
-    }
-    return value || undefined
+    if (!(node.text || '').includes('=')) return undefined
+    return nodeAttrValue(node) || undefined
   }
 }

package/src/Visitors/TiptapExporter.ts

@@ -121,6 +121,7 @@ export class TiptapExporter extends Visitor<string> {
       case 'rainbow':
       case 'grow':
       case 'sinewave':
+      case 'paint':
         return { type: 'miliastryEffect', attrs: { effect: node.kind, ...node.metadata } }
     }
     return null

package/src/Visuals/index.ts

@@ -6,11 +6,14 @@
  * modificar el renderer HTML.
  *
  * Uso:
- *   // Importar como CSS directo (soportado por Next.js, Vite, Webpack):
- *   import 'MiliastryPlatform/DocumentEngine/Visuals/osu.css'
+ *   // Desde la FUENTE, que es como lo consume el monorepo (Next.js, Vite,
+ *   // Webpack): esta ruta funciona sin haber compilado nada.
+ *   import '@miliastry/quasar/src/Visuals/osu.css'
+ *
+ *   // Desde el paquete PUBLICADO. Solo resuelve tras `npm run build`, que es
+ *   // lo que copia los CSS a dist/Visuals (ver scripts/copy-css.mjs).
+ *   import '@miliastry/quasar/Visuals/osu.css'
  *
- *   // O desde un componente React:
- *   import 'MiliastryPlatform/DocumentEngine/Visuals/osu.css'
  *   // Luego en el JSX: <div className="bbcode-preview" ...
  *
  * Para cambiar de tema visual, solo cambia el import del CSS.

package/src/Visuals/lyne.css

@@ -6,11 +6,28 @@
  *
  * Scoped under `.bbcode-preview-lyne` and `.theme-lyne`.
  * All rules strictly override default/osu.css styles to ensure 0% pink bleed.
+ *
+ * No `@import` of Google Fonts here — the host supplies the faces.
+ *
+ * This file used to open with
+ *   @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono…&family=Saira+Condensed…&family=Saira…')
+ * and that line broke the desktop app. Chromium reports a stylesheet as FAILED
+ * when any of its @imports fails to load, so under a CSP whose `style-src` does
+ * not list fonts.googleapis.com (Tauri's) — or simply with no network — the CSS
+ * chunk carrying this file rejected, the dynamic import of the whole BBCode
+ * feature rejected with it, and the kernel booted without an editor.
+ *
+ * Miliastry self-hosts these families with next/font and publishes them as
+ * `--font-syne-display` / `--font-syne-body` / `--font-syne-mono` (app/layout.tsx;
+ * `[data-theme='syne']` in globals.css reads the same variables). They are
+ * used when present; the plain family names remain as the fallback for a host
+ * that installs the fonts by other means.
  */
 
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Saira+Condensed:wght@600;700&family=Saira:wght@400;600&display=swap');
-
-:root {
+.theme-lyne,
+.bbcode-preview-lyne,
+[data-theme='syne'],
+[data-dialect='lyne'] {
   --color-accent: #2EE6E2;
   --color-accent-bright: #68FFF8;
   --color-warning: #FFC34D;
@@ -18,9 +35,9 @@
   --color-text-mid: #9EACD4;
   --color-text-dim: #606C8F;
   --color-hairline: rgba(255, 255, 255, 0.12);
-  --font-display: "Saira Condensed", sans-serif;
-  --font-body: "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  --font-numeric: "IBM Plex Mono", monospace;
+  --font-display: var(--font-syne-display, "Saira Condensed"), "Saira Condensed", sans-serif;
+  --font-body: var(--font-syne-body, "Saira"), "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-numeric: var(--font-syne-mono, "IBM Plex Mono"), "IBM Plex Mono", monospace;
   --lyne-cut: 8px;
 }
 
@@ -52,6 +69,41 @@
   border-bottom-color: var(--color-accent, #2EE6E2) !important;
 }
 
+.bbcode-preview-lyne a:has(img),
+.bbcode-preview-lyne a:has(.bb-img),
+.bbcode-preview-lyne a:has(svg),
+.bbcode-preview-lyne a.bb-link-img,
+.bbcode-preview.theme-lyne a:has(img),
+.bbcode-preview.theme-lyne a:has(.bb-img),
+.bbcode-preview.theme-lyne a:has(svg),
+.bbcode-preview.theme-lyne a.bb-link-img {
+  border-bottom: none !important;
+  text-decoration: none !important;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.bbcode-preview-lyne a:has(img):hover,
+.bbcode-preview-lyne a:has(.bb-img):hover,
+.bbcode-preview-lyne a:has(svg):hover,
+.bbcode-preview-lyne a.bb-link-img:hover,
+.bbcode-preview.theme-lyne a:has(img):hover,
+.bbcode-preview.theme-lyne a:has(.bb-img):hover,
+.bbcode-preview.theme-lyne a:has(svg):hover,
+.bbcode-preview.theme-lyne a.bb-link-img:hover {
+  border-bottom: none !important;
+  text-decoration: none !important;
+}
+
+.bbcode-preview-lyne a img,
+.bbcode-preview-lyne a .bb-img,
+.bbcode-preview.theme-lyne a img,
+.bbcode-preview.theme-lyne a .bb-img {
+  vertical-align: middle;
+  border: none;
+  text-decoration: none;
+}
+
 /* Forum @mentions — inherit the accent link look, slightly bolder so they
    read as handles rather than plain links. */
 .bbcode-preview-lyne a.bb-mention,
@@ -249,8 +301,8 @@
  * del autor ([boxw=Title:#hex]) si lo hay; si no, el hairline del tema. */
 .bbcode-preview-lyne details.boxw,
 .bbcode-preview.theme-lyne details.boxw {
-  background: rgba(11, 16, 36, 0.5) !important;
-  border: 1px solid var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-hairline, rgba(255, 255, 255, 0.12))))) !important;
+  background: var(--box-bg, rgba(11, 16, 36, 0.5)) !important;
+  border: 1px solid var(--box-border, var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-hairline, rgba(255, 255, 255, 0.12)))))) !important;
   border-radius: 0 !important;
   clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
   padding: 0 !important;
@@ -331,8 +383,8 @@
   width: 7px !important;
   height: 7px !important;
   flex: 0 0 7px !important;
-  border-right: 1.5px solid currentColor !important;
-  border-bottom: 1.5px solid currentColor !important;
+  border-right: 1px solid currentColor !important;
+  border-bottom: 1px solid currentColor !important;
   transform: rotate(-45deg) !important;
   transition: transform 0.15s ease !important;
 }
@@ -360,7 +412,7 @@
 
 .bbcode-preview-lyne details.boxw[open] > summary,
 .bbcode-preview.theme-lyne details.boxw[open] > summary {
-  border-bottom: 1px solid var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-hairline, rgba(255, 255, 255, 0.12))))) !important;
+  border-bottom: 1px solid var(--box-border, var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-hairline, rgba(255, 255, 255, 0.12)))))) !important;
 }
 
 .bbcode-preview-lyne details[open] > summary::before,
@@ -370,7 +422,8 @@
 
 .bbcode-preview-lyne details > summary:hover,
 .bbcode-preview.theme-lyne details > summary:hover {
-  color: var(--color-accent-bright, #68FFF8) !important;
+  color: var(--box-accent, var(--card-accent, var(--glass-accent, var(--color-accent-bright, #68FFF8)))) !important;
+  filter: brightness(1.25) !important;
 }
 
 /* ─── Lists & Markers ───────────────────────────────────────────────────── */
@@ -469,6 +522,7 @@
 .bb-table {
   width: 100% !important;
   min-width: 380px !important;
+  table-layout: fixed !important;
   border-collapse: separate !important;
   border-spacing: 0 !important;
   margin: 0 !important;
@@ -518,6 +572,64 @@
   line-height: 1.3 !important;
   text-transform: uppercase !important;
   padding: 8px 10px !important;
+  text-align: left !important;
+}
+
+.bb-table .bb-th.bb-th-full {
+  width: 100% !important;
+}
+
+/* Table header alignments */
+.bb-table .bb-th.bb-th-left,
+.bb-table .bb-th:has(.bb-left),
+.bb-table .bb-th:has([style*="text-align:left"]),
+.bb-table .bb-th:has([style*="text-align: left"]),
+.bb-left .bb-table .bb-th {
+  text-align: left !important;
+}
+
+.bb-table .bb-th.bb-th-left .bb-table-badge,
+.bb-table .bb-th:has(.bb-left) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align:left"]) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align: left"]) .bb-table-badge,
+.bb-left .bb-table .bb-th .bb-table-badge {
+  margin-right: auto !important;
+  margin-left: 0 !important;
+}
+
+.bb-table .bb-th.bb-th-centered,
+.bb-table .bb-th.bb-th-center,
+.bb-table .bb-th:has(.bb-centre),
+.bb-table .bb-th:has([style*="text-align:center"]),
+.bb-table .bb-th:has([style*="text-align: center"]),
+.bb-centre .bb-table .bb-th {
+  text-align: center !important;
+}
+
+.bb-table .bb-th.bb-th-centered .bb-table-badge,
+.bb-table .bb-th.bb-th-center .bb-table-badge,
+.bb-table .bb-th:has(.bb-centre) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align:center"]) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align: center"]) .bb-table-badge,
+.bb-centre .bb-table .bb-th .bb-table-badge {
+  margin: 0 auto !important;
+}
+
+.bb-table .bb-th.bb-th-right,
+.bb-table .bb-th:has(.bb-right),
+.bb-table .bb-th:has([style*="text-align:right"]),
+.bb-table .bb-th:has([style*="text-align: right"]),
+.bb-right .bb-table .bb-th {
+  text-align: right !important;
+}
+
+.bb-table .bb-th.bb-th-right .bb-table-badge,
+.bb-table .bb-th:has(.bb-right) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align:right"]) .bb-table-badge,
+.bb-table .bb-th:has([style*="text-align: right"]) .bb-table-badge,
+.bb-right .bb-table .bb-th .bb-table-badge {
+  margin-left: auto !important;
+  margin-right: 0 !important;
 }
 
 .bb-table-badge {
@@ -733,7 +845,7 @@
 .bb-neon-box {
   padding: 16px !important;
   margin: 0 !important;
-  border: 2px solid var(--neon-color, var(--color-accent, #2EE6E2)) !important;
+  border: 1px solid var(--neon-color, var(--color-accent, #2EE6E2)) !important;
   background: color-mix(in srgb, var(--neon-color, var(--color-accent, #2EE6E2)) 4%, rgba(7, 10, 23, 0.55)) !important;
   border-radius: 0 !important;
   box-shadow: none !important;
@@ -758,10 +870,9 @@
   align-items: center !important;
 }
 
-/* Circle: replica el .bbCircle original de Lyne (Main Bridge/line/web/
- * components/bbcode.module.css). aspect-ratio:1 + centrado convierten el div
- * en un círculo real con el contenido al centro; fondo y borde lo pintan como
- * badge. clip-path:none evita que herede los cortes de esquina de los paneles. */
+/* Square: cuadradito badge con las muescas angulares características de Lyne.
+ * aspect-ratio: 1/1, centrado, borde hairline y corte angular de esquina. */
+.bb-square,
 .bb-circle {
   display: inline-flex !important;
   align-items: center !important;
@@ -771,11 +882,11 @@
   min-height: 1.85em !important;
   padding: 0.2em 0.35em !important;
   box-sizing: border-box !important;
-  border-radius: 50% !important;
+  border-radius: 0 !important;
   overflow: hidden !important;
-  background: rgb(11 16 36 / 0.5) !important;
-  border: 1px solid var(--color-hairline, rgba(255, 255, 255, 0.12)) !important;
-  clip-path: none !important;
+  background: var(--square-bg, rgb(11 16 36 / 0.5)) !important;
+  border: 1px solid var(--square-border, var(--square-accent, var(--color-hairline, rgba(255, 255, 255, 0.12)))) !important;
+  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px) !important;
   text-align: center !important;
   line-height: 1 !important;
   vertical-align: middle !important;
@@ -1062,3 +1173,62 @@
   background-clip: text !important;
   color: transparent !important;
 }
+
+/* ─── Lyne (SYNE) Preview Highlight Overrides ────────────────────────────── */
+
+.theme-lyne [data-bbid]:hover:not(:has([data-bbid]:hover, [data-node-id]:hover)),
+.bbcode-preview-lyne [data-bbid]:hover:not(:has([data-bbid]:hover, [data-node-id]:hover)) {
+  outline: 1.5px solid #2EE6E2 !important;
+  background-color: rgba(46, 230, 226, 0.1) !important;
+  box-shadow: 0 0 8px rgba(46, 230, 226, 0.25) !important;
+}
+
+.theme-lyne[data-hover-highlight="on"] [data-bbid]:hover:not(:has([data-bbid]:hover, [data-node-id]:hover)),
+.bbcode-preview-lyne[data-hover-highlight="on"] [data-bbid]:hover:not(:has([data-bbid]:hover, [data-node-id]:hover)),
+.theme-lyne[data-hover-highlight="on"] [data-node-id]:hover:not(:has([data-bbid]:hover, [data-node-id]:hover)),
+.bbcode-preview-lyne[data-hover-highlight="on"] [data-node-id]:hover:not(:has([data-bbid]:hover, [data-node-id]:hover)) {
+  outline: 1px dashed rgba(46, 230, 226, 0.55) !important;
+  box-shadow: 0 0 6px rgba(46, 230, 226, 0.2) !important;
+}
+
+.theme-lyne [data-node-id].cursor-highlight,
+.bbcode-preview-lyne [data-node-id].cursor-highlight,
+.theme-lyne .cursor-highlight,
+.bbcode-preview-lyne .cursor-highlight {
+  outline: 2px solid #2EE6E2 !important;
+  background-color: rgba(46, 230, 226, 0.18) !important;
+  box-shadow: 0 0 12px rgba(46, 230, 226, 0.35) !important;
+}
+
+.theme-lyne .bb-empty-line.cursor-highlight,
+.bbcode-preview-lyne .bb-empty-line.cursor-highlight {
+  background-color: rgba(46, 230, 226, 0.22) !important;
+  outline: 2px solid #2EE6E2 !important;
+  box-shadow: 0 0 8px rgba(46, 230, 226, 0.3) !important;
+}
+
+.theme-lyne[data-hover-highlight="on"] .bb-empty-line:hover,
+.bbcode-preview-lyne[data-hover-highlight="on"] .bb-empty-line:hover {
+  outline: 1px dashed rgba(46, 230, 226, 0.55) !important;
+  background-color: rgba(46, 230, 226, 0.1) !important;
+}
+
+.theme-lyne div.bb-block.cursor-highlight::after,
+.bbcode-preview-lyne div.bb-block.cursor-highlight::after {
+  box-shadow: inset 0 0 0 2px #2EE6E2, 0 0 10px rgba(46, 230, 226, 0.35) !important;
+  background-color: rgba(46, 230, 226, 0.18) !important;
+}
+
+.theme-lyne span.bb-block.cursor-highlight,
+.bbcode-preview-lyne span.bb-block.cursor-highlight {
+  outline: 2px solid #2EE6E2 !important;
+  background-color: rgba(46, 230, 226, 0.18) !important;
+  box-shadow: 0 0 8px rgba(46, 230, 226, 0.3) !important;
+}
+
+.theme-lyne ::selection,
+.bbcode-preview-lyne ::selection {
+  background-color: rgba(46, 230, 226, 0.3) !important;
+  color: #ffffff !important;
+}
+

package/src/Visuals/osu.css

@@ -33,6 +33,28 @@
   color: #94C8EA;
   border-bottom: 1px solid rgba(126,184,224,0.7);
 }
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a:has(img),
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a:has(.bb-img),
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a:has(svg),
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a.bb-link-img {
+  border-bottom: none !important;
+  text-decoration: none !important;
+  display: inline-block;
+  vertical-align: middle;
+}
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a:has(img):hover,
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a:has(.bb-img):hover,
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a:has(svg):hover,
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a.bb-link-img:hover {
+  border-bottom: none !important;
+  text-decoration: none !important;
+}
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a img,
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) a .bb-img {
+  vertical-align: middle;
+  border: none;
+  text-decoration: none;
+}
 
 /* ─── Headings ───────────────────────────────────────── */
 
@@ -99,13 +121,22 @@
 /* ─── Spoiler ────────────────────────────────────────── */
 
 .bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .spoiler {
-  background: #000;
-  color: #000;
-  cursor: text;
+  background: #111111;
+  color: #111111;
+  cursor: pointer;
+  padding: 0 4px;
+  border-radius: 3px;
+  user-select: text;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .spoiler:hover,
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .spoiler:active {
+  color: #ffffff;
+  background: #333333;
 }
 .bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .spoiler::selection {
-  color: #fff;
-  background: #555;
+  color: #ffffff;
+  background: #555555;
 }
 
 /* ─── Box / Spoilerbox ───────────────────────────────── */