pdf-smith 0.2.0 → 0.4.0

package/src/preview/app.tsx

@@ -1,30 +1,19 @@
 import { getDocuments } from 'virtual:pdf-smith-documents';
-import { useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Document } from '../document';
 import { Page } from '../page';
+import { colors, fonts, radii, SIDEBAR_WIDTH, TOOLBAR_HEIGHT } from './design-tokens';
+import { MinusIcon, PlusSmallIcon } from './icons';
 import { Navigation } from './navigation';
 
-const containerStyle: React.CSSProperties = {
-  marginLeft: '240px',
-  minHeight: '100vh',
-  background: '#e8e8e8',
-  padding: '32px',
-  boxSizing: 'border-box',
-};
-
-const pageWrapperStyle: React.CSSProperties = {
-  marginBottom: '24px',
-};
-
-const pageLabelStyle: React.CSSProperties = {
-  fontFamily: 'system-ui, -apple-system, sans-serif',
-  fontSize: '12px',
-  color: '#666',
-  marginBottom: '8px',
-  marginLeft: 'auto',
-  marginRight: 'auto',
-  width: 'fit-content',
-};
+const ZOOM_STEPS = [50, 75, 100, 125, 150, 200];
+
+function formatSlug(slug: string): string {
+  return slug
+    .split('-')
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+}
 
 interface PreviewAppProps {
   slug: string;
@@ -35,8 +24,47 @@ export function PreviewApp({ slug }: PreviewAppProps) {
   const doc = documents[slug];
   const pages = doc?.pages ?? {};
   const [activePage, setActivePage] = useState<string | null>(null);
-
+  const [zoom, setZoom] = useState(100);
+  const pageNames = Object.keys(pages);
   const visiblePages = activePage ? { [activePage]: pages[activePage] } : pages;
+  const visibleNames = Object.keys(visiblePages);
+
+  // Minimap: track which page is in view
+  const pageRefs = useRef<Record<string, HTMLDivElement | null>>({});
+  const [activeMinimapIdx, setActiveMinimapIdx] = useState(0);
+
+  const observerCallback = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          const idx = visibleNames.indexOf(entry.target.getAttribute('data-page-name') ?? '');
+          if (idx !== -1) setActiveMinimapIdx(idx);
+        }
+      }
+    },
+    [visibleNames],
+  );
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(observerCallback, {
+      threshold: 0.5,
+    });
+    for (const name of visibleNames) {
+      const el = pageRefs.current[name];
+      if (el) observer.observe(el);
+    }
+    return () => observer.disconnect();
+  }, [visibleNames, observerCallback]);
+
+  function zoomIn() {
+    const next = ZOOM_STEPS.find((s) => s > zoom);
+    if (next) setZoom(next);
+  }
+
+  function zoomOut() {
+    const prev = [...ZOOM_STEPS].reverse().find((s) => s < zoom);
+    if (prev) setZoom(prev);
+  }
 
   return (
     <>
@@ -46,18 +74,218 @@ export function PreviewApp({ slug }: PreviewAppProps) {
         onSelectPage={setActivePage}
         documentSlug={slug}
       />
-      <div data-pdf-smith-container="" style={containerStyle}>
-        <Document>
-          {Object.entries(visiblePages).map(([name, PageComponent]) => (
-            <div key={name} style={pageWrapperStyle}>
-              <div style={pageLabelStyle}>{name}</div>
-              <Page>
-                <PageComponent />
-              </Page>
-            </div>
-          ))}
-        </Document>
+
+      {/* Toolbar */}
+      <div
+        data-pdf-smith-toolbar=""
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: `${SIDEBAR_WIDTH}px`,
+          right: 0,
+          height: `${TOOLBAR_HEIGHT}px`,
+          background: colors.stone50,
+          borderBottom: `1px solid ${colors.stone200}`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '0 24px',
+          zIndex: 50,
+          fontFamily: fonts.body,
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <span style={{ fontSize: '13px', color: colors.stone500 }}>
+            <strong style={{ color: colors.stone700, fontWeight: 600 }}>{formatSlug(slug)}</strong>
+            {' \u00B7 '}
+            {activePage ?? 'All Pages'}
+          </span>
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+            fontFamily: fonts.mono,
+            fontSize: '12px',
+            color: colors.stone500,
+          }}
+        >
+          <button
+            type="button"
+            onClick={zoomOut}
+            disabled={zoom <= ZOOM_STEPS[0]}
+            style={{
+              width: '28px',
+              height: '28px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'none',
+              border: `1px solid ${colors.stone200}`,
+              borderRadius: radii.sm,
+              color: zoom <= ZOOM_STEPS[0] ? colors.stone300 : colors.stone500,
+              cursor: zoom <= ZOOM_STEPS[0] ? 'default' : 'pointer',
+              padding: 0,
+            }}
+          >
+            <MinusIcon size={14} />
+          </button>
+          <button
+            type="button"
+            onClick={() => setZoom(100)}
+            style={{
+              background: 'none',
+              border: 'none',
+              fontFamily: fonts.mono,
+              fontSize: '12px',
+              color: colors.stone500,
+              cursor: 'pointer',
+              padding: '4px 6px',
+              borderRadius: radii.sm,
+              minWidth: '42px',
+              textAlign: 'center',
+            }}
+            title="Reset zoom to 100%"
+          >
+            {zoom}%
+          </button>
+          <button
+            type="button"
+            onClick={zoomIn}
+            disabled={zoom >= ZOOM_STEPS[ZOOM_STEPS.length - 1]}
+            style={{
+              width: '28px',
+              height: '28px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'none',
+              border: `1px solid ${colors.stone200}`,
+              borderRadius: radii.sm,
+              color: zoom >= ZOOM_STEPS[ZOOM_STEPS.length - 1] ? colors.stone300 : colors.stone500,
+              cursor: zoom >= ZOOM_STEPS[ZOOM_STEPS.length - 1] ? 'default' : 'pointer',
+              padding: 0,
+            }}
+          >
+            <PlusSmallIcon size={14} />
+          </button>
+        </div>
       </div>
