@btst/stack 3.0.0-rc.1 → 3.0.0-rc.3

package/dist/packages/stack/src/plugins/route-docs/generator.mjs

@@ -1,3 +1,4 @@
+import { ROUTE_DOCS_PLUGIN_ID } from './client/constants.mjs';
 import * as z from 'zod';
 
 function extractPathParams(path) {
@@ -153,7 +154,8 @@ function extractQueryParams(querySchema) {
 async function fetchAllSitemapEntries(context) {
   const allEntries = [];
   for (const [pluginKey, plugin] of Object.entries(context.plugins)) {
-    if (pluginKey === "routeDocs" || plugin.name === "route-docs") {
+    const pluginId = plugin.id;
+    if (pluginId === ROUTE_DOCS_PLUGIN_ID) {
       continue;
     }
     if (plugin.sitemap) {
@@ -174,7 +176,7 @@ async function fetchAllSitemapEntries(context) {
 }
 function generateRouteDocsSchema(context, sitemapEntries = []) {
   const documentedPlugins = [];
-  const sitemapByPlugin = {};
+  const sitemapByPlugin = /* @__PURE__ */ Object.create(null);
   for (const entry of sitemapEntries) {
     if (!sitemapByPlugin[entry.pluginKey]) {
       sitemapByPlugin[entry.pluginKey] = [];
@@ -182,7 +184,8 @@ function generateRouteDocsSchema(context, sitemapEntries = []) {
     sitemapByPlugin[entry.pluginKey].push(entry);
   }
   for (const [pluginKey, plugin] of Object.entries(context.plugins)) {
-    if (pluginKey === "routeDocs" || plugin.name === "route-docs") {
+    const pluginId = plugin.id;
+    if (pluginId === ROUTE_DOCS_PLUGIN_ID) {
       continue;
     }
     const pluginRoutes = plugin.routes(context);
@@ -212,7 +215,7 @@ function generateRouteDocsSchema(context, sitemapEntries = []) {
     if (documentedRoutes.length > 0) {
       documentedPlugins.push({
         key: pluginKey,
-        name: plugin.name,
+        name: pluginId,
         routes: documentedRoutes,
         sitemapEntries: sitemapByPlugin[pluginKey] || []
       });

package/dist/packages/stack/src/plugins/ui-builder/client/components/page-renderer.cjs

@@ -9,10 +9,14 @@ const layerRenderer = require('../../../../../../ui/src/components/ui-builder/la
 const uiBuilderHooks = require('../hooks/ui-builder-hooks.cjs');
 const registry = require('../registry.cjs');
 const index = require('../localization/index.cjs');
+const overrides = require('../overrides.cjs');
+const constants = require('../constants.cjs');
+const permissions = require('@btst/stack/plugins/cms/permissions');
+const uiBuilder = require('@btst/stack/plugins/ui-builder');
 
 function DefaultLoadingComponent() {
   const t = context.useTranslate();
-  const { localization } = context.usePluginOverrides("ui-builder");
+  const { localization } = context.usePluginOverrides(constants.UI_BUILDER_PLUGIN_ID);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-pulse text-muted-foreground", children: localization?.pageRenderer?.loading ?? t(
     "uiBuilder.pageRenderer.loading",
     index.uiBuilderLocalization.pageRenderer.loading
@@ -20,7 +24,7 @@ function DefaultLoadingComponent() {
 }
 function DefaultErrorComponent({ error }) {
   const t = context.useTranslate();
-  const { localization } = context.usePluginOverrides("ui-builder");
+  const { localization } = context.usePluginOverrides(constants.UI_BUILDER_PLUGIN_ID);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center min-h-[200px] p-4", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-destructive font-medium", children: localization?.pageRenderer?.error ?? t(
       "uiBuilder.pageRenderer.error",
@@ -31,15 +35,19 @@ function DefaultErrorComponent({ error }) {
 }
 function DefaultNotFoundComponent() {
   const t = context.useTranslate();
-  const { localization } = context.usePluginOverrides("ui-builder");
+  const { localization } = context.usePluginOverrides(constants.UI_BUILDER_PLUGIN_ID);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: localization?.pageRenderer?.notFound ?? t(
     "uiBuilder.pageRenderer.notFound",
     index.uiBuilderLocalization.pageRenderer.notFound
   ) }) });
 }
+function useComponentRegistry(standaloneRegistry) {
+  const { plugins } = context.useStack();
+  return standaloneRegistry ?? overrides.resolveUIBuilderComponents(plugins?.[constants.UI_BUILDER_PLUGIN_ID]?.config) ?? registry.defaultComponentRegistry;
+}
 function PageRenderer({
   slug,
-  componentRegistry = registry.defaultComponentRegistry,
+  componentRegistry: standaloneRegistry,
   variableValues,
   functionRegistry,
   LoadingComponent = DefaultLoadingComponent,
@@ -47,6 +55,7 @@ function PageRenderer({
   NotFoundComponent = DefaultNotFoundComponent,
   className
 }) {
+  const componentRegistry = useComponentRegistry(standaloneRegistry);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactErrorBoundary.ErrorBoundary,
     {
@@ -82,25 +91,45 @@ function SuspensePageRendererContent({
     return /* @__PURE__ */ jsxRuntime.jsx(NotFoundComponent, {});
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    layerRenderer,
+    context.PermissionAccess,
     {
-      className,
-      page: rootLayer,
-      componentRegistry,
-      variables,
-      variableValues,
-      functionRegistry
+      permission: permissions.cmsPermissions.record.read({
+        contentType: uiBuilder.UI_BUILDER_TYPE_SLUG,
+        scope: "record",
+        recordId: page.id,
+        ...page.authorId ? { authorId: page.authorId } : {}
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        context.PermissionAccess,
+        {
+          permission: permissions.cmsPermissions.contentType.read({
+            contentType: uiBuilder.UI_BUILDER_TYPE_SLUG
+          }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            layerRenderer,
+            {
+              className,
+              page: rootLayer,
+              componentRegistry,
+              variables,
+              variableValues,
+              functionRegistry
+            }
+          )
+        }
+      )
     }
   );
 }
 function SuspensePageRenderer({
   slug,
-  componentRegistry = registry.defaultComponentRegistry,
+  componentRegistry: standaloneRegistry,
   variableValues,
   functionRegistry,
   NotFoundComponent = DefaultNotFoundComponent,
   className
 }) {
+  const componentRegistry = useComponentRegistry(standaloneRegistry);
   return /* @__PURE__ */ jsxRuntime.jsx(
     SuspensePageRendererContent,
     {

package/dist/packages/stack/src/plugins/ui-builder/client/components/page-renderer.mjs

@@ -2,15 +2,19 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { useTranslate, usePluginOverrides } from '@btst/stack/context';
+import { useStack, PermissionAccess, useTranslate, usePluginOverrides } from '@btst/stack/context';
 import LayerRenderer from '../../../../../../ui/src/components/ui-builder/layer-renderer.mjs';
 import { useSuspenseUIBuilderPageBySlug } from '../hooks/ui-builder-hooks.mjs';
 import { defaultComponentRegistry } from '../registry.mjs';
 import { uiBuilderLocalization } from '../localization/index.mjs';
+import { resolveUIBuilderComponents } from '../overrides.mjs';
+import { UI_BUILDER_PLUGIN_ID } from '../constants.mjs';
+import { cmsPermissions } from '@btst/stack/plugins/cms/permissions';
+import { UI_BUILDER_TYPE_SLUG } from '@btst/stack/plugins/ui-builder';
 
 function DefaultLoadingComponent() {
   const t = useTranslate();
-  const { localization } = usePluginOverrides("ui-builder");
+  const { localization } = usePluginOverrides(UI_BUILDER_PLUGIN_ID);
   return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[200px]", children: /* @__PURE__ */ jsx("div", { className: "animate-pulse text-muted-foreground", children: localization?.pageRenderer?.loading ?? t(
     "uiBuilder.pageRenderer.loading",
     uiBuilderLocalization.pageRenderer.loading
@@ -18,7 +22,7 @@ function DefaultLoadingComponent() {
 }
 function DefaultErrorComponent({ error }) {
   const t = useTranslate();
-  const { localization } = usePluginOverrides("ui-builder");
+  const { localization } = usePluginOverrides(UI_BUILDER_PLUGIN_ID);
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center min-h-[200px] p-4", children: [
     /* @__PURE__ */ jsx("div", { className: "text-destructive font-medium", children: localization?.pageRenderer?.error ?? t(
       "uiBuilder.pageRenderer.error",
@@ -29,15 +33,19 @@ function DefaultErrorComponent({ error }) {
 }
 function DefaultNotFoundComponent() {
   const t = useTranslate();
-  const { localization } = usePluginOverrides("ui-builder");
+  const { localization } = usePluginOverrides(UI_BUILDER_PLUGIN_ID);
   return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[200px]", children: /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: localization?.pageRenderer?.notFound ?? t(
     "uiBuilder.pageRenderer.notFound",
     uiBuilderLocalization.pageRenderer.notFound
   ) }) });
 }
+function useComponentRegistry(standaloneRegistry) {
+  const { plugins } = useStack();
+  return standaloneRegistry ?? resolveUIBuilderComponents(plugins?.[UI_BUILDER_PLUGIN_ID]?.config) ?? defaultComponentRegistry;
+}
 function PageRenderer({
   slug,
-  componentRegistry = defaultComponentRegistry,
+  componentRegistry: standaloneRegistry,
   variableValues,
   functionRegistry,
   LoadingComponent = DefaultLoadingComponent,
@@ -45,6 +53,7 @@ function PageRenderer({
   NotFoundComponent = DefaultNotFoundComponent,
   className
 }) {
+  const componentRegistry = useComponentRegistry(standaloneRegistry);
   return /* @__PURE__ */ jsx(
     ErrorBoundary,
     {
@@ -80,25 +89,45 @@ function SuspensePageRendererContent({
     return /* @__PURE__ */ jsx(NotFoundComponent, {});
   }
   return /* @__PURE__ */ jsx(
-    LayerRenderer,
+    PermissionAccess,
     {
-      className,
-      page: rootLayer,
-      componentRegistry,
-      variables,
-      variableValues,
-      functionRegistry
+      permission: cmsPermissions.record.read({
+        contentType: UI_BUILDER_TYPE_SLUG,
+        scope: "record",
+        recordId: page.id,
+        ...page.authorId ? { authorId: page.authorId } : {}
+      }),
+      children: /* @__PURE__ */ jsx(
+        PermissionAccess,
+        {
+          permission: cmsPermissions.contentType.read({
+            contentType: UI_BUILDER_TYPE_SLUG
+          }),
+          children: /* @__PURE__ */ jsx(
+            LayerRenderer,
+            {
+              className,
+              page: rootLayer,
+              componentRegistry,
+              variables,
+              variableValues,
+              functionRegistry
+            }
+          )
+        }
+      )
     }
   );
 }
 function SuspensePageRenderer({
   slug,
-  componentRegistry = defaultComponentRegistry,
+  componentRegistry: standaloneRegistry,
   variableValues,
   functionRegistry,
   NotFoundComponent = DefaultNotFoundComponent,
   className
 }) {
+  const componentRegistry = useComponentRegistry(standaloneRegistry);
   return /* @__PURE__ */ jsx(
     SuspensePageRendererContent,
     {

package/dist/packages/stack/src/plugins/ui-builder/client/components/pages/page-builder-page.cjs

@@ -7,6 +7,10 @@ const components = require('@btst/stack/client/components');
 const context = require('@btst/stack/context');
 const pageBuilderSkeleton = require('../loading/page-builder-skeleton.cjs');
 const defaultError = require('../shared/default-error.cjs');
+const constants = require('../../constants.cjs');
+const permissions = require('@btst/stack/plugins/cms/permissions');
+const uiBuilder = require('@btst/stack/plugins/ui-builder');
+const uiBuilderHooks = require('../../hooks/ui-builder-hooks.cjs');
 
 const PageBuilderPageInternal = React.lazy(
   () => import('./page-builder-page.internal.cjs').then((m) => ({
@@ -14,14 +18,13 @@ const PageBuilderPageInternal = React.lazy(
   }))
 );
 function PageBuilderPage({ id }) {
-  const { onRouteError } = context.usePluginOverrides("ui-builder");
+  const { onRouteError } = context.usePluginOverrides(constants.UI_BUILDER_PLUGIN_ID);
   const path = id ? `/ui-builder/${id}/edit` : "/ui-builder/new";
   return /* @__PURE__ */ jsxRuntime.jsx(
     components.ComposedRoute,
     {
       path,
-      permission: id ? { resource: "ui-builder:page", action: "update", params: { id } } : { resource: "ui-builder:page", action: "create" },
-      PageComponent: PageBuilderPageInternal,
+      PageComponent: AuthorizedPageBuilderPage,
       ErrorComponent: defaultError.DefaultError,
       LoadingComponent: pageBuilderSkeleton.PageBuilderSkeleton,
       NotFoundComponent: () => null,
@@ -36,5 +39,36 @@ function PageBuilderPage({ id }) {
     }
   );
 }
+function AuthorizedPageBuilderPage({ id }) {
+  if (!id) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components.PermissionRouteAccess,
+      {
+        permission: permissions.cmsPermissions.record.create({
+          contentType: uiBuilder.UI_BUILDER_TYPE_SLUG
+        }),
+        LoadingComponent: pageBuilderSkeleton.PageBuilderSkeleton,
+        children: /* @__PURE__ */ jsxRuntime.jsx(PageBuilderPageInternal, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(AuthorizedExistingPageBuilderPage, { id });
+}
+function AuthorizedExistingPageBuilderPage({ id }) {
+  const { page } = uiBuilderHooks.useSuspenseUIBuilderPage(id);
+  if (!page) return /* @__PURE__ */ jsxRuntime.jsx(PageBuilderPageInternal, { id });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.PermissionRouteAccess,
+    {
+      permission: permissions.cmsPermissions.record.update({
+        contentType: uiBuilder.UI_BUILDER_TYPE_SLUG,
+        recordId: page.id,
+        ...page.authorId ? { authorId: page.authorId } : {}
+      }),
+      LoadingComponent: pageBuilderSkeleton.PageBuilderSkeleton,
+      children: /* @__PURE__ */ jsxRuntime.jsx(PageBuilderPageInternal, { id })
+    }
+  );
+}
 
 exports.PageBuilderPage = PageBuilderPage;

package/dist/packages/stack/src/plugins/ui-builder/client/components/pages/page-builder-page.internal.cjs

@@ -4,6 +4,8 @@
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const context = require('@btst/stack/context');
+const permissions = require('@btst/stack/plugins/cms/permissions');
+const uiBuilder = require('@btst/stack/plugins/ui-builder');
 const button = require('../../../../../../../ui/src/components/button.cjs');
 const input = require('../../../../../../../ui/src/components/input.cjs');
 const select = require('../../../../../../../ui/src/components/select.cjs');
@@ -14,6 +16,8 @@ const index$1 = require('../../../../../../../ui/src/components/ui-builder/index
 const layerStore = require('../../../../../../../ui/src/lib/ui-builder/store/layer-store.cjs');
 const context$1 = require('@btst/stack/plugins/ai-chat/client/context');
 const uiBuilderHooks = require('../../hooks/ui-builder-hooks.cjs');
+const overrides = require('../../overrides.cjs');
+const constants = require('../../constants.cjs');
 const index = require('../../localization/index.cjs');
 const registry = require('../../registry.cjs');
 
@@ -116,15 +120,11 @@ function PageBuilderPageContent({
 }) {
   const t = context.useTranslate();
   const notify = context.useNotify();
-  const {
-    componentRegistry: customRegistry,
-    functionRegistry,
-    localization
-  } = context.usePluginOverrides("ui-builder");
-  const { router } = context.useStack();
-  const basePath = context.useBasePath();
+  const { functionRegistry, localization } = context.usePluginOverrides(constants.UI_BUILDER_PLUGIN_ID);
+  const { router, plugins, basePath: stackBasePath } = context.useStack();
+  const basePath = plugins?.[constants.UI_BUILDER_PLUGIN_ID]?.site.basePath ?? stackBasePath;
   const LinkComponent = router?.Link ?? "a";
-  const componentRegistry = customRegistry || registry.defaultComponentRegistry;
+  const componentRegistry = overrides.resolveUIBuilderComponents(plugins?.[constants.UI_BUILDER_PLUGIN_ID]?.config) ?? registry.defaultComponentRegistry;
   const localized = (override, key, fallback) => override ?? t(key, fallback);
   const savedMessage = localized(
     localization?.pageBuilder?.saved,
@@ -220,7 +220,7 @@ function PageBuilderPageContent({
     }),
     successMessage: savedMessage,
     errorMessage: (error) => error.message.includes("slug already exists") ? duplicateSlugMessage : saveErrorMessage,
-    redirect: (page, action) => action === "create" ? `${basePath}/ui-builder/${page.id}/edit` : false
+    redirect: (page, action) => action === "create" ? context.joinBasePath(basePath, `/ui-builder/${page.id}/edit`) : false
   });
   const [autoSlug, setAutoSlug] = React.useState(!id);
   context$1.useRegisterPageAIContext({
@@ -344,7 +344,7 @@ function PageBuilderPageContent({
     }
   );
   const navLeftChildren = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 md:gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", asChild: true, className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(LinkComponent, { href: `${basePath}/ui-builder`, children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ArrowLeft, { className: "h-4 w-4" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", asChild: true, className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(LinkComponent, { href: context.joinBasePath(basePath, "/ui-builder"), children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ArrowLeft, { className: "h-4 w-4" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(popover.Popover, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { variant: "outline", size: "sm", className: "gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Settings2, { className: "h-4 w-4" }),
@@ -360,17 +360,29 @@ function PageBuilderPageContent({
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex md:items-center md:gap-4", children: pageSettingsFields(false) })
   ] });
-  const navRightChildren = /* @__PURE__ */ jsxRuntime.jsxs(
-    button.Button,
+  const navRightChildren = /* @__PURE__ */ jsxRuntime.jsx(
+    context.PermissionAccess,
     {
-      onClick: handleSave,
-      disabled: isSaving,
-      size: "icon",
-      className: "md:w-auto md:px-4",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Save, { className: "h-4 w-4 md:mr-2" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: isSaving ? loc.pageBuilder.saving : id ? loc.pageBuilder.save : loc.pageBuilder.save })
-      ]
+      permission: id ? permissions.cmsPermissions.record.update({
+        contentType: uiBuilder.UI_BUILDER_TYPE_SLUG,
+        recordId: id,
+        ...existingPage?.authorId ? { authorId: existingPage.authorId } : {}
+      }) : permissions.cmsPermissions.record.create({
+        contentType: uiBuilder.UI_BUILDER_TYPE_SLUG
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          onClick: handleSave,
+          disabled: isSaving,
+          size: "icon",
+          className: "md:w-auto md:px-4",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Save, { className: "h-4 w-4 md:mr-2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden md:inline", children: isSaving ? loc.pageBuilder.saving : loc.pageBuilder.save })
+          ]
+        }
+      )
     }
   );
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full flex-col", "data-testid": "page-builder-page", children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/packages/stack/src/plugins/ui-builder/client/components/pages/page-builder-page.internal.mjs

@@ -1,17 +1,21 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
-import { useTranslate, useNotify, usePluginOverrides, useStack, useBasePath } from '@btst/stack/context';
+import { useTranslate, useNotify, usePluginOverrides, useStack, joinBasePath, PermissionAccess } from '@btst/stack/context';
+import { cmsPermissions } from '@btst/stack/plugins/cms/permissions';
+import { UI_BUILDER_TYPE_SLUG } from '@btst/stack/plugins/ui-builder';
 import { Button } from '../../../../../../../ui/src/components/button.mjs';
 import { Input } from '../../../../../../../ui/src/components/input.mjs';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../../../../../../ui/src/components/select.mjs';
 import { Popover, PopoverTrigger, PopoverContent } from '../../../../../../../ui/src/components/popover.mjs';
 import { Label } from '../../../../../../../ui/src/components/label.mjs';
-import { Save, ArrowLeft, Settings2 } from 'lucide-react';
+import { ArrowLeft, Settings2, Save } from 'lucide-react';
 import UIBuilder from '../../../../../../../ui/src/components/ui-builder/index.mjs';
 import { useLayerStore } from '../../../../../../../ui/src/lib/ui-builder/store/layer-store.mjs';
 import { useRegisterPageAIContext } from '@btst/stack/plugins/ai-chat/client/context';
 import { useSuspenseUIBuilderPage, useUIBuilderPageForm } from '../../hooks/ui-builder-hooks.mjs';
+import { resolveUIBuilderComponents } from '../../overrides.mjs';
+import { UI_BUILDER_PLUGIN_ID } from '../../constants.mjs';
 import { uiBuilderLocalization } from '../../localization/index.mjs';
 import { defaultComponentRegistry } from '../../registry.mjs';
 
@@ -114,15 +118,11 @@ function PageBuilderPageContent({
 }) {
   const t = useTranslate();
   const notify = useNotify();
-  const {
-    componentRegistry: customRegistry,
-    functionRegistry,
-    localization
-  } = usePluginOverrides("ui-builder");
-  const { router } = useStack();
-  const basePath = useBasePath();
+  const { functionRegistry, localization } = usePluginOverrides(UI_BUILDER_PLUGIN_ID);
+  const { router, plugins, basePath: stackBasePath } = useStack();
+  const basePath = plugins?.[UI_BUILDER_PLUGIN_ID]?.site.basePath ?? stackBasePath;
   const LinkComponent = router?.Link ?? "a";
-  const componentRegistry = customRegistry || defaultComponentRegistry;
+  const componentRegistry = resolveUIBuilderComponents(plugins?.[UI_BUILDER_PLUGIN_ID]?.config) ?? defaultComponentRegistry;
   const localized = (override, key, fallback) => override ?? t(key, fallback);
   const savedMessage = localized(
     localization?.pageBuilder?.saved,
@@ -218,7 +218,7 @@ function PageBuilderPageContent({
     }),
     successMessage: savedMessage,
     errorMessage: (error) => error.message.includes("slug already exists") ? duplicateSlugMessage : saveErrorMessage,
-    redirect: (page, action) => action === "create" ? `${basePath}/ui-builder/${page.id}/edit` : false
+    redirect: (page, action) => action === "create" ? joinBasePath(basePath, `/ui-builder/${page.id}/edit`) : false
   });
   const [autoSlug, setAutoSlug] = useState(!id);
   useRegisterPageAIContext({
@@ -342,7 +342,7 @@ function PageBuilderPageContent({
     }
   );
   const navLeftChildren = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 md:gap-4", children: [
-    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", asChild: true, className: "shrink-0", children: /* @__PURE__ */ jsx(LinkComponent, { href: `${basePath}/ui-builder`, children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }) }) }),
+    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", asChild: true, className: "shrink-0", children: /* @__PURE__ */ jsx(LinkComponent, { href: joinBasePath(basePath, "/ui-builder"), children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }) }) }),
     /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsxs(Popover, { children: [
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "gap-2", children: [
         /* @__PURE__ */ jsx(Settings2, { className: "h-4 w-4" }),
@@ -358,17 +358,29 @@ function PageBuilderPageContent({
     ] }) }),
     /* @__PURE__ */ jsx("div", { className: "hidden md:flex md:items-center md:gap-4", children: pageSettingsFields(false) })
   ] });
-  const navRightChildren = /* @__PURE__ */ jsxs(
-    Button,
+  const navRightChildren = /* @__PURE__ */ jsx(
+    PermissionAccess,
     {
-      onClick: handleSave,
-      disabled: isSaving,
-      size: "icon",
-      className: "md:w-auto md:px-4",
-      children: [
-        /* @__PURE__ */ jsx(Save, { className: "h-4 w-4 md:mr-2" }),
-        /* @__PURE__ */ jsx("span", { className: "hidden md:inline", children: isSaving ? loc.pageBuilder.saving : id ? loc.pageBuilder.save : loc.pageBuilder.save })
-      ]
+      permission: id ? cmsPermissions.record.update({
+        contentType: UI_BUILDER_TYPE_SLUG,
+        recordId: id,
+        ...existingPage?.authorId ? { authorId: existingPage.authorId } : {}
+      }) : cmsPermissions.record.create({
+        contentType: UI_BUILDER_TYPE_SLUG
+      }),
+      children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick: handleSave,
+          disabled: isSaving,
+          size: "icon",
+          className: "md:w-auto md:px-4",
+          children: [
+            /* @__PURE__ */ jsx(Save, { className: "h-4 w-4 md:mr-2" }),
+            /* @__PURE__ */ jsx("span", { className: "hidden md:inline", children: isSaving ? loc.pageBuilder.saving : loc.pageBuilder.save })
+          ]
+        }
+      )
     }
   );
   return /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col", "data-testid": "page-builder-page", children: /* @__PURE__ */ jsx(

package/dist/packages/stack/src/plugins/ui-builder/client/components/pages/page-builder-page.mjs

@@ -1,10 +1,14 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { lazy } from 'react';
-import { ComposedRoute } from '@btst/stack/client/components';
+import { ComposedRoute, PermissionRouteAccess } from '@btst/stack/client/components';
 import { usePluginOverrides } from '@btst/stack/context';
 import { PageBuilderSkeleton } from '../loading/page-builder-skeleton.mjs';
 import { DefaultError } from '../shared/default-error.mjs';
+import { UI_BUILDER_PLUGIN_ID } from '../../constants.mjs';
+import { cmsPermissions } from '@btst/stack/plugins/cms/permissions';
+import { UI_BUILDER_TYPE_SLUG } from '@btst/stack/plugins/ui-builder';
+import { useSuspenseUIBuilderPage } from '../../hooks/ui-builder-hooks.mjs';
 
 const PageBuilderPageInternal = lazy(
   () => import('./page-builder-page.internal.mjs').then((m) => ({
@@ -12,14 +16,13 @@ const PageBuilderPageInternal = lazy(
   }))
 );
 function PageBuilderPage({ id }) {
-  const { onRouteError } = usePluginOverrides("ui-builder");
+  const { onRouteError } = usePluginOverrides(UI_BUILDER_PLUGIN_ID);
   const path = id ? `/ui-builder/${id}/edit` : "/ui-builder/new";
   return /* @__PURE__ */ jsx(
     ComposedRoute,
     {
       path,
-      permission: id ? { resource: "ui-builder:page", action: "update", params: { id } } : { resource: "ui-builder:page", action: "create" },
-      PageComponent: PageBuilderPageInternal,
+      PageComponent: AuthorizedPageBuilderPage,
       ErrorComponent: DefaultError,
       LoadingComponent: PageBuilderSkeleton,
       NotFoundComponent: () => null,
@@ -34,5 +37,36 @@ function PageBuilderPage({ id }) {
     }
   );
 }
+function AuthorizedPageBuilderPage({ id }) {
+  if (!id) {
+    return /* @__PURE__ */ jsx(
+      PermissionRouteAccess,
+      {
+        permission: cmsPermissions.record.create({
+          contentType: UI_BUILDER_TYPE_SLUG
+        }),
+        LoadingComponent: PageBuilderSkeleton,
+        children: /* @__PURE__ */ jsx(PageBuilderPageInternal, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(AuthorizedExistingPageBuilderPage, { id });
+}
+function AuthorizedExistingPageBuilderPage({ id }) {
+  const { page } = useSuspenseUIBuilderPage(id);
+  if (!page) return /* @__PURE__ */ jsx(PageBuilderPageInternal, { id });
+  return /* @__PURE__ */ jsx(
+    PermissionRouteAccess,
+    {
+      permission: cmsPermissions.record.update({
+        contentType: UI_BUILDER_TYPE_SLUG,
+        recordId: page.id,
+        ...page.authorId ? { authorId: page.authorId } : {}
+      }),
+      LoadingComponent: PageBuilderSkeleton,
+      children: /* @__PURE__ */ jsx(PageBuilderPageInternal, { id })
+    }
+  );
+}
 
 export { PageBuilderPage };

package/dist/packages/stack/src/plugins/ui-builder/client/components/pages/page-list-page.cjs

@@ -7,6 +7,9 @@ const components = require('@btst/stack/client/components');
 const context = require('@btst/stack/context');
 const pageListSkeleton = require('../loading/page-list-skeleton.cjs');
 const defaultError = require('../shared/default-error.cjs');
+const constants = require('../../constants.cjs');
+const permissions = require('@btst/stack/plugins/cms/permissions');
+const uiBuilder = require('@btst/stack/plugins/ui-builder');
 
 const PageListPageInternal = React.lazy(
   () => import('./page-list-page.internal.cjs').then((m) => ({
@@ -14,12 +17,15 @@ const PageListPageInternal = React.lazy(
   }))
 );
 function PageListPage() {
-  const { onRouteError } = context.usePluginOverrides("ui-builder");
+  const { onRouteError } = context.usePluginOverrides(constants.UI_BUILDER_PLUGIN_ID);
   return /* @__PURE__ */ jsxRuntime.jsx(
     components.ComposedRoute,
     {
       path: "/ui-builder",
-      permission: { resource: "ui-builder:page", action: "read" },
+      permission: permissions.cmsPermissions.record.read({
+        contentType: uiBuilder.UI_BUILDER_TYPE_SLUG,
+        scope: "collection"
+      }),
       PageComponent: PageListPageInternal,
       ErrorComponent: defaultError.DefaultError,
       LoadingComponent: pageListSkeleton.PageListSkeleton,