@lotics/ui 5.8.0 → 5.10.0

package/src/file_preview.web.tsx

@@ -15,17 +15,25 @@ import { type FilePreviewProps, resolveLabels, type PreviewLabels } from "./file
 import { SpreadsheetView } from "./spreadsheet_view";
 import { RotatableImage } from "./rotatable_image";
 import { downloadFileFromUrl } from "./download";
+import { colors } from "./colors";
 
 /**
- * Universal inline file preview (web). Renders by MIME type: images, PDF, video
- * and audio use browser-native elements; Word via the lazy-loaded `@lotics/docx`
- * renderer; Excel/CSV via the read-only `@lotics/xlsx` canvas. Heavy engines are
- * dynamic-imported so non-document files never pay their bundle cost.
+ * Universal inline file preview (web). Renders by MIME type: images, video and
+ * audio use browser-native elements; PDF via the lazy-loaded `pdfjs-dist` canvas
+ * renderer; Word via `@lotics/docx`; Excel/CSV via the read-only `@lotics/xlsx`
+ * canvas. Heavy engines are dynamic-imported so non-document files never pay
+ * their bundle cost.
+ *
+ * PDF renders bytes to a canvas rather than embedding a native `<iframe>` viewer:
+ * a nested PDF browsing context is blocked inside the sandboxed, cross-origin
+ * custom-code app iframe (and degrades in mobile webviews), whereas a fetched-and-
+ * painted canvas works everywhere — the same in-DOM approach the Word/Excel
+ * engines already use.
  *
  * Pure: i18n via `labels` props, errors via `onError` — no lingui/analytics
  * (purity test). Lifted from the frontend gallery so both share one renderer.
  */
