shadowdaoandClaude Opus 5.5
bb4fb7548b
- scripts/e2e-mobile-guard.mjs (npm run test:browser:mobile-guard): Chromium + Firefox at 360/390/768/1280 over
exporter-built pages (navbar, columns, FeaturesGrid/Testimonials/NumberCounter/Gallery/Pricing/Reviews, big
image, long word/URL, wide customer HtmlBlocks). Asserts body.scrollWidth and every visible box/text right edge
(html,body{overflow-x:clip} hides overflow from documentElement.scrollWidth), stacking on phones, columns kept
on tablet, navbar wrap, intentional overflow-x:auto still scrolls, and 1280 box + pixel identity with the hooks
removed (optional cross-commit baseline).
- OLS home overflow was FeaturesGrid (inline repeat(3,1fr)), not an HtmlBlock. FeaturesGrid, Testimonials and
NumberCounter grids carry data-wsb-grid; the <=767px head block makes them one column.
- HtmlBlock output is exported inside <div data-wsb-html style="display:contents"> (applied after attr
injection, toHtml().html unchanged); on phones it becomes a max-width:100% sideways-scrolling box, media
shrink, long words break. body{overflow-wrap:break-word} on phones. Navbar link wrap now up to 991px
(8 links + long logo overflowed at 768).
- Head parity pins updated (mirror in WHP generateCompiledHTML); editor.css mirrors for the mobile frame.
- publish-checks: warn when an HtmlBlock's inline/<style> CSS sets widths, flex sizes or grids over 390px or a
3+ column grid with no phone @media rule; says what is not checked.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
54 lines
1.9 KiB
JSON
54 lines
1.9 KiB
JSON
{
|
|
"name": "whp-site-builder",
|
|
"private": true,
|
|
"version": "2.0.0",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc && vite build",
|
|
"preview": "vite preview",
|
|
"test": "playwright test tests/site-builder.spec.ts --reporter=list",
|
|
"test:headed": "playwright test tests/site-builder.spec.ts --reporter=list --headed",
|
|
"test:e2e:sitesmith": "playwright test tests/sitesmith.spec.ts --reporter=list",
|
|
"test:unit": "vitest run",
|
|
"test:browser:bg": "node scripts/e2e-background.mjs",
|
|
"test:browser:canvas": "node scripts/e2e-canvas-parity.mjs",
|
|
"test:browser:mobile": "node scripts/e2e-mobile-parity.mjs",
|
|
"test:browser:mobile-guard": "node scripts/e2e-mobile-guard.mjs",
|
|
"test:browser:colorpick": "node scripts/e2e-color-pick.mjs",
|
|
"test:browser:colors": "node scripts/e2e-color-system.mjs",
|
|
"test:browser:sitesmith": "node scripts/e2e-sitesmith.mjs",
|
|
"test:browser:sitesmith-cleaned": "node scripts/e2e-sitesmith-cleaned.mjs",
|
|
"test:unit:watch": "vitest"
|
|
},
|
|
"dependencies": {
|
|
"@codemirror/autocomplete": "^6.20.3",
|
|
"@codemirror/commands": "^6.10.4",
|
|
"@codemirror/lang-css": "^6.3.1",
|
|
"@codemirror/lang-html": "^6.4.11",
|
|
"@codemirror/lang-javascript": "^6.2.5",
|
|
"@codemirror/language": "^6.12.4",
|
|
"@codemirror/state": "^6.7.1",
|
|
"@codemirror/theme-one-dark": "^6.1.3",
|
|
"@codemirror/view": "^6.43.6",
|
|
"@craftjs/core": "^0.2.10",
|
|
"@craftjs/layers": "^0.2.7",
|
|
"dompurify": "^3.4.5",
|
|
"html-to-image": "1.11.13",
|
|
"react": "^18.3.1",
|
|
"react-dom": "^18.3.1"
|
|
},
|
|
"devDependencies": {
|
|
"@playwright/test": "^1.59.1",
|
|
"@types/dompurify": "^3.0.5",
|
|
"@types/react": "^18.3.12",
|
|
"@types/react-dom": "^18.3.1",
|
|
"@vitejs/plugin-react": "^4.3.4",
|
|
"@vitest/ui": "^4.1.7",
|
|
"jsdom": "^29.1.1",
|
|
"typescript": "^5.6.3",
|
|
"vite": "^6.0.5",
|
|
"vitest": "^4.1.7"
|
|
}
|
|
}
|