cinqcinqdev-seo 0.1.14 → 0.1.16

package/dist/runtime/components/sections/Testimonials.vue

@@ -0,0 +1,95 @@
+<template>
+  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
+    <div class="max-w-6xl mx-auto">
+
+      <div v-if="title || description" class="mb-12 max-w-xl">
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border mb-4" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <component :is="titleTag" class="text-3xl md:text-5xl font-black uppercase tracking-tighter leading-[0.9] mb-3">{{ title }}</component>
+        <p v-if="description" class="text-sm leading-relaxed" :style="{ opacity: 0.55 }">{{ description }}</p>
+      </div>
+
+      <!-- GRID -->
+      <div v-if="layout === 'grid'" class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div v-for="(item, i) in items" :key="i" :class="['flex flex-col p-7 border transition-all hover:-translate-y-1', cardRound]" :style="{ backgroundColor: textColor + '04', borderColor: textColor + '10' }">
+          <div v-if="item.rating" class="flex gap-0.5 mb-4">
+            <span v-for="s in 5" :key="s" class="text-xs" :style="{ opacity: s <= item.rating ? 1 : 0.15 }">★</span>
+          </div>
+          <p class="text-sm leading-relaxed flex-1 italic mb-6" :style="{ opacity: 0.7 }">"{{ item.quote }}"</p>
+          <div class="flex items-center gap-3 pt-4 border-t" :style="{ borderColor: textColor + '10' }">
+            <img v-if="item.avatar" :src="item.avatar" class="w-9 h-9 rounded-full object-cover shrink-0" />
+            <div v-else class="w-9 h-9 rounded-full flex items-center justify-center text-[11px] font-black shrink-0" :style="{ backgroundColor: textColor + '15' }">{{ (item.name || '?')[0] }}</div>
+            <div>
+              <p class="text-[11px] font-black uppercase tracking-wide leading-none">{{ item.name }}</p>
+              <p v-if="item.role || item.company" class="text-[9px] mt-0.5" :style="{ opacity: 0.4 }">{{ [item.role, item.company].filter(Boolean).join(' · ') }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- FEATURED -->
+      <div v-else-if="layout === 'featured'">
+        <div v-if="items[0]" :class="['p-10 border mb-6', cardRound]" :style="{ backgroundColor: textColor + '05', borderColor: textColor + '10' }">
+          <div v-if="items[0].rating" class="flex gap-0.5 mb-6">
+            <span v-for="s in 5" :key="s" class="text-base" :style="{ opacity: s <= items[0].rating ? 1 : 0.15 }">★</span>
+          </div>
+          <p class="text-xl md:text-3xl font-bold italic leading-snug mb-8 max-w-3xl" :style="{ opacity: 0.8 }">"{{ items[0].quote }}"</p>
+          <div class="flex items-center gap-4">
+            <img v-if="items[0].avatar" :src="items[0].avatar" class="w-12 h-12 rounded-full object-cover" />
+            <div v-else class="w-12 h-12 rounded-full flex items-center justify-center text-sm font-black" :style="{ backgroundColor: textColor + '15' }">{{ (items[0].name || '?')[0] }}</div>
+            <div>
+              <p class="text-sm font-black uppercase tracking-wide">{{ items[0].name }}</p>
+              <p v-if="items[0].role || items[0].company" class="text-[10px]" :style="{ opacity: 0.4 }">{{ [items[0].role, items[0].company].filter(Boolean).join(' · ') }}</p>
+            </div>
+          </div>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div v-for="(item, i) in items.slice(1)" :key="i" :class="['p-7 border', cardRound]" :style="{ backgroundColor: textColor + '03', borderColor: textColor + '08' }">
+            <p class="text-sm italic leading-relaxed mb-5" :style="{ opacity: 0.7 }">"{{ item.quote }}"</p>
+            <div class="flex items-center gap-3">
+              <img v-if="item.avatar" :src="item.avatar" class="w-8 h-8 rounded-full object-cover" />
+              <div v-else class="w-8 h-8 rounded-full flex items-center justify-center text-[10px] font-black" :style="{ backgroundColor: textColor + '12' }">{{ (item.name || '?')[0] }}</div>
+              <div>
+                <p class="text-[10px] font-black uppercase">{{ item.name }}</p>
+                <p v-if="item.role" class="text-[9px]" :style="{ opacity: 0.4 }">{{ item.role }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- WALL / MINIMAL -->
+      <div v-else class="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
+        <div v-for="(item, i) in items" :key="i" :class="['break-inside-avoid p-6 border mb-6', cardRound]" :style="{ backgroundColor: textColor + '04', borderColor: textColor + '08' }">
+          <div v-if="item.rating" class="flex gap-0.5 mb-3">
+            <span v-for="s in 5" :key="s" class="text-[10px]" :style="{ opacity: s <= item.rating ? 1 : 0.15 }">★</span>
+          </div>
+          <p class="text-sm italic leading-relaxed mb-4" :style="{ opacity: 0.7 }">"{{ item.quote }}"</p>
+          <div class="flex items-center gap-2.5">
+            <img v-if="item.avatar" :src="item.avatar" class="w-7 h-7 rounded-full object-cover" />
+            <div v-else class="w-7 h-7 rounded-full flex items-center justify-center text-[9px] font-black" :style="{ backgroundColor: textColor + '15' }">{{ (item.name || '?')[0] }}</div>
+            <p class="text-[10px] font-black uppercase">{{ item.name }}</p>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  layout: { type: String, default: "grid" },
+  title: { type: String, default: "What our clients say" },
+  titleTag: { type: String, default: "h2" },
+  badge: { type: String, default: "" },
+  description: { type: String, default: "" },
+  items: { type: Array, default: () => [] },
+  bgColor: { type: String, default: "#ffffff" },
+  textColor: { type: String, default: "#000000" },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "rounded" }
+});
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-6 md:px-12", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-6 md:px-12");
+const cardRound = computed(() => ({ sharp: "rounded-xl", rounded: "rounded-3xl", pill: "rounded-[40px]" })[props.radius] || "rounded-3xl");
+</script>

