@drawnagency/primitives 0.1.42 → 0.1.44

package/src/components/primitives/ImageDropZone.tsx

@@ -0,0 +1,74 @@
+import { useState, type DragEvent, type ReactNode } from "react";
+import { cn } from "../../lib/cn";
+import { useMediaLibrary } from "../shell/MediaLibraryContext";
+
+interface ImageDropZoneProps {
+  onImageSelected: (imageId: string) => void;
+  className?: string;
+  children: ReactNode;
+}
+
+// Equivalent to the media library modal's accept="image/*,video/*".
+const ACCEPTED = /^(image|video)\//;
+
+/**
+ * Wraps an image slot and turns it into a native-HTML file drop target.
+ * Only reacts to drags carrying files, so it never intercepts the grid's
+ * pragmatic drag-and-drop reorder (which carries no `Files`). No media
+ * library context (viewer / not edit mode) → renders children unchanged.
+ */
+export function ImageDropZone({ onImageSelected, className, children }: ImageDropZoneProps) {
+  const mediaLibrary = useMediaLibrary();
+  const [dragging, setDragging] = useState(false);
+
+  if (!mediaLibrary) return <>{children}</>;
+
+  const maxFileSize = mediaLibrary.siteConfig?.media.maxFileSize;
+  const hasFiles = (e: DragEvent) => e.dataTransfer.types.includes("Files");
+
+  const handleDragOver = (e: DragEvent) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+    setDragging(true);
+  };
+
+  const handleDragLeave = (e: DragEvent) => {
+    if (!hasFiles(e)) return;
+    const related = e.relatedTarget as Node | null;
+    if (related && e.currentTarget.contains(related)) return;
+    setDragging(false);
+  };
+
+  const handleDrop = (e: DragEvent) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setDragging(false);
+    const file = e.dataTransfer.files[0];
+    if (!file) return;
+    if (!ACCEPTED.test(file.type)) {
+      mediaLibrary.reportRejectedUploads([{ name: file.name, reason: "type" }]);
+      return;
+    }
+    if (maxFileSize && file.size > maxFileSize) {
+      mediaLibrary.reportRejectedUploads([{ name: file.name, reason: "size" }]);
+      return;
+    }
+    mediaLibrary.uploadFileWithCallback(file, onImageSelected);
+  };
+
+  return (
+    <div
+      className={cn("relative", className)}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      {children}
+      {dragging && (
+        <div className="pointer-events-none absolute inset-0 z-10 rounded-md border-2 border-primary bg-primary/5" />
+      )}
+    </div>
+  );
+}

package/src/components/primitives/RichTextToolbar.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import type { Editor } from "@tiptap/core";
+import { useEditorState } from "@tiptap/react";
 import { cn } from "../../lib/cn";
 import { LinkPopover } from "./LinkPopover";
 import type { PresetName } from "./tiptap-presets";
