betterstart-cli 0.0.96 → 0.0.97

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

@@ -38,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) {

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

@@ -42,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) {

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>

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-sm border border-border shadow-input px-3 py-3">
+    <div className="flex items-center justify-between gap-3 rounded-sm border border-border px-3 py-3 shadow-input">
       <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-sm border border-border shadow-input bg-card px-3 py-3">
+    <div className="flex items-center justify-between gap-3 rounded-sm border border-border bg-card px-3 py-3 shadow-input">
       <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/media/edit-media-dialog-content.tsx

@@ -95,7 +95,7 @@ export function EditMediaDialogContent({
         ref={handleDrawerContainerRef}
         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">
+      <div className="relative z-10 flex min-h-0 flex-1 flex-col gap-3 overflow-hidden">
         <DrawerHeader>
           <DrawerTitle>Media file</DrawerTitle>
         </DrawerHeader>
@@ -103,7 +103,7 @@ export function EditMediaDialogContent({
           <form
             id={formId}
             onSubmit={form.handleSubmit(handleSave)}
-            className="flex flex-1 flex-col gap-4 overflow-y-auto px-6 pb-4 pt-px"
+            className="flex flex-1 flex-col gap-4 overflow-y-auto px-6 pt-px pb-4"
           >
             <Card>
               <CardContent className="p-0">
@@ -112,7 +112,7 @@ export function EditMediaDialogContent({
                 </div>
               </CardContent>
 
-              <CardFooter className="grid w-full pt-5 gap-1 pb-3">
+              <CardFooter className="grid w-full gap-1 pt-5 pb-3">
                 <div className="grid w-full gap-2">
                   <div className="flex w-full min-w-0 items-center gap-x-2">
                     <div className="flex min-w-0 flex-1 items-center gap-x-2 text-muted-foreground">

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

@@ -110,7 +110,7 @@ export function MediaDeleteDrawer({
           >
             <div
               ref={contentRef}
-              className="max-h-[calc(100vh-8rem)] overflow-y-auto px-4 pb-4 pt-4"
+              className="max-h-[calc(100vh-8rem)] overflow-y-auto px-4 pt-4 pb-4"
             >
               <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">

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

@@ -48,13 +48,13 @@ export function MediaFiltersBar({
   return (
     <div
       className={cn(
-        'sticky z-9 flex flex-col gap-1 h-16 px-4 xl:flex-row xl:items-center xl:justify-between top-14 bg-background transition-shadow overflow-clip',
+        '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',
         {
           '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">
         <SearchInput
           value={search}
           placeholder={contentType === 'all' ? 'Search media...' : `Search ${contentType}s...`}

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 max-h-[700px] h-[80svh] min-h-0 flex-col overflow-hidden sm:max-w-3xl gap-0">
+      <DialogContent className="flex h-[80svh] max-h-[700px] min-h-0 flex-col gap-0 overflow-hidden sm:max-w-3xl">
         <DialogHeader>
           <DialogTitle>Select file</DialogTitle>
           <DialogDescription>
@@ -122,7 +122,7 @@ export function MediaGalleryDialog({
               <TabsUi.TabsTrigger value="url">Import from URL</TabsUi.TabsTrigger>
             </TabsUi.TabsList>
 
-            <TabsUi.TabsContent value="upload" className="min-h-0 h-full flex-1">
+            <TabsUi.TabsContent value="upload" className="h-full min-h-0 flex-1">
               <UploadDropzone
                 onFilesSelected={upload}
                 progress={progress}

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

@@ -22,19 +22,19 @@ export const MediaGridItem = React.memo(function MediaGridItem({
 }: MediaGridItemProps) {
   return (
     <Card
-      className={cn('relative group', {
+      className={cn('group relative', {
         'cursor-pointer': Boolean(onClick)
       })}
       onClick={onClick ? () => onClick(item) : undefined}
     >
       <CardContent
         aria-pressed={isSelectMode && onClick ? selected : undefined}
-        className={cn('p-2 flex flex-col', {
+        className={cn('flex flex-col p-2', {
           'hover:border-highlight': Boolean(onClick),
           'border-highlight': selected
         })}
       >
-        <div className="flex size-full bg-background border border-border rounded-sm aspect-square overflow-hidden">
+        <div className="flex aspect-square size-full overflow-hidden rounded-sm border border-border bg-background">
           <MediaPreview media={item} isFilled />
         </div>
 

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

@@ -60,7 +60,7 @@ export function MediaGridPagination({
   return (
     <div
       className={cn(
-        'pointer-events-none fixed right-0 bottom-0 left-(--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-(--admin-shell-content-left) isolate z-10 flex flex-col transition-[left] duration-200 ease-linear',
         {
           static: isMinimal
         },
@@ -69,9 +69,9 @@ export function MediaGridPagination({
     >
       <div
         className={cn(
-          'pointer-events-auto flex [--admin-shell-bottom-bar-height:53px] h-(--admin-shell-bottom-bar-height) items-center justify-between border-t border-border/80 bg-background px-4 py-2',
+          'pointer-events-auto flex h-(--admin-shell-bottom-bar-height) items-center justify-between border-t border-border/80 bg-background px-4 py-2 [--admin-shell-bottom-bar-height:53px]',
           {
-            'border-none p-0 bg-transparent': isMinimal
+            'border-none bg-transparent p-0': isMinimal
           }
         )}
       >
@@ -79,7 +79,7 @@ export function MediaGridPagination({
           <div className="flex items-center gap-2">
             <span className="text-sm text-muted-foreground">{perPage}</span>
             <Select value={pageSizeValue} onValueChange={handlePageSizeChange}>
-              <SelectTrigger className="w-25 h-8">
+              <SelectTrigger className="h-8 w-25">
                 <SelectValue>{pageSize}</SelectValue>
               </SelectTrigger>
               <SelectContent>

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

@@ -17,7 +17,7 @@ export function MediaPreview({ media, isFilled = false, showMetadata = false }:
 
   if (media.contentType.startsWith('image/') && !hasImageFailed) {
     return (
-      <div className="flex size-full flex-col items-center justify-center overflow-hidden relative">
+      <div className="relative flex size-full flex-col items-center justify-center overflow-hidden">
         <Image
           src={media.url}
           alt={media.alt || media.filename}
@@ -35,7 +35,7 @@ export function MediaPreview({ media, isFilled = false, showMetadata = false }:
         />
 
         {showMetadata && (
-          <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 flex w-full items-center bg-[linear-gradient(to_top,color-mix(in_oklab,var(--primary)_86%,transparent)_0%,color-mix(in_oklab,var(--primary)_52%,transparent)_48%,transparent_100%)] px-3 py-2 text-left text-xs font-medium justify-between text-white gap-4">
+          <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 flex w-full items-center justify-between gap-4 bg-[linear-gradient(to_top,color-mix(in_oklab,var(--primary)_86%,transparent)_0%,color-mix(in_oklab,var(--primary)_52%,transparent)_48%,transparent_100%)] px-3 py-2 text-left text-xs font-medium text-white">
             <p className="truncate">{media.filename}</p>
             <p className="shrink-0">
               {media.contentType} &middot; {(media.size / 1024).toFixed(1)} KB
@@ -48,7 +48,7 @@ export function MediaPreview({ media, isFilled = false, showMetadata = false }:
 
   if (media.contentType.startsWith('image/')) {
     return (
-      <div className="flex size-full items-center justify-center bg-background border border-border/80 text-muted-foreground/30">
+      <div className="flex size-full items-center justify-center border border-border/80 bg-background text-muted-foreground/30">
         <ImageOff strokeWidth={1} className="size-12" />
       </div>
     )

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

@@ -90,9 +90,9 @@ export function MediaUrlImporter({ onImportFromUrl, accept, className }: MediaUr
 
   return (
     <Card className={cn('flex items-center justify-center', className)}>
-      <CardContent className="w-full h-full">
-        <div className="flex w-full flex-col h-full justify-center items-center gap-3 text-center">
-          <InputGroup className="bg-background mx-auto max-w-2xl">
+      <CardContent className="h-full w-full">
+        <div className="flex h-full w-full flex-col items-center justify-center gap-3 text-center">
+          <InputGroup className="mx-auto max-w-2xl bg-background">
             <InputGroupInput
               type="url"
               name="url"

package/dist/assets/adapters/next/templates/init/components/shared/page-header.tsx

@@ -23,7 +23,7 @@ export function PageHeader({
 
   return (
     <>
-      <header className="fixed z-200 top-0 border-t right-0 left-(--admin-shell-content-left) grid h-14 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center border-b border-border/80 px-4 bg-sidebar transition-[left] duration-200 ease-linear">
+      <header className="fixed top-0 right-0 left-(--admin-shell-content-left) z-200 grid h-14 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center border-t border-b border-border/80 bg-sidebar px-4 transition-[left] duration-200 ease-linear">
         <div className="flex w-full items-center justify-start gap-2">
           {hasBackButton && (
             <Button variant="ghost" size="icon" onClick={() => router.back()}>
@@ -35,9 +35,9 @@ export function PageHeader({
           <h2 className="truncate text-sm font-medium tracking-tight">{title}</h2>
         </div>
         <div className="flex w-full min-w-0 items-center justify-end gap-2">
-          {children && children}
-          {search && search}
-          {actions && actions}
+          {children}
+          {search}
+          {actions}
         </div>
       </header>
       <div className="h-14 shrink-0" aria-hidden="true" />