betterstart-cli 0.0.13 → 0.0.14

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

@@ -4,7 +4,7 @@
   "description": "Manage Menus",
   "icon": "Menu",
   "navGroup": {
-    "label": "Collections",
+    "label": "General",
     "position": 0
   },
   "navPosition": 1,
@@ -30,16 +30,23 @@
           "hint": "Items in the navigation menu",
           "fields": [
             {
-              "name": "label",
-              "type": "string",
-              "label": "Label",
-              "required": true
-            },
-            {
-              "name": "href",
-              "type": "string",
-              "label": "Href",
-              "required": true
+              "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",
@@ -47,6 +54,39 @@
               "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
+                }
+              ]
             }
           ]
         }

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

@@ -53,14 +53,14 @@ export function LifecycleHooksTab({ lifecycleHooks }: LifecycleHooksTabProps) {
 
   if (!firstHook) {
     return (
-      <div className="flex min-h-80 items-center justify-center rounded-xl border border-dashed border-border px-6 text-center text-sm text-muted-foreground">
-        Lifecycle hook examples are generated for entity schemas in v1.
+      <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 and form schemas.
       </div>
     )
   }
 
   return (
-    <Accordion type="single" defaultValue={firstHook.id} className="min-h-0 shrink-0 rounded-xl">
+    <Accordion type="single" defaultValue={firstHook.id} className="min-h-0 shrink-0 rounded-lg">
       {lifecycleHooks.map((hook) => {
         const HookIcon = LIFECYCLE_HOOK_ICONS[hook.icon]
         const phaseLabel = LIFECYCLE_HOOK_PHASE_LABELS[hook.phase]

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

@@ -56,7 +56,7 @@ export function SnippetsTab({ snippets }: SnippetsTabProps) {
   }
 
   return (
-    <Accordion type="single" defaultValue={firstSnippet.id} className="min-h-0 shrink-0 rounded-xl">
+    <Accordion type="single" defaultValue={firstSnippet.id} className="min-h-0 shrink-0 rounded-lg">
       {snippets.map((snippet) => {
         const SnippetIcon = SNIPPET_ICONS[snippet.icon]
         const snippetKindLabel = SNIPPET_KIND_LABELS[snippet.kind]

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/media/edit-media-dialog-content.tsx

@@ -93,7 +93,7 @@ export function EditMediaDialogContent({
     <DrawerContent className="h-full w-full overflow-hidden">
       <div
         ref={handleDrawerContainerRef}
-        className="pointer-events-none absolute inset-3 z-20 overflow-hidden rounded-xl"
+        className="pointer-events-none absolute inset-3 z-20 overflow-hidden rounded-lg"
       />
       <div className="relative z-10 flex min-h-0 flex-1 flex-col overflow-hidden">
         <DrawerHeader>
@@ -107,7 +107,7 @@ export function EditMediaDialogContent({
           >
             <Card>
               <CardContent className="p-0">
-                <div className="relative aspect-video overflow-hidden rounded-xl bg-background">
+                <div className="relative aspect-video overflow-hidden rounded-lg bg-background">
                   <MediaPreview media={media} showMetadata />
                 </div>
               </CardContent>

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

@@ -90,7 +90,7 @@ export function MediaUrlImporter({ onImportFromUrl, accept, className }: MediaUr
   return (
     <div
       className={cn(
-        'flex items-center justify-center transition-colors rounded-xl border bg-input border-border overflow-hidden h-full flex-col p-5 gap-5',
+        'flex items-center justify-center transition-colors rounded-lg border bg-input border-border overflow-hidden h-full flex-col p-5 gap-5',
         className
       )}
     >

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

@@ -10,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
   }
 ]

package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-table-button.ts

@@ -0,0 +1,85 @@
+'use client'
+
+import { normalizeCount } from '@admin/utils/editor/table-input'
+import { insertContentEditorTable } from '@admin/utils/editor/tiptap'
+import type { Editor } from '@tiptap/core'
+import * as React from 'react'
+
+const DEFAULT_TABLE_ROWS = 3
+const DEFAULT_TABLE_COLS = 3
+const MIN_TABLE_ROWS = 2
+const MIN_TABLE_COLS = 1
+
+interface UseTableButtonOptions {
+  disabled?: boolean
+  editor?: Editor | null
+  onInsertTable?: (size: { cols: number; rows: number }) => void
+}
+
+export function useTableButton({ disabled, editor, onInsertTable }: UseTableButtonOptions) {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [rows, setRows] = React.useState(String(DEFAULT_TABLE_ROWS))
+  const [cols, setCols] = React.useState(String(DEFAULT_TABLE_COLS))
+  const rowsId = React.useId()
+  const colsId = React.useId()
+  const canInsert = Boolean(onInsertTable || editor?.isEditable)
+  const isDisabled = disabled || !canInsert
+
+  const closePopover = React.useCallback(() => {
+    setIsOpen(false)
+    window.setTimeout(() => setIsOpen(false), 0)
+  }, [])
+
+  const insertTable = React.useCallback(() => {
+    if (isDisabled) return
+
+    const rowCount = normalizeCount(rows, DEFAULT_TABLE_ROWS, MIN_TABLE_ROWS)
+    const colCount = normalizeCount(cols, DEFAULT_TABLE_COLS, MIN_TABLE_COLS)
+
+    if (onInsertTable) {
+      onInsertTable({ cols: colCount, rows: rowCount })
+      closePopover()
+      return
+    }
+
+    if (!editor) return
+
+    insertContentEditorTable(editor, rowCount, colCount)
+    closePopover()
+  }, [closePopover, cols, editor, isDisabled, onInsertTable, rows])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key !== 'Enter') return
+
+      event.preventDefault()
+      event.stopPropagation()
+      insertTable()
+    },
+    [insertTable]
+  )
+
+  const handleRowsChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setRows(event.target.value)
+  }, [])
+
+  const handleColsChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setCols(event.target.value)
+  }, [])
+
+  return {
+    cols,
+    colsId,
+    handleColsChange,
+    handleKeyDown,
+    handleRowsChange,
+    insertTable,
+    isDisabled,
+    isOpen,
+    minCols: MIN_TABLE_COLS,
+    minRows: MIN_TABLE_ROWS,
+    rows,
+    rowsId,
+    setIsOpen
+  }
+}