@betterstart/cli 0.1.69 → 0.1.70

package/dist/reader-2T45D7JZ.js

@@ -0,0 +1,7 @@
+import {
+  readTemplate
+} from "./chunk-E4HZYXQ2.js";
+export {
+  readTemplate
+};
+//# sourceMappingURL=reader-2T45D7JZ.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterstart/cli",
-  "version": "0.1.69",
+  "version": "0.1.70",
   "description": "Scaffold a full-featured CMS into any Next.js 16 application",
   "type": "module",
   "main": "./dist/index.js",

package/templates/init/api/auth-route.ts

@@ -0,0 +1,3 @@
+import { auth, toNextJsHandler } from '@cms/auth'
+
+export const { GET, POST } = toNextJsHandler(auth)

package/templates/init/api/upload-route.ts

@@ -0,0 +1,74 @@
+import { PutObjectCommand } from '@aws-sdk/client-s3'
+import { BUCKET_NAME, generateFilePath, getPublicUrl, getR2Client } from '@cms/lib/r2'
+import type { UploadedFile } from '@cms/types'
+import { validateFiles } from '@cms/utils/validation'
+import { type NextRequest, NextResponse } from 'next/server'
+
+export async function POST(request: NextRequest) {
+  try {
+    const formData = await request.formData()
+    const prefix = formData.get('prefix')?.toString() || 'uploads'
+
+    const maxSizeInBytes = Number(formData.get('maxSizeInBytes')) || 10 * 1024 * 1024
+    const allowedTypesRaw = formData.get('allowedTypes')?.toString()
+    const allowedTypes = allowedTypesRaw ? allowedTypesRaw.split(',').filter(Boolean) : []
+
+    const files: File[] = []
+    for (const [key, value] of formData.entries()) {
+      if (value instanceof File && key.startsWith('file')) {
+        files.push(value)
+      }
+    }
+
+    if (files.length === 0) {
+      return NextResponse.json({ success: false, error: 'No files provided' }, { status: 400 })
+    }
+
+    const validation = validateFiles(files, {
+      maxSizeInBytes,
+      allowedTypes,
+      maxFiles: 10,
+    })
+
+    if (!validation.valid) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: validation.errors.map((e) => `${e.filename}: ${e.error}`).join('; '),
+        },
+        { status: 400 },
+      )
+    }
+
+    const uploadedFiles: UploadedFile[] = []
+
+    for (const file of files) {
+      const key = generateFilePath(file.name, prefix)
+      const arrayBuffer = await file.arrayBuffer()
+      const buffer = Buffer.from(arrayBuffer)
+
+      const command = new PutObjectCommand({
+        Bucket: BUCKET_NAME,
+        Key: key,
+        Body: buffer,
+        ContentType: file.type,
+        ContentLength: file.size,
+      })
+
+      await getR2Client().send(command)
+
+      uploadedFiles.push({
+        key,
+        url: getPublicUrl(key),
+        filename: file.name,
+        size: file.size,
+        contentType: file.type,
+      })
+    }
+
+    return NextResponse.json({ success: true, files: uploadedFiles })
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Failed to upload files'
+    return NextResponse.json({ success: false, error: message }, { status: 500 })
+  }
+}

package/templates/init/cms-globals.css

@@ -0,0 +1,200 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --font-heading: var(--font-sans);
+  --shadow-sm: var(--shadow-small);
+  --shadow-md: var(--shadow-medium);
+  --shadow-lg: var(--shadow-large);
+}
+
+:root {
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.4 0.016 285.938);
+  --accent: oklch(0.961 0 0);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --radius: 0.45rem;
+  --shadow-background-border: 0 0 0 1px var(--background);
+  --shadow-border-base: 0 0 0 1px var(--border);
+  --shadow-border-inset: inset 0 0 0 1px var(--border);
+  --shadow-border: var(--shadow-border-base), var(--shadow-background-border);
+  --shadow-small: 0px 2px 2px #0000000a;
+  --shadow-border-small: var(--shadow-border-base), var(--shadow-small), var(--shadow-background-border);
+  --shadow-medium: 0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a;
+  --shadow-border-medium: var(--shadow-border-base), var(--shadow-medium), var(--shadow-background-border);
+  --shadow-large: 0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a;
+  --shadow-border-large: var(--shadow-border-base), var(--shadow-large), var(--shadow-background-border);
+  --shadow-tooltip: var(--shadow-border-base), 0px 1px 1px #00000005, 0px 4px 8px #0000000a, var(--shadow-background-border);
+  --shadow-menu: var(--shadow-border-base), 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f, var(--shadow-background-border);
+  --shadow-modal: var(--shadow-border-base), 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, var(--shadow-background-border);
+  --shadow-fullscreen: var(--shadow-border-base), 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, var(--shadow-background-border);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.39 0 0);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.94 0 0);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --background: oklch(0.98 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.809 0.105 251.813);
+  --chart-2: oklch(0.623 0.214 259.815);
+  --chart-3: oklch(0.546 0.245 262.881);
+  --chart-4: oklch(0.488 0.243 264.376);
+  --chart-5: oklch(0.424 0.199 265.638);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --shadow-small: 0px 1px 2px #00000029;
+  --shadow-medium: 0px 2px 2px #00000052, 0px 8px 8px -8px #00000029;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  .cms-root {
+    font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
+  }
+  .cms-root code, .cms-root pre, .cms-root kbd {
+    font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
+  }
+}
+
+@utility material-base {
+  background-color: var(--card);
+  box-shadow: var(--shadow-border);
+  border-radius: 6px;
+}
+
+@utility material-small {
+  background-color: var(--card);
+  box-shadow: var(--shadow-border-small);
+  border-radius: 6px;
+}
+
+@utility material-medium {
+  background-color: var(--card);
+  box-shadow: var(--shadow-border-medium);
+  border-radius: 12px;
+}
+
+@utility material-large {
+  background-color: var(--card);
+  box-shadow: var(--shadow-border-large);
+  border-radius: 12px;
+}
+
+@utility material-tooltip {
+  background-color: var(--card);
+  box-shadow: var(--shadow-tooltip);
+  border-radius: 6px;
+}
+
+@utility material-menu {
+  background-color: var(--card);
+  box-shadow: var(--shadow-menu);
+  border-radius: 12px;
+}
+
+@utility material-modal {
+  background-color: var(--card);
+  box-shadow: var(--shadow-modal);
+  border-radius: 12px;
+}
+
+@utility material-fullscreen {
+  background-color: var(--card);
+  box-shadow: var(--shadow-fullscreen);
+  border-radius: 16px;
+}

