@prenta/admin 1.9.1 → 1.10.0

package/src/__tests__/assets/prenta-logo.test.tsx

@@ -0,0 +1,26 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import { render } from '@testing-library/react'
+import { PRENTA_ACCENT, PrentaBrandLogo, PrentaMark } from '../../assets/prenta-logo.js'
+
+describe('bundled Prenta lockup', () => {
+  it('renders the wordmark as Prenta with the accent ellipsis dot', () => {
+    const { container } = render(<PrentaBrandLogo />)
+    expect(container.querySelector('svg')?.getAttribute('aria-label')).toBe('Prenta')
+    expect(container.textContent).toContain('Prenta')
+    const dots = container.querySelectorAll('circle')
+    expect(dots).toHaveLength(3)
+    expect(dots[2]?.getAttribute('fill')).toBe(PRENTA_ACCENT)
+    expect(container.innerHTML).not.toContain('#F05E65')
+  })
+
+  it('renders the compact P… mark without the retired Actuate A', () => {
+    const { container } = render(<PrentaMark />)
+    expect(container.querySelector('svg')?.getAttribute('aria-label')).toBe('Prenta')
+    expect(container.querySelector('polygon')).toBeNull()
+    expect(container.innerHTML).not.toContain('#F05E65')
+    const dots = container.querySelectorAll('circle')
+    expect(dots).toHaveLength(3)
+    expect(dots[2]?.getAttribute('fill')).toBe(PRENTA_ACCENT)
+  })
+})

package/src/__tests__/layout/sidebar-brand.render.test.tsx

