@btst/plugin-cms 0.0.0-stage → 1.0.0

package/dist/client/components/loading/list-skeleton.mjs

@@ -0,0 +1,30 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Skeleton } from '../../../ui/src/components/skeleton.mjs';
+import { PageWrapper } from '../shared/page-wrapper.mjs';
+
+function ListSkeleton() {
+  return /* @__PURE__ */ jsx(PageWrapper, { testId: "cms-list-skeleton", 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: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-28" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "border rounded-lg", children: [
+      /* @__PURE__ */ jsx("div", { className: "border-b px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
+      ] }) }),
+      Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-b last:border-b-0", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })
+      ] }) }, i))
+    ] })
+  ] }) });
+}
+
+export { ListSkeleton };

package/dist/client/components/pages/404-page.cjs

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const button = require('../../../ui/src/components/button.cjs');
+const context = require('@btst/stack/context');
+const constants = require('../../constants.cjs');
+
+function NotFoundPage() {
+  const t = context.useTranslate();
+  const { localization } = context.usePluginOverrides(constants.CMS_PLUGIN_ID);
+  const { router, plugins, basePath: stackBasePath } = context.useStack();
+  const basePath = plugins?.[constants.CMS_PLUGIN_ID]?.site.basePath ?? stackBasePath;
+  const LinkComponent = router?.Link ?? "a";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-6xl font-bold text-muted-foreground mb-4", children: "404" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-medium text-foreground mb-2", children: localization?.CMS_404_TITLE ?? t("cms.common.404Title", "Page not found") }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mb-6 max-w-sm", children: localization?.CMS_404_DESCRIPTION ?? t(
+      "cms.common.404Description",
+      "The page you're looking for doesn't exist or has been moved."
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(LinkComponent, { href: context.joinBasePath(basePath, "/cms"), children: localization?.CMS_404_BACK ?? t("cms.common.404Back", "Back to CMS") }) })
+  ] });
+}
+
+exports.NotFoundPage = NotFoundPage;

package/dist/client/components/pages/404-page.mjs

@@ -0,0 +1,24 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '../../../ui/src/components/button.mjs';
+import { useTranslate, usePluginOverrides, useStack, joinBasePath } from '@btst/stack/context';
+import { CMS_PLUGIN_ID } from '../../constants.mjs';
+
+function NotFoundPage() {
+  const t = useTranslate();
+  const { localization } = usePluginOverrides(CMS_PLUGIN_ID);
+  const { router, plugins, basePath: stackBasePath } = useStack();
+  const basePath = plugins?.[CMS_PLUGIN_ID]?.site.basePath ?? stackBasePath;
+  const LinkComponent = router?.Link ?? "a";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-6xl font-bold text-muted-foreground mb-4", children: "404" }),
+    /* @__PURE__ */ jsx("h2", { className: "text-xl font-medium text-foreground mb-2", children: localization?.CMS_404_TITLE ?? t("cms.common.404Title", "Page not found") }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-6 max-w-sm", children: localization?.CMS_404_DESCRIPTION ?? t(
+      "cms.common.404Description",
+      "The page you're looking for doesn't exist or has been moved."
+    ) }),
+    /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsx(LinkComponent, { href: joinBasePath(basePath, "/cms"), children: localization?.CMS_404_BACK ?? t("cms.common.404Back", "Back to CMS") }) })
+  ] });
+}
+
+export { NotFoundPage };

package/dist/client/components/pages/content-editor-page.cjs

