@btst/stack 2.12.2 → 3.0.0-rc.2

package/dist/packages/stack/src/plugins/cms/client/components/pages/content-editor-page.internal.cjs

@@ -11,7 +11,6 @@ const inverseRelationsPanel = require('../inverse-relations-panel.cjs');
 const emptyState = require('../shared/empty-state.cjs');
 const pageWrapper = require('../shared/page-wrapper.cjs');
 const editorSkeleton = require('../loading/editor-skeleton.cjs');
-const index = require('../../localization/index.cjs');
 const useRouteLifecycle = require('../../../../../../../ui/src/hooks/use-route-lifecycle.cjs');
 const cmsHooks = require('../../hooks/cms-hooks.cjs');
 
@@ -63,9 +62,11 @@ function convertPrefillToFormData(prefillParams, jsonSchema) {
   return result;
 }
 function ContentEditorPage({ typeSlug, id }) {
+  const t = context.useTranslate();
   const overrides = context.usePluginOverrides("cms");
-  const { navigate } = overrides;
-  const localization = { ...index.CMS_LOCALIZATION, ...overrides.localization };
+  const { localization } = overrides;
+  const { router } = context.useStack();
+  const navigate = router?.navigate;
   const basePath = context.useBasePath();
   const prefillParams = usePrefillParams();
   useRouteLifecycle.useRouteLifecycle({
@@ -75,26 +76,36 @@ function ContentEditorPage({ typeSlug, id }) {
       params: id ? { typeSlug, id } : { typeSlug },
       isSSR: typeof window === "undefined"
     },
-    overrides,
-    beforeRenderHook: (overrides2, context) => {
-      if (overrides2.onBeforeEditorRendered) {
-        return overrides2.onBeforeEditorRendered(typeSlug, id ?? null, context);
-      }
-      return true;
-    }
+    overrides
   });
   const { contentTypes } = cmsHooks.useSuspenseContentTypes();
   const contentType = contentTypes.find((ct) => ct.slug === typeSlug);
   const isEditing = !!id;
   const { item, isLoading: isLoadingItem } = cmsHooks.useContentItem(typeSlug, id ?? "");
-  const createContent = cmsHooks.useCreateContent(typeSlug);
-  const updateContent = cmsHooks.useUpdateContent(typeSlug);
+  const resourceForm = cmsHooks.useContentItemForm({
+    action: isEditing ? "edit" : "create",
+    record: isEditing ? item : null,
+    successMessage: (_result, action) => action === "create" ? localization?.CMS_TOAST_CREATE_SUCCESS ?? t("cms.toasts.createSuccess", "Item created successfully") : localization?.CMS_TOAST_UPDATE_SUCCESS ?? t("cms.toasts.updateSuccess", "Item updated successfully"),
+    toCreateVars: (values) => ({
+      typeSlug,
+      slug: values.slug,
+      data: values.data
+    }),
+    toUpdateVars: (values) => ({
+      typeSlug,
+      id: id ?? "",
+      data: { slug: values.slug, data: values.data }
+    }),
+    onSuccess: () => {
+      void navigate?.(`${basePath}/cms/${typeSlug}`);
+    }
+  });
   if (!contentType) {
     return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { testId: "cms-editor-page", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(
       emptyState.EmptyState,
       {
-        title: localization.CMS_ERROR_NOT_FOUND,
-        description: "Content type not found"
+        title: localization?.CMS_ERROR_NOT_FOUND ?? t("cms.common.notFound", "Not found"),
+        description: localization?.CMS_ERROR_TYPE_NOT_FOUND_DESCRIPTION ?? t("cms.common.typeNotFoundDescription", "Content type not found")
       }
     ) }) });
   }
@@ -105,20 +116,16 @@ function ContentEditorPage({ typeSlug, id }) {
     return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { testId: "cms-editor-page", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(
       emptyState.EmptyState,
       {
-        title: localization.CMS_ERROR_NOT_FOUND,
-        description: "Content item not found"
+        title: localization?.CMS_ERROR_NOT_FOUND ?? t("cms.common.notFound", "Not found"),
+        description: localization?.CMS_ERROR_ITEM_NOT_FOUND_DESCRIPTION ?? t("cms.common.itemNotFoundDescription", "Content item not found")
       }
     ) }) });
   }
   const handleSubmit = async (data) => {
-    if (isEditing && id) {
-      await updateContent.mutateAsync({ id, data });
-    } else {
-      await createContent.mutateAsync(data);
-    }
-    navigate(`${basePath}/cms/${typeSlug}`);
+    await resourceForm.submit(data);
   };
