@agent-native/core 0.137.6 → 0.137.8

package/corpus/README.md

@@ -31,4 +31,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 ## Generated Counts
 
-- template files: 7581
+- template files: 7586

package/corpus/templates/clips/app/components/recorder/pre-record-panel.tsx

@@ -14,6 +14,16 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { CaptureInstallInlineLink } from "@/components/capture-install-options";
 import { ImportMenu } from "@/components/import-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import {
   Collapsible,
@@ -426,6 +436,35 @@ export function PreRecordPanel({
     );
   }, [micId, micLabel, mics, t]);
 
+  const [micWarningOpen, setMicWarningOpen] = useState(false);
+
+  const buildStartOpts = useCallback(
+    () => ({
+      // If the user toggled off the camera inside screen+camera mode,
+      // downgrade to screen-only so the recorder engine doesn't try
+      // to acquire a webcam stream.
+      mode: (mode === "screen+camera" && !needsCamera
+        ? "screen"
+        : mode) as RecordingMode,
+      displaySurface: normalizeDisplaySurfaceForRuntime(displaySurface),
+      micDeviceId: micId === "default" ? null : micId,
+      micDeviceLabel:
+        micId === "default" || micId === NO_MIC_DEVICE_ID
+          ? null
+          : selectedMicLabel,
+      cameraDeviceId: needsCamera && cameraId !== "default" ? cameraId : null,
+    }),
+    [mode, needsCamera, displaySurface, micId, selectedMicLabel, cameraId],
+  );
+
+  const handleStartClick = useCallback(() => {
+    if (micId === NO_MIC_DEVICE_ID) {
+      setMicWarningOpen(true);
+      return;
+    }
+    onStart(buildStartOpts());
+  }, [micId, buildStartOpts, onStart]);
+
   const selectedCameraLabel = useMemo(() => {
     if (!needsCamera) return null;
     if (cameraId === "default") return t("preRecord.defaultCamera");
@@ -893,24 +932,7 @@ export function PreRecordPanel({
           )}
           <Button
             disabled={startDisabled}
-            onClick={() =>
-              onStart({
-                // If the user toggled off the camera inside screen+camera mode,
-                // downgrade to screen-only so the recorder engine doesn't try
-                // to acquire a webcam stream.
-                mode:
-                  mode === "screen+camera" && !needsCamera ? "screen" : mode,
-                displaySurface:
-                  normalizeDisplaySurfaceForRuntime(displaySurface),
-                micDeviceId: micId === "default" ? null : micId,
-                micDeviceLabel:
-                  micId === "default" || micId === NO_MIC_DEVICE_ID
-                    ? null
-                    : selectedMicLabel,
-                cameraDeviceId:
-                  needsCamera && cameraId !== "default" ? cameraId : null,
-              })
-            }
+            onClick={handleStartClick}
             className={cn("h-12", onCancel ? "flex-1" : "w-full")}
           >
             {t("preRecord.startRecording")}
@@ -943,6 +965,31 @@ export function PreRecordPanel({
           </>
         )}
       </div>
+
+      <AlertDialog open={micWarningOpen} onOpenChange={setMicWarningOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("preRecord.micOffConfirmTitle")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("preRecord.micOffConfirmDescription")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={(event) => {
+                event.preventDefault();
+                setMicWarningOpen(false);
+                onStart(buildStartOpts());
+              }}
+            >
+              {t("preRecord.startWithoutMic")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }

package/corpus/templates/clips/app/i18n/en-US.ts

@@ -1274,6 +1274,10 @@ All notable user-facing changes to Clips are documented here. Open it any time f
     cameraOff: "Camera off",
     includeCameraAria: "Include camera in this recording",
     startRecording: "Start recording",
+    micOffConfirmTitle: "Record without a microphone?",
+    micOffConfirmDescription:
+      "Your mic is off, so this recording won't capture any audio. Turn it on before starting if you want narration.",
+    startWithoutMic: "Start anyway",
     uploadVideo: "Upload video",
     importLoom: "Import Loom",
     importing: "Importing...",

package/corpus/templates/clips/desktop/package.json

@@ -18,6 +18,7 @@
     "test": "vitest --run"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.23",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@sentry/browser": "10.62.0",

package/corpus/templates/clips/desktop/src/app.tsx

@@ -35,6 +35,16 @@ import {
   useState,
 } from "react";
 
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./components/AlertDialog";
 import { FeedbackButton } from "./components/FeedbackButton";
 import {
   CamIcon,
@@ -873,6 +883,9 @@ export function App() {
     loadBool(CAM_ON_KEY, false),
   );
   const [micOn, setMicOn] = useState<boolean>(() => loadBool(MIC_ON_KEY, true));
+  const [micOffConfirmOpen, setMicOffConfirmOpen] = useState(false);
+  const pendingStartOptionsRef =
+    useRef<Parameters<typeof handleStartRecording>[0]>(undefined);
   const [systemAudioOn, setSystemAudioOn] = useState<boolean>(() =>
     loadBool(SYSTEM_AUDIO_KEY, true),
   );
@@ -3051,6 +3064,26 @@ export function App() {
   // include a function that is recreated every render.
   handleStartRecordingRef.current = handleStartRecording;
 
+  // Gates every start-recording gesture (button, global shortcut, permission
+  // retry) on the mic toggle. When the mic is off we hold the actual
+  // getDisplayMedia/getUserMedia call until the user confirms in
+  // micOffConfirmOpen — the confirm button's own click supplies the user
+  // activation handleStartRecording needs, same as the direct gesture would.
+  function beginRecording(
+    options?: Parameters<typeof handleStartRecording>[0],
+    beginOptions?: { revealPopoverIfMicOff?: boolean },
+  ) {
+    if (!micOn) {
+      pendingStartOptionsRef.current = options;
+      if (beginOptions?.revealPopoverIfMicOff) {
+        invoke("show_popover").catch(() => {});
+      }
+      setMicOffConfirmOpen(true);
+      return;
+    }
+    void handleStartRecording(options);
+  }
+
   recordShortcutHandlerRef.current = () => {
     if (recorder) {
       emit("clips:recorder-stop").catch(() => {});
@@ -3078,7 +3111,10 @@ export function App() {
       return;
     }
 
-    void handleStartRecording({ ignoreActiveRecorder: true });
+    beginRecording(
+      { ignoreActiveRecorder: true },
+      { revealPopoverIfMicOff: true },
+    );
   };
 
   useEffect(() => {
@@ -3903,9 +3939,7 @@ export function App() {
             disabled={
               localRecordingMode === "off" && videoStorageStatus === "checking"
             }
-            onClick={() => {
-              void handleStartRecording();
-            }}
+            onClick={() => beginRecording()}
           >
             {localRecordingMode === "off" && videoStorageStatus === "checking"
               ? "Checking storage..."
@@ -3914,6 +3948,36 @@ export function App() {
                 : "Start local recording"}
           </button>
         ) : null}
+
+        <AlertDialog
+          open={micOffConfirmOpen}
+          onOpenChange={(open) => {
+            setMicOffConfirmOpen(open);
+            if (!open) pendingStartOptionsRef.current = undefined;
+          }}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Record without a microphone?</AlertDialogTitle>
+              <AlertDialogDescription>
+                Your mic is off, so this recording won&apos;t capture any audio.
+                Turn it on before starting if you want narration.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogAction
+                onClick={() => {
+                  const options = pendingStartOptionsRef.current;
+                  pendingStartOptionsRef.current = undefined;
+                  void handleStartRecording(options);
+                }}
+              >
+                Start anyway
+              </AlertDialogAction>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
         {recError ? (
           recError === MACOS_UPDATE_RESTART_MESSAGE ? (
             <UpdateRestartBanner message={recError} />
@@ -3928,14 +3992,14 @@ export function App() {
                   ? ["screen"]
                   : permissionPanesForRecording(mode, cameraOn, micOn)
               }
-              onRetry={handleStartRecording}
+              onRetry={() => beginRecording()}
             />
           ) : recError === MACOS_SPEECH_PERMISSION_MESSAGE ? (
             <PermissionRecoveryBanner
               kind="speech"
               message={recError}
               panes={["speech", "microphone"]}
-              onRetry={handleStartRecording}
+              onRetry={() => beginRecording()}
             />
           ) : isStorageSetupFailureMessage(recError) ? (
             <StorageConnectionBanner

package/corpus/templates/clips/desktop/src/components/AlertDialog.tsx

@@ -0,0 +1,131 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
+
+/**
+ * shadcn-style AlertDialog for the Tauri tray app.
+ *
+ * Mirrors shadcn/ui's alert-dialog API, but styled with the desktop app's
+ * plain-CSS theme tokens instead of Tailwind — this app has no Tailwind/
+ * shadcn build. Deliberately skips Radix's `Portal`: the popover window is
+ * sized to fit `.app`'s measured content (see `resize_popover`) and clipped
+ * to its own rounded corners, so a body-portaled overlay would render past
+ * the window's actual bounds. Overlay/Content use `position: absolute`
+ * instead of `fixed` so they stay inside `.app`'s rounded, clipped bounds.
+ */
+
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    ref={ref}
+    className={["alert-dialog-overlay", className].filter(Boolean).join(" ")}
+    {...props}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={["alert-dialog-content", className].filter(Boolean).join(" ")}
+      {...props}
+    />
+  </>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={["alert-dialog-header", className].filter(Boolean).join(" ")}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={["alert-dialog-footer", className].filter(Boolean).join(" ")}
+      {...props}
+    />
+  );
+}
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={["alert-dialog-title", className].filter(Boolean).join(" ")}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={["alert-dialog-description", className]
+      .filter(Boolean)
+      .join(" ")}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={["primary", className].filter(Boolean).join(" ")}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={["secondary", className].filter(Boolean).join(" ")}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/corpus/templates/clips/desktop/src/styles.css

@@ -156,6 +156,7 @@ body[data-clips-route="recording-pill"] #root {
    content exceeds the restored popover height. Only the content region may
    scroll; the window shell and bottom destinations stay put. */
 .app-recorder {
+  position: relative;
   gap: 0;
   padding: 0;
   overflow: hidden;
@@ -2612,6 +2613,134 @@ body[data-clips-route="recording-pill"] #root {
   }
 }
 
+/* ------------------------------------------------------------------------- */
+/* Alert dialog                                                              */
+/* ------------------------------------------------------------------------- */
+
+/* `position: absolute`, not `fixed` — see AlertDialog.tsx: this must stay
+   inside `.app-recorder`'s clipped, rounded bounds rather than the raw
+   (square-cornered) Tauri window. */
+.alert-dialog-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 70;
+  /* guard:allow-raw-color — modal scrim is theme-invariant black, same as shadcn's own bg-black/80 overlay */
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.alert-dialog-overlay[data-state="open"] {
+  animation: alert-dialog-overlay-in 120ms ease-out;
+}
+
+.alert-dialog-overlay[data-state="closed"] {
+  animation: alert-dialog-overlay-out 100ms ease-in;
+}
+
+.alert-dialog-content {
+  position: absolute;
+  z-index: 71;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: calc(100% - 32px);
+  max-width: 320px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg);
+  box-shadow: var(--shadow-md);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.alert-dialog-content[data-state="open"] {
+  animation: alert-dialog-content-in 120ms ease-out;
+}
+
+.alert-dialog-content[data-state="closed"] {
+  animation: alert-dialog-content-out 100ms ease-in;
+}
+
+.alert-dialog-header {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.alert-dialog-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--fg);
+}
+
+.alert-dialog-description {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--fg-muted);
+}
+
+.alert-dialog-footer {
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 8px;
+}
+
+.alert-dialog-footer .primary,
+.alert-dialog-footer .secondary {
+  width: auto;
+  flex: 1;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+@keyframes alert-dialog-overlay-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes alert-dialog-overlay-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes alert-dialog-content-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes alert-dialog-content-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.96);
+  }
+}
+
 .setup-toggle-row {
   display: flex;
   align-items: center;

package/corpus/templates/design/.agents/skills/design-generation/SKILL.md

@@ -330,6 +330,8 @@ canonical sizes to reuse instead of guessing:
 - **Social**: Instagram Post 1080×1080, Instagram Story 1080×1920, X Post
   1200×675, Facebook Cover 820×312, LinkedIn Cover 1584×396.
 
+Frame geometry is always numbers — `"width": 800`, never `"800"` or `"800px"`. String dimensions are rejected.
+
 At small ad-unit sizes (320×50, 160×600), text commonly runs 9-11px — smaller
 than this skill's general 16px body-text floor — because there is no room to
 reflow. That is expected for these formats; it stays legible in @2x+ exports

package/corpus/templates/design/actions/generate-design.ts

@@ -439,7 +439,7 @@ const generateDesignAgentParameters = {
       type: "string",
       description:
         "Optional JSON array of overview-canvas placements keyed by filename or fileId. " +
-        "Pass explicit x/y/width/height for every generated screen; desktop is 1440x900.",
+        "Pass explicit x/y/width/height for every generated screen as numbers; desktop is 1440x900.",
     },
     contextPackId: {
       type: "string",
@@ -504,7 +504,8 @@ const generateDesignAction = defineAction({
     "for a mobile- or tablet-primary design when not passing `devices`. " +
     "Do not report a design as ready until this action succeeds. " +
     "When adding multiple screens or states, pass canvasFrames with filenames " +
-    "and x/y/width/height so the new screens appear placed on the overview canvas.",
+    "and numeric x/y/width/height so the new screens appear placed on the " +
+    "overview canvas.",
   schema: z.object({
     designId: z.string().describe("Design project ID to save content to"),
     prompt: z.string().describe("The generation prompt (stored for reference)"),

package/corpus/templates/design/actions/update-design.ts

@@ -4,6 +4,7 @@ import { and, eq, isNull } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import { numericDesignDataWriteError } from "../shared/canvas-frames.js";
 
 const MAX_DATA_CAS_ATTEMPTS = 5;
 const MAX_DATA_OPERATION_SOURCES = 128;
@@ -26,17 +27,28 @@ const dataPathSchema = z
   .min(1)
   .max(8);
 
-const dataOperationSchema = z.discriminatedUnion("op", [
-  z.object({
-    op: z.literal("set"),
-    path: dataPathSchema,
-    value: z.json(),
-  }),
-  z.object({
-    op: z.literal("delete"),
-    path: dataPathSchema,
-  }),
-]);
+const dataOperationSchema = z
+  .discriminatedUnion("op", [
+    z.object({
+      op: z.literal("set"),
+      path: dataPathSchema,
+      value: z.json(),
+    }),
+    z.object({
+      op: z.literal("delete"),
+      path: dataPathSchema,
+    }),
+  ])
+  .superRefine((operation, context) => {
+    if (operation.op !== "set") return;
+    const message = numericDesignDataWriteError(
+      operation.path,
+      operation.value,
+    );
+    if (message) {
+      context.addIssue({ code: "custom", path: ["value"], message });
+    }
+  });
 
 type DataOperation = z.infer<typeof dataOperationSchema>;
 
@@ -195,7 +207,9 @@ export default defineAction({
     "Update an existing design project. Requires editor access. " +
     "Only provided fields are updated; omitted fields are left unchanged. " +
     "For map entries such as canvasFrames, use dataOperations " +
-    "with explicit set/delete paths instead of a full data snapshot.",
+    "with explicit set/delete paths instead of a full data snapshot. " +
+    "Dimensions and positions (x, y, width, height, rotation, z) are " +
+    "numbers. String values are rejected.",
   schema: z
     .object({
       id: z.string().describe("Design ID"),
@@ -213,7 +227,7 @@ export default defineAction({
         .max(500)
         .optional()
         .describe(
-          "Atomic path-addressed set/delete operations for design data. Safe to CAS-retry across concurrent writers.",
+          "Atomic path-addressed set/delete operations for design data. Safe to CAS-retry across concurrent writers. Geometry values must be numbers, not strings.",
         ),
       operationSource: z
         .string()
@@ -284,11 +298,18 @@ export default defineAction({
     designSystemId,
   }) => {
     if (data !== undefined) {
+      let parsedSnapshot: unknown;
       try {
-        JSON.parse(data);
+        parsedSnapshot = JSON.parse(data);
       } catch {
         throw new Error("data must be a valid JSON string");
       }
+      if (isRecord(parsedSnapshot)) {
+        for (const [key, value] of Object.entries(parsedSnapshot)) {
+          const message = numericDesignDataWriteError([key], value);
+          if (message) throw new Error(message);
+        }
+      }
     }
 
     await assertAccess("design", id, "editor");

package/corpus/templates/design/app/components/design/DesignImportPanel.tsx

@@ -37,6 +37,7 @@ import {
   getFigmaConnectionStatus,
   saveFigmaAccessToken,
 } from "@/lib/figma-connection";
+import { MAX_UPLOAD_MB } from "@/lib/upload-limits";
 import { cn } from "@/lib/utils";
 
 import type { DesignExtensionSlotContext } from "./DesignExtensionsPanel";
@@ -307,7 +308,9 @@ export function DesignImportPanel(p: DesignImportPanelProps) {
       }
       if (validationError === "too-large") {
         toast.error(t("designEditor.import.errors.uploadFailed"), {
-          description: t("designEditor.import.errors.figFileTooLarge"),
+          description: t("designEditor.import.errors.figFileTooLarge", {
+            max: MAX_UPLOAD_MB,
+          }),
         });
         if (figFileInputRef.current) figFileInputRef.current.value = "";
         return;
@@ -566,7 +569,9 @@ export function DesignImportPanel(p: DesignImportPanelProps) {
           >
             <div className="space-y-2 p-2">
               <p className="text-[11px] leading-snug text-muted-foreground">
-                {t("designEditor.import.figUploadDescription")}
+                {t("designEditor.import.figUploadDescription", {
+                  max: MAX_UPLOAD_MB,
+                })}
               </p>
               <input
                 ref={figFileInputRef}