@clidey/dory 1.0.7 → 1.9.0

package/src/mdx/preprocess.ts

@@ -0,0 +1,61 @@
+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 {
+  let processed = content;
+  const frontmatter = processed.match(/^---\n([\s\S]*?)\n---\n?/);
+  if (frontmatter) processed = processed.slice(frontmatter[0].length);
+
+  // The page frame already renders the frontmatter title. Remove only its
+  // matching Markdown heading; headings in examples and other titles survive.
+  const rawTitle = frontmatter?.[1].match(/^title:\s*(.+?)\s*$/m)?.[1];
+  let title = rawTitle;
+  if (rawTitle?.startsWith('"')) {
+    try { title = JSON.parse(rawTitle) as string; } catch { /* Keep unfamiliar YAML unchanged. */ }
+  } else if (rawTitle?.startsWith("'") && rawTitle.endsWith("'")) {
+    title = rawTitle.slice(1, -1).replace(/''/g, "'");
+  }
+  if (title) {
+    let fence = '';
+    let removed = false;
+    processed = processed.split('\n').filter(line => {
+      const delimiter = line.trim().match(/^(`{3,}|~{3,})/);
+      if (delimiter) {
+        if (!fence) fence = delimiter[1];
+        else if (delimiter[1][0] === fence[0] && delimiter[1].length >= fence.length) fence = '';
+        return true;
+      }
+      if (fence || removed) return true;
+      const heading = line.match(/^#\s+(.+?)\s*#*\s*$/);
+      if (heading?.[1] !== title) return true;
+      removed = true;
+      return false;
+    }).join('\n');
+  }
+
+  const strayYaml = processed.match(/^```yaml\n([\s\S]*?)\n---\n?/);
+  if (strayYaml) processed = processed.slice(strayYaml[0].length);
+
+  const transformed = preprocessMdxTags().transform(processed, fileName);
+  processed = typeof transformed === 'string' ? transformed : transformed?.code ?? processed;
+
+  let inCodeBlock = false;
+  return processed.split('\n').map(line => {
+    if (line.trim().startsWith('```')) {
+      inCodeBlock = !inCodeBlock;
+      return line;
+    }
+    if (inCodeBlock) return line;
+
+    let output = '';
+    let lastIndex = 0;
+    const inlineCode = /`([^`]+)`/g;
+    let match: RegExpExecArray | null;
+    while ((match = inlineCode.exec(line)) !== null) {
+      output += line.slice(lastIndex, match.index).replace(/<(https?:\/\/[^\s>]+)>/g, '[$1]($1)');
+      output += match[0];
+      lastIndex = match.index + match[0].length;
+    }
+    return output + line.slice(lastIndex).replace(/<(https?:\/\/[^\s>]+)>/g, '[$1]($1)');
+  }).join('\n');
+}

package/src/mdx/processor.ts

@@ -1,6 +1,6 @@
 import { compile } from '@mdx-js/mdx';
-import { preprocessMdxTags } from '../plugins/sanitize';
-import { getMdxConfig } from '../config/mdx';
+import { preprocessMdxSource } from './preprocess.ts';
+import { getMdxConfig } from '../config/mdx.ts';
 
 export interface ProcessMdxOptions {
   isDevelopment?: boolean;
@@ -25,101 +25,9 @@ export async function preprocessMdxContent(
   error?: Error;
 }> {
   try {
-    // Step 0: Strip YAML frontmatter before any processing.
-    // Frontmatter is parsed separately by the frontmatter-generator plugin.
-    let processedContent = content;
-    const frontMatterMatch = processedContent.match(/^---\n([\s\S]*?)\n---\n?/);
-    if (frontMatterMatch) {
-      processedContent = processedContent.slice(frontMatterMatch[0].length);
-    }
-
-    // Step 0b: Strip stray ```yaml metadata blocks that follow frontmatter.
-    // Some content generators produce a second YAML block (```yaml...---) after
-    // the frontmatter. This is a broken code fence (closed with --- instead of ```)
-    // that leaks metadata into the rendered page.
-    const yamlBlockMatch = processedContent.match(/^```yaml\n([\s\S]*?)\n---\n?/);
-    if (yamlBlockMatch) {
-      processedContent = processedContent.slice(yamlBlockMatch[0].length);
-    }
-
-    // Step 1: Apply preprocessor (handles MDX tags, code blocks, etc.)
-    const preprocessor = preprocessMdxTags();
-    
-    if (preprocessor.transform) {
-      const result = preprocessor.transform(processedContent, fileName);
-      if (result && typeof result === 'object' && result.code) {
-        processedContent = result.code;
-      } else if (typeof result === 'string') {
-        processedContent = result;
-      }
-    }
-    
-    // Step 2: Convert URLs in angle brackets to markdown links
-    // Handles cases like <https://example.com> which MDX would interpret as JSX
-    // But preserves them inside code blocks
-    
-    // Process line by line to handle code blocks correctly
-    const lines = processedContent.split('\n');
-    let inCodeBlock = false;
-    
-    processedContent = lines.map(line => {
-      // Check if we're entering or leaving a code block (with optional indentation)
-      if (line.trim().startsWith('```')) {
-        inCodeBlock = !inCodeBlock;
-        return line;
-      }
-      
-      // Don't process lines inside code blocks
-      if (inCodeBlock) {
-        return line;
-      }
-      
-      // For lines outside code blocks, preserve inline code
-      // More robust regex that handles inline code with potential spaces
-      // Matches: `...` including multi-line content
-      let result = '';
-      let lastIndex = 0;
-      
-      // Find all inline code spans in the line
-      const inlineCodeRegex = /`([^`]+)`/g;
-      let match;
-      
-      while ((match = inlineCodeRegex.exec(line)) !== null) {
-        // Process text before the inline code
-        const beforeCode = line.substring(lastIndex, match.index);
-        result += beforeCode.replace(/<(https?:\/\/[^\s>]+)>/g, '[$1]($1)');
-        
-        // Keep inline code as-is
-        result += match[0];
-        
-        lastIndex = match.index + match[0].length;
-      }
-      
-      // Process remaining text after last inline code (or entire line if no inline code)
-      const remainingText = line.substring(lastIndex);
-      result += remainingText.replace(/<(https?:\/\/[^\s>]+)>/g, '[$1]($1)');
-      
-      return result;
-    }).join('\n');
-    
-    // Step 3: Add any future preprocessing steps here
-    // Example: processedContent = await yourNewPreprocessor(processedContent);
-    // Example: processedContent = removeHTMLComments(processedContent);
-    // Example: processedContent = expandCustomShortcodes(processedContent);
-    // ALL preprocessing added here will automatically apply to:
-    // - CLI commands (verify:content)
-    // - Vite build (pnpm run build)
-    // - Vite dev server (pnpm run dev)
-    
-    return {
-      success: true,
-      processedContent
-    };
+    return { success: true, processedContent: preprocessMdxSource(content, fileName) };
   } catch (error) {
-    return {
-      success: false,
-      error: error as Error
-    };
+    return { success: false, error: error as Error };
   }
 }
 

package/src/mdx/source.tsx

@@ -1,5 +1,6 @@
+import { CatalogIcon } from '@clidey/ux'
 import classNames from 'classnames'
-import { ExternalLink, File } from 'lucide-react'
+
 import { useEffect, useState } from 'preact/hooks'
 import { Fence } from './fence'
 
@@ -121,7 +122,7 @@ export const Source = ({ url, branch = "main", paths }: SourceProps) => {
                                 : '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" />
+                        <CatalogIcon name="file" aria-hidden="true" className="h-3.5 w-3.5 text-muted-foreground" />
                         {path}
                         {range && <span className="text-muted-foreground">{range}</span>}
                     </button>
@@ -129,7 +130,7 @@ export const Source = ({ url, branch = "main", paths }: SourceProps) => {
             </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" />
+                    <CatalogIcon name="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>}
@@ -141,7 +142,7 @@ export const Source = ({ url, branch = "main", paths }: SourceProps) => {
                         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" />
+                        <CatalogIcon name="external" aria-hidden="true" className="h-3 w-3" />
                     </a>
                 </div>
                 {ready ? (

package/src/mdx/specimen.tsx

@@ -1,12 +1,33 @@
 import classNames from 'classnames'
 import { Children, isValidElement } from 'preact/compat'
 import { useState } from 'preact/hooks'
-import { fencePropsOf } from './code'
-import { Pre } from './fence'
+import { CopyButton, fencePropsOf } from './code'
+import { Fence, Pre } from './fence'
 
-/** Marks the props table inside a Specimen; its children render in the Props tab. */
+/** Props tab body: a PROP / DESCRIPTION header followed by <Prop> rows. */
 export function SpecimenProps({ children }: { children: preact.ComponentChildren }) {
-  return <>{children}</>
+  return (
+    <div className="dory-props">
+      <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1.7fr)] gap-6 bg-muted px-5 py-2.5 font-mono text-[11px] uppercase tracking-[0.16em] text-muted-foreground">
+        <span>Prop</span>
+        <span>Description</span>
+      </div>
+      {children}
+    </div>
+  )
+}
+
+/** One row of a Specimen's Props tab: mono name with its type underneath, and a description. */
+export function Prop({ name, type, children }: { name: string; type?: string; children: preact.ComponentChildren }) {
+  return (
+    <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1.7fr)] gap-6 border-t border-[var(--border)] px-5 py-3.5">
+      <div className="min-w-0">
+        <p className="font-mono text-[13px] font-semibold text-foreground">{name}</p>
+        {type && <p className="mt-0.5 font-mono text-xs text-[var(--primary)]">{type}</p>}
+      </div>
+      <div className="text-sm leading-relaxed text-muted-foreground [&_p]:mb-0">{children}</div>
+    </div>
+  )
 }
 
 type SpecimenTab = 'Preview' | 'Code' | 'Props'
@@ -61,8 +82,19 @@ export function Specimen({ label, children }: { label?: string; children: preact
           </div>
         )}
       </div>
-      <div role="tabpanel" className="p-5 [&>:first-child]:mt-0 [&>:last-child]:mb-0">
-        {panels[active]}
+      <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>
     </div>
   )

package/src/mdx/tabs.tsx

@@ -1,39 +1,47 @@
-import classNames from 'classnames'
+import { Tabs as UxTabs, TabsContent, TabsList, TabsTrigger } from '@clidey/ux'
 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. */
+/** UX 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)]">
+    <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()
+        }}
+      >
         {panels.map((panel, index) => (
-          <button
+          <TabsTrigger
             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,
-            })}
+            value={String(index)}
+            className="whitespace-nowrap"
           >
             {panel.props.title}
-          </button>
+          </TabsTrigger>
         ))}
-      </div>
-      <div role="tabpanel" className="pt-4 [&>:first-child]:mt-0 [&>:last-child]:mb-0">
-        {panels[active]}
-      </div>
-    </div>
+      </TabsList>
+      {panels.map((panel, index) => (
+        <TabsContent key={index} value={String(index)} className="pt-4 [&>:first-child]:mt-0 [&>:last-child]:mb-0">
+          {panel}
+        </TabsContent>
+      ))}
+    </UxTabs>
   )
 }

package/src/mdx/text.tsx

@@ -4,36 +4,36 @@ import classNames from "classnames"
 import { useState } from "preact/hooks"
 
 
-export const h1 = function H1(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
+export const h1 = function H1(props: preact.ComponentProps<'h1'>) {
   return <h1 className="dory-h1 font-heading mb-3 mt-10" {...props} />
 }
 
-export const h2 = function H2({ children, ...props }: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
+export const h2 = function H2({ children, ...props }: preact.ComponentProps<'h2'>) {
   return (
-    <h2 className="dory-h2 font-heading mb-2 mt-10" {...props}>
+    <h2 className="dory-h2 font-heading mb-4 mt-16" {...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="dory-h3 font-heading mb-2 mt-7" {...props} />
+export const h3 = function H3(props: preact.ComponentProps<'h3'>) {
+  return <h3 className="dory-h3 font-heading mb-3 mt-10" {...props} />
 }
 
-export const h4 = function H4(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
+export const h4 = function H4(props: preact.ComponentProps<'h4'>) {
   return <h4 className="dory-h4 font-heading mb-1.5 mt-5" {...props} />
 }
 
-export const h5 = function H5(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
+export const h5 = function H5(props: preact.ComponentProps<'h5'>) {
   return <h5 className="text-lg font-bold mb-2" {...props} />
 }
 
-export const h6 = function H6(props: preact.JSX.HTMLAttributes<HTMLHeadingElement>) {
+export const h6 = function H6(props: preact.ComponentProps<'h6'>) {
   return <h6 className="text-base font-bold mb-2" {...props} />
 }
 
-export const p = function P(props: preact.JSX.HTMLAttributes<HTMLParagraphElement>) {
+export const p = function P(props: preact.ComponentProps<'p'>) {
   return <p className="mb-2 inline-block" {...props} />
 }
 

package/src/mdx/try-it-panel.tsx

@@ -0,0 +1,284 @@
+import { CatalogIcon, Sheet, SheetContent, SheetTitle } from '@clidey/ux'
+import classNames from 'classnames'
+
+import { useEffect, useState } from 'preact/hooks'
+import type { Server } from './api-playground'
+import { Fence } from './fence'
+import { Tag } from './tag'
+
+/** An editable request value: a body property, a path/query parameter, or an auth credential. */
+export interface TryItField {
+  name: string
+  /** Short type shown beside the name, e.g. `string`, `integer`, `enum`. */
+  type: string
+  value: string
+  /** Where a parameter goes. Body fields leave this unset. */
+  in?: 'path' | 'query' | 'header'
+}
+
+interface TryItPanelProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  method: string
+  path: string
+  servers: Server[]
+  parameters: TryItField[]
+  body: TryItField[]
+  /** Auth headers, e.g. `{ name: 'Authorization', value: 'Bearer ' }`. */
+  auth: TryItField[]
+}
+
+interface ResponseData {
+  status: number
+  statusText: string
+  duration: number
+  body: string
+}
+
+/** Turns a form string back into JSON for its declared type; unparseable values stay strings. */
+function bodyValue(field: TryItField): unknown {
+  if (field.type === 'integer' || field.type === 'number') return Number(field.value)
+  if (field.type === 'boolean') return field.value === 'true'
+  if (field.type === 'object' || field.type.startsWith('array')) {
+    try {
+      return JSON.parse(field.value)
+    } catch {
+      return field.value
+    }
+  }
+  return field.value
+}
+
+function FieldInput({ field, onChange }: { field: TryItField; onChange: (value: string) => void }) {
+  return (
+    <label className="block">
+      <span className="flex items-baseline gap-2">
+        <span className="font-mono text-sm font-semibold text-foreground">{field.name}</span>
+        <span className="font-mono text-xs text-[var(--primary)]">{field.type}</span>
+      </span>
+      <input
+        type="text"
+        value={field.value}
+        onInput={(event) => onChange((event.target as HTMLInputElement).value)}
+        className="dory-tryit-input mt-1.5"
+      />
+    </label>
+  )
+}
+
+/**
+ * Right-hand "Try it" panel for a generated API page: server picker, a form
+ * built from the operation's body, parameters and auth, and the live response.
+ */
+export function TryItPanel({ open, onOpenChange, method, path, servers, parameters, body, auth }: TryItPanelProps) {
+  const [serverUrl, setServerUrl] = useState(servers[0]?.url ?? '')
+  const [params, setParams] = useState(parameters)
+  const [bodyFields, setBodyFields] = useState(body)
+  const [authFields, setAuthFields] = useState(auth)
+  const [headers, setHeaders] = useState<Array<{ key: string; value: string }>>([])
+  const tabs = [
+    bodyFields.length > 0 && 'Body',
+    params.length > 0 && 'Params',
+    'Headers',
+    authFields.length > 0 && 'Auth',
+  ].filter((tab): tab is string => Boolean(tab))
+  const [tab, setTab] = useState(tabs[0])
+  const [loading, setLoading] = useState(false)
+  const [response, setResponse] = useState<ResponseData | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  // A different operation (client-side navigation) starts from its own defaults.
+  useEffect(() => {
+    setParams(parameters)
+    setBodyFields(body)
+    setAuthFields(auth)
+    setResponse(null)
+    setError(null)
+  }, [method, path])
+
+  const update = (setter: typeof setParams, index: number, value: string) =>
+    setter((fields) => fields.map((field, i) => (i === index ? { ...field, value } : field)))
+
+  async function send() {
+    setLoading(true)
+    setError(null)
+    setResponse(null)
+
+    let url = `${serverUrl.replace(/\/$/, '')}${path}`
+    const query = new URLSearchParams()
+    const requestHeaders: Record<string, string> = {}
+    for (const param of params) {
+      if (param.in === 'path') url = url.replace(`{${param.name}}`, encodeURIComponent(param.value))
+      else if (param.in === 'header' && param.value) requestHeaders[param.name] = param.value
+      else if (param.value) query.set(param.name, param.value)
+    }
+    const queryString = query.toString()
+    if (queryString) url += `?${queryString}`
+    for (const field of authFields) if (field.value.trim()) requestHeaders[field.name] = field.value
+    for (const header of headers) if (header.key.trim()) requestHeaders[header.key] = header.value
+
+    const init: RequestInit = { method: method.toUpperCase(), headers: requestHeaders }
+    const filled = bodyFields.filter((field) => field.value !== '')
+    if (filled.length > 0) {
+      requestHeaders['Content-Type'] = 'application/json'
+      init.body = JSON.stringify(Object.fromEntries(filled.map((field) => [field.name, bodyValue(field)])))
+    }
+
+    const started = performance.now()
+    try {
+      const res = await fetch(url, init)
+      const text = await res.text()
+      let pretty = text
+      try {
+        pretty = JSON.stringify(JSON.parse(text), null, 2)
+      } catch {
+        // Not JSON; show the raw text.
+      }
+      setResponse({ status: res.status, statusText: res.statusText, duration: Math.round(performance.now() - started), body: pretty })
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Request failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        className="dory-tryit w-full gap-0 bg-background sm:max-w-[34rem]"
+        footer={
+          <div className="flex gap-3">
+            <button type="button" className="dory-tryit-cancel" onClick={() => onOpenChange(false)}>Cancel</button>
+            <button type="button" className="dory-tryit-send" onClick={send} disabled={loading}>
+              <CatalogIcon name="play" aria-hidden="true" className="h-3 w-3 fill-current" />
+              {loading ? 'Sending…' : 'Send request'}
+            </button>
+          </div>
+        }
+      >
+        <div className="-mx-4 -mt-4 flex items-center gap-3 border-b border-[var(--border)] px-5 py-4 pr-12">
+          <Tag>{method}</Tag>
+          <SheetTitle className="truncate font-mono text-base font-medium">{path}</SheetTitle>
+        </div>
+
+        <div className="space-y-6 px-1 pt-5">
+          {servers.length > 0 && (
+            <label className="block">
+              <span className="dory-tryit-label">Server</span>
+              <span className="relative mt-2 block">
+                <select
+                  value={serverUrl}
+                  onChange={(event) => setServerUrl((event.target as HTMLSelectElement).value)}
+                  className="dory-tryit-input appearance-none pr-9 font-sans"
+                >
+                  {servers.map((server) => (
+                    <option key={server.url} value={server.url}>
+                      {server.description ? `${server.description} · ${server.url}` : server.url}
+                    </option>
+                  ))}
+                </select>
+                <CatalogIcon name="up-down" aria-hidden="true" className="pointer-events-none absolute right-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+              </span>
+            </label>
+          )}
+
+          <div>
+            <div role="tablist" className="flex gap-5 border-b border-[var(--border)]">
+              {tabs.map((name) => (
+                <button
+                  key={name}
+                  type="button"
+                  role="tab"
+                  aria-selected={tab === name}
+                  onClick={() => setTab(name)}
+                  className={classNames('-mb-px border-b-2 pb-2 text-sm font-medium transition', {
+                    'border-[var(--primary)] text-foreground': tab === name,
+                    'border-transparent text-muted-foreground hover:text-foreground': tab !== name,
+                  })}
+                >
+                  {name}
+                </button>
+              ))}
+            </div>
+
+            <div className="space-y-4 pt-4">
+              {tab === 'Body' && bodyFields.map((field, index) => (
+                <FieldInput key={field.name} field={field} onChange={(value) => update(setBodyFields, index, value)} />
+              ))}
+              {tab === 'Params' && params.map((field, index) => (
+                <FieldInput key={`${field.in}-${field.name}`} field={field} onChange={(value) => update(setParams, index, value)} />
+              ))}
+              {tab === 'Auth' && authFields.map((field, index) => (
+                <FieldInput key={field.name} field={field} onChange={(value) => update(setAuthFields, index, value)} />
+              ))}
+              {tab === 'Headers' && (
+                <>
+                  {headers.map((header, index) => (
+                    <div key={index} className="flex gap-2">
+                      <input
+                        type="text"
+                        placeholder="Header"
+                        value={header.key}
+                        onInput={(event) => setHeaders((list) => list.map((h, i) => (i === index ? { ...h, key: (event.target as HTMLInputElement).value } : h)))}
+                        className="dory-tryit-input w-2/5"
+                      />
+                      <input
+                        type="text"
+                        placeholder="Value"
+                        value={header.value}
+                        onInput={(event) => setHeaders((list) => list.map((h, i) => (i === index ? { ...h, value: (event.target as HTMLInputElement).value } : h)))}
+                        className="dory-tryit-input flex-1"
+                      />
+                      <button
+                        type="button"
+                        aria-label="Remove header"
+                        onClick={() => setHeaders((list) => list.filter((_, i) => i !== index))}
+                        className="rounded-lg px-2 text-muted-foreground hover:text-foreground"
+                      >
+                        <CatalogIcon name="trash" className="h-4 w-4" />
+                      </button>
+                    </div>
+                  ))}
+                  <button
+                    type="button"
+                    onClick={() => setHeaders((list) => [...list, { key: '', value: '' }])}
+                    className="flex items-center gap-1.5 text-sm font-medium text-[var(--primary)]"
+                  >
+                    <CatalogIcon name="plus" className="h-3.5 w-3.5" />
+                    Add header
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+
+          <div className="pb-2">
+            <div className="flex items-center justify-between">
+              <span className="dory-tryit-label">Response</span>
+              {response && (
+                <span className="flex items-center gap-2 font-mono text-xs">
+                  <span className={classNames('font-semibold', response.status < 300 ? 'text-green-600' : response.status < 400 ? 'text-[var(--highlight)]' : 'text-[var(--destructive)]')}>
+                    {response.status} {response.statusText}
+                  </span>
+                  <span className="text-muted-foreground">{response.duration}ms</span>
+                </span>
+              )}
+            </div>
+            <div className="dory-tryit-response mt-2">
+              {error ? (
+                <p className="p-4 font-mono text-sm text-[var(--destructive)]">{error}</p>
+              ) : response ? (
+                <div className="overflow-x-auto p-4 font-mono text-[12.5px] leading-[1.7]">
+                  <Fence language="json">{response.body}</Fence>
+                </div>
+              ) : (
+                <p className="flex min-h-36 items-center justify-center text-sm text-muted-foreground">Send the request to see the response</p>
+              )}
+            </div>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}