betterstart-cli 0.0.95 → 0.0.97

package/dist/assets/adapters/next/integrations/_shared/actions/object-key.ts

@@ -0,0 +1,16 @@
+import { randomUUID } from 'node:crypto'
+
+function sanitizeFilename(filename: string): string {
+  return filename.replace(/[^a-zA-Z0-9.-]/g, '_')
+}
+
+/**
+ * Object-key naming scheme for every upload, shared by all storage providers.
+ *
+ * Single owner: a project that switches storage providers must keep producing
+ * consistent keys. This previously existed as an identical copy inside each of
+ * the R2, Railway Bucket, and Vercel Blob payloads.
+ */
+export function buildStorageObjectKey(filename: string, prefix = 'uploads'): string {
+  return `${prefix}/${Date.now()}-${randomUUID()}-${sanitizeFilename(filename)}`
+}

package/dist/assets/adapters/next/integrations/r2/actions/r2.ts

@@ -1,4 +1,4 @@
-import { randomUUID } from 'node:crypto'
+import { buildStorageObjectKey } from '@admin/actions/storage/object-key'
 import type { AdminStorageProvider, AdminStorageUploadInput } from '@admin/actions/storage/types'
 import { PutObjectCommand, S3Client } from '@aws-sdk/client-s3'
 
@@ -14,14 +14,6 @@ function getConfig() {
   }
 }
 