@@ -0,0 +1,84 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const constants = require('../../constants.cjs');
+const components = require('@btst/stack/client/components');
+const defaultError = require('../shared/default-error.cjs');
+const _404Page = require('./404-page.cjs');
+const permissions = require('../../../permissions.cjs');
+const editorSkeleton = require('../loading/editor-skeleton.cjs');
+const cmsHooks = require('../../hooks/cms-hooks.cjs');
+
+const ContentEditorPageInternal = React.lazy(
+  () => import('./content-editor-page.internal.cjs').then((m) => ({
+    default: m.ContentEditorPage
+  }))
+);
+function ContentEditorPageComponent({
+  typeSlug,
+  id
+}) {
+  const { onRouteError } = context.usePluginOverrides(constants.CMS_PLUGIN_ID);
+  const isNew = !id;
+  const path = isNew ? `/cms/${typeSlug}/new` : `/cms/${typeSlug}/${id}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path,
+      PageComponent: AuthorizedContentEditorPage,
+      ErrorComponent: defaultError.DefaultError,
+      LoadingComponent: editorSkeleton.EditorSkeleton,
+      NotFoundComponent: _404Page.NotFoundPage,
+      props: { typeSlug, id },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("contentEditor", error, {
+            path,
+            params: { typeSlug, id: id ?? "" },
+            isSSR: typeof window === "undefined"
+          });
+        }
+      }
+    }
+  );
+}
+function AuthorizedContentEditorPage({
+  typeSlug,
+  id
+}) {
+  if (!id) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components.PermissionRouteAccess,
+      {
+        permission: permissions.cmsPermissions.record.create({ contentType: typeSlug }),
+        LoadingComponent: editorSkeleton.EditorSkeleton,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ContentEditorPageInternal, { typeSlug })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(AuthorizedExistingContentEditorPage, { typeSlug, id });
+}
+function AuthorizedExistingContentEditorPage({
+  typeSlug,
+  id
+}) {
+  const { item } = cmsHooks.useSuspenseContentItem(typeSlug, id);
+  if (!item) return /* @__PURE__ */ jsxRuntime.jsx(ContentEditorPageInternal, { typeSlug, id });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.PermissionRouteAccess,
+    {
+      permission: permissions.cmsPermissions.record.update({
+        contentType: item.contentType?.slug ?? typeSlug,
+        recordId: item.id,
+        ...item.authorId ? { authorId: item.authorId } : {}
+      }),
+      LoadingComponent: editorSkeleton.EditorSkeleton,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ContentEditorPageInternal, { typeSlug, id })
+    }
+  );
+}
+
+exports.ContentEditorPageComponent = ContentEditorPageComponent;

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

@@ -0,0 +1,170 @@
+'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 context = require('@btst/stack/context');
+const overrides = require('../../overrides.cjs');
+const constants = require('../../constants.cjs');
+const contentForm = require('../forms/content-form.cjs');
+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 useRouteLifecycle = require('../../../ui/src/hooks/use-route-lifecycle.cjs');
+const cmsHooks = require('../../hooks/cms-hooks.cjs');
+
+function usePrefillParams() {
+  const [prefillData, setPrefillData] = React.useState({});
+  React.useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const parseAndSetPrefillData = () => {
+      const params = new URLSearchParams(window.location.search);
+      const data = {};
+      for (const [key, value] of params.entries()) {
+        if (key.startsWith("prefill_")) {
+          const fieldName = key.slice("prefill_".length);
+          if (fieldName) {
+            data[fieldName] = value;
+          }
+        }
+      }
+      setPrefillData(data);
+    };
+    parseAndSetPrefillData();
+    window.addEventListener("popstate", parseAndSetPrefillData);
+    return () => {
+      window.removeEventListener("popstate", parseAndSetPrefillData);
+    };
+  }, []);
+  return prefillData;
+}
+function convertPrefillToFormData(prefillParams, jsonSchema) {
+  const properties = jsonSchema.properties;
+  if (!properties) {
+    return prefillParams;
+  }
+  const result = {};
+  for (const [fieldName, value] of Object.entries(prefillParams)) {
+    const fieldSchema = properties[fieldName];
+    if (fieldSchema?.fieldType === "relation" && fieldSchema.relation) {
+      if (fieldSchema.relation.type === "belongsTo") {
+        result[fieldName] = { id: value };
+      } else {
+        result[fieldName] = [{ id: value }];
+      }
+    } else {
+      result[fieldName] = value;
+    }
+  }
+  return result;
+}
+function ContentEditorPage({ typeSlug, id }) {
+  const t = context.useTranslate();
+  const overrides$1 = context.usePluginOverrides(constants.CMS_PLUGIN_ID);
+  const { localization } = overrides$1;
+  const { router, plugins, basePath: stackBasePath } = context.useStack();
+  const navigate = router?.navigate;
+  const basePath = plugins?.[constants.CMS_PLUGIN_ID]?.site.basePath ?? stackBasePath;
+  const prefillParams = usePrefillParams();
+  useRouteLifecycle.useRouteLifecycle({
+    routeName: "contentEditor",
+    context: {
+      path: id ? `/cms/${typeSlug}/${id}` : `/cms/${typeSlug}/new`,
+      params: id ? { typeSlug, id } : { typeSlug },
+      isSSR: typeof window === "undefined"
+    },
+    overrides: overrides$1
+  });
+  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 isEditing = !!id;
+  const { item, isLoading: isLoadingItem } = cmsHooks.useContentItem(typeSlug, id ?? "");
+  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?.(context.joinBasePath(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 ?? t("cms.common.notFound", "Not found"),
+        description: localization?.CMS_ERROR_TYPE_NOT_FOUND_DESCRIPTION ?? t("cms.common.typeNotFoundDescription", "Content type not found")
+      }
+    ) }) });
+  }
+  if (isEditing && isLoadingItem) {
+    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(editorSkeleton.EditorSkeleton, {}) }) });
+  }
+  if (isEditing && !item) {
+    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 ?? 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) => {
+    await resourceForm.submit(data);
+  };
+  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(
+        button.Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          onClick: () => void navigate?.(context.joinBasePath(basePath, `/cms/${typeSlug}`)),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold tracking-tight", children: title })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      contentForm.ContentForm,
+      {
+        contentType,
+        initialData: isEditing ? item?.parsedData ?? void 0 : Object.keys(prefillParams).length > 0 ? convertPrefillToFormData(
+          prefillParams,
+          JSON.parse(contentType.jsonSchema)
+        ) : void 0,
+        initialSlug: item?.slug,
+        isEditing,
+        onSubmit: handleSubmit,
+        onCancel: () => void navigate?.(context.joinBasePath(basePath, `/cms/${typeSlug}`)),
+        fieldErrors: resourceForm.fieldErrors,
+        errorMessage: hasFieldErrors ? void 0 : resourceForm.error?.message,
+        isSubmitting: resourceForm.isSubmitting
+      },
+      isEditing ? `edit-${id}` : "create"
+    ),
+    isEditing && id && /* @__PURE__ */ jsxRuntime.jsx(inverseRelationsPanel.InverseRelationsPanel, { contentTypeSlug: typeSlug, itemId: id })
+  ] }) });
+}
+
+exports.ContentEditorPage = ContentEditorPage;

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

@@ -0,0 +1,168 @@
+'use client';
+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 { useTranslate, usePluginOverrides, useStack, joinBasePath } from '@btst/stack/context';
+import { orderCMSContentTypes } from '../../overrides.mjs';
+import { CMS_PLUGIN_ID } from '../../constants.mjs';
+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 { useRouteLifecycle } from '../../../ui/src/hooks/use-route-lifecycle.mjs';
+import { useSuspenseContentTypes, useContentItem, useContentItemForm } from '../../hooks/cms-hooks.mjs';
+
+function usePrefillParams() {
+  const [prefillData, setPrefillData] = useState({});
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const parseAndSetPrefillData = () => {
+      const params = new URLSearchParams(window.location.search);
+      const data = {};
+      for (const [key, value] of params.entries()) {
+        if (key.startsWith("prefill_")) {
+          const fieldName = key.slice("prefill_".length);
+          if (fieldName) {
+            data[fieldName] = value;
+          }
+        }
+      }
+      setPrefillData(data);
+    };
+    parseAndSetPrefillData();
+    window.addEventListener("popstate", parseAndSetPrefillData);
+    return () => {
+      window.removeEventListener("popstate", parseAndSetPrefillData);
+    };
+  }, []);
+  return prefillData;
+}
+function convertPrefillToFormData(prefillParams, jsonSchema) {
+  const properties = jsonSchema.properties;
+  if (!properties) {
+    return prefillParams;
+  }
+  const result = {};
+  for (const [fieldName, value] of Object.entries(prefillParams)) {
+    const fieldSchema = properties[fieldName];
+    if (fieldSchema?.fieldType === "relation" && fieldSchema.relation) {
+      if (fieldSchema.relation.type === "belongsTo") {
+        result[fieldName] = { id: value };
+      } else {
+        result[fieldName] = [{ id: value }];
+      }
+    } else {
+      result[fieldName] = value;
+    }
+  }
+  return result;
+}
+function ContentEditorPage({ typeSlug, id }) {
+  const t = useTranslate();
+  const overrides = usePluginOverrides(CMS_PLUGIN_ID);
+  const { localization } = overrides;
+  const { router, plugins, basePath: stackBasePath } = useStack();
+  const navigate = router?.navigate;
+  const basePath = plugins?.[CMS_PLUGIN_ID]?.site.basePath ?? stackBasePath;
+  const prefillParams = usePrefillParams();
+  useRouteLifecycle({
+    routeName: "contentEditor",
+    context: {
+      path: id ? `/cms/${typeSlug}/${id}` : `/cms/${typeSlug}/new`,
+      params: id ? { typeSlug, id } : { typeSlug },
+      isSSR: typeof window === "undefined"
+    },
+    overrides
+  });
+  const { contentTypes: serverContentTypes } = useSuspenseContentTypes();
+  const contentTypes = orderCMSContentTypes(
+    serverContentTypes,
+    plugins?.[CMS_PLUGIN_ID]?.config
+  );
+  const contentType = contentTypes.find((ct) => ct.slug === typeSlug);
+  const isEditing = !!id;
+  const { item, isLoading: isLoadingItem } = useContentItem(typeSlug, id ?? "");
+  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?.(joinBasePath(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 ?? t("cms.common.notFound", "Not found"),
+        description: localization?.CMS_ERROR_TYPE_NOT_FOUND_DESCRIPTION ?? t("cms.common.typeNotFoundDescription", "Content type not found")
+      }
+    ) }) });
+  }
+  if (isEditing && isLoadingItem) {
+    return /* @__PURE__ */ jsx(PageWrapper, { testId: "cms-editor-page", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx(EditorSkeleton, {}) }) });
+  }
+  if (isEditing && !item) {
+    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 ?? 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) => {
+    await resourceForm.submit(data);
+  };
+  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(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          onClick: () => void navigate?.(joinBasePath(basePath, `/cms/${typeSlug}`)),
+          children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight", children: title })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ContentForm,
+      {
+        contentType,
+        initialData: isEditing ? item?.parsedData ?? void 0 : Object.keys(prefillParams).length > 0 ? convertPrefillToFormData(
+          prefillParams,
+          JSON.parse(contentType.jsonSchema)
+        ) : void 0,
+        initialSlug: item?.slug,
+        isEditing,
+        onSubmit: handleSubmit,
+        onCancel: () => void navigate?.(joinBasePath(basePath, `/cms/${typeSlug}`)),
+        fieldErrors: resourceForm.fieldErrors,
+        errorMessage: hasFieldErrors ? void 0 : resourceForm.error?.message,
+        isSubmitting: resourceForm.isSubmitting
+      },
+      isEditing ? `edit-${id}` : "create"
+    ),
+    isEditing && id && /* @__PURE__ */ jsx(InverseRelationsPanel, { contentTypeSlug: typeSlug, itemId: id })
+  ] }) });
+}
+
+export { ContentEditorPage };

package/dist/client/components/pages/content-editor-page.mjs

@@ -0,0 +1,82 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { lazy } from 'react';
+import { usePluginOverrides } from '@btst/stack/context';
+import { CMS_PLUGIN_ID } from '../../constants.mjs';
+import { ComposedRoute, PermissionRouteAccess } from '@btst/stack/client/components';
+import { DefaultError } from '../shared/default-error.mjs';
+import { NotFoundPage } from './404-page.mjs';
+import { cmsPermissions } from '../../../permissions.mjs';
+import { EditorSkeleton } from '../loading/editor-skeleton.mjs';
+import { useSuspenseContentItem } from '../../hooks/cms-hooks.mjs';
+
+const ContentEditorPageInternal = lazy(
+  () => import('./content-editor-page.internal.mjs').then((m) => ({
+    default: m.ContentEditorPage
+  }))
+);
+function ContentEditorPageComponent({
+  typeSlug,
+  id
+}) {
+  const { onRouteError } = usePluginOverrides(CMS_PLUGIN_ID);
+  const isNew = !id;
+  const path = isNew ? `/cms/${typeSlug}/new` : `/cms/${typeSlug}/${id}`;
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path,
+      PageComponent: AuthorizedContentEditorPage,
+      ErrorComponent: DefaultError,
+      LoadingComponent: EditorSkeleton,
+      NotFoundComponent: NotFoundPage,
+      props: { typeSlug, id },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("contentEditor", error, {
+            path,
+            params: { typeSlug, id: id ?? "" },
+            isSSR: typeof window === "undefined"
+          });
+        }
+      }
+    }
+  );
+}
+function AuthorizedContentEditorPage({
+  typeSlug,
+  id
+}) {
+  if (!id) {
+    return /* @__PURE__ */ jsx(
+      PermissionRouteAccess,
+      {
+        permission: cmsPermissions.record.create({ contentType: typeSlug }),
+        LoadingComponent: EditorSkeleton,
+        children: /* @__PURE__ */ jsx(ContentEditorPageInternal, { typeSlug })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(AuthorizedExistingContentEditorPage, { typeSlug, id });
+}
+function AuthorizedExistingContentEditorPage({
+  typeSlug,
+  id
+}) {
+  const { item } = useSuspenseContentItem(typeSlug, id);
+  if (!item) return /* @__PURE__ */ jsx(ContentEditorPageInternal, { typeSlug, id });
+  return /* @__PURE__ */ jsx(
+    PermissionRouteAccess,
+    {
+      permission: cmsPermissions.record.update({
+        contentType: item.contentType?.slug ?? typeSlug,
+        recordId: item.id,
+        ...item.authorId ? { authorId: item.authorId } : {}
+      }),
+      LoadingComponent: EditorSkeleton,
+      children: /* @__PURE__ */ jsx(ContentEditorPageInternal, { typeSlug, id })
+    }
+  );
+}
+
+export { ContentEditorPageComponent };

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

@@ -0,0 +1,49 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const constants = require('../../constants.cjs');
+const components = require('@btst/stack/client/components');
+const defaultError = require('../shared/default-error.cjs');
+const _404Page = require('./404-page.cjs');
+const permissions = require('../../../permissions.cjs');
+const listSkeleton = require('../loading/list-skeleton.cjs');
+
+const ContentListPageInternal = React.lazy(
+  () => import('./content-list-page.internal.cjs').then((m) => ({
+    default: m.ContentListPage
+  }))
+);
+function ContentListPageComponent({
+  typeSlug
+}) {
+  const { onRouteError } = context.usePluginOverrides(constants.CMS_PLUGIN_ID);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path: `/cms/${typeSlug}`,
+      permission: permissions.cmsPermissions.record.read({
+        contentType: typeSlug,
+        scope: "collection"
+      }),
+      PageComponent: ContentListPageInternal,
+      ErrorComponent: defaultError.DefaultError,
+      LoadingComponent: listSkeleton.ListSkeleton,
+      NotFoundComponent: _404Page.NotFoundPage,
+      props: { typeSlug },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("contentList", error, {
+            path: `/cms/${typeSlug}`,
+            params: { typeSlug },
+            isSSR: typeof window === "undefined"
+          });
+        }
+      }
+    }
+  );
+}
+
+exports.ContentListPageComponent = ContentListPageComponent;