@anchrd/intel 0.59.0

package/ui/src/file-preview/file-preview-view.tsx

@@ -0,0 +1,496 @@
+import FileViewer, {
+  type FileViewerHandle,
+  type ViewerOptions,
+  type ViewerState,
+  type ViewerViewState,
+} from "@file-viewer/react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Minus,
+  PanelLeft,
+  Plus,
+  RotateCcw,
+  RotateCw,
+  Search,
+  X,
+} from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { useResolvedTheme } from "@/theme/theme-context.tsx";
+
+// The PDF renderer exposes no stable Shadow Parts for its navigation internals. These selectors
+// intentionally target the pinned @file-viewer/renderer-pdf 2.3.0 DOM; verify them before upgrades.
+const viewerTheme = `
+:host,.file-viewer-web-shell{
+  --file-viewer-render-surface-background:var(--muted);
+  --file-viewer-bg:var(--background);--file-viewer-content-bg:var(--muted);
+  --file-viewer-text:var(--foreground);--file-viewer-muted:var(--muted-foreground);
+  --file-viewer-border:var(--border);--file-viewer-toolbar-bg:var(--background);
+  --file-viewer-toolbar-border:var(--border);--file-viewer-group-bg:var(--muted);
+  --file-viewer-group-border:var(--border);--file-viewer-button-color:var(--foreground);
+  --file-viewer-button-hover-bg:var(--accent);--file-viewer-button-hover-color:var(--accent-foreground);
+  --file-viewer-button-disabled-color:var(--muted-foreground);--file-viewer-input-bg:var(--background);
+  --file-viewer-input-color:var(--foreground);--file-viewer-focus-ring:var(--ring);
+}
+.pdf-shell,.pdf-wrapper{background:var(--muted)!important;color:var(--foreground)!important}
+.pdf-nav-pane,.pdf-nav-tabs,.pdf-nav-head{background:var(--background)!important;border-color:var(--border)!important}
+@media (min-width:721px){.pdf-shell:not(.pdf-shell--nav-hidden) .pdf-content{grid-template-columns:4rem minmax(0,1fr)!important}}
+.pdfViewer{padding-inline:0!important}.pdfViewer .page{border-inline:0!important}
+.pdf-nav-head{display:none!important}.pdf-nav-tabs{display:flex!important;justify-content:center;padding:4px 0!important}
+.pdf-nav-tabs:not([data-outline-available="true"]){display:none!important}.pdf-nav-tabs button.active{display:none!important}
+.pdf-nav-tabs button{width:30px;min-width:30px;padding:0;border:0!important;box-shadow:none!important;font-size:0;color:var(--muted-foreground)!important}
+.pdf-nav-tabs button svg{width:15px;height:15px;margin:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
+.pdf-nav-tabs button:hover,.pdf-nav-tabs button.active{background:var(--accent)!important;border:0!important;color:var(--accent-foreground)!important}
+.pdf-page-list{gap:2px!important;padding:4px 0!important}.pdf-page-button{display:flex!important;width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;margin-inline:auto!important;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important;color:var(--foreground)!important;justify-content:center!important}
+.pdf-page-button:hover,.pdf-page-button--active{background:var(--accent)!important;border:0!important;box-shadow:none!important}
+.pdf-page-thumb{width:24px!important;height:24px!important;border:0!important;background:transparent!important;color:var(--foreground)!important}
+.pdf-page-label{display:none!important}.pdf-outline-button{color:var(--foreground)!important}.pdf-outline-button:hover{background:var(--accent)!important;border-color:var(--border)!important}
+`;
+
+export function FilePreviewView({
+  file,
+  renderer,
+  pdf = false,
+}: {
+  file: File;
+  renderer: unknown;
+  pdf?: boolean;
+}) {
+  const theme = useResolvedTheme();
+  const i18n = useI18n();
+  const viewer = useRef<FileViewerHandle>(null);
+  const searchInput = useRef<HTMLInputElement>(null);
+  const pdfFit = useRef({ enabled: true, page: 0, pageWidthAtScaleOne: 0, rotation: 0 });
+  const schedulePdfFit = useRef<(() => void) | null>(null);
+  const [state, setState] = useState<ViewerState | null>(null);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const options = useMemo<ViewerOptions>(
+    () => ({
+      renderers: [renderer] as unknown as NonNullable<ViewerOptions["renderers"]>,
+      rendererMode: "replace",
+      builtinRenderers: "none",
+      autoRenderers: false,
+      styleIsolation: "shadow",
+      theme,
+      locale: "auto",
+      toolbar: false,
+      ...(pdf
+        ? {
+            fit: { mode: "width", resize: "until-interaction", padding: 0 },
+            pdf: { toolbar: false, navigation: true, defaultNavigationVisible: false },
+          }
+        : {}),
+      ui: { density: "compact", surfaceBackground: "transparent" },
+    }),
+    [pdf, renderer, theme],
+  );
+  const viewState = state?.viewState;
+  const page = viewState?.page ?? 1;
+  const pageCount = viewState?.pageCount ?? 0;
+  const scale = state?.zoom?.scale ?? viewState?.scale ?? 1;
+  const search = state?.search;
+  const latestView = useRef({ page, rotation: viewState?.rotation ?? 0, scale });
+  const pdfPageRequest = useRef({ page, pending: false });
+  latestView.current = { page, rotation: viewState?.rotation ?? 0, scale };
+
+  useEffect(() => {
+    const request = pdfPageRequest.current;
+    if (!request.pending || request.page === page) {
+      request.page = page;
+      request.pending = false;
+    }
+  }, [page]);
+
+  useEffect(() => {
+    if (!state?.ready) return;
+    const root = viewer.current?.getController()?.container.shadowRoot;
+    if (!root) return;
+    if (!root.querySelector("style[data-intel-viewer-theme]")) {
+      const style = document.createElement("style");
+      style.dataset.intelViewerTheme = "true";
+      style.textContent = viewerTheme;
+      root.append(style);
+    }
+    const adaptNavigation = () => {
+      for (const button of root.querySelectorAll<HTMLButtonElement>(".pdf-page-button")) {
+        const label = button.querySelector(".pdf-page-label")?.textContent?.trim();
+        if (label) button.title = label;
+      }
+      const tabs = root.querySelector<HTMLElement>(".pdf-nav-tabs");
+      const buttons = tabs?.querySelectorAll<HTMLButtonElement>("button");
+      if (tabs && buttons?.length === 2) {
+        tabs.setAttribute("role", "group");
+        for (const [index, button] of buttons.entries()) {
+          button.setAttribute("role", "button");
+          button.removeAttribute("aria-selected");
+          if (!button.querySelector("[data-intel-navigation-icon]")) {
+            const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            svg.dataset.intelNavigationIcon = "true";
+            svg.setAttribute("viewBox", "0 0 24 24");
+            svg.setAttribute("aria-hidden", "true");
+            const paths =
+              index === 0
+                ? ["M8 6h13M8 12h13M8 18h13", "M3 6h.01M3 12h.01M3 18h.01"]
+                : ["M4 6h7M9 12h11M13 18h7", "M4 6v12h9M9 6v6M13 12v6"];
+            for (const pathData of paths) {
+              const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+              path.setAttribute("d", pathData);
+              svg.append(path);
+            }
+            button.prepend(svg);
+          }
+          if (button.dataset.intelNavigationAdapted !== "true") {
+            button.dataset.intelNavigationAdapted = "true";
+            button.addEventListener("click", () => {
+              if (root.activeElement === button) buttons[index === 0 ? 1 : 0]?.focus();
+              for (const tabButton of buttons) tabButton.removeAttribute("aria-selected");
+            });
+          }
+        }
+      }
+    };
+    let outlineObserver: MutationObserver;
+    let outlineTarget: HTMLElement | null = null;
+    const probeOutline = () => {
+      const tabs = root.querySelector<HTMLElement>(".pdf-nav-tabs");
+      const [pagesTab, outlineTab] = tabs?.querySelectorAll<HTMLButtonElement>("button") ?? [];
+      const navPane = root.querySelector<HTMLElement>(".pdf-nav-pane");
+      const navList = root.querySelector<HTMLElement>(".pdf-page-list,.pdf-outline-list");
+      if (!tabs || !pagesTab || !outlineTab || !navPane || !navList) return;
+
+      outlineObserver.disconnect();
+      const startedInOutline = outlineTab.classList.contains("active");
+      if (!startedInOutline) {
+        navPane.style.visibility = "hidden";
+        outlineTab.click();
+      }
+      tabs.dataset.outlineAvailable = String(root.querySelector(".pdf-outline-button") !== null);
+      if (!startedInOutline) pagesTab.click();
+      navPane.style.removeProperty("visibility");
+      adaptNavigation();
+      outlineTarget = navList;
+      outlineObserver.observe(navList, { childList: true });
+    };
+    adaptNavigation();
+    const observer = new MutationObserver(() => {
+      adaptNavigation();
+      if (!outlineTarget || !root.contains(outlineTarget)) probeOutline();
+    });
+    observer.observe(root, { childList: true, subtree: true });
+    outlineObserver = new MutationObserver(() => {
+      const tabs = root.querySelector<HTMLElement>(".pdf-nav-tabs");
+      if (tabs?.dataset.outlineAvailable !== "true") probeOutline();
+    });
+    // The pinned renderer exposes no outline count. Probe synchronously between paints, then let
+    // direct navigation-list mutations trigger another probe whenever a late outline read lands.
+    probeOutline();
+    return () => {
+      observer.disconnect();
+      outlineObserver.disconnect();
+    };
+  }, [state?.ready]);
+
+  useEffect(() => {
+    if (!pdf || !state?.ready) return;
+    const root = viewer.current?.getController()?.container.shadowRoot;
+    if (!root) return;
+    let frame = 0;
+    const fitPdfToWidth = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        const fitState = pdfFit.current;
+        if (!fitState.enabled) return;
+        const wrapper = root.querySelector<HTMLElement>(".pdf-wrapper");
+        const current = latestView.current;
+        const currentPage =
+          root.querySelector<HTMLElement>(`.pdfViewer .page[data-page-number="${current.page}"]`) ??
+          root.querySelector<HTMLElement>(".pdfViewer .page");
+        const renderedWidth = currentPage?.getBoundingClientRect().width ?? 0;
+        const availableWidth = wrapper?.clientWidth ?? 0;
+        if (renderedWidth <= 0 || availableWidth <= 0 || current.scale <= 0) return;
+        if (fitState.page !== current.page || fitState.rotation !== current.rotation) {
+          fitState.page = current.page;
+          fitState.rotation = current.rotation;
+          fitState.pageWidthAtScaleOne = 0;
+        }
+        if (fitState.pageWidthAtScaleOne <= 0) {
+          fitState.pageWidthAtScaleOne = renderedWidth / current.scale;
+        }
+        // The pinned PDF renderer clamps scale to two decimals. Floor to the same precision so the
+        // page never overflows and sub-pixel differences do not schedule identical updates.
+        const targetScale = Math.floor((availableWidth / fitState.pageWidthAtScaleOne) * 100) / 100;
+        if (Math.abs(targetScale - current.scale) <= 0.001) return;
+        void viewer.current?.applyViewState({ scale: targetScale });
+      });
+    };
+    schedulePdfFit.current = fitPdfToWidth;
+    const wrapper = root.querySelector<HTMLElement>(".pdf-wrapper");
+    const resizeObserver =
+      typeof ResizeObserver === "undefined" ? null : new ResizeObserver(fitPdfToWidth);
+    if (wrapper) resizeObserver?.observe(wrapper);
+    const mutationObserver = new MutationObserver(fitPdfToWidth);
+    mutationObserver.observe(root, { childList: true, subtree: true });
+    fitPdfToWidth();
+    return () => {
+      cancelAnimationFrame(frame);
+      resizeObserver?.disconnect();
+      mutationObserver.disconnect();
+      if (schedulePdfFit.current === fitPdfToWidth) schedulePdfFit.current = null;
+    };
+  }, [pdf, state?.ready]);
+
+  useEffect(() => {
+    if (page > 0 && viewState?.rotation !== undefined) schedulePdfFit.current?.();
+  }, [page, viewState?.rotation]);
+
+  useEffect(() => {
+    if (searchOpen) searchInput.current?.focus();
+  }, [searchOpen]);
+
+  const applyViewState = (next: ViewerViewState) => viewer.current?.applyViewState(next);
+  const goToPdfPage = (direction: -1 | 1) => {
+    const request = pdfPageRequest.current;
+    const nextPage = Math.max(1, Math.min(pageCount, request.page + direction));
+    request.page = nextPage;
+    request.pending = nextPage !== page;
+    const root = viewer.current?.getController()?.container.shadowRoot;
+    const pageElement = root?.querySelector<HTMLElement>(
+      `.pdfViewer .page[data-page-number="${nextPage}"]`,
+    );
+    if (pageElement) {
+      pageElement.scrollIntoView({ block: "start", inline: "nearest" });
+      return;
+    }
+    void applyViewState({ page: nextPage });
+  };
+
+  return (
+    <div className="relative h-full min-h-64">
+      {pdf ? (
+        <ActionSlot name="title-actions">
+          <button
+            type="button"
+            aria-label={i18n.t("attachment.viewer.navigation")}
+            aria-pressed={viewState?.navigation?.visible ?? false}
+            onClick={() =>
+              void applyViewState({
+                navigation: {
+                  ...viewState?.navigation,
+                  visible: !(viewState?.navigation?.visible ?? false),
+                },
+              })
+            }
+            className="inline-flex size-8 items-center justify-center rounded-md bg-transparent outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-muted"
+          >
+            <PanelLeft aria-hidden="true" className="size-4" />
+          </button>
+        </ActionSlot>
+      ) : null}
+      <div className="absolute inset-0 min-h-0">
+        <FileViewer
+          ref={viewer}
+          file={file}
+          className="h-full min-h-0"
+          options={options}
+          onStateChange={setState}
+        />
+      </div>
+      {state?.ready ? (
+        <div
+          role="toolbar"
+          aria-label={i18n.t("attachment.viewer.controls")}
+          className={`absolute right-3 bottom-2 left-3 z-[5] mx-auto flex min-h-10 w-fit max-w-[calc(100%-1.5rem)] items-center gap-1 rounded-full border bg-background/80 p-1 shadow-lg backdrop-blur-md ${
+            viewState?.navigation?.visible
+              ? "[@media(max-width:720px)]:hidden min-[721px]:left-[calc(4rem+0.75rem)]"
+              : ""
+          }`}
+        >
+          <span role="status" aria-live="polite" aria-atomic="true" className="sr-only">
+            {search?.query
+              ? search.total > 0
+                ? i18n.t("attachment.viewer.searchResults", {
+                    current: search.currentIndex + 1,
+                    total: search.total,
+                  })
+                : i18n.t("attachment.viewer.searchNoResults")
+              : ""}
+          </span>
+          {pdf && pageCount > 0 && !searchOpen ? (
+            <div className="flex items-center rounded-full bg-muted p-0.5">
+              <button
+                type="button"
+                aria-label={i18n.t("attachment.viewer.previousPage")}
+                disabled={page <= 1}
+                onClick={() => goToPdfPage(-1)}
+                className="size-7 rounded-full hover:bg-accent disabled:opacity-40"
+              >
+                <ChevronLeft aria-hidden="true" className="mx-auto size-3.5" />
+              </button>
+              <span className="min-w-14 px-1 text-center text-xs tabular-nums">
+                {page} / {pageCount}
+              </span>
+              <button
+                type="button"
+                aria-label={i18n.t("attachment.viewer.nextPage")}
+                disabled={page >= pageCount}
+                onClick={() => goToPdfPage(1)}
+                className="size-7 rounded-full hover:bg-accent disabled:opacity-40"
+              >
+                <ChevronRight aria-hidden="true" className="mx-auto size-3.5" />
+              </button>
+            </div>
+          ) : null}
+          {searchOpen ? (
+            <form
+              className="flex min-w-0 items-center gap-1"
+              onSubmit={(event) => {
+                event.preventDefault();
+                void viewer.current?.searchDocument(query);
+              }}
+            >
+              <input
+                ref={searchInput}
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder={i18n.t("attachment.viewer.searchPlaceholder")}
+                className="h-7 w-28 min-w-0 rounded-full border bg-background px-3 text-xs outline-none focus:ring-2 focus:ring-ring sm:w-40"
+              />
+              <button
+                type="submit"
+                aria-label={i18n.t("attachment.viewer.search")}
+                className="grid size-7 place-items-center rounded-full hover:bg-accent"
+              >
+                <Search aria-hidden="true" className="size-3.5" />
+              </button>
+              {search && search.total > 0 ? (
+                <div className="flex items-center rounded-full bg-muted p-0.5">
+                  <button
+                    type="button"
+                    aria-label={i18n.t("attachment.viewer.previousResult")}
+                    disabled={search.total <= 1}
+                    onClick={() => void viewer.current?.previousSearchResult()}
+                    className="grid size-7 place-items-center rounded-full hover:bg-accent disabled:opacity-40"
+                  >
+                    <ChevronLeft aria-hidden="true" className="size-3.5" />
+                  </button>
+                  <span
+                    aria-hidden="true"
+                    className="min-w-10 px-1 text-center text-xs tabular-nums"
+                  >
+                    {search.currentIndex + 1} / {search.total}
+                  </span>
+                  <button
+                    type="button"
+                    aria-label={i18n.t("attachment.viewer.nextResult")}
+                    disabled={search.total <= 1}
+                    onClick={() => void viewer.current?.nextSearchResult()}
+                    className="grid size-7 place-items-center rounded-full hover:bg-accent disabled:opacity-40"
+                  >
+                    <ChevronRight aria-hidden="true" className="size-3.5" />
+                  </button>
+                </div>
+              ) : null}
+              {search?.query && search.total === 0 ? (
+                <span aria-hidden="true" className="min-w-10 px-1 text-center text-xs tabular-nums">
+                  {i18n.t("attachment.viewer.searchNoResults")}
+                </span>
+              ) : null}
+              <button
+                type="button"
+                aria-label={i18n.t("common.close")}
+                onClick={() => {
+                  setSearchOpen(false);
+                  setQuery("");
+                  void viewer.current?.clearDocumentSearch();
+                }}
+                className="grid size-7 place-items-center rounded-full hover:bg-accent"
+              >
+                <X aria-hidden="true" className="size-3.5" />
+              </button>
+            </form>
+          ) : (
+            <button
+              type="button"
+              aria-label={i18n.t("attachment.viewer.search")}
+              onClick={() => setSearchOpen(true)}
+              className="grid size-8 place-items-center rounded-full hover:bg-accent"
+            >
+              <Search aria-hidden="true" className="size-4" />
+            </button>
+          )}
+          {!searchOpen ? (
+            <div className="flex items-center rounded-full bg-muted p-0.5">
+              <button
+                type="button"
+                aria-label={i18n.t("attachment.viewer.zoomOut")}
+                disabled={state.zoom ? !state.zoom.canZoomOut : false}
+                onClick={() => {
+                  pdfFit.current.enabled = false;
+                  void viewer.current?.zoomOut();
+                }}
+                className="grid size-7 place-items-center rounded-full hover:bg-accent disabled:opacity-40"
+              >
+                <Minus aria-hidden="true" className="size-3.5" />
+              </button>
+              <button
+                type="button"
+                aria-label={i18n.t("attachment.viewer.resetZoom")}
+                disabled={state.zoom ? !state.zoom.canReset : false}
+                onClick={() => {
+                  if (pdf) {
+                    pdfFit.current.enabled = true;
+                    schedulePdfFit.current?.();
+                    return;
+                  }
+                  void viewer.current?.resetZoom();
+                }}
+                className="min-w-12 px-1 text-xs tabular-nums disabled:opacity-40"
+              >
+                {Math.round(scale * 100)}%
+              </button>
+              <button
+                type="button"
+                aria-label={i18n.t("attachment.viewer.zoomIn")}
+                disabled={state.zoom ? !state.zoom.canZoomIn : false}
+                onClick={() => {
+                  pdfFit.current.enabled = false;
+                  void viewer.current?.zoomIn();
+                }}
+                className="grid size-7 place-items-center rounded-full hover:bg-accent disabled:opacity-40"
+              >
+                <Plus aria-hidden="true" className="size-3.5" />
+              </button>
+            </div>
+          ) : null}
+          {pdf && !searchOpen ? (
+            <div className="hidden items-center sm:flex">
+              <button
+                type="button"
+                aria-label={i18n.t("attachment.viewer.rotateLeft")}
+                onClick={() =>
+                  void applyViewState({ rotation: ((viewState?.rotation ?? 0) - 90 + 360) % 360 })
+                }
+                className="grid size-8 place-items-center rounded-full hover:bg-accent"
+              >
+                <RotateCcw aria-hidden="true" className="size-4" />
+              </button>
+              <button
+                type="button"
+                aria-label={i18n.t("attachment.viewer.rotateRight")}
+                onClick={() =>
+                  void applyViewState({ rotation: ((viewState?.rotation ?? 0) + 90) % 360 })
+                }
+                className="grid size-8 place-items-center rounded-full hover:bg-accent"
+              >
+                <RotateCw aria-hidden="true" className="size-4" />
+              </button>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/ui/src/file-preview/file-preview.tsx

@@ -0,0 +1,28 @@
+import { lazy, Suspense } from "react";
+import type { AttachmentPreviewKind } from "@/attachment-detail/attachment-detail.ts";
+
+const previews = {
+  pdf: lazy(async () => ({ default: (await import("./pdf-file-preview.tsx")).PdfFilePreview })),
+  presentation: lazy(async () => ({
+    default: (await import("./presentation-file-preview.tsx")).PresentationFilePreview,
+  })),
+  spreadsheet: lazy(async () => ({
+    default: (await import("./spreadsheet-file-preview.tsx")).SpreadsheetFilePreview,
+  })),
+  word: lazy(async () => ({ default: (await import("./word-file-preview.tsx")).WordFilePreview })),
+};
+
+export function FilePreview({
+  file,
+  kind,
+}: {
+  file: File;
+  kind: Exclude<AttachmentPreviewKind, "image" | "unsupported" | "audio" | "video">;
+}) {
+  const Preview = previews[kind];
+  return (
+    <Suspense fallback={null}>
+      <Preview file={file} />
+    </Suspense>
+  );
+}

package/ui/src/file-preview/pdf-file-preview.tsx

@@ -0,0 +1,5 @@
+import { pdfRenderer } from "@file-viewer/renderer-pdf";
+import { FilePreviewView } from "./file-preview-view.tsx";
+export function PdfFilePreview({ file }: { file: File }) {
+  return <FilePreviewView file={file} renderer={pdfRenderer} pdf />;
+}

package/ui/src/file-preview/presentation-file-preview.tsx

@@ -0,0 +1,21 @@
+import {
+  presentationRendererDefinition,
+  renderFileViewerPresentation,
+} from "@file-viewer/renderer-presentation";
+import { FilePreviewView } from "./file-preview-view.tsx";
+
+const presentationRenderer = {
+  id: "intel-file-viewer-renderer-presentation",
+  label: "Intel PPTX renderer",
+  definitions: [presentationRendererDefinition],
+  handlers: [
+    {
+      rendererId: presentationRendererDefinition.id,
+      handler: renderFileViewerPresentation,
+    },
+  ],
+};
+
+export function PresentationFilePreview({ file }: { file: File }) {
+  return <FilePreviewView file={file} renderer={presentationRenderer} />;
+}

package/ui/src/file-preview/spreadsheet-file-preview.tsx

@@ -0,0 +1,5 @@
+import { spreadsheetRenderer } from "@file-viewer/renderer-spreadsheet";
+import { FilePreviewView } from "./file-preview-view.tsx";
+export function SpreadsheetFilePreview({ file }: { file: File }) {
+  return <FilePreviewView file={file} renderer={spreadsheetRenderer} />;
+}

package/ui/src/file-preview/word-file-preview.tsx

@@ -0,0 +1,5 @@
+import { wordRenderer } from "@file-viewer/renderer-word";
+import { FilePreviewView } from "./file-preview-view.tsx";
+export function WordFilePreview({ file }: { file: File }) {
+  return <FilePreviewView file={file} renderer={wordRenderer} />;
+}