betterstart-cli 0.0.110 → 0.0.112

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",
@@ -2849,9 +2848,7 @@ var STATIC_CUSTOM_DEPENDENCIES = {
     "use-content-editor",
     "use-content-editor-table-add-controls",
     "use-content-editor-source-mode",
-    "use-content-editor-mobile-toolbar",
     "use-content-editor-slash-menu",
-    "use-mobile",
     "tiptap",
     "tiptap-utils"
   ],
@@ -2935,11 +2932,6 @@ var STATIC_CUSTOM_DEPENDENCIES = {
     "tiptap-utils"
   ],
   "content-editor/media-gallery-block": ["media-field"],
-  "content-editor/mobile-toolbar-content": [
-    "content-editor/math-popover",
-    "content-editor/use-tiptap-editor",
-    "tiptap-utils"
-  ],
   "content-editor/selection-bubble-menu": ["content-editor/math-popover"],
   "content-editor/slash-command-menu": ["content-editor-slash-commands-utils", "tiptap-utils"],
   "content-editor/source-mode": [
@@ -2986,7 +2978,6 @@ var TIPTAP_TEMPLATE_DEPENDENCIES = [
   "use-blockquote",
   "use-code-block",
   "use-color-highlight",
-  "content-editor/use-is-breakpoint",
   "content-editor/use-menu-navigation",
   "content-editor/use-tiptap-editor",
   "use-content-editor-table-add-controls",
@@ -4690,7 +4681,7 @@ ${errorMessageLine2}
 
 // adapters/next/generators/form-pipeline/form-component-shared/input-class.ts
 function inputClass(height) {
-  const base = "h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm";
+  const base = "h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50";
   return height === "fill" ? `${base} flex-1` : base;
 }
 
@@ -5112,7 +5103,7 @@ function generateNumberFieldJSX(name, label, placeholder, hintJSX, requiredStar,
 
 // adapters/next/generators/form-pipeline/form-component-shared/textarea-class.ts
 function textareaClass(height) {
-  const base = "min-h-24 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm";
+  const base = "min-h-24 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50";
   return height === "fill" ? `${base} flex-1` : base;
 }
 
@@ -5346,7 +5337,7 @@ function renderFieldsJSX(fields) {
     if (f.type === "group" && f.fields) {
       const cols = f.columns || 2;
       const innerJSX = renderFieldsJSX(f.fields);
-      const groupJSX = `        <div className="grid grid-cols-1 md:grid-cols-${cols} gap-5">
+      const groupJSX = `        <div className="grid grid-cols-${cols} gap-5">
 ${innerJSX}
         </div>`;
       return f.showWhen ? wrapShowWhen(f, groupJSX) : groupJSX;
@@ -7199,7 +7190,7 @@ export function ${pascal}SubmissionDrawer({
 
   return (
     <Drawer swipeDirection="right" open={open} onOpenChange={onOpenChange} modal>
-      <DrawerContent className="h-full w-full overflow-hidden data-[swipe-direction=right]:sm:max-w-xl">
+      <DrawerContent className="h-full w-full overflow-hidden data-[swipe-direction=right]:max-w-xl">
         <DrawerHeader>
           <DrawerTitle>${label} Submission</DrawerTitle>
           <DrawerDescription>{description}</DrawerDescription>
@@ -15030,30 +15021,7 @@ function generateDatabase(schema, dbDir, options = {}, relatedSchemas = /* @__PU
   };
 }
 
-// adapters/next/templates/renderers/generators/edit-page.ts
-function renderEditPageShellTemplate({
-  singular,
-  kebabSingular
-}) {
-  return `import * as React from 'react'
-import { Edit${singular}PageContent } from './edit-${kebabSingular}-page-content'
-import { Edit${singular}PageSkeleton } from './edit-${kebabSingular}-page-skeleton'
-
-interface PageProps {
-  params: Promise<{
-    id: string
-  }>
-}
-
-export default function Edit${singular}Page({ params }: PageProps) {
-  return (
-    <React.Suspense fallback={<Edit${singular}PageSkeleton />}>
-      <Edit${singular}PageContent params={params} />
-    </React.Suspense>
-  )
-}
-`;
-}
+// adapters/next/templates/renderers/generators/edit-page-content.ts
 function renderEditPageContentTemplate({
   singular,
   actionImportPath,
@@ -15076,22 +15044,30 @@ export async function Edit${singular}PageContent({ params }: { params: Promise<{
 }
 `;
 }
-function renderEditPageFiles({
+
+// adapters/next/templates/renderers/generators/edit-page.ts
+function renderEditPageTemplate({
   singular,
-  actionImportPath,
-  kebabName,
-  kebabSingular,
-  camelSingular
+  kebabSingular
 }) {
-  return {
-    page: renderEditPageShellTemplate({ singular, kebabSingular }),
-    content: renderEditPageContentTemplate({
-      singular,
-      actionImportPath,
-      kebabName,
-      camelSingular
-    })
-  };
+  return `import * as React from 'react'
+import { Edit${singular}PageContent } from './edit-${kebabSingular}-page-content'
+import { Edit${singular}PageSkeleton } from './edit-${kebabSingular}-page-skeleton'
+
+interface PageProps {
+  params: Promise<{
+    id: string
+  }>
+}
+
+export default function Edit${singular}Page({ params }: PageProps) {
+  return (
+    <React.Suspense fallback={<Edit${singular}PageSkeleton />}>
+      <Edit${singular}PageContent params={params} />
+    </React.Suspense>
+  )
+}
+`;
 }
 
 // adapters/next/generators/edit-page.ts
@@ -15103,11 +15079,11 @@ function generateEditPage(schema, pagesDir, options = {}) {
   const kebabSingular = toKebabCase(singular);
   const actionImportPath = resolveSchemaActionImportPath(schema.name, options.outputNamespace);
   const displayNouns = resolveDisplayNouns(schema);
-  const { page, content } = renderEditPageFiles({
+  const page = renderEditPageTemplate({ singular: Singular, kebabSingular });
+  const content = renderEditPageContentTemplate({
     singular: Singular,
     actionImportPath,
     kebabName,
-    kebabSingular,
     camelSingular
   });
   const skeleton = buildLoadingSkeletonSource(`Edit${Singular}PageSkeleton`, displayNouns.singular);
@@ -15597,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 {
@@ -15638,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":
@@ -15691,26 +15658,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'");
@@ -16042,15 +16007,15 @@ ${join}
 }
 function renderFormLayoutDetailsTemplate() {
   return `className={initialData?.id != null
-                  ? 'lg:sticky lg:top-32 space-y-4 pb-4'
-                  : 'lg:sticky lg:top-14 space-y-4 pb-4'}`;
+                  ? 'sticky top-32 space-y-4 pb-4'
+                  : 'sticky top-14 space-y-4 pb-4'}`;
 }
 function renderFormCardContentGridTemplate({
   tabSidebarEntriesGrid,
   tabMainFieldsJsx,
   sidebarColumn
 }) {
-  return `      <div className="grid grid-cols-1 ${tabSidebarEntriesGrid}h-full min-h-0 gap-4 items-stretch">
+  return `      <div className="grid ${tabSidebarEntriesGrid} h-full min-h-0 gap-4 items-stretch">
         <div className="h-full min-h-0 min-w-0">
           <Card className="min-h-0 min-w-0 h-full">
             <CardContent className="space-y-5 gap-0 h-full min-h-0">
@@ -16066,7 +16031,7 @@ function renderFormLayoutDetailsBranchTemplate() {
               className={cn(
                 'grid grid-cols-1 gap-4 items-start h-full',
                 {
-                  'lg:grid-cols-[1fr_360px]': hasVisibleSidebarFields
+                  'grid-cols-[1fr_360px]': hasVisibleSidebarFields
                 }
               )}
             >`;
@@ -16519,7 +16484,7 @@ function renderFormLayoutDetailsBranchBodyTemplate({
   return `      {initialData?.id != null && (
         <div
           className={cn(
-            'sticky z-100 flex flex-col gap-1 px-4 bg-background h-14 xl:flex-row xl:items-center xl:justify-between top-14 transition-shadow overflow-x-clip',
+            'sticky z-100 flex flex-row items-center justify-between gap-1 px-4 bg-background h-14 top-14 transition-shadow overflow-x-clip',
             {
               'shadow-modal/2': hasScrolled,
               'border-b border-border/80': !hasScrolled
@@ -18172,69 +18137,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}/>`;
 }
 
@@ -18252,13 +18217,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)`
   });
 }
 
@@ -18279,71 +18239,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}/>`;
 }
 
@@ -18361,7 +18314,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 ?? '')
 ` : ""
   });
 }
@@ -18557,7 +18510,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 &&
@@ -18570,76 +18523,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}    )
@@ -18676,7 +18611,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
@@ -18691,17 +18626,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,
@@ -18724,29 +18656,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,
@@ -18755,7 +18686,7 @@ function renderMultiSelectFieldActionButtonsSerializedValueTemplate({
   openVar,
   setOpenVar,
   stringify,
-  searchInput,
+  searchBinding,
   lowerLabel,
   defaultValueFromHandlerContent,
   clearSearch,
@@ -18780,89 +18711,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}    )
@@ -18873,8 +18784,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":
@@ -18901,7 +18812,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: {
@@ -18909,15 +18819,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: {
@@ -18934,13 +18843,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,
@@ -18953,9 +18861,9 @@ ${indent}                        ${setSearchVar}('')` : "";
       openVar,
       setOpenVar,
       stringify: JSON.stringify(placeholder),
-      searchInput,
+      searchBinding,
       lowerLabel,
-      defaultValueFromHandlerContent: defaultValueFromHandler ? `${indent}                          ${defaultValueFromHandler}(nextValues)
+      defaultValueFromHandlerContent: defaultValueFromHandler ? `${indent}            ${defaultValueFromHandler}(nextValues)
 ` : "",
       clearSearch,
       createAction
@@ -19409,7 +19317,7 @@ function buildEntityFormLayout({
     return renderEntityFormContentRenderer({
       kind: "renderFormContentClassNameTemplate",
       props: {
-        optionsScrollableClassName: options.scrollable ? 'className="relative h-fit max-h-full space-y-4 overflow-y-auto pb-4 lg:sticky lg:top-0"' : showMetadataWidget ? renderEntityFormContentRenderer({ kind: "renderFormLayoutDetailsTemplate" }) : 'className="lg:sticky lg:top-14 space-y-4 pb-4"',
+        optionsScrollableClassName: options.scrollable ? 'className="relative h-fit max-h-full space-y-4 overflow-y-auto pb-4 sticky top-0"' : showMetadataWidget ? renderEntityFormContentRenderer({ kind: "renderFormLayoutDetailsTemplate" }) : 'className="sticky top-14 space-y-4 pb-4"',
         join: cards.join("\n")
       }
     });
@@ -19435,7 +19343,7 @@ function buildEntityFormLayout({
     return renderEntityFormContentRenderer({
       kind: "renderFormCardContentGridTemplate",
       props: {
-        tabSidebarEntriesGrid: tabSidebarEntries.length > 0 ? "lg:grid-cols-[1fr_360px] " : "",
+        tabSidebarEntriesGrid: tabSidebarEntries.length > 0 ? "grid-cols-[1fr_360px]" : "grid-cols-1",
         tabMainFieldsJsx: tabMainFieldsJSX,
         sidebarColumn
       }
@@ -19491,7 +19399,7 @@ function buildEntityFormLayout({
   const sidebarVisibilityState = shouldGuardSidebarByTab ? `
   const hasVisibleSidebarFields = ${sidebarTabNames.map((tabName) => `activeTab === ${JSON.stringify(tabName)}`).join(" || ")}
 ` : "";
-  const formGridOpen = shouldGuardSidebarByTab ? renderEntityFormContentRenderer({ kind: "renderFormLayoutDetailsBranchTemplate" }) : `            <div className="grid grid-cols-1 ${hasSidebarFields ? "lg:grid-cols-[1fr_360px] " : ""}gap-4 items-start h-full">`;
+  const formGridOpen = shouldGuardSidebarByTab ? renderEntityFormContentRenderer({ kind: "renderFormLayoutDetailsBranchTemplate" }) : `            <div className="grid ${hasSidebarFields ? "grid-cols-[1fr_360px]" : "grid-cols-1"} gap-4 items-start h-full">`;
   const sidebarCardJSX = !hasSidebarFields ? "" : shouldGuardSidebarByTab ? renderEntityFormContentRenderer({
     kind: "renderFormContentSidebarColumnTemplate",
     props: {
@@ -19766,7 +19674,6 @@ function generateForm(schema, pagesDir, options = {}) {
     }
   };
   addLucideIcons(...sectionHeadingIconNames, ...contentTabIconNames);
-  if (hasRelationship || hasSelectCombobox) addLucideIcons("Check", "ChevronsUpDown");
   if (hasCreatableSelect) addLucideIcons("Plus");
   if (hasNestedList) {
     addLucideIcons("Plus", "X");
@@ -23189,7 +23096,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(
@@ -31816,10 +31722,6 @@ function scaffoldComponents({ cwd, config }) {
     "hooks/content-editor/use-table-button.ts",
     readTemplate("hooks/content-editor/use-table-button.ts")
   );
-  write(
-    "hooks/content-editor/use-content-editor-mobile-toolbar.ts",
-    readTemplate("hooks/content-editor/use-content-editor-mobile-toolbar.ts")
-  );
   write(
     "hooks/content-editor/use-content-editor-slash-menu.ts",
     readTemplate("hooks/content-editor/use-content-editor-slash-menu.ts")
@@ -31829,10 +31731,6 @@ function scaffoldComponents({ cwd, config }) {
     "hooks/content-editor/use-heading-dropdown-menu.ts",
     readTemplate("hooks/content-editor/use-heading-dropdown-menu.ts")
   );
-  write(
-    "hooks/content-editor/use-is-breakpoint.ts",
-    readTemplate("hooks/content-editor/use-is-breakpoint.ts")
-  );
   write(
     "hooks/content-editor/use-link-popover.ts",
     readTemplate("hooks/content-editor/use-link-popover.ts")
@@ -31861,7 +31759,6 @@ function scaffoldComponents({ cwd, config }) {
   write("hooks/use-audit-log.ts", readTemplate("hooks/use-audit-log.ts"));
   write("hooks/use-users.ts", readTemplate("hooks/use-users.ts"));
   write("hooks/use-webhooks.ts", readTemplate("hooks/use-webhooks.ts"));
-  write("hooks/use-mobile.ts", readTemplate("hooks/use-mobile.ts"));
   write("hooks/use-failed-image-url.ts", readTemplate("hooks/use-failed-image-url.ts"));
   write("hooks/use-media.ts", readTemplate("hooks/use-media.ts"));
   write("hooks/use-entity-versions.ts", readTemplate("hooks/use-entity-versions.ts"));
@@ -36500,7 +36397,7 @@ var TEMPLATE_REGISTRY = {
   "role-gate": {
     relPath: "components/layouts/role-gate.tsx",
     content: () => readTemplate("components/layouts/role-gate.tsx"),
-    dependencies: ["auth-roles-utils", "auth-session"]
+    dependencies: ["auth-session", "auth-types"]
   },
   "page-header": {
     relPath: "components/shared/page-header.tsx",
@@ -36766,7 +36663,6 @@ var TEMPLATE_REGISTRY = {
       "content-editor-editor-view-utils",
       "content-editor-table-bubble-utils",
       "use-content-editor-slash-menu",
-      "use-mobile",
       "tiptap",
       "tiptap-utils",
       "content-editor/media-gallery-block",
@@ -36776,11 +36672,7 @@ var TEMPLATE_REGISTRY = {
   "use-content-editor-media-insertion": {
     relPath: "hooks/content-editor/use-content-editor-media-insertion.ts",
     content: () => readTemplate("hooks/content-editor/use-content-editor-media-insertion.ts"),
-    dependencies: [
-      "content-editor/use-is-breakpoint",
-      "content-editor/use-tiptap-editor",
-      "tiptap-utils"
-    ]
+    dependencies: ["content-editor/use-tiptap-editor", "tiptap-utils"]
   },
   "use-blockquote": {
     relPath: "hooks/content-editor/use-blockquote.ts",
@@ -36795,11 +36687,7 @@ var TEMPLATE_REGISTRY = {
   "use-color-highlight": {
     relPath: "hooks/content-editor/use-color-highlight.ts",
     content: () => readTemplate("hooks/content-editor/use-color-highlight.ts"),
-    dependencies: [
-      "content-editor/use-is-breakpoint",
-      "content-editor/use-tiptap-editor",
-      "tiptap-utils"
-    ]
+    dependencies: ["content-editor/use-tiptap-editor", "tiptap-utils"]
   },
   "use-heading": {
     relPath: "hooks/content-editor/use-heading.ts",
@@ -36846,20 +36734,11 @@ var TEMPLATE_REGISTRY = {
     content: () => readTemplate("hooks/content-editor/use-table-button.ts"),
     dependencies: ["content-editor-table-input-utils", "tiptap-utils"]
   },
-  "use-content-editor-mobile-toolbar": {
-    relPath: "hooks/content-editor/use-content-editor-mobile-toolbar.ts",
-    content: () => readTemplate("hooks/content-editor/use-content-editor-mobile-toolbar.ts"),
-    dependencies: ["use-mobile"]
-  },
   "use-content-editor-slash-menu": {
     relPath: "hooks/content-editor/use-content-editor-slash-menu.ts",
     content: () => readTemplate("hooks/content-editor/use-content-editor-slash-menu.ts"),
     dependencies: ["content-editor-slash-commands-utils", "tiptap-utils"]
   },
-  "content-editor/use-is-breakpoint": {
-    relPath: "hooks/content-editor/use-is-breakpoint.ts",
-    content: () => readTemplate("hooks/content-editor/use-is-breakpoint.ts")
-  },
   "content-editor/use-menu-navigation": {
     relPath: "hooks/content-editor/use-menu-navigation.ts",
     content: () => readTemplate("hooks/content-editor/use-menu-navigation.ts")
@@ -36891,10 +36770,6 @@ var TEMPLATE_REGISTRY = {
     content: () => readTemplate("hooks/use-webhooks.ts"),
     dependencies: ["webhooks-action", "form-settings-action"]
   },
-  "use-mobile": {
-    relPath: "hooks/use-mobile.ts",
-    content: () => readTemplate("hooks/use-mobile.ts")
-  },
   "use-failed-image-url": {
     relPath: "hooks/use-failed-image-url.ts",
     content: () => readTemplate("hooks/use-failed-image-url.ts")
@@ -38117,7 +37992,7 @@ var TEMPLATE_REGISTRY = {
     relPath: "app/(admin)/admin/(account)/profile/profile-page-content.tsx",
     content: () => readTemplate("pages/profile/profile-page-content.tsx"),
     base: "cwd",
-    dependencies: ["auth-roles-utils", "auth-session", "page-header", "profile-form"]
+    dependencies: ["auth-session", "auth-types", "page-header", "profile-form"]
   },
   "profile-page-skeleton": {
     relPath: "app/(admin)/admin/(account)/profile/profile-page-skeleton.tsx",
@@ -38246,8 +38121,7 @@ var TEMPLATE_REGISTRY = {
     content: () => readTemplate("pages/settings/forms/forms-settings-page.tsx"),
     base: "cwd",
     dependencies: [
-      "auth-roles-utils",
-      "auth-session",
+      "auth-types",
       "role-gate",
       "forms-settings-page-skeleton",
       "forms-settings-page-content"
@@ -38299,13 +38173,7 @@ var TEMPLATE_REGISTRY = {
     relPath: "app/(admin)/admin/(authenticated)/settings/webhooks/page.tsx",
     content: () => readTemplate("pages/settings/webhooks/webhooks-page.tsx"),
     base: "cwd",
-    dependencies: [
-      "auth-roles-utils",
-      "auth-session",
-      "role-gate",
-      "webhooks-page-skeleton",
-      "webhooks-page-content"
-    ]
+    dependencies: ["auth-types", "role-gate", "webhooks-page-skeleton", "webhooks-page-content"]
   },
   "webhooks-page-skeleton": {
     relPath: "app/(admin)/admin/(authenticated)/settings/webhooks/webhooks-page-skeleton.tsx",
@@ -38366,8 +38234,7 @@ var TEMPLATE_REGISTRY = {
     content: () => readTemplate("pages/settings/webhooks/webhooks-logs-page.tsx"),
     base: "cwd",
     dependencies: [
-      "auth-roles-utils",
-      "auth-session",
+      "auth-types",
       "role-gate",
       "webhooks-logs-page-content",
       "webhooks-page-skeleton"
@@ -39055,13 +38922,7 @@ var TEMPLATE_REGISTRY = {
     relPath: "app/(admin)/admin/(authenticated)/settings/audit-log/page.tsx",
     content: () => readTemplate("pages/settings/audit-log/audit-log-page.tsx"),
     base: "cwd",
-    dependencies: [
-      "auth-roles-utils",
-      "auth-session",
-      "role-gate",
-      "audit-log-page-content",
-      "audit-log-page-skeleton"
-    ]
+    dependencies: ["auth-types", "role-gate", "audit-log-page-content", "audit-log-page-skeleton"]
   },
   "audit-log-page-skeleton": {
     relPath: "app/(admin)/admin/(authenticated)/settings/audit-log/audit-log-page-skeleton.tsx",