Hamido212 · Sep 30, 2026 · Sep 30, 2026 · Sep 30, 2026 · Sep 30, 2026 · Sep 30, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,35 @@
 # Changelog
 
+## 0.12.0 — 2026-09-30
+
+Import & Modernize, and 90 layouts. See the [release notes](docs/RELEASE-0.12.0.md).
+
+- **Modernize tab.** Paste or import any Bricks JSON and BricksSnap rebuilds it on its design system. See [Modernize](docs/MODERNIZE.md).
+  - Colors become tokens by role, and the source's brand colors are replaced by the kit's.
+  - Font sizes, spacing and corners land on the kit's fluid scale.
+  - Repeated inline styles become `bs-<block>-<role>` classes.
+  - Missing mobile rules are added.
+  - The brand kit restyles the result.
+  - Compare before and after at three widths, read the report, then download, copy or open it in Staging. It runs locally.
+- **MCP.** New tool `bricks_modernize_template` (eleven tools).
+- **50 new layouts (90 in total)** for every section type, among them:
+  - bento hero, hero with form, hero with numbers;
+  - photo service cards and service tabs;
+  - vertical steps;
+  - pricing switch, plans as rows, price tiles;
+  - quote wall;
+  - team photo cards;
+  - portfolio bento and project index;
+  - FAQ accordion;
+  - logo tiles and marquee;
+  - masonry and bento gallery;
+  - CTA with background image;
+  - big-name footer;
+  - split login, 404 and coming-soon pages.
+- **Native tabs and accordion.** The pricing switch and service tabs use Bricks' nested tabs, and the FAQ accordion uses Bricks' nested accordion with FAQ schema. The preview shows them as Bricks does (first tab open), and the validator accepts their `_hidden` classes.
+- **Remote library.** 206 templates: 13 designs as pages and all 90 layouts as sections, in German and English.
+- **Roadmap.** "Open in BricksSnap" cooperation with template libraries and a community gallery with an explicit open license are planned for later.
+
 ## 0.11.1 — 2026-09-30
 
 - **Pointer cursor.** Everything clickable (buttons, tabs, filter chips, cards, selects, checkboxes, expandable sections) shows the hand cursor again. Tailwind CSS v4 gives buttons the default arrow; disabled controls now show "not allowed". Suggested on the Bricks forum.

diff --git a/README.md b/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.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)).
 
 **v0.8: [Studio](docs/STUDIO.md)** ([release notes](docs/RELEASE-0.8.0.md)). Pick from 40 layouts in five style directions, set your brand color, fonts, corners and spacing, and get copy written for your industry in German or English. Export native Bricks JSON whose global classes follow one design system, and install that system's palette and variables on a connected site.
@@ -27,7 +29,8 @@ v0.5 builds on v0.4's [read-only connection](docs/RELEASE-0.4.0.md) and v0.3's [
 
 ## Features
 
-- Studio: 40 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: 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
+- 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)
 - Full page presets