+
+      {/* Content */}
+      <div
+        data-pdf-smith-container=""
+        style={{
+          marginLeft: `${SIDEBAR_WIDTH}px`,
+          paddingTop: `${TOOLBAR_HEIGHT}px`,
+          minHeight: '100vh',
+          background: colors.stone200,
+          boxSizing: 'border-box',
+        }}
+      >
+        <div
+          style={{
+            padding: '40px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '32px',
+          }}
+        >
+          <Document>
+            {Object.entries(visiblePages).map(([name, PageComponent]) => (
+              <div
+                key={name}
+                ref={(el) => {
+                  pageRefs.current[name] = el;
+                }}
+                data-page-name={name}
+              >
+                <div
+                  style={{
+                    fontFamily: fonts.mono,
+                    fontSize: '11px',
+                    color: colors.stone400,
+                    marginTop: '10px',
+                    marginBottom: '8px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }}
+                >
+                  <span>
+                    Page {pageNames.indexOf(name) + 1} &mdash; {name}
+                  </span>
+                </div>
+                <div
+                  style={{
+                    transform: `scale(${zoom / 100})`,
+                    transformOrigin: 'top center',
+                    transition: 'transform 0.15s ease',
+                  }}
+                >
+                  <Page>
+                    <PageComponent />
+                  </Page>
+                </div>
+              </div>
+            ))}
+          </Document>
+        </div>
+      </div>
+
+      {/* Minimap */}
+      {visibleNames.length > 1 && (
+        <div
+          data-pdf-smith-minimap=""
+          style={{
+            position: 'fixed',
+            right: '20px',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+            zIndex: 50,
+          }}
+        >
+          {visibleNames.map((name, idx) => (
+            <button
+              type="button"
+              key={name}
+              title={`Page ${pageNames.indexOf(name) + 1} — ${name}`}
+              aria-label={`Go to page ${pageNames.indexOf(name) + 1}: ${name}`}
+              style={{
+                width: '8px',
+                height: '8px',
+                borderRadius: '50%',
+                background: idx === activeMinimapIdx ? colors.forge : colors.stone300,
+                cursor: 'pointer',
+                transition: 'all 0.15s',
+                transform: idx === activeMinimapIdx ? 'scale(1.3)' : 'none',
+                border: 'none',
+                padding: 0,
+              }}
+              onClick={() => {
+                pageRefs.current[name]?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+              }}
+              onMouseEnter={(e) => {
+                if (idx !== activeMinimapIdx) {
+                  e.currentTarget.style.background = colors.stone500;
+                  e.currentTarget.style.transform = 'scale(1.3)';
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (idx !== activeMinimapIdx) {
+                  e.currentTarget.style.background = colors.stone300;
+                  e.currentTarget.style.transform = 'none';
+                }
+              }}
+            />
+          ))}
+        </div>
+      )}
     </>
   );
 }

package/src/preview/design-tokens.ts

@@ -0,0 +1,42 @@
+export const colors = {
+  forge: '#C2410C',
+  ember: '#EA580C',
+  deepForge: '#9A3412',
+  iron: '#292524',
+  amber: '#D97706',
+  gold: '#F59E0B',
+
+  stone50: '#FAF9F7',
+  stone100: '#F5F3F0',
+  stone200: '#E7E4DF',
+  stone300: '#D6D0C8',
+  stone400: '#A8A29E',
+  stone500: '#78716C',
+  stone600: '#57534E',
+  stone700: '#44403C',
+  stone800: '#292524',
+  stone900: '#1C1917',
+  stone950: '#0C0A09',
+
+  success: '#16A34A',
+} as const;
+
+export const fonts = {
+  display: "'Fraunces', Georgia, serif",
+  heading: "'Inter', system-ui, sans-serif",
+  body: "'Inter', system-ui, sans-serif",
+  mono: "'JetBrains Mono', monospace",
+} as const;
+
+export const radii = {
+  sm: '4px',
+  md: '6px',
+  lg: '8px',
+  xl: '12px',
+  '2xl': '16px',
+  full: '100px',
+} as const;
+
+export const SIDEBAR_WIDTH = 260;
+export const TOOLBAR_HEIGHT = 48;
+export const VERSION = '0.2.0';