@seqyuan/annodex 0.1.10 → 0.1.12

package/components/WidgetRenderer.tsx

@@ -0,0 +1,505 @@
+"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

@@ -0,0 +1,78 @@
+"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

@@ -0,0 +1,97 @@
+"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>
+  );
+}