pdf-smith 0.2.0 → 0.3.0

package/src/preview/icons.tsx

@@ -0,0 +1,250 @@
+interface IconProps {
+  size?: number;
+  style?: React.CSSProperties;
+}
+
+export function AnvilIcon({ size = 24, style }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 32 32"
+      fill="none"
+      style={style}
+      aria-hidden="true"
+    >
+      <rect x="4" y="6" width="24" height="5" rx="1.5" fill="#C2410C" />
+      <path d="M2 24h28v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3z" fill="#FAF9F7" />
+      <path d="M8 11h16v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2z" fill="#57534E" />
+      <rect x="10" y="14" width="12" height="4" rx="1" fill="#78716C" />
+      <rect x="6" y="18" width="20" height="3" rx="1" fill="#57534E" />
+      <rect x="4" y="21" width="24" height="3" rx="1" fill="#44403C" />
+    </svg>
+  );
+}
+
+export function AnvilIconWhite({ size = 28, style }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 32 32"
+      fill="none"
+      style={style}
+      aria-hidden="true"
+    >
+      <rect x="4" y="6" width="24" height="5" rx="1.5" fill="white" />
+      <path d="M2 24h28v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3z" fill="white" />
+      <path d="M8 11h16v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2z" fill="rgba(255,255,255,0.6)" />
+      <rect x="10" y="14" width="12" height="4" rx="1" fill="rgba(255,255,255,0.5)" />
+      <rect x="6" y="18" width="20" height="3" rx="1" fill="rgba(255,255,255,0.6)" />
+      <rect x="4" y="21" width="24" height="3" rx="1" fill="rgba(255,255,255,0.8)" />
+    </svg>
+  );
+}
+
+export function SearchIcon({ size = 16, style }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      style={style}
+      aria-hidden="true"
+    >
+      <circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M11 11l3.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function ChevronLeftIcon({ size = 14, style }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      style={style}
+      aria-hidden="true"
+    >
+      <path
+        d="M10 12L6 8l4-4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function GridViewIcon({ size = 14, style }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      style={style}
+      aria-hidden="true"
+    >
+      <rect x="2" y="2" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.2" />
+      <rect x="9" y="2" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.2" />
+      <rect x="2" y="9" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.2" />
+      <rect x="9" y="9" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.2" />
+    </svg>
+  );
+}
+
+export function DownloadIcon({ size = 14, style }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      style={style}
+      aria-hidden="true"
+    >
+      <path
+        d="M2 11v2a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path
+        d="M8 2v8M5 7l3 3 3-3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function DocumentIcon({ size = 18, style }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      style={style}
+      aria-hidden="true"
+    >
+      <path
+        d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <polyline points="14,2 14,8 20,8" stroke="currentColor" strokeWidth="1.5" />
+      <line x1="8" y1="13" x2="16" y2="13" stroke="currentColor" strokeWidth="1.5" />
+      <line x1="8" y1="17" x2="16" y2="17" stroke="currentColor" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+export function BookIcon({ size = 18, style }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      style={style}
+      aria-hidden="true"
+    >
+      <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+}
+
+export function GridIcon({ size = 18, style }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      style={style}
+      aria-hidden="true"
+    >
+      <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.5" />
+      <line x1="3" y1="9" x2="21" y2="9" stroke="currentColor" strokeWidth="1.5" />
+      <line x1="9" y1="9" x2="9" y2="21" stroke="currentColor" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+export function MinusIcon({ size = 14, style }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      style={style}
+      aria-hidden="true"
+    >
+      <path d="M3 8h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function PlusSmallIcon({ size = 14, style }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      style={style}
+      aria-hidden="true"
+    >
+      <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function PreviewIcon({ size = 12, style }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      style={style}
+      aria-hidden="true"
+    >
+      <rect x="2" y="2" width="12" height="12" rx="1" stroke="currentColor" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+export function OutlineIcon({ size = 12, style }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      style={style}
+      aria-hidden="true"
+    >
+      <path
+        d="M2 4h12M2 8h12M2 12h8"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

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