cinqcinqdev-seo 0.1.73 → 1.0.1

package/README.md

@@ -4,6 +4,41 @@ A Nuxt 3 admin CMS module with a visual page editor, AI content generation, SEO
 
 ---
 
+## What's New in v2
+
+### Built-in section component library
+
+All 19 section types now ship inside the module in **two fully independent design themes**. You no longer need to build section Vue files from scratch — just pick a theme on the Setup page and your sections render immediately.
+
+### `theme` prop on `DynamicRenderer`
+
+`AdminCmsDynamicRenderer` now accepts a `theme` prop. Pass `settings?.theme` so your front-facing pages render the correct theme. See [Using DynamicRenderer in front-facing pages](#using-dynamicrenderer-in-front-facing-pages).
+
+### Theme-aware component resolution
+
+Both the visual editor and `DynamicRenderer` follow this priority when resolving a section:
+
+1. **Your app's override** — `~/components/sections/HeroSection.vue` (registered as `SectionsHeroSection`) takes precedence over everything
+2. **Module theme** — `sections/swiss-style/HeroSection.vue` → `SectionsSwissStyleHeroSection`
+3. **Bare name fallback**
+
+This means you can override any individual section per project without losing the theme for the rest.
+
+### Theme selection required on Setup
+
+The Setup page now has a **required** theme picker. The Save button is disabled until a theme is chosen. The selected theme is saved to `brand_settings.theme`.
+
+### Database: add `theme` column
+
+If you are upgrading from v1, run this migration in Supabase:
+
+```sql
+ALTER TABLE public.brand_settings
+  ADD COLUMN IF NOT EXISTS theme TEXT CHECK (theme IN ('cinqcinq', 'swiss-style'));
+```
+
+---
+
 ## Features
 
 - Visual 3-panel page editor (structure / live preview / properties)
@@ -146,7 +181,7 @@ CREATE TABLE IF NOT EXISTS public.users (
   created_at timestamptz DEFAULT now()
 );
 
--- Brand settings (AI context, component presets, colors, fonts)
+-- Brand settings (AI context, component presets, colors, fonts, theme)
 CREATE TABLE IF NOT EXISTS public.brand_settings (
   id INT PRIMARY KEY DEFAULT 1,
   brand_name TEXT DEFAULT '',
@@ -158,6 +193,7 @@ CREATE TABLE IF NOT EXISTS public.brand_settings (
   font_body TEXT DEFAULT 'Inter',
   ai_context TEXT DEFAULT '',
   section_presets JSONB DEFAULT '{}'::jsonb,
+  theme TEXT CHECK (theme IN ('cinqcinq', 'swiss-style')),
   updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
   CONSTRAINT one_row_only CHECK (id = 1)
 );
@@ -277,6 +313,10 @@ All routes, sidebar links, redirects, and the auth middleware automatically use
 
 The setup page is the first thing to fill in when starting a new project.
 
+### Theme selection (required)
+
+A visual picker lets you choose between `cinqcinq` and `swiss-style`. The Save button is disabled until a theme is selected. The choice is saved to `brand_settings.theme` and used by the editor and `DynamicRenderer` to resolve section components.
+
 ### AI Context
 
 A free-text field where you describe the website: industry, target audience, tone of voice, key services. Saved to `brand_settings.ai_context`.
@@ -326,11 +366,13 @@ If a page has `content_locked = true` in the database, the editor shows only the
 
 ## Section Components
 
-The module ships these built-in section types:
+The module ships **19 built-in section types** in both themes. No setup beyond choosing a theme is required.
 
 | Type | Description |
 |---|---|
 | `HeroSection` | Hero with title, subtitle, badge, CTA, image |
+| `HeroSlider` | Full-screen hero slider |
+| `HeroFan` | Fan-layout hero |
 | `TextVisual` | Text + image (split / stacked / wide) |
 | `ServiceGrid` | Services in grid, list, cards, or minimal layout |
 | `Features` | Feature highlights with icons |
@@ -339,20 +381,25 @@ The module ships these built-in section types:
 | `Pricing` | Pricing plans (cards / minimal / table) |
 | `FAQ` | Accordion FAQ |
 | `ContactForm` | Contact form (split / centered / minimal) |
+| `CallToAction` | CTA banner |
+| `Comparison` | Side-by-side comparison table |
+| `DataTable` | Generic data table |
+| `BlogHero` | Blog article hero |
+| `Newsletter` | Newsletter sign-up |
+| `Quote` | Pull quote / blockquote |
+| `RelatedPages` | Related pages / links grid |
+| `RichText` | Free rich-text block |
 
 Each section supports: layout variants, spacing, border radius, animation, background color, text color, and multilingual text fields.
 
-### Creating section components
+### Overriding a built-in section
 
-The editor resolves section components from your app's `components/sections/` directory.
+You can override any individual section for a specific project by placing a Vue file in your app's `components/sections/` directory. It takes priority over the module theme.
 
 ```
 components/
   sections/
-    HeroSection.vue
-    TextVisual.vue
-    ServiceGrid.vue
-    ...
+    HeroSection.vue   ← overrides the theme version for this project only
 ```
 
 Each component receives its stored props directly via `v-bind`. Handle i18n fields (stored as `{ fr, ar, en }` objects):
@@ -672,7 +719,6 @@ Pages without a subdirectory (e.g. title `About`, no subdirectory) get a plain s
 ## What's NOT Included
 
 - Login / register pages — you provide these
-- Section component UI — you build the Vue components in `components/sections/`
 - Email / webhook integrations
 - Multi-tenancy / per-user page isolation — implement via Supabase RLS
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.1.73",
+  "version": "1.0.1",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -78,6 +78,7 @@ const module$1 = defineNuxtModule({
     addServerHandler({ route: "/api/admin-cms/ai/seo-audit", handler: resolve("./runtime/server/api/ai/seo-audit.post") });
     nuxt.options.css.push(resolve("./runtime/assets/admin.css"));
     addPlugin(resolve("./runtime/plugins/admin-font.client"));
+    addPlugin(resolve("./runtime/plugins/admin-sections"));
     nuxt.hook("tailwindcss:config", (tailwindConfig) => {
       const adminPath = resolve("./runtime/**/*.{vue,ts}");
       if (Array.isArray(tailwindConfig.content)) {

package/dist/runtime/plugins/admin-sections.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/admin-sections.js

@@ -0,0 +1,13 @@
+import { defineNuxtPlugin } from "#imports";
+const cinqcinq = import.meta.glob("../components/sections/cinqcinq/*.vue", { eager: true });
+const swissStyle = import.meta.glob("../components/sections/swiss-style/*.vue", { eager: true });
+export default defineNuxtPlugin((nuxtApp) => {
+  for (const [path, mod] of Object.entries(cinqcinq)) {
+    const name = path.split("/").pop().replace(".vue", "");
+    nuxtApp.vueApp.component(`SectionsCinqcinq${name}`, mod.default);
+  }
+  for (const [path, mod] of Object.entries(swissStyle)) {
+    const name = path.split("/").pop().replace(".vue", "");
+    nuxtApp.vueApp.component(`SectionsSwissStyle${name}`, mod.default);
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinqcinqdev-seo",
-  "version": "0.1.73",
+  "version": "1.0.1",
   "description": "A reusable Nuxt 3 admin CMS module with visual page editor powered by Supabase",
   "license": "MIT",
   "module": "./dist/module.mjs",