betterstart-cli 0.0.22 → 0.0.23

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

@@ -3,7 +3,7 @@ import { Skeleton } from '@admin/components/ui/skeleton'
 export function BrandingSkeleton() {
   return (
     <div className="flex items-center gap-2 w-full h-full">
-      <Skeleton className="size-8 rounded-full shrink-0" />
+      <Skeleton className="size-8 rounded-sm shrink-0" />
       <Skeleton className="h-4 w-24 group-data-[collapsible=icon]:hidden" />
     </div>
   )

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

@@ -6,7 +6,7 @@ export function UserMenuSkeleton() {
     <SidebarMenu className="h-full gap-0">
       <SidebarMenuItem className="h-full">
         <div className="flex h-full w-full items-center gap-2 px-3">
-          <Skeleton className="size-8 rounded-full shrink-0" />
+          <Skeleton className="size-8 rounded-sm shrink-0" />
           <Skeleton className="h-4 w-20 group-data-[collapsible=icon]:hidden" />
         </div>
       </SidebarMenuItem>

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

@@ -43,7 +43,7 @@ export async function SidebarUserMenu() {
                 <span
                   className={cn(
                     buttonVariants({ variant: 'outline', size: 'icon' }),
-                    'rounded-full group-hover:bg-white size-7'
+                    'rounded-sm group-hover:bg-white size-7'
                   )}
                 >
                   <Ellipsis strokeWidth={2} className="size-4" />

package/dist/assets/adapters/next/templates/init/components/shared/dev-mode/lifecycle-hooks-tab.tsx

@@ -53,14 +53,14 @@ export function LifecycleHooksTab({ lifecycleHooks }: LifecycleHooksTabProps) {
 
   if (!firstHook) {
     return (
-      <div className="flex min-h-80 items-center justify-center rounded-lg border border-dashed border-border px-6 text-center text-sm text-muted-foreground">
+      <div className="flex min-h-80 items-center justify-center rounded-sm border border-dashed border-border px-6 text-center text-sm text-muted-foreground">
         Lifecycle hook examples are generated for entity and form schemas.
       </div>
     )
   }
 
   return (
-    <Accordion type="single" defaultValue={firstHook.id} className="min-h-0 shrink-0 rounded-lg">
+    <Accordion type="single" defaultValue={firstHook.id} className="min-h-0 shrink-0 rounded-sm">
       {lifecycleHooks.map((hook) => {
         const HookIcon = LIFECYCLE_HOOK_ICONS[hook.icon]
         const phaseLabel = LIFECYCLE_HOOK_PHASE_LABELS[hook.phase]

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

@@ -57,7 +57,7 @@ export function SnippetsTab({ snippets }: SnippetsTabProps) {
   }
 
   return (
-    <Accordion type="single" defaultValue={firstSnippet.id} className="min-h-0 shrink-0 rounded-lg">
+    <Accordion type="single" defaultValue={firstSnippet.id} className="min-h-0 shrink-0 rounded-sm">
       {snippets.map((snippet) => {
         const SnippetIcon = SNIPPET_ICONS[snippet.icon]
         const snippetKindLabel = SNIPPET_KIND_LABELS[snippet.kind]

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

@@ -24,7 +24,7 @@ export function EntityVersionItem({
   const authorLabel = author?.name || author?.email || 'System'
 
   return (
-    <div className="flex items-center justify-between gap-3 rounded-2xl border border-border px-3 py-3">
+    <div className="flex items-center justify-between gap-3 rounded-sm border border-border shadow-input px-3 py-3">
       <div className="flex min-w-0 items-center gap-3">
         <Avatar size="sm">
           {author?.image ? <AvatarImage src={author.image} alt={authorLabel} /> : null}

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

@@ -22,7 +22,7 @@ export function EntityVersionsCurrentRow({ updatedAt, author }: EntityVersionsCu
   const authorLabel = author?.name || author?.email || 'System'
 
   return (
-    <div className="flex items-center justify-between gap-3 rounded-2xl border border-border bg-card px-3 py-3">
+    <div className="flex items-center justify-between gap-3 rounded-sm border border-border shadow-input bg-card px-3 py-3">
       <div className="flex min-w-0 items-center gap-3">
         <Avatar size="sm">
           {author?.image ? <AvatarImage src={author.image} alt={authorLabel} /> : null}

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

@@ -51,15 +51,15 @@ export function EntityVersionsDrawer({
           </DrawerDescription>
         </DrawerHeader>
         <ScrollArea className="min-h-0 flex-1">
-          <div className="flex flex-col gap-3 p-4">
+          <div className="flex flex-col gap-1 px-6">
             <EntityVersionsCurrentRow updatedAt={currentUpdatedAt} author={currentAuthor} />
             {isPending ? (
-              <p className="rounded-2xl border border-dashed border-border px-3 py-6 text-center text-sm text-muted-foreground">
+              <p className="rounded-sm border border-dashed border-border px-3 py-6 text-center text-sm text-muted-foreground">
                 Loading versions...
               </p>
             ) : null}
             {!isPending && versions.length === 0 ? (
-              <p className="rounded-2xl border border-dashed border-border px-3 py-6 text-center text-sm text-muted-foreground">
+              <p className="rounded-sm border border-dashed border-border px-3 py-6 text-center text-sm text-muted-foreground">
                 No previous versions yet.
               </p>
             ) : null}

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

@@ -93,7 +93,7 @@ export function EditMediaDialogContent({
     <DrawerContent className="h-full w-full overflow-hidden">
       <div
         ref={handleDrawerContainerRef}
-        className="pointer-events-none absolute inset-3 z-20 overflow-hidden rounded-lg"
+        className="pointer-events-none absolute inset-3 z-20 overflow-hidden rounded-sm"
       />
       <div className="relative z-10 flex min-h-0 flex-1 flex-col overflow-hidden gap-3">
         <DrawerHeader>
@@ -107,7 +107,7 @@ export function EditMediaDialogContent({
           >
             <Card>
               <CardContent className="p-0">
-                <div className="relative aspect-video overflow-hidden rounded-lg bg-background">
+                <div className="relative aspect-video overflow-hidden rounded-sm bg-background">
                   <MediaPreview media={media} showMetadata />
                 </div>
               </CardContent>

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

@@ -105,15 +105,15 @@ export function MediaDeleteDrawer({
         <DrawerPrimitive.Overlay className="pointer-events-auto absolute inset-0 z-20 bg-black/45 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0" />
         <DrawerPrimitive.Content className="pointer-events-auto absolute inset-x-0 bottom-0 z-30 max-h-[calc(100%-1rem)] overflow-hidden p-3 outline-none">
           <div
-            className="overflow-hidden rounded-4xl border border-border bg-popover text-sm text-popover-foreground shadow-2xl transition-[height] duration-200 ease-out"
+            className="overflow-hidden rounded-sm border border-border bg-popover text-sm text-popover-foreground shadow-2xl transition-[height] duration-200 ease-out"
             style={contentHeight ? { height: contentHeight } : undefined}
           >
             <div
               ref={contentRef}
               className="max-h-[calc(100vh-8rem)] overflow-y-auto px-4 pb-4 pt-4"
             >
-              <div aria-hidden="true" className="mx-auto mb-5 h-1.5 w-20 rounded-full bg-muted" />
-              <div className="mb-3 flex size-10 items-center justify-center rounded-full bg-destructive/10 text-foreground">
+              <div aria-hidden="true" className="mx-auto mb-5 h-1.5 w-20 rounded-sm bg-muted" />
+              <div className="mb-3 flex size-10 items-center justify-center rounded-sm bg-destructive/10 text-foreground">
                 <TriangleAlert className="size-5" />
               </div>
               <DrawerPrimitive.Title className="font-heading text-base font-medium text-foreground">

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

@@ -4,6 +4,7 @@ import { UploadDropzone } from '@admin/components/custom/upload-dropzone'
 import { Button } from '@admin/components/ui/button'
 import {
   Dialog,
+  DialogBody,
   DialogContent,
   DialogDescription,
   DialogFooter,
@@ -98,7 +99,7 @@ export function MediaGalleryDialog({
         onOpenChange(next)
       }}
     >
-      <DialogContent className="flex max-h-[700px] h-[80svh] min-h-0 flex-col overflow-hidden sm:max-w-3xl gap-4">
+      <DialogContent className="flex max-h-[700px] h-[80svh] min-h-0 flex-col overflow-hidden sm:max-w-3xl gap-0">
         <DialogHeader>
           <DialogTitle>Select file</DialogTitle>
           <DialogDescription>
@@ -108,73 +109,70 @@ export function MediaGalleryDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <TabsUi.Tabs
-          value={activeTab}
-          onValueChange={(value) => {
-            void setQueryParams({ mg_tab: value as 'upload' | 'url' })
-          }}
-          className="flex min-h-0 w-full flex-col overflow-hidden"
-        >
-          <TabsUi.TabsList className="w-full shrink-0">
-            <TabsUi.TabsTrigger value="upload">Select</TabsUi.TabsTrigger>
-            <TabsUi.TabsTrigger value="url">Import from URL</TabsUi.TabsTrigger>
-          </TabsUi.TabsList>
+        <DialogBody className="flex-1 gap-4">
+          <TabsUi.Tabs
+            value={activeTab}
+            onValueChange={(value) => {
+              void setQueryParams({ mg_tab: value as 'upload' | 'url' })
+            }}
+            className="flex min-h-0 w-full flex-col overflow-hidden"
+          >
+            <TabsUi.TabsList className="w-full shrink-0">
+              <TabsUi.TabsTrigger value="upload">Select</TabsUi.TabsTrigger>
+              <TabsUi.TabsTrigger value="url">Import from URL</TabsUi.TabsTrigger>
+            </TabsUi.TabsList>
 
-          <TabsUi.TabsContent value="upload" className="min-h-0 h-full flex-1">
-            <UploadDropzone
-              onFilesSelected={upload}
-              progress={progress}
-              isUploading={isUploading}
-              accept={accept}
-              className="h-[180px]"
-            />
-          </TabsUi.TabsContent>
+            <TabsUi.TabsContent value="upload" className="min-h-0 h-full flex-1">
+              <UploadDropzone
+                onFilesSelected={upload}
+                progress={progress}
+                isUploading={isUploading}
+                accept={accept}
+                className="h-[180px]"
+              />
+            </TabsUi.TabsContent>
 
-          <TabsUi.TabsContent value="url" className="min-h-0 flex-1">
-            <MediaUrlImporter
-              onImportFromUrl={uploadFromUrl}
-              accept={accept}
-              className="h-[180px]"
-            />
-          </TabsUi.TabsContent>
-        </TabsUi.Tabs>
+            <TabsUi.TabsContent value="url" className="min-h-0 flex-1">
+              <MediaUrlImporter
+                onImportFromUrl={uploadFromUrl}
+                accept={accept}
+                className="h-[180px]"
+              />
+            </TabsUi.TabsContent>
+          </TabsUi.Tabs>
 
-        <MediaGrid
-          items={media}
-          selectedIds={selectedMap}
-          isSelectMode
-          onItemClick={handleItemClick}
-          className="pb-5"
-        />
+          <MediaGrid
+            items={media}
+            selectedIds={selectedMap}
+            isSelectMode
+            onItemClick={handleItemClick}
+            className="pb-5"
+          />
+        </DialogBody>
 
-        <DialogFooter className="mt-auto">
-          <div className="flex items-center justify-end gap-3">
-            <Button variant="outline" onClick={() => onOpenChange(false)}>
-              Cancel
-            </Button>
-            <MediaGridPagination
-              page={safePage}
-              pageCount={pageCount}
-              pageSize={safePageSize}
-              onPageChange={(value) => {
-                void setQueryParams({ mg_page: value })
-              }}
-              onPageSizeChange={(value) => {
-                void setQueryParams({ mg_size: value })
-              }}
-              className="px-0"
-              isMinimal={true}
-            />
-            <Button
-              onClick={() => {
-                onSelect(getSelection())
-                onOpenChange(false)
-              }}
-              disabled={selectionCount === 0}
-            >
-              {mode === 'single' ? 'Done' : `Done (${selectionCount})`}
-            </Button>
-          </div>
+        <DialogFooter showCloseButton>
+          <MediaGridPagination
+            page={safePage}
+            pageCount={pageCount}
+            pageSize={safePageSize}
+            onPageChange={(value) => {
+              void setQueryParams({ mg_page: value })
+            }}
+            onPageSizeChange={(value) => {
+              void setQueryParams({ mg_size: value })
+            }}
+            className="px-0"
+            isMinimal={true}
+          />
+          <Button
+            onClick={() => {
+              onSelect(getSelection())
+              onOpenChange(false)
+            }}
+            disabled={selectionCount === 0}
+          >
+            {mode === 'single' ? 'Done' : `Done (${selectionCount})`}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

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

@@ -42,7 +42,7 @@ export const MediaGridItem = React.memo(function MediaGridItem({
           <Checkbox
             aria-label={selected ? `Deselect ${item.filename}` : `Select ${item.filename}`}
             tabIndex={-1}
-            className={cn('absolute top-3 right-3 z-10 rounded-full bg-card', {
+            className={cn('absolute top-3 right-3 z-10 rounded-sm bg-card', {
               'ring ring-white': selected
             })}
             checked={selected}

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

@@ -90,7 +90,7 @@ export function MediaUrlImporter({ onImportFromUrl, accept, className }: MediaUr
   return (
     <div
       className={cn(
-        'flex items-center justify-center transition-colors rounded-lg border bg-input border-border overflow-hidden h-full flex-col p-5 gap-5',
+        'flex items-center justify-center transition-colors rounded-sm border bg-input border-border overflow-hidden h-full flex-col p-5 gap-5',
         className
       )}
     >

package/dist/assets/adapters/next/templates/init/data/navigation.ts

@@ -1,8 +1,6 @@
 import type { AdminNavigationItem } from '@admin/types/navigation'
 import { House, ImagePlay } from 'lucide-react'
-import { contactNav } from './navigation/contact'
 import { menusNav } from './navigation/menus'
-import { portfolioNav } from './navigation/portfolio'
 import { postsNav } from './navigation/posts'
 
 export type { AdminNavigationItem } from '@admin/types/navigation'
@@ -31,7 +29,7 @@ function comparePositions(a?: number, b?: number): number {
   return 0
 }
 
-const combinedNavigation = [...coreNav, ...contactNav, ...menusNav, ...portfolioNav, ...postsNav]
+const combinedNavigation = [...coreNav, ...menusNav, ...postsNav]
 
 const dashboard = combinedNavigation.find((item) => item.href === '/admin')
 const others = combinedNavigation.filter((item) => item.href !== '/admin')

package/dist/assets/adapters/next/templates/init/lib/actions/auth/auth.ts

@@ -1,9 +1,11 @@
 import { sendPasswordResetEmail } from '@admin/actions/email'
 import db from '@admin/db'
 import * as schema from '@admin/db/schema'
+import { UserRole } from '@admin/types/auth'
 import { betterAuth } from 'better-auth'
 import { drizzleAdapter } from 'better-auth/adapters/drizzle'
 import { toNextJsHandler } from 'better-auth/next-js'
+import { admin } from 'better-auth/plugins/admin'
 
 export { toNextJsHandler }
 
@@ -42,6 +44,12 @@ export const auth = betterAuth({
       maxAge: 15 * 60 // 15 minutes — avoids DB round-trip for session validation
     }
   },
+  plugins: [
+    admin({
+      defaultRole: UserRole.MEMBER,
+      adminRoles: [UserRole.ADMIN]
+    })
+  ],
   user: {
     additionalFields: {
       role: {

package/dist/assets/adapters/next/templates/init/lib/actions/profile/change-own-password.ts

@@ -0,0 +1,59 @@
+'use server'
+
+import { getAuditRequestMetadata } from '@admin/actions/audit/request-metadata'
+import { auth } from '@admin/auth'
+import { getSession } from '@admin/auth/middleware'
+import { runAdminEventHooks } from '@admin/lib/lifecycle-hooks'
+import { headers } from 'next/headers'
+import { invalidateUsersCache } from './invalidate-users-cache'
+import type { ChangeOwnPasswordInput, ChangeOwnPasswordResult } from './types'
+
+export async function changeOwnPassword(
+  input: ChangeOwnPasswordInput
+): Promise<ChangeOwnPasswordResult> {
+  try {
+    const session = await getSession({ disableCookieCache: true })
+    if (!session?.user) {
+      return { success: false, error: 'Not authenticated' }
+    }
+
+    const now = new Date().toISOString()
+    const auditRequestMetadata = await getAuditRequestMetadata()
+
+    const requestHeaders = await headers()
+
+    await auth.api.changePassword({
+      body: {
+        currentPassword: input.currentPassword,
+        newPassword: input.newPassword
+      },
+      headers: requestHeaders
+    })
+
+    await auth.api.revokeOtherSessions({
+      headers: requestHeaders
+    })
+
+    await invalidateUsersCache()
+    runAdminEventHooks({
+      category: 'auth',
+      action: 'update',
+      targetType: 'user',
+      targetId: session.user.id,
+      targetLabel: session.user.email,
+      user: session.user,
+      timestamp: now,
+      sourceType: 'admin_ui' as const,
+      changedFields: ['password'],
+      metadata: { operation: 'password_change' },
+      ...auditRequestMetadata
+    })
+
+    return { success: true }
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to change password'
+    }
+  }
+}

package/dist/assets/adapters/next/templates/init/lib/actions/profile/index.ts

@@ -1,4 +1,9 @@
+export { changeOwnPassword } from './change-own-password'
 export { invalidateUsersCache } from './invalidate-users-cache'
 export { isEmailConfigured } from './is-email-configured'
-export type { UpdateEmailResult } from './types'
+export type {
+  ChangeOwnPasswordInput,
+  ChangeOwnPasswordResult,
+  UpdateEmailResult
+} from './types'
 export { updateEmail } from './update-email'

package/dist/assets/adapters/next/templates/init/lib/actions/profile/types.ts

@@ -2,3 +2,13 @@ export interface UpdateEmailResult {
   success: boolean
   error?: string
 }
+
+export interface ChangeOwnPasswordInput {
+  currentPassword: string
+  newPassword: string
+}
+
+export interface ChangeOwnPasswordResult {
+  success: boolean
+  error?: string
+}

package/dist/assets/adapters/next/templates/init/lib/actions/users/change-user-password.ts

@@ -0,0 +1,77 @@
+'use server'
+
+import { getAuditRequestMetadata } from '@admin/actions/audit/request-metadata'
+import { auth } from '@admin/auth'
+import { requireRole, UserRole } from '@admin/auth/middleware'
+import db from '@admin/db'
+import { user } from '@admin/db/schema'
+import { runAdminEventHooks } from '@admin/lib/lifecycle-hooks'
+import { eq } from 'drizzle-orm'
+import { updateTag } from 'next/cache'
+import { headers } from 'next/headers'
+import type { ChangeUserPasswordInput, ChangeUserPasswordResult } from './types'
+import { usersCacheTags } from './types'
+
+export async function changeUserPassword(
+  input: ChangeUserPasswordInput
+): Promise<ChangeUserPasswordResult> {
+  const actor = await requireRole([UserRole.ADMIN])
+
+  try {
+    const [targetUser] = await db
+      .select({ id: user.id, email: user.email, name: user.name })
+      .from(user)
+      .where(eq(user.id, input.userId))
+      .limit(1)
+
+    if (!targetUser) {
+      return { success: false, error: 'User not found' }
+    }
+
+    if (targetUser.id === actor.id) {
+      return {
+        success: false,
+        error: 'Use your profile to change your own password'
+      }
+    }
+
+    const now = new Date().toISOString()
+    const requestHeaders = await headers()
+    const auditRequestMetadata = await getAuditRequestMetadata()
+
+    await auth.api.setUserPassword({
+      body: {
+        userId: input.userId,
+        newPassword: input.newPassword
+      },
+      headers: requestHeaders
+    })
+
+    await auth.api.revokeUserSessions({
+      body: { userId: input.userId },
+      headers: requestHeaders
+    })
+
+    updateTag(usersCacheTags.all)
+    runAdminEventHooks({
+      category: 'user',
+      action: 'update',
+      targetType: 'user',
+      targetId: targetUser.id,
+      targetLabel: targetUser.email,
+      user: actor,
+      timestamp: now,
+      sourceType: 'admin_ui' as const,
+      changedFields: ['password'],
+      metadata: { operation: 'password_change' },
+      ...auditRequestMetadata
+    })
+
+    return { success: true }
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to change user password'
+    }
+  }
+}

package/dist/assets/adapters/next/templates/init/lib/actions/users/index.ts

@@ -1,7 +1,10 @@
+export { changeUserPassword } from './change-user-password'
 export { createUser } from './create-user'
 export { deleteUser } from './delete-user'
 export { getUsers } from './get-users'
 export type {
+  ChangeUserPasswordInput,
+  ChangeUserPasswordResult,
   CreateUserInput,
   CreateUserResult,
   DeleteUserResult,

package/dist/assets/adapters/next/templates/init/lib/actions/users/types.ts

@@ -33,6 +33,16 @@ export interface UpdateUserRoleResult {
   error?: string
 }
 
+export interface ChangeUserPasswordInput {
+  userId: string
+  newPassword: string
+}
+
+export interface ChangeUserPasswordResult {
+  success: boolean
+  error?: string
+}
+
 export interface DeleteUserResult {
   success: boolean
   error?: string

package/dist/assets/adapters/next/templates/init/lib/db/core/schema.ts

@@ -23,6 +23,9 @@ export const user = pgTable('user', {
   emailVerified: boolean('email_verified').notNull().default(false),
   image: text('image'),
   role: text('role').notNull().default('member'),
+  banned: boolean('banned').default(false),
+  banReason: text('ban_reason'),
+  banExpires: timestamp('ban_expires'),
   createdAt: timestamp('created_at').notNull().defaultNow(),
   updatedAt: timestamp('updated_at').notNull().defaultNow()
 })
@@ -35,6 +38,7 @@ export const session = pgTable('session', {
   updatedAt: timestamp('updated_at').notNull().defaultNow(),
   ipAddress: text('ip_address'),
   userAgent: text('user_agent'),
+  impersonatedBy: text('impersonated_by'),
   userId: text('user_id')
     .notNull()
     .references(() => user.id, { onDelete: 'cascade' })

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

@@ -63,7 +63,7 @@ export default function DashboardPage() {
                       <div className="flex flex-col w-full gap-1">
                         {envVariables.map((env) => (
                           <div
-                            className="flex flex-col w-full bg-card border shadow-card border-border rounded-lg pl-4 pr-2 py-2"
+                            className="flex flex-col w-full bg-card border shadow-card border-border rounded-sm pl-4 pr-2 py-2"
                             key={env.name}
                           >
                             <div className="flex items-center justify-between">

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

@@ -1,6 +1,6 @@
 export function ForgotPasswordPageSkeleton() {
   return (
-    <div className="overflow-hidden rounded-lg border bg-card">
+    <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">

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

@@ -1,6 +1,6 @@
 export function LoginPageSkeleton() {
   return (
-    <div className="overflow-hidden rounded-lg border bg-card">
+    <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">

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

@@ -11,8 +11,7 @@ import { MediaGrid } from '@admin/components/shared/media/media-grid'
 import { MediaGridPagination } from '@admin/components/shared/media/media-grid-pagination'
 import { MediaUrlImporter } from '@admin/components/shared/media/media-url-importer'
 import { PageHeader } from '@admin/components/shared/page-header'
-import { Button } from '@admin/components/ui/button'
-import { ButtonGroup } from '@admin/components/ui/button-group'
+import { Tabs, TabsList, TabsTrigger } from '@admin/components/ui/tabs'
 import * as mediaHooks from '@admin/hooks/use-media'
 import { useMediaFiltersBar } from '@admin/hooks/use-media-filters-bar'
 import { useUpload } from '@admin/hooks/use-upload'
@@ -172,22 +171,18 @@ export function MediaPageContent() {
       <PageHeader
         title="Media Gallery"
         actions={
-          <ButtonGroup>
-            <Button
-              variant={activeTab === 'url' ? 'default' : 'outline'}
-              onClick={() => setActiveTab('url')}
-            >
-              <Link />
-              Import by URL
-            </Button>
-            <Button
-              variant={activeTab === 'upload' ? 'default' : 'outline'}
-              onClick={() => setActiveTab('upload')}
-            >
-              <Upload />
-              Upload
-            </Button>
-          </ButtonGroup>
+          <Tabs defaultValue="upload">
+            <TabsList>
+              <TabsTrigger value="url" onClick={() => setActiveTab('url')}>
+                <Link className="size-3" />
+                Import from URL
+              </TabsTrigger>
+              <TabsTrigger value="upload" onClick={() => setActiveTab('upload')}>
+                <Upload className="size-3" />
+                Upload
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
         }
       />