@backmatter/studio 0.0.6 → 0.0.8

package/src/pages/MediaGalleryPage.tsx

@@ -0,0 +1,748 @@
+// packages/studio/src/pages/MediaGalleryPage.tsx
+import { ContextMenu } from "@base-ui/react/context-menu";
+import {
+  IconCloudUpload,
+  IconExpandSimple,
+  IconSquareBehindSquare1,
+  IconTrashCanSimple,
+} from "@central-icons-react/round-outlined-radius-2-stroke-1.5";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useOutletContext, useSearchParams } from "react-router";
+import * as stylex from "@stylexjs/stylex";
+import { deleteMedia, fetchMedia, uploadMedia } from "../api";
+import { colors, radius, space, type, z } from "../styles/tokens.stylex";
+import { Button } from "../ui/Button";
+import { ConfirmDialog } from "../ui/ConfirmDialog";
+import { Text } from "../ui/Text";
+import { cx, popup, popupClassName } from "../ui/popup";
+import { canWriteContent } from "../workspace/permissions";
+import type { WorkspaceOutletContext } from "../workspace/types";
+import {
+  beginUploads,
+  emptyMediaGrid,
+  failUpload,
+  finishUpload,
+  lightboxImageId,
+  mediaIdAfterRemoval,
+  nextMediaIndex,
+  receivePage,
+  rejectionReason,
+  removeMedia,
+  searchWithLightboxImage,
+  setUploadProgress,
+  type CatalogMedia,
+  type MediaGridState,
+  type PendingUpload,
+} from "./media-grid";
+import { MediaLightbox } from "./MediaLightbox";
+
+const CELL = 168;
+
+export function MediaGalleryPage({
+  pick = false,
+  onPick,
+}: {
+  pick?: boolean;
+  onPick?: (url: string) => void;
+}) {
+  const { workspace } = useOutletContext<WorkspaceOutletContext>();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [state, setState] = useState<MediaGridState>(emptyMediaGrid);
+  const [error, setError] = useState<string | null>(null);
+  const [rejected, setRejected] = useState<string[]>([]);
+  const [dragging, setDragging] = useState(false);
+  const [pendingDelete, setPendingDelete] = useState<CatalogMedia | null>(null);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [settled, setSettled] = useState(false);
+  const dragDepth = useRef(0);
+  const scroller = useRef<HTMLDivElement>(null);
+  const grid = useRef<HTMLDivElement>(null);
+  const [columns, setColumns] = useState(1);
+  const loadingPage = useRef(false);
+
+  const load = useCallback(
+    async (cursor?: string) => {
+      if (loadingPage.current) return;
+      loadingPage.current = true;
+      try {
+        const page = await fetchMedia(workspace.id, { cursor });
+        setState((current) => receivePage(current, page, cursor ? "append" : "replace"));
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Could not load media");
+      } finally {
+        loadingPage.current = false;
+        if (!cursor) setSettled(true);
+      }
+    },
+    [workspace.id],
+  );
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const maybeLoadMore = useCallback(() => {
+    const node = scroller.current;
+    if (!node || !state.nextCursor) return;
+    if (node.scrollTop + node.clientHeight > node.scrollHeight - CELL * 2) {
+      void load(state.nextCursor);
+    }
+  }, [load, state.nextCursor]);
+
+  const uploadFiles = useCallback(
+    (files: File[]) => {
+      const accepted: File[] = [];
+      const names: string[] = [];
+      for (const file of files) {
+        const reason = rejectionReason(file);
+        if (reason) names.push(reason);
+        else accepted.push(file);
+      }
+      setRejected(names);
+      if (accepted.length === 0) return;
+      const items = accepted.map((file) => ({
+        key: crypto.randomUUID(),
+        filename: file.name,
+        previewUrl: URL.createObjectURL(file),
+        file,
+      }));
+      setState((current) => beginUploads(current, items));
+      for (const item of items) {
+        void uploadMedia(workspace.id, item.file, (fraction) => {
+          setState((current) => setUploadProgress(current, item.key, fraction));
+        })
+          .then((result) => {
+            URL.revokeObjectURL(item.previewUrl);
+            setState((current) => finishUpload(current, item.key, result.media));
+          })
+          .catch((err: unknown) => {
+            setState((current) =>
+              failUpload(current, item.key, err instanceof Error ? err.message : "Upload failed"),
+            );
+          });
+      }
+    },
+    [workspace.id],
+  );
+
+  const chooseFiles = useCallback(() => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/jpeg,image/png,image/webp,image/gif,image/avif";
+    input.multiple = true;
+    input.onchange = () => uploadFiles(Array.from(input.files ?? []));
+    input.click();
+  }, [uploadFiles]);
+
+  useEffect(() => {
+    if (pick) return;
+    const hasFiles = (event: DragEvent) =>
+      Array.from(event.dataTransfer?.types ?? []).includes("Files");
+    const onEnter = (event: DragEvent) => {
+      if (!hasFiles(event)) return;
+      event.preventDefault();
+      dragDepth.current += 1;
+      setDragging(true);
+    };
+    const onOver = (event: DragEvent) => {
+      if (!hasFiles(event)) return;
+      event.preventDefault();
+    };
+    const onLeave = () => {
+      dragDepth.current = Math.max(0, dragDepth.current - 1);
+      if (dragDepth.current === 0) setDragging(false);
+    };
+    const onDrop = (event: DragEvent) => {
+      if (!hasFiles(event)) return;
+      event.preventDefault();
+      dragDepth.current = 0;
+      setDragging(false);
+      uploadFiles(Array.from(event.dataTransfer?.files ?? []));
+    };
+    window.addEventListener("dragenter", onEnter);
+    window.addEventListener("dragover", onOver);
+    window.addEventListener("dragleave", onLeave);
+    window.addEventListener("drop", onDrop);
+    return () => {
+      window.removeEventListener("dragenter", onEnter);
+      window.removeEventListener("dragover", onOver);
+      window.removeEventListener("dragleave", onLeave);
+      window.removeEventListener("drop", onDrop);
+    };
+  }, [pick, uploadFiles]);
+
+  const browsable = [
+    ...state.pending.flatMap((item) => (item.media ? [item.media] : [])),
+    ...state.loaded.filter((item) => !state.pending.some((slot) => slot.media?.id === item.id)),
+  ];
+  const mediaPlaces = (() => {
+    const places: number[] = [];
+    state.pending.forEach((item, index) => {
+      if (item.media) places.push(index);
+    });
+    const lead = state.pending.length;
+    let catalog = 0;
+    for (const item of state.loaded) {
+      if (state.pending.some((slot) => slot.media?.id === item.id)) continue;
+      places.push(lead + catalog);
+      catalog += 1;
+    }
+    return places;
+  })();
+  const sharedId = pick ? null : lightboxImageId(searchParams);
+  const lightbox = sharedId ? browsable.findIndex((item) => item.id === sharedId) : -1;
+  const showImage = useCallback(
+    (id: string, replace: boolean) => {
+      setSearchParams(searchWithLightboxImage(searchParams, id), { replace });
+    },
+    [searchParams, setSearchParams],
+  );
+  const closeLightbox = useCallback(() => {
+    setSearchParams(searchWithLightboxImage(searchParams, null), { replace: true });
+  }, [searchParams, setSearchParams]);
+  const prevLightbox = useCallback(() => {
+    if (lightbox <= 0) return;
+    const item = browsable[lightbox - 1];
+    if (item) showImage(item.id, true);
+  }, [browsable, lightbox, showImage]);
+  const nextLightbox = useCallback(() => {
+    if (lightbox < 0 || lightbox >= browsable.length - 1) return;
+    const item = browsable[lightbox + 1];
+    if (item) showImage(item.id, true);
+  }, [browsable, lightbox, showImage]);
+
+  const canDelete = canWriteContent(workspace.role);
+  const requestDelete = useCallback((item: CatalogMedia) => {
+    setDeleteError(null);
+    setPendingDelete(item);
+  }, []);
+  const confirmDelete = useCallback(async () => {
+    if (!pendingDelete) return;
+    const id = pendingDelete.id;
+    const ids = [
+      ...state.pending.flatMap((item) => (item.media ? [item.media.id] : [])),
+      ...state.loaded
+        .filter((item) => !state.pending.some((slot) => slot.media?.id === item.id))
+        .map((item) => item.id),
+    ];
+    const nextId = mediaIdAfterRemoval(ids, id);
+    setDeleting(true);
+    try {
+      await deleteMedia(workspace.id, id);
+      setState((current) => removeMedia(current, id));
+      if (selectedId === id) setSelectedId(nextId);
+      if (lightboxImageId(searchParams) === id) {
+        setSearchParams(searchWithLightboxImage(searchParams, nextId), { replace: true });
+      }
+      setPendingDelete(null);
+    } catch (err) {
+      setDeleteError(err instanceof Error ? err.message : "Could not delete media");
+    } finally {
+      setDeleting(false);
+    }
+  }, [pendingDelete, searchParams, selectedId, setSearchParams, state.loaded, state.pending, workspace.id]);
+
+  useEffect(() => {
+    if (!sharedId) return;
+    if (browsable.some((item) => item.id === sharedId)) return;
+    if (!state.nextCursor) return;
+    void load(state.nextCursor);
+  }, [sharedId, browsable, state.nextCursor, load]);
+
+  const cells = useMemo(() => {
+    const out: Array<{ kind: "pending"; item: PendingUpload } | { kind: "media"; item: CatalogMedia }> = [];
+    for (const item of state.pending) {
+      if (item.media) out.push({ kind: "media", item: item.media });
+      else out.push({ kind: "pending", item });
+    }
+    for (const item of state.loaded) {
+      if (state.pending.some((slot) => slot.media?.id === item.id)) continue;
+      out.push({ kind: "media", item });
+    }
+    return out;
+  }, [state.pending, state.loaded]);
+
+  useLayoutEffect(() => {
+    const scrollNode = scroller.current;
+    const gridNode = grid.current;
+    if (!scrollNode) return;
+    const measure = () => {
+      const next = gridNode ? columnsInFirstRow(gridNode) : 1;
+      setColumns((current) => (current === next ? current : next));
+      maybeLoadMore();
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(scrollNode);
+    if (gridNode) observer.observe(gridNode);
+    return () => observer.disconnect();
+  }, [maybeLoadMore, cells.length]);
+
+  useEffect(() => {
+    if (pick || sharedId) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (!gridKeyTarget(event.target, scroller.current)) return;
+      if (document.querySelector("[role='menu'], [role='alertdialog']")) return;
+      const arrow =
+        event.key === "ArrowLeft"
+          ? "left"
+          : event.key === "ArrowRight"
+            ? "right"
+            : event.key === "ArrowUp"
+              ? "up"
+              : event.key === "ArrowDown"
+                ? "down"
+                : null;
+      if (arrow) {
+        event.preventDefault();
+        const index = selectedId ? browsable.findIndex((item) => item.id === selectedId) : -1;
+        const next = nextMediaIndex({
+          index: index < 0 ? null : index,
+          arrow,
+          columns,
+          pendingCount: 0,
+          mediaCount: browsable.length,
+          places: mediaPlaces,
+        });
+        const item = next === null ? undefined : browsable[next];
+        if (item) setSelectedId(item.id);
+        return;
+      }
+      if (event.key === "Escape") {
+        if (!selectedId) return;
+        event.preventDefault();
+        setSelectedId(null);
+        return;
+      }
+      if (event.key !== " " || !selectedId) return;
+      const item = browsable.find((entry) => entry.id === selectedId);
+      if (!item) return;
+      event.preventDefault();
+      showImage(item.id, searchParams.has("image"));
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [
+    browsable,
+    columns,
+    mediaPlaces,
+    pick,
+    searchParams,
+    selectedId,
+    sharedId,
+    showImage,
+    state.pending.length,
+  ]);
+
+  useLayoutEffect(() => {
+    if (!selectedId || sharedId) return;
+    const frame = scroller.current;
+    const node = grid.current?.querySelector("[aria-current='true']");
+    if (!frame || !(node instanceof HTMLElement)) return;
+    const item = node.getBoundingClientRect();
+    const bounds = frame.getBoundingClientRect();
+    if (item.top < bounds.top) frame.scrollTop -= bounds.top - item.top;
+    else if (item.bottom > bounds.bottom) frame.scrollTop += item.bottom - bounds.bottom;
+  }, [columns, selectedId, sharedId]);
+
+  const open = lightbox >= 0 ? browsable[lightbox] : undefined;
+  const showEmpty =
+    settled && state.pending.length === 0 && state.loaded.length === 0 && state.total === 0;
+
+  return (
+    <div {...stylex.props(styles.page)}>
+      <div {...stylex.props(styles.toolbar)}>
+        <Text as="h1" size="xl" weight="medium">
+          Media
+        </Text>
+        <Button variant="secondary" onClick={chooseFiles}>
+          Upload
+        </Button>
+      </div>
+      {error ? <Text tone="danger">{error}</Text> : null}
+      {rejected.length > 0 ? <Text tone="danger">{rejected.join(" · ")}</Text> : null}
+      <div
+        ref={scroller}
+        {...stylex.props(styles.scroller)}
+        onScroll={() => {
+          maybeLoadMore();
+        }}
+      >
+        {showEmpty ? (
+          <div
+            {...stylex.props(styles.emptyState)}
+            onDragOver={(event) => event.preventDefault()}
+            onDrop={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              uploadFiles(Array.from(event.dataTransfer?.files ?? []));
+            }}
+          >
+            <div {...stylex.props(styles.emptyCard, dragging && styles.emptyCardActive)}>
+              <div {...stylex.props(styles.emptyIcon)}>
+                <IconCloudUpload size={22} ariaHidden />
+              </div>
+              <Text as="h2" size="lg" weight="medium">
+                Drop images to upload
+              </Text>
+              <Text tone="muted" size="sm">
+                JPEG, PNG, WebP, GIF, and AVIF, up to 20 MB.
+              </Text>
+              <div {...stylex.props(styles.emptyAction)}>
+                <Button variant="secondary" onClick={chooseFiles}>
+                  Upload
+                </Button>
+              </div>
+            </div>
+          </div>
+        ) : (
+        <div ref={grid} {...stylex.props(styles.canvas)}>
+          {cells.map((cell) => (
+            <div
+              key={cell.kind === "media" ? cell.item.id : cell.item.key}
+              {...stylex.props(styles.cell)}
+            >
+              {cell.kind === "pending" ? (
+                <figure {...stylex.props(styles.figure, styles.placed)}>
+                  <img src={cell.item.previewUrl} alt="" {...stylex.props(styles.image, styles.dimmed)} />
+                  {cell.item.status === "error" ? (
+                    <figcaption {...stylex.props(styles.caption)}>{cell.item.error}</figcaption>
+                  ) : (
+                    <div {...stylex.props(styles.barTrack)}>
+                      <div
+                        {...stylex.props(styles.barFill)}
+                        style={{
+                          ...stylex.props(styles.barFill).style,
+                          width: `${Math.round(cell.item.progress * 100)}%`,
+                        }}
+                      />
+                    </div>
+                  )}
+                </figure>
+              ) : null}
+              {cell.kind === "media" ? (
+                <MediaHit
+                  item={cell.item}
+                  menu={!pick}
+                  selected={!pick && !sharedId && cell.item.id === selectedId}
+                  canDelete={canDelete}
+                  onOpen={() => {
+                    setSelectedId(null);
+                    if (pick) {
+                      if (onPick) onPick(cell.item.url);
+                      return;
+                    }
+                    showImage(cell.item.id, searchParams.has("image"));
+                  }}
+                  onDelete={() => requestDelete(cell.item)}
+                />
+              ) : null}
+            </div>
+          ))}
+        </div>
+        )}
+      </div>
+      {dragging ? (
+        <div {...stylex.props(styles.overlay)}>
+          <Text size="xl" weight="medium">
+            Drop to upload
+          </Text>
+        </div>
+      ) : null}
+      {open && lightbox >= 0 ? (
+        <MediaLightbox
+          item={open}
+          index={lightbox}
+          count={browsable.length}
+          onClose={closeLightbox}
+          onPrev={prevLightbox}
+          onNext={nextLightbox}
+          onDelete={canDelete ? () => requestDelete(open) : undefined}
+        />
+      ) : null}
+      <ConfirmDialog
+        open={pendingDelete !== null}
+        onOpenChange={(next) => {
+          if (!next && !deleting) setPendingDelete(null);
+        }}
+        title="Delete media?"
+        description={
+          pendingDelete
+            ? `${pendingDelete.filename} leaves the gallery. Documents that already use its URL keep that URL.${deleteError ? ` ${deleteError}` : ""}`
+            : undefined
+        }
+        confirmLabel="Delete"
+        destructive
+        busy={deleting}
+        onConfirm={confirmDelete}
+      />
+    </div>
+  );
+}
+
+function MediaHit({
+  item,
+  menu,
+  selected,
+  canDelete,
+  onOpen,
+  onDelete,
+}: {
+  item: CatalogMedia;
+  menu: boolean;
+  selected: boolean;
+  canDelete: boolean;
+  onOpen: () => void;
+  onDelete: () => void;
+}) {
+  const image = (
+    <button
+      type="button"
+      aria-current={selected ? "true" : undefined}
+      {...stylex.props(styles.hit, !menu && styles.placed, selected && styles.selected)}
+      onClick={onOpen}
+    >
+      <img src={item.thumbUrl} alt={item.filename} {...stylex.props(styles.image)} />
+    </button>
+  );
+  if (!menu) return image;
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger className={cx(styles.menuHit)}>{image}</ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Positioner className={cx(popup.positioner)}>
+          <ContextMenu.Popup
+            aria-label={item.filename}
+            className={(state) => popupClassName(state, styles.menu)}
+          >
+            <ContextMenu.Item
+              label="Open lightbox"
+              onClick={onOpen}
+              className={(state) => cx(popup.item, styles.menuItem, state.highlighted && popup.itemHighlighted)}
+            >
+              <IconExpandSimple size={14} ariaHidden style={{ flexShrink: 0 }} />
+              Open lightbox
+            </ContextMenu.Item>
+            <ContextMenu.Item
+              label="Copy path"
+              onClick={() => {
+                void navigator.clipboard.writeText(item.url);
+              }}
+              className={(state) => cx(popup.item, styles.menuItem, state.highlighted && popup.itemHighlighted)}
+            >
+              <IconSquareBehindSquare1 size={14} ariaHidden style={{ flexShrink: 0 }} />
+              Copy path
+            </ContextMenu.Item>
+            {canDelete ? (
+              <ContextMenu.Item
+                label="Delete media"
+                onClick={onDelete}
+                className={(state) =>
+                  cx(popup.item, styles.menuItem, styles.menuDanger, state.highlighted && popup.itemHighlighted)
+                }
+              >
+                <IconTrashCanSimple size={14} ariaHidden style={{ flexShrink: 0 }} />
+                Delete media
+              </ContextMenu.Item>
+            ) : null}
+          </ContextMenu.Popup>
+        </ContextMenu.Positioner>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
+  );
+}
+
+function columnsInFirstRow(grid: HTMLElement): number {
+  const first = grid.children[0];
+  if (!(first instanceof HTMLElement)) return 1;
+  const top = first.offsetTop;
+  let count = 0;
+  for (const kid of grid.children) {
+    if (!(kid instanceof HTMLElement) || kid.offsetTop - top > 1) break;
+    count += 1;
+  }
+  return Math.max(1, count);
+}
+
+function gridKeyTarget(target: EventTarget | null, scroller: HTMLElement | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.closest("input, textarea, select, [contenteditable='true']")) return false;
+  if (target === document.body || target === document.documentElement) return true;
+  return scroller !== null && scroller.contains(target);
+}
+
+const styles = stylex.create({
+  page: {
+    display: "flex",
+    flexDirection: "column",
+    minHeight: 0,
+    height: "100%",
+    position: "relative",
+  },
+  toolbar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.lg,
+    padding: space.xl,
+  },
+  scroller: {
+    flex: 1,
+    minHeight: 0,
+    overflow: "auto",
+    paddingInline: space.xl,
+    paddingBottom: space.xl,
+  },
+  emptyState: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: "100%",
+    padding: space.xl,
+  },
+  emptyCard: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: space.sm,
+    width: "100%",
+    maxWidth: "440px",
+    paddingBlock: "48px",
+    paddingInline: space.xxl,
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderColor: colors.border,
+    borderRadius: "16px",
+    textAlign: "center",
+  },
+  emptyCardActive: {
+    borderColor: colors.accent,
+  },
+  emptyIcon: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "56px",
+    height: "56px",
+    marginBottom: space.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: "14px",
+    backgroundColor: colors.bgPanel,
+    color: colors.text,
+  },
+  emptyAction: {
+    marginTop: space.md,
+  },
+  canvas: {
+    position: "relative",
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(168px, 1fr))",
+    gap: space.lg,
+    alignItems: "start",
+  },
+  cell: {
+    position: "relative",
+    width: "100%",
+    aspectRatio: "1",
+    minWidth: 0,
+  },
+  placed: {
+    position: "absolute",
+    inset: space.sm,
+  },
+  figure: {
+    margin: 0,
+  },
+  hit: {
+    position: "absolute",
+    inset: 0,
+    display: "block",
+    width: "100%",
+    height: "100%",
+    padding: 0,
+    borderWidth: 0,
+    borderRadius: radius.md,
+    backgroundColor: "transparent",
+    cursor: "pointer",
+  },
+  selected: {
+    outlineWidth: 2,
+    outlineStyle: "solid",
+    outlineColor: colors.focus,
+    outlineOffset: 3,
+  },
+  menuHit: {
+    position: "absolute",
+    inset: space.sm,
+    display: "block",
+  },
+  menu: {
+    minWidth: "11rem",
+  },
+  menuItem: {
+    cursor: "pointer",
+  },
+  menuDanger: {
+    color: colors.danger,
+  },
+  image: {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    borderRadius: radius.md,
+    backgroundColor: colors.bgPanel,
+  },
+  dimmed: {
+    opacity: 0.55,
+  },
+  barTrack: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: "8px",
+    overflow: "hidden",
+    borderBottomLeftRadius: radius.md,
+    borderBottomRightRadius: radius.md,
+    backgroundColor: "rgba(0, 0, 0, 0.45)",
+  },
+  barFill: {
+    height: "100%",
+    backgroundColor: colors.textInverse,
+    transitionProperty: "width",
+    transitionDuration: "160ms",
+    transitionTimingFunction: "linear",
+  },
+  caption: {
+    position: "absolute",
+    left: space.sm,
+    bottom: space.sm,
+    paddingInline: space.sm,
+    paddingBlock: space.xs,
+    borderRadius: radius.sm,
+    backgroundColor: colors.overlay,
+    color: colors.textInverse,
+    fontSize: type.xs,
+  },
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    zIndex: z.overlay,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 3,
+    borderStyle: "dashed",
+    borderColor: colors.accent,
+    backgroundColor: colors.overlay,
+    color: colors.textInverse,
+    pointerEvents: "none",
+  },
+});