betterstart-cli 0.0.109 → 0.0.111

package/dist/assets/adapters/next/templates/init/components/layouts/{admin-sidebar-branding-rsc.tsx → admin-sidebar-branding.tsx}

@@ -1,7 +1,7 @@
 import { getSetting } from '@admin/actions/settings'
 import { SidebarBranding } from './sidebar-branding'
 
-export async function SidebarBrandingRsc() {
+export async function AdminSidebarBranding() {
   const settings = await getSetting()
 
   return <SidebarBranding initialData={settings} />

package/dist/assets/adapters/next/templates/init/components/layouts/admin-sidebar.tsx

@@ -14,7 +14,7 @@ import { adminNavigation } from '@admin/data/navigation'
 import { groupAdminNavigationItems } from '@admin/utils/navigation/sidebar'
 import { Settings, Users } from 'lucide-react'
 import { Fragment, Suspense } from 'react'
-import { SidebarBrandingRsc } from './admin-sidebar-branding-rsc'
+import { AdminSidebarBranding } from './admin-sidebar-branding'
 import { BrandingSkeleton } from './admin-sidebar-branding-skeleton'
 import { SidebarNavLink } from './admin-sidebar-nav-link'
 import { SidebarUserMenu } from './admin-sidebar-user-menu'
@@ -27,7 +27,7 @@ export function AdminSidebar(props: ComponentProps<typeof Sidebar>) {
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader className="flex h-14 w-full items-center border-t border-b border-border/80">
         <Suspense fallback={<BrandingSkeleton />}>
-          <SidebarBrandingRsc />
+          <AdminSidebarBranding />
         </Suspense>
       </SidebarHeader>
       <SidebarContent className="pt-4 pb-1">

package/dist/assets/adapters/next/templates/init/components/layouts/role-gate.tsx

@@ -0,0 +1,14 @@
+import type { UserRole } from '@admin/types/auth'
+import { requireRole } from '@admin/auth/middleware'
+
+export async function RoleGate({
+  roles,
+  children
+}: {
+  roles: readonly UserRole[]
+  children: React.ReactNode
+}) {
+  await requireRole(roles)
+
+  return <>{children}</>
+}

package/dist/assets/adapters/next/templates/init/components/shared/dev-mode-integrate.tsx

@@ -49,9 +49,9 @@ export function DevModeIntegrateButton({
     <Drawer swipeDirection="right" onOpenChange={handleOpenChange}>
       <DrawerTrigger render={<Button type="button" variant="outline" />}>
         <Code2 />
-        <span className="hidden sm:inline">Dev Mode</span>
+        <span className="inline">Dev Mode</span>
       </DrawerTrigger>
-      <DrawerContent className="w-full overflow-hidden data-[swipe-direction=right]:sm:max-w-2xl data-[swipe-direction=right]:lg:max-w-4xl">
+      <DrawerContent className="w-full overflow-hidden data-[swipe-direction=right]:max-w-4xl">
         <DrawerHeader className="pb-4">
           <DrawerTitle>{integration.schemaLabel}</DrawerTitle>
           <DrawerDescription>

package/dist/assets/adapters/next/templates/init/components/shared/entity-filters-bar.tsx

@@ -64,7 +64,7 @@ export function EntityFiltersBar({
   return (
     <div
       className={cn(
-        'sticky top-14 z-10 flex h-16 gap-1 overflow-x-clip bg-background px-4 transition-shadow xl:flex-row xl:items-center xl:justify-between',
+        'sticky top-14 z-10 flex h-16 flex-row items-center justify-between gap-1 overflow-x-clip bg-background px-4 transition-shadow',
         {
           'shadow-modal/3': hasScrolled
         }

package/dist/assets/adapters/next/templates/init/components/shared/entity-versions/entity-versions-drawer.tsx

@@ -43,7 +43,7 @@ export function EntityVersionsDrawer({
 }: EntityVersionsDrawerProps) {
   return (
     <Drawer swipeDirection="right" open={open} onOpenChange={onOpenChange} modal>
-      <DrawerContent className="h-full sm:max-w-lg">
+      <DrawerContent className="h-full max-w-lg">
         <DrawerHeader>
           <DrawerTitle>Versions</DrawerTitle>
           <DrawerDescription>

package/dist/assets/adapters/next/templates/init/components/shared/media/media-filters-bar.tsx

@@ -48,7 +48,7 @@ export function MediaFiltersBar({
   return (
     <div
       className={cn(
-        'sticky top-14 z-9 flex h-16 flex-col gap-1 overflow-clip bg-background px-4 transition-shadow xl:flex-row xl:items-center xl:justify-between',
+        'sticky top-14 z-9 flex h-16 flex-row items-center justify-between gap-1 overflow-clip bg-background px-4 transition-shadow',
         {
           'shadow-modal/3': hasScrolled
         }
@@ -81,7 +81,7 @@ export function MediaFiltersBar({
         </ButtonGroup>
       </div>
 
-      <div className="flex items-center gap-1 self-end xl:self-auto">
+      <div className="flex items-center gap-1 self-auto">
         {actions}
 
         {selection.isSelectMode ? (

package/dist/assets/adapters/next/templates/init/components/shared/media/media-gallery-dialog.tsx

@@ -99,7 +99,7 @@ export function MediaGalleryDialog({
         onOpenChange(next)
       }}
     >
-      <DialogContent className="flex h-[80svh] max-h-[700px] min-h-0 flex-col gap-0 overflow-hidden sm:max-w-3xl">
+      <DialogContent className="flex h-[80svh] max-h-[700px] min-h-0 max-w-3xl flex-col gap-0 overflow-hidden">
         <DialogHeader>
           <DialogTitle>Select file</DialogTitle>
           <DialogDescription>

package/dist/assets/adapters/next/templates/init/components/shared/media/media-preview.tsx

@@ -26,7 +26,7 @@ export function MediaPreview({ media, isFilled = false, showMetadata = false }:
             'object-contain': !isFilled
           })}
           fill
-          sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 200px"
+          sizes="200px"
           unoptimized
           loading="lazy"
           decoding="async"

package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-color-highlight.ts

@@ -2,7 +2,6 @@
 
 import type { ContentEditorHighlightColorOption } from '@admin/utils/editor/content-editor-highlight-color-option'
 import type { Editor } from '@tiptap/react'
-import { useIsBreakpoint } from '@admin/hooks/content-editor/use-is-breakpoint'
 import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
 import { CONTENT_EDITOR_HIGHLIGHT_COLOR_OPTIONS } from '@admin/utils/editor/content-editor-highlight-color-options'
 import { CONTENT_EDITOR_HIGHLIGHT_COLORS } from '@admin/utils/editor/content-editor-highlight-colors'
@@ -152,7 +151,6 @@ export function useColorHighlight(config: UseColorHighlightConfig) {
   } = config
 
   const { editor } = useTiptapEditor(providedEditor)
-  const isMobile = useIsBreakpoint()
   const [isVisible, setIsVisible] = useState<boolean>(true)
   const canColorHighlightState = canColorHighlight(editor, mode)
   const actualColor = highlightColor
@@ -222,7 +220,7 @@ export function useColorHighlight(config: UseColorHighlightConfig) {
     },
     {
       enabled: isVisible && canColorHighlightState,
-      enableOnContentEditable: !isMobile,
+      enableOnContentEditable: true,
       enableOnFormTags: true
     }
   )

package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-content-editor-media-insertion.ts

@@ -2,7 +2,6 @@
 
 import * as React from 'react'
 import type { Editor } from '@tiptap/react'
-import { useIsBreakpoint } from '@admin/hooks/content-editor/use-is-breakpoint'
 import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
 import { canInsertContentEditorMediaPlaceholder } from '@admin/utils/editor/can-insert-content-editor-media-placeholder'
 import { CONTENT_EDITOR_MEDIA_SHORTCUT_KEY } from '@admin/utils/editor/content-editor-media-shortcut-key'
@@ -20,7 +19,6 @@ export function useContentEditorMediaInsertion({
   onInserted
 }: UseContentEditorMediaInsertionOptions = {}) {
   const { editor } = useTiptapEditor(providedEditor)
-  const isMobile = useIsBreakpoint()
   const canInsert = canInsertContentEditorMediaPlaceholder(editor)
   const isActive = isContentEditorMediaPlaceholderActive(editor)
   const isVisible = Boolean(editor?.isEditable)
@@ -41,7 +39,7 @@ export function useContentEditorMediaInsertion({
     },
     {
       enabled: isVisible && canInsert,
-      enableOnContentEditable: !isMobile,
+      enableOnContentEditable: true,
       enableOnFormTags: true
     }
   )

package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-content-editor.ts

@@ -42,7 +42,6 @@ export interface UseContentEditorOptions {
   placeholder?: string
   disabled: boolean
   defaultMode: ContentEditorMode
-  onModeToggle?: () => void
 }
 
 export function useContentEditor({
@@ -50,8 +49,7 @@ export function useContentEditor({
   onChange,
   placeholder,
   disabled,
-  defaultMode,
-  onModeToggle
+  defaultMode
 }: UseContentEditorOptions) {
   const [mode, setMode] = React.useState<ContentEditorMode>(defaultMode)
   const [sourceSelectionRequest, setSourceSelectionRequest] =
@@ -257,8 +255,6 @@ export function useContentEditor({
   )
 
   const handleModeChange = React.useCallback(() => {
-    onModeToggle?.()
-
     if (mode === 'source') {
       pendingRichSelectionOffsetRef.current = sourceSelectionRef.current
       setMode('rich')
@@ -282,7 +278,7 @@ export function useContentEditor({
     }
 
     setMode('source')
-  }, [editor, mode, onModeToggle])
+  }, [editor, mode])
 
   return {
     activeSlashIndex,

package/dist/assets/adapters/next/templates/init/pages/account-layout.tsx

@@ -1,11 +1,11 @@
 import { ContentSkeleton } from '@admin/components/layouts/content-skeleton'
 import { Suspense } from 'react'
-import { AccountShellRsc } from './account-shell-rsc'
+import { AccountShell } from './account-shell'
 
 export default function AccountLayout({ children }: { children: React.ReactNode }) {
   return (
     <Suspense fallback={<ContentSkeleton />}>
-      <AccountShellRsc>{children}</AccountShellRsc>
+      <AccountShell>{children}</AccountShell>
     </Suspense>
   )
 }

package/dist/assets/adapters/next/templates/init/pages/{account-shell-rsc.tsx → account-shell.tsx}

@@ -6,7 +6,7 @@ import { canAccessAdmin } from '@admin/utils/auth/can-access-admin'
 import { redirect } from 'next/navigation'
 import { MinimalAccountShell } from './minimal-account-shell'
 
-export async function AccountShellRsc({ children }: { children: React.ReactNode }) {
+export async function AccountShell({ children }: { children: React.ReactNode }) {
   const session = await getSession({ disableCookieCache: true })
 
   if (!session?.user) {
@@ -22,7 +22,7 @@ export async function AccountShellRsc({ children }: { children: React.ReactNode
   return (
     <SidebarProvider className="min-h-svh">
       <AdminSidebar />
-      <div className="relative flex min-w-0 flex-1 flex-col [--admin-shell-content-left:0px] md:[--admin-shell-content-left:var(--sidebar-width)] md:peer-data-[state=collapsed]:[--admin-shell-content-left:var(--sidebar-width-icon)]">
+      <div className="relative flex min-w-0 flex-1 flex-col [--admin-shell-content-left:var(--sidebar-width)] peer-data-[state=collapsed]:[--admin-shell-content-left:var(--sidebar-width-icon)]">
         {children}
       </div>
     </SidebarProvider>

package/dist/assets/adapters/next/templates/init/pages/{auth-gate-rsc.tsx → auth-gate.tsx}

@@ -2,13 +2,13 @@ import { requireRole, UserRole } from '@admin/auth/middleware'
 import { AdminSidebar } from '@admin/components/layouts/admin-sidebar'
 import { SidebarProvider } from '@admin/components/ui/sidebar'
 
-export async function AuthGateRsc({ children }: { children: React.ReactNode }) {
+export async function AuthGate({ children }: { children: React.ReactNode }) {
   await requireRole([UserRole.ADMIN, UserRole.EDITOR])
 
   return (
     <SidebarProvider className="min-h-svh">
       <AdminSidebar />
-      <div className="relative flex min-w-0 flex-1 flex-col pb-14 [--admin-shell-content-left:0px] md:[--admin-shell-content-left:var(--sidebar-width)] md:peer-data-[state=collapsed]:[--admin-shell-content-left:var(--sidebar-width-icon)]">
+      <div className="relative flex min-w-0 flex-1 flex-col pb-14 [--admin-shell-content-left:var(--sidebar-width)] peer-data-[state=collapsed]:[--admin-shell-content-left:var(--sidebar-width-icon)]">
         {children}
       </div>
     </SidebarProvider>

package/dist/assets/adapters/next/templates/init/pages/authenticated-layout.tsx

@@ -1,11 +1,11 @@
 import { ContentSkeleton } from '@admin/components/layouts/content-skeleton'
 import { Suspense } from 'react'
-import { AuthGateRsc } from './auth-gate-rsc'
+import { AuthGate } from './auth-gate'
 
 export default function AdminAuthLayout({ children }: { children: React.ReactNode }) {
   return (
     <Suspense fallback={<ContentSkeleton />}>
-      <AuthGateRsc>{children}</AuthGateRsc>
+      <AuthGate>{children}</AuthGate>
     </Suspense>
   )
 }

package/dist/assets/adapters/next/templates/init/pages/forgot-password-form.tsx

@@ -66,17 +66,17 @@ export function ForgotPasswordForm({ className, ...props }: React.ComponentProps
   return (
     <div className={cn('flex flex-col gap-6', className)} {...props}>
       <Card className="overflow-hidden p-0">
-        <CardContent className="grid p-0 md:grid-cols-[5fr_7fr]">
-          <div className="relative hidden bg-muted md:block">
+        <CardContent className="grid grid-cols-[5fr_7fr] p-0">
+          <div className="relative block bg-muted">
             <Image
               src="https://assets.betterstart.dev/assets/placeholder.png"
               alt=""
               fill
-              sizes="(min-width: 768px) 42vw, 0px"
+              sizes="42vw"
               className="object-cover"
             />
           </div>
-          <div className="p-6 md:p-20">
+          <div className="p-20">
             <Form {...form}>
               <form
                 autoComplete="off"

package/dist/assets/adapters/next/templates/init/pages/forgot-password-page-skeleton.tsx

@@ -1,9 +1,9 @@
 export function ForgotPasswordPageSkeleton() {
   return (
     <div className="overflow-hidden rounded-sm border bg-card">
-      <div className="grid md:grid-cols-[5fr_7fr]">
-        <div className="hidden min-h-[460px] bg-muted md:block" />
-        <div className="flex min-h-[460px] flex-col gap-10 p-6 md:p-20">
+      <div className="grid grid-cols-[5fr_7fr]">
+        <div className="block min-h-[460px] bg-muted" />
+        <div className="flex min-h-[460px] flex-col gap-10 p-20">
           <div className="space-y-3">
             <div className="h-6 w-40 animate-pulse rounded-md bg-muted" />
             <div className="h-4 w-full max-w-72 animate-pulse rounded-md bg-muted" />

package/dist/assets/adapters/next/templates/init/pages/forgot-password-page.tsx

@@ -10,8 +10,8 @@ export const metadata: Metadata = {
 
 export default function ForgotPasswordPage() {
   return (
-    <div className="flex min-h-svh flex-col items-center justify-center bg-background p-6 md:p-10">
-      <div className="w-full max-w-sm md:max-w-4xl">
+    <div className="flex min-h-svh flex-col items-center justify-center bg-background p-10">
+      <div className="w-full max-w-4xl">
         <Suspense fallback={<ForgotPasswordPageSkeleton />}>
           <ForgotPasswordForm />
         </Suspense>

package/dist/assets/adapters/next/templates/init/pages/login-form.tsx

@@ -81,13 +81,13 @@ export function LoginForm({ className, ...props }: React.ComponentProps<'div'>)
   return (
     <div className={cn('flex flex-col gap-6', className)} {...props}>
       <Card className="overflow-hidden p-0">
-        <CardContent className="grid p-0 md:grid-cols-[5fr_7fr]">
-          <div className="relative hidden bg-muted md:block">
+        <CardContent className="grid grid-cols-[5fr_7fr] p-0">
+          <div className="relative block bg-muted">
             <Image
               src="https://assets.betterstart.dev/assets/placeholder.png"
               alt=""
               fill
-              sizes="(min-width: 768px) 42vw, 0px"
+              sizes="42vw"
               className="object-cover"
             />
           </div>
@@ -96,7 +96,7 @@ export function LoginForm({ className, ...props }: React.ComponentProps<'div'>)
               autoComplete="off"
               noValidate
               onSubmit={form.handleSubmit(handleSubmit, handleInvalid)}
-              className="p-6 md:p-20"
+              className="p-20"
             >
               <FieldGroup className="gap-10 pb-12">
                 <div className="flex flex-col items-start">

package/dist/assets/adapters/next/templates/init/pages/{login-page-rsc.tsx → login-page-content.tsx}

@@ -3,7 +3,7 @@ import { getAdminPostLoginPath } from '@admin/utils/auth/get-admin-post-login-pa
 import { redirect } from 'next/navigation'
 import { LoginForm } from './login-form'
 
-export async function LoginPageRsc() {
+export async function LoginPageContent() {
   const session = await getSession({ disableCookieCache: true })
 
   if (session?.user) {

package/dist/assets/adapters/next/templates/init/pages/login-page-skeleton.tsx

@@ -1,9 +1,9 @@
 export function LoginPageSkeleton() {
   return (
     <div className="overflow-hidden rounded-sm border bg-card">
-      <div className="grid md:grid-cols-[5fr_7fr]">
-        <div className="hidden min-h-[540px] bg-muted md:block" />
-        <div className="flex min-h-[540px] flex-col gap-10 p-6 md:p-20">
+      <div className="grid grid-cols-[5fr_7fr]">
+        <div className="block min-h-[540px] bg-muted" />
+        <div className="flex min-h-[540px] flex-col gap-10 p-20">
           <div className="space-y-3">
             <div className="h-6 w-32 animate-pulse rounded-md bg-muted" />
             <div className="h-4 w-40 animate-pulse rounded-md bg-muted" />

package/dist/assets/adapters/next/templates/init/pages/login-page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next'
 import { Suspense } from 'react'
-import { LoginPageRsc } from './login-page-rsc'
+import { LoginPageContent } from './login-page-content'
 import { LoginPageSkeleton } from './login-page-skeleton'
 
 export const metadata: Metadata = {
@@ -10,10 +10,10 @@ export const metadata: Metadata = {
 
 export default function LoginPage() {
   return (
-    <div className="flex min-h-svh flex-col items-center justify-center bg-background p-6 md:p-10">
-      <div className="w-full max-w-sm md:max-w-4xl">
+    <div className="flex min-h-svh flex-col items-center justify-center bg-background p-10">
+      <div className="w-full max-w-4xl">
         <Suspense fallback={<LoginPageSkeleton />}>
-          <LoginPageRsc />
+          <LoginPageContent />
         </Suspense>
       </div>
     </div>

package/dist/assets/adapters/next/templates/init/pages/media/media-page-content.tsx

@@ -238,7 +238,7 @@ export function MediaPageContent() {
               selectedIds={selected}
               isSelectMode={isSelectMode}
               onItemClick={handleItemClick}
-              className="px-px pt-px pb-12 lg:grid-cols-12"
+              className="grid-cols-12 px-px pt-px pb-12"
             />
             {total > DEFAULT_MEDIA_PAGE_SIZE ? (
               <MediaGridPagination

package/dist/assets/adapters/next/templates/init/pages/profile/profile-page-content.tsx

@@ -0,0 +1,31 @@
+import { getSession } from '@admin/auth/middleware'
+import { PageHeader } from '@admin/components/shared/page-header'
+import { UserRole } from '@admin/types/auth'
+import { redirect } from 'next/navigation'
+import { ProfileForm } from './profile-form'
+
+export async function ProfilePageContent() {
+  const session = await getSession()
+
+  if (!session?.user) {
+    redirect('/admin/login')
+  }
+
+  const showPageHeader =
+    session.user.role === UserRole.ADMIN || session.user.role === UserRole.EDITOR
+
+  return (
+    <>
+      {showPageHeader && <PageHeader title="Profile" />}
+      <main className="container mx-auto w-full max-w-5xl p-4">
+        <ProfileForm
+          user={{
+            name: session.user.name,
+            email: session.user.email,
+            image: session.user.image ?? null
+          }}
+        />
+      </main>
+    </>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/profile/profile-page-skeleton.tsx

@@ -0,0 +1,9 @@
+export function ProfilePageSkeleton() {
+  return (
+    <main className="container mx-auto w-full max-w-5xl p-4">
+      <div className="flex h-48 items-center justify-center">
+        <div className="text-muted-foreground">Loading Profile…</div>
+      </div>
+    </main>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/profile/profile-page.tsx

@@ -1,31 +1,11 @@
-import { getSession } from '@admin/auth/middleware'
-import { PageHeader } from '@admin/components/shared/page-header'
-import { UserRole } from '@admin/types/auth'
-import { redirect } from 'next/navigation'
-import { ProfileForm } from './profile-form'
-
-export default async function ProfilePage() {
-  const session = await getSession()
-
-  if (!session?.user) {
-    redirect('/admin/login')
-  }
-
-  const showPageHeader =
-    session.user.role === UserRole.ADMIN || session.user.role === UserRole.EDITOR
+import * as React from 'react'
+import { ProfilePageContent } from './profile-page-content'
+import { ProfilePageSkeleton } from './profile-page-skeleton'
 
+export default function ProfilePage() {
   return (
-    <>
-      {showPageHeader && <PageHeader title="Profile" />}
-      <main className="container mx-auto w-full max-w-5xl p-4">
-        <ProfileForm
-          user={{
-            name: session.user.name,
-            email: session.user.email,
-            image: session.user.image ?? null
-          }}
-        />
-      </main>
-    </>
+    <React.Suspense fallback={<ProfilePageSkeleton />}>
+      <ProfilePageContent />
+    </React.Suspense>
   )
 }

package/dist/assets/adapters/next/templates/init/pages/reset-password-form.tsx

@@ -53,17 +53,17 @@ export function ResetPasswordForm({ className, ...props }: React.ComponentProps<
     return (
       <div className={cn('flex flex-col gap-6', className)} {...props}>
         <Card className="overflow-hidden p-0">
-          <CardContent className="grid p-0 md:grid-cols-[5fr_7fr]">
-            <div className="relative hidden bg-muted md:block">
+          <CardContent className="grid grid-cols-[5fr_7fr] p-0">
+            <div className="relative block bg-muted">
               <Image
                 src="https://assets.betterstart.dev/assets/placeholder.png"
                 alt=""
                 fill
-                sizes="(min-width: 768px) 42vw, 0px"
+                sizes="42vw"
                 className="object-cover"
               />
             </div>
-            <div className="p-6 md:p-20">
+            <div className="p-20">
               <FieldGroup className="gap-10 pb-12">
                 <div className="flex flex-col items-start">
                   <h1 className="text-xl font-medium">Invalid reset link</h1>
@@ -112,13 +112,13 @@ export function ResetPasswordForm({ className, ...props }: React.ComponentProps<
   return (
     <div className={cn('flex flex-col gap-6', className)} {...props}>
       <Card className="overflow-hidden p-0">
-        <CardContent className="grid p-0 md:grid-cols-[5fr_7fr]">
-          <div className="relative hidden bg-muted md:block">
+        <CardContent className="grid grid-cols-[5fr_7fr] p-0">
+          <div className="relative block bg-muted">
             <Image
               src="https://assets.betterstart.dev/assets/placeholder.png"
               alt=""
               fill
-              sizes="(min-width: 768px) 42vw, 0px"
+              sizes="42vw"
               className="object-cover"
             />
           </div>
@@ -127,7 +127,7 @@ export function ResetPasswordForm({ className, ...props }: React.ComponentProps<
               autoComplete="off"
               noValidate
               onSubmit={form.handleSubmit(handleSubmit, handleInvalid)}
-              className="p-6 md:p-20"
+              className="p-20"
             >
               <FieldGroup className="gap-10 pb-12">
                 <div className="flex flex-col items-start">

package/dist/assets/adapters/next/templates/init/pages/reset-password-page-skeleton.tsx

@@ -1,9 +1,9 @@
 export function ResetPasswordPageSkeleton() {
   return (
     <div className="overflow-hidden rounded-sm border bg-card">
-      <div className="grid md:grid-cols-[5fr_7fr]">
-        <div className="hidden min-h-[520px] bg-muted md:block" />
-        <div className="flex min-h-[520px] flex-col gap-10 p-6 md:p-20">
+      <div className="grid grid-cols-[5fr_7fr]">
+        <div className="block min-h-[520px] bg-muted" />
+        <div className="flex min-h-[520px] flex-col gap-10 p-20">
           <div className="space-y-3">
             <div className="h-6 w-36 animate-pulse rounded-md bg-muted" />
             <div className="h-4 w-56 animate-pulse rounded-md bg-muted" />

package/dist/assets/adapters/next/templates/init/pages/reset-password-page.tsx

@@ -10,8 +10,8 @@ export const metadata: Metadata = {
 
 export default function ResetPasswordPage() {
   return (
-    <div className="flex min-h-svh flex-col items-center justify-center bg-background p-6 md:p-10">
-      <div className="w-full max-w-sm md:max-w-4xl">
+    <div className="flex min-h-svh flex-col items-center justify-center bg-background p-10">
+      <div className="w-full max-w-4xl">
         <Suspense fallback={<ResetPasswordPageSkeleton />}>
           <ResetPasswordForm />
         </Suspense>

package/dist/assets/adapters/next/templates/init/pages/settings/audit-log/audit-log-detail-drawer.tsx

@@ -37,7 +37,7 @@ function formatMetadata(metadata: Record<string, unknown> | null): string {
 export function AuditLogDetailDrawer({ auditLog, open, onOpenChange }: AuditLogDetailDrawerProps) {
   return (
     <Drawer swipeDirection="right" open={open} onOpenChange={onOpenChange} modal>
-      <DrawerContent className="h-full sm:max-w-xl">
+      <DrawerContent className="h-full max-w-xl">
         <DrawerHeader>
           <DrawerTitle>Audit Event</DrawerTitle>
           <DrawerDescription>

package/dist/assets/adapters/next/templates/init/pages/settings/audit-log/audit-log-page.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react'
-import { requireRole, UserRole } from '@admin/auth/middleware'
+import { RoleGate } from '@admin/components/layouts/role-gate'
+import { UserRole } from '@admin/types/auth'
 import { AuditLogPageContent } from './audit-log-page-content'
 import { AuditLogPageSkeleton } from './audit-log-page-skeleton'
 
-export default async function AuditLogPage() {
-  await requireRole([UserRole.ADMIN])
-
+export default function AuditLogPage() {
   return (
     <React.Suspense fallback={<AuditLogPageSkeleton />}>
-      <AuditLogPageContent />
+      <RoleGate roles={[UserRole.ADMIN]}>
+        <AuditLogPageContent />
+      </RoleGate>
     </React.Suspense>
   )
 }

package/dist/assets/adapters/next/templates/init/pages/settings/forms/form-notifications-drawer.tsx

@@ -83,7 +83,7 @@ export function FormNotificationsDrawer({
 
   return (
     <Drawer swipeDirection="right" open={open} onOpenChange={onOpenChange} modal>
-      <DrawerContent className="h-full sm:max-w-xl">
+      <DrawerContent className="h-full max-w-xl">
         <Form {...form}>
           <form
             autoComplete="off"

package/dist/assets/adapters/next/templates/init/pages/settings/forms/forms-settings-page.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react'
-import { requireRole, UserRole } from '@admin/auth/middleware'
+import { RoleGate } from '@admin/components/layouts/role-gate'
+import { UserRole } from '@admin/types/auth'
 import { FormsSettingsPageContent } from './forms-settings-page-content'
 import { FormsSettingsPageSkeleton } from './forms-settings-page-skeleton'
 
-export default async function FormsSettingsPage() {
-  await requireRole([UserRole.ADMIN, UserRole.EDITOR])
-
+export default function FormsSettingsPage() {
   return (
     <React.Suspense fallback={<FormsSettingsPageSkeleton />}>
-      <FormsSettingsPageContent />
+      <RoleGate roles={[UserRole.ADMIN, UserRole.EDITOR]}>
+        <FormsSettingsPageContent />
+      </RoleGate>
     </React.Suspense>
   )
 }