@btst/stack 2.12.2 → 3.0.0-rc.2

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

@@ -1,18 +1,17 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
-import { usePluginOverrides, useBasePath } from '@btst/stack/context';
+import { useTranslate, useNotify, usePluginOverrides, useStack, useBasePath } from '@btst/stack/context';
 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 { ArrowLeft, Settings2, Save } from 'lucide-react';
-import { toast } from 'sonner';
+import { Save, ArrowLeft, Settings2 } 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, useCreateUIBuilderPage, useUpdateUIBuilderPage } from '../../hooks/ui-builder-hooks.mjs';
+import { useSuspenseUIBuilderPage, useUIBuilderPageForm } from '../../hooks/ui-builder-hooks.mjs';
 import { uiBuilderLocalization } from '../../localization/index.mjs';
 import { defaultComponentRegistry } from '../../registry.mjs';
 
@@ -113,18 +112,89 @@ function PageBuilderPageContent({
   id,
   existingPage
 }) {
+  const t = useTranslate();
+  const notify = useNotify();
   const {
-    navigate,
-    Link,
     componentRegistry: customRegistry,
-    functionRegistry
+    functionRegistry,
+    localization
   } = usePluginOverrides("ui-builder");
+  const { router } = useStack();
   const basePath = useBasePath();
-  const createMutation = useCreateUIBuilderPage();
-  const updateMutation = useUpdateUIBuilderPage();
-  const loc = uiBuilderLocalization;
-  const LinkComponent = Link || "a";
+  const LinkComponent = router?.Link ?? "a";
   const componentRegistry = customRegistry || defaultComponentRegistry;
+  const localized = (override, key, fallback) => override ?? t(key, fallback);
+  const savedMessage = localized(
+    localization?.pageBuilder?.saved,
+    "uiBuilder.pageBuilder.saved",
+    uiBuilderLocalization.pageBuilder.saved
+  );
+  const saveErrorMessage = localized(
+    localization?.pageBuilder?.saveError,
+    "uiBuilder.pageBuilder.saveError",
+    uiBuilderLocalization.pageBuilder.saveError
+  );
+  const duplicateSlugMessage = localized(
+    localization?.pageBuilder?.duplicateSlug,
+    "uiBuilder.pageBuilder.duplicateSlug",
+    uiBuilderLocalization.pageBuilder.duplicateSlug
+  );
+  const loc = {
+    pageBuilder: {
+      slugLabel: localized(
+        localization?.pageBuilder?.slugLabel,
+        "uiBuilder.pageBuilder.slugLabel",
+        uiBuilderLocalization.pageBuilder.slugLabel
+      ),
+      slugPlaceholder: localized(
+        localization?.pageBuilder?.slugPlaceholder,
+        "uiBuilder.pageBuilder.slugPlaceholder",
+        uiBuilderLocalization.pageBuilder.slugPlaceholder
+      ),
+      statusLabel: localized(
+        localization?.pageBuilder?.statusLabel,
+        "uiBuilder.pageBuilder.statusLabel",
+        uiBuilderLocalization.pageBuilder.statusLabel
+      ),
+      settingsTitle: localized(
+        localization?.pageBuilder?.settingsTitle,
+        "uiBuilder.pageBuilder.settingsTitle",
+        uiBuilderLocalization.pageBuilder.settingsTitle
+      ),
+      settingsDescription: localized(
+        localization?.pageBuilder?.settingsDescription,
+        "uiBuilder.pageBuilder.settingsDescription",
+        uiBuilderLocalization.pageBuilder.settingsDescription
+      ),
+      save: localized(
+        localization?.pageBuilder?.save,
+        "uiBuilder.pageBuilder.save",
+        uiBuilderLocalization.pageBuilder.save
+      ),
+      saving: localized(
+        localization?.pageBuilder?.saving,
+        "uiBuilder.pageBuilder.saving",
+        uiBuilderLocalization.pageBuilder.saving
+      ),
+      statusOptions: {
+        draft: localized(
+          localization?.pageBuilder?.statusOptions?.draft,
+          "uiBuilder.pageBuilder.statusOptions.draft",
+          uiBuilderLocalization.pageBuilder.statusOptions.draft
+        ),
+        published: localized(
+          localization?.pageBuilder?.statusOptions?.published,
+          "uiBuilder.pageBuilder.statusOptions.published",
+          uiBuilderLocalization.pageBuilder.statusOptions.published
+        ),
+        archived: localized(
+          localization?.pageBuilder?.statusOptions?.archived,
+          "uiBuilder.pageBuilder.statusOptions.archived",
+          uiBuilderLocalization.pageBuilder.statusOptions.archived
+        )
+      }
+    }
+  };
   const existingLayers = parseLayers(existingPage?.parsedData?.layers);
   const existingVariables = parseVariables(existingPage?.parsedData?.variables);
   const [slug, setSlug] = useState(existingPage?.slug || "");
@@ -133,6 +203,23 @@ function PageBuilderPageContent({
   );
   const [layers, setLayers] = useState(existingLayers);
   const [variables, setVariables] = useState(existingVariables);
+  const pageForm = useUIBuilderPageForm({
+    action: id ? "edit" : "create",
+    id,
+    record: existingPage,
+    toCreateVars: (values) => values,
+    toUpdateVars: (values) => ({
+      id,
+      data: {
+        layers: values.layers,
+        variables: values.variables,
+        status: values.status
+      }
+    }),
+    successMessage: savedMessage,
+    errorMessage: (error) => error.message.includes("slug already exists") ? duplicateSlugMessage : saveErrorMessage,
+    redirect: (page, action) => action === "create" ? `${basePath}/ui-builder/${page.id}/edit` : false
+  });
   const [autoSlug, setAutoSlug] = useState(!id);
   useRegisterPageAIContext({
     routeName: id ? "ui-builder-edit-page" : "ui-builder-new-page",
@@ -174,48 +261,40 @@ function PageBuilderPageContent({
   }, []);
   const handleSave = async () => {
     if (!slug.trim()) {
-      toast.error(loc.pageBuilder.validation.slugRequired);
+      notify.error(
+        localized(
+          localization?.pageBuilder?.validation?.slugRequired,
+          "uiBuilder.pageBuilder.validation.slugRequired",
+          uiBuilderLocalization.pageBuilder.validation.slugRequired
+        )
+      );
       return;
     }
     if (!/^[a-z0-9-]+$/.test(slug)) {
-      toast.error(loc.pageBuilder.validation.slugFormat);
+      notify.error(
+        localized(
+          localization?.pageBuilder?.validation?.slugFormat,
+          "uiBuilder.pageBuilder.validation.slugFormat",
+          uiBuilderLocalization.pageBuilder.validation.slugFormat
+        )
+      );
       return;
     }
     if (layers.length === 0) {
-      toast.error(loc.pageBuilder.validation.layersRequired);
+      notify.error(
+        localized(
+          localization?.pageBuilder?.validation?.layersRequired,
+          "uiBuilder.pageBuilder.validation.layersRequired",
+          uiBuilderLocalization.pageBuilder.validation.layersRequired
+        )
+      );
       return;
     }
-    try {
-      if (id) {
-        await updateMutation.mutateAsync({
-          id,
-          data: {
-            layers,
-            variables,
-            status
-          }
-        });
-        toast.success(loc.pageBuilder.saved);
-      } else {
-        const newPage = await createMutation.mutateAsync({
-          slug,
-          layers,
-          variables,
-          status
-        });
-        toast.success(loc.pageBuilder.saved);
-        navigate?.(`${basePath}/ui-builder/${newPage.id}/edit`);
-      }
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Unknown error";
-      if (message.includes("slug already exists")) {
-        toast.error("A page with this slug already exists");
-      } else {
-        toast.error(loc.pageBuilder.saveError);
-      }
-    }
+    await pageForm.submit({ slug, layers, variables, status });
   };
-  const isSaving = createMutation.isPending || updateMutation.isPending;
+  const isSaving = pageForm.isSubmitting;
+  const slugFieldError = pageForm.fieldErrors.slug;
+  const slugErrorMessage = Array.isArray(slugFieldError) ? slugFieldError[0] : slugFieldError;
   const pageSettingsFields = (isMobile) => /* @__PURE__ */ jsxs(
     "div",
     {
@@ -231,12 +310,15 @@ function PageBuilderPageContent({
               onChange: (e) => {
                 setSlug(e.target.value);
                 setAutoSlug(false);
+                pageForm.clearErrors();
               },
               placeholder: loc.pageBuilder.slugPlaceholder,
               className: isMobile ? "h-9 font-mono text-sm" : "h-8 w-48 font-mono text-sm",
-              disabled: !!id
+              disabled: !!id,
+              "aria-invalid": !!slugErrorMessage
             }
-          )
+          ),
+          slugErrorMessage && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", role: "alert", children: slugErrorMessage })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: isMobile ? "flex flex-col gap-2" : "", children: [
           isMobile && /* @__PURE__ */ jsx(Label, { htmlFor: "page-status", className: "text-sm font-medium", children: loc.pageBuilder.statusLabel }),
@@ -268,8 +350,8 @@ function PageBuilderPageContent({
       ] }) }),
       /* @__PURE__ */ jsx(PopoverContent, { className: "z-[9999] w-72", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx("h4", { className: "font-medium leading-none", children: "Page Settings" }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Configure page slug and status" })
+          /* @__PURE__ */ jsx("h4", { className: "font-medium leading-none", children: loc.pageBuilder.settingsTitle }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: loc.pageBuilder.settingsDescription })
         ] }),
         pageSettingsFields(true)
       ] }) })

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

