0.13.0: Mobile menus, carousels, motion and class updates

CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 0.13.0 — 2026-10-01
+
+Mobile menus, carousels, motion and class updates. See the [release notes](docs/RELEASE-0.13.0.md).
+
+- **Mobile menu in every header.** Headers with links use Bricks' nestable nav, in the structure Bricks itself creates.
+  - Below 991 px a hamburger opens a full-screen menu in the kit's colors and turns into an X.
+  - On phones the header button moves into the menu.
+  - Before, the links were hidden with no menu.
+- **Carousels.** New "Carousel" layouts for reviews and portfolio on Bricks' nested slider: 2 or 3 cards, 1 on phones, with swipe and dots (92 layouts).
+- **Motion.** New brand kit option "Fade in".
+  - Content sections fade their intros, cards, items and images up once on scroll, using Bricks interactions.
+  - Headers, heroes and footers stay still.
+  - With reduced motion, everything is shown at once.
+  - Also `kit.motion` over MCP.
+- **Update outdated BricksSnap classes.** In Staging, `bs-` classes the site has in another version can be updated site-wide (`update-global-class`).
+  - Each write is guarded and dropped keys are removed.
+  - The result is verified, and the update can be undone.
+- **Fix.** Class comparisons ignore how Bricks reformats custom CSS (line breaks, indentation, spaces around `>`). Before, such classes were reported as differing definitions.
+- **Remote library.** 210 templates.
+
 ## 0.12.0 — 2026-09-30
 
 Import & Modernize, and 90 layouts. See the [release notes](docs/RELEASE-0.12.0.md).

README.md

@@ -9,6 +9,8 @@ A Next.js tool that creates editable **Bricks Builder JSON templates**. Build mo
 
 Free for your own and your clients' websites. You may not offer BricksSnap itself to others as a hosted app or sell it; see [licensing](LICENSING.md).
 
+**v0.13: Mobile menus, carousels, motion and class updates** ([release notes](docs/RELEASE-0.13.0.md)). Every header gets a real mobile menu, reviews and portfolio come as carousels, content can fade in on scroll, and sites with older BricksSnap classes can update them with undo.
+
 **v0.12: [Import & Modernize](docs/MODERNIZE.md) and 90 layouts** ([release notes](docs/RELEASE-0.12.0.md)). Paste any Bricks JSON and get it back on your design system: tokens instead of fixed colors, fluid sizes, clean `bs-` classes and mobile rules, restyled by your brand kit. The Studio grows from 40 to 90 layouts, including bento grids, a pricing switch and a FAQ accordion built on Bricks' native tabs and accordion.
 
 **v0.9: Library of ready-made designs.** 12 complete designs for different industries and styles, as pages and sections, in the app and in Bricks' remote library ([release notes](docs/RELEASE-0.9.0.md)).