@@ -46,14 +47,28 @@ function Separator() {
 export function RichTextToolbar({ editor, preset }: RichTextToolbarProps) {
   const [showLinkPopover, setShowLinkPopover] = useState(false);
 
-  const paragraphClass = editor.getAttributes("paragraph").class as string | undefined;
-
-  const isLargeActive = paragraphClass === "large";
-  const isLeadInActive = paragraphClass === "lead-in";
-
-  const toggleParagraphClass = (cls: string) => {
-    const next = paragraphClass === cls ? null : cls;
-    editor.chain().focus().updateAttributes("paragraph", { class: next }).run();
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: ed }) => ({
+      isBold: ed.isActive("bold"),
+      isItalic: ed.isActive("italic"),
+      isUnderline: ed.isActive("underline"),
+      isLink: ed.isActive("link"),
+      isBulletList: ed.isActive("bulletList"),
+      isOrderedList: ed.isActive("orderedList"),
+      isH3: ed.isActive("heading", { level: 3 }),
+      isH4: ed.isActive("heading", { level: 4 }),
+      isLarge: ed.isActive("paragraph", { class: "large" }),
+      isLeadIn: ed.isActive("paragraph", { class: "lead-in" }),
+    }),
+  });
+
+  const toggleParagraphVariant = (cls: string, isCurrentlyActive: boolean) => {
+    if (isCurrentlyActive) {
+      editor.chain().focus().setNode("paragraph").run();
+    } else {
+      editor.chain().focus().setNode("paragraph", { class: cls }).run();
+    }
   };
 
   return (
@@ -63,21 +78,21 @@ export function RichTextToolbar({ editor, preset }: RichTextToolbarProps) {
     >
       {/* Inline formatting group */}
       <ToolbarButton
-        isActive={editor.isActive("bold")}
+        isActive={state.isBold}
         onClick={() => editor.chain().focus().toggleBold().run()}
         title="Bold"
       >
         <strong>B</strong>
       </ToolbarButton>
       <ToolbarButton
-        isActive={editor.isActive("italic")}
+        isActive={state.isItalic}
         onClick={() => editor.chain().focus().toggleItalic().run()}
         title="Italic"
       >
         <em>I</em>
       </ToolbarButton>
       <ToolbarButton
-        isActive={editor.isActive("underline")}
+        isActive={state.isUnderline}
         onClick={() => editor.chain().focus().toggleUnderline().run()}
         title="Underline"
       >
@@ -91,7 +106,7 @@ export function RichTextToolbar({ editor, preset }: RichTextToolbarProps) {
           {/* Link */}
           <div className="relative">
             <ToolbarButton
-              isActive={editor.isActive("link") || showLinkPopover}
+              isActive={state.isLink || showLinkPopover}
               onClick={() => setShowLinkPopover((prev) => !prev)}
               title="Link"
             >
@@ -111,14 +126,14 @@ export function RichTextToolbar({ editor, preset }: RichTextToolbarProps) {
 
           {/* Lists */}
           <ToolbarButton
-            isActive={editor.isActive("bulletList")}
+            isActive={state.isBulletList}
             onClick={() => editor.chain().focus().toggleBulletList().run()}
             title="Bullet List"
           >
             •≡
           </ToolbarButton>
           <ToolbarButton
-            isActive={editor.isActive("orderedList")}
+            isActive={state.isOrderedList}
             onClick={() => editor.chain().focus().toggleOrderedList().run()}
             title="Ordered List"
           >
@@ -127,35 +142,31 @@ export function RichTextToolbar({ editor, preset }: RichTextToolbarProps) {
 
           <Separator />
 
-          {/* Headings */}
-          <ToolbarButton
-            isActive={editor.isActive("heading", { level: 2 })}
-            onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-            title="Heading 2"
-          >
-            H2
-          </ToolbarButton>
+          {/* Block styles — mutually exclusive */}
           <ToolbarButton
-            isActive={editor.isActive("heading", { level: 3 })}
+            isActive={state.isH3}
             onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
             title="Heading 3"
           >
             H3
           </ToolbarButton>
-
-          <Separator />
-
-          {/* Paragraph variants */}
           <ToolbarButton
-            isActive={isLargeActive}
-            onClick={() => toggleParagraphClass("large")}
+            isActive={state.isH4}
+            onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
+            title="Heading 4"
+          >
+            H4
+          </ToolbarButton>
+          <ToolbarButton
+            isActive={state.isLarge}
+            onClick={() => toggleParagraphVariant("large", state.isLarge)}
             title="Large Paragraph"
           >
             Lg
           </ToolbarButton>
           <ToolbarButton
-            isActive={isLeadInActive}
-            onClick={() => toggleParagraphClass("lead-in")}
+            isActive={state.isLeadIn}
+            onClick={() => toggleParagraphVariant("lead-in", state.isLeadIn)}
             title="Lead-In"
           >
             Li

package/src/components/primitives/tiptap-presets.ts

@@ -33,7 +33,7 @@ const basic: Extensions = [
 const rich: Extensions = [
   StarterKit.configure({
     paragraph: false,
-    heading: { levels: [2, 3] },
+    heading: { levels: [3, 4] },
     blockquote: false,
     codeBlock: false,
     horizontalRule: false,

package/src/components/sections/Button/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { RectangleHorizontal } from "lucide-react";
 import CTAButton from "./CTAButton";
 
 const schema = z.object({
@@ -15,6 +16,7 @@ const schema = z.object({
 export default defineSection({
   type: "button",
   label: "Button",
+  icon: <RectangleHorizontal size={18} />,
   schema,
   component: ({ content, onChange }) => (
     <CTAButton

package/src/components/sections/Colors/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { Palette } from "lucide-react";
 import { ColorItemSchema } from "../../../schemas/shared";
 import Colors from "../../brandguide/Colors";
 
@@ -17,6 +18,7 @@ const schema = z.object({
 export default defineSection({
   type: "colors",
   label: "Colors",
+  icon: <Palette size={18} />,
   schema,
   component: ({ content, options, onChange, openModal }) => (
     <Colors

package/src/components/sections/DoDontList/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { ListChecks } from "lucide-react";
 import DoDontList from "../../brandguide/DoDontList";
 
 const DoDontItemSchema = z.object({ label: z.string(), text: z.string(), icon: z.string().optional() });
@@ -19,6 +20,7 @@ const schema = z.object({
 export default defineSection({
   type: "do_dont",
   label: "Do / Don't",
+  icon: <ListChecks size={18} />,
   schema,
   component: ({ content, options, onChange }) => (
     <DoDontList

package/src/components/sections/DoDontMediaGrid/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { GalleryVerticalEnd } from "lucide-react";
 import { MediaReferenceSchema } from "../../../schemas/shared";
 import { MediaGridOptionsSchema } from "../../../schemas/media-grid-options";
 import DoDontMediaGrid from "../../brandguide/DoDontMediaGrid";
@@ -16,6 +17,7 @@ const schema = z.object({
 export default defineSection({
   type: "do_dont_grid",
   label: "Do / Don't Grid",
+  icon: <GalleryVerticalEnd size={18} />,
   schema,
   component: ({ content, options, onChange, openModal }) => (
     <DoDontMediaGrid

package/src/components/sections/IconList/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { List } from "lucide-react";
 import IconList from "./IconList";
 import { IconListSettings } from "./IconListSettings";
 
@@ -18,6 +19,7 @@ const schema = z.object({
 export default defineSection({
   type: "icon_list",
   label: "Icon List",
+  icon: <List size={18} />,
   schema,
   component: ({ content, options, onChange }) => (
     <IconList

package/src/components/sections/LinkHeading/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { Heading1 } from "lucide-react";
 import { HeadingSection } from "../../primitives/HeadingSection";
 
 const schema = z.object({
@@ -10,6 +11,7 @@ const schema = z.object({
 export default defineSection({
   type: "link_heading",
   label: "Link Heading",
+  icon: <Heading1 size={18} />,
   schema,
   navRole: "h1",
   component: ({ content, onChange }) => (
@@ -17,7 +19,6 @@ export default defineSection({
       heading={content.content.heading}
       tag="h2"
       placeholder="Section heading"
-      className="text-primary"
       onChange={onChange ? (heading: string) => onChange({ type: "link_heading", content: { heading } }) : undefined}
     />
   ),

package/src/components/sections/MediaGrid/MediaGrid.tsx

@@ -9,6 +9,7 @@ import { EditablePlainText } from "../../primitives/EditablePlainText";
 import type { ReactNode } from "react";
 import { Check, X } from "lucide-react";
 import { useMediaLibrary } from "../../shell/MediaLibraryContext";
+import { ImageDropZone } from "../../primitives/ImageDropZone";
 
 interface Props {
   media: MediaReference[];
@@ -101,11 +102,13 @@ function MediaGridEditable({ media, columns, square, border, crop, showCaptions,
     }
   };
 
+  const setItemImage = (index: number, imageId: string) => {
+    const newMedia = media.map((m, i) => i === index ? { ...m, imageId } : m);
+    onChange({ type: sectionType, content: { columns, media: newMedia }, ...opts } as SectionContent);
+  };
+
   const handleItemImageClick = (index: number) => {
-    mediaLibrary?.openSelectModal((imageId) => {
-      const newMedia = media.map((m, i) => i === index ? { ...m, imageId } : m);
-      onChange({ type: sectionType, content: { columns, media: newMedia }, ...opts } as SectionContent);
-    });
+    mediaLibrary?.openSelectModal((imageId) => setItemImage(index, imageId));
   };
 
   return (
@@ -128,6 +131,7 @@ function MediaGridEditable({ media, columns, square, border, crop, showCaptions,
           border={border}
           crop={crop}
           showCaptions={showCaptions}
+          onImageReplace={mediaLibrary ? (imageId) => setItemImage(index, imageId) : undefined}
           onCaptionChange={(caption) => {
             const newMedia = media.map((m, i) => i === index ? { ...m, caption: caption || undefined } : m);
             onChange({ type: sectionType, content: { columns, media: newMedia }, ...opts } as SectionContent);
@@ -146,6 +150,7 @@ function MediaGridItem({
   crop,
   showCaptions,
   onCaptionChange,
+  onImageReplace,
 }: {
   item: MediaReference;
   isEditMode: boolean;
@@ -154,6 +159,7 @@ function MediaGridItem({
   crop?: boolean;
   showCaptions?: boolean;
   onCaptionChange?: (caption: string) => void;
+  onImageReplace?: (imageId: string) => void;
 }) {
   const isDoDont = item.type === "doDontImage";
 
@@ -167,7 +173,7 @@ function MediaGridItem({
     : "";
 
   const itemAny = item as Record<string, unknown>;
-  const media = (
+  const resolvedMedia = (
     <ResolvedMedia
       imageId={item.imageId || undefined}
       src={itemAny.src as string | undefined}
@@ -178,6 +184,13 @@ function MediaGridItem({
       invertFrom={item.invertFrom}
     />
   );
+  const media = onImageReplace ? (
+    <ImageDropZone onImageSelected={onImageReplace} className="h-full w-full">
+      {resolvedMedia}
+    </ImageDropZone>
+  ) : (
+    resolvedMedia
+  );
 
   return (
     <figure>

package/src/components/sections/MediaGrid/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { LayoutGrid } from "lucide-react";
 import { MediaReferenceSchema } from "../../../schemas/shared";
 import { MediaGridOptionsSchema } from "../../../schemas/media-grid-options";
 import MediaGrid from "./MediaGrid";
@@ -16,6 +17,7 @@ const schema = z.object({
 export default defineSection({
   type: "media_grid",
   label: "Media Grid",
+  icon: <LayoutGrid size={18} />,
   schema,
   component: ({ content, options, onChange, openModal }) => (
     <MediaGrid

package/src/components/sections/Prose/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { AlignLeft } from "lucide-react";
 import Prose from "./Prose";
 import { stripHtmlToPlainText, truncate } from "../../../lib/text";
 
@@ -11,6 +12,7 @@ const schema = z.object({
 export default defineSection({
   type: "prose",
   label: "Prose",
+  icon: <AlignLeft size={18} />,
   schema,
   component: ({ content, onChange }) => (
     <Prose body={content.content.body} onChange={onChange ? (c) => onChange(c as typeof content) : undefined} />

package/src/components/sections/SplitContent/SplitContent.tsx

@@ -3,6 +3,7 @@ import { sanitizeHtml } from "../../../lib/sanitize";
 import { ResolvedMedia } from "../../primitives/ResolvedMedia";
 import { EditableRichText } from "../../primitives/EditableRichText";
 import { IconButton } from "../../shared/IconButton";
+import { ImageDropZone } from "../../primitives/ImageDropZone";
 import type { SectionContent } from "../../../schemas/sections";
 import { useMediaLibrary } from "../../shell/MediaLibraryContext";
 import { ImageIcon } from "lucide-react";
@@ -47,13 +48,13 @@ export default function SplitContent({ imageId, src, srcset, alt, body, border,
       imagePosition === "right" && "lg:flex-row-reverse",
     )}>
       <div className={cn("group/img relative flex-shrink-0 lg:w-1/2", border && "overflow-hidden rounded-md border border-base-200")}>
-        <ResolvedMedia
-          imageId={imageId}
-          src={src}
-          srcset={srcset}
-          alt={alt}
-          className="w-full"
-        />
+        {onChange && mediaLibrary ? (
+          <ImageDropZone onImageSelected={handleImageChange}>
+            <ResolvedMedia imageId={imageId} src={src} srcset={srcset} alt={alt} className="w-full" />
+          </ImageDropZone>
+        ) : (
+          <ResolvedMedia imageId={imageId} src={src} srcset={srcset} alt={alt} className="w-full" />
+        )}
         {onChange && mediaLibrary && (
           <div className="absolute top-1.5 right-1.5 z-10 opacity-0 transition-opacity group-hover/img:opacity-100">
             <IconButton

package/src/components/sections/SplitContent/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { Columns2 } from "lucide-react";
 import SplitContent from "./SplitContent";
 import { stripHtmlToPlainText, truncate } from "../../../lib/text";
 
@@ -18,6 +19,7 @@ const schema = z.object({
 export default defineSection({
   type: "split_content",
   label: "Split Content",
+  icon: <Columns2 size={18} />,
   schema,
   component: ({ content, options, onChange }) => (
     <SplitContent

package/src/components/sections/SubHeading/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { Heading2 } from "lucide-react";
 import { HeadingSection } from "../../primitives/HeadingSection";
 
 const schema = z.object({
@@ -10,6 +11,7 @@ const schema = z.object({
 export default defineSection({
   type: "sub_heading",
   label: "Sub Heading",
+  icon: <Heading2 size={18} />,
   schema,
   navRole: "h2",
   component: ({ content, onChange }) => (
@@ -17,7 +19,6 @@ export default defineSection({
       heading={content.content.heading}
       tag="h3"
       placeholder="Sub heading"
-      className="text-base-contrast"
       onChange={onChange ? (heading: string) => onChange({ ...content, content: { ...content.content, heading } }) : undefined}
     />
   ),

package/src/components/sections/SubSubHeading/index.tsx

@@ -1,5 +1,6 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
+import { Heading3 } from "lucide-react";
 import { HeadingSection } from "../../primitives/HeadingSection";
 
 const schema = z.object({
@@ -10,6 +11,7 @@ const schema = z.object({
 export default defineSection({
   type: "sub_sub_heading",
   label: "Sub Sub Heading",
+  icon: <Heading3 size={18} />,
   schema,
   navRole: "h3",
   component: ({ content, onChange }) => (
@@ -17,7 +19,6 @@ export default defineSection({
       heading={content.content.heading}
       tag="h4"
       placeholder="Sub sub heading"
-      className="text-lg font-bold text-base-contrast"
       onChange={onChange ? (heading: string) => onChange({ ...content, content: { ...content.content, heading } }) : undefined}
     />
   ),

package/src/components/shared/UploadRejectionAlert.tsx

@@ -0,0 +1,52 @@
+import { Button } from "./Button";
+import { formatFileSize } from "../../media/utils";
+
+export interface UploadRejection {
+  name: string;
+  reason: "size" | "type";
+}
+
+/**
+ * Compose a human-readable message from a list of rejected uploads.
+ * Inline drops only ever send one file, so the single-file branches are the
+ * common path; the multi-file branch keeps the helper reusable by the modal.
+ */
+export function formatRejections(files: UploadRejection[], maxFileSize?: number): string {
+  if (files.length === 0) return "";
+  if (files.length === 1) {
+    const f = files[0];
+    if (f.reason === "size") {
+      return maxFileSize
+        ? `"${f.name}" exceeds the ${formatFileSize(maxFileSize)} file size limit.`
+        : `"${f.name}" exceeds the file size limit.`;
+    }
+    return `"${f.name}" — images and videos only.`;
+  }
+  const sizeCount = files.filter((f) => f.reason === "size").length;
+  const typeCount = files.length - sizeCount;
+  const parts: string[] = [];
+  if (sizeCount > 0) parts.push(`${sizeCount} too large`);
+  if (typeCount > 0) parts.push(`${typeCount} not an image or video`);
+  return `${files.length} files rejected (${parts.join(", ")}).`;
+}
+
+export function UploadRejectionAlert({
+  message,
+  onDismiss,
+}: {
+  message: string;
+  onDismiss: () => void;
+}) {
+  return (
+    <div role="alert" className="flex flex-col items-center rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 lg:flex-row lg:justify-between dark:border-amber-900/50 dark:bg-amber-950/30">
+      <p className="mb-2 text-center text-sm text-amber-800 lg:mb-0 lg:text-left dark:text-amber-200">
+        {message}
+      </p>
+      <div className="flex shrink-0 items-center">
+        <Button variant="secondary" size="sm" type="button" onClick={onDismiss}>
+          Dismiss
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/shell/BugReportFAB.tsx

@@ -1,12 +1,6 @@
 import { useState, useCallback, useRef, useEffect } from "react";
-import { createClient } from "@supabase/supabase-js";
 import { EditorModal } from "./EditorModal";
 import { useEditorContext } from "./EditorContext";
-import { env } from "../../lib/env";
-
-interface Props {
-  siteId: string;
-}
 
 type Category = "Visual" | "Unexpected Behavior" | "Media / Media Library" | "Save / Publish" | "Feature Request" | "Other";
 
@@ -32,7 +26,7 @@ interface ImagePreview {
   name: string;
 }
 
-export function BugReportFAB({ siteId }: Props) {
+export function BugReportFAB() {
   const { isEditMode, historyState } = useEditorContext();
   const [isOpen, setIsOpen] = useState(false);
   const [category, setCategory] = useState<Category>("Visual");
@@ -149,26 +143,27 @@ export function BugReportFAB({ siteId }: Props) {
     setIsSubmitting(true);
 
     try {
-      const supabase = createClient(
-        env("SUPABASE_URL"),
-        env("SUPABASE_ANON_KEY"),
-      );
-
-      const { data: userData } = await supabase.auth.getUser();
-      const userId = userData?.user?.id ?? null;
-
-      const { error } = await supabase.from("bug_reports").insert({
-        site_id: siteId,
-        user_id: userId,
-        category,
-        is_critical: isCritical,
-        description: description.trim(),
-        images: images.map((img) => img.dataUri),
-        context: capturedContextRef.current,
+      const response = await fetch("/api/bug-report", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          category,
+          is_critical: isCritical,
+          description: description.trim(),
+          images: images.map((img) => img.dataUri),
+          context: capturedContextRef.current,
+        }),
       });
 
-      if (error) {
-        setSubmitError(error.message);
+      if (!response.ok) {
+        let message = "Submission failed";
+        try {
+          const data = await response.json();
+          if (data?.error) message = data.error;
+        } catch {
+          // No JSON body on the error response; keep the default message.
+        }
+        setSubmitError(message);
         return;
       }
 
@@ -180,7 +175,7 @@ export function BugReportFAB({ siteId }: Props) {
     } finally {
       setIsSubmitting(false);
     }
-  }, [siteId, category, isCritical, description, images, handleClose]);
+  }, [category, isCritical, description, images, handleClose]);
 
   const visible = isEditMode && historyState === null;