feat(fp): WP-24 — letter canvas (edit on the letter)

One letter surface for every role: LetterCanvasComponent renders the
org template's letterhead/signature/footer around the case-type
sections, with editableRegions content|template|none. public/letter.css
is the FE⇄BE rendering contract (WP-25 inlines it verbatim).
letter-preview deleted — its read-only rendering absorbed into 'none'
mode. brief.machine.ts byte-identical; orgTemplate parses at the
adapter boundary and lives beside the machine in BriefStore.

Also fixes passage-picker multi-select (checkboxes all shared
id="undefined", so labels only toggled the first box) and keeps the
±page-break marks from drawing through canvas content.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

.storybook/preview-head.html

@@ -1,3 +1,5 @@
 <!-- CIBG Huisstijl (customized Bootstrap 5.2), served from the vendored public/ staticDir.
      Mirrors src/index.html so stories match the app. System font per styles.scss. -->
 <link rel="stylesheet" href="cibg-huisstijl/css/huisstijl.min.css" />
+<!-- Letter-rendering contract (WP-24), mirrors index.html. -->
+<link rel="stylesheet" href="letter.css" />

backend/src/BigRegister.Api/Contracts/Dtos.cs

@@ -151,10 +151,43 @@ public sealed record BriefDto(
 // (PRD-0002 phase P1) — the FE renders these, it never recomputes them.
 public sealed record BriefDecisionsDto(bool CanEdit, bool CanApprove, bool CanReject, bool CanSend);
 
-public sealed record BriefViewDto(BriefDto Brief, IReadOnlyList<LibraryPassageDto> AvailablePassages, BriefDecisionsDto Decisions);
+// The brief's screen DTO also carries the org template it renders with (WP-23):
+// the sub-org's current PUBLISHED version — or, once sent, the version pinned at
+// send time (sent letters are immutable; a republish never re-renders them).
+public sealed record BriefViewDto(
+    BriefDto Brief, IReadOnlyList<LibraryPassageDto> AvailablePassages, BriefDecisionsDto Decisions,
+    OrgTemplateDto OrgTemplate);
 
 public sealed record SaveBriefRequest(IReadOnlyList<LetterSectionDto> Sections);
 public sealed record RejectBriefRequest(string Comments);
 
 // PRD-0002 §6: coarse, role-derived capabilities for nav/menu-level checks.
 public sealed record MeDto(IReadOnlyList<string> Capabilities);
+
+// --- Organization templates (WP-23, Brief v2 PRD §3) ---
+// The second template axis: appearance/identity per sub-organization (letterhead,
+// footer, signature, margins). Orthogonal to the case-type template (sections +
+// placeholders); the two only meet at render time.
+
+public sealed record MarginsDto(int TopMm, int RightMm, int BottomMm, int LeftMm);
+
+// Version: 0 = a draft (work in progress), n>0 = the published snapshot it is.
+public sealed record OrgTemplateDto(
+    string SubOrgId, string OrgName, string ReturnAddress, string? LogoDocumentId,
+    string FooterContact, string FooterLegal,
+    string SignatureName, string SignatureRole, string SignatureClosing,
+    MarginsDto Margins, int Version = 0);
+
+public sealed record OrgTemplateVersionDto(int Version, string PublishedAt, OrgTemplateDto Template);
+
+// Screen DTO for the admin editor: the editable draft, what's live, the append-only
+// history, and the publish-impact count ("dit raakt N nog niet verzonden brieven").
+public sealed record OrgTemplateAdminViewDto(
+    OrgTemplateDto Draft, int PublishedVersion,
+    IReadOnlyList<OrgTemplateVersionDto> History, int UnsentBriefs);
+
+public sealed record SubOrgSummaryDto(string SubOrgId, string OrgName, int PublishedVersion);
+
+public sealed record SaveOrgTemplateRequest(OrgTemplateDto Draft);
+
+public sealed record PublishOrgTemplateResponse(int Version, int AffectedUnsentBriefs);

backend/src/BigRegister.Api/Data/AppDbContext.cs

@@ -21,6 +21,7 @@ public sealed class AppDbContext(DbContextOptions<AppDbContext> options) : DbCon
   public DbSet<AuditEntry> AuditEntries => Set<AuditEntry>();
   public DbSet<Aanvraag> Applications => Set<Aanvraag>();
   public DbSet<BriefEntity> Briefs => Set<BriefEntity>();
+  public DbSet<OrgTemplateEntity> OrgTemplates => Set<OrgTemplateEntity>();
 
   protected override void OnModelCreating(ModelBuilder modelBuilder)
   {
@@ -47,6 +48,13 @@ public sealed class AppDbContext(DbContextOptions<AppDbContext> options) : DbCon
       e.Property(b => b.Sections).HasConversion(Json<List<LetterSectionDto>>());
       e.Property(b => b.Status).HasConversion(Json<BriefStatusDto>());
     });
+
+    modelBuilder.Entity<OrgTemplateEntity>(e =>
+    {
+      e.HasKey(t => t.SubOrgId);
+      e.Property(t => t.Draft).HasConversion(Json<OrgTemplateDto>());
+      e.Property(t => t.History).HasConversion(Json<List<OrgTemplateVersionDto>>());
+    });
   }
 
   // A wizard's draft is an opaque JsonElement snapshot — stored as its raw JSON

backend/src/BigRegister.Api/Data/BriefStore.cs

@@ -22,6 +22,10 @@ public sealed class BriefEntity
   public required IReadOnlyList<PlaceholderDefDto> Placeholders { get; init; }
   public List<LetterSectionDto> Sections { get; set; } = new();
   public BriefStatusDto Status { get; set; } = new("draft");
+  /// Which sub-organization's org template themes this letter (WP-23).
+  public string SubOrgId { get; set; } = OrgTemplateSeed.Registers;
+  /// Pinned at send: sent letters are immutable, a republish never re-themes them.
+  public int? SentOrgTemplateVersion { get; set; }
 
   public BriefDto ToDto() => new(BriefId, Beroep, TemplateId, Placeholders, Sections, Status, DrafterId);
 }
@@ -33,6 +37,7 @@ public static class BriefStore
   // Dev-only role stand-ins (no real identities in this POC — see the ?role= toggle).
   public const string DrafterId = "demo-drafter";
   public const string ApproverId = "demo-approver";
+  public const string AdminId = "demo-admin";
 
   public enum Outcome { Ok, Forbidden, Conflict }
 
@@ -102,6 +107,9 @@ public static class BriefStore
       if (e is null) return (Outcome.Conflict, null);
       if (e.Status.Tag != "approved") return (Outcome.Conflict, null);
       e.Status = new BriefStatusDto("sent", SentAt: at);
+      // Pin the org-template version the letter was sent with (WP-23): from here on
+      // its appearance is frozen — republishing the template touches unsent briefs only.
+      e.SentOrgTemplateVersion = OrgTemplateStore.PublishedVersionOf(e.SubOrgId);
       db.SaveChanges();
       return (Outcome.Ok, e);
     }

backend/src/BigRegister.Api/Data/Migrations/20260705085857_OrgTemplates.Designer.cs

@@ -0,0 +1,223 @@
+// <auto-generated />
+using System;
+using BigRegister.Api.Data;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+
+#nullable disable
+
+namespace BigRegister.Api.Data.Migrations
+{
+    [DbContext(typeof(AppDbContext))]
+    [Migration("20260705085857_OrgTemplates")]
+    partial class OrgTemplates
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder.HasAnnotation("ProductVersion", "10.0.9");
+
+            modelBuilder.Entity("BigRegister.Api.Data.Aanvraag", b =>
+                {
+                    b.Property<string>("Id")
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("AutoApprovable")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTimeOffset>("CreatedAt")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("DocumentIds")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Draft")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Owner")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Reden")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Referentie")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("StepCount")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("StepIndex")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("Submitted")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTimeOffset?>("SubmittedAt")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Type")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTimeOffset>("UpdatedAt")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("Applications");
+                });
+
+            modelBuilder.Entity("BigRegister.Api.Data.AuditEntry", b =>
+                {
+                    b.Property<long>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Action")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Actor")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTimeOffset>("At")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("CategoryId")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("DocumentId")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("AuditEntries");
+                });
+
+            modelBuilder.Entity("BigRegister.Api.Data.BriefEntity", b =>
+                {
+                    b.Property<string>("BriefId")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Beroep")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("DrafterId")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Owner")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Placeholders")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Sections")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<int?>("SentOrgTemplateVersion")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("Status")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("SubOrgId")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("TemplateId")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("BriefId");
+
+                    b.HasIndex("Owner")
+                        .IsUnique();
+
+                    b.ToTable("Briefs");
+                });
+
+            modelBuilder.Entity("BigRegister.Api.Data.OrgTemplateEntity", b =>
+                {
+                    b.Property<string>("SubOrgId")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Draft")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("History")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("PublishedVersion")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("SubOrgId");
+
+                    b.ToTable("OrgTemplates");
+                });
+
+            modelBuilder.Entity("BigRegister.Api.Data.StoredDocument", b =>
+                {
+                    b.Property<string>("DocumentId")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("CategoryId")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<byte[]>("Content")
+                        .IsRequired()
+                        .HasColumnType("BLOB");
+
+                    b.Property<string>("ContentType")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("FileName")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("Linked")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("LocalId")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Owner")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<long>("SizeBytes")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTimeOffset>("UploadedAt")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("WizardId")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("DocumentId");
+
+                    b.ToTable("Documents");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}

backend/src/BigRegister.Api/Data/Migrations/20260705085857_OrgTemplates.cs

@@ -0,0 +1,57 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace BigRegister.Api.Data.Migrations
+{
+  /// <inheritdoc />
+  public partial class OrgTemplates : Migration
+  {
+    /// <inheritdoc />
+    protected override void Up(MigrationBuilder migrationBuilder)
+    {
+      migrationBuilder.AddColumn<int>(
+          name: "SentOrgTemplateVersion",
+          table: "Briefs",
+          type: "INTEGER",
+          nullable: true);
+
+      migrationBuilder.AddColumn<string>(
+          name: "SubOrgId",
+          table: "Briefs",
+          type: "TEXT",
+          nullable: false,
+          // Briefs from before this migration adopt the seeded default sub-org.
+          defaultValue: "cibg-registers");
+
+      migrationBuilder.CreateTable(
+          name: "OrgTemplates",
+          columns: table => new
+          {
+            SubOrgId = table.Column<string>(type: "TEXT", nullable: false),
+            Draft = table.Column<string>(type: "TEXT", nullable: false),
+            PublishedVersion = table.Column<int>(type: "INTEGER", nullable: false),
+            History = table.Column<string>(type: "TEXT", nullable: false)
+          },
+          constraints: table =>
+          {
+            table.PrimaryKey("PK_OrgTemplates", x => x.SubOrgId);
+          });
+    }
+
+    /// <inheritdoc />
+    protected override void Down(MigrationBuilder migrationBuilder)
+    {
+      migrationBuilder.DropTable(
+          name: "OrgTemplates");
+
+      migrationBuilder.DropColumn(
+          name: "SentOrgTemplateVersion",
+          table: "Briefs");
+
+      migrationBuilder.DropColumn(
+          name: "SubOrgId",
+          table: "Briefs");
+    }
+  }
+}

backend/src/BigRegister.Api/Data/Migrations/AppDbContextModelSnapshot.cs

@@ -124,10 +124,17 @@ namespace BigRegister.Api.Data.Migrations
                         .IsRequired()
                         .HasColumnType("TEXT");
 
+                    b.Property<int?>("SentOrgTemplateVersion")
+                        .HasColumnType("INTEGER");
+
                     b.Property<string>("Status")
                         .IsRequired()
                         .HasColumnType("TEXT");
 
+                    b.Property<string>("SubOrgId")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
                     b.Property<string>("TemplateId")
                         .IsRequired()
                         .HasColumnType("TEXT");
@@ -140,6 +147,27 @@ namespace BigRegister.Api.Data.Migrations
                     b.ToTable("Briefs");
                 });
 
