@clidey/dory 1.0.8 → 1.10.0

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>
+  )
+}

package/src/mdx/type-scale.tsx

@@ -1,18 +1,18 @@
 // 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 },
+  { level: 'H1', size: 48, tracking: -0.035, weight: 700 },
+  { level: 'H2', size: 34, tracking: -0.03, weight: 700 },
+  { level: 'H3', size: 22, tracking: -0.02, weight: 700 },
+  { level: 'H4', size: 18, tracking: -0.01, 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">
+    <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/mdx/websocket-playground.tsx

@@ -1,5 +1,6 @@
+import { CatalogIcon } from '@clidey/ux'
 import classNames from 'classnames'
-import { ChevronsUpDown, X } from 'lucide-react'
+
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { Tag } from './tag'
 
@@ -45,7 +46,7 @@ function MonoLabel({ children }: { children: string }) {
 function RemoveButton({ onClick, label }: { onClick: () => void; label: string }) {
   return (
     <button type="button" onClick={onClick} aria-label={label} className="rounded-md p-1.5 text-muted-foreground transition hover:bg-muted hover:text-foreground">
-      <X className="h-3.5 w-3.5" />
+      <CatalogIcon name="close" className="h-3.5 w-3.5" />
     </button>
   )
 }
@@ -119,16 +120,18 @@ function Select({ value, onChange, children, label }: { value: string; onChange:
       >
         {children}
       </select>
-      <ChevronsUpDown 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" />
+      <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" />
     </div>
   )
 }
 
 function AuthTab({ auth, setAuth }: { auth: AuthState; setAuth: (auth: AuthState) => void }) {
-  const field = (key: keyof AuthState, placeholder: string, type = 'text') => (
-    <input className={inputClass} type={type} value={auth[key] as string} placeholder={placeholder} aria-label={placeholder}
-      onInput={(e) => setAuth({ ...auth, [key]: (e.target as HTMLInputElement).value })} />
-  )
+  const field = (key: keyof AuthState, placeholder: string, password = false) => {
+    const onInput = (e: Event) => setAuth({ ...auth, [key]: (e.target as HTMLInputElement).value })
+    return password
+      ? <input className={inputClass} type="password" value={auth[key] as string} placeholder={placeholder} aria-label={placeholder} onInput={onInput} />
+      : <input className={inputClass} value={auth[key] as string} placeholder={placeholder} aria-label={placeholder} onInput={onInput} />
+  }
   return (
     <div className="flex flex-col gap-3">
       <Select label="Authentication type" value={auth.type} onChange={(type) => setAuth({ ...auth, type: type as AuthState['type'] })}>
@@ -137,9 +140,9 @@ function AuthTab({ auth, setAuth }: { auth: AuthState; setAuth: (auth: AuthState
         <option value="apiKey">API key</option>
         <option value="basic">Basic auth</option>
       </Select>
-      {auth.type === 'bearer' && <div className="flex">{field('token', 'Bearer token', 'password')}</div>}
-      {auth.type === 'apiKey' && <div className="flex">{field('apiKey', 'API key', 'password')}</div>}
-      {auth.type === 'basic' && <div className="flex gap-2">{field('username', 'Username')}{field('password', 'Password', 'password')}</div>}
+      {auth.type === 'bearer' && <div className="flex">{field('token', 'Bearer token', true)}</div>}
+      {auth.type === 'apiKey' && <div className="flex">{field('apiKey', 'API key', true)}</div>}
+      {auth.type === 'basic' && <div className="flex gap-2">{field('username', 'Username')}{field('password', 'Password', true)}</div>}
     </div>
   )
 }
@@ -148,7 +151,7 @@ const statusDot: Record<ConnectionState, string> = {
   connected: 'bg-green-600',
   connecting: 'bg-[var(--highlight)]',
   error: 'bg-[var(--destructive)]',
-  disconnected: 'bg-muted-foreground',
+  disconnected: 'bg-[var(--muted-foreground)]',
 }
 
 const statusText: Record<ConnectionState, string> = {
@@ -254,7 +257,8 @@ export function WebSocketPanel({
         </button>
       </div>
 
-      <div className="flex flex-col gap-4 px-4 pt-4 pb-5">
+      <div className="grid lg:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)]">
+      <div className="flex flex-col gap-4 border-b border-[var(--border)] px-4 pt-4 pb-5 lg:border-b-0 lg:border-r">
         {servers.length > 0 && (
           <div className="flex flex-col gap-2">
             <MonoLabel>Server</MonoLabel>
@@ -286,11 +290,12 @@ export function WebSocketPanel({
         </div>
       </div>
 
-      <div className="flex items-center justify-between border-t border-[var(--border)] px-4 py-2.5">
+      <div className="flex flex-col">
+      <div className="flex items-center justify-between px-4 py-2.5">
         <MonoLabel>Messages</MonoLabel>
         <button type="button" onClick={() => setMessages([])} className="text-sm text-muted-foreground hover:text-foreground">Clear</button>
       </div>
-      <div className="max-h-72 min-h-56 overflow-y-auto border-t border-[var(--border)] bg-background px-4 py-3">
+      <div className="max-h-96 min-h-64 flex-1 overflow-y-auto border-t border-[var(--border)] bg-background px-4 py-3">
         {messages.length === 0 ? (
           <p className="flex h-48 items-center justify-center text-sm text-muted-foreground">Connect to start receiving messages</p>
         ) : (
@@ -327,6 +332,8 @@ export function WebSocketPanel({
           Send
         </button>
       </div>
+      </div>
+      </div>
     </div>
   )
 }

package/src/plugins/analytics-injector.ts

@@ -7,9 +7,14 @@ import { resolve } from 'path';
  * PostHog is only injected if `analytics.posthog.token` is configured.
  */
 export function analyticsInjector(): Plugin {
+  let isProductionBuild = false;
   return {
     name: 'analytics-injector',
+    configResolved(config) {
+      isProductionBuild = config.command === 'build';
+    },
     transformIndexHtml(html) {
+      if (!isProductionBuild) return html;
       const doryJsonPath = resolve(process.cwd(), 'docs', 'dory.json');
       if (!existsSync(doryJsonPath)) return html;
 
@@ -28,6 +33,9 @@ export function analyticsInjector(): Plugin {
         posthog.init(${token}, {
             api_host: ${apiHost},
             person_profiles: 'identified_only',
+            autocapture: false,
+            capture_pageview: 'history_change',
+            capture_pageleave: 'if_capture_pageview',
         })
     </script>`;
 

package/src/plugins/chat-dev-server.ts

@@ -0,0 +1,32 @@
+import { loadEnv, type Plugin } from 'vite';
+import { resolve } from 'node:path';
+import { existsSync } from 'node:fs';
+import { handleChatRequest } from '../../bin/chat-server.ts';
+
+/** Development-only same-origin chat endpoint. Production uses `dory preview`. */
+export function chatDevServer(): Plugin {
+  return {
+    name: 'dory-chat-dev-server',
+    configResolved(config) {
+      if (config.command !== 'serve') return;
+      // Vite parses .env for its own client env, but does not populate process.env.
+      // The chat handler reads these values only on the dev server.
+      const env = loadEnv(config.mode, config.root, '');
+      for (const name of [
+        'DORY_CHAT_API_KEY', 'OPENAI_API_KEY', 'DORY_CHAT_MODEL', 'DORY_CHAT_BASE_URL',
+        'DORY_CHAT_PER_MINUTE', 'DORY_CHAT_PER_IP_DAY', 'DORY_CHAT_GLOBAL_DAY',
+        'DORY_CHAT_MAX_CONCURRENT', 'DORY_CHAT_MAX_OUTPUT_TOKENS',
+      ]) {
+        if (!process.env[name] && env[name]) process.env[name] = env[name];
+      }
+    },
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        const root = resolve(process.cwd(), 'docs');
+        handleChatRequest(req, res, { docsDir: existsSync(root) ? root : process.cwd(), localDevelopment: true })
+          .then(handled => { if (!handled) next(); })
+          .catch(next);
+      });
+    },
+  };
+}

package/src/plugins/docs-assets.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it, vi } from 'vitest';
+import { existsSync, mkdtempSync, mkdirSync, rmSync, symlinkSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import { tmpdir } from 'os';
+import { docsAssetsPlugin } from './docs-assets';
+
+describe('docs assets', () => {
+  it('copies regular assets and excludes symlinks to files outside docs', () => {
+    const root = mkdtempSync(join(tmpdir(), 'dory-assets-'));
+    try {
+      mkdirSync(join(root, 'docs'));
+      writeFileSync(join(root, 'secret'), 'private');
+      writeFileSync(join(root, 'docs', 'safe.svg'), '<svg />');
+      symlinkSync(join(root, 'secret'), join(root, 'docs', 'leak.svg'));
+      vi.spyOn(process, 'cwd').mockReturnValue(root);
+      const closeBundle = docsAssetsPlugin().closeBundle as () => void;
+      closeBundle();
+      expect(existsSync(join(root, 'dist', 'safe.svg'))).toBe(true);
+      expect(existsSync(join(root, 'dist', 'leak.svg'))).toBe(false);
+    } finally {
+      vi.restoreAllMocks();
+      rmSync(root, { recursive: true, force: true });
+    }
+  });
+});

package/src/plugins/docs-assets.ts

@@ -1,5 +1,5 @@
 import type { Plugin } from 'vite';
-import { cpSync, existsSync, readdirSync, statSync } from 'fs';
+import { cpSync, existsSync, lstatSync, readdirSync } from 'fs';
 import { resolve, extname } from 'path';
 
 /**
@@ -54,7 +54,11 @@ export function docsAssetsPlugin(): Plugin {
           const itemRelativePath = relativePath ? `${relativePath}/${item}` : item;
 
           try {
-            const stats = statSync(srcPath);
+            const stats = lstatSync(srcPath);
+
+            // Do not copy symlinks: they can point outside docs and leak files
+            // from the build machine through the generated static site.
+            if (stats.isSymbolicLink()) continue;
 
             if (stats.isDirectory()) {
               // Recursively copy directories

package/src/plugins/frontmatter-dev-server.ts

@@ -1,7 +1,7 @@
 import type { Plugin } from 'vite';
 import path from 'path';
-import { generateFrontmatterJson, generateSearchContentJson } from './frontmatter-generator';
-import { getBasePath, readDoryConfig } from './shared';
+import { generateFrontmatterJson, generateSearchContentJson } from './frontmatter-generator.ts';
+import { getBasePath, readDoryConfig } from './shared.ts';
 
 /**
  * Dev server plugin that serves frontmatter.json and search-content.json

package/src/plugins/frontmatter-generator.ts

@@ -7,7 +7,7 @@ import {
   pathFromFilename,
   findMdxFilesMap,
   stripMdxToText,
-} from './shared';
+} from './shared.ts';
 
 interface FrontmatterGeneratorOptions {
   docsDir?: string;

package/src/plugins/html-files-middleware.test.ts

@@ -1,6 +1,9 @@
 import { describe, it, expect } from 'vitest';
 import { resolve } from 'path';
-import { isPathInside } from './html-files-middleware';
+import { mkdtempSync, mkdirSync, rmSync, symlinkSync, writeFileSync } from 'fs';
+import { tmpdir } from 'os';
+import { join } from 'path';
+import { isPathInside, isRealPathInside } from './html-files-middleware';
 
 describe('isPathInside', () => {
   const root = resolve('/srv/app/dist');
@@ -19,3 +22,20 @@ describe('isPathInside', () => {
     expect(isPathInside(root, resolve('/srv/app/dist-other/file'))).toBe(false);
   });
 });
+
+describe('isRealPathInside', () => {
+  it('rejects a symlink that escapes the served directory', () => {
+    const parent = mkdtempSync(join(tmpdir(), 'dory-assets-'));
+    try {
+      const docs = join(parent, 'docs');
+      mkdirSync(docs);
+      writeFileSync(join(parent, 'secret'), 'private');
+      writeFileSync(join(docs, 'safe.svg'), '<svg />');
+      symlinkSync(join(parent, 'secret'), join(docs, 'leak.svg'));
+      expect(isRealPathInside(docs, join(docs, 'safe.svg'))).toBe(true);
+      expect(isRealPathInside(docs, join(docs, 'leak.svg'))).toBe(false);
+    } finally {
+      rmSync(parent, { recursive: true, force: true });
+    }
+  });
+});

package/src/plugins/html-files-middleware.ts

@@ -1,7 +1,7 @@
 import type { Plugin } from 'vite';
-import { readFileSync, existsSync, statSync } from 'fs';
+import { readFileSync, existsSync, realpathSync, statSync } from 'fs';
 import { resolve, extname, sep } from 'path';
-import { getBasePath, readDoryConfig } from './shared';
+import { getBasePath, readDoryConfig } from './shared.ts';
 
 /**
  * Returns true if `target` is the `root` path itself or is contained within it.
@@ -11,6 +11,15 @@ export function isPathInside(root: string, target: string): boolean {
   return target === root || target.startsWith(root + sep);
 }
 
+/** Resolve symlinks before serving a file so a path inside docs cannot point outside it. */
+export function isRealPathInside(root: string, target: string): boolean {
+  try {
+    return isPathInside(realpathSync(root), realpathSync(target));
+  } catch {
+    return false;
+  }
+}
+
 /**
  * Vite plugin to serve HTML files and assets directly from the docs directory
  * and static files from the dist directory without routing them through the SPA
@@ -46,6 +55,7 @@ export function htmlFilesMiddleware(): Plugin {
     '.woff2': 'font/woff2',
     '.ttf': 'font/ttf',
     '.eot': 'application/vnd.ms-fontobject',
+    '.mdx': 'text/markdown; charset=utf-8',
   };
 
   return {
@@ -80,7 +90,12 @@ export function htmlFilesMiddleware(): Plugin {
 
           if (existsSync(distPath)) {
             try {
-              const content = readFileSync(distPath);
+              if (!isRealPathInside(distRoot, distPath)) {
+                res.statusCode = 403;
+                res.end('Forbidden');
+                return;
+              }
+              const content = readFileSync(realpathSync(distPath));
               const ext = extname(url).toLowerCase();
               const contentType = mimeTypes[ext] || 'application/octet-stream';
 
@@ -108,15 +123,20 @@ export function htmlFilesMiddleware(): Plugin {
 
         if (existsSync(docsPath)) {
           try {
+            if (!isRealPathInside(docsRoot, docsPath)) {
+              res.statusCode = 403;
+              res.end('Forbidden');
+              return;
+            }
             const stats = statSync(docsPath);
 
             // If it's a file, serve it
             if (stats.isFile()) {
               const ext = extname(url).toLowerCase();
 
-              // Only serve HTML files and assets, not MDX files
-              if (url.endsWith('.html') || assetExtensions.has(ext)) {
-                const content = readFileSync(docsPath);
+              // HTML, assets, and MDX sources (the build copies these too, for Open MDX / Copy page)
+              if (url.endsWith('.html') || ext === '.mdx' || assetExtensions.has(ext)) {
+                const content = readFileSync(realpathSync(docsPath));
                 const contentType = mimeTypes[ext] || 'application/octet-stream';
 
                 res.setHeader('Content-Type', contentType);