@anchrd/intel-ui 0.39.0 → 0.41.0

package/src/board/board-task/board-task.ts

@@ -0,0 +1,105 @@
+import type { BoardTask } from "@anchrd/intel-contract/board";
+import type { ColumnWithCards } from "@/board/board-data/board-data.types.ts";
+
+/** What one entry of the task's link list is. The icon is drawn from this, nothing else. */
+/**
+ * ⚠️ **No `reference` kind yet, on purpose.** A plain reference is a link in the node graph and
+ * needs `node_link_list` — a second read this screen does not make. Carrying the kind here with no
+ * caller would be a path that looks built and is not; it is `#687` instead.
+ */
+export type LinkKind = "subtask" | "blocker" | "blocked";
+
+export interface TaskLink {
+  kind: LinkKind;
+  /** The linked node's id — its address, and the key of the row. */
+  id: string;
+  /** ⚠️ `null` when this answer holds no name for it. The VIEW decides what to say then; putting
+   * the id here would put it on screen. */
+  title: string | null;
+  /** The column the linked task sits in, so its state is readable without opening it. */
+  columnTitle: string | null;
+  /** Set on a subtask only: whether it sits in a column the board calls terminal. */
+  done: boolean;
+}
+
+/**
+ * ⚠️ **The order is a DECISION, not an accident.** Subtasks, blockers and references stand mixed in
+ * one list, and a list whose order nobody can name reorders itself on every load. The key is, in
+ * this order:
+ *
+ * 1. **by kind** — subtasks, then what this task waits for, then what waits for it. Subtasks first
+ *    because they carry the progress; what waits on this one last, because it says nothing about
+ *    whether this task itself can move.
+ * 2. **by the board's own position** within a kind, so the list reads in the same order as the
+ *    column it came from.
+ * 3. **by title**, only to break a tie — two cards may share a position after a filtered read.
+ */
+const kindOrder: Record<LinkKind, number> = {
+  subtask: 0,
+  blocker: 1,
+  blocked: 2,
+};
+
+export function linksOf(task: BoardTask, columns: ColumnWithCards[]): TaskLink[] {
+  const cards = columns.flatMap((entry) =>
+    entry.cards.map((card) => ({ card, column: entry.column })),
+  );
+  const at = (id: string | null) =>
+    id === null ? undefined : cards.find((entry) => entry.card.id === id);
+  const position = (id: string) => at(id)?.card.position ?? Number.POSITIVE_INFINITY;
+
+  const links: TaskLink[] = [];
+
+  for (const { card, column } of cards) {
+    if (card.parentTaskId === task.id) {
+      links.push({
+        kind: "subtask",
+        id: card.id,
+        title: card.title,
+        columnTitle: column.title,
+        done: column.terminal,
+      });
+    }
+    // ⚠️ The other direction too. `dependsOn` is stored on the waiting card, so a task only learns
+    // what waits for IT by looking at every card — and that is exactly what somebody opening a
+    // blocker wants to know before they move it.
+    if (card.dependsOn === task.id && card.id !== task.id) {
+      links.push({
+        kind: "blocked",
+        id: card.id,
+        title: card.title,
+        columnTitle: column.title,
+        done: false,
+      });
+    }
+  }
+
+  if (task.dependsOn !== null) {
+    const blocking = at(task.dependsOn);
+    links.push({
+      kind: "blocker",
+      id: task.dependsOn,
+      // ⚠️ **`null`, never the id.** A blocker may be any node, not only a card of this board, so
+      // this answer often has no title for it — and an id put on screen in place of a name is the
+      // rule in `user-name.ts` (#258) broken with a node id instead of a principal id. The view
+      // says "something outside this board"; the id says nothing at all.
+      title: blocking?.card.title ?? null,
+      columnTitle: blocking?.column.title ?? null,
+      done: false,
+    });
+  }
+
+  return links.sort(
+    (a, b) =>
+      kindOrder[a.kind] - kindOrder[b.kind] ||
+      position(a.id) - position(b.id) ||
+      (a.title ?? "").localeCompare(b.title ?? ""),
+  );
+}
+
+/** How far the subtasks have got — `null` when there are none, so the view draws nothing. */
+export function progressOf(links: TaskLink[]): { done: number; total: number } | null {
+  const subtasks = links.filter((link) => link.kind === "subtask");
+  if (subtasks.length === 0) return null;
+  return { done: subtasks.filter((link) => link.done).length, total: subtasks.length };
+}

