@actuate-media/cms-admin 0.10.0 → 0.11.0

package/src/components/ui/Input.tsx

@@ -0,0 +1,35 @@
+import { forwardRef, type InputHTMLAttributes } from 'react'
+import { cv, type VariantProps } from '../../lib/cv.js'
+
+const input = cv(
+  'focus-visible:ring-offset-background flex w-full rounded-[var(--radius)] border bg-[var(--background)] text-[var(--foreground)] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--muted-foreground)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      size: {
+        sm: 'h-8 px-2.5 text-xs',
+        md: 'h-9 px-3 text-sm',
+        lg: 'h-10 px-4 text-base',
+      },
+      state: {
+        default: 'border-[var(--border)]',
+        invalid: 'border-[var(--destructive)] focus-visible:ring-[var(--destructive)]',
+        valid: 'border-emerald-500 focus-visible:ring-emerald-500',
+      },
+    },
+    defaultVariants: { size: 'md', state: 'default' },
+  },
+)
+
+export type InputVariants = VariantProps<typeof input>
+
+export interface InputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, InputVariants {}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { size, state, className, ...rest },
+  ref,
+) {
+  return <input ref={ref} className={input({ size, state, class: className })} {...rest} />
+})
+
+export { input as inputVariants }

package/src/components/ui/SearchInput.tsx

@@ -10,7 +10,7 @@ export function SearchInput({ value, onChange, placeholder = 'Search...' }: Sear
   return (
     <div className="relative flex-1">
       <svg
-        className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--muted-foreground)]"
+        className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[var(--muted-foreground)]"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"
@@ -27,12 +27,12 @@ export function SearchInput({ value, onChange, placeholder = 'Search...' }: Sear
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
-        className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] py-2 pl-9 pr-8 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
+        className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] py-2 pr-8 pl-9 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
       />
       {value && (
         <button
           onClick={() => onChange('')}
-          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+          className="absolute top-1/2 right-2 -translate-y-1/2 rounded p-0.5 text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
           aria-label="Clear search"
         >
           <svg
@@ -46,7 +46,7 @@ export function SearchInput({ value, onChange, placeholder = 'Search...' }: Sear
           </svg>
         </button>
       )}
-      <kbd className="pointer-events-none absolute right-8 top-1/2 hidden -translate-y-1/2 rounded border border-[var(--border)] px-1.5 py-0.5 text-[10px] text-[var(--muted-foreground)] sm:inline-block">
+      <kbd className="pointer-events-none absolute top-1/2 right-8 hidden -translate-y-1/2 rounded border border-[var(--border)] px-1.5 py-0.5 text-[10px] text-[var(--muted-foreground)] sm:inline-block">
         ⌘K
       </kbd>
     </div>

package/src/components/ui/Select.tsx

@@ -0,0 +1,56 @@
+import { forwardRef, type SelectHTMLAttributes, type ReactNode } from 'react'
+import { cv, type VariantProps } from '../../lib/cv.js'
+
+const select = cv(
+  // Shares geometry with Input so they line up in forms.
+  'focus-visible:ring-offset-background flex w-full appearance-none rounded-[var(--radius)] border bg-[var(--background)] pr-8 text-[var(--foreground)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      size: {
+        sm: 'h-8 pr-7 pl-2.5 text-xs',
+        md: 'h-9 pr-8 pl-3 text-sm',
+        lg: 'h-10 pr-9 pl-4 text-base',
+      },
+      state: {
+        default: 'border-[var(--border)]',
+        invalid: 'border-[var(--destructive)] focus-visible:ring-[var(--destructive)]',
+        valid: 'border-emerald-500 focus-visible:ring-emerald-500',
+      },
+    },
+    defaultVariants: { size: 'md', state: 'default' },
+  },
+)
+
+export type SelectVariants = VariantProps<typeof select>
+
+export interface SelectProps
+  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'>, SelectVariants {
+  children?: ReactNode
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
+  { size, state, className, children, ...rest },
+  ref,
+) {
+  return (
+    <div className="relative">
+      <select ref={ref} className={select({ size, state, class: className })} {...rest}>
+        {children}
+      </select>
+      <svg
+        aria-hidden
+        className="pointer-events-none absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 text-[var(--muted-foreground)]"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fillRule="evenodd"
+          d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z"
+          clipRule="evenodd"
+        />
+      </svg>
+    </div>
+  )
+})
+
+export { select as selectVariants }

package/src/components/ui/Toast.tsx

