CMS Plugin

import type { ContentTypeConfig } from "@btst/stack/plugins/cms/api"
import { z } from "zod";

// ========== Product Schema ==========
// Use .meta({ fieldType: "..." }) to customize how fields render in the admin UI
export const ProductSchema = z.object({
  name: z.string().min(1).meta({ 
    description: "Product display name",
    placeholder: "Enter product name..." 
  }),
  description: z.string().meta({ 
    description: "Full product description",
    placeholder: "Describe this product...",
    fieldType: "textarea", // Renders as a textarea
  }),
  price: z.coerce.number().min(0).meta({ placeholder: "0.00" }),
  featured: z.boolean().default(false).meta({ 
    description: "Show on homepage featured section",
    fieldType: "switch", // Renders as a toggle switch
  }),
  category: z.enum(["Electronics", "Clothing", "Home", "Sports"]),
  image: z.string().optional().meta({
    description: "Product image",
    fieldType: "file", // Renders as file upload (uses uploadImage override)
  }),
});

// ========== Testimonial Schema ==========
export const TestimonialSchema = z.object({
  author: z.string().min(1).meta({ placeholder: "Customer name" }),
  company: z.string().optional().meta({ placeholder: "Company (optional)" }),
  quote: z.string().meta({ 
    description: "Customer testimonial text",
    placeholder: "What did they say?",
    fieldType: "textarea",
  }),
  rating: z.coerce.number().min(1).max(5).meta({ 
    description: "Rating out of 5 stars" 
  }),
});

// One application-owned declaration can configure both CMS factories.
export const contentTypes = [
  {
    name: "Product",
    slug: "product",
    description: "Products for the store",
    schema: ProductSchema,
  },
  {
    name: "Testimonial",
    slug: "testimonial",
    description: "Customer testimonials",
    schema: TestimonialSchema,
  },
] satisfies ContentTypeConfig[];

// ========== Type Exports for Client Hooks ==========

/** Inferred type for Product data */
export type ProductData = z.infer<typeof ProductSchema>;

/** Inferred type for Testimonial data */
export type TestimonialData = z.infer<typeof TestimonialSchema>;

/**
 * Type map for all CMS content types.
 * Use this with CMS hooks for type-safe parsedData.
 */
export type CMSTypes = {
  product: ProductData;
  testimonial: TestimonialData;
};

import { createBackendStack } from "@btst/stack/api"
import { cmsBackendPlugin } from "@btst/stack/plugins/cms/api"
import { contentTypes } from "./cms-schemas"

const { handler, dbSchema } = createBackendStack({
  basePath: "/api/data",
  plugins: {
    cms: cmsBackendPlugin({ contentTypes })
  },
  adapter: (db) => createMemoryAdapter(db)({})
})

export { handler, dbSchema }

import { createClientStack } from "@btst/stack/client"
import { cmsClientPlugin } from "@btst/stack/plugins/cms/client"
import { QueryClient } from "@tanstack/react-query"
import { contentTypes } from "./cms-schemas"

function getBaseURL(serverOrigin?: string) {
  if (typeof window !== "undefined") return window.location.origin
  return (
    serverOrigin ||
    process.env.BTST_SITE_URL ||
    process.env.BASE_URL ||
    "http://localhost:3000"
  )
}

export const getStackClient = (
  queryClient: QueryClient,
  options?: { headers?: Headers; origin?: string },
) => {
  const baseURL = getBaseURL(options?.origin)
  return createClientStack({
    api: {
      baseURL,
      basePath: "/api/data",
      ...(options?.headers ? { headers: options.headers } : {}),
    },
    site: { baseURL, basePath: "/pages" },
    queryClient,
    plugins: {
      cms: cmsClientPlugin({ contentTypes })
    }
  })
}

import { nextRouter } from "@btst/stack/next"

const stack = getStackClient(queryClient, clientOrigins)

<StackProvider
  stack={stack}
  router={nextRouter()}
  overrides={{
    cms: {
      uploadImage: async (file) => {
        // Your image upload logic
        return "https://example.com/image.png"
      },
    }
  }}
>
  {children}
</StackProvider>

@import "@btst/stack/plugins/cms/css";

const ProductSchema = z.object({
  name: z.string().min(1).meta({ 
    description: "Product display name",  // Shows as help text
    placeholder: "Enter name..."          // Input placeholder
  }),
  bio: z.string().meta({
    description: "About this product",
    fieldType: "textarea",  // Renders as a multi-line textarea
  }),
  featured: z.boolean().default(false).meta({
    fieldType: "switch",  // Renders as a toggle switch instead of checkbox
  }),
  category: z.enum(["A", "B", "C"]).meta({
    fieldType: "radio",  // Renders as radio buttons instead of select
  }),
});

