pdf-smith 0.2.0 → 0.4.0

package/src/preview/navigation.tsx

@@ -1,3 +1,9 @@
+import { useEffect, useState } from 'react';
+import { colors, fonts, radii, SIDEBAR_WIDTH } from './design-tokens';
+import { ChevronLeftIcon, DownloadIcon, GridViewIcon } from './icons';
+
+type ExportState = 'idle' | 'exporting' | 'error';
+
 interface NavigationProps {
   pages: Record<string, React.ComponentType>;
   activePage: string | null;
@@ -5,116 +11,343 @@ interface NavigationProps {
   documentSlug: string;
 }
 
-const navStyle: React.CSSProperties = {
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  width: '240px',
-  height: '100vh',
-  background: '#1a1a2e',
-  color: '#e0e0e0',
-  padding: '16px',
-  overflowY: 'auto',
-  fontFamily: 'system-ui, -apple-system, sans-serif',
-  fontSize: '14px',
-  zIndex: 1000,
-  boxSizing: 'border-box',
-};
-
-const titleStyle: React.CSSProperties = {
-  fontSize: '16px',
-  fontWeight: 700,
-  marginBottom: '16px',
-  color: '#ffffff',
-  letterSpacing: '0.5px',
-};
-
-const backLinkStyle: React.CSSProperties = {
-  display: 'block',
-  fontSize: '13px',
-  color: '#888',
-  textDecoration: 'none',
-  marginBottom: '12px',
-  transition: 'color 0.15s',
-};
-
-const buttonBaseStyle: React.CSSProperties = {
-  display: 'block',
-  width: '100%',
-  padding: '8px 12px',
-  border: 'none',
-  borderRadius: '6px',
-  cursor: 'pointer',
-  textAlign: 'left',
-  fontSize: '13px',
-  marginBottom: '4px',
-  transition: 'background 0.15s',
-  fontFamily: 'inherit',
-};
-
-function getButtonStyle(isActive: boolean): React.CSSProperties {
-  return {
-    ...buttonBaseStyle,
-    background: isActive ? '#16213e' : 'transparent',
-    color: isActive ? '#ffffff' : '#b0b0b0',
-    fontWeight: isActive ? 600 : 400,
-  };
+function formatSlug(slug: string): string {
+  return slug
+    .split('-')
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
 }
 
-const separatorStyle: React.CSSProperties = {
-  border: 'none',
-  borderTop: '1px solid #2a2a4a',
-  margin: '12px 0',
-};
-
 export function Navigation({ pages, activePage, onSelectPage, documentSlug }: NavigationProps) {
   const pageNames = Object.keys(pages);
+  const [exportState, setExportState] = useState<ExportState>('idle');
+
+  useEffect(() => {
+    if (exportState !== 'error') return;
+    const timer = setTimeout(() => setExportState('idle'), 3000);
+    return () => clearTimeout(timer);
+  }, [exportState]);
+
+  async function handleExport() {
+    setExportState('exporting');
+    try {
+      const res = await fetch(`/api/export/${documentSlug}`, { method: 'POST' });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({ error: 'Export failed' }));
+        throw new Error(body.error ?? 'Export failed');
+      }
+      const contentType = res.headers.get('Content-Type') ?? '';
+      if (!contentType.includes('application/pdf')) {
+        throw new Error('Server returned unexpected response');
+      }
+      const blob = await res.blob();
+      const disposition = res.headers.get('Content-Disposition') ?? '';
+      const filenameMatch = disposition.match(/filename="(.+)"/);
+      const filename = filenameMatch?.[1] ?? `${documentSlug}.pdf`;
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+      setExportState('idle');
+    } catch {
+      setExportState('error');
+    }
+  }
 
   return (
-    <nav data-pdf-smith-nav="" style={navStyle}>
-      <a
-        href="/"
-        style={backLinkStyle}
-        onMouseEnter={(e) => {
-          e.currentTarget.style.color = '#e0e0e0';
-        }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.color = '#888';
+    <nav
+      data-pdf-smith-nav=""
+      style={{
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: `${SIDEBAR_WIDTH}px`,
+        background: colors.stone900,
+        color: colors.stone300,
+        display: 'flex',
+        flexDirection: 'column',
+        zIndex: 100,
+        borderRight: `1px solid ${colors.stone800}`,
+        fontFamily: fonts.body,
+        boxSizing: 'border-box',
+      }}
+    >
+      {/* Header */}
+      <div
+        style={{
+          padding: '16px 20px',
+          borderBottom: `1px solid ${colors.stone800}`,
         }}
       >
-        &larr; All Documents
-      </a>
-      <div style={titleStyle}>{documentSlug}</div>
-      <button
-        type="button"
-        style={getButtonStyle(activePage === null)}
-        onClick={() => onSelectPage(null)}
-        onMouseEnter={(e) => {
-          if (activePage !== null) e.currentTarget.style.background = '#16213e40';
-        }}
-        onMouseLeave={(e) => {
-          if (activePage !== null) e.currentTarget.style.background = 'transparent';
+        <a
+          href="/"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '6px',
+            fontSize: '13px',
+            color: colors.stone400,
+            textDecoration: 'none',
+            transition: 'color 0.15s',
+            marginBottom: '12px',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = colors.stone200;
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = colors.stone400;
+          }}
+        >
+          <ChevronLeftIcon size={14} />
+          All Documents
+        </a>
+        <div
+          style={{
+            fontFamily: fonts.heading,
+            fontSize: '16px',
+            fontWeight: 600,
+            color: colors.stone100,
+          }}
+        >
+          {formatSlug(documentSlug)}
+        </div>
+        <div
+          style={{
+            fontFamily: fonts.mono,
+            fontSize: '11px',
+            color: colors.stone500,
+            marginTop: '2px',
+          }}
+        >
+          pdfs/{documentSlug}
+        </div>
+      </div>
+
+      {/* Page Navigation */}
+      <div style={{ flex: 1, overflowY: 'auto', padding: '12px' }}>
+        <div
+          style={{
+            fontSize: '11px',
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: '0.06em',
+            color: colors.stone500,
+            padding: '8px 8px 6px',
+          }}
+        >
+          Pages
+        </div>
+
+        {/* All Pages button */}
+        <button
+          type="button"
+          onClick={() => onSelectPage(null)}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px',
+            padding: '8px 10px',
+            borderRadius: radii.md,
+            color: activePage === null ? colors.ember : colors.stone300,
+            fontSize: '13px',
+            fontWeight: 500,
+            fontFamily: 'inherit',
+            transition: 'all 0.12s',
+            cursor: 'pointer',
+            marginBottom: '8px',
+            border: `1px solid ${activePage === null ? colors.forge : colors.stone700}`,
+            background: activePage === null ? 'rgba(194, 65, 12, 0.1)' : 'transparent',
+            width: '100%',
+            textAlign: 'left',
+          }}
+          onMouseEnter={(e) => {
+            if (activePage !== null) {
+              e.currentTarget.style.background = 'rgba(250, 249, 247, 0.05)';
+              e.currentTarget.style.borderColor = colors.stone600;
+            }
+          }}
+          onMouseLeave={(e) => {
+            if (activePage !== null) {
+              e.currentTarget.style.background = 'transparent';
+              e.currentTarget.style.borderColor = colors.stone700;
+            }
+          }}
+        >
+          <GridViewIcon size={14} />
+          All Pages
+        </button>
+
+        {/* Individual page links */}
+        {pageNames.map((name, idx) => {
+          const isActive = activePage === name;
+          return (
+            <button
+              type="button"
+              key={name}
+              onClick={() => onSelectPage(name)}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '10px',
+                padding: '8px 10px',
+                borderRadius: radii.md,
+                color: isActive ? colors.ember : colors.stone400,
+                fontSize: '13px',
+                fontFamily: 'inherit',
+                transition: 'all 0.12s',
+                cursor: 'pointer',
+                marginBottom: '2px',
+                border: 'none',
+                background: isActive ? 'rgba(194, 65, 12, 0.12)' : 'transparent',
+                width: '100%',
+                textAlign: 'left',
+              }}
+              onMouseEnter={(e) => {
+                if (!isActive) {
+                  e.currentTarget.style.background = 'rgba(250, 249, 247, 0.05)';
+                  e.currentTarget.style.color = colors.stone200;
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (!isActive) {
+                  e.currentTarget.style.background = 'transparent';
+                  e.currentTarget.style.color = colors.stone400;
+                }
+              }}
+            >
+              <span
+                style={{
+                  width: '22px',
+                  height: '22px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  fontFamily: fonts.mono,
+                  fontSize: '11px',
+                  fontWeight: 600,
+                  background: isActive ? colors.forge : colors.stone800,
+                  color: isActive ? 'white' : 'inherit',
+                  borderRadius: '5px',
+                  flexShrink: 0,
+                }}
+              >
+                {idx + 1}
+              </span>
+              <span
+                style={{
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {name}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Footer */}
+      <div
+        style={{
+          padding: '12px 16px',
+          borderTop: `1px solid ${colors.stone800}`,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
         }}
       >
-        All Pages
-      </button>
-      <hr style={separatorStyle} />
-      {pageNames.map((name) => (
         <button
           type="button"
-          key={name}
-          style={getButtonStyle(activePage === name)}
-          onClick={() => onSelectPage(name)}
+          disabled={exportState === 'exporting'}
+          onClick={handleExport}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '6px',
+            padding: '8px 16px',
+            background:
+              exportState === 'error'
+                ? '#DC2626'
+                : exportState === 'exporting'
+                  ? colors.stone600
+                  : colors.forge,
+            color: 'white',
+            border: 'none',
+            borderRadius: radii.md,
+            fontFamily: fonts.body,
+            fontSize: '13px',
+            fontWeight: 500,
+            cursor: exportState === 'exporting' ? 'not-allowed' : 'pointer',
+            transition: 'background 0.15s',
+            width: '100%',
+            opacity: exportState === 'exporting' ? 0.8 : 1,
+          }}
           onMouseEnter={(e) => {
-            if (activePage !== name) e.currentTarget.style.background = '#16213e40';
+            if (exportState === 'idle') e.currentTarget.style.background = colors.deepForge;
           }}
           onMouseLeave={(e) => {
-            if (activePage !== name) e.currentTarget.style.background = 'transparent';
+            if (exportState === 'idle') e.currentTarget.style.background = colors.forge;
           }}
         >
-          {name}
+          {exportState === 'exporting' ? (
+            <>
+              <style>{`@keyframes pdf-smith-spin { to { transform: rotate(360deg) } }`}</style>
+              <span
+                style={{
+                  width: '14px',
+                  height: '14px',
+                  border: '2px solid rgba(255,255,255,0.3)',
+                  borderTopColor: 'white',
+                  borderRadius: '50%',
+                  animation: 'pdf-smith-spin 0.6s linear infinite',
+                  flexShrink: 0,
+                }}
+              />
+              Exporting...
+            </>
+          ) : exportState === 'error' ? (
+            'Export Failed'
+          ) : (
+            <>
+              <DownloadIcon size={14} />
+              Export PDF
+            </>
+          )}
         </button>
-      ))}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            fontSize: '11px',
+            color: colors.stone500,
+            fontFamily: fonts.mono,
+          }}
+        >
+          <span>
+            {pageNames.length} page{pageNames.length !== 1 ? 's' : ''}
+          </span>
+          <span style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+            <span
+              style={{
+                width: '6px',
+                height: '6px',
+                borderRadius: '50%',
+                background: colors.success,
+                display: 'inline-block',
+              }}
+            />
+            HMR active
+          </span>
+        </div>
+      </div>
     </nav>
   );
 }