@@ -45,7 +45,7 @@ export function ToastContainer({ toasts, onDismiss }: ToastContainerProps) {
   if (toasts.length === 0) return null
 
   return (
-    <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2">
+    <div className="fixed right-4 bottom-4 z-[100] flex flex-col gap-2">
       {toasts.map((toast) => (
         <div
           key={toast.id}

package/src/components/ui/index.ts

@@ -1,7 +1,21 @@
-export { Button } from './Button.js'
-export type { ButtonProps } from './Button.js'
-export { Badge } from './Badge.js'
-export type { BadgeProps } from './Badge.js'
+export { Button, buttonVariants } from './Button.js'
+export type { ButtonProps, ButtonVariants } from './Button.js'
+export { Badge, badgeVariants, STATUS_TONE, STATUS_LABEL } from './Badge.js'
+export type { BadgeProps, BadgeVariants, DocumentStatus } from './Badge.js'
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  cardVariants,
+} from './Card.js'
+export type { CardProps, CardVariants } from './Card.js'
+export { Input, inputVariants } from './Input.js'
+export type { InputProps, InputVariants } from './Input.js'
+export { Select, selectVariants } from './Select.js'
+export type { SelectProps, SelectVariants } from './Select.js'
 export { Avatar } from './Avatar.js'
 export type { AvatarProps } from './Avatar.js'
 export { EmptyState } from './EmptyState.js'

package/src/fields/BlockBuilderField.tsx

@@ -74,7 +74,7 @@ function BlockField({ field, value, onChange }: BlockFieldProps) {
         <select
           value={(value as string) ?? ''}
           onChange={(e) => onChange(e.target.value)}
-          className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm outline-none transition-colors focus:ring-2 focus:ring-[var(--ring)]"
+          className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm transition-colors outline-none focus:ring-2 focus:ring-[var(--ring)]"
         >
           <option value="">Select...</option>
           {field.options.map((opt) => (
@@ -98,7 +98,7 @@ function BlockField({ field, value, onChange }: BlockFieldProps) {
           value={(value as string) ?? ''}
           onChange={(e) => onChange(e.target.value)}
           rows={4}
-          className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm outline-none transition-colors focus:ring-2 focus:ring-[var(--ring)]"
+          className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm transition-colors outline-none focus:ring-2 focus:ring-[var(--ring)]"
         />
       </div>
     )
@@ -134,7 +134,7 @@ function BlockField({ field, value, onChange }: BlockFieldProps) {
         value={(value as string) ?? ''}
         onChange={(e) => onChange(e.target.value)}
         required={field.required}
-        className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm outline-none transition-colors focus:ring-2 focus:ring-[var(--ring)]"
+        className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm transition-colors outline-none focus:ring-2 focus:ring-[var(--ring)]"
       />
     </div>
   )

package/src/fields/DateField.tsx

@@ -25,7 +25,7 @@ export function DateField({ label, value = '', onChange, required, helpText }: D
         />
         <button
           type="button"
-          className="absolute right-2 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)]"
+          className="absolute top-1/2 right-2 -translate-y-1/2 text-[var(--muted-foreground)]"
           aria-label="Open calendar"
         >
           <svg

package/src/fields/RelationshipField.tsx

@@ -158,12 +158,12 @@ export function RelationshipField({
         onClick={() => handleToggle(opt.id)}
         className={`flex w-full items-center gap-2 px-3 py-2 text-sm hover:bg-[var(--accent)] ${isSelected ? 'font-medium' : ''}`}
       >
-        <div className="flex-1 min-w-0 text-left">
+        <div className="min-w-0 flex-1 text-left">
           <div className="flex items-center gap-2">
             <span className="truncate">{getDocTitle(opt)}</span>
             {isSelected && <span className="shrink-0 text-[var(--primary)]">&#10003;</span>}
           </div>
-          <div className="flex items-center gap-2 mt-0.5">
+          <div className="mt-0.5 flex items-center gap-2">
             <span className="text-[10px] text-[var(--muted-foreground)]">{collection}</span>
             {opt.updatedAt && (
               <span className="text-[10px] text-[var(--muted-foreground)]">
@@ -201,7 +201,7 @@ export function RelationshipField({
                 onClick={() => handleRemove(item.id)}
                 className="hover:text-[var(--destructive)]"
               >
-                <X className="w-3 h-3" />
+                <X className="h-3 w-3" />
               </button>
             </span>
           ))}
@@ -209,26 +209,26 @@ export function RelationshipField({
       )}
 
       <div className="relative">
-        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--muted-foreground)] pointer-events-none" />
+        <Search className="pointer-events-none absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2 text-[var(--muted-foreground)]" />
         <input
           type="text"
           value={searchTerm}
           onChange={(e) => handleSearch(e.target.value)}
           onFocus={() => setOpen(true)}
           placeholder={`Search ${relationTo}...`}
-          className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] pl-8 pr-3 py-2 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
+          className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] py-2 pr-3 pl-8 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
         />
         {loading && (
-          <Loader2 className="absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 animate-spin text-[var(--muted-foreground)]" />
+          <Loader2 className="absolute top-1/2 right-2.5 h-4 w-4 -translate-y-1/2 animate-spin text-[var(--muted-foreground)]" />
         )}
 
         {open && (
-          <ul className="absolute z-50 mt-1 w-full max-h-60 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--popover)] py-1 shadow-lg">
+          <ul className="absolute z-50 mt-1 max-h-60 w-full overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--popover)] py-1 shadow-lg">
             {unselectedItems.map((opt) => (
               <li key={opt.id}>{renderOption(opt, false)}</li>
             ))}
             {selectedItems.length > 0 && unselectedItems.length > 0 && (
-              <li className="border-t border-[var(--border)] my-1" />
+              <li className="my-1 border-t border-[var(--border)]" />
             )}
             {selectedItems.map((opt) => (
               <li key={opt.id}>{renderOption(opt, true)}</li>
@@ -236,7 +236,7 @@ export function RelationshipField({
             {options.length === 0 && !loading && (
               <li className="px-3 py-2 text-sm text-[var(--muted-foreground)]">No results</li>
             )}
-            <li className="border-t border-[var(--border)] mt-1">
+            <li className="mt-1 border-t border-[var(--border)]">
               <button
                 type="button"
                 onClick={() => {
@@ -245,7 +245,7 @@ export function RelationshipField({
                 }}
                 className="flex w-full items-center gap-2 px-3 py-2 text-sm text-[var(--primary)] hover:bg-[var(--accent)]"
               >
-                <Plus className="w-3.5 h-3.5" />
+                <Plus className="h-3.5 w-3.5" />
                 Create New
               </button>
             </li>

package/src/fields/TextField.tsx

@@ -43,7 +43,7 @@ export function TextField({
         onChange={(e) => onChange(e.target.value)}
         required={required}
         maxLength={maxLength}
-        className={`w-full rounded-md border bg-[var(--input-background)] px-3 py-2 text-sm outline-none transition-colors focus:ring-2 focus:ring-[var(--ring)] ${
+        className={`w-full rounded-md border bg-[var(--input-background)] px-3 py-2 text-sm transition-colors outline-none focus:ring-2 focus:ring-[var(--ring)] ${
           hasError ? 'border-[var(--destructive)]' : 'border-[var(--border)]'
         }`}
       />

package/src/index.ts

@@ -8,6 +8,34 @@ export type { SidebarProps } from './layout/Sidebar.js'
 export { Header } from './layout/Header.js'
 export type { HeaderProps } from './layout/Header.js'
 
+// Layout primitives — the sanctioned way to compose admin views.
+// Always prefer these to hand-rolled flex/grid utilities.
+export {
+  AdminShell,
+  PageContainer,
+  Stack,
+  Cluster,
+  Grid,
+  Split,
+  Box,
+  tokens,
+} from './layout/primitives/index.js'
+export type {
+  AdminShellProps,
+  PageContainerProps,
+  StackProps,
+  StackSpace,
+  ClusterProps,
+  ClusterAlign,
+  ClusterJustify,
+  GridProps,
+  GridResponsive,
+  SplitProps,
+  BoxProps,
+  SpaceToken,
+  RadiusToken,
+} from './layout/primitives/index.js'
+
 export { Dashboard } from './views/Dashboard.js'
 export { Posts } from './views/Posts.js'
 export { Pages } from './views/Pages.js'

package/src/layout/Header.tsx

@@ -24,100 +24,100 @@ export function Header({ onToggleSidebar, session, onNavigate }: HeaderProps) {
 
   return (
     <>
-      <header className="h-14 border-b border-border bg-background flex items-center justify-between px-4 gap-4">
+      <header className="border-border bg-background flex h-14 items-center justify-between gap-4 border-b px-4">
         <button
           onClick={onToggleSidebar}
-          className="lg:hidden p-2 hover:bg-accent rounded-lg transition-colors"
+          className="hover:bg-accent rounded-lg p-2 transition-colors md:hidden"
           aria-label="Toggle sidebar"
         >
-          <Menu className="w-5 h-5 text-foreground" strokeWidth={2} />
+          <Menu className="text-foreground h-5 w-5" strokeWidth={2} />
         </button>
 
-        <div className="flex items-center lg:hidden">
-          <span className="text-lg font-semibold text-foreground">Actuate</span>
+        <div className="flex items-center md:hidden">
+          <span className="text-foreground text-lg font-semibold">Actuate</span>
         </div>
 
         <div className="flex-1" />
 
         <div className="flex items-center gap-2 sm:gap-3">
-          <div className="hidden md:block relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+          <div className="relative hidden md:block">
+            <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
             <input
               type="text"
               placeholder="Search... (⌘K)"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               onFocus={() => setShowCommandPalette(true)}
-              className="w-64 pl-9 pr-3 py-1.5 text-sm border border-border rounded-lg bg-input-background text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
+              className="border-border bg-input-background text-foreground focus:ring-ring w-64 rounded-lg border py-1.5 pr-3 pl-9 text-sm focus:border-transparent focus:ring-2 focus:outline-none"
             />
           </div>
 
           <button
             onClick={() => setShowCommandPalette(true)}
-            className="md:hidden p-2 hover:bg-accent rounded-lg transition-colors"
+            className="hover:bg-accent rounded-lg p-2 transition-colors md:hidden"
             aria-label="Search"
           >
-            <Search className="w-5 h-5 text-muted-foreground" />
+            <Search className="text-muted-foreground h-5 w-5" />
           </button>
 
           <LocaleSwitcher />
 
           <button
             onClick={toggleTheme}
-            className="p-2 hover:bg-accent rounded-lg transition-colors"
+            className="hover:bg-accent rounded-lg p-2 transition-colors"
             aria-label="Toggle theme"
           >
             {resolvedTheme === 'dark' ? (
-              <Sun className="w-5 h-5 text-muted-foreground" />
+              <Sun className="text-muted-foreground h-5 w-5" />
             ) : (
-              <Moon className="w-5 h-5 text-muted-foreground" />
+              <Moon className="text-muted-foreground h-5 w-5" />
             )}
           </button>
 
           <button
-            className="p-2 hover:bg-accent rounded-lg transition-colors relative"
+            className="hover:bg-accent relative rounded-lg p-2 transition-colors"
             aria-label="Notifications"
           >
-            <Bell className="w-5 h-5 text-muted-foreground" />
-            <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-destructive rounded-full" />
+            <Bell className="text-muted-foreground h-5 w-5" />
+            <span className="bg-destructive absolute top-1.5 right-1.5 h-2 w-2 rounded-full" />
           </button>
 
           <DropdownMenu.Root>
             <DropdownMenu.Trigger asChild>
-              <button className="flex items-center gap-2 p-1.5 hover:bg-accent rounded-lg transition-colors">
-                <div className="w-8 h-8 bg-linear-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
-                  <span className="text-white text-sm font-medium">
+              <button className="hover:bg-accent flex items-center gap-2 rounded-lg p-1.5 transition-colors">
+                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-linear-to-br from-blue-500 to-purple-600">
+                  <span className="text-sm font-medium text-white">
                     {session?.user?.name?.charAt(0)?.toUpperCase() ?? 'A'}
                   </span>
                 </div>
-                <ChevronDown className="w-4 h-4 text-muted-foreground hidden sm:block" />
+                <ChevronDown className="text-muted-foreground hidden h-4 w-4 sm:block" />
               </button>
             </DropdownMenu.Trigger>
 
             <DropdownMenu.Portal>
               <DropdownMenu.Content
-                className="min-w-[200px] bg-popover text-popover-foreground rounded-lg border border-border shadow-lg p-1 z-50"
+                className="bg-popover text-popover-foreground border-border z-50 min-w-[200px] rounded-lg border p-1 shadow-lg"
                 align="end"
                 sideOffset={5}
               >
-                <div className="px-3 py-2 border-b border-border">
+                <div className="border-border border-b px-3 py-2">
                   <p className="text-sm font-medium">{session?.user?.name ?? 'Admin User'}</p>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-muted-foreground text-xs">
                     {session?.user?.email ?? 'admin@example.com'}
                   </p>
                 </div>
-                <DropdownMenu.Item className="flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent rounded cursor-pointer outline-none">
-                  <User className="w-4 h-4" />
+                <DropdownMenu.Item className="hover:bg-accent flex cursor-pointer items-center gap-2 rounded px-3 py-2 text-sm outline-none">
+                  <User className="h-4 w-4" />
                   Profile
                 </DropdownMenu.Item>
                 <DropdownMenu.Item
-                  className="flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent rounded cursor-pointer outline-none"
+                  className="hover:bg-accent flex cursor-pointer items-center gap-2 rounded px-3 py-2 text-sm outline-none"
                   onSelect={() => onNavigate('/settings')}
                 >
                   Settings
                 </DropdownMenu.Item>
-                <DropdownMenu.Separator className="h-px bg-border my-1" />
-                <DropdownMenu.Item className="flex items-center gap-2 px-3 py-2 text-sm text-destructive hover:bg-accent rounded cursor-pointer outline-none">
+                <DropdownMenu.Separator className="bg-border my-1 h-px" />
+                <DropdownMenu.Item className="text-destructive hover:bg-accent flex cursor-pointer items-center gap-2 rounded px-3 py-2 text-sm outline-none">
                   Logout
                 </DropdownMenu.Item>
               </DropdownMenu.Content>

package/src/layout/Layout.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, type ReactNode } from 'react'
 import { Sidebar } from './Sidebar.js'
 import { Header } from './Header.js'
 import { Breadcrumbs } from '../components/Breadcrumbs.js'
+import { AdminShell } from './primitives/AdminShell.js'
 import { Toaster } from 'sonner'
 
 export interface LayoutProps {
@@ -14,6 +15,20 @@ export interface LayoutProps {
   children: ReactNode
 }
 
+/**
+ * Layout — thin shell that wires Sidebar/Header/Breadcrumbs into the
+ * `<AdminShell>` primitive.
+ *
+ * `AdminShell` (in `./primitives/AdminShell.tsx`) owns the actual layout
+ * algorithm (CSS Grid on desktop, fixed slide-in overlay on mobile,
+ * JS-driven `matchMedia` breakpoint) so that every layout decision lives
+ * in one place. Per-product chrome (Sidebar, Header, Breadcrumbs)
+ * composes on top of it.
+ *
+ * DO NOT re-implement layout logic in this file — extend `AdminShell`
+ * instead. The previous flex + `fixed`↔`static` toggle caused recurring
+ * sidebar-overlap bugs; the grid-based primitive is the contract.
+ */
 export function Layout({ config, session, currentPath, onNavigate, children }: LayoutProps) {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
@@ -22,54 +37,32 @@ export function Layout({ config, session, currentPath, onNavigate, children }: L
     setMobileSidebarOpen(false)
   }, [currentPath])
 
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.innerWidth < 1024) {
-        setMobileSidebarOpen(false)
-      }
-    }
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
-  }, [])
-
   return (
-    <div className="h-screen flex overflow-hidden bg-background text-foreground">
+    <>
       <Toaster position="bottom-right" />
-
-      {mobileSidebarOpen && (
-        <div
-          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
-          onClick={() => setMobileSidebarOpen(false)}
-        />
-      )}
-
-      <div
-        className={`fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 lg:transform-none ${
-          mobileSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
-        }`}
+      <AdminShell
+        mobileSidebarOpen={mobileSidebarOpen}
+        onMobileSidebarClose={() => setMobileSidebarOpen(false)}
+        sidebar={
+          <Sidebar
+            collapsed={sidebarCollapsed}
+            onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
+            currentPath={currentPath}
+            onNavigate={onNavigate}
+            config={config}
+          />
+        }
+        header={
+          <Header
+            onToggleSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
+            session={session}
+            onNavigate={onNavigate}
+          />
+        }
+        breadcrumbs={<Breadcrumbs currentPath={currentPath} onNavigate={onNavigate} />}
       >
-        <Sidebar
-          collapsed={sidebarCollapsed}
-          onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
-          currentPath={currentPath}
-          onNavigate={onNavigate}
-          config={config}
-        />
-      </div>
-
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <Header
-          onToggleSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
-          session={session}
-          onNavigate={onNavigate}
-        />
-
-        <Breadcrumbs currentPath={currentPath} onNavigate={onNavigate} />
-
-        <main className="flex-1 overflow-auto bg-background">
-          <div className="h-full">{children}</div>
-        </main>
-      </div>
-    </div>
+        <div className="h-full">{children}</div>
+      </AdminShell>
+    </>
   )
 }