@clidey/dory 1.0.5 → 1.0.7

package/src/mdx/fence.tsx

@@ -1,12 +1,24 @@
-import { Fragment, Suspense, useContext } from 'preact/compat'
-import { Highlight, themes } from 'prism-react-renderer'
-import { Code, CodeGroup, CodeGroupContext, supportedLanguages } from './code'
+import { Suspense, useContext } from 'preact/compat'
+import { Highlight, type PrismTheme } from 'prism-react-renderer'
+import { CodeBody, CodeFrame, CodeGroupContext, FenceHeader, fencePropsOfCode } from './code'
+import { diffBaseLanguage, isTerminalSession, parseFenceMeta, type FenceMeta } from './fence-meta'
 import { MermaidRenderer } from './mermaid'
 import { Loading } from '../components/loading'
-import { useTheme } from '@clidey/ux'
 import classNames from 'classnames'
 
-function dedent(code: string): string {
+// Colors resolve through CSS variables so one theme serves both light and dark mode.
+const codeTheme: PrismTheme = {
+  plain: { color: 'var(--foreground)', backgroundColor: 'transparent' },
+  styles: [
+    { types: ['comment', 'prolog', 'doctype', 'cdata'], style: { color: 'var(--muted-foreground)', fontStyle: 'italic' } },
+    { types: ['keyword', 'builtin', 'function', 'tag', 'selector', 'number', 'boolean', 'constant', 'property', 'class-name'], style: { color: 'var(--primary)' } },
+    { types: ['string', 'char', 'attr-value', 'url', 'regex', 'inserted'], style: { color: 'var(--dory-code-string)' } },
+    { types: ['deleted'], style: { color: 'var(--destructive)' } },
+    { types: ['punctuation', 'operator'], style: { color: 'var(--foreground)' } },
+  ],
+}
+
+export function dedent(code: string): string {
   const lines = code.replace(/^\n+/, '').replace(/\s+$/, '').split('\n');
   const indents = lines.filter(l => l.trim().length > 0).map(l => l.match(/^(\s*)/)?.[1].length ?? 0);
   const minIndent = indents.length > 0 ? Math.min(...indents) : 0;
@@ -14,17 +26,107 @@ function dedent(code: string): string {
   return lines.map(l => l.slice(minIndent)).join('\n');
 }
 
+function Line({
+  number,
+  marker,
+  highlighted,
+  children,
+}: {
+  number?: number
+  marker?: '+' | '-' | ' '
+  highlighted?: boolean
+  children: preact.ComponentChildren
+}) {
+  return (
+    <span className={classNames('dory-line', {
+      'dory-line-highlight': highlighted,
+      'dory-line-add': marker === '+',
+      'dory-line-del': marker === '-',
+    })}>
+      {number !== undefined && <span className="dory-line-number" aria-hidden="true">{number}</span>}
+      {marker !== undefined && <span className="dory-line-marker" aria-hidden="true">{marker === ' ' ? '' : marker}</span>}
+      {children}
+      {'\n'}
+    </span>
+  )
+}
+
+function TerminalLines({ code }: { code: string }) {
+  return (
+    <>
+      {code.split('\n').map((line, index) => {
+        if (!line.startsWith('$ ')) {
+          return <Line key={index}><span className="text-muted-foreground">{line}</span></Line>
+        }
+        const [command, ...args] = line.slice(2).split(' ')
+        return (
+          <Line key={index}>
+            <span className="select-none text-muted-foreground">$ </span>
+            <span className="text-[var(--primary)]">{command}</span>
+            {args.length > 0 && ` ${args.join(' ')}`}
+          </Line>
+        )
+      })}
+    </>
+  )
+}
+
+function HighlightedLines({
+  code,
+  language,
+  lineNumbers,
+  highlight,
+  markers,
+  startLine = 1,
+}: {
+  code: string
+  language: string
+  lineNumbers: boolean
+  highlight: Set<number>
+  markers?: Array<'+' | '-' | ' '>
+  startLine?: number
+}) {
+  return (
+    <Highlight code={code} language={language} theme={codeTheme}>
+      {({ tokens, getTokenProps }) => (
+        <>
+          {tokens.map((line, index) => (
+            <Line
+              key={index}
+              number={lineNumbers ? startLine + index : undefined}
+              marker={markers?.[index]}
+              highlighted={highlight.has(index + 1)}
+            >
+              {line
+                .filter((token) => !token.empty)
+                .map((token, tokenIndex) => (
+                  <span key={tokenIndex} {...getTokenProps({ token })} />
+                ))}
+            </Line>
+          ))}
+        </>
+      )}
+    </Highlight>
+  )
+}
 
+/**
+ * Renders a code fence. Diffs (`diff`, `diff-<lang>`) get per-line add/remove
+ * markers, shell fences with `$ ` prompts render as a terminal session, and
+ * fences with a filename or `{lines}` get line numbers and highlighted lines.
+ */
 export function Fence({
   children,
   language,
+  meta = parseFenceMeta(),
+  startLine,
 }: {
   children: string
   language: string
+  meta?: FenceMeta
+  /** First line number to show; forces line numbers on. */
+  startLine?: number
 }) {
-  const { theme } = useTheme();
-  const isDark = theme === 'dark' || (theme === 'system' && typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches);
-
   if (language === 'mermaid') {
     return (
       <div className="mermaid-container">
@@ -35,49 +137,58 @@ export function Fence({
     )
   }
 
-  const supportedLanguage = supportedLanguages[language as keyof typeof supportedLanguages] ?? language
+  const code = dedent(children)
+  const diffLanguage = diffBaseLanguage(language)
+
+  let body: preact.ComponentChildren
+  if (diffLanguage !== null) {
+    const lines = code.split('\n')
+    const markers = lines.map((line) => (line[0] === '+' || line[0] === '-' ? line[0] : ' '))
+    body = (
+      <HighlightedLines
+        code={lines.map((line) => line.slice(1)).join('\n')}
+        language={diffLanguage}
+        lineNumbers={false}
+        highlight={meta.highlight}
+        markers={markers}
+      />
+    )
+  } else if (isTerminalSession(language, code)) {
+    body = <TerminalLines code={code} />
+  } else {
+    body = (
+      <HighlightedLines
+        code={code}
+        language={language}
+        lineNumbers={Boolean(meta.title) || meta.highlight.size > 0 || startLine !== undefined}
+        highlight={meta.highlight}
+        startLine={startLine}
+      />
+    )
+  }
 
   return (
-    <Highlight
-      code={dedent(children)}
-      language={supportedLanguage}
-      theme={isDark ? themes.vsDark : themes.vsLight}>
-      {({ className, style, tokens, getTokenProps }) => (
-        <pre>
-          <Code className={classNames(className, "whitespace-pre-wrap")} style={{ ...style, backgroundColor: 'transparent' }} title={supportedLanguage}>
-            {tokens.map((line, lineIndex) => (
-              <Fragment key={lineIndex}>
-                {line
-                  .filter((token) => !token.empty)
-                  .map((token, tokenIndex) => (
-                    <span key={tokenIndex} {...getTokenProps({ token })} />
-                  ))}
-                {'\n'}
-              </Fragment>
-            ))}
-          </Code>
-        </pre>
-      )}
-    </Highlight>
+    <pre className="whitespace-pre-wrap">
+      <code className={`language-${language}`}>{body}</code>
+    </pre>
   )
 }
-export function Pre(props: { children: { props: { className?: string; children?: string } } }) {
-  const child = props.children?.props
-  
-  // Safely handle className that might not be a string
-  const className = child?.className || ''
-  const language = supportedLanguages[className.replace('language-', '') as keyof typeof supportedLanguages] ?? className.replace('language-', '')
-  const code = child?.children || ''
 
-  // Check if we're inside a CodeGroup context
+export function Pre(props: { children: preact.JSX.Element }) {
+  const fence = fencePropsOfCode(props.children)
   const isInCodeGroup = useContext(CodeGroupContext);
 
-  const fence = <Fence language={language}>{code}</Fence>
+  // Inside a CodeGroup the title is the tab label, not a filename, so it must not turn on line numbers.
+  const meta = isInCodeGroup ? { ...fence.meta, title: undefined } : fence.meta
+  const rendered = <Fence language={fence.language} meta={meta}>{fence.code}</Fence>
 
-  // If we're not in a CodeGroup, wrap the Fence in one
-  if (!isInCodeGroup && language !== 'mermaid') {
-    return <CodeGroup title={language}>{fence}</CodeGroup>
+  if (isInCodeGroup || fence.language === 'mermaid') {
+    return rendered
   }
 
-  return fence
-}
+  return (
+    <CodeFrame code={fence.code} header={<FenceHeader {...fence} />}>
+      <CodeBody>{rendered}</CodeBody>
+    </CodeFrame>
+  )
+}

package/src/mdx/icon-grid.tsx

@@ -0,0 +1,29 @@
+import { useNotification } from '../components/notification'
+import { Icon } from './icon'
+
+/** Grid of icon tiles. Clicking a tile copies its `<Icon icon="…" />` tag. */
+export function IconGrid({ icons, cols = 4 }: { icons: string[]; cols?: number }) {
+  const { showNotification } = useNotification()
+
+  const copy = (name: string) => {
+    const tag = `<Icon icon="${name}" />`
+    navigator.clipboard.writeText(tag).then(() => showNotification(`Copied ${tag}`))
+  }
+
+  return (
+    <div className="not-prose my-2 grid gap-3" style={{ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }}>
+      {icons.map((name) => (
+        <button
+          key={name}
+          type="button"
+          onClick={() => copy(name)}
+          title={`Copy <Icon icon="${name}" />`}
+          className="flex flex-col items-center gap-2.5 rounded-lg border border-[var(--border)] bg-muted/50 px-3 py-4 text-foreground transition hover:border-[var(--primary)] hover:bg-card"
+        >
+          <Icon icon={name} className="h-5 w-5 !stroke-current" />
+          <span className="font-mono text-[11px] text-muted-foreground">{name}</span>
+        </button>
+      ))}
+    </div>
+  )
+}

package/src/mdx/icon.tsx

@@ -42,7 +42,7 @@ export function Icon({
   if (LucideComponent) {
     return (
       <LucideComponent
-        className={classNames("stroke-black dark:stroke-white", className)}
+        className={classNames("inline-block align-[-0.2em] stroke-black dark:stroke-white", className)}
         color={color}
         size={size}
         {...rest}
@@ -66,7 +66,7 @@ export function Icon({
       return (
         <FontAwesomeIcon
           icon={[prefixes[setName] || 'fas', faIcon.iconName] as any}
-          className={classNames("stroke-black dark:stroke-white", className)}
+          className={classNames("inline-block align-[-0.2em] stroke-black dark:stroke-white", className)}
           color={color as any}
           size={size as any}
           {...rest as any}

package/src/mdx/latex.tsx

@@ -12,13 +12,15 @@ function extractText(node: React.ReactNode): string {
 
 interface LatexProps {
   children: React.ReactNode
+  /** Render inline with the surrounding text instead of as a display tile. */
+  inline?: boolean
 }
 
-export function Latex({ children }: LatexProps) {
+export function Latex({ children, inline = false }: LatexProps) {
   const expression = extractText(children).trim();
 
   if (typeof window === 'undefined') {
-    return <div className="my-4"><code>{expression}</code></div>
+    return inline ? <code>{expression}</code> : <div className="my-4"><code>{expression}</code></div>
   }
 
   const containerRef = useRef<HTMLDivElement>(null)
@@ -42,7 +44,7 @@ export function Latex({ children }: LatexProps) {
         if (!mounted || !containerRef.current) return
 
         katex.render(expression, containerRef.current, {
-          displayMode: true,
+          displayMode: !inline,
           throwOnError: false,
         })
         setIsLoading(false)
@@ -60,7 +62,11 @@ export function Latex({ children }: LatexProps) {
     return () => {
       mounted = false
     }
-  }, [expression])
+  }, [expression, inline])
+
+  if (inline) {
+    return <span ref={containerRef as unknown as preact.RefObject<HTMLSpanElement>} className="dory-latex-inline">{isLoading && expression}</span>
+  }
 
   if (error) {
     return (
@@ -86,13 +92,14 @@ export function Latex({ children }: LatexProps) {
   }
 
   return (
-    <div className="my-4">
+    <div className="dory-latex not-prose my-5 rounded-lg border border-[var(--border)] bg-muted/50 px-5 pb-5 pt-3">
+      <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-blue-500" />
+          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[var(--primary)]" />
         </div>
       )}
-      <div ref={containerRef} className={isLoading ? 'hidden' : ''} />
+      <div ref={containerRef} className={isLoading ? 'hidden' : 'mt-3 text-center'} />
     </div>
   )
 }

package/src/mdx/list.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from 'preact/jsx-runtime';
 
-export const UnorderedList = (props: JSX.IntrinsicElements['ul']) => <ul className="list-disc list-inside my-2" {...props} />;
+export const UnorderedList = (props: JSX.IntrinsicElements['ul']) => <ul className="dory-ul my-3 space-y-1.5" {...props} />;
 
-export const OrderedList = (props: JSX.IntrinsicElements['ol']) => <ol className="list-decimal list-inside my-2" {...props} />;
+export const OrderedList = (props: JSX.IntrinsicElements['ol']) => <ol className="dory-ol my-3 space-y-1.5" {...props} />;
 
-export const ListItem = (props: JSX.IntrinsicElements['li']) => <li className="ml-4 mt-2" {...props} />;
+export const ListItem = (props: JSX.IntrinsicElements['li']) => <li className="relative pl-7" {...props} />;

package/src/mdx/mdx.tsx

@@ -19,8 +19,14 @@ export { ResponseField, Properties, Property } from './open-api';
 export { Steps, Step } from './step';
 export { Table as table, Th as th, Td as td } from './table';
 export { UnorderedList as ul, OrderedList as ol, ListItem as li } from './list';
+export { UnorderedList, OrderedList, ListItem } from './list';
 export { AsyncAPI } from './async-api';
 export { Source } from './source';
+export { Specimen, SpecimenProps } from './specimen';
+export { Chip, ChipGroup } from './chip';
+export { Tabs, Tab } from './tabs';
+export { IconGrid } from './icon-grid';
+export { TypeScale } from './type-scale';
 
 // Lazy-loaded heavy components — only downloaded when a page uses them.
 // SSR guard at this level prevents Suspense from rendering in Node.js
@@ -65,6 +71,6 @@ export const wrapper = ({ children }: { children: preact.ComponentChildren }) =>
 };
 
 
-export const hr = () => <hr className="my-4 text-muted-foreground/25 dark:text-gray-200/25" />;
+export const hr = () => <hr className="my-6 border-0 border-t border-[var(--border)]" />;
 
 export const br = () => <br />;

package/src/mdx/mermaid.tsx

@@ -25,14 +25,90 @@ function hashContent(content: string): string {
     return hash.toString(16);
 }
 
+/** Reads the site palette so diagrams follow dory.json colors in both themes. */
+function paletteThemeVariables() {
+    const css = getComputedStyle(document.documentElement)
+    const v = (name: string) => css.getPropertyValue(name).trim()
+    return {
+        fontFamily: v('--font-body') || 'inherit',
+        fontSize: '13px',
+        background: v('--card'),
+        mainBkg: v('--accent'),
+        primaryColor: v('--accent'),
+        primaryTextColor: v('--foreground'),
+        primaryBorderColor: v('--primary'),
+        secondaryColor: v('--muted'),
+        secondaryTextColor: v('--foreground'),
+        secondaryBorderColor: v('--border'),
+        tertiaryColor: v('--card'),
+        tertiaryTextColor: v('--foreground'),
+        tertiaryBorderColor: v('--border'),
+        lineColor: v('--muted-foreground'),
+        textColor: v('--foreground'),
+        titleColor: v('--foreground'),
+        nodeBorder: v('--primary'),
+        nodeTextColor: v('--foreground'),
+        clusterBkg: v('--muted'),
+        clusterBorder: v('--border'),
+        edgeLabelBackground: v('--card'),
+        actorBkg: v('--accent'),
+        actorBorder: v('--primary'),
+        actorTextColor: v('--foreground'),
+        actorLineColor: v('--border'),
+        signalColor: v('--foreground'),
+        signalTextColor: v('--foreground'),
+        labelBoxBkgColor: v('--muted'),
+        labelBoxBorderColor: v('--border'),
+        noteBkgColor: v('--muted'),
+        noteBorderColor: v('--border'),
+        noteTextColor: v('--foreground'),
+        attributeBackgroundColorOdd: v('--card'),
+        attributeBackgroundColorEven: v('--muted'),
+        pie1: v('--primary'),
+        pie2: v('--highlight'),
+        pie3: v('--success-muted'),
+        pie4: v('--accent'),
+        pie5: v('--muted'),
+        pieStrokeColor: v('--card'),
+        pieTitleTextColor: v('--foreground'),
+        pieLegendTextColor: v('--foreground'),
+        pieSectionTextColor: v('--foreground'),
+        git0: v('--primary'),
+        git1: v('--brand-readable'),
+        git2: v('--highlight'),
+        git3: v('--muted-foreground'),
+        gitBranchLabel0: v('--card'),
+        gitBranchLabel1: v('--card'),
+        commitLabelColor: v('--foreground'),
+        commitLabelBackground: v('--muted'),
+        tagLabelBackground: v('--accent'),
+        tagLabelBorder: v('--primary'),
+        tagLabelColor: v('--foreground'),
+        nodePadding: 16,
+        nodeBorderRadius: 6,
+    }
+}
+
+/** Bumps whenever the html class list changes, so diagrams re-render on theme switch. */
+function useThemeVersion() {
+    const [version, setVersion] = useState(0)
+    useEffect(() => {
+        const observer = new MutationObserver(() => setVersion((n) => n + 1))
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+        return () => observer.disconnect()
+    }, [])
+    return version
+}
+
 export function MermaidRenderer({ content }: { content: string }) {
+    const themeVersion = useThemeVersion()
     const mermaidRef = useRef<HTMLDivElement>(null)
     const [isFullscreen, setIsFullscreen] = useState(false)
     const [isLoaded, setIsLoaded] = useState(false)
     const [error, setError] = useState<string | null>(null)
     const [isValid, setIsValid] = useState<boolean | null>(null)
 
-    const diagramId = useMemo(() => `mermaid-${hashContent(content)}`, [content])
+    const diagramId = useMemo(() => `mermaid-${hashContent(content)}-${themeVersion}`, [content, themeVersion])
 
     useEffect(() => {
         let mounted = true
@@ -44,15 +120,9 @@ export function MermaidRenderer({ content }: { content: string }) {
                 if (!mounted || !mermaidRef.current) return
 
                 mermaid.initialize({
-                    startOnLoad: true,
+                    startOnLoad: false,
                     theme: 'base',
-                    themeVariables: {
-                        fontSize: '14px',
-                        nodePadding: 20,
-                        notePadding: 15,
-                        padding: 10,
-                        nodeBorderRadius: 8,
-                    },
+                    themeVariables: paletteThemeVariables(),
                     flowchart: {
                         nodeSpacing: 50,
                         rankSpacing: 80,
@@ -105,7 +175,7 @@ export function MermaidRenderer({ content }: { content: string }) {
         return () => {
             mounted = false
         }
-    }, [content, diagramId])
+    }, [content, diagramId, themeVersion])
 
     const toggleFullscreen = () => {
         setIsFullscreen(!isFullscreen)
@@ -144,7 +214,7 @@ export function MermaidRenderer({ content }: { content: string }) {
             )}
             <div
                 ref={mermaidRef}
-                className={classNames('mermaid cursor-pointer transition-all duration-300 rounded-lg p-4 bg-white', {
+                className={classNames('mermaid cursor-pointer transition-all duration-300 rounded-lg p-4 bg-card', {
                     'fixed inset-0 z-50 bg-black/90 flex items-center justify-center backdrop-blur-sm': isFullscreen,
                     'opacity-0': !isLoaded,
                     'opacity-100': isLoaded,