@@ -1,8 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Suspense, lazy } from 'react';
+import { lazy } from 'react';
+import { ComposedRoute } from '@btst/stack/client/components';
+import { usePluginOverrides } from '@btst/stack/context';
 import { PageBuilderSkeleton } from '../loading/page-builder-skeleton.mjs';
-import { ErrorBoundary } from 'react-error-boundary';
 import { DefaultError } from '../shared/default-error.mjs';
 
 const PageBuilderPageInternal = lazy(
@@ -11,7 +12,27 @@ const PageBuilderPageInternal = lazy(
   }))
 );
 function PageBuilderPage({ id }) {
-  return /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: DefaultError, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(PageBuilderSkeleton, {}), children: /* @__PURE__ */ jsx(PageBuilderPageInternal, { id }) }) });
+  const { onRouteError } = usePluginOverrides("ui-builder");
+  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,
+      ErrorComponent: DefaultError,
+      LoadingComponent: PageBuilderSkeleton,
+      NotFoundComponent: () => null,
+      props: { id },
+      onError: (error) => {
+        onRouteError?.("pageBuilder", error, {
+          path,
+          params: id ? { id } : {},
+          isSSR: typeof window === "undefined"
+        });
+      }
+    }
+  );
 }
 
 export { PageBuilderPage };

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

