@devaccel-labs/app-comments-toolbar 1.1.0 → 1.3.0

package/src/runtime/attachments.tsx

@@ -0,0 +1,1260 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ButtonHTMLAttributes,
+  type CSSProperties,
+  type ClipboardEvent,
+  type MouseEvent,
+  type PointerEvent as ReactPointerEvent,
+} from "react";
+import { uploadAttachment, type Attachment, type Capture } from "./client.js";
+import type { MarkupShape } from "./markup.js";
+import { MarkupEditor, type MarkupResult } from "./markup-editor.js";
+import type { Session } from "./session.js";
+import { parseReplay, replayLine, type ReplayEvent, type ReplayFile } from "./replay.js";
+import * as Icon from "./icons.js";
+import {
+  ATTACHMENT_MAX_BYTES,
+  ATTACHMENT_MAX_FILES,
+  ATTACHMENT_TYPES,
+  formatSize,
+  isReplayFile,
+} from "./attachment-model.js";
+
+export { ATTACHMENT_MAX_BYTES, formatSize, isReplayFile } from "./attachment-model.js";
+
+const MAX_BYTES = ATTACHMENT_MAX_BYTES;
+const MAX_FILES = ATTACHMENT_MAX_FILES;
+const ZOOM_MIN = 1;
+const ZOOM_MAX = 4;
+const ZOOM_STEP = 0.25;
+const ACCEPT = ATTACHMENT_TYPES.join(",");
+const ALLOWED = new Set(ATTACHMENT_TYPES);
+
+/** The file an image was marked up from, so markup stays editable until the message is sent. */
+export type MarkupSource = { blob: Blob; url: string; name: string; shapes: MarkupShape[] };
+
+export type Pending = {
+  key: string;
+  name: string;
+  size: number;
+  contentType: string;
+  preview: string | null;
+  status: "uploading" | "ready" | "failed";
+  blob: Blob;
+  id?: string;
+  error?: string;
+  capture?: Capture | undefined;
+  markup?: MarkupSource | undefined;
+};
+
+function release(item: Pending) {
+  if (item.preview) URL.revokeObjectURL(item.preview);
+  if (item.markup && item.markup.url !== item.preview) URL.revokeObjectURL(item.markup.url);
+}
+
+/** Files attached to one draft. Each upload starts immediately so posting doesn't wait on the network. */
+export function useAttachments(
+  session: Session | null,
+  memberToken: string | null,
+  onError: (message: string) => void,
+  environment?: string,
+) {
+  const [items, setItems] = useState<Pending[]>([]);
+  const itemsRef = useRef(items);
+  useEffect(() => {
+    itemsRef.current = items;
+  }, [items]);
+  /** Callers of `settled`, told after every status change. */
+  const waiters = useRef<Array<() => void>>([]);
+
+  const patch = useCallback((key: string, next: Partial<Pending>) => {
+    const apply = (current: Pending[]) =>
+      current.map((item) => (item.key === key ? { ...item, ...next } : item));
+    // The ref is kept in step at once, so `settled` sees the outcome before React renders it.
+    itemsRef.current = apply(itemsRef.current);
+    setItems(apply);
+    const told = waiters.current;
+    waiters.current = [];
+    for (const tell of told) tell();
+  }, []);
+
+  /** Resolves with the files once none of them is still uploading. */
+  const settled = useCallback(
+    () =>
+      new Promise<Pending[]>((resolve) => {
+        const check = () => {
+          if (itemsRef.current.some((item) => item.status === "uploading")) {
+            waiters.current.push(check);
+            return;
+          }
+          resolve(itemsRef.current);
+        };
+        check();
+      }),
+    [],
+  );
+
+  const upload = useCallback(
+    (key: string, blob: Blob, name: string, capture?: Capture, markedUp = false) => {
+      if (!session || !memberToken) return;
+      uploadAttachment(session, memberToken, blob, name, environment, capture, markedUp)
+        .then((attachment) => patch(key, { status: "ready", id: attachment.id }))
+        .catch((caught) => {
+          const message = caught instanceof Error ? caught.message : "Upload failed.";
+          patch(key, { status: "failed", error: message });
+          onError(`${name}: ${message}`);
+        });
+    },
+    [environment, memberToken, onError, patch, session],
+  );
+
+  /** Attaches `files` and starts their uploads. Returns the key of each file taken. */
+  const add = useCallback(
+    (files: Array<{ blob: Blob; name: string; capture?: Capture }>): string[] => {
+      if (!session || !memberToken) return [];
+      const keys: string[] = [];
+      const room = MAX_FILES - itemsRef.current.length;
+      if (files.length > room) onError(`Up to ${MAX_FILES} files per message.`);
+      for (const { blob, name, capture } of files.slice(0, Math.max(0, room))) {
+        if (!ALLOWED.has(blob.type)) {
+          onError(`${name}: that file type isn’t supported.`);
+          continue;
+        }
+        if (blob.size > MAX_BYTES) {
+          onError(`${name} is over 10 MB.`);
+          continue;
+        }
+        const key = crypto.randomUUID();
+        const previewable =
+          blob.type.startsWith("image/") ||
+          blob.type.startsWith("video/") ||
+          (blob.type === "application/json" && name.startsWith("replay-"));
+        const preview = previewable ? URL.createObjectURL(blob) : null;
+        const item: Pending = {
+          key,
+          name,
+          size: blob.size,
+          contentType: blob.type,
+          preview,
+          status: "uploading",
+          blob,
+          capture,
+        };
+        itemsRef.current = [...itemsRef.current, item];
+        setItems((current) => [...current, item]);
+        keys.push(key);
+        upload(key, blob, name, capture);
+      }
+      return keys;
+    },
+    [memberToken, onError, session, upload],
+  );
+
+  /** Puts files back from a saved draft, keys and markup included, and uploads them again. */
+  const restore = useCallback(
+    (
+      files: Array<{
+        key: string;
+        blob: Blob;
+        name: string;
+        capture?: Capture | undefined;
+        markup?: { blob: Blob; name: string; shapes: MarkupShape[] } | undefined;
+      }>,
+    ) => {
+      if (!session || !memberToken) return;
+      const next: Pending[] = files.slice(0, MAX_FILES).map((file) => {
+        const previewable =
+          file.blob.type.startsWith("image/") ||
+          file.blob.type.startsWith("video/") ||
+          (file.blob.type === "application/json" && file.name.startsWith("replay-"));
+        return {
+          key: file.key,
+          name: file.name,
+          size: file.blob.size,
+          contentType: file.blob.type,
+          preview: previewable ? URL.createObjectURL(file.blob) : null,
+          status: "uploading",
+          blob: file.blob,
+          capture: file.capture,
+          markup: file.markup
+            ? {
+                blob: file.markup.blob,
+                url: URL.createObjectURL(file.markup.blob),
+                name: file.markup.name,
+                shapes: file.markup.shapes,
+              }
+            : undefined,
+        };
+      });
+      itemsRef.current = [...itemsRef.current, ...next];
+      setItems((current) => [...current, ...next]);
+      // A restored file with markup is the flattened, drawn-on copy.
+      for (const item of next)
+        upload(item.key, item.blob, item.name, item.capture, item.markup !== undefined);
+    },
+    [memberToken, session, upload],
+  );
+
+  /**
+   * Swaps an image for its marked-up copy, or back to the original when the markup was cleared, and uploads the
+   * result. The swap takes a new key, so the earlier upload finishing late can't mark the new file ready.
+   * Returns the new key, or null when the file is gone.
+   */
+  const replace = useCallback(
+    (key: string, result: MarkupResult) => {
+      const item = itemsRef.current.find((candidate) => candidate.key === key);
+      if (!item || !session || !memberToken) return null;
+      if (!result.blob && !item.markup) return key;
+      if (result.blob && result.blob.size > MAX_BYTES) {
+        onError(`${result.name} is over 10 MB.`);
+        return null;
+      }
+      const source = item.markup ?? {
+        blob: item.blob,
+        url: item.preview ?? URL.createObjectURL(item.blob),
+        name: item.name,
+        shapes: [],
+      };
+      const next: Pending = result.blob
+        ? {
+            key: crypto.randomUUID(),
+            name: result.name,
+            size: result.blob.size,
+            contentType: result.blob.type,
+            preview: URL.createObjectURL(result.blob),
+            status: "uploading",
+            blob: result.blob,
+            capture: item.capture,
+            markup: { ...source, shapes: result.shapes },
+          }
+        : {
+            key: crypto.randomUUID(),
+            name: source.name,
+            size: source.blob.size,
+            contentType: source.blob.type,
+            preview: source.url,
+            status: "uploading",
+            blob: source.blob,
+            capture: item.capture,
+          };
+      // The original's URL lives on in `next`; only an earlier marked-up copy is let go.
+      if (item.markup && item.preview) URL.revokeObjectURL(item.preview);
+      itemsRef.current = itemsRef.current.map((candidate) =>
+        candidate.key === key ? next : candidate,
+      );
+      setItems((current) => current.map((candidate) => (candidate.key === key ? next : candidate)));
+      upload(next.key, next.blob, next.name, next.capture, next.markup !== undefined);
+      return next.key;
+    },
+    [memberToken, onError, session, upload],
+  );
+
+  const remove = useCallback((key: string) => {
+    itemsRef.current = itemsRef.current.filter((candidate) => candidate.key !== key);
+    setItems((current) => {
+      const item = current.find((candidate) => candidate.key === key);
+      if (item) release(item);
+      return current.filter((candidate) => candidate.key !== key);
+    });
+  }, []);
+
+  const reset = useCallback(() => {
+    for (const item of itemsRef.current) release(item);
+    itemsRef.current = [];
+    setItems([]);
+  }, []);
+
+  useEffect(() => () => itemsRef.current.forEach(release), []);
+
+  return {
+    items,
+    add,
+    replace,
+    remove,
+    reset,
+    restore,
+    settled,
+    ids: items.filter((item) => item.status === "ready" && item.id).map((item) => item.id!),
+    uploading: items.some((item) => item.status === "uploading"),
+  };
+}
+
+export function filesFromClipboard(event: ClipboardEvent) {
+  return [...event.clipboardData.files].map((file) => ({
+    blob: file as Blob,
+    name: file.name || "pasted-image.png",
+  }));
+}
+
+export type PreviewFile = {
+  id: string;
+  name: string;
+  contentType: string;
+  url: string;
+  capture?: Capture | undefined;
+  /** A draft image's unmarked original and its markup, for the editor. */
+  markup?: { src: string; name: string; shapes: MarkupShape[] } | undefined;
+};
+
+function canPreview(item: Pending) {
+  return (
+    Boolean(item.preview) &&
+    (item.contentType.startsWith("image/") ||
+      item.contentType.startsWith("video/") ||
+      isReplayFile(item))
+  );
+}
+
+/** Images, videos, and replays waiting in a draft, in tray order, for the preview beside the composer. */
+export function pendingPreviews(items: Pending[]): PreviewFile[] {
+  return items.filter(canPreview).map((item) => ({
+    id: item.key,
+    name: item.name,
+    contentType: item.contentType,
+    url: item.preview!,
+    capture: item.capture,
+    markup: item.contentType.startsWith("image/")
+      ? {
+          src: item.markup?.url ?? item.preview!,
+          name: item.markup?.name ?? item.name,
+          shapes: item.markup?.shapes ?? [],
+        }
+      : undefined,
+  }));
+}
+
+export function AttachmentTray({
+  items,
+  activeKey,
+  onPreview,
+  onRemove,
+}: {
+  items: Pending[];
+  activeKey?: string | null;
+  onPreview?: (item: Pending) => void;
+  onRemove: (key: string) => void;
+}) {
+  if (!items.length) return null;
+  return (
+    <div className="cs-tray" data-cs-ui="attachment-tray">
+      {items.map((item) => {
+        const visual = canPreview(item);
+        const open = item.key === activeKey;
+        const thumb =
+          item.preview && item.contentType.startsWith("video/") ? (
+            <video src={item.preview} muted />
+          ) : item.preview && item.contentType.startsWith("image/") ? (
+            <img src={item.preview} alt="" />
+          ) : isReplayFile(item) ? (
+            <Icon.Undo />
+          ) : (
+            <Icon.FileIcon />
+          );
+        return (
+          <div
+            key={item.key}
+            className={`cs-pending is-${item.status}${open ? " is-open" : ""}`}
+            data-cs-ui="pending-file"
+            data-status={item.status}
+            title={item.error ?? item.name}
+          >
+            {visual && onPreview ? (
+              <button
+                type="button"
+                className="cs-pending-open"
+                aria-label={`View ${item.name}`}
+                aria-pressed={open}
+                onClick={() => onPreview(item)}
+              >
+                {thumb}
+                <span className="cs-pending-name">{item.name}</span>
+              </button>
+            ) : (
+              <>
+                {thumb}
+                <span className="cs-pending-name">{item.name}</span>
+              </>
+            )}
+            <button
+              type="button"
+              className="cs-pending-remove"
+              aria-label={`Remove ${item.name}`}
+              onClick={(event) => {
+                event.stopPropagation();
+                onRemove(item.key);
+              }}
+            >
+              <Icon.Close />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Same as the bar: the first tip waits, then the rest show at once while the pointer stays here. */
+function useWarmTips() {
+  const timer = useRef(0);
+  // allow-react-loops: spread onto one element as event handlers; nothing depends on their identity
+  return {
+    onPointerOver: (event: ReactPointerEvent<HTMLSpanElement>) => {
+      const group = event.currentTarget;
+      window.clearTimeout(timer.current);
+      if (
+        !(event.target instanceof Element) ||
+        !event.target.closest("button") ||
+        group.hasAttribute("data-warm")
+      )
+        return;
+      timer.current = window.setTimeout(() => group.setAttribute("data-warm", ""), 350);
+    },
+    onPointerLeave: (event: ReactPointerEvent<HTMLSpanElement>) => {
+      const group = event.currentTarget;
+      window.clearTimeout(timer.current);
+      timer.current = window.setTimeout(() => group.removeAttribute("data-warm"), 600);
+    },
+  };
+}
+
+export function AttachButton({
+  onPointerDown,
+  onPointerLeave,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      type="button"
+      {...props}
+      onPointerDown={(event) => {
+        event.currentTarget.setAttribute("data-tipless", "");
+        onPointerDown?.(event);
+      }}
+      onPointerLeave={(event) => {
+        event.currentTarget.removeAttribute("data-tipless");
+        onPointerLeave?.(event);
+      }}
+    />
+  );
+}
+
+export function AttachButtons({
+  onFiles,
+  onSnapshot,
+  onRecord,
+  onReplay,
+  capturing,
+}: {
+  onFiles: (files: Array<{ blob: Blob; name: string }>) => void;
+  onSnapshot: () => void;
+  onRecord: () => void;
+  onReplay: (() => void) | null;
+  capturing: boolean;
+}) {
+  const input = useRef<HTMLInputElement>(null);
+  const warmTips = useWarmTips();
+  return (
+    <span className="cs-attach" {...warmTips}>
+      <input
+        ref={input}
+        type="file"
+        multiple
+        accept={ACCEPT}
+        hidden
+        data-cs-ui="file-input"
+        onChange={(event) => {
+          onFiles(
+            [...(event.target.files ?? [])].map((file) => ({
+              blob: file as Blob,
+              name: file.name,
+            })),
+          );
+          event.target.value = "";
+        }}
+      />
+      <AttachButton
+        className="cs-icon-button cs-plus"
+        data-cs-ui="attach"
+        data-tip="Attach file"
+        aria-label="Attach files"
+        onClick={() => input.current?.click()}
+      >
+        <Icon.Paperclip />
+      </AttachButton>
+      <AttachButton
+        className="cs-icon-button"
+        data-cs-ui="snapshot"
+        data-tip="Screenshot"
+        aria-label="Attach a screenshot of the page"
+        disabled={capturing}
+        onClick={onSnapshot}
+      >
+        <Icon.Camera />
+      </AttachButton>
+      <AttachButton
+        className="cs-icon-button cs-record-button"
+        data-cs-ui="record-start"
+        data-tip="Record"
+        aria-label="Record the page"
+        disabled={capturing}
+        onClick={onRecord}
+      >
+        <Icon.Record />
+      </AttachButton>
+      {onReplay ? (
+        <AttachButton
+          className="cs-icon-button"
+          data-cs-ui="attach-replay"
+          data-tip="Replay"
+          aria-label="Attach recent activity"
+          disabled={capturing}
+          onClick={onReplay}
+        >
+          <Icon.Undo />
+        </AttachButton>
+      ) : null}
+    </span>
+  );
+}
+
+function pageLabel(href: string) {
+  const url = new URL(href);
+  return `${url.host}${url.pathname === "/" ? "" : url.pathname}${url.search}${url.hash}`;
+}
+
+function stopRow(event: MouseEvent) {
+  event.stopPropagation();
+}
+
+function Screenshot({
+  file,
+  capture,
+  open,
+  onPreview,
+}: {
+  file: Attachment;
+  capture: Capture;
+  open: boolean;
+  onPreview: (file: Attachment) => void;
+}) {
+  const details = [
+    capture.viewport ? `${capture.viewport.width}×${capture.viewport.height}` : null,
+    capture.browser,
+  ].filter(Boolean);
+  return (
+    <figure className={open ? "cs-shot is-open" : "cs-shot"} data-cs-ui="screenshot">
+      <button
+        type="button"
+        className="cs-shot-image"
+        title={file.name}
+        aria-label={`View ${file.name}`}
+        aria-pressed={open}
+        data-cs-ui="attachment"
+        onClick={(event) => {
+          stopRow(event);
+          onPreview(file);
+        }}
+      >
+        <img src={file.url} alt={`Screenshot of ${pageLabel(capture.url)}`} loading="lazy" />
+      </button>
+      <figcaption className="cs-shot-meta">
+        <a
+          href={capture.url}
+          target="_blank"
+          rel="noreferrer noopener"
+          title={capture.url}
+          data-cs-ui="capture-url"
+          onClick={stopRow}
+        >
+          {pageLabel(capture.url)}
+        </a>
+        {details.length ? <span data-cs-ui="capture-details">{details.join(" · ")}</span> : null}
+      </figcaption>
+    </figure>
+  );
+}
+
+function replayOffset(event: ReplayEvent, start: number) {
+  const seconds = Math.max(0, Math.round((event.t - start) / 1000));
+  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
+}
+
+function ReplayBody({ url, linked }: { url: string; linked?: boolean }) {
+  const [replay, setReplay] = useState<ReplayFile | null>(null);
+  const [failed, setFailed] = useState(false);
+  const [loadedUrl, setLoadedUrl] = useState(url);
+  if (loadedUrl !== url) {
+    setLoadedUrl(url);
+    setReplay(null);
+    setFailed(false);
+  }
+  useEffect(() => {
+    let cancel = false;
+    fetch(url)
+      .then((response) => (response.ok ? response.json() : Promise.reject(new Error("missing"))))
+      .then((body) => {
+        if (cancel) return;
+        const parsed = parseReplay(body);
+        if (parsed) setReplay(parsed);
+        else setFailed(true);
+      })
+      .catch(() => {
+        if (!cancel) setFailed(true);
+      });
+    return () => {
+      cancel = true;
+    };
+  }, [url]);
+  if (failed) {
+    return (
+      <p className="cs-replay-status">
+        Couldn’t read this replay.
+        {linked ? (
+          <>
+            {" "}
+            <a href={url} target="_blank" rel="noreferrer noopener" onClick={stopRow}>
+              Open the file
+            </a>
+          </>
+        ) : null}
+      </p>
+    );
+  }
+  if (!replay) return <p className="cs-replay-status">Loading recent activity…</p>;
+  const start = replay.events[0]?.t ?? 0;
+  return (
+    <>
+      <p className="cs-replay-title">Recent activity</p>
+      <ol>
+        {replay.events.map((event, index) => (
+          <li key={`${event.t}-${index}`}>
+            <time>{replayOffset(event, start)}</time>
+            <span>{replayLine(event)}</span>
+          </li>
+        ))}
+      </ol>
+    </>
+  );
+}
+
+function ReplayAttachment({
+  file,
+  open,
+  onPreview,
+}: {
+  file: Attachment;
+  open: boolean;
+  onPreview: (file: Attachment) => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={open ? "cs-replay is-open" : "cs-replay"}
+      data-cs-ui="replay"
+      aria-label={`View ${file.name}`}
+      aria-pressed={open}
+      onClick={(event) => {
+        stopRow(event);
+        onPreview(file);
+      }}
+    >
+      <ReplayBody url={file.url} />
+    </button>
+  );
+}
+
+function isVideo(file: { contentType: string }) {
+  return file.contentType.startsWith("video/");
+}
+
+function clampZoom(value: number) {
+  if (!Number.isFinite(value)) return ZOOM_MIN;
+  return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, value));
+}
+
+function stepZoom(value: number, direction: 1 | -1) {
+  const stepped = Math.round(value * 4) / 4;
+  return clampZoom(stepped + direction * ZOOM_STEP);
+}
+
+function clampPan(
+  pan: { x: number; y: number },
+  zoom: number,
+  box: { width: number; height: number } | null,
+) {
+  if (zoom <= 1 || !box) return { x: 0, y: 0 };
+  const maxX = ((zoom - 1) * box.width) / 2;
+  const maxY = ((zoom - 1) * box.height) / 2;
+  return {
+    x: Math.min(maxX, Math.max(-maxX, pan.x)),
+    y: Math.min(maxY, Math.max(-maxY, pan.y)),
+  };
+}
+
+/** Images, videos, and replays in the order a thread shows them, so preview arrows follow the thread. */
+export function visualAttachments(messages: Array<{ attachments?: Attachment[] }> | undefined) {
+  if (!messages) return [];
+  return messages.flatMap((message) => {
+    const files = message.attachments ?? [];
+    return [
+      ...files.filter((file) => file.capture && file.contentType.startsWith("image/")),
+      ...files.filter(isVideo),
+      ...files.filter(isReplayFile),
+      ...files.filter((file) => !file.capture && file.contentType.startsWith("image/")),
+    ];
+  });
+}
+
+export function MessageAttachments({
+  attachments,
+  activeId,
+  onPreview,
+}: {
+  attachments?: Attachment[];
+  activeId?: string | null;
+  onPreview: (file: Attachment) => void;
+}) {
+  if (!attachments?.length) return null;
+  const shots = attachments.filter((file) => file.capture && file.contentType.startsWith("image/"));
+  const videos = attachments.filter(isVideo);
+  const replays = attachments.filter(isReplayFile);
+  const images = attachments.filter(
+    (file) => !file.capture && file.contentType.startsWith("image/"),
+  );
+  const voices = attachments.filter((file) => file.contentType.startsWith("audio/"));
+  const others = attachments.filter(
+    (file) =>
+      !file.contentType.startsWith("image/") &&
+      !file.contentType.startsWith("audio/") &&
+      !isVideo(file) &&
+      !isReplayFile(file),
+  );
+  const open = (file: Attachment) => (event: MouseEvent) => {
+    stopRow(event);
+    onPreview(file);
+  };
+  return (
+    <div className="cs-files" data-cs-ui="attachments">
+      {shots.map((file) => (
+        <Screenshot
+          key={file.id}
+          file={file}
+          capture={file.capture!}
+          open={file.id === activeId}
+          onPreview={onPreview}
+        />
+      ))}
+      {videos.map((file) => (
+        <figure
+          key={file.id}
+          className={file.id === activeId ? "cs-clip is-open" : "cs-clip"}
+          data-cs-ui="recording"
+        >
+          <button
+            type="button"
+            className="cs-clip-open"
+            data-cs-ui="attachment"
+            aria-label={`Play ${file.name}`}
+            aria-pressed={file.id === activeId}
+            onClick={open(file)}
+          >
+            <video src={file.url} muted playsInline preload="metadata" />
+            <span className="cs-clip-play">
+              <Icon.Play />
+            </span>
+          </button>
+          {file.capture ? (
+            <figcaption className="cs-shot-meta">
+              <a
+                href={file.capture.url}
+                target="_blank"
+                rel="noreferrer noopener"
+                title={file.capture.url}
+                data-cs-ui="capture-url"
+                onClick={stopRow}
+              >
+                {pageLabel(file.capture.url)}
+              </a>
+            </figcaption>
+          ) : null}
+        </figure>
+      ))}
+      {replays.map((file) => (
+        <ReplayAttachment
+          key={file.id}
+          file={file}
+          open={file.id === activeId}
+          onPreview={onPreview}
+        />
+      ))}
+      {images.length ? (
+        <div className="cs-thumbs">
+          {images.map((file) => (
+            <button
+              key={file.id}
+              type="button"
+              className={file.id === activeId ? "cs-thumb is-open" : "cs-thumb"}
+              title={file.name}
+              aria-label={`View ${file.name}`}
+              aria-pressed={file.id === activeId}
+              data-cs-ui="attachment"
+              onClick={open(file)}
+            >
+              <img src={file.url} alt={file.name} loading="lazy" />
+            </button>
+          ))}
+        </div>
+      ) : null}
+      {voices.map((file) => (
+        // A dictation take kept as audio: plays in place.
+        <audio
+          key={file.id}
+          className="cs-voice"
+          data-cs-ui="voice"
+          aria-label={file.name}
+          src={file.url}
+          controls
+          preload="metadata"
+          onClick={stopRow}
+        />
+      ))}
+      {others.map((file) => (
+        <a
+          key={file.id}
+          href={file.url}
+          target="_blank"
+          rel="noreferrer noopener"
+          className="cs-file"
+          data-cs-ui="attachment"
+          onClick={stopRow}
+        >
+          <Icon.FileIcon />
+          <span className="cs-file-name">{file.name}</span>
+          <span className="cs-file-size">{formatSize(file.size)}</span>
+        </a>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * The image, video, or replay open beside a thread. Arrows walk the thread's other previewable files. With
+ * `onMarkup`, a draft image can be marked up; `onMarkingUp` hears when the editor opens and closes.
+ */
+export function MediaPane({
+  files,
+  fileId,
+  onSelect,
+  onClose,
+  onMarkup,
+  onMarkingUp,
+}: {
+  files: PreviewFile[];
+  fileId: string;
+  onSelect: (fileId: string) => void;
+  onClose: () => void;
+  onMarkup?: (fileId: string, result: MarkupResult) => void;
+  onMarkingUp?: (open: boolean) => void;
+}) {
+  const pane = useRef<HTMLElement>(null);
+  const stage = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState<{ w: number; h: number } | null>(null);
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [panning, setPanning] = useState(false);
+  const zoomRef = useRef(1);
+  const panRef = useRef(pan);
+  useLayoutEffect(() => {
+    zoomRef.current = zoom;
+    panRef.current = pan;
+  }, [pan, zoom]);
+  const [zoomFile, setZoomFile] = useState(fileId);
+  const [marking, setMarking] = useState(false);
+  if (zoomFile !== fileId) {
+    setZoomFile(fileId);
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+    setPanning(false);
+    setMarking(false);
+  }
+  const markingUp = useRef(onMarkingUp);
+  useLayoutEffect(() => {
+    markingUp.current = onMarkingUp;
+  });
+  useEffect(() => {
+    if (!marking) return;
+    markingUp.current?.(true);
+    return () => markingUp.current?.(false);
+  }, [marking]);
+  // The grip sits on the bottom corner away from the card, so dragging it never pushes the pane over the card.
+  const [gripX, setGripX] = useState<"left" | "right">("right");
+  // allow-react-loops: measures after every commit on purpose; the setter below keeps the previous state when nothing moved
+  useLayoutEffect(() => {
+    const node = pane.current;
+    if (!node) return;
+    const card = node.parentElement?.closest(".cs-media-pop")?.parentElement;
+    const own = node.getBoundingClientRect();
+    const other = card?.getBoundingClientRect();
+    const x = other && own.left + own.width / 2 < other.left + other.width / 2 ? "left" : "right";
+    setGripX(x);
+  });
+  useEffect(() => {
+    // The toolbar stops presses at the window, so the grip listens there too.
+    let drag: {
+      sx: number;
+      sy: number;
+      w: number;
+      h: number;
+      max: { w: number; h: number };
+    } | null = null;
+    const onDown = (event: PointerEvent) => {
+      const node = pane.current;
+      const target = event.target;
+      if (
+        event.button !== 0 ||
+        !node ||
+        !(target instanceof Element) ||
+        !target.closest(".cs-media-resize") ||
+        !node.contains(target)
+      )
+        return;
+      const root = node.closest("#cs-root")?.getBoundingClientRect();
+      const box = node.getBoundingClientRect();
+      drag = {
+        sx: event.clientX,
+        sy: event.clientY,
+        w: box.width,
+        h: box.height,
+        max: {
+          w: (root?.width ?? window.innerWidth) - 16,
+          h: (root?.height ?? window.innerHeight) - 16,
+        },
+      };
+      if (target instanceof HTMLElement) target.setPointerCapture(event.pointerId);
+    };
+    const onMove = (event: PointerEvent) => {
+      if (!drag) return;
+      const dx = event.clientX - drag.sx;
+      const dy = event.clientY - drag.sy;
+      const w = drag.w + (gripX === "right" ? dx : -dx);
+      const h = drag.h + dy;
+      setSize({
+        w: Math.round(Math.min(drag.max.w, Math.max(220, w))),
+        h: Math.round(Math.min(drag.max.h, Math.max(200, h))),
+      });
+    };
+    const onUp = () => {
+      drag = null;
+    };
+    window.addEventListener("pointerdown", onDown, true);
+    window.addEventListener("pointermove", onMove, true);
+    window.addEventListener("pointerup", onUp, true);
+    window.addEventListener("pointercancel", onUp, true);
+    return () => {
+      window.removeEventListener("pointerdown", onDown, true);
+      window.removeEventListener("pointermove", onMove, true);
+      window.removeEventListener("pointerup", onUp, true);
+      window.removeEventListener("pointercancel", onUp, true);
+    };
+  }, [gripX]);
+  const viewing = files.some((item) => item.id === fileId);
+  const previewingReplay = files.some((item) => item.id === fileId && isReplayFile(item));
+  const editing = marking && Boolean(onMarkup);
+  useEffect(() => {
+    const node = stage.current;
+    if (!node || !viewing || previewingReplay || editing) return;
+    const box = () => node.getBoundingClientRect();
+    const apply = (next: number, origin: { x: number; y: number }) => {
+      const level = clampZoom(next);
+      const shifted = clampPan(origin, level, box());
+      zoomRef.current = level;
+      panRef.current = shifted;
+      setZoom(level);
+      setPan(shifted);
+    };
+    const onWheel = (event: WheelEvent) => {
+      event.preventDefault();
+      const current = zoomRef.current;
+      const pixels =
+        event.deltaMode === 1
+          ? event.deltaY * 16
+          : event.deltaMode === 2
+            ? event.deltaY * box().height
+            : event.deltaY;
+      const next = clampZoom(current * Math.exp(-pixels * 0.0018));
+      if (next === current) return;
+      const frame = box();
+      const cx = event.clientX - (frame.left + frame.width / 2);
+      const cy = event.clientY - (frame.top + frame.height / 2);
+      const ratio = next / current;
+      const origin = panRef.current;
+      apply(next, {
+        x: cx - (cx - origin.x) * ratio,
+        y: cy - (cy - origin.y) * ratio,
+      });
+    };
+    const onKey = (event: KeyboardEvent) => {
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+      const target = event.target;
+      if (
+        target instanceof HTMLElement &&
+        (target.isContentEditable || target.closest("input, textarea, select"))
+      )
+        return;
+      const zoomIn = event.key === "+" || event.key === "=";
+      const zoomOut = event.key === "-" || event.key === "_";
+      if (!zoomIn && !zoomOut) return;
+      event.preventDefault();
+      apply(stepZoom(zoomRef.current, zoomIn ? 1 : -1), panRef.current);
+    };
+    let drag: {
+      sx: number;
+      sy: number;
+      x: number;
+      y: number;
+      moved: boolean;
+      pointerId: number;
+    } | null = null;
+    const onDown = (event: PointerEvent) => {
+      if (event.button !== 0 || zoomRef.current <= 1) return;
+      const target = event.target;
+      if (
+        !(target instanceof Element) ||
+        !node.contains(target) ||
+        target.closest("button, .cs-media-resize")
+      )
+        return;
+      if (target instanceof HTMLVideoElement) {
+        const rect = target.getBoundingClientRect();
+        if (event.clientY > rect.bottom - 36 * zoomRef.current) return;
+      }
+      drag = {
+        sx: event.clientX,
+        sy: event.clientY,
+        x: panRef.current.x,
+        y: panRef.current.y,
+        moved: false,
+        pointerId: event.pointerId,
+      };
+    };
+    const onMove = (event: PointerEvent) => {
+      if (!drag || event.pointerId !== drag.pointerId) return;
+      const dx = event.clientX - drag.sx;
+      const dy = event.clientY - drag.sy;
+      if (!drag.moved) {
+        if (Math.hypot(dx, dy) < 4) return;
+        drag.moved = true;
+        setPanning(true);
+        try {
+          node.setPointerCapture(event.pointerId);
+        } catch {
+          // The press can end before capture lands.
+        }
+      }
+      setPan(clampPan({ x: drag.x + dx, y: drag.y + dy }, zoomRef.current, box()));
+    };
+    const onUp = (event: PointerEvent) => {
+      if (!drag || event.pointerId !== drag.pointerId) return;
+      drag = null;
+      setPanning(false);
+    };
+    node.addEventListener("wheel", onWheel, { capture: true, passive: false });
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("pointerdown", onDown, true);
+    window.addEventListener("pointermove", onMove, true);
+    window.addEventListener("pointerup", onUp, true);
+    window.addEventListener("pointercancel", onUp, true);
+    return () => {
+      node.removeEventListener("wheel", onWheel, true);
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("pointerdown", onDown, true);
+      window.removeEventListener("pointermove", onMove, true);
+      window.removeEventListener("pointerup", onUp, true);
+      window.removeEventListener("pointercancel", onUp, true);
+    };
+  }, [editing, previewingReplay, viewing]);
+  const index = files.findIndex((file) => file.id === fileId);
+  const file = files[index];
+  if (!file) return null;
+  const markup = onMarkup && file.contentType.startsWith("image/") ? file.markup : undefined;
+  const replay = isReplayFile(file);
+  const many = files.length > 1;
+  const step = (delta: number) => onSelect(files[(index + delta + files.length) % files.length].id);
+  const applyZoom = (next: number) => {
+    const level = clampZoom(next);
+    const shifted = clampPan(panRef.current, level, stage.current?.getBoundingClientRect() ?? null);
+    zoomRef.current = level;
+    panRef.current = shifted;
+    setZoom(level);
+    setPan(shifted);
+  };
+  const fitted = zoom <= 1.01;
+  const maxed = zoom >= ZOOM_MAX - 0.01;
+  const sized: CSSProperties | undefined = size
+    ? {
+        width: size.w,
+        height: size.h,
+        flex: "none",
+        position: "absolute",
+        top: 0,
+        [gripX === "right" ? "left" : "right"]: 0,
+      }
+    : undefined;
+  const grip = (
+    <button
+      type="button"
+      className={`cs-media-resize is-bottom-${gripX}`}
+      aria-label="Resize preview"
+    />
+  );
+  if (editing && markup) {
+    return (
+      <aside
+        ref={pane}
+        className="cs-media cs-hit"
+        data-cs-ui="attachment-preview"
+        data-attachment-id={file.id}
+        aria-label={`Mark up ${markup.name}`}
+        style={sized}
+      >
+        <MarkupEditor
+          key={file.id}
+          src={markup.src}
+          name={markup.name}
+          shapes={markup.shapes}
+          maxBytes={MAX_BYTES}
+          onCancel={() => setMarking(false)}
+          onSave={(result) => {
+            setMarking(false);
+            onMarkup?.(file.id, result);
+          }}
+        />
+        {grip}
+      </aside>
+    );
+  }
+  return (
+    <aside
+      ref={pane}
+      className="cs-media cs-hit"
+      data-cs-ui="attachment-preview"
+      data-attachment-id={file.id}
+      aria-label={file.name}
+      style={sized}
+    >
+      <header className="cs-media-bar">
+        <span className="cs-media-name" title={file.name}>
+          {file.name}
+        </span>
+        {many ? (
+          <span className="cs-media-count">
+            {index + 1} of {files.length}
+          </span>
+        ) : null}
+        {markup ? (
+          <button
+            type="button"
+            className="cs-media-markup"
+            data-cs-ui="markup-open"
+            aria-label={`Mark up ${markup.name}`}
+            onClick={() => setMarking(true)}
+          >
+            <Icon.Markup />
+            Mark up
+          </button>
+        ) : null}
+        {replay ? null : (
+          <div className="cs-media-zoom" role="group" aria-label="Zoom">
+            <button
+              type="button"
+              className="cs-icon-button"
+              aria-label="Zoom out"
+              disabled={fitted}
+              onClick={() => applyZoom(stepZoom(zoomRef.current, -1))}
+            >
+              <Icon.ZoomOut />
+            </button>
+            <button
+              type="button"
+              className="cs-media-zoom-level"
+              aria-label="Reset zoom"
+              disabled={fitted}
+              onClick={() => applyZoom(1)}
+            >
+              {Math.round(zoom * 100)}%
+            </button>
+            <button
+              type="button"
+              className="cs-icon-button"
+              aria-label="Zoom in"
+              disabled={maxed}
+              onClick={() => applyZoom(stepZoom(zoomRef.current, 1))}
+            >
+              <Icon.ZoomIn />
+            </button>
+          </div>
+        )}
+        <button
+          type="button"
+          className="cs-icon-button"
+          aria-label="Close preview"
+          onClick={onClose}
+        >
+          <Icon.Close />
+        </button>
+      </header>
+      <div
+        ref={stage}
+        className={`cs-media-stage${replay ? " is-replay" : ""}${zoom > 1 ? " is-zoomed" : ""}${panning ? " is-panning" : ""}`}
+      >
+        {many ? (
+          <button
+            type="button"
+            className="cs-media-nav is-prev"
+            aria-label="Previous attachment"
+            onClick={() => step(-1)}
+          >
+            <Icon.ChevronLeft />
+          </button>
+        ) : null}
+        {replay ? (
+          <div className="cs-replay" data-cs-ui="replay">
+            <ReplayBody url={file.url} linked />
+          </div>
+        ) : isVideo(file) ? (
+          <video
+            key={file.id}
+            src={file.url}
+            controls
+            autoPlay
+            playsInline
+            style={{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})` }}
+          />
+        ) : (
+          <img
+            key={file.id}
+            src={file.url}
+            alt={file.name}
+            draggable={false}
+            style={{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})` }}
+          />
+        )}
+        {many ? (
+          <button
+            type="button"
+            className="cs-media-nav is-next"
+            aria-label="Next attachment"
+            onClick={() => step(1)}
+          >
+            <Icon.ChevronRight />
+          </button>
+        ) : null}
+      </div>
+      {grip}
+    </aside>
+  );
+}