betterstart-cli 0.0.12 → 0.0.14

package/dist/assets/adapters/next/plugins/blog/plugin.ts

@@ -8,7 +8,7 @@ export const blogPlugin: BetterstartPluginDefinition = {
   version: '1.0.0',
   dependencies: [],
   conflicts: [],
-  schemaFiles: ['posts.json'],
+  schemaFiles: ['posts.json', 'menus.json'],
   files: [],
   packageDependencies: ['katex', 'markdown-it@^13.0.2', 'markdown-it-dollarmath', 'sanitize-html'],
   devDependencies: ['@types/markdown-it@13', '@types/sanitize-html'],

package/dist/assets/adapters/next/plugins/blog/schemas/menus.json

@@ -0,0 +1,155 @@
+{
+  "name": "menus",
+  "label": "Menus",
+  "description": "Manage Menus",
+  "icon": "Menu",
+  "navGroup": {
+    "label": "General",
+    "position": 0
+  },
+  "navPosition": 1,
+  "slot": {
+    "main": {
+      "fields": [
+        {
+          "name": "title",
+          "type": "string",
+          "label": "Title",
+          "required": true
+        },
+        {
+          "name": "slug",
+          "type": "string",
+          "label": "Slug",
+          "hint": "URL-friendly identifier (auto-generated from title)"
+        },
+        {
+          "name": "items",
+          "type": "list",
+          "label": "Items",
+          "hint": "Items in the navigation menu",
+          "fields": [
+            {
+              "name": "parentFields",
+              "type": "group",
+              "columns": 2,
+              "fields": [
+                {
+                  "name": "label",
+                  "type": "string",
+                  "label": "Label",
+                  "required": true
+                },
+                {
+                  "name": "href",
+                  "type": "string",
+                  "label": "Href",
+                  "required": true
+                }
+              ]
+            },
+            {
+              "name": "openInNewTab",
+              "type": "boolean",
+              "label": "Open in New Tab",
+              "hint": "Open this link in a new browser tab",
+              "default": false
+            },
+            {
+              "name": "subItems",
+              "type": "list",
+              "label": "Sub Menu Items",
+              "fields": [
+                {
+                  "name": "subItemFields",
+                  "type": "group",
+                  "columns": 2,
+                  "fields": [
+                    {
+                      "name": "subItemLabel",
+                      "type": "string",
+                      "label": "Label",
+                      "required": true
+                    },
+                    {
+                      "name": "subItemHref",
+                      "type": "string",
+                      "label": "Href",
+                      "required": true
+                    }
+                  ]
+                },
+                {
+                  "name": "subItemOpenInNewTab",
+                  "type": "boolean",
+                  "label": "Open in New Tab",
+                  "hint": "Open this link in a new browser tab",
+                  "default": false
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    "sidebar": {
+      "fields": [
+        {
+          "name": "generalSidebar",
+          "type": "section",
+          "heading": {
+            "icon": "bolt",
+            "title": "General"
+          },
+          "fields": [
+            {
+              "name": "description",
+              "type": "text",
+              "label": "Description",
+              "hint": "Internal note describing this menu's purpose"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "columns": [
+    {
+      "accessorKey": "title",
+      "header": "Title",
+      "type": "text",
+      "sortable": true,
+      "size": "xl"
+    },
+    {
+      "accessorKey": "published",
+      "header": "Status",
+      "type": "boolean",
+      "sortable": true,
+      "size": "sm"
+    },
+    {
+      "accessorKey": "updatedAt",
+      "header": "Updated",
+      "type": "date",
+      "sortable": true,
+      "size": "sm"
+    },
+    {
+      "accessorKey": "createdAt",
+      "header": "Created",
+      "type": "date",
+      "sortable": true,
+      "size": "sm"
+    }
+  ],
+  "actions": {
+    "create": true,
+    "edit": true,
+    "delete": true,
+    "draft": true
+  },
+  "search": {
+    "fields": ["title"]
+  }
+}

package/dist/assets/adapters/next/plugins/blog/schemas/posts.json

@@ -1,10 +1,10 @@
 {
   "name": "posts",
   "label": "Posts",
-  "description": "Manage blog posts and articles",
+  "description": "Manage blog posts",
   "icon": "FileText",
   "navGroup": {
-    "label": "Blog",
+    "label": "Collections",
     "position": 0
   },
   "navPosition": 0,
@@ -160,10 +160,5 @@
   },
   "search": {
     "fields": ["title", "excerpt"]
-  },
-  "autoSlugify": {
-    "enabled": true,
-    "sourceField": "title",
-    "targetField": "slug"
   }
 }

package/dist/assets/adapters/next/templates/init/components/layouts/admin-sidebar.tsx

@@ -11,7 +11,7 @@ import {
 } from '@admin/components/ui/sidebar'
 import { adminNavigation } from '@admin/data/navigation'
 import { groupAdminNavigationItems } from '@admin/utils/navigation/sidebar'
-import { Settings, Users } from 'lucide-react'
+import { History, Settings, Users } from 'lucide-react'
 import type { ComponentProps } from 'react'
 import { Fragment, Suspense } from 'react'
 import { SidebarBrandingRsc } from './admin-sidebar-branding-rsc'
@@ -35,7 +35,7 @@ export function AdminSidebar(props: ComponentProps<typeof Sidebar>) {
           <Fragment key={group.label ?? '_ungrouped'}>
             <SidebarGroup className="py-0">
               {group.label && <SidebarGroupLabel>{group.label}</SidebarGroupLabel>}
-              <SidebarMenu className="gap-px">
+              <SidebarMenu className="gap-0.5">
                 {group.items.map((item) => (
                   <SidebarMenuItem key={item.href}>
                     <SidebarNavLink href={item.href}>
@@ -51,7 +51,7 @@ export function AdminSidebar(props: ComponentProps<typeof Sidebar>) {
 
         <SidebarGroup className="mt-auto gap-2 px-0">
           <Separator />
-          <SidebarMenu className="px-2 gap-px">
+          <SidebarMenu className="px-2 gap-0.5">
             <SidebarMenuItem>
               <SidebarNavLink href="/admin/users">
                 <Users strokeWidth={2} />
@@ -64,6 +64,12 @@ export function AdminSidebar(props: ComponentProps<typeof Sidebar>) {
                 <span>Settings</span>
               </SidebarNavLink>
             </SidebarMenuItem>
+            <SidebarMenuItem>
+              <SidebarNavLink href="/admin/system/audit-log">
+                <History strokeWidth={2} />
+                <span>Audit Log</span>
+              </SidebarNavLink>
+            </SidebarMenuItem>
           </SidebarMenu>
         </SidebarGroup>
       </SidebarContent>

package/dist/assets/adapters/next/templates/init/components/layouts/sidebar-branding.tsx

@@ -20,7 +20,7 @@ export function SidebarBranding({ initialData }: SidebarBrandingProps) {
     return <BrandingSkeleton />
   }
 
-  const dashboardName = settings?.dashboardName ?? admin.name
+  const dashboardName = settings?.title ?? admin.name
   const dashboardLogo = settings?.dashboardLogo || DEFAULT_LOGO_URL
 
   return (

package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-grid.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import { cn } from '@admin/utils/shared/cn'
+import type * as React from 'react'
+
+type DataGridProps = React.ComponentProps<'div'> & {
+  containerClassName?: string
+  gridTemplateColumns: string
+}
+
+const dataGridTableRole = { role: 'table' } as const
+const dataGridRowGroupRole = { role: 'rowgroup' } as const
+const dataGridRowRole = { role: 'row' } as const
+const dataGridColumnHeaderRole = { role: 'columnheader' } as const
+const dataGridCellRole = { role: 'cell' } as const
+
+function DataGrid({
+  className,
+  containerClassName,
+  gridTemplateColumns,
+  style,
+  ...props
+}: DataGridProps) {
+  return (
+    <div
+      data-slot="data-grid-container"
+      className={cn('relative min-w-0 overflow-auto', containerClassName)}
+    >
+      <div
+        {...dataGridTableRole}
+        data-slot="data-grid"
+        className={cn('grid min-w-full text-sm', className)}
+        style={{ ...style, gridTemplateColumns }}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function DataGridHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      {...dataGridRowGroupRole}
+      data-slot="data-grid-header"
+      className={cn('contents', className)}
+      {...props}
+    />
+  )
+}
+
+function DataGridBody({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      {...dataGridRowGroupRole}
+      data-slot="data-grid-body"
+      className={cn('contents', className)}
+      {...props}
+    />
+  )
+}
+
+function DataGridRow({ className, style, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      {...dataGridRowRole}
+      data-slot="data-grid-row"
+      className={cn(
+        'grid border-b transition-colors has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
+        className
+      )}
+      style={{ ...style, gridColumn: '1 / -1', gridTemplateColumns: 'subgrid' }}
+      tabIndex={-1}
+      {...props}
+    />
+  )
+}
+
+function DataGridHead({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      {...dataGridColumnHeaderRole}
+      data-slot="data-grid-head"
+      className={cn(
+        'grid h-10 items-center px-3 text-left font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0',
+        className
+      )}
+      tabIndex={-1}
+      {...props}
+    />
+  )
+}
+
+function DataGridCell({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      {...dataGridCellRole}
+      data-slot="data-grid-cell"
+      className={cn(
+        'grid min-h-10 items-center px-3 py-1.5 whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { DataGrid, DataGridHeader, DataGridBody, DataGridHead, DataGridRow, DataGridCell }

package/dist/assets/adapters/next/templates/init/components/shared/data-table/data-table.tsx

@@ -1,13 +1,13 @@
 'use client'
 
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow
-} from '@admin/components/ui/table'
+  DataGrid,
+  DataGridBody,
+  DataGridCell,
+  DataGridHead,
+  DataGridHeader,
+  DataGridRow
+} from '@admin/components/shared/data-table/data-grid'
 import { useTableUtils } from '@admin/hooks/use-table-utils'
 import { cn } from '@admin/utils/shared/cn'
 import {
@@ -108,19 +108,18 @@ export function DataTable<TData extends RowData, TValue>({
     }
   })
   registerTable(table)
+  const gridTemplateColumns = table
+    .getVisibleLeafColumns()
+    .map((column) => `${column.getSize()}px`)
+    .join(' ')
 
   return (
     <div className="space-y-6 pb-24">
-      <div ref={tableContainerRef} className="overflow-hidden material-sm border-border">
-        <Table className="table-fixed" style={{ width: table.getTotalSize() }}>
-          <colgroup>
-            {table.getVisibleLeafColumns().map((column) => (
-              <col key={column.id} style={{ width: column.getSize() }} />
-            ))}
-          </colgroup>
-          <TableHeader>
+      <div ref={tableContainerRef} className="min-w-0 overflow-hidden material-sm border-border">
+        <DataGrid gridTemplateColumns={gridTemplateColumns} style={{ width: table.getTotalSize() }}>
+          <DataGridHeader>
             {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
+              <DataGridRow key={headerGroup.id}>
                 {headerGroup.headers.map((header, headerIndex) => {
                   const meta = header.column.columnDef.meta as Record<string, unknown> | undefined
                   const resizeLabel =
@@ -131,12 +130,15 @@ export function DataTable<TData extends RowData, TValue>({
                   const canResizeColumn =
                     header.column.getCanResize() && nextHeader?.column.getCanResize() === true
                   return (
-                    <TableHead
+                    <DataGridHead
                       key={header.id}
-                      className={cn('group/resize-header relative overflow-hidden', {
-                        'text-center': meta?.align === 'center',
-                        'text-right': meta?.align === 'right'
-                      })}
+                      className={cn(
+                        'group/resize-header relative overflow-hidden text-foreground',
+                        {
+                          'text-center': meta?.align === 'center',
+                          'text-right': meta?.align === 'right'
+                        }
+                      )}
                       data-column-id={header.column.id}
                       onMouseEnter={() => setHoveredColumnId(header.column.id)}
                       onMouseLeave={() =>
@@ -144,7 +146,6 @@ export function DataTable<TData extends RowData, TValue>({
                           current === header.column.id ? null : current
                         )
                       }
-                      style={{ width: header.getSize() }}
                     >
                       {header.isPlaceholder
                         ? null
@@ -166,32 +167,42 @@ export function DataTable<TData extends RowData, TValue>({
                           <GripVertical aria-hidden="true" className="size-3.5 text-foreground" />
                         </button>
                       ) : null}
-                    </TableHead>
+                    </DataGridHead>
                   )
                 })}
-              </TableRow>
+              </DataGridRow>
             ))}
-          </TableHeader>
-          <TableBody>
+          </DataGridHeader>
+          <DataGridBody>
             {isPending ? (
-              <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
+              <DataGridRow>
+                <DataGridCell
+                  className="flex h-24 items-center justify-center text-center"
+                  style={{ gridColumn: '1 / -1' }}
+                >
                   <div className="text-muted-foreground">{loadingMessage}</div>
-                </TableCell>
-              </TableRow>
+                </DataGridCell>
+              </DataGridRow>
             ) : error ? (
-              <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
+              <DataGridRow>
+                <DataGridCell
+                  className="flex h-24 items-center justify-center text-center"
+                  style={{ gridColumn: '1 / -1' }}
+                >
                   <div className="text-destructive">Error: {error.message}</div>
-                </TableCell>
-              </TableRow>
+                </DataGridCell>
+              </DataGridRow>
             ) : table.getRowModel().rows?.length ? (
               table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id} data-state={row.getIsSelected() ? 'selected' : undefined}>
+                <DataGridRow
+                  key={row.id}
+                  className="hover:bg-muted/50"
+                  data-state={row.getIsSelected() ? 'selected' : undefined}
+                >
                   {row.getVisibleCells().map((cell) => {
                     const meta = cell.column.columnDef.meta as Record<string, unknown> | undefined
                     return (
-                      <TableCell
+                      <DataGridCell
                         key={cell.id}
                         className={cn({
                           'text-center': meta?.align === 'center',
@@ -204,23 +215,25 @@ export function DataTable<TData extends RowData, TValue>({
                             current === cell.column.id ? null : current
                           )
                         }
-                        style={{ width: cell.column.getSize() }}
                       >
                         {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                      </TableCell>
+                      </DataGridCell>
                     )
                   })}
-                </TableRow>
+                </DataGridRow>
               ))
             ) : (
-              <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
+              <DataGridRow>
+                <DataGridCell
+                  className="flex h-24 items-center justify-center text-center"
+                  style={{ gridColumn: '1 / -1' }}
+                >
                   {emptyMessage}
-                </TableCell>
-              </TableRow>
+                </DataGridCell>
+              </DataGridRow>
             )}
-          </TableBody>
-        </Table>
+          </DataGridBody>
+        </DataGrid>
       </div>
 
       <DataTablePagination

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

@@ -54,7 +54,7 @@ export function LifecycleHooksTab({ lifecycleHooks }: LifecycleHooksTabProps) {
   if (!firstHook) {
     return (
       <div className="flex min-h-80 items-center justify-center rounded-lg border border-dashed border-border px-6 text-center text-sm text-muted-foreground">
-        Lifecycle hook examples are generated for entity schemas in v1.
+        Lifecycle hook examples are generated for entity and form schemas.
       </div>
     )
   }

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

@@ -50,7 +50,7 @@ export function DevModeIntegrateButton({
       <DrawerTrigger asChild>
         <Button type="button" variant="outline">
           <Code2 data-icon="inline-start" />
-          <span className="hidden sm:inline">Integration Snippets</span>
+          <span className="hidden sm:inline">Dev Mode</span>
         </Button>
       </DrawerTrigger>
       <DrawerContent className="w-full overflow-hidden data-[vaul-drawer-direction=right]:sm:max-w-2xl data-[vaul-drawer-direction=right]:lg:max-w-4xl">

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

@@ -181,4 +181,4 @@ export function EntityFiltersBar({
   )
 }
 
-export type { FilterDef, SelectFilterDef, DateRangeFilterDef, EntityFiltersBarProps }
+export type { DateRangeFilterDef, EntityFiltersBarProps, FilterDef, SelectFilterDef }

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

@@ -44,7 +44,7 @@ export function EntityVersionsDrawer({
   return (
     <Drawer direction="right" open={open} onOpenChange={onOpenChange} modal>
       <DrawerContent className="h-full sm:max-w-lg">
-        <DrawerHeader className="border-b border-border">
+        <DrawerHeader>
           <DrawerTitle>Versions</DrawerTitle>
           <DrawerDescription>
             Review previous {entityType} versions and restore a saved state.

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

@@ -22,22 +22,25 @@ export function PageHeader({
   const router = useRouter()
 
   return (
-    <header className="sticky top-0 border-t right-0 left-(--admin-shell-content-left) z-20 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">
-      <div className="flex w-full items-center justify-start gap-2">
-        {hasBackButton && (
-          <Button variant="ghost" size="icon" onClick={() => router.back()}>
-            <ChevronLeft className="size-4" />
-          </Button>
-        )}
-      </div>
-      <div className="flex min-w-0 items-center justify-center gap-2">
-        <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}
-      </div>
-    </header>
+    <>
+      <header className="fixed top-0 border-t right-0 left-(--admin-shell-content-left) z-20 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">
+        <div className="flex w-full items-center justify-start gap-2">
+          {hasBackButton && (
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="size-4" />
+            </Button>
+          )}
+        </div>
+        <div className="flex min-w-0 items-center justify-center gap-2">
+          <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}
+        </div>
+      </header>
+      <div className="h-14 shrink-0" aria-hidden="true" />
+    </>
   )
 }

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

@@ -16,9 +16,13 @@ export function SortIndicator({ direction }: { direction: false | 'asc' | 'desc'
 
   return (
     <Icon
-      className={cn('size-4 text-muted-foreground shrink-0 opacity-50 group-hover:opacity-100', {
-        'opacity-100 text-foreground': direction !== false
-      })}
+      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',
+        {
+          'text-foreground': direction !== false
+        }
+      )}
     />
   )
 }

package/dist/assets/adapters/next/templates/init/data/navigation.ts

@@ -1,5 +1,6 @@
 import type { AdminNavigationItem } from '@admin/types/navigation'
 import { House, ImagePlay } from 'lucide-react'
+import { menusNav } from './navigation/menus'
 import { postsNav } from './navigation/posts'
 
 export type { AdminNavigationItem } from '@admin/types/navigation'
@@ -9,12 +10,14 @@ const coreNav: AdminNavigationItem[] = [
     label: 'Overview',
     href: '/admin',
     icon: House,
+    group: 'General',
     position: 0
   },
   {
     label: 'Media',
     href: '/admin/media',
     icon: ImagePlay,
+    group: 'General',
     position: 1
   }
 ]
@@ -26,7 +29,7 @@ function comparePositions(a?: number, b?: number): number {
   return 0
 }
 
-const combinedNavigation = [...coreNav, ...postsNav]
+const combinedNavigation = [...coreNav, ...menusNav, ...postsNav]
 
 const dashboard = combinedNavigation.find((item) => item.href === '/admin')
 const others = combinedNavigation.filter((item) => item.href !== '/admin')