@simplysm/solid 13.0.72 → 13.0.74

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>> {

package/src/components/features/data-select-button/DataSelectButton.tsx

@@ -1,4 +1,5 @@
 import {
+  type Component,
   createEffect,
   createMemo,
   createResource,
@@ -15,7 +16,8 @@ import { IconSearch, IconX } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
 import { Invalid } from "../../form-control/Invalid";
 import { useDialog, type DialogShowOptions } from "../../disclosure/DialogContext";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
 import { type ComponentSize, textMuted } from "../../../styles/tokens.styles";
 import {
@@ -25,11 +27,31 @@ import {
   triggerSizeClasses,
 } from "../../form-control/DropdownTrigger.styles";
 
-/** Result interface returned from modal */
-export interface DataSelectModalResult<TKey> {
+/** Result interface returned from dialog */
+export interface DataSelectDialogResult<TKey> {
   selectedKeys: TKey[];
 }
 
+/** Props automatically injected into dialog component by DataSelectButton/SharedDataSelect */
+export interface InjectedSelectProps {
+  /** Selection mode */
+  selectMode: "single" | "multiple";
+  /** Currently selected keys */
+  selectedKeys: (string | number)[];
+  /** Selection callback — automatically closes dialog with result */
+  onSelect: (result: { keys: (string | number)[] }) => void;
+}
+
+/** Declarative dialog configuration */
+export interface DialogConfig<TUserProps = any> {
+  /** Dialog component (must accept InjectedSelectProps) */
+  component: Component<TUserProps & InjectedSelectProps>;
+  /** User-defined props for the component */
+  props?: TUserProps;
+  /** Dialog options (header, size, etc.) */
+  option?: DialogShowOptions;
+}
+
 /** DataSelectButton Props */
 export interface DataSelectButtonProps<TItem, TKey = string | number> {
   /** Currently selected key(s) (single or multiple) */
@@ -39,8 +61,8 @@ export interface DataSelectButtonProps<TItem, TKey = string | number> {
 
   /** Function to load items by key */
   load: (keys: TKey[]) => TItem[] | Promise<TItem[]>;
-  /** Selection modal component factory */
-  modal: () => JSX.Element;
+  /** Selection dialog configuration */
+  dialog: DialogConfig;
   /** Item rendering function */
   renderItem: (item: TItem) => JSX.Element;
 
@@ -59,9 +81,6 @@ export interface DataSelectButtonProps<TItem, TKey = string | number> {
   validate?: (value: unknown) => string | undefined;
   /** touchMode: show error only after focus is lost */
   touchMode?: boolean;
-
-  /** Dialog options */
-  dialogOptions?: DialogShowOptions;
 }
 
 // Styles
@@ -100,7 +119,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
     "value",
     "onValueChange",
     "load",
-    "modal",
+    "dialog",
     "renderItem",
     "multiple",
     "required",
@@ -109,10 +128,9 @@ export function DataSelectButton<TItem, TKey = string | number>(
     "inset",
     "validate",
     "touchMode",
-    "dialogOptions",
   ]);
 
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
   const dialog = useDialog();
 
   // Always normalize value to array
@@ -164,18 +182,30 @@ export function DataSelectButton<TItem, TKey = string | number>(
     const v = getValue();
     if (local.required) {
       const keys = normalizeKeys(v);
-      if (keys.length === 0) return "Required field";
+      if (keys.length === 0) return i18n.t("validation.requiredField");
     }
     return local.validate?.(v);
   });
 
-  // Open modal
-  const handleOpenModal = async () => {
+  // Open dialog
+  const handleOpenDialog = async () => {
     if (local.disabled) return;
 
-    const result = await dialog.show<DataSelectModalResult<TKey>>(
-      local.modal,
-      local.dialogOptions ?? {},
+    const result = await dialog.show<DataSelectDialogResult<TKey>>(
+      () => {
+        const instance = useDialogInstance<DataSelectDialogResult<TKey>>();
+        return (
+          <local.dialog.component
+            {...(local.dialog.props ?? {})}
+            selectMode={local.multiple ? "multiple" : "single"}
+            selectedKeys={normalizeKeys(getValue()) as (string | number)[]}
+            onSelect={(r: { keys: (string | number)[] }) =>
+              instance?.close({ selectedKeys: r.keys as TKey[] })
+            }
+          />
+        );
+      },
+      local.dialog.option ?? {},
     );
 
     if (result) {
@@ -243,7 +273,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
             if (local.disabled) return;
             if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
-              void handleOpenModal();
+              void handleOpenDialog();
             }
           }}
         >
@@ -256,7 +286,7 @@ export function DataSelectButton<TItem, TKey = string | number>(
                 class={twMerge(actionButtonClass, "text-base-400 hover:text-danger-500")}
                 onClick={handleClear}
                 tabIndex={-1}
-                aria-label={i18n?.t("dataSelectButton.deselect") ?? "Deselect"}
+                aria-label={i18n.t("dataSelectButton.deselect")}
               >
                 <Icon icon={IconX} size="0.875em" />
               </button>
@@ -266,9 +296,9 @@ export function DataSelectButton<TItem, TKey = string | number>(
                 type="button"
                 data-search-button
                 class={twMerge(actionButtonClass, "text-base-400 hover:text-primary-500")}
-                onClick={() => void handleOpenModal()}
+                onClick={() => void handleOpenDialog()}
                 tabIndex={-1}
-                aria-label={i18n?.t("dataSelectButton.search") ?? "Search"}
+                aria-label={i18n.t("dataSelectButton.search")}
               >
                 <Icon icon={IconSearch} size="0.875em" />
               </button>

package/src/components/features/permission-table/PermissionTable.tsx

@@ -14,7 +14,7 @@ import { DataSheet } from "../../data/sheet/DataSheet";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { borderDefault } from "../../../styles/tokens.styles";
 import type { AppPerm } from "../../../helpers/createAppStructure";
-import { useI18nOptional } from "../../../providers/i18n/I18nContext";
+import { useI18n } from "../../../providers/i18n/I18nContext";
 
 const titleCellClass = clsx("flex items-stretch", "px-2");
 const indentGuideWrapperClass = clsx("mr-1 flex w-3", "justify-center");
@@ -215,7 +215,7 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
     "style",
   ]);
 
-  const i18n = useI18nOptional();
+  const i18n = useI18n();
 
   // Visible top-level items (preserve object reference)
   const visibleItems = createMemo(() => {
@@ -270,7 +270,7 @@ export const PermissionTable: Component<PermissionTableProps> = (props) => {
     >
       <DataSheet.Column
         key="title"
-        header={i18n?.t("permissionTable.permissionItem") ?? "Permission Item"}
+        header={i18n.t("permissionTable.permissionItem")}
         sortable={false}
         resizable={false}
       >