pdf-smith 0.2.0 → 0.4.0

package/src/preview/home.tsx

@@ -1,95 +1,276 @@
 import { getDocuments } from 'virtual:pdf-smith-documents';
+import { useEffect, useRef, useState } from 'react';
+import { colors, fonts, radii, VERSION } from './design-tokens';
+import { DocumentIcon, SearchIcon } from './icons';
 
-const containerStyle: React.CSSProperties = {
-  minHeight: '100vh',
-  background: '#1a1a2e',
-  color: '#e0e0e0',
-  fontFamily: 'system-ui, -apple-system, sans-serif',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  padding: '48px 24px',
-};
+function formatSlug(slug: string): string {
+  return slug
+    .split('-')
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+}
 
-const titleStyle: React.CSSProperties = {
-  fontSize: '28px',
-  fontWeight: 700,
-  color: '#ffffff',
-  marginBottom: '8px',
-  letterSpacing: '0.5px',
-};
+export function HomePage() {
+  const documents = getDocuments();
+  const slugs = Object.keys(documents);
+  const [search, setSearch] = useState('');
+  const [searchFocused, setSearchFocused] = useState(false);
+  const searchRef = useRef<HTMLInputElement>(null);
 
-const subtitleStyle: React.CSSProperties = {
-  fontSize: '14px',
-  color: '#888',
-  marginBottom: '40px',
-};
+  const filtered = search
+    ? slugs.filter((s) => s.toLowerCase().includes(search.toLowerCase()))
+    : slugs;
 
-const gridStyle: React.CSSProperties = {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
-  gap: '16px',
-  width: '100%',
-  maxWidth: '800px',
-};
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === '/' && document.activeElement !== searchRef.current) {
+        e.preventDefault();
+        searchRef.current?.focus();
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
 
-const cardStyle: React.CSSProperties = {
-  display: 'block',
-  background: '#16213e',
-  borderRadius: '8px',
-  padding: '24px',
-  textDecoration: 'none',
-  color: '#e0e0e0',
-  transition: 'background 0.15s',
-  border: '1px solid #2a2a4a',
-};
+  return (
+    <div style={{ minHeight: '100vh', background: colors.stone900, color: colors.stone100 }}>
+      {/* Main */}
+      <main style={{ maxWidth: '960px', margin: '0 auto', padding: '32px' }}>
+        {/* Search */}
+        <div style={{ position: 'relative', maxWidth: '480px', margin: '0 auto 48px' }}>
+          <SearchIcon
+            size={16}
+            style={{
+              position: 'absolute',
+              left: '14px',
+              top: '50%',
+              transform: 'translateY(-50%)',
+              color: colors.stone500,
+            }}
+          />
+          <input
+            ref={searchRef}
+            type="text"
+            className="pdf-smith-search"
+            placeholder="Search documents..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            onFocus={() => setSearchFocused(true)}
+            onBlur={() => setSearchFocused(false)}
+            style={{
+              width: '100%',
+              padding: '12px 14px 12px 40px',
+              fontFamily: fonts.body,
+              fontSize: '14px',
+              background: colors.stone800,
+              color: colors.stone100,
+              border: `1px solid ${searchFocused ? colors.forge : colors.stone700}`,
+              borderRadius: radii.lg,
+              outline: 'none',
+              transition: 'all 0.15s',
+              boxShadow: searchFocused ? '0 0 0 3px rgba(194, 65, 12, 0.15)' : 'none',
+            }}
+          />
+          {!search && (
+            <span
+              style={{
+                position: 'absolute',
+                right: '14px',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                fontFamily: fonts.mono,
+                fontSize: '11px',
+                color: colors.stone500,
+                background: colors.stone700,
+                padding: '2px 6px',
+                borderRadius: radii.sm,
+              }}
+            >
+              /
+            </span>
+          )}
+        </div>
 
-const cardTitleStyle: React.CSSProperties = {
-  fontSize: '18px',
-  fontWeight: 600,
-  color: '#ffffff',
-  marginBottom: '8px',
-};
+        {/* Section Header */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: '20px',
+          }}
+        >
+          <h2
+            style={{
+              fontFamily: fonts.heading,
+              fontSize: '14px',
+              fontWeight: 600,
+              color: colors.stone400,
+              textTransform: 'uppercase',
+              letterSpacing: '0.06em',
+            }}
+          >
+            Documents
+          </h2>
+          <span style={{ fontFamily: fonts.mono, fontSize: '12px', color: colors.stone500 }}>
+            {filtered.length} document{filtered.length !== 1 ? 's' : ''}
+          </span>
+        </div>
 
-const cardMetaStyle: React.CSSProperties = {
-  fontSize: '13px',
-  color: '#888',
-};
+        {/* Document List or Empty State */}
+        {filtered.length > 0 ? (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            {filtered.map((slug, i) => {
+              const doc = documents[slug];
+              const pageCount = Object.keys(doc.pages).length;
+              const iconColors = [
+                { bg: 'rgba(194, 65, 12, 0.12)', fg: colors.ember },
+                { bg: 'rgba(217, 119, 6, 0.12)', fg: colors.gold },
+                { bg: 'rgba(168, 162, 158, 0.12)', fg: colors.stone400 },
+              ];
+              const ic = iconColors[i % iconColors.length];
 
-export function HomePage() {
-  const documents = getDocuments();
-  const slugs = Object.keys(documents);
+              return (
+                <a
+                  key={slug}
+                  href={`/${slug}`}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '12px',
+                    background: colors.stone800,
+                    border: `1px solid ${colors.stone700}`,
+                    borderRadius: radii.lg,
+                    padding: '12px 16px',
+                    textDecoration: 'none',
+                    color: 'inherit',
+                    transition: 'all 0.15s',
+                    cursor: 'pointer',
+                  }}
+                  onMouseEnter={(e) => {
+                    const el = e.currentTarget;
+                    el.style.borderColor = colors.stone600;
+                    el.style.background = '#2C2826';
+                  }}
+                  onMouseLeave={(e) => {
+                    const el = e.currentTarget;
+                    el.style.borderColor = colors.stone700;
+                    el.style.background = colors.stone800;
+                  }}
+                >
+                  <div
+                    style={{
+                      width: '28px',
+                      height: '28px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      borderRadius: radii.md,
+                      background: ic.bg,
+                      color: ic.fg,
+                      flexShrink: 0,
+                    }}
+                  >
+                    <DocumentIcon size={14} />
+                  </div>
+                  <span
+                    style={{
+                      fontFamily: fonts.heading,
+                      fontSize: '14px',
+                      fontWeight: 600,
+                      color: colors.stone100,
+                    }}
+                  >
+                    {formatSlug(slug)}
+                  </span>
+                  <span
+                    style={{
+                      marginLeft: 'auto',
+                      fontSize: '12px',
+                      fontFamily: fonts.mono,
+                      color: colors.stone500,
+                    }}
+                  >
+                    {pageCount} page{pageCount !== 1 ? 's' : ''}
+                  </span>
+                </a>
+              );
+            })}
+          </div>
+        ) : slugs.length === 0 ? (
+          <div
+            style={{
+              textAlign: 'center',
+              padding: '64px 32px',
+              border: `2px dashed ${colors.stone700}`,
+              borderRadius: radii.xl,
+              marginTop: '16px',
+            }}
+          >
+            <p style={{ color: colors.stone500, marginBottom: '16px' }}>
+              No documents yet. Create one to get started:
+            </p>
+            <code
+              style={{
+                fontFamily: fonts.mono,
+                fontSize: '13px',
+                color: colors.ember,
+                background: colors.stone800,
+                padding: '4px 12px',
+                borderRadius: radii.md,
+              }}
+            >
+              pdf-smith add my-doc
+            </code>
+          </div>
+        ) : (
+          <div
+            style={{
+              textAlign: 'center',
+              padding: '64px 32px',
+              border: `2px dashed ${colors.stone700}`,
+              borderRadius: radii.xl,
+              marginTop: '16px',
+            }}
+          >
+            <p style={{ color: colors.stone500 }}>No documents matching &ldquo;{search}&rdquo;</p>
+          </div>
+        )}
 