@@ -3,8 +3,9 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
+const components = require('@btst/stack/client/components');
+const context = require('@btst/stack/context');
 const pageListSkeleton = require('../loading/page-list-skeleton.cjs');
-const reactErrorBoundary = require('react-error-boundary');
 const defaultError = require('../shared/default-error.cjs');
 
 const PageListPageInternal = React.lazy(
@@ -13,7 +14,24 @@ const PageListPageInternal = React.lazy(
   }))
 );
 function PageListPage() {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, { FallbackComponent: defaultError.DefaultError, children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(pageListSkeleton.PageListSkeleton, {}), children: /* @__PURE__ */ jsxRuntime.jsx(PageListPageInternal, {}) }) });
+  const { onRouteError } = context.usePluginOverrides("ui-builder");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path: "/ui-builder",
+      permission: { resource: "ui-builder:page", action: "read" },
+      PageComponent: PageListPageInternal,
+      ErrorComponent: defaultError.DefaultError,
+      LoadingComponent: pageListSkeleton.PageListSkeleton,
+      NotFoundComponent: () => null,
+      onError: (error) => {
+        onRouteError?.("pageList", error, {
+          path: "/ui-builder",
+          isSSR: typeof window === "undefined"
+        });
+      }
+    }
+  );
 }
 
 exports.PageListPage = PageListPage;

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

@@ -9,7 +9,6 @@ const table = require('../../../../../../../ui/src/components/table.cjs');
 const dropdownMenu = require('../../../../../../../ui/src/components/dropdown-menu.cjs');
 const alertDialog = require('../../../../../../../ui/src/components/alert-dialog.cjs');
 const LucideIcons = require('lucide-react');
-const sonner = require('sonner');
 const uiBuilderHooks = require('../../hooks/ui-builder-hooks.cjs');
 const index = require('../../localization/index.cjs');
 const pageWrapper = require('../shared/page-wrapper.cjs');