package/dist/runtime/components/sections/Testimonials.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: any;

package/dist/runtime/components/sections/TextVisual.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: any;

package/dist/runtime/components/sections/TextVisual.vue

@@ -0,0 +1,94 @@
+<template>
+  <section :class="[sectionPad]" :style="{ backgroundColor: bgColor, color: textColor }">
+
+    <!-- SPLIT -->
+    <div v-if="layout === 'split'" :class="['max-w-6xl mx-auto flex flex-col md:flex-row gap-12 items-center', reverse ? 'md:flex-row-reverse' : '']">
+      <div class="flex-1 space-y-6">
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <component :is="titleTag" class="text-3xl md:text-4xl font-black uppercase tracking-tighter leading-[0.9]">{{ title }}</component>
+        <p class="leading-relaxed text-sm max-w-md" :style="{ opacity: 0.55 }">{{ content }}</p>
+        <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3 pt-1">
+          <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
+            class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5"
+            :style="i === 0 ? { backgroundColor: textColor, color: bgColor } : { border: `1px solid ${textColor}40`, color: textColor }">
+            {{ cta.text }}<span>→</span>
+          </NuxtLink>
+        </div>
+      </div>
+      <div :class="['flex-1 overflow-hidden relative', imageContainerClass]">
+        <img v-if="image" :src="image" :alt="imageAlt || title" class="w-full h-full object-cover transition-transform duration-700 hover:scale-105" />
+        <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '08' }"></div>
+      </div>
+    </div>
+
+    <!-- STACKED -->
+    <div v-else-if="layout === 'stacked'" class="max-w-3xl mx-auto space-y-8">
+      <div :class="['w-full overflow-hidden relative', imageContainerClass]">
+        <img v-if="image" :src="image" class="w-full h-full object-cover" />
+        <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '08' }"></div>
+      </div>
+      <div class="space-y-5">
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <component :is="titleTag" class="text-3xl md:text-4xl font-black uppercase tracking-tighter leading-[0.9]">{{ title }}</component>
+        <p class="leading-relaxed text-sm" :style="{ opacity: 0.55 }">{{ content }}</p>
+        <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3 pt-1">
+          <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
+            class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5"
+            :style="i === 0 ? { backgroundColor: textColor, color: bgColor } : { border: `1px solid ${textColor}40`, color: textColor }">
+            {{ cta.text }}<span>→</span>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <!-- WIDE -->
+    <div v-else :class="['max-w-6xl mx-auto flex flex-col md:flex-row gap-10 items-center', reverse ? 'md:flex-row-reverse' : '']">
+      <div :class="['md:w-2/3 w-full overflow-hidden relative', imageContainerClass]">
+        <img v-if="image" :src="image" class="w-full h-full object-cover transition-transform duration-700 hover:scale-105" />
+        <div v-else class="w-full h-full" :style="{ backgroundColor: textColor + '08' }"></div>
+      </div>
+      <div class="md:w-1/3 space-y-5">
+        <span v-if="badge" class="inline-block text-[10px] font-bold tracking-[0.5em] uppercase px-3 py-1 rounded-full border" :style="{ borderColor: textColor + '25', color: textColor + 'aa' }">{{ badge }}</span>
+        <component :is="titleTag" class="text-2xl md:text-3xl font-black uppercase tracking-tighter leading-[0.9]">{{ title }}</component>
+        <p class="leading-relaxed text-sm" :style="{ opacity: 0.55 }">{{ content }}</p>
+        <div v-if="ctas && ctas.length" class="flex flex-wrap gap-3 pt-1">
+          <NuxtLink v-for="(cta, i) in ctas" :key="i" :to="cta.link || '#'"
+            class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full text-[11px] font-black uppercase tracking-widest transition-all hover:gap-5"
+            :style="i === 0 ? { backgroundColor: textColor, color: bgColor } : { border: `1px solid ${textColor}40`, color: textColor }">
+            {{ cta.text }}<span>→</span>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+  </section>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  layout: { type: String, default: "split" },
+  title: { type: String, default: "Our Vision" },
+  titleTag: { type: String, default: "h2" },
+  badge: { type: String, default: "" },
+  content: { type: String, default: "" },
+  image: { type: String, default: "" },
+  imageAlt: { type: String, default: "" },
+  imageStyle: { type: String, default: "rounded" },
+  imageFit: { type: String, default: "cover" },
+  imageShadow: { type: Boolean, default: false },
+  reverse: { type: Boolean, default: false },
+  bgColor: { type: String, default: "#ffffff" },
+  textColor: { type: String, default: "#000000" },
+  ctas: { type: Array, default: () => [] },
+  spacing: { type: String, default: "normal" },
+  radius: { type: String, default: "rounded" }
+});
+const sectionPad = computed(() => ({ compact: "py-8 px-4 md:px-8", normal: "py-14 px-6 md:px-12", spacious: "py-24 px-8 md:px-16" })[props.spacing] || "py-14 px-6 md:px-12");
+const cardRound = computed(() => ({ sharp: "rounded-xl", rounded: "rounded-3xl", pill: "rounded-[40px]" })[props.radius] || "rounded-3xl");
+const imageContainerClass = computed(() => {
+  const r = cardRound.value;
+  const styles = { rounded: `aspect-[4/3] ${r}`, square: "aspect-square rounded-xl", circle: "aspect-square rounded-full max-w-[360px] mx-auto", portrait: `aspect-[3/4] ${r} max-w-sm mx-auto` };
+  return styles[props.imageStyle] ?? styles.rounded;
+});
+</script>

