betterstart-cli 0.0.96 → 0.0.98

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-popover/color-highlight-popover.tsx

@@ -1,22 +1,20 @@
 'use client'
 
+import * as React from 'react'
+import type { ColorHighlightPopoverButtonProps } from './color-highlight-popover-button'
+import type { HighlightColor } from './highlight-colors'
 import type {
   ControlAvailability,
   ControlTooltip
 } from '@admin/components/custom/content-editor/tiptap-ui/control-options'
-import { Popover, PopoverContent, PopoverTrigger } from '@admin/components/ui/popover'
-// --- Hooks ---
 import type { UseColorHighlightConfig } from '@admin/hooks/content-editor/use-color-highlight'
+import { Popover, PopoverContent, PopoverTrigger } from '@admin/components/ui/popover'
 import { useColorHighlight } from '@admin/hooks/content-editor/use-color-highlight'
 import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
-import * as React from 'react'
 import { shouldHideUnavailableControl } from '../control-options'
-import {
-  ColorHighlightPopoverButton,
-  type ColorHighlightPopoverButtonProps
-} from './color-highlight-popover-button'
+import { ColorHighlightPopoverButton } from './color-highlight-popover-button'
 import { ColorHighlightPopoverContent } from './color-highlight-popover-content'
-import { DEFAULT_HIGHLIGHT_COLORS, type HighlightColor } from './highlight-colors'
+import { DEFAULT_HIGHLIGHT_COLORS } from './highlight-colors'
 
 export { ColorHighlightPopoverButton } from './color-highlight-popover-button'
 export type { ColorHighlightPopoverContentProps } from './color-highlight-popover-content'
@@ -25,13 +23,10 @@ export type { SourceColorHighlightPopoverProps } from './source-color-highlight-
 export { SourceColorHighlightPopover } from './source-color-highlight-popover'
 
 export interface ColorHighlightPopoverProps
