@fraza/start 0.0.0-stage → 0.3.4

package/templates/components/fraza/templates/README.md

@@ -0,0 +1,293 @@
+# Templates de rendu public : `components/fraza/templates/`
+
+Ce dossier contient les **templates** qui enveloppent le rendu public d'une
+page CMS ou d'un post (en-tête, pied de page, mise en page latérale, image de
+marque), **et** le composant `<Content>` (`content.js`) qui rend le contenu des
+blocs.
+
+`npx fraza-modules sync` trouve chaque template et l'enregistre dans le
+registre `@fraza/core/templates`.
+
+Convention : **un fichier = un template**. Les sous-dossiers ne sont pas
+parcourus.
+
+```
+components/fraza/templates/
+├── content.js          # composant <Content>, rendu des blocs (pas un template)
+├── default.js          # template de page : kind: 'page'
+├── rose.js             # template de page : kind: 'page'
+└── post-blogue.js      # template de post : kind: 'post', postType: 'blogue'
+```
+
+> **Fichiers ignorés** : `content.{js,jsx}` (composant de rendu, pas un
+> template), `README.md`, et tout fichier qui commence par `_` (code partagé,
+> par exemple `_styles.js`).
+
+## Les deux familles de blocs
+
+Un projet Fraza rend deux types de blocs sur la page publique :
+
+1. **Les blocs internes du core** : `paragraph`, `heading_1`…`heading_6`,
+   `bullet_item`, `numbered_item`, `checklist`, `quote`, `code`, `divider`,
+   `spacer`, `image`. Leur JSX et leur style sont dans **`content.js`**, dans
+   ce dossier. Ce fichier t'appartient entièrement.
+2. **Les blocs personnalisés du site**, déposés dans
+   `components/fraza/blocks/<id>/` avec leurs trois fichiers (`fields.js`,
+   `template.js`, `render.js`). Chacun rend lui-même son JSX dans son
+   `render.js`. `<Content>` les confie automatiquement à `CustomBlockRender`
+   du core : tu n'as **rien** à faire dans `content.js` pour eux.
+
+`content.js` est donc le seul fichier à modifier pour personnaliser le rendu
+des blocs **internes**. Les marks inline (gras, italique, lien, code,
+couleur, surlignage) sont sérialisées par `renderInline` du core. Leur format
+est contraint par l'éditeur : inutile de les réécrire.
+
+## Anatomie d'un template
+
+Chaque fichier exporte deux choses :
+
+```js
+// components/fraza/templates/rose.js
+import Content from './content.js';
+
+export const meta = {
+  id: 'rose',           // unique pour un même (kind, postType?), [a-z0-9-]
+  label: 'Rose',         // libellé affiché dans le Select de l'administration
+  kind: 'page',          // 'page' | 'post'
+  // postType: 'blogue', // requis si kind === 'post'
+};
+
+export default function RoseTemplate({ page, blocks, url, breadcrumb }) {
+  // - kind='page' → reçoit { page, blocks, url, breadcrumb }
+  // - kind='post' → reçoit { post, blocks, url, breadcrumb }
+  // `blocks`     : tableau de blocs JSON déjà enrichi (médias résolus).
+  // `url`        : URL canonique du contenu courant.
+  // `breadcrumb` : fil d'Ariane de la racine au contenu courant (pages et
+  //                posts) ; tableau d'objets { id, slug, title, url },
+  //                longueur ≥ 1. « Accueil » n'est pas inclus : à ajouter
+  //                dans le template.
+  return (
+    <main className="bg-pink-50 min-h-screen px-4 py-12">
+      {page?.title && <h1 className="text-5xl text-pink-700 font-bold">{page.title}</h1>}
+      <Content blocks={blocks} />
+    </main>
+  );
+}
+```
+
+Le template reçoit `blocks` en prop et le passe à `<Content blocks={blocks} />`.
+Il ne reçoit pas de `children`.
+
+## Personnaliser le style des blocs internes (`content.js`)
+
+`content.js` définit **un composant React par type de bloc**
+(`Paragraph`, `Heading1`…`Heading6`, `Quote`, `CodeBlock`, `Divider`,
+`ImageBlock`, `BulletList`, `NumberedList`, `Checklist`). Modifie librement
+chaque composant : c'est ta référence visuelle.
+
+Les composants fournis utilisent les jetons du thème (`text-fg`,
+`border-line`, `bg-surface-muted`…) : ils suivent `theme.js` et le mode
+sombre. Les exemples ci-dessous utilisent des couleurs Tailwind fixes pour
+montrer qu'un site peut aussi s'en écarter.
+
+**Exemple : paragraphes en rose dans tout le site**
+
+```js
+// content.js
+function Paragraph({ block }) {
+  return <p className="my-4 leading-7 text-pink-700">{renderInline(block.content)}</p>;
+}
+```
+
+**Exemple : citations encadrées avec une icône**
+
+```js
+function Quote({ block }) {
+  return (
+    <blockquote className="my-6 flex gap-3 rounded-xl bg-amber-50 p-4">
+      <span className="text-2xl">✦</span>
+      <div className="italic text-amber-900">{renderInline(block.content)}</div>
+    </blockquote>
+  );
+}
+```
+
+**Exemple : bloc de code avec un bouton de copie.** Importe ton propre
+`<CopyButton>` dans `content.js` et enveloppe le `<pre>`. La structure JSX
+t'appartient.
+
+### Fonctions du core utilisables dans `content.js`
+
+```js
+import {
+  renderInline,        // (InlineNode[]) => JSX : sérialise les marks inline
+  groupListItems,      // (Block[]) => Group[] : regroupe les listes consécutives
+  isCustomBlockType,   // (type) => boolean
+  isInternalHref,      // (href) => boolean : vrai pour `/foo` et `#anchor`
+  anchorProps,         // (block) => { id } | null : ancre du bloc, à étaler sur la racine
+  resolveImageBlock,   // (block) => { src, alt, caption } : image d'un bloc, liée à la médiathèque ou non
+  sanitizeUrl,         // (href) => string : l'adresse si son schéma est admis, sinon ''
+  CustomBlockRender,   // ({ block }) => JSX : délègue au render.js du bloc personnalisé
+} from '@fraza/core/blocks-registry/render';
+```
+
+### Taille du paragraphe
+
+Le bloc `paragraph` porte un champ `block.size` (`sm` / `md` / `lg`, `md` par
+défaut), choisi dans l'éditeur par le menu d'actions ▸ **Taille**. Le
+`Paragraph` fourni associe cette valeur à une taille Tailwind (`text-sm` /
+`text-base` / `text-lg`). Si tu réécris `Paragraph`, lis `block.size` pour
+respecter ce choix :
+
+```jsx
+const SIZE = { sm: 'text-sm leading-6', md: 'text-base leading-7', lg: 'text-lg leading-8' };
+function Paragraph({ block }) {
+  return <p {...anchorProps(block)} className={`my-4 ${SIZE[block.size] || SIZE.md} text-fg`}>{renderInline(block.content)}</p>;
+}
+```
+
+### Ancre de bloc
+
+Un bloc peut porter une **ancre** (`block.anchor`), définie dans l'éditeur par
+le menu d'actions ▸ **Ancre**. C'est un identifiant stable qui devient
+l'attribut `id` HTML du bloc, cible d'un lien interne `#slug`. Étale
+`anchorProps(block)` sur l'élément racine de **chaque** composant de bloc pour
+l'appliquer. Sans ancre, il ne fait rien :
+
+```jsx
+function Heading2({ block }) {
+  return <h2 {...anchorProps(block)} className="…">{renderInline(block.content)}</h2>;
+}
+```
+
+Pour une liste, l'ancre est portée par chaque élément : étale `anchorProps(it)`
+sur chaque `<li>`. Le `content.js` fourni le fait déjà partout.
+
+### Liens internes et externes
+
+`renderInline` détecte si une mark `link` pointe vers une URL **interne**
+(chemin qui commence par `/`, ou ancre `#section`). Il utilise alors `<Link>`
+de Next (préchargement et navigation côté client). Les URL absolues
+(`http(s)://`, `mailto:`, `tel:`, etc.), les URL sans protocole
+(`//cdn.example.com`) et les liens « ouvrir dans un nouvel onglet » donnent un
+`<a>` classique avec `rel="noopener noreferrer"`.
+
+Tu n'as **rien à faire** pour les liens dans le texte : tout passe par
+`renderInline`. Pour appliquer la même logique à tes propres liens (par
+exemple dans `ImageBlock` ou un bloc personnalisé), importe `isInternalHref`
+et `sanitizeUrl`. Le lien d'un bloc vient d'une saisie, d'un collage ou de
+l'API : `sanitizeUrl` ne garde que `http`, `https`, `mailto`, `tel` et les
+adresses relatives, et rend `''` pour le reste (`javascript:`, `data:`,
+`vbscript:`…). React ne neutralise que `javascript:`. Sans adresse admise, ne
+rends aucun lien, comme le font `ImageBlock` et la liste d'icônes fournis :
+
+```js
+import Link from 'next/link';
+import { isInternalHref, sanitizeUrl } from '@fraza/core/blocks-registry/render';
+
+function MyLink({ href: raw, newTab, children }) {
+  const href = sanitizeUrl(raw);
+  if (!href) return children;
+  if (!newTab && isInternalHref(href)) {
+    return <Link href={href}>{children}</Link>;
+  }
+  return <a href={href} target={newTab ? '_blank' : undefined} rel={newTab ? 'noopener noreferrer' : undefined}>{children}</a>;
+}
+```
+
+### Style ponctuel par zone (prop `overrides`)
+
+Un template peut afficher **plusieurs zones de contenu** dont une ou deux
+seulement doivent changer de style, par exemple une 2e zone en texte plus
+petit. Pas besoin d'un second `content.js` : `<Content>` accepte une prop
+`overrides` facultative. C'est un objet `{ clé → Composant }` qui remplace le
+composant par défaut **pour cette zone seulement**. Les autres `<Content>` ne
+changent pas.
+
+Clés acceptées :
+
+- **types de blocs** : `paragraph`, `heading_1`…`heading_6`, `quote`, `code`,
+  `divider`, `spacer`, `image`
+- **groupes de liste** : `bullet_item`, `numbered_item`, `checklist`
+
+Définis et exporte tes variantes dans `content.js`, puis passe-les depuis le
+template :
+
+```js
+// content.js : variante compacte du paragraphe et de la liste à puces
+export function ParagraphSm({ block }) {
+  return <p {...anchorProps(block)} className="my-4 leading-7 text-sm text-fg-secondary">{renderInline(block.content)}</p>;
+}
+export function BulletListSm({ items }) {
+  return (
+    <ul className="my-4 list-disc pl-6 space-y-1">
+      {items.map((it) => <li key={it.id} {...anchorProps(it)} className="text-sm leading-7">{renderInline(it.content)}</li>)}
+    </ul>
+  );
+}
+```
+
+```jsx
+// mon-template.js
+import Content, { ParagraphSm, BulletListSm } from './content.js';
+
+// 1re zone : style par défaut
+<Content blocks={content1} />
+// 2e zone : paragraphes et listes en version compacte
+<Content blocks={content2} overrides={{ paragraph: ParagraphSm, bullet_item: BulletListSm }} />
+```
+
+Sans `overrides`, le rendu ne change pas. Cette prop convient à un écart
+ponctuel. Pour deux rendus très différents, préfère deux fichiers de contenu
+(section suivante).
+
+### Plusieurs `<Content>` selon le contexte
+
+Un seul `content.js` n'est pas obligatoire. Si ton site veut un rendu sobre
+pour les pages produit et un rendu plus typographique pour le blogue, crée par
+exemple `_content-sobre.js` et `_content-article.js` (le préfixe `_` les
+exclut des templates), puis importe celui qui convient dans chaque template.
+
+## Choix du template à l'édition
+
+- **Pages** (`@fraza/module-pages`) : le formulaire d'édition propose un
+  `<Select>` Template parmi tous les templates de `kind: 'page'`. Le choix est
+  enregistré dans la colonne `template` de `fraza_pages_page`.
+- **Posts** (`@fraza/module-posts`) : le formulaire d'édition propose un
+  `<Select>` Template parmi les templates de `kind: 'post'` dont le
+  `postType` est celui du post courant. Le choix est enregistré dans
+  `data.template` du JSONB.
+
+## Rendu public
+
+Le projet expose une seule route attrape-tout, `app/(public)/[...slug]/page.js`,
+qui parcourt le registre `@fraza/core/public-content`. Chaque module CMS y
+enregistre son resolver : aucune route à écrire à la main.
+
+- `/<slug>` ou `/<parent>/<slug>` → page CMS
+- `/<postType>/<slug>` → post (par exemple `/blogue/mon-article`)
+
+Le module résout le contenu, choisit le template avec
+`getTemplate({ kind, id, postType })`, puis rend
+`<Template page|post={…} blocks={…} />`. Le template appelle ensuite
+`<Content blocks={blocks} />` pour rendre le contenu.
+
+## Synchronisation
+
+Lance `npx fraza-modules sync` après avoir ajouté ou supprimé un fichier de
+template. La commande régénère `app/.fraza/templates.server.js`, importé pour
+ses effets de bord à deux endroits :
+
+- par `app/layout.js`, pour que les templates passent par le compilateur RSC
+  et que leurs `next/link` / `next/image` soient référencés dans le React
+  Client Manifest ;
+- par `instrumentation.js`, pour les routes d'API de l'administration qui
+  listent les templates hors du graphe RSC.
+
+Le registre des templates est uniquement côté serveur : l'administration
+liste les templates par l'API REST des modules (`/za/api/...`), pas par un
+manifeste client. Les templates peuvent donc importer librement `next/link`,
+`next/image` ou tout autre composant client.
+
+Le `postinstall` et les scripts `dev` et `build` du projet lancent déjà cette
+commande.

