@jjlmoya/utils-games-development 1.53.0 → 1.54.0

package/src/tool/steamBbcodeTranslator/logic.ts

@@ -0,0 +1,96 @@
+import type { AutoTranslationResult, MarkupSyntax, OutputFormat, TranslationDirection, TranslationResult } from './types';
+import { parseBbcode } from './bbcode-parser';
+import { renderHtml } from './html-renderer';
+import { renderMarkdown } from './markdown-renderer';
+import { htmlToBbcode } from './html-parser';
+import { markdownToBbcode } from './markdown-parser';
+
+export * from './types';
+export * from './storage';
+export { parseBbcode } from './bbcode-parser';
+export { renderMarkdown } from './markdown-renderer';
+export { renderHtml } from './html-renderer';
+export { htmlToBbcode } from './html-parser';
+export { markdownToBbcode } from './markdown-parser';
+
+function countBlocks(source: string): number {
+  return source.trim() ? source.split(/\n{2,}/).filter(Boolean).length : 0;
+}
+
+export function convertBbcode(source: string, format: OutputFormat): TranslationResult {
+  const parsed = parseBbcode(source);
+  const output = format === 'html' ? renderHtml(parsed.nodes) : renderMarkdown(parsed.nodes);
+  return {
+    output,
+    warnings: parsed.warnings,
+    stats: { characters: output.length, tags: parsed.tagCount, blocks: countBlocks(output) }
+  };
+}
+
+export function detectSyntax(source: string): MarkupSyntax {
+  const value = source.trim();
+  if (!value) return 'markdown';
+  if (/<(?:h[1-6]|p|strong|em|b|i|ul|ol|li|a|br|blockquote|code)\b[^>]*>/i.test(value)) return 'html';
+  if (/\[(?:\/?(?:h[1-3]|b|strong|i|em|u|s|strike|url|code|quote|spoiler|list|olist)|\*)[^\]]*\]/i.test(value)) return 'bbcode';
+  return 'markdown';
+}
+
+export function translate(source: string, direction: TranslationDirection, format: OutputFormat): TranslationResult {
+  if (!source.trim()) return { output: '', warnings: [], stats: { characters: 0, tags: 0, blocks: 0 } };
+  if (direction === 'bbcode-to-output') return convertBbcode(source, format);
+  if (format === 'html') return htmlToBbcode(source);
+  return markdownToBbcode(source);
+}
+
+function translateNonBbcode(source: string, detected: MarkupSyntax): AutoTranslationResult {
+  const bbcode = detected === 'html' ? htmlToBbcode(source) : markdownToBbcode(source);
+  const secondary = detected === 'html'
+    ? { markdown: convertBbcode(bbcode.output, 'markdown') }
+    : { html: convertBbcode(bbcode.output, 'html') };
+
+  return {
+    detected,
+    outputs: {
+      bbcode,
+      ...secondary
+    }
+  };
+}
+
+export function translateToAll(source: string): AutoTranslationResult {
+  const detected = detectSyntax(source);
+  if (!source.trim()) return { detected, outputs: {} };
+  if (detected === 'bbcode') {
+    return {
+      detected,
+      outputs: {
+        markdown: convertBbcode(source, 'markdown'),
+        html: convertBbcode(source, 'html')
+      }
+    };
+  }
+  return translateNonBbcode(source, detected);
+}
+
+export function getPreviewHtml(source: string, direction: TranslationDirection, format: OutputFormat): string {
+  if (!source.trim()) return '';
+  if (direction === 'bbcode-to-output') {
+    const result = translate(source, direction, format);
+    return format === 'html' ? result.output : convertBbcode(markdownToBbcode(result.output).output, 'html').output;
+  }
+  return convertBbcode(translate(source, direction, format).output, 'html').output;
+}
+
+export function getAutoPreviewHtml(source: string): string {
+  if (!source.trim()) return '';
+  const detected = detectSyntax(source);
+  if (detected === 'bbcode') return convertBbcode(source, 'html').output;
+  const bbcode = detected === 'html' ? htmlToBbcode(source).output : markdownToBbcode(source).output;
+  return convertBbcode(bbcode, 'html').output;
+}
+
+export const sampleBbcode = `[b]The Last Lantern[/b]\n\nA hand crafted survival adventure about a flooded city, a fragile airship, and the people you choose to rescue.\n\n[list][*]Scavenge abandoned districts[*]Upgrade your workshop[list][*]Solar engine[*]Deep water hull[/list][*]Make difficult choices[/list]\n\n[url=https://example.com/presskit]Read the press kit[/url]`;
+
+export const sampleMarkdown = `# The Last Lantern\n\n**A hand crafted survival adventure**\nExplore a flooded city, rebuild your airship, and choose who gets a place on board.\n\n- Scavenge abandoned districts\n- Upgrade your workshop\n  - Solar engine\n  - Deep water hull\n- Make difficult choices\n\n[Read the press kit](https://example.com/presskit)`;
+
+export const sampleHtml = `<h1>The Last Lantern</h1><p><strong>A hand crafted survival adventure</strong><br>Explore a flooded city, rebuild your airship, and choose who gets a place on board.</p><ul><li>Scavenge abandoned districts</li><li>Upgrade your workshop<ul><li>Solar engine</li><li>Deep water hull</li></ul></li><li>Make difficult choices</li></ul><a href="https://example.com/presskit">Read the press kit</a>`;

