@lexibase/rdx-ui 2.0.0 → 3.1.0

package/src/lib/i18n.ts

@@ -26,15 +26,31 @@ const en = {
   open: 'Open',
   close: 'Close',
   closeSearch: 'Close search',
+  enlargeImage: 'Enlarge image: {alt}',
+  closeImage: 'Close image',
+  imagePreviewDescription:
+    'Press Escape or use the close button to return to the document.',
   copyCode: 'Copy code',
+  wrapCode: 'Wrap lines',
+  showMore: 'Show more',
+  showLess: 'Show less',
   codeCopied: 'Code copied to clipboard.',
   copyCodeError: 'Could not copy. Select the code and copy it manually.',
   copyRetry: 'Could not copy. Try again or copy manually.',
   copied: 'Copied!',
   copyTab: 'Copy active tab',
+  documentationTabs: 'Documentation tabs',
   tabCopied: 'Tab content copied to clipboard.',
   copyTabError: 'Could not copy. Select the tab content and copy it manually.',
   code: 'Code',
+  folderTree: 'Folder',
+  diagram: 'Diagram',
+  showDiagram: 'Show diagram',
+  showDiagramSource: 'Show diagram source',
+  enlargeDiagram: 'Enlarge diagram',
+  diagramLoading: 'Rendering diagram…',
+  diagramError:
+    'Could not render this diagram. Check the Mermaid source below.',
   table: 'Table',
   current: 'Current',
   version: 'Version {version}',
@@ -89,17 +105,33 @@ const ptBR = {
   open: 'Abrir',
   close: 'Fechar',
   closeSearch: 'Fechar busca',
+  enlargeImage: 'Ampliar imagem: {alt}',
+  closeImage: 'Fechar imagem',
+  imagePreviewDescription:
+    'Pressione Escape ou use o botão de fechar para voltar ao documento.',
   copyCode: 'Copiar código',
+  wrapCode: 'Quebrar linhas',
+  showMore: 'Mostrar mais',
+  showLess: 'Mostrar menos',
   codeCopied: 'Código copiado para a área de transferência.',
   copyCodeError:
     'Não foi possível copiar. Selecione o código e copie manualmente.',
   copyRetry: 'Não foi possível copiar. Tente novamente ou copie manualmente.',
   copied: 'Copiado!',
   copyTab: 'Copiar aba ativa',
+  documentationTabs: 'Abas da documentação',
   tabCopied: 'Conteúdo da aba copiado para a área de transferência.',
   copyTabError:
     'Não foi possível copiar. Selecione o conteúdo da aba e copie manualmente.',
   code: 'Código',
+  folderTree: 'Pastas',
+  diagram: 'Diagrama',
+  showDiagram: 'Mostrar diagrama',
+  showDiagramSource: 'Mostrar código do diagrama',
+  enlargeDiagram: 'Ampliar diagrama',
+  diagramLoading: 'Renderizando diagrama…',
+  diagramError:
+    'Não foi possível renderizar o diagrama. Confira o código Mermaid abaixo.',
   table: 'Tabela',
   current: 'Atual',
   version: 'Versão {version}',

package/src/lib/mermaid.ts

@@ -0,0 +1,114 @@
+type Mermaid = (typeof import('mermaid'))['default']
+
+let engine: Promise<Mermaid> | undefined
+let queue: Promise<unknown> = Promise.resolve()
+let serial = 0
+
+function loadMermaid() {
+  engine ??= import('mermaid')
+    .then((module) => module.default)
+    .catch((error: unknown) => {
+      engine = undefined
+      throw error
+    })
+  return engine
+}
+
+/** Mermaid owns global configuration: serialize theme setup and rendering. */
+export function renderMermaid(
+  source: string,
+  dark: boolean,
+  active: () => boolean
+): Promise<string | undefined> {
+  const task = queue.then(async () => {
+    if (!active()) return
+    if (source.length > 50_000)
+      throw new Error('Mermaid definition exceeds 50,000 characters.')
+    const mermaid = await loadMermaid()
+    if (!active()) return
+    const fontFamily = 'ui-sans-serif, system-ui, sans-serif'
+    mermaid.initialize({
+      startOnLoad: false,
+      securityLevel: 'strict',
+      suppressErrorRendering: true,
+      htmlLabels: false,
+      maxTextSize: 50_000,
+      maxEdges: 500,
+      theme: 'base',
+      fontFamily,
+      themeVariables: {
+        fontSize: '14px',
+        darkMode: dark,
+        background: 'transparent',
+        primaryColor: dark ? '#18181b' : '#f4f4f5',
+        primaryTextColor: dark ? '#fafafa' : '#18181b',
+        primaryBorderColor: dark ? '#52525b' : '#a1a1aa',
+        lineColor: dark ? '#a1a1aa' : '#52525b',
+        secondaryColor: dark ? '#27272a' : '#e4e4e7',
+        tertiaryColor: dark ? '#18181b' : '#fafafa',
+        fontFamily,
+      },
+      // Diagram directives cannot change the site's safety, theme or limits.
+      secure: [
+        ...new Set([
+          'secure',
+          'securityLevel',
+          'startOnLoad',
+          'maxTextSize',
+          'maxEdges',
+          'suppressErrorRendering',
+          'theme',
+          'flowchart',
+          'htmlLabels',
+          'dompurifyConfig',
+          'themeCSS',
+          'themeVariables',
+          'fontFamily',
+        ]),
+      ],
+    })
+    const container = document.createElement('div')
+    container.setAttribute('aria-hidden', 'true')
+    container.inert = true
+    Object.assign(container.style, {
+      position: 'fixed',
+      left: '-100000px',
+      visibility: 'hidden',
+    })
+    document.body.append(container)
+    try {
+      const { svg } = await mermaid.render(
+        `rdx-mermaid-${++serial}`,
+        source,
+        container
+      )
+      if (!active()) return
+      // Mermaid's responsive width is intended for inline SVG. Give the image
+      // intrinsic dimensions so preview scaling and the expanded view stay crisp.
+      const document = new DOMParser().parseFromString(svg, 'image/svg+xml')
+      const element = document.documentElement
+      if (element.localName !== 'svg')
+        throw new Error('Mermaid returned invalid SVG.')
+      const viewBox = element
+        .getAttribute('viewBox')
+        ?.split(/[\s,]+/)
+        .map(Number)
+      if (
+        viewBox?.length === 4 &&
+        viewBox.every(Number.isFinite) &&
+        viewBox[2]! > 0 &&
+        viewBox[3]! > 0
+      ) {
+        element.setAttribute('width', String(viewBox[2]))
+        element.setAttribute('height', String(viewBox[3]))
+        element.style.removeProperty('max-width')
+      }
+      return new XMLSerializer().serializeToString(element)
+    } finally {
+      container.remove()
+    }
+  })
+  // A failed diagram must not block other diagrams on this or the next page.
+  queue = task.catch(() => undefined)
+  return task
+}

package/src/styles/globals.css

@@ -2,6 +2,7 @@
 @source "../**/*.{ts,tsx}";
 
 @import 'tw-animate-css';
+@import './shadcn.css';
 
 @custom-variant dark (&:is(.dark *));
 
@@ -18,13 +19,13 @@
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
   --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --accent: var(--rdx-highlighting-soft, oklch(0.97 0 0));
+  --accent-foreground: var(--rdx-highlighting, oklch(0.205 0 0));
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --ring: var(--rdx-highlighting, oklch(0.708 0 0));
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -33,12 +34,12 @@
   --radius: 0.625rem;
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary: var(--rdx-highlighting, oklch(0.205 0 0));
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-accent: var(--rdx-highlighting-soft, oklch(0.97 0 0));
+  --sidebar-accent-foreground: var(--rdx-highlighting, oklch(0.205 0 0));
   --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-ring: var(--rdx-highlighting, oklch(0.708 0 0));
 }
 
 .dark {
@@ -54,13 +55,13 @@
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
   --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
+  --accent: var(--rdx-highlighting-soft, oklch(0.269 0 0));
+  --accent-foreground: var(--rdx-highlighting, oklch(0.985 0 0));
   --destructive: oklch(0.396 0.141 25.723);
   --destructive-foreground: oklch(0.637 0.237 25.331);
   --border: oklch(0.269 0 0);
   --input: oklch(0.269 0 0);
-  --ring: oklch(0.556 0 0);
+  --ring: var(--rdx-highlighting, oklch(0.556 0 0));
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
@@ -68,15 +69,27 @@
   --chart-5: oklch(0.645 0.246 16.439);
   --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary: var(--rdx-highlighting, oklch(0.488 0.243 264.376));
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-accent: var(--rdx-highlighting-soft, oklch(0.269 0 0));
+  --sidebar-accent-foreground: var(--rdx-highlighting, oklch(0.985 0 0));
   --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+  --sidebar-ring: var(--rdx-highlighting, oklch(0.439 0 0));
+}
+
+:root,
+.dark {
+  /* Invalid without an override, allowing each existing token to keep its default. */
+  --rdx-highlighting-soft: color-mix(
+    in oklab,
+    var(--rdx-highlighting) 14%,
+    var(--background)
+  );
 }
 
 @theme inline {
+  --color-rdx-highlighting: var(--rdx-highlighting, var(--color-blue-500));
+  --color-rdx-selected: var(--rdx-highlighting, var(--foreground));
   /* shadcn accordion animation, using the height measured by Base UI. */
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
@@ -140,6 +153,7 @@
 @layer base {
   * {
     @apply border-border outline-ring/50;
+    scrollbar-width: thin;
   }
   body {
     @apply bg-background text-foreground;
@@ -157,3 +171,66 @@
 .dark [data-rdx-code-block] pre.shiki span {
   color: var(--shiki-dark, inherit);
 }
+
+/* Only document navigation participates; desktop and reduced motion stay still. */
+:root:active-view-transition-type(
+    rdx-doc-forward,
+    rdx-doc-back
+  )::view-transition {
+  pointer-events: none;
+}
+:root:active-view-transition-type(
+    rdx-doc-forward,
+    rdx-doc-back
+  )::view-transition-group(root) {
+  display: none;
+}
+
+::view-transition-group(.rdx-doc-forward),
+::view-transition-group(.rdx-doc-back),
+::view-transition-old(.rdx-doc-forward),
+::view-transition-new(.rdx-doc-forward),
+::view-transition-old(.rdx-doc-back),
+::view-transition-new(.rdx-doc-back) {
+  animation: none;
+}
+
+@media (width < 768px) and (prefers-reduced-motion: no-preference) {
+  ::view-transition-old(.rdx-doc-forward) {
+    --rdx-page-offset: -48px;
+    animation: rdx-page-exit 220ms ease-out both;
+  }
+  ::view-transition-new(.rdx-doc-forward) {
+    --rdx-page-offset: 48px;
+    animation: rdx-page-enter 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+  ::view-transition-old(.rdx-doc-back) {
+    --rdx-page-offset: 48px;
+    animation: rdx-page-exit 220ms ease-out both;
+  }
+  ::view-transition-new(.rdx-doc-back) {
+    --rdx-page-offset: -48px;
+    animation: rdx-page-enter 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+}
+
+@keyframes rdx-page-enter {
+  from {
+    opacity: 0;
+    transform: translateX(var(--rdx-page-offset));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes rdx-page-exit {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(var(--rdx-page-offset));
+  }
+}