betterstart-cli 0.0.96 → 0.0.98

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

@@ -1,5 +1,6 @@
 'use client'
 
+import * as React from 'react'
 import { authClient } from '@admin/auth/client'
 import { Button } from '@admin/components/ui/button'
 import { Card, CardContent } from '@admin/components/ui/card'
@@ -12,7 +13,6 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { parseAsStringLiteral, useQueryState } from 'nuqs'
-import * as React from 'react'
 
 export function LoginForm({ className, ...props }: React.ComponentProps<'div'>) {
   const router = useRouter()
@@ -64,18 +64,18 @@ export function LoginForm({ className, ...props }: React.ComponentProps<'div'>)
             />
           </div>
           <form onSubmit={handleSubmit} className="p-6 md:p-20">
-            <FieldGroup className="pb-12 gap-10">
+            <FieldGroup className="gap-10 pb-12">
               <div className="flex flex-col items-start">
                 <h1 className="text-xl font-medium">Welcome back</h1>
                 <p className="text-balance text-muted-foreground">Login to your account</p>
               </div>
               {resetSuccess ? (
-                <div className="bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 text-sm p-3 rounded-md">
+                <div className="rounded-md bg-emerald-500/10 p-3 text-sm text-emerald-700 dark:text-emerald-400">
                   Password reset successfully. Please log in with your new password.
                 </div>
               ) : null}
               {error ? (
-                <div className="bg-destructive/10 text-destructive text-sm p-3 rounded-md">
+                <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
                   {error}
                 </div>
               ) : null}

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

@@ -1,25 +1,25 @@
 'use client'
 
+import * as mediaHooks from '@admin/hooks/use-media'
+import * as React from 'react'
+import type { ContentTypeFilter } from '@admin/components/shared/media/media-filters-bar'
+import type { AdminMedia } from '@admin/types'
 import { deleteMediaBulk } from '@admin/actions/media'
 import { UploadDropzone } from '@admin/components/custom/upload-dropzone'
 import { DeleteDialog } from '@admin/components/shared/delete-dialog'
 import { EditMediaDialog } from '@admin/components/shared/media/edit-media-dialog'
 import { MediaEmptyState } from '@admin/components/shared/media/media-empty-state'
-import type { ContentTypeFilter } from '@admin/components/shared/media/media-filters-bar'
 import { MediaFiltersBar } from '@admin/components/shared/media/media-filters-bar'
 import { MediaGrid } from '@admin/components/shared/media/media-grid'
 import { MediaGridPagination } from '@admin/components/shared/media/media-grid-pagination'
 import { MediaUrlImporter } from '@admin/components/shared/media/media-url-importer'
 import { PageHeader } from '@admin/components/shared/page-header'
 import { Tabs, TabsList, TabsTrigger } from '@admin/components/ui/tabs'
-import * as mediaHooks from '@admin/hooks/use-media'
 import { useMediaFiltersBar } from '@admin/hooks/use-media-filters-bar'
 import { useUpload } from '@admin/hooks/use-upload'
-import type { AdminMedia } from '@admin/types'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { Link, Upload } from 'lucide-react'
 import { parseAsInteger, parseAsString, useQueryState } from 'nuqs'
-import * as React from 'react'
 import { toast } from 'sonner'
 
 const SEARCH_PARSER = parseAsString.withDefault('')
@@ -205,7 +205,7 @@ export function MediaPageContent() {
         }
       />
 
-      <main className="space-y-3 px-4 pb-4 flex-1">
+      <main className="flex-1 space-y-3 px-4 pb-4">
         <div className="flex w-full flex-col gap-4 pt-px">
           {activeTab === 'url' ? (
             <MediaUrlImporter
@@ -219,7 +219,7 @@ export function MediaPageContent() {
               progress={progress}
               isUploading={isUploading}
               multiple
-              className="h-37 shrink-0 w-full"
+              className="h-37 w-full shrink-0"
             />
           )}
         </div>
@@ -237,7 +237,7 @@ export function MediaPageContent() {
               selectedIds={selected}
               isSelectMode={isSelectMode}
               onItemClick={handleItemClick}
-              className="lg:grid-cols-12 pb-12 pt-px px-px"
+              className="px-px pt-px pb-12 lg:grid-cols-12"
             />
             {total > DEFAULT_MEDIA_PAGE_SIZE ? (
               <MediaGridPagination

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

@@ -1,6 +1,6 @@
 export function MediaPageSkeleton() {
   return (
-    <div className="flex items-center justify-center h-48">
+    <div className="flex h-48 items-center justify-center">
       <div className="text-muted-foreground">Loading Media…</div>
     </div>
   )

package/dist/assets/adapters/next/templates/init/pages/minimal-account-shell.tsx

@@ -9,11 +9,11 @@ export function MinimalAccountShell({
   children: React.ReactNode
 }) {
   return (
-    <div className="min-h-screen flex flex-col">
+    <div className="flex min-h-screen flex-col">
       <header className="sticky top-0 z-50 flex h-14 items-center justify-between border-b bg-background px-6">
         <Link
           href="/admin/profile"
-          className="text-sm font-medium hover:text-foreground/80 transition-colors"
+          className="text-sm font-medium transition-colors hover:text-foreground/80"
         >
           {name}
         </Link>

package/dist/assets/adapters/next/templates/init/pages/profile/profile-form.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import * as React from 'react'
 import {
   changeOwnPassword,
   invalidateUsersCache,
@@ -31,7 +32,6 @@ import { Input } from '@admin/components/ui/input'
 import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
 import { LoaderCircle } from 'lucide-react'
 import { useRouter } from 'next/navigation'
-import * as React from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod/v3'

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

@@ -17,7 +17,7 @@ export default async function ProfilePage() {
   return (
     <>
       {showPageHeader && <PageHeader title="Profile" />}
-      <main className="container mx-auto max-w-5xl w-full p-4">
+      <main className="container mx-auto w-full max-w-5xl p-4">
         <ProfileForm
           user={{
             name: session.user.name,

package/dist/assets/adapters/next/templates/init/pages/reset-password-form.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import * as React from 'react'
 import { authClient } from '@admin/auth/client'
 import { Button } from '@admin/components/ui/button'
 import { Card, CardContent } from '@admin/components/ui/card'
@@ -11,7 +12,6 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { createSerializer, parseAsString, parseAsStringLiteral, useQueryState } from 'nuqs'
-import * as React from 'react'
 
 const serializeLoginUrl = createSerializer({
   reset: parseAsStringLiteral(['success'])
@@ -41,7 +41,7 @@ export function ResetPasswordForm({ className, ...props }: React.ComponentProps<
               />
             </div>
             <div className="p-6 md:p-20">
-              <FieldGroup className="pb-12 gap-10">
+              <FieldGroup className="gap-10 pb-12">
                 <div className="flex flex-col items-start">
                   <h1 className="text-xl font-medium">Invalid reset link</h1>
                   <p className="text-balance text-muted-foreground">
@@ -108,13 +108,13 @@ export function ResetPasswordForm({ className, ...props }: React.ComponentProps<
             />
           </div>
           <form onSubmit={handleSubmit} className="p-6 md:p-20">
-            <FieldGroup className="pb-12 gap-10">
+            <FieldGroup className="gap-10 pb-12">
               <div className="flex flex-col items-start">
                 <h1 className="text-xl font-medium">Reset password</h1>
                 <p className="text-balance text-muted-foreground">Enter your new password below</p>
               </div>
               {error ? (
-                <div className="bg-destructive/10 text-destructive text-sm p-3 rounded-md">
+                <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
                   {error}
                 </div>
               ) : null}

package/dist/assets/adapters/next/templates/init/pages/settings/audit-log/audit-log-columns.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import type { AuditLogEntry, AuditLogSortField } from '@admin/actions/audit'
+import type { ColumnDef } from '@tanstack/react-table'
 import { SortIndicator } from '@admin/components/shared/sort-indicator'
 import { Badge } from '@admin/components/ui/badge'
 import { Button } from '@admin/components/ui/button'
-import type { ColumnDef } from '@tanstack/react-table'
 
 export const AUDIT_LOG_SORT_FIELDS = [
   'createdAt',
@@ -53,7 +53,7 @@ function SortableAuditLogHeader({
     <Button
       variant="ghost"
       onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-      className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+      className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
       aria-label={`Sort by ${label}, ${sortLabel}`}
       aria-sort={
         sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'

package/dist/assets/adapters/next/templates/init/pages/settings/audit-log/audit-log-detail-drawer.tsx

@@ -46,7 +46,7 @@ export function AuditLogDetailDrawer({ auditLog, open, onOpenChange }: AuditLogD
         </DrawerHeader>
         <ScrollArea className="min-h-0 flex-1 px-6">
           {auditLog ? (
-            <div className="flex flex-col w-full gap-4">
+            <div className="flex w-full flex-col gap-4">
               <Card>
                 <CardHeader>
                   <CardTitle>Event Details</CardTitle>

package/dist/assets/adapters/next/templates/init/pages/settings/audit-log/audit-log-detail-row.tsx

@@ -7,9 +7,9 @@ interface AuditLogDetailRowProps {
 
 export function AuditLogDetailRow({ label, value }: AuditLogDetailRowProps) {
   return (
-    <div className="grid grid-cols-[120px_1fr] gap-3 border-b border-border py-2 px-4 last:border-b-0">
+    <div className="grid grid-cols-[120px_1fr] gap-3 border-b border-border px-4 py-2 last:border-b-0">
       <dt className="text-sm font-medium text-muted-foreground">{label}</dt>
-      <dd className="min-w-0 text-sm text-foreground break-words">{value || 'Unknown'}</dd>
+      <dd className="min-w-0 text-sm break-words text-foreground">{value || 'Unknown'}</dd>
     </div>
   )
 }

package/dist/assets/adapters/next/templates/init/pages/settings/audit-log/audit-log-page-content.tsx

@@ -1,12 +1,12 @@
 'use client'
 
+import * as React from 'react'
 import type { AuditLogEntry } from '@admin/actions/audit'
 import { AUDIT_LOG_ACTIONS, AUDIT_LOG_CATEGORIES } from '@admin/actions/audit'
 import { EntityFiltersBar } from '@admin/components/shared/entity-filters-bar'
 import { PageHeader } from '@admin/components/shared/page-header'
 import { useIsFetching } from '@tanstack/react-query'
 import { parseAsInteger, parseAsString, useQueryState, useQueryStates } from 'nuqs'
-import * as React from 'react'
 import { createAuditLogColumns } from './audit-log-columns'
 import { AuditLogDetailDrawer } from './audit-log-detail-drawer'
 import { AuditLogTable } from './audit-log-table'
@@ -114,7 +114,7 @@ export function AuditLogPageContent() {
         isPending={isSearchFetching}
         onSearch={handleSearch}
       />
-      <main className="space-y-4 px-4 pb-4 flex-1">
+      <main className="flex-1 space-y-4 px-4 pb-4">
         <AuditLogTable
           columns={columns}
           search={search}

package/dist/assets/adapters/next/templates/init/pages/settings/audit-log/audit-log-page-skeleton.tsx

@@ -1,6 +1,6 @@
 export function AuditLogPageSkeleton() {
   return (
-    <div className="flex items-center justify-center h-48">
+    <div className="flex h-48 items-center justify-center">
       <div className="text-muted-foreground">Loading Audit Logs…</div>
     </div>
   )

package/dist/assets/adapters/next/templates/init/pages/settings/audit-log/audit-log-page.tsx

@@ -1,5 +1,5 @@
-import { requireRole, UserRole } from '@admin/auth/middleware'
 import * as React from 'react'
+import { requireRole, UserRole } from '@admin/auth/middleware'
 import { AuditLogPageContent } from './audit-log-page-content'
 import { AuditLogPageSkeleton } from './audit-log-page-skeleton'
 

package/dist/assets/adapters/next/templates/init/pages/settings/audit-log/audit-log-table.tsx

@@ -1,6 +1,8 @@
 'use client'
 
+import * as React from 'react'
 import type { AuditLogEntry, AuditLogQuery, AuditLogSortField } from '@admin/actions/audit'
+import type { ColumnDef } from '@tanstack/react-table'
 import {
   DataGrid,
   DataGridBody,
@@ -13,10 +15,9 @@ import { DataTablePagination } from '@admin/components/shared/data-table/data-ta
 import { useAuditLogs } from '@admin/hooks/use-audit-log'
 import { useTableUtils } from '@admin/hooks/use-table-utils'
 import { cn } from '@admin/utils/shared/cn'
-import { type ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
 import { GripVertical } from 'lucide-react'
 import { parseAsInteger, parseAsString, useQueryStates } from 'nuqs'
-import * as React from 'react'
 import { AUDIT_LOG_SORT_FIELDS } from './audit-log-columns'
 
 interface AuditLogTableProps<TValue> extends React.HTMLAttributes<HTMLDivElement> {
@@ -160,7 +161,7 @@ export function AuditLogTable<TValue>({
     .join(' ')
 
   return (
-    <div className={cn('flex flex-col gap-6 pt-px pb-2 h-full', className)}>
+    <div className={cn('flex h-full flex-col gap-6 pt-px pb-2', className)}>
       <DataGrid
         containerClassName="min-h-0 flex-1"
         containerRef={tableContainerRef}
@@ -197,7 +198,7 @@ export function AuditLogTable<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-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:text-foreground 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-muted-foreground opacity-0 transition-opacity select-none group-focus-within/resize-header:opacity-100 hover:text-foreground focus-visible:text-foreground 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/pages/settings/forms/forms-settings-page-content.tsx

@@ -1,11 +1,12 @@
 'use client'
 
+import * as React from 'react'
+import type { FormSettingsRow } from './forms-settings-columns'
 import { PageHeader } from '@admin/components/shared/page-header'
 import { webhookEventSources } from '@admin/data/webhook-events'
 import { useFormSettingsList } from '@admin/hooks/use-webhooks'
-import * as React from 'react'
 import { FormNotificationsDrawer } from './form-notifications-drawer'
-import { createFormSettingsColumns, type FormSettingsRow } from './forms-settings-columns'
+import { createFormSettingsColumns } from './forms-settings-columns'
 import { FormsSettingsTable } from './forms-settings-table'
 
 export function FormsSettingsPageContent() {
@@ -36,7 +37,7 @@ export function FormsSettingsPageContent() {
   return (
     <React.Fragment>
       <PageHeader title="Form Settings" />
-      <main className="space-y-4 px-4 pb-4 flex-1 pt-4">
+      <main className="flex-1 space-y-4 px-4 pt-4 pb-4">
         <FormsSettingsTable
           columns={columns}
           rows={rows}

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

@@ -1,6 +1,6 @@
 export function FormsSettingsPageSkeleton() {
   return (
-    <div className="flex items-center justify-center h-48">
+    <div className="flex h-48 items-center justify-center">
       <div className="text-muted-foreground">Loading Form Settings…</div>
     </div>
   )

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

@@ -1,5 +1,5 @@
-import { requireRole, UserRole } from '@admin/auth/middleware'
 import * as React from 'react'
+import { requireRole, UserRole } from '@admin/auth/middleware'
 import { FormsSettingsPageContent } from './forms-settings-page-content'
 import { FormsSettingsPageSkeleton } from './forms-settings-page-skeleton'
 

package/dist/assets/adapters/next/templates/init/pages/settings/forms/forms-settings-table.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+import type * as React from 'react'
+import type { FormSettingsRow } from './forms-settings-columns'
+import type { ColumnDef } from '@tanstack/react-table'
 import {
   DataGrid,
   DataGridBody,
@@ -9,9 +12,7 @@ import {
   DataGridRow
 } from '@admin/components/shared/data-table/data-grid'
 import { cn } from '@admin/utils/shared/cn'
-import { type ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
-import type * as React from 'react'
-import type { FormSettingsRow } from './forms-settings-columns'
+import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
 
 interface FormsSettingsTableProps extends React.HTMLAttributes<HTMLDivElement> {
   columns: ColumnDef<FormSettingsRow>[]
@@ -32,7 +33,7 @@ export function FormsSettingsTable({
   })
 
   return (
-    <div className={cn('flex flex-col gap-6 pt-px pb-2 h-full', className)}>
+    <div className={cn('flex h-full flex-col gap-6 pt-px pb-2', className)}>
       <DataGrid
         containerClassName="min-h-0 flex-1"
         gridTemplateColumns="minmax(200px, 1fr) minmax(240px, 2fr)"

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhook-endpoint-dialog.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import * as React from 'react'
 import type { WebhookEndpointListItem } from '@admin/actions/webhooks'
 import {
   createWebhook,
@@ -34,7 +35,6 @@ import { useWebhookSubscriptions } from '@admin/hooks/use-webhooks'
 import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { LoaderCircle } from 'lucide-react'
-import * as React from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod/v3'
@@ -242,7 +242,7 @@ export function WebhookEndpointDialog({ webhook, open, onOpenChange }: WebhookEn
                 />
                 {isEdit && (
                   <div className="space-y-2 rounded-md border border-border p-3">
-                    <p className="text-sm font-medium leading-none">Signing secret</p>
+                    <p className="text-sm leading-none font-medium">Signing secret</p>
                     <div className="flex items-center gap-2">
                       <span className="min-w-0 flex-1 truncate font-mono text-xs">
                         {secret ?? 'whsec_••••••••••••••••'}
@@ -283,7 +283,7 @@ export function WebhookEndpointDialog({ webhook, open, onOpenChange }: WebhookEn
                       <React.Fragment>
                         {formSources.length > 0 && (
                           <fieldset className="space-y-2 rounded-md border border-border p-3">
-                            <legend className="px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                            <legend className="px-1 text-xs font-medium tracking-wide text-muted-foreground uppercase">
                               Events · Forms
                             </legend>
                             {formSources.flatMap((source) =>
@@ -308,7 +308,7 @@ export function WebhookEndpointDialog({ webhook, open, onOpenChange }: WebhookEn
                         )}
                         {contentSources.length > 0 && (
                           <fieldset className="space-y-2 rounded-md border border-border p-3">
-                            <legend className="px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                            <legend className="px-1 text-xs font-medium tracking-wide text-muted-foreground uppercase">
                               Events · Entities
                             </legend>
                             {contentSources.flatMap((source) =>

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhooks-columns.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import type { WebhookEndpointListItem } from '@admin/actions/webhooks'
+import type { ColumnDef } from '@tanstack/react-table'
 import { SortIndicator } from '@admin/components/shared/sort-indicator'
 import { Badge } from '@admin/components/ui/badge'
 import { Button } from '@admin/components/ui/button'
-import type { ColumnDef } from '@tanstack/react-table'
 import { formatDistanceToNow } from 'date-fns'
 import { WebhookActions } from './webhook-actions'
 import { WebhookEnabledSwitch } from './webhook-enabled-switch'
@@ -35,7 +35,7 @@ export function createWebhooksColumns({
           <Button
             variant="ghost"
             onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
             aria-label={`Sort by Name, ${sortLabel}`}
             aria-sort={
               sortDirection === 'asc'
@@ -69,7 +69,7 @@ export function createWebhooksColumns({
           <Button
             variant="ghost"
             onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
             aria-label={`Sort by URL, ${sortLabel}`}
             aria-sort={
               sortDirection === 'asc'
@@ -104,7 +104,7 @@ export function createWebhooksColumns({
           <Button
             variant="ghost"
             onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
             aria-label={`Sort by Enabled, ${sortLabel}`}
             aria-sort={
               sortDirection === 'asc'
@@ -137,7 +137,7 @@ export function createWebhooksColumns({
           <Button
             variant="ghost"
             onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
             aria-label={`Sort by Events, ${sortLabel}`}
             aria-sort={
               sortDirection === 'asc'
@@ -170,7 +170,7 @@ export function createWebhooksColumns({
           <Button
             variant="ghost"
             onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
             aria-label={`Sort by Last delivery, ${sortLabel}`}
             aria-sort={
               sortDirection === 'asc'
@@ -217,7 +217,7 @@ export function createWebhooksColumns({
           <Button
             variant="ghost"
             onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
             aria-label={`Sort by Created, ${sortLabel}`}
             aria-sort={
               sortDirection === 'asc'

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhooks-logs-columns.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import type { WebhookDeliveryEntry } from '@admin/actions/webhooks'
+import type { ColumnDef } from '@tanstack/react-table'
 import { SortIndicator } from '@admin/components/shared/sort-indicator'
 import { Badge } from '@admin/components/ui/badge'
 import { Button } from '@admin/components/ui/button'
-import type { ColumnDef } from '@tanstack/react-table'
 import { formatDistanceToNow } from 'date-fns'
 
 export const logsColumns: ColumnDef<WebhookDeliveryEntry>[] = [
@@ -24,7 +24,7 @@ export const logsColumns: ColumnDef<WebhookDeliveryEntry>[] = [
         <Button
           variant="ghost"
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-          className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+          className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
           aria-label={`Sort by Status, ${sortLabel}`}
           aria-sort={
             sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
@@ -60,7 +60,7 @@ export const logsColumns: ColumnDef<WebhookDeliveryEntry>[] = [
         <Button
           variant="ghost"
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-          className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+          className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
           aria-label={`Sort by Event, ${sortLabel}`}
           aria-sort={
             sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
@@ -89,7 +89,7 @@ export const logsColumns: ColumnDef<WebhookDeliveryEntry>[] = [
         <Button
           variant="ghost"
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-          className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+          className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
           aria-label={`Sort by Endpoint, ${sortLabel}`}
           aria-sort={
             sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
@@ -118,7 +118,7 @@ export const logsColumns: ColumnDef<WebhookDeliveryEntry>[] = [
         <Button
           variant="ghost"
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-          className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+          className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
           aria-label={`Sort by Attempt, ${sortLabel}`}
           aria-sort={
             sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
@@ -147,7 +147,7 @@ export const logsColumns: ColumnDef<WebhookDeliveryEntry>[] = [
         <Button
           variant="ghost"
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-          className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+          className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
           aria-label={`Sort by Duration, ${sortLabel}`}
           aria-sort={
             sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
@@ -159,7 +159,7 @@ export const logsColumns: ColumnDef<WebhookDeliveryEntry>[] = [
       )
     },
     cell: ({ row }) => (
-      <span className="tabular-nums text-muted-foreground">{row.original.durationMs} ms</span>
+      <span className="text-muted-foreground tabular-nums">{row.original.durationMs} ms</span>
     )
   },
   {
@@ -178,7 +178,7 @@ export const logsColumns: ColumnDef<WebhookDeliveryEntry>[] = [
         <Button
           variant="ghost"
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-          className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+          className="group w-full min-w-0 scale-100! justify-start overflow-hidden rounded-none border-none bg-transparent! px-0!"
           aria-label={`Sort by When, ${sortLabel}`}
           aria-sort={
             sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhooks-logs-page-content.tsx

@@ -1,11 +1,11 @@
 'use client'
 
+import * as React from 'react'
 import { EntityFiltersBar } from '@admin/components/shared/entity-filters-bar'
 import { PageHeader } from '@admin/components/shared/page-header'
 import { useWebhookOptions } from '@admin/hooks/use-webhooks'
 import { useIsFetching } from '@tanstack/react-query'
 import { parseAsInteger, parseAsString, useQueryState, useQueryStates } from 'nuqs'
-import * as React from 'react'
 import { logsColumns } from './webhooks-logs-columns'
 import { WebhooksLogsTable } from './webhooks-logs-table'
 
@@ -102,7 +102,7 @@ export function WebhooksLogsPageContent() {
         isPending={isSearchFetching}
         onSearch={handleSearch}
       />
-      <main className="space-y-4 px-4 pb-4 flex-1">
+      <main className="flex-1 space-y-4 px-4 pb-4">
         <WebhooksLogsTable
           columns={logsColumns}
           search={search}

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhooks-logs-page.tsx

@@ -1,5 +1,5 @@
-import { requireRole, UserRole } from '@admin/auth/middleware'
 import * as React from 'react'
+import { requireRole, UserRole } from '@admin/auth/middleware'
 import { WebhooksLogsPageContent } from '../webhooks-logs-page-content'
 import { WebhooksPageSkeleton } from '../webhooks-page-skeleton'
 

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhooks-logs-table.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import type { WebhookDeliveryEntry } from '@admin/actions/webhooks'
+import type { ColumnDef } from '@tanstack/react-table'
 import {
   DataGrid,
   DataGridBody,
@@ -13,7 +14,7 @@ import { DataTablePagination } from '@admin/components/shared/data-table/data-ta
 import { useTableUtils } from '@admin/hooks/use-table-utils'
 import { useWebhookDeliveries } from '@admin/hooks/use-webhooks'
 import { cn } from '@admin/utils/shared/cn'
-import { type ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
 import { GripVertical } from 'lucide-react'
 import { parseAsInteger, parseAsString, useQueryStates } from 'nuqs'
 
@@ -127,7 +128,7 @@ export function WebhooksLogsTable<TValue>({
     .join(' ')
 
   return (
-    <div className={cn('flex flex-col gap-6 pt-px pb-2 h-full', className)}>
+    <div className={cn('flex h-full flex-col gap-6 pt-px pb-2', className)}>
       <DataGrid
         containerClassName="min-h-0 flex-1"
         containerRef={tableContainerRef}
@@ -164,7 +165,7 @@ export function WebhooksLogsTable<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-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:text-foreground 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-muted-foreground opacity-0 transition-opacity select-none group-focus-within/resize-header:opacity-100 hover:text-foreground focus-visible:text-foreground 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'