package/templates/init/components/data-table/data-table-pagination.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import { Button } from '@cms/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@cms/components/ui/select'
+import type { Table } from '@tanstack/react-table'
+import * as React from 'react'
+
+const PAGE_SIZE_OPTIONS = [
+  { value: '10', label: '10' },
+  { value: '20', label: '20' },
+  { value: '50', label: '50' },
+  { value: '100', label: '100' },
+  { value: 'all', label: 'All' },
+]
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>
+  pageSize: number
+  setPageSize: (value: number | null) => void
+}
+
+export function DataTablePagination<TData>({
+  table,
+  pageSize,
+  setPageSize,
+}: DataTablePaginationProps<TData>) {
+  const handlePageSizeChange = React.useCallback(
+    (value: string) => {
+      React.startTransition(() => {
+        if (value === 'all') {
+          setPageSize(-1)
+        } else {
+          setPageSize(Number(value))
+        }
+        table.setPageIndex(0)
+      })
+    },
+    [setPageSize, table],
+  )
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-muted-foreground">Rows per page</span>
+        <Select
+          value={pageSize === -1 ? 'all' : String(pageSize)}
+          onValueChange={handlePageSizeChange}
+        >
+          <SelectTrigger className="w-[100px] h-8">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {PAGE_SIZE_OPTIONS.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          Previous
+        </Button>
+        <div className="text-sm text-muted-foreground">
+          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  )
+}

package/templates/init/components/data-table/data-table-toolbar.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { Button } from '@cms/components/ui/button'
+import { Input } from '@cms/components/ui/input'
+import { ArrowUpDown, Save, Search } from 'lucide-react'
+import type * as React from 'react'
+import { useFormStatus } from 'react-dom'
+
+function SearchButton() {
+  const { pending } = useFormStatus()
+  return (
+    <Button type="submit" variant="outline" size="default" disabled={pending}>
+      {pending ? 'Searching...' : 'Search'}
+    </Button>
+  )
+}
+
+interface DataTableToolbarProps {
+  search: string
+  onSearch: (formData: FormData) => void
+  searchPlaceholder?: string
+  children?: React.ReactNode
+}
+
+export function DataTableToolbar({
+  search,
+  onSearch,
+  searchPlaceholder = 'Search...',
+  children,
+}: DataTableToolbarProps) {
+  return (
+    <div className="flex items-center gap-2">
+      <form action={onSearch} className="flex items-center gap-2">
+        <div className="relative">
+          <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2" />
+          <Input
+            key={search}
+            name="search"
+            placeholder={searchPlaceholder}
+            defaultValue={search}
+            className="w-64 pl-9"
+          />
+        </div>
+        <SearchButton />
+      </form>
+      {children}
+    </div>
+  )
+}
+
+interface ReorderControlsProps {
+  reorderMode: boolean
+  onToggle: () => void
+  onSave: () => void
+  onCancel: () => void
+  hasChanges: boolean
+  isSaving: boolean
+}
+
+export function ReorderControls({
+  reorderMode,
+  onToggle,
+  onSave,
+  onCancel,
+  hasChanges,
+  isSaving,
+}: ReorderControlsProps) {
+  return (
+    <div className="flex items-center gap-2">
+      <Button
+        variant={reorderMode ? 'default' : 'outline'}
+        size="sm"
+        onClick={onToggle}
+        disabled={isSaving}
+      >
+        <ArrowUpDown className="size-4 mr-1" />
+        Sort Order
+      </Button>
+      {reorderMode && (
+        <>
+          <Button variant="default" size="sm" onClick={onSave} disabled={!hasChanges || isSaving}>
+            <Save className="size-4 mr-1" />
+            {isSaving ? 'Saving...' : 'Save'}
+          </Button>
+          <Button variant="outline" size="sm" onClick={onCancel} disabled={isSaving}>
+            Cancel
+          </Button>
+          {hasChanges && <span className="text-sm text-muted-foreground">Unsaved changes</span>}
+        </>
+      )}
+    </div>
+  )
+}

