From 7131d2b659c720e227f87af73abbf6041897d6a7 Mon Sep 17 00:00:00 2001 From: Odenir Gomes Date: Thu, 16 Jul 2026 20:07:32 -0300 Subject: [PATCH 01/20] chore: add .playwright-mcp to .gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index d7e2afc..0e70269 100644 --- a/.gitignore +++ b/.gitignore @@ -16,3 +16,4 @@ build/ # Git worktrees are local-only workspace; never track them .claude/worktrees/ +.playwright-mcp/ \ No newline at end of file From 5d5a71750d075ca8070e8e9d5d67f299d69ae21e Mon Sep 17 00:00:00 2001 From: Odenir Gomes Date: Thu, 16 Jul 2026 20:47:22 -0300 Subject: [PATCH 02/20] docs: design spec for preset-layout / grid system (v1) Approved brainstorming output. Hybrid path: engine ships four React primitives (Container, Grid, Row, Column) consumed by organism/template code; preset-layout CMS palette stays reserved with zero components (the Strapi 5 no-DZ-inside-component limit rules out polymorphic layout blocks on the editor side). Shell change: main becomes full-width, atom blocks preserve the 72ch prose width via one CSS selector, chrome shells strip layout CSS so refactored organisms own their containers. Scope: three-tier mobile-first breakpoints (base/md/lg), 12-column Grid, refactor of Hero + Cta + Navbar + Footer to consume the primitives. Wire-compatible (no PressSchema change); visual-only breaking change for adopter custom blocks that relied on the old 72ch main. Co-authored-by: Cursor --- .../2026-07-16-layout-grid-system-design.md | 697 ++++++++++++++++++ 1 file changed, 697 insertions(+) create mode 100644 docs/superpowers/specs/2026-07-16-layout-grid-system-design.md diff --git a/docs/superpowers/specs/2026-07-16-layout-grid-system-design.md b/docs/superpowers/specs/2026-07-16-layout-grid-system-design.md new file mode 100644 index 0000000..3464f9c --- /dev/null +++ b/docs/superpowers/specs/2026-07-16-layout-grid-system-design.md @@ -0,0 +1,697 @@ +# Press — Layout / Grid System (`preset-layout`, v1) + +**Status:** Approved design · **Date:** 2026-07-16 · **Scope:** engine-owned responsive layout primitives (Container, Grid, Row, Column) consumed in code; `preset-layout` CMS palette stays reserved (no components admitted). + +## 1. Context + +Press today has no engine-owned layout layer. Every preset organism +(`preset-organism.hero`, `.cta`, `.navbar`, `.footer`) emits ad-hoc inner markup +(`
`, `
`, flexbox `
`) and +is styled per-instance in `theme.css`. The page shell is prose-only: +`main { max-width: 72ch }` caps every body block at editorial width — a hero +cannot go full-bleed, a 3-column feature grid cannot fit, and mobile responsiveness +is a one-off `@media (max-width: 640px)` in the navbar section. + +The Atomic Design layer `preset-layout` is already declared in +`packages/cms/server/src/lib/inject-components.ts` `PRESET_LAYERS` and labelled in +the admin picker (`packages/cms/admin/src/index.ts`), but **ships zero components** — +it is reserved for exactly this task. + +### The Strapi 5 constraint that shapes the design + +Strapi 5 components can nest other components (single or repeatable), but a +component **cannot contain a `dynamiczone` attribute** — only content-types can. +Genuine "row/column with polymorphic children" (a Row that contains N children, +each of which is any admissible block) is therefore **not expressable** as a CMS +schema. This eliminates a purely editor-facing layout palette and forces the +design toward a hybrid: **layout is a dev-facing primitive layer, with a reserved +CMS extension point for the rare knob-config case**. + +### Where this lives in the architecture + +Layout is **not** page content — it is not serialized, not typed via `PressSchema`, +not admitted to any Dynamic Zone. It lives entirely in `packages/web/src/layout/` +and is consumed by: + +- Engine organism code (Hero, Cta, Navbar, Footer — refactored in §8). +- Future template code shipped by page-set plugins (Site for Company, Site OGS). +- Adopter custom blocks that opt in by importing `Container` / `Grid` / etc. + +The `preset-layout` category on the CMS side stays labelled but empty (§9); it is +documented as the seat for future nested-only config components (pattern: +`preset-molecule.nav-item`). + +## 2. Goals + +- Ship four engine-owned React primitives — `Container`, `Grid`, `Row`, `Column` — + as `packages/web/src/layout/*.tsx`, exported from `@ogs-tech/press-web`. +- Adopt a **mobile-first responsive prop shape** `Responsive = T | { base: T; md?: T; lg?: T }` + with three tiers: `base` (0), `md` (768px), `lg` (1024px). +- Introduce fixed layout tokens under `FIXED_TOKENS` (`--press-container-*`, + `--press-container-padding-x`, `--press-grid-gap-*`), emitted by + `buildThemeStyle` alongside the existing `--press-space-*` / `--press-text-*` scales. +- **Rewrite the page shell** so `main` is full-width; preserve editorial width for + atom blocks via a single CSS selector; strip layout CSS from the `
` / + `