-  const title = isEditing ? localization.CMS_EDITOR_TITLE_EDIT.replace("{typeName}", contentType.name) : localization.CMS_EDITOR_TITLE_NEW.replace("{typeName}", contentType.name);
+  const hasFieldErrors = Object.keys(resourceForm.fieldErrors).length > 0;
+  const title = isEditing ? (localization?.CMS_EDITOR_TITLE_EDIT ?? t("cms.editor.titleEdit", "Edit {typeName}")).replace("{typeName}", contentType.name) : (localization?.CMS_EDITOR_TITLE_NEW ?? t("cms.editor.titleNew", "New {typeName}")).replace("{typeName}", contentType.name);
   return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { testId: "cms-editor-page", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-2xl space-y-6", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -126,7 +133,7 @@ function ContentEditorPage({ typeSlug, id }) {
         {
           variant: "ghost",
           size: "icon",
-          onClick: () => navigate(`${basePath}/cms/${typeSlug}`),
+          onClick: () => void navigate?.(`${basePath}/cms/${typeSlug}`),
           children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ArrowLeft, { className: "h-4 w-4" })
         }
       ),
@@ -143,7 +150,10 @@ function ContentEditorPage({ typeSlug, id }) {
         initialSlug: item?.slug,
         isEditing,
         onSubmit: handleSubmit,
-        onCancel: () => navigate(`${basePath}/cms/${typeSlug}`)
+        onCancel: () => void navigate?.(`${basePath}/cms/${typeSlug}`),
+        fieldErrors: resourceForm.fieldErrors,
+        errorMessage: hasFieldErrors ? void 0 : resourceForm.error?.message,
+        isSubmitting: resourceForm.isSubmitting
       },
       isEditing ? `edit-${id}` : "create"
     ),

package/dist/packages/stack/src/plugins/cms/client/components/pages/content-editor-page.internal.mjs

@@ -3,15 +3,14 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { ArrowLeft } from 'lucide-react';
 import { Button } from '../../../../../../../ui/src/components/button.mjs';
-import { usePluginOverrides, useBasePath } from '@btst/stack/context';
+import { useTranslate, usePluginOverrides, useStack, useBasePath } from '@btst/stack/context';
 import { ContentForm } from '../forms/content-form.mjs';
 import { InverseRelationsPanel } from '../inverse-relations-panel.mjs';
 import { EmptyState } from '../shared/empty-state.mjs';
 import { PageWrapper } from '../shared/page-wrapper.mjs';
 import { EditorSkeleton } from '../loading/editor-skeleton.mjs';
-import { CMS_LOCALIZATION } from '../../localization/index.mjs';
 import { useRouteLifecycle } from '../../../../../../../ui/src/hooks/use-route-lifecycle.mjs';
