betterstart-cli 0.0.96 → 0.0.98

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

@@ -1,5 +1,9 @@
 'use client'
 
+import type {
+  DevModeIntegrationLoader,
+  DevModeIntegrationMetadata
+} from './dev-mode/dev-mode-types'
 import type { Setting } from '@admin/actions/settings'
 import { Button } from '@admin/components/ui/button'
 import {
@@ -15,10 +19,6 @@ import { useDevModeIntegration } from '@admin/hooks/use-dev-mode-integration'
 import { useSetting } from '@admin/hooks/use-settings'
 import { Code2 } from 'lucide-react'
 import { CopyableCodeBlock } from './dev-mode/copyable-code-block'
-import type {
-  DevModeIntegrationLoader,
-  DevModeIntegrationMetadata
-} from './dev-mode/dev-mode-types'
 import { LifecycleHooksTab } from './dev-mode/lifecycle-hooks-tab'
 import { SnippetsTab } from './dev-mode/snippets-tab'
 
@@ -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

@@ -1,5 +1,6 @@
 'use client'
 
+import * as React from 'react'
 import { DateRangePicker } from '@admin/components/custom/date-range-picker'
 import { Button } from '@admin/components/ui/button'
 import {
@@ -12,7 +13,6 @@ import {
 import { usePageScrollThreshold } from '@admin/hooks/use-page-scroll-threshold'
 import { cn } from '@admin/utils/shared/cn'
 import { ChevronDown, FilterX, X } from 'lucide-react'
-import * as React from 'react'
 import { SearchInput } from './search-input'
 
 const ALL_FILTER_VALUE = '__all__'
@@ -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-version-restore-dialog.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import * as React from 'react'
 import type { EntityVersionWithAuthor } from '@admin/actions/entity-versions'
 import {
   AlertDialog,
@@ -14,7 +15,6 @@ import {
 } from '@admin/components/ui/alert-dialog'
 import { Button } from '@admin/components/ui/button'
 import { useRouter } from 'next/navigation'
-import * as React from 'react'
 import { toast } from 'sonner'
 
 interface EntityVersionRestoreDialogProps {

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

@@ -1,11 +1,11 @@
 'use client'
 
+import * as React from 'react'
 import type { EntityVersionWithAuthor } from '@admin/actions/entity-versions'
 import { EntityVersionsDrawer } from '@admin/components/shared/entity-versions/entity-versions-drawer'
 import { Button } from '@admin/components/ui/button'
 import { useEntityVersions } from '@admin/hooks/use-entity-versions'
 import { History } from 'lucide-react'
-import * as React from 'react'
 
 interface EntityVersionsButtonAuthor {
   name: string

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

@@ -1,5 +1,7 @@
 'use client'
 
+import * as React from 'react'
+import type { AdminMedia } from '@admin/types'
 import { updateMedia } from '@admin/actions/media'
 import { MediaDeleteDrawer } from '@admin/components/shared/media/media-delete-drawer'
 import { MediaPreview } from '@admin/components/shared/media/media-preview'
@@ -9,11 +11,9 @@ import { DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle } from '@admin/c
 import { Form, FormControl, FormField, FormItem, FormLabel } from '@admin/components/ui/form'
 import { Input } from '@admin/components/ui/input'
 import { useCopyToClipboard } from '@admin/hooks/use-copy-to-clipboard'
-import type { AdminMedia } from '@admin/types'
 import { format } from 'date-fns'
 import { Check, ClockPlus, Copy, Link2, LoaderCircle, UserRoundCheck } from 'lucide-react'
 import Link from 'next/link'
-import * as React from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 
@@ -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/edit-media-dialog.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { Drawer } from '@admin/components/ui/drawer'
-import type { AdminMedia } from '@admin/types'
 import * as React from 'react'
+import type { AdminMedia } from '@admin/types'
+import { Drawer } from '@admin/components/ui/drawer'
 import { EditMediaDialogContent } from './edit-media-dialog-content'
 
 interface EditMediaDialogProps {

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

@@ -1,5 +1,7 @@
 'use client'
 
+import * as React from 'react'
+import type { AdminMedia } from '@admin/types'
 import { deleteMedia } from '@admin/actions/media'
 import {
   AlertDialog,
@@ -13,9 +15,7 @@ import {
   AlertDialogTrigger
 } from '@admin/components/ui/alert-dialog'
 import { Button } from '@admin/components/ui/button'
-import type { AdminMedia } from '@admin/types'
 import { Trash2 } from 'lucide-react'
-import * as React from 'react'
 import { toast } from 'sonner'
 
 interface MediaDeleteDialogProps {

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

@@ -1,10 +1,10 @@
 'use client'
 
+import * as React from 'react'
+import type { AdminMedia } from '@admin/types'
 import { deleteMedia } from '@admin/actions/media'
 import { Button } from '@admin/components/ui/button'
-import type { AdminMedia } from '@admin/types'
 import { LoaderCircle, Trash2, TriangleAlert } from 'lucide-react'
-import * as React from 'react'
 import { toast } from 'sonner'
 import { Drawer as DrawerPrimitive } from 'vaul'
 
@@ -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

@@ -1,13 +1,13 @@
 'use client'
 
+import * as React from 'react'
+import type { MediaFiltersBarSelectionState } from '@admin/hooks/use-media-filters-bar'
 import { SearchInput } from '@admin/components/shared/search-input'
 import { Button } from '@admin/components/ui/button'
 import { ButtonGroup } from '@admin/components/ui/button-group'
-import type { MediaFiltersBarSelectionState } from '@admin/hooks/use-media-filters-bar'
 import { usePageScrollThreshold } from '@admin/hooks/use-page-scroll-threshold'
 import { cn } from '@admin/utils/shared/cn'
 import { CircleCheck, FileText, Film, ImageIcon, X } from 'lucide-react'
-import * as React from 'react'
 
 type ContentTypeFilter = 'all' | 'image' | 'video' | 'document'
 
@@ -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

@@ -1,5 +1,7 @@
 'use client'
 
+import * as TabsUi from '@admin/components/ui/tabs'
+import type { AdminMedia } from '@admin/types'
 import { UploadDropzone } from '@admin/components/custom/upload-dropzone'
 import { Button } from '@admin/components/ui/button'
 import {
@@ -11,7 +13,6 @@ import {
   DialogHeader,
   DialogTitle
 } from '@admin/components/ui/dialog'
-import * as TabsUi from '@admin/components/ui/tabs'
 import {
   clampMediaPage,
   clampMediaPageSize,
@@ -19,7 +20,6 @@ import {
   useMediaSelection
 } from '@admin/hooks/use-media'
 import { useUpload } from '@admin/hooks/use-upload'
-import type { AdminMedia } from '@admin/types'
 import { useQueryClient } from '@tanstack/react-query'
 import { parseAsInteger, parseAsStringLiteral, useQueryStates } from 'nuqs'
 import { toast } from 'sonner'
@@ -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

@@ -1,11 +1,11 @@
 'use client'
 
+import * as React from 'react'
+import type { AdminMedia } from '@admin/types'
 import { MediaPreview } from '@admin/components/shared/media/media-preview'
 import { Card, CardContent, CardFooter } from '@admin/components/ui/card'
 import { Checkbox } from '@admin/components/ui/checkbox'
-import type { AdminMedia } from '@admin/types'
 import { cn } from '@admin/utils/shared/cn'
-import * as React from 'react'
 
 interface MediaGridItemProps {
   item: AdminMedia
@@ -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

@@ -1,5 +1,6 @@
 'use client'
 
+import * as React from 'react'
 import { Button } from '@admin/components/ui/button'
 import {
   Select,
@@ -9,7 +10,6 @@ import {
   SelectValue
 } from '@admin/components/ui/select'
 import { cn } from '@admin/utils/shared/cn'
-import * as React from 'react'
 
 const PAGE_SIZE_OPTIONS = [
   { value: '20', label: '20' },
@@ -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-grid.tsx

@@ -1,8 +1,8 @@
 'use client'
 
+import type * as React from 'react'
 import type { AdminMedia } from '@admin/types'
 import { cn } from '@admin/utils/shared/cn'
-import type * as React from 'react'
 import { MediaGridItem } from './media-grid-item'
 
 interface MediaGridProps extends React.ComponentPropsWithRef<'div'> {

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

@@ -1,7 +1,7 @@
 'use client'
 
-import { useFailedImageUrl } from '@admin/hooks/use-failed-image-url'
 import type { AdminMedia } from '@admin/types'
+import { useFailedImageUrl } from '@admin/hooks/use-failed-image-url'
 import { cn } from '@admin/utils/shared/cn'
 import { FileText, Film, ImageOff } from 'lucide-react'
 import Image from 'next/image'
@@ -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

@@ -1,5 +1,7 @@
 'use client'
 
+import * as React from 'react'
+import type { UploadFileResult } from '@admin/types'
 import { Card, CardContent } from '@admin/components/ui/card'
 import {
   InputGroup,
@@ -7,12 +9,10 @@ import {
   InputGroupButton,
   InputGroupInput
 } from '@admin/components/ui/input-group'
-import type { UploadFileResult } from '@admin/types'
 import { getMediaUrlHelpText, getMediaUrlPlaceholder } from '@admin/utils/media/media'
 import { cn } from '@admin/utils/shared/cn'
 import { isValidUrl } from '@admin/utils/validation/validation'
 import { LoaderCircle, Upload } from 'lucide-react'
-import * as React from 'react'
 
 interface MediaUrlImporterProps extends React.HTMLAttributes<HTMLDivElement> {
   onImportFromUrl: (url: string) => Promise<UploadFileResult>
@@ -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" />

package/dist/assets/adapters/next/templates/init/components/shared/search-input.tsx

@@ -1,10 +1,10 @@
 'use client'
 
+import * as React from 'react'
 import { Button } from '@admin/components/ui/button'
 import { Form, FormControl, FormField, FormItem } from '@admin/components/ui/form'
 import { Input } from '@admin/components/ui/input'
 import { CornerDownLeft, Search, X } from 'lucide-react'
-import * as React from 'react'
 import { useForm } from 'react-hook-form'
 
 interface SearchInputProps {
@@ -40,16 +40,16 @@ export function SearchInput({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="flex items-center w-full">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="flex w-full items-center">
         <FormField
           control={form.control}
           name="search"
           render={({ field }) => (
             <FormItem className="w-full">
               <div className="relative w-full">
-                <Search className="text-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2" />
+                <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-foreground" />
                 <FormControl>
-                  <Input {...field} placeholder={placeholder} className="pl-9 w-full" />
+                  <Input {...field} placeholder={placeholder} className="w-full pl-9" />
                 </FormControl>
 
                 {value ? (
@@ -63,7 +63,7 @@ export function SearchInput({
                       onSearch(null)
                     }}
                     aria-label="Clear search"
-                    className="absolute right-2 top-1/2 -translate-y-1/2 text-foreground size-7"
+                    className="absolute top-1/2 right-2 size-7 -translate-y-1/2 text-foreground"
                   >
                     <X className="size-4" />
                   </Button>
@@ -72,7 +72,7 @@ export function SearchInput({
                     type="submit"
                     variant="ghost"
                     size="icon-sm"
-                    className="absolute right-2 top-1/2 -translate-y-1/2 text-foreground size-7"
+                    className="absolute top-1/2 right-2 size-7 -translate-y-1/2 text-foreground"
                     disabled={isPending}
                   >
                     <CornerDownLeft className="size-4" />

package/dist/assets/adapters/next/templates/init/components/shared/sort-indicator.tsx

@@ -18,7 +18,7 @@ export function SortIndicator({ direction }: { direction: false | 'asc' | 'desc'
     <Icon
       aria-hidden="true"
       className={cn(
-        'size-4 shrink-0 text-muted-foreground opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-visible:opacity-100 group-hover/resize-header:opacity-100',
+        'size-4 shrink-0 text-muted-foreground opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-hover/resize-header:opacity-100 group-focus-visible:opacity-100',
         {
           'text-foreground': direction !== false
         }

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

@@ -1,5 +1,8 @@
 'use client'
 
+import * as React from 'react'
+import type { SortOrderItem, SortOrderPage } from './sort-order-types'
+import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core'
 import { Button } from '@admin/components/ui/button'
 import {
   Drawer,
@@ -14,9 +17,7 @@ import { ScrollArea } from '@admin/components/ui/scroll-area'
 import {
   closestCenter,
   DndContext,
-  type DragEndEvent,
   DragOverlay,
-  type DragStartEvent,
   KeyboardSensor,
   PointerSensor,
   useSensor,
@@ -29,11 +30,9 @@ import {
 } from '@dnd-kit/sortable'
 import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
 import { LoaderCircle } from 'lucide-react'
-import * as React from 'react'
 import { toast } from 'sonner'
 import { DragOverlayItem } from './sort-order-drag-overlay-item'
 import { SortableItem } from './sort-order-item'
-import type { SortOrderItem, SortOrderPage } from './sort-order-types'
 
 const PAGE_SIZE = 50
 
@@ -194,7 +193,7 @@ export function SortOrderDialog({
         onAnimationEnd={handleDrawerAnimationEnd}
       >
         <DrawerContent className="h-full w-full overflow-hidden">
-          <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>{title}</DrawerTitle>
               {description ? <DrawerDescription>{description}</DrawerDescription> : null}

package/dist/assets/adapters/next/templates/init/components/shared/sort-order-drag-overlay-item.tsx

@@ -6,7 +6,7 @@ export function DragOverlayItem({ label }: { label: string }) {
     <Button
       type="button"
       variant="outline"
-      className="shrink-0 w-full justify-start gap-2 px-2 font-normal touch-none cursor-grabbing"
+      className="w-full shrink-0 cursor-grabbing touch-none justify-start gap-2 px-2 font-normal"
     >
       <GripVertical strokeWidth={1} />
       <span className="min-w-0 truncate text-sm">{label}</span>