@clidey/dory 1.9.0 → 1.10.0

package/src/mdx/latex.tsx

@@ -1,13 +1,13 @@
-import { CatalogIcon } from '@clidey/ux'
-
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'preact/hooks'
 
 function extractText(node: React.ReactNode): string {
   if (typeof node === 'string') return node;
   if (typeof node === 'number') return String(node);
   if (!node) return '';
   if (Array.isArray(node)) return node.map(extractText).join('');
-  if (typeof node === 'object' && 'props' in node) return extractText((node as any).props.children);
+  if (typeof node === 'object' && 'props' in node) {
+    return extractText((node as { props: { children?: React.ReactNode } }).props.children);
+  }
   return '';
 }
 
@@ -17,90 +17,67 @@ interface LatexProps {
   inline?: boolean
 }
 
-export function Latex({ children, inline = false }: LatexProps) {
-  const expression = extractText(children).trim();
+type RenderResult = {
+  expression: string
+  inline: boolean
+  html?: string
+  error?: string
+}
 
-  if (typeof window === 'undefined') {
-    return inline ? <code>{expression}</code> : <div className="my-4"><code>{expression}</code></div>
-  }
+/** Only KaTeX produces markup; TeX commands cannot opt into trusted HTML or URLs. */
+export function renderLatexExpression(katex: Pick<typeof import('katex').default, 'renderToString'>, expression: string, inline: boolean): string {
+  return katex.renderToString(expression, {
+    displayMode: !inline,
+    throwOnError: false,
+    trust: false,
+    maxExpand: 1000,
+  })
+}
 
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [error, setError] = useState<string | null>(null)
-  const [isLoading, setIsLoading] = useState(true)
+export function Latex({ children, inline = false }: LatexProps) {
+  const expression = extractText(children).trim()
+  const [result, setResult] = useState<RenderResult | null>(null)
+  // A changed expression immediately shows its own fallback while it loads.
+  const current = result?.expression === expression && result.inline === inline ? result : null
+  const isLoading = current === null
 
   useEffect(() => {
     let mounted = true
-
     const renderLatex = async () => {
       try {
-        setError(null)
-        setIsLoading(true)
-
         const [katexModule] = await Promise.all([
           import('katex'),
           import('katex/dist/katex.min.css'),
         ])
-        const katex = katexModule.default
-
-        if (!mounted || !containerRef.current) return
-
-        katex.render(expression, containerRef.current, {
-          displayMode: !inline,
-          throwOnError: false,
-        })
-        setIsLoading(false)
-      } catch (error) {
-        if (mounted) {
-          console.error('Error rendering LaTeX:', error)
-          setError(error instanceof Error ? error.message : 'Failed to render LaTeX')
-          setIsLoading(false)
-        }
+        const html = renderLatexExpression(katexModule.default, expression, inline)
+        if (mounted) setResult({ expression, inline, html })
+      } catch {
+        if (mounted) setResult({ expression, inline, error: 'The equation could not be rendered.' })
       }
     }
-
     renderLatex()
-
-    return () => {
-      mounted = false
-    }
+    return () => { mounted = false }
   }, [expression, inline])
 
+  // Server rendering and the first browser render use the same readable fallback.
+  // Keep KaTeX lazy, and let Preact own the markup instead of mutating a ref's DOM.
   if (inline) {
-    return <span ref={containerRef as unknown as preact.RefObject<HTMLSpanElement>} className="dory-latex-inline">{isLoading && expression}</span>
-  }
-
-  if (error) {
     return (
-      <div className="my-4">
-        <div className="flex flex-col items-center justify-center py-12 px-6 text-center bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-800/20 border-2 border-dashed border-red-300 dark:border-red-700 rounded-lg">
-          <div className="w-16 h-16 mb-4 flex items-center justify-center bg-red-100 dark:bg-red-900/30 rounded-full">
-            <CatalogIcon name="warning" className="w-8 h-8 text-red-500" />
-          </div>
-          <h3 className="text-lg font-semibold text-red-700 dark:text-red-300 mb-2">
-            LaTeX Rendering Error
-          </h3>
-          <p className="text-red-600 dark:text-red-400 mb-4 max-w-md">
-            The LaTeX expression could not be rendered.
-          </p>
-          <div className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-md p-3 max-w-md">
-            <p className="text-sm text-red-700 dark:text-red-300 font-mono break-all">
-              {error}
-            </p>
-          </div>
-        </div>
-      </div>
+      <span className="dory-latex-inline" aria-busy={isLoading} title={current?.error}>
+        {current?.html !== undefined
+          ? <span dangerouslySetInnerHTML={{ __html: current.html }} />
+          : <span data-latex-fallback>{expression}</span>}
+      </span>
     )
   }
 
   return (
-    <div className="dory-latex not-prose my-5 rounded-lg border border-[var(--border)] bg-muted/50 px-5 pb-5 pt-3">
+    <div className="dory-latex not-prose my-5 rounded-lg border border-[var(--border)] bg-muted/50 px-5 pb-5 pt-3" aria-busy={isLoading}>
       <span className="block font-mono text-[11px] uppercase tracking-[0.16em] text-muted-foreground">Display</span>
-      {isLoading && (
-        <div className="flex items-center justify-center py-4">
-          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[var(--primary)]" />
-        </div>
-      )}
-      <div ref={containerRef} className={isLoading ? 'hidden' : 'mt-3 text-center'} />
+      {current?.html !== undefined
+        ? <div className="mt-3 overflow-x-auto text-center" dangerouslySetInnerHTML={{ __html: current.html }} />
+        : <span data-latex-fallback className="block overflow-x-auto px-2 py-3 text-center font-mono text-sm text-muted-foreground">{expression}</span>}
+      {current?.error && <p role="alert" className="mt-2 text-center text-sm text-destructive">{current.error}</p>}
     </div>
   )
 }

package/src/mdx/preprocess.ts

@@ -1,7 +1,7 @@
 import { preprocessMdxTags } from '../plugins/sanitize.ts';
 
 /** Browser-safe preprocessing shared by the static build and embedded runtime. */
-export function preprocessMdxSource(content: string, fileName = 'content.mdx'): string {
+export function preprocessMdxSource(content: string, fileName = 'content.mdx', importedComponents: readonly string[] = []): string {
   let processed = content;
   const frontmatter = processed.match(/^---\n([\s\S]*?)\n---\n?/);
   if (frontmatter) processed = processed.slice(frontmatter[0].length);
@@ -36,7 +36,7 @@ export function preprocessMdxSource(content: string, fileName = 'content.mdx'):
   const strayYaml = processed.match(/^```yaml\n([\s\S]*?)\n---\n?/);
   if (strayYaml) processed = processed.slice(strayYaml[0].length);
 
-  const transformed = preprocessMdxTags().transform(processed, fileName);
+  const transformed = preprocessMdxTags(importedComponents).transform(processed, fileName);
   processed = typeof transformed === 'string' ? transformed : transformed?.code ?? processed;
 
   let inCodeBlock = false;

package/src/mdx/processor.test.ts

@@ -1,47 +1,145 @@
-import { describe, it, expect } from 'vitest';
-import { preprocessMdxContent } from './processor';
+import { describe, it, expect, test } from 'vitest';
+import { preprocessMdxContent, processMdxContent } from './processor';
+import { preprocessMdxSource } from './preprocess';
 
-async function run(input: string): Promise<string> {
-  const result = await preprocessMdxContent(input);
+const source = `import Demo, { Button as DemoButton } from './example.tsx';
+import * as Controls from './controls.tsx';
+
+<Demo />
+<DemoButton>Try it</DemoButton>
+<Controls.Toggle />
+`;
+
+test('trusted static MDX preserves default, aliased and namespace component imports', async () => {
+  const result = await processMdxContent(source);
+  expect(result.success).toBe(true);
+  expect(result.processedContent).toContain('<Demo />');
+  expect(result.processedContent).toContain('<DemoButton>Try it</DemoButton>');
+  expect(result.processedContent).toContain('<Controls.Toggle />');
+  expect(result.processedContent).not.toContain('`<Demo');
+});
+
+test('imports shown in code fences do not authorize unknown JSX components', async () => {
+  const result = await preprocessMdxContent("```tsx\nimport Demo from './example.tsx';\n```\n\n<Demo />");
   expect(result.success).toBe(true);
-  return result.processedContent!;
-}
+  expect(result.processedContent).toContain('`<Demo />`');
+});
+
+test('unimported components keep the existing text behavior in static MDX', async () => {
+  const result = await preprocessMdxContent("import Demo from './example.tsx';\n\n<Demo />\n<Unregistered />");
+  expect(result.processedContent).toContain('<Demo />');
+  expect(result.processedContent).toContain('`<Unregistered />`');
+});
+
+test('embedded preprocessing does not trust component names from MDX imports', () => {
+  const result = preprocessMdxSource(source);
+  expect(result).toContain('`<Demo />`');
+  expect(result).toContain('`<Controls.Toggle />`');
+});
+
+test('malformed import syntax reports a compile error instead of bypassing preprocessing', async () => {
+  const result = await preprocessMdxContent('import { Broken from "./example.tsx";\n\n<Broken />');
+  expect(result.success).toBe(false);
+  expect(result.error).toBeInstanceOf(Error);
+});
+
+
+test('imported components with props coexist with nested JSX and prose placeholders', async () => {
+  const result = await processMdxContent(`import Demo, { Child } from './example.tsx';
+
+<Demo start={0}><Child /></Demo>
+
+Replace <token> with your key.
+`);
+  expect(result.success).toBe(true);
+  expect(result.processedContent).toContain('<Demo start={0}><Child /></Demo>');
+});
+
+test('multiline imports work while tilde-fenced imports stay inert', async () => {
+  const result = await processMdxContent(`import {
+  Button as DemoButton,
+} from './example.tsx';
+
+<DemoButton>Try it</DemoButton>
 
-describe('preprocessMdxContent', () => {
+~~~tsx
+import Unregistered from './other.tsx';
+~~~
+
+<Unregistered />
+`);
+  expect(result.success).toBe(true);
+  expect(result.processedContent).toContain('<DemoButton>Try it</DemoButton>');
+  expect(result.processedContent).toContain('`<Unregistered />`');
+});
+
+
+describe('existing preprocessing behavior', () => {
   it('strips YAML frontmatter', async () => {
-    const output = await run('---\ntitle: Hello\n---\n# Heading\n');
-    expect(output).not.toContain('title: Hello');
-    expect(output).toContain('# Heading');
+    const result = await preprocessMdxContent('---\ntitle: Hello\n---\n# Heading\n');
+    expect(result.success).toBe(true);
+    expect(result.processedContent).not.toContain('title: Hello');
+    expect(result.processedContent).toContain('# Heading');
   });
-
-  it('converts URLs in angle brackets to markdown links', async () => {
-    const output = await run('Visit <https://example.com/docs> now');
-    expect(output).toBe('Visit [https://example.com/docs](https://example.com/docs) now');
+  it('converts angle bracket URLs while preserving fenced and inline code', async () => {
+    const result = await preprocessMdxContent('Visit <https://example.com/docs> now');
+    expect(result.processedContent).toBe('Visit [https://example.com/docs](https://example.com/docs) now');
+    const fenced = '```\ncurl <https://example.com>\n```\n';
+    expect((await preprocessMdxContent(fenced)).processedContent).toBe(fenced);
+    const inline = 'Use `<https://example.com>` here';
+    expect((await preprocessMdxContent(inline)).processedContent).toBe(inline);
   });
+});
 
-  it('preserves angle-bracket URLs inside fenced code blocks', async () => {
-    const input = '```\ncurl <https://example.com>\n```\n';
-    expect(await run(input)).toBe(input);
-  });
+test('preserves original fence-state behavior across multiple code blocks', async () => {
+  const input = ['```', '<https://in-block.com>', '```', '<https://outside.com>', '```', '<https://in-block-2.com>', '```'].join('\n');
+  const result = await preprocessMdxContent(input);
+  expect(result.success).toBe(true);
+  expect(result.processedContent).toContain('<https://in-block.com>');
+  expect(result.processedContent).toContain('<https://in-block-2.com>');
+  expect(result.processedContent).toContain('[https://outside.com](https://outside.com)');
+});
 
-  it('preserves angle-bracket URLs inside inline code', async () => {
-    const input = 'run `curl <https://example.com>` locally';
-    expect(await run(input)).toBe(input);
-  });
 
-  it('tracks code-block state across multiple fences', async () => {
-    const input = [
-      '```',
-      '<https://in-block.com>',
-      '```',
-      '<https://outside.com>',
-      '```',
-      '<https://in-block-2.com>',
-      '```',
-    ].join('\n');
-    const output = await run(input);
-    expect(output).toContain('<https://in-block.com>');
-    expect(output).toContain('<https://in-block-2.com>');
-    expect(output).toContain('[https://outside.com](https://outside.com)');
-  });
+test('comments, multiline code spans and exported strings do not register fake imports', async () => {
+  for (const prefix of [
+    "{/*\nimport Demo from './demo.tsx';\n*/}",
+    "`example\nimport Demo from './demo.tsx';\nexample`",
+    "export const example = `\nimport Demo from './demo.tsx';\n`;",
+  ]) {
+    const result = await preprocessMdxContent(prefix + '\n\n<Demo />');
+    expect(result.success).toBe(true);
+    expect(result.processedContent).toContain('`<Demo />`');
+  }
+});
+
+test('import-looking prose without an MDX ESM declaration does not register names', async () => {
+  const result = await processMdxContent("import\nDemo from './demo.tsx';\n\n<Demo />");
+  expect(result.success).toBe(true);
+  expect(result.processedContent).toContain('`<Demo />`');
+});
+
+
+test('provisional names are AST-verified alongside real JSX with props', async () => {
+  const input = [
+    "import Real from './real.tsx';",
+    '',
+    '<Real count={0}>Try it</Real>',
+    '',
+    '{/*',
+    "import Fake from './fake.tsx';",
+    '*/}',
+    '',
+    'export const example = `',
+    "import StringFake from './fake.tsx';",
+    '`;',
+    '',
+    '<Fake />',
+    '<StringFake />',
+  ].join('\n');
+  const result = await processMdxContent(input);
+  expect(result.success).toBe(true);
+  expect(result.processedContent).toContain('<Real count={0}>Try it</Real>');
+  expect(result.processedContent).toContain('`<Fake />`');
+  expect(result.processedContent).toContain('`<StringFake />`');
 });

package/src/mdx/processor.ts

@@ -1,4 +1,4 @@
-import { compile } from '@mdx-js/mdx';
+import { compile, createProcessor } from '@mdx-js/mdx';
 import { preprocessMdxSource } from './preprocess.ts';
 import { getMdxConfig } from '../config/mdx.ts';
 
@@ -25,7 +25,61 @@ export async function preprocessMdxContent(
   error?: Error;
 }> {
   try {
-    return { success: true, processedContent: preprocessMdxSource(content, fileName) };
+    const processed = preprocessMdxSource(content, fileName);
+    // Only real top-level ESM declarations register static JSX components.
+    // The browser's embedded runtime does not call this trusted build processor.
+    const importedNames = (source: string) => {
+      const names: string[] = [];
+      let declarations = 0;
+      for (const node of createProcessor().parse(source).children) {
+        if (node.type !== 'mdxjsEsm') continue;
+        for (const statement of node.data?.estree?.body ?? []) {
+          if (statement.type !== 'ImportDeclaration') continue;
+          declarations++;
+          for (const specifier of statement.specifiers) names.push(specifier.local.name);
+        }
+      }
+      return { names, declarations };
+    };
+    let importedComponents: string[] = [];
+    if (/^import(?:\s|$)/m.test(processed)) {
+      try {
+        importedComponents = importedNames(processed).names;
+      } catch {
+        // Escaped closing tags can temporarily make imported JSX with props
+        // malformed. Gather provisional names from isolated import declarations.
+        // They are never trusted until the complete document's AST verifies them.
+        const candidates = new Set<string>();
+        const lines = processed.split('\n');
+        let fence = '';
+        for (let index = 0; index < lines.length; index++) {
+          const marker = lines[index].match(/^\s*(`{3,}|~{3,})(.*)$/);
+          if (marker) {
+            if (!fence) fence = marker[1];
+            else if (marker[1][0] === fence[0] && marker[1].length >= fence.length && !marker[2].trim()) fence = '';
+            continue;
+          }
+          if (fence || !/^import(?:\s|$)/.test(lines[index])) continue;
+          for (let end = index; end < lines.length; end++) {
+            try {
+              const result = importedNames(lines.slice(index, end + 1).join('\n'));
+              if (!result.declarations) continue;
+              for (const name of result.names) candidates.add(name);
+              index = end;
+              break;
+            } catch { /* The declaration may span more lines. */ }
+          }
+        }
+        const provisional = preprocessMdxSource(content, fileName, [...candidates]);
+        importedComponents = importedNames(provisional).names;
+      }
+    }
+    return {
+      success: true,
+      processedContent: importedComponents.length
+        ? preprocessMdxSource(content, fileName, importedComponents)
+        : processed,
+    };
   } catch (error) {
     return { success: false, error: error as Error };
   }

package/src/mdx/specimen.tsx

@@ -1,6 +1,6 @@
-import classNames from 'classnames'
 import { Children, isValidElement } from 'preact/compat'
-import { useState } from 'preact/hooks'
+import { Tabs as UxTabs, TabsList, TabsTrigger, TabsContent, cn } from '@clidey/ux'
+import { handleTabKeyDown } from './tabs'
 import { CopyButton, fencePropsOf } from './code'
 import { Fence, Pre } from './fence'
 
@@ -32,8 +32,8 @@ export function Prop({ name, type, children }: { name: string; type?: string; ch
 
 type SpecimenTab = 'Preview' | 'Code' | 'Props'
 
-function isMdxSource(child: preact.ComponentChild): boolean {
-  return isValidElement(child) && (child as preact.VNode).type === Pre && fencePropsOf(child as preact.JSX.Element).language === 'mdx'
+function isSourceFence(child: preact.ComponentChild): boolean {
+  return isValidElement(child) && (child as preact.VNode).type === Pre && ['mdx', 'tsx', 'jsx'].includes(fencePropsOf(child as preact.JSX.Element).language)
 }
 
 function isPropsBlock(child: preact.ComponentChild): boolean {
@@ -42,60 +42,42 @@ function isPropsBlock(child: preact.ComponentChild): boolean {
 
 /**
  * Framed component example with Preview / Code / Props tabs.
- * An ```mdx fence becomes the Code tab, a <SpecimenProps> block becomes the
+ * An MDX, TSX, or JSX fence becomes the Code tab, a <SpecimenProps> block becomes the
  * Props tab, and everything else is the rendered preview.
  */
-export function Specimen({ label, children }: { label?: string; children: preact.ComponentChildren }) {
+export function Specimen({ label, children, padding = 'default' }: {
+  label?: string
+  children: preact.ComponentChildren
+  /** Use none only when the example supplies its own preview spacing. */
+  padding?: 'default' | 'none'
+}) {
+  const previewClassName = cn('m-0 min-w-0 [&>:first-child]:mt-0 [&>:last-child]:mb-0', padding === 'none' ? 'p-0' : 'p-5 sm:p-6')
   const items = Children.toArray(children)
-  const code = items.filter(isMdxSource)
+  const code = items.filter(isSourceFence)
   const props = items.filter(isPropsBlock)
-  const preview = items.filter((child) => !isMdxSource(child) && !isPropsBlock(child))
+  const preview = items.filter((child) => !isSourceFence(child) && !isPropsBlock(child))
 
   const tabs: SpecimenTab[] = ['Preview']
   if (code.length > 0) tabs.push('Code')
   if (props.length > 0) tabs.push('Props')
 
-  const [active, setActive] = useState<SpecimenTab>('Preview')
-  const panels: Record<SpecimenTab, preact.ComponentChildren[]> = { Preview: preview, Code: code, Props: props }
-
-  return (
-    <div className="dory-specimen not-prose my-5 overflow-hidden rounded-lg border border-[var(--border)] bg-card">
-      <div className="flex min-h-10 items-center justify-between gap-3 border-b border-[var(--border)] py-1.5 pl-4 pr-1.5">
-        <p className="truncate font-mono text-xs text-[var(--primary)]">{label}</p>
-        {tabs.length > 1 && (
-          <div role="tablist" className="flex shrink-0 rounded-md bg-muted p-0.5">
-            {tabs.map((tab) => (
-              <button
-                key={tab}
-                type="button"
-                role="tab"
-                aria-selected={active === tab}
-                onClick={() => setActive(tab)}
-                className={classNames('rounded-[5px] px-2.5 py-1 text-xs font-medium transition', {
-                  'bg-card text-foreground shadow-[0_1px_2px_rgb(14_34_64/0.08)] dark:bg-[var(--border)]': active === tab,
-                  'text-muted-foreground hover:text-foreground': active !== tab,
-                })}
-              >
-                {tab}
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-      <div role="tabpanel" className={classNames('[&>:first-child]:mt-0 [&>:last-child]:mb-0', { 'p-5': active === 'Preview' })}>
-        {active === 'Code'
-          ? code.map((child, index) => {
-              // Bare source with a copy button, without the filename frame a standalone fence gets.
-              const fence = fencePropsOf(child as preact.JSX.Element)
-              return (
-                <div key={index} className="relative px-5 py-4 font-mono text-[12.5px] leading-[1.7]">
-                  <Fence language={fence.language} meta={{ ...fence.meta, title: undefined }}>{fence.code}</Fence>
-                  <CopyButton code={fence.code} />
-                </div>
-              )
-            })
-          : panels[active]}
-      </div>
+  const renderCode = () => code.map((child, index) => {
+    const fence = fencePropsOf(child as preact.JSX.Element)
+    return <div key={index} className="relative max-h-[32rem] overflow-auto px-5 py-4 font-mono text-[12.5px] leading-[1.7]">
+      <Fence language={fence.language} meta={{ ...fence.meta, title: undefined }}>{fence.code}</Fence>
+      <CopyButton code={fence.code} />
     </div>
-  )
+  })
+  if (tabs.length === 1) return <div className="dory-specimen not-prose my-5 overflow-hidden rounded-lg border border-[var(--border)] bg-card"><div className="px-4 py-3 font-mono text-xs text-[var(--primary)]">{label}</div><div data-dory-preview data-padding={padding} className={previewClassName}>{preview}</div></div>
+  return <UxTabs defaultValue="Preview" className="dory-specimen not-prose my-5 gap-0 overflow-hidden rounded-lg border border-[var(--border)] bg-card">
+    <div className="flex min-h-12 flex-wrap items-center justify-between gap-3 border-b border-[var(--border)] py-2 pl-4 pr-2">
+      <p className="truncate font-mono text-xs text-[var(--primary)]">{label}</p>
+      <TabsList aria-label={`${label ?? 'Component'} example views`} onKeyDown={handleTabKeyDown}>
+        {tabs.map(tab => <TabsTrigger key={tab} value={tab}>{tab}</TabsTrigger>)}
+      </TabsList>
+    </div>
+    <TabsContent value="Preview" data-dory-preview data-padding={padding} className={previewClassName}>{preview}</TabsContent>
+    {code.length > 0 && <TabsContent value="Code" className="m-0 p-0">{renderCode()}</TabsContent>}
+    {props.length > 0 && <TabsContent value="Props" className="m-0 p-0">{props}</TabsContent>}
+  </UxTabs>
 }

package/src/mdx/tabs.tsx

@@ -1,6 +1,20 @@
 import { Tabs as UxTabs, TabsContent, TabsList, TabsTrigger } from '@clidey/ux'
 import { Children, isValidElement } from 'preact/compat'
 
+/** Keyboard fallback for UX tabs rendered through Preact compatibility. */
+export function handleTabKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+  // Radix roving focus does not handle arrow keys through Preact compat.
+  if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return
+  const tabs = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="tab"]:not([disabled])'))
+  const current = tabs.indexOf(event.target as HTMLButtonElement)
+  if (current < 0 || tabs.length === 0) return
+  event.preventDefault()
+  const next = event.key === 'Home' ? 0 : event.key === 'End' ? tabs.length - 1
+    : (current + (event.key === 'ArrowRight' ? 1 : -1) + tabs.length) % tabs.length
+  tabs[next].focus()
+  tabs[next].click()
+}
+
 /** One tab panel inside <Tabs>. Renders its children when active. */
 export function Tab({ children }: { title: string; children: preact.ComponentChildren }) {
   return <>{children}</>
@@ -14,18 +28,7 @@ export function Tabs({ children }: { children: preact.ComponentChildren }) {
     <UxTabs defaultValue="0" className="dory-tabs not-prose my-5">
       <TabsList
         className="max-w-full justify-start overflow-x-auto"
-        onKeyDown={(event) => {
-          // Radix roving focus does not handle arrow keys through Preact compat.
-          if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return
-          const tabs = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="tab"]:not([disabled])'))
-          const current = tabs.indexOf(event.target as HTMLButtonElement)
-          if (current < 0 || tabs.length === 0) return
-          event.preventDefault()
-          const next = event.key === 'Home' ? 0 : event.key === 'End' ? tabs.length - 1
-            : (current + (event.key === 'ArrowRight' ? 1 : -1) + tabs.length) % tabs.length
-          tabs[next].focus()
-          tabs[next].click()
-        }}
+        onKeyDown={handleTabKeyDown}
       >
         {panels.map((panel, index) => (
           <TabsTrigger

package/src/mdx/text.tsx

@@ -39,7 +39,7 @@ export const p = function P(props: preact.ComponentProps<'p'>) {
 
 export function Row({ children, cols = 1, className }: { children: preact.ComponentChildren, cols?: number, className?: string }) {
   return (
-    <div className={cn(`py-6 grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none`, className)} style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }}>
+    <div className={cn(`dory-row py-6 grid min-w-0 grid-cols-1 items-start gap-6 sm:grid-cols-[repeat(var(--dory-columns),minmax(0,1fr))] xl:max-w-none`, className)} style={{ '--dory-columns': cols }}>
       {children}
     </div>
   )
@@ -58,7 +58,7 @@ export function Col({
 }) {
   return (
     <div
-      className={classNames("[&>:first-child]:mt-0 [&>:last-child]:mb-0", {
+      className={classNames("min-w-0 [&>:first-child]:mt-0 [&>:last-child]:mb-0", {
         'xl:sticky xl:top-24': sticky,
       })}
       style={{ 

package/src/mdx/type-scale.tsx

@@ -9,10 +9,10 @@ const scale = [
 /** Shows each heading level with its size and letter-spacing, without emitting real headings. */
 export function TypeScale() {
   return (
-    <div className="not-prose my-2">
+    <div className="dory-type-scale not-prose my-2 min-w-0">
       {scale.map(({ level, size, tracking, weight }) => (
-        <div key={level} className="flex items-baseline gap-6 border-b border-[var(--border)] py-4 last:border-b-0">
-          <span className="w-36 shrink-0 font-mono text-[11px] tracking-[0.12em] text-muted-foreground">
+        <div key={level} className="flex min-w-0 flex-col items-start gap-2 border-b border-[var(--border)] py-4 last:border-b-0 sm:flex-row sm:items-baseline sm:gap-6">
+          <span className="shrink-0 font-mono text-[11px] tracking-[0.12em] text-muted-foreground sm:w-36">
             {level} · {size} / {tracking}
           </span>
           <span

package/src/plugins/sanitize.ts

@@ -117,7 +117,8 @@ function hasMatchingClosingTag(code: string, tagName: string, openingTagOffset:
 }
 
 // Allow any <[a-z][a-z0-9]*> tag inside code blocks to be left as-is (not parsed as JSX).
-export function preprocessMdxTags() {
+export function preprocessMdxTags(importedComponents: readonly string[] = []) {
+  const knownComponents = new Set([...KNOWN_COMPONENTS, ...importedComponents]);
   return {
     name: 'preprocess-mdx-tags',
     enforce: 'pre' as const,
@@ -137,7 +138,7 @@ export function preprocessMdxTags() {
         }
 
         // If unknown component, treat as text
-        if (!KNOWN_COMPONENTS.includes(tag)) {
+        if (!knownComponents.has(tag)) {
           return `\`${match}\``;
         }
         return match;
@@ -152,7 +153,7 @@ export function preprocessMdxTags() {
         }
 
         // If known component, check if it has a closing tag
-        if (KNOWN_COMPONENTS.includes(tag)) {
+        if (knownComponents.has(tag)) {
           // If it doesn't have a matching closing tag, treat it as text
           if (!hasMatchingClosingTag(processed, tag, offset)) {
             return `\`<${tag}>\``;
@@ -173,7 +174,7 @@ export function preprocessMdxTags() {
         }
 
         // If known component, check if it has a closing tag (only for opening tags)
-        if (KNOWN_COMPONENTS.includes(tag)) {
+        if (knownComponents.has(tag)) {
           // Only check for matching closing tag for opening tags
           if (!match.startsWith('</')) {
             if (!hasMatchingClosingTag(processed, tag, offset)) {