const ProductSchema = z.object({
  name: z.string().min(1),
  image: z.string().optional().meta({ 
    description: "Product image URL",
    fieldType: "file",  // Renders as file upload
  }),
  // ...other fields
});

// In your StackProvider overrides
cms: {
  uploadImage: async (file: File) => {
    // Upload to S3, Cloudinary, etc. and return the URL
    const formData = new FormData();
    formData.append("file", file);
    const res = await fetch("/api/upload", { method: "POST", body: formData });
    const { url } = await res.json();
    return url;
  },
  // ...other overrides
}

const ProductSchema = z.object({
  name: z.string().min(1),
  variants: z
    .array(
      z.object({
        sku: z.string().meta({ placeholder: "SKU-001" }),
        price: z.coerce.number().min(0).meta({ placeholder: "0.00" }),
        notes: z.string().optional().meta({ fieldType: "textarea" }),
        // Nested file uploads work when `uploadImage` is provided in overrides.
        image: z.string().optional().meta({ fieldType: "file" }),
        // Nested belongsTo relations render the searchable picker inside the row.
        categoryId: z
          .object({ id: z.string() })
          .optional()
          .meta({
            fieldType: "relation",
            relation: {
              type: "belongsTo",
              targetType: "category",
              displayField: "name",
            },
          }),
      }),
    )
    .default([])
    .meta({ description: "Product variants" }),
});

cmsClientPlugin({
  // ... other config
  pageComponents: {
    // Replace the CMS dashboard page
    dashboard: MyCustomDashboard,
    // Replace the content list page — receives the route context as props
    contentList: ({ params }) => (
      <MyCustomContentList typeSlug={params.typeSlug} />
    ),
    // Replace the new content page — receives the route context as props
    newContent: ({ params }) => <MyCustomNewContent typeSlug={params.typeSlug} />,
    // Replace the edit content page — receives the route context as props
    editContent: ({ params }) => (
      <MyCustomEditContent typeSlug={params.typeSlug} id={params.id} />
    ),
  },
})

import { 
  useContentTypes,
  useContent,
  useContentItem,
  useContentItemBySlug 
} from "@btst/stack/plugins/cms/client/hooks"

// List all content types
function ContentTypesGrid() {
  const { contentTypes, isLoading } = useContentTypes()
  // ...
}

// List paginated content items
function ProductList() {
  const { items, total, hasMore } = useContent("product", { limit: 20 })
  // items[0].parsedData is Record<string, unknown>
}

import { useContent, useContentItem, useContentItemBySlug } from "@btst/stack/plugins/cms/client/hooks"
import type { CMSTypes } from "@/lib/cms-schemas"

// List products with type-safe parsedData
function ProductList() {
  const { items, total, hasMore } = useContent<CMSTypes, "product">("product", { 
    limit: 20 
  })
  
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          {/* All fields are fully typed! */}
          <h3>{item.parsedData.name}</h3>
          <p>${item.parsedData.price}</p>
          <span>{item.parsedData.category}</span>
          {item.parsedData.featured && <Badge>Featured</Badge>}
        </li>
      ))}
    </ul>
  )
}

// Get single item by ID with type safety
function ProductDetail({ id }: { id: string }) {
  const { item, isLoading } = useContentItem<CMSTypes, "product">("product", id)
  
  if (isLoading || !item) return <Skeleton />
  
  return (
    <div>
      <h1>{item.parsedData.name}</h1>
      <p>{item.parsedData.description}</p>
    </div>
  )
}

// Get single item by slug with type safety
function ProductPage({ slug }: { slug: string }) {
  const { item } = useContentItemBySlug<CMSTypes, "product">("product", slug)
  // item.parsedData.price is typed as number
}

import { 
  useCreateContent,
  useUpdateContent,
  useDeleteContent 
} from "@btst/stack/plugins/cms/client/hooks"
import type { ProductData } from "@/lib/cms-schemas"

function CreateProductForm() {
  // Type-safe mutation - TypeScript enforces correct data shape
  const createProduct = useCreateContent<ProductData>("product")
  
  const handleSubmit = async () => {
    await createProduct.mutateAsync({
      slug: "my-product",
      data: { 
        name: "New Product", 
        description: "A great product",
        price: 29.99,
        featured: false,
        category: "Electronics", // TypeScript autocompletes enum values!
      }
    })
  }
}

