@clidey/dory 1.0.5 → 1.0.6

package/src/mdx/source.tsx

@@ -1,3 +1,8 @@
+import classNames from 'classnames'
+import { ExternalLink, File } from 'lucide-react'
+import { useEffect, useState } from 'preact/hooks'
+import { Fence } from './fence'
+
 type PathRange = {
     path: string;
     range?: string;
@@ -9,50 +14,153 @@ type SourceProps = {
     paths: PathRange[];
 };
 
+type Host = 'github' | 'gitlab' | 'bitbucket' | 'other'
+
+function hostOf(url: string): Host {
+    if (url.includes('github.com')) return 'github'
+    if (url.includes('gitlab.com')) return 'gitlab'
+    if (url.includes('bitbucket.org')) return 'bitbucket'
+    return 'other'
+}
+
+const hostNames: Record<Host, string> = { github: 'GitHub', gitlab: 'GitLab', bitbucket: 'Bitbucket', other: 'source' }
+
+/** Browser URL for a file, with the host's line-range anchor when a range is given. */
+export function sourceUrl(url: string, branch: string, path: string, range?: string): string {
+    const host = hostOf(url)
+    const base = host === 'github' ? `${url}/blob/${branch}/${path}`
+        : host === 'gitlab' ? `${url}/-/blob/${branch}/${path}`
+        : host === 'bitbucket' ? `${url}/src/${branch}/${path}`
+        : url
+    if (!range || host === 'other') return base
+    const [start, end] = range.split('-')
+    if (host === 'bitbucket') return `${base}#lines-${start}${end ? `:${end}` : ''}`
+    return `${base}#L${start}${end ? `-L${end}` : ''}`
+}
+
+/** Raw file URL used to fetch the excerpt, or null when the host has no raw endpoint. */
+export function rawUrl(url: string, branch: string, path: string): string | null {
+    const host = hostOf(url)
+    const repo = url.replace(/\/+$/, '').split('/').slice(-2).join('/')
+    if (host === 'github') return `https://raw.githubusercontent.com/${repo}/${branch}/${path}`
+    if (host === 'gitlab') return `${url}/-/raw/${branch}/${path}`
+    if (host === 'bitbucket') return `${url}/raw/${branch}/${path}`
+    return null
+}
+
+const languages: Record<string, string> = {
+    ts: 'typescript', tsx: 'tsx', js: 'javascript', jsx: 'jsx', mjs: 'javascript', json: 'json', go: 'go', py: 'python',
+    rs: 'rust', java: 'java', rb: 'ruby', php: 'php', sh: 'bash', yml: 'yaml', yaml: 'yaml', toml: 'toml', md: 'markdown',
+    mdx: 'markdown', css: 'css', scss: 'css', html: 'html', sql: 'sql', graphql: 'graphql',
+}
+
+function languageOf(path: string): string {
+    const ext = path.split('.').pop()?.toLowerCase() ?? ''
+    return languages[ext] ?? 'markup'
+}
+
+const previewLines = 30
+
+/** Lines for the given range, or the first 30 lines (with the total) when no range is set. */
+function sliceRange(text: string, range?: string): { code: string; startLine: number; total: number } {
+    const lines = text.replace(/\r\n/g, '\n').replace(/\n$/, '').split('\n')
+    if (!range) return { code: lines.slice(0, previewLines).join('\n'), startLine: 1, total: lines.length }
+    const [start, end] = range.split('-').map((n) => parseInt(n, 10))
+    const from = Math.max(1, start || 1)
+    const to = end || from
+    return { code: lines.slice(from - 1, to).join('\n'), startLine: from, total: lines.length }
+}
+
+/**
+ * Links to files in a repository and previews the referenced lines inline.
+ * Each path is a chip; the selected chip's excerpt is fetched from the host's
+ * raw endpoint and shown with line numbers. When the fetch fails, the frame
+ * keeps the link to open the file on the host.
+ */
 export const Source = ({ url, branch = "main", paths }: SourceProps) => {
-    const createSourceUrl = (path: string, range?: string) => {
-        if (!range) {
-            if (url.includes('github.com')) {
-                return `${url}/blob/${branch}/${path}`;
-            } else if (url.includes('bitbucket.org')) {
-                return `${url}/src/${branch}/${path}`;
-            } else if (url.includes('gitlab.com')) {
-                return `${url}/-/blob/${branch}/${path}`;
-            }
-            return url;
-        }
-
-        const [start, end] = range.split('-');
-
-        if (url.includes('github.com')) {
-            return `${url}/blob/${branch}/${path}#L${start}${end ? `-L${end}` : ''}`;
-        } else if (url.includes('bitbucket.org')) {
-            return `${url}/src/${branch}/${path}#lines-${start}${end ? `:${end}` : ''}`;
-        } else if (url.includes('gitlab.com')) {
-            return `${url}/-/blob/${branch}/${path}#L${range.replace('-', '-')}`;
-        }
-
-        return url;
-    };
+    const [selected, setSelected] = useState(0)
+    const [excerpt, setExcerpt] = useState<{ key: string; code: string; startLine: number; total: number } | null>(null)
+    const [failed, setFailed] = useState(false)
+
+    const host = hostOf(url)
+    const repo = url.replace(/\/+$/, '').split('/').slice(-2).join('/')
+    const current = paths[selected] ?? paths[0]
+    const key = `${current?.path}@${current?.range ?? ''}`
+
+    useEffect(() => {
+        if (!current) return
+        const raw = rawUrl(url, branch, current.path)
+        setFailed(false)
+        if (!raw) { setFailed(true); return }
+        let cancelled = false
+        fetch(raw)
+            .then((response) => (response.ok ? response.text() : Promise.reject(new Error(String(response.status)))))
+            .then((text) => { if (!cancelled) setExcerpt({ key, ...sliceRange(text, current.range) }) })
+            .catch(() => { if (!cancelled) setFailed(true) })
+        return () => { cancelled = true }
+    }, [url, branch, key])
+
+    if (!current) return null
+    const openLabel = `Open on ${hostNames[host]}`
+    const ready = excerpt?.key === key
 
     return (
-        <div>
-            <p className="text-sm text-foreground dark:text-white">Sources:</p>
-            <ul className="list-none pl-0 flex flex-wrap gap-2 mt-2">
-                {paths.map(({ path, range }) => (
-                    <li key={path + (range || '')}>
-                        <a
-                            href={createSourceUrl(path, range)}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="rounded px-3 py-1 font-mono text-sm text-foreground/80 hover:opacity-80 transition-colors border border-border"
-                        >
-                            {path}
-                            {range && <span className="ml-2 opacity-70">{range}</span>}
-                        </a>
-                    </li>
+        <div className="dory-source not-prose my-5">
+            <p className="mb-2.5 font-mono text-[11px] uppercase tracking-[0.16em] text-muted-foreground">Sources</p>
+            <div className="flex flex-wrap gap-2">
+                {paths.map(({ path, range }, index) => (
+                    <button
+                        key={path + (range || '')}
+                        type="button"
+                        onClick={() => setSelected(index)}
+                        aria-pressed={index === selected}
+                        className={classNames(
+                            'inline-flex items-center gap-2 rounded-md border px-3 py-1.5 font-mono text-xs transition',
+                            index === selected
+                                ? 'border-[var(--primary)] bg-accent text-foreground'
+                                : 'border-[var(--border)] bg-muted text-foreground hover:border-[var(--primary)]',
+                        )}
+                    >
+                        <File aria-hidden="true" className="h-3.5 w-3.5 text-muted-foreground" />
+                        {path}
+                        {range && <span className="text-muted-foreground">{range}</span>}
+                    </button>
                 ))}
-            </ul>
+            </div>
+            <div className="dory-code mt-3 overflow-hidden rounded-lg border border-[var(--border)] bg-card">
+                <div className="flex min-h-10 items-center gap-2 border-b border-[var(--border)] bg-muted px-4">
+                    <File aria-hidden="true" className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                    <p className="mr-auto truncate font-mono text-xs text-foreground">
+                        {repo} · {current.path}
+                        {current.range && <span className="ml-2 text-muted-foreground">{current.range}</span>}
+                    </p>
+                    <a
+                        href={sourceUrl(url, branch, current.path, current.range)}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex shrink-0 items-center gap-1 text-xs font-medium text-[var(--primary)] hover:underline"
+                    >
+                        {openLabel}
+                        <ExternalLink aria-hidden="true" className="h-3 w-3" />
+                    </a>
+                </div>
+                {ready ? (
+                    <>
+                        <div className="overflow-x-auto py-3 pl-4 pr-12 font-mono text-[12.5px] leading-[1.7]">
+                            <Fence language={languageOf(current.path)} startLine={excerpt.startLine}>{excerpt.code}</Fence>
+                        </div>
+                        {!current.range && excerpt.total > previewLines && (
+                            <p className="border-t border-[var(--border)] px-4 py-2 font-mono text-[11px] text-muted-foreground">
+                                Showing lines 1–{previewLines} of {excerpt.total}
+                            </p>
+                        )}
+                    </>
+                ) : (
+                    <p className="px-4 py-6 text-center text-sm text-muted-foreground">
+                        {failed ? `Preview unavailable. ${openLabel} to read the file.` : 'Loading excerpt…'}
+                    </p>
+                )}
+            </div>
         </div>
     );
 };

package/src/mdx/specimen.tsx

@@ -0,0 +1,69 @@
+import classNames from 'classnames'
+import { Children, isValidElement } from 'preact/compat'
+import { useState } from 'preact/hooks'
+import { fencePropsOf } from './code'
+import { Pre } from './fence'
+
+/** Marks the props table inside a Specimen; its children render in the Props tab. */
+export function SpecimenProps({ children }: { children: preact.ComponentChildren }) {
+  return <>{children}</>
+}
+
+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 isPropsBlock(child: preact.ComponentChild): boolean {
+  return isValidElement(child) && (child as preact.VNode).type === SpecimenProps
+}
+
+/**
+ * Framed component example with Preview / Code / Props tabs.
+ * An ```mdx 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 }) {
+  const items = Children.toArray(children)
+  const code = items.filter(isMdxSource)
+  const props = items.filter(isPropsBlock)
+  const preview = items.filter((child) => !isMdxSource(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="p-5 [&>:first-child]:mt-0 [&>:last-child]:mb-0">
+        {panels[active]}
+      </div>
+    </div>
+  )
+}

package/src/mdx/step.tsx

@@ -4,38 +4,30 @@ import { Children } from "preact/compat"
 export function Steps({ children }: { children: preact.ComponentChildren }) {
   const steps = Children.toArray(children) as preact.ComponentChildren[];
   return (
-    <nav aria-label="Progress" className="py-16">
-      <div className="overflow-hidden">
-        {steps.map((step, stepIdx) => {
-          const stepElement = Children.toArray(step)[0] as preact.JSX.Element;
-          return (
-            <div key={stepIdx} className={classNames(
-              {
-                "pb-10": stepIdx !== steps.length - 1,
-                "pb-2": stepIdx === steps.length - 1,
-              },
-              'relative'
+    <nav aria-label="Progress" className="my-6">
+      {steps.map((step, stepIdx) => {
+        const stepElement = Children.toArray(step)[0] as preact.JSX.Element;
+        const isLast = stepIdx === steps.length - 1;
+        return (
+          <div key={stepIdx} className={classNames('relative flex gap-3.5', { 'pb-6': !isLast })}>
+            {!isLast && <div aria-hidden="true" className="absolute left-[13.5px] top-9 bottom-1 w-px bg-[var(--border)]" />}
+            <span className={classNames(
+              'relative z-10 flex size-7 shrink-0 items-center justify-center rounded-md border text-xs font-semibold',
+              stepIdx === 0
+                ? 'border-transparent bg-[var(--primary)] text-white'
+                : 'border-[var(--border)] bg-muted text-foreground',
             )}>
-              <div aria-hidden="true" className="absolute top-10 left-4 h-full w-[0.5px]" style={{ top: '40px', height: 'calc(100% - 44px)', backgroundColor: 'color-mix(in oklch, var(--brand-foreground) 30%, transparent)' }} />
-              <div className="group relative flex items-start">
-                <span className="flex h-9 items-center">
-                  <span className="relative z-10 flex size-8 items-center justify-center rounded-full border" style={{ borderColor: 'var(--brand-foreground)', backgroundColor: 'color-mix(in oklch, var(--brand-foreground) 12%, transparent)' }}>
-                    <span className="text-sm font-medium" style={{ color: 'var(--brand-foreground)' }}>
-                      {stepIdx + 1}
-                    </span>
-                  </span>
-                </span>
-                <span className="ml-4 flex min-w-0 flex-col">
-                  <p className="text-lg font-medium text-inherit">{stepElement.props.title}</p>
-                </span>
-              </div>
-              <div className="ml-12 not-prose">
+              {stepIdx + 1}
+            </span>
+            <div className="min-w-0 flex-1 pt-0.5">
+              <p className="font-heading text-[15px] font-semibold tracking-tight text-foreground">{stepElement.props.title}</p>
+              <div className="not-prose mt-0.5 text-muted-foreground">
                 {stepElement.props.children}
               </div>
             </div>
-          )
-        })}
-      </div>
+          </div>
+        )
+      })}
     </nav>
   )
 }
@@ -47,5 +39,5 @@ export function Step({
   title?: string;
   children: preact.ComponentChildren
 }) {
-  return <p className='text-sm'>{children}</p>
-}
+  return <p className='leading-relaxed'>{children}</p>
+}

package/src/mdx/table.tsx

@@ -1,20 +1,15 @@
 import type { JSX } from 'preact/jsx-runtime';
-import {
-  Table as UXTable,
-  TableHead,
-  TableCell
-} from '@clidey/ux'
 
 export const Table = (props: JSX.IntrinsicElements['table']) => (
-  <div className="overflow-x-auto rounded-lg my-8">
-    <UXTable {...props} />
+  <div className="dory-table my-5 overflow-x-auto rounded-lg border border-[var(--border)] bg-card">
+    <table className="w-full border-collapse text-left" {...props} />
   </div>
 );
 
 export const Th = (props: JSX.IntrinsicElements['th']) => (
-  <TableHead {...props} />
+  <th className="bg-muted px-3.5 py-2 font-mono text-[11px] font-normal uppercase tracking-[0.16em] text-muted-foreground" {...props} />
 );
 
 export const Td = (props: JSX.IntrinsicElements['td']) => (
-  <TableCell {...props} />
+  <td className="border-t border-[var(--border)] px-3.5 py-2.5 align-top text-[13px] text-muted-foreground first:font-semibold first:text-foreground" {...props} />
 );

package/src/mdx/tabs.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames'
+import { Children, isValidElement } from 'preact/compat'
+import { useState } from 'preact/hooks'
+
+/** One tab panel inside <Tabs>. Renders its children when active. */
+export function Tab({ children }: { title: string; children: preact.ComponentChildren }) {
+  return <>{children}</>
+}
+
+/** Underlined tab strip for any MDX content, e.g. several diagrams of one thing. */
+export function Tabs({ children }: { children: preact.ComponentChildren }) {
+  const panels = Children.toArray(children).filter(isValidElement) as preact.VNode<{ title: string }>[]
+  const [active, setActive] = useState(0)
+
+  return (
+    <div className="dory-tabs not-prose my-5">
+      <div role="tablist" className="flex gap-5 border-b border-[var(--border)]">
+        {panels.map((panel, index) => (
+          <button
+            key={index}
+            type="button"
+            role="tab"
+            aria-selected={active === index}
+            onClick={() => setActive(index)}
+            className={classNames('-mb-px border-b-2 pb-2.5 pt-1 text-sm font-medium transition', {
+              'border-[var(--primary)] text-foreground': active === index,
+              'border-transparent text-muted-foreground hover:text-foreground': active !== index,
+            })}
+          >
+            {panel.props.title}
+          </button>
+        ))}
+      </div>
+      <div role="tabpanel" className="pt-4 [&>:first-child]:mt-0 [&>:last-child]:mb-0">
+        {panels[active]}
+      </div>
+    </div>
+  )
+}

package/src/mdx/tag.tsx

@@ -1,25 +1,19 @@
-import { Badge } from '@clidey/ux'
 import classNames from 'classnames'
 
-const valueColorMap = {
-  GET: 'default',
-  POST: 'secondary',
-  PUT: 'outline',
-  DELETE: 'destructive',
-} as const
-
 const customColorClasses = {
-  emerald: 'bg-emerald-400/10 text-emerald-500 dark:text-emerald-400 border-emerald-300 dark:border-emerald-400/30',
-  sky: 'bg-sky-400/10 text-sky-500 dark:text-sky-400 border-sky-300 dark:border-sky-400/30',
-  amber: 'bg-amber-400/10 text-amber-500 dark:text-amber-400 border-amber-300 dark:border-amber-400/30',
-  rose: 'bg-rose-50 text-red-500 dark:bg-rose-400/10 dark:text-rose-400 border-rose-200 dark:border-rose-500/20',
-  zinc: 'bg-zinc-50 text-zinc-500 dark:bg-zinc-400/10 dark:text-zinc-400 border-zinc-200 dark:border-zinc-500/20',
+  emerald: 'bg-[var(--success-muted)] text-foreground border-transparent',
+  sky: 'bg-accent text-[var(--primary)] border-transparent',
+  amber: 'bg-transparent text-[var(--brand-readable,#B65401)] border-current',
+  rose: 'bg-transparent text-red-700 dark:text-red-400 border-current',
+  zinc: 'bg-transparent text-muted-foreground border-border',
+  yellow: 'bg-[var(--highlight)] text-[var(--highlight-foreground)] border-transparent',
 }
 
 const methodColors: Record<string, keyof typeof customColorClasses> = {
-  GET: 'emerald',
-  POST: 'sky',
+  GET: 'sky',
+  POST: 'emerald',
   PUT: 'amber',
+  PATCH: 'amber',
   DELETE: 'rose',
 }
 
@@ -35,19 +29,17 @@ export function Tag({
   className?: string
 }) {
   const colorKey = color || methodColors[children] || 'zinc'
-  const badgeVariant = valueColorMap[children as keyof typeof valueColorMap] || 'outline'
 
   return (
-    <Badge
-      variant={badgeVariant}
+    <span
       className={classNames(
-        'font-mono text-[0.625rem]/6 font-semibold',
+        'mr-1.5 inline-flex w-fit items-center rounded-[5px] border font-mono font-semibold align-middle',
+        variant === 'small' ? 'px-1.5 py-0 text-[0.625rem]/5' : 'px-2 py-px text-[11px]/5',
         customColorClasses[colorKey],
-        variant === 'small' && 'px-1 py-0',
         className,
       )}
     >
       {children}
-    </Badge>
+    </span>
   )
 }

package/src/mdx/text.tsx

@@ -1,22 +1,28 @@
 import { cn } from "@clidey/ux"
+import { withBase } from '../utils/base-path';
 import classNames from "classnames"
 import { useState } from "preact/hooks"
 
 
 export const h1 = function H1(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
-  return <h1 className="text-4xl font-bold mb-4 mt-12" {...props} />
+  return <h1 className="dory-h1 font-heading mb-3 mt-10" {...props} />
 }
 
-export const h2 = function H2(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
-  return <h2 className="text-3xl font-bold mb-3 mt-10" {...props} />
+export const h2 = function H2({ children, ...props }: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h2 className="dory-h2 font-heading mb-2 mt-10" {...props}>
+      <span>{children}</span>
+      {props.id && <a href={`#${props.id}`} className="dory-anchor" aria-label="Link to this section">#</a>}
+    </h2>
+  )
 }
 
 export const h3 = function H3(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
-  return <h3 className="text-2xl font-bold mb-2 mt-8" {...props} />
+  return <h3 className="dory-h3 font-heading mb-2 mt-7" {...props} />
 }
 
 export const h4 = function H4(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
-  return <h4 className="text-xl font-bold mb-2 mt-6" {...props} />
+  return <h4 className="dory-h4 font-heading mb-1.5 mt-5" {...props} />
 }
 
 export const h5 = function H5(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
@@ -68,27 +74,29 @@ export function Col({
 
 
 export function Anchor({ children, href }: { children: preact.ComponentChildren, href: string }) {
-  return <a href={href} className="text-blue-500 hover:text-blue-600">{children}</a>
+  return <a href={withBase(href)} className="text-[var(--primary)] underline decoration-[color-mix(in_oklch,var(--primary)_40%,transparent)] underline-offset-4 hover:decoration-[var(--primary)]">{children}</a>
 }
 
 export function Image({ src, alt }: { src: string, alt: string }) {
   const [isExpanded, setIsExpanded] = useState(false);
+  const resolvedSrc = withBase(src);
 
   return (
     <>
       <img 
-        src={src} 
+        src={resolvedSrc} 
         alt={alt} 
-        className="w-full h-auto cursor-pointer" 
+        className="w-full h-auto cursor-zoom-in rounded-lg border border-[var(--border)]"
         onClick={() => setIsExpanded(true)}
       />
+      {alt && <span className="mt-1.5 block text-xs text-muted-foreground">{alt}</span>}
       {isExpanded && (
         <div 
           className="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center"
           onClick={() => setIsExpanded(false)}
         >
           <img 
-            src={src} 
+            src={resolvedSrc} 
             alt={alt} 
             className="max-h-[90vh] max-w-[90vw] object-contain"
           />

package/src/mdx/type-scale.tsx

@@ -0,0 +1,28 @@
+// Mirrors the heading scale in theme.scss (.dory-h1 to .dory-h4). Keep both in sync.
+const scale = [
+  { level: 'H1', size: 26, tracking: -0.025, weight: 700 },
+  { level: 'H2', size: 21, tracking: -0.02, weight: 700 },
+  { level: 'H3', size: 17, tracking: -0.01, weight: 700 },
+  { level: 'H4', size: 15, tracking: -0.005, weight: 600 },
+]
+
+/** Shows each heading level with its size and letter-spacing, without emitting real headings. */
+export function TypeScale() {
+  return (
+    <div className="not-prose my-2">
+      {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">
+            {level} · {size} / {tracking}
+          </span>
+          <span
+            className="font-heading leading-tight text-foreground"
+            style={{ fontSize: `${size}px`, letterSpacing: `${tracking}em`, fontWeight: weight }}
+          >
+            Heading {level.slice(1)}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}