create-snapify-app 0.0.0-stage → 1.1.0

package/template/src/admin/users/shared.tsx

@@ -0,0 +1,278 @@
+/**
+ * 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, { useEffect, useState } from 'react';
+import { CheckCircle2, Copy, LogOut, Monitor, Smartphone, Sparkles, XCircle } from 'lucide-react';
+import { toast } from 'sonner';
+import type { AuditEntry, LinkDelivery, Paged, PasswordPolicy, PublicUser, RoleRow, SessionRow } from '../lib/api';
+import { auditDetail, auditLabel } from '../lib/audit';
+import { fmtDateTime, timeAgo } from '../lib/format';
+import { Modal } from '../ui/overlays';
+import { Alert, Badge, Button, cx, Input, Spinner } from '../ui/primitives';
+import { policyChecks } from '../account/SecurityForms';
+import { Pagination, usePagination } from '../ui/Pagination';
+
+const AVATAR_TONES = ['bg-sky-100 text-sky-700', 'bg-violet-100 text-violet-700', 'bg-emerald-100 text-emerald-700', 'bg-amber-100 text-amber-800', 'bg-rose-100 text-rose-700', 'bg-brand-100 text-brand-700'];
+
+export function initials(name: string) {
+  return (
+    name
+      .split(/\s+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((p) => p[0]!.toUpperCase())
+      .join('') || '?'
+  );
+}
+
+const AVATAR_SIZES = { sm: 'h-7 w-7 text-[11px]', md: 'h-9 w-9 text-xs', lg: 'h-14 w-14 text-lg', xl: 'h-20 w-20 text-2xl' };
+
+export function Avatar({ name, email, src, size = 'md' }: { name: string; email: string; src?: string; size?: keyof typeof AVATAR_SIZES }) {
+  const [broken, setBroken] = useState(false);
+  useEffect(() => setBroken(false), [src]);
+  if (src && !broken) {
+    return <img src={src} alt="" onError={() => setBroken(true)} className={cx('shrink-0 rounded-full object-cover ring-1 ring-slate-200', AVATAR_SIZES[size])} />;
+  }
+  const tone = AVATAR_TONES[[...email].reduce((a, c) => a + c.charCodeAt(0), 0) % AVATAR_TONES.length];
+  return <span className={cx('inline-flex shrink-0 items-center justify-center rounded-full font-semibold', tone, AVATAR_SIZES[size])}>{initials(name)}</span>;
+}
+
+export function RoleBadge({ roleId, roles, fallback }: { roleId: string; roles?: RoleRow[] | null; fallback?: string }) {
+  const role = roles?.find((r) => r.id === roleId);
+  return <Badge tone={role?.tone ?? 'neutral'}>{role?.name ?? fallback ?? roleId}</Badge>;
+}
+
+export function UserStatusBadge({ user, inviteExpiresAt }: { user: Pick<PublicUser, 'status'>; inviteExpiresAt?: string }) {
+  if (user.status === 'suspended')
+    return (
+      <Badge tone="danger" dot>
+        Suspendu
+      </Badge>
+    );
+  if (user.status === 'invited') {
+    const expired = !inviteExpiresAt;
+    return (
+      <span title={inviteExpiresAt ? `Lien valable jusqu’au ${fmtDateTime(inviteExpiresAt)}` : 'Le lien d’invitation a expiré : renvoyez-le'}>
+        <Badge tone="warning" dot>
+          {expired ? 'Invitation expirée' : 'Invitation envoyée'}
+        </Badge>
+      </span>
+    );
+  }
+  return (
+    <Badge tone="success" dot>
+      Actif
+    </Badge>
+  );
+}
+
+/** Mot de passe aléatoire respectant la politique (caractères ambigus exclus). */
+export function generatePassword(policy: PasswordPolicy): string {
+  const lower = 'abcdefghijkmnopqrstuvwxyz';
+  const upper = 'ABCDEFGHJKLMNPQRSTUVWXYZ';
+  const digits = '23456789';
+  const symbols = '!@#$%&*?-_+=';
+  const all = lower + upper + digits + symbols;
+  const length = Math.max(16, policy.passwordMinLength);
+  const pick = (set: string) => set[crypto.getRandomValues(new Uint32Array(1))[0]! % set.length];
+  for (;;) {
+    const chars = [pick(lower), pick(upper), pick(digits), pick(symbols)];
+    while (chars.length < length) chars.push(pick(all));
+    for (let i = chars.length - 1; i > 0; i--) {
+      const j = crypto.getRandomValues(new Uint32Array(1))[0]! % (i + 1);
+      [chars[i], chars[j]] = [chars[j]!, chars[i]!];
+    }
+    const pw = chars.join('');
+    if (policyChecks(pw, policy).every((c) => c.ok)) return pw;
+  }
+}
+
+export function GeneratePasswordButton({ policy, onGenerate }: { policy: PasswordPolicy; onGenerate: (pw: string) => void }) {
+  return (
+    <Button
+      size="sm"
+      variant="ghost"
+      icon={Sparkles}
+      onClick={() => {
+        const pw = generatePassword(policy);
+        onGenerate(pw);
+        void navigator.clipboard?.writeText(pw).then(() => toast.success('Mot de passe généré et copié'));
+      }}
+    >
+      Générer
+    </Button>
+  );
+}
+
+export function CopyField({ value }: { value: string }) {
+  return (
+    <div className="flex gap-2">
+      <Input readOnly value={value} onFocus={(e) => e.target.select()} className="font-mono text-xs" />
+      <Button
+        icon={Copy}
+        onClick={() => {
+          void navigator.clipboard.writeText(value);
+          toast.success('Lien copié');
+        }}
+      >
+        Copier
+      </Button>
+    </div>
+  );
+}
+
+/** Résultat d'une invitation ou d'un lien de réinitialisation : état de l'e-mail et lien à transmettre. */
+export function LinkResultModal({
+  result,
+  onClose,
+}: {
+  /** `manual` : lien demandé sans envoi d'e-mail. */
+  result: { title: string; email: string; delivery: LinkDelivery; manual?: boolean } | null;
+  onClose: () => void;
+}) {
+  const d = result?.delivery;
+  return (
+    <Modal open={!!result} onClose={onClose} title={result?.title ?? ''} size="md" footer={<Button variant="primary" onClick={onClose}>Terminé</Button>}>
+      {result && d ? (
+        <div className="space-y-4">
+          {result.manual ? (
+            <Alert tone="info">Transmettez ce lien à {result.email} par un canal sûr : il donne accès au compte.</Alert>
+          ) : d.emailSent ? (
+            <Alert tone="success" icon={CheckCircle2} title={`E-mail envoyé à ${result.email}`}>
+              Vous pouvez aussi transmettre le lien ci-dessous par un autre moyen.
+            </Alert>
+          ) : (
+            <Alert tone="warning" icon={XCircle} title="Aucun e-mail n’a été envoyé">
+              {d.emailError ? <span className="block break-words">{d.emailError}</span> : null}
+              Transmettez ce lien à {result.email} par un canal sûr. Configurez l’envoi d’e-mails dans Paramètres › E-mails.
+            </Alert>
+          )}
+          <CopyField value={d.url} />
+          <p className="text-xs text-slate-500">
+            Lien personnel à usage unique, valable jusqu’au {fmtDateTime(d.expiresAt)}. Un nouveau lien annule le précédent.
+          </p>
+        </div>
+      ) : null}
+    </Modal>
+  );
+}
+
+export function SessionList({
+  sessions,
+  onRevoke,
+  revoking,
+  emptyLabel = 'Aucune session ouverte.',
+}: {
+  sessions: SessionRow[] | null;
+  onRevoke?: (s: SessionRow) => void;
+  revoking?: string | null;
+  emptyLabel?: string;
+}) {
+  const pg = usePagination(sessions ?? [], 'sessions', { defaultSize: 10 });
+  if (!sessions) return <Spinner className="mx-auto my-6 block" />;
+  if (!sessions.length) return <p className="py-6 text-center text-sm text-slate-500">{emptyLabel}</p>;
+  return (
+    <div>
+    <ul className="divide-y divide-slate-100">
+      {pg.pageItems.map((s) => {
+        const Icon = /iOS|Android/.test(s.device) ? Smartphone : Monitor;
+        return (
+          <li key={s.id} className="flex items-start gap-3 py-3">
+            <span className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-slate-100 text-slate-500">
+              <Icon className="h-4 w-4" />
+            </span>
+            <div className="min-w-0 flex-1">
+              <p className="flex flex-wrap items-center gap-2 text-sm font-medium text-slate-800">
+                {s.device}
+                {s.current ? <Badge tone="success">Cette session</Badge> : null}
+                {s.remember ? <Badge>Rester connecté</Badge> : null}
+              </p>
+              <p className="mt-0.5 text-xs text-slate-500" title={s.userAgent}>
+                {s.ip ?? 'IP inconnue'} · active {timeAgo(s.lastSeenAt)} · ouverte le {fmtDateTime(s.createdAt)}
+              </p>
+              <p className="text-xs text-slate-400">Expire le {fmtDateTime(s.expiresAt)}</p>
+            </div>
+            {onRevoke && !s.current ? (
+              <Button size="sm" variant="ghost" icon={LogOut} loading={revoking === s.id} onClick={() => onRevoke(s)}>
+                Fermer
+              </Button>
+            ) : null}
+          </li>
+        );
+      })}
+    </ul>
+    <Pagination {...pg.props} noun="sessions" flush />
+    </div>
+  );
+}
+
+export function ActivityFeed({
+  data,
+  page,
+  onPage,
+  onPageSize,
+  roleName,
+  showUser,
+}: {
+  data: Paged<AuditEntry> | null;
+  page: number;
+  onPage: (p: number) => void;
+  onPageSize?: (n: number) => void;
+  roleName?: (id: string) => string;
+  showUser?: boolean;
+}) {
+  const [open, setOpen] = useState<number | null>(null);
+  if (!data) return <Spinner className="mx-auto my-6 block" />;
+  if (!data.items.length) return <p className="py-6 text-center text-sm text-slate-500">Aucune activité enregistrée.</p>;
+  return (
+    <div>
+      <ul className="divide-y divide-slate-100">
+        {data.items.map((e) => {
+          const { label, tone } = auditLabel(e.action);
+          const detail = auditDetail(e, roleName);
+          return (
+            <li key={e.id} className="py-2.5">
+              <button type="button" className="flex w-full items-start gap-3 text-left" onClick={() => setOpen(open === e.id ? null : e.id)}>
+                <span
+                  className={cx(
+                    'mt-1.5 h-2 w-2 shrink-0 rounded-full',
+                    { neutral: 'bg-slate-300', success: 'bg-emerald-500', warning: 'bg-amber-500', danger: 'bg-rose-500', info: 'bg-sky-500', brand: 'bg-brand-500' }[tone]
+                  )}
+                />
+                <span className="min-w-0 flex-1">
+                  <span className="block text-sm text-slate-800">
+                    {label}
+                    {e.target ? <span className="text-slate-500"> — {e.target}</span> : null}
+                  </span>
+                  <span className="block text-xs text-slate-500">
+                    {showUser && e.userEmail ? `${e.userEmail} · ` : ''}
+                    {fmtDateTime(e.ts)}
+                    {e.ip ? ` · ${e.ip}` : ''}
+                    {detail ? ` · ${detail}` : ''}
+                  </span>
+                </span>
+              </button>
+              {open === e.id ? (
+                <div className="ml-5 mt-2 space-y-1 rounded-lg bg-slate-50 p-3 text-xs text-slate-600">
+                  <p>
+                    <span className="text-slate-400">Action :</span> <code className="font-mono">{e.action}</code>
+                  </p>
+                  {e.userAgent ? (
+                    <p className="break-all">
+                      <span className="text-slate-400">Navigateur :</span> {e.userAgent}
+                    </p>
+                  ) : null}
+                  {e.detail && Object.keys(e.detail).length ? <pre className="overflow-x-auto whitespace-pre-wrap font-mono text-[11px]">{JSON.stringify(e.detail, null, 2)}</pre> : null}
+                </div>
+              ) : null}
+            </li>
+          );
+        })}
+      </ul>
+      <Pagination page={page} pageSize={data.pageSize} total={data.total} onPage={onPage} onPageSize={onPageSize} noun="entrées" flush />
+    </div>
+  );
+}