-function sanitizeFilename(filename: string): string {
-  return filename.replace(/[^a-zA-Z0-9.-]/g, '_')
-}
-
-function buildKey(filename: string, prefix = 'uploads'): string {
-  return `${prefix}/${Date.now()}-${randomUUID()}-${sanitizeFilename(filename)}`
-}
-
 function getClient(): S3Client {
   if (r2Client) {
     return r2Client
@@ -46,10 +38,10 @@ export const r2StorageProvider: AdminStorageProvider = {
     const config = getConfig()
     return Boolean(
       config.accountId &&
-        config.accessKeyId &&
-        config.secretAccessKey &&
-        config.bucketName &&
-        config.publicUrl
+      config.accessKeyId &&
+      config.secretAccessKey &&
+      config.bucketName &&
+      config.publicUrl
     )
   },
   async saveFile(input: AdminStorageUploadInput) {
@@ -58,7 +50,7 @@ export const r2StorageProvider: AdminStorageProvider = {
       throw new Error('Cloudflare R2 is not fully configured.')
     }
 
-    const key = buildKey(input.filename, input.prefix)
+    const key = buildStorageObjectKey(input.filename, input.prefix)
     await getClient().send(
       new PutObjectCommand({
         Bucket: config.bucketName,

package/dist/assets/adapters/next/integrations/r2/integration.ts

@@ -9,6 +9,10 @@ export const r2Integration: BetterstartIntegrationDefinition = {
   dependencies: [],
   conflicts: ['vercel-blob', 'railway-bucket'],
   files: [
+    {
+      outputPath: 'lib/actions/storage/object-key.ts',
+      templatePath: '../_shared/actions/object-key.ts'
+    },
     {
       outputPath: 'lib/actions/r2/provider.ts',
       templatePath: 'actions/r2.ts'

package/dist/assets/adapters/next/integrations/railway-bucket/actions/railway-bucket.ts

@@ -1,4 +1,4 @@
-import { randomUUID } from 'node:crypto'
+import { buildStorageObjectKey } from '@admin/actions/storage/object-key'
 import type { AdminStorageProvider, AdminStorageUploadInput } from '@admin/actions/storage/types'
 import { GetObjectCommand, PutObjectCommand, S3Client } from '@aws-sdk/client-s3'
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
@@ -16,14 +16,6 @@ function getConfig() {
   }
 }
 
-function sanitizeFilename(filename: string): string {
-  return filename.replace(/[^a-zA-Z0-9.-]/g, '_')
-}
-
-function buildKey(filename: string, prefix = 'uploads'): string {
-  return `${prefix}/${Date.now()}-${randomUUID()}-${sanitizeFilename(filename)}`
-}
-
 function stableReadUrl(key: string): string {
   return `/api/admin/storage/${Buffer.from(key, 'utf-8').toString('base64url')}`
 }
@@ -50,11 +42,11 @@ export const railwayBucketStorageProvider = {
     const config = getConfig()
     return Boolean(
       config.endpoint &&
-        config.accessKeyId &&
-        config.secretAccessKey &&
-        config.bucketName &&
-        config.region &&
-        config.urlStyle
+      config.accessKeyId &&
+      config.secretAccessKey &&
+      config.bucketName &&
+      config.region &&
+      config.urlStyle
     )
   },
   async saveFile(input: AdminStorageUploadInput) {
@@ -63,7 +55,7 @@ export const railwayBucketStorageProvider = {
       throw new Error('Railway Bucket is not fully configured.')
     }
 
-    const key = buildKey(input.filename, input.prefix)
+    const key = buildStorageObjectKey(input.filename, input.prefix)
     await getClient().send(
       new PutObjectCommand({
         Bucket: config.bucketName,

package/dist/assets/adapters/next/integrations/railway-bucket/integration.ts

@@ -9,6 +9,10 @@ export const railwayBucketIntegration: BetterstartIntegrationDefinition = {
   dependencies: [],
   conflicts: ['r2', 'vercel-blob'],
   files: [
+    {
+      outputPath: 'lib/actions/storage/object-key.ts',
+      templatePath: '../_shared/actions/object-key.ts'
+    },
     {
       outputPath: 'lib/actions/railway-bucket/provider.ts',
       templatePath: 'actions/railway-bucket.ts'

package/dist/assets/adapters/next/integrations/vercel-blob/actions/vercel-blob.ts

@@ -1,4 +1,4 @@
-import { randomUUID } from 'node:crypto'
+import { buildStorageObjectKey } from '@admin/actions/storage/object-key'
 import type { AdminStorageProvider, AdminStorageUploadInput } from '@admin/actions/storage/types'
 import { put } from '@vercel/blob'
 
@@ -6,14 +6,6 @@ function getToken(): string {
   return process.env.BLOB_READ_WRITE_TOKEN?.trim() ?? ''
 }
 
-function sanitizeFilename(filename: string): string {
-  return filename.replace(/[^a-zA-Z0-9.-]/g, '_')
-}
-
-function buildKey(filename: string, prefix = 'uploads'): string {
-  return `${prefix}/${Date.now()}-${randomUUID()}-${sanitizeFilename(filename)}`
-}
-
 export const vercelBlobStorageProvider: AdminStorageProvider = {
   id: 'vercel-blob',
   isConfigured() {
@@ -24,7 +16,7 @@ export const vercelBlobStorageProvider: AdminStorageProvider = {
       throw new Error('Vercel Blob is not configured.')
     }
 
-    const key = buildKey(input.filename, input.prefix)
+    const key = buildStorageObjectKey(input.filename, input.prefix)
     const blob = await put(key, input.buffer, {
       access: 'public',
       contentType: input.contentType,

package/dist/assets/adapters/next/integrations/vercel-blob/integration.ts

@@ -9,6 +9,10 @@ export const vercelBlobIntegration: BetterstartIntegrationDefinition = {
   dependencies: [],
   conflicts: ['r2', 'railway-bucket'],
   files: [
+    {
+      outputPath: 'lib/actions/storage/object-key.ts',
+      templatePath: '../_shared/actions/object-key.ts'
+    },
     {
       outputPath: 'lib/actions/vercel-blob/provider.ts',
       templatePath: 'actions/vercel-blob.ts'

package/dist/assets/adapters/next/templates/init/api/upload-route.ts

@@ -1,9 +1,12 @@
+import { getAuditRequestMetadata } from '@admin/actions/audit/request-metadata'
 import { mediaCacheTags } from '@admin/actions/media/types'
 import { saveUpload } from '@admin/actions/storage'
-import { getSession } from '@admin/auth/middleware'
+import { requireRole, UserRole } from '@admin/auth/middleware'
 import db from '@admin/db'
 import { adminMedia } from '@admin/db/schema'
+import { runAdminEventHooks } from '@admin/lib/lifecycle-hooks'
 import type { UploadedFile } from '@admin/types'
+import { getTouchedFieldNames } from '@admin/utils/audit/audit'
 import { mapMediaRow, selectMedia } from '@admin/utils/media/query'
 import { validateFiles } from '@admin/utils/validation/validation'
 import { eq } from 'drizzle-orm'
@@ -11,6 +14,8 @@ import { revalidateTag } from 'next/cache'
 import { type NextRequest, NextResponse } from 'next/server'
 
 export async function POST(request: NextRequest) {
+  const actor = await requireRole([UserRole.ADMIN, UserRole.EDITOR])
+
   try {
     const formData = await request.formData()
     const prefix = formData.get('prefix')?.toString() || 'uploads'
@@ -56,8 +61,7 @@ export async function POST(request: NextRequest) {
     }
 
     const uploadedFiles: UploadedFile[] = []
-    const session = await getSession()
-    const actorId = session?.user?.id ?? null
+    const auditRequestMetadata = await getAuditRequestMetadata()
 
     for (const [index, file] of files.entries()) {
       const arrayBuffer = await file.arrayBuffer()
@@ -74,21 +78,25 @@ export async function POST(request: NextRequest) {
       const heightStr = formData.get(`height${index}`)?.toString()
       const now = new Date().toISOString()
 
+      const mediaValues = {
+        url,
+        filename: file.name,
+        contentType: file.type,
+        size: file.size,
+        width: widthStr ? Number(widthStr) : null,
+        height: heightStr ? Number(heightStr) : null,
+        alt: null,
+        tags: null
+      }
+
       const [created] = await db
         .insert(adminMedia)
         .values({
-          url,
-          filename: file.name,
-          contentType: file.type,
-          size: file.size,
-          width: widthStr ? Number(widthStr) : null,
-          height: heightStr ? Number(heightStr) : null,
-          alt: null,
-          tags: null,
+          ...mediaValues,
           createdAt: now,
           updatedAt: now,
-          createdBy: actorId,
-          updatedBy: actorId
+          createdBy: actor.id,
+          updatedBy: actor.id
         })
         .returning({ id: adminMedia.id })
 
@@ -99,6 +107,8 @@ export async function POST(request: NextRequest) {
         )
       }
 
+      // Route handlers cannot call updateTag(), so revalidateTag() with an
+      // immediate expiry is the equivalent invalidation used by the actions.
       revalidateTag(mediaCacheTags.all, { expire: 0 })
       revalidateTag(mediaCacheTags.byId(created.id), { expire: 0 })
 
@@ -112,6 +122,20 @@ export async function POST(request: NextRequest) {
 
       const media = mapMediaRow(mediaRow)
 
+      runAdminEventHooks({
+        category: 'media',
+        action: 'create',
+        targetType: 'media',
+        targetId: media.id,
+        targetLabel: media.filename,
+        user: actor,
+        timestamp: now,
+        sourceType: 'admin_ui' as const,
+        changedFields: getTouchedFieldNames(mediaValues),
+        metadata: { contentType: media.contentType, size: media.size },
+        ...auditRequestMetadata
+      })
+
       uploadedFiles.push({
         id: media.id,
         key,

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

@@ -10,19 +10,19 @@ export function AdminHeader() {
   const { state } = useSidebar()
 
   return (
-    <header className="flex h-14 shrink-0 items-center gap-2 border-b border-border w-full sticky top-0 z-50">
-      <div className="flex items-center px-5 gap-1 flex-1 w-full justify-between">
-        <div className="flex items-center gap-2 w-full">
+    <header className="sticky top-0 z-50 flex h-14 w-full shrink-0 items-center gap-2 border-b border-border">
+      <div className="flex w-full flex-1 items-center justify-between gap-1 px-5">
+        <div className="flex w-full items-center gap-2">
           {state === 'collapsed' && <SidebarTrigger />}
         </div>
-        <div className="flex items-center gap-2 ml-auto">
+        <div className="ml-auto flex items-center gap-2">
           <Button
             variant="ghost"
             size="icon"
             onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
           >
-            <Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-            <Moon className="absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <Sun className="size-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+            <Moon className="absolute size-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
             <span className="sr-only">Toggle theme</span>
           </Button>
         </div>

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

@@ -2,8 +2,8 @@ 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-sm shrink-0" />
+    <div className="flex h-full w-full items-center gap-2">
+      <Skeleton className="size-8 shrink-0 rounded-sm" />
       <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-sm shrink-0" />
+          <Skeleton className="size-8 shrink-0 rounded-sm" />
           <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

@@ -27,7 +27,7 @@ export async function SidebarUserMenu() {
           <DropdownMenuTrigger asChild>
             <Button
               variant="ghost"
-              className="bg-transparent! px-3 h-full w-full justify-start text-left ring-0! border-none"
+              className="h-full w-full justify-start border-none bg-transparent! px-3 text-left ring-0!"
             >
               <Avatar className="size-8 shrink-0">
                 <AvatarImage src={user.image ?? undefined} />
@@ -36,14 +36,14 @@ export async function SidebarUserMenu() {
                 </AvatarFallback>
               </Avatar>
               <div className="flex-1 truncate group-data-[collapsible=icon]:hidden">
-                <p className="font-medium truncate">{user.name}</p>
+                <p className="truncate font-medium">{user.name}</p>
               </div>
 
               <div className="group-data-[collapsible=icon]:hidden">
                 <span
                   className={cn(
                     buttonVariants({ variant: 'outline', size: 'icon' }),
-                    'rounded-sm group-hover:bg-white size-7'
+                    'size-7 rounded-sm group-hover:bg-white'
                   )}
                 >
                   <Ellipsis strokeWidth={2} className="size-4" />
@@ -57,17 +57,17 @@ export async function SidebarUserMenu() {
                 <Link
                   href="/admin/profile"
                   prefetch={true}
-                  className="w-full flex justify-between items-center gap-2 pr-1 py-2"
+                  className="flex w-full items-center justify-between gap-2 py-2 pr-1"
                 >
-                  <div className="flex gap-2 items-center">
+                  <div className="flex items-center gap-2">
                     <div className="flex flex-col">
-                      <p className="font-medium truncate">{user.name}</p>
-                      <p className="text-sm text-muted-foreground [text-box-trim:trim-start] truncate font-normal">
+                      <p className="truncate font-medium">{user.name}</p>
+                      <p className="truncate text-sm font-normal text-muted-foreground [text-box-trim:trim-start]">
                         {user.email}
                       </p>
                     </div>
                   </div>
-                  <Button variant="ghost" className="size-8! pointer-events-none shrink-0">
+                  <Button variant="ghost" className="pointer-events-none size-8! shrink-0">
                     <Settings strokeWidth={2} className="size-4" />
                   </Button>
                 </Link>

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

@@ -25,12 +25,12 @@ export function AdminSidebar(props: ComponentProps<typeof Sidebar>) {
 
   return (
     <Sidebar collapsible="icon" {...props}>
-      <SidebarHeader className="border-b border-border/80 h-14 items-center flex w-full border-t">
+      <SidebarHeader className="flex h-14 w-full items-center border-t border-b border-border/80">
         <Suspense fallback={<BrandingSkeleton />}>
           <SidebarBrandingRsc />
         </Suspense>
       </SidebarHeader>
-      <SidebarContent className="pb-1 pt-4">
+      <SidebarContent className="pt-4 pb-1">
         {groups.map((group) => (
           <Fragment key={group.label ?? '_ungrouped'}>
             <SidebarGroup className="py-0">
@@ -51,7 +51,7 @@ export function AdminSidebar(props: ComponentProps<typeof Sidebar>) {
 
         <SidebarGroup className="mt-auto gap-2 px-0">
           <Separator />
-          <SidebarMenu className="px-2 gap-0.5">
+          <SidebarMenu className="gap-0.5 px-2">
             <SidebarMenuItem>
               <SidebarNavLink href="/admin/users">
                 <Users strokeWidth={2} />
@@ -68,7 +68,7 @@ export function AdminSidebar(props: ComponentProps<typeof Sidebar>) {
         </SidebarGroup>
       </SidebarContent>
 
-      <SidebarFooter className="[--admin-shell-bottom-bar-height:53px] h-(--admin-shell-bottom-bar-height) shrink-0 border-t border-border bg-background p-0">
+      <SidebarFooter className="h-(--admin-shell-bottom-bar-height) shrink-0 border-t border-border bg-background p-0 [--admin-shell-bottom-bar-height:53px]">
         <Suspense fallback={<UserMenuSkeleton />}>
           <SidebarUserMenu />
         </Suspense>

package/dist/assets/adapters/next/templates/init/components/layouts/content-skeleton.tsx

@@ -3,9 +3,9 @@ import { Skeleton } from '@admin/components/ui/skeleton'
 
 export function ContentSkeleton() {
   return (
-    <div className="relative z-10 flex items-center justify-center h-[50svh] px-4">
+    <div className="relative z-10 flex h-[50svh] items-center justify-center px-4">
       <div className="relative w-full max-w-xl" aria-hidden="true">
-        <Card size="sm" className="absolute left-1/2 top-1 h-24 w-[72%] -translate-x-1/2 rotate-3">
+        <Card size="sm" className="absolute top-1 left-1/2 h-24 w-[72%] -translate-x-1/2 rotate-3">
           <CardContent className="flex h-full items-start gap-3 p-3">
             <Skeleton className="size-8 shrink-0 rounded-md" />
             <div className="flex min-w-0 flex-1 flex-col gap-2 pt-1">
@@ -16,7 +16,7 @@ export function ContentSkeleton() {
           </CardContent>
         </Card>
 
-        <Card size="sm" className="absolute right-2 top-10 h-36 w-[50%] rotate-6">
+        <Card size="sm" className="absolute top-10 right-2 h-36 w-[50%] rotate-6">
           <CardContent className="flex h-full flex-col gap-4 p-4">
             <Skeleton className="ml-auto h-6 w-14 rounded-md" />
             <div className="flex flex-col gap-3 pt-2">
@@ -27,7 +27,7 @@ export function ContentSkeleton() {
           </CardContent>
         </Card>
 
-        <Card size="sm" className="absolute left-0 top-12 h-36 w-[78%] -rotate-2">
+        <Card size="sm" className="absolute top-12 left-0 h-36 w-[78%] -rotate-2">
           <CardContent className="flex h-full gap-4 p-4">
             <Skeleton className="h-full w-[27%] shrink-0 rounded-md" />
             <div className="flex min-w-0 flex-1 flex-col gap-3">

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

@@ -24,16 +24,16 @@ export function SidebarBranding({ initialData }: SidebarBrandingProps) {
   const dashboardLogo = settings?.dashboardLogo || DEFAULT_LOGO_URL
 
   return (
-    <div className="flex items-center gap-2 w-full relative h-full">
-      <Link href="/admin" className="flex items-center gap-2 w-full">
+    <div className="relative flex h-full w-full items-center gap-2">
+      <Link href="/admin" className="flex w-full items-center gap-2">
         <Avatar className="size-8">
           <AvatarImage src={dashboardLogo} />
           <AvatarFallback className="text-sm font-semibold text-foreground">
             {dashboardName.charAt(0)}
           </AvatarFallback>
         </Avatar>
-        <div className="flex text-foreground items-center gap-1 w-full group-data-[collapsible=icon]:hidden">
-          <span className="text-sm font-medium line-clamp-1">{dashboardName}</span>
+        <div className="flex w-full items-center gap-1 text-foreground group-data-[collapsible=icon]:hidden">
+          <span className="line-clamp-1 text-sm font-medium">{dashboardName}</span>
         </div>
       </Link>
     </div>

package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-grid.tsx

@@ -90,7 +90,7 @@ function DataGridHead({ className, ...props }: React.ComponentProps<'div'>) {
       {...dataGridColumnHeaderRole}
       data-slot="data-grid-head"
       className={cn(
-        'grid h-9.5 items-center px-3 text-left font-medium whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0 *:h-full',
+        'grid h-9.5 items-center px-3 text-left font-medium whitespace-nowrap text-muted-foreground *:h-full [&:has([role=checkbox])]:pr-0',
         className
       )}
       tabIndex={-1}

package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-table-pagination.tsx

@@ -90,19 +90,19 @@ export function DataTablePagination<TData>(props: DataTablePaginationProps<TData
   return (
     <div
       className={cn(
-        'pointer-events-none fixed right-0 bottom-0 left-[var(--admin-shell-content-left)] z-10 isolate flex flex-col transition-[left] duration-200 ease-linear',
+        'pointer-events-none fixed right-0 bottom-0 left-[var(--admin-shell-content-left)] isolate z-10 flex flex-col transition-[left] duration-200 ease-linear',
         className
       )}
     >
       <ProgressiveBlur position="bottom" height="53px" />
-      <div className="pointer-events-auto flex [--admin-shell-bottom-bar-height:53px] h-(--admin-shell-bottom-bar-height) items-center justify-between border-t border-border bg-background px-4 py-2">
+      <div className="pointer-events-auto flex h-(--admin-shell-bottom-bar-height) items-center justify-between border-t border-border bg-background px-4 py-2 [--admin-shell-bottom-bar-height:53px]">
         <div className="flex items-center gap-2">
           <span className="text-sm text-muted-foreground">Rows per page</span>
           <Select
             value={pageSize === -1 ? 'all' : String(pageSize)}
             onValueChange={handlePageSizeChange}
           >
-            <SelectTrigger className="w-25 h-8">
+            <SelectTrigger className="h-8 w-25">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>

package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-table.tsx

@@ -154,7 +154,7 @@ export function DataTable<TData extends RowData, TValue>({
                       <button
                         type="button"
                         aria-label={`Resize ${resizeLabel} column`}
-                        className="group/resize-handle absolute right-0 top-0 z-10 flex h-full w-5 cursor-col-resize touch-none select-none items-center justify-center text-foreground opacity-0 transition-opacity focus-visible:opacity-100 focus-visible:outline-none group-focus-within/resize-header:opacity-100 data-[column-hovered=true]:opacity-100 data-[resizing=true]:opacity-100"
+                        className="group/resize-handle absolute top-0 right-0 z-10 flex h-full w-5 cursor-col-resize touch-none items-center justify-center text-foreground opacity-0 transition-opacity select-none group-focus-within/resize-header:opacity-100 focus-visible:opacity-100 focus-visible:outline-none data-[column-hovered=true]:opacity-100 data-[resizing=true]:opacity-100"
                         data-resize-handle
                         data-column-hovered={
                           hoveredColumnId === header.column.id ? 'true' : 'false'

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

@@ -36,7 +36,7 @@ export function DeleteDialog({
     <AlertDialog open={open} onOpenChange={setOpen}>
       <AlertDialogTrigger asChild>
         <Button variant="destructive" size="default">
-          <Trash2 className="size-3.5 -ml-0.5" strokeWidth={2} />
+          <Trash2 className="-ml-0.5 size-3.5" strokeWidth={2} />
           Delete {count} {label}
         </Button>
       </AlertDialogTrigger>

package/dist/assets/adapters/next/templates/init/components/shared/dev-mode/copyable-code-block.tsx

@@ -35,10 +35,10 @@ export function CopyableCodeBlock({ label, code, language, tabs }: CopyableCodeB
   const hasTabs = codeTabs.length > 1
 
   return (
-    <Card className="flex flex-col w-full p-0 gap-0">
+    <Card className="flex w-full flex-col gap-0 p-0">
       {hasTabs ? (
         <Tabs value={activeTab.id} onValueChange={setActiveTabId} className="min-h-0 flex-1 gap-0">
-          <CardHeader className="flex items-center justify-between gap-2 pt-[5px]! pb-2! pl-3.5! pr-1 bg-background border-b border-border">
+          <CardHeader className="flex items-center justify-between gap-2 border-b border-border bg-background pt-[5px]! pr-1 pb-2! pl-3.5!">
             <div className="flex min-w-0 flex-1 items-center gap-2">
               <span className="min-w-0 truncate text-sm font-medium text-muted-foreground">
                 {label}
@@ -66,7 +66,7 @@ export function CopyableCodeBlock({ label, code, language, tabs }: CopyableCodeB
 
           {codeTabs.map((tab) => (
             <TabsContent key={tab.id} value={tab.id} className="min-h-0 overflow-auto">
-              <CardContent className="p-0 overflow-auto h-full">
+              <CardContent className="h-full overflow-auto p-0">
                 <React.Suspense fallback={<PlainCodeFallback code={tab.code} />}>
                   <LazyCodeMirror code={tab.code} language={tab.language} theme={codeTheme} />
                 </React.Suspense>
@@ -76,7 +76,7 @@ export function CopyableCodeBlock({ label, code, language, tabs }: CopyableCodeB
         </Tabs>
       ) : (
         <>
-          <CardHeader className="flex items-center justify-between gap-2 pt-[5px]! pb-2! pl-3.5! pr-1 bg-background border-b border-border">
+          <CardHeader className="flex items-center justify-between gap-2 border-b border-border bg-background pt-[5px]! pr-1 pb-2! pl-3.5!">
             <span className="min-w-0 truncate text-sm font-medium text-muted-foreground">
               {label}
             </span>
@@ -92,7 +92,7 @@ export function CopyableCodeBlock({ label, code, language, tabs }: CopyableCodeB
               {isCopied ? <Check /> : <Copy />}
             </Button>
           </CardHeader>
-          <CardContent className="p-0 overflow-auto">
+          <CardContent className="overflow-auto p-0">
             <React.Suspense fallback={<PlainCodeFallback code={code} />}>
               <LazyCodeMirror code={code} language={language} theme={codeTheme} />
             </React.Suspense>

package/dist/assets/adapters/next/templates/init/components/shared/dev-mode/plain-code-fallback.tsx

@@ -4,7 +4,7 @@ interface PlainCodeFallbackProps {
 
 export function PlainCodeFallback({ code }: PlainCodeFallbackProps) {
   return (
-    <pre className="min-h-full overflow-x-auto whitespace-pre p-3 font-mono text-xs leading-5 text-foreground">
+    <pre className="min-h-full overflow-x-auto p-3 font-mono text-xs leading-5 whitespace-pre text-foreground">
       {code}
     </pre>
   )

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

@@ -62,7 +62,7 @@ export function DevModeIntegrateButton({
         </DrawerHeader>
 
         {loadedIntegration ? (
-          <Tabs defaultValue="snippets" className="min-h-0 flex-1 overflow-hidden px-6 pb-4 gap-4">
+          <Tabs defaultValue="snippets" className="min-h-0 flex-1 gap-4 overflow-hidden px-6 pb-4">
             <TabsList className="w-full">
               <TabsTrigger value="snippets">Snippets</TabsTrigger>
               <TabsTrigger value="lifecycle-hooks">Lifecycle Hooks</TabsTrigger>

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

@@ -64,13 +64,13 @@ export function EntityFiltersBar({
   return (
     <div
       className={cn(
-        'sticky z-10 flex gap-1 px-4 bg-background h-16 xl:flex-row xl:items-center xl:justify-between top-14 transition-shadow overflow-x-clip',
+        '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',
         {
           'shadow-modal/3': hasScrolled
         }
       )}
     >
-      <div className="flex flex-1 items-center gap-1 w-full">
+      <div className="flex w-full flex-1 items-center gap-1">
         {onSearch ? (
           <SearchInput
             value={search}
@@ -102,7 +102,7 @@ export function EntityFiltersBar({
           }
 
           return (
-            <div key={filter.key} className="flex items-center gap-1 relative">
+            <div key={filter.key} className="relative flex items-center gap-1">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button variant="outline" className="w-45 justify-between">
@@ -112,7 +112,7 @@ export function EntityFiltersBar({
                       : `All ${filter.label}`}
 
                     {!filter.value && (
-                      <ChevronDown className="size-4 absolute right-2.5 top-1/2 -translate-y-1/2 text-foreground" />
+                      <ChevronDown className="absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-foreground" />
                     )}
                   </Button>
                 </DropdownMenuTrigger>
@@ -144,7 +144,7 @@ export function EntityFiltersBar({
                   type="button"
                   variant="ghost"
                   size="icon-sm"
-                  className="absolute right-1 top-1/2 -translate-y-1/2 text-foreground size-7"
+                  className="absolute top-1/2 right-1 size-7 -translate-y-1/2 text-foreground"
                   onClick={() => {
                     React.startTransition(() => {
                       onFilterChange({ [filter.key]: null })

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

@@ -54,7 +54,7 @@ export function EntityMetadata({
           <span className="text-foreground">{data.id}</span>
         </div>
 
-        <Separator orientation="vertical" className="h-4 rotate-20 my-auto" />
+        <Separator orientation="vertical" className="my-auto h-4 rotate-20" />
 
         <div className="flex items-center gap-1">
           <span>Created by</span>
@@ -63,7 +63,7 @@ export function EntityMetadata({
           <span className="text-foreground">{format(created, fullFmt)}</span>
         </div>
 
-        <Separator orientation="vertical" className="h-4 rotate-20 my-auto" />
+        <Separator orientation="vertical" className="my-auto h-4 rotate-20" />
 
         <div className="flex items-center gap-1">
           <span>Last edited by</span>