create-snapify-app 0.0.0-stage → 1.1.1

package/template/modules/ai-theme-studio/src/lib/prompts.ts

@@ -0,0 +1,198 @@
+/** Exemples + coach de prompt + consigne système (qualité pro) */
+
+export type ThemeMarket = 'tn' | 'fr';
+
+export const PROMPT_EXAMPLES_TN = [
+  {
+    id: 'clinic',
+    title: 'Cabinet médical',
+    prompt:
+      'Site vitrine pour une clinique radiologique à Tunis : confiance, modernité, bleu médical doux, textes rassurants, prise de rendez-vous claire. Public : patients et médecins partenaires. CTA principal : Prendre rendez-vous.',
+  },
+  {
+    id: 'agency',
+    title: 'Agence digitale',
+    prompt:
+      'Agence web créative à Sfax : énergie, contraste fort, typo moderne, portfolio et services. Ton ambitieux mais accessible. Couleurs sombre + accent vif. CTA : Demander un devis.',
+  },
+  {
+    id: 'shop',
+    title: 'Boutique artisanale',
+    prompt:
+      'Boutique en ligne d’huile d’olive et produits du terroir tunisien : chaleur, naturel, beige/vert olive, storytelling artisanal. CTA : Découvrir la boutique.',
+  },
+  {
+    id: 'lawyer',
+    title: 'Cabinet d’avocats',
+    prompt:
+      'Cabinet d’avocats corporate à Tunis : sobriété, navy et or discret, typographie sérieuse, expertise. CTA : Prendre conseil.',
+  },
+  {
+    id: 'restaurant',
+    title: 'Restaurant',
+    prompt:
+      'Restaurant méditerranéen à La Marsa : ambiance soirée, photos généreuses, menu et réservation, palette terre cuite et crème. CTA : Réserver une table.',
+  },
+] as const;
+
+export const PROMPT_EXAMPLES_FR = [
+  {
+    id: 'clinic',
+    title: 'Cabinet médical',
+    prompt:
+      'Site vitrine pour une clinique radiologique à Lyon : confiance, modernité, bleu médical doux, textes rassurants, prise de rendez-vous claire. Public : patients et médecins partenaires. CTA principal : Prendre rendez-vous.',
+  },
+  {
+    id: 'agency',
+    title: 'Agence digitale',
+    prompt:
+      'Agence web créative à Paris : énergie, contraste fort, typo moderne, portfolio et services. Ton ambitieux mais accessible. Couleurs sombre + accent vif. CTA : Demander un devis.',
+  },
+  {
+    id: 'shop',
+    title: 'Boutique artisanale',
+    prompt:
+      'Boutique en ligne de produits artisanaux français (épicerie fine) : chaleur, naturel, beige/vert olive, storytelling artisanal. CTA : Découvrir la boutique.',
+  },
+  {
+    id: 'lawyer',
+    title: 'Cabinet d’avocats',
+    prompt:
+      'Cabinet d’avocats corporate à Paris : sobriété, navy et or discret, typographie sérieuse, expertise. CTA : Prendre conseil.',
+  },
+  {
+    id: 'restaurant',
+    title: 'Restaurant',
+    prompt:
+      'Restaurant contemporain à Bordeaux : ambiance soirée, photos généreuses, menu et réservation, palette terre cuite et crème. CTA : Réserver une table.',
+  },
+] as const;
+
+/** @deprecated préférer promptExamples(market) */
+export const PROMPT_EXAMPLES = PROMPT_EXAMPLES_TN;
+
+export const PROMPT_TIPS_TN = [
+  'Indiquez le secteur et la ville (ex. « dentiste à Sousse »).',
+  'Décrivez le sentiment : confiance, luxe, jeunesse, tech, artisanal…',
+  'Citez 1–2 couleurs ou une ambiance (« bleu nuit », « pastel »).',
+  'Précisez le public (B2B, familles, étudiants…).',
+  'Donnez l’action principale du bouton (RDV, devis, achat, contact).',
+  'Mentionnez 2–3 services ou preuves (avis, années, certifications).',
+] as const;
+
+export const PROMPT_TIPS_FR = [
+  'Indiquez le secteur et la ville (ex. « dentiste à Lyon »).',
+  'Décrivez le sentiment : confiance, luxe, jeunesse, tech, artisanal…',
+  'Citez 1–2 couleurs ou une ambiance (« bleu nuit », « pastel »).',
+  'Précisez le public (B2B, familles, étudiants…).',
+  'Donnez l’action principale du bouton (RDV, devis, achat, contact).',
+  'Mentionnez 2–3 services ou preuves (avis, années, certifications).',
+] as const;
+
+export const PROMPT_TIPS = PROMPT_TIPS_TN;
+
+export function promptExamples(market: ThemeMarket = 'tn') {
+  return market === 'fr' ? PROMPT_EXAMPLES_FR : PROMPT_EXAMPLES_TN;
+}
+
+export function promptTips(market: ThemeMarket = 'tn') {
+  return market === 'fr' ? PROMPT_TIPS_FR : PROMPT_TIPS_TN;
+}
+
+export function promptPlaceholder(market: ThemeMarket = 'tn') {
+  return market === 'fr'
+    ? 'Ex. Clinique dentaire à Lyon : confiance, blanc et bleu doux, prise de RDV évidente…'
+    : 'Ex. Clinique dentaire à Sousse : confiance, blanc et bleu doux, prise de RDV évidente…';
+}
+
+export function systemPrompt(lang: string, market: ThemeMarket = 'tn'): string {
+  const langLabel = lang === 'en' ? 'English' : lang === 'ar' ? 'Arabic' : 'French';
+  const localeRule =
+    market === 'fr'
+      ? `- Market = France / international. NEVER mention Tunisia, Tunis, Sfax, Sousse, La Marsa, dinar, Flouci, or Tunisian places/brands unless the user brief explicitly asks for Tunisia.
+- Prefer French cities (Paris, Lyon, Bordeaux, Marseille…) or generic EU context when inventing location details.`
+      : `- Market = Tunisia. Prefer Tunisian cities and local context when inventing location details (unless the brief says otherwise).`;
+
+  return `You are an expert Snapify brand & conversion designer. Output ONE JSON object only (no markdown).
+
+QUALITY BAR (real client deliverable — no lorem, no generic filler):
+- Every title/subtitle must feel specific to THIS brief (city, sector, offer).
+${localeRule}
+- Hero ALWAYS has EXACTLY 2 buttons:
+  1) primary — main conversion (RDV, devis, réserver, acheter…)
+  2) secondary — softer path (/services/, /a-propos/, /menu/)
+  Labels ≤ 28 chars, action verbs. variant primary|secondary. icon arrow|arrow-up-right|phone|mail.
+- Hero trustItems: EXACTLY 3 short proof points with numbers when possible.
+- Hero layout: "split". badgeText: short sector/city chip.
+- Structure EXACTLY 7–8 blocks in this order:
+  1) hero
+  2) stats (4 KPIs with value+suffix+label)
+  3) cards (3–4 services: icon, title, text 1–2 sentences, linkLabel "En savoir plus", link "/services/")
+  4) textMedia (about/story: title, intro, 3–5 bullets, 1–2 buttons)
+  5) steps (3–4 numbered) OR showcase
+  6) testimonials (2–3 quotes author+role) OR faq (4–5 Q&A)
+  7) cta — dark/gradient, EXACTLY 2 buttons (primary + light), layout "split"
+  8) contactForm optional
+- Alternate style.background: soft → white → surface → white → soft → white → navy.
+- style: paddingTop/Bottom lg|xl, width default|wide, animation fade-up, decor none.
+- Colors #RRGGBB, strong contrast. primaryHover darker than primary. accent distinct.
+- Fonts ONLY: Inter, Manrope, Plus Jakarta Sans, DM Sans, Poppins, Montserrat, Roboto, Open Sans, Lato, Source Sans 3, Space Grotesk, Outfit.
+- themeSettings: buttonShape pill|rounded|square ; density compact|comfortable|airy ; cardRadius 16–24 ; stickyHeader true ; animations true ; backToTop true.
+- All user-facing strings in ${langLabel}.
+- imagePrompts in ENGLISH, photorealistic, NO text/logos/UI:
+  { "hero": "wide cinematic scene…", "secondary": "lifestyle/supporting…", "cards": ["service1 scene", "service2", "service3"] }
+
+Allowed types: hero, stats, cards, steps, showcase, faq, testimonials, cta, textMedia, checklist, contactForm, spacer.
+
+Hero data:
+{
+  "layout":"split",
+  "badgeText":"...",
+  "title":"...",
+  "highlight":"...",
+  "subtitle":"...",
+  "rotatingWords":[],
+  "buttons":[
+    {"id":"b1","label":"...","link":"/contact/","variant":"primary","icon":"arrow"},
+    {"id":"b2","label":"...","link":"/services/","variant":"secondary","icon":"arrow-up-right"}
+  ],
+  "trustItems":["...","...","..."],
+  "media":"image",
+  "mainImage":"",
+  "parallax":false,
+  "marquee":[]
+}
+
+CTA data: variant dark|gradient, layout split, eyebrow, title, highlight, text, buttons (primary + light).
+ContactForm: formId "contact", title, intro, listItems (3), submitLabel.
+
+Return JSON:
+{
+  "siteName":"...",
+  "tagline":"...",
+  "industry":"...",
+  "mood":"...",
+  "rationale":"2-3 sentences in ${langLabel}",
+  "branding":{"colors":{primary,primaryHover,accent,navy,background,text,muted,border},"fonts":{heading,body}},
+  "themeSettings":{stickyHeader,headerPhone,buttonShape,cardRadius,density,animations,mobileBar,backToTop},
+  "imagePrompts":{"hero":"...","secondary":"...","cards":["...","...","..."]},
+  "homeBlocks":[ { "type":"...", "data":{...}, "style":{...} }, ... ]
+}`;
+}
+
+export function userPrompt(brief: string, siteHint?: string, market: ThemeMarket = 'tn'): string {
+  const hint = siteHint?.trim() ? `\nContexte site actuel : ${siteHint.trim()}` : '';
+  const locale =
+    market === 'fr'
+      ? '\nContexte marché : France / international — pas de références tunisiennes inventées.'
+      : '\nContexte marché : Tunisie — contextes locaux OK si cohérents avec le brief.';
+  return `Brief utilisateur :\n${brief.trim()}${hint}${locale}
+
+Produis un ThemeSpec premium conversion-ready :
+- textes concrets liés au brief (pas de filler)
+- hero 2 boutons + 3 trustItems
+- stats chiffrées, 3–4 services avec liens
+- textMedia avec bullets, steps, preuves sociales
+- CTA sombre à 2 boutons (primary + light)
+- imagePrompts anglais photoréalistes`;
+}