-import { useSuspenseContentTypes, useContentItem, useCreateContent, useUpdateContent } from '../../hooks/cms-hooks.mjs';
+import { useSuspenseContentTypes, useContentItem, useContentItemForm } from '../../hooks/cms-hooks.mjs';
 
 function usePrefillParams() {
   const [prefillData, setPrefillData] = useState({});
@@ -61,9 +60,11 @@ function convertPrefillToFormData(prefillParams, jsonSchema) {
   return result;
 }
 function ContentEditorPage({ typeSlug, id }) {
+  const t = useTranslate();
   const overrides = usePluginOverrides("cms");
-  const { navigate } = overrides;
-  const localization = { ...CMS_LOCALIZATION, ...overrides.localization };
+  const { localization } = overrides;
+  const { router } = useStack();
+  const navigate = router?.navigate;
   const basePath = useBasePath();
   const prefillParams = usePrefillParams();
   useRouteLifecycle({
@@ -73,26 +74,36 @@ function ContentEditorPage({ typeSlug, id }) {
       params: id ? { typeSlug, id } : { typeSlug },
       isSSR: typeof window === "undefined"
     },
-    overrides,
-    beforeRenderHook: (overrides2, context) => {
-      if (overrides2.onBeforeEditorRendered) {
-        return overrides2.onBeforeEditorRendered(typeSlug, id ?? null, context);
-      }
-      return true;
-    }
+    overrides
   });
   const { contentTypes } = useSuspenseContentTypes();
   const contentType = contentTypes.find((ct) => ct.slug === typeSlug);
   const isEditing = !!id;
   const { item, isLoading: isLoadingItem } = useContentItem(typeSlug, id ?? "");
-  const createContent = useCreateContent(typeSlug);
-  const updateContent = useUpdateContent(typeSlug);
+  const resourceForm = useContentItemForm({
+    action: isEditing ? "edit" : "create",
+    record: isEditing ? item : null,
+    successMessage: (_result, action) => action === "create" ? localization?.CMS_TOAST_CREATE_SUCCESS ?? t("cms.toasts.createSuccess", "Item created successfully") : localization?.CMS_TOAST_UPDATE_SUCCESS ?? t("cms.toasts.updateSuccess", "Item updated successfully"),
+    toCreateVars: (values) => ({
+      typeSlug,
+      slug: values.slug,
+      data: values.data
+    }),
+    toUpdateVars: (values) => ({
+      typeSlug,
+      id: id ?? "",
+      data: { slug: values.slug, data: values.data }
+    }),
+    onSuccess: () => {
+      void navigate?.(`${basePath}/cms/${typeSlug}`);
+    }
+  });
   if (!contentType) {
     return /* @__PURE__ */ jsx(PageWrapper, { testId: "cms-editor-page", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx(
       EmptyState,
       {
-        title: localization.CMS_ERROR_NOT_FOUND,
-        description: "Content type not found"
+        title: localization?.CMS_ERROR_NOT_FOUND ?? t("cms.common.notFound", "Not found"),
+        description: localization?.CMS_ERROR_TYPE_NOT_FOUND_DESCRIPTION ?? t("cms.common.typeNotFoundDescription", "Content type not found")
       }
     ) }) });
   }
@@ -103,20 +114,16 @@ function ContentEditorPage({ typeSlug, id }) {
     return /* @__PURE__ */ jsx(PageWrapper, { testId: "cms-editor-page", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx(
       EmptyState,
       {
-        title: localization.CMS_ERROR_NOT_FOUND,
-        description: "Content item not found"
+        title: localization?.CMS_ERROR_NOT_FOUND ?? t("cms.common.notFound", "Not found"),
+        description: localization?.CMS_ERROR_ITEM_NOT_FOUND_DESCRIPTION ?? t("cms.common.itemNotFoundDescription", "Content item not found")
       }
     ) }) });
   }
   const handleSubmit = async (data) => {
-    if (isEditing && id) {
-      await updateContent.mutateAsync({ id, data });
-    } else {
-      await createContent.mutateAsync(data);
-    }
-    navigate(`${basePath}/cms/${typeSlug}`);
+    await resourceForm.submit(data);
   };