-  extends Omit<ColorHighlightPopoverButtonProps, 'type'>,
+  extends
+    Omit<ColorHighlightPopoverButtonProps, 'type'>,
     Pick<UseColorHighlightConfig, 'editor' | 'onApplied'> {
   availability?: ControlAvailability
-  /**
-   * Optional colors to use in the highlight popover.
-   * If not provided, defaults to a predefined set of colors.
-   */
   colors?: HighlightColor[]
   onOpenChange?: (isOpen: boolean) => void
   tooltip?: ControlTooltip
@@ -91,7 +86,7 @@ export function ColorHighlightPopover({
       </PopoverTrigger>
       <PopoverContent
         aria-label="Highlight colors"
-        className="w-auto max-w-[calc(100vw-2rem)] gap-0 p-0 rounded-sm"
+        className="w-auto max-w-[calc(100vw-2rem)] gap-0 rounded-sm p-0"
       >
         <ColorHighlightPopoverContent
           editor={editor}

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-popover/highlight-color-button.tsx

@@ -1,10 +1,10 @@
 'use client'
 
+import type { HighlightButtonStyle, HighlightColor } from './highlight-colors'
+import type { Editor } from '@tiptap/react'
 import { Button } from '@admin/components/ui/button'
 import { cn } from '@admin/utils/shared/cn'
-import type { Editor } from '@tiptap/react'
 import { ColorHighlightButton, HighlightSwatch } from '../color-highlight-button'
-import type { HighlightButtonStyle, HighlightColor } from './highlight-colors'
 
 export function HighlightColorButton({
   color,

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-popover/highlight-colors.ts

@@ -1,8 +1,6 @@
-import {
-  type HighlightColor,
-  pickHighlightColorsByValue
-} from '@admin/hooks/content-editor/use-color-highlight'
 import type * as React from 'react'
+import type { HighlightColor } from '@admin/hooks/content-editor/use-color-highlight'
+import { pickHighlightColorsByValue } from '@admin/hooks/content-editor/use-color-highlight'
 
 export type HighlightButtonStyle = React.CSSProperties & {
   '--highlight-color': string

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/color-highlight-popover/source-color-highlight-popover.tsx

@@ -1,21 +1,18 @@
 'use client'
 
+import type { ColorHighlightPopoverButtonProps } from './color-highlight-popover-button'
+import type { HighlightColor } from './highlight-colors'
 import { Popover, PopoverContent, PopoverTrigger } from '@admin/components/ui/popover'
 import { HighlighterIcon } from 'lucide-react'
 import { useState } from 'react'
-import {
-  ColorHighlightPopoverButton,
-  type ColorHighlightPopoverButtonProps
-} from './color-highlight-popover-button'
+import { ColorHighlightPopoverButton } from './color-highlight-popover-button'
 import { ColorHighlightPopoverContent } from './color-highlight-popover-content'
-import { DEFAULT_HIGHLIGHT_COLORS, type HighlightColor } from './highlight-colors'
+import { DEFAULT_HIGHLIGHT_COLORS } from './highlight-colors'
 
-export interface SourceColorHighlightPopoverProps
-  extends Omit<ColorHighlightPopoverButtonProps, 'type'> {
-  /**
-   * Optional colors to use in the highlight popover.
-   * If not provided, defaults to a predefined set of colors.
-   */
+export interface SourceColorHighlightPopoverProps extends Omit<
+  ColorHighlightPopoverButtonProps,
+  'type'
+> {
   colors?: HighlightColor[]
   disabled?: boolean
   onHighlightColorSelect: (color: HighlightColor) => void
@@ -50,7 +47,7 @@ export function SourceColorHighlightPopover({
       </PopoverTrigger>
       <PopoverContent
         aria-label="Highlight colors"
-        className="w-auto max-w-[calc(100vw-2rem)] gap-0 p-0 rounded-sm"
+        className="w-auto max-w-[calc(100vw-2rem)] gap-0 rounded-sm p-0"
       >
         <ColorHighlightPopoverContent
           mode="source"

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/heading-dropdown-menu/heading-dropdown-menu-item.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { DropdownMenuItem } from '@admin/components/ui/dropdown-menu'
-import { type Level, useHeading } from '@admin/hooks/content-editor/use-heading'
+import type { Level } from '@admin/hooks/content-editor/use-heading'
 import type { Editor } from '@tiptap/react'
+import { DropdownMenuItem } from '@admin/components/ui/dropdown-menu'
+import { useHeading } from '@admin/hooks/content-editor/use-heading'
 
 export function HeadingDropdownMenuItem({
   editor,

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/heading-dropdown-menu/heading-dropdown-menu.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import type { ControlAvailability, ControlTooltip } from '../control-options'
+import type { UseHeadingDropdownMenuConfig } from '@admin/hooks/content-editor/use-heading-dropdown-menu'
 import { Button } from '@admin/components/ui/button'
 import {
   DropdownMenu,
@@ -7,20 +9,11 @@ import {
   DropdownMenuGroup,
   DropdownMenuTrigger
 } from '@admin/components/ui/dropdown-menu'
-import {
-  type UseHeadingDropdownMenuConfig,
-  useHeadingDropdownMenu
-} from '@admin/hooks/content-editor/use-heading-dropdown-menu'
+import { useHeadingDropdownMenu } from '@admin/hooks/content-editor/use-heading-dropdown-menu'
 import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
-// --- Icons ---
 import { ChevronDownIcon } from 'lucide-react'
 import { useCallback, useState } from 'react'
-import {
-  type ControlAvailability,
-  type ControlTooltip,
-  getControlTooltipTitle,
-  shouldHideUnavailableControl
-} from '../control-options'
+import { getControlTooltipTitle, shouldHideUnavailableControl } from '../control-options'
 import { HeadingDropdownMenuItem } from './heading-dropdown-menu-item'
 
 type EditorButtonProps = React.ComponentProps<typeof Button> & {
@@ -28,20 +21,13 @@ type EditorButtonProps = React.ComponentProps<typeof Button> & {
 }
 
 export interface HeadingDropdownMenuProps
-  extends Omit<EditorButtonProps, 'type'>,
+  extends
+    Omit<EditorButtonProps, 'type'>,
     Omit<UseHeadingDropdownMenuConfig, 'hideWhenUnavailable'> {
   availability?: ControlAvailability
-  /**
-   * Callback for when the dropdown opens or closes
-   */
   onOpenChange?: (isOpen: boolean) => void
 }
 
-/**
- * Dropdown menu component for selecting heading levels in a Tiptap editor.
- *
- * For custom dropdown implementations, use the `useHeadingDropdownMenu` hook instead.
- */
 export function HeadingDropdownMenu({
   editor: providedEditor,
   availability,

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/link-popover/link-button.tsx

@@ -1,12 +1,10 @@
 'use client'
 
-import {
-  type ControlTooltip,
-  getControlTooltipTitle
-} from '@admin/components/custom/content-editor/tiptap-ui/control-options'
+import type * as React from 'react'
+import type { ControlTooltip } from '@admin/components/custom/content-editor/tiptap-ui/control-options'
+import { getControlTooltipTitle } from '@admin/components/custom/content-editor/tiptap-ui/control-options'
 import { Button } from '@admin/components/ui/button'
 import { LinkIcon } from 'lucide-react'
-import type * as React from 'react'
 
 export type LinkButtonProps = React.ComponentProps<typeof Button> & {
   tooltip?: ControlTooltip

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/link-popover/link-content.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { useLinkPopover } from '@admin/hooks/content-editor/use-link-popover'
 import type { Editor } from '@tiptap/react'
+import { useLinkPopover } from '@admin/hooks/content-editor/use-link-popover'
 import { LinkMain } from './link-main'
 
 export function LinkContent({ editor }: { editor?: Editor | null }) {

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/link-popover/link-control-popover.tsx

@@ -1,11 +1,13 @@
 'use client'
 
+import type * as React from 'react'
+import type { LinkButtonProps } from './link-button'
+import type { LinkMainProps } from './link-main'
 import { Popover, PopoverContent, PopoverTrigger } from '@admin/components/ui/popover'
 import { LinkIcon } from 'lucide-react'
-import type * as React from 'react'
 import { useCallback, useState } from 'react'
-import { LinkButton, type LinkButtonProps } from './link-button'
-import { LinkMain, type LinkMainProps } from './link-main'
+import { LinkButton } from './link-button'
+import { LinkMain } from './link-main'
 
 export interface LinkControlPopoverProps extends Omit<LinkButtonProps, 'type'>, LinkMainProps {
   canSet?: boolean

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/link-popover/link-main.tsx

@@ -1,26 +1,14 @@
 'use client'
 
+import type * as React from 'react'
 import { Button } from '@admin/components/ui/button'
 import { InputGroup, InputGroupInput } from '@admin/components/ui/input-group'
 import { TrashIcon } from 'lucide-react'
-import type * as React from 'react'
 
 export interface LinkMainProps {
-  /**
-   * The URL to set for the link.
-   */
   url: string
-  /**
-   * Function to update the URL state.
-   */
   setUrl: React.Dispatch<React.SetStateAction<string | null>>
-  /**
-   * Function to set the link in the editor.
-   */
   setLink: () => void
-  /**
-   * Function to remove the link from the editor.
-   */
   removeLink: () => void
 }
 
@@ -33,7 +21,7 @@ export function LinkMain({ url, setUrl, setLink, removeLink }: LinkMainProps) {
   }
 
   return (
-    <div className="flex flex-col min-w-max items-center gap-2">
+    <div className="flex min-w-max flex-col items-center gap-2">
       <InputGroup className="h-9 min-w-64">
         <InputGroupInput
           type="url"
@@ -48,7 +36,7 @@ export function LinkMain({ url, setUrl, setLink, removeLink }: LinkMainProps) {
         />
       </InputGroup>
 
-      <div className="flex items-center gap-1 w-full">
+      <div className="flex w-full items-center gap-1">
         {url && (
           <Button type="button" onClick={removeLink} title="Remove link" variant="destructive">
             <TrashIcon />

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/link-popover/link-popover.tsx

@@ -1,19 +1,16 @@
 'use client'
 
-// --- Hooks ---
-import {
-  type UseLinkPopoverConfig,
-  useLinkPopover
-} from '@admin/hooks/content-editor/use-link-popover'
-import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
 import * as React from 'react'
 import type { LinkPopoverOpenMode } from '../control-options'
+import type { ControlAvailability } from '../control-options'
+import type { LinkButtonProps } from './link-button'
+import type { UseLinkPopoverConfig } from '@admin/hooks/content-editor/use-link-popover'
+import { useLinkPopover } from '@admin/hooks/content-editor/use-link-popover'
+import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
 import {
-  type ControlAvailability,
   shouldHideUnavailableControl,
   shouldOpenLinkPopoverFromActiveLink
 } from '../control-options'
-import type { LinkButtonProps } from './link-button'
 import { LinkControlPopover } from './link-control-popover'
 
 export { LinkButton } from './link-button'
@@ -23,12 +20,8 @@ export { LinkControlPopover } from './link-control-popover'
 export type { LinkMainProps } from './link-main'
 
 export interface LinkPopoverProps
-  extends Omit<LinkButtonProps, 'type'>,
-    Omit<UseLinkPopoverConfig, 'hideWhenUnavailable'> {
+  extends Omit<LinkButtonProps, 'type'>, Omit<UseLinkPopoverConfig, 'hideWhenUnavailable'> {
   availability?: ControlAvailability
-  /**
-   * Callback for when the popover opens or closes.
-   */
   onOpenChange?: (isOpen: boolean) => void
   openMode?: LinkPopoverOpenMode
 }
@@ -39,11 +32,6 @@ type LinkPopoverOpenState = {
   open: boolean | null
 }
 
-/**
- * Link popover component for Tiptap editors.
- *
- * For custom popover implementations, use the `useLinkPopover` hook instead.
- */
 export function LinkPopover({
   editor: providedEditor,
   availability,

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/list-dropdown-menu/list-dropdown-menu-item.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { DropdownMenuItem } from '@admin/components/ui/dropdown-menu'
-import { type ListType, useList } from '@admin/hooks/content-editor/use-list'
+import type { ListType } from '@admin/hooks/content-editor/use-list'
 import type { Editor } from '@tiptap/react'
+import { DropdownMenuItem } from '@admin/components/ui/dropdown-menu'
+import { useList } from '@admin/hooks/content-editor/use-list'
 
 export function ListDropdownMenuItem({
   editor,

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/list-dropdown-menu/list-dropdown-menu.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+import type { ControlAvailability, ControlTooltip } from '../control-options'
+import type { ListType } from '@admin/hooks/content-editor/use-list'
+import type { Editor } from '@tiptap/react'
 import { Button } from '@admin/components/ui/button'
 import {
   DropdownMenu,
@@ -7,20 +10,11 @@ import {
   DropdownMenuGroup,
   DropdownMenuTrigger
 } from '@admin/components/ui/dropdown-menu'
-// --- Hooks ---
-import type { ListType } from '@admin/hooks/content-editor/use-list'
 import { useListDropdownMenu } from '@admin/hooks/content-editor/use-list-dropdown-menu'
 import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
-import type { Editor } from '@tiptap/react'
-// --- Icons ---
 import { ChevronDownIcon } from 'lucide-react'
 import { useCallback, useState } from 'react'
-import {
-  type ControlAvailability,
-  type ControlTooltip,
-  getControlTooltipTitle,
-  shouldHideUnavailableControl
-} from '../control-options'
+import { getControlTooltipTitle, shouldHideUnavailableControl } from '../control-options'
 import { ListDropdownMenuItem } from './list-dropdown-menu-item'
 
 type EditorButtonProps = React.ComponentProps<typeof Button> & {
@@ -29,17 +23,8 @@ type EditorButtonProps = React.ComponentProps<typeof Button> & {
 
 export interface ListDropdownMenuProps extends Omit<EditorButtonProps, 'type'> {
   availability?: ControlAvailability
-  /**
-   * The Tiptap editor instance.
-   */
   editor?: Editor
-  /**
-   * The list types to display in the dropdown.
-   */
   types?: ListType[]
-  /**
-   * Callback for when the dropdown opens or closes
-   */
   onOpenChange?: (isOpen: boolean) => void
 }
 

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/mark-button/mark-button.tsx

@@ -1,22 +1,14 @@
 'use client'
 
+import type { ControlAvailability, ControlShortcut, ControlTooltip } from '../control-options'
+import type { Mark, UseMarkConfig } from '@admin/hooks/content-editor/use-mark'
 import { Badge } from '@admin/components/ui/badge'
 import { Button } from '@admin/components/ui/button'
-// --- Hooks ---
-import {
-  MARK_SHORTCUT_KEYS,
-  type Mark,
-  type UseMarkConfig,
-  useMark
-} from '@admin/hooks/content-editor/use-mark'
+import { MARK_SHORTCUT_KEYS, useMark } from '@admin/hooks/content-editor/use-mark'
 import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
-// --- Lib ---
 import { parseShortcutKeys } from '@admin/utils/editor/tiptap'
 import { useCallback } from 'react'
 import {
-  type ControlAvailability,
-  type ControlShortcut,
-  type ControlTooltip,
   getControlTooltipTitle,
   shouldHideUnavailableControl,
   shouldShowControlShortcut
@@ -27,12 +19,8 @@ type EditorButtonProps = React.ComponentProps<typeof Button> & {
 }
 
 export interface MarkButtonProps
-  extends Omit<EditorButtonProps, 'type'>,
-    Omit<UseMarkConfig, 'hideWhenUnavailable'> {
+  extends Omit<EditorButtonProps, 'type'>, Omit<UseMarkConfig, 'hideWhenUnavailable'> {
   availability?: ControlAvailability
-  /**
-   * Optional text to display alongside the icon.
-   */
   text?: string
   shortcut?: ControlShortcut
 }
@@ -47,11 +35,6 @@ export function MarkShortcutBadge({
   return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
 }
 
-/**
- * Button component for toggling marks in a Tiptap editor.
- *
- * For custom button implementations, use the `useMark` hook instead.
- */
 export function MarkButton({
   editor: providedEditor,
   availability,

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-ui/undo-redo-button/undo-redo-button.tsx

@@ -1,22 +1,14 @@
 'use client'
 
+import type { ControlAvailability, ControlShortcut, ControlTooltip } from '../control-options'
+import type { UndoRedoAction, UseUndoRedoConfig } from '@admin/hooks/content-editor/use-undo-redo'
 import { Badge } from '@admin/components/ui/badge'
 import { Button } from '@admin/components/ui/button'
 import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
-// --- Hooks ---
-import {
-  UNDO_REDO_SHORTCUT_KEYS,
-  type UndoRedoAction,
-  type UseUndoRedoConfig,
-  useUndoRedo
-} from '@admin/hooks/content-editor/use-undo-redo'
-// --- Lib ---
+import { UNDO_REDO_SHORTCUT_KEYS, useUndoRedo } from '@admin/hooks/content-editor/use-undo-redo'
 import { parseShortcutKeys } from '@admin/utils/editor/tiptap'
 import { useCallback } from 'react'
 import {
-  type ControlAvailability,
-  type ControlShortcut,
-  type ControlTooltip,
   getControlTooltipTitle,
   shouldHideUnavailableControl,
   shouldShowControlShortcut
@@ -27,12 +19,8 @@ type EditorButtonProps = React.ComponentProps<typeof Button> & {
 }
 
 export interface UndoRedoButtonProps
-  extends Omit<EditorButtonProps, 'type'>,
-    Omit<UseUndoRedoConfig, 'hideWhenUnavailable'> {
+  extends Omit<EditorButtonProps, 'type'>, Omit<UseUndoRedoConfig, 'hideWhenUnavailable'> {
   availability?: ControlAvailability
-  /**
-   * Optional text to display alongside the icon.
-   */
   text?: string
   shortcut?: ControlShortcut
 }
@@ -47,11 +35,6 @@ export function HistoryShortcutBadge({
   return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
 }
 
-/**
- * Button component for triggering undo/redo actions in a Tiptap editor.
- *
- * For custom button implementations, use the `useHistory` hook instead.
- */
 export function UndoRedoButton({
   editor: providedEditor,
   action,

package/dist/assets/shared-assets/react-admin/custom/date-picker.tsx

@@ -1,12 +1,12 @@
 'use client'
 
+import * as React from 'react'
 import { Button } from '@admin/components/ui/button'
 import { Calendar } from '@admin/components/ui/calendar'
 import { Popover, PopoverContent, PopoverTrigger } from '@admin/components/ui/popover'
 import { cn } from '@admin/utils/shared/cn'
 import { format } from 'date-fns'
 import { CalendarIcon } from 'lucide-react'
-import * as React from 'react'
 
 interface DatePickerProps {
   value?: string
@@ -14,9 +14,7 @@ interface DatePickerProps {
   disabled?: boolean
   placeholder?: string
   className?: string
-  /** Start year for the year dropdown (defaults to 1900) */
   startYear?: number
-  /** End year for the year dropdown (defaults to current year + 100) */
   endYear?: number
 }
 
@@ -39,7 +37,7 @@ export function DatePicker({
           variant="outline"
           size="lg"
           className={cn(
-            'w-full justify-start text-left font-normal pl-3!',
+            'w-full justify-start pl-3! text-left font-normal',
             { 'text-muted-foreground': !date },
             className
           )}
@@ -49,7 +47,7 @@ export function DatePicker({
           {date ? format(date, 'PPP') : <span>{placeholder}</span>}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0 overflow-hidden" align="start">
+      <PopoverContent className="w-auto overflow-hidden p-0" align="start">
         <Calendar
           mode="single"
           selected={date}

package/dist/assets/shared-assets/react-admin/custom/date-range-picker.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import * as React from 'react'
+import type { DateRange } from 'react-day-picker'
 import { Button } from '@admin/components/ui/button'
 import { Calendar } from '@admin/components/ui/calendar'
 import { Input } from '@admin/components/ui/input'
@@ -18,8 +20,6 @@ import {
 } from '@admin/utils/date/date'
 import { cn } from '@admin/utils/shared/cn'
 import { CalendarIcon, ChevronDown, CornerDownLeft } from 'lucide-react'
-import * as React from 'react'
-import type { DateRange } from 'react-day-picker'
 
 interface DateRangePickerProps {
   from?: string

package/dist/assets/shared-assets/react-admin/custom/gallery-field.tsx

@@ -1,22 +1,18 @@
 'use client'
 
+import * as React from 'react'
+import type { CarouselApi } from '@admin/components/ui/carousel'
+import type { AdminMedia } from '@admin/types'
+import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core'
 import { MediaGalleryDialog } from '@admin/components/shared/media/media-gallery-dialog'
 import { Card, CardContent, CardFooter } from '@admin/components/ui/card'
-import {
-  Carousel,
-  type CarouselApi,
-  CarouselContent,
-  CarouselItem
-} from '@admin/components/ui/carousel'
+import { Carousel, CarouselContent, CarouselItem } from '@admin/components/ui/carousel'
 import { Skeleton } from '@admin/components/ui/skeleton'
 import { useMediaByIds } from '@admin/hooks/use-media'
-import type { AdminMedia } from '@admin/types'
 import {
   closestCenter,
   DndContext,
-  type DragEndEvent,
   DragOverlay,
-  type DragStartEvent,
   KeyboardSensor,
   PointerSensor,
   useSensor,
@@ -24,7 +20,6 @@ import {
 } from '@dnd-kit/core'
 import { arrayMove, horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable'
 import { Plus } from 'lucide-react'
-import * as React from 'react'
 import { MediaField } from './media-field'
 import { MediaFieldEmptyState } from './media-field-empty-state'
 import { SortableGalleryItem } from './sortable-gallery-item'
@@ -196,8 +191,8 @@ export function GalleryField({
                 {canAdd && !disabled ? (
                   <CarouselItem className="basis-[168px] pl-3 sm:basis-[184px]">
                     <Card className="h-full" onClick={() => setOpen(true)}>
-                      <CardContent className="p-2 flex flex-col cursor-pointer">
-                        <div className="flex size-full bg-background border border-border rounded-sm aspect-square overflow-hidden text-muted-foreground hover:text-foreground transition-colors items-center flex-col justify-center gap-1">
+                      <CardContent className="flex cursor-pointer flex-col p-2">
+                        <div className="flex aspect-square size-full flex-col items-center justify-center gap-1 overflow-hidden rounded-sm border border-border bg-background text-muted-foreground transition-colors hover:text-foreground">
                           <Plus className="size-6" strokeWidth={1.5} />
                           <span className="text-sm">Add Images</span>
                         </div>
@@ -228,8 +223,8 @@ export function GalleryField({
                             />
                           ) : (
                             <Card>
-                              <CardContent className="p-2 flex flex-col">
-                                <div className="flex size-full bg-background border border-border rounded-sm aspect-square overflow-hidden">
+                              <CardContent className="flex flex-col p-2">
+                                <div className="flex aspect-square size-full overflow-hidden rounded-sm border border-border bg-background">
                                   <Skeleton className="size-full" />
                                 </div>
                               </CardContent>
@@ -262,8 +257,8 @@ export function GalleryField({
                   />
                 ) : (
                   <Card>
-                    <CardContent className="p-2 flex flex-col">
-                      <div className="flex size-full bg-background border border-border rounded-sm aspect-square overflow-hidden">
+                    <CardContent className="flex flex-col p-2">
+                      <div className="flex aspect-square size-full overflow-hidden rounded-sm border border-border bg-background">
                         <Skeleton className="size-full" />
                       </div>
                     </CardContent>