@@ -38,7 +41,7 @@ v0.5 builds on v0.4's [read-only connection](docs/RELEASE-0.4.0.md) and v0.3's [
 - Bricks 2.4.1 native element/control registry, reference repair and responsive defaults
 - Export types and preservation of global classes/component metadata
 - Staging workspace: prepend/append sections or insert after a root, with ID collision handling and structural comparison
-- Ten MCP tools over optional HTTP or local stdio; Studio pages, section generation, page assembly, merge and comparison
+- Eleven MCP tools over optional HTTP or local stdio; Studio pages, modernizing Bricks JSON, section generation, page assembly, merge and comparison
 - Local WordPress connection: page search, live page import with Bricks' document digest, site class and palette import, class conflict warnings
 - Bricks-rendered before/after preview (1280/390 px), guarded apply with read-back verification and revision restore
 - Import of external images into the site's media library and guarded creation of missing global classes before applying

diff --git a/docs/CLIENTS.md b/docs/CLIENTS.md
@@ -52,7 +52,7 @@ Other clients use the same command and environment in their JSON format.
 ## Tool discovery
 
 - **Bricks tools.** The site exposes a few Bricks abilities as direct tools, for example `bricks-get-design-context`. Others are called through `mcp-adapter-execute-ability` with `{ "ability_name": "bricks/…", "parameters": {…} }`. Use `mcp-adapter-get-ability-info` for exact parameters: Bricks rejects unknown keys.
-- **BricksSnap tools.** BricksSnap's ten tools start with `bricks_` (underscores), for example `bricks_kit_page` or `bricks_merge_templates`.
+- **BricksSnap tools.** BricksSnap's eleven tools start with `bricks_` (underscores), for example `bricks_kit_page` or `bricks_merge_templates`.
 
 ## Workflows that combine both
 

diff --git a/docs/MODERNIZE.md b/docs/MODERNIZE.md
@@ -0,0 +1,78 @@
+# Import & Modernize: bring any section onto your design system
+
+The **Modernize** tab takes Bricks JSON you already have and rebuilds it on BricksSnap's design system. Sources include a section copied from a client site, an old project or a template you own. Afterwards the brand kit restyles it like any Studio layout: color, fonts, corners, spacing and dark mode.
+
+It runs in your browser. Nothing is uploaded and nothing is fetched from other sites: you bring the JSON.
+
+## What it changes
+
+| Before | After |
+|---|---|
+| Fixed colors (`#7c3aed`, `rgba(…)`) | Design tokens by role: section and card backgrounds, headings, text, muted text, borders, buttons, icons, shadows. Alpha stays as `color-mix(in srgb, var(--bs-…) N%, transparent)`. |
+| Font sizes in px or rem | The kit's type scale (`--bs-text-s` … `--bs-text-display`), fluid with `clamp()` |
+| Spacing and corners | The kit's spacing and radius tokens (`--bs-space-*`, `--bs-radius-*`, `--bs-radius-btn`), sections on `--bs-space-section` and `--bs-gutter` |
+| The same inline styles on many elements | One global class per role, `bs-<block>-<role>`, shared by every element that looked the same |
+| Source classes (for example `feature-card`) | Merged into the new classes; the element keeps its own overrides |
+| Font families | The kit's heading and body fonts |
+| Framework variables (Automatic CSS, Core Framework) | Mapped by name to BricksSnap tokens where the meaning is clear; unknown ones are kept and listed |
+| Custom CSS with `%root%`, `#brxe-…` or old class names | Rewritten to the new class; colors and sizes inside mapped like the controls |
+
+**Brand colors.** Modernize detects the source's brand colors: saturated mid-tone colors, weighted by how often they are used. They become `primary` and `accent`, so your kit's brand color replaces them everywhere. Tints and near-whites are not mistaken for the brand.
+
+**Buttons.** Bricks button presets (style, size, outline) become explicit, token-based buttons: the primary fill with readable text, outlines with the kit's border color, and the kit's button radius.
+
+## Mobile rules it adds
+
+Many library sections were built for desktop only. Modernize adds what is missing and lists each rule in the report:
+
+- **Sections:** vertical rhythm from `--bs-space-section` and side gutters when they have none.
+- **Containers:** full width up to the kit's container width.
+- **Grids:** with three or more columns, two columns on tablets; one column on phones.
+- **Button rows:** wrap, and stack at full width on phones.
+- **Rows of cards or blocks:** stack on phones.
+- **Stacks without gaps:** spacing from the kit.
+- **Fixed widths over 480 px:** become a maximum width, so they shrink on small screens.
+
+## How to use it
+
+1. **Paste Bricks JSON** or **Import JSON file** (up to 2 MB). Bricks' clipboard format, template exports and plain element arrays work. **Load example** shows a feature section written the way many libraries ship them.
+2. Optionally set the **class prefix**, for example `features` for `bs-features-card`. By default it comes from the section's label or first heading.
+3. Set the brand kit on the left. It starts with your Studio kit.
+4. Compare **After**, **Before** or **Side by side** at desktop, tablet and phone width.
+5. Read **What changed**:
+   - colors and the token each became;
+   - font sizes;
+   - spacing and radii;
+   - created classes;
+   - mobile rules;
+   - warnings;
+   - quality checks.
+6. **Take it to Bricks:** download the import file, copy it for Ctrl+V, or **Open in Staging** to compare it against a page on your site, save it there and install the design system.
+
+## Limits
+
+- **Images** keep their source URLs. Replace them or import them into the media library (Staging → Before saving).
+- **Framework utility classes without styles in the file** (for example Automatic CSS utilities) are listed. Their look is not in the JSON, so it cannot be carried over.
+- **Unknown variables** stay as they are. Define them on the site or replace them.
+- **Interactions, queries and dynamic data** are kept, not modernized.
+- Always review the result in Bricks before publishing.
+
+## Only import what you may use
+
+Modernize changes the design, not the rights. Use it on JSON you created, received from a client, or licensed. Do not use it to repackage other people's templates. Free libraries such as BricksBoard or DigiSavvy's templates have their own terms.
+
+## From MCP clients
+
+**`bricks_modernize_template`** takes:
+
+- `json`: the Bricks JSON as a string, up to 2 MB;
+- optionally `kit`, `block` (the class prefix) and `title`.
+
+It returns:
+
+- the modernized template;
+- the design system;
+- the report;
+- the quality checks.
+
+For example: "Modernize this Bricks section with BricksSnap in the Soft style with my brand color #0f766e and give me the JSON."
diff --git a/docs/RELEASE-0.12.0.md b/docs/RELEASE-0.12.0.md
@@ -0,0 +1,78 @@
+# BricksSnap 0.12.0: Import & Modernize, and 90 layouts
+
+Many Bricks users already have sections: from old projects, from clients, from free libraries. They often use fixed colors, px sizes, repeated inline styles and no mobile rules. 0.12.0 brings them onto the same design system as the Studio, and more than doubles the Studio's own layouts.
+
+## 1. Import & Modernize
+
+A new **Modernize** tab takes any Bricks JSON and rebuilds it on BricksSnap's tokens:
+
+- **Colors:** fixed colors become design tokens by role (backgrounds, headings, text, borders, buttons, icons, shadows). The source's brand colors are detected and replaced by your kit's.
+- **Sizes:** font sizes, spacing and corners land on the kit's scale, fluid with `clamp()` instead of fixed px.
+- **Classes:** repeated inline styles become one clean `bs-<block>-<role>` global class per role.
+- **Mobile:** missing rules are added, and the report lists each one:
+  - grids collapse on tablets and phones;
+  - button rows stack at full width;
+  - sections get rhythm and gutters;
+  - fixed widths become maxima.
+- **Brand kit:** the result follows color, fonts, corners, spacing and dark mode like any Studio section.
+
+You compare before and after at three widths, read a report of every change, and take the result to Bricks by download, clipboard or Staging.
+
+It runs locally in the browser, and nothing is fetched: you bring the JSON. Use it on sections you made, received from a client or licensed. It is not a way to repackage other people's templates. See [Modernize](MODERNIZE.md).
+
+**MCP.** The new `bricks_modernize_template` tool does the same for Claude, ChatGPT and other clients. The server now has eleven tools.
+
+## 2. 90 layouts instead of 40
+
+50 new layouts cover every section type. They reuse the kit's classes, so every layout works with every brand kit, industry and language:
+
+| Section | New layouts |
+|---|---|
+| Header | centred logo, floating bar, dark |
+| Hero | bento tiles, centred with numbers, statement with wide image, image left with social proof, with enquiry form |
+| Services | numbered, photo cards, tabs |
+| Benefits | cards with icons, image in the middle, dark with rules |
+| Steps | vertical with line, centred numbers |
+| Numbers | cards, image with numbers |
+| Pricing | with switch, plans as rows, price tiles |
+| Reviews | quote wall, one featured quote, large photo |
+| Team | photo cards, list |
+| Portfolio | bento, project index |
+| Timeline | horizontal |
+| About | with numbers, photo collage, statement with wide image |
+| FAQ | accordion, cards |
+| Blog | one featured post, list |
+| Logos | tiles, marquee |
+| Gallery | masonry, bento |
+| Call to action | background image, minimal with rules, card with photo |
+| Contact | contact cards, centred form |
+| Footer | big name, with call to action |
+| Login, 404, coming soon | split screens with image |
+
+**Native Bricks 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, and you edit each tab and answer in the builder.
+
+**Pricing switch.** The industries' sample prices are one-off, hourly or per-visit prices, so the switch shows **Packages / Single prices**. A computed "yearly" price would be wrong. For monthly and yearly billing, rename the two tabs in Bricks and enter your yearly prices in the second pane.
+
+The remote library in Bricks now serves 206 templates: 13 designs as pages and all 90 layouts as sections, in German and English.
+
+## Later
+
+Cooperation instead of copying:
+- an "Open in BricksSnap" link for template libraries that want it;
+- a community gallery with an explicit open license.
+
+These are on the [roadmap](ROADMAP.md) and not part of this release.
+
+## Verified
+
+- **Automated:** 255 tests.
+  - Every layout validates in every style.
+  - The one-class-per-CSS-property rule holds for all 90 layouts.
+  - No class name is defined twice.
+  - Tabs and accordion have Bricks' structure.
+  - The modernize engine is tested on its own pricing and hero fixtures.
+- **Visual:** all 50 new layouts at desktop and phone width in the Clean kit, and in a dark Warm kit.
+- **Against Bricks 2.4.2 on the test site (read-only):**
+  - Bricks' frontend script and styles use the same tab, pane, accordion and `brx-open` classes as the layouts.
+  - `render-elements` outputs the `_hidden` classes the nested elements rely on.
+- **App:** the Studio renders all 90 thumbnails in about 0.1 s, and a kit change redraws them in about 0.15 s.
diff --git a/docs/REMOTE-LIBRARY.md b/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 (106 templates):
+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):
 
 - **Pages.** Each of the 13 designs (for example "Nord", "Trattoria", "Lachfalte") as a complete page.