@@ -29,7 +31,7 @@ v0.5 builds on v0.4's [read-only connection](docs/RELEASE-0.4.0.md) and v0.3's [
 
 ## Features
 
-- Studio: 90 layouts in 22 section types and five style directions, a brand kit (color, fonts, corners, spacing, light/dark), industry copy in German or English, live preview at three widths, quality checks
+- Studio: 92 layouts in 22 section types and five style directions, with mobile menus, carousels and optional scroll motion; a brand kit (color, fonts, corners, spacing, light/dark, motion), industry copy in German or English, live preview at three widths, quality checks
 - Modernize: any Bricks JSON rebuilt on the design system (tokens, fluid scale, `bs-` classes, mobile rules), locally in the browser
 - Design system: `bs-` global classes with `var(--bs-*, fallback)` values; palette and variables installable on a connected site with ownership guards
 - Pre-built template library (Hero, Navbar, Features, Pricing, Testimonials, Footer and more)

docs/RELEASE-0.13.0.md

@@ -0,0 +1,77 @@
+# BricksSnap 0.13.0: Mobile menus, carousels, motion and class updates
+
+0.13.0 closes a real gap in every header and adds two patterns many sites need. It also lets sites that installed an earlier BricksSnap release receive improvements. Everything is built on Bricks' own elements and features and checked live on a Bricks 2.4.2 test site.
+
+## 1. A real mobile menu in every header
+
+Until 0.12, headers hid their links below the tablet breakpoint and offered no menu. Now every header with links uses **Bricks' nestable nav**:
+
+- **Structure.** Bricks creates the same structure in the builder: a "Nav items" list with the links, a close toggle inside it, and an open toggle after it. We read it from a test page.
+- **Behavior.** Below the tablet breakpoint (991 px), a hamburger opens the menu as a full-screen overlay. It turns into an X, and the header button moves into the menu on phones.
+- **Kit colors.** The overlay uses the kit's background and heading colors instead of Bricks' fixed white, so it also works in dark mode.
+
+## 2. Carousels
+
+**Reviews** and **Portfolio** each get a carousel layout on **Bricks' nested slider** (Splide):
+
+- **Layout.** Two or three cards side by side, two on tablets, one on phones.
+- **Navigation.** Visitors swipe or use the dots below. The dots are buttons and also work by keyboard.
+- **Options.** They go in as Splide JSON, because Bricks does not accept breakpoint values on its slider controls.
+
+## 3. Motion
+
+A new brand kit option, **Motion: Fade in**, makes the content of a section fade up once as it scrolls into view:
+
+- **What moves:** intros, cards, list items and images, slightly staggered.
+- **How:** with Bricks interactions (`enterView` → `startAnimation`), so you can edit or remove it in the builder.
+- **What stays still:**
+  - headers, heroes, footers and single-purpose pages, which are on screen at once;
+  - content inside Bricks' tabs, accordion, slider, nav and forms.
+- **Accessibility:** visitors who ask their system for reduced motion see everything at once.
+
+The option is also available to MCP clients (`kit.motion`).
+
+## 4. Update outdated BricksSnap classes
+
+A site keeps its `bs-` class definitions. Before 0.13, BricksSnap reported newer definitions as different and never wrote them, so improvements never reached existing sites.
+
+**Update N BricksSnap classes** (in Staging, after **Create missing global classes**) now brings them up to date:
+
+- **Scope.** Only `bs-` classes are changed, everywhere on the site.
+- **Guarded.** Each write carries the class's ownership and the class lock ownership. A class changed in between is refused, and earlier updates stay undoable.
+- **Exact.** Bricks merges class settings, so keys the new definition drops are removed explicitly, nested ones too.
+- **Verified and undoable.** The result is read back and compared, and **Undo the update** restores the previous definitions.
+
+The update needs the `update-global-class` ability.
+
+**Fix.** Bricks reformats custom CSS when it stores a class: line breaks, indentation, and no spaces around `>`. BricksSnap took that for a different definition. Comparisons now ignore CSS layout.
+
+## Verified
+
+- **Automated:** 262 tests.
+  - The mobile menu structure in every header.
+  - Motion only where intended, with the reduced-motion rule.
+  - Slider options and breakpoints.
+  - The update patch, nested keys included.
+  - Guarded update, verify and undo, plus a concurrent edit, against a stand-in for Bricks 2.4.2.
+- **Live on the Bricks 2.4.2 test site:**
+
+  | Check | Result |
+  |---|---|
+  | Mobile menu at 390 px | hamburger opens the overlay with links and button; X closes it |
+  | Header at 1280 px | links in the bar, no toggle |
+  | Carousels | 1 slide at 390 px; 2 or 3 at 1280 px |
+  | Motion | content below the fold fades in on scroll |
+  | Reduced motion | everything visible at once |
+  | Class update | outdated → update → undo → update, each verified by read-back |
+  | 0.12's FAQ accordion and pricing switch | open and switch as expected |
+  | JavaScript errors | none |
+
+## Thanks
+
+Two MIT-licensed references helped us check Bricks' element structures:
+
+- [bricks-skills](https://github.com/wpgaurav/bricks-skills) by Gaurav Tiwari;
+- [bricks-builder-skill](https://github.com/kenming/bricks-builder-skill) by Kenming Wang.
+
+Every structure in this release was then confirmed on Bricks 2.4.2 itself.

docs/REMOTE-LIBRARY.md

@@ -2,10 +2,10 @@
 
 A BricksSnap deployment can act as a **Remote Library** source in Bricks. Bricks users browse the design library in the builder and insert pages and sections like templates from any other Bricks site. No JSON download is needed.
 
-Since 0.9.0 the library serves the Studio's designs instead of the older classic catalog, in German and English (206 templates since 0.12.0):
+Since 0.9.0 the library serves the Studio's designs instead of the older classic catalog, in German and English (210 templates since 0.13.0):
 
 - **Pages.** Each of the 13 designs (for example "Nord", "Trattoria", "Lachfalte") as a complete page.
-- **Sections.** All 90 layouts as single sections, in the "Fundament" design.
+- **Sections.** All 92 layouts as single sections, in the "Fundament" design.
 
 Styling travels as `bs-` global classes. Class IDs are the same in every design, so sections inserted later take on the look of the first design the site received. To change the look everywhere, install the design system from the Studio (see [Studio](STUDIO.md)).
 

docs/ROADMAP.md

@@ -75,6 +75,12 @@ Delivered in 0.12.0 (see [release notes](RELEASE-0.12.0.md)):
 - **Layouts.** 90 instead of 40, with Bricks' nested tabs and accordion where a section switches or folds.
 - **Not included.** Importing from template libraries directly. BricksSnap does not fetch or redistribute other people's templates.
 
+## v0.13 — Mobile menus, carousels, motion and class updates
+
+Delivered in 0.13.0 (see [release notes](RELEASE-0.13.0.md)):
+- **Bricks-native interaction.** Headers use the nestable nav with a mobile menu; carousels use the nested slider; optional motion uses interactions. Each structure was read from or confirmed on Bricks 2.4.2.
+- **Class updates.** Outdated `bs-` classes can be updated site-wide with guards, read-back and undo.
+
 ## Later: cooperation instead of copying
 
 - **"Open in BricksSnap".** Template libraries that want it could link their sections to the Modernize tab, so users bring a section onto their own design system with one click. This needs the library's consent and a small, documented hand-over (for example a URL with the JSON or a postMessage from a library page).

docs/STUDIO.md

@@ -24,6 +24,7 @@ The panel on the left sets how every layout looks. All previews update live. On
 - **Second color.** An optional highlight color.
 - **Fonts.** Eight Google font pairs, or system fonts without web fonts.
 - **Corners, spacing, mode.** Corners from none to round; spacing compact, normal or airy; light or dark.
+- **Motion (0.13).** **Fade in** lets intros, cards, list items and images of content sections fade up once as they scroll into view, slightly staggered. It uses Bricks interactions, so you edit or remove it in the builder. Headers, heroes, footers and single-purpose pages stay still, and visitors who ask their system for reduced motion see everything at once.
 
 ## 2. Business
 
@@ -35,8 +36,10 @@ The texts are templates: read and adjust them before publishing. Nothing leaves
 
 ## 3. Sections
 
-The **Sections** view shows all 90 layouts in 22 section types, grouped by type and rendered live at 1280 px. The section types are header, hero, services, benefits, steps, numbers, pricing, reviews, team, portfolio, timeline, about, FAQ, blog, logos, gallery, call to action, contact, footer, login, 404 and coming soon. Since 0.12 each type has at least two layouts, among them bento grids, a pricing switch, service tabs, a FAQ accordion, a quote wall, a logo marquee and masonry galleries.
+The **Sections** view shows all 92 layouts in 22 section types, grouped by type and rendered live at 1280 px. The section types are header, hero, services, benefits, steps, numbers, pricing, reviews, team, portfolio, timeline, about, FAQ, blog, logos, gallery, call to action, contact, footer, login, 404 and coming soon. Since 0.12 each type has at least two layouts, among them bento grids, a pricing switch, service tabs, a FAQ accordion, a quote wall, a logo marquee and masonry galleries.
 
+- **Mobile menu (0.13).** Every header with links uses Bricks' nestable nav. Below the tablet breakpoint a hamburger opens the menu as a full-screen overlay in the kit's colors; on phones the header button moves into the menu.
+- **Carousels (0.13).** Reviews and portfolio come as carousels on Bricks' nested slider: two or three cards side by side, one on phones, navigated by swipe and the dots below.
 - **Tabs and accordion.** The pricing switch and the service tabs use Bricks' nested tabs. The FAQ accordion uses Bricks' nested accordion with FAQ schema. Bricks' own script switches them; the preview shows the first tab open and the answers closed. Edit each tab and answer in the builder. For monthly and yearly prices, rename the switch's tabs (**Packages / Single prices**) and enter your prices in the panes.
 
 - **Copy.** Copies a single section. Paste it in the Bricks editor with Ctrl+V.
@@ -104,6 +107,6 @@ The MCP server offers three Studio tools:
 
 - **`bricks_kit_options`** lists style directions, font pairs, industries and every section type with its layouts.
 - **`bricks_modernize_template`** rebuilds Bricks JSON on the design system (see [Modernize](MODERNIZE.md)).
-- **`bricks_kit_page`** builds sections or a page. It takes `sections` (type and optional `variant`), an optional `kit` (style, primary, accent, fonts, radius, spacing, mode) and an optional `profile` (industry, language, name, city, phone, email, address, tagline, services). It returns the Bricks import object, the design system and the quality checks.
+- **`bricks_kit_page`** builds sections or a page. It takes `sections` (type and optional `variant`), an optional `kit` (style, primary, accent, fonts, radius, spacing, mode, motion) and an optional `profile` (industry, language, name, city, phone, email, address, tagline, services). It returns the Bricks import object, the design system and the quality checks.
 
 For example: "Use BricksSnap to build a homepage for a vehicle registration service in Bremen in the Warm style with a green brand color, in German, and give me the Bricks JSON."

docs/WORDPRESS.md

@@ -11,7 +11,7 @@ BricksSnap can read a live Bricks page and the site's global classes through the
   - required: `get-page-elements` and `get-design-context`;
   - also used: `find-post`, `get-page-settings`, `list-global-classes`, `list-color-palettes`, `get-mcp-version`, `list-ability-status`, `render-elements` (for the rendered preview), `list-templates` and `get-template-settings` (for site templates), and `list-global-variables` (for the Studio design system).
 
-  Saving additionally needs `set-page-elements`, restoring needs `restore-revision`, importing images needs `upload-media` and `find-media`, creating missing classes needs `batch-create-global-classes`, creating templates needs `create-template`, changing template conditions needs `set-template-conditions`, installing the Studio design system needs `create-color-palette`, `create-color`, `update-color`, `set-global-variable-categories` and `set-global-variables`, and undoing or uninstalling it also needs `delete-global-variable`, `delete-color` and `delete-color-palette`. Keep them disabled if you only want to read.
+  Saving additionally needs `set-page-elements`, restoring needs `restore-revision`, importing images needs `upload-media` and `find-media`, creating missing classes needs `batch-create-global-classes`, updating outdated BricksSnap classes needs `update-global-class`, creating templates needs `create-template`, changing template conditions needs `set-template-conditions`, installing the Studio design system needs `create-color-palette`, `create-color`, `update-color`, `set-global-variable-categories` and `set-global-variables`, and undoing or uninstalling it also needs `delete-global-variable`, `delete-color` and `delete-color-palette`. Keep them disabled if you only want to read.
 
 ## Connect
 
@@ -106,6 +106,17 @@ Sections from the catalog or another site can use global classes the connected s
   - If the site uses a staged class's ID for a class with another name, the staged class is created under a new ID and the elements follow it. Saving the page or a template is refused until then, so an element never silently picks up a foreign class.
   - If the site has the same ID and name with another definition (for example the same `bs-` class from another BricksSnap design), the site's class is kept and reported: the page shows the site's version.
 - **Undefined references.** Referenced IDs without a definition in the change are listed; remove them or add their definitions.
+- **Layout is not a difference.** Bricks reformats custom CSS when it stores a class (line breaks, indentation, no spaces around `>`). Since 0.13 such differences no longer count as another definition.
+
+### Update outdated BricksSnap classes (0.13)
+
+When the site has `bs-` classes in another version (an older BricksSnap release or another design), the result of **Create missing global classes** offers **Update N BricksSnap classes** (`update-global-class` must be enabled).
+
+- **Only BricksSnap's classes.** Only `bs-` classes are changed; the server refuses other names.
+- **Site-wide.** The classes change everywhere on the site, also on pages that already use them.
+- **Guarded.** Each class is written with its item ownership and the class lock ownership from the read. If someone changed a class in between, Bricks refuses; earlier updates stay and can be undone.
+- **Exact.** Bricks merges class settings, so keys the new definition drops are removed explicitly, nested ones too.
+- **Verified and undoable.** The classes are read back and compared. **Undo the update** puts the previous definitions back the same way.
 - **Removing a class later.** Created classes stay when a page is restored. Remove unused ones in Bricks → Global classes.
 
 ## Local and staging sites

package.json

@@ -1,6 +1,6 @@
 {
   "name": "brickssnap",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "scripts": {
     "dev": "next dev --webpack",
     "dev:local": "node scripts/dev-local.mjs",

src/app/api/wordpress/route.ts

@@ -13,7 +13,7 @@ export async function POST(request: Request) {
     const result = await handleWordPressRequest(
       body,
       // Writes read back afterwards; image imports download up to 30 files.
-      AbortSignal.any([request.signal, AbortSignal.timeout(body.action === "media" ? 180_000 : ["apply", "restore", "classes", "set-conditions", "create-template"].includes(body.action) ? 60_000 : 30_000)])
+      AbortSignal.any([request.signal, AbortSignal.timeout(body.action === "media" ? 180_000 : ["apply", "restore", "classes", "update-classes", "set-conditions", "create-template"].includes(body.action) ? 60_000 : 30_000)])
     );
     return Response.json(result, { headers: { "Cache-Control": "no-store" } });
   } catch (error) {