package/src/tool/steamBbcodeTranslator/markdown-parser.ts

@@ -0,0 +1,115 @@
+import type { TranslationResult } from './types';
+
+export function convertInlineMarkdown(value: string): string {
+  let output = value;
+  output = output.replace(/`([^`\n]+)`/g, '[code]$1[/code]');
+  output = output.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '$1');
+  output = output.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '[url=$2]$1[/url]');
+  output = output.replace(/\*\*([^*\n]+)\*\*/g, '[b]$1[/b]');
+  output = output.replace(/__([^_\n]+)__/g, '[b]$1[/b]');
+  output = output.replace(/~~([^~\n]+)~~/g, '[s]$1[/s]');
+  output = output.replace(/(?<!\*)\*([^*\n]+)\*(?!\*)/g, '[i]$1[/i]');
+  output = output.replace(/(?<!_)_([^_\n]+)_(?!_)/g, '[i]$1[/i]');
+  return output;
+}
+
+function countBlocks(source: string): number {
+  return source.trim() ? source.split(/\n{2,}/).filter(Boolean).length : 0;
+}
+
+interface ListState {
+  level: number;
+  orderedLevel: number;
+}
+
+function adjustListDepth(state: ListState, targetLevel: number, isOrdered: boolean, output: string[]): ListState {
+  let { level, orderedLevel } = state;
+  while (level > targetLevel) {
+    output.push(level === orderedLevel ? '[/olist]' : '[/list]');
+    if (level === orderedLevel) orderedLevel -= 1;
+    level -= 1;
+  }
+  while (level < targetLevel) {
+    level += 1;
+    if (isOrdered) orderedLevel = level;
+    output.push(isOrdered ? '[olist]' : '[list]');
+  }
+  return { level, orderedLevel };
+}
+
+function processListLine(state: ListState, listMatch: RegExpExecArray, output: string[]): ListState {
+  const indentStr = listMatch[1] ?? '';
+  const marker = listMatch[2] ?? '-';
+  const textContent = listMatch[3] ?? '';
+  const targetLevel = Math.floor(indentStr.length / 2);
+  const isOrdered = /\d+\./.test(marker);
+  const newState = adjustListDepth(state, targetLevel, isOrdered, output);
+  output.push(`[*]${convertInlineMarkdown(textContent)}`);
+  return newState;
+}
+
+function closeAllLists(state: ListState, output: string[]): ListState {
+  let { level, orderedLevel } = state;
+  while (level >= 0) {
+    output.push(level === orderedLevel ? '[/olist]' : '[/list]');
+    if (level === orderedLevel) orderedLevel -= 1;
+    level -= 1;
+  }
+  return { level: -1, orderedLevel: -1 };
+}
+
+function processCodeBlock(lines: string[], lineIndex: number, output: string[], warnings: string[]): number {
+  const codeLines: string[] = [];
+  let next = lineIndex + 1;
+  while (next < lines.length) {
+    const nextLine = lines[next];
+    if (nextLine && /^```/.test(nextLine)) break;
+    if (nextLine !== undefined) codeLines.push(nextLine);
+    next += 1;
+  }
+  if (next >= lines.length) warnings.push('An unclosed Markdown code fence was closed automatically.');
+  output.push(`[code]${codeLines.join('\n')}[/code]`);
+  return next;
+}
+
+function parseMarkdownLine(line: string, output: string[]): boolean {
+  const heading = /^(#{1,3})\s+(.+)$/.exec(line);
+  if (heading) {
+    const level = heading[1]?.length ?? 1;
+    output.push(`[h${level}]${convertInlineMarkdown(heading[2] ?? '')}[/h${level}]`);
+    return true;
+  }
+  const quote = /^>\s?(.*)$/.exec(line);
+  if (quote) {
+    output.push(`[quote]${convertInlineMarkdown(quote[1] ?? '')}[/quote]`);
+    return true;
+  }
+  return false;
+}
+
+export function markdownToBbcode(source: string): TranslationResult {
+  const lines = source.replace(/\r/g, '').split('\n');
+  const output: string[] = [];
+  const warnings: string[] = [];
+  let state: ListState = { level: -1, orderedLevel: -1 };
+
+  for (let idx = 0; idx < lines.length; idx += 1) {
+    const line = lines[idx] ?? '';
+    const listMatch = /^(\s*)([-+*]|\d+\.)\s+(.+)$/.exec(line);
+    if (listMatch) {
+      state = processListLine(state, listMatch, output);
+      continue;
+    }
+    state = closeAllLists(state, output);
+    if (!line.trim()) {
+      output.push('');
+    } else if (/^```/.test(line)) {
+      idx = processCodeBlock(lines, idx, output, warnings);
+    } else if (!parseMarkdownLine(line, output)) {
+      output.push(convertInlineMarkdown(line));
+    }
+  }
+  closeAllLists(state, output);
+  const result = output.join('\n').replace(/\n{3,}/g, '\n\n').trim();
+  return { output: result, warnings, stats: { characters: result.length, tags: (result.match(/\[[a-z*]/gi) ?? []).length, blocks: countBlocks(result) } };
+}

package/src/tool/steamBbcodeTranslator/markdown-renderer.ts

@@ -0,0 +1,85 @@
+import type { Node, TagNode } from './types';
+
+function escapeMarkdown(value: string): string {
+  return value.replace(/([\\`*_{}[\]()#+!|>])/g, '\\$1');
+}
+
+function escapeMarkdownUrl(value: string): string {
+  return value.replace(/[()\\ ]/g, (character) => `\\${character}`);
+}
+
+function cleanInline(value: string): string {
+  return value.replace(/[ \t]+\n/g, '\n').replace(/\n[ \t]+/g, '\n');
+}
+
+function indent(value: string): string {
+  return value.split('\n').map((line) => line ? `  ${line}` : line).join('\n');
+}
+
+export function inlineMarkdown(nodes: Node[]): string {
+  return cleanInline(nodes.map((node) => {
+    if (node.kind === 'text') return escapeMarkdown(node.value);
+    return renderMarkdownNode(node, true);
+  }).join(''));
+}
+
+export function renderMarkdownList(node: TagNode, ordered: boolean): string {
+  const items = node.children.filter((child): child is TagNode => child.kind === 'tag' && child.name === '*');
+  return items.map((item, index) => {
+    const content = item.children.map((child) => {
+      if (child.kind === 'tag' && (child.name === 'list' || child.name === 'olist')) {
+        return `\n${indent(renderMarkdownList(child, child.name === 'olist'))}`;
+      }
+      if (child.kind === 'text') return escapeMarkdown(child.value);
+      return renderMarkdownNode(child, true);
+    }).join('').trim();
+    return `${ordered ? `${index + 1}.` : '-'} ${content}`;
+  }).join('\n');
+}
+
+function renderCodeNode(node: TagNode, inline: boolean): string {
+  const inner = node.children.map((child) => child.kind === 'text' ? child.value : renderMarkdownNode(child, true)).join('');
+  return inline ? `\`${inner}\`` : `\`\`\`\n${inner}\n\`\`\`\n\n`;
+}
+
+function renderQuoteNode(node: TagNode): string {
+  return node.children.map((child) => inlineMarkdown([child])).join('').split('\n').map((line) => `> ${line}`).join('\n') + '\n\n';
+}
+
+function renderMarkdownBasicInline(name: string, content: string): string | null {
+  if (name === 'b' || name === 'strong') return `**${content}**`;
+  if (name === 'i' || name === 'em') return `*${content}*`;
+  if (name === 'u') return `<u>${content}</u>`;
+  if (name === 's' || name === 'strike') return `~~${content}~~`;
+  return null;
+}
+
+function renderMarkdownInlineNode(name: string, content: string, value?: string): string {
+  const basic = renderMarkdownBasicInline(name, content);
+  if (basic !== null) return basic;
+  if (name === 'url') return value ? `[${content || escapeMarkdown(value)}](${escapeMarkdownUrl(value)})` : content;
+  return content;
+}
+
+function renderMarkdownHeadingOrBlock(name: string, content: string, node: TagNode, inline: boolean): string | null {
+  if (name === 'h1') return `# ${content.trim()}\n\n`;
+  if (name === 'h2') return `## ${content.trim()}\n\n`;
+  if (name === 'h3') return `### ${content.trim()}\n\n`;
+  if (name === 'code') return renderCodeNode(node, inline);
+  if (name === 'quote') return renderQuoteNode(node);
+  if (name === 'spoiler') return `<details><summary>Spoiler</summary>${content}</details>`;
+  return null;
+}
+
+export function renderMarkdownNode(node: TagNode, inline = false): string {
+  const content = inlineMarkdown(node.children);
+  const headingOrBlock = renderMarkdownHeadingOrBlock(node.name, content, node, inline);
+  if (headingOrBlock !== null) return headingOrBlock;
+  if (node.name === 'list') return `${renderMarkdownList(node, false)}\n\n`;
+  if (node.name === 'olist') return `${renderMarkdownList(node, true)}\n\n`;
+  return renderMarkdownInlineNode(node.name, content, node.value);
+}
+
+export function renderMarkdown(nodes: Node[]): string {
+  return nodes.map((node) => node.kind === 'text' ? escapeMarkdown(node.value) : renderMarkdownNode(node)).join('').replace(/\n{3,}/g, '\n\n').trim();
+}

package/src/tool/steamBbcodeTranslator/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { steamBbcodeTranslator } from './entry';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const loader = steamBbcodeTranslator.i18n[locale] ?? steamBbcodeTranslator.i18n.en;
+const content = loader ? await loader() : null;
+---
+
+{content && content.seo && content.seo.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/steamBbcodeTranslator/steam-bbcode-translator.css

@@ -0,0 +1,392 @@
+.bbcode-root {
+  --bb-ink: #211e2d;
+  --bb-muted: #77728a;
+  --bb-line: #dcd8e7;
+  --bb-panel: #fffdfb;
+  --bb-soft: #f4f0f7;
+  --bb-accent: #724ee8;
+  --bb-accent-deep: #4c2fba;
+  --bb-cyan: #20a8b5;
+  --bb-warm: #ed8a52;
+
+  color: var(--bb-ink);
+  margin: 0 auto;
+  max-width: 1120px;
+  width: 100%;
+}
+
+.theme-dark .bbcode-root {
+  --bb-ink: #f4f1fb;
+  --bb-muted: #aaa4bb;
+  --bb-line: #342e47;
+  --bb-panel: #171422;
+  --bb-soft: #211c30;
+  --bb-accent: #a68cff;
+  --bb-accent-deep: #c0b0ff;
+  --bb-cyan: #63d2dc;
+  --bb-warm: #f3a06d;
+}
+
+.bbcode-root * {
+  box-sizing: border-box;
+}
+
+.bbcode-root button,
+.bbcode-root textarea {
+  font: inherit;
+}
+
+.bbcode-header,
+.bbcode-input-card,
+.bbcode-output-card,
+.bbcode-preview-card {
+  background: var(--bb-panel);
+  border: 1px solid var(--bb-line);
+}
+
+.bbcode-header {
+  align-items: center;
+  border-radius: 18px 18px 0 0;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.2rem;
+}
+
+.bbcode-title-row {
+  align-items: center;
+  display: flex;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.bbcode-mark {
+  align-items: center;
+  background: var(--bb-soft);
+  border: 1px solid var(--bb-line);
+  border-radius: 8px;
+  color: var(--bb-accent);
+  display: inline-flex;
+  font-size: 0.9rem;
+  font-weight: 900;
+  height: 36px;
+  justify-content: center;
+  width: 58px;
+}
+
+.bbcode-kicker {
+  color: var(--bb-accent);
+  display: block;
+  font-size: 0.62rem;
+  font-weight: 900;
+  letter-spacing: 0.14em;
+}
+
+.bbcode-title-row strong,
+.bbcode-draft-note {
+  color: var(--bb-muted);
+  display: block;
+  font-size: 0.72rem;
+  font-weight: 600;
+}
+
+.bbcode-draft-note {
+  text-align: right;
+}
+
+.bbcode-input-card {
+  border-top: 0;
+  padding: 1.2rem;
+}
+
+.bbcode-section-head,
+.bbcode-output-heading,
+.bbcode-output-card-head,
+.bbcode-input-footer {
+  align-items: flex-start;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.bbcode-section-head {
+  margin-bottom: 0.7rem;
+}
+
+.bbcode-section-head h2,
+.bbcode-output-heading h2 {
+  display: inline;
+  font-size: 1rem;
+  margin: 0;
+}
+
+.bbcode-step {
+  color: var(--bb-warm);
+  font-size: 0.68rem;
+  font-weight: 900;
+  margin-right: 0.45rem;
+}
+
+.bbcode-detected {
+  background: var(--bb-soft);
+  border-radius: 999px;
+  color: var(--bb-accent-deep);
+  font-size: 0.66rem;
+  padding: 0.3rem 0.55rem;
+}
+
+.bbcode-input-card textarea {
+  background: var(--bb-soft);
+  border: 1px solid var(--bb-line);
+  border-radius: 9px;
+  color: var(--bb-ink);
+  display: block;
+  font-size: 0.8rem;
+  line-height: 1.65;
+  min-height: 240px;
+  padding: 1rem;
+  resize: vertical;
+  width: 100%;
+}
+
+.bbcode-input-card textarea:focus {
+  border-color: var(--bb-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-accent) 18%, transparent);
+  outline: 0;
+}
+
+.bbcode-input-footer {
+  align-items: center;
+  margin-top: 0.6rem;
+}
+
+.bbcode-input-footer p {
+  color: var(--bb-muted);
+  font-size: 0.7rem;
+  line-height: 1.4;
+  margin: 0;
+}
+
+.bbcode-input-meta {
+  align-items: center;
+  color: var(--bb-muted);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 0.68rem;
+  gap: 0.8rem;
+}
+
+.bbcode-input-meta strong {
+  color: var(--bb-ink);
+}
+
+.bbcode-clear-button,
+.bbcode-icon-button {
+  background: transparent;
+  border: 1px solid var(--bb-line);
+  border-radius: 6px;
+  color: var(--bb-ink);
+  cursor: pointer;
+  font-size: 0.68rem;
+  font-weight: 800;
+  padding: 0.38rem 0.6rem;
+}
+
+.bbcode-clear-button:hover,
+.bbcode-icon-button:hover {
+  border-color: var(--bb-accent);
+  color: var(--bb-accent-deep);
+}
+
+.bbcode-output-section {
+  background: var(--bb-soft);
+  border-left: 1px solid var(--bb-line);
+  border-right: 1px solid var(--bb-line);
+  padding: 1rem 1.2rem;
+}
+
+.bbcode-output-heading {
+  align-items: center;
+  margin-bottom: 0.7rem;
+}
+
+.bbcode-output-grid {
+  display: grid;
+  gap: 0.8rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.bbcode-output-card {
+  border-radius: 10px;
+  min-width: 0;
+  padding: 0.8rem;
+}
+
+.bbcode-output-card-head {
+  align-items: center;
+  margin-bottom: 0.55rem;
+}
+
+.bbcode-output-card h3 {
+  font-size: 0.78rem;
+  margin: 0;
+}
+
+.bbcode-output-card pre {
+  background: var(--bb-soft);
+  border: 1px solid var(--bb-line);
+  border-radius: 7px;
+  color: var(--bb-ink);
+  font-size: 0.72rem;
+  line-height: 1.6;
+  margin: 0;
+  min-height: 180px;
+  max-height: 330px;
+  overflow: auto;
+  padding: 0.8rem;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.bbcode-preview-card {
+  border-radius: 0 0 18px 18px;
+  border-top: 0;
+  padding: 1rem 1.2rem 1.2rem;
+}
+
+.bbcode-preview-surface {
+  background: var(--bb-soft);
+  border: 1px solid var(--bb-line);
+  border-radius: 9px;
+  color: var(--bb-ink);
+  font-size: 0.82rem;
+  line-height: 1.6;
+  min-height: 110px;
+  padding: 1rem;
+}
+
+.bbcode-preview-surface h1,
+.bbcode-preview-surface h2,
+.bbcode-preview-surface h3 {
+  line-height: 1.15;
+  margin: 0 0 0.6rem;
+}
+
+.bbcode-preview-surface h1 {
+  font-size: 1.35rem;
+}
+
+.bbcode-preview-surface h2 {
+  font-size: 1.12rem;
+}
+
+.bbcode-preview-surface h3 {
+  font-size: 0.98rem;
+}
+
+.bbcode-preview-surface p {
+  margin: 0.3rem 0;
+}
+
+.bbcode-preview-surface ul,
+.bbcode-preview-surface ol {
+  margin: 0.45rem 0;
+  padding-left: 1.3rem;
+}
+
+.bbcode-preview-surface li {
+  margin: 0.15rem 0;
+}
+
+.bbcode-preview-surface blockquote {
+  border-left: 3px solid var(--bb-accent);
+  color: var(--bb-muted);
+  margin: 0.6rem 0;
+  padding-left: 0.7rem;
+}
+
+.bbcode-preview-surface a {
+  color: var(--bb-accent-deep);
+}
+
+.bbcode-preview-surface code,
+.bbcode-preview-surface pre {
+  background: var(--bb-panel);
+  border: 1px solid var(--bb-line);
+  border-radius: 5px;
+}
+
+.bbcode-preview-surface code {
+  padding: 0.1rem 0.25rem;
+}
+
+.bbcode-preview-surface pre {
+  overflow: auto;
+  padding: 0.6rem;
+}
+
+.bbcode-preview-surface pre code {
+  border: 0;
+  padding: 0;
+}
+
+.bbcode-preview-surface p:first-child:last-child {
+  color: var(--bb-muted);
+  margin: 0;
+}
+
+.bbcode-sr-only {
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+  clip-path: inset(50%);
+}
+
+.bbcode-root button:focus-visible,
+.bbcode-root textarea:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--bb-cyan) 45%, transparent);
+  outline-offset: 2px;
+}
+
+@media (max-width: 700px) {
+  .bbcode-header,
+  .bbcode-input-footer {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .bbcode-draft-note {
+    text-align: left;
+  }
+
+  .bbcode-input-meta {
+    width: 100%;
+  }
+
+  .bbcode-output-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 460px) {
+  .bbcode-header,
+  .bbcode-input-card,
+  .bbcode-output-section,
+  .bbcode-preview-card {
+    padding-left: 0.85rem;
+    padding-right: 0.85rem;
+  }
+
+  .bbcode-input-meta {
+    justify-content: space-between;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bbcode-root * {
+    scroll-behavior: auto;
+    transition-duration: 0.01ms;
+  }
+}