@simplysm/solid 13.0.71 → 13.0.74

package/src/components/disclosure/Dialog.tsx

@@ -21,7 +21,7 @@ import { createMountTransition } from "../../hooks/createMountTransition";
 import { startPointerDrag } from "../../helpers/startPointerDrag";
 import { createSlotComponent } from "../../helpers/createSlotComponent";
 import { mergeStyles } from "../../helpers/mergeStyles";
-import { useI18nOptional } from "../../providers/i18n/I18nContext";
+import { useI18n } from "../../providers/i18n/I18nContext";
 import { Icon } from "../display/Icon";
 import { borderSubtle } from "../../styles/tokens.styles";
 import { DialogDefaultsContext } from "./DialogContext";
@@ -39,7 +39,7 @@ const DialogHeader = createSlotComponent(DialogSlotsContext, (ctx) => ctx.setHea
 const DialogAction = createSlotComponent(DialogSlotsContext, (ctx) => ctx.setAction);
 
 export interface DialogProps {
-  /** Modal open state */
+  /** Dialog open state */
   open?: boolean;
   /** Callback when open state changes */
   onOpenChange?: (open: boolean) => void;
@@ -146,7 +146,7 @@ interface DialogComponent extends ParentComponent<DialogProps> {
 
 export const Dialog: DialogComponent = (props) => {
   const dialogDefaults = useContext(DialogDefaultsContext);
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
 
   const [local] = splitProps(props, [
     "open",
@@ -479,10 +479,10 @@ export const Dialog: DialogComponent = (props) => {
     <Show when={mounted()}>
       <Portal>
         <DialogSlotsContext.Provider value={{ setHeader, setAction }}>
-          <div ref={setWrapperRef} data-modal class={wrapperClass()}>
+          <div ref={setWrapperRef} data-dialog class={wrapperClass()}>
             {/* Backdrop */}
             <Show when={!local.float}>
-              <div data-modal-backdrop class={backdropClass()} onClick={handleBackdropClick} />
+              <div data-dialog-backdrop class={backdropClass()} onClick={handleBackdropClick} />
             </Show>
 
             {/* Dialog */}
@@ -490,7 +490,7 @@ export const Dialog: DialogComponent = (props) => {
               ref={(el) => {
                 dialogRef = el;
               }}
-              data-modal-dialog
+              data-dialog-panel
               role="dialog"
               aria-modal={local.float ? undefined : true}
               aria-labelledby={hasHeader() ? headerId : undefined}
@@ -503,7 +503,7 @@ export const Dialog: DialogComponent = (props) => {
               {/* Header */}
               <Show when={hasHeader()}>
                 <div
-                  data-modal-header
+                  data-dialog-header
                   class={clsx(headerClass(), "touch-none")}
                   style={
                     typeof local.headerStyle === "string"
@@ -518,10 +518,10 @@ export const Dialog: DialogComponent = (props) => {
                   <Show when={action()}>{action()!()}</Show>
                   <Show when={local.closable ?? true}>
                     <Button
-                      data-modal-close
+                      data-dialog-close
                       size={"sm"}
                       variant={"ghost"}
-                      aria-label={i18n?.t("dialog.close") ?? "Close dialog"}
+                      aria-label={i18n.t("dialog.close")}
                       onClick={handleCloseClick}
                     >
                       <Icon icon={IconX} />
@@ -531,7 +531,7 @@ export const Dialog: DialogComponent = (props) => {
               </Show>
 
               {/* Content */}
-              <div data-modal-content class={dialogContentClass}>
+              <div data-dialog-content class={dialogContentClass}>
                 {local.children}
               </div>
 

package/src/components/disclosure/dialogZIndex.ts

@@ -2,7 +2,7 @@
  * Dialog z-index registry
  *
  * Manages z-index of open Dialogs to prevent infinite increase.
- * Base starting value is 2000 (same as tailwind z-modal), uses only as many as there are open Dialogs.
+ * Base starting value is 2000 (same as tailwind z-dialog), uses only as many as there are open Dialogs.
  */
 
 const BASE_Z = 2000;

package/src/components/features/crud-detail/CrudDetail.tsx

@@ -22,7 +22,7 @@ import { createTopbarActions, TopbarContext } from "../../layout/topbar/TopbarCo
 import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
 import { Dialog } from "../../disclosure/Dialog";
 import { createEventListener } from "@solid-primitives/event-listener";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import clsx from "clsx";
 import {
   IconCheck,
@@ -64,11 +64,11 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
   ]);
 
   const noti = useNotification();
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
   const topbarCtx = useContext(TopbarContext);
   const dialogInstance = useDialogInstance<boolean>();
 
-  const isModal = dialogInstance !== undefined;
+  const isInDialog = dialogInstance !== undefined;
 
   const canEdit = () => local.editable ?? true;
 
@@ -96,7 +96,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
       originalData = objClone(result.data);
       setInfo(result.info);
     } catch (err) {
-      noti.error(err, i18n?.t("crudDetail.lookupFailed") ?? "Lookup failed");
+      noti.error(err, i18n.t("crudDetail.lookupFailed"));
     }
     setBusyCount((c) => c - 1);
     setReady(true);
@@ -119,7 +119,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
   // -- Refresh --
   async function handleRefresh() {
     if (hasChanges()) {
-      if (!confirm(i18n?.t("crudDetail.discardChanges") ?? "Discard changes?")) return;
+      if (!confirm(i18n.t("crudDetail.discardChanges"))) return;
     }
     await doLoad();
   }
@@ -131,7 +131,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
 
     const currentInfo = info();
     if (currentInfo && !currentInfo.isNew && !hasChanges()) {
-      noti.info(i18n?.t("crudDetail.notice") ?? "Notice", i18n?.t("crudDetail.noChanges") ?? "No changes to save.");
+      noti.info(i18n.t("crudDetail.notice"), i18n.t("crudDetail.noChanges"));
       return;
     }
 
@@ -139,7 +139,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
     try {
       const result = await local.submit(objClone(unwrap(data)));
       if (result) {
-        noti.success(i18n?.t("crudDetail.saveCompleted") ?? "Save completed", i18n?.t("crudDetail.saveSuccess") ?? "Saved successfully.");
+        noti.success(i18n.t("crudDetail.saveCompleted"), i18n.t("crudDetail.saveSuccess"));
         if (dialogInstance) {
           dialogInstance.close(true);
         } else {
@@ -147,7 +147,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         }
       }
     } catch (err) {
-      noti.error(err, i18n?.t("crudDetail.saveFailed") ?? "Save failed");
+      noti.error(err, i18n.t("crudDetail.saveFailed"));
     }
     setBusyCount((c) => c - 1);
   }
@@ -171,7 +171,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
     try {
       const result = await local.toggleDelete(del);
       if (result) {
-        noti.success(del ? (i18n?.t("crudDetail.deleteCompleted") ?? "Delete completed") : (i18n?.t("crudDetail.restoreCompleted") ?? "Restore completed"), del ? (i18n?.t("crudDetail.deleteSuccess") ?? "Deleted successfully.") : (i18n?.t("crudDetail.restoreSuccess") ?? "Restored successfully."));
+        noti.success(del ? i18n.t("crudDetail.deleteCompleted") : i18n.t("crudDetail.restoreCompleted"), del ? i18n.t("crudDetail.deleteSuccess") : i18n.t("crudDetail.restoreSuccess"));
         if (dialogInstance) {
           dialogInstance.close(true);
         } else {
@@ -179,7 +179,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         }
       }
     } catch (err) {
-      noti.error(err, del ? (i18n?.t("crudDetail.deleteFailed") ?? "Delete failed") : (i18n?.t("crudDetail.restoreFailed") ?? "Restore failed"));
+      noti.error(err, del ? i18n.t("crudDetail.deleteFailed") : i18n.t("crudDetail.restoreFailed"));
     }
     setBusyCount((c) => c - 1);
   }
@@ -211,7 +211,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
             onClick={() => formRef?.requestSubmit()}
           >
             <Icon icon={IconDeviceFloppy} class="mr-1" />
-            {i18n?.t("crudDetail.save") ?? "Save"}
+            {i18n.t("crudDetail.save")}
           </Button>
         </Show>
         <Show
@@ -227,13 +227,13 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
               onClick={() => void handleToggleDelete()}
             >
               <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
-              {info()!.isDeleted ? (i18n?.t("crudDetail.restore") ?? "Restore") : (i18n?.t("crudDetail.delete") ?? "Delete")}
+              {info()!.isDeleted ? i18n.t("crudDetail.restore") : i18n.t("crudDetail.delete")}
             </Button>
           )}
         </Show>
         <Button size="lg" variant="ghost" theme="info" onClick={() => void handleRefresh()}>
           <Icon icon={IconRefresh} class="mr-1" />
-          {i18n?.t("crudDetail.refresh") ?? "Refresh"}
+          {i18n.t("crudDetail.refresh")}
         </Button>
       </>
     ));
@@ -272,8 +272,8 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
   // -- Render --
   return (
     <>
-      {/* Modal mode: Dialog.Action (refresh button in header) */}
-      <Show when={isModal}>
+      {/* Dialog mode: Dialog.Action (refresh button in header) */}
+      <Show when={isInDialog}>
         <Dialog.Action>
           <Button size={"sm"} variant={"ghost"} onClick={() => void handleRefresh()}>
             <Icon icon={IconRefresh} />
@@ -287,9 +287,9 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         class={clsx("flex h-full flex-col gap-2", local.class)}
       >
         {/* Toolbar */}
-        <Show when={(!isModal && !topbarCtx) || defs().tools}>
+        <Show when={(!isInDialog && !topbarCtx) || defs().tools}>
           <div class="flex gap-2 pb-0">
-            <Show when={!topbarCtx && !isModal}>
+            <Show when={!topbarCtx && !isInDialog}>
               <Show when={canEdit() && local.submit}>
                 <Button
                   size="sm"
@@ -298,7 +298,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
                   onClick={() => formRef?.requestSubmit()}
                 >
                   <Icon icon={IconDeviceFloppy} class="mr-1" />
-                  {i18n?.t("crudDetail.save") ?? "Save"}
+                  {i18n.t("crudDetail.save")}
                 </Button>
               </Show>
               <Show
@@ -318,13 +318,13 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
                     onClick={() => void handleToggleDelete()}
                   >
                     <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
-                    {info()!.isDeleted ? (i18n?.t("crudDetail.restore") ?? "Restore") : (i18n?.t("crudDetail.delete") ?? "Delete")}
+                    {info()!.isDeleted ? i18n.t("crudDetail.restore") : i18n.t("crudDetail.delete")}
                   </Button>
                 )}
               </Show>
               <Button size="sm" theme="info" variant="ghost" onClick={() => void handleRefresh()}>
                 <Icon icon={IconRefresh} class="mr-1" />
-                {i18n?.t("crudDetail.refresh") ?? "Refresh"}
+                {i18n.t("crudDetail.refresh")}
               </Button>
             </Show>
             <Show when={defs().tools}>{(toolsDef) => toolsDef().children}</Show>
@@ -343,7 +343,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         <Show when={info()?.lastModifiedAt}>
           {(_) => (
             <div class="px-2 pb-1 text-xs text-base-400">
-              {i18n?.t("crudDetail.lastModified") ?? "Last modified"}: {info()!.lastModifiedAt!.toFormatString("yyyy-MM-dd HH:mm")}
+              {i18n.t("crudDetail.lastModified")}: {info()!.lastModifiedAt!.toFormatString("yyyy-MM-dd HH:mm")}
               <Show when={info()?.lastModifiedBy}> ({info()!.lastModifiedBy})</Show>
             </div>
           )}
@@ -352,8 +352,8 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
         {/* After (outside form) */}
         <Show when={defs().after}>{(afterDef) => afterDef().children}</Show>
 
-        {/* Modal mode: bottom bar */}
-        <Show when={isModal && canEdit()}>
+        {/* Dialog mode: bottom bar */}
+        <Show when={isInDialog && canEdit()}>
           <div class="flex gap-2 border-t border-base-200 px-3 py-1.5">
             <div class="flex-1" />
             <Show
@@ -362,7 +362,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
               {(_) => (
                 <Button variant={"solid"} theme="danger" onClick={() => void handleToggleDelete()}>
                   <Icon icon={info()!.isDeleted ? IconTrashOff : IconTrash} class="mr-1" />
-                  {info()!.isDeleted ? (i18n?.t("crudDetail.restore") ?? "Restore") : (i18n?.t("crudDetail.delete") ?? "Delete")}
+                  {info()!.isDeleted ? i18n.t("crudDetail.restore") : i18n.t("crudDetail.delete")}
                 </Button>
               )}
             </Show>
@@ -374,7 +374,7 @@ const CrudDetailBase = <TData extends object>(props: CrudDetailProps<TData>) =>
                 class={"gap-1"}
               >
                 <Icon icon={IconCheck} />
-                {i18n?.t("crudDetail.confirm") ?? "Confirm"}
+                {i18n.t("crudDetail.confirm")}
               </Button>
             </Show>
           </div>

package/src/components/features/crud-sheet/CrudSheet.tsx

@@ -21,7 +21,7 @@ import { DataSheet } from "../../data/sheet/DataSheet";
 import { DataSheetColumn } from "../../data/sheet/DataSheetColumn";
 import { BusyContainer } from "../../feedback/busy/BusyContainer";
 import { useNotification } from "../../feedback/notification/NotificationContext";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import { Button } from "../../form-control/Button";
 import { Icon } from "../../display/Icon";
 import { FormGroup } from "../../layout/FormGroup";
@@ -85,7 +85,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     "items",
     "onItemsChange",
     "inlineEdit",
-    "modalEdit",
+    "dialogEdit",
     "excel",
     "selectMode",
     "onSelect",
@@ -95,12 +95,12 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   ]);
 
   const noti = useNotification();
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
   const topbarCtx = useContext(TopbarContext);
   const dialogInstance = useDialogInstance();
-  const isModal = dialogInstance !== undefined;
+  const isInDialog = dialogInstance !== undefined;
   const isSelectMode = () => local.selectMode != null;
-  const canEdit = () => (isSelectMode() ? false : (local.editable ?? true));
+  const canEdit = () => (isInDialog && isSelectMode() ? false : (local.editable ?? true));
 
   // -- Children Resolution --
   const resolved = children(() => local.children);
@@ -168,7 +168,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     try {
       await refresh();
     } catch (err) {
-      noti.error(err, i18n?.t("crudSheet.lookupFailed") ?? "Lookup failed");
+      noti.error(err, i18n.t("crudSheet.lookupFailed"));
     }
     setBusyCount((c) => c - 1);
     setReady(true);
@@ -192,7 +192,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
   function checkIgnoreChanges(): boolean {
     if (!local.inlineEdit) return true;
     if (getItemDiffs().length === 0) return true;
-    return confirm(i18n?.t("crudSheet.discardChanges") ?? "You have unsaved changes. Discard them?");
+    return confirm(i18n.t("crudSheet.discardChanges"));
   }
 
   // -- Filter --
@@ -243,18 +243,18 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     const diffs = getItemDiffs();
 
     if (diffs.length === 0) {
-      noti.info(i18n?.t("crudSheet.notice") ?? "Notice", i18n?.t("crudSheet.noChanges") ?? "No changes to save.");
+      noti.info(i18n.t("crudSheet.notice"), i18n.t("crudSheet.noChanges"));
       return;
     }
 
     setBusyCount((c) => c + 1);
     try {
       await local.inlineEdit.submit(diffs);
-      noti.success(i18n?.t("crudSheet.saveCompleted") ?? "Save completed", i18n?.t("crudSheet.saveSuccess") ?? "Saved successfully.");
+      noti.success(i18n.t("crudSheet.saveCompleted"), i18n.t("crudSheet.saveSuccess"));
       await refresh();
       local.onSubmitted?.();
     } catch (err) {
-      noti.error(err, i18n?.t("crudSheet.saveFailed") ?? "Save failed");
+      noti.error(err, i18n.t("crudSheet.saveFailed"));
     }
     setBusyCount((c) => c - 1);
   }
