create-snapify-app 0.0.0-stage → 1.1.0

package/template/src/components/cms/BlockRenderer.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 from 'react';
+import type { BlockKind, BlockSpacing } from '../../../server/cms/blocks';
+import { resolveStyle } from '../../../server/cms/blocks';
+import { ModuleWidgetBlock } from '../../modules/ModuleHost';
+import { BLOCK_CATALOG, isBlockKind, withDefaults } from '../../../server/cms/blockCatalog';
+import type { CmsBlock } from '../../../server/cms/types';
+import type { BlockProps, BlockRenderers } from '../../../sdk/theme';
+import { IS_PREVIEW, notifyEditor } from '../../preview';
+import { useSiteConfig } from '../../context/SiteConfigContext';
+import { useActiveTheme } from '../../themes/ThemeHost';
+
+class BlockBoundary extends React.Component<{ label: string; children: React.ReactNode }, { failed: boolean }> {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error: unknown) {
+    console.error(`[cms] bloc « ${this.props.label} » :`, error);
+  }
+  render() {
+    if (!this.state.failed) return this.props.children;
+    return IS_PREVIEW ? <div className="mx-auto my-6 max-w-3xl rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700">Le bloc « {this.props.label} » ne peut pas s'afficher : vérifiez ses champs.</div> : null;
+  }
+}
+
+const SPACING: Record<BlockSpacing, string> = { none: '0', sm: '2rem', md: '3rem', lg: '4.5rem', xl: '6.5rem' };
+
+/** Bloc « Module » : rendu par le module, l'hôte n'applique que les espacements et la visibilité. */
+function ModuleBlock({ block }: { block: CmsBlock }) {
+  const cfg = useSiteConfig();
+  const d = withDefaults('module', block.data);
+  const style = resolveStyle(block.style, BLOCK_CATALOG.module.style);
+  if (style.hideOnMobile && style.hideOnDesktop && !IS_PREVIEW) return null;
+  if (!d.module || !d.widget) {
+    return IS_PREVIEW ? <div className="mx-auto my-6 max-w-3xl rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-600">Choisissez le contenu du module dans le panneau de droite.</div> : null;
+  }
+  const active = (cfg?.modules ?? []).some((m) => m.id === d.module && m.widgets?.includes(d.widget));
+  if (!active) {
+    // Module désactivé : ne pas laisser de section vide (ex. widgets boutique après off e-commerce)
+    return IS_PREVIEW ? (
+      <div className="mx-auto my-6 max-w-3xl rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
+        Widget « {d.widget} » du module <code>{d.module}</code> inactif — masqué sur le site public.
+      </div>
+    ) : null;
+  }
+  const cls = [style.hideOnMobile && !IS_PREVIEW ? 'max-md:hidden' : '', style.hideOnDesktop && !IS_PREVIEW ? 'md:hidden' : ''].filter(Boolean).join(' ');
+  return (
+    <section id={style.anchor || undefined} className={cls || undefined} style={{ paddingTop: SPACING[style.paddingTop], paddingBottom: SPACING[style.paddingBottom] }}>
+      <ModuleWidgetBlock moduleId={d.module} widget={d.widget} options={d.options ?? {}} />
+    </section>
+  );
+}
+
+function ColumnsBlock({ block }: { block: CmsBlock }) {
+  const d = withDefaults('columns', block.data);
+  const style = resolveStyle(block.style, BLOCK_CATALOG.columns.style);
+  if (style.hideOnMobile && style.hideOnDesktop && !IS_PREVIEW) return null;
+  const n = Math.min(4, Math.max(2, Number(d.columns) || 2));
+  const gap = d.gap === 'sm' ? '1.5rem' : d.gap === 'lg' ? '3rem' : '2rem';
+  const cells = (d.cells || []).slice(0, n);
+  while (cells.length < n) cells.push({ title: '', body: '' });
+  const cls = [style.hideOnMobile && !IS_PREVIEW ? 'max-md:hidden' : '', style.hideOnDesktop && !IS_PREVIEW ? 'md:hidden' : ''].filter(Boolean).join(' ');
+  return (
+    <section
+      id={style.anchor || undefined}
+      className={cls || undefined}
+      style={{ paddingTop: SPACING[style.paddingTop], paddingBottom: SPACING[style.paddingBottom] }}
+    >
+      <div
+        className="mx-auto grid max-w-6xl px-4 sm:px-6"
+        style={{ gap, gridTemplateColumns: `repeat(${n}, minmax(0, 1fr))` }}
+      >
+        {cells.map((c, i) => (
+          <div key={i} className="min-w-0">
+            {c.title ? <h3 className="mb-3 text-lg font-semibold text-[var(--px-text,#0B1528)]">{c.title}</h3> : null}
+            {c.body ? <div className="cms-prose text-sm leading-relaxed text-[var(--px-muted,#64748B)]" dangerouslySetInnerHTML={{ __html: c.body }} /> : null}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function Block({ block, renderers }: { block: CmsBlock; renderers: Partial<BlockRenderers> }) {
+  if (!isBlockKind(block.type)) return null;
+  if (block.type === 'module') {
+    return (
+      <BlockBoundary label="Module">
+        <ModuleBlock block={block} />
+      </BlockBoundary>
+    );
+  }
+  if (block.type === 'columns') {
+    return (
+      <BlockBoundary label="Colonnes">
+        <ColumnsBlock block={block} />
+      </BlockBoundary>
+    );
+  }
+  const meta = BLOCK_CATALOG[block.type];
+  const Comp = renderers[block.type] as React.ComponentType<BlockProps<BlockKind>> | undefined;
+  if (!Comp) {
+    return IS_PREVIEW ? <div className="mx-auto my-6 max-w-3xl rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">Le thème actif n'affiche pas les blocs « {meta.label} ».</div> : null;
+  }
+  let style = resolveStyle(block.style, meta.style);
+  if (style.hideOnMobile && style.hideOnDesktop) {
+    // Bloc masqué partout : absent du site, mais visible (atténué) dans l'aperçu pour rester sélectionnable.
+    if (!IS_PREVIEW) return null;
+    style = { ...style, hideOnMobile: false, hideOnDesktop: false };
+  }
+  return (
+    <BlockBoundary label={meta.label}>
+      <Comp d={withDefaults(block.type, block.data)} style={style} />
+    </BlockBoundary>
+  );
+}
+
+/** Rendu des blocs par le thème actif ; l'hôte garde la sélection de l'aperçu et l'isolation des erreurs. */
+export function BlockRenderer({ blocks, selectedId }: { blocks: CmsBlock[]; selectedId?: string | null }) {
+  const { theme, key } = useActiveTheme();
+  return (
+    <div className="cms-blocks" key={key}>
+        {blocks.map((block) =>
+          IS_PREVIEW ? (
+            <div
+              key={block.id}
+              id={`px-block-${block.id}`}
+              className="px-preview-block"
+              data-selected={selectedId === block.id}
+              data-hidden={!!(block.style?.hideOnMobile && block.style?.hideOnDesktop)}
+              onClickCapture={(e) => {
+                e.preventDefault();
+                notifyEditor({ type: 'snapify:block-click', id: block.id });
+              }}
+            >
+              <span className="px-preview-label">
+                {isBlockKind(block.type) ? BLOCK_CATALOG[block.type].label : block.type}
+                {block.style?.hideOnMobile && block.style?.hideOnDesktop ? ' · masqué' : ''}
+              </span>
+              <Block block={block} renderers={theme.blocks} />
+            </div>
+          ) : (
+            <Block key={block.id} block={block} renderers={theme.blocks} />
+          )
+        )}
+    </div>
+  );
+}

package/template/src/components/cms/WidgetArea.tsx

@@ -0,0 +1,193 @@
+/**
+ * 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, useMemo, useState } from 'react';
+import type { MenuItemDto, WidgetInstance } from '../../../sdk/content';
+import { useSiteConfig } from '../../context/SiteConfigContext';
+import { ModuleWidgetBlock } from '../../modules/ModuleHost';
+
+function stripScripts(html: string): string {
+  return html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+}
+
+function MenuLinks({ items, navigate }: { items: MenuItemDto[]; navigate: (path: string) => void }) {
+  return (
+    <ul className="space-y-2 text-sm">
+      {items.map((it) => (
+        <li key={it.id}>
+          <a
+            href={it.path}
+            className={it.highlight ? 'font-semibold text-[var(--px-primary,#00C6BA)]' : 'text-[var(--px-muted,#64748B)] hover:text-[var(--px-text,#0B1528)]'}
+            target={it.openInNewTab ? '_blank' : undefined}
+            rel={it.openInNewTab ? 'noopener noreferrer' : undefined}
+            onClick={(e) => {
+              if (!it.openInNewTab && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey) {
+                e.preventDefault();
+                navigate(it.path);
+              }
+            }}
+          >
+            {it.label}
+          </a>
+          {it.children?.length ? (
+            <ul className="mt-2 space-y-1 border-l border-[var(--px-border,#E3E8EE)] pl-3">
+              {it.children.map((c) => (
+                <li key={c.id}>
+                  <a
+                    href={c.path}
+                    className="text-[var(--px-muted,#64748B)] hover:text-[var(--px-text,#0B1528)]"
+                    onClick={(e) => {
+                      if (!c.openInNewTab && !e.metaKey && !e.ctrlKey) {
+                        e.preventDefault();
+                        navigate(c.path);
+                      }
+                    }}
+                  >
+                    {c.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+type PostMeta = { slug: string; title: string; excerpt?: string; publishedAt?: string };
+
+function RecentPostsWidget({ widget, navigate }: { widget: WidgetInstance; navigate: (path: string) => void }) {
+  const limit = Math.max(1, Math.min(Number(widget.data.limit) || 5, 20));
+  const [posts, setPosts] = useState<PostMeta[]>([]);
+  useEffect(() => {
+    let alive = true;
+    void fetch('/api/public/posts')
+      .then((r) => (r.ok ? r.json() : []))
+      .then((list: PostMeta[]) => alive && setPosts(Array.isArray(list) ? list.slice(0, limit) : []))
+      .catch(() => alive && setPosts([]));
+    return () => {
+      alive = false;
+    };
+  }, [limit]);
+  if (!posts.length) return null;
+  return (
+    <ul className="space-y-3 text-sm">
+      {posts.map((p) => (
+        <li key={p.slug}>
+          <a
+            href={`/blog/${p.slug}/`}
+            className="font-medium text-[var(--px-text,#0B1528)] hover:text-[var(--px-primary,#00C6BA)]"
+            onClick={(e) => {
+              if (!e.metaKey && !e.ctrlKey) {
+                e.preventDefault();
+                navigate(`/blog/${p.slug}/`);
+              }
+            }}
+          >
+            {p.title}
+          </a>
+          {p.excerpt ? <p className="mt-1 text-[var(--px-muted,#64748B)] line-clamp-2">{p.excerpt}</p> : null}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function SearchWidget({ navigate }: { navigate: (path: string) => void }) {
+  const [q, setQ] = useState('');
+  return (
+    <form
+      className="flex gap-2"
+      onSubmit={(e) => {
+        e.preventDefault();
+        const term = q.trim();
+        if (term) navigate(`/blog/?s=${encodeURIComponent(term)}`);
+        else navigate('/blog/');
+      }}
+    >
+      <input
+        type="search"
+        name="s"
+        value={q}
+        onChange={(e) => setQ(e.target.value)}
+        placeholder="Rechercher…"
+        className="min-w-0 flex-1 rounded-lg border border-[var(--px-border,#E3E8EE)] bg-white px-3 py-2 text-sm"
+      />
+      <button type="submit" className="rounded-lg bg-[var(--px-primary,#00C6BA)] px-3 py-2 text-sm font-medium text-white">
+        OK
+      </button>
+    </form>
+  );
+}
+
+function WidgetBody({ widget, navigate }: { widget: WidgetInstance; navigate: (path: string) => void }) {
+  const cfg = useSiteConfig();
+  switch (widget.kind) {
+    case 'text': {
+      const body = String(widget.data.body ?? widget.data.text ?? '');
+      const paragraphs = body.split(/\n{2,}/).filter(Boolean);
+      return (
+        <div className="prose prose-sm max-w-none text-[var(--px-muted,#64748B)]">
+          {paragraphs.length
+            ? paragraphs.map((p, i) => <p key={i}>{p}</p>)
+            : body
+              ? <p>{body}</p>
+              : null}
+        </div>
+      );
+    }
+    case 'html': {
+      const html = stripScripts(String(widget.data.html ?? ''));
+      if (!html.trim()) return null;
+      return <div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: html }} />;
+    }
+    case 'menu': {
+      const menuId = String(widget.data.menuId ?? '');
+      const menu = cfg?.menus.find((m) => m.id === menuId);
+      if (!menu?.items.length) return null;
+      return <MenuLinks items={menu.items} navigate={navigate} />;
+    }
+    case 'recent_posts':
+      return <RecentPostsWidget widget={widget} navigate={navigate} />;
+    case 'search':
+      return <SearchWidget navigate={navigate} />;
+    case 'module': {
+      const moduleId = String(widget.data.module ?? '');
+      const widgetName = String(widget.data.widget ?? '');
+      const options = (widget.data.options && typeof widget.data.options === 'object' ? widget.data.options : {}) as Record<string, unknown>;
+      if (!moduleId || !widgetName) return null;
+      return <ModuleWidgetBlock moduleId={moduleId} widget={widgetName} options={options} />;
+    }
+    default:
+      return null;
+  }
+}
+
+/** Affiche une zone de widgets déclarée dans la configuration publique du site. */
+export function WidgetAreaHost({
+  areaId,
+  navigate,
+  className,
+}: {
+  areaId: string;
+  navigate: (path: string) => void;
+  className?: string;
+}) {
+  const cfg = useSiteConfig();
+  const area = useMemo(() => cfg?.widgetAreas?.find((a) => a.id === areaId), [cfg?.widgetAreas, areaId]);
+  if (!area?.widgets.length) return null;
+  return (
+    <div className={className} data-widget-area={areaId}>
+      {area.widgets.map((widget: WidgetInstance) => (
+        <div key={widget.id} className="widget mb-8 last:mb-0" data-widget={widget.id} data-widget-kind={widget.kind}>
+          {widget.title ? <h3 className="mb-3 text-sm font-semibold uppercase tracking-wide text-[var(--px-text,#0B1528)]">{widget.title}</h3> : null}
+          <WidgetBody widget={widget} navigate={navigate} />
+        </div>
+      ))}
+    </div>
+  );
+}

package/template/src/context/SiteConfigContext.tsx

@@ -0,0 +1,130 @@
+/**
+ * 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, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { SITE_INFO } from '../data/siteData';
+import { IS_PREVIEW, usePreviewState } from '../preview';
+import type { BrandingPayload, MenuItemDto, SiteConfigPayload, SiteInfo, TokenValues } from '../../sdk/content';
+import type { PublicModuleDescriptor, PublicThemeDescriptor } from '../../server/modules/types';
+
+export type { BrandingPayload, MenuItemDto, PublicModuleDescriptor, PublicThemeDescriptor, SiteConfigPayload, SiteInfo };
+
+/** Correspondance couleurs du backoffice → variables CSS du thème (src/index.css). */
+const COLOR_VARS: Record<string, string> = {
+  primary: '--px-primary',
+  primaryHover: '--px-primary-dark',
+  accent: '--px-accent',
+  navy: '--px-navy',
+  background: '--px-surface',
+  text: '--px-text',
+  muted: '--px-muted',
+  border: '--px-border',
+};
+
+const PRELOADED_FONTS = new Set(['Poppins']);
+
+function ensureFont(family: string) {
+  if (!family || PRELOADED_FONTS.has(family)) return;
+  const id = `px-font-${family.replace(/\s+/g, '-').toLowerCase()}`;
+  if (document.getElementById(id)) return;
+  const link = document.createElement('link');
+  link.id = id;
+  link.rel = 'stylesheet';
+  link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family).replace(/%20/g, '+')}:wght@300;400;500;600;700&display=swap`;
+  document.head.appendChild(link);
+}
+
+export function applyBranding(branding: BrandingPayload | undefined) {
+  if (!branding) return;
+  const root = document.documentElement;
+  for (const [key, cssVar] of Object.entries(COLOR_VARS)) {
+    const value = branding.colors?.[key];
+    if (value && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(value)) root.style.setProperty(cssVar, value);
+  }
+  if (branding.fonts) {
+    ensureFont(branding.fonts.body);
+    ensureFont(branding.fonts.heading);
+    root.style.setProperty('--px-font-body', `'${branding.fonts.body}'`);
+    root.style.setProperty('--px-font-heading', `'${branding.fonts.heading}'`);
+  }
+  if (branding.faviconUrl) {
+    let link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+    if (!link) {
+      link = document.createElement('link');
+      link.rel = 'icon';
+      document.head.appendChild(link);
+    }
+    link.href = branding.faviconUrl;
+  }
+}
+
+const SiteConfigContext = createContext<SiteConfigPayload | null>(null);
+const SiteConfigLoadedContext = createContext(false);
+
+export function SiteConfigProvider({ children }: { children: React.ReactNode }) {
+  const [config, setConfig] = useState<SiteConfigPayload | null>(null);
+  const [loaded, setLoaded] = useState(false);
+  const preview = usePreviewState();
+
+  useEffect(() => {
+    fetch('/api/public/site-config')
+      .then((r) => (r.ok ? r.json() : null))
+      .then((cfg: SiteConfigPayload | null) => setConfig(cfg))
+      .catch(() => setConfig(null))
+      .finally(() => setLoaded(true));
+  }, []);
+
+  const effective = useMemo(() => {
+    if (!config || !IS_PREVIEW || !preview?.site) return config;
+    return { ...config, ...preview.site } as SiteConfigPayload;
+  }, [config, preview?.site]);
+
+  useEffect(() => {
+    applyBranding(effective?.branding);
+  }, [effective?.branding]);
+
+  return (
+    <SiteConfigLoadedContext.Provider value={loaded}>
+      <SiteConfigContext.Provider value={effective}>{children}</SiteConfigContext.Provider>
+    </SiteConfigLoadedContext.Provider>
+  );
+}
+
+export function useSiteConfig() {
+  return useContext(SiteConfigContext);
+}
+
+/** Vrai une fois la configuration reçue… ou son chargement échoué. */
+export function useSiteConfigLoaded() {
+  return useContext(SiteConfigLoadedContext);
+}
+
+/** Infos affichage — CMS prioritaire, fallback siteData */
+export function useSiteInfo(): SiteInfo {
+  const cfg = useSiteConfig();
+  if (!cfg) return SITE_INFO;
+  return {
+    ...SITE_INFO,
+    name: cfg.branding.siteName || SITE_INFO.name,
+    legalName: cfg.general.legalName || SITE_INFO.legalName,
+    baseline: cfg.general.baseline || SITE_INFO.baseline,
+    slogan: cfg.general.slogan || SITE_INFO.slogan,
+    phone: cfg.general.phone || SITE_INFO.phone,
+    phoneClean: cfg.general.phoneClean || SITE_INFO.phoneClean,
+    contactEmail: cfg.general.contactEmail || SITE_INFO.contactEmail,
+    slaHours: cfg.general.slaHours || SITE_INFO.slaHours,
+    address: cfg.general.address || SITE_INFO.address,
+  };
+}
+
+/** Valeurs des variables {{…}} utilisables dans les textes des blocs. */
+export function useTokens(): TokenValues {
+  const info = useSiteInfo();
+  return useMemo(
+    () => ({ phone: info.phone, phoneClean: info.phoneClean, email: info.contactEmail, sla: info.slaHours, company: info.legalName }),
+    [info.phone, info.phoneClean, info.contactEmail, info.slaHours, info.legalName]
+  );
+}

package/template/src/demoBase.ts

@@ -0,0 +1,23 @@
+/**
+ * Snapify — préfixe public de la démo CMS (/demo)
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ */
+export const DEMO_BASE = '/demo';
+
+export function isDemoPath(pathname: string): boolean {
+  return pathname === DEMO_BASE || pathname === `${DEMO_BASE}/` || pathname.startsWith(`${DEMO_BASE}/`);
+}
+
+/** Chemin CMS interne (sans /demo). */
+export function toCmsPath(pathname: string): string {
+  if (!isDemoPath(pathname)) return pathname.endsWith('/') ? pathname : `${pathname}/`;
+  const rest = pathname.slice(DEMO_BASE.length) || '/';
+  return rest.endsWith('/') ? rest : `${rest}/`;
+}
+
+/** Préfixe une route CMS pour l’URL navigateur. */
+export function toDemoUrl(cmsPath: string): string {
+  const clean = cmsPath.startsWith('/') ? cmsPath : `/${cmsPath}`;
+  if (clean === '/') return `${DEMO_BASE}/`;
+  return `${DEMO_BASE}${clean}`;
+}

package/template/src/index.css

@@ -0,0 +1,90 @@
+/**
+ * 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 "tailwindcss";
+/* Les modules et les thèmes embarquent leur propre feuille de style. */
+@source not "../modules";
+@source not "../themes";
+@source not "../sdk";
+
+/*
+ * Jetons de marque : valeurs par défaut Snapify, remplacées à l'exécution par l'identité
+ * visuelle du backoffice (SiteConfigContext). Les nuances dérivées suivent automatiquement.
+ */
+:root {
+  --px-primary: #00C6BA;
+  --px-primary-dark: #00A89D;
+  --px-accent: #0070F3;
+  --px-navy: #0B1528;
+  --px-surface: #F5F7FA;
+  --px-text: #0B1528;
+  --px-muted: #64748B;
+  --px-border: #E3E8EE;
+  --px-font-body: 'Poppins';
+  --px-font-heading: 'Poppins';
+
+  --px-primary-light: color-mix(in oklab, var(--px-primary) 88%, white);
+  --px-accent-mid: color-mix(in oklab, var(--px-primary) 40%, var(--px-accent));
+  --px-accent-light: color-mix(in oklab, var(--px-accent) 85%, white);
+  --px-navy-2: color-mix(in oklab, var(--px-navy) 88%, white);
+  --px-border-soft: color-mix(in oklab, var(--px-border) 55%, white);
+  --px-surface-2: color-mix(in oklab, var(--px-surface) 70%, color-mix(in oklab, var(--px-primary) 12%, white));
+  --px-gradient: linear-gradient(135deg, var(--px-primary) 0%, var(--px-accent) 100%);
+}
+
+@theme inline {
+  --color-px-primary: var(--px-primary);
+  --color-px-primary-dark: var(--px-primary-dark);
+  --color-px-primary-light: var(--px-primary-light);
+  --color-px-accent: var(--px-accent);
+  --color-px-accent-mid: var(--px-accent-mid);
+  --color-px-accent-light: var(--px-accent-light);
+  --color-px-navy: var(--px-navy);
+  --color-px-navy-2: var(--px-navy-2);
+  --color-px-surface: var(--px-surface);
+  --color-px-surface-2: var(--px-surface-2);
+  --color-px-border: var(--px-border);
+  --color-px-border-soft: var(--px-border-soft);
+  --color-px-text: var(--px-text);
+  --color-px-muted: var(--px-muted);
+  --font-sans: var(--px-font-body), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-heading: var(--px-font-heading), var(--px-font-body), system-ui, sans-serif;
+}
+
+@layer base {
+  html, body {
+    font-family: var(--font-sans);
+    color: var(--px-text);
+    background-color: var(--px-surface);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  body { margin: 0; padding: 0; }
+
+  h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
+  h1 { font-weight: 600; }
+  h2 { font-weight: 500; }
+  h3, button { font-weight: 600; }
+  p, span, li, a { font-weight: 400; }
+  h1 span, h2 span, h3 span { font-weight: inherit; }
+}
+
+/* Aperçu du backoffice : bloc sélectionné / survolé */
+.px-preview-block { position: relative; cursor: pointer; }
+.px-preview-block::after {
+  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 40;
+  outline: 2px solid transparent; outline-offset: -2px; transition: outline-color 0.15s;
+}
+.px-preview-block:hover::after { outline-color: color-mix(in srgb, var(--px-accent) 55%, transparent); }
+.px-preview-block[data-selected='true']::after { outline: 3px solid var(--px-accent); }
+.px-preview-label {
+  position: absolute; top: 8px; left: 8px; z-index: 41; pointer-events: none;
+  background: var(--px-accent); color: #fff; font-size: 11px; font-weight: 600;
+  padding: 3px 8px; border-radius: 6px; opacity: 0; transition: opacity 0.15s;
+}
+.px-preview-block[data-hidden='true'] > :not(.px-preview-label) { opacity: 0.35; filter: grayscale(0.6); }
+.px-preview-block[data-hidden='true'] .px-preview-label { opacity: 1; background: #d97706; }
+.px-preview-block:hover .px-preview-label, .px-preview-block[data-selected='true'] .px-preview-label { opacity: 1; }

package/template/src/main.tsx

@@ -0,0 +1,16 @@
+/**
+ * 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 { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+import { SiteConfigProvider } from './context/SiteConfigContext';
+
+createRoot(document.getElementById('root')!).render(
+  <SiteConfigProvider>
+    <App />
+  </SiteConfigProvider>
+);