package/templates/components/fraza/templates/content.js

@@ -0,0 +1,271 @@
+// Composant <Content> : rendu public des blocs du BlockEditor.
+//
+// Ce fichier est la **source unique de vérité du style** pour les blocs
+// internes du core (paragraph, heading_1..6, bullet_item, numbered_item,
+// checklist, quote, code, divider, spacer, image). Modifie librement chaque
+// composant ci-dessous (className, structure, wrappers) : c'est ton
+// rendu public, tu en as le contrôle complet.
+//
+// Les blocs **custom du site** (`components/fraza/blocks/<id>/render.js`)
+// ne sont PAS gérés ici : ils ont leur propre `render.js` et sont délégués
+// automatiquement via `CustomBlockRender`.
+//
+// Les **marks inline** (gras, italique, lien, code, couleur, surlignage) sont
+// délégués à `renderInline` du core : leur sérialisation est contrainte par
+// le format `InlineNode[]` du BlockEditor.
+//
+// ─── Style ponctuel par zone (prop `overrides`) ────────────────────────────
+// `<Content>` accepte une prop optionnelle `overrides` ({ clé → Composant })
+// qui remplace, au cas par cas, le composant par défaut d'une zone donnée,
+// sans toucher au rendu des autres `<Content>`. Clés acceptées :
+//   • types de blocs : paragraph, heading_1..6, quote, code, divider, spacer, image
+//   • groupes de liste : bullet_item, numbered_item, checklist
+// Définis tes variantes dans ce fichier, exporte-les, puis passe-les en prop.
+// Exemple : un paragraphe plus petit pour une 2e zone de contenu.
+//   export function ParagraphSm({ block }) {
+//     return <p {...anchorProps(block)} className="my-4 leading-7 text-sm text-fg-secondary">{renderInline(block.content)}</p>;
+//   }
+//   <Content blocks={content2} overrides={{ paragraph: ParagraphSm }} />
+
+import Image from 'next/image';
+import Link from 'next/link';
+import {
+  renderInline,
+  groupListItems,
+  isCustomBlockType,
+  isInternalHref,
+  anchorProps,
+  CustomBlockRender,
+  resolveImageBlock,
+  sanitizeUrl,
+} from '@fraza/core/blocks-registry/render';
+import {
+  COLUMN_CLASS,
+  columnsContainerClass,
+  columnStyle,
+} from '@fraza/core/blocks-registry/columns-layout';
+
+// `{...anchorProps(block)}` pose l'`id` HTML quand le bloc porte une ancre
+// (définie dans l'éditeur via le menu d'actions ▸ Ancre), cible d'un lien
+// `#slug`. Spreader le résultat est un no-op quand il n'y a pas d'ancre.
+
+// ─── Composants par type de bloc ──────────────────────────────────────────
+
+// Échelle de taille du paragraphe, pilotée par `block.size` (choisie dans
+// l'éditeur via le menu d'actions ▸ Taille). Un bloc sans `size` retombe sur
+// `md`.
+const PARAGRAPH_SIZE_CLASS = {
+  sm: 'text-sm leading-6',
+  md: 'text-base leading-7',
+  lg: 'text-lg leading-8',
+};
+
+function Paragraph({ block }) {
+  const sizeClass = PARAGRAPH_SIZE_CLASS[block.size] || PARAGRAPH_SIZE_CLASS.md;
+  return <p {...anchorProps(block)} className={`my-4 ${sizeClass} text-fg`}>{renderInline(block.content)}</p>;
+}
+
+// Échelle des titres de contenu : elle reste sous le titre de la page (32 px,
+// titre d'écran de la charte), pour qu'un `heading_1` ne le concurrence pas.
+function Heading1({ block }) {
+  return <h1 {...anchorProps(block)} className="text-[28px] font-bold leading-tight tracking-[-0.03em] text-fg mt-10 mb-6">{renderInline(block.content)}</h1>;
+}
+function Heading2({ block }) {
+  return <h2 {...anchorProps(block)} className="text-2xl font-bold leading-tight tracking-[-0.03em] text-fg mt-8 mb-4">{renderInline(block.content)}</h2>;
+}
+function Heading3({ block }) {
+  return <h3 {...anchorProps(block)} className="text-xl font-semibold leading-snug tracking-[-0.02em] text-fg mt-6 mb-3">{renderInline(block.content)}</h3>;
+}
+function Heading4({ block }) {
+  return <h4 {...anchorProps(block)} className="text-lg font-semibold leading-snug text-fg mt-5 mb-2">{renderInline(block.content)}</h4>;
+}
+function Heading5({ block }) {
+  return <h5 {...anchorProps(block)} className="text-base font-semibold text-fg mt-4 mb-2">{renderInline(block.content)}</h5>;
+}
+function Heading6({ block }) {
+  return <h6 {...anchorProps(block)} className="text-base font-semibold text-fg-muted mt-4 mb-2">{renderInline(block.content)}</h6>;
+}
+
+function Quote({ block }) {
+  return (
+    <blockquote {...anchorProps(block)} className="my-6 border-l border-line-strong pl-4 italic text-fg-secondary">
+      {renderInline(block.content)}
+    </blockquote>
+  );
+}
+
+function CodeBlock({ block }) {
+  return (
+    <pre {...anchorProps(block)} className="my-6 rounded-control border border-line bg-surface-muted text-fg p-4 overflow-x-auto text-sm">
+      <code className="font-code">{renderInline(block.content)}</code>
+    </pre>
+  );
+}
+
+function Divider({ block }) {
+  return <hr {...anchorProps(block)} className="my-10 border-0 border-t border-line" />;
+}
+
+// Espaceur : hauteur verticale vide configurable (block.height en px).
+// La borne est appliquée à l'écriture côté éditeur ; ici coercition défensive.
+function Spacer({ block }) {
+  const h = Math.round(Number(block.height));
+  const height = Number.isFinite(h) && h > 0 ? h : 24;
+  return <div {...anchorProps(block)} aria-hidden="true" style={{ height }} />;
+}
+
+// Largeur du conteneur selon block.size ('s'=25% | 'm'=50% | 'l'=75% | 'full'=100%).
+// Ignoré quand align === 'full' (toujours pleine largeur).
+const SIZE_CLASS = { s: 'w-1/4', m: 'w-1/2', l: 'w-3/4', full: 'w-full' };
+// Positionnement horizontal du conteneur selon block.align.
+const JUSTIFY_CLASS = { left: 'justify-start', center: 'justify-center', right: 'justify-end' };
+
+function ImageBlock({ block }) {
+  // Adresse, alt et légende : ceux du média lié (posés au rendu par le module
+  // Médias), sinon ceux du bloc pour une image à l'URL externe.
+  const { src, alt, caption } = resolveImageBlock(block);
+  if (!src) return null;
+
+  // align : left | center | right | full (défaut center)
+  // size  : s | m | l | full            (défaut full)
+  // aspectRatio : auto | 1/1 | 4/3 | 3/2 | 16/9 | 3/4 | 9/16 (défaut auto)
+  // Quand align === 'full' → image toujours 100 %, size ignoré.
+  const align = block.align || 'center';
+  const isFullAlign = align === 'full';
+  const sizeClass = isFullAlign ? 'w-full' : (SIZE_CLASS[block.size] || 'w-full');
+  const justifyClass = isFullAlign ? '' : (JUSTIFY_CLASS[align] || 'justify-center');
+
+  // aspectRatio : auto → ratio naturel. Sinon, l'image est recadrée en
+  // `object-cover` dans un conteneur au ratio demandé (next/image en `fill`).
+  const ratioMap = { '1/1': '1 / 1', '4/3': '4 / 3', '3/2': '3 / 2', '16/9': '16 / 9', '3/4': '3 / 4', '9/16': '9 / 16' };
+  const aspectRatio = ratioMap[block.aspectRatio] || null;
+
+  const img = aspectRatio ? (
+    <div className="relative w-full overflow-hidden rounded-control" style={{ aspectRatio }}>
+      <Image src={src} alt={alt} fill className="object-cover" />
+    </div>
+  ) : (
+    <Image src={src} alt={alt} width={3840} height={3840} className="rounded-control" />
+  );
+
+  // Le lien vient d'une saisie ou de l'API : seuls http, https, mailto, tel et
+  // les adresses relatives passent, comme dans l'éditeur et le rendu du core.
+  // Une adresse refusée (`javascript:`, `data:`…) rend l'image sans lien.
+  const href = sanitizeUrl(block.href);
+
+  return (
+    <figure {...anchorProps(block)} className="my-8">
+      <div className={`flex ${justifyClass}`}>
+        <div className={sizeClass}>
+          {href ? (
+            !block.newTab && isInternalHref(href) ? (
+              <Link href={href} className="block">{img}</Link>
+            ) : (
+              <a href={href} target={block.newTab ? '_blank' : undefined} rel={block.newTab ? 'noopener noreferrer' : undefined} className="block">
+                {img}
+              </a>
+            )
+          ) : img}
+        </div>
+      </div>
+      {caption && <figcaption className="mt-2 text-center text-sm text-fg-muted">{caption}</figcaption>}
+    </figure>
+  );
+}
+
+// ─── Composants par groupe de liste ───────────────────────────────────────
+// `groupListItems` du core regroupe les blocs `bullet_item`/`numbered_item`/
+// `checklist` consécutifs pour qu'ils partagent un même <ul>/<ol>.
+
+function BulletList({ items }) {
+  return (
+    <ul className="my-4 list-disc pl-6 space-y-1">
+      {items.map((it) => <li key={it.id} {...anchorProps(it)} className="leading-7">{renderInline(it.content)}</li>)}
+    </ul>
+  );
+}
+
+function NumberedList({ items }) {
+  return (
+    <ol className="my-4 list-decimal pl-6 space-y-1">
+      {items.map((it) => <li key={it.id} {...anchorProps(it)} className="leading-7">{renderInline(it.content)}</li>)}
+    </ol>
+  );
+}
+
+function Checklist({ items }) {
+  return (
+    <ul className="my-4 pl-0 list-none space-y-1">
+      {items.map((it) => (
+        <li key={it.id} {...anchorProps(it)} className="flex items-start gap-2 leading-7">
+          <input type="checkbox" checked={!!it.checked} readOnly className="mt-1.5 accent-accent" />
+          <span>{renderInline(it.content)}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// ─── Bloc Colonnes ────────────────────────────────────────────────────────
+// Pose du contenu sur plusieurs colonnes horizontales. Empilé sur mobile, en
+// ligne dès `md` (mise en page partagée avec l'éditeur via `columns-layout` du
+// core). Chaque colonne rend récursivement son sous-tableau via `<Content>`,
+// et les `overrides` sont propagés pour conserver le style par zone.
+
+function ColumnsBlock({ block, overrides }) {
+  const columns = Array.isArray(block.columns) ? block.columns : [];
+  if (columns.length === 0) return null;
+  return (
+    <div {...anchorProps(block)} className={`my-8 ${columnsContainerClass(block.gap)}`}>
+      {columns.map((col, ci) => (
+        <div key={col.id ?? ci} style={columnStyle(col)} className={COLUMN_CLASS}>
+          <Content blocks={col.blocks} overrides={overrides} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── Dispatch ─────────────────────────────────────────────────────────────
+
+const BLOCK_COMPONENTS = {
+  paragraph: Paragraph,
+  heading_1: Heading1,
+  heading_2: Heading2,
+  heading_3: Heading3,
+  heading_4: Heading4,
+  heading_5: Heading5,
+  heading_6: Heading6,
+  quote: Quote,
+  code: CodeBlock,
+  divider: Divider,
+  spacer: Spacer,
+  image: ImageBlock,
+};
+
+function renderBlock(block, idx, overrides) {
+  const Component = overrides[block.type] || BLOCK_COMPONENTS[block.type];
+  if (!Component) return null;
+  return <Component key={block.id ?? idx} block={block} />;
+}
+
+function renderGroup(group, idx, overrides) {
+  if (group.kind === 'bullet_item')   { const C = overrides.bullet_item   || BulletList;   return <C key={`ul-${idx}`} items={group.items} />; }
+  if (group.kind === 'numbered_item') { const C = overrides.numbered_item || NumberedList; return <C key={`ol-${idx}`} items={group.items} />; }
+  if (group.kind === 'checklist')     { const C = overrides.checklist     || Checklist;    return <C key={`cl-${idx}`} items={group.items} />; }
+  // group.kind === 'block'
+  const b = group.block;
+  // Colonnes : traité avant le dispatch générique pour propager `overrides`
+  // dans le rendu récursif des sous-tableaux.
+  if (b.type === 'columns') return <ColumnsBlock key={b.id ?? idx} block={b} overrides={overrides} />;
+  if (isCustomBlockType(b.type)) return <CustomBlockRender key={b.id ?? idx} block={b} />;
+  return renderBlock(b, idx, overrides);
+}
+
+// ─── Composant public ─────────────────────────────────────────────────────
+
+export default function Content({ blocks, overrides = {} }) {
+  if (!Array.isArray(blocks) || blocks.length === 0) return null;
+  const groups = groupListItems(blocks);
+  return <>{groups.map((group, i) => renderGroup(group, i, overrides))}</>;
+}

package/templates/components/fraza/templates/default.js

@@ -0,0 +1,18 @@
+import Content from './content.js';
+
+export const meta = {
+  id: 'default',
+  label: 'Par défaut',
+  kind: 'page',
+};
+
+export default function DefaultPageTemplate({ page, blocks }) {
+  return (
+    <main className="max-w-3xl mx-auto px-4 py-12">
+      {/* Titre d'écran de la charte : 32 px, graisse 700, -0,035 em, comme
+          les pages publiques des modules. */}
+      {page?.title && <h1 className="mb-8 text-[28px] font-bold leading-tight tracking-[-0.035em] text-fg sm:text-[32px]">{page.title}</h1>}
+      <Content blocks={blocks} />
+    </main>
+  );
+}

package/templates/components/fraza/templates/post-blogue.js

@@ -0,0 +1,97 @@
+import Content from './content.js';
+
+export const meta = {
+  id: 'default',
+  label: 'Article de blogue',
+  kind: 'post',
+  postType: 'blogue',
+};
+
+function formatDate(value) {
+  if (!value) return null;
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return null;
+  return d.toLocaleDateString('fr-CA', { year: 'numeric', month: 'long', day: 'numeric' });
+}
+
+export default function BloguePostTemplate({ post, blocks }) {
+  // post.thumbnail est l'objet enrichi { id, filename, alt_text, caption, mime_type }
+  // (cf. enrichSinglePostMediaFields dans @fraza/module-posts/crud.server.js).
+  // L'URL publique d'un média se construit avec /za/media/<filename>.
+  const thumbnail = post?.thumbnail?.filename
+    ? `/za/media/${encodeURIComponent(post.thumbnail.filename)}`
+    : null;
+  const thumbnailAlt = post?.thumbnail?.alt_text || post?.title || '';
+  const categories = Array.isArray(post?.categories) ? post.categories : [];
+  const tags = Array.isArray(post?.tags) ? post.tags : [];
+  const published = formatDate(post?.created_at);
+  const updated = formatDate(post?.updated_at);
+
+  return (
+    <main className="mx-auto max-w-3xl px-4 py-12">
+      <article>
+        <header className="mb-10">
+          {thumbnail && (
+            <figure className="mb-8 overflow-hidden rounded-card">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={thumbnail}
+                alt={thumbnailAlt}
+                className="h-auto w-full object-cover"
+              />
+            </figure>
+          )}
+
+          {categories.length > 0 && (
+            <div className="mb-4 flex flex-wrap gap-2">
+              {categories.map((c) => (
+                <span
+                  key={c.id}
+                  className="inline-flex h-[22px] items-center rounded-full bg-surface-muted px-[9px] text-xs font-medium leading-none text-fg-secondary"
+                >
+                  {c.title}
+                </span>
+              ))}
+            </div>
+          )}
+
+          {post?.title && (
+            <h1 className="text-[28px] font-bold leading-tight tracking-[-0.035em] text-fg sm:text-[32px]">
+              {post.title}
+            </h1>
+          )}
+
+          {(published || updated) && (
+            <div className="mt-4 flex flex-wrap gap-x-4 gap-y-1 text-sm text-fg-muted">
+              {published && (
+                <time dateTime={post.created_at}>Publié le {published}</time>
+              )}
+              {updated && updated !== published && (
+                <time dateTime={post.updated_at}>Mis à jour le {updated}</time>
+              )}
+            </div>
+          )}
+        </header>
+
+        <div className="prose-neutral">
+          <Content blocks={blocks} />
+        </div>
+
+        {tags.length > 0 && (
+          <footer className="mt-12 border-t border-line pt-6">
+            <ul className="flex flex-wrap gap-2">
+              {tags.map((t) => (
+                <li
+                  key={t.id}
+                  className="inline-flex h-[26px] items-center rounded-md border border-line px-2.5 text-[12.5px] text-fg-secondary"
+                >
+                  #{t.title}
+                </li>
+              ))}
+            </ul>
+          </footer>
+        )}
+      </article>
+    </main>
+  );
+}