@seqyuan/annodex 0.1.12 → 0.1.13

package/components/WidgetRenderer.tsx

@@ -1,505 +0,0 @@
-"use client";
-
-import { useRef, useEffect, useState, useCallback, useMemo } from "react";
-import { useTheme } from "@/hooks/useTheme";
-import {
-  buildShowWidgetSource,
-  copyTextToClipboard,
-  downloadBlob,
-  exportWidgetPng,
-  safeWidgetFilename,
-} from "@/lib/widget-export";
-import type { WidgetCapturePayload } from "@/lib/widget-export";
-import {
-  buildReceiverSrcdoc,
-  getWidgetIframeStyleBlock,
-  resolveWidgetThemeVars,
-  sanitizeForIframe,
-  sanitizeForStreaming,
-} from "@/lib/widget-utils";
-
-interface Props {
-  code: string;
-  isStreaming: boolean;
-  title?: string;
-  showOverlay?: boolean;
-  onSendMessage?: (message: string) => void;
-}
-
-const MAX_HEIGHT = 2000;
-const STREAM_DEBOUNCE = 120;
-const CDN_PATTERN = /cdnjs\.cloudflare\.com|cdn\.jsdelivr\.net|unpkg\.com|esm\.sh/;
-const heightCache = new Map<string, number>();
-const CAPTURE_TIMEOUT = 2500;
-
-function getHeightCacheKey(code: string): string {
-  return code.slice(0, 200);
-}
-
-export function WidgetRenderer({ code, isStreaming, title, showOverlay, onSendMessage }: Props) {
-  const { isDark } = useTheme();
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const statusTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const captureRequestsRef = useRef(new Map<string, {
-    resolve: (payload: WidgetCapturePayload) => void;
-    reject: (error: Error) => void;
-    timeout: ReturnType<typeof setTimeout>;
-  }>());
-  const lastSentRef = useRef("");
-  const [iframeReady, setIframeReady] = useState(false);
-  const [iframeHeight, setIframeHeight] = useState(() => heightCache.get(getHeightCacheKey(code)) ?? 0);
-  const [showCode, setShowCode] = useState(false);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const [actionStatus, setActionStatus] = useState<string | null>(null);
-  const [isExporting, setIsExporting] = useState(false);
-  const [finalized, setFinalized] = useState(false);
-  const finalizedCodeRef = useRef("");
-  const hasReceivedFirstHeight = useRef((heightCache.get(getHeightCacheKey(code)) ?? 0) > 0);
-  const heightLockedRef = useRef(false);
-  const initialIsDarkRef = useRef(isDark);
-
-  const hasCDN = useMemo(() => CDN_PATTERN.test(code), [code]);
-  const srcdoc = useMemo(() => {
-    const vars = typeof document === "undefined" ? {} : resolveWidgetThemeVars();
-    return buildReceiverSrcdoc(getWidgetIframeStyleBlock(vars), initialIsDarkRef.current);
-  }, []);
-
-  // postMessage handler
-  useEffect(() => {
-    function handleMessage(e: MessageEvent) {
-      if (!e.data || typeof e.data.type !== "string") return;
-      if (iframeRef.current && e.source !== iframeRef.current.contentWindow) return;
-
-      switch (e.data.type) {
-        case "widget:ready":
-          setIframeReady(true);
-          break;
-        case "widget:captured": {
-          const requestId = String(e.data.requestId ?? "");
-          const request = captureRequestsRef.current.get(requestId);
-          if (!request) break;
-          clearTimeout(request.timeout);
-          captureRequestsRef.current.delete(requestId);
-          request.resolve({
-            html: typeof e.data.html === "string" ? e.data.html : null,
-            styles: typeof e.data.styles === "string" ? e.data.styles : "",
-            canvases: Array.isArray(e.data.canvases) ? e.data.canvases : [],
-            bodyWidth: typeof e.data.bodyWidth === "number" ? e.data.bodyWidth : undefined,
-            bodyHeight: typeof e.data.bodyHeight === "number" ? e.data.bodyHeight : undefined,
-          });
-          break;
-        }
-        case "widget:resize":
-          if (typeof e.data.height === "number" && e.data.height > 0) {
-            const nextHeight = Math.min(e.data.height + 2, MAX_HEIGHT);
-            const cacheKey = getHeightCacheKey(code);
-            if (heightLockedRef.current) {
-              setIframeHeight((prev) => {
-                const stableHeight = Math.max(prev, nextHeight);
-                heightCache.set(cacheKey, stableHeight);
-                return stableHeight;
-              });
-              break;
-            }
-
-            heightCache.set(cacheKey, nextHeight);
-            if (!hasReceivedFirstHeight.current) {
-              hasReceivedFirstHeight.current = true;
-              const el = iframeRef.current;
-              if (el) {
-                el.style.transition = "none";
-                void el.offsetHeight;
-              }
-              setIframeHeight(nextHeight);
-              requestAnimationFrame(() => {
-                if (el) el.style.transition = "height 0.2s ease-out";
-              });
-            } else {
-              setIframeHeight(nextHeight);
-            }
-          }
-          break;
-        case "widget:link": {
-          const href = String(e.data.href ?? "");
-          if (href && !/^\s*(javascript|data)\s*:/i.test(href)) {
-            window.open(href, "_blank", "noopener,noreferrer");
-          }
-          break;
-        }
-        case "widget:sendMessage": {
-          const text = String(e.data.text ?? "");
-          if (text && text.length <= 500) {
-            onSendMessage?.(text);
-          }
-          break;
-        }
-        case "widget:publish": {
-          window.dispatchEvent(new CustomEvent("widget-cross-publish", {
-            detail: { topic: e.data.topic, data: e.data.data, sourceIframe: iframeRef.current },
-          }));
-          break;
-        }
-      }
-    }
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, [code, onSendMessage]);
-
-  useEffect(() => {
-    const pendingCaptures = captureRequestsRef.current;
-    return () => {
-      if (statusTimerRef.current) clearTimeout(statusTimerRef.current);
-      for (const request of pendingCaptures.values()) {
-        clearTimeout(request.timeout);
-        request.reject(new Error("Widget renderer unmounted."));
-      }
-      pendingCaptures.clear();
-    };
-  }, []);
-
-  useEffect(() => {
-    function handleCrossPublish(e: Event) {
-      const detail = (e as CustomEvent).detail as { topic?: unknown; data?: unknown; sourceIframe?: HTMLIFrameElement | null } | undefined;
-      if (!iframeRef.current?.contentWindow || detail?.sourceIframe === iframeRef.current) return;
-      iframeRef.current.contentWindow.postMessage(
-        { type: "widget:crossFilter", payload: { topic: detail?.topic, data: detail?.data } },
-        "*",
-      );
-    }
-    window.addEventListener("widget-cross-publish", handleCrossPublish);
-    return () => window.removeEventListener("widget-cross-publish", handleCrossPublish);
-  }, []);
-
-  // Streaming updates
-  const sendUpdate = useCallback((html: string) => {
-    const iframe = iframeRef.current;
-    if (!iframe?.contentWindow) return;
-    if (html === lastSentRef.current) return;
-    lastSentRef.current = html;
-    iframe.contentWindow.postMessage({ type: "widget:update", html }, "*");
-  }, []);
-
-  useEffect(() => {
-    if (!isStreaming || !iframeReady) return;
-    const sanitized = sanitizeForStreaming(code);
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => sendUpdate(sanitized), STREAM_DEBOUNCE);
-    return () => { if (debounceRef.current) clearTimeout(debounceRef.current); };
-  }, [code, isStreaming, iframeReady, sendUpdate]);
-
-  // Finalize
-  useEffect(() => {
-    if (isStreaming || !iframeReady) return;
-    if (finalizedCodeRef.current === code) return;
-    const sanitized = sanitizeForIframe(code);
-    const iframe = iframeRef.current;
-    if (!iframe?.contentWindow) return;
-    finalizedCodeRef.current = code;
-    lastSentRef.current = sanitized;
-    heightLockedRef.current = true;
-    setFinalized(false);
-    iframe.contentWindow.postMessage({ type: "widget:finalize", html: sanitized }, "*");
-    const id = setTimeout(() => {
-      heightLockedRef.current = false;
-      setFinalized(true);
-    }, 450);
-    return () => clearTimeout(id);
-  }, [isStreaming, iframeReady, code]);
-
-  useEffect(() => {
-    if (!iframeReady) return;
-
-    const sendTheme = () => {
-      iframeRef.current?.contentWindow?.postMessage(
-        { type: "widget:theme", vars: resolveWidgetThemeVars(), isDark },
-        "*",
-      );
-    };
-
-    sendTheme();
-    const observer = new MutationObserver(sendTheme);
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
-    return () => observer.disconnect();
-  }, [iframeReady, isDark]);
-
-  useEffect(() => {
-    if (!isFullscreen) return;
-
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setIsFullscreen(false);
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.body.style.overflow = previousOverflow;
-      window.removeEventListener("keydown", onKeyDown);
-    };
-  }, [isFullscreen]);
-
-  const setTemporaryStatus = useCallback((message: string) => {
-    if (statusTimerRef.current) clearTimeout(statusTimerRef.current);
-    setActionStatus(message);
-    statusTimerRef.current = setTimeout(() => setActionStatus(null), 1800);
-  }, []);
-
-  const requestWidgetCapture = useCallback(() => {
-    const targetWindow = iframeRef.current?.contentWindow;
-    if (!targetWindow) {
-      return Promise.reject(new Error("Widget iframe is not ready."));
-    }
-
-    return new Promise<WidgetCapturePayload>((resolve, reject) => {
-      const requestId = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
-      const timeout = setTimeout(() => {
-        captureRequestsRef.current.delete(requestId);
-        reject(new Error("Timed out waiting for widget capture."));
-      }, CAPTURE_TIMEOUT);
-
-      captureRequestsRef.current.set(requestId, { resolve, reject, timeout });
-      targetWindow.postMessage({ type: "widget:capture", requestId }, "*");
-    });
-  }, []);
-
-  const copyShowWidgetSource = useCallback(async () => {
-    try {
-      await copyTextToClipboard(buildShowWidgetSource(code, title));
-      setTemporaryStatus("Copied source");
-    } catch {
-      setTemporaryStatus("Copy failed");
-    }
-  }, [code, title, setTemporaryStatus]);
-
-  const copyWidgetHtml = useCallback(async () => {
-    try {
-      await copyTextToClipboard(code);
-      setTemporaryStatus("Copied HTML/SVG");
-    } catch {
-      setTemporaryStatus("Copy failed");
-    }
-  }, [code, setTemporaryStatus]);
-
-  const exportPng = useCallback(async () => {
-    if (isStreaming || isExporting) return;
-    setIsExporting(true);
-    setTemporaryStatus("Exporting PNG...");
-
-    try {
-      let blob: Blob;
-      try {
-        blob = await exportWidgetPng({ code });
-      } catch {
-        const capture = await requestWidgetCapture();
-        blob = await exportWidgetPng({ code, capture });
-      }
-      downloadBlob(blob, `${safeWidgetFilename(title)}.png`);
-      setTemporaryStatus("Downloaded PNG");
-    } catch (error) {
-      console.warn("[WidgetRenderer] PNG export failed:", error);
-      setTemporaryStatus("PNG export unavailable");
-    } finally {
-      setIsExporting(false);
-    }
-  }, [code, title, isStreaming, isExporting, requestWidgetCapture, setTemporaryStatus]);
-
-  const showLoadingOverlay = showOverlay || (hasCDN && !isStreaming && iframeReady && !finalized);
-  const toolbarButtonStyle = {
-    width: 24,
-    height: 22,
-    padding: 0,
-    background: "var(--bg-hover)",
-    color: "var(--text-dim)",
-    border: "1px solid var(--border)",
-    borderRadius: 3,
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0,
-  };
-  const codeButtonStyle = { ...toolbarButtonStyle, width: 48, fontSize: 10, whiteSpace: "nowrap" as const };
-  const disabledButtonStyle = {
-    opacity: 0.45,
-    cursor: "not-allowed",
-  };
-
-  return (
-    <div
-      className="widget-frame"
-      style={{
-        position: isFullscreen ? "fixed" : "relative",
-        inset: isFullscreen ? 12 : undefined,
-        zIndex: isFullscreen ? 1000 : undefined,
-        marginTop: isFullscreen ? 0 : 4,
-        marginBottom: isFullscreen ? 0 : 4,
-        borderRadius: isFullscreen ? 8 : 6,
-        background: isFullscreen ? "var(--bg)" : undefined,
-        boxShadow: isFullscreen ? "0 24px 80px rgba(0, 0, 0, 0.35)" : undefined,
-        display: isFullscreen ? "flex" : undefined,
-        flexDirection: isFullscreen ? "column" : undefined,
-      }}
-    >
-      {/* Title bar */}
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 6,
-          padding: "4px 10px",
-          background: "var(--bg-panel)",
-          border: "1px solid var(--border)",
-          borderBottom: "none",
-          borderRadius: `${isFullscreen ? 8 : 6}px ${isFullscreen ? 8 : 6}px 0 0`,
-          fontSize: 11,
-          color: "var(--text-dim)",
-          minHeight: 26,
-          flexShrink: 0,
-        }}
-      >
-        <span style={{ fontWeight: 600, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-          {title || "Widget"}
-        </span>
-        {isStreaming && (
-          <span style={{ fontSize: 10, color: "var(--accent)", animation: "pulse 1.5s infinite", flexShrink: 0 }}>
-            streaming…
-          </span>
-        )}
-        {actionStatus && (
-          <span aria-live="polite" style={{ marginLeft: "auto", fontSize: 10, color: "var(--text-muted)", flexShrink: 0 }}>
-            {actionStatus}
-          </span>
-        )}
-        <div style={{ display: "flex", alignItems: "center", gap: 4, marginLeft: actionStatus ? 0 : "auto", flexShrink: 0 }}>
-          <button
-            onClick={copyShowWidgetSource}
-            title="Copy show-widget source"
-            aria-label="Copy show-widget source"
-            style={toolbarButtonStyle}
-          >
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <polyline points="16 18 22 12 16 6" />
-              <polyline points="8 6 2 12 8 18" />
-            </svg>
-          </button>
-          <button
-            onClick={copyWidgetHtml}
-            title="Copy widget HTML/SVG"
-            aria-label="Copy widget HTML/SVG"
-            style={toolbarButtonStyle}
-          >
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <rect x="9" y="9" width="13" height="13" rx="2" />
-              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-            </svg>
-          </button>
-          <button
-            onClick={exportPng}
-            disabled={isStreaming || isExporting}
-            title={isStreaming ? "PNG export is available after streaming finishes" : "Export widget as PNG"}
-            aria-label="Export widget as PNG"
-            style={{
-              ...toolbarButtonStyle,
-              ...((isStreaming || isExporting) ? disabledButtonStyle : null),
-            }}
-          >
-            {isExporting ? (
-              <span style={{ fontSize: 9 }}>...</span>
-            ) : (
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                <polyline points="7 10 12 15 17 10" />
-                <line x1="12" y1="15" x2="12" y2="3" />
-              </svg>
-            )}
-          </button>
-          <button
-            onClick={() => setIsFullscreen((v) => !v)}
-            title={isFullscreen ? "Exit full screen" : "View full screen"}
-            aria-label={isFullscreen ? "Exit full screen" : "View full screen"}
-            style={toolbarButtonStyle}
-          >
-            {isFullscreen ? (
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <polyline points="4 14 10 14 10 20" />
-                <polyline points="20 10 14 10 14 4" />
-                <line x1="14" y1="10" x2="21" y2="3" />
-                <line x1="3" y1="21" x2="10" y2="14" />
-              </svg>
-            ) : (
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <polyline points="15 3 21 3 21 9" />
-                <polyline points="9 21 3 21 3 15" />
-                <line x1="21" y1="3" x2="14" y2="10" />
-                <line x1="3" y1="21" x2="10" y2="14" />
-              </svg>
-            )}
-          </button>
-          <button
-            onClick={() => setShowCode((v) => !v)}
-            title={showCode ? "Show widget preview" : "Show widget code"}
-            style={codeButtonStyle}
-          >
-            {showCode ? "Preview" : "Code"}
-          </button>
-        </div>
-      </div>
-
-      {/* Code view */}
-      {showCode && (
-        <pre
-          style={{
-            margin: 0,
-            padding: "8px 10px",
-            fontSize: 11,
-            fontFamily: "var(--font-mono)",
-            color: "var(--text-muted)",
-            background: "var(--bg)",
-            border: "1px solid var(--border)",
-            borderRadius: "0 0 6px 6px",
-            overflow: "auto",
-            maxHeight: isFullscreen ? "none" : 400,
-            flex: isFullscreen ? 1 : undefined,
-            whiteSpace: "pre-wrap",
-          }}
-        >
-          {code}
-        </pre>
-      )}
-
-      {/* iframe */}
-      <iframe
-        ref={iframeRef}
-        sandbox="allow-scripts"
-        srcDoc={srcdoc}
-        title={title || "Widget"}
-        onLoad={() => setIframeReady(true)}
-        style={{
-          width: "100%",
-          height: isFullscreen ? "calc(100vh - 50px)" : iframeHeight,
-          minHeight: iframeHeight > 0 ? undefined : 80,
-          border: "1px solid var(--border)",
-          borderRadius: `0 0 ${isFullscreen ? 8 : 6}px ${isFullscreen ? 8 : 6}px`,
-          display: showCode ? "none" : "block",
-          overflow: "hidden",
-          background: "transparent",
-          flex: isFullscreen ? 1 : undefined,
-          transition: hasReceivedFirstHeight.current ? "height 0.2s ease-out" : "none",
-        }}
-      />
-
-      {showLoadingOverlay && !showCode && (
-        <div
-          className="widget-shimmer"
-          style={{
-            position: "absolute",
-            inset: 0,
-            top: 26,
-            pointerEvents: "none",
-            borderRadius: "0 0 6px 6px",
-          }}
-        />
-      )}
-    </div>
-  );
-}