-  return (
-    <div style={containerStyle}>
-      <h1 style={titleStyle}>pdf-smith</h1>
-      <p style={subtitleStyle}>
-        {slugs.length} document{slugs.length !== 1 ? 's' : ''}
-      </p>
-      <div style={gridStyle}>
-        {slugs.map((slug) => {
-          const doc = documents[slug];
-          const pageCount = Object.keys(doc.pages).length;
-          return (
+        {/* Footer */}
+        <footer
+          style={{
+            marginTop: '48px',
+            paddingTop: '24px',
+            borderTop: `1px solid ${colors.stone800}`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            fontSize: '12px',
+            color: colors.stone600,
+          }}
+        >
+          <span>pdf-smith v{VERSION} &middot; Preview Server</span>
+          <div style={{ display: 'flex', gap: '16px' }}>
             <a
-              key={slug}
-              href={`/${slug}`}
-              style={cardStyle}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.background = '#1e2d50';
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.background = '#16213e';
-              }}
+              href="https://github.com/kareemaly/pdf-smith"
+              style={{ color: colors.stone500, textDecoration: 'none' }}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              GitHub
+            </a>
+            <a
+              href="https://www.npmjs.com/package/pdf-smith"
+              style={{ color: colors.stone500, textDecoration: 'none' }}
+              target="_blank"
+              rel="noopener noreferrer"
             >
-              <div style={cardTitleStyle}>{slug}</div>
-              <div style={cardMetaStyle}>
-                {pageCount} page{pageCount !== 1 ? 's' : ''}
-              </div>
+              npm
             </a>
-          );
-        })}
-      </div>
+          </div>
+        </footer>
+      </main>
     </div>
   );
 }

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