+            modelBuilder.Entity("BigRegister.Api.Data.OrgTemplateEntity", b =>
+                {
+                    b.Property<string>("SubOrgId")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Draft")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("History")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("PublishedVersion")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("SubOrgId");
+
+                    b.ToTable("OrgTemplates");
+                });
+
             modelBuilder.Entity("BigRegister.Api.Data.StoredDocument", b =>
                 {
                     b.Property<string>("DocumentId")

backend/src/BigRegister.Api/Data/OrgTemplateStore.cs

@@ -0,0 +1,204 @@
+using BigRegister.Api.Contracts;
+
+namespace BigRegister.Api.Data;
+
+/// <summary>
+/// Organization template per sub-organization (WP-23, Brief v2 PRD §3): one row per
+/// sub-org. `Draft` is the work-in-progress payload (Version 0), `History` the
+/// append-only list of published snapshots, `PublishedVersion` points into it.
+/// Rollback copies an old snapshot back into the draft — it never rewrites history.
+/// Mirrors <see cref="BriefStore"/>: static class, short-lived context per call,
+/// nested DTO shapes stored as JSON text columns (WP-22 posture).
+/// </summary>
+public sealed class OrgTemplateEntity
+{
+  public required string SubOrgId { get; init; }
+  public OrgTemplateDto Draft { get; set; } = null!;
+  public int PublishedVersion { get; set; }
+  public List<OrgTemplateVersionDto> History { get; set; } = new();
+}
+
+/// <summary>ponytail: one global lock, same shape as BriefStore — SQLite tolerates
+/// only one writer at a time anyway.</summary>
+public static class OrgTemplateStore
+{
+  private static readonly object _gate = new();
+
+  public static IReadOnlyList<SubOrgSummaryDto> List()
+  {
+    lock (_gate)
+    {
+      using var db = Seeded();
+      return db.OrgTemplates.AsEnumerable()
+          .Select(e => new SubOrgSummaryDto(e.SubOrgId, Published(e).OrgName, e.PublishedVersion))
+          .OrderBy(s => s.SubOrgId)
+          .ToList();
+    }
+  }
+
+  public static OrgTemplateAdminViewDto? AdminView(string subOrgId)
+  {
+    lock (_gate)
+    {
+      using var db = Seeded();
+      var e = db.OrgTemplates.FirstOrDefault(t => t.SubOrgId == subOrgId);
+      return e is null ? null : ToAdminView(db, e);
+    }
+  }
+
+  /// Save the draft. Caller validates first (OrgTemplateRules); null = unknown sub-org.
+  public static OrgTemplateAdminViewDto? SaveDraft(string subOrgId, OrgTemplateDto draft)
+  {
+    lock (_gate)
+    {
+      using var db = Seeded();
+      var e = db.OrgTemplates.FirstOrDefault(t => t.SubOrgId == subOrgId);
+      if (e is null) return null;
+      // Normalize identity fields the client can't be trusted with: the row key and
+      // the draft marker (Version 0) always win over whatever was posted.
+      e.Draft = draft with { SubOrgId = subOrgId, Version = 0 };
+      db.SaveChanges();
+      return ToAdminView(db, e);
+    }
+  }
+
+  /// Draft → published: append a snapshot to history, advance the pointer. Returns
+  /// the new version + how many unsent briefs of this sub-org it re-themes.
+  public static PublishOrgTemplateResponse? Publish(string subOrgId, string at)
+  {
+    lock (_gate)
+    {
+      using var db = Seeded();
+      var e = db.OrgTemplates.FirstOrDefault(t => t.SubOrgId == subOrgId);
+      if (e is null) return null;
+      var version = e.PublishedVersion + 1;
+      // Reassign (not mutate) the list: the JSON ValueConverter has no ValueComparer,
+      // so EF only sees the change when the property reference changes.
+      e.History = new List<OrgTemplateVersionDto>(e.History)
+      {
+        new(version, at, e.Draft with { Version = version }),
+      };
+      e.PublishedVersion = version;
+      db.SaveChanges();
+      return new PublishOrgTemplateResponse(version, CountUnsent(db, subOrgId));
+    }
+  }
+
+  /// Rollback = copy an old published snapshot into the draft (admin republishes to
+  /// make it live). History stays append-only. Null = unknown sub-org or version.
+  public static OrgTemplateAdminViewDto? Rollback(string subOrgId, int version)
+  {
+    lock (_gate)
+    {
+      using var db = Seeded();
+      var e = db.OrgTemplates.FirstOrDefault(t => t.SubOrgId == subOrgId);
+      var old = e?.History.FirstOrDefault(h => h.Version == version);
+      if (e is null || old is null) return null;
+      e.Draft = old.Template with { Version = 0 };
+      db.SaveChanges();
+      return ToAdminView(db, e);
+    }
+  }
+
+  /// The template a brief renders with: the pinned version once sent (immutable
+  /// letters), else the sub-org's current published version.
+  public static OrgTemplateDto TemplateForBrief(string subOrgId, int? pinnedVersion)
+  {
+    lock (_gate)
+    {
+      using var db = Seeded();
+      // ponytail: briefs from before this WP carry an empty SubOrgId — fall back to
+      // the first seeded sub-org instead of failing the whole screen.
+      var e = db.OrgTemplates.FirstOrDefault(t => t.SubOrgId == subOrgId)
+          ?? db.OrgTemplates.First(t => t.SubOrgId == OrgTemplateSeed.Registers);
+      var pinned = pinnedVersion is { } v ? e.History.FirstOrDefault(h => h.Version == v)?.Template : null;
+      return pinned ?? Published(e);
+    }
+  }
+
+  public static int PublishedVersionOf(string subOrgId)
+  {
+    lock (_gate)
+    {
+      using var db = Seeded();
+      var e = db.OrgTemplates.FirstOrDefault(t => t.SubOrgId == subOrgId)
+          ?? db.OrgTemplates.First(t => t.SubOrgId == OrgTemplateSeed.Registers);
+      return e.PublishedVersion;
+    }
+  }
+
+  /// Test seam: drop all rows so the next call re-seeds.
+  public static void Reset()
+  {
+    lock (_gate)
+    {
+      using var db = Db.Create();
+      db.OrgTemplates.RemoveRange(db.OrgTemplates);
+      db.SaveChanges();
+    }
+  }
+
+  private static OrgTemplateDto Published(OrgTemplateEntity e) =>
+      e.History.First(h => h.Version == e.PublishedVersion).Template;
+
+  private static OrgTemplateAdminViewDto ToAdminView(AppDbContext db, OrgTemplateEntity e) =>
+      new(e.Draft, e.PublishedVersion, e.History, CountUnsent(db, e.SubOrgId));
+
+  // Status is a JSON column (not translatable to SQL) — count in memory; the demo
+  // holds a handful of briefs at most.
+  private static int CountUnsent(AppDbContext db, string subOrgId) =>
+      db.Briefs.AsEnumerable().Count(b => b.SubOrgId == subOrgId && b.Status.Tag != "sent");
+
+  private static AppDbContext Seeded()
+  {
+    var db = Db.Create();
+    if (!db.OrgTemplates.Any())
+    {
+      db.OrgTemplates.AddRange(OrgTemplateSeed.All());
+      db.SaveChanges();
+    }
+    return db;
+  }
+}
+
+/// <summary>
+/// Two seeded sub-organizations so the admin editor can demonstrate isolation
+/// (editing one never touches the other). Values come from the fictitious sample
+/// artifact `voorbeeldbrief-inschrijving.pdf`; each starts with draft == published v1.
+/// </summary>
+public static class OrgTemplateSeed
+{
+  public const string Registers = "cibg-registers";
+  public const string Vakbekwaamheid = "cibg-vakbekwaamheid";
+
+  // Deterministic seed timestamp (stable golden files, stable demos).
+  private const string SeededAt = "2026-07-01T00:00:00.0000000+00:00";
+
+  public static IEnumerable<OrgTemplateEntity> All() => new[]
+  {
+    Entity(new OrgTemplateDto(
+        Registers, "BIG-register",
+        "Retouradres: Postbus 00000, 2500 AA Den Haag",
+        LogoDocumentId: null,
+        "BIG-register · Postbus 00000, 2500 AA Den Haag · 070 000 00 00 · info@voorbeeld.example",
+        "Dit is een gegenereerd voorbeelddocument uit de register-reference PoC. Alle gegevens zijn fictief.",
+        "A. de Vries", "Hoofd Registratie, BIG-register", "Met vriendelijke groet,",
+        new MarginsDto(25, 20, 20, 25))),
+    Entity(new OrgTemplateDto(
+        Vakbekwaamheid, "CIBG Vakbekwaamheid",
+        "Retouradres: Postbus 11111, 2500 BB Den Haag",
+        LogoDocumentId: null,
+        "CIBG Vakbekwaamheid · Postbus 11111, 2500 BB Den Haag · 070 111 11 11 · vakbekwaamheid@voorbeeld.example",
+        "Dit is een gegenereerd voorbeelddocument uit de register-reference PoC. Alle gegevens zijn fictief.",
+        "M. Bakker", "Hoofd Vakbekwaamheid, CIBG", "Met vriendelijke groet,",
+        new MarginsDto(25, 20, 20, 25))),
+  };
+
+  private static OrgTemplateEntity Entity(OrgTemplateDto v1) => new()
+  {
+    SubOrgId = v1.SubOrgId,
+    Draft = v1 with { Version = 0 },
+    PublishedVersion = 1,
+    History = new() { new OrgTemplateVersionDto(1, SeededAt, v1 with { Version = 1 }) },
+  };
+}

backend/src/BigRegister.Api/Domain/Authorization/Authz.cs

@@ -3,7 +3,7 @@ using BigRegister.Api.Data;
 
 namespace BigRegister.Domain.Authorization;
 
-public enum PrincipalRole { Drafter, Approver }
+public enum PrincipalRole { Drafter, Approver, Admin }
 
 /// <summary>
 /// The acting identity for this request. dev stub — NOT a security boundary: resolved
@@ -24,30 +24,46 @@ public enum BriefAction { Approve, Reject, Send }
 /// </summary>
 public static class Authz
 {
-  public static Principal ResolvePrincipal(HttpContext ctx) =>
+  public static Principal ResolvePrincipal(HttpContext ctx) => new(ctx.Request.Headers["X-Role"].ToString() switch
-      new(ctx.Request.Headers["X-Role"].ToString() == "approver" ? PrincipalRole.Approver : PrincipalRole.Drafter);
+  {
+    "approver" => PrincipalRole.Approver,
+    "admin" => PrincipalRole.Admin,
+    _ => PrincipalRole.Drafter,
+  });
 
-  public static string ActingId(Principal principal) =>
+  public static string ActingId(Principal principal) => principal.Role switch
-      principal.Role == PrincipalRole.Approver ? BriefStore.ApproverId : BriefStore.DrafterId;
+  {
+    PrincipalRole.Approver => BriefStore.ApproverId,
+    PrincipalRole.Admin => BriefStore.AdminId,
+    _ => BriefStore.DrafterId,
+  };
 
   /// Coarse, resource-independent capabilities for `GET /me` (nav/menu-level — NOT
   /// tied to any specific brief's live status; contrast Decisions below).
-  public static IReadOnlyList<string> RoleCapabilities(Principal principal) =>
+  public static IReadOnlyList<string> RoleCapabilities(Principal principal) => principal.Role switch
-      principal.Role == PrincipalRole.Approver
+  {
-          ? new[] { "brief:approve", "brief:reject", "brief:send" }
+    PrincipalRole.Approver => new[] { "brief:approve", "brief:reject", "brief:send" },
-          : Array.Empty<string>();
+    PrincipalRole.Admin => new[] { "orgtemplate:edit" },
+    _ => Array.Empty<string>(),
+  };
 
   /// Role + four-eyes (SoD) check only — no status. This is the exact check
   /// BriefStore.Review enforces before its status guard; kept separate from
   /// Decisions() below so enforcement ORDER (Forbidden before Conflict) matches
-  /// today's behavior exactly.
+  /// today's behavior exactly. The explicit Approver condition keeps the new Admin
+  /// role out of the review flow (WP-23) — SoD alone would have let it through.
   public static bool CanActOn(BriefAction action, Principal principal, string drafterId) => action switch
   {
-    BriefAction.Approve or BriefAction.Reject => ActingId(principal) != drafterId,
+    BriefAction.Approve or BriefAction.Reject =>
+        principal.Role == PrincipalRole.Approver && ActingId(principal) != drafterId,
     BriefAction.Send => true, // sending is a mechanical dispatch step, not role-gated today
     _ => false,
   };
 
+  /// Org-template management (WP-23): admin-only, resource-independent — templates
+  /// have no per-resource state to weigh, so role IS the whole decision here.
+  public static bool CanManageOrgTemplates(Principal principal) => principal.Role == PrincipalRole.Admin;
+
   /// Resource-aware decision for the screen DTO: "would this action succeed right
   /// now" — role/SoD AND the brief's current status. This is what the UI renders;
   /// it never re-derives these booleans itself.

backend/src/BigRegister.Api/Domain/Documents/DocumentCategory.cs

@@ -19,6 +19,7 @@ public static class DocumentRules
 {
   private static readonly string[] Pdf = { "application/pdf" };
   private static readonly string[] PdfImage = { "application/pdf", "image/jpeg", "image/png" };
+  private static readonly string[] Image = { "image/jpeg", "image/png" };
 
   private static readonly DocumentCategory Diploma = new("diploma", "Diplomabewijs",
       "Upload uw diploma als PDF-bestand.", true, Pdf, 10, false, false);
@@ -42,6 +43,13 @@ public static class DocumentRules
             new DocumentCategory("nascholing", "Nascholingscertificaten",
                 "Upload uw nascholingscertificaten (optioneel).", false, PdfImage, 10, true, true),
         },
+    // WP-23: the admin's org-template logo rides the same upload machinery as the
+    // wizard documents — one category under its own "wizard" id.
+    "org-template" => new[]
+    {
+            new DocumentCategory("org-logo", "Organisatielogo",
+                "Upload het logo van de organisatie (PNG of JPG).", false, Image, 1, false, false),
+        },
     _ => Array.Empty<DocumentCategory>(),
   };
 

backend/src/BigRegister.Api/Domain/Letters/OrgTemplateRules.cs

@@ -0,0 +1,28 @@
+using BigRegister.Api.Contracts;
+
+namespace BigRegister.Domain.Letters;
+
+/// <summary>
+/// SERVER-OWNED org-template validation (Brief v2 PRD §5): bounded margins so an
+/// admin cannot break the letter geometry, and the identity fields a letter cannot
+/// render without. The FE mirrors the bounds for instant feedback (config values on
+/// the wire if ever needed); this is the authority.
+/// </summary>
+public static class OrgTemplateRules
+{
+  public const int MarginMinMm = 10;
+  public const int MarginMaxMm = 50;
+
+  /// Returns a rejection reason, or null when the draft is acceptable.
+  public static string? RejectDraft(OrgTemplateDto draft)
+  {
+    if (string.IsNullOrWhiteSpace(draft.OrgName)) return "Organisatienaam is verplicht.";
+    if (string.IsNullOrWhiteSpace(draft.SignatureName)) return "Naam van de ondertekenaar is verplicht.";
+    var m = draft.Margins;
+    var outOfBounds = new[] { m.TopMm, m.RightMm, m.BottomMm, m.LeftMm }
+        .Any(v => v is < MarginMinMm or > MarginMaxMm);
+    return outOfBounds
+        ? $"Marges moeten tussen {MarginMinMm} en {MarginMaxMm} mm liggen."
+        : null;
+  }
+}

backend/src/BigRegister.Api/Program.cs

@@ -6,6 +6,7 @@ using BigRegister.Domain.Authorization;
 using BigRegister.Domain.Diplomas;
 using BigRegister.Domain.Documents;
 using BigRegister.Domain.Intake;
+using BigRegister.Domain.Letters;
 using BigRegister.Domain.Registrations;
 using BigRegister.Domain.Submissions;
 using Microsoft.EntityFrameworkCore;
@@ -354,16 +355,77 @@ api.MapPost("/brief/reset", (HttpContext ctx) =>
 .WithName("briefReset")
 .Produces<BriefViewDto>();
 
+// --- Organization templates (WP-23): the second template axis — appearance and
+// identity per sub-organization. Admin-only (X-Role: admin, the same dev-stub seam
+// as drafter/approver); the same Authz check gates every endpoint and feeds the
+// `orgtemplate:edit` capability on /me, so emit and enforce cannot drift. ---
+
+api.MapGet("/admin/org-templates", (HttpContext ctx) => OrgAdmin(ctx, () =>
+    Results.Ok(OrgTemplateStore.List())))
+.WithName("orgTemplates")
+.Produces<List<SubOrgSummaryDto>>()
+.ProducesProblem(StatusCodes.Status403Forbidden);
+
+api.MapGet("/admin/org-template/{subOrgId}", (string subOrgId, HttpContext ctx) => OrgAdmin(ctx, () =>
+    OrgTemplateStore.AdminView(subOrgId) is { } view ? Results.Ok(view) : Results.NotFound()))
+.WithName("orgTemplateGET")
+.Produces<OrgTemplateAdminViewDto>()
+.ProducesProblem(StatusCodes.Status403Forbidden)
+.Produces(StatusCodes.Status404NotFound);
+
+api.MapPut("/admin/org-template/{subOrgId}", (string subOrgId, SaveOrgTemplateRequest req, HttpContext ctx) => OrgAdmin(ctx, () =>
+{
+  var reject = OrgTemplateRules.RejectDraft(req.Draft);
+  if (reject is not null) return Results.Problem(detail: reject, statusCode: StatusCodes.Status400BadRequest);
+  return OrgTemplateStore.SaveDraft(subOrgId, req.Draft) is { } view ? Results.Ok(view) : Results.NotFound();
+}))
+.WithName("orgTemplatePUT")
+.Produces<OrgTemplateAdminViewDto>()
+.ProducesProblem(StatusCodes.Status400BadRequest)
+.ProducesProblem(StatusCodes.Status403Forbidden)
+.Produces(StatusCodes.Status404NotFound);
+
+api.MapPost("/admin/org-template/{subOrgId}/publish", (string subOrgId, HttpContext ctx) => OrgAdmin(ctx, () =>
+{
+  var r = OrgTemplateStore.Publish(subOrgId, Now());
+  if (r is not null)
+    app.Logger.LogInformation("orgtemplate publish subOrg={SubOrg} version={Version} affected={Affected}",
+        subOrgId, r.Version, r.AffectedUnsentBriefs);
+  return r is not null ? Results.Ok(r) : Results.NotFound();
+}))
+.WithName("orgTemplatePublish")
+.Produces<PublishOrgTemplateResponse>()
+.ProducesProblem(StatusCodes.Status403Forbidden)
+.Produces(StatusCodes.Status404NotFound);
+
+api.MapPost("/admin/org-template/{subOrgId}/rollback/{version:int}", (string subOrgId, int version, HttpContext ctx) => OrgAdmin(ctx, () =>
+    OrgTemplateStore.Rollback(subOrgId, version) is { } view ? Results.Ok(view) : Results.NotFound()))
+.WithName("orgTemplateRollback")
+.Produces<OrgTemplateAdminViewDto>()
+.ProducesProblem(StatusCodes.Status403Forbidden)
+.Produces(StatusCodes.Status404NotFound);
+
 app.Run();
 
 static bool IsAdmin(HttpContext ctx) => ctx.Request.Headers["X-Admin"] == "true";
 
+// One gate for every org-template endpoint — the enforce twin of the
+// `orgtemplate:edit` capability RoleCapabilities emits (single Authz source).
+static IResult OrgAdmin(HttpContext ctx, Func<IResult> action) =>
+    Authz.CanManageOrgTemplates(Authz.ResolvePrincipal(ctx))
+        ? action()
+        : Results.Problem(detail: "Alleen een beheerder mag organisatiesjablonen beheren.",
+            statusCode: StatusCodes.Status403Forbidden);
+
 static string Now() => DateTimeOffset.UtcNow.ToString("o");
 
 BriefViewDto ToView(HttpContext ctx, BriefEntity e) => new(
     e.ToDto(),
     BriefSeed.PassagesFor(e.Beroep),
-    Authz.Decisions(Authz.ResolvePrincipal(ctx), e.Status.Tag, e.DrafterId));
+    Authz.Decisions(Authz.ResolvePrincipal(ctx), e.Status.Tag, e.DrafterId),
+    // Sent letters render with the version pinned at send; everything else follows
+    // the sub-org's current published template (WP-23 immutability invariant).
+    OrgTemplateStore.TemplateForBrief(e.SubOrgId, e.Status.Tag == "sent" ? e.SentOrgTemplateVersion : null));
 
 // Emit (decision flags, via ToView) and enforce (Forbidden/Conflict below) both run
 // through Authz — see BriefStore.Review and Authz.CanActOn — so they cannot drift.

backend/swagger.json

@@ -902,6 +902,238 @@
           }
         }
       }
+    },
+    "/api/v1/admin/org-templates": {
+      "get": {
+        "tags": [
+          "BigRegister.Api, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"
+        ],
+        "operationId": "orgTemplates",
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "array",
+                  "items": {
+                    "$ref": "#/components/schemas/SubOrgSummaryDto"
+                  }
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Forbidden",
+            "content": {
+              "application/problem+json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    "/api/v1/admin/org-template/{subOrgId}": {
+      "get": {
+        "tags": [
+          "BigRegister.Api, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"
+        ],
+        "operationId": "orgTemplateGET",
+        "parameters": [
+          {
+            "name": "subOrgId",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "string"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/OrgTemplateAdminViewDto"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Forbidden",
+            "content": {
+              "application/problem+json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not Found"
+          }
+        }
+      },
+      "put": {
+        "tags": [
+          "BigRegister.Api, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"
+        ],
+        "operationId": "orgTemplatePUT",
+        "parameters": [
+          {
+            "name": "subOrgId",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "string"
+            }
+          }
+        ],
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "$ref": "#/components/schemas/SaveOrgTemplateRequest"
+              }
+            }
+          },
+          "required": true
+        },
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/OrgTemplateAdminViewDto"
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "Bad Request",
+            "content": {
+              "application/problem+json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Forbidden",
+            "content": {
+              "application/problem+json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not Found"
+          }
+        }
+      }
+    },
+    "/api/v1/admin/org-template/{subOrgId}/publish": {
+      "post": {
+        "tags": [
+          "BigRegister.Api, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"
+        ],
+        "operationId": "orgTemplatePublish",
+        "parameters": [
+          {
+            "name": "subOrgId",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "string"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/PublishOrgTemplateResponse"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Forbidden",
+            "content": {
+              "application/problem+json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not Found"
+          }
+        }
+      }
+    },
+    "/api/v1/admin/org-template/{subOrgId}/rollback/{version}": {
+      "post": {
+        "tags": [
+          "BigRegister.Api, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"
+        ],
+        "operationId": "orgTemplateRollback",
+        "parameters": [
+          {
+            "name": "subOrgId",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "string"
+            }
+          },
+          {
+            "name": "version",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "type": "integer",
+              "format": "int32"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/OrgTemplateAdminViewDto"
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Forbidden",
+            "content": {
+              "application/problem+json": {
+                "schema": {
+                  "$ref": "#/components/schemas/ProblemDetails"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not Found"
+          }
+        }
+      }
     }
   },
   "components": {
@@ -1163,6 +1395,9 @@
           },
           "decisions": {
             "$ref": "#/components/schemas/BriefDecisionsDto"
+          },
+          "orgTemplate": {
+            "$ref": "#/components/schemas/OrgTemplateDto"
           }
         },
         "additionalProperties": false
@@ -1509,6 +1744,28 @@
         },
         "additionalProperties": false
       },
+      "MarginsDto": {
+        "type": "object",
+        "properties": {
+          "topMm": {
+            "type": "integer",
+            "format": "int32"
+          },
+          "rightMm": {
+            "type": "integer",
+            "format": "int32"
+          },
+          "bottomMm": {
+            "type": "integer",
+            "format": "int32"
+          },
+          "leftMm": {
+            "type": "integer",
+            "format": "int32"
+          }
+        },
+        "additionalProperties": false
+      },
       "MeDto": {
         "type": "object",
         "properties": {
@@ -1522,6 +1779,96 @@
         },
         "additionalProperties": false
       },
+      "OrgTemplateAdminViewDto": {
+        "type": "object",
+        "properties": {
+          "draft": {
+            "$ref": "#/components/schemas/OrgTemplateDto"
+          },
+          "publishedVersion": {
+            "type": "integer",
+            "format": "int32"
+          },
+          "history": {
+            "type": "array",
+            "items": {
+              "$ref": "#/components/schemas/OrgTemplateVersionDto"
+            },
+            "nullable": true
+          },
+          "unsentBriefs": {
+            "type": "integer",
+            "format": "int32"
+          }
+        },
+        "additionalProperties": false
+      },
+      "OrgTemplateDto": {
+        "type": "object",
+        "properties": {
+          "subOrgId": {
+            "type": "string",
+            "nullable": true
+          },
+          "orgName": {
+            "type": "string",
+            "nullable": true
+          },
+          "returnAddress": {
+            "type": "string",
+            "nullable": true
+          },
+          "logoDocumentId": {
+            "type": "string",
+            "nullable": true
+          },
+          "footerContact": {
+            "type": "string",
+            "nullable": true
+          },
+          "footerLegal": {
+            "type": "string",
+            "nullable": true
+          },
+          "signatureName": {
+            "type": "string",
+            "nullable": true
+          },
+          "signatureRole": {
+            "type": "string",
+            "nullable": true
+          },
+          "signatureClosing": {
+            "type": "string",
+            "nullable": true
+          },
+          "margins": {
+            "$ref": "#/components/schemas/MarginsDto"
+          },
+          "version": {
+            "type": "integer",
+            "format": "int32"
+          }
+        },
+        "additionalProperties": false
+      },
+      "OrgTemplateVersionDto": {
+        "type": "object",
+        "properties": {
+          "version": {
+            "type": "integer",
+            "format": "int32"
+          },
+          "publishedAt": {
+            "type": "string",
+            "nullable": true
+          },
+          "template": {
+            "$ref": "#/components/schemas/OrgTemplateDto"
+          }
+        },
+        "additionalProperties": false
+      },
       "ParagraphDto": {
         "type": "object",
         "properties": {
@@ -1626,6 +1973,20 @@
         },
         "additionalProperties": { }
       },
