@lexibase/rdx-ui 3.0.0 → 3.2.0

package/src/components/mdx-code-block.tsx

@@ -9,6 +9,8 @@ import {
 import { getMessages } from '../lib/i18n'
 import { CodeBlockLine } from './code-block'
 import { MdxCodeBlockView } from './mdx-code-block-view'
+import { MdxFolderTree } from './mdx-folder-tree'
+import { MdxMermaid } from './mdx-mermaid'
 
 function textOf(children: ReactNode): string {
   return Children.toArray(children)
@@ -47,8 +49,16 @@ export function MdxCodeBlock({
   lang,
   children,
   'data-rdx-code-mode': mode,
+  'data-rdx-code-title': title,
+  'data-rdx-code-line-numbers': numbered,
+  'data-rdx-code-start-line': firstLine,
   ...props
-}: ComponentProps<'pre'> & { 'data-rdx-code-mode'?: 'folder' | 'diff' }) {
+}: ComponentProps<'pre'> & {
+  'data-rdx-code-mode'?: 'folder' | 'diff' | 'mermaid'
+  'data-rdx-code-title'?: string
+  'data-rdx-code-line-numbers'?: string
+  'data-rdx-code-start-line'?: string
+}) {
   const messages = getMessages(lang)
   const code = Children.toArray(children).find((child) => isValidElement(child))
   const codeProps = isValidElement<{
@@ -59,42 +69,85 @@ export function MdxCodeBlock({
     : undefined
   const language = codeProps?.className?.match(/(?:^|\s)language-([^\s]+)/)?.[1]
   const value = textOf(codeProps?.children ?? children)
+  if (mode === 'mermaid' || language?.toLowerCase() === 'mermaid') {
+    return (
+      <MdxMermaid
+        value={value}
+        title={title}
+        lineNumbers={numbered === 'true'}
+        startLine={firstLine === undefined ? undefined : Number(firstLine)}
+        preProps={props}
+      />
+    )
+  }
   const label =
-    mode === 'folder' ? messages.folderTree : (language ?? messages.code)
+    title ||
+    (mode === 'folder' ? messages.folderTree : (language ?? messages.code))
+  const lineNumbers = numbered === 'true'
+  const raw = codeProps?.children ?? children
+  const nodes = Children.toArray(raw)
+  type LineProps = {
+    children?: ReactNode
+    className?: string
+    'data-rdx-line-variant'?: string
+  }
+  const lines = nodes.filter(
+    (node) =>
+      isValidElement<LineProps>(node) &&
+      (node.props['data-rdx-line-variant'] ||
+        node.props.className?.split(/\s+/).includes('line'))
+  )
+  const lastLine = lines.at(-1)
   const content =
-    mode === 'diff'
-      ? Children.map(codeProps?.children, (node) => {
-          if (
-            !isValidElement<{
-              children?: ReactNode
-              'data-rdx-line-variant'?: string
-            }>(node)
-          )
-            return node
-          const variant = node.props['data-rdx-line-variant']
-          if (!variant) return node
-          return (
-            <CodeBlockLine
-              variant={
-                variant === 'added' || variant === 'removed'
-                  ? variant
-                  : variant === 'hunk'
-                    ? 'highlighted'
-                    : 'default'
-              }
-            >
-              {variant === 'added' || variant === 'removed'
-                ? withoutMarker(node.props.children)
-                : node.props.children}
-            </CodeBlockLine>
-          )
-        })
-      : (codeProps?.children ?? children)
+    mode === 'folder' ? (
+      <MdxFolderTree value={value} />
+    ) : (mode === 'diff' || lineNumbers) && typeof raw !== 'string' ? (
+      nodes.map((node) => {
+        if (lineNumbers && node === '\n') return null
+        if (!isValidElement<LineProps>(node)) return node
+        const variant = node.props['data-rdx-line-variant']
+        if (
+          !variant &&
+          !(lineNumbers && node.props.className?.split(/\s+/).includes('line'))
+        )
+          return node
+        // A final newline terminates the last source line; intentional blank
+        // lines before it still receive the official component's own number.
+        if (
+          lineNumbers &&
+          lines.length > 1 &&
+          node === lastLine &&
+          value.endsWith('\n') &&
+          textOf(node.props.children) === ''
+        )
+          return null
+        return (
+          <CodeBlockLine
+            key={node.key}
+            variant={
+              variant === 'added' || variant === 'removed'
+                ? variant
+                : variant === 'hunk'
+                  ? 'highlighted'
+                  : 'default'
+            }
+          >
+            {variant === 'added' || variant === 'removed'
+              ? withoutMarker(node.props.children)
+              : node.props.children}
+          </CodeBlockLine>
+        )
+      })
+    ) : (
+      raw
+    )
   return (
     <MdxCodeBlockView
       label={label}
       mode={mode}
       value={value}
+      lineNumbers={lineNumbers}
+      startLine={firstLine === undefined ? undefined : Number(firstLine)}
       preProps={{
         ...props,
         className: [props.className, language && `language-${language}`]

package/src/components/mdx-components.tsx

@@ -29,6 +29,7 @@ import {
 } from './code-block'
 import { MdxCodeBlock } from './mdx-code-block'
 import { Kbd, KbdGroup } from './kbd'
+import { MdxKeyboardShortcut } from './mdx-keyboard-shortcut'
 import {
   Table,
   TableBody,
@@ -105,10 +106,7 @@ export const mdxComponents = {
     />
   ),
   a: ({ className, children, ...props }: ComponentProps<'a'>) => (
-    <a
-      className={cn('underline text-chart-1 text-blue-500', className)}
-      {...props}
-    >
+    <a className={cn('underline text-rdx-highlighting', className)} {...props}>
       {linkedImages(children)}
     </a>
   ),
@@ -157,6 +155,7 @@ export const mdxComponents = {
   CodeBlockTitle,
   Kbd,
   KbdGroup,
+  KeyboardShortcut: MdxKeyboardShortcut,
   Table,
   TableHeader,
   TableBody,
@@ -190,6 +189,9 @@ export const mdxComponents = {
 export function getMdxComponents(lang?: string) {
   return {
     ...mdxComponents,
+    KeyboardShortcut: (props: { children?: ReactNode }) => (
+      <MdxKeyboardShortcut {...props} lang={lang} />
+    ),
     pre: (props: ComponentProps<'pre'>) => (
       <MdxCodeBlock {...props} lang={lang} />
     ),

package/src/components/mdx-folder-tree.tsx

@@ -0,0 +1,58 @@
+import {
+  File,
+  FileCode2,
+  FileImage,
+  FileJson,
+  FileText,
+  Folder,
+} from 'lucide-react'
+
+import { CodeBlockLine } from './code-block'
+
+function entryIcon(name: string) {
+  if (name.endsWith('/')) return { Icon: Folder, kind: 'folder' }
+  const extension = name.includes('.')
+    ? name.split('.').at(-1)?.toLowerCase()
+    : undefined
+  if (extension === 'json' || extension === 'jsonc')
+    return { Icon: FileJson, kind: 'json' }
+  if (extension && /^(?:png|jpe?g|gif|webp|svg|avif|ico|bmp)$/.test(extension))
+    return { Icon: FileImage, kind: 'image' }
+  if (extension && /^(?:mdx?|txt|log|rst)$/.test(extension))
+    return { Icon: FileText, kind: 'text' }
+  if (
+    extension &&
+    /^(?:[cm]?[jt]sx?|html|css|scss|vue|svelte|py|rb|go|rs|java|c|cpp|h|cs|php|sql|sh|bash|ya?ml|toml)$/.test(
+      extension
+    )
+  )
+    return { Icon: FileCode2, kind: 'code' }
+  return { Icon: File, kind: 'file' }
+}
+
+/** Decorate generated text with icons inside the official shadcn line component. */
+export function MdxFolderTree({ value }: { value: string }) {
+  const trailingNewline = value.endsWith('\n')
+  const lines = value.replace(/\n$/, '').split('\n')
+  return lines.map((line, index) => {
+    const match = line.match(/^([ │\t]*(?:├──|└──)\s*)(.*)$/)
+    const prefix = match?.[1] ?? line.match(/^[ │\t]*/)?.[0] ?? ''
+    const name = match?.[2] ?? line.slice(prefix.length)
+    const { Icon, kind } = entryIcon(name)
+    return (
+      <CodeBlockLine key={index} data-rdx-folder-kind={name ? kind : undefined}>
+        {prefix && <span aria-hidden="true">{prefix}</span>}
+        {name && (
+          <>
+            <Icon
+              aria-hidden="true"
+              className="mr-1.5 inline-block size-3.5 align-[-2px] text-muted-foreground"
+            />
+            {name}
+          </>
+        )}
+        {index < lines.length - 1 || trailingNewline ? '\n' : null}
+      </CodeBlockLine>
+    )
+  })
+}

package/src/components/mdx-keyboard-shortcut.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react'
+
+import { getMessages, type InterfaceMessages } from '../lib/i18n'
+import { Kbd, KbdGroup } from './kbd'
+
+const keyNames: Record<string, keyof InterfaceMessages> = {
+  ctrl: 'keyboardControl',
+  control: 'keyboardControl',
+  '⌃': 'keyboardControl',
+  shift: 'keyboardShift',
+  '⇧': 'keyboardShift',
+  alt: 'keyboardAlt',
+  cmd: 'keyboardCommand',
+  command: 'keyboardCommand',
+  '⌘': 'keyboardCommand',
+  option: 'keyboardOption',
+  '⌥': 'keyboardOption',
+  esc: 'keyboardEscape',
+  escape: 'keyboardEscape',
+  '⎋': 'keyboardEscape',
+  enter: 'keyboardEnter',
+  return: 'keyboardEnter',
+  '↵': 'keyboardEnter',
+  '⏎': 'keyboardEnter',
+  space: 'keyboardSpace',
+  spacebar: 'keyboardSpace',
+  '+': 'keyboardPlus',
+  arrowup: 'keyboardArrowUp',
+  '↑': 'keyboardArrowUp',
+  arrowdown: 'keyboardArrowDown',
+  '↓': 'keyboardArrowDown',
+  arrowleft: 'keyboardArrowLeft',
+  '←': 'keyboardArrowLeft',
+  arrowright: 'keyboardArrowRight',
+  '→': 'keyboardArrowRight',
+}
+
+/** Markdown adapter: preserve shadcn visuals, expose one readable text alternative. */
+export function MdxKeyboardShortcut({
+  children,
+  lang,
+}: {
+  children?: ReactNode
+  lang?: string
+}) {
+  if (typeof children !== 'string') return <Kbd>{children}</Kbd>
+  const keys = children
+    .trim()
+    .split(/\s+\+\s+/)
+    .map((key) => key.trim())
+  if (keys.length < 2 || keys.some((key) => !key)) return <Kbd>{children}</Kbd>
+  const messages = getMessages(lang)
+  const description = keys
+    .map((key) => {
+      const name = Object.hasOwn(keyNames, key.toLowerCase())
+        ? keyNames[key.toLowerCase()]
+        : undefined
+      return name ? messages[name] : key
+    })
+    .join(messages.keyboardJoiner)
+  return (
+    <span data-rdx-kbd-value={children} className="inline-flex align-baseline">
+      <span className="sr-only select-none">{description}</span>
+      <KbdGroup aria-hidden="true">
+        {keys.map((key, index) => (
+          <span key={index} className="inline-flex items-center gap-1">
+            {index > 0 && <span>+</span>}
+            <Kbd>{key}</Kbd>
+          </span>
+        ))}
+      </KbdGroup>
+    </span>
+  )
+}

package/src/components/mdx-mermaid.tsx

@@ -0,0 +1,252 @@
+'use client'
+
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentProps,
+} from 'react'
+import { useTheme } from 'next-themes'
+import {
+  CodeXml,
+  Eye,
+  Maximize2,
+  RotateCw,
+  Workflow,
+  WrapText,
+} from 'lucide-react'
+
+import { renderMermaid } from '../lib/mermaid'
+import { useMessages } from '../providers/locale-provider'
+import { Button } from './button'
+import {
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockHeader,
+  CodeBlockTitle,
+} from './code-block'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from './dialog'
+
+/** A Mermaid fence adapts the existing shadcn Code Block and Dialog. */
+export function MdxMermaid({
+  value,
+  title,
+  lineNumbers,
+  startLine,
+  preProps,
+}: {
+  value: string
+  title?: string
+  lineNumbers?: boolean
+  startLine?: number
+  preProps: ComponentProps<'pre'>
+}) {
+  const messages = useMessages()
+  const { resolvedTheme } = useTheme()
+  const block = useRef<HTMLDivElement>(null)
+  const [visible, setVisible] = useState(false)
+  const [sourceView, setSourceView] = useState(false)
+  const [wrap, setWrap] = useState(false)
+  const [attempt, setAttempt] = useState(0)
+  const [result, setResult] = useState<{
+    source: string
+    theme: string
+    svg?: string
+    error?: boolean
+  }>()
+  const current =
+    result?.source === value && result.theme === resolvedTheme
+      ? result
+      : undefined
+  const svg = current?.svg
+  const error = current?.error
+  const image = svg
+    ? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
+    : undefined
+  const description = useMemo(() => {
+    if (!svg) return title || messages.diagram
+    const document = new DOMParser().parseFromString(svg, 'image/svg+xml')
+    return [
+      title || document.querySelector('title')?.textContent || messages.diagram,
+      document.querySelector('desc')?.textContent,
+    ]
+      .filter(Boolean)
+      .join('. ')
+  }, [svg, title, messages.diagram])
+  const label = title || 'Mermaid'
+  const showSource = sourceView || !svg
+
+  useEffect(() => {
+    const element = block.current
+    if (!element) return
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setVisible(true)
+          observer.disconnect()
+        }
+      },
+      { rootMargin: '200px' }
+    )
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [])
+
+  useEffect(() => {
+    if (!visible || !resolvedTheme) return
+    let active = true
+    const theme = resolvedTheme
+    void renderMermaid(value, theme === 'dark', () => active).then(
+      (svg) => {
+        if (active && svg) setResult({ source: value, theme, svg })
+      },
+      () => {
+        if (active) setResult({ source: value, theme, error: true })
+      }
+    )
+    return () => {
+      active = false
+    }
+  }, [value, resolvedTheme, visible, attempt])
+
+  return (
+    <CodeBlock
+      ref={block}
+      size="sm"
+      data-rdx-code-block
+      data-rdx-code-mode="mermaid"
+      data-rdx-code-value={value}
+      className="my-4 max-w-full"
+    >
+      <CodeBlockHeader>
+        <CodeBlockTitle title={label}>
+          <Workflow aria-hidden="true" /> {label}
+        </CodeBlockTitle>
+        <CodeBlockActions>
+          {svg && (
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              aria-label={
+                sourceView ? messages.showDiagram : messages.showDiagramSource
+              }
+              title={
+                sourceView ? messages.showDiagram : messages.showDiagramSource
+              }
+              aria-pressed={sourceView}
+              onClick={() => setSourceView(!sourceView)}
+            >
+              {sourceView ? (
+                <Eye aria-hidden="true" />
+              ) : (
+                <CodeXml aria-hidden="true" />
+              )}
+            </Button>
+          )}
+          {image && (
+            <Dialog>
+              <DialogTrigger
+                render={<Button variant="ghost" size="icon-xs" />}
+                aria-label={messages.enlargeDiagram}
+                title={messages.enlargeDiagram}
+              >
+                <Maximize2 aria-hidden="true" />
+              </DialogTrigger>
+              <DialogContent
+                data-rdx-mermaid-dialog
+                className="flex max-h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)] max-w-6xl flex-col gap-2 sm:max-w-6xl"
+              >
+                <DialogTitle className="pr-8">
+                  {title || messages.diagram}
+                </DialogTitle>
+                <DialogDescription className="sr-only">
+                  {messages.imagePreviewDescription}
+                </DialogDescription>
+                <div
+                  role="region"
+                  aria-label={messages.diagram}
+                  tabIndex={0}
+                  className="min-h-0 overflow-auto rounded-md p-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <img
+                    src={image}
+                    alt={description}
+                    className="mx-auto h-auto max-w-none"
+                  />
+                </div>
+              </DialogContent>
+            </Dialog>
+          )}
+          {error && (
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              aria-label={messages.tryAgain}
+              title={messages.tryAgain}
+              onClick={() => setAttempt(attempt + 1)}
+            >
+              <RotateCw aria-hidden="true" />
+            </Button>
+          )}
+          {showSource && (
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              className="md:hidden"
+              aria-label={messages.wrapCode}
+              title={messages.wrapCode}
+              aria-pressed={wrap}
+              onClick={() => setWrap(!wrap)}
+            >
+              <WrapText aria-hidden="true" />
+            </Button>
+          )}
+          <CodeBlockCopyButton value={value} />
+        </CodeBlockActions>
+      </CodeBlockHeader>
+      {error && (
+        <p role="status" className="px-3 pt-2 text-xs text-muted-foreground">
+          {messages.diagramError}
+        </p>
+      )}
+      {!current && visible && (
+        <p role="status" className="px-3 pt-2 text-xs text-muted-foreground">
+          {messages.diagramLoading}
+        </p>
+      )}
+      {showSource ? (
+        <CodeBlockContent
+          {...preProps}
+          wrap={wrap}
+          lineNumbers={lineNumbers}
+          startLine={startLine}
+        >
+          {value}
+        </CodeBlockContent>
+      ) : (
+        <div
+          role="region"
+          aria-label={title || messages.diagram}
+          tabIndex={0}
+          data-rdx-mermaid-preview
+          className="min-w-0 overflow-auto p-4 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+        >
+          <img
+            src={image}
+            alt={description}
+            className="mx-auto h-auto max-w-full"
+          />
+        </div>
+      )}
+    </CodeBlock>
+  )
+}