@eifi1/ui-kit 0.22.0 → 0.24.0

package/dist/feedback/feedback-attachment.d.ts

@@ -1,2 +1,67 @@
 import 'react';
-export { D as DEFAULT_ATTACHMENT_ACCEPT, a as DEFAULT_FEEDBACK_ATTACHMENT_LABELS, c as DEFAULT_MAX_ATTACHMENTS, d as DEFAULT_MAX_ATTACHMENT_BYTES, F as FeedbackAttachmentError, e as FeedbackAttachmentField, f as FeedbackAttachmentFieldLabels, g as FeedbackAttachmentFieldMultipleProps, h as FeedbackAttachmentFieldProps, i as FeedbackAttachmentFieldRefsProps, j as FeedbackAttachmentFieldSingleProps, l as FeedbackAttachmentRef, m as FeedbackAttachmentRefsError, w as pastedName } from '../feedback-attachment-NhUm7Zga.js';
+export { X as DEFAULT_ATTACHMENT_ACCEPT, a5 as DEFAULT_FEEDBACK_ATTACHMENT_LABELS, ad as DEFAULT_MAX_ATTACHMENTS, ae as DEFAULT_MAX_ATTACHMENT_BYTES, aH as FeedbackAttachmentError, aI as FeedbackAttachmentErrorInfo, aJ as FeedbackAttachmentField, aK as FeedbackAttachmentFieldLabels, aL as FeedbackAttachmentFieldMultipleProps, aM as FeedbackAttachmentFieldProps, aN as FeedbackAttachmentFieldRefsProps, aO as FeedbackAttachmentFieldSingleProps, aQ as FeedbackAttachmentRef, aR as FeedbackAttachmentRefsError, cM as pastedName } from '../feedback-DOwPu-Il.js';
+import '../components/tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../data-table-labels-B7OdnM0S.js';
+import '../components/data-table-sort.js';
+import '../components/swipeable-row.js';
+import '../components/mini-calendar.js';
+import '../components/calendar-heatmap.js';
+import '../components/popover.js';
+import '../components/chip.js';
+import 'lucide-react';
+import '../components/field-sync.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import '../components/month-picker.js';
+import '../components/page-contents.js';
+import '../components/series-chart-labels.js';
+import '../components/pie-chart-labels.js';
+import '../components/sparkline.js';
+import '../components/stat-tile.js';
+import '../components/signature-pad.js';
+import '../components/password-strength.js';
+import '../components/swatch-picker.js';
+import '../components/tile-radio.js';
+import '../components/icon-picker.js';
+import '../components/dialog-frame.js';
+import '../components/modal.js';
+import '../hooks/use-search-param-state.js';
+import '../components/measured-grid.js';
+import '../components/account-settings-labels.js';
+import '../components/floating-panel.js';
+import '../components/bulk-action-bar.js';
+import '../components/list.js';
+import '../components/signed-amount.js';
+import '../components/breadcrumbs.js';
+import '../components/toast.js';
+import '../components/description-list.js';
+import '../components/line-items.js';
+import '../components/progress-bar.js';
+import '../components/error-boundary.js';
+import '../components/authed-image.js';
+import '../hooks/use-authed-src.js';
+import '../components/image-grid.js';
+import '../components/lightbox.js';
+import '../components/write-lock.js';
+import '../components/legal.js';
+import '../components/account-chips.js';
+import '../lib/format.js';
+import '../components/reauth-dialog.js';
+import '../components/server-wake.js';
+import '../lib/server-wake.js';
+import '../components/translation-review-labels.js';
+import '../lib/translation-review.js';
+import '../components/country-select.js';
+import '../components/inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import '../components/sign-chip.js';
+import '../components/column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import '../components/field-parts.js';

package/dist/feedback/feedback-attachment.js

@@ -1,9 +1,16 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
 import { Camera, FileText, Image as ImageIcon, Paperclip, X } from "lucide-react";
