betterstart-cli 0.0.111 → 0.0.113

package/dist/cli.js

@@ -2788,7 +2788,6 @@ var REACT_ADMIN_DEPS = [
   "@tiptap/starter-kit",
   "@uiw/codemirror-theme-github",
   "@uiw/react-codemirror",
-  "cmdk",
   "embla-carousel-react",
   "input-otp",
   "katex",
@@ -15574,17 +15573,10 @@ function renderBuildUiImportsImportsDetailsTemplate() {
   SelectTrigger
 } from '@admin/components/ui/select'`;
 }
-function renderBuildUiImportsImportsDetailsBranchTemplate({ join }) {
+function renderComboboxImports({ join }) {
   return `import {
   ${join}
-} from '@admin/components/ui/command'`;
-}
-function renderBuildUiImportsImportsDetailsBranchBodyTemplate() {
-  return `import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from '@admin/components/ui/popover'`;
+} from '@admin/components/ui/combobox'`;
 }
 function renderTooltipImports() {
   return `import {
@@ -15615,10 +15607,8 @@ function renderBuildUiImportsRenderer(request) {
       return renderBuildUiImportsImportsTemplate(request.props);
     case "renderBuildUiImportsImportsDetailsTemplate":
       return renderBuildUiImportsImportsDetailsTemplate();
-    case "renderBuildUiImportsImportsDetailsBranchTemplate":
-      return renderBuildUiImportsImportsDetailsBranchTemplate(request.props);
-    case "renderBuildUiImportsImportsDetailsBranchBodyTemplate":
-      return renderBuildUiImportsImportsDetailsBranchBodyTemplate();
+    case "renderComboboxImports":
+      return renderComboboxImports(request.props);
     case "renderTooltipImports":
       return renderTooltipImports();
     case "renderTabsImports":
@@ -15636,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'`,
@@ -15668,26 +15665,24 @@ function buildUiImports(ctx) {
     );
   }
   if (ctx.hasRelationship || ctx.hasSelectCombobox) {
-    const commandImports = [
-      "Command",
-      "CommandEmpty",
-      "CommandGroup",
-      "CommandInput",
-      "CommandItem",
-      "CommandList",
-      ctx.hasCreatableSelect ? "CommandSeparator" : ""
+    const comboboxImports = [
+      "Combobox",
+      "ComboboxContent",
+      "ComboboxEmpty",
+      "ComboboxInput",
+      "ComboboxItem",
+      "ComboboxList",
+      ctx.hasCreatableSelect ? "ComboboxSeparator" : "",
+      "ComboboxTrigger"
     ].filter(Boolean);
     uiImports.push(
       renderBuildUiImportsRenderer({
-        kind: "renderBuildUiImportsImportsDetailsBranchTemplate",
+        kind: "renderComboboxImports",
         props: {
-          join: commandImports.join(",\n  ")
+          join: comboboxImports.join(",\n  ")
         }
       })
     );
-    uiImports.push(
-      renderBuildUiImportsRenderer({ kind: "renderBuildUiImportsImportsDetailsBranchBodyTemplate" })
-    );
   }
   if (ctx.hasMultiSelect) {
     uiImports.push("import { Badge } from '@admin/components/ui/badge'");
@@ -16372,7 +16367,9 @@ ${defaultValues}
     defaultValues
   })
   const defaultValuesRef = React.useRef(defaultValues)
