@carlonicora/nextjs-jsonapi 1.115.0 → 1.117.0

package/dist/{s3.service-CAL5dhGG.d.mts → s3.service-CihgBy97.d.mts}

@@ -1,7 +1,7 @@
 import { F as FeatureInterface } from './feature.interface-CXb1-vNq.mjs';
-import { e as RoleInterface, U as UserInterface, f as UserInput, c as CompanyInterface, b as CompanyInput, C as ContentInterface, N as NotificationInterface } from './notification.interface-DIxR23eS.mjs';
+import { e as RoleInterface, U as UserInterface, f as UserInput, c as CompanyInterface, b as CompanyInput, C as ContentInterface, N as NotificationInterface } from './notification.interface-B3kNUTZs.mjs';
 import { A as ApiDataInterface, J as JsonApiHydratedDataInterface } from './ApiDataInterface-BcZeXy5X.mjs';
-import { A as AuthInput, b as AuthInterface } from './auth.interface-CXBF8Mhi.mjs';
+import { A as AuthInput, b as AuthInterface } from './auth.interface-r3XKYOrQ.mjs';
 import { A as ApiRequestDataTypeInterface } from './ApiRequestDataTypeInterface-CYEcRUrh.mjs';
 
 declare enum HttpMethod {

package/dist/{s3.service-COLYvcW2.d.ts → s3.service-Cyvfk3qV.d.ts}

@@ -1,7 +1,7 @@
 import { F as FeatureInterface } from './feature.interface-BO25VLlx.js';
-import { e as RoleInterface, U as UserInterface, f as UserInput, c as CompanyInterface, b as CompanyInput, C as ContentInterface, N as NotificationInterface } from './notification.interface-C1T1C2ee.js';
+import { e as RoleInterface, U as UserInterface, f as UserInput, c as CompanyInterface, b as CompanyInput, C as ContentInterface, N as NotificationInterface } from './notification.interface-LKFmZndR.js';
 import { A as ApiDataInterface, J as JsonApiHydratedDataInterface } from './ApiDataInterface-BcZeXy5X.js';
-import { A as AuthInput, b as AuthInterface } from './auth.interface-8b601idJ.js';
+import { A as AuthInput, b as AuthInterface } from './auth.interface-yivTb46w.js';
 import { A as ApiRequestDataTypeInterface } from './ApiRequestDataTypeInterface-CYEcRUrh.js';
 
 declare enum HttpMethod {

package/dist/server/index.d.mts

@@ -2,12 +2,12 @@ import { A as ApiData } from '../ApiData-DPKNfY-9.mjs';
 import { M as ModuleWithPermissions, A as Action } from '../types-CQSjy7et.mjs';
 import { A as ApiRequestDataTypeInterface } from '../ApiRequestDataTypeInterface-CYEcRUrh.mjs';
 import { A as ApiResponseInterface } from '../ApiResponseInterface-rsXRL_Hn.mjs';
-export { A as ServerAuthService, C as ServerCompanyService, a as ServerContentService, F as ServerFeatureService, N as ServerNotificationService, P as ServerPushService, R as ServerRoleService, S as ServerS3Service, U as ServerUserService } from '../s3.service-CAL5dhGG.mjs';
+export { A as ServerAuthService, C as ServerCompanyService, a as ServerContentService, F as ServerFeatureService, N as ServerNotificationService, P as ServerPushService, R as ServerRoleService, S as ServerS3Service, U as ServerUserService } from '../s3.service-CihgBy97.mjs';
 import 'lucide-react';
 import '../ApiDataInterface-BcZeXy5X.mjs';
 import '../feature.interface-CXb1-vNq.mjs';
-import '../notification.interface-DIxR23eS.mjs';
-import '../auth.interface-CXBF8Mhi.mjs';
+import '../notification.interface-B3kNUTZs.mjs';
+import '../auth.interface-r3XKYOrQ.mjs';
 
 type CacheProfile = "seconds" | "minutes" | "hours" | "days" | "weeks" | "max" | "default";
 /**

package/dist/server/index.d.ts

@@ -2,12 +2,12 @@ import { A as ApiData } from '../ApiData-DPKNfY-9.js';
 import { M as ModuleWithPermissions, A as Action } from '../types-DHOxe8rc.js';
 import { A as ApiRequestDataTypeInterface } from '../ApiRequestDataTypeInterface-CYEcRUrh.js';
 import { A as ApiResponseInterface } from '../ApiResponseInterface-CWLvSCvS.js';
-export { A as ServerAuthService, C as ServerCompanyService, a as ServerContentService, F as ServerFeatureService, N as ServerNotificationService, P as ServerPushService, R as ServerRoleService, S as ServerS3Service, U as ServerUserService } from '../s3.service-COLYvcW2.js';
+export { A as ServerAuthService, C as ServerCompanyService, a as ServerContentService, F as ServerFeatureService, N as ServerNotificationService, P as ServerPushService, R as ServerRoleService, S as ServerS3Service, U as ServerUserService } from '../s3.service-Cyvfk3qV.js';
 import 'lucide-react';
 import '../ApiDataInterface-BcZeXy5X.js';
 import '../feature.interface-BO25VLlx.js';
-import '../notification.interface-C1T1C2ee.js';
-import '../auth.interface-8b601idJ.js';
+import '../notification.interface-LKFmZndR.js';
+import '../auth.interface-yivTb46w.js';
 
 type CacheProfile = "seconds" | "minutes" | "hours" | "days" | "weeks" | "max" | "default";
 /**

package/dist/server/index.js

@@ -15,7 +15,7 @@ var _chunkIOLU4ASDjs = require('../chunk-IOLU4ASD.js');
 
 
 
-var _chunkJ3DFHESBjs = require('../chunk-J3DFHESB.js');
+var _chunkS2PTWBN6js = require('../chunk-S2PTWBN6.js');
 require('../chunk-LXKSUWAV.js');
 require('../chunk-IBS6NI7D.js');
 
@@ -86,7 +86,7 @@ var ServerSession = class {
     if (!rawModules) return false;
     const modules = JSON.parse(_pako2.default.ungzip(Buffer.from(rawModules, "base64"), { to: "string" }));
     const selectedModule = modules.find((module) => module.id === params.module.moduleId);
-    return _chunkJ3DFHESBjs.checkPermissionsFromServer.call(void 0, {
+    return _chunkS2PTWBN6js.checkPermissionsFromServer.call(void 0, {
       module: params.module,
       action: params.action,
       data: params.data,
@@ -296,5 +296,5 @@ _chunk7QVYU63Ejs.__name.call(void 0, ServerJsonApiDelete, "ServerJsonApiDelete")
 
 
 
-exports.ServerAuthService = _chunkJ3DFHESBjs.AuthService; exports.ServerCompanyService = _chunkJ3DFHESBjs.CompanyService; exports.ServerContentService = _chunkJ3DFHESBjs.ContentService; exports.ServerFeatureService = _chunkJ3DFHESBjs.FeatureService; exports.ServerJsonApiDelete = ServerJsonApiDelete; exports.ServerJsonApiGet = ServerJsonApiGet; exports.ServerJsonApiPatch = ServerJsonApiPatch; exports.ServerJsonApiPost = ServerJsonApiPost; exports.ServerJsonApiPut = ServerJsonApiPut; exports.ServerNotificationService = _chunkJ3DFHESBjs.NotificationService; exports.ServerPushService = _chunkJ3DFHESBjs.PushService; exports.ServerRoleService = _chunkJ3DFHESBjs.RoleService; exports.ServerS3Service = _chunkJ3DFHESBjs.S3Service; exports.ServerSession = ServerSession; exports.ServerUserService = _chunkJ3DFHESBjs.UserService; exports.configureServerJsonApi = configureServerJsonApi; exports.getServerApiUrl = getServerApiUrl; exports.getServerAppUrl = getServerAppUrl; exports.getServerToken = _chunkYUO55Q5Ajs.getServerToken; exports.getServerTrackablePages = getServerTrackablePages; exports.invalidateCacheTag = invalidateCacheTag; exports.invalidateCacheTags = invalidateCacheTags; exports.serverRequest = _chunkIOLU4ASDjs.serverRequest;
+exports.ServerAuthService = _chunkS2PTWBN6js.AuthService; exports.ServerCompanyService = _chunkS2PTWBN6js.CompanyService; exports.ServerContentService = _chunkS2PTWBN6js.ContentService; exports.ServerFeatureService = _chunkS2PTWBN6js.FeatureService; exports.ServerJsonApiDelete = ServerJsonApiDelete; exports.ServerJsonApiGet = ServerJsonApiGet; exports.ServerJsonApiPatch = ServerJsonApiPatch; exports.ServerJsonApiPost = ServerJsonApiPost; exports.ServerJsonApiPut = ServerJsonApiPut; exports.ServerNotificationService = _chunkS2PTWBN6js.NotificationService; exports.ServerPushService = _chunkS2PTWBN6js.PushService; exports.ServerRoleService = _chunkS2PTWBN6js.RoleService; exports.ServerS3Service = _chunkS2PTWBN6js.S3Service; exports.ServerSession = ServerSession; exports.ServerUserService = _chunkS2PTWBN6js.UserService; exports.configureServerJsonApi = configureServerJsonApi; exports.getServerApiUrl = getServerApiUrl; exports.getServerAppUrl = getServerAppUrl; exports.getServerToken = _chunkYUO55Q5Ajs.getServerToken; exports.getServerTrackablePages = getServerTrackablePages; exports.invalidateCacheTag = invalidateCacheTag; exports.invalidateCacheTags = invalidateCacheTags; exports.serverRequest = _chunkIOLU4ASDjs.serverRequest;
 //# sourceMappingURL=index.js.map

package/dist/server/index.mjs

@@ -15,7 +15,7 @@ import {
   S3Service,
   UserService,
   checkPermissionsFromServer
-} from "../chunk-UBBTQUFB.mjs";
+} from "../chunk-M7XAKLSP.mjs";
 import "../chunk-AUXK7QSA.mjs";
 import "../chunk-C7C7VY4F.mjs";
 import {

package/dist/{useSocket-B1fMIr17.d.mts → useSocket-BSjn1Rlb.d.mts}

@@ -1,4 +1,4 @@
-import { N as NotificationInterface } from './notification.interface-DIxR23eS.mjs';
+import { N as NotificationInterface } from './notification.interface-B3kNUTZs.mjs';
 
 interface UseSocketOptions {
     token: string;

package/dist/{useSocket-BdJTBXKv.d.ts → useSocket-BsbaGPqE.d.ts}

@@ -1,4 +1,4 @@
-import { N as NotificationInterface } from './notification.interface-C1T1C2ee.js';
+import { N as NotificationInterface } from './notification.interface-LKFmZndR.js';
 
 interface UseSocketOptions {
     token: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "1.115.0",
+  "version": "1.117.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/src/components/forms/CommonDeleter.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { LoaderCircleIcon, Trash2Icon } from "lucide-react";
-import { useState } from "react";
+import { ReactNode, useState } from "react";
 import { useI18nRouter, useI18nTranslations } from "../../i18n";
 import {
   AlertDialog,
@@ -15,15 +15,37 @@ import {
 import { errorToast } from "../errors";
 
 type CommonDeleterProps = {
-  type: string;
+  type?: string;
+  /** Override the type-derived dialog title. */
+  title?: string;
+  /** Override the type-derived dialog subtitle. */
+  subtitle?: string;
+  /** Override the type-derived dialog body; rendered as-is. */
+  description?: ReactNode;
   deleteFunction: () => Promise<void>;
   redirectTo?: string;
   forceShow?: boolean;
   testId?: string;
+  /** Custom trigger element replacing the default trash button. */
+  trigger?: ReactNode;
   onSuccess?: () => void | Promise<void>;
+  /** Fired after a successful delete, in addition to redirect/onSuccess. */
+  propagateChanges?: () => void;
 };
 
-export function CommonDeleter({ deleteFunction, redirectTo, type, forceShow, testId, onSuccess }: CommonDeleterProps) {
+export function CommonDeleter({
+  deleteFunction,
+  redirectTo,
+  type,
+  title,
+  subtitle,
+  description,
+  forceShow,
+  testId,
+  trigger,
+  onSuccess,
+  propagateChanges,
+}: CommonDeleterProps) {
   const t = useI18nTranslations();
   const router = useI18nRouter();
   const [open, setOpen] = useState<boolean>(forceShow || false);
@@ -37,6 +59,7 @@ export function CommonDeleter({ deleteFunction, redirectTo, type, forceShow, tes
       setOpen(false);
       if (onSuccess) await onSuccess();
       else if (redirectTo) router.push(redirectTo);
+      if (propagateChanges) propagateChanges();
     } catch (error) {
       errorToast({ title: t(`common.errors.delete`), error: error });
     }
@@ -47,28 +70,36 @@ export function CommonDeleter({ deleteFunction, redirectTo, type, forceShow, tes
     <AlertDialog open={open} onOpenChange={setOpen}>
       {forceShow ? null : (
         <AlertDialogTrigger>
-          <Button
-            render={<div />}
-            nativeButton={false}
-            size="sm"
-            variant={"ghost"}
-            className="text-muted-foreground hover:text-destructive"
-            data-testid={testId}
-          >
-            <Trash2Icon />
-          </Button>
+          {trigger || (
+            <Button
+              render={<div />}
+              nativeButton={false}
+              size="sm"
+              variant={"ghost"}
+              className="text-muted-foreground hover:text-destructive"
+              data-testid={testId}
+            >
+              <Trash2Icon />
+            </Button>
+          )}
         </AlertDialogTrigger>
       )}
       <AlertDialogContent className={`flex max-h-[70vh] max-w-3xl flex-col overflow-y-auto`}>
         <AlertDialogHeader>
-          <AlertDialogTitle>{t(`common.delete.title`, { type: t(`entities.${type}`, { count: 1 }) })}</AlertDialogTitle>
+          <AlertDialogTitle>
+            {title ?? t(`common.delete.title`, { type: t(`entities.${type}`, { count: 1 }) })}
+          </AlertDialogTitle>
           <AlertDialogDescription>
-            {t(`common.delete.subtitle`, { type: t(`entities.${type}`, { count: 1 }) })}
+            {subtitle ?? t(`common.delete.subtitle`, { type: t(`entities.${type}`, { count: 1 }) })}
           </AlertDialogDescription>
         </AlertDialogHeader>
-        <div className="text-destructive p-4 text-sm">
-          {t(`common.delete.description`, { type: t(`entities.${type}`, { count: 1 }) })}
-        </div>
+        {description !== undefined ? (
+          description
+        ) : (
+          <div className="text-destructive p-4 text-sm">
+            {t(`common.delete.description`, { type: t(`entities.${type}`, { count: 1 }) })}
+          </div>
+        )}
         <div className="flex justify-end">
           <Button
             className="mr-2"

package/src/components/forms/CommonEditorButtons.tsx

@@ -9,6 +9,7 @@ type CommonEditorButtonsProps = {
   setOpen: (open: boolean) => void;
   hideSubmit?: boolean;
   centerButtons?: ReactNode;
+  buttonTitle?: string;
 };
 export function CommonEditorButtons({
   isEdit,
@@ -17,6 +18,7 @@ export function CommonEditorButtons({
   setOpen,
   hideSubmit,
   centerButtons,
+  buttonTitle,
 }: CommonEditorButtonsProps) {
   const t = useTranslations();
 
@@ -31,7 +33,7 @@ export function CommonEditorButtons({
 
         {!hideSubmit ? (
           <Button type="submit" disabled={form.formState.isSubmitting || disabled} data-testid={`modal-button-create`}>
-            {isEdit ? t(`ui.buttons.confirm_update`) : t(`ui.buttons.confirm_create`)}
+            {buttonTitle ? buttonTitle : isEdit ? t(`ui.buttons.confirm_update`) : t(`ui.buttons.confirm_create`)}
           </Button>
         ) : (
           <div />
@@ -54,7 +56,7 @@ export function CommonEditorButtons({
 
       {!hideSubmit && (
         <Button type="submit" disabled={form.formState.isSubmitting || disabled} data-testid={`modal-button-create`}>
-          {isEdit ? t(`ui.buttons.confirm_update`) : t(`ui.buttons.confirm_create`)}
+          {buttonTitle ? buttonTitle : isEdit ? t(`ui.buttons.confirm_update`) : t(`ui.buttons.confirm_create`)}
         </Button>
       )}
     </div>

package/src/components/forms/CommonEditorHeader.tsx

@@ -6,29 +6,35 @@ import { DialogDescription, DialogHeader, DialogTitle } from "../../shadcnui";
 type CommonEditorHeaderProps = {
   type: string;
   name?: string;
+  title?: string;
+  description?: string;
 };
 
-export function CommonEditorHeader({ type, name }: CommonEditorHeaderProps) {
+export function CommonEditorHeader({ type, name, title, description }: CommonEditorHeaderProps) {
   const t = useTranslations();
 
   return (
     <DialogHeader>
       <DialogTitle>
-        {name
-          ? t(`common.edit.update.title`, {
-              type: type,
-            })
-          : t(`common.edit.create.title`, { type: type })}
+        {title
+          ? title
+          : name
+            ? t(`common.edit.update.title`, {
+                type: type,
+              })
+            : t(`common.edit.create.title`, { type: type })}
       </DialogTitle>
       <DialogDescription>
-        {name
-          ? t(`common.edit.update.description`, {
-              type: type,
-              name: name,
-            })
-          : t(`common.edit.create.description`, {
-              type: type,
-            })}
+        {description
+          ? description
+          : name
+            ? t(`common.edit.update.description`, {
+                type: type,
+                name: name,
+              })
+            : t(`common.edit.create.description`, {
+                type: type,
+              })}
       </DialogDescription>
     </DialogHeader>
   );

package/src/components/forms/CommonEditorTrigger.tsx

@@ -1,18 +1,23 @@
 "use client";
 
-import { PencilIcon } from "lucide-react";
+import { PencilIcon, PlusCircleIcon } from "lucide-react";
 
 import { useTranslations } from "next-intl";
+import React from "react";
 import { Button, DialogTrigger } from "../../shadcnui";
 
-type CommonEditorTriggerProps = { isEdit: boolean; edit?: string; create?: string; testId?: string };
+type CommonEditorTriggerProps = { isEdit: boolean; edit?: string; create?: string; testId?: string; title?: string };
 
-export function CommonEditorTrigger({ isEdit, edit: _edit, create, testId }: CommonEditorTriggerProps) {
+export function CommonEditorTrigger({ isEdit, edit: _edit, create, testId, title }: CommonEditorTriggerProps) {
   const t = useTranslations();
 
   return (
     <DialogTrigger>
-      {isEdit ? (
+      {title ? (
+        <Button render={<div />} nativeButton={false} size="sm" variant={`outline`} data-testid={testId}>
+          {title}
+        </Button>
+      ) : isEdit ? (
         <Button
           render={<div />}
           nativeButton={false}
@@ -31,3 +36,12 @@ export function CommonEditorTrigger({ isEdit, edit: _edit, create, testId }: Com
     </DialogTrigger>
   );
 }
+
+export const CommonAddTrigger = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<typeof Button>>(
+  (props, ref) => (
+    <Button ref={ref} variant="ghost" size="sm" className="text-muted-foreground" {...props}>
+      <PlusCircleIcon />
+    </Button>
+  ),
+);
+CommonAddTrigger.displayName = "CommonAddTrigger";

package/src/components/forms/DateRangeSelector.tsx

@@ -2,6 +2,7 @@
 
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { DateRange } from "react-day-picker";
 import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "../../shadcnui";
@@ -14,6 +15,7 @@ type DateRangeSelectorProps = {
 };
 
 export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviousMonth }: DateRangeSelectorProps) {
+  const t = useTranslations();
   const [date, setDate] = useState<DateRange | undefined>(
     avoidSettingDates
       ? undefined
@@ -24,6 +26,12 @@ export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviou
   );
 
   const [open, setOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  // Prevent hydration mismatch by only rendering Popover after mount
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   const [prevRange, setPrevRange] = useState<DateRange | undefined>(date);
   useEffect(() => {
@@ -53,28 +61,56 @@ export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviou
     }
   };
 
+  // Show placeholder button during SSR to prevent hydration mismatch
+  if (!mounted) {
+    return (
+      <div className={cn("grid gap-2")}>
+        <Button
+          id="date"
+          variant={"outline"}
+          className={cn("w-[300px] justify-start text-left font-normal", !date && "text-muted-foreground")}
+        >
+          <CalendarIcon />
+          {date?.from ? (
+            date.to ? (
+              <>
+                {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
+              </>
+            ) : (
+              format(date.from, "LLL dd, y")
+            )
+          ) : (
+            <span>{t("ui.labels.pick_a_date")}</span>
+          )}
+        </Button>
+      </div>
+    );
+  }
+
   return (
     <div className={cn("grid gap-2")}>
       <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger>
-          <Button
-            id="date"
-            variant={"outline"}
-            className={cn("w-[300px] justify-start text-left font-normal", !date && "text-muted-foreground")}
-          >
-            <CalendarIcon />
-            {date?.from ? (
-              date.to ? (
-                <>
-                  {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
-                </>
-              ) : (
-                format(date.from, "LLL dd, y")
-              )
+        <PopoverTrigger
+          render={
+            <Button
+              id="date"
+              variant={"outline"}
+              className={cn("w-[300px] justify-start text-left font-normal", !date && "text-muted-foreground")}
+            />
+          }
+        >
+          <CalendarIcon />
+          {date?.from ? (
+            date.to ? (
+              <>
+                {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
+              </>
             ) : (
-              <span>Pick a date</span>
-            )}
-          </Button>
+              format(date.from, "LLL dd, y")
+            )
+          ) : (
+            <span>{t("ui.labels.pick_a_date")}</span>
+          )}
         </PopoverTrigger>
         <PopoverContent className="w-auto p-0" align="start">
           <div className="flex flex-col gap-2 p-2">
@@ -100,7 +136,7 @@ export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviou
               className="cursor-pointer"
               disabled={!date}
             >
-              Clear
+              {t("ui.buttons.clear")}
             </Button>
           </div>
         </PopoverContent>

package/src/components/forms/EditorSheet.tsx

@@ -62,6 +62,17 @@ export type EditorSheetProps<T extends FieldValues> = {
   dialogOpen?: boolean;
   onDialogOpenChange?: (open: boolean) => void;
 
+  /** Render a fully custom footer instead of the default CommonEditorButtons.
+   *  `setOpen` is the dirty-checked open handler (shows the discard dialog);
+   *  `closeWithoutConfirm` is the raw setter that bypasses the discard dialog
+   *  (use after a successful submit when no confirmation is needed). */
+  renderFooter?: (props: {
+    form: UseFormReturn<T>;
+    isEdit: boolean;
+    setOpen: (open: boolean) => void;
+    closeWithoutConfirm: (open: boolean) => void;
+  }) => ReactNode;
+
   children: ReactNode;
 };
 
@@ -90,6 +101,7 @@ export function EditorSheet<T extends FieldValues>({
   onClose,
   dialogOpen,
   onDialogOpenChange,
+  renderFooter,
   children,
 }: EditorSheetProps<T>) {
   const t = useTranslations();
@@ -147,6 +159,7 @@ export function EditorSheet<T extends FieldValues>({
     <>
       <Sheet open={open} onOpenChange={handleOpenChange}>
         {dialogOpen === undefined &&
+          forceShow === undefined &&
           (trigger ? (
             <SheetTrigger>{trigger}</SheetTrigger>
           ) : (
@@ -184,17 +197,31 @@ export function EditorSheet<T extends FieldValues>({
             </SheetDescription>
           </SheetHeader>
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(wrappedOnSubmit)} className="flex min-h-0 flex-1 flex-col">
+            <form
+              onSubmit={(e) => {
+                // The Sheet content is portaled, but React synthetic events still
+                // bubble up the React tree — so without stopPropagation an inner
+                // EditorSheet's submit also triggers the outer form's submit
+                // (e.g. a create dialog opened from within another editor).
+                e.stopPropagation();
+                return form.handleSubmit(wrappedOnSubmit)(e);
+              }}
+              className="flex min-h-0 flex-1 flex-col"
+            >
               <div className="flex-1 overflow-y-auto px-6 py-4">{children}</div>
               <SheetFooter className="shrink-0 border-t px-6 py-4">
-                <CommonEditorButtons
-                  form={form}
-                  setOpen={handleOpenChange}
-                  isEdit={isEdit}
-                  disabled={disabled}
-                  hideSubmit={hideSubmit}
-                  centerButtons={centerButtons}
-                />
+                {renderFooter ? (
+                  renderFooter({ form, isEdit, setOpen: handleOpenChange, closeWithoutConfirm: setOpen })
+                ) : (
+                  <CommonEditorButtons
+                    form={form}
+                    setOpen={handleOpenChange}
+                    isEdit={isEdit}
+                    disabled={disabled}
+                    hideSubmit={hideSubmit}
+                    centerButtons={centerButtons}
+                  />
+                )}
               </SheetFooter>
             </form>
           </Form>

package/src/components/forms/FileUploader.tsx

@@ -10,12 +10,13 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
-import { DropzoneOptions, DropzoneState, FileRejection, useDropzone } from "react-dropzone";
+import { Accept, DropzoneOptions, DropzoneState, FileRejection, useDropzone } from "react-dropzone";
 import { showError } from "../../utils/toast";
-import { buttonVariants, Input } from "../../shadcnui";
+import { buttonVariants, Input, Tooltip, TooltipContent, TooltipTrigger } from "../../shadcnui";
 import { cn } from "../../utils";
 
 export type { DropzoneOptions } from "react-dropzone";
@@ -31,6 +32,7 @@ type FileUploaderContextType = {
   setActiveIndex: Dispatch<SetStateAction<number>>;
   orientation: "horizontal" | "vertical";
   direction: DirectionOptions;
+  accept?: Accept;
 };
 
 const FileUploaderContext = createContext<FileUploaderContextType | null>(null);
@@ -195,6 +197,7 @@ export const FileUploader = forwardRef<HTMLDivElement, FileUploaderProps & React
           setActiveIndex,
           orientation,
           direction,
+          accept: dropzoneOptions.accept,
         }}
       >
         <div
@@ -283,35 +286,62 @@ FileUploaderItem.displayName = "FileUploaderItem";
 
 export const FileInput = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, children, ...props }, ref) => {
-    const { dropzoneState, isFileTooBig, isLOF } = useFileUpload();
+    const { dropzoneState, isFileTooBig, isLOF, accept } = useFileUpload();
+    const t = useTranslations();
     const rootProps = isLOF ? {} : dropzoneState.getRootProps();
     // Get isDragActive from the context for FileInput as well, to ensure it can react if needed, or to simplify its own styling.
     const { isDragActive: parentIsDragActive } = dropzoneState;
 
+    const acceptedLabels = useMemo(() => {
+      if (!accept) return null;
+      const extensions = new Set<string>();
+      let hasWildcardImages = false;
+      for (const [mime, exts] of Object.entries(accept)) {
+        if (mime === "image/*") hasWildcardImages = true;
+        for (const ext of exts) extensions.add(ext);
+      }
+      const labels = Array.from(extensions).sort();
+      if (hasWildcardImages) labels.push(t("ui.labels.images"));
+      return labels.length > 0 ? labels : null;
+    }, [accept, t]);
+
+    const dropArea = (
+      <div
+        className={cn(
+          "w-full rounded-lg duration-300 ease-in-out",
+          // Simpler border logic: if parent is drag-active, it controls the border.
+          // Otherwise, FileInput can show its own accept/reject/default border.
+          {
+            "border-green-500": dropzoneState.isDragAccept && !parentIsDragActive,
+            "border-red-500": (dropzoneState.isDragReject || isFileTooBig) && !parentIsDragActive,
+            "border-gray-300":
+              !dropzoneState.isDragAccept && !dropzoneState.isDragReject && !isFileTooBig && !parentIsDragActive,
+          },
+          // className from props should be last to allow overrides if necessary
+          className,
+        )}
+        {...rootProps}
+      >
+        {children}
+      </div>
+    );
+
     return (
       <div
         ref={ref}
         {...props}
         className={cn(`relative w-full ${isLOF ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`, className)}
       >
-        <div
-          className={cn(
-            "w-full rounded-lg duration-300 ease-in-out",
-            // Simpler border logic: if parent is drag-active, it controls the border.
-            // Otherwise, FileInput can show its own accept/reject/default border.
-            {
-              "border-green-500": dropzoneState.isDragAccept && !parentIsDragActive,
-              "border-red-500": (dropzoneState.isDragReject || isFileTooBig) && !parentIsDragActive,
-              "border-gray-300":
-                !dropzoneState.isDragAccept && !dropzoneState.isDragReject && !isFileTooBig && !parentIsDragActive,
-            },
-            // className from props should be last to allow overrides if necessary
-            className,
-          )}
-          {...rootProps}
-        >
-          {children}
-        </div>
+        {acceptedLabels ? (
+          <Tooltip>
+            <TooltipTrigger render={dropArea} />
+            <TooltipContent>
+              {t("ui.labels.accepted_file_types")}: {acceptedLabels.join(", ")}
+            </TooltipContent>
+          </Tooltip>
+        ) : (
+          dropArea
+        )}
         <Input
           ref={dropzoneState.inputRef}
           disabled={isLOF}