betterstart-cli 0.0.106 → 0.0.108

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

@@ -4,10 +4,16 @@ import * as React from 'react'
 import type { AdminMedia } from '@admin/types'
 import { deleteMedia } from '@admin/actions/media'
 import { Button } from '@admin/components/ui/button'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerTitle,
+  DrawerTrigger
+} from '@admin/components/ui/drawer'
 import { Spinner } from '@admin/components/ui/spinner'
 import { Trash2, TriangleAlert } from 'lucide-react'
 import { toast } from 'sonner'
-import { Drawer as DrawerPrimitive } from 'vaul'
 
 interface MediaDeleteDrawerProps {
   media: AdminMedia
@@ -90,63 +96,56 @@ export function MediaDeleteDrawer({
   }
 
   return (
-    <DrawerPrimitive.Root
+    <Drawer
       container={container}
-      direction="bottom"
-      dismissible={!isPending}
+      swipeDirection="down"
+      disablePointerDismissal={isPending}
       open={open}
       onOpenChange={handleOpenChange}
     >
-      <DrawerPrimitive.Trigger asChild>
-        <Button variant="destructive" disabled={disabled || isPending || !container}>
-          <Trash2 />
-          Delete media
-        </Button>
-      </DrawerPrimitive.Trigger>
-      <DrawerPrimitive.Portal>
-        <DrawerPrimitive.Overlay className="pointer-events-auto absolute inset-0 z-20 bg-black/45 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0" />
-        <DrawerPrimitive.Content className="pointer-events-auto absolute inset-x-0 bottom-0 z-30 max-h-[calc(100%-1rem)] overflow-hidden p-3 outline-none">
-          <div
-            className="overflow-hidden rounded-sm border border-border bg-popover text-sm text-popover-foreground shadow-2xl transition-[height] duration-200 ease-out"
-            style={contentHeight ? { height: contentHeight } : undefined}
-          >
-            <div
-              ref={contentRef}
-              className="max-h-[calc(100vh-8rem)] overflow-y-auto px-4 pt-4 pb-4"
-            >
-              <div aria-hidden="true" className="mx-auto mb-5 h-1.5 w-20 rounded-sm bg-muted" />
-              <div className="mb-3 flex size-10 items-center justify-center rounded-sm bg-destructive/10 text-foreground">
-                <TriangleAlert className="size-5" />
-              </div>
-              <DrawerPrimitive.Title className="font-heading text-base font-medium text-foreground">
-                Delete this media?
-              </DrawerPrimitive.Title>
-              <DrawerPrimitive.Description className="mt-1 text-sm text-muted-foreground">
-                This deletes {media.filename} from the media library. The stored file is not
-                deleted.
-              </DrawerPrimitive.Description>
-              <div className="mt-5 grid grid-cols-2 gap-2">
-                <Button
-                  variant="secondary"
-                  onClick={() => handleOpenChange(false)}
-                  disabled={isPending}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  variant="destructive"
-                  onClick={() => void handleDelete()}
-                  disabled={isPending}
-                  aria-busy={isPending}
-                >
-                  {isPending && <Spinner />}
-                  {isPending ? 'Deleting…' : 'Delete media'}
-                </Button>
-              </div>
+      <DrawerTrigger
+        render={<Button variant="destructive" disabled={disabled || isPending || !container} />}
+      >
+        <Trash2 />
+        Delete media
+      </DrawerTrigger>
+      <DrawerContent className="pointer-events-auto max-h-[calc(100%-1rem)] overflow-hidden p-3 outline-none">
+        <div
+          className="overflow-hidden rounded-sm border border-border bg-popover text-sm text-popover-foreground shadow-2xl transition-[height] duration-200 ease-out"
+          style={contentHeight ? { height: contentHeight } : undefined}
+        >
+          <div ref={contentRef} className="max-h-[calc(100vh-8rem)] overflow-y-auto px-4 pt-4 pb-4">
+            <div aria-hidden="true" className="mx-auto mb-5 h-1.5 w-20 rounded-sm bg-muted" />
+            <div className="mb-3 flex size-10 items-center justify-center rounded-sm bg-destructive/10 text-foreground">
+              <TriangleAlert className="size-5" />
+            </div>
+            <DrawerTitle className="font-heading text-base font-medium text-foreground">
+              Delete this media?
+            </DrawerTitle>
+            <DrawerDescription className="mt-1 text-sm text-muted-foreground">
+              This deletes {media.filename} from the media library. The stored file is not deleted.
+            </DrawerDescription>
+            <div className="mt-5 grid grid-cols-2 gap-2">
+              <Button
+                variant="secondary"
+                onClick={() => handleOpenChange(false)}
+                disabled={isPending}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={() => void handleDelete()}
+                disabled={isPending}
+                aria-busy={isPending}
+              >
+                {isPending && <Spinner />}
+                {isPending ? 'Deleting…' : 'Delete media'}
+              </Button>
             </div>
           </div>
-        </DrawerPrimitive.Content>
-      </DrawerPrimitive.Portal>
-    </DrawerPrimitive.Root>
+        </div>
+      </DrawerContent>
+    </Drawer>
   )
 }

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

@@ -41,7 +41,9 @@ export function MediaGridPagination({
   const perPage = 'Rows per page'
 
   const handlePageSizeChange = React.useCallback(
-    (value: string) => {
+    (value: string | null) => {
+      if (value === null) return
+
       React.startTransition(() => {
         onPageSizeChange(Number(value))
         onPageChange(1)

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

@@ -187,10 +187,10 @@ export function SortOrderDialog({
       onDragCancel={handleDragCancel}
     >
       <Drawer
-        direction="right"
+        swipeDirection="right"
         open={open}
         onOpenChange={onOpenChange}
-        onAnimationEnd={handleDrawerAnimationEnd}
+        onOpenChangeComplete={handleDrawerAnimationEnd}
       >
         <DrawerContent className="h-full w-full overflow-hidden">
           <div className="relative z-10 flex min-h-0 flex-1 flex-col gap-3 overflow-hidden">
@@ -231,9 +231,7 @@ export function SortOrderDialog({
                 {isSaving && <Spinner />}
                 {isSaving ? 'Saving…' : 'Save'}
               </Button>
-              <DrawerClose asChild>
-                <Button variant="outline">Close</Button>
-              </DrawerClose>
+              <DrawerClose render={<Button variant="outline" />}>Close</DrawerClose>
             </DrawerFooter>
           </div>
         </DrawerContent>

package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-content-editor-source-mode.tsx

@@ -9,7 +9,6 @@ import type { QueryClient } from '@tanstack/react-query'
 import type { ReactCodeMirrorRef } from '@uiw/react-codemirror'
 import type { Root } from 'react-dom/client'
 import { MediaField } from '@admin/components/custom/media-field'
-import { useTheme } from '@admin/hooks/use-admin-theme'
 import { applyCursorChange } from '@admin/utils/editor/apply-cursor-change'
 import { applyCursorChangeIfAvailable } from '@admin/utils/editor/apply-cursor-change-if-available'
 import { createMarkdownTableText } from '@admin/utils/editor/create-markdown-table-text'
@@ -33,11 +32,12 @@ import { redo, redoDepth, undo, undoDepth } from '@codemirror/commands'
 import { markdown } from '@codemirror/lang-markdown'
 import { Decoration, EditorView, WidgetType } from '@codemirror/view'
 import { QueryClientProvider, useQueryClient } from '@tanstack/react-query'
-import { githubDarkInit, githubLightInit } from '@uiw/codemirror-theme-github'
+import { githubLightInit } from '@uiw/codemirror-theme-github'
 import { NuqsAdapter } from 'nuqs/adapters/react'
 import { createRoot } from 'react-dom/client'
 
 const ADMIN_MONO_FONT_FAMILY = 'var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace'
+const editorTheme = githubLightInit({ settings: { fontFamily: ADMIN_MONO_FONT_FAMILY } })
 
 type MarkdownMediaGalleryWidgetProps = {
   widgetId: number
@@ -150,15 +150,6 @@ export function useContentEditorSourceMode({
   const [isMarkdownLinkActive, setIsMarkdownLinkActive] = React.useState(false)
   const [canUndoMarkdownChange, setCanUndoMarkdownChange] = React.useState(false)
   const [canRedoMarkdownChange, setCanRedoMarkdownChange] = React.useState(false)
-  const { resolvedTheme } = useTheme()
-  const editorTheme = React.useMemo(
-    () =>
-      resolvedTheme === 'dark'
-        ? githubDarkInit({ settings: { fontFamily: ADMIN_MONO_FONT_FAMILY } })
-        : githubLightInit({ settings: { fontFamily: ADMIN_MONO_FONT_FAMILY } }),
-    [resolvedTheme]
-  )
-
   const valueRef = React.useRef(value)
   valueRef.current = value
   const onChangeRef = React.useRef(onChange)

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

@@ -99,8 +99,7 @@ export function useContentEditor({
         autocomplete: 'off',
         autocorrect: 'off',
         autocapitalize: 'off',
-        class:
-          'simple-editor content-editor-prose prose prose-sm max-w-none dark:prose-invert focus:outline-none'
+        class: 'simple-editor content-editor-prose prose prose-sm max-w-none focus:outline-none'
       },
       handleKeyDown: (_view, event) => handleSlashKeyDown(event)
     },

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

@@ -51,7 +51,7 @@ export default function DashboardPage() {
                 </p>
               </div>
               <div className="flex w-full flex-col">
-                <Accordion type="single" collapsible defaultValue="item-1">
+                <Accordion defaultValue={['item-1']}>
                   <AccordionItem value="item-1">
                     <AccordionTrigger>
                       <div className="flex items-center gap-3">

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

@@ -54,7 +54,7 @@ export function ForgotPasswordForm({ className, ...props }: React.ComponentProps
               alt=""
               fill
               sizes="(min-width: 768px) 42vw, 0px"
-              className="object-cover dark:brightness-[0.2] dark:grayscale"
+              className="object-cover"
             />
           </div>
           <div className="p-6 md:p-20">

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

@@ -60,7 +60,7 @@ export function LoginForm({ className, ...props }: React.ComponentProps<'div'>)
               alt=""
               fill
               sizes="(min-width: 768px) 42vw, 0px"
-              className="object-cover dark:brightness-[0.2] dark:grayscale"
+              className="object-cover"
             />
           </div>
           <form onSubmit={handleSubmit} className="p-6 md:p-20">
@@ -70,7 +70,7 @@ export function LoginForm({ className, ...props }: React.ComponentProps<'div'>)
                 <p className="text-balance text-muted-foreground">Sign in to your account</p>
               </div>
               {resetSuccess ? (
-                <div className="rounded-md bg-emerald-500/10 p-3 text-sm text-emerald-700 dark:text-emerald-400">
+                <div className="rounded-md bg-emerald-500/10 p-3 text-sm text-emerald-700">
                   Password reset. Sign in with your new password.
                 </div>
               ) : null}

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

@@ -37,7 +37,7 @@ export function ResetPasswordForm({ className, ...props }: React.ComponentProps<
                 alt=""
                 fill
                 sizes="(min-width: 768px) 42vw, 0px"
-                className="object-cover dark:brightness-[0.2] dark:grayscale"
+                className="object-cover"
               />
             </div>
             <div className="p-6 md:p-20">
@@ -104,7 +104,7 @@ export function ResetPasswordForm({ className, ...props }: React.ComponentProps<
               alt=""
               fill
               sizes="(min-width: 768px) 42vw, 0px"
-              className="object-cover dark:brightness-[0.2] dark:grayscale"
+              className="object-cover"
             />
           </div>
           <form onSubmit={handleSubmit} className="p-6 md:p-20">

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

@@ -36,7 +36,7 @@ function formatMetadata(metadata: Record<string, unknown> | null): string {
 
 export function AuditLogDetailDrawer({ auditLog, open, onOpenChange }: AuditLogDetailDrawerProps) {
   return (
-    <Drawer direction="right" open={open} onOpenChange={onOpenChange} modal>
+    <Drawer swipeDirection="right" open={open} onOpenChange={onOpenChange} modal>
       <DrawerContent className="h-full sm:max-w-xl">
         <DrawerHeader>
           <DrawerTitle>Audit Event</DrawerTitle>

package/dist/assets/adapters/next/templates/init/pages/settings/forms/form-notifications-drawer.tsx

@@ -82,7 +82,7 @@ export function FormNotificationsDrawer({
   const isPending = mutation.isPending
 
   return (
-    <Drawer direction="right" open={open} onOpenChange={onOpenChange} modal>
+    <Drawer swipeDirection="right" open={open} onOpenChange={onOpenChange} modal>
       <DrawerContent className="h-full sm:max-w-xl">
         <Form {...form}>
           <form
@@ -128,10 +128,10 @@ export function FormNotificationsDrawer({
             </ScrollArea>
 
             <DrawerFooter className="flex-row justify-end">
-              <DrawerClose asChild>
-                <Button type="button" variant="outline" size="lg" disabled={isPending}>
-                  Cancel
-                </Button>
+              <DrawerClose
+                render={<Button type="button" variant="outline" size="lg" disabled={isPending} />}
+              >
+                Cancel
               </DrawerClose>
               <Button
                 type="submit"

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

@@ -23,33 +23,33 @@ export function WebhookActions({ webhook, onEdit, onDelete }: WebhookActionsProp
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          className="size-8 p-0"
-          aria-label={`Open webhook actions for ${webhook.name}`}
-        >
-          <span className="sr-only">Open webhook actions</span>
-          {sendTest.isPending ? (
-            <Spinner className="size-4" />
-          ) : (
-            <MoreHorizontal className="size-4" />
-          )}
-        </Button>
-      </DropdownMenuTrigger>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant="ghost"
+            className="size-8 p-0"
+            aria-label={`Open webhook actions for ${webhook.name}`}
+          >
+            <span className="sr-only">Open webhook actions</span>
+            {sendTest.isPending ? (
+              <Spinner className="size-4" />
+            ) : (
+              <MoreHorizontal className="size-4" />
+            )}
+          </Button>
+        }
+      />
       <DropdownMenuContent align="end">
         <DropdownMenuItem
+          closeOnClick={false}
           disabled={sendTest.isPending}
           aria-busy={sendTest.isPending}
-          onSelect={(event) => {
-            event.preventDefault()
-            sendTest.mutate(webhook.id)
-          }}
+          onClick={() => sendTest.mutate(webhook.id)}
         >
           {sendTest.isPending ? 'Testing…' : 'Test'}
         </DropdownMenuItem>
-        <DropdownMenuItem onSelect={() => onEdit(webhook)}>Edit</DropdownMenuItem>
-        <DropdownMenuItem variant="destructive" onSelect={() => onDelete(webhook)}>
+        <DropdownMenuItem onClick={() => onEdit(webhook)}>Edit</DropdownMenuItem>
+        <DropdownMenuItem variant="destructive" onClick={() => onDelete(webhook)}>
           Delete
         </DropdownMenuItem>
       </DropdownMenuContent>

package/dist/assets/adapters/next/templates/init/pages/users/change-password-dialog.tsx

@@ -134,11 +134,13 @@ export function ChangePasswordDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogTrigger asChild>
-        <DropdownMenuItem onSelect={(event) => event.preventDefault()}>
-          <KeySquare className="size-4" />
-          Change password
-        </DropdownMenuItem>
+      <DialogTrigger
+        render={
+          <DropdownMenuItem closeOnClick={false} onClick={(event) => event.preventDefault()} />
+        }
+      >
+        <KeySquare className="size-4" />
+        Change password
       </DialogTrigger>
       <DialogContent className="sm:max-w-135">
         <Form {...form}>

package/dist/assets/adapters/next/templates/init/pages/users/columns.tsx

@@ -148,11 +148,9 @@ export const columns: ColumnDef<User>[] = [
       return (
         <div className="flex justify-end">
           <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="size-8 p-0">
-                <span className="sr-only">Open menu</span>
-                <MoreHorizontal className="size-4" />
-              </Button>
+            <DropdownMenuTrigger render={<Button variant="ghost" className="size-8 p-0" />}>
+              <span className="sr-only">Open menu</span>
+              <MoreHorizontal className="size-4" />
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               {!isCurrentUser ? (

package/dist/assets/adapters/next/templates/init/pages/users/create-user-dialog.tsx

@@ -108,9 +108,7 @@ export function CreateUserDialog() {
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogTrigger asChild>
-        <Button>Create User</Button>
-      </DialogTrigger>
+      <DialogTrigger render={<Button />}>Create User</DialogTrigger>
       <DialogContent className="sm:max-w-135">
         <Form {...form}>
           <form onSubmit={form.handleSubmit((values) => mutation.mutate(values))}>

package/dist/assets/adapters/next/templates/init/pages/users/delete-user-dialog.tsx

@@ -104,11 +104,17 @@ export function DeleteUserDialog({ userId, userName, isCurrentUser }: DeleteUser
 
   return (
     <AlertDialog open={open} onOpenChange={handleOpenChange}>
-      <AlertDialogTrigger asChild>
-        <DropdownMenuItem variant="destructive" onSelect={(event) => event.preventDefault()}>
-          <Trash className="size-4" />
-          Delete user
-        </DropdownMenuItem>
+      <AlertDialogTrigger
+        render={
+          <DropdownMenuItem
+            variant="destructive"
+            closeOnClick={false}
+            onClick={(event) => event.preventDefault()}
+          />
+        }
+      >
+        <Trash className="size-4" />
+        Delete user
       </AlertDialogTrigger>
       <AlertDialogContent>
         <Form {...form}>

package/dist/assets/adapters/next/templates/init/pages/users/edit-role-dialog.tsx

@@ -56,7 +56,7 @@ export function EditRoleDialog({ userId, currentRole, userName, children }: Edit
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogTrigger render={children as React.ReactElement} />
       <DialogContent className="sm:max-w-87.5">
         <DialogHeader>
           <DialogTitle>Edit Role</DialogTitle>

package/dist/assets/shared-assets/react-admin/custom/content-editor/main-toolbar-content.tsx

@@ -49,7 +49,7 @@ export function MainToolbarContent({
           <UndoRedoButton action="redo" />
         </div>
 
-        <Separator orientation="vertical" decorative className="mx-1 my-auto h-[65%] self-center" />
+        <Separator orientation="vertical" className="mx-1 my-auto h-[65%] self-center" />
 
         <div className="flex items-center gap-0.5">
           <HeadingDropdownMenu />
@@ -59,7 +59,7 @@ export function MainToolbarContent({
           <HorizontalRuleButton editor={editor} />
         </div>
 
-        <Separator orientation="vertical" decorative className="mx-1 my-auto h-[65%] self-center" />
+        <Separator orientation="vertical" className="mx-1 my-auto h-[65%] self-center" />
 
         <div className="flex items-center gap-0.5">
           <MarkButton type="bold" />
@@ -75,7 +75,7 @@ export function MainToolbarContent({
           {!isMobile ? <LinkPopover /> : <LinkButton onClick={onLinkClick} />}
         </div>
 
-        <Separator orientation="vertical" decorative className="mx-1 my-auto h-[65%] self-center" />
+        <Separator orientation="vertical" className="mx-1 my-auto h-[65%] self-center" />
 
         <div className="flex items-center">
           <TableButton editor={editor} />

package/dist/assets/shared-assets/react-admin/custom/content-editor/math-popover-button.tsx

@@ -36,17 +36,19 @@ export function MathPopoverButton({
 
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild>
-        <MathButton
-          {...buttonProps}
-          text={text}
-          disabled={disabled || !canInsert}
-          aria-label="Insert math"
-          title="Math"
-          onPointerDown={(event) => event.preventDefault()}
-          onClick={() => setIsOpen((current) => !current)}
-        />
-      </PopoverTrigger>
+      <PopoverTrigger
+        render={
+          <MathButton
+            {...buttonProps}
+            text={text}
+            disabled={disabled || !canInsert}
+            aria-label="Insert math"
+            title="Math"
+            onPointerDown={(event) => event.preventDefault()}
+            onClick={() => setIsOpen((current) => !current)}
+          />
+        }
+      />
       <PopoverContent align="start" className="w-auto gap-0 p-0">
         <MathEditorControls
           disabled={disabled || !canInsert}

package/dist/assets/shared-assets/react-admin/custom/content-editor/mobile-toolbar-content.tsx

@@ -38,7 +38,7 @@ export function MobileToolbarContent({
         </Button>
       </div>
 
-      <Separator orientation="vertical" decorative className="mx-1 my-auto h-[65%] self-center" />
+      <Separator orientation="vertical" className="mx-1 my-auto h-[65%] self-center" />
 
       {type === 'highlighter' ? (
         <ColorHighlightPopoverContent />

package/dist/assets/shared-assets/react-admin/custom/content-editor/selection-bubble-menu.tsx

@@ -117,11 +117,7 @@ export function SelectionBubbleMenu({ editor }: { editor: Editor }) {
             />
           </div>
 
-          <Separator
-            orientation="vertical"
-            decorative
-            className="mx-1 my-auto h-[65%] self-center"
-          />
+          <Separator orientation="vertical" className="mx-1 my-auto h-[65%] self-center" />
 
           <div className="flex items-center gap-0.5">
             <MarkButton editor={editor} type="bold" />

package/dist/assets/shared-assets/react-admin/custom/content-editor/source-mode-dropdown-button.tsx

@@ -29,20 +29,22 @@ export function SourceModeDropdownButton({
 
   return (
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
-      <DropdownMenuTrigger asChild>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon-sm"
-          className="w-auto px-2"
-          aria-label={ariaLabel ?? label}
-          title={label}
-          onPointerDown={(event) => event.preventDefault()}
-          onClick={() => setIsOpen((current) => !current)}
-        >
-          <Icon />
-          <ChevronDownIcon className="tiptap-button-dropdown-small" />
-        </Button>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            className="w-auto px-2"
+            aria-label={ariaLabel ?? label}
+            title={label}
+            onPointerDown={(event) => event.preventDefault()}
+            onClick={() => setIsOpen((current) => !current)}
+          />
+        }
+      >
+        <Icon />
+        <ChevronDownIcon className="tiptap-button-dropdown-small" />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-auto min-w-40">
         <DropdownMenuGroup>{children}</DropdownMenuGroup>

package/dist/assets/shared-assets/react-admin/custom/content-editor/source-mode.tsx

@@ -152,11 +152,7 @@ export function SourceMode({
             </Button>
           </div>
 
-          <Separator
-            orientation="vertical"
-            decorative
-            className="mx-1 my-auto h-[65%] self-center"
-          />
+          <Separator orientation="vertical" className="mx-1 my-auto h-[65%] self-center" />
 
           <div className="flex items-center gap-0.5">
             <SourceModeDropdownButton
@@ -173,7 +169,7 @@ export function SourceMode({
                     disabled={disabled}
                     aria-label={option.label}
                     title={option.label}
-                    onSelect={() => applyHeading(option.level)}
+                    onClick={() => applyHeading(option.level)}
                   >
                     <Icon />
                     <span className="tiptap-button-text">{option.label}</span>
@@ -191,7 +187,7 @@ export function SourceMode({
                     disabled={disabled}
                     aria-label={option.label}
                     title={option.label}
-                    onSelect={() => applyList(option.type)}
+                    onClick={() => applyList(option.type)}
                   >
                     <Icon />
                     <span className="tiptap-button-text">{option.label}</span>
@@ -234,11 +230,7 @@ export function SourceMode({
             </Button>
           </div>
 
-          <Separator
-            orientation="vertical"
-            decorative
-            className="mx-1 my-auto h-[65%] self-center"
-          />
+          <Separator orientation="vertical" className="mx-1 my-auto h-[65%] self-center" />
 
           <div className="flex items-center gap-0.5">
             {[
@@ -300,11 +292,7 @@ export function SourceMode({
             />
           </div>
 
-          <Separator
-            orientation="vertical"
-            decorative
-            className="mx-1 my-auto h-[65%] self-center"
-          />
+          <Separator orientation="vertical" className="mx-1 my-auto h-[65%] self-center" />
 
           <div className="flex items-center">
             <TableButton disabled={disabled} onInsertTable={insertTable} />

package/dist/assets/shared-assets/react-admin/custom/content-editor/table-bubble-menu.tsx

@@ -230,7 +230,6 @@ export function TableBubbleMenu({ editor }: { editor: Editor }) {
           </div>
           <Separator
             orientation="vertical"
-            decorative
             className="mx-1 my-auto h-5 w-px self-center bg-border opacity-100"
           />
           <div className="flex items-center gap-0.5">