-  defaultValuesRef.current = defaultValues
+  React.useEffect(() => {
+    defaultValuesRef.current = defaultValues
+  })
   React.useEffect(
     () => () => {
       form.reset(defaultValuesRef.current)
@@ -18149,69 +18146,69 @@ function renderMultiRelationshipFieldActionButtonsTemplate({
   return `${indent}<FormField
 ${indent}  control={form.control}
 ${indent}  name="${fieldName}"
-${indent}  render={({ field: formField }) => (
-${indent}    <FormItem${formItemProps2}>
-${indent}      ${labelWithDescription2}
-${indent}      <Popover open={${fieldName}Open} onOpenChange={set${toPascalCase2}Open}>
-${indent}        <PopoverTrigger
-${indent}          render={
-${indent}            <FormControl>
-${indent}              <Button
-${indent}              variant="outline"
-${indent}              role="combobox"
+${indent}  render={({ field: formField }) => {
+${indent}    const options = (${dataArray} ?? [])
+${indent}      .filter((item) => item.id !== null)
+${indent}      .map((item) => {
+${indent}        const displayName = ${displayField}
+${indent}        const secondaryDisplayName = ${secondaryDisplayField}
+${indent}        return {
+${indent}          value: item.id,
+${indent}          label: displayName,
+${indent}          secondaryLabel: secondaryDisplayName
+${indent}        }
+${indent}      })
+${indent}    const selectedValues = formField.value ?? []
+${indent}    const selectedOptions = options.filter((option) => selectedValues.includes(option.value))
+${indent}    return (
+${indent}      <FormItem${formItemProps2}>
+${indent}        ${labelWithDescription2}
+${indent}        <Combobox
+${indent}          multiple
+${indent}          items={options}
+${indent}          value={selectedOptions}
+${indent}          open={${fieldName}Open}
+${indent}          onOpenChange={set${toPascalCase2}Open}
+${indent}          onValueChange={(nextOptions) => {
+${indent}            const nextValue = nextOptions.map((option) => option.value)
+${defaultValueFromHandlerContent}
+${indent}          }}
+${indent}        >
+${indent}          <FormControl>
+${indent}            <ComboboxTrigger
+${indent}              render={<Button variant="outline" disabled={isPending} />}
 ${indent}              className={cn("w-full justify-between", {
-${indent}                "text-muted-foreground": !formField.value || formField.value.length === 0
+${indent}                "text-muted-foreground": selectedOptions.length === 0
 ${indent}              })}
-${indent}              disabled={isPending}
-${indent}              >
-${indent}              {(formField.value?.length ?? 0) > 0
-${indent}                ? \`\${formField.value?.length ?? 0} selected\`
-${indent}                : "Select ${toLowerCase}"}
-${indent}                <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
-${indent}              </Button>
-${indent}            </FormControl>
-${indent}          }
-${indent}        />
-${indent}        <PopoverContent className="w-full p-0" align="start">
-${indent}          <Command>
-${indent}            <CommandInput placeholder="Search ${toLowerCase}..." />
-${indent}            <CommandList>
-${indent}              <CommandEmpty>No ${relSingular} found.</CommandEmpty>
-${indent}              <CommandGroup>
-${indent}                {${dataArray}?.filter((item) => item.id !== null).map((item) => {
-${indent}                  const displayName = ${displayField}
-${indent}                  const secondaryDisplayName = ${secondaryDisplayField}
-${indent}                  const isSelected = formField.value?.includes(item.id) || false
-${indent}                  return (
-${indent}                    <CommandItem
-${indent}                      key={item.id}
-${indent}                      value={displayName}
-${indent}                      onSelect={() => {
-${indent}                        const current = formField.value || []
-${defaultValueFromHandlerContent}
-${indent}                      }}
-${indent}                    >
-${indent}                      <Check className={cn("size-4", {
-${indent}                        "opacity-100": isSelected,
-${indent}                        "opacity-0": !isSelected
-${indent}                      })} />
-${indent}                      <span className="flex min-w-0 flex-col text-left">
-${indent}                        <span className="truncate">{displayName}</span>
-${indent}                        {secondaryDisplayName ? (
-${indent}                          <span className="truncate text-xs text-muted-foreground">{secondaryDisplayName}</span>
-${indent}                        ) : null}
-${indent}                      </span>
-${indent}                    </CommandItem>
-${indent}                  )
-${indent}                })}
-${indent}              </CommandGroup>
-${indent}            </CommandList>
-${indent}          </Command>
-${indent}        </PopoverContent>
-${indent}      </Popover>
-${indent}      <FormMessage />
-${indent}    </FormItem>
-${indent}  )}
+${indent}            >
+${indent}              <span className="truncate">
+${indent}                {selectedOptions.length > 0
+${indent}                  ? \`\${selectedOptions.length} selected\`
+${indent}                  : "Select ${toLowerCase}"}
+${indent}              </span>
+${indent}            </ComboboxTrigger>
+${indent}          </FormControl>
+${indent}          <ComboboxContent align="start">
+${indent}            <ComboboxInput placeholder="Search ${toLowerCase}..." showTrigger={false} />
+${indent}            <ComboboxEmpty>No ${relSingular} found.</ComboboxEmpty>
+${indent}            <ComboboxList>
+${indent}              {(option) => (
+${indent}                <ComboboxItem key={option.value} value={option}>
+${indent}                  <span className="flex min-w-0 flex-col text-left">
+${indent}                    <span className="truncate">{option.label}</span>
+${indent}                    {option.secondaryLabel ? (
+${indent}                      <span className="truncate text-xs text-muted-foreground">{option.secondaryLabel}</span>
+${indent}                    ) : null}
+${indent}                  </span>
+${indent}                </ComboboxItem>
+${indent}              )}
+${indent}            </ComboboxList>
+${indent}          </ComboboxContent>
+${indent}        </Combobox>
+${indent}        <FormMessage />
+${indent}      </FormItem>
+${indent}    )
+${indent}  }}
 ${indent}/>`;
 }
 
@@ -18229,13 +18226,8 @@ function renderMultiRelationshipField(field, indent, label, hintJSX, displayFiel
     dataArray,
     displayField,
     secondaryDisplayField,
-    defaultValueFromHandlerContent: defaultValueFromHandler ? `${indent}                        const nextValue = isSelected
-${indent}                          ? current.filter((id: string) => id !== item.id)
-${indent}                          : [...current, item.id]
-${indent}                        ${defaultValueFromHandler}(nextValue)
-${indent}                        formField.onChange(nextValue)` : `${indent}                        formField.onChange(isSelected
-${indent}                          ? current.filter((id: string) => id !== item.id)
-${indent}                          : [...current, item.id])`
+    defaultValueFromHandlerContent: defaultValueFromHandler ? `${indent}            ${defaultValueFromHandler}(nextValue)
+${indent}            formField.onChange(nextValue)` : `${indent}            formField.onChange(nextValue)`
   });
 }
 
@@ -18256,71 +18248,64 @@ function renderSingleRelationshipFieldActionButtonsTemplate({
   return `${indent}<FormField
 ${indent}  control={form.control}
 ${indent}  name="${fieldName}"
-${indent}  render={({ field: formField }) => (
-${indent}    <FormItem${formItemProps2}>
-${indent}      ${labelWithDescription2}
-${indent}      <Popover open={${fieldName}Open} onOpenChange={set${toPascalCase2}Open}>
-${indent}        <PopoverTrigger
-${indent}          render={
-${indent}            <FormControl>
-${indent}              <Button
-${indent}              variant="outline"
-${indent}              role="combobox"
+${indent}  render={({ field: formField }) => {
+${indent}    const options = (${dataArray} ?? [])
+${indent}      .filter((item) => item.id !== null)
+${indent}      .map((item) => {
+${indent}        const displayName = ${displayField}
+${indent}        const secondaryDisplayName = ${secondaryDisplayField}
+${indent}        return {
+${indent}          value: String(item.id),
+${indent}          label: displayName,
+${indent}          secondaryLabel: secondaryDisplayName
+${indent}        }
+${indent}      })
+${indent}    const selectedOption = options.find((option) => option.value === formField.value) ?? null
+${indent}    return (
+${indent}      <FormItem${formItemProps2}>
+${indent}        ${labelWithDescription2}
+${indent}        <Combobox
+${indent}          items={options}
+${indent}          value={selectedOption}
+${indent}          open={${fieldName}Open}
+${indent}          onOpenChange={set${toPascalCase2}Open}
+${indent}          onValueChange={(option) => {
+${defaultValueFromHandlerContent}${indent}            formField.onChange(option?.value ?? '')
+${indent}          }}
+${indent}        >
+${indent}          <FormControl>
+${indent}            <ComboboxTrigger
+${indent}              render={<Button variant="outline" disabled={isPending} />}
 ${indent}              className={cn("w-full justify-between", {
 ${indent}                "text-muted-foreground": !formField.value
 ${indent}              })}
-${indent}              disabled={isPending}
-${indent}              >
-${indent}              {formField.value
-${indent}                ? (() => {
-${indent}                    const item = ${dataArray}?.find((item) => item.id !== null && String(item.id) === formField.value)
-${indent}                    return item ? (${displayField}) : "Select ${toLowerCase}"
-${indent}                  })()
-${indent}                : "Select ${toLowerCase}"}
-${indent}                <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
-${indent}              </Button>
-${indent}            </FormControl>
-${indent}          }
-${indent}        />
-${indent}        <PopoverContent className="w-full p-0" align="start">
-${indent}          <Command>
-${indent}            <CommandInput placeholder="Search ${toLowerCase}..." />
-${indent}            <CommandList>
-${indent}              <CommandEmpty>No ${relSingular} found.</CommandEmpty>
-${indent}              <CommandGroup>
-${indent}                {${dataArray}?.filter((item) => item.id !== null).map((item) => {
-${indent}                  const displayName = ${displayField}
-${indent}                  const secondaryDisplayName = ${secondaryDisplayField}
-${indent}                  return (
-${indent}                    <CommandItem
-${indent}                      key={item.id}
-${indent}                      value={displayName}
-${indent}                      onSelect={() => {
-${defaultValueFromHandlerContent}${indent}                        formField.onChange(String(item.id))
-${indent}                        set${toPascalCase2}Open(false)
-${indent}                      }}
-${indent}                    >
-${indent}                      <Check className={cn("size-4", {
-${indent}                        "opacity-100": formField.value === String(item.id),
-${indent}                        "opacity-0": formField.value !== String(item.id)
-${indent}                      })} />
-${indent}                      <span className="flex min-w-0 flex-col text-left">
-${indent}                        <span className="truncate">{displayName}</span>
-${indent}                        {secondaryDisplayName ? (
-${indent}                          <span className="truncate text-xs text-muted-foreground">{secondaryDisplayName}</span>
-${indent}                        ) : null}
-${indent}                      </span>
-${indent}                    </CommandItem>
-${indent}                  )
-${indent}                })}
-${indent}              </CommandGroup>
-${indent}            </CommandList>
-${indent}          </Command>
-${indent}        </PopoverContent>
-${indent}      </Popover>
-${indent}      <FormMessage />
-${indent}    </FormItem>
-${indent}  )}
+${indent}            >
+${indent}              <span className="truncate">
+${indent}                {selectedOption ? selectedOption.label : "Select ${toLowerCase}"}
+${indent}              </span>
+${indent}            </ComboboxTrigger>
+${indent}          </FormControl>
+${indent}          <ComboboxContent align="start">
+${indent}            <ComboboxInput placeholder="Search ${toLowerCase}..." showTrigger={false} />
+${indent}            <ComboboxEmpty>No ${relSingular} found.</ComboboxEmpty>
+${indent}            <ComboboxList>
+${indent}              {(option) => (
+${indent}                <ComboboxItem key={option.value} value={option}>
+${indent}                  <span className="flex min-w-0 flex-col text-left">
+${indent}                    <span className="truncate">{option.label}</span>
+${indent}                    {option.secondaryLabel ? (
+${indent}                      <span className="truncate text-xs text-muted-foreground">{option.secondaryLabel}</span>
+${indent}                    ) : null}
+${indent}                  </span>
+${indent}                </ComboboxItem>
+${indent}              )}
+${indent}            </ComboboxList>
+${indent}          </ComboboxContent>
+${indent}        </Combobox>
+${indent}        <FormMessage />
+${indent}      </FormItem>
+${indent}    )
+${indent}  }}
 ${indent}/>`;
 }
 
@@ -18338,7 +18323,7 @@ function renderSingleRelationshipField(field, indent, label, hintJSX, displayFie
     toLowerCase: label.toLowerCase(),
     relSingular,
     secondaryDisplayField,
-    defaultValueFromHandlerContent: defaultValueFromHandler ? `${indent}                        ${defaultValueFromHandler}(String(item.id))
+    defaultValueFromHandlerContent: defaultValueFromHandler ? `${indent}            ${defaultValueFromHandler}(option?.value ?? '')
 ` : ""
   });
 }
@@ -18534,7 +18519,7 @@ function renderCreatableSelectFieldActionButtonsTemplate({
 ${indent}  control={form.control}
 ${indent}  name="${fieldName}"
 ${indent}  render={({ field: formField }) => {
-${indent}    const selectedOption = ${optionsVar}.find((option) => option.value === formField.value)
+${indent}    const selectedOption = ${optionsVar}.find((option) => option.value === formField.value) ?? null
 ${indent}    const createLabel = ${searchVar}.trim()
 ${indent}    const canCreateOption =
 ${indent}      createLabel.length > 0 &&
@@ -18547,76 +18532,58 @@ ${indent}      )
 ${indent}    return (
 ${indent}      <FormItem${formItemProps2}>
 ${indent}        ${labelWithDescription2}
-${indent}        <Popover open={${openVar}} onOpenChange={${setOpenVar}}>
-${indent}          <PopoverTrigger
-${indent}            render={
-${indent}              <FormControl>
-${indent}                <Button
-${indent}                type="button"
-${indent}                variant="outline"
-${indent}                role="combobox"
-${indent}                aria-expanded={${openVar}}
-${indent}                className={cn("w-full justify-between", {
-${indent}                  "text-muted-foreground": !selectedOption
-${indent}                })}
-${indent}                disabled={isPending}
-${indent}                >
-${indent}                  <span className="truncate">{selectedOption?.label ?? ${stringify}}</span>
-${indent}                  <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
-${indent}                </Button>
-${indent}              </FormControl>
-${indent}            }
-${indent}          />
-${indent}          <PopoverContent className="w-(--anchor-width) p-0" align="start">
-${indent}            <Command>
-${indent}              <CommandInput
-${indent}                placeholder="Search ${lowerLabel}..."
-${indent}                value={${searchVar}}
-${indent}                onValueChange={${setSearchVar}}
-${indent}              />
-${indent}              <CommandList>
-${indent}                <CommandEmpty>No ${lowerLabel} found.</CommandEmpty>
-${indent}                <CommandGroup>
-${indent}                  {${optionsVar}.map((option) => (
-${indent}                    <CommandItem
-${indent}                      key={option.value}
-${indent}                      value={\`\${option.label} \${option.value}\`}
-${indent}                      onSelect={() => {
-${defaultValueFromHandlerContent}${indent}                        formField.onChange(option.value)
-${indent}                        ${setSearchVar}('')
-${indent}                        ${setOpenVar}(false)
-${indent}                      }}
-${indent}                    >
-${indent}                      <Check className={cn("size-4", {
-${indent}                        "opacity-100": formField.value === option.value,
-${indent}                        "opacity-0": formField.value !== option.value
-${indent}                      })} />
-${indent}                      <span className="truncate">{option.label}</span>
-${indent}                    </CommandItem>
-${indent}                  ))}
-${indent}                </CommandGroup>
-${indent}              </CommandList>
-${indent}              {canCreateOption ? (
-${indent}                <>
-${indent}                  <CommandSeparator />
-${indent}                  <div className="p-1">
-${indent}                    <Button
-${indent}                      type="button"
-${indent}                      variant="ghost"
-${indent}                      className="w-full justify-start"
-${indent}                      disabled={${pendingVar}}
-${indent}                      aria-busy={${pendingVar}}
-${indent}                      onClick={() => ${createHandler}(createLabel)}
-${indent}                    >
-${indent}                      <Plus className="size-4" />
-${indent}                      {${pendingVar} ? 'Creating\u2026' : \`Create "\${createLabel}"\`}
-${indent}                    </Button>
-${indent}                  </div>
-${indent}                </>
-${indent}              ) : null}
-${indent}            </Command>
-${indent}          </PopoverContent>
-${indent}        </Popover>
+${indent}        <Combobox
+${indent}          items={${optionsVar}}
+${indent}          value={selectedOption}
+${indent}          open={${openVar}}
+${indent}          onOpenChange={${setOpenVar}}
+${indent}          inputValue={${searchVar}}
+${indent}          onInputValueChange={${setSearchVar}}
+${indent}          onValueChange={(option) => {
+${defaultValueFromHandlerContent}${indent}            formField.onChange(option?.value ?? '')
+${indent}            ${setSearchVar}('')
+${indent}          }}
+${indent}        >
+${indent}          <FormControl>
+${indent}            <ComboboxTrigger
+${indent}              render={<Button type="button" variant="outline" disabled={isPending} />}
+${indent}              className={cn("w-full justify-between", {
+${indent}                "text-muted-foreground": !selectedOption
+${indent}              })}
+${indent}            >
+${indent}              <span className="truncate">{selectedOption?.label ?? ${stringify}}</span>
+${indent}            </ComboboxTrigger>
+${indent}          </FormControl>
+${indent}          <ComboboxContent align="start">
+${indent}            <ComboboxInput placeholder="Search ${lowerLabel}..." showTrigger={false} />
+${indent}            <ComboboxEmpty>No ${lowerLabel} found.</ComboboxEmpty>
+${indent}            <ComboboxList>
+${indent}              {(option) => (
+${indent}                <ComboboxItem key={option.value} value={option}>
+${indent}                  <span className="truncate">{option.label}</span>
+${indent}                </ComboboxItem>
+${indent}              )}
+${indent}            </ComboboxList>
+${indent}            {canCreateOption ? (
+${indent}              <>
+${indent}                <ComboboxSeparator />
+${indent}                <div className="p-1">
+${indent}                  <Button
+${indent}                    type="button"
+${indent}                    variant="ghost"
+${indent}                    className="w-full justify-start"
+${indent}                    disabled={${pendingVar}}
+${indent}                    aria-busy={${pendingVar}}
+${indent}                    onClick={() => ${createHandler}(createLabel)}
+${indent}                  >
+${indent}                    <Plus className="size-4" />
+${indent}                    {${pendingVar} ? 'Creating\u2026' : \`Create "\${createLabel}"\`}
+${indent}                  </Button>
+${indent}                </div>
+${indent}              </>
+${indent}            ) : null}
+${indent}          </ComboboxContent>
+${indent}        </Combobox>
 ${indent}        <FormMessage />
 ${indent}      </FormItem>
 ${indent}    )
@@ -18653,7 +18620,7 @@ function renderCreatableSelectField(field, indent, label, hintJSX, context) {
     stringify: JSON.stringify(placeholder),
     lowerLabel,
     setSearchVar,
-    defaultValueFromHandlerContent: defaultValueFromHandler ? `${indent}                        ${defaultValueFromHandler}(option.value)
+    defaultValueFromHandlerContent: defaultValueFromHandler ? `${indent}            ${defaultValueFromHandler}(option?.value ?? '')
 ` : "",
     pendingVar,
     createHandler
@@ -18668,17 +18635,14 @@ function renderMultiSelectFieldStaticOptionsTemplate({
   return `const staticOptions = ${staticOptions}
 ${indent}    const options = staticOptions`;
 }
-function renderMultiSelectFieldContentTemplate({
+function renderMultiSelectFieldSearchBindingTemplate({
   indent,
-  lowerLabel,
   searchVar,
   setSearchVar
 }) {
-  return `<CommandInput
-${indent}                placeholder="Search ${lowerLabel}..."
-${indent}                value={${searchVar}}
-${indent}                onValueChange={${setSearchVar}}
-${indent}              />`;
+  return `
+${indent}          inputValue={${searchVar}}
+${indent}          onInputValueChange={${setSearchVar}}`;
 }
 function renderMultiSelectFieldCreateLabelTemplate({
   indent,
@@ -18701,29 +18665,28 @@ function renderMultiSelectFieldActionButtonsTemplate({
   createHandler
 }) {
   return `
-${indent}              {canCreateOption ? (
-${indent}                <>
-${indent}                  <CommandSeparator />
-${indent}                  <div className="p-1">
-${indent}                    <Button
-${indent}                      type="button"
-${indent}                      variant="ghost"
-${indent}                      className="w-full justify-start"
-${indent}                      disabled={${pendingVar}}
-${indent}                      aria-busy={${pendingVar}}
-${indent}                      onClick={() => ${createHandler}(createLabel)}
-${indent}                    >
-${indent}                      <Plus className="size-4" />
-${indent}                      {${pendingVar} ? 'Creating\u2026' : \`Create "\${createLabel}"\`}
-${indent}                    </Button>
-${indent}                  </div>
-${indent}                </>
-${indent}              ) : null}`;
+${indent}            {canCreateOption ? (
+${indent}              <>
+${indent}                <ComboboxSeparator />
+${indent}                <div className="p-1">
+${indent}                  <Button
+${indent}                    type="button"
+${indent}                    variant="ghost"
+${indent}                    className="w-full justify-start"
+${indent}                    disabled={${pendingVar}}
+${indent}                    aria-busy={${pendingVar}}
+${indent}                    onClick={() => ${createHandler}(createLabel)}
+${indent}                  >
+${indent}                    <Plus className="size-4" />
+${indent}                    {${pendingVar} ? 'Creating\u2026' : \`Create "\${createLabel}"\`}
+${indent}                  </Button>
+${indent}                </div>
+${indent}              </>
+${indent}            ) : null}`;
 }
 function renderMultiSelectFieldActionButtonsSerializedValueTemplate({
   indent,
   fieldName,
-  optionsId,
   optionsDeclaration,
   createState,
   previewLimit,
@@ -18732,7 +18695,7 @@ function renderMultiSelectFieldActionButtonsSerializedValueTemplate({
   openVar,
   setOpenVar,
   stringify,
-  searchInput,
+  searchBinding,
   lowerLabel,
   defaultValueFromHandlerContent,
   clearSearch,
@@ -18757,89 +18720,69 @@ ${indent}      : []
 ${indent}    return (
 ${indent}      <FormItem${formItemProps2}>
 ${indent}        ${labelWithDescription2}
-${indent}        <Popover open={${openVar}} onOpenChange={${setOpenVar}}>
-${indent}          <PopoverTrigger
-${indent}            render={
-${indent}              <FormControl>
-${indent}                <Button
-${indent}                  type="button"
-${indent}                  variant="outline"
-${indent}                  role="combobox"
-${indent}                  aria-expanded={${openVar}}
-${indent}                  aria-controls="${optionsId}"
-${indent}                  className={cn("w-full justify-between gap-2", {
-${indent}                    "text-muted-foreground": selectedOptions.length === 0
-${indent}                  })}
-${indent}                  disabled={isPending}
-${indent}                >
-${indent}                <span className="flex min-w-0 flex-1 items-center gap-2 text-left">
-${indent}                  {selectedOptions.length > 0 ? (
-${indent}                    <>
-${indent}                      <span className="truncate">
-${indent}                        {visibleSelectedOptions.map((option) => option.label).join(', ')}
-${indent}                      </span>
-${indent}                      {hiddenSelectedOptions.length > 0 ? (
-${indent}                        <Tooltip>
-${indent}                          <TooltipTrigger
-${indent}                            render={<Badge variant="outline" className="h-5 shrink-0 tabular-nums" />}
-${indent}                          >
-${indent}                              {'+'}
-${indent}                              {hiddenSelectedOptions.length}{' '}
-${indent}                              {hiddenSelectedOptions.length === 1 ? 'other' : 'others'}
-${indent}                          </TooltipTrigger>
-${indent}                          <TooltipContent align="center" side="bottom" className="max-w-60 w-full">
-${indent}                            <div className="space-y-1">
-${indent}                              {hiddenSelectedOptions.map((option) => (
-${indent}                                <div key={option.value} className="truncate">
-${indent}                                  {option.label}
-${indent}                                </div>
-${indent}                              ))}
-${indent}                            </div>
-${indent}                          </TooltipContent>
-${indent}                        </Tooltip>
-${indent}                      ) : null}
-${indent}                    </>
-${indent}                  ) : (
-${indent}                    <span className="truncate">{${stringify}}</span>
-${indent}                  )}
-${indent}                </span>
-${indent}                <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
-${indent}                </Button>
-${indent}              </FormControl>
-${indent}            }
-${indent}          />
-${indent}          <PopoverContent id="${optionsId}" className="w-(--anchor-width) p-0" align="start">
-${indent}            <Command>
-${indent}              ${searchInput}
-${indent}              <CommandList>
-${indent}                <CommandEmpty>No ${lowerLabel} found.</CommandEmpty>
-${indent}                <CommandGroup>
-${indent}                  {options.map((option) => {
-${indent}                    const isSelected = selectedValues.includes(option.value)
-${indent}                    return (
-${indent}                      <CommandItem
-${indent}                        key={option.value}
-${indent}                        value={\`\${option.label} \${option.value}\`}
-${indent}                        onSelect={() => {
-${indent}                          const nextValues = isSelected
-${indent}                            ? selectedValues.filter((value: string) => value !== option.value)
-${indent}                            : [...selectedValues, option.value]
-${defaultValueFromHandlerContent}${indent}                          formField.onChange(nextValues)${clearSearch}
-${indent}                        }}
-${indent}                      >
-${indent}                        <Check className={cn("size-4", {
-${indent}                          "opacity-100": isSelected,
-${indent}                          "opacity-0": !isSelected
-${indent}                        })} />
-${indent}                        <span className="truncate">{option.label}</span>
-${indent}                      </CommandItem>
-${indent}                    )
-${indent}                  })}
-${indent}                </CommandGroup>
-${indent}              </CommandList>${createAction}
-${indent}            </Command>
-${indent}          </PopoverContent>
-${indent}        </Popover>
+${indent}        <Combobox
+${indent}          multiple
+${indent}          items={options}
+${indent}          value={selectedOptions}
+${indent}          open={${openVar}}
+${indent}          onOpenChange={${setOpenVar}}${searchBinding}
+${indent}          onValueChange={(nextOptions) => {
+${indent}            const nextValues = nextOptions.map((option) => option.value)
+${defaultValueFromHandlerContent}${indent}            formField.onChange(nextValues)${clearSearch}
+${indent}          }}
+${indent}        >
+${indent}          <FormControl>
+${indent}            <ComboboxTrigger
+${indent}              render={<Button type="button" variant="outline" disabled={isPending} />}
+${indent}              className={cn("w-full justify-between gap-2", {
+${indent}                "text-muted-foreground": selectedOptions.length === 0
+${indent}              })}
+${indent}            >
+${indent}              <span className="flex min-w-0 flex-1 items-center gap-2 text-left">
+${indent}                {selectedOptions.length > 0 ? (
+${indent}                  <>
+${indent}                    <span className="truncate">
+${indent}                      {visibleSelectedOptions.map((option) => option.label).join(', ')}
+${indent}                    </span>
+${indent}                    {hiddenSelectedOptions.length > 0 ? (
+${indent}                      <Tooltip>
+${indent}                        <TooltipTrigger
+${indent}                          render={<Badge variant="outline" className="h-5 shrink-0 tabular-nums" />}
+${indent}                        >
+${indent}                            {'+'}
+${indent}                            {hiddenSelectedOptions.length}{' '}
+${indent}                            {hiddenSelectedOptions.length === 1 ? 'other' : 'others'}
+${indent}                        </TooltipTrigger>
+${indent}                        <TooltipContent align="center" side="bottom" className="max-w-60 w-full">
+${indent}                          <div className="space-y-1">
+${indent}                            {hiddenSelectedOptions.map((option) => (
+${indent}                              <div key={option.value} className="truncate">
+${indent}                                {option.label}
+${indent}                              </div>
+${indent}                            ))}
+${indent}                          </div>
+${indent}                        </TooltipContent>
+${indent}                      </Tooltip>
+${indent}                    ) : null}
+${indent}                  </>
+${indent}                ) : (
+${indent}                  <span className="truncate">{${stringify}}</span>
+${indent}                )}
+${indent}              </span>
+${indent}            </ComboboxTrigger>
+${indent}          </FormControl>
+${indent}          <ComboboxContent align="start">
+${indent}            <ComboboxInput placeholder="Search ${lowerLabel}..." showTrigger={false} />
+${indent}            <ComboboxEmpty>No ${lowerLabel} found.</ComboboxEmpty>
+${indent}            <ComboboxList>
+${indent}              {(option) => (
+${indent}                <ComboboxItem key={option.value} value={option}>
+${indent}                  <span className="truncate">{option.label}</span>
+${indent}                </ComboboxItem>
+${indent}              )}
+${indent}            </ComboboxList>${createAction}
+${indent}          </ComboboxContent>
+${indent}        </Combobox>
 ${indent}        <FormMessage />
 ${indent}      </FormItem>
 ${indent}    )
@@ -18850,8 +18793,8 @@ function renderMultiSelectFieldRenderer(request) {
   switch (request.kind) {
     case "renderMultiSelectFieldStaticOptionsTemplate":
       return renderMultiSelectFieldStaticOptionsTemplate(request.props);
-    case "renderMultiSelectFieldContentTemplate":
-      return renderMultiSelectFieldContentTemplate(request.props);
+    case "renderMultiSelectFieldSearchBindingTemplate":
+      return renderMultiSelectFieldSearchBindingTemplate(request.props);
     case "renderMultiSelectFieldCreateLabelTemplate":
       return renderMultiSelectFieldCreateLabelTemplate(request.props);
     case "renderMultiSelectFieldActionButtonsTemplate":
@@ -18878,7 +18821,6 @@ function renderMultiSelectField(field, indent, label, hintJSX, context) {
   const placeholder = field.placeholder || `Select ${label.toLowerCase()}`;
   const previewLimit = Math.max(1, Math.floor(field.previewLimit ?? 1));
   const lowerLabel = label.toLowerCase();
-  const optionsId = `${context.schemaName ? `${toKebabCase(singularize(context.schemaName))}-` : ""}${toKebabCase(field.name)}-options`;
   const optionsDeclaration = isCreatable ? `const options = ${optionsVar}` : renderMultiSelectFieldRenderer({
     kind: "renderMultiSelectFieldStaticOptionsTemplate",
     props: {
@@ -18886,15 +18828,14 @@ function renderMultiSelectField(field, indent, label, hintJSX, context) {
       indent
     }
   });
-  const searchInput = isCreatable ? renderMultiSelectFieldRenderer({
-    kind: "renderMultiSelectFieldContentTemplate",
+  const searchBinding = isCreatable ? renderMultiSelectFieldRenderer({
+    kind: "renderMultiSelectFieldSearchBindingTemplate",
     props: {
       indent,
-      lowerLabel,
       searchVar,
       setSearchVar
     }
-  }) : `<CommandInput placeholder="Search ${lowerLabel}..." />`;
+  }) : "";
   const createState = isCreatable ? renderMultiSelectFieldRenderer({
     kind: "renderMultiSelectFieldCreateLabelTemplate",
     props: {
@@ -18911,13 +18852,12 @@ function renderMultiSelectField(field, indent, label, hintJSX, context) {
     }
   }) : "";
   const clearSearch = isCreatable ? `
-${indent}                        ${setSearchVar}('')` : "";
+${indent}            ${setSearchVar}('')` : "";
   return renderMultiSelectFieldRenderer({
     kind: "renderMultiSelectFieldActionButtonsSerializedValueTemplate",
     props: {
       indent,
       fieldName: field.name,
-      optionsId,
       optionsDeclaration,
       createState,
       previewLimit,
@@ -18930,9 +18870,9 @@ ${indent}                        ${setSearchVar}('')` : "";
       openVar,
       setOpenVar,
       stringify: JSON.stringify(placeholder),
-      searchInput,
+      searchBinding,
       lowerLabel,
-      defaultValueFromHandlerContent: defaultValueFromHandler ? `${indent}                          ${defaultValueFromHandler}(nextValues)
+      defaultValueFromHandlerContent: defaultValueFromHandler ? `${indent}            ${defaultValueFromHandler}(nextValues)
 ` : "",
       clearSearch,
       createAction
@@ -19644,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",
@@ -19707,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,
@@ -19734,6 +19679,7 @@ function generateForm(schema, pagesDir, options = {}) {
     hasFormRoot: true,
     hasButton: hasRelationship || hasSelectCombobox || hasNestedList,
     hasFormControls: contentUsesFormControls || contentHasRenderedIconPostfix,
+    hasFormMessage: contentUsesFormMessage,
     hasInput: contentUsesInput
   });
   const lucideIcons = [];
@@ -19743,7 +19689,6 @@ function generateForm(schema, pagesDir, options = {}) {
     }
   };
   addLucideIcons(...sectionHeadingIconNames, ...contentTabIconNames);
-  if (hasRelationship || hasSelectCombobox) addLucideIcons("Check", "ChevronsUpDown");
   if (hasCreatableSelect) addLucideIcons("Plus");
   if (hasNestedList) {
     addLucideIcons("Plus", "X");
@@ -23080,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;
@@ -23110,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"),
@@ -23135,6 +23085,7 @@ function generateSingleForm(schema, pagesDir, options = {}) {
       hasCardContent: true,
       hasSectionCardHeading: true,
       hasFormRoot: true,
+      hasFormMessage,
       hasButton: true,
       hasFormControls,
       hasInput
@@ -23166,7 +23117,6 @@ function generateSingleForm(schema, pagesDir, options = {}) {
       }
     };
     addLucideIcons(...collectTabIconNames(group2.fields));
-    if (hasSelectCombobox) addLucideIcons("Check", "ChevronsUpDown");
     if (hasCreatableSelect || hasNestedList) addLucideIcons("Plus");
     if (hasNestedList) addLucideIcons("X");
     const relationshipImports = Array.from(
@@ -33138,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})/**`],
@@ -33147,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"
         }
@@ -33154,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"
         }
       }
     ],