@@ -64,6 +64,21 @@ afterEach(() => {
  * the neutral logo placeholder — NOT a filled initials badge, which reads as a
  * user avatar (the real account avatar already lives top-right).
  */
+describe('Sidebar bundled Prenta fallback', () => {
+  it('shows the Prenta wordmark when the install is unbranded — expanded', () => {
+    setTheme({ initials: 'A' })
+    renderSidebar(false)
+    expect(screen.getByRole('img', { name: 'Prenta' })).toBeTruthy()
+    expect(screen.queryByText('Actuate Media')).toBeNull()
+  })
+
+  it('shows the Prenta mark when the install is unbranded — collapsed', () => {
+    setTheme({ initials: 'A' })
+    renderSidebar(true)
+    expect(screen.getByRole('img', { name: 'Prenta' })).toBeTruthy()
+  })
+})
+
 describe('Sidebar brand placeholder', () => {
   it('renders the logo placeholder (not an initials avatar) when branded with no logo — expanded', () => {
     renderSidebar(false, { admin: { branding: { name: 'Acme Co' } } })

package/src/__tests__/lib/theme-chrome.test.ts

@@ -0,0 +1,132 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest'
+import { auditPage } from '@prenta/core/seo/page-audit'
+import {
+  chromeContainsH1,
+  closestAnchor,
+  isSameOriginPreviewSrc,
+  isThemeChromeEnabled,
+  resolveThemeChromeDir,
+  resolveThemeChromeLocale,
+  resolveThemeChromePath,
+  themeChromeEditPath,
+} from '../../lib/theme-chrome.js'
+
+describe('isThemeChromeEnabled', () => {
+  const spec = {}
+
+  it('is off when the AdminRoot prop is omitted', () => {
+    expect(isThemeChromeEnabled(null, undefined, 'pages')).toBe(false)
+  })
+
+  it('defaults to pages only', () => {
+    expect(isThemeChromeEnabled(spec, undefined, 'pages')).toBe(true)
+    expect(isThemeChromeEnabled(spec, undefined, 'posts')).toBe(false)
+  })
+
+  it('honours the config kill-switch', () => {
+    expect(isThemeChromeEnabled(spec, false, 'pages')).toBe(false)
+    expect(isThemeChromeEnabled(spec, { pages: false }, 'pages')).toBe(false)
+    expect(isThemeChromeEnabled({ surfaces: ['pages', 'posts'] }, { posts: false }, 'posts')).toBe(
+      false,
+    )
+  })
+})
+
+describe('isSameOriginPreviewSrc', () => {
+  it('accepts same-origin relative paths', () => {
+    expect(isSameOriginPreviewSrc('/preview/chrome/header')).toBe(true)
+  })
+
+  it('rejects protocol-relative and off-origin URLs', () => {
+    expect(isSameOriginPreviewSrc('//evil.example/x')).toBe(false)
+    expect(isSameOriginPreviewSrc('https://evil.example/header', 'https://cms.example')).toBe(false)
+    expect(isSameOriginPreviewSrc('javascript:alert(1)')).toBe(false)
+    expect(isSameOriginPreviewSrc('data:text/html,hi')).toBe(false)
+  })
+
+  it('accepts an absolute URL on the same origin', () => {
+    expect(
+      isSameOriginPreviewSrc('https://cms.example/preview/chrome/header', 'https://cms.example'),
+    ).toBe(true)
+  })
+})
+
+describe('theme chrome locale and path', () => {
+  it('prefers document locale, then active, then default', () => {
+    expect(
+      resolveThemeChromeLocale({
+        documentLocale: 'ar',
+        activeLocale: 'en',
+        defaultLocale: 'de',
+      }),
+    ).toBe('ar')
+    expect(resolveThemeChromeLocale({ activeLocale: 'fr', defaultLocale: 'en' })).toBe('fr')
+    expect(resolveThemeChromeLocale({})).toBe('en')
+  })
+
+  it('resolves dir from i18n locale list', () => {
+    expect(resolveThemeChromeDir('ar', [{ code: 'ar', dir: 'rtl' }])).toBe('rtl')
+    expect(resolveThemeChromeDir('en', [{ code: 'en' }])).toBe('ltr')
+  })
+
+  it('uses the public path, never an admin route', () => {
+    expect(resolveThemeChromePath('/about', 'about')).toBe('/about')
+    expect(resolveThemeChromePath('', 'home')).toBe('/')
+    expect(resolveThemeChromePath('contact')).toBe('/contact')
+    expect(resolveThemeChromePath('')).toBe('/')
+  })
+
+  it('maps edit targets to existing admin routes', () => {
+    expect(themeChromeEditPath('navigations')).toBe('/navigations')
+    expect(themeChromeEditPath('appearance')).toBe('/settings?tab=appearance')
+    expect(themeChromeEditPath('settings')).toBe('/settings?tab=general')
+  })
+})
+
+describe('chrome outline helpers', () => {
+  it('detects an h1 inside chrome', () => {
+    const root = document.createElement('div')
+    root.innerHTML = '<header><h1>Site</h1></header>'
+    expect(chromeContainsH1(root)).toBe(true)
+    root.innerHTML = '<header><p>Site</p></header>'
+    expect(chromeContainsH1(root)).toBe(false)
+  })
+
+  it('finds the closest anchor', () => {
+    const root = document.createElement('div')
+    root.innerHTML = '<a href="/about"><span>About</span></a>'
+    const span = root.querySelector('span')
+    expect(closestAnchor(span)?.getAttribute('href')).toBe('/about')
+    expect(closestAnchor(root)).toBeNull()
+  })
+})
+
+describe('page-audit stays body-only', () => {
+  it('does not pass brand-up-front just because a brand name exists', () => {
+    const result = auditPage({
+      sections: [
+        {
+          id: 's1',
+          sectionType: 'text',
+          name: 'Body',
+          visible: true,
+          content: { body: 'A long enough opening that still never names the company at all.' },
+          settings: {},
+        },
+      ],
+      seo: {
+        title: 'About',
+        description: 'About the firm',
+        slug: 'about',
+        keyword: '',
+        schema: 'WebPage',
+        robots: { index: true, snippet: true },
+      },
+      llmsTxt: true,
+      brand: 'Acme Legal',
+    })
+    const brand = result.geo.checks.find((c) => c.id === 'brand-up-front')
+    expect(brand?.outcome).toBe('fail')
+  })
+})

package/src/__tests__/views/editor-top-bar.render.test.tsx

@@ -241,4 +241,17 @@ describe('EditorTopBar history button', () => {
     expect(screen.getByRole('button', { name: 'Post settings' })).toBeTruthy()
     expect(screen.queryByRole('button', { name: 'Page settings' })).toBeNull()
   })
+
+  it('hides the Page / Frame toggle until theme chrome is on', () => {
+    render(<EditorTopBar {...baseProps} />)
+    expect(screen.queryByRole('group', { name: /Canvas layout/ })).toBeNull()
+  })
+
+  it('toggles Page and Frame when theme chrome is enabled', () => {
+    const onChromeMode = vi.fn()
+    render(<EditorTopBar {...baseProps} chromeMode="flow" onChromeMode={onChromeMode} />)
+    expect(screen.getByRole('button', { name: /^Page$/ }).getAttribute('aria-pressed')).toBe('true')
+    fireEvent.click(screen.getByRole('button', { name: /^Frame$/ }))
+    expect(onChromeMode).toHaveBeenCalledWith('frame')
+  })
 })

package/src/__tests__/views/login-branding.render.test.tsx

@@ -32,8 +32,9 @@ describe('Login — logo resolution', () => {
     render(<Login onLogin={onLogin} />)
     // Bundled SVG exposes role="img" + aria-label="Prenta".
     expect(screen.getByRole('img', { name: 'Prenta' })).toBeTruthy()
-    // No <img> logo element.
+    // No <img> logo element, and the wordmark already says Prenta — no extra headline.
     expect(screen.queryByRole('img', { name: 'Prenta CMS' })).toBeNull()
+    expect(screen.queryByRole('heading', { name: 'Prenta CMS' })).toBeNull()
     await waitFor(() => expect(cmsApiMock).toHaveBeenCalledWith('/public/brand'))
   })
 

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/assets/prenta-logo.tsx

@@ -1,8 +1,11 @@
 /**
- * Default Prenta wordmark for the admin sidebar (top-left) and the login
- * screen: a rounded-square mark with a stencil "P" cutout plus the product
- * name. Everything renders in `currentColor`, so the logo follows the
- * surrounding theme in both light and dark mode with no baked-in palette.
+ * Default Prenta brand lockup for the admin sidebar (top-left) and the login
+ * screen: the word "Prenta" plus a three-dot ellipsis (last dot is the brand
+ * red). The collapsed sidebar uses the matching "P…" mark.
+ *
+ * Letterforms and the first two dots render in `currentColor` so the lockup
+ * follows the surrounding theme in light and dark mode. The accent dot is the
+ * one baked-in brand color.
  *
  * Integrators override this default via:
  *   defineConfig({
@@ -20,42 +23,65 @@ export interface BrandLogoProps {
   className?: string
 }
 
+/** Brand-red accent used for the final ellipsis dot. */
+export const PRENTA_ACCENT = '#E30613'
+
+const FONT = "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
+
 /**
- * Inline SVG renderer for the Prenta wordmark. Ships as JSX (no bundler asset
- * pipeline required — works under Next.js, Vite, Webpack, esbuild, etc.).
- * The wordmark text inherits the admin font stack; `textLength` pins the
- * rendered width so the lockup stays proportioned across font fallbacks.
+ * Compact "P…" mark for the collapsed sidebar rail and other square slots.
  */
-export function PrentaBrandLogo({ className }: BrandLogoProps): ReactElement {
+export function PrentaMark({ className }: BrandLogoProps): ReactElement {
   return (
     <svg
-      viewBox="0 0 128 28"
+      viewBox="0 0 48 48"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
       role="img"
       aria-label="Prenta"
-      style={{ shapeRendering: 'geometricPrecision' }}
     >
-      {/* Mark: rounded square with a stencil "P" cutout (even-odd fill). */}
       <path
         fill="currentColor"
         fillRule="evenodd"
-        d="M6 3 H16 A6 6 0 0 1 22 9 V19 A6 6 0 0 1 16 25 H6 A6 6 0 0 1 0 19 V9 A6 6 0 0 1 6 3 Z M7.5 8.5 H13 A4.5 4.5 0 0 1 13 17.5 H10 V20.5 H7.5 Z M10 11 H12.8 A2 2 0 0 1 12.8 15 H10 Z"
+        d="M8 4h10.5c8.2 0 13.5 4.4 13.5 12.2 0 7.7-5.3 12.1-13.5 12.1H16v15.7H8V4zm8 6.4v11.4h2.2c4.7 0 7.4-2.3 7.4-5.7 0-3.5-2.7-5.7-7.4-5.7H16z"
       />
-      {/* Wordmark */}
+      <circle cx="26" cy="43.2" r="2.7" fill="currentColor" />
+      <circle cx="34.2" cy="43.2" r="2.7" fill="currentColor" />
+      <circle cx="42.4" cy="43.2" r="2.7" fill={PRENTA_ACCENT} />
+    </svg>
+  )
+}
+
+/**
+ * Horizontal "Prenta…" wordmark. Ships as JSX (no bundler asset pipeline —
+ * works under Next.js, Vite, Webpack, esbuild). `textLength` pins the
+ * rendered width so the lockup stays proportioned across font fallbacks.
+ */
+export function PrentaBrandLogo({ className }: BrandLogoProps): ReactElement {
+  return (
+    <svg
+      viewBox="0 0 168 32"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      role="img"
+      aria-label="Prenta"
+    >
       <text
-        x="30"
-        y="20.5"
-        fontFamily="inherit"
-        fontSize="19"
-        fontWeight="600"
-        letterSpacing="-0.3"
+        x="0"
+        y="24"
+        fontFamily={FONT}
+        fontSize="22"
+        fontWeight="700"
+        letterSpacing="-0.6"
         fill="currentColor"
-        textLength="72"
+        textLength="104"
         lengthAdjust="spacingAndGlyphs"
       >
         Prenta
       </text>
+      <circle cx="118" cy="20" r="3.1" fill="currentColor" />
+      <circle cx="130.5" cy="20" r="3.1" fill="currentColor" />
+      <circle cx="143" cy="20" r="3.1" fill={PRENTA_ACCENT} />
     </svg>
   )
 }

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'