betterstart-cli 0.0.108 → 0.0.110

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

@@ -98,7 +98,7 @@
   --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);
+  --input: oklch(0.93 0 0);
   --ring: oklch(0.708 0 0);
   --chart-1: oklch(0.845 0.143 164.978);
   --chart-2: oklch(0.696 0.17 162.48);

package/dist/assets/adapters/next/templates/init/components/layouts/{admin-sidebar-branding-rsc.tsx → admin-sidebar-branding.tsx}

@@ -1,7 +1,7 @@
 import { getSetting } from '@admin/actions/settings'
 import { SidebarBranding } from './sidebar-branding'
 
-export async function SidebarBrandingRsc() {
+export async function AdminSidebarBranding() {
   const settings = await getSetting()
 
   return <SidebarBranding initialData={settings} />

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

@@ -14,7 +14,7 @@ import { adminNavigation } from '@admin/data/navigation'
 import { groupAdminNavigationItems } from '@admin/utils/navigation/sidebar'
 import { Settings, Users } from 'lucide-react'
 import { Fragment, Suspense } from 'react'
-import { SidebarBrandingRsc } from './admin-sidebar-branding-rsc'
+import { AdminSidebarBranding } from './admin-sidebar-branding'
 import { BrandingSkeleton } from './admin-sidebar-branding-skeleton'
 import { SidebarNavLink } from './admin-sidebar-nav-link'
 import { SidebarUserMenu } from './admin-sidebar-user-menu'
@@ -27,7 +27,7 @@ export function AdminSidebar(props: ComponentProps<typeof Sidebar>) {
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader className="flex h-14 w-full items-center border-t border-b border-border/80">
         <Suspense fallback={<BrandingSkeleton />}>
-          <SidebarBrandingRsc />
+          <AdminSidebarBranding />
         </Suspense>
       </SidebarHeader>
       <SidebarContent className="pt-4 pb-1">

package/dist/assets/adapters/next/templates/init/components/layouts/role-gate.tsx

@@ -0,0 +1,14 @@
+import type { UserRole } from '@admin/types/auth'
+import { requireRole } from '@admin/auth/middleware'
+
+export async function RoleGate({
+  roles,
+  children
+}: {
+  roles: readonly UserRole[]
+  children: React.ReactNode
+}) {
+  await requireRole(roles)
+
+  return <>{children}</>
+}

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

@@ -102,6 +102,7 @@ export function EditMediaDialogContent({
         </DrawerHeader>
         <Form {...form}>
           <form
+            autoComplete="off"
             id={formId}
             onSubmit={form.handleSubmit(handleSave)}
             className="flex flex-1 flex-col gap-4 overflow-y-auto px-6 pt-px pb-4"

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

@@ -2,7 +2,9 @@
 
 import * as React from 'react'
 import type { UploadFileResult } from '@admin/types'
+import type { FieldErrors } from 'react-hook-form'
 import { Card, CardContent } from '@admin/components/ui/card'
+import { Form } from '@admin/components/ui/form'
 import {
   InputGroup,
   InputGroupAddon,
@@ -15,19 +17,29 @@ import { getMediaUrlPlaceholder } from '@admin/utils/media/get-media-url-placeho
 import { cn } from '@admin/utils/shared/cn'
 import { isValidUrl } from '@admin/utils/validation/is-valid-url'
 import { Upload } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 
 interface MediaUrlImporterProps extends React.HTMLAttributes<HTMLDivElement> {
   onImportFromUrl: (url: string) => Promise<UploadFileResult>
   accept?: string
 }
 
+interface MediaUrlFormValues {
+  url: string
+}
+
 export function MediaUrlImporter({ onImportFromUrl, accept, className }: MediaUrlImporterProps) {
-  const [urlValue, setUrlValue] = React.useState('')
-  const [urlError, setUrlError] = React.useState<string | null>(null)
   const [isImporting, startImportTransition] = React.useTransition()
   const mountedRef = React.useRef(true)
   const importInFlightRef = React.useRef(false)
   const importRequestIdRef = React.useRef(0)
+  const form = useForm<MediaUrlFormValues>({
+    defaultValues: { url: '' },
+    mode: 'onSubmit',
+    reValidateMode: 'onChange'
+  })
+  const urlField = form.register('url', { required: 'Enter a direct media URL to import.' })
 
   React.useEffect(() => {
     mountedRef.current = true
@@ -42,93 +54,92 @@ export function MediaUrlImporter({ onImportFromUrl, accept, className }: MediaUr
   const urlHelpText = getMediaUrlHelpText(accept)
   const urlPlaceholder = getMediaUrlPlaceholder(accept)
 
-  const handleImport = React.useCallback(() => {
-    if (isImporting || importInFlightRef.current) return
-
-    const nextUrl = urlValue.trim()
-
-    if (!nextUrl) {
-      setUrlError('Enter a direct media URL to import.')
-      return
-    }
-
-    if (!isValidUrl(nextUrl)) {
-      setUrlError('Enter a valid HTTP or HTTPS URL.')
-      return
-    }
-
-    setUrlError(null)
-    const importRequestId = importRequestIdRef.current + 1
-    importRequestIdRef.current = importRequestId
-    importInFlightRef.current = true
+  const handleImport = React.useCallback(
+    (values: MediaUrlFormValues) => {
+      if (isImporting || importInFlightRef.current) return
 
-    startImportTransition(async () => {
-      try {
-        const result = await onImportFromUrl(nextUrl)
+      const nextUrl = values.url.trim()
 
-        if (!mountedRef.current || importRequestIdRef.current !== importRequestId) {
-          return
-        }
-
-        if (!result.success) {
-          setUrlError(result.error ?? 'Failed to import media from URL.')
-          return
-        }
+      if (!isValidUrl(nextUrl)) {
+        toast.error('Enter a valid HTTP or HTTPS URL.')
+        return
+      }
 
-        setUrlValue('')
-      } catch (error) {
-        if (!mountedRef.current || importRequestIdRef.current !== importRequestId) {
-          return
+      const importRequestId = importRequestIdRef.current + 1
+      importRequestIdRef.current = importRequestId
+      importInFlightRef.current = true
+
+      startImportTransition(async () => {
+        try {
+          const result = await onImportFromUrl(nextUrl)
+
+          if (!mountedRef.current || importRequestIdRef.current !== importRequestId) {
+            return
+          }
+
+          if (!result.success) {
+            toast.error(result.error ?? 'Failed to import media from URL.')
+            return
+          }
+
+          form.reset()
+        } catch (error) {
+          if (!mountedRef.current || importRequestIdRef.current !== importRequestId) {
+            return
+          }
+
+          toast.error(error instanceof Error ? error.message : 'Failed to import media from URL.')
+        } finally {
+          if (importRequestIdRef.current === importRequestId) {
+            importInFlightRef.current = false
+          }
         }
+      })
+    },
+    [form, isImporting, onImportFromUrl]
+  )
 
-        setUrlError(error instanceof Error ? error.message : 'Failed to import media from URL.')
-      } finally {
-        if (importRequestIdRef.current === importRequestId) {
-          importInFlightRef.current = false
-        }
-      }
-    })
-  }, [isImporting, onImportFromUrl, urlValue])
+  const handleInvalid = (errors: FieldErrors<MediaUrlFormValues>) => {
+    const message = errors.url?.message
+    toast.error(typeof message === 'string' ? message : 'Enter a direct media URL to import.')
+  }
 
   return (
     <Card className={cn('flex items-center justify-center', className)}>
       <CardContent className="h-full w-full">
         <div className="flex h-full w-full flex-col items-center justify-center gap-3 text-center">
-          <InputGroup className="mx-auto max-w-2xl bg-background">
-            <InputGroupInput
-              type="url"
-              name="url"
-              aria-label="Media URL"
-              value={urlValue}
-              placeholder={urlPlaceholder}
+          <Form {...form}>
+            <form
               autoComplete="off"
-              spellCheck={false}
-              onChange={(event) => {
-                setUrlValue(event.target.value)
-                if (urlError) setUrlError(null)
-              }}
-              onKeyDown={(event) => {
-                if (event.key === 'Enter') {
-                  event.preventDefault()
-                  void handleImport()
-                }
-              }}
-              disabled={isImporting}
-            />
-            <InputGroupAddon align="inline-end">
-              <InputGroupButton
-                type="button"
-                variant="outline"
-                onClick={() => void handleImport()}
-                disabled={isImporting}
-                aria-busy={isImporting}
-                className="h-full px-5"
-              >
-                {isImporting ? <Spinner /> : <Upload />}
-                {isImporting ? 'Importing…' : 'Import'}
-              </InputGroupButton>
-            </InputGroupAddon>
-          </InputGroup>
+              noValidate
+              onSubmit={form.handleSubmit(handleImport, handleInvalid)}
+              className="w-full"
+            >
+              <InputGroup className="mx-auto max-w-2xl bg-background">
+                <InputGroupInput
+                  type="url"
+                  aria-label="Media URL"
+                  placeholder={urlPlaceholder}
+                  autoComplete="off"
+                  spellCheck={false}
+                  {...urlField}
+                  disabled={isImporting}
+                />
+                <InputGroupAddon align="inline-end">
+                  <InputGroupButton
+                    type="submit"
+                    variant="outline"
+                    disabled={isImporting}
+                    aria-busy={isImporting}
+                    className="h-full px-5"
+                  >
+                    {isImporting ? <Spinner /> : <Upload />}
+                    {isImporting ? 'Importing…' : 'Import'}
+                  </InputGroupButton>
+                </InputGroupAddon>
+              </InputGroup>
+            </form>
+          </Form>
 
           <div className="flex w-full flex-col items-center text-center">
             <p className="text-sm text-muted-foreground">{urlHelpText}</p>

package/dist/assets/adapters/next/templates/init/components/shared/search-input.tsx

@@ -40,7 +40,11 @@ export function SearchInput({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="flex w-full items-center">
+      <form
+        autoComplete="off"
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex w-full items-center"
+      >
         <FormField
           control={form.control}
           name="search"

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

@@ -1,11 +1,11 @@
 import { ContentSkeleton } from '@admin/components/layouts/content-skeleton'
 import { Suspense } from 'react'
-import { AccountShellRsc } from './account-shell-rsc'
+import { AccountShell } from './account-shell'
 
 export default function AccountLayout({ children }: { children: React.ReactNode }) {
   return (
     <Suspense fallback={<ContentSkeleton />}>
-      <AccountShellRsc>{children}</AccountShellRsc>
+      <AccountShell>{children}</AccountShell>
     </Suspense>
   )
 }

package/dist/assets/adapters/next/templates/init/pages/{account-shell-rsc.tsx → account-shell.tsx}

@@ -6,7 +6,7 @@ import { canAccessAdmin } from '@admin/utils/auth/can-access-admin'
 import { redirect } from 'next/navigation'
 import { MinimalAccountShell } from './minimal-account-shell'
 
-export async function AccountShellRsc({ children }: { children: React.ReactNode }) {
+export async function AccountShell({ children }: { children: React.ReactNode }) {
   const session = await getSession({ disableCookieCache: true })
 
   if (!session?.user) {

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

@@ -2,7 +2,7 @@ import { requireRole, UserRole } from '@admin/auth/middleware'
 import { AdminSidebar } from '@admin/components/layouts/admin-sidebar'
 import { SidebarProvider } from '@admin/components/ui/sidebar'
 
-export async function AuthGateRsc({ children }: { children: React.ReactNode }) {
+export async function AuthGate({ children }: { children: React.ReactNode }) {
   await requireRole([UserRole.ADMIN, UserRole.EDITOR])
 
   return (

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

@@ -1,11 +1,11 @@
 import { ContentSkeleton } from '@admin/components/layouts/content-skeleton'
 import { Suspense } from 'react'
-import { AuthGateRsc } from './auth-gate-rsc'
+import { AuthGate } from './auth-gate'
 
 export default function AdminAuthLayout({ children }: { children: React.ReactNode }) {
   return (
     <Suspense fallback={<ContentSkeleton />}>
-      <AuthGateRsc>{children}</AuthGateRsc>
+      <AuthGate>{children}</AuthGate>
     </Suspense>
   )
 }

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

@@ -1,49 +1,68 @@
 'use client'
 
 import * as React from 'react'
+import type { FieldErrors } from 'react-hook-form'
 import { isEmailConfigured } from '@admin/actions/profile'
 import { authClient } from '@admin/auth/client'
 import { Button } from '@admin/components/ui/button'
 import { Card, CardContent } from '@admin/components/ui/card'
 import { Field, FieldGroup, FieldLabel } from '@admin/components/ui/field'
+import { Form } from '@admin/components/ui/form'
 import { Input } from '@admin/components/ui/input'
 import { Spinner } from '@admin/components/ui/spinner'
 import { cn } from '@admin/utils/shared/cn'
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
 import Image from 'next/image'
 import Link from 'next/link'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod/v3'
+
+const forgotPasswordSchema = z.object({
+  email: z.string().trim().min(1, 'Email is required').email('Enter a valid email address')
+})
+
+type ForgotPasswordFormValues = z.infer<typeof forgotPasswordSchema>
 
 export function ForgotPasswordForm({ className, ...props }: React.ComponentProps<'div'>) {
-  const [email, setEmail] = React.useState('')
-  const [error, setError] = React.useState<string | null>(null)
-  const [success, setSuccess] = React.useState(false)
   const [isPending, startTransition] = React.useTransition()
+  const form = useForm<ForgotPasswordFormValues>({
+    resolver: standardSchemaResolver(forgotPasswordSchema),
+    defaultValues: { email: '' },
+    mode: 'onChange',
+    reValidateMode: 'onChange'
+  })
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    setError(null)
-
+  const handleSubmit = (values: ForgotPasswordFormValues) => {
     startTransition(async () => {
       try {
         const emailReady = await isEmailConfigured()
         if (!emailReady) {
-          setError('Email delivery is not configured for this project.')
+          toast.error('Email delivery is not configured for this project.')
           return
         }
         const { error } = await authClient.requestPasswordReset({
-          email,
+          email: values.email,
           redirectTo: '/admin/reset-password'
         })
         if (error) {
-          setError(error.message || 'Failed to send reset link')
+          toast.error(error.message || 'Failed to send reset link')
           return
         }
-        setSuccess(true)
+        toast.success(
+          'If an account exists, we sent a password reset link. Check your inbox and spam folder.'
+        )
       } catch {
-        setError('Failed to send the reset link. Try again.')
+        toast.error('Failed to send the reset link. Try again.')
       }
     })
   }
 
+  const handleInvalid = (errors: FieldErrors<ForgotPasswordFormValues>) => {
+    const message = errors.email?.message
+    toast.error(typeof message === 'string' ? message : 'Enter a valid email address.')
+  }
+
   return (
     <div className={cn('flex flex-col gap-6', className)} {...props}>
       <Card className="overflow-hidden p-0">
@@ -58,21 +77,12 @@ export function ForgotPasswordForm({ className, ...props }: React.ComponentProps
             />
           </div>
           <div className="p-6 md:p-20">
-            {success ? (
-              <FieldGroup className="gap-10 pb-12">
-                <div className="flex flex-col items-start">
-                  <h1 className="text-xl font-medium">Check your email</h1>
-                  <p className="text-balance text-muted-foreground">
-                    If an account exists for {email}, we sent a password reset link. Check your
-                    inbox and spam folder.
-                  </p>
-                </div>
-                <Link href="/admin/login" className="text-sm underline-offset-4 hover:underline">
-                  Back to sign in
-                </Link>
-              </FieldGroup>
-            ) : (
-              <form onSubmit={handleSubmit}>
+            <Form {...form}>
+              <form
+                autoComplete="off"
+                noValidate
+                onSubmit={form.handleSubmit(handleSubmit, handleInvalid)}
+              >
                 <FieldGroup className="gap-10 pb-12">
                   <div className="flex flex-col items-start">
                     <h1 className="text-xl font-medium">Forgot password</h1>
@@ -81,21 +91,16 @@ export function ForgotPasswordForm({ className, ...props }: React.ComponentProps
                       enabled
                     </p>
                   </div>
-                  {error ? (
-                    <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
-                      {error}
-                    </div>
-                  ) : null}
                   <div className="flex flex-col gap-4">
                     <Field>
                       <FieldLabel htmlFor="email">Email</FieldLabel>
                       <Input
                         id="email"
                         type="email"
-                        autoComplete="email"
+                        autoComplete="off"
                         placeholder="m@example.com"
-                        value={email}
-                        onChange={(e) => setEmail(e.target.value)}
+                        aria-invalid={Boolean(form.formState.errors.email)}
+                        {...form.register('email')}
                         required
                         disabled={isPending}
                       />
@@ -115,7 +120,7 @@ export function ForgotPasswordForm({ className, ...props }: React.ComponentProps
                   </div>
                 </FieldGroup>
               </form>
-            )}
+            </Form>
           </div>
         </CardContent>
       </Card>