package/template/modules/ai-theme-studio/src/server.ts

@@ -0,0 +1,137 @@
+/**
+ * Atelier thème IA — génération structurée (identité + réglages AI Canvas + blocs accueil)
+ * Génération en arrière-plan pour éviter le timeout 60–120 s des routes admin.
+ */
+import { defineServerModule, type ServerContext, type StoredRecord } from '@snapify/sdk';
+import { generateThemeSpec } from './lib/llm';
+import { promptExamples, promptPlaceholder, promptTips, type ThemeMarket } from './lib/prompts';
+import { AI_CANVAS_THEME_ID, type GenerationRecord, type Settings, type ThemeSpec } from './types';
+
+type GenDoc = {
+  prompt: string;
+  lang: string;
+  provider: GenerationRecord['provider'];
+  model: string;
+  status: 'pending' | 'ready' | 'failed';
+  error?: string;
+  spec?: ThemeSpec;
+  applied?: GenerationRecord['applied'];
+};
+
+function asGen(r: StoredRecord<GenDoc>): GenerationRecord {
+  return {
+    id: r.id,
+    createdAt: r.createdAt,
+    prompt: r.prompt,
+    lang: r.lang,
+    provider: r.provider,
+    model: r.model,
+    status: r.status,
+    error: r.error,
+    spec: r.spec,
+    applied: r.applied,
+  };
+}
+
+export default defineServerModule<Settings>({
+  activate(ctx: ServerContext<Settings>) {
+    const generations = ctx.db.collection<GenDoc>('generations');
+
+    ctx.admin.get('/meta', async () => {
+      const s = ctx.settings();
+      let market: ThemeMarket = 'tn';
+      try {
+        const url = (ctx.site()?.publicUrl || '').toLowerCase();
+        if (url.includes('.fr') || url.includes('france')) market = 'fr';
+      } catch {
+        /* ignore */
+      }
+      return {
+        market,
+        examples: promptExamples(market),
+        tips: promptTips(market),
+        placeholder: promptPlaceholder(market),
+        canvasThemeId: AI_CANVAS_THEME_ID,
+        provider: s.provider,
+        hasApiKey: Boolean((s.apiKey || '').trim()),
+        lang: s.defaultLang || 'fr',
+        autoApplyHome: s.autoApplyHome !== false,
+        generateImages: s.generateImages !== false,
+      };
+    });
+
+    ctx.admin.get('/generations', async () => {
+      const { items } = await generations.find({
+        orderBy: [{ field: 'createdAt', dir: 'desc' }],
+        limit: 40,
+      });
+      return { generations: items.map(asGen) };
+    });
+
+    ctx.admin.get('/generations/:id', async (req) => {
+      const row = await generations.get(req.params.id);
+      if (!row) throw ctx.error(404, 'Génération introuvable.');
+      return { generation: asGen(row) };
+    });
+
+    ctx.admin.post('/generate', async (req) => {
+      const body = (req.body || {}) as { prompt?: string; lang?: string; siteHint?: string };
+      const prompt = String(body.prompt || '').trim();
+      if (prompt.length < 12) throw ctx.error(400, 'Décrivez un peu plus votre marque (au moins une phrase).');
+      if (prompt.length > 2000) throw ctx.error(400, 'Prompt trop long (max 2000 caractères).');
+      const s = ctx.settings();
+      const lang = (body.lang || s.defaultLang || 'fr') as string;
+      const siteHint = body.siteHint;
+
+      const row = await generations.insert({
+        prompt,
+        lang,
+        provider: s.provider || 'openai',
+        model: '',
+        status: 'pending',
+      });
+
+      // Travail hors requête HTTP (évite abort / délai route admin).
+      void (async () => {
+        try {
+          const { spec, provider, model } = await generateThemeSpec(ctx, prompt, lang, siteHint);
+          await generations.update(row.id, {
+            status: 'ready',
+            provider,
+            model,
+            spec,
+            error: undefined,
+          });
+        } catch (e) {
+          const message = e instanceof Error ? e.message : 'Génération échouée';
+          ctx.log.warn('generate fail', message);
+          await generations.update(row.id, {
+            status: 'failed',
+            error: message.slice(0, 400),
+          });
+        }
+      })();
+
+      return { generation: asGen(row) };
+    });
+
+    ctx.admin.post('/generations/:id/mark-applied', async (req) => {
+      const row = await generations.get(req.params.id);
+      if (!row) throw ctx.error(404, 'Génération introuvable.');
+      const body = (req.body || {}) as { branding?: boolean; theme?: boolean; home?: boolean };
+      const applied = {
+        branding: !!body.branding,
+        theme: !!body.theme,
+        home: !!body.home,
+        at: new Date().toISOString(),
+      };
+      const updated = await generations.update(row.id, { applied });
+      return { generation: asGen(updated!) };
+    });
+
+    ctx.admin.delete('/generations/:id', async (req) => {
+      await generations.delete(req.params.id);
+      return { ok: true };
+    });
+  },
+});

