@actuate-media/cms-admin 0.10.0 → 0.12.0

package/src/fields/component-block-helpers.ts

@@ -0,0 +1,341 @@
+/**
+ * Pure helpers behind `<ComponentBlockField>`. Extracted so vitest can
+ * exercise them in node without spinning up jsdom — the React component
+ * just composes these into UI.
+ *
+ * Kept structurally typed (no peer-dep import of types here would be
+ * cleaner, but the `PropType` discriminated union is the contract we
+ * promise consumers, so we lean on the package's types).
+ */
+
+import {
+  detectDiscriminator,
+  findVariant,
+} from '@actuate-media/component-blocks/discriminated-union'
+import type {
+  DiscriminatedUnion,
+  DiscriminatedVariant,
+} from '@actuate-media/component-blocks/discriminated-union'
+import type { ComponentSpec, Manifest, PropSpec, PropType } from '@actuate-media/component-blocks'
+
+import type { ComponentBlockValue } from './ComponentBlockField.js'
+
+/**
+ * Compute the list of components an editor can pick from given the
+ * manifest + the optional allow-list. Returns the full list when no
+ * filter is provided; returns `[]` when every entry is filtered out
+ * (the caller renders an error in that case).
+ */
+export function getAllowedComponents(
+  manifest: Manifest,
+  allow: string[] | undefined,
+): ComponentSpec[] {
+  if (!allow || allow.length === 0) return manifest.components
+  return manifest.components.filter((c) => allow.includes(c.name))
+}
+
+/**
+ * JSON-encode any value so it round-trips cleanly through the
+ * JsonFallback textarea. Previously the helper short-circuited for
+ * strings (returning the raw string), which made the textarea
+ * stateful: typing `"hello"` parsed to the JS string `hello`,
+ * re-rendered as bare `hello`, then `JSON.parse('hello')` threw on
+ * the next edit and the field "locked" as a raw string. Always
+ * stringifying keeps the textarea visually consistent with the
+ * underlying JSON value.
+ *
+ * Falls back to `String(v)` for values that can't be JSON-encoded
+ * (e.g. circular refs) so the field remains editable.
+ */
+export function safeJsonStringify(v: unknown): string {
+  try {
+    return JSON.stringify(v, null, 2)
+  } catch {
+    return String(v)
+  }
+}
+
+/**
+ * Map an `<select>` change-event value to an enum-prop value.
+ *
+ * The placeholder `<option value="">Select…</option>` clears the field
+ * to `undefined`; any other value is the stringified array index into
+ * `options`. Extracted so we can test the clear semantics without
+ * spinning up jsdom: previously the inline handler used `Number("")`,
+ * which evaluates to `0` and silently picked the first option instead
+ * of clearing.
+ */
+export function parseEnumSelection<T>(raw: string, options: readonly T[]): T | undefined {
+  if (raw === '') return undefined
+  const idx = Number(raw)
+  if (!Number.isInteger(idx) || idx < 0 || idx >= options.length) return undefined
+  return options[idx]
+}
+
+/**
+ * Produce a sensible empty value for a freshly-created array item or
+ * required prop. The admin form generator never wants `undefined` in
+ * an array; that breaks downstream PropInput defaults and confuses
+ * validators.
+ */
+export function defaultForType(type: PropType): unknown {
+  switch (type.kind) {
+    case 'string':
+      return ''
+    case 'number':
+      return 0
+    case 'boolean':
+      return false
+    case 'enum':
+      return type.values[0] ?? ''
+    case 'literal':
+      return type.value
+    case 'array':
+      return []
+    case 'object':
+      return Object.fromEntries(
+        type.fields.filter((f) => f.required).map((f) => [f.name, defaultForType(f.type)]),
+      )
+    case 'union': {
+      // Discriminated unions DO have a sensible structural default:
+      // pick the first variant and seed its required fields (plus the
+      // discriminator). This makes a Hero with a `cta: Link | Modal`
+      // prop render an editable form on first paint instead of forcing
+      // the editor through the JSON textarea fallback.
+      const detected = detectDiscriminator(type)
+      if (detected) {
+        const variant = detected.variants[0]!
+        const out: Record<string, unknown> = { [detected.field]: variant.value }
+        for (const field of variant.remainingFields) {
+          if (field.required) out[field.name] = defaultForType(field.type)
+        }
+        return out
+      }
+      return null
+    }
+    default:
+      // `reference`, `unknown`: there's no single sensible structural
+      // default. We return `null` instead of `undefined` so the value
+      // survives a JSON round-trip — `JSON.stringify` turns
+      // `undefined` array items into `null` anyway, which would
+      // contradict the documented "never undefined in an array"
+      // invariant and surface as the literal string `null` in the
+      // JsonFallback textarea.
+      return null
+  }
+}
+
+/**
+ * Seed an empty props object for a freshly-picked component using each
+ * prop's explicit `defaultValue` when set, else the structural default
+ * from {@link defaultForType} (only for required props — optional
+ * unset props stay absent so they render as empty inputs).
+ */
+export function seedPropsForComponent(spec: ComponentSpec): Record<string, unknown> {
+  const out: Record<string, unknown> = {}
+  for (const prop of spec.props) {
+    if (prop.defaultValue !== undefined && prop.defaultValue !== null) {
+      out[prop.name] = prop.defaultValue
+      continue
+    }
+    if (prop.required) {
+      const seed = defaultForType(prop.type)
+      // For non-discriminated `union` / `reference` / `unknown` kinds
+      // defaultForType returns `null` (so arrays survive a JSON
+      // round-trip), but seeding a top-level required prop with
+      // `null` would immediately trip the validator's "Missing
+      // required prop" branch on first render — the user would see
+      // a red error before they touched anything. Leave those
+      // required props absent so the absence and the validation
+      // message describe the same state honestly; the user provides
+      // a value via the JsonFallback. Discriminated unions return
+      // a structural default and seed cleanly.
+      if (seed !== null) {
+        out[prop.name] = seed
+      }
+    }
+  }
+  return out
+}
+
+/**
+ * Compute the next value for a discriminated-union field when the
+ * editor switches variants. Pure helper so the React component stays
+ * thin and the seeding rules can be unit-tested without rendering.
+ *
+ * Seeding rules:
+ *   1. The discriminator field is always written to the variant's
+ *      tag value.
+ *   2. Optional fields shared by both variants survive the switch
+ *      (preserves "edited the same label" intent across, e.g.,
+ *      Link → Modal where both carry `label`).
+ *   3. Required fields exclusive to the new variant are seeded by
+ *      priority: explicit `field.defaultValue` first (matches
+ *      `seedPropsForComponent`), else the structural default from
+ *      `defaultForType` — but only when that default is non-null.
+ *      A `null` from `defaultForType` (reference / unknown / non-
+ *      discriminated union types) is treated as "no sensible default"
+ *      and the field is left absent so the validator's
+ *      "missing required prop" message and the data agree.
+ *   4. Fields exclusive to the previous variant are dropped so the
+ *      value stays structurally valid against the chosen variant.
+ */
+export function switchUnionVariant(
+  current: unknown,
+  union: DiscriminatedUnion,
+  variant: DiscriminatedVariant,
+): Record<string, unknown> {
+  const obj = isPlainObject(current) ? current : {}
+  const next: Record<string, unknown> = { [union.field]: variant.value }
+  const carryable = new Set(variant.remainingFields.map((f) => f.name))
+  for (const [k, v] of Object.entries(obj)) {
+    if (k === union.field) continue
+    if (carryable.has(k)) next[k] = v
+  }
+  for (const field of variant.remainingFields) {
+    if (!field.required || next[field.name] !== undefined) continue
+    if (field.defaultValue !== undefined && field.defaultValue !== null) {
+      next[field.name] = field.defaultValue
+      continue
+    }
+    const seed = defaultForType(field.type)
+    if (seed !== null) {
+      next[field.name] = seed
+    }
+  }
+  return next
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+/**
+ * Build a minimal structural validator that mirrors the rules the
+ * cms-core `validateComponentBlockValue` runs server-side, so the form
+ * can show feedback without a round-trip. Kept in sync with cms-core
+ * by inspection; the canonical implementation lives there.
+ */
+export function buildClientValidator(
+  manifest: Manifest,
+  allow: string[] | undefined,
+): (value: ComponentBlockValue) => string | true {
+  // An empty `allow` array is treated the same way `getAllowedComponents`
+  // treats it: as "no filter". Without this, the picker shows every
+  // component while the validator rejects every selection, leading to
+  // a UI/validator deadlock.
+  const allowed = allow && allow.length > 0 ? new Set(allow) : null
+  return (value) => {
+    const spec = manifest.components.find((c) => c.name === value.component)
+    if (!spec) {
+      const known = manifest.components.map((c) => c.name).join(', ') || '<none>'
+      return `Unknown component '${value.component}'. Manifest knows: ${known}.`
+    }
+    if (allowed && !allowed.has(value.component)) {
+      return `Component '${value.component}' is not in the allow-list for this field.`
+    }
+    for (const propSpec of spec.props) {
+      const v = value.props[propSpec.name]
+      if (v === undefined || v === null) {
+        if (propSpec.required) {
+          return `Missing required prop '${propSpec.name}' for component '${value.component}'.`
+        }
+        continue
+      }
+      const err = clientShapeError(v, propSpec)
+      if (err) return err
+    }
+    return true
+  }
+}
+
+function clientShapeError(value: unknown, prop: PropSpec): string | null {
+  const t = prop.type
+  switch (t.kind) {
+    case 'string':
+      return typeof value === 'string' ? null : `Prop '${prop.name}' must be a string.`
+    case 'number':
+      return typeof value === 'number' && !Number.isNaN(value)
+        ? null
+        : `Prop '${prop.name}' must be a number.`
+    case 'boolean':
+      return typeof value === 'boolean' ? null : `Prop '${prop.name}' must be a boolean.`
+    case 'enum':
+      return t.values.includes(value as never)
+        ? null
+        : `Prop '${prop.name}' must be one of: ${t.values.join(', ')}.`
+    case 'array':
+      return Array.isArray(value) ? null : `Prop '${prop.name}' must be an array.`
+    case 'object': {
+      if (value === null || typeof value !== 'object' || Array.isArray(value)) {
+        return `Prop '${prop.name}' must be an object.`
+      }
+      // Recurse: check that each required nested field is present and
+      // structurally compatible. Without this, passing `{}` for an
+      // object prop with required `label` and `href` children sailed
+      // through the client validator while the server-side
+      // validateComponentBlockValue would reject it on save — a
+      // silent gap in the "live structural validation" promise.
+      const obj = value as Record<string, unknown>
+      for (const field of t.fields) {
+        const child = obj[field.name]
+        if (child === undefined || child === null) {
+          if (field.required) {
+            return `Prop '${prop.name}.${field.name}' is required but missing.`
+          }
+          continue
+        }
+        const childError = clientShapeError(child, {
+          ...field,
+          // Build a dotted path so parsePerPropErrors can attribute
+          // the error to the nested input, not just the outer prop.
+          name: `${prop.name}.${field.name}`,
+        })
+        if (childError) return childError
+      }
+      return null
+    }
+    case 'union': {
+      // Discriminated unions get the same recursive treatment as plain
+      // objects: route the value into the matching variant's schema
+      // and validate against that. Non-discriminated unions remain
+      // unvalidated on the client (server still catches them) — the
+      // shape is too open to assert structurally.
+      const detected = detectDiscriminator(t)
+      if (!detected) return null
+      if (value === null || typeof value !== 'object' || Array.isArray(value)) {
+        return `Prop '${prop.name}' must be an object with a '${detected.field}' discriminator.`
+      }
+      const variant = findVariant(value, detected)
+      if (!variant) {
+        const allowed = detected.variants.map((v) => JSON.stringify(v.value)).join(', ')
+        return `Prop '${prop.name}.${detected.field}' must be one of: ${allowed}.`
+      }
+      // Recurse into the variant's fields, scoped to the prop path.
+      // We treat the variant as an inline object so the existing
+      // object-branch logic applies verbatim.
+      return clientShapeError(value, {
+        name: prop.name,
+        required: prop.required,
+        type: variant.type,
+      })
+    }
+    default:
+      return null
+  }
+}
+
+/**
+ * The validator returns a single error string. The form wants to show
+ * the message under the specific input that triggered it — so we parse
+ * the message back into a sparse `{ propPath → message }` map. Pure
+ * function so it's trivial to unit-test.
+ */
+export function parsePerPropErrors(message: string | null): Record<string, string> {
+  if (!message) return {}
+  const propMatch = /Prop '([^']+)'/.exec(message)
+  if (propMatch) return { [propMatch[1]!]: message }
+  const missing = /Missing required prop '([^']+)'/.exec(message)
+  if (missing) return { [missing[1]!]: message }
+  return {}
+}

package/src/fields/index.ts

@@ -15,3 +15,7 @@ export type { BlockTypeDefinition } from './block-types.js'
 export { GroupField } from './GroupField.js'
 export { NavBuilderField } from './NavBuilderField.js'
 export { NumberField } from './NumberField.js'
+export { ComponentBlockField } from './ComponentBlockField.js'
+export type { ComponentBlockFieldProps, ComponentBlockValue } from './ComponentBlockField.js'
+export { PropInput, defaultForType } from './PropInput.js'
+export type { PropInputProps } from './PropInput.js'

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'
@@ -77,3 +105,10 @@ export { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts.js'
 export { cmsApi, setApiBase, ensureCsrfToken } from './lib/api.js'
 export { useApiData } from './lib/useApiData.js'
 export type { UseApiDataResult } from './lib/useApiData.js'
+
+export { ComponentBlockField, PropInput, defaultForType } from './fields/index.js'
+export type {
+  ComponentBlockFieldProps,
+  ComponentBlockValue,
+  PropInputProps,
+} from './fields/index.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>
+    </>
   )
 }