@backmatter/studio 0.0.16 → 0.0.18

package/src/pages/MediaFieldInput.tsx

@@ -1,53 +1,360 @@
 // packages/studio/src/pages/MediaFieldInput.tsx
-import { useState } from "react";
+import { useCallback, useEffect, useRef, useState, type DragEvent } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 import { mediaIdFromUrl, mediaVariantUrl } from "@backmatter/core";
 import * as stylex from "@stylexjs/stylex";
-import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { fetchMedia, uploadMedia, type CatalogMedia, type SchemaField } from "../api";
+import { useOutletContext } from "react-router";
+import { colors, radius, space, type, z } from "../styles/tokens.stylex";
 import { Button } from "../ui/Button";
+import { Text } from "../ui/Text";
 import { cx, isTransitioning } from "../ui/popup";
+import type { WorkspaceOutletContext } from "../workspace/types";
+import { rejectionReason } from "./media-grid";
+import {
+  acceptedDrop,
+  appendMediaUrls,
+  editorUrls,
+  moveMediaUrl,
+  notAddedMessage,
+  toggleMediaUrl,
+} from "./media-selection";
 import { MediaGalleryPage } from "./MediaGalleryPage";
 
 const CDN_ORIGIN = "https://cdn.backmatter.app";
 
+type PendingUpload = {
+  key: string;
+  filename: string;
+  previewUrl: string;
+};
+
+const hover = "@media (hover: hover)";
+const GALLERY_PER_ROW = 4;
+
+function thumbForUrl(url: string): string | null {
+  const id = mediaIdFromUrl(url);
+  return id ? mediaVariantUrl(CDN_ORIGIN, id, 400) : null;
+}
+
 export function MediaFieldInput({
+  field,
   value,
   readOnly,
   onChange,
 }: {
   name: string;
+  field: SchemaField;
   value: unknown;
   readOnly?: boolean;
   onChange: (value: unknown) => void;
 }) {
+  const { workspace } = useOutletContext<WorkspaceOutletContext>();
+  const multiple = field.multiple === true;
+  const parsed = editorUrls(value, multiple);
+  const savedUrls = parsed.urls;
+
   const [open, setOpen] = useState(false);
-  const url = typeof value === "string" ? value : "";
-  const id = url ? mediaIdFromUrl(url) : null;
-  const thumb = id ? mediaVariantUrl(CDN_ORIGIN, id, 400) : null;
+  const [expanded, setExpanded] = useState(false);
+  const [checkUrls, setCheckUrls] = useState<string[]>([]);
+  const [rejections, setRejections] = useState<string[]>([]);
+  const [notAdded, setNotAdded] = useState(0);
+  const [pending, setPending] = useState<PendingUpload[]>([]);
+  const dragFrom = useRef<number | null>(null);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const readOnlyRef = useRef(readOnly);
+  readOnlyRef.current = readOnly;
+
+  const write = useCallback((next: unknown, options?: { keepNotAdded?: boolean }) => {
+    if (readOnlyRef.current) return;
+    if (!options?.keepNotAdded) {
+      setNotAdded(0);
+    }
+    valueRef.current = next;
+    onChangeRef.current(next);
+  }, []);
+
+  const openModal = useCallback(() => {
+    setCheckUrls(editorUrls(valueRef.current, multiple).urls);
+    setOpen(true);
+  }, [multiple]);
+
+  const closeModal = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const applyUse = useCallback(() => {
+    if (readOnly) return;
+    write(checkUrls.length === 0 ? undefined : checkUrls);
+    closeModal();
+  }, [checkUrls, closeModal, readOnly, write]);
+
+  const uploadFiles = useCallback(
+    (files: File[]) => {
+      if (readOnly) return;
+      const accepted: File[] = [];
+      const rejected: string[] = [];
+      for (const file of files) {
+        const reason = rejectionReason(file);
+        if (reason) rejected.push(reason);
+        else accepted.push(file);
+      }
+      setRejections(rejected);
+      if (accepted.length === 0) return;
+
+      const acceptedIds = accepted.map((file) => file.name);
+      const currentSaved = editorUrls(valueRef.current, multiple).urls;
+      const drop = acceptedDrop(currentSaved, acceptedIds, multiple);
+      setNotAdded(drop.notAdded);
+      const toUpload = multiple ? accepted : accepted.slice(0, drop.urls.length);
+
+      const items = toUpload.map((file) => ({
+        key: crypto.randomUUID(),
+        filename: file.name,
+        previewUrl: URL.createObjectURL(file),
+        file,
+      }));
+      setPending((current) => [
+        ...current,
+        ...items.map((item) => ({
+          key: item.key,
+          filename: item.filename,
+          previewUrl: item.previewUrl,
+        })),
+      ]);
+
+      for (const item of items) {
+        void uploadMedia(workspace.id, item.file)
+          .then((result) => {
+            URL.revokeObjectURL(item.previewUrl);
+            setPending((current) => current.filter((slot) => slot.key !== item.key));
+            const url = result.media.url;
+            const currentSaved = editorUrls(valueRef.current, multiple).urls;
+            if (multiple) {
+              write(appendMediaUrls(currentSaved, [url]));
+              return;
+            }
+            write(url, { keepNotAdded: true });
+          })
+          .catch(() => {
+            URL.revokeObjectURL(item.previewUrl);
+            setPending((current) => current.filter((slot) => slot.key !== item.key));
+            setRejections((current) => [...current, `${item.filename} could not be uploaded`]);
+          });
+      }
+    },
+    [multiple, readOnly, workspace.id, write],
+  );
+
+  const onFieldDrop = useCallback(
+    (event: DragEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      uploadFiles(Array.from(event.dataTransfer?.files ?? []));
+    },
+    [uploadFiles],
+  );
+
+  const removeAt = useCallback(
+    (index: number) => {
+      const next = savedUrls.filter((_, i) => i !== index);
+      write(next.length === 0 ? undefined : next);
+    },
+    [savedUrls, write],
+  );
+
+  const onThumbDrop = useCallback(
+    (toIndex: number, event: DragEvent) => {
+      event.preventDefault();
+      const from = dragFrom.current;
+      dragFrom.current = null;
+      if (from === null || from === toIndex) return;
+      write(moveMediaUrl(savedUrls, from, toIndex));
+    },
+    [savedUrls, write],
+  );
+
+  const note = notAddedMessage(notAdded);
+  const messages = [...rejections, ...(note ? [note] : [])];
+
+  const wrongShapeOne = !multiple && Array.isArray(parsed.raw);
+  const showThumb = !wrongShapeOne && savedUrls.length > 0;
+  const selectedUrl = showThumb ? savedUrls[0]! : null;
+  const catalogKey = savedUrls.map((url) => mediaIdFromUrl(url) ?? "").join("\n");
+  const [catalog, setCatalog] = useState<CatalogMedia[]>([]);
+
+  useEffect(() => {
+    if (!catalogKey) {
+      setCatalog([]);
+      return;
+    }
+    let cancelled = false;
+    void fetchMedia(workspace.id)
+      .then((page) => {
+        if (!cancelled) setCatalog(page.media);
+      })
+      .catch(() => {
+        if (!cancelled) setCatalog([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [catalogKey, workspace.id]);
+
+  const detailsFor = (url: string) => {
+    const id = mediaIdFromUrl(url);
+    return id ? catalog.find((item) => item.id === id) ?? null : null;
+  };
+  const leadDetails = selectedUrl ? detailsFor(selectedUrl) : null;
+  const galleryFilled = multiple && (showThumb || pending.length > 0);
+  const hiddenCount = multiple && showThumb ? Math.max(0, savedUrls.length - GALLERY_PER_ROW) : 0;
+  const galleryUrls =
+    multiple && showThumb && !expanded ? savedUrls.slice(0, GALLERY_PER_ROW) : savedUrls;
 
   return (
-    <div {...stylex.props(styles.row)}>
-      {thumb ? (
-        <img src={thumb} alt="" {...stylex.props(styles.thumb)} />
-      ) : (
-        <div {...stylex.props(styles.placeholder)}>No image</div>
-      )}
-      {readOnly ? null : (
-        <Button variant="secondary" onClick={() => setOpen(true)}>
-          Choose
-        </Button>
-      )}
-      {readOnly || !url ? null : (
-        <Button variant="ghost" onClick={() => onChange("")}>
-          Clear
-        </Button>
-      )}
-      <Dialog.Root open={open} onOpenChange={setOpen}>
+    <div {...stylex.props(styles.stack)}>
+      <div
+        data-media-drop
+        {...stylex.props(styles.row)}
+        onDragOver={(event) => event.preventDefault()}
+        onDrop={onFieldDrop}
+      >
+        {multiple && showThumb ? (
+          <div {...stylex.props(styles.galleryStack)}>
+            <div data-media-grid {...stylex.props(styles.galleryGrid)}>
+              {galleryUrls.map((url, index) => {
+                const thumb = thumbForUrl(url);
+                return (
+                  <div
+                    key={`${url}-${index}`}
+                    data-media-thumb
+                    draggable={!readOnly}
+                    {...stylex.props(styles.thumbWrap)}
+                    onDragStart={() => {
+                      dragFrom.current = index;
+                    }}
+                    onDragOver={(event) => event.preventDefault()}
+                    onDrop={(event) => onThumbDrop(index, event)}
+                  >
+                    {thumb ? (
+                      <img src={thumb} alt="" {...stylex.props(styles.galleryTile)} />
+                    ) : (
+                      <div {...stylex.props(styles.galleryTile, styles.moreEmpty)} />
+                    )}
+                    {readOnly || (field.required === true && savedUrls.length === 1) ? null : (
+                      <button
+                        type="button"
+                        aria-label="Remove image"
+                        {...stylex.props(styles.galleryRemove)}
+                        onClick={() => removeAt(index)}
+                      >
+                        ×
+                      </button>
+                    )}
+                  </div>
+                );
+              })}
+              {pending.map((item) => (
+                <div key={item.key} {...stylex.props(styles.thumbWrap)}>
+                  <img src={item.previewUrl} alt="" {...stylex.props(styles.galleryTile, styles.pending)} />
+                </div>
+              ))}
+            </div>
+            {hiddenCount > 0 || !readOnly ? (
+              <div {...stylex.props(styles.galleryFooter)}>
+                {hiddenCount > 0 ? (
+                  <button
+                    type="button"
+                    {...stylex.props(styles.showMore)}
+                    onClick={() => setExpanded((current) => !current)}
+                  >
+                    {expanded ? "Show less" : "Show more"}
+                  </button>
+                ) : (
+                  <span />
+                )}
+                {readOnly ? null : (
+                  <button
+                    type="button"
+                    aria-label="Edit image"
+                    {...stylex.props(styles.iconBtn)}
+                    onClick={openModal}
+                  >
+                    <PencilIcon />
+                  </button>
+                )}
+              </div>
+            ) : null}
+          </div>
+        ) : multiple && pending[0] ? (
+          <FileCard
+            src={pending[0].previewUrl}
+            name={pending[0].filename}
+            meta="Uploading"
+            readOnly
+            required
+            onEdit={openModal}
+            onRemove={() => undefined}
+          />
+        ) : multiple ? (
+          <div {...stylex.props(styles.thumbRow)} />
+        ) : wrongShapeOne ? (
+          <Text tone="muted">Choose one image</Text>
+        ) : showThumb ? (
+          <FileCard
+            src={thumbForUrl(selectedUrl!) ?? selectedUrl!}
+            name={leadDetails?.filename ?? "Image"}
+            meta={leadDetails ? mediaMeta(leadDetails) : null}
+            readOnly={readOnly}
+            required={field.required === true}
+            onEdit={openModal}
+            onRemove={() => write(undefined)}
+          />
+        ) : pending[0] ? (
+          <FileCard
+            src={pending[0].previewUrl}
+            name={pending[0].filename}
+            meta="Uploading"
+            readOnly
+            required
+            onEdit={openModal}
+            onRemove={() => undefined}
+          />
+        ) : (
+          <div {...stylex.props(styles.placeholder)}>No image</div>
+        )}
+        {readOnly || galleryFilled || (!multiple && showThumb && !wrongShapeOne) ? null : (
+          <Button variant="secondary" onClick={openModal}>
+            Choose
+          </Button>
+        )}
+        {readOnly || galleryFilled || !multiple || !showThumb || field.required ? null : (
+          <Button variant="ghost" onClick={() => write(undefined)}>
+            Clear
+          </Button>
+        )}
+      </div>
+      {messages.length > 0 ? (
+        <Text tone="danger" size="sm">
+          {messages.join(" · ")}
+        </Text>
+      ) : null}
+      <Dialog.Root
+        open={open}
+        onOpenChange={(next) => {
+          if (!next) closeModal();
+        }}
+      >
         <Dialog.Portal>
           <Dialog.Backdrop
+            data-media-dialog-backdrop
             className={(state) =>
               cx(styles.backdrop, isTransitioning(state.transitionStatus) && styles.backdropHidden)
             }
+            onClick={() => closeModal()}
           />
           <Dialog.Popup
             className={(state) =>
@@ -58,12 +365,31 @@ export function MediaFieldInput({
             <div {...stylex.props(styles.gallery)}>
               <MediaGalleryPage
                 pick
-                onPick={(next) => {
-                  onChange(next);
-                  setOpen(false);
-                }}
+                pickedUrls={multiple ? checkUrls : undefined}
+                onToggleUrl={
+                  multiple
+                    ? (url) => {
+                        setCheckUrls((current) => toggleMediaUrl(current, url));
+                      }
+                    : undefined
+                }
+                onPick={
+                  multiple
+                    ? undefined
+                    : (url) => {
+                        write(url);
+                        closeModal();
+                      }
+                }
               />
             </div>
+            {multiple ? (
+              <div {...stylex.props(styles.footer)}>
+                <Button variant="primary" onClick={applyUse}>
+                  Use
+                </Button>
+              </div>
+            ) : null}
           </Dialog.Popup>
         </Dialog.Portal>
       </Dialog.Root>
@@ -71,16 +397,172 @@ export function MediaFieldInput({
   );
 }
 
+function FileCard({
+  src,
+  name,
+  meta,
+  readOnly,
+  required,
+  onEdit,
+  onRemove,
+}: {
+  src: string;
+  name: string;
+  meta: string | null;
+  readOnly?: boolean;
+  required: boolean;
+  onEdit: () => void;
+  onRemove: () => void;
+}) {
+  return (
+    <div {...stylex.props(styles.fileCard)} data-media-file>
+      <img src={src} alt="" {...stylex.props(styles.fileThumb)} />
+      <div {...stylex.props(styles.fileText)}>
+        <span {...stylex.props(styles.fileName)}>{name}</span>
+        {meta ? <span {...stylex.props(styles.fileMeta)}>{meta}</span> : null}
+      </div>
+      {readOnly ? null : (
+        <div {...stylex.props(styles.fileActions)}>
+          <button type="button" aria-label="Edit image" {...stylex.props(styles.iconBtn)} onClick={onEdit}>
+            <PencilIcon />
+          </button>
+          {required ? null : (
+            <button
+              type="button"
+              aria-label="Remove image"
+              {...stylex.props(styles.iconBtn)}
+              onClick={onRemove}
+            >
+              <CloseIcon />
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function mediaMeta(item: Pick<CatalogMedia, "byteSize" | "width" | "height" | "contentType">): string {
+  const parts = [formatBytes(item.byteSize)];
+  if (item.width > 0 && item.height > 0) parts.push(`${item.width}×${item.height}`);
+  if (item.contentType) parts.push(item.contentType);
+  return parts.join(" - ");
+}
+
+function formatBytes(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes < 0) return "0B";
+  if (bytes < 1024) return `${Math.round(bytes)}B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)}KB`;
+  const mb = bytes / (1024 * 1024);
+  const rounded = mb >= 10 ? Math.round(mb) : Math.round(mb * 10) / 10;
+  return `${rounded}MB`;
+}
+
+function PencilIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M9.2 3.4 12.6 6.8 6.1 13.3H2.7V9.9L9.2 3.4Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinejoin="round"
+      />
+      <path d="M8.1 4.5 11.5 7.9" stroke="currentColor" strokeWidth="1.25" />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d="M4.5 4.5 11.5 11.5M11.5 4.5 4.5 11.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
+    </svg>
+  );
+}
+
 const fade = stylex.keyframes({
   from: { opacity: 0 },
   to: { opacity: 1 },
 });
 
 const styles = stylex.create({
+  stack: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.sm,
+  },
   row: {
     display: "flex",
     alignItems: "center",
     gap: space.md,
+    flexWrap: "wrap",
+    width: "100%",
+  },
+  thumbRow: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: space.sm,
+  },
+  galleryStack: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.xs,
+    width: "fit-content",
+    maxWidth: "100%",
+  },
+  galleryGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(4, 48px)",
+    gap: "4px",
+  },
+  galleryTile: {
+    width: "48px",
+    height: "48px",
+    objectFit: "cover",
+    borderRadius: radius.sm,
+    backgroundColor: colors.bgPanel,
+  },
+  galleryRemove: {
+    position: "absolute",
+    top: 2,
+    right: 2,
+    width: "14px",
+    height: "14px",
+    padding: 0,
+    borderWidth: 0,
+    borderRadius: "999px",
+    backgroundColor: colors.overlay,
+    color: colors.textInverse,
+    cursor: "pointer",
+    fontSize: type.xs,
+    lineHeight: 1,
+  },
+  galleryFooter: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.sm,
+  },
+  showMore: {
+    padding: 0,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    cursor: "pointer",
+    fontSize: type.sm,
+    [hover]: {
+      ":hover": {
+        color: colors.text,
+      },
+    },
+  },
+  moreEmpty: {
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+  },
+  thumbWrap: {
+    position: "relative",
   },
   thumb: {
     width: "4.5rem",
@@ -89,6 +571,9 @@ const styles = stylex.create({
     borderRadius: radius.md,
     backgroundColor: colors.bgPanel,
   },
+  pending: {
+    opacity: 0.55,
+  },
   placeholder: {
     width: "4.5rem",
     height: "4.5rem",
@@ -100,12 +585,101 @@ const styles = stylex.create({
     color: colors.textMuted,
     fontSize: type.xs,
   },
+  fileCard: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.md,
+    width: "100%",
+    minWidth: 0,
+    boxSizing: "border-box",
+    padding: space.sm,
+    paddingRight: space.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgInput,
+  },
+  fileThumb: {
+    width: "40px",
+    height: "40px",
+    flexShrink: 0,
+    objectFit: "cover",
+    borderRadius: radius.sm,
+    backgroundColor: colors.bgPanel,
+  },
+  fileText: {
+    display: "flex",
+    minWidth: 0,
+    flex: 1,
+    flexDirection: "column",
+    gap: "2px",
+  },
+  fileName: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    color: colors.text,
+    fontSize: type.md,
+  },
+  fileMeta: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    color: colors.textMuted,
+    fontSize: type.xs,
+  },
+  fileActions: {
+    display: "flex",
+    flexShrink: 0,
+    alignItems: "center",
+    gap: space.xs,
+  },
+  iconBtn: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "28px",
+    height: "28px",
+    padding: 0,
+    borderWidth: 0,
+    borderRadius: radius.sm,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    cursor: "pointer",
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+        color: colors.text,
+      },
+    },
+  },
+  remove: {
+    position: "absolute",
+    top: 2,
+    right: 2,
+    width: "1.25rem",
+    height: "1.25rem",
+    padding: 0,
+    borderWidth: 0,
+    borderRadius: radius.sm,
+    backgroundColor: colors.overlay,
+    color: colors.textInverse,
+    cursor: "pointer",
+    fontSize: type.sm,
+    lineHeight: 1,
+  },
   backdrop: {
     position: "fixed",
     inset: 0,
+    zIndex: z.overlay,
     backgroundColor: colors.overlay,
+    backdropFilter: "blur(8px)",
     animationName: fade,
     animationDuration: "120ms",
+    "@media (prefers-reduced-motion: reduce)": {
+      animationDuration: "0ms",
+    },
   },
   backdropHidden: {
     opacity: 0,
@@ -114,6 +688,7 @@ const styles = stylex.create({
     position: "fixed",
     top: "8vh",
     left: "50%",
+    zIndex: z.palette,
     transform: "translateX(-50%)",
     width: "min(960px, calc(100vw - 32px))",
     height: "min(720px, 80vh)",
@@ -136,4 +711,12 @@ const styles = stylex.create({
     flex: 1,
     minHeight: 0,
   },
+  footer: {
+    display: "flex",
+    justifyContent: "flex-end",
+    padding: space.lg,
+    borderTopWidth: 1,
+    borderTopStyle: "solid",
+    borderTopColor: colors.border,
+  },
 });