package/template/modules/ai-theme-studio/src/types.ts

@@ -0,0 +1,112 @@
+/** Types Atelier thème IA */
+
+export type Provider = 'openai' | 'anthropic' | 'gemini';
+
+export type Settings = {
+  provider: Provider;
+  apiKey: string;
+  openaiModel: string;
+  anthropicModel: string;
+  geminiModel: string;
+  defaultLang: 'fr' | 'ar' | 'en';
+  autoApplyHome: boolean;
+  /** OpenAI DALL·E / Gemini Imagen ; sinon images Unsplash adaptées au secteur. */
+  generateImages: boolean;
+};
+
+export type BrandColors = {
+  primary: string;
+  primaryHover: string;
+  accent: string;
+  navy: string;
+  background: string;
+  text: string;
+  muted: string;
+  border: string;
+};
+
+export type ThemeSettingsSpec = {
+  stickyHeader: boolean;
+  headerPhone: boolean;
+  buttonShape: 'pill' | 'rounded' | 'square';
+  cardRadius: number;
+  density: 'compact' | 'comfortable' | 'airy';
+  animations: boolean;
+  mobileBar: boolean;
+  backToTop: boolean;
+};
+
+/** Bloc CMS simplifié — types sûrs pour la page d’accueil. */
+export type HomeBlock = {
+  type: string;
+  data: Record<string, unknown>;
+  style?: Record<string, unknown>;
+};
+
+export type ThemeSpec = {
+  siteName: string;
+  tagline: string;
+  industry: string;
+  mood: string;
+  rationale: string;
+  branding: {
+    colors: BrandColors;
+    fonts: { heading: string; body: string };
+  };
+  themeSettings: ThemeSettingsSpec;
+  homeBlocks: HomeBlock[];
+};
+
+export type GenerationRecord = {
+  id: string;
+  createdAt: string;
+  prompt: string;
+  lang: string;
+  provider: Provider;
+  model: string;
+  status: 'pending' | 'ready' | 'failed';
+  error?: string;
+  spec?: ThemeSpec;
+  applied?: {
+    branding: boolean;
+    theme: boolean;
+    home: boolean;
+    at: string;
+  };
+};
+
+export const AI_CANVAS_THEME_ID = 'hamdiayari.ai-canvas';
+
+export const ALLOWED_FONTS = [
+  'Inter',
+  'Manrope',
+  'Plus Jakarta Sans',
+  'DM Sans',
+  'Poppins',
+  'Montserrat',
+  'Roboto',
+  'Open Sans',
+  'Lato',
+  'Source Sans 3',
+  'Space Grotesk',
+  'Outfit',
+] as const;
+
+export const ALLOWED_HOME_TYPES = [
+  'hero',
+  'pageHeader',
+  'richText',
+  'textMedia',
+  'stats',
+  'cards',
+  'showcase',
+  'steps',
+  'faq',
+  'testimonials',
+  'cta',
+  'contactForm',
+  'gallery',
+  'checklist',
+  'panels',
+  'spacer',
+] as const;

