auto: PR for feat/export-css-tokens-deep (#83)

Automated PR created on push to feat/export-css-tokens-deep

Reviewed-on: #83
Co-authored-by: Jaybe <master@jaybe.dev>
Co-committed-by: Jaybe <master@jaybe.dev>

lib/exporter/image.responsive.options.matrix.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import type { ExportOptions } from '@/lib/exporter/html'
+import type { Page } from '@/lib/schema/page'
+
+const basePage: Page = {
+  title: 'Img Matrix',
+  locale: 'en',
+  theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
+  sections: [
+    { type: 'hero', props: { heading: 'Hero', subheading: '', imageUrl: 'https://example.com/hero.jpg' } },
+  ],
+  form: {
+    actionUrl: '',
+    fields: [],
+    spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
+  },
+  analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+  seo: { title: 'T', description: 'D' },
+}
+
+describe('image responsive options - matrix', () => {
+  it('applies loading and decoding attributes from options', () => {
+    const opts: ExportOptions = { imageLoading: 'eager', imageDecoding: 'sync' }
+    const { html } = exportPage(basePage, opts)
+    expect(html).toMatch(/<img[^>]*loading="eager"/)
+    expect(html).toMatch(/<img[^>]*decoding="sync"/)
+  })
+
+  it('sets fetchpriority="low" when specified', () => {
+    const opts: ExportOptions = { imageFetchPriority: 'low' }
+    const { html } = exportPage(basePage, opts)
+    expect(html).toMatch(/<img[^>]*fetchpriority="low"/)
+  })
+
+  it('prefers preset sizes over auto default when both provided (no explicit sizes)', () => {
+    const opts: ExportOptions = {
+      imageSrcset: 'https://example.com/hero.jpg 1x, https://example.com/hero@2x.jpg 2x',
+      imageAutoSizes: true,
+      imageSizesPreset: 'mobile-first',
+    }
+    const { html } = exportPage(basePage, opts)
+    // preset should win over default auto sizes
+    expect(html).toMatch(/<img[^>]*sizes="\(max-width: 640px\) 100vw, 800px"/)
+  })
+})

lib/wysiwyg/export.css.regression.snapshot.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest'
+import { exportFrame } from '@/lib/wysiwyg/export'
+import type { Frame } from '@/lib/wysiwyg/schema'
+
+function baseFrame(bg = '#111111'): Frame {
+  return {
+    id: 'f', width: 320, height: 200, background: bg,
+    layers: [{ id: 'l1', name: 'Base', visible: true, locked: false, objects: [] }],
+  }
+}
+
+describe('wysiwyg export - CSS regression (tokens + rules presence)', () => {
+  it('contains core tokens and rules across themes and states', () => {
+    const out = exportFrame(baseFrame('#222222'))
+    const css = out.css
+    // root and theme tokens
+    expect(css).toMatch(/:root\s*{[^}]*--bg:/)
+    expect(css).toMatch(/\[data-theme="light"\]\s*{[^}]*--bg:/)
+    expect(css).toMatch(/\[data-theme="dark"\]\s*{[^}]*--bg:/)
+    // base usage
+    expect(css).toMatch(/\.frame\s*{[^}]*background:var\(--bg\)/)
+    expect(css).toMatch(/a\s*{[^}]*color:var\(--primary\)/)
+    // controls base
+    expect(css).toMatch(/input,select,textarea\s*{[^}]*color:var\(--text\)/)
+    expect(css).toMatch(/input,select,textarea\s*{[^}]*border:1px solid var\(--border\)/)
+    // states
+    expect(css).toMatch(/input:focus,select:focus,textarea:focus\s*{[^}]*outline:2px solid var\(--primary\)/)
+    expect(css).toMatch(/:focus-visible\s*{[^}]*outline:2px solid var\(--ring\)/)
+    expect(css).toMatch(/:focus-visible\s*{[^}]*outline-offset:var\(--ring-offset\)/)
+    expect(css).toMatch(/input:invalid,select:invalid,textarea:invalid\s*{[^}]*border-color:var\(--danger\)/)
+    expect(css).toMatch(/input:disabled,select:disabled,textarea:disabled\s*{[^}]*background:var\(--disabled-bg\)/)
+    expect(css).toMatch(/input\[readonly\],select\[readonly\],textarea\[readonly\]\s*{[^}]*color:var\(--disabled-fg\)/)
+  })
+})