@@ -264,47 +264,47 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
     await handleSave();
   }
 
-  // -- Modal Edit --
+  // -- Dialog Edit --
   async function handleEditItem(item?: TItem) {
-    if (!local.modalEdit) return;
-    const result = await local.modalEdit.editItem(item);
+    if (!local.dialogEdit) return;
+    const result = await local.dialogEdit.editItem(item);
     if (!result) return;
 
     setBusyCount((c) => c + 1);
     try {
       await refresh();
     } catch (err) {
-      noti.error(err, i18n?.t("crudSheet.lookupFailed") ?? "Lookup failed");
+      noti.error(err, i18n.t("crudSheet.lookupFailed"));
     }
     setBusyCount((c) => c - 1);
   }
 
   async function handleDeleteItems() {
-    if (!local.modalEdit?.deleteItems) return;
-    const result = await local.modalEdit.deleteItems(selectedItems());
+    if (!local.dialogEdit?.deleteItems) return;
+    const result = await local.dialogEdit.deleteItems(selectedItems());
     if (!result) return;
 
     setBusyCount((c) => c + 1);
     try {
       await refresh();
-      noti.success(i18n?.t("crudSheet.deleteCompleted") ?? "Delete completed", i18n?.t("crudSheet.deleteSuccess") ?? "Deleted successfully.");
+      noti.success(i18n.t("crudSheet.deleteCompleted"), i18n.t("crudSheet.deleteSuccess"));
     } catch (err) {
-      noti.error(err, i18n?.t("crudSheet.deleteFailed") ?? "Delete failed");
+      noti.error(err, i18n.t("crudSheet.deleteFailed"));
     }
     setBusyCount((c) => c - 1);
   }
 
   async function handleRestoreItems() {
-    if (!local.modalEdit?.restoreItems) return;
-    const result = await local.modalEdit.restoreItems(selectedItems());
+    if (!local.dialogEdit?.restoreItems) return;
+    const result = await local.dialogEdit.restoreItems(selectedItems());
     if (!result) return;
 
     setBusyCount((c) => c + 1);
     try {
       await refresh();
-      noti.success(i18n?.t("crudSheet.restoreCompleted") ?? "Restore completed", i18n?.t("crudSheet.restoreSuccess") ?? "Restored successfully.");
+      noti.success(i18n.t("crudSheet.restoreCompleted"), i18n.t("crudSheet.restoreSuccess"));
     } catch (err) {
-      noti.error(err, i18n?.t("crudSheet.restoreFailed") ?? "Restore failed");
+      noti.error(err, i18n.t("crudSheet.restoreFailed"));
     }
     setBusyCount((c) => c - 1);
   }