package/template/modules/calendar/snapify.module.json

@@ -0,0 +1,45 @@
+{
+  "id": "novalabs.calendar",
+  "name": "Calendrier",
+  "version": "1.0.1",
+  "description": "Agenda d’événements : création et gestion dans l’administration, calendrier mensuel et liste sur le site, widget à placer dans vos pages.",
+  "author": { "name": "NOVALABS WEB DESIGN", "email": "contact@novalabs.tn", "url": "https://novalabs.tn" },
+  "pricing": "free",
+  "category": "Contenu",
+  "icon": "calendar",
+  "screenshot": "screenshot.jpg",
+  "engines": { "snapify": "^1.2.0" },
+  "permissions": ["http:routes", "admin:routes", "database"],
+  "slots": [],
+  "routes": ["/agenda/*", "/calendrier/*"],
+  "entries": { "public": "src/public/index.tsx", "server": "src/server.ts", "admin": "src/admin/index.tsx" },
+  "adminPages": [
+    { "id": "events", "label": "Événements", "icon": "calendar" }
+  ],
+  "widgets": [
+    {
+      "id": "upcoming",
+      "label": "Prochains événements",
+      "description": "Liste des prochains événements à venir.",
+      "fields": [
+        { "key": "title", "type": "text", "label": "Titre", "default": "À venir", "maxLength": 80 },
+        { "key": "limit", "type": "number", "label": "Nombre d’événements", "default": 5, "min": 1, "max": 20 },
+        { "key": "buttonLabel", "type": "text", "label": "Bouton agenda", "default": "Voir l’agenda", "maxLength": 40 }
+      ]
+    },
+    {
+      "id": "month",
+      "label": "Calendrier du mois",
+      "description": "Vue mensuelle avec les jours qui ont des événements.",
+      "fields": [
+        { "key": "title", "type": "text", "label": "Titre", "default": "Calendrier", "maxLength": 80 }
+      ]
+    }
+  ],
+  "settings": [
+    { "key": "pageTitle", "type": "text", "group": "Page publique", "label": "Titre de la page agenda", "default": "Agenda", "public": true, "maxLength": 80 },
+    { "key": "pageIntro", "type": "textarea", "group": "Page publique", "label": "Introduction", "default": "Retrouvez nos prochains événements et rendez-vous.", "public": true, "maxLength": 400, "rows": 2 },
+    { "key": "timezone", "type": "text", "group": "Page publique", "label": "Fuseau horaire (affichage)", "default": "Africa/Tunis", "public": true, "maxLength": 60 },
+    { "key": "showPast", "type": "boolean", "group": "Page publique", "label": "Afficher aussi les événements passés", "default": false, "public": true }
+  ]
+}