-  const title = isEditing ? localization.CMS_EDITOR_TITLE_EDIT.replace("{typeName}", contentType.name) : localization.CMS_EDITOR_TITLE_NEW.replace("{typeName}", contentType.name);
+  const hasFieldErrors = Object.keys(resourceForm.fieldErrors).length > 0;
+  const title = isEditing ? (localization?.CMS_EDITOR_TITLE_EDIT ?? t("cms.editor.titleEdit", "Edit {typeName}")).replace("{typeName}", contentType.name) : (localization?.CMS_EDITOR_TITLE_NEW ?? t("cms.editor.titleNew", "New {typeName}")).replace("{typeName}", contentType.name);
   return /* @__PURE__ */ jsx(PageWrapper, { testId: "cms-editor-page", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-2xl space-y-6", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
       /* @__PURE__ */ jsx(
@@ -124,7 +131,7 @@ function ContentEditorPage({ typeSlug, id }) {
         {
           variant: "ghost",
           size: "icon",
-          onClick: () => navigate(`${basePath}/cms/${typeSlug}`),
+          onClick: () => void navigate?.(`${basePath}/cms/${typeSlug}`),
           children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" })
         }
       ),
@@ -141,7 +148,10 @@ function ContentEditorPage({ typeSlug, id }) {
         initialSlug: item?.slug,
         isEditing,
         onSubmit: handleSubmit,
-        onCancel: () => navigate(`${basePath}/cms/${typeSlug}`)
+        onCancel: () => void navigate?.(`${basePath}/cms/${typeSlug}`),
+        fieldErrors: resourceForm.fieldErrors,
+        errorMessage: hasFieldErrors ? void 0 : resourceForm.error?.message,
+        isSubmitting: resourceForm.isSubmitting
       },
       isEditing ? `edit-${id}` : "create"
     ),

package/dist/packages/stack/src/plugins/cms/client/components/pages/content-editor-page.mjs

@@ -27,6 +27,11 @@ function ContentEditorPageComponent({
       ErrorComponent: DefaultError,
       LoadingComponent: EditorSkeleton,
       NotFoundComponent: NotFoundPage,
+      permission: isNew ? { resource: "cms:content", action: "create", params: { typeSlug } } : {
+        resource: "cms:content",
+        action: "update",
+        params: { typeSlug, id }
+      },
       props: { typeSlug, id },
       onError: (error) => {
         if (onRouteError) {

package/dist/packages/stack/src/plugins/cms/client/components/pages/content-list-page.internal.cjs

@@ -2,21 +2,30 @@
 'use strict';
 
 const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
 const LucideIcons = require('lucide-react');
 const button = require('../../../../../../../ui/src/components/button.cjs');
+const input = require('../../../../../../../ui/src/components/input.cjs');
 const table = require('../../../../../../../ui/src/components/table.cjs');
 const context = require('@btst/stack/context');
+const client = require('@btst/stack/client');
 const emptyState = require('../shared/empty-state.cjs');
 const pageWrapper = require('../shared/page-wrapper.cjs');
-const index = require('../../localization/index.cjs');
 const useRouteLifecycle = require('../../../../../../../ui/src/hooks/use-route-lifecycle.cjs');
-const sonner = require('sonner');
 const cmsHooks = require('../../hooks/cms-hooks.cjs');
 
+const LIST_STATE_SCHEMA = {
+  q: { type: "string", default: "", history: "replace" }
+};
+const SEARCH_DEBOUNCE_MS = 300;
 function ContentListPage({ typeSlug }) {
+  const t = context.useTranslate();
+  const notify = context.useNotify();
   const overrides = context.usePluginOverrides("cms");
-  const { navigate, Link } = overrides;
-  const localization = { ...index.CMS_LOCALIZATION, ...overrides.localization };
+  const { localization } = overrides;
+  const { router } = context.useStack();
+  const navigate = router?.navigate;
+  const Link = router?.Link;
   const basePath = context.useBasePath();
   useRouteLifecycle.useRouteLifecycle({
     routeName: "contentList",
@@ -25,30 +34,55 @@ function ContentListPage({ typeSlug }) {
       params: { typeSlug },
       isSSR: typeof window === "undefined"
     },
-    overrides,
-    beforeRenderHook: (overrides2, context) => {
-      if (overrides2.onBeforeListRendered) {
-        return overrides2.onBeforeListRendered(typeSlug, context);
-      }
-      return true;
-    }
+    overrides
   });
   const limit = 20;
+  const [{ q: search }, setListState] = client.useListState(
+    `cms-${typeSlug}`,
+    LIST_STATE_SCHEMA
+  );
+  const [searchInput, setSearchInput] = React.useState(search);
+  const lastSyncedSearch = React.useRef(search);
+  React.useEffect(() => {
+    if (search !== lastSyncedSearch.current) {
+      lastSyncedSearch.current = search;
+      setSearchInput(search);
+    }
+  }, [search]);
+  React.useEffect(() => {
+    if (searchInput === search) return;
+    const timeout = setTimeout(() => {
+      lastSyncedSearch.current = searchInput;
+      setListState({ q: searchInput });
+    }, SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(timeout);
+  }, [searchInput, search, setListState]);
+  const hasSearch = search.trim().length > 0;
   const { contentTypes } = cmsHooks.useSuspenseContentTypes();
   const contentType = contentTypes.find((ct) => ct.slug === typeSlug);
-  const { items, total, refetch, loadMore, hasMore, isLoadingMore } = cmsHooks.useSuspenseContent(typeSlug, {
-    limit
+  const defaultList = cmsHooks.useSuspenseContent(typeSlug, { limit });
+  const searchedList = cmsHooks.useContent(typeSlug, {
+    limit,
+    search,
+    enabled: hasSearch
   });
+  const activeList = hasSearch ? searchedList : defaultList;
+  const { items, total, loadMore, hasMore, isLoadingMore } = activeList;
+  const isSearchLoading = hasSearch && searchedList.isLoading;
   const deleteContent = cmsHooks.useDeleteContent(typeSlug);
   const LinkComponent = Link || "a";
   const handleDelete = async (id) => {
     try {
       await deleteContent.mutateAsync(id);
-      sonner.toast.success(localization.CMS_TOAST_DELETE_SUCCESS);
-      void refetch();
     } catch {
-      sonner.toast.error(localization.CMS_TOAST_ERROR);
+      notify.error(
+        localization?.CMS_TOAST_ERROR ?? t("cms.toasts.error", "An error occurred. Please try again.")
+      );
+      return;
     }
+    notify.success(
+      localization?.CMS_TOAST_DELETE_SUCCESS ?? t("cms.toasts.deleteSuccess", "Item deleted successfully")
+    );
   };
   const formatDate = (dateString) => {
     return new Date(dateString).toLocaleDateString();
@@ -57,8 +91,8 @@ function ContentListPage({ typeSlug }) {
     return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { testId: "cms-list-page", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-5xl", children: /* @__PURE__ */ jsxRuntime.jsx(
       emptyState.EmptyState,
       {
-        title: localization.CMS_ERROR_NOT_FOUND,
-        description: "Content type not found"
+        title: localization?.CMS_ERROR_NOT_FOUND ?? t("cms.common.notFound", "Not found"),
+        description: localization?.CMS_ERROR_TYPE_NOT_FOUND_DESCRIPTION ?? t("cms.common.typeNotFoundDescription", "Content type not found")
       }
     ) }) });
   }
@@ -70,7 +104,7 @@ function ContentListPage({ typeSlug }) {
           {
             variant: "ghost",
             size: "icon",
-            onClick: () => navigate(`${basePath}/cms`),
+            onClick: () => void navigate?.(`${basePath}/cms`),
             children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ArrowLeft, { className: "h-4 w-4" })
           }
         ),
@@ -79,87 +113,189 @@ function ContentListPage({ typeSlug }) {
           contentType.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: contentType.description })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { onClick: () => navigate(`${basePath}/cms/${typeSlug}/new`), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "h-4 w-4 mr-2" }),
-        localization.CMS_BUTTON_NEW_ITEM
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        context.CanAccess,
+        {
+          resource: "cms:content",
+          action: "create",
+          params: { typeSlug },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            button.Button,
+            {
+              onClick: () => void navigate?.(`${basePath}/cms/${typeSlug}/new`),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "h-4 w-4 mr-2" }),
+                localization?.CMS_BUTTON_NEW_ITEM ?? t("cms.common.newItem", "New Item")
+              ]
+            }
+          )
+        }
+      )
     ] }),
