docs: release notes for v3.3.0-beta

.air.toml

@@ -1,11 +1,11 @@
 root = "."
-tmp_dir = "tmp"
+tmp_dir = "tmp/air"
 
 [build]
-  cmd = "go build -tags nofrontend -o ./tmp/renewcms ./cmd/server"
-  bin = "tmp/renewcms"
+  cmd = "go build -tags nofrontend -o ./tmp/air/renewcms ./cmd/server"
+  bin = "tmp/air/renewcms"
   delay = 500
-  exclude_dir = ["tmp", "bin", "data", "web", "features", "docs", "internal/infrastructure/assets/dist", ".claude"]
+  exclude_dir = ["tmp", "tmp/air", "bin", "data", "web", "features", "docs", "internal/infrastructure/assets/dist", ".claude"]
   exclude_regex = ["_test.go"]
   include_ext = ["go", "html"]
   log = "build-errors.log"

README.md

@@ -23,7 +23,7 @@ docker compose pull
 docker compose up -d                # http://localhost:8080
 ```
 
-Upgrade with `docker compose pull && docker compose up -d`. The image `git.floriansylvain.fr/fsylvain/renewcms` is published by the maintainer with `task docker:publish` (no CI). Tags: `vX.Y.Z`, `X.Y.Z`, `X.Y` and `latest` for a stable release; `vX.Y.Z-<pre>`, `X.Y.Z-<pre>` and the moving `beta` or `rc` for a pre-release (`latest` never moves for those, so the default is `beta` for now). To build from source use the override described in **[docs/docker.md](docs/docker.md)**.
+Upgrade with `docker compose pull && docker compose up -d`. The image is `git.floriansylvain.fr/fsylvain/renewcms`. Every release is a pre-release for now, so the default tag is the moving `beta`. Pin a version with `RENEWCMS_IMAGE`. Tags, building from source and publishing are in **[docs/docker.md](docs/docker.md)**.
 
 ### Updates from the browser
 
@@ -48,10 +48,11 @@ task dev                # API with hot reload + Vite HMR → http://localhost:51
 | [docs/docker.md](docs/docker.md) | Running RenewCMS in Docker: image, Compose, data volume, backups, reverse proxy, tags, upgrades, publishing |
 | [docs/configuration.md](docs/configuration.md) | Every environment variable |
 | [docs/architecture.md](docs/architecture.md) | Backend layering and how the SPA is embedded |
-
-## API Usage
-
-TODO
+| [docs/performance.md](docs/performance.md) | Measured costs, such as the `?seo=` article filter |
+| [docs/api.md](docs/api.md) | API reference: authentication, API keys, routes and the activity log |
+| [docs/api/articles.md](docs/api/articles.md) | Reading articles: pagination, search, `format` and body schemas |
+| [docs/image-variants.md](docs/image-variants.md) | Image variants and their cache |
+| [docs/release-notes.md](docs/release-notes.md) | Release notes format, the published releases and how to publish one |
 
 ## TODOs
 

api/dependecyInjection.go

@@ -4,10 +4,12 @@ import (
 	domainAPIKey "RenewCMS/internal/domain/apikey"
 	domainArticle "RenewCMS/internal/domain/article"
 	domainAudit "RenewCMS/internal/domain/audit"
+	domainAuthor "RenewCMS/internal/domain/author"
 	domainImage "RenewCMS/internal/domain/image"
 	domainInvite "RenewCMS/internal/domain/invite"
 	domainMail "RenewCMS/internal/domain/mail"
 	domainPurge "RenewCMS/internal/domain/purge"
+	domainSite "RenewCMS/internal/domain/site"
 	domainUpdate "RenewCMS/internal/domain/update"
 	domainUser "RenewCMS/internal/domain/user"
 	"RenewCMS/internal/infrastructure/auditing"
@@ -46,7 +48,21 @@ type UseCases struct {
 	GetArticleUseCase               *useCases.GetArticleUseCase
 	ListArticlesUseCase             *useCases.ListArticlesUseCase
 	UpdateArticleUseCase            *useCases.UpdateArticleUseCase
+	ResolveArticleSEOUseCase        *useCases.ResolveArticleSEOUseCase
+	CheckArticleSEOUseCase          *useCases.CheckArticleSEOUseCase
+	ListSitemapUseCase              *useCases.ListSitemapUseCase
 	DeleteArticleUseCase            *useCases.DeleteArticleUseCase
+	ListAuthorsUseCase              *useCases.ListAuthorsUseCase
+	CreateAuthorUseCase             *useCases.CreateAuthorUseCase
+	CreateMyAuthorUseCase           *useCases.CreateMyAuthorUseCase
+	UpdateAuthorUseCase             *useCases.UpdateAuthorUseCase
+	DeleteAuthorUseCase             *useCases.DeleteAuthorUseCase
+	GetMyAuthorUseCase              *useCases.GetMyAuthorUseCase
+	ListSitesUseCase                *useCases.ListSitesUseCase
+	CreateSiteUseCase               *useCases.CreateSiteUseCase
+	UpdateSiteUseCase               *useCases.UpdateSiteUseCase
+	SetDefaultSiteUseCase           *useCases.SetDefaultSiteUseCase
+	DeleteSiteUseCase               *useCases.DeleteSiteUseCase
 	GetUserUseCase                  *useCases.GetUserUseCase
 	CreateUserUseCase               *useCases.CreateUserUseCase
 	AuthenticateUserUseCase         *useCases.AuthenticateUserUseCase
@@ -123,6 +139,8 @@ func (c *UseCases) RunSchedulers(ctx context.Context) {
 
 type Repositories struct {
 	ArticleRepo       domainArticle.Repository
+	SiteRepo          domainSite.Repository
+	AuthorRepo        domainAuthor.Repository
 	UserRepo          domainUser.Repository
 	ImageRepo         domainImage.Repository
 	VariantRepo       domainImage.VariantRepository
@@ -241,7 +259,7 @@ func openDatabase(settings config.Settings) *database.Connection {
 	if err != nil {
 		panic("Unable to open the database: " + err.Error())
 	}
-	if err := database.Migrate(connection.DB); err != nil {
+	if err := database.Migrate(connection.DB, settings.PublicURL); err != nil {
 		panic("Failed to migrate database: " + err.Error())
 	}
 	return connection
@@ -261,6 +279,8 @@ func getRepositories(connection *database.Connection, settings config.Settings)
 	variantFiles := persistence.NewVariantFileRepository(db)
 	return &Repositories{
 		ArticleRepo:       persistence.NewArticleRepository(db),
+		SiteRepo:          persistence.NewSiteRepository(db),
+		AuthorRepo:        persistence.NewAuthorRepository(db),
 		UserRepo:          persistence.NewUserRepository(db),
 		ImageRepo:         persistence.NewImageRepository(db),
 		VariantRepo:       persistence.NewVariantRepository(db),
@@ -293,9 +313,9 @@ func getUseCases(repos *Repositories, imageStorage domainImage.Storage, settings
 	renderer := markdown.NewConverter()
 	keyGenerator := hashing.NewSHA256KeyGenerator()
 	recorder := auditing.NewRecorder(repos.AuditRepo, time.Now, log.Default())
-	mergeMedia := useCases.NewMergeMediaUseCase(repos.ImageRepo, repos.ArticleRepo, imageStorage, repos.VariantFileRepo, recorder)
+	mergeMedia := useCases.NewMergeMediaUseCase(repos.ImageRepo, repos.ArticleRepo, imageStorage, repos.VariantFileRepo, recorder, repos.SiteRepo, repos.AuthorRepo)
 
-	runPurge := useCases.NewRunPurgeUseCase(repos.ImageRepo, repos.ArticleRepo, mergeMedia, repos.PurgeSettingsRepo, time.Now, log.Default(), recorder)
+	runPurge := useCases.NewRunPurgeUseCase(repos.ImageRepo, repos.ArticleRepo, mergeMedia, repos.PurgeSettingsRepo, time.Now, log.Default(), recorder, repos.SiteRepo, repos.AuthorRepo)
 	purgeScheduler := useCases.NewPurgeSchedulerUseCase(repos.PurgeSettingsRepo, runPurge, recorder)
 	activityCleanup := useCases.NewCleanupActivityUseCase(repos.AuditRepo, repos.AuditSettingsRepo, recorder)
 
@@ -306,11 +326,25 @@ func getUseCases(repos *Repositories, imageStorage domainImage.Storage, settings
 		PurgeScheduler:                  scheduler.NewSystemRunner(purgeScheduler, log.Default()),
 		ActivityCleanupScheduler:        scheduler.NewSystemCleanupRunner(activityCleanup, log.Default()),
 		Token:                           jwtauth.New("HS256", []byte(settings.JWTSecret), nil),
-		CreateArticleUseCase:            useCases.NewCreateArticleUseCase(repos.ArticleRepo, renderer, recorder),
+		CreateArticleUseCase:            useCases.NewCreateArticleUseCase(repos.ArticleRepo, renderer, recorder, repos.SiteRepo, repos.AuthorRepo),
 		GetArticleUseCase:               useCases.NewGetArticleUseCase(repos.ArticleRepo, renderer),
-		ListArticlesUseCase:             useCases.NewListArticlesUseCase(repos.ArticleRepo, renderer),
-		UpdateArticleUseCase:            useCases.NewUpdateArticleUseCase(repos.ArticleRepo, renderer, recorder),
+		ListArticlesUseCase:             useCases.NewListArticlesUseCase(repos.ArticleRepo, renderer, repos.SiteRepo),
+		UpdateArticleUseCase:            useCases.NewUpdateArticleUseCase(repos.ArticleRepo, renderer, recorder, repos.SiteRepo, repos.AuthorRepo, repos.ImageRepo),
 		DeleteArticleUseCase:            useCases.NewDeleteArticleUseCase(repos.ArticleRepo, recorder),
+		ResolveArticleSEOUseCase:        useCases.NewResolveArticleSEOUseCase(repos.ArticleRepo, repos.SiteRepo, repos.ImageRepo),
+		CheckArticleSEOUseCase:          useCases.NewCheckArticleSEOUseCase(repos.ArticleRepo, repos.SiteRepo, repos.ImageRepo),
+		ListSitemapUseCase:              useCases.NewListSitemapUseCase(repos.ArticleRepo, repos.SiteRepo),
+		ListAuthorsUseCase:              useCases.NewListAuthorsUseCase(repos.AuthorRepo, repos.UserRepo),
+		CreateAuthorUseCase:             useCases.NewCreateAuthorUseCase(repos.AuthorRepo, repos.UserRepo, repos.ImageRepo, recorder),
+		CreateMyAuthorUseCase:           useCases.NewCreateMyAuthorUseCase(repos.AuthorRepo, repos.UserRepo, recorder),
+		UpdateAuthorUseCase:             useCases.NewUpdateAuthorUseCase(repos.AuthorRepo, repos.UserRepo, repos.ImageRepo, recorder),
+		DeleteAuthorUseCase:             useCases.NewDeleteAuthorUseCase(repos.AuthorRepo, recorder),
+		GetMyAuthorUseCase:              useCases.NewGetMyAuthorUseCase(repos.AuthorRepo),
+		ListSitesUseCase:                useCases.NewListSitesUseCase(repos.SiteRepo),
+		CreateSiteUseCase:               useCases.NewCreateSiteUseCase(repos.SiteRepo, repos.ImageRepo, recorder),
+		UpdateSiteUseCase:               useCases.NewUpdateSiteUseCase(repos.SiteRepo, repos.ImageRepo, recorder),
+		SetDefaultSiteUseCase:           useCases.NewSetDefaultSiteUseCase(repos.SiteRepo, recorder),
+		DeleteSiteUseCase:               useCases.NewDeleteSiteUseCase(repos.SiteRepo, recorder),
 		GetUserUseCase:                  useCases.NewGetUserUseCase(repos.UserRepo),
 		CreateUserUseCase:               useCases.NewCreateUserUseCase(repos.UserRepo, hasher, repos.MailRepo, settings.PublicURL, recorder),
 		AuthenticateUserUseCase:         useCases.NewAuthenticateUserUseCase(repos.UserRepo, hasher, recorder),
@@ -329,14 +363,14 @@ func getUseCases(repos *Repositories, imageStorage domainImage.Storage, settings
 		SendMailUseCase:                 useCases.NewSendMailUseCase(repos.MailRepo),
 		CreateImageUseCase:              useCases.NewCreateImageUseCase(repos.ImageRepo, imageStorage, recorder),
 		OpenMediaUseCase:                useCases.NewOpenMediaUseCase(imageStorage),
-		ListMediaUseCase:                useCases.NewListMediaUseCase(repos.ImageRepo, repos.ArticleRepo, repos.UserRepo, repos.VariantFileRepo),
+		ListMediaUseCase:                useCases.NewListMediaUseCase(repos.ImageRepo, repos.ArticleRepo, repos.UserRepo, repos.VariantFileRepo, repos.SiteRepo, repos.AuthorRepo),
 		RenameMediaUseCase:              useCases.NewRenameMediaUseCase(repos.ImageRepo, recorder),
-		DeleteMediaUseCase:              useCases.NewDeleteMediaUseCase(repos.ImageRepo, imageStorage, repos.VariantFileRepo, recorder),
+		DeleteMediaUseCase:              useCases.NewDeleteMediaUseCase(repos.ImageRepo, imageStorage, repos.VariantFileRepo, recorder, repos.SiteRepo, repos.AuthorRepo, repos.ArticleRepo),
 		MergeMediaUseCase:               mergeMedia,
-		GetMediaUsageUseCase:            useCases.NewGetMediaUsageUseCase(repos.ImageRepo, repos.ArticleRepo),
+		GetMediaUsageUseCase:            useCases.NewGetMediaUsageUseCase(repos.ImageRepo, repos.ArticleRepo, repos.SiteRepo, repos.AuthorRepo),
 		GetPurgeSettingsUseCase:         useCases.NewGetPurgeSettingsUseCase(repos.PurgeSettingsRepo),
 		UpdatePurgeSettingsUseCase:      useCases.NewUpdatePurgeSettingsUseCase(repos.PurgeSettingsRepo, time.Now),
-		PreviewPurgeUseCase:             useCases.NewPreviewPurgeUseCase(repos.ImageRepo, repos.ArticleRepo),
+		PreviewPurgeUseCase:             useCases.NewPreviewPurgeUseCase(repos.ImageRepo, repos.ArticleRepo, repos.SiteRepo, repos.AuthorRepo),
 		RunPurgeUseCase:                 runPurge,
 		GetSettingsUseCase:              useCases.NewGetSettingsUseCase(settings.Version),
 		GetUpdateStatusUseCase:          useCases.NewGetUpdateStatusUseCase(repos.UpdateStore, repos.UpdateJobs, repos.UpdateHelper, repos.UpdateResults, repos.RestartRequests, settings.Version, settings.Container, time.Now),
@@ -348,7 +382,7 @@ func getUseCases(repos *Repositories, imageStorage domainImage.Storage, settings
 		ListAPIKeysUseCase:              useCases.NewListAPIKeysUseCase(repos.APIKeyRepo, repos.UserRepo, time.Now),
 		RevokeAPIKeyUseCase:             useCases.NewRevokeAPIKeyUseCase(repos.APIKeyRepo, repos.UserRepo, time.Now, recorder),
 		AuthenticateAPIKeyUseCase:       useCases.NewAuthenticateAPIKeyUseCase(repos.APIKeyRepo, keyGenerator, repos.UserRepo, time.Now),
-		ListActivityUseCase:             useCases.NewListActivityUseCase(repos.AuditRepo, repos.UserRepo, repos.ArticleRepo, repos.ImageRepo, repos.APIKeyRepo, time.Now),
+		ListActivityUseCase:             useCases.NewListActivityUseCase(repos.AuditRepo, repos.UserRepo, repos.ArticleRepo, repos.ImageRepo, repos.APIKeyRepo, time.Now, repos.SiteRepo, repos.AuthorRepo),
 		GetActivitySummaryUseCase:       useCases.NewGetActivitySummaryUseCase(repos.AuditRepo, time.Now),
 		ExportActivityUseCase:           useCases.NewExportActivityUseCase(repos.AuditRepo, time.Now),
 		GetActivityRetentionUseCase:     useCases.NewGetActivityRetentionUseCase(repos.AuditSettingsRepo, repos.AuditRepo, time.Now),

api/handlers/activity/activityHandler.go

@@ -29,10 +29,10 @@ type Handler struct {
 type filterQuery struct {
 	Q        string `validate:"max=200"`
 	Actor    string `validate:"max=40"`
-	Category string `validate:"omitempty,oneof=articles media users api_keys auth system"`
+	Category string `validate:"omitempty,oneof=articles media users api_keys auth system sites authors"`
 	Outcome  string `validate:"omitempty,oneof=all success failed"`
 	Security string `validate:"omitempty,oneof=true"`
-	Range    string `validate:"omitempty,oneof=today 7d 30d custom"`
+	Range    string `validate:"omitempty,oneof=today 7d 30d all custom"`
 	From     string `validate:"max=10"`
 	To       string `validate:"max=10"`
 }

api/handlers/article/articleHandler.go

@@ -5,16 +5,24 @@ import (
 	"RenewCMS/api/pkg/claims"
 	validator "RenewCMS/api/pkg/validator"
 	domain "RenewCMS/internal/domain/article"
+	"RenewCMS/internal/domain/author"
+	"RenewCMS/internal/domain/image"
+	"RenewCMS/internal/domain/site"
 	"RenewCMS/internal/infrastructure/useCases"
 	"encoding/json"
 	"errors"
 	"fmt"
+	"io"
 	"log"
 	"net/http"
+	"net/url"
+	"slices"
 	"strconv"
+	"strings"
 	"time"
 
 	"github.com/go-chi/chi/v5"
+	playground "github.com/go-playground/validator/v10"
 )
 
 type Handler struct {
@@ -28,7 +36,7 @@ type Handler struct {
 
 type PostArticle struct {
 	Title string `json:"title" validate:"required,min=3,max=200"`
-	Body  string `json:"body" validate:"required,max=10000"`
+	Body  string `json:"body"`
 }
 
 func NewHandler(create *useCases.CreateArticleUseCase, get *useCases.GetArticleUseCase, list *useCases.ListArticlesUseCase, delete *useCases.DeleteArticleUseCase, update *useCases.UpdateArticleUseCase, getUser *useCases.GetUserUseCase) *Handler {
@@ -42,36 +50,102 @@ func NewHandler(create *useCases.CreateArticleUseCase, get *useCases.GetArticleU
 	}
 }
 
-type articleResponse struct {
+type baseArticleResponse struct {
 	ID         uint32            `json:"id"`
 	Title      string            `json:"title"`
 	Body       json.RawMessage   `json:"body"`
 	BodyFormat domain.BodyFormat `json:"body_format"`
 	IsOnline   bool              `json:"is_online"`
+	SiteID     uint32            `json:"site_id"`
+	Authors    []author.Byline   `json:"authors"`
 	CreatedAt  time.Time         `json:"created_at"`
 	UpdatedAt  time.Time         `json:"updated_at"`
 }
 
-func toArticleResponse(article domain.Article, format domain.BodyFormat) (articleResponse, error) {
+type articleResponse struct {
+	baseArticleResponse
+	Slug              string   `json:"slug"`
+	Excerpt           string   `json:"excerpt"`
+	SEOTitle          string   `json:"seo_title"`
+	SEODescription    string   `json:"seo_description"`
+	CoverImageID      *uint32  `json:"cover_image_id"`
+	CoverImageAlt     string   `json:"cover_image_alt"`
+	SocialTitle       string   `json:"social_title"`
+	SocialDescription string   `json:"social_description"`
+	SocialImageID     *uint32  `json:"social_image_id"`
+	CanonicalURL      string   `json:"canonical_url"`
+	Noindex           bool     `json:"noindex"`
+	SEODismissed      []string `json:"seo_dismissed"`
+}
+
+type listItemResponse struct {
+	baseArticleResponse
+	Excerpt        string `json:"excerpt"`
+	Slug           string `json:"slug"`
+	SEOStatus      string `json:"seo_status"`
+	SEOSuggestions int    `json:"seo_suggestions"`
+}
+
+func toBaseResponse(article domain.Article, format domain.BodyFormat) (baseArticleResponse, error) {
 	body := json.RawMessage(article.Body)
 	if format != domain.BodyFormatJSON {
 		encoded, err := json.Marshal(article.Body)
 		if err != nil {
-			return articleResponse{}, err
+			return baseArticleResponse{}, err
 		}
 		body = encoded
 	}
-	return articleResponse{
+	authors := article.Authors
+	if authors == nil {
+		authors = []author.Byline{}
+	}
+	return baseArticleResponse{
 		ID:         article.ID,
 		Title:      article.Title,
 		Body:       body,
 		BodyFormat: format,
 		IsOnline:   article.IsOnline,
+		SiteID:     article.SiteID,
+		Authors:    authors,
 		CreatedAt:  article.CreatedAt,
 		UpdatedAt:  article.UpdatedAt,
 	}, nil
 }
 
+func toArticleResponse(article domain.Article, format domain.BodyFormat) (articleResponse, error) {
+	base, err := toBaseResponse(article, format)
+	if err != nil {
+		return articleResponse{}, err
+	}
+	dismissed := article.SEODismissed
+	if dismissed == nil {
+		dismissed = []string{}
+	}
+	return articleResponse{
+		baseArticleResponse: base,
+		Slug:                article.Slug,
+		Excerpt:             article.Excerpt,
+		SEOTitle:            article.SEOTitle,
+		SEODescription:      article.SEODescription,
+		CoverImageID:        article.CoverImageID,
+		CoverImageAlt:       article.CoverImageAlt,
+		SocialTitle:         article.SocialTitle,
+		SocialDescription:   article.SocialDescription,
+		SocialImageID:       article.SocialImageID,
+		CanonicalURL:        article.CanonicalURL,
+		Noindex:             article.Noindex,
+		SEODismissed:        dismissed,
+	}, nil
+}
+
+func toListItemResponse(article domain.Article, summary domain.SEOSummary, format domain.BodyFormat) (listItemResponse, error) {
+	base, err := toBaseResponse(article, format)
+	if err != nil {
+		return listItemResponse{}, err
+	}
+	return listItemResponse{baseArticleResponse: base, Excerpt: article.Excerpt, Slug: article.Slug, SEOStatus: summary.Status, SEOSuggestions: summary.Suggestions}, nil
+}
+
 func encodeArticle(article domain.Article, format domain.BodyFormat) ([]byte, error) {
 	response, err := toArticleResponse(article, format)
 	if err != nil {
@@ -149,17 +223,21 @@ func (h *Handler) PostArticle(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	creatorId, _ := claims.UserId(r)
 	createdArticle, err := h.CreateUseCase.CreateArticle(r.Context(), useCases.CreateArticleCommand{
-		Title:  localArticle.Title,
-		Body:   localArticle.Body,
-		Format: format,
+		Title:     localArticle.Title,
+		Body:      localArticle.Body,
+		Format:    format,
+		CreatedBy: creatorId,
 	})
 	if err != nil {
 		if errors.Is(err, domain.ErrInvalidTitle) {
 			http.Error(w, apperr.ArticleTitleErrorMessage, http.StatusBadRequest)
 			return
 		}
-		http.Error(w, "Failed to create article", http.StatusInternalServerError)
+		if !writeKnownArticleError(w, err) {
+			http.Error(w, "Failed to create article", http.StatusInternalServerError)
+		}
 		return
 	}
 
@@ -167,11 +245,62 @@ func (h *Handler) PostArticle(w http.ResponseWriter, r *http.Request) {
 }
 
 func writeArticleErrorResponse(w http.ResponseWriter, err error) {
+	if !writeKnownArticleError(w, err) {
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+	}
+}
+
+func writeKnownArticleError(w http.ResponseWriter, err error) bool {
 	if errors.Is(err, domain.ErrArticleNotFound) {
 		http.Error(w, apperr.ArticleNotFoundErrorMessage, http.StatusNotFound)
-		return
+		return true
 	}
-	http.Error(w, "Internal server error", http.StatusInternalServerError)
+	if errors.Is(err, site.ErrSiteNotFound) {
+		http.Error(w, apperr.SiteNotFoundErrorMessage, http.StatusNotFound)
+		return true
+	}
+	if errors.Is(err, author.ErrAuthorNotFound) {
+		http.Error(w, apperr.AuthorNotFoundErrorMessage, http.StatusNotFound)
+		return true
+	}
+	if errors.Is(err, domain.ErrSlugTaken) {
+		writeSlugTaken(w, err)
+		return true
+	}
+	if errors.Is(err, domain.ErrInvalidSlug) {
+		http.Error(w, apperr.InvalidSlugErrorMessage, http.StatusBadRequest)
+		return true
+	}
+	if errors.Is(err, domain.ErrInvalidCanonicalURL) {
+		http.Error(w, apperr.InvalidURLErrorMessage, http.StatusUnprocessableEntity)
+		return true
+	}
+	if errors.Is(err, image.ErrImageNotFound) {
+		http.Error(w, apperr.ArticleImageNotFoundErrorMessage, http.StatusBadRequest)
+		return true
+	}
+	return false
+}
+
+func writeSlugTaken(w http.ResponseWriter, err error) {
+	var conflict *domain.SlugTakenError
+	if errors.As(err, &conflict) && conflict.Suggestion != "" {
+		w.Header().Set(apperr.SlugSuggestionHeader, conflict.Suggestion)
+	}
+	http.Error(w, apperr.ArticleSlugTakenErrorMessage, http.StatusConflict)
+}
+
+func writeValidationError(w http.ResponseWriter, err error) {
+	var failures playground.ValidationErrors
+	if errors.As(err, &failures) {
+		for _, failure := range failures {
+			if failure.Tag() == validator.ArticleSlugTag {
+				http.Error(w, apperr.InvalidSlugErrorMessage, http.StatusBadRequest)
+				return
+			}
+		}
+	}
+	http.Error(w, err.Error(), http.StatusBadRequest)
 }
 
 func writeArticleJsonResponse(w http.ResponseWriter, status int, article domain.Article, format domain.BodyFormat) {
@@ -210,8 +339,99 @@ func (h *Handler) setIsOnline(w http.ResponseWriter, r *http.Request, isOnline b
 	writeArticleJsonResponse(w, http.StatusOK, updatedArticle, format)
 }
 
+type optionalImageID struct {
+	Set   bool
+	Value *uint32 `validate:"omitempty,gte=1"`
+}
+
+func (o *optionalImageID) UnmarshalJSON(data []byte) error {
+	o.Set = true
+	if string(data) == "null" {
+		o.Value = nil
+		return nil
+	}
+	var value uint32
+	if err := json.Unmarshal(data, &value); err != nil {
+		return err
+	}
+	o.Value = &value
+	return nil
+}
+
+func (o optionalImageID) toNullable() domain.Nullable[uint32] {
+	return domain.Nullable[uint32]{Set: o.Set, Value: o.Value}
+}
+
 type UpdateArticleBody struct {
-	Body string `json:"body" validate:"required,max=10000"`
+	Body              *string         `json:"body"`
+	SiteID            *uint32         `json:"site_id" validate:"omitempty,gte=1"`
+	AuthorIDs         *[]uint32       `json:"author_ids" validate:"omitempty,dive,gte=1"`
+	Slug              *string         `json:"slug" validate:"omitempty,articleslug"`
+	Excerpt           *string         `json:"excerpt" validate:"omitempty,max=300"`
+	SEOTitle          *string         `json:"seo_title" validate:"omitempty,max=120"`
+	SEODescription    *string         `json:"seo_description" validate:"omitempty,max=320"`
+	CoverImageID      optionalImageID `json:"cover_image_id"`
+	CoverImageAlt     *string         `json:"cover_image_alt" validate:"omitempty,max=200"`
+	SocialTitle       *string         `json:"social_title" validate:"omitempty,max=120"`
+	SocialDescription *string         `json:"social_description" validate:"omitempty,max=320"`
+	SocialImageID     optionalImageID `json:"social_image_id"`
+	CanonicalURL      *string         `json:"canonical_url" validate:"omitempty,max=2048"`
+	Noindex           *bool           `json:"noindex"`
+	SEODismissed      *[]string       `json:"seo_dismissed" validate:"omitempty,dive,oneof=title_long title_empty desc_short desc_long cover_alt cover_none slug_long no_au no_h body_alt short"`
+}
+
+var nonNullableArticleFields = []string{"body", "site_id", "author_ids", "slug", "excerpt", "seo_title", "seo_description", "cover_image_alt", "social_title", "social_description", "canonical_url", "noindex", "seo_dismissed"}
+
+var nullableArticleFields = []string{"cover_image_id", "social_image_id"}
+
+func hasDuplicates(ids []uint32) bool {
+	seen := make(map[uint32]bool, len(ids))
+	for _, id := range ids {
+		if seen[id] {
+			return true
+		}
+		seen[id] = true
+	}
+	return false
+}
+
+func countKnownFields(fields map[string]json.RawMessage, nonNullable []string) (int, bool) {
+	known := 0
+	for name, value := range fields {
+		switch {
+		case slices.Contains(nonNullable, name):
+			if string(value) == "null" {
+				return 0, false
+			}
+			known++
+		case slices.Contains(nullableArticleFields, name):
+			known++
+		}
+	}
+	return known, true
+}
+
+func readUpdateArticleBody(r *http.Request) (UpdateArticleBody, bool) {
+	raw, err := io.ReadAll(r.Body)
+	if err != nil {
+		return UpdateArticleBody{}, false
+	}
+	var fields map[string]json.RawMessage
+	if err := json.Unmarshal(raw, &fields); err != nil {
+		return UpdateArticleBody{}, false
+	}
+	known, ok := countKnownFields(fields, nonNullableArticleFields)
+	if !ok || known == 0 {
+		return UpdateArticleBody{}, false
+	}
+	var request UpdateArticleBody
+	if err := json.Unmarshal(raw, &request); err != nil {
+		return UpdateArticleBody{}, false
+	}
+	if request.AuthorIDs != nil && hasDuplicates(*request.AuthorIDs) {
+		return UpdateArticleBody{}, false
+	}
+	return request, true
 }
 
 func (h *Handler) UpdateArticleBody(w http.ResponseWriter, r *http.Request) {
@@ -226,18 +446,35 @@ func (h *Handler) UpdateArticleBody(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	var localArticle UpdateArticleBody
-	if err := json.NewDecoder(r.Body).Decode(&localArticle); err != nil {
+	request, ok := readUpdateArticleBody(r)
+	if !ok {
 		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
 		return
 	}
 
-	if err := validator.Validate.Struct(localArticle); err != nil {
-		http.Error(w, err.Error(), http.StatusBadRequest)
+	if err := validator.Validate.Struct(request); err != nil {
+		writeValidationError(w, err)
 		return
 	}
 
-	updatedArticle, err := h.UpdateUseCase.UpdateBody(r.Context(), id, localArticle.Body, format)
+	updatedArticle, err := h.UpdateUseCase.Update(r.Context(), id, useCases.UpdateArticleCommand{
+		Body:              request.Body,
+		SiteID:            request.SiteID,
+		AuthorIDs:         request.AuthorIDs,
+		Slug:              request.Slug,
+		Excerpt:           request.Excerpt,
+		SEOTitle:          request.SEOTitle,
+		SEODescription:    request.SEODescription,
+		CoverImageID:      request.CoverImageID.toNullable(),
+		CoverImageAlt:     request.CoverImageAlt,
+		SocialTitle:       request.SocialTitle,
+		SocialDescription: request.SocialDescription,
+		SocialImageID:     request.SocialImageID.toNullable(),
+		CanonicalURL:      request.CanonicalURL,
+		Noindex:           request.Noindex,
+		SEODismissed:      request.SEODismissed,
+		Format:            format,
+	})
 	if err != nil {
 		writeArticleErrorResponse(w, err)
 		return
@@ -255,12 +492,16 @@ func (h *Handler) UnpublishArticle(w http.ResponseWriter, r *http.Request) {
 }
 
 func (h *Handler) callerIsVerified(r *http.Request) bool {
+	return isVerifiedCaller(r, h.GetUserUseCase)
+}
+
+func isVerifiedCaller(r *http.Request, getUser *useCases.GetUserUseCase) bool {
 	userId, ok := claims.UserId(r)
 	if !ok {
 		return false
 	}
 
-	currentUser, err := h.GetUserUseCase.GetUser(userId)
+	currentUser, err := getUser.GetUser(userId)
 	if err != nil {
 		return false
 	}
@@ -268,27 +509,106 @@ func (h *Handler) callerIsVerified(r *http.Request) bool {
 	return currentUser.IsVerified
 }
 
+const (
+	defaultListPage = 1
+	defaultListSize = 25
+)
+
+type listQuery struct {
+	Page   int     `validate:"gte=1"`
+	Size   int     `validate:"oneof=5 25 50 100"`
+	Q      string  `validate:"max=200"`
+	Status string  `validate:"omitempty,oneof=online draft"`
+	Site   *string `validate:"omitempty,min=1"`
+	SEO    string  `validate:"omitempty,oneof=ready suggestions hidden"`
+	Sort   string  `validate:"oneof=title:asc title:desc status:asc status:desc created_at:asc created_at:desc updated_at:asc updated_at:desc"`
+}
+
+const defaultListSort = "updated_at:desc"
+
+func parseSort(value string) domain.Sort {
+	field, direction, _ := strings.Cut(value, ":")
+	return domain.Sort{Field: domain.SortField(field), Direction: domain.SortDirection(direction)}
+}
+
+type listResponse struct {
+	Items  []listItemResponse `json:"items"`
+	Total  int                `json:"total"`
+	Page   int                `json:"page"`
+	Size   int                `json:"size"`
+	Counts domain.Counts      `json:"counts"`
+}
+
+func intQueryParam(values url.Values, name string, fallback int) (int, error) {
+	if !values.Has(name) {
+		return fallback, nil
+	}
+	return strconv.Atoi(values.Get(name))
+}
+
+func readListQuery(values url.Values) (listQuery, error) {
+	page, err := intQueryParam(values, "page", defaultListPage)
+	if err != nil {
+		return listQuery{}, err
+	}
+	size, err := intQueryParam(values, "size", defaultListSize)
+	if err != nil {
+		return listQuery{}, err
+	}
+	status := values.Get("status")
+	if values.Has("status") && status == "" {
+		return listQuery{}, errors.New("empty status")
+	}
+	sortValue := defaultListSort
+	if values.Has("sort") {
+		sortValue = values.Get("sort")
+	}
+	var siteKey *string
+	if values.Has("site") {
+		key := values.Get("site")
+		if key == "" {
+			return listQuery{}, errors.New("empty site")
+		}
+		siteKey = &key
+	}
+	seoStatus := values.Get("seo")
+	if values.Has("seo") && seoStatus == "" {
+		return listQuery{}, errors.New("empty seo")
+	}
+	return listQuery{Page: page, Size: size, Q: values.Get("q"), Status: status, Sort: sortValue, Site: siteKey, SEO: seoStatus}, nil
+}
+
 func (h *Handler) ListArticles(w http.ResponseWriter, r *http.Request) {
 	format, ok := parseBodyFormat(w, r)
 	if !ok {
 		return
 	}
 
-	var articles []domain.Article
-	var err error
-	if h.callerIsVerified(r) {
-		articles, err = h.ListUseCase.ListAllArticles(format)
-	} else {
-		articles, err = h.ListUseCase.ListOnlineArticles(format)
+	query, err := readListQuery(r.URL.Query())
+	if err != nil || validator.Validate.Struct(query) != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
 	}
+
+	page, err := h.ListUseCase.ListArticlesPage(useCases.ListArticlesCommand{
+		Format:   format,
+		Verified: h.callerIsVerified(r),
+		Page:     query.Page,
+		Size:     query.Size,
+		Q:        query.Q,
+		Status:   query.Status,
+		Sort:     parseSort(query.Sort),
+		SiteKey:  query.Site,
+		SEO:      query.SEO,
+	})
 	if err != nil {
 		http.Error(w, "Failed to retrieve articles", http.StatusInternalServerError)
 		return
 	}
 
-	responses := make([]articleResponse, 0, len(articles))
-	for _, article := range articles {
-		response, err := toArticleResponse(article, format)
+	responses := make([]listItemResponse, 0, len(page.Items))
+	for _, article := range page.Items {
+		response, err := toListItemResponse(article, page.SEO[article.ID], format)
 		if err != nil {
 			http.Error(w, "Failed to encode response", http.StatusInternalServerError)
 			return
@@ -296,7 +616,7 @@ func (h *Handler) ListArticles(w http.ResponseWriter, r *http.Request) {
 		responses = append(responses, response)
 	}
 
-	articlesJson, err := json.Marshal(responses)
+	articlesJson, err := json.Marshal(listResponse{Items: responses, Total: page.Total, Page: page.Page, Size: page.Size, Counts: page.Counts})
 	if err != nil {
 		http.Error(w, "Failed to encode response", http.StatusInternalServerError)
 		return

api/handlers/article/seoHandler.go

@@ -0,0 +1,127 @@
+package article
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	validator "RenewCMS/api/pkg/validator"
+	"RenewCMS/internal/infrastructure/useCases"
+	"bytes"
+	"encoding/json"
+	"io"
+	"log"
+	"net/http"
+)
+
+type SEOHandler struct {
+	ResolveUseCase *useCases.ResolveArticleSEOUseCase
+	CheckUseCase   *useCases.CheckArticleSEOUseCase
+	GetUserUseCase *useCases.GetUserUseCase
+}
+
+func NewSEOHandler(resolve *useCases.ResolveArticleSEOUseCase, check *useCases.CheckArticleSEOUseCase, getUser *useCases.GetUserUseCase) *SEOHandler {
+	return &SEOHandler{ResolveUseCase: resolve, CheckUseCase: check, GetUserUseCase: getUser}
+}
+
+type CheckArticleSEOBody struct {
+	Body              *string         `json:"body"`
+	Slug              *string         `json:"slug" validate:"omitempty,articleslug"`
+	Excerpt           *string         `json:"excerpt" validate:"omitempty,max=300"`
+	SEOTitle          *string         `json:"seo_title" validate:"omitempty,max=120"`
+	SEODescription    *string         `json:"seo_description" validate:"omitempty,max=320"`
+	CoverImageID      optionalImageID `json:"cover_image_id"`
+	CoverImageAlt     *string         `json:"cover_image_alt" validate:"omitempty,max=200"`
+	SocialTitle       *string         `json:"social_title" validate:"omitempty,max=120"`
+	SocialDescription *string         `json:"social_description" validate:"omitempty,max=320"`
+	SocialImageID     optionalImageID `json:"social_image_id"`
+	CanonicalURL      *string         `json:"canonical_url" validate:"omitempty,max=2048"`
+	Noindex           *bool           `json:"noindex"`
+	SEODismissed      *[]string       `json:"seo_dismissed" validate:"omitempty,dive,oneof=title_long title_empty desc_short desc_long cover_alt cover_none slug_long no_au no_h body_alt short"`
+}
+
+var checkNonNullableFields = []string{"body", "slug", "excerpt", "seo_title", "seo_description", "cover_image_alt", "social_title", "social_description", "canonical_url", "noindex", "seo_dismissed"}
+
+func readCheckBody(r *http.Request) (CheckArticleSEOBody, bool) {
+	raw, err := io.ReadAll(r.Body)
+	if err != nil {
+		return CheckArticleSEOBody{}, false
+	}
+	var fields map[string]json.RawMessage
+	if err := json.Unmarshal(raw, &fields); err != nil || fields == nil {
+		return CheckArticleSEOBody{}, false
+	}
+	known, ok := countKnownFields(fields, checkNonNullableFields)
+	if !ok || known != len(fields) {
+		return CheckArticleSEOBody{}, false
+	}
+	var request CheckArticleSEOBody
+	decoder := json.NewDecoder(bytes.NewReader(raw))
+	decoder.DisallowUnknownFields()
+	if err := decoder.Decode(&request); err != nil {
+		return CheckArticleSEOBody{}, false
+	}
+	return request, true
+}
+
+func (h *SEOHandler) Resolve(w http.ResponseWriter, r *http.Request) {
+	id, err := parseArticleId(r)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	resolved, err := h.ResolveUseCase.Resolve(id, isVerifiedCaller(r, h.GetUserUseCase))
+	if err != nil {
+		writeArticleErrorResponse(w, err)
+		return
+	}
+	writeSEOJson(w, resolved)
+}
+
+func (h *SEOHandler) Check(w http.ResponseWriter, r *http.Request) {
+	id, err := parseArticleId(r)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	request, ok := readCheckBody(r)
+	if !ok {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+	if err := validator.Validate.Struct(request); err != nil {
+		writeValidationError(w, err)
+		return
+	}
+
+	checked, err := h.CheckUseCase.Check(id, useCases.CheckArticleSEOCommand{
+		Body:              request.Body,
+		Slug:              request.Slug,
+		Excerpt:           request.Excerpt,
+		SEOTitle:          request.SEOTitle,
+		SEODescription:    request.SEODescription,
+		CoverImageID:      request.CoverImageID.toNullable(),
+		CoverImageAlt:     request.CoverImageAlt,
+		SocialTitle:       request.SocialTitle,
+		SocialDescription: request.SocialDescription,
+		SocialImageID:     request.SocialImageID.toNullable(),
+		CanonicalURL:      request.CanonicalURL,
+		Noindex:           request.Noindex,
+		SEODismissed:      request.SEODismissed,
+	})
+	if err != nil {
+		writeArticleErrorResponse(w, err)
+		return
+	}
+	writeSEOJson(w, checked)
+}
+
+func writeSEOJson(w http.ResponseWriter, payload any) {
+	encoded, err := json.Marshal(payload)
+	if err != nil {
+		http.Error(w, "Failed to encode response", http.StatusInternalServerError)
+		return
+	}
+	if _, err := w.Write(encoded); err != nil {
+		log.Printf("Failed to write response: %v", err)
+	}
+}

api/handlers/auth/meHandler.go

@@ -4,6 +4,7 @@ import (
 	"RenewCMS/api/pkg/apperr"
 	"RenewCMS/api/pkg/claims"
 	"RenewCMS/api/pkg/publicuser"
+	"RenewCMS/internal/domain/author"
 	"RenewCMS/internal/domain/user"
 	"RenewCMS/internal/infrastructure/useCases"
 	"encoding/json"
@@ -12,15 +13,34 @@ import (
 )
 
 type MeHandler struct {
-	GetUseCase *useCases.GetUserUseCase
+	GetUseCase       *useCases.GetUserUseCase
+	GetAuthorUseCase *useCases.GetMyAuthorUseCase
 }
 
-func NewMeHandler(getUser *useCases.GetUserUseCase) *MeHandler {
+func NewMeHandler(getUser *useCases.GetUserUseCase, getAuthor *useCases.GetMyAuthorUseCase) *MeHandler {
 	return &MeHandler{
-		GetUseCase: getUser,
+		GetUseCase:       getUser,
+		GetAuthorUseCase: getAuthor,
 	}
 }
 
+type meAuthor struct {
+	author.Byline
+	ArticleCount int `json:"article_count"`
+}
+
+type meResponse struct {
+	publicuser.PublicUser
+	Author *meAuthor `json:"author"`
+}
+
+func toMeAuthor(found *author.Author) *meAuthor {
+	if found == nil {
+		return nil
+	}
+	return &meAuthor{Byline: found.Byline(), ArticleCount: found.ArticleCount}
+}
+
 func (h *MeHandler) Me(w http.ResponseWriter, r *http.Request) {
 	userId, ok := claims.UserId(r)
 	if !ok {
@@ -38,7 +58,13 @@ func (h *MeHandler) Me(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	body, err := json.Marshal(publicuser.New(loadedUser))
+	linked, err := h.GetAuthorUseCase.Get(loadedUser.ID)
+	if err != nil {
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+
+	body, err := json.Marshal(meResponse{PublicUser: publicuser.New(loadedUser), Author: toMeAuthor(linked)})
 	if err != nil {
 		http.Error(w, "Internal server error", http.StatusInternalServerError)
 		return

api/handlers/author/authorHandler.go

@@ -0,0 +1,395 @@
+package author
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	"RenewCMS/api/pkg/claims"
+	validator "RenewCMS/api/pkg/validator"
+	domain "RenewCMS/internal/domain/author"
+	"RenewCMS/internal/domain/image"
+	"RenewCMS/internal/domain/user"
+	"RenewCMS/internal/infrastructure/useCases"
+	"encoding/json"
+	"errors"
+	"io"
+	"log"
+	"net/http"
+	"net/url"
+	"strconv"
+
+	"github.com/go-chi/chi/v5"
+	playground "github.com/go-playground/validator/v10"
+)
+
+const (
+	defaultListPage = 1
+	defaultListSize = 25
+	reassignParam   = "reassign_to"
+	reassignNone    = "none"
+)
+
+type Handler struct {
+	ListUseCase     *useCases.ListAuthorsUseCase
+	CreateUseCase   *useCases.CreateAuthorUseCase
+	CreateMyUseCase *useCases.CreateMyAuthorUseCase
+	UpdateUseCase   *useCases.UpdateAuthorUseCase
+	DeleteUseCase   *useCases.DeleteAuthorUseCase
+	GetUserUseCase  *useCases.GetUserUseCase
+}
+
+func NewHandler(list *useCases.ListAuthorsUseCase, create *useCases.CreateAuthorUseCase, createMy *useCases.CreateMyAuthorUseCase, update *useCases.UpdateAuthorUseCase, deleteUseCase *useCases.DeleteAuthorUseCase, getUser *useCases.GetUserUseCase) *Handler {
+	return &Handler{ListUseCase: list, CreateUseCase: create, CreateMyUseCase: createMy, UpdateUseCase: update, DeleteUseCase: deleteUseCase, GetUserUseCase: getUser}
+}
+
+type socialLinkRequest struct {
+	Type string `json:"type" validate:"socialtype"`
+	URL  string `json:"url"`
+}
+
+func toLinks(requests []socialLinkRequest) []domain.SocialLink {
+	links := make([]domain.SocialLink, 0, len(requests))
+	for _, request := range requests {
+		links = append(links, domain.SocialLink{Type: request.Type, URL: request.URL})
+	}
+	return links
+}
+
+type PostAuthor struct {
+	Name        string              `json:"name" validate:"authorname"`
+	Slug        string              `json:"slug" validate:"omitempty,authorslug"`
+	Bio         string              `json:"bio"`
+	AvatarID    *uint32             `json:"avatar_id" validate:"omitempty,gte=1"`
+	Website     *string             `json:"website"`
+	SocialLinks []socialLinkRequest `json:"social_links" validate:"omitempty,dive"`
+	UserID      *uint32             `json:"user_id" validate:"omitempty,gte=1"`
+}
+
+type optional[T any] struct {
+	Set   bool
+	Value *T
+}
+
+func (o *optional[T]) UnmarshalJSON(data []byte) error {
+	o.Set = true
+	if string(data) == "null" {
+		o.Value = nil
+		return nil
+	}
+	var value T
+	if err := json.Unmarshal(data, &value); err != nil {
+		return err
+	}
+	o.Value = &value
+	return nil
+}
+
+type PatchAuthor struct {
+	Name        *string              `json:"name" validate:"authorname"`
+	Slug        *string              `json:"slug" validate:"authorslug"`
+	Bio         *string              `json:"bio"`
+	AvatarID    optional[uint32]     `json:"avatar_id"`
+	Website     optional[string]     `json:"website"`
+	SocialLinks *[]socialLinkRequest `json:"social_links" validate:"omitempty,dive"`
+	UserID      optional[uint32]     `json:"user_id"`
+}
+
+func (p PatchAuthor) toPatch() domain.Patch {
+	patch := domain.Patch{
+		Name:     p.Name,
+		Slug:     p.Slug,
+		Bio:      p.Bio,
+		AvatarID: domain.Nullable[uint32]{Set: p.AvatarID.Set, Value: p.AvatarID.Value},
+		Website:  domain.Nullable[string]{Set: p.Website.Set, Value: p.Website.Value},
+		UserID:   domain.Nullable[uint32]{Set: p.UserID.Set, Value: p.UserID.Value},
+	}
+	if p.SocialLinks != nil {
+		links := toLinks(*p.SocialLinks)
+		patch.SocialLinks = &links
+	}
+	return patch
+}
+
+var requiredNonNullFields = []string{"name", "slug", "bio", "social_links"}
+
+var nullableFields = []string{"avatar_id", "website", "user_id"}
+
+func readPatchAuthor(r *http.Request) (PatchAuthor, bool) {
+	raw, err := io.ReadAll(r.Body)
+	if err != nil {
+		return PatchAuthor{}, false
+	}
+	var fields map[string]json.RawMessage
+	if err := json.Unmarshal(raw, &fields); err != nil {
+		return PatchAuthor{}, false
+	}
+	known := false
+	for _, name := range requiredNonNullFields {
+		value, present := fields[name]
+		if !present {
+			continue
+		}
+		if string(value) == "null" {
+			return PatchAuthor{}, false
+		}
+		known = true
+	}
+	for _, name := range nullableFields {
+		if _, present := fields[name]; present {
+			known = true
+		}
+	}
+	if !known {
+		return PatchAuthor{}, false
+	}
+	var request PatchAuthor
+	if err := json.Unmarshal(raw, &request); err != nil {
+		return PatchAuthor{}, false
+	}
+	return request, true
+}
+
+func parseAuthorId(r *http.Request) (uint32, error) {
+	id, err := strconv.ParseUint(chi.URLParam(r, "id"), 10, 32)
+	return uint32(id), err
+}
+
+type ownAuthorResponse struct {
+	domain.Author
+	SlugAdjusted bool `json:"slug_adjusted"`
+}
+
+func presentAuthor(a domain.Author) domain.Author {
+	if a.SocialLinks == nil {
+		a.SocialLinks = []domain.SocialLink{}
+	}
+	return a
+}
+
+func writeJSON(w http.ResponseWriter, status int, payload any) {
+	body, err := json.Marshal(payload)
+	if err != nil {
+		http.Error(w, "Failed to encode response", http.StatusInternalServerError)
+		return
+	}
+	if status != http.StatusOK {
+		w.WriteHeader(status)
+	}
+	if _, err := w.Write(body); err != nil {
+		log.Printf("Failed to write response: %v", err)
+	}
+}
+
+func writeAuthorError(w http.ResponseWriter, err error) {
+	switch {
+	case errors.Is(err, domain.ErrAuthorNotFound):
+		http.Error(w, apperr.AuthorNotFoundErrorMessage, http.StatusNotFound)
+	case errors.Is(err, domain.ErrSlugTaken):
+		http.Error(w, apperr.AuthorSlugTakenErrorMessage, http.StatusConflict)
+	case errors.Is(err, domain.ErrAuthorHasArticles):
+		http.Error(w, apperr.AuthorHasArticlesErrorMessage, http.StatusConflict)
+	case errors.Is(err, domain.ErrUserAlreadyLinked):
+		http.Error(w, apperr.UserAlreadyLinkedErrorMessage, http.StatusConflict)
+	case errors.Is(err, domain.ErrAuthorAlreadyLinked):
+		http.Error(w, apperr.AuthorAlreadyLinkedErrorMessage, http.StatusConflict)
+	case errors.Is(err, user.ErrUserNotFound):
+		http.Error(w, apperr.UserNotFoundErrorMessage, http.StatusNotFound)
+	case errors.Is(err, domain.ErrAuthorRights):
+		http.Error(w, apperr.AuthorRightsErrorMessage, http.StatusForbidden)
+	case errors.Is(err, domain.ErrBioTooLong):
+		http.Error(w, apperr.BioTooLongErrorMessage, http.StatusUnprocessableEntity)
+	case errors.Is(err, domain.ErrInvalidURL):
+		http.Error(w, apperr.InvalidURLErrorMessage, http.StatusUnprocessableEntity)
+	case errors.Is(err, domain.ErrTooManyLinks):
+		http.Error(w, apperr.TooManyLinksErrorMessage, http.StatusUnprocessableEntity)
+	case errors.Is(err, domain.ErrInvalidSocialType):
+		http.Error(w, apperr.InvalidSocialTypeErrorMessage, http.StatusBadRequest)
+	case errors.Is(err, domain.ErrInvalidSlug):
+		http.Error(w, apperr.InvalidSlugErrorMessage, http.StatusBadRequest)
+	case errors.Is(err, domain.ErrInvalidReassign):
+		http.Error(w, apperr.InvalidReassignErrorMessage, http.StatusBadRequest)
+	case errors.Is(err, image.ErrImageNotFound):
+		http.Error(w, apperr.AuthorImageNotFoundErrorMessage, http.StatusBadRequest)
+	default:
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+	}
+}
+
+func writeValidationError(w http.ResponseWriter, err error) {
+	var failures playground.ValidationErrors
+	if errors.As(err, &failures) {
+		for _, failure := range failures {
+			if failure.Tag() == validator.AuthorSlugTag {
+				http.Error(w, apperr.InvalidSlugErrorMessage, http.StatusBadRequest)
+				return
+			}
+		}
+	}
+	http.Error(w, err.Error(), http.StatusBadRequest)
+}
+
+func (h *Handler) currentUser(r *http.Request) (user.User, bool) {
+	userId, ok := claims.UserId(r)
+	if !ok {
+		return user.User{}, false
+	}
+	current, err := h.GetUserUseCase.GetUser(userId)
+	if err != nil {
+		return user.User{}, false
+	}
+	return current, true
+}
+
+type listQuery struct {
+	Page int    `validate:"gte=1"`
+	Size int    `validate:"oneof=5 25 50 100"`
+	Q    string `validate:"max=200"`
+}
+
+type listResponse struct {
+	Items []domain.Author `json:"items"`
+	Total int             `json:"total"`
+	Page  int             `json:"page"`
+	Size  int             `json:"size"`
+}
+
+func intQueryParam(values url.Values, name string, fallback int) (int, error) {
+	if !values.Has(name) {
+		return fallback, nil
+	}
+	return strconv.Atoi(values.Get(name))
+}
+
+func readListQuery(values url.Values) (listQuery, error) {
+	page, err := intQueryParam(values, "page", defaultListPage)
+	if err != nil {
+		return listQuery{}, err
+	}
+	size, err := intQueryParam(values, "size", defaultListSize)
+	if err != nil {
+		return listQuery{}, err
+	}
+	return listQuery{Page: page, Size: size, Q: values.Get("q")}, nil
+}
+
+func (h *Handler) List(w http.ResponseWriter, r *http.Request) {
+	query, err := readListQuery(r.URL.Query())
+	if err != nil || validator.Validate.Struct(query) != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	current, _ := h.currentUser(r)
+	page, err := h.ListUseCase.List(useCases.ListAuthorsCommand{Q: query.Q, Page: query.Page, Size: query.Size, CallerRole: current.Role})
+	if err != nil {
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+
+	items := make([]domain.Author, 0, len(page.Items))
+	for _, item := range page.Items {
+		items = append(items, presentAuthor(item))
+	}
+	w.Header().Set("X-Total-Count", strconv.Itoa(page.Total))
+	writeJSON(w, http.StatusOK, listResponse{Items: items, Total: page.Total, Page: page.Page, Size: page.Size})
+}
+
+func (h *Handler) Create(w http.ResponseWriter, r *http.Request) {
+	var request PostAuthor
+	if err := json.NewDecoder(r.Body).Decode(&request); err != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+	if err := validator.Validate.Struct(request); err != nil {
+		writeValidationError(w, err)
+		return
+	}
+
+	created, err := h.CreateUseCase.Create(r.Context(), useCases.CreateAuthorCommand{
+		Name:        request.Name,
+		Slug:        request.Slug,
+		Bio:         request.Bio,
+		AvatarID:    request.AvatarID,
+		Website:     request.Website,
+		SocialLinks: toLinks(request.SocialLinks),
+		UserID:      request.UserID,
+	})
+	if err != nil {
+		writeAuthorError(w, err)
+		return
+	}
+	writeJSON(w, http.StatusCreated, presentAuthor(created))
+}
+
+func (h *Handler) CreateMine(w http.ResponseWriter, r *http.Request) {
+	userId, ok := claims.UserId(r)
+	if !ok {
+		http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+		return
+	}
+
+	created, err := h.CreateMyUseCase.Create(r.Context(), userId)
+	if err != nil {
+		writeAuthorError(w, err)
+		return
+	}
+	writeJSON(w, http.StatusCreated, ownAuthorResponse{Author: presentAuthor(created.Author), SlugAdjusted: created.SlugAdjusted})
+}
+
+func (h *Handler) Update(w http.ResponseWriter, r *http.Request) {
+	id, err := parseAuthorId(r)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	request, ok := readPatchAuthor(r)
+	if !ok {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+	if err := validator.Validate.Struct(request); err != nil {
+		writeValidationError(w, err)
+		return
+	}
+
+	current, ok := h.currentUser(r)
+	if !ok {
+		http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+		return
+	}
+	updated, err := h.UpdateUseCase.Update(r.Context(), id, useCases.AuthorCaller{UserID: current.ID, Role: current.Role}, request.toPatch())
+	if err != nil {
+		writeAuthorError(w, err)
+		return
+	}
+	writeJSON(w, http.StatusOK, presentAuthor(updated))
+}
+
+func readReassignment(r *http.Request) useCases.Reassignment {
+	query := r.URL.Query()
+	if !query.Has(reassignParam) {
+		return useCases.Reassignment{Mode: useCases.ReassignAbsent}
+	}
+	value := query.Get(reassignParam)
+	if value == reassignNone {
+		return useCases.Reassignment{Mode: useCases.ReassignNone}
+	}
+	parsed, err := strconv.ParseUint(value, 10, 32)
+	if err != nil {
+		return useCases.Reassignment{Mode: useCases.ReassignMalformed}
+	}
+	return useCases.Reassignment{Mode: useCases.ReassignToAuthor, Destination: uint32(parsed)}
+}
+
+func (h *Handler) Delete(w http.ResponseWriter, r *http.Request) {
+	id, err := parseAuthorId(r)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	if err := h.DeleteUseCase.Delete(r.Context(), id, readReassignment(r)); err != nil {
+		writeAuthorError(w, err)
+		return
+	}
+	w.WriteHeader(http.StatusNoContent)
+}

api/handlers/media/mediaHandler.go

@@ -70,19 +70,37 @@ type countsResponse struct {
 }
 
 type listResponse struct {
-	Items      []mediaItemResponse `json:"items"`
-	NextCursor *string             `json:"next_cursor"`
-	Counts     countsResponse      `json:"counts"`
+	Items  []mediaItemResponse `json:"items"`
+	Total  int                 `json:"total"`
+	Page   int                 `json:"page"`
+	Size   int                 `json:"size"`
+	Counts countsResponse      `json:"counts"`
+}
+
+type pagingQuery struct {
+	Page int `validate:"gte=1"`
+	Size int `validate:"oneof=5 25 50 100"`
+}
+
+func intQueryParam(values url.Values, name string, fallback int) (int, error) {
+	if !values.Has(name) {
+		return fallback, nil
+	}
+	return strconv.Atoi(values.Get(name))
 }
 
 type usageResponse struct {
-	ID        uint32 `json:"id"`
-	Title     string `json:"title"`
-	Published bool   `json:"published"`
+	Type      string   `json:"type"`
+	ID        uint32   `json:"id"`
+	Title     string   `json:"title"`
+	Published *bool    `json:"published,omitempty"`
+	Fields    []string `json:"fields"`
 }
 
 type mergeResponse struct {
 	ArticlesUpdated int `json:"articles_updated"`
+	SitesUpdated    int `json:"sites_updated"`
+	AuthorsUpdated  int `json:"authors_updated"`
 	Merged          int `json:"merged"`
 }
 
@@ -173,7 +191,6 @@ func parseListQuery(r *http.Request) (domainImage.ListQuery, error) {
 	query := domainImage.NewListQuery()
 	query.Search = values.Get("q")
 	query.Hash = strings.ToLower(values.Get("hash"))
-	query.Cursor = values.Get("cursor")
 	if values.Has("filter") {
 		query.Filter = domainImage.Filter(values.Get("filter"))
 	}
@@ -186,13 +203,19 @@ func parseListQuery(r *http.Request) (domainImage.ListQuery, error) {
 	if values.Has("sort") {
 		query.Sort = domainImage.Sort(values.Get("sort"))
 	}
-	if values.Has("limit") {
-		limit, err := strconv.Atoi(values.Get("limit"))
-		if err != nil {
-			return domainImage.ListQuery{}, domainImage.ErrInvalidQuery
-		}
-		query.Limit = limit
+	page, err := intQueryParam(values, "page", domainImage.DefaultListPage)
+	if err != nil {
+		return domainImage.ListQuery{}, domainImage.ErrInvalidQuery
 	}
+	size, err := intQueryParam(values, "size", domainImage.DefaultListSize)
+	if err != nil {
+		return domainImage.ListQuery{}, domainImage.ErrInvalidQuery
+	}
+	if validator.Validate.Struct(pagingQuery{Page: page, Size: size}) != nil {
+		return domainImage.ListQuery{}, domainImage.ErrInvalidQuery
+	}
+	query.Page = page
+	query.Size = size
 	return query, nil
 }
 
@@ -219,14 +242,27 @@ func (h *Handler) List(w http.ResponseWriter, r *http.Request) {
 	}
 	response := listResponse{
 		Items:  items,
+		Total:  page.Total,
+		Page:   page.Page,
+		Size:   page.Size,
 		Counts: countsResponse{All: page.Counts.All, Unused: page.Counts.Unused, Duplicates: page.Counts.Duplicates},
 	}
-	if page.NextCursor != "" {
-		response.NextCursor = &page.NextCursor
-	}
 	writeJSON(w, http.StatusOK, response)
 }
 
+func (h *Handler) Get(w http.ResponseWriter, r *http.Request) {
+	id, ok := parseImageId(w, r)
+	if !ok {
+		return
+	}
+	item, err := h.ListUseCase.Get(id)
+	if err != nil {
+		writeImageError(w, err)
+		return
+	}
+	writeJSON(w, http.StatusOK, toResponse(item))
+}
+
 func (h *Handler) Upload(w http.ResponseWriter, r *http.Request) {
 	userId, _ := claims.UserId(r)
 	input, closeFile, ok := upload.ReadImageInput(w, r, userId)
@@ -303,15 +339,15 @@ func (h *Handler) Usage(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	articles, err := h.UsageUseCase.Usage(id)
+	usages, err := h.UsageUseCase.Usage(id)
 	if err != nil {
 		writeImageError(w, err)
 		return
 	}
 
-	response := make([]usageResponse, 0, len(articles))
-	for _, a := range articles {
-		response = append(response, usageResponse{ID: a.ID, Title: a.Title, Published: a.IsOnline})
+	response := make([]usageResponse, 0, len(usages))
+	for _, usage := range usages {
+		response = append(response, usageResponse{Type: usage.Type, ID: usage.ID, Title: usage.Title, Published: usage.Published, Fields: usage.Fields})
 	}
 	writeJSON(w, http.StatusOK, response)
 }
@@ -333,7 +369,7 @@ func (h *Handler) Merge(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	writeJSON(w, http.StatusOK, mergeResponse{ArticlesUpdated: result.ArticlesUpdated, Merged: result.Merged})
+	writeJSON(w, http.StatusOK, mergeResponse{ArticlesUpdated: result.ArticlesUpdated, SitesUpdated: result.SitesUpdated, AuthorsUpdated: result.AuthorsUpdated, Merged: result.Merged})
 }
 
 func writeMergeError(w http.ResponseWriter, err error) {

api/handlers/media/purgeHandler.go

@@ -53,6 +53,8 @@ type purgeRunResponse struct {
 	GroupsPurged    int `json:"groups_purged"`
 	Merged          int `json:"merged"`
 	ArticlesUpdated int `json:"articles_updated"`
+	SitesUpdated    int `json:"sites_updated"`
+	AuthorsUpdated  int `json:"authors_updated"`
 	FailedGroups    int `json:"failed_groups"`
 }
 
@@ -164,6 +166,8 @@ func (h *Handler) RunPurge(w http.ResponseWriter, r *http.Request) {
 		GroupsPurged:    result.GroupsPurged,
 		Merged:          result.Merged,
 		ArticlesUpdated: result.ArticlesUpdated,
+		SitesUpdated:    result.SitesUpdated,
+		AuthorsUpdated:  result.AuthorsUpdated,
 		FailedGroups:    result.FailedGroups,
 	})
 }

api/handlers/site/siteHandler.go

@@ -0,0 +1,296 @@
+package site
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	validator "RenewCMS/api/pkg/validator"
+	"RenewCMS/internal/domain/image"
+	domain "RenewCMS/internal/domain/site"
+	"RenewCMS/internal/infrastructure/useCases"
+	"encoding/json"
+	"errors"
+	"log"
+	"net/http"
+	"net/url"
+	"strconv"
+
+	"github.com/go-chi/chi/v5"
+)
+
+type Handler struct {
+	ListUseCase       *useCases.ListSitesUseCase
+	CreateUseCase     *useCases.CreateSiteUseCase
+	UpdateUseCase     *useCases.UpdateSiteUseCase
+	SetDefaultUseCase *useCases.SetDefaultSiteUseCase
+	DeleteUseCase     *useCases.DeleteSiteUseCase
+}
+
+func NewHandler(list *useCases.ListSitesUseCase, create *useCases.CreateSiteUseCase, update *useCases.UpdateSiteUseCase, setDefault *useCases.SetDefaultSiteUseCase, deleteUseCase *useCases.DeleteSiteUseCase) *Handler {
+	return &Handler{ListUseCase: list, CreateUseCase: create, UpdateUseCase: update, SetDefaultUseCase: setDefault, DeleteUseCase: deleteUseCase}
+}
+
+type PostSite struct {
+	Name                 string  `json:"name" validate:"required,sitename"`
+	Key                  string  `json:"key" validate:"required,sitekey"`
+	BaseURL              string  `json:"base_url" validate:"required"`
+	DefaultRobots        string  `json:"default_robots" validate:"omitempty,oneof=index noindex"`
+	Locale               *string `json:"locale"`
+	DefaultSocialImageID *uint32 `json:"default_social_image_id"`
+	IsDefault            bool    `json:"is_default"`
+	SiteName             string  `json:"site_name" validate:"max=100"`
+	TitleTemplate        *string `json:"title_template" validate:"omitempty,max=200"`
+	DefaultDescription   string  `json:"default_description" validate:"max=320"`
+}
+
+type optional[T any] struct {
+	Set   bool
+	Value *T
+}
+
+func (o *optional[T]) UnmarshalJSON(data []byte) error {
+	o.Set = true
+	if string(data) == "null" {
+		o.Value = nil
+		return nil
+	}
+	var value T
+	if err := json.Unmarshal(data, &value); err != nil {
+		return err
+	}
+	o.Value = &value
+	return nil
+}
+
+type PatchSite struct {
+	Name                 *string          `json:"name" validate:"omitempty,sitename"`
+	Key                  *string          `json:"key" validate:"omitempty,sitekey"`
+	BaseURL              *string          `json:"base_url"`
+	DefaultRobots        *string          `json:"default_robots" validate:"omitempty,oneof=index noindex"`
+	Locale               optional[string] `json:"locale"`
+	DefaultSocialImageID optional[uint32] `json:"default_social_image_id"`
+	IsDefault            *bool            `json:"is_default"`
+	SiteName             *string          `json:"site_name" validate:"omitempty,max=100"`
+	TitleTemplate        *string          `json:"title_template" validate:"omitempty,max=200"`
+	DefaultDescription   *string          `json:"default_description" validate:"omitempty,max=320"`
+}
+
+func (p PatchSite) toPatch() domain.Patch {
+	return domain.Patch{
+		Name:                 p.Name,
+		Key:                  p.Key,
+		BaseURL:              p.BaseURL,
+		DefaultRobots:        p.DefaultRobots,
+		Locale:               domain.Nullable[string]{Set: p.Locale.Set, Value: p.Locale.Value},
+		DefaultSocialImageID: domain.Nullable[uint32]{Set: p.DefaultSocialImageID.Set, Value: p.DefaultSocialImageID.Value},
+		IsDefault:            p.IsDefault,
+		SiteName:             p.SiteName,
+		TitleTemplate:        p.TitleTemplate,
+		DefaultDescription:   p.DefaultDescription,
+	}
+}
+
+func parseSiteId(r *http.Request) (uint32, error) {
+	id, err := strconv.ParseUint(chi.URLParam(r, "id"), 10, 32)
+	return uint32(id), err
+}
+
+func writeSite(w http.ResponseWriter, status int, s domain.Site) {
+	body, err := json.Marshal(s)
+	if err != nil {
+		http.Error(w, "Failed to encode response", http.StatusInternalServerError)
+		return
+	}
+	if status != http.StatusOK {
+		w.WriteHeader(status)
+	}
+	if _, err := w.Write(body); err != nil {
+		log.Printf("Failed to write response: %v", err)
+	}
+}
+
+func writeSiteError(w http.ResponseWriter, err error) {
+	switch {
+	case errors.Is(err, domain.ErrSiteNotFound):
+		http.Error(w, apperr.SiteNotFoundErrorMessage, http.StatusNotFound)
+	case errors.Is(err, domain.ErrSiteKeyTaken):
+		http.Error(w, apperr.SiteKeyTakenErrorMessage, http.StatusConflict)
+	case errors.Is(err, domain.ErrSiteHasArticles):
+		http.Error(w, apperr.SiteHasArticlesErrorMessage, http.StatusConflict)
+	case errors.Is(err, domain.ErrDefaultSite):
+		http.Error(w, apperr.DefaultSiteErrorMessage, http.StatusForbidden)
+	case errors.Is(err, domain.ErrKeyImmutable):
+		http.Error(w, apperr.SiteKeyImmutableErrorMessage, http.StatusBadRequest)
+	case errors.Is(err, domain.ErrInvalidSiteURL):
+		http.Error(w, apperr.InvalidSiteURLErrorMessage, http.StatusBadRequest)
+	case errors.Is(err, domain.ErrInvalidTitleTemplate):
+		http.Error(w, apperr.InvalidTitleTemplateErrorMessage, http.StatusBadRequest)
+	case errors.Is(err, domain.ErrInvalidLocale):
+		http.Error(w, apperr.InvalidLocaleErrorMessage, http.StatusBadRequest)
+	case errors.Is(err, image.ErrImageNotFound):
+		http.Error(w, apperr.SiteImageNotFoundErrorMessage, http.StatusBadRequest)
+	case errors.Is(err, domain.ErrUseSetDefault):
+		http.Error(w, apperr.UseSetDefaultErrorMessage, http.StatusBadRequest)
+	case errors.Is(err, domain.ErrInvalidReassign):
+		http.Error(w, apperr.InvalidReassignErrorMessage, http.StatusBadRequest)
+	default:
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+	}
+}
+
+const (
+	defaultListPage = 1
+	defaultListSize = 25
+)
+
+type listQuery struct {
+	Page int    `validate:"gte=1"`
+	Size int    `validate:"omitempty,oneof=5 25 50 100"`
+	Q    string `validate:"max=200"`
+}
+
+func intQueryParam(values url.Values, name string, fallback int) (int, error) {
+	if !values.Has(name) {
+		return fallback, nil
+	}
+	return strconv.Atoi(values.Get(name))
+}
+
+func readListQuery(values url.Values) (listQuery, error) {
+	paged := values.Has("page") || values.Has("size")
+	page, err := intQueryParam(values, "page", defaultListPage)
+	if err != nil {
+		return listQuery{}, err
+	}
+	size := 0
+	if paged {
+		size, err = intQueryParam(values, "size", defaultListSize)
+		if err != nil {
+			return listQuery{}, err
+		}
+		if size == 0 {
+			return listQuery{}, errors.New("invalid size")
+		}
+	}
+	return listQuery{Page: page, Size: size, Q: values.Get("q")}, nil
+}
+
+func (h *Handler) List(w http.ResponseWriter, r *http.Request) {
+	query, err := readListQuery(r.URL.Query())
+	if err != nil || validator.Validate.Struct(query) != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+	page, err := h.ListUseCase.ListPage(useCases.ListSitesCommand{Q: query.Q, Page: query.Page, Size: query.Size})
+	if err != nil {
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+	body, err := json.Marshal(page.Items)
+	if err != nil {
+		http.Error(w, "Failed to encode response", http.StatusInternalServerError)
+		return
+	}
+	w.Header().Set("X-Total-Count", strconv.Itoa(page.Total))
+	if _, err := w.Write(body); err != nil {
+		log.Printf("Failed to write response: %v", err)
+	}
+}
+
+func (h *Handler) Create(w http.ResponseWriter, r *http.Request) {
+	var request PostSite
+	if err := json.NewDecoder(r.Body).Decode(&request); err != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+	if err := validator.Validate.Struct(request); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	created, err := h.CreateUseCase.Create(r.Context(), useCases.CreateSiteCommand{
+		Name:                 request.Name,
+		Key:                  request.Key,
+		BaseURL:              request.BaseURL,
+		DefaultRobots:        request.DefaultRobots,
+		Locale:               request.Locale,
+		DefaultSocialImageID: request.DefaultSocialImageID,
+		IsDefault:            request.IsDefault,
+		SiteName:             request.SiteName,
+		TitleTemplate:        request.TitleTemplate,
+		DefaultDescription:   request.DefaultDescription,
+	})
+	if err != nil {
+		writeSiteError(w, err)
+		return
+	}
+	writeSite(w, http.StatusCreated, created)
+}
+
+func (h *Handler) Update(w http.ResponseWriter, r *http.Request) {
+	id, err := parseSiteId(r)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	var request PatchSite
+	if err := json.NewDecoder(r.Body).Decode(&request); err != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+	if err := validator.Validate.Struct(request); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	updated, err := h.UpdateUseCase.Update(r.Context(), id, request.toPatch())
+	if err != nil {
+		writeSiteError(w, err)
+		return
+	}
+	writeSite(w, http.StatusOK, updated)
+}
+
+func (h *Handler) SetDefault(w http.ResponseWriter, r *http.Request) {
+	id, err := parseSiteId(r)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	updated, err := h.SetDefaultUseCase.SetDefault(r.Context(), id)
+	if err != nil {
+		writeSiteError(w, err)
+		return
+	}
+	writeSite(w, http.StatusOK, updated)
+}
+
+const reassignQueryParam = "reassign_to"
+
+func readReassign(r *http.Request) (*uint32, bool) {
+	query := r.URL.Query()
+	if !query.Has(reassignQueryParam) {
+		return nil, false
+	}
+	parsed, err := strconv.ParseUint(query.Get(reassignQueryParam), 10, 32)
+	if err != nil {
+		return nil, true
+	}
+	destination := uint32(parsed)
+	return &destination, false
+}
+
+func (h *Handler) Delete(w http.ResponseWriter, r *http.Request) {
+	id, err := parseSiteId(r)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	reassignTo, invalid := readReassign(r)
+	if err := h.DeleteUseCase.Delete(r.Context(), useCases.DeleteSiteCommand{ID: id, ReassignTo: reassignTo, ReassignInvalid: invalid}); err != nil {
+		writeSiteError(w, err)
+		return
+	}
+	w.WriteHeader(http.StatusNoContent)
+}

api/handlers/site/sitemapHandler.go

@@ -0,0 +1,87 @@
+package site
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	validator "RenewCMS/api/pkg/validator"
+	"RenewCMS/internal/infrastructure/useCases"
+	"encoding/json"
+	"log"
+	"net/http"
+	"net/url"
+	"strconv"
+	"time"
+
+	"github.com/go-chi/chi/v5"
+)
+
+const (
+	defaultSitemapPage = 1
+	defaultSitemapSize = 100
+	totalCountHeader   = "X-Total-Count"
+)
+
+type SitemapHandler struct {
+	ListUseCase *useCases.ListSitemapUseCase
+}
+
+func NewSitemapHandler(list *useCases.ListSitemapUseCase) *SitemapHandler {
+	return &SitemapHandler{ListUseCase: list}
+}
+
+type sitemapQuery struct {
+	Page int `validate:"gte=1"`
+	Size int `validate:"oneof=25 50 100 500"`
+}
+
+type sitemapItem struct {
+	URL        string `json:"url"`
+	ModifiedAt string `json:"modified_at"`
+	Noindex    bool   `json:"noindex"`
+}
+
+func sitemapIntParam(values url.Values, name string, fallback int) (int, error) {
+	if !values.Has(name) {
+		return fallback, nil
+	}
+	return strconv.Atoi(values.Get(name))
+}
+
+func readSitemapQuery(values url.Values) (sitemapQuery, error) {
+	page, err := sitemapIntParam(values, "page", defaultSitemapPage)
+	if err != nil {
+		return sitemapQuery{}, err
+	}
+	size, err := sitemapIntParam(values, "size", defaultSitemapSize)
+	if err != nil {
+		return sitemapQuery{}, err
+	}
+	return sitemapQuery{Page: page, Size: size}, nil
+}
+
+func (h *SitemapHandler) Sitemap(w http.ResponseWriter, r *http.Request) {
+	query, err := readSitemapQuery(r.URL.Query())
+	if err != nil || validator.Validate.Struct(query) != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	page, err := h.ListUseCase.List(chi.URLParam(r, "key"), query.Page, query.Size)
+	if err != nil {
+		writeSiteError(w, err)
+		return
+	}
+
+	items := make([]sitemapItem, 0, len(page.Entries))
+	for _, entry := range page.Entries {
+		items = append(items, sitemapItem{URL: entry.URL, ModifiedAt: entry.ModifiedAt.UTC().Format(time.RFC3339), Noindex: entry.Noindex})
+	}
+	body, err := json.Marshal(items)
+	if err != nil {
+		http.Error(w, "Failed to encode response", http.StatusInternalServerError)
+		return
+	}
+	w.Header().Set(totalCountHeader, strconv.Itoa(page.Total))
+	if _, err := w.Write(body); err != nil {
+		log.Printf("Failed to write response: %v", err)
+	}
+}

api/middleware/apiKey.go

@@ -12,7 +12,7 @@ import (
 	"time"
 
 	"github.com/go-chi/jwtauth/v5"
-	"github.com/lestrrat-go/jwx/v2/jwt"
+	"github.com/lestrrat-go/jwx/v3/jwt"
 )
 
 const bearerScheme = "bearer "

api/middleware/requireSignedIn.go

@@ -5,7 +5,7 @@ import (
 	"net/http"
 
 	"github.com/go-chi/jwtauth/v5"
-	"github.com/lestrrat-go/jwx/v2/jwt"
+	"github.com/lestrrat-go/jwx/v3/jwt"
 )
 
 func RequireSignedIn(next http.Handler) http.Handler {

api/pkg/apperr/messages.go

@@ -57,3 +57,32 @@ const CachePurgeScopeErrorMessage = "Scope must be all, unused, variant or image
 const CachePurgeTargetErrorMessage = "A variant name or an image id is required for this scope."
 const VariantUnknownMessage = "Unknown variant"
 const VariantUnsupportedParameterMessage = "Unsupported parameter"
+const SiteNotFoundErrorMessage = "site_not_found"
+const SiteKeyTakenErrorMessage = "site_key_taken"
+const SiteHasArticlesErrorMessage = "site_has_articles"
+const DefaultSiteErrorMessage = "default_site"
+const SiteKeyImmutableErrorMessage = "key_immutable"
+const InvalidSiteURLErrorMessage = "invalid_site_url"
+const InvalidLocaleErrorMessage = "invalid_locale"
+const SiteImageNotFoundErrorMessage = "image_not_found"
+const UseSetDefaultErrorMessage = "use_set_default"
+const InvalidReassignErrorMessage = "invalid_reassign"
+const InvalidSocialTypeErrorMessage = "invalid_social_type"
+
+const AuthorNotFoundErrorMessage = "author_not_found"
+const AuthorSlugTakenErrorMessage = "author_slug_taken"
+const AuthorHasArticlesErrorMessage = "author_has_articles"
+const UserAlreadyLinkedErrorMessage = "user_already_linked"
+const AuthorAlreadyLinkedErrorMessage = "author_already_linked"
+const UserNotFoundErrorMessage = "user_not_found"
+const AuthorRightsErrorMessage = "author_rights"
+const BioTooLongErrorMessage = "bio_too_long"
+const InvalidURLErrorMessage = "invalid_url"
+const TooManyLinksErrorMessage = "too_many_links"
+const InvalidSlugErrorMessage = "invalid_slug"
+const AuthorImageNotFoundErrorMessage = "image_not_found"
+
+const ArticleSlugTakenErrorMessage = "slug_taken"
+const ArticleImageNotFoundErrorMessage = "image_not_found"
+const InvalidTitleTemplateErrorMessage = "invalid_title_template"
+const SlugSuggestionHeader = "X-Slug-Suggestion"

api/pkg/validator/validator.go

@@ -1,7 +1,11 @@
 package validator
 
 import (
+	"RenewCMS/internal/domain/article"
+	"RenewCMS/internal/domain/author"
 	"RenewCMS/internal/domain/image"
+	"RenewCMS/internal/domain/site"
+	"reflect"
 	"regexp"
 
 	"github.com/go-playground/validator/v10"
@@ -9,6 +13,12 @@ import (
 
 const inviteEmailTag = "inviteemail"
 const variantNameTag = "variantname"
+const siteKeyTag = "sitekey"
+const siteNameTag = "sitename"
+const AuthorNameTag = "authorname"
+const AuthorSlugTag = "authorslug"
+const SocialTypeTag = "socialtype"
+const ArticleSlugTag = "articleslug"
 
 var inviteEmailPattern = regexp.MustCompile(`^[^\s@]+@[^\s@.]+(\.[^\s@.]+)+$`)
 
@@ -18,6 +28,44 @@ func InitValidator() {
 	Validate = validator.New()
 	_ = Validate.RegisterValidation(inviteEmailTag, isInviteEmail)
 	_ = Validate.RegisterValidation(variantNameTag, isVariantName)
+	_ = Validate.RegisterValidation(siteKeyTag, isSiteKey)
+	_ = Validate.RegisterValidation(siteNameTag, isSiteName)
+	_ = Validate.RegisterValidation(AuthorNameTag, isAuthorName, true)
+	_ = Validate.RegisterValidation(AuthorSlugTag, isAuthorSlug, true)
+	_ = Validate.RegisterValidation(SocialTypeTag, isSocialType, true)
+	_ = Validate.RegisterValidation(ArticleSlugTag, isArticleSlug, true)
+}
+
+func isArticleSlug(field validator.FieldLevel) bool {
+	if isAbsent(field) {
+		return true
+	}
+	value := field.Field().String()
+	return value == "" || article.IsValidSlug(value)
+}
+
+func isAbsent(field validator.FieldLevel) bool {
+	return field.Field().Kind() == reflect.Ptr && field.Field().IsNil()
+}
+
+func isAuthorName(field validator.FieldLevel) bool {
+	return isAbsent(field) || author.IsValidName(field.Field().String())
+}
+
+func isSocialType(field validator.FieldLevel) bool {
+	return author.IsValidSocialType(field.Field().String())
+}
+
+func isAuthorSlug(field validator.FieldLevel) bool {
+	return isAbsent(field) || author.IsValidSlug(field.Field().String())
+}
+
+func isSiteKey(field validator.FieldLevel) bool {
+	return site.IsValidKey(field.Field().String())
+}
+
+func isSiteName(field validator.FieldLevel) bool {
+	return site.IsValidName(field.Field().String())
 }
 
 func isVariantName(field validator.FieldLevel) bool {

api/router.go

@@ -5,10 +5,12 @@ import (
 	"RenewCMS/api/handlers/apikey"
 	"RenewCMS/api/handlers/article"
 	"RenewCMS/api/handlers/auth"
+	"RenewCMS/api/handlers/author"
 	"RenewCMS/api/handlers/frontend"
 	"RenewCMS/api/handlers/imagevariant"
 	"RenewCMS/api/handlers/media"
 	"RenewCMS/api/handlers/settings"
+	"RenewCMS/api/handlers/site"
 	"RenewCMS/api/handlers/staticimages"
 	"RenewCMS/api/handlers/update"
 	"RenewCMS/api/handlers/user"
@@ -55,9 +57,12 @@ func NewArticleRouter(container *UseCases, trustedProxies []string) http.Handler
 
 	articleHandler := article.NewHandler(container.CreateArticleUseCase, container.GetArticleUseCase, container.ListArticlesUseCase, container.DeleteArticleUseCase, container.UpdateArticleUseCase, container.GetUserUseCase)
 
+	seoHandler := article.NewSEOHandler(container.ResolveArticleSEOUseCase, container.CheckArticleSEOUseCase, container.GetUserUseCase)
+
 	r.Group(func(r chi.Router) {
 		r.Get("/", articleHandler.ListArticles)
 		r.Get("/{id}", articleHandler.GetArticle)
+		r.Get("/{id}/seo", seoHandler.Resolve)
 	})
 	r.Group(func(r chi.Router) {
 		r.Use(jwtauth.Authenticator(container.Token))
@@ -68,6 +73,7 @@ func NewArticleRouter(container *UseCases, trustedProxies []string) http.Handler
 		r.Patch("/{id}", articleHandler.UpdateArticleBody)
 		r.Patch("/{id}/publish", articleHandler.PublishArticle)
 		r.Patch("/{id}/unpublish", articleHandler.UnpublishArticle)
+		r.Post("/{id}/seo/check", seoHandler.Check)
 	})
 	return r
 }
@@ -79,7 +85,7 @@ func NewAuthRouter(container *UseCases, isProduction bool, rateLimit config.Auth
 
 	loginHandler := auth.NewLoginHandler(container.Token, container.CreateUserUseCase, container.AuthenticateUserUseCase, isProduction)
 	verificationHandler := auth.NewVerificationHandler(container.VerifyUserUseCase, container.CancelRegistrationUseCase, isProduction)
-	meHandler := auth.NewMeHandler(container.GetUserUseCase)
+	meHandler := auth.NewMeHandler(container.GetUserUseCase, container.GetMyAuthorUseCase)
 	passwordResetHandler := auth.NewPasswordResetHandler(container.RequestPasswordResetUseCase, container.ResetPasswordUseCase)
 	acceptInviteHandler := auth.NewAcceptInviteHandler(container.GetInviteUseCase, container.AcceptInviteUseCase, container.Token, isProduction)
 
@@ -173,6 +179,71 @@ func NewSettingsRouter(container *UseCases, trustedProxies []string) http.Handle
 	return r
 }
 
+func NewSiteRouter(container *UseCases, trustedProxies []string) http.Handler {
+	r := chi.NewRouter()
+
+	siteHandler := site.NewHandler(container.ListSitesUseCase, container.CreateSiteUseCase, container.UpdateSiteUseCase, container.SetDefaultSiteUseCase, container.DeleteSiteUseCase)
+
+	sitemapHandler := site.NewSitemapHandler(container.ListSitemapUseCase)
+
+	r.Get("/{key}/sitemap", sitemapHandler.Sitemap)
+	r.Group(func(r chi.Router) {
+		r.Use(jwtauth.Verifier(container.Token))
+		r.Use(container.apiKeyAuth())
+		r.Use(jwtauth.Authenticator(container.Token))
+		r.Use(middleware.RequireCurrentToken(container.GetUserUseCase))
+		r.Use(middleware.RequireVerifiedUser(container.GetUserUseCase))
+		r.Get("/", siteHandler.List)
+	})
+	r.Group(func(r chi.Router) {
+		r.Use(middleware.RequireSession)
+		r.Use(jwtauth.Verifier(container.Token))
+		r.Use(middleware.AuditContext(container.GetUserUseCase, trustedProxies))
+		r.Use(middleware.RequireSignedIn)
+		r.Use(jwtauth.Authenticator(container.Token))
+		r.Use(middleware.RequireCurrentToken(container.GetUserUseCase))
+		r.Use(middleware.RequireVerifiedUser(container.GetUserUseCase))
+		r.Use(middleware.RequireOwner(container.GetUserUseCase))
+		r.Post("/", siteHandler.Create)
+		r.Patch("/{id}", siteHandler.Update)
+		r.Patch("/{id}/default", siteHandler.SetDefault)
+		r.Delete("/{id}", siteHandler.Delete)
+	})
+	return r
+}
+
+func NewAuthorRouter(container *UseCases, trustedProxies []string) http.Handler {
+	r := chi.NewRouter()
+
+	authorHandler := author.NewHandler(container.ListAuthorsUseCase, container.CreateAuthorUseCase, container.CreateMyAuthorUseCase, container.UpdateAuthorUseCase, container.DeleteAuthorUseCase, container.GetUserUseCase)
+
+	r.Group(func(r chi.Router) {
+		r.Use(jwtauth.Verifier(container.Token))
+		r.Use(container.apiKeyAuth())
+		r.Use(jwtauth.Authenticator(container.Token))
+		r.Use(middleware.RequireCurrentToken(container.GetUserUseCase))
+		r.Use(middleware.RequireVerifiedUser(container.GetUserUseCase))
+		r.Get("/", authorHandler.List)
+	})
+	r.Group(func(r chi.Router) {
+		r.Use(middleware.RequireSession)
+		r.Use(jwtauth.Verifier(container.Token))
+		r.Use(middleware.AuditContext(container.GetUserUseCase, trustedProxies))
+		r.Use(middleware.RequireSignedIn)
+		r.Use(jwtauth.Authenticator(container.Token))
+		r.Use(middleware.RequireCurrentToken(container.GetUserUseCase))
+		r.Use(middleware.RequireVerifiedUser(container.GetUserUseCase))
+		r.Post("/me", authorHandler.CreateMine)
+		r.Patch("/{id}", authorHandler.Update)
+		r.Group(func(r chi.Router) {
+			r.Use(middleware.RequireOwnerOrAdmin(container.GetUserUseCase))
+			r.Post("/", authorHandler.Create)
+			r.Delete("/{id}", authorHandler.Delete)
+		})
+	})
+	return r
+}
+
 func NewActivityRouter(container *UseCases, trustedProxies []string) http.Handler {
 	r := chi.NewRouter()
 
@@ -279,6 +350,7 @@ func NewMediaRouter(container *UseCases, trustedProxies []string) http.Handler {
 	r.Post("/merge", mediaHandler.Merge)
 	r.Patch("/{id}", mediaHandler.Rename)
 	r.Delete("/{id}", mediaHandler.Delete)
+	r.Get("/{id}", mediaHandler.Get)
 	r.Get("/{id}/usage", mediaHandler.Usage)
 	return r
 }
@@ -320,6 +392,8 @@ func InitBackendRoutes(container *UseCases, settings config.Settings) *chi.Mux {
 	})
 	r.Mount("/user", NewUserRouter(container, settings.AuthRateLimit, settings.TrustedProxies))
 	r.Mount("/settings", NewSettingsRouter(container, settings.TrustedProxies))
+	r.Mount("/site", NewSiteRouter(container, settings.TrustedProxies))
+	r.Mount("/author", NewAuthorRouter(container, settings.TrustedProxies))
 	r.Mount("/activity", NewActivityRouter(container, settings.TrustedProxies))
 	r.Mount("/media", NewMediaRouter(container, settings.TrustedProxies))
 	r.Mount("/image-variants", NewImageVariantRouter(container, settings.TrustedProxies))
@@ -353,7 +427,7 @@ func enableCorsIfConfigured(r *chi.Mux, origins []string) {
 		AllowedOrigins:   origins,
 		AllowedMethods:   []string{"GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"},
 		AllowedHeaders:   []string{"Accept", "Authorization", "Content-Type", "X-CSRF-Token"},
-		ExposedHeaders:   []string{"Link"},
+		ExposedHeaders:   []string{"Link", "X-Total-Count"},
 		AllowCredentials: false,
 		MaxAge:           300,
 	}))

docs/api.md

@@ -2,30 +2,35 @@
 
 The full, searchable reference is the Integration page of the running app (`/integration`). It
 renders `web/src/data/apiCatalogue.ts`, which is the single source for this page. This file is for
-readers without the UI.
+readers without the UI. Reading articles (pagination, `format`, body schemas) has its own page,
+[api/articles.md](api/articles.md), and API keys are covered in [api/api-keys.md](api/api-keys.md).
 
 ## Base URL
 The origin that serves the app, for example `https://cms.example`. Every path starts with `/v1`,
 for example `https://cms.example/v1/article/`.
 
 ## Authentication
-- Public routes need nothing: `GET /v1/article/` and `GET /v1/article/{id}`. They return online
-  articles only.
+- Public routes need nothing: `GET /v1/article/`, `GET /v1/article/{id}`, `GET /v1/article/{id}/seo`
+  and `GET /v1/site/{key}/sitemap`. They return online articles only; the list and the resolved SEO
+  object also answer drafts to a verified session or API key.
 - Everything else needs a signed-in browser session (the `jwt` cookie) or an API key:
   `Authorization: Bearer rcms_...`. Create keys at `/integration/api-keys`. A key acts as its
   creator, with that user's role, and shows in full once.
 - A key cannot call `POST /v1/auth/verify`, `DELETE /v1/auth/register`, `/v1/api-key/*` or
   `/v1/system/*`. Those answer 403 "This action needs a real session." An invalid, unknown, expired
-  or revoked key answers 401, even on public routes.
+  or revoked key answers 401, even on public routes. The site writes (`POST`, `PATCH` and `DELETE`
+  under `/v1/site`) and the author writes (`POST`, `PATCH` and `DELETE` under `/v1/author`, `POST /v1/author/me` included) are session only too.
 - Each key can make 120 requests per minute. Beyond that: 429 with a `Retry-After` header.
 
-## Routes a key can call (24)
+## Routes a key can call (30)
 | Group | Routes |
 | --- | --- |
-| Articles | GET /v1/article/, GET /v1/article/{id}, POST /v1/article/, PATCH /v1/article/{id}, PATCH /v1/article/{id}/publish, PATCH /v1/article/{id}/unpublish, DELETE /v1/article/{id} |
-| Media | GET /v1/media/, POST /v1/media/, PATCH /v1/media/{id}, DELETE /v1/media/{id}, POST /v1/media/merge, GET /v1/media/{id}/usage, GET /v1/media/purge-settings (owner or admin), PATCH /v1/media/purge-settings (owner or admin), GET /v1/media/purge-preview (owner or admin), POST /v1/media/purge (owner or admin), GET /v1/media/{id}/variants (owner or admin, session only), POST /v1/media/{id}/variants (owner or admin, session only), POST /v1/media/{id}/variants/{name} (owner or admin, session only), DELETE /v1/media/{id}/variants/{name} (owner or admin, session only) |
-| Users and invites | GET /v1/user/, PATCH /v1/user/me, POST /v1/user/invite (owner only), DELETE /v1/user/invite/{id} (owner only), POST /v1/user/invite/{id}/renew (owner only), GET /v1/auth/me |
+| Articles | GET /v1/article/, GET /v1/article/{id}, GET /v1/article/{id}/seo, POST /v1/article/{id}/seo/check, POST /v1/article/, PATCH /v1/article/{id}, PATCH /v1/article/{id}/publish, PATCH /v1/article/{id}/unpublish, DELETE /v1/article/{id} |
+| Media | GET /v1/media/, GET /v1/media/{id}, POST /v1/media/, PATCH /v1/media/{id}, DELETE /v1/media/{id}, POST /v1/media/merge, GET /v1/media/{id}/usage, GET /v1/media/purge-settings (owner or admin), PATCH /v1/media/purge-settings (owner or admin), GET /v1/media/purge-preview (owner or admin), POST /v1/media/purge (owner or admin), GET /v1/media/{id}/variants (owner or admin, session only), POST /v1/media/{id}/variants (owner or admin, session only), POST /v1/media/{id}/variants/{name} (owner or admin, session only), DELETE /v1/media/{id}/variants/{name} (owner or admin, session only) |
+| Users and invites | GET /v1/user/, PATCH /v1/user/me, POST /v1/user/invite (owner only), DELETE /v1/user/invite/{id} (owner only), POST /v1/user/invite/{id}/renew (owner only), GET /v1/auth/me (with the linked `author`) |
 | Settings | GET /v1/settings |
+| Sites | GET /v1/site/, GET /v1/site/{key}/sitemap |
+| Authors | GET /v1/author/ |
 
 ## Activity log
 The activity routes are session only: a key answers 403 "This action needs a real session." and a
@@ -39,8 +44,8 @@ key never reads the audit trail. Events are append-only; there is no `POST`, `PU
 | `GET /v1/activity/export` | Owner, admin | The same filters as the list without `page` or `size`, as a `text/csv; charset=utf-8` attachment (`when,actor,action,target,outcome,source,ip`). Cells starting with `=`, `+`, `-` or `@` get a leading quote. |
 
 Query: `q`, `actor` (`user:ID`, `key:ID`, `system`), `category` (`articles`, `media`, `users`,
-`api_keys`, `auth`, `system`), `outcome` (`all`, `success`, `failed`), `security` (`true`), `range`
-(`today`, `7d`, `30d`, `custom`; default `7d`), `from` and `to` (dates, with `custom`), `page` (from
+`api_keys`, `auth`, `system`, `sites`, `authors`), `outcome` (`all`, `success`, `failed`), `security` (`true`), `range`
+(`today`, `7d`, `30d`, `all`, `custom`; default `7d`), `from` and `to` (dates, with `custom`), `page` (from
 1) and `size` (25, 50 or 100). Any invalid value answers 400 with the body-mismatch message. Dates
 are UTC. The list answers `{ items, total, page, size }`, newest first (`created_at`, then `id`).
 
@@ -64,12 +69,14 @@ never changes the response or the change itself.
 | `articles` | `article.create`, `article.edit`, `article.publish`, `article.unpublish`, `article.delete` |
 | `media` | `media.upload`, `media.rename`, `media.delete`, `media.merge`, `media.purge`, `media.variant_create`, `media.variant_update`, `media.variant_delete`, `media.variant_enable`, `media.variant_disable`, `media.variant_purge`, `media.variant_generate_all`, `media.variant_purge_image`, `media.variant_purge_all`, `media.variant_purge_unused` |
 | `users` | `user.register`, `user.verify`, `user.update_profile`, `invite.create`, `invite.cancel`, `invite.renew`, `invite.accept` |
+| `sites` | `site.create`, `site.edit`, `site.set_default`, `site.delete` |
+| `authors` | `author.create`, `author.edit`, `author.delete` |
 | `system` | `system.media_purge` (scheduled), `system.update_checked`, `system.update_downloaded`, `system.restart_requested`, `system.activity_cleanup`, `system.activity_retention_changed` |
 
-Target types: `article`, `image`, `image_variant` (id and name are the variant name), `user`, `invite`,
+Target types: `article`, `site`, `author`, `image`, `image_variant` (id and name are the variant name), `user`, `invite`,
 `api_key` and `release` (id and name are the tag).
-Only the fields `title`, `online`, `body`, `filename`, `display_name`, `width`, `height`, `fit`, `format` and `quality` appear in `changes`, with the
-kinds `text` and `body`; a body edit carries a signed character count delta and never the text. A
+Only the fields `title`, `online`, `body`, `site`, `name`, `base_url`, `default_robots`, `locale`, `default_social_image`, `slug`, `canonical_url`, `noindex`, `cover_image`, `social_image`, `excerpt`, `seo_title`, `seo_description`, `social_title`, `social_description`, `cover_image_alt`, `site_name`, `title_template`, `default_description`, `bio`, `website`, `social_links`, `avatar`, `user`, `authors`, `filename`, `display_name`, `width`, `height`, `fit`, `format` and `quality` appear in `changes` (a site key is never a change; moving an article records `site` with the site names; changing the credited authors records `authors` with the names in order; the `user` change of an author holds usernames, never an email), with the
+kinds `text` and `body`; a body edit carries a signed character count delta and never the text; the free-text SEO fields (`excerpt`, `seo_title`, `seo_description`, `social_title`, `social_description`, `cover_image_alt`) do the same under their own field name, while `slug`, `canonical_url`, `noindex`, `cover_image`, `social_image` (image file names) and the site fields `site_name`, `title_template`, `default_description` carry `before` and `after`. `seo_dismissed` is not an edit and records nothing. A
 change that leaves a value as it was (same body, same publish state, same file name, same display
 name) records nothing. Params: `media.merge` and `media.purge` and `system.media_purge` carry
 `merged` and `articles_updated`, plus `failed_groups` when a group failed (still outcome `success`);
@@ -96,10 +103,178 @@ try again."; the text of the error never reaches the event, the API or the CSV.
 codes, article bodies, file bytes, storage paths and asset urls are never recorded.
 
 Article routes accept `?format=markdown|html|json` (default `markdown`). `GET /v1/media/` accepts
-`q`, `hash`, `cursor`, `filter`, `sort` (`newest`, `oldest`, `name`, `largest` or `total_size`, the
-original plus its generated variants), `variants` (`with` or `without` generated variant files) and
-`limit`. Every item carries `variant_count` and `variant_size` (the index rows of the image and
-their bytes, 0 when none); `counts` stays library-wide. Any other `variants` or `sort` value is 400.
+`q`, `hash`, `filter` (`all`, `unused` or `duplicates`), `sort` (`newest`, `oldest`, `name`,
+`largest` or `total_size`, the original plus its generated variants), `variants` (`with` or
+`without` generated variant files), `page` (a whole number from 1, default 1) and `size` (5, 25, 50
+or 100, default 25). The body is `{ "items": [...], "total", "page", "size", "counts" }`: `total` is
+the number of images matching `q`, `hash`, `filter` and `variants` before paging, `page` and `size`
+echo the values applied, and `counts` (`all`, `unused`, `duplicates`) stays library-wide, ignoring
+every filter and the paging. Ordering is applied to the whole matching list before slicing, with the
+image id as the final tie-break, so pages never overlap or skip. A page past the last answers 200
+with `items: []` and the real `total`. Any invalid `page`, `size`, `filter`, `sort`, `variants` or
+`hash` is 400 "The media query is invalid.". Every item carries `variant_count` and `variant_size`
+(the index rows of the image and their bytes, 0 when none).
+
+`GET /v1/media/{id}` reads one image with the same auth as the list (a verified session or an API key; 403 for an
+unverified account, 401 without credentials) and writes nothing, so it records no activity event. It answers 200 with
+the object of one `items` element of the list, a missing image is 404 "Image not found" and a malformed id is 400 with
+the id-format message.
+
+Breaking change: `next_cursor` is gone and no `X-Total-Count` header is sent. `cursor` and `limit`
+are no longer parameters; they are ignored, never an error, and have no effect on paging.
+
+## Sites
+Every article belongs to exactly one site, and exactly one site is the default. A site is `{ id,
+name, key, base_url, default_social_image_id, default_robots, locale, is_default, article_count }`:
+`name` is 1 to 100 characters, `key` is 2 to 32 characters of lowercase letters, digits and single
+dashes (`^[a-z0-9]+(-[a-z0-9]+)*$`) and never changes, `base_url` is `https` (or `http` for
+`localhost`, `127.0.0.1` and `[::1]`) with no path, query or user info (a trailing slash is
+stripped, uniqueness is not enforced), `default_robots` is `index` (default) or `noindex`, `locale`
+is `null` or a tag such as `en` or `fr-CA` (an empty string means none) and `default_social_image_id`
+is `null` or the id of an image. Read access needs a verified session or an API key; every write is
+session only and owner only (403 "Only the owner can do this.", or "This action needs a real
+session." with a key). The role is checked before the body.
+
+| Route | Purpose |
+| --- | --- |
+| `GET /v1/site/` | The sites, default first and then by name, each with `article_count`. Query `q` (up to 200 characters, matched in `name`, `key` or `base_url`, ignoring case and accents, `%` and `_` literal), `page` (a whole number from 1) and `size` (5, 25, 50 or 100). Without `page` and `size` every matching site is returned; with only `page`, `size` is 25; with only `size`, `page` is 1. The body stays a JSON array (`[]` when nothing matches, never `null`) and `X-Total-Count` holds the number of matching sites before paging. A page past the end is `200 []` with the total. An invalid `page`, `size` or `q` is 400 with the body-mismatch message and no `X-Total-Count`. |
+| `POST /v1/site/` | Create. 201 with the site. `is_default: true` makes it the default. `site_name`, `title_template` and `default_description` are optional and validated like on `PATCH`. |
+| `PATCH /v1/site/{id}` | Edit `name`, `base_url`, `default_robots`, `locale`, `default_social_image_id`, `site_name`, `title_template`, `default_description`. Absent fields are untouched. `key` may only be repeated unchanged; `is_default` is refused. |
+| `PATCH /v1/site/{id}/default` | Make the site the default, atomically. Setting the current default is a no-op. |
+| `DELETE /v1/site/{id}?reassign_to={id}` | 204. A site with articles needs `reassign_to`; the articles move and the site is deleted in one transaction. `reassign_to` is ignored when the site has no article. |
+
+Errors are plain text whose body is exactly the token: 409 `site_key_taken`, 409 `site_has_articles`,
+403 `default_site` (checked before the articles), 400 `key_immutable`, 400 `invalid_site_url`, 400
+`invalid_locale`, 400 `invalid_title_template`, 400 `image_not_found`, 400 `use_set_default`, 400 `invalid_reassign` (missing
+number, the site itself or not a whole number) and 404 `site_not_found`. Refused writes except `site_not_found` and `image_not_found` are recorded as failed events. A body that cannot be
+decoded is 400 with the body-mismatch message, a malformed id is 400 with the uint32 message, and a
+field that fails validation (`name`, `key` format, `default_robots`, `site_name` over 100 characters, `title_template` over 200, `default_description` over 320) is 400 with the validator text.
+
+A site also carries `site_name` (at most 100 characters, `""` by default), `title_template` (at most 200 characters, `%title% | %site%` by default; it must contain `%title%`, case sensitive, otherwise 400 `invalid_title_template`, an empty template included) and `default_description` (at most 320 characters, `""` by default). They appear on every site response, `POST` accepts them and `PATCH` edits them like the other site fields. Existing sites get the defaults when the server starts after the upgrade.
+
+Articles carry `site_id`. A new article starts on the default site. `GET /v1/article/?site=<key>`
+keeps only the articles of that site and composes with `status`, `q`, `sort`, `size` and `page`;
+`counts` stay global, an unknown key answers 200 with no item and an empty `site=` is 400 with the
+body-mismatch message. `PATCH /v1/article/{id}` takes `body`, `site_id`, `author_ids` and the SEO
+fields below, and nothing else, such as `title`: absent fields are untouched, an empty object, an object without
+those fields, a `null` value (except on `cover_image_id` and `social_image_id`) or a malformed value is 400 with the body-mismatch message, `site_id: 0` is
+400 with the validator text and an unknown site is 404 `site_not_found`. Moving an article never
+changes `is_online`. `{"body": ""}` still sets an empty body, but `{}` and `{"body": null}` no longer do: they are 400.
+
+### Resolved SEO, check, list status and sitemap
+
+RenewCMS renders no page and injects no meta tag: it returns the data a frontend needs.
+
+| Route | Who | Purpose |
+| --- | --- | --- |
+| `GET /v1/article/{id}/seo` | public for online articles; a verified session or API key also reads drafts | The resolved object `{ title, description, canonical_url, robots, og, twitter, image, authors, published_at, modified_at, fallbacks, json_ld }`. It never carries the body, the id or `seo_dismissed`, ignores `format`, and writes nothing. An offline article for any other caller, and a missing one, is 404 `Article not found`. |
+| `POST /v1/article/{id}/seo/check` | verified session or API key (401 without credentials, 403 unverified) | Evaluates the article without saving. The body is `{}` or any of the twelve SEO fields of `PATCH` plus `body`; each replaces the saved value for this check only. `site_id`, `author_ids`, unknown fields and `null` (except on `cover_image_id` and `social_image_id`) are 400 with the body-mismatch message. The other validation is the one of `PATCH` (`invalid_slug`, `invalid_url` as 422, `image_not_found`, validator text). Answers `{ status, suggestions, slug }` where `suggestions` is `[{ code, field, params }]` and `slug` is `{ available, suggestion }`. A taken slug is a 200 with `available: false` and the first free `<slug>-N` in `suggestion`, never a 409. |
+| `GET /v1/site/{key}/sitemap` | public | A JSON array `[{ url, modified_at, noindex }]` of the online articles of the site with that key, by id ascending. `url` is `base_url/slug` (never the canonical override). `page` (default 1) and `size` (25, 50, 100 or 500, default 100); an invalid value is 400 with the body-mismatch message. The total is in the `X-Total-Count` header. An unknown key, an id included, is 404 `site_not_found`. |
+
+`GET /v1/article/` also takes `seo=ready|suggestions|hidden` (any other value, an empty one included, is 400 with the body-mismatch message, after the `format` check). It is applied before paging and composes with `q`, `status`, `site`, `sort`, `page` and `size`; `total` follows it and `counts` ignore it. Every item carries `seo_status` (`ready`, `suggestions` or `hidden`) and `seo_suggestions` (the number of suggestions that are not dismissed). The filter is evaluated in memory over every matching article, so its cost grows with the number of articles on the site; without it only the returned page is assessed.
+
+`X-Total-Count` is added to `Access-Control-Expose-Headers` next to `Link`, so a browser on an allowed origin can read it.
+
+### Article SEO fields
+
+An article carries twelve search and sharing fields, all edited through `PATCH /v1/article/{id}` and returned by
+every single-article read (`GET /v1/article/{id}`, `POST`, `PATCH`, `publish`, `unpublish`):
+`slug`, `excerpt`, `seo_title`, `seo_description`, `cover_image_id`, `cover_image_alt`, `social_title`,
+`social_description`, `social_image_id`, `canonical_url`, `noindex` and `seo_dismissed`. Text fields are `""`
+when empty, the two image ids are `null` when unset, `noindex` is `false` and `seo_dismissed` is `[]` by
+default. Each item of `GET /v1/article/` carries `excerpt` and `slug` and none of the other ten.
+The limits are counted in characters: `excerpt` 300, `seo_title` 120, `seo_description` 320,
+`cover_image_alt` 200, `social_title` 120, `social_description` 320, `canonical_url` 2048; going over is
+400 with the validator text. `cover_image_id` and `social_image_id` accept `null` (and only those two do);
+`0` is 400 with the validator text and an unknown image is 400 `image_not_found`. `canonical_url` is `""` or an absolute
+`https` URL with a host, otherwise 422 `invalid_url`. `seo_dismissed` is a list of the codes `title_long`,
+`title_empty`, `desc_short`, `desc_long`, `cover_alt`, `cover_none`, `slug_long`, `no_au`, `no_h`, `body_alt`
+and `short`: an unknown code is 400 with the validator text and duplicates are collapsed with the order
+kept. `noindex` is only a flag, it does not take the article offline.
+
+The `slug` matches `^[a-z0-9]+(-[a-z0-9]+)*$` with 1 to 100 characters (400 `invalid_slug`) and is unique per
+site, never globally. It is generated from the title when the article is created: lowercase, accents folded,
+every run of other characters becomes one dash, dashes trimmed, cut to 100 characters, and `article` when no
+letter or digit is left; a slug already used on the site gets `-2`, `-3`... silently. The same rule
+backfills the existing articles when the server starts after the upgrade (in id order within each site, so
+the oldest article keeps the plain slug). Sending `slug: ""` regenerates the slug from the title. A slug
+used by another article on the target site (the new site when `site_id` is sent too, and a move re-checks
+the current slug) is 409 with the plain-text body `slug_taken`; the response then carries the header
+`X-Slug-Suggestion` holding the first free `<slug>-N` from 2 on that site, fitting 100 characters. The header
+is set on this 409 only, never on another response. A regeneration that collides is refused the same way, never suffixed
+silently. Saving an article with its own slug is not a collision. Publishing never changes a slug, a deleted article
+frees its slug.
+
+New error tokens are plain text from the handler: 409 `slug_taken`, 400 `invalid_slug`, 422 `invalid_url`, 400
+`image_not_found` and 400 `invalid_title_template` (sites). Edits that change a SEO field are recorded as
+`article.edit` events (`slug`, `canonical_url`, `noindex`, `cover_image`, `social_image` with before and after;
+the free-text fields as a size delta only); a refused slug is recorded as failed.
+
+A site's `default_social_image_id` counts as a use of that image: it raises `used_in` and keeps the
+image out of the `unused` filter. Deleting the image sets the field to `null` and succeeds. `POST /v1/media/merge` and `POST
+/v1/media/purge` repoint the sites of the merged copies to the kept image and report it as
+`sites_updated` next to `articles_updated`.
+
+An article's `cover_image_id` and `social_image_id` count the same way. `used_in` counts every article that uses the
+image in its body, as cover or as social image once, plus the authors using it as an avatar and the sites using it as default
+social image. Deleting an image never fails because of its uses: the covers and social images pointing at it are set to `null`
+(the `cover_image_alt` and the bodies are untouched), and a failed delete leaves every reference in place. A merge or a purge repoints
+the covers and social images of the copies to the kept image, and an article rewritten in its body and its cover counts once in
+`articles_updated`.
+
+`GET /v1/media/{id}/usage` stays an array. Every item keeps the keys it had and gains `type` (`article`,
+`author` or `site`) and `fields`. An article item is `{ "type": "article", "id", "title", "published", "fields" }` with
+`fields` from `body`, `cover` and `social` (one item per article, in that order); an author item is
+`{ "type": "author", "id", "title": <name>, "fields": ["avatar"] }` and a site item is `{ "type": "site", "id", "title": <name>,
+"fields": ["default_social_image"] }`; author and site items have no `published` key. The array is `[]` for an unused image.
+
+## Authors
+
+An author is a public byline, with or without an account. It is `{ id, name, slug, bio, avatar_id,
+website, social_links, user_id, is_linked, article_count }`, plus `user_email` for owners and admins
+only (absent for every other caller). `name` is 1 to 100 characters after trimming, `slug` matches
+`^[a-z0-9]+(-[a-z0-9]+)*$` with 1 to 100 characters and is unique (generated from the name when
+omitted: accents folded, punctuation runs become one dash, `author` when nothing is left), `bio` has
+at most 280 characters (counted in runes), `avatar_id` is `null` or an image id, `website` is `null`
+or an `https` URL with a host (an empty string means none, at most 2048 characters),
+`social_links` holds at most 5 `{ "type", "url" }` with `type` one of `x`, `linkedin`, `github`,
+`mastodon`, `custom` and an `https` URL. `user_id` is the unique link to a user. Zero authors on an
+article is allowed and never blocks publishing.
+
+| Route | Who | Purpose |
+| --- | --- | --- |
+| `GET /v1/author/` | verified session or API key | The authors newest first. Query `q` (name or slug, accent and case insensitive), `page` (default 1), `size` (5, 25, 50 or 100, default 25). Body `{ items, total, page, size }`, with `total` repeated in the `X-Total-Count` header on every 200; a bad query is 400 with the body-mismatch message and no header. |
+| `POST /v1/author/` | owner or admin, session only | Create. 201 with the author. `user_id` links an account that has no author. |
+| `POST /v1/author/me` | any verified session | Create the caller's own author from the display name (or the username). A taken slug gets `-2`, `-3`... silently. 201 with the author plus `slug_adjusted`: `true` when the stored slug differs from the plain slug of the name (a collision suffix was added), `false` otherwise. No other author response carries this field. |
+| `PATCH /v1/author/{id}` | owner or admin on any author; any verified session on the author linked to it; session only | Edit `name`, `slug`, `bio`, `avatar_id`, `website`, `social_links`, `user_id`. Absent fields are untouched, `avatar_id`, `website` and `user_id` accept `null`, `social_links` is replaced as a whole. `user_id` links or unlinks the account and is owner or admin only. |
+| `DELETE /v1/author/{id}?reassign_to={id\|none}` | owner or admin, session only | 204. An author credited on articles needs `reassign_to`: an author id (that author takes the deleted one's position and is never duplicated on an article) or `none` (the credit is removed). The move and the delete are one transaction. `reassign_to` is ignored when the author has no article. The linked account is untouched. |
+
+The role checks use the existing bodies: 403 "Only owners and admins can do this." for `POST /` and
+`DELETE`, 403 `author_rights` for a `PATCH` by an account that is not owner or admin on an author
+that is not its own (or that sends `user_id`), and 403 "This action needs a real session." for a key.
+Errors are plain text whose body is exactly the token: 404 `author_not_found`, 404 `user_not_found`,
+409 `author_slug_taken`, 409 `author_has_articles`, 409 `user_already_linked`, 409
+`author_already_linked`, 400 `invalid_slug`, 400 `invalid_reassign` (own id, not a whole number,
+negative or empty), 400 `image_not_found`, 422 `bio_too_long`, 422 `invalid_url` and 422
+`too_many_links`. A body that cannot be decoded, an empty `PATCH` or one that nulls a required field
+is 400 with the body-mismatch message, a malformed id is 400 with the uint32 message and other
+validation failures (`name`, link `type`) are 400 with the validator text. Writes refused for a
+reason other than a missing target or an invalid value are recorded as failed events.
+
+Articles carry `authors`, the ordered credits (the first is the primary byline), each with only `id`,
+`name`, `slug`, `bio`, `avatar_id`, `website` and `social_links`; it is `[]` when there is none and it
+is visible on online articles to anonymous readers. `PATCH /v1/article/{id}` also takes
+`author_ids`, the whole ordered list: it replaces the credits, `[]` empties them, an unknown id is 404
+`author_not_found`, a duplicate, `null` or a malformed list is 400 with the body-mismatch message and
+`0` is 400 with the validator text. Absent means unchanged. A new article is credited to the
+creator's linked author when there is one. `GET /v1/auth/me` returns the existing user fields plus
+`author`: the caller's linked author (`id`, `name`, `slug`, `bio`, `avatar_id`, `website`,
+`social_links`, `article_count`) or `null`.
+
+An author's `avatar_id` counts as a use of that image like a site's social image: it raises `used_in`
+and keeps the image out of the `unused` filter, and `GET /v1/media/{id}/usage` lists the author with the field `avatar`.
+Deleting the image sets `avatar_id` to `null`. `POST /v1/media/merge` and `POST /v1/media/purge`
+repoint the avatars of the merged copies and report it as `authors_updated`.
 
 ## Image variants
 Owners and admins manage named variants of the stored images. These routes are session only (no API

docs/api/articles.md

@@ -2,6 +2,8 @@
 
 Every route that returns an article accepts the optional `format` query parameter and returns the article body in that format. Articles are stored as HTML (Tiptap output). Storage and the request bodies of `POST /v1/article/` and `PATCH /v1/article/{id}` stay HTML.
 
+`PATCH /v1/article/{id}` takes `body`, `site_id`, `author_ids` (the whole ordered list of author ids, see `docs/api.md`) and the SEO fields listed below, and nothing else. The request must contain at least one of them, and `null` answers `400` except for `cover_image_id` and `social_image_id`. Behaviour change: `{}` and `{"body": null}` used to set an empty body and now answer `400`; send `{"body": ""}` to empty a body.
+
 ## Routes that honour `format`
 
 - `GET /v1/article/`
@@ -13,6 +15,40 @@ Every route that returns an article accepts the optional `format` query paramete
 
 Visibility is unchanged: anonymous and unverified callers only see online articles, and an offline article answers `404 Article not found`.
 
+## Pagination, search and counts
+
+`GET /v1/article/` always answers one page inside an envelope, with or without query parameters:
+
+```json
+{
+  "items": [],
+  "total": 30,
+  "page": 1,
+  "size": 25,
+  "counts": { "all": 30, "online": 30, "draft": 0, "suggestions": 4 }
+}
+```
+
+| Parameter | Values | Default |
+| --- | --- | --- |
+| `page` | integer >= 1 | `1` |
+| `size` | `5`, `25`, `50` or `100` | `25` |
+| `q` | up to 200 characters, matched anywhere in the title, ignoring case and accents | none |
+| `status` | `online` or `draft` | none |
+| `site` | the `key` of a site; an unknown key gives an empty page, an empty value is `400` | none |
+| `seo` | `ready`, `suggestions` or `hidden`; any other value, an empty one included, is `400` | none |
+| `sort` | `title`, `status`, `created_at` or `updated_at`, then `:asc` or `:desc` (lowercase, for example `title:asc`) | `updated_at:desc` |
+
+- `items` is `[]` when empty, never `null`. Each item is the article object below.
+- Items follow `sort` (default `updated_at:desc`) across the whole list before paging. `title` ignores case, `status` orders on online state (`status:asc` puts drafts first), and every ordering ends with `id` descending so pages never overlap.
+- `total` is the number of visible articles matching `q` and `status`, before paging. `page` and `size` echo the values applied.
+- `counts` ignores `q`, `status`, `site`, `seo`, `sort`, `page` and `size`, so tab counts do not move while searching. `suggestions` is the number of visible articles whose `seo_status` is `suggestions` (hidden and ready articles and dismissed codes are not counted); it equals the `total` of `?seo=suggestions` sent with no other filter by the same caller. For anonymous and unverified callers `all` equals `online` and `draft` is `0`, and `status=draft` answers `items: []` and `total: 0`.
+- Each item also carries `seo_status` and `seo_suggestions` (see [SEO status and suggestions](#seo-status-and-suggestions)). `seo` filters on the status before paging, so `total` follows it while `counts` do not.
+- A page beyond the last answers `200` with `items: []` and the real `total`.
+- An invalid `page`, `size`, `status`, `sort` or an over-long `q` answers `400` with the plain-text message `The request cannot be processed due to a mismatch in the format of the body.` An invalid `format` is reported first.
+
+Breaking change: this route used to answer a bare JSON array. Clients must read the `items` property.
+
 ## The `format` parameter
 
 | Value | `body` | `body_format` |
@@ -35,11 +71,93 @@ Breaking change: the default used to be HTML. Clients that need HTML must send `
   "body": "## Plan\n\nReplace the **old** deck.",
   "body_format": "markdown",
   "is_online": true,
+  "site_id": 1,
+  "authors": [],
+  "slug": "backyard-renovation-update",
+  "excerpt": "",
+  "seo_title": "",
+  "seo_description": "",
+  "cover_image_id": null,
+  "cover_image_alt": "",
+  "social_title": "",
+  "social_description": "",
+  "social_image_id": null,
+  "canonical_url": "",
+  "noindex": false,
+  "seo_dismissed": [],
   "created_at": "2026-03-12T09:14:00Z",
   "updated_at": "2026-09-10T07:00:00Z"
 }
 ```
 
+Every single-article read (`GET /v1/article/{id}`, `POST`, `PATCH`, `publish`, `unpublish`) carries the twelve SEO fields. Each item of `GET /v1/article/` carries `slug` and `excerpt` only, and none of the other ten.
+
+## SEO fields
+
+| Field | Type | Limit and rule |
+| --- | --- | --- |
+| `slug` | string | `^[a-z0-9]+(-[a-z0-9]+)*$`, 1 to 100 characters, unique per site. `""` regenerates it from the title. |
+| `excerpt` | string | 300 characters |
+| `seo_title` | string | 120 characters |
+| `seo_description` | string | 320 characters |
+| `cover_image_id` | number or `null` | an existing image id (`0` is refused) |
+| `cover_image_alt` | string | 200 characters, independent of the cover |
+| `social_title` | string | 120 characters |
+| `social_description` | string | 320 characters |
+| `social_image_id` | number or `null` | an existing image id (`0` is refused) |
+| `canonical_url` | string | `""` or an absolute `https` URL with a host, at most 2048 characters |
+| `noindex` | boolean | only a flag: the article stays online |
+| `seo_dismissed` | array of strings | any of `title_long`, `title_empty`, `desc_short`, `desc_long`, `cover_alt`, `cover_none`, `slug_long`, `no_au`, `no_h`, `body_alt`, `short`; duplicates are collapsed, order kept |
+
+Limits are counted in characters (runes), not bytes. Absent fields are untouched; text fields and `noindex` are cleared with `""`, `false` and `[]`, the two image ids with `null`.
+
+### The slug
+
+A slug is unique per site (`site_id`, `slug`), never globally. At creation it is generated from the title: lowercase, accents folded, every run of other characters becomes one dash, dashes trimmed, cut to 100 characters without a trailing dash, and `article` when no letter or digit is left. A slug already used on the site gets `-2`, `-3`... silently, the base being truncated so the result fits 100 characters. The same rule backfills existing articles on the first start after the upgrade, in id order within each site.
+
+Editing a slug that another article of the target site already uses (the new site when `site_id` is sent in the same request; moving an article also re-checks its current slug there) answers `409` with the plain-text body `slug_taken`, and the response header `X-Slug-Suggestion` holds the first free `<slug>-N` from 2 on that site, fitting 100 characters. `X-Slug-Suggestion` is set on this `409` only and on no other response. A request with `slug: ""` that regenerates onto another article's slug is refused the same way and never suffixed silently. Re-sending an article's own slug is not a conflict. A refused request changes nothing.
+
+Publishing, unpublishing and `noindex` never change a slug. A deleted article frees its slug.
+
+## Resolved SEO object
+
+`GET /v1/article/{id}/seo` answers the data a frontend renders in its `<head>`. Online articles are public; a draft needs a verified session or API key and is otherwise `404 Article not found`. The query is ignored (no `format`). Keys:
+
+`title`, `description`, `canonical_url`, `robots`, `og` (`type`, `title`, `description`, `image`, `image_alt`, `url`, `site_name`, `locale`), `twitter` (`card`, `title`, `description`, `image`, `image_alt`), `image` (`url`, `alt`, `source`), `authors` (`name`, `url`, `same_as`), `published_at`, `modified_at`, `fallbacks` and `json_ld` (a ready schema.org `Article`).
+
+The fallback chain, first non-empty wins:
+
+| Output | Chain | `fallbacks` value |
+| --- | --- | --- |
+| `title` | `seo_title`, then the article title, then the site `title_template` (`%title%`, `%site%` replaced by `site_name`, result trimmed) | `seo_title`, `title` |
+| `description` | `seo_description`, `excerpt`, the first sentence of the body (tags removed), the site `default_description` | `seo_description`, `excerpt`, `body`, `site`, `none` |
+| `image` | `social_image_id`, `cover_image_id` (with `cover_image_alt`), the site `default_social_image_id`; `url` is the site `base_url` plus the image path, `""` and `none` when there is none | `social`, `cover`, `site`, `none` |
+| `canonical_url` | `canonical_url`, then site `base_url` + `/` + `slug` | `canonical_url`, `site` |
+| `robots` | `noindex, nofollow` when `noindex` is true, otherwise from the site `default_robots` (`index, follow` or `noindex, nofollow`) | none |
+| `og` and `twitter` title and description | `social_title` and `social_description`, then the resolved values | none |
+
+`og.type` is `article`, `og.locale` is the site locale (`""` when none), `twitter.card` is `summary_large_image` with an image and `summary` without. `published_at` is the creation time of an online article and `null` for a draft; `modified_at` is `updated_at`. `authors[].url` is the author website (`""` when none) and `same_as` lists the social link URLs only. `json_ld.headline` is the meta title without the site template, and `author`, `image` and `datePublished` are left out when empty.
+
+## SEO status and suggestions
+
+`POST /v1/article/{id}/seo/check` and the list use one rule set. Soft ranges never block saving or publishing; lengths are counted in characters.
+
+| Code | Field | Fires when | `params` |
+| --- | --- | --- | --- |
+| `title_long` | `seo_title` | the meta title (`seo_title`, else the title) is over 60 characters | `length`, `max` |
+| `title_empty` | `seo_title` | the meta title is empty after trimming | none |
+| `desc_short` | `seo_description` | the resolved description is under 70 characters | `length`, `min` |
+| `desc_long` | `seo_description` | the resolved description is over 160 characters | `length`, `max` |
+| `cover_alt` | `cover_image_alt` | there is a cover and its alt text is empty | none |
+| `cover_none` | `cover_image_id` | there is no cover | none |
+| `slug_long` | `slug` | the slug is over 75 characters | `length`, `max` |
+| `no_au` | `author_ids` | no author is credited | none |
+| `no_h` | `body` | the text has at least 1000 characters and no `h2` to `h6` | none |
+| `body_alt` | `body` | an image of the body has no alt text | `count` |
+| `short` | `body` | the text has fewer than 300 characters | `length`, `min` |
+
+Suggestions come in that order. Codes in `seo_dismissed` are never reported or counted. The status is `hidden` when `noindex` is true, else `suggestions` when at least one suggestion remains, else `ready`. The list items carry `seo_status` and `seo_suggestions` (the count, also for a hidden article).
+
 ## Markdown output
 
 Headings, bold, italic, links, bullet and ordered lists, blockquotes, fenced code blocks, rules, images and inline code are converted. Anything else is reduced to its text. `script` and `style` content is removed, and the source HTML is never passed through; the only HTML in the output is the alignment wrapper described below. List indentation attributes are dropped. Links with a scheme other than http, https, mailto or tel are reduced to their text. Characters that markdown would read as formatting (`*`, `_`, `` ` ``, `[`, `]`, `<`, `\`) and line starts that would read as a heading, list, quote or rule (`#`, `-`, `+`, `>`, `1.`) are backslash-escaped, so plain text stays plain text. A line break becomes a backslash followed by a newline.
@@ -93,5 +211,8 @@ Example for `<h2>Plan</h2><p>Replace the <strong>old</strong> deck.</p>`:
 | --- | --- |
 | `400` | `The server expects the ID to be in the format of an unsigned 32-bit integer (uint32).` for an invalid id |
 | `400` | `The format must be one of: markdown, html, json.` for an unsupported format |
+| `400` | `invalid_slug`, `image_not_found` or the validator text for an over-long SEO field, `cover_image_id: 0` or an unknown `seo_dismissed` code |
 | `404` | `Article not found` |
+| `409` | `slug_taken`, with the header `X-Slug-Suggestion: <first free slug>` (this response only) |
+| `422` | `invalid_url` for a `canonical_url` that is not an absolute `https` URL with a host |
 | `500` | `Internal server error` when the body cannot be converted |

docs/architecture.md

@@ -69,6 +69,28 @@ The use cases `ListActivity`, `GetActivitySummary` and `ExportActivity` turn the
 
 Producers: `ArticleChanges`, `TextChange` and `BodyChange` in `internal/domain/audit` build the change lists (the body change holds only a signed rune count delta), and `NewTarget` and `ReleaseTarget` build the target snapshots (types `article`, `image`, `user`, `invite`, `api_key`, `release`). The use cases create, edit, publish, unpublish and delete article, upload, rename, delete, merge and purge media, register, verify, update profile, create, cancel, renew and accept invite, check, download and restart take the request context first and an `audit.Recorder` last, and record exactly one event after the change or the refusal (the action catalogue is in `docs/api.md`). Events are never written by handlers, middleware or GORM hooks, and nothing is recorded for reads or for a target that does not exist. `useCases/auditFailures.go` holds the fixed table of failure sentences keyed by domain `Err...` sentinels (matched with `errors.Is`, each at most 255 characters; the restart action overrides `ErrJobInProgress`) with the generic fallback "Something went wrong on our side. Please try again."; raw error text is never stored. The manual purge runs the groups through the non-recording `MergeMediaUseCase.merge`, so only one `media.purge` event is written; `RunPurgeUseCase.Execute` is the non-recording run that `PurgeSchedulerUseCase.Tick(now)` uses to record one `system.media_purge` event with the system actor and `context.Background()`. `StartUpdateDownloadUseCase` hands `context.WithoutCancel(ctx)` to its job goroutine so the `system.update_downloaded` event, written when the job becomes `ready` or `failed`, keeps the origin of the request. `middleware.AuditContext` is mounted on the article, user, media and system routers (after the API key middleware where keys are accepted), so API key calls are attributed to the key.
 
+### Sites
+
+`internal/domain/site` holds the `Site` entity (name, immutable key, normalised base URL, optional default social image, `index` or `noindex` robots, optional locale, the default flag and the computed `article_count`), `NormalizeBaseURL`, `SeedBaseURL`, `NormalizeLocale`, `IsValidKey`, the `Patch` type (with `Nullable` for the two nullable fields), the `Err...` sentinels (`ErrSiteNotFound`, `ErrSiteKeyTaken`, `ErrSiteHasArticles`, `ErrDefaultSite`, `ErrKeyImmutable`, `ErrInvalidSiteURL`, `ErrInvalidLocale`, `ErrUseSetDefault`, `ErrInvalidReassign`) and the `Repository` interface. `persistence.SiteRepository` implements it over `models.Site` (`sites`, unique `site_key`); the single default is kept by the transactional operations `Create` (when flagged) and `SetDefault`, not by an index, and `DeleteMovingArticles` moves the articles and deletes the site in one transaction. Articles carry a `site_id` (indexed, no foreign key, so the SQL stays portable).
+
+The use cases `ListSites`, `CreateSite`, `UpdateSite`, `SetDefaultSite` and `DeleteSite` live in `internal/infrastructure/useCases`; the article, media and purge use cases take the site repository as a required constructor argument, wired by the composition root (new articles take the default site, `UpdateArticle` moves an article and records `site` with site names, the media use cases count, clear and repoint default social images). `api/handlers/site` serves `/v1/site`; reads accept a session or an API key, writes are session only behind `RequireOwner`. `database.Migrate(db, publicURL)` registers the model, seeds one default site from `PUBLIC_URL` when the table is empty and backfills `articles.site_id`.
+
+### Authors
+
+`internal/domain/author` holds the `Author` entity (name, unique slug, bio, optional avatar, optional website, social links, the unique optional `user_id`, `is_linked`, the computed `article_count` and a `user_email` that only owner and admin responses carry), the public `Byline` shape embedded in articles, the `Patch` type, the slug generation (a hand-written Latin diacritic folding table, no external dependency), the value rules (`ValidateBio`, `ValidateURL`, `ValidateLinks`, `IsValidSlug`, `IsValidName`), the `Err...` sentinels (`ErrAuthorNotFound`, `ErrSlugTaken`, `ErrAuthorHasArticles`, `ErrUserAlreadyLinked`, `ErrAuthorAlreadyLinked`, `ErrAuthorRights`, `ErrBioTooLong`, `ErrInvalidURL`, `ErrTooManyLinks`, `ErrInvalidSlug`, `ErrInvalidReassign`) and the `Repository` interface. `persistence.AuthorRepository` implements it over `models.Author` (`authors`, unique `slug` and unique nullable `user_id`) and the ordered join `models.ArticleAuthor` (`article_authors`, unique `(article_id, author_id)` and a `position`); uniqueness is checked inside the transaction and re-explained after a failed write, so a race still answers a domain sentinel, and `DeleteMovingCredits` moves the credits (keeping the position, never duplicating) and deletes the author in one transaction. `ArticleRepository` attaches the ordered `Byline`s to the articles it returns, writes `author_ids` in the article update transaction and removes the credits when an article is deleted.
+
+The use cases `ListAuthors`, `CreateAuthor`, `CreateMyAuthor`, `UpdateAuthor`, `DeleteAuthor` and `GetMyAuthor` live in `internal/infrastructure/useCases`; `CreateArticle` credits the creator's author, `UpdateArticle` validates and records `author_ids`, and the media, purge and activity use cases take the author repository as a required constructor argument (avatars count as media usage, are cleared on delete and repointed on merge and purge). `api/handlers/author` serves `/v1/author`: the list accepts a session or an API key, every write is session only, `POST /` and `DELETE` sit behind `RequireOwnerOrAdmin`, and the edit rights (owner or admin, or the caller's own linked author) are decided by `UpdateAuthor` from the caller the handler passes in. `GET /v1/auth/me` adds the linked author through `GetMyAuthor`.
+
+### Article SEO data
+
+`internal/domain/slug` holds the one slug rule (`Generate`, `WithSuffix`, `IsValid`: lowercase, accents folded, runs of other characters become one dash, 100 characters, a caller-chosen fallback). `internal/domain/article` uses it with the fallback `article` and holds the twelve SEO fields of `Article`, the `Update` fields for them (`Nullable` for the two image ids), `ValidateCanonicalURL`, the eleven dismiss codes and `NormalizeDismissed`, and the sentinels `ErrInvalidSlug`, `ErrSlugTaken` and `ErrInvalidCanonicalURL`. `*SlugTakenError` wraps `ErrSlugTaken` and carries the suggested free slug; the handler turns it into the `X-Slug-Suggestion` header of the 409. `author.GenerateSlug` delegates to the same package.
+
+Slugs are unique per site, enforced by the unique index `idx_articles_site_slug` on `(site_id, slug)`. The use cases decide first: `CreateArticle` generates the slug from the title and takes the first free `-N` on the default site (retrying when the repository reports a race), `UpdateArticle` re-checks the slug on the target site for an edited slug, an empty slug (regenerated from the title) and a move, and computes the suggestion as the first free `-N` from 2, fitting 100 characters. `ArticleRepository` locks the site row, checks the slug inside the transaction and re-explains a failed write as `ErrSlugTaken`. Deleting an article replaces its slug with the tombstone `#deleted-<id>` (it can never match a valid slug) before the soft delete, so the slug is free again while the unique index keeps covering soft-deleted rows.
+
+`database.Migrate` adds the columns with `AutoMigrate`, then runs `BackfillSiteTitleTemplates` and `BackfillArticleSlugs` (only rows with an empty slug, in id order, per site, applying the same rule and the same suffixes, with the tombstone for soft-deleted rows) and only then creates the unique index, so it is idempotent and completes a partly backfilled table. The default `title_template` is written by the backfill and the seed, not by a column default, because the SQLite migrator rebuilds the table on every start when the default contains `%` and `|`.
+
+Media usage has more sources than article bodies: `Article.CoverImageID` and `SocialImageID`, `Author.AvatarID` and `Site.DefaultSocialImageID`. `ListMedia`, the purge plan and `GetMediaUsage` count an article once however many places use the image. `DeleteMedia` clears the cover and social references (`article.Repository.ClearImage`, restored with `RestoreImage` when the delete fails), `MergeMedia` repoints them (`RepointImage`) and counts an article rewritten in its body and its cover once, and `GetMediaUsage` (now built with the site and author repositories) returns articles, authors and sites with `type` and `fields`.
+
 ### Image variants
 
 `internal/domain/image` holds the `Variant` entity and its rules (`VariantSettings.Normalized`, the settings `Fingerprint`, `VariantETag`, `ETagMatches`, `IsAnimatedGIF`), the sentinels (`ErrVariantNotFound`, `ErrVariantExists`, `ErrVariantInvalid`, `ErrVariantFormatUnavailable`, `ErrUnknownVariant`, `ErrUnsupportedParameter`, `ErrSourceTooLarge`) and three ports: `VariantRepository` (definitions), `VariantFileRepository` (the index of generated files: variant name, source stored name, cached stored name, content type, size and the settings fingerprint, needed because `Storage.Put` chooses the stored name itself) and `VariantRenderer` (decode a source, encode a variant, report the formats it can encode). `internal/infrastructure/imaging` is the renderer adapter, free of GORM and HTTP; the persistence adapters are `VariantRepository` and `VariantFileRepository` over `models.ImageVariant` and `models.ImageVariantFile`.

docs/configuration.md

@@ -10,7 +10,7 @@ Copy [`.env.example`](../.env.example) to `.env` to get started. When a required
 
 | Name            | Description                                                                                                         | Example                    |
 |-----------------|---------------------------------------------------------------------------------------------------------------------|----------------------------|
-| `PUBLIC_URL`    | Public base URL of the site, including scheme and no trailing slash. Used for links in emails and in the startup log. | `https://cms.example.com`  |
+| `PUBLIC_URL`    | Public base URL of the site, including scheme and no trailing slash. Used for links in emails and in the startup log. It is also the CMS's own address: at the first migration, when the sites table is empty, it seeds the default site (name "Default", key "default") with its scheme and host (path dropped, non-loopback `http` upgraded to `https`); an unparseable value stops the migration. It is never read for sites afterwards. | `https://cms.example.com`  |
 | `JWT_SECRET`    | Secret used to sign the auth JWT. Use a long random value; changing it logs everyone out.                            | `openssl rand -hex 32`     |
 | `SMTP_LOGIN`    | SMTP username used to authenticate with the server. Some providers (e.g. Brevo) issue a login distinct from the sender address. | `noreply@example.com` |
 | `SMTP_SENDER`   | Sender address used in the `From` header. Must be an address/domain the SMTP provider allows that login to send as.  | `noreply@example.com`      |

docs/design/README.md

@@ -3,13 +3,25 @@
 Nuxt UI v4 back-office. Tokens only, no raw hex (brand mark excepted). Light and dark. 1440×900 and 390×844. Radius 0.
 
 ## Boards
-- `RenewCMS Screens Back-office.dc.html`: every back-office screen, Settings → Media (variants, cache), and the group "States matrix: controls". Frames: `AppFrame` (shell), `ActivityFrame`, `MediaFrame`, `VariantsFrame`, `IntegrationPage`, `IntegrationImages`, `CodeSnippet`, `StatesMatrix`.
+- `RenewCMS Screens Back-office.dc.html`: every back-office screen, Settings → Media (variants, cache), and the group "States matrix: controls". Frames: `AppFrame` (shell), `DirectoryFrame` (Sites and Authors), `ActivityFrame`, `MediaFrame`, `VariantsFrame`, `IntegrationPage`, `IntegrationImages`, `CodeSnippet`, `StatesMatrix`.
 - `RenewCMS Screens Auth.dc.html` (7 groups, 50 states), `RenewCMS Screens API keys.dc.html` (12 states).
 - `RenewCMS Prototype.dc.html`: updated to match (title-only New article, no body limit or counter, neutral count, pagination, link button, AppFrame's mobile drawer).
 - Unchanged: Foundations, Components, Handoff, Directions and Emails boards.
 
+## Pass 3: sites and authors (revised)
+Roles, decisions and the slice order are in `sites-authors-slices.md` (Sites and Authors) and `seo-slices.md` (SEO).
+
+Back-office board groups: Sites, Sites: form, Sites: delete, Authors, Authors: form, Authors: delete, Editor: site and authors, Profile: author profile, Articles: sites and authors. Plus tables: decisions to confirm (13 rows, 5 marked Decided), deviations, API and errors (with the 403 rows), components, accessibility, copy per state.
+- Roles: only creating, editing, deleting and setting the default site are owner only (no sidebar entry or Publishing card for others, 403 page on a direct link). Anyone who can edit an article can set its site and read the site list. Authors: owner and admin manage; other roles read-only, and any role can create and edit their own author (user link locked, no delete).
+- The site key is immutable: read-only with a lock in the edit form; the warning state and dialog are gone.
+- The "Author profile" card is drawn in every existing Profile frame. The "Site and authors" section shows collapsed in every existing Editor frame that has the details sidebar (39 already did; the Loading frame now shows the header with a skeleton summary). The Not found frame has no editor, and on mobile the section is inside the Details sheet. The dedicated groups keep only the feature-specific states.
+- Shared pieces (list, slide-over, delete-with-reassign dialog, slug field, media field) are defined once in `DirectoryFrame`, used by Sites and Authors. The Profile card is defined once in `AppFrame`.
+- States trimmed from 87 to 68 (Sites 9, Sites: form 7, Sites: delete 3, Authors 8, Authors: form 11, Authors: delete 6, Editor: site and authors 16, Profile: author profile 5, Articles: sites and authors 3). Dropped: in-progress and done variants (covered by the button loading pattern and the confirm state's trigger), per-error URL variants, the site picker (same picker as the avatar), manual slug override, long names (merged into Many authors), per-field duplicates. The blocked-delete dialog is one frame, "Server fallback (409)".
+- Only individual states that render a relative time or a countdown carry the "Clock-sensitive" tag (13 states, listed in states.md). No Home or Articles frame is tagged as a whole.
+- Role-restricted variants drawn: read-only Authors list and detail, hidden Sites entry, Sites 403, own-author edit.
+
 ## Specs
-routes.md · components.md · states.md · foundations.md · change-list.md · activity-spec.js · screens/*.md (22 files)
+routes.md · components.md · states.md · foundations.md · change-list.md · activity-spec.js · screens/*.md (24 files)
 
 ## Status
 | Section | Status |
@@ -27,10 +39,10 @@ routes.md · components.md · states.md · foundations.md · change-list.md · a
 | B6 Contrast and states matrix | Done for the pairs listed; matrix drawn |
 | B7 Consistency sweep | Done for the roles listed |
 | B8 Copy glossary | Done by search; not every line re-read |
-| B9 Media and picker | Badge added; filter, sort and size not folded in |
+| B9 Media and picker | Badge added; Media pagination drawn (9 states); filter, sort and size not folded in |
 | B10 "proposed" labels | Only article pagination and JSON export |
 
-## State counts (Back-office board: 341)
+## State counts (Back-office board: 341 before pass 3, plus 68 for sites and authors = 409)
 | Group | States |
 |---|---|
 | Boot | 1 |
@@ -39,7 +51,7 @@ routes.md · components.md · states.md · foundations.md · change-list.md · a
 | Articles: pagination | 11 |
 | New article | 5 |
 | Editor | 41 |
-| Media | 43 |
+| Media | 52 |
 | Media picker | 13 |
 | Integration | 8 |
 | Activity | 9 |
@@ -65,7 +77,7 @@ routes.md · components.md · states.md · foundations.md · change-list.md · a
 | Cache panel | 10 |
 | Editor picker | 5 |
 
-Back-office total 341. Auth board 50 (Log in 9, Register 6, Pending 6, Verify 6, Accept invite 10, Forgot password 6, Reset password 7). API keys board 12. Total 403 states; every one has a desktop and a mobile frame, and the theme switch gives light and dark. The matrix has 24 control rows, 5 states on desktop and 4 on mobile (no hover). screens/*.md list exactly these 403.
+Back-office total 341 (pass 2 groups, table above) + 68 (sites and authors) = 409. Auth board 50 (Log in 9, Register 6, Pending 6, Verify 6, Accept invite 10, Forgot password 6, Reset password 7). API keys board 12. Total 471 states; every one has a desktop and a mobile frame, and the theme switch gives light and dark. The matrix has 24 control rows, 5 states on desktop and 4 on mobile (no hover). screens/*.md list the states of the pass 2 groups and the 68 pass 3 states.
 
 ## Fixes applied (pass 2)
 1. Activity export dialog: removed the 42% progress bar, the "large export" state, the server-job copy and the "ready later" toast; added "Preparing download…" (indeterminate), "Download started", failed, nothing to export, 403; CSV only, with one proposed JSON state.
@@ -89,7 +101,7 @@ Back-office total 341. Auth board 50 (Log in 9, Register 6, Pending 6, Verify 6,
 ## Defaults chosen
 - Slide-over rule: only forms with a live preview and record details; on mobile always a 92% bottom sheet.
 - Hover, active, disabled and focus tokens for the matrix (components not specified before): primary hover `--ui-text`, active `--ui-text-toned`; destructive hover opacity 0.85 and active 0.75; disabled 40% (rows 55%).
-- Article pagination stays "proposed" until the backend returns page, size and total.
+- Article pagination: API shape (array body, total in `X-Total-Count`) is a design assumption to confirm with the specifier.
 - The Remove action in the link popover has no confirmation; undo restores the link.
 - The link button is disabled when an image is selected.
 - The tooltip text is "Insert link (Ctrl+K)" and "Insert link (⌘K)" on macOS.

docs/design/change-list.md

@@ -1,4 +1,64 @@
-# Change list for implementation (status after pass 2)
+# Change list for implementation (status after pass 2; SEO round drawn; cleanup round drawn)
+
+## Cleanup round
+
+1. Editor: site and authors, "Create author" states (4 states, desktop and mobile): the mobile dialog sat under the Details sheet (z-index 50 against 55) and was hidden. It now stacks above the sheet (z-index 60), as the SEO panel does. Full-width bottom sheet with grabber, same fields, Cancel left and "Create author" right (Cancel below on mobile, as the other mobile dialogs). Frame: `DirectoryFrame.dc.html`. The four states share the fix: dialog, "for me", slug taken, failed.
+2. Integration, "6. Errors": the 403 row gets the muted note "Site SEO defaults are owner only. Article SEO fields need only the right to edit the article." The row below shifts down by the wrapped note height (two 18 px lines desktop, three mobile, plus the 2 px row gap). The old inline parenthetical with the same sentence in the 403 cause text was removed, so it isn't said twice. Frame: `IntegrationPage.dc.html`.
+3. Integration, sitemap errors: 404 now shows the body `site_not_found` in code style (was "Site not found"); 400 now shows the generic body-mismatch text used by the other routes (was "Invalid page or size.").
+4. New groups on the Back-office board: "Sites: pagination" and "Authors: pagination", 10 states each (20 states, every one desktop and mobile; light and dark by the theme switch). Back-office total 409 → 429. Same pager as Articles and Media, sizes 5, 25, 50, 100, default 25 (no difference to report). One deviation: on a single page the page-size select is hidden and only "N sites" or "N authors" remains.
+5. Specs: screens/sites.md, screens/authors.md (pager states, URL rules, out-of-range fallback), screens/integration.md, states.md (pagination states, three HTTP rows), components.md (single-page variant, no new component), routes.md (Sites pagination in the URL).
+
+**Backend assumptions to confirm.** GET /v1/site/ takes `q`, `page`, `size` and returns `X-Total-Count` (it returns every site today). GET /v1/author/ gets `page`, `size` and `X-Total-Count` (it has `q`).
+
+**Open points.**
+- Sites has no search field. The two states that need one (empty after search, search resets to page 1) draw the Authors field on Sites with "Search by name or key". Drop those states if you don't want search on Sites.
+- Stale copy found, not changed: GET /v1/article/ on Integration still shows the 400 caption "Invalid page or size." while every other route, and now the sitemap, uses the body-mismatch text. The 404 row of the Errors table still lists only the four resource messages and doesn't mention `site_not_found`. The existing Sites and Authors "Default" frames don't draw the count line. README.md state counts and the "Pagination" notes were not updated (outside this round).
+
+## SEO round: decisions (frames drawn)
+
+**Placement.** A "Search and sharing" section sits under "Site and authors" in the Editor sidebar and in the mobile Details sheet. It is collapsed by default, shows a one-line summary ("Ready", "2 suggestions" or "Hidden from search") and is remembered per browser like Site and authors. It holds only the slug, the full URL and three actions: "Edit search and sharing", "What the frontend gets" and the suggestion list. The fields and live previews open in a slide-over (desktop) or a 92% bottom sheet stacked over the Details sheet (mobile), because the 280 px sidebar is too narrow for previews and the slide-over rule already covers forms with a live preview. The API preview is a 720 px dialog (desktop) or a bottom sheet (mobile).
+
+**Principles.** RenewCMS does not render pages or inject meta tags. Every field is optional and the UI shows its fallback. No scores. Suggestions never block saving or publishing; publishing is allowed regardless. Suggestions are dismissible per article.
+
+**Fallback chain (resolved server-side, shown in the UI).**
+| Output | Order |
+|---|---|
+| title | seo_title, then article title; site title_template applied last |
+| description | seo_description, then excerpt, then first sentence of the body, then site default_description |
+| image | og_image_id, then cover_image_id, then site social image |
+| canonical | canonical_url, then site base_url + "/" + slug |
+| robots | noindex true gives "noindex, nofollow"; otherwise site default_robots |
+| og/twitter title and description | social_title, social_description, then the resolved values above |
+
+**Soft ranges (counters, never blocks).** Meta title 30–60 characters; description 70–160; slug "very long" above 75 characters. Counter turns neutral-warning (`--ui-warning`) outside the range, never red.
+
+**New article fields (PATCH /v1/article/{id}, all optional, snake_case).** `slug`, `excerpt` (max 300), `seo_title` (max 120), `seo_description` (max 320), `cover_image_id`, `cover_image_alt` (max 200; the cover is "ready" only with alt text), `social_title`, `social_description`, `social_image_id`, `canonical_url` (absolute https URL), `noindex` (boolean; only sets a flag in the API, it doesn't change visibility), `seo_dismissed` (string[] of suggestion codes). Slug: lowercase letters, numbers, hyphens; unique per site; 409 `slug_taken` with `suggestion` ("<slug>-2"); auto-generated from the title until edited.
+
+**New site fields (PATCH /v1/site/{id}, owner only).** `site_name`, `title_template` (default "%title% | %site%", must contain %title%), `default_description` (max 320), `social_image_id` (existing), `default_robots` ("index" | "noindex"; existing as robots).
+
+**New endpoints.**
+- `GET /v1/article/{id}/seo`: resolved object, public for online articles, 404 for drafts to anonymous callers. Shape: `{ title, description, canonical_url, robots, og: { type, title, description, image, image_alt, url, site_name, locale }, twitter: { card, title, description, image, image_alt }, image: { url, alt, source }, authors: [{ name, url, same_as: [] }], published_at, modified_at, fallbacks: { title, description, image, canonical }, json_ld }`. `json_ld` is a ready Article object (headline, description, image, author[] with name, url and sameAs from author profile URL and social links, datePublished, dateModified, mainEntityOfPage).
+- `GET /v1/site/{key}/sitemap?page=&size=`: published URLs only, total in `X-Total-Count`. Items: `{ url, modified_at, noindex }`. Decision: yes, shown on Integration under "Search and sharing" with a copy button; noindex articles are included with the flag so the frontend can skip them.
+- `GET /v1/article/?seo=ready|suggestions|hidden`: filter behind "Needs attention" (suggestions) with `seo_status` and `seo_suggestions` (count) added to list items.
+
+**Articles list.** Quiet indicator inside the Status cell (and under the title on mobile cards): nothing when ready, a lightbulb chip "N" for suggestions, an eye-off chip "Hidden" for noindex. Toolbar gets a "Needs attention" toggle next to search; tabs and counts are unchanged. It behaves the same on a single-site install (independent of the Site filter, which stays hidden).
+
+**Authors.** No change to the Authors screen. Profile URL (website) and social links feed `authors[].url` and `same_as`, and JSON-LD `author[].sameAs`; the API preview shows them.
+
+**Permissions.** Anyone who can edit an article edits its SEO fields. Only the owner edits site SEO defaults. 401 and 403 rows join the existing HTTP table: 403 `owner_only` on Site SEO fields, 401 on a missing session.
+
+**Left out on purpose.** Keyword scoring and focus keywords, readability scores, redirects management, schema types beyond Article, hreflang, robots.txt and sitemap rendering (RenewCMS only provides data), automatic image generation for social cards.
+
+**Open questions.**
+1. Is `slug` immutable after first publish, or can it change (and break URLs with no redirects)?
+2. Does the API return the SEO object for drafts to authenticated callers (for frontend previews)?
+3. Should noindex articles be excluded from the sitemap endpoint instead of flagged?
+4. Is title_template applied by the API (resolved title) or only returned for the frontend to apply?
+5. Backfill: generate slugs for existing articles from their titles at migration, with `-2` suffixes on conflicts?
+6. Should excerpt be exposed in the list payload as the article teaser?
+
+**Status.** Frames drawn on the Back-office board (groups: Articles: search status, Editor: search and sharing, Editor: what the frontend gets, Sites: SEO defaults), Integration page group added, specs updated. Placement rationale: the sidebar holds only the summary, address and suggestions because it is 280 px wide; previews and fields need a slide-over.
+
 
 Ordered by implementation dependency: tokens and shell first, then shared components, then screens. "Frontend only" means no backend work is needed.
 
@@ -16,7 +76,8 @@ Ordered by implementation dependency: tokens and shell first, then shared compon
 | 10 | New article | Title only. Body removed from the modal; the editor opens straight away | Yes | Maybe: confirm `POST /v1/article/` accepts an empty `body` (it is "required" today); otherwise the frontend sends an empty string | NewArticleModal | Yes if empty body is accepted |
 | 11 | Editor | Remove the 10,000 character limit, counter, limit and over-limit states; neutral count | Yes | Yes: remove the body length validation on `POST /v1/article/` and `PATCH /v1/article/{id}` | EditorStatusBar | No |
 | 12 | Editor | Insert-link button (default, hover, active, disabled), tooltip, LinkModal, link popover and touch sheet, rendered link, toolbar scrolling at 390 px | Yes | No (editor only) | LinkModal, LinkPopover, ToolbarButton | Yes |
-| 13 | Articles | Pagination with `page` and `size` (5, 25, 50, 100; default 25), URL state, loading, error, out of range | Yes | **Yes (proposed):** `GET /v1/article/` returns everything today. It needs `page`, `size` and `total` in the response | Paginator, PageSizeSelect | No |
+| 13 | Articles | Pagination with `page` and `size` (5, 25, 50, 100; default 25), URL state, loading, error, out of range | Yes | **Yes:** `page`, `size` on `GET /v1/article/` (same convention and 400 as Activity); total in `X-Total-Count`, array body unchanged; Integration reference updated | Paginator, PageSizeSelect | No |
+| 13b | Media | Pagination under the grid and list, same Paginator and PageSizeSelect as Articles; `page` and `size` in the URL; saved size preference | Yes (9 states in the Media group) | **Yes:** `page`, `size` on `GET /v1/media/` (replaces `cursor` and `limit`); total in `X-Total-Count`, array body unchanged; Integration reference | None (reuses Paginator, PageSizeSelect) | No |
 | 14 | Activity | Failed-action and security cards as toggles, synced chip and segment | Yes | No | FilterCardToggle | Yes |
 | 15 | Activity | Export menu and dialog, CSV: current view (active filters) and all activity (no filters, optional `from`/`to`). Preparing, started, failed, nothing to export, 403 | Yes | No: `GET /v1/activity/export` is implemented (CSV, synchronous, owner and admin, same filters as the list) | ExportMenu, ExportDialog | Yes |
 | 16 | Activity | JSON export (format control CSV or JSON) | Yes, one state, labelled proposed | **Yes (proposed):** `format=json` on `GET /v1/activity/export` | Segmented format control | No |
@@ -24,3 +85,9 @@ Ordered by implementation dependency: tokens and shell first, then shared compon
 | 18 | All | States matrix for controls (hover, focus-visible, active, disabled) | Yes (board "States matrix: controls") | No | None | Yes |
 | 19 | All | Contrast fixes: paginator current page border, no muted text on sand | Yes | No | None | Yes |
 | 20 | All | Spacing, type and icon sizes made consistent (foundations.md, "One value per role") | Yes in the frames listed there | No | None | Yes |
+| 21 | Settings, sidebar | Sites screen under Settings → Sites ("Publishing" group); "Publishing" card on Settings. Owner only: hidden for other roles, 403 page on a direct link. Key immutable after creation | Yes | **Yes:** `site` table, GET/POST/PATCH/DELETE /v1/site/ (writes owner only; PATCH rejects a changed key), `reassign_to`, seed from PUBLIC_URL | SitesTable, SiteForm, SlugField (locked variant), ReassignDialog | No |
+| 22 | Sidebar | Authors entry between Media and Users, all roles. Owner and admin manage; other roles read-only list and detail | Yes | **Yes:** `author` table, GET /v1/author/ (any role), POST/PATCH/DELETE (owner and admin; a user may PATCH their own linked author), POST /v1/author/me (any role) | AuthorsTable, AuthorForm, SocialLinksRepeater, MediaField | No |
+| 23 | Editor | "Site and authors" section in every Editor frame (collapsed by default): Site select (any role that can edit the article), reorderable authors, inline create (owner and admin), hint | Yes | **Yes:** `site_id`, `author_ids[]` on PATCH /v1/article/{id} | MetaSection, AuthorList, AuthorSelect, SiteSelect, CreateAuthorHint | No |
+| 24 | Articles | Authors column; Site column and filter when more than one site | Yes | **Yes:** `site` filter, `site` and `authors` in the list payload | AuthorStack | No |
+| 25 | Profile | "Author profile" card in every Profile frame, one-click create, edit own author (user link locked) | Yes | **Yes:** POST /v1/author/me | AuthorProfileCard | No |
+| 26 | Backfill | Existing articles get the default site; authors start empty | n/a | **Yes:** migration | None | No |

docs/design/components.md

@@ -33,7 +33,9 @@ One component for every code or copyable value. Props: `tabs` (`{ k, label, code
 - **Toolbar at 390 px**: the full toolbar (22 buttons) does not fit. It scrolls sideways in one row, never wraps; a 24 px fade (`--ui-bg` to transparent) marks hidden content on each side. Buttons stay 40 px.
 
 ## Paginator
-First, previous, page numbers, next, last; "Showing 26–50 of 312"; page-size select "5 per page", "25 per page", "50 per page", "100 per page" (default 25). Mobile: previous, "Page 2 of 13", next. Hidden when there is one page. Buttons 32 px (44 px mobile), current page `--rc-sand` with `--ui-primary` border, disabled controls 40% opacity, focus ring 2 px `--ui-primary`. Page size and page live in the URL as `size` and `page`.
+First, previous, page numbers, next, last; "Showing 26–50 of 312"; page-size select "5 per page", "25 per page", "50 per page", "100 per page" (default 25). Mobile: previous, "Page 2 of 13", next. Hidden when there is one page. Desktop layout, one row: the summary on the left (it takes the free space), the page-size select next to it, the page controls right-aligned; Sites, Authors, Articles and Media draw it the same way. Buttons 32 px (44 px mobile), current page `--rc-sand` with `--ui-primary` border, disabled controls 40% opacity, focus ring 2 px `--ui-primary`. Page size and page live in the URL as `size` and `page`.
+
+Variant for Sites and Authors (no new component): when everything fits on one page the page-size select is hidden together with the controls and the footer shows only the count line "N sites" or "N authors" in `--ui-text-muted`. Loading dims the whole pager to 40% and disables it; the summary reads "Loading page N…". Sizes are unchanged: 5, 25, 50, 100.
 
 ## Activity export
 Menu: "Export current view" (CSV, active filters, all pages) and "Export all activity…" (CSV, ignores filters; owner and admin only). Dialog: Format (read-only "CSV"; a CSV and JSON control appears when JSON ships, proposed), Date range (default "All time"). States: configure, "Preparing download…" (indeterminate bar, no percentage, Cancel left, "Preparing…" disabled right), "Download started" (Close), "Couldn't prepare the download" (Cancel, Retry), "Nothing to export" (Close), 403 "You can't export all activity" (Close). Synchronous: no job, no progress, no later notification.
@@ -52,3 +54,38 @@ Row 32 px (44 px in the mobile drawer). Parent selected: `--rc-sand`, `--rc-on-s
 - **MediaCleanupCard**: square `USwitch`, `UInputNumber` with "days" suffix, saves on change.
 - **MediaLinksCard**: rows "Manage image variants" and "Cache usage", 44 px min height.
 - **StatesMatrix**: the board "States matrix: controls".
+
+## Sites and authors (pass 3)
+
+Frames: `DirectoryFrame.dc.html` (Sites, Authors, editor section content; the list, slide-over, delete-with-reassign dialog, slug field and media field are defined once there and used by both Sites and Authors); `AppFrame.dc.html` changed in place (sidebar items, Articles columns and filter, editor section and mobile details sheet, Settings card, Profile card, role-based sidebar). Existing components are reused unchanged: dialogs, toasts, empty states, skeletons, paginator, media picker.
+
+| Component | Status | Nuxt UI | Notes |
+|---|---|---|---|
+| SitesTable, AuthorsTable | New | UTable; below 640 px a list of UCard | Same row heights as Users. Defined once as DirectoryList in DirectoryFrame and used by both. Read-only variant has no actions, chevron instead of the menu |
+| SiteForm, AuthorForm | New | USlideover + UForm, UFormField, UInput, UTextarea, URadioGroup, USwitch | Sheet on mobile. Close with changes opens the discard UModal |
+| SlugField | New | UInput + UButton (icon) + UBadge | Defined once in DirectoryFrame. Auto badge, pencil, "Reset to match the name". Locked read-only variant (lock icon, "Used in API paths, so it can't change.") for the site key after creation |
+| SocialLinksRepeater | New | USelect + UInput + UButton, in UFormField | Max 5 rows. Placeholder follows the type |
+| MediaField | New | UButton + UModal (existing picker) | Defined once in DirectoryFrame. Used for the social image and the avatar |
+| AuthorViewPanel | New | USlideover, read-only | Detail for roles without author rights. Close is the only action |
+| AuthorAvatar | New | UAvatar | Initials fallback, square, radius 0 |
+| AuthorStack | New | UAvatarGroup max=3 | Shows "+N" |
+| AuthorList | New | List of UButton, UAvatar, UBadge; sorting with useSortable | No Nuxt UI match for sortable rows. Keyboard reordering is custom |
+| AuthorSelect | New | USelectMenu multiple with create-item | Footer item "Create author…" opens the dialog |
+| SiteSelect | New | USelectMenu | Item slot shows name and host |
+| UserSelect | New | USelectMenu | Only users without an author |
+| ReassignDialog | New | UModal + USelectMenu + UAlert | Defined once in DirectoryFrame. Used for site and author deletion |
+| MetaSection | New | UCollapsible | Desktop sidebar and mobile sheet. Site select for anyone who can edit the article. No "Create author…" row without author rights |
+| AuthorProfileCard | New | UCard + UButton + UAlert | Profile screen. Defined once in AppFrame; every Profile frame shows it |
+| CreateAuthorHint | New | UAlert closable | Dismissal stored per user |
+| Default badge, Linked badge, Guest badge | New | UBadge | Sand fill, info soft fill, outline |
+| Row menu with a disabled item | Existing + change | UDropdownMenu + UTooltip | The item stays focusable |
+| SearchSharingSection | New | UCollapsible + UButton + USeparator | Editor sidebar and Details sheet, after Site and authors. Summary: Ready, N suggestions, Hidden from search, Checking… |
+| SeoPanel | New | USlideover (desktop 960 px) / bottom sheet (mobile) + UFormField, UInput, UTextarea, USwitch, UCollapsible | Defined once in DirectoryFrame. Reuses SlugField, MediaField and the picker. Fallback chip: dashed outline, "Using …" |
+| SoftCounter | New | text | Mono, "n / max". Amber (--ui-warning) outside the recommended range, never red, never blocks |
+| SearchPreview | New | UCard | Desktop and Mobile toggle (UTabs, 2 items). Title cut at 60 (desktop) or 70 (mobile) characters including the template, description at 160 or 120 |
+| SocialCardPreview | New | UCard | 1.91:1 image, host, title, 2-line description; fallback chips |
+| SuggestionList | New | UAlert-style rows + UButton (link, ghost icon) | Calm elevated block. States: list, all good, checking. Per-article dismiss; "Show dismissed" |
+| ApiPreviewDialog | New | UModal / bottom sheet + UTabs + UButton + UAlert | Formatted and Raw; Copy JSON; loading, error, draft note |
+| SeoStatusChip | New | UBadge | Lightbulb + count (warning soft) or eye-off "Hidden" (outline). Articles rows and cards |
+| NeedsAttentionToggle | New | UButton (pressed state) | Articles toolbar, sand when on |
+| TitleTemplateField | New | UInput + live example | Sites form |

docs/design/routes.md

@@ -5,16 +5,27 @@
 | /settings | Settings (Version, Media card, Media cleanup, Retention) | none | GET/PATCH /v1/media/purge-settings, GET/PATCH /v1/settings |
 | /settings/media/variants | Image variants (admin) | none | GET/PATCH/DELETE /v1/image-variants, POST /v1/image-variants/{name}/purge |
 | /settings/media/cache | Cache (admin) | none | GET /v1/image-variants/cache, POST /v1/image-variants/cache/purge {scope: all|unused|variant|image} |
-| /media | Media library | filter, sort | GET /v1/media?variants=with|without&sort=total_size |
+| /media | Media library | page, size, q, filter, sort, view | GET /v1/media/?page=&size=&q=&filter=&variants=&sort= (page, size; total in the `X-Total-Count` header) |
 | /media (detail) | Variants tab | none | GET /v1/media/{id}/variants, POST and DELETE /v1/media/{id}/variants/{name} |
-| /articles | Articles list | page, size, tab, q | GET /v1/article/?page=&size=&q=&status= (proposed: needs backend page, size and total in the response) |
+| /articles | Articles list | page, size, tab, q | GET /v1/article/?page=&size=&q=&status= (page, size; total in the `X-Total-Count` header; array body unchanged) |
 | /activity | Activity | q, actor, category, outcome, security, range, from, to, page, size | GET /v1/activity (page, size), GET /v1/activity/export (shipped, CSV) |
 | /integration | Integration | none | none |
+| /settings/sites | Sites (owner only; other roles get a 403 page and no sidebar entry): list, add and edit slide-over, delete with reassignment. The key is read-only after creation | none | GET/POST /v1/site/, PATCH/DELETE /v1/site/{id} (DELETE takes `reassign_to`) |
+| /authors | Authors, all roles. Owner and admin: list, search, add and edit slide-over, delete with reassignment. Other roles: read-only list and detail | q, page, size | GET/POST /v1/author/, PATCH/DELETE /v1/author/{id}, POST /v1/author/me |
+| /articles | Articles list gains Authors column; Site column and filter when more than one site | site | GET /v1/article/?site={key} |
+| /article/:id/edit | Editor gains the "Site and authors" section (Site select and authors, any role that can edit the article) | none | PATCH /v1/article/{id} {site_id, author_ids[]} |
+| /profile | Profile gains the "Author profile" card, all roles | none | POST /v1/author/me |
 | /integration/api-keys | API keys | none | GET/POST /v1/api-key, DELETE /v1/api-key/{id} |
 
-## Pagination in the URL (Articles)
-`/articles?page=2&size=50`. Parameter names follow the repo (activity already uses `page` and `size`). Allowed sizes 5, 25, 50, 100. Defaults `page=1`, `size=25`, omitted from the URL when default. Changing search, tab, filter or size resets `page` to 1. `page` above the last page redirects (replace) to the last page and shows "That page doesn't exist. Showing the last page." An invalid `size` falls back to 25.
-**Proposed, needs backend:** `GET /v1/article/` currently returns every article. It must accept `page` and `size` and return `total` (and the page) in the response.
+## Pagination in the URL (Articles, Media)
+`/articles?page=2&size=50` and `/media?page=7&size=50`. Parameter names follow the repo (activity already uses `page` and `size`). Allowed sizes 5, 25, 50, 100. Defaults `page=1`, `size=25`, omitted from the URL when default. Changing search, tab, filter or size resets `page` to 1. `page` above the last page redirects (replace) to the last page and shows "That page doesn't exist. Showing the last page." An invalid `size` falls back to 25.
+**API:** `GET /v1/article/` accepts `page` (default 1) and `size` (5, 25, 50, 100; default 25), as `GET /v1/activity` does. The body stays a JSON array so existing consumers keep working; the total comes back in `X-Total-Count` (the response shape is to be confirmed with the specifier). Anonymous callers only see online articles, and the total counts only those. Invalid `page` or `size` answers 400, the same as Activity.
+
+**Media API:** `GET /v1/media/` takes the same `page` and `size`, with the same 400 and the total in `X-Total-Count`; the array body stays. The earlier `cursor` and `limit` parameters are replaced by them.
+
+**Page size memory:** the size chosen on Articles, Activity or Media is remembered for the user and used when the URL has no `size`; an explicit `size` in the URL wins.
+
+**SPA:** never shows that 400. A `size` outside 5, 25, 50, 100 or a `page` that is not a positive integer is replaced in the URL by the default (`history.replace`), silently. A `page` past the last page is replaced by the last page and the notice "That page doesn't exist. Showing the last page." appears.
 
 ## Activity pagination
 `page` and `size`, allowed sizes 5, 25, 50, 100, default 25 (as implemented).
@@ -24,3 +35,11 @@
 
 ## Public image request
 `/media/photo.png?v=<variant-name>`. Unknown or disabled variant: 400 `{ "status": 400, "error": "unknown_variant", "message": "Unknown variant", "detail": "<name>" }`. Any other query parameter: 400 `{ "status": 400, "error": "unsupported_parameter", "message": "Unsupported parameter", "detail": "<parameter>" }`. Missing source image: 404.
+
+## Sites and authors in the URL
+`/articles?site=journal` filters by site key; it combines with `page`, `size`, `tab` and `q`, and resets `page` to 1 when it changes. An unknown key is dropped from the URL with no error. `/authors?q=camille&page=2&size=25` follows the same pagination rules as Articles. Deep links: `/authors?edit={slug}` and `/settings/sites?edit={key}` open the slide-over for owner and admin (authors) and the owner (sites); an unknown value shows the info toast "That author no longer exists" or "That site no longer exists". For other roles `/authors?edit={slug}` opens the read-only detail, and `/settings/sites` and its `?edit=` link show the 403 page "You don't have access to Sites".
+
+Sites pagination: `/settings/sites?q=&page=&size=` with the same rules as Articles (sizes 5, 25, 50, 100; default 25; defaults omitted; search and size changes reset to page 1; a page past the end falls back to the last page). API: GET /v1/site/?q=&page=&size=, total in `X-Total-Count` (design assumption). Authors: `/authors?q=&page=&size=` as above.
+
+## SEO
+No new page routes. The panel and dialog are overlays on `/article/:id/edit`: `?panel=seo` (optionally `&field=seo_title|seo_description|slug|cover|authors|body` for the suggestion jump) and `?dialog=seo-api`. `/articles?seo=suggestions` is the Needs attention filter. API: GET /v1/article/{id}/seo, GET /v1/site/{key}/sitemap?page=&size=, PATCH /v1/article/{id} (new fields), PATCH /v1/site/{id} {site_name, title_template, default_description, social_image_id, default_robots}, GET /v1/article/?seo=ready|suggestions|hidden. 401 without a session; 403 owner_only on site SEO fields; 409 slug_taken {suggestion} on PATCH slug; 400 on invalid canonical_url or title_template.

docs/design/screens/articles.md

@@ -1,6 +1,6 @@
 # Articles
 
-Route: `/article`, `/articles?page=2&size=50`. API: GET /v1/article/ · PATCH …/publish · PATCH …/unpublish · DELETE /v1/article/{id} · GET /v1/article/?page=&size=&q=&status= (proposed: needs backend page, size, total in the response).
+Route: `/article`, `/articles?page=2&size=50`. API: GET /v1/article/ · PATCH …/publish · PATCH …/unpublish · DELETE /v1/article/{id} · GET /v1/article/?page=&size=&q=&status= (page, size; total in the X-Total-Count header; invalid values are normalised in the URL, never shown as an error).
 
 Rows update when the server responds, not optimistically. Search, tab and sort are stored in the query string.
 
@@ -42,7 +42,7 @@ Rows update when the server responds, not optimistically. Search, tab and sort a
 | 5 | No results | Search matched nothing. The tab counts still show the full list. | "No articles match "tiles"" / "Check the spelling, or search for a shorter part of the title." / "Clear search" |
 | 6 | No drafts | Drafts tab with nothing in it. The "Online" tab has an equivalent "Nothing is online yet" state. | "Everything you've written is online." / "New article" |
 | 7 | Action in progress | Publish chosen from the row menu. That row is disabled. | "Publishing…" |
-| 8 | Published | 200: the row updates in place and a toast confirms. | "Just now" / "Article published" / ""Winter checklist for timber windows" is now online." |
+| 8 | Published | 200: the row updates in place and a toast confirms. Clock-sensitive: shows a relative time or a countdown. | "Just now" / "Article published" / ""Winter checklist for timber windows" is now online." |
 | 9 | Action failed | A 500 or network error. The row stays as it was, and the toast stays until retried or dismissed. | "Couldn't unpublish" / "The server didn't respond. Nothing changed." / "Retry" |
 | 10 | Row vanished (404) | Any row action gets a 404. | "That article no longer exists" / "It was deleted somewhere else, so we removed it from the list." |
 | 11 | Delete: confirm | Delete… from the row menu. |  |
@@ -52,7 +52,7 @@ Rows update when the server responds, not optimistically. Search, tab and sort a
 
 ### Articles: pagination (group "Articles: pagination", 11 states)
 
-Route: `/articles?page=2&size=50`. API: GET /v1/article/?page=&size=&q=&status= (proposed: needs backend page, size, total in the response).
+Route: `/articles?page=2&size=50`. API: GET /v1/article/?page=&size=&q=&status= (page, size; total in the X-Total-Count header; invalid values are normalised in the URL, never shown as an error).
 
 Page and page size live in the URL as page and size. Defaults (page 1, size 25) are omitted. Allowed sizes 5, 25, 50, 100. Search, tab or sort changes reset to page 1. Rows equal the page size; the frames draw at most 10 rows. The paginator hides when everything fits on one page; the summary stays. Mobile shows Previous, "Page N of M" and Next. Keyboard: Tab reaches page size, first, previous, each page, next, last; Enter or Space activates; the current page has aria-current="page"; ArrowDown opens the page-size list, Enter selects, Esc closes.
 
@@ -69,3 +69,33 @@ Page and page size live in the URL as page and size. Defaults (page 1, size 25)
 | 9 | Empty after search | Zero results. Paginator and summary are hidden. | "No articles match "tiles"" / "Check the spelling, or search for a shorter part of the title." / "Clear search" |
 | 10 | Page size menu | The select opens upward. 5, 25, 50 or 100; the chosen size is saved as size and the page resets to 1. |  |
 | 11 | Focus-visible | Keyboard focus on Next: 2 px --ui-primary outline, 2 px offset. Same ring on every paginator control. |  |
+
+## Changed in pass 3: authors, site column and site filter
+
+### Articles: sites and authors (group "Articles: sites and authors", 3 states)
+
+Route: `/articles?site=journal`. API: GET /v1/article/?site={key}&page=&size=&q=&status=.
+
+Every Articles frame has the Authors column (avatars, at most 3 plus "+N"; "—" when none; on mobile avatars with the first name). When more than one site exists, a Site column and a Site filter appear, read-only text for every role; with one site they are not rendered.
+
+| # | State | Trigger | Copy |
+|---|---|---|---|
+| 1 | Several sites | More than one site exists. | Authors · Site · All sites · Renew · Journal · Projects |
+| 2 | Site filter open | The Site select in the toolbar. Choosing a site stores ?site=key and resets the page to 1. | All sites · Renew · Journal · Projects · Archive |
+| 3 | No articles on a site | The chosen site has no articles. | No articles on "Archive" · Move articles here from the editor, or choose another site. · Show all sites |
+
+All existing Articles frames show the Authors column (avatars, at most 3 plus "+N", "—" when none).
+
+## Articles: search status (SEO round)
+
+Route: `/articles?seo=suggestions`. API: GET /v1/article/?seo=suggestions&page=&size= (items carry seo_status and seo_suggestions).
+
+A quiet indicator in the Status cell on desktop and under the title on mobile cards: a lightbulb chip with a count when there are suggestions, an eye-off chip "Hidden" when noindex is on, nothing when the article is ready. The toolbar gets a "Needs attention" toggle with a count next to the search field. Tabs and their counts are unchanged. On a single-site install nothing changes: the Site filter and column stay hidden and the toggle works the same, over all articles.
+
+| # | State | Trigger | Copy |
+|---|---|---|---|
+| 1 | Status chips | Row 2 has 2 suggestions, row 3 is hidden, row 4 has 3, row 5 has 1. | Needs attention · 3 · Hidden · 2 suggestions (tooltip) · Hidden from search engines (tooltip) |
+| 2 | Needs attention on | The toggle is pressed. The list shows only articles with suggestions. Hidden-only articles are not included. | Needs attention · 3 |
+| 3 | Needs attention: none | Nothing to show with the toggle on. | Nothing needs attention · Every article has a clean check. Suggestions are optional, so this is just a bonus. · Show all articles |
+
+Filter: "Needs attention" sets `?seo=suggestions` and resets `page` to 1. Tab counts do not change. Single-site installs behave the same; the Site filter stays hidden.

docs/design/screens/authors.md

@@ -0,0 +1,82 @@
+
+# Authors
+
+Route: `/authors`. API: GET /v1/author/ · POST /v1/author/ · PATCH /v1/author/{id} · DELETE /v1/author/{id}?reassign_to={id|none} · POST /v1/author/me.
+
+An author is a public byline, not an account. It may be linked to one CMS user; guest writers have no link. The slug is globally unique, generated from the name and editable. An article has zero or more authors in a set order; the first is the primary byline. Zero authors is allowed.
+
+**Roles.** Owner and admin can create, edit and delete any author. Other roles see the Authors screen read-only: the list and a read-only detail, with no Add author button, no row menu, no slide-over form and no delete. They can pick authors in the article editor. Any role can use "Create my author profile" and edit their own linked author: the form opens with the linked user locked and has no delete action.
+
+**Shared pieces.** The list, slide-over, delete-with-reassign dialog, slug field and media field are defined once in `DirectoryFrame.dc.html` and referenced by both Authors and Sites. The media picker is drawn once, in "Authors: form". The server-fallback 409 dialog is drawn once, in "Authors: delete".
+
+Visual reference: `RenewCMS Screens Back-office.dc.html`, groups "Authors", "Authors: form", "Authors: delete". Every state is drawn in light and dark (theme switch) at 1440×900 and 390×844. Copy is exact. Strings in a Copy cell are separated by " · " and listed in reading order.
+
+### Authors (group "Authors", 8 states)
+
+Sidebar entry between Media and Users, visible to every role. Owner and admin create, edit and delete any author. Other roles see the list and the detail read-only. Columns: avatar and name, slug, account (Linked or Guest), article count. Search by name or slug. Long names truncate in the row and show in full on hover. Above 25 authors the list uses the same paginator as Articles; its states are drawn in "Authors: pagination". List, panel and dialogs come from DirectoryFrame and are shared with Sites.
+
+| # | State | Trigger | Copy |
+|---|---|---|---|
+| 1 | Default | Owner or admin. The list loaded, newest first. | Authors · The names readers see on your articles. An author doesn't need an account. · Add author · Search by name or slug · Author · Slug · Account · Articles · Linked · Guest · 9 articles · 1 article · No articles |
+| 2 | Loading | The first load, or a retry. |  |
+| 3 | Error | 500 or network failure. | Couldn't load authors · Check your connection and try again. · Try again |
+| 4 | Empty, first run | Zero authors. Toolbar hidden, one call to action. Other roles see the same text without the button. | No authors yet · Authors are the names readers see on articles. They don't need an account. · Add author |
+| 5 | No results | Search matched nothing. | No authors match "zoe" · Check the spelling, or search for a shorter part of the name. · Clear search |
+| 6 | Row menu | Owner or admin. The ellipsis button. Mobile: bottom sheet. | Edit · Delete… |
+| 7 | Read-only list (other roles) | Any role except owner and admin. No Add author button, no row menu and no bottom button on mobile. Search still works. A row opens the read-only detail. | Authors · The names readers see on your articles. Only an owner or admin can change authors. · Search by name or slug · Author · Slug · Account · Articles |
+| 8 | Read-only detail | A row was opened by a role without author rights. Same panel width as the form, no fields, Close as the only action. The account email is not shown. | Inès Duarte · Linked · 9 articles · Bio · Website · Only an owner or admin can change this author. · Close |
+
+### Authors: add and edit (group "Authors: form", 11 states)
+
+Owner and admin. A slide-over, because the form has a live preview (the byline). Fields: avatar (media picker), name, slug (auto, editable), bio with counter, website, social links (X, LinkedIn, GitHub, Mastodon, Custom; up to 5), linked user (only users without an author). Slug field, media field and picker are the shared ones from DirectoryFrame. Saving shows "Saving…" in the button, as in the other forms.
+
+| # | State | Trigger | Copy |
+|---|---|---|---|
+| 1 | Add: empty | "Add author". Owner or admin. | Add author · Avatar (optional) · Choose image · Name · e.g. Camille Roche · Slug · Generated from the name · Bio (optional) · A sentence or two about the author. · 0 / 280 · Website (optional) · https://example.com · Social links (optional) · Add link · 0 of 5 · Linked user (optional) · No linked user · Link a CMS user if this author has an account. Guest writers need no link. · Byline preview · Author name · The bio appears here. · Cancel · Add author |
+| 2 | Slug from the name | Typing a name fills the slug. Auto badge and "Edit slug" pencil. | camille-roche · Auto · Generated from the name. Used in public author URLs and API paths. Unique across all authors. |
+| 3 | Slug collision | 409 on submit, or on blur after a check. | The slug "camille-roche" is already used by another author. · Use camille-roche-2 · Reset to match the name |
+| 4 | Validation | On submit or blur. Nothing is sent. | Enter a name. · Shorten the bio to 280 characters. · 291 / 280 · Enter a full URL starting with https://. |
+| 5 | Social links | Add link adds a row with a type select and a URL. One link is invalid. | X · LinkedIn · GitHub · Mastodon · Custom · https://x.com/username · https://www.linkedin.com/in/username · https://github.com/username · https://mastodon.social/@username · https://example.com · Enter a full URL starting with https://. · You can add up to 5 links. |
+| 6 | Linked user: choose | The select is open. Only users without an author. When none are left it reads "Every user already has an author." | Choose a user · Users without an author · Marta Alves · marta@renew.example · Rui Santos · rui@renew.example |
+| 7 | Edit: linked author | Edit on an author linked to a user. | Edit Inès Duarte · Linked user (optional) · ines.duarte@renew.example · Unlink · New articles by this user start with this author. · Save changes |
+| 8 | Avatar: picker | "Choose image". The existing media picker; shown as a square. The site social image uses this same picker. | Choose an image · The avatar for Camille Roche. · Shown as a square. Choose an image with the face or logo near the middle. · Use image |
+| 9 | Save failed | 500 or network failure. | Couldn't save the author. Your changes are still here. Try again in a moment. |
+| 10 | Unlink: confirm | "Unlink" next to the linked user, owner or admin. On 200 the field returns to "No linked user" and a toast reads "User unlinked" · "Inès Duarte is now a guest author." | Unlink Inès Duarte? · Inès Duarte will stay on their articles. New articles by ines.duarte@renew.example will no longer start with this author. · Cancel · Unlink user |
+| 11 | Re-link | "Link user" on a guest author in the row menu or the form. Same list as above. | Link Camille Roche to a user? · Only users without an author are listed. · Cancel · Link user |
+
+### Authors: delete (group "Authors: delete", 6 states)
+
+Owner and admin. Reassign: the dialog asks who gets the articles, with "Nobody" as the last option, and shows the count in the button. Zero authors are allowed, so Nobody is always valid. The 409 dialog is the server fallback and is drawn once.
+
+| # | State | Trigger | Copy |
+|---|---|---|---|
+| 1 | Reassign (recommended) | "Delete…" on an author with articles, owner or admin. The button reads "Reassigning…" while the request runs. On 204 a toast reads "Author deleted" · "3 articles now credit Inès Duarte." A linked author also shows "Linked to ines.duarte@renew.example. The user account isn't affected." | Delete this author? · "Camille Roche" will be deleted and is credited on 3 articles. This can't be undone. · Credit these articles to · Inès Duarte · Where an article has several authors, Camille Roche is removed and the others stay. · Cancel · Delete and reassign 3 articles |
+| 2 | Choose who | The select is open. The deleted author is not listed. | Nobody · Remove the byline |
+| 3 | Nobody | "Nobody" chosen. | The articles keep any other authors. Articles with only this author will have no byline. |
+| 4 | Failed (shared by site and author delete) | 500 or network failure. Both delete dialogs use this notice. | Couldn't delete the author · Nothing was changed. Try again in a moment. |
+| 5 | Server fallback (409) | Fallback only. The dialog above always sends reassign_to, so this appears only when the server refuses a stale request because articles still credit the author. Drawn once, not as a flow. | Can't delete this author · "Camille Roche" is credited on 3 articles. Choose another author to credit instead, or remove Camille Roche from those articles first. · Close · Reassign articles |
+| 6 | No articles | An author with zero articles: plain confirm. | Delete this author? · "Léa Fontaine" will be deleted. No articles credit this author. This can't be undone. · Delete author |
+
+### Authors: pagination (group "Authors: pagination", 10 states)
+
+Route: `/authors?page=3&size=50`. API: GET /v1/author/?q=&page=&size= (total in `X-Total-Count`, array body unchanged; `q` already exists). Owner, admin and read-only roles see the same pager. Drawn with 128 authors (6 pages) and generated rows.
+
+**URL.** `/authors?page=2&size=50`. `page` and `size` are the parameter names (as Articles and Activity). `size` is one of 5, 25, 50, 100; default 25. Defaults are omitted from the URL (`page=1`, `size=25`). Combined with search: `/authors?q=mar&page=2`. A search change or a size change resets `page` to 1 and drops it from the URL. An invalid `size` or `page` (not a positive integer) is replaced silently by the default with `history.replace`. A `page` past the last page falls back to the last page: the URL is replaced by `?page=<last>` and the info notice "That page doesn't exist. Showing the last page." is shown, as on Articles. Browser Back returns to the previous page of results.
+
+**Pager.** The same component as Articles and Media, in the same footer position (below the list, summary on the left, page-size select next to it, right-aligned controls; mobile: summary and select on one row, then Previous, "Page X of Y", Next). Nothing new is drawn. Sizes are the sizes of the existing pattern: 5, 25, 50, 100 (default 25). API: total in `X-Total-Count`, array body unchanged. Keyboard and aria as Articles. The only difference from Articles: on a single page the page-size select is hidden too and the footer holds only the count line "N authors" (Articles keeps its summary and select). Existing frames of this screen that show a short list (the "Default" frames above) don't draw the count line yet; it appears whenever the list has loaded.
+
+| # | State | Trigger | Copy |
+|---|---|---|---|
+| 1 | First page | /authors. Previous and First are disabled (40% opacity, aria-disabled). Mobile: Previous disabled. | Showing 1–25 of 128 · 25 per page · Page 1 of 6 |
+| 2 | Middle page | /authors?page=3. Current page uses --rc-sand and --rc-on-sand with a --ui-primary border; ellipses mark skipped ranges once there are more than 7 pages. | Showing 51–75 of 128 · Page 3 of 6 |
+| 3 | Last page | /authors?page=6. Next and Last are disabled. | Showing 126–128 of 128 · Page 6 of 6 |
+| 4 | Single page | Everything fits on one page (6 authors). The pager and the page-size select are hidden; the count line stays in the footer position. Zero results use state 8 instead. | 6 authors |
+| 5 | Page size menu | The select opens upward. Sizes are the Articles sizes: 5, 25, 50, 100; default 25. The chosen size is saved as size and the page resets to 1. | 5 per page · 25 per page · 50 per page · 100 per page |
+| 6 | Loading a page | Next, Previous, a page number or a size change was used. The rows are replaced by the existing skeleton rows (8 desktop, 6 mobile). The pager stays and is disabled (40% opacity, not focusable); the summary reads "Loading page 4…" and the page number shown is still 3. | Loading page 4… |
+| 7 | Error loading a page | 500 or network failure on a page change. The rows of page 3 stay, the pager keeps "Page 3", and the inline error with Retry sits above the pager. Retry repeats the request for page 4. | Couldn't load page 4. Showing page 3. · Check your connection and try again. · Retry |
+| 8 | Empty after search | A search matched nothing. The existing empty state replaces the list; no pager, no count. Clear search returns to /authors and page 1. | No authors match "zoe" · Check the spelling, or search for a shorter part of the name. · Clear search |
+| 9 | Search resets to page 1 | Searching "mar" from page 5 goes to /authors?q=mar (page omitted). Any search change, and any size change, resets the page to 1. | Showing 1–25 of 31 |
+| 10 | Long labels on mobile | A large total on a 390 px screen. The summary and the page-size select share one row and wrap onto two if needed; Previous, the "Page 12 of 52" label and Next stay on one row (the two buttons flex, the label never wraps). Totals over 999 use thousands separators in both labels. | Showing 276–300 of 1,284 · Page 12 of 52 |
+
+## SEO round
+No change to the Authors screen. Name, profile URL (website) and social links feed `authors[].name`, `authors[].url`, `authors[].same_as` and the JSON-LD author (`sameAs`) in GET /v1/article/{id}/seo. They are visible in the editor's "What the frontend gets" dialog.

docs/design/screens/editor.md

@@ -96,3 +96,82 @@ On mobile, Save and Publish sit in a sticky bottom bar and the details panel ope
 | 39 | Leave with unsaved changes | Back, a nav link or closing the tab. | "Leave without saving?" / "Your changes to "How we price a bathroom renovation" haven't been saved." / "Discard changes" / "Keep editing" |
 | 40 | Offline | The connection dropped. Writing continues, and Save and Publish wait. |  |
 | 41 | Not found (404) | Unknown id, or the article was deleted elsewhere. |  |
+
+## Changed in pass 3: site and authors
+
+Every existing Editor frame that has the details sidebar shows the "Site and authors" section collapsed, as the SPA renders it: one summary line ("Inès Duarte") because the install has one site and the article has an author, so there is no Site select. In the Loading frame the header is shown with a skeleton summary. The Not found frame has no editor, so it has no section. On mobile the section lives in the Details sheet, closed by default, so the mobile editor frames do not show it until the sheet is opened. The group below holds only the states specific to the feature.
+
+### Editor: site and authors (group "Editor: site and authors", 16 states)
+
+Route: `/article/:id/edit`. API: PATCH /v1/article/{id} {site_id, author_ids[]} · GET /v1/site/ · GET /v1/author/ · POST /v1/author/.
+
+States specific to this feature. The collapsed default (one site, the article has an author) and the Loading and Not found states are drawn in the existing Editor frames, which show the section in the same place; they are not repeated here. The section is open when the install has more than one site or the article has no authors, and collapsed to one summary line otherwise; the choice is remembered per browser. On mobile it is closed by default. With one site the Site select is not rendered. Anyone who can edit the article can set its site and pick authors; "Create author…", the Create author dialog and its "This is me" checkbox are for owner and admin only. For any other role, the "Create my author profile" hint (state 4) creates the profile directly with POST /v1/author/me, with no dialog, then shows the author in the list with a toast. Authors are a reorderable list; the first is the primary byline.
+
+| # | State | Trigger | Copy |
+|---|---|---|---|
+| 1 | Open: one site, one author | The section was opened. No Site select. | Authors · Add an author |
+| 2 | Open: several sites | Site select above the authors, with the canonical host as helper text. | Site · Journal · journal.renew.example · Canonical host: journal.renew.example |
+| 3 | Site select open | The select is open. Options show name and host; the default site is first. | Renew · renew.example · Journal · journal.renew.example · Projects · Archive |
+| 4 | No authors, with hint | The article has no authors and the user has no author profile. The hint is dismissible and does not return once dismissed. "Create my author profile" creates the profile directly for every role (POST /v1/author/me, no dialog), then the author appears in the list and a toast confirms. | You don't have an author profile yet · Create one to be credited on your articles. · Create my author profile · No authors. This article will have no byline. |
+| 5 | Many authors | Four authors. The first shows "Primary". Each row has a drag handle and a remove button. Long names truncate with an ellipsis and carry the full name in title and aria-label. | Primary · Drag to reorder. The first author is the primary byline. · Dr. Alexandra Konstantinopoulou-Whitfield |
+| 6 | Add author: open | The Add an author combobox is open. Authors already on the article are checked and dimmed. "Create author…" is shown only to owner and admin. | Search authors · Create author… |
+| 7 | Add author: no match | Typing a name that matches nobody. "Create author…" is shown only to owner and admin. | No author matches "Zoe Lambert". · Create author "Zoe Lambert"… |
+| 8 | Add author: open (no create) | A role without author rights. The combobox lists the authors with no "Create author…" row, because that row is shown only to owner and admin. | Search authors |
+| 9 | Add author: no match (no create) | A role without author rights types a name that matches nobody. Only the message shows; there is no create link, because "Create author…" is shown only to owner and admin. | No author matches "Zoe Lambert". |
+| 10 | Add author: error | GET /v1/author/ failed. The article keeps its authors. | Couldn't load authors · Check your connection and try again. · Try again |
+| 11 | Reorder: keyboard | Space or Enter on the handle grabs the row. Arrow keys move it. | Jonas Pereira grabbed. Position 2 of 3. Use the up and down arrow keys to move, Space to drop, Escape to cancel. |
+| 12 | Reorder: pointer | Dragging a row. The row lifts and a line shows the drop position. |  |
+| 13 | Create author: dialog | "Create author…" in the dropdown, owner and admin only. The writer stays in the editor. | Create author · Adds a byline for this article. You can add a bio and avatar later in Authors. · Name · Slug · Zoe Lambert · zoe-lambert · Cancel · Create author |
+| 14 | Create author: for me | Owner and admin only. When the user has no author profile, a checkbox links the new author to them. | This is me · Links the author to marta@renew.example. |
+| 15 | Create author: slug taken | The slug exists. The dialog suggests a free one. | The slug "zoe-lambert" is already used by another author. · Use zoe-lambert-2 |
+| 16 | Create author: failed | 500 or network failure. | Couldn't create the author · The article is unchanged. Try again in a moment. |
+
+## Editor: search and sharing (SEO round)
+
+Route: `/article/:id/edit`. API: PATCH /v1/article/{id} {slug, excerpt, seo_title, seo_description, cover_image_id, cover_image_alt, social_title, social_description, social_image_id, canonical_url, noindex, seo_dismissed[]}.
+
+RenewCMS is headless: it never renders pages or adds meta tags. This section helps the writer fill in SEO data and shows what the frontend will receive. Everything is optional and each empty field shows its fallback. Placement: a "Search and sharing" section under "Site and authors" in the sidebar and in the mobile Details sheet. Collapsed by default with a one-line summary (Ready, N suggestions, Hidden from search), remembered per browser. The fields and live previews open in a slide-over (desktop, 960 px) or a 92% sheet over the Details sheet (mobile). Anyone who can edit the article can edit these fields. Suggestions never block saving or publishing: publishing is allowed regardless. Counters are soft guides and turn amber, never red, outside the recommended range. Light and dark follow the theme switch above.
+
+| # | State | Trigger | Copy |
+|---|---|---|---|
+| 1 | Collapsed: ready | The default. Nothing to suggest. | Search and sharing · Ready |
+| 2 | Collapsed: suggestions | Summary in the warning colour. No count badge elsewhere. | Search and sharing · 2 suggestions |
+| 3 | Collapsed: hidden | noindex is on. | Search and sharing · Hidden from search |
+| 4 | Open: ready | Address, the all-good message and two actions. | Address · renew.example/how-we-price-a-bathroom-renovation · All good · Nothing to suggest for this article. · Edit search and sharing · What the frontend gets |
+| 5 | Open: suggestions | At most three suggestions here, then a count. Each links to its field. | The meta title is 74 characters. Search engines may cut it off after about 60. · Go to meta title · The cover image has no alt text. Add a short description of it. · Go to cover image · The body has no headings. H2 headings help readers scan the article. · Go to body · +1 more in Search and sharing |
+| 6 | Open: checking | While the checks run after the editor loads. The rest of the section stays usable. | Checking this article… |
+| 7 | Open: hidden | A line explains the flag. | Hidden from search engines. This only sets a flag in the API. |
+| 8 | Open: other site | The address uses the article's site. | journal.renew.example/how-we-price-a-bathroom-renovation |
+| 9 | Panel: defaults | A writer who changed nothing. Every value is a fallback and says so. | Search and sharing · URL slug · Generated from the title until you edit it. · Meta title · Using article title · Recommended 30 to 60 characters. This is a guide, not a limit. · Meta description · Using first sentence of the body · Recommended 70 to 160 characters. · Excerpt · A short summary. It is also sent as the article teaser. · Cover image · Using the site social image (north-wall.jpg). · Social sharing · Optional · Uses the meta values · Advanced · Canonical URL: automatic · Hide from search engines · Sets noindex in the API. It doesn't change who can read the article. · Search result · Social card · Suggestions · What the frontend gets · Cancel · Save changes |
+| 10 | Panel: filled in | Own values everywhere. The fallback chips are gone and the suggestion list shows All good. | All good · Nothing to suggest for this article. |
+| 11 | Panel: outside the soft ranges | Counters turn amber. The preview shows the cut-off. Nothing is blocked. | The meta title is 74 characters. Search engines may cut it off after about 60. · The description is 41 characters. About 70 to 160 reads best in results. · Cut off here, the way a search engine would. |
+| 12 | Panel: slug edited | The Auto badge is gone. "Reset to match the title" brings it back. | Reset to match the title |
+| 13 | Panel: slug taken | Checked on blur and on save. Nothing is saved until a free slug is chosen. | The slug "bathroom-costs" is already used on Renew. · Use bathroom-costs-2 |
+| 14 | Panel: cover without alt | Alt text is required before the cover counts as ready. It is a suggestion, not an error. | Alt text · Needed before the cover counts as ready. Sent as image alt in the API. · Describe the image for people who can't see it · The cover image has no alt text. Add a short description of it. |
+| 15 | Panel: choose cover | The shared Media picker. | Choose a cover image · The cover for this article. · Use image |
+| 16 | Panel: social sharing open | Optional overrides. Each falls back to the meta values. | Social sharing · Optional · Social title · Using meta title · Social description · Using meta description · Social image · Using the cover image. |
+| 17 | Panel: social customised | The card shows the overrides, so the Using chips disappear. | Customised |
+| 18 | Panel: advanced, invalid canonical | Collapsed by default. The address must be absolute. | Advanced · Canonical URL · Only change this if the same content lives at another address. · Enter a full address starting with https:// |
+| 19 | Panel: hidden from search | The switch only sets a flag in the API. | Hide from search engines · Sets noindex in the API. It doesn't change who can read the article. |
+| 20 | Panel: mobile search preview | The Desktop and Mobile toggle changes the width and where the title is cut. | Search result · Desktop · Mobile |
+| 21 | Panel: checking | Checks run on open and after each pause in typing. | Checking this article… |
+| 22 | Panel: saving | Fields are disabled while the request runs. | Saving… |
+| 23 | Panel: save failed | 500 or network failure. The values stay. | Couldn't save search and sharing. Your changes are still here. Try again in a moment. |
+| 24 | Saved | The panel closes. The summary updates. | Search and sharing saved · Your search and sharing settings are up to date. |
+
+Mobile: the section sits under "Site and authors" in the Details sheet. "Edit search and sharing" opens a 92% sheet on top of the Details sheet, with suggestions first, then fields, then the two previews. Publishing is allowed regardless of suggestions; Save and Publish are never disabled by them.
+
+## Editor: what the frontend gets (SEO round)
+
+Route: `/article/:id/edit`. API: GET /v1/article/{id}/seo.
+
+A read-only dialog (desktop, 720 px) or bottom sheet (mobile) with the resolved SEO object exactly as the API returns it. Opened from the sidebar section or the panel. Each value that came from a fallback carries a chip. Formatted shows a compact key and value list, Raw shows the JSON. Copy JSON copies the raw object. Author name, profile URL and social links come from the Authors screen and surface in authors[] and in the JSON-LD author, so Authors itself needs no change.
+
+| # | State | Trigger | Copy |
+|---|---|---|---|
+| 1 | Formatted | Default view. | What the frontend gets · The SEO data returned by GET /v1/article/12/seo, read only. RenewCMS doesn't render pages or add meta tags: your frontend does. · Formatted · Raw JSON · Copy JSON · Close |
+| 2 | Raw JSON | The JSON as the API returns it. | Raw JSON |
+| 3 | Copied | The button reads Copied for 2 s and this is announced. | Copied |
+| 4 | Draft article | Drafts answer 404 to anonymous callers. | This article is a draft. The API returns this data only to signed-in callers until it is published. |
+| 5 | Loading | Copy is disabled. | – |
+| 6 | Error | GET failed. Nothing in the article changes. | Couldn't load the SEO data · GET /v1/article/12/seo failed. Your article is unchanged. Try again in a moment. · Try again |

docs/design/screens/integration.md

@@ -16,7 +16,7 @@ Sticky section index on the right (desktop), "Jump to" select (mobile). A refere
 - Note 1: "A key can't create, list or revoke API keys, log in, register, verify or reset a password, or call anything under `/v1/system`. Those routes answer 403 "This action needs a real session." An invalid, unknown, expired or revoked key answers 401, even on public routes, and so does a key whose user was deleted or unverified."
 - Note 2: "Each key can make 120 requests per minute. Beyond that the API answers 429 with a `Retry-After` header."
 - Groups: Articles (7), Media (6), Users and invites (6), Settings (1), Session only (12 routes, 3 sub-groups; every `/v1/system` route is in this group). Session-only banner: "These routes need a signed-in browser session. With an API key they answer 403 "This action needs a real session.""
-- Errors: "Every error is a plain-text body with a single sentence. The status code is in the HTTP status line, and the Content-Type is text/plain." Table 400, 401, 403, 404, 429, 500 with the real messages below. Sample: a status line plus the text body (`HTTP/1.1 403 Forbidden`, `Content-Type: text/plain`, blank line, `This action needs a real session.`).
+- Errors: "Every error is a plain-text body with a single sentence. The status code is in the HTTP status line, and the Content-Type is text/plain." Table 400, 401, 403, 404, 429, 500 with the real messages below. The 403 row has a note line under it: "Site SEO defaults are owner only. Article SEO fields need only the right to edit the article." (12/18, `--ui-text-muted`, in the cause column, 2 px under the cause text). It is the only row with a note; rows below it move down by the wrapped note height (two 18 px lines on desktop, three on mobile, plus 2 px). Sample: a status line plus the text body (`HTTP/1.1 403 Forbidden`, `Content-Type: text/plain`, blank line, `This action needs a real session.`).
 - Notes: image URL prefix, CORS (existing copy), and "Article routes accept `?format=markdown`, `?format=html` or `?format=json` to choose how `body` is returned. With `json`, `body` is the stored JSON structure. Articles have `body_format: markdown` by default."
 
 ## EndpointCard states
@@ -34,16 +34,16 @@ Desktop 1440×900, mobile 390×844, light and dark.
 Plain text, one sentence. Used in the table and in the per-endpoint error captions.
 - 400: "The request cannot be processed due to a mismatch in the format of the body." / "The expiry must be a date in the future." Image requests (`/media/photo.png?v=`) answer 400 with a JSON body (`status`, `error`, `message`, `detail`) in two cases: `{ "status": 400, "error": "unknown_variant", "message": "Unknown variant", "detail": "unknown" }` for an unknown or disabled variant, and `{ "status": 400, "error": "unsupported_parameter", "message": "Unsupported parameter", "detail": "width" }` for any other query parameter (`width`, `height`, `format`, `quality`). Both are rows of the "Responses" table in "Images and variants".
 - 401: "You must be logged in to access this resource."
-- 403: "This action needs a real session." (session-only routes called with a key) / "Only the owner can do this." / "You must verify your account to access this resource."
-- 404: "Article not found" / "Image not found" / "Invite not found" / "API key not found"
+- 403: "This action needs a real session." (session-only routes called with a key) / "Only the owner can do this." / "You must verify your account to access this resource." Note under the 403 row: "Site SEO defaults are owner only. Article SEO fields need only the right to edit the article." The inline parenthetical that said the same thing in the row's cause text was removed to avoid saying it twice.
+- 404: "Article not found" / "Image not found" / "Invite not found" / "API key not found" / `site_not_found` (GET /v1/site/{key}/sitemap only; body is the code, not a sentence)
 - 429: "Too many requests. Please try again later." A per-key limit also sends `Retry-After`.
 - 500: "Internal server error"
 - 409, only as examples under their endpoints: `POST /v1/user/invite` "This address already has an account."; `POST /v1/media/merge` "Some of the images to merge changed. Refresh and try again." There is no 409 or 422 row in the table.
 - 413 and 415 on `POST /v1/media/` keep their earlier plain captions; no real message is known.
 
 ## Request bodies
-- `POST /v1/article/`: `title` (string, required, 3 to 200 characters), `body` (string, required, max 10000 today; the limit is being removed, see change-list.md item 3).
-- `PATCH /v1/article/{id}`: `body` (string, required, max 10000 today; same).
+- `POST /v1/article/`: `title` (string, required, 3 to 200 characters), `body` (string, optional, no length limit).
+- `PATCH /v1/article/{id}`: `body` (string, optional, no length limit).
 - `PATCH /v1/media/{id}` (rename): `filename` (string, required).
 - `POST /v1/media/merge`: `keep_id` (number, required, > 0), `merge_ids` (number[], required, at least 1, each > 0).
 - `POST /v1/media/`: multipart/form-data, 1 file field (shown as "multipart/form-data, 1 file field").
@@ -108,3 +108,9 @@ New section "Images and variants" on the Integration page, after Media and befor
 ## Pass 2 notes
 - The base URL field and the image URL builder output are CodeSnippets with a single tab.
 - Page padding 24 px (16 px on mobile), page title 20/28, section headings 18/26, card titles 15/24, sub headings 14/22 (foundations.md).
+
+## Search and sharing (SEO round)
+New group "Search and sharing" after Articles, in the sidebar index and the mobile Jump to select. Two cards in the existing endpoint style (collapsed, method badge, auth badge "Public", example, 401 and 404 rows, copy buttons):
+- GET /v1/article/{id}/seo: the resolved SEO object. Fields: title, description, canonical_url, robots, og{type,title,description,url,site_name,image,image_alt,locale}, twitter{card,title,description,image,image_alt}, image{url,alt,source}, authors[{name,url,same_as}], published_at, modified_at, fallbacks, json_ld. Drafts answer 404 to anonymous callers.
+- GET /v1/site/{key}/sitemap?page=&size=: yes, shown per site by key. Items: { url, modified_at, noindex }. Total in X-Total-Count. Sizes 25, 50, 100, 500, default 100. Errors: 400 "The request cannot be processed due to a mismatch in the format of the body." (same text as the other routes; bad `page` or `size`), 401, 404 `site_not_found` (unknown site key; this is the body the API returns, shown as a code and not rewritten as prose).
+PATCH /v1/article/{id} lists the new optional fields (slug, excerpt, seo_title, seo_description, cover_image_id, cover_image_alt, social_title, social_description, social_image_id, canonical_url, noindex, seo_dismissed). The 403 row of the HTTP status table adds: site SEO defaults are owner only; article SEO fields need only the right to edit the article.

docs/design/screens/media.md

@@ -1,6 +1,6 @@
 # Media
 
-Route: `/media`, `/media (detail panel)`, `/media?filter=duplicates`. API: GET /v1/media/ · POST /v1/media/ · PATCH /v1/media/{id} · DELETE /v1/media/{id} · POST /v1/media/merge · GET /v1/media/{id}/usage · GET /v1/media?variants=with|without&sort=total_size · GET /v1/media/{id}/variants · POST /v1/media/{id}/variants/{name} · DELETE /v1/media/{id}/variants/{name} · owner and admin only.
+Route: `/media`, `/media?page=7&size=50`, `/media (detail panel)`, `/media?filter=duplicates`. API: GET /v1/media/?page=&size=&q=&filter= (total in `X-Total-Count`) · POST /v1/media/ · PATCH /v1/media/{id} · DELETE /v1/media/{id} · POST /v1/media/merge · GET /v1/media/{id}/usage · GET /v1/media?variants=with|without&sort=total_size · GET /v1/media/{id}/variants · POST /v1/media/{id}/variants/{name} · DELETE /v1/media/{id}/variants/{name} · owner and admin only.
 
 New route for verified users, in the sidebar between Articles and Users with the images icon. Images belong to the library, not to an article: one image can be used in many articles, and deleting an article never deletes images. Uploads from this page are not cropped or resized, and the file is stored as chosen. "Used in" is read from article bodies each time the list loads. Duplicates are images with identical content, whatever their filenames. Alt text is not stored on the image; it is set when inserting into an article. Search, filter, sort and view are stored in the query string. Keyboard: grid items are buttons in one tab stop each; Enter opens the detail panel, Space toggles selection, and Escape closes the panel or clears the selection. Selection changes are announced ("north-wall.jpg selected, 1 selected").
 
@@ -10,7 +10,7 @@ Visual reference: `RenewCMS Screens Back-office.dc.html`, groups "Media", "Media
 
 Every state below is drawn in light and dark (theme switch on the board), at 1440×900 and 390×844 (both frames sit side by side). Board: `RenewCMS Screens Back-office.dc.html`. Copy is exact; where a cell is empty the state reuses the fixed copy.
 
-### Media (group "Media", 43 states)
+### Media (group "Media", 52 states)
 
 Route: `/media`. API: GET /v1/media/ · POST /v1/media/ · PATCH /v1/media/{id} · DELETE /v1/media/{id} · POST /v1/media/merge · GET /v1/media/{id}/usage.
 
@@ -18,7 +18,7 @@ New route for verified users, in the sidebar between Articles and Users with the
 
 | # | State | Trigger | Copy |
 |---|---|---|---|
-| 1 | Grid, many images | Default view. 12 images, newest first. Each item is a button labelled like "north-wall.jpg, 3.9 MB, used in 2 articles". Badges: "Unused" (warm), "Duplicate" (info), "Used in N" (outline). The Duplicates tab carries a count of groups only while duplicates exist. |  |
+| 1 | Grid, many images | Default view. 12 images, newest first. Each item is a button labelled like "north-wall.jpg, 3.9 MB, used in 2 articles". Badges: "Unused" (warm), "Duplicate" (info), "Used in N" (outline). The Duplicates tab carries a count of groups only while duplicates exist. Below the grid: "Showing 1–12 of 12" and the page-size select (same paginator as Articles). |  |
 | 2 | Grid, few images | Three images. Cards keep their size instead of stretching. Checkerboard shows behind the SVG. |  |
 | 3 | List view | The list icon in the toggle. A table from md up (Filename, Dimensions, Size, Type, Used in, Uploaded by, Uploaded) and a card list below md. The "Used in" count opens the article list in the detail panel. |  |
 | 4 | Loading | The first load, a retry, or a change of search or filter. Skeleton cards appear after 150 ms. |  |
@@ -49,7 +49,7 @@ New route for verified users, in the sidebar between Articles and Users with the
 | 29 | Upload: several files, mixed | Upload button or drop, several files. Each file has its own row and progress. Files upload two at a time. A row can end as added, "Already in your library", rejected in the browser, or failed. Rejected and failed rows stay until dismissed. | "2.2 MB" / "2.6 MB" / "1.1 of 2.6 MB" / "1.9 MB" |
 | 30 | Upload: summary | All rows settled. The summary counts each outcome. "Use existing" selects the existing image and drops the row; "Upload anyway" stores a second copy, which then appears under Duplicates. "Try again" retries one file. Announced when it finishes. | "2.2 MB" / "2.6 MB" / "Upload finished" / "5 images" / "2 uploaded · 1 already in your library · 2 need attention" |
 | 31 | Upload: rejected files (413, 400) | Type and size are checked in the browser first, so nothing is sent. A server 413 or 400 for a file that got through shows the same row with its own message. | "210 KB" / "notes.pdf isn't an image" / "Images can be up to 10 MB. Use a PNG, JPEG, WEBP or SVG image." / "3.0 MB" / "broken.png couldn't be read" / "The server couldn't read this image. Save it again as a PNG or JPEG, then try again." / "Nothing was uploaded" / "3 files were rejected" |
-| 32 | Upload: too many requests (429) | Rate limited. Retry-After is counted down in the button. It re-enables at zero. Already-added files are kept. |  |
+| 32 | Upload: too many requests (429) | Rate limited. Retry-After is counted down in the button. It re-enables at zero. Already-added files are kept. Clock-sensitive: shows a relative time or a countdown. |  |
 | 33 | Duplicates: groups | The Duplicates tab. Groups of identical images side by side, each with its uploader, upload date and "Used in N articles". The suggested copy to keep is the most used, then the oldest. |  |
 | 34 | Purge duplicates: confirm | "Purge duplicates" in the toolbar, next to the sort menu (in the stacked toolbar on mobile). Opens the same dialog as Settings; every other state is on the Media cleanup board. |  |
 | 35 | Duplicates: no purge button (member) | Verified users who are not owner or admin. The "Purge duplicates" button is hidden. "Merge into this one" is unchanged. |  |
@@ -61,6 +61,15 @@ New route for verified users, in the sidebar between Articles and Users with the
 | 41 | Merge: done | 200: the group leaves the list. When it was the last one, "No duplicates" shows. | "Copies merged" / "2 copies merged. 5 articles updated." |
 | 42 | List failed to load | A 500 or network failure on the list request. The alert replaces the images; Try again repeats the request. |  |
 | 43 | Offline | navigator.onLine is false. Loaded images stay browsable. Upload, Rename, Delete and Merge are disabled, and the banner says why. |  |
+| 44 | Pagination: first page | /media. Previous and First are disabled. Summary "Showing 1–25 of 312". The paginator sits under the grid or list and uses the Articles controls: 5, 25, 50 or 100 per page, default 25; page and size live in the URL as page and size (/media?page=7&size=50); search, tab, sort, view and size changes reset to page 1. API: GET /v1/media/?page=&size=&q=&filter= with the total in X-Total-Count. |  |
+| 45 | Pagination: middle page | /media?page=7. Current page uses --rc-sand and --rc-on-sand; ellipses mark skipped ranges. |  |
+| 46 | Pagination: last page | /media?page=13. Next and Last are disabled. Summary "Showing 301–312 of 312". |  |
+| 47 | Pagination: list view | Same paginator under the table. On mobile: Previous, "Page 2 of 13", Next, with the 44 px targets. |  |
+| 48 | Pagination: loading next page | Next was pressed. Skeleton cards keep the grid height, controls are disabled, summary reads "Loading page 7…". |  |
+| 49 | Pagination: error loading a page | 500 or network failure on page change. Previous images stay; Retry sits in the notice. | "Couldn't load page 7. Showing page 6." |
+| 50 | Pagination: page out of range | /media?page=99 is replaced with ?page=13 and this notice is shown. | "That page doesn't exist. Showing the last page." |
+| 51 | Pagination: page size menu | The select opens upward. 5, 25, 50 or 100; the chosen size is saved as size and the page resets to 1. |  |
+| 52 | Pagination: focus-visible | Keyboard focus on Next: 2 px --ui-primary outline, 2 px offset. Same ring on every paginator control. |  |
 
 ### 3. Media library (group "Media library", 6 states)
 

docs/design/screens/new-article.md

@@ -20,6 +20,6 @@ Recommendation: a modal. Title is the only field. The body is not asked for here
 |---|---|---|---|
 | 1 | Default | "New article" from Home, Articles or the empty state. |  |
 | 2 | Validation | On submit or blur. Nothing is sent. | "Use at least 3 characters." |
-| 3 | Submitting | Request in flight. Fields are disabled and the dialog can't be dismissed. | "Creating…" / "Choosing tiles for a small bathroom" / "Small rooms show every grout line, so we start with the floor." |
-| 4 | Title rejected (400) | A server 400 that got past the browser checks. The raw error isn't shown. | "Something in the form isn't valid. Check the highlighted fields." / "Choosing tiles for a small bathroom" / "Small rooms show every grout line, so we start with the floor." / "Check this title and try again." |
-| 5 | Error | 500 or network failure. | "Couldn't create the article. Your text is still here. Try again in a moment." / "Choosing tiles for a small bathroom" / "Small rooms show every grout line, so we start with the floor." |
+| 3 | Submitting | Request in flight. Fields are disabled and the dialog can't be dismissed. | "Creating…" / "Choosing tiles for a small bathroom" |
+| 4 | Title rejected (400) | A server 400 that got past the browser checks. The raw error isn't shown. | "Something in the form isn't valid. Check the highlighted fields." / "Choosing tiles for a small bathroom" / "Check this title and try again." |
+| 5 | Error | 500 or network failure. | "Couldn't create the article. Your text is still here. Try again in a moment." / "Choosing tiles for a small bathroom" |

docs/design/screens/profile.md

@@ -46,3 +46,21 @@ Opened from the account menu at the bottom of the sidebar. Username, email and p
 | 11 | Reset: too many requests (429) | Rate limited. The button is disabled for 5 minutes. |  |
 | 12 | Reset: failed | 500 or network failure. The button can be pressed again. |  |
 | 13 | Display names in the Users list | The Display name column shows the name when one is set and a dash when not. Your own row follows your saved name. |  |
+
+## Changed in pass 3: author profile
+
+Every existing Profile frame has the "Author profile" card between Account and Password, in its default state ("Create my author profile"). The card is defined once, in `AppFrame.dc.html`.
+
+### Profile: author profile (group "Profile: author profile", 5 states)
+
+Route: `/profile`. API: POST /v1/author/me · GET /v1/auth/me (author field).
+
+The "Author profile" card sits between Account and Password in every Profile frame, defined once in AppFrame. The existing Profile frames show its default state ("Create my author profile"). All roles can create their own profile and edit their own linked author. Only the states specific to the card are drawn here.
+
+| # | State | Trigger | Copy |
+|---|---|---|---|
+| 1 | No author profile | The user has no linked author. | Author profile · Your public byline on articles. It's separate from your account. · You don't have an author profile yet. Create one to be credited on your own articles. · Create my author profile · Uses your display name, Marta Alves. You can change it afterwards. |
+| 2 | Error | 500 or network failure. | Couldn't create your author profile · Try again in a moment. |
+| 3 | Created | 201: the card shows the author. The author is named from the display name and linked to the user. | Author profile created · Marta Alves is now your byline. · Edit author · Linked to your account. New articles start with this author. |
+| 4 | Created, slug adjusted | The slug was taken, so the server added a number. No error is shown. | Your slug is marta-alves-2 · marta-alves was already used by another author. You can change it in Edit author. |
+| 5 | Edit own author | Edit author on the card, by a role without author rights. The form opens with the linked user locked and no Unlink. There is no delete action in the form or on this screen. | Edit Marta Alves · Linked user · marta@renew.example · This is your author profile. Only an owner or admin can change the link. · Save changes |

docs/design/screens/settings.md

@@ -106,11 +106,11 @@ The page is one column of cards, top to bottom: Version, Updates, Media cleanup,
 
 | # | State | Trigger | Copy |
 |---|---|---|---|
-| 1 | Up to date | Opened with no newer version. Restart is available but not emphasised. | "You're up to date" / "You have the latest version of RenewCMS." / "Check for updates" / "Restart" |
+| 1 | Up to date | Opened with no newer version. Restart is available but not emphasised. Clock-sensitive: shows a relative time or a countdown. | "You're up to date" / "You have the latest version of RenewCMS." / "Check for updates" / "Restart" |
 | 2 | Checking | Check for updates pressed, or the first open after 24 hours. Announced as "Checking for updates". Buttons are disabled. | "Checking for updates…" / "This usually takes a few seconds." / "Checking…" |
-| 3 | Check failed | Offline, or the update server didn't answer (500, network). The last known result is kept. | "Couldn't check for updates" / "RenewCMS couldn't reach the update server. Check your connection and try again. Your site isn't affected." / "Last checked yesterday at 18:12" / "Try again" / "Restart" |
-| 4 | Update available | A newer version exists. Release notes are collapsed. Update is the one primary button. | "Version 2.3.0 is available" / "You have v2.2.0-beta. Update downloads the new version and checks it. Nothing changes until you restart." / "Update" / "Takes about 2 minutes. Your site stays online." |
-| 5 | Update available, notes open | "What's new in 2.3.0" expanded. It is a button with aria-expanded, and the list is plain text. | "Version 2.3.0 is available" / "You have v2.2.0-beta. Update downloads the new version and checks it. Nothing changes until you restart." / "Update" / "Takes about 2 minutes. Your site stays online." |
+| 3 | Check failed | Offline, or the update server didn't answer (500, network). The last known result is kept. Clock-sensitive: shows a relative time or a countdown. | "Couldn't check for updates" / "RenewCMS couldn't reach the update server. Check your connection and try again. Your site isn't affected." / "Last checked yesterday at 18:12" / "Try again" / "Restart" |
+| 4 | Update available | A newer version exists. Release notes are collapsed. Update is the one primary button. Clock-sensitive: shows a relative time or a countdown. | "Version 2.3.0 is available" / "You have v2.2.0-beta. Update downloads the new version and checks it. Nothing changes until you restart." / "Update" / "Takes about 2 minutes. Your site stays online." |
+| 5 | Update available, notes open | "What's new in 2.3.0" expanded. It is a button with aria-expanded, and the list is plain text. Clock-sensitive: shows a relative time or a countdown. | "Version 2.3.0 is available" / "You have v2.2.0-beta. Update downloads the new version and checks it. Nothing changes until you restart." / "Update" / "Takes about 2 minutes. Your site stays online." |
 | 6 | Downloading | Update pressed (202). Progress polls every second. Announced as "Downloading, 25 percent" and so on, never every tick. | "Downloading version 2.3.0…" / "You can leave this page. The download continues and your site stays online." / "Downloading version 2.3.0" / "42% · 11 of 26 MB" / "Updating…" |
 | 7 | Verifying | The download finished. No percentage, so the bar is indeterminate. Announced as "Checking the download". | "Checking the download…" / "Making sure the file is complete and safe to install. This takes a few seconds." / "Checking the download" / "Almost there" / "Updating…" |
 | 8 | Ready to install | The file passed its checks. Restart becomes the primary action. "Restart later" is closing the dialog or leaving the page. | "Version 2.3.0 is ready to install" / "The download is checked. Restart to install it. Your site will be unavailable for about 10 seconds." / "Nothing has changed yet." / "Restart" / "Not now? Leave this page. The update waits here, and the banner on Home reminds you." |
@@ -118,19 +118,19 @@ The page is one column of cards, top to bottom: Version, Updates, Media cleanup,
 | 10 | Restart: request failed | 500 or network failure before the restart began. The site is still running. | "Version 2.3.0 is ready to install" / "The download is checked. Restart to install it. Your site will be unavailable for about 10 seconds." / "Nothing has changed yet." / "Restart" / "Couldn't start the restart. Nothing was changed and your site is still running. Try again in a moment." |
 | 11 | Restarting to install | Full-page overlay, so it survives the server going away. The page polls until the site answers, then reloads. It is a live region announced once as "Installing version 2.3.0. Your site is restarting." | "Version 2.3.0 is ready to install" / "Installing version 2.3.0" / "Your site is restarting with the new version. This takes about 10 seconds. This page reloads on its own when the site is back." / "Started at 09:51" |
 | 12 | Restarting, taking longer | No answer after 60 seconds. The copy changes and a manual reload appears. The overlay stays until the site is back. | "Still restarting" / "This is taking longer than usual. Keep this page open. It reloads on its own when the site is back, or you can reload it now." / "Started at 09:51 · 1 minute ago" / "Reload page" |
-| 13 | Update done | The page reloaded on the new version. Focus lands on the "Updates" heading (ring shown), the toast is announced, and the version updates. | "You're on version 2.3.0" / "The update is installed and your site is running again." / "Updated today at 09:52" / "Check for updates" / "Restart" / "Read the release notes" / "Update installed" / "RenewCMS is now on version 2.3.0." |
+| 13 | Update done | The page reloaded on the new version. Focus lands on the "Updates" heading (ring shown), the toast is announced, and the version updates. Clock-sensitive: shows a relative time or a countdown. | "You're on version 2.3.0" / "The update is installed and your site is running again." / "Updated today at 09:52" / "Check for updates" / "Restart" / "Read the release notes" / "Update installed" / "RenewCMS is now on version 2.3.0." |
 | 14 | Update failed, rolled back | The site came back on v2.2.0-beta. The error toast stays until dismissed and the card keeps the explanation. | "The update didn't install" / "RenewCMS put the previous version back, so your site is running as before. Nothing was lost." / "What to do next: try again in a few minutes. If it fails again, ask whoever manages your server to check the update." / "Try again" / "Your site is back on v2.2.0-beta." |
 | 15 | Download failed | A 500, or the connection dropped. Focus moves to the card heading. Try again restarts the download. | "The download didn't finish" / "The connection dropped before the file was complete. Nothing was changed and your site is running as before." / "Try again" |
 | 16 | Verification failed | The downloaded file isn't trusted. The tone is a warning, and the file is thrown away. Technical detail goes to the server log, not the screen. | "We didn't use this update" / "The file didn't pass our safety check, so it was not installed. Nothing was changed. Try downloading it again. If this keeps happening, contact RenewCMS support." / "Try again" |
-| 17 | Too many requests (429) | Retry-After counted down in the button. It re-enables at zero. | "Too many tries" / "Wait a moment before trying again." / "Try again in 0:42" |
+| 17 | Too many requests (429) | Retry-After counted down in the button. It re-enables at zero. Clock-sensitive: shows a relative time or a countdown. | "Too many tries" / "Wait a moment before trying again." / "Try again in 0:42" |
 | 18 | Not prepared | The server can't update from the browser. No buttons, not even Restart. The command is for the person who runs the server and is a single line. The placeholder command is subject to the real one. |  |
 | 19 | Not prepared: command copied | Copy pressed. The button reads "Copied" for 2 s and it is announced. |  |
-| 20 | Plain restart: confirm | Restart with no update waiting. Nothing is installed. | "You're up to date" / "You have the latest version of RenewCMS." / "Check for updates" / "Restart" |
+| 20 | Plain restart: confirm | Restart with no update waiting. Nothing is installed. Clock-sensitive: shows a relative time or a countdown. | "You're up to date" / "You have the latest version of RenewCMS." / "Check for updates" / "Restart" |
 | 21 | Plain restart: restarting | Same overlay as the update restart with shorter copy. | "Restarting your site" / "This takes about 10 seconds. This page reloads on its own when the site is back." / "Started at 09:51" |
 | 22 | Plain restart: done | The page reloaded. Focus lands on the "Updates" heading. | "Your site is back" / "Site restarted" / "Your site is running again." |
-| 23 | Admin view | Admins see the version and the note, with no buttons. Up to date: "You're up to date" and "Only the owner can update or restart the site." No Home banner or Settings pill. | "Version 2.3.0 is available" / "You have v2.2.0-beta. Only the owner can update RenewCMS. Ask the owner of this site." |
-| 24 | Role changed (403) | An owner was changed to admin while the page was open and pressed a button. The card reloads in the admin view. | "Version 2.3.0 is available" / "You have v2.2.0-beta. Only the owner can update RenewCMS. Ask the owner of this site." / "Only the owner can do this" / "Ask the owner of this site to update RenewCMS." |
-| 25 | Update already running (409) | Another owner started it. The card switches to that run's progress. | "Version 2.3.0 is available" / "You have v2.2.0-beta. Update downloads the new version and checks it. Nothing changes until you restart." / "Update" / "An update is already running" / "Another owner started it. Progress shows here." |
+| 23 | Admin view | Admins see the version and the note, with no buttons. Up to date: "You're up to date" and "Only the owner can update or restart the site." No Home banner or Settings pill. Clock-sensitive: shows a relative time or a countdown. | "Version 2.3.0 is available" / "You have v2.2.0-beta. Only the owner can update RenewCMS. Ask the owner of this site." |
+| 24 | Role changed (403) | An owner was changed to admin while the page was open and pressed a button. The card reloads in the admin view. Clock-sensitive: shows a relative time or a countdown. | "Version 2.3.0 is available" / "You have v2.2.0-beta. Only the owner can update RenewCMS. Ask the owner of this site." / "Only the owner can do this" / "Ask the owner of this site to update RenewCMS." |
+| 25 | Update already running (409) | Another owner started it. The card switches to that run's progress. Clock-sensitive: shows a relative time or a countdown. | "Version 2.3.0 is available" / "You have v2.2.0-beta. Update downloads the new version and checks it. Nothing changes until you restart." / "Update" / "An update is already running" / "Another owner started it. Progress shows here." |
 
 ### Settings: Media cleanup (group "Settings: Media cleanup", 9 states)
 
@@ -192,3 +192,7 @@ The last card on the page, same card styling as Version, Updates and Media clean
 | 4 | Shortening the period | Confirms before older events are removed. |  |
 | 5 | Forever | No cleanup scheduled. |  |
 | 6 | Save error | The previous setting is still in place. |  |
+
+## Changed in pass 3: Publishing card and Sites child
+
+Owner only. A "Publishing" card sits between the Media card and Media cleanup: title "Publishing", text "Where your content is shown.", one row "Manage sites" / "Base URLs, default image and robots policy" that opens `/settings/sites`. The sidebar Settings group gains a second heading "Publishing" with one child, "Sites". Existing Settings frames (owner view) show both. Admins and other roles see neither the card nor the sidebar entry (frame "Hidden entry (admin)" in group "Sites"), and `/settings/sites` shows a 403 page (frame "Forbidden (403)").

docs/design/screens/sites.md

@@ -0,0 +1,109 @@
+
+# Sites
+
+Route: `/settings/sites`. API: GET /v1/site/ · POST /v1/site/ · PATCH /v1/site/{id} · DELETE /v1/site/{id}?reassign_to={id}.
+
+A site is a frontend that displays content: name, key, base URL, default social image, default robots policy, optional locale and a default flag. Each article belongs to exactly one site. A default site always exists and cannot be deleted; the first is seeded once, at migration, from PUBLIC_URL (the CMS's own address, so only a starting value: the owner is expected to set the frontend's address). The base URL must use https, except for loopback hosts (localhost, 127.0.0.1, ::1), so a local frontend works. is_online stays the global publish switch.
+
+**Roles.** Only the owner can create, edit, set the default or delete a site. Admins and other roles don't see the Sites entry under Settings, and the "Publishing" card is hidden for them. A direct link to `/settings/sites` shows a 403 page. Choosing a site for an article is not site management: anyone who can edit an article can set its site in the editor and read the site list (GET /v1/site/).
+
+**Site key.** The key is set when the site is created and can't be edited afterwards. The edit form shows it read-only with a lock and the text "Used in API paths, so it can't change." There is no editable-key state and no key-change warning.
+
+**Shared pieces.** The list, slide-over, delete-with-reassign dialog, slug field and media field are defined once in `DirectoryFrame.dc.html` and referenced by both Sites and Authors; nothing is drawn separately for either screen. `AppFrame.dc.html` holds the shell (sidebar, Settings card, editor section, Profile card).
+
+Visual reference: `RenewCMS Screens Back-office.dc.html`, groups "Sites", "Sites: form", "Sites: delete". Every state is drawn in light and dark (theme switch) at 1440×900 and 390×844. Copy is exact. Strings in a Copy cell are separated by " · " and listed in reading order. Dialog and form submit states ("Saving…", "Moving articles…") use the button loading pattern from the controls matrix and are not drawn per screen.
+
+### Sites (group "Sites", 9 states)
+
+Only the owner can create, edit, set the default or delete a site. Other roles don't see the Sites entry under Settings; a direct link shows a 403 page. A site name can still appear read-only in the article editor and the Articles list. New child of Settings, under a "Publishing" heading in the sidebar (Settings also gets a "Publishing" card with a "Manage sites" row, owner only). Columns: name with key, base URL, article count. The default site carries a "Default" badge and has no delete action. A site with robots set to noindex shows a "Noindex" badge. List, row menu and dialogs come from DirectoryFrame and are shared with Authors.
+
+| # | State | Trigger | Copy |
+|---|---|---|---|
+| 1 | Default | The list loaded. Four sites, Renew is the default. Owner only. | Sites · The frontends that display your content. · Add site · Site · Base URL · Articles · Default · Noindex · 268 articles · 38 articles · 6 articles · No articles |
+| 2 | Only the default site | First run: the seeded site only. A hint under the list, no empty-state wall. | Add another site if your content is shown on more than one frontend. Each article belongs to one site. |
+| 3 | Loading | The first load, or a retry. Skeleton rows appear after 150 ms. |  |
+| 4 | Error | A 500 or network failure on the list request. | Couldn't load sites · Check your connection and try again. · Try again |
+| 5 | Row menu | The ellipsis button, or Enter on the focused menu button. Mobile: bottom sheet titled with the site name. | Edit · Set as default · Delete… |
+| 6 | Default site: delete unavailable | Menu on the default site. "Delete…" is aria-disabled, stays focusable and explains itself: tooltip on desktop, text in the sheet on touch. | The default site can't be deleted. Make another site the default first. |
+| 7 | Set as default: confirm | "Set as default" in the row menu. On 200 the badge moves and a toast confirms. The button reads "Saving…" while the request runs. | Make Journal the default site? · New articles start on this site. Articles that are already on other sites stay where they are. · Cancel · Make default · Default site changed · "Journal" is now the default site. |
+| 8 | Hidden entry (admin) | An admin opens Settings. The sidebar has no Publishing group and no Sites entry, and the page has no Publishing card. Roles without Settings have nothing to hide. | No Publishing group · No Sites entry · No "Manage sites" row |
+| 9 | Forbidden (403) | A role other than owner opens /settings/sites from a bookmark or a link. The sidebar has no Sites entry, so the page explains instead of redirecting. The API answers 403. | You don't have access to Sites · Only the owner can manage sites. Ask the owner of this site if you need a change. · Back to Settings |
+
+### Sites: add and edit (group "Sites: form", 7 states)
+
+Owner only. A slide-over, because the form has a live preview (the canonical URL). Fields: name, key, base URL, default social image (media picker), default robots policy, optional locale, default switch. The key is set when the site is added and can't be edited afterwards: the edit form shows it read-only with a lock and the text "Used in API paths, so it can't change." Closing with changes asks "Discard changes?" with the existing discard dialog. The slug field, media field and picker are the shared ones from DirectoryFrame (the picker is drawn once, in Authors: form). Locale error: "Use a language tag like en or fr-CH."
+
+| # | State | Trigger | Copy |
+|---|---|---|---|
+| 1 | Add: empty | "Add site" in the page header, or the bottom button on mobile. | Add site · Name · e.g. Journal · Key · Generated from the name · Base URL · https://blog.example.com · The public address of the frontend. Use https and no path. · Default social image (optional) · Choose image · Used when an article has no image of its own. · Default robots policy · Index · Noindex · Search engines may list this site's pages. · Locale (optional) · e.g. en or fr-CH · A language tag. Leave empty if the site has no single language. · Make this the default site · New articles start here. The current default is Renew. · Canonical URL preview · Cancel · Add site |
+| 2 | Add: key from the name | Typing a name fills the key. The pencil unlocks it until the site is added. | journal · Auto · Lowercase letters, numbers and hyphens. Used in API paths. It can't be changed after the site is added. |
+| 3 | Add: URL not valid | On blur or submit. Nothing is sent. A URL with a path and text that is not a URL get their own messages, drawn the same way. | Use https. For example https://blog.example.com. · Remove the path. Use only the host, like https://blog.example.com. · Enter a full URL, like https://blog.example.com. |
+| 4 | Add: duplicate key | 409 on submit, or on blur after a check. | A site with the key "journal" already exists. Choose another key. · Use journal-2 |
+| 5 | Add: save failed | 500 or network failure. The values stay. | Couldn't save the site. Your changes are still here. Try again in a moment. |
+| 6 | Edit: default site | Edit on the default site. The key is read-only with a lock, because it is used in API paths. The switch is on and locked. | Edit Renew · Key · renew · Used in API paths, so it can't change. · Default site · New articles start on the default site. To change it, make another site the default. · Save changes |
+| 7 | Edit: other site, noindex | Edit on a non-default site. | Edit Projects · Key · projects · Used in API paths, so it can't change. · Noindex · Asks search engines not to list this site's pages. · Make this the default site |
+
+### Sites: delete (group "Sites: delete", 3 states)
+
+Owner only. A site with articles cannot be deleted without a destination: the dialog has a select and shows how many articles move. Destination defaults to the default site. Without reassign_to the server answers 409. This is the shared ReassignDialog from DirectoryFrame; its failed state is drawn once, in Authors: delete.
+
+| # | State | Trigger | Copy |
+|---|---|---|---|
+| 1 | With articles | "Delete…" on a site that has articles. The button reads "Moving articles…" while the request runs. On 204 the row leaves the list and a toast reads "Site deleted" · "38 articles moved to Renew." | Delete this site? · "Journal" will be deleted. 38 articles belong to it, so choose a site to move them to. This can't be undone. · Move articles to · Renew · renew.example · 38 articles will move to Renew. Their canonical host changes to renew.example. · Cancel · Move 38 articles and delete |
+| 2 | Choose destination | The select is open. The site being deleted is not listed. | Journal is not offered. Options show name and host. |
+| 3 | No articles | A site with zero articles: plain confirm, no select. | Delete this site? · "Archive" will be deleted. No articles belong to it. This can't be undone. · Delete site |
+
+### Sites: pagination (group "Sites: pagination", 10 states)
+
+Route: `/settings/sites?page=2&size=50`. API: GET /v1/site/?q=&page=&size= (design assumption to confirm: `q`, `page`, `size` and `X-Total-Count` on the site list; today the list returns every site). Owner only, like the rest of Sites. Drawn with 61 sites (3 pages) and generated rows.
+
+**URL.** `/settings/sites?page=2&size=50`. `page` and `size` are the parameter names (as Articles and Activity). `size` is one of 5, 25, 50, 100; default 25. Defaults are omitted from the URL (`page=1`, `size=25`). Combined with search: `/settings/sites?q=renew&page=2`. A search change or a size change resets `page` to 1 and drops it from the URL. An invalid `size` or `page` (not a positive integer) is replaced silently by the default with `history.replace`. A `page` past the last page falls back to the last page: the URL is replaced by `?page=<last>` and the info notice "That page doesn't exist. Showing the last page." is shown, as on Articles. Browser Back returns to the previous page of results.
+
+**Pager.** The same component as Articles and Media, in the same footer position (below the list, summary on the left, page-size select next to it, right-aligned controls; mobile: summary and select on one row, then Previous, "Page X of Y", Next). Nothing new is drawn. Sizes are the sizes of the existing pattern: 5, 25, 50, 100 (default 25). API: total in `X-Total-Count`, array body unchanged. Keyboard and aria as Articles. The only difference from Articles: on a single page the page-size select is hidden too and the footer holds only the count line "N sites" (Articles keeps its summary and select). Existing frames of this screen that show a short list (the "Default" frames above) don't draw the count line yet; it appears whenever the list has loaded.
+
+**Search on Sites.** The Sites screen has no search field today. States 8 and 9 need one, so the pagination frames add the Authors field with the placeholder "Search by name or key" (name, key and base URL are matched). Treat it as a proposal; if you prefer no search on Sites, drop states 8 and 9 and the `q` parameter.
+
+| # | State | Trigger | Copy |
+|---|---|---|---|
+| 1 | First page | /settings/sites. Previous and First are disabled (40% opacity, aria-disabled). Mobile: Previous disabled. | Showing 1–25 of 61 · 25 per page · Page 1 of 3 |
+| 2 | Middle page | /settings/sites?page=2. Current page uses --rc-sand and --rc-on-sand with a --ui-primary border; ellipses mark skipped ranges once there are more than 7 pages. | Showing 26–50 of 61 · Page 2 of 3 |
+| 3 | Last page | /settings/sites?page=3. Next and Last are disabled. | Showing 51–61 of 61 · Page 3 of 3 |
+| 4 | Single page | Everything fits on one page (4 sites). The pager and the page-size select are hidden; the count line stays in the footer position. Zero results use state 8 instead. | 4 sites |
+| 5 | Page size menu | The select opens upward. Sizes are the Articles sizes: 5, 25, 50, 100; default 25. The chosen size is saved as size and the page resets to 1. | 5 per page · 25 per page · 50 per page · 100 per page |
+| 6 | Loading a page | Next, Previous, a page number or a size change was used. The rows are replaced by the existing skeleton rows (8 desktop, 6 mobile). The pager stays and is disabled (40% opacity, not focusable); the summary reads "Loading page 3…" and the page number shown is still 2. | Loading page 3… |
+| 7 | Error loading a page | 500 or network failure on a page change. The rows of page 2 stay, the pager keeps "Page 2", and the inline error with Retry sits above the pager. Retry repeats the request for page 3. | Couldn't load page 3. Showing page 2. · Check your connection and try again. · Retry |
+| 8 | Empty after search | A search matched nothing. The existing empty state replaces the list; no pager, no count. Clear search returns to /settings/sites and page 1. | No sites match "blog" · Check the spelling, or search for a shorter part of the name. · Clear search |
+| 9 | Search resets to page 1 | Searching "renew" from page 4 goes to /settings/sites?q=renew (page omitted). Any search change, and any size change, resets the page to 1. | Showing 1–25 of 27 |
+| 10 | Long labels on mobile | A large total on a 390 px screen. The summary and the page-size select share one row and wrap onto two if needed; Previous, the "Page 6 of 13" label and Next stay on one row (the two buttons flex, the label never wraps). Totals over 999 use thousands separators in both labels. | Showing 126–150 of 312 · Page 6 of 13 |
+
+
+
+Route: `/settings/sites`. API: PATCH /v1/site/{id} {site_name, title_template, default_description, social_image_id, default_robots}.
+
+Owner only, like the rest of Sites. The existing add and edit form gains three fields under the default social image (reused, not duplicated): Site name, Title template with a live example, and Default description. The default robots policy keeps its place. A box under the form explains how articles use these defaults. Sites has no separate read-only details view: the edit form is the details, and other roles get the existing 403 page (403 owner_only on PATCH, 401 without a session).
+
+| # | State | Trigger | Copy |
+|---|---|---|---|
+| 1 | Edit: SEO defaults | Edit on the default site. | Default social image (optional) · Site name · Shown in titles through the template, and sent as the Open Graph site name. · Title template · Use %title% for the article title and %site% for the site name. · Example · How we price a bathroom renovation \| Renew · Default description (optional) · Used when an article has no description, excerpt or body text. · How articles use these defaults · Title · Article title, then the template. · Description · Used last, after the article's description, excerpt and body. · Image · Used when an article has no cover image. · Robots · Used unless an article is hidden from search engines. |
+| 2 | Add: defaults | New sites start with the default template and nothing else. | Site name · e.g. Renew · %title% \| %site% · One or two sentences about the site. |
+| 3 | Template: custom | The example updates as the owner types. | Example · How we price a bathroom renovation – Journal |
+| 4 | Template: not valid | The template needs %title%. Nothing is sent. | The template must contain %title%. |
+| 5 | Save failed | 500 or network failure. | Couldn't save the site. Your changes are still here. Try again in a moment. |
+
+Owner only. Non-owners get the existing 403 page. Sites has no read-only details view; the edit form is the details.
+
+## Sites: SEO defaults (SEO round)
+
+Route: `/settings/sites`. API: PATCH /v1/site/{id} {site_name, title_template, default_description, social_image_id, default_robots}.
+
+Owner only, like the rest of Sites. The existing add and edit form gains three fields under the default social image (reused, not duplicated): Site name, Title template with a live example, and Default description. The default robots policy keeps its place. A box under the form explains how articles use these defaults. Sites has no separate read-only details view: the edit form is the details, and other roles get the existing 403 page (403 owner_only on PATCH, 401 without a session).
+
+| # | State | Trigger | Copy |
+|---|---|---|---|
+| 1 | Edit: SEO defaults | Edit on the default site. | Default social image (optional) · Site name · Shown in titles through the template, and sent as the Open Graph site name. · Title template · Use %title% for the article title and %site% for the site name. · Example · How we price a bathroom renovation \| Renew · Default description (optional) · Used when an article has no description, excerpt or body text. · How articles use these defaults · Title · Article title, then the template. · Description · Used last, after the article's description, excerpt and body. · Image · Used when an article has no cover image. · Robots · Used unless an article is hidden from search engines. |
+| 2 | Add: defaults | New sites start with the default template and nothing else. | Site name · e.g. Renew · %title% \| %site% · One or two sentences about the site. |
+| 3 | Template: custom | The example updates as the owner types. | Example · How we price a bathroom renovation – Journal |
+| 4 | Template: not valid | The template needs %title%. Nothing is sent. | The template must contain %title%. |
+| 5 | Save failed | 500 or network failure. | Couldn't save the site. Your changes are still here. Try again in a moment. |
+
+Owner only. Non-owners get the existing 403 page. Sites has no read-only details view; the edit form is the details.

docs/design/screens/users.md

@@ -47,6 +47,6 @@ One shared workspace: every user sees the same articles and this same list. Colu
 | 12 | Cancel invite: failed | 500 or network failure. The dialog stays open. | "Cancel this invite?" / "The link sent to sam.oliveira@renew.example will stop working. You can invite the address again later." / "Keep invite" / "Cancel invite" / "Couldn't cancel the invite. Try again in a moment." |
 | 13 | Cancel invite: done | 204: the row disappears and a toast confirms. | "Invite cancelled" / "sam.oliveira@renew.example can no longer use the link." |
 | 14 | Renew invite: sending | "Renew invite" on an Expired row. No confirmation, since it only sends an email. The button shows progress and is disabled. | "Renewing…" |
-| 15 | Renew invite: done | 200: the row becomes Pending with today's date, moves to the top, and the old link stops working. | "Today" / "Invite renewed" / "p.huber@gmail.com has 3 days to accept the new link." |
+| 15 | Renew invite: done | 200: the row becomes Pending with today's date, moves to the top, and the old link stops working. Clock-sensitive: shows a relative time or a countdown. | "Today" / "Invite renewed" / "p.huber@gmail.com has 3 days to accept the new link." |
 | 16 | Renew invite: failed | 500 or network failure. The row stays Expired and the button can be pressed again. | "Couldn't renew the invite" / "Try again in a moment." |
 | 17 | Invite sent | 201: the dialog closes, the new invite appears at the top as Pending, and a toast confirms. | "lea.martin@renew.example" / "Today" / "lea.martin@renew.example has 3 days to accept." |

docs/design/seo-slices.md

@@ -0,0 +1,32 @@
+# SEO: decisions and slice order
+
+Spec of record for the design is `change-list.md` (section "SEO round"), `screens/editor.md`, `screens/sites.md`, `screens/articles.md`, `screens/integration.md` and `states.md`. This file records the product decisions that settle the design's open questions, and the order of the implementation slices.
+
+## Decisions on the open questions
+
+| # | Question | Decision |
+| --- | --- | --- |
+| 1 | Is `slug` immutable after publication? | No. It stays editable. RenewCMS does not manage redirects, so the frontend owns them. No extra warning copy is added to the design. |
+| 2 | SEO object for drafts | `GET /v1/article/{id}/seo` answers drafts to authenticated callers who can read the article, and 404 to anonymous callers. The editor preview needs it. |
+| 3 | Noindex in the sitemap | Included with `noindex: true`, as drawn. The frontend decides. |
+| 4 | Who applies `title_template` | The API. `title` in the SEO object is resolved. The raw `seo_title` and the site template stay readable on their own routes. |
+| 5 | Backfill | Migration generates a slug for every existing article from its title (same slug rule as authors), unique per site, with `-2`, `-3` suffixes. A title with no letter or digit becomes `article`, then `article-2`, `article-3`. It runs once and is idempotent. |
+| 6 | Excerpt in the list payload | Yes. Article items carry `excerpt`. |
+
+## Decisions that the design leaves implicit
+
+- Suggestions come from one server-side rule set. The same function feeds `seo_status` and `seo_suggestions` in the article list, the collapsed section summary, and the editor panel.
+- The editor panel's "checking" states and the "slug taken" state use one non-persisting endpoint: `POST /v1/article/{id}/seo/check`. Its body takes the same optional SEO fields as `PATCH /v1/article/{id}`, plus an optional `body` (never `site_id` or `author_ids`), and overrides the saved values for the check only. It answers `{ status, suggestions: [{ code, field, params }], slug: { available, suggestion } }`. Copy for each code lives in the SPA, with a French entry. `seo_dismissed` codes are filtered out of `suggestions` and are never counted in the list.
+- The suggestion codes are the ones the board uses: `title_long`, `title_empty`, `desc_short`, `desc_long`, `cover_alt`, `cover_none`, `slug_long`, `no_au`, `no_h`, `body_alt`, `short`.
+- Cover, social and site social images are media usages: `GET /media/{id}/usage`, `used_in`, the unused filter, merge, purge and delete protection must count them. This also closes the existing gap where author avatars and site social images are missing from `GET /media/{id}/usage`.
+- Roles: anyone who can edit an article edits its SEO fields and runs the check. Only the owner edits site SEO fields (403 "Only the owner can do this."). `GET /v1/site/{key}/sitemap` is public, like the other read routes that serve online articles. SEO edits are logged as an `articles` event; no field values or body text are stored.
+- `PATCH /v1/article/{id}` still requires at least one known field and still answers 400 on `null`. The SEO fields join `body`, `site_id` and `author_ids`.
+
+## Slices
+
+1. **SEO data (backend).** Article and site fields, slug rule and uniqueness per site (409 plain-text `slug_taken`; the first free alternative is in the `X-Slug-Suggestion` response header), backfill, `excerpt` in reads and lists, media usage widening. No resolver yet.
+2. **SEO output (backend).** `GET /v1/article/{id}/seo` (fallback chain, title template, JSON-LD), `POST /v1/article/{id}/seo/check`, `seo_status`, `seo_suggestions` and `?seo=` on the article list, `GET /v1/site/{key}/sitemap`.
+3. **Editor (SPA).** "Search and sharing" section, slide-over and sheet, live previews, suggestions with debounced check, slug field with Auto and Reset, "What the frontend gets" dialog, draft and Save behaviour.
+4. **Sites, Articles, Integration (SPA).** Site SEO defaults, status chip and "Needs attention" filter, Integration "Search and sharing" group, French strings, catalogue.
+
+Run them in order and commit between them: 2 uses the fields of 1, 3 uses the endpoints of 2, and 3 and 4 share the article API types.

docs/design/sites-authors-slices.md

@@ -0,0 +1,29 @@
+# Sites and authors: cross-slice context
+
+The design for Sites and Authors is in `screens/sites.md`, `screens/authors.md`, the "Editor: site and authors", "Profile: author profile" and "Articles: sites and authors" sections of the editor, profile and articles docs, and the board groups listed in `README.md` (pass 3). Behaviour still comes from `features/`; where the two disagree, stop and ask.
+
+## Roles
+| Action | Owner | Admin | Other roles |
+|---|---|---|---|
+| Create, edit, set default, delete a site | yes | no | no |
+| Read the site list, choose an article's site | yes | yes | yes, if they can edit the article |
+| Create, edit, delete any author | yes | yes | no |
+| Read authors, pick authors on an article | yes | yes | yes |
+| Create and edit their own linked author (`POST /v1/author/me`) | yes | yes | yes |
+| Create an author from the editor ("Create author…", "This is me") | yes | yes | no |
+
+## Decisions already taken
+- One site per article (`site_id` on the article). No per-site publish state: `is_online` stays the global switch. API keys stay global.
+- The site key is immutable after creation. Exactly one default site exists and it cannot be deleted. Deleting a site with articles requires `reassign_to`.
+- Authors are separate from users. An optional, unique link to a user. The slug is globally unique and not tied to a site. Zero authors on an article is allowed and never blocks publishing. Deleting an author with articles requires `reassign_to` (an author id or `none`).
+- Media used as an author avatar or a site's default social image counts as media usage.
+- The default site is seeded once from `PUBLIC_URL`. That variable is the CMS's own address (email links), so the seed is only a starting value that the owner edits. The base URL must be https, except for loopback hosts.
+- Existing articles are backfilled to the default site and get no authors.
+
+## Slices, in order
+1. Sites API. 2. Authors API (independent of 1; both touch the article update route and the article response, so merge 1 first and rebase 2).
+3. Sites and Authors screens plus the shared directory pieces (`DirectoryFrame.dc.html`). Existing Editor, Articles and Profile screens are not changed here.
+4. Editor, Articles and Profile integration, which also makes every existing frame of those screens pass the visual check.
+
+## Open point for the first slice
+`PATCH /v1/article/{id}` is served by `UpdateArticleBody` and only updates the body. Extending it with `site_id` and `author_ids[]` or splitting a metadata endpoint is decided in the specifier step of slices 1 and 2.

docs/design/source/AppFrame.dc.html

@@ -12,7 +12,7 @@
 <div style="width:224px;flex-shrink:0;background:var(--ui-bg);border-right:1px solid var(--ui-border);display:flex;flex-direction:column;padding:12px;gap:2px">
 <div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:10px"><svg width="26" height="26" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">RenewCMS</span></div>
 <sc-for list="{{ nav }}" as="n" hint-placeholder-count="3">
-<div data-act="nav-{{ n.key }}" style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;background:{{ n.bg }};color:{{ n.fg }};font-weight:{{ n.fw }}"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ n.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ n.icon }}.svg') center / contain no-repeat"></span>{{ n.t }}<sc-if value="{{ n.badge }}"><span style="margin-left:auto;height:18px;padding:0 6px;display:inline-flex;align-items:center;background:var(--ui-info);color:var(--ui-bg);font:500 11px 'IBM Plex Sans',sans-serif">Update</span></sc-if><sc-if value="{{ n.chev }}"><span aria-hidden="true" style="margin-left:{{ n.chevML }};display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ n.chev }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ n.chev }}.svg') center / contain no-repeat"></span></sc-if></div><sc-if value="{{ n.sub }}"><div style="display:flex;flex-direction:column;gap:2px;margin-left:19px;border-left:1px solid var(--ui-border)"><span style="padding:6px 10px 2px 12px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-text-muted)">Media</span><sc-for list="{{ n.subs }}" as="x" hint-placeholder-count="2"><div data-act="nav-{{ x.t }}" style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px 0 12px;background:{{ x.bg }};color:{{ x.fg }};font-weight:{{ x.fw }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ x.ic }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ x.ic }}.svg') center / contain no-repeat"></span>{{ x.t }}</div></sc-for></div></sc-if>
+<div data-act="nav-{{ n.key }}" style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;background:{{ n.bg }};color:{{ n.fg }};font-weight:{{ n.fw }}"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ n.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ n.icon }}.svg') center / contain no-repeat"></span>{{ n.t }}<sc-if value="{{ n.badge }}"><span style="margin-left:auto;height:18px;padding:0 6px;display:inline-flex;align-items:center;background:var(--ui-info);color:var(--ui-bg);font:500 11px 'IBM Plex Sans',sans-serif">Update</span></sc-if><sc-if value="{{ n.chev }}"><span aria-hidden="true" style="margin-left:{{ n.chevML }};display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ n.chev }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ n.chev }}.svg') center / contain no-repeat"></span></sc-if></div><sc-if value="{{ n.sub }}"><div style="display:flex;flex-direction:column;gap:2px;margin-left:19px;border-left:1px solid var(--ui-border)"><span style="padding:6px 10px 2px 12px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-text-muted)">Media</span><sc-for list="{{ n.subs }}" as="x" hint-placeholder-count="2"><div data-act="nav-{{ x.t }}" style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px 0 12px;background:{{ x.bg }};color:{{ x.fg }};font-weight:{{ x.fw }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ x.ic }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ x.ic }}.svg') center / contain no-repeat"></span>{{ x.t }}</div></sc-for><sc-if value="{{ n.hasSites }}"><span style="padding:6px 10px 2px 12px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-text-muted)">Publishing</span></sc-if><sc-for list="{{ n.subs2 }}" as="x2" hint-placeholder-count="1"><div data-act="nav-{{ x2.t }}" style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px 0 12px;background:{{ x2.bg }};color:{{ x2.fg }};font-weight:{{ x2.fw }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ x2.ic }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ x2.ic }}.svg') center / contain no-repeat"></span>{{ x2.t }}</div></sc-for></div></sc-if>
 </sc-for>
 <div style="flex:1"></div>
 <sc-if value="{{ s.boot }}"><div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px"><span style="width:26px;height:26px;background:var(--ui-bg-accented)"></span><span style="width:80px;height:12px;background:var(--ui-bg-accented)"></span></div></sc-if>
@@ -83,8 +83,10 @@
 <div style="display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap"><div style="flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Articles</span><span style="color:var(--ui-text-muted)">Everything you've written, online and in draft.</span></div><sc-if value="{{ desk }}"><span data-act="new" style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span></sc-if></div>
 <div style="display:flex;flex-direction:{{ tbDir }};gap:{{ tbGap }};border-bottom:{{ tbBorder }}">
 <sc-if value="{{ mob }}"><span style="height:44px;padding:0 4px 0 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:{{ qFg }};font-size:16px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat"></span><span style="flex:1">{{ qText }}</span><sc-if value="{{ s.list.q }}"><span style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></sc-if></span></sc-if>
+<sc-if value="{{ mob }}"><span role="switch" aria-checked="{{ naOn }}" style="display:flex;flex-direction:column"><span style="height:44px;padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid {{ naBd }};background:{{ naBg }};color:{{ naFg }};font-size:15px;font-weight:{{ naFw }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/lightbulb.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/lightbulb.svg') center / contain no-repeat"></span>Needs attention<span style="font:500 11px 'IBM Plex Mono',monospace">{{ naN }}</span></span></span></sc-if><sc-if value="{{ multiMob }}"><span style="position:relative;display:flex;flex-direction:column;"><span style="height:44px;padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:{{ sfFg }};font-size:16px;"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span><span style="flex:1">{{ sfText }}</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat"></span></span><sc-if value="{{ sfMenu }}"><div role="listbox" aria-label="Site" style="position:absolute;left:0;right:0;top:48px;z-index:5;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px"><sc-for list="{{ sfOpts }}" as="o" hint-placeholder-count="3"><div role="option" aria-selected="{{ o.on }}" style="height:44px;padding:0 8px;display:flex;align-items:center;justify-content:space-between;background:{{ o.bg }};color:var(--ui-text-highlighted)">{{ o.t }}<span style="opacity:{{ o.op }};display:flex"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span></span></div></sc-for></div></sc-if></span></sc-if>
 <div style="display:flex;gap:20px;flex:1;border-bottom:{{ tabBorder }}"><sc-for list="{{ tabs }}" as="t" hint-placeholder-count="3"><span style="height:{{ tabH }};display:flex;align-items:center;gap:6px;border-bottom:2px solid {{ t.line }};margin-bottom:-1px;font-weight:{{ t.fw }};color:{{ t.fg }};font-size:{{ tabF }}">{{ t.t }}<span style="font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">{{ t.n }}</span></span></sc-for></div>
-<sc-if value="{{ desk }}"><span style="width:260px;height:32px;margin-bottom:6px;padding:0 4px 0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:{{ qFg }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat"></span><span style="flex:1">{{ qText }}</span><sc-if value="{{ s.list.q }}"><span style="width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></sc-if></span></sc-if>
+<sc-if value="{{ desk }}"><span role="switch" aria-checked="{{ naOn }}" style="margin-bottom:6px;display:flex"><span style="height:32px;padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid {{ naBd }};background:{{ naBg }};color:{{ naFg }};font-size:13px;font-weight:{{ naFw }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/lightbulb.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/lightbulb.svg') center / contain no-repeat"></span>Needs attention<span style="font:500 11px 'IBM Plex Mono',monospace">{{ naN }}</span></span></span></sc-if><sc-if value="{{ desk }}"><span style="width:260px;height:32px;margin-bottom:6px;padding:0 4px 0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:{{ qFg }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat"></span><span style="flex:1">{{ qText }}</span><sc-if value="{{ s.list.q }}"><span style="width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></sc-if></span></sc-if>
+<sc-if value="{{ multiDesk }}"><span style="position:relative;display:flex;flex-direction:column;width:150px;margin-bottom:6px;"><span style="height:32px;padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:{{ sfFg }};"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span><span style="flex:1">{{ sfText }}</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat"></span></span><sc-if value="{{ sfMenu }}"><div role="listbox" aria-label="Site" style="position:absolute;left:0;right:0;top:36px;z-index:5;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px"><sc-for list="{{ sfOpts }}" as="o" hint-placeholder-count="3"><div role="option" aria-selected="{{ o.on }}" style="height:32px;padding:0 8px;display:flex;align-items:center;justify-content:space-between;background:{{ o.bg }};color:var(--ui-text-highlighted)">{{ o.t }}<span style="opacity:{{ o.op }};display:flex"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span></span></div></sc-for></div></sc-if></span></sc-if>
 </div>
 <sc-if value="{{ s.list.empty }}">
 <div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:56px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ s.list.empty.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ s.list.empty.icon }}.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">{{ s.list.empty.title }}</span><span style="color:var(--ui-text-muted);max-width:280px">{{ s.list.empty.text }}</span><span data-act="empty" style="height:{{ btnH }};padding:0 12px;display:flex;align-items:center;font-weight:500;background:{{ emptyBg }};color:{{ emptyFg }};border:1px solid {{ emptyBd }}">{{ s.list.empty.action }}</span></div>
@@ -93,13 +95,14 @@
 <sc-if value="{{ pgNote }}"><div role="status" style="display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--rc-info-soft);color:var(--ui-info)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat"></span><span style="flex:1;color:var(--ui-text-toned)">{{ pgNote }}</span></div></sc-if>
 <sc-if value="{{ showTable }}">
 <div style="background:var(--ui-bg);border:1px solid var(--ui-border)">
-<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 130px 140px 44px;height:36px;align-items:center;padding:0 12px;background:var(--ui-bg-elevated);color:var(--ui-text-muted);font-weight:500"><span>Title</span><span>Status</span><span>Created</span><span style="display:flex;align-items:center;gap:4px;color:var(--ui-text-highlighted)">Updated<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat"></span></span><span></span></div>
+<div style="display:grid;grid-template-columns:{{ gridCols }};height:36px;align-items:center;padding:0 12px;background:var(--ui-bg-elevated);color:var(--ui-text-muted);font-weight:500"><span>Title</span><sc-if value="{{ authorsCol }}"><span>Authors</span></sc-if><sc-if value="{{ multi }}"><span>Site</span></sc-if><span>Status</span><span>Created</span><span style="display:flex;align-items:center;gap:4px;color:var(--ui-text-highlighted)">Updated<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat"></span></span><span></span></div>
 <sc-for list="{{ rows }}" as="a" hint-placeholder-count="6">
-<div data-act="open-{{ a.id }}" style="display:grid;grid-template-columns:minmax(0,1fr) 110px 130px 140px 44px;height:44px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border);background:{{ a.bg }};opacity:{{ a.op }};position:relative">
-<sc-if value="{{ a.skel }}"><span style="height:12px;width:60%;background:var(--ui-bg-accented)"></span><span style="width:60px;height:20px;background:var(--ui-bg-accented)"></span><span style="width:80px;height:12px;background:var(--ui-bg-accented)"></span><span style="width:80px;height:12px;background:var(--ui-bg-accented)"></span><span></span></sc-if>
+<div data-act="open-{{ a.id }}" style="display:grid;grid-template-columns:{{ gridCols }};height:44px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border);background:{{ a.bg }};opacity:{{ a.op }};position:relative">
+<sc-if value="{{ a.skel }}"><span style="height:12px;width:60%;background:var(--ui-bg-accented)"></span><sc-if value="{{ authorsCol }}"><span style="width:60px;height:24px;background:var(--ui-bg-accented)"></span></sc-if><sc-if value="{{ multi }}"><span style="width:70px;height:12px;background:var(--ui-bg-accented)"></span></sc-if><span style="width:60px;height:20px;background:var(--ui-bg-accented)"></span><span style="width:80px;height:12px;background:var(--ui-bg-accented)"></span><span style="width:80px;height:12px;background:var(--ui-bg-accented)"></span><span></span></sc-if>
 <sc-if value="{{ a.t }}">
 <span style="font-weight:500;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:12px">{{ a.t }}</span>
-<span><sc-if value="{{ a.busy }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-muted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>{{ a.busy }}</span></sc-if><sc-if value="{{ a.showOn }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span></sc-if><sc-if value="{{ a.showDraft }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></sc-if></span>
+<sc-if value="{{ authorsCol }}"><span title="{{ a.auNames }}" style="display:flex;align-items:center;min-width:0"><sc-if value="{{ a.hasAu }}"><sc-for list="{{ a.avs }}" as="v" hint-placeholder-count="2"><span style="width:24px;height:24px;margin-left:{{ v.ml }};flex-shrink:0;display:flex;align-items:center;justify-content:center;background:{{ v.bg }};color:var(--ui-text-highlighted);border:2px solid var(--ui-bg);font:600 10px/1 'IBM Plex Sans',sans-serif">{{ v.i }}</span></sc-for><sc-if value="{{ a.auMore }}"><span style="margin-left:6px;font-size:12px;color:var(--ui-text-muted)">{{ a.auMore }}</span></sc-if></sc-if><sc-if value="{{ a.noAu }}"><span aria-label="No authors" style="color:var(--ui-text-dimmed)">—</span></sc-if></span></sc-if><sc-if value="{{ multi }}"><span style="color:var(--ui-text-toned);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:12px">{{ a.site }}</span></sc-if>
+<span><sc-if value="{{ a.busy }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-muted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>{{ a.busy }}</span></sc-if><sc-if value="{{ a.showOn }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span></sc-if><sc-if value="{{ a.showDraft }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></sc-if><sc-if value="{{ a.seoSug }}"><span title="{{ a.seoTitle }}" style="margin-left:6px;height:22px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;background:var(--rc-warning-soft);color:var(--ui-warning);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/lightbulb.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/lightbulb.svg') center / contain no-repeat"></span>{{ a.seoN }}</span></sc-if><sc-if value="{{ a.seoHid }}"><span title="Hidden from search engines" style="margin-left:6px;height:22px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/eye-off.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/eye-off.svg') center / contain no-repeat"></span>Hidden</span></sc-if></span>
 <span style="color:var(--ui-text-muted)">{{ a.c }}</span><span style="color:var(--ui-text-muted)">{{ a.u }}</span>
 <span data-act="menu-{{ a.id }}" style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted);background:{{ a.menuBg }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span>
 <sc-if value="{{ a.menu }}"><div role="menu" style="position:absolute;right:12px;top:40px;z-index:2;width:220px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px"><div data-act="open-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat"></span>Edit</div><div data-act="pub-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ a.menuIcon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ a.menuIcon }}.svg') center / contain no-repeat"></span>{{ a.menuPub }}</div><div data-act="copyurl" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat"></span>Copy API URL</div><div style="height:1px;background:var(--ui-border);margin:4px 0"></div><div data-act="del-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat"></span>Delete…</div></div></sc-if>
@@ -121,7 +124,7 @@
 <sc-for list="{{ rows }}" as="a" hint-placeholder-count="6">
 <div data-act="open-{{ a.id }}" style="position:relative;display:flex;align-items:center;gap:8px;padding:12px 4px 12px 16px;border-bottom:1px solid var(--ui-border);min-height:68px;opacity:{{ a.op }}">
 <sc-if value="{{ a.skel }}"><div style="flex:1;display:flex;flex-direction:column;gap:8px"><span style="width:70%;height:14px;background:var(--ui-bg-accented)"></span><span style="width:40%;height:12px;background:var(--ui-bg-accented)"></span></div></sc-if>
-<sc-if value="{{ a.t }}"><div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:6px"><span style="font-weight:500;font-size:15px;line-height:21px;color:var(--ui-text-highlighted)">{{ a.t }}</span><div style="display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ui-text-muted)"><sc-if value="{{ a.busy }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>{{ a.busy }}</span></sc-if><sc-if value="{{ a.showOn }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span></sc-if><sc-if value="{{ a.showDraft }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></sc-if><span>Updated {{ a.u }}</span></div></div><span data-act="menu-{{ a.id }}" style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat"></span></span></sc-if><sc-if value="{{ a.menu }}"><div role="menu" style="position:absolute;right:8px;top:56px;z-index:2;width:220px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px"><div data-act="open-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat"></span>Edit</div><div data-act="pub-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ a.menuIcon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ a.menuIcon }}.svg') center / contain no-repeat"></span>{{ a.menuPub }}</div><div data-act="copyurl" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat"></span>Copy API URL</div><div style="height:1px;background:var(--ui-border);margin:4px 0"></div><div data-act="del-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat"></span>Delete…</div></div></sc-if>
+<sc-if value="{{ a.t }}"><div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:6px"><span style="font-weight:500;font-size:15px;line-height:21px;color:var(--ui-text-highlighted)">{{ a.t }}</span><div style="display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ui-text-muted)"><sc-if value="{{ a.busy }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>{{ a.busy }}</span></sc-if><sc-if value="{{ a.showOn }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span></sc-if><sc-if value="{{ a.showDraft }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></sc-if><sc-if value="{{ a.seoSug }}"><span title="{{ a.seoTitle }}" style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;background:var(--rc-warning-soft);color:var(--ui-warning);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/lightbulb.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/lightbulb.svg') center / contain no-repeat"></span>{{ a.seoN }}</span></sc-if><sc-if value="{{ a.seoHid }}"><span title="Hidden from search engines" style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/eye-off.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/eye-off.svg') center / contain no-repeat"></span>Hidden</span></sc-if><span>Updated {{ a.u }}</span></div><sc-if value="{{ authorsCol }}"><div style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ui-text-muted);min-width:0"><sc-if value="{{ a.hasAu }}"><span style="display:flex;align-items:center"><sc-for list="{{ a.avs }}" as="v" hint-placeholder-count="2"><span style="width:22px;height:22px;margin-left:{{ v.ml }};flex-shrink:0;display:flex;align-items:center;justify-content:center;background:{{ v.bg }};color:var(--ui-text-highlighted);border:2px solid var(--ui-bg);font:600 9px/1 'IBM Plex Sans',sans-serif">{{ v.i }}</span></sc-for></span></sc-if><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ a.auFirst }}</span><sc-if value="{{ multi }}"><span>· {{ a.site }}</span></sc-if></div></sc-if></div><span data-act="menu-{{ a.id }}" style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat"></span></span></sc-if><sc-if value="{{ a.menu }}"><div role="menu" style="position:absolute;right:8px;top:56px;z-index:2;width:220px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px"><div data-act="open-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat"></span>Edit<Line truncated
 </div>
 </sc-for>
 </div>
@@ -186,8 +189,9 @@
 <sc-if value="{{ desk }}">
 <div style="width:280px;flex-shrink:0;border-left:1px solid var(--ui-border);background:var(--ui-bg);padding:20px;display:flex;flex-direction:column;gap:16px">
 <span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">Details</span>
-<sc-if value="{{ s.ed.loading }}"><div style="display:flex;flex-direction:column;gap:10px"><span style="height:12px;background:var(--ui-bg-accented)"></span><span style="height:12px;background:var(--ui-bg-accented)"></span><span style="height:12px;width:60%;background:var(--ui-bg-accented)"></span></div></sc-if>
+<sc-if value="{{ s.ed.loading }}"><div style="display:flex;flex-direction:column;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--ui-border)"><div style="display:flex;align-items:center;gap:8px;min-height:24px;color:var(--ui-text-highlighted)"><span style="display:flex;transform:rotate(-90deg)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:14px">Site and authors</span></div><span style="margin-left:22px;width:40%;height:12px;background:var(--ui-bg-accented)"></span></div><div style="display:flex;flex-direction:column;gap:10px"><span style="height:12px;background:var(--ui-bg-accented)"></span><span style="height:12px;background:var(--ui-bg-accented)"></span><span style="height:12px;width:60%;background:var(--ui-bg-accented)"></span></div></sc-if>
 <sc-if value="{{ edReady }}">
+<div style="display:flex;flex-direction:column;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--ui-border)"><div data-act="meta-toggle" role="button" tabindex="0" aria-expanded="{{ metaOpen }}" aria-controls="meta-body" style="display:flex;align-items:center;gap:8px;min-height:24px;color:var(--ui-text-highlighted)"><span style="display:flex;transform:rotate({{ metaRot }})"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:14px">Site and authors</span></div><sc-if value="{{ metaOpen }}"><div id="meta-body" style="display:flex;flex-direction:column;gap:16px">{{ edMeta }}</div></sc-if><sc-if value="{{ metaClosed }}"><span style="padding-left:22px;color:var(--ui-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ metaSummary }}</span></sc-if></div><div style="display:flex;flex-direction:column;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--ui-border)"><div data-act="seo-toggle" role="button" tabindex="0" aria-expanded="{{ seoOpen }}" aria-controls="seo-body" style="display:flex;align-items:center;gap:8px;min-height:24px;color:var(--ui-text-highlighted)"><span style="display:flex;transform:rotate({{ seoRot }})"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:14px">Search and sharing</span></div><sc-if value="{{ seoOpen }}"><div id="seo-body" style="display:flex;flex-direction:column;gap:12px">{{ edSeo }}</div></sc-if><sc-if value="{{ seoClosed }}"><span style="padding-left:22px;color:{{ seoFg }};overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ seoSummary }}</span></sc-if></div>
 <div style="display:grid;grid-template-columns:auto 1fr;gap:8px 12px"><span style="color:var(--ui-text-muted)">Created</span><span>12 Mar 2026, 09:14</span><span style="color:var(--ui-text-muted)">Updated</span><span>Today, 11:02</span><span style="color:var(--ui-text-muted)">ID</span><span style="font-family:'IBM Plex Mono',monospace">12</span><span style="color:var(--ui-text-muted)">Images</span><span>{{ imgCount }}</span></div>
 <div style="display:flex;flex-direction:column;gap:6px"><span style="color:var(--ui-text-muted)">Public API URL</span><span style="display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--ui-bg-elevated);font:400 12px 'IBM Plex Mono',monospace"><span style="flex:1">/v1/article/12</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/copy.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/copy.svg') center / contain no-repeat"></span></span><span style="color:var(--ui-text-muted);font-size:12px;line-height:18px">{{ apiNote }}</span></div>
 <div style="display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:1px solid var(--ui-border)"><span style="color:var(--ui-text-muted)">Title</span><span style="font-size:12px;line-height:18px;color:var(--ui-text-toned)">Titles can't be changed after an article is created. To use a different title, create a new article and delete this one.</span></div>
@@ -251,6 +255,7 @@
 <sc-if value="{{ s.upd.link }}"><span style="align-self:flex-start;display:flex;align-items:center;gap:6px;color:var(--ui-text-highlighted);text-decoration:underline;text-underline-offset:3px;font-weight:500">{{ s.upd.link }}<span aria-hidden="true" style="display:inline-block;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/external-link.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/external-link.svg') center / contain no-repeat"></span></span></sc-if>
 </div>
 <div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:{{ cardPad }};display:flex;flex-direction:column;gap:12px"><div style="display:flex;flex-direction:column;gap:2px"><span style="font:600 15px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Media</span><span style="color:var(--ui-text-muted);text-wrap:pretty">Image sizes, cache and cleanup for your media library.</span></div><div style="display:flex;flex-direction:column"><div style="display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;border-top:1px solid var(--ui-border);color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/layers.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/layers.svg') center / contain no-repeat"></span><div style="flex:1;min-width:0;display:flex;flex-direction:column"><span style="font-weight:500">Manage image variants</span><span style="color:var(--ui-text-muted)">Named sizes requested with ?v=</span></div><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat"></span></div><div style="display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;border-top:1px solid var(--ui-border);color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/database.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/database.svg') center / contain no-repeat"></span><div style="flex:1;min-width:0;display:flex;flex-direction:column"><span style="font-weight:500">Cache usage</span><span style="color:var(--ui-text-muted)">Generated images and disk space</span></div><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat"></span></div></div></div>
+<sc-if value="{{ showSites }}"><div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:{{ cardPad }};display:flex;flex-direction:column;gap:12px"><div style="display:flex;flex-direction:column;gap:2px"><span style="font:600 15px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Publishing</span><span style="color:var(--ui-text-muted);text-wrap:pretty">Where your content is shown.</span></div><div style="display:flex;flex-direction:column"><div style="display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;border-top:1px solid var(--ui-border);color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span><div style="flex:1;min-width:0;display:flex;flex-direction:column"><span style="font-weight:500">Manage sites</span><span style="color:var(--ui-text-muted)">Base URLs, default image and robots policy</span></div><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat"></span></div></div></div></sc-if>
 <div role="region" aria-labelledby="cleanup-h" style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:{{ cardPad }};display:flex;flex-direction:column;gap:16px"><sc-if value="{{ cl.loading }}"><div aria-busy="true" style="display:flex;flex-direction:column;gap:16px"><span style="display:block;width:140px;height:16px;background:var(--ui-bg-accented)"></span><span style="display:block;width:90%;height:13px;background:var(--ui-bg-accented)"></span><span style="display:block;width:55%;height:13px;background:var(--ui-bg-accented)"></span><div style="display:flex;justify-content:space-between;align-items:center"><div style="display:flex;flex-direction:column;gap:6px"><span style="display:block;width:120px;height:13px;background:var(--ui-bg-accented)"></span><span style="display:block;width:180px;height:11px;background:var(--ui-bg-accented)"></span></div><span style="display:block;width:36px;height:20px;background:var(--ui-bg-accented)"></span></div><span style="display:block;width:60%;height:13px;background:var(--ui-bg-accented)"></span><div style="height:1px;background:var(--ui-border)"></div><div style="display:flex;justify-content:space-between;align-items:center"><div style="display:flex;flex-direction:column;gap:6px"><span style="display:block;width:100px;height:13px;background:var(--ui-bg-accented)"></span><span style="display:block;width:220px;height:11px;background:var(--ui-bg-accented)"></span></div><span style="display:block;width:140px;height:32px;background:var(--ui-bg-accented)"></span></div></div></sc-if><sc-if value="{{ cl.ready }}"><div style="display:flex;align-items:flex-start;gap:12px"><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span id="cleanup-h" tabindex="-1" style="align-self:flex-start;font:600 15px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Media cleanup</span><span style="color:var(--ui-text-muted);text-wrap:pretty">Merge identical images so your library stays tidy. Articles that use a copy are switched to the most used one.</span></div><div style="height:24px;display:flex;align-items:center;flex-shrink:0"><sc-if value="{{ cl.saving }}"><span style="display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;"></span>Saving…</span></sc-if><sc-if value="{{ cl.saved }}"><span role="status" style="display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ui-success)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;"></span>Saved</span></sc-if></div></div><sc-if value="{{ cl.ro }}"><div style="display:flex;gap:10px;padding:12px 14px;background:var(--rc-info-soft);color:var(--ui-info)"><span style="display:flex;padding-top:2px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat;"></span></span><span style="color:var(--ui-text-toned)">Only owners and admins can change this.</span></div></sc-if><div style="display:flex;flex-direction:{{ rowDir }};align-items:{{ rowAlign }};justify-content:{{ rowJust }};gap:{{ rowGap }}"><div style="display:flex;flex-direction:column;gap:2px;min-width:0"><span style="font-weight:500;color:var(--ui-text-highlighted)">Automatic purge</span><span style="font-size:12px;color:var(--ui-text-muted)">Runs in the background. Off by default.</span></div><div role="switch" aria-checked="{{ cl.on }}" style="display:flex;align-items:center;justify-content:center;width:{{ cl.swW }};height:{{ cl.swH }};flex-shrink:0;opacity:{{ cl.swOp }}"><div style="position:relative;width:36px;height:20px;border:1px solid {{ cl.swBd }};background:{{ cl.swBg }};outline:{{ cl.swRing }};outline-offset:2px"><div style="position:absolute;top:1px;left:{{ cl.knobL }};width:16px;height:16px;background:var(--ui-bg);border:1px solid {{ cl.knobBd }};box-sizing:border-box"></div></div></div></div><sc-if value="{{ cl.on }}"><div style="display:flex;flex-direction:{{ rowDir }};align-items:{{ rowAlign }};justify-content:{{ rowJust }};gap:{{ rowGap }}"><div style="display:flex;flex-direction:column;gap:2px;min-width:0"><span style="font-weight:500;color:var(--ui-text-highlighted)">Every</span><span style="font-size:12px;color:var(--ui-text-muted)">Between 1 and 365 days.</span></div><div style="display:flex;flex-direction:column;gaLine truncated
 <sc-if value="{{ rt.show }}"><div role="region" aria-labelledby="retention-h" style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:{{ cardPad }};display:flex;flex-direction:column;gap:16px"><div style="display:flex;align-items:flex-start;gap:12px"><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span id="retention-h" tabindex="-1" style="align-self:flex-start;font:600 15px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Retention</span><span style="color:var(--ui-text-muted);text-wrap:pretty">How long activity is kept, and how much log data to keep. Whichever limit is reached first removes the oldest events. Only owners can change it.</span></div><div style="height:24px;display:flex;align-items:center;flex-shrink:0"><sc-if value="{{ rt.saving }}"><span style="display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;"></span>Saving…</span></sc-if><sc-if value="{{ rt.saved }}"><span role="status" style="display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ui-success)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;"></span>Saved</span></sc-if></div></div><sc-if value="{{ rt.err }}"><div style="display:flex;gap:10px;padding:12px 14px;background:var(--rc-error-soft);color:var(--ui-error)"><span style="display:flex;padding-top:2px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat;"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:8px"><div style="display:flex;flex-direction:column;gap:2px"><span style="font-weight:600">Couldn't save the retention period</span><span style="color:var(--ui-text-toned)">Your previous setting is still in place.</span></div><span role="button" style="height:28px;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted);font-weight:500;font-size:12px;white-space:nowrap;opacity:1">Try again</span></div></div></sc-if><div style="display:flex;flex-direction:{{ rowDir }};align-items:{{ rowAlign }};justify-content:{{ rowJust }};gap:{{ rowGap }}"><div style="display:flex;flex-direction:column;gap:2px;min-width:0"><span style="font-weight:500;color:var(--ui-text-highlighted)">Keep activity for</span><span style="font-size:12px;color:var(--ui-text-muted)">{{ rt.help }}</span></div><div style="display:flex;align-items:center;width:{{ rt.selW }};min-height:{{ inH }};padding:0 12px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);font-size:{{ inF }};color:var(--ui-text-highlighted)"><span style="flex:1">{{ rt.val }}</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat;color:var(--ui-text-muted)"></span></div></div><div style="display:flex;align-items:center;gap:12px;color:var(--ui-text-muted);font-size:12px;font-weight:500"><span style="flex:1;height:1px;background:var(--ui-border)"></span><span>or</span><span style="flex:1;height:1px;background:var(--ui-border)"></span></div><div style="display:flex;flex-direction:{{ rowDir }};align-items:{{ rowAlign }};justify-content:{{ rowJust }};gap:{{ rowGap }}"><div style="display:flex;flex-direction:column;gap:2px;min-width:0"><span style="font-weight:500;color:var(--ui-text-highlighted)">Keep at most</span><span style="font-size:12px;color:var(--ui-text-muted)">{{ rt.sizeHelp }}</span></div><div style="display:flex;align-items:center;width:{{ rt.selW }};min-height:{{ inH }};padding:0 12px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);font-size:{{ inF }};color:var(--ui-text-highlighted)"><span style="flex:1">{{ rt.sizeVal }}</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat;cLine truncated
 </div>
@@ -277,6 +282,12 @@
 <div style="display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">Account</span><span style="color:var(--ui-text-muted);text-wrap:pretty">Set when your account was created. You log in with your username, even after adding a display name.</span></div>
 <div style="display:grid;grid-template-columns:{{ pfCols }};gap:14px"><div style="display:flex;flex-direction:column;gap:6px;min-width:0"><span style="font-weight:500;color:var(--ui-text-highlighted)">Username</span><div aria-disabled="true" style="height:{{ inH }};padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border);background:var(--ui-bg-elevated);color:var(--ui-text-toned);font-size:{{ inF }};cursor:not-allowed"><span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">marta</span><span style="display:flex;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/lock.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/lock.svg') center / contain no-repeat"></span></span></div></div><div style="display:flex;flex-direction:column;gap:6px;min-width:0"><span style="font-weight:500;color:var(--ui-text-highlighted)">Email</span><div aria-disabled="true" style="height:{{ inH }};padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border);background:var(--ui-bg-elevated);color:var(--ui-text-toned);font-size:{{ inF }};cursor:not-allowed"><span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">marta@renew.example</span><span style="display:flex;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/lock.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/lock.svg') center / contain no-repeat"></span></span></div></div></div>
 </div>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:{{ cardPad }};display:flex;flex-direction:column;gap:14px"><div style="display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">Author profile</span><span style="color:var(--ui-text-muted);text-wrap:pretty">Your public byline on articles. It's separate from your account.</span></div>
+<sc-if value="{{ pAu.err }}"><div role="alert" style="display:flex;gap:10px;padding:12px 14px;background:var(--rc-error-soft);color:var(--ui-error)"><span style="display:flex;padding-top:2px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat"></span></span><div style="display:flex;flex-direction:column;gap:2px"><span style="font-weight:600">Couldn't create your author profile</span><span style="color:var(--ui-text-toned)">Try again in a moment.</span></div></div></sc-if>
+<sc-if value="{{ pAu.none }}"><span style="color:var(--ui-text-toned);text-wrap:pretty">You don't have an author profile yet. Create one to be credited on your own articles.</span><div style="display:flex;flex-direction:{{ pwDir }};align-items:{{ pwAlign }};gap:12px"><span style="height:{{ btnH }};padding:0 12px;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;opacity:{{ pAu.op }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ pAu.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ pAu.icon }}.svg') center / contain no-repeat"></span>{{ pAu.btn }}</span><span style="color:var(--ui-text-muted);font-size:12px">Uses your display name, Marta Alves. You can change it afterwards.</span></div></sc-if>
+<sc-if value="{{ pAu.has }}"><div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap"><span style="width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--rc-sand);color:var(--rc-on-sand);border:1px solid var(--ui-border);font:600 14px/1 'IBM Plex Sans',sans-serif">MA</span><div style="flex:1;min-width:140px;display:flex;flex-direction:column"><span style="font-weight:500;color:var(--ui-text-highlighted)">Marta Alves</span><span style="font:400 12px/18px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">{{ pAu.slug }}</span></div><span style="height:{{ btnH }};padding:0 12px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat"></span>Edit author</span></div>
+<sc-if value="{{ pAu.slugNote }}"><div role="status" style="display:flex;gap:10px;padding:12px 14px;background:var(--rc-info-soft);color:var(--ui-info)"><span style="display:flex;padding-top:2px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat"></span></span><div style="display:flex;flex-direction:column;gap:2px"><span style="font-weight:600">Your slug is {{ pAu.slug }}</span><span style="color:var(--ui-text-toned)">marta-alves was already used by another author. You can change it in Edit author.</span></div></div></sc-if>
+<div style="display:flex;align-items:center;gap:6px;color:var(--ui-text-muted);font-size:12px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat"></span>Linked to your account. New articles start with this author.</div></sc-if></div>
 <div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:{{ cardPad }};display:flex;flex-direction:column;gap:14px">
 <div style="display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">Password</span><span style="color:var(--ui-text-muted);text-wrap:pretty">To change it, we'll email a reset link to marta@renew.example. The link works once, within 1 hour.</span></div>
 <div style="display:flex;flex-direction:{{ pwDir }};align-items:{{ pwAlign }};gap:12px"><div style="flex:1;min-width:0"><div style="display:flex;flex-direction:column;gap:6px;min-width:0"><span style="font-weight:500;color:var(--ui-text-highlighted)">Password</span><div aria-disabled="true" style="height:{{ inH }};padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border);background:var(--ui-bg-elevated);color:var(--ui-text-toned);font-size:{{ inF }};cursor:not-allowed"><span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0.12em">••••••••••••</span><span style="display:flex;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/lock.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/lock.svg') center / contain no-repeat"></span></span></div></div></div><span data-act="pf-reset" style="height:{{ inH }};padding:0 14px;display:flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted);font-weight:500;white-space:nowrap;opacity:{{ rsBtn.op }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ rsBtn.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ rsBtn.icon }}.svg') center / contain no-repeat"></span>{{ rsBtn.t }}</span></div>
@@ -357,8 +368,9 @@
 </sc-if>
 
 {{ purgeDlg }}
-<sc-if value="{{ navDrawer }}"><div data-act="mnav-close" style="position:absolute;inset:0;z-index:60;display:flex;background:var(--rc-overlay)"><div role="navigation" aria-label="Main" style="width:300px;max-width:85%;height:100%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal);display:flex;flex-direction:column;padding:12px;gap:2px"><div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:10px"><svg width="26" height="26" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="flex:1;font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">RenewCMS</span></div><sc-for list="{{ nav }}" as="n" hint-placeholder-count="3"><div data-act="nav-{{ n.key }}" style="display:flex;align-items:center;gap:10px;height:44px;padding:0 10px;background:{{ n.bg }};color:{{ n.fg }};font-weight:{{ n.fw }}"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ n.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ n.icon }}.svg') center / contain no-repeat"></span><span style="flex:1">{{ n.t }}</span><sc-if value="{{ n.chev }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ n.chev }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ n.chev }}.svg') center / contain no-repeat"></span></sc-if></div><sc-if value="{{ n.sub }}"><div style="display:flex;flex-direction:column;gap:2px;margin-left:19px;border-left:1px solid var(--ui-border)"><span style="padding:6px 10px 2px 12px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-text-muted)">Media</span><sc-for list="{{ n.subs }}" as="x" hint-placeholder-count="2"><div data-act="nav-{{ x.t }}" style="display:flex;align-items:center;gap:10px;height:44px;padding:0 10px 0 12px;background:{{ x.bg }};color:{{ x.fg }};font-weight:{{ x.fw }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ x.ic }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ x.ic }}.svg') center / contain no-repeat"></span>{{ x.t }}</div></sc-for></div></sc-if></sc-for><div style="flex:1"></div><div style="display:flex;align-items:center;gap:10px;height:44px;padding:0 6px;color:var(--ui-text-highlighted)"><span style="width:26px;height:26px;flex-shrink:0;background:var(--rc-sand);color:var(--rc-on-sand);display:flex;align-items:center;justify-content:center;font:600 11px 'IBM Plex Sans',sans-serif">{{ ini }}</span><span style="flex:1;font-weight:500">{{ who }}</span></div></div></div></sc-if>
+<sc-if value="{{ navDrawer }}"><div data-act="mnav-close" style="position:absolute;inset:0;z-index:60;display:flex;background:var(--rc-overlay)"><div role="navigation" aria-label="Main" style="width:300px;max-width:85%;height:100%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal);display:flex;flex-direction:column;padding:12px;gap:2px"><div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:10px"><svg width="26" height="26" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="flex:1;font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">RenewCMS</span></div><sc-for list="{{ nav }}" as="n" hint-placeholder-count="3"><div data-act="nav-{{ n.key }}" style="display:flex;align-items:center;gap:10px;height:44px;padding:0 10px;background:{{ n.bg }};color:{{ n.fg }};font-weight:{{ n.fw }}"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ n.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ n.icon }}.svg') center / contain no-repeat"></span><span style="flex:1">{{ n.t }}</span><sc-if value="{{ n.chev }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ n.chev }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ n.chev }}.svg') center / contain no-repeat"></span></sc-if></div><sc-if value="{{ n.sub }}"><div style="display:flex;flex-direction:column;gap:2px;margin-left:19px;border-left:1px solid var(--ui-border)"><span style="padding:6px 10px 2px 12px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-text-muted)">Media</span><sc-for list="{{ n.subs }}" as="x" hint-placeholder-count="2"><div data-act="nav-{{ x.t }}" style="display:flex;align-items:center;gap:10px;height:44px;padding:0 10px 0 12px;background:{{ x.bg }};color:{{ x.fg }};font-weight:{{ x.fw }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ x.ic }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ x.ic }}.svg') center / contain no-repeat"></span>{{ x.t }}</div></sc-for><sc-if value="{{ n.hasSites }}"><span style="padding:6px 10px 2px 12px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-text-muted)">Publishing</span></sc-if><sc-for list="{{ n.subs2 }}" as="x2" hint-placeholder-count="1"><div data-act="nav-{{ x2.t }}" style="display:flex;align-items:center;gap:10px;height:44px;padding:0 10px 0 12px;background:{{ x2.bg }};color:{{ x2.fg }};font-weight:{{ x2.fw }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ x2.ic }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ x2.ic }}.svg') center / contain no-repeat"></span>{{ x2.t }}</div></sc-for></div></sc-if></sc-for><div style="flex:1"></div><div style="display:flex;align-items:center;gap:10px;height:44px;padding:0 6px;color:var(--ui-text-highlighted)"><span style="width:26px;height:26px;flex-shrink:0;background:var(--rc-sand);color:var(--rc-on-sand);display:flex;align-items:center;justify-content:center;font:600 11px 'IBM Plex Sans',sans-serif">{{ ini }}</span><span style="flex:1;font-weight:500">{{ who }}</span></div></div></div></sc-if>
 <sc-if value="{{ lk.sheet }}"><div style="position:absolute;inset:0;z-index:55;background:var(--rc-overlay);display:flex;align-items:flex-end"><div role="dialog" aria-label="Link" style="width:100%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal);display:flex;flex-direction:column"><div style="display:flex;justify-content:center;padding-top:8px"><span style="display:block;width:36px;height:4px;background:var(--ui-border-accented)"></span></div><div style="display:flex;flex-direction:column;gap:2px;padding:12px 16px 12px;border-bottom:1px solid var(--ui-border)"><span style="font-weight:600;font-size:16px;line-height:24px;color:var(--ui-text-highlighted)">timber windows</span><span style="font:400 12px/18px 'IBM Plex Mono',monospace;color:var(--ui-text-toned);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">/articles/winter-checklist</span></div><div style="display:flex;flex-direction:column;padding:8px 0 16px"><span style="height:48px;padding:0 16px;display:flex;align-items:center;gap:12px;color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat"></span>Edit link</span><span style="height:48px;padding:0 16px;display:flex;align-items:center;gap:12px;color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/external-link.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/external-link.svg') center / contain no-repeat"></span>Open link</span><span style="height:48px;padding:0 16px;display:flex;align-items:center;gap:12px;color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/unlink.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/unlink.svg') center / contain no-repeat"></span>Remove link</span></div></div></div></sc-if>
+<sc-if value="{{ edSheet }}"><div style="position:absolute;inset:0;z-index:55;background:var(--rc-overlay);display:flex;align-items:flex-end"><div role="dialog" aria-modal="true" aria-label="Details" style="width:100%;height:92%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal);display:flex;flex-direction:column"><div style="display:flex;justify-content:center;padding-top:8px;flex-shrink:0"><span style="display:block;width:36px;height:4px;background:var(--ui-border-accented)"></span></div><div style="padding:8px 16px 0 16px;display:flex;align-items:center;gap:12px;flex-shrink:0"><span style="flex:1;font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Details</span><span data-act="modal-close" style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></div><div style="flex:1;min-height:0;overflow:hidden;padding:12px 16px 16px;display:flex;flex-direction:column;gap:16px"><div style="display:flex;flex-direction:column;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--ui-border)"><div data-act="meta-toggle" role="button" tabindex="0" aria-expanded="{{ metaOpen }}" aria-controls="meta-body" style="display:flex;align-items:center;gap:8px;min-height:24px;color:var(--ui-text-highlighted)"><span style="display:flex;transform:rotate({{ metaRot }})"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:14px">Site and authors</span></div><sc-if value="{{ metaOpen }}"><div id="meta-body" style="display:flex;flex-direction:column;gap:16px">{{ edMeta }}</div></sc-if><sc-if value="{{ metaClosed }}"><span style="padding-left:22px;color:var(--ui-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ metaSummary }}</span></sc-if></div><div style="display:flex;flex-direction:column;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--ui-border)"><div data-act="seo-toggle" role="button" tabindex="0" aria-expanded="{{ seoOpen }}" aria-controls="seo-body" style="display:flex;align-items:center;gap:8px;min-height:24px;color:var(--ui-text-highlighted)"><span style="display:flex;transform:rotate({{ seoRot }})"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:14px">Search and sharing</span></div><sc-if value="{{ seoOpen }}"><div id="seo-body" style="display:flex;flex-direction:column;gap:12px">{{ edSeo }}</div></sc-if><sc-if value="{{ seoClosed }}"><span style="padding-left:22px;color:{{ seoFg }};overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ seoSummary }}</span></sc-if></div><div style="display:grid;grid-template-columns:auto 1fr;gap:8px 12px"><span style="color:var(--ui-text-muted)">Created</span><span>12 Mar 2026, 09:14</span><span style="color:var(--ui-text-muted)">Updated</span><span>Today, 11:02</span><span style="color:var(--ui-text-muted)">ID</span><span style="font-family:'IBM Plex Mono',monospace">12</span></div><div style="display:flex;flex-direction:column;gap:6px"><span style="color:var(--ui-text-muted)">Public API URL</span><span style="padding:6px 8px;background:var(--ui-bg-elevated);font:400 12px 'IBM Plex Mono',monospace">/v1/article/12</span></div></div></div></div></sc-if>
 {{ slotOverlays }}
 <sc-if value="{{ hasToasts }}">
 <div style="position:absolute;z-index:60;display:flex;flex-direction:column;gap:8px;left:{{ tL }};right:{{ tR }};bottom:{{ tB }};width:{{ tW }}">
@@ -375,14 +387,16 @@ class Component extends DCLogic {
 		const s = this.props.s || {}
 		const m = !!this.props.mobile
 		const k = s.kind || 'home'
-		const navItems = s.role === 'user' ? [['home', 'house', 'Home'], ['articles', 'file-text', 'Articles'], ['media', 'images', 'Media'], ['activity', 'history', 'Activity']] : [['home', 'house', 'Home'], ['articles', 'file-text', 'Articles'], ['media', 'images', 'Media'], ['users', 'users', 'Users'], ['activity', 'history', 'Activity'], ['integration', 'plug', 'Integration'], ['settings', 'settings', 'Settings']]
+		const navItems = s.role === 'user' ? [['home', 'house', 'Home'], ['articles', 'file-text', 'Articles'], ['media', 'images', 'Media'], ['authors', 'feather', 'Authors'], ['activity', 'history', 'Activity']] : [['home', 'house', 'Home'], ['articles', 'file-text', 'Articles'], ['media', 'images', 'Media'], ['authors', 'feather', 'Authors'], ['users', 'users', 'Users'], ['activity', 'history', 'Activity'], ['integration', 'plug', 'Integration'], ['settings', 'settings', 'Settings']]
 		const cr0 = s.crumbs || [], setOpen = s.nav === 'settings' || !!s.sideOpen, parentOn = (key) => s.nav === key && (key !== 'settings' || cr0.length <= 1)
-		const nav = navItems.map(([key, icon, t]) => { const on = parentOn(key), open = key === 'settings' && setOpen; return { key, icon, t, bg: on ? 'var(--rc-sand)' : 'transparent', badge: key === 'settings' && !!s.navBadge, fg: on ? 'var(--rc-on-sand)' : open ? 'var(--ui-text-highlighted)' : 'var(--ui-text-toned)', fw: on || open ? 500 : 400, chev: key === 'settings' ? (open ? 'chevron-down' : 'chevron-right') : '', chevML: key === 'settings' && s.navBadge ? '8px' : 'auto', sub: open, subs: ['Variants', 'Cache'].map(x => { const o = cr0[cr0.length - 1] === x; return { t: x, ic: x === 'Variants' ? 'layers' : 'database', bg: o ? 'var(--rc-sand)' : 'transparent', fg: o ? 'var(--rc-on-sand)' : 'var(--ui-text-toned)', fw: o ? 500 : 400 } }) } })
+		const nav = navItems.map(([key, icon, t]) => { const on = parentOn(key), open = key === 'settings' && setOpen; return { key, icon, t, bg: on ? 'var(--rc-sand)' : 'transparent', badge: key === 'settings' && !!s.navBadge, fg: on ? 'var(--rc-on-sand)' : open ? 'var(--ui-text-highlighted)' : 'var(--ui-text-toned)', fw: on || open ? 500 : 400, chev: key === 'settings' ? (open ? 'chevron-down' : 'chevron-right') : '', chevML: key === 'settings' && s.navBadge ? '8px' : 'auto', sub: open, hasSites: !s.role || s.role === 'owner', subs2: (!s.role || s.role === 'owner') ? (() => { const o = cr0[cr0.length - 1] === 'Sites'; return [{ t: 'Sites', ic: 'globe', bg: o ? 'var(--rc-sand)' : 'transparent', fg: o ? 'var(--rc-on-sand)' : 'var(--ui-text-toned)', fw: o ? 500 : 400 }] })() : [], subs: ['Variants', 'Cache'].map(x => { const o = cr0[cr0.length - 1] === x; return { t: x, ic: x === 'Variants' ? 'layers' : 'database', bg: o ? 'var(--rc-sand)' : 'transparent', fg: o ? 'var(--rc-on-sand)' : 'var(--ui-text-toned)', fw: o ? 500 : 400 } }) } })
 		const crumbs = (s.crumbs || []).map((t, i, a) => ({ t, sep: i > 0, fg: i === a.length - 1 ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)', fw: i === a.length - 1 ? 500 : 400 }))
 		const L = s.list || {}
 		const counts = L.counts || [6, 4, 2]
 		const tabs = ['All', 'Online', 'Drafts'].map((t, i) => { const on = (L.tab || 0) === i; return { t, n: counts[i], line: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-text-highlighted)' : 'var(--ui-text-toned)', fw: on ? 500 : 400 } })
-		const rows = (L.loading ? Array.from({ length: 6 }, () => ({ skel: true })) : (L.rows || [])).map(a => ({ ...a, showOn: !a.busy && a.on, showDraft: !a.busy && a.t && !a.on, op: a.busy ? '0.55' : '1', bg: a.menu ? 'var(--ui-bg-elevated)' : 'transparent', menuBg: a.menu ? 'var(--ui-bg-accented)' : 'transparent', menuPub: a.on ? 'Unpublish' : 'Publish', menuIcon: a.on ? 'globe-lock' : 'globe' }))
+		const AVT = ['var(--rc-sand)', 'var(--ui-bg-accented)', 'var(--ui-bg-elevated)'], ini2 = n => n.replace(/^Dr\.\s*/, '').split(/\s+/).slice(0, 2).map(x => x[0]).join('').toUpperCase()
+		const auInfo = a => { if (a.skel) return {}; const au = a.au || []; return { hasAu: au.length > 0, noAu: au.length === 0, avs: au.slice(0, 3).map((n, i) => ({ i: ini2(n), bg: AVT[(n.length + i) % 3], ml: i ? '-6px' : '0' })), auMore: au.length > 3 ? '+' + (au.length - 3) : '', auNames: au.join(', '), auFirst: au.length ? au[0] + (au.length > 1 ? ' +' + (au.length - 1) : '') : 'No authors', site: a.site || '' } }
+		const rows = (L.loading ? Array.from({ length: 6 }, () => ({ skel: true })) : (L.rows || [])).map(a => ({ ...a, seoSug: a.seo > 0, seoN: a.seo, seoTitle: a.seo + (a.seo === 1 ? ' suggestion' : ' suggestions'), seoHid: a.seo === 'hidden', showOn: !a.busy && a.on, showDraft: !a.busy && a.t && !a.on, op: a.busy ? '0.55' : '1', bg: a.menu ? 'var(--ui-bg-elevated)' : 'transparent', menuBg: a.menu ? 'var(--ui-bg-accented)' : 'transparent', menuPub: a.on ? 'Unpublish' : 'Publish', menuIcon: a.on ? 'globe-lock' : 'globe', ...auInfo(a) }))
 		const e = s.ed || {}
 		const saveMap = { clean: ['check', 'Saved', 'var(--ui-text-muted)'], dirty: ['circle-dot', 'Unsaved changes', 'var(--ui-warning)'], saving: ['loader-circle', 'Saving…', 'var(--ui-text-muted)'], saved: ['check', 'Saved at 11:02', 'var(--ui-text-muted)'], error: ['circle-alert', 'Save failed', 'var(--ui-error)'], offline: ['wifi-off', 'Waiting for connection', 'var(--ui-text-muted)'] }
 		const sv = saveMap[e.save || 'saved']
@@ -522,7 +536,7 @@ class Component extends DCLogic {
 		const edReady = k === 'editor' && !e.loading && !e.notfound
 		const edTitle = e.title || 'How we price a bathroom renovation'
 		return {
-			lk, tbOverflow: m ? 'hidden' : 'visible', tbShift: m ? -(LK.shift || 0) + 'px' : '0px', tbFadeL: m && !!LK.shift, tbFadeR: m && !LK.end, act, cl, rt, purgeDlg, rowDir: m ? 'column' : 'row', rowAlign: m ? 'stretch' : 'flex-start', rowJust: m ? 'flex-start' : 'space-between', rowGap: m ? '12px' : '16px', setScroll: -(s.scrollY || 0) + 'px', offText: s.offText || 'You\'re offline. You can keep writing, but saving and publishing will wait until you\'re back online.', cr, s, nav, crumbs, who, ini, pf, dn, dnSave, rsNote, rsBtn,
+			lk, edSeo: this.props.edSeo || null, seoOpen: !!this.props.edSeo, seoClosed: !this.props.edSeo, seoRot: this.props.edSeo ? '0deg' : '-90deg', seoSummary: e.seoSummary || 'Ready', seoFg: /suggest/.test(e.seoSummary || '') ? 'var(--ui-warning)' : 'var(--ui-text-muted)', naOn: !!L.needs, naBg: L.needs ? 'var(--rc-sand)' : 'var(--ui-bg)', naFg: L.needs ? 'var(--rc-on-sand)' : 'var(--ui-text-toned)', naBd: L.needs ? 'var(--rc-sand)' : 'var(--ui-border-accented)', naFw: L.needs ? 500 : 400, naN: L.needsN || 3, edMeta: this.props.edMeta || null, metaOpen: !!this.props.edMeta, metaClosed: !this.props.edMeta, metaRot: this.props.edMeta ? '0deg' : '-90deg', metaSummary: e.metaSummary || 'Inès Duarte', edSheet: m && !!e.sheet, pAu: (() => { const q = s.pa || {}; return { none: q.k !== 'has', has: q.k === 'has', err: !!q.err, slug: q.slug || 'marta-alves', slugNote: !!q.slug, btn: q.loading ? 'Creating…' : 'Create my author profile', icon: q.loading ? 'loader-circle' : 'feather', op: q.loading ? 0.7 : 1 } })(), showSites: !s.role || s.role === 'owner', authorsCol: L.authors !== false, multi: !!L.multi, multiDesk: !m && !!L.multi, multiMob: m && !!L.multi, gridCols: (L.authors !== false ? 'minmax(0,1fr) 104px ' : 'minmax(0,1fr) ') + (L.multi ? '130px ' : '') + '110px 130px 140px 44px', sfText: L.site || 'All sites', sfFg: L.site ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)', sfMenu: !!L.siteMenu, sfOpts: ['All sites', 'Renew', 'Journal', 'Projects', 'Archive'].map(x => { const on = (L.site || 'All sites') === x; return { t: x, on, op: on ? 1 : 0, bg: on ? 'var(--ui-bg-elevated)' : 'transparent' } }), tbOverflow: m ? 'hidden' : 'visible', tbShift: m ? -(LK.shift || 0) + 'px' : '0px', tbFadeL: m && !!LK.shift, tbFadeR: m && !LK.end, act, cl, rt, purgeDlg, rowDir: m ? 'column' : 'row', rowAlign: m ? 'stretch' : 'flex-start', rowJust: m ? 'flex-start' : 'space-between', rowGap: m ? '12px' : '16px', setScroll: -(s.scrollY || 0) + 'px', offText: s.offText || 'You\'re offline. You can keep writing, but saving and publishing will wait until you\'re back online.', cr, s, nav, crumbs, who, ini, pf, dn, dnSave, rsNote, rsBtn,
 			langSeg: [['en','English'],['fr','Français']].map(([k,tt])=>{const on=(s.lang||'en')===k;return {act:'lang-'+k,code:k,t:tt,on,op:on?1:0}}), themeSeg: [['system','monitor','System'],['light','sun','Light'],['dark','moon','Dark']].map(([k,icon,tt])=>{const on=(s.mode||'light')===k;return {act:'theme-'+k,icon,t:tt,on,op:on?1:0}}), menuOpen: !!s.userMenu, deskMenu: !m && !!s.userMenu, mobMenu: m && !!s.userMenu, pfItemBg: 'var(--ui-bg-elevated)',
 			chipBg: s.userMenu || s.nav === 'profile' ? 'var(--rc-sand)' : 'transparent', chipFg: s.userMenu || s.nav === 'profile' ? 'var(--rc-on-sand)' : 'var(--ui-text-highlighted)',
 			isSettings: k === 'settings', isProfile: k === 'profile', pfLoading: k === 'profile' && !!pf.loading, pfReady: k === 'profile' && !pf.loading,

docs/design/source/DirectoryFrame.dc.html

@@ -0,0 +1,438 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<dc-import name="AppFrame" s="{{ shell }}" mobile="{{ mob }}" slot-body="{{ main }}" slot-overlays="{{ ov }}" ed-meta="{{ edMeta }}" ed-seo="{{ edSeo }}" hint-size="100%,100%"></dc-import>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1440,&quot;height&quot;:900},&quot;s&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;object&quot;},&quot;mobile&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;boolean&quot;}}">
+class Component extends DCLogic {
+	renderVals() {
+		const s = this.props.s || {}, m = !!this.props.mobile
+		const P = t => Object.fromEntries(t.split(';').filter(x => x.trim()).map(x => { const i = x.indexOf(':'); const k = x.slice(0, i).trim(); return [k.startsWith('--') ? k : k.replace(/-([a-z])/g, (_, c) => c.toUpperCase()), x.slice(i + 1).trim()] }))
+		const h = React.createElement
+		const D = (t, ...c) => h('div', { style: P(t) }, ...c)
+		const S = (t, ...c) => h('span', { style: P(t) }, ...c)
+		const I = (n, z = 16, t = '') => h('span', { 'aria-hidden': 'true', style: { display: 'inline-block', flexShrink: 0, width: z, height: z, backgroundColor: 'currentColor', WebkitMask: 'url(https://api.iconify.design/lucide/' + n + '.svg) center / contain no-repeat', mask: 'url(https://api.iconify.design/lucide/' + n + '.svg) center / contain no-repeat', ...(t ? P(t) : {}) } })
+		const bh = m ? 44 : 32, ih = m ? 44 : 40, fs = m ? 16 : 13
+		const B = (label, o = {}) => {
+			const k = o.k || 'outline'
+			const bg = k === 'primary' ? 'var(--ui-primary)' : k === 'danger' ? 'var(--ui-error)' : 'var(--ui-bg)'
+			const fg = k === 'primary' || k === 'danger' ? 'var(--ui-bg)' : k === 'del' ? 'var(--ui-error)' : 'var(--ui-text-highlighted)'
+			const bd = k === 'primary' || k === 'danger' ? bg : 'var(--ui-border-accented)'
+			return S('height:' + (o.h || bh) + 'px;padding:0 ' + (o.px || 12) + 'px;display:flex;align-items:center;justify-content:center;gap:6px;background:' + bg + ';color:' + fg + ';border:1px solid ' + bd + ';font-weight:500;font-size:' + (o.fs || 13) + 'px;white-space:nowrap;opacity:' + (o.dis ? 0.4 : 1) + ';' + (o.full ? 'flex:1;' : '') + (o.ring ? 'outline:2px solid var(--ui-primary);outline-offset:2px;' : ''), o.icon && I(o.icon, o.z || 16), label)
+		}
+		const Alert = (tone, icon, title, text, action) => D('display:flex;gap:10px;padding:12px 14px;background:var(--rc-' + tone + '-soft);color:var(--ui-' + tone + ')', S('display:flex;padding-top:2px', I(icon)), D('flex:1;display:flex;flex-direction:column;gap:8px', D('display:flex;flex-direction:column;gap:2px', S('font-weight:600', title), text && S('color:var(--ui-text-toned)', text)), action && B(action, { icon: 'rotate-cw', z: 14, h: m ? 44 : 28, fs: 12, px: 10 })))
+		const Empty = (icon, title, text, action, primary) => D('background:var(--ui-bg);border:1px solid var(--ui-border);padding:56px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center', S('width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned)', I(icon, 20)), S('font-weight:600;font-size:15px;color:var(--ui-text-highlighted)', title), S('color:var(--ui-text-muted);max-width:340px;text-wrap:pretty', text), action && B(action, { k: primary ? 'primary' : 'outline', icon: primary ? 'plus' : null, px: 16 }))
+		const Note = t => S('align-self:flex-start;min-height:20px;padding:1px 6px;display:inline-flex;align-items:center;border:1px dashed var(--ui-border-accented);color:var(--ui-text-toned);font:500 11px/16px \'IBM Plex Mono\',monospace', t)
+		const BG = { def: ['background:var(--rc-sand);color:var(--rc-on-sand)', 'star'], linked: ['background:var(--rc-info-soft);color:var(--ui-info)', 'link'], guest: ['border:1px solid var(--ui-border-accented);color:var(--ui-text-toned)', 'user'], noidx: ['background:var(--rc-warning-soft);color:var(--ui-warning)', 'eye-off'], prim: ['border:1px solid var(--ui-border-accented);color:var(--ui-text-toned)'] }
+		const Bd = (t, k, sz = 20) => S('height:' + sz + 'px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;white-space:nowrap;flex-shrink:0;' + BG[k][0], BG[k][1] && I(BG[k][1], 12), t)
+		const mono = 'font-family:\'IBM Plex Mono\',monospace;'
+		// ---------- data
+		const SITES = [
+			{ n: 'Renew', key: 'renew', url: 'https://renew.example', c: 268, def: true, robots: 'Index', loc: 'en', img: 'north-wall.jpg' },
+			{ n: 'Journal', key: 'journal', url: 'https://journal.renew.example', c: 38, robots: 'Index', loc: '', img: null },
+			{ n: 'Projects', key: 'projects', url: 'https://projects.renew.example', c: 6, robots: 'Noindex', loc: 'fr', img: 'kitchen-after.webp' },
+			{ n: 'Archive', key: 'archive', url: 'https://archive.renew.example', c: 0, robots: 'Noindex', loc: '', img: null }
+		]
+		const AUTH = [
+			{ name: 'Inès Duarte', slug: 'ines-duarte', user: 'ines.duarte@renew.example', c: 9, img: true, web: 'https://ines-duarte.example', bio: 'Site manager and restoration carpenter. Writes about timber and joinery.' },
+			{ name: 'Jonas Pereira', slug: 'jonas-pereira', user: 'jonas@renew.example', c: 6, img: true, bio: 'Heat pumps, insulation and the numbers behind them.' },
+			{ name: 'Camille Roche', slug: 'camille-roche', c: 3, bio: 'Freelance writer on lime and stone.' },
+			{ name: 'Paul Huber', slug: 'paul-huber', c: 2, img: true, bio: '' },
+			{ name: 'Léa Fontaine', slug: 'lea-fontaine', c: 0, bio: '' },
+			{ name: 'Dr. Alexandra Konstantinopoulou-Whitfield', slug: 'dr-alexandra-konstantinopoulou-whitfield', c: 1, bio: 'Conservation architect.' }
+		]
+		const AV = n => AUTH.find(a => a.name === n) || { name: n, slug: n.toLowerCase().replace(/[^a-z0-9]+/g, '-'), c: 0 }
+		const TONE = ['var(--rc-sand)', 'var(--ui-bg-accented)', 'var(--ui-bg-elevated)']
+		const ini = n => n.replace(/^Dr\.\s*/, '').split(/\s+/).slice(0, 2).map(x => x[0]).join('').toUpperCase()
+		const Av = (a, z = 32, ring) => S('width:' + z + 'px;height:' + z + 'px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:' + (a.img ? 'repeating-linear-gradient(135deg, var(--ui-border) 0 1px, transparent 1px 8px), ' : '') + TONE[a.name.length % 3] + ';color:var(--ui-text-highlighted);border:' + (ring ? '2px solid var(--ui-bg)' : '1px solid var(--ui-border)') + ';font:600 ' + Math.round(z * 0.36) + 'px/1 \'IBM Plex Sans\',sans-serif', ini(a.name))
+		const pl = (n, w) => n === 0 ? 'No ' + w + 's' : n + ' ' + w + (n === 1 ? '' : 's')
+		const host = u => u.replace('https://', '')
+		// ---------- fields
+		const F = (lab, val, o = {}) => D('display:flex;flex-direction:column;gap:6px;min-width:0', (lab || o.count) && D('display:flex;justify-content:space-between;gap:8px', S('font-weight:500;color:var(--ui-text-highlighted)', lab, o.opt && S('font-weight:400;color:var(--ui-text-muted)', ' (optional)')), o.count && S('font:400 12px \'IBM Plex Mono\',monospace;color:' + (o.countErr ? 'var(--ui-error)' : 'var(--ui-text-muted)'), o.count)),
+			D('display:flex;align-items:' + (o.area ? 'flex-start' : 'center') + ';min-height:' + (o.area ? (m ? 120 : 96) : ih) + 'px;border:1px solid ' + (o.err ? 'var(--ui-error)' : o.focus ? 'var(--ui-primary)' : 'var(--ui-border-accented)') + ';' + (o.err ? 'box-shadow:inset 0 0 0 1px var(--ui-error);' : o.focus ? 'box-shadow:inset 0 0 0 1px var(--ui-primary);' : '') + 'background:' + (o.dis ? 'var(--ui-bg-elevated)' : 'var(--ui-bg)') + ';font-size:' + fs + 'px', o.pre, S('flex:1;min-width:0;padding:' + (o.area ? '8px 10px' : '0 10px') + ';color:' + (o.val === false ? 'var(--ui-text-muted)' : 'var(--ui-text-highlighted)') + ';' + (o.area ? '' : 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap;') + (o.mono ? mono + 'font-size:' + (m ? 14 : 12) + 'px;' : ''), val), o.sel && I('chevron-down', 14, 'margin-right:10px;color:var(--ui-text-muted)'), o.suffix),
+			o.err && S('display:flex;gap:6px;align-items:flex-start;color:var(--ui-error);font-size:12px;line-height:18px', I('circle-alert', 14, 'margin-top:2px'), o.err), o.help && S('color:var(--ui-text-muted);font-size:12px;line-height:18px;text-wrap:pretty', o.help))
+		const Link = (t, icon) => S('display:inline-flex;align-items:center;gap:4px;min-height:' + (m ? 44 : 20) + 'px;color:var(--ui-text-highlighted);text-decoration:underline;text-underline-offset:3px;font-size:12px;font-weight:500', icon && I(icon, 12), t)
+		const Slug = (lab, o) => {
+			const mode = o.mode || 'empty'
+			if (mode === 'saved') return F(lab, o.value, { mono: true, dis: !!o.locked, help: o.locked ? o.lockHelp : o.help2, suffix: o.locked && I('lock', 14, 'margin-right:10px;color:var(--ui-text-muted)') })
+			if (mode === 'empty') return F(lab, o.emptyText || 'Generated from the name', { val: false, dis: true, mono: true, help: o.help })
+			if (mode === 'auto') return F(lab, o.value, { mono: true, dis: true, help: o.help, suffix: S('display:flex;align-items:center;gap:6px;padding:0 4px', S('height:20px;padding:0 6px;display:inline-flex;align-items:center;border:1px dashed var(--ui-border-accented);font:500 11px \'IBM Plex Mono\',monospace;color:var(--ui-text-toned)', 'Auto'), S('width:' + (m ? 44 : 28) + 'px;height:' + (m ? 44 : 28) + 'px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-highlighted)', I('pencil', 14))) })
+			return D('display:flex;flex-direction:column;gap:6px', F(lab, o.value, { mono: true, focus: !o.err, err: o.err, help: o.err ? null : o.help2 || o.help }), o.suggest && D('display:flex;align-items:center;gap:8px;flex-wrap:wrap', B('Use ' + o.suggest, { h: m ? 44 : 28, fs: 12, px: 10, icon: 'wand-sparkles', z: 12 })), mode === 'manual' && Link(o.reset || 'Reset to match the name', 'rotate-ccw'))
+		}
+		const Seg = (opts, on) => D('display:flex;border:1px solid var(--ui-border-accented);width:100%', ...opts.map(([k, t]) => S('flex:1;height:' + (m ? 44 : 32) + 'px;display:flex;align-items:center;justify-content:center;font-weight:' + (on === k ? 500 : 400) + ';background:' + (on === k ? 'var(--rc-sand)' : 'var(--ui-bg)') + ';color:' + (on === k ? 'var(--rc-on-sand)' : 'var(--ui-text-toned)') + ';font-size:' + (m ? 14 : 13) + 'px', t)))
+		const Sw = (on, lab, help, dis) => D('display:flex;gap:12px;align-items:flex-start;opacity:' + (dis ? 0.6 : 1), S('width:32px;height:18px;margin-top:2px;padding:2px;display:flex;flex-shrink:0;justify-content:' + (on ? 'flex-end' : 'flex-start') + ';background:' + (on ? 'var(--ui-primary)' : 'var(--ui-bg-accented)'), S('width:14px;height:14px;background:var(--ui-bg)')), D('display:flex;flex-direction:column;gap:2px', S('font-weight:500;color:var(--ui-text-highlighted)', lab), help && S('color:var(--ui-text-muted);font-size:12px;line-height:18px;text-wrap:pretty', help)))
+		const Opts = (items, on, hdr) => D('border:1px solid var(--ui-border);background:var(--ui-bg);box-shadow:var(--rc-shadow-pop);padding:4px', hdr, ...items.map(([t, sub, k, av]) => D('min-height:' + (m ? 48 : 36) + 'px;padding:4px 8px;display:flex;align-items:center;gap:8px;background:' + (on === t ? 'var(--ui-bg-elevated)' : 'transparent') + ';color:var(--ui-text-highlighted)', av, D('flex:1;min-width:0;display:flex;flex-direction:column', S('overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500', t), sub && S('font-size:12px;color:var(--ui-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', sub)), on === t && I('check', 14))))
+		const Pick = (img, lab, help, o = {}) => D('display:flex;flex-direction:column;gap:6px', S('font-weight:500;color:var(--ui-text-highlighted)', lab, S('font-weight:400;color:var(--ui-text-muted)', ' (optional)')),
+			D('display:flex;align-items:center;gap:12px', o.av ? Av(o.av, 64) : S('width:' + (img ? 96 : 96) + 'px;aspect-ratio:1.91/1;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px ' + (img ? 'solid' : 'dashed') + ' var(--ui-border-accented);background:' + (img ? 'repeating-linear-gradient(135deg, var(--ui-border) 0 1px, transparent 1px 10px), var(--rc-sand)' : 'var(--ui-bg)') + ';color:var(--ui-text-muted)', I('image', 18)),
+				D('flex:1;min-width:0;display:flex;flex-direction:column;gap:6px', img && S('font-size:12px;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;' + mono, img), D('display:flex;gap:8px;flex-wrap:wrap', B(img ? 'Change image' : 'Choose image', { icon: 'images', h: m ? 44 : 28, fs: 12, px: 10 }), img && B('Remove', { h: m ? 44 : 28, fs: 12, px: 10 })))),
+			help && S('color:var(--ui-text-muted);font-size:12px;line-height:18px', help))
+		// ---------- overlays
+		const Shell = (o, body) => D('position:absolute;inset:0;z-index:' + (o.z || 50) + ';background:var(--rc-overlay);display:flex;align-items:' + (m ? 'flex-end' : 'flex-start') + ';justify-content:center;padding:' + (m ? '0' : (o.top || 140) + 'px 16px 16px'),
+			D('width:' + (m ? '100%' : (o.w || 460) + 'px') + ';max-height:100%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal);display:flex;flex-direction:column', m && D('display:flex;justify-content:center;padding-top:8px;flex-shrink:0', S('display:block;width:36px;height:4px;background:var(--ui-border-accented)')),
+				D('padding:20px 24px 0;display:flex;align-items:flex-start;gap:12px', D('flex:1;display:flex;flex-direction:column;gap:4px', S('font:600 16px/24px \'IBM Plex Sans\',sans-serif;color:var(--ui-text-highlighted)', o.title), o.desc && S('color:var(--ui-text-muted);text-wrap:pretty', o.desc)), o.close && S('width:' + (m ? 44 : 28) + 'px;height:' + (m ? 44 : 28) + 'px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)', I('x'))),
+				D('padding:20px 24px 0;display:flex;flex-direction:column;gap:16px;min-height:0;overflow:hidden', body),
+				D('padding:20px 24px;display:flex;flex-direction:' + (m ? 'column-reverse' : 'row') + ';justify-content:flex-end;gap:8px;flex-shrink:0', o.cancel && B(o.cancel, { dis: o.loading }), o.confirm && S('height:' + bh + 'px;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:6px;background:' + (o.tone === 'danger' ? 'var(--ui-error)' : 'var(--ui-primary)') + ';color:var(--ui-bg);font-weight:500;white-space:nowrap;opacity:' + (o.cdis ? 0.4 : 1), o.loading && I('loader-circle'), o.confirm))))
+		const Panel = (o, body, ...pv) => D('position:absolute;inset:0;z-index:' + (o.z || 40) + ';display:flex;justify-content:' + (m ? 'center' : 'flex-end') + ';align-items:' + (m ? 'flex-end' : 'stretch') + ';background:var(--rc-overlay)',
+			D('width:' + (m ? '100%' : (o.w || 480) + 'px') + ';height:' + (m ? '92%' : '100%') + ';background:var(--ui-bg);box-shadow:var(--rc-shadow-modal);display:flex;flex-direction:column', m && D('display:flex;justify-content:center;padding-top:8px;flex-shrink:0', S('display:block;width:36px;height:4px;background:var(--ui-border-accented)')),
+				D('flex-shrink:0;display:flex;align-items:center;gap:12px;padding:' + (m ? '4px 6px 4px 16px' : '0 12px 0 20px') + ';height:56px;border-bottom:1px solid var(--ui-border)', S('flex:1;min-width:0;font:600 16px/24px \'IBM Plex Sans\',sans-serif;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', o.title), S('width:' + (m ? 44 : 28) + 'px;height:' + (m ? 44 : 28) + 'px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)', I('x'))),
+				D('flex:1;min-height:0;overflow:hidden;padding:' + (m ? 16 : 20) + 'px;display:flex;flex-direction:column;gap:18px', o.notice && Alert('error', 'circle-x', o.notice), body, ...pv),
+				D('flex-shrink:0;padding:' + (m ? '12px 16px' : '12px 20px') + ';border-top:1px solid var(--ui-border);display:flex;flex-direction:' + (m ? 'column-reverse' : 'row') + ';justify-content:' + (o.ro ? 'flex-end' : 'space-between') + ';gap:8px', B(o.ro ? 'Close' : 'Cancel', { dis: o.saving }), !o.ro && S('height:' + bh + 'px;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;white-space:nowrap;opacity:' + (o.cdis ? 0.4 : 1), o.saving && I('loader-circle'), o.confirm))))
+		const Toasts = () => D('position:absolute;z-index:60;display:flex;flex-direction:column;gap:8px;' + (m ? 'left:16px;right:16px;bottom:16px' : 'right:24px;bottom:24px;width:356px'), ...s.toasts.map(t => D('display:flex;gap:10px;padding:12px 14px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop)', S('margin-top:2px;display:flex;color:var(--ui-' + t[0] + ')', I(t[1])), D('flex:1;display:flex;flex-direction:column;gap:6px', D('display:flex;flex-direction:column;gap:2px', S('font-weight:600;color:var(--ui-text-highlighted)', t[2]), S('color:var(--ui-text-muted)', t[3])), t[4] && B(t[4], { icon: 'rotate-cw', z: 14, h: m ? 44 : 28, fs: 12, px: 10 })), I('x'))))
+		// media picker (shared by site image and author avatar)
+		const IMGS = ['north-wall.jpg', 'kitchen-after.webp', 'kitchen-before.webp', 'logo-renew.svg', 'window-frame.jpg', 'lime-plaster.jpg', 'floorboards.jpg', 'bathroom-tiles.png']
+		const Picker = pk => {
+			const cols = m ? 3 : 4
+			return Shell({ title: pk.title, desc: pk.desc, close: true, w: 640, top: 40, z: pk.z || 55, cancel: 'Cancel', confirm: 'Use image', cdis: pk.sel == null }, D('display:flex;flex-direction:column;gap:12px',
+				D('display:flex;gap:20px;border-bottom:1px solid var(--ui-border)', ...['Upload', 'Library'].map(t => S('height:' + (m ? 44 : 36) + 'px;display:flex;align-items:center;gap:6px;border-bottom:2px solid ' + (t === 'Library' ? 'var(--ui-primary)' : 'transparent') + ';margin-bottom:-1px;font-weight:' + (t === 'Library' ? 500 : 400) + ';color:' + (t === 'Library' ? 'var(--ui-text-highlighted)' : 'var(--ui-text-toned)'), I(t === 'Upload' ? 'upload' : 'images', 14), t))),
+				D('height:' + ih + 'px;padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);color:var(--ui-text-muted);font-size:' + fs + 'px', I('search', 14), 'Search by filename'),
+				D('display:grid;grid-template-columns:repeat(' + cols + ',minmax(0,1fr));gap:10px', ...IMGS.slice(0, m ? 6 : 8).map((n, i) => D('display:flex;flex-direction:column;gap:4px', S('position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:' + (pk.sq ? '1/1' : '4/3') + ';background:repeating-linear-gradient(135deg, var(--ui-border) 0 1px, transparent 1px 12px), ' + TONE[i % 3] + ';color:var(--ui-text-muted);border:1px solid ' + (pk.sel === i ? 'var(--ui-primary)' : 'var(--ui-border)') + ';' + (pk.sel === i ? 'box-shadow:inset 0 0 0 1px var(--ui-primary);' : ''), I('image', 18), pk.sel === i && S('position:absolute;top:4px;right:4px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:var(--ui-primary);color:var(--ui-bg)', I('check', 14))), S('font-size:12px;color:var(--ui-text-toned);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', n)))),
+				pk.sq && S('color:var(--ui-text-muted);font-size:12px', 'Shown as a square. Choose an image with the face or logo near the middle.')))
+		}
+		// ---------- list parts
+		const menuItem = (icon, t, o = {}) => D('min-height:' + (m ? 48 : 32) + 'px;padding:' + (m ? '0 16px' : '0 8px') + ';display:flex;align-items:center;gap:' + (m ? 12 : 8) + 'px;color:' + (o.err ? 'var(--ui-error)' : 'var(--ui-text-highlighted)') + ';opacity:' + (o.dis ? 0.4 : 1) + ';background:' + (o.hv ? 'var(--ui-bg-elevated)' : 'transparent') + ';font-size:' + (m ? 15 : 13) + 'px', I(icon, m ? 18 : 16), t)
+		const sep = D('height:1px;background:var(--ui-border);margin:4px 0')
+		const MenuBox = (items, title, desc) => m ?
+			D('position:absolute;inset:0;z-index:45;background:var(--rc-overlay);display:flex;align-items:flex-end', D('width:100%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal);padding:8px 0 24px', D('display:flex;justify-content:center;padding-bottom:8px', S('display:block;width:36px;height:4px;background:var(--ui-border-accented)')), D('display:flex;align-items:center;padding:0 6px 0 16px;min-height:44px', S('flex:1;font-weight:600;font-size:15px;color:var(--ui-text-highlighted)', title), S('width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)', I('x'))), ...items, desc && S('display:block;padding:4px 16px 0 46px;color:var(--ui-text-muted);font-size:12px;line-height:18px', desc))) :
+			D('position:absolute;right:12px;top:44px;z-index:5;width:220px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px', ...items)
+		const Dots = () => S('width:' + (m ? 44 : 32) + 'px;height:' + (m ? 44 : 32) + 'px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)', s.ro ? I('chevron-right', 14) : I(m ? 'ellipsis-vertical' : 'ellipsis', m ? 18 : 16))
+		const ph = 'Search by name or slug', q = s.q
+		const SearchBox = (ph2 = ph) => D('height:' + bh + 'px;' + (m ? '' : 'width:280px;') + 'padding:0 4px 0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:' + (q ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)') + (m ? ';font-size:16px' : ''), I('search', 14), S('flex:1', q || ph2), q && S('width:' + (m ? 36 : 24) + 'px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)', I('x', 14)))
+		const Head = (title, desc, btn) => D('display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap', D('flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px', S('font:600 20px/28px \'IBM Plex Sans\',sans-serif;color:var(--ui-text-highlighted)', title), S('color:var(--ui-text-muted)', desc)), !m && btn && B(btn, { k: 'primary', icon: 'plus' }))
+		const TH = (cols, labels) => D('display:grid;grid-template-columns:' + cols + ';gap:12px;height:36px;align-items:center;padding:0 12px;background:var(--ui-bg-elevated);color:var(--ui-text-muted);font-weight:500', ...labels.map(l => S('', l)))
+		const Skel = n => D('background:var(--ui-bg);border:1px solid var(--ui-border);' + (m ? 'margin:0 -16px;border-left:0;border-right:0' : ''), ...Array.from({ length: n }, () => D('display:flex;align-items:center;gap:12px;height:' + (m ? 72 : 52) + 'px;padding:0 16px;border-bottom:1px solid var(--ui-border-muted)', S('display:block;width:' + (m ? 32 : 28) + 'px;height:' + (m ? 32 : 28) + 'px;background:var(--ui-bg-accented)'), D('flex:1;display:flex;flex-direction:column;gap:8px', S('display:block;width:40%;height:13px;background:var(--ui-bg-accented)'), S('display:block;width:60%;height:11px;background:var(--ui-bg-accented)')))))
+
+		// ---------- pagination (same Paginator as Articles and Media)
+		const fmtN = n => String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+		const slugify = t => t.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
+		const SN = ['Atelier', 'Birchwood', 'Cedar Row', 'Dovetail', 'Eastgate', 'Fieldnotes', 'Granary', 'Harbour', 'Ironwork', 'Joinery Guide', 'Kiln', 'Larch', 'Millstone', 'Nettle', 'Orchard', 'Planing', 'Quarry', 'Ridgeway', 'Slate', 'Tannery', 'Underhill', 'Veneer', 'Workshop', 'Yardline', 'Zinc Works']
+		const RN = ['Journal', 'Projects', 'Archive', 'Press', 'Careers', 'Docs', 'Events', 'Shop']
+		const genSites = g => { const st = (g.page - 1) * g.per, n = Math.min(12, g.per, g.total - st); return Array.from({ length: n }, (_, i) => { const gi = st + i; let name
+			if (g.q) name = 'Renew ' + RN[gi % RN.length] + (gi >= RN.length ? ' ' + (Math.floor(gi / RN.length) + 1) : '')
+			else if (gi < SITES.length) return SITES[gi]
+			else { const k = gi - SITES.length; name = SN[k % SN.length] + (k >= SN.length ? ' ' + (Math.floor(k / SN.length) + 1) : '') }
+			const key = slugify(name); return { n: name, key, url: 'https://' + (g.q ? key.replace(/^renew-/, '') : key) + '.renew.example', c: (gi * 37) % 90, robots: 'Index' } }) }
+		const FN = ['Anaïs', 'Bruno', 'Clara', 'Diego', 'Elise', 'Félix', 'Greta', 'Hugo', 'Iris', 'Julien', 'Karim', 'Lucie', 'Mathieu', 'Nora', 'Oscar', 'Pilar', 'Quentin', 'Rosa', 'Samir', 'Tess']
+		const QF = ['Marc', 'Marie', 'Marta', 'Mario', 'Marina', 'Marius', 'Marlène', 'Marcel']
+		const LN = ['Marchand', 'Nunes', 'Oliveira', 'Perrin', 'Quintela', 'Rocha', 'Santos', 'Teixeira', 'Vidal', 'Weber']
+		const genAuthors = g => { const st = (g.page - 1) * g.per, n = Math.min(12, g.per, g.total - st); return Array.from({ length: n }, (_, i) => { const gi = st + i
+			if (!g.q && gi < AUTH.length) return AUTH[gi]
+			const name = (g.q ? QF[gi % QF.length] : FN[gi % FN.length]) + ' ' + LN[(gi * 3 + 1) % LN.length], sl = slugify(name)
+			return { name, slug: sl, user: gi % 3 === 0 ? sl.split('-')[0] + '@renew.example' : undefined, c: (gi * 5) % 12, img: gi % 2 === 0 } }) }
+		const PagerBlock = (g, noun) => {
+			const pages = Math.max(1, Math.ceil(g.total / g.per)), busy = !!g.loading, dim = busy ? 0.4 : 1
+			const out = []
+			if (g.err) out.push(Alert('error', 'circle-x', g.err, 'Check your connection and try again.', 'Retry'))
+			if (pages === 1) return D('flex-shrink:0;display:flex;flex-direction:column;gap:12px', ...out, S('display:block;color:var(--ui-text-muted)', pl(g.total, noun)))
+			const from = (g.page - 1) * g.per + 1, to = Math.min(g.page * g.per, g.total)
+			const back = g.page === 1 ? 0.4 : 1, fwd = g.page === pages ? 0.4 : 1
+			const PB = (ic, op) => S('width:' + bh + 'px;height:' + bh + 'px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted);opacity:' + op, I(ic))
+			const set = new Set([1, pages, g.page - 1, g.page, g.page + 1].filter(n => n >= 1 && n <= pages))
+			const arr = pages <= 7 ? Array.from({ length: pages }, (_, i) => i + 1) : [...set].sort((a, b) => a - b)
+			const nums = []
+			arr.forEach((n, i) => {
+				if (i && n - arr[i - 1] > 1) nums.push(S('min-width:' + bh + 'px;height:' + bh + 'px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)', '…'))
+				const cur = n === g.page
+				nums.push(S('min-width:' + bh + 'px;height:' + bh + 'px;padding:0 6px;display:flex;align-items:center;justify-content:center;border:1px solid ' + (cur ? 'var(--ui-primary)' : 'var(--ui-border-accented)') + ';background:' + (cur ? 'var(--rc-sand)' : 'var(--ui-bg)') + ';color:' + (cur ? 'var(--rc-on-sand)' : 'var(--ui-text-highlighted)') + ';font-weight:' + (cur ? 600 : 400), String(n)))
+			})
+			const Size = () => D('position:relative;opacity:' + dim, S('height:' + bh + 'px;padding:0 8px 0 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted)', g.per + ' per page', I('chevron-down', 14)),
+				g.sizeOpen && D('position:absolute;' + (m ? 'right' : 'left') + ':0;bottom:calc(100% + 4px);z-index:40;width:160px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px', ...[5, 25, 50, 100].map(n => D('height:' + bh + 'px;padding:0 8px;display:flex;align-items:center;background:' + (n === g.per ? 'var(--rc-sand)' : 'transparent') + ';color:' + (n === g.per ? 'var(--rc-on-sand)' : 'var(--ui-text-highlighted)') + ';font-weight:' + (n === g.per ? 600 : 400), n + ' per page'))))
+			const sum = S('color:var(--ui-text-muted)', busy ? 'Loading page ' + g.loading + '…' : 'Showing ' + from + '–' + to + ' of ' + fmtN(g.total))
+			const NB = (t, left) => S('flex:1;height:44px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted);font-weight:500;opacity:' + (left ? back : fwd), left && I('chevron-left'), t, !left && I('chevron-right'))
+			if (m) out.push(D('display:flex;flex-direction:column;gap:12px', D('display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between', sum, Size()), D('display:flex;align-items:center;gap:8px;opacity:' + dim, NB('Previous', true), S('padding:0 4px;color:var(--ui-text-highlighted);font-weight:500;white-space:nowrap', 'Page ' + g.page + ' of ' + fmtN(pages)), NB('Next', false))))
+			else out.push(D('display:flex;align-items:center;gap:16px', D('flex:1;display:flex', sum), Size(), D('display:flex;align-items:center;gap:4px;justify-content:flex-end;opacity:' + dim, PB('chevrons-left', back), PB('chevron-left', back), ...nums, PB('chevron-right', fwd), PB('chevrons-right', fwd))))
+			return D('flex-shrink:0;display:flex;flex-direction:column;gap:12px', ...out)
+		}
+		const fab = label => m && !s.ro && !s.panel && !s.modal && !s.menu && s.list !== 'empty' && D('position:absolute;left:16px;right:16px;bottom:16px;height:48px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;font-size:15px;box-shadow:var(--rc-shadow-pop)', I('plus', 18), label)
+		const shellBase = { kind: 'slot', display: 'Marta Alves' }
+		let main = null, shell = s.shell, edMeta = null, edSeo = null
+		const ov = []
+		// ---------- Sites
+		const siteForm = () => {
+			const p = s.panel, f = { name: '', key: '', keyMode: 'empty', url: '', img: null, sname: p.mode === 'add' ? '' : (p.f || {}).name, tpl: '%title% | %site%', ddesc: '', robots: 'Index', loc: '', def: false, ...p.f }, er = p.err || {}, add = p.mode === 'add'
+			const isDef = !add && SITES[p.i || 0].def
+			const prev = (f.url && !er.url ? f.url : 'https://journal.example.com') + '/how-we-price-a-bathroom-renovation'
+			return Panel({ title: add ? 'Add site' : 'Edit ' + f.name, notice: p.notice, saving: p.saving, confirm: p.saving ? 'Saving…' : add ? 'Add site' : 'Save changes' },
+				D('display:flex;flex-direction:column;gap:18px', F('Name', f.name || 'e.g. Journal', { val: !!f.name, focus: p.focus === 'name', err: er.name }),
+					Slug('Key', { mode: f.keyMode, value: f.key, err: er.key, suggest: er.keySuggest, locked: !add, lockHelp: 'Used in API paths, so it can\'t change.', help: 'Lowercase letters, numbers and hyphens. Used in API paths. It can\'t be changed after the site is added.', help2: 'Lowercase letters, numbers and hyphens. Used in API paths. It can\'t be changed after the site is added.' }),
+					F('Base URL', f.url || 'https://blog.example.com', { val: !!f.url, mono: true, focus: p.focus === 'url', err: er.url, help: er.url ? null : 'The public address of the frontend. Use https and no path.' }),
+					Pick(f.img, 'Default social image', 'Used when an article has no image of its own.'),
+					F('Site name', f.sname || 'e.g. Renew', { val: !!f.sname, focus: p.focus === 'sname', help: 'Shown in titles through the template, and sent as the Open Graph site name.' }),
+					D('display:flex;flex-direction:column;gap:6px', F('Title template', f.tpl, { mono: true, focus: p.focus === 'tpl', err: er.tpl, help: er.tpl ? null : 'Use %title% for the article title and %site% for the site name.' }), !er.tpl && D('display:flex;gap:6px;align-items:center;padding:8px 10px;background:var(--ui-bg-elevated);min-width:0', S('flex-shrink:0;font-size:12px;color:var(--ui-text-muted)', 'Example'), S('flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-text-highlighted)', f.tpl.replace('%title%', 'How we price a bathroom renovation').replace('%site%', f.sname || 'Renew')))),
+					F('Default description', f.ddesc || 'One or two sentences about the site.', { opt: true, area: true, val: !!f.ddesc, count: [...f.ddesc].length + ' / 320', help: 'Used when an article has no description, excerpt or body text.' }),
+					D('display:flex;flex-direction:column;gap:6px', S('font-weight:500;color:var(--ui-text-highlighted)', 'Default robots policy'), Seg([['Index', 'Index'], ['Noindex', 'Noindex']], f.robots), S('color:var(--ui-text-muted);font-size:12px;line-height:18px', f.robots === 'Index' ? 'Search engines may list this site\'s pages.' : 'Asks search engines not to list this site\'s pages.')),
+					F('Locale', f.loc || 'e.g. en or fr-CH', { opt: true, val: !!f.loc, mono: true, err: er.loc, help: er.loc ? null : 'A language tag. Leave empty if the site has no single language.' }),
+					Sw(isDef || f.def, isDef ? 'Default site' : 'Make this the default site', isDef ? 'New articles start on the default site. To change it, make another site the default.' : 'New articles start here. The current default is Renew.', isDef)),
+				D('display:flex;flex-direction:column;gap:4px;padding:12px;background:var(--ui-bg-elevated)', S('font-size:12px;color:var(--ui-text-muted)', 'Canonical URL preview'), S('font:400 12px/18px \'IBM Plex Mono\',monospace;color:var(--ui-text-highlighted);word-break:break-all', prev), er.url && S('font-size:12px;color:var(--ui-text-muted)', 'Shown when the base URL is valid.')),
+				D('display:flex;flex-direction:column;gap:6px;padding:12px;background:var(--ui-bg-elevated)', S('font-size:12px;color:var(--ui-text-muted)', 'How articles use these defaults'), ...[['Title', 'Article title, then the template.'], ['Description', 'Used last, after the article\'s description, excerpt and body.'], ['Image', 'Used when an article has no cover image.'], ['Robots', 'Used unless an article is hidden from search engines.']].map(([a, b]) => D('display:flex;gap:8px', S('width:84px;flex-shrink:0;font-weight:500;color:var(--ui-text-highlighted)', a), S('color:var(--ui-text-toned);text-wrap:pretty', b)))))
+		}
+		const sitesPage = () => {
+			if (s.forbidden) return D('flex:1;min-height:0;overflow:hidden;padding:' + (m ? '16px' : '24px') + ';display:flex;flex-direction:column;gap:16px', Empty('lock', 'You don\'t have access to Sites', 'Only the owner can manage sites. Ask the owner of this site if you need a change.', 'Back to Settings'))
+			const pg = s.pg && { ...s.pg, q }, st = s.sites || {}, rows = pg ? (pg.empty ? [] : genSites(pg)) : st.only ? [{ ...SITES[0], c: 312 }] : st.gone ? SITES.filter((_, i) => i !== 1) : SITES
+			const grid = 'minmax(0,1.1fr) minmax(0,1.5fr) 110px 44px'
+			let body
+			if (st.state === 'loading') body = Skel(3)
+			else if (st.state === 'error') body = Alert('error', 'circle-x', 'Couldn\'t load sites', 'Check your connection and try again.', 'Try again')
+			else if (pg && pg.loading) body = Skel(m ? 6 : 8)
+			else if (pg && pg.empty) body = Empty('search', 'No sites match "' + q + '"', 'Check the spelling, or search for a shorter part of the name.', 'Clear search')
+			else {
+				const mi = st.menu
+				const items = i => { const x = rows[i]; return x.def ? [menuItem('pencil', 'Edit', { hv: !m }), menuItem('trash-2', 'Delete…', { dis: true, err: true })] : [menuItem('pencil', 'Edit', { hv: !m }), menuItem('star', 'Set as default'), sep, menuItem('trash-2', 'Delete…', { err: true })] }
+				const tip = 'The default site can\'t be deleted. Make another site the default first.'
+				const trs = rows.map((x, i) => {
+					const open = mi === i
+					const nameEl = D('display:flex;align-items:center;gap:8px;min-width:0', S('font-weight:500;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', x.n), x.def && Bd('Default', 'def'), x.robots === 'Noindex' && Bd('Noindex', 'noidx'))
+					if (m) return D('position:relative;display:flex;align-items:center;gap:8px;padding:12px 4px 12px 16px;min-height:76px;border-bottom:1px solid var(--ui-border);background:' + (open ? 'var(--ui-bg-elevated)' : 'var(--ui-bg)'), D('flex:1;min-width:0;display:flex;flex-direction:column;gap:4px', nameEl, S('font:400 12px/18px \'IBM Plex Mono\',monospace;color:var(--ui-text-toned);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', host(x.url)), S('font-size:12px;color:var(--ui-text-muted)', pl(x.c, 'article'))), Dots())
+					return D('position:relative;display:grid;grid-template-columns:' + grid + ';gap:12px;min-height:52px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border);background:' + (open ? 'var(--ui-bg-elevated)' : 'var(--ui-bg)'), D('display:flex;flex-direction:column;gap:2px;min-width:0', nameEl, S('font:400 12px/16px \'IBM Plex Mono\',monospace;color:var(--ui-text-muted)', x.key)), S('font:400 12px/18px \'IBM Plex Mono\',monospace;color:var(--ui-text-toned);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', x.url), S('color:var(--ui-text-muted)', pl(x.c, 'article')), Dots(),
+						open && !m && MenuBox(items(i)), open && !m && rows[i].def && s.tip && D('position:absolute;right:240px;top:76px;z-index:6;max-width:240px;padding:6px 8px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:12px;line-height:18px;box-shadow:var(--rc-shadow-pop)', tip))
+				})
+				if (mi != null && m) ov.push(MenuBox(items(mi), rows[mi].n, rows[mi].def ? tip : null))
+				body = D('display:flex;flex-direction:column;gap:12px', D('background:var(--ui-bg);border:1px solid var(--ui-border);' + (m ? 'margin:0 -16px;border-left:0;border-right:0' : ''), !m && TH(grid, ['Site', 'Base URL', 'Articles', '']), ...trs),
+					st.only && S('color:var(--ui-text-muted);text-wrap:pretty', 'Add another site if your content is shown on more than one frontend. Each article belongs to one site.'))
+			}
+			return D('flex:1;min-height:0;overflow:hidden;padding:' + (m ? '16px 16px 88px' : '24px') + ';display:flex;flex-direction:column;gap:16px;position:relative', Head('Sites', 'The frontends that display your content.', 'Add site'), pg && SearchBox('Search by name or key'), pg ? D('flex:1;min-height:0;overflow:hidden', body) : body, pg && !pg.empty && PagerBlock(pg, 'site'))
+		}
+		const sitesModal = () => {
+			const k = s.modal.k, x = s.modal, tgt = SITES[x.i ?? 1]
+			if (k === 'setdef') return Shell({ title: 'Make ' + tgt.n + ' the default site?', desc: 'New articles start on this site. Articles that are already on other sites stay where they are.', cancel: 'Cancel', confirm: x.loading ? 'Saving…' : 'Make default', loading: x.loading, close: true }, D('display:none'))
+			if (k === 'pick') return Picker({ title: 'Choose an image', desc: 'The default social image for ' + (x.n || 'this site') + '.', sel: x.sel })
+			const n = tgt.c
+			if (k === 'del0') return Shell({ title: 'Delete this site?', desc: '"' + tgt.n + '" will be deleted. No articles belong to it. This can\'t be undone.', cancel: 'Cancel', confirm: x.loading ? 'Deleting…' : 'Delete site', tone: 'danger', loading: x.loading }, x.notice ? Alert('error', 'circle-x', 'Couldn\'t delete the site, so it\'s still there. Try again in a moment.') : D('display:none'))
+			const to = SITES[0]
+			return Shell({ title: 'Delete this site?', desc: '"' + tgt.n + '" will be deleted. ' + pl(n, 'article') + ' belong to it, so choose a site to move them to. This can\'t be undone.', cancel: 'Cancel', confirm: x.loading ? 'Moving articles…' : 'Move ' + n + ' articles and delete', tone: 'danger', loading: x.loading, cdis: x.dis },
+				D('display:flex;flex-direction:column;gap:16px', x.notice && Alert('error', 'circle-x', 'Couldn\'t delete the site', 'No articles were moved. Try again in a moment.'),
+					F('Move articles to', to.n + ' · ' + host(to.url), { sel: true, focus: !!x.open, help: x.open ? null : pl(n, 'article') + ' will move to ' + to.n + '. Their canonical host changes to ' + host(to.url) + '.', dis: x.loading }),
+					x.open && Opts(SITES.filter(y => y.n !== tgt.n).map(y => [y.n, host(y.url), 0]), to.n)))
+		}
+		// ---------- Authors
+		const socials = { X: 'https://x.com/username', LinkedIn: 'https://www.linkedin.com/in/username', GitHub: 'https://github.com/username', Mastodon: 'https://mastodon.social/@username', Custom: 'https://example.com' }
+		const authorForm = () => {
+			const p = s.panel, f = { av: null, name: '', slug: '', slugMode: 'empty', bio: '', web: '', links: [], user: null, ...p.f }, er = p.err || {}, add = p.mode === 'add'
+			const bl = [...f.bio].length
+			const sl = f.links.map((l, i) => D('display:flex;gap:8px;align-items:flex-start', D('width:' + (m ? 112 : 108) + 'px;flex-shrink:0', F(null, l.t, { sel: true })), D('flex:1;min-width:0', F(null, l.v || socials[l.t], { val: !!l.v, mono: true, err: l.err, focus: l.focus })), S('width:' + (m ? 44 : 40) + 'px;height:' + ih + 'px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted);border:1px solid var(--ui-border-accented)', I('trash-2', 16))))
+			const linked = f.user && !f.unlinkAsk
+			const ownUser = D('display:flex;flex-direction:column;gap:6px', S('font-weight:500;color:var(--ui-text-highlighted)', 'Linked user'), D('display:flex;align-items:center;gap:10px;min-height:' + ih + 'px;padding:0 10px;border:1px solid var(--ui-border);background:var(--ui-bg-elevated)', I('link', 14, 'color:var(--ui-info)'), S('flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-text-highlighted)', f.user), I('lock', 14, 'color:var(--ui-text-muted)')), S('color:var(--ui-text-muted);font-size:12px;line-height:18px', 'This is your author profile. Only an owner or admin can change the link.'))
+			const userF = p.own ? ownUser : f.user ? D('display:flex;flex-direction:column;gap:6px', S('font-weight:500;color:var(--ui-text-highlighted)', 'Linked user', S('font-weight:400;color:var(--ui-text-muted)', ' (optional)')), D('display:flex;align-items:center;gap:10px;min-height:' + ih + 'px;padding:0 6px 0 10px;border:1px solid var(--ui-border-accented)', I('link', 14, 'color:var(--ui-info)'), S('flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-text-highlighted)', f.user), B('Unlink', { h: m ? 44 : 28, fs: 12, px: 10 })), S('color:var(--ui-text-muted);font-size:12px;line-height:18px', 'New articles by this user start with this author.')) :
+				D('display:flex;flex-direction:column;gap:6px', F('Linked user', f.uopen ? 'Choose a user' : 'No linked user', { opt: true, val: false, sel: true, focus: !!f.uopen, help: f.uopen ? null : 'Link a CMS user if this author has an account. Guest writers need no link.' }), f.uopen && (f.noUsers ? D('padding:12px;border:1px solid var(--ui-border);background:var(--ui-bg);color:var(--ui-text-muted)', 'Every user already has an author.') : Opts([['Marta Alves', 'marta@renew.example', 0, Av({ name: 'Marta Alves' }, 24)], ['Rui Santos', 'rui@renew.example', 0, Av({ name: 'Rui Santos' }, 24)]], null, S('display:block;padding:4px 8px 6px;font-size:12px;color:var(--ui-text-muted)', 'Users without an author'))))
+			const pv = D('display:flex;gap:12px;padding:12px;background:var(--ui-bg-elevated);align-items:flex-start', Av({ name: f.name || 'Author', img: !!f.av }, 40), D('flex:1;min-width:0;display:flex;flex-direction:column;gap:2px', S('font-size:12px;color:var(--ui-text-muted)', 'Byline preview'), S('font-weight:600;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', f.name || 'Author name'), S('color:var(--ui-text-toned);font-size:12px;line-height:18px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical', f.bio || 'The bio appears here.')))
+			return Panel({ title: add ? 'Add author' : 'Edit ' + f.name, notice: p.notice, saving: p.saving, confirm: p.saving ? 'Saving…' : add ? 'Add author' : 'Save changes' },
+				D('display:flex;flex-direction:column;gap:18px', Pick(f.av, 'Avatar', null, { av: { name: f.name || 'Author', img: !!f.av } }),
+					F('Name', f.name || 'e.g. Camille Roche', { val: !!f.name, focus: p.focus === 'name', err: er.name }),
+					Slug('Slug', { mode: f.slugMode, value: f.slug, err: er.slug, suggest: er.suggest, help: 'Generated from the name. Used in public author URLs and API paths. Unique across all authors.', help2: 'Lowercase letters, numbers and hyphens. Unique across all authors.' }),
+					F('Bio', f.bio || 'A sentence or two about the author.', { opt: true, area: true, val: !!f.bio, count: bl + ' / 280', countErr: bl > 280, err: er.bio, focus: p.focus === 'bio' }),
+					F('Website', f.web || 'https://example.com', { opt: true, val: !!f.web, mono: true, err: er.web }),
+					D('display:flex;flex-direction:column;gap:8px', S('font-weight:500;color:var(--ui-text-highlighted)', 'Social links', S('font-weight:400;color:var(--ui-text-muted)', ' (optional)')), ...sl, D('display:flex;align-items:center;gap:12px', f.links.length < 5 ? B('Add link', { icon: 'plus', h: m ? 44 : 28, fs: 12, px: 10 }) : S('color:var(--ui-text-muted);font-size:12px', 'You can add up to 5 links.'), S('color:var(--ui-text-muted);font-size:12px', f.links.length + ' of 5'))),
+					userF), pv)
+		}
+		const authorView = () => {
+			const a = AUTH[s.panel.i ?? 0]
+			const lab = (t, v) => D('display:flex;flex-direction:column;gap:4px', S('font-weight:500;color:var(--ui-text-highlighted)', t), v)
+			return Panel({ title: a.name, ro: true }, D('display:flex;flex-direction:column;gap:18px',
+				D('display:flex;gap:14px;align-items:center', Av(a, 64), D('flex:1;min-width:0;display:flex;flex-direction:column;gap:4px', S('font:400 12px/18px \'IBM Plex Mono\',monospace;color:var(--ui-text-muted)', a.slug), D('display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ui-text-muted)', a.user ? Bd('Linked', 'linked') : Bd('Guest', 'guest'), pl(a.c, 'article')))),
+				a.bio && lab('Bio', S('color:var(--ui-text-toned);text-wrap:pretty', a.bio)),
+				a.web && lab('Website', S('color:var(--ui-text-highlighted);text-decoration:underline;text-underline-offset:3px;' + mono, a.web)),
+				D('display:flex;gap:10px;padding:12px;background:var(--ui-bg-elevated);color:var(--ui-text-toned)', I('lock', 14, 'margin-top:3px'), 'Only an owner or admin can change this author.')))
+		}
+		const authorsPage = () => {
+			const st = s.list || 'ok'
+			const pg = s.pg && { ...s.pg, q }
+			let rows = pg ? (pg.empty ? [] : genAuthors(pg)) : AUTH
+			if (q && !pg) rows = AUTH.filter(a => (a.name + a.slug).toLowerCase().includes(q.toLowerCase()))
+			const grid = 'minmax(0,1.4fr) minmax(0,1fr) 110px 100px 44px'
+			let body
+			if (st === 'loading') body = Skel(6)
+			else if (pg && pg.loading) body = Skel(m ? 6 : 8)
+			else if (st === 'error') body = Alert('error', 'circle-x', 'Couldn\'t load authors', 'Check your connection and try again.', 'Try again')
+			else if (st === 'empty') body = Empty('feather', 'No authors yet', 'Authors are the names readers see on articles. They don\'t need an account.', 'Add author', true)
+			else if (q && !rows.length) body = Empty('search', 'No authors match "' + q + '"', 'Check the spelling, or search for a shorter part of the name.', 'Clear search')
+			else {
+				const mi = s.menu
+				const items = [menuItem('pencil', 'Edit', { hv: !m }), sep, menuItem('trash-2', 'Delete…', { err: true })]
+				if (mi != null && m) ov.push(MenuBox(items, rows[mi].name))
+				const acct = a => a.user ? Bd('Linked', 'linked') : Bd('Guest', 'guest')
+				const trs = rows.map((a, i) => {
+					const open = mi === i
+					if (m) return D('position:relative;display:flex;align-items:center;gap:12px;padding:12px 4px 12px 16px;min-height:76px;border-bottom:1px solid var(--ui-border);background:' + (open ? 'var(--ui-bg-elevated)' : 'var(--ui-bg)'), Av(a, 40), D('flex:1;min-width:0;display:flex;flex-direction:column;gap:3px', S('font-weight:500;font-size:15px;line-height:21px;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', a.name), S('font:400 12px/16px \'IBM Plex Mono\',monospace;color:var(--ui-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', a.slug), D('display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ui-text-muted)', acct(a), pl(a.c, 'article'))), Dots())
+					return D('position:relative;display:grid;grid-template-columns:' + grid + ';gap:12px;min-height:52px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border);background:' + (open ? 'var(--ui-bg-elevated)' : 'var(--ui-bg)'), D('display:flex;align-items:center;gap:10px;min-width:0', Av(a, 32), S('font-weight:500;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', a.name)), S('font:400 12px/18px \'IBM Plex Mono\',monospace;color:var(--ui-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', a.slug), D('display:flex', acct(a)), S('color:var(--ui-text-muted)', pl(a.c, 'article')), Dots(), open && MenuBox(items))
+				})
+				body = D('background:var(--ui-bg);border:1px solid var(--ui-border);' + (m ? 'margin:0 -16px;border-left:0;border-right:0' : ''), !m && TH(grid, ['Author', 'Slug', 'Account', 'Articles', '']), ...trs)
+			}
+			const showTool = st !== 'empty' && st !== 'error'
+			return D('flex:1;min-height:0;overflow:hidden;padding:' + (m ? '16px 16px 88px' : '24px') + ';display:flex;flex-direction:column;gap:16px;position:relative', Head('Authors', s.ro ? 'The names readers see on your articles. Only an owner or admin can change authors.' : 'The names readers see on your articles. An author doesn\'t need an account.', s.ro ? null : 'Add author'), showTool && SearchBox(), pg ? D('flex:1;min-height:0;overflow:hidden', body) : body, pg && !pg.empty && PagerBlock(pg, 'author'))
+		}
+		const authorsModal = () => {
+			const x = s.modal, k = x.k, a = AUTH[x.i ?? 2]
+			if (k === 'pick') return Picker({ title: 'Choose an image', desc: 'The avatar for ' + (x.n || 'this author') + '.', sel: x.sel, sq: true })
+			if (k === 'unlink') return Shell({ title: 'Unlink ' + a.name + '?', desc: a.name + ' will stay on their articles. New articles by ' + a.user + ' will no longer start with this author.', cancel: 'Cancel', confirm: x.loading ? 'Unlinking…' : 'Unlink user', loading: x.loading, close: true }, D('display:none'))
+			if (k === 'relink') return Shell({ title: 'Link ' + a.name + ' to a user?', desc: 'Only users without an author are listed.', cancel: 'Cancel', confirm: 'Link user', cdis: true, close: true }, D('display:flex;flex-direction:column;gap:12px', F('Linked user', 'Choose a user', { sel: true, val: false, focus: true }), Opts([['Marta Alves', 'marta@renew.example', 0, Av({ name: 'Marta Alves' }, 24)], [ 'Rui Santos', 'rui@renew.example', 0, Av({ name: 'Rui Santos' }, 24)]])))
+			const n = a.c
+			if (k === 'del0') return Shell({ title: 'Delete this author?', desc: '"' + a.name + '" will be deleted. No articles credit this author. This can\'t be undone.', cancel: 'Cancel', confirm: x.loading ? 'Deleting…' : 'Delete author', tone: 'danger', loading: x.loading }, D('display:none'))
+			if (k === 'blocked') return Shell({ title: 'Can\'t delete this author', desc: '"' + a.name + '" is credited on ' + pl(n, 'article') + '. Choose another author to credit instead, or remove ' + a.name + ' from those articles first.', cancel: 'Close', confirm: 'Reassign articles', close: true }, a.user ? Alert('info', 'info', 'Linked to ' + a.user, 'Deleting the author doesn\'t affect the user account.') : D('display:none'))
+			const to = AUTH[0]
+			return Shell({ title: 'Delete this author?', desc: '"' + a.name + '" will be deleted and is credited on ' + pl(n, 'article') + '. This can\'t be undone.', cancel: 'Cancel', confirm: x.loading ? 'Reassigning…' : 'Delete and reassign ' + n + ' articles', tone: 'danger', loading: x.loading, close: !x.loading },
+				D('display:flex;flex-direction:column;gap:16px', x.notice && Alert('error', 'circle-x', 'Couldn\'t delete the author', 'Nothing was changed. Try again in a moment.'),
+					F('Credit these articles to', x.none ? 'Nobody' : to.name, { sel: true, focus: !!x.open, dis: x.loading, help: x.open ? null : x.none ? 'The articles keep any other authors. Articles with only this author will have no byline.' : 'Where an article has several authors, ' + a.name + ' is removed and the others stay.' }),
+					x.open && Opts([...AUTH.filter(y => y.name !== a.name).slice(0, 4).map(y => [y.name, y.slug, 0, Av(y, 24)]), ['Nobody', 'Remove the byline', 0, S('width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--ui-border-accented);color:var(--ui-text-muted)', I('user-x', 14))]], x.none ? 'Nobody' : to.name),
+					a.user && S('color:var(--ui-text-muted);font-size:12px', 'Linked to ' + a.user + '. The user account isn\'t affected.')))
+		}
+		// ---------- Editor: site and authors
+		const metaUI = () => {
+			const mt = s.meta || {}, au = (mt.authors || []).map(AV), n = au.length, st = mt.state || 'ok'
+			const out = []
+			if (mt.hint) out.push(D('display:flex;gap:10px;padding:12px;background:var(--rc-info-soft);color:var(--ui-info)', S('display:flex;padding-top:2px', I('info')), D('flex:1;min-width:0;display:flex;flex-direction:column;gap:8px', D('display:flex;flex-direction:column;gap:2px', S('font-weight:600', 'You don\'t have an author profile yet'), S('color:var(--ui-text-toned)', 'Create one to be credited on your articles.')), B('Create my author profile', { icon: 'feather', h: m ? 44 : 28, fs: 12, px: 10 })), S('width:' + (m ? 44 : 24) + 'px;height:' + (m ? 44 : 24) + 'px;margin:' + (m ? '-10px -10px 0 0' : '-4px -4px 0 0') + ';display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)', I('x', 14))))
+			if (mt.sites) out.push(D('display:flex;flex-direction:column;gap:6px', F('Site', (mt.site || 'Journal') + ' · ' + host(SITES.find(x => x.n === (mt.site || 'Journal')).url), { sel: true, focus: mt.open === 'site' }), mt.open === 'site' ? Opts(SITES.map(x => [x.n, host(x.url), 0]), mt.site || 'Journal') : D('display:flex;align-items:center;gap:6px;color:var(--ui-text-muted);font-size:12px;line-height:18px', I('link', 12), S('', 'Canonical host: ', S('color:var(--ui-text-toned);' + mono, host(SITES.find(x => x.n === (mt.site || 'Journal')).url))))))
+			const chip = (a, i) => {
+				const grab = mt.grab === i, lift = mt.drag === i
+				return D('display:flex;align-items:center;gap:' + (m ? 8 : 6) + 'px;min-height:' + (m ? 48 : 32) + 'px;padding:0 ' + (m ? 4 : 2) + 'px 0 2px;border:1px solid ' + (grab || lift ? 'var(--ui-primary)' : 'var(--ui-border-accented)') + ';background:' + (lift ? 'var(--ui-bg)' : 'var(--ui-bg)') + ';' + (grab ? 'outline:2px solid var(--ui-primary);outline-offset:1px;' : '') + (lift ? 'box-shadow:var(--rc-shadow-pop);position:relative;z-index:2;transform:translateX(4px);' : ''),
+					S('width:' + (m ? 36 : 24) + 'px;height:' + (m ? 36 : 24) + 'px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:' + (grab || lift ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)'), I('grip-vertical', 14)), Av(a, m ? 28 : 22),
+					S('flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--ui-text-highlighted)', a.name),
+					i === 0 && n > 1 && Bd('Primary', 'prim', 18),
+					S('width:' + (m ? 44 : 24) + 'px;height:' + (m ? 44 : 24) + 'px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)', I('x', 14)))
+			}
+			const list = []
+			au.forEach((a, i) => { if (mt.drop === i) list.push(D('height:2px;background:var(--ui-primary);margin:-1px 0')); list.push(chip(a, i)) })
+			const body = [S('font-weight:500;color:var(--ui-text-highlighted)', 'Authors')]
+			if (!n) body.push(D('padding:12px;border:1px dashed var(--ui-border-accented);color:var(--ui-text-muted);text-wrap:pretty', 'No authors. This article will have no byline.'))
+			else body.push(D('display:flex;flex-direction:column;gap:4px', ...list))
+			const trig = D('display:flex;align-items:center;gap:8px;min-height:' + ih + 'px;padding:0 10px;border:1px solid ' + (mt.open === 'authors' ? 'var(--ui-primary)' : 'var(--ui-border-accented)') + ';' + (mt.open === 'authors' ? 'box-shadow:inset 0 0 0 1px var(--ui-primary);' : '') + 'background:var(--ui-bg);color:var(--ui-text-muted);font-size:' + fs + 'px', I('plus', 14), S('flex:1;color:' + (mt.q ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)'), mt.open === 'authors' ? (mt.q || 'Search authors') : 'Add an author'), I('chevron-down', 14))
+			body.push(trig)
+			if (mt.open === 'authors') {
+				const chosen = au.map(a => a.name), q2 = mt.q
+				let opts = AUTH.filter(a => !q2 || a.name.toLowerCase().includes(q2.toLowerCase()))
+				const create = D('min-height:' + (m ? 48 : 36) + 'px;padding:4px 8px;display:flex;align-items:center;gap:8px;color:var(--ui-text-highlighted);font-weight:500;border-top:1px solid var(--ui-border)', I('plus', 16), q2 ? 'Create author "' + q2 + '"…' : 'Create author…')
+				let inner
+				if (st === 'loading') inner = [D('display:flex;flex-direction:column;gap:10px;padding:10px 8px', ...[0, 1, 2].map(() => D('display:flex;gap:8px;align-items:center', S('display:block;width:24px;height:24px;background:var(--ui-bg-accented)'), S('display:block;width:50%;height:12px;background:var(--ui-bg-accented)'))))]
+				else if (st === 'error') inner = [D('padding:10px 8px;display:flex;flex-direction:column;gap:8px', S('color:var(--ui-error);font-weight:500', 'Couldn\'t load authors'), S('color:var(--ui-text-muted)', 'Check your connection and try again.'), B('Try again', { icon: 'rotate-cw', z: 14, h: m ? 44 : 28, fs: 12, px: 10 }))]
+				else if (!opts.length) inner = [D('padding:10px 8px;color:var(--ui-text-muted)', 'No author matches "' + q2 + '".')]
+				else inner = opts.map(a => D('min-height:' + (m ? 48 : 36) + 'px;padding:4px 8px;display:flex;align-items:center;gap:8px;color:var(--ui-text-highlighted);opacity:' + (chosen.includes(a.name) ? 0.6 : 1), Av(a, 24), D('flex:1;min-width:0;display:flex;flex-direction:column', S('overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500', a.name), S('font-size:12px;color:var(--ui-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;' + mono, a.slug)), chosen.includes(a.name) && I('check', 14)))
+				body.push(D('border:1px solid var(--ui-border);background:var(--ui-bg);box-shadow:var(--rc-shadow-pop);' + (m ? '' : ''), D('padding:4px', ...inner), st === 'error' || mt.noCreate ? null : create))
+			}
+			if (mt.grab != null) body.push(S('font-size:12px;line-height:18px;color:var(--ui-text-toned);padding:6px 8px;background:var(--ui-bg-elevated)', au[mt.grab].name + ' grabbed. Position ' + (mt.grab + 1) + ' of ' + n + '. Use the up and down arrow keys to move, Space to drop, Escape to cancel.'))
+			else if (n > 1 && mt.open !== 'authors') body.push(S('font-size:12px;line-height:18px;color:var(--ui-text-muted)', 'Drag to reorder. The first author is the primary byline.'))
+			out.push(D('display:flex;flex-direction:column;gap:8px', ...body))
+			return D('display:flex;flex-direction:column;gap:16px', ...out)
+		}
+		const newAuthorModal = () => {
+			const x = s.modal
+			return Shell({ z: 60, title: 'Create author', desc: 'Adds a byline for this article. You can add a bio and avatar later in Authors.', cancel: 'Cancel', confirm: x.loading ? 'Creating…' : 'Create author', loading: x.loading, close: true, cdis: !x.name },
+				D('display:flex;flex-direction:column;gap:16px', x.notice && Alert('error', 'circle-x', 'Couldn\'t create the author', 'The article is unchanged. Try again in a moment.'),
+					F('Name', x.name || 'e.g. Camille Roche', { val: !!x.name, focus: !x.name && !x.loading, err: x.err, dis: x.loading }),
+					Slug('Slug', { mode: x.name ? (x.err ? 'manual' : 'auto') : 'empty', value: x.slug, help: 'Generated from the name. Unique across all authors.', err: x.slugErr, suggest: x.suggest }),
+					x.me && D('display:flex;gap:10px;align-items:flex-start', S('width:20px;height:20px;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-primary);background:var(--ui-primary);color:var(--ui-bg)', I('check', 14)), D('display:flex;flex-direction:column', S('font-weight:500;color:var(--ui-text-highlighted)', 'This is me'), S('color:var(--ui-text-muted);font-size:12px', 'Links the author to marta@renew.example.')))))
+		}
+		// ---------- Editor: search and sharing
+		const ATT = 'How we price a bathroom renovation', ASLUG = 'how-we-price-a-bathroom-renovation', AD1 = 'A bathroom renovation is priced by room size, plumbing changes and finish level.'
+		const SUG = {
+			title_long: ['The meta title is 74 characters. Search engines may cut it off after about 60.', 'meta title'],
+			title_empty: ['No meta title yet. The article title is used instead.', 'meta title'],
+			desc_short: ['The description is 41 characters. About 70 to 160 reads best in results.', 'meta description'],
+			desc_long: ['The description is 212 characters. Search engines may cut it off after about 160.', 'meta description'],
+			cover_alt: ['The cover image has no alt text. Add a short description of it.', 'cover image'],
+			cover_none: ['No cover image. The site\'s social image is used.', 'cover image'],
+			slug_long: ['The slug is 86 characters. Shorter addresses are easier to share.', 'URL slug'],
+			no_au: ['This article has no authors, so the structured data has no author.', 'authors'],
+			no_h: ['The body has no headings. H2 headings help readers scan the article.', 'body'],
+			body_alt: ['2 images in the body have no alt text.', 'body'],
+			short: ['The article is under 300 words. That is fine for a short note.', 'body']
+		}
+		const Chip = t => S('height:20px;padding:0 6px;align-self:flex-start;display:inline-flex;align-items:center;gap:4px;border:1px dashed var(--ui-border-accented);font:500 11px/16px \'IBM Plex Mono\',monospace;color:var(--ui-text-toned);white-space:nowrap', I('corner-down-right', 10), t)
+		const Ct = (n, lo, hi) => S('font:400 12px \'IBM Plex Mono\',monospace;color:' + (n && (n < lo || n > hi) ? 'var(--ui-warning)' : 'var(--ui-text-muted)'), n + ' / ' + hi)
+		const FW = (lab, val, o = {}) => D('display:flex;flex-direction:column;gap:6px;min-width:0', D('display:flex;justify-content:space-between;align-items:center;gap:8px', S('font-weight:500;color:var(--ui-text-highlighted)', lab, !o.req && S('font-weight:400;color:var(--ui-text-muted)', ' (optional)')), o.ct), F(null, val, o), o.fb && Chip(o.fb))
+		const Dis = (t, o = {}) => D('display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ui-border)', D('display:flex;align-items:center;gap:8px;min-height:' + (m ? 44 : 24) + 'px;color:var(--ui-text-highlighted)', I(o.open ? 'chevron-down' : 'chevron-right', 14), S('font-weight:600', t), o.tag && Note(o.tag), S('flex:1;text-align:right;font-size:12px;color:var(--ui-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', o.sum)), ...(o.open ? o.kids : []))
+		const SugRow = (c, o = {}) => D('display:flex;align-items:flex-start;gap:8px', S('display:flex;padding-top:2px;color:var(--ui-warning)', I('lightbulb', 14)), D('flex:1;min-width:0;display:flex;flex-direction:column;gap:2px', S('text-wrap:pretty;color:var(--ui-text-highlighted)', SUG[c][0]), Link('Go to ' + SUG[c][1], 'arrow-right')), !o.compact && S('width:' + (m ? 44 : 24) + 'px;height:' + (m ? 44 : 24) + 'px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)', I('x', 14)))
+		const Sugs = (codes, st, o = {}) => {
+			const box = (...c) => D('display:flex;flex-direction:column;gap:12px;padding:12px;background:var(--ui-bg-elevated)', ...c)
+			if (st === 'loading') return box(D('display:flex;align-items:center;gap:8px;color:var(--ui-text-toned)', I('loader-circle', 14), 'Checking this article…'), ...[70, 90, 55].map(w => S('display:block;height:12px;width:' + w + '%;background:var(--ui-bg-accented)')))
+			if (!codes.length) return box(D('display:flex;align-items:flex-start;gap:8px', S('display:flex;padding-top:2px;color:var(--ui-success)', I('circle-check', 14)), D('display:flex;flex-direction:column;gap:2px', S('font-weight:600;color:var(--ui-text-highlighted)', 'All good'), S('color:var(--ui-text-muted)', o.dismissed ? o.dismissed + ' dismissed suggestions are hidden.' : 'Nothing to suggest for this article.')), o.dismissed && Link('Show dismissed')))
+			const shown = o.compact ? codes.slice(0, 3) : codes
+			return box(...shown.map(c => SugRow(c, o)), o.compact && codes.length > 3 && S('color:var(--ui-text-muted);font-size:12px', '+' + (codes.length - 3) + ' more in Search and sharing'), !o.compact && S('color:var(--ui-text-muted);font-size:12px;line-height:18px;text-wrap:pretty', 'Suggestions never block saving or publishing. Dismiss one and it stays hidden for this article.' ))
+		}
+		const SEOSIDE = (k) => {
+			const codes = k.codes || [], st = k.state || 'ok'
+			return D('display:flex;flex-direction:column;gap:12px',
+				D('display:flex;flex-direction:column;gap:4px;padding:8px;background:var(--ui-bg-elevated)', S('font-size:12px;color:var(--ui-text-muted)', 'Address'), S('font:400 12px/18px \'IBM Plex Mono\',monospace;color:var(--ui-text-highlighted);word-break:break-all', host(SITES[k.site || 0].url) + '/' + (k.slug || ASLUG))),
+				k.hidden && D('display:flex;gap:8px;color:var(--ui-warning)', S('display:flex;padding-top:2px', I('eye-off', 14)), S('color:var(--ui-text-toned);text-wrap:pretty', 'Hidden from search engines. This only sets a flag in the API.')),
+				Sugs(codes, st, { compact: true, dismissed: k.dismissed }),
+				D('display:flex;flex-direction:column;gap:8px', B('Edit search and sharing', { icon: 'search', h: m ? 44 : 32 }), B('What the frontend gets', { icon: 'braces', h: m ? 44 : 32 })))
+		}
+		const trunc = (t, n) => [...t].length > n ? [...t].slice(0, n - 1).join('').trimEnd() + '…' : t
+		const SERP = (p, site) => {
+			const dev = p.dev || 'desktop', tt = trunc((p.mt || ATT) + ' | ' + site.n, dev === 'desktop' ? 60 : 70)
+			const dd = p.md || p.ex || AD1, dt = trunc(dd, dev === 'desktop' ? 160 : 120)
+			const fb = [!p.mt && 'Using article title', !p.md && p.ex && 'Using excerpt', !p.md && !p.ex && 'Using first sentence of the body'].filter(Boolean)
+			return D('display:flex;flex-direction:column;gap:8px', D('display:flex;justify-content:space-between;align-items:center;gap:8px', S('font-weight:600;color:var(--ui-text-highlighted)', 'Search result'), D('display:flex;border:1px solid var(--ui-border-accented);width:150px', ...[['desktop', 'Desktop'], ['mobile', 'Mobile']].map(([k, t]) => S('flex:1;height:' + (m ? 44 : 24) + 'px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:' + (dev === k ? 500 : 400) + ';background:' + (dev === k ? 'var(--rc-sand)' : 'var(--ui-bg)') + ';color:' + (dev === k ? 'var(--rc-on-sand)' : 'var(--ui-text-toned)'), t)))),
+				D('padding:14px;border:1px solid var(--ui-border);background:var(--ui-bg);display:flex;flex-direction:column;gap:4px;' + (dev === 'mobile' && !m ? 'width:280px;' : ''), D('display:flex;align-items:center;gap:8px;min-width:0', S('width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ui-bg-elevated);font:600 11px/1 \'IBM Plex Sans\',sans-serif;color:var(--ui-text-highlighted)', site.n[0]), D('display:flex;flex-direction:column;min-width:0', S('font-size:12px;line-height:16px;color:var(--ui-text-highlighted)', site.n), S('font-size:11px;line-height:14px;color:var(--ui-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', host(site.url) + ' › ' + (p.slug || ASLUG).slice(0, 36)))), S('font:400 ' + (dev === 'desktop' ? 18 : 16) + 'px/1.3 \'IBM Plex Sans\',sans-serif;color:var(--ui-info);margin-top:4px;word-break:break-word', tt), S('font-size:13px;line-height:19px;color:var(--ui-text-toned);word-break:break-word', dt)),
+				fb.length ? D('display:flex;gap:6px;flex-wrap:wrap', ...fb.map(Chip)) : null, (p.mt || ATT).length + site.n.length + 3 > (dev === 'desktop' ? 60 : 70) ? S('font-size:12px;color:var(--ui-text-muted)', 'Cut off here, the way a search engine would.') : null)
+		}
+		const SOC = (p, site) => {
+			const sx = p.soc || {}, hasImg = !!(sx.img || p.cover), t = sx.t || p.mt || ATT, d = sx.d || p.md || p.ex || AD1
+			return D('display:flex;flex-direction:column;gap:8px', S('font-weight:600;color:var(--ui-text-highlighted)', 'Social card'),
+				D('border:1px solid var(--ui-border);background:var(--ui-bg)', S('display:flex;align-items:center;justify-content:center;aspect-ratio:1.91/1;background:repeating-linear-gradient(135deg, var(--ui-border) 0 1px, transparent 1px 12px), var(--rc-sand);color:var(--ui-text-muted);font:400 11px \'IBM Plex Mono\',monospace', hasImg ? (sx.img || 'north-wall.jpg') : (site.img || 'site social image')), D('padding:10px 12px;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--ui-border)', S('font-size:11px;line-height:16px;text-transform:uppercase;color:var(--ui-text-muted)', host(site.url)), S('font-weight:600;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', t), S('font-size:12px;line-height:18px;color:var(--ui-text-toned);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical', d))),
+				D('display:flex;gap:6px;flex-wrap:wrap', ...[!sx.t && 'Using meta title', !sx.d && 'Using meta description', !sx.img && (p.cover ? 'Using cover image' : 'Using site social image')].filter(Boolean).map(Chip)))
+		}
+		const seoPanel = () => {
+			const p = s.seo.panel, site = SITES[p.site || 0], dis = p.state === 'saving', er = p.err || {}
+			const sl = p.slug || ASLUG, sm = p.slugMode || 'auto'
+			const cv = p.cover, soc = p.soc || {}
+			const left = D('display:flex;flex-direction:column;gap:18px;margin-top:' + (p.scrollY ? -p.scrollY + 'px' : '0'),
+				D('display:flex;flex-direction:column;gap:8px', Slug('URL slug', { mode: sm === 'taken' ? 'manual' : sm, value: sl, err: sm === 'taken' ? 'The slug "' + sl + '" is already used on ' + site.n + '.' : er.slug, suggest: sm === 'taken' ? sl + '-2' : null, reset: 'Reset to match the title', emptyText: 'Generated from the title', help: 'Generated from the title until you edit it. Lowercase letters, numbers and hyphens. Unique on ' + site.n + '.', help2: 'Lowercase letters, numbers and hyphens. Unique on ' + site.n + '.' }), D('display:flex;gap:6px;align-items:center;padding:8px 10px;background:var(--ui-bg-elevated);min-width:0', I('link', 12, 'color:var(--ui-text-muted)'), S('font:400 12px/18px \'IBM Plex Mono\',monospace;color:var(--ui-text-highlighted);word-break:break-all', site.url + '/' + sl))),
+				FW('Meta title', p.mt || ATT, { val: !!p.mt, ct: Ct([...(p.mt || '')].length, 30, 60), focus: p.focus === 'mt', dis, fb: p.mt ? null : 'Using article title', help: 'Recommended 30 to 60 characters. This is a guide, not a limit.' }),
+				FW('Meta description', p.md || p.ex || AD1, { val: !!p.md, area: true, ct: Ct([...(p.md || '')].length, 70, 160), focus: p.focus === 'md', dis, fb: p.md ? null : p.ex ? 'Using excerpt' : 'Using first sentence of the body', help: 'Recommended 70 to 160 characters.' }),
+				FW('Excerpt', p.ex || 'A short summary. It is also sent as the article teaser.', { val: !!p.ex, area: true, ct: S('font:400 12px \'IBM Plex Mono\',monospace;color:' + (p.exErr ? 'var(--ui-error)' : 'var(--ui-text-muted)'), [...(p.ex || '')].length + ' / 300'), err: p.exErr, dis, help: p.exErr ? null : 'Used as the description when there is none, and as the teaser for the frontend.' }),
+				D('display:flex;flex-direction:column;gap:10px', Pick(cv ? 'north-wall.jpg' : null, 'Cover image', cv ? null : 'Using the site social image' + (site.img ? ' (' + site.img + ')' : '') + '.'), cv && FW('Alt text', cv.alt || 'Describe the image for people who can\'t see it', { req: true, val: !!cv.alt, dis, help: cv.alt ? null : 'Needed before the cover counts as ready. Sent as image alt in the API.' })),
+				Dis('Social sharing', { open: p.social, tag: 'Optional', sum: p.social ? '' : (soc.t || soc.d || soc.img) ? 'Customised' : 'Uses the meta values', kids: [FW('Social title', soc.t || p.mt || ATT, { val: !!soc.t, ct: Ct([...(soc.t || '')].length, 0, 90), dis, fb: soc.t ? null : 'Using meta title' }), FW('Social description', soc.d || p.md || p.ex || AD1, { val: !!soc.d, area: true, dis, fb: soc.d ? null : 'Using meta description' }), Pick(soc.img || null, 'Social image', soc.img ? null : 'Using the cover image.')] }),
+				Dis('Advanced', { open: p.adv, sum: p.adv ? '' : p.canon ? 'Canonical URL set' : 'Canonical URL: automatic', kids: [FW('Canonical URL', p.canon || site.url + '/' + sl, { val: !!p.canon, mono: true, dis, err: er.canon, focus: p.focus === 'canon', fb: p.canon ? null : 'Using site address and slug', help: er.canon ? null : 'Only change this if the same content lives at another address.' })] }),
+				Sw(!!p.noindex, 'Hide from search engines', 'Sets noindex in the API. It doesn\'t change who can read the article.', dis))
+			const right = D('display:flex;flex-direction:column;gap:18px;min-width:0', SERP(p, site), SOC(p, site), D('display:flex;flex-direction:column;gap:8px', S('font-weight:600;color:var(--ui-text-highlighted)', 'Suggestions'), Sugs(p.codes || [], p.sugState, { dismissed: p.dismissed })), D('display:flex;gap:8px;align-items:center', B('What the frontend gets', { icon: 'braces', h: m ? 44 : 28, fs: 12, px: 10 })))
+			const body = m ? D('display:flex;flex-direction:column;gap:18px', Sugs(p.codes || [], p.sugState, { dismissed: p.dismissed }), left, SERP(p, site), SOC(p, site), B('What the frontend gets', { icon: 'braces' })) : D('display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;height:100%;overflow:hidden', D('overflow:hidden;min-height:0', left), right)
+			return Panel({ title: 'Search and sharing', w: 960, z: 60, notice: p.notice, saving: dis, cdis: p.noChange, confirm: dis ? 'Saving…' : 'Save changes' }, body)
+		}
+		const API = { title: ATT + ' | Renew', description: AD1, canonical_url: 'https://renew.example/' + ASLUG, robots: 'index, follow', og: { type: 'article', title: ATT + ' | Renew', description: AD1, url: 'https://renew.example/' + ASLUG, site_name: 'Renew', image: 'https://renew.example/media/north-wall.jpg', image_alt: 'A tiled bathroom wall during renovation', locale: 'en' }, twitter: { card: 'summary_large_image', title: ATT + ' | Renew', description: AD1, image: 'https://renew.example/media/north-wall.jpg', image_alt: 'A tiled bathroom wall during renovation' }, image: { url: 'https://renew.example/media/north-wall.jpg', alt: 'A tiled bathroom wall during renovation', source: 'cover_image' }, authors: [{ name: 'Inès Duarte', url: 'https://ines-duarte.example', same_as: ['https://www.linkedin.com/in/ines-duarte'] }], published_at: '2026-03-12T09:14:00Z', modified_at: '2026-10-15T11:02:00Z', fallbacks: { title: 'article_title', description: 'body_first_sentence', image: 'cover_image', canonical: 'site_base_url_and_slug' }, json_ld: { '@context': 'https://schema.org', '@type': 'Article', headline: ATT, description: AD1, image: ['https://renew.example/media/north-wall.jpg'], author: [{ '@type': 'Person', name: 'Inès Duarte', url: 'https://ines-duarte.example', sameAs: ['https://www.linkedin.com/in/ines-duarte'] }], datePublished: '2026-03-12T09:14:00Z', dateModified: '2026-10-15T11:02:00Z', mainEntityOfPage: 'https://renew.example/' + ASLUG } }
+		const apiDialog = () => {
+			const x = s.seo.api, raw = x.view === 'raw', st = x.state || 'ok'
+			const bar = D('display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap', D('display:flex;border:1px solid var(--ui-border-accented);width:200px', ...[['formatted', 'Formatted'], ['raw', 'Raw JSON']].map(([k, t]) => S('flex:1;height:' + bh + 'px;display:flex;align-items:center;justify-content:center;font-weight:' + ((raw ? 'raw' : 'formatted') === k ? 500 : 400) + ';background:' + ((raw ? 'raw' : 'formatted') === k ? 'var(--rc-sand)' : 'var(--ui-bg)') + ';color:' + ((raw ? 'raw' : 'formatted') === k ? 'var(--rc-on-sand)' : 'var(--ui-text-toned)'), t))), B(x.copied ? 'Copied' : 'Copy JSON', { icon: x.copied ? 'check' : 'copy', dis: st !== 'ok' }))
+			const KV = (k, v, fbk) => D('display:grid;grid-template-columns:' + (m ? '1fr' : '130px minmax(0,1fr)') + ';gap:' + (m ? 2 : 12) + 'px;padding:6px 0;border-bottom:1px solid var(--ui-border-muted)', S('color:var(--ui-text-muted);font:400 12px/20px \'IBM Plex Mono\',monospace', k), D('display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-width:0', S('color:var(--ui-text-highlighted);word-break:break-all;' + (m ? '' : ''), v), fbk && Chip(fbk)))
+			let body
+			if (st === 'loading') body = D('display:flex;flex-direction:column;gap:12px', ...[40, 80, 60, 70, 50, 75].map(w => S('display:block;height:14px;width:' + w + '%;background:var(--ui-bg-accented)')))
+			else if (st === 'error') body = Alert('error', 'circle-x', 'Couldn\'t load the SEO data', 'GET /v1/article/12/seo failed. Your article is unchanged. Try again in a moment.', 'Try again')
+			else if (raw) body = S('display:block;max-height:' + (m ? 440 : 400) + 'px;overflow:hidden;padding:12px;background:var(--ui-bg-elevated);white-space:pre;font:400 12px/18px \'IBM Plex Mono\',monospace;color:var(--ui-text-highlighted)', JSON.stringify(API, null, 2))
+			else body = D('display:flex;flex-direction:column', KV('title', API.title, 'article title + template'), KV('description', API.description, 'first sentence of the body'), KV('canonical_url', API.canonical_url, 'site address + slug'), KV('robots', API.robots, 'site default'), KV('og.type', 'article'), KV('og.image', API.image.url, 'cover image'), KV('og.image_alt', API.image.alt), KV('twitter.card', 'summary_large_image'), KV('authors', 'Inès Duarte · ines-duarte.example · 1 social link'), KV('published_at', '12 Mar 2026, 09:14'), KV('modified_at', '15 Oct 2026, 11:02'), KV('json_ld', 'Article · headline, image, author, datePublished, dateModified, mainEntityOfPage'))
+			return Shell({ title: 'What the frontend gets', desc: 'The SEO data returned by GET /v1/article/12/seo, read only. RenewCMS doesn\'t render pages or add meta tags: your frontend does.', close: true, w: 720, top: 40, z: 60, cancel: 'Close' }, D('display:flex;flex-direction:column;gap:12px', x.draft && D('display:flex;gap:8px;padding:10px 12px;background:var(--rc-info-soft);color:var(--ui-info)', I('info', 14, 'margin-top:3px'), S('color:var(--ui-text-toned)', 'This article is a draft. The API returns this data only to signed-in callers until it is published.')), bar, body))
+		}
+		// ---------- compose
+		const v = s.v
+		if (v === 'sites') {
+			Object.assign(shellBase, { nav: 'settings', crumbs: ['Settings', 'Sites'], mTitle: 'Sites', role: s.role }); shell = shellBase
+			main = D('flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;position:relative', sitesPage())
+			if (s.panel) ov.push(siteForm())
+			if (s.modal) ov.push(sitesModal())
+			if (!s.menu && s.fab !== false && !(s.sites && ['loading', 'error'].includes(s.sites.state))) ov.push(fab('Add site'))
+		} else if (v === 'authors') {
+			Object.assign(shellBase, { nav: 'authors', crumbs: ['Authors'], mTitle: 'Authors', role: s.role }); shell = shellBase
+			main = D('flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;position:relative', authorsPage())
+			if (s.panel) ov.push(s.panel.k === 'authorView' ? authorView() : authorForm())
+			if (s.modal) ov.push(authorsModal())
+			if (s.list !== 'empty' && s.list !== 'error' && s.list !== 'loading') ov.push(fab('Add author'))
+		} else if (v === 'editor') {
+			if (s.metaOpen) edMeta = metaUI()
+			if (s.seo && s.seo.side) edSeo = SEOSIDE(s.seo.side)
+			if (s.seo && s.seo.panel) ov.push(seoPanel())
+			if (s.seo && s.seo.pick) ov.push(Picker({ title: 'Choose a cover image', desc: 'The cover for this article.', sel: 1, z: 70 }))
+			if (s.seo && s.seo.api) ov.push(apiDialog())
+			if (s.modal) ov.push(newAuthorModal())
+			if (s.ann) ov.push(D('position:absolute;z-index:20;' + (m ? 'left:16px;right:16px;bottom:88px' : 'left:248px;bottom:20px'), Note(s.ann)))
+		} else if (v === 'profile') {
+			if (s.panel) ov.push(authorForm())
+		}
+		if (s.toasts) ov.push(Toasts())
+		return { shell, mob: m, main, ov: D('display:contents', ...ov), edMeta, edSeo }
+	}
+}
+</script>
+</body>
+</html>

docs/design/source/IntegrationPage.dc.html

@@ -75,7 +75,7 @@
 <sc-if value="{{ ep.noFields }}"><span style="color:var(--ui-text-muted)">No request body.</span></sc-if></div>
 <dc-import name="CodeSnippet" tabs="{{ ep.snips }}" hint-size="100%,200px"></dc-import>
 <div style="display:flex;flex-direction:column;gap:6px"><span style="font-weight:600;color:var(--ui-text-highlighted)">Errors</span>
-<sc-for list="{{ ep.errs }}" as="e" hint-placeholder-count="2"><div title="{{ e.cap }}" style="display:flex;align-items:baseline;gap:10px"><span style="width:36px;height:20px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font:500 11px 'IBM Plex Mono',monospace">{{ e.c }}</span><span style="min-width:0;color:var(--ui-text-toned);text-wrap:pretty">{{ e.cap }}</span></div></sc-for></div>
+<sc-for list="{{ ep.errs }}" as="e" hint-placeholder-count="2"><div title="{{ e.cap }}" style="display:flex;align-items:baseline;gap:10px"><span style="width:36px;height:20px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font:500 11px 'IBM Plex Mono',monospace">{{ e.c }}</span><sc-if value="{{ e.plain }}"><span style="min-width:0;color:var(--ui-text-toned);text-wrap:pretty">{{ e.cap }}</span></sc-if><sc-if value="{{ e.code }}"><span style="min-width:0;color:var(--ui-text-toned)"><code>{{ e.cap }}</code></span></sc-if></div></sc-for></div>
 </div>
 </sc-if>
 </div>
@@ -104,7 +104,7 @@
 <span style="color:var(--ui-text-toned);text-wrap:pretty">Every error is a plain-text body with a single sentence. The status code is in the HTTP status line, and the Content-Type is text/plain.</span>
 <div style="border:1px solid var(--ui-border);background:var(--ui-bg);overflow:hidden">
 <div style="display:grid;grid-template-columns:{{ errCols }};gap:12px;padding:8px 12px;background:var(--ui-bg-elevated);color:var(--ui-text-muted);font-weight:500"><span>Status</span><span>Meaning</span><sc-if value="{{ desk }}"><span>Typical cause</span></sc-if></div>
-<sc-for list="{{ errRows }}" as="r" hint-placeholder-count="8"><div style="display:grid;grid-template-columns:{{ errCols }};gap:2px 12px;padding:10px 12px;border-top:1px solid var(--ui-border)"><span style="font:500 13px 'IBM Plex Mono',monospace;color:var(--ui-text-highlighted)">{{ r.c }}</span><span style="font-weight:500;color:var(--ui-text-highlighted)">{{ r.m }}</span><span style="grid-column:{{ errCause }};color:var(--ui-text-toned);text-wrap:pretty">{{ r.w }}</span></div></sc-for>
+<sc-for list="{{ errRows }}" as="r" hint-placeholder-count="8"><div style="display:grid;grid-template-columns:{{ errCols }};gap:2px 12px;padding:10px 12px;border-top:1px solid var(--ui-border)"><span style="font:500 13px 'IBM Plex Mono',monospace;color:var(--ui-text-highlighted)">{{ r.c }}</span><span style="font-weight:500;color:var(--ui-text-highlighted)">{{ r.m }}</span><span style="grid-column:{{ errCause }};color:var(--ui-text-toned);text-wrap:pretty">{{ r.w }}</span><sc-if value="{{ r.n }}"><span style="grid-column:{{ errNoteCol }};color:var(--ui-text-muted);font-size:12px;line-height:18px;text-wrap:pretty">{{ r.n }}</span></sc-if></div></sc-for>
 </div>
 <dc-import name="CodeSnippet" tabs="{{ errSnips }}" hint-size="100%,120px"></dc-import>
 </section>
@@ -134,7 +134,7 @@ class Component extends DCLogic {
 	rootRef = React.createRef()
 	BASE = 'https://cms.renew.example'
 	KEY = 'rcms_Kf3x9QwL0aBc…'
-	IDX = [['auth', 'Authentication'], ['articles', 'Articles'], ['media', 'Media'], ['images', 'Images and variants'], ['users', 'Users and invites'], ['settings', 'Settings'], ['session', 'Session only'], ['errors', 'Errors'], ['notes', 'Notes']]
+	IDX = [['auth', 'Authentication'], ['articles', 'Articles'], ['seo', 'Search and sharing'], ['media', 'Media'], ['images', 'Images and variants'], ['users', 'Users and invites'], ['settings', 'Settings'], ['session', 'Session only'], ['errors', 'Errors'], ['notes', 'Notes']]
 	componentDidMount() {
 		const i = (this.props.s && this.props.s.int) || {}
 		const go = () => { if (i.scroll) this.scrollTo(i.scroll, !!this.props.mobile) }
@@ -179,14 +179,18 @@ class Component extends DCLogic {
 		const j = o => JSON.stringify(o, null, 2)
 		const G = {
 			articles: { title: 'Articles', desc: 'Read, write and publish articles. Titles can\'t be changed after creation.', eps: [
-				A('art-list', 'GET', '/v1/article/', 'List articles. Anonymous callers get online articles only.', 'Public', 1, [e401], [], { pub: 1, r: j([{ id: 12, title: 'How we price a bathroom renovation', status: 'online' }]) }),
+				A('art-list', 'GET', '/v1/article/', 'List articles, one page at a time. Anonymous callers get online articles only, and the total counts only those. The total is in the X-Total-Count response header; the body stays a JSON array.', 'Public', 1, [[400, 'Invalid page or size.'], e401], [S('page', 'integer', 'No', '1 or higher. Default 1. A page past the end returns an empty array.'), S('size', 'integer', 'No', 'One of 5, 25, 50 or 100. Default 25.')], { qp: 1, pub: 1, r: j([{ id: 12, title: 'How we price a bathroom renovation', status: 'online' }]) }),
 				A('art-get', 'GET', '/v1/article/{id}', 'Get one article. Drafts answer 404 to anonymous callers.', 'Public', 1, [e401, e404], [], { pub: 1, r: j({ id: 12, title: 'How we price a bathroom renovation', status: 'online', body: 'A bathroom renovation is priced by room size, plumbing changes and finish level.', body_format: 'markdown' }) }),
 				A('art-create', 'POST', '/v1/article/', 'Create a draft article.', 'Verified user', 1, [[400, mm], e401], [S('title', 'string', 'Yes', '3 to 200 characters. Can\'t be changed later.'), S('body', 'string', 'No', 'Optional. Any length.')], { body: { title: 'Choosing tiles for a small bathroom' }, r: j({ id: 13, status: 'draft' }) }),
-				A('art-update', 'PATCH', '/v1/article/{id}', 'Update the body of an article.', 'Verified user', 1, [[400, mm], e401, e404], [S('body', 'string', 'Yes', 'Any length.')], { body: { body: 'Updated text.' }, r: j({ id: 12, status: 'draft' }) }),
+				A('art-update', 'PATCH', '/v1/article/{id}', 'Update the body of an article.', 'Verified user', 1, [[400, mm], e401, e404], [S('body', 'string', 'No', 'Any length.'), S('slug', 'string', 'No', 'Lowercase letters, numbers and hyphens. Unique on the article\'s site. 409 slug_taken if used.'), S('excerpt', 'string', 'No', 'Up to 300 characters. Also the article teaser.'), S('seo_title', 'string', 'No', 'Up to 120 characters. Falls back to the article title.'), S('seo_description', 'string', 'No', 'Up to 320 characters. Falls back to the excerpt, then the first sentence of the body.'), S('cover_image_id', 'integer', 'No', 'A media item. Falls back to the site social image.'), S('cover_image_alt', 'string', 'No', 'Up to 200 characters.'), S('social_title', 'string', 'No', 'Open Graph and Twitter title. Falls back to the resolved title.'), S('social_description', 'string', 'No', 'Falls back to the resolved description.'), S('social_image_id', 'integer', 'No', 'Falls back to the cover image.'), S('canonical_url', 'string', 'No', 'An absolute https URL. Default is the site base URL plus the slug.'), S('noindex', 'boolean', 'No', 'Sets robots to noindex in the SEO object. It doesn\'t change who can read the article.'), S('seo_dismissed', 'string[]', 'No', 'Suggestion codes the editor dismissed. Used by the back-office only.')], { body: { slug: 'bathroom-costs', seo_title: 'What a bathroom renovation costs' }, r: j({ id: 12, status: 'draft', slug: 'bathroom-costs' }) }),
 				A('art-pub', 'PATCH', '/v1/article/{id}/publish', 'Publish an article.', 'Verified user', 1, [e401, e404], [], { r: j({ id: 12, status: 'online' }) }),
 				A('art-unpub', 'PATCH', '/v1/article/{id}/unpublish', 'Unpublish an article.', 'Verified user', 1, [e401, e404], [], { r: j({ id: 12, status: 'draft' }) }),
 				A('art-del', 'DELETE', '/v1/article/{id}', 'Delete an article and its images.', 'Verified user', 1, [e401, e404], [], { r: '204 No Content' })
 			] },
+			seo: { title: 'Search and sharing', desc: 'RenewCMS doesn\'t render pages or add meta tags. These endpoints give your frontend the resolved SEO data and the list of published URLs.', eps: [
+				A('seo-get', 'GET', '/v1/article/{id}/seo', 'The resolved SEO object for one article: title (with the site template applied), description, canonical URL, robots, Open Graph and Twitter values, image with alt, authors, dates and ready-made Article JSON-LD. Every empty field already holds its fallback. Drafts answer 404 to anonymous callers.', 'Public', 1, [e401, e404], [], { pub: 1, r: j({ title: 'How we price a bathroom renovation | Renew', description: 'A bathroom renovation is priced by room size, plumbing changes and finish level.', canonical_url: 'https://renew.example/how-we-price-a-bathroom-renovation', robots: 'index, follow', og: { type: 'article', title: 'How we price a bathroom renovation | Renew', image: 'https://renew.example/media/north-wall.jpg', image_alt: 'A tiled bathroom wall', site_name: 'Renew' }, twitter: { card: 'summary_large_image' }, authors: [{ name: 'Inès Duarte', url: 'https://ines-duarte.example', same_as: [] }], published_at: '2026-03-12T09:14:00Z', modified_at: '2026-10-15T11:02:00Z', json_ld: { '@type': 'Article' } }) }),
+				A('sitemap', 'GET', '/v1/site/{key}/sitemap', 'Published article URLs for one site, each with its last-modified date and a noindex flag, one page at a time. Use it to build your sitemap.xml. The total is in the X-Total-Count response header.', 'Public', 1, [[400, mm], e401, [404, 'site_not_found', true]], [S('page', 'integer', 'No', '1 or higher. Default 1.'), S('size', 'integer', 'No', 'One of 25, 50, 100 or 500. Default 100.')], { qp: 1, pub: 1, r: j([{ url: 'https://renew.example/how-we-price-a-bathroom-renovation', modified_at: '2026-10-15T11:02:00Z', noindex: false }]) })
+			] },
 			media: { title: 'Media', desc: 'The image library. One image can be used in many articles.', eps: [
 				A('med-list', 'GET', '/v1/media/', 'List images.', 'Verified user', 1, [e401], [], { r: j([{ id: 4, filename: 'north-wall.jpg', size: 3900000 }]) }),
 				A('med-up', 'POST', '/v1/media/', 'Upload an image (multipart).', 'Verified user', 1, [[400, mm], e401, [413, 'The file is over 10 MB.'], [415, 'Not a PNG, JPEG, WEBP or SVG image.']], [S('file', 'file', 'Yes', 'PNG, JPEG, WEBP or SVG, up to 10 MB.')], { multi: true, form: [['file', '@north-wall.jpg']], r: j({ id: 4, filename: 'north-wall.jpg', url: '/static/uploadedImages/3f9c.jpg' }) }),
@@ -232,10 +236,10 @@ class Component extends DCLogic {
 				const chips = [chip(e.acc, e.acc === 'Owner only' ? { bg: 'var(--ui-bg-elevated)', fg: 'var(--ui-text-highlighted)', fw: 500 } : {}), chip('API key OK', { icon: 'check', bg: 'var(--rc-success-soft)', fg: 'var(--ui-success)', bd: 'transparent', fw: 500 })]
 				return { anchor: 'ep-' + e.id, open, m: e.m, p: e.p, d: e.d, mBg: MB[e.m][0], mFg: MB[e.m][1], mBd: MB[e.m][2], chev: open ? 'chevron-up' : 'chevron-down', rowBg: open ? 'var(--ui-bg-muted)' : 'transparent', label: e.m + ' ' + e.p + '. ' + e.d, chips,
 					toggle: () => this.setState(s => ({ open: { ...s.open, [e.id]: !s.open[e.id] } })),
-					bodyTitle: e.multi ? 'Request body · multipart/form-data, 1 file field' : e.body ? 'Request body · JSON' : 'Request body', hasFields: e.fields.length > 0, noFields: e.fields.length === 0, fields: e.fields,
+					bodyTitle: e.qp ? 'Query parameters' : e.multi ? 'Request body · multipart/form-data, 1 file field' : e.body ? 'Request body · JSON' : 'Request body', hasFields: e.fields.length > 0, noFields: e.fields.length === 0, fields: e.fields,
 					tabs: ['fetch', 'curl', 'Response'].map(t => { const k = t === 'Response' ? 'response' : t, on = (k === tab) || (t === tab); return { t, on, bd: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-text-highlighted)' : 'var(--ui-text-toned)', pick: () => this.setState(s => ({ tab: { ...s.tab, [e.id]: k } })) } }),
 					snips: [{ k: 'fetch', label: 'fetch', code: fe }, { k: 'curl', label: 'curl', code: curl }, { k: 'response', label: 'Response', code: e.r }],
-					errs: e.errs.map(([c, cap]) => ({ c, cap })) }
+					errs: e.errs.map(([c, cap, code]) => ({ c, cap, code: !!code, plain: !code })) }
 			}) }
 		})
 	}
@@ -263,11 +267,11 @@ class Component extends DCLogic {
 			fCols: mob ? 'minmax(0,1fr) auto auto' : '120px 72px 72px minmax(0,1fr)', ruleCol: mob ? '1 / -1' : 'auto',
 			sessGroups: [sg('System · owner only', [['GET', '/v1/system/update', 'Update status'], ['POST', '/v1/system/update/check', 'Check for update'], ['POST', '/v1/system/update/download', 'Download update'], ['POST', '/v1/system/update/restart', 'Restart']]), sg('Sign in and account', [['POST', '/v1/auth/login', 'Log in'], ['POST', '/v1/auth/logout', 'Log out'], ['POST', '/v1/auth/register', 'Register'], ['POST', '/v1/auth/verify', 'Verify email'], ['POST', '/v1/auth/password-reset', 'Reset password']]), sg('API key management', [['GET', '/v1/api-key', 'List keys'], ['POST', '/v1/api-key', 'Create a key'], ['DELETE', '/v1/api-key/{id}', 'Revoke a key']])],
 			sessCols: mob ? 'none' : '280px minmax(0,1fr) auto', sessGap: mob ? '2px' : '16px', sessPad: mob ? '8px 14px' : '0 14px', chipSelf: mob ? 'flex-start' : 'center',
-			errCols: mob ? '56px minmax(0,1fr)' : '64px 200px minmax(0,1fr)', errCause: mob ? '2' : 'auto',
+			errCols: mob ? '56px minmax(0,1fr)' : '64px 200px minmax(0,1fr)', errCause: mob ? '2' : 'auto', errNoteCol: mob ? '2' : '3',
 			errRows: [
 				{ c: 400, m: 'Bad request', w: '"The request cannot be processed due to a mismatch in the format of the body." or "The expiry must be a date in the future." Image requests answer with a JSON body whose error is "unknown_variant" or "unsupported_parameter".' },
 				{ c: 401, m: 'Unauthorized', w: '"You must be logged in to access this resource." Sent for an invalid, unknown, expired or revoked key, even on public routes, and for a key whose user was deleted or unverified.' },
-				{ c: 403, m: 'Forbidden', w: '"This action needs a real session." (a session-only route called with a key), "Only the owner can do this." or "You must verify your account to access this resource."' },
+				{ c: 403, m: 'Forbidden', n: 'Site SEO defaults are owner only. Article SEO fields need only the right to edit the article.', w: '"This action needs a real session." (a session-only route called with a key), "Only the owner can do this." or "You must verify your account to access this resource."' },
 				{ c: 404, m: 'Not found', w: '"Article not found", "Image not found", "Invite not found" or "API key not found". Drafts answer 404 to anonymous callers.' },
 				{ c: 429, m: 'Too many requests', w: '"Too many requests. Please try again later." A per-key limit of 120 requests per minute also sends a Retry-After header.' },
 				{ c: 500, m: 'Server error', w: '"Internal server error"' }

docs/design/source/MediaFrame.dc.html

@@ -142,6 +142,36 @@ class Component extends DCLogic {
 
 		const Header = () => D('display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap', D('flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px', S('font:600 20px/28px \'IBM Plex Sans\',sans-serif;color:var(--ui-text-highlighted)', 'Media'), S('color:var(--ui-text-muted)', 'Every image you\'ve uploaded, ready to use in any article.')), !m && (s.limited ? B('Try again in 0:42', { k: 'primary', icon: 'timer', dis: true }) : B('Upload', { k: 'primary', icon: 'upload', dis: s.offline })))
 
+		const Pager = () => {
+			const g = { page: 1, per: 25, total: imgs.length, ...(s.pg || {}) }
+			g.pages = g.pages || Math.max(1, Math.ceil(g.total / g.per))
+			const busy = !!g.loading, ring = k => g.focus === k ? 'outline:2px solid var(--ui-primary);outline-offset:2px;' : ''
+			const fmt = n => String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+			const from = g.total ? (g.page - 1) * g.per + 1 : 0, to = Math.min(g.page * g.per, g.total)
+			const back = busy || g.page === 1 ? 0.4 : 1, fwd = busy || g.page === g.pages ? 0.4 : 1
+			const PB = (ic, op, rg, label) => S('width:' + bh + 'px;height:' + bh + 'px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted);opacity:' + op + ';' + (rg || ''), I(ic))
+			const set = new Set([1, g.pages, g.page - 1, g.page, g.page + 1].filter(n => n >= 1 && n <= g.pages))
+			const arr = g.pages <= 7 ? Array.from({ length: g.pages }, (_, i) => i + 1) : [...set].sort((a, b) => a - b)
+			const nums = []
+			arr.forEach((n, i) => {
+				if (i && n - arr[i - 1] > 1) nums.push(S('min-width:' + bh + 'px;height:' + bh + 'px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)', '…'))
+				const cur = n === g.page
+				nums.push(S('min-width:' + bh + 'px;height:' + bh + 'px;padding:0 6px;display:flex;align-items:center;justify-content:center;border:1px solid ' + (cur ? 'var(--ui-primary)' : 'var(--ui-border-accented)') + ';background:' + (cur ? 'var(--rc-sand)' : 'var(--ui-bg)') + ';color:' + (cur ? 'var(--rc-on-sand)' : 'var(--ui-text-highlighted)') + ';font-weight:' + (cur ? 600 : 400), String(n)))
+			})
+			const Size = () => D('position:relative', S('height:' + bh + 'px;padding:0 8px 0 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted);' + ring('size'), g.per + ' per page', I('chevron-down', 14)),
+				g.sizeOpen && D('position:absolute;' + (m ? 'right' : 'left') + ':0;bottom:calc(100% + 4px);z-index:40;width:160px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px', ...[5, 25, 50, 100].map(n => D('height:' + bh + 'px;padding:0 8px;display:flex;align-items:center;background:' + (n === g.per ? 'var(--rc-sand)' : 'transparent') + ';color:' + (n === g.per ? 'var(--rc-on-sand)' : 'var(--ui-text-highlighted)') + ';font-weight:' + (n === g.per ? 600 : 400), n + ' per page'))))
+			const sum = S('color:var(--ui-text-muted)', busy ? 'Loading page ' + g.loading + '…' : 'Showing ' + from + '–' + to + ' of ' + fmt(g.total))
+			const out = []
+			if (g.err) out.push(Alert('error', 'circle-x', g.err, 'Check your connection and try again.', 'Retry'))
+			if (g.note) out.push(Alert('info', 'info', g.note))
+			if (m) {
+				out.push(D('display:flex;flex-direction:column;gap:12px;padding:4px 0 16px', D('display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between', sum, Size()),
+					g.pages > 1 && D('display:flex;align-items:center;gap:8px', S('flex:1;height:44px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted);font-weight:500;opacity:' + back + ';' + ring('prev'), I('chevron-left'), 'Previous'), S('padding:0 4px;color:var(--ui-text-highlighted);font-weight:500;white-space:nowrap', 'Page ' + g.page + ' of ' + g.pages), S('flex:1;height:44px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted);font-weight:500;opacity:' + fwd + ';' + ring('next'), 'Next', I('chevron-right')))))
+			} else {
+				out.push(D('display:flex;align-items:center;gap:16px', D('flex:1;display:flex', sum), Size(), g.pages > 1 && D('display:flex;align-items:center;gap:4px;justify-content:flex-end', PB('chevrons-left', back), PB('chevron-left', back, ring('prev')), ...nums, PB('chevron-right', fwd, ring('next')), PB('chevrons-right', fwd))))
+			}
+			return out
+		}
 		const pageBody = () => {
 			const parts = []
 			if (s.empty === 'first') { parts.push(Empty('images', 'No images yet', 'Upload your first image. You can use it in any article.', 'Upload an image', true), S('align-self:center;color:var(--ui-text-muted);font-size:12px', 'PNG, JPEG, WEBP, SVG · max 10 MB each')); return parts }
@@ -153,12 +183,13 @@ class Component extends DCLogic {
 				: D('display:flex;align-items:flex-end;gap:12px;border-bottom:1px solid var(--ui-border)', TabRow(), S('display:flex;padding-bottom:6px;gap:8px', Search(), Sort(), pb, Toggle()))
 			parts.push(tb)
 			if (UP) parts.push(UpPanel())
-			if (s.loading) parts.push(Skel())
+			if (s.loading) { parts.push(Skel()); if (s.pg) parts.push(...Pager()) }
 			else if (s.error) { }
 			else if (s.empty === 'search') parts.push(Empty('search', 'No images match "wall"', 'Nothing matches in Unused. Check the spelling, or clear the filters.', 'Clear filters', false))
 			else if (tab === 'dups') parts.push(s.dupEmpty ? Empty('copy', 'No duplicates', 'Every image in your library is different.', 'Back to all images', false) : Groups())
 			else {
 				if (view === 'grid') parts.push(SelectAll(), Grid()); else parts.push(m ? Cards() : Table())
+				parts.push(...Pager())
 			}
 			return parts
 		}

docs/design/source/RenewCMS Screens Back-office.dc.html

@@ -37,10 +37,10 @@
 <div style="display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start">
 <sc-for list="{{ g.states }}" as="st" hint-placeholder-count="4">
 <div style="display:flex;flex-direction:column;gap:12px">
-<div style="display:flex;flex-direction:column;gap:2px;max-width:1040px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ st.name }}</span><span style="font-size:13px;color:var(--ui-text-muted)">{{ st.trigger }}</span></div>
+<div style="display:flex;flex-direction:column;gap:2px;max-width:1040px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ st.name }}<sc-if value="{{ st.clock }}"><span style="margin-left:10px;padding:1px 6px;border:1px dashed var(--ui-border-accented);color:var(--ui-text-toned);font:500 11px/16px 'IBM Plex Mono',monospace;vertical-align:middle">Clock-sensitive</span></sc-if></span><span style="font-size:13px;color:var(--ui-text-muted)">{{ st.trigger }}</span></div>
 <div style="display:flex;gap:24px;align-items:flex-start">
-<div style="width:720px;height:450px;overflow:hidden;border:1px solid var(--ui-border);flex-shrink:0"><div style="width:1440px;height:900px;zoom:0.5"><sc-if value="{{ st.notMedia }}"><dc-import name="AppFrame" s="{{ st }}" mobile="{{ false }}" hint-size="1440px,900px"></dc-import></sc-if><sc-if value="{{ st.isMedia }}"><dc-import name="MediaFrame" s="{{ st }}" mobile="{{ false }}" hint-size="1440px,900px"></dc-import></sc-if><sc-if value="{{ st.isAct }}"><dc-import name="ActivityFrame" s="{{ st }}" mobile="{{ false }}" hint-size="1440px,900px"></dc-import></sc-if><sc-if value="{{ st.isVar }}"><dc-import name="VariantsFrame" s="{{ st.vs }}" mobile="{{ false }}" hint-size="1440px,900px"></dc-import></sc-if><sc-if value="{{ st.isImg }}"><div style="width:1440px;height:900px;overflow:hidden;box-sizing:border-box;background:var(--ui-bg-muted);padding:40px 280px"><dc-import name="IntegrationImages" s="{{ st.img }}" mobile="{{ false }}" hint-size="880px,820px"></dc-import></div></sc-if></div></div>
-<div style="width:293px;height:633px;overflow:hidden;border:1px solid var(--ui-border);flex-shrink:0"><div style="width:390px;height:844px;zoom:0.75"><sc-if value="{{ st.notMedia }}"><dc-import name="AppFrame" s="{{ st.m }}" mobile="{{ true }}" hint-size="390px,844px"></dc-import></sc-if><sc-if value="{{ st.isMedia }}"><dc-import name="MediaFrame" s="{{ st.m }}" mobile="{{ true }}" hint-size="390px,844px"></dc-import></sc-if><sc-if value="{{ st.isAct }}"><dc-import name="ActivityFrame" s="{{ st.m }}" mobile="{{ true }}" hint-size="390px,844px"></dc-import></sc-if><sc-if value="{{ st.isVar }}"><dc-import name="VariantsFrame" s="{{ st.vm }}" mobile="{{ true }}" hint-size="390px,844px"></dc-import></sc-if><sc-if value="{{ st.isImg }}"><div style="width:390px;height:844px;overflow:hidden;box-sizing:border-box;background:var(--ui-bg-muted);padding:16px"><dc-import name="IntegrationImages" s="{{ st.img }}" mobile="{{ true }}" hint-size="358px,800px"></dc-import></div></sc-if></div></div>
+<div style="width:720px;height:450px;overflow:hidden;border:1px solid var(--ui-border);flex-shrink:0"><div style="width:1440px;height:900px;zoom:0.5"><sc-if value="{{ st.notMedia }}"><dc-import name="AppFrame" s="{{ st }}" mobile="{{ false }}" hint-size="1440px,900px"></dc-import></sc-if><sc-if value="{{ st.isMedia }}"><dc-import name="MediaFrame" s="{{ st }}" mobile="{{ false }}" hint-size="1440px,900px"></dc-import></sc-if><sc-if value="{{ st.isAct }}"><dc-import name="ActivityFrame" s="{{ st }}" mobile="{{ false }}" hint-size="1440px,900px"></dc-import></sc-if><sc-if value="{{ st.isDir }}"><dc-import name="DirectoryFrame" s="{{ st.m }}" mobile="{{ false }}" hint-size="390px,844px"></dc-import></sc-if><sc-if value="{{ st.isVar }}"><dc-import name="VariantsFrame" s="{{ st.vs }}" mobile="{{ false }}" hint-size="1440px,900px"></dc-import></sc-if><sc-if value="{{ st.isImg }}"><div style="width:1440px;height:900px;overflow:hidden;box-sizing:border-box;background:var(--ui-bg-muted);padding:40px 280px"><dc-import name="IntegrationImages" s="{{ st.img }}" mobile="{{ false }}" hint-size="880px,820px"></dc-import></div></sc-if></div></div>
+<div style="width:293px;height:633px;overflow:hidden;border:1px solid var(--ui-border);flex-shrink:0"><div style="width:390px;height:844px;zoom:0.75"><sc-if value="{{ st.notMedia }}"><dc-import name="AppFrame" s="{{ st.m }}" mobile="{{ true }}" hint-size="390px,844px"></dc-import></sc-if><sc-if value="{{ st.isMedia }}"><dc-import name="MediaFrame" s="{{ st.m }}" mobile="{{ true }}" hint-size="390px,844px"></dc-import></sc-if><sc-if value="{{ st.isAct }}"><dc-import name="ActivityFrame" s="{{ st.m }}" mobile="{{ true }}" hint-size="390px,844px"></dc-import></sc-if><sc-if value="{{ st.isDir }}"><dc-import name="DirectoryFrame" s="{{ st.m }}" mobile="{{ true }}" hint-size="390px,844px"></dc-import></sc-if><sc-if value="{{ st.isVar }}"><dc-import name="VariantsFrame" s="{{ st.vm }}" mobile="{{ true }}" hint-size="390px,844px"></dc-import></sc-if><sc-if value="{{ st.isImg }}"><div style="width:390px;height:844px;overflow:hidden;box-sizing:border-box;background:var(--ui-bg-muted);padding:16px"><dc-import name="IntegrationImages" s="{{ st.img }}" mobile="{{ true }}" hint-size="358px,800px"></dc-import></div></sc-if></div></div>
 </div>
 </div>
 </sc-for>
@@ -53,6 +53,7 @@
 </sc-for>
 
 <section data-screen-label="States matrix: controls" style="display:flex;flex-direction:column;gap:20px"><div style="display:flex;flex-direction:column;gap:6px;max-width:1100px"><h2 style="margin:0;font:600 28px/36px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">States matrix: controls</h2><p style="margin:4px 0 0;font-size:15px;line-height:24px;color:var(--ui-text-toned);text-wrap:pretty">Hover, focus-visible, active and disabled for every interactive element, once. Focus-visible is a 2 px --ui-primary outline with a 2 px offset (inset for tabs, segmented controls and rows). Disabled is 40% opacity (rows 55%). The mobile column set has no hover and uses 44 px targets. The theme switch above applies to both.</p></div><div style="display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap"><dc-import name="StatesMatrix" mobile="{{ false }}" hint-size="1240px,2400px"></dc-import><dc-import name="StatesMatrix" mobile="{{ true }}" hint-size="390px,2400px"></dc-import></div></section>
+<section data-screen-label="Sites and authors: copy" style="display:flex;flex-direction:column;gap:20px;max-width:1240px"><h2 style="margin:0;font:600 28px/36px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Sites and authors: copy per state</h2><div style="background:var(--ui-bg);border:1px solid var(--ui-border)"><sc-for list="{{ dirCopy }}" as="r" hint-placeholder-count="5"><div style="display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;padding:10px 12px;border-top:1px solid var(--ui-border);line-height:20px"><span style="font:500 13px 'IBM Plex Mono',monospace;color:var(--ui-text-highlighted)">{{ r.a }}</span><span style="color:var(--ui-text-highlighted);text-wrap:pretty">{{ r.b }}</span></div></sc-for></div></section>
 <section style="display:flex;flex-direction:column;gap:20px;max-width:1240px"><h2 style="margin:0;font:600 28px/36px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Activity: copy per state</h2><div style="background:var(--ui-bg);border:1px solid var(--ui-border)"><sc-for list="{{ spCopy }}" as="r" hint-placeholder-count="5"><div style="display:grid;grid-template-columns:220px minmax(0,1fr);padding:10px 12px;border-top:1px solid var(--ui-border);line-height:20px"><span style="font:500 13px 'IBM Plex Mono',monospace;color:var(--ui-text-highlighted)">{{ r.a }}</span><span style="color:var(--ui-text-highlighted);text-wrap:pretty">{{ r.b }}</span></div></sc-for></div></section>
 <section style="display:flex;flex-direction:column;gap:20px;max-width:1240px"><h2 style="margin:0;font:600 28px/36px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Activity: component inventory (Nuxt UI v4)</h2><div style="background:var(--ui-bg);border:1px solid var(--ui-border)"><sc-for list="{{ spComps }}" as="r" hint-placeholder-count="5"><div style="display:grid;grid-template-columns:220px minmax(0,1fr);padding:10px 12px;border-top:1px solid var(--ui-border);line-height:20px"><span style="font:500 13px 'IBM Plex Mono',monospace;color:var(--ui-text-highlighted)">{{ r.a }}</span><span style="color:var(--ui-text-highlighted);text-wrap:pretty">{{ r.b }}</span></div></sc-for></div></section>
 <section style="display:flex;flex-direction:column;gap:20px;max-width:1240px"><h2 style="margin:0;font:600 28px/36px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Activity: API calls</h2><div style="background:var(--ui-bg);border:1px solid var(--ui-border)"><sc-for list="{{ spApi }}" as="r" hint-placeholder-count="5"><div style="display:grid;grid-template-columns:220px minmax(0,1fr);padding:10px 12px;border-top:1px solid var(--ui-border);line-height:20px"><span style="font:500 13px 'IBM Plex Mono',monospace;color:var(--ui-text-highlighted)">{{ r.a }}</span><span style="color:var(--ui-text-highlighted);text-wrap:pretty">{{ r.b }}</span></div></sc-for></div></section>
@@ -94,18 +95,18 @@ class Component extends DCLogic {
 	}
 	boGroups() {
 		const base = [
-			{ t: 'How we price a bathroom renovation', on: true, c: '12 Mar 2026', u: '2 hours ago' },
-			{ t: 'Choosing lime plaster for old stone walls', on: false, c: '9 Sep 2026', u: 'Yesterday' },
-			{ t: 'Before and after: the Rue Verte kitchen', on: true, c: '28 Aug 2026', u: '3 days ago' },
-			{ t: 'Winter checklist for timber windows', on: false, c: '2 Sep 2026', u: '5 days ago' },
-			{ t: 'Why we reuse original floorboards', on: true, c: '14 Jun 2026', u: '18 Aug 2026' },
-			{ t: 'Our first passive-house retrofit', on: true, c: '3 Apr 2026', u: '2 Jul 2026' }
+			{ t: 'How we price a bathroom renovation', au: ['Inès Duarte'], on: true, c: '12 Mar 2026', u: '2 hours ago' },
+			{ t: 'Choosing lime plaster for old stone walls', au: ['Inès Duarte', 'Camille Roche'], on: false, c: '9 Sep 2026', u: 'Yesterday', seo: 2 },
+			{ t: 'Before and after: the Rue Verte kitchen', au: ['Jonas Pereira'], on: true, c: '28 Aug 2026', u: '3 days ago', seo: 'hidden' },
+			{ t: 'Winter checklist for timber windows', au: ['Inès Duarte', 'Jonas Pereira', 'Camille Roche', 'Paul Huber', 'Léa Fontaine'], on: false, c: '2 Sep 2026', u: '5 days ago', seo: 3 },
+			{ t: 'Why we reuse original floorboards', au: ['Paul Huber'], on: true, c: '14 Jun 2026', u: '18 Aug 2026' },
+			{ t: 'Our first passive-house retrofit', au: [], on: true, c: '3 Apr 2026', u: '2 Jul 2026' }
 		]
 		const more = [
-			{ t: 'Repointing a gable wall in lime mortar', on: true, c: '21 May 2026', u: '4 Jun 2026' },
-			{ t: 'What a heat pump survey includes', on: false, c: '30 Jul 2026', u: '1 Aug 2026' },
-			{ t: 'Choosing a damp-proof course', on: true, c: '7 Feb 2026', u: '19 Apr 2026' },
-			{ t: 'Reglazing sash windows without replacing them', on: true, c: '16 Jan 2026', u: '2 Mar 2026' }
+			{ t: 'Repointing a gable wall in lime mortar', au: ['Camille Roche'], on: true, c: '21 May 2026', u: '4 Jun 2026' },
+			{ t: 'What a heat pump survey includes', au: ['Jonas Pereira'], on: false, c: '30 Jul 2026', u: '1 Aug 2026' },
+			{ t: 'Choosing a damp-proof course', au: ['Inès Duarte'], on: true, c: '7 Feb 2026', u: '19 Apr 2026' },
+			{ t: 'Reglazing sash windows without replacing them', au: ['Inès Duarte', 'Paul Huber'], on: true, c: '16 Jan 2026', u: '2 Mar 2026' }
 		]
 		const pgRows = n => [...base, ...more].slice(0, n).map(r => ({ ...r }))
 		const PG = (g, o = {}) => { const rn = o.rows || 10; const { rows: _r, ...rest } = o; const { list: xl, ...ro } = rest; return L({ ...ro, list: { rows: pgRows(rn), pg: { per: 25, total: 312, pages: 13, ...g }, ...(xl || {}) } }) }
@@ -197,7 +198,7 @@ class Component extends DCLogic {
 				withM({ ...L({ list: { q: 'tiles', empty: { icon: 'search', title: 'No articles match "tiles"', text: 'Check the spelling, or search for a shorter part of the title.', action: 'Clear search' } } }), name: 'No results', trigger: 'Search matched nothing. The tab counts still show the full list.' }),
 				withM({ ...L({ list: { tab: 2, counts: [4, 4, 0], empty: { icon: 'pencil-line', title: 'No drafts', text: 'Everything you\'ve written is online.', action: 'New article' } } }), name: 'No drafts', trigger: 'Drafts tab with nothing in it. The "Online" tab has an equivalent "Nothing is online yet" state.' }),
 				withM({ ...L({ list: { rows: rows({ 3: { busy: 'Publishing…' } }) } }), name: 'Action in progress', trigger: 'Publish chosen from the row menu. That row is disabled.' }),
-				withM({ ...L({ list: { rows: rows({ 3: { on: true, u: 'Just now' } }) }, toasts: [T('success', 'circle-check', 'Article published', '"Winter checklist for timber windows" is now online.')] }), name: 'Published', trigger: '200: the row updates in place and a toast confirms.' }),
+				withM({ ...L({ list: { rows: rows({ 3: { on: true, u: 'Just now' } }) }, toasts: [T('success', 'circle-check', 'Article published', '"Winter checklist for timber windows" is now online.')] }), clock: true, name: 'Published', trigger: '200: the row updates in place and a toast confirms.' }),
 				withM({ ...L({ toasts: [T('error', 'circle-x', 'Couldn\'t unpublish', 'The server didn\'t respond. Nothing changed.', 'Retry')] }), name: 'Action failed', trigger: 'A 500 or network error. The row stays as it was, and the toast stays until retried or dismissed.' }),
 				withM({ ...L({ list: { counts: [5, 4, 1], rows: rows().filter((r, i) => i !== 1) }, toasts: [T('info', 'info', 'That article no longer exists', 'It was deleted somewhere else, so we removed it from the list.')] }), name: 'Row vanished (404)', trigger: 'Any row action gets a 404.' }),
 				withM({ ...L({ modal: del(false) }), name: 'Delete: confirm', trigger: 'Delete… from the row menu.' }),
@@ -205,7 +206,7 @@ class Component extends DCLogic {
 				withM({ ...L({ modal: del(false, 'Couldn\'t delete the article, so it\'s still there. Try again in a moment.') }), name: 'Delete: failed', trigger: '500, a partial failure where the article is kept. The error shows inside the dialog.' }),
 				withM({ ...L({ list: { counts: [5, 4, 1], rows: rows().filter((r, i) => i !== 3) }, toasts: [T('success', 'circle-check', 'Article deleted', '"Winter checklist for timber windows" and its images are gone.')] }), name: 'Deleted', trigger: '204: the row is removed and focus moves to the next row. This is also where a delete from the editor ends up.' })
 			] },
-			{ label: 'Articles: pagination', title: 'Articles: pagination', route: '/articles?page=2&size=50', api: 'GET /v1/article/?page=&size=&q=&status= (proposed: needs backend page, size, total in the response)', note: 'Page and page size live in the URL as page and size. Defaults (page 1, size 25) are omitted. Allowed sizes 5, 25, 50, 100. Search, tab or sort changes reset to page 1. Rows equal the page size; the frames draw at most 10 rows. The paginator hides when everything fits on one page; the summary stays. Mobile shows Previous, "Page N of M" and Next. Keyboard: Tab reaches page size, first, previous, each page, next, last; Enter or Space activates; the current page has aria-current="page"; ArrowDown opens the page-size list, Enter selects, Esc closes.', states: [
+			{ label: 'Articles: pagination', title: 'Articles: pagination', route: '/articles?page=2&size=50', api: 'GET /v1/article/?page=&size=&q=&status= (page, size; total in the X-Total-Count header; invalid values are normalised in the URL, never shown as an error)', note: 'Page and page size live in the URL as page and size. Defaults (page 1, size 25) are omitted. Allowed sizes 5, 25, 50, 100. Search, tab or sort changes reset to page 1. Rows equal the page size; the frames draw at most 10 rows. The paginator hides when everything fits on one page; the summary stays. Mobile shows Previous, "Page N of M" and Next. Keyboard: Tab reaches page size, first, previous, each page, next, last; Enter or Space activates; the current page has aria-current="page"; ArrowDown opens the page-size list, Enter selects, Esc closes.', states: [
 				withM({ ...PG({ page: 1 }), name: 'First page', trigger: '/articles. Previous and First are disabled. Summary "Showing 1–25 of 312".' }),
 				withM({ ...PG({ page: 7 }), name: 'Middle page', trigger: '/articles?page=7. Current page uses --rc-sand and --rc-on-sand; ellipses mark skipped ranges.' }),
 				withM({ ...PG({ page: 13 }), name: 'Last page', trigger: '/articles?page=13. Next and Last are disabled. Summary "Showing 301–312 of 312".' }),
@@ -269,7 +270,16 @@ class Component extends DCLogic {
 				E({ notfound: true }, { name: 'Not found (404)', trigger: 'Unknown id, or the article was deleted elsewhere.' })
 			] },
 			{ label: 'Media', title: 'Media', route: '/media', api: 'GET /v1/media/ · POST /v1/media/ · PATCH /v1/media/{id} · DELETE /v1/media/{id} · POST /v1/media/merge · GET /v1/media/{id}/usage', note: 'New route for verified users, in the sidebar between Articles and Users with the images icon. Images belong to the library, not to an article: one image can be used in many articles, and deleting an article never deletes images. Uploads from this page are not cropped or resized, and the file is stored as chosen. "Used in" is read from article bodies each time the list loads. Duplicates are images with identical content, whatever their filenames. Alt text is not stored on the image; it is set when inserting into an article. Search, filter, sort and view are stored in the query string. Keyboard: grid items are buttons in one tab stop each; Enter opens the detail panel, Space toggles selection, and Escape closes the panel or clears the selection. Selection changes are announced ("north-wall.jpg selected, 1 selected").', states: [
-				Mp({ name: 'Grid, many images', trigger: 'Default view. 12 images, newest first. Each item is a button labelled like "north-wall.jpg, 3.9 MB, used in 2 articles". Badges: "Unused" (warm), "Duplicate" (info), "Used in N" (outline). The Duplicates tab carries a count of groups only while duplicates exist.' }),
+				Mp({ name: 'Grid, many images', trigger: 'Default view. 12 images, newest first. Each item is a button labelled like "north-wall.jpg, 3.9 MB, used in 2 articles". Badges: "Unused" (warm), "Duplicate" (info), "Used in N" (outline). The Duplicates tab carries a count of groups only while duplicates exist. Below the grid: "Showing 1–12 of 12" and the page-size select (same paginator as Articles).' }),
+				Mp({ pg: { page: 1, total: 312 }, name: 'Pagination: first page', trigger: '/media. Previous and First are disabled. Summary "Showing 1–25 of 312". The paginator sits under the grid or list and uses the Articles controls: 5, 25, 50 or 100 per page, default 25; page and size live in the URL as page and size (/media?page=7&size=50); search, tab, sort, view and size changes reset to page 1. API: GET /v1/media/?page=&size=&q=&filter= with the total in X-Total-Count.' }),
+				Mp({ pg: { page: 7, total: 312 }, name: 'Pagination: middle page', trigger: '/media?page=7. Current page uses --rc-sand and --rc-on-sand; ellipses mark skipped ranges.' }),
+				Mp({ pg: { page: 13, total: 312 }, name: 'Pagination: last page', trigger: '/media?page=13. Next and Last are disabled. Summary "Showing 301–312 of 312".' }),
+				Mp({ view: 'list', pg: { page: 2, total: 312 }, name: 'Pagination: list view', trigger: 'Same paginator under the table. On mobile: Previous, "Page 2 of 13", Next, with the 44 px targets.' }),
+				Mp({ loading: true, pg: { page: 6, total: 312, loading: 7 }, name: 'Pagination: loading next page', trigger: 'Next was pressed. Skeleton cards keep the grid height, controls are disabled, summary reads "Loading page 7…".' }),
+				Mp({ pg: { page: 6, total: 312, err: 'Couldn\'t load page 7. Showing page 6.' }, name: 'Pagination: error loading a page', trigger: '500 or network failure on page change. Previous images stay; Retry sits in the notice.' }),
+				Mp({ pg: { page: 13, total: 312, note: 'That page doesn\'t exist. Showing the last page.' }, name: 'Pagination: page out of range', trigger: '/media?page=99 is replaced with ?page=13 and this notice is shown.' }),
+				Mp({ pg: { page: 1, total: 312, sizeOpen: true }, name: 'Pagination: page size menu', trigger: 'The select opens upward. 5, 25, 50 or 100; the chosen size is saved as size and the page resets to 1.' }),
+				Mp({ pg: { page: 7, total: 312, focus: 'next' }, name: 'Pagination: focus-visible', trigger: 'Keyboard focus on Next: 2 px --ui-primary outline, 2 px offset. Same ring on every paginator control.' }),
 				Mp({ ids: [1, 4, 8], name: 'Grid, few images', trigger: 'Three images. Cards keep their size instead of stretching. Checkerboard shows behind the SVG.' }),
 				Mp({ view: 'list', name: 'List view', trigger: 'The list icon in the toggle. A table from md up (Filename, Dimensions, Size, Type, Used in, Uploaded by, Uploaded) and a card list below md. The "Used in" count opens the article list in the detail panel.' }),
 				Mp({ loading: true, name: 'Loading', trigger: 'The first load, a retry, or a change of search or filter. Skeleton cards appear after 150 ms.' }),
@@ -300,7 +310,7 @@ class Component extends DCLogic {
 				Mp({ upload: upT([rowOk('kitchen-roof.jpg', '2.2 MB', 2), { n: 'porch-steps.jpg', sz: '2.6 MB', st: 'prog', p: '1.1 of 2.6 MB', pct: '42%', im: 11 }, rowDup, rowRej, rowFail, { n: 'attic.jpg', sz: '1.9 MB', st: 'wait', im: 3 }]), name: 'Upload: several files, mixed', trigger: 'Upload button or drop, several files. Each file has its own row and progress. Files upload two at a time. A row can end as added, "Already in your library", rejected in the browser, or failed. Rejected and failed rows stay until dismissed.' }),
 				Mp({ upload: upT([rowOk('kitchen-roof.jpg', '2.2 MB', 2), rowOk('porch-steps.jpg', '2.6 MB', 11), rowDup, rowRej, rowFail], { title: 'Upload finished', sub: '5 images', done: true, summary: '2 uploaded · 1 already in your library · 2 need attention' }), name: 'Upload: summary', trigger: 'All rows settled. The summary counts each outcome. "Use existing" selects the existing image and drops the row; "Upload anyway" stores a second copy, which then appears under Duplicates. "Try again" retries one file. Announced when it finishes.' }),
 				Mp({ upload: upT([rowRej, { n: 'notes.pdf', sz: '210 KB', st: 'rej', title: 'notes.pdf isn\'t an image', msg: 'Images can be up to 10 MB. Use a PNG, JPEG, WEBP or SVG image.' }, { n: 'broken.png', sz: '3.0 MB', st: 'rej', title: 'broken.png couldn\'t be read', msg: 'The server couldn\'t read this image. Save it again as a PNG or JPEG, then try again.' }], { title: 'Nothing was uploaded', sub: '3 files were rejected', done: true }), name: 'Upload: rejected files (413, 400)', trigger: 'Type and size are checked in the browser first, so nothing is sent. A server 413 or 400 for a file that got through shows the same row with its own message.' }),
-				Mp({ limited: true, name: 'Upload: too many requests (429)', trigger: 'Rate limited. Retry-After is counted down in the button. It re-enables at zero. Already-added files are kept.' }),
+				Mp({ limited: true, clock: true, name: 'Upload: too many requests (429)', trigger: 'Rate limited. Retry-After is counted down in the button. It re-enables at zero. Already-added files are kept.' }),
 				Mp({ tab: 'dups', name: 'Duplicates: groups', trigger: 'The Duplicates tab. Groups of identical images side by side, each with its uploader, upload date and "Used in N articles". The suggested copy to keep is the most used, then the oldest.' }),
 				Mp({ tab: 'dups', modal: { k: 'purge' }, name: 'Purge duplicates: confirm', trigger: '"Purge duplicates" in the toolbar, next to the sort menu (in the stacked toolbar on mobile). Opens the same dialog as Settings; every other state is on the Media cleanup board.' }),
 				Mp({ tab: 'dups', member: true, name: 'Duplicates: no purge button (member)', trigger: 'Verified users who are not owner or admin. The "Purge duplicates" button is hidden. "Merge into this one" is unchanged.' }),
@@ -353,7 +363,7 @@ class Component extends DCLogic {
 				withM({ kind: 'integration', nav: 'integration', crumbs: ['Integration'], mTitle: 'Integration', name: "3b. Copied: CodeBlock", trigger: "The Copy button in the API key example after a click. Back to \"Copy\" after 2 s.", int: {"scroll":"auth","copied":"auth"} }, { int: {"scroll":"auth","copied":"auth"} }),
 				withM({ kind: 'integration', nav: 'integration', crumbs: ['Integration'], mTitle: 'Integration', name: "4. Authentication", trigger: "The API key card with its example, the \"Manage API keys\" link (goes to the API keys board) and the two notes.", int: {"scroll":"auth"} }, { int: {"scroll":"auth"} }),
 				withM({ kind: 'integration', nav: 'integration', crumbs: ['Integration'], mTitle: 'Integration', name: "5. Session only", trigger: "Routes API keys cannot call. Dashed, muted and locked, so they read as unavailable and not as an error.", int: {"scroll":"session"} }, { int: {"scroll":"session"} }),
-				withM({ kind: 'integration', nav: 'integration', crumbs: ['Integration'], mTitle: 'Integration', name: "6. Errors", trigger: "Status table and the plain-text error response (status line plus a one-sentence body). Key-specific causes are in the 401, 403 and 429 rows.", int: {"scroll":"errors"} }, { int: {"scroll":"errors"} }),
+				withM({ kind: 'integration', nav: 'integration', crumbs: ['Integration'], mTitle: 'Integration', name: "6. Errors", trigger: "Status table and the plain-text error response (status line plus a one-sentence body). Key-specific causes are in the 401, 403 and 429 rows. The 403 row carries a muted note line (12/18, --ui-text-muted, aligned with the cause column, 2 px row gap above it): \"Site SEO defaults are owner only. Article SEO fields need only the right to edit the article.\" The 404 and 429 rows and everything below move down by the height of the wrapped note: two 18 px lines on desktop, three on mobile, plus the 2 px gap.", int: {"scroll":"errors"} }, { int: {"scroll":"errors"} }),
 				withM({ kind: 'integration', nav: 'integration', crumbs: ['Integration'], mTitle: 'Integration', name: "7. Navigation", trigger: "Desktop: the sticky index with the active item (Media). Mobile: the \"Jump to\" select open. Keyboard: the index buttons and the select are in the tab order, Enter jumps, Escape closes the list.", int: {"scroll":"media"} }, { int: {"scroll":"media","jump":true} })
 			] },
 			{ label: 'Activity', title: 'Activity, owner and admin', route: '/activity', api: 'GET /v1/activity · GET /v1/activity/summary', note: 'New route in the sidebar after Users. Owner and admin see everything; regular users get "My activity". Copy, component mapping and API calls are at the bottom of this board.', states: [
@@ -424,16 +434,16 @@ class Component extends DCLogic {
 				withM({ ...U({ modal: { title: 'Cancel this invite?', desc: 'The link sent to sam.oliveira@renew.example will stop working. You can invite the address again later.', cancel: 'Keep invite', confirm: 'Cancel invite', tone: 'danger', notice: 'Couldn\'t cancel the invite. Try again in a moment.' } }), name: 'Cancel invite: failed', trigger: '500 or network failure. The dialog stays open.' }),
 				withM({ ...U({ users: { rows: people.slice(1) }, toasts: [T('success', 'circle-check', 'Invite cancelled', 'sam.oliveira@renew.example can no longer use the link.')] }), name: 'Cancel invite: done', trigger: '204: the row disappears and a toast confirms.' }),
 				withM({ ...U({ users: { rows: people.map(p => p.st === 'expired' ? { ...p, busy: 'Renewing…' } : p) } }), name: 'Renew invite: sending', trigger: '"Renew invite" on an Expired row. No confirmation, since it only sends an email. The button shows progress and is disabled.' }),
-				withM({ ...U({ users: { rows: [{ ...people[1], st: 'pending', c: 'Today', hl: true }, ...people.filter((p, i) => i !== 1)] }, toasts: [T('success', 'circle-check', 'Invite renewed', 'p.huber@gmail.com has 3 days to accept the new link.')] }), name: 'Renew invite: done', trigger: '200: the row becomes Pending with today\'s date, moves to the top, and the old link stops working.' }),
+				withM({ ...U({ users: { rows: [{ ...people[1], st: 'pending', c: 'Today', hl: true }, ...people.filter((p, i) => i !== 1)] }, toasts: [T('success', 'circle-check', 'Invite renewed', 'p.huber@gmail.com has 3 days to accept the new link.')] }), clock: true, name: 'Renew invite: done', trigger: '200: the row becomes Pending with today\'s date, moves to the top, and the old link stops working.' }),
 				withM({ ...U({ toasts: [T('error', 'circle-x', 'Couldn\'t renew the invite', 'Try again in a moment.')] }), name: 'Renew invite: failed', trigger: '500 or network failure. The row stays Expired and the button can be pressed again.' }),
 				withM({ ...U({ users: { rows: [{ email: 'lea.martin@renew.example', role: 'admin', st: 'pending', c: 'Today', hl: true }, ...people] } , toasts: [T('success', 'circle-check', 'Invite sent', 'lea.martin@renew.example has 3 days to accept.')] }), name: 'Invite sent', trigger: '201: the dialog closes, the new invite appears at the top as Pending, and a toast confirms.' })
 			] },
 			{ label: 'Settings', title: 'Settings: Updates', route: '/settings', api: 'GET /v1/system/update · POST …/check · POST …/download · POST …/update/restart (all pending)', note: 'The page is one column of cards, top to bottom: Version, Updates, Media cleanup, Retention (owner only). The screens below are scrolled to the card they show. New Updates card under Version, owner only. Update downloads and checks the new version and changes nothing. Restart installs it and restarts the site (about 10 seconds). "Restart later" is simply leaving the card or the dialog. A plain Restart shows only when no update is waiting. Admins see the version and a note. When the server isn\'t prepared, the card shows the notice and a "How to update" link with no buttons. Progress is a progressbar with a value, announced at 25% steps and when each step changes. The card is a polite live region. After the restart the page reloads, focus lands on the "Updates" heading, and a toast confirms. Buttons are disabled while any step runs, and any owner on any device sees the same state from the server. Cue elsewhere: see Home. Out of scope: choosing versions, downgrades, automatic updates, update history.', states: [
-				SU({ icon: 'circle-check', tone: 'success', title: 'You\'re up to date', text: 'You have the latest version of RenewCMS.', meta: LAST, btns: [B('Check for updates', 'sec', 'refresh-cw'), B('Restart', 'sec', 'power')], hint: RESTART_FOOT }, { name: 'Up to date', trigger: 'Opened with no newer version. Restart is available but not emphasised.' }),
+				SU({ icon: 'circle-check', tone: 'success', title: 'You\'re up to date', text: 'You have the latest version of RenewCMS.', meta: LAST, btns: [B('Check for updates', 'sec', 'refresh-cw'), B('Restart', 'sec', 'power')], hint: RESTART_FOOT }, { clock: true, name: 'Up to date', trigger: 'Opened with no newer version. Restart is available but not emphasised.' }),
 				SU({ icon: 'loader-circle', title: 'Checking for updates…', text: 'This usually takes a few seconds.', btns: [B('Checking…', 'sec', 'loader-circle', true)] }, { name: 'Checking', trigger: 'Check for updates pressed, or the first open after 24 hours. Announced as "Checking for updates". Buttons are disabled.' }),
-				SU({ icon: 'wifi-off', tone: 'warning', title: 'Couldn\'t check for updates', text: 'RenewCMS couldn\'t reach the update server. Check your connection and try again. Your site isn\'t affected.', meta: 'Last checked yesterday at 18:12', btns: [B('Try again', 'primary', 'rotate-cw'), B('Restart', 'sec', 'power')], hint: RESTART_FOOT }, { name: 'Check failed', trigger: 'Offline, or the update server didn\'t answer (500, network). The last known result is kept.' }),
-				SU({ icon: 'circle-arrow-up', tone: 'info', title: 'Version 2.3.0 is available', text: 'You have v2.2.0-beta. Update downloads the new version and checks it. Nothing changes until you restart.', meta: LAST, notes: NOTES(false), btns: [B('Update', 'primary', 'download')], hint: 'Takes about 2 minutes. Your site stays online.' }, { name: 'Update available', trigger: 'A newer version exists. Release notes are collapsed. Update is the one primary button.', navBadge: true }),
-				SU({ icon: 'circle-arrow-up', tone: 'info', title: 'Version 2.3.0 is available', text: 'You have v2.2.0-beta. Update downloads the new version and checks it. Nothing changes until you restart.', meta: LAST, notes: NOTES(true), btns: [B('Update', 'primary', 'download')], hint: 'Takes about 2 minutes. Your site stays online.' }, { name: 'Update available, notes open', trigger: '"What\'s new in 2.3.0" expanded. It is a button with aria-expanded, and the list is plain text.', navBadge: true }),
+				SU({ icon: 'wifi-off', tone: 'warning', title: 'Couldn\'t check for updates', text: 'RenewCMS couldn\'t reach the update server. Check your connection and try again. Your site isn\'t affected.', meta: 'Last checked yesterday at 18:12', btns: [B('Try again', 'primary', 'rotate-cw'), B('Restart', 'sec', 'power')], hint: RESTART_FOOT }, { clock: true, name: 'Check failed', trigger: 'Offline, or the update server didn\'t answer (500, network). The last known result is kept.' }),
+				SU({ icon: 'circle-arrow-up', tone: 'info', title: 'Version 2.3.0 is available', text: 'You have v2.2.0-beta. Update downloads the new version and checks it. Nothing changes until you restart.', meta: LAST, notes: NOTES(false), btns: [B('Update', 'primary', 'download')], hint: 'Takes about 2 minutes. Your site stays online.' }, { clock: true, name: 'Update available', trigger: 'A newer version exists. Release notes are collapsed. Update is the one primary button.', navBadge: true }),
+				SU({ icon: 'circle-arrow-up', tone: 'info', title: 'Version 2.3.0 is available', text: 'You have v2.2.0-beta. Update downloads the new version and checks it. Nothing changes until you restart.', meta: LAST, notes: NOTES(true), btns: [B('Update', 'primary', 'download')], hint: 'Takes about 2 minutes. Your site stays online.' }, { clock: true, name: 'Update available, notes open', trigger: '"What\'s new in 2.3.0" expanded. It is a button with aria-expanded, and the list is plain text.', navBadge: true }),
 				SU({ icon: 'download', tone: 'info', title: 'Downloading version 2.3.0…', text: 'You can leave this page. The download continues and your site stays online.', pct: 42, barLabel: 'Downloading version 2.3.0', barText: '42% · 11 of 26 MB', btns: [B('Updating…', 'sec', 'loader-circle', true)] }, { name: 'Downloading', trigger: 'Update pressed (202). Progress polls every second. Announced as "Downloading, 25 percent" and so on, never every tick.', navBadge: true }),
 				SU({ icon: 'shield-check', tone: 'info', title: 'Checking the download…', text: 'Making sure the file is complete and safe to install. This takes a few seconds.', indet: true, barLabel: 'Checking the download', barText: 'Almost there', btns: [B('Updating…', 'sec', 'loader-circle', true)] }, { name: 'Verifying', trigger: 'The download finished. No percentage, so the bar is indeterminate. Announced as "Checking the download".', navBadge: true }),
 				SU({ icon: 'circle-check', tone: 'success', title: 'Version 2.3.0 is ready to install', text: 'The download is checked. Restart to install it. Your site will be unavailable for about 10 seconds.', meta: 'Nothing has changed yet.', notes: NOTES(false), btns: [B('Restart', 'primary', 'power')], hint: 'Not now? Leave this page. The update waits here, and the banner on Home reminds you.' }, { name: 'Ready to install', trigger: 'The file passed its checks. Restart becomes the primary action. "Restart later" is closing the dialog or leaving the page.', navBadge: true }),
@@ -441,19 +451,19 @@ class Component extends DCLogic {
 				SU({ icon: 'circle-check', tone: 'success', title: 'Version 2.3.0 is ready to install', text: 'The download is checked. Restart to install it. Your site will be unavailable for about 10 seconds.', meta: 'Nothing has changed yet.', btns: [B('Restart', 'primary', 'power')] }, { name: 'Restart: request failed', trigger: '500 or network failure before the restart began. The site is still running.', navBadge: true, modal: installModal({ notice: 'Couldn\'t start the restart. Nothing was changed and your site is still running. Try again in a moment.' }) }),
 				SU({ icon: 'circle-check', tone: 'success', title: 'Version 2.3.0 is ready to install', text: '', btns: [] }, { name: 'Restarting to install', trigger: 'Full-page overlay, so it survives the server going away. The page polls until the site answers, then reloads. It is a live region announced once as "Installing version 2.3.0. Your site is restarting."', overlay: { title: 'Installing version 2.3.0', text: 'Your site is restarting with the new version. This takes about 10 seconds. This page reloads on its own when the site is back.', meta: 'Started at 09:51', barL: '30%' } }),
 				SU({ icon: 'circle-check', tone: 'success', title: '', text: '', btns: [] }, { name: 'Restarting, taking longer', trigger: 'No answer after 60 seconds. The copy changes and a manual reload appears. The overlay stays until the site is back.', overlay: { title: 'Still restarting', text: 'This is taking longer than usual. Keep this page open. It reloads on its own when the site is back, or you can reload it now.', meta: 'Started at 09:51 · 1 minute ago', btn: 'Reload page', barL: '65%' } }),
-				SU({ icon: 'circle-check', tone: 'success', title: 'You\'re on version 2.3.0', text: 'The update is installed and your site is running again.', meta: 'Updated today at 09:52', btns: [B('Check for updates', 'sec', 'refresh-cw'), B('Restart', 'sec', 'power')], hint: RESTART_FOOT, link: 'Read the release notes', v: 'v2.3.0', focus: '2px solid var(--ui-primary)', toasts: undefined }, { name: 'Update done', trigger: 'The page reloaded on the new version. Focus lands on the "Updates" heading (ring shown), the toast is announced, and the version updates.', toasts: [T('success', 'circle-check', 'Update installed', 'RenewCMS is now on version 2.3.0.')] }),
+				SU({ icon: 'circle-check', tone: 'success', title: 'You\'re on version 2.3.0', text: 'The update is installed and your site is running again.', meta: 'Updated today at 09:52', btns: [B('Check for updates', 'sec', 'refresh-cw'), B('Restart', 'sec', 'power')], hint: RESTART_FOOT, link: 'Read the release notes', v: 'v2.3.0', focus: '2px solid var(--ui-primary)', toasts: undefined }, { clock: true, name: 'Update done', trigger: 'The page reloaded on the new version. Focus lands on the "Updates" heading (ring shown), the toast is announced, and the version updates.', toasts: [T('success', 'circle-check', 'Update installed', 'RenewCMS is now on version 2.3.0.')] }),
 				SU({ icon: 'triangle-alert', tone: 'warning', title: 'The update didn\'t install', text: 'RenewCMS put the previous version back, so your site is running as before. Nothing was lost.', meta: 'What to do next: try again in a few minutes. If it fails again, ask whoever manages your server to check the update.', btns: [B('Try again', 'primary', 'rotate-cw')] }, { name: 'Update failed, rolled back', trigger: 'The site came back on v2.2.0-beta. The error toast stays until dismissed and the card keeps the explanation.', toasts: [T('error', 'circle-x', 'The update didn\'t install', 'Your site is back on v2.2.0-beta.')] }),
 				SU({ icon: 'circle-x', tone: 'error', title: 'The download didn\'t finish', text: 'The connection dropped before the file was complete. Nothing was changed and your site is running as before.', btns: [B('Try again', 'primary', 'rotate-cw')] }, { name: 'Download failed', trigger: 'A 500, or the connection dropped. Focus moves to the card heading. Try again restarts the download.', navBadge: true }),
 				SU({ icon: 'triangle-alert', tone: 'warning', title: 'We didn\'t use this update', text: 'The file didn\'t pass our safety check, so it was not installed. Nothing was changed. Try downloading it again. If this keeps happening, contact RenewCMS support.', btns: [B('Try again', 'primary', 'rotate-cw')] }, { name: 'Verification failed', trigger: 'The downloaded file isn\'t trusted. The tone is a warning, and the file is thrown away. Technical detail goes to the server log, not the screen.', navBadge: true }),
-				SU({ icon: 'info', tone: 'info', title: 'Too many tries', text: 'Wait a moment before trying again.', btns: [B('Try again in 0:42', 'sec', 'clock', true)] }, { name: 'Too many requests (429)', trigger: 'Retry-After counted down in the button. It re-enables at zero.' }),
+				SU({ icon: 'info', tone: 'info', title: 'Too many tries', text: 'Wait a moment before trying again.', btns: [B('Try again in 0:42', 'sec', 'clock', true)] }, { clock: true, name: 'Too many requests (429)', trigger: 'Retry-After counted down in the button. It re-enables at zero.' }),
 				SU(notPrep(false), { name: 'Not prepared', trigger: 'The server can\'t update from the browser. No buttons, not even Restart. The command is for the person who runs the server and is a single line. The placeholder command is subject to the real one.', navBadge: true }),
 				SU(notPrep(true), { name: 'Not prepared: command copied', trigger: 'Copy pressed. The button reads "Copied" for 2 s and it is announced.', navBadge: true }),
-				SU({ icon: 'circle-check', tone: 'success', title: 'You\'re up to date', text: 'You have the latest version of RenewCMS.', meta: LAST, btns: [B('Check for updates', 'sec', 'refresh-cw'), B('Restart', 'sec', 'power')], hint: RESTART_FOOT }, { name: 'Plain restart: confirm', trigger: 'Restart with no update waiting. Nothing is installed.', modal: restartModal() }),
+				SU({ icon: 'circle-check', tone: 'success', title: 'You\'re up to date', text: 'You have the latest version of RenewCMS.', meta: LAST, btns: [B('Check for updates', 'sec', 'refresh-cw'), B('Restart', 'sec', 'power')], hint: RESTART_FOOT }, { clock: true, name: 'Plain restart: confirm', trigger: 'Restart with no update waiting. Nothing is installed.', modal: restartModal() }),
 				SU({ icon: 'circle-check', tone: 'success', title: '', text: '', btns: [] }, { name: 'Plain restart: restarting', trigger: 'Same overlay as the update restart with shorter copy.', overlay: { title: 'Restarting your site', text: 'This takes about 10 seconds. This page reloads on its own when the site is back.', meta: 'Started at 09:51', barL: '30%' } }),
 				SU({ icon: 'circle-check', tone: 'success', title: 'Your site is back', text: '', btns: [] }, { name: 'Plain restart: done', trigger: 'The page reloaded. Focus lands on the "Updates" heading.', toasts: [T('success', 'circle-check', 'Site restarted', 'Your site is running again.')] }),
-				SU({ icon: 'circle-arrow-up', tone: 'info', title: 'Version 2.3.0 is available', text: 'You have v2.2.0-beta. Only the owner can update RenewCMS. Ask the owner of this site.', meta: LAST }, { noRet: true, name: 'Admin view', trigger: 'Admins see the version and the note, with no buttons. Up to date: "You\'re up to date" and "Only the owner can update or restart the site." No Home banner or Settings pill.' }),
-				SU({ icon: 'circle-arrow-up', tone: 'info', title: 'Version 2.3.0 is available', text: 'You have v2.2.0-beta. Only the owner can update RenewCMS. Ask the owner of this site.', meta: LAST }, { noRet: true, name: 'Role changed (403)', trigger: 'An owner was changed to admin while the page was open and pressed a button. The card reloads in the admin view.', toasts: [T('error', 'circle-x', 'Only the owner can do this', 'Ask the owner of this site to update RenewCMS.')] }),
-				SU({ icon: 'circle-arrow-up', tone: 'info', title: 'Version 2.3.0 is available', text: 'You have v2.2.0-beta. Update downloads the new version and checks it. Nothing changes until you restart.', meta: LAST, btns: [B('Update', 'primary', 'download', true)] }, { name: 'Update already running (409)', trigger: 'Another owner started it. The card switches to that run\'s progress.', navBadge: true, toasts: [T('info', 'info', 'An update is already running', 'Another owner started it. Progress shows here.')] })
+				SU({ icon: 'circle-arrow-up', tone: 'info', title: 'Version 2.3.0 is available', text: 'You have v2.2.0-beta. Only the owner can update RenewCMS. Ask the owner of this site.', meta: LAST }, { noRet: true, clock: true, name: 'Admin view', trigger: 'Admins see the version and the note, with no buttons. Up to date: "You\'re up to date" and "Only the owner can update or restart the site." No Home banner or Settings pill.' }),
+				SU({ icon: 'circle-arrow-up', tone: 'info', title: 'Version 2.3.0 is available', text: 'You have v2.2.0-beta. Only the owner can update RenewCMS. Ask the owner of this site.', meta: LAST }, { noRet: true, clock: true, name: 'Role changed (403)', trigger: 'An owner was changed to admin while the page was open and pressed a button. The card reloads in the admin view.', toasts: [T('error', 'circle-x', 'Only the owner can do this', 'Ask the owner of this site to update RenewCMS.')] }),
+				SU({ icon: 'circle-arrow-up', tone: 'info', title: 'Version 2.3.0 is available', text: 'You have v2.2.0-beta. Update downloads the new version and checks it. Nothing changes until you restart.', meta: LAST, btns: [B('Update', 'primary', 'download', true)] }, { clock: true, name: 'Update already running (409)', trigger: 'Another owner started it. The card switches to that run\'s progress.', navBadge: true, toasts: [T('info', 'info', 'An update is already running', 'Another owner started it. Progress shows here.')] })
 			], tableTitle: 'Status to copy', table: [
 				{ a: '200', b: 'Check, up to date', c: '"You\'re up to date" / "You have the latest version of RenewCMS." / "Last checked today at 09:41"' },
 				{ a: '200', b: 'Check, newer version', c: '"Version 2.3.0 is available" / "You have v2.2.0-beta. Update downloads the new version and checks it. Nothing changes until you restart."' },
@@ -571,7 +581,7 @@ class Component extends DCLogic {
 			im('I8', 'Snippet copied', 'Copy pressed on the snippet. The label reads Copied for 2 s and is announced politely.', { v: 'many', tab: 'js', copied: true }),
 			im('I9', 'URL builder copied', 'Copy pressed on the built URL.', { v: 'many', variant: 'card', urlCopied: true })
 		] }
-		return [...bo, imgG, navG, ...vg.map(adapt)]
+		return [...bo, ...this.dirGroups(bo), imgG, navG, ...vg.map(adapt)]
 	}
 	cell(t, i, o = {}) { return { t, fg: i === 0 && !o.plain ? 'var(--ui-text-highlighted)' : o.muted ? 'var(--ui-text-muted)' : 'var(--ui-text-toned)', fw: i === 0 && !o.plain ? 500 : 400, ff: o.mono ? "'IBM Plex Mono',monospace" : "'IBM Plex Sans',sans-serif", fs: o.mono ? '12px' : '13px' } }
 	tbl(title, cols, tpl, rows, o = {}) { return { title, cols, tpl, rows: rows.map(r => r.map((t, i) => this.cell(t, i, { mono: o.mono && o.mono.includes(i), muted: t === '–' }))) } }
@@ -822,6 +832,281 @@ class Component extends DCLogic {
 			{ label: 'Vocabulary and accessibility', title: 'Vocabulary and accessibility', note: 'Use "variant", "generated" and "purge" everywhere. Never "thumbnail preset", "version" or "rendition". Delete removes a variant definition; purge removes only its generated files. Every status is an icon plus text: Generated (circle-check), Not generated (circle-dashed), Generating (loader), Failed (circle-x), Enabled (circle-check), Disabled (circle-off). The comparison slider has a visible focus ring and works from the keyboard. Dialogs trap focus and return it to the opener. Progress is announced with aria-live="polite". Touch targets on mobile are at least 44 px. The only token not already in the system is --rc-on-sand (dark ink on the sand selection color), used for the active nav item in both themes.', tables: [] }
 		]
 	}
+	// DIR-START
+	dirDoc() {
+		const S = (name, trigger, copy, o, mo) => ({ name, trigger, copy, o, mo })
+		const G = (label, title, route, api, note, states) => ({ label, title, route, api, note, states })
+		const edT = 'How we price a bathroom renovation'
+		const fmtP = n => String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+		const PGS = (v, cfg) => {
+			const { path, noun, N, mid, qN, qText, big, bigPage, single, empty } = cfg, pages = Math.ceil(N / 25)
+			const o = (pg, x = {}) => v === 'sites' ? { v, sites: { state: 'ok' }, pg, ...x } : { v, pg, ...x }
+			const rng = p => 'Showing ' + ((p - 1) * 25 + 1) + '–' + Math.min(p * 25, N) + ' of ' + fmtP(N)
+			const bp = Math.ceil(big / 25), bm = bigPage
+			return [
+				S('First page', path + '. Previous and First are disabled. Mobile: Previous is disabled.', rng(1) + ' · 25 per page · Page 1 of ' + pages + ' · Previous · Next', o({ page: 1, per: 25, total: N })),
+				S('Middle page', path + '?page=' + mid + '. Current page uses --rc-sand and --rc-on-sand.', rng(mid) + ' · Page ' + mid + ' of ' + pages, o({ page: mid, per: 25, total: N })),
+				S('Last page', path + '?page=' + pages + '. Next and Last are disabled.', rng(pages) + ' · Page ' + pages + ' of ' + pages, o({ page: pages, per: 25, total: N })),
+				S('Single page', 'Everything fits on one page. The pager and the page-size select are hidden; only the count remains.', single + ' ' + noun + (single === 1 ? '' : 's'), o({ page: 1, per: 25, total: single })),
+				S('Page size menu', 'The select opens upward: 5, 25, 50 or 100 per page. 25 is the default. Choosing another size sets ?size= and returns to page 1.', '5 per page · 25 per page · 50 per page · 100 per page', o({ page: mid, per: 25, total: N, sizeOpen: true })),
+				S('Loading a page', 'Next was pressed. The rows are replaced by skeleton rows; the pager stays, disabled, and the summary reads "Loading page ' + (mid + 1) + '…".', 'Loading page ' + (mid + 1) + '…', o({ page: mid, per: 25, total: N, loading: mid + 1 })),
+				S('Error loading a page', '500 or network failure on a page change. The current rows and the current page number stay; Retry sits in the notice.', 'Couldn\'t load page ' + (mid + 1) + '. Showing page ' + mid + '. · Check your connection and try again. · Retry', o({ page: mid, per: 25, total: N, err: 'Couldn\'t load page ' + (mid + 1) + '. Showing page ' + mid + '.' })),
+				S('Empty after search', 'A search matched nothing. The empty state replaces the list and the pager is hidden.', 'No ' + noun + 's match "' + empty + '" · Check the spelling, or search for a shorter part of the name. · Clear search', o({ empty: true, total: 0 }, { q: empty })),
+				S('Search resets to page 1', 'Searching "' + qText + '" from page ' + (mid + 2) + ' goes to ' + path + '?q=' + qText + ' (page omitted). Changing the page size does the same.', rng(1).replace(' of ' + fmtP(N), ' of ' + qN), o({ page: 1, per: 25, total: qN }, { q: qText })),
+				S('Long labels on mobile', 'Large totals on a 390 px screen. The summary and the page-size select wrap onto two lines if needed; Previous, "Page ' + bm + ' of ' + bp + '" and Next keep one row.', 'Showing ' + ((bm - 1) * 25 + 1) + '–' + (bm * 25) + ' of ' + fmtP(big) + ' · Page ' + bm + ' of ' + bp, o({ page: bm, per: 25, total: big }))
+			]
+		}
+		const sitesNote = 'Settings, Publishing group. Compact list; actions in the row menu. Default site: no delete action.'
+		return { groups: [
+			G('Sites', 'Sites', '/settings/sites', 'GET /v1/site/ · PATCH /v1/site/{id}/default · DELETE /v1/site/{id}?reassign_to={id}', 'Only the owner can create, edit, set the default or delete a site. Other roles don\'t see the Sites entry under Settings; a direct link shows a 403 page. Choosing a site for an article is not site management: anyone who can edit the article can set its site in the editor and read the site list. New child of Settings, under a "Publishing" heading in the sidebar (Settings also gets a "Publishing" card with a "Manage sites" row, owner only). Columns: name with key, base URL, article count. The default site carries a "Default" badge and has no delete action. A site with robots set to noindex shows a "Noindex" badge. List, row menu and dialogs come from DirectoryFrame and are shared with Authors.', [
+				S('Default', 'The list loaded. Four sites, Renew is the default. Owner only.', 'Sites · The frontends that display your content. · Add site · Site · Base URL · Articles · Default · Noindex · 268 articles · 38 articles · 6 articles · No articles', { v: 'sites', sites: { state: 'ok' } }),
+				S('Only the default site', 'First run: the seeded site only. A hint under the list, no empty-state wall.', 'Add another site if your content is shown on more than one frontend. Each article belongs to one site.', { v: 'sites', sites: { state: 'ok', only: true } }),
+				S('Loading', 'The first load, or a retry. Skeleton rows appear after 150 ms.', '', { v: 'sites', sites: { state: 'loading' } }),
+				S('Error', 'A 500 or network failure on the list request.', 'Couldn\'t load sites · Check your connection and try again. · Try again', { v: 'sites', sites: { state: 'error' } }),
+				S('Row menu', 'The ellipsis button, or Enter on the focused menu button. Mobile: bottom sheet titled with the site name.', 'Edit · Set as default · Delete…', { v: 'sites', sites: { state: 'ok', menu: 1 } }),
+				S('Default site: delete unavailable', 'Menu on the default site. "Delete…" is aria-disabled, stays focusable and explains itself: tooltip on desktop, text in the sheet on touch.', 'The default site can\'t be deleted. Make another site the default first.', { v: 'sites', sites: { state: 'ok', menu: 0 }, tip: true }),
+				S('Set as default: confirm', '"Set as default" in the row menu. On 200 the badge moves and a toast confirms. The button reads "Saving…" while the request runs.', 'Make Journal the default site? · New articles start on this site. Articles that are already on other sites stay where they are. · Cancel · Make default · Default site changed · "Journal" is now the default site.', { v: 'sites', sites: { state: 'ok' }, modal: { k: 'setdef', i: 1 } }),
+				S('Hidden entry (admin)', 'An admin opens Settings. The sidebar has no Publishing group and no Sites entry, and the page has no Publishing card. Roles without Settings have nothing to hide.', 'No Publishing group · No Sites entry · No "Manage sites" row', { v: 'adminSettings' }),
+				S('Forbidden (403)', 'A role other than owner opens /settings/sites from a bookmark or a link. The sidebar has no Sites entry, so the page explains instead of redirecting. The API answers 403.', 'You don\'t have access to Sites · Only the owner can manage sites. Ask the owner of this site if you need a change. · Back to Settings', { v: 'sites', forbidden: true, role: 'admin', fab: false })
+			]),
+			G('Sites: form', 'Sites: add and edit', 'slide-over (desktop) · 92% bottom sheet (mobile)', 'POST /v1/site/ · PATCH /v1/site/{id}', 'Owner only. A slide-over, because the form has a live preview (the canonical URL). Fields: name, key, base URL, default social image (media picker), default robots policy, optional locale, default switch. The key is set when the site is added and can\'t be edited afterwards: the edit form shows it read-only with a lock and the text "Used in API paths, so it can\'t change." Closing with changes asks "Discard changes?" with the existing discard dialog. The slug field, media field and picker are the shared ones from DirectoryFrame (the picker is drawn once, in Authors: form). Locale error: "Use a language tag like en or fr-CH."', [
+				S('Add: empty', '"Add site" in the page header, or the bottom button on mobile.', 'Add site · Name · e.g. Journal · Key · Generated from the name · Base URL · https://blog.example.com · The public address of the frontend. Use https and no path. · Default social image (optional) · Choose image · Used when an article has no image of its own. · Default robots policy · Index · Noindex · Search engines may list this site\'s pages. · Locale (optional) · e.g. en or fr-CH · A language tag. Leave empty if the site has no single language. · Make this the default site · New articles start here. The current default is Renew. · Canonical URL preview · Cancel · Add site', { v: 'sites', sites: { state: 'ok' }, panel: { k: 'site', mode: 'add', focus: 'name' } }),
+				S('Add: key from the name', 'Typing a name fills the key. The pencil unlocks it until the site is added.', 'journal · Auto · Lowercase letters, numbers and hyphens. Used in API paths. It can\'t be changed after the site is added.', { v: 'sites', sites: { state: 'ok' }, panel: { k: 'site', mode: 'add', focus: 'url', f: { name: 'Journal', key: 'journal', keyMode: 'auto' } } }),
+				S('Add: URL not valid', 'On blur or submit. Nothing is sent. A URL with a path and text that is not a URL get their own messages, drawn the same way.', 'Use https. For example https://blog.example.com. · Remove the path. Use only the host, like https://blog.example.com. · Enter a full URL, like https://blog.example.com.', { v: 'sites', sites: { state: 'ok' }, panel: { k: 'site', mode: 'add', f: { name: 'Journal', key: 'journal', keyMode: 'auto', url: 'http://journal.renew.example' }, err: { url: 'Use https. For example https://blog.example.com.' } } }),
+				S('Add: duplicate key', '409 on submit, or on blur after a check.', 'A site with the key "journal" already exists. Choose another key. · Use journal-2', { v: 'sites', sites: { state: 'ok' }, panel: { k: 'site', mode: 'add', f: { name: 'Journal', key: 'journal', keyMode: 'manual', url: 'https://journal2.renew.example' }, err: { key: 'A site with the key "journal" already exists. Choose another key.', keySuggest: 'journal-2' } } }),
+				S('Add: save failed', '500 or network failure. The values stay.', 'Couldn\'t save the site. Your changes are still here. Try again in a moment.', { v: 'sites', sites: { state: 'ok' }, panel: { k: 'site', mode: 'add', notice: 'Couldn\'t save the site. Your changes are still here. Try again in a moment.', f: { name: 'Journal', key: 'journal', keyMode: 'auto', url: 'https://journal.renew.example' } } }),
+				S('Edit: default site', 'Edit on the default site. The key is read-only with a lock, because it is used in API paths. The switch is on and locked.', 'Edit Renew · Key · renew · Used in API paths, so it can\'t change. · Default site · New articles start on the default site. To change it, make another site the default. · Save changes', { v: 'sites', sites: { state: 'ok' }, panel: { k: 'site', mode: 'edit', i: 0, f: { name: 'Renew', key: 'renew', keyMode: 'saved', url: 'https://renew.example', img: 'north-wall.jpg', loc: 'en' } } }),
+				S('Edit: other site, noindex', 'Edit on a non-default site.', 'Edit Projects · Key · projects · Used in API paths, so it can\'t change. · Noindex · Asks search engines not to list this site\'s pages. · Make this the default site', { v: 'sites', sites: { state: 'ok' }, panel: { k: 'site', mode: 'edit', i: 2, f: { name: 'Projects', key: 'projects', keyMode: 'saved', url: 'https://projects.renew.example', img: 'kitchen-after.webp', robots: 'Noindex', loc: 'fr' } } })
+			]),
+			G('Sites: delete', 'Sites: delete', 'dialog (desktop) · bottom sheet (mobile)', 'DELETE /v1/site/{id}?reassign_to={id}', 'Owner only. A site with articles cannot be deleted without a destination: the dialog has a select and shows how many articles move. Destination defaults to the default site. Without reassign_to the server answers 409. This is the shared ReassignDialog from DirectoryFrame; its failed state is drawn once, in Authors: delete.', [
+				S('With articles', '"Delete…" on a site that has articles. The button reads "Moving articles…" while the request runs. On 204 the row leaves the list and a toast reads "Site deleted" · "38 articles moved to Renew."', 'Delete this site? · "Journal" will be deleted. 38 articles belong to it, so choose a site to move them to. This can\'t be undone. · Move articles to · Renew · renew.example · 38 articles will move to Renew. Their canonical host changes to renew.example. · Cancel · Move 38 articles and delete', { v: 'sites', sites: { state: 'ok' }, modal: { k: 'del', i: 1 } }),
+				S('Choose destination', 'The select is open. The site being deleted is not listed.', 'Journal is not offered. Options show name and host.', { v: 'sites', sites: { state: 'ok' }, modal: { k: 'del', i: 1, open: true } }),
+				S('No articles', 'A site with zero articles: plain confirm, no select.', 'Delete this site? · "Archive" will be deleted. No articles belong to it. This can\'t be undone. · Delete site', { v: 'sites', sites: { state: 'ok' }, modal: { k: 'del0', i: 3 } })
+			]),
+			G('Sites: pagination', 'Sites: pagination', '/settings/sites?page=2&size=50', 'GET /v1/site/?q=&page=&size= (total in the X-Total-Count header; array body unchanged)', 'Same Paginator as Articles and Media (components.md). Sizes 5, 25, 50, 100, default 25: the existing pattern, unchanged. Page and size in the URL as page and size; defaults omitted; a page past the end falls back to the last page. Search resets to page 1. The count line "N sites" replaces the pager on a single page. Sites has no search box today: it is added with the pager (same field as Authors, "Search by name or key") and is a proposal to confirm. The list is drawn with generated rows; 61 sites give 3 pages.', PGS('sites', { path: '/settings/sites', noun: 'site', N: 61, mid: 2, qN: 27, qText: 'renew', big: 312, bigPage: 6, single: 4, empty: 'blog' })),
+			G('Authors', 'Authors', '/authors', 'GET /v1/author/?q=&page=&size= · DELETE /v1/author/{id}?reassign_to={id|none}', 'Sidebar entry between Media and Users, visible to every role. Owner and admin create, edit and delete any author. Other roles see the list and the detail read-only. Columns: avatar and name, slug, account (Linked or Guest), article count. Search by name or slug. Long names truncate in the row and show in full on hover. Above 25 authors the list uses the same paginator as Articles (not redrawn). List, panel and dialogs come from DirectoryFrame and are shared with Sites.', [
+				S('Default', 'Owner or admin. The list loaded, newest first.', 'Authors · The names readers see on your articles. An author doesn\'t need an account. · Add author · Search by name or slug · Author · Slug · Account · Articles · Linked · Guest · 9 articles · 1 article · No articles', { v: 'authors' }),
+				S('Loading', 'The first load, or a retry.', '', { v: 'authors', list: 'loading' }),
+				S('Error', '500 or network failure.', 'Couldn\'t load authors · Check your connection and try again. · Try again', { v: 'authors', list: 'error' }),
+				S('Empty, first run', 'Zero authors. Toolbar hidden, one call to action. Other roles see the same text without the button.', 'No authors yet · Authors are the names readers see on articles. They don\'t need an account. · Add author', { v: 'authors', list: 'empty' }),
+				S('No results', 'Search matched nothing.', 'No authors match "zoe" · Check the spelling, or search for a shorter part of the name. · Clear search', { v: 'authors', q: 'zoe' }),
+				S('Row menu', 'Owner or admin. The ellipsis button. Mobile: bottom sheet.', 'Edit · Delete…', { v: 'authors', menu: 2 }),
+				S('Read-only list (other roles)', 'Any role except owner and admin. No Add author button, no row menu and no bottom button on mobile. Search still works. A row opens the read-only detail.', 'Authors · The names readers see on your articles. Only an owner or admin can change authors. · Search by name or slug · Author · Slug · Account · Articles', { v: 'authors', ro: true, role: 'user' }),
+				S('Read-only detail', 'A row was opened by a role without author rights. Same panel width as the form, no fields, Close as the only action. The account email is not shown.', 'Inès Duarte · Linked · 9 articles · Bio · Website · Only an owner or admin can change this author. · Close', { v: 'authors', ro: true, role: 'user', panel: { k: 'authorView', i: 0 } })
+			]),
+			G('Authors: form', 'Authors: add and edit', 'slide-over (desktop) · 92% bottom sheet (mobile)', 'POST /v1/author/ · PATCH /v1/author/{id}', 'Owner and admin. A slide-over, because the form has a live preview (the byline). Fields: avatar (media picker), name, slug (auto, editable), bio with counter, website, social links (X, LinkedIn, GitHub, Mastodon, Custom; up to 5), linked user (only users without an author). Slug field, media field and picker are the shared ones from DirectoryFrame. Saving shows "Saving…" in the button, as in the other forms.', [
+				S('Add: empty', '"Add author". Owner or admin.', 'Add author · Avatar (optional) · Choose image · Name · e.g. Camille Roche · Slug · Generated from the name · Bio (optional) · A sentence or two about the author. · 0 / 280 · Website (optional) · https://example.com · Social links (optional) · Add link · 0 of 5 · Linked user (optional) · No linked user · Link a CMS user if this author has an account. Guest writers need no link. · Byline preview · Author name · The bio appears here. · Cancel · Add author', { v: 'authors', panel: { k: 'author', mode: 'add', focus: 'name' } }),
+				S('Slug from the name', 'Typing a name fills the slug. Auto badge and "Edit slug" pencil.', 'camille-roche · Auto · Generated from the name. Used in public author URLs and API paths. Unique across all authors.', { v: 'authors', panel: { k: 'author', mode: 'add', focus: 'bio', f: { name: 'Camille Roche', slug: 'camille-roche', slugMode: 'auto', bio: 'Freelance writer on lime and stone.' } } }),
+				S('Slug collision', '409 on submit, or on blur after a check.', 'The slug "camille-roche" is already used by another author. · Use camille-roche-2 · Reset to match the name', { v: 'authors', panel: { k: 'author', mode: 'add', f: { name: 'Camille Roche', slug: 'camille-roche', slugMode: 'manual' }, err: { slug: 'The slug "camille-roche" is already used by another author.', suggest: 'camille-roche-2' } } }),
+				S('Validation', 'On submit or blur. Nothing is sent.', 'Enter a name. · Shorten the bio to 280 characters. · 291 / 280 · Enter a full URL starting with https://.', { v: 'authors', panel: { k: 'author', mode: 'add', f: { name: '', bio: 'x'.repeat(291), web: 'example', slugMode: 'empty' }, err: { name: 'Enter a name.', bio: 'Shorten the bio to 280 characters.', web: 'Enter a full URL starting with https://.' } } }),
+				S('Social links', 'Add link adds a row with a type select and a URL. One link is invalid.', 'X · LinkedIn · GitHub · Mastodon · Custom · https://x.com/username · https://www.linkedin.com/in/username · https://github.com/username · https://mastodon.social/@username · https://example.com · Enter a full URL starting with https://. · You can add up to 5 links.', { v: 'authors', panel: { k: 'author', mode: 'edit', i: 2, f: { name: 'Camille Roche', slug: 'camille-roche', slugMode: 'saved', bio: 'Freelance writer on lime and stone.', links: [{ t: 'Mastodon', v: 'https://mastodon.social/@camille' }, { t: 'LinkedIn', v: 'linkedin.com/in/camille', err: 'Enter a full URL starting with https://.' }, { t: 'Custom', v: '', focus: true }] } } }),
+				S('Linked user: choose', 'The select is open. Only users without an author. When none are left it reads "Every user already has an author."', 'Choose a user · Users without an author · Marta Alves · marta@renew.example · Rui Santos · rui@renew.example', { v: 'authors', panel: { k: 'author', mode: 'edit', i: 2, f: { name: 'Camille Roche', slug: 'camille-roche', slugMode: 'saved', uopen: true } } }),
+				S('Edit: linked author', 'Edit on an author linked to a user.', 'Edit Inès Duarte · Linked user (optional) · ines.duarte@renew.example · Unlink · New articles by this user start with this author. · Save changes', { v: 'authors', panel: { k: 'author', mode: 'edit', i: 0, f: { av: 'ines.jpg', name: 'Inès Duarte', slug: 'ines-duarte', slugMode: 'saved', bio: 'Site manager and restoration carpenter. Writes about timber and joinery.', web: 'https://ines-duarte.example', links: [{ t: 'LinkedIn', v: 'https://www.linkedin.com/in/ines-duarte' }], user: 'ines.duarte@renew.example' } } }),
+				S('Avatar: picker', '"Choose image". The existing media picker; shown as a square. The site social image uses this same picker.', 'Choose an image · The avatar for Camille Roche. · Shown as a square. Choose an image with the face or logo near the middle. · Use image', { v: 'authors', panel: { k: 'author', mode: 'edit', i: 2, f: { name: 'Camille Roche', slug: 'camille-roche', slugMode: 'saved' } }, modal: { k: 'pick', n: 'Camille Roche', sel: 1 } }),
+				S('Save failed', '500 or network failure.', 'Couldn\'t save the author. Your changes are still here. Try again in a moment.', { v: 'authors', panel: { k: 'author', mode: 'edit', i: 2, notice: 'Couldn\'t save the author. Your changes are still here. Try again in a moment.', f: { name: 'Camille Roche', slug: 'camille-roche', slugMode: 'saved', bio: 'Freelance writer on lime and stone.' } } }),
+				S('Unlink: confirm', '"Unlink" next to the linked user, owner or admin. On 200 the field returns to "No linked user" and a toast reads "User unlinked" · "Inès Duarte is now a guest author."', 'Unlink Inès Duarte? · Inès Duarte will stay on their articles. New articles by ines.duarte@renew.example will no longer start with this author. · Cancel · Unlink user', { v: 'authors', panel: { k: 'author', mode: 'edit', i: 0, f: { av: 'ines.jpg', name: 'Inès Duarte', slug: 'ines-duarte', slugMode: 'saved', user: 'ines.duarte@renew.example' } }, modal: { k: 'unlink', i: 0 } }),
+				S('Re-link', '"Link user" on a guest author in the row menu or the form. Same list as above.', 'Link Camille Roche to a user? · Only users without an author are listed. · Cancel · Link user', { v: 'authors', modal: { k: 'relink', i: 2 } })
+			]),
+			G('Authors: delete', 'Authors: delete', 'dialog (desktop) · bottom sheet (mobile)', 'DELETE /v1/author/{id}?reassign_to={id|none}', 'Owner and admin. Reassign: the dialog asks who gets the articles, with "Nobody" as the last option, and shows the count in the button. Zero authors are allowed, so Nobody is always valid. The 409 dialog is the server fallback and is drawn once.', [
+				S('Reassign (recommended)', '"Delete…" on an author with articles, owner or admin. The button reads "Reassigning…" while the request runs. On 204 a toast reads "Author deleted" · "3 articles now credit Inès Duarte." A linked author also shows "Linked to ines.duarte@renew.example. The user account isn\'t affected."', 'Delete this author? · "Camille Roche" will be deleted and is credited on 3 articles. This can\'t be undone. · Credit these articles to · Inès Duarte · Where an article has several authors, Camille Roche is removed and the others stay. · Cancel · Delete and reassign 3 articles', { v: 'authors', modal: { k: 'del', i: 2 } }),
+				S('Choose who', 'The select is open. The deleted author is not listed.', 'Nobody · Remove the byline', { v: 'authors', modal: { k: 'del', i: 2, open: true } }),
+				S('Nobody', '"Nobody" chosen.', 'The articles keep any other authors. Articles with only this author will have no byline.', { v: 'authors', modal: { k: 'del', i: 2, none: true } }),
+				S('Failed (shared by site and author delete)', '500 or network failure. Both delete dialogs use this notice.', 'Couldn\'t delete the author · Nothing was changed. Try again in a moment.', { v: 'authors', modal: { k: 'del', i: 2, notice: true } }),
+				S('Server fallback (409)', 'Fallback only. The dialog above always sends reassign_to, so this appears only when the server refuses a stale request because articles still credit the author. Drawn once, not as a flow.', 'Can\'t delete this author · "Camille Roche" is credited on 3 articles. Choose another author to credit instead, or remove Camille Roche from those articles first. · Close · Reassign articles', { v: 'authors', modal: { k: 'blocked', i: 2 } }),
+				S('No articles', 'An author with zero articles: plain confirm.', 'Delete this author? · "Léa Fontaine" will be deleted. No articles credit this author. This can\'t be undone. · Delete author', { v: 'authors', modal: { k: 'del0', i: 4 } })
+			]),
+			G('Authors: pagination', 'Authors: pagination', '/authors?page=3&size=50', 'GET /v1/author/?q=&page=&size= (total in the X-Total-Count header; array body unchanged)', 'Same Paginator as Articles and Media (components.md). Sizes 5, 25, 50, 100, default 25: the existing pattern, unchanged. Page and size in the URL as page and size; defaults omitted; a page past the end falls back to the last page. Search resets to page 1. The count line "N authors" replaces the pager on a single page. The list is drawn with generated rows; 128 authors give 6 pages.', PGS('authors', { path: '/authors', noun: 'author', N: 128, mid: 3, qN: 31, qText: 'mar', big: 1284, bigPage: 12, single: 6, empty: 'zoe' })),
+			G('Editor: site and authors', 'Editor: site and authors', '/article/:id/edit', 'PATCH /v1/article/{id} {site_id, author_ids[]} · GET /v1/site/ · GET /v1/author/ · POST /v1/author/', 'States specific to this feature. The collapsed default (one site, the article has an author) and the Loading and Not found states are drawn in the existing Editor frames, which show the section in the same place; they are not repeated here. The section is open when the install has more than one site or the article has no authors, and collapsed to one summary line otherwise; the choice is remembered per browser. On mobile it is closed by default. With one site the Site select is not rendered. Anyone who can edit the article can set its site and pick authors; "Create author…", the Create author dialog and its "This is me" checkbox are for owner and admin only. For any other role, the "Create my author profile" hint (state 4) creates the profile directly with POST /v1/author/me, with no dialog, then shows the author in the list with a toast. Authors are a reorderable list; the first is the primary byline.', [
+				S('Open: one site, one author', 'The section was opened. No Site select.', 'Authors · Add an author', { v: 'editor', metaOpen: true, meta: { authors: ['Inès Duarte'] } }),
+				S('Open: several sites', 'Site select above the authors, with the canonical host as helper text.', 'Site · Journal · journal.renew.example · Canonical host: journal.renew.example', { v: 'editor', ed: { metaSummary: 'Journal · Inès Duarte' }, metaOpen: true, meta: { sites: true, site: 'Journal', authors: ['Inès Duarte'] } }),
+				S('Site select open', 'The select is open. Options show name and host; the default site is first.', 'Renew · renew.example · Journal · journal.renew.example · Projects · Archive', { v: 'editor', metaOpen: true, meta: { sites: true, site: 'Journal', open: 'site', authors: ['Inès Duarte'] } }),
+				S('No authors, with hint', 'The article has no authors and the user has no author profile. The hint is dismissible and does not return once dismissed. "Create my author profile" creates the profile directly for every role (POST /v1/author/me, no dialog), then the author appears in the list and a toast confirms.', 'You don\'t have an author profile yet · Create one to be credited on your articles. · Create my author profile · No authors. This article will have no byline.', { v: 'editor', metaOpen: true, meta: { hint: true, authors: [] } }),
+				S('Many authors', 'Four authors. The first shows "Primary". Each row has a drag handle and a remove button. Long names truncate with an ellipsis and carry the full name in title and aria-label.', 'Primary · Drag to reorder. The first author is the primary byline. · Dr. Alexandra Konstantinopoulou-Whitfield', { v: 'editor', ed: { metaSummary: 'Inès Duarte +3' }, metaOpen: true, meta: { authors: ['Inès Duarte', 'Jonas Pereira', 'Dr. Alexandra Konstantinopoulou-Whitfield', 'Paul Huber'] } }),
+				S('Add author: open', 'The Add an author combobox is open. Authors already on the article are checked and dimmed. "Create author…" is shown only to owner and admin.', 'Search authors · Create author…', { v: 'editor', metaOpen: true, meta: { authors: ['Inès Duarte'], open: 'authors' } }),
+				S('Add author: no match', 'Typing a name that matches nobody. "Create author…" is shown only to owner and admin.', 'No author matches "Zoe Lambert". · Create author "Zoe Lambert"…', { v: 'editor', metaOpen: true, meta: { authors: ['Inès Duarte'], open: 'authors', q: 'Zoe Lambert' } }),
+				S('Add author: open (no create)', 'A role without author rights. The combobox lists the authors with no "Create author…" row, because that row is shown only to owner and admin.', 'Search authors', { v: 'editor', role: 'user', metaOpen: true, meta: { authors: ['Inès Duarte'], open: 'authors', noCreate: true } }),
+				S('Add author: no match (no create)', 'A role without author rights types a name that matches nobody. Only the message shows; there is no create link, because "Create author…" is shown only to owner and admin.', 'No author matches "Zoe Lambert".', { v: 'editor', role: 'user', metaOpen: true, meta: { authors: ['Inès Duarte'], open: 'authors', q: 'Zoe Lambert', noCreate: true } }),
+				S('Add author: error', 'GET /v1/author/ failed. The article keeps its authors.', 'Couldn\'t load authors · Check your connection and try again. · Try again', { v: 'editor', metaOpen: true, meta: { authors: ['Inès Duarte'], open: 'authors', state: 'error' } }),
+				S('Reorder: keyboard', 'Space or Enter on the handle grabs the row. Arrow keys move it.', 'Jonas Pereira grabbed. Position 2 of 3. Use the up and down arrow keys to move, Space to drop, Escape to cancel.', { v: 'editor', metaOpen: true, meta: { authors: ['Inès Duarte', 'Jonas Pereira', 'Camille Roche'], grab: 1 } }),
+				S('Reorder: pointer', 'Dragging a row. The row lifts and a line shows the drop position.', '', { v: 'editor', metaOpen: true, meta: { authors: ['Inès Duarte', 'Jonas Pereira', 'Camille Roche'], drag: 2, drop: 0 } }),
+				S('Create author: dialog', '"Create author…" in the dropdown, owner and admin only. The writer stays in the editor.', 'Create author · Adds a byline for this article. You can add a bio and avatar later in Authors. · Name · Slug · Zoe Lambert · zoe-lambert · Cancel · Create author', { v: 'editor', metaOpen: true, meta: { authors: ['Inès Duarte'] }, modal: { name: 'Zoe Lambert', slug: 'zoe-lambert' } }),
+				S('Create author: for me', 'Owner and admin only. When the user has no author profile, a checkbox links the new author to them.', 'This is me · Links the author to marta@renew.example.', { v: 'editor', metaOpen: true, meta: { authors: ['Inès Duarte'], hint: true }, modal: { name: 'Marta Alves', slug: 'marta-alves', me: true } }),
+				S('Create author: slug taken', 'The slug exists. The dialog suggests a free one.', 'The slug "zoe-lambert" is already used by another author. · Use zoe-lambert-2', { v: 'editor', metaOpen: true, meta: { authors: ['Inès Duarte'] }, modal: { name: 'Zoe Lambert', slug: 'zoe-lambert', err: true, slugErr: 'The slug "zoe-lambert" is already used by another author.', suggest: 'zoe-lambert-2' } }),
+				S('Create author: failed', '500 or network failure.', 'Couldn\'t create the author · The article is unchanged. Try again in a moment.', { v: 'editor', metaOpen: true, meta: { authors: ['Inès Duarte'] }, modal: { name: 'Zoe Lambert', slug: 'zoe-lambert', notice: true } })
+			]),
+			G('Profile: author profile', 'Profile: author profile', '/profile', 'POST /v1/author/me · GET /v1/auth/me (author field)', 'The "Author profile" card sits between Account and Password in every Profile frame, defined once in AppFrame. The existing Profile frames show its default state ("Create my author profile"). All roles can create their own profile and edit their own linked author. Only the states specific to the card are drawn here.', [
+				S('No author profile', 'The user has no linked author.', 'Author profile · Your public byline on articles. It\'s separate from your account. · You don\'t have an author profile yet. Create one to be credited on your own articles. · Create my author profile · Uses your display name, Marta Alves. You can change it afterwards.', { v: 'profile', pa: { k: 'none' } }),
+				S('Error', '500 or network failure.', 'Couldn\'t create your author profile · Try again in a moment.', { v: 'profile', pa: { k: 'none', err: true } }),
+				S('Created', '201: the card shows the author. The author is named from the display name and linked to the user.', 'Author profile created · Marta Alves is now your byline. · Edit author · Linked to your account. New articles start with this author.', { v: 'profile', pa: { k: 'has' }, toasts: [['success', 'circle-check', 'Author profile created', 'Marta Alves is now your byline.']] }),
+				S('Created, slug adjusted', 'The slug was taken, so the server added a number. No error is shown.', 'Your slug is marta-alves-2 · marta-alves was already used by another author. You can change it in Edit author.', { v: 'profile', pa: { k: 'has', slug: 'marta-alves-2' } }),
+				S('Edit own author', 'Edit author on the card, by a role without author rights. The form opens with the linked user locked and no Unlink. There is no delete action in the form or on this screen.', 'Edit Marta Alves · Linked user · marta@renew.example · This is your author profile. Only an owner or admin can change the link. · Save changes', { v: 'profile', role: 'user', pa: { k: 'has' }, panel: { k: 'author', mode: 'edit', own: true, f: { name: 'Marta Alves', slug: 'marta-alves', slugMode: 'saved', bio: 'Project coordinator. Writes about permits and planning.', user: 'marta@renew.example' } } })
+			]),
+			G('Articles: sites and authors', 'Articles: sites and authors', '/articles?site=journal', 'GET /v1/article/?site={key}&page=&size=&q=&status=', 'Every Articles frame has the Authors column (avatars, at most 3 plus "+N"; "—" when none; on mobile avatars with the first name). When more than one site exists, a Site column and a Site filter appear, read-only text for every role; with one site they are not rendered.', [
+				S('Several sites', 'More than one site exists.', 'Authors · Site · All sites · Renew · Journal · Projects', { v: 'app', list: { multi: true } }),
+				S('Site filter open', 'The Site select in the toolbar. Choosing a site stores ?site=key and resets the page to 1.', 'All sites · Renew · Journal · Projects · Archive', { v: 'app', list: { multi: true, siteMenu: true } }),
+				S('No articles on a site', 'The chosen site has no articles.', 'No articles on "Archive" · Move articles here from the editor, or choose another site. · Show all sites', { v: 'app', list: { multi: true, site: 'Archive', counts: [0, 0, 0], empty: { icon: 'file-text', title: 'No articles on "Archive"', text: 'Move articles here from the editor, or choose another site.', action: 'Show all sites' } } })
+			]),
+			G('Articles: search status', 'Articles: search status', '/articles?seo=suggestions', 'GET /v1/article/?seo=suggestions&page=&size= (items carry seo_status and seo_suggestions)', 'A quiet indicator in the Status cell on desktop and under the title on mobile cards: a lightbulb chip with a count when there are suggestions, an eye-off chip "Hidden" when noindex is on, nothing when the article is ready. The toolbar gets a "Needs attention" toggle with a count next to the search field. Tabs and their counts are unchanged. On a single-site install nothing changes: the Site filter and column stay hidden and the toggle works the same, over all articles.', [
+				S('Status chips', 'Row 2 has 2 suggestions, row 3 is hidden, row 4 has 3, row 5 has 1.', 'Needs attention · 3 · Hidden · 2 suggestions (tooltip) · Hidden from search engines (tooltip)', { v: 'app', list: {} }),
+				S('Needs attention on', 'The toggle is pressed. The list shows only articles with suggestions. Hidden-only articles are not included.', 'Needs attention · 3', { v: 'app', list: { needs: true } }),
+				S('Needs attention: none', 'Nothing to show with the toggle on.', 'Nothing needs attention · Every article has a clean check. Suggestions are optional, so this is just a bonus. · Show all articles', { v: 'app', list: { needs: true, needsN: 0, counts: [0, 0, 0], empty: { icon: 'circle-check', title: 'Nothing needs attention', text: 'Every article has a clean check. Suggestions are optional, so this is just a bonus.', action: 'Show all articles' } } })
+			]),
+			G('Editor: search and sharing', 'Editor: search and sharing', '/article/:id/edit', 'PATCH /v1/article/{id} {slug, excerpt, seo_title, seo_description, cover_image_id, cover_image_alt, social_title, social_description, social_image_id, canonical_url, noindex, seo_dismissed[]}', 'RenewCMS is headless: it never renders pages or adds meta tags. This section helps the writer fill in SEO data and shows what the frontend will receive. Everything is optional and each empty field shows its fallback. Placement: a "Search and sharing" section under "Site and authors" in the sidebar and in the mobile Details sheet. Collapsed by default with a one-line summary (Ready, N suggestions, Hidden from search), remembered per browser. The fields and live previews open in a slide-over (desktop, 960 px) or a 92% sheet over the Details sheet (mobile). Anyone who can edit the article can edit these fields. Suggestions never block saving or publishing: publishing is allowed regardless. Counters are soft guides and turn amber, never red, outside the recommended range. Light and dark follow the theme switch above.', [
+				S('Collapsed: ready', 'The default. Nothing to suggest.', 'Search and sharing · Ready', { v: 'editor', ed: { seoSummary: 'Ready' } }),
+				S('Collapsed: suggestions', 'Summary in the warning colour. No count badge elsewhere.', 'Search and sharing · 2 suggestions', { v: 'editor', ed: { seoSummary: '2 suggestions' } }),
+				S('Collapsed: hidden', 'noindex is on.', 'Search and sharing · Hidden from search', { v: 'editor', ed: { seoSummary: 'Hidden from search' } }),
+				S('Open: ready', 'Address, the all-good message and two actions.', 'Address · renew.example/how-we-price-a-bathroom-renovation · All good · Nothing to suggest for this article. · Edit search and sharing · What the frontend gets', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { side: { codes: [] } } }),
+				S('Open: suggestions', 'At most three suggestions here, then a count. Each links to its field.', 'The meta title is 74 characters. Search engines may cut it off after about 60. · Go to meta title · The cover image has no alt text. Add a short description of it. · Go to cover image · The body has no headings. H2 headings help readers scan the article. · Go to body · +1 more in Search and sharing', { v: 'editor', ed: { seoSummary: '4 suggestions' }, seo: { side: { codes: ['title_long', 'cover_alt', 'no_h', 'short'] } } }),
+				S('Open: checking', 'While the checks run after the editor loads. The rest of the section stays usable.', 'Checking this article…', { v: 'editor', ed: { seoSummary: 'Checking…' }, seo: { side: { state: 'loading' } } }),
+				S('Open: hidden', 'A line explains the flag.', 'Hidden from search engines. This only sets a flag in the API.', { v: 'editor', ed: { seoSummary: 'Hidden from search' }, seo: { side: { codes: [], hidden: true } } }),
+				S('Open: other site', 'The address uses the article\'s site.', 'journal.renew.example/how-we-price-a-bathroom-renovation', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { side: { codes: [], site: 1 } } }),
+				S('Panel: defaults', 'A writer who changed nothing. Every value is a fallback and says so.', 'Search and sharing · URL slug · Generated from the title until you edit it. · Meta title · Using article title · Recommended 30 to 60 characters. This is a guide, not a limit. · Meta description · Using first sentence of the body · Recommended 70 to 160 characters. · Excerpt · A short summary. It is also sent as the article teaser. · Cover image · Using the site social image (north-wall.jpg). · Social sharing · Optional · Uses the meta values · Advanced · Canonical URL: automatic · Hide from search engines · Sets noindex in the API. It doesn\'t change who can read the article. · Search result · Social card · Suggestions · What the frontend gets · Cancel · Save changes', { v: 'editor', ed: { seoSummary: '1 suggestion' }, seo: { panel: { codes: ['cover_none'] } } }),
+				S('Panel: filled in', 'Own values everywhere. The fallback chips are gone and the suggestion list shows All good.', 'All good · Nothing to suggest for this article.', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { panel: { mt: 'What a bathroom renovation costs', md: 'A bathroom renovation is priced by room size, plumbing changes and finish level. Here is how we build a quote.', ex: 'How we price a bathroom renovation, from the survey to the final invoice.', cover: { alt: 'A tiled bathroom wall during renovation' }, codes: [] } } }),
+				S('Panel: outside the soft ranges', 'Counters turn amber. The preview shows the cut-off. Nothing is blocked.', 'The meta title is 74 characters. Search engines may cut it off after about 60. · The description is 41 characters. About 70 to 160 reads best in results. · Cut off here, the way a search engine would.', { v: 'editor', ed: { seoSummary: '2 suggestions' }, seo: { panel: { mt: 'How we price a bathroom renovation: surveys, plumbing, tiling and finishes', md: 'What a bathroom renovation costs.', codes: ['title_long', 'desc_short'] } } }),
+				S('Panel: slug edited', 'The Auto badge is gone. "Reset to match the title" brings it back.', 'Reset to match the title', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { panel: { slug: 'bathroom-costs', slugMode: 'manual', codes: [] } } }),
+				S('Panel: slug taken', 'Checked on blur and on save. Nothing is saved until a free slug is chosen.', 'The slug "bathroom-costs" is already used on Renew. · Use bathroom-costs-2', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { panel: { slug: 'bathroom-costs', slugMode: 'taken', codes: [] } } }),
+				S('Panel: cover without alt', 'Alt text is required before the cover counts as ready. It is a suggestion, not an error.', 'Alt text · Needed before the cover counts as ready. Sent as image alt in the API. · Describe the image for people who can\'t see it · The cover image has no alt text. Add a short description of it.', { v: 'editor', ed: { seoSummary: '1 suggestion' }, seo: { panel: { cover: { alt: '' }, codes: ['cover_alt'] } } }),
+				S('Panel: choose cover', 'The shared Media picker.', 'Choose a cover image · The cover for this article. · Use image', { v: 'editor', ed: { seoSummary: '1 suggestion' }, seo: { panel: { codes: ['cover_none'] }, pick: true } }),
+				S('Panel: social sharing open', 'Optional overrides. Each falls back to the meta values.', 'Social sharing · Optional · Social title · Using meta title · Social description · Using meta description · Social image · Using the cover image.', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { panel: { social: true, cover: { alt: 'A tiled bathroom wall during renovation' }, codes: [] } } }, { seo: { panel: { social: true, scrollY: 560, cover: { alt: 'A tiled bathroom wall during renovation' }, codes: [] } } }),
+				S('Panel: social customised', 'The card shows the overrides, so the Using chips disappear.', 'Customised', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { panel: { social: true, soc: { t: 'Bathroom costs, explained', d: 'A plain guide to what drives the price.', img: 'kitchen-after.webp' }, codes: [] } } }, { seo: { panel: { social: true, scrollY: 560, soc: { t: 'Bathroom costs, explained', d: 'A plain guide to what drives the price.', img: 'kitchen-after.webp' }, codes: [] } } }),
+				S('Panel: advanced, invalid canonical', 'Collapsed by default. The address must be absolute.', 'Advanced · Canonical URL · Only change this if the same content lives at another address. · Enter a full address starting with https://', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { panel: { adv: true, canon: 'renew.example/costs', err: { canon: 'Enter a full address starting with https://' }, focus: 'canon', codes: [] } } }, { seo: { panel: { adv: true, scrollY: 640, canon: 'renew.example/costs', err: { canon: 'Enter a full address starting with https://' }, focus: 'canon', codes: [] } } }),
+				S('Panel: hidden from search', 'The switch only sets a flag in the API.', 'Hide from search engines · Sets noindex in the API. It doesn\'t change who can read the article.', { v: 'editor', ed: { seoSummary: 'Hidden from search' }, seo: { panel: { noindex: true, codes: [] } } }, { seo: { panel: { noindex: true, scrollY: 700, codes: [] } } }),
+				S('Panel: mobile search preview', 'The Desktop and Mobile toggle changes the width and where the title is cut.', 'Search result · Desktop · Mobile', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { panel: { dev: 'mobile', mt: 'How we price a bathroom renovation: surveys, plumbing, tiling and finishes', codes: ['title_long'] } } }),
+				S('Panel: checking', 'Checks run on open and after each pause in typing.', 'Checking this article…', { v: 'editor', ed: { seoSummary: 'Checking…' }, seo: { panel: { sugState: 'loading' } } }),
+				S('Panel: saving', 'Fields are disabled while the request runs.', 'Saving…', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { panel: { state: 'saving', mt: 'What a bathroom renovation costs', codes: [] } } }),
+				S('Panel: save failed', '500 or network failure. The values stay.', 'Couldn\'t save search and sharing. Your changes are still here. Try again in a moment.', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { panel: { notice: 'Couldn\'t save search and sharing. Your changes are still here. Try again in a moment.', mt: 'What a bathroom renovation costs', codes: [] } } }),
+				S('Saved', 'The panel closes. The summary updates.', 'Search and sharing saved · Your search and sharing settings are up to date.', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { side: { codes: [] } }, toasts: [['success', 'circle-check', 'Search and sharing saved', 'Your search and sharing settings are up to date.']] })
+			]),
+			G('Editor: what the frontend gets', 'Editor: what the frontend gets', '/article/:id/edit', 'GET /v1/article/{id}/seo', 'A read-only dialog (desktop, 720 px) or bottom sheet (mobile) with the resolved SEO object exactly as the API returns it. Opened from the sidebar section or the panel. Each value that came from a fallback carries a chip. Formatted shows a compact key and value list, Raw shows the JSON. Copy JSON copies the raw object. Author name, profile URL and social links come from the Authors screen and surface in authors[] and in the JSON-LD author, so Authors itself needs no change.', [
+				S('Formatted', 'Default view.', 'What the frontend gets · The SEO data returned by GET /v1/article/12/seo, read only. RenewCMS doesn\'t render pages or add meta tags: your frontend does. · Formatted · Raw JSON · Copy JSON · Close', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { side: { codes: [] }, api: {} } }),
+				S('Raw JSON', 'The JSON as the API returns it.', 'Raw JSON', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { side: { codes: [] }, api: { view: 'raw' } } }),
+				S('Copied', 'The button reads Copied for 2 s and this is announced.', 'Copied', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { side: { codes: [] }, api: { view: 'raw', copied: true } } }),
+				S('Draft article', 'Drafts answer 404 to anonymous callers.', 'This article is a draft. The API returns this data only to signed-in callers until it is published.', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { side: { codes: [] }, api: { draft: true } } }),
+				S('Loading', 'Copy is disabled.', '', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { side: { codes: [] }, api: { state: 'loading' } } }),
+				S('Error', 'GET failed. Nothing in the article changes.', 'Couldn\'t load the SEO data · GET /v1/article/12/seo failed. Your article is unchanged. Try again in a moment. · Try again', { v: 'editor', ed: { seoSummary: 'Ready' }, seo: { side: { codes: [] }, api: { state: 'error' } } })
+			]),
+			G('Sites: SEO defaults', 'Sites: SEO defaults', '/settings/sites', 'PATCH /v1/site/{id} {site_name, title_template, default_description, social_image_id, default_robots}', 'Owner only, like the rest of Sites. The existing add and edit form gains three fields under the default social image (reused, not duplicated): Site name, Title template with a live example, and Default description. The default robots policy keeps its place. A box under the form explains how articles use these defaults. Sites has no separate read-only details view: the edit form is the details, and other roles get the existing 403 page (403 owner_only on PATCH, 401 without a session).', [
+				S('Edit: SEO defaults', 'Edit on the default site.', 'Default social image (optional) · Site name · Shown in titles through the template, and sent as the Open Graph site name. · Title template · Use %title% for the article title and %site% for the site name. · Example · How we price a bathroom renovation | Renew · Default description (optional) · Used when an article has no description, excerpt or body text. · How articles use these defaults · Title · Article title, then the template. · Description · Used last, after the article\'s description, excerpt and body. · Image · Used when an article has no cover image. · Robots · Used unless an article is hidden from search engines.', { v: 'sites', sites: { state: 'ok' }, panel: { k: 'site', mode: 'edit', i: 0, f: { name: 'Renew', key: 'renew', keyMode: 'saved', url: 'https://renew.example', img: 'north-wall.jpg', loc: 'en', ddesc: 'Practical advice on renovating old buildings, from the people who do the work.' } } }),
+				S('Add: defaults', 'New sites start with the default template and nothing else.', 'Site name · e.g. Renew · %title% | %site% · One or two sentences about the site.', { v: 'sites', sites: { state: 'ok' }, panel: { k: 'site', mode: 'add', f: { name: 'Journal', key: 'journal', keyMode: 'auto', url: 'https://journal.renew.example' } } }),
+				S('Template: custom', 'The example updates as the owner types.', 'Example · How we price a bathroom renovation – Journal', { v: 'sites', sites: { state: 'ok' }, panel: { k: 'site', mode: 'edit', i: 1, focus: 'tpl', f: { name: 'Journal', key: 'journal', keyMode: 'saved', url: 'https://journal.renew.example', sname: 'Journal', tpl: '%title% – %site%' } } }),
+				S('Template: not valid', 'The template needs %title%. Nothing is sent.', 'The template must contain %title%.', { v: 'sites', sites: { state: 'ok' }, panel: { k: 'site', mode: 'edit', i: 1, focus: 'tpl', err: { tpl: 'The template must contain %title%.' }, f: { name: 'Journal', key: 'journal', keyMode: 'saved', url: 'https://journal.renew.example', sname: 'Journal', tpl: '%site%' } } }),
+				S('Save failed', '500 or network failure.', 'Couldn\'t save the site. Your changes are still here. Try again in a moment.', { v: 'sites', sites: { state: 'ok' }, panel: { k: 'site', mode: 'edit', i: 0, notice: 'Couldn\'t save the site. Your changes are still here. Try again in a moment.', f: { name: 'Renew', key: 'renew', keyMode: 'saved', url: 'https://renew.example', img: 'north-wall.jpg', loc: 'en' } } })
+			])
+		],
+		specs: [
+			{ label: 'Sites and authors: decisions', title: 'Sites and authors: decisions to confirm', note: 'Only choices that change behaviour or the API. Rows marked Decided were answered in the revision brief and are no longer questions.', tables: [{ cols: ['#', 'Decision', 'Status', 'To confirm'], tpl: '40px minmax(0,1.8fr) 90px minmax(0,1.6fr)', rows: [
+				['1', 'Sites: only the owner can create, edit, set the default or delete. Other roles don\'t see the Sites entry; a direct link shows a 403 page. Anyone who can edit an article can still set its site and read the site list.', 'Decided', 'Roles, from the brief.'],
+				['2', 'Authors: owner and admin manage all authors. Other roles see the list and details read-only, pick authors in the editor, and can create and edit their own author profile.', 'Decided', 'Roles, from the brief.'],
+				['3', 'A site key is set when the site is created and can\'t be edited. The edit form shows it read-only.', 'Decided', 'Used in API paths. PATCH rejects a changed key.'],
+				['4', 'An article may have zero authors. Nothing blocks publishing.', 'Decided', 'Zero authors allowed.'],
+				['5', 'Deleting an author asks who gets the articles, with "Nobody" as the last option.', 'Decided', 'Reassign on delete.'],
+				['6', 'With one site, the editor hides the Site select and the list hides the Site column and filter.', 'Open', 'Hide in the editor too, or only in the list.'],
+				['7', 'Deleting a site with articles requires a destination, preselected as the default site. The default site can\'t be deleted.', 'Open', 'API: DELETE needs reassign_to when article_count is above 0.'],
+				['8', 'A user has at most one author and an author at most one user. Only accepted users without an author are listed. Unlinking keeps the author and its articles.', 'Open', 'API: unique link. Unlink is PATCH with user_id null.'],
+				['9', '"Create my author profile" never fails on a taken slug. The server adds a number and the card says so.', 'Open', 'API: the POST /v1/author/me response carries the final slug.'],
+				['10', 'Article counts on sites and authors include drafts.', 'Open', 'API: counts guard deletion, so they must be complete.'],
+				['11', 'Moving articles between sites changes their canonical host at once. No redirects are created.', 'Open', 'Behaviour. Redirects belong to a later slice.'],
+				['12', 'Limits: bio 280 characters, 5 social links, name 100 characters, locale as a language tag.', 'Open', 'API validation.'],
+				['13', 'The first site is seeded from PUBLIC_URL and named from its host.', 'Open', 'Migration: the seed name.']
+			] }] },
+			{ label: 'Sites and authors: deviations', title: 'Sites and authors: deviations from existing patterns', note: 'Where the design departs from a pattern already on the board, and why.', tables: [{ cols: ['Pattern', 'Existing', 'Here', 'Why'], tpl: 'minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1.4fr)', rows: [
+				['Settings children', 'One group, "Media", with Variants and Cache', 'A second group, "Publishing", with Sites', 'Sites is not a media setting'],
+				['Slide-over', 'Variant form and record details only', 'Site and author forms', 'Both have a live preview'],
+				['Delete dialog', 'Text and two buttons', 'A select for the destination, plus a count in the button', 'Articles must not be orphaned'],
+				['Media picker', 'Title "Add an image", inserts into text, has an alt text step', 'Title "Choose an image", button "Use image", no alt text', 'The image is a field value, not content'],
+				['Row menu on a disabled action', 'Actions are hidden when not allowed', 'Delete stays visible, aria-disabled, with an explanation', 'The brief asks for an explanatory tooltip. Touch shows the text'],
+				['Chips', 'No existing chip control', 'A vertical list of rows, not wrapped inline chips', 'Reordering needs one axis and 44 px targets on touch'],
+				['Editor sidebar', 'Static Details list', 'A collapsible section above Details', 'Holds the only new editor fields'],
+				['Role-restricted entries', 'Pages are shown or hidden by role', 'The Sites entry is removed for non-owners, and /settings/sites shows a 403 page', 'No dead entries, and a direct link still gets an answer'],
+				['Counter', 'Title field shows "n / 200"', 'Bio shows "n / 280", red above the limit', 'Same counter, same colours']
+			] }] },
+			{ label: 'Sites and authors: API and errors', title: 'Sites and authors: API and HTTP statuses', note: 'Rows for states.md. Inline errors sit under the named field; dialogs show the notice inside.', tables: [{ cols: ['Status', 'Code', 'Copy', 'Where'], tpl: '70px minmax(0,1fr) minmax(0,2fr) minmax(0,1fr)', rows: [
+				['400', 'invalid_site_url', 'Use https. For example https://blog.example.com. · Remove the path. Use only the host, like https://blog.example.com. · Enter a full URL, like https://blog.example.com.', 'Inline under Base URL'],
+				['409', 'site_key_taken', 'A site with the key "journal" already exists. Choose another key.', 'Inline under Key, with a suggestion'],
+				['409', 'site_has_articles', 'Choose where the articles go. This site has 38 articles.', 'Inside the delete dialog'],
+				['403', 'default_site', 'The default site can\'t be deleted. Make another site the default first.', 'Toast if the menu was stale'],
+				['403', 'owner_only', 'You don\'t have access to Sites · Only the owner can manage sites. Ask the owner of this site if you need a change.', '403 page on /settings/sites'],
+				['403', 'owner_only (action)', 'Only the owner can manage sites · Ask the owner of this site.', 'Error toast if the role changed while the page was open'],
+				['403', 'author_rights', 'Only an owner or admin can change authors · You can still edit your own author profile.', 'Error toast if the role changed while the page was open'],
+				['400', 'key_immutable', 'Used in API paths, so it can\'t change.', 'Not shown: the edit form has no editable key'],
+				['400', 'invalid_locale', 'Use a language tag like en or fr-CH.', 'Inline under Locale'],
+				['404', 'site_not_found', 'That site no longer exists · It was deleted somewhere else, so we removed it from the list.', 'Info toast'],
+				['409', 'author_slug_taken', 'The slug "camille-roche" is already used by another author.', 'Inline under Slug, with a suggestion'],
+				['409', 'author_has_articles', 'Can\'t delete this author · "Camille Roche" is credited on 3 articles. Choose another author to credit instead, or remove Camille Roche from those articles first.', 'Blocked dialog'],
+				['409', 'user_already_linked', 'That user already has an author. Choose another user.', 'Inline under Linked user'],
+				['422', 'bio_too_long', 'Shorten the bio to 280 characters.', 'Inline under Bio'],
+				['422', 'invalid_url', 'Enter a full URL starting with https://.', 'Inline under Website and each social link'],
+				['404', 'author_not_found', 'That author no longer exists · It was deleted somewhere else, so we removed it from the list.', 'Info toast'],
+				['500', '–', 'Couldn\'t save the site. Your changes are still here. Try again in a moment. · Couldn\'t save the author. Your changes are still here. Try again in a moment. · Couldn\'t create the author · The article is unchanged. Try again in a moment.', 'Notice inside the panel or dialog']
+			] }, { cols: ['Method and path', 'Used by', 'Notes'], tpl: 'minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.6fr)', rows: [
+				['GET /v1/site/', 'Sites, Site label, filter', 'Any role that edits articles. Returns article_count per site'],
+				['POST /v1/site/', 'Add site', 'Owner only. name, key, base_url, social_image_id, robots, locale, is_default'],
+				['PATCH /v1/site/{id}', 'Edit site, set as default', 'Owner only. The key can\'t be changed. is_default true moves the flag'],
+				['DELETE /v1/site/{id}?reassign_to={id}', 'Delete site', 'Owner only. reassign_to required when article_count > 0'],
+				['GET /v1/author/?q=&page=&size=', 'Authors, Add author combobox', 'Any role. Total in X-Total-Count, as for articles'],
+				['POST /v1/author/ · PATCH · DELETE ?reassign_to={id|none}', 'Authors, editor dialog', 'Owner and admin. none removes the byline'],
+				['POST /v1/author/me', 'Create my author profile', 'Any role. Name from the display name, linked to the user. A user can also PATCH their own linked author'],
+				['PATCH /v1/article/{id}', 'Editor', 'site_id and author_ids[] in order, any role that edits the article; is_online is untouched']
+			] }] },
+			{ label: 'Sites and authors: components', title: 'Sites and authors: components (Nuxt UI v4)', note: 'New components use existing tokens only.', tables: [{ cols: ['Component', 'Status', 'Nuxt UI', 'Notes'], tpl: 'minmax(0,1fr) 80px minmax(0,1.4fr) minmax(0,1.8fr)', rows: [
+				['SitesTable, AuthorsTable', 'New', 'UTable; below 640 px a list of UCard', 'Same row heights as Users. Defined once as DirectoryList in DirectoryFrame and used by both. Read-only variant has no actions'],
+				['SiteForm, AuthorForm', 'New', 'USlideover + UForm, UFormField, UInput, UTextarea, URadioGroup, USwitch', 'Sheet on mobile. Close with changes opens the discard UModal'],
+				['SlugField', 'New', 'UInput + UButton (icon) + UBadge', 'Defined once in DirectoryFrame. Auto badge, pencil, "Reset to match the name". Locked read-only variant with a lock for the site key after creation'],
+				['SocialLinksRepeater', 'New', 'USelect + UInput + UButton, in UFormField', 'Max 5 rows. Placeholder follows the type'],
+				['MediaField', 'New', 'UButton + UModal (existing picker)', 'Defined once in DirectoryFrame. Used for the social image and the avatar'],
+				['AuthorViewPanel', 'New', 'USlideover, read-only', 'Detail for roles without author rights. Close is the only action'],
+				['AuthorAvatar', 'New', 'UAvatar', 'Initials fallback, square, radius 0'],
+				['AuthorStack', 'New', 'UAvatarGroup max=3', 'Shows "+N"'],
+				['AuthorList', 'New', 'List of UButton, UAvatar, UBadge; sorting with useSortable', 'No Nuxt UI match for sortable rows. Keyboard reordering is custom'],
+				['AuthorSelect', 'New', 'USelectMenu multiple with create-item', 'Footer item "Create author…" opens the dialog'],
+				['SiteSelect', 'New', 'USelectMenu', 'Item slot shows name and host'],
+				['UserSelect', 'New', 'USelectMenu', 'Only users without an author'],
+				['ReassignDialog', 'New', 'UModal + USelectMenu + UAlert', 'Defined once in DirectoryFrame. Used for site and author deletion'],
+				['MetaSection', 'New', 'UCollapsible', 'Desktop sidebar and mobile sheet'],
+				['AuthorProfileCard', 'New', 'UCard + UButton + UAlert', 'Profile screen'],
+				['CreateAuthorHint', 'New', 'UAlert closable', 'Dismissal stored per user'],
+				['Default badge, Linked badge, Guest badge', 'New', 'UBadge', 'Sand fill, info soft fill, outline'],
+				['Row menu with a disabled item', 'Existing + change', 'UDropdownMenu + UTooltip', 'The item stays focusable']
+			] }] },
+			{ label: 'Sites and authors: accessibility', title: 'Sites and authors: keyboard and screen reader', note: 'Applies to the reorderable author list and to the media picker used by both forms.', tables: [{ cols: ['Control', 'Keyboard', 'Screen reader'], tpl: 'minmax(0,0.8fr) minmax(0,1.6fr) minmax(0,1.8fr)', rows: [
+				['Author list, handle', 'Tab reaches each handle. Space or Enter grabs. Up and Down move one place; Home and End move to the first and last place. Space or Enter drops. Escape cancels and restores the order.', 'The handle is a button: "Reorder Inès Duarte, position 1 of 3". The list has aria-describedby text "Drag to reorder. The first author is the primary byline." A polite live region announces: "Jonas Pereira grabbed. Position 2 of 3. Use the up and down arrow keys to move, Space to drop, Escape to cancel." Then "Jonas Pereira moved to position 1 of 3.", "Jonas Pereira dropped at position 1 of 3." or "Reorder cancelled. Jonas Pereira is back at position 2 of 3."'],
+				['Author list, remove', 'Tab, then Enter or Space. Focus moves to the next row\'s handle, or to the Add an author field after the last row.', 'Button "Remove Camille Roche from this article". Live region: "Camille Roche removed. 2 authors."'],
+				['Author list, pointer and touch', 'Pointer: drag the handle after 4 px. Touch: press and hold the 44 px handle for 250 ms, then drag.', 'Same live region messages as the keyboard.'],
+				['Add an author', 'Down arrow or typing opens the list. Up and Down move, Enter adds or removes, Escape closes and returns focus to the field. "Create author…" is the last option.', 'role=combobox, aria-expanded, aria-controls, aria-multiselectable. Selected options have aria-selected. Live region: "Inès Duarte added. 2 authors."'],
+				['Media picker', 'Focus moves into the dialog and is trapped. Tabs use arrow keys. Tiles form one radio group: arrow keys move, Space selects. "Use image" is aria-disabled until a tile is selected. Escape closes and focus returns to "Choose image" or "Change image".', 'Each tile reads "north-wall.jpg, 3.9 MB". After "Use image" a polite message reads "Image selected: north-wall.jpg", and focus lands on "Change image".'],
+				['Slug field', '"Edit slug" moves focus into the input. "Reset to match the name" keeps focus on itself.', 'The input has aria-invalid and aria-describedby for the error. Reset announces "Slug reset to camille-roche".'],
+				['Section header', 'Enter or Space toggles.', 'Button with aria-expanded and aria-controls.'],
+				['Disabled delete', 'Stays in the tab order of the menu.', 'aria-disabled, with aria-describedby pointing to the explanation.']
+			] }] }
+		] }
+	}
+	dirGroups(bo) {
+		const doc = this.dirDoc()
+		const rowsA = ['How we price a bathroom renovation', 'Choosing lime plaster for old stone walls', 'Before and after: the Rue Verte kitchen', 'Winter checklist for timber windows', 'Why we reuse original floorboards', 'Our first passive-house retrofit']
+		const meta = [[true, '12 Mar 2026', '2 hours ago', ['Inès Duarte'], 'Journal'], [false, '9 Sep 2026', 'Yesterday', ['Inès Duarte', 'Camille Roche'], 'Renew'], [true, '28 Aug 2026', '3 days ago', ['Jonas Pereira'], 'Projects'], [false, '2 Sep 2026', '5 days ago', ['Inès Duarte', 'Jonas Pereira', 'Camille Roche', 'Paul Huber', 'Léa Fontaine'], 'Journal'], [true, '14 Jun 2026', '18 Aug 2026', ['Paul Huber'], 'Renew'], [true, '3 Apr 2026', '2 Jul 2026', [], 'Journal']]
+		const rows = meta.map((x, i) => ({ t: rowsA[i], on: x[0], c: x[1], u: x[2], au: x[3], site: x[4], seo: [0, 2, 'hidden', 3, 1, 0][i] }))
+		const edShell = ed => ({ kind: 'editor', nav: 'articles', crumbs: ['Articles', 'How we price a bathroom renovation'], mTitle: 'Edit article', mLead: 'arrow-left', mAction: 'ellipsis', ed: { status: 'draft', save: 'saved', sheet: true, ...ed } })
+		const pfShell = { kind: 'profile', nav: 'profile', crumbs: ['Profile'], mTitle: 'Profile', pf: {} }
+		return doc.groups.map(g => ({ label: g.label, title: g.title, route: g.route, api: g.api, note: g.note, states: g.states.map(st => {
+			const o = st.o
+			if (o.v === 'adminSettings') { const src = bo.flatMap(x => x.states).find(x => x.name === 'Admin view'); const ch = { name: st.name, trigger: st.trigger, role: 'admin', sideOpen: true }; return { ...src, ...ch, m: { ...src.m, ...ch } } }
+			if (o.v === 'app') {
+				const L = { ...o.list }
+				if (!L.empty && !L.loading) L.rows = L.only ? rows.filter(r => r.site === L.only) : rows
+				if (L.needs && !L.empty) L.rows = rows.filter(r => r.seo > 0)
+				const base = { kind: 'articles', nav: 'articles', crumbs: ['Articles'], mTitle: 'Articles', list: L }
+				return { notMedia: true, name: st.name, trigger: st.trigger, ...base, m: { ...base } }
+			}
+			let s = { ...o }
+			if (o.v === 'editor') s.shell = { ...edShell(o.ed), role: o.role }
+			if (o.v === 'profile') s.shell = { ...pfShell, pa: o.pa, role: o.role }
+			const x = { isDir: true, notMedia: false, name: st.name, trigger: st.trigger, ...s }
+			return { ...x, m: { ...x, ...(st.mo || {}) } }
+		}) }))
+	}
+	dirSpecs() { return this.dirDoc().specs.map(sp => ({ label: sp.label, title: sp.title, note: sp.note, tables: sp.tables.map(t => ({ cols: t.cols, tpl: t.tpl, rows: t.rows.map(r => r.map((x, i) => this.cell(x, i, { muted: x === '–' }))) })) })) }
+	dirCopy() { return this.dirDoc().groups.flatMap(g => g.states.filter(s => s.copy).map(s => [g.title + ': ' + s.name, s.copy])) }
+	// DIR-END
 	finish(gs) { return gs.map(g => ({ ...g, states: g.states.map(st => ({ notMedia: !st.isMedia && !st.isAct, ...st, m: { ...st.m } })) })) }
 	renderVals() {
 		const modes = [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']].map(([k, label]) => {
@@ -829,7 +1114,7 @@ class Component extends DCLogic {
 			return { label, on, bg: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-bg)' : 'var(--ui-text-toned)', pick: () => this.setState({ mode: k }) }
 		})
 		const rows = a => a.map(r => ({ a: r[0], b: r[1] }))
-		return { rootRef: this.rootRef, modes, groups: this.groups(), specs: this.varSpecs(), spCopy: rows(this.state.spec.copy), spComps: rows(this.state.spec.comps), spApi: rows(this.state.spec.api) }
+		return { rootRef: this.rootRef, modes, groups: this.groups(), specs: [...this.varSpecs(), ...this.dirSpecs()], dirCopy: this.dirCopy().map(r => ({ a: r[0], b: r[1] })), spCopy: rows(this.state.spec.copy), spComps: rows(this.state.spec.comps), spApi: rows(this.state.spec.api) }
 	}
 }
 </script>

docs/design/states.md

@@ -2,6 +2,12 @@
 
 Every state in the three boards is drawn in light and dark (theme switch) at 1440×900 and 390×844. Counts are in README.md.
 
+## Clock-sensitive states
+Only individual states that render a relative time or a countdown are marked "Clock-sensitive" on the board: Articles "Published" (Updated reads "Just now"), Media "Upload: too many requests (429)" and Settings "Too many requests (429)" (countdowns), Users "Renew invite: done", and the Settings update states that show "Last checked today at 09:41" or "yesterday" (Up to date, Check failed, Update available, Update available with notes open, Update done, Plain restart: confirm, Admin view, Role changed, Update already running). Capture and test them with a frozen clock at 13 Oct 2026, 09:41. Frames that merely list dated rows are not marked.
+
+## Sites and authors: roles
+Sites: only the owner can create, edit, delete or set the default; other roles have no Sites entry and get a 403 page on a direct link. Anyone who can edit an article can set its site and read the site list. Authors: owner and admin manage; other roles see the list and detail read-only and can create and edit their own author only. The site key is immutable after creation.
+
 ## Copy glossary
 | Use | Not |
 |---|---|
@@ -23,18 +29,41 @@ Glossary pass 2, changes made: activity log lines "Removed N expired invites" an
 | Status | Copy |
 |---|---|
 | 400 | "That request wasn't valid. Check the fields and try again." |
-| 401, 403 | Global redirect, no local copy |
+| 401, 403 | Global redirect, no local copy (403 from an unverified account). Role 403s have local copy: see the rows below |
 | 404 | "That item no longer exists." |
 | 409 | "This changed somewhere else. Reload and try again." |
 | 413 | "That file is too large." |
 | 429 | "Too many requests. Try again in a few minutes." |
 | 500, network | "Something went wrong on our side. Nothing was changed. Try again in a moment." |
+| 400 invalid_site_url | "Use https. For example https://blog.example.com." / "Remove the path. Use only the host, like https://blog.example.com." / "Enter a full URL, like https://blog.example.com." (inline under base url) |
+| 409 site_key_taken | "A site with the key "journal" already exists. Choose another key." (inline under key, with a suggestion) |
+| 409 site_has_articles | "Choose where the articles go. This site has 38 articles." (inside the delete dialog) |
+| 403 "Only the owner can do this." (page) | "You don't have access to Sites" / "Only the owner can manage sites. Ask the owner of this site if you need a change." / "Back to Settings" (403 page on /settings/sites) |
+| 403 "Only the owner can do this." (action) | "Only the owner can manage sites" / "Ask the owner of this site." (error toast, role changed while the page was open) |
+| 403 author_rights | "Only an owner or admin can change authors" / "You can still edit your own author profile." (error toast, role changed while the page was open) |
+| 400 key_immutable | "Used in API paths, so it can't change." (not shown: the edit form has no editable key) |
+| 400 invalid_locale | "Use a language tag like en or fr-CH." (inline under locale) |
+| 403 default_site | "The default site can't be deleted. Make another site the default first." (toast if the menu was stale) |
+| 404 site_not_found | "That site no longer exists" / "It was deleted somewhere else, so we removed it from the list." (info toast) |
+| 409 author_slug_taken | "The slug "camille-roche" is already used by another author." (inline under slug, with a suggestion) |
+| 409 author_has_articles | "Can't delete this author" / ""Camille Roche" is credited on 3 articles. Choose another author to credit instead, or remove Camille Roche from those articles first." (server fallback dialog, drawn once) |
+| 409 user_already_linked | "That user already has an author. Choose another user." (inline under linked user) |
+| 422 bio_too_long | "Shorten the bio to 280 characters." (inline under bio) |
+| 422 invalid_url | "Enter a full URL starting with https://." (inline under website and each social link) |
+| 404 author_not_found | "That author no longer exists" / "It was deleted somewhere else, so we removed it from the list." (info toast) |
+| 404 site_not_found (sitemap) | GET /v1/site/{key}/sitemap, unknown key. The body is the code `site_not_found`, shown on Integration in the code style (not rewritten as prose). |
+| 400 (sitemap page or size) | "The request cannot be processed due to a mismatch in the format of the body." (same text as the other routes on Integration) |
+| 403 owner_only vs article SEO | Integration note under the 403 row: "Site SEO defaults are owner only. Article SEO fields need only the right to edit the article." |
+| 500 – | "Couldn't save the site. Your changes are still here. Try again in a moment." / "Couldn't save the author. Your changes are still here. Try again in a moment." / "Couldn't create the author" / "The article is unchanged. Try again in a moment." (notice inside the panel or dialog) |
 
 ## Public image 400 bodies
 `{ "status": 400, "error": "unknown_variant", "message": "Unknown variant", "detail": "hero" }` and `{ "status": 400, "error": "unsupported_parameter", "message": "Unsupported parameter", "detail": "width" }`. The original is not served as a fallback.
 
-## Articles pagination
-Loading next page keeps row height, controls disabled, summary "Loading page 7…". Error "Couldn't load page 7. Showing page 6." with Retry. Out of range "That page doesn't exist. Showing the last page." Page size menu offers 5, 25, 50, 100.
+## Articles and Media pagination
+Same states and copy on Articles and Media (Media draws them under the grid or list). Loading next page keeps row height, controls disabled, summary "Loading page 7…". Error "Couldn't load page 7. Showing page 6." with Retry. Out of range "That page doesn't exist. Showing the last page." Page size menu offers 5, 25, 50, 100. Invalid `page` or `size` in the URL (size=30, page=abc, page=0) is replaced by the default without a notice; the API 400 never reaches the user.
+
+## Sites and authors pagination
+Groups "Sites: pagination" and "Authors: pagination", 10 states each, same pager as Articles and Media, sizes 5, 25, 50, 100 (default 25). First, middle and last page; single page (count line "N sites" or "N authors" only, no pager, no size select); page-size menu; loading ("Loading page N…", skeleton rows, pager kept and disabled); error ("Couldn't load page N. Showing page M." with Retry, rows and page number kept); empty after search (existing empty state, no pager); search resets to page 1; long labels on mobile. Out of range: ?page past the end is replaced by the last page, with "That page doesn't exist. Showing the last page." (not drawn; as Articles). Details in screens/sites.md and screens/authors.md.
 
 ## Editor
 Counter without limit ("1,204 words · 7,318 characters"; at 120,000 characters "19,845 words · 120,000 characters"), "Saving…", "Saved", "Couldn't save. Your text is kept. Retry". Link states and the toolbar overflow are drawn in the Editor group (11 states).
@@ -47,3 +76,6 @@ As in screens/settings.md, screens/image-variants.md and screens/activity.md. Sy
 
 ## Per-screen copy
 screens/<name>.md, section "Copy per state" (generated from the board source).
+
+## SEO round
+Frames: Editor: search and sharing (24), Editor: what the frontend gets (6), Sites: SEO defaults (5), Articles: search status (3). Each is drawn desktop and mobile; light and dark follow the theme switch. None is clock-sensitive: dates in the API preview are fixed sample values. Disabled state: all fields at 40% while saving. Validation: slug taken, canonical not absolute, title template without %title%, excerpt over 300. Suggestions never block saving or publishing. Copy per state: screens/editor.md, articles.md, sites.md.

docs/development.md

@@ -72,6 +72,11 @@ task clean           # remove bin/, tmp/ and the built SPA
 - All Go tests live in [`test/`](../test) (package `test`, black-box). They use in-memory fakes of the domain `Repository` interfaces, so they need no database, SMTP server or network.
 - HTTP-level tests use `net/http/httptest` against a chi router. Call `validator.InitValidator()` before invoking a handler.
 - SPA component tests use Vitest + Vue Test Utils (`task test:web`). `task lint:web` runs eslint and a type check.
+- A few tests open a real SQLite file in a temporary directory (the chunked id lookups, the slug backfill and the `?seo=` measurement). They never touch the real database.
+- The tests that need a real MySQL, MariaDB or PostgreSQL server skip themselves when `RENEWCMS_TEST_MYSQL_DSN` or `RENEWCMS_TEST_POSTGRES_DSN` is unset. No CI exists, so run them by hand before a release that touches the repositories:
+  - `task test:mysql` runs `mysql:8.4` then `mariadb:11` in Docker, and `task test:postgres` runs `postgres:16` then `postgres:17`. Docker is required; the tasks start and remove the containers. Extra arguments go after `--`, for example `task test:postgres -- -run Postgres.*Chunked -v`.
+  - To use your own server on a scratch database: `RENEWCMS_TEST_MYSQL_DSN='user:pass@tcp(host:3306)/db' go test -tags nofrontend ./test/... -run MySQL -count=1`, or `RENEWCMS_TEST_POSTGRES_DSN='postgres://user:pass@host:5432/db?sslmode=disable' go test -tags nofrontend ./test/... -run Postgres -count=1`.
+  - `TestMySQLChunkedLookups` and `TestPostgresChunkedLookups` check that the batched `IN` lookups of the article repository (500 ids per batch) return the same rows as SQLite.
 
 ## Visual check against the design
 

docs/docker.md

@@ -21,7 +21,7 @@ Requirements: Docker with Compose v2. [task](https://taskfile.dev) is optional f
    docker compose up -d
    ```
 
-   `docker-compose.yml` uses `image: ${RENEWCMS_IMAGE:-git.floriansylvain.fr/fsylvain/renewcms:beta}`. The default tag is `beta` because `latest` does not exist until the first stable release (the default changes to `latest` then). Set `RENEWCMS_IMAGE` in your shell or in a `.env` file next to the compose file to pin another tag, for example `RENEWCMS_IMAGE=git.floriansylvain.fr/fsylvain/renewcms:v2.9.0-beta`.
+   `docker-compose.yml` uses `image: ${RENEWCMS_IMAGE:-git.floriansylvain.fr/fsylvain/renewcms:beta}`. The default tag is `beta` because `latest` does not exist until the first stable release (the default changes to `latest` then). Set `RENEWCMS_IMAGE` in your shell or in a `.env` file next to the compose file to pin another tag, for example `RENEWCMS_IMAGE=git.floriansylvain.fr/fsylvain/renewcms:v3.2.1-beta`.
 
    To build from the local sources instead, see [Building from source](#building-from-source).
 
@@ -50,7 +50,7 @@ docker compose -f docker-compose.yml -f docker-compose.build.yml up -d --build
 | Release | Tags pushed |
 |---|---|
 | `vX.Y.Z` (stable) | `vX.Y.Z`, `X.Y.Z`, `X.Y`, `latest` |
-| `vX.Y.Z-<pre>` (for example `v2.9.0-beta`, `v2.9.0-rc.1`) | `vX.Y.Z-<pre>`, `X.Y.Z-<pre>`, and the moving tag `<pre-name>` (`beta`, `rc`) |
+| `vX.Y.Z-<pre>` (for example `v3.2.1-beta`, `v3.2.1-rc.1`) | `vX.Y.Z-<pre>`, `X.Y.Z-<pre>`, and the moving tag `<pre-name>` (`beta`, `rc`) |
 
 A pre-release never moves `latest`. Images are published for `linux/amd64` and `linux/arm64`. `renewcms --version` in the image prints the exact release tag. Images are not signed; the Ed25519 key signs the release binaries only.
 
@@ -198,7 +198,7 @@ Publishing is a manual, maintainer-run task, like `task release`. There is no CI
 1. Tag the release and keep the work tree clean:
 
    ```sh
-   git tag v2.9.0-beta
+   git tag v3.2.1-beta
    ```
 
 2. Log in once to the registry. The task never reads or stores credentials:
@@ -226,7 +226,7 @@ Publishing is a manual, maintainer-run task, like `task release`. There is no CI
 
 ```sh
 task docker:publish -- --dry-run
-task docker:publish VERSION=v2.9.0-rc.1 -- --dry-run
+task docker:publish VERSION=v3.2.1-rc.1 -- --dry-run
 ```
 
 The dry run builds for the host platform only, loads the image into the local Docker, pushes nothing and needs no login. It prints the tags a real run would push. A `VERSION` override is accepted only with `--dry-run`, and a dirty tree is allowed there. Remove the loaded images afterwards with `docker rmi`.

docs/performance.md

@@ -0,0 +1,21 @@
+# Performance notes
+
+## The `?seo=` article filter
+
+`GET /v1/article/` assesses the SEO status of articles in memory, because the status depends on the body, the site template and the authors. Every request assesses every visible article once, to fill `counts.suggestions`, and `?seo=` reuses that assessment to filter before paging. The cost therefore grows with the number of articles, not with the page size.
+
+Measured by `TestSeoFilterPerformance` in `test/seo_filter_performance_test.go` (skipped with `-short`): 5,000 articles of about 5 KB each in one site, on a SQLite file in a temporary directory, every article with suggestions, `?seo=suggestions&size=25`, slowest of 3 runs:
+
+| Version | Time |
+| --- | --- |
+| `counts.suggestions` added, assessment done twice | about 430 ms |
+| assessment shared between the counts and the filter | about 270 ms |
+
+The target is 300 ms for 5,000 articles. The test also measures the default list (`GET /v1/article/` with no `?seo=`), which pays the same assessment for `counts.suggestions`. Latest run on the development machine, slowest of 3 runs:
+
+| Request | Time |
+| --- | --- |
+| `?seo=suggestions&size=25` | 315 to 338 ms |
+| default page, no `?seo=` | 307 to 329 ms |
+
+Both are slightly above the 300 ms target on this machine (they were about 270 ms in the earlier measurement), so the target is logged by the test but not enforced; no cache or index was added. Re-run the test with `go test -tags nofrontend ./test/... -run TestSeoFilterPerformance -v -count=1` after a change to the assessment rules or the article repository. The time depends on the machine; the test only fails above 500 ms.

docs/release-notes.md

@@ -17,21 +17,26 @@ Rules: bullets are full sentences ending with a period; user-facing wording, no
 
 ## Published releases
 
-Each body lives in `docs/releases/<tag>.md`. Publish with `tea releases create --tag <tag> --title "<name>" --note-file docs/releases/<tag>.md --prerelease --asset <file>` after `task release`, with one `--asset` per file: the six binaries, `bin/checksums.txt` and `bin/checksums.txt.sig`. `task release` produces all eight and fails before building when the signing key is missing or wrong (see [deployment.md](deployment.md#release-signing-key-maintainers-once)). Never publish a release without the two checksum files.
+Each body lives in `docs/releases/<tag>.md`. Publish with `tea releases create --tag <tag> --title "<tag> - <theme>" --note-file docs/releases/<tag>.md --prerelease --asset <file>` after `task release`, with one `--asset` per file: the six binaries, `bin/checksums.txt` and `bin/checksums.txt.sig`. `task release` produces all eight and fails before building when the signing key is missing or wrong (see [deployment.md](deployment.md#release-signing-key-maintainers-once)). Never publish a release without the two checksum files.
 
-| Tag | Name |
+| Tag | Theme |
 | --- | --- |
-| `2.0.0-beta` (legacy tag without the `v`, kept as is) | v2.0.0-beta - Vue 3 SPA and domain-driven backend |
-| `v2.1.0-beta` | v2.1.0-beta - Image upload in the editor |
-| `v2.2.0-beta` | v2.2.0-beta - Image crop, image removal & reset screens |
-| `v2.3.0-beta` | v2.3.0-beta - Multi-user invitations, display names & profile page |
-| `v2.4.0-beta` | v2.4.0-beta - Owner role, invite management & Settings page |
-| `v2.5.0-beta` | v2.5.0-beta - Media library & image picker |
-| `v2.6.0-beta` | v2.6.0-beta - Signed updates and browser restart |
-| `v2.6.2-beta` | v2.6.2-beta - English and French interface |
-| `v2.7.0-beta` | v2.7.0-beta - Markdown and block article bodies |
-| `v2.8.0-beta` | v2.8.0-beta - API keys and API reference |
-| `v2.8.1-beta` | v2.8.1-beta - Docker deployment |
-| `v2.8.2-beta` | v2.8.2-beta - Security headers and clearer log in errors |
-| `v2.8.3-beta` | v2.8.3-beta - Security policy fixes for the web app |
-| `v3.1.0-beta` | v3.1.0-beta - Image variants |
+| `2.0.0-beta` (legacy tag without the `v`, kept as is) | Vue 3 SPA and domain-driven backend |
+| `v2.1.0-beta` | Image upload in the editor |
+| `v2.2.0-beta` | Image crop, image removal & reset screens |
+| `v2.3.0-beta` | Multi-user invitations, display names & profile page |
+| `v2.4.0-beta` | Owner role, invite management & Settings page |
+| `v2.5.0-beta` | Media library & image picker |
+| `v2.6.0-beta` | Signed updates and browser restart |
+| `v2.6.2-beta` | English and French interface |
+| `v2.7.0-beta` | Markdown and block article bodies |
+| `v2.8.0-beta` | API keys and API reference |
+| `v2.8.1-beta` | Docker deployment |
+| `v2.8.2-beta` | Security headers and clearer log in errors |
+| `v2.8.3-beta` | Security policy fixes for the web app |
+| `v2.9.0-beta` | Media duplicate purge |
+| `v3.0.0-beta` | Activity log, more databases and S3 storage |
+| `v3.1.0-beta` | Image variants |
+| `v3.2.0-beta` | Article lists, editor links and activity export |
+| `v3.2.1-beta` | Paged media library and remembered page sizes |
+| `v3.3.0-beta` | Sites, authors and search and sharing |

docs/releases/v3.2.0-beta.md

@@ -0,0 +1,46 @@
+This release adds paginated, searchable article lists, links in the editor and an export of the activity log, and removes the article length limit. The article list API changes shape, so read the upgrading notes if you call it.
+
+## New
+
+**Articles**
+
+- The article list is now paged, with a search box, an Online and Draft filter, sortable columns and a page size of 5, 25, 50 or 100. Counts for All, Online and Draft stay fixed while you search.
+- Articles have no length limit any more, and a new article can be created without a body.
+
+**Editor**
+
+- Insert, edit and remove links directly in the editor.
+
+**Activity log**
+
+- The summary cards at the top are now filters: select one to narrow the list, select it again to clear it.
+- A new Export menu downloads the filtered events as a CSV file.
+- The date range also accepts "All time".
+
+**Integration**
+
+- The Integration page has a new Images section covering image variants, and its code snippets now share one format.
+
+## Improvements and fixes
+
+- Each page now sets its own browser tab title, in the form "Page · RenewCMS", instead of keeping the title of the first page loaded.
+- Registering now waits for the session to be refreshed before showing the pending-approval screen, which fixes a redirect back to the sign in page.
+- The media and variant screens, the navigation contrast and the shell colors follow the design spec more closely.
+- The development workflow on Linux no longer deletes the visual check output.
+
+## API
+
+- Changed: `GET /v1/article/` always answers `{ items, total, page, size, counts }` instead of a bare array. It accepts `page`, `size` (`5`, `25`, `50`, `100`), `q`, `status` (`online` or `draft`) and `sort` (for example `title:asc`; default `updated_at:desc`). An invalid value answers `400`. Anonymous callers still only see online articles.
+- Changed: `POST /v1/article/` and `PATCH /v1/article/{id}` no longer reject a body over 10,000 characters, and `POST` accepts an empty body.
+- `GET /v1/activity` and `GET /v1/activity/export` accept `range=all`.
+
+## Under the hood
+
+- Add the paged article query to the article repository contract, with accent-insensitive title search, and promote `golang.org/x/text` to a direct dependency.
+- Add specifications, design checks and Go and Vitest suites for the new screens.
+- Document the article list in `docs/api/articles.md` and link the API docs from the README.
+
+## Upgrading
+
+- Replace the binary, or pull the new image. There is no schema change and no new environment variable.
+- Any script or site that reads `GET /v1/article/` must now read the `items` property of the response. Without `page` and `size` you get the first 25 articles, so loop over `page` until you have `total` items.

docs/releases/v3.2.1-beta.md

@@ -0,0 +1,31 @@
+This release pages the media library, remembers your page size on the article, activity and media lists, and previews image variants on a real sample photo. The media list API changes shape, so read the upgrading notes if you call it.
+
+## New
+
+**Media library**
+
+- The media library is now paged, with a page size of 5, 25, 50 or 100. The image picker in the editor uses the same pages.
+
+**Image variants**
+
+- Creating a variant shows a preview rendered from a real sample image, so the size estimate and the before and after comparison match what visitors will get.
+
+## Improvements and fixes
+
+- The article, activity and media lists keep their page and page size in the address, so a reload or a shared link opens the same view.
+- The Integration page is now fully translated into French.
+
+## API
+
+- Changed: `GET /v1/media/` answers `{ items, total, page, size, counts }` instead of `{ items, next_cursor, counts }`. It accepts `page` (default `1`) and `size` (`5`, `25`, `50` or `100`, default `25`). An invalid value answers `400`.
+- Changed: `GET /v1/media/` no longer accepts `cursor` or `limit`.
+
+## Under the hood
+
+- Replace the cursor and limit of the media list query with a page and a size in the image domain and the list use case.
+- Add specifications, design checks and Go and Vitest suites for the paged media screens.
+
+## Upgrading
+
+- Replace the binary, or pull the new image. There is no schema change and no new environment variable.
+- Any script or site that reads `GET /v1/media/` must now read `total` and loop over `page` instead of following `next_cursor`.

docs/releases/v3.3.0-beta.md

@@ -0,0 +1,86 @@
+This release adds sites, authors and search and sharing data (SEO) to articles: every article now belongs to a site, can credit authors, and carries what a website needs to be found and shared. Several API shapes change, so read the upgrading notes if you call the API.
+
+## New
+
+**Sites**
+
+- Every article belongs to exactly one site, and exactly one site is the default. Existing articles are moved to the default site, which is created from `PUBLIC_URL` on the first start.
+- The new Sites screen under Settings lets the owner add, edit, delete and set the default site, with a name, a key, a base address, a default robots setting, a locale and a default social image. Deleting a site with articles asks where to move them.
+- The editor and the articles list let you choose an article's site, and the articles list can be filtered by site.
+- A site also holds site-wide search defaults: a site name, a title template (it must contain `%title%`) and a default description, with a live example while you type.
+
+**Authors**
+
+- The new Authors screen manages public bylines, with or without an account: name, slug, bio, avatar, website and up to five social links. Owners and admins manage every author, and anyone can edit the author linked to their own account.
+- Articles credit an ordered list of authors, and the first is the primary byline. The editor offers a search box with keyboard and pointer reordering, and a "Create author" shortcut for owners and admins.
+- Users without an author profile are offered to create their own from the editor, and a new article is credited to its creator's author when there is one.
+- Deleting an author that is credited on articles asks who takes over the credits, or whether to remove them.
+
+**Search and sharing**
+
+- An article has a slug, an excerpt, a search title and description, a cover image with its alt text, a social title, description and image, a canonical address, a noindex flag and a list of dismissed suggestions.
+- The slug is generated from the title, is unique per site and can be changed at any time; an empty slug regenerates it from the title.
+- The editor has a new Search and sharing section with soft length counters, fallback chips that show where each value comes from, search and social previews, and a "What the frontend gets" view of the resolved data.
+- The editor checks the article as you type, without saving, and shows at most three suggestions with links to the field to fix. Any suggestion can be dismissed for an article.
+- Articles list items show a search status chip, and a "Needs attention" toggle keeps only the articles that still have suggestions.
+- `GET /v1/article/{id}/seo` returns the resolved search and sharing data (title with the site template, description, canonical address, robots, Open Graph, Twitter, image, authors and ready JSON-LD), so a frontend can render its meta tags without reimplementing the fallback chain. RenewCMS itself renders no page.
+- `GET /v1/site/{key}/sitemap` lists the published URLs of a site.
+- The Integration page documents the new search and sharing routes.
+
+**Lists**
+
+- The Sites and Authors lists are paged, with a page size of 5, 25, 50 or 100, a server-side search, and a page, size and search kept in the address so a reload or a shared link opens the same view. A page past the end goes to the last page with a notice.
+
+## Improvements and fixes
+
+- An image used as a cover, a social image, an author avatar or a site default social image now counts as used. It shows in the media library usage list, stays out of the unused filter, and is repointed by a merge or a purge.
+- Deleting an image never fails because of its uses: the covers, social images, avatars and site images that point at it are cleared.
+- The image picker names the selected image even when it is outside the first 100 media items, without requesting the whole list.
+- Author profile pictures now show everywhere in the app.
+- Every toggle switch in the app now uses one shared component, so they all have the same, correct geometry.
+- Identical SEO checks are answered from a bounded cache, and a failed check is never cached.
+- The activity log has two new filters, Sites and Authors, and records site, author and SEO field edits. Free-text fields record a size change and never their text.
+- The Create author dialog and the Integration screens match the design on mobile.
+
+## API
+
+- `GET /v1/site/` lists the sites, the default first. It takes `q`, `page` and `size` and sends the matching total in `X-Total-Count`; without `page` and `size` every site is still returned, as a JSON array. Read access needs a verified session or an API key.
+- `POST /v1/site/`, `PATCH /v1/site/{id}`, `PATCH /v1/site/{id}/default` and `DELETE /v1/site/{id}?reassign_to={id}` are for the owner and accept a session only. Errors are plain text tokens: `site_key_taken` (409), `site_has_articles` (409), `default_site` (403), `key_immutable`, `invalid_site_url`, `invalid_locale`, `invalid_title_template`, `image_not_found`, `use_set_default` and `invalid_reassign` (400), and `site_not_found` (404).
+- `GET /v1/site/{key}/sitemap` is public and returns `[{ url, modified_at, noindex }]` for the online articles of a site, paged with `page` and `size` and with the total in `X-Total-Count`.
+- `GET /v1/author/` lists authors, newest first, with `q`, `page` and `size`, as `{ items, total, page, size }` and the total in `X-Total-Count`.
+- `POST /v1/author/` and `DELETE /v1/author/{id}?reassign_to={id|none}` are for owners and admins, `POST /v1/author/me` creates the caller's own author and answers `slug_adjusted`, and `PATCH /v1/author/{id}` is open to owners, admins and the linked account. All of them accept a session only. Errors include `author_not_found`, `user_not_found`, `author_slug_taken`, `author_has_articles`, `user_already_linked`, `author_already_linked`, `invalid_slug`, `invalid_reassign`, `image_not_found`, `bio_too_long`, `invalid_url`, `too_many_links` and `author_rights`.
+- `GET /v1/article/` takes `site=<key>` and `seo=ready|suggestions|hidden`. Items gain `site_id`, `slug`, `excerpt`, `authors`, `seo_status` and `seo_suggestions`, and `counts` gain `suggestions`.
+- `PATCH /v1/article/{id}` takes `body`, `site_id`, `author_ids` and the twelve SEO fields. `cover_image_id` and `social_image_id` accept `null`. A slug already used on the target site answers `409` `slug_taken` with the header `X-Slug-Suggestion` holding the first free slug.
+- `GET /v1/article/{id}`, `POST /v1/article/`, `PATCH /v1/article/{id}`, `PATCH /v1/article/{id}/publish` and `PATCH /v1/article/{id}/unpublish` return `site_id`, `authors` and the twelve SEO fields.
+- `GET /v1/article/{id}/seo` returns the resolved search and sharing data. It is public for online articles, and a verified session or API key also reads drafts.
+- `POST /v1/article/{id}/seo/check` evaluates an article without saving, with optional overrides, and returns the status, the suggestions and whether the slug is free.
+- `GET /v1/auth/me` also returns `author`, the linked author of the caller or `null`.
+- `GET /v1/media/{id}` reads one image with the fields of a media list item. A missing image answers `404` and a malformed id `400`.
+- `GET /v1/activity` accepts the new `sites` and `authors` categories, with the events `site.create`, `site.edit`, `site.set_default`, `site.delete`, `author.create`, `author.edit` and `author.delete`.
+- Changed: `PATCH /v1/article/{id}` no longer accepts `title`, and `{}`, `{"body": null}` or any object without an accepted field now answers `400` instead of setting an empty body. `{"body": ""}` still empties the body.
+- Changed: `GET /v1/media/{id}/usage` stays an array, and every item gains `type` (`article`, `author` or `site`) and `fields` without losing `id`, `title` and `published`. Authors and sites that use the image are now listed, without a `published` key.
+- Changed: `POST /v1/media/merge` and `POST /v1/media/purge` also report `sites_updated` and `authors_updated`.
+- Changed: `X-Total-Count` is now exposed to browsers through CORS.
+
+## Under the hood
+
+- Add the site, author and article SEO domains, repositories, mappers and use cases behind the existing layers, with a resolver and a checker for the search and sharing data.
+- Upgrade `jwtauth` to v5.4.0 and `lestrrat-go/jwx` to v3, and refresh the related indirect dependencies.
+- Look up authors, sites and credits in batches that work on SQLite, MySQL, MariaDB and PostgreSQL.
+- Document the routes in `docs/api.md` and `docs/api/articles.md`, the measured cost of the `?seo=` filter in `docs/performance.md`, and the layering in `docs/architecture.md`.
+- Add the specifications, design checks and Go and Vitest suites for sites, authors, search and sharing, and list pagination.
+
+## Upgrading
+
+- Replace the binary, or pull the new image. Back up the database first: the migration changes existing rows.
+- The first start after the upgrade creates the sites and authors tables, seeds the default site (name "Default", key "default") from the scheme and host of `PUBLIC_URL` and moves every article to it. An unparseable `PUBLIC_URL` stops the migration, so check it before upgrading. `PUBLIC_URL` is never read for sites afterwards.
+- The same start adds the new columns, gives every existing article a slug generated from its title (in id order within each site, with `-2`, `-3` on conflicts) and creates the unique `(site_id, slug)` index. A deleted article now frees its slug. The backfill writes in batches of 500 rows, a start that was interrupted resumes where it stopped, and a second start changes nothing.
+- Existing sites get the default title template `%title% | %site%`, an empty site name and an empty default description.
+- No new environment variable is needed.
+- Any script that sends `PATCH /v1/article/{id}` with a `title`, an empty object or a null body must change, as described in the API section.
+- Reading `GET /v1/media/{id}/usage` as an array of articles still works, but now also yields authors and sites. Filter on `type` if you only want articles.
+
+## Known limitations
+
+- The `?seo=` filter and `counts.suggestions` assess every visible article in memory, so their cost grows with the number of articles. On the development machine, 5,000 articles of about 5 KB each answer in roughly 300 ms.
+- Only the owner can manage sites, and an API key cannot write sites or authors.

features/activity-log-backend.feature

@@ -271,10 +271,17 @@ Feature: The back-office keeps an append-only activity log that owners can read
         | range=today                                | events since 00:00 UTC today              |
         | range=7d                                   | events of the last 7 days                 |
         | range=30d                                  | events of the last 30 days                |
+        | range=all                                  | every event, whatever its age             |
         | range=custom&from=2026-09-01&to=2026-09-30 | events from 1 to 30 September 2026 UTC    |
         | page=2&size=50                             | the second page of 50                     |
         | size=5                                     | the first page of 5                       |
 
+    Scenario: range=all covers every event
+      Given events 2 days old and 90 days old
+      When the owner sends GET /v1/activity?range=all
+      Then both events are listed
+      And the summary and the export with range=all cover both events too
+
     Scenario: Omitting range means 7 days
       Given events 2 days old and 10 days old
       When the owner sends GET /v1/activity

features/activity-log-producers.feature

@@ -84,7 +84,8 @@ Feature: Every real action of the back-office is recorded in the activity log fr
     Scenario: A title change is recorded as a text diff when a title edit exists
       Given a use case that changes an article's title from "Spring release" to "Spring release 2"
       Then its event has action "article.edit" and changes [{"field": "title", "kind": "text", "before": "Spring release", "after": "Spring release 2"}]
-      And only the fields title, online and body can ever appear in an article event's changes
+      And only the fields title, online, body and, since features/seo_data_backend.feature, site, authors and the SEO fields can ever appear in an article event's changes
+      And SEO free-text fields (excerpt, seo_title, seo_description, social_title, social_description, cover_image_alt) are recorded as a size delta in characters with kind "body" and never as text, while short values (slug, canonical_url, noindex, cover_image, social_image) are recorded as text before and after
 
     Scenario: Publishing is recorded with the publish state
       Given the article 8 "Spring release" is offline

features/activity_filter_cards_and_export.feature

@@ -0,0 +1,228 @@
+Feature: Activity screen, filter cards as toggles and the Export menu
+
+  As an owner or admin
+  I want the Failed actions and Security events cards to toggle their filter, and Export to offer the current view or all activity as CSV
+  So that I can isolate problems in one click and keep a copy of the log
+
+  Background:
+    Given this slice amends features/activity_screen.feature (header Export CSV button, strip-card effects, Export scenarios, French export label, empty/error export rules) per docs/design/screens/activity.md groups "Activity: filter cards" and "Activity: export" and docs/design/states.md
+    And the screen, strip, chips, filter bar and list are otherwise as in features/activity_screen.feature
+    And a page filter is the set of q, actor, category, outcome, security, range, from, to
+    And the filters live in component state, so card, chip and Outcome segment read the same state: card Failed pressed = outcome "failed" is set = chip "Outcome: Failed" shown = Outcome segment on Failed; card Security pressed = security is true = chip "Type: Security events" shown, Outcome segment unchanged
+    And "Failed actions" and "Security events" are buttons with aria-pressed (true or false); "Total actions" and "Active people" are not toggles and carry no aria-pressed
+    And a pressed card uses --rc-sand background with --rc-on-sand text; an unpressed card uses the default look
+    And the card hint lines are: unpressed "Click to filter the list" (on hover), pressed "Filtering. Click to clear", pressed and hovered "Click to clear this filter" with an x icon
+    And hover on an unpressed card uses --ui-bg-elevated; keyboard focus-visible draws a 2 px --ui-primary outline with a 2 px offset; Enter and Space toggle
+    And the Outcome segment can still be changed by hand: choosing Failed presses the Failed card, choosing All or Succeeded unpresses it
+    And the Export control is shown only in the full view (owner or admin); the regular-user view and the Forbidden panel have none
+    And the Export control is one outline button, icon download, label "Export", trailing chevron; it is a dropdown menu on desktop and a bottom sheet below md; Enter or ArrowDown opens it, Escape closes it, and focus-visible is a 2 px --ui-primary outline with a 2 px offset
+    And the menu has two items:
+      | item                 | sub-line (enabled)                                                                 | disabled reason                                   |
+      | Export current view  | CSV · {n} events matching your filters and sort, across all pages (n = list total) | Nothing to export. No events match these filters. |
+      | Export all activity… | CSV · every event, ignoring filters. Owners and admins only.                       | Only owners and admins can export all activity.   |
+    And export is CSV only, synchronous, one streamed download: no progress percentage, no job, no "ready later"; JSON (format=json) is proposed in the design, is NOT implemented here, and no format control is offered
+    And "Export current view" sends GET /v1/activity/export with the active page filters (the list query without page and size) and no format parameter
+    And "Export all activity…" sends GET /v1/activity/export with no page filter at all and only the dialog's date range: All time sends range=all; Today, 7 days and 30 days send range=today|7d|30d; Custom sends range=custom&from=YYYY-MM-DD&to=YYYY-MM-DD
+    And the backend accepts range=all on the list, summary and export endpoints (features/activity-log-backend.feature); an omitted range still means 7d
+    And the download is built by the SPA from the response body (blob and anchor) with the file name activity-YYYY-MM-DD.csv for the current view and activity-all-YYYY-MM-DD.csv for all activity (local date)
+    And a response whose CSV has only the header row means nothing to export: nothing is downloaded
+    And 401 and the unverified 403 stay with useApi's global handling; the role-lowered 403 is handled here
+    And the dialog "Export all activity" is a modal (sm:max-w-md, a bottom sheet below md) with the title "Export all activity", a read-only "Format" row reading "CSV", a "Date range" select (default "All time") with the hint "Default is all time. Filters on the page are ignored.", and the footer Cancel on the left, "Export CSV" on the right
+    And every new English string has a French entry in messages.ts
+
+  Scenario Outline: Cards — the toggle cycle keeps card, chip, segment and request in sync
+    Given the Default state has loaded with no filter
+    When the user activates the "<card>" card
+    Then the card has aria-pressed="true", <chip> is shown with "Clear all", and <segment>
+    And GET /v1/activity is sent once with <query>, page=1 and size=25
+    And GET /v1/activity/summary is not requested again
+    When the user activates the "<card>" card again
+    Then aria-pressed is "false", the chip and "Clear all" are gone, the Outcome segment is on All
+    And GET /v1/activity is sent with range=7d, page=1 and size=25 only
+
+    Examples:
+      | card            | chip                    | segment                          | query          |
+      | Failed actions  | "Outcome: Failed"       | the Outcome segment is on Failed | outcome=failed |
+      | Security events | "Type: Security events" | the Outcome segment stays on All | security=true  |
+
+  Scenario Outline: Cards — every way of removing the filter returns all three controls to default
+    Given the "<card>" card is pressed with <chip> shown
+    When the user <remove>
+    Then the card has aria-pressed="false" and default look, the chip is gone, the Outcome segment is on All
+    And "Clear all" is gone unless another chip remains
+
+    Examples:
+      | card            | chip                    | remove                                   |
+      | Failed actions  | "Outcome: Failed"       | activates the x of the chip              |
+      | Failed actions  | "Outcome: Failed"       | activates "Clear all"                    |
+      | Failed actions  | "Outcome: Failed"       | chooses All in the Outcome segment       |
+      | Failed actions  | "Outcome: Failed"       | chooses Succeeded in the Outcome segment |
+      | Security events | "Type: Security events" | activates the x of the chip              |
+      | Security events | "Type: Security events" | activates "Clear all"                    |
+
+  Scenario: Cards — choosing Failed in the Outcome segment presses the card
+    Given the Default state has loaded
+    When the user chooses Failed in the Outcome segment
+    Then the Failed actions card has aria-pressed="true" and the chip "Outcome: Failed" is shown
+
+  Scenario: Cards — both cards can be pressed together
+    Given the "Failed actions" card is pressed
+    When the user activates the "Security events" card
+    Then both cards are pressed, the chips "Outcome: Failed" and "Type: Security events" are shown
+    And GET /v1/activity is sent with outcome=failed and security=true
+
+  Scenario: Cards — the card plus other filters; unpressing removes only its chip
+    Given Category "Authentication" and 30 days are applied and the "Failed actions" card is pressed
+    Then the chips read "Category: Authentication", "Outcome: Failed", "Dates: 30 days" and "Clear all"
+    When the user activates the "Failed actions" card
+    Then only "Outcome: Failed" is removed, the other two chips remain, and the request keeps category=auth and range=30d
+
+  Scenario: Cards — hint lines, hover and keyboard
+    Given the Default state has loaded
+    Then the Failed actions card hint reads "Click to filter the list" on hover and the card background is --ui-bg-elevated
+    When the Failed actions card is focused with the keyboard
+    Then a 2 px --ui-primary outline with a 2 px offset is drawn
+    When the user presses Space (or Enter)
+    Then the card is pressed with the hint "Filtering. Click to clear"
+    When the pointer is over the pressed card
+    Then the hint reads "Click to clear this filter" with an x icon
+    And "Clear all" and the chip x show hover and focus-visible styles per the board
+
+  Scenario: Cards — Total actions and Active people are not toggles
+    Given the "Failed actions" card is pressed
+    When the user activates "Total actions"
+    Then every filter is cleared and no card is pressed
+    When the user activates "Active people"
+    Then nothing changes and no request is sent
+    And neither card has aria-pressed
+
+  Scenario: Cards — the empty panel's "Clear filters" unpresses cards
+    Given the "Security events" card is pressed and the list is empty
+    When the user activates "Clear filters" in the empty panel
+    Then the card is unpressed and no chip is shown
+
+  Scenario: Cards — a mobile Filters sheet shares the same state
+    Given below md the "Failed actions" card is pressed
+    Then the Filters button badge counts the Outcome chip and the sheet's Outcome control is on Failed
+    When the user sets Outcome to All in the sheet
+    Then the card is unpressed
+
+  Scenario: Export menu — open, items and hover
+    Given the Default state has loaded as owner with total 1284
+    When the user activates "Export"
+    Then the menu lists "Export current view" ("CSV · 1,284 events matching your filters and sort, across all pages") and "Export all activity…", both enabled
+    And hovering "Export all activity…" highlights it
+    When the user presses Escape
+    Then the menu closes and focus returns to the Export button
+
+  Scenario: Export menu — filtered view states the count
+    Given the "Failed actions" card is pressed and the list total is 6
+    When the user opens the Export menu
+    Then "Export current view" reads "CSV · 6 events matching your filters and sort, across all pages"
+
+  Scenario: Export menu — nothing to export in the current view
+    Given Category "Media" and Outcome "Failed" match nothing (total 0)
+    When the user opens the Export menu
+    Then "Export current view" is disabled with "Nothing to export. No events match these filters." and "Export all activity…" is enabled
+
+  Scenario: Export menu — no activity at all and error state
+    Given the list is "No activity yet" (total 0, no chip) or in the Error state
+    Then the Export button is disabled
+
+  Scenario: Export current view — success
+    Given Category "Authentication" and 30 days are applied
+    When the user chooses "Export current view"
+    Then GET /v1/activity/export is sent once with category=auth and range=30d, no page, no size, no format
+    And when it resolves 200 with a text/csv body that has data rows, the file activity-YYYY-MM-DD.csv is downloaded
+    And a toast appears: title "Download started", body "activity-YYYY-MM-DD.csv is downloading."
+    And the menu is closed and no dialog was shown
+
+  Scenario Outline: Export current view — failures raise an error toast
+    When the user chooses "Export current view" and the request <failure>
+    Then an error toast titled "Couldn't prepare the download" appears with the body "<body>"
+    And nothing is downloaded and the Export button is enabled
+
+    Examples:
+      | failure                      | body                                                                          |
+      | resolves with a 500 response | Something went wrong on our side. Nothing was changed. Try again in a moment. |
+      | never reaches the server     | Something went wrong on our side. Nothing was changed. Try again in a moment. |
+      | resolves with a 400 response | That request wasn't valid. Check the fields and try again.                    |
+
+  Scenario: Export current view — the role was lowered while the page was open (403)
+    When the user chooses "Export current view" and the request resolves 403 with the owner/admin-required message
+    Then an error toast titled "You can't export all activity" appears and nothing is downloaded
+    And the Export menu then shows both items disabled with "Only owners and admins can export all activity."
+
+  Scenario: Export current view — nothing to export
+    When the user chooses "Export current view" and the response is 200 with only the CSV header row
+    Then nothing is downloaded and a toast titled "Nothing to export" appears
+
+  Scenario: Export all — the dialog opens configured
+    When the user chooses "Export all activity…"
+    Then the dialog "Export all activity" shows Format "CSV" (read-only, no JSON option), Date range "All time", Cancel on the left and "Export CSV" on the right
+    And no request has been sent
+
+  Scenario Outline: Export all — the date range maps to the query and ignores page filters
+    Given Category "Media", Outcome "Failed" and the "Failed actions" card are applied on the page
+    When the user picks Date range "<range>" in the dialog and activates "Export CSV"
+    Then GET /v1/activity/export is sent with <query> and no other parameter
+
+    Examples:
+      | range                       | query                                      |
+      | All time                    | range=all                                  |
+      | Today                       | range=today                                |
+      | 7 days                      | range=7d                                   |
+      | 30 days                     | range=30d                                  |
+      | Custom 1 Sep to 30 Sep 2026 | range=custom&from=2026-09-01&to=2026-09-30 |
+
+  Scenario: Export all — Custom needs a valid pair
+    When the user picks "Custom" and sets only one date, or from after to
+    Then "Export CSV" is disabled and no request is sent
+
+  Scenario: Export all — preparing, then download started
+    When the user activates "Export CSV" in the dialog
+    Then the dialog shows "Preparing download…" with an indeterminate bar and no percentage, "Keep this window open.", Cancel enabled and a disabled "Preparing…"
+    When the response resolves 200 with a CSV that has data rows
+    Then the file activity-all-YYYY-MM-DD.csv is downloaded and the dialog reads "Download started" and "activity-all-YYYY-MM-DD.csv is downloading. Check your browser's downloads if nothing appears." with only "Close"
+    When the user activates "Close"
+    Then the dialog closes and a toast appears: "Download started", "activity-all-YYYY-MM-DD.csv is downloading."
+
+  Scenario: Export all — Cancel while preparing
+    Given the export request is in flight
+    When the user activates "Cancel"
+    Then the request is aborted, nothing is downloaded, the dialog closes and no toast appears
+
+  Scenario Outline: Export all — failure shows Retry
+    When the request <failure>
+    Then the dialog reads "Couldn't prepare the download" and "Nothing was downloaded. Try again in a moment." with Cancel and "Retry"
+    When the user activates "Retry"
+    Then the same request is sent again and the dialog shows "Preparing download…"
+
+    Examples:
+      | failure                      |
+      | resolves with a 500 response |
+      | never reaches the server     |
+
+  Scenario: Export all — the chosen range has no events
+    When the response is 200 with only the CSV header row
+    Then nothing is downloaded and the dialog reads "Nothing to export" and "There is no activity in this date range. Choose a wider range." with only "Close"
+
+  Scenario: Export all — not allowed (403)
+    When the response is 403
+    Then the dialog reads "You can't export all activity" and "Only owners and admins can export all activity. Ask an owner if you need a copy." with only "Close"
+    And nothing is downloaded
+
+  Scenario: Export — below md the menu and the dialog are bottom sheets
+    Given the Default state has loaded below md
+    When the user activates "Export"
+    Then a bottom sheet lists "Export current view" and "Export all activity…"
+    When the user chooses "Export all activity…"
+    Then the dialog is a bottom sheet with the same fields and footer (secondary left, primary right)
+
+  Scenario: Export — owners and admins only
+    Given the session role is "editor" (or absent)
+    Then no Export control is rendered and GET /v1/activity/export is never sent
+
+  Scenario: Export — French
+    Given the language is French
+    Then every string above (menu, dialog, toasts, hints, chips "Type : Événements de sécurité") has a French entry, and the former "Exporter en CSV" button label is replaced by the menu button

features/activity_filter_cards_and_export.qa.md

@@ -0,0 +1,63 @@
+# QA: Activity filter cards as toggles and the Export menu
+
+## Implementation note for coder (informational)
+
+SPA slice with one small backend change: accept `range=all` in the list, summary and export range validation (use case range handling and the handler `validate` tag). An omitted range stays 7d. The range table in features/activity-log-backend.feature is updated accordingly.
+
+This slice amends features/activity_screen.feature and .qa.md: the header button is now "Export" with a menu, the Export success and failure scenarios are replaced, and the French label "Exporter en CSV" becomes "Exporter". Update the matching Vitest cases (strip-card effects, Export success and failure, empty/error export-disabled lines, French labels) in the same change.
+
+`useApi().request` calls response.json(); add a blob read that keeps the global 401 handling and supports an AbortSignal. Downloads use an object URL and an anchor with a `download` file name built from the local date. Toasts use `useToast().add({ color, icon, title, description })`.
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Mock `useApi` per case matching on method, path and parsed query. Mount ActivityView in DashboardShell as in the existing QA (owner session; "editor" for the regular case). Run layout cases at desktop and below-md widths. Use fake timers for setTimeout/clearTimeout only. No test freezes or asserts the system date: file names are asserted with `^activity-\d{4}-\d{2}-\d{2}\.csv$` and `^activity-all-\d{4}-\d{2}-\d{2}\.csv$`. Fixtures: existing `activityItems`, `summaryDefault`, and a CSV text with a header and two rows (and a header-only CSV).
+
+1. **Toggle cycle, Examples-driven (Failed, Security)** - click: aria-pressed true, chip text, Outcome segment, request query, no extra summary request; click again: aria-pressed false, chip and Clear all gone, segment All, query without the key.
+2. **Every removal path** - chip x, Clear all, Outcome All, Outcome Succeeded (Failed card only): card, chip and segment all return to default (assert the three together after each).
+3. **Segment drives the card** - choose Failed in the segment: Failed card pressed and chip present.
+4. **Both cards pressed** - queries `outcome=failed&security=true`, two chips.
+5. **Card plus other filters** - Category auth, 30d, Failed: unpress removes only the Outcome chip; request keeps category and range.
+6. **Hint and style** - hint texts for unpressed, hover, pressed, pressed+hover (with x icon); pressed class uses the sand tokens (assert the token class, not a hex); unpressed hover class; focus-visible class; Enter and Space toggle.
+7. **Non-toggle cards** - Total clears all, Active people sends no request, neither has aria-pressed.
+8. **Clear filters from the empty panel** unpresses cards; mobile Filters sheet shares state and badge count.
+9. **Export menu structure** - owner: button "Export" with the download icon and chevron; menu items and sub-lines with total 1284 and with Failed card total 6; Escape closes and returns focus; ArrowDown and Enter open; below md rendered as a bottom sheet.
+10. **Disabled states** - total 0 with a chip: "Export current view" disabled with its reason, "Export all activity…" enabled; "No activity yet" and Error states: Export button disabled; after a 403 on export: both items disabled with the owner/admin reason.
+11. **Role gating** - role "editor" or none: no Export control, no `/export` request; Forbidden panel: none.
+12. **Export current view success** - request to `/v1/activity/export` with the list filters, no page or size, no format; blob read; one anchor click with download matching the file-name pattern; toast "Download started"; no dialog.
+13. **Export current view failure, Examples-driven (500, 400, network)** - error toast "Couldn't prepare the download" with the mapped body; no download; button enabled.
+14. **Export current view 403** - toast "You can't export all activity"; both items disabled afterwards.
+15. **Export current view, header-only CSV** - no download, toast "Nothing to export".
+16. **Export all dialog** - opens configured (Format "CSV" read-only, no JSON, Date range "All time", hint, Cancel left, "Export CSV" right); no request on open.
+17. **Export all query, Examples-driven** - with page filters applied: All time -> `range=all` only; Today, 7d, 30d; Custom -> `range=custom&from=2026-09-01&to=2026-09-30`; Custom with one date or from>to keeps "Export CSV" disabled.
+18. **Preparing** - request pending: indeterminate bar (no `aria-valuenow`), copy "Preparing download…", Cancel enabled, "Preparing…" disabled.
+19. **Started** - resolve with data rows: download triggered once; dialog copy and only "Close"; Close shows the toast with the all-activity file name.
+20. **Cancel while preparing** - AbortController aborted, no download, dialog closed, no toast.
+21. **Failed + Retry** - 500 and network: copy, Cancel and Retry; Retry resends and re-enters Preparing.
+22. **Nothing to export** - header-only CSV: no download, copy, only "Close".
+23. **403 dialog** - copy and only "Close"; no download.
+24. **Below md** - menu and dialog render as bottom sheets with the same content.
+25. **French** - every new key exists in messages.ts (completeness test) and a spot-check of the menu, dialog and toast strings.
+26. **No JSON** - no element with text "JSON" and no `format` query parameter in any export request.
+
+Backend (Go, in test/, on the activity handler tests): `range=all` on list, summary and export returns 200 over all events (older than 30 days included); invalid values still 400; omitted range still means 7d; non-owner export still 403.
+
+## Visual (task visual:check -- activity, desktop and mobile, light and dark)
+
+Reference: board groups "Activity: filter cards" and "Activity: export" under `docs/design/source/`; exact values in `docs/design/source/ActivityFrame.dc.html`. Add states to the activity entry in `web/visual/states.ts` with the board's own sample data. Hard gate: every capture within 10 %. Mock only the calls each state needs; an unmocked call fails the run.
+
+- [ ] Filter cards: Default, card hover, card focus-visible, Failed active, active hover, Security active, chip x hover, Clear all hover and focus-visible, card plus other filters. Mark `skip: 'clock-sensitive'` where the rows behind show relative times.
+- [ ] Export: menu open, item hover, filtered view, nothing to export (Media / Failed, total 0), no permission, button focus-visible.
+- [ ] Export dialog: configure (CSV only), preparing (request hangs), started, failed, nothing to export, not allowed (403). Mock `/export` with hang / 500 / 403 / header-only CSV as needed.
+- [ ] Export "CSV or JSON (proposed)": NOT implemented; skip with reason "proposed, JSON not shipped".
+- [ ] Export toasts: file name contains the current date; `skip: 'clock-sensitive'`.
+- [ ] Mobile bottom sheets for the menu and the dialog at 390x844.
+- [ ] Layout from the frame (not components.md): dialog sm:max-w-md; footer secondary left, primary right; Export button 32 px (44 px mobile); pressed card sand fill.
+- [ ] Not covered by screenshots: keyboard and focus order (Tab to cards, Space/Enter toggle, focus returns to the Export button after the menu closes), focus trap in the dialog, Escape, hover and motion, the reduced-motion indeterminate bar.
+
+## Manual verification
+
+- **Real CSV download** against `task dev`: Export current view with and without filters, and Export all with each range; open the file: only the filtered rows for the current view, every row for all time; file names and the browser's download prompt.
+- **Large export**: with thousands of events, confirm the download starts and the "Preparing download…" dialog behaves.
+- **Role lowered while the page is open**: change the user's role in another session, then export; confirm the 403 handling.
+- **Time zones**: file names use the local date; check near midnight.
+- **French** and **screen readers**: aria-pressed announcements, menu and dialog semantics.

features/activity_screen.feature

@@ -41,7 +41,7 @@ Feature: Activity screen, details slide-over and My activity
     And the header is the title "Activity" (regular user: "My activity") with the subtitle "Who
       did what, and when, across your site." (regular user: "Everything you've done on this
       site."), and, in the full view except Forbidden, an outline button with icon download and
-      the label "Export CSV" at the right, aligned to the bottom of the title block
+      the label "Export" and a trailing chevron at the right, opening the menu described in activity_filter_cards_and_export.feature, aligned to the bottom of the title block
     And sentences are composed in the SPA from the event's action code, its outcome, its params
       and its target name through the existing i18n (English keys, French in messages.ts), never
       stored as text; the target name is user content, is inserted untranslated as a semibold
@@ -226,7 +226,7 @@ Feature: Activity screen, details slide-over and My activity
       load activity" is an error alert with icon circle-x, the text and an outline "Try again"
       button, and "You can't view this activity" (no trailing period) uses icon lock and the
       action "Back to home"
-    And "Export CSV" is disabled in "No activity yet" and while the list is in the Error state,
+    And "Export" is disabled in "No activity yet" and while the list is in the Error state,
       and enabled otherwise
     And ActivityDetailsPanel is a USlideover: 480 px wide from the right on desktop, an 88 %-high
       bottom sheet with a 36×4 px handle below md; its header reads "Activity details" with a
@@ -277,7 +277,7 @@ Feature: Activity screen, details slide-over and My activity
       failed 6, security 11 and seven-day series, and the session role is "owner"
     When the user navigates to /activity
     Then the header shows "Activity", "Who did what, and when, across your site." and an enabled
-      "Export CSV"
+      "Export"
     And the strip reads "1,284" "12% vs previous 7 days" with trending-up; "9" "7 people, 2 API
       keys"; "6" "0.5% of all actions"; "11" "11 flagged"
     And the filter bar shows "Search activity", "All people", "All categories", All selected in
@@ -340,7 +340,7 @@ Feature: Activity screen, details slide-over and My activity
   Scenario: Loading — skeletons after 150 ms while both requests are in flight
     Given GET /v1/activity and GET /v1/activity/summary have not resolved
     When the user navigates to /activity
-    Then the header, the filter bar and an enabled "Export CSV" are drawn at once
+    Then the header, the filter bar and an enabled "Export" are drawn at once
     And nothing is drawn in place of the strip and the table for the first 150 ms
     And after 150 ms 4 skeleton cards replace the strip and 9 skeleton rows (5 cards below md)
       replace the table, the pager is hidden and the table container is aria-busy="true"
@@ -377,7 +377,7 @@ Feature: Activity screen, details slide-over and My activity
       "0" "Nothing to flag"
     And an empty panel with icon history shows "No activity yet" and "Actions on articles,
       media, users and API keys will appear here."
-    And "Export CSV" is disabled and no table header or pager is shown
+    And "Export" is disabled and no table header or pager is shown
 
   Scenario: Empty, filters match nothing — the panel offers Clear filters
     Given the Default state has loaded
@@ -386,7 +386,7 @@ Feature: Activity screen, details slide-over and My activity
     Then the chips read "Search: sitemap", "Category: Media", "Outcome: Failed" and "Clear all"
     And an empty panel with icon search-x shows "No activity matches these filters" and "Try a
       different search or a wider date range." with the action "Clear filters"
-    And "Export CSV" stays enabled and the strip is unchanged
+    And "Export" stays enabled and the strip is unchanged
     When the user activates "Clear filters"
     Then every filter is reset, GET /v1/activity is sent with range=7d, page=1, size=25 only and
       the rows come back
@@ -397,7 +397,7 @@ Feature: Activity screen, details slide-over and My activity
     Then the strip and the filter bar are shown
     And an error alert shows "Couldn't load activity" and "Check your connection and try again."
       with the action "Try again"
-    And "Export CSV" is disabled and no table or pager is shown
+    And "Export" is disabled and no table or pager is shown
     When the user activates "Try again"
     Then the Loading state shows for the list and GET /v1/activity is sent again with the same
       query
@@ -426,7 +426,7 @@ Feature: Activity screen, details slide-over and My activity
   Scenario: Forbidden (403) — the page itself is refused
     Given GET /v1/activity resolves 403 and GET /v1/auth/me resolves 200 with a verified user
     When the user navigates to /activity
-    Then the header shows "Activity" and no "Export CSV"
+    Then the header shows "Activity" and no "Export"
     And no strip, filter bar, chips, table or pager is shown
     And an empty panel with icon lock shows "You can't view this activity" and "Your role
       doesn't include this page. Ask an owner or admin if you need access." with the action "Back
@@ -529,29 +529,6 @@ Feature: Activity screen, details slide-over and My activity
     When the user activates "Show 6 results"
     Then the sheet closes and the list stays filtered
 
-  Scenario: Export — the file is prepared, then downloads
-    Given the Default state has loaded with the filters Category "Authentication" and 30 days
-    When the user activates "Export CSV"
-    Then GET /v1/activity/export is sent with category=auth and range=30d and without page or size
-    And while it is in flight the button reads "Preparing file…" and is disabled
-    When it resolves 200 with a text/csv body
-    Then the file is downloaded as "activity.csv" and a toast appears: color success, icon
-      i-lucide-circle-check, title "Export started. Your file will download shortly."
-    And the button returns to "Export CSV", enabled
-
-  Scenario Outline: Export — a failure raises an error toast and re-enables the button
-    Given the Default state has loaded
-    When the user activates "Export CSV" and GET /v1/activity/export <failure>
-    Then a toast appears: color error, icon i-lucide-circle-x, title "Couldn't export activity.
-      Try again."
-    And nothing is downloaded and the button returns to "Export CSV", enabled
-
-    Examples:
-      | failure                      |
-      | resolves with a 500 response |
-      | resolves with a 403 response |
-      | never reaches the server     |
-
   Scenario: Details — a row opens the slide-over and focus returns on close
     Given the Default state has loaded
     When the user activates the second row (click, or Enter with the row focused)
@@ -661,7 +638,7 @@ Feature: Activity screen, details slide-over and My activity
     When the user navigates to /activity
     Then the title reads "My activity", the subtitle "Everything you've done on this site." and
       the breadcrumb "My activity"
-    And no summary strip, no Person filter and no "Export CSV" are rendered
+    And no summary strip, no Person filter and no "Export" are rendered
     And the table has the columns When, Action, Target, Outcome and no Actor column
     And the cards show no actor line below md
     And GET /v1/activity is sent with range=7d, page=1, size=25 and no actor parameter, and
@@ -683,7 +660,7 @@ Feature: Activity screen, details slide-over and My activity
   Scenario: The French interface composes sentences and chrome in French
     Given the language is French and the Default state has loaded as owner
     Then the title reads "Activité", the strip labels, filter placeholders, badges, pager and
-      "Exporter en CSV" are in French, the sentences use the French templates and day
+      "Exporter" are in French, the sentences use the French templates and day
       separators read "Aujourd'hui", "Hier" or "3 oct. 2026"
     And the Security sub-line reads "11 signalés"
     And every new English string of this screen has a French entry in messages.ts

features/activity_screen.qa.md

@@ -52,7 +52,7 @@ zeros) and `summaryNone` (all zeros). The list response is `{ items, total, page
 1. **Navigation** — sidebar and drawer list Home, Articles, Media, Users, Activity, Integration,
    Settings in order; "Activity" has the `i-lucide-history` icon, links to /activity, has
    aria-current="page" on /activity and none elsewhere; breadcrumb and mobile title "Activity".
-2. **Default (owner)** — assert header texts, enabled "Export CSV", the four strip cards (labels,
+2. **Default (owner)** — assert header texts, enabled "Export", the four strip cards (labels,
    "1,284", "9", "6", "11", sub-lines "12% vs previous 7 days" with the trending-up icon, "7
    people, 2 API keys", "0.5% of all actions" with icon `circle-x`, "11 flagged" with icon
    `shield-alert`), the filter bar (placeholder, "All people", "All categories", Outcome All
@@ -85,7 +85,7 @@ zeros) and `summaryNone` (all zeros). The list response is `{ items, total, page
    antérieure" and "Aucun changement"; ranges Today, 30 days and Custom give "vs previous day",
    "vs previous 30 days" and "vs previous period".
 10. **Empty, no activity yet** — `summaryNone`, items []; assert "No data yet" on two cards, the
-    calm lines on the other two, the empty panel copy and icon, a disabled "Export CSV", no table
+    calm lines on the other two, the empty panel copy and icon, a disabled "Export", no table
     header and no pager.
 11. **Empty, filters match nothing** — type "sitemap", choose Category "Media" and Outcome
     "Failed", resolve items []; assert chips, empty panel copy, "Clear filters", enabled export;
@@ -122,14 +122,8 @@ zeros) and `summaryNone` (all zeros). The list response is `{ items, total, page
 22. **Mobile list and sheet** — below md assert cards (actor line, sentence, badges, "Target
     deleted"), "Filters" with the badge count, the sheet content and footer ("Show 6 results", "Show
     1 result"), two date fields for Custom, and that "Show … results" closes it.
-23. **Export success** — click "Export CSV" with filters applied; assert one request to
-    `/v1/activity/export` with the list filters and no `page` or `size`, "Preparing file…" and
-    disabled while pending, an object URL created and an anchor clicked with
-    `download="activity.csv"`, the success toast (color success, icon `i-lucide-circle-check`,
-    title "Export started. Your file will download shortly."), and the button back to "Export CSV".
-24. **Export failure, Examples-driven** — 500, 403 and `NetworkError`; assert the error toast
-    (color error, icon `i-lucide-circle-x`, title "Couldn't export activity. Try again."), no
-    download, button re-enabled.
+23. **Export** — superseded by activity_filter_cards_and_export.qa.md (menu, dialog, toasts).
+24. **Export failure** — superseded by activity_filter_cards_and_export.qa.md.
 25. **Details open and close** — click, then Enter on a focused row; assert the title, the selected
     row class, the footer "Event 2 of 1,284"; close with Escape, the close button and the scrim and
     assert focus on the row.
@@ -156,7 +150,7 @@ zeros) and `summaryNone` (all zeros). The list response is `{ items, total, page
     request to `/summary` or `/export` and no `actor` parameter; pager "Showing 1–25 of 41"; empty
     state copy; details "Event 1 of 41" with previous disabled.
 31. **French** — `setLocale('fr')`; assert the chrome strings (Activity "Activité", My activity
-    "Mon activité", Export CSV "Exporter en CSV", Preparing file… "Préparation du fichier…",
+    "Mon activité", Export CSV "Exporter", Preparing file… "Préparation du fichier…",
     Total actions "Actions au total", Active people "Personnes actives", Failed actions "Actions
     en échec", Security events "Événements de sécurité", Succeeded "Réussie", Failed "Échec", Not
     signed in "Non connecté", Activity details "Détails de l'activité", Previous event and Next
@@ -199,14 +193,14 @@ the sub-line "11 flagged". Total is 1284 with page size 25 for the owner and 41
 
 - [ ] Loading: both requests with `hang: true`; the setup waits 150 ms or more so the skeleton
       strip and rows are drawn before the capture.
-- [ ] Empty, no activity yet: list `items: [], total: 0`, summary `summaryNone`; "Export CSV"
+- [ ] Empty, no activity yet: list `items: [], total: 0`, summary `summaryNone`; "Export"
       disabled.
 - [ ] Empty, filters match nothing: the board applies Search "sitemap", Category "Media", Outcome
       "Failed" (steps type and select them, or the mock answers with the filtered query), list
       `items: [], total: 0`, summary Default.
 - [ ] Error with retry: list 500, summary Default; the alert, disabled export, strip drawn.
 - [ ] Forbidden (403): list 403, summary 403; session with a non-admin role as the board does
-      (`role: 'user'`), so no "Export CSV".
+      (`role: 'user'`), so no "Export".
 - [ ] My activity, Empty: `activityEditorSession`, list `items: [], total: 0`.
 - [ ] skip: clock-sensitive. Default, large dataset: `skip: 'clock-sensitive'` (day separators and
       "2 min ago" depend on the real clock). Prints SKIP, never investigated or date-frozen.
@@ -218,7 +212,7 @@ the sub-line "11 flagged". Total is 1284 with page size 25 for the owner and 41
       the rows behind the scrim show relative times and the panel shows the browser's local
       time. Their Vitest coverage is cases 3, 5, 25 to 30.
 - [ ] Layout, from `ActivityFrame.dc.html`, not `components.md`: header row is the title block
-      (20 px/28 px title) on the left and the 32 px (44 px mobile) "Export CSV" button on the right,
+      (20 px/28 px title) on the left and the 32 px (44 px mobile) "Export" button on the right,
       aligned to the bottom; the strip is 4 columns with a 12 px gap on desktop and a clipped row
       of 156 px cards with an 8 px gap on mobile; the table header is 36 px, day rows 32 px, rows at
       least 52 px; the slide-over is 480 px wide on desktop, the bottom sheet 88 % high.
@@ -238,7 +232,7 @@ the sub-line "11 flagged". Total is 1284 with page size 25 for the owner and 41
   the right sentences, the shield marker on the failed login, the Succeeded and Failed badges, the
   summary numbers and the sparkline bars; apply each filter and each card; page through with size
   25, 50 and 100; open the details across a page boundary.
-- **Real CSV** — click "Export CSV" with and without filters and open `activity.csv`: columns
+- **Real CSV** — click "Export" with and without filters and open `activity.csv`: columns
   `when,actor,action,target,outcome,source,ip`, the filtered rows only, no page or size applied,
   neutralised cells that start with `=`, `+`, `-` or `@`; confirm the browser download prompt and
   the two toasts.

features/api_keys_screen.feature

@@ -155,7 +155,7 @@ Feature: API keys screen
       "\"Nightly media import\" is ready. Copy the key and store it somewhere safe."
     And a warning alert (UAlert, color warning, triangle-alert icon) reads "You won't be able to
       see this key again."
-    And the full key from the response is shown in a monospace box with a "Copy" button (icon copy)
+    And the full key from the response is shown in a CodeSnippet with the single tab "API key" and a "Copy" button (icon copy, accessible name "Copy code"), focused when the modal opens
     And the note "Closing this window discards the key from the screen. Copy it first." is shown
     And the only button is a primary "Done"
 
@@ -181,8 +181,7 @@ Feature: API keys screen
     Given the key reveal is open
     When the user activates "Copy"
     Then the full key is written to the clipboard
-    And the button shows icon check and text "Copied" in the success color, announced to assistive
-      technology
+    And the button shows icon check and text "Copied" in the success color, announced politely
     When 2 seconds elapse
     Then the button reverts to icon copy and text "Copy"
 

features/api_keys_screen.qa.md

@@ -68,8 +68,8 @@ layout cases at desktop and below-md (mock `matchMedia`).
    errors clear when fixed.
 9. **Create key: name too long** - 75 characters; counter, error class and text, no request.
 10. **Create key: success** - one POST with `{"name":"Nightly media import"}` and no expires_at
-    key; the reveal: title, text, warning alert, key equal to the mocked `key`, "Copy", note, only
-    "Done".
+    key; the reveal: title, text, warning alert, key equal to the mocked `key` inside a CodeSnippet with
+    the single tab "API key", "Copy" (named "Copy code") focused on open, note, only "Done".
 11. **Create key: expiry** - date D + 30 days; assert expires_at is 23:59:59 local on that day
     with the local offset. Examples today (sent), yesterday (blocked), tomorrow (sent); build the
     dates from `new Date()` in the test.
@@ -137,7 +137,7 @@ States:
 - [ ] Create key
 - [ ] Create key: validation
 - [ ] Create key: name too long
-- [ ] One-time reveal
+- [ ] One-time reveal (re-run after the CodeSnippet migration, within 10 %)
 - [ ] One-time reveal: copied (timer-driven, so it is checked)
 - [ ] Revoke: confirm
 - [ ] Revoked (list with the revoked row and the toast)

features/article_body_unlimited.feature

@@ -0,0 +1,124 @@
+Feature: Article bodies have no length limit and the body is optional
+
+  As a verified RenewCMS owner
+  I want to create an article with only a title and write articles of any length
+  So that starting a draft is one field and long articles are never blocked
+
+  Background:
+    Given POST /v1/article/ and PATCH /v1/article/{id} sit inside the jwt-protected group
+    And the request structs PostArticle and UpdateArticleBody validate through validator.Validate.Struct
+    And PostArticle.Title keeps validate "required,min=3,max=200"
+    And PostArticle.Body and UpdateArticleBody.Body carry no validate tag: no max, no required
+    And a body is stored and returned as given; an absent "body" key is treated as ""
+    And success bodies are the article JSON (id, title, body, body_format, is_online, created_at, updated_at)
+    And a new article is created offline (is_online false)
+
+  Scenario Outline: Create with only a title succeeds in every body format
+    Given a valid jwt cookie for a verified user
+    When the client sends POST /v1/article/<query> with JSON <payload>
+    Then the status is 201
+    And the response JSON has title "Choosing tiles for a small bathroom", is_online false, body_format "<format>" and body <rendered>
+    And the fake article repository holds one article with Body ""
+
+    Examples:
+      | query        | payload                                                      | format   | rendered |
+      |              | {"title": "Choosing tiles for a small bathroom"}             | markdown | ""       |
+      | ?format=html | {"title": "Choosing tiles for a small bathroom"}             | html     | ""       |
+      | ?format=json | {"title": "Choosing tiles for a small bathroom"}             | json     | []       |
+      |              | {"title": "Choosing tiles for a small bathroom", "body": ""} | markdown | ""       |
+
+  Scenario: A body of 120,000 characters is accepted on create
+    Given a valid jwt cookie for a verified user
+    When the client sends POST /v1/article/ with a title of 3 characters or more and a body of 120000 characters
+    Then the status is 201
+    And the repository holds the full 120000-character body, unmodified
+
+  Scenario Outline: Update the body with no length limit
+    Given an article with id 12 exists
+    And a valid jwt cookie for a verified user
+    When the client sends PATCH /v1/article/12 with a body of <length> characters
+    Then the status is 200
+    And the repository body for article 12 has <length> characters
+
+    Examples:
+      | length |
+      | 10001  |
+      | 120000 |
+
+  Scenario: Update the body to empty
+    Given an article with id 12 exists with a non-empty body
+    When the client sends PATCH /v1/article/12 with JSON {"body": ""}
+    Then the status is 200 and the repository body is ""
+    And GET /v1/article/12?format=json returns body []
+
+  Scenario Outline: Title rules are unchanged
+    Given a valid jwt cookie for a verified user
+    When the client sends POST /v1/article/ with JSON <payload>
+    Then the status is 400, the response is plain text from http.Error, and no article is created
+
+    Examples:
+      | payload                          |
+      | {"body": "Hello"}                |
+      | {"title": "Ti", "body": "Hello"} |
+      | {"title": "<201 characters>"}    |
+
+  Scenario: Existing guards on PATCH are unchanged
+    When PATCH /v1/article/abc is sent
+    Then the status is 400 with the uint32 id error text
+    When PATCH /v1/article/999 is sent and no such article exists
+    Then the status is 404 with the article-not-found text
+    When PATCH /v1/article/12 is sent with malformed JSON
+    Then the status is 400 with apperr.BodyErrorMessage
+
+  Scenario: The SPA no longer limits or counts the body
+    Given the Vue SPA
+    Then the constant BODY_MAX_LENGTH no longer exists
+    And the CharacterCounter component stays (ProfileView and CreateApiKeyModal still use it) but EditorView and NewArticleModal no longer import it
+    And the editor has no "Near the limit" or "Too long" state
+
+  Scenario: Editor status bar shows a neutral count
+    Given the editor is open on /article/12/edit with a loaded article whose body has 1204 words and 7318 characters
+    Then the EditorStatusBar reads "1,204 words · 7,318 characters"
+    And the count updates as the body changes
+    And a new empty article reads "0 words · 0 characters"
+    And the count carries no warning, error colour or icon at any length
+
+  Scenario: Editor states at 120,000 characters
+    Given the editor holds an article body of 120000 characters (19,845 words)
+    Then the count reads "19,845 words · 120,000 characters", neutral
+    When the body is edited
+    Then the state is Unsaved changes, and Save and Publish ("Save and publish") are enabled
+    When the user saves and PATCH /v1/article/12 is pending
+    Then the status shows the spinner with "Saving 120,000 characters. This can take a few seconds.", Save is disabled and the page stays editable
+    When PATCH resolves 200
+    Then the status reads Saved with the time and the count is unchanged
+    When PATCH instead resolves 500, 413 or a network failure
+    Then the editor shows "Couldn't save. Your text is kept. Retry." and the body is unchanged
+    And Retry resends the same content
+
+  Scenario: NewArticleModal is title-only
+    Given NewArticleModal is open
+    Then it shows the Title field with its "0 / 200" counter and "3 to 200 characters." help, "Cancel" and "Create draft"
+    And there is no First paragraph field
+    When the user submits a valid title
+    Then POST /v1/article/ is sent with JSON {"title": "<title>"} (no body key)
+
+  Scenario Outline: NewArticleModal states
+    Given NewArticleModal is open with Title "<title>"
+    When <trigger>
+    Then <outcome>
+
+    Examples:
+      | title                               | trigger                                    | outcome |
+      |                                     | it opens                                   | Default (empty): Title focused, counter "0 / 200" |
+      | Ti                                  | the field blurs or Create draft is pressed | Validation: "Use at least 3 characters.", counter in error style, no request |
+      | Choosing tiles for a small bathroom | Create draft is pressed                    | Submitting: "Creating…", Title and buttons disabled, not dismissible |
+      | Choosing tiles for a small bathroom | POST resolves 201 (id 42)                  | modal closes, navigates to /article/42/edit, toast "Draft created" id "article-created-42" |
+      | Choosing tiles for a small bathroom | POST resolves 400                          | Title rejected: "Check this title and try again." and alert "Something in the form isn't valid. Check the highlighted fields." |
+      | Choosing tiles for a small bathroom | POST resolves 500 or never reaches server  | Error: alert "Couldn't create the article. Your text is still here. Try again in a moment." |
+
+  Scenario: Integration API reference no longer says max 10000
+    Given the Integration screen's request-body tables for POST /v1/article/ and PATCH /v1/article/{id}
+    Then POST lists: title string required 3-200; body string optional, no length limit
+    And PATCH lists: body string optional, no length limit
+    And no text on the screen contains "max 10000"

features/article_body_unlimited.qa.md

@@ -0,0 +1,36 @@
+# QA: unlimited, optional article body
+
+## Part A. HTTP (Go, test/article_body_unlimited_http_test.go)
+
+Setup: in-memory fake article repository plus the real markdown converter as BodyRenderer (so the "json" format of an empty body is genuinely exercised). Build CreateArticle, GetArticle, UpdateArticle use cases and the article handler via NewHandler(...). Mount on a fresh chi.NewRouter() that mirrors api/router.go: POST /v1/article/ and PATCH /v1/article/{id} inside jwtauth.Verifier + Authenticator with a test jwtauth.New("HS256", ...) token. Call validator.InitValidator(). Use httptest. No live server, no real SQLite, no real SMTP.
+
+1. POST title-only, one request per format (default markdown, html, json): assert 201, body_format, the body value in the JSON response (the Examples table), and that the fake repo has Body "". The json case must produce valid JSON (`[]`) and not fail encoding.
+2. POST with "body": "" explicitly: same as 1.
+3. POST with strings.Repeat("a", 120000): 201 and the repo body length is 120000.
+4. PATCH with 10001 and 120000 characters: 200 and the stored length matches.
+5. PATCH with "body": "": 200, then GET ?format=json returns body [].
+6. POST title missing, "Ti", and 201 characters: 400, plain text, repo count unchanged.
+7. PATCH guards: bad id gives 400, unknown id gives 404, malformed JSON gives 400.
+8. Update existing tests: in test/edit_article_body_http_test.go remove the case "body over 10000 characters" (line 172) from the 400 table, and any missing-body rejection case (flip it to accepted if present).
+9. Grep that the Integration source no longer contains "max 10000" (see Part C).
+
+## Part B. SPA
+
+Automated (Vitest, `task test:web`). Until the SPA runner exists, report NOT RUN rather than pass.
+
+- EditorView.spec.ts: delete the "Near the limit" and "Too long" describes (around lines 392 and 405). Add: the neutral count "1,204 words · 7,318 characters" with mocked GET (fixture of 1,204 words / 7,318 characters); "0 words · 0 characters" for an empty article; at 120,000 characters (19,845 words): neutral count, Save and Publish enabled, then Saving ("Saving 120,000 characters. This can take a few seconds."), Saved (count unchanged), and Save failed (PATCH 500, 413 and network error, body kept, Retry resending the same payload).
+- CharacterCounter.vue and web/src/components/__tests__/CharacterCounter.spec.ts stay (ProfileView and CreateApiKeyModal use them).
+- NewArticleModal spec: Default (empty), Validation ("Ti"), Submitting, 201 handoff, Title rejected (400), Server error (500 and network). Assert the POST payload is exactly {"title": "..."} and that no First paragraph field exists.
+- Static check: grep web/src for BODY_MAX_LENGTH, and for CharacterCounter imports in EditorView and NewArticleModal, returns nothing.
+
+Visual (`task visual:check -- editor`, `task visual:check -- new-article`). Hard gate: every capture within 10 %, desktop and mobile, light and dark.
+
+- editor: states Saved, Unsaved changes, Saving, Save failed, and Very long article (6-9). Reuse the board's sample data ("1,204 words · 7,318 characters", "19,845 words · 120,000 characters", "Saving 120,000 characters. This can take a few seconds."). States showing time-dependent content (the "Saved at" time, "Updated Today, 11:02") are `skip: clock-sensitive`.
+- new-article: Default, Validation, Submitting, Title rejected, Error. Mocks reuse "Choosing tiles for a small bathroom". The user will update the design .md files only; the board .dc.html frames may still draw a body line in Submitting / Title rejected / Error, so a visual diff there is a known follow-up to raise, not a reason to keep the field.
+- Remove the "Near the limit" and "Too long" entries from web/visual/states.ts (around lines 4712 and 4720) if they belong to the editor group.
+
+Manual: keyboard and focus order in the modal (Title focused on open, Esc blocked while submitting); hover and motion; typing responsiveness in a real browser at 120,000 characters.
+
+## Part C. Docs consistency
+
+- The Integration screen reference text shows no "max 10000" (view /integration).

features/articles_page_size_memory.feature

@@ -0,0 +1,115 @@
+Feature: Articles list remembers the chosen page size
+
+  As a verified RenewCMS user
+  I want the page size I choose on the Articles list to be remembered
+  So that I do not have to pick it again each time I come back or refresh
+
+  Background:
+    Given this slice amends features/articles_pagination_screen.feature; the URL keeps ?size= as in that spec and no visual or API change is made (docs/design/ is untouched)
+    And the size options stay "5 per page", "25 per page", "50 per page", "100 per page" and the default stays 25
+    And the chosen size is stored in localStorage under the key renewcms-page-size-articles as the bare number (for example 5), one key per paginated list; only the Articles list uses it today
+    And only choosing a size in the page-size select writes the stored value; loading a URL never writes it
+    And an explicit valid ?size= in the URL is authoritative for that load and does not change the stored value
+    And an invalid ?size= in the URL falls back to 25, never to the stored value, and is replaced in the URL (features/articles_pagination_screen.feature scenario 10b)
+    And a stored value that is not 5, 25, 50 or 100 is treated as absent
+    And localStorage that is unavailable or throws on read or write never raises an error or breaks the page: reads act as absent and writes are ignored
+    And logout does not clear the stored size
+    And a size change still resets page to 1 and drops page from the URL
+    And the requests are GET /v1/article/?format=html&page=P&size=S&q=Q&status=T as in features/articles_pagination_api.feature
+
+  Scenario Outline: Choosing a size stores it
+    Given nothing is stored and the user is on /article
+    When the user chooses "<label>" in the page-size select
+    Then localStorage renewcms-page-size-articles is "<stored>"
+    And on success the URL is <url>
+
+    Examples:
+      | label        | stored | url               |
+      | 5 per page   | 5      | /article?size=5   |
+      | 25 per page  | 25     | /article          |
+      | 50 per page  | 50     | /article?size=50  |
+      | 100 per page | 100    | /article?size=100 |
+
+  Scenario: The stored size is restored when the list is opened without a size
+    Given localStorage renewcms-page-size-articles is "5"
+    When the user navigates to /article
+    Then GET ...&page=1&size=5 is sent
+    And the page-size select reads "5 per page"
+    And on success the URL is replaced (no history entry) by /article?size=5
+
+  Scenario: The size survives leaving the list and coming back
+    Given the user chose "5 per page" on /article
+    When the user navigates to /, then back to /article
+    Then GET ...&size=5 is sent and the select reads "5 per page"
+
+  Scenario: The size survives a full page refresh
+    Given the user chose "5 per page" on /article
+    When the page is reloaded on /article?size=5, or on /article with the URL typed in without a size
+    Then GET ...&size=5 is sent and the select reads "5 per page"
+
+  Scenario: The stored size is kept across paging, search, tabs and sort
+    Given localStorage renewcms-page-size-articles is "50" and the user is on /article?size=50
+    When the user activates Next, switches to the "Drafts" tab, sorts by Title or searches "plaster"
+    Then every request carries size=50 and the stored value stays "50"
+
+  Scenario: Changing the size again replaces the stored one
+    Given localStorage renewcms-page-size-articles is "5"
+    When the user chooses "100 per page"
+    Then localStorage renewcms-page-size-articles is "100"
+    And the next visit to /article without a size sends size=100
+
+  Scenario: Returning to 25 is remembered too
+    Given localStorage renewcms-page-size-articles is "5"
+    When the user chooses "25 per page"
+    Then localStorage renewcms-page-size-articles is "25"
+    And the next visit to /article sends size=25 and the URL stays /article
+
+  Scenario: An explicit size in the URL wins and is not stored
+    Given localStorage renewcms-page-size-articles is "5"
+    When the user navigates to /article?size=100
+    Then GET ...&size=100 is sent and the select reads "100 per page"
+    And localStorage renewcms-page-size-articles is still "5"
+    And a later visit to /article sends size=5
+
+  Scenario: An explicit page with no size uses the stored size
+    Given localStorage renewcms-page-size-articles is "5"
+    When the user navigates to /article?page=3
+    Then GET ...&page=3&size=5 is sent and on success the URL is replaced by /article?page=3&size=5
+
+  Scenario Outline: An invalid stored value falls back to 25
+    Given localStorage renewcms-page-size-articles is "<stored>"
+    When the user navigates to /article
+    Then GET ...&page=1&size=25 is sent, the select reads "25 per page" and the URL is /article
+
+    Examples:
+      | stored |
+      | 10     |
+      | abc    |
+      | 0      |
+      | -5     |
+      | 25.5   |
+      |        |
+
+  Scenario: An invalid size in the URL ignores the stored one
+    Given localStorage renewcms-page-size-articles is "5"
+    When the user navigates to /article?size=10
+    Then GET ... is sent with size=25 and the URL is replaced by /article
+    And localStorage renewcms-page-size-articles is still "5"
+
+  Scenario Outline: Unavailable storage never breaks the list
+    Given localStorage <failure>
+    When the user navigates to /article
+    Then GET ...&page=1&size=25 is sent, the list renders and no error is shown
+    When the user chooses "50 per page"
+    Then GET ...&page=1&size=50 is sent and the URL is /article?size=50
+
+    Examples:
+      | failure                   |
+      | throws on getItem         |
+      | throws on setItem (quota) |
+      | is undefined              |
+
+  Scenario: Logging out keeps the stored size
+    Given localStorage renewcms-page-size-articles is "5"
+    When the user logs out and logs in again and opens /article
+    Then GET ...&size=5 is sent

features/articles_page_size_memory.qa.md

@@ -0,0 +1,33 @@
+# QA: Articles page-size memory (SPA)
+
+No Go or HTTP test applies: nothing outside web/ changes.
+
+## Automated (Vitest, task test:web)
+
+Extend or sit beside web/src/views/__tests__/ArticlesPagination.spec.ts and reuse articleEnvelope.ts for the mocked GET /v1/article/ envelope (total 312, size from the query). localStorage.clear() in beforeEach; fresh router per test. Assert on the mocked request query string, the select label, the router URL and localStorage.
+
+1. Choosing 5 / 25 / 50 / 100 writes "5" / "25" / "50" / "100" under renewcms-page-size-articles; URLs /article?size=5, /article, ?size=50, ?size=100.
+2. Stored "5", open /article: request carries size=5 and page=1, select reads "5 per page", URL replaced (router.replace, no history entry added) with ?size=5.
+3. Choose 5, navigate to another route and back (mount again): size=5 requested.
+4. Choose 5, remount the app on /article and on /article?size=5 (simulated refresh): size=5 requested.
+5. Stored "50", on ?size=50: Next, Drafts tab, sort Title, search "plaster" (fake timers for the 120 ms debounce, not the system date): every request has size=50, stored value unchanged.
+6. Stored "5", choose 100: stored "100"; remount sends size=100.
+7. Stored "5", choose 25: stored "25"; remount sends size=25, URL /article.
+8. Stored "5", open /article?size=100: size=100 requested, stored still "5"; remount on /article sends size=5.
+9. Stored "5", open /article?page=3: request page=3&size=5, URL replaced by ?page=3&size=5.
+10. Invalid stored values 10, abc, 0, -5, 25.5, "": size=25 requested, select "25 per page", URL /article.
+11. Stored "5", open /article?size=10: size=25 requested, URL /article, stored still "5".
+12. Storage failures (Storage.prototype.getItem throwing; setItem throwing; window.localStorage undefined): no exception, list renders, size=25 on load, choosing 50 requests size=50 and URL ?size=50.
+13. Logout (session store reset) leaves the stored value; the next /article sends size=5.
+14. Unit tests for any read/write helper added next to web/src/lib/pagination.ts: valid values accepted, invalid rejected, errors swallowed.
+
+## Visual (task visual:check -- articles)
+
+No visual change is intended. Run the full articles group as a regression and require every capture within 10 %. Setups use the board's own sample data and must not depend on a stored size. Clear localStorage before each capture so a leftover value cannot change the default 25 frame. No state is clock-sensitive for this slice.
+
+## Manual
+
+- In a real browser, choose 5 per page, navigate away and back, then hard-refresh: it stays at 5.
+- Private-window or storage-blocked browser: the list still works at 25 with no error.
+- Keyboard: the page-size select behaves as before (ArrowDown, Enter, Esc, focus ring), and focus returns to the select after choosing.
+- Open a copied /article?size=100 link in a profile that has 5 stored: the link shows 100 and the next plain visit shows 5.

features/articles_pagination_api.feature

@@ -0,0 +1,264 @@
+Feature: Paginated article listing
+
+  As an API consumer or the RenewCMS back-office
+  I want GET /v1/article/ to always answer one page of articles with the total and the tab counts
+  So that large sites list articles quickly and the SPA can search, filter and page on the server
+
+  Background:
+    Given GET /v1/article/ is mounted under jwtauth.Verifier only (features/public_article_listing.feature)
+    And a caller is "verified" when the jwt cookie carries a user_id claim whose user has is_verified true, and "public" otherwise (missing, malformed, expired or unverified)
+    And a public caller only ever sees articles with is_online true; a verified caller sees every article
+    And BREAKING CHANGE: the body is no longer a bare JSON array; every successful request, with or without query parameters, answers {"items": [...], "total": N, "page": P, "size": S, "counts": {"all": A, "online": O, "draft": D}} in snake_case
+    And each item is the existing article object (id, title, body, body_format, is_online, created_at, updated_at) and items is [] rather than null
+    And paging follows the Activity convention: page is an integer >= 1 (default 1), size is one of 5, 25, 50, 100 (default 25)
+    And q (optional, max 200 characters; case-insensitive, accent-insensitive, matches anywhere in the title) and status (optional, online or draft) filter the items
+    And total is the number of visible articles matching q and status, before paging; page and size echo the values applied
+    And counts ignores q and status, so the tab counts do not move while the user searches; it respects visibility: for a public caller all equals online and draft is 0
+    And status=draft requested by a public caller matches nothing: items [], total 0
+    And sort (optional) is one of title:asc, title:desc, status:asc, status:desc, created_at:asc, created_at:desc, updated_at:asc, updated_at:desc; the default is updated_at:desc; status orders by is_online (asc puts drafts first); every ordering ends with id descending as the tie-break, so pages are stable and never overlap
+    And sort is mapped to a column and direction through a fixed whitelist in the repository, so request text never reaches the SQL; the same ordering applies on the search path (q) before slicing
+    And a page beyond the last answers 200 with items [] and the real total
+    And an invalid page, size, status, sort or an over-long q answers 400 with the plain-text body "The request cannot be processed due to a mismatch in the format of the body." (apperr.BodyErrorMessage), like GET /v1/activity, validated with validate tags through validator.Validate.Struct
+    And format is validated first: an invalid format still answers 400 "The format must be one of: markdown, html, json."
+    And ListArticlesUseCase reaches the data only through article.Repository; the handler never touches a repository; the repository query uses portable SQL (COUNT, LIMIT/OFFSET, ORDER BY, LIKE)
+    And article.Filters keeps Page 0 and Size 0 meaning "unpaged, every article" for internal callers (purge plan, media listing), which are unchanged
+
+  Scenario: A bare request answers the envelope with the defaults
+    Given the repository holds 30 online articles
+    When a public client sends GET /v1/article/
+    Then the status is 200
+    And the body is an object with page 1, size 25, total 30, 25 items and counts {"all": 30, "online": 30, "draft": 0}
+
+  Scenario Outline: Defaults when only one parameter is given
+    Given the repository holds 60 online articles
+    When a public client sends GET /v1/article/?<query>
+    Then the body has page <page>, size <size>, total 60 and <count> items
+
+    Examples:
+      | query   | page | size | count |
+      | page=2  | 2    | 25   | 25    |
+      | page=3  | 3    | 25   | 10    |
+      | size=5  | 1    | 5    | 5     |
+      | size=50 | 1    | 50   | 50    |
+
+  Scenario: Items are ordered by last update, newest first, then id descending
+    Given online articles id 1 updated 2026-09-01, id 2 updated 2026-09-03, id 3 updated 2026-09-03
+    When a public client sends GET /v1/article/?size=5
+    Then the item ids are 3, 2, 1
+
+  Scenario Outline: Sort orders the whole list, not just the page
+    Given a verified session and articles
+      | id | title   | created_at | updated_at | is_online |
+      | 1  | Banana  | 2026-01-01 | 2026-09-03 | true      |
+      | 2  | apple   | 2026-01-03 | 2026-09-01 | false     |
+      | 3  | Cherry  | 2026-01-02 | 2026-09-02 | true      |
+    When the client sends GET /v1/article/?sort=<sort>
+    Then the item ids are <ids>
+
+    Examples:
+      | sort             | ids   |
+      | updated_at:desc  | 1,3,2 |
+      | updated_at:asc   | 2,3,1 |
+      | created_at:desc  | 2,3,1 |
+      | created_at:asc   | 1,3,2 |
+      | title:asc        | 2,1,3 |
+      | title:desc       | 3,1,2 |
+      | status:asc       | 2,3,1 |
+      | status:desc      | 3,1,2 |
+
+  Scenario: No sort parameter keeps the default order
+    Given the same articles
+    When the client sends GET /v1/article/
+    Then the item ids are 1,3,2
+
+  Scenario: Equal sort keys fall back to id descending
+    Given three articles with the same title "Same" and ids 1, 2, 3
+    When the client sends GET /v1/article/?sort=title:asc
+    Then the item ids are 3,2,1
+
+  Scenario: Sort is applied before paging
+    Given 12 online articles whose titles sort alphabetically as ids 1..12
+    When a client requests ?sort=title:desc&size=5 for pages 1, 2 and 3
+    Then the pages hold ids 12..8, 7..3 and 2..1 with no repeat
+
+  Scenario: Sort combines with search and status
+    Given a verified session and draft articles "Tile A", "Tile C", "Tile B" and an online one "Tile D"
+    When the client sends GET /v1/article/?q=tile&status=draft&sort=title:asc
+    Then the item titles are "Tile A", "Tile B", "Tile C", total is 3 and counts is unchanged by q, status and sort
+
+  Scenario: Pages partition the list with no overlap
+    Given 12 online articles
+    When a client requests ?page=1&size=5, ?page=2&size=5 and ?page=3&size=5
+    Then the three pages hold 5, 5 and 2 items, total is 12 on each, and no id repeats
+
+  Scenario: A public caller's total and counts cover online articles only
+    Given 5 online and 3 offline articles
+    When a public client sends GET /v1/article/?size=5
+    Then total is 5, counts is {"all": 5, "online": 5, "draft": 0} and no item has is_online false
+
+  Scenario: A verified caller sees offline articles in the page, the total and the counts
+    Given 5 online and 3 offline articles and a valid jwt cookie of a verified user
+    When the client sends GET /v1/article/?size=5
+    Then total is 8, counts is {"all": 8, "online": 5, "draft": 3} and 3 items have is_online false
+
+  Scenario: An unverified or invalid session is treated as public
+    Given 5 online and 3 offline articles
+    And the jwt cookie is malformed, or belongs to an unverified user
+    When the client sends GET /v1/article/?size=5
+    Then total is 5 and no offline article is returned
+
+  Scenario: A page beyond the last is empty with the real total
+    Given 12 online articles
+    When a client sends GET /v1/article/?page=99&size=5
+    Then the status is 200, items is [], total is 12, page is 99, size is 5 and counts.all is 12
+
+  Scenario: No articles at all
+    Given the repository is empty
+    When a client sends GET /v1/article/
+    Then the status is 200, items is [], total is 0 and counts is {"all": 0, "online": 0, "draft": 0}
+
+  Scenario Outline: Status filter
+    Given 4 online and 2 offline articles and a valid jwt cookie of a verified user
+    When the client sends GET /v1/article/?status=<status>
+    Then total is <total>, counts is {"all": 6, "online": 4, "draft": 2} and every item matches the status
+
+    Examples:
+      | status | total |
+      | online | 4     |
+      | draft  | 2     |
+
+  Scenario: A public caller asking for drafts gets nothing
+    Given 4 online and 2 offline articles
+    When a public client sends GET /v1/article/?status=draft
+    Then items is [], total is 0 and counts is {"all": 4, "online": 4, "draft": 0}
+
+  Scenario: Search narrows the page and the total but not the counts
+    Given online articles "Choosing lime plaster for old stone walls" and "How we price a bathroom renovation"
+    When a client sends GET /v1/article/?q=PLÂSTER
+    Then total is 1, the only item is the lime plaster article and counts.all is 2
+
+  Scenario: Search and status combine with paging
+    Given a verified session and 7 draft articles whose title contains "tile" and 3 online ones
+    When the client sends GET /v1/article/?q=tile&status=draft&size=5&page=2
+    Then total is 7, the page holds 2 items and counts.draft is 7
+
+  Scenario: Search that matches nothing
+    When a client sends GET /v1/article/?q=zzzz
+    Then items is [], total is 0 and counts is unchanged
+
+  Scenario Outline: Invalid parameters answer 400 like Activity
+    When a client sends GET /v1/article/?<query>
+    Then the status is 400
+    And the body is "The request cannot be processed due to a mismatch in the format of the body."
+    And the repository was not called
+
+    Examples:
+      | query             |
+      | page=0            |
+      | page=-1           |
+      | page=abc          |
+      | page=             |
+      | page=1.5          |
+      | size=0            |
+      | size=10           |
+      | size=200          |
+      | size=abc          |
+      | status=archived   |
+      | status=           |
+      | q=<201 characters>|
+      | page=0&size=5     |
+      | page=1&size=1000  |
+      | sort=title                |
+      | sort=title:up             |
+      | sort=body:asc             |
+      | sort=                     |
+      | sort=updated_at           |
+      | sort=title:asc;DROP TABLE |
+      | sort=TITLE:ASC            |
+
+  Scenario: Invalid format is reported first
+    When a client sends GET /v1/article/?page=0&format=pdf
+    Then the status is 400 and the body is "The format must be one of: markdown, html, json."
+
+  Scenario: format and paging combine
+    Given 3 online articles
+    When a client sends GET /v1/article/?size=5&format=html
+    Then every item carries body_format "html" and total is 3
+
+  Scenario: Repository failure answers 500
+    Given the repository fails on its next call
+    When a client sends GET /v1/article/
+    Then the status is 500 and the body is "Failed to retrieve articles"
+
+  Rule: counts.suggestions
+
+    Background:
+      Given counts holds all, online, draft and suggestions, and the rest of the body shape ({"items","total","page","size","counts"}) is unchanged
+      And suggestions is the number of visible articles whose seo_status is "suggestions"
+      And it ignores q, status, site, seo, sort, page and size, like the other counts
+      And an article whose seo_status is "hidden" or "ready" is not counted
+      And a suggestion code listed in the article's seo_dismissed is never counted
+      And it equals the total of GET /v1/article/?seo=suggestions sent with no other filter by the same caller
+
+    Scenario: counts carries the suggestions count
+      Given 4 online and 2 draft articles of which 3 have suggestions
+      When a verified account sends GET /v1/article/
+      Then counts is {"all": 6, "online": 4, "draft": 2, "suggestions": 3}
+
+    Scenario: It is zero when nothing needs attention
+      Given 5 articles that all have a clean SEO check
+      When a verified account sends GET /v1/article/
+      Then counts.suggestions is 0
+
+    Scenario: It equals the total of the suggestions filter
+      Given 30 articles of which 12 have suggestions
+      When a verified account sends GET /v1/article/?seo=suggestions
+      Then total is 12 and counts.suggestions is 12
+
+    Scenario Outline: It ignores every other query parameter
+      Given 6 articles of which 3 have suggestions, on the sites "renew" and "journal"
+      When a verified account sends GET /v1/article/?<params>
+      Then counts.suggestions is 3
+
+      Examples:
+        | params                   |
+        | q=tile                   |
+        | status=draft             |
+        | site=journal             |
+        | seo=ready                |
+        | seo=hidden               |
+        | sort=title:asc           |
+        | size=5&page=99           |
+
+    Scenario: Hidden articles are not counted
+      Given an article with suggestions that is noindex
+      When a verified account sends GET /v1/article/
+      Then counts.suggestions is 0
+
+    Scenario: Dismissed suggestions are not counted
+      Given an article whose only suggestion is dismissed
+      When a verified account sends GET /v1/article/
+      Then counts.suggestions is 0
+
+    Scenario: A verified caller counts offline articles too
+      Given an online and a draft article, both with suggestions
+      When a verified account sends GET /v1/article/
+      Then counts.suggestions is 2
+
+    Scenario: A public caller counts online articles only
+      Given an online and an offline article, both with suggestions
+      When a caller without a verified account sends GET /v1/article/
+      Then counts is {"all": 1, "online": 1, "draft": 0, "suggestions": 1}
+
+    Scenario: An empty library
+      When a verified account sends GET /v1/article/ with no article stored
+      Then counts is {"all": 0, "online": 0, "draft": 0, "suggestions": 0}
+
+    Scenario: A failure to compute the count fails the request
+      Given the repository fails while the suggestions are evaluated
+      When a verified account sends GET /v1/article/
+      Then the status is 500 and the body is "Failed to retrieve articles"
+
+    Scenario: Existing fields are unchanged
+      Then total, page, size, ordering and every item field are as before
+      And counts.all, counts.online and counts.draft keep their values

features/articles_pagination_api.qa.md

@@ -0,0 +1,59 @@
+# QA: Paginated article listing (API)
+
+## HTTP-level (Go, `test/`, `task test`)
+
+Build `article.NewHandler(...)` over the real `ListArticlesUseCase` and a fake `article.Repository` (extend `mockArticleRepo` in `test/article_test.go`, keeping type names unique across files). The fake implements the interface contract: paging (Page/Size 0 = unpaged), q/status filtering, ordering updated_at DESC then id DESC, total, and the visibility counts. Mount on a fresh `chi.NewRouter()` mirroring `NewArticleRouter` in `api/router.go` (GET / under `jwtauth.Verifier` only, test `jwtauth.New("HS256", ...)`). Call `validator.InitValidator()`. Use a user fake for the verified, unverified and missing cases, as in `test/public_article_listing_test.go`. No live server, no SQLite file.
+
+Helper: decode the body into {items []map, total, page, size int, counts {all, online, draft}} and also assert the raw JSON contains `"items":[` (never null).
+
+1. Bare request: 30 online articles, GET /v1/article/ -> object (not array), page 1, size 25, total 30, 25 items, counts 30/30/0.
+2. Defaults table (page=2, page=3, size=5, size=50) on 60 articles.
+3. Order: ids 3,2,1 for the equal-timestamp case with no sort parameter (default updated_at:desc). Sort table: the 8 whitelisted values on the mixed-case fixture (apple/Banana/Cherry), asserting the item ids. The fake repo implements the same contract: key, direction, then id desc.
+3a. Equal titles with sort=title:asc -> ids 3,2,1.
+3b. Sort before paging: 12 articles, ?sort=title:desc&size=5, three pages, no overlap.
+3c. Sort + q + status combination: ordered titles, total 3, counts unchanged.
+3d. Use-case test: ListArticlesUseCase passes the typed sort through to Filters and defaults to updated_at desc when absent. Only whitelisted values reaching Order in the repository is a code-review item; the handler test covers the 400 side.
+4. Partition: 12 articles, pages 1-3 of size 5 -> 5,5,2 and 12 distinct ids.
+5. Public: 5 online + 3 offline -> total 5, counts 5/5/0, no offline item.
+6. Verified: same data -> total 8, counts 8/5/3, three offline items.
+7. Malformed cookie and unverified user -> same as public.
+8. Out of range: ?page=99&size=5 -> 200, raw `"items":[]`, total 12, counts.all 12.
+9. Empty repository -> items [], total 0, counts 0/0/0.
+10. Status table (verified): online -> total 4, draft -> total 2, counts always 6/4/2.
+11. Public status=draft -> items [], total 0, counts 4/4/0.
+12. q=PLÂSTER (accent and case insensitive) -> total 1, counts.all 2. q=zzzz -> empty, counts unchanged.
+13. q+status+page combination: total 7, 2 items on page 2, counts.draft 7.
+14. Invalid table (all rows incl. `page=`, `page=1.5`, `status=archived`, `status=`, 201-char q, and the 7 sort rows: `sort=title`, `sort=title:up`, `sort=body:asc`, `sort=`, `sort=updated_at`, `sort=title:asc;DROP TABLE`, `sort=TITLE:ASC`): each -> 400 with the exact BodyErrorMessage text, and the fake's FindByFilters/count counters stay 0.
+15. ?page=0&format=pdf -> 400 with the format message.
+16. ?size=5&format=html -> every item body_format "html".
+17. Fake repo failure (existing `failNext("FindByFilters")`) -> 500 "Failed to retrieve articles".
+18. Use-case tests: the paged list method returns items, total and counts, propagates a repo error (errors.Is on a sentinel), and the unpaged `Filters{}` call used by `purgePlan.go` and `ListMedia.go` still returns every article (existing tests keep passing).
+19. Existing tests that decode `GET /v1/article/` as an array (`test/public_article_listing_test.go`, `test/article_test.go`, `test/use_case_baseline_test.go`, features/articles_list.qa.md item 1) are amended to the envelope. List them in the diff.
+
+## counts.suggestions (Go, `test/`, `task test`)
+
+Build `article.NewHandler(...)` over the real use cases and the extended `mockArticleRepo`, as in the section above. The fixture articles carry bodies that yield suggestions, hidden (noindex) or ready SEO status and a `seo_dismissed` list. Mount on a fresh `chi.NewRouter()` that mirrors `NewArticleRouter` and call `validator.InitValidator()`.
+
+20. Counts table: 4 online and 2 draft with 3 suggestions gives `counts` exactly `{all:6, online:4, draft:2, suggestions:3}`. Decode into a map and assert the key set is exactly those four.
+21. Zero case: 5 clean articles gives `suggestions` 0. Empty library gives all four at 0.
+22. Equality: 30 articles, 12 with suggestions; `GET /?seo=suggestions` gives `total` 12 and `counts.suggestions` 12.
+23. Independence table: `q=tile`, `status=draft`, `site=journal`, `seo=ready`, `seo=hidden`, `sort=title:asc`, `size=5&page=99` all give 3.
+24. Exclusions: a noindex article with suggestions and an article whose only suggestion is dismissed are not counted; one with two suggestions of which one is dismissed is counted once.
+25. Visibility: a verified caller counts an online and a draft article (2); an anonymous caller and an unverified caller count the online one only, with `draft` 0.
+26. Repository failure while evaluating gives 500 "Failed to retrieve articles" and no partial body.
+27. Regression: the existing assertions on `total`, `page`, `size`, `counts.all/online/draft` and items stay green without edits.
+28. Docs, read by hand: `docs/api/articles.md` (example JSON gets `"suggestions"`, and the `counts` bullet says global, visibility-scoped, noindex and dismissed excluded, equal to the unfiltered `seo=suggestions` total); `web/src/data/apiCatalogue.ts` list response fields with its spec and `IntegrationView.spec.ts` counts; `docs/release-notes.md` line.
+29. Scoped mutation through `task mutate` only: `MUTATE_FILES=ListArticles.go MUTATE_RUN='TestArticle.*Count' MUTATE_WORKERS=2 task mutate -- ./internal/infrastructure/useCases`, plus any other file touched by the change. Re-check LIVED or NOT COVERED suspects without `MUTATE_RUN`. Then `task lint:go` and `task fmt`.
+
+## Docs (verified by reading the diff)
+
+- `docs/api/articles.md`: new "Pagination, search, sort and counts" section (parameters including `sort` values, default and id tie-break, envelope, ordering, errors) and a "Breaking change" note, like the existing format note: GET /v1/article/ no longer returns a bare array; read `items`.
+- `web/src/data/apiCatalogue.ts` `art-list`: add `page`, `size`, `q`, `status`, `sort` query entries, the 400 error, and a paged JSON example; the Integration specs that assert this catalogue are amended.
+- `docs/design/screens/integration.md` is read-only for agents: flag that its text "GET /v1/article/" example needs the user's update.
+- A release note under `docs/releases/` is the maintainer's call: flag it.
+
+## Manual verification
+
+- Real SQLite file via `task dev`: seed 60 articles, check ?page=2&size=25, ordering, q accent-insensitivity, total and counts. MySQL and PostgreSQL parity of the COUNT / LIMIT-OFFSET / LIKE queries is manual (no live DB in tests).
+- Sort by `title` on a live SQLite file, and on MySQL/PostgreSQL if available: title collation differs (binary, case-insensitive, locale), so mixed-case and accented ordering may differ between databases. Accepted; note any difference.
+- An anonymous curl against a running server returns the envelope.

features/articles_pagination_screen.feature

@@ -0,0 +1,187 @@
+Feature: Articles list pagination
+
+  As a verified RenewCMS user with many articles
+  I want the Articles list split into pages with a page-size menu, server-side search and tabs, and shareable URLs
+  So that I can browse a large list quickly and come back to the same page
+
+  Background:
+    Given /article is the verified Articles route (features/articles_list.feature), per docs/design/routes.md, docs/design/screens/articles.md group "Articles: pagination" and the Paginator in docs/design/components.md
+    And the route stays /article (the design's /articles is not adopted)
+    And the page requests GET /v1/article/?format=html&page=P&size=S&q=Q&status=T and reads {items, total, page, size, counts} (features/articles_pagination_api.feature); the tab counts "All", "Online", "Drafts" come from counts and do not change while searching
+    And page, size, q, status (tab) and sort live in the URL: ?page=&size=&q=&status=&sort=; the defaults (page 1, size 25, no q, tab All, sort updated_at:desc) are omitted from the URL and from the request only where the API default applies
+    And the sortable columns are Title (title), Status (status), Created (created_at) and Updated (updated_at); a header activation sends sort=<field>:<direction>, the active column shows an arrow icon for its direction, and sorting is done by the server over the whole list, never inside the loaded page
+    And an invalid sort in the URL falls back to updated_at:desc and is replaced in the URL
+    And the table caption reads "Articles, sorted by last updated, newest first" for the default sort and "Articles, sorted by {column}, {ascending|descending}" otherwise, with a French entry in messages.ts
+    And the mobile card list has no sort control; the sort parameter is still honoured from the URL there
+    And an invalid or missing size falls back to 25 and an invalid page (not an integer >= 1) falls back to 1, both replaced in the URL
+    And a change to search, tab, sort or size resets page to 1 (and drops it from the URL); search keeps its 120 ms debounce
+    And the URL changes when a response succeeds, not when the request is sent
+    And the summary reads "Showing {from}–{to} of {total}" with locale-formatted numbers, from total (the filtered count)
+    And the Paginator has First, Previous, page numbers with ellipses marking skipped ranges, Next, Last, and the page-size select "5 per page", "25 per page", "50 per page", "100 per page"
+    And the current page uses --rc-sand fill, --rc-on-sand text and a --ui-primary border and has aria-current="page"; disabled controls are at 40 % opacity; buttons are 32 px (44 px on mobile)
+    And on mobile the paginator is Previous, "Page N of M" and Next
+    And the paginator is hidden when total fits on one page; the summary and the page-size select stay
+    And keyboard: Tab reaches the page-size select, first, previous, each page, next, last; Enter or Space activates; ArrowDown opens the page-size list, Enter selects, Esc closes; every control shows a 2 px --ui-primary focus outline with a 2 px offset
+    And this slice amends features/articles_list.feature: search, tabs and sort are no longer computed client-side over the full list; the list, the counts and the empty states come from the server response
+    And HomeView, ArticleView and useArticles.listArticles migrate to the envelope: they read items (and counts or total where they count) and send explicit paging; no caller reads a bare array any more
+    And the fixture below is total 312, size 25 (13 pages) unless stated; the frames draw at most 10 rows
+
+  Scenario: 1 First page
+    Given GET /v1/article/?format=html&page=1&size=25 resolves 200 with 25 items and total 312
+    When the user navigates to /article
+    Then the summary reads "Showing 1–25 of 312"
+    And First and Previous are disabled, page 1 is current, Next and Last are enabled
+    And the URL has no page or size
+
+  Scenario: 2 Middle page
+    Given GET ...&page=7&size=25 resolves 200 with 25 items and total 312
+    When the user navigates to /article?page=7
+    Then the summary reads "Showing 151–175 of 312"
+    And page 7 is current with --rc-sand / --rc-on-sand and aria-current="page"
+    And ellipses mark the skipped ranges and every control is enabled
+
+  Scenario: 3 Last page
+    Given GET ...&page=13&size=25 resolves 200 with 12 items and total 312
+    When the user navigates to /article?page=13
+    Then the summary reads "Showing 301–312 of 312"
+    And Next and Last are disabled
+
+  Scenario: 4 Single page
+    Given GET /v1/article/ resolves 200 with 6 items, total 6 and counts {all 6, online 4, draft 2}
+    When the user navigates to /article
+    Then the summary reads "Showing 1–6 of 6" and the page-size select stays
+    And the paginator (First ... Last) is not rendered
+    And the tabs read "All 6" "Online 4" "Drafts 2"
+
+  Scenario: 5 Loading next page
+    Given the first page has loaded and GET ...&page=2 has not resolved
+    When the user activates Next
+    Then skeleton rows keep the table height and the list is aria-busy="true"
+    And every paginator control is disabled and the summary reads "Loading page 2…"
+    When the request resolves 200
+    Then the rows and summary of page 2 appear and the URL becomes /article?page=2
+
+  Scenario Outline: 6 Error loading a page keeps the previous rows
+    Given page 6 is shown
+    When the user activates Next and GET ...&page=7 <failure>
+    Then the page-6 rows stay, the URL stays /article?page=6 and the controls are re-enabled
+    And a notice reads "Couldn't load page 7. Showing page 6." with a "Retry" action
+    When the user activates "Retry"
+    Then GET ...&page=7 is sent again and, on 200, page 7 replaces the rows, the URL becomes ?page=7 and the notice goes
+
+    Examples:
+      | failure                      |
+      | resolves with a 500 response |
+      | never reaches the server     |
+
+  Scenario: 7 Page out of range redirects to the last page with a notice
+    Given GET ...&page=99 resolves 200 with items [] and total 312
+    When the user navigates to /article?page=99
+    Then the URL is replaced (no history entry) by /article?page=13 and GET ...&page=13 is sent
+    And the notice reads "That page doesn't exist. Showing the last page."
+    And the last-page state (3) is shown
+
+  Scenario: 7b Out of range with total 0 shows the empty state, no redirect
+    Given GET ...&page=5 resolves 200 with items [] and total 0
+    When the user navigates to /article?page=5
+    Then the "No articles yet" empty state shows and the URL is /article
+
+  Scenario: 8 Search resets to page 1
+    Given the user is on /article?page=7
+    When the user types "plaster" in the search field and the debounce elapses
+    Then GET ...&q=plaster&page=1 is sent
+    And on success the URL is /article?q=plaster (page omitted)
+    And the tab counts are unchanged
+    And the same reset happens for a tab change, a sort change and a page-size change
+
+  Scenario: 9 Empty after search
+    Given GET ...&q=tiles resolves 200 with items [], total 0 and counts {all 6, online 4, draft 2}
+    When the user searches "tiles"
+    Then the paginator and the summary are hidden
+    And the no-results state shows "No articles match "tiles"", "Check the spelling, or search for a shorter part of the title." and "Clear search"
+    And the tabs still read "All 6" "Online 4" "Drafts 2"
+
+  Scenario Outline: 10 Page size menu
+    Given the user is on /article?page=3
+    When the user opens the page-size select (it opens upward) and chooses "<label>"
+    Then GET ...&page=1&size=<size> is sent and, on success, the URL is <url>
+
+    Examples:
+      | label        | size | url               |
+      | 5 per page   | 5    | /article?size=5   |
+      | 25 per page  | 25   | /article          |
+      | 50 per page  | 50   | /article?size=50  |
+      | 100 per page | 100  | /article?size=100 |
+
+  Scenario: 10b Invalid URL values fall back
+    When the user navigates to /article?size=10&page=abc
+    Then GET ... is sent with page=1 and size=25 and the URL is replaced by /article
+
+  Scenario: 11 Focus-visible
+    When the user tabs to Next
+    Then Next shows a 2 px --ui-primary outline with a 2 px offset
+    And the same ring shows on every paginator control and on the page-size select
+
+  Scenario: Keyboard, the page-size list
+    When the user focuses the page-size select and presses ArrowDown
+    Then the list opens; Enter selects the highlighted size; Esc closes it and returns focus to the select
+
+  Scenario: Tabs filter on the server
+    Given the Default list has loaded and the user is on /article?page=3
+    When the user selects the "Drafts" tab
+    Then GET ...&status=draft&page=1 is sent and, on success, the URL is /article?status=draft
+    And the tab counts are unchanged
+
+  Scenario Outline: Sort header, server-side, resets to page 1
+    Given the user is on /article?page=7
+    When the user activates the "<column>" header (first click)
+    Then GET ...&sort=<sort>&page=1 is sent
+    And on success the URL is /article?sort=<sort> (page omitted)
+    And the header shows the arrow icon for its direction and the tab counts are unchanged
+
+    Examples:
+      | column  | sort           |
+      | Title   | title:asc      |
+      | Status  | status:asc     |
+      | Created | created_at:asc |
+      | Updated | updated_at:asc |
+
+  Scenario: Activating the sorted header again toggles the direction
+    Given the list is sorted by Title ascending
+    When the user activates the "Title" header
+    Then GET ...&sort=title:desc&page=1 is sent and, on success, the URL is /article?sort=title:desc
+
+  Scenario: Returning to the default sort drops sort from the URL
+    Given the URL is /article?sort=title:asc
+    When the user activates the "Updated" header until it is updated_at:desc
+    Then the request sends sort=updated_at:desc and, on success, the URL has no sort
+
+  Scenario: Sort is kept across paging, page size, search and tabs
+    Given the URL is /article?sort=title:asc
+    When the user activates Next, or changes the size, or searches "plaster"
+    Then every request carries sort=title:asc and the URL keeps sort=title:asc (search, tab and size also reset the page)
+
+  Scenario: A sorted URL loads sorted
+    When the user navigates to /article?sort=created_at:desc&page=2
+    Then GET ... carries sort=created_at:desc&page=2 and the Created header shows the arrow-down icon
+
+  Scenario: Invalid sort in the URL falls back
+    When the user navigates to /article?sort=body:asc
+    Then GET ... carries no sort (the default applies), the Updated header shows the arrow-down icon and the URL is replaced by /article
+
+  Scenario: The caption follows the sort
+    Given the list is sorted by Title ascending
+    Then the table's visually hidden caption reads "Articles, sorted by title, ascending"
+
+  Scenario: Mobile, Previous, "Page N of M", Next
+    Given the viewport is below md and page 2 of 13 is shown
+    Then the paginator reads Previous, "Page 2 of 13", Next with 44 px controls and no page numbers
+
+  Scenario: Deleting the last row of the last page
+    Given the user is on the last page with a single row and deletes it (204)
+    Then the list reloads the previous page and the URL is replaced by it
+    And the tab counts are recomputed from the new response
+
+  Scenario: Home and the article view read the envelope
+    When HomeView or ArticleView load their articles
+    Then they call GET /v1/article/ with explicit paging and read items, never a bare array

features/articles_pagination_screen.qa.md

@@ -0,0 +1,42 @@
+# QA: Articles list pagination (SPA)
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Mock `useApi` for `GET /v1/article/?format=html&...` (the route key includes the query) per case. Mount ArticlesPage inside DashboardShell with a verified session and a test router at /article, as in features/articles_list.qa.md. The fixture is 312 articles at 25 per page, built by a helper, with counts {all, online, draft}. No system date freezing.
+
+1. First page: no page/size in the URL, "Showing 1–25 of 312", First/Previous disabled, page 1 aria-current.
+2. Middle page: ?page=7 -> "Showing 151–175 of 312", aria-current on 7, ellipsis present.
+3. Last page: ?page=13 -> "Showing 301–312 of 312", Next/Last disabled.
+4. Single page: total 6 -> no paginator nav, summary "Showing 1–6 of 6", select present, tabs "All 6" "Online 4" "Drafts 2".
+5. Loading next page: unresolved page-2 promise -> skeleton rows, aria-busy, controls disabled, "Loading page 2…"; resolve -> rows, URL ?page=2 (URL unchanged before the response).
+6. Error (500 and network rejection): rows and URL (?page=6) kept, notice "Couldn't load page 7. Showing page 6.", Retry resends page 7, success clears the notice and sets ?page=7.
+7. Out of range: ?page=99 returns {items:[], total:312} -> router.replace to ?page=13 (assert no extra history entry), second request page=13, notice text. 7b: total 0 -> empty state, no redirect.
+8. Search resets: from ?page=7 type "plaster" (fake timers past 120 ms) -> request q=plaster&page=1, URL /article?q=plaster after the response, tab counts unchanged. Same assertion for tab, sort (request sort=title:asc&page=1) and size.
+8a. Sort headers: for Title, Status, Created, Updated, a first click sends sort=<field>:asc&page=1, the URL becomes /article?sort=<field>:asc only after the response, the arrow icon shows and counts are unchanged.
+8b. A second click toggles to desc; returning to updated_at:desc drops sort from the URL.
+8c. Sort kept across Next, size change and search.
+8d. A sorted URL on load (?sort=created_at:desc&page=2) sends it and shows the Created arrow-down; an invalid ?sort=body:asc sends no sort and the URL is replaced by /article.
+8e. No client-side re-sorting: with the mock returning rows in a fixed order, the table shows exactly that order whatever the sorting state.
+8f. Caption: default "Articles, sorted by last updated, newest first"; sorted by Title ascending "Articles, sorted by title, ascending"; French strings present.
+8g. Mobile card list renders no sort control.
+9. Empty after search: paginator and summary absent, copy and "Clear search", tab counts unchanged.
+10. Page-size menu: 5/25/50/100 -> request and URL; ArrowDown opens, Enter selects, Esc closes and restores focus. 10b: ?size=10&page=abc -> request page=1&size=25, URL replaced.
+11. Focus-visible: the focus-ring tokens on every control (the pixel outline is a visual check).
+12. Tabs on the server: Drafts -> status=draft&page=1, counts unchanged.
+13. Mobile: below md, Previous / "Page 2 of 13" / Next, no numbers.
+14. Delete last row of last page: reloads the previous page, counts refreshed.
+15. HomeView, ArticleView and useArticles: with the envelope mocked, they render from `items`; no code path reads a bare array (a mocked bare array makes the test fail).
+16. Existing specs amended: features/articles_list.qa.md items 1-18 (search and tab counts server-driven, `GET /v1/article/` mocked as the envelope), `web/src/i18n/spa.spec.ts` (mock around line 417), the ArticleTable specs that rely on client-side TanStack sorting, and the Home, ArticleView and Integration specs. List them in the diff.
+
+## Visual (`task visual:check -- articles`)
+
+Add a setup per state in `web/visual/states.ts`, reusing the board's own sample data from group "Articles: pagination" in `docs/design/source/RenewCMS Screens Back-office.dc.html` (total 312, size 25, titles from the frame script), at 1440x900 and 390x844, light and dark; every capture within 10 %. States: First page, Middle page, Last page, Single page, Loading next page, Error loading a page, Page out of range, Search resets to page 1, Empty after search, Page size menu, Focus-visible. A state whose frame shows relative dates ("2 hours ago") is `skip: 'clock-sensitive'`; confirm per frame when coding. Take layout (summary vs paginator vs select, select opening upward) from the frame markup, not from components.md prose. The Articles group's existing states are re-run, since the list now comes from the envelope.
+
+## Manual
+
+- Keyboard order and focus return (Tab path, Enter/Space, ArrowDown/Enter/Esc), hover and motion (the skeleton pulse stops under reduced motion).
+- Keyboard activation (Enter/Space) of the sort headers and the screen-reader announcement of the sort direction (aria-sort).
+- The sorted-header arrow is part of the existing Articles board states; if a frame lacks it, raise it with the user rather than inventing a state.
+- Real round trip with `task dev`: page, size, q, status, total and counts from a live SQLite file; a reload keeps the URL state; browser Back after a size change.
+- Out-of-range redirect against a real shrinking list (delete rows in another tab).
+- Home and Article views against the real API after the envelope change.

features/authors_backend.feature

@@ -0,0 +1,928 @@
+Feature: Authors backend, public bylines that articles credit in order
+
+  As an owner or admin of a RenewCMS installation
+  I want to manage authors and credit them on articles in a chosen order
+  So that readers see who wrote an article, whether or not the writer has an account
+
+  Background:
+    Given the spec of record is docs/design/screens/authors.md, docs/design/screens/editor.md (site and authors), docs/design/screens/profile.md, docs/design/states.md (author rows), docs/design/routes.md and docs/design/sites-authors-slices.md
+    And this slice is backend only: no SPA, no change to docs/design
+    And an Author has id (uint32), name, slug, bio, avatar_id (nullable media id), website (nullable), social_links, user_id (nullable and unique), is_linked and article_count, in snake_case JSON
+    And an article has zero or more authors in a stored order through an ordered article_authors join; the first is the primary byline
+    And zero authors on an article is allowed and never blocks publishing
+    And the routes live under /v1/author, mounted inside the JWT group: GET /, POST /, POST /me, PATCH /{id}, DELETE /{id}?reassign_to={id|none}
+    And GET /v1/author/ accepts a session or an API key from a verified account; every write, POST /me included, is session-only
+    And POST / and DELETE /{id} go through RequireOwnerOrAdmin with its existing body "Only owners and admins can do this."
+    And PATCH /{id} is allowed to owner and admin on any author, and to any verified account on the author linked to itself, and otherwise answers 403 with the body "author_rights"
+    And the only roles defined today are "owner" and "admin", so a role-without-author-rights is exercised with a verified account whose role is any other value
+    And error responses are plain text from http.Error whose body is exactly the code token: author_not_found, author_slug_taken, author_has_articles, user_already_linked, author_already_linked, user_not_found, author_rights, bio_too_long, invalid_url, too_many_links, invalid_slug, invalid_reassign, image_not_found
+    And bio_too_long, invalid_url and too_many_links answer 422; other validate-tag failures answer 400 with the validator error text, a body that cannot be decoded answers 400 with apperr.BodyErrorMessage, and a malformed id answers 400 with apperr.IdUint32ErrorMessage
+    And the name has 1 to 100 characters after trimming, the slug matches ^[a-z0-9]+(-[a-z0-9]+)*$ with 1 to 100 characters, the bio has at most 280 characters counted in runes
+    And website and every social link URL must be https with a host, at most 2048 characters; an empty or null website means none
+    And social_links holds at most 5 items of {"type", "url"} where type is one of x, linkedin, github, mastodon, custom
+    And an author has user_email in its JSON only for owner and admin; it is absent for every other caller
+    And an author inside an article has only id, name, slug, bio, avatar_id, website and social_links
+    And request validation goes through validate tags and validator.Validate.Struct
+    And handlers reach authors only through use cases and domain interfaces, and no comment is added anywhere
+
+  Rule: Reading authors
+
+    Scenario: The list is newest first with article counts
+      Given the authors "Léa Fontaine" (id 1), "Inès Duarte" (id 2) and "Camille Roche" (id 3)
+      And "Inès Duarte" is credited on 9 articles and "Léa Fontaine" on none
+      When a verified account sends GET /v1/author/
+      Then the status is 200
+      And the body is {"items": [...], "total": 3, "page": 1, "size": 25}
+      And the items are "Camille Roche", "Inès Duarte", "Léa Fontaine" in that order
+      And every item carries article_count
+
+    Scenario Outline: Who can read the list
+      Given at least one author exists
+      When GET /v1/author/ is sent with <credentials>
+      Then the status is <status>
+
+      Examples:
+        | credentials                                 | status |
+        | the owner's jwt cookie                      | 200    |
+        | a verified admin's jwt cookie               | 200    |
+        | a verified account with another role        | 200    |
+        | a valid API key                             | 200    |
+        | an unverified account's jwt cookie          | 403    |
+        | no credentials                              | 401    |
+
+    Scenario Outline: Search matches the name or the slug
+      Given the authors "Camille Roche" (slug "camille-roche") and "Zoe Lambert" (slug "zl")
+      When a verified account sends GET /v1/author/?q=<q>
+      Then the items are <names>
+      And total is <total>
+
+      Examples:
+        | q        | names           | total |
+        | camille  | "Camille Roche" | 1     |
+        | ROCHE    | "Camille Roche" | 1     |
+        | zl       | "Zoe Lambert"   | 1     |
+        | zoe      | "Zoe Lambert"   | 1     |
+        | nobody   | none            | 0     |
+
+    Scenario Outline: Pagination follows the article list
+      Given 30 authors
+      When a verified account sends GET /v1/author/?<params>
+      Then the status is <status>
+      And <result>
+
+      Examples:
+        | params          | status | result                                         |
+        | size=25&page=2  | 200    | 5 items, total 30, page 2, size 25             |
+        | size=5          | 200    | 5 items, total 30, page 1, size 5              |
+        | page=3&size=100 | 200    | 0 items, total 30                              |
+        | size=30         | 400    | the body is apperr.BodyErrorMessage            |
+        | page=0          | 400    | the body is apperr.BodyErrorMessage            |
+        | page=abc        | 400    | the body is apperr.BodyErrorMessage            |
+
+    Scenario: The account email is shown to owner and admin only
+      Given the author "Inès Duarte" is linked to the user ines.duarte@renew.example
+      When the owner sends GET /v1/author/
+      Then "Inès Duarte" has is_linked true, user_id set and user_email "ines.duarte@renew.example"
+      When a verified account with another role sends GET /v1/author/
+      Then "Inès Duarte" has is_linked true
+      And no "user_email" key appears anywhere in the body
+      And the body does not contain "ines.duarte@renew.example"
+
+    Scenario: A guest author is not linked
+      Given the author "Camille Roche" has no user
+      When a verified account sends GET /v1/author/
+      Then "Camille Roche" has is_linked false, user_id null and no user_email
+
+    Scenario: An author without avatar or website returns nulls
+      When a verified account reads an author with no avatar and no website
+      Then avatar_id is null, website is null, bio is "" and social_links is []
+
+  Rule: Creating an author is owner or admin only
+
+    Scenario Outline: An owner or admin creates an author
+      When <credentials> sends POST /v1/author/ with {"name": "Camille Roche", "slug": "camille-roche", "bio": "Writer.", "website": "https://example.com", "social_links": [{"type": "x", "url": "https://x.com/camille"}]}
+      Then the status is 201
+      And the body is the author with a new id, article_count 0, is_linked false and the given values
+      And the author is stored
+
+      Examples:
+        | credentials                   |
+        | the owner's jwt cookie        |
+        | a verified admin's jwt cookie |
+
+    Scenario: Only the name is required
+      When the owner sends POST /v1/author/ with {"name": "Zoe Lambert"}
+      Then the status is 201
+      And the slug is "zoe-lambert", bio is "", avatar_id, website and user_id are null and social_links is []
+
+    Scenario Outline: The slug is generated from the name
+      When the owner sends POST /v1/author/ with {"name": "<name>"}
+      Then the slug is "<slug>"
+
+      Examples:
+        | name                | slug       |
+        | Camille Roche       | camille-roche |
+        | Inès Duarte         | ines-duarte |
+        | Dr. O'Neil  Smith   | dr-o-neil-smith |
+        | !!!                 | author     |
+
+    Scenario: A generated slug that is taken is refused
+      Given the author with slug "camille-roche" exists
+      When the owner sends POST /v1/author/ with {"name": "Camille Roche"}
+      Then the status is 409
+      And the body is "author_slug_taken"
+      And no author is added
+
+    Scenario: A taken slug is refused
+      Given the author with slug "camille-roche" exists
+      When the owner sends POST /v1/author/ with {"name": "Other", "slug": "camille-roche"}
+      Then the status is 409
+      And the body is "author_slug_taken"
+      And no author is added
+
+    Scenario: The slug is unique even if the repository reports a race
+      Given the repository reports a unique violation on the slug
+      When the owner sends POST /v1/author/ with a free-looking slug
+      Then the status is 409 with body "author_slug_taken"
+
+    Scenario Outline: Fields are validated
+      When the owner sends POST /v1/author/ with <field> <value>
+      Then the status is <status>
+      And the body is "<body>"
+      And no author is added
+
+      Examples:
+        | field        | value                              | status | body                     |
+        | name         | (empty)                            | 400    | the validator error text |
+        | name         | "   "                              | 400    | the validator error text |
+        | name         | 101 characters                     | 400    | the validator error text |
+        | slug         | "Camille"                          | 400    | invalid_slug             |
+        | slug         | "camille_roche"                    | 400    | invalid_slug             |
+        | slug         | "-camille"                         | 400    | invalid_slug             |
+        | slug         | 101 characters                     | 400    | invalid_slug             |
+        | bio          | 281 characters                     | 422    | bio_too_long             |
+        | website      | "http://example.com"               | 422    | invalid_url              |
+        | website      | "example.com"                      | 422    | invalid_url              |
+        | website      | "https://"                         | 422    | invalid_url              |
+        | social_links | 6 links                            | 422    | too_many_links           |
+        | social_links | [{"type": "x", "url": "http://x.com/a"}] | 422 | invalid_url          |
+        | social_links | [{"type": "facebook", "url": "https://f.com/a"}] | 400 | the validator error text |
+        | avatar_id    | 999 (no such image)                | 400    | image_not_found          |
+
+    Scenario Outline: Boundaries are accepted
+      When the owner sends POST /v1/author/ with <field> <value>
+      Then the status is 201
+
+      Examples:
+        | field        | value                  |
+        | name         | 100 characters         |
+        | slug         | 100 characters         |
+        | bio          | 280 characters         |
+        | bio          | 280 multi-byte characters |
+        | social_links | 5 links                |
+        | social_links | 2 links of type "custom" |
+        | website      | ""                     |
+
+    Scenario: A malformed body is refused
+      When the owner sends POST /v1/author/ with the body "{not json"
+      Then the status is 400
+      And the body is apperr.BodyErrorMessage
+      And no author is added
+
+    Scenario: The role is checked before the body
+      When an account with another role sends POST /v1/author/ with the body "{not json"
+      Then the status is 403 with body "Only owners and admins can do this."
+
+    Scenario: An author can be created linked to a user
+      Given the user 3 has no author
+      When the owner sends POST /v1/author/ with {"name": "Marta Alves", "user_id": 3}
+      Then the status is 201
+      And the author has user_id 3 and is_linked true
+
+    Scenario Outline: An author cannot be created with an unusable user
+      When the owner sends POST /v1/author/ with {"name": "X", "user_id": <user_id>}
+      Then the status is <status>
+      And the body is "<body>"
+      And no author is added
+
+      Examples:
+        | user_id                 | status | body                |
+        | 999 (no such user)      | 404    | user_not_found      |
+        | 3 (already has author)  | 409    | user_already_linked |
+
+  Rule: The caller creates their own author
+
+    Scenario Outline: The author is named from the display name or the username
+      Given the verified account has display name "<display>" and username "<username>" and no author
+      When it sends POST /v1/author/me
+      Then the status is 201
+      And the author name is "<name>" and the slug is "<slug>"
+      And the author has user_id of the caller and is_linked true
+      And slug_adjusted is false
+
+      Examples:
+        | display     | username | name        | slug        |
+        | Marta Alves | marta    | Marta Alves | marta-alves |
+        | (empty)     | marta    | marta       | marta       |
+
+    Scenario Outline: Any verified role may do it
+      When <credentials> sends POST /v1/author/me
+      Then the status is 201
+
+      Examples:
+        | credentials                           |
+        | the owner's jwt cookie                |
+        | a verified admin's jwt cookie         |
+        | a verified account with another role  |
+
+    Scenario: A taken slug is de-duplicated silently
+      Given the author with slug "marta-alves" exists and "marta-alves-2" too
+      When "Marta Alves" sends POST /v1/author/me
+      Then the status is 201
+      And the slug is "marta-alves-3"
+      And slug_adjusted is true
+      And no error is returned
+
+    Scenario: The suffix still fits in the slug limit
+      Given a display name whose slug is 100 characters and that slug is taken
+      When the caller sends POST /v1/author/me
+      Then the status is 201
+      And the slug is at most 100 characters and ends with "-2"
+      And slug_adjusted is true
+
+    Scenario: Only the own-author creation carries slug_adjusted
+      When the owner sends POST /v1/author/ with {"name": "Camille Roche"}
+      Then the 201 body has no slug_adjusted field
+      And GET /v1/author/ items and GET /v1/auth/me author have no slug_adjusted field
+
+    Scenario: A caller who already has an author is refused
+      Given the caller is linked to an author
+      When the caller sends POST /v1/author/me
+      Then the status is 409
+      And the body is "user_already_linked"
+      And no author is added
+
+    Scenario: Two concurrent calls create one author
+      Given the repository reports a unique violation on user_id
+      When the caller sends POST /v1/author/me
+      Then the status is 409 with body "user_already_linked"
+
+    Scenario Outline: The endpoint is session-only and verified-only
+      When POST /v1/author/me is sent with <credentials>
+      Then the status is <status>
+      And no author is added
+
+      Examples:
+        | credentials                        | status | body                              |
+        | a valid API key                    | 403    | This action needs a real session. |
+        | an unverified account's jwt cookie | 403    | the existing verification message |
+        | no credentials                     | 401    | the existing unauthorized message |
+
+  Rule: Editing an author
+
+    Scenario: The owner edits any author
+      Given the author 2 "Camille Roche" with slug "camille-roche"
+      When the owner sends PATCH /v1/author/2 with {"name": "Camille R.", "slug": "camille-r", "bio": "New.", "website": "https://camille.example", "social_links": [{"type": "github", "url": "https://github.com/camille"}]}
+      Then the status is 200
+      And the body is the author with the new values
+
+    Scenario: Absent fields are untouched
+      Given the author 2 has a bio, a website and an avatar
+      When the owner sends PATCH /v1/author/2 with {"name": "Camille R."}
+      Then only the name changed
+
+    Scenario Outline: Nullable fields are cleared
+      Given the author 2 has an avatar 5, a website and 2 social links
+      When the owner sends PATCH /v1/author/2 with <body>
+      Then the status is 200
+      And <result>
+
+      Examples:
+        | body                       | result                    |
+        | {"avatar_id": null}        | avatar_id is null         |
+        | {"website": null}          | website is null           |
+        | {"website": ""}            | website is null           |
+        | {"social_links": []}       | social_links is []        |
+        | {"bio": ""}                | bio is ""                 |
+
+    Scenario: The avatar is set to an existing image
+      Given the image 5 exists
+      When the owner sends PATCH /v1/author/2 with {"avatar_id": 5}
+      Then the author 2 has avatar_id 5
+
+    Scenario: Social links are replaced as a whole
+      Given the author 2 has 3 social links
+      When the owner sends PATCH /v1/author/2 with {"social_links": [{"type": "x", "url": "https://x.com/a"}]}
+      Then the author 2 has exactly that one link
+
+    Scenario Outline: Editing is validated like creation
+      When the owner sends PATCH /v1/author/2 with <field> <value>
+      Then the status is <status>
+      And the body is "<body>"
+      And the author 2 is unchanged
+
+      Examples:
+        | field        | value                 | status | body                     |
+        | name         | (empty)               | 400    | the validator error text |
+        | slug         | "Bad Slug"            | 400    | invalid_slug             |
+        | bio          | 281 characters        | 422    | bio_too_long             |
+        | website      | "http://example.com"  | 422    | invalid_url              |
+        | social_links | 6 links               | 422    | too_many_links           |
+        | avatar_id    | 999                   | 400    | image_not_found          |
+
+    Scenario: Keeping the own slug is not a collision
+      When the owner sends PATCH /v1/author/2 with {"slug": "camille-roche", "bio": "x"} and the slug is already that author's
+      Then the status is 200
+
+    Scenario: Taking another author's slug is refused
+      Given the author 3 has slug "zoe-lambert"
+      When the owner sends PATCH /v1/author/2 with {"slug": "zoe-lambert"}
+      Then the status is 409
+      And the body is "author_slug_taken"
+      And the author 2 is unchanged
+
+    Scenario Outline: An empty or unknown update is refused
+      When the owner sends PATCH /v1/author/2 with <body>
+      Then the status is 400
+      And the body is apperr.BodyErrorMessage
+      And the author 2 is unchanged
+
+      Examples:
+        | body             |
+        | {}               |
+        | {"colour": "x"}  |
+        | {"name": null}   |
+
+    Scenario: A missing author is not found
+      When the owner sends PATCH /v1/author/999 with {"name": "X"}
+      Then the status is 404
+      And the body is "author_not_found"
+
+    Scenario: A malformed id is refused
+      When the owner sends PATCH /v1/author/abc with {"name": "X"}
+      Then the status is 400
+      And the body is apperr.IdUint32ErrorMessage
+
+    Scenario: A no-op edit records nothing
+      When the owner sends PATCH /v1/author/2 with the values it already has
+      Then the status is 200
+      And no activity event is recorded
+
+    Scenario Outline: A role without author rights edits only its own author
+      Given the verified account with another role is linked to the author 4
+      When it sends PATCH /v1/author/<id> with {"bio": "Updated."}
+      Then the status is <status>
+      And the body is "<body>"
+
+      Examples:
+        | id  | status | body             |
+        | 4   | 200    | the author       |
+        | 2   | 403    | author_rights    |
+        | 999 | 404    | author_not_found |
+
+    Scenario Outline: Own author edits include name, slug and avatar
+      Given the verified account with another role is linked to the author 4
+      When it sends PATCH /v1/author/4 with <body>
+      Then the status is 200
+
+      Examples:
+        | body                                |
+        | {"name": "Marta A."}                |
+        | {"slug": "marta-a"}                 |
+        | {"avatar_id": 5}                    |
+        | {"social_links": []}                |
+
+    Scenario: A role without author rights cannot change the link
+      Given the verified account with another role is linked to the author 4
+      When it sends PATCH /v1/author/4 with {"user_id": null}
+      Then the status is 403
+      And the body is "author_rights"
+      And the author 4 is still linked
+
+    Scenario: An API key cannot edit an author
+      When PATCH /v1/author/2 is sent with a valid API key
+      Then the status is 403 with body "This action needs a real session."
+
+  Rule: Linking and unlinking a user
+
+    Scenario: The owner links a user to a guest author
+      Given the author 2 is a guest and the user 3 has no author
+      When the owner sends PATCH /v1/author/2 with {"user_id": 3}
+      Then the status is 200
+      And the author 2 has user_id 3, is_linked true and user_email of the user 3
+
+    Scenario: A user cannot have two authors
+      Given the user 3 is linked to the author 4
+      When the owner sends PATCH /v1/author/2 with {"user_id": 3}
+      Then the status is 409
+      And the body is "user_already_linked"
+      And the author 2 is unchanged
+
+    Scenario: A linked author must be unlinked before it can be relinked
+      Given the author 2 is linked to the user 3 and the user 5 has no author
+      When the owner sends PATCH /v1/author/2 with {"user_id": 5}
+      Then the status is 409
+      And the body is "author_already_linked"
+
+    Scenario: Linking the user it already has is a no-op
+      Given the author 2 is linked to the user 3
+      When the owner sends PATCH /v1/author/2 with {"user_id": 3}
+      Then the status is 200
+      And no activity event is recorded
+
+    Scenario: An unknown user cannot be linked
+      When the owner sends PATCH /v1/author/2 with {"user_id": 999}
+      Then the status is 404
+      And the body is "user_not_found"
+
+    Scenario: The owner unlinks a user
+      Given the author 2 is linked to the user 3
+      When the owner sends PATCH /v1/author/2 with {"user_id": null}
+      Then the status is 200
+      And the author 2 has user_id null, is_linked false and no user_email
+      And the user 3 can create or be linked to an author again
+      And the author 2 stays credited on its articles
+
+    Scenario: Unlinking a guest author is a no-op
+      When the owner sends PATCH /v1/author/2 with {"user_id": null} on a guest author
+      Then the status is 200
+      And no activity event is recorded
+
+    Scenario: A new article by the unlinked user no longer starts with the author
+      Given the user 3 was unlinked from the author 2
+      When the user 3 creates an article
+      Then the article has no authors
+
+  Rule: Deleting an author
+
+    Scenario: An author without articles is deleted
+      Given the author 2 credits no article
+      When the owner sends DELETE /v1/author/2
+      Then the status is 204
+      And the author 2 no longer exists
+
+    Scenario: An author with articles needs a destination
+      Given the author 2 is credited on 3 articles
+      When the owner sends DELETE /v1/author/2
+      Then the status is 409
+      And the body is "author_has_articles"
+      And the author and the 3 credits are unchanged
+
+    Scenario: The articles are reassigned to another author
+      Given the author 2 is credited on the articles 10, 11 and 12 and the author 3 exists
+      When the owner sends DELETE /v1/author/2?reassign_to=3
+      Then the status is 204
+      And the articles 10, 11 and 12 credit the author 3
+      And the author 2 no longer exists
+
+    Scenario: The reassigned author takes the position of the deleted one
+      Given the article 10 credits the authors 5, 2, 6 in that order
+      When the owner deletes the author 2 with reassign_to=3
+      Then the article 10 credits 5, 3, 6 in that order
+
+    Scenario: A reassignment never duplicates an author on an article
+      Given the article 10 credits the authors 2 then 3
+      When the owner deletes the author 2 with reassign_to=3
+      Then the article 10 credits only the author 3
+
+    Scenario: Nobody removes the byline
+      Given the article 10 credits only the author 2
+      When the owner sends DELETE /v1/author/2?reassign_to=none
+      Then the status is 204
+      And the article 10 has no authors
+      And the article 10 still exists, unchanged otherwise
+
+    Scenario: Only the deleted author is removed from a shared article
+      Given the article 11 credits the authors 5, 2, 6 in that order
+      When the owner sends DELETE /v1/author/2?reassign_to=none
+      Then the article 11 credits 5, 6 in that order
+
+    Scenario: Reassign and delete are all-or-nothing
+      Given the repository fails while deleting the author 2
+      When the owner sends DELETE /v1/author/2?reassign_to=3
+      Then the credits of the author 2 are unchanged
+      And the author 2 still exists
+
+    Scenario: The credits are moved by one repository operation
+      When the owner deletes an author with articles and a valid reassign_to
+      Then the use case calls a single repository operation that moves the credits and deletes the author
+
+    Scenario Outline: An unusable destination
+      Given the author 2 is credited on 3 articles
+      When the owner sends DELETE /v1/author/2?reassign_to=<reassign_to>
+      Then the status is <status>
+      And the body is "<body>"
+      And nothing changed
+
+      Examples:
+        | reassign_to | status | body             |
+        | 999         | 404    | author_not_found |
+        | 2           | 400    | invalid_reassign |
+        | abc         | 400    | invalid_reassign |
+        | -1          | 400    | invalid_reassign |
+        | (empty)     | 400    | invalid_reassign |
+
+    Scenario: A linked author can be deleted and the account is untouched
+      Given the author 2 is linked to the user 3 and credits no article
+      When the owner deletes the author 2
+      Then the user 3 still exists and can create an author again
+
+    Scenario: A missing author is not found
+      When the owner sends DELETE /v1/author/999
+      Then the status is 404
+      And the body is "author_not_found"
+
+    Scenario: An unused reassign_to is ignored
+      Given the author 2 credits no article
+      When the owner sends DELETE /v1/author/2?reassign_to=3
+      Then the status is 204
+      And the author 3 is unchanged
+
+    Scenario Outline: Other roles and keys cannot delete
+      When DELETE /v1/author/2 is sent with <credentials>
+      Then the status is 403
+      And the body is "<body>"
+      And no author changed
+
+      Examples:
+        | credentials                          | body                              |
+        | a verified account with another role | Only owners and admins can do this. |
+        | a valid API key                      | This action needs a real session. |
+
+    Scenario: A role without author rights cannot delete its own author
+      Given the account is linked to the author 4
+      When it sends DELETE /v1/author/4
+      Then the status is 403 with body "Only owners and admins can do this."
+
+    Scenario: An admin can delete
+      When a verified admin sends DELETE /v1/author/2 on an author without articles
+      Then the status is 204
+
+  Rule: Only owner and admin write other people's authors
+
+    Scenario Outline: Refused writes change nothing
+      When <request> is sent with <credentials>
+      Then the status is 403
+      And the body is "<body>"
+      And no author changed
+
+      Examples:
+        | request                | credentials                          | body                                |
+        | POST /v1/author/       | a verified account with another role | Only owners and admins can do this. |
+        | POST /v1/author/       | a valid API key                      | This action needs a real session.   |
+        | PATCH /v1/author/2     | a verified account with another role | author_rights                       |
+
+  Rule: Articles credit authors in order
+
+    Scenario: An article is credited with ordered authors
+      Given the authors 5, 6, 7 exist and the article 8 has none
+      When the user sends PATCH /v1/article/8 with {"author_ids": [6, 5, 7]}
+      Then the status is 200
+      And the article body's authors are 6, 5, 7 in that order
+      And the first is the primary byline
+
+    Scenario: The author list is replaced and can be emptied
+      Given the article 8 credits 5, 6
+      When the user sends PATCH /v1/article/8 with {"author_ids": [6]}
+      Then the article 8 credits only 6
+      When the user sends PATCH /v1/article/8 with {"author_ids": []}
+      Then the article 8 has authors []
+
+    Scenario: Reordering changes the positions
+      Given the article 8 credits 5, 6, 7
+      When the user sends PATCH /v1/article/8 with {"author_ids": [7, 5, 6]}
+      Then GET /v1/article/8 lists the authors 7, 5, 6
+
+    Scenario Outline: Any account that can edit the article sets its authors
+      When PATCH /v1/article/8 is sent with {"author_ids": [5]} and <credentials>
+      Then the status is 200
+
+      Examples:
+        | credentials                          |
+        | the owner's jwt cookie               |
+        | a verified admin's jwt cookie        |
+        | a verified account with another role |
+        | a valid API key                      |
+
+    Scenario: The authors and the other fields change together
+      When the user sends PATCH /v1/article/8 with {"body": "New", "site_id": 2, "author_ids": [5]}
+      Then the body, the site_id and the authors are all updated
+
+    Scenario: An update without author_ids keeps the authors
+      Given the article 8 credits 5, 6
+      When the user sends PATCH /v1/article/8 with {"body": "New"}
+      Then the article 8 still credits 5, 6 in that order
+
+    Scenario Outline: An unusable author_ids is refused
+      When the user sends PATCH /v1/article/8 with {"author_ids": <value>}
+      Then the status is <status>
+      And the body is "<body>"
+      And the article is unchanged
+
+      Examples:
+        | value        | status | body                    |
+        | [999]        | 404    | author_not_found        |
+        | [5, 999]     | 404    | author_not_found        |
+        | [5, 5]       | 400    | apperr.BodyErrorMessage |
+        | null         | 400    | apperr.BodyErrorMessage |
+        | "a"          | 400    | apperr.BodyErrorMessage |
+        | [-1]         | 400    | apperr.BodyErrorMessage |
+        | [0]          | 400    | the validator error text |
+
+    Scenario: A refused update changes no authors
+      Given the article 8 credits 5
+      When the user sends PATCH /v1/article/8 with {"body": "New", "author_ids": [999]}
+      Then the status is 404
+      And the article 8 body is unchanged and it still credits 5
+
+    Scenario: An unchanged list records nothing
+      Given the article 8 credits 5, 6
+      When the user sends PATCH /v1/article/8 with {"author_ids": [5, 6]}
+      Then the status is 200
+      And no activity event is recorded
+
+    Scenario: An article without authors can be published
+      Given the article 8 has no authors and is offline
+      When the user sends PATCH /v1/article/8/publish
+      Then the status is 200
+      And the article is online
+
+    Scenario Outline: Article reads carry the ordered authors
+      Given the article 8 credits the authors 6 then 5
+      When <request> is sent
+      Then the article in the response has "authors" listing 6 then 5 with only id, name, slug, bio, avatar_id, website and social_links
+
+      Examples:
+        | request                               |
+        | GET /v1/article/8                     |
+        | GET /v1/article/ (each item of items) |
+        | POST /v1/article                      |
+        | PATCH /v1/article/8                   |
+        | PATCH /v1/article/8/publish           |
+        | PATCH /v1/article/8/unpublish         |
+
+    Scenario: An article without authors returns an empty list
+      When GET /v1/article/8 is sent on an article with no authors
+      Then "authors" is []
+
+    Scenario: Anonymous readers see the authors of online articles
+      Given the article 9 is online and credits the linked author 5
+      When a caller without credentials sends GET /v1/article/9
+      Then the authors are returned
+      And the body has no user_id, no user_email and no article_count in any author
+
+    Scenario: An offline article is still not found publicly
+      When a caller without a verified account sends GET /v1/article/{offline id}
+      Then the status is 404 with body "Article not found"
+
+    Scenario: A new article defaults to the creator's author
+      Given the caller is linked to the author 5
+      When it sends POST /v1/article with {"title": "Spring release", "body": "Hello"}
+      Then the article is offline
+      And its authors are [5]
+
+    Scenario: A creator without an author creates an article without authors
+      Given the caller has no author
+      When it sends POST /v1/article with {"title": "Spring release", "body": "Hello"}
+      Then its authors are []
+
+    Scenario: Deleting an article removes its credits and keeps the author
+      Given the article 8 credits the author 5, who credits 2 articles
+      When the article 8 is deleted
+      Then the author 5 still exists with article_count 1
+
+    Scenario: article_count counts offline articles too
+      Given the author 5 credits one online and one offline article
+      Then the author 5 has article_count 2
+
+    Scenario: The list filter and counts are unaffected
+      When GET /v1/article/?status=online&q=spring is sent
+      Then the items and counts are as before this slice, with authors on each item
+
+  Rule: The current user carries the linked author
+
+    Scenario: GET /v1/auth/me includes the linked author
+      Given the caller is linked to the author 5
+      When GET /v1/auth/me is sent
+      Then the body has the existing user fields and "author" holding the author 5 (id, name, slug, bio, avatar_id, website, social_links, article_count) with no user_email
+
+    Scenario: A user without an author has author null
+      When GET /v1/auth/me is sent by an account without an author
+      Then "author" is null
+
+    Scenario: The field follows link changes
+      Given the caller was unlinked by an admin
+      When GET /v1/auth/me is sent
+      Then "author" is null
+
+    Scenario: The existing fields are unchanged
+      When GET /v1/auth/me is sent
+      Then the body still has id, username, email, is_verified, created_at, updated_at, display_name and role
+      And no password, token or code is present
+
+    Scenario: An API key reads the same body
+      When GET /v1/auth/me is sent with a valid API key
+      Then "author" is present as for a session
+
+  Rule: Media usage by avatars
+
+    Scenario: An image used as an avatar is counted as used
+      Given the image 5 is the avatar of the author 2 and appears in no article or site
+      When a verified account looks up the usage of the image 5
+      Then used_in counts the author and the image is not "Unused"
+
+    Scenario: The media list counts the author
+      Given the image 5 is used by an article, a site and an author
+      When a verified account sends GET /v1/media/
+      Then the used_in of the image 5 is 3
+
+    Scenario: Deleting the image clears the author's avatar
+      When the owner deletes the image 5
+      Then the status is 204
+      And the author 2 has avatar_id null
+
+    Scenario: Merging copies repoints the author
+      Given the image 6 is a copy of the image 5 and the author 2 uses the image 6
+      When the copies are merged into the image 5
+      Then the author 2 has avatar_id 5
+      And the merge response reports authors_updated 1
+
+    Scenario: Purge repoints authors the same way
+      Given a purge group whose kept image is 5 and whose duplicate 6 is used by the author 2
+      When the purge runs
+      Then the author 2 has avatar_id 5
+      And the purge result reports authors_updated 1
+
+    Scenario: A failed purge group leaves the author pointing at an existing image
+      Given the purge of a group fails midway
+      Then every author avatar_id refers to an image that still exists
+
+    Scenario: The usage lookup stays an array and later gains additive keys
+      When a verified account looks up the usage of an image
+      Then the response is a JSON array whose article items keep id, title and published
+      And features/seo_data_backend.feature adds type and fields to every item and lists authors and sites, without removing any key
+
+  Rule: Every author write is recorded in the activity log
+
+    Scenario Outline: A successful write is recorded once after the change
+      When <actor> performs <request>
+      Then one event exists with action "<action>", category "authors", target {"type": "author", "id": "<id>", "name": "<name>"}, outcome "success", actor <actor> and source "web"
+      And the event was recorded after the change was applied
+
+      Examples:
+        | actor      | request                                            | action        | id | name          |
+        | the owner  | POST /v1/author/ for "Camille Roche"               | author.create | 2  | Camille Roche |
+        | the caller | POST /v1/author/me for "Marta Alves"               | author.create | 3  | Marta Alves   |
+        | the owner  | PATCH /v1/author/2 renaming it                     | author.edit   | 2  | Camille R.    |
+        | the owner  | PATCH /v1/author/2 linking the user "marta"        | author.edit   | 2  | Camille R.    |
+        | the owner  | DELETE /v1/author/2                                | author.delete | 2  | Camille R.    |
+
+    Scenario: The change fields are limited and carry no email
+      When the owner edits an author's name, slug, bio, website, social links, avatar and linked user
+      Then the changes use only the fields name, slug, bio, website, social_links, avatar and user
+      And the user change holds usernames, never an email
+
+    Scenario: An own-author edit by a role without author rights is recorded
+      When the account with another role edits its own author
+      Then one event "author.edit" exists with that account as actor
+
+    Scenario Outline: A refused write is recorded as failed with a plain reason
+      When the actor performs <request> which is refused with <code>
+      Then one event exists with action "<action>", outcome "failed" and failure_reason "<reason>"
+
+      Examples:
+        | request                                   | code                 | action        | reason                                                |
+        | POST /v1/author/ with a taken slug        | author_slug_taken    | author.create | That slug is already used by another author.          |
+        | POST /v1/author/me by a linked caller     | user_already_linked  | author.create | That user already has an author.                      |
+        | PATCH /v1/author/2 with a taken slug      | author_slug_taken    | author.edit   | That slug is already used by another author.          |
+        | PATCH /v1/author/2 linking a linked user  | user_already_linked  | author.edit   | That user already has an author.                      |
+        | PATCH /v1/author/2 by a non-admin on it   | author_rights        | author.edit   | Only an owner or admin can change this author.        |
+        | DELETE /v1/author/2 with articles         | author_has_articles  | author.delete | The author is still credited on articles.             |
+        | DELETE /v1/author/2 reassigned to itself  | invalid_reassign     | author.delete | The destination author is not valid.                  |
+        | POST /v1/author/ when the repository fails with "db is locked" | 500 | author.create | Something went wrong on our side. Please try again. |
+        | DELETE /v1/author/2 when the repository fails | 500             | author.delete | Something went wrong on our side. Please try again. |
+
+    Scenario Outline: Nothing is recorded when there is nothing to attribute
+      When <request> is sent
+      Then no activity event is recorded
+
+      Examples:
+        | request                                                 |
+        | PATCH /v1/author/999 as the owner                       |
+        | DELETE /v1/author/999 as the owner                      |
+        | POST /v1/author/ with an unknown avatar (image_not_found) |
+        | POST /v1/author/ with a bio over 280 characters         |
+        | POST /v1/author/ as a role without author rights (403)  |
+        | POST /v1/author/ with no credentials (401)              |
+        | PATCH /v1/author/abc as the owner                       |
+        | POST /v1/author/ with a malformed body                  |
+
+    Scenario: A failing audit repository never changes the response
+      Given the audit repository fails on Append
+      When the owner sends POST /v1/author/ with valid values
+      Then the response equals that of a healthy repository
+      And the author was created
+
+    Scenario: Reads are never recorded
+      When GET /v1/author/ is sent
+      Then no activity event is recorded
+
+    Scenario: An article's authors change is recorded in article.edit
+      Given the article 8 "Spring release" credits "Inès Duarte" and "Marta Alves"
+      When the user sends PATCH /v1/article/8 with {"author_ids": [Marta, Inès, Zoe]}
+      Then one event "article.edit" exists with changes [{"field": "authors", "from": "Inès Duarte, Marta Alves", "to": "Marta Alves, Inès Duarte, Zoe Lambert"}]
+
+    Scenario: Deleting an author with reassignment records only the author event
+      When the owner deletes the author 2 with reassign_to=3 on 3 articles
+      Then exactly one event "author.delete" exists
+      And no "article.edit" event exists
+
+    Scenario: The activity API lists author events
+      Given author events were recorded
+      When a verified account sends GET /v1/activity/?category=authors
+      Then the author events are returned with category "authors" and no other category
+
+  Rule: Persistence and migration
+
+    Scenario: The new tables are migrated
+      When database.Migrate runs on an empty database
+      Then the authors and article_authors tables exist
+      And the authors table has unique indexes on slug and on user_id, where many NULL user_id values are allowed
+      And article_authors has a unique pair (article_id, author_id) and a position
+
+    Scenario: Existing articles get no authors
+      Given a database from before this slice holding 4 articles
+      When database.Migrate runs
+      Then all 4 articles have no authors and no author is created
+
+    Scenario: It works on every database driver
+      When the repository contract suite runs
+      Then the author repository behaves the same on SQLite, MySQL and PostgreSQL
+      And the SQLite schema test accounts for the new tables
+
+    Scenario: Order is stable
+      Given the article 8 credits 7, 5, 6
+      When it is read back from the repository
+      Then the authors come back as 7, 5, 6
+
+  Rule: Total in X-Total-Count
+
+    Background:
+      Given GET /v1/author/ keeps its {"items","total","page","size"} body and also sends total in the X-Total-Count header on every 200
+      And the header equals the body total
+      And X-Total-Count is already in the CORS ExposedHeaders
+      And a refused request sends no X-Total-Count
+
+    Scenario: The total is also sent as a header
+      Given 30 authors
+      When a verified account sends GET /v1/author/?size=5
+      Then the body total is 30 and the header X-Total-Count is "30"
+
+    Scenario: The header follows the search
+      Given 30 authors of which 7 match "mar"
+      When a verified account sends GET /v1/author/?q=mar
+      Then X-Total-Count is "7" and the body total is 7
+
+    Scenario: A page past the end keeps the total in the header
+      Given 30 authors
+      When a verified account sends GET /v1/author/?page=3&size=100
+      Then items is [], the body total is 30 and X-Total-Count is "30"
+
+    Scenario: No match
+      When a verified account sends GET /v1/author/?q=nobody
+      Then items is [], the body total is 0 and X-Total-Count is "0"
+
+    Scenario Outline: Every reader gets the header
+      When GET /v1/author/ is sent with <credentials>
+      Then the status is 200 and X-Total-Count equals the body total
+
+      Examples:
+        | credentials                          |
+        | the owner's jwt cookie               |
+        | a verified admin's jwt cookie        |
+        | a verified account with another role |
+        | a valid API key                      |
+
+    Scenario Outline: Refused requests send no header
+      When GET /v1/author/?<params> is sent with <credentials>
+      Then the status is <status> and no X-Total-Count is sent
+
+      Examples:
+        | params   | credentials                        | status |
+        | size=30  | a verified account                 | 400    |
+        | page=0   | a verified account                 | 400    |
+        | page=abc | a verified account                 | 400    |
+        |          | an unverified account's jwt cookie | 403    |
+        |          | no credentials                     | 401    |
+
+    Scenario: CORS exposes the header
+      Given CORS_ALLOWED_ORIGINS includes "https://app.example.com"
+      When a preflighted GET /v1/author/ comes from that origin
+      Then Access-Control-Expose-Headers lists X-Total-Count
+
+  Rule: Documentation
+
+    Scenario: The docs describe the new surface
+      Then docs/api.md names X-Total-Count on the GET /v1/author/ row
+      And docs/api.md documents the /v1/author routes with auth and roles, the error tokens, the author shape, article author_ids and authors, the author field of /v1/auth/me and the authors_updated media field
+      And docs/architecture.md mentions the author aggregate, its repository and its use cases

features/authors_backend.qa.md

@@ -0,0 +1,118 @@
+# QA procedure: Authors backend
+
+Spec: `features/authors_backend.feature`. Go tests only, in `test/` (package `test`), run with `task test`. No live server, no real SMTP, no real SQLite file outside the temp-dir repository-contract harness. Call `validator.InitValidator()` before any handler call. Every error assertion compares the plain-text body to the exact code token or constant named in the spec.
+
+## Setup
+
+- New files `test/author_*_test.go`. Fakes have unique names: `mockAuthorRepo` (authors, slug and user_id uniqueness, article counts, ordered article credits, the reassign-and-delete as one recorded operation, failure and unique-violation injection), `mockAuthorUserRepo` (users with ids, usernames, display names, emails and roles), `mockAuthorImageRepo` (images, avatar usage, merge and purge repointing), and an extended `mockArticleRepo` (ordered author credits, create with default author, delete removes credits). A fake audit repository with fail and panic switches is reused.
+- Routers mirror `api/router.go`: a new `NewAuthorRouter`, plus the article, auth (`/me`), media and activity routers. Protected routes sit behind `jwtauth.Verifier` + `jwtauth.Authenticator` with a test `jwtauth.New("HS256", ...)`. Requests carry signed `jwt` cookies with the `user_id` claim for: an owner, an admin, a verified account whose role is `"editor"` (a value other than owner or admin, because no third role exists yet), and an unverified account. An API-key request uses the key authentication path.
+- Helper builders create authors, link users and credit articles directly in the fakes; assertions read the fakes, never the JSON alone.
+
+## A. Reading
+
+1. Newest-first list with `total`, `page`, `size` and `article_count`.
+2. Credentials table: owner, admin, "editor" and API key give 200; unverified gives 403; none gives 401.
+3. `q` table: name, slug, case-insensitive, no match gives total 0.
+4. Pagination table: page 2 of 30, size 5, out-of-range page gives empty items, `size=30`, `page=0`, `page=abc` give 400 `apperr.BodyErrorMessage`.
+5. Email visibility: owner and admin see `user_email`; "editor" gets a body without any `user_email` key or the email string (substring check on the raw body).
+6. Guest author: `is_linked` false, `user_id` null. Null and empty defaults for avatar, website, bio, links.
+
+## B. Creating
+
+7. Owner and admin create: 201, full body, stored, `article_count` 0, `is_linked` false.
+8. Only the name given: generated slug, defaults.
+9. Slug generation table (accents folded, punctuation runs, `!!!` gives `author`).
+10. Generated and explicit taken slug: 409 `author_slug_taken`, nothing stored. Repository unique-violation injection gives the same 409.
+11. Validation table (name, slug, bio, website, links, link type, avatar) with exact status and token; 422 rows assert the token; boundary table (100-character name and slug, 280 characters and 280 multi-byte characters, 5 links, two custom links, empty website).
+12. Malformed JSON gives 400 `apperr.BodyErrorMessage`; "editor" with malformed JSON still gets 403 "Only owners and admins can do this.".
+13. `user_id` on create: success, 404 `user_not_found`, 409 `user_already_linked`.
+
+## C. Own author (`POST /me`)
+
+14. Naming table: display name, then username fallback; `user_id` is the caller's; `is_linked` true.
+15. Owner, admin and "editor" all get 201.
+16. Slug de-duplication: `marta-alves-2` taken, result `-3`; the 100-character slug case stays within 100 and ends with `-2`.
+17. Already linked: 409 `user_already_linked`, nothing added; unique-violation injection on `user_id` gives the same 409.
+18. API key gives 403 "This action needs a real session."; unverified gives the existing 403; none gives 401.
+
+## D. Editing
+
+19. Full edit by owner; partial edit keeps absent fields; nullable clear table (avatar, website null and "", links [], bio "").
+20. Avatar set; social links replaced as a whole.
+21. Validation table like creation; own slug re-sent is 200; another author's slug is 409; unchanged author after each refusal.
+22. `{}`, unknown-only and `{"name": null}` give 400 `apperr.BodyErrorMessage`; missing author 404 `author_not_found`; `abc` id gives `apperr.IdUint32ErrorMessage`.
+23. No-op edit: 200 and no audit event.
+24. "editor" table: own author 200 (also name, slug, avatar, links); another author 403 `author_rights`; missing id 404; `user_id` in the body of its own author 403 `author_rights` and still linked; API key gives 403 "This action needs a real session."
+
+## E. Linking and unlinking
+
+25. Link a guest author: 200, `user_email` visible to the owner.
+26. Table: linked user gives 409 `user_already_linked`; already-linked author gives 409 `author_already_linked`; same user is a 200 with no event; unknown user gives 404 `user_not_found`.
+27. Unlink: 200, `is_linked` false, no `user_email`; the user can create an author again; the author keeps its article credits; unlinking a guest is a no-op with no event.
+28. After unlinking, an article created by that user has no authors.
+
+## F. Deleting
+
+29. No articles: 204. With articles and no `reassign_to`: 409 `author_has_articles`, unchanged.
+30. Reassign: credits move, author gone; position is preserved (5, 2, 6 becomes 5, 3, 6); no duplicate when the target already credits the article (2, 3 becomes 3).
+31. `none`: only that author is removed from shared articles, order of the rest is kept; articles with only that author end with none and still exist.
+32. Single repository operation (the fake records one call). Failure injected in it leaves credits and author unchanged.
+33. `reassign_to` table: 999 gives 404 `author_not_found`; own id, `abc`, `-1`, empty give 400 `invalid_reassign`. Unused valid `reassign_to` on an author without articles gives 204 and leaves the destination untouched. Missing author gives 404.
+34. Linked author deleted: user still exists and can create again.
+35. Refusals: "editor" gives 403 "Only owners and admins can do this." including on its own author; API key gives 403 "This action needs a real session."; admin gives 204.
+
+## G. Articles
+
+36. `author_ids` PATCH sets, replaces, empties and reorders; reads (GET one, GET list, POST, PATCH, publish, unpublish) carry `authors` in order with only the seven public fields; empty is `[]`.
+37. Callers table: owner, admin, "editor", API key all give 200.
+38. Combined PATCH with `body` and `site_id`; omission keeps the authors; a refused `author_ids` (404) leaves body and credits unchanged.
+39. Unusable table: `[999]`, `[5,999]` 404 `author_not_found`; `[5,5]`, `null`, `"a"`, `[-1]` give 400 `apperr.BodyErrorMessage`; `[0]` gives the validator error text. The article is unchanged in every case.
+40. Unchanged list is 200 with no event. Publishing an article with no authors succeeds.
+41. Anonymous read of an online article includes `authors` but no `user_id`, `user_email` or `article_count` (substring check); an offline article is 404 "Article not found".
+42. Creation default: creator with a linked author gets `[author]`; creator without one gets `[]`; the article is offline.
+43. Deleting an article removes its credits and keeps the author, `article_count` drops; `article_count` counts offline articles.
+44. List filters (`status`, `q`, `site`) and `counts` are unchanged apart from `authors` on each item.
+
+## H. Current user
+
+45. `/v1/auth/me` returns `author` for a linked caller (seven public fields plus `article_count`, no `user_email`) and null otherwise, null again after an unlink; existing fields are unchanged and no secret appears; API key request returns the same shape.
+
+## I. Media
+
+46. Usage lookup counts an avatar, stays a JSON array whose article items keep id, title and published (additive keys are specified in seo_data_backend), image not "Unused". Media list `used_in` sums article, site and author usage.
+47. Deleting the image (204) nulls `avatar_id`.
+48. Merge repoints authors and reports `authors_updated`; purge does the same; a failed purge group leaves every `avatar_id` pointing at an existing image.
+
+## J. Activity log
+
+49. Success table: one event per write with action, category "authors", target type "author", actor, source "web", recorded after the change (including `/me`).
+50. Change fields are limited to name, slug, bio, website, social_links, avatar, user; the user change shows usernames and no email (substring check on the stored event).
+51. Failed table with the plain reasons; unknown ids, 403, 401, 422 and other validation refusals and malformed requests record nothing; reads record nothing.
+52. Failing and panicking audit repository leave the response and the change as with a healthy one.
+53. `article.edit` with an authors change holds `{"field":"authors","from":"Inès Duarte, Marta Alves","to":"Marta Alves, Inès Duarte, Zoe Lambert"}`; delete with reassignment records one `author.delete` and no `article.edit`.
+54. `GET /v1/activity/?category=authors` returns only author events for a verified session (an API key gets the route's existing session refusal). Failure reasons use the style of `auditFailures.go`: the author sentinels map to the plain sentences of the feature and any other error gives `GenericFailureReason`.
+
+## K. Persistence and migration
+
+55. Repository-contract harness (temp-dir SQLite; MySQL and Postgres opt-in through the existing env switches): author repository contract (CRUD, slug and user uniqueness with many NULL users, search, newest-first pagination, ordered credits and stable read-back, unique (article, author) pair, transactional reassign-and-delete incl. the no-duplicate and position rules). `database.Migrate` creates both tables and leaves existing articles without authors; `test/sqlite_schema_unchanged_test.go` is updated for the new tables.
+
+## L. Quality gates
+
+56. Layering guard: use cases import no persistence, mailer, models, gorm, net/http or chi; the domain author package imports no GORM or HTTP; handlers import no persistence; validation uses validate tags and `validator.Validate.Struct`; no comments added.
+57. Scoped mutation run through `task mutate` only, for example `MUTATE_FILES=<author and article use case files> MUTATE_RUN='TestAuthor' MUTATE_WORKERS=2 task mutate -- <use case package path>`; report LIVED and NOT COVERED mutants; re-check filtered suspects without `MUTATE_RUN`. Also run `task lint:go` and `task fmt`.
+58. Docs, checked by reading the files: docs/api.md documents the five /v1/author routes (GET, POST, POST /me, PATCH, DELETE) with auth and roles, error tokens, the author and article-author shapes, `author_ids`, the `/auth/me` `author` field and `authors_updated`; docs/architecture.md names the author aggregate, repository and use cases.
+
+## M. X-Total-Count (Go, `test/`, `task test`)
+
+59. On the same `mockAuthorRepo` and router as item 4, assert `X-Total-Count` equals the decoded body `total` for: size=5 of 30, `q=mar` with 7 matches, `page=3&size=100` (items empty, total 30), `q=nobody` (0), and for owner, admin, "editor" and API key. Assert the header is absent for `size=30`, `page=0`, `page=abc`, unverified (403) and none (401). The body assertions of item 4 stay unchanged.
+60. On the SQLite contract harness, the author list total (and so the header) follows `q` and does not depend on `page`/`size`; `task test:mysql` and `task test:postgres` run the same case.
+61. CORS preflight from an allowed origin exposes `X-Total-Count`.
+62. Scoped `task mutate` on the author list use case and handler files only. `docs/api.md` author row and `web/src/data/apiCatalogue.ts` (`X-Total-Count` response header on `GET /v1/author/`) with its spec, read by hand. No comment added.
+
+## Manual
+
+- MySQL and Postgres: run the contract suite with the opt-in env vars against real servers.
+- Real boot with an old database copy: both new tables appear, articles keep working with no authors, second boot changes nothing.
+- Docker with the `/data` volume: same boot check.
+- Read the activity log screen and the CSV export: author events show names, failure reasons and no emails.
+- Not covered here: the SPA (later slices).

features/document_title.feature

@@ -0,0 +1,109 @@
+Feature: Browser tab title names the current page
+
+  Background:
+    Given the SPA is mounted with its router
+    And the tab title format is "<page> · RenewCMS" for a page that has a name
+    And the tab title is just "RenewCMS" when the current page has no name at all
+    And page names are translated to the interface language
+    And the title is set in one place for the whole SPA, not by each screen
+    And no /v1 call is made only to set the title
+
+  Scenario Outline: Back-office pages show their name
+    Given a signed-in verified user
+    When the user navigates to <path>
+    Then the tab title is "<title>"
+
+    Examples:
+      | path                     | title                  |
+      | /home                    | Home · RenewCMS        |
+      | /article                 | Articles · RenewCMS    |
+      | /article/new             | Articles · RenewCMS    |
+      | /media                   | Media · RenewCMS       |
+      | /users                   | Users · RenewCMS       |
+      | /activity                | Activity · RenewCMS    |
+      | /profile                 | Profile · RenewCMS     |
+      | /integration             | Integration · RenewCMS |
+      | /integration/api-keys    | Integration · RenewCMS |
+      | /settings                | Settings · RenewCMS    |
+      | /settings/media/variants | Settings · RenewCMS    |
+      | /settings/media/cache    | Settings · RenewCMS    |
+
+  Scenario Outline: Auth pages show the card heading they display
+    Given a signed-out visitor
+    When the visitor navigates to <path>
+    Then the tab title is "<title>"
+
+    Examples:
+      | path                                             | title                              |
+      | /login                                           | Log in · RenewCMS                  |
+      | /register                                        | Create the owner account · RenewCMS |
+      | /register/pending                                | Check your email · RenewCMS        |
+      | /register/reset/request                          | Reset your password · RenewCMS     |
+      | /register/reset/validate?c=CODE&email=EMAIL      | Choose a new password · RenewCMS   |
+      | /invite/accept?c=CODE                            | Accept your invite · RenewCMS      |
+      | /register/validate?c=CODE without a session      | Log in to finish verifying · RenewCMS |
+
+  Scenario: An auth card with no heading uses the product name
+    Given the verify screen is verifying a code and its card shows no heading
+    Then the tab title is "RenewCMS"
+
+  Scenario: Auth card heading changes inside one route
+    Given an auth screen whose card heading changes between states
+    When the card heading changes
+    Then the tab title follows the new card heading
+
+  Scenario: Title updates when the page changes
+    Given a signed-in verified user on /home with the tab title "Home · RenewCMS"
+    When the user navigates to /media
+    Then the tab title is "Media · RenewCMS"
+    When the user navigates back to /home
+    Then the tab title is "Home · RenewCMS"
+
+  Scenario: Leaving the login screen does not leave "Log in" stuck
+    Given a signed-out visitor on /login with the tab title "Log in · RenewCMS"
+    When the visitor logs in successfully and is redirected to /home
+    Then the tab title is "Home · RenewCMS"
+
+  Scenario: Logging out does not keep the back-office title
+    Given a signed-in verified user on /settings
+    When the user logs out and is sent to /login
+    Then the tab title is "Log in · RenewCMS"
+
+  Scenario: Editor tab shows the article's own title once loaded
+    Given a signed-in verified user
+    When the user opens /article/42/edit and the article is still loading
+    Then the tab title is "Editor · RenewCMS"
+    When the article "Hello world" has loaded
+    Then the tab title is "Hello world · RenewCMS"
+
+  Scenario: Editor tab follows the saved article title
+    Given the user is editing the article "Hello world" at /article/42/edit
+    When the article title is saved as "Hello again"
+    Then the tab title is "Hello again · RenewCMS"
+
+  Scenario Outline: Editor tab falls back to "Editor"
+    Given a signed-in verified user
+    When the user opens /article/42/edit and <situation>
+    Then the tab title is "Editor · RenewCMS"
+
+    Examples:
+      | situation                            |
+      | the article fails to load            |
+      | the article has an empty title       |
+
+  Scenario: Leaving the editor drops the article title
+    Given the user is on /article/42/edit with the tab title "Hello world · RenewCMS"
+    When the user navigates to /article
+    Then the tab title is "Articles · RenewCMS"
+
+  Scenario: Not-found page
+    Given any user
+    When the user navigates to an unknown path
+    Then the tab title is "404 · RenewCMS"
+
+  Scenario: Title follows the interface language
+    Given the interface language is Français
+    When the user navigates to /media
+    Then the tab title is the French "Media" name followed by " · RenewCMS"
+    When the user switches the interface language to English
+    Then the tab title is "Media · RenewCMS" without a navigation

features/document_title.qa.md

@@ -0,0 +1,23 @@
+# QA: document title (SPA, Vitest only)
+
+## Automated (Vitest + Vue Test Utils, real route table, memory history, mocked /v1)
+Each test resets `document.title` to "" in `beforeEach`.
+
+1. Back-office rows: with `/v1` user mocked as signed in and verified, push each path from the first Examples table, await `router.isReady()`, assert `document.title`.
+2. Auth rows: with the session mocked as signed out (401), push each path of the auth Examples table and assert the title equals the card heading plus " · RenewCMS". For the verify noSession row, mock a verify attempt with no session.
+3. Verify with a code and no heading: assert `document.title === 'RenewCMS'`.
+4. Auth heading change: drive an auth screen through two states with different headings (e.g. reset request default to the incomplete/expired variant) and assert the title follows.
+5. Navigation sequence: /home, /media, /home, asserting after each push.
+6. Login redirect: from /login simulate a successful login so the guard redirects to /home; assert "Home · RenewCMS".
+7. Logout: from /settings trigger logout; assert "Log in · RenewCMS".
+8. Editor: mock GET article 42 with a pending promise, assert "Editor · RenewCMS"; resolve with title "Hello world", assert "Hello world · RenewCMS". Save with title "Hello again" and assert the update. Repeat with a failing GET and with an empty title, expecting "Editor · RenewCMS". Navigate to /article and assert "Articles · RenewCMS".
+9. Not found: push an unknown path, assert "404 · RenewCMS".
+10. Locale: set `fr`, push /media, assert the French name plus " · RenewCMS"; switch to `en` and assert "Media · RenewCMS" without a navigation.
+11. Update `web/src/components/__tests__/AuthShell.spec.ts` if its title expectations no longer hold once the title is set in one place.
+
+## Visual
+None. The tab title is not drawn on any board (skip: not-visual).
+
+## Manual
+- In a real browser, log in from /login and confirm the tab reads "Home · RenewCMS", then use the sidebar and the browser Back and Forward buttons and confirm the tab follows.
+- Open an article in the editor, edit its title, and confirm the tab and the history entry follow.

features/edit_article_body.feature

@@ -19,9 +19,9 @@ Feature: An authenticated user can edit an article's body
       DELETE /v1/article/{id}, PATCH /v1/article/{id}/publish and
       PATCH /v1/article/{id}/unpublish in api/router.go, so it also requires a valid
       jwt cookie
-    And the request body is JSON {"body": "..."}, validated with
-      validate:"required,max=10000" on the Body field, the same tag PostArticle.Body
-      already carries
+    And the request body is JSON {"body": "..."}; the Body field carries no validate tag
+      (no max, not required), as PostArticle.Body, per
+      features/article_body_unlimited.feature
     And a successful edit answers 200 with the JSON body of the updated article.Article,
       the same shape GetArticle, PostArticle, PublishArticle and UnpublishArticle
       already return; the article's title, is_online flag and images are unchanged
@@ -30,9 +30,8 @@ Feature: An authenticated user can edit an article's body
       PublishArticle and UnpublishArticle
     And a body that is not valid JSON answers 400 with body apperr.BodyErrorMessage,
       the same as PostArticle
-    And a body that fails its own required/max=10000 validation answers 400 with the
-      raw validator error text, the same as PostArticle already does for its own
-      fields; no new apperr message is introduced for this
+    And no body value fails validation: an empty or absent body and a body of any length
+      are accepted
     And an id absent from the article repository answers 404 with body
       apperr.ArticleNotFoundErrorMessage, backed by
       errors.Is(err, article.ErrArticleNotFound), the same as DeleteArticle,
@@ -84,11 +83,12 @@ Feature: An authenticated user can edit an article's body
     Then the response status is 400
     And the response body is the text apperr.BodyErrorMessage
 
-  Scenario Outline: A body value that fails validation answers 400
+  Scenario Outline: A body of any length, including empty, is accepted
     Given a valid jwt cookie for a user with id 1
     And the article repository contains an article with id 1
     When the client sends PATCH /v1/article/1 with that cookie and body <payload>
-    Then the response status is 400
+    Then the response status is 200
+    And the stored body equals the sent body
 
     Examples:
       | payload                              |

features/edit_article_body.qa.md

@@ -41,11 +41,10 @@ Package: `test` (black-box, extending `article_test.go`).
     string `not-json`), repo seeded with article id 1 -> status `400`, body matching
     `apperr.BodyErrorMessage + "\n"`.
 13. `PATCH /v1/article/1` with the valid cookie and JSON body `{"body": ""}`, repo
-    seeded with article id 1 -> status `400`; assert `repo.articles[1].Body` is
-    unchanged (nothing stored).
+    seeded with article id 1 -> status `200`; assert `repo.articles[1].Body` is `""`.
 14. `PATCH /v1/article/1` with the valid cookie and JSON body `{"body": "<10001-char
-    string>"}`, repo seeded with article id 1 -> status `400`; assert
-    `repo.articles[1].Body` is unchanged.
+    string>"}`, repo seeded with article id 1 -> status `200`; assert
+    `repo.articles[1].Body` equals the sent string.
 15. `PATCH /v1/article/1` with **no** cookie, repo seeded with article id 1 -> status
     `401`.
 

features/editor_core.feature

@@ -23,11 +23,11 @@ Feature: Editor screen — load, edit and save an article's body
       the article is a draft; clicking PublishControl itself is out of scope for this slice and
       is specified in a follow-on slice (editor_publish_and_delete)
     And Save is enabled only when useArticleDraft's state is "dirty", the request is not already
-      in flight, the app is not offline, and the body's HTML length is at most 10000 characters;
-      it is disabled in every other case
+      in flight, and the app is not offline, whatever the body's length; it is disabled in every
+      other case
     And Save (a click, or Ctrl/⌘ S) sends PATCH /v1/article/{id} with JSON {"body": "..."},
       the same contract features/edit_article_body.feature already gives the API: 200 with the
-      updated article.Article, 400 for a body over 10000 characters, 404 for an id absent from
+      updated article.Article (any body length, including empty), 404 for an id absent from
       the repository, 401 with no valid session
     And a successful save (200) sets useArticleDraft's state to "saved" and records the save
       time; SaveStatus shows "Saved at {HH:MM}" for the first hour and "Saved {n} min ago" after
@@ -43,11 +43,11 @@ Feature: Editor screen — load, edit and save an article's body
       (features/api_client_global_error_handling.feature): before the redirect, useArticleDraft
       mirrors the current dirty body to sessionStorage keyed by the article's id, so it survives
       the redirect to /login?redirect=/article/{id}/edit&reason=expired
-    And CharacterCounter shows "{len} / 10 000" below the editor, using the body's HTML string
-      length (formatting and images count); at 9000 characters or more (90%, "Near the limit")
-      it adds a warning icon and stays enabled; above 10000 ("Too long") it adds an icon and the
-      text "{over} characters over. Shorten the text or remove an image. Formatting counts too.",
-      and disables both Save and PublishControl until the length is 10000 or fewer again
+    And EditorStatusBar shows a neutral "{words} words · {characters} characters" count with
+      en-US thousands separators (e.g. "1,204 words · 7,318 characters", "0 words · 0 characters"
+      for an empty body); characters is the body's HTML string length, words are the
+      whitespace-separated tokens of its text content; the count has no limit, warning or error
+      styling, per features/article_body_unlimited.feature
     And a Preview switch, when on, replaces the editable ArticleEditor and its toolbar with a
       read-only rendering of the title and body in the content type scale; switching it off
       restores the editable surface with the same content, unchanged
@@ -93,7 +93,7 @@ Feature: Editor screen — load, edit and save an article's body
     And SaveStatus reads "Saved at 11:02"
     And the Save button is disabled
     And PublishControl reads "<publish_label>"
-    And the character counter reads "4 318 / 10 000"
+    And the count reads "{words} words · 4,318 characters"
 
     Examples:
       | is_online | badge  | publish_label |
@@ -161,22 +161,12 @@ Feature: Editor screen — load, edit and save an article's body
     Then a toast reads "That article no longer exists."
     And SaveStatus does not read "Save failed"
 
-  Scenario: Near the limit — the counter warns at 9000 characters without blocking Save
+  Scenario: A very long body keeps a neutral count and leaves Save and Publish enabled
     Given the user is on /article/12/edit with unsaved changes making the body's HTML length
-      9240 characters
-    Then the character counter reads "9 240 / 10 000" with a warning icon
-    And the Save button remains enabled
-
-  Scenario: Too long — over 10000 characters disables Save and Publish until shortened
-    Given the user is on /article/12/edit with unsaved changes making the body's HTML length
-      10214 characters
-    Then the character counter reads "10 214 / 10 000" with the text "214 characters over.
-      Shorten the text or remove an image. Formatting counts too."
-    And the Save button is disabled
-    And PublishControl is disabled
-    When the user shortens the body to 10000 characters or fewer
-    Then the character counter no longer shows the over-limit text
-    And the Save button is enabled again
+      120000 characters
+    Then the count reads "19,845 words · 120,000 characters" with no warning styling
+    And the Save button is enabled
+    And PublishControl is enabled
 
   Scenario: Preview shows the rendered title and body without the editing surface
     Given the user is on /article/12/edit, article titled "How we price a bathroom renovation"

features/editor_core.qa.md

@@ -35,7 +35,7 @@ Fixture article (reused across cases unless a scenario overrides a field): id 12
 2. **Saved state, draft and online** — Examples-driven on `is_online`: mock `GET
    /v1/article/12` resolving 200 with the fixture at each `is_online` value; assert the
    breadcrumb, ArticleStatusBadge ("Draft"/"Online"), SaveStatus "Saved at 11:02", Save
-   disabled, PublishControl ("Publish"/"Unpublish"), and character counter "4 318 / 10 000".
+   disabled, PublishControl ("Publish"/"Unpublish"), and the neutral count ending "4,318 characters".
 3. **Unsaved changes** — from the Saved state, type into the body; assert SaveStatus "Unsaved
    changes", Save enabled, PublishControl now "Save and publish".
 4. **Saving via click and via Ctrl/⌘ S** — from Unsaved changes, (a) click Save, (b) press
@@ -53,12 +53,10 @@ Fixture article (reused across cases unless a scenario overrides a field): id 12
 9. **404 on save shows a toast, not the error SaveStatus** — from Unsaved changes, save; resolve
    `PATCH` 404; assert a toast "That article no longer exists." appears and SaveStatus never
    reads "Save failed".
-10. **Near the limit** — set the body's HTML length to 9240 (via a fixture string of that
-    length); assert counter "9 240 / 10 000" with a warning icon and Save still enabled.
-11. **Too long** — set the body's HTML length to 10214; assert counter "10 214 / 10 000" with
-    "214 characters over. Shorten the text or remove an image. Formatting counts too.", Save
-    disabled, PublishControl disabled; shorten to 10000; assert both re-enable and the over-limit
-    text disappears.
+10. **Very long body** — set the body's HTML length to 120000 (via a fixture string of that
+    length); assert the count "19,845 words · 120,000 characters" with no warning styling, Save
+    and PublishControl enabled.
+11. **No limit states** — assert no "Near the limit" or "Too long" text is ever rendered.
 12. **Preview toggle** — from a loaded article with body content, switch Preview on; assert the
     toolbar and editable surface are gone and a read-only rendering of title+body appears;
     switch off; assert the editable surface returns with the same content.
@@ -97,12 +95,11 @@ reusing the sample data below and a fixed `now` of "2026-09-26T11:02:00Z" (updat
 
 - [ ] Loading: skeletons for title, content and details, shaped like the real layout.
 - [ ] Saved: breadcrumb, "Draft" badge, "Saved at 11:02", disabled Save, "Publish", counter
-      "4 318 / 10 000", details panel (Created/Updated/ID/Images/Public API URL).
+      "N words · 4,318 characters", details panel (Created/Updated/ID/Images/Public API URL).
 - [ ] Unsaved changes: "Unsaved changes" SaveStatus, enabled Save, "Save and publish".
 - [ ] Saving: "Saving…" SaveStatus, disabled Save.
 - [ ] Save failed: "Save failed" with Retry, per the SaveStatus error spec.
-- [ ] Near the limit: counter "9 240 / 10 000" with the warning icon/style.
-- [ ] Too long: counter "10 214 / 10 000" with the over-limit text and disabled Save/Publish.
+- [ ] Very long article: count "19,845 words · 120,000 characters", neutral, Save/Publish enabled.
 - [ ] Preview: read-only rendered title and body in the content scale, toolbar hidden.
 - [ ] Offline: SaveStatus shows the wifi-off icon and reads "Waiting for connection", disabled
       Save/Publish, OfflineBanner visible.

features/editor_image_upload.qa.md

@@ -4,8 +4,8 @@
 
 Mock `XMLHttpRequest` (a fake with `open`, `setRequestHeader`, `send`, `abort`, firing `upload.progress`, `load`, `error`) for `POST /v1/media/`. Mock useApi's `request` for `GET /v1/media/` (list and `?hash=`), reusing the mock from `api_client_global_error_handling.qa.md`. Stub `hashFile` where a hash is needed, and add one test with `crypto.subtle` deleted. Mount EditorPage inside DashboardShell at `/article/12/edit` with the `editor_core.qa.md` fixture article, GET already resolved 200. Assert URLs by parsing the query, not by string equality.
 
-1. **Toolbar button, empty library** - `GET /v1/media/?limit=24` resolves `{items: [], next_cursor: null, counts: {all: 0, unused: 0, duplicates: 0}}`; click "Image"; assert the dialog "Add an image", both tabs, the Upload tab selected, the drop zone copy, footer "Cancel" only, no XHR.
-2. **Drop opens Upload with the file** - dispatch `drop` with `before.png` (image/png, 3.9 MB); assert the Upload tab, a `?hash=` request, no `?limit=24` list request, then the crop step after an empty lookup, and no XHR.
+1. **Toolbar button, empty library** - `GET /v1/media/?page=1&size=25` resolves `{items: [], total: 0, page: 1, size: 25, counts: {all: 0, unused: 0, duplicates: 0}}`; click "Image"; assert the dialog "Add an image", both tabs, the Upload tab selected, the drop zone copy, footer "Cancel" only, no XHR.
+2. **Drop opens Upload with the file** - dispatch `drop` with `before.png` (image/png, 3.9 MB); assert the Upload tab, a `?hash=...&page=1&size=100` request, no `?page=1&size=25` list request, then the crop step after an empty lookup, and no XHR.
 3. **Dragging over shows "Drop to upload"**.
 4. **Rejected, Examples-driven** - `plan.pdf`, `disguised.png`, `north-wall.tif`; assert no `?hash=` request and no XHR, plus the exact title, text, confirm and cancel.
 5. **"Choose another file" returns to idle**, with the tabs back.

features/editor_insert_link.feature

@@ -0,0 +1,226 @@
+Feature: Inserting, editing and removing a link in the article body
+
+  As a verified RenewCMS owner writing an article
+  I want to turn text into a link from the toolbar or with Ctrl/Cmd+K, and to edit or remove it later
+  So that readers can follow references, and no link I add can run script
+
+  Background:
+    Given this slice is SPA only; no Go code, route or API contract changes
+    And the screen is /article/:id/edit (EditorPage in DashboardShell), per docs/design/screens/editor.md
+      rows 11 to 27, docs/design/components.md "Editor: link" and the Editor group of the board
+      "RenewCMS Screens Back-office.dc.html"; docs/design/README.md says "11 states" but all 17 rows are in scope
+    And a link change is a body edit only: it moves useArticleDraft to "dirty" ("Unsaved changes", Save enabled,
+      PublishControl "Save and publish" on a draft) and sends no request; the existing PATCH /v1/article/{id}
+      with {"body": "<html>"} saves it, unchanged
+    And the body stays Tiptap HTML, a link being <a href="...">; ArticleEditor keeps its props, events and
+      exposed focus, insertImage, imageSrc and removeImage
+    And the toolbar has a link button (icon i-lucide-link) after the list buttons, before "Clear formatting"
+      and "Image"; 28 px on desktop, 40 px on mobile; text colour --ui-text-toned
+    And Ctrl+K (Cmd+K on macOS) with the editor focused opens the same dialog as the button and prevents the
+      browser's own shortcut
+    And LinkModal is a dialog at desktop width and a bottom sheet at mobile width (viewport); fields "Link text"
+      and "URL", toggle "Open in new tab" (off by default) with the helper text "Links open in the same tab unless
+      you turn on a new tab."; title "Insert link" or "Edit link"; Cancel left, "Insert link" or "Save link" right;
+      in edit mode a text button "Remove link"
+    And a valid URL, after trimming, is http(s)://host..., mailto:address, a path with exactly one leading "/",
+      or #anchor; everything else fails with "Enter a valid URL. Use http(s), mailto, a path or #anchor."
+      (so javascript:, data:, vbscript:, file:, ftp:, tel:, //host, page.html and ../x are all invalid, in any
+      letter case, with leading whitespace, control characters or entity escapes)
+    And "Link text" must not be blank, else "Enter the link text."
+    And validation runs on submit, and on blur for the URL; an invalid submit inserts nothing, keeps the dialog
+      open and focuses the first invalid field
+    And "Open in new tab" writes target="_blank" rel="noopener noreferrer" on the anchor; off writes neither
+    And the link popover and its sheet follow the input type, not the width: a popover for a fine pointer, a bottom
+      sheet for pointer: coarse
+    And the popover is 288 px wide under the link: the URL in mono, then "Edit", "Open", "Remove" (error colour);
+      the sheet shows the link text, the URL and 48 px rows "Edit link", "Open link", "Remove link"
+    And Remove takes no confirmation and is undone by the editor's undo; Open opens a new tab with
+      rel="noopener noreferrer"
+    And selection edge cases follow the editor's default mark behaviour; no custom rules
+    And automatic URL linking is untouched by this slice
+    And target and rel exist only in ?format=html; the json and markdown reads carry only the href (accepted)
+    And every new English string has a French entry in messages.ts
+
+  Scenario Outline: The link button across its states
+    Given the user is on /article/12/edit in the Saved state, <situation>
+    Then the link button shows <expected>
+
+    Examples:
+      | situation                                                | expected                                                                                                      |
+      | the cursor is in plain text                              | aria-pressed "false", --ui-text-toned                                                                         |
+      | the pointer rests on it for 400 ms (Windows or Linux)    | the tooltip "Insert link (Ctrl+K)"                                                                            |
+      | the pointer rests on it for 400 ms (macOS)               | the tooltip "Insert link (⌘K)"                                                                                |
+      | the input is touch                                       | no tooltip                                                                                                    |
+      | it takes keyboard focus                                  | a 2 px --ui-primary outline, 1 px offset; Enter or Space opens the dialog                                     |
+      | the cursor is inside a link                              | aria-pressed "true", --rc-sand fill, --rc-on-sand icon; pressing it opens the edit dialog                     |
+      | part or all of a link's text is selected                 | the same active look                                                                                          |
+      | an image is selected                                     | 40% opacity, aria-disabled "true", no tooltip; pressing it and Ctrl/Cmd+K open nothing                        |
+      | Preview is on, or ArticleEditor has disabled true        | Ctrl/Cmd+K opens nothing                                                                                      |
+
+  Scenario Outline: Creating a link
+    Given the user is on /article/12/edit with the body "<p>We also check the timber windows before any tiling starts.</p>"
+    And <start>
+    When the user presses Ctrl+K, or activates the link button
+    Then LinkModal opens titled "Insert link" with "Link text" <text-field>, the toggle off, and "Cancel" and "Insert link"
+    And <focus-target> has focus
+    When the user sets "Link text" to "<text>", "URL" to "/articles/winter-checklist" and activates "Insert link"
+    Then the dialog closes and the body holds <a href="/articles/winter-checklist"><text></a> at that place
+    And focus is back in the editor, SaveStatus reads "Unsaved changes", and no request has been sent
+
+    Examples:
+      | start                                | text-field                                          | focus-target | text                 |
+      | "timber windows" is selected         | prefilled "timber windows"                          | "URL"        | timber windows       |
+      | "timber windows" is selected         | prefilled, then edited                              | "URL"        | timber sash windows  |
+      | nothing is selected                  | empty, placeholder "What the reader sees"           | "Link text"  | winter checklist     |
+
+  Scenario Outline: Editing and removing an existing link
+    Given the body has the link "timber windows" to "/articles/winter-checklist" opening in a new tab
+    When the user <opens-edit>
+    Then LinkModal opens titled "Edit link" with the text, the URL (focused) and the toggle on prefilled, and "Remove link", "Cancel", "Save link"
+    When the user <action>
+    Then <result>
+
+    Examples:
+      | opens-edit                                 | action                                              | result                                                                                              |
+      | presses Edit in the link popover           | sets the URL to "https://example.org/windows" and activates "Save link" | the same anchor has that href and still opens in a new tab; SaveStatus "Unsaved changes" |
+      | presses Ctrl+K with the cursor in the link | activates "Save link" with nothing changed          | the dialog closes, the body is identical and a Saved draft stays Saved                             |
+      | presses Ctrl+K with the cursor in the link | activates "Remove link"                             | the text stays without the link, no confirmation, "Unsaved changes"; undo brings the link back with its target |
+
+  Scenario Outline: Validation in the dialog
+    Given the dialog is open
+    When the user sets "Link text" to "<text>", "URL" to "<url>" and activates "Insert link"
+    Then <outcome>
+    And nothing is inserted, the dialog stays open and the draft's dirty state is unchanged
+
+    Examples:
+      | text           | url                                                           | outcome                                                                          |
+      | timber windows | www.example                                                   | "URL" shows "Enter a valid URL. Use http(s), mailto, a path or #anchor."         |
+      | timber windows | example.com                                                   | the same URL error                                                               |
+      | timber windows | javascript:alert(1)                                           | the same URL error                                                               |
+      | timber windows | JaVaScRiPt:alert(1)                                           | the same URL error                                                               |
+      | timber windows |   javascript:alert(1)                                         | the same URL error                                                               |
+      | timber windows | java&#115;cript:alert(1)                                      | the same URL error                                                               |
+      | timber windows | data:text/html;base64,PHA+                                    | the same URL error                                                               |
+      | timber windows | vbscript:msgbox(1)                                            | the same URL error                                                               |
+      | timber windows | file:///etc/passwd                                            | the same URL error                                                               |
+      | timber windows | ftp://example.org/a                                           | the same URL error                                                               |
+      | timber windows | tel:+33123456789                                              | the same URL error                                                               |
+      | timber windows | //evil.example                                                | the same URL error                                                               |
+      | timber windows | page.html                                                     | the same URL error                                                               |
+      | timber windows | ../x                                                          | the same URL error                                                               |
+      | timber windows | http://                                                       | the same URL error                                                               |
+      | timber windows | https://exa mple.org                                          | the same URL error                                                               |
+      |                | #measuring                                                    | "Link text" shows "Enter the link text." and has focus                           |
+      | (spaces)       | #measuring                                                    | the same text error                                                              |
+      |                | www.example                                                   | both errors show and focus goes to "Link text"                                   |
+
+  Scenario Outline: Accepted URL forms
+    Given the dialog is open with "Link text" "x"
+    When the user enters "<url>" and activates "Insert link"
+    Then the link is inserted with href "<href>"
+
+    Examples:
+      | url                         | href                        |
+      | https://example.org/a?b=1#c | https://example.org/a?b=1#c |
+      | HTTP://Example.org          | HTTP://Example.org          |
+      | mailto:hello@example.org    | mailto:hello@example.org    |
+      | /articles/winter-checklist  | /articles/winter-checklist  |
+      | #measuring                  | #measuring                  |
+      | (padded) "  /page  "        | /page                       |
+
+  Scenario: The URL validates on blur
+    Given the dialog is open and the user typed "www.example" in "URL"
+    When focus leaves "URL"
+    Then the URL error shows and nothing is inserted
+
+  Scenario: Link: long URL
+    Given the edit dialog is open on "planning guidance" with the 90-character URL
+      "https://www.example.org/planning/guidance/listed-buildings/windows-and-doors/…/2026-update.pdf"
+    Then "URL" stays on one line, does not widen the dialog, scrolls to reveal the whole value, and its title attribute holds the full URL
+    And "Save link" keeps its place and stays reachable at desktop and mobile width
+
+  Scenario Outline: Leaving the dialog without saving
+    Given the dialog is open with changed fields
+    When the user <leaves>
+    Then it closes, the body and the draft's dirty state are unchanged, and focus returns to the editor with the earlier selection
+
+    Examples:
+      | leaves                       |
+      | activates "Cancel"           |
+      | presses Esc                  |
+      | clicks or taps outside it    |
+
+  Scenario Outline: Dialog or sheet by viewport, popover or sheet by input
+    Given a link "timber windows" to "/articles/winter-checklist" in the body
+    When <action>
+    Then <result>
+
+    Examples:
+      | action                                                    | result                                                                                                        |
+      | the user opens the link dialog at 1440 px wide            | a dialog                                                                                                      |
+      | the user opens the link dialog at 390 px wide             | a bottom sheet with the same fields, errors and footer                                                        |
+      | a fine pointer clicks the link, or Enter on the focused link | a 288 px popover under the link with the URL, "Edit", "Open", "Remove"; the link button is active; Esc closes it and keeps the cursor in the link |
+      | a coarse pointer taps the link                            | a bottom sheet with "timber windows", the URL and 48 px rows "Edit link", "Open link", "Remove link"; Esc or a tap outside closes it |
+      | the user activates "Open" or "Open link"                  | the URL opens in a new tab with rel "noopener noreferrer"                                                     |
+      | the user activates "Remove" or "Remove link"              | the link is removed with no confirmation, "Unsaved changes", and undo restores it                             |
+
+  Scenario Outline: Rendered link states in both themes
+    Given the body has the link "timber windows" and the theme is <theme>
+    Then the link <state>
+
+    Examples:
+      | state                                                                        | theme |
+      | is --ui-text-highlighted with a 1 px underline at a 3 px offset              | light |
+      | is --ui-text-highlighted with a 1 px underline at a 3 px offset              | dark  |
+      | shows a 2 px underline on pointer hover                                      | light |
+      | shows a 2 px underline on pointer hover                                      | dark  |
+      | shows a 2 px --ui-primary outline at 2 px offset when reached by Tab or arrows | light |
+      | shows a 2 px --ui-primary outline at 2 px offset when reached by Tab or arrows | dark  |
+      | has an --rc-sand fill and --rc-on-sand text when the selection crosses it    | light |
+      | has an --rc-sand fill and --rc-on-sand text when the selection crosses it    | dark  |
+
+  Scenario: Toolbar overflow at 390 px
+    Given the viewport is 390 px wide
+    Then the full toolbar scrolls sideways in one row without wrapping
+    And a 24 or 32 px fade marks each side that has hidden buttons, and none on a side with nothing hidden
+    When the toolbar is scrolled to the end
+    Then the link, "Clear formatting" and "Image" buttons are visible, each 40 px
+    And at 1440 px the toolbar is unchanged and shows no fade
+
+  Scenario Outline: Selections that straddle a link or span blocks
+    Given the body is "<p>We also check the <a href=\"/a\">timber windows</a> before</p><p>any tiling starts.</p>"
+    And the selection is <selection>
+    When the user opens the dialog with the text unchanged and submits "/b"
+    Then the new link covers the whole selected range and replaces any partial link inside it
+    And no error occurs, and no text of the body is lost
+
+    Examples:
+      | selection                                         |
+      | "check the timber" (plain text and part of a link)|
+      | "windows before" (part of a link and plain text)  |
+      | "before" to "any tiling" (across two paragraphs)  |
+
+  Scenario: Links survive the HTML body format and reach the other formats
+    Given a link "timber windows" to "/articles/winter-checklist" opening in a new tab is in the body
+    When the user saves and reloads /article/12/edit
+    Then PATCH /v1/article/12 carried the anchor with href, target="_blank" and rel="noopener noreferrer"
+    And the reloaded editor shows the link, and its edit dialog has the toggle on
+    And a link saved without the toggle carries neither target nor rel
+    When a client sends GET /v1/article/12?format=json, or ?format=markdown
+    Then json holds a link mark with href "/articles/winter-checklist" on "timber windows", and markdown holds [timber windows](/articles/winter-checklist), with no target or rel
+
+  Scenario Outline: An unsafe href already in a body is neutralised, and the next save rewrites the stored body
+    Given GET /v1/article/12 resolves a body containing <a href="<href>">x</a>, or the user pastes that HTML into the body
+    When the editor loads the body
+    Then the text "x" is kept without a link, the link button is not active on it, and clicking it navigates nowhere
+    And the load alone does not mark the draft dirty and sends no request, so the stored body is still unchanged
+    When the user makes any edit and saves
+    Then PATCH /v1/article/12 carries the neutralised body, without the unsafe href, so the stored body is silently rewritten without the link
+    And the body the editor serialises never contains "javascript:", "data:" or "vbscript:" in an href
+    And a paste is itself an edit, so in the paste case the draft is dirty straight away
+
+    Examples:
+      | href                 |
+      | javascript:alert(1)  |
+      | data:text/html,<b>   |
+      | vbscript:msgbox(1)   |

features/editor_insert_link.qa.md

@@ -0,0 +1,60 @@
+# QA: Inserting, editing and removing a link in the article body
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Mount EditorPage at `/article/12/edit` with the `editor_core.qa.md` fixture and the body
+`<p>Every bathroom is different. We also check the timber windows before any tiling starts.</p>`.
+Mock `request` for GET and PATCH /v1/article/12 only. Tiptap runs for real in jsdom; drive selection
+through the editor instance. `request` is never called except by steps 8 and 9. Mock `matchMedia` for
+`pointer: coarse` and for the viewport width.
+
+1. **Button states, Examples-driven** - default, tooltip text per platform (Windows and Linux "Insert link (Ctrl+K)", macOS "Insert link (⌘K)", none on touch), focus ring class, active for cursor-in and for partial or full selection, disabled for an image selection, and Ctrl/Cmd+K inert in Preview and with `disabled`.
+2. **Create, Examples-driven (3 rows)** - Ctrl+K and the button: title, prefill, focus target, toggle off; submit; body HTML holds the anchor; "Unsaved changes"; zero requests.
+3. **Edit and remove, Examples-driven (3 rows)** - Edit and Ctrl+K entry, prefilled fields incl. the toggle, change href in place, no-op leaves a Saved draft Saved, "Remove link" with no confirm and undo restoring href and target.
+4. **Validation, Examples-driven** - every row of both validation Outlines, plus the accepted-forms Outline: exact error text, dialog open, body and dirty state unchanged, focus target, and the trimmed href; the blur case. For the unsafe rows assert the body HTML never has "javascript:", "data:" or "vbscript:" in an href.
+5. **Long URL** - the `title` attribute holds the full 90-character value, the dialog has no horizontal overflow, "Save link" is enabled.
+6. **Leave without saving, Examples-driven** - Cancel, Esc, outside click: nothing changes; focus returns.
+7. **Dialog/sheet and popover/sheet, Examples-driven** - width mock gives dialog or sheet; fine pointer gives popover (Esc closes), coarse gives sheet with three 48 px rows; Open calls `window.open(url, '_blank', 'noopener,noreferrer')`; Remove has no confirm and is undoable; "Open in new tab" gives `target="_blank" rel="noopener noreferrer"`, off gives neither.
+8. **Round trip** - save with a new-tab link: the PATCH body has the anchor with target and rel; remount with it: link and toggle restored; without the toggle no target or rel.
+9. **Unsafe hrefs, Examples-driven** - on load: text kept, no link, button not active, draft not dirty, zero requests; then an edit and Save: the PATCH body has no unsafe href. Paste of the same HTML: same neutralising, draft dirty.
+10. **Selection edge cases, Examples-driven (3 rows)** - the new link covers the range, a partial link is replaced, no throw, and the text content before and after is identical. Then the French completeness check: every new key is in `messages.ts` and the dialog title and two error strings are spot-checked.
+
+## Follow-ups and notes (not asserted here)
+
+- **Follow-up Go slice (out of scope):** `?format=html` returns the stored HTML as is, and `safeHref` runs only for markdown and json. An API client that PATCHes `<a href="javascript:...">` gets it back in the html read. A separate Go slice should sanitise href schemes in the converter and probably reject them on write. The SPA sanitising here is defence in depth only.
+- **Board-vs-reality note for the next Claude Design pass:** row 16 says the URL field "truncates in the middle of the line", and the board draws an ellipsis in the text. CSS cannot truncate the middle of an `<input>`. The implementation is a single scrolling line with the full URL in `title`.
+- **Design gap for the next pass:** the helper text "Links open in the same tab unless you turn on a new tab." is in the board only. `components.md` ("LinkModal") needs it.
+- **README undercount:** `docs/design/README.md` says "11 states"; `screens/editor.md` has 17 link rows (11-27). All 17 are covered.
+
+## Visual: `task visual:check -- editor`
+
+Setups go in `web/visual/states.ts` with the board's sample data: article "How we price a bathroom renovation", SaveStatus "Unsaved changes", link text "timber windows", URL "/articles/winter-checklist" (rows 13, 20, 22-26), "www.example" (14), "#measuring" (15), and for row 16 the text "planning guidance" with the 90-character URL above. Hover, focus and selection (rows 18, 23-26) are forced pseudo-states in the setup. If a row cannot be matched within 10 %, stop and ask the user: no per-state exception without `approvedBy`. No row is clock-sensitive.
+
+| Row | State |
+|---|---|
+| 11 | Link: create from selection |
+| 12 | Link: create with no selection |
+| 13 | Link: edit existing (toggle on, Remove link) |
+| 14 | Link: invalid URL |
+| 15 | Link: empty text |
+| 16 | Link: long URL |
+| 17 | Link button: default |
+| 18 | Link button: hover and tooltip (desktop only) |
+| 19 | Link button: focus-visible |
+| 20 | Link button: active |
+| 21 | Link button: disabled (image selected) |
+| 22 | Link popover (desktop) and sheet (mobile) |
+| 23-26 | Rendered link: default, hover, focus, selected |
+| 27 | Toolbar overflow (390 px, scrolled to the end; desktop unchanged) |
+
+- [ ] Keyboard and focus: Tab order, Enter/Space on the button, focus trap and return, Esc on the popover, Enter on a focused link.
+- [ ] Hover and motion: tooltip delay, underline thickening, sheet slide.
+- [ ] Screen reader: aria-pressed, dialog labelling, error association.
+
+## Manual verification
+
+- **Ctrl/Cmd+K** in Chrome, Firefox, Safari and Edge: the browser shortcut is prevented only inside the focused editor.
+- **macOS tooltip** on a real Mac.
+- **Real touch** on a phone: a tap on a link opens the sheet and does not follow the link; the sideways toolbar scroll and fades work, including iOS momentum.
+- **IME** in the Link text field.
+- **Save and public read** against `task dev`: save a new-tab link, then GET ?format=html, ?format=json and ?format=markdown, and open the public page.

features/editor_media_picker.feature

@@ -17,13 +17,16 @@ Feature: The editor's Library tab, picking an image from the media library
       a bottom sheet on mobile
     And the footer reads "Cancel", and on the Library tab also a primary "Insert image" that is
       disabled until an image is selected
-    And the Library tab calls GET /v1/media/ through useApi with limit=24, with q only while a
-      search is set and cursor only when loading more (no filter and no sort parameter), and the
-      Upload tab is specified in features/editor_image_upload.feature
-    And the response is { items, next_cursor, counts }, newest first; sizes read "8 KB" and
+    And the Library tab calls GET /v1/media/?q=Q&page=N&size=25 through useApi, with q only while a
+      search is set and page 1, then 2, 3, ... when loading more (no filter and no sort parameter),
+      and the Upload tab is specified in features/editor_image_upload.feature
+    And the response is { items, total, page, size, counts }, newest first; "Load more" shows while
+      the loaded count is below the response total (the matching count, not counts.all); sizes read "8 KB" and
       "3.9 MB", dimensions read "2400 × 1600" (an SVG reads "Vector"), dates are absolute
     And the 12-image fixture, ids 1 to 12, is the one in features/media_browse.feature, and the
-      picker mocks use next_cursor "c24" and counts { all: 48, unused: 2, duplicates: 2 }
+      picker mocks use total 48 and counts { all: 48, unused: 2, duplicates: 2 }
+    And this slice is amended by features/media_pagination_api.feature: cursor and limit are gone,
+      LIBRARY_PAGE_LIMIT 24 became the page size 25, and a mock with items equal to its total is the last page
     And an image is "in this article" when an image node with its id as data-image-id is in
       the editor's current content, unsaved insertions included, when the dialog opens;
       in the examples below images 1 (north-wall.jpg) and 4 (logo-renew.svg) are in the article
@@ -42,13 +45,13 @@ Feature: The editor's Library tab, picking an image from the media library
   Rule: Which tab opens
 
     Scenario: The library has images, so Library opens
-      Given GET /v1/media/?limit=24 resolves 200 with the 12-image fixture
+      Given GET /v1/media/?page=1&size=25 resolves 200 with the 12-image fixture
       When the user activates the toolbar's "Image" button
       Then the Library tab is selected and the footer reads "Cancel" and a disabled "Insert image"
       And nothing is drawn in the grid for the first 150 ms, then 8 skeleton tiles show until the response arrives
 
     Scenario: The library is empty, so Upload opens
-      Given GET /v1/media/?limit=24 resolves 200 with no item and no search set
+      Given GET /v1/media/?page=1&size=25 resolves 200 with no item and no search set
       When the dialog opens
       Then the Upload tab is selected, in its idle state
       When the user selects the Library tab
@@ -56,9 +59,9 @@ Feature: The editor's Library tab, picking an image from the media library
 
     Scenario: A dropped file opens Upload and sends no list request
       When the user drops "before.png" onto the editor
-      Then the Upload tab is selected and no GET /v1/media/?limit=24 is sent
+      Then the Upload tab is selected and no GET /v1/media/?page=1&size=25 is sent
       When the user selects the Library tab
-      Then GET /v1/media/?limit=24 is sent
+      Then GET /v1/media/?page=1&size=25 is sent
 
   Rule: Browsing
 
@@ -75,7 +78,7 @@ Feature: The editor's Library tab, picking an image from the media library
       Then the line reads "Newest first"
 
     Scenario: Load more is hidden on the last page
-      Given the response has next_cursor null
+      Given the loaded items equal the response total (for example total 12 with the 12-image fixture)
       Then "Load more" is not shown
 
     Scenario Outline: A tile's accessible name
@@ -167,16 +170,16 @@ Feature: The editor's Library tab, picking an image from the media library
     Scenario: Typing searches after a debounce
       Given the Library tab shows the 12-image fixture
       When the user types "wall"
-      Then after a 120 ms debounce GET /v1/media/ is sent with q=wall and limit=24 and no cursor
+      Then after a 120 ms debounce GET /v1/media/ is sent with q=wall, page=1 and size=25
       And skeleton tiles show after 150 ms, and any selection is cleared
 
     Scenario: The x in the field clears the search
       Given the search field holds "wall" with results shown
       When the user activates the x in the field
-      Then the field is empty and GET /v1/media/ is sent with limit=24 and no q
+      Then the field is empty and GET /v1/media/ is sent with page=1 and size=25 and no q
 
     Scenario: No results
-      Given GET /v1/media/?q=wall&limit=24 resolves 200 with no item
+      Given GET /v1/media/?q=wall&page=1&size=25 resolves 200 with no item
       Then the search icon shows with the title `No images match "wall"`, the text "Check the spelling, or search for a shorter part of the filename." and a "Clear search" button
       And the search field still shows "wall" above it, and "Insert image" is disabled
       When the user activates "Clear search"
@@ -185,23 +188,23 @@ Feature: The editor's Library tab, picking an image from the media library
   Rule: Load more
 
     Scenario: Loading more shows progress and appends
-      Given the first page resolved with 12 images, next_cursor "c24"
+      Given the first page resolved with 12 images and total 48
       When the user activates "Load more"
-      Then GET /v1/media/ is sent with limit=24 and cursor=c24
+      Then GET /v1/media/ is sent with page=2 and size=25
       And the button reads "Loading…" with a loader-circle and is disabled, and one row of skeleton tiles shows at the end
       And focus stays on the button
       When the request resolves 200 with 12 more images
       Then the new tiles are appended after the first 12, and focus moves to the first new tile
 
-    Scenario: The cursor and the search combine
-      Given the search "wall" is active and the page has next_cursor "c24"
+    Scenario: The next page and the search combine
+      Given the search "wall" is active and the response total is above the loaded count
       When the user activates "Load more"
-      Then GET /v1/media/ is sent with q=wall, limit=24 and cursor=c24
+      Then GET /v1/media/ is sent with q=wall, page=2 and size=25
 
   Rule: Empty and failed
 
     Scenario: Empty library
-      Given the Library tab is selected and GET /v1/media/?limit=24 resolved with no item
+      Given the Library tab is selected and GET /v1/media/?page=1&size=25 resolved with no item
       Then the images icon shows with "Your library is empty", "Images you upload appear here, ready to use in any article." and a primary "Upload an image"
       And "Insert image" is disabled
       When the user activates "Upload an image"

features/editor_media_picker.qa.md

@@ -2,29 +2,29 @@
 
 ## Automated (Vitest + Vue Test Utils, `task test:web`)
 
-Mock `request` for `GET /v1/media/` by parsed query. Use the 12-image fixture from `media_browse.feature` as `items`, with `next_cursor: "c24"` and `counts: {all: 48, unused: 2, duplicates: 2}`. Mount EditorPage at `/article/12/edit` with a body containing `<img data-image-id="1">` and `<img data-image-id="4">`. Use fake timers for the 150 ms and 120 ms steps.
+Mock `request` for `GET /v1/media/` by parsed query. Use the 12-image fixture from `media_browse.feature` as `items`, with `total: 48`, `page`, `size: 25` and `counts: {all: 48, unused: 2, duplicates: 2}` (amended by `features/media_pagination_api.feature`: `next_cursor`, `cursor` and `limit` are gone). Mount EditorPage at `/article/12/edit` with a body containing `<img data-image-id="1">` and `<img data-image-id="4">`. Use fake timers for the 150 ms and 120 ms steps.
 
 1. **Opens on Library with images** - first response has items; assert Library selected and skeleton tiles only after 150 ms.
 2. **Opens on Upload when empty** - empty first response; assert Upload selected; then click Library and assert the empty panel.
-3. **Drop sends no list request** - drop a file; assert no `?limit=24` request until Library is clicked.
+3. **Drop sends no list request** - drop a file; assert no `?page=1&size=25` request until Library is clicked.
 4. **Nothing selected** - assert the line, 12 tiles in order, the "In this article" tag on exactly ids 1 and 4, "Load more", "Insert image" disabled.
 5. **Active search hides the count** - the line reads "Newest first".
-6. **Last page** - `next_cursor: null` hides "Load more".
+6. **Last page** - a total equal to the loaded count (for example 12) hides "Load more".
 7. **Accessible names** - the three Examples.
 8. **Selection** - click, Enter and Space each select; check, outline, "Insert image" enabled.
 9. **Panel copy** - kitchen-after.webp panel, placeholder and help text exact; "Load more" hidden; SVG reads "Vector · 8 KB".
 10. **Single selection resets alt**; reactivating keeps it selected.
 11. **Insert** - alt "A kitchen with new oak worktops and white tiles" gives `insertImage("/static/uploadedImages/2.webp", alt, 2)`, SaveStatus "Unsaved changes", the toast, the dialog closed, no non-GET request. Empty alt gives `""`.
 12. **Cancel, x and Escape** change nothing.
-13. **Search** - type "wall"; at 119 ms no request, at 120 ms the request has `q=wall&limit=24` and no cursor; the selection is cleared. The field's x and "Clear search" send a request with no `q`.
+13. **Search** - type "wall"; at 119 ms no request, at 120 ms the request has `q=wall&page=1&size=25`; the selection is cleared. The field's x and "Clear search" send a request with no `q`.
 14. **No results** and **Empty** copy; "Upload an image" switches to the Upload tab.
-15. **Load more** - request has `cursor=c24`; button "Loading…" and disabled; skeleton row of 4 (3 below md); focus on the button, then on the first new tile after resolve; combined `q` and `cursor`.
+15. **Load more** - request has `page=2&size=25`; button "Loading…" and disabled; skeleton row of 4 (3 below md); focus on the button, then on the first new tile after resolve; combined `q` and `page=2`.
 16. **Failed to load, Examples 500 and network** - alert copy; "Try again" repeats the request; success replaces the alert.
 
 ## Visual: `task visual:check -- media-picker`
 
 Add a setup in `web/visual/states.ts` for each of the 13 states in `docs/design/screens/media-picker.md`, from the board's script (`RenewCMS Screens Back-office.dc.html` lines 239 to 253). Every capture must be within 10 % at 1440×900 and 390×844, light and dark. The sample data to reuse:
-- Library mock: the 12-image fixture, `counts.all` 48, `next_cursor` non-null; images 1 and 4 in the article. The dialog is opened on the editor "How we price a bathroom renovation".
+- Library mock: the 12-image fixture, `counts.all` 48, `total` 48; images 1 and 4 in the article. The dialog is opened on the editor "How we price a bathroom renovation".
 - "Upload tab": Upload selected, idle drop zone.
 - "Upload tab: already in your library": a chosen file named `north-wall.jpg`; the hash lookup returns id 1 (12 Sep 2026, Marta Alves); the thumbnail is 72 × 54.
 - "Library: loading": skeleton tiles.
@@ -46,9 +46,9 @@ Manual checks the screenshots can't cover:
 - [ ] Focus order is tabs, search, tiles, "Load more", footer. Enter and Space select a tile. Focus returns to the toolbar's image button when the dialog closes.
 - [ ] Hover on a tile and on "Load more", and the focus ring.
 - [ ] Motion: the dialog follows the standard 240 ms timing.
-- [ ] A real library of more than 24 images through `task dev`: "Load more" and the cursor.
+- [ ] A real library of more than 25 images through `task dev`: "Load more" and the page numbers.
 - [ ] A screen reader reads the tile names and the alt text help.
 
 ## Manual verification
 
-Real `GET /v1/media/` with `q` and `cursor` against `task dev` with a live SQLite file.
+Real `GET /v1/media/` with `q`, `page` and `size` against `task dev` with a live SQLite file.

features/editor_seo.feature

@@ -0,0 +1,538 @@
+Feature: Editor: search and sharing, suggestions and "What the frontend gets"
+
+  As a RenewCMS user who can edit articles
+  I want to fill in an article's search and sharing data, see suggestions and previews, and see what the frontend receives
+  So that the API returns good SEO data for every article without blocking me from saving or publishing
+
+  Background:
+    Given the screen is EditorView (/article/:id/edit) inside DashboardShell, per docs/design/routes.md
+    And the visual spec of record is docs/design/screens/editor.md (groups "Editor: search and sharing" with 24 states and "Editor: what the frontend gets" with 6 states), docs/design/seo-slices.md, docs/design/components.md (SearchSharingSection, SeoPanel, SoftCounter, SearchPreview, SocialCardPreview, SuggestionList, ApiPreviewDialog, SlugField, MediaField) and docs/design/states.md ("SEO round"). Exact copy is read from those files and is not repeated here unless a scenario needs it
+    And the board frames of docs/design/source/RenewCMS Screens Back-office.dc.html, AppFrame.dc.html and DirectoryFrame.dc.html are the layout tiebreaker
+    And this slice is SPA only and reuses the API of features/seo_data_backend.feature and features/seo_output_backend.feature without change
+    And the SPA calls, with relative URLs through useApi only: GET /v1/article/{id} and PATCH /v1/article/{id} (SEO fields slug, excerpt, seo_title, seo_description, cover_image_id, cover_image_alt, social_title, social_description, social_image_id, canonical_url, noindex), POST /v1/article/{id}/seo/check, GET /v1/article/{id}/seo, GET /v1/site/ and the media routes of the shared picker
+    And POST /v1/article/{id}/seo/check takes the optional SEO fields (and body) of PATCH as overrides and answers {status, suggestions: [{code, field, params}], slug: {available, suggestion}} with status "ready", "suggestions" or "hidden"
+    And the SPA never re-implements a suggestion rule. It renders the suggestions, the order and the status the check returns. The copy of each code lives in the SPA and has a French entry
+    And the suggestion codes are title_long, title_empty, desc_short, desc_long, cover_alt, cover_none, slug_long, no_au, no_h, body_alt and short
+    And a suggestion's field maps to a link label: seo_title "meta title", seo_description "meta description", cover_image_alt and cover_image_id "cover image", slug "URL slug", author_ids "authors", body "body"
+    And the soft ranges of the counters are meta title 30 to 60 and description 70 to 160 (docs/design), and the social title has no counter. They colour a counter and never block
+    And suggestions never disable Save, "Save and publish" or Publish
+    And the sample article is 12, "How we price a bathroom renovation", online on the site Renew (renew.example, id 1), slug "how-we-price-a-bathroom-renovation", with no SEO field set, and the author "Inès Duarte"
+    And the sample cover media is "north-wall.jpg" (the site social image) and the sample panel values are those of the board frames "Panel: filled in" and "Panel: outside the soft ranges"
+    And every visible string goes through t(...) with the English text as the key and a French entry in web/src/i18n/messages.ts
+    And the screen uses Nuxt UI components and design tokens only, with no raw colors, and no comment is added anywhere
+    And a scenario tagged @not-in-design uses copy or behaviour that docs/design does not define: it takes the proposal of this feature, has a French entry, and is listed in the .qa.md to be fed back to the design
+
+  Rule: The "Search and sharing" section sits under "Site and authors", collapsed by default
+
+    Scenario: Position, in the sidebar and in the Details sheet
+      Given article 12 is loaded and nothing is remembered for this browser
+      When the user opens /article/12/edit on desktop
+      Then the details sidebar shows a collapsed "Search and sharing" section directly under "Site and authors"
+      And on mobile (390 px) the section is not visible until the Details sheet is opened, and inside the sheet it sits under "Site and authors"
+
+    Scenario Outline: The one-line summary follows the check
+      Given the section is collapsed
+      And POST /v1/article/12/seo/check answers <check>
+      Then the summary line reads "<summary>" in <colour>
+
+      Examples:
+        | check                                | summary            | colour               |
+        | pending                              | Checking…          | the muted colour     |
+        | status "ready", no suggestions       | Ready              | the muted colour     |
+        | status "suggestions", 1 suggestion   | 1 suggestion       | the warning colour   |
+        | status "suggestions", 2 suggestions  | 2 suggestions      | the warning colour   |
+        | status "hidden", 2 suggestions       | Hidden from search | the muted colour     |
+
+    Scenario: The existing Editor states show the section
+      Then every editor state that has the details sidebar shows the collapsed section with "Ready"
+      And the Loading state shows the section header with a skeleton summary, as for "Site and authors"
+      And the Not found state shows no section
+
+    Scenario: The choice is remembered per browser, with its own key
+      Given the section is collapsed by default
+      When the user opens it and later opens another article in the same browser
+      Then it is open there too
+      When the user collapses it and reloads
+      Then it is collapsed
+      And the choice is kept in localStorage under its own key, independent of the "Site and authors" key, and nothing is sent to the API
+      And the sidebar and the Details sheet share that key
+
+    Scenario Outline: A storage that throws never breaks the editor
+      Given localStorage.<call> throws a SecurityError
+      When the user opens the editor and toggles the section
+      Then the editor renders, the section opens and closes for this page view, and no error reaches the user
+      And reading falls back to "collapsed" and writing is silently skipped
+
+      Examples:
+        | call    |
+        | getItem |
+        | setItem |
+
+    Scenario: The section opens by itself when asked from elsewhere
+      When the user activates "Edit search and sharing", "What the frontend gets" or a suggestion link
+      Then the panel or the dialog opens whatever the stored choice is, and the stored choice is not changed
+
+  Rule: The open section: address, suggestions and actions
+
+    Scenario: Open and ready
+      Given the section is open and the check answers status "ready"
+      Then it shows "Address" with "renew.example/how-we-price-a-bathroom-renovation" (the host of the site's base_url, without the scheme, then the slug)
+      And "All good" with "Nothing to suggest for this article."
+      And the actions "Edit search and sharing" and "What the frontend gets"
+
+    Scenario: Open with suggestions, at most three
+      Given the check answers title_long (74 characters), cover_alt, no_h and short, in that order
+      Then exactly three suggestions are shown, in the order of the response, each with its message and a "Go to <field>" link: "Go to meta title", "Go to cover image", "Go to body"
+      And a "+1 more in Search and sharing" action follows
+      When the user activates "+1 more in Search and sharing"
+      Then the panel opens with the suggestion list in view
+      And with three suggestions or fewer no "+N more" action is shown
+
+    Scenario Outline: A suggestion link goes to its field
+      Given the check answers a suggestion whose field is "<field>"
+      When the user activates its "Go to <label>" link
+      Then <result>
+
+      Examples:
+        | field           | label            | result                                                      |
+        | seo_title       | meta title       | the panel opens with focus on the meta title input          |
+        | seo_description | meta description | the panel opens with focus on the meta description          |
+        | cover_image_alt | cover image      | the panel opens with focus on the alt text input            |
+        | cover_image_id  | cover image      | the panel opens with focus on the cover "Choose image" button |
+        | slug            | URL slug         | the panel opens with focus on the slug field                |
+        | body            | body             | focus moves to the article body in the editor               |
+        | author_ids      | authors          | the "Site and authors" section opens and focus moves to its list |
+
+    Scenario Outline: Copy of the other codes, as the board draws it
+      Given the check answers the code "<code>" with params <params>
+      Then the message reads "<message>" and has a French entry
+
+      Examples:
+        | code        | params                      | message                                                                       |
+        | title_empty | {}                          | No meta title yet. The article title is used instead.                         |
+        | desc_long   | {"length": 170, "max": 160} | The description is 170 characters. Search engines may cut it off after about 160. |
+        | cover_none  | {}                          | No cover image. The site's social image is used.                              |
+        | slug_long   | {"length": 80, "max": 75}   | The slug is 80 characters. Shorter addresses are easier to share.             |
+        | no_au       | {}                          | This article has no authors, so the structured data has no author.            |
+        | body_alt    | {"count": 2}                | 2 images in the body have no alt text.                                        |
+        | short       | {"length": 40, "min": 300}  | The article is under 300 words. That is fine for a short note.                |
+
+    Scenario Outline: The messages the design does draw use the params of the response
+      Given the check answers the code "<code>" with params <params>
+      Then the message reads "<message>"
+
+      Examples:
+        | code       | params                      | message                                                                      |
+        | title_long | {"length": 74, "max": 60}   | The meta title is 74 characters. Search engines may cut it off after about 60. |
+        | desc_short | {"length": 41, "min": 70}   | The description is 41 characters. About 70 to 160 reads best in results.     |
+        | cover_alt  | {}                          | The cover image has no alt text. Add a short description of it.              |
+        | no_h       | {}                          | The body has no headings. H2 headings help readers scan the article.         |
+
+    Scenario: Checking, with the rest of the section usable
+      Given POST /v1/article/12/seo/check is pending
+      Then the section shows "Checking this article…"
+      And the address, "Edit search and sharing" and "What the frontend gets" stay usable
+
+    Scenario: Hidden from search
+      Given the article has noindex true
+      When the section is open
+      Then it shows "Hidden from search engines. This only sets a flag in the API."
+
+    Scenario: Another site
+      Given the article is on the site Journal (journal.renew.example)
+      Then the address reads "journal.renew.example/how-we-price-a-bathroom-renovation"
+
+    @not-in-design
+    Scenario Outline: The check could not run
+      Given POST /v1/article/12/seo/check fails with <failure>
+      Then the summary line is not shown as Ready and the section shows "Couldn't check this article." with "Try again"
+      And no toast is shown and the article is unchanged
+      When the user activates "Try again"
+      Then the check is requested again
+
+      Examples:
+        | failure         |
+        | status 500      |
+        | a network error |
+
+    Scenario Outline: A session problem during the check follows the existing rules
+      When POST /v1/article/12/seo/check answers <status>
+      Then <result>
+
+      Examples:
+        | status | result                                                                             |
+        | 401    | the user lands on /login?redirect=/article/12/edit&reason=expired, the draft is kept |
+        | 404    | the "Not found" editor state is shown                                              |
+
+  Rule: Suggestions and the slug check come from the server, after a pause in typing
+
+    Scenario: The first check runs when the editor loads
+      When GET /v1/article/12 answers 200
+      Then exactly one POST /v1/article/12/seo/check is sent with the body {}
+      And no check is sent while GET /v1/article/12 is pending or fails
+
+    Scenario: Only changed fields are sent to the check
+      Given the user changed the meta title to a 74-character text and nothing else
+      When the check runs
+      Then the POST body is {"seo_title": "<the 74 characters>"} and holds no other field
+
+    Scenario: An unsaved body edit is part of the check
+      Given the user edited the body in the editor
+      When the check runs
+      Then the POST body holds "body" with the edited html, so no_h, body_alt and short reflect what is on screen
+
+    Scenario Outline: The check waits for a pause in typing
+      Given the user types in <field>
+      When the user keeps typing with less than the debounce delay between keystrokes
+      Then no check is sent
+      When the user pauses for the debounce delay
+      Then exactly one POST /v1/article/12/seo/check is sent with the latest value
+      And the suggestions refresh and the summary line follows
+
+      Examples:
+        | field            |
+        | meta title       |
+        | meta description |
+        | excerpt          |
+        | alt text         |
+        | social title     |
+        | canonical URL    |
+        | slug             |
+
+    Scenario: A late answer never overwrites a newer one
+      Given check A was sent, then check B after a further edit
+      When B answers first and A answers later
+      Then the suggestions and the status are those of B
+      And when only A is still pending, the previous request is aborted
+
+    Scenario: Discrete changes check immediately
+      When the user toggles "Hide from search engines", picks or removes a cover or a social image, or chooses "Use <slug>-2"
+      Then one check is sent without waiting for the debounce delay
+
+    Scenario: Nothing is saved by a check
+      Then no PATCH is sent by any check and the status stays unchanged
+
+    Scenario: The panel check state
+      Given the panel is open and a check is pending
+      Then the suggestions area shows "Checking this article…" and the fields stay usable
+
+  Rule: The panel (desktop slide-over, mobile 92% sheet)
+
+    Scenario: Opening
+      When the user activates "Edit search and sharing" on desktop
+      Then a slide-over 960 px wide opens with the title "Search and sharing", the fields, the previews, "Cancel" and "Save changes"
+      And on mobile a sheet covering 92% of the height opens over the Details sheet, with the suggestions first, then the fields, then the two previews
+      And a check is sent on open
+
+    Scenario: Defaults, every value is a fallback and says so
+      Given the article has no SEO field set
+      Then the panel shows "URL slug" with the Auto badge and "Generated from the title until you edit it."
+      And "Meta title" with the chip "Using article title" and "Recommended 30 to 60 characters. This is a guide, not a limit."
+      And "Meta description" with the chip "Using first sentence of the body" and "Recommended 70 to 160 characters."
+      And "Excerpt" with "A short summary. It is also sent as the article teaser."
+      And "Cover image" with "Using the site social image (north-wall.jpg)."
+      And "Social sharing" collapsed with "Optional" and "Uses the meta values"
+      And "Advanced" collapsed with "Canonical URL: automatic"
+      And "Hide from search engines" off with "Sets noindex in the API. It doesn't change who can read the article."
+      And "Search result", "Social card" and "Suggestions" blocks, "What the frontend gets", "Cancel" and "Save changes"
+
+    @not-in-design
+    Scenario Outline: The other fallback chips
+      Given <state>
+      Then the chip reads "<chip>" and has a French entry
+
+      Examples:
+        | state                                              | chip                                          |
+        | no meta description but an excerpt                 | Using the excerpt                             |
+        | no meta description, no excerpt, no body text      | Using the site default description            |
+        | no cover and no site social image                  | No image                                      |
+
+    Scenario: Filled in
+      Given the article has its own meta title, description, excerpt, cover with alt text and the check answers no suggestion
+      Then the fallback chips are gone and the suggestion block shows "All good" with "Nothing to suggest for this article."
+
+    Scenario Outline: Soft counters are a guide
+      Given the user types <n> characters in <field>
+      Then the counter reads "<n> / <max>" in the mono face and is <colour>
+      And Save changes stays enabled and nothing is blocked
+
+      Examples:
+        | field            | n   | max | colour                      |
+        | meta title       | 29  | 60  | amber (--ui-warning)        |
+        | meta title       | 30  | 60  | neutral                     |
+        | meta title       | 60  | 60  | neutral                     |
+        | meta title       | 74  | 60  | amber (--ui-warning)        |
+        | meta description | 41  | 160 | amber (--ui-warning)        |
+        | meta description | 70  | 160 | neutral                     |
+        | meta description | 160 | 160 | neutral                     |
+        | meta description | 161 | 160 | amber (--ui-warning)        |
+
+    Scenario: Outside the soft ranges
+      Given the user typed the 74-character meta title and the 33-character description of the board
+      Then both counters are amber and never red
+      And the suggestion block shows the title_long and desc_short messages once the check answers
+      And the search result preview shows the title cut off with "Cut off here, the way a search engine would."
+
+    Scenario: The API length limits are not reachable
+      Given the API refuses seo_title above 120, seo_description above 320, cover_image_alt above 200, social_title above 120 and social_description above 320 characters
+      Then each input stops accepting characters at its limit, so the API 400 for those fields is never produced by typing
+
+    Scenario: Excerpt over 300
+      When the user types a 301-character excerpt
+      Then the excerpt shows an inline error and "Save changes" is disabled until it is 300 or fewer
+      And no request is sent for it
+
+    Scenario: Slug edited, Auto and Reset
+      Given the slug is in Auto mode
+      When the user activates the pencil
+      Then the Auto badge is gone, the field is editable and "Reset to match the title" appears
+      When the user activates "Reset to match the title"
+      Then the field shows the slug generated from the title with the Auto badge, and the slug is sent as "" on save so that the API regenerates it
+      And a check with {"slug": ""} confirms its availability
+
+    Scenario: Cover and alt text
+      When the user activates "Choose image" in "Cover image"
+      Then the shared Media picker opens titled "Choose a cover image" with "The cover for this article." and the action "Use image"
+      When the user picks "north-wall.jpg"
+      Then the cover shows its thumbnail and name, an "Alt text" field appears with "Needed before the cover counts as ready. Sent as image alt in the API." and the placeholder "Describe the image for people who can't see it"
+      And a cover without alt text raises cover_alt as a suggestion, never as an error
+      When the user removes the cover
+      Then the "Using the site social image (north-wall.jpg)." line returns and cover_image_id is sent as null on save
+
+    Scenario: Social sharing
+      When the user opens "Social sharing"
+      Then "Social title" shows "Using meta title", "Social description" shows "Using meta description" and "Social image" shows "Using the cover image."
+      When the user fills a social title, a description and picks a social image
+      Then the three "Using …" chips disappear, "Customised" is shown and the social card shows the overrides
+
+    Scenario Outline: Advanced, canonical URL
+      Given "Advanced" is open
+      When the canonical URL field holds "<value>" and loses focus
+      Then <result>
+
+      Examples:
+        | value                  | result                                                                                         |
+        | renew.example/costs    | the field shows "Enter a full address starting with https://" and the field is invalid         |
+        | http://renew.example/a | the field shows "Enter a full address starting with https://"                                  |
+        | https://renew.example/a | no error is shown                                                                             |
+        | " https://renew.example/a" | the field shows "Enter a full address starting with https://" (the value is never trimmed)    |
+        |                        | no error is shown and "Canonical URL: automatic" is shown when collapsed                       |
+
+    Scenario: Canonical refused by the API
+      When PATCH /v1/article/12 answers 422 "invalid_url"
+      Then "Advanced" opens, the canonical field shows "Enter a full address starting with https://" and the values are kept
+
+    Scenario: Hide from search engines
+      When the user turns the switch on
+      Then the helper "Sets noindex in the API. It doesn't change who can read the article." is shown and noindex true is sent on save
+      And the next check answers status "hidden"
+
+    Scenario Outline: The search result preview
+      Given the meta title is "How we price a bathroom renovation: surveys, plumbing, tiling and finishes" and the site title template is "%title% | %site%"
+      When the Search result toggle is on "<device>"
+      Then the title shown is cut at <title> characters (the template included) with an ellipsis and the description at <desc> characters
+      And the width of the preview changes with the device
+
+      Examples:
+        | device  | title | desc |
+        | Desktop | 60    | 160  |
+        | Mobile  | 70    | 120  |
+
+    Scenario: The previews follow the typing, with the fallbacks
+      Given the user clears the meta title
+      Then the preview shows the article title with the site's title_template applied
+      And the social card shows 1.91:1 image, the host, the title and a 2-line description, with fallback chips
+
+    Scenario: Keyboard
+      Then Tab visits the fields in the order drawn, Escape closes the panel as "Cancel" does, and focus returns to "Edit search and sharing"
+
+  Rule: Slug availability
+
+    Scenario: Checked on blur
+      Given the user typed "bathroom-costs" in the slug field
+      When the field loses focus
+      Then one POST /v1/article/12/seo/check is sent with {"slug": "bathroom-costs"}
+      When it answers slug {"available": false, "suggestion": "bathroom-costs-2"}
+      Then the field shows 'The slug "bathroom-costs" is already used on Renew.' and the action "Use bathroom-costs-2"
+
+    Scenario: Use the suggestion
+      Given the slug-taken state is shown
+      When the user activates "Use bathroom-costs-2"
+      Then the slug field holds "bathroom-costs-2" in manual mode, the error and the action disappear and a check confirms it
+
+    Scenario: Slug taken on save
+      Given the user saved with the slug "bathroom-costs"
+      When PATCH /v1/article/12 answers 409 "slug_taken"
+      Then the panel stays open with the slug-taken state, the action "Use <suggestion>" is offered (the suggestion comes from a follow-up check, as the 409 headers are not readable through useApi) and the other values stay
+      And nothing of the edit is applied to the article and the status stays "Unsaved changes"
+
+    Scenario: A slug the article already owns is available
+      Given the check answers slug {"available": true, "suggestion": null}
+      Then no error and no action are shown
+
+  Rule: Saving, publishing and leaving treat SEO edits like any other edit
+
+    Scenario: Save changes commits the panel to the draft and saves
+      Given the user changed the meta title in the panel and nothing else
+      When the user activates "Save changes"
+      Then exactly one PATCH /v1/article/12 is sent containing seo_title only
+      And fields that did not change are not sent, and the unchanged body, site_id and author_ids are not sent
+
+    Scenario: Saving state
+      Given "Save changes" was activated
+      Then while the request runs every field of the panel is disabled with its text colour unchanged, the status reads "Saving…" and the page behind stays as it was
+
+    Scenario: Saved
+      When the PATCH answers 200
+      Then the panel closes, the editor status reads "Saved", the summary and the suggestions refresh with a new check
+      And a success toast shows "Search and sharing saved" with "Your search and sharing settings are up to date."
+
+    Scenario Outline: Save failed
+      When the PATCH fails with <failure>
+      Then the panel stays open with the notice "Couldn't save search and sharing. Your changes are still here. Try again in a moment."
+      And the values are kept, the fields are enabled again and the editor shows its "Save failed" state with Retry
+
+      Examples:
+        | failure         |
+        | status 500      |
+        | a network error |
+
+    Scenario: A body or site edit pending in the editor is saved too
+      Given the user edited the body in the editor and then changed the meta title in the panel
+      When the user activates "Save changes"
+      Then one PATCH is sent containing body and seo_title
+
+    Scenario: The editor Save button treats SEO edits like any other edit
+      Given the panel was closed after "Save changes" failed, with the draft holding seo_title
+      Then the editor status reads "Unsaved changes", Save is enabled and "Publish" reads "Save and publish"
+      When the user activates Save, presses Ctrl or Cmd S, or activates "Save and publish"
+      Then the PATCH holds seo_title and the publish request follows for "Save and publish"
+
+    Scenario: Save and publish saves a dirty draft first
+      Given the draft is dirty
+      When the user activates "Save and publish"
+      Then the PATCH is sent first and the publish request follows only if it succeeded
+      And with a clean draft only the publish request is sent
+
+    Scenario: Leaving with unsaved SEO edits
+      Given the draft holds an unsaved SEO value
+      When the user navigates away
+      Then the "Leave without saving?" dialog is shown
+
+    Scenario: Session expiry keeps the SEO draft
+      Given the draft holds unsaved SEO values
+      When PATCH answers 401
+      Then the draft, SEO values included, is mirrored to sessionStorage and the user lands on /login?redirect=/article/12/edit
+      And after logging in the editor restores the draft, shows "Unsaved changes" and the panel fields show the restored values
+
+    Scenario: A storage that throws never loses the editor
+      Given sessionStorage throws on every call
+      Then saving, leaving and the mirror still work with the values in memory
+
+    Scenario: Suggestions never block
+      Given the check answers suggestions or the status "hidden"
+      Then Save, "Save and publish", Publish and Ctrl/Cmd S stay enabled when the draft is dirty and no request is delayed or refused because of them
+
+    Scenario: Cancel
+      Given the user typed in the panel
+      When the user activates "Cancel"
+      Then the panel closes and the values typed in it are discarded without changing the editor status
+      And no request is sent
+
+    Scenario: Offline
+      Given the connection dropped
+      Then the check and the dialog GET fail as in "The check could not run" and "Error", and writing continues
+
+    Scenario Outline: Roles
+      Given the session role is "<role>"
+      Then the section, the panel and the dialog are available
+
+      Examples:
+        | role     |
+        | owner    |
+        | admin    |
+        | verified |
+
+  Rule: "What the frontend gets" (ApiPreviewDialog)
+
+    Scenario: Opening from the section and from the panel
+      When the user activates "What the frontend gets" in the section or in the panel
+      Then GET /v1/article/12/seo is requested once on each opening
+      And on desktop a 720 px dialog opens, on mobile a bottom sheet
+
+    Scenario: Formatted
+      Then the dialog shows "What the frontend gets", "The SEO data returned by GET /v1/article/12/seo, read only. RenewCMS doesn't render pages or add meta tags: your frontend does.", the tabs "Formatted" and "Raw JSON", "Copy JSON" and "Close"
+      And Formatted lists the keys title, description, canonical_url, robots, og, twitter, image, authors, published_at, modified_at and json_ld as a compact key and value list
+      And each value that came from a fallback (per the fallbacks map) carries a chip
+
+    @not-in-design
+    Scenario Outline: Fallback chips in the dialog
+      Given fallbacks.<key> is "<source>"
+      Then the chip next to <key> reads "<chip>" and has a French entry
+
+      Examples:
+        | key         | source        | chip                                    |
+        | title       | title         | Using article title                     |
+        | description | body          | Using first sentence of the body        |
+        | description | excerpt       | Using the excerpt                       |
+        | description | site          | Using the site default description      |
+        | image       | cover         | Using the cover image                   |
+        | image       | site          | Using the site social image             |
+        | canonical   | site          | Using the site address and the slug     |
+        | title       | seo_title     | no chip                                 |
+        | image       | none          | No image                                |
+
+    Scenario: Raw JSON
+      When the user activates "Raw JSON"
+      Then the response is shown exactly as the API returned it, as pretty-printed JSON in the mono face
+
+    Scenario: Copy JSON
+      Given the response is loaded
+      When the user activates "Copy JSON"
+      Then the raw object is written to the clipboard as pretty-printed JSON
+      And the button reads "Copied" for 2 seconds and "Copied" is announced in a live region
+      And after 2 seconds it reads "Copy JSON" again
+
+    @not-in-design
+    Scenario: The clipboard is refused
+      Given navigator.clipboard is unavailable or rejects
+      When the user activates "Copy JSON"
+      Then the button keeps reading "Copy JSON", no "Copied" is announced and no error reaches the user
+
+    Scenario: Draft article
+      Given article 12 is a draft
+      Then the dialog shows "This article is a draft. The API returns this data only to signed-in callers until it is published." above the data
+      And the data is shown, since the owner may read drafts
+
+    Scenario: Loading
+      Given GET /v1/article/12/seo is pending
+      Then the dialog shows a loading state and "Copy JSON" is disabled
+
+    Scenario Outline: Error with retry
+      When GET /v1/article/12/seo fails with <failure>
+      Then the dialog shows "Couldn't load the SEO data", "GET /v1/article/12/seo failed. Your article is unchanged. Try again in a moment." and "Try again"
+      And the article, the draft and the status are unchanged
+      When the user activates "Try again"
+      Then GET /v1/article/12/seo is requested again
+
+      Examples:
+        | failure         |
+        | status 500      |
+        | a network error |
+
+    Scenario: The dialog is read only
+      Then it sends no PATCH and no POST, and "Close" or Escape closes it and returns focus to its opener
+
+  Rule: Layering, copy and visual conformance
+
+    Scenario: Every call goes through useApi
+      Then no component calls fetch directly and every URL is relative
+
+    Scenario: French
+      Given the language is "fr"
+      Then every new string, including the messages of the 11 suggestion codes, the "Go to <field>" labels, the chips and the @not-in-design copy, is the French message
+      And a missing French entry fails the i18n spec
+
+    Scenario: Visual conformance
+      Then `task visual:check -- editor` passes every Editor frame, existing ones and the 30 new ones (24 + 6), at 1440x900 and 390x844, in light and dark
+      And no per-state exception is used without the user's approval

features/editor_seo.qa.md

@@ -0,0 +1,65 @@
+# QA: Editor, search and sharing
+
+SPA slice only. No Go change: the API of `features/seo_data_backend.feature` and `features/seo_output_backend.feature` already exists. A wrong contract is reported as a backend defect.
+
+Roles: the domain defines only `owner` and `admin`. "verified" is a verified account without either role.
+
+## Automated SPA (Vitest + Vue Test Utils, `task test:web`)
+
+Mock `useApi`'s `request` per case for GET and PATCH /v1/article/{id}, POST /v1/article/{id}/seo/check, GET /v1/article/{id}/seo, GET /v1/site/ and the media routes of the picker. Mount EditorView inside DashboardShell with a resolved session and a test router. Mock matchMedia for desktop and mobile. Use fakes for localStorage and sessionStorage. Use Vitest fake timers for the debounce delay and the 2 s "Copied", and do not freeze the system date. The clipboard is a stub on navigator.clipboard. Report the web tests as run or NOT RUN, never as passing when not run. Names below are suggestions; one spec file per numbered group, under `web/src/views/__tests__/` (`EditorSeo*.spec.ts`).
+
+Regression: every existing Editor spec (EditorView, EditorMetaSection, EditorAuthorList, EditorAddAuthor, EditorImageUpload, EditorMediaPicker, EditorVariants, ArticleEditor*, EditorStatusBar) now sees a POST /v1/article/{id}/seo/check on load. Give them a default mock (`{status: "ready", suggestions: [], slug: {available: true, suggestion: null}}`) rather than loosening unmocked-call checks, and show they still pass.
+
+1. Section: position under "Site and authors", collapsed default, summary Examples (pending, ready, 1 and 2 suggestions, hidden) with the colour class, Loading skeleton summary, no section on 404, mobile sheet placement.
+2. Memory, with the storage fallback (see "Red/green proof"): own key distinct from `renewcms-meta-section-open`, shared by sidebar and sheet, wins over nothing else, both `getItem` and `setItem` throwing SecurityError, no API call. Opening via "Edit search and sharing", "What the frontend gets" or a suggestion link does not change the stored choice.
+3. Open section: address from the site's base_url host plus the slug, other site, ready block, up to three suggestions in response order with "Go to <field>" links, "+N more", checking text, hidden line, check failure with "Try again", 401 and 404 on the check.
+4. Suggestion copy: each of the 11 codes renders its message from params (the four drawn in the design with the exact copy, seven @not-in-design) and has a French entry; the link label Examples and their focus targets (seo_title, seo_description, cover_image_alt, cover_image_id, slug, body, author_ids).
+5. Check scheduling: exactly one check on load with `{}`; only changed fields in the body; unsaved body included; debounce Examples with fake timers (rapid typing sends nothing, a pause sends one with the latest value) for every text field; discrete changes check immediately; a late answer never overwrites a newer one (resolve out of order) and the stale request is aborted; no PATCH from any check; no client-side rule (a test that feeds a 74-character title and a check answer without `title_long` still shows no `title_long` message).
+6. Panel: opening on desktop and mobile with the right container, defaults with every chip, other chips (@not-in-design), filled in, soft counter Examples at 29, 30, 60, 61 (title) and 69, 70, 160, 161 (description) with the amber class and no error colour, maxlength at the API limits, excerpt 300 vs 301 with Save changes disabled, slug Auto/pencil/Reset (sends `""`), cover picker with "Use image", alt text appearing with a cover, cover removal sending null, social customised, canonical Examples (on blur and the 422 `invalid_url` reopening Advanced), noindex switch, preview truncation Examples (60 and 160 desktop, 70 and 120 mobile, template included), previews follow typing and fallbacks, Escape/Cancel discards, focus return.
+7. Slug availability: check on blur with `{"slug": …}`, taken state and `Use <slug>-2`, the suggestion applied and re-checked, 409 `slug_taken` on save keeps the panel open and offers the suggestion through a follow-up check, nothing applied, an owned slug shows no error.
+8. Save integration: "Save changes" sends one PATCH with `seo_title` only; body pending is sent along; unchanged fields are not sent (assert the exact JSON); Saving disables fields; Saved closes the panel, refreshes the check and shows the toast; 500 and network failure keep the panel, the notice and the values; editor Save, Ctrl/Cmd S and "Save and publish" after a failed panel save; the leave dialog with an unsaved SEO value; the 401 mirror to sessionStorage and the restored draft with the panel fields; sessionStorage throwing; suggestions never disable Save or Publish; Cancel sends nothing; offline; the three roles.
+9. ApiPreviewDialog: one GET per opening from both openers, desktop dialog and mobile sheet, Formatted keys and the chip Examples, Raw JSON equals the response, Copy JSON writes the pretty-printed raw object, "Copied" for 2 s (fake timers) and the live-region announcement, a rejected or missing clipboard, draft note when `is_online` is false, loading with Copy disabled, error with "Try again" for 500 and a network error, read-only (no PATCH, no POST), Escape/Close focus return.
+10. i18n: every new `t()` key has a French entry (extend the i18n spec); one French walk through the section, the panel and the dialog.
+11. API types: `Article` carries the SEO fields and `Site` carries `site_name`, `title_template`, `default_description` and `default_robots`; `useArticleDraft` mirrors the SEO fields in sessionStorage and sends only changed ones (unit test of `savePayload` through `save()`).
+
+### Red/green proof for the storage fallback (required in the qa report)
+
+`metaSectionMemory.ts` already wraps its storage calls in try/catch. For the new key, the spec "A storage that throws never breaks the editor" (both `getItem` and `setItem`) must be shown failing without the fix:
+1. Write the spec with a localStorage whose `getItem` and `setItem` throw `SecurityError`.
+2. Temporarily remove the try/catch from the new read/write helpers (or call localStorage directly), run `task test:web -- EditorSeoMemory`, and record the red run (the editor throws or the toggle does nothing).
+3. Restore the helpers, run again, and record the green run.
+4. Report both outputs. The temporary revert is not committed.
+
+## Visual (`task visual:check -- editor`, desktop and mobile, light and dark)
+
+Setups go in `web/visual/states.ts`, one setup per state, with mocked /v1 and the board's own sample data (article 12 "How we price a bathroom renovation", Renew, "Inès Duarte", media "north-wall.jpg" and "kitchen-after.webp", values from the frames). Hard gate: every capture within 10 %, with no per-state exception. Reference frames: `AppFrame.dc.html` (sidebar section), `DirectoryFrame.dc.html` (SeoPanel, SlugField, MediaField, picker) and the board `RenewCMS Screens Back-office.dc.html`.
+
+- Existing Editor frames with the sidebar: the collapsed section with "Ready" under "Site and authors". Their setups need a default POST check mock. Loading shows the skeleton summary. Not found has none.
+- Editor: search and sharing (24): Collapsed ready, suggestions, hidden; Open ready, suggestions (4 codes: title_long, cover_alt, no_h, short), checking, hidden, other site (`site: 1` = Journal); Panel defaults (codes: cover_none), filled in, outside the soft ranges, slug edited, slug taken, cover without alt, choose cover, social sharing open (with scrollY 560 on desktop), social customised, advanced with invalid canonical (scrollY 640), hidden from search (scrollY 700), mobile search preview, checking, saving, save failed; Saved (toast).
+- Editor: what the frontend gets (6): Formatted, Raw JSON, Copied, Draft article, Loading, Error.
+- States that wait on a timer (the debounce, the 2 s "Copied") are set up by their end state; none depends on the date or time, so none is `skip: clock-sensitive`.
+- Re-run Articles, Sites, Authors, Profile, Settings and Home: report any capture that moves above 10 %. Any failure needs the user's decision (an `approvedBy` exception or a design update).
+
+## Exit conditions
+
+- All existing Editor frames and the 30 new frames pass `task visual:check -- editor` with no per-state exception.
+- Vitest specs reported honestly, run or NOT RUN, with the red/green proof attached.
+- `task lint` and `bun lint` clean; no comment added.
+
+## Copy and behaviour not in the design (feed back to docs/design later)
+
+Each has a French entry in `web/src/i18n/messages.ts`.
+
+1. The codes now use the board copy: title_empty, desc_long, cover_none, slug_long, no_au, body_alt, short.
+2. The other fallback chips (excerpt, site default description, no image) and the chips of the dialog.
+3. The check failure text "Couldn't check this article." with "Try again" (no state in the design).
+4. The "Go to authors" and "Go to URL slug" labels, and where "Go to body" and "Go to authors" move focus.
+5. The clipboard-refused behaviour (no copy, no state).
+6. The excerpt-over-300 inline error text, and the "Save changes" disabled rule.
+
+## Manual checks screenshots cannot cover
+
+- Keyboard: tab order through the section, the panel (fields, Advanced, switch, previews, buttons) and the dialog; Escape; focus returns to the opener; focus lands on the field named by "Go to …"; "Copied" read by a screen reader.
+- Hover, focus ring and motion: slide-over and sheet transitions, the amber counter, the chip styles.
+- Real `task dev`: edit a title, description and cover, watch the check update after a pause, take a slug used by another article (409 flow and "Use …-2"), Save, then open "What the frontend gets" and compare it with `curl` on GET /v1/article/{id}/seo; hide from search and see "Hidden from search"; clipboard on a real browser over http://localhost.
+- Storage: block site data in the browser and check that the editor still works and the section still toggles.

features/image_variants_screens.feature

@@ -330,12 +330,11 @@ Feature: Image variants settings screens, list and add/edit slide-over
       And its footer is 64 px high with "Cancel" and a primary "Add variant", and the status text is empty
       And focus moves to the Name field
 
-    Scenario: Add variant opens a full page on mobile
+    Scenario: Add variant opens a bottom sheet on mobile
       Given the viewport is below 640 px
       When the user activates "Add variant"
-      Then a full-screen page opens with a 56 px header holding an arrow-left back button and the title "Add variant", no x button
+      Then a tall bottom sheet opens as specified in features/variants_visual_conformance.feature, "Add variant is a tall bottom sheet on mobile", superseding the former full-page layout
       And the form is followed by the Preview section, stacked, separated by a top border
-      And the footer is 72 px high with "Cancel" and "Add variant" sharing the width
 
     Scenario: Edit opens with the stored values
       When the user chooses "Edit" on the row "hero"

features/image_variants_screens.qa.md

@@ -54,7 +54,7 @@ Mock navigator.clipboard. No test freezes the system date (this screen shows no
     recompute; deleting the last row shows Empty; failures 404 (reloads the list) / 500 -> toast.
 14. **Reference card** — the 4 rows with badge words and icons, the exact JSON block text, the note;
     absent in Loading/Empty/Error/Forbidden; one column below 640.
-15. **Slide-over open/close** — desktop slide-over vs mobile full page (back arrow, no x), titles
+15. **Slide-over open/close** — desktop slide-over vs mobile bottom sheet (grabber, x; full-page back arrow superseded by features/variants_visual_conformance.feature), titles
     "Add variant" / "Edit variant: hero", focus on Name, pristine close without dialog, dirty close
     via Cancel/x/back/Escape opens "Discard changes?" with the right text, Keep editing / Discard
     changes behaviours, focus return to the opener.
@@ -135,7 +135,7 @@ Preview sample: north-wall.jpg, 4032 × 3024, 3.9 MB.
       `minmax(0,1.1fr) 104px 76px 72px 68px 92px 92px 132px 44px`, 36 px header, 48 px rows; cards 12 px
       padding with the name+switch line, the spec line, then count+menu; slide-over 960 px with a
       440 px form column; compare box 3:2, chips 8 px from the top corners, handle 32 px (44 px on
-      mobile) centred on a 2 px divider; footer 64 px (72 px on mobile).
+      mobile) centred on a 2 px divider; footer 64 px (mobile sheet footer: see features/variants_visual_conformance.feature).
 - [ ] Not drawn, no visual state: toggle failures, the purge/delete failure toasts, the 409-free
       status toasts, the 422 mapping, the clipboard states "Copied" (add only if the board draws it: it
       does not, so Vitest only), singular footer.

features/integration.feature

@@ -7,7 +7,7 @@ Feature: Integration screen (API reference)
   Background:
     Given /integration is a verified route (meta.auth "verified") rendered as IntegrationPage
       inside DashboardShell, per docs/design/routes.md
-    And the screen makes no /v1 calls; api: none (static)
+    And the screen makes one call, GET /v1/image-variants, for owner and admin sessions only (features/integration_images.feature)
     And the PageHeader shows breadcrumb "Integration", title "API reference" and description
       "Everything a developer needs to build on RenewCMS."
     And the endpoint catalogue is a typed static data file at web/src/data/apiCatalogue.ts, and the view only renders it
@@ -37,7 +37,7 @@ Feature: Integration screen (API reference)
   Scenario: Default, every card collapsed
     When the user navigates to /integration
     Then the intro reads "RenewCMS is headless: it stores your content and your own code displays it. There are two ways in. Public read-only access lets a website read online articles. API keys let a script or service manage articles, media and users without the back-office."
-    And a "Base URL" row shows window.location.origin in a monospace box with a "Copy" button (icon copy)
+    And a "Base URL" label sits above a CodeSnippet with the single tab "Base URL" showing window.location.origin and a "Copy" button (icon copy)
     And every EndpointCard is collapsed as a 44 px row: method badge, mono path, one-line description, chips, chevron
     And the sticky section index lists the sections on desktop and a "Jump to" select lists them on mobile
 
@@ -69,8 +69,8 @@ Feature: Integration screen (API reference)
     And a "Request body" table lists:
       | Name  | Type   | Required | Rule                                         |
       | title | string | Yes      | 3 to 200 characters. Can't be changed later. |
-      | body  | string | Yes      | Up to 10 000 characters.                     |
-    And tabs fetch, curl and Response show, fetch active, with a CodeBlock labelled "JavaScript" and a ghost "Copy" button
+      | body  | string | No       | No length limit.                             |
+    And one CodeSnippet with the tabs fetch, curl and Response shows, fetch active, with a "Copy" button
     And an "Errors" list shows a status chip with a one-line caption for 400, 401
 
   Scenario: Query parameters table, new UI beyond the board, user-approved
@@ -90,8 +90,8 @@ Feature: Integration screen (API reference)
     Then <method> <path> lists these fields: <fields>
     Examples:
       | method | path             | fields |
-      | POST   | /v1/article/     | title string required 3-200; body string required max 10000 |
-      | PATCH  | /v1/article/{id} | body string required max 10000 |
+      | POST   | /v1/article/     | title string required 3-200; body string optional, no length limit |
+      | PATCH  | /v1/article/{id} | body string optional, no length limit |
       | PATCH  | /v1/media/{id}   | filename string required |
       | POST   | /v1/media/merge  | keep_id number required >0; merge_ids number[] required min 1 each >0 |
       | POST   | /v1/media/       | multipart/form-data, 1 file field named "file" |
@@ -114,7 +114,7 @@ Feature: Integration screen (API reference)
   Scenario: Authentication section
     Then card "Public" reads "No key needed. Two read-only routes, and only online articles are returned." and names GET /v1/article/ and GET /v1/article/{id}
     And card "API key" reads "Send `Authorization: Bearer rcms_…`. Requests act as the user who created the key, with that user's role (owner or admin). A key never has more rights than its creator."
-    And its CodeBlock has tabs curl and fetch for GET /v1/auth/me, using the current origin
+    And its CodeSnippet has tabs curl and fetch for GET /v1/auth/me, using the current origin
     And it says "Keys start with `rcms_` and are shown in full once, when you create them."
     And a "Manage API keys" link navigates to /integration/api-keys
     And Note 1 reads "A key can't create, list or revoke API keys, verify or cancel a registration, or call anything under `/v1/system`. Those routes answer 403 "This action needs a real session." An invalid, unknown, expired or revoked key answers 401, even on public routes, and so does a key whose user was deleted or unverified."
@@ -139,7 +139,7 @@ Feature: Integration screen (API reference)
       | 409    | There's already a pending invite for this address. / This invite has already been accepted. |
       | 429    | Too many requests. Please try again later. |
       | 500    | Internal server error |
-    And a sample shows "HTTP/1.1 403 Forbidden", "Content-Type: text/plain", a blank line, and "This action needs a real session."
+    And a CodeSnippet with the single tab "Error response · text/plain" shows "HTTP/1.1 403 Forbidden", "Content-Type: text/plain", a blank line, and "This action needs a real session."
     And the table does not use the SPA copy of docs/design/states.md
 
   Scenario Outline: Per-endpoint error captions use the real strings
@@ -169,15 +169,15 @@ Feature: Integration screen (API reference)
     Given the app is served from origin "{origin}"
     When the user activates the Base URL "Copy" button
     Then "{origin}" is written to the clipboard
-    And the button shows icon check and "Copied", announced to assistive technology
+    And the button, named "Copy code", shows icon check and "Copied", announced politely
     When 2 seconds elapse
     Then the button reverts to icon copy and "Copy"
 
-  Scenario: Copied, CodeBlock is independent of Base URL
+  Scenario: Copied, CodeSnippet is independent of Base URL
     Given a card is expanded
-    When the user activates that CodeBlock's "Copy JavaScript example" button
-    Then that card's exact code string is written to the clipboard and only that button reads "Copied"
-    And the Base URL button and other CodeBlocks are unaffected
+    When the user activates that CodeSnippet's "Copy code" button
+    Then the active tab's exact code string is written to the clipboard and only that button reads "Copied"
+    And the Base URL button and other CodeSnippets are unaffected
 
   Scenario: Examples use the current origin and the API key header
     Then every fetch and curl example starts from "{origin}" and carries no ?format= query
@@ -189,5 +189,7 @@ Feature: Integration screen (API reference)
     Then the page scrolls to that anchor and the item reports aria-current "true"
     And on mobile the "Jump to" select opens and lists the same sections
 
-  Scenario: The page stays static
-    Then no /v1 request is made while the page renders or while any card is expanded
+  Scenario: Only the image variants calls
+    Then the only /v1 request is GET /v1/image-variants, sent for owner and admin sessions on mount, on "Try again" and on window focus
+    And expanding or collapsing any card makes no /v1 request
+    And a session that is neither owner nor admin makes no /v1 request

features/integration.qa.md

@@ -4,7 +4,7 @@
 
 Mount IntegrationPage inside DashboardShell with a resolved verified session and a test router at
 /integration. Stub `window.location.origin` to `https://cms.renew.example` (the board's sample) and
-`navigator.clipboard.writeText` per case. No `/v1` mocks are needed. A spec fails if any `/v1` call
+`navigator.clipboard.writeText` per case. Mock only GET /v1/image-variants (see integration_images.qa.md). A spec fails if any other `/v1` call
 is made.
 
 Catalogue spec (pure data, no mount, imports web/src/data/apiCatalogue.ts):
@@ -21,14 +21,14 @@ Catalogue spec (pure data, no mount, imports web/src/data/apiCatalogue.ts):
    - article: id, title, body, body_format, is_online, created_at, updated_at;
    - media item: id, filename, url, size, content_type, width, height, sha256, uploaded_by,
      created_at, used_in, duplicate;
-   - media list: items, next_cursor, counts (all, unused, duplicates);
+   - media list: items, total, page, size, counts (all, unused, duplicates), no next_cursor;
    - merge: articles_updated, merged;
    - usage: id, title, published;
    - user list item: id, kind, username, display_name, email, role, status, created_at;
    - invite: id, kind, email, status, created_at, expires_at;
    - settings: version.
    Any other key fails the spec. "images" and "status" are explicitly rejected on articles.
-5. Request-body tables equal the validate tags (title 3-200, body max 10000, filename, keep_id,
+5. Request-body tables equal the validate tags (title 3-200, body optional with no length limit, filename, keep_id,
    merge_ids, display_name, email). The multipart field is "file". Query tables: `format` on every
    article route, and q, hash, cursor, filter, sort, limit on GET /v1/media/.
 6. The three invite routes carry "Owner only", a 403 "Only the owner can do this." caption and the
@@ -44,12 +44,12 @@ Component specs, one per design state:
    invite rows show "Owner only".
 2. **Group scrolled, one card expanded**: click the POST /v1/article/ row. Assert the Query
    parameters table above the Request body table, the body rows, tabs fetch/curl/Response with fetch
-   active, the "JavaScript" CodeBlock, and the Errors list with 400 and 401.
+   active in one CodeSnippet, and the Errors list with 400 and 401.
 3. **Copied: base URL**: fake timers; click Copy. Clipboard gets the origin; check icon and "Copied";
    announced; reverts after 2 s.
-4. **Copied: CodeBlock**: expand a card; click "Copy JavaScript example". Clipboard gets that code,
+4. **Copied: CodeSnippet**: expand a card; click "Copy code". Clipboard gets the active tab's code,
    only that button reads "Copied", and it reverts after 2 s.
-5. **Authentication**: both cards, curl/fetch tabs for GET /v1/auth/me, the "Manage API keys" link
+5. **Authentication**: both cards, a CodeSnippet with curl/fetch tabs for GET /v1/auth/me, the "Manage API keys" link
    href /integration/api-keys, Note 1, Note 2.
 6. **Session only**: the corrected banner; lock icon and "Session only" chip only on rows that
    answer 403; the caption on the login family; no expand control; the "Public auth flow" rows with
@@ -61,6 +61,7 @@ Component specs, one per design state:
 9. **Tabs**: curl and Response render for a card. curl contains the stubbed origin and the
    Authorization header only on non-public routes. Not visually checked.
 10. **Notes**: format note, image-prefix note, CORS note.
+11. **Base URL and error sample**: both are CodeSnippets (single tabs "Base URL" and "Error response · text/plain").
 
 ## Visual (`task visual:check -- integration`, desktop and mobile, light and dark)
 
@@ -78,7 +79,7 @@ diff, sets the smallest `maxPercent` that is sufficient, writes the reason, and
 - [ ] Default (exception: owner-only chips and rate-limit line)
 - [ ] Group scrolled, one card expanded (exception: Query parameters table)
 - [ ] Copied: base URL (must pass 10 %)
-- [ ] Copied: CodeBlock (must pass 10 %)
+- [ ] Copied: CodeSnippet (must pass 10 %)
 - [ ] Authentication (must pass 10 %; Note 1 text changed)
 - [ ] Session only (exception: banner, 13th row, captions, Public auth flow block)
 - [ ] Errors (exception: 409 row)
@@ -88,7 +89,7 @@ None of these states is clock-sensitive, so none is skipped.
 
 ## Manual
 - Keyboard and focus order: index, Base URL Copy, each row (Enter/Space), tab strip (arrow keys),
-  CodeBlock Copy, the pre (tabindex 0), Jump to on mobile.
+  CodeSnippet Copy, the pre (tabindex 0), Jump to on mobile.
 - Hover and motion on ghost Copy buttons and rows.
 - Find-in-page and a deep link to an `#ep-...` anchor.
 - Real origin in a production build and under `task dev`.

features/integration_images.feature

@@ -0,0 +1,305 @@
+Feature: Integration: images and variants, and CodeSnippet as the only code block
+
+  As a developer building a site on RenewCMS
+  I want the Integration page to explain image variants and give me copyable, correct URLs
+  So that I can request the right image size without reading the source
+
+  Background:
+    Given the spec of record is docs/design/screens/integration.md ("Integration: images and ?v="),
+      docs/design/screens/integration-api-keys.md, docs/design/components.md (CodeSnippet), the boards
+      docs/design/source/IntegrationImages.dc.html and CodeSnippet.dc.html, and docs/design/routes.md
+    And this slice is SPA only: no Go change, and the image API is the one of features/image-variants.feature
+    And /integration is a verified route rendered as IntegrationPage inside DashboardShell, per
+      features/integration.feature
+    And the section "Images and variants" has the anchor id "images", sits where the board draws it (after the API groups and before "Session only" and "Errors"), and has an entry "Images and variants" in the section index and the "Jump to" select
+    And the section index and the "Jump to" select list the sections in page order, so the "Images and variants" entry sits right before "Session only"
+    And the board and its own index disagree on this position, which is logged for the design pass
+    And the section title is an h2 "Images and variants" (18/26) with sub headings h3 (14/22)
+    And the section intro reads "Every image in the media library can be requested as a named variant. Add the
+      ?v=<variant-name> parameter to the image URL. The original file is never changed, and a variant is generated the
+      first time it is requested. Variants are managed in Settings, Media, Variants."
+    And the section calls, with a relative URL through useApi only, GET /v1/image-variants, an owner/admin-only route
+    And an item has the fields name, width, height, fit, format, quality, generate_on_upload, enabled,
+      generated_files and cache_size, and items arrive in name order
+    And only items with enabled true are "enabled variants"; the order of the API response is kept
+    And "first variant" below means the first enabled variant, "second" and "third" the next ones, each falling back to the first when absent
+    And {origin} is window.location.origin and {image} is the builder image, "north-wall.jpg", a fixed sample with no media lookup
+    And a variant URL is "{origin}/media/{image}?v={name}"
+    And every visible string goes through t(...), with the English text as the key and its French entry in
+      web/src/i18n/messages.ts
+    And the section uses Nuxt UI components and design tokens only, with no raw colour
+    And the list is read through the useImageVariantsStore
+    And the board sample data is {origin} "https://cms.renew.example", image "north-wall.jpg" and these variants, in this order:
+      | name    | width | height | format |
+      | thumb   | 400   | 300    | webp   |
+      | card    | 800   | null   | webp   |
+      | hero    | 1200  | 630    | webp   |
+      | square  | 600   | 600    | jpeg   |
+      | og      | 1200  | 630    | jpeg   |
+      | banner  | 1600  | 400    | webp   |
+      | teaser  | 640   | 360    | webp   |
+      | sidebar | 320   | null   | webp   |
+      | gallery | 1000  | 750    | webp   |
+      | avatar  | 96    | 96     | webp   |
+      | wide    | 1920  | 800    | webp   |
+      | mini    | 120   | 90     | webp   |
+
+  Rule: CodeSnippet is the only code block
+
+    Scenario: CodeSnippet anatomy
+      Given a CodeSnippet with the tabs curl, HTML and JavaScript
+      Then a header row at least 44 px high holds the tab list (aria-label "Language") on the left and the Copy button on the right
+      And the selected tab has text --ui-text-highlighted, weight 500 and a 2 px --ui-primary underline
+      And unselected tabs have --ui-text-toned and weight 400
+      And below it a pre with tabindex 0 shows the active tab's code in IBM Plex Mono 12/19, scrolls horizontally and has no syntax colouring
+      And the background is --ui-bg-elevated with a --ui-border border and no corner radius
+      And the Copy button is at least 44 px wide, reads "Copy" with icon copy and has the accessible name "Copy code"
+      And each tab and the Copy button show a 2 px --ui-primary focus ring when focused with the keyboard
+
+    Scenario: A CodeSnippet with one tab shows a plain label
+      Given a CodeSnippet with a single tab "Base URL"
+      Then the label is plain --ui-text-muted text, not a tab, with no underline
+
+    Scenario: Copy writes the active tab and reads Copied for 2 s
+      Given a CodeSnippet with the tabs curl, HTML and JavaScript and the JavaScript tab active
+      When the user activates "Copy"
+      Then the JavaScript code is written to the clipboard
+      And the button shows icon check and "Copied" in --ui-success
+      And the text lives in an aria-live "polite" region, so "Copied" is announced politely
+      When 2 seconds elapse
+      Then the button reads "Copy" with icon copy again
+
+    Scenario: Two CodeSnippets copy independently
+      Given the page shows several CodeSnippets
+      When the user activates "Copy" on one of them
+      Then only that one reads "Copied"
+
+    Scenario Outline: Every code block of the product is a CodeSnippet
+      Then <place> renders as a CodeSnippet with <tabs>
+      And no CodeBlock, no shiki highlighted block and no hand-rolled copy button remains there
+      Examples:
+        | place                                                      | tabs                                         |
+        | Base URL on /integration (label "Base URL" above it)       | one tab "Base URL" with {origin}             |
+        | the Authentication "API key" example                       | tabs curl and fetch, GET /v1/auth/me         |
+        | an expanded EndpointCard                                   | tabs fetch, curl and Response, fetch active  |
+        | the Errors section sample                                  | one tab "Error response · text/plain"        |
+        | the "Request an image" snippet                             | tabs curl, HTML and JavaScript               |
+        | the URL builder output                                     | one tab "URL"                                |
+        | the one-time key of ApiKeyReveal on /integration/api-keys  | one tab "API key"                            |
+
+    Scenario: The old component is removed
+      Then web/src/components/CodeBlock.vue no longer exists and nothing imports it, including EndpointCard.vue and IntegrationView.vue
+      And web/src/components/CodeText.vue stays, because it renders inline code in prose and not a code block
+      And the shiki highlighter helpers and styles used only by CodeBlock are removed when nothing else uses them
+      And the hand-rolled Base URL box, the error sample pre and the key box of ApiKeyReveal are gone
+
+    Scenario: The one-time key reveal keeps its behaviour
+      Given the ApiKeyReveal dialog opens after POST /v1/api-key answers 201
+      Then the key is shown in a CodeSnippet with one tab "API key" and "Copy"
+      And the Copy button receives focus when the dialog opens, as before
+      And activating it writes the full key to the clipboard and reads "Copied" for 2 s, announced politely
+      And the warning "You won't be able to see this key again." and the text "Closing this window discards the key from the screen. Copy it first." stay unchanged
+
+  Rule: The variants list is reloaded
+
+    Scenario: Reload triggers
+      Given the session role is "owner" or "admin"
+      Then GET /v1/image-variants is sent on mount
+      And it is sent again on "Try again"
+      And it is sent again on every window focus event while /integration is shown
+      And a reload keeps the active snippet tab and the builder selection when the selected variant is still enabled
+
+    Scenario: A non-admin never calls the API
+      Given the session role is neither "owner" nor "admin"
+      Then no request to GET /v1/image-variants is sent on mount, on focus or on any other trigger
+
+  Rule: Section content
+
+    Background:
+      Given the session role is "owner"
+
+    Scenario: I1. Many variants
+      Given GET /v1/image-variants answers 200 with the twelve sample variants enabled and "print" (disabled)
+      When the user opens /integration#images
+      Then the h3 "Request an image" shows a CodeSnippet with tabs "curl", "HTML", "JavaScript", with HTML active
+      And the h3 "Variants" shows "12 enabled variants"
+      And the table has the columns Name, Dimensions, Format and Example URL and 12 rows, in API order
+      And the "thumb" row reads "thumb", "400×300", "WebP", "/media/north-wall.jpg?v=thumb"
+      And the "card" row reads "800 × auto"
+      And the table body scrolls vertically at 264 px, because there are more than 6 rows
+      And the note reads "Disabled variants are not served. A request for one returns 400 "Unknown variant"."
+      And "print" is not a row
+      And the h3 "URL builder" shows the Image, Variant (default "thumb"), URL (CodeSnippet) and Preview
+      And the h3 "Responses" shows the responses table
+
+    Scenario: The disabled-variants note matches the backend
+      Given a variant "print" is disabled
+      When /media/north-wall.jpg?v=print is requested
+      Then the backend answers 400 application/json with {"status":400,"error":"unknown_variant","message":"Unknown variant","detail":"print"} and does not fall back to the original
+      And the note is shown only when the response contains at least one disabled variant
+
+    Scenario: The snippets use the first variants
+      Given the sample variants
+      Then the curl tab reads: curl -O "https://cms.renew.example/media/north-wall.jpg?v=thumb"
+      And the HTML tab reads:
+        """
+        <img
+          src="https://cms.renew.example/media/north-wall.jpg?v=card"
+          srcset="https://cms.renew.example/media/north-wall.jpg?v=thumb 400w,
+                  https://cms.renew.example/media/north-wall.jpg?v=card 800w,
+                  https://cms.renew.example/media/north-wall.jpg?v=hero 1200w"
+          sizes="(min-width: 800px) 800px, 100vw"
+          alt="North wall">
+        """
+      And the JavaScript tab reads:
+        """
+        const res = await fetch("https://cms.renew.example/media/north-wall.jpg?v=thumb")
+        if (!res.ok) throw new Error(await res.text())
+        const blob = await res.blob()
+        """
+      And the srcset widths 400w, 800w and 1200w are sample values, not read from the variants
+
+    Scenario: Tables and snippet scroll on narrow screens
+      Given a viewport of 390 px
+      Then the variants table keeps a minimum width of 520 px and scrolls horizontally inside its border
+      And the Responses table keeps a minimum width of 560 px and scrolls horizontally
+      And the CodeSnippet body scrolls horizontally and the page itself does not
+
+    Scenario: I2. One variant
+      Given GET /v1/image-variants answers 200 with only "thumb" enabled
+      Then the Variants heading reads "1 enabled variant" and the table has one row without a vertical scroll limit
+      And the three snippets use "thumb" for the first, second and third variant
+      And the "Disabled variants are not served" note is not shown
+
+    Scenario: I3. No variants, admin
+      Given the session role is "admin"
+      And GET /v1/image-variants answers 200 with {"items": []} or only disabled variants
+      Then an empty block with the layers icon shows "No image variants yet"
+      And its text reads "Until you add a variant, any request with the ?v= parameter returns status 400 unknown_variant. Requests without it return the original image."
+      And a primary button "Go to image variants" navigates to /settings/media/variants
+      And the snippets use the placeholder <variant-name>
+      And no table and no URL builder are drawn
+      And the Responses table is drawn
+
+    Scenario: I4. No variants, not an admin
+      Given the session role is neither "owner" nor "admin"
+      Then no request to GET /v1/image-variants is sent
+      And the empty block shows "No image variants yet"
+      And its text reads "Ask an owner or admin to add one. Until you do, any request with the ?v= parameter returns status 400 unknown_variant. Requests without it return the original image."
+      And there is no button and no link
+      And the snippets use the placeholder <variant-name>
+
+    Scenario: The empty-state copy is corrected against the backend
+      Then the I3 and I4 texts above replace the design copy "the ?v= parameter is not accepted and every request returns the original image", which is false
+      And the backend returns 400 unknown_variant for any ?v= value when no variants exist, and serves the original only without ?v
+      And the board copy is logged as wrong for the design pass, and docs/design is not edited
+
+    Scenario: I5. Variant removed
+      Given the URL builder has "hero" selected
+      And a reload of the list returns no enabled "hero"
+      Then the Variant field reads "hero (removed)" and has a --ui-warning border
+      And the URL snippet reads "https://cms.renew.example/media/north-wall.jpg?v=hero"
+      And a warning alert (role alert, triangle-alert icon) reads the title "The variant "hero" no longer exists"
+      And its text reads "There is no fallback to the original. Requests with ?v=hero return status 400 with the body { "status": 400, "error": "unknown_variant", "message": "Unknown variant", "detail": "hero" }. Remove the parameter to get the original image, or pick another variant."
+      And the Preview is dimmed to 50 %, 4 / 3, and reads "No preview: unknown variant"
+
+    Scenario: A reload on window focus can trigger I5
+      Given the builder has "hero" selected and the list was loaded with "hero" enabled
+      When "hero" is disabled or deleted elsewhere and the window receives a focus event
+      Then GET /v1/image-variants is sent again and I5 is shown
+
+    Scenario: I6. Loading
+      Given GET /v1/image-variants has not answered
+      Then three skeleton blocks of 140, 200 and 120 px (--ui-bg-accented) fill a region with aria-busy "true"
+      And the "Request an image" snippet, the variants table, the URL builder and the Responses table are not drawn
+      And the intro paragraph is drawn
+
+    Scenario Outline: I7. Error loading
+      Given GET /v1/image-variants fails with <failure>
+      Then an error alert (role alert, circle-x icon) reads "Couldn't load image variants"
+      And its text reads "The snippets below still work. The variant list and the URL builder need a connection."
+      And a button "Try again" is shown
+      And the "Request an image" snippet is drawn with the placeholder <variant-name>
+      And no table, no URL builder and no Responses table are drawn
+      When the user activates "Try again"
+      Then GET /v1/image-variants is sent again
+      Examples:
+        | failure           |
+        | status 500        |
+        | a network failure |
+
+    Scenario: A 403 on the list is handled as not an admin
+      Given the session role is "owner" but GET /v1/image-variants answers 403
+      Then I4 is shown
+      And a 401 is left to the global handler of features/api_client_global_error_handling.feature
+
+    Scenario: I8. Snippet copied
+      Given the sample variants and the HTML tab active
+      When the user activates "Copy" on the "Request an image" snippet
+      Then the HTML code is written to the clipboard
+      And the button reads "Copied" with icon check for 2 s, announced politely
+      And the URL builder's Copy button still reads "Copy"
+
+    Scenario: The URL builder
+      Given the sample variants
+      Then the Image field is a select showing "north-wall.jpg" and the Variant field is a select listing the enabled variants
+      When the user picks "square" in Variant
+      Then the URL snippet reads "https://cms.renew.example/media/north-wall.jpg?v=square"
+      And the Preview is a framed placeholder with aspect-ratio width / height of the variant, and 4 / 3 when the width or the height is null, shows the label "square · 600×600 · JPEG" and is announced with role img and the same aria-label
+      And the Preview is at most 240 px high and full width
+      And no image is requested from the server
+
+    Scenario: I9. URL builder copied
+      Given the URL builder shows "https://cms.renew.example/media/north-wall.jpg?v=thumb"
+      When the user activates "Copy" on the URL snippet
+      Then that exact URL is written to the clipboard
+      And the button reads "Copied" for 2 s, announced politely
+      And the "Request an image" snippet's button still reads "Copy"
+
+    Scenario: The Responses table
+      Given any state except Loading and Error loading
+      Then the table has the columns Request, Status and Response and these rows:
+        | request                      | status | response                                       | body                                                                                                       |
+        | /media/photo.png?v=thumb     | 200    | The variant image. Generated on first request. |                                                                                                            |
+        | /media/photo.png?v=unknown   | 400    | Unknown variant                                | { "status": 400, "error": "unknown_variant", "message": "Unknown variant", "detail": "unknown" }           |
+        | /media/photo.png?width=400   | 400    | Unsupported parameter                          | { "status": 400, "error": "unsupported_parameter", "message": "Unsupported parameter", "detail": "width" } |
+        | /media/missing.png?v=thumb   | 404    | Not found                                      | 404 page not found                                                                                         |
+        | /media/huge.png?v=thumb      | 413    | Source image too large                         | The source image is too large to generate this variant.                                                    |
+        | /media/photo.png?v=thumb     | 500    | Unable to read the file                        | Unable to read the file                                                                                    |
+      And the body of the 400 rows is application/json and monospace --ui-text-muted below the response text
+      And the 404 body is text/plain "404 page not found"
+      And the 413 and 500 bodies are text/plain
+      And the table has no 409 and no 422 row
+      And the 413 and 500 rows are added although the board lacks them, because the handler returns them, and this is logged for the design pass
+
+    Scenario: The error sample tab names its content type
+      Then the Errors section sample keeps its single tab "Error response · text/plain"
+      And the image JSON errors are covered only by the Responses table, where their bodies are application/json
+      And no snippet labelled text/plain shows an unknown_variant or unsupported_parameter body
+
+    Scenario: The page calls only the image variants route
+      When the user opens /integration as an owner or admin
+      Then GET /v1/image-variants is sent once on mount, plus once per "Try again" and once per window focus event
+      And no other /v1 call is made
+      And for any other role no /v1 call is made
+
+  Rule: The existing Integration surfaces use CodeSnippet
+
+    Scenario: Authentication example
+      Then the "API key" card shows one CodeSnippet with tabs curl and fetch for GET /v1/auth/me, curl active, using {origin}
+      And there is no outer UTabs wrapper and no label "Shell" or "JavaScript"
+
+    Scenario: Endpoint card examples
+      When the user expands a card
+      Then one CodeSnippet holds the tabs fetch, curl and Response, fetch active
+      And the tab list uses the underline style, not the UTabs link style
+      And the Copy button copies the active tab and its accessible name is "Copy code"
+      And the "Errors" list below it is unchanged
+
+    Scenario: Base URL and error sample
+      Then "Base URL" is a label above a CodeSnippet whose only tab is "Base URL" and whose code is {origin}
+      And the Errors sample is a CodeSnippet reading "HTTP/1.1 403 Forbidden", "Content-Type: text/plain", a blank line, "This action needs a real session."
+
+    Scenario: Copy buttons of the Integration page are independent
+      When the user copies the Base URL
+      Then only the Base URL button reads "Copied"

features/integration_images.qa.md

@@ -0,0 +1,114 @@
+# QA: Integration images and variants, and CodeSnippet as the only code block
+
+SPA only. No Go test, no live server, no SMTP, no real SQLite.
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Common setup: mount IntegrationPage inside DashboardShell at /integration with a test router, a resolved
+verified session whose role is set per case, and `window.location.origin` stubbed to
+`https://cms.renew.example`. Mock `/v1` through the same `useApi` seam as `variantsTestKit.ts`.
+Stub `navigator.clipboard.writeText` per case and use fake timers. A spec fails on any `/v1` call
+that is not listed for the case.
+
+Variants fixture: the twelve board variants of the feature plus "print" (enabled false), in the board order, with
+full item fields (fit, quality, generate_on_upload, generated_files, cache_size).
+
+CodeSnippet component spec (no router, no `/v1`):
+1. Three tabs: header with tablist aria-label "Language", the first tab selected with an underline class,
+   the Copy button named "Copy code".
+2. A click on a tab switches the pre content. The Copy button writes the active tab's code.
+3. One tab renders a muted label, not a role tab.
+4. Copy: clipboard called with the code, "Copied" and icon check inside an aria-live "polite" element,
+   back to "Copy" after 2000 ms (advance 1999 and 2000). Two instances copy independently.
+5. The pre has tabindex "0" and no syntax-highlight markup.
+
+Integration images specs, one per design state, each with the mocked `/v1` call:
+1. **Many variants** (owner): GET /v1/image-variants -> 200 with the fixture. Assert the section order (Media
+   group, Images and variants, Session only, Errors), anchor "images", the section index entry, "12 enabled variants",
+   12 table rows with "print" absent, the 264 px max-height class on the table body, the disabled note, exact curl,
+   HTML and JavaScript strings, HTML tab active, the Responses rows and bodies.
+2. **One variant**: 200 with only "thumb" enabled. "1 enabled variant", one row, no max-height limit, the three
+   snippet slots all use "thumb", no disabled note.
+3. **No variants, admin**: role admin, 200 with {"items": []}. Empty block, text, the "Go to image variants" link with
+   href /settings/media/variants, placeholder <variant-name> in the snippets, no table, no builder, Responses present.
+   Repeat with a fixture containing only disabled variants.
+4. **No variants, not an admin**: role "member" (or no role). Assert no GET /v1/image-variants call on mount or on a
+   window focus event, the non-admin text, no link and no button. Add: role owner with a 403 answer renders the same state.
+5. **Variant removed**: load the fixture, select "hero", make the mock return a list without "hero", then dispatch
+   `window.dispatchEvent(new Event('focus'))`. Assert a second GET, "hero (removed)", the warning alert title and text
+   with the exact 400 body, the URL snippet ends with ?v=hero, the preview label "No preview: unknown variant", 4 / 3
+   aspect and 50 % opacity. Repeat with the reload triggered by "Try again" after a failed first load.
+6. **Loading**: GET /v1/image-variants pending. Assert three skeletons inside an aria-busy region, and no snippet,
+   no table, no builder, no Responses table.
+7. **Error loading**: 500, then a rejected fetch. Assert the alert copy, the snippet present with
+   <variant-name>, no table and no builder, no Responses table. Click "Try again" and assert a second call
+   and the success state replaces the alert.
+8. **Snippet copied**: click Copy on the "Request an image" snippet. Clipboard receives the active (HTML) code, button
+   reads "Copied" in an aria-live polite region, reverts after 2 s, and the builder's button is unaffected.
+9. **URL builder copied**: the clipboard receives "https://cms.renew.example/media/north-wall.jpg?v=thumb".
+   Pick "square" first and assert the URL, preview label "square · 600×600 · JPEG" and the 600 / 600 aspect ratio.
+
+Behaviour specs:
+10. **Reload triggers**: mount sends one GET; each focus event sends one more; "Try again" sends one more; a reload with
+    the selected variant still enabled keeps the active tab and the selection. A non-admin sends none on any trigger.
+11. **Responses table**: the two 400 bodies are the exact JSON strings of the feature; the 404 body is
+    "404 page not found"; the 413 body is "The source image is too large to generate this variant." and the 500 body is
+    "Unable to read the file"; no 409 or 422 row.
+12. **Error sample label**: the Errors sample tab reads "Error response · text/plain" and no snippet in the images
+    section carries a text/plain label.
+
+Migration specs (update or replace the existing assertions of `IntegrationView.spec.ts`, the EndpointCard spec
+and the ApiKeys specs):
+13. Base URL is a CodeSnippet with the single tab "Base URL", origin in the code, Copy -> "Copied" -> "Copy" after 2 s.
+14. Authentication example: tabs curl and fetch for GET /v1/auth/me, no "Shell" or "JavaScript" label.
+15. Expanded EndpointCard (POST /v1/article/): tabs fetch, curl, Response in one CodeSnippet, fetch active,
+    Copy copies the active tab, only that button reads "Copied". The Errors list is unchanged.
+16. Errors sample is a CodeSnippet containing the four sample lines.
+17. ApiKeyReveal: the key is in a CodeSnippet with the single tab "API key", the Copy button is focused when the
+    dialog opens, and Copy writes the full key and reads "Copied" for 2 s.
+18. Source guard: nothing imports `@/components/CodeBlock.vue` (EndpointCard.vue and IntegrationView.vue included),
+    the file is deleted, and `CodeText.vue` still exists.
+19. The Integration page makes the calls listed in the feature for owner and admin, and none for other roles. The old
+    "page stays static" assertions in `IntegrationView.spec.ts` are changed accordingly.
+20. Every new string has a French entry (the existing i18n completeness spec must pass).
+
+## Visual (`task visual:check -- integration`, desktop and mobile, light and dark)
+
+Every capture must be within 10 %. Group "Integration: images" (board `IntegrationImages.dc.html` through AppFrame),
+setups in `web/visual/states.ts`, with the board's sample data: origin `https://cms.renew.example`, image
+`north-wall.jpg`, the twelve variants of the feature (plus disabled "print" so the note shows in Many), role admin
+unless stated.
+
+| State | Mock |
+|---|---|
+| Many variants | GET /v1/image-variants -> 12 enabled + "print" disabled, HTML tab active, builder on "thumb" |
+| One variant | -> only "thumb" |
+| No variants, admin | -> {"items": []}, role admin |
+| No variants, not an admin | role without owner/admin, no call |
+| Variant removed | builder on "hero", list without "hero" after the reload (first 5 as the board) |
+| Loading | request never resolves |
+| Error loading | status 500 |
+| Snippet copied | Many with the snippet in the Copied state (clipboard stubbed) |
+| URL builder copied | Many with the URL snippet in the Copied state |
+
+Approved visual exceptions (user, own turn), each with `approvedBy` "Florian Sylvain":
+- I2 One variant, desktop light, `maxPercent` just above the measured value (about 16 %), reason "board draws the striped preview offset by 32 px".
+- I8 Snippet copied, desktop light, `maxPercent` just above the measured value (about 12 %), same reason.
+- Errors, mobile, `maxPercent` just above the measured value (about 18.5 %), reason "the board changed; already 17.33 % at HEAD". Listed as a design-pass item.
+- The `integration-api-keys` mobile failures (14 to 24 %) are NOT excepted. They predate this slice (floating inset dialog versus the board's flush bottom sheet, an overlay-pattern slice). They stay red and documented, and this slice's gate is scoped to the Integration screen.
+
+Also re-run the existing groups affected by the migration and keep them within 10 %: Integration ("1. Default",
+"2. Group scrolled, one card expanded", "3a. Copied: base URL", "3b. Copied: CodeSnippet", "4. Authentication",
+"6. Errors") and API keys ("One-time reveal", "One-time reveal: copied"). The board names stay as the design gives
+them. Existing pre-approved exceptions stay as recorded. Skipped: none are clock-sensitive.
+
+## Manual checks (not coverable by screenshots)
+- Keyboard: tab order inside a CodeSnippet is tabs, then Copy, then the `pre` (tabindex 0). Arrow keys move
+  between tabs. Enter and Space activate Copy. The focus ring is 2 px primary.
+- A screen reader announces "Copied" politely after Copy, and not again on "Copy" returning.
+- Hover and motion: Copy and tabs hover states, no motion on copy other than the label swap.
+- Find-in-page and the index entry "Images and variants" scroll to `#images`; opening `/integration#images` lands on the section.
+- The Variants table scrolls inside its 264 px body with the mouse wheel and keyboard, and the header stays visible.
+- Real clipboard in a browser (secure context) copies the exact snippet text.
+- Against a running server: `?v=<disabled>`, `?v=<unknown>` and `?width=400` answer 400 application/json with the
+  documented bodies, and a missing image answers 404 text/plain "404 page not found".

features/media_browse.feature

@@ -20,8 +20,12 @@ Feature: Media page, part 1: browse and manage
     And useMedia is a composable over useApi. It exposes the list state (items, counts, loading,
       error), the request functions for list, usage, rename and delete, and the copy helper, and
       it maps ApiError and NetworkError to the states below
-    And MediaPage calls GET /v1/media/ with the query built from the URL, always with limit=100,
-      and every request carries the jwt cookie through useApi
+    And MediaPage calls GET /v1/media/ with the query built from the URL, always with an explicit
+      page and size (page=1&size=25 by default, or the stored size), and every request carries
+      the jwt cookie through useApi
+    And this slice is amended by features/media_pagination_api.feature and
+      features/media_pagination_screen.feature: limit=100 and next_cursor are gone, the body is
+      { items, total, page, size, counts }, and the list is paginated
     And search, tab, sort and view live in the URL query string so the view can be linked and
       survives a reload: ?q= (search text), ?filter= ("unused" or "duplicates"; absent means
       All), ?sort= ("oldest", "name" or "largest"; absent means Newest), ?view= ("list"; absent
@@ -90,10 +94,10 @@ Feature: Media page, part 1: browse and manage
       | 10 | bathroom-tiles.png    | 860 KB | 1800 × 1200 | PNG  | 0    | Marta Alves | 4 Aug 2026  | alpha     |
       | 11 | lime-plaster.jpg      | 2.1 MB | 3200 × 2133 | JPEG | 2    | Inès Duarte | 19 Jul 2026 |           |
       | 12 | floorboards.jpg       | 2.4 MB | 3600 × 2400 | JPEG | 4    | Inès Duarte | 14 Jun 2026 | duplicate |
-      with counts { all: 12, unused: 2, duplicates: 2 }, and next_cursor null
+      with counts { all: 12, unused: 2, duplicates: 2 }, total 12, page 1, size 25
 
   Scenario: Default, many images
-    Given GET /v1/media/?filter=all&sort=newest&limit=100 resolves 200 with the 12-image fixture
+    Given GET /v1/media/?filter=all&sort=newest&page=1&size=25 resolves 200 with the 12-image fixture
     When the user navigates to /media
     Then the breadcrumb reads "Media" (mobile title "Media")
     And the tabs read "All 12", "Unused 2", "Duplicates 2", with "All" selected, and the
@@ -144,7 +148,7 @@ Feature: Media page, part 1: browse and manage
   Scenario Outline: The query string is the source of truth for search, tab, sort and view
     Given GET /v1/media/ is mocked
     When the user opens /media<url>
-    Then GET /v1/media/ is sent with "<request>" and limit=100
+    Then GET /v1/media/ is sent with "<request>" and page=1&size=25
     And the control shows "<control>"
 
     Examples:
@@ -161,7 +165,7 @@ Feature: Media page, part 1: browse and manage
   Scenario: Changing a control writes the query string and reloads the list
     Given the Default state has loaded
     When the user types "wall" in the search field
-    Then after a 120 ms debounce the URL gains ?q=wall and GET /v1/media/?q=wall&filter=all&sort=newest&limit=100 is sent
+    Then after a 120 ms debounce the URL gains ?q=wall and GET /v1/media/?q=wall&filter=all&sort=newest&page=1&size=25 is sent
     When the user selects the "Unused" tab
     Then the URL reads ?q=wall&filter=unused and the list is requested again
     When the user picks "Largest" in the sort menu
@@ -187,7 +191,7 @@ Feature: Media page, part 1: browse and manage
 
   Scenario: No results, search and filter
     Given the Default state has loaded
-    When the user selects "Unused" and types "wall" and GET /v1/media/?q=wall&filter=unused&sort=newest&limit=100 resolves 200 with zero items
+    When the user selects "Unused" and types "wall" and GET /v1/media/?q=wall&filter=unused&sort=newest&page=1&size=25 resolves 200 with zero items
     Then a panel replaces the images with the search icon, title `No images match "wall"`, text "Nothing matches in Unused. Check the spelling, or clear the filters." and an outline "Clear filters" button
     When the user activates "Clear filters"
     Then the search field is emptied, the tab returns to "All", ?q and ?filter leave the URL, and the Default cards reappear

features/media_browse.qa.md

@@ -147,5 +147,6 @@ Manual checks screenshots cannot cover:
 - **Toast placement and stacking** on a live app.
 - **Counts after a delete** against a live server: the background refresh gives the true Unused
   and Duplicates counts.
-- **A library above 100 images**: B1 requests `limit=100` and ignores `next_cursor`, so only the
-  first 100 show.
+- **A library above 25 images**: amended by `features/media_pagination_screen.feature`. B1 used to
+  request `limit=100` and ignore `next_cursor`; the page now requests `page=1&size=25` (or the stored
+  size) and shows a paginator, so every image is reachable.

features/media_library.qa.md

@@ -21,7 +21,7 @@ Package: `test` (black-box). New file `test/media_library_http_test.go`. Fake ty
 
 ## HTTP checks
 10. Auth table: each method+path from the outline with no cookie -> 401, stale cookie -> 401 with `apperr.UnauthorizedErrorMessage`, unverified cookie -> 403 with `apperr.VerificationRequiredErrorMessage`. Assert no fake method beyond the middleware's user lookup was called.
-11. List: decode `{items, next_cursor, counts}`. Assert each row of the sort, filter, `q` and `hash` tables, the combined query, the paging walk (limit 2 across three pages ending in `next_cursor == null`), the empty library (`items` is `[]` in the raw JSON, not `null`), SVG `width`/`height` are JSON `null` (assert on the raw body), and `counts` is unchanged by `q`/`filter`. Assert every 400 query row, body equals `apperr.MediaQueryErrorMessage + "\n"`.
+11. List (amended by `features/media_pagination_api.feature`): decode `{items, total, page, size, counts}`, with no `next_cursor`. Assert each row of the sort, filter, `q` and `hash` tables, the combined query, the paging walk (`size=5` across three pages with `page=1..3`, each reporting the same `total`), the empty library (`items` is `[]` in the raw JSON, not `null`), SVG `width`/`height` are JSON `null` (assert on the raw body), and `counts` is unchanged by `q`/`filter`. Assert every 400 query row, body equals `apperr.MediaQueryErrorMessage + "\n"`.
 12. Upload: for each allowed type assert 201, the item fields, `sha256` equals the test's own hash, `uploaded_by`, the url regex, and one repo entry with `UploadedByID == 1`. Upload identical bytes twice: both 201, second has `duplicate: true`, list `counts.duplicates == 1`. Assert filename rules (no extension gets `.png`, path stripped). Assert 413/415/400 statuses and bodies, that `Create` is never called on rejection, boundary 10485760 vs 10485761, a missing `file` part -> 400, and an armed `Create` failure -> 500 `"Internal server error\n"`.
 13. Rename: assert 200 with the new filename, the same `url`, the article body unchanged, and every invalid row -> 400 with `"Enter a filename.\n"` for the filename rows; 404 for 9999; 400 with `apperr.IdUint32ErrorMessage` for `abc`. Assert the repository filename is unchanged after each 400.
 14. Delete: in-use image -> 204 with an empty body, article bodies byte-identical, `deleteCalls == [1]`; 404, 400, 500 rows. The "file already gone" case is a persistence behaviour and is a manual item.

features/media_page_size_memory.feature

@@ -0,0 +1,128 @@
+Feature: Media page remembers the chosen page size
+
+  As a verified RenewCMS user
+  I want the page size I choose on the Media page to be remembered
+  So that I do not have to pick it again each time I come back or refresh
+
+  Background:
+    Given this slice follows features/articles_page_size_memory.feature and extends features/media_pagination_screen.feature; the URL keeps ?size= as in that spec and no visual or API change is made
+    And the size options stay "5 per page", "25 per page", "50 per page", "100 per page" and the default stays 25
+    And the chosen size is stored in localStorage under the key renewcms-page-size-media as the bare number (for example 5), one key per paginated list; Articles uses renewcms-page-size-articles and Activity renewcms-page-size-activity, and the three do not affect each other
+    And a MEDIA_PAGE_SIZE_KEY constant joins ARTICLES_PAGE_SIZE_KEY and ACTIVITY_PAGE_SIZE_KEY in web/src/lib/pageSizeMemory.ts and the existing readStoredPageSize, storePageSize and resolvePageSize helpers are reused
+    And only choosing a size in the page-size select writes the stored value; loading a URL never writes it
+    And an explicit valid ?size= in the URL is authoritative for that load and does not change the stored value
+    And an invalid ?size= in the URL falls back to 25, never to the stored value, and is replaced in the URL (features/media_pagination_screen.feature)
+    And a stored value that is not 5, 25, 50 or 100 is treated as absent
+    And localStorage that is unavailable or throws on read or write never raises an error or breaks the page: reads act as absent and writes are ignored
+    And logout does not clear the stored size
+    And a size change still resets page to 1 and drops page from the URL
+    And the Duplicates tab ignores the stored size (it always loads with size=100) and never writes it
+    And the picker and hash lookups ignore the stored size (fixed size=25 and size=100)
+    And the requests are GET /v1/media/?filter=F&sort=S&page=P&size=Z as in features/media_pagination_api.feature
+
+  Scenario Outline: Choosing a size stores it
+    Given nothing is stored and the user is on /media
+    When the user chooses "<label>" in the page-size select
+    Then localStorage renewcms-page-size-media is "<stored>"
+    And on success the URL is <url>
+
+    Examples:
+      | label        | stored | url             |
+      | 5 per page   | 5      | /media?size=5   |
+      | 25 per page  | 25     | /media          |
+      | 50 per page  | 50     | /media?size=50  |
+      | 100 per page | 100    | /media?size=100 |
+
+  Scenario: The stored size is restored when the page is opened without a size
+    Given localStorage renewcms-page-size-media is "5"
+    When the user navigates to /media
+    Then GET ...&page=1&size=5 is sent
+    And the page-size select reads "5 per page"
+    And on success the URL is replaced (no history entry) by /media?size=5
+
+  Scenario: The size survives leaving the page and coming back
+    Given the user chose "5 per page" on /media
+    When the user navigates to /, then back to /media
+    Then GET ...&size=5 is sent and the select reads "5 per page"
+
+  Scenario: The size survives a full page refresh
+    Given the user chose "5 per page" on /media
+    When the page is reloaded on /media?size=5, or on /media with the URL typed in without a size
+    Then GET ...&size=5 is sent and the select reads "5 per page"
+
+  Scenario: The stored size is kept across paging, search, tabs, sort and view
+    Given localStorage renewcms-page-size-media is "50" and the user is on /media?size=50
+    When the user activates Next, switches to the "Unused" tab, sorts by "Largest", switches to list view or searches "wall"
+    Then every request carries size=50 and the stored value stays "50"
+
+  Scenario: Changing the size again replaces the stored one
+    Given localStorage renewcms-page-size-media is "5"
+    When the user chooses "100 per page"
+    Then localStorage renewcms-page-size-media is "100"
+    And the next visit to /media without a size sends size=100
+
+  Scenario: Returning to 25 is remembered too
+    Given localStorage renewcms-page-size-media is "5"
+    When the user chooses "25 per page"
+    Then localStorage renewcms-page-size-media is "25"
+    And the next visit to /media sends size=25 and the URL stays /media
+
+  Scenario: An explicit size in the URL wins and is not stored
+    Given localStorage renewcms-page-size-media is "5"
+    When the user navigates to /media?size=100
+    Then GET ...&size=100 is sent and the select reads "100 per page"
+    And localStorage renewcms-page-size-media is still "5"
+    And a later visit to /media sends size=5
+
+  Scenario: An explicit page with no size uses the stored size
+    Given localStorage renewcms-page-size-media is "5"
+    When the user navigates to /media?page=3
+    Then GET ...&page=3&size=5 is sent and on success the URL is replaced by /media?page=3&size=5
+
+  Scenario Outline: An invalid stored value falls back to 25
+    Given localStorage renewcms-page-size-media is "<stored>"
+    When the user navigates to /media
+    Then GET ...&page=1&size=25 is sent, the select reads "25 per page" and the URL is /media
+
+    Examples:
+      | stored |
+      | 10     |
+      | abc    |
+      | 0      |
+      | -5     |
+      | 25.5   |
+      |        |
+
+  Scenario: An invalid size in the URL ignores the stored one
+    Given localStorage renewcms-page-size-media is "5"
+    When the user navigates to /media?size=10
+    Then GET ... is sent with size=25 and the URL is replaced by /media
+    And localStorage renewcms-page-size-media is still "5"
+
+  Scenario Outline: Unavailable storage never breaks the page
+    Given localStorage <failure>
+    When the user navigates to /media
+    Then GET ...&page=1&size=25 is sent, the page renders and no error is shown
+    When the user chooses "50 per page"
+    Then GET ...&page=1&size=50 is sent and the URL is /media?size=50
+
+    Examples:
+      | failure                   |
+      | throws on getItem         |
+      | throws on setItem (quota) |
+      | is undefined              |
+
+  Scenario: Logging out keeps the stored size
+    Given localStorage renewcms-page-size-media is "5"
+    When the user logs out and logs in again and opens /media
+    Then GET ...&size=5 is sent
+
+  Scenario: The three lists keep separate sizes
+    Given localStorage has renewcms-page-size-articles "50", renewcms-page-size-activity "100" and renewcms-page-size-media "5"
+    When the user opens /article, /activity and /media in turn without a size
+    Then they send size=50, size=100 and size=5 respectively
+
+  Scenario: The Duplicates tab ignores the stored size
+    Given localStorage renewcms-page-size-media is "5"
+    When the user opens /media?filter=duplicates
+    Then the requests carry size=100, the stored value stays "5", and returning to the "All" tab sends size=5

features/media_page_size_memory.qa.md

@@ -0,0 +1,28 @@
+# QA: Media page size memory (SPA)
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Add `web/src/views/__tests__/MediaPageSizeMemory.spec.ts`, mirroring `ArticlesPageSizeMemory.spec.ts` and `ActivityPageSizeMemory.spec.ts`: stub `localStorage` per test (a `Storage` fake, plus variants whose `getItem` or `setItem` throws, and `undefined`), use the `/v1/media/` mock of `mediaTestKit.ts` that honours `page` and `size`, and a real router. Extend `web/src/lib/__tests__/pageSizeMemory.spec.ts` for `MEDIA_PAGE_SIZE_KEY`.
+
+1. Choose a size table (5, 25, 50, 100) with nothing stored: stored value per the table and URLs `/media?size=5`, `/media`, `/media?size=50`, `/media?size=100`.
+2. Stored 5, open `/media`: request `size=5`, select reads "5 per page", URL replaced (not pushed) by `/media?size=5`.
+3. Leave and come back (navigate to `/` then `/media`): `size=5`.
+4. Reload on `/media?size=5` and on `/media` with a fresh mount: `size=5`.
+5. Stored 50: Next, "Unused" tab, "Largest" sort, list view and search "wall" each carry `size=50`; the stored value stays "50".
+6. Choose 100 after 5: stored "100", next visit `size=100`. Choose 25 after 5: stored "25", URL stays `/media`.
+7. Explicit `?size=100` with stored 5: request `size=100`, stored still "5", later visit `size=5`.
+8. `?page=3` with stored 5: request `page=3&size=5`, URL replaced by `/media?page=3&size=5`.
+9. Invalid stored table (`10`, `abc`, `0`, `-5`, `25.5`, empty): request `size=25`, URL `/media`.
+10. Invalid URL `?size=10` with stored 5: request `size=25`, URL `/media`, stored still "5".
+11. Unavailable storage table (throws on getItem, throws on setItem, undefined): page renders, no error, `size=25`, then choosing 50 sends `size=50` and URL `/media?size=50`.
+12. Logout and login keeps the key (clear the auth store only; storage untouched), then `/media` sends `size=5`.
+13. Separate keys: articles 50, activity 100, media 5 -> the three views send 50, 100 and 5.
+14. Duplicates tab: stored 5 -> requests carry `size=100`, stored unchanged, returning to All sends `size=5`.
+15. Unit test of the lib: `readStoredPageSize`, `storePageSize` and `resolvePageSize` with the media key and the valid sizes 5/25/50/100.
+
+No Visual part: no visual or design change.
+
+## Manual verification
+
+- In a real browser (`task dev`): choose "5 per page", refresh, close and reopen the tab, confirm the select and the URL; in DevTools confirm only `renewcms-page-size-media` changed.
+- Block storage (private mode or disabled site data) and confirm the page still works.

features/media_pagination_api.feature

@@ -0,0 +1,148 @@
+Feature: Paginated media listing
+
+  As an API consumer, the RenewCMS media page or the editor picker
+  I want GET /v1/media/ to answer one page of images with the total and the library-wide counts
+  So that large libraries load quickly and every consumer pages the same way
+
+  Background:
+    Given GET /v1/media/ is mounted inside the jwtauth.Verifier + Authenticator group of api/router.go, unchanged
+    And BREAKING CHANGE: the body is {"items": [...], "total": N, "page": P, "size": S, "counts": {"all": A, "unused": U, "duplicates": D}} in snake_case; next_cursor is removed and no X-Total-Count header is sent
+    And each item is the existing media item (id, filename, url, size, content_type, width, height, sha256, uploaded_by, created_at, used_in, duplicate, variant_count, variant_size) and items is [] rather than null
+    And paging follows the Activity and Articles convention: page is an integer >= 1 (default 1), size is one of 5, 25, 50, 100 (default 25)
+    And q, hash, filter (all, unused, duplicates), sort (newest, oldest, name, largest, total_size) and variants (with, without) keep their current meaning and validation; the default order is newest
+    And total is the number of images matching q, hash, filter and variants, before paging; page and size echo the values applied
+    And counts stays library-wide: it ignores q, hash, filter, variants and paging
+    And ordering is applied to the whole matching list before slicing, with id as the final tie-break, so pages never overlap or skip (newest and total_size are made deterministic; oldest, name and largest already tie on id)
+    And a page beyond the last answers 200 with items [] and the real total
+    And any invalid page, size, filter, sort, variants or hash answers 400 with the plain-text body "The media query is invalid." (apperr.MediaQueryErrorMessage); page and size are validated with validate tags through validator.Validate.Struct
+    And cursor and limit are no longer parameters: they are ignored, never an error, and have no effect on paging
+    And ListMediaUseCase reaches data only through domain interfaces; the domain ListQuery carries Page and Size instead of Cursor and Limit; the handler never touches a repository
+    And the SPA sends explicit page and size on every list call
+
+  Scenario: A bare request answers the envelope with the defaults
+    Given the library holds 30 images
+    When a verified client sends GET /v1/media/
+    Then the status is 200
+    And the body has page 1, size 25, total 30, 25 items and counts {"all": 30, "unused": U, "duplicates": D}
+    And the body has no next_cursor key
+
+  Scenario Outline: Defaults when only one parameter is given
+    Given the library holds 60 images
+    When a verified client sends GET /v1/media/?<query>
+    Then the body has page <page>, size <size>, total 60 and <count> items
+
+    Examples:
+      | query    | page | size | count |
+      | page=2   | 2    | 25   | 25    |
+      | page=3   | 3    | 25   | 10    |
+      | size=5   | 1    | 5    | 5     |
+      | size=50  | 1    | 50   | 50    |
+      | size=100 | 1    | 100  | 60    |
+
+  Scenario: Pages partition the list with no overlap
+    Given the library holds 12 images
+    When a client requests ?page=1&size=5, ?page=2&size=5 and ?page=3&size=5
+    Then the pages hold 5, 5 and 2 items, total is 12 on each, and no id repeats
+
+  Scenario: Newest first with the id tie-break
+    Given images id 1 uploaded 2026-09-01, id 2 and id 3 uploaded 2026-09-03
+    When a client sends GET /v1/media/?size=5
+    Then the item ids are 3, 2, 1
+
+  Scenario Outline: Sort orders the whole library before paging
+    Given 12 images with distinct names, sizes and dates
+    When a client requests ?sort=<sort>&size=5 for pages 1, 2 and 3
+    Then the pages hold the whole ordered list in <order> with no repeat
+
+    Examples:
+      | sort       | order                                                   |
+      | newest     | created_at descending                                   |
+      | oldest     | created_at ascending                                    |
+      | name       | filename stem, case-insensitive ascending               |
+      | largest    | size descending                                         |
+      | total_size | original size plus generated variant bytes, descending  |
+
+  Scenario: Filter and variants narrow total and items but not the counts
+    Given 40 images of which 6 are unused and 3 hold generated variants, and the library counts are {"all": 40, "unused": 6, "duplicates": 2}
+    When a client sends GET /v1/media/?filter=unused&size=5
+    Then total is 6, the page holds 5 items and counts is {"all": 40, "unused": 6, "duplicates": 2}
+    When a client sends GET /v1/media/?variants=with
+    Then total is 3 and counts is unchanged
+
+  Scenario: Search combines with paging
+    Given 7 images whose filename contains "wall" and 20 others
+    When a client sends GET /v1/media/?q=wall&size=5&page=2
+    Then total is 7, the page holds 2 items and counts.all is 27
+
+  Scenario: Hash lookup returns every copy in one page
+    Given 3 images share the sha256 H
+    When a client sends GET /v1/media/?hash=H&page=1&size=100
+    Then total is 3 and items has the 3 copies
+
+  Scenario: Hash lookup with no paging uses the defaults
+    Given 3 images share the sha256 H
+    When a client sends GET /v1/media/?hash=H
+    Then the body has page 1, size 25, total 3 and 3 items
+
+  Scenario: A page beyond the last is empty with the real total
+    Given the library holds 12 images
+    When a client sends GET /v1/media/?page=99&size=5
+    Then the status is 200, items is [], total is 12, page is 99, size is 5 and counts.all is 12
+
+  Scenario: An empty library
+    Given the library is empty
+    When a client sends GET /v1/media/
+    Then the status is 200, items is [], total is 0 and counts is {"all": 0, "unused": 0, "duplicates": 0}
+
+  Scenario: counts ignores every filter and the page
+    Given the library holds 30 images
+    When a client sends GET /v1/media/?q=zzzz&page=3&size=5
+    Then items is [], total is 0 and counts.all is 30
+
+  Scenario Outline: cursor and limit are ignored
+    Given the library holds 30 images
+    When a client sends GET /v1/media/?<query>
+    Then the status is 200 and the body has page 1, size 25 and 25 items
+
+    Examples:
+      | query              |
+      | cursor=abc         |
+      | limit=5            |
+      | limit=0            |
+      | limit=abc          |
+      | cursor=b2Zmc2V0OjU |
+
+  Scenario Outline: Invalid parameters answer 400
+    When a client sends GET /v1/media/?<query>
+    Then the status is 400
+    And the body is "The media query is invalid."
+    And the repository was not called
+
+    Examples:
+      | query            |
+      | page=0           |
+      | page=-1          |
+      | page=abc         |
+      | page=            |
+      | page=1.5         |
+      | size=0           |
+      | size=10          |
+      | size=200         |
+      | size=abc         |
+      | size=            |
+      | page=0&size=5    |
+      | page=1&size=1000 |
+      | filter=archived  |
+      | sort=biggest     |
+      | variants=        |
+      | variants=other   |
+      | hash=notahash    |
+
+  Scenario: Repository failure answers 500
+    Given the repository fails on its next call
+    When a client sends GET /v1/media/
+    Then the status is 500 and the body is "Internal server error"
+
+  Scenario: An unauthenticated caller is refused as before
+    When a client sends GET /v1/media/?page=1&size=5 without a valid jwt cookie
+    Then the response is the unchanged 401 of the auth group and the use case is not called

features/media_pagination_api.qa.md

@@ -0,0 +1,36 @@
+# QA: Paginated media listing (API)
+
+## HTTP-level (Go, `test/`, `task test`)
+
+Build `media.NewHandler(...)` over the real `ListMediaUseCase` and in-memory fakes of `image.Repository`, `article.Repository`, `user.Repository` and `image.VariantFileRepository` (extend the existing media fakes, keeping type names unique across files). Mount on a fresh `chi.NewRouter()` mirroring the media router in `api/router.go` (GET / inside `jwtauth.Verifier` + `jwtauth.Authenticator`, test `jwtauth.New("HS256", ...)`, valid `jwt` cookie with a `user_id` claim of a verified user). Call `validator.InitValidator()`. No live server, no SQLite file.
+
+Helper: decode into {items []map, total, page, size int, counts {all, unused, duplicates}}; also assert the raw JSON contains `"items":[` (never null) and does not contain `next_cursor`.
+
+1. Bare request: 30 images -> object, page 1, size 25, total 30, 25 items, no `next_cursor`.
+2. Defaults table: page=2, page=3, size=5, size=50, size=100 on 60 images.
+3. Partition: 12 images, pages 1-3 of size 5 -> 5, 5, 2; 12 distinct ids.
+4. Order: equal-timestamp case -> ids 3,2,1. Sort table (newest, oldest, name, largest, total_size): 12 images, three pages, concatenation equals the full ordered list, no repeat. Ties break on id.
+5. Filter/variants/q: unused -> total 6, counts unchanged; variants=with -> total 3; q=wall&size=5&page=2 -> total 7, 2 items, counts.all 27.
+6. Hash: hash=H&page=1&size=100 -> 3 copies; hash=H alone -> page 1, size 25, 3 items.
+7. Out of range: page=99&size=5 -> 200, raw `"items":[]`, total 12.
+8. Empty library -> items [], total 0, counts 0/0/0.
+9. counts library-wide: q=zzzz&page=3&size=5 -> items [], total 0, counts.all 30.
+10. cursor/limit ignored: rows `cursor=abc`, `limit=5`, `limit=0`, `limit=abc`, a valid-looking old cursor -> 200, page 1, size 25, 25 items.
+11. Invalid table (all rows): each -> 400, body exactly "The media query is invalid.", repository call counters stay 0.
+12. Repository failure -> 500 "Internal server error".
+13. Missing or invalid jwt cookie -> the auth group's 401, use case counter 0.
+14. Use-case tests: `ListMediaUseCase.List` returns items, total, page, size and counts; slices after sorting; propagates a repository error (`errors.Is` on a sentinel); `Describe` is unchanged; `ListQuery.Validate` rejects page < 1 and sizes outside 5/25/50/100 with `ErrInvalidQuery`. `image.ListQuery.Cursor` and `.Limit`, `MediaPage.NextCursor`, `encodeCursor` and `decodeCursor` no longer exist.
+15. Existing tests that read `next_cursor`, send `limit` or `cursor`, or call `NewListQuery` (media tests in `test/`, `features/media_library.qa.md`, `features/media_browse.qa.md`) are amended to the envelope; list them in the diff.
+
+## Docs (verified by reading the diff)
+
+- `docs/api.md` lines 99-103: replace `cursor` and `limit` with `page` (default 1) and `size` (5, 25, 50, 100; default 25); state the envelope (`items`, `total`, `page`, `size`, `counts`), that `counts` stays library-wide, that invalid values answer 400 "The media query is invalid.", and a "Breaking change" note: `next_cursor` is gone, `cursor` and `limit` are ignored.
+- `docs/api/*.md`: grep for `/v1/media/` and `cursor`; update the media listing section if one exists.
+- `web/src/data/apiCatalogue.ts` `med-list`: add `page`, `size`, `q`, `filter`, `sort`, `variants`, `hash` query entries, the 400 error, and a paged example (`total`, `page`, `size`, no `next_cursor`). Remove the `next_cursor` rule (line ~129, with its French entry in `web/src/i18n/messages.ts` line ~1606) if it is only used by media. Integration specs asserting the catalogue are amended.
+- Flag for the user (read-only to agents): `docs/design/screens/integration.md` and `docs/design/source/IntegrationPage.dc.html` (med-list with no params), `docs/design/screens/media.md`, `routes.md`, `change-list.md` item 13b, `README.md` line 92 and `screens/media-picker.md`: all still say "array body" and "X-Total-Count".
+- A release note under `docs/releases/` is the maintainer's call: flag it.
+
+## Manual verification
+
+- Real SQLite file via `task dev`: seed 60 images, check page=2&size=25, ordering by each sort and counts; the same on MySQL/PostgreSQL if available (no live DB in tests).
+- An authenticated curl returns the envelope with no `next_cursor`.

features/media_pagination_screen.feature

@@ -0,0 +1,185 @@
+Feature: Media page pagination
+
+  As a verified owner or admin with many images
+  I want the Media library split into pages with a page-size menu and shareable URLs
+  So that I can browse a large library quickly and come back to the same page
+
+  Background:
+    Given /media is the verified Media route (features/media_browse.feature), per docs/design/routes.md "Pagination in the URL (Articles, Media)" and docs/design/screens/media.md states 44-52
+    And the Paginator and PageSizeSelect are the existing components used by Articles (AppPaginator.vue); no new component is created
+    And the page requests GET /v1/media/?q=Q&filter=F&sort=S&variants=V&page=P&size=Z and reads {items, total, page, size, counts} (features/media_pagination_api.feature); q and variants are sent only when set; page and size are always sent explicitly; the tab counts come from counts and do not change while searching
+    And page and size live in the URL: ?page=&size=, next to the existing q, filter, sort, variants and view; the defaults (page 1, size 25) are omitted from the URL
+    And an invalid or missing size falls back to the stored size (features/media_page_size_memory.feature) or 25, and an invalid page (not an integer >= 1) falls back to 1, both silently replaced in the URL with history.replace and never shown as an error
+    And a change to search, tab, sort, view, the variants filter or the page size resets page to 1 (and drops it from the URL); search keeps its 120 ms debounce
+    And the URL changes when a response succeeds, not when the request is sent
+    And the summary reads "Showing {from}–{to} of {total}" with locale-formatted numbers, from total (the filtered count), under the grid or list
+    And the Paginator has First, Previous, page numbers with ellipses marking skipped ranges, Next, Last, and the page-size select "5 per page", "25 per page", "50 per page", "100 per page" (it opens upward)
+    And the current page uses --rc-sand fill, --rc-on-sand text and a --ui-primary border and has aria-current="page"; disabled controls are at 40 % opacity; buttons are 32 px (44 px on mobile)
+    And on mobile the paginator is Previous, "Page N of M" and Next
+    And the paginator is hidden when total fits on one page; the summary and the page-size select stay
+    And the paginator sits under the grid in grid view and under the table (md and up) or card list (below md) in list view; its exact placement is taken from the board frame docs/design/source/MediaFrame.dc.html, not from components.md prose
+    And keyboard: Tab reaches the page-size select, first, previous, each page, next, last; Enter or Space activates; ArrowDown opens the page-size list, Enter selects, Esc closes; every control shows a 2 px --ui-primary focus outline with a 2 px offset
+    And the Duplicates tab (?filter=duplicates) is not paginated: it loads the whole duplicate set with size=100, requesting page 1, 2, ... until the loaded count reaches total, groups it by sha256 as today, shows no paginator, summary or page-size select, and drops page and size from the URL
+    And "Select all" covers the images on the current page only and reads "{n} images" for that page; changing page, size, search, tab, sort or view clears the selection
+    And the silent background refresh after a delete, upload or merge reloads the current page with no skeleton; when the current page has become empty and is past the last page, the list steps back to the last page and replaces the URL
+    And the first load and a change of search, tab or sort keep the existing skeleton after 150 ms and the "Couldn't load your images" alert (media.md states 4 and 42); the page-change error below applies only when images are already shown
+    And the fixture below is total 312, size 25 (13 pages) unless stated, with the board's own sample data
+
+  Scenario: 44 First page
+    Given GET /v1/media/?filter=all&sort=newest&page=1&size=25 resolves 200 with 25 items, total 312 and counts {all 312, unused 2, duplicates 2}
+    When the user navigates to /media
+    Then the summary reads "Showing 1–25 of 312"
+    And First and Previous are disabled, page 1 is current, Next and Last are enabled
+    And the URL has no page or size
+
+  Scenario: 45 Middle page
+    Given GET ...&page=7&size=25 resolves 200 with 25 items and total 312
+    When the user navigates to /media?page=7
+    Then the summary reads "Showing 151–175 of 312"
+    And page 7 is current with --rc-sand / --rc-on-sand and aria-current="page"
+    And ellipses mark the skipped ranges and every control is enabled
+
+  Scenario: 46 Last page
+    Given GET ...&page=13&size=25 resolves 200 with 12 items and total 312
+    When the user navigates to /media?page=13
+    Then the summary reads "Showing 301–312 of 312"
+    And Next and Last are disabled
+
+  Scenario: Single page
+    Given GET /v1/media/ resolves 200 with 12 items, total 12 and counts {all 12, unused 2, duplicates 2}
+    When the user navigates to /media
+    Then the summary reads "Showing 1–12 of 12" and the page-size select stays
+    And the paginator (First ... Last) is not rendered
+
+  Scenario: 47 List view, desktop and mobile
+    Given page 2 of 13 is shown with ?view=list
+    Then at md width or more the paginator sits under the table with the page numbers
+    And below md it sits under the card list as Previous, "Page 2 of 13", Next with 44 px controls and no page numbers
+    And in grid view on mobile the paginator is the same Previous, "Page 2 of 13", Next
+
+  Scenario: 48 Loading next page
+    Given the first page has loaded and GET ...&page=2 has not resolved
+    When the user activates Next
+    Then skeleton cards keep the grid height and the list is aria-busy="true"
+    And every paginator control is disabled and the summary reads "Loading page 2…"
+    When the request resolves 200
+    Then the images and summary of page 2 appear and the URL becomes /media?page=2
+
+  Scenario Outline: 49 Error loading a page keeps the previous images
+    Given page 6 is shown
+    When the user activates Next and GET ...&page=7 <failure>
+    Then the page-6 images stay, the URL stays /media?page=6 and the controls are re-enabled
+    And a notice reads "Couldn't load page 7. Showing page 6." with a "Retry" action
+    When the user activates "Retry"
+    Then GET ...&page=7 is sent again and, on 200, page 7 replaces the images, the URL becomes ?page=7 and the notice goes
+
+    Examples:
+      | failure                      |
+      | resolves with a 500 response |
+      | never reaches the server     |
+
+  Scenario: 50 Page out of range redirects to the last page with a notice
+    Given GET ...&page=99 resolves 200 with items [] and total 312
+    When the user navigates to /media?page=99
+    Then the URL is replaced (no history entry) by /media?page=13 and GET ...&page=13 is sent
+    And the notice reads "That page doesn't exist. Showing the last page."
+    And the last-page state (46) is shown
+
+  Scenario: Out of range with total 0 shows the empty state, no redirect
+    Given GET ...&page=5 resolves 200 with items [] and total 0 and counts.all 0
+    When the user navigates to /media?page=5
+    Then the "No images yet" empty state shows and the URL is /media
+
+  Scenario: Out of range after a search with total 0 shows no results
+    Given GET ...&q=zzzz&page=5 resolves 200 with items [], total 0 and counts.all 312
+    When the user navigates to /media?q=zzzz&page=5
+    Then the no-results state (media.md state 6) shows and the URL is /media?q=zzzz
+
+  Scenario Outline: Search, tab, sort, view and variants changes reset to page 1
+    Given the user is on /media?page=7
+    When the user <action> and the request resolves
+    Then GET ... carries page=1
+    And on success the URL has no page
+    And the tab counts are unchanged by a search
+
+    Examples:
+      | action                                                    |
+      | types "wall" in the search field and the debounce elapses |
+      | selects the "Unused" tab                                  |
+      | picks "Largest" in the sort menu                          |
+      | activates the list icon in the grid toggle                |
+      | applies the "With variants" filter                        |
+
+  Scenario Outline: 51 Page size menu
+    Given the user is on /media?page=3
+    When the user opens the page-size select (it opens upward) and chooses "<label>"
+    Then GET ...&page=1&size=<size> is sent and, on success, the URL is <url>
+
+    Examples:
+      | label        | size | url             |
+      | 5 per page   | 5    | /media?size=5   |
+      | 25 per page  | 25   | /media          |
+      | 50 per page  | 50   | /media?size=50  |
+      | 100 per page | 100  | /media?size=100 |
+
+  Scenario Outline: Invalid URL values fall back silently
+    When the user navigates to /media?<query>
+    Then GET ... is sent with page=1 and size=25 and the URL is replaced by /media with no history entry
+    And no error or notice is shown
+
+    Examples:
+      | query            |
+      | size=10&page=abc |
+      | page=0           |
+      | page=-2          |
+      | page=1.5         |
+      | size=0           |
+      | size=200         |
+
+  Scenario: Pagination is kept across the other controls
+    Given the URL is /media?size=50&sort=largest&filter=unused
+    When the user activates Next
+    Then every request carries size=50, sort=largest and filter=unused and the URL keeps them
+
+  Scenario: 52 Focus-visible
+    When the user tabs to Next
+    Then Next shows a 2 px --ui-primary outline with a 2 px offset
+    And the same ring shows on every paginator control and on the page-size select
+
+  Scenario: Keyboard, the page-size list
+    When the user focuses the page-size select and presses ArrowDown
+    Then the list opens; Enter selects the highlighted size; Esc closes it and returns focus to the select
+
+  Scenario: Select all covers the current page only
+    Given page 2 of 13 is shown with 25 images
+    Then the "Select all" row reads "Select all" and "25 images"
+    When the user activates "Select all"
+    Then 25 images are selected and the bulk bar announces "25 selected"
+    When the user activates Next and page 3 loads
+    Then no image is selected and the bulk bar is gone
+
+  Scenario: The Duplicates tab loads the whole set and shows no paginator
+    Given 130 images are duplicates, GET ...&filter=duplicates&sort=newest&page=1&size=100 resolves 200 with 100 items and total 130
+    And GET ...&filter=duplicates&page=2&size=100 resolves 200 with the remaining 30 items
+    When the user navigates to /media?filter=duplicates&page=4&size=5
+    Then page 1 and page 2 are requested with size=100, page 2 only because 100 < 130
+    And the groups are built from the 130 images, with no paginator, summary or page-size select
+    And the URL is replaced by /media?filter=duplicates
+
+  Scenario: Leaving the Duplicates tab returns to the paginated list
+    Given the Duplicates tab is shown
+    When the user selects the "All" tab
+    Then GET ...&filter=all&page=1&size=25 is sent and the paginator is shown
+
+  Scenario: Deleting the last image of the last page
+    Given the user is on the last page with a single image and deletes it (204)
+    Then the list reloads the previous page in the background and the URL is replaced by it
+    And the tab counts are recomputed from the new response
+
+  Scenario: A background refresh keeps the current page
+    Given page 7 is shown and the user renames, uploads or merges
+    Then the list is requested again in the background for page 7 with no skeleton
+
+  Scenario: Hash lookups do not touch the page
+    When the detail panel or the upload duplicate check looks up copies of an image
+    Then GET /v1/media/?hash=H&page=1&size=100 is sent, the URL does not change and the paginator is unaffected

features/media_pagination_screen.qa.md

@@ -0,0 +1,52 @@
+# QA: Media page pagination (SPA)
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Mock `/v1/media/` the way `web/src/views/__tests__/mediaTestKit.ts` does, extended so the mock honours `page` and `size`, builds the envelope `{items, total, page, size, counts}` and has no `next_cursor`. Use the 312-image fixture (25 per page) from the board's data in `docs/design/source/MediaFrame.dc.html`. Mount `MediaView` with a real router and Pinia. Reuse the helpers of `ArticlesPagination.spec.ts`.
+
+One test per state:
+1. 44 First page: request `?filter=all&sort=newest&page=1&size=25`; "Showing 1–25 of 312"; First/Previous disabled; URL without page or size.
+2. 45 Middle page: `/media?page=7` -> "Showing 151–175 of 312"; `aria-current="page"` on 7; ellipses.
+3. 46 Last page: `/media?page=13` -> 12 items, "Showing 301–312 of 312"; Next/Last disabled.
+4. Single page: total 12 -> summary, page-size select, no First..Last.
+5. 47 List view: `?view=list&page=2` -> paginator under the table (md) and the card list (below md, the "Page 2 of 13" form).
+6. 48 Loading next page: pending page 2 -> skeleton cards, `aria-busy`, controls disabled, "Loading page 2…"; resolve -> URL `/media?page=2`.
+7. 49 Error (500, network): previous images stay, URL unchanged, notice "Couldn't load page 7. Showing page 6." with Retry; Retry succeeds -> `?page=7`, notice gone.
+8. 50 Out of range: `?page=99` with items [] and total 312 -> URL replaced by `?page=13` (assert `router.replace`, history length unchanged), notice text exact, last-page state.
+9. Total 0 out of range: empty state, URL `/media`; with `q` -> no-results state.
+10. Reset to page 1: table of search (120 ms debounce with fake timers on the timer only, never the system date), tab, sort, view, variants filter -> request carries `page=1`, URL has no page.
+11. 51 Page-size menu table: 5, 25, 50, 100 -> request `page=1&size=N`; URLs per the table.
+12. Invalid URL table (`size=10&page=abc`, `page=0`, `page=-2`, `page=1.5`, `size=0`, `size=200`): request page=1 size=25, URL replaced, no notice or alert.
+13. Controls kept: Next with `size=50&sort=largest&filter=unused` keeps every param.
+14. 52 Focus and keyboard: tab order select, first, previous, pages, next, last; ArrowDown opens, Enter selects, Esc closes and refocuses.
+15. Select all: "25 images", 25 selected, page change clears the selection and the bulk bar.
+16. Duplicates tab: with 130 duplicates, assert requests page=1 and page=2 at size=100, groups built from all 130, no paginator, URL drops page and size; selecting All returns to the paginated request.
+17. Last-image delete: steps back one page and replaces the URL; counts refreshed.
+18. Background refresh after rename/upload/merge: same page, no skeleton.
+19. Hash lookups send `hash=H&page=1&size=100` (`findCopies`, `useMediaUpload`, `ImageUploader`).
+20. Amended existing specs: every spec reading `next_cursor`, `limit=100`, `MEDIA_PAGE_LIMIT` or the old `/v1/media/?` mocks is migrated to the envelope and page/size requests; list them in the diff.
+
+## Visual (`task visual:check -- media`)
+
+Hard gate: every capture within 10 % at 1440×900 and 390×844, light and dark. Add `web/visual/states.ts` setups using the board's own sample data (312 images, 25 per page; filenames, sizes, uploaders and dates taken from the frame's script in `docs/design/source/MediaFrame.dc.html`; counts all 312 / unused 2 / duplicates 2):
+
+| State | Setup |
+| --- | --- |
+| 44 Pagination: first page | `/media`, page 1 of 13 |
+| 45 middle page | `/media?page=7` |
+| 46 last page | `/media?page=13`, 12 items |
+| 47 list view | `/media?view=list&page=2` |
+| 48 loading next page | page 2 pending |
+| 49 error loading a page | page 7 fails, page 6 shown |
+| 50 page out of range | `/media?page=99` replaced by `?page=13` with the notice |
+| 51 page-size menu | select open upward |
+| 52 focus-visible | Next focused |
+
+If a frame renders a relative date or greeting, mark that state `skip: clock-sensitive` and write no date-frozen test. The paginator's placement under the grid or list is checked against the board frame's markup, not `components.md` prose.
+
+## Manual verification
+
+- Keyboard: tab order and focus ring on every paginator control; ArrowDown/Enter/Esc in the page-size list; grid arrow-key navigation still works after a page change; focus is sensible after Next.
+- Hover and motion on the paginator and skeleton.
+- A real library of 60+ images through `task dev`: paging, size change, page past the end replaced with the notice, Duplicates tab loading beyond 100 duplicates.
+- Screen reader: the summary and "Loading page N…" are announced; selection announcements after a page change.

features/media_upload_selection_duplicates.feature

@@ -10,13 +10,16 @@ Feature: Media page, part 2: upload, selection and duplicates
       DashboardShell, per docs/design/routes.md and docs/design/screens/media.md
     And this slice is SPA only: the API from slice A is used unchanged, and no Go code, use case
       or repository changes
+    And this slice is amended by features/media_pagination_screen.feature: "Select all" covers the
+      images of the current page only, the Duplicates tab loads the whole set at size=100 page after
+      page until the loaded count reaches total, and hash lookups send page=1&size=100
     And this slice supersedes these B1 statements: the Upload button, the mobile pinned button and
       "Upload an image" are enabled; the Duplicates tab is enabled and ?filter=duplicates is a
       valid value; "Review duplicates" is enabled; Space on a card toggles selection; the checkbox,
       the "Select all" text and the partial state exist; the B2 states no longer carry
       skip 'pending' in web/visual/states.ts
     And the calls used are POST /v1/media/ (multipart field "file", sent with XMLHttpRequest so
-      that upload progress is reported, with the jwt cookie), GET /v1/media/?hash=<sha256 hex>,
+      that upload progress is reported, with the jwt cookie), GET /v1/media/?hash=<sha256 hex>&page=1&size=100,
       DELETE /v1/media/{id}, POST /v1/media/merge { keep_id, merge_ids } and the list call from
       B1 with filter=duplicates; every other /v1 call goes through useApi
     And 401 and 403 on any of these calls, including the XHR upload, send the user to
@@ -130,7 +133,7 @@ Feature: Media page, part 2: upload, selection and duplicates
     Scenario: A row whose content already exists
       Given the user chooses "floorboards-2.jpg" (2.4 MB, valid)
       When the SHA-256 of the file is computed
-      Then GET /v1/media/?hash=<that hex> is sent before any POST
+      Then GET /v1/media/?hash=<that hex>&page=1&size=100 is sent before any POST
       And when it resolves 200 with the image "floorboards.jpg" (id 12, uploaded 14 Jun 2026 by Inès Duarte)
       Then the row shows "Already in your library", the text `Same as "floorboards.jpg", uploaded 14 Jun 2026 by Inès Duarte.`, and the buttons "Use existing" and "Upload anyway"
       And nothing is sent with POST /v1/media/ for it, and its concurrency slot is released
@@ -146,7 +149,7 @@ Feature: Media page, part 2: upload, selection and duplicates
       And the image "floorboards.jpg" is selected, the bulk bar reads "1 selected", and the page announces "floorboards.jpg selected, 1 selected"
 
     Scenario: Use existing when the image is not in the loaded list
-      Given the existing image is not in the loaded list because of the search, the tab or the 100 limit
+      Given the existing image is not in the loaded list because of the search, the tab or the current page
       When the user activates "Use existing"
       Then the search and the tab reset to All and the image is selected
       And if it is still not loaded the row is dropped without selecting
@@ -275,7 +278,7 @@ Feature: Media page, part 2: upload, selection and duplicates
       When 3 images are selected
       Then that checkbox shows the partial state
       When the user activates it while it is partial
-      Then all 12 loaded images are selected and it shows checked
+      Then all 12 images of the current page are selected and it shows checked (never the other pages)
       When the user activates it while it is checked
       Then the selection is emptied
       And in list view at md width or more the table header checkbox does the same; the mobile card list has no "Select all" row and is selected through its 44 px row checkboxes
@@ -358,13 +361,13 @@ Feature: Media page, part 2: upload, selection and duplicates
     Scenario: The Duplicates tab is enabled
       Given the Default state has loaded
       When the user selects the "Duplicates 2" tab
-      Then the URL gains ?filter=duplicates and the list is requested with filter=duplicates and limit=100
+      Then the URL gains ?filter=duplicates and the list is requested with filter=duplicates at size=100, page 1, 2, ... until the loaded count reaches total
       And the tab is selected, and "Duplicates" carries the info-tinted count of groups
       And opening /media?filter=duplicates lands on the same view, and "Review duplicates" in the detail panel of "floorboards.jpg" is enabled and selects this tab
       And search applies, the sort menu and the view toggle show as on the other tabs, sort is sent with the request, and the view toggle has no effect on the groups view while the grid or list preference stays in the URL
 
     Scenario: Duplicates, groups
-      Given GET /v1/media/?filter=duplicates&sort=newest&limit=100 resolves 200 with ids 5, 6, 7, 9 and 12
+      Given GET /v1/media/?filter=duplicates&sort=newest&page=1&size=100 resolves 200 with ids 5, 6, 7, 9 and 12
       When the user opens the Duplicates tab
       Then the images are grouped by sha256 into 2 bordered cards stacked with a 16 px gap, the group with the oldest suggested copy first
       And group 1 has the header "Group 1" over "3 identical images · 2.4 MB each · 3600 × 2400", and group 2 has "Group 2" over "2 identical images · 3.1 MB each · 3600 × 2400"

features/media_upload_selection_duplicates.qa.md

@@ -13,7 +13,7 @@ Mount MediaPage in DashboardShell with a verified session and a test router at /
 3. **Entry points**: Upload (desktop header), the mobile pinned button and "Upload an image" each click the hidden `input[type=file]` (multiple, exact accept list).
 4. **Drop overlay**: dragenter with Files shows the copy exactly; dragleave hides; drop starts uploads; a drag without Files shows nothing; mobile pinned button hidden while shown.
 5. **Queue**: 6 valid files give at most 2 XHRs open at once; order kept; header "Uploading 6 images" and "N of 6 done" counts settled rows; "Uploading 1 image" singular; progress 1.1 of 2.6 MB reads "Uploading 1.1 of 2.6 MB" with a 42 % bar; 201 gives "Added to your library"; a silent list reload follows; files added while open are appended.
-6. **Duplicate check**: GET `?hash=` precedes POST; a match gives the Duplicate row with exact text (oldest match named); slot released; "Use existing" drops the row and selects the id (bulk bar "1 selected", live region text), including the reset-to-All path; "Upload anyway" sends POST; crypto undefined and lookup failure skip straight to POST.
+6. **Duplicate check**: GET `?hash=...&page=1&size=100` precedes POST; a match gives the Duplicate row with exact text (oldest match named); slot released; "Use existing" drops the row and selects the id (bulk bar "1 selected", live region text), including the reset-to-All path; "Upload anyway" sends POST; crypto undefined and lookup failure skip straight to POST.
 7. **Server statuses**: 201, 413, 415, 400, 500, network error: row copy and icon exact; "Try again" re-sends only that file with no new GET `?hash=`.
 8. **Cancel**: row x aborts that XHR and removes the row, the next file starts; "Cancel all" aborts all and removes waiting rows; panel closes when empty.
 9. **Summary**: Examples-driven summary lines; "Upload finished" / "{n} images" and "Dismiss"; "Nothing was uploaded" with "3 files were rejected" and with "2 files need attention", no summary; live-region text; Dismiss removes every row.
@@ -22,7 +22,7 @@ Mount MediaPage in DashboardShell with a verified session and a test router at /
 12. **Selection**: checkbox visibility (hover, focus, any selection, always on mobile); tick and Space toggle; Enter opens the panel and ticking does not; live-region texts for select, unselect and "Selection cleared"; the checkbox is not a tab stop; select-all states (unchecked, partial, checked) in the grid row and the table header (no row in the mobile card list); Escape closes the panel first and clears the selection next; Clear; selection cleared on q/tab/sort change, kept on view change.
 13. **Bulk bar**: copy, buttons, desktop and mobile placement classes, replaces the mobile pinned button.
 14. **Bulk delete**: dialog copy exact (title, description with the summed count, rows "Used in 2", "Used in 3", "Unused"), singular form; no usage request; in progress (one DELETE per id, buttons disabled, not dismissible); done (cards leave, selection empty, focus target, toast id and text, silent reload); partly failed (two removed, failed one stays selected, bar "1 selected", toast with Retry and no auto-dismiss, Retry re-sends only the failed DELETE); several failures title; 404 counted as deleted; all failed gives the inline alert.
-15. **Duplicates tab**: enabled, URL and request (`filter=duplicates`, limit=100), deep link, "Review duplicates" enabled and switching tab; sort and view toggle shown (sort sent with the request, toggle keeps the preference in the URL); grouping by sha256, group order, headers (including the SVG/unknown uploader case), column order, "Suggested" tag and footer, "Uploaded 14 Jun 2026 by Inès Duarte", "Used in 4 articles" opens the panel; suggested-copy Examples; empty state and "Back to all images"; badge absent at 0.
+15. **Duplicates tab**: enabled, URL and request (`filter=duplicates`, size=100, page 1, 2, ... until total is reached; amended by `features/media_pagination_screen.feature`), deep link, "Review duplicates" enabled and switching tab; sort and view toggle shown (sort sent with the request, toggle keeps the preference in the URL); grouping by sha256, group order, headers (including the SVG/unknown uploader case), column order, "Suggested" tag and footer, "Uploaded 14 Jun 2026 by Inès Duarte", "Used in 4 articles" opens the panel; suggested-copy Examples; empty state and "Back to all images"; badge absent at 0.
 16. **Merge**: dialog copy exact for floorboards.jpg and another kept copy, singular form; POST body `{ keep_id: 12, merge_ids: [5, 6] }`; in progress not dismissible; 200 gives group removed, toast id "media-merged-12" and text, live-region text, silent reload, "No duplicates" when last; 500 and network give the alert; 409 gives the alert and a reload; 404 gives the info toast and closes.
 17. **Global errors**: 401 and 403 from XHR upload, merge, delete and hash lookup call the same redirect handler as useApi; no local copy.
 18. **B1 regression**: media_browse specs updated for the superseded statements and the rest still passes.

features/new_article_modal.feature

@@ -1,10 +1,10 @@
 Feature: Creating a new article from NewArticleModal
 
   As a verified RenewCMS owner
-  I want NewArticleModal to take a title and a first paragraph, create the article as a draft
-    over POST /v1/article/, and take me straight to the editor to keep writing
-  So that starting a new article is a two-field, low-friction step instead of a full form, and I
-    land where I can actually write it
+  I want NewArticleModal to take only a title, create the article as a draft
+    over POST /v1/article/, and take me straight to the editor to write it
+  So that starting a new article is a one-field, low-friction step and I land where I can
+    actually write it
 
   Background:
     Given NewArticleModal is a UModal opened from Home's "New article" action (mobile header
@@ -14,42 +14,37 @@ Feature: Creating a new article from NewArticleModal
     And every time it opens, it starts in the Default state: title "New article", text "It's
       saved as a draft. Titles can't be changed later, so check it now.", an empty, focused Title
       field with placeholder "e.g. Choosing tiles for a small bathroom", a CharacterCounter
-      reading "0 / 200" and help "3 to 200 characters.", an empty First paragraph textarea with
-      placeholder "Start writing. You'll continue in the editor." and help "You can format it and
-      add images in the editor.", a "Cancel" button and a "Create draft" button
+      reading "0 / 200" and help "3 to 200 characters.", a "Cancel" button and a "Create draft"
+      button; there is no body or First paragraph field
     And the Title field is sent as the request's title and is validated required, 3 to 200
       characters, counted the same way as the CharacterCounter ([...str].length, which is rune
       count, matching article_title_rules.feature's server-side rune counting)
-    And the First paragraph field is sent as the request's body and is validated required (at
-      least one character)
-    And each field validates on blur and again on submit; submitting while either field is
-      invalid sends no request, and shows both fields' errors at once if both are invalid: Title
-      under 3 characters shows "Use at least 3 characters." in place of its help text, with the
-      counter in its error style; an empty First paragraph shows "Add a first paragraph. It can
-      be a single sentence." in place of its help text
-    And activating "Create draft" while both fields are valid sends POST /v1/article/ with JSON
-      {"title": "<title>", "body": "<first paragraph>"}; while the request is in flight both
-      fields and both buttons are disabled, the confirm button reads "Creating…" with a loading
-      indicator, and the modal cannot be dismissed by Cancel, Esc or a backdrop click
+    And the request carries no body key; the server treats an absent body as "" per
+      features/article_body_unlimited.feature
+    And the Title field validates on blur and again on submit; submitting while it is invalid
+      sends no request: a title under 3 characters shows "Use at least 3 characters." in place of
+      its help text, with the counter in its error style
+    And activating "Create draft" while the title is valid sends POST /v1/article/ with JSON
+      {"title": "<title>"}; while the request is in flight the Title field and both buttons are
+      disabled, the confirm button reads "Creating…" with a loading indicator, and the modal
+      cannot be dismissed by Cancel, Esc or a backdrop click
     And a 201 response closes the modal, emits created(article) with the response body, and (for
       this slice) HomeView.vue's created handler navigates to /article/{id}/edit and raises a
       toast: color success, icon i-lucide-circle-check, title "Draft created", description
       "\"{title}\" is saved as a draft.", with id "article-created-{id}" per
       docs/design/components.md's toast-id convention
-    And a 400 response — whether apperr.ArticleTitleErrorMessage for a title that passed this
-      form's own check but still failed the server's, or any other 400 — is never shown verbatim;
-      it re-enables the form with both fields' current values kept, shows "Check this title and
-      try again." in place of the Title field's help text, and shows an alert "Something in the
-      form isn't valid. Check the highlighted fields."; the First paragraph field shows no error
-    And a 500 response or a request that never reaches the server re-enables the form with both
-      fields' current values kept and shows an alert "Couldn't create the article. Your text is
-      still here. Try again in a moment.", with no field-level error
-    And "Cancel" always closes the modal immediately and discards both fields, with no
+    And a 400 response is never shown verbatim; it re-enables the form with the title kept,
+      shows "Check this title and try again." in place of the Title field's help text, and shows
+      an alert "Something in the form isn't valid. Check the highlighted fields."
+    And a 500 response or a request that never reaches the server re-enables the form with the
+      title kept and shows an alert "Couldn't create the article. Your text is still here. Try
+      again in a moment.", with no field-level error
+    And "Cancel" always closes the modal immediately and discards the title, with no
       confirmation prompt, whenever the form is not disabled by an in-flight request
     And a 401 response is handled entirely by useApi's existing global handling
       (features/api_client_global_error_handling.feature): the session is cleared and the app
       navigates to /login?redirect=<path>&reason=expired; this slice adds no draft-preservation
-      behavior for the modal's fields, unlike the editor's session-expiry handling
+      behavior for the modal's field, unlike the editor's session-expiry handling
 
   Scenario: Opening the modal shows the Default state
     Given the user is on /home
@@ -57,7 +52,7 @@ Feature: Creating a new article from NewArticleModal
     Then NewArticleModal opens with title "New article" and the text "It's saved as a draft.
       Titles can't be changed later, so check it now."
     And the Title field is empty, focused, and its counter reads "0 / 200"
-    And the First paragraph field is empty
+    And there is no First paragraph field
     And "Create draft" is present but the form has not been submitted
 
   Scenario: Validation — a title under 3 characters on blur
@@ -67,34 +62,23 @@ Feature: Creating a new article from NewArticleModal
     And the counter reads "2 / 200" in its error style
     And no request is sent
 
-  Scenario: Validation — an empty first paragraph on blur
-    Given the modal is open with a valid Title
-    When the user leaves the First paragraph field empty and moves focus away
-    Then the First paragraph field shows the error "Add a first paragraph. It can be a single
-      sentence."
-    And no request is sent
-
-  Scenario: Validation — submitting with both fields invalid shows both errors and sends nothing
-    Given the modal is open with Title "Ti" and an empty First paragraph
+  Scenario: Validation — submitting an invalid title sends nothing
+    Given the modal is open with Title "Ti"
     When the user activates "Create draft"
-    Then the Title field shows "Use at least 3 characters." and the First paragraph field shows
-      "Add a first paragraph. It can be a single sentence."
+    Then the Title field shows "Use at least 3 characters."
     And POST /v1/article/ is never sent
 
   Scenario: Submitting disables the form and cannot be dismissed
-    Given the modal is open with Title "Choosing tiles for a small bathroom" and First paragraph
-      "Small rooms show every grout line, so we start with the floor."
+    Given the modal is open with Title "Choosing tiles for a small bathroom"
     When the user activates "Create draft"
-    Then POST /v1/article/ is sent with JSON {"title": "Choosing tiles for a small bathroom",
-      "body": "Small rooms show every grout line, so we start with the floor."}
-    And both fields become disabled, "Cancel" becomes disabled, and the confirm button reads
+    Then POST /v1/article/ is sent with JSON {"title": "Choosing tiles for a small bathroom"}
+    And the Title field becomes disabled, "Cancel" becomes disabled, and the confirm button reads
       "Creating…" with a loading indicator
     And pressing Esc or clicking the backdrop does not close the modal
 
   Scenario: A successful create closes the modal and hands off to the editor with a toast
-    Given the user is on /home with the modal open, Title "Choosing tiles for a small bathroom"
-      and First paragraph "Small rooms show every grout line, so we start with the floor.", and
-      "Create draft" has been activated
+    Given the user is on /home with the modal open, Title "Choosing tiles for a small bathroom",
+      and "Create draft" has been activated
     When POST /v1/article/ resolves 201 with the created article, id 42, is_online false
     Then the modal closes
     And the app navigates to /article/42/edit
@@ -104,33 +88,29 @@ Feature: Creating a new article from NewArticleModal
 
   Scenario: Title rejected — a 400 that got past this form's own check
     Given the modal is open with Title "Choosing tiles for a small bathroom" (already valid by
-      this form's own rule) and First paragraph "Small rooms show every grout line, so we start
-      with the floor.", and "Create draft" has been activated
+      this form's own rule), and "Create draft" has been activated
     When POST /v1/article/ resolves 400
-    Then the modal re-enables, keeping both field values
+    Then the modal re-enables, keeping the title
     And the Title field shows "Check this title and try again." in place of its help text
     And an alert reads "Something in the form isn't valid. Check the highlighted fields."
-    And the First paragraph field shows no error
 
   Scenario Outline: Error — a 500 or a network failure keeps the text and offers to retry
-    Given the modal is open with Title "Choosing tiles for a small bathroom" and First paragraph
-      "Small rooms show every grout line, so we start with the floor.", and "Create draft" has
-      been activated
+    Given the modal is open with Title "Choosing tiles for a small bathroom", and "Create draft"
+      has been activated
     When POST /v1/article/ <failure>
-    Then the modal re-enables, keeping both field values
+    Then the modal re-enables, keeping the title
     And an alert reads "Couldn't create the article. Your text is still here. Try again in a
       moment."
-    And neither field shows a field-level error
+    And the Title field shows no field-level error
 
     Examples:
-      | failure                    |
+      | failure                      |
       | resolves with a 500 response |
       | never reaches the server     |
 
   Scenario: Retrying after an Error succeeds
     Given the modal is in the Error state after a 500, with Title "Choosing tiles for a small
-      bathroom" and First paragraph "Small rooms show every grout line, so we start with the
-      floor." still in the fields
+      bathroom" still in the field
     When the user activates "Create draft" again
     Then POST /v1/article/ is sent again with the same JSON body
     When it resolves 201 with the created article, id 42
@@ -138,9 +118,8 @@ Feature: Creating a new article from NewArticleModal
       success, icon i-lucide-circle-check, title "Draft created", description "\"Choosing tiles
       for a small bathroom\" is saved as a draft.", id "article-created-42"
 
-  Scenario: Cancel discards the fields with no confirmation
-    Given the modal is open with Title "Choosing tiles for a small bathroom" and First paragraph
-      "Small rooms show every grout line, so we start with the floor."
+  Scenario: Cancel discards the title with no confirmation
+    Given the modal is open with Title "Choosing tiles for a small bathroom"
     When the user activates "Cancel"
     Then the modal closes immediately, with no confirmation prompt
     And no request is sent

features/new_article_modal.qa.md

@@ -7,8 +7,10 @@ Only HomeView.vue is wired as a real `created` consumer in this slice: it listen
 the `/article/new` route stay pointed at the current ArticleView.vue placeholder until that page
 exists; don't wire a `created` handler there yet.
 
-The confirm button's label changes from the placeholder's "Create article" to the design's
-"Create draft" — this is a deliberate copy change, not a leftover.
+The modal is title-only: the First paragraph field is removed and the POST body is `{"title": "..."}`
+with no `body` key (see features/article_body_unlimited.feature).
+
+The confirm button's label is the design's "Create draft".
 
 The Created toast uses `useToast().add({ id: 'article-created-{id}', color: 'success', icon:
 'i-lucide-circle-check', title: 'Draft created', description: '"{title}" is saved as a draft.' })`,
@@ -20,77 +22,70 @@ section (success/info close after 5 s).
 Mock `useApi`'s `request` for `POST /v1/article/` per case; no real backend, no httptest server.
 Mount HomePage (which owns NewArticleModal) inside DashboardShell with a resolved verified session,
 and a test router at `/home`. Sample data throughout: title "Choosing tiles for a small bathroom",
-first paragraph "Small rooms show every grout line, so we start with the floor.", created article
-id 42, is_online false.
+created article id 42, is_online false.
 
 1. **Default state on open** — click "New article"; assert the modal shows title "New article",
    the intro text, an empty focused Title field with counter "0 / 200" and help "3 to 200
-   characters.", an empty First paragraph field with its placeholder and help, "Cancel" and
-   "Create draft".
-2. **Blur validation, Title** — type "Ti" into Title and blur; assert the error "Use at least 3
+   characters.", "Cancel" and "Create draft", and no First paragraph field.
+2. **Blur validation** — type "Ti" into Title and blur; assert the error "Use at least 3
    characters." replaces the help text and the counter "2 / 200" is in its error style; assert no
    `request` call.
-3. **Blur validation, First paragraph** — with a valid Title, leave First paragraph empty and
-   blur; assert "Add a first paragraph. It can be a single sentence." appears; assert no
-   `request` call.
-4. **Submit with both fields invalid** — Title "Ti", empty First paragraph, click "Create draft";
-   assert both errors show and `request` is never called.
-5. **Submitting state** — fill both fields validly, click "Create draft"; assert `request` is
-   called once with `POST /v1/article/` and the exact JSON body; assert both fields and Cancel
-   become disabled, the confirm button reads "Creating…"; assert pressing Escape and clicking the
-   backdrop do not close the modal while unresolved.
-6. **Successful create hands off** — from Submitting, resolve `request` 201 with the fixture
+3. **Submit with an invalid title** — Title "Ti", click "Create draft"; assert the error shows and
+   `request` is never called.
+4. **Submitting state** — fill Title validly, click "Create draft"; assert `request` is called
+   once with `POST /v1/article/` and the JSON body exactly `{"title": "Choosing tiles for a small
+   bathroom"}`; assert Title and Cancel become disabled, the confirm button reads "Creating…";
+   assert pressing Escape and clicking the backdrop do not close the modal while unresolved.
+5. **Successful create hands off** — from Submitting, resolve `request` 201 with the fixture
    article (id 42); assert the modal closes; assert the router navigated to `/article/42/edit`;
    assert a toast was raised with id "article-created-42", color success, icon
    "i-lucide-circle-check", title "Draft created", and description "\"Choosing tiles for a small
    bathroom\" is saved as a draft."
-7. **Title rejected (400)** — from Submitting, resolve `request` rejecting with `ApiError(400)`;
-   assert both field values are kept, the Title field shows "Check this title and try again.",
-   an alert reads "Something in the form isn't valid. Check the highlighted fields.", and the
-   First paragraph field shows no error.
-8. **Error, Examples-driven** — from Submitting, (a) resolve `request` rejecting with
-   `ApiError(500)`, (b) resolve it rejecting with `NetworkError`; in each, assert both field values
-   are kept, the alert reads "Couldn't create the article. Your text is still here. Try again in a
-   moment.", and neither field shows an error.
-9. **Retry after Error succeeds** — from the Error state (500), click "Create draft" again; assert
+6. **Title rejected (400)** — from Submitting, resolve `request` rejecting with `ApiError(400)`;
+   assert the title is kept, the Title field shows "Check this title and try again.", and an alert
+   reads "Something in the form isn't valid. Check the highlighted fields."
+7. **Error, Examples-driven** — from Submitting, (a) resolve `request` rejecting with
+   `ApiError(500)`, (b) resolve it rejecting with `NetworkError`; in each, assert the title is
+   kept, the alert reads "Couldn't create the article. Your text is still here. Try again in a
+   moment.", and the field shows no error.
+8. **Retry after Error succeeds** — from the Error state (500), click "Create draft" again; assert
    `request` is called a second time with the same JSON body; resolve 201 with the fixture; assert
    the modal closes, the router navigated to `/article/42/edit`, and the same "Draft created" toast
    (id "article-created-42") is raised.
-10. **Cancel discards** — fill both fields, click "Cancel"; assert the modal closes immediately
-    with no confirmation UI, and `request` was never called.
+9. **Cancel discards** — fill Title, click "Cancel"; assert the modal closes immediately with no
+   confirmation UI, and `request` was never called.
 
 ## Visual (manual verification — desktop and mobile, light and dark)
 
 Reference: `docs/design/screens/new-article.md` and `docs/design/source/RenewCMS Screens
 Back-office.dc.html`, group "New article". Run `task visual:check -- new-article` for each state
 below and compare against the board frame; add each state's mock setup to `web/visual/states.ts`
-first, reusing this slice's sample data (title "Choosing tiles for a small bathroom", first
-paragraph "Small rooms show every grout line, so we start with the floor."). This screen has no
-time-dependent content, so no fixed `now` is needed.
+first, reusing this slice's sample data (title "Choosing tiles for a small bathroom"). This screen
+has no time-dependent content, so no fixed `now` is needed. The board frames may still draw a body
+line in Submitting, Title rejected and Error; the design .md files are authoritative for the
+title-only modal and the boards are a known follow-up.
 
-- [ ] Default: empty, focused Title with counter "0 / 200", empty First paragraph, help text on
-      both fields, "Cancel" / "Create draft".
-- [ ] Validation: Title "Ti" with counter "2 / 200" in error and "Use at least 3 characters.";
-      First paragraph error "Add a first paragraph. It can be a single sentence."
-- [ ] Submitting: both fields filled and disabled, confirm reads "Creating…" with its loading
-      state.
-- [ ] Title rejected (400): both fields filled, Title error "Check this title and try again.",
-      alert "Something in the form isn't valid. Check the highlighted fields."
-- [ ] Error: both fields filled, alert "Couldn't create the article. Your text is still here. Try
+- [ ] Default: empty, focused Title with counter "0 / 200", help text, "Cancel" / "Create draft".
+- [ ] Validation: Title "Ti" with counter "2 / 200" in error and "Use at least 3 characters."
+- [ ] Submitting: Title filled and disabled, confirm reads "Creating…" with its loading state.
+- [ ] Title rejected (400): Title filled, error "Check this title and try again.", alert
+      "Something in the form isn't valid. Check the highlighted fields."
+- [ ] Error: Title filled, alert "Couldn't create the article. Your text is still here. Try
       again in a moment.", no field-level error.
 - [ ] Created: no board frame; verified by Vitest (toast copy + navigation).
-- [ ] Keyboard/focus: Tab reaches Title (already focused on open) → First paragraph → Cancel →
-      Create draft; Esc closes the modal in every dismissible state and is blocked while
-      Submitting; the counter's live region announces only when its error/warn threshold is
-      crossed, not on every keystroke, per CharacterCounter's a11y spec.
+- [ ] Keyboard/focus: Tab reaches Title (already focused on open) → Cancel → Create draft; Esc
+      closes the modal in every dismissible state and is blocked while Submitting; the counter's
+      live region announces only when its error threshold is crossed, not on every keystroke,
+      per CharacterCounter's a11y spec.
 - [ ] Motion: modal open/close follows the standard 240 ms timing and stops under reduced motion.
 
 ## Manual verification
 
 - **Real POST /v1/article/ round trip against a running server** — Vitest only mocks `useApi`;
-  confirm the real 201/400/500 responses and that a genuinely-created article is retrievable at
-  `/article/{id}/edit` against `task dev` with a live SQLite file, since automated tests never
-  exercise the real Go handler or `CreateArticleUseCase`.
+  confirm the real 201/400/500 responses, that a title-only create returns 201 with an empty body,
+  and that the created article is retrievable at `/article/{id}/edit` against `task dev` with a
+  live SQLite file, since automated tests never exercise the real Go handler or
+  `CreateArticleUseCase`.
 - **Toast placement and stacking on a live app** — confirm the "Draft created" toast's real
   position, duration and stacking behavior (per docs/design/components.md's Toast rules) against
   a running app, since Vitest only asserts that `useToast().add` was called with the right