@seqyuan/annodex 0.1.12 → 0.1.14

package/components/viewers/PdfViewer.tsx

@@ -1,206 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState, useCallback } from "react";
-import { DocumentToolbar } from "./DocumentToolbar";
-
-// Dynamic import for pdfjs-dist to avoid SSR issues with canvas.
-// Use the legacy bundle because the modern PDF.js worker requires newer
-// browser APIs such as Uint8Array.prototype.toHex().
-let pdfjsLib: typeof import("pdfjs-dist") | null = null;
-
-interface Props {
-  arrayBuffer: ArrayBuffer;
-  fileName?: string;
-}
-
-export function PdfViewer({ arrayBuffer, fileName }: Props) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [pageCount, setPageCount] = useState(0);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [zoom, setZoom] = useState(1.0);
-  const zoomRef = useRef(zoom);
-  zoomRef.current = zoom;
-  const docRef = useRef<unknown>(null);
-  const renderTaskRef = useRef<{ cancel: () => void } | null>(null);
-
-  const renderPage = useCallback(async (pageNum: number) => {
-    if (!pdfjsLib || !docRef.current) return;
-    const doc = docRef.current as { numPages: number; getPage: (n: number) => Promise<unknown> };
-    if (pageNum < 1 || pageNum > doc.numPages) return;
-
-    // Cancel previous render
-    if (renderTaskRef.current) {
-      renderTaskRef.current.cancel();
-      renderTaskRef.current = null;
-    }
-
-    try {
-      const page = await doc.getPage(pageNum) as {
-        getViewport: (opt: { scale: number }) => { width: number; height: number };
-        render: (opt: { canvas: HTMLCanvasElement; viewport: { width: number; height: number } }) => { promise: Promise<void> };
-      };
-      const viewport = page.getViewport({ scale: zoomRef.current * (window.devicePixelRatio || 1) });
-
-      const container = containerRef.current;
-      if (!container) return;
-
-      // Find or create canvas
-      let canvas = container.querySelector("canvas") as HTMLCanvasElement | null;
-      if (!canvas) {
-        canvas = document.createElement("canvas");
-        canvas.style.display = "block";
-        canvas.style.margin = "0 auto";
-        container.innerHTML = "";
-        container.appendChild(canvas);
-      }
-
-      canvas.width = viewport.width;
-      canvas.height = viewport.height;
-      canvas.style.width = `${viewport.width / (window.devicePixelRatio || 1)}px`;
-      canvas.style.height = `${viewport.height / (window.devicePixelRatio || 1)}px`;
-
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-
-      const renderTask = page.render({ canvas, viewport });
-      renderTaskRef.current = renderTask as unknown as { cancel: () => void };
-      await renderTask.promise;
-      renderTaskRef.current = null;
-    } catch (err: unknown) {
-      if ((err as { name?: string }).name !== "RenderingCancelledException") {
-        console.error("PDF render error:", err);
-      }
-    }
-  }, []);
-
-  // Load PDF document once when arrayBuffer changes
-  useEffect(() => {
-    let cancelled = false;
-
-    async function load() {
-      setLoading(true);
-      setError(null);
-
-      try {
-        if (!pdfjsLib) {
-          pdfjsLib = await import("pdfjs-dist/legacy/build/pdf.mjs") as typeof import("pdfjs-dist");
-          pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
-            "pdfjs-dist/legacy/build/pdf.worker.min.mjs",
-            import.meta.url
-          ).toString();
-        }
-
-        const doc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
-        if (cancelled) return;
-        docRef.current = doc;
-        setPageCount(doc.numPages);
-        setCurrentPage(1);
-        setLoading(false);
-      } catch (err: unknown) {
-        if (!cancelled) {
-          setError(String(err));
-          setLoading(false);
-        }
-      }
-    }
-
-    load();
-    return () => {
-      cancelled = true;
-      if (renderTaskRef.current) {
-        renderTaskRef.current.cancel();
-        renderTaskRef.current = null;
-      }
-    };
-  }, [arrayBuffer]);
-
-  // Render first page after load + re-render on page change
-  useEffect(() => {
-    if (!loading && pageCount > 0) {
-      renderPage(currentPage);
-    }
-  }, [loading, currentPage, pageCount, renderPage]);
-
-  // Re-render on zoom change
-  useEffect(() => {
-    if (!loading && pageCount > 0) {
-      renderPage(currentPage);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [zoom]);
-
-  return (
-    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
-      <DocumentToolbar
-        fileName={fileName}
-        pageInfo={pageCount > 0 ? `Page ${currentPage} / ${pageCount}` : undefined}
-        zoom={zoom}
-        onZoomIn={() => setZoom((z) => Math.min(z + 0.25, 3))}
-        onZoomOut={() => setZoom((z) => Math.max(z - 0.25, 0.25))}
-        extra={
-          pageCount > 1 && (
-            <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
-              <button
-                onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
-                disabled={currentPage <= 1}
-                style={{ ...toolbarBtnStyle, opacity: currentPage <= 1 ? 0.4 : 1 }}
-              >
-                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
-                  <polyline points="6 2 3 5 6 8" />
-                </svg>
-              </button>
-              <span style={{ fontSize: 11, color: "var(--text-dim)", minWidth: 28, textAlign: "center" }}>
-                {currentPage}/{pageCount}
-              </span>
-              <button
-                onClick={() => setCurrentPage((p) => Math.min(p + 1, pageCount))}
-                disabled={currentPage >= pageCount}
-                style={{ ...toolbarBtnStyle, opacity: currentPage >= pageCount ? 0.4 : 1 }}
-              >
-                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
-                  <polyline points="4 2 7 5 4 8" />
-                </svg>
-              </button>
-            </div>
-          )
-        }
-      />
-      <div
-        style={{
-          flex: 1,
-          overflow: "auto",
-          background: "#525659",
-          display: "flex",
-          justifyContent: "center",
-          padding: 16,
-        }}
-      >
-        {loading && (
-          <div style={{ color: "#ccc", fontSize: 13, display: "flex", alignItems: "center", gap: 6, alignSelf: "flex-start", marginTop: 40 }}>
-            Loading PDF...
-          </div>
-        )}
-        {error && (
-          <div style={{ color: "#f87171", fontSize: 13, alignSelf: "flex-start", marginTop: 40 }}>{error}</div>
-        )}
-        <div ref={containerRef} style={{ visibility: loading ? "hidden" : "visible" }} />
-      </div>
-    </div>
-  );
-}
-
-const toolbarBtnStyle: React.CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: 24,
-  height: 24,
-  padding: 0,
-  background: "none",
-  border: "1px solid var(--border)",
-  borderRadius: 4,
-  color: "var(--text-muted)",
-  cursor: "pointer",
-};