function UpdateProductForm({ id }: { id: string }) {
  const updateProduct = useUpdateContent<ProductData>("product")
  
  const handleUpdate = async () => {
    await updateProduct.mutateAsync({
      id,
      data: { data: { name: "Updated Name", price: 39.99 } }
    })
  }
}

cmsBackendPlugin({
  contentTypes: [...],
  hooks: {
    onBeforeCreateContent: async (data, context) => {
      console.log("Creating item in", context.typeSlug)
      // `data` is validated and canonical. Throw to deny.
    },
    onAfterCreateContent: async (item, context) => {
      console.log("Created:", item.slug)
      // Trigger webhooks, notifications, etc.
    },
    onBeforeUpdateContent: async (id, data, context) => {
      // `data` is the complete merged, validated record. Throw to deny.
    },
    onAfterUpdateContent: async (item, context) => {
      // ...
    },
    onBeforeDeleteContent: async (id, context) => {
      // Throw to deny: throw new Error("Cannot delete published content")
    },
    onAfterDeleteContent: async (id, context) => {
      // ...
    },
    onErrorExecuteContentOperation: async (error, operation, context) => {
      console.error(`CMS ${operation} error:`, error.message)
    },
  },
})

// lib/cms-schemas.ts
export const ProductSchema = z.object({
  name: z.string().min(1),
  price: z.coerce.number().min(0),
});

// lib/cms-schemas.ts
export type ProductData = z.infer<typeof ProductSchema>;
export type CMSTypes = { product: ProductData };

import { useContent } from "@btst/stack/plugins/cms/client/hooks"
import type { CMSTypes } from "@/lib/cms-schemas"

function ProductList() {
  const { items } = useContent<CMSTypes, "product">("product")
  
  // ✅ TypeScript knows all field types
  items[0].parsedData.name   // string
  items[0].parsedData.price  // number
  
  // ❌ TypeScript error: Property 'invalid' does not exist
  items[0].parsedData.invalid
}

// Adding a new required field to ProductSchema...
const ProductSchema = z.object({
  name: z.string(),
  price: z.number(),
  sku: z.string(), // New field
});

// ...triggers TypeScript errors in components
<span>{item.parsedData.sku}</span> // ✅ Now works
createProduct.mutate({ 
  slug: "x", 
  data: { name: "X", price: 10 } // ❌ Error: missing 'sku'
})

import { z } from "zod"
import { defineAuthorization } from "@btst/stack/authorization"
import { cmsPermissions } from "@btst/stack/plugins/cms/permissions"

export const authorization = defineAuthorization({
  identity: z.object({
    id: z.string(),
    role: z.enum(["editor", "admin"]),
  }),
  permissions: [cmsPermissions] as const,
  rules: ({ cms }) => [
    // Public record responses embed their content-type schema, so both reads
    // must be declared public. Omit either rule to deny that response.
    cms.record.read.allow(),
    cms.contentType.read.allow(),
    cms.record.create.when(({ identity }) => identity !== null),
    cms.record.update.when(
      ({ identity, facts }) =>
        identity?.role === "admin" || identity?.id === facts.authorId,
    ),
    cms.record.delete.when(
      ({ identity, facts }) =>
        identity?.role === "admin" || identity?.id === facts.authorId,
    ),
  ],
})

import { createServerAuth } from "@btst/stack/authorization/server"
import { authorization } from "./authorization"

const auth = createServerAuth({
  authorization,
  getIdentity: async ({ request }) => {
    const session = await getSession(request.headers)
    return session?.user ?? null
  },
})

export const myStack = createBackendStack({
  basePath: "/api/data",
  plugins: { cms: cmsBackendPlugin({ contentTypes }) },
  adapter: (db) => createMemoryAdapter(db)({}),
  auth,
})

import { createClientAuth } from "@btst/stack/authorization/client"
import { authorization } from "@/lib/authorization"

const auth = createClientAuth({
  authorization,
  getIdentity: () => getBrowserSession()?.user ?? null,
})

<StackProvider
  stack={stack}
  auth={auth}
  initialIdentity={initialIdentity}
  // router, overrides, ...
>
  {children}
</StackProvider>

// Identity comes from this request; authorization is enforced.
await myStack.forRequest(request).operations.cms.updateContentItem({
  typeSlug: "product",
  id: productId,
  body: { data: { name: "Updated" } },
})