package/template/src/cms/icons.ts

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export * from '../../sdk/icons';

package/template/src/components/CookieBanner.tsx

@@ -0,0 +1,166 @@
+/**
+ * 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, useEffect } from 'react';
+import { X, Check } from 'lucide-react';
+
+interface CookieBannerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onNavigateToCookies: () => void;
+}
+
+export const CookieBanner: React.FC<CookieBannerProps> = ({
+  isOpen,
+  onClose,
+  onNavigateToCookies
+}) => {
+  const [showPreferences, setShowPreferences] = useState(false);
+  const [analyticsConsent, setAnalyticsConsent] = useState(false);
+
+  useEffect(() => {
+    const saved = localStorage.getItem('snapify_cookie_consent');
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setAnalyticsConsent(parsed.analytics === true);
+      } catch (e) {
+        // ignore
+      }
+    }
+  }, []);
+
+  const handleRefuseAll = () => {
+    localStorage.setItem(
+      'snapify_cookie_consent',
+      JSON.stringify({ necessary: true, analytics: false, timestamp: Date.now() })
+    );
+    setShowPreferences(false);
+    onClose();
+  };
+
+  const handleAcceptAll = () => {
+    localStorage.setItem(
+      'snapify_cookie_consent',
+      JSON.stringify({ necessary: true, analytics: true, timestamp: Date.now() })
+    );
+    setAnalyticsConsent(true);
+    setShowPreferences(false);
+    onClose();
+  };
+
+  const handleSaveCustom = () => {
+    localStorage.setItem(
+      'snapify_cookie_consent',
+      JSON.stringify({ necessary: true, analytics: analyticsConsent, timestamp: Date.now() })
+    );
+    setShowPreferences(false);
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <aside aria-label="Gestion des cookies" className="fixed bottom-4 left-4 right-4 sm:right-auto sm:max-w-md z-50 animate-in fade-in slide-in-from-bottom-4 duration-300">
+      <div className="bg-white rounded-2xl p-5 shadow-2xl border border-px-border text-px-navy">
+        {/* Top header row */}
+        <div className="flex items-start justify-between gap-3 mb-2">
+          <h3 className="text-sm font-semibold text-px-navy tracking-tight">
+            Lorem ipsum dolor sit amet.
+          </h3>
+          <button
+            onClick={handleRefuseAll}
+            className="text-[11px] text-slate-500 hover:text-px-navy underline underline-offset-2 shrink-0"
+          >
+            Continuer sans accepter
+          </button>
+        </div>
+
+        <p className="text-xs text-slate-600 leading-relaxed mb-4">
+          Avec votre accord, nous utilisons Google Analytics pour comprendre comment ce site est consulté et l'améliorer. Aucun cookie de mesure n'est déposé sans votre choix.{' '}
+          <button
+            type="button"
+            onClick={onNavigateToCookies}
+            className="text-px-primary-dark underline font-medium hover:text-px-navy"
+          >
+            En savoir plus
+          </button>
+        </p>
+
+        {showPreferences ? (
+          <div className="space-y-3 pt-2 border-t border-slate-100 mb-4">
+            {/* Category 1 */}
+            <div className="flex items-center justify-between gap-2 p-2.5 rounded-lg bg-slate-50 text-xs">
+              <div>
+                <div className="font-semibold text-slate-800">Cookies nécessaires</div>
+                <div className="text-[11px] text-slate-500 mt-0.5">
+                  Indispensables au fonctionnement du site et à la mémorisation de vos choix.
+                </div>
+              </div>
+              <span className="text-[10px] font-semibold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded border border-emerald-200">
+                Toujours actifs
+              </span>
+            </div>
+
+            {/* Category 2 */}
+            <div className="flex items-center justify-between gap-2 p-2.5 rounded-lg bg-slate-50 text-xs">
+              <div>
+                <div className="font-semibold text-slate-800">Mesure d'audience (GA4)</div>
+                <div className="text-[11px] text-slate-500 mt-0.5">
+                  Google Analytics nous indique les pages consultées de façon globale.
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={() => setAnalyticsConsent(!analyticsConsent)}
+                className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors duration-200 ease-in-out border-2 border-transparent ${
+                  analyticsConsent ? 'bg-px-primary' : 'bg-slate-300'
+                }`}
+              >
+                <span
+                  className={`pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out ${
+                    analyticsConsent ? 'translate-x-4' : 'translate-x-0'
+                  }`}
+                />
+              </button>
+            </div>
+
+            <button
+              onClick={handleSaveCustom}
+              className="w-full py-2 px-3 text-xs font-semibold bg-px-navy text-white rounded-lg hover:bg-slate-800 transition-colors"
+            >
+              Enregistrer mes choix
+            </button>
+          </div>
+        ) : (
+          <div className="grid grid-cols-3 gap-2">
+            <button
+              type="button"
+              onClick={handleRefuseAll}
+              className="py-2 px-2 text-xs font-medium text-slate-700 bg-slate-100 hover:bg-slate-200 rounded-lg text-center transition-colors"
+            >
+              Tout refuser
+            </button>
+            <button
+              type="button"
+              onClick={() => setShowPreferences(true)}
+              className="py-2 px-2 text-xs font-medium text-slate-700 bg-slate-100 hover:bg-slate-200 rounded-lg text-center transition-colors"
+            >
+              Personnaliser
+            </button>
+            <button
+              type="button"
+              onClick={handleAcceptAll}
+              className="py-2 px-2 text-xs font-semibold text-slate-900 bg-slate-100 hover:bg-slate-200 rounded-lg text-center transition-colors border border-slate-300/80"
+            >
+              Tout accepter
+            </button>
+          </div>
+        )}
+      </div>
+    </aside>
+  );
+};

package/template/src/components/MaintenanceGate.tsx

@@ -0,0 +1,66 @@
+/**
+ * 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, { useEffect, useState } from 'react';
+import { Wrench } from 'lucide-react';
+
+interface MaintenanceNotice {
+  title: string;
+  message: string;
+  logo?: string;
+  siteName?: string;
+}
+
+/** État annoncé par le serveur dans le HTML (voir `injectMaintenance`). */
+function initialNotice(): MaintenanceNotice | null {
+  try {
+    const raw = document.getElementById('snapify-maintenance')?.textContent;
+    return raw ? (JSON.parse(raw) as MaintenanceNotice) : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Le serveur tranche au chargement ; l'état est revérifié à chaque navigation et au retour
+ * sur l'onglet, pour qu'un visiteur déjà sur le site bascule dès l'activation.
+ */
+export function MaintenanceGate({ path, children }: { path: string; children: React.ReactNode }) {
+  const [notice, setNotice] = useState<MaintenanceNotice | null>(initialNotice);
+
+  useEffect(() => {
+    let alive = true;
+    const check = () =>
+      fetch('/api/public/maintenance-status', { cache: 'no-store', credentials: 'same-origin' })
+        .then((r) => (r.ok ? r.json() : null))
+        .then((s: ({ enabled: boolean } & MaintenanceNotice) | null) => {
+          if (alive && s) setNotice(s.enabled ? s : null);
+        })
+        .catch(() => undefined);
+    check();
+    const onVisible = () => document.visibilityState === 'visible' && check();
+    document.addEventListener('visibilitychange', onVisible);
+    return () => {
+      alive = false;
+      document.removeEventListener('visibilitychange', onVisible);
+    };
+  }, [path]);
+
+  if (!notice) return <>{children}</>;
+  return (
+    <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-px-navy px-6 text-center text-white">
+      <div className="absolute -right-40 -top-40 h-[520px] w-[520px] rounded-full bg-px-primary/15 blur-3xl" />
+      <div className="relative max-w-xl">
+        {notice.logo ? <img src={notice.logo} alt={notice.siteName || ''} className="mx-auto mb-10 h-10 object-contain" /> : null}
+        <span className="mx-auto mb-6 flex h-14 w-14 items-center justify-center rounded-2xl bg-white/5 ring-1 ring-white/10">
+          <Wrench className="h-6 w-6 text-px-primary" />
+        </span>
+        <h1 className="text-3xl font-semibold tracking-tight md:text-4xl">{notice.title || 'Site en maintenance'}</h1>
+        {notice.message ? <p className="mt-4 text-lg leading-relaxed text-slate-300">{notice.message}</p> : null}
+      </div>
+    </div>
+  );
+}

package/template/src/components/SiteAnalytics.tsx

@@ -0,0 +1,64 @@
+/**
+ * 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, useRef } from 'react';
+
+const SESSION_KEY = 'snapify_analytics_session';
+
+function getSessionId(): string {
+  let id = sessionStorage.getItem(SESSION_KEY);
+  if (!id) {
+    id = crypto.randomUUID();
+    sessionStorage.setItem(SESSION_KEY, id);
+  }
+  return id;
+}
+
+function detectDevice(): 'mobile' | 'tablet' | 'desktop' | 'unknown' {
+  const w = window.innerWidth;
+  if (w < 768) return 'mobile';
+  if (w < 1024) return 'tablet';
+  if (w >= 1024) return 'desktop';
+  return 'unknown';
+}
+
+export function SiteAnalytics({ path }: { path: string }) {
+  const startRef = useRef(Date.now());
+  const sentRef = useRef(false);
+
+  useEffect(() => {
+    startRef.current = Date.now();
+    sentRef.current = false;
+
+    const payload = {
+      sessionId: getSessionId(),
+      path,
+      referrer: document.referrer || undefined,
+      device: detectDevice(),
+    };
+
+    fetch('/api/public/analytics/event', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ ...payload, kind: 'view' }),
+      keepalive: true,
+    }).catch(() => {});
+
+    return () => {
+      if (sentRef.current) return;
+      sentRef.current = true;
+      const durationSec = Math.round((Date.now() - startRef.current) / 1000);
+      fetch('/api/public/analytics/event', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ...payload, kind: 'leave', durationSec }),
+        keepalive: true,
+      }).catch(() => {});
+    };
+  }, [path]);
+
+  return null;
+}

package/template/src/components/SnapifyLogo.tsx

@@ -0,0 +1,44 @@
+/**
+ * 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 from 'react';
+
+interface SnapifyMarkProps {
+  className?: string;
+  /** Couleur de l’étincelle et des pastilles de la fenêtre. */
+  accent?: string;
+  /** Couleur du cadre de la fenêtre. */
+  frame?: string;
+}
+
+/** Pictogramme seul : une fenêtre de navigateur dans laquelle une étincelle génère le site. */
+export const SnapifyMark: React.FC<SnapifyMarkProps> = ({
+  className = 'w-6 h-6',
+  accent = 'var(--px-primary)',
+  frame = '#FFFFFF',
+}) => (
+  <svg viewBox="0 0 40 40" className={className} aria-hidden="true">
+    <rect x="7" y="9" width="26" height="22" rx="4" fill="none" stroke={frame} strokeWidth="2.4" />
+    <path d="M7 15.5 H33" stroke={frame} strokeWidth="2.4" />
+    <circle cx="11" cy="12.3" r="1.1" fill={accent} />
+    <circle cx="14.4" cy="12.3" r="1.1" fill={accent} />
+    <path d="M20 18.2 L21.6 22 L25.4 23.6 L21.6 25.2 L20 29 L18.4 25.2 L14.6 23.6 L18.4 22 Z" fill={accent} />
+  </svg>
+);
+
+interface SnapifyLogoProps {
+  className?: string;
+}
+
+/** Pictogramme dans son badge carré sombre, utilisé en en-tête et pied de page du site public. */
+export const SnapifyLogo: React.FC<SnapifyLogoProps> = ({ className = 'w-10 h-10' }) => (
+  <div
+    className={`flex items-center justify-center rounded-xl bg-px-navy border border-slate-700/60 shadow-sm ${className}`}
+    title="Snapify — Générateur de sites web"
+  >
+    <SnapifyMark className="w-[70%] h-[70%]" />
+  </div>
+);