-import { Button, Spinner } from "../components/ui.js";
+import { Button, IconButton, Spinner } from "../components/ui.js";
+import { DEFAULT_FILE_PICKER_LABELS, formatAccept } from "../components/file-button.js";
+import { useCommitReason } from "../components/write-lock.js";
 import { useKitFileLabels, useKitLabels } from "../i18n/kit-labels.js";
 const DEFAULT_ATTACHMENT_ACCEPT = ["image/png", "image/jpeg", "image/webp", "image/gif"];
 const DEFAULT_MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;
@@ -17,8 +24,11 @@ const DEFAULT_FEEDBACK_ATTACHMENT_LABELS = {
   attachmentScreenshot: "Screenshot",
   attachmentRemoveFile: (name) => `Remove ${name}`,
   attachmentLimit: (max) => `Up to ${max} ${max === 1 ? "attachment" : "attachments"} \u2014 remove one to add another.`,
-  attachmentUploading: "Uploading\u2026"
+  attachmentUploading: "Uploading\u2026",
+  attachmentUploadFailed: (name) => `\u201C${name}\u201D could not be uploaded`
 };
+const FIELD_ROOT = "relative min-w-0 max-w-full";
+const buttonIcon = (size) => size === "sm" ? "size-3.5" : "size-4";
 function FeedbackAttachmentField(props) {
   if (props.refs) return /* @__PURE__ */ jsx(RefsField, { ...props });
   return props.multiple ? /* @__PURE__ */ jsx(MultipleField, { ...props }) : /* @__PURE__ */ jsx(SingleField, { ...props });
@@ -33,6 +43,9 @@ function SingleField({
   onCaptureScreenshot,
   documentPaste = false,
   pasteFrom,
+  disabled = false,
+  buttonVariant = "secondary",
+  buttonSize = "md",
   className
 }) {
   const [previewFor, setPreviewFor] = useState(null);
@@ -40,6 +53,7 @@ function SingleField({
   const fileInputRef = useRef(null);
   const fileText = useKitFileLabels();
   const text = useKitLabels("feedbackAttachment", DEFAULT_FEEDBACK_ATTACHMENT_LABELS, labelsProp);
+  const errorInfo = useErrorInfo(accept, maxBytes, void 0, text);
   useEffect(() => {
     if (!value) return;
     const url = URL.createObjectURL(value);
@@ -50,7 +64,7 @@ function SingleField({
     if (!file) return;
     const problem = rejection(file, accept, maxBytes);
     if (problem) {
-      onError?.(problem);
+      onError?.(problem, errorInfo(problem, [file]));
       return;
     }
     onChange(file);
@@ -61,12 +75,13 @@ function SingleField({
       pick(new File([file], pastedName(file.type), { type: file.type }));
     },
     documentPaste,
-    pasteFrom
+    pasteFrom,
+    disabled
   );
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("relative", className),
+      className: cn(FIELD_ROOT, className),
       onPaste,
       children: [
         /* @__PURE__ */ jsx(Heading, { text: labelsProp?.attachment }),
@@ -87,24 +102,35 @@ function SingleField({
             /* @__PURE__ */ jsx("div", { className: "truncate text-sm text-[var(--text-secondary)]", children: value.name }),
             /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-muted)]", children: fileText.size(value.size) })
           ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => onChange(null),
-              "aria-label": text.attachmentRemove,
-              className: "rounded p-1.5 text-[var(--text-placeholder)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
-              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
-            }
-          )
+          /* @__PURE__ */ jsx(RemoveButton, { label: text.attachmentRemove, onClick: () => onChange(null), disabled })
         ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
-            /* @__PURE__ */ jsxs(Button, { type: "button", variant: "secondary", onClick: () => fileInputRef.current?.click(), children: [
-              /* @__PURE__ */ jsx(Paperclip, { className: "size-4" }),
-              " ",
-              text.attachmentAdd
-            ] }),
-            onCaptureScreenshot && /* @__PURE__ */ jsx(CaptureButton, { capture: onCaptureScreenshot, onFile: pick, label: text.attachmentCapture })
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: buttonVariant,
+                size: buttonSize,
+                disabled,
+                onClick: () => fileInputRef.current?.click(),
+                children: [
+                  /* @__PURE__ */ jsx(Paperclip, { className: buttonIcon(buttonSize) }),
+                  " ",
+                  text.attachmentAdd
+                ]
+              }
+            ),
+            onCaptureScreenshot && /* @__PURE__ */ jsx(
+              CaptureButton,
+              {
+                capture: onCaptureScreenshot,
+                onFile: pick,
+                label: text.attachmentCapture,
+                disabled,
+                variant: buttonVariant,
+                size: buttonSize
+              }
+            )
           ] }),
           /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: text.attachmentPaste })
         ] }),