package/src/board/board-task/board-task.tsx

@@ -0,0 +1,396 @@
+import type { BoardTask } from "@anchrd/intel-contract/board";
+import { ARCHIVE_COLUMN_ID } from "@anchrd/intel-contract/board";
+import { Lock, Plus, Square, SquareCheck } from "lucide-react";
+import { useState } from "react";
+import { useAssigneeLabel } from "@/board/board-assignee/board-assignee.ts";
+import type { BoardHandle } from "@/board/board-data/board-data.types.ts";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { initials } from "@/user-name/user-name.ts";
+import { type LinkKind, linksOf, progressOf, type TaskLink } from "./board-task.ts";
+
+const linkIcons: Record<LinkKind, typeof Lock> = {
+  subtask: Square,
+  blocker: Lock,
+  blocked: Lock,
+};
+
+/**
+ * The circle for whoever a card is for, and the way to take the assignment off.
+ *
+ * ⚠️ **One person, not a group.** Jack's decision 2026-08-20: the STYLE is borrowed from the access
+ * summary, the field stays `assigneeId`. A row of circles here would imply a second data model that
+ * does not exist.
+ *
+ * ⚠️ **Only ever drawn for somebody.** "Nobody yet" as a chip is a placeholder for an absence, and
+ * an absence needs no place on screen (#692).
+ *
+ * ⚠️ **The NAME lives on the button, and the circle is hidden.** Children of a `<button>` are
+ * presentational in ARIA, so a label inside one is never announced and the button's own name wins.
+ * Wrapping the circle in a control therefore takes the person out of the accessibility tree unless
+ * the control says it too. That is the trap in `packages/ui/CLAUDE.md`, walked into by the very
+ * change that documented it.
+ */
+function AssigneeChip({ id, clear }: { id: string; clear(): void }) {
+  const i18n = useI18n();
+  const label = useAssigneeLabel(id);
+  return (
+    <button
+      type="button"
+      aria-label={i18n.t("board.clearAssignee", { name: label })}
+      title={label}
+      onClick={clear}
+      className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <AssigneeCircle label={label} />
+    </button>
+  );
+}
+
+function AssigneeCircle({ label }: { label: string }) {
+  return (
+    <span
+      // ⚠️ **Hidden, and it must stay hidden.** This span used to carry `role="img"` with the
+      // person's name, and that reached nobody: it sits inside a `<button>`, whose children are
+      // presentational in ARIA. Giving it a role and a label back would not add a second announcement
+      // — it would add none, while making the code look as though the name were covered here rather
+      // than on the button. See `AssigneeChip` above and `packages/ui/CLAUDE.md`.
+      aria-hidden="true"
+      className="flex size-7 items-center justify-center rounded-full bg-accent text-xs font-medium text-accent-foreground ring-2 ring-background"
+    >
+      {initials(label)}
+    </span>
+  );
+}
+
+/** One entry of the link list. The icon carries the kind; nothing writes the word out. */
+function LinkRow({ link, onOpen }: { link: TaskLink; onOpen(id: string): void }) {
+  const i18n = useI18n();
+  const Icon = link.kind === "subtask" && link.done ? SquareCheck : linkIcons[link.kind];
+  return (
+    <li className="flex items-center gap-2 border-b py-2 last:border-0">
+      <Icon
+        aria-hidden="true"
+        className={`size-4 shrink-0 ${link.kind === "blocker" ? "text-destructive" : "text-muted-foreground"}`}
+      />
+      <button
+        type="button"
+        onClick={() => onOpen(link.id)}
+        className="flex-1 truncate text-left text-sm outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        {/* ⚠️ A name or a sentence, never the id. This answer holds no title for a node outside the
+            board, and a ulid on screen is a label nobody can read (`user-name.ts`, #258). */}
+        {link.title ?? i18n.t("board.link.outside")}
+      </button>
+      {/* ⚠️ The column of the LINKED task, so its state is readable without opening it — the whole
+          reason the list carries a right-hand column at all. */}
+      {/* ⚠️ Empty rather than a word, and no template over the kind. Only a BLOCKER can be without
+          a column — it may be any node, not a card of this board — and the title beside it already
+          says "outside this board". A `board.link.${kind}` lookup could reach exactly one of the
+          three keys, and kept the other two alive in all three catalogs for nobody. */}
+      <span className="shrink-0 text-xs text-muted-foreground">{link.columnTitle ?? ""}</span>
+    </li>
+  );
+}
+
+export function BoardTaskDocument({
+  task,
+  board,
+  onOpen,
+  body,
+}: {
+  task: BoardTask;
+  board: BoardHandle;
+  onOpen(taskId: string): void;
+  /** The markdown surface, handed in so this component stays free of the editor's own loading. */
+  body: React.ReactNode;
+}) {
+  const i18n = useI18n();
+
+  const links = linksOf(task, board.columns);
+  const progress = progressOf(links);
+  const columns = board.columns.filter((entry) => entry.unknown !== true).map((e) => e.column);
+  const column = columns.find((entry) => entry.id === task.status);
+
+  /**
+   * ⚠️ **Refused while a write is in flight, like every other surface of this board.** Labels make
+   * it worst: the whole list is REPLACED, so two quick clicks each send the list minus their own
+   * entry, the second answer wins, and one of the two removals is silently undone — both calls
+   * succeeded, so nothing anywhere reports a problem (#651).
+   */
+  const write = (input: Partial<Omit<Parameters<BoardHandle["updateTask"]>[0], "taskId">>) => {
+    if (board.isWriting) return;
+    void board.updateTask({
+      taskId: task.id,
+      ...input,
+      idempotencyKey: crypto.randomUUID(),
+    });
+  };
+
+  return (
+    <div
+      className="flex min-h-0 flex-1 flex-col gap-4 overflow-auto p-6"
+      aria-busy={board.isWriting}
+    >
+      {/* ⚠️ No heading and no way back HERE. Both live in the title row above since #692: the path
+          there ends in this card's name, so a heading would print it a second time, and an arrow
+          here would be a second control meaning what the one up there already means. */}
+      {/* ⚠️ ONE line of chips, and no field labels. "Status:" in front of a chip that says "Backlog"
+          says nothing the chip does not — and it turns a quiet head into a form. */}
+      <div className="flex flex-wrap items-center gap-2">
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            aria-label={i18n.t("board.moveTo")}
+            className="rounded-full border px-3 py-1 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {column?.title ?? task.status}
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            <DropdownMenuRadioGroup
+              value={task.status}
+              // ⚠️ Where a task SITS is a move, not a field edit: the server computes a position and
+              // checks the cycles for it. Everything else on this screen is a plain change.
+              onValueChange={(next) => write({ status: next })}
+            >
+              {columns.map((entry) => (
+                <DropdownMenuRadioItem key={entry.id} value={entry.id}>
+                  {entry.title}
+                </DropdownMenuRadioItem>
+              ))}
+              <DropdownMenuRadioItem value={ARCHIVE_COLUMN_ID}>
+                {i18n.t("board.column.archive")}
+              </DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {/* ⚠️ Two chips when both dates are set, not a range. A range reads as one fact; these
+            are two, and each is removed on its own. */}
+        {task.startDate === null ? null : (
+          <DateChip
+            label={i18n.t("board.fromDate", { date: task.startDate.slice(0, 10) })}
+            remove={() => write({ startDate: null })}
+          />
+        )}
+        {task.dueDate === null ? null : (
+          <DateChip
+            label={i18n.t("board.untilDate", { date: task.dueDate.slice(0, 10) })}
+            remove={() => write({ dueDate: null })}
+          />
+        )}
+
+        {task.labels.map((entry) => (
+          <button
+            key={entry}
+            type="button"
+            aria-label={i18n.t("board.removeLabel", { label: entry })}
+            onClick={() => write({ labels: task.labels.filter((keep) => keep !== entry) })}
+            className="rounded-full border px-3 py-1 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {entry}
+          </button>
+        ))}
+
+        {/* ⚠️ **Last, always.** It is the only round element in the row; standing between the chips
+            it breaks the line, and a row without one simply ends earlier. */}
+        {task.assigneeId === null ? null : (
+          <AssigneeChip id={task.assigneeId} clear={() => write({ assigneeId: null })} />
+        )}
+
+        <Adder task={task} board={board} write={write} />
+      </div>
+
+      {/* ⚠️ ONE list, not three blocks: the icon carries the kind. And it exists only when there is
+          something in it. An empty section with a heading and a hint tells the reader that something
+          is missing; nothing at all tells them there is nothing, which is the truth (#692). */}
+      {links.length === 0 ? null : (
+        <section aria-label={i18n.t("board.links")} className="flex flex-col gap-1">
+          <h2 className="flex items-center gap-2 text-sm font-medium">
+            {i18n.t("board.links")}
+            {progress === null ? null : (
+              <span className="text-xs text-muted-foreground tabular-nums">
+                {i18n.t("board.progress", { done: progress.done, total: progress.total })}
+              </span>
+            )}
+          </h2>
+          <ul className="flex flex-col">
+            {links.map((link) => (
+              <LinkRow key={`${link.kind}:${link.id}`} link={link} onOpen={onOpen} />
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {/* The markdown text is the largest element of the page — everything above is the quiet part.
+          ⚠️ The slot is not decoration: a test that asks whether the BODY drew something has to be
+          able to say which part of the card it means. Unscoped, the same loading line elsewhere on
+          the card answers for it, and the assurance goes hollow without anybody touching it. */}
+      <div data-slot="task-body" className="min-h-0 flex-1">
+        {body}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * ⚠️ **ONE `+ Verlinkung`, and the kind is chosen afterwards** — not two buttons labelled "subtask"
+ * and "waits for". That is `#371`: the reader decides WHAT they are linking once they know which
+ * card they mean, not before.
+ */
+
+/** A date, and the way to take it off again. */
+function DateChip({ label, remove }: { label: string; remove(): void }) {
+  return (
+    <button
+      type="button"
+      onClick={remove}
+      className="rounded-full border px-3 py-1 text-xs tabular-nums outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      {label}
+    </button>
+  );
+}
+
+/**
+ * What the card can still be given. The order matches the chips it produces.
+ *
+ * ⚠️ **No `assignee` here, and that is a gap rather than a decision.** Setting one needs a person to
+ * pick from, and this application can only ever DISPLAY principals it already sees in a grant: there
+ * is no list to choose from anywhere in the data provider. An entry that opens nothing is worse than
+ * a missing one, because it looks like the feature is there (`#700`).
+ */
+const addable = ["label", "start", "due"] as const;
+const linkable = ["subtask", "blocker"] as const;
+type Addable = (typeof addable)[number] | (typeof linkable)[number];
+
+/**
+ * ⚠️ **ONE plus for everything the card can carry**, and the kind is chosen afterwards. Two
+ * controls, one for fields and one for links, asked the reader to know which of the two a thing was
+ * before they could add it, and that is a question about our data model, not about their work.
+ */
+function Adder({
+  task,
+  board,
+  write,
+}: {
+  task: BoardTask;
+  board: BoardHandle;
+  write(input: Partial<Omit<Parameters<BoardHandle["updateTask"]>[0], "taskId">>): void;
+}) {
+  const i18n = useI18n();
+  const [kind, setKind] = useState<Addable | null>(null);
+  const [draft, setDraft] = useState("");
+  const close = () => {
+    setKind(null);
+    setDraft("");
+  };
+
+  const candidates = board.columns
+    .flatMap((entry) => entry.cards)
+    .filter((card) => card.id !== task.id && card.parentTaskId !== task.id);
+
+  const commit = () => {
+    const value = draft.trim();
+    if (value.length === 0 || board.isWriting) return close();
+    if (kind === "label") {
+      // ⚠️ Tags are REPLACED, not merged, so the whole list travels, and a duplicate would be
+      // written as one more entry rather than refused.
+      if (!task.labels.includes(value)) write({ labels: [...task.labels, value] });
+    }
+    if (kind === "start") write({ startDate: `${value}T00:00:00.000Z` });
+    if (kind === "due") write({ dueDate: `${value}T00:00:00.000Z` });
+    if (kind === "subtask") {
+      void board
+        .createTask({
+          title: value,
+          // A subtask starts in the same column as the task it belongs to: the first column would
+          // claim work was reset that never started.
+          status: task.status,
+          parentTaskId: task.id,
+          assigneeId: null,
+          labels: [],
+          startDate: null,
+          dueDate: null,
+          dependsOn: null,
+          idempotencyKey: crypto.randomUUID(),
+        })
+        .then(close);
+      return;
+    }
+    close();
+  };
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          aria-label={i18n.t("board.add")}
+          className="rounded-full border px-2 py-1 text-xs outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <Plus aria-hidden="true" className="size-3" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          {addable.map((entry) => (
+            <DropdownMenuItem key={entry} onSelect={() => setKind(entry)}>
+              {i18n.t(`board.add.${entry}`)}
+            </DropdownMenuItem>
+          ))}
+          {linkable.map((entry) => (
+            <DropdownMenuItem key={entry} onSelect={() => setKind(entry)}>
+              {i18n.t(`board.link.${entry}`)}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {kind === null || kind === "blocker" ? null : (
+        <input
+          // biome-ignore lint/a11y/noAutofocus: it opens on a deliberate click, never on load
+          autoFocus
+          type={kind === "start" || kind === "due" ? "date" : "text"}
+          value={draft}
+          aria-label={i18n.t(kind === "subtask" ? "board.link.subtask" : `board.add.${kind}`)}
+          onChange={(event) => setDraft(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Escape") close();
+            if (event.key !== "Enter") return;
+            event.preventDefault();
+            commit();
+          }}
+          className="w-36 rounded-full border bg-background px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        />
+      )}
+
+      {kind !== "blocker" ? null : (
+        <DropdownMenu open onOpenChange={(next) => !next && close()}>
+          <DropdownMenuTrigger
+            aria-label={i18n.t("board.link.blocker")}
+            className="rounded-full border px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {i18n.t("board.link.blocker")}
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {candidates.map((card) => (
+              <DropdownMenuItem
+                key={card.id}
+                onSelect={() => {
+                  close();
+                  write({ dependsOn: card.id });
+                }}
+              >
+                {card.title}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </>
+  );
+}

package/src/board/board-title-row/board-title-row.tsx

@@ -0,0 +1,68 @@
+import type { Node } from "@anchrd/intel-contract/node";
+import { useQuery } from "@tanstack/react-query";
+import { crumbsOf } from "@/board/board-crumbs/board-crumbs.ts";
+import { BoardCrumbs } from "@/board/board-crumbs/board-crumbs.tsx";
+import { useBoard } from "@/board/board-data/board-data.ts";
+import { useOpenTask } from "@/board/board-open-task/board-open-task.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { TitleRow } from "@/title-row/title-row.tsx";
+
+/**
+ * The one line above a board, and above a card opened on it.
+ *
+ * ⚠️ **The SAME `TitleRow`, with the path in place of the name.** A second header component for the
+ * open card would look identical today and drift tomorrow: the order of the right-hand group, the
+ * shadow on scroll and the slots are decided in exactly one place, and this keeps it that way (#53).
+ *
+ * ⚠️ **The menu then belongs to the CARD, not to the board.** Rename, move and archive act on what
+ * the reader is looking at. That is also where renaming a card happens, since the path carries its
+ * name and there is no heading to edit (#692).
+ */
+export function BoardTitleRow({ node }: { node: Node }) {
+  const { openId, open } = useOpenTask();
+  const board = useBoard(node.id);
+  const { data } = useIntelRouterContext();
+
+  // ⚠️ The same key the open card's body already uses, so this costs no second request.
+  const task = useQuery({
+    queryKey: ["node", openId],
+    queryFn: () => data.getNode(openId ?? ""),
+    enabled: openId !== null,
+  });
+
+  const tasks = board.columns.flatMap((entry) => entry.cards);
+  const openTask = tasks.find((card) => card.id === openId);
+
+  // ⚠️ Until the card is in the ANSWER, the board's own row stands. Drawing a path around a name
+  // nobody knows yet would flicker a wrong one into place for a moment.
+  //
+  // ⚠️ The card's NODE is a different wait, and it must not gate the path: it is only needed for the
+  // menu, and holding the whole row for it would show the board's name first and swap it a moment
+  // later — two different headers in sequence for one navigation.
+  if (openId === null || openTask === undefined) {
+    return (
+      <TitleRow title={node.title} description={node.description} target={{ type: "node", node }} />
+    );
+  }
+
+  const crumbs = <BoardCrumbs crumbs={crumbsOf(openId, board.title, tasks)} onOpen={open} />;
+
+  /**
+   * ⚠️ **No menu at all while the card's node is missing**, rather than the board's. Rename, move
+   * and archive would otherwise act on the BOARD, and `archive` fires without asking: a control
+   * that is not there yet costs a moment, one that acts on the wrong thing costs the thing.
+   *
+   * ⚠️ **Missing covers two states, and deliberately treats them the same**: the read is still on
+   * its way, or it was refused. Neither gives this row a card to act on, and telling them apart
+   * here would only decide WHICH wrong menu to draw.
+   */
+  if (task.data === undefined) return <TitleRow title={openTask.title} crumbs={crumbs} />;
+
+  return (
+    <TitleRow
+      title={openTask.title}
+      crumbs={crumbs}
+      target={{ type: "node", node: task.data.node }}
+    />
+  );
+}

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

@@ -0,0 +1,28 @@
+import FileViewer, { type ViewerOptions } from "@file-viewer/react";
+import { useMemo } from "react";
+import { useResolvedTheme } from "@/theme/theme-context.tsx";
+
+export function FilePreviewView({ file, renderer }: { file: File; renderer: unknown }) {
+  const theme = useResolvedTheme();
+  const options = useMemo<ViewerOptions>(
+    () => ({
+      renderers: [renderer] as unknown as NonNullable<ViewerOptions["renderers"]>,
+      rendererMode: "replace",
+      builtinRenderers: "none",
+      autoRenderers: false,
+      styleIsolation: "shadow",
+      theme,
+      locale: "auto",
+      toolbar: {
+        download: false,
+        print: false,
+        exportHtml: false,
+        theme: false,
+        permissions: { download: false, print: false, exportHtml: false },
+      },
+      ui: { density: "compact", surfaceBackground: "transparent" },
+    }),
+    [renderer, theme],
+  );
+  return <FileViewer file={file} className="h-full min-h-64" options={options} />;
+}

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

@@ -0,0 +1,28 @@
+import { lazy, Suspense } from "react";
+import type { AttachmentPreviewKind } from "@/attachment-viewer/attachment-viewer.tsx";
+
+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">;
+}) {
+  const Preview = previews[kind];
+  return (
+    <Suspense fallback={null}>
+      <Preview file={file} />
+    </Suspense>
+  );
+}

package/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} />;
+}

package/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/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/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} />;
+}