test(ci): add exporter heading levels and a11y typography smoke; update MAIN_PLAN

components/BuilderClientPage.previewViewport.persist.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen, fireEvent, cleanup } from '@testing-library/react'
+import { NextIntlClientProvider } from 'next-intl'
+import { describe, expect, test, beforeEach } from 'vitest'
+import BuilderClientPage from './BuilderClientPage'
+import messages from '../messages/en.json'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <NextIntlClientProvider messages={messages} locale="en">
+      {children}
+    </NextIntlClientProvider>
+  )
+}
+
+describe('BuilderClientPage - preview viewport persistence & placeholders', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    cleanup()
+  })
+
+  test('persists viewport selection in localStorage', () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    const container = screen.getByTestId('preview-container')
+    expect(container).toHaveClass('w-[768px]')
+
+    fireEvent.click(screen.getByRole('button', { name: /Mobile/i }))
+    expect(container).toHaveClass('w-[375px]')
+
+    // remount
+    cleanup()
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    const container2 = screen.getByTestId('preview-container')
+    expect(container2).toHaveClass('w-[375px]')
+  })
+
+  test('inspector inputs have helpful placeholders', () => {
+    render(
+      <Wrapper>
+        <BuilderClientPage />
+      </Wrapper>
+    )
+
+    expect(screen.getByLabelText('SEO Title')).toHaveAttribute('placeholder')
+    expect(screen.getByLabelText('SEO Description')).toHaveAttribute('placeholder')
+    expect(screen.getByLabelText('OG Image URL')).toHaveAttribute('placeholder')
+    expect(screen.getByLabelText('GA4 Measurement ID')).toHaveAttribute('placeholder')
+    expect(screen.getByLabelText('Meta Pixel ID')).toHaveAttribute('placeholder')
+  })
+})