package/components/viewers/PptxViewer.tsx

@@ -1,240 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { DocumentToolbar } from "./DocumentToolbar";
-
-interface Props {
-  arrayBuffer: ArrayBuffer;
-  fileName?: string;
-}
-
-interface SlideInfo {
-  index: number;
-  texts: string[];
-}
-
-export function PptxViewer({ arrayBuffer, fileName }: Props) {
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [slides, setSlides] = useState<SlideInfo[]>([]);
-  const [activeSlide, setActiveSlide] = useState(0);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    async function parse() {
-      setLoading(true);
-      setError(null);
-
-      try {
-        const JSZip = (await import("jszip")).default;
-        const zip = await JSZip.loadAsync(arrayBuffer);
-
-        // Find slide files: ppt/slides/slideN.xml
-        const slideFiles: { name: string; index: number }[] = [];
-        zip.forEach((relativePath) => {
-          const match = /^ppt\/slides\/slide(\d+)\.xml$/i.exec(relativePath);
-          if (match) {
-            slideFiles.push({ name: relativePath, index: parseInt(match[1], 10) });
-          }
-        });
-        slideFiles.sort((a, b) => a.index - b.index);
-
-        const parsedSlides: SlideInfo[] = [];
-
-        for (const sf of slideFiles) {
-          if (cancelled) return;
-          const xmlStr = await zip.file(sf.name)!.async("string");
-
-          // Extract text from <a:t> elements
-          const textRegex = /<a:t[^>]*>([^<]*)<\/a:t>/g;
-          const texts: string[] = [];
-          let match: RegExpExecArray | null;
-          while ((match = textRegex.exec(xmlStr)) !== null) {
-            const t = match[1].trim();
-            if (t) texts.push(t);
-          }
-
-          // Extract image references for potential future use
-          // const imgRegex = /<a:blip[^>]*r:embed="([^"]+)"/g;
-
-          parsedSlides.push({ index: sf.index, texts });
-        }
-
-        if (!cancelled) {
-          setSlides(parsedSlides);
-          setLoading(false);
-        }
-      } catch (err: unknown) {
-        if (!cancelled) {
-          console.error("PPTX parse error:", err);
-          setError(String(err));
-          setLoading(false);
-        }
-      }
-    }
-
-    parse();
-    return () => { cancelled = true; };
-  }, [arrayBuffer]);
-
-  const currentSlide = slides[activeSlide];
-  const slideCount = slides.length;
-
-  return (
-    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
-      <DocumentToolbar
-        fileName={fileName}
-        pageInfo={slideCount > 0 ? `Slide ${activeSlide + 1} / ${slideCount}` : undefined}
-        extra={
-          slideCount > 1 && (
-            <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
-              <button
-                onClick={() => setActiveSlide((s) => Math.max(s - 1, 0))}
-                disabled={activeSlide <= 0}
-                style={{ ...toolbarBtnStyle, opacity: activeSlide <= 0 ? 0.4 : 1 }}
-              >
-                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
-                  <polyline points="6 2 3 5 6 8" />
-                </svg>
-              </button>
-              <span style={{ fontSize: 11, color: "var(--text-dim)", minWidth: 28, textAlign: "center" }}>
-                {activeSlide + 1}/{slideCount}
-              </span>
-              <button
-                onClick={() => setActiveSlide((s) => Math.min(s + 1, slideCount - 1))}
-                disabled={activeSlide >= slideCount - 1}
-                style={{ ...toolbarBtnStyle, opacity: activeSlide >= slideCount - 1 ? 0.4 : 1 }}
-              >
-                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
-                  <polyline points="4 2 7 5 4 8" />
-                </svg>
-              </button>
-            </div>
-          )
-        }
-      />
-      <div style={{ flex: 1, overflow: "auto", background: "var(--bg-panel)", display: "flex", justifyContent: "center", alignItems: "flex-start", padding: 24 }}>
-        {loading && (
-          <div style={{ color: "var(--text-muted)", fontSize: 13, padding: "40px 16px", textAlign: "center" }}>
-            Loading presentation...
-          </div>
-        )}
-        {error && (
-          <div style={{ color: "#f87171", fontSize: 13, padding: "40px 16px", textAlign: "center" }}>{error}</div>
-        )}
-        {!loading && !error && currentSlide && (
-          <div
-            style={{
-              width: "100%",
-              maxWidth: 800,
-            }}
-          >
-            {/* Slide preview card */}
-            <div
-              style={{
-                background: "#fff",
-                border: "1px solid var(--border)",
-                borderRadius: 8,
-                boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
-                overflow: "hidden",
-              }}
-            >
-              {/* Slide header mimicking title bar */}
-              <div
-                style={{
-                  padding: "8px 16px",
-                  background: "var(--bg)",
-                  borderBottom: "1px solid var(--border)",
-                  fontSize: 11,
-                  color: "var(--text-dim)",
-                  fontFamily: "var(--font-mono)",
-                }}
-              >
-                Slide {currentSlide.index}
-              </div>
-              {/* Slide content */}
-              <div style={{ padding: "24px 32px 40px", minHeight: 200 }}>
-                {currentSlide.texts.length === 0 ? (
-                  <div style={{ color: "var(--text-dim)", fontStyle: "italic", fontSize: 13 }}>(No text content)</div>
-                ) : (
-                  <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
-                    {currentSlide.texts.map((text, i) => (
-                      <li
-                        key={i}
-                        style={{
-                          padding: "4px 0",
-                          fontSize: 14,
-                          lineHeight: 1.6,
-                          color: "var(--text)",
-                          borderBottom: i < currentSlide.texts.length - 1 ? "1px solid var(--bg-panel)" : "none",
-                        }}
-                      >
-                        {text}
-                      </li>
-                    ))}
-                  </ul>
-                )}
-              </div>
-            </div>
-
-            {/* All slides list */}
-            {slideCount > 1 && (
-              <div style={{ marginTop: 24 }}>
-                <div style={{ fontSize: 12, color: "var(--text-dim)", marginBottom: 8 }}>All slides</div>
-                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: 8 }}>
-                  {slides.map((slide, i) => (
-                    <button
-                      key={slide.index}
-                      onClick={() => setActiveSlide(i)}
-                      style={{
-                        padding: "10px 12px",
-                        background: i === activeSlide ? "var(--bg-selected)" : "var(--bg)",
-                        border: i === activeSlide ? "2px solid var(--accent)" : "1px solid var(--border)",
-                        borderRadius: 6,
-                        cursor: "pointer",
-                        textAlign: "left",
-                        fontSize: 11,
-                        color: "var(--text-muted)",
-                        transition: "border-color 0.12s, background 0.12s",
-                      }}
-                      onMouseEnter={(e) => {
-                        if (i !== activeSlide) e.currentTarget.style.background = "var(--bg-hover)";
-                      }}
-                      onMouseLeave={(e) => {
-                        if (i !== activeSlide) e.currentTarget.style.background = "var(--bg)";
-                      }}
-                    >
-                      <div style={{ fontWeight: 600, marginBottom: 2, color: "var(--text)" }}>Slide {slide.index}</div>
-                      <div style={{
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                      }}>
-                        {slide.texts[0] || "(empty)"}
-                      </div>
-                    </button>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-const toolbarBtnStyle: React.CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: 24,
-  height: 24,
-  padding: 0,
-  background: "none",
-  border: "1px solid var(--border)",
-  borderRadius: 4,
-  color: "var(--text-muted)",
-  cursor: "pointer",
-};

package/components/viewers/XlsxViewer.tsx

@@ -1,143 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import { DocumentToolbar } from "./DocumentToolbar";
-
-interface Props {
-  arrayBuffer: ArrayBuffer;
-  fileName?: string;
-}
-
-interface SheetInfo {
-  name: string;
-  html: string;
-}
-
-export function XlsxViewer({ arrayBuffer, fileName }: Props) {
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [sheets, setSheets] = useState<SheetInfo[]>([]);
-  const [activeSheet, setActiveSheet] = useState(0);
-  const tableRef = useRef<HTMLDivElement>(null);
-  const [frozen, setFrozen] = useState(false);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    async function parse() {
-      setLoading(true);
-      setError(null);
-
-      try {
-        const XLSX = await import("xlsx");
-        const workbook = XLSX.read(arrayBuffer, { type: "array" });
-
-        const sheetInfos: SheetInfo[] = workbook.SheetNames.map((name) => {
-          const sheet = workbook.Sheets[name];
-          const html = XLSX.utils.sheet_to_html(sheet, { editable: false });
-          return { name, html };
-        });
-
-        if (!cancelled) {
-          setSheets(sheetInfos);
-          setActiveSheet(0);
-          setLoading(false);
-        }
-      } catch (err: unknown) {
-        if (!cancelled) {
-          console.error("XLSX parse error:", err);
-          setError(String(err));
-          setLoading(false);
-        }
-      }
-    }
-
-    parse();
-    return () => { cancelled = true; };
-  }, [arrayBuffer]);
-
-  // Freeze detection for wide tables
-  useEffect(() => {
-    const el = tableRef.current;
-    if (!el) return;
-    const table = el.querySelector("table");
-    if (!table) return;
-
-    const check = () => {
-      const cols = table.querySelectorAll("colgroup col, thead tr:first-child th, tbody tr:first-child td").length;
-      setFrozen(cols > 8);
-    };
-
-    check();
-    const observer = new ResizeObserver(check);
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [activeSheet, sheets]);
-
-  return (
-    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
-      <DocumentToolbar
-        fileName={fileName}
-        extra={
-          sheets.length > 1 && (
-            <div style={{ display: "flex", alignItems: "center", gap: 2 }}>
-              {sheets.map((s, i) => (
-                <button
-                  key={i}
-                  onClick={() => setActiveSheet(i)}
-                  style={{
-                    padding: "2px 10px",
-                    fontSize: 11,
-                    border: "1px solid var(--border)",
-                    borderBottom: i === activeSheet ? "2px solid var(--accent)" : "1px solid var(--border)",
-                    borderRadius: "4px 4px 0 0",
-                    background: i === activeSheet ? "var(--bg-selected)" : "none",
-                    color: i === activeSheet ? "var(--text)" : "var(--text-muted)",
-                    cursor: "pointer",
-                    fontWeight: i === activeSheet ? 600 : 400,
-                    transition: "background 0.12s",
-                  }}
-                  onMouseEnter={(e) => {
-                    if (i !== activeSheet) e.currentTarget.style.background = "var(--bg-hover)";
-                  }}
-                  onMouseLeave={(e) => {
-                    if (i !== activeSheet) e.currentTarget.style.background = "none";
-                  }}
-                >
-                  {s.name}
-                </button>
-              ))}
-            </div>
-          )
-        }
-      />
-      <div
-        style={{
-          flex: 1,
-          overflow: "auto",
-          background: "var(--bg-panel)",
-        }}
-      >
-        {loading && (
-          <div style={{ color: "var(--text-muted)", fontSize: 13, padding: "40px 16px", textAlign: "center" }}>
-            Loading spreadsheet...
-          </div>
-        )}
-        {error && (
-          <div style={{ color: "#f87171", fontSize: 13, padding: "40px 16px", textAlign: "center" }}>{error}</div>
-        )}
-        {!loading && !error && sheets.length > 0 && (
-          <div
-            ref={tableRef}
-            style={{
-              padding: "0 16px 16px",
-              overflow: frozen ? "auto" : "visible",
-            }}
-            dangerouslySetInnerHTML={{ __html: sheets[activeSheet]?.html ?? "" }}
-            className="xlsx-preview"
-          />
-        )}
-      </div>
-    </div>
-  );
-}