betterstart-cli 0.0.112 → 0.0.113

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

@@ -112,7 +112,7 @@ export function MediaUrlImporter({ onImportFromUrl, accept, className }: MediaUr
             <form
               autoComplete="off"
               noValidate
-              onSubmit={form.handleSubmit(handleImport, handleInvalid)}
+              onSubmit={(event) => form.handleSubmit(handleImport, handleInvalid)(event)}
               className="w-full"
             >
               <InputGroup className="mx-auto max-w-2xl bg-background">

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

@@ -23,9 +23,11 @@ export function useContentEditorSlashMenu(editorRef: React.RefObject<Editor | nu
   const activeSlashIndex =
     activeSlashIndexState >= filteredSlashCommands.length ? 0 : activeSlashIndexState
 
-  slashMenuRef.current = slashMenu
-  activeSlashIndexRef.current = activeSlashIndex
-  filteredSlashCommandsRef.current = filteredSlashCommands
+  React.useEffect(() => {
+    slashMenuRef.current = slashMenu
+    activeSlashIndexRef.current = activeSlashIndex
+    filteredSlashCommandsRef.current = filteredSlashCommands
+  })
 
   const updateSlashMenu = React.useCallback((nextEditor: Editor) => {
     const nextSlashMenu = getSlashMenuState(nextEditor)

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

@@ -1,5 +1,8 @@
 'use client'
 
+// oxlint-disable react/refs -- the CodeMirror widget is constructed during render and compared by
+// callback identity in `eq()`. Dropping the ref-backed callbacks would rebuild the widget DOM on
+// every render, so it needs a verified refactor.
 import * as React from 'react'
 import type { ContentEditorSelectionRequest } from '@admin/utils/editor/content-editor-selection-request'
 import type { MarkdownHeadingLevel } from '@admin/utils/editor/markdown-heading-level'
@@ -151,9 +154,12 @@ export function useContentEditorSourceMode({
   const [canUndoMarkdownChange, setCanUndoMarkdownChange] = React.useState(false)
   const [canRedoMarkdownChange, setCanRedoMarkdownChange] = React.useState(false)
   const valueRef = React.useRef(value)
-  valueRef.current = value
   const onChangeRef = React.useRef(onChange)
-  onChangeRef.current = onChange
+
+  React.useEffect(() => {
+    valueRef.current = value
+    onChangeRef.current = onChange
+  })
 
   const handleMediaSelected = React.useCallback(
     (url: string) => {

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

@@ -25,7 +25,9 @@ export function useContentEditorTableAddControls(
   const tableStateRef = React.useRef<TableAddControlsState | null>(null)
   const isEditorViewMounted = Boolean(getMountedEditorView(editor))
 
-  tableStateRef.current = tableState
+  React.useEffect(() => {
+    tableStateRef.current = tableState
+  })
 
   const setTable = React.useCallback((next: TableAddControlsState) => {
     setTableState((current) => {

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

@@ -1,5 +1,8 @@
 'use client'
 
+// oxlint-disable react/refs -- `latestMarkdownRef` is both the synchronous markdown buffer that
+// callbacks write and the value rendered as `sourceValue`. Splitting it into state changes when the
+// buffer is observable and risks the Markdown round-trip, so it needs a verified refactor.
 import * as React from 'react'
 import type { ContentEditorMode } from '@admin/utils/editor/content-editor-mode'
 import type { ContentEditorSelectionRequest } from '@admin/utils/editor/content-editor-selection-request'
@@ -75,8 +78,6 @@ export function useContentEditor({
     updateSlashMenu
   } = useContentEditorSlashMenu(editorRef)
 
-  isSlashMenuOpenRef.current = slashMenu !== null
-
   if (value !== lastValuePropRef.current) {
     lastValuePropRef.current = value
     latestMarkdownRef.current = value
@@ -173,7 +174,10 @@ export function useContentEditor({
     }
   })
 
-  editorRef.current = editor
+  React.useEffect(() => {
+    editorRef.current = editor
+    isSlashMenuOpenRef.current = slashMenu !== null
+  })
 
   const syncRichContent = React.useCallback(
     (nextValue: string = latestMarkdownRef.current, selectionOffset?: number) => {

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

@@ -89,11 +89,13 @@ export function useUpload(options: UseUploadOptions = {}): UseUploadReturn {
   const uploadAbortControllerRef = React.useRef<AbortController | null>(null)
   const progressIntervalRef = React.useRef<ReturnType<typeof setInterval> | null>(null)
   const progressResetTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
-  if (previousIsActiveRef.current !== isActive) {
-    previousIsActiveRef.current = isActive
-    activeActivityIdRef.current += 1
-  }
-  activeRef.current = isActive
+  React.useEffect(() => {
+    if (previousIsActiveRef.current !== isActive) {
+      previousIsActiveRef.current = isActive
+      activeActivityIdRef.current += 1
+    }
+    activeRef.current = isActive
+  })
 
   const clearProgressResetTimeout = React.useCallback(() => {
     if (progressResetTimeoutRef.current) {

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

@@ -32,7 +32,7 @@ import { Input } from '@admin/components/ui/input'
 import { Spinner } from '@admin/components/ui/spinner'
 import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
 import { useRouter } from 'next/navigation'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod/v3'
 
@@ -94,8 +94,8 @@ export function ProfileForm({ user }: ProfileFormProps) {
     reValidateMode: 'onChange'
   })
 
-  const emailDirty = profileForm.watch('email') !== user.email
-  const imageValue = profileForm.watch('image')
+  const emailDirty = useWatch({ control: profileForm.control, name: 'email' }) !== user.email
+  const imageValue = useWatch({ control: profileForm.control, name: 'image' })
 
   function onProfileSubmit(values: ProfileValues) {
     startProfileTransition(async () => {

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

@@ -35,7 +35,7 @@ import { webhookEventSources } from '@admin/data/webhook-events'
 import { useWebhookSubscriptions } from '@admin/hooks/use-webhooks'
 import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { useForm } from 'react-hook-form'
+import { useForm, useWatch } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod/v3'
 
@@ -81,7 +81,7 @@ export function WebhookEndpointDialog({ webhook, open, onOpenChange }: WebhookEn
       events: subscribedEvents
     }
   })
-  const events = form.watch('events')
+  const events = useWatch({ control: form.control, name: 'events' })
 
   React.useEffect(() => {
     if (!open) return

package/dist/cli.js

@@ -15626,7 +15626,14 @@ function buildUiImports(ctx) {
   if (ctx.hasSectionCardHeading) cardImports.push("CardHeader", "CardTitle");
   const formImports = [
     ctx.hasFormRoot === false ? "" : "Form",
-    ...ctx.hasFormControls === false ? [] : ["FormControl", "FormDescription", "FormField", "FormItem", "FormLabel", "FormMessage"]
+    ...ctx.hasFormControls === false ? [] : [
+      "FormControl",
+      "FormDescription",
+      "FormField",
+      "FormItem",
+      "FormLabel",
+      ctx.hasFormMessage === false ? "" : "FormMessage"
+    ]
   ].filter(Boolean);
   const uiImports = [
     `import { ${cardImports.join(", ")} } from '@admin/components/ui/card'`,
@@ -16360,7 +16367,9 @@ ${defaultValues}
     defaultValues
   })
   const defaultValuesRef = React.useRef(defaultValues)
-  defaultValuesRef.current = defaultValues
+  React.useEffect(() => {
+    defaultValuesRef.current = defaultValues
+  })
   React.useEffect(
     () => () => {
       form.reset(defaultValuesRef.current)
@@ -19575,6 +19584,7 @@ function generateForm(schema, pagesDir, options = {}) {
     tabFieldNames
   });
   const formControlFreeFieldTypes = /* @__PURE__ */ new Set(["separator", "tabs"]);
+  const formMessageFreeFieldTypes = /* @__PURE__ */ new Set(["boolean", "group", "section", "separator", "tabs"]);
   const inputFreeFieldTypes = /* @__PURE__ */ new Set([
     "boolean",
     "image",
@@ -19638,6 +19648,10 @@ function generateForm(schema, pagesDir, options = {}) {
     return false;
   };
   const contentHasRenderedIconPostfix = hasRenderedIconPostfix2(allFormFields);
+  const contentUsesFormMessage = contentHasRenderedIconPostfix || flatFields.some((field) => {
+    if (field.primaryKey || field.hidden) return false;
+    return !formMessageFreeFieldTypes.has(field.type);
+  });
   const uiImports = buildUiImports({
     hasBoolean,
     hasTextarea,
@@ -19665,6 +19679,7 @@ function generateForm(schema, pagesDir, options = {}) {
     hasFormRoot: true,
     hasButton: hasRelationship || hasSelectCombobox || hasNestedList,
     hasFormControls: contentUsesFormControls || contentHasRenderedIconPostfix,
+    hasFormMessage: contentUsesFormMessage,
     hasInput: contentUsesInput
   });
   const lucideIcons = [];
@@ -23010,6 +23025,7 @@ function generateSingleForm(schema, pagesDir, options = {}) {
     "tabs"
   ]);
   const formControlFreeFieldTypes = /* @__PURE__ */ new Set(["separator", "tabs"]);
+  const formMessageFreeFieldTypes = /* @__PURE__ */ new Set(["boolean", "group", "section", "separator", "tabs"]);
   const cardArtifacts = cardGroups.map((group2) => {
     const analysis = analyzeGroup(group2.fields);
     const groupFlatFields = group2.flatFields;
@@ -23040,6 +23056,10 @@ function generateSingleForm(schema, pagesDir, options = {}) {
       if (field.type === "list" && (!field.fields || field.fields.length === 0)) return false;
       return !formControlFreeFieldTypes.has(field.type);
     }) || hasIconPostfix;
+    const hasFormMessage = hasIconPostfix || groupFlatFields.some((field) => {
+      if (field.primaryKey || field.hidden) return false;
+      return !formMessageFreeFieldTypes.has(field.type);
+    });
     const groupUiImports = buildUiImports({
       hasBoolean: hasFieldType(group2.fields, "boolean"),
       hasTextarea: hasFieldType(group2.fields, "text"),
@@ -23065,6 +23085,7 @@ function generateSingleForm(schema, pagesDir, options = {}) {
       hasCardContent: true,
       hasSectionCardHeading: true,
       hasFormRoot: true,
+      hasFormMessage,
       hasButton: true,
       hasFormControls,
       hasInput
@@ -33067,7 +33088,12 @@ function scaffoldOxfmt(cwd, linter, adminDir) {
       "import/consistent-type-specifier-style": ["error", "prefer-top-level"]
     },
     // The generated admin vendors shadcn and Tiptap primitives whose a11y and hook shapes
-    // BetterStart owns, so the rest of the project stays fully linted.
+    // BetterStart owns, so the rest of the project stays fully linted. TanStack Table/Virtual
+    // and react-hook-form expose no React Compiler-compatible alternative to the APIs the admin
+    // is built on, so `react/incompatible-library` is scoped off there rather than per call site.
+    // Admin state that tracks Tiptap, CodeMirror, scroll position, and DOM measurements is
+    // synchronised from effects, which is what effects are for, so `react/set-state-in-effect`
+    // is scoped off there too.
     overrides: [
       {
         files: [`**/${admin}/**`, `**/(${namespace})/**`],
@@ -33076,6 +33102,8 @@ function scaffoldOxfmt(cwd, linter, adminDir) {
           "jsx-a11y/no-autofocus": "off",
           "jsx-a11y/anchor-has-content": "off",
           "react-hooks/exhaustive-deps": "off",
+          "react/incompatible-library": "off",
+          "react/set-state-in-effect": "off",
           "unicorn/no-new-array": "off",
           "unicorn/no-empty-file": "off"
         }
@@ -33083,7 +33111,8 @@ function scaffoldOxfmt(cwd, linter, adminDir) {
       {
         files: [`**/${admin}/components/ui/**`],
         rules: {
-          "react/no-multi-comp": "off"
+          "react/no-multi-comp": "off",
+          "react/set-state-in-effect": "off"
         }
       }
     ],