package/dist/runtime/components/sections/TextVisual.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: any;

package/dist/runtime/composables/useAdminBasePath.d.ts

@@ -0,0 +1 @@
+export declare const useAdminBasePath: () => string;

package/dist/runtime/composables/useAdminBasePath.js

@@ -0,0 +1,5 @@
+import { useRuntimeConfig } from "#imports";
+export const useAdminBasePath = () => {
+  const config = useRuntimeConfig().public.adminCms;
+  return config?.basePath || "/admin";
+};

package/dist/runtime/composables/useAdminSections.d.ts

@@ -1,10 +1,3 @@
-/**
- * Default section definitions for the visual editor.
- * Keys must match component names in the consuming app's components/sections/ directory.
- * e.g. HeroSection → components/sections/HeroSection.vue → <SectionsHeroSection />
- *
- * Add your own sections via the `extraSections` module option in nuxt.config.ts.
- */
 export declare const DEFAULT_SECTIONS: Record<string, any>;
 export declare const useAdminSections: () => {
     [x: string]: any;

package/dist/runtime/composables/useAdminSections.js

@@ -23,6 +23,16 @@ const animationOptions = [
   { value: "typewriter", label: "Typewriter", icon: "\u258C" },
   { value: "float", label: "Float", icon: "\u301C" }
 ];
+const spacingOptions = [
+  { value: "compact", label: "Compact", icon: "\u2194" },
+  { value: "normal", label: "Normal", icon: "\u27F7" },
+  { value: "spacious", label: "Large", icon: "\u2195" }
+];
+const radiusOptions = [
+  { value: "sharp", label: "Sharp", icon: "\u25A1" },
+  { value: "rounded", label: "Rounded", icon: "\u25A2" },
+  { value: "pill", label: "Pill", icon: "\u25EF" }
+];
 const i18n0 = (fr = "") => ({ fr, ar: "", en: "" });
 export const DEFAULT_SECTIONS = {
   HeroSection: {
@@ -42,7 +52,9 @@ export const DEFAULT_SECTIONS = {
       bgColor: "#3d35ff",
       textColor: "#ffffff",
       ctaText: i18n0("Get Started"),
-      ctaLink: "/"
+      ctaLink: "/",
+      spacing: "normal",
+      radius: "rounded"
     },
     groups: [
       { key: "design", label: "Design" },
@@ -71,6 +83,7 @@ export const DEFAULT_SECTIONS = {
       ctaLink: { type: "text", label: "Button URL", group: "design" },
       bgColor: { type: "color", label: "Background", group: "design" },
       textColor: { type: "color", label: "Text Color", group: "design" },
+      radius: { type: "cards", label: "Arrondis", group: "design", options: radiusOptions },
       animation: { type: "cards", label: "Animation", group: "animation", options: animationOptions }
     }
   },
@@ -91,7 +104,9 @@ export const DEFAULT_SECTIONS = {
       reverse: false,
       bgColor: "#ffffff",
       textColor: "#000000",
-      ctas: []
+      ctas: [],
+      spacing: "normal",
+      radius: "rounded"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -121,7 +136,9 @@ export const DEFAULT_SECTIONS = {
         link: { type: "text", label: "URL" }
       } },
       bgColor: { type: "color", label: "Background" },
-      textColor: { type: "color", label: "Text Color" }
+      textColor: { type: "color", label: "Text Color" },
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }
   },
   ServiceGrid: {
@@ -138,7 +155,9 @@ export const DEFAULT_SECTIONS = {
       itemTag: "h3",
       items: [],
       bgColor: "#ffffff",
-      textColor: "#000000"
+      textColor: "#000000",
+      spacing: "normal",
+      radius: "rounded"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -161,7 +180,9 @@ export const DEFAULT_SECTIONS = {
         image: { type: "image", label: "Icon/Image" }
       } },
       bgColor: { type: "color", label: "Background" },
-      textColor: { type: "color", label: "Text Color" }
+      textColor: { type: "color", label: "Text Color" },
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }
   },
   Features: {
@@ -171,7 +192,9 @@ export const DEFAULT_SECTIONS = {
       title: i18n0("Why choose us?"),
       items: [],
       bgColor: "#ffffff",
-      textColor: "#000000"
+      textColor: "#000000",
+      spacing: "normal",
+      radius: "rounded"
     },
     fields: {
       title: { type: "text", label: "Section Title", i18n: true },
@@ -180,7 +203,9 @@ export const DEFAULT_SECTIONS = {
         description: { type: "textarea", label: "Description", i18n: true }
       } },
       bgColor: { type: "color", label: "Background" },
-      textColor: { type: "color", label: "Text Color" }
+      textColor: { type: "color", label: "Text Color" },
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }
   },
   FAQ: {
@@ -190,14 +215,18 @@ export const DEFAULT_SECTIONS = {
       title: i18n0("FAQ"),
       items: [],
       bgColor: "#F9F9FB",
-      textColor: "#000000"
+      textColor: "#000000",
+      spacing: "normal",
+      radius: "rounded"
     },
     fields: {
       title: { type: "text", label: "Title", i18n: true },
       items: { type: "list", label: "Questions", itemFields: {
         question: { type: "text", label: "Question", i18n: true },
         answer: { type: "textarea", label: "Answer", i18n: true }
-      } }
+      } },
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }
   },
   Process: {
@@ -211,7 +240,9 @@ export const DEFAULT_SECTIONS = {
       description: i18n0(),
       items: [],
       bgColor: "#ffffff",
-      textColor: "#000000"
+      textColor: "#000000",
+      spacing: "normal",
+      radius: "rounded"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -231,7 +262,9 @@ export const DEFAULT_SECTIONS = {
         description: { type: "textarea", label: "Description", i18n: true }
       } },
       bgColor: { type: "color", label: "Background" },
-      textColor: { type: "color", label: "Text Color" }
+      textColor: { type: "color", label: "Text Color" },
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }
   },
   Testimonials: {
@@ -245,7 +278,9 @@ export const DEFAULT_SECTIONS = {
       description: i18n0(),
       items: [],
       bgColor: "#ffffff",
-      textColor: "#000000"
+      textColor: "#000000",
+      spacing: "normal",
+      radius: "rounded"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -267,7 +302,9 @@ export const DEFAULT_SECTIONS = {
         avatar: { type: "image", label: "Photo" }
       } },
       bgColor: { type: "color", label: "Background" },
-      textColor: { type: "color", label: "Text Color" }
+      textColor: { type: "color", label: "Text Color" },
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }
   },
   Pricing: {
@@ -281,7 +318,9 @@ export const DEFAULT_SECTIONS = {
       description: i18n0(),
       items: [],
       bgColor: "#ffffff",
-      textColor: "#000000"
+      textColor: "#000000",
+      spacing: "normal",
+      radius: "rounded"
     },
     fields: {
       layout: { type: "cards", label: "Layout", options: [
@@ -303,27 +342,39 @@ export const DEFAULT_SECTIONS = {
         highlighted: { type: "select", label: "Highlight", options: [{ value: false, label: "No" }, { value: true, label: "Yes" }] }
       } },
       bgColor: { type: "color", label: "Background" },
-      textColor: { type: "color", label: "Text Color" }
+      textColor: { type: "color", label: "Text Color" },
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }
   },
   ContactForm: {
     label: "Contact Form",
     icon: "\u{1F4E9}",
     defaultProps: {
+      layout: "split",
       title: i18n0("Let's talk"),
       subtitle: i18n0("Describe your project and we'll get back to you within 24h."),
       badge: i18n0(),
       button_text: i18n0("Send"),
       bgColor: "#ffffff",
-      textColor: "#000000"
+      textColor: "#000000",
+      spacing: "normal",
+      radius: "rounded"
     },
     fields: {
+      layout: { type: "cards", label: "Layout", options: [
+        { value: "split", label: "Split", icon: "\u25E7" },
+        { value: "centered", label: "Centered", icon: "\u25C9" },
+        { value: "minimal", label: "Minimal", icon: "\u2014" }
+      ] },
       badge: { type: "text", label: "Badge", i18n: true },
       title: { type: "text", label: "Title", i18n: true },
       subtitle: { type: "text", label: "Subtitle", i18n: true },
       button_text: { type: "text", label: "Button", i18n: true },
       bgColor: { type: "color", label: "Background" },
-      textColor: { type: "color", label: "Text Color" }
+      textColor: { type: "color", label: "Text Color" },
+      spacing: { type: "cards", label: "Espacement", options: spacingOptions },
+      radius: { type: "cards", label: "Arrondis", options: radiusOptions }
     }
   }
 };

