create-snapify-app 0.0.0-stage → 1.1.1

package/template/src/admin/modules/labels.tsx

@@ -0,0 +1,226 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import { useEffect, useState } from 'react';
+import {
+  BarChart3,
+  Bot,
+  Calendar,
+  Cookie,
+  CreditCard,
+  Database,
+  FolderTree,
+  Globe2,
+  Heart,
+  KeyRound,
+  LayoutDashboard,
+  Mail,
+  MessageCircle,
+  MessagesSquare,
+  Package,
+  Phone,
+  Puzzle,
+  Receipt,
+  Route,
+  Search,
+  ShieldCheck,
+  ShoppingBag,
+  ShoppingCart,
+  Sparkles,
+  Store,
+  Tag,
+  Ticket,
+  Truck,
+  UserRound,
+  Users,
+  Image as ImageIcon,
+  type LucideIcon,
+} from 'lucide-react';
+import type { InstalledModuleInfo, ModuleStatusCode } from '../../../server/modules/types';
+import { api } from '../lib/api';
+import { Badge, cx } from '../ui/primitives';
+
+const ICONS: Record<string, LucideIcon> = {
+  bot: Bot,
+  calendar: Calendar,
+  'chart-bar': BarChart3,
+  database: Database,
+  globe: Globe2,
+  mail: Mail,
+  'message-circle': MessageCircle,
+  'messages-square': MessagesSquare,
+  phone: Phone,
+  search: Search,
+  'shopping-cart': ShoppingCart,
+  'shopping-bag': ShoppingBag,
+  sparkles: Sparkles,
+  store: Store,
+  package: Package,
+  receipt: Receipt,
+  users: Users,
+  user: UserRound,
+  ticket: Ticket,
+  tag: Tag,
+  folder: FolderTree,
+  truck: Truck,
+  'credit-card': CreditCard,
+  heart: Heart,
+  'shield-check': ShieldCheck,
+};
+
+export const moduleIcon = (name?: string): LucideIcon => (name && ICONS[name]) || Puzzle;
+
+export function ModuleIcon({ name, className }: { name?: string; className?: string }) {
+  const Icon = moduleIcon(name);
+  return (
+    <span className={cx('flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-700 ring-1 ring-brand-100', className)}>
+      <Icon className="h-5 w-5" />
+    </span>
+  );
+}
+
+/** Libellé lisible d'une permission, avec son icône. */
+export function describePermission(p: string): { icon: LucideIcon; label: string } {
+  if (p === 'site:read') return { icon: Globe2, label: 'Lire les informations publiques du site (nom, coordonnées, couleurs)' };
+  if (p === 'storage') return { icon: Database, label: 'Enregistrer ses propres données dans la base du site' };
+  if (p === 'http:routes') return { icon: Route, label: 'Exposer des points d’API publics sous /api/modules/' };
+  if (p === 'database') return { icon: Database, label: 'Gérer ses propres collections de données (produits, commandes…)' };
+  if (p === 'files') return { icon: ImageIcon, label: 'Enregistrer des images publiques (photos de profil…) dans /uploads/modules/' };
+  if (p === 'http:cookies') return { icon: Cookie, label: 'Déposer des cookies de session pour les visiteurs (préfixe sm_)' };
+  if (p === 'admin:routes') return { icon: LayoutDashboard, label: 'Ajouter des pages et des actions à l’administration' };
+  if (p === 'mail:send') return { icon: Mail, label: 'Envoyer des e-mails via le serveur SMTP du site' };
+  if (p.startsWith('env:')) return { icon: KeyRound, label: `Lire la variable serveur ${p.slice(4)}` };
+  if (p.startsWith('net:')) return { icon: Globe2, label: `Envoyer des requêtes HTTPS vers ${p.slice(4)}` };
+  return { icon: Puzzle, label: p };
+}
+
+const STATUS_TONE: Record<ModuleStatusCode, 'success' | 'neutral' | 'warning' | 'danger'> = {
+  active: 'success',
+  disabled: 'neutral',
+  unsigned: 'danger',
+  incompatible: 'danger',
+  tampered: 'danger',
+  license_missing: 'warning',
+  license_invalid: 'danger',
+  license_expired: 'warning',
+  license_domain: 'warning',
+  dependency: 'warning',
+  error: 'danger',
+};
+
+const STATUS_LABEL: Record<ModuleStatusCode, string> = {
+  active: 'Actif',
+  disabled: 'Désactivé',
+  unsigned: 'Signature invalide',
+  incompatible: 'Incompatible',
+  tampered: 'Fichiers altérés',
+  license_missing: 'Licence requise',
+  license_invalid: 'Licence invalide',
+  license_expired: 'Licence expirée',
+  license_domain: 'Domaine non couvert',
+  dependency: 'Module requis',
+  error: 'Erreur',
+};
+
+export function ModuleStatusBadge({ code }: { code: ModuleStatusCode }) {
+  return (
+    <Badge tone={STATUS_TONE[code]} dot>
+      {STATUS_LABEL[code]}
+    </Badge>
+  );
+}
+
+export const PRICING_LABEL = { free: 'Gratuit', paid: 'Payant' } as const;
+
+/* ------------------------------------------------------------------ */
+/* Liste partagée des modules installés (menu latéral, pages)          */
+/* ------------------------------------------------------------------ */
+
+const CHANGED = 'snapify:modules-changed';
+let cache: InstalledModuleInfo[] | null = null;
+
+export const notifyModulesChanged = () => window.dispatchEvent(new Event(CHANGED));
+
+export function useInstalledModules(): InstalledModuleInfo[] {
+  const [list, setList] = useState<InstalledModuleInfo[]>(cache ?? []);
+  useEffect(() => {
+    let alive = true;
+    const load = () =>
+      api.modules
+        .list()
+        .then((r) => {
+          cache = r.modules;
+          if (alive) setList(r.modules);
+        })
+        .catch(() => undefined);
+    void load();
+    window.addEventListener(CHANGED, load);
+    return () => {
+      alive = false;
+      window.removeEventListener(CHANGED, load);
+    };
+  }, []);
+  return list;
+}
+
+export interface ModuleNavItem {
+  to: string;
+  label: string;
+  icon: LucideIcon;
+  moduleId: string;
+  pageId: string;
+}
+
+/** Libellés sidebar distincts des titres CMS (évite deux « Contenu » / « Contact »). */
+const MODULE_NAV_TITLE: Record<string, string> = {
+  Contenu: 'Applications',
+  Contact: 'Messagerie',
+  Contacts: 'Messagerie',
+};
+
+/** Pages d'administration des modules actifs, regroupées par catégorie de module (ex. « E-commerce »). */
+export function useModuleNav(enabled: boolean): { title: string; items: ModuleNavItem[] }[] {
+  const installed = useInstalledModules();
+  if (!enabled) return [];
+  const groups = new Map<string, ModuleNavItem[]>();
+  for (const m of installed) {
+    if (!m.admin || !m.adminPages.length) continue;
+    const raw = m.category || 'Modules';
+    const title = MODULE_NAV_TITLE[raw] || raw;
+    const list = groups.get(title) ?? [];
+    for (const p of m.adminPages) list.push({ to: `/m/${m.id}/${p.id}`, label: p.label, icon: moduleIcon(p.icon ?? m.icon), moduleId: m.id, pageId: p.id });
+    groups.set(title, list);
+  }
+  return [...groups].map(([title, items]) => ({ title, items }));
+}
+
+export function PermissionList({ permissions, hasServer }: { permissions: string[]; hasServer?: boolean }) {
+  if (!permissions.length) {
+    return <p className="text-sm text-slate-500">Aucune permission particulière : le module s’affiche uniquement sur le site{hasServer ? ' et exécute du code serveur sans accès externe' : ''}.</p>;
+  }
+  return (
+    <ul className="space-y-2">
+      {permissions.map((p) => {
+        const { icon: Icon, label } = describePermission(p);
+        return (
+          <li key={p} className="flex items-start gap-2.5 text-sm text-slate-700">
+            <Icon className="mt-0.5 h-4 w-4 shrink-0 text-slate-400" />
+            <span>{label}</span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export function fileToBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result).split(',')[1] || '');
+    reader.onerror = () => reject(new Error('Lecture du fichier impossible'));
+    reader.readAsDataURL(file);
+  });
+}

package/template/src/admin/pages/AccountSetupPage.tsx

@@ -0,0 +1,62 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+/** Écran obligatoire avant l'accès à l'administration : changement de mot de passe et/ou activation de la 2FA. */
+import React from 'react';
+import { KeyRound, LogOut, ShieldCheck } from 'lucide-react';
+import { useAuth } from '../context/AuthContext';
+import { Button, Card } from '../ui/primitives';
+import { PasswordChangeForm, TwoFactorSetup } from '../account/SecurityForms';
+import { SnapifyMark } from '../../components/SnapifyLogo';
+
+export default function AccountSetupPage() {
+  const { user, logout } = useAuth();
+  if (!user) return null;
+  const passwordStep = user.mustChangePassword;
+
+  return (
+    <div className="min-h-screen bg-slate-50 px-4 py-10">
+      <div className="mx-auto max-w-xl">
+        <div className="mb-8 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-brand-600">
+              <SnapifyMark className="h-7 w-7" accent="#FFFFFF" />
+            </div>
+            <div className="leading-tight">
+              <p className="text-sm font-semibold text-slate-900">{user.name}</p>
+              <p className="text-xs text-slate-500">{user.email}</p>
+            </div>
+          </div>
+          <Button size="sm" variant="ghost" icon={LogOut} onClick={() => void logout()}>
+            Se déconnecter
+          </Button>
+        </div>
+
+        <Card className="p-6 sm:p-8">
+          <div className="mb-6 flex items-start gap-3">
+            <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-700">
+              {passwordStep ? <KeyRound className="h-5 w-5" /> : <ShieldCheck className="h-5 w-5" />}
+            </span>
+            <div>
+              <h1 className="text-lg font-semibold text-slate-900">{passwordStep ? 'Choisissez un nouveau mot de passe' : 'Activez la double authentification'}</h1>
+              <p className="mt-1 text-sm leading-relaxed text-slate-500">
+                {passwordStep
+                  ? user.passwordChangedAt
+                    ? 'Votre mot de passe doit être renouvelé (politique de sécurité ou demande d’un administrateur).'
+                    : 'Votre compte a été créé avec un mot de passe provisoire : remplacez-le pour continuer.'
+                  : 'La politique de sécurité du site impose la double authentification pour votre compte.'}
+              </p>
+            </div>
+          </div>
+          {passwordStep ? <PasswordChangeForm submitLabel="Enregistrer et continuer" /> : <TwoFactorSetup />}
+        </Card>
+        {passwordStep && user.mustSetup2fa ? (
+          <p className="mt-4 text-center text-xs text-slate-500">Étape suivante : activation de la double authentification.</p>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/template/src/admin/pages/AnalyticsPage.tsx

@@ -0,0 +1,206 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { useState } from 'react';
+import { Clock, Download, Eye, Monitor, Radio, Smartphone, Tablet, TrendingDown, Users } from 'lucide-react';
+import { api } from '../lib/api';
+import { useAsync } from '../lib/hooks';
+import { countryFlag, countryName, downloadCsv, fmtDateTime, fmtDuration, fmtNumber } from '../lib/format';
+import { Badge, Button, Card, EmptyState, ErrorState, PageHeader, PageSkeleton, Segmented, StatCard, Table, Td, Th } from '../ui/primitives';
+import { BarList, Legend, TrendChart } from '../ui/charts';
+import { Pagination, usePagination } from '../ui/Pagination';
+
+const SERIES = [
+  { key: 'views', label: 'Pages vues', color: '#00a89d' },
+  { key: 'sessions', label: 'Visiteurs', color: '#6366f1' },
+];
+const DEVICE: Record<string, { label: string; icon: React.ElementType }> = {
+  desktop: { label: 'Ordinateur', icon: Monitor },
+  mobile: { label: 'Mobile', icon: Smartphone },
+  tablet: { label: 'Tablette', icon: Tablet },
+  unknown: { label: 'Inconnu', icon: Monitor },
+};
+
+export default function AnalyticsPage() {
+  const [days, setDays] = useState('30');
+  const { data: a, error, loading, reload } = useAsync(() => api.analytics(Number(days)), [days]);
+  const recent = usePagination(a?.recent ?? [], 'analytics-recent', { resetKey: days });
+
+  const exportCsv = () => {
+    if (!a) return;
+    downloadCsv(`statistiques-${days}j.csv`, [
+      ['Page', 'Vues', 'Temps moyen (s)'],
+      ...a.topPages.map((p) => [p.path, p.views, p.avgTimeSec]),
+      [],
+      ['Pays', 'Vues'],
+      ...a.countries.map((c) => [countryName(c.country), c.views]),
+      [],
+      ['Source', 'Vues'],
+      ...a.referrers.map((r) => [r.source, r.views]),
+    ]);
+  };
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Statistiques"
+        description="Mesure d’audience interne, sans cookie tiers. Les visites de l’administration et des robots sont exclues."
+        actions={
+          <>
+            <Segmented
+              value={days}
+              onChange={setDays}
+              options={[
+                { value: '7', label: '7 jours' },
+                { value: '30', label: '30 jours' },
+                { value: '90', label: '90 jours' },
+                { value: '365', label: '12 mois' },
+              ]}
+            />
+            <Button icon={Download} onClick={exportCsv} disabled={!a}>
+              Exporter
+            </Button>
+          </>
+        }
+      />
+
+      {loading && !a ? (
+        <PageSkeleton />
+      ) : error || !a ? (
+        <ErrorState message={error || ''} onRetry={reload} />
+      ) : (
+        <>
+          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
+            <StatCard label="Pages vues" value={fmtNumber(a.pageViews)} icon={Eye} />
+            <StatCard label="Visiteurs uniques" value={fmtNumber(a.uniqueSessions)} icon={Users} tone="violet" />
+            <StatCard label="Temps moyen par page" value={fmtDuration(a.avgTimeOnPageSec)} icon={Clock} tone="sky" />
+            <StatCard label="Taux de rebond" value={`${a.bounceRate} %`} icon={TrendingDown} tone="amber" hint="Visites d’une seule page" />
+            <StatCard label="En ce moment" value={fmtNumber(a.activeNow)} icon={Radio} tone="rose" hint="Actifs ces 5 dernières minutes" />
+          </div>
+
+          <Card>
+            <div className="mb-4 flex items-center justify-between">
+              <h2 className="text-[15px] font-semibold text-slate-900">Évolution du trafic</h2>
+              <Legend series={SERIES} />
+            </div>
+            <TrendChart data={a.timeseries} series={SERIES} height={300} />
+          </Card>
+
+          <div className="grid gap-6 lg:grid-cols-2">
+            <Card>
+              <h2 className="mb-3 text-[15px] font-semibold text-slate-900">Pages les plus consultées</h2>
+              <BarList valueLabel="Temps moyen · Vues" items={a.topPages.slice(0, 12).map((p) => ({ key: p.path, label: p.path, value: p.views, extra: fmtDuration(p.avgTimeSec) }))} />
+            </Card>
+            <Card>
+              <h2 className="mb-3 text-[15px] font-semibold text-slate-900">Pays</h2>
+              <BarList
+                valueLabel="Vues"
+                items={a.countries.slice(0, 12).map((c) => ({
+                  key: c.country,
+                  label: (
+                    <span className="flex items-center gap-2">
+                      <span className="text-base leading-none">{countryFlag(c.country)}</span>
+                      {countryName(c.country)}
+                    </span>
+                  ),
+                  value: c.views,
+                  extra: a.pageViews ? `${Math.round((c.views / a.pageViews) * 100)} %` : undefined,
+                }))}
+              />
+            </Card>
+            <Card>
+              <h2 className="mb-3 text-[15px] font-semibold text-slate-900">Sources de trafic</h2>
+              <BarList valueLabel="Vues" items={a.referrers.slice(0, 10).map((r) => ({ key: r.source, label: r.source, value: r.views }))} />
+            </Card>
+            <Card>
+              <h2 className="mb-4 text-[15px] font-semibold text-slate-900">Appareils</h2>
+              {a.devices.length === 0 ? (
+                <p className="py-8 text-center text-sm text-slate-400">Pas encore de données</p>
+              ) : (
+                <div className="space-y-4">
+                  {a.devices.map((d) => {
+                    const meta = DEVICE[d.device] || DEVICE.unknown;
+                    const pct = a.pageViews ? Math.round((d.views / a.pageViews) * 100) : 0;
+                    return (
+                      <div key={d.device}>
+                        <div className="mb-1.5 flex items-center justify-between text-sm">
+                          <span className="flex items-center gap-2 text-slate-700">
+                            <meta.icon className="h-4 w-4 text-slate-400" /> {meta.label}
+                          </span>
+                          <span className="tabular-nums text-slate-900">
+                            <span className="font-medium">{pct} %</span> <span className="text-xs text-slate-400">({fmtNumber(d.views)})</span>
+                          </span>
+                        </div>
+                        <div className="h-2 overflow-hidden rounded-full bg-slate-100">
+                          <div className="h-full rounded-full bg-brand-500" style={{ width: `${pct}%` }} />
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </Card>
+          </div>
+
+          <Card padded={false}>
+            <div className="border-b border-slate-100 px-5 py-4">
+              <h2 className="text-[15px] font-semibold text-slate-900">Activité récente</h2>
+              <p className="text-xs text-slate-500">Dernières pages consultées, avec le temps passé lorsque le visiteur a quitté la page.</p>
+            </div>
+            {a.recent.length === 0 ? (
+              <EmptyState icon={Eye} title="Aucune visite enregistrée" description="Les visites apparaîtront ici dès que le site recevra du trafic." />
+            ) : (
+              <Table>
+                <thead>
+                  <tr>
+                    <Th>Date</Th>
+                    <Th>Page</Th>
+                    <Th>Événement</Th>
+                    <Th>Localisation</Th>
+                    <Th>Appareil</Th>
+                    <Th>Provenance</Th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {recent.pageItems.map((e) => (
+                    <tr key={e.id} className="hover:bg-slate-50/60">
+                      <Td className="whitespace-nowrap text-slate-500">{fmtDateTime(e.ts)}</Td>
+                      <Td className="max-w-[260px] truncate font-medium text-slate-800">{e.path}</Td>
+                      <Td>
+                        {e.kind === 'leave' ? <Badge tone="info">Sortie · {fmtDuration(e.durationSec || 0)}</Badge> : <Badge tone="brand">Vue</Badge>}
+                      </Td>
+                      <Td className="whitespace-nowrap">
+                        {e.country ? (
+                          <span className="flex items-center gap-2">
+                            {countryFlag(e.country)} {countryName(e.country)}
+                            {e.city ? <span className="text-slate-400">· {e.city}</span> : null}
+                          </span>
+                        ) : (
+                          <span className="text-slate-400">Inconnue</span>
+                        )}
+                      </Td>
+                      <Td>{(DEVICE[e.device] || DEVICE.unknown).label}</Td>
+                      <Td className="max-w-[200px] truncate text-slate-500">{e.referrer ? safeHost(e.referrer) : 'Accès direct'}</Td>
+                    </tr>
+                  ))}
+                </tbody>
+              </Table>
+            )}
+            <Pagination {...recent.props} noun="événements" />
+          </Card>
+        </>
+      )}
+    </div>
+  );
+}
+
+function safeHost(url: string) {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '');
+  } catch {
+    return url;
+  }
+}

package/template/src/admin/pages/BrandingPage.tsx

@@ -0,0 +1,154 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import React, { useCallback, useMemo, useState } from 'react';
+import { RotateCcw } from 'lucide-react';
+import type { ThemeBranding } from '../../../server/cms/types';
+import { api } from '../lib/api';
+import { useEditable } from '../lib/hooks';
+import { useSite, useSiteData } from '../context/SiteContext';
+import { Button, ColorField, Field, Input, PageHeader, Section, Select } from '../ui/primitives';
+import { ImageField } from '../ui/media';
+import { SaveBar } from '../ui/SaveBar';
+import { DeviceSwitch, PreviewFrame, type Device } from '../editor/PreviewFrame';
+
+const COLOR_LABELS: { key: keyof ThemeBranding['colors']; label: string; hint: string }[] = [
+  { key: 'primary', label: 'Couleur principale', hint: 'Début du dégradé des boutons, mots en couleur, icônes' },
+  { key: 'primaryHover', label: 'Principale foncée', hint: 'Liens, sur-titres, survols' },
+  { key: 'accent', label: 'Couleur secondaire / accent', hint: 'Fin du dégradé des boutons et des bandeaux' },
+  { key: 'navy', label: 'Bleu nuit / Sombre', hint: 'Titres, sections sombres, pied de page' },
+  { key: 'background', label: 'Fond des sections claires', hint: 'Sections « gris clair »' },
+  { key: 'text', label: 'Texte principal', hint: '' },
+  { key: 'muted', label: 'Texte secondaire', hint: 'Introductions, légendes' },
+  { key: 'border', label: 'Bordures', hint: 'Cartes, séparateurs' },
+];
+
+const DEFAULT_COLORS: ThemeBranding['colors'] = {
+  primary: '#00C6BA',
+  primaryHover: '#00A89D',
+  accent: '#0066EE',
+  navy: '#0B1528',
+  background: '#F5F7FA',
+  text: '#0B1528',
+  muted: '#64748B',
+  border: '#E3E8EE',
+};
+
+const FONTS = ['Inter', 'Manrope', 'Plus Jakarta Sans', 'DM Sans', 'Poppins', 'Montserrat', 'Roboto', 'Open Sans', 'Lato', 'Source Sans 3', 'Space Grotesk', 'Outfit'].map((f) => ({
+  value: f,
+  label: f,
+}));
+
+/** Aperçu réel : le vrai site, avec l'identité visuelle en cours d'édition (non enregistrée). */
+function LivePreview({ b, pages }: { b: ThemeBranding; pages: { value: string; label: string }[] }) {
+  const [path, setPath] = useState('/');
+  const [device, setDevice] = useState<Device>('desktop');
+  const payload = useMemo(() => ({ site: { branding: b } }), [b]);
+  return (
+    <div className="flex h-[calc(100vh-7rem)] min-h-[520px] flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+      <div className="flex items-center gap-2 border-b border-slate-200 px-3 py-2">
+        <span className="flex items-center gap-1.5 text-xs font-semibold text-slate-600">
+          <span className="h-2 w-2 animate-pulse rounded-full bg-emerald-500" />
+          Aperçu en direct
+        </span>
+        <div className="ml-auto w-48">
+          <Select value={path} onChange={setPath} options={pages.length ? pages : [{ value: '/', label: 'Accueil' }]} />
+        </div>
+        <DeviceSwitch value={device} onChange={setDevice} />
+      </div>
+      <div className="min-h-0 flex-1">
+        <PreviewFrame path={path} payload={payload} device={device} />
+      </div>
+    </div>
+  );
+}
+
+export default function BrandingPage() {
+  const site = useSiteData();
+  const { patchSite } = useSite();
+  const save = useCallback(
+    async (b: ThemeBranding) => {
+      await api.saveSection('branding', b);
+      patchSite('branding', b);
+    },
+    [patchSite]
+  );
+  const ed = useEditable<ThemeBranding>(site.branding, save, { successMessage: 'Identité visuelle enregistrée' });
+  if (!ed.value) return null;
+  const b = ed.value;
+  const setColor = (k: keyof ThemeBranding['colors'], v: string) => ed.patch({ colors: { ...b.colors, [k]: v } });
+  const pages = site.pages
+    .filter((p) => p.status === 'published')
+    .sort((x, y) => x.path.localeCompare(y.path))
+    .map((p) => ({ value: p.path, label: p.path === '/' ? 'Accueil' : p.title }));
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title="Identité visuelle" description="Logo, couleurs et typographie du site." />
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.25fr)]">
+        <div className="min-w-0 space-y-6">
+          <Section title="Nom et logo">
+            <div className="grid gap-4 sm:grid-cols-2">
+              <Field label="Nom du site">
+                <Input value={b.siteName} onChange={(e) => ed.patch({ siteName: e.target.value })} />
+              </Field>
+              <Field label="Accroche">
+                <Input value={b.tagline} onChange={(e) => ed.patch({ tagline: e.target.value })} />
+              </Field>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-3">
+              <Field label="Logo de l’en-tête" hint="SVG ou PNG transparent. Vide = logo Snapify + nom et accroche.">
+                <ImageField value={b.logoUrl} onChange={(logoUrl) => ed.patch({ logoUrl })} aspect="aspect-[3/2]" />
+              </Field>
+              <Field label="Logo du pied de page" hint="Version claire sur fond sombre. Vide = reprend le logo de l’en-tête.">
+                <div className="rounded-xl bg-navy-900 p-1">
+                  <ImageField value={b.logoDarkUrl} onChange={(logoDarkUrl) => ed.patch({ logoDarkUrl })} aspect="aspect-[3/2]" />
+                </div>
+              </Field>
+              <Field label="Favicon" hint="Carré, 512 × 512 px.">
+                <ImageField value={b.faviconUrl} onChange={(faviconUrl) => ed.patch({ faviconUrl })} aspect="aspect-[3/2]" />
+              </Field>
+            </div>
+          </Section>
+
+          <Section
+            title="Couleurs"
+            actions={
+              <Button size="sm" variant="ghost" icon={RotateCcw} onClick={() => ed.patch({ colors: DEFAULT_COLORS })}>
+                Couleurs Snapify
+              </Button>
+            }
+          >
+            <div className="grid gap-4 sm:grid-cols-2">
+              {COLOR_LABELS.map((l) => (
+                <ColorField key={l.key} label={l.label} hint={l.hint || undefined} value={b.colors[l.key]} onChange={(v) => setColor(l.key, v)} />
+              ))}
+            </div>
+          </Section>
+
+          <Section title="Typographie">
+            <div className="grid gap-4 sm:grid-cols-2">
+              <Field label="Police des titres">
+                <Select value={b.fonts.heading} onChange={(heading) => ed.patch({ fonts: { ...b.fonts, heading } })} options={withCurrent(FONTS, b.fonts.heading)} />
+              </Field>
+              <Field label="Police du texte">
+                <Select value={b.fonts.body} onChange={(body) => ed.patch({ fonts: { ...b.fonts, body } })} options={withCurrent(FONTS, b.fonts.body)} />
+              </Field>
+            </div>
+          </Section>
+        </div>
+        <div className="min-w-0 xl:sticky xl:top-20 xl:self-start">
+          <LivePreview b={b} pages={pages} />
+        </div>
+      </div>
+      <SaveBar dirty={ed.dirty} saving={ed.saving} onSave={ed.commit} onReset={ed.reset} blocker={ed.blocker} />
+    </div>
+  );
+}
+
+function withCurrent(opts: { value: string; label: string }[], current: string) {
+  return opts.some((o) => o.value === current) || !current ? opts : [{ value: current, label: current }, ...opts];
+}