@tangle-network/ui 11.25.0 → 11.27.0

package/src/files/file-list.stories.tsx

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Button } from "../primitives/button";
+import { FileCard } from "./file-card";
+import { FileList, type FileListItem } from "./file-list";
+
+const CASE_FILES: FileListItem[] = [
+  {
+    id: "lease",
+    filename: "Commercial lease — 418 Harbor Street.pdf",
+    size: 2_516_582,
+    date: "2026-09-28T16:20:00Z",
+    uploader: { name: "Dana Ruiz", role: "Client" },
+  },
+  {
+    id: "notice",
+    filename: "Notice of lease termination.pdf",
+    size: 75_955,
+    date: "2026-10-06T09:05:00Z",
+    uploader: { name: "Priya Adeyemi", role: "Attorney" },
+  },
+  {
+    id: "photos",
+    filename: "Rear storage room, water damage.jpg",
+    mimeType: "image/jpeg",
+    size: 3_145_728,
+    date: "2026-08-12T18:42:00Z",
+    uploader: { name: "Dana Ruiz", role: "Client" },
+  },
+  {
+    id: "ledger",
+    filename: "Rent ledger 2023–2026.xlsx",
+    size: 48_640,
+    date: "2026-09-30T11:00:00Z",
+    uploader: { name: "Coastal Property Holdings" },
+  },
+  {
+    id: "estimate",
+    filename: "Contractor estimate.docx",
+    size: 182_000,
+    date: "2026-08-20T14:10:00Z",
+  },
+];
+
+function CaseDocuments() {
+  const [files, setFiles] = useState(CASE_FILES);
+  const [openId, setOpenId] = useState("notice");
+  return (
+    <FileList
+      aria-label="Case documents"
+      files={files}
+      activeId={openId}
+      onOpen={(file) => setOpenId(file.id)}
+      onDownload={() => {}}
+      onDelete={(file) => setFiles((current) => current.filter((item) => item.id !== file.id))}
+      empty="No documents yet. Upload the lease to get started."
+    />
+  );
+}
+
+const meta: Meta<typeof FileList> = {
+  title: "Files/FileList",
+  component: FileList,
+  parameters: { layout: "fullscreen" },
+  decorators: [
+    (Story) => (
+      <div className="min-h-[100dvh] bg-background p-4 text-foreground">
+        <div className="mx-auto max-w-2xl">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof FileList>;
+
+export const Documents: Story = {
+  name: "Case documents",
+  render: () => <CaseDocuments />,
+};
+
+export const DocumentsLight: Story = {
+  name: "Case documents (light)",
+  globals: { theme: "light" },
+  render: () => <CaseDocuments />,
+};
+
+export const ReadOnly: Story = {
+  name: "Read-only list",
+  render: () => <FileList aria-label="Shared with you" files={CASE_FILES.slice(0, 3)} />,
+};
+
+export const Empty: Story = {
+  render: () => <FileList files={[]} empty="No documents yet. Upload the lease to get started." />,
+};
+
+export const Card: Story = {
+  name: "FileCard",
+  render: () => (
+    <FileCard
+      filename="Commercial lease — 418 Harbor Street.pdf"
+      size={2_516_582}
+      date="2026-09-28T16:20:00Z"
+      uploader={{ name: "Dana Ruiz", role: "Client" }}
+      onDownload={() => {}}
+      actions={
+        <Button type="button" size="sm">
+          Open
+        </Button>
+      }
+    />
+  ),
+};
+
+export const CardLight: Story = {
+  name: "FileCard (light)",
+  globals: { theme: "light" },
+  render: Card.render,
+};

package/src/files/file-list.test.tsx

@@ -0,0 +1,81 @@
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { FileList, type FileListItem } from "./file-list";
+
+interface CaseDocument extends FileListItem {
+  matterId: string;
+}
+
+const FILES: CaseDocument[] = [
+  {
+    id: "lease",
+    matterId: "m-1",
+    filename: "Commercial lease.pdf",
+    size: 482_000,
+    date: "2026-10-01T12:00:00Z",
+    uploader: { name: "Dana Ruiz", role: "Client" },
+  },
+  {
+    id: "photos",
+    matterId: "m-1",
+    filename: "Water damage.jpg",
+    mimeType: "image/jpeg",
+    size: 3_100_000,
+  },
+];
+
+describe("FileList", () => {
+  it("shows each file's kind, size and uploader", () => {
+    render(<FileList files={FILES} aria-label="Case documents" />);
+    const rows = within(screen.getByRole("list", { name: "Case documents" })).getAllByRole(
+      "listitem",
+    );
+    expect(rows).toHaveLength(2);
+    expect(rows[0]).toHaveTextContent("Commercial lease.pdf");
+    // A dot between facts on screen, a comma for a screen reader.
+    expect(rows[0]).toHaveTextContent(/PDF · , 471 KB · , .+ · , Dana Ruiz \(Client\)/);
+    expect(rows[1]).toHaveTextContent("Image · , 3.0 MB");
+  });
+
+  it("opens a file from its row and hands back the host's own record", () => {
+    const onOpen = vi.fn();
+    render(<FileList files={FILES} onOpen={onOpen} activeId="photos" />);
+
+    fireEvent.click(screen.getByRole("button", { name: /Commercial lease\.pdf/ }));
+    expect(onOpen).toHaveBeenCalledWith(FILES[0]);
+    expect(onOpen.mock.calls[0][0].matterId).toBe("m-1");
+
+    expect(screen.getByRole("button", { name: /Water damage\.jpg/ })).toHaveAttribute(
+      "aria-current",
+      "true",
+    );
+    expect(screen.getByRole("button", { name: /Commercial lease\.pdf/ })).not.toHaveAttribute(
+      "aria-current",
+    );
+  });
+
+  it("downloads and deletes through per-file buttons", () => {
+    const onDownload = vi.fn();
+    const onDelete = vi.fn();
+    render(<FileList files={FILES} onDownload={onDownload} onDelete={onDelete} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Download Water damage.jpg" }));
+    expect(onDownload).toHaveBeenCalledWith(FILES[1]);
+    fireEvent.click(screen.getByRole("button", { name: "Delete Commercial lease.pdf" }));
+    expect(onDelete).toHaveBeenCalledWith(FILES[0]);
+  });
+
+  it("renders no controls the host did not ask for", () => {
+    render(<FileList files={FILES} />);
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("shows the empty message in place of the list", () => {
+    const { rerender } = render(<FileList files={[]} />);
+    expect(screen.queryByRole("list")).toBeNull();
+    expect(screen.getByText("No files yet.")).toBeInTheDocument();
+
+    rerender(<FileList files={[]} empty="Upload the lease to start." />);
+    expect(screen.getByText("Upload the lease to start.")).toBeInTheDocument();
+  });
+});

package/src/files/file-list.tsx

@@ -0,0 +1,167 @@
+/**
+ * FileList — a flat list of documents: each row names the file and its kind,
+ * size, date and uploader; selecting the row opens it, and the row's own
+ * buttons download or delete it.
+ */
+
+import * as React from "react";
+import { Download, Trash2 } from "lucide-react";
+import { focusRingInset } from "../lib/focus";
+import { cn } from "../lib/utils";
+import { Button } from "../primitives/button";
+import {
+  FactSeparator,
+  FileFacts,
+  FileKindTile,
+  uploaderLabel,
+  type FileDetails,
+} from "./file-card";
+
+export interface FileListItem extends FileDetails {
+  /** Stable key, and what `activeId` matches. */
+  id: string;
+}
+
+export interface FileListProps<T extends FileListItem = FileListItem>
+  extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
+  files: readonly T[];
+  /** Opens a file, usually in a preview. Makes each row a button. */
+  onOpen?: (file: T) => void;
+  /** Adds a Download button to each row. */
+  onDownload?: (file: T) => void;
+  /**
+   * Adds a Delete button to each row. It calls this at once, so a host that
+   * wants a confirmation asks for it here.
+   */
+  onDelete?: (file: T) => void;
+  /** The open file. Its row is marked as the current one. */
+  activeId?: string;
+  /** Shown in place of the list when `files` is empty. */
+  empty?: React.ReactNode;
+}
+
+export function FileList<T extends FileListItem>({
+  files,
+  onOpen,
+  onDownload,
+  onDelete,
+  activeId,
+  empty = "No files yet.",
+  className,
+  ...props
+}: FileListProps<T>) {
+  if (files.length === 0) {
+    return (
+      <div
+        className={cn(
+          "rounded-[var(--radius-md)] border border-border bg-card px-4 py-10 text-center text-sm text-muted-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {empty}
+      </div>
+    );
+  }
+
+  return (
+    <ul
+      className={cn(
+        "divide-y divide-border overflow-hidden rounded-[var(--radius-md)] border border-border bg-card",
+        className,
+      )}
+      {...props}
+    >
+      {files.map((file) => {
+        const active = file.id === activeId;
+        const body = (
+          <>
+            <FileKindTile filename={file.filename} mimeType={file.mimeType} />
+            {/* On a phone the name may take two lines and the uploader takes
+                its own, since one line of facts cannot hold who sent the file. */}
+            <span className="grid min-w-0 flex-1">
+              <span className="line-clamp-2 text-sm font-medium text-foreground [overflow-wrap:anywhere] sm:line-clamp-1">
+                {file.filename}
+              </span>
+              <span className="truncate text-xs text-muted-foreground">
+                <FileFacts
+                  filename={file.filename}
+                  mimeType={file.mimeType}
+                  size={file.size}
+                  date={file.date}
+                  showKind
+                />
+                {file.uploader && (
+                  <span className="hidden sm:inline">
+                    <FactSeparator />
+                    {uploaderLabel(file.uploader)}
+                  </span>
+                )}
+              </span>
+              {file.uploader && (
+                <span className="truncate text-xs text-muted-foreground sm:hidden">
+                  {uploaderLabel(file.uploader)}
+                </span>
+              )}
+            </span>
+          </>
+        );
+        return (
+          <li
+            key={file.id}
+            className={cn(
+              "flex items-center gap-1 pr-2",
+              active ? "bg-primary/10" : onOpen && "hover:bg-[var(--bg-hover)]",
+            )}
+          >
+            {onOpen ? (
+              <button
+                type="button"
+                onClick={() => onOpen(file)}
+                aria-current={active ? "true" : undefined}
+                className={cn(
+                  "flex min-w-0 flex-1 items-center gap-3 py-2.5 pl-3 text-left",
+                  focusRingInset,
+                )}
+              >
+                {body}
+              </button>
+            ) : (
+              <div
+                aria-current={active ? "true" : undefined}
+                className="flex min-w-0 flex-1 items-center gap-3 py-2.5 pl-3"
+              >
+                {body}
+              </div>
+            )}
+            {onDownload && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                aria-label={`Download ${file.filename}`}
+                title="Download"
+                onClick={() => onDownload(file)}
+              >
+                <Download />
+              </Button>
+            )}
+            {onDelete && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                aria-label={`Delete ${file.filename}`}
+                title="Delete"
+                className="hover:text-[var(--surface-danger-text)]"
+                onClick={() => onDelete(file)}
+              >
+                <Trash2 />
+              </Button>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/src/files/file-preview.tsx

@@ -2,7 +2,7 @@
  * FilePreview — universal file renderer.
  *
  * Renders any file type:
- * - PDF: embedded viewer at full pane height
+ * - PDF: PdfViewer's rendered pages at full pane height
  * - Images: fit to the pane on a checker ground; click toggles natural size
  * - Video / audio: native players
  * - CSV: sticky-header table, capped at CSV_PREVIEW_ROW_LIMIT rows
@@ -14,21 +14,13 @@
  */
 
 import { useState } from "react";
-import {
-  Download,
-  FileSpreadsheet,
-  FileText,
-  Music,
-  X,
-  type LucideIcon,
-} from "lucide-react";
+import { Download, Music, X } from "lucide-react";
 import type { UrlTransform } from "react-markdown";
 import { focusRingInset } from "../lib/focus";
 import { cn } from "../lib/utils";
-import { Button } from "../primitives/button";
 import { Markdown } from "../markdown/markdown";
 import { CodeBlock, CopyButton } from "../markdown/code-block";
-import { formatBytes } from "../utils/format";
+import { FileCard } from "./file-card";
 import {
   fileExtension,
   getCodeLanguage,
@@ -36,6 +28,7 @@ import {
   resolveFilePreviewKind,
   type FilePreviewKind,
 } from "./file-format";
+import { PdfViewer } from "./pdf-viewer";
 
 export interface FilePreviewProps {
   filename: string;
@@ -239,38 +232,6 @@ function ImagePreview({ src, filename }: { src: string; filename: string }) {
   );
 }
 
-function PdfPreview({
-  blobUrl,
-  filename,
-  size,
-  onDownload,
-}: {
-  blobUrl: string;
-  filename: string;
-  size?: number;
-  onDownload?: () => void;
-}) {
-  // <object> lets a browser without an inline PDF viewer render the fallback
-  // card instead of a blank frame. The viewer draws its own chrome, so the
-  // object has no border; the card brings its own and fills the same height.
-  return (
-    <object
-      data={blobUrl}
-      type="application/pdf"
-      title={filename}
-      className="min-h-[24rem] w-full flex-1 rounded-[var(--radius-md)]"
-    >
-      <DownloadCard
-        filename={filename}
-        size={size}
-        sentence="This browser does not show PDFs inline."
-        onDownload={onDownload}
-        className="h-full"
-      />
-    </object>
-  );
-}
-
 function VideoPreview({ src, filename }: { src: string; filename: string }) {
   return (
     <div className="flex min-h-[12rem] flex-1 items-center justify-center overflow-hidden rounded-[var(--radius-md)] border border-border bg-background">
@@ -318,52 +279,10 @@ function MarkdownPreview({
   );
 }
 
-/**
- * One muted sentence plus the filename, its size when known, and a Download
- * button when the host wires `onDownload`. Serves spreadsheets, binaries, and
- * every kind whose source (blob or text) is missing.
- */
-function DownloadCard({
-  filename,
-  size,
-  sentence,
-  icon: Icon = FileText,
-  onDownload,
-  className,
-}: {
-  filename: string;
-  size?: number;
-  sentence: string;
-  icon?: LucideIcon;
-  onDownload?: () => void;
-  className?: string;
-}) {
-  return (
-    <div
-      className={cn(
-        "flex flex-col items-center justify-center rounded-[var(--radius-md)] border border-dashed border-border bg-background px-6 py-16 text-center",
-        className,
-      )}
-    >
-      <Icon className="mb-3 h-12 w-12 text-muted-foreground opacity-40" />
-      <p className="max-w-full truncate text-sm font-medium text-foreground">{filename}</p>
-      {size !== undefined && (
-        <p className="mt-1 text-xs text-muted-foreground">{formatBytes(size)}</p>
-      )}
-      <p className="mt-3 max-w-md text-sm text-muted-foreground">{sentence}</p>
-      {onDownload && (
-        <Button type="button" variant="outline" size="sm" className="mt-5" onClick={onDownload}>
-          <Download />
-          Download
-        </Button>
-      )}
-    </div>
-  );
-}
-
 function PreviewBody({
   kind,
   filename,
+  mimeType,
   content,
   blobUrl,
   size,
@@ -372,6 +291,7 @@ function PreviewBody({
 }: {
   kind: FilePreviewKind;
   filename: string;
+  mimeType?: string;
   content?: string;
   blobUrl?: string;
   size?: number;
@@ -379,12 +299,14 @@ function PreviewBody({
   onDownload?: () => void;
 }) {
   const hasText = typeof content === "string";
-  const card = (sentence: string, icon?: LucideIcon) => (
-    <DownloadCard
+  // The card takes its icon from the kind, so a spreadsheet or a recording
+  // reads as one even when it cannot be shown.
+  const card = (sentence: string) => (
+    <FileCard
       filename={filename}
+      mimeType={mimeType}
       size={size}
-      sentence={sentence}
-      icon={icon}
+      description={sentence}
       onDownload={onDownload}
     />
   );
@@ -392,7 +314,15 @@ function PreviewBody({
   switch (kind) {
     case "pdf":
       if (blobUrl) {
-        return <PdfPreview blobUrl={blobUrl} filename={filename} size={size} onDownload={onDownload} />;
+        return (
+          <PdfViewer
+            src={blobUrl}
+            filename={filename}
+            size={size}
+            onDownload={onDownload}
+            className="min-h-[24rem] flex-1"
+          />
+        );
       }
       return card(NEEDS_DOWNLOAD_LINK);
     case "image":
@@ -405,10 +335,10 @@ function PreviewBody({
       return card(NEEDS_DOWNLOAD_LINK);
     case "audio":
       if (blobUrl) return <AudioPreview src={blobUrl} filename={filename} />;
-      return card(NEEDS_DOWNLOAD_LINK, Music);
+      return card(NEEDS_DOWNLOAD_LINK);
     case "csv":
       if (hasText) return <CsvPreview content={content} />;
-      return card(NO_INLINE_CONTENT, FileSpreadsheet);
+      return card(NO_INLINE_CONTENT);
     case "code":
     case "json":
     case "yaml":
@@ -421,7 +351,7 @@ function PreviewBody({
       if (hasText) return <TextPreview content={content} />;
       return card(NO_INLINE_CONTENT);
     case "spreadsheet":
-      return card("Download to open this workbook in a spreadsheet app.", FileSpreadsheet);
+      return card("Download to open this workbook in a spreadsheet app.");
     case "binary":
       if (hasText) return <TextPreview content={content} />;
       return card(blobUrl ? NO_INLINE_PREVIEW : NEEDS_DOWNLOAD_LINK);
@@ -482,6 +412,7 @@ export function FilePreview({
         <PreviewBody
           kind={kind}
           filename={filename}
+          mimeType={mimeType}
           content={content}
           blobUrl={blobUrl}
           size={size}

package/src/files/index.ts

@@ -18,6 +18,15 @@ export {
   parseCsv,
   type FilePreviewProps,
 } from "./file-preview";
+export { PdfViewer, type PdfViewerProps } from "./pdf-viewer";
+export { configurePdfViewer, type PdfViewerConfig } from "./pdf-loader";
+export {
+  FileCard,
+  type FileCardProps,
+  type FileDetails,
+  type FileUploader,
+} from "./file-card";
+export { FileList, type FileListProps, type FileListItem } from "./file-list";
 export { FileTabs, type FileTabsProps, type FileTabData } from "./file-tabs";
 export { FileArtifactPane, type FileArtifactPaneProps } from "./file-artifact-pane";
 export {