@prenta/admin 1.9.2 → 1.10.0

package/src/__tests__/views/theme-chrome-frame.render.test.tsx

@@ -0,0 +1,304 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import type { PageSection } from '../../lib/page-editor-service.js'
+import { THEME_CHROME_MAIN_ID, type AdminThemeChromeProps } from '../../lib/theme-chrome.js'
+import { ThemeChromeProvider } from '../../views/page-editor/theme-chrome/ThemeChromeProvider.js'
+import { EditorCanvas } from '../../views/page-editor/EditorCanvas.js'
+
+afterEach(cleanup)
+
+const SECTION: PageSection = {
+  id: 's1',
+  sectionType: 'hero',
+  name: 'Hero Banner',
+  visible: true,
+  content: { heading: 'A headline' },
+  settings: {},
+}
+
+const FIFTH: PageSection = {
+  ...SECTION,
+  id: 's5',
+  name: 'Fifth',
+  content: { heading: 'Fifth band' },
+}
+
+function CompliantHeader(props: AdminThemeChromeProps) {
+  return (
+    <header>
+      <p>Acme</p>
+      <nav>
+        <a href="/about">About</a>
+      </nav>
+      <span data-testid="chrome-path">{props.document.path}</span>
+      <span data-testid="chrome-locale">{props.locale}</span>
+    </header>
+  )
+}
+
+function CompliantFooter() {
+  return <footer>© Acme</footer>
+}
+
+function H1Header() {
+  return (
+    <header>
+      <h1>Acme</h1>
+    </header>
+  )
+}
+
+function ThrowingHeader(): never {
+  throw new Error('header boom')
+}
+
+function defaultThemeChrome(
+  extra: Partial<NonNullable<Parameters<typeof EditorCanvas>[0]['themeChrome']>> = {},
+) {
+  return {
+    spec: extra.spec ?? {
+      header: CompliantHeader,
+      footer: CompliantFooter,
+    },
+    enabled: extra.enabled ?? true,
+    mode: extra.mode ?? 'flow',
+    locale: extra.locale ?? 'en',
+    dir: extra.dir ?? 'ltr',
+    document: extra.document ?? {
+      id: 'p1',
+      title: 'About',
+      path: '/about',
+      collection: 'pages',
+    },
+    onNavigate: extra.onNavigate ?? vi.fn(),
+  }
+}
+
+function canvas(overrides: Partial<Parameters<typeof EditorCanvas>[0]> = {}) {
+  const themeChrome = overrides.themeChrome
+    ? defaultThemeChrome(overrides.themeChrome)
+    : defaultThemeChrome()
+  return (
+    <ThemeChromeProvider value={themeChrome.spec}>
+      <EditorCanvas
+        sections={[
+          SECTION,
+          { ...SECTION, id: 's2' },
+          { ...SECTION, id: 's3' },
+          { ...SECTION, id: 's4' },
+          FIFTH,
+        ]}
+        selectedId={null}
+        breakpoint="wide"
+        onSelect={vi.fn()}
+        {...overrides}
+        themeChrome={overrides.themeChrome === undefined ? themeChrome : themeChrome}
+      />
+    </ThemeChromeProvider>
+  )
+}
+
+describe('EditorCanvas theme chrome', () => {
+  it('omits chrome when the prop is not enabled', () => {
+    render(
+      <EditorCanvas sections={[SECTION]} selectedId={null} breakpoint="wide" onSelect={vi.fn()} />,
+    )
+    expect(document.querySelector('[data-prenta-theme-chrome="header"]')).toBeNull()
+    expect(document.getElementById(THEME_CHROME_MAIN_ID)).toBeNull()
+  })
+
+  it('renders header then bands then footer in flow mode', () => {
+    const { container } = render(canvas())
+    const frame = container.querySelector('[data-prenta-theme-chrome-mode="flow"]')
+    expect(frame).toBeTruthy()
+    const header = frame!.querySelector('[data-prenta-theme-chrome="header"]')
+    const main = frame!.querySelector(`#${THEME_CHROME_MAIN_ID}`)
+    const footer = frame!.querySelector('[data-prenta-theme-chrome="footer"]')
+    expect(header).toBeTruthy()
+    expect(main).toBeTruthy()
+    expect(footer).toBeTruthy()
+    expect(header!.compareDocumentPosition(main!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(main!.compareDocumentPosition(footer!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    expect(container.querySelector('.prenta-canvas')?.getAttribute('lang')).toBe('en')
+    expect(container.querySelector('.prenta-canvas')?.getAttribute('dir')).toBe('ltr')
+  })
+
+  it('keeps chrome mounted in frame mode after selecting a middle band', () => {
+    const { rerender } = render(
+      canvas({
+        selectedId: 's5',
+        themeChrome: {
+          spec: { header: CompliantHeader, footer: CompliantFooter },
+          enabled: true,
+          mode: 'frame',
+          locale: 'en',
+          dir: 'ltr',
+          document: { id: 'p1', title: 'About', path: '/about', collection: 'pages' },
+          onNavigate: vi.fn(),
+        },
+      }),
+    )
+    expect(document.querySelector('[data-prenta-theme-chrome-mode="frame"]')).toBeTruthy()
+    expect(document.querySelector('[data-prenta-theme-chrome="header"]')).toBeTruthy()
+    expect(document.querySelector('[data-prenta-theme-chrome="footer"]')).toBeTruthy()
+    rerender(
+      canvas({
+        selectedId: 's5',
+        themeChrome: {
+          spec: { header: CompliantHeader, footer: CompliantFooter },
+          enabled: true,
+          mode: 'frame',
+          locale: 'en',
+          dir: 'ltr',
+          document: { id: 'p1', title: 'About', path: '/about', collection: 'pages' },
+          onNavigate: vi.fn(),
+        },
+      }),
+    )
+    expect(document.querySelector('[data-prenta-theme-chrome="header"]')).toBeTruthy()
+  })
+
+  it('still shows chrome when every band is hidden or the list is empty', () => {
+    render(
+      canvas({
+        sections: [],
+      }),
+    )
+    expect(document.querySelector('[data-prenta-theme-chrome="header"]')).toBeTruthy()
+    expect(document.querySelector('[data-prenta-theme-chrome="footer"]')).toBeTruthy()
+    expect(screen.getByText('This template renders no sections')).toBeTruthy()
+  })
+
+  it('opens the edit menu and routes Navigations through onNavigate', () => {
+    const onNavigate = vi.fn()
+    render(
+      <div className="prenta-admin" data-prenta-admin-root="">
+        {canvas({
+          themeChrome: {
+            spec: { header: CompliantHeader, footer: CompliantFooter },
+            enabled: true,
+            mode: 'flow',
+            locale: 'en',
+            dir: 'ltr',
+            document: { id: 'p1', title: 'About', path: '/about', collection: 'pages' },
+            onNavigate,
+          },
+        })}
+      </div>,
+    )
+    // Clicking the chrome surface (logo/name) is the Fortune-500 path — not
+    // only the pencil. Capture-phase opens the controlled menu.
+    fireEvent.click(screen.getByText('Acme'))
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Edit navigation' }))
+    expect(onNavigate).toHaveBeenCalledWith('/navigations')
+  })
+
+  it('does not follow a nav href', () => {
+    render(canvas())
+    const link = screen.getByRole('link', { name: 'About' })
+    const event = new MouseEvent('click', { bubbles: true, cancelable: true })
+    link.dispatchEvent(event)
+    expect(event.defaultPrevented).toBe(true)
+    expect(window.location.pathname).not.toBe('/about')
+  })
+
+  it('falls back when the header throws and still paints bands', () => {
+    render(
+      canvas({
+        themeChrome: {
+          spec: { header: ThrowingHeader, footer: CompliantFooter },
+          enabled: true,
+          mode: 'flow',
+          locale: 'en',
+          dir: 'ltr',
+          document: { id: 'p1', title: 'About', path: '/about', collection: 'pages' },
+          onNavigate: vi.fn(),
+        },
+      }),
+    )
+    expect(screen.getByText('Site header')).toBeTruthy()
+    expect(document.querySelector('[data-section-id="s1"]')).toBeTruthy()
+    expect(screen.getByText('© Acme')).toBeTruthy()
+  })
+
+  it('rejects an off-origin previewSrc and shows the placeholder', () => {
+    render(
+      canvas({
+        themeChrome: {
+          spec: {
+            previewSrc: { header: 'https://evil.example/header' },
+            footer: CompliantFooter,
+          },
+          enabled: true,
+          mode: 'flow',
+          locale: 'en',
+          dir: 'ltr',
+          document: { id: 'p1', title: 'About', path: '/about', collection: 'pages' },
+          onNavigate: vi.fn(),
+        },
+      }),
+    )
+    expect(document.querySelector('iframe')).toBeNull()
+    expect(document.querySelector('[data-prenta-theme-chrome-placeholder="header"]')).toBeTruthy()
+  })
+
+  it('puts locale, dir, and the public path on the frame — not an admin route', () => {
+    render(
+      canvas({
+        themeChrome: {
+          spec: { header: CompliantHeader, footer: CompliantFooter },
+          enabled: true,
+          mode: 'flow',
+          locale: 'ar',
+          dir: 'rtl',
+          document: { id: 'p1', title: 'About', path: '/ar/about', collection: 'pages' },
+          onNavigate: vi.fn(),
+        },
+      }),
+    )
+    const frame = document.querySelector('[data-prenta-theme-chrome-mode]')
+    expect(frame?.getAttribute('data-prenta-theme-chrome-locale')).toBe('ar')
+    expect(frame?.getAttribute('data-prenta-theme-chrome-dir')).toBe('rtl')
+    expect(frame?.getAttribute('data-prenta-theme-chrome-path')).toBe('/ar/about')
+    expect(screen.getByTestId('chrome-path').textContent).toBe('/ar/about')
+    expect(screen.getByTestId('chrome-locale').textContent).toBe('ar')
+  })
+
+  it('warns when the header renders an h1', () => {
+    render(
+      canvas({
+        themeChrome: {
+          spec: { header: H1Header, footer: CompliantFooter },
+          enabled: true,
+          mode: 'flow',
+          locale: 'en',
+          dir: 'ltr',
+          document: { id: 'p1', title: 'About', path: '/about', collection: 'pages' },
+          onNavigate: vi.fn(),
+        },
+      }),
+    )
+    expect(document.querySelector('[data-prenta-theme-chrome-outline-warning]')).toBeTruthy()
+    expect(screen.getByText(/Chrome uses H1/)).toBeTruthy()
+  })
+
+  it('does not warn for a compliant header', () => {
+    render(canvas())
+    expect(document.querySelector('[data-prenta-theme-chrome-outline-warning]')).toBeNull()
+  })
+
+  it('keeps chrome visible in review mode and does not select chrome as a section', () => {
+    const onSelect = vi.fn()
+    render(
+      canvas({
+        reviewing: true,
+        onSelect,
+        reviewBar: <div>Reviewing</div>,
+      }),
+    )
+    expect(document.querySelector('[data-prenta-theme-chrome="header"]')).toBeTruthy()
+    fireEvent.click(screen.getByText('Acme'))
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+})

package/src/index.ts

@@ -14,6 +14,23 @@ export type {
   AdminRenderImageProps,
 } from './views/page-editor/sections/index.js'
 
+export type {
+  AdminThemeChrome,
+  AdminThemeChromeProps,
+  AdminThemeChromeRenderer,
+  ThemeChromeDocument,
+  ThemeChromeEditTarget,
+  ThemeChromeMode,
+  ThemeChromeSurface,
+} from './lib/theme-chrome.js'
+export {
+  isThemeChromeEnabled,
+  isSameOriginPreviewSrc,
+  themeChromeEditPath,
+  THEME_CHROME_MAIN_ID,
+} from './lib/theme-chrome.js'
+export { useThemeChromeContext } from './views/page-editor/theme-chrome/index.js'
+
 export { Layout } from './layout/Layout.js'
 export type { LayoutProps } from './layout/Layout.js'
 export { Sidebar } from './layout/Sidebar.js'

package/src/lib/theme-chrome.ts

@@ -0,0 +1,172 @@
+/**
+ * Theme chrome — site header/footer in the page editor canvas.
+ *
+ * Pure helpers and the public contract. React lives in
+ * `views/page-editor/theme-chrome/`. Do not put renderers on
+ * `prenta.config.ts` — this file is imported from the admin bundle only.
+ */
+
+import type { ReactNode } from 'react'
+import type { BreakpointId } from './breakpoints.js'
+
+export type ThemeChromeMode = 'flow' | 'frame'
+export type ThemeChromeSurface = 'pages' | 'posts'
+export type ThemeChromeEditTarget = 'navigations' | 'appearance' | 'settings'
+export type ThemeChromeSlotStatus = 'ok' | 'preview' | 'fallback' | 'placeholder'
+
+export interface ThemeChromeDocument {
+  id: string | null
+  title: string
+  path: string
+  collection: string
+}
+
+export interface AdminThemeChromeProps {
+  region: 'header' | 'footer'
+  breakpoint: BreakpointId
+  mode: ThemeChromeMode
+  preview: true
+  locale: string
+  dir: 'ltr' | 'rtl'
+  document: ThemeChromeDocument
+  onEditChrome: (target: ThemeChromeEditTarget) => void
+}
+
+export type AdminThemeChromeRenderer = (props: AdminThemeChromeProps) => ReactNode
+
+export interface AdminThemeChrome {
+  header?: AdminThemeChromeRenderer
+  footer?: AdminThemeChromeRenderer
+  /** Shown when header/footer throw or are omitted but chrome is enabled. */
+  fallback?: AdminThemeChromeRenderer
+  /**
+   * Same-origin URL for hosts whose real chrome is server-only.
+   * Rendered in a sandboxed iframe inside the chrome slot; never the whole page.
+   */
+  previewSrc?: { header?: string; footer?: string }
+  /** Surfaces that mount chrome. Default: pages only. */
+  surfaces?: ThemeChromeSurface[]
+  /** Default canvas mode. Default: flow (real document scroll). */
+  defaultMode?: ThemeChromeMode
+  /**
+   * Optional health-strip extras. Hosts that already know nav/brand state
+   * can pass them; the canvas will not fetch on their behalf.
+   */
+  diagnostics?: { navLinkCount?: number; brandPresent?: boolean }
+}
+
+export const THEME_CHROME_MODE_KEY = 'prenta-theme-chrome-mode'
+export const THEME_CHROME_MAIN_ID = 'prenta-canvas-main'
+
+export function isThemeChromeEnabled(
+  spec: AdminThemeChrome | null | undefined,
+  killSwitch: boolean | { pages?: boolean; posts?: boolean } | undefined,
+  surface: ThemeChromeSurface,
+): boolean {
+  if (!spec) return false
+  const surfaces = spec.surfaces ?? ['pages']
+  if (!surfaces.includes(surface)) return false
+  if (killSwitch === false) return false
+  if (killSwitch && typeof killSwitch === 'object' && killSwitch[surface] === false) {
+    return false
+  }
+  return true
+}
+
+export function readStoredChromeMode(): ThemeChromeMode | null {
+  if (typeof window === 'undefined') return null
+  try {
+    const value = window.localStorage.getItem(THEME_CHROME_MODE_KEY)
+    return value === 'flow' || value === 'frame' ? value : null
+  } catch {
+    return null
+  }
+}
+
+export function writeStoredChromeMode(mode: ThemeChromeMode): void {
+  if (typeof window === 'undefined') return
+  try {
+    window.localStorage.setItem(THEME_CHROME_MODE_KEY, mode)
+  } catch {
+    // Private mode / quota — mode still works for this session.
+  }
+}
+
+export function resolveThemeChromeLocale(opts: {
+  documentLocale?: string | null
+  activeLocale?: string | null
+  defaultLocale?: string | null
+}): string {
+  const picked = opts.documentLocale || opts.activeLocale || opts.defaultLocale || 'en'
+  return picked.trim() || 'en'
+}
+
+export function resolveThemeChromeDir(
+  locale: string,
+  locales: Array<{ code: string; dir?: 'ltr' | 'rtl' }>,
+): 'ltr' | 'rtl' {
+  return locales.find((entry) => entry.code === locale)?.dir === 'rtl' ? 'rtl' : 'ltr'
+}
+
+/**
+ * Public path for chrome context. Serving-path first; never an admin route.
+ */
+export function resolveThemeChromePath(path: string | null | undefined, slug?: string): string {
+  const trimmed = (path ?? '').trim()
+  if (trimmed) return trimmed.startsWith('/') ? trimmed : `/${trimmed}`
+  const s = (slug ?? '').trim().replace(/^\/+/, '')
+  if (!s || s === 'home' || s === 'index') return '/'
+  return `/${s}`
+}
+
+export function themeChromeEditPath(target: ThemeChromeEditTarget): string {
+  switch (target) {
+    case 'navigations':
+      return '/navigations'
+    case 'appearance':
+      return '/settings?tab=appearance'
+    case 'settings':
+      return '/settings?tab=general'
+    default: {
+      const _exhaustive: never = target
+      return _exhaustive
+    }
+  }
+}
+
+/**
+ * Same-origin chrome-only preview URLs. Relative paths starting with `/`
+ * (not `//`) are allowed. Absolute URLs must match `origin`. Protocol-relative,
+ * data:, javascript:, and off-origin URLs are rejected.
+ */
+export function isSameOriginPreviewSrc(src: string, origin?: string): boolean {
+  const trimmed = src.trim()
+  if (!trimmed) return false
+  if (trimmed.startsWith('/') && !trimmed.startsWith('//')) {
+    return !trimmed.toLowerCase().startsWith('/\\') && !/^[a-z][a-z0-9+.-]*:/i.test(trimmed)
+  }
+  let parsed: URL
+  try {
+    parsed = new URL(trimmed)
+  } catch {
+    return false
+  }
+  if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return false
+  const expected = origin ?? (typeof window !== 'undefined' ? window.location.origin : '')
+  if (!expected) return false
+  try {
+    return parsed.origin === new URL(expected).origin
+  } catch {
+    return false
+  }
+}
+
+export function chromeContainsH1(root: ParentNode | null): boolean {
+  return Boolean(root?.querySelector('h1'))
+}
+
+export function closestAnchor(target: EventTarget | null): HTMLAnchorElement | null {
+  if (!(target instanceof Element)) return null
+  const found = target.closest('a[href]')
+  return found instanceof HTMLAnchorElement ? found : null
+}

package/src/views/page-editor/CanvasSurface.tsx

@@ -21,6 +21,17 @@ export interface CanvasSurfaceProps {
   onCanvasElement?: (el: HTMLElement | null) => void
   /** Tips, notices, or the review bar — rendered above the meta line. */
   chrome?: React.ReactNode
+  /** Theme-chrome health strip — locale, slot status, outline warning. */
+  health?: React.ReactNode
+  /** `lang` on `.prenta-canvas` when theme chrome is mounted. */
+  lang?: string
+  /** `dir` on `.prenta-canvas` when theme chrome is mounted. */
+  dir?: 'ltr' | 'rtl'
+  /**
+   * `frame` fills the remaining pane and expects children to scroll internally.
+   * `flow` (default) sizes the canvas from content height, as today.
+   */
+  fillMode?: 'flow' | 'frame'
   /** The page itself. Rendered inside the scaled, container-queried surface. */
   children: React.ReactNode
 }
@@ -57,14 +68,22 @@ export function CanvasSurface({
   onScaleChange,
   onCanvasElement,
   chrome,
+  health,
+  lang,
+  dir,
+  fillMode = 'flow',
   children,
 }: CanvasSurfaceProps) {
   const bp = getBreakpoint(breakpoint)
   const sentinelRef = useRef<HTMLDivElement>(null)
   const surfaceRef = useRef<HTMLDivElement>(null)
+  const areaRef = useRef<HTMLDivElement>(null)
 
   const [available, setAvailable] = useState(0)
   const [pageHeight, setPageHeight] = useState(0)
+  const [areaHeight, setAreaHeight] = useState(0)
+
+  const isFrame = fillMode === 'frame'
 
   // No dependency array: page height changes on edits that resize nothing the
   // observer watches. Both setters bail when the value is unchanged, so this
@@ -76,6 +95,9 @@ export function CanvasSurface({
 
       const height = surfaceRef.current?.offsetHeight ?? 0
       if (height > 0) setPageHeight((prev) => (prev === height ? prev : height))
+
+      const area = areaRef.current?.clientHeight ?? 0
+      if (area > 0) setAreaHeight((prev) => (prev === area ? prev : area))
     }
 
     measure()
@@ -83,10 +105,12 @@ export function CanvasSurface({
     const ro = new ResizeObserver(measure)
     if (sentinelRef.current) ro.observe(sentinelRef.current)
     if (surfaceRef.current) ro.observe(surfaceRef.current)
+    if (areaRef.current) ro.observe(areaRef.current)
     return () => ro.disconnect()
   })
 
   const scale = fitScale(available, bp.width, zoom)
+  const frameUnscaledHeight = isFrame && scale > 0 && areaHeight > 0 ? areaHeight / scale : 0
 
   useEffect(() => {
     onScaleChange?.(scale)
@@ -104,6 +128,7 @@ export function CanvasSurface({
 
       {chrome}
       <CanvasMetaLine breakpoint={bp} pageHeight={pageHeight} scale={scale} />
+      {health}
 
       {/*
        * Fit box: reserves the scaled footprint so the surrounding scroll area
@@ -112,32 +137,41 @@ export function CanvasSurface({
        * that is not visible never finishes one) reports a bogus height and
        * corrupts the next measurement.
        */}
-      <div
-        className="prenta-canvas-fit mx-auto block"
-        style={{
-          width: Math.round(bp.width * scale),
-          height: pageHeight ? Math.round(pageHeight * scale) : undefined,
-        }}
-      >
-        {/* `prenta-canvas` is the public hook for consumer brand CSS: site
-            styles that should render in this preview scope to
-            `.prenta-admin .prenta-canvas` instead of the admin root. It also
-            carries `container-type: inline-size` (theme.css) — that is what
-            makes the `@pv-*` steps in the section renderers resolve against
-            the simulated width instead of the viewport. */}
+      <div ref={areaRef} className={isFrame ? 'relative min-h-0 flex-1' : undefined}>
         <div
-          ref={(el) => {
-            surfaceRef.current = el
-            onCanvasElement?.(el)
-          }}
-          className="prenta-canvas border-border bg-card origin-top-left overflow-hidden rounded-lg text-left shadow-[0_2px_20px_rgba(0,0,0,0.12)] motion-safe:transition-[width,transform] motion-safe:duration-(--mo-slow) motion-safe:ease-(--ease)"
+          className="prenta-canvas-fit mx-auto block"
           style={{
-            width: bp.width,
-            transform: `scale(${scale})`,
-            transformOrigin: 'top left',
+            width: Math.round(bp.width * scale),
+            height: isFrame
+              ? areaHeight || undefined
+              : pageHeight
+                ? Math.round(pageHeight * scale)
+                : undefined,
           }}
         >
-          {children}
+          {/* `prenta-canvas` is the public hook for consumer brand CSS: site
+              styles that should render in this preview scope to
+              `.prenta-admin .prenta-canvas` instead of the admin root. It also
+              carries `container-type: inline-size` (theme.css) — that is what
+              makes the `@pv-*` steps in the section renderers resolve against
+              the simulated width instead of the viewport. */}
+          <div
+            ref={(el) => {
+              surfaceRef.current = el
+              onCanvasElement?.(el)
+            }}
+            lang={lang}
+            dir={dir}
+            className="prenta-canvas border-border bg-card origin-top-left overflow-hidden rounded-lg text-left shadow-[0_2px_20px_rgba(0,0,0,0.12)] motion-safe:transition-[width,transform] motion-safe:duration-(--mo-slow) motion-safe:ease-(--ease)"
+            style={{
+              width: bp.width,
+              height: isFrame && frameUnscaledHeight ? frameUnscaledHeight : undefined,
+              transform: `scale(${scale})`,
+              transformOrigin: 'top left',
+            }}
+          >
+            {children}
+          </div>
         </div>
       </div>
     </>
@@ -145,9 +179,21 @@ export function CanvasSurface({
 }
 
 /** The scroll container both editors wrap their surface in. */
-export function CanvasScroll({ children }: { children: React.ReactNode }) {
+export function CanvasScroll({
+  children,
+  layout = 'flow',
+}: {
+  children: React.ReactNode
+  layout?: 'flow' | 'frame'
+}) {
   return (
-    <div className="prenta-canvas-scroll bg-muted h-full overflow-auto px-6 pt-4.5 pb-10 text-center">
+    <div
+      className={
+        layout === 'frame'
+          ? 'prenta-canvas-scroll bg-muted flex h-full min-h-0 flex-col overflow-hidden px-6 pt-4.5 pb-10 text-center'
+          : 'prenta-canvas-scroll bg-muted h-full overflow-auto px-6 pt-4.5 pb-10 text-center'
+      }
+    >
       {children}
     </div>
   )