-    items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative max-w-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        input.Input,
+        {
+          "data-testid": "cms-list-search",
+          value: searchInput,
+          onChange: (e) => setSearchInput(e.target.value),
+          placeholder: localization?.CMS_LIST_SEARCH_PLACEHOLDER ?? t("cms.list.searchPlaceholder", "Search items..."),
+          className: "pl-9"
+        }
+      ),
+      isSearchLoading && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-muted-foreground" })
+    ] }),
+    items.length === 0 ? isSearchLoading ? null : hasSearch ? /* @__PURE__ */ jsxRuntime.jsx(
       emptyState.EmptyState,
       {
-        title: localization.CMS_LIST_EMPTY,
-        description: localization.CMS_LIST_EMPTY_DESCRIPTION,
-        action: /* @__PURE__ */ jsxRuntime.jsxs(
-          button.Button,
-          {
-            onClick: () => navigate(`${basePath}/cms/${typeSlug}/new`),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "h-4 w-4 mr-2" }),
-              localization.CMS_BUTTON_CREATE
-            ]
-          }
+        title: localization?.CMS_LIST_SEARCH_EMPTY ?? t("cms.list.searchEmpty", "No items match your search"),
+        description: localization?.CMS_LIST_SEARCH_EMPTY_DESCRIPTION ?? t(
+          "cms.list.searchEmptyDescription",
+          "Try a different search term."
         )
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border rounded-lg", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(table.Table, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(table.TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(table.TableRow, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization.CMS_LIST_COLUMN_SLUG }),
-          /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization.CMS_LIST_COLUMN_CREATED }),
-          /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization.CMS_LIST_COLUMN_UPDATED }),
-          /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { className: "w-[100px]", children: localization.CMS_LIST_COLUMN_ACTIONS })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(table.TableBody, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(table.TableRow, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(
-            LinkComponent,
-            {
-              href: `${basePath}/cms/${typeSlug}/${item.id}`,
-              className: "hover:underline",
-              children: item.slug
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: formatDate(item.createdAt) }),
-          /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: formatDate(item.updatedAt) }),
-          /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              button.Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                onClick: () => navigate(`${basePath}/cms/${typeSlug}/${item.id}`),
-                children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Pencil, { className: "h-4 w-4" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      emptyState.EmptyState,
+      {
+        title: localization?.CMS_LIST_EMPTY ?? t("cms.list.empty", "No items yet"),
+        description: localization?.CMS_LIST_EMPTY_DESCRIPTION ?? t(
+          "cms.list.emptyDescription",
+          "Create your first item to get started."
+        ),
+        action: /* @__PURE__ */ jsxRuntime.jsx(
+          context.CanAccess,
+          {
+            resource: "cms:content",
+            action: "create",
+            params: { typeSlug },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
               button.Button,
               {
-                variant: "ghost",
-                size: "icon",
-                onClick: () => handleDelete(item.id),
-                disabled: deleteContent.isPending,
-                children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-4 w-4 text-destructive" })
+                onClick: () => void navigate?.(`${basePath}/cms/${typeSlug}/new`),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "h-4 w-4 mr-2" }),
+                  localization?.CMS_BUTTON_CREATE ?? t("cms.common.create", "Create")
+                ]
               }
             )