// Trusted application code skips only user authorization. Validation,
// fact derivation, execution, and lifecycle hooks still run.
await myStack.trusted.cms.deleteContentItem({
  typeSlug: "product",
  id: productId,
})

import type { CMSPluginOverrides, AutoFormInputComponentProps } from "@btst/stack/plugins/cms/client"

// Define a custom component
function MyColorPicker({ field, label, isRequired, fieldConfigItem }: AutoFormInputComponentProps) {
  return (
    <div className="space-y-2">
      <label className="text-sm font-medium">
        {label}
        {isRequired && <span className="text-destructive"> *</span>}
      </label>
      <input
        type="color"
        value={field.value || "#000000"}
        onChange={(e) => field.onChange(e.target.value)}
        className="h-10 w-full cursor-pointer"
      />
      {fieldConfigItem?.description && (
        <p className="text-sm text-muted-foreground">{String(fieldConfigItem.description)}</p>
      )}
    </div>
  )
}

// In your StackProvider overrides:
cms: {
  fieldComponents: {
    // Override the built-in "file" type
    file: ({ field, label, isRequired }) => (
      <MyCustomFileUpload
        value={field.value}
        onChange={field.onChange}
        label={label}
        required={isRequired}
      />
    ),
    // Add a custom "color" type
    color: MyColorPicker,
    // Add a custom "richText" type
    richText: ({ field, label }) => (
      <MyRichTextEditor value={field.value} onChange={field.onChange} label={label} />
    ),
  },
  // ...other overrides
}

// In your schema definition
const ProductSchema = z.object({
  name: z.string().min(1),
  primaryColor: z.string().optional().meta({
    description: "Brand color",
    fieldType: "color",     // Uses custom "color" component from fieldComponents
  }),
  longDescription: z.string().optional().meta({
    description: "Rich text content",
    fieldType: "richText",  // Uses custom "richText" component from fieldComponents
  }),
});

import { CMSFileUpload } from "@btst/stack/plugins/cms/client"

// In your fieldComponents override
cms: {
  fieldComponents: {
    // Use the built-in component with your upload function
    file: (props) => (
      <CMSFileUpload {...props} uploadImage={myUploadFn} />
    ),
    // Or create a wrapper with custom styling
    customImage: (props) => (
      <div className="my-custom-wrapper">
        <CMSFileUpload {...props} uploadImage={myUploadFn} />
      </div>
    ),
  },
}

import { z } from "zod";

// Category schema (the target of the relation)
export const CategorySchema = z.object({
  name: z.string().min(1).meta({
    description: "Category name",
    placeholder: "Enter category name...",
  }),
  description: z.string().optional().meta({
    description: "Optional category description",
    fieldType: "textarea",
  }),
  color: z.string().optional().meta({
    description: "Category color (hex code)",
    placeholder: "#3b82f6",
  }),
});

// Resource schema with a manyToMany relation to categories
export const ResourceSchema = z.object({
  name: z.string().min(1).meta({
    description: "Resource name",
    placeholder: "Enter resource name...",
  }),
  description: z.string().meta({
    description: "Full resource description",
    fieldType: "textarea",
  }),
  website: z.string().url().optional().meta({
    description: "Website URL",
    placeholder: "https://example.com",
  }),
  // Relation field - manyToMany with categories
  categoryIds: z
    .array(z.object({ id: z.string() }))
    .default([])
    .meta({
      fieldType: "relation",
      relation: {
        type: "manyToMany",
        targetType: "category",    // Slug of the target content type
        displayField: "name",      // Field to display in the selector
        creatable: true,           // Allow creating new categories inline
      },
    }),
});

export type CategoryData = z.infer<typeof CategorySchema>;
export type ResourceData = z.infer<typeof ResourceSchema>;

export type CMSTypes = {
  category: CategoryData;
  resource: ResourceData;
};

// Resource Schema - the "one" side
export const ResourceSchema = z.object({
  name: z.string().min(1),
  description: z.string(),
  // ... other fields
});

// Comment Schema - the "many" side (belongs to Resource)
export const CommentSchema = z.object({
  author: z.string().min(1).meta({
    description: "Comment author name",
    placeholder: "Your name...",
  }),
  content: z.string().min(1).meta({
    description: "Comment content",
    placeholder: "Write your comment...",
    fieldType: "textarea",
  }),
  // belongsTo relation - links to a single Resource
  // Unlike manyToMany (array), belongsTo stores a single { id: string }
  resourceId: z.object({ id: z.string() }).optional().meta({
    fieldType: "relation",
    relation: {
      type: "belongsTo",
      targetType: "resource",
      displayField: "name",
    },
  }),
});

