@btst/plugin-cms 0.0.0-stage → 1.0.0

package/dist/client/components/pages/content-list-page.internal.cjs

@@ -0,0 +1,334 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const lucideReact = 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 permissions = require('../../../permissions.cjs');
+const hooks = require('@btst/stack/client/hooks');
+const overrides = require('../../overrides.cjs');
+const constants = require('../../constants.cjs');
+const utils = require('../../../utils.cjs');
+const emptyState = require('../shared/empty-state.cjs');
+const pageWrapper = require('../shared/page-wrapper.cjs');
+const useRouteLifecycle = require('../../../ui/src/hooks/use-route-lifecycle.cjs');
+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$1 = context.usePluginOverrides(constants.CMS_PLUGIN_ID);
+  const { localization, classNames } = overrides$1;
+  const { router, plugins, basePath: stackBasePath } = context.useStack();
+  const navigate = router?.navigate;
+  const Link = router?.Link;
+  const basePath = plugins?.[constants.CMS_PLUGIN_ID]?.site.basePath ?? stackBasePath;
+  useRouteLifecycle.useRouteLifecycle({
+    routeName: "contentList",
+    context: {
+      path: `/cms/${typeSlug}`,
+      params: { typeSlug },
+      isSSR: typeof window === "undefined"
+    },
+    overrides: overrides$1
+  });
+  const limit = 20;
+  const [{ q: search }, setListState] = hooks.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: serverContentTypes } = cmsHooks.useSuspenseContentTypes();
+  const contentTypes = overrides.orderCMSContentTypes(
+    serverContentTypes,
+    plugins?.[constants.CMS_PLUGIN_ID]?.config
+  );
+  const contentType = contentTypes.find((ct) => ct.slug === typeSlug);
+  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);
+    } catch {
+      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();
+  };
+  if (!contentType) {
+    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 ?? t("cms.common.notFound", "Not found"),
+        description: localization?.CMS_ERROR_TYPE_NOT_FOUND_DESCRIPTION ?? t("cms.common.typeNotFoundDescription", "Content type not found")
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { testId: "cms-list-page", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-5xl space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          button.Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            onClick: () => void navigate?.(context.joinBasePath(basePath, "/cms")),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold tracking-tight", children: contentType.name }),
+          contentType.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: contentType.description })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        context.PermissionAccess,
+        {
+          permission: permissions.cmsPermissions.record.create({
+            contentType: typeSlug
+          }),
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            button.Button,
+            {
+              onClick: () => void navigate?.(context.joinBasePath(basePath, `/cms/${typeSlug}/new`)),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-2" }),
+                localization?.CMS_BUTTON_NEW_ITEM ?? t("cms.common.newItem", "New Item")
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative max-w-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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(lucideReact.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_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.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.PermissionAccess,
+          {
+            permission: permissions.cmsPermissions.record.create({
+              contentType: typeSlug
+            }),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              button.Button,
+              {
+                onClick: () => void navigate?.(
+                  context.joinBasePath(basePath, `/cms/${typeSlug}/new`)
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-2" }),
+                  localization?.CMS_BUTTON_CREATE ?? t("cms.common.create", "Create")
+                ]
+              }
+            )
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      ContentTable,
+      {
+        items,
+        total,
+        typeSlug,
+        basePath,
+        LinkComponent,
+        navigate,
+        onDelete: handleDelete,
+        isDeleting: deleteContent.isPending,
+        formatDate,
+        loadMore,
+        hasMore,
+        isLoadingMore,
+        localization,
+        classNames,
+        t
+      }
+    )
+  ] }) });
+}
+function ContentTable({
+  items,
+  total,
+  typeSlug,
+  basePath,
+  LinkComponent,
+  navigate,
+  onDelete,
+  isDeleting,
+  formatDate,
+  loadMore,
+  hasMore,
+  isLoadingMore,
+  localization,
+  classNames,
+  t
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn("border rounded-lg", classNames?.table),
+      "data-testid": "cms-content-table",
+      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, { className: classNames?.tableRow, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(
+              LinkComponent,
+              {
+                href: context.joinBasePath(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.PermissionAccess,
+                {
+                  permission: permissions.cmsPermissions.record.update({
+                    contentType: item.contentType?.slug ?? typeSlug,
+                    recordId: item.id,
+                    ...item.authorId ? { authorId: item.authorId } : {}
+                  }),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    button.Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      onClick: () => void navigate?.(
+                        context.joinBasePath(basePath, `/cms/${typeSlug}/${item.id}`)
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-4 w-4" })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                context.PermissionAccess,
+                {
+                  permission: permissions.cmsPermissions.record.delete({
+                    contentType: item.contentType?.slug ?? typeSlug,
+                    recordId: item.id,
+                    ...item.authorId ? { authorId: item.authorId } : {}
+                  }),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    button.Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      onClick: () => onDelete(item.id),
+                      disabled: isDeleting,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4 text-destructive" })
+                    }
+                  )
+                }
+              )
+            ] }) })
+          ] }, item.id)) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: utils.cn(
+              "flex items-center justify-between px-4 py-3 border-t",
+              classNames?.pagination
+            ),
+            "data-testid": "cms-content-pagination",
+            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(lucideReact.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+                    localization?.CMS_LIST_PAGINATION_NEXT ?? t("cms.list.paginationNext", "Next")
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.ContentListPage = ContentListPage;

package/dist/client/components/pages/content-list-page.internal.mjs

@@ -0,0 +1,332 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { ArrowLeft, Plus, Search, Loader2, Pencil, Trash2 } from 'lucide-react';
+import { Button } from '../../../ui/src/components/button.mjs';
+import { Input } from '../../../ui/src/components/input.mjs';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../../ui/src/components/table.mjs';
+import { useTranslate, useNotify, usePluginOverrides, useStack, joinBasePath, PermissionAccess } from '@btst/stack/context';
+import { cmsPermissions } from '../../../permissions.mjs';
+import { useListState } from '@btst/stack/client/hooks';
+import { orderCMSContentTypes } from '../../overrides.mjs';
+import { CMS_PLUGIN_ID } from '../../constants.mjs';
+import { cn } from '../../../utils.mjs';
+import { EmptyState } from '../shared/empty-state.mjs';
+import { PageWrapper } from '../shared/page-wrapper.mjs';
+import { useRouteLifecycle } from '../../../ui/src/hooks/use-route-lifecycle.mjs';
+import { useSuspenseContentTypes, useSuspenseContent, useContent, useDeleteContent } from '../../hooks/cms-hooks.mjs';
+
+const LIST_STATE_SCHEMA = {
+  q: { type: "string", default: "", history: "replace" }
+};
+const SEARCH_DEBOUNCE_MS = 300;
+function ContentListPage({ typeSlug }) {
+  const t = useTranslate();
+  const notify = useNotify();
+  const overrides = usePluginOverrides(CMS_PLUGIN_ID);
+  const { localization, classNames } = overrides;
+  const { router, plugins, basePath: stackBasePath } = useStack();
+  const navigate = router?.navigate;
+  const Link = router?.Link;
+  const basePath = plugins?.[CMS_PLUGIN_ID]?.site.basePath ?? stackBasePath;
+  useRouteLifecycle({
+    routeName: "contentList",
+    context: {
+      path: `/cms/${typeSlug}`,
+      params: { typeSlug },
+      isSSR: typeof window === "undefined"
+    },
+    overrides
+  });
+  const limit = 20;
+  const [{ q: search }, setListState] = useListState(
+    `cms-${typeSlug}`,
+    LIST_STATE_SCHEMA
+  );
+  const [searchInput, setSearchInput] = useState(search);
+  const lastSyncedSearch = useRef(search);
+  useEffect(() => {
+    if (search !== lastSyncedSearch.current) {
+      lastSyncedSearch.current = search;
+      setSearchInput(search);
+    }
+  }, [search]);
+  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: serverContentTypes } = useSuspenseContentTypes();
+  const contentTypes = orderCMSContentTypes(
+    serverContentTypes,
+    plugins?.[CMS_PLUGIN_ID]?.config
+  );
+  const contentType = contentTypes.find((ct) => ct.slug === typeSlug);
+  const defaultList = useSuspenseContent(typeSlug, { limit });
+  const searchedList = 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 = useDeleteContent(typeSlug);
+  const LinkComponent = Link || "a";
+  const handleDelete = async (id) => {
+    try {
+      await deleteContent.mutateAsync(id);
+    } catch {
+      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();
+  };
+  if (!contentType) {
+    return /* @__PURE__ */ jsx(PageWrapper, { testId: "cms-list-page", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-5xl", children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        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")
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx(PageWrapper, { testId: "cms-list-page", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-5xl space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            onClick: () => void navigate?.(joinBasePath(basePath, "/cms")),
+            children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight", children: contentType.name }),
+          contentType.description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: contentType.description })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        PermissionAccess,
+        {
+          permission: cmsPermissions.record.create({
+            contentType: typeSlug
+          }),
+          children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              onClick: () => void navigate?.(joinBasePath(basePath, `/cms/${typeSlug}/new`)),
+              children: [
+                /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
+                localization?.CMS_BUTTON_NEW_ITEM ?? t("cms.common.newItem", "New Item")
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative max-w-sm", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        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__ */ jsx(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__ */ jsx(
+      EmptyState,
+      {
+        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__ */ jsx(
+      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__ */ jsx(
+          PermissionAccess,
+          {
+            permission: cmsPermissions.record.create({
+              contentType: typeSlug
+            }),
+            children: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                onClick: () => void navigate?.(
+                  joinBasePath(basePath, `/cms/${typeSlug}/new`)
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
+                  localization?.CMS_BUTTON_CREATE ?? t("cms.common.create", "Create")
+                ]
+              }
+            )
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx(
+      ContentTable,
+      {
+        items,
+        total,
+        typeSlug,
+        basePath,
+        LinkComponent,
+        navigate,
+        onDelete: handleDelete,
+        isDeleting: deleteContent.isPending,
+        formatDate,
+        loadMore,
+        hasMore,
+        isLoadingMore,
+        localization,
+        classNames,
+        t
+      }
+    )
+  ] }) });
+}
+function ContentTable({
+  items,
+  total,
+  typeSlug,
+  basePath,
+  LinkComponent,
+  navigate,
+  onDelete,
+  isDeleting,
+  formatDate,
+  loadMore,
+  hasMore,
+  isLoadingMore,
+  localization,
+  classNames,
+  t
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("border rounded-lg", classNames?.table),
+      "data-testid": "cms-content-table",
+      children: [
+        /* @__PURE__ */ jsxs(Table, { children: [
+          /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableHead, { children: localization?.CMS_LIST_COLUMN_SLUG ?? t("cms.list.columnSlug", "Slug") }),
+            /* @__PURE__ */ jsx(TableHead, { children: localization?.CMS_LIST_COLUMN_CREATED ?? t("cms.list.columnCreated", "Created") }),
+            /* @__PURE__ */ jsx(TableHead, { children: localization?.CMS_LIST_COLUMN_UPDATED ?? t("cms.list.columnUpdated", "Updated") }),
+            /* @__PURE__ */ jsx(TableHead, { className: "w-[100px]", children: localization?.CMS_LIST_COLUMN_ACTIONS ?? t("cms.list.columnActions", "Actions") })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: items.map((item) => /* @__PURE__ */ jsxs(TableRow, { className: classNames?.tableRow, children: [
+            /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: /* @__PURE__ */ jsx(
+              LinkComponent,
+              {
+                href: joinBasePath(basePath, `/cms/${typeSlug}/${item.id}`),
+                className: "hover:underline",
+                children: item.slug
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TableCell, { children: formatDate(item.createdAt) }),
+            /* @__PURE__ */ jsx(TableCell, { children: formatDate(item.updatedAt) }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                PermissionAccess,
+                {
+                  permission: cmsPermissions.record.update({
+                    contentType: item.contentType?.slug ?? typeSlug,
+                    recordId: item.id,
+                    ...item.authorId ? { authorId: item.authorId } : {}
+                  }),
+                  children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      onClick: () => void navigate?.(
+                        joinBasePath(basePath, `/cms/${typeSlug}/${item.id}`)
+                      ),
+                      children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PermissionAccess,
+                {
+                  permission: cmsPermissions.record.delete({
+                    contentType: item.contentType?.slug ?? typeSlug,
+                    recordId: item.id,
+                    ...item.authorId ? { authorId: item.authorId } : {}
+                  }),
+                  children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      onClick: () => onDelete(item.id),
+                      disabled: isDeleting,
+                      children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 text-destructive" })
+                    }
+                  )
+                }
+              )
+            ] }) })
+          ] }, item.id)) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between px-4 py-3 border-t",
+              classNames?.pagination
+            ),
+            "data-testid": "cms-content-pagination",
+            children: [
+              /* @__PURE__ */ 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__ */ jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => loadMore(),
+                  disabled: isLoadingMore,
+                  children: [
+                    isLoadingMore && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+                    localization?.CMS_LIST_PAGINATION_NEXT ?? t("cms.list.paginationNext", "Next")
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ContentListPage };