-          ] }) })
-        ] }, item.id)) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: localization.CMS_LIST_PAGINATION_SHOWING.replace("{from}", "1").replace("{to}", String(items.length)).replace("{total}", String(total)) }),
-        hasMore && /* @__PURE__ */ jsxRuntime.jsxs(
-          button.Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: () => loadMore(),
-            disabled: isLoadingMore,
-            children: [
-              isLoadingMore && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
-              localization.CMS_LIST_PAGINATION_NEXT
-            ]
           }
         )
-      ] })
-    ] })
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      ContentTable,
+      {
+        items,
+        total,
+        typeSlug,
+        basePath,
+        LinkComponent,
+        navigate,
+        onDelete: handleDelete,
+        isDeleting: deleteContent.isPending,
+        formatDate,
+        loadMore,
+        hasMore,
+        isLoadingMore,
+        localization,
+        t
+      }
+    )
   ] }) });
 }
+function ContentTable({
+  items,
+  total,
+  typeSlug,
+  basePath,
+  LinkComponent,
+  navigate,
+  onDelete,
+  isDeleting,
+  formatDate,
+  loadMore,
+  hasMore,
+  isLoadingMore,
+  localization,
+  t
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border rounded-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(table.Table, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(table.TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(table.TableRow, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.CMS_LIST_COLUMN_SLUG ?? t("cms.list.columnSlug", "Slug") }),
+        /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.CMS_LIST_COLUMN_CREATED ?? t("cms.list.columnCreated", "Created") }),
+        /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.CMS_LIST_COLUMN_UPDATED ?? t("cms.list.columnUpdated", "Updated") }),
+        /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { className: "w-[100px]", children: localization?.CMS_LIST_COLUMN_ACTIONS ?? t("cms.list.columnActions", "Actions") })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(table.TableBody, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(table.TableRow, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(
+          LinkComponent,
+          {
+            href: `${basePath}/cms/${typeSlug}/${item.id}`,
+            className: "hover:underline",
+            children: item.slug
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: formatDate(item.createdAt) }),
+        /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: formatDate(item.updatedAt) }),
+        /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            context.CanAccess,
+            {
+              resource: "cms:content",
+              action: "update",
+              params: { typeSlug, id: item.id },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: () => void navigate?.(
+                    `${basePath}/cms/${typeSlug}/${item.id}`
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Pencil, { className: "h-4 w-4" })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            context.CanAccess,
+            {
+              resource: "cms:content",
+              action: "delete",
+              params: { typeSlug, id: item.id },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: () => onDelete(item.id),
+                  disabled: isDeleting,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-4 w-4 text-destructive" })
+                }
+              )
+            }
+          )
+        ] }) })
+      ] }, item.id)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: (localization?.CMS_LIST_PAGINATION_SHOWING ?? t("cms.list.paginationShowing", "Showing {from}-{to} of {total}")).replace("{from}", "1").replace("{to}", String(items.length)).replace("{total}", String(total)) }),
+      hasMore && /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => loadMore(),
+          disabled: isLoadingMore,
+          children: [
+            isLoadingMore && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+            localization?.CMS_LIST_PAGINATION_NEXT ?? t("cms.list.paginationNext", "Next")
+          ]
+        }
+      )
+    ] })
+  ] });
+}
 
 exports.ContentListPage = ContentListPage;