-- **Sections.** All 40 layouts as single sections, in the "Fundament" design.
+- **Sections.** All 90 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)).
 

diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md
@@ -68,6 +68,18 @@ Delivered in 0.8.0 (see [release notes](RELEASE-0.8.0.md)):
 - **App.** Light workbench redesign; Claude through MCP with current models.
 - **Not included.** Loading the kit's web fonts in Bricks, theme styles, and Studio layouts in the remote library.
 
+## v0.12 — Import & Modernize and more layouts
+
+Delivered in 0.12.0 (see [release notes](RELEASE-0.12.0.md)):
+- **Modernize.** Any Bricks JSON rebuilt on the design system, in the app and as the MCP tool `bricks_modernize_template` ([Modernize](MODERNIZE.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.
+
+## 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).
+- **Community gallery.** Sections shared by their authors under an explicit open license (for example CC0 or MIT), with author credit, moderation and a license on every entry. Only then may BricksSnap offer others' sections.
+
 ## 2.0 milestone
 
 Use the 2.0 name when a connected site can be read, a change reviewed, applied, verified and recovered through a tested workflow. Intermediate releases should deliver useful complete workflows without implying that later phases are already available.
diff --git a/docs/SETUP.md b/docs/SETUP.md
@@ -42,7 +42,7 @@ Anthropic does not permit third-party apps to offer a Claude.ai sign-in or to ro
 - **claude.ai and the Claude apps:** Customize → Connectors → + → **Add custom connector** with `https://your-deployment/api/mcp` ([Anthropic help](https://support.claude.com/en/articles/11175166-get-started-with-custom-connectors-using-remote-mcp)). Claude connects from Anthropic's cloud, so the deployment must be public HTTPS with `BRICKSSNAP_MCP_ENABLED=true`.
 - **Inside BricksSnap:** choose Anthropic in Settings with an API key from the Claude Console; the model defaults to `claude-sonnet-5-5` (also `claude-opus-5-5`, `claude-haiku-4-5-20251001`).
 
-The opt-in stateless endpoint provides ten tools: `bricks_get_schema`, `bricks_list_templates`, `bricks_get_template`, `bricks_validate_template`, `bricks_generate_section`, `bricks_assemble_page`, `bricks_kit_options`, `bricks_kit_page`, `bricks_merge_templates` and `bricks_compare_templates`. It cannot access API keys, WordPress or private files, or publish pages. It currently has no authentication because it only provides public computations; apply hosting rate limits. Leave disabled when unused. For local stdio clients and the staging workflow, see [Staging and MCP](STAGING-MCP.md).
+The opt-in stateless endpoint provides eleven tools: `bricks_get_schema`, `bricks_list_templates`, `bricks_get_template`, `bricks_validate_template`, `bricks_generate_section`, `bricks_assemble_page`, `bricks_kit_options`, `bricks_kit_page`, `bricks_modernize_template`, `bricks_merge_templates` and `bricks_compare_templates`. It cannot access API keys, WordPress or private files, or publish pages. It currently has no authentication because it only provides public computations; apply hosting rate limits. Leave disabled when unused. For local stdio clients and the staging workflow, see [Staging and MCP](STAGING-MCP.md).
 
 ## Export and compatibility