@@ -17,23 +16,36 @@ const emptyState = require('../shared/empty-state.cjs');
 const pagination = require('../shared/pagination.cjs');
 
 function PageListPage() {
-  const { navigate, Link } = context.usePluginOverrides("ui-builder");
+  const t = context.useTranslate();
+  const notify = context.useNotify();
+  const { localization } = context.usePluginOverrides("ui-builder");
+  const { router } = context.useStack();
+  const navigate = router?.navigate;
   const basePath = context.useBasePath();
-  const { pages, total, hasMore, isLoadingMore, loadMore, refetch } = uiBuilderHooks.useSuspenseUIBuilderPages();
+  const { pages, total, hasMore, isLoadingMore, loadMore } = uiBuilderHooks.useSuspenseUIBuilderPages();
   const deleteMutation = uiBuilderHooks.useDeleteUIBuilderPage();
   const [deleteId, setDeleteId] = React.useState(null);
-  const loc = index.uiBuilderLocalization;
-  const LinkComponent = Link || "a";
+  const LinkComponent = router?.Link ?? "a";
   const handleDelete = async () => {
     if (!deleteId) return;
     try {
       await deleteMutation.mutateAsync(deleteId);
-      sonner.toast.success("Page deleted successfully");
-      setDeleteId(null);
-      await refetch();
     } catch {
-      sonner.toast.error("Failed to delete page");
+      notify.error(
+        localization?.pageList?.deleteError ?? t(
+          "uiBuilder.pageList.deleteError",
+          index.uiBuilderLocalization.pageList.deleteError
+        )
+      );
+      return;
     }
+    notify.success(
+      localization?.pageList?.deleteSuccess ?? t(
+        "uiBuilder.pageList.deleteSuccess",
+        index.uiBuilderLocalization.pageList.deleteSuccess
+      )
+    );
+    setDeleteId(null);
   };
   const getStatusBadge = (status) => {
     const colors = {
@@ -45,39 +57,67 @@ function PageListPage() {
       "span",
       {
         className: `px-2 py-1 rounded-full text-xs font-medium ${colors[status] || colors.draft}`,
-        children: loc.pageBuilder.statusOptions[status] || status
+        children: localization?.pageBuilder?.statusOptions?.[status] ?? t(
+          `uiBuilder.pageBuilder.statusOptions.${status}`,
+          index.uiBuilderLocalization.pageBuilder.statusOptions[status] ?? status
+        )
       }
     );
   };
+  const createButton = /* @__PURE__ */ jsxRuntime.jsx(context.CanAccess, { resource: "ui-builder:page", action: "create", children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(LinkComponent, { href: `${basePath}/ui-builder/new`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { "data-icon": "inline-start" }),
+    localization?.pageList?.createButton ?? t(
+      "uiBuilder.pageList.createButton",
+      index.uiBuilderLocalization.pageList.createButton
+    )
+  ] }) }) });
   return /* @__PURE__ */ jsxRuntime.jsxs(pageWrapper.PageWrapper, { testId: "page-list-page", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-5xl space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-5xl flex-col gap-6", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold", children: loc.pageList.title }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: loc.pageList.description })
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold", children: localization?.pageList?.title ?? t(
+            "uiBuilder.pageList.title",
+            index.uiBuilderLocalization.pageList.title
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: localization?.pageList?.description ?? t(
+            "uiBuilder.pageList.description",
+            index.uiBuilderLocalization.pageList.description
+          ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(button.Button, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(LinkComponent, { href: `${basePath}/ui-builder/new`, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "mr-2 h-4 w-4" }),
-          loc.pageList.createButton
-        ] }) })
+        createButton
       ] }),
       pages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
         emptyState.EmptyState,
         {
-          title: loc.pageList.emptyState.title,
-          description: loc.pageList.emptyState.description,
-          action: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(LinkComponent, { href: `${basePath}/ui-builder/new`, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Plus, { className: "mr-2 h-4 w-4" }),
-            loc.pageList.createButton
-          ] }) })
+          title: localization?.pageList?.emptyState?.title ?? t(
+            "uiBuilder.pageList.emptyState.title",
+            index.uiBuilderLocalization.pageList.emptyState.title
+          ),
+          description: localization?.pageList?.emptyState?.description ?? t(
+            "uiBuilder.pageList.emptyState.description",
+            index.uiBuilderLocalization.pageList.emptyState.description
+          ),
+          action: createButton
         }
       ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border", 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: loc.pageList.columns.slug }),