@@ -318,7 +318,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
       const result = await local.search(lastFilter(), undefined, sorts());
       await local.excel.download(result.items);
     } catch (err) {
-      noti.error(err, i18n?.t("crudSheet.excelDownloadFailed") ?? "Excel download failed");
+      noti.error(err, i18n.t("crudSheet.excelDownloadFailed"));
     }
     setBusyCount((c) => c - 1);
   }
@@ -336,10 +336,10 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
       setBusyCount((c) => c + 1);
       try {
         await local.excel!.upload!(file);
-        noti.success(i18n?.t("crudSheet.excelCompleted") ?? "Completed", i18n?.t("crudSheet.excelUploadSuccess") ?? "Excel upload completed successfully.");
+        noti.success(i18n.t("crudSheet.excelCompleted"), i18n.t("crudSheet.excelUploadSuccess"));
         await refresh();
       } catch (err) {
-        noti.error(err, i18n?.t("crudSheet.excelUploadFailed") ?? "Excel upload failed");
+        noti.error(err, i18n.t("crudSheet.excelUploadFailed"));
       }
       setBusyCount((c) => c - 1);
     };
@@ -413,7 +413,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   // -- Route Leave Guard --
   // eslint-disable-next-line solid/reactivity -- inlineEdit is used only for initial value