package/src/preview/preview-plugin.ts

@@ -1,4 +1,8 @@
+import fs from 'node:fs';
+import type { AddressInfo } from 'node:net';
+import path from 'node:path';
 import type { Plugin } from 'vite';
+import type { DocumentConfig } from '../config';
 
 const VIRTUAL_DOCUMENTS_ID = 'virtual:pdf-smith-documents';
 const RESOLVED_VIRTUAL_DOCUMENTS_ID = `\0${VIRTUAL_DOCUMENTS_ID}`;
@@ -7,11 +11,110 @@ interface PreviewPluginOptions {
   pkgSrcDir: string;
 }
 
+async function handleExportRequest(
+  server: import('vite').ViteDevServer,
+  slug: string,
+  res: import('node:http').ServerResponse,
+) {
+  const root = server.config.root;
+  const pagesDir = path.join(root, 'pdfs', slug, 'pages');
+
+  if (!fs.existsSync(pagesDir)) {
+    res.statusCode = 404;
+    res.setHeader('Content-Type', 'application/json');
+    res.end(JSON.stringify({ error: `Document "${slug}" not found` }));
+    return;
+  }
+
+  let config: DocumentConfig | undefined;
+  const configPath = path.join(root, 'pdfs', slug, 'config.ts');
+  if (fs.existsSync(configPath)) {
+    try {
+      const configModule = await server.ssrLoadModule(configPath);
+      config = configModule.default;
+    } catch {
+      // Config loading failed, proceed without it
+    }
+  }
+
+  let playwright: typeof import('playwright');
+  try {
+    playwright = await import('playwright');
+  } catch {
+    res.statusCode = 500;
+    res.setHeader('Content-Type', 'application/json');
+    res.end(
+      JSON.stringify({
+        error:
+          'Playwright is required for PDF export. Install it with: npm install -D playwright && npx playwright install chromium',
+      }),
+    );
+    return;
+  }
+
+  let browser: import('playwright').Browser | undefined;
+  try {
+    const address = server.httpServer?.address() as AddressInfo | null;
+    const port = address?.port;
+    if (!port) throw new Error('Could not determine server port');
+
+    browser = await playwright.chromium.launch({ headless: true });
+    const page = await browser.newPage();
+    await page.goto(`http://localhost:${port}/${slug}`, { waitUntil: 'networkidle' });
+    await page.waitForSelector('[data-pdf-smith-page]', { timeout: 30_000 });
+
+    const margin = { top: '0', bottom: '0', left: '0', right: '0' };
+    const pdfOptions: Parameters<typeof page.pdf>[0] = {
+      preferCSSPageSize: true,
+      printBackground: true,
+      margin,
+    };
+
+    if (config?.pageNumbers?.enabled) {
+      pdfOptions.displayHeaderFooter = true;
+      pdfOptions.headerTemplate = '<span></span>';
+      pdfOptions.footerTemplate =
+        config.pageNumbers.template ??
+        '<div style="font-size:10px;text-align:center;width:100%;"><span class="pageNumber"></span> / <span class="totalPages"></span></div>';
+      margin.bottom = '40px';
+    }
+
+    const buffer = await page.pdf(pdfOptions);
+    await page.close();
+
+    const filename = config?.output ?? `${slug}.pdf`;
+    res.statusCode = 200;
+    res.setHeader('Content-Type', 'application/pdf');
+    res.setHeader('Content-Disposition', `attachment; filename="${filename}"`);
+    res.end(buffer);
+  } catch (err) {
+    if (!res.headersSent) {
+      res.statusCode = 500;
+      res.setHeader('Content-Type', 'application/json');
+      res.end(JSON.stringify({ error: err instanceof Error ? err.message : 'PDF export failed' }));
+    }
+  } finally {
+    await browser?.close().catch(() => {});
+  }
+}
+
 export function pdfSmithPreviewPlugin({ pkgSrcDir }: PreviewPluginOptions): Plugin {
   return {
     name: 'pdf-smith-preview',
 
     configureServer(server) {
+      // Pre-middleware: Export API runs before Vite internals.
+      // Must be a sync function — async middleware returns a Promise that
+      // Connect ignores, so the pipeline can advance to the catch-all
+      // before the async work finishes.
+      server.middlewares.use((req, res, next) => {
+        if (req.method !== 'POST') return next();
+        const match = req.url?.match(/^\/api\/export\/([^/]+)$/);
+        if (!match) return next();
+        void handleExportRequest(server, match[1], res);
+      });
+
+      // Post-middleware: catch-all HTML handler (after Vite internals)
       return () => {
         server.middlewares.use((req, res, next) => {
           const url = req.url ?? '';
@@ -36,18 +139,35 @@ window.__vite_plugin_react_preamble_installed__ = true
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>pdf-smith Preview</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1&family=Inter:opsz,wght@14..32,100..900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
   <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: 'Inter', system-ui, sans-serif;
+      -webkit-font-smoothing: antialiased;
+    }
+    .pdf-smith-search::placeholder { color: #78716C; }
     @media print {
       [data-pdf-smith-nav] { display: none !important; }
+      [data-pdf-smith-toolbar] { display: none !important; }
+      [data-pdf-smith-minimap] { display: none !important; }
       [data-pdf-smith-container] {
         margin-left: 0 !important;
         padding: 0 !important;
+        padding-top: 0 !important;
         background: none !important;
       }
-      [data-pdf-smith-container] > [data-pdf-smith-document] > div {
+      [data-pdf-smith-container] > div {
+        padding: 0 !important;
+        gap: 0 !important;
+      }
+      [data-pdf-smith-document] > div {
         margin-bottom: 0 !important;
       }
-      [data-pdf-smith-container] > [data-pdf-smith-document] > div > div:first-child {
+      [data-pdf-smith-document] > div > div:first-child {
         display: none !important;
       }
     }