betterstart-cli 0.0.96 → 0.0.98

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

@@ -1,4 +1,4 @@
-import type { BetterstartIntegrationDefinition } from '@integration-engine/types.js'
+import type { BetterstartIntegrationDefinition } from '@cli-types/integration-engine/integrations.js'
 
 export const mailchimpIntegration: BetterstartIntegrationDefinition = {
   id: 'mailchimp',

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

@@ -1,5 +1,5 @@
-import { buildStorageObjectKey } from '@admin/actions/storage/object-key'
 import type { AdminStorageProvider, AdminStorageUploadInput } from '@admin/actions/storage/types'
+import { buildStorageObjectKey } from '@admin/actions/storage/object-key'
 import { PutObjectCommand, S3Client } from '@aws-sdk/client-s3'
 
 let r2Client: S3Client | null = null
@@ -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/r2/integration.ts

@@ -1,4 +1,4 @@
-import type { BetterstartIntegrationDefinition } from '@integration-engine/types.js'
+import type { BetterstartIntegrationDefinition } from '@cli-types/integration-engine/integrations.js'
 
 export const r2Integration: BetterstartIntegrationDefinition = {
   id: 'r2',

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

@@ -1,5 +1,5 @@
-import { buildStorageObjectKey } from '@admin/actions/storage/object-key'
 import type { AdminStorageProvider, AdminStorageUploadInput } from '@admin/actions/storage/types'
+import { buildStorageObjectKey } from '@admin/actions/storage/object-key'
 import { GetObjectCommand, PutObjectCommand, S3Client } from '@aws-sdk/client-s3'
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
 
@@ -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/integrations/railway-bucket/integration.ts

@@ -1,4 +1,4 @@
-import type { BetterstartIntegrationDefinition } from '@integration-engine/types.js'
+import type { BetterstartIntegrationDefinition } from '@cli-types/integration-engine/integrations.js'
 
 export const railwayBucketIntegration: BetterstartIntegrationDefinition = {
   id: 'railway-bucket',

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

@@ -1,4 +1,4 @@
-import type { BetterstartIntegrationDefinition } from '@integration-engine/types.js'
+import type { BetterstartIntegrationDefinition } from '@cli-types/integration-engine/integrations.js'
 
 export const resendIntegration: BetterstartIntegrationDefinition = {
   id: 'resend',

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

@@ -1,5 +1,5 @@
-import { buildStorageObjectKey } from '@admin/actions/storage/object-key'
 import type { AdminStorageProvider, AdminStorageUploadInput } from '@admin/actions/storage/types'
+import { buildStorageObjectKey } from '@admin/actions/storage/object-key'
 import { put } from '@vercel/blob'
 
 function getToken(): string {

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

@@ -1,4 +1,4 @@
-import type { BetterstartIntegrationDefinition } from '@integration-engine/types.js'
+import type { BetterstartIntegrationDefinition } from '@cli-types/integration-engine/integrations.js'
 
 export const vercelBlobIntegration: BetterstartIntegrationDefinition = {
   id: 'vercel-blob',

package/dist/assets/adapters/next/presets/blog/preset.ts

@@ -1,4 +1,4 @@
-import type { BetterstartPresetDefinition } from '@preset-engine/types.js'
+import type { BetterstartPresetDefinition } from '@cli-types/preset-engine/presets.js'
 
 export const blogPreset: BetterstartPresetDefinition = {
   id: 'blog',

package/dist/assets/adapters/next/presets/portfolio/preset.ts

@@ -1,4 +1,4 @@
-import type { BetterstartPresetDefinition } from '@preset-engine/types.js'
+import type { BetterstartPresetDefinition } from '@cli-types/preset-engine/presets.js'
 
 export const portfolioPreset: BetterstartPresetDefinition = {
   id: 'portfolio',

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

@@ -1,5 +1,6 @@
+import type { NextRequest } from 'next/server'
 import { getStorageProvider } from '@admin/actions/storage/provider'
-import { type NextRequest, NextResponse } from 'next/server'
+import { NextResponse } from 'next/server'
 
 type SignedReadStorageProvider = ReturnType<typeof getStorageProvider> & {
   createReadUrl?: (storageKey: string) => Promise<string>

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

@@ -1,3 +1,5 @@
+import type { UploadedFile } from '@admin/types'
+import type { NextRequest } from 'next/server'
 import { getAuditRequestMetadata } from '@admin/actions/audit/request-metadata'
 import { mediaCacheTags } from '@admin/actions/media/types'
 import { saveUpload } from '@admin/actions/storage'
@@ -5,13 +7,12 @@ 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'
 import { revalidateTag } from 'next/cache'
-import { type NextRequest, NextResponse } from 'next/server'
+import { NextResponse } from 'next/server'
 
 export async function POST(request: NextRequest) {
   const actor = await requireRole([UserRole.ADMIN, UserRole.EDITOR])

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-providers.tsx

@@ -12,7 +12,7 @@ export function AdminProviders({ children }: { children: React.ReactNode }) {
       new QueryClient({
         defaultOptions: {
           queries: {
-            staleTime: 30 * 1000, // 30 seconds — client navigations reuse cached data
+            staleTime: 30 * 1000,
             refetchOnWindowFocus: false,
             refetchOnReconnect: false
           }

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-nav-link-skeleton.tsx

@@ -1,6 +1,6 @@
+import type { ReactNode } from 'react'
 import { SidebarMenuButton } from '@admin/components/ui/sidebar'
 import Link from 'next/link'
-import type { ReactNode } from 'react'
 
 export function SidebarNavLinkSkeleton({ href, children }: { href: string; children: ReactNode }) {
   return (

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

@@ -1,3 +1,4 @@
+import type { ComponentProps } from 'react'
 import { Separator } from '@admin/components/ui/separator'
 import {
   Sidebar,
@@ -12,7 +13,6 @@ import {
 import { adminNavigation } from '@admin/data/navigation'
 import { groupAdminNavigationItems } from '@admin/utils/navigation/sidebar'
 import { Settings, Users } from 'lucide-react'
-import type { ComponentProps } from 'react'
 import { Fragment, Suspense } from 'react'
 import { SidebarBrandingRsc } from './admin-sidebar-branding-rsc'
 import { BrandingSkeleton } from './admin-sidebar-branding-skeleton'
@@ -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

@@ -1,7 +1,7 @@
 'use client'
 
-import { cn } from '@admin/utils/shared/cn'
 import type * as React from 'react'
+import { cn } from '@admin/utils/shared/cn'
 
 type DataGridProps = React.ComponentProps<'div'> & {
   containerClassName?: string
@@ -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

@@ -1,5 +1,7 @@
 'use client'
 
+import * as React from 'react'
+import type { Table } from '@tanstack/react-table'
 import { ProgressiveBlur } from '@admin/components/custom/progressive-blur'
 import { Button } from '@admin/components/ui/button'
 import {
@@ -10,8 +12,6 @@ import {
   SelectValue
 } from '@admin/components/ui/select'
 import { cn } from '@admin/utils/shared/cn'
-import type { Table } from '@tanstack/react-table'
-import * as React from 'react'
 
 const PAGE_SIZE_OPTIONS = [
   { value: '10', label: '10' },
@@ -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

@@ -1,5 +1,7 @@
 'use client'
 
+import * as React from 'react'
+import type { ColumnDef, ColumnFiltersState, RowData, SortingState } from '@tanstack/react-table'
 import {
   DataGrid,
   DataGridBody,
@@ -11,20 +13,15 @@ import {
 import { useTableUtils } from '@admin/hooks/use-table-utils'
 import { cn } from '@admin/utils/shared/cn'
 import {
-  type ColumnDef,
-  type ColumnFiltersState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
-  type RowData,
-  type SortingState,
   useReactTable
 } from '@tanstack/react-table'
 import { GripVertical } from 'lucide-react'
 import { parseAsInteger, useQueryState } from 'nuqs'
-import * as React from 'react'
 import { DataTablePagination } from './data-table-pagination'
 
 interface DataTableProps<TData extends RowData, TValue> {
@@ -154,7 +151,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

@@ -1,5 +1,6 @@
 'use client'
 
+import * as React from 'react'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -13,7 +14,6 @@ import {
 } from '@admin/components/ui/alert-dialog'
 import { Button } from '@admin/components/ui/button'
 import { Trash2 } from 'lucide-react'
-import * as React from 'react'
 
 interface DeleteDialogProps {
   count: number
@@ -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

@@ -1,13 +1,13 @@
 'use client'
 
+import * as React from 'react'
+import type { DevModeCodeLanguage, DevModeSnippetCodeTab } from './dev-mode-types'
 import { Button } from '@admin/components/ui/button'
 import { Card, CardContent, CardHeader } from '@admin/components/ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@admin/components/ui/tabs'
 import { useTheme } from '@admin/hooks/use-admin-theme'
 import { useCopyToClipboard } from '@admin/hooks/use-copy-to-clipboard'
 import { Check, Copy } from 'lucide-react'
-import * as React from 'react'
-import type { DevModeCodeLanguage, DevModeSnippetCodeTab } from './dev-mode-types'
 import { PlainCodeFallback } from './plain-code-fallback'
 
 const LazyCodeMirror = React.lazy(() => import('./dev-mode-code-mirror'))
@@ -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/dev-mode-code-mirror.tsx

@@ -1,12 +1,12 @@
 'use client'
 
+import * as React from 'react'
+import type { DevModeCodeLanguage, DevModeCodeTheme } from './dev-mode-types'
 import { javascript } from '@codemirror/lang-javascript'
 import { json } from '@codemirror/lang-json'
 import { EditorView } from '@codemirror/view'
 import { githubDark, githubLight } from '@uiw/codemirror-theme-github'
 import CodeMirror from '@uiw/react-codemirror'
-import * as React from 'react'
-import type { DevModeCodeLanguage, DevModeCodeTheme } from './dev-mode-types'
 
 const codeMirrorSetup = {
   lineNumbers: true,

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

@@ -1,5 +1,11 @@
 'use client'
 
+import type {
+  DevModeLifecycleHookExample,
+  DevModeLifecycleHookPhase,
+  DevModeSnippetIcon
+} from './dev-mode-types'
+import type { LucideIcon } from 'lucide-react'
 import {
   Accordion,
   AccordionContent,
@@ -8,24 +14,8 @@ import {
 } from '@admin/components/ui/accordion'
 import { Badge } from '@admin/components/ui/badge'
 import { getDevModeCodeBlockHeight } from '@admin/utils/dev-mode/code-block-height'
-import {
-  Eye,
-  FileCode2,
-  Inbox,
-  List,
-  type LucideIcon,
-  Pencil,
-  Plus,
-  Save,
-  Send,
-  Trash2
-} from 'lucide-react'
+import { Eye, FileCode2, Inbox, List, Pencil, Plus, Save, Send, Trash2 } from 'lucide-react'
 import { CopyableCodeBlock } from './copyable-code-block'
-import type {
-  DevModeLifecycleHookExample,
-  DevModeLifecycleHookPhase,
-  DevModeSnippetIcon
-} from './dev-mode-types'
 
 interface LifecycleHooksTabProps {
   lifecycleHooks: DevModeLifecycleHookExample[]

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/snippets-tab.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import type { DevModeSnippet, DevModeSnippetIcon, DevModeSnippetKind } from './dev-mode-types'
+import type { LucideIcon } from 'lucide-react'
 import {
   Accordion,
   AccordionContent,
@@ -8,20 +10,8 @@ import {
 } from '@admin/components/ui/accordion'
 import { Badge } from '@admin/components/ui/badge'
 import { getDevModeCodeBlockHeight } from '@admin/utils/dev-mode/code-block-height'
-import {
-  Eye,
-  FileCode2,
-  Inbox,
-  List,
-  type LucideIcon,
-  Pencil,
-  Plus,
-  Save,
-  Send,
-  Trash2
-} from 'lucide-react'
+import { Eye, FileCode2, Inbox, List, Pencil, Plus, Save, Send, Trash2 } from 'lucide-react'
 import { CopyableCodeBlock } from './copyable-code-block'
-import type { DevModeSnippet, DevModeSnippetIcon, DevModeSnippetKind } from './dev-mode-types'
 
 interface SnippetsTabProps {
   snippets: DevModeSnippet[]