-  if (!isModal && local.inlineEdit) {
+  if (!isInDialog && local.inlineEdit) {
     try {
       useBeforeLeave((e) => {
         if (!checkIgnoreChanges()) {
@@ -437,12 +437,12 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             onClick={() => formRef?.requestSubmit()}
           >
             <Icon icon={IconDeviceFloppy} class="mr-1" />
-            {i18n?.t("crudSheet.save") ?? "Save"}
+            {i18n.t("crudSheet.save")}
           </Button>
         </Show>
         <Button size="lg" variant="ghost" theme="info" onClick={handleRefresh}>
           <Icon icon={IconRefresh} class="mr-1" />
-          {i18n?.t("crudSheet.refresh") ?? "Refresh"}
+          {i18n.t("crudSheet.refresh")}
         </Button>
       </>
     ));
@@ -475,8 +475,8 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
   return (
     <>
-      {/* Modal mode: Dialog.Action (refresh button in header) */}
-      <Show when={isModal}>
+      {/* Dialog mode: Dialog.Action (refresh button in header) */}
+      <Show when={isInDialog}>
         <Dialog.Action>
           <button
             class="flex items-center px-2 text-base-400 hover:text-base-600"
@@ -493,7 +493,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
         class={clsx("flex h-full flex-col", local.class)}
       >
         {/* Control mode: inline save/refresh bar */}
-        <Show when={!isModal && !topbarCtx}>
+        <Show when={!isInDialog && !topbarCtx}>
           <div class="flex gap-2 p-2 pb-0">
             <Show when={canEdit() && local.inlineEdit}>
               <Button
@@ -503,12 +503,12 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                 onClick={() => formRef?.requestSubmit()}
               >
                 <Icon icon={IconDeviceFloppy} class="mr-1" />
-                {i18n?.t("crudSheet.save") ?? "Save"}
+                {i18n.t("crudSheet.save")}
               </Button>
             </Show>
             <Button size="sm" theme="info" variant="ghost" onClick={handleRefresh}>
               <Icon icon={IconRefresh} class="mr-1" />
-              {i18n?.t("crudSheet.refresh") ?? "Refresh"}
+              {i18n.t("crudSheet.refresh")}
             </Button>
           </div>
         </Show>
@@ -524,7 +524,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                 <FormGroup.Item>
                   <Button type="submit" theme="info" variant="solid">
                     <Icon icon={IconSearch} class="mr-1" />
-                    {i18n?.t("crudSheet.search") ?? "Search"}
+                    {i18n.t("crudSheet.search")}
                   </Button>
                 </FormGroup.Item>
                 {filterDef().children(filter, setFilter)}
@@ -534,18 +534,18 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
         </Show>
 
         {/* Toolbar */}
-        <Show when={!isSelectMode()}>
+        <Show when={!(isInDialog && isSelectMode())}>
           <div class="flex gap-2 p-2 pb-0">
             <Show when={!local.hideAutoTools}>
               {/* Inline edit buttons */}
               <Show when={canEdit() && local.inlineEdit}>
                 <Button size="sm" theme="primary" variant="ghost" onClick={handleAddRow}>
-                  <Icon icon={IconPlus} class="mr-1" />{i18n?.t("crudSheet.addRow") ?? "Add Row"}
+                  <Icon icon={IconPlus} class="mr-1" />{i18n.t("crudSheet.addRow")}
                 </Button>
               </Show>
 
-              {/* Modal edit buttons */}
-              <Show when={canEdit() && local.modalEdit}>
+              {/* Dialog edit buttons */}
+              <Show when={canEdit() && local.dialogEdit}>
                 <Button
                   size="sm"
                   theme="primary"
@@ -553,10 +553,10 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                   onClick={() => void handleEditItem()}
                 >
                   <Icon icon={IconPlus} class="mr-1" />
-                  {i18n?.t("crudSheet.register") ?? "Register"}
+                  {i18n.t("crudSheet.register")}
                 </Button>
               </Show>
-              <Show when={canEdit() && local.modalEdit?.deleteItems}>
+              <Show when={canEdit() && local.dialogEdit?.deleteItems}>
                 <Button
                   size="sm"
                   theme="danger"
@@ -572,10 +572,10 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                   }
                 >
                   <Icon icon={IconTrash} class="mr-1" />
-                  {i18n?.t("crudSheet.deleteSelected") ?? "Delete Selected"}
+                  {i18n.t("crudSheet.deleteSelected")}
                 </Button>
               </Show>
-              <Show when={canEdit() && local.modalEdit?.restoreItems}>
+              <Show when={canEdit() && local.dialogEdit?.restoreItems}>
                 <Button
                   size="sm"
                   theme="warning"
@@ -587,7 +587,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                   }
                 >
                   <Icon icon={IconTrashOff} class="mr-1" />
-                  {i18n?.t("crudSheet.restoreSelected") ?? "Restore Selected"}
+                  {i18n.t("crudSheet.restoreSelected")}
                 </Button>
               </Show>
 
@@ -595,13 +595,13 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
               <Show when={canEdit() && local.excel?.upload}>
                 <Button size="sm" theme="success" variant="ghost" onClick={handleExcelUpload}>
                   <Icon icon={IconUpload} class="mr-1" />
-                  {i18n?.t("crudSheet.excelUpload") ?? "Excel Upload"}
+                  {i18n.t("crudSheet.excelUpload")}
                 </Button>
               </Show>
               <Show when={local.excel}>
                 <Button size="sm" theme="success" variant="ghost" onClick={handleExcelDownload}>
                   <Icon icon={IconFileExcel} class="mr-1" />
-                  {i18n?.t("crudSheet.excelDownload") ?? "Excel Download"}
+                  {i18n.t("crudSheet.excelDownload")}
                 </Button>
               </Show>
             </Show>
@@ -626,7 +626,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             selectMode={
               isSelectMode()
                 ? local.selectMode
-                : local.modalEdit?.deleteItems != null || local.modalEdit?.restoreItems != null
+                : local.dialogEdit?.deleteItems != null || local.dialogEdit?.restoreItems != null
                   ? "multiple"
                   : undefined
             }
@@ -689,9 +689,9 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
                       },
                     };
 
-                    // modalEdit editable column -- wrap with edit link
+                    // dialogEdit editable column -- wrap with edit link
                     if (
-                      local.modalEdit &&
+                      local.dialogEdit &&
                       col.editTrigger &&
                       canEdit() &&
                       (local.itemEditable?.(dsCtx.item) ?? true)
@@ -721,7 +721,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
 
             {/* Auto lastModified columns */}
             <Show when={local.lastModifiedAtProp}>
-              <DataSheetColumn<TItem> key={local.lastModifiedAtProp!} header={i18n?.t("crudSheet.lastModified") ?? "Last Modified"} hidden>
+              <DataSheetColumn<TItem> key={local.lastModifiedAtProp!} header={i18n.t("crudSheet.lastModified")} hidden>
                 {(dsCtx) => (
                   <div class="px-2 py-1 text-center">
                     {(
@@ -735,7 +735,7 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
             </Show>
 
             <Show when={local.lastModifiedByProp}>
-              <DataSheetColumn<TItem> key={local.lastModifiedByProp!} header={i18n?.t("crudSheet.modifiedBy") ?? "Modified By"} hidden>
+              <DataSheetColumn<TItem> key={local.lastModifiedByProp!} header={i18n.t("crudSheet.modifiedBy")} hidden>
                 {(dsCtx) => (
                   <div class="px-2 py-1 text-center">
                     {objGetChainValue(dsCtx.item, local.lastModifiedByProp!, true) as string}
@@ -747,17 +747,17 @@ const CrudSheetBase = <TItem, TFilter extends Record<string, any>>(
         </form>
 
         {/* Select mode bottom bar */}
-        <Show when={isModal && isSelectMode()}>
+        <Show when={isInDialog && isSelectMode()}>
           <div class="flex gap-2 border-t p-2">
             <div class="flex-1" />
             <Show when={selectedItems().length > 0}>
               <Button size="sm" theme="danger" onClick={handleSelectCancel}>
-                {local.selectMode === "multiple" ? (i18n?.t("crudSheet.deselectAll") ?? "Deselect All") : (i18n?.t("crudSheet.deselect") ?? "Deselect")}
+                {local.selectMode === "multiple" ? i18n.t("crudSheet.deselectAll") : i18n.t("crudSheet.deselect")}
               </Button>
             </Show>
             <Show when={local.selectMode === "multiple"}>
               <Button size="sm" theme="primary" onClick={handleSelectConfirm}>
-                {i18n?.t("crudSheet.confirm") ?? "Confirm"} ({selectedItems().length})
+                {i18n.t("crudSheet.confirm")} ({selectedItems().length})
               </Button>
             </Show>
           </div>

package/src/components/features/crud-sheet/types.ts

@@ -19,7 +19,7 @@ export interface InlineEditConfig<TItem> {
   diffsExcludes?: string[];
 }
 
-export interface ModalEditConfig<TItem> {
+export interface DialogEditConfig<TItem> {
   editItem: (item?: TItem) => Promise<boolean | undefined>;
   deleteItems?: (items: TItem[]) => Promise<boolean>;
   restoreItems?: (items: TItem[]) => Promise<boolean>;
@@ -70,9 +70,9 @@ export type CrudSheetProps<TItem, TFilter extends Record<string, any>> = CrudShe
   TFilter
 > &
   (
-    | { inlineEdit: InlineEditConfig<TItem>; modalEdit?: never }
-    | { modalEdit: ModalEditConfig<TItem>; inlineEdit?: never }
-    | { inlineEdit?: never; modalEdit?: never }
+    | { inlineEdit: InlineEditConfig<TItem>; dialogEdit?: never }
+    | { dialogEdit: DialogEditConfig<TItem>; inlineEdit?: never }
+    | { inlineEdit?: never; dialogEdit?: never }
   );
 
 interface CrudSheetBaseProps<TItem, TFilter extends Record<string, any>> {