betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/utils/validation/validation.ts

@@ -0,0 +1,114 @@
+export interface FileValidationConfig {
+  maxSizeInBytes?: number
+  allowedTypes?: string[]
+  maxFiles?: number
+}
+
+export interface FileValidationError {
+  filename: string
+  error: string
+}
+
+export interface FileValidationResult {
+  valid: boolean
+  errors: FileValidationError[]
+}
+
+function isFileTypeAllowed(file: File, allowedTypes: string[]): boolean {
+  for (const type of allowedTypes) {
+    if (type.endsWith('/*')) {
+      const prefix = type.slice(0, -1)
+      if (file.type.startsWith(prefix)) return true
+    } else if (type.startsWith('.')) {
+      if (file.name.toLowerCase().endsWith(type.toLowerCase())) return true
+    } else {
+      if (file.type === type) return true
+    }
+  }
+  return false
+}
+
+/**
+ * Validate an array of files against size, type, and count constraints.
+ */
+export function validateFiles(
+  files: File[],
+  config: FileValidationConfig = {}
+): FileValidationResult {
+  const { maxSizeInBytes, allowedTypes, maxFiles } = config
+
+  const errors: FileValidationError[] = []
+
+  if (typeof maxFiles === 'number' && maxFiles > 0 && files.length > maxFiles) {
+    errors.push({
+      filename: '',
+      error: `Too many files. Maximum is ${maxFiles}.`
+    })
+  }
+
+  for (const file of files) {
+    if (typeof maxSizeInBytes === 'number' && maxSizeInBytes > 0 && file.size > maxSizeInBytes) {
+      const maxMB = Math.round(maxSizeInBytes / (1024 * 1024))
+      errors.push({
+        filename: file.name,
+        error: `File exceeds maximum size of ${maxMB}MB.`
+      })
+    }
+
+    if (allowedTypes && allowedTypes.length > 0 && !isFileTypeAllowed(file, allowedTypes)) {
+      errors.push({
+        filename: file.name,
+        error: `File type "${file.type || 'unknown'}" is not allowed.`
+      })
+    }
+  }
+
+  return { valid: errors.length === 0, errors }
+}
+
+/**
+ * Format bytes to a human-readable string.
+ */
+export function formatFileSize(
+  bytes: number,
+  options: {
+    bytesUnit?: 'B' | 'Bytes'
+    precision?: number
+    trimTrailingZeros?: boolean
+  } = {}
+): string {
+  const { bytesUnit = 'B', precision = 1, trimTrailingZeros = false } = options
+
+  if (bytes === 0) return `0 ${bytesUnit}`
+  const units = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(1024))
+  units[0] = bytesUnit
+
+  const value = (bytes / 1024 ** i).toFixed(i === 0 ? 0 : precision)
+  return `${trimTrailingZeros ? Number.parseFloat(value) : value} ${units[i]}`
+}
+
+/**
+ * Check if a string is a valid URL.
+ */
+export function isValidUrl(str: string): boolean {
+  try {
+    new URL(str)
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Slugify a string for use in URLs.
+ */
+export function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\s_]+/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+}

package/dist/assets/adapters/next/templates/init/utils/webhook/webhook.ts

@@ -0,0 +1,28 @@
+/**
+ * Send payload to webhook URL (fire-and-forget, non-blocking)
+ * @param webhookUrl - The webhook URL to send data to
+ * @param payload - The form data to send as URL-encoded
+ */
+export function sendWebhook(
+  webhookUrl: string | null | undefined,
+  payload: Record<string, unknown>
+): void {
+  if (!webhookUrl) return // Fire-and-forget: runs in background, doesn't block
+  ;(async () => {
+    try {
+      const formData = new URLSearchParams()
+      for (const [key, value] of Object.entries(payload)) {
+        if (value === null || value === undefined) continue
+        const stringValue = typeof value === 'object' ? JSON.stringify(value) : String(value)
+        formData.append(key, stringValue)
+      }
+      await fetch(webhookUrl, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: formData.toString()
+      })
+    } catch (error) {
+      console.error('Webhook failed:', error)
+    }
+  })()
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/editor-toolbar.tsx