@@ -115,6 +141,7 @@ function SingleField({
             type: "file",
             accept: accept.join(","),
             className: "sr-only",
+            disabled,
             onChange: (e) => {
               pick(e.target.files?.[0]);
               e.target.value = "";
@@ -138,6 +165,9 @@ function MultipleField({
   onCaptureScreenshot,
   documentPaste = false,
   pasteFrom,
+  disabled = false,
+  buttonVariant = "secondary",
+  buttonSize = "md",
   className
 }) {
   const rootRef = useRef(null);
@@ -147,6 +177,7 @@ function MultipleField({
   const removeLabel = text.attachmentRemoveFile ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentRemoveFile;
   const limitLabel = text.attachmentLimit ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentLimit;
   const screenshotLabel = text.attachmentScreenshot ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentScreenshot;
+  const errorInfo = useErrorInfo(accept, maxBytes, max, text);
   const latest = useRef(value);
   useLayoutEffect(() => {
     latest.current = value;
@@ -163,29 +194,29 @@ function MultipleField({
     const accepted = [];
     const taken = new Set([...current, ...screenshot ? [screenshot] : []].map((f) => f.name));
     for (const raw of incoming) {
-      const problem = rejection(raw, accept, maxBytes);
+      const file = pasted ? renamed(raw, uniqueName(pastedName(raw.type), taken)) : raw;
+      const problem = rejection(file, accept, maxBytes);
       if (problem) {
-        onError?.(problem);
+        onError?.(problem, errorInfo(problem, [file]));
         continue;
       }
-      const file = pasted ? renamed(raw, uniqueName(pastedName(raw.type), taken)) : raw;
       taken.add(file.name);
       if (!current.includes(file)) accepted.push(file);
     }
     if (accepted.length === 0) return;
     const space = Math.max(0, max - current.length);
-    if (accepted.length > space) onError?.("count");
+    if (accepted.length > space) onError?.("count", errorInfo("count", accepted.slice(space)));
     const kept = accepted.slice(0, space);
     if (kept.length > 0) commit([...current, ...kept]);
   };
-  const onPaste = usePaste((images) => add(images, true), documentPaste, pasteFrom);
+  const onPaste = usePaste((images) => add(images, true), documentPaste, pasteFrom, disabled);
   const capture = (file) => {
     if (!hasSlot) {
       add([file]);
       return;
     }
     const problem = rejection(file, accept, maxBytes);
-    if (problem) onError?.(problem);
+    if (problem) onError?.(problem, errorInfo(problem, [file]));
     else onScreenshotChange(file);
   };
   const pendingFocus = useRef(null);
@@ -208,7 +239,7 @@ function MultipleField({
       remove: () => commit(latest.current.filter((f) => f !== file))
     }))
   ];
-  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative space-y-2", className), onPaste, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn(FIELD_ROOT, "space-y-2", className), onPaste, children: [
     /* @__PURE__ */ jsx(Heading, { text: labelsProp?.attachment, className: "mb-0" }),
     chips.length > 0 && // One chip per row, full width: wrapped chips of name-dependent widths made a
     // ragged block in a 430px dialog, and a column keeps every name and remove
@@ -224,17 +255,14 @@ function MultipleField({
             /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-[var(--text-muted)]", children: chip.screenshot ? `${chip.file.name} \xB7 ${fileText.size(chip.file.size)}` : fileText.size(chip.file.size) })
           ] }),
           /* @__PURE__ */ jsx(
-            "button",
+            RemoveButton,
             {
-              type: "button",
-              "data-attachment-remove": "",
+              label: removeLabel(chip.name),
+              disabled,
               onClick: () => {
                 pendingFocus.current = index;
                 chip.remove();
-              },
-              "aria-label": removeLabel(chip.name),
-              className: "shrink-0 rounded p-1.5 text-[var(--text-placeholder)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
-              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+              }
             }
           )
         ]
@@ -246,11 +274,13 @@ function MultipleField({
         Button,
         {
           type: "button",
-          variant: "secondary",
+          variant: buttonVariant,
+          size: buttonSize,
           "data-attachment-action": "",
+          disabled,
           onClick: () => fileInputRef.current?.click(),
           children: [
-            /* @__PURE__ */ jsx(Paperclip, { className: "size-4" }),
+            /* @__PURE__ */ jsx(Paperclip, { className: buttonIcon(buttonSize) }),
             " ",
             text.attachmentAdd
           ]
@@ -262,6 +292,9 @@ function MultipleField({
           capture: onCaptureScreenshot,
           onFile: capture,
           label: text.attachmentCapture,
+          disabled,
+          variant: buttonVariant,
+          size: buttonSize,
           "data-attachment-action": ""
         }
       )
@@ -277,6 +310,7 @@ function MultipleField({
         className: "sr-only",
         tabIndex: -1,
         "aria-hidden": true,
+        disabled,
         onChange: (e) => {
           add(Array.from(e.target.files ?? []));
           e.target.value = "";
@@ -300,6 +334,11 @@ function RefsField({
   onCaptureScreenshot,
   documentPaste = false,
   pasteFrom,
+  disabled = false,
+  commit: commits,
+  disabledReason: ownDisabledReason,
+  buttonVariant = "secondary",
+  buttonSize = "md",
   className
 }) {
   const rootRef = useRef(null);
@@ -309,6 +348,11 @@ function RefsField({
   const removeLabel = text.attachmentRemoveFile ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentRemoveFile;
   const limitLabel = text.attachmentLimit ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentLimit;
   const uploadingLabel = text.attachmentUploading ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentUploading;
+  const errorInfo = useErrorInfo(accept, maxBytes, max, text);
+  const disabledReason = useCommitReason(commits, ownDisabledReason);
+  const locked = hasReason(disabledReason);
+  const reason = locked ? disabledReason : void 0;
+  const inert = disabled || locked;
   const latest = useRef(value);
   useLayoutEffect(() => {
     latest.current = value;
@@ -355,32 +399,32 @@ function RefsField({
       },
       (error) => {
         settle();
-        if (mounted.current) onError?.("upload", error);
+        if (mounted.current) onError?.("upload", error, errorInfo("upload", [file], error));
       }
     );
   };
   const add = (incoming, pasted = false) => {
     let space = Math.max(0, max - latest.current.length - inFlight.current.length);
     const taken = /* @__PURE__ */ new Set([...latest.current.map((r) => r.name), ...inFlight.current.map((u) => u.file.name)]);
-    let dropped = false;
+    const dropped = [];
     for (const raw of incoming) {
-      const problem = rejection(raw, accept, maxBytes);
+      const file = pasted ? renamed(raw, uniqueName(pastedName(raw.type), taken)) : raw;
+      const problem = rejection(file, accept, maxBytes);
       if (problem) {
-        onError?.(problem);
+        onError?.(problem, void 0, errorInfo(problem, [file]));
         continue;
       }
+      taken.add(file.name);
       if (space === 0) {
-        dropped = true;
+        dropped.push(file);
         continue;
       }
-      const file = pasted ? renamed(raw, uniqueName(pastedName(raw.type), taken)) : raw;
-      taken.add(file.name);
       space -= 1;
       start(file);
     }
-    if (dropped) onError?.("count");
+    if (dropped.length > 0) onError?.("count", void 0, errorInfo("count", dropped));
   };
-  const onPaste = usePaste((images) => add(images, true), documentPaste, pasteFrom);
+  const onPaste = usePaste((images) => add(images, true), documentPaste, pasteFrom, inert);
   const pendingFocus = useRef(null);
   useEffect(() => {
     const index = pendingFocus.current;
@@ -393,12 +437,13 @@ function RefsField({
     target?.focus();
   }, [value]);
   const remove = (key, index) => {
+    if (inert) return;
     pendingFocus.current = index;
     commit(latest.current.filter((r) => r.key !== key));
     onRemove?.(key);
   };
   const hasChips = value.length > 0 || uploads.length > 0;
-  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative space-y-2", className), onPaste, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn(FIELD_ROOT, "space-y-2", className), onPaste, children: [
     /* @__PURE__ */ jsx(Heading, { text: labelsProp?.attachment, className: "mb-0" }),
     hasChips && /* @__PURE__ */ jsxs("ul", { "aria-label": text.attachmentList, className: "flex flex-col gap-2", children: [
       value.map((ref, index) => /* @__PURE__ */ jsxs(
@@ -412,14 +457,12 @@ function RefsField({
               ref.size !== void 0 && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-[var(--text-muted)]", children: fileText.size(ref.size) })
             ] }),
             /* @__PURE__ */ jsx(
-              "button",
+              RemoveButton,
               {
-                type: "button",
-                "data-attachment-remove": "",
+                label: removeLabel(ref.name),
                 onClick: () => remove(ref.key, index),
-                "aria-label": removeLabel(ref.name),
-                className: "shrink-0 rounded p-1.5 text-[var(--text-placeholder)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
-                children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+                disabled,
+                reason
               }
             )
           ]
@@ -448,11 +491,14 @@ function RefsField({
         Button,
         {
           type: "button",
-          variant: "secondary",
+          variant: buttonVariant,
+          size: buttonSize,
           "data-attachment-action": "",
+          disabled,
+          disabledReason: reason,
           onClick: () => fileInputRef.current?.click(),
           children: [
-            /* @__PURE__ */ jsx(Paperclip, { className: "size-4" }),
+            /* @__PURE__ */ jsx(Paperclip, { className: buttonIcon(buttonSize) }),
             " ",
             text.attachmentAdd
           ]
@@ -464,11 +510,19 @@ function RefsField({
           capture: onCaptureScreenshot,
           onFile: (file) => add([file]),
           label: text.attachmentCapture,
+          disabled,
+          disabledReason: reason,
+          variant: buttonVariant,
+          size: buttonSize,
           "data-attachment-action": ""
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: room > 0 ? text.attachmentPaste : limitLabel(max) }),
+    locked ? (
+      // Where the paste hint was: a phone never hovers, so the Tooltip alone would
+      // leave a touch user with buttons that do nothing and no word why.
+      /* @__PURE__ */ jsx("div", { "data-attachment-reason": "", className: "text-xs text-[var(--text-muted)]", children: disabledReason })
+    ) : /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: room > 0 ? text.attachmentPaste : limitLabel(max) }),
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -479,6 +533,7 @@ function RefsField({
         className: "sr-only",
         tabIndex: -1,
         "aria-hidden": true,
+        disabled: inert,
         onChange: (e) => {
           add(Array.from(e.target.files ?? []));
           e.target.value = "";
@@ -498,6 +553,10 @@ function CaptureButton({
   capture,
   onFile,
   label,
+  disabled = false,
+  disabledReason,
+  variant,
+  size,
   ...rest
 }) {
   const [capturing, setCapturing] = useState(false);
@@ -505,24 +564,80 @@ function CaptureButton({
     Button,
     {
       type: "button",
-      variant: "secondary",
-      disabled: capturing,
+      variant,
+      size,
+      disabled: capturing || disabled,
+      disabledReason,
       ...rest,
       onClick: () => {
-        if (capturing) return;
+        if (capturing || disabled) return;
         setCapturing(true);
         void capture().then((file) => {
           if (file) onFile(file);
         }).finally(() => setCapturing(false));
       },
       children: [
-        /* @__PURE__ */ jsx(Camera, { className: "size-4" }),
+        /* @__PURE__ */ jsx(Camera, { className: buttonIcon(size) }),
         " ",
         capturing ? "\u2026" : label
       ]
     }
   );
 }
+function RemoveButton({
+  label,
+  onClick,
+  disabled,
+  reason
+}) {
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      type: "button",
+      size: "xs",
+      tone: "muted",
+      "data-attachment-remove": "",
+      "aria-label": label,
+      disabled,
+      disabledReason: reason,
+      onClick,
+      className: "shrink-0",
+      children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
+    }
+  );
+}
+function hasReason(reason) {
+  return reason !== void 0 && reason !== null && reason !== false && reason !== "";
+}
+function useErrorInfo(accept, maxBytes, max, text) {
+  const picker = useKitLabels("filePicker", DEFAULT_FILE_PICKER_LABELS);
+  const fileText = useKitFileLabels();
+  const uploadFailed = text.attachmentUploadFailed ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentUploadFailed;
+  return (kind, files, error) => {
+    const file = files[0];
+    let message;
+    if (kind === "type") {
+      const acceptText = formatAccept(accept.join(","));
+      const useOnly = acceptText !== "" && (picker.rejectedTypeOnly !== DEFAULT_FILE_PICKER_LABELS.rejectedTypeOnly || picker.rejectedType === DEFAULT_FILE_PICKER_LABELS.rejectedType);
+      message = useOnly ? picker.rejectedTypeOnly(acceptText, file.name) : picker.rejectedType(file.name);
+    } else if (kind === "size") {
+      message = picker.rejectedSize(file.name, fileText.size(maxBytes));
+    } else if (kind === "count") {
+      message = files.length === 1 ? picker.rejectedCount(file.name, max ?? 1) : picker.rejectedMany(files.length);
+    } else {
+      message = uploadFailed(file.name);
+    }
+    return {
+      file,
+      files,
+      message,
+      maxBytes,
+      accept,
+      ...max !== void 0 ? { max } : null,
+      ...kind === "upload" ? { error } : null
+    };
+  };
+}
 function ChipPreview({ file, screenshot }) {
   const isImage = file.type.startsWith("image/");
   const [previewFor, setPreviewFor] = useState(null);
@@ -565,15 +680,17 @@ function uniqueName(name, taken) {
   while (taken.has(`${stem}-${n}${ext}`)) n++;
   return `${stem}-${n}${ext}`;
 }
-function usePaste(onImages, documentPaste, pasteFrom) {
-  const latest = useRef(onImages);
+function usePaste(onImages, documentPaste, pasteFrom, off) {
+  const handler = off ? null : onImages;
+  const latest = useRef(handler);
   useEffect(() => {
-    latest.current = onImages;
+    latest.current = handler;
   });
   useEffect(() => {
     const target = documentPaste ? document : pasteFrom?.current ?? null;
     if (!target) return;
     const onPaste = (event) => {
+      if (!latest.current) return;
       const clipboard = event.clipboardData;
       takeImages(clipboard, () => event.preventDefault(), latest.current);
     };
@@ -581,7 +698,10 @@ function usePaste(onImages, documentPaste, pasteFrom) {
     return () => target.removeEventListener("paste", onPaste);
   }, [documentPaste, pasteFrom]);
   const listensElsewhere = documentPaste || pasteFrom !== void 0;
-  return listensElsewhere ? void 0 : (event) => takeImages(event.clipboardData, () => event.preventDefault(), latest.current);
+  return listensElsewhere ? void 0 : (event) => {
+    if (!latest.current) return;
+    takeImages(event.clipboardData, () => event.preventDefault(), latest.current);
+  };
 }
 function takeImages(clipboard, stop, onImages) {
   const images = Array.from(clipboard?.items ?? []).filter((item) => item.kind === "file" && item.type.startsWith("image/")).map((item) => item.getAsFile()).filter((file) => file !== null);