+      "PublishOrgTemplateResponse": {
+        "type": "object",
+        "properties": {
+          "version": {
+            "type": "integer",
+            "format": "int32"
+          },
+          "affectedUnsentBriefs": {
+            "type": "integer",
+            "format": "int32"
+          }
+        },
+        "additionalProperties": false
+      },
       "ReferentieResponse": {
         "type": "object",
         "properties": {
@@ -1769,6 +2130,33 @@
         },
         "additionalProperties": false
       },
+      "SaveOrgTemplateRequest": {
+        "type": "object",
+        "properties": {
+          "draft": {
+            "$ref": "#/components/schemas/OrgTemplateDto"
+          }
+        },
+        "additionalProperties": false
+      },
+      "SubOrgSummaryDto": {
+        "type": "object",
+        "properties": {
+          "subOrgId": {
+            "type": "string",
+            "nullable": true
+          },
+          "orgName": {
+            "type": "string",
+            "nullable": true
+          },
+          "publishedVersion": {
+            "type": "integer",
+            "format": "int32"
+          }
+        },
+        "additionalProperties": false
+      },
       "SubmitApplicationRequest": {
         "type": "object",
         "properties": {

backend/tests/BigRegister.Tests/OrgTemplateEndpointTests.cs

@@ -0,0 +1,180 @@
+using System.Net;
+using System.Net.Http.Json;
+using BigRegister.Api.Contracts;
+using BigRegister.Api.Data;
+using Microsoft.AspNetCore.Mvc.Testing;
+
+namespace BigRegister.Tests;
+
+/// <summary>
+/// Org templates (WP-23): admin-only endpoints, draft→publish versioning, and the
+/// sent-brief immutability invariant (pin at send, republish touches unsent only).
+/// Same reset discipline as BriefEndpointTests — the stores are process-global.
+/// </summary>
+public class OrgTemplateEndpointTests(TestWebApplicationFactory factory) : IClassFixture<TestWebApplicationFactory>
+{
+  private const string Registers = OrgTemplateSeed.Registers;
+  private readonly HttpClient _client = factory.CreateClient();
+
+  private HttpRequestMessage Req(HttpMethod method, string path, string? role = null, object? body = null)
+  {
+    var req = new HttpRequestMessage(method, path);
+    if (role is not null) req.Headers.Add("X-Role", role);
+    if (body is not null) req.Content = JsonContent.Create(body);
+    return req;
+  }
+
+  private async Task<OrgTemplateAdminViewDto> AdminView(string subOrgId = Registers)
+  {
+    var res = await _client.SendAsync(Req(HttpMethod.Get, $"/api/v1/admin/org-template/{subOrgId}", role: "admin"));
+    res.EnsureSuccessStatusCode();
+    return (await res.Content.ReadFromJsonAsync<OrgTemplateAdminViewDto>())!;
+  }
+
+  private static void ResetStores()
+  {
+    OrgTemplateStore.Reset();
+    BriefStore.Reset();
+  }
+
+  [Fact]
+  public async Task Admin_endpoints_are_admin_only()
+  {
+    ResetStores();
+    // drafter (no header) and approver both bounce off every admin endpoint.
+    Assert.Equal(HttpStatusCode.Forbidden,
+        (await _client.GetAsync("/api/v1/admin/org-templates")).StatusCode);
+    Assert.Equal(HttpStatusCode.Forbidden,
+        (await _client.SendAsync(Req(HttpMethod.Post, $"/api/v1/admin/org-template/{Registers}/publish", role: "approver"))).StatusCode);
+
+    var res = await _client.SendAsync(Req(HttpMethod.Get, "/api/v1/admin/org-templates", role: "admin"));
+    res.EnsureSuccessStatusCode();
+    var list = await res.Content.ReadFromJsonAsync<List<SubOrgSummaryDto>>();
+    Assert.Equal(new[] { Registers, OrgTemplateSeed.Vakbekwaamheid }, list!.Select(s => s.SubOrgId));
+    Assert.All(list!, s => Assert.Equal(1, s.PublishedVersion));
+  }
+
+  [Fact]
+  public async Task Publish_increments_version_appends_history_and_counts_unsent_briefs()
+  {
+    ResetStores();
+    // One unsent brief for this sub-org (GetOrCreate on first read).
+    await _client.GetAsync("/api/v1/brief");
+
+    var res = await _client.SendAsync(Req(HttpMethod.Post, $"/api/v1/admin/org-template/{Registers}/publish", role: "admin"));
+    res.EnsureSuccessStatusCode();
+    var published = await res.Content.ReadFromJsonAsync<PublishOrgTemplateResponse>();
+    Assert.Equal(2, published!.Version);
+    Assert.Equal(1, published.AffectedUnsentBriefs);
+
+    var view = await AdminView();
+    Assert.Equal(2, view.PublishedVersion);
+    Assert.Equal(new[] { 1, 2 }, view.History.Select(h => h.Version));
+    Assert.Equal(1, view.UnsentBriefs);
+  }
+
+  [Fact]
+  public async Task Save_draft_validates_margins_and_round_trips()
+  {
+    ResetStores();
+    var draft = (await AdminView()).Draft;
+
+    var invalid = draft with { Margins = new MarginsDto(5, 20, 20, 25) };
+    Assert.Equal(HttpStatusCode.BadRequest, (await _client.SendAsync(
+        Req(HttpMethod.Put, $"/api/v1/admin/org-template/{Registers}", role: "admin",
+            body: new SaveOrgTemplateRequest(invalid)))).StatusCode);
+
+    var valid = draft with { OrgName = "BIG-register (nieuw)", Margins = new MarginsDto(30, 20, 20, 25) };
+    var res = await _client.SendAsync(Req(HttpMethod.Put, $"/api/v1/admin/org-template/{Registers}", role: "admin",
+        body: new SaveOrgTemplateRequest(valid)));
+    res.EnsureSuccessStatusCode();
+    var view = await res.Content.ReadFromJsonAsync<OrgTemplateAdminViewDto>();
+    Assert.Equal("BIG-register (nieuw)", view!.Draft.OrgName);
+    Assert.Equal(30, view.Draft.Margins.TopMm);
+    // Saving a draft publishes nothing.
+    Assert.Equal(1, view.PublishedVersion);
+  }
+
+  [Fact]
+  public async Task Rollback_copies_an_old_version_into_the_draft_without_rewriting_history()
+  {
+    ResetStores();
+    var draft = (await AdminView()).Draft;
+    await _client.SendAsync(Req(HttpMethod.Put, $"/api/v1/admin/org-template/{Registers}", role: "admin",
+        body: new SaveOrgTemplateRequest(draft with { OrgName = "Versie twee" })));
+    await _client.SendAsync(Req(HttpMethod.Post, $"/api/v1/admin/org-template/{Registers}/publish", role: "admin"));
+
+    var res = await _client.SendAsync(Req(HttpMethod.Post, $"/api/v1/admin/org-template/{Registers}/rollback/1", role: "admin"));
+    res.EnsureSuccessStatusCode();
+    var view = await res.Content.ReadFromJsonAsync<OrgTemplateAdminViewDto>();
+    Assert.Equal("BIG-register", view!.Draft.OrgName); // v1 content back in the draft
+    Assert.Equal(2, view.PublishedVersion);            // still live: v2 (rollback ≠ publish)
+    Assert.Equal(new[] { 1, 2 }, view.History.Select(h => h.Version)); // append-only, untouched
+
+    Assert.Equal(HttpStatusCode.NotFound, (await _client.SendAsync(
+        Req(HttpMethod.Post, $"/api/v1/admin/org-template/{Registers}/rollback/99", role: "admin"))).StatusCode);
+  }
+
+  [Fact]
+  public async Task Sent_brief_keeps_its_pinned_template_while_an_unsent_brief_follows_a_republish()
+  {
+    ResetStores();
+    // Walk one brief to sent under template v1.
+    var brief = (await _client.GetFromJsonAsync<BriefViewDto>("/api/v1/brief"))!.Brief;
+    var filled = brief.Sections
+        .Select(s => new LetterSectionDto(s.SectionKey, s.Title, s.Required,
+            s.Required && s.Blocks.Count == 0
+                ? new[] { new LetterBlockDto("freeText", "b1", new RichTextBlockDto(new[] { new ParagraphDto(new[] { new RichTextNodeDto("text", Text: "inhoud") }) })) }
+                : s.Blocks))
+        .ToList();
+    await _client.PutAsJsonAsync("/api/v1/brief", new SaveBriefRequest(filled));
+    await _client.SendAsync(Req(HttpMethod.Post, "/api/v1/brief/submit"));
+    await _client.SendAsync(Req(HttpMethod.Post, "/api/v1/brief/approve", role: "approver"));
+    var sent = await (await _client.SendAsync(Req(HttpMethod.Post, "/api/v1/brief/send"))).Content.ReadFromJsonAsync<BriefViewDto>();
+    Assert.Equal(1, sent!.OrgTemplate.Version);
+
+    // Republish with a new org name.
+    var draft = (await AdminView()).Draft;
+    await _client.SendAsync(Req(HttpMethod.Put, $"/api/v1/admin/org-template/{Registers}", role: "admin",
+        body: new SaveOrgTemplateRequest(draft with { OrgName = "Hertitelde organisatie" })));
+    await _client.SendAsync(Req(HttpMethod.Post, $"/api/v1/admin/org-template/{Registers}/publish", role: "admin"));
+
+    // The sent brief still renders v1 with the old name (immutable)...
+    var sentView = await _client.GetFromJsonAsync<BriefViewDto>("/api/v1/brief");
+    Assert.Equal(1, sentView!.OrgTemplate.Version);
+    Assert.Equal("BIG-register", sentView.OrgTemplate.OrgName);
+
+    // ...while a fresh (unsent) brief follows the new published version.
+    var freshView = await (await _client.SendAsync(Req(HttpMethod.Post, "/api/v1/brief/reset"))).Content.ReadFromJsonAsync<BriefViewDto>();
+    Assert.Equal(2, freshView!.OrgTemplate.Version);
+    Assert.Equal("Hertitelde organisatie", freshView.OrgTemplate.OrgName);
+  }
+
+  [Fact]
+  public async Task Me_returns_the_orgtemplate_capability_for_admin()
+  {
+    var res = await _client.SendAsync(Req(HttpMethod.Get, "/api/v1/me", role: "admin"));
+    var me = await res.Content.ReadFromJsonAsync<MeDto>();
+    Assert.Equal(new[] { "orgtemplate:edit" }, me!.Capabilities);
+  }
+
+  [Fact]
+  public async Task Admin_cannot_slip_into_the_brief_review_flow()
+  {
+    ResetStores();
+    var brief = (await _client.GetFromJsonAsync<BriefViewDto>("/api/v1/brief"))!.Brief;
+    var filled = brief.Sections
+        .Select(s => new LetterSectionDto(s.SectionKey, s.Title, s.Required,
+            s.Required && s.Blocks.Count == 0
+                ? new[] { new LetterBlockDto("freeText", "b1", new RichTextBlockDto(new[] { new ParagraphDto(new[] { new RichTextNodeDto("text", Text: "inhoud") }) })) }
+                : s.Blocks))
+        .ToList();
+    await _client.PutAsJsonAsync("/api/v1/brief", new SaveBriefRequest(filled));
+    await _client.SendAsync(Req(HttpMethod.Post, "/api/v1/brief/submit"));
+
+    // Approve/reject require the Approver role explicitly — admin passes SoD
+    // (different identity) but must still be Forbidden.
+    Assert.Equal(HttpStatusCode.Forbidden,
+        (await _client.SendAsync(Req(HttpMethod.Post, "/api/v1/brief/approve", role: "admin"))).StatusCode);
+  }
+}

docs/backlog/README.md

@@ -30,8 +30,9 @@ From WP-01 onward, additionally:
 npm run test-storybook:ci
 ```
 
-Backend stays untouched throughout (frontend-only backlog); `cd backend && dotnet test`
+Phases 0–5 were frontend-only; **phase 6 (Brief v2) touches `backend/`** — for those
-only needs re-running if a WP unexpectedly touches `backend/`.
+WPs `cd backend && dotnet test` is part of GREEN, and any wire change ends with
+`npm run gen:api` leaving no drift.
 
 From WP-19 onward, `npm run e2e` is part of CI (its own job) but NOT part of the local
 GREEN one-liner above — it needs the real backend + `npm start` already running (see
@@ -63,9 +64,15 @@ for its existing violations, so every WP ends green.
 | [WP-17](WP-17-app-a11y.md)              | App-level a11y: route focus, template lint, WCAG checklist   | 4 · a11y                    | done   |
 | [WP-18](WP-18-abac-capability-spine.md) | ABAC capability spine (Principal + capabilities, phase P1)   | 5 · productie-volwassenheid | done   |
 | [WP-19](WP-19-e2e-smoke.md)             | Playwright e2e smoke                                         | 5 · productie-volwassenheid | done   |
-| [WP-20](WP-20-second-locale.md)         | Second locale proof                                          | 5 · productie-volwassenheid | todo   |
+| [WP-20](WP-20-second-locale.md)         | Second locale proof                                          | 5 · productie-volwassenheid | done   |
-| [WP-21](WP-21-resilience-seams.md)      | Resilience seams (correlation-id, idempotency, retry)        | 5 · productie-volwassenheid | todo   |
+| [WP-21](WP-21-resilience-seams.md)      | Resilience seams (correlation-id, idempotency, retry)        | 5 · productie-volwassenheid | done   |
-| [WP-22](WP-22-durable-persistence.md)   | Durable persistence (optional tier)                          | 5 · productie-volwassenheid | todo   |
+| [WP-22](WP-22-durable-persistence.md)   | Durable persistence (optional tier)                          | 5 · productie-volwassenheid | done   |
+| [WP-23](WP-23-org-template-backend.md)  | Org-template backend + admin role                            | 6 · Brief v2                | done   |
+| [WP-24](WP-24-letter-canvas.md)         | Letter canvas (edit on the letter)                           | 6 · Brief v2                | done   |
+| [WP-25](WP-25-letter-preview-html.md)   | Server-rendered letter preview (HTML; PDF deferred)          | 6 · Brief v2                | todo   |
+| [WP-26](WP-26-org-template-editor.md)   | Admin org-template editor                                    | 6 · Brief v2                | todo   |
+| [WP-27](WP-27-brief-ux-layer.md)        | Brief UX layer (undo/redo, standaardbrief, diff)             | 6 · Brief v2                | todo   |
+| [WP-28](WP-28-brief-v2-demo-polish.md)  | Brief v2 demo polish (scenarios, e2e, docs)                  | 6 · Brief v2                | todo   |
 
 Sequencing dependencies (stated in the WPs too): 01 before 10–15 (axe covers story churn);
 03/04 before 05–09 (boundaries stop new violations during refactors); 06 before 07 (typed
@@ -75,6 +82,9 @@ are independent of each other and of phases 1–4 — pick any order; **18 is th
 first pick** (it's the headline gap: no authorization spine exists yet, and it closes the
 FE-computed-authz anti-pattern in `brief.store.ts`). 22 is explicitly lower priority — the
 current in-memory persistence is a documented, defensible POC choice, not a bug.
+Phase 6 (Brief v2, the "Brief opstellen v2" PRD) is strictly ordered
+23 → 24 → 25 → 26 → 27 → 28: 24 needs 23's `orgTemplate` on the wire, 25 needs 24's
+`letter.css` contract, 26 needs 23's endpoints + 24's canvas, 27/28 polish on top.
 
 ## WP template
 

docs/backlog/WP-20-second-locale.md

@@ -1,6 +1,6 @@
 # WP-20 — Second locale proof
 
-Status: done (pending commit)
+Status: done (e276629)
 Phase: 5 — productie-volwassenheid
 
 ## Why

docs/backlog/WP-21-resilience-seams.md

@@ -1,6 +1,6 @@
 # WP-21 — Resilience seams (correlation-id, idempotency, retry)
 
-Status: done (pending commit)
+Status: done (40dbcb2)
 Phase: 5 — productie-volwassenheid
 
 ## Why

docs/backlog/WP-22-durable-persistence.md

@@ -1,6 +1,6 @@
 # WP-22 — Durable persistence (optional tier)
 
-Status: done (pending commit)
+Status: done (556f2f4)
 Phase: 5 — productie-volwassenheid
 
 ## Why

docs/backlog/WP-23-org-template-backend.md

@@ -0,0 +1,114 @@
+# WP-23 — Org-template backend + admin role
+
+Status: done
+Phase: 6 — Brief v2 (edit-on-the-letter, org templates, server-rendered preview)
+
+## Why
+
+PRD "Brief opstellen v2" splits a rendered letter over two orthogonal template axes:
+the **case-type template** (section structure + placeholders — exists, unchanged) and
+a new **organization template** (appearance/identity per sub-organization: letterhead,
+footer, signature, margins). This WP builds the second axis server-side plus the
+`admin` role that will edit it (WP-26). Everything downstream (canvas WP-24, preview
+WP-25, editor WP-26) reads what this WP serves.
+
+## Read first
+
+- `docs/prd` — the Brief v2 PRD §2a/§3 (two axes, OrgTemplate model, invariants)
+- `backend/src/BigRegister.Api/Data/BriefStore.cs` (store idiom + `BriefSeed`)
+- `backend/src/BigRegister.Api/Domain/Authorization/Authz.cs` (emit+enforce single source)
+- `backend/src/BigRegister.Api/Data/AppDbContext.cs` (JSON-column precedent, WP-22)
+- `docs/backlog/WP-18-abac-capability-spine.md` (how the capability spine works)
+
+## Decisions (pre-made, don't relitigate)
+
+- **No case model, no sub-org auth scoping.** `GET /brief` stays; the brief just
+  gains a `SubOrgId`. Two seeded sub-orgs (`cibg-registers`, `cibg-vakbekwaamheid`)
+  exist purely so the admin editor can demo isolation.
+- **One row per sub-org**, versions as a JSON history column
+  (`OrgTemplateEntity { SubOrgId PK, Draft json, PublishedVersion, History json }`) —
+  the WP-22 JSON-column precedent; no extra tables. Publish = append draft snapshot
+  to history + version++. Rollback = copy `History[v]` into `Draft` (history stays
+  append-only; admin republishes).
+- **Sent letters are immutable**: `Send` pins `SentOrgTemplateVersion`; a sent
+  brief's `BriefViewDto.orgTemplate` resolves from history, never from the current
+  published version. Unsent briefs always follow the current published version —
+  that is the point of the admin editor.
+- **Admin = third `X-Role` value** (`PrincipalRole.Admin`), capability
+  `orgtemplate:edit` via `GET /me`. Approve/reject gain an explicit
+  `Role == Approver` condition so the new role cannot slip through the SoD-only
+  check. The existing `X-Admin` document-deletion seam stays untouched.
+- **Trimmed model** (PRD §3 minus): no signature image asset, no structured address
+  objects, no per-template fonts. Return address / footer contact are multiline
+  strings. Margins are 4 bounded ints (mm, 10–50) — server-validated.
+- **Logo = existing upload machinery**: seed an `org-logo` category (png/jpeg, 1 MB)
+  under a `org-template` wizardId; the template stores only `logoDocumentId`.
+- Seed values come from the sample artifact `voorbeeldbrief-inschrijving.pdf`
+  (A. de Vries / Hoofd Registratie / Postbus 00000 / info@voorbeeld.example — all fictitious).
+
+## Files
+
+- `backend/src/BigRegister.Api/Contracts/Dtos.cs` — `MarginsDto`, `OrgTemplateDto`,
+  `OrgTemplateVersionDto`, `OrgTemplateAdminViewDto`, `SaveOrgTemplateRequest`,
+  `PublishOrgTemplateResponse`, `SubOrgSummaryDto`; `BriefViewDto` + `OrgTemplate`.
+- `backend/src/BigRegister.Api/Data/OrgTemplateStore.cs` (new) — entity + store + seed.
+- `backend/src/BigRegister.Api/Data/AppDbContext.cs` — OrgTemplates DbSet + JSON converters.
+- `backend/src/BigRegister.Api/Data/Migrations/*` — new migration.
+- `backend/src/BigRegister.Api/Data/BriefStore.cs` — `SubOrgId`, `SentOrgTemplateVersion`, pin at `Send`.
+- `backend/src/BigRegister.Api/Domain/Authorization/Authz.cs` — `Admin` role, capability, gate.
+- `backend/src/BigRegister.Api/Domain/Documents/DocumentCategory.cs` — `org-logo` category.
+- `backend/src/BigRegister.Api/Program.cs` — 5 admin endpoints, `ToView` orgTemplate resolution.
+- `backend/tests/BigRegister.Tests/OrgTemplateEndpointTests.cs` (new).
+- Regenerated: `backend/swagger.json`, `src/app/shared/infrastructure/api-client.ts`.
+- FE seam only: `src/app/shared/domain/role.ts`, `shared/domain/capability.ts`,
+  `shared/infrastructure/role.ts`, `shared/infrastructure/role.interceptor.ts`.
+
+## Steps
+
+1. DTOs (above).
+2. `OrgTemplateEntity` + `OrgTemplateStore` (list/get/saveDraft/publish/rollback/
+   published/versionPayload; margin validation; seed-on-first-access, 2 sub-orgs,
+   draft == published v1) + AppDbContext mapping + migration.
+3. `PrincipalRole.Admin`; `ResolvePrincipal` reads `admin`; `RoleCapabilities(Admin)`
+   → `orgtemplate:edit`; approve/reject checks require `Approver` explicitly.
+4. Endpoints: `GET /admin/org-templates`, `GET|PUT /admin/org-template/{subOrgId}`,
+   `POST …/publish` (returns impact count = unsent briefs of that sub-org),
+   `POST …/rollback/{version}`. All 403 for non-admin via `Authz`.
+5. `BriefEntity.SubOrgId` (seed `cibg-registers`) + `SentOrgTemplateVersion`; `Send`
+   pins; `ToView` resolves published-vs-pinned into `BriefViewDto.orgTemplate`.
+6. Seed `org-logo` upload category.
+7. `npm run gen:api`.
+8. FE: widen `Role`/`Capability` unions, `currentRole()`, interceptor URL filter
+   (nothing consumes them yet — WP-24/26 do).
+
+## Acceptance criteria
+
+- [x] Publish increments `publishedVersion` and appends to history; rollback copies an
+      old version into the draft without rewriting history.
+- [x] Every admin endpoint returns 403 for drafter/approver, 200 for `X-Role: admin`.
+- [x] A sent brief keeps its pinned org-template version after a republish; an unsent
+      brief follows the new published version (both asserted in one test).
+- [x] Publish impact count = number of unsent briefs of that sub-org.
+- [x] `PUT` with out-of-bounds margins → 400.
+- [x] `GET /brief` carries `orgTemplate`; existing brief tests stay green.
+- [x] `GET /me` with `X-Role: admin` → `["orgtemplate:edit"]`.
+- [x] Full GREEN (FE untouched functionally, but lint/test/build/storybook all pass).
+
+## Verification
+
+`cd backend && dotnet test`; GREEN one-liner; curl smoke: admin list/save/publish
+(200) vs drafter (403); sent-brief pin walk-through per acceptance.
+
+## Out of scope
+
+The canvas (WP-24), HTML preview endpoints + archive-at-send (WP-25), the admin UI
+(WP-26). Template approval chains (draft→publish is enough for the POC; flagged as
+an open question in the PRD). Sub-org-scoped brief authorization.
+
+## Risks
+
+`BriefViewDto` gains a field — additive, but the FE `parseBriefView` boundary and
+generated client must be regenerated in the same WP to keep the drift check green.
+Adding `PrincipalRole.Admin` touches the approve/reject SoD path: the explicit
+`Role == Approver` condition must preserve today's Forbidden-before-Conflict order
+(existing tests prove it).

docs/backlog/WP-24-letter-canvas.md

@@ -0,0 +1,99 @@
+# WP-24 — Letter canvas (edit on the letter)
+
+Status: done
+Phase: 6 — Brief v2 (edit-on-the-letter, org templates, server-rendered preview)
+
+## Why
+
+The drafter should compose **on the letter** — letterhead above, footer/signature
+below, content blocks edited in place — instead of in an abstract form next to a
+separate preview. PRD Brief v2 §4. This is a **presentation rebuild only**: the
+domain model, `brief.machine.ts`, and every `BriefMsg` stay byte-identical.
+
+## Read first
+
+- PRD Brief v2 §2b (fidelity note), §4, §10; the sample `voorbeeldbrief-inschrijving.pdf`
+- `src/app/brief/ui/letter-composer/letter-composer.component.ts` (the `canEdit` pivot)
+- `src/app/brief/ui/letter-preview/letter-preview.component.ts` (rendering that migrates in)
+- `docs/backlog/WP-23-org-template-backend.md` (the `orgTemplate` on `BriefViewDto`)
+
+## Decisions (pre-made, don't relitigate)
+
+- **One stylesheet is the FE⇄BE rendering contract**: `public/letter.css` — class
+  vocabulary `.letter`, `.letter__letterhead`, `.letter__body`, `.letter__signature`,
+  `.letter__footer`, `.letter__page-break`; margins as `--letter-margin-*` custom
+  props; `@page`/print rules. Loaded via `<link>` in `index.html` (app + Storybook).
+  WP-25's backend renderer inlines the same file; its parity test is the fence.
+- **`LetterCanvasComponent`** (new organism, `Domein/Brief/Letter Canvas`) with
+  `editableRegions: 'content' | 'template' | 'none'` — one component serves drafter
+  composing, approver review (and in WP-26, the admin editor). Letter typography on
+  the canvas is the letter's, not the portal UI's — but still token-bridged.
+- `'content'` mode hosts the **existing** `letter-section`/`letter-block` components
+  unchanged; letterhead/footer/signature render read-only with a subtle tint and a
+  first-use caption ("komt uit de huisstijl van de organisatie").
+- `'none'` mode absorbs `letter-preview`'s rendering (paragraph grouping, placeholder
+  chips, sample-values toggle); **`ui/letter-preview/` is then deleted** — the PRD
+  explicitly supersedes it; no third rendering is maintained.
+- **Page-break indicator is approximate by design**: a dashed line per A4-content
+  interval with the caption "±pagina-einde — afdrukvoorbeeld is leidend" (PRD §2b
+  honesty requirement).
+- `brief.machine.ts` and `BriefMsg` are untouched — `git diff` must prove it.
+
+## Files
+
+- `public/letter.css` (new), `src/index.html` (link)
+- `src/app/brief/domain/org-template.ts` (new, pure) — `OrgTemplate` type
+- `src/app/brief/infrastructure/brief.adapter.ts` (+spec) — parse `orgTemplate`
+- `src/app/brief/ui/letter-canvas/*` (new: component + stories)
+- `src/app/brief/ui/letter-composer/letter-composer.component.ts` (pivot swap) + stories
+- `src/app/brief/ui/brief.page.ts` (pass orgTemplate through)
+- delete `src/app/brief/ui/letter-preview/*`
+
+## Steps
+
+1. `letter.css` from the sample PDF's geometry (A4 proportions, letterhead, address
+   window + reference block, footer rule, signature).
+2. `OrgTemplate` domain type + `parseOrgTemplate` boundary in the adapter (+spec).
+3. Canvas organism: three modes, zoom input, page-break indicator.
+4. Migrate `letter-preview` rendering into `'none'` mode; delete the component,
+   fold its stories into the canvas stories.
+5. Swap the composer's `@if (canEdit())` pivot for
+   `<app-letter-canvas [editableRegions]="canEdit() ? 'content' : 'none'">`.
+6. Stories: three modes + zoom + page-break, all axe-gated.
+
+## Acceptance criteria
+
+- [x] Drafter edits blocks in place on the letter surface; passage picker and
+      diagnostics click-to-locate still work on the canvas.
+- [x] Approver sees the identical surface read-only with the action bar.
+- [x] Letterhead/footer/signature come from `orgTemplate` and are visibly non-editable.
+- [x] `git diff` shows zero changes in `brief.machine.ts` / `brief.ts` Msg surface.
+- [x] `letter-preview` is gone; no story regression (`test-storybook:ci` green).
+- [x] Full GREEN + e2e smoke.
+
+Field notes (landed alongside): the CIBG huisstijl styles bare `<header>`/`<footer>`
+elements (robijn background), so the canvas regions are `<div>`s — the letter surface
+must stay letter.css-only. The passage picker's checkboxes now get unique
+`checkboxId`s (all previously resolved to `id="undefined"`, so labels toggled only
+the first box — multi-select was broken) and an opaque background; `.letter__body`
+stacks above the page-break marks so the dashed line never draws through content,
+while the "±pagina-einde" caption floats above everything for legibility.
+
+## Verification
+
+GREEN one-liner; `npm run e2e` (brief flow); manual: `?role=drafter` compose on
+canvas, `?role=approver` review; `?scenario=slow|error` still degrade gracefully
+through `<app-async>`.
+
+## Out of scope
+
+Server-rendered preview + `[NOG IN TE VULLEN]` resolution (WP-25); admin `'template'`
+mode wiring beyond the input existing (WP-26 gives it a consumer); zoom controls
+polish + standaardbrief + diff badges (WP-27).
+
+## Risks
+
+The canvas duplicates the letter markup that WP-25's backend renderer will emit —
+acceptable *only* because `letter.css` is shared and WP-25 adds the class-parity
+test; until WP-25 lands, the canvas is the sole consumer, so no drift is possible.
+Deleting `letter-preview` breaks any deep import of it — repo-wide grep before delete.

docs/backlog/WP-25-letter-preview-html.md

@@ -0,0 +1,90 @@
+# WP-25 — Server-rendered letter preview (HTML; PDF seam deferred)
+
+Status: todo
+Phase: 6 — Brief v2 (edit-on-the-letter, org templates, server-rendered preview)
+
+## Why
+
+"What you compose is what is sent" needs a server-side rendering of the letter —
+placeholders resolved, org template applied — from the same CSS contract the canvas
+uses (PRD §2b: one rendering, used twice). The preview is the artifact: at send, the
+same composition is archived with the brief, making sent letters immutable.
+
+## Read first
+
+- PRD Brief v2 §2b, §8; `docs/backlog/WP-24-letter-canvas.md` (the `letter.css` contract)
+- `backend/src/BigRegister.Api/Program.cs` — upload `content` endpoint (binary house
+  pattern: `.ExcludeFromDescription()` + hand-written FE fetch)
+- `src/app/shared/upload/upload.adapter.ts` (hand-written transport precedent)
+
+## Decisions (pre-made, don't relitigate)
+
+- **HTML, not PDF** (user decision at plan review): no Microsoft.Playwright/Chromium
+  dependency in the POC. `GET /api/v1/brief/preview` returns `text/html` — the fully
+  composed, print-ready letter (`@page` CSS; browser print-to-PDF is the manual
+  affordance). The endpoint is the seam where a headless-Chromium PDF render slots
+  in later; mark it `// ponytail: HTML today, Chromium PDF behind this same route if
+  the POC ever needs real PDF bytes`.
+- **`LetterHtml.Render(brief, orgTemplate)`** is a pure static composer: mirrors the
+  canvas class vocabulary exactly, inlines `public/letter.css` from disk, inlines the
+  logo bytes as a data-URI. Placeholders: auto-resolvable keys resolve from
+  seed/case data; unresolved manual keys render as `[NOG IN TE VULLEN: label]`
+  (PRD §8) — preview is allowed with errors, only send blocks on them.
+- **Parity is tested, not hoped for**: a golden-file test snapshots the composed
+  HTML; a second test asserts every `letter`-prefixed class in the golden HTML
+  exists in `letter.css`. `dotnet test` never launches a browser.
+- **Archive at send**: `Send` stores the composed HTML in `BriefEntity.ArchivedHtml`
+  (SQLite text column) alongside the WP-23 version pin; the preview endpoint serves
+  the archive when status is `sent`, so a republish never changes a sent letter.
+- **Two endpoints, both excluded from OpenAPI** (JSON-only generated client stays
+  clean): `GET /brief/preview` and `GET /admin/org-template/{subOrgId}/preview`
+  (proefbrief: draft template + a fixture brief). FE consumes them via a small
+  hand-written fetch (needs the `X-Role` header) → blob → object URL in a new tab.
+- Watermark: previews of unsent letters carry a `VOORBEELD` watermark (CSS), the
+  archived/sent rendering never does — the PRD's open question resolved the simple way.
+
+## Files
+
+- `backend/src/BigRegister.Api/Domain/Letters/LetterHtml.cs` (new)
+- `backend/src/BigRegister.Api/Data/BriefStore.cs` — `ArchivedHtml` + archive at send (+migration)
+- `backend/src/BigRegister.Api/Program.cs` — 2 preview endpoints
+- `backend/tests/BigRegister.Tests/LetterHtmlTests.cs` (new) + `LetterHtml.golden.html`
+- `src/app/brief/infrastructure/letter-preview.adapter.ts` (new, fetch → `Result<string, Blob>`)
+- `src/app/brief/application/brief.store.ts` — `previewLetter()` command
+- `src/app/brief/ui/letter-composer/*` — "Voorbeeld" button
+
+## Steps
+
+1. `LetterHtml.Render` + placeholder resolution + data-URI logo + watermark flag.
+2. Golden-file + class-parity tests.
+3. Endpoints (serve archive when sent; proefbrief renders the draft template).
+4. Archive-at-send in `BriefStore.Send` (+ migration for `ArchivedHtml`).
+5. FE adapter + store command + button (explicit action — no live re-render; PRD §8).
+
+## Acceptance criteria
+
+- [ ] Preview opens the composed print-ready letter in a new tab; browser print
+      shows correct margins via `@page`.
+- [ ] Unresolved manual placeholders render `[NOG IN TE VULLEN: …]`; preview works
+      despite lint errors (only send blocks).
+- [ ] A sent brief serves its archived HTML unchanged after an org-template republish.
+- [ ] Golden + parity tests green without any browser installed.
+- [ ] `swagger.json` unchanged by the two endpoints (drift check green).
+
+## Verification
+
+`cd backend && dotnet test`; GREEN one-liner; manual: compose → preview → print
+dialog; send → republish template → preview still the archived rendering.
+
+## Out of scope
+
+Real PDF bytes / headless Chromium (the deliberate deferral — the endpoint is the
+seam). Pixel-parity testing (the shared CSS + class-parity test is the fence).
+Pagination fidelity beyond the browser's own print engine.
+
+## Risks
+
+`LetterHtml` reads `public/letter.css` from disk — path must resolve for `dotnet run`,
+tests, and docker (bind mount/copy); fail loudly with a clear error if missing.
+The golden file will churn whenever the letter structure changes — that is its job;
+update it deliberately, never blindly.

docs/backlog/WP-26-org-template-editor.md

@@ -0,0 +1,90 @@
+# WP-26 — Admin org-template editor
+
+Status: todo
+Phase: 6 — Brief v2 (edit-on-the-letter, org templates, server-rendered preview)
+
+## Why
+
+The org template (WP-23) needs its editor: an admin edits, per sub-organization, the
+letter's appearance **in place on the same canvas** the drafter composes on — the
+mirror image (`editableRegions='template'`: letterhead/footer/signature editable,
+content a read-only sample). PRD Brief v2 §5, §7h.
+
+## Read first
+
+- PRD Brief v2 §5, §7h; `docs/backlog/WP-23/24/25` (endpoints, canvas, proefbrief)
+- `src/app/shared/application/access.store.ts` (`can('orgtemplate:edit')`)
+- `.claude/skills/form-machine` — the house form idiom this editor follows
+- `src/app/shared/ui/upload/single-upload` (logo upload reuse)
+
+## Decisions (pre-made, don't relitigate)
+
+- **Lives in the `brief` context** (route `/brief/huisstijl`, lazy) — same bounded
+  capability, no new context. Gated by `AccessStore.can('orgtemplate:edit')` with a
+  denial alert (deny-by-default); no new route guard.
+- **House form-machine idiom**: `org-template.machine.ts`
+  (`OrgTemplateState`/`OrgTemplateMsg`, pure `reduce` + spec) — draft fields are form
+  state, not brief state. Store (`org-template.store.ts`, root singleton) does
+  debounced draft save (mirror `BriefStore.scheduleSave`), publish, rollback.
+- **Publish shows impact first**: confirmation displays the WP-23 impact count
+  ("Dit raakt N nog niet verzonden brieven") before the POST.
+- **Version history is a list, rollback copies into draft** (WP-23 semantics) —
+  no side-by-side rendered diff (deferred; field-level history list is enough here).
+- **Logo upload reuses `single-upload`** against the `org-logo` category; the canvas
+  shows `<img src="/api/v1/uploads/{id}/content">`.
+- **Proefbrief** = the WP-25 admin preview endpoint; just a button.
+- Margins are bounded number inputs (server re-validates, WP-23).
+
+## Files
+
+- `src/app/brief/domain/org-template.machine.ts` (+spec)
+- `src/app/brief/application/org-template.store.ts`
+- `src/app/brief/infrastructure/org-template.adapter.ts` (+spec, `parseOrgTemplateAdminView`)
+- `src/app/brief/ui/org-template-editor/*` (organism + stories)
+- `src/app/brief/ui/org-template.page.ts`
+- `src/app/app.routes.ts` (route `brief/huisstijl`)
+
+## Steps
+
+1. Machine (fields, `FieldEdited`/`MarginEdited`/`LogoSet`/`DraftLoaded`/save-publish
+   outcome Msgs) + spec.
+2. Adapter (generated client CRUD + parse boundary) + spec.
+3. Store: load (sub-org list + selected), debounced save, publish (impact confirm),
+   rollback.
+4. Editor UI: sub-org switcher, canvas in `'template'` mode with inline-editable
+   regions, margins inputs, logo upload, version history + rollback, proefbrief
+   button, publish bar showing live version + published-at.
+5. Route + capability gate + stories (axe).
+
+## Acceptance criteria
+
+- [ ] `?role=admin` can switch sub-orgs, edit all template fields in place on the
+      canvas, and see the canvas update live.
+- [ ] Draft saves are debounced; publish asks for confirmation showing the impact
+      count; after publish the drafter's canvas (WP-24) reflects it on reload.
+- [ ] Version history lists published versions (who is faked, when is real);
+      rollback copies an old version into the draft.
+- [ ] Non-admin on `/brief/huisstijl` sees the denial alert; API would 403 anyway.
+- [ ] Logo upload validates type/size client-side (existing `rejectReason`) and
+      renders on the canvas after upload.
+- [ ] Machine spec covers field edits, dirty tracking, publish/rollback outcomes.
+- [ ] Full GREEN.
+
+## Verification
+
+GREEN one-liner; manual walk: admin edits footer + margin → canvas live-updates →
+proefbrief shows draft → publish (impact count) → `?role=drafter` reload shows new
+appearance; second sub-org unaffected.
+
+## Out of scope
+
+Template approval chain (four-eyes on templates — PRD open question, out for POC).
+Rendered side-by-side version diff. Soft locks. New shared overlay/modal component —
+the publish confirmation uses the existing inline confirmation pattern, not a dialog.
+
+## Risks
+
+The editor is the first consumer of `editableRegions='template'` — WP-24 built the
+input but nothing exercised it; budget for canvas fixes here. Debounced draft save +
+publish can race — flush the draft save before publishing (same
+`clearTimeout`+`flushSave` discipline as `BriefStore.transition`).

docs/backlog/WP-27-brief-ux-layer.md

@@ -0,0 +1,93 @@
+# WP-27 — Brief UX layer (undo/redo, standaardbrief, search, diff badges)
+
+Status: todo
+Phase: 6 — Brief v2 (edit-on-the-letter, org templates, server-rendered preview)
+
+## Why
+
+PRD Brief v2 §7: the working-day features that make the composer pleasant daily.
+Several are nearly free **because** state is one immutable value — that's the
+teaching payload: undo/redo is a shell-side snapshot list, the rejection diff is a
+pure function over two values. Say so in code comments and stories.
+
+## Read first
+
+- PRD Brief v2 §7 (and the plan-review trim recorded below)
+- `src/app/brief/application/brief.store.ts` (autosave + `SaveState` already exist)
+- `src/app/brief/domain/brief.machine.ts` — the `Seed` Msg (undo/redo's restore path)
+
+## Decisions (pre-made, don't relitigate)
+
+- **Trim agreed at plan review.** IN: undo/redo, autosave retry affordance,
+  standaardbrief, passage search, canvas zoom controls, Ctrl+Z/Ctrl+Shift+Z,
+  block-level rejection-diff badges. OUT (deferred, one line each in Out of scope):
+  soft lock/takeover, case-context panel, 401 autosave grace, per-user usage counts,
+  shortcut-overlay dialog, inline character-level text diff.
+- **Undo/redo is shell state, not machine state**: `past`/`future: Brief[]` in
+  `BriefStore` (cap 50; push on `edit()`; clear `future` on a new edit); restore
+  dispatches the **existing `Seed` Msg** — zero machine changes — then `scheduleSave()`.
+- **Standaardbrief**: backend seeds `IsDefault` on 2–3 kern passages
+  (`LibraryPassageDto` gains the flag); one button, visible only while the kern
+  section is empty, dispatches the existing `PassagesInserted` with the default set —
+  one Msg, one undo step.
+- **Passage search is a client-side filter** in the picker (label + content match) —
+  the library is small; no server search, no usage tracking.
+- **Rejection diff**: pure `diffBlocks(before, after): BlockDiff[]` in
+  `domain/brief-diff.ts` (added/removed/changed by `blockId`); the "before" snapshot
+  is captured shell-side when the `Rejected` dispatch happens (POC limit: lost on
+  reload — comment it). Rendered as "gewijzigd sinds afwijzing" badges on the canvas;
+  the approver gets a "Toon wijzigingen" toggle on resubmission.
+- **Autosave retry**: `SaveState.Error` already exists; add the "Opnieuw proberen"
+  button that calls the existing flush path. No new state.
+
+## Files
+
+- `src/app/brief/application/brief.store.ts` (+spec: history bounds, clear-on-edit,
+  redo, rejection snapshot)
+- `src/app/brief/domain/brief-diff.ts` (new, +spec)
+- `backend/src/BigRegister.Api/Data/BriefStore.cs` (`IsDefault` seed) +
+  `Contracts/Dtos.cs` (`LibraryPassageDto`) + gen:api + adapter parse
+- `src/app/brief/ui/passage-picker/*` (search input)
+- `src/app/brief/ui/letter-canvas/*` (diff badges, standaardbrief button, zoom controls)
+- `src/app/brief/ui/brief.page.ts` (undo/redo buttons + keydown listener, retry button)
+
+## Steps
+
+1. `diffBlocks` + spec (added/removed/changed/unchanged; changed = same blockId,
+   different content).
+2. Store: history + undo/redo + rejection snapshot (+spec).
+3. Backend `IsDefault` + gen:api + parse.
+4. UI: standaardbrief button, search, zoom, badges, keyboard, retry.
+5. Stories for the new states (axe).
+
+## Acceptance criteria
+
+- [ ] Remove a block → Ctrl+Z restores it → Ctrl+Shift+Z re-removes; buttons mirror;
+      history capped at 50; a new edit clears redo; restore re-triggers autosave.
+- [ ] Empty kern + "Standaardbrief invoegen" → default passages inserted as one undo
+      step; button gone once kern is non-empty.
+- [ ] Search filters passages by label and content.
+- [ ] Reject → edit → resubmit: approver toggles "Toon wijzigingen", changed/added/
+      removed blocks are badged (block granularity).
+- [ ] Autosave failure shows "Niet opgeslagen — opnieuw proberen"; retry works;
+      content never lost locally.
+- [ ] Full GREEN.
+
+## Verification
+
+GREEN one-liner; store + diff specs; manual reject→edit→diff walk with two roles.
+
+## Out of scope (deferred, per plan review)
+
+Soft lock/heartbeat/takeover (real session infra, no FP teaching value here).
+Case-context panel (no case data exists). 401 autosave grace (auth is faked).
+Per-user passage usage counts (bookkeeping, demos nothing). Shortcut overlay dialog
+(no modal component exists; not worth building one). Inline character-level diff
+(block granularity carries the teaching point).
+
+## Risks
+
+Undo history holds `Brief` snapshots — deep-frozen immutable values, so sharing is
+safe, but never push non-content dispatches (status transitions, `Seed` itself) into
+history or undo will replay workflow state. The rejection snapshot lives in memory
+only — document it where it's captured.

docs/backlog/WP-28-brief-v2-demo-polish.md

@@ -0,0 +1,66 @@
+# WP-28 — Brief v2 demo polish (scenarios, e2e, docs)
+
+Status: todo
+Phase: 6 — Brief v2 (edit-on-the-letter, org templates, server-rendered preview)
+
+## Why
+
+Phase 6 ships across five WPs; this one makes it demonstrable and closes the loop:
+a demo script that maps every kept PRD §12 scenario to a URL + click path, an e2e
+spec covering the new flows end-to-end, story gap-fill, and the docs/README updates
+that keep CLAUDE.md and the backlog truthful.
+
+## Read first
+
+- PRD Brief v2 §6 (demo choreography), §12 (scenario list); WP-23..27 as built
+- `e2e/` (WP-19 conventions); `src/app/shared/infrastructure/scenario.ts`
+
+## Decisions (pre-made, don't relitigate)
+
+- **No preset registry.** The PRD's 18 scenarios collapse onto the existing toggles:
+  `?role=drafter|approver|admin`, `?scenario=slow|loading|error` (the interceptor
+  already covers all `/api/` calls, the new endpoints included), and
+  `POST /brief/reset`. The demo script documents the mapping; no new interceptor
+  cases, no scenario code.
+- Demo script lives at `docs/prd/0003-brief-v2-demo-script.md` and follows the §6
+  choreography (compose → preview → switch sub-org seed → "two axes, one render").
+- One e2e spec, not a suite: drafter composes on canvas → submit → approve → send
+  pins the org-template version; admin publishes → drafter canvas reflects it.
+  Preview assertion is content-type-level (text/html), not pixel.
+- CLAUDE.md gets the new role value + route only — keep it rules, not narrative.
+
+## Files
+
+- `docs/prd/0003-brief-v2-demo-script.md` (new)
+- `e2e/brief-v2.spec.ts` (new)
+- story gap-fill where WP-24..27 left holes
+- `docs/backlog/README.md` (statuses), `CLAUDE.md` (roles/routes touch-up)
+
+## Steps
+
+1. Demo script: table scenario → URL + clicks, covering every kept §12 entry.
+2. e2e spec (backend + FE running, WP-19 pattern).
+3. Story sweep for the new components/states.
+4. Docs updates.
+
+## Acceptance criteria
+
+- [ ] Every kept PRD §12 scenario has a working URL + click path in the script
+      (walked manually once).
+- [ ] `npm run e2e` green, including the new spec.
+- [ ] Full GREEN; backlog README statuses correct; CLAUDE.md mentions
+      `?role=admin` and `/brief/huisstijl`.
+
+## Verification
+
+Walk the demo script top to bottom against `docker compose up`; GREEN one-liner;
+`npm run e2e`.
+
+## Out of scope
+
+New scenario interceptor cases; a scenario-switcher UI; screenshots/video.
+
+## Risks
+
+The demo script rots when flows change — it lists URLs + clicks only (no prose
+walkthroughs), so churn stays cheap.

public/letter.css

@@ -0,0 +1,197 @@
+/* letter.css — the FE⇄BE letter-rendering CONTRACT (WP-24/WP-25).
+ *
+ * One stylesheet, two consumers: the FE letter canvas loads it via <link>
+ * (index.html + Storybook preview-head), the backend HTML renderer (WP-25)
+ * inlines this same file. Its class-parity test is the fence against drift.
+ *
+ * Class vocabulary: .letter, .letter__letterhead, .letter__body,
+ * .letter__signature, .letter__footer, .letter__page-break.
+ * Margins arrive as --letter-margin-* custom props (mm, from the OrgTemplate);
+ * the defaults below match the seed template.
+ *
+ * Deliberately self-contained: no --rhc- or --bs- tokens — the backend renderer
+ * has no token bridge. Geometry follows the sample voorbeeldbrief-inschrijving
+ * (A4, return address above the envelope window, reference block, footer rule).
+ */
+
+.letter {
+  --letter-margin-top: 25mm;
+  --letter-margin-right: 25mm;
+  --letter-margin-bottom: 25mm;
+  --letter-margin-left: 25mm;
+
+  position: relative;
+  box-sizing: border-box;
+  width: 210mm; /* A4 */
+  max-width: 100%;
+  min-height: 297mm;
+  margin-inline: auto;
+  padding: var(--letter-margin-top) var(--letter-margin-right) var(--letter-margin-bottom)
+    var(--letter-margin-left);
+  background: #fff;
+  color: #1a1a1a;
+  /* Letter typography is the letter's, not the portal UI's. Licensed RO/Rijks
+     fonts are not shipped; system stack mirrors the app-wide decision (ADR-0003). */
+  font-family:
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  font-size: 10.5pt;
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+}
+
+.letter p {
+  margin: 0 0 0.75em;
+}
+
+.letter ul,
+.letter ol {
+  margin: 0 0 0.75em;
+  padding-inline-start: 1.4em;
+}
+
+/* --- Letterhead: wordmark, return address above the envelope window, reference block --- */
+
+.letter__letterhead {
+  margin-block-end: 12mm;
+}
+
+.letter__letterhead .org-wordmark {
+  font-size: 13pt;
+  font-weight: 700;
+  margin: 0 0 10mm;
+}
+
+.letter__letterhead .return-address {
+  font-style: normal;
+  font-size: 7.5pt;
+  white-space: pre-line;
+  color: #555;
+  margin-block-end: 2mm;
+}
+
+/* Envelope-window position (~C5 venstercouvert): recipient block. */
+.letter__letterhead .address-window {
+  min-height: 22mm;
+  font-style: normal;
+  white-space: pre-line;
+  margin-block-end: 8mm;
+}
+
+.letter__letterhead .reference {
+  display: flex;
+  gap: 10mm;
+  font-size: 8.5pt;
+  color: #333;
+}
+
+.letter__letterhead .reference dt {
+  font-weight: 700;
+  margin: 0;
+}
+
+.letter__letterhead .reference dd {
+  margin: 0;
+}
+
+/* --- Body: the case-type template's sections --- */
+
+.letter__body {
+  flex: 1;
+  /* Above the absolutely-positioned page-break marks: the dashed line stays visible
+     in the gaps but never draws THROUGH opaque content (editors, pickers). */
+  position: relative;
+  z-index: 1;
+}
+
+.letter__body h3 {
+  font-size: inherit;
+  font-weight: 700;
+  margin: 0 0 0.25em;
+}
+
+.letter__body section {
+  margin-block-end: 1.5em;
+}
+
+/* --- Signature --- */
+
+.letter__signature {
+  margin-block-start: 10mm;
+}
+
+.letter__signature p {
+  margin: 0;
+}
+
+.letter__signature .signature-name {
+  margin-block-start: 3em; /* room for the (not-shipped) handwritten signature */
+  font-weight: 700;
+}
+
+/* --- Footer: contact + legal, above a rule --- */
+
+.letter__footer {
+  margin-block-start: 10mm;
+  padding-block-start: 3mm;
+  border-block-start: 0.5pt solid #999;
+  font-size: 7.5pt;
+  color: #555;
+  display: flex;
+  justify-content: space-between;
+  gap: 10mm;
+}
+
+.letter__footer .footer-contact {
+  white-space: pre-line;
+}
+
+.letter__footer .footer-legal {
+  text-align: end;
+}
+
+/* --- Approximate page-break indicator (screen only; PRD §2b honesty rule) ---
+   Positioned per A4-interval by the canvas; the print preview is authoritative. */
+
+.letter__page-break {
+  position: absolute;
+  inset-inline: 0;
+  border-block-start: 1px dashed #b36200;
+  pointer-events: none;
+}
+
+.letter__page-break > span {
+  position: absolute;
+  inset-inline-end: 2mm;
+  inset-block-start: 0;
+  transform: translateY(-50%);
+  /* Above .letter__body: the honesty caption stays legible even over content. */
+  z-index: 2;
+  font-size: 7pt;
+  color: #b36200;
+  background: #fff;
+  padding-inline: 1mm;
+  white-space: nowrap;
+}
+
+/* --- Print: real pages, no indicator chrome --- */
+
+@page {
+  size: A4;
+  margin: 0;
+}
+
+@media print {
+  .letter {
+    width: auto;
+    min-height: 0;
+  }
+
+  .letter__page-break {
+    display: none;
+  }
+}

src/app/brief/application/brief.store.spec.ts

@@ -2,6 +2,7 @@ import { TestBed } from '@angular/core/testing';
 import { describe, it, expect } from 'vitest';
 import { Result } from '@shared/kernel/fp';
 import { Brief, BriefDecisions } from '@brief/domain/brief';
+import { OrgTemplate } from '@brief/domain/org-template';
 import { BriefAdapter, BriefView } from '@brief/infrastructure/brief.adapter';
 import { BriefStore } from './brief.store';
 
@@ -22,7 +23,20 @@ const brief: Brief = {
   drafterId: 'u1',
 };
 
-const view: BriefView = { brief, availablePassages: [], decisions };
+const orgTemplate: OrgTemplate = {
+  subOrgId: 'cibg-registers',
+  orgName: 'CIBG — Registers',
+  returnAddress: 'Postbus 00000\n2500 AA Den Haag',
+  footerContact: 'info@voorbeeld.example',
+  footerLegal: 'KvK 00000000',
+  signatureName: 'A. de Vries',
+  signatureRole: 'Hoofd Registratie',
+  signatureClosing: 'Met vriendelijke groet,',
+  margins: { topMm: 25, rightMm: 25, bottomMm: 25, leftMm: 25 },
+  version: 1,
+};
+
+const view: BriefView = { brief, availablePassages: [], decisions, orgTemplate };
 
 function setup(adapter: Partial<BriefAdapter>): BriefStore {
   TestBed.configureTestingModule({ providers: [{ provide: BriefAdapter, useValue: adapter }] });

src/app/brief/application/brief.store.ts

@@ -10,6 +10,7 @@ import {
   unresolvedPlaceholders,
 } from '@brief/domain/brief';
 import { BriefMsg, BriefState, initial, reduce } from '@brief/domain/brief.machine';
+import { OrgTemplate } from '@brief/domain/org-template';
 import { BriefAdapter, BriefView } from '@brief/infrastructure/brief.adapter';
 
 /** Transient action state (submit/approve/reject/send/resetDemo) — one tagged union
@@ -48,6 +49,11 @@ export class BriefStore {
   /** Surfaced autosave state for the indicator + aria-live region. */
   readonly saveState = signal<SaveState>({ tag: 'Idle' });
 
+  /** The org template the letter renders with (WP-24). Server-owned appearance data,
+      not letter state — held beside the machine, never inside it (`brief.machine.ts`
+      stays untouched by design). Set from every server view that carries it. */
+  readonly orgTemplate = signal<OrgTemplate | null>(null);
+
   /** The load lifecycle as `RemoteData`, for `<app-async>` — the machine keeps
       owning the letter's own domain lifecycle (draft/submitted/approved/…); this is
       purely a projection of its loading/failed tags onto the shared async seam. */
@@ -87,8 +93,12 @@ export class BriefStore {
 
   async load() {
     const r = await this.adapter.load();
-    if (r.ok) this.store.dispatch({ tag: 'BriefLoaded', ...r.value });
+    if (r.ok) {
-    else this.store.dispatch({ tag: 'BriefLoadFailed', reason: r.error });
+      this.orgTemplate.set(r.value.orgTemplate);
+      this.store.dispatch({ tag: 'BriefLoaded', ...r.value });
+    } else {
+      this.store.dispatch({ tag: 'BriefLoadFailed', reason: r.error });
+    }
   }
 
   /** An edit: apply it optimistically in the pure reducer, then debounce-save. */
@@ -125,6 +135,7 @@ export class BriefStore {
     this.saveState.set({ tag: 'Idle' });
     if (r.ok) {
       this.actionState.set({ tag: 'Idle' });
+      this.orgTemplate.set(r.value.orgTemplate);
       this.store.dispatch({ tag: 'BriefLoaded', ...r.value });
     } else {
       this.actionState.set({ tag: 'Failed', error: r.error });
@@ -152,6 +163,8 @@ export class BriefStore {
   }
 
   private applyServerStatus(view: BriefView) {
+    // `send` pins the org-template version server-side — mirror whatever came back.
+    this.orgTemplate.set(view.orgTemplate);
     const { brief, decisions } = view;
     const s = brief.status;
     switch (s.tag) {

src/app/brief/domain/org-template.ts

@@ -0,0 +1,31 @@
+/**
+ * The organization template (Brief v2 PRD §3, WP-23/24): the SECOND template axis —
+ * appearance/identity per sub-organization (letterhead, footer, signature, margins).
+ * Orthogonal to the case-type template (sections + placeholders); the two only meet
+ * at render time, on the letter canvas. Server-owned: the FE renders it verbatim,
+ * never edits it here (the admin editor is WP-26).
+ */
+
+export interface Margins {
+  readonly topMm: number;
+  readonly rightMm: number;
+  readonly bottomMm: number;
+  readonly leftMm: number;
+}
+
+export interface OrgTemplate {
+  readonly subOrgId: string;
+  readonly orgName: string;
+  /** Multiline; rendered above the envelope window. */
+  readonly returnAddress: string;
+  readonly logoDocumentId?: string;
+  /** Multiline contact block in the footer. */
+  readonly footerContact: string;
+  readonly footerLegal: string;
+  readonly signatureName: string;
+  readonly signatureRole: string;
+  readonly signatureClosing: string;
+  readonly margins: Margins;
+  /** 0 = draft; n>0 = the published snapshot this letter renders with. */
+  readonly version: number;
+}

src/app/brief/infrastructure/brief.adapter.spec.ts

@@ -1,6 +1,12 @@
 import { describe, it, expect } from 'vitest';
 import { BriefViewDto } from '@shared/infrastructure/api-client';
-import { parseBrief, parseBriefView, parseNode, parseStatus } from './brief.adapter';
+import {
+  parseBrief,
+  parseBriefView,
+  parseNode,
+  parseOrgTemplate,
+  parseStatus,
+} from './brief.adapter';
 
 const view: BriefViewDto = {
   brief: {
@@ -47,6 +53,18 @@ const view: BriefViewDto = {
     },
   ],
   decisions: { canEdit: false, canApprove: true, canReject: true, canSend: false },
+  orgTemplate: {
+    subOrgId: 'cibg-registers',
+    orgName: 'CIBG — Registers',
+    returnAddress: 'BIG-register\nPostbus 00000\n2500 AA Den Haag',
+    footerContact: 'www.bigregister.nl\ninfo@voorbeeld.example',
+    footerLegal: 'KvK 00000000',
+    signatureName: 'A. de Vries',
+    signatureRole: 'Hoofd Registratie',
+    signatureClosing: 'Met vriendelijke groet,',
+    margins: { topMm: 25, rightMm: 25, bottomMm: 25, leftMm: 25 },
+    version: 1,
+  },
 };
 
 describe('brief.adapter parse boundary', () => {
@@ -76,6 +94,26 @@ describe('brief.adapter parse boundary', () => {
     });
   });
 
+  it('parses the org template and drops a null logoDocumentId', () => {
+    const r = parseOrgTemplate(view.orgTemplate);
+    expect(r.ok).toBe(true);
+    if (!r.ok) return;
+    expect(r.value.orgName).toBe('CIBG — Registers');
+    expect(r.value.margins).toEqual({ topMm: 25, rightMm: 25, bottomMm: 25, leftMm: 25 });
+    expect('logoDocumentId' in r.value).toBe(false);
+  });
+
+  it('rejects a view whose org template is missing or malformed', () => {
+    expect(parseBriefView({ ...view, orgTemplate: undefined }).ok).toBe(false);
+    expect(parseOrgTemplate({ ...view.orgTemplate, signatureName: undefined }).ok).toBe(false);
+    expect(
+      parseOrgTemplate({
+        ...view.orgTemplate,
+        margins: { topMm: 25, rightMm: 25, bottomMm: 25 },
+      }).ok,
+    ).toBe(false);
+  });
+
   it('rejects a view whose decisions are missing or malformed', () => {
     expect(parseBriefView({ ...view, decisions: undefined as never }).ok).toBe(false);
     expect(

src/app/brief/infrastructure/brief.adapter.ts

@@ -10,6 +10,7 @@ import {
   LetterBlockDto,
   LetterSectionDto,
   LibraryPassageDto,
+  OrgTemplateDto,
   PlaceholderDefDto,
   RichTextBlockDto,
   RichTextNodeDto,
@@ -22,6 +23,7 @@ import {
   LetterSection,
   LibraryPassage,
 } from '@brief/domain/brief';
+import { OrgTemplate } from '@brief/domain/org-template';
 import { PlaceholderDef } from '@brief/domain/placeholders';
 import { Mark, Paragraph, RichTextBlock, RichTextNode } from '@shared/kernel/rich-text';
 
@@ -37,6 +39,7 @@ export interface BriefView {
   readonly brief: Brief;
   readonly availablePassages: LibraryPassage[];
   readonly decisions: BriefDecisions;
+  readonly orgTemplate: OrgTemplate;
 }
 
 export const BRIEF_LOAD_FAILED = $localize`:@@brief.load.failed:De brief kon niet worden geladen.`;
@@ -301,19 +304,64 @@ function parseDecisions(dto: BriefDecisionsDto | undefined): Result<string, Brie
   });
 }
 
+export function parseOrgTemplate(dto: OrgTemplateDto | undefined): Result<string, OrgTemplate> {
+  if (
+    typeof dto?.subOrgId !== 'string' ||
+    typeof dto.orgName !== 'string' ||
+    typeof dto.returnAddress !== 'string' ||
+    typeof dto.footerContact !== 'string' ||
+    typeof dto.footerLegal !== 'string' ||
+    typeof dto.signatureName !== 'string' ||
+    typeof dto.signatureRole !== 'string' ||
+    typeof dto.signatureClosing !== 'string' ||
+    typeof dto.version !== 'number'
+  ) {
+    return err('org-template: bad shape');
+  }
+  const m = dto.margins;
+  if (
+    typeof m?.topMm !== 'number' ||
+    typeof m.rightMm !== 'number' ||
+    typeof m.bottomMm !== 'number' ||
+    typeof m.leftMm !== 'number'
+  ) {
+    return err('org-template: bad margins');
+  }
+  return ok({
+    subOrgId: dto.subOrgId,
+    orgName: dto.orgName,
+    returnAddress: dto.returnAddress,
+    ...(dto.logoDocumentId != null ? { logoDocumentId: dto.logoDocumentId } : {}),
+    footerContact: dto.footerContact,
+    footerLegal: dto.footerLegal,
+    signatureName: dto.signatureName,
+    signatureRole: dto.signatureRole,
+    signatureClosing: dto.signatureClosing,
+    margins: { topMm: m.topMm, rightMm: m.rightMm, bottomMm: m.bottomMm, leftMm: m.leftMm },
+    version: dto.version,
+  });
+}
+
 export function parseBriefView(dto: BriefViewDto): Result<string, BriefView> {
   if (!dto.brief) return err('brief-view: missing brief');
   const brief = parseBrief(dto.brief);
   if (!brief.ok) return brief;
   const decisions = parseDecisions(dto.decisions);
   if (!decisions.ok) return decisions;
+  const orgTemplate = parseOrgTemplate(dto.orgTemplate);
+  if (!orgTemplate.ok) return orgTemplate;
   const availablePassages: LibraryPassage[] = [];
   for (const p of dto.availablePassages ?? []) {
     const parsed = parsePassage(p);
     if (!parsed.ok) return parsed;
     availablePassages.push(parsed.value);
   }
-  return ok({ brief: brief.value, availablePassages, decisions: decisions.value });
+  return ok({
+    brief: brief.value,
+    availablePassages,
+    decisions: decisions.value,
+    orgTemplate: orgTemplate.value,
+  });
 }
 
 // --- toDto: domain → wire, for save (collapses the union to the flat shape) ---

src/app/brief/ui/brief.page.ts

@@ -40,28 +40,31 @@ import { LetterComposerComponent } from '@brief/ui/letter-composer/letter-compos
         </ng-template>
         <ng-template appAsyncLoaded>
           @if (loaded(); as s) {
-            <div class="brief-toolbar">
+            @if (store.orgTemplate(); as orgTemplate) {
-              <span class="save" role="status" aria-live="polite">{{ saveText() }}</span>
+              <div class="brief-toolbar">
-              <app-button variant="subtle" [disabled]="store.busy()" (click)="resetDemo()">{{
+                <span class="save" role="status" aria-live="polite">{{ saveText() }}</span>
-                resetLabel
+                <app-button variant="subtle" [disabled]="store.busy()" (click)="resetDemo()">{{
-              }}</app-button>
+                  resetLabel
-            </div>
+                }}</app-button>
-            <app-letter-composer
+              </div>
-              [brief]="s.brief"
+              <app-letter-composer
-              [availablePassages]="s.availablePassages"
+                [brief]="s.brief"
-              [diagnostics]="store.diagnostics()"
+                [orgTemplate]="orgTemplate"
-              [canEdit]="store.canEdit()"
+                [availablePassages]="s.availablePassages"
-              [canApprove]="store.canApprove()"
+                [diagnostics]="store.diagnostics()"
-              [canReject]="store.canReject()"
+                [canEdit]="store.canEdit()"
-              [canSend]="store.canSend()"
+                [canApprove]="store.canApprove()"
-              [canSubmit]="store.canSubmit()"
+                [canReject]="store.canReject()"
-              [busy]="store.busy()"
+                [canSend]="store.canSend()"
-              (edit)="store.edit($event)"
+                [canSubmit]="store.canSubmit()"
-              (submit)="store.submit()"
+                [busy]="store.busy()"
-              (approve)="store.approve()"
+                (edit)="store.edit($event)"
-              (reject)="store.reject($event)"
+                (submit)="store.submit()"
-              (send)="store.send()"
+                (approve)="store.approve()"
-            />
+                (reject)="store.reject($event)"
+                (send)="store.send()"
+              />
+            }
           }
         </ng-template>
       </app-async>

src/app/brief/ui/letter-canvas/letter-canvas.component.ts

@@ -0,0 +1,317 @@
+import {
+  Component,
+  DestroyRef,
+  ElementRef,
+  computed,
+  effect,
+  inject,
+  input,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { ButtonComponent } from '@shared/ui/button/button.component';
+import { PlaceholderChipComponent } from '@shared/ui/placeholder-chip/placeholder-chip.component';
+import { PlaceholderOption } from '@shared/ui/rich-text-editor/rich-text-editor.component';
+import { formatDatumNl } from '@shared/kernel/datum';
+import { Paragraph } from '@shared/kernel/rich-text';
+import { Brief, LetterBlock, LibraryPassage } from '@brief/domain/brief';
+import { OrgTemplate } from '@brief/domain/org-template';
+import { Diagnostic } from '@brief/domain/placeholders';
+import { BriefMsg } from '@brief/domain/brief.machine';
+import { LetterSectionComponent } from '@brief/ui/letter-section/letter-section.component';
+
+/** A run of consecutive lines to render together: a list (bullet/number) or a single plain line. */
+type PreviewSegment = {
+  readonly list: 'bullet' | 'number' | null;
+  readonly items: readonly Paragraph[];
+};
+
+function groupParagraphs(paras: readonly Paragraph[]): PreviewSegment[] {
+  const out: { list: 'bullet' | 'number' | null; items: Paragraph[] }[] = [];
+  for (const para of paras) {
+    const kind = para.list ?? null;
+    const last = out[out.length - 1];
+    if (kind && last && last.list === kind) last.items.push(para);
+    else out.push({ list: kind, items: [para] });
+  }
+  return out;
+}
+
+// Illustrative values for the "Voorbeeld" toggle — what send resolves server-side.
+const SAMPLE_VALUES: Record<string, string> = {
+  naam_zorgverlener: 'J. Jansen',
+  big_nummer: '12345678901',
+};
+
+/** A4 height in CSS px (1in = 96px = 25.4mm) — for the approximate page-break marks. */
+const A4_HEIGHT_PX = (297 * 96) / 25.4;
+
+/** Organism: the letter as one surface — the org template's letterhead, signature and
+    footer around the case-type template's sections. `editableRegions` picks who edits
+    what: `'content'` hosts the editable letter-sections in place (drafter), `'none'`
+    renders everything read-only (approver/locked, absorbs the old letter-preview),
+    `'template'` reserves the org-identity regions for the admin editor (WP-26).
+    Letter typography/geometry come from the shared `public/letter.css` contract —
+    the same file the backend preview renderer inlines (WP-25). */
+@Component({
+  selector: 'app-letter-canvas',
+  imports: [NgTemplateOutlet, ButtonComponent, PlaceholderChipComponent, LetterSectionComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .toolbar {
+        display: flex;
+        justify-content: flex-end;
+        margin-block-end: var(--rhc-space-max-sm);
+      }
+      /* Portal-side chrome around the letter surface (not part of the contract file). */
+      .surface {
+        background: var(--rhc-color-grijs-100, #f0f0f0);
+        border: var(--rhc-border-width-sm) solid var(--rhc-color-border-default);
+        border-radius: var(--rhc-border-radius-md);
+        padding: var(--rhc-space-max-lg);
+        overflow-x: auto;
+      }
+      .surface .letter {
+        box-shadow: 0 1px 4px rgb(0 0 0 / 0.15);
+      }
+      /* Org-identity regions: visibly not the drafter's to edit. */
+      .from-template {
+        background: var(--rhc-color-grijs-100, #f5f5f5);
+        outline: 2mm solid var(--rhc-color-grijs-100, #f5f5f5);
+      }
+      .from-template-caption {
+        font-size: 7.5pt;
+        /* grijs-700, not foreground-subtle: subtle misses AA contrast on the tint. */
+        color: var(--rhc-color-grijs-700, #334155);
+        margin: 0 0 2mm;
+      }
+    `,
+  ],
+  template: `
+    <ng-template #line let-nodes>
+      @for (node of nodes; track $index) {
+        @switch (node.type) {
+          @case ('text') {
+            <span>{{ node.text }}</span>
+          }
+          @case ('lineBreak') {
+            <br />
+          }
+          @case ('placeholder') {
+            @if (showSample() && autoFor(node.key)) {
+              <span>{{ sampleFor(node.key) }}</span>
+            } @else {
+              <app-placeholder-chip
+                [label]="labelFor(node.key)"
+                [autoResolvable]="autoFor(node.key)"
+                [state]="stateFor(node.key)"
+              />
+            }
+          }
+        }
+      }
+    </ng-template>
+
+    @if (editableRegions() === 'none') {
+      <div class="toolbar">
+        <app-button
+          variant="subtle"
+          (click)="showSample.set(!showSample())"
+          [attr.aria-pressed]="showSample()"
+        >
+          {{ showSample() ? hideSampleLabel() : showSampleLabel() }}
+        </app-button>
+      </div>
+    }
+
+    <div class="surface">
+      <div class="letter" #page [style]="marginStyle()" [style.zoom]="zoom()">
+        <!-- div, not <header>/<footer>: the CIBG huisstijl styles those bare elements
+             (robijn footer background) — the letter surface must stay letter.css-only. -->
+        <div class="letter__letterhead" [class.from-template]="tintTemplate()">
+          @if (tintTemplate()) {
+            <p class="from-template-caption">{{ fromTemplateCaption() }}</p>
+          }
+          <p class="org-wordmark">{{ orgTemplate().orgName }}</p>
+          <address class="return-address">{{ orgTemplate().returnAddress }}</address>
+          <address class="address-window">{{ recipientText() }}</address>
+          <dl class="reference">
+            <div>
+              <dt>{{ referenceLabel() }}</dt>
+              <dd>{{ brief().briefId }}</dd>
+            </div>
+            <div>
+              <dt>{{ dateLabel() }}</dt>
+              <dd>{{ letterDate }}</dd>
+            </div>
+          </dl>
+        </div>
+
+        <div class="letter__body">
+          @if (editableRegions() === 'content') {
+            @for (section of brief().sections; track section.sectionKey) {
+              <section>
+                <app-letter-section
+                  [section]="section"
+                  [availablePassages]="availablePassages()"
+                  [placeholders]="placeholders()"
+                  [editable]="!section.locked"
+                  (edit)="edit.emit($event)"
+                />
+              </section>
+            }
+          } @else {
+            @for (section of brief().sections; track section.sectionKey) {
+              <section>
+                <h3>{{ section.title }}</h3>
+                @for (block of section.blocks; track block.blockId) {
+                  @for (seg of segmentsOf(block); track $index) {
+                    @if (seg.list === 'bullet') {
+                      <ul>
+                        @for (para of seg.items; track $index) {
+                          <li>
+                            <ng-container
+                              [ngTemplateOutlet]="line"
+                              [ngTemplateOutletContext]="{ $implicit: para.nodes }"
+                            />
+                          </li>
+                        }
+                      </ul>
+                    } @else if (seg.list === 'number') {
+                      <ol>
+                        @for (para of seg.items; track $index) {
+                          <li>
+                            <ng-container
+                              [ngTemplateOutlet]="line"
+                              [ngTemplateOutletContext]="{ $implicit: para.nodes }"
+                            />
+                          </li>
+                        }
+                      </ol>
+                    } @else {
+                      <p>
+                        <ng-container
+                          [ngTemplateOutlet]="line"
+                          [ngTemplateOutletContext]="{ $implicit: seg.items[0].nodes }"
+                        />
+                      </p>
+                    }
+                  }
+                }
+              </section>
+            }
+          }
+        </div>
+
+        <div class="letter__signature" [class.from-template]="tintTemplate()">
+          <p>{{ orgTemplate().signatureClosing }}</p>
+          <p class="signature-name">{{ orgTemplate().signatureName }}</p>
+          <p>{{ orgTemplate().signatureRole }}</p>
+        </div>
+
+        <div class="letter__footer" [class.from-template]="tintTemplate()">
+          <div class="footer-contact">{{ orgTemplate().footerContact }}</div>
+          <div class="footer-legal">{{ orgTemplate().footerLegal }}</div>
+        </div>
+
+        @for (top of pageBreaks(); track $index) {
+          <div class="letter__page-break" [style.top.px]="top" aria-hidden="true">
+            <span>{{ pageBreakCaption() }}</span>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+})
+export class LetterCanvasComponent {
+  brief = input.required<Brief>();
+  orgTemplate = input.required<OrgTemplate>();
+  /** Who edits what on the surface: drafter ('content'), read-only ('none'),
+      admin editor ('template', consumer arrives in WP-26). */
+  editableRegions = input<'content' | 'template' | 'none'>('none');
+  availablePassages = input<readonly LibraryPassage[]>([]);
+  placeholders = input<readonly PlaceholderOption[]>([]);
+  diagnostics = input<readonly Diagnostic[]>([]);
+  zoom = input(1);
+  edit = output<BriefMsg>();
+
+  showSampleLabel = input($localize`:@@brief.preview.showSample:Voorbeeld met testwaarden`);
+  hideSampleLabel = input($localize`:@@brief.preview.hideSample:Testwaarden verbergen`);
+  fromTemplateCaption = input(
+    $localize`:@@brief.canvas.fromTemplate:Komt uit de huisstijl van de organisatie — niet bewerkbaar in de brief.`,
+  );
+  pageBreakCaption = input(
+    $localize`:@@brief.canvas.pageBreak:±pagina-einde — afdrukvoorbeeld is leidend`,
+  );
+  recipientText = input(
+    $localize`:@@brief.canvas.recipient:Adres van de geadresseerde\n(wordt ingevuld bij verzending)`,
+  );
+  referenceLabel = input($localize`:@@brief.canvas.reference:Ons kenmerk`);
+  dateLabel = input($localize`:@@brief.canvas.date:Datum`);
+
+  protected showSample = signal(false);
+  protected letterDate = formatDatumNl(new Date());
+
+  /** The letterhead/signature/footer are tinted "not yours" only while composing —
+      in 'none' the whole surface is read-only, in 'template' they ARE the editable focus. */
+  protected tintTemplate = computed(() => this.editableRegions() === 'content');
+
+  protected marginStyle = computed(() => {
+    const m = this.orgTemplate().margins;
+    return {
+      '--letter-margin-top': `${m.topMm}mm`,
+      '--letter-margin-right': `${m.rightMm}mm`,
+      '--letter-margin-bottom': `${m.bottomMm}mm`,
+      '--letter-margin-left': `${m.leftMm}mm`,
+    };
+  });
+
+  // --- read-only rendering helpers (migrated from the superseded letter-preview) ---
+
+  private defs = computed(() => new Map(this.brief().placeholders.map((p) => [p.key, p])));
+  private worst = computed(() => {
+    const m = new Map<string, 'error' | 'warning'>();
+    for (const d of this.diagnostics()) {
+      if (!d.placeholderKey) continue;
+      if (d.severity === 'error') m.set(d.placeholderKey, 'error');
+      else if (!m.has(d.placeholderKey)) m.set(d.placeholderKey, 'warning');
+    }
+    return m;
+  });
+
+  protected segmentsOf = (block: LetterBlock) => groupParagraphs(block.content.paragraphs);
+  protected labelFor = (key: string) => this.defs().get(key)?.label ?? key;
+  protected autoFor = (key: string) => this.defs().get(key)?.autoResolvable ?? false;
+  protected stateFor = (key: string): 'ok' | 'warning' | 'error' => this.worst().get(key) ?? 'ok';
+  protected sampleFor = (key: string) =>
+    SAMPLE_VALUES[key] ?? (key === 'datum' ? this.letterDate : this.labelFor(key));
+
+  // --- approximate page-break marks (PRD §2b: honest "±", print preview is leading) ---
+
+  private page = viewChild<ElementRef<HTMLElement>>('page');
+  protected pageBreaks = signal<readonly number[]>([]);
+
+  constructor() {
+    // ponytail: whole-surface height / A4-interval — ignores that a break never truly
+    // falls mid-line; the caption says "±" and WP-25's server preview is authoritative.
+    const observer = new ResizeObserver(([entry]) => {
+      // ~1cm tolerance so a letter ending on a page boundary gets no edge-hugging mark.
+      const pages = Math.ceil((entry.target.scrollHeight - 40) / A4_HEIGHT_PX);
+      this.pageBreaks.set(
+        Array.from({ length: Math.max(0, pages - 1) }, (_, i) => (i + 1) * A4_HEIGHT_PX),
+      );
+    });
+    effect((onCleanup) => {
+      const el = this.page()?.nativeElement;
+      if (!el) return;
+      observer.observe(el);
+      onCleanup(() => observer.unobserve(el));
+    });
+    inject(DestroyRef).onDestroy(() => observer.disconnect());
+  }
+}

src/app/brief/ui/letter-canvas/letter-canvas.stories.ts

@@ -0,0 +1,154 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { Brief, LibraryPassage, allDiagnostics } from '@brief/domain/brief';
+import { OrgTemplate } from '@brief/domain/org-template';
+import { LetterCanvasComponent } from './letter-canvas.component';
+
+const orgTemplate: OrgTemplate = {
+  subOrgId: 'cibg-registers',
+  orgName: 'CIBG — Registers',
+  returnAddress: 'BIG-register\nPostbus 00000\n2500 AA Den Haag',
+  footerContact: 'www.bigregister.nl\ninfo@voorbeeld.example\n070 000 00 00',
+  footerLegal: 'Ons kenmerk vermelden bij correspondentie.',
+  signatureName: 'A. de Vries',
+  signatureRole: 'Hoofd Registratie',
+  signatureClosing: 'Met vriendelijke groet,',
+  margins: { topMm: 25, rightMm: 25, bottomMm: 25, leftMm: 25 },
+  version: 1,
+};
+
+const passages: LibraryPassage[] = [
+  {
+    passageId: 'p1',
+    scope: 'global',
+    sectionKey: 'kern',
+    label: 'Standaard toelichting',
+    version: 1,
+    content: { paragraphs: [{ nodes: [{ type: 'text', text: 'Standaardtekst.' }] }] },
+  },
+];
+
+const brief: Brief = {
+  briefId: 'b1',
+  beroep: 'arts',
+  templateId: 't1',
+  drafterId: 'demo-drafter',
+  status: { tag: 'draft' },
+  placeholders: [
+    { key: 'naam_zorgverlener', label: 'Naam zorgverlener', autoResolvable: true },
+    { key: 'reden_besluit', label: 'Reden besluit', autoResolvable: false },
+  ],
+  sections: [
+    {
+      sectionKey: 'aanhef',
+      title: 'Aanhef',
+      required: true,
+      locked: true,
+      blocks: [
+        {
+          type: 'passage',
+          blockId: 'local-1',
+          sourcePassageId: 'p1',
+          sourceVersion: 1,
+          edited: false,
+          content: {
+            paragraphs: [
+              {
+                nodes: [
+                  { type: 'text', text: 'Geachte heer/mevrouw ' },
+                  { type: 'placeholder', key: 'naam_zorgverlener' },
+                  { type: 'text', text: ',' },
+                ],
+              },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      sectionKey: 'kern',
+      title: 'Kern van het besluit',
+      required: true,
+      locked: false,
+      blocks: [
+        {
+          type: 'freeText',
+          blockId: 'local-2',
+          content: {
+            paragraphs: [
+              {
+                nodes: [
+                  { type: 'text', text: 'Wij hebben besloten om reden ' },
+                  { type: 'placeholder', key: 'reden_besluit' },
+                  { type: 'text', text: '.' },
+                ],
+              },
+            ],
+          },
+        },
+      ],
+    },
+  ],
+};
+
+/** Enough repeated body text to push the surface past one A4 page. */
+const longBrief: Brief = {
+  ...brief,
+  sections: brief.sections.map((s) =>
+    s.sectionKey === 'kern'
+      ? {
+          ...s,
+          blocks: [
+            {
+              type: 'freeText',
+              blockId: 'local-long',
+              content: {
+                paragraphs: Array.from({ length: 40 }, (_, i) => ({
+                  nodes: [
+                    {
+                      type: 'text' as const,
+                      text: `Alinea ${i + 1}: de beoordeling van uw aanvraag is uitgevoerd volgens de geldende regels voor herregistratie in het BIG-register.`,
+                    },
+                  ],
+                })),
+              },
+            },
+          ],
+        }
+      : s,
+  ),
+};
+
+const meta: Meta<LetterCanvasComponent> = {
+  title: 'Domein/Brief/Letter Canvas',
+  component: LetterCanvasComponent,
+  args: {
+    brief,
+    orgTemplate,
+    availablePassages: passages,
+    placeholders: brief.placeholders,
+    diagnostics: allDiagnostics(brief),
+  },
+};
+export default meta;
+type Story = StoryObj<LetterCanvasComponent>;
+
+/** Drafter: content blocks editable in place; org-identity regions tinted read-only. */
+export const ContentMode: Story = { args: { editableRegions: 'content' } };
+
+/** Approver/locked: the identical surface fully read-only, with the sample-values
+    toggle and diagnostic placeholder chips (absorbs the old Letter Preview). */
+export const ReadOnly: Story = { args: { editableRegions: 'none' } };
+
+export const ReadOnlyZonderBevindingen: Story = {
+  args: { editableRegions: 'none', diagnostics: [] },
+};
+
+/** Admin editor focus (consumer arrives in WP-26): body read-only, no "not yours" tint. */
+export const TemplateMode: Story = { args: { editableRegions: 'template' } };
+
+export const Zoomed: Story = { args: { editableRegions: 'none', zoom: 0.6 } };
+
+/** Long letter: the approximate ±page-break marks appear per A4 interval. */
+export const PageBreak: Story = {
+  args: { editableRegions: 'none', brief: longBrief, diagnostics: [] },
+};

src/app/brief/ui/letter-composer/letter-composer.component.ts

@@ -5,18 +5,18 @@ import { ButtonComponent } from '@shared/ui/button/button.component';
 import { AlertComponent } from '@shared/ui/alert/alert.component';
 import { PlaceholderOption } from '@shared/ui/rich-text-editor/rich-text-editor.component';
 import { Brief, LibraryPassage } from '@brief/domain/brief';
+import { OrgTemplate } from '@brief/domain/org-template';
 import { Diagnostic } from '@brief/domain/placeholders';
 import { BriefMsg } from '@brief/domain/brief.machine';
-import { LetterSectionComponent } from '@brief/ui/letter-section/letter-section.component';
+import { LetterCanvasComponent } from '@brief/ui/letter-canvas/letter-canvas.component';
-import { LetterPreviewComponent } from '@brief/ui/letter-preview/letter-preview.component';
 import { DiagnosticsPanelComponent } from '@brief/ui/diagnostics-panel/diagnostics-panel.component';
 import { RejectionCommentsComponent } from '@brief/ui/rejection-comments/rejection-comments.component';
 
-/** Organism: the whole letter — status badge, the editable sections (drafter) or a
+/** Organism: the whole letter flow — status badge, the letter canvas (editable in
-    read-only preview (approver / locked), the diagnostics panel, and the action bar
+    place for the drafter, read-only for approver/locked), the diagnostics panel, and
-    appropriate to status × permission. Presentational: emits edit + transition
+    the action bar appropriate to status × permission. Presentational: emits edit +
-    intents; the canEdit/canApprove/canReject/canSend inputs are server-computed
+    transition intents; the canEdit/canApprove/canReject/canSend inputs are
-    decision flags (PRD-0002 phase P1) — this component never derives them. */
+    server-computed decision flags (PRD-0002 phase P1) — this component never derives them. */
 @Component({
   selector: 'app-letter-composer',
   imports: [
@@ -24,8 +24,7 @@ import { RejectionCommentsComponent } from '@brief/ui/rejection-comments/rejecti
     StatusBadgeComponent,
     ButtonComponent,
     AlertComponent,
-    LetterSectionComponent,
+    LetterCanvasComponent,
-    LetterPreviewComponent,
     DiagnosticsPanelComponent,
     RejectionCommentsComponent,
   ],
@@ -42,10 +41,6 @@ import { RejectionCommentsComponent } from '@brief/ui/rejection-comments/rejecti
         flex-wrap: wrap;
         margin-block-end: var(--rhc-space-max-lg);
       }
-      .sections {
-        display: grid;
-        gap: var(--rhc-space-max-2xl);
-      }
       .panel {
         margin-block: var(--rhc-space-max-xl);
       }
@@ -68,21 +63,15 @@ import { RejectionCommentsComponent } from '@brief/ui/rejection-comments/rejecti
       <app-rejection-comments mode="show" [comments]="rejectComments()" />
     }
 
-    @if (canEdit()) {
+    <app-letter-canvas
-      <div class="sections">
+      [brief]="brief()"
-        @for (section of brief().sections; track section.sectionKey) {
+      [orgTemplate]="orgTemplate()"
-          <app-letter-section
+      [editableRegions]="canEdit() ? 'content' : 'none'"
-            [section]="section"
+      [availablePassages]="availablePassages()"
-            [availablePassages]="availablePassages()"
+      [placeholders]="menu()"
-            [placeholders]="menu()"
+      [diagnostics]="diagnostics()"
-            [editable]="!section.locked"
+      (edit)="edit.emit($event)"
-            (edit)="edit.emit($event)"
+    />
-          />
-        }
-      </div>
-    } @else {
-      <app-letter-preview [brief]="brief()" [diagnostics]="diagnostics()" />
-    }
 
     <div class="panel">
       <app-diagnostics-panel [diagnostics]="diagnostics()" (locate)="locate.emit($event)" />
@@ -139,6 +128,7 @@ import { RejectionCommentsComponent } from '@brief/ui/rejection-comments/rejecti
 })
 export class LetterComposerComponent {
   brief = input.required<Brief>();
+  orgTemplate = input.required<OrgTemplate>();
   availablePassages = input<readonly LibraryPassage[]>([]);
   diagnostics = input<readonly Diagnostic[]>([]);
   canEdit = input(false);

src/app/brief/ui/letter-composer/letter-composer.stories.ts

@@ -2,6 +2,20 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { LetterComposerComponent } from './letter-composer.component';
 import { Brief, BriefDecisions, BriefStatus, LibraryPassage } from '@brief/domain/brief';
 import { allDiagnostics } from '@brief/domain/brief';
+import { OrgTemplate } from '@brief/domain/org-template';
+
+const orgTemplate: OrgTemplate = {
+  subOrgId: 'cibg-registers',
+  orgName: 'CIBG — Registers',
+  returnAddress: 'BIG-register\nPostbus 00000\n2500 AA Den Haag',
+  footerContact: 'www.bigregister.nl\ninfo@voorbeeld.example',
+  footerLegal: 'Ons kenmerk vermelden bij correspondentie.',
+  signatureName: 'A. de Vries',
+  signatureRole: 'Hoofd Registratie',
+  signatureClosing: 'Met vriendelijke groet,',
+  margins: { topMm: 25, rightMm: 25, bottomMm: 25, leftMm: 25 },
+  version: 1,
+};
 
 const passages: LibraryPassage[] = [
   {
@@ -106,15 +120,16 @@ function brief(status: BriefStatus): Brief {
 const render = (b: Brief, decisions: BriefDecisions) => ({
   props: {
     brief: b,
+    orgTemplate,
     availablePassages: passages,
     diagnostics: allDiagnostics(b),
     ...decisions,
     canSubmit: true,
     busy: false,
   },
-  template: `<app-letter-composer [brief]="brief" [availablePassages]="availablePassages" [diagnostics]="diagnostics"
+  template: `<app-letter-composer [brief]="brief" [orgTemplate]="orgTemplate" [availablePassages]="availablePassages"
-    [canEdit]="canEdit" [canApprove]="canApprove" [canReject]="canReject" [canSend]="canSend"
+    [diagnostics]="diagnostics" [canEdit]="canEdit" [canApprove]="canApprove" [canReject]="canReject"
-    [canSubmit]="canSubmit" [busy]="busy"></app-letter-composer>`,
+    [canSend]="canSend" [canSubmit]="canSubmit" [busy]="busy"></app-letter-composer>`,
 });
 
 const meta: Meta<LetterComposerComponent> = {

src/app/brief/ui/letter-preview/letter-preview.component.ts

@@ -1,175 +0,0 @@
-import { Component, computed, input, signal } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { HeadingComponent } from '@shared/ui/heading/heading.component';
-import { ButtonComponent } from '@shared/ui/button/button.component';
-import { PlaceholderChipComponent } from '@shared/ui/placeholder-chip/placeholder-chip.component';
-import { formatDatumNl } from '@shared/kernel/datum';
-import { Paragraph } from '@shared/kernel/rich-text';
-import { Brief, LetterBlock } from '@brief/domain/brief';
-import { Diagnostic } from '@brief/domain/placeholders';
-
-/** A run of consecutive lines to render together: a list (bullet/number) or a single plain line. */
-type PreviewSegment = {
-  readonly list: 'bullet' | 'number' | null;
-  readonly items: readonly Paragraph[];
-};
-
-function groupParagraphs(paras: readonly Paragraph[]): PreviewSegment[] {
-  const out: { list: 'bullet' | 'number' | null; items: Paragraph[] }[] = [];
-  for (const para of paras) {
-    const kind = para.list ?? null;
-    const last = out[out.length - 1];
-    if (kind && last && last.list === kind) last.items.push(para);
-    else out.push({ list: kind, items: [para] });
-  }
-  return out;
-}
-
-// Illustrative values for the "Voorbeeld" toggle — what send resolves server-side.
-const SAMPLE_VALUES: Record<string, string> = {
-  naam_zorgverlener: 'J. Jansen',
-  big_nummer: '12345678901',
-};
-
-/** Organism: read-only rendering of the letter as the approver/recipient sees it.
-    Placeholders show as labelled chips (values are resolved server-side only at send);
-    a chip flagged by the linter shows its error/warning state. The "Voorbeeld" toggle
-    fills auto-resolvable placeholders with sample values to preview the sent result. */
-@Component({
-  selector: 'app-letter-preview',
-  imports: [NgTemplateOutlet, HeadingComponent, ButtonComponent, PlaceholderChipComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .toolbar {
-        display: flex;
-        justify-content: flex-end;
-        margin-block-end: var(--rhc-space-max-sm);
-      }
-      .letter {
-        background: var(--rhc-color-wit);
-        border: var(--rhc-border-width-sm) solid var(--rhc-color-border-default);
-        border-radius: var(--rhc-border-radius-md);
-        padding: var(--rhc-space-max-2xl);
-      }
-      section {
-        margin-block-end: var(--rhc-space-max-xl);
-      }
-      p {
-        margin: 0 0 var(--rhc-space-max-sm);
-      }
-      ul,
-      ol {
-        margin: 0 0 var(--rhc-space-max-sm);
-        padding-inline-start: 1.4em;
-      }
-    `,
-  ],
-  template: `
-    <ng-template #line let-nodes>
-      @for (node of nodes; track $index) {
-        @switch (node.type) {
-          @case ('text') {
-            <span>{{ node.text }}</span>
-          }
-          @case ('lineBreak') {
-            <br />
-          }
-          @case ('placeholder') {
-            @if (showSample() && autoFor(node.key)) {
-              <span>{{ sampleFor(node.key) }}</span>
-            } @else {
-              <app-placeholder-chip
-                [label]="labelFor(node.key)"
-                [autoResolvable]="autoFor(node.key)"
-                [state]="stateFor(node.key)"
-              />
-            }
-          }
-        }
-      }
-    </ng-template>
-
-    <div class="toolbar">
-      <app-button
-        variant="subtle"
-        (click)="showSample.set(!showSample())"
-        [attr.aria-pressed]="showSample()"
-      >
-        {{ showSample() ? hideSampleLabel() : showSampleLabel() }}
-      </app-button>
-    </div>
-
-    <div class="letter">
-      @for (section of brief().sections; track section.sectionKey) {
-        <section>
-          <app-heading [level]="3">{{ section.title }}</app-heading>
-          @for (block of section.blocks; track block.blockId) {
-            @for (seg of segmentsOf(block); track $index) {
-              @if (seg.list === 'bullet') {
-                <ul>
-                  @for (para of seg.items; track $index) {
-                    <li>
-                      <ng-container
-                        [ngTemplateOutlet]="line"
-                        [ngTemplateOutletContext]="{ $implicit: para.nodes }"
-                      />
-                    </li>
-                  }
-                </ul>
-              } @else if (seg.list === 'number') {
-                <ol>
-                  @for (para of seg.items; track $index) {
-                    <li>
-                      <ng-container
-                        [ngTemplateOutlet]="line"
-                        [ngTemplateOutletContext]="{ $implicit: para.nodes }"
-                      />
-                    </li>
-                  }
-                </ol>
-              } @else {
-                <p>
-                  <ng-container
-                    [ngTemplateOutlet]="line"
-                    [ngTemplateOutletContext]="{ $implicit: seg.items[0].nodes }"
-                  />
-                </p>
-              }
-            }
-          }
-        </section>
-      }
-    </div>
-  `,
-})
-export class LetterPreviewComponent {
-  brief = input.required<Brief>();
-  diagnostics = input<readonly Diagnostic[]>([]);
-
-  showSampleLabel = input($localize`:@@brief.preview.showSample:Voorbeeld met testwaarden`);
-  hideSampleLabel = input($localize`:@@brief.preview.hideSample:Testwaarden verbergen`);
-
-  protected showSample = signal(false);
-  private today = formatDatumNl(new Date());
-
-  private defs = computed(() => new Map(this.brief().placeholders.map((p) => [p.key, p])));
-  private worst = computed(() => {
-    const m = new Map<string, 'error' | 'warning'>();
-    for (const d of this.diagnostics()) {
-      if (!d.placeholderKey) continue;
-      if (d.severity === 'error') m.set(d.placeholderKey, 'error');
-      else if (!m.has(d.placeholderKey)) m.set(d.placeholderKey, 'warning');
-    }
-    return m;
-  });
-
-  protected segmentsOf = (block: LetterBlock) => groupParagraphs(block.content.paragraphs);
-  protected labelFor = (key: string) => this.defs().get(key)?.label ?? key;
-  protected autoFor = (key: string) => this.defs().get(key)?.autoResolvable ?? false;
-  protected stateFor = (key: string): 'ok' | 'warning' | 'error' => this.worst().get(key) ?? 'ok';
-  protected sampleFor = (key: string) =>
-    SAMPLE_VALUES[key] ?? (key === 'datum' ? this.today : this.labelFor(key));
-}

src/app/brief/ui/letter-preview/letter-preview.stories.ts

@@ -1,88 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { Brief } from '@brief/domain/brief';
-import { Diagnostic } from '@brief/domain/placeholders';
-import { LetterPreviewComponent } from './letter-preview.component';
-
-const brief: Brief = {
-  briefId: 'b1',
-  beroep: 'arts',
-  templateId: 't1',
-  drafterId: 'demo-drafter',
-  status: { tag: 'draft' },
-  placeholders: [
-    { key: 'naam_zorgverlener', label: 'Naam zorgverlener', autoResolvable: true },
-    { key: 'reden_besluit', label: 'Reden besluit', autoResolvable: false },
-  ],
-  sections: [
-    {
-      sectionKey: 'aanhef',
-      title: 'Aanhef',
-      required: true,
-      locked: true,
-      blocks: [
-        {
-          type: 'passage',
-          blockId: 'local-1',
-          sourcePassageId: 'p1',
-          sourceVersion: 1,
-          edited: false,
-          content: {
-            paragraphs: [
-              {
-                nodes: [
-                  { type: 'text', text: 'Geachte heer/mevrouw ' },
-                  { type: 'placeholder', key: 'naam_zorgverlener' },
-                  { type: 'text', text: ',' },
-                ],
-              },
-            ],
-          },
-        },
-      ],
-    },
-    {
-      sectionKey: 'kern',
-      title: 'Kern van het besluit',
-      required: true,
-      locked: false,
-      blocks: [
-        {
-          type: 'freeText',
-          blockId: 'local-2',
-          content: {
-            paragraphs: [
-              {
-                nodes: [
-                  { type: 'text', text: 'Wij hebben besloten om reden ' },
-                  { type: 'placeholder', key: 'reden_besluit' },
-                  { type: 'text', text: '.' },
-                ],
-              },
-            ],
-          },
-        },
-      ],
-    },
-  ],
-};
-
-const diagnostics: Diagnostic[] = [
-  {
-    severity: 'warning',
-    code: 'unresolved-at-send',
-    placeholderKey: 'reden_besluit',
-    location: { blockId: 'local-2', paragraphIndex: 0, nodeIndex: 1 },
-    message: '"Reden besluit" is nog niet ingevuld.',
-  },
-];
-
-const meta: Meta<LetterPreviewComponent> = {
-  title: 'Domein/Brief/Letter Preview',
-  component: LetterPreviewComponent,
-  args: { brief, diagnostics },
-};
-export default meta;
-type Story = StoryObj<LetterPreviewComponent>;
-
-export const Default: Story = {};
-export const ZonderBevindingen: Story = { args: { diagnostics: [] } };

src/app/brief/ui/passage-picker/passage-picker.component.ts

@@ -14,6 +14,7 @@ import { LibraryPassage } from '@brief/domain/brief';
     `
       :host {
         display: block;
+        background: var(--rhc-color-wit, #fff);
         border: var(--rhc-border-width-sm) solid var(--rhc-color-border-default);
         border-radius: var(--rhc-border-radius-md);
         padding: var(--rhc-space-max-md);
@@ -35,6 +36,7 @@ import { LibraryPassage } from '@brief/domain/brief';
       @for (p of passages(); track p.passageId) {
         <li>
           <app-checkbox
+            [checkboxId]="'passage-' + p.passageId"
             [label]="p.label"
             [ngModel]="!!checked()[p.passageId]"
             (ngModelChange)="set(p.passageId, $event)"

src/app/shared/domain/capability.ts

@@ -2,4 +2,4 @@
  * A stable, namespaced capability string (PRD-0002 §5a), e.g. `brief:approve`.
  * Server-resolved and opaque to the FE — never derived from a role client-side.
  */
-export type Capability = 'brief:approve' | 'brief:reject' | 'brief:send';
+export type Capability = 'brief:approve' | 'brief:reject' | 'brief:send' | 'orgtemplate:edit';

src/app/shared/domain/role.ts

@@ -1,7 +1,8 @@
 /**
- * The two-person letter workflow's role: who is acting, a drafter or an approver.
+ * The letter workflow's acting role: drafter or approver for the two-person
+ * compose/review flow, admin for org-template management (WP-23, Brief v2).
  * A pure domain type (no framework, no reading mechanism) — the `?role=` reader and
  * the X-Role header live in shared/infrastructure/role.ts. Consumers (brief.store,
  * letter-composer) depend on this type, not on how the role is obtained.
  */
-export type Role = 'drafter' | 'approver';
+export type Role = 'drafter' | 'approver' | 'admin';

src/app/shared/infrastructure/api-client.ts

@@ -1279,6 +1279,257 @@ export class ApiClient {
         }
         return Promise.resolve<BriefViewDto>(null as any);
     }
+
+    /**
+     * @return OK
+     */
+    orgTemplates(): Promise<SubOrgSummaryDto[]> {
+        let url_ = this.baseUrl + "/api/v1/admin/org-templates";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processOrgTemplates(_response);
+        });
+    }
+
+    protected processOrgTemplates(response: Response): Promise<SubOrgSummaryDto[]> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as SubOrgSummaryDto[];
+            return result200;
+            });
+        } else if (status === 403) {
+            return response.text().then((_responseText) => {
+            let result403: any = null;
+            result403 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ProblemDetails;
+            return throwException("Forbidden", status, _responseText, _headers, result403);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<SubOrgSummaryDto[]>(null as any);
+    }
+
+    /**
+     * @return OK
+     */
+    orgTemplateGET(subOrgId: string): Promise<OrgTemplateAdminViewDto> {
+        let url_ = this.baseUrl + "/api/v1/admin/org-template/{subOrgId}";
+        if (subOrgId === undefined || subOrgId === null)
+            throw new globalThis.Error("The parameter 'subOrgId' must be defined.");
+        url_ = url_.replace("{subOrgId}", encodeURIComponent("" + subOrgId));
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processOrgTemplateGET(_response);
+        });
+    }
+
+    protected processOrgTemplateGET(response: Response): Promise<OrgTemplateAdminViewDto> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as OrgTemplateAdminViewDto;
+            return result200;
+            });
+        } else if (status === 403) {
+            return response.text().then((_responseText) => {
+            let result403: any = null;
+            result403 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ProblemDetails;
+            return throwException("Forbidden", status, _responseText, _headers, result403);
+            });
+        } else if (status === 404) {
+            return response.text().then((_responseText) => {
+            return throwException("Not Found", status, _responseText, _headers);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<OrgTemplateAdminViewDto>(null as any);
+    }
+
+    /**
+     * @return OK
+     */
+    orgTemplatePUT(subOrgId: string, body: SaveOrgTemplateRequest): Promise<OrgTemplateAdminViewDto> {
+        let url_ = this.baseUrl + "/api/v1/admin/org-template/{subOrgId}";
+        if (subOrgId === undefined || subOrgId === null)
+            throw new globalThis.Error("The parameter 'subOrgId' must be defined.");
+        url_ = url_.replace("{subOrgId}", encodeURIComponent("" + subOrgId));
+        url_ = url_.replace(/[?&]$/, "");
+
+        const content_ = JSON.stringify(body);
+
+        let options_: RequestInit = {
+            body: content_,
+            method: "PUT",
+            headers: {
+                "Content-Type": "application/json",
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processOrgTemplatePUT(_response);
+        });
+    }
+
+    protected processOrgTemplatePUT(response: Response): Promise<OrgTemplateAdminViewDto> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as OrgTemplateAdminViewDto;
+            return result200;
+            });
+        } else if (status === 400) {
+            return response.text().then((_responseText) => {
+            let result400: any = null;
+            result400 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ProblemDetails;
+            return throwException("Bad Request", status, _responseText, _headers, result400);
+            });
+        } else if (status === 403) {
+            return response.text().then((_responseText) => {
+            let result403: any = null;
+            result403 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ProblemDetails;
+            return throwException("Forbidden", status, _responseText, _headers, result403);
+            });
+        } else if (status === 404) {
+            return response.text().then((_responseText) => {
+            return throwException("Not Found", status, _responseText, _headers);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<OrgTemplateAdminViewDto>(null as any);
+    }
+
+    /**
+     * @return OK
+     */
+    orgTemplatePublish(subOrgId: string): Promise<PublishOrgTemplateResponse> {
+        let url_ = this.baseUrl + "/api/v1/admin/org-template/{subOrgId}/publish";
+        if (subOrgId === undefined || subOrgId === null)
+            throw new globalThis.Error("The parameter 'subOrgId' must be defined.");
+        url_ = url_.replace("{subOrgId}", encodeURIComponent("" + subOrgId));
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "POST",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processOrgTemplatePublish(_response);
+        });
+    }
+
+    protected processOrgTemplatePublish(response: Response): Promise<PublishOrgTemplateResponse> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as PublishOrgTemplateResponse;
+            return result200;
+            });
+        } else if (status === 403) {
+            return response.text().then((_responseText) => {
+            let result403: any = null;
+            result403 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ProblemDetails;
+            return throwException("Forbidden", status, _responseText, _headers, result403);
+            });
+        } else if (status === 404) {
+            return response.text().then((_responseText) => {
+            return throwException("Not Found", status, _responseText, _headers);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<PublishOrgTemplateResponse>(null as any);
+    }
+
+    /**
+     * @return OK
+     */
+    orgTemplateRollback(subOrgId: string, version: number): Promise<OrgTemplateAdminViewDto> {
+        let url_ = this.baseUrl + "/api/v1/admin/org-template/{subOrgId}/rollback/{version}";
+        if (subOrgId === undefined || subOrgId === null)
+            throw new globalThis.Error("The parameter 'subOrgId' must be defined.");
+        url_ = url_.replace("{subOrgId}", encodeURIComponent("" + subOrgId));
+        if (version === undefined || version === null)
+            throw new globalThis.Error("The parameter 'version' must be defined.");
+        url_ = url_.replace("{version}", encodeURIComponent("" + version));
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "POST",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processOrgTemplateRollback(_response);
+        });
+    }
+
+    protected processOrgTemplateRollback(response: Response): Promise<OrgTemplateAdminViewDto> {
+        const status = response.status;
+        let _headers: any = {}; if (response.headers && response.headers.forEach) { response.headers.forEach((v: any, k: any) => _headers[k] = v); };
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+            let result200: any = null;
+            result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as OrgTemplateAdminViewDto;
+            return result200;
+            });
+        } else if (status === 403) {
+            return response.text().then((_responseText) => {
+            let result403: any = null;
+            result403 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver) as ProblemDetails;
+            return throwException("Forbidden", status, _responseText, _headers, result403);
+            });
+        } else if (status === 404) {
+            return response.text().then((_responseText) => {
+            return throwException("Not Found", status, _responseText, _headers);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<OrgTemplateAdminViewDto>(null as any);
+    }
 }
 
 export interface AantekeningDto {
@@ -1356,6 +1607,7 @@ export interface BriefViewDto {
     brief?: BriefDto;
     availablePassages?: LibraryPassageDto[] | undefined;
     decisions?: BriefDecisionsDto;
+    orgTemplate?: OrgTemplateDto;
 }
 
 export interface BrpAddressDto {
@@ -1467,10 +1719,44 @@ export interface ManualDiplomaPolicyDto {
     policyQuestions?: PolicyQuestionDto[] | undefined;
 }
 
+export interface MarginsDto {
+    topMm?: number;
+    rightMm?: number;
+    bottomMm?: number;
+    leftMm?: number;
+}
+
 export interface MeDto {
     capabilities?: string[] | undefined;
 }
 
+export interface OrgTemplateAdminViewDto {
+    draft?: OrgTemplateDto;
+    publishedVersion?: number;
+    history?: OrgTemplateVersionDto[] | undefined;
+    unsentBriefs?: number;
+}
+
+export interface OrgTemplateDto {
+    subOrgId?: string | undefined;
+    orgName?: string | undefined;
+    returnAddress?: string | undefined;
+    logoDocumentId?: string | undefined;
+    footerContact?: string | undefined;
+    footerLegal?: string | undefined;
+    signatureName?: string | undefined;
+    signatureRole?: string | undefined;
+    signatureClosing?: string | undefined;
+    margins?: MarginsDto;
+    version?: number;
+}
+
+export interface OrgTemplateVersionDto {
+    version?: number;
+    publishedAt?: string | undefined;
+    template?: OrgTemplateDto;
+}
+
 export interface ParagraphDto {
     nodes?: RichTextNodeDto[] | undefined;
     list?: string | undefined;
@@ -1506,6 +1792,11 @@ export interface ProblemDetails {
     [key: string]: any;
 }
 
+export interface PublishOrgTemplateResponse {
+    version?: number;
+    affectedUnsentBriefs?: number;
+}
+
 export interface ReferentieResponse {
     referentie?: string | undefined;
 }
@@ -1551,6 +1842,16 @@ export interface SaveBriefRequest {
     sections?: LetterSectionDto[] | undefined;
 }
 
+export interface SaveOrgTemplateRequest {
+    draft?: OrgTemplateDto;
+}
+
+export interface SubOrgSummaryDto {
+    subOrgId?: string | undefined;
+    orgName?: string | undefined;
+    publishedVersion?: number;
+}
+
 export interface SubmitApplicationRequest {
     diplomaHerkomst?: string | undefined;
     uren?: number | undefined;

src/app/shared/infrastructure/me.adapter.spec.ts

@@ -11,6 +11,13 @@ describe('parseMe (trust boundary)', () => {
     expect(parseMe({ capabilities: [] })).toEqual({ ok: true, value: [] });
   });
 
+  it('recognizes the admin org-template capability (WP-23)', () => {
+    expect(parseMe({ capabilities: ['orgtemplate:edit'] })).toEqual({
+      ok: true,
+      value: ['orgtemplate:edit'],
+    });
+  });
+
   it('drops unrecognized capability strings instead of rejecting the response', () => {
     const r = parseMe({ capabilities: ['brief:approve', 'unknown:future-thing'] });
     expect(r).toEqual({ ok: true, value: ['brief:approve'] });

src/app/shared/infrastructure/me.adapter.ts

@@ -3,7 +3,12 @@ import { Result, ok, err } from '@shared/kernel/fp';
 import { Capability } from '@shared/domain/capability';
 import { ApiClient } from '@shared/infrastructure/api-client';
 
-const KNOWN: readonly Capability[] = ['brief:approve', 'brief:reject', 'brief:send'];
+const KNOWN: readonly Capability[] = [
+  'brief:approve',
+  'brief:reject',
+  'brief:send',
+  'orgtemplate:edit',
+];
 
 /**
  * Infrastructure adapter for `GET /me` (PRD-0002 §6): the current principal's

src/app/shared/infrastructure/role.interceptor.ts

@@ -2,11 +2,15 @@ import { HttpInterceptorFn } from '@angular/common/http';
 import { currentRole } from './role';
 
 /**
- * Dev-only: stamps brief requests with the current `?role=` as an `X-Role` header so
+ * Dev-only: stamps role-aware requests with the current `?role=` as an `X-Role`
- * the backend can enforce the drafter/approver rules. Only brief endpoints carry it;
+ * header so the backend can enforce the drafter/approver/admin rules. Only the
- * everything else is untouched.
+ * brief, org-template and /me endpoints carry it (WP-23 widened the set — /me must
+ * see the role or `AccessStore` could never learn a capability); everything else
+ * is untouched.
  */
+const ROLE_AWARE = ['/api/v1/brief', '/api/v1/admin/org-template', '/api/v1/me'];
+
 export const roleInterceptor: HttpInterceptorFn = (req, next) => {
-  if (!req.url.includes('/api/v1/brief')) return next(req);
+  if (!ROLE_AWARE.some((prefix) => req.url.includes(prefix))) return next(req);
   return next(req.clone({ setHeaders: { 'X-Role': currentRole() } }));
 };

src/app/shared/infrastructure/role.ts

@@ -11,7 +11,6 @@ import { Role } from '@shared/domain/role';
  * longer derives permission from this value itself.
  */
 export function currentRole(): Role {
-  return new URLSearchParams(window.location.search).get('role') === 'approver'
+  const role = new URLSearchParams(window.location.search).get('role');
-    ? 'approver'
+  return role === 'approver' || role === 'admin' ? role : 'drafter';
-    : 'drafter';
 }

src/index.html

@@ -10,6 +10,9 @@
        url(../fonts|icons|images) refs resolve against the vendored folder at runtime.
        Licensed Rijksoverheid fonts are not used — styles.scss overrides the stack to system-ui. -->
     <link rel="stylesheet" href="cibg-huisstijl/css/huisstijl.min.css" />
+    <!-- The letter-rendering contract (WP-24): shared verbatim with the backend's
+       HTML preview renderer (WP-25 inlines this same file) — keep it self-contained. -->
+    <link rel="stylesheet" href="letter.css" />
   </head>
   <!-- brand--cibg activates CIBG's official palette: robijn layout chrome + lintblauw accents
      (without it, --ro-layout falls back to the blue default). -->