betterstart-cli 0.0.95 → 0.0.97

package/dist/assets/adapters/next/templates/init/lib/actions/webhooks/get-webhook-deliveries.ts

@@ -3,19 +3,10 @@
 import { requireRole, UserRole } from '@admin/auth/middleware'
 import db from '@admin/db'
 import { webhookDeliveries, webhooks } from '@admin/db/schema'
+import { getExclusiveDateUpperBound } from '@admin/utils/date/date'
 import { and, asc, desc, eq, gte, ilike, lt, or, sql } from 'drizzle-orm'
 import type { WebhookDeliveriesPage, WebhookDeliveriesQuery } from './types'
 
-function getExclusiveDateUpperBound(value?: string): string | null {
-  if (!value) return null
-
-  const date = new Date(`${value}T00:00:00.000Z`)
-  if (Number.isNaN(date.getTime())) return null
-
-  date.setUTCDate(date.getUTCDate() + 1)
-  return date.toISOString().slice(0, 10)
-}
-
 const SORTABLE_COLUMNS = {
   createdAt: webhookDeliveries.createdAt,
   event: webhookDeliveries.event,

package/dist/assets/adapters/next/templates/init/lib/actions/webhooks/get-webhooks.ts

@@ -3,19 +3,10 @@
 import { requireRole, UserRole } from '@admin/auth/middleware'
 import db from '@admin/db'
 import { webhookDeliveries, webhookSubscriptions, webhooks } from '@admin/db/schema'
+import { getExclusiveDateUpperBound } from '@admin/utils/date/date'
 import { and, asc, count, desc, eq, gte, ilike, isNull, lt, or, sql } from 'drizzle-orm'
 import type { WebhooksPage, WebhooksQuery } from './types'
 
-function getExclusiveDateUpperBound(value?: string): string | null {
-  if (!value) return null
-
-  const date = new Date(`${value}T00:00:00.000Z`)
-  if (Number.isNaN(date.getTime())) return null
-
-  date.setUTCDate(date.getUTCDate() + 1)
-  return date.toISOString().slice(0, 10)
-}
-
 // Deliberately uncached: filters and sorting depend on delivery rows written
 // inside after(), where cache invalidation is unavailable, so cached reads
 // could never be refreshed.

package/dist/assets/adapters/next/templates/init/lib/db/core/schema.ts

@@ -224,7 +224,10 @@ export const auditLog = pgTable(
     sourceType: varchar('source_type', { length: 50 }).notNull().default('server_action'),
     ipAddress: varchar('ip_address', { length: 100 }),
     userAgent: varchar('user_agent', { length: 500 }),
-    changedFields: text('changed_fields').array().notNull().default(sql`ARRAY[]::text[]`),
+    changedFields: text('changed_fields')
+      .array()
+      .notNull()
+      .default(sql`ARRAY[]::text[]`),
     metadata: jsonb('metadata'),
     createdAt: timestamp('created_at', { precision: 3, mode: 'string' })
       .default(sql`CURRENT_TIMESTAMP`)

package/dist/assets/adapters/next/templates/init/lib/lifecycle-hooks/runner.ts

@@ -92,7 +92,7 @@ function toAdminEventContext(
     metadata: {
       entityType: context.entityType,
       schemaType: context.schemaType ?? 'entity',
-      ...(context.metadata ?? {})
+      ...context.metadata
     }
   }
 }

package/dist/assets/adapters/next/templates/init/pages/admin-layout.tsx

@@ -11,7 +11,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
       <AdminProviders>
         <div
           className={cn(
-            'admin-root size-screen antialiased mt-px',
+            'admin-root size-screen mt-px antialiased',
             GeistSans.variable,
             GeistMono.variable
           )}

package/dist/assets/adapters/next/templates/init/pages/auth-gate-rsc.tsx

@@ -8,7 +8,7 @@ export async function AuthGateRsc({ children }: { children: React.ReactNode }) {
   return (
     <SidebarProvider className="min-h-svh">
       <AdminSidebar />
-      <div className="relative flex min-w-0 flex-1 flex-col [--admin-shell-content-left:0px] md:[--admin-shell-content-left:var(--sidebar-width)] md:peer-data-[state=collapsed]:[--admin-shell-content-left:var(--sidebar-width-icon)] pb-14">
+      <div className="relative flex min-w-0 flex-1 flex-col pb-14 [--admin-shell-content-left:0px] md:[--admin-shell-content-left:var(--sidebar-width)] md:peer-data-[state=collapsed]:[--admin-shell-content-left:var(--sidebar-width-icon)]">
         {children}
       </div>
     </SidebarProvider>

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

@@ -34,7 +34,7 @@ export default function DashboardPage() {
     <React.Fragment>
       <PageHeader title="Dashboard" hasBackButton={false} />
 
-      <div className="p-6 space-y-6 w-full">
+      <div className="w-full space-y-6 p-6">
         <Card>
           <CardHeader>
             <div className="flex items-center gap-2">
@@ -44,13 +44,13 @@ export default function DashboardPage() {
           </CardHeader>
           <CardContent className="p-10!">
             <div className="grid grid-cols-2 gap-10">
-              <div className="flex flex-col w-full gap-1">
+              <div className="flex w-full flex-col gap-1">
                 <p className="text-base font-medium">Hey, let's get started</p>
                 <p className="text-muted-foreground">
                   Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
                 </p>
               </div>
-              <div className="flex flex-col w-full">
+              <div className="flex w-full flex-col">
                 <Accordion type="single" collapsible defaultValue="item-1">
                   <AccordionItem value="item-1">
                     <AccordionTrigger>
@@ -59,11 +59,11 @@ export default function DashboardPage() {
                         <span>Setup ENV Variables</span>
                       </div>
                     </AccordionTrigger>
-                    <AccordionContent className="pl-7 h-auto">
-                      <div className="flex flex-col w-full gap-1">
+                    <AccordionContent className="h-auto pl-7">
+                      <div className="flex w-full flex-col gap-1">
                         {envVariables.map((env) => (
                           <div
-                            className="flex flex-col w-full bg-card border shadow-card border-border rounded-sm pl-4 pr-2 py-2"
+                            className="flex w-full flex-col rounded-sm border border-border bg-card py-2 pr-2 pl-4 shadow-card"
                             key={env.name}
                           >
                             <div className="flex items-center justify-between">

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

@@ -59,7 +59,7 @@ export function ForgotPasswordForm({ className, ...props }: React.ComponentProps
           </div>
           <div className="p-6 md:p-20">
             {success ? (
-              <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">Check your email</h1>
                   <p className="text-balance text-muted-foreground">
@@ -73,7 +73,7 @@ export function ForgotPasswordForm({ className, ...props }: React.ComponentProps
               </FieldGroup>
             ) : (
               <form onSubmit={handleSubmit}>
-                <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">Forgot password</h1>
                     <p className="text-balance text-muted-foreground">
@@ -82,7 +82,7 @@ export function ForgotPasswordForm({ className, ...props }: React.ComponentProps
                     </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}
@@ -108,7 +108,7 @@ export function ForgotPasswordForm({ className, ...props }: React.ComponentProps
                     </Field>
                     <Link
                       href="/admin/login"
-                      className="text-sm text-center underline-offset-4 hover:underline"
+                      className="text-center text-sm underline-offset-4 hover:underline"
                     >
                       Back to login
                     </Link>

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

@@ -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

@@ -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-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

@@ -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

@@ -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

@@ -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-table.tsx

@@ -160,7 +160,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 +197,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

@@ -36,7 +36,7 @@ export function FormsSettingsPageContent() {
   return (
     <React.Fragment>
       <PageHeader title="Form Settings" />
-      <main className="space-y-4 px-4 pb-4 flex-1">
+      <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-table.tsx

@@ -32,7 +32,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

@@ -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

@@ -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

@@ -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

@@ -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-table.tsx

@@ -127,7 +127,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 +164,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'

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

@@ -132,7 +132,7 @@ export function WebhooksPageContent() {
         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">
         <WebhooksTable
           columns={columns}
           search={search}

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

@@ -1,6 +1,6 @@
 export function WebhooksPageSkeleton() {
   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 Webhooks…</div>
     </div>
   )

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

@@ -129,7 +129,7 @@ export function WebhooksTable<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}
@@ -166,7 +166,7 @@ export function WebhooksTable<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'