package/templates/init/components/data-table/data-table.tsx

@@ -0,0 +1,188 @@
+'use client'
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@cms/components/ui/table'
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+  type VisibilityState,
+} from '@tanstack/react-table'
+import { parseAsInteger, useQueryState } from 'nuqs'
+import * as React from 'react'
+import { DataTablePagination } from './data-table-pagination'
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+  isPending?: boolean
+  error?: Error | null
+  emptyMessage?: string
+  loadingMessage?: string
+  selectedIds?: number[]
+  onSelectedIdsChange?: (ids: number[]) => void
+  meta?: Record<string, unknown>
+  getId?: (row: TData) => number
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  isPending = false,
+  error = null,
+  emptyMessage = 'No results found.',
+  loadingMessage = 'Loading...',
+  selectedIds,
+  onSelectedIdsChange,
+  meta,
+  getId = (row) => (row as { id: number }).id,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
+  const [pageIndex, setPageIndex] = useQueryState('page', parseAsInteger.withDefault(0))
+  const [pageSize, setPageSize] = useQueryState('size', parseAsInteger.withDefault(20))
+
+  const effectivePageSize = pageSize === -1 ? Number.MAX_SAFE_INTEGER : pageSize
+
+  // Convert selectedIds to rowSelection object
+  const rowSelection = React.useMemo(() => {
+    if (!selectedIds) return {}
+    const selection: Record<string, boolean> = {}
+    data.forEach((row, index) => {
+      if (selectedIds.includes(getId(row))) {
+        selection[index.toString()] = true
+      }
+    })
+    return selection
+  }, [selectedIds, data, getId])
+
+  const handleRowSelectionChange = React.useCallback(
+    (
+      updater:
+        | Record<string, boolean>
+        | ((old: Record<string, boolean>) => Record<string, boolean>),
+    ) => {
+      if (!onSelectedIdsChange) return
+      const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater
+      const newIds = Object.keys(newSelection)
+        .filter((key) => newSelection[key])
+        .map((key) => getId(data[Number.parseInt(key, 10)]))
+        .filter(Boolean)
+      onSelectedIdsChange(newIds)
+    },
+    [data, rowSelection, onSelectedIdsChange, getId],
+  )
+
+  const handlePaginationChange = React.useCallback(
+    (
+      updater:
+        | { pageIndex: number; pageSize: number }
+        | ((old: { pageIndex: number; pageSize: number }) => {
+            pageIndex: number
+            pageSize: number
+          }),
+    ) => {
+      const current = { pageIndex, pageSize: effectivePageSize }
+      const next = typeof updater === 'function' ? updater(current) : updater
+      React.startTransition(() => {
+        setPageIndex(next.pageIndex)
+      })
+    },
+    [pageIndex, effectivePageSize, setPageIndex],
+  )
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: selectedIds ? handleRowSelectionChange : undefined,
+    onPaginationChange: handlePaginationChange,
+    meta,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination: {
+        pageIndex,
+        pageSize: effectivePageSize,
+      },
+    },
+  })
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-card border overflow-hidden rounded-lg corner-squircle">
+        <Table>
+          <TableHeader className="bg-secondary">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {isPending ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  <div className="text-muted-foreground">{loadingMessage}</div>
+                </TableCell>
+              </TableRow>
+            ) : error ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  <div className="text-destructive">Error: {error.message}</div>
+                </TableCell>
+              </TableRow>
+            ) : table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  {emptyMessage}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <DataTablePagination table={table} pageSize={pageSize} setPageSize={setPageSize} />
+    </div>
+  )
+}
+
+export type { DataTableProps }

package/templates/init/components/layout/cms-header.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { Button } from '@cms/components/ui/button'
+import { SidebarTrigger, useSidebar } from '@cms/components/ui/sidebar'
+import { useTheme } from '@cms/hooks/use-cms-theme'
+import { Moon, Sun } from 'lucide-react'
+
+export function CmsHeader() {
+  const { theme, setTheme } = useTheme()
+  const { state } = useSidebar()
+
+  return (
+    <header className="flex h-14 shrink-0 items-center gap-2 border-b border-border w-full sticky top-0 z-50">
+      <div className="flex items-center px-5 gap-1 flex-1 w-full justify-between">
+        <div className="flex items-center gap-2 w-full">
+          {state === 'collapsed' && <SidebarTrigger />}
+        </div>
+        <div className="flex items-center gap-2 ml-auto">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+          >
+            <Sun className="size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Moon className="absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <span className="sr-only">Toggle theme</span>
+          </Button>
+        </div>
+      </div>
+    </header>
+  )
+}