@@ -0,0 +1,25 @@
+import { cn } from '@admin/utils/shared/cn'
+import type { ReactNode } from 'react'
+
+export function EditorToolbar({
+  ariaLabel,
+  children,
+  className
+}: {
+  ariaLabel: string
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      role="toolbar"
+      aria-label={ariaLabel}
+      className={cn(
+        'flex items-center gap-1 overflow-x-auto border-border bg-card sticky top-0 z-10 min-h-12 w-full overscroll-x-contain border-b px-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-[480px]:absolute max-[480px]:top-auto max-[480px]:h-[calc(2.75rem+env(safe-area-inset-bottom,0px))] max-[480px]:flex-nowrap max-[480px]:justify-start max-[480px]:border-t max-[480px]:border-b-0 max-[480px]:pb-[env(safe-area-inset-bottom,0px)]',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/horizontal-rule-button.tsx

@@ -0,0 +1,22 @@
+import { Button } from '@admin/components/ui/button'
+import type { Editor } from '@tiptap/core'
+import { Minus } from 'lucide-react'
+
+export function HorizontalRuleButton({ editor }: { editor: Editor | null }) {
+  const canInsert = editor?.can().setHorizontalRule() ?? false
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      disabled={!canInsert}
+      data-disabled={!canInsert}
+      aria-label="Insert divider"
+      title="Divider"
+      onClick={() => editor?.chain().focus().setHorizontalRule().run()}
+    >
+      <Minus className="tiptap-button-icon" />
+    </Button>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/index.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import { Card, CardContent } from '@admin/components/ui/card'
+import { useContentEditor } from '@admin/hooks/content-editor/use-content-editor'
+import { useContentEditorMobileToolbar } from '@admin/hooks/content-editor/use-content-editor-mobile-toolbar'
+import { useContentEditorTableAddControls } from '@admin/hooks/content-editor/use-content-editor-table-add-controls'
+import type { ContentEditorMode } from '@admin/utils/editor/content-editor'
+import { cn } from '@admin/utils/shared/cn'
+import { EditorContent, EditorContext } from '@tiptap/react'
+import { EditorToolbar } from './editor-toolbar'
+import { MainToolbarContent } from './main-toolbar-content'
+import { MathBubbleMenu } from './math-popover'
+import { MobileToolbarContent } from './mobile-toolbar-content'
+import { ModeToggleButton } from './mode-toggle-button'
+import { SelectionBubbleMenu } from './selection-bubble-menu'
+import { SlashCommandMenu } from './slash-command-menu'
+import { SourceMode } from './source-mode'
+import { TableAddControls } from './table-add-controls'
+import { TableBubbleMenu } from './table-bubble-menu'
+
+export interface ContentEditorProps {
+  value?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+  defaultMode: ContentEditorMode
+}
+
+export function ContentEditor({
+  value = '',
+  onChange,
+  placeholder,
+  disabled = false,
+  className,
+  defaultMode
+}: ContentEditorProps) {
+  const { isMobile, mobileView, setMobileView } = useContentEditorMobileToolbar()
+
+  const {
+    activeSlashIndex,
+    editor,
+    filteredSlashCommands,
+    handleModeChange,
+    handleSourceChange,
+    handleSourceSelectionChange,
+    mode,
+    selectSlashCommand,
+    setActiveSlashIndex,
+    slashMenu,
+    sourceValue,
+    sourceSelectionRequest
+  } = useContentEditor({
+    value,
+    onChange,
+    placeholder,
+    disabled,
+    defaultMode,
+    onModeToggle: () => setMobileView('main')
+  })
+
+  const isSourceMode = mode === 'source'
+  const tableAddControls = useContentEditorTableAddControls(!editor || isSourceMode ? null : editor)
+
+  if (!editor) return null
+
+  return (
+    <Card
+      className={cn(
+        'content-editor-wrapper relative flex min-h-60 max-h-[90vh]',
+        { 'opacity-50': disabled },
+        className
+      )}
+    >
+      <CardContent className="flex min-h-0 flex-1 flex-col p-0">
+        <EditorContext.Provider value={{ editor }}>
+          {isSourceMode ? (
+            <SourceMode
+              value={sourceValue}
+              onChange={handleSourceChange}
+              placeholder={placeholder}
+              disabled={disabled}
+              selectionRequest={sourceSelectionRequest}
+              onSelectionChange={handleSourceSelectionChange}
+              toolbarEnd={
+                <ModeToggleButton isSourceMode={isSourceMode} onClick={handleModeChange} />
+              }
+              className="min-h-0 flex-1 max-h-none resize-none rounded-none border-0"
+            />
+          ) : (
+            <>
+              <EditorToolbar ariaLabel="Content editor toolbar" className="shrink-0">
+                {mobileView === 'main' ? (
+                  <MainToolbarContent
+                    onHighlighterClick={() => setMobileView('highlighter')}
+                    onLinkClick={() => setMobileView('link')}
+                    onMathClick={() => setMobileView('math')}
+                    onModeChange={handleModeChange}
+                    isMobile={isMobile}
+                    editor={editor}
+                  />
+                ) : (
+                  <MobileToolbarContent
+                    type={
+                      mobileView === 'highlighter'
+                        ? 'highlighter'
+                        : mobileView === 'math'
+                          ? 'math'
+                          : 'link'
+                    }
+                    onBack={() => setMobileView('main')}
+                  />
+                )}
+              </EditorToolbar>
+
+              <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
+                {!isMobile && <SelectionBubbleMenu editor={editor} />}
+                {!isMobile && <MathBubbleMenu editor={editor} />}
+                {!isMobile && <TableBubbleMenu editor={editor} />}
+                <TableAddControls controls={tableAddControls} />
+
+                <SlashCommandMenu
+                  activeIndex={activeSlashIndex}
+                  commands={filteredSlashCommands}
+                  onActiveIndexChange={setActiveSlashIndex}
+                  onCommandSelect={selectSlashCommand}
+                  slashMenu={slashMenu}
+                />
+
+                <EditorContent
+                  editor={editor}
+                  role="presentation"
+                  className="simple-editor-content min-h-0 flex-1 cursor-text p-10 overflow-y-auto bg-background [&_.ProseMirror]:min-h-full"
+                />
+              </div>
+            </>
+          )}
+        </EditorContext.Provider>
+      </CardContent>
+    </Card>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/main-toolbar-content.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { BlockquoteButton } from '@admin/components/custom/content-editor/tiptap-ui/blockquote-button'
+import { CodeBlockButton } from '@admin/components/custom/content-editor/tiptap-ui/code-block-button'
+import {
+  ColorHighlightPopover,
+  ColorHighlightPopoverButton
+} from '@admin/components/custom/content-editor/tiptap-ui/color-highlight-popover'
+import { HeadingDropdownMenu } from '@admin/components/custom/content-editor/tiptap-ui/heading-dropdown-menu'
+import {
+  LinkButton,
+  LinkPopover
+} from '@admin/components/custom/content-editor/tiptap-ui/link-popover'
+import { ListDropdownMenu } from '@admin/components/custom/content-editor/tiptap-ui/list-dropdown-menu'
+import { MarkButton } from '@admin/components/custom/content-editor/tiptap-ui/mark-button'
+import { UndoRedoButton } from '@admin/components/custom/content-editor/tiptap-ui/undo-redo-button'
+import { Button } from '@admin/components/ui/button'
+import { Separator } from '@admin/components/ui/separator'
+import { useContentEditorMediaInsertion } from '@admin/hooks/content-editor/use-content-editor-media-insertion'
+import type { Editor } from '@tiptap/core'
+import { ImagePlusIcon } from 'lucide-react'
+import { HorizontalRuleButton } from './horizontal-rule-button'
+import { MathButton, MathPopoverButton } from './math-popover'
+import { ModeToggleButton } from './mode-toggle-button'
+import { TableButton } from './table-button'
+
+export function MainToolbarContent({
+  onHighlighterClick,
+  onLinkClick,
+  onMathClick,
+  onModeChange,
+  isMobile,
+  editor
+}: {
+  onHighlighterClick: () => void
+  onLinkClick: () => void
+  onMathClick: () => void
+  onModeChange: () => void
+  isMobile: boolean
+  editor: Editor | null
+}) {
+  const mediaInsertion = useContentEditorMediaInsertion({ editor })
+
+  return (
+    <>
+      <div className="flex min-w-0 h-full flex-1 items-center overflow-x-auto">
+        <div className="flex items-center gap-0.5">
+          <UndoRedoButton action="undo" />
+          <UndoRedoButton action="redo" />
+        </div>
+
+        <Separator orientation="vertical" decorative className="my-auto h-[65%] mx-1 self-center" />
+
+        <div className="flex items-center gap-0.5">
+          <HeadingDropdownMenu />
+          <ListDropdownMenu types={['bulletList', 'orderedList', 'taskList']} />
+          <BlockquoteButton />
+          <CodeBlockButton />
+          <HorizontalRuleButton editor={editor} />
+        </div>
+
+        <Separator orientation="vertical" decorative className="my-auto h-[65%] mx-1 self-center" />
+
+        <div className="flex items-center gap-0.5">
+          <MarkButton type="bold" />
+          <MarkButton type="italic" />
+          <MarkButton type="strike" />
+          <MarkButton type="code" />
+          <MarkButton type="underline" />
+          {!isMobile ? (
+            <ColorHighlightPopover />
+          ) : (
+            <ColorHighlightPopoverButton onClick={onHighlighterClick} />
+          )}
+          {!isMobile ? <LinkPopover /> : <LinkButton onClick={onLinkClick} />}
+        </div>
+
+        <Separator orientation="vertical" decorative className="my-auto h-[65%] mx-1 self-center" />
+
+        <div className="flex items-center">
+          <TableButton editor={editor} />
+
+          {!isMobile ? (
+            <MathPopoverButton editor={editor} />
+          ) : (
+            <MathButton text="Math" aria-label="Insert math" title="Math" onClick={onMathClick} />
+          )}
+
+          {mediaInsertion.isVisible ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              data-active-state={mediaInsertion.isActive ? 'on' : 'off'}
+              role="button"
+              tabIndex={-1}
+              disabled={!mediaInsertion.canInsert}
+              data-disabled={!mediaInsertion.canInsert}
+              aria-label={mediaInsertion.label}
+              aria-pressed={mediaInsertion.isActive}
+              title={mediaInsertion.label}
+              onClick={() => {
+                mediaInsertion.insertMedia()
+              }}
+            >
+              <ImagePlusIcon className="tiptap-button-icon" />
+              <span className="tiptap-button-text">Media</span>
+            </Button>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="flex shrink-0 items-center gap-0.5">
+        <ModeToggleButton isSourceMode={false} onClick={onModeChange} />
+      </div>
+    </>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/math-bubble-menu.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import {
+  getSelectedContentEditorMath,
+  removeSelectedContentEditorMath,
+  updateSelectedContentEditorMath
+} from '@admin/utils/editor/tiptap'
+import { cn } from '@admin/utils/shared/cn'
+import type { Editor } from '@tiptap/core'
+import { BubbleMenu } from '@tiptap/react/menus'
+import * as React from 'react'
+import { MathEditorControls } from './math-editor-controls'
+
+export function MathBubbleMenu({ editor }: { editor: Editor }) {
+  const [selectedMath, setSelectedMath] = React.useState(() => getSelectedContentEditorMath(editor))
+
+  const syncSelectedMath = React.useCallback(() => {
+    setSelectedMath(getSelectedContentEditorMath(editor))
+  }, [editor])
+
+  React.useEffect(() => {
+    editor.on('selectionUpdate', syncSelectedMath)
+    editor.on('transaction', syncSelectedMath)
+    syncSelectedMath()
+
+    return () => {
+      editor.off('selectionUpdate', syncSelectedMath)
+      editor.off('transaction', syncSelectedMath)
+    }
+  }, [editor, syncSelectedMath])
+
+  const applyMath = React.useCallback(
+    (value: string) => {
+      const didApply = updateSelectedContentEditorMath(editor, value, selectedMath)
+      syncSelectedMath()
+      return didApply
+    },
+    [editor, selectedMath, syncSelectedMath]
+  )
+
+  const removeMath = React.useCallback(() => {
+    const didRemove = removeSelectedContentEditorMath(editor, selectedMath)
+    syncSelectedMath()
+    return didRemove
+  }, [editor, selectedMath, syncSelectedMath])
+
+  return (
+    <BubbleMenu
+      editor={editor}
+      pluginKey="mathBubbleMenu"
+      updateDelay={0}
+      shouldShow={({ editor: currentEditor }) =>
+        currentEditor.isEditable && Boolean(getSelectedContentEditorMath(currentEditor))
+      }
+      options={{
+        flip: { padding: 8 },
+        offset: 8,
+        placement: 'top',
+        shift: { padding: 8 }
+      }}
+    >
+      <div
+        role="toolbar"
+        aria-label="Math formatting toolbar"
+        className={cn(
+          'flex items-center gap-1 overflow-x-auto border-border rounded-lg border bg-popover p-0 text-popover-foreground shadow-menu [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+          'relative z-50'
+        )}
+      >
+        <MathEditorControls
+          key={`${selectedMath?.kind ?? 'math'}:${selectedMath?.pos ?? 0}:${selectedMath?.raw ?? ''}`}
+          initialValue={selectedMath?.value ?? ''}
+          disabled={!editor.isEditable}
+          onApply={applyMath}
+          onRemove={removeMath}
+        />
+      </div>
+    </BubbleMenu>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/math-button.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import { SigmaIcon } from 'lucide-react'
+import type * as React from 'react'
+
+export interface MathButtonProps extends Omit<React.ComponentProps<typeof Button>, 'type'> {
+  text?: string
+}
+
+export function MathButton({ children, text, ...props }: MathButtonProps) {
+  return (
+    <Button type="button" variant="ghost" size={text ? 'sm' : 'icon-sm'} {...props}>
+      {children ?? (
+        <>
+          <SigmaIcon className="tiptap-button-icon" />
+          {text ? <span className="tiptap-button-text">{text}</span> : null}
+        </>
+      )}
+    </Button>
+  )
+}

package/dist/assets/shared-assets/react-admin/custom/content-editor/math-editor-controls.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import { Separator } from '@admin/components/ui/separator'
+import { Textarea } from '@admin/components/ui/textarea'
+import { cn } from '@admin/utils/shared/cn'
+import { CornerDownLeftIcon, TrashIcon } from 'lucide-react'
+import * as React from 'react'
+
+export interface MathEditorControlsProps {
+  disabled?: boolean
+  initialValue?: string
+  layout?: 'popover' | 'toolbar'
+  onApply: (value: string) => boolean | undefined
+  onComplete?: () => void
+  onRemove?: () => boolean | undefined
+}
+
+export function MathEditorControls({
+  disabled,
+  initialValue = '',
+  layout = 'toolbar',
+  onApply,
+  onComplete,
+  onRemove
+}: MathEditorControlsProps) {
+  const [value, setValue] = React.useState(initialValue)
+  const canApply = Boolean(value.trim()) && !disabled
+  const isPopoverLayout = layout === 'popover'
+
+  const applyMath = React.useCallback(() => {
+    if (!canApply) return
+
+    const didApply = onApply(value)
+    if (didApply === false) return
+
+    if (!initialValue) {
+      setValue('')
+    }
+    onComplete?.()
+  }, [canApply, initialValue, onApply, onComplete, value])
+
+  const removeMath = React.useCallback(() => {
+    if (disabled || !onRemove) return
+
+    const didRemove = onRemove()
+    if (didRemove === false) return
+
+    onComplete?.()
+  }, [disabled, onComplete, onRemove])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (event.key !== 'Enter' || (!event.metaKey && !event.ctrlKey)) return
+
+      event.preventDefault()
+      applyMath()
+    },
+    [applyMath]
+  )
+
+  return (
+    <div
+      className={
+        isPopoverLayout
+          ? 'flex w-72 max-w-[calc(100vw-2rem)] flex-col gap-3 p-3'
+          : 'flex min-w-72 max-w-[calc(100vw-2rem)] items-start gap-2 p-2'
+      }
+    >
+      <Textarea
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Paste LaTeX..."
+        disabled={disabled}
+        autoFocus
+        className="min-h-24 resize-y rounded-md text-sm"
+      />
+
+      <div
+        className={cn({
+          'flex flex-col gap-2': isPopoverLayout,
+          'flex shrink-0 items-center gap-1': !isPopoverLayout
+        })}
+      >
+        <Button
+          type="button"
+          variant={isPopoverLayout ? 'default' : 'ghost'}
+          size={isPopoverLayout ? 'sm' : 'icon-sm'}
+          disabled={!canApply}
+          aria-label="Enter math"
+          title="Enter"
+          onClick={applyMath}
+        >
+          {isPopoverLayout ? 'Enter' : <CornerDownLeftIcon className="tiptap-button-icon" />}
+        </Button>
+
+        {onRemove ? (
+          <>
+            <Separator orientation="vertical" decorative className="h-6 my-auto self-center" />
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              disabled={disabled}
+              aria-label="Remove math"
+              title="Remove"
+              onClick={removeMath}
+            >
+              <TrashIcon className="tiptap-button-icon" />
+            </Button>
+          </>
+        ) : null}
+      </div>
+    </div>
+  )
+}