betterstart-cli 0.0.106 → 0.0.108

package/dist/assets/adapters/next/templates/init/admin-globals.css

@@ -5,8 +5,6 @@
 
 @plugin "@tailwindcss/typography";
 
-@custom-variant dark (&:is(.dark *));
-
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -97,6 +95,7 @@
   --accent-foreground: oklch(0.15 0 0);
   --destructive: oklch(0.577 0.245 27.325);
   --warning: oklch(0.625 0.165 57.4);
+  --warning-foreground: oklch(0.625 0.165 57.4);
   --border: oklch(0.93 0 0);
   --highlight: oklch(0.9 0.004 286.32);
   --input: oklch(0.994 0 0);
@@ -174,65 +173,6 @@
   --tt-color-highlight-pink-contrast: rgba(225, 136, 179, 0.27);
 }
 
-.dark {
-  --background: oklch(0.144 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.15 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.15 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.15 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --warning: oklch(0.75 0.2 90);
-  --warning-foreground: oklch(0.625 0.165 57.4);
-  --border: oklch(1 0 0 / 10%);
-  --highlight: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.845 0.143 164.978);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.596 0.145 163.225);
-  --chart-4: oklch(0.508 0.118 165.612);
-  --chart-5: oklch(0.432 0.095 166.913);
-  --sidebar: oklch(0.15 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-  --tt-bg-color: var(--background);
-  --tt-bg-color-contrast: var(--border);
-  --tt-color-highlight-yellow: #6b6524;
-  --tt-color-highlight-green: #509568;
-  --tt-color-highlight-blue: #6e92aa;
-  --tt-color-highlight-purple: #583e74;
-  --tt-color-highlight-red: #743e42;
-  --tt-color-highlight-gray: rgb(47, 47, 47);
-  --tt-color-highlight-brown: rgb(74, 50, 40);
-  --tt-color-highlight-orange: rgb(92, 59, 35);
-  --tt-color-highlight-pink: rgb(78, 44, 60);
-  --tt-color-highlight-yellow-contrast: #58531e;
-  --tt-color-highlight-green-contrast: #47855d;
-  --tt-color-highlight-blue-contrast: #5e86a1;
-  --tt-color-highlight-purple-contrast: #4c3564;
-  --tt-color-highlight-red-contrast: #643539;
-  --tt-color-highlight-gray-contrast: rgba(255, 255, 255, 0.094);
-  --tt-color-highlight-brown-contrast: rgba(184, 101, 69, 0.25);
-  --tt-color-highlight-orange-contrast: rgba(233, 126, 37, 0.2);
-  --tt-color-highlight-pink-contrast: rgba(220, 76, 145, 0.22);
-  --shadow-small: 0px 1px 2px #00000029;
-  --shadow-medium: 0px 2px 2px #00000052, 0px 8px 8px -8px #00000029;
-}
-
 @layer base {
   * {
     @apply border-border outline-ring/50;

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

@@ -1,31 +1,14 @@
 'use client'
 
-import { Button } from '@admin/components/ui/button'
 import { SidebarTrigger, useSidebar } from '@admin/components/ui/sidebar'
-import { useTheme } from '@admin/hooks/use-admin-theme'
-import { Moon, Sun } from 'lucide-react'
 
 export function AdminHeader() {
-  const { theme, setTheme } = useTheme()
   const { state } = useSidebar()
 
   return (
     <header className="sticky top-0 z-50 flex h-14 w-full shrink-0 items-center gap-2 border-b border-border">
-      <div className="flex w-full flex-1 items-center justify-between gap-1 px-5">
-        <div className="flex w-full items-center gap-2">
-          {state === 'collapsed' && <SidebarTrigger />}
-        </div>
-        <div className="ml-auto flex items-center gap-2">
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-          >
-            <Sun className="size-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-            <Moon className="absolute size-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
-            <span className="sr-only">Toggle theme</span>
-          </Button>
-        </div>
+      <div className="flex w-full flex-1 items-center gap-2 px-5">
+        {state === 'collapsed' && <SidebarTrigger />}
       </div>
     </header>
   )

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

@@ -20,14 +20,16 @@ export function AdminNavLink({
       : pathname === href || pathname.startsWith(`${href}/`)
 
   return (
-    <SidebarMenuButton asChild>
-      <Link
-        aria-current={isActive ? 'page' : undefined}
-        data-active={isActive ? true : undefined}
-        href={href}
-      >
-        {children}
-      </Link>
+    <SidebarMenuButton
+      render={
+        <Link
+          aria-current={isActive ? 'page' : undefined}
+          data-active={isActive ? true : undefined}
+          href={href}
+        />
+      }
+    >
+      {children}
     </SidebarMenuButton>
   )
 }

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

@@ -2,7 +2,6 @@
 
 import { Toaster } from '@admin/components/ui/sonner'
 import { TooltipProvider } from '@admin/components/ui/tooltip'
-import { AdminThemeProvider } from '@admin/hooks/use-admin-theme'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useState } from 'react'
 
@@ -22,12 +21,10 @@ export function AdminProviders({ children }: { children: React.ReactNode }) {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <AdminThemeProvider>
-        <TooltipProvider>
-          {children}
-          <Toaster position="top-right" richColors />
-        </TooltipProvider>
-      </AdminThemeProvider>
+      <TooltipProvider>
+        {children}
+        <Toaster position="top-right" richColors />
+      </TooltipProvider>
     </QueryClientProvider>
   )
 }

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

@@ -3,9 +3,5 @@ import { SidebarMenuButton } from '@admin/components/ui/sidebar'
 import Link from 'next/link'
 
 export function SidebarNavLinkSkeleton({ href, children }: { href: string; children: ReactNode }) {
-  return (
-    <SidebarMenuButton asChild>
-      <Link href={href}>{children}</Link>
-    </SidebarMenuButton>
-  )
+  return <SidebarMenuButton render={<Link href={href} />}>{children}</SidebarMenuButton>
 }

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

@@ -24,61 +24,66 @@ export async function SidebarUserMenu() {
     <SidebarMenu className="h-full">
       <SidebarMenuItem className="h-full">
         <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              className="h-full w-full justify-start border-none bg-transparent! px-3 text-left ring-0!"
-            >
-              <Avatar className="size-8 shrink-0">
-                <AvatarImage src={user.image ?? undefined} />
-                <AvatarFallback className="text-xs font-semibold group-hover:bg-white">
-                  {user.name?.charAt(0) ?? user.email?.charAt(0) ?? '?'}
-                </AvatarFallback>
-              </Avatar>
-              <div className="flex-1 truncate group-data-[collapsible=icon]:hidden">
-                <p className="truncate font-medium">{user.name}</p>
-              </div>
+          <DropdownMenuTrigger
+            render={
+              <Button
+                variant="ghost"
+                className="h-full w-full justify-start border-none bg-transparent! px-3 text-left ring-0!"
+              >
+                <Avatar className="size-8 shrink-0">
+                  <AvatarImage src={user.image ?? undefined} />
+                  <AvatarFallback className="text-xs font-semibold group-hover:bg-white">
+                    {user.name?.charAt(0) ?? user.email?.charAt(0) ?? '?'}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex-1 truncate group-data-[collapsible=icon]:hidden">
+                  <p className="truncate font-medium">{user.name}</p>
+                </div>
 
-              <div className="group-data-[collapsible=icon]:hidden">
-                <span
-                  className={cn(
-                    buttonVariants({ variant: 'outline', size: 'icon' }),
-                    'size-7 rounded-sm group-hover:bg-white'
-                  )}
-                >
-                  <Ellipsis strokeWidth={2} className="size-4" />
-                </span>
-              </div>
-            </Button>
-          </DropdownMenuTrigger>
+                <div className="group-data-[collapsible=icon]:hidden">
+                  <span
+                    className={cn(
+                      buttonVariants({ variant: 'outline', size: 'icon' }),
+                      'size-7 rounded-sm group-hover:bg-white'
+                    )}
+                  >
+                    <Ellipsis strokeWidth={2} className="size-4" />
+                  </span>
+                </div>
+              </Button>
+            }
+          />
           <DropdownMenuContent align="start" alignOffset={12} className="w-68 p-1">
             <DropdownMenuGroup>
-              <DropdownMenuItem className="justify-between" asChild>
-                <Link
-                  href="/admin/profile"
-                  prefetch={true}
-                  className="flex w-full items-center justify-between gap-2 py-2 pr-1"
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="flex flex-col">
-                      <p className="truncate font-medium">{user.name}</p>
-                      <p className="truncate text-sm font-normal text-muted-foreground [text-box-trim:trim-start]">
-                        {user.email}
-                      </p>
-                    </div>
+              <DropdownMenuItem
+                className="justify-between"
+                render={
+                  <Link
+                    href="/admin/profile"
+                    className="flex w-full items-center justify-between gap-2 py-2 pr-1"
+                  />
+                }
+              >
+                <div className="flex items-center gap-2">
+                  <div className="flex flex-col">
+                    <p className="truncate font-medium">{user.name}</p>
+                    <p className="truncate text-sm font-normal text-muted-foreground [text-box-trim:trim-start]">
+                      {user.email}
+                    </p>
                   </div>
-                  <Button variant="ghost" className="pointer-events-none size-8! shrink-0">
-                    <Settings strokeWidth={2} className="size-4" />
-                  </Button>
-                </Link>
+                </div>
+                <Button variant="ghost" className="pointer-events-none size-8! shrink-0">
+                  <Settings strokeWidth={2} className="size-4" />
+                </Button>
               </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuGroup>
-              <DropdownMenuItem className="justify-between" asChild>
-                <Link href="https://betterstart.io/docs" target="_blank">
-                  <span>Docs</span>
-                  <BookOpen strokeWidth={1.2} className="size-4" />
-                </Link>
+              <DropdownMenuItem
+                className="justify-between"
+                render={<Link href="https://betterstart.io/docs" target="_blank" />}
+              >
+                <span>Docs</span>
+                <BookOpen strokeWidth={1.2} className="size-4" />
               </DropdownMenuItem>
               <AdminSignOut className="justify-between" />
             </DropdownMenuGroup>

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

@@ -48,8 +48,8 @@ export function AdminSignOut({
 
   return (
     <DropdownMenuItem
-      onSelect={(event) => {
-        event.preventDefault()
+      closeOnClick={false}
+      onClick={() => {
         handleSignOut()
       }}
       disabled={isPending}

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

@@ -70,7 +70,9 @@ export function DataTablePagination<TData>(props: DataTablePaginationProps<TData
   )
 
   const handlePageSizeChange = React.useCallback(
-    (value: string) => {
+    (value: string | null) => {
+      if (value === null) return
+
       React.startTransition(() => {
         if (value === 'all') {
           setPageSize(-1)

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

@@ -34,11 +34,9 @@ export function DeleteDialog({
 
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
-      <AlertDialogTrigger asChild>
-        <Button variant="destructive" size="default">
-          <Trash2 className="-ml-0.5 size-3.5" strokeWidth={2} />
-          Delete {count} {label}
-        </Button>
+      <AlertDialogTrigger render={<Button variant="destructive" size="default" />}>
+        <Trash2 className="-ml-0.5 size-3.5" strokeWidth={2} />
+        Delete {count} {label}
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>

package/dist/assets/adapters/next/templates/init/components/shared/dev-mode/copyable-code-block.tsx

@@ -5,7 +5,6 @@ import type { DevModeCodeLanguage, DevModeSnippetCodeTab } from './dev-mode-type
 import { Button } from '@admin/components/ui/button'
 import { Card, CardContent, CardHeader } from '@admin/components/ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@admin/components/ui/tabs'
-import { useTheme } from '@admin/hooks/use-admin-theme'
 import { useCopyToClipboard } from '@admin/hooks/use-copy-to-clipboard'
 import { Check, Copy } from 'lucide-react'
 import { PlainCodeFallback } from './plain-code-fallback'
@@ -21,8 +20,6 @@ interface CopyableCodeBlockProps {
 
 export function CopyableCodeBlock({ label, code, language, tabs }: CopyableCodeBlockProps) {
   const [copy, isCopied] = useCopyToClipboard()
-  const { resolvedTheme } = useTheme()
-  const codeTheme = resolvedTheme === 'dark' ? 'dark' : 'light'
   const fallbackTab: DevModeSnippetCodeTab = {
     id: 'code',
     label,
@@ -68,7 +65,7 @@ export function CopyableCodeBlock({ label, code, language, tabs }: CopyableCodeB
             <TabsContent key={tab.id} value={tab.id} className="min-h-0 overflow-auto">
               <CardContent className="h-full overflow-auto p-0">
                 <React.Suspense fallback={<PlainCodeFallback code={tab.code} />}>
-                  <LazyCodeMirror code={tab.code} language={tab.language} theme={codeTheme} />
+                  <LazyCodeMirror code={tab.code} language={tab.language} />
                 </React.Suspense>
               </CardContent>
             </TabsContent>
@@ -94,7 +91,7 @@ export function CopyableCodeBlock({ label, code, language, tabs }: CopyableCodeB
           </CardHeader>
           <CardContent className="overflow-auto p-0">
             <React.Suspense fallback={<PlainCodeFallback code={code} />}>
-              <LazyCodeMirror code={code} language={language} theme={codeTheme} />
+              <LazyCodeMirror code={code} language={language} />
             </React.Suspense>
           </CardContent>
         </>

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

@@ -1,11 +1,11 @@
 'use client'
 
 import * as React from 'react'
-import type { DevModeCodeLanguage, DevModeCodeTheme } from './dev-mode-types'
+import type { DevModeCodeLanguage } from './dev-mode-types'
 import { javascript } from '@codemirror/lang-javascript'
 import { json } from '@codemirror/lang-json'
 import { EditorView } from '@codemirror/view'
-import { githubDark, githubLight } from '@uiw/codemirror-theme-github'
+import { githubLight } from '@uiw/codemirror-theme-github'
 import CodeMirror from '@uiw/react-codemirror'
 
 const codeMirrorSetup = {
@@ -43,10 +43,9 @@ const compactCodeTheme = EditorView.theme({
 interface DevModeCodeMirrorProps {
   code: string
   language: DevModeCodeLanguage
-  theme: DevModeCodeTheme
 }
 
-export default function DevModeCodeMirror({ code, language, theme }: DevModeCodeMirrorProps) {
+export default function DevModeCodeMirror({ code, language }: DevModeCodeMirrorProps) {
   const extensions = React.useMemo(
     () =>
       language === 'json'
@@ -62,7 +61,7 @@ export default function DevModeCodeMirror({ code, language, theme }: DevModeCode
       readOnly
       basicSetup={codeMirrorSetup}
       extensions={extensions}
-      theme={theme === 'dark' ? githubDark : githubLight}
+      theme={githubLight}
       className="flex-1 [&>.cm-editor]:h-full"
     />
   )

package/dist/assets/adapters/next/templates/init/components/shared/dev-mode/dev-mode-types.ts

@@ -1,5 +1,4 @@
 export type DevModeCodeLanguage = 'tsx' | 'ts' | 'json'
-export type DevModeCodeTheme = 'light' | 'dark'
 export type DevModeSnippetIcon =
   | 'eye'
   | 'file-code'

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

@@ -50,7 +50,7 @@ export function LifecycleHooksTab({ lifecycleHooks }: LifecycleHooksTabProps) {
   }
 
   return (
-    <Accordion type="single" defaultValue={firstHook.id} className="min-h-0 shrink-0 rounded-sm">
+    <Accordion defaultValue={[firstHook.id]} className="min-h-0 shrink-0 rounded-sm">
       {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

@@ -47,7 +47,7 @@ export function SnippetsTab({ snippets }: SnippetsTabProps) {
   }
 
   return (
-    <Accordion type="single" defaultValue={firstSnippet.id} className="min-h-0 shrink-0 rounded-sm">
+    <Accordion defaultValue={[firstSnippet.id]} className="min-h-0 shrink-0 rounded-sm">
       {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/dev-mode-integrate.tsx

@@ -46,14 +46,12 @@ export function DevModeIntegrateButton({
   }
 
   return (
-    <Drawer direction="right" handleOnly onOpenChange={handleOpenChange}>
-      <DrawerTrigger asChild>
-        <Button type="button" variant="outline">
-          <Code2 />
-          <span className="hidden sm:inline">Dev Mode</span>
-        </Button>
+    <Drawer swipeDirection="right" onOpenChange={handleOpenChange}>
+      <DrawerTrigger render={<Button type="button" variant="outline" />}>
+        <Code2 />
+        <span className="hidden sm:inline">Dev Mode</span>
       </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">
+      <DrawerContent className="w-full overflow-hidden data-[swipe-direction=right]:sm:max-w-2xl data-[swipe-direction=right]:lg:max-w-4xl">
         <DrawerHeader className="pb-4">
           <DrawerTitle>{integration.schemaLabel}</DrawerTitle>
           <DrawerDescription>

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

@@ -104,17 +104,16 @@ export function EntityFiltersBar({
           return (
             <div key={filter.key} className="relative flex items-center gap-1">
               <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="outline" className="w-45 justify-between">
-                    {filter.value
-                      ? (filter.options.find((o) => o.value === filter.value)?.label ??
-                        filter.label)
-                      : `All ${filter.label}`}
+                <DropdownMenuTrigger
+                  render={<Button variant="outline" className="w-45 justify-between" />}
+                >
+                  {filter.value
+                    ? (filter.options.find((o) => o.value === filter.value)?.label ?? filter.label)
+                    : `All ${filter.label}`}
 
-                    {!filter.value && (
-                      <ChevronDown className="absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-foreground" />
-                    )}
-                  </Button>
+                  {!filter.value && (
+                    <ChevronDown className="absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-foreground" />
+                  )}
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="start">
                   <DropdownMenuRadioGroup

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

@@ -36,10 +36,8 @@ export function EntityVersionItem({
             <Badge variant="secondary">v{version.version}</Badge>
           </div>
           <Tooltip>
-            <TooltipTrigger asChild>
-              <p className="w-fit text-xs text-muted-foreground">
-                Saved {formatDistanceToNow(createdDate, { addSuffix: true })}
-              </p>
+            <TooltipTrigger render={<p className="w-fit text-xs text-muted-foreground" />}>
+              Saved {formatDistanceToNow(createdDate, { addSuffix: true })}
             </TooltipTrigger>
             <TooltipContent>{format(createdDate, 'PPpp')}</TooltipContent>
           </Tooltip>

package/dist/assets/adapters/next/templates/init/components/shared/entity-versions/entity-version-restore-dialog.tsx

@@ -48,10 +48,8 @@ export function EntityVersionRestoreDialog({
 
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
-      <AlertDialogTrigger asChild>
-        <Button variant="outline" size="sm">
-          Restore
-        </Button>
+      <AlertDialogTrigger render={<Button variant="outline" size="sm" />}>
+        Restore
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>

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

@@ -34,10 +34,8 @@ export function EntityVersionsCurrentRow({ updatedAt, author }: EntityVersionsCu
             <Badge variant="outline">Current</Badge>
           </div>
           <Tooltip>
-            <TooltipTrigger asChild>
-              <p className="w-fit text-xs text-muted-foreground">
-                Edited {formatDistanceToNow(updatedDate, { addSuffix: true })}
-              </p>
+            <TooltipTrigger render={<p className="w-fit text-xs text-muted-foreground" />}>
+              Edited {formatDistanceToNow(updatedDate, { addSuffix: true })}
             </TooltipTrigger>
             <TooltipContent>{format(updatedDate, 'PPpp')}</TooltipContent>
           </Tooltip>

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

@@ -42,7 +42,7 @@ export function EntityVersionsDrawer({
   onRestored
 }: EntityVersionsDrawerProps) {
   return (
-    <Drawer direction="right" open={open} onOpenChange={onOpenChange} modal>
+    <Drawer swipeDirection="right" open={open} onOpenChange={onOpenChange} modal>
       <DrawerContent className="h-full sm:max-w-lg">
         <DrawerHeader>
           <DrawerTitle>Versions</DrawerTitle>

package/dist/assets/adapters/next/templates/init/components/shared/media/edit-media-dialog.tsx

@@ -31,10 +31,10 @@ export function EditMediaDialog({ media, open, onOpenChange, onSaved }: EditMedi
 
   return (
     <Drawer
-      direction="right"
+      swipeDirection="right"
       open={isOpen}
       onOpenChange={handleOpenChange}
-      onAnimationEnd={(nextOpen) => {
+      onOpenChangeComplete={(nextOpen) => {
         if (nextOpen) {
           setClosingMedia(null)
           return

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

@@ -52,11 +52,11 @@ export function MediaDeleteDialog({ media, disabled = false, onDeleted }: MediaD
 
   return (
     <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button variant="destructive" disabled={disabled || isPending}>
-          <Trash2 />
-          Delete media
-        </Button>
+      <AlertDialogTrigger
+        render={<Button variant="destructive" disabled={disabled || isPending} />}
+      >
+        <Trash2 />
+        Delete media
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>