import { 
  useContentItemPopulated,
  useContentByRelation 
} from "@btst/stack/plugins/cms/client/hooks"
import type { CMSTypes } from "@/lib/cms-schemas"

// Get a single resource with its related categories populated
function ResourceDetail({ id }: { id: string }) {
  const { item, isLoading } = useContentItemPopulated<CMSTypes, "resource">(
    "resource", 
    id
  )

  if (isLoading || !item) return <Skeleton />

  return (
    <div>
      <h1>{item.parsedData.name}</h1>
      <p>{item.parsedData.description}</p>
      
      {/* Related categories are populated in _relations */}
      <div className="flex gap-2">
        {item._relations?.categoryIds?.map((category) => (
          <span key={category.id} className="badge">
            {category.parsedData.name}
          </span>
        ))}
      </div>
    </div>
  )
}

// Get resources filtered by a specific category
function CategoryResources({ categoryId }: { categoryId: string }) {
  const { items, isLoading } = useContentByRelation<CMSTypes, "resource">(
    "resource",
    "categoryIds",  // Field name containing the relation
    categoryId      // ID of the related category
  )

  return (
    <ul>
      {items.map((resource) => (
        <li key={resource.id}>{resource.parsedData.name}</li>
      ))}
    </ul>
  )
}

categoryIds: z
  .array(z.object({ id: z.string() }))
  .default([])
  .meta({
    fieldType: "relation",
    relation: {
      type: "manyToMany",
      targetType: "category",
      displayField: "name",
      creatable: true,  // Shows "Create new..." option in selector
    },
  }),

┌─────────────────────────────────────────────┐
│ 📝 Comments (3)                         [▼] │
├─────────────────────────────────────────────┤
│ • "Great resource!" by John     [Edit] [🗑] │
│ • "Very helpful" by Jane        [Edit] [🗑] │
│ • "Thanks!" by Bob              [Edit] [🗑] │
│                                             │
│ [+ Add Comment]                             │
└─────────────────────────────────────────────┘

# Get resource with populated categories
curl /api/data/content/resource/abc123/populated

# Get all resources linked to a specific category
curl /api/data/content/resource/by-relation?field=categoryIds&targetId=cat456

# Get inverse relations for a resource (what types reference it)
curl /api/data/content-types/resource/inverse-relations?itemId=abc123

# Get all comments for a specific resource
curl /api/data/content-types/resource/inverse-relations/comment?itemId=abc123&fieldName=resourceId

// Link to existing categories (array format)
await fetch("/api/data/content/resource", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    slug: "my-resource",
    data: {
      name: "My Resource",
      description: "A great resource",
      categoryIds: [
        { id: "existing-category-id-1" },
        { id: "existing-category-id-2" },
      ],
    },
  }),
});

// Create new categories inline using _new flag
await fetch("/api/data/content/resource", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    slug: "my-resource",
    data: {
      name: "My Resource",
      description: "A great resource",
      categoryIds: [
        { id: "existing-category-id" },
        { _new: true, data: { name: "New Category", color: "#10b981" } },
      ],
    },
  }),
});

// Create comment linked to a resource (single object format)
await fetch("/api/data/content/comment", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    slug: "my-comment",
    data: {
      author: "John Doe",
      content: "Great resource!",
      resourceId: { id: "existing-resource-id" },  // Single object, not array
    },
  }),
});

"use client"
import { useContent } from "@btst/stack/plugins/cms/client/hooks"
import type { CMSTypes } from "@/lib/cms-schemas"

export default function DirectoryPage() {
  const { items: resources } = useContent<CMSTypes, "resource">("resource")
  const { items: categories } = useContent<CMSTypes, "category">("category")
  const [search, setSearch] = useState("")

  const filteredResources = resources.filter((r) =>
    r.parsedData.name.toLowerCase().includes(search.toLowerCase())
  )

  return (
    <div className="flex gap-8">
      {/* Sidebar with categories */}
      <aside className="w-64">
        <h3>Categories</h3>
        <ul>
          {categories.map((cat) => (
            <li key={cat.id}>
              <Link href={`/directory/category/${cat.id}`}>
                {cat.parsedData.name}
              </Link>
            </li>
          ))}
        </ul>
      </aside>

      {/* Main content */}
      <main className="flex-1">
        <input
          type="text"
          placeholder="Search resources..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        
        <div className="grid grid-cols-3 gap-4">
          {filteredResources.map((resource) => (
            <Link key={resource.id} href={`/directory/${resource.id}`}>
              <h3>{resource.parsedData.name}</h3>
              <p>{resource.parsedData.description}</p>
            </Link>
          ))}
        </div>
      </main>
    </div>
  )
}