-            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: loc.pageList.columns.status }),
-            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: loc.pageList.columns.updatedAt }),
-            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { className: "w-12", children: loc.pageList.columns.actions })
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.pageList?.columns?.slug ?? t(
+              "uiBuilder.pageList.columns.slug",
+              index.uiBuilderLocalization.pageList.columns.slug
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.pageList?.columns?.status ?? t(
+              "uiBuilder.pageList.columns.status",
+              index.uiBuilderLocalization.pageList.columns.status
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.pageList?.columns?.updatedAt ?? t(
+              "uiBuilder.pageList.columns.updatedAt",
+              index.uiBuilderLocalization.pageList.columns.updatedAt
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { className: "w-12", children: localization?.pageList?.columns?.actions ?? t(
+              "uiBuilder.pageList.columns.actions",
+              index.uiBuilderLocalization.pageList.columns.actions
+            ) })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx(table.TableBody, { children: pages.map((page) => /* @__PURE__ */ jsxRuntime.jsxs(table.TableRow, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { className: "font-mono text-sm", children: page.slug }),
@@ -85,31 +125,56 @@ function PageListPage() {
             /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { className: "text-muted-foreground", children: new Date(page.updatedAt).toLocaleDateString() }),
             /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { variant: "ghost", size: "icon", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MoreHorizontal, { className: "h-4 w-4" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Actions" })
+                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.MoreHorizontal, {}),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: localization?.pageList?.actions?.label ?? t(
+                  "uiBuilder.pageList.actions.label",
+                  index.uiBuilderLocalization.pageList.actions.label
+                ) })
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  dropdownMenu.DropdownMenuItem,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  context.CanAccess,
                   {
-                    onClick: () => navigate?.(
-                      `${basePath}/ui-builder/${page.id}/edit`
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Pencil, { className: "mr-2 h-4 w-4" }),
-                      loc.pageList.actions.edit
-                    ]
+                    resource: "ui-builder:page",
+                    action: "update",
+                    params: { id: page.id },
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      dropdownMenu.DropdownMenuItem,
+                      {
+                        onClick: () => navigate?.(
+                          `${basePath}/ui-builder/${page.id}/edit`
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Pencil, { "data-icon": "inline-start" }),
+                          localization?.pageList?.actions?.edit ?? t(
+                            "uiBuilder.pageList.actions.edit",
+                            index.uiBuilderLocalization.pageList.actions.edit
+                          )
+                        ]
+                      }
+                    )
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  dropdownMenu.DropdownMenuItem,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  context.CanAccess,
                   {
-                    className: "text-destructive",
-                    onClick: () => setDeleteId(page.id),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "mr-2 h-4 w-4" }),
-                      loc.pageList.actions.delete
-                    ]
+                    resource: "ui-builder:page",
+                    action: "delete",
+                    params: { id: page.id },
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      dropdownMenu.DropdownMenuItem,
+                      {
+                        className: "text-destructive",
+                        onClick: () => setDeleteId(page.id),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { "data-icon": "inline-start" }),
+                          localization?.pageList?.actions?.delete ?? t(
+                            "uiBuilder.pageList.actions.delete",
+                            index.uiBuilderLocalization.pageList.actions.delete
+                          )
+                        ]
+                      }
+                    )
                   }
                 )
               ] })
@@ -123,24 +188,53 @@ function PageListPage() {
             showing: pages.length,
             hasMore,
             isLoadingMore,
-            onLoadMore: loadMore
+            onLoadMore: loadMore,
+            labels: {
+              showing: localization?.pageList?.pagination?.showing ?? t(
+                "uiBuilder.pageList.pagination.showing",
+                index.uiBuilderLocalization.pageList.pagination.showing
+              ),
+              next: localization?.pageList?.pagination?.loadMore ?? t(
+                "uiBuilder.pageList.pagination.loadMore",
+                index.uiBuilderLocalization.pageList.pagination.loadMore
+              ),
+              loading: localization?.pageList?.pagination?.loading ?? t(
+                "uiBuilder.pageList.pagination.loading",
+                index.uiBuilderLocalization.pageList.pagination.loading
+              )
+            }
           }
         )
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog, { open: !!deleteId, onOpenChange: () => setDeleteId(null), children: /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogContent, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { children: loc.pageList.deleteDialog.title }),
-        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: loc.pageList.deleteDialog.description })
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { children: localization?.pageList?.deleteDialog?.title ?? t(
+          "uiBuilder.pageList.deleteDialog.title",
+          index.uiBuilderLocalization.pageList.deleteDialog.title
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: localization?.pageList?.deleteDialog?.description ?? t(
+          "uiBuilder.pageList.deleteDialog.description",
+          index.uiBuilderLocalization.pageList.deleteDialog.description
+        ) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: loc.pageList.deleteDialog.cancel }),
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: localization?.pageList?.deleteDialog?.cancel ?? t(
+          "uiBuilder.pageList.deleteDialog.cancel",
+          index.uiBuilderLocalization.pageList.deleteDialog.cancel
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           alertDialog.AlertDialogAction,
           {
             onClick: handleDelete,
             className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-            children: deleteMutation.isPending ? "Deleting..." : loc.pageList.deleteDialog.confirm
+            children: deleteMutation.isPending ? localization?.pageList?.deleteDialog?.deleting ?? t(
+              "uiBuilder.pageList.deleteDialog.deleting",
+              index.uiBuilderLocalization.pageList.deleteDialog.deleting
+            ) : localization?.pageList?.deleteDialog?.confirm ?? t(
+              "uiBuilder.pageList.deleteDialog.confirm",
+              index.uiBuilderLocalization.pageList.deleteDialog.confirm
+            )
           }
         )
       ] })