package/dist/runtime/composables/useAdminSettings.d.ts

@@ -0,0 +1,31 @@
+export interface SectionPreset {
+    layout?: string;
+    spacing?: string;
+    radius?: string;
+    animation?: string;
+    bgColor?: string;
+    textColor?: string;
+}
+export interface BrandSettings {
+    id: number;
+    brand_name?: string;
+    tagline?: string;
+    vision?: string;
+    logo_url?: string;
+    primary_color?: string;
+    secondary_color?: string;
+    accent_color?: string;
+    font_headline?: string;
+    font_body?: string;
+    ai_context?: string;
+    section_presets?: Record<string, SectionPreset>;
+    updated_at?: string;
+}
+export declare const useAdminSettings: () => {
+    settings: any;
+    loading: any;
+    saving: any;
+    load: () => Promise<void>;
+    save: (updates: Partial<BrandSettings>) => Promise<void>;
+    applyPresets: (sectionType: string, defaultProps: Record<string, any>) => Record<string, any>;
+};

package/dist/runtime/composables/useAdminSettings.js

@@ -0,0 +1,31 @@
+import { ref } from "#imports";
+import { useSupabaseClient } from "#imports";
+export const useAdminSettings = () => {
+  const supabase = useSupabaseClient();
+  const settings = ref(null);
+  const loading = ref(false);
+  const saving = ref(false);
+  const load = async () => {
+    loading.value = true;
+    const { data } = await supabase.from("brand_settings").select("*").eq("id", 1).maybeSingle();
+    settings.value = data || { id: 1 };
+    loading.value = false;
+  };
+  const save = async (updates) => {
+    saving.value = true;
+    await supabase.from("brand_settings").upsert({ id: 1, ...updates });
+    settings.value = { ...settings.value || { id: 1 }, ...updates };
+    saving.value = false;
+  };
+  const applyPresets = (sectionType, defaultProps) => {
+    const presets = settings.value?.section_presets?.[sectionType];
+    if (!presets) return defaultProps;
+    const merged = { ...defaultProps };
+    const styleKeys = ["layout", "spacing", "radius", "animation", "bgColor", "textColor"];
+    for (const key of styleKeys) {
+      if (presets[key] !== void 0) merged[key] = presets[key];
+    }
+    return merged;
+  };
+  return { settings, loading, saving, load, save, applyPresets };
+};