cms: cmsClientPlugin({
  hooks: {
    beforeLoadDashboard: async (context) => {
      await warmDashboardDependencies(context.headers)
    },
    beforeLoadContentList: async (typeSlug, context) => {
      await recordContentListLoad(typeSlug, context.headers)
    },
    beforeLoadContentEditor: async (typeSlug, id, context) => {
      await recordEditorLoad(typeSlug, id, context.headers)
    },
    onErrorLoad(error, context) {
      reportCMSLoaderError(error, context)
    },
  }
})

import { zodToFormSchema } from "@btst/stack/plugins/cms/client"

const jsonSchema = zodToFormSchema(ProductSchema, {
  steps: [
    { id: "basic", title: "Basic Info" },
    { id: "details", title: "Details" }
  ],
  stepGroupMap: {
    name: 0,
    price: 0,
    description: 1
  }
})

import { formSchemaToZod } from "@btst/stack/plugins/cms/client"

// Convert JSON Schema from database to Zod for validation
const zodSchema = formSchemaToZod(jsonSchema)
const result = zodSchema.safeParse(data)

const types = await myStack.trusted.cms.listContentTypes({})
const items = await myStack.trusted.cms.listContentItems({
  typeSlug: "posts",
  query: { limit: 10 },
})
await myStack.forRequest(request).operations.cms.createContentItem({
  typeSlug: "client-profile",
  body: { slug, data },
})

import { dehydrate, HydrationBoundary } from "@tanstack/react-query"
import { getOrCreateQueryClient } from "@/lib/query-client"
import { getStackClient } from "@/lib/stack-client"
import { myStack } from "@/lib/stack"
import { metaElementsToObject, normalizePath } from "@btst/stack/client"
import type { Metadata } from "next"

// Generate one static page per content type slug
export async function generateStaticParams() {
  const types = await myStack.trusted.cms.listContentTypes({})
  return types.map((t) => ({ typeSlug: t.slug }))
}

export async function generateMetadata(
  { params }: { params: { typeSlug: string } }
): Promise<Metadata> {
  const queryClient = getOrCreateQueryClient()
  const stackClient = getStackClient(queryClient)
  const route = stackClient.router.getRoute(normalizePath(["cms", params.typeSlug]))
  if (!route) return { title: "Content" }
  await myStack.raw.cms.prefetchForRoute("contentList", queryClient, { typeSlug: params.typeSlug })
  return metaElementsToObject(route.meta?.() ?? []) satisfies Metadata
}

export default async function ContentListPage({ params }: { params: { typeSlug: string } }) {
  const queryClient = getOrCreateQueryClient()
  const stackClient = getStackClient(queryClient)
  const route = stackClient.router.getRoute(normalizePath(["cms", params.typeSlug]))
  if (!route) return null
  await myStack.raw.cms.prefetchForRoute("contentList", queryClient, { typeSlug: params.typeSlug })
  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <route.PageComponent />
    </HydrationBoundary>
  )
}

import { revalidatePath } from "next/cache"
import { cmsBackendPlugin } from "@btst/stack/plugins/cms/api"

cmsBackendPlugin({
  contentTypes: { ... },
  hooks: {
    onAfterCreateContent: async (item, context) => {
      revalidatePath(`/cms/${context.typeSlug}`, "page")
    },
    onAfterUpdateContent: async (item, context) => {
      revalidatePath(`/cms/${context.typeSlug}`, "page")
    },
    onAfterDeleteContent: async (id, context) => {
      revalidatePath(`/cms/${context.typeSlug}`, "page")
    },
  },
})

import { cmsClientPlugin } from "@btst/stack/plugins/cms/client"
// Import your ejected (and customized) page components
import { DashboardPageComponent } from "@/components/btst/cms/client/components/pages/dashboard-page"
import { ContentListPageComponent } from "@/components/btst/cms/client/components/pages/content-list-page"

cmsClientPlugin({
  pageComponents: {
    dashboard: DashboardPageComponent,          // replaces the CMS dashboard page
    // Param routes receive the route context ({ params }) as props
    contentList: ({ params }) => (
      <ContentListPageComponent typeSlug={params.typeSlug} />
    ),
    // newContent, editContent — omit to keep built-in defaults
  },
})