package/components/viewers/DocumentToolbar.tsx

@@ -1,78 +0,0 @@
-"use client";
-
-import React from "react";
-
-interface Props {
-  fileName?: string;
-  pageInfo?: string;
-  onZoomIn?: () => void;
-  onZoomOut?: () => void;
-  zoom?: number;
-  extra?: React.ReactNode;
-}
-
-export function DocumentToolbar({ fileName, pageInfo, onZoomIn, onZoomOut, zoom, extra }: Props) {
-  return (
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        gap: 12,
-        padding: "4px 16px",
-        borderBottom: "1px solid var(--border)",
-        fontSize: 11,
-        color: "var(--text-dim)",
-        background: "var(--bg)",
-        flexShrink: 0,
-        minHeight: 32,
-      }}
-    >
-      {fileName && (
-        <span style={{ fontFamily: "var(--font-mono)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: 300 }} title={fileName}>
-          {fileName}
-        </span>
-      )}
-      <span style={{ marginLeft: "auto" }} />
-      {pageInfo && <span>{pageInfo}</span>}
-      {zoom !== undefined && onZoomOut && onZoomIn && (
-        <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
-          <button
-            onClick={onZoomOut}
-            title="Zoom out"
-            style={toolbarBtnStyle}
-          >
-            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
-              <line x1="2" y1="5" x2="8" y2="5" />
-            </svg>
-          </button>
-          <span style={{ minWidth: 36, textAlign: "center", fontVariantNumeric: "tabular-nums" }}>{Math.round(zoom * 100)}%</span>
-          <button
-            onClick={onZoomIn}
-            title="Zoom in"
-            style={toolbarBtnStyle}
-          >
-            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
-              <line x1="5" y1="2" x2="5" y2="8" />
-              <line x1="2" y1="5" x2="8" y2="5" />
-            </svg>
-          </button>
-        </div>
-      )}
-      {extra}
-    </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/DocxViewer.tsx

@@ -1,97 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import { DocumentToolbar } from "./DocumentToolbar";
-
-interface Props {
-  arrayBuffer: ArrayBuffer;
-  fileName?: string;
-}
-
-export function DocxViewer({ arrayBuffer, fileName }: Props) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    async function render() {
-      setLoading(true);
-      setError(null);
-
-      try {
-        const { renderAsync } = await import("docx-preview");
-
-        const container = containerRef.current;
-        if (!container || cancelled) return;
-
-        container.innerHTML = "";
-
-        await renderAsync(arrayBuffer, container, undefined, {
-          className: "docx-preview",
-          inWrapper: true,
-          ignoreWidth: false,
-          ignoreHeight: false,
-          ignoreFonts: false,
-          breakPages: true,
-          ignoreLastRenderedPageBreak: false,
-          experimental: false,
-          trimXmlDeclaration: true,
-          useBase64URL: false,
-          renderChanges: false,
-          renderHeaders: true,
-          renderFooters: true,
-          renderFootnotes: true,
-          renderEndnotes: true,
-        });
-
-        if (!cancelled) setLoading(false);
-      } catch (err: unknown) {
-        if (!cancelled) {
-          console.error("DOCX render error:", err);
-          setError(String(err));
-          setLoading(false);
-        }
-      }
-    }
-
-    render();
-    return () => { cancelled = true; };
-  }, [arrayBuffer]);
-
-  return (
-    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
-      <DocumentToolbar fileName={fileName} />
-      <div
-        style={{
-          flex: 1,
-          overflow: "auto",
-          background: "#e8e8e8",
-          padding: "24px 0",
-        }}
-      >
-        {loading && (
-          <div style={{ color: "var(--text-muted)", fontSize: 13, padding: "40px 16px", textAlign: "center" }}>
-            Loading document...
-          </div>
-        )}
-        {error && (
-          <div style={{ color: "#f87171", fontSize: 13, padding: "40px 16px", textAlign: "center" }}>{error}</div>
-        )}
-        <div
-          ref={containerRef}
-          style={{
-            maxWidth: 816,
-            margin: "0 auto",
-            background: "#fff",
-            boxShadow: "0 1px 4px rgba(0,0,0,0.12)",
-            minHeight: 100,
-            visibility: loading ? "hidden" : "visible",
-          }}
-          className="docx-preview-container"
-        />
-      </div>
-    </div>
-  );
-}