package/dist/runtime/middleware/admin-auth.js

@@ -4,10 +4,11 @@ export default defineNuxtRouteMiddleware((to) => {
   const config = useRuntimeConfig().public.adminCms;
   const user = useSupabaseUser();
   const loginRoute = config?.loginRoute || "/login";
-  if (to.path.startsWith("/admin") && !user.value) {
+  const basePath = config?.basePath || "/admin";
+  if (to.path.startsWith(basePath) && !user.value) {
     return navigateTo(loginRoute);
   }
   if (to.path === loginRoute && user.value) {
-    return navigateTo("/admin");
+    return navigateTo(basePath);
   }
 });

package/dist/runtime/pages/admin/editor/[id].vue

@@ -1,6 +1,7 @@
 <script setup>
-import { ref, computed, watch, definePageMeta, useRoute, useRuntimeConfig, useAsyncData, useHead, useSupabaseClient, useNuxtApp } from "#imports";
+import { ref, computed, watch, onMounted, definePageMeta, useRoute, useRuntimeConfig, useAsyncData, useHead, useSupabaseClient, useNuxtApp } from "#imports";
 import { useAdminSections } from "../../../composables/useAdminSections";
+import { useAdminSettings, useAdminBasePath } from "#imports";
 definePageMeta({ layout: false });
 const route = useRoute();
 const supabase = useSupabaseClient();
@@ -10,6 +11,9 @@ const bucket = config?.storageBucket || "site";
 const pageId = route.params.id;
 const CMS_COMPONENTS = useAdminSections();
 const { vueApp } = useNuxtApp();
+const adminSettings = useAdminSettings();
+const basePath = useAdminBasePath();
+onMounted(() => adminSettings.load());
 const resolveSection = (type) => vueApp.component(`Sections${type}`) || vueApp.component(type) || null;
 const { data: page } = await useAsyncData(`admin-edit-${pageId}`, async () => {
   const { data } = await supabase.from(table).select("*").eq("id", pageId).maybeSingle();
@@ -180,7 +184,8 @@ const generateWithAI = async () => {
         fields,
         currentProps,
         prompt: aiPromptText.value,
-        itemFieldsConfig
+        itemFieldsConfig,
+        aiContext: adminSettings.settings.value?.ai_context || ""
       }
     });
     const props = page.value.content[selectedBlockIndex.value].props;
@@ -229,7 +234,7 @@ const runSeoAudit = async () => {
   try {
     const result = await $fetch("/api/admin-cms/ai/seo-audit", {
       method: "POST",
-      body: { pageTitle: page.value.title, pageType: page.value.type, content: page.value.content, seoConfig: page.value.seo_config }
+      body: { pageTitle: page.value.title, pageType: page.value.type, content: page.value.content, seoConfig: page.value.seo_config, aiContext: adminSettings.settings.value?.ai_context || "" }
     });
     seoAudit.value = result;
   } catch (err) {
@@ -397,7 +402,7 @@ const savePage = async () => {
     <!-- ── Top Bar ── -->
     <header class="h-12 bg-white/80 backdrop-blur-md border-b px-6 flex items-center justify-between z-[60] shrink-0">
       <div class="flex items-center gap-4">
-        <NuxtLink to="/admin" class="text-gray-400 hover:text-black transition-colors">←</NuxtLink>
+        <NuxtLink :to="basePath" class="text-gray-400 hover:text-black transition-colors">←</NuxtLink>
         <div class="flex gap-1 bg-gray-100 p-1 rounded-md">
           <button @click="isLeftSidebarOpen = !isLeftSidebarOpen" :class="['p-1.5 rounded transition-all', isLeftSidebarOpen ? 'bg-white shadow-sm text-[#3d35ff]' : 'text-gray-400']" title="Structure">
             <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 6h16M4 12h10M4 18h16"/></svg>
@@ -877,7 +882,7 @@ const savePage = async () => {
         <h2 class="text-[12px] font-black uppercase text-center mb-12 tracking-[0.4em] italic text-[#3d35ff]">Nouvelle Section</h2>
         <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
           <button v-for="(conf, type) in CMS_COMPONENTS" :key="type"
-            @click="page.content.push({ type, props: JSON.parse(JSON.stringify(conf.defaultProps)) });
+            @click="page.content.push({ type, props: JSON.parse(JSON.stringify(adminSettings.applyPresets(type, conf.defaultProps))) });
   showAddModal = false;
   selectedBlockIndex = page.content.length - 1"
             class="flex flex-col items-center gap-6 p-8 border-2 border-gray-50 rounded-[40px] hover:border-[#3d35ff] transition-all group active:scale-95">

package/dist/runtime/pages/admin/index.vue

@@ -1,9 +1,11 @@
 <script setup>
 import { computed, useHead, useRuntimeConfig, useSupabaseClient } from "#imports";
+import { useAdminBasePath } from "#imports";
 useHead({ title: "Tableau de bord \u2014 Admin" });
 const config = useRuntimeConfig().public.adminCms;
 const supabase = useSupabaseClient();
 const tables = computed(() => config?.tables || { pages: "pages" });
+const basePath = useAdminBasePath();
 const pageTypes = computed(() => {
   const types = config?.pageTypes || [];
   return types.map((pt) => ({
@@ -74,7 +76,7 @@ const { data: stats } = await useAsyncData("admin-dashboard-stats", async () =>
         <NuxtLink
           v-for="type in pageTypes"
           :key="type.id"
-          :to="`/admin/pages/${type.id}`"
+          :to="`${basePath}/pages/${type.id}`"
           class="group bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:border-[#3d35ff]/30 hover:shadow-md transition-all"
         >
           <div class="flex items-start justify-between mb-4">

package/dist/runtime/pages/admin/pages/[type].vue

@@ -1,8 +1,10 @@
 <script setup>
 import { ref, computed, watch, useRoute, useRuntimeConfig, useAsyncData, useHead, navigateTo, useSupabaseClient } from "#imports";
+import { useAdminBasePath } from "#imports";
 const route = useRoute();
 const supabase = useSupabaseClient();
 const config = useRuntimeConfig().public.adminCms;
+const basePath = useAdminBasePath();
 const pageType = route.params.type;
 const table = config?.tables?.pages || "pages";
 const typeLabel = computed(
@@ -46,7 +48,7 @@ const handleCreate = async () => {
   }
   const { data, error } = await supabase.from(table).insert([{ title: newPageTitle.value, slug, type: pageType, status: "draft", content }]).select();
   if (!error && data) {
-    navigateTo(`/admin/editor/${data[0].id}`);
+    navigateTo(`${basePath}/editor/${data[0].id}`);
   } else {
     isCreating.value = false;
     showToast("Ce slug est d\xE9j\xE0 utilis\xE9. Changez le titre.", "error");
@@ -106,7 +108,7 @@ useHead({ title: computed(() => `${typeLabel.value} \u2014 Admin`) });
       <div class="mb-8 flex items-center justify-between">
         <div>
           <div class="flex items-center gap-2 text-[11px] text-gray-400 mb-2">
-            <NuxtLink to="/admin" class="hover:text-gray-600 transition-colors">Tableau de bord</NuxtLink>
+            <NuxtLink :to="basePath" class="hover:text-gray-600 transition-colors">Tableau de bord</NuxtLink>
             <span>/</span>
             <span class="text-gray-600 font-medium">{{ typeLabel }}</span>
           </div>
@@ -164,7 +166,7 @@ useHead({ title: computed(() => `${typeLabel.value} \u2014 Admin`) });
               </td>
               <td class="px-6 py-4">
                 <div class="flex items-center justify-end gap-1">
-                  <NuxtLink :to="`/admin/editor/${page.id}`"
+                  <NuxtLink :to="`${basePath}/editor/${page.id}`"
                     class="px-3 py-1.5 rounded-lg text-[11px] font-bold bg-gray-100 text-gray-600 hover:bg-[#3d35ff] hover:text-white transition-all">
                     Éditer
                   </NuxtLink>