-export function FilePreview({ file, labels, onError, rotation }: FilePreviewProps) {
+export function FilePreview({ file, labels, onError, rotation, credentials }: FilePreviewProps) {
   const l = resolveLabels(labels);
 
   if (isImageMimeType(file.mimeType)) {
@@ -39,10 +47,10 @@ export function FilePreview({ file, labels, onError, rotation }: FilePreviewProp
     );
   }
   if (isPdfMimeType(file.mimeType)) {
-    return <iframe src={file.url} title={file.filename} style={fullFrameStyle} />;
+    return <PdfPreview file={file} labels={l} onError={onError} credentials={credentials} />;
   }
   if (isDocxMimeType(file.mimeType)) {
-    return <WordPreview file={file} labels={l} onError={onError} />;
+    return <WordPreview file={file} labels={l} onError={onError} credentials={credentials} />;
   }
   if (isVideoMimeType(file.mimeType)) {
     return <video controls preload="metadata" src={file.url} style={mediaElementStyle} />;
@@ -56,7 +64,7 @@ export function FilePreview({ file, labels, onError, rotation }: FilePreviewProp
     );
   }
   if (isPreviewableMimeType(file.mimeType)) {
-    return <SpreadsheetView file={file} labels={l} onError={onError} />;
+    return <SpreadsheetView file={file} labels={l} onError={onError} credentials={credentials} />;
   }
 
   return (
@@ -81,10 +89,12 @@ function WordPreview({
   file,
   labels,
   onError,
+  credentials,
 }: {
   file: FilePreviewProps["file"];
   labels: PreviewLabels;
   onError: FilePreviewProps["onError"];
+  credentials: FilePreviewProps["credentials"];
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [state, setState] = useState<{ loading: boolean; error: string | undefined }>({
@@ -98,7 +108,7 @@ function WordPreview({
     setState({ loading: true, error: undefined });
 
     const run = async () => {
-      const response = await fetch(file.url, { signal: controller.signal });
+      const response = await fetch(file.url, { signal: controller.signal, credentials });
       if (!response.ok) throw new Error(`Document fetch failed (${response.status})`);
       const arrayBuffer = await response.arrayBuffer();
       const bytes = new Uint8Array(arrayBuffer);
@@ -128,7 +138,7 @@ function WordPreview({
       controller.abort();
       loadedView?.destroy();
     };
-  }, [file.url, file.id, file.mimeType, labels.loadFailed, onError]);
+  }, [file.url, file.id, file.mimeType, labels.loadFailed, onError, credentials]);
 
   return (
     <div style={wordContainerStyle}>
@@ -149,7 +159,7 @@ function WordPreview({
               icon="download"
               title={labels.download}
               color="secondary"
-              onPress={() => void downloadFileFromUrl(file.url, file.filename)}
+              onPress={() => void downloadFileFromUrl(file.url, file.filename, { credentials })}
             />
           </View>
         </div>
@@ -159,12 +169,339 @@ function WordPreview({
   );
 }
 
+/**
+ * pdf.js runs on the MAIN THREAD (no Web Worker): importing the worker entry for
+ * its side effect registers `globalThis.pdfjsWorker`, which pdf.js's `PDFWorker`
+ * reads to skip real-worker setup entirely — no worker-URL resolution, no
+ * `new Worker(...)`, so it bundles identically under Vite (apps) and Metro
+ * (frontend). One document at a time, on demand — the same tradeoff `@lotics/xlsx`
+ * and `@lotics/docx` already make. Cached so the engine loads once per session.
+ */
+let pdfjsModule: Promise<typeof import("pdfjs-dist")> | null = null;
+function loadPdfjs(): Promise<typeof import("pdfjs-dist")> {
+  if (!pdfjsModule) {
+    pdfjsModule = (async () => {
+      const [pdfjs] = await Promise.all([
+        import("pdfjs-dist"),
+        import("pdfjs-dist/build/pdf.worker.min.mjs"),
+      ]);
+      return pdfjs;
+    })().catch((err) => {
+      // Don't cache a rejected import — a transient failure would otherwise
+      // poison every later PDF preview. Reset so the next open retries.
+      pdfjsModule = null;
+      throw err;
+    });
+  }
+  return pdfjsModule;
+}
+
+// pdf.js's TextLayer overlays transparent, selectable text spans aligned to the
+// canvas. The spans position themselves off `--total-scale-factor` (set per page
+// below); these are the minimal rules from pdf.js's shipped viewer CSS that make
+// the text invisible, selectable, and correctly placed. Injected once, globally
+// (the `.textLayer` class is pdf.js-specific) so no consumer has to import a CSS
+// file — a half-applied stylesheet would render the spans as visible black text.
+const PDF_TEXT_LAYER_CSS = `
+.textLayer{position:absolute;text-align:initial;inset:0;overflow:clip;opacity:1;line-height:1;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;z-index:0;--min-font-size:1;--text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size));--min-font-size-inv:calc(1 / var(--min-font-size))}
+.textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;transform-origin:0 0;-webkit-user-select:text;-moz-user-select:text;user-select:text}
+.textLayer > :not(.markedContent),.textLayer .markedContent span:not(.markedContent){z-index:1;--font-height:0;font-size:calc(var(--text-scale-factor) * var(--font-height));--scale-x:1;--rotate:0deg;transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv))}
+.textLayer .markedContent{display:contents}
+.textLayer span[role="img"]{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default}
+.textLayer .endOfContent{display:block;position:absolute;inset:100% 0 0;z-index:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}
+`;
+
+let pdfTextLayerStylesInjected = false;
+function ensurePdfTextLayerStyles(): void {
+  if (pdfTextLayerStylesInjected || typeof document === "undefined") return;
+  pdfTextLayerStylesInjected = true;
+  const style = document.createElement("style");
+  style.setAttribute("data-lotics-pdf-text-layer", "");
+  style.textContent = PDF_TEXT_LAYER_CSS;
+  document.head.appendChild(style);
+}
+
+const PDF_MAX_PAGE_WIDTH = 900;
+const PDF_PAGE_GUTTER = 16;
+
+function isPdfPasswordError(err: unknown): boolean {
+  return (
+    typeof err === "object" &&
+    err !== null &&
+    "name" in err &&
+    (err as { name: unknown }).name === "PasswordException"
+  );
+}
+
+interface RenderedPdf {
+  destroy: () => void;
+}
+
+/**
+ * Fetch a PDF, parse it with pdf.js, and paint each page to a canvas inside
+ * `pages` — lazily, via an IntersectionObserver, so a 200-page document doesn't
+ * render every page up front. Each page also gets a transparent text layer for
+ * selection/search. Returns a handle that tears everything down on unmount.
+ */
+async function renderPdf(opts: {
+  url: string;
+  scroll: HTMLDivElement;
+  pages: HTMLDivElement;
+  signal: AbortSignal;
+  credentials: RequestCredentials | undefined;
+  /** Reports a per-page render failure (the page degrades to a blank slot, but
+   *  the error is never swallowed). */
+  reportError: (err: unknown) => void;
+}): Promise<RenderedPdf> {
+  const { url, scroll, pages, signal, credentials, reportError } = opts;
+  const pdfjs = await loadPdfjs();
+
+  const response = await fetch(url, { signal, credentials });
+  if (!response.ok) throw new Error(`PDF fetch failed (${response.status})`);
+  const data = new Uint8Array(await response.arrayBuffer());
+  if (signal.aborted) throw new DOMException("Aborted", "AbortError");
+
+  const loadingTask = pdfjs.getDocument({ data });
+  const doc = await loadingTask.promise;
+  if (signal.aborted) {
+    void loadingTask.destroy();
+    throw new DOMException("Aborted", "AbortError");
+  }
+
+  pages.replaceChildren();
+  const targetWidth = Math.min(
+    Math.max((scroll.clientWidth || 800) - PDF_PAGE_GUTTER * 2, 240),
+    PDF_MAX_PAGE_WIDTH,
+  );
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+
+  const rendered = new Set<number>();
+  const renderTasks: Array<{ cancel: () => void }> = [];
+
+  const renderPage = async (pageNum: number, wrapper: HTMLDivElement): Promise<void> => {
+    if (rendered.has(pageNum) || signal.aborted) return;
+    rendered.add(pageNum);
+    const page = await doc.getPage(pageNum);
+    if (signal.aborted) return;
+
+    const base = page.getViewport({ scale: 1 });
+    const scale = targetWidth / base.width;
+    const viewport = page.getViewport({ scale });
+
+    // Backing store at device-pixel resolution; CSS size stays at the layout
+    // scale, so the page is crisp on HiDPI. pdf.js does NOT size the canvas from
+    // the render viewport — set the backing-store dimensions explicitly.
+    const renderViewport = page.getViewport({ scale: scale * dpr });
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.floor(renderViewport.width);
+    canvas.height = Math.floor(renderViewport.height);
+    canvas.style.display = "block";
+    canvas.style.width = `${viewport.width}px`;
+    canvas.style.height = `${viewport.height}px`;
+
+    wrapper.style.height = `${viewport.height}px`;
+    wrapper.style.minHeight = "0px";
+    wrapper.replaceChildren(canvas);
+
+    const task = page.render({ canvas, viewport: renderViewport });
+    renderTasks.push(task);
+    await task.promise;
+    if (signal.aborted) return;
+
+    const textLayerDiv = document.createElement("div");
+    textLayerDiv.className = "textLayer";
+    textLayerDiv.style.width = `${viewport.width}px`;
+    textLayerDiv.style.height = `${viewport.height}px`;
+    textLayerDiv.style.setProperty("--total-scale-factor", String(scale));
+    textLayerDiv.style.setProperty("--scale-factor", String(scale));
+    const textLayer = new pdfjs.TextLayer({
+      textContentSource: page.streamTextContent(),
+      container: textLayerDiv,
+      viewport,
+    });
+    await textLayer.render();
+    if (signal.aborted) return;
+    wrapper.appendChild(textLayerDiv);
+  };
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue;
+        const wrapper = entry.target as HTMLDivElement;
+        observer.unobserve(wrapper);
+        // A page-level failure leaves the reserved slot blank but lets the rest
+        // of the document scroll — report it (never swallow), don't throw.
+        void renderPage(Number(wrapper.dataset.page), wrapper).catch((err: unknown) => {
+          if (signal.aborted) return;
+          if (err instanceof DOMException && err.name === "AbortError") return;
+          reportError(err);
+        });
+      }
+    },
+    { root: scroll, rootMargin: "300px 0px" },
+  );
+
+  for (let pageNum = 1; pageNum <= doc.numPages; pageNum += 1) {
+    const wrapper = document.createElement("div");
+    wrapper.dataset.page = String(pageNum);
+    wrapper.style.position = "relative";
+    wrapper.style.width = `${targetWidth}px`;
+    // Reserve height (letter ratio) so pages don't collapse before they paint.
+    wrapper.style.minHeight = `${Math.round(targetWidth * 1.294)}px`;
+    wrapper.style.backgroundColor = colors.white;
+    wrapper.style.boxShadow = "0 1px 4px rgba(0, 0, 0, 0.18)";
+    wrapper.style.borderRadius = "2px";
+    wrapper.style.overflow = "hidden";
+    pages.appendChild(wrapper);
+    observer.observe(wrapper);
+  }
+
+  return {
+    destroy: () => {
+      observer.disconnect();
+      for (const task of renderTasks) task.cancel();
+      void loadingTask.destroy();
+    },
+  };
+}
+
+function PdfPreview({
+  file,
+  labels,
+  onError,
+  credentials,
+}: {
+  file: FilePreviewProps["file"];
+  labels: PreviewLabels;
+  onError: FilePreviewProps["onError"];
+  credentials: FilePreviewProps["credentials"];
+}) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const pagesRef = useRef<HTMLDivElement>(null);
+  const [state, setState] = useState<{ loading: boolean; error: string | undefined }>({
+    loading: true,
+    error: undefined,
+  });
+
+  useEffect(() => {
+    const scroll = scrollRef.current;
+    const pages = pagesRef.current;
+    if (!scroll || !pages) return;
+
+    const controller = new AbortController();
+    let rendered: RenderedPdf | null = null;
+    setState({ loading: true, error: undefined });
+    ensurePdfTextLayerStyles();
+
+    renderPdf({
+      url: file.url,
+      scroll,
+      pages,
+      signal: controller.signal,
+      credentials,
+      reportError: (err) => onError?.(err, { fileId: file.id, mimeType: file.mimeType }),
+    }).then(
+      (result) => {
+        if (controller.signal.aborted) {
+          result.destroy();
+          return;
+        }
+        rendered = result;
+        setState({ loading: false, error: undefined });
+      },
+      (err: unknown) => {
+        if (controller.signal.aborted) return;
+        if (err instanceof DOMException && err.name === "AbortError") return;
+        const passwordProtected = isPdfPasswordError(err);
+        onError?.(err, { fileId: file.id, mimeType: file.mimeType });
+        setState({
+          loading: false,
+          error: passwordProtected ? labels.passwordProtected : labels.loadFailed,
+        });
+      },
+    );
+
+    return () => {
+      controller.abort();
+      rendered?.destroy();
+    };
+  }, [
+    file.url,
+    file.id,
+    file.mimeType,
+    labels.loadFailed,
+    labels.passwordProtected,
+    onError,
+    credentials,
+  ]);
+
+  return (
+    <div style={pdfContainerStyle}>
+      <div ref={scrollRef} style={pdfScrollStyle}>
+        <div ref={pagesRef} style={pdfPagesStyle} />
+      </div>
+      {state.loading && (
+        <div style={pdfOverlayStyle}>
+          <Text size="sm" color="muted">
+            …
+          </Text>
+        </div>
+      )}
+      {state.error !== undefined && (
+        <div style={pdfOverlayStyle}>
+          <Text size="sm" color="muted">
+            {state.error}
+          </Text>
+          <View style={{ marginTop: 12 }}>
+            <Button
+              icon="download"
+              title={labels.download}
+              color="secondary"
+              onPress={() => void downloadFileFromUrl(file.url, file.filename, { credentials })}
+            />
+          </View>
+        </div>
+      )}
+    </div>
+  );
+}
+
 const styles = StyleSheet.create({
   placeholder: { flex: 1, justifyContent: "center", alignItems: "center", gap: 16 },
   placeholderText: { marginTop: 8 },
 });
 
-const fullFrameStyle: React.CSSProperties = { width: "100%", height: "100%", border: "none" };
+const pdfContainerStyle: React.CSSProperties = {
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  minHeight: 0,
+  backgroundColor: "#f4f4f5",
+};
+const pdfScrollStyle: React.CSSProperties = {
+  flex: 1,
+  width: "100%",
+  overflowY: "auto",
+  overflowX: "hidden",
+};
+const pdfPagesStyle: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 16,
+  padding: 16,
+};
+const pdfOverlayStyle: React.CSSProperties = {
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  pointerEvents: "none",
+};
 const mediaElementStyle: React.CSSProperties = {
   width: "100%",
   height: "100%",

package/src/file_preview_types.ts

@@ -30,8 +30,57 @@ export interface FilePreviewProps {
   onError?: (error: unknown, meta: { fileId: string; mimeType: string }) => void;
   /** View rotation in degrees (0/90/180/270) — applied to image previews only. */
   rotation?: number;
+  /**
+   * Credentials mode for the byte fetches the PDF / Word / spreadsheet previews
+   * make. The host frontend serves files from the auth-gated proxy on a sibling
+   * subdomain (`api.lotics.ai`); the session cookie only rides that cross-origin
+   * fetch with `"include"`. Custom-code apps fetch presigned URLs — a credentialed
+   * request would trip the bucket's CORS — so they omit this and take the default.
+   */
+  credentials?: RequestCredentials;
 }
 
 export function resolveLabels(labels: Partial<PreviewLabels> | undefined): PreviewLabels {
   return labels ? { ...defaultPreviewLabels, ...labels } : defaultPreviewLabels;
 }
+
+/**
+ * Strings for the full-screen `FileGalleryModal` chrome (toolbar + nav), on top
+ * of the inner `PreviewLabels`. Same i18n-free contract: host passes translated
+ * strings, English is the fallback.
+ */
+export interface GalleryLabels extends PreviewLabels {
+  close: string;
+  previous: string;
+  next: string;
+  /** Accessibility label for the per-row ⋯ menu in `FileRows`. */
+  actions: string;
+  openExternal: string;
+  remove: string;
+  removeConfirmTitle: string;
+  removeConfirmMessage: (filename: string) => string;
+  cancel: string;
+  rotateLeft: string;
+  rotateRight: string;
+  saveRotation: string;
+}
+
+export const defaultGalleryLabels: GalleryLabels = {
+  ...defaultPreviewLabels,
+  close: "Close",
+  previous: "Previous",
+  next: "Next",
+  actions: "Actions",
+  openExternal: "Open in new tab",
+  remove: "Remove",
+  removeConfirmTitle: "Remove file",
+  removeConfirmMessage: (filename) => `Remove "${filename}"?`,
+  cancel: "Cancel",
+  rotateLeft: "Rotate left",
+  rotateRight: "Rotate right",
+  saveRotation: "Save rotation",
+};
+
+export function resolveGalleryLabels(labels: Partial<GalleryLabels> | undefined): GalleryLabels {
+  return labels ? { ...defaultGalleryLabels, ...labels } : defaultGalleryLabels;
+}

package/src/file_row.tsx

@@ -0,0 +1,118 @@
+import { useState } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { Text } from "./text";
+import { colors } from "./colors";
+import { FileBadge } from "./file_badge";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
+
+export interface FileRowProps {
+  /** The file / document name — the primary line. */
+  name: string;
+  /** Secondary line: size, status, timestamp, etc. */
+  meta?: string;
+  /** File type → the FileBadge glyph + color. Omit (with `placeholder`) for an
+   *  expected-but-not-yet-provided document. */
+  mimeType?: string;
+  /** Ghost badge — an expected document that hasn't been provided yet. */
+  placeholder?: boolean;
+  /** Marks the badge as a template (TMPL). */
+  isTemplate?: boolean;
+  /** When set, the WHOLE row is a pressable "door" (e.g. open the file), with a
+   *  hover/press wash. Omit for a static line whose only interaction is `trailing`. */
+  onPress?: () => void;
+  /** Trailing slot — a status `Badge`, an action `Button`, a timestamp, a remove
+   *  control. An independently-interactive SIBLING: never swallowed by the row
+   *  press (a button never nests in the door button). */
+  trailing?: React.ReactNode;
+}
+
+/**
+ * A horizontal file / document LINE: a `FileBadge` (or a same-footprint
+ * placeholder) + the full name and an optional meta line, with a composable
+ * `trailing` slot. For document checklists, requirement lists, and attachment
+ * rows where the name must be readable.
+ *
+ * `onPress` makes the whole row a pressable door; `trailing` stays a sibling, so
+ * a button/menu in it is pressed independently (the door + sibling a11y pattern —
+ * see `PressableRow`). For square thumbnail tiles use `FileThumbnailGrid` / `FileGrid`.
+ */
+export function FileRow({ name, meta, mimeType, placeholder, isTemplate, onPress, trailing }: FileRowProps) {
+  const [hovered, setHovered] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const { focusVisible, focusProps } = useFocusRing();
+  // Hover via the DOM (not Pressability): RN-Web hands a parent's hover to the
+  // innermost nested pressable, which would stop the wash short of `trailing`.
+  const mouseProps = {
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false),
+  } as object;
+
+  const content = (
+    <>
+      <FileBadge size={30} mimeType={mimeType} placeholder={placeholder} isTemplate={isTemplate} />
+      <View style={styles.text}>
+        <Text size="sm" weight="medium" numberOfLines={1}>
+          {name}
+        </Text>
+        {meta ? (
+          <Text size="xs" color="muted" numberOfLines={1}>
+            {meta}
+          </Text>
+        ) : null}
+      </View>
+    </>
+  );
+
+  if (!onPress) {
+    return (
+      <View style={styles.row}>
+        {content}
+        {trailing}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[styles.pressableRow, hovered && styles.rowHovered, pressed && styles.rowPressed]}
+      {...mouseProps}
+    >
+      <Pressable
+        onPress={onPress}
+        {...focusProps}
+        onPressIn={() => setPressed(true)}
+        onPressOut={() => setPressed(false)}
+        accessibilityRole="button"
+        accessibilityLabel={`Open ${name}`}
+        style={[styles.door, focusVisible && { boxShadow: FOCUS_RING }]}
+      >
+        {content}
+      </Pressable>
+      {trailing}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "center", gap: 12 },
+  pressableRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    // Negative horizontal margin cancels the padding for the CONTENT's position
+    // (badge stays aligned with static rows / the container edge) while the hover
+    // wash bleeds 8px outward into the parent's padding — a hit area with no
+    // layout shift. The parent is expected to have ≥8px horizontal padding.
+    marginHorizontal: -8,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 8,
+    ...({ transitionDuration: "0.1s", transitionProperty: "background-color" } as object),
+  },
+  rowHovered: { backgroundColor: colors.zinc["50"] },
+  rowPressed: { backgroundColor: colors.zinc["100"] },
+  // The accessible "Open" door — fills the row left of the trailing sibling.
+  door: { flex: 1, flexDirection: "row", alignItems: "center", gap: 12 },
+  text: { flex: 1, gap: 1 },
+});