docs: release notes for v2.5.0-beta

api/dependecyInjection.go

@@ -38,12 +38,19 @@ type UseCases struct {
 	UpdateUserProfileUseCase    *useCases.UpdateUserProfileUseCase
 	ListUsersUseCase            *useCases.ListUsersUseCase
 	CreateInviteUseCase         *useCases.CreateInviteUseCase
+	CancelInviteUseCase         *useCases.CancelInviteUseCase
+	RenewInviteUseCase          *useCases.RenewInviteUseCase
 	ListUsersAndInvitesUseCase  *useCases.ListUsersAndInvitesUseCase
 	GetInviteUseCase            *useCases.GetInviteUseCase
 	AcceptInviteUseCase         *useCases.AcceptInviteUseCase
 	SendMailUseCase             *useCases.SendMailUseCase
 	CreateImageUseCase          *useCases.CreateImageUseCase
-	DeleteImageUseCase          *useCases.DeleteImageUseCase
+	ListMediaUseCase            *useCases.ListMediaUseCase
+	RenameMediaUseCase          *useCases.RenameMediaUseCase
+	DeleteMediaUseCase          *useCases.DeleteMediaUseCase
+	MergeMediaUseCase           *useCases.MergeMediaUseCase
+	GetMediaUsageUseCase        *useCases.GetMediaUsageUseCase
+	GetSettingsUseCase          *useCases.GetSettingsUseCase
 }
 
 type Repositories struct {
@@ -60,7 +67,7 @@ func SQLiteDSN(dbName string) string {
 	return fmt.Sprintf("%s?_pragma=busy_timeout(%d)", dbName, sqliteBusyTimeoutMs)
 }
 
-func getDb(dbName string) *gorm.DB {
+func getDb(dbName string, uploadDir string) *gorm.DB {
 	if err := os.MkdirAll(filepath.Dir(dbName), os.ModePerm); err != nil {
 		panic("Unable to create necessary subdirectories: " + err.Error())
 	}
@@ -69,10 +76,18 @@ func getDb(dbName string) *gorm.DB {
 		panic("Unable to open the database: " + err.Error())
 	}
 
-	if err := db.AutoMigrate(&models.Article{}, &models.User{}, &models.Invite{}); err != nil {
+	if err := db.AutoMigrate(&models.Article{}, &models.Image{}, &models.User{}, &models.Invite{}); err != nil {
 		panic("Failed to migrate database: " + err.Error())
 	}
 
+	if err := persistence.BackfillUserRoles(db); err != nil {
+		panic("Failed to backfill user roles: " + err.Error())
+	}
+
+	if err := persistence.BackfillImageMetadata(db, uploadDir); err != nil {
+		panic("Failed to backfill image metadata: " + err.Error())
+	}
+
 	return db
 }
 
@@ -95,7 +110,7 @@ func getUseCases(repos *Repositories, settings config.Settings) *UseCases {
 		GetArticleUseCase:           useCases.NewGetArticleUseCase(repos.ArticleRepo),
 		ListArticlesUseCase:         useCases.NewListArticlesUseCase(repos.ArticleRepo),
 		UpdateArticleUseCase:        useCases.NewUpdateArticleUseCase(repos.ArticleRepo),
-		DeleteArticleUseCase:        useCases.NewDeleteArticleUseCase(repos.ArticleRepo, repos.ImageRepo),
+		DeleteArticleUseCase:        useCases.NewDeleteArticleUseCase(repos.ArticleRepo),
 		GetUserUseCase:              useCases.NewGetUserUseCase(repos.UserRepo),
 		CreateUserUseCase:           useCases.NewCreateUserUseCase(repos.UserRepo, hasher, repos.MailRepo, settings.PublicURL),
 		AuthenticateUserUseCase:     useCases.NewAuthenticateUserUseCase(repos.UserRepo, hasher),
@@ -106,17 +121,24 @@ func getUseCases(repos *Repositories, settings config.Settings) *UseCases {
 		UpdateUserProfileUseCase:    useCases.NewUpdateUserProfileUseCase(repos.UserRepo),
 		ListUsersUseCase:            useCases.NewListUsersUseCase(repos.UserRepo),
 		CreateInviteUseCase:         useCases.NewCreateInviteUseCase(repos.UserRepo, repos.InviteRepo, hasher, repos.MailRepo, settings.PublicURL),
+		CancelInviteUseCase:         useCases.NewCancelInviteUseCase(repos.InviteRepo),
+		RenewInviteUseCase:          useCases.NewRenewInviteUseCase(repos.UserRepo, repos.InviteRepo, hasher, repos.MailRepo, settings.PublicURL),
 		ListUsersAndInvitesUseCase:  useCases.NewListUsersAndInvitesUseCase(repos.UserRepo, repos.InviteRepo),
 		GetInviteUseCase:            useCases.NewGetInviteUseCase(repos.InviteRepo, hasher),
 		AcceptInviteUseCase:         useCases.NewAcceptInviteUseCase(repos.UserRepo, repos.InviteRepo, hasher),
 		SendMailUseCase:             useCases.NewSendMailUseCase(repos.MailRepo),
 		CreateImageUseCase:          useCases.NewCreateImageUseCase(repos.ImageRepo),
-		DeleteImageUseCase:          useCases.NewDeleteImageUseCase(repos.ImageRepo),
+		ListMediaUseCase:            useCases.NewListMediaUseCase(repos.ImageRepo, repos.ArticleRepo, repos.UserRepo),
+		RenameMediaUseCase:          useCases.NewRenameMediaUseCase(repos.ImageRepo),
+		DeleteMediaUseCase:          useCases.NewDeleteMediaUseCase(repos.ImageRepo),
+		MergeMediaUseCase:           useCases.NewMergeMediaUseCase(repos.ImageRepo, repos.ArticleRepo),
+		GetMediaUsageUseCase:        useCases.NewGetMediaUsageUseCase(repos.ImageRepo, repos.ArticleRepo),
+		GetSettingsUseCase:          useCases.NewGetSettingsUseCase(settings.Version),
 	}
 }
 
 func InitContainer(settings config.Settings) (*UseCases, func() error) {
-	db := getDb(settings.DBFile)
+	db := getDb(settings.DBFile, settings.UploadDir)
 	repos := getRepositories(db, settings)
 	return getUseCases(repos, settings), closeDb(db)
 }

api/handlers/image/imageHandler.go

@@ -1,121 +0,0 @@
-package image
-
-import (
-	"RenewCMS/api/pkg/apperr"
-	domainArticle "RenewCMS/internal/domain/article"
-	domainImage "RenewCMS/internal/domain/image"
-	"RenewCMS/internal/infrastructure/useCases"
-	"encoding/json"
-	"errors"
-	"net/http"
-	"strconv"
-
-	"github.com/go-chi/chi/v5"
-)
-
-type Handler struct {
-	CreateUseCase *useCases.CreateImageUseCase
-	GetUseCase    *useCases.GetArticleUseCase
-	UpdateUseCase *useCases.UpdateArticleUseCase
-	DeleteUseCase *useCases.DeleteImageUseCase
-}
-
-func NewHandler(create *useCases.CreateImageUseCase, get *useCases.GetArticleUseCase, update *useCases.UpdateArticleUseCase, deleteUseCase *useCases.DeleteImageUseCase) *Handler {
-	return &Handler{
-		CreateUseCase: create,
-		GetUseCase:    get,
-		UpdateUseCase: update,
-		DeleteUseCase: deleteUseCase,
-	}
-}
-
-func writeInternalServerError(w http.ResponseWriter) {
-	http.Error(w, "Internal server error", http.StatusInternalServerError)
-}
-
-func writeArticleError(w http.ResponseWriter, err error) {
-	if errors.Is(err, domainArticle.ErrArticleNotFound) {
-		http.Error(w, apperr.ArticleNotFoundErrorMessage, http.StatusNotFound)
-		return
-	}
-	writeInternalServerError(w)
-}
-
-func (h *Handler) PostImage(w http.ResponseWriter, r *http.Request) {
-	articleId, err := strconv.ParseUint(chi.URLParam(r, "id"), 10, 32)
-	if err != nil {
-		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
-		return
-	}
-
-	if _, err := h.GetUseCase.GetArticle(uint32(articleId)); err != nil {
-		writeArticleError(w, err)
-		return
-	}
-
-	file, fileHeader, err := r.FormFile("file")
-	if err != nil {
-		http.Error(w, err.Error(), http.StatusBadRequest)
-		return
-	}
-	defer file.Close()
-
-	newImage, err := h.CreateUseCase.CreateImage(domainImage.ImageInput{
-		Content:     file,
-		Filename:    fileHeader.Filename,
-		Size:        fileHeader.Size,
-		ContentType: fileHeader.Header.Get("Content-Type"),
-	})
-	if err != nil {
-		if errors.Is(err, domainImage.ErrImageTypeNotAllowed) || errors.Is(err, domainImage.ErrImageTooLarge) {
-			http.Error(w, err.Error(), http.StatusBadRequest)
-			return
-		}
-		writeInternalServerError(w)
-		return
-	}
-
-	if err := h.UpdateUseCase.AddImage(uint32(articleId), newImage.ID); err != nil {
-		writeArticleError(w, err)
-		return
-	}
-
-	responseJson, err := json.Marshal(map[string]any{"id": newImage.ID, "location": newImage.Path})
-	if err != nil {
-		writeInternalServerError(w)
-		return
-	}
-
-	w.WriteHeader(http.StatusCreated)
-	_, _ = w.Write(responseJson)
-}
-
-func (h *Handler) DeleteImage(w http.ResponseWriter, r *http.Request) {
-	articleId, err := strconv.ParseUint(chi.URLParam(r, "id"), 10, 32)
-	if err != nil {
-		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
-		return
-	}
-
-	imageId, err := strconv.ParseUint(chi.URLParam(r, "imageId"), 10, 32)
-	if err != nil {
-		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
-		return
-	}
-
-	if _, err := h.GetUseCase.GetArticle(uint32(articleId)); err != nil {
-		writeArticleError(w, err)
-		return
-	}
-
-	if err := h.DeleteUseCase.DeleteImage(uint32(imageId)); err != nil {
-		if errors.Is(err, domainImage.ErrImageNotFound) {
-			http.Error(w, apperr.ImageNotFoundErrorMessage, http.StatusNotFound)
-			return
-		}
-		writeInternalServerError(w)
-		return
-	}
-
-	w.WriteHeader(http.StatusNoContent)
-}

api/handlers/media/mediaHandler.go

@@ -0,0 +1,317 @@
+package media
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	"RenewCMS/api/pkg/claims"
+	"RenewCMS/api/pkg/upload"
+	validator "RenewCMS/api/pkg/validator"
+	domainImage "RenewCMS/internal/domain/image"
+	"RenewCMS/internal/infrastructure/useCases"
+	"encoding/json"
+	"errors"
+	"net/http"
+	"net/url"
+	"strconv"
+	"strings"
+	"time"
+
+	"github.com/go-chi/chi/v5"
+)
+
+type Handler struct {
+	CreateUseCase *useCases.CreateImageUseCase
+	ListUseCase   *useCases.ListMediaUseCase
+	RenameUseCase *useCases.RenameMediaUseCase
+	DeleteUseCase *useCases.DeleteMediaUseCase
+	MergeUseCase  *useCases.MergeMediaUseCase
+	UsageUseCase  *useCases.GetMediaUsageUseCase
+}
+
+type RenameRequest struct {
+	Filename string `json:"filename" validate:"required"`
+}
+
+type MergeRequest struct {
+	KeepID   uint32   `json:"keep_id" validate:"required,gt=0"`
+	MergeIDs []uint32 `json:"merge_ids" validate:"required,min=1,dive,gt=0"`
+}
+
+type mediaItemResponse struct {
+	ID          uint32    `json:"id"`
+	Filename    string    `json:"filename"`
+	URL         string    `json:"url"`
+	Size        int64     `json:"size"`
+	ContentType string    `json:"content_type"`
+	Width       *int      `json:"width"`
+	Height      *int      `json:"height"`
+	SHA256      string    `json:"sha256"`
+	UploadedBy  string    `json:"uploaded_by"`
+	CreatedAt   time.Time `json:"created_at"`
+	UsedIn      int       `json:"used_in"`
+	Duplicate   bool      `json:"duplicate"`
+}
+
+type countsResponse struct {
+	All        int `json:"all"`
+	Unused     int `json:"unused"`
+	Duplicates int `json:"duplicates"`
+}
+
+type listResponse struct {
+	Items      []mediaItemResponse `json:"items"`
+	NextCursor *string             `json:"next_cursor"`
+	Counts     countsResponse      `json:"counts"`
+}
+
+type usageResponse struct {
+	ID        uint32 `json:"id"`
+	Title     string `json:"title"`
+	Published bool   `json:"published"`
+}
+
+type mergeResponse struct {
+	ArticlesUpdated int `json:"articles_updated"`
+	Merged          int `json:"merged"`
+}
+
+func NewHandler(create *useCases.CreateImageUseCase, list *useCases.ListMediaUseCase, rename *useCases.RenameMediaUseCase, deleteUseCase *useCases.DeleteMediaUseCase, merge *useCases.MergeMediaUseCase, usage *useCases.GetMediaUsageUseCase) *Handler {
+	return &Handler{
+		CreateUseCase: create,
+		ListUseCase:   list,
+		RenameUseCase: rename,
+		DeleteUseCase: deleteUseCase,
+		MergeUseCase:  merge,
+		UsageUseCase:  usage,
+	}
+}
+
+func writeInternalServerError(w http.ResponseWriter) {
+	http.Error(w, "Internal server error", http.StatusInternalServerError)
+}
+
+func writeJSON(w http.ResponseWriter, status int, payload any) {
+	body, err := json.Marshal(payload)
+	if err != nil {
+		writeInternalServerError(w)
+		return
+	}
+	w.WriteHeader(status)
+	_, _ = w.Write(body)
+}
+
+func writeImageError(w http.ResponseWriter, err error) {
+	if errors.Is(err, domainImage.ErrImageNotFound) {
+		http.Error(w, apperr.ImageNotFoundErrorMessage, http.StatusNotFound)
+		return
+	}
+	writeInternalServerError(w)
+}
+
+func parseImageId(w http.ResponseWriter, r *http.Request) (uint32, bool) {
+	id, err := strconv.ParseUint(chi.URLParam(r, "id"), 10, 32)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return 0, false
+	}
+	return uint32(id), true
+}
+
+func dimension(value int) *int {
+	if value == 0 {
+		return nil
+	}
+	return &value
+}
+
+func toResponse(item useCases.MediaItem) mediaItemResponse {
+	return mediaItemResponse{
+		ID:          item.Image.ID,
+		Filename:    item.Image.Filename,
+		URL:         item.Image.Path,
+		Size:        item.Image.Size,
+		ContentType: item.Image.ContentType,
+		Width:       dimension(item.Image.Width),
+		Height:      dimension(item.Image.Height),
+		SHA256:      item.Image.SHA256,
+		UploadedBy:  item.UploadedBy,
+		CreatedAt:   item.Image.CreatedAt,
+		UsedIn:      item.UsedIn,
+		Duplicate:   item.Duplicate,
+	}
+}
+
+func parseListQuery(r *http.Request) (domainImage.ListQuery, error) {
+	values, err := url.ParseQuery(r.URL.RawQuery)
+	if err != nil {
+		return domainImage.ListQuery{}, domainImage.ErrInvalidQuery
+	}
+
+	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"))
+	}
+	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
+	}
+	return query, nil
+}
+
+func (h *Handler) List(w http.ResponseWriter, r *http.Request) {
+	query, err := parseListQuery(r)
+	if err != nil {
+		http.Error(w, apperr.MediaQueryErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	page, err := h.ListUseCase.List(query)
+	if err != nil {
+		if errors.Is(err, domainImage.ErrInvalidQuery) {
+			http.Error(w, apperr.MediaQueryErrorMessage, http.StatusBadRequest)
+			return
+		}
+		writeInternalServerError(w)
+		return
+	}
+
+	items := make([]mediaItemResponse, 0, len(page.Items))
+	for _, item := range page.Items {
+		items = append(items, toResponse(item))
+	}
+	response := listResponse{
+		Items:  items,
+		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) Upload(w http.ResponseWriter, r *http.Request) {
+	userId, _ := claims.UserId(r)
+	input, closeFile, ok := upload.ReadImageInput(w, r, userId)
+	if !ok {
+		return
+	}
+	defer closeFile()
+
+	created, err := h.CreateUseCase.CreateImage(input)
+	if err != nil {
+		upload.WriteCreateError(w, err)
+		return
+	}
+
+	h.writeItem(w, http.StatusCreated, created)
+}
+
+func (h *Handler) writeItem(w http.ResponseWriter, status int, img domainImage.Image) {
+	item, err := h.ListUseCase.Describe(img)
+	if err != nil {
+		writeInternalServerError(w)
+		return
+	}
+	writeJSON(w, status, toResponse(item))
+}
+
+func (h *Handler) Rename(w http.ResponseWriter, r *http.Request) {
+	id, ok := parseImageId(w, r)
+	if !ok {
+		return
+	}
+
+	var request RenameRequest
+	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, apperr.MediaFilenameErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	renamed, err := h.RenameUseCase.Rename(id, request.Filename)
+	if err != nil {
+		if errors.Is(err, domainImage.ErrInvalidFilename) {
+			http.Error(w, apperr.MediaFilenameErrorMessage, http.StatusBadRequest)
+			return
+		}
+		writeImageError(w, err)
+		return
+	}
+
+	h.writeItem(w, http.StatusOK, renamed)
+}
+
+func (h *Handler) Delete(w http.ResponseWriter, r *http.Request) {
+	id, ok := parseImageId(w, r)
+	if !ok {
+		return
+	}
+
+	if err := h.DeleteUseCase.Delete(id); err != nil {
+		writeImageError(w, err)
+		return
+	}
+
+	w.WriteHeader(http.StatusNoContent)
+}
+
+func (h *Handler) Usage(w http.ResponseWriter, r *http.Request) {
+	id, ok := parseImageId(w, r)
+	if !ok {
+		return
+	}
+
+	articles, 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})
+	}
+	writeJSON(w, http.StatusOK, response)
+}
+
+func (h *Handler) Merge(w http.ResponseWriter, r *http.Request) {
+	var request MergeRequest
+	if err := json.NewDecoder(r.Body).Decode(&request); err != nil {
+		http.Error(w, apperr.MediaMergeRequestErrorMessage, http.StatusBadRequest)
+		return
+	}
+	if err := validator.Validate.Struct(request); err != nil {
+		http.Error(w, apperr.MediaMergeRequestErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	result, err := h.MergeUseCase.Merge(request.KeepID, request.MergeIDs)
+	if err != nil {
+		writeMergeError(w, err)
+		return
+	}
+
+	writeJSON(w, http.StatusOK, mergeResponse{ArticlesUpdated: result.ArticlesUpdated, Merged: result.Merged})
+}
+
+func writeMergeError(w http.ResponseWriter, err error) {
+	switch {
+	case errors.Is(err, domainImage.ErrInvalidMergeRequest):
+		http.Error(w, apperr.MediaMergeRequestErrorMessage, http.StatusBadRequest)
+	case errors.Is(err, domainImage.ErrMergeCopyMissing), errors.Is(err, domainImage.ErrMergeHashMismatch):
+		http.Error(w, apperr.MediaMergeConflictErrorMessage, http.StatusConflict)
+	default:
+		writeImageError(w, err)
+	}
+}

api/handlers/settings/settingsHandler.go

@@ -0,0 +1,24 @@
+package settings
+
+import (
+	"RenewCMS/internal/infrastructure/useCases"
+	"encoding/json"
+	"net/http"
+)
+
+type Handler struct {
+	GetSettingsUseCase *useCases.GetSettingsUseCase
+}
+
+func NewHandler(getSettings *useCases.GetSettingsUseCase) *Handler {
+	return &Handler{GetSettingsUseCase: getSettings}
+}
+
+func (h *Handler) GetSettings(w http.ResponseWriter, _ *http.Request) {
+	body, err := json.Marshal(h.GetSettingsUseCase.GetSettings())
+	if err != nil {
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+	_, _ = w.Write(body)
+}

api/handlers/staticimages/staticImagesHandler.go

@@ -12,7 +12,7 @@ import (
 	"github.com/go-chi/chi/v5"
 )
 
-const cacheControl = "public, max-age=31536000, immutable"
+const cacheControl = "public, no-cache"
 const svgContentSecurityPolicy = "default-src 'none'; style-src 'unsafe-inline'; sandbox"
 const fallbackContentType = "application/octet-stream"
 

api/handlers/user/inviteHandler.go

@@ -10,11 +10,16 @@ import (
 	"encoding/json"
 	"errors"
 	"net/http"
+	"strconv"
 	"time"
+
+	"github.com/go-chi/chi/v5"
 )
 
 type InviteHandler struct {
 	CreateInviteUseCase        *useCases.CreateInviteUseCase
+	CancelInviteUseCase        *useCases.CancelInviteUseCase
+	RenewInviteUseCase         *useCases.RenewInviteUseCase
 	ListUsersAndInvitesUseCase *useCases.ListUsersAndInvitesUseCase
 }
 
@@ -44,13 +49,17 @@ type userListItem struct {
 	Kind        string    `json:"kind"`
 	Username    string    `json:"username"`
 	DisplayName string    `json:"display_name"`
+	Email       string    `json:"email"`
+	Role        string    `json:"role"`
 	Status      string    `json:"status"`
 	CreatedAt   time.Time `json:"created_at"`
 }
 
-func NewInviteHandler(createInvite *useCases.CreateInviteUseCase, listUsersAndInvites *useCases.ListUsersAndInvitesUseCase) *InviteHandler {
+func NewInviteHandler(createInvite *useCases.CreateInviteUseCase, cancelInvite *useCases.CancelInviteUseCase, renewInvite *useCases.RenewInviteUseCase, listUsersAndInvites *useCases.ListUsersAndInvitesUseCase) *InviteHandler {
 	return &InviteHandler{
 		CreateInviteUseCase:        createInvite,
+		CancelInviteUseCase:        cancelInvite,
+		RenewInviteUseCase:         renewInvite,
 		ListUsersAndInvitesUseCase: listUsersAndInvites,
 	}
 }
@@ -82,23 +91,82 @@ func (h *InviteHandler) CreateInvite(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	writeInviteResponse(w, http.StatusCreated, created)
+}
+
+func writeInviteResponse(w http.ResponseWriter, status int, entry invite.Invite) {
 	body, err := json.Marshal(inviteResponse{
-		ID:        created.ID,
+		ID:        entry.ID,
 		Kind:      useCases.EntryKindInvite,
-		Email:     created.Email,
+		Email:     entry.Email,
-		Status:    string(created.StatusAt(time.Now())),
+		Status:    string(entry.StatusAt(time.Now())),
-		CreatedAt: created.CreatedAt,
+		CreatedAt: entry.CreatedAt,
-		ExpiresAt: created.ExpiresAt,
+		ExpiresAt: entry.ExpiresAt,
 	})
 	if err != nil {
 		http.Error(w, "Internal server error", http.StatusInternalServerError)
 		return
 	}
 	w.Header().Set("Cache-Control", "no-store")
-	w.WriteHeader(http.StatusCreated)
+	w.WriteHeader(status)
 	_, _ = w.Write(body)
 }
 
+func parseInviteId(r *http.Request) (uint32, error) {
+	id, err := strconv.ParseUint(chi.URLParam(r, "id"), 10, 32)
+	return uint32(id), err
+}
+
+func (h *InviteHandler) CancelInvite(w http.ResponseWriter, r *http.Request) {
+	id, err := parseInviteId(r)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	if err := h.CancelInviteUseCase.CancelInvite(id); err != nil {
+		writeManageInviteError(w, err)
+		return
+	}
+	w.WriteHeader(http.StatusNoContent)
+}
+
+func (h *InviteHandler) RenewInvite(w http.ResponseWriter, r *http.Request) {
+	id, err := parseInviteId(r)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	userId, ok := claims.UserId(r)
+	if !ok {
+		http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+		return
+	}
+
+	renewed, err := h.RenewInviteUseCase.RenewInvite(useCases.RenewInviteCommand{ID: id, RenewedBy: userId})
+	if err != nil {
+		writeManageInviteError(w, err)
+		return
+	}
+	writeInviteResponse(w, http.StatusOK, renewed)
+}
+
+func writeManageInviteError(w http.ResponseWriter, err error) {
+	switch {
+	case errors.Is(err, invite.ErrInviteNotFound):
+		http.Error(w, apperr.InviteNotFoundErrorMessage, http.StatusNotFound)
+	case errors.Is(err, invite.ErrInviteAlreadyAccepted):
+		http.Error(w, apperr.InviteAlreadyAcceptedErrorMessage, http.StatusConflict)
+	case errors.Is(err, invite.ErrInviteEmailNotSent):
+		http.Error(w, apperr.InviteNotSentErrorMessage, http.StatusInternalServerError)
+	case errors.Is(err, user.ErrUserNotFound):
+		http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+	default:
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+	}
+}
+
 func writeCreateInviteError(w http.ResponseWriter, err error) {
 	switch {
 	case errors.Is(err, invite.ErrEmailHasAccount):
@@ -123,7 +191,7 @@ func (h *InviteHandler) ListUsers(w http.ResponseWriter, _ *http.Request) {
 			items = append(items, inviteListItem{entry.ID, entry.Kind, entry.Email, entry.Status, entry.CreatedAt})
 			continue
 		}
-		items = append(items, userListItem{entry.ID, entry.Kind, entry.Username, entry.DisplayName, entry.Status, entry.CreatedAt})
+		items = append(items, userListItem{entry.ID, entry.Kind, entry.Username, entry.DisplayName, entry.Email, entry.Role, entry.Status, entry.CreatedAt})
 	}
 
 	body, err := json.Marshal(items)

api/middleware/auth.go

@@ -77,3 +77,21 @@ func RequireVerifiedUser(getUser *useCases.GetUserUseCase) func(http.Handler) ht
 		})
 	}
 }
+
+func RequireOwner(getUser *useCases.GetUserUseCase) func(http.Handler) http.Handler {
+	return func(next http.Handler) http.Handler {
+		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			currentUser, ok := resolveCurrentUser(getUser, w, r)
+			if !ok {
+				return
+			}
+
+			if currentUser.Role != user.RoleOwner {
+				http.Error(w, apperr.OwnerRequiredErrorMessage, http.StatusForbidden)
+				return
+			}
+
+			next.ServeHTTP(w, r)
+		})
+	}
+}

api/pkg/apperr/messages.go

@@ -19,6 +19,13 @@ const TooManyRequestsErrorMessage = "Too many requests. Please try again later."
 const EmailHasAccountErrorMessage = "This address already has an account."
 const PendingInviteErrorMessage = "There's already a pending invite for this address."
 const InviteNotSentErrorMessage = "Couldn't send the invite. Try again in a moment."
+const InviteNotFoundErrorMessage = "Invite not found"
+const InviteAlreadyAcceptedErrorMessage = "This invite has already been accepted."
 const InviteInvalidErrorMessage = "This invite link doesn't work."
 const InviteExpiredErrorMessage = "This invite has expired."
+const OwnerRequiredErrorMessage = "Only the owner can do this."
 const UsernameTakenErrorMessage = "That username is taken. Try another."
+const MediaQueryErrorMessage = "The media query is invalid."
+const MediaFilenameErrorMessage = "Enter a filename."
+const MediaMergeConflictErrorMessage = "Some of the images to merge changed. Refresh and try again."
+const MediaMergeRequestErrorMessage = "Choose an image to keep and at least one other image to merge into it."

api/pkg/publicuser/publicUser.go

@@ -13,6 +13,7 @@ type PublicUser struct {
 	CreatedAt   time.Time `json:"created_at"`
 	UpdatedAt   time.Time `json:"updated_at"`
 	DisplayName string    `json:"display_name"`
+	Role        user.Role `json:"role"`
 }
 
 func New(u user.User) PublicUser {
@@ -24,5 +25,6 @@ func New(u user.User) PublicUser {
 		CreatedAt:   u.CreatedAt,
 		UpdatedAt:   u.UpdatedAt,
 		DisplayName: u.DisplayName,
+		Role:        u.Role,
 	}
 }

api/pkg/upload/upload.go

@@ -0,0 +1,49 @@
+package upload
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	"RenewCMS/internal/domain/image"
+	"errors"
+	"net/http"
+)
+
+const multipartOverheadAllowance = 1 << 20
+
+const fileField = "file"
+
+func ReadImageInput(w http.ResponseWriter, r *http.Request, uploadedById uint32) (image.ImageInput, func(), bool) {
+	r.Body = http.MaxBytesReader(w, r.Body, image.MaxImageSize+multipartOverheadAllowance)
+
+	file, header, err := r.FormFile(fileField)
+	if err != nil {
+		var tooLarge *http.MaxBytesError
+		if errors.As(err, &tooLarge) {
+			http.Error(w, image.ErrImageTooLarge.Error(), http.StatusRequestEntityTooLarge)
+			return image.ImageInput{}, nil, false
+		}
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return image.ImageInput{}, nil, false
+	}
+
+	input := image.ImageInput{
+		Content:      file,
+		Filename:     header.Filename,
+		Size:         header.Size,
+		ContentType:  header.Header.Get("Content-Type"),
+		UploadedByID: uploadedById,
+	}
+	return input, func() { _ = file.Close() }, true
+}
+
+func WriteCreateError(w http.ResponseWriter, err error) {
+	switch {
+	case errors.Is(err, image.ErrImageTypeNotAllowed):
+		http.Error(w, err.Error(), http.StatusUnsupportedMediaType)
+	case errors.Is(err, image.ErrImageTooLarge):
+		http.Error(w, err.Error(), http.StatusRequestEntityTooLarge)
+	case errors.Is(err, image.ErrImageUnreadable):
+		http.Error(w, err.Error(), http.StatusBadRequest)
+	default:
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+	}
+}

api/router.go

@@ -4,7 +4,8 @@ import (
 	"RenewCMS/api/handlers/article"
 	"RenewCMS/api/handlers/auth"
 	"RenewCMS/api/handlers/frontend"
-	"RenewCMS/api/handlers/image"
+	"RenewCMS/api/handlers/media"
+	"RenewCMS/api/handlers/settings"
 	"RenewCMS/api/handlers/staticimages"
 	"RenewCMS/api/handlers/user"
 	"RenewCMS/api/middleware"
@@ -34,7 +35,6 @@ func NewArticleRouter(container *UseCases) http.Handler {
 	r := chi.NewRouter()
 
 	articleHandler := article.NewHandler(container.CreateArticleUseCase, container.GetArticleUseCase, container.ListArticlesUseCase, container.DeleteArticleUseCase, container.UpdateArticleUseCase, container.GetUserUseCase)
-	imageHandler := image.NewHandler(container.CreateImageUseCase, container.GetArticleUseCase, container.UpdateArticleUseCase, container.DeleteImageUseCase)
 
 	r.Group(func(r chi.Router) {
 		r.Get("/", articleHandler.ListArticles)
@@ -49,8 +49,6 @@ func NewArticleRouter(container *UseCases) http.Handler {
 		r.Patch("/{id}", articleHandler.UpdateArticleBody)
 		r.Patch("/{id}/publish", articleHandler.PublishArticle)
 		r.Patch("/{id}/unpublish", articleHandler.UnpublishArticle)
-		r.Post("/{id}/image", imageHandler.PostImage)
-		r.Delete("/{id}/image/{imageId}", imageHandler.DeleteImage)
 	})
 	return r
 }
@@ -99,7 +97,7 @@ func NewUserRouter(container *UseCases, rateLimit config.AuthRateLimitSettings,
 	r := chi.NewRouter()
 
 	userHandler := user.NewHandler(container.UpdateUserProfileUseCase)
-	inviteHandler := user.NewInviteHandler(container.CreateInviteUseCase, container.ListUsersAndInvitesUseCase)
+	inviteHandler := user.NewInviteHandler(container.CreateInviteUseCase, container.CancelInviteUseCase, container.RenewInviteUseCase, container.ListUsersAndInvitesUseCase)
 
 	r.Use(jwtauth.Verifier(container.Token))
 	r.Use(jwtauth.Authenticator(container.Token))
@@ -108,13 +106,47 @@ func NewUserRouter(container *UseCases, rateLimit config.AuthRateLimitSettings,
 	r.Patch("/me", userHandler.UpdateMe)
 	r.Get("/", inviteHandler.ListUsers)
 	r.Group(func(r chi.Router) {
+		r.Use(middleware.RequireOwner(container.GetUserUseCase))
 		r.Use(middleware.TrustedProxyRealIP(trustedProxies))
 		r.Use(middleware.NewRateLimiter(rateLimit.MaxAttempts, rateLimit.Window))
 		r.Post("/invite", inviteHandler.CreateInvite)
+		r.Delete("/invite/{id}", inviteHandler.CancelInvite)
+		r.Post("/invite/{id}/renew", inviteHandler.RenewInvite)
 	})
 	return r
 }
 
+func NewSettingsRouter(container *UseCases) http.Handler {
+	r := chi.NewRouter()
+
+	settingsHandler := settings.NewHandler(container.GetSettingsUseCase)
+
+	r.Use(jwtauth.Verifier(container.Token))
+	r.Use(jwtauth.Authenticator(container.Token))
+	r.Use(middleware.RequireCurrentToken(container.GetUserUseCase))
+	r.Use(middleware.RequireVerifiedUser(container.GetUserUseCase))
+	r.Get("/", settingsHandler.GetSettings)
+	return r
+}
+
+func NewMediaRouter(container *UseCases) http.Handler {
+	r := chi.NewRouter()
+
+	mediaHandler := media.NewHandler(container.CreateImageUseCase, container.ListMediaUseCase, container.RenameMediaUseCase, container.DeleteMediaUseCase, container.MergeMediaUseCase, container.GetMediaUsageUseCase)
+
+	r.Use(jwtauth.Verifier(container.Token))
+	r.Use(jwtauth.Authenticator(container.Token))
+	r.Use(middleware.RequireCurrentToken(container.GetUserUseCase))
+	r.Use(middleware.RequireVerifiedUser(container.GetUserUseCase))
+	r.Get("/", mediaHandler.List)
+	r.Post("/", mediaHandler.Upload)
+	r.Post("/merge", mediaHandler.Merge)
+	r.Patch("/{id}", mediaHandler.Rename)
+	r.Delete("/{id}", mediaHandler.Delete)
+	r.Get("/{id}/usage", mediaHandler.Usage)
+	return r
+}
+
 func InitBackendRoutes(container *UseCases, settings config.Settings) *chi.Mux {
 	r := chi.NewRouter()
 
@@ -128,6 +160,8 @@ func InitBackendRoutes(container *UseCases, settings config.Settings) *chi.Mux {
 		r.Mount("/article", NewArticleRouter(container))
 	})
 	r.Mount("/user", NewUserRouter(container, settings.AuthRateLimit, settings.TrustedProxies))
+	r.Mount("/settings", NewSettingsRouter(container))
+	r.Mount("/media", NewMediaRouter(container))
 	r.Mount("/auth", NewAuthRouter(container, settings.IsProduction(), settings.AuthRateLimit, settings.TrustedProxies))
 
 	return r

cmd/server/main.go

@@ -62,6 +62,7 @@ func run() error {
 	if err != nil {
 		return err
 	}
+	settings.Version = version
 
 	container, closeDb := api.InitContainer(settings)
 	defer closeDatabase(closeDb)

docs/architecture.md

@@ -26,8 +26,14 @@ Nothing under `internal/` imports `api/`.
 | Package | Role |
 |---|---|
 | `api/handlers/user` | Authenticated user endpoints: profile update (`UpdateMe`) and the users list with invitations (`CreateInvite`, `ListUsers`). |
+| `api/handlers/media` | The media library under `/v1/media` (list, upload, rename, delete, merge, usage). Images belong to the library, not to an article: deleting an article never deletes an image, and an image's "used in" is read from article bodies each time. |
+| `api/pkg/upload` | Multipart `file` reading and the mapping of upload errors (415, 413, 400) shared by both upload routes. |
 | `api/pkg/publicuser` | `PublicUser`, the JSON shape of a user with no password, codes or token version. `publicuser.New` converts a domain `user.User`, so handlers never serialise the domain struct directly. |
 
+### Image metadata backfill
+
+At boot, `BackfillImageMetadata` fills `filename`, `size`, `content_type`, `width`, `height` and `sha256` for image rows that lack them, reading the files in `UPLOAD_DIR`. It is idempotent, and a row whose file is missing or unreadable is left as it is without stopping the boot. The old `article_id` column and the `article_images` table are kept and never written.
+
 ## Frontend ↔ backend
 
 ```

docs/design/README.md

@@ -29,15 +29,19 @@ The visual spec of record for the back-office SPA and the transactional emails,
 | [Articles](screens/articles.md) | `/article` | 14 | `source/RenewCMS Screens Back-office.dc.html` |
 | [New article](screens/new-article.md) | `modal from anywhere · /article/new` | 5 | `source/RenewCMS Screens Back-office.dc.html` |
 | [Editor](screens/editor.md) | `/article/:id/edit` | 22 | `source/RenewCMS Screens Back-office.dc.html` |
+| [Media](screens/media.md) | `/media` | 41 | `source/RenewCMS Screens Back-office.dc.html` |
+| [Media picker](screens/media-picker.md) | `/article/:id/edit` (dialog) | 13 | `source/RenewCMS Screens Back-office.dc.html` |
 | [Integration](screens/integration.md) | `/integration` | 2 | `source/RenewCMS Screens Back-office.dc.html` |
-| [Users](screens/users.md) | `/users` | 10 | `source/RenewCMS Screens Back-office.dc.html` |
+| [Users](screens/users.md) | `/users` | 17 | `source/RenewCMS Screens Back-office.dc.html` |
+| [Settings](screens/settings.md) | `/settings` | 1 | `source/RenewCMS Screens Back-office.dc.html` |
 | [Profile](screens/profile.md) | `/profile` | 13 | `source/RenewCMS Screens Back-office.dc.html` |
 | [Accept invite](screens/accept-invite.md) | `/invite/accept?c=CODE` | 9 | `source/RenewCMS Screens Auth.dc.html` |
 | [Global](screens/global.md) | `any route` | 4 | `source/RenewCMS Screens Back-office.dc.html` |
 
 ## Other boards
 
+- `source/MediaFrame.dc.html`: the frame that draws the Media and Media picker states (the Back-office board imports it). Like `AppFrame.dc.html`, it holds the exact values.
 - `source/RenewCMS Prototype.dc.html`: the clickable flows (first run, edit and publish, password reset, delete, session expiry mid-edit).
 - `source/RenewCMS Handoff.dc.html`: the handoff page the first markdown here was generated from. It predates the Users and Profile screens and the invitation email, so it does not list them. Those are written by hand from the Back-office board, `AppFrame.dc.html`, the Prototype and `emails/invitation.html`.
-- `source/RenewCMS Components Product.dc.html`: not regenerated for the new screens either. The matching component changes are in `components.md`, under "Added with the Users and Profile screens".
+- `source/RenewCMS Components Product.dc.html`: not regenerated for the new screens either. The matching component changes are in `components.md`, under "Added with the Users and Profile screens" and "Added with roles, invite actions and Settings".
 - `source/RenewCMS Directions.dc.html`: the three brand directions (history only).

docs/design/components.md

@@ -7,8 +7,10 @@
 | AuthShell | UPageCard, UColorModeSelect | title, description? | none | default, notice, footer | All public routes |
 | DashboardShell | UDashboardGroup, UDashboardSidebar, UNavigationMenu, UDashboardPanel, UDashboardNavbar, UBreadcrumb | none (reads route.meta and the session store) | none | default, navbar-right | All verified routes |
 | UserMenu | UDropdownMenu, UButton, UAvatar (a bottom sheet below md) | displayName?, username, email | logout | none | DashboardShell |
-| UsersTable | UTable | rows: UserRow[], loading | none | none | Users (md and up) |
+| UsersTable | UTable | rows: UserRow[], loading, canManage: boolean, busyIds: Set | cancel-invite, renew-invite | none | Users (md and up) |
-| UserCardList | custom list | same as UsersTable | none | none | Users (below md) |
+| UserCardList | custom list | same as UsersTable | same as UsersTable | none | Users (below md) |
+| RoleBadge | UBadge | role: 'owner'\|'admin' | none | none | Users |
+| SettingsPage | custom card | none (reads GET /v1/settings) | none | none | Settings |
 | InviteStatusBadge | UBadge | status: 'accepted'\|'pending'\|'expired' | none | none | Users |
 | InviteUserModal | UModal, UForm, UFormField, UInput | none | invited(invite) | none | Users |
 | ProfileCard | custom card (border, padding, optional footer strip) | title, description | none | default, footer | Profile |
@@ -63,7 +65,7 @@ Responsive 400 px card from sm up, with its top 12 vh from the top. Below sm , t
 
 ### DashboardShell
 
-The sidebar has four destinations (Home, Articles, Users, Integration), and the user menu sits at its foot. The top bar carries the breadcrumbs and page title. Collapsing the sidebar leaves a 56 px icon rail. Below lg , the sidebar becomes a slideover.
+The sidebar has five destinations (Home, Articles, Users, Integration, Settings), and the user menu sits at its foot. The top bar carries the breadcrumbs and page title. Collapsing the sidebar leaves a 56 px icon rail. Below lg , the sidebar becomes a slideover.
 
 RenewCMS
 
@@ -97,7 +99,7 @@ Mobile top bar. The menu button opens the sidebar as a left slideover.
 
 Built from UDashboardGroup storage="local" › UDashboardSidebar collapsible :resizable="false" :default-size="16" :collapsed-size="4" with the #header (AppLogo), #default ( UNavigationMenu orientation="vertical" :collapsed ) and #footer (UserMenu) slots. Each page is a UDashboardPanel , with a UDashboardNavbar holding UDashboardSidebarCollapse and UBreadcrumb . On mobile, UDashboardSidebarToggle appears and the sidebar's built-in slideover takes over.
 
-UserMenu UDropdownMenu :content="{ side: 'top', align: 'start' }" on a ghost UButton block with a UAvatar and the username. The groups are: the account label; System, Light and Dark as checkbox items; then Log out. There are no profile or password items, because the API doesn't support them. Superseded: see "UserMenu (changed)" under "Added with the Users and Profile screens".
+UserMenu UDropdownMenu :content="{ side: 'top', align: 'start' }" on a ghost UButton block with a UAvatar and the username. The groups are: the account label; System, Light and Dark as checkbox items; then Log out. There are no profile or password items, because the API doesn't support them. Superseded: see "UserMenu (changed)" under "Added with the Users and Profile screens", which restores the System, Light and Dark items.
 
 Props, slots No props, because the shell reads the user from the session Pinia store. The navbar reads route.meta.title and route.meta.breadcrumb . Slots navbar-right (page actions on mobile) and default . It shows the offline banner when navigator.onLine is false.
 
@@ -381,24 +383,22 @@ The Product components board was not regenerated for these. They are written fro
 
 ### UserMenu (changed)
 
-The chip at the foot of the sidebar no longer logs out on click. It opens the account menu, which lists Profile and Log out.
+The chip at the foot of the sidebar no longer logs out on click. It opens the account menu, which lists Profile, the theme choice and Log out.
 
 - **Chip:** 40 px high, an initials avatar (26 px, sand `#d4c5b0` with ink text), the name, and a chevrons-up-down icon. `aria-haspopup="menu"`, `aria-expanded`, title "Account". While the menu is open, or while `/profile` is the current page, it takes `--rc-sand` with `#111111` text.
 - **Name:** the display name when there is one, otherwise the username. Initials come from the first letters of the first two words of the display name, uppercased. Without a display name they come from the username.
-- **Desktop menu:** a 224 px popover anchored above the chip on its left edge, with `--rc-shadow-pop`. Header: the name in semibold, the email below it in muted 12 px, a bottom border. Items are 32 px: Profile (circle-user), a separator, Log out (log-out). The current page's item is highlighted with `--ui-bg-elevated`.
+- **Desktop menu:** a 224 px popover anchored above the chip on its left edge, with `--rc-shadow-pop`. Header: the name in semibold, the email below it in muted 12 px, a bottom border. Items are 32 px: Profile (circle-user), a separator, System, Light and Dark (14 px text, a check icon at the right edge on the current choice), a separator, Log out (log-out). The current page's item is highlighted with `--ui-bg-elevated`. The theme items are radio-style: choosing one applies at once and keeps the menu open. Nuxt UI: `type: 'checkbox'` items bound to `useColorMode().preference`.
-- **Mobile:** the account row in the navigation drawer opens a bottom sheet over an `--rc-overlay` scrim, with a grab handle. Header: 36 px avatar, name in 15 px semibold, email in muted text. Items are 48 px at 15 px text.
+- **Mobile:** the account row in the navigation drawer opens a bottom sheet over an `--rc-overlay` scrim, with a grab handle. Header: 36 px avatar, name in 15 px semibold, email in muted text. Items are 48 px at 15 px text; the theme items keep the same order and separators.
 - **Keyboard:** Escape or a click outside closes it. Arrow keys move between items.
-- **Open question:** the shipped menu also offers System, Light and Dark. The board omits them. See [profile.md](screens/profile.md).
+- The board now draws the theme items, so the chip, menu and sheet need no visual exception. The board highlights Profile even on Home; the app highlights it only on `/profile`.
 
 ### DashboardShell (changed)
 
-The navigation gains **Users** (users icon) between Articles and Integration, in the sidebar and in the mobile drawer. Breadcrumbs for the new pages are "Users" and "Profile".
+The navigation gains **Users** (users icon) between Articles and Integration, in the sidebar and in the mobile drawer. Breadcrumbs for the new pages are "Users" and "Profile". It later gains **Settings** (settings icon) after Integration, with the breadcrumb "Settings".
 
 ### UsersTable, UserCardList
 
-Columns Username, Invite status, Created (sorted descending, with an arrow-down icon on the header). Grid `minmax(0,1fr) 160px 160px`, 36 px header on `--ui-bg-elevated`, 44 px rows with a top border. Below md the same rows become cards with a 68 px minimum height: the name line, then the badge and "Created {date}". There are no row actions.
+Superseded by "UsersTable, UserCardList (changed)" below.
-
-A row's name cell shows the display name first (medium weight, highlighted), the username beside it in muted text, and a mono "you" tag on the current user's row. Invite rows show the email, regular weight, toned. The row of a just-sent invite has `--ui-bg-elevated`.
 
 Skeleton rows appear after 150 ms of loading.
 
@@ -735,3 +735,52 @@ Three choices: System (the default), Light and Dark. The toggle at the top of th
 Nuxt UI In the user menu: a UDropdownMenu group of three type: 'checkbox' items bound to useColorMode().preference . On auth screens: UColorModeSelect in the footer. Nuxt UI's UColorModeButton isn't used because it only toggles between light and dark and hides the system option. colorMode: true in the plugin handles storage and applying the .dark class before first paint.
 
 ARIA Menu items use menuitemcheckbox , with aria-checked on the current choice. The segmented variant is a radiogroup named "Theme".
+
+## Added with roles, invite actions and Settings
+
+Written from `source/RenewCMS Screens Back-office.dc.html` and `source/AppFrame.dc.html`. The Product components board was not regenerated for these.
+
+### UsersTable, UserCardList (changed)
+
+Columns Email, Display name, Role, Invite status, Created (sorted descending, with an arrow-down icon on the header) and an unlabeled actions column. Grid `minmax(0,1.3fr) minmax(0,1fr) 84px 120px 110px 150px`, 12 px gap, 36 px header on `--ui-bg-elevated`, 48 px rows with a top border. Below md the same rows become cards with a 68 px minimum height: the email line, the display name below it when set, then role badge, status badge and "Created {date}" on one line, then the row action as a 44 px button.
+
+The email cell is medium weight and highlighted, with a mono "you" tag on the current user's row. The display name is highlighted, or a muted `—` when empty. The row of a just-sent or just-renewed invite has `--ui-bg-elevated`. Skeleton rows have one bar per column. The username is not shown.
+
+### RoleBadge
+
+A 20 px badge in IBM Plex Mono 11 px medium, 7 px side padding, no icon.
+
+| Role | Fill | Text | Border |
+|---|---|---|---|
+| owner | `--ui-primary` | `--ui-bg` | `--ui-primary` |
+| admin | transparent | `--ui-text-toned` | `--ui-border-accented` |
+
+### Row action button (Users)
+
+A 28 px outline button on desktop (12 px medium text, 13 px icon, 9 px side padding, `--ui-border-accented` border, `--ui-bg` fill, no wrapping), 44 px on mobile (14 px side padding, 14 px icon). Cancel invite: user-x, text `--ui-error`. Renew invite: refresh-cw, text `--ui-text-highlighted`. While busy: the label becomes "Renewing…", the icon loader-circle, opacity 50 %, disabled. Nuxt UI: `UButton variant="outline" size="xs"` with the classes above.
+
+Cancel goes through `ConfirmDialog` with `tone: 'danger'`: title "Cancel this invite?", the description names the address, the cancel button reads "Keep invite" and the confirm button "Cancel invite", pending label "Cancelling…", and a failure shows a notice inside the dialog.
+
+### SettingsPage
+
+A page header (title "Settings", subtitle "Workspace information."), then one card holding a "Version" row. See [screens/settings.md](screens/settings.md).
+
+## Added with Media
+
+Exact values live in `source/MediaFrame.dc.html`. Copy and states are in [media](screens/media.md) and [media-picker](screens/media-picker.md).
+
+| Component | Nuxt UI base | Props | Emits | Used in |
+|---|---|---|---|---|
+| MediaToolbar | UTabs, UInput, USelectMenu, UButtonGroup | tab, q, sort, view, counts | update:tab, update:q, update:sort, update:view | Media |
+| MediaGrid | custom (buttons in a grid) | items, selected: Set, loading | open(id), toggle(id) | Media |
+| MediaTable, MediaCardList | UTable, custom list | same as MediaGrid | same as MediaGrid | Media (md and up, below md) |
+| MediaBulkBar | custom, UButton | count | delete, clear | Media |
+| MediaDetailPanel | USlideover | id | close, rename, delete, copy-url, review-duplicates | Media |
+| MediaUploadPanel | UProgress, UButton | rows | use-existing(row), upload-anyway(row), retry(row), cancel, dismiss | Media |
+| DuplicateGroups | custom cards | groups | merge(group, keepId) | Media |
+| MediaThumb | custom | item, size | none | Media, picker |
+| MediaBadge | UBadge | kind: 'unused'\|'duplicate'\|'used'\|'online'\|'draft', label | none | Media, picker |
+| RenameDialog, MergeDialog, DeleteMediaDialog | ConfirmDialog, UForm | item(s) | done | Media |
+| MediaPicker | UTabs inside ImageUploader | articleId | picked(item, alt) | Editor |
+
+ImageUploader (changed): it gains the Upload and Library tabs and the "Already in your library" card. The remove-image confirm becomes neutral and only detaches the image from the article.

docs/design/routes.md

@@ -14,9 +14,11 @@ A global `router.beforeEach` guard reads `meta.auth`. On the first navigation it
 | `/home` | DashboardShell | verified | HomePage | GET /v1/article/ |
 | `/article` | DashboardShell | verified | ArticlesPage | GET /v1/article/ · PATCH /{id}/publish\|unpublish · DELETE /{id} |
 | `/article/new` | DashboardShell | verified | ArticlesPage + NewArticleModal | POST /v1/article/ |
-| `/article/:id/edit` | DashboardShell | verified | EditorPage | GET /{id} · PATCH /{id} · PATCH /{id}/publish\|unpublish · POST /{id}/image · DELETE /{id} |
+| `/article/:id/edit` | DashboardShell | verified | EditorPage | GET /{id} · PATCH /{id} · PATCH /{id}/publish\|unpublish · GET /v1/media/ · POST /v1/media/ · DELETE /{id} |
+| `/media` | DashboardShell | verified | MediaPage | GET /v1/media/ · POST /v1/media/ · PATCH /v1/media/{id} · DELETE /v1/media/{id} · POST /v1/media/merge · GET /v1/media/{id}/usage |
 | `/integration` | DashboardShell | verified | IntegrationPage | none |
-| `/users` | DashboardShell | verified | UsersPage + InviteUserModal | GET /v1/user/ · POST /v1/user/invite |
+| `/users` | DashboardShell | verified | UsersPage + InviteUserModal | GET /v1/user/ · POST /v1/user/invite · DELETE /v1/user/invite/:id · POST /v1/user/invite/:id/renew |
+| `/settings` | DashboardShell | verified | SettingsPage | GET /v1/settings |
 | `/profile` | DashboardShell | verified | ProfilePage | GET /v1/auth/me · PATCH /v1/user/me · POST /v1/auth/password-reset |
 | `/invite/accept` | AuthShell | public | AcceptInvitePage | GET /v1/auth/invite?c=* · POST /v1/auth/invite/accept* |
 | `/:pathMatch(.*)*` | either | any | NotFoundPage | none |

docs/design/screens/articles.md

@@ -88,7 +88,7 @@ Rows update when the server responds, not optimistically. Search, tab and sort a
 
 - Breadcrumbs: Articles (mobile title "Articles")
 - Modal: **Delete this article?**
-  - text ""Winter checklist for timber windows" and its 3 images will be deleted. This can't be undone."
+  - text ""Winter checklist for timber windows" will be deleted. Its images stay in your library. This can't be undone."
   - cancel "Cancel"
   - confirm "Delete article" (danger)
 
@@ -98,7 +98,7 @@ Rows update when the server responds, not optimistically. Search, tab and sort a
 
 - Breadcrumbs: Articles (mobile title "Articles")
 - Modal: **Delete this article?**
-  - text ""Winter checklist for timber windows" and its 3 images will be deleted. This can't be undone."
+  - text ""Winter checklist for timber windows" will be deleted. Its images stay in your library. This can't be undone."
   - cancel "Cancel"
   - confirm "Deleting…" (danger), loading, not dismissible
 
@@ -108,7 +108,7 @@ Rows update when the server responds, not optimistically. Search, tab and sort a
 
 - Breadcrumbs: Articles (mobile title "Articles")
 - Modal: **Delete this article?**
-  - text ""Winter checklist for timber windows" and its 3 images will be deleted. This can't be undone."
+  - text ""Winter checklist for timber windows" will be deleted. Its images stay in your library. This can't be undone."
   - Alert: "Couldn't delete the article, so it's still there. Try again in a moment."
   - cancel "Cancel"
   - confirm "Delete article" (danger)
@@ -118,5 +118,5 @@ Rows update when the server responds, not optimistically. Search, tab and sort a
 **Trigger:** 204: the row is removed and focus moves to the next row. This is also where a delete from the editor ends up.
 
 - Breadcrumbs: Articles (mobile title "Articles")
-- Toast (success, circle-check): **Article deleted** ""Winter checklist for timber windows" and its images are gone."
+- Toast (success, circle-check): **Article deleted** ""Winter checklist for timber windows" is gone."
 - Tab counts (All, Online, Drafts): 5, 4, 1

docs/design/screens/editor.md

@@ -183,7 +183,7 @@ On mobile, Save and Publish sit in a sticky bottom bar and the details panel ope
 
 - Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
 - Modal: **Delete this article?**
-  - text ""How we price a bathroom renovation" and its 3 images will be deleted. This can't be undone."
+  - text ""How we price a bathroom renovation" will be deleted. Its images stay in your library. This can't be undone."
   - cancel "Cancel"
   - confirm "Delete article" (danger)
 - Editor: status "draft", save "saved"

docs/design/screens/media-picker.md

@@ -0,0 +1,56 @@
+# Media picker (editor)
+
+- **Route:** `/article/:id/edit` (inside the editor's existing "Add an image" dialog)
+- **API:** GET /v1/media/?q=&limit=&cursor= · POST /v1/media/ (same as the Media page)
+- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Media picker", drawn by `source/MediaFrame.dc.html`.
+
+The existing "Add an image" dialog gains two tabs, Upload and Library. The Upload tab is the current flow unchanged, so it still offers crop and resize, and a new image lands in the library and is inserted as before. The Library tab opens on the Library tab when the library has images and on Upload when it is empty. Images load 24 at a time with "Load more". Newest first, and images already in this article carry "In this article". Alt text is set here and lives only in the article. The dialog is 640 px wide on desktop and a bottom sheet on mobile.
+
+This supersedes the upload-only "Add an image" dialog described in [editor](editor.md), and the "Remove this image?" confirmation from `features/editor_image_removal.feature`.
+
+## Dialog
+
+Title "Add an image", `x` to close, 640 px wide on desktop (bottom sheet on mobile). Two tabs under the title: **Upload** (`upload` icon) and **Library** (`images` icon). The dialog opens on Library when the library has images and on Upload when it is empty; dropping a file onto the editor opens Upload with the file provided, as before. Footer: "Cancel", and on Library a primary "Insert image", disabled until an image is selected.
+
+**Upload tab.** The current flow unchanged (drop zone "Drop an image here, or choose a file", help "PNG, JPEG, WEBP, SVG · max 10 MB", crop and resize, rejected, uploading and failed states). Two changes: the new image lands in the library and is inserted as before, and a chosen file whose content matches an existing image sends nothing and shows an info-bordered card: thumbnail, "Already in your library", `north-wall.jpg matches an image uploaded on 12 Sep 2026 by Marta Alves.`, with "Use existing" (primary) and "Upload anyway". "Use existing" goes to the alt text step for the existing image; "Upload anyway" continues to crop and upload.
+
+**Library tab.** Search field ("Search by filename"), the line "Newest first · 48 images", a grid of square tiles (4 columns on desktop, 3 on mobile; scrolls inside the dialog) with the filename under each, and "Load more" below (24 images per page). Tiles are buttons labelled with filename, size and use; Enter or Space selects (single selection). A tile of an image already in this article carries a sand "In this article" tag. The selected tile gets a primary outline and a check. Once one is selected, the grid shrinks and a panel appears below it: 56 px thumbnail, filename, `dimensions · size`, and a field "Alt text (optional)" with placeholder "e.g. North wall of the kitchen before plastering" and help "Describes the image for people who use a screen reader, and shows if it doesn't load. Leave it empty if the image is only decoration." Alt text lives only in the article, never on the image.
+
+| Library state | Copy |
+|---|---|
+| Empty | `images` icon, "Your library is empty" / "Images you upload appear here, ready to use in any article." / "Upload an image" (switches to Upload) |
+| No results | `search` icon, `No images match "wall"` / "Check the spelling, or search for a shorter part of the filename." / "Clear search" |
+| Failed | error alert "Couldn't load your library" / "Check your connection and try again." / "Try again" |
+| Loading more | button reads "Loading…" with a loader, skeleton tiles at the end |
+
+Insert (either tab): the image goes in at the cursor with the chosen alt text (empty alt means decorative), the draft becomes "Unsaved changes", and a toast appears: `circle-check`, "Image added" / "Save to keep it in the article." The dialog then closes.
+
+## Removing an image from the article
+
+The "Remove image" button on a selected image in the editor (and Backspace or Delete on it) now opens a neutral (not red) confirm, because nothing is deleted:
+
+- Title: "Remove this image from the article?"
+- Description: "It's removed from this article only. The file stays in your library and in any other article that uses it."
+- Body: thumbnail, filename, "Stays in the library · 3.9 MB"
+- Buttons: "Cancel" / "Remove image"
+- Done: the image leaves the body, the draft becomes "Unsaved changes", and a toast appears: `circle-check`, "Image removed" / "It's still in your library."
+
+No API call is made. Removing is a body edit only.
+
+## States
+
+| State | Trigger and behaviour |
+|---|---|
+| Upload tab | The image button in the toolbar. Identical to the current "Add an image" content; only the tabs are new. Rejected, uploading and failed states are unchanged. |
+| Upload tab: already in your library | A chosen file has the same content as an existing image. Nothing is sent. "Use existing" inserts the existing image (the alt text step follows); "Upload anyway" continues to crop and upload as usual. |
+| Library: loading | The Library tab was opened, or a search changed. Skeleton tiles after 150 ms. |
+| Library: nothing selected | Newest first. Tiles are buttons labelled with filename, size and use, and Enter or Space selects. Images already in this article carry "In this article". "Insert image" is disabled. |
+| Library: selected | One image selected (single selection). Below the grid: thumbnail, filename, dimensions and size, and an optional alt text field. "Insert image" turns on. |
+| Library: alt text entered | Alt text is optional. Empty alt text is inserted as a decorative image. It is not saved on the image. |
+| Library: loading more | "Load more" pressed. The button shows progress and new skeleton tiles appear at the end. Focus stays on the button until the new tiles arrive, then moves to the first new tile. |
+| Library: empty | Zero images. "Upload an image" switches to the Upload tab. |
+| Library: no results | Search matched nothing. "Clear search" resets it. |
+| Library: failed to load | A 500 or network failure. The error shows in the dialog and Try again repeats the request. A 429 uses the same countdown alert as the Media page, and a 401 is handled globally. |
+| Inserted | Insert image from either tab. The image goes in at the cursor with the chosen alt text, and the article now has unsaved changes. |
+| Remove image: confirm | Remove image on an image in the article. It now only removes it from this article, and the copy says the file stays in the library. The confirm button is neutral, not red, because nothing is deleted. Title: "Remove this image from the article?" |
+| Removed | Confirmed. The image leaves the article body, which now has unsaved changes. |

docs/design/screens/media.md

@@ -0,0 +1,159 @@
+# Media
+
+- **Route:** `/media` (verified users)
+- **API:** GET /v1/media/ · POST /v1/media/ · PATCH /v1/media/{id} · DELETE /v1/media/{id} · POST /v1/media/merge · GET /v1/media/{id}/usage
+- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Media", drawn by `source/MediaFrame.dc.html` (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+The library of every uploaded image. It replaces "images belong to one article": an image belongs to the library and can be used in any number of articles. Deleting an article never deletes images. The sidebar gains **Media** (`images` icon) between Articles and Users, breadcrumb "Media".
+
+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").
+
+## Layout
+
+Header: title "Media", subtitle "Every image you've uploaded, ready to use in any article.", primary "Upload" button (`upload` icon) on the right. On mobile the button is a full-width 48 px button pinned to the bottom (it turns into "Try again in 0:42" while rate limited, and is replaced by the bulk bar while items are selected).
+
+Toolbar: tabs **All**, **Unused** and **Duplicates** (count badge of duplicate groups, only while groups exist), then search ("Search by filename"), sort and the grid/list toggle. Sort options: Newest (default), Oldest, Name, Largest. Below md the toolbar stacks: search, tabs, then sort and toggle.
+
+Grid (default): 5 columns on desktop, 2 on mobile, 16 px gap (10 px on mobile). Each card is one button: 4:3 thumbnail (checkerboard behind transparent PNG and SVG), filename (medium, ellipsis), `size · dimensions` (SVG dimensions read "Vector"), then badges. The accessible name reads "north-wall.jpg, 3.9 MB, used in 2 articles" or "…, unused". A "Select all" row with the image count sits above the grid.
+
+| Badge | Look |
+|---|---|
+| Unused | warning-soft fill, `unlink` icon |
+| Duplicate | info-soft fill, `copy` icon |
+| Used in N | outline, toned text |
+
+List view: table from md up, columns Filename (with 40 px thumbnail and Duplicate badge), Dimensions, Size, Type, Used in (underlined count, opens the detail panel), Uploaded by, Uploaded (sorted, `arrow-down`); 56 px rows, 36 px header, first column is the checkbox. Below md it is a card list with a 44 px checkbox column, a 56 px thumbnail, filename, `size · dimensions · type`, badges plus `uploader · date`, and a trailing `chevron-right`.
+
+Selection: selected items take the sand fill (`--rc-sand`) with a primary outline. The checkbox shows on hover, on keyboard focus, on mobile, and whenever anything is selected. The bulk bar is sticky at the bottom (400 px wide on desktop, full width above the bottom edge on mobile): inverted fill, "3 selected", a danger "Delete" button (`trash-2`) and an inverted "Clear".
+
+Detail panel: right-hand slideover 460 px wide on desktop (`x` to close), full screen on mobile with an `arrow-left`. Title is the filename. Body: 16:10 preview (4:3 on mobile), actions Copy URL (`link`), Rename (`pencil`), Delete (`trash-2`, error text), an info alert for duplicates, a metadata list (Type, Size, Dimensions, Uploaded, Uploaded by, URL in mono), then the "Used in" section.
+
+Detail panel copy:
+
+| Where | Copy |
+|---|---|
+| Duplicate alert | "Identical to 2 other images" / "floorboards-copy.jpg and IMG_2208.jpg have the same content." / action "Review duplicates" (`arrow-right`) |
+| Used | "Used in 2 articles", then one row per article: title (underlined link to the editor), badge "Online" (`globe`, inverted) or "Draft" (`pencil-line`, outline), `arrow-up-right`. Footnote: "Counted from the text of your articles each time you open this page." |
+| Not used | "Not used in any article" / "This image is safe to delete. No article shows it." |
+
+## Dialogs
+
+All dialogs use the existing ConfirmDialog look (`UModal`, `sm:max-w-md`, bottom sheet on mobile, cancel first). While a request runs the confirm button shows a `loader-circle`, both buttons are disabled and the dialog cannot be dismissed. A failure shows an error alert at the top of the dialog body and the dialog stays open.
+
+| Dialog | Title | Description | Body | Cancel / Confirm (pending) |
+|---|---|---|---|---|
+| Rename | "Rename image" | "Only the filename changes. The URL stays the same, so articles that use this image keep working." | Field "Filename" with the extension fixed as a mono suffix (`.jpg`); help "Letters, numbers, dashes and underscores. The .jpg ending stays."; error "Enter a filename." on empty or only symbols | "Cancel" / "Rename" ("Renaming…") |
+| Delete, unused | "Delete this image?" | ""window-frame.jpg" will be deleted from your library. No article uses it. This can't be undone." | none | "Cancel" / "Delete image" ("Deleting…"), danger |
+| Delete, in use | "Delete an image that's in use?" | ""north-wall.jpg" is used in 2 articles. If you delete it, they will show a broken image. This can't be undone." | list of affected articles with Online or Draft badges | "Cancel" / "Delete image" ("Deleting…"), danger |
+| Bulk delete | "Delete 3 images?" | "2 of them are used in 4 articles, which will show a broken image. The other one isn't used anywhere. This can't be undone." | one row per image: filename and "Used in N" or "Unused" | "Cancel" / "Delete 3 images" ("Deleting…"), danger |
+| Merge | "Merge into floorboards.jpg?" | "Articles that use the other 2 copies will be switched to floorboards.jpg, and the other 2 copies will be deleted. 5 articles will be updated. This can't be undone." | the kept image: thumbnail, filename, "Kept · used in 4 articles now" | "Cancel" / "Merge 2 copies" ("Merging…"), danger |
+
+Dialog errors: rename "Couldn't rename the image. Your text is still here. Try again in a moment."; delete "Couldn't delete the image, so it's still there. Try again in a moment."; merge (500) "Couldn't merge the copies. Nothing was changed. Try again in a moment."; merge (409) "One of these images changed, so nothing was merged. The list is up to date now. Check it and try again."
+
+## Upload panel
+
+A panel above the images while files are in flight and until dismissed. Header: "Uploading 6 images" with "2 of 6 done" and "Cancel all" (after it settles: "Upload finished" / "5 images" and "Dismiss"; if nothing was added: "Nothing was uploaded"). Files upload two at a time, one row each: 40 px thumbnail, filename, size, then per status:
+
+| Status | Row |
+|---|---|
+| Waiting | "Waiting" |
+| Uploading | "Uploading 1.1 of 2.6 MB" with a 4 px progress bar and a cancel `x` |
+| Added | `circle-check` "Added to your library" |
+| Duplicate | "Already in your library" / `Same as "floorboards.jpg", uploaded 14 Jun 2026 by Inès Duarte.` / "Use existing" and "Upload anyway" |
+| Rejected | `file-x` title, then "Images can be up to 10 MB. Use a PNG, JPEG, WEBP or SVG image." Titles: `scan.tif is 14.2 MB` (too large), `notes.pdf isn't an image` (type), `broken.png couldn't be read` with "The server couldn't read this image. Save it again as a PNG or JPEG, then try again." (400) |
+| Failed | `circle-x` "Upload failed" / "The server didn't accept the file. Nothing was added to your library." / "Try again" (`rotate-cw`) |
+
+Summary line when settled: "2 uploaded · 1 already in your library · 2 need attention". Type and size are checked in the browser before anything is sent (PNG, JPEG, WEBP, SVG; 10 MB), by MIME type and by extension, exactly as the editor's uploader does. Dropping files onto the page shows a dashed primary-bordered area "Drop images to upload" / "PNG, JPEG, WEBP, SVG · max 10 MB each".
+
+## Duplicates view
+
+Groups stacked with 16 px gap. Each group is a bordered card: header "Group 1" and "3 identical images · 2.4 MB each · 3600 × 2400"; one column per copy (stacked on mobile) with thumbnail, filename, "Uploaded 14 Jun 2026 by Inès Duarte", underlined "Used in 4 articles", and a "Merge into this one" button (`merge` icon). The suggested copy has the sand fill, a primary outline, a "Suggested" tag and a primary button; the others are outline. Footer: "Suggested: the most used copy, then the oldest. Choosing another copy switches articles to it." Empty: `copy` icon, "No duplicates" / "Every image in your library is different." / "Back to all images".
+
+## Other copy
+
+| Where | Copy |
+|---|---|
+| Empty library | `images` icon, "No images yet" / "Upload your first image. You can use it in any article." / primary "Upload an image"; under it "PNG, JPEG, WEBP, SVG · max 10 MB each" |
+| No results | `search` icon, `No images match "wall"` / "Nothing matches in Unused. Check the spelling, or clear the filters." / "Clear filters" |
+| List error | error alert "Couldn't load your images" / "Check your connection and try again." / "Try again" |
+| Rate limited | info alert `timer` "Too many uploads" / "For your security, wait a moment before uploading again."; the Upload button reads "Try again in 0:42" and is disabled |
+| Offline banner | `wifi-off` "You're offline. You can look through the images that are loaded, but uploading, renaming and deleting need a connection." |
+
+Toasts (success 5 s unless noted):
+
+| Trigger | Icon, title, description |
+|---|---|
+| Copy URL | `circle-check` "URL copied" / "Paste it wherever you need the image address." |
+| Rename | `circle-check` "Image renamed" / `It's now "north-wall-01.jpg". The URL is the same.` |
+| Delete | `circle-check` "Image deleted" / `"window-frame.jpg" is gone from your library.` |
+| Bulk delete | `circle-check` "3 images deleted" / "They're gone from your library." |
+| Bulk delete, partial | error, stays until retried or dismissed: `circle-x` "Couldn't delete 1 image" / "2 images were deleted. window-frame.jpg is still in your library. Try again." / "Retry" |
+| Merge | `circle-check` "Copies merged" / "2 copies merged. 5 articles updated." |
+| 404 | info `info` "That image no longer exists" / "It was deleted somewhere else, so we removed it from the library." |
+
+## Status to copy
+
+| Status | Where | Copy |
+|---|---|---|
+| 200 / 201 | Upload, rename, merge | Upload: row reads "Added to your library". Rename and merge: toasts above. |
+| 204 | Delete, bulk delete | Toasts above. |
+| 400 | Upload row | "broken.png couldn't be read" / "The server couldn't read this image. Save it again as a PNG or JPEG, then try again." In a dialog: "Something in the form isn't valid. Check the highlighted fields." |
+| 401 | any | Global: /login?redirect=/media&reason=expired. No local copy. |
+| 403 | any, unverified | Global: /register/pending. |
+| 404 | rename, delete, merge, panel | The info toast above; the panel or dialog closes. |
+| 409 | merge | Dialog alert above. |
+| 413 | upload row | "scan.tif is 14.2 MB" / "Images can be up to 10 MB. Use a PNG, JPEG, WEBP or SVG image." |
+| 415 | upload row | "notes.pdf isn't an image" / same description. |
+| 429 | upload | Rate-limited alert above, counting down Retry-After. |
+| 500 / network | list, upload row, rename, delete, merge | The copy for each place above. |
+| Offline | whole page | Banner above. |
+
+## Keyboard and accessibility
+
+Grid items are buttons, one tab stop each. Enter opens the detail panel, Space toggles selection, arrow keys move focus across the grid, Escape closes the panel or clears the selection. Focus returns to the item when the panel closes, and moves to the next item after a delete. Selection changes are announced ("north-wall.jpg selected, 1 selected"), as are upload completion and the merge result. Search, filter, sort and view live in the query string.
+
+## States
+
+| State | Trigger and behaviour |
+|---|---|
+| 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. |
+| Grid, few images | Three images. Cards keep their size instead of stretching. Checkerboard shows behind the SVG. |
+| 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. |
+| Loading | The first load, a retry, or a change of search or filter. Skeleton cards appear after 150 ms. |
+| Empty library, first run | Zero images. Toolbar and tabs are hidden; one call to action. Copy: "No images yet" / "Upload your first image. You can use it in any article." / "Upload an image". |
+| No results | Search or filter matched nothing. "Clear filters" resets the search and goes back to All. |
+| Hover, focus and keyboard | Hover (second item) darkens the border, adds the pop shadow and reveals the checkbox. Keyboard focus (third item) shows the 2 px primary ring with a 2 px offset and reveals the checkbox. Tab moves between items, Enter opens the detail panel, Space toggles selection, and arrow keys move focus across the grid. |
+| Selection and bulk bar | Checkbox on any item, or Space. Selected items take the sand fill with a primary outline, and Select all shows a partial state. The bar is sticky at the bottom (above the bottom edge on mobile, replacing the Upload button). Announced: "3 selected". Escape or Clear empties it. |
+| Bulk delete: confirm | Delete in the bulk bar. The dialog says how many of the selection are in use and lists them. The confirm button carries the count. |
+| Bulk delete: in progress | Requests in flight. The dialog can't be dismissed. |
+| Bulk delete: partly failed | Some requests failed. Deleted images leave the grid, failed ones stay selected, and the toast stays until retried or dismissed. |
+| Bulk delete: done | 204 for all. Focus moves to the next item. |
+| Detail panel: in use | Click or Enter on an item. Right-hand slideover on desktop, full screen on mobile with a back arrow. Actions: Copy URL, Rename, Delete. "Used in 2 articles" lists title, Online or Draft, and links to the editor. Focus returns to the item on close. |
+| Detail panel: unused | Used in nothing. The section reads "Not used in any article" and says the image is safe to delete. |
+| Detail panel: duplicate | The image has identical copies. An info alert links to the duplicates view. |
+| Copy URL | Copy URL. Clipboard write succeeded. Success toasts last 5 s. |
+| Rename: dialog | Rename in the panel. The field holds the name without its extension, and the .jpg ending is fixed. The description says the URL stays the same. |
+| Rename: saving | PATCH in flight. Field and buttons disabled, dialog can't be dismissed. |
+| Rename: validation | Empty or only symbols, on submit or blur. Nothing is sent. |
+| Rename: failed | 500 or network failure. The error shows inside the dialog. |
+| Rename: done | 200: the panel title and list update in place. |
+| Delete: unused image | Delete in the panel. Plain confirm. Says what happens and that it can't be undone. |
+| Delete: image in use | Stronger confirm. Lists the affected articles and states that they will show a broken image. |
+| Delete: in progress | DELETE in flight. The dialog can't be dismissed. |
+| Delete: failed | 500 or network failure. The error shows inside the dialog, as in the article delete. |
+| Delete: done | 204: the panel closes, the item leaves the grid and focus moves to the next item. |
+| Image already gone (404) | Any action on an image that was deleted elsewhere. The panel closes and the item leaves the list. |
+| Upload: drag over the page | Files dragged onto the page. A dashed drop area covers the content. Dropping starts the upload straight away; there is no crop step on this page. |
+| 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. |
+| 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. |
+| 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. |
+| 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. |
+| 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. |
+| Duplicates: empty | No groups. The Duplicates tab loses its count badge. |
+| Merge: confirm | "Merge into this one" on floorboards.jpg. The dialog says articles using the other copies will switch to this image and the other copies will be deleted, with the article count. |
+| Merge: in progress | Request in flight. The dialog can't be dismissed. |
+| Merge: failed | 500 or network failure. Nothing is switched or deleted. |
+| Merge: conflict (409) | A copy was deleted, or a new copy appeared, since the page loaded. |
+| Merge: done | 200: the group leaves the list. When it was the last one, "No duplicates" shows. |
+| List failed to load | A 500 or network failure on the list request. The alert replaces the images; Try again repeats the request. |
+| Offline | navigator.onLine is false. Loaded images stay browsable. Upload, Rename, Delete and Merge are disabled, and the banner says why. |

docs/design/screens/profile.md

@@ -10,7 +10,7 @@ Once saved it replaces the username everywhere a person is named:
 
 - the sidebar chip and the account menu (name, and the avatar initials)
 - the Home greeting ("Good morning, Marta Alves")
-- the Users list, with the username beside it
+- the Display name column of the Users list
 - the emails RenewCMS sends, such as "Marta Alves invited you to RenewCMS"
 
 Saving it empty goes back to the username. Logging in still uses the username.
@@ -48,11 +48,13 @@ Desktop: a 224 px popover above the chip, aligned to its left. Mobile: the accou
 | Header | The name in semibold (display name, or the username), and the email in muted 12 px (14 px on mobile, with a 36 px initials avatar beside them) |
 | Item | Profile (circle-user icon), highlighted while on `/profile` |
 | Separator | |
+| Items | System, Light, Dark: a radio-style group, the current choice carries a check icon at the right edge; choosing one applies the theme at once and keeps the menu open |
+| Separator | |
 | Item | Log out (log-out icon) |
 
 Avatar initials come from the first letters of the first two words of the display name, uppercased ("Marta Alves" gives MA). Without a display name they come from the username.
 
-The board's menu has no System, Light or Dark items, while the shipped UserMenu has them. This is an open question, see the notes below.
+The board's menu now carries System, Light and Dark, matching the shipped UserMenu. The theme choice stays in the account menu; the Profile page does not repeat it. Items are 32 px on desktop and 48 px in the mobile sheet.
 
 ## States
 
@@ -62,7 +64,7 @@ The board's menu has no System, Light or Dark items, while the shipped UserMenu
 
 - Breadcrumbs: Home (mobile title "Home")
 - Page behind the menu: Home, default
-- Menu open, as described above
+- Menu open, as described above, with the System, Light and Dark group between Profile and Log out. The board shows Light checked
 
 ### Loading
 
@@ -161,17 +163,17 @@ The board's menu has no System, Light or Dark items, while the shipped UserMenu
 
 ### Display names in the Users list
 
-**Trigger:** Accounts with a display name show it first, with the username beside it in grey. Accounts without one show the username. This state needs the Users page ([users.md](users.md)).
+**Trigger:** The Display name column of the Users list shows the name when one is set and a dash when not. Your own row follows your saved name. This state needs the Users page ([users.md](users.md)).
 
 - Breadcrumbs: Users (mobile title "Users")
 - Signed-in user's display name: "Marta Alves" (sidebar chip shows it too)
-- Row `marta` (you): "Marta Alves", `marta` beside it in muted text, "you" tag, Accepted
+- Row `marta@renew.example` (you): display name "Marta Alves", role owner, Accepted
-- Row `ines`: "Inès Duarte", `ines` beside it in muted text, Accepted
+- Row `ines.duarte@renew.example`: display name "Inès Duarte", role admin, Accepted
-- Row `jonas`: `jonas` alone, Accepted
+- Row `jonas@renew.example`: display name "—" (muted), role admin, Accepted
 
 ## Notes for implementation
 
 - `PATCH /v1/user/me` is marked pending by the design: it does not exist yet. `GET /v1/auth/me` has to start returning the display name.
 - The Password card sends the reset email to the account's own address through the existing `POST /v1/auth/password-reset`. The link ends on the reset confirm screen, and a successful reset invalidates the current session like any other reset.
 - "Disabled for 5 minutes" is the design's number. The real window comes from the `Retry-After` header, as on the login and reset screens.
-- Open question: the shipped UserMenu offers System, Light and Dark, and the redesigned menu does not. Decide whether the theme choice stays in the menu, moves to the Profile page, or is dropped, before building the menu.
+- Resolved: the theme choice (System, Light, Dark) stays in the account menu, as the board now draws it. The board still draws Profile highlighted on Home; the app highlights it only on `/profile`.

docs/design/screens/settings.md

@@ -0,0 +1,35 @@
+# Settings
+
+- **Route:** `/settings`
+- **API:** GET /v1/settings (not drawn, see the notes)
+- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Settings" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+Opened from the sidebar (Settings, settings icon, after Integration) and from the mobile drawer. Every verified user sees it, owner and admins alike. For now it holds a single section, Version. Nothing on it can be edited.
+
+## The page
+
+Title "Settings" and the subtitle "Workspace information.", 720 px wide at most. Page padding 32 px on desktop and `20px 16px 88px` on mobile, 20 px between the header and the card.
+
+One card (`--ui-bg`, 1 px `--ui-border`, 20 px padding on desktop and 16 px on mobile), a single row with the label on the left and the value on the right, 16 px apart:
+
+| Part | Content |
+|---|---|
+| Label | "Version", 15 px semibold, `--ui-text-highlighted` |
+| Value | The running build's version in IBM Plex Mono 14 px, `--ui-text-toned`. The board shows `v2.2.0-beta`. Shown exactly as the server reports it, so the SPA adds no `v` prefix. |
+
+## States
+
+### Default
+
+**Trigger:** Opened from the sidebar.
+
+- Breadcrumbs: Settings (mobile title "Settings")
+- Section: Version, `v2.2.0-beta`
+
+The board draws no loading or error state. Decide them in the spec (see the notes).
+
+## Notes for implementation
+
+- The board's API line says "none (static)", but the version lives in the Go binary (`main.version`, set with `-ldflags -X`, `dev` when unset), so the SPA has to ask for it. The recommendation is `GET /v1/settings` returning `{ "version": "..." }` inside the verified group, so later settings have a home. It is read once at startup and never from the environment at request time.
+- Not drawn: loading (the recommendation is a skeleton for the value only, after 150 ms, like the other pages), and a failed request (an inline error in the card with "Try again", using the global copy "Couldn't reach RenewCMS. Check your connection and try again.").
+- Keep the page free of actions, toggles and links until a later slice adds a real setting.

docs/design/screens/users.md

@@ -1,24 +1,60 @@
 # Users
 
 - **Route:** `/users`
-- **API:** GET /v1/user/ · POST /v1/user/invite
+- **API:** GET /v1/user/ · POST /v1/user/invite · DELETE /v1/user/invite/:id (pending) · POST /v1/user/invite/:id/renew (pending)
 - **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Users" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
 
-One shared workspace: every user sees the same articles and this same list. Rows have no actions yet, so nobody can be removed, promoted or have an invite revoked from here. Pending and expired invites show the email address, because a username only exists once the invite is accepted.
+One shared workspace: every user sees the same articles and this same list. The list shows email, display name, role, invite status and created date. A Pending invite can be cancelled and an Expired one renewed; accepted accounts have no row actions, so nobody can be removed or promoted from here. Only the owner can invite, cancel and renew (see "Roles").
 
 An invite is **Pending** until its link is used, **Expired** after 3 days, and **Accepted** once the account is created. The list is sorted by created date, newest first.
 
+## Roles
+
+There are two roles. They are shown as a badge and are not editable.
+
+| Role | Who | Can |
+|---|---|---|
+| owner | The account that registered first on the workspace. There is exactly one. | Everything an admin can, plus invite users, cancel invites and renew invites. |
+| admin | Everyone who joined through an invite. Every invite creates an admin. | Read and write articles, see the Users list, edit their own profile, see Settings. |
+
+The owner is the only difference for now. The role cannot be changed, transferred or removed from the UI.
+
+**Not drawn by the board** (decide in the spec, cover by Vitest and Go tests only, like the 429 on invite):
+
+- What a non-owner sees: the recommendation is to hide "Invite user" (desktop and mobile), hide the row actions, and hide the "Invite someone…" hint on the "Only you" state.
+- The API answer when a non-owner calls an owner-only endpoint: the recommendation is 403 with a plain-text body, and no state change.
+- The message if the owner's session sees a 403 anyway (role changed under it): the global 403 handling applies.
+
 ## The list
 
 | Column | Content |
 |---|---|
-| Username | An accepted user: the display name if there is one (medium weight, highlighted) with the username beside it in muted text; otherwise the username alone. A pending or expired invite: the email address, regular weight, toned. The current user's row carries a muted mono "you" tag. |
+| Email | The account's or invite's email address, medium weight, highlighted. The current user's row carries a muted mono "you" tag after it. |
+| Display name | The display name when set, highlighted; a muted dash `—` when not. An invite has none, so it shows the dash. Your own row follows your saved name. |
+| Role | A mono 11 px badge, 20 px high: `owner` (filled, `--ui-primary` with `--ui-bg` text) or `admin` (transparent, toned text, `--ui-border-accented` border). An invite shows the role it will create, `admin`. |
 | Invite status | A badge: Accepted (circle-check, success), Pending (mail, warning), Expired (clock-alert, outline, muted). Shown by icon and word as well as color. |
-| Created | The date as `27 Sep 2026`, or "Today" for the current day. For an invite it is the day the invite was sent, for a user the day the account was created. |
+| Created | The date as `27 Sep 2026`, or "Today" for the current day. For an invite it is the day the invite was sent (or last renewed), for a user the day the account was created. |
+| (actions) | Right-aligned, no header text. Pending row: "Cancel invite". Expired row: "Renew invite". Accepted row: empty. |
 
-Desktop is a table: 36 px header, 44 px rows, columns `minmax(0,1fr) 160px 160px`. Below md it becomes a card list (68 px minimum row height): the name line, then the badge and "Created {date}". The page header is a title "Users" with the subtitle "Everyone who can sign in and work on your articles." and a primary "Invite user" button (user-plus icon) on its right. On mobile the button becomes a full-width 48 px button pinned to the bottom of the screen.
+The username is no longer shown in this list.
 
-The admin who registered first is always listed, so the list is never empty.
+Desktop is a table: 36 px header, 48 px rows, columns `minmax(0,1.3fr) minmax(0,1fr) 84px 120px 110px 150px` with a 12 px gap. Below md it becomes a card list (68 px minimum row height): the email line (with "you"), the display name below it when there is one, then the role badge, the status badge and "Created {date}" on one line, then the row action, if any, as a 44 px button with 14 px side padding.
+
+The page header is a title "Users" with the subtitle "Everyone who can sign in and work on your articles." and a primary "Invite user" button (user-plus icon) on its right. On mobile the button becomes a full-width 48 px button pinned to the bottom of the screen.
+
+The owner is always listed, so the list is never empty.
+
+### Row actions
+
+| Action | Shown on | Icon | Look |
+|---|---|---|---|
+| Cancel invite | Pending | user-x | Outline button, text in `--ui-error` |
+| Renew invite | Expired | refresh-cw | Outline button, text `--ui-text-highlighted` |
+
+Desktop buttons are 28 px high, 12 px medium text, a 13 px icon, 9 px side padding, `--ui-border-accented` border, `--ui-bg` fill. Mobile buttons are 44 px high and 14 px side padding with a 14 px icon.
+
+- **Cancel invite** asks first with a danger confirmation dialog, since it cannot be undone from here (the address can be invited again).
+- **Renew invite** asks nothing, since it only sends an email. While the request runs, that row's button reads "Renewing…" with a loader-circle icon at 50 % opacity and is disabled. Only that row is busy.
 
 ## States
 
@@ -27,21 +63,28 @@ The admin who registered first is always listed, so the list is never empty.
 **Trigger:** The list loaded, newest first.
 
 - Breadcrumbs: Users (mobile title "Users")
-- Rows: `sam.oliveira@renew.example` Pending, 27 Sep 2026 · `p.huber@gmail.com` Expired, 3 Aug 2026 · `ines` (display name "Inès Duarte") Accepted, 18 Jun 2026 · `jonas` Accepted, 2 Apr 2026 · `marta` (you) Accepted, 12 Mar 2026
+- Rows:
+  - `sam.oliveira@renew.example`, no display name, admin, Pending, 27 Sep 2026, "Cancel invite"
+  - `p.huber@gmail.com`, display name "Paul Huber", admin, Expired, 3 Aug 2026, "Renew invite"
+  - `ines.duarte@renew.example`, "Inès Duarte", admin, Accepted, 18 Jun 2026
+  - `jonas@renew.example`, no display name, admin, Accepted, 2 Apr 2026
+  - `marta@renew.example` (you), no display name, owner, Accepted, 12 Mar 2026
+
+The board gives the Expired invite a display name. A real invite has none, so the SPA renders whatever `display_name` the item carries and the dash when it is empty.
 
 ### Loading
 
 **Trigger:** The first load, or a retry. Skeletons appear after 150 ms.
 
 - Breadcrumbs: Users (mobile title "Users")
-- Five skeleton rows
+- Five skeleton rows, one bar per column, plus a role-badge and a status-badge placeholder
 
 ### Only you
 
-**Trigger:** Nobody has been invited yet. The admin who registered is always listed.
+**Trigger:** Nobody has been invited yet. The owner is always listed.
 
 - Breadcrumbs: Users (mobile title "Users")
-- One row: `marta` (you) Accepted
+- One row: `marta@renew.example` (you), owner, Accepted
 - Hint under the list: "Invite someone so they can sign in with their own account instead of sharing yours."
 
 ### Error
@@ -111,14 +154,79 @@ The admin who registered first is always listed, so the list is never empty.
 **Trigger:** 201: the dialog closes, the new invite appears at the top as Pending (highlighted row), and a toast confirms.
 
 - Breadcrumbs: Users (mobile title "Users")
-- New first row: `lea.martin@renew.example` Pending, created "Today", row background `--ui-bg-elevated`
+- New first row: `lea.martin@renew.example`, no display name, admin, Pending, created "Today", row background `--ui-bg-elevated`, with "Cancel invite"
 - Toast (success, circle-check): **Invite sent** "lea.martin@renew.example has 3 days to accept."
 
 The "Today" label makes this state clock-sensitive, so `task visual:check` skips it.
 
+### Cancel invite: confirm
+
+**Trigger:** "Cancel invite" on a Pending row.
+
+- Breadcrumbs: Users (mobile title "Users")
+- Modal (danger): **Cancel this invite?**
+  - text "The link sent to sam.oliveira@renew.example will stop working. You can invite the address again later."
+  - cancel "Keep invite"
+  - confirm "Cancel invite"
+
+### Cancel invite: sending
+
+**Trigger:** Request in flight. Both buttons are disabled and the dialog can't be dismissed.
+
+- Breadcrumbs: Users (mobile title "Users")
+- Modal (danger): **Cancel this invite?** (same text)
+  - cancel "Keep invite", disabled
+  - confirm "Cancelling…", loading
+
+### Cancel invite: failed
+
+**Trigger:** 500 or network failure. The dialog stays open.
+
+- Breadcrumbs: Users (mobile title "Users")
+- Modal (danger): **Cancel this invite?** (same text)
+  - notice "Couldn't cancel the invite. Try again in a moment."
+  - cancel "Keep invite"
+  - confirm "Cancel invite"
+
+### Cancel invite: done
+
+**Trigger:** 204: the row disappears and a toast confirms.
+
+- Breadcrumbs: Users (mobile title "Users")
+- The Pending row `sam.oliveira@renew.example` is gone; the other four remain
+- Toast (success, circle-check): **Invite cancelled** "sam.oliveira@renew.example can no longer use the link."
+
+### 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.
+
+- Breadcrumbs: Users (mobile title "Users")
+- The Expired row's button reads "Renewing…" with a loader-circle icon, 50 % opacity, disabled
+
+### Renew invite: done
+
+**Trigger:** 200: the row becomes Pending with today's date, moves to the top, and the old link stops working.
+
+- Breadcrumbs: Users (mobile title "Users")
+- First row: `p.huber@gmail.com` Pending, created "Today", row background `--ui-bg-elevated`, now with "Cancel invite"
+- Toast (success, circle-check): **Invite renewed** "p.huber@gmail.com has 3 days to accept the new link."
+
+The "Today" label makes this state clock-sensitive, so `task visual:check` skips it.
+
+### Renew invite: failed
+
+**Trigger:** 500 or network failure. The row stays Expired and the button can be pressed again.
+
+- Breadcrumbs: Users (mobile title "Users")
+- Toast (error, circle-x): **Couldn't renew the invite** "Try again in a moment."
+
 ## Notes for implementation
 
-- An accepted user is shown by username and display name only, never by email.
+- Accepted users are now listed by email, display name and role. This reverses the earlier rule that a user is never listed with an email.
 - How display names look in this list is the state "Display names in the Users list" of [profile.md](profile.md). The board draws it in the Profile group, and `task visual:check` finds states by group.
+- The board's API line marks both new endpoints "(pending)", meaning "not built yet". Cancel applies to a Pending invite. Renew is drawn on an Expired one; the recommendation is that the API also accepts a Pending one (it resets the 3 days and replaces the link) and refuses an Accepted one with 409. The SPA only offers Renew on Expired rows.
+- Renewing replaces the code and expiry, resets the created date to now, and sends the invitation email again. The old link stops working. The email is specified in [emails.md](../emails.md).
+- A 404 on cancel or renew (the invite was already used or cancelled elsewhere) is not drawn. Decide it in the spec; the recommendation is to drop the row and toast the outcome.
 - 429 on the invite request is not drawn. Decide it in the spec before coding.
 - The email the invite sends is specified in [emails.md](../emails.md). The screen the link opens is in [accept-invite.md](accept-invite.md).
+- The role rules and what is not drawn are in "Roles" above.

docs/design/source/AppFrame.dc.html

@@ -18,7 +18,7 @@
 <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>
 <sc-if value="{{ notBoot }}"><div data-act="usermenu" role="button" aria-haspopup="menu" aria-expanded="{{ menuOpen }}" title="Account" style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;background:{{ chipBg }};color:{{ chipFg }}"><span style="width:26px;height:26px;flex-shrink:0;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 11px 'IBM Plex Sans',sans-serif">{{ ini }}</span><span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500">{{ who }}</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/chevrons-up-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat"></span></div></sc-if>
 </div>
-<sc-if value="{{ deskMenu }}"><div role="menu" aria-label="Account" style="position:absolute;left:12px;bottom:56px;z-index:40;width:224px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px"><div style="padding:8px 8px 10px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--ui-border);margin-bottom:4px"><span style="font-weight:600;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ who }}</span><span style="font-size:12px;color:var(--ui-text-muted)">marta@renew.example</span></div><div data-act="nav-profile" role="menuitem" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:10px;background:{{ pfItemBg }};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/circle-user.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-user.svg') center / contain no-repeat"></span>Profile</div><div style="height:1px;background:var(--ui-border);margin:4px 0"></div><div data-act="logout" role="menuitem" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:10px;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/log-out.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/log-out.svg') center / contain no-repeat"></span>Log out</div></div></sc-if>
+<sc-if value="{{ deskMenu }}"><div role="menu" aria-label="Account" style="position:absolute;left:12px;bottom:56px;z-index:40;width:224px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px"><div style="padding:8px 8px 10px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--ui-border);margin-bottom:4px"><span style="font-weight:600;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ who }}</span><span style="font-size:12px;color:var(--ui-text-muted)">marta@renew.example</span></div><div data-act="nav-profile" role="menuitem" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:10px;background:{{ pfItemBg }};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/circle-user.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-user.svg') center / contain no-repeat"></span>Profile</div><div style="height:1px;background:var(--ui-border);margin:4px 0"></div><sc-for list="{{ themeSeg }}" as="m" hint-placeholder-count="3"><div data-act="{{ m.act }}" role="menuitemradio" aria-checked="{{ m.on }}" style="height:32px;padding:0 8px;display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--ui-text-highlighted)">{{ m.t }}<span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;opacity:{{ m.op }};-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></div></sc-for><div style="height:1px;background:var(--ui-border);margin:4px 0"></div><div data-act="logout" role="menuitem" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:10px;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/log-out.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/log-out.svg') center / contain no-repeat"></span>Log out</div></div></sc-if>
 </sc-if>
 <div style="flex:1;min-width:0;min-height:0;display:flex;flex-direction:column">
 <sc-if value="{{ desk }}" hint-placeholder-val="{{ true }}">
@@ -202,11 +202,11 @@
 <sc-if value="{{ usError }}"><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="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 load users</span><span style="color:var(--ui-text-toned)">Check your connection and try again.</span></div><span style="align-self:flex-start;height:{{ btnH }};padding:0 10px;display:flex;align-items: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"><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/rotate-cw.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat"></span>Try again</span></div></div></sc-if>
 <sc-if value="{{ usTable }}">
 <div style="background:var(--ui-bg);border:1px solid var(--ui-border)">
-<div style="display:grid;grid-template-columns:minmax(0,1fr) 160px 160px;height:36px;align-items:center;padding:0 12px;background:var(--ui-bg-elevated);color:var(--ui-text-muted);font-weight:500"><span>Username</span><span>Invite status</span><span style="display:flex;align-items:center;gap:4px;color:var(--ui-text-highlighted)">Created<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></div>
+<div style="display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 84px 120px 110px 150px;gap:12px;height:36px;align-items:center;padding:0 12px;background:var(--ui-bg-elevated);color:var(--ui-text-muted);font-weight:500"><span>Email</span><span>Display name</span><span>Role</span><span>Invite status</span><span style="display:flex;align-items:center;gap:4px;color:var(--ui-text-highlighted)">Created<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="{{ usRows }}" as="r" hint-placeholder-count="5">
-<div style="display:grid;grid-template-columns:minmax(0,1fr) 160px 160px;height:44px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border);background:{{ r.bg }}">
+<div style="display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 84px 120px 110px 150px;gap:12px;height:48px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border);background:{{ r.bg }}">
-<sc-if value="{{ r.skel }}"><span style="height:12px;width:30%;background:var(--ui-bg-accented)"></span><span style="width:76px;height:20px;background:var(--ui-bg-accented)"></span><span style="width:80px;height:12px;background:var(--ui-bg-accented)"></span></sc-if>
+<sc-if value="{{ r.skel }}"><span style="height:12px;width:60%;background:var(--ui-bg-accented)"></span><span style="height:12px;width:50%;background:var(--ui-bg-accented)"></span><span style="width:52px;height:20px;background:var(--ui-bg-accented)"></span><span style="width:76px;height:20px;background:var(--ui-bg-accented)"></span><span style="width:80px;height:12px;background:var(--ui-bg-accented)"></span></sc-if>
-<sc-if value="{{ r.name }}"><span style="display:flex;align-items:center;gap:8px;min-width:0;padding-right:12px"><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:{{ r.fw }};color:{{ r.fg }}">{{ r.name }}</span><sc-if value="{{ r.sub }}"><span style="flex-shrink:0;color:var(--ui-text-muted)">{{ r.sub }}</span></sc-if><sc-if value="{{ r.you }}"><span style="flex-shrink:0;font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">you</span></sc-if></span><span><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;background:{{ r.b.bg }};color:{{ r.b.fg }};border:1px solid {{ r.b.bd }};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/{{ r.b.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ r.b.icon }}.svg') center / contain no-repeat"></span>{{ r.b.t }}</span></span><span style="color:var(--ui-text-muted)">{{ r.c }}</span></sc-if>
+<sc-if value="{{ r.email }}"><span style="display:flex;align-items:center;gap:8px;min-width:0"><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:{{ r.fg }}">{{ r.email }}</span><sc-if value="{{ r.you }}"><span style="flex-shrink:0;font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">you</span></sc-if></span><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:{{ r.dfg }}">{{ r.dn }}</span><span><span style="height:20px;padding:0 7px;display:inline-flex;align-items:center;background:{{ r.rl.bg }};color:{{ r.rl.fg }};border:1px solid {{ r.rl.bd }};font:500 11px 'IBM Plex Mono',monospace">{{ r.rl.t }}</span></span><span><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;background:{{ r.b.bg }};color:{{ r.b.fg }};border:1px solid {{ r.b.bd }};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/{{ r.b.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ r.b.icon }}.svg') center / contain no-repeat"></span>{{ r.b.t }}</span></span><span style="color:var(--ui-text-muted)">{{ r.c }}</span><span style="display:flex;justify-content:flex-end"><sc-if value="{{ r.act }}"><span data-act="{{ r.act.key }}" style="height:28px;padding:0 9px;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:{{ r.act.fg }};font-weight:500;font-size:12px;opacity:{{ r.act.op }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ r.act.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ r.act.icon }}.svg') center / contain no-repeat"></span>{{ r.act.t }}</span></sc-if></span></sc-if>
 </div>
 </sc-for>
 </div>
@@ -216,7 +216,7 @@
 <sc-for list="{{ usRows }}" as="r" hint-placeholder-count="5">
 <div style="display:flex;flex-direction:column;justify-content:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--ui-border);min-height:68px;background:{{ r.bg }}">
 <sc-if value="{{ r.skel }}"><span style="width:55%;height:14px;background:var(--ui-bg-accented)"></span><span style="width:40%;height:12px;background:var(--ui-bg-accented)"></span></sc-if>
-<sc-if value="{{ r.name }}"><span style="display:flex;align-items:center;gap:8px;min-width:0"><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:21px;font-weight:{{ r.fw }};color:{{ r.fg }}">{{ r.name }}</span><sc-if value="{{ r.sub }}"><span style="flex-shrink:0;color:var(--ui-text-muted)">{{ r.sub }}</span></sc-if><sc-if value="{{ r.you }}"><span style="flex-shrink:0;font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">you</span></sc-if></span><div style="display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ui-text-muted)"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;background:{{ r.b.bg }};color:{{ r.b.fg }};border:1px solid {{ r.b.bd }};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/{{ r.b.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ r.b.icon }}.svg') center / contain no-repeat"></span>{{ r.b.t }}</span><span>Created {{ r.c }}</span></div></sc-if>
+<sc-if value="{{ r.email }}"><span style="display:flex;align-items:center;gap:8px;min-width:0"><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:21px;font-weight:500;color:{{ r.fg }}">{{ r.email }}</span><sc-if value="{{ r.you }}"><span style="flex-shrink:0;font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">you</span></sc-if></span><sc-if value="{{ r.display2 }}"><span style="color:var(--ui-text-toned)">{{ r.dn }}</span></sc-if><div style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ui-text-muted)"><span style="height:20px;padding:0 7px;display:inline-flex;align-items:center;background:{{ r.rl.bg }};color:{{ r.rl.fg }};border:1px solid {{ r.rl.bd }};font:500 11px 'IBM Plex Mono',monospace">{{ r.rl.t }}</span><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;background:{{ r.b.bg }};color:{{ r.b.fg }};border:1px solid {{ r.b.bd }};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/{{ r.b.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ r.b.icon }}.svg') center / contain no-repeat"></span>{{ r.b.t }}</span><span>Created {{ r.c }}</span></div><sc-if value="{{ r.act }}"><div style="display:flex;padding-top:4px"><span data-act="{{ r.act.key }}" style="height:44px;padding:0 14px;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:{{ r.act.fg }};font-weight:500;font-size:13px;opacity:{{ r.act.op }}"><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/{{ r.act.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ r.act.icon }}.svg') center / contain no-repeat"></span>{{ r.act.t }}</span></div></sc-if></sc-if>
 </div>
 </sc-for>
 </div>
@@ -226,6 +226,13 @@
 <sc-if value="{{ mob }}"><sc-if value="{{ listFab }}"><div data-act="invite" style="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)"><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/user-plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/user-plus.svg') center / contain no-repeat"></span>Invite user</div></sc-if></sc-if>
 </sc-if>
 
+<sc-if value="{{ isSettings }}">
+<div style="padding:{{ pad }};display:flex;flex-direction:column;gap:20px;max-width:720px;overflow:hidden">
+<div style="display:flex;flex-direction:column;gap:2px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Settings</span><span style="color:var(--ui-text-muted)">Workspace information.</span></div>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:{{ cardPad }};display:flex;align-items:center;justify-content:space-between;gap:16px"><span style="font:600 15px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Version</span><span style="font:400 14px/22px 'IBM Plex Mono',monospace;color:var(--ui-text-toned)">v2.2.0-beta</span></div>
+</div>
+</sc-if>
+
 <sc-if value="{{ isProfile }}">
 <div style="padding:{{ pad }};display:flex;flex-direction:column;gap:20px;max-width:720px;overflow:hidden">
 <div style="display:flex;flex-direction:column;gap:2px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Profile</span><span style="color:var(--ui-text-muted)">Your account on this RenewCMS workspace.</span></div>
@@ -263,7 +270,7 @@
 </div>
 </div>
 
-<sc-if value="{{ mobMenu }}"><div style="position:absolute;inset:0;z-index:50;background:var(--rc-overlay);display:flex;align-items:flex-end"><div role="menu" aria-label="Account" style="width:100%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal);padding:8px 0 24px"><div style="margin:0 auto 8px;width:36px;height:4px;background:var(--ui-bg-accented)"></div><div style="padding:8px 16px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--ui-border);margin-bottom:4px"><span style="width:36px;height:36px;flex-shrink:0;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 13px 'IBM Plex Sans',sans-serif">{{ ini }}</span><div style="display:flex;flex-direction:column;min-width:0"><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">{{ who }}</span><span style="color:var(--ui-text-muted)">marta@renew.example</span></div></div><div data-act="nav-profile" role="menuitem" style="height:48px;padding:0 16px;display:flex;align-items:center;gap:12px;font-size:15px;background:{{ pfItemBg }};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/circle-user.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-user.svg') center / contain no-repeat"></span>Profile</div><div style="height:1px;background:var(--ui-border);margin:4px 0"></div><div data-act="logout" role="menuitem" style="height:48px;padding:0 16px;display:flex;align-items:center;gap:12px;font-size:15px;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/log-out.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/log-out.svg') center / contain no-repeat"></span>Log out</div></div></div></sc-if>
+<sc-if value="{{ mobMenu }}"><div style="position:absolute;inset:0;z-index:50;background:var(--rc-overlay);display:flex;align-items:flex-end"><div role="menu" aria-label="Account" style="width:100%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal);padding:8px 0 24px"><div style="margin:0 auto 8px;width:36px;height:4px;background:var(--ui-bg-accented)"></div><div style="padding:8px 16px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--ui-border);margin-bottom:4px"><span style="width:36px;height:36px;flex-shrink:0;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 13px 'IBM Plex Sans',sans-serif">{{ ini }}</span><div style="display:flex;flex-direction:column;min-width:0"><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">{{ who }}</span><span style="color:var(--ui-text-muted)">marta@renew.example</span></div></div><div data-act="nav-profile" role="menuitem" style="height:48px;padding:0 16px;display:flex;align-items:center;gap:12px;font-size:15px;background:{{ pfItemBg }};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/circle-user.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-user.svg') center / contain no-repeat"></span>Profile</div><div style="height:1px;background:var(--ui-border);margin:4px 0"></div><sc-for list="{{ themeSeg }}" as="m" hint-placeholder-count="3"><div data-act="{{ m.act }}" role="menuitemradio" aria-checked="{{ m.on }}" style="height:48px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;font-size:15px;color:var(--ui-text-highlighted)">{{ m.t }}<span aria-hidden="true" style="display:inline-block;width:18px;height:18px;background-color:currentColor;opacity:{{ m.op }};-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></div></sc-for><div style="height:1px;background:var(--ui-border);margin:4px 0"></div><div data-act="logout" role="menuitem" style="height:48px;padding:0 16px;display:flex;align-items:center;gap:12px;font-size:15px;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/log-out.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/log-out.svg') center / contain no-repeat"></span>Log out</div></div></div></sc-if>
 
 <sc-if value="{{ s.modal }}">
 <div style="position:absolute;inset:0;z-index:50;background:var(--rc-overlay);display:flex;align-items:{{ modalAlign }};justify-content:center;padding:{{ modalPad }}">
@@ -336,7 +343,7 @@ class Component extends DCLogic {
 		const s = this.props.s || {}
 		const m = !!this.props.mobile
 		const k = s.kind || 'home'
-		const navItems = [['home', 'house', 'Home'], ['articles', 'file-text', 'Articles'], ['users', 'users', 'Users'], ['integration', 'plug', 'Integration']]
+		const navItems = [['home', 'house', 'Home'], ['articles', 'file-text', 'Articles'], ['media', 'images', 'Media'], ['users', 'users', 'Users'], ['integration', 'plug', 'Integration'], ['settings', 'settings', 'Settings']]
 		const nav = navItems.map(([key, icon, t]) => ({ key, icon, t, bg: s.nav === key ? 'var(--rc-sand)' : 'transparent', fg: s.nav === key ? '#111111' : 'var(--ui-text-toned)', fw: s.nav === key ? 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 || {}
@@ -390,7 +397,9 @@ class Component extends DCLogic {
 		}
 		const US = s.users || {}
 		const badges = { accepted: { t: 'Accepted', icon: 'circle-check', bg: 'var(--rc-success-soft)', fg: 'var(--ui-success)', bd: 'var(--rc-success-soft)' }, pending: { t: 'Pending', icon: 'mail', bg: 'var(--rc-warning-soft)', fg: 'var(--ui-warning)', bd: 'var(--rc-warning-soft)' }, expired: { t: 'Expired', icon: 'clock-alert', bg: 'transparent', fg: 'var(--ui-text-muted)', bd: 'var(--ui-border-accented)' } }
-		const usRows = (US.loading ? Array.from({ length: 5 }, () => ({ skel: true })) : (US.rows || [])).map(r => r.skel ? r : ({ ...r, name: (r.you && s.display) || r.display || r.u || r.email, sub: r.u && ((r.you && s.display) || r.display) ? r.u : '', fw: r.u ? 500 : 400, fg: r.u ? 'var(--ui-text-highlighted)' : 'var(--ui-text-toned)', b: badges[r.st] || badges.pending, bg: r.hl ? 'var(--ui-bg-elevated)' : 'transparent' }))
+		const roles = { owner: { t: 'owner', bg: 'var(--ui-primary)', fg: 'var(--ui-bg)', bd: 'var(--ui-primary)' }, admin: { t: 'admin', bg: 'transparent', fg: 'var(--ui-text-toned)', bd: 'var(--ui-border-accented)' } }
+		const acts = { pending: { key: 'cancel-invite', t: 'Cancel invite', icon: 'user-x', fg: 'var(--ui-error)', op: '1' }, expired: { key: 'renew-invite', t: 'Renew invite', icon: 'refresh-cw', fg: 'var(--ui-text-highlighted)', op: '1' } }
+		const usRows = (US.loading ? Array.from({ length: 5 }, () => ({ skel: true })) : (US.rows || [])).map(r => { if (r.skel) return r; const dn = (r.you && s.display) || r.display || ''; const a0 = acts[r.st]; return { ...r, dn: dn || '—', dfg: dn ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)', display2: !!dn, fg: 'var(--ui-text-highlighted)', rl: roles[r.role] || roles.admin, b: badges[r.st] || badges.pending, bg: r.hl ? 'var(--ui-bg-elevated)' : 'transparent', act: a0 && (r.busy ? { ...a0, t: r.busy, icon: 'loader-circle', op: '0.5' } : a0) } })
 		const who = s.display || 'marta'
 		const ini = s.display ? s.display.trim().split(/\s+/).slice(0, 2).map(w => w[0]).join('').toUpperCase() : 'MA'
 		const pf = s.pf || {}
@@ -414,9 +423,9 @@ class Component extends DCLogic {
 		const edTitle = e.title || 'How we price a bathroom renovation'
 		return {
 			cr, s, nav, crumbs, who, ini, pf, dn, dnSave, rsNote, rsBtn,
-			menuOpen: !!s.userMenu, deskMenu: !m && !!s.userMenu, mobMenu: m && !!s.userMenu, pfItemBg: 'var(--ui-bg-elevated)',
+			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' ? '#111111' : 'var(--ui-text-highlighted)',
-			isProfile: k === 'profile', pfLoading: k === 'profile' && !!pf.loading, pfReady: k === 'profile' && !pf.loading,
+			isSettings: k === 'settings', isProfile: k === 'profile', pfLoading: k === 'profile' && !!pf.loading, pfReady: k === 'profile' && !pf.loading,
 			cardPad: m ? '16px' : '20px', cardPadX: m ? '16px' : '20px', inH: m ? '44px' : '40px', pfCols: m ? 'minmax(0,1fr)' : 'minmax(0,1fr) minmax(0,1.4fr)', pwDir: m ? 'column' : 'row', pwAlign: m ? 'stretch' : 'flex-end', edTitle, edBody: e.body || '', sampleBody: !e.body, tabs, rows, save, counter, pub, mFields, up, toasts, endpoints, toolbar,
 			desk: !m, mob: m, notBoot: !s.boot,
 			fw: m ? '390px' : '1440px', fh: m ? '844px' : '900px', dir: m ? 'column' : 'row',

docs/design/source/MediaFrame.dc.html

@@ -0,0 +1,276 @@
+<!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>
+<div style="display:contents">{{ view }}</div>
+</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, h = React.createElement
+		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 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
+		const B = (label, o = {}) => {
+			const k = o.k || 'outline'
+			const bg = k === 'primary' ? 'var(--ui-primary)' : k === 'danger' ? 'var(--ui-error)' : k === 'inv' ? 'transparent' : 'var(--ui-bg)'
+			const fg = k === 'primary' || k === 'danger' ? 'var(--ui-bg)' : k === 'del' ? 'var(--ui-error)' : k === 'inv' ? 'var(--ui-text-inverted)' : 'var(--ui-text-highlighted)'
+			const bd = k === 'primary' || k === 'danger' ? bg : k === 'inv' ? 'var(--ui-text-inverted)' : '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 CHECK = 'conic-gradient(var(--ui-bg-accented) 25%, var(--ui-bg) 0 50%, var(--ui-bg-accented) 0 75%, var(--ui-bg) 0) 0 0/16px 16px'
+		const TONES = ['var(--rc-sand)', 'var(--ui-bg-accented)', 'color-mix(in srgb, var(--ui-border-accented) 35%, var(--ui-bg))', 'var(--ui-bg-elevated)']
+		const mark = h('svg', { width: 28, height: 28, viewBox: '0 0 16 16', shapeRendering: 'crispEdges' }, h('rect', { width: 16, height: 16, fill: '#111' }), h('path', { fill: '#fff', fillRule: 'evenodd', d: 'M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z' }))
+		const Th = (im, t = '', z = 24) => D('position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted);background:' + (im.alpha ? CHECK : 'repeating-linear-gradient(135deg, rgb(128 128 128 / 0.12) 0 1px, transparent 1px 12px), ' + TONES[im.tone % 4]) + ';' + t, im.svg ? mark : I('image', z, 'opacity:0.55'))
+		const BADGE = { unused: ['background:var(--rc-warning-soft);color:var(--ui-warning)', 'unlink'], dup: ['background:var(--rc-info-soft);color:var(--ui-info)', 'copy'], used: ['border:1px solid var(--ui-border-accented);color:var(--ui-text-toned)'], on: ['background:var(--ui-bg-inverted);color:var(--ui-text-inverted)', 'globe'], draft: ['border:1px solid var(--ui-border-accented);color:var(--ui-text-toned)', 'pencil-line'] }
+		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;' + BADGE[k][0], BADGE[k][1] && I(BADGE[k][1], 12), t)
+		const Cb = (on, z = 20, ind) => S('width:' + z + 'px;height:' + z + 'px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid ' + (on || ind ? 'var(--ui-primary)' : 'var(--ui-border-accented)') + ';background:' + (on || ind ? 'var(--ui-primary)' : 'var(--ui-bg)') + ';color:var(--ui-bg)', (on || ind) && I(ind ? 'minus' : 'check', z - 6))
+		const Alert = (tone, icon, title, text, action, actionEl) => 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), S('color:var(--ui-text-toned)', text)), action && B(action, { icon: 'rotate-cw', h: m ? 44 : 28, fs: 12, z: 14, ...(actionEl || {}) })))
+		const Empty = (icon, title, text, action, primary, pad = 56) => D('background:var(--ui-bg);border:1px solid var(--ui-border);padding:' + pad + 'px 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:320px', text), action && B(action, { k: primary ? 'primary' : 'outline', icon: primary ? 'upload' : null, px: 16 }))
+		const Note = t => S('align-self:flex-start;height:20px;padding:0 6px;display:inline-flex;align-items:center;border:1px dashed var(--ui-border-accented);color:var(--ui-text-toned);font:500 11px \'IBM Plex Mono\',monospace', t)
+
+		const IM = [
+			{ id: 1, n: 'north-wall.jpg', sz: '3.9 MB', dim: '4032 × 3024', ty: 'JPEG', used: 2, by: 'Marta Alves', d: '12 Sep 2026', tone: 0 },
+			{ id: 2, n: 'kitchen-after.webp', sz: '1.2 MB', dim: '2400 × 1600', ty: 'WEBP', used: 3, by: 'Inès Duarte', d: '8 Sep 2026', tone: 1 },
+			{ id: 3, n: 'kitchen-before.webp', sz: '1.1 MB', dim: '2400 × 1600', ty: 'WEBP', used: 1, by: 'Inès Duarte', d: '8 Sep 2026', tone: 2 },
+			{ id: 4, n: 'logo-renew.svg', sz: '8 KB', dim: 'Vector', ty: 'SVG', used: 5, by: 'jonas', d: '5 Sep 2026', alpha: true, svg: true, tone: 3 },
+			{ id: 5, n: 'floorboards-copy.jpg', sz: '2.4 MB', dim: '3600 × 2400', ty: 'JPEG', used: 3, by: 'Marta Alves', d: '2 Sep 2026', dup: true, tone: 0 },
+			{ id: 6, n: 'IMG_2208.jpg', sz: '2.4 MB', dim: '3600 × 2400', ty: 'JPEG', used: 2, by: 'jonas', d: '30 Aug 2026', dup: true, tone: 0 },
+			{ id: 7, n: 'IMG_4471.jpg', sz: '3.1 MB', dim: '3600 × 2400', ty: 'JPEG', used: 2, by: 'Marta Alves', d: '29 Aug 2026', dup: true, tone: 2 },
+			{ id: 8, n: 'window-frame.jpg', sz: '1.8 MB', dim: '3000 × 2000', ty: 'JPEG', used: 0, by: 'Inès Duarte', d: '28 Aug 2026', tone: 3 },
+			{ id: 9, n: 'stone-wall-detail.jpg', sz: '3.1 MB', dim: '3600 × 2400', ty: 'JPEG', used: 1, by: 'jonas', d: '21 Aug 2026', dup: true, tone: 2 },
+			{ id: 10, n: 'bathroom-tiles.png', sz: '860 KB', dim: '1800 × 1200', ty: 'PNG', used: 0, by: 'Marta Alves', d: '4 Aug 2026', alpha: true, tone: 1 },
+			{ id: 11, n: 'lime-plaster.jpg', sz: '2.1 MB', dim: '3200 × 2133', ty: 'JPEG', used: 2, by: 'Inès Duarte', d: '19 Jul 2026', tone: 1 },
+			{ id: 12, n: 'floorboards.jpg', sz: '2.4 MB', dim: '3600 × 2400', ty: 'JPEG', used: 4, by: 'Inès Duarte', d: '14 Jun 2026', dup: true, tone: 0 }
+		]
+		const byId = id => IM.find(x => x.id === id)
+		const AR = [['How we price a bathroom renovation', 1], ['Winter checklist for timber windows', 0], ['Before and after: the Rue Verte kitchen', 1], ['Why we reuse original floorboards', 1], ['Choosing lime plaster for old stone walls', 0]]
+		const usedList = n => AR.slice(0, Math.min(n, 5))
+		const ids = s.ids || IM.map(x => x.id)
+		const imgs = ids.map(byId)
+		const sel = s.sel || []
+		const pl = n => n + (n === 1 ? ' article' : ' articles')
+		const label = im => im.n + ', ' + im.sz + ', ' + (im.used ? 'used in ' + pl(im.used) : 'unused')
+		const usedBadge = im => im.used ? Bd('Used in ' + im.used, 'used') : Bd('Unused', 'unused')
+
+		// ---------- Media page pieces
+		const Card = im => {
+			const on = sel.includes(im.id), hov = s.hover === im.id, foc = s.focus === im.id
+			const showCb = m || on || hov || foc || sel.length > 0
+			return D('position:relative;display:flex;flex-direction:column;background:' + (on ? 'var(--rc-sand)' : 'var(--ui-bg)') + ';color:' + (on ? '#111111' : 'var(--ui-text)') + ';border:1px solid ' + (on ? 'var(--ui-primary)' : hov ? 'var(--ui-border-accented)' : 'var(--ui-border)') + ';' + (on ? 'box-shadow:inset 0 0 0 1px var(--ui-primary);' : hov ? 'box-shadow:var(--rc-shadow-pop);' : '') + (foc ? 'outline:2px solid var(--ui-primary);outline-offset:2px;' : ''),
+				Th(im, 'aspect-ratio:4/3;border-bottom:1px solid ' + (on ? 'var(--ui-primary)' : 'var(--ui-border)')),
+				showCb && S('position:absolute;top:0;left:0;width:' + (m ? 44 : 36) + 'px;height:' + (m ? 44 : 36) + 'px;display:flex;align-items:center;justify-content:center', Cb(on, m ? 22 : 20)),
+				D('padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0', D('display:flex;flex-direction:column;gap:2px;min-width:0', S('font-weight:500;color:' + (on ? '#111111' : 'var(--ui-text-highlighted)') + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap', im.n), S('font-size:12px;color:' + (on ? '#444444' : 'var(--ui-text-muted)') + ';white-space:nowrap;overflow:hidden;text-overflow:ellipsis', im.sz + ' · ' + im.dim)),
+					D('display:flex;flex-wrap:wrap;gap:4px', im.dup && Bd('Duplicate', 'dup'), usedBadge(im))))
+		}
+		const Grid = () => D('display:grid;grid-template-columns:repeat(' + (m ? 2 : 5) + ',minmax(0,1fr));gap:' + (m ? 10 : 16) + 'px', ...imgs.map(Card))
+		const Skel = () => D('display:grid;grid-template-columns:repeat(' + (m ? 2 : 5) + ',minmax(0,1fr));gap:' + (m ? 10 : 16) + 'px', ...Array.from({ length: m ? 6 : 10 }, () => D('background:var(--ui-bg);border:1px solid var(--ui-border)', S('display:block;aspect-ratio:4/3;background:var(--ui-bg-accented)'), D('padding:10px 12px;display:flex;flex-direction:column;gap:8px', S('display:block;width:70%;height:13px;background:var(--ui-bg-accented)'), S('display:block;width:45%;height:11px;background:var(--ui-bg-accented)'), S('display:block;width:60px;height:20px;background:var(--ui-bg-accented)')))))
+		const usedLink = im => im.used ? S('text-decoration:underline;text-underline-offset:3px;color:var(--ui-text-highlighted)', pl(im.used)) : Bd('Unused', 'unused')
+		const Table = () => {
+			const cols = '36px minmax(0,1.7fr) 110px 76px 64px 120px 130px 100px'
+			const hd = D('display:grid;grid-template-columns:' + cols + ';height:36px;align-items:center;padding:0 12px 0 0;background:var(--ui-bg-elevated);color:var(--ui-text-muted);font-weight:500', S('display:flex;justify-content:center', Cb(false, 18, sel.length > 0 && sel.length < imgs.length)), S('', 'Filename'), S('', 'Dimensions'), S('', 'Size'), S('', 'Type'), S('', 'Used in'), S('', 'Uploaded by'), S('display:flex;align-items:center;gap:4px;color:var(--ui-text-highlighted)', 'Uploaded', I('arrow-down', 12)))
+			return D('background:var(--ui-bg);border:1px solid var(--ui-border)', hd, ...imgs.map(im => {
+				const on = sel.includes(im.id), hov = s.hover === im.id
+				return D('display:grid;grid-template-columns:' + cols + ';height:56px;align-items:center;padding:0 12px 0 0;border-top:1px solid var(--ui-border);background:' + (on ? 'var(--rc-sand)' : hov ? 'var(--ui-bg-elevated)' : 'var(--ui-bg)') + ';color:' + (on ? '#111111' : 'var(--ui-text-muted)'),
+					S('display:flex;justify-content:center', Cb(on, 18)),
+					D('display:flex;align-items:center;gap:12px;min-width:0;padding-right:12px', Th(im, 'width:40px;height:40px;flex-shrink:0;border:1px solid var(--ui-border)', 16), S('font-weight:500;color:' + (on ? '#111111' : 'var(--ui-text-highlighted)') + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap', im.n), im.dup && Bd('Duplicate', 'dup')),
+					S('', im.dim), S('', im.sz), S('', im.ty), S('', usedLink(im)), S('overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px', im.by), S('', im.d))
+			}))
+		}
+		const Cards = () => D('background:var(--ui-bg);border:1px solid var(--ui-border);margin:0 -16px;border-left:0;border-right:0', ...imgs.map(im => {
+			const on = sel.includes(im.id)
+			return D('display:flex;align-items:center;gap:0;min-height:80px;padding:8px 12px 8px 0;border-bottom:1px solid var(--ui-border);background:' + (on ? 'var(--rc-sand)' : 'var(--ui-bg)') + ';color:' + (on ? '#444444' : 'var(--ui-text-muted)'),
+				S('width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center', Cb(on, 22)),
+				Th(im, 'width:56px;height:56px;flex-shrink:0;border:1px solid var(--ui-border)', 20),
+				D('flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-left:12px', S('font-weight:500;font-size:15px;color:' + (on ? '#111111' : 'var(--ui-text-highlighted)') + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap', im.n), S('font-size:12px', im.sz + ' · ' + im.dim + ' · ' + im.ty), D('display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:12px', im.dup && Bd('Duplicate', 'dup'), usedBadge(im), S('', im.by + ' · ' + im.d))),
+				I('chevron-right', 16, 'margin-left:8px'))
+		}))
+
+		const dg = s.dupEmpty ? 0 : s.dupGroups ?? 2
+		const tabs = [['all', 'All', String(imgs.length)], ['unused', 'Unused', String(imgs.filter(x => !x.used).length)], ['dups', 'Duplicates', String(dg)]]
+		const tab = s.tab || 'all'
+		const TabRow = () => D('display:flex;gap:20px;flex:1;' + (m ? 'border-bottom:1px solid var(--ui-border)' : ''), ...tabs.map(([k, t, n]) => S('height:' + (m ? 44 : 36) + 'px;display:flex;align-items:center;gap:6px;border-bottom:2px solid ' + (tab === k ? 'var(--ui-primary)' : 'transparent') + ';margin-bottom:-1px;font-weight:' + (tab === k ? 500 : 400) + ';color:' + (tab === k ? 'var(--ui-text-highlighted)' : 'var(--ui-text-toned)') + ';font-size:' + (m ? 15 : 13) + 'px', t, k === 'dups' ? (dg > 0 && S('height:18px;min-width:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;background:var(--rc-info-soft);color:var(--ui-info);font:500 11px \'IBM Plex Mono\',monospace', n)) : S('font:500 11px \'IBM Plex Mono\',monospace;color:var(--ui-text-muted)', n))))
+		const Search = () => D('height:' + (m ? 44 : 32) + 'px;' + (m ? '' : 'width:240px;margin-bottom:0;') + 'padding:0 4px 0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:' + (s.q ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)') + (m ? ';font-size:16px' : ''), I('search', 14), S('flex:1', s.q || 'Search by filename'), s.q && S('width:' + (m ? 36 : 24) + 'px;height:' + (m ? 36 : 24) + 'px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)', I('x', 14)))
+		const Sort = () => D('height:' + (m ? 44 : 32) + 'px;padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted);' + (m ? 'flex:1;' : 'width:128px;'), S('flex:1', s.sort || 'Newest'), I('chevron-down', 14, 'color:var(--ui-text-muted)'))
+		const view = s.view || 'grid'
+		const Toggle = () => D('display:flex;border:1px solid var(--ui-border-accented);flex-shrink:0', ...[['grid', 'layout-grid'], ['list', 'list']].map(([k, ic]) => S('width:' + (m ? 44 : 32) + 'px;height:' + (m ? 42 : 30) + 'px;display:flex;align-items:center;justify-content:center;background:' + (view === k ? 'var(--rc-sand)' : 'var(--ui-bg)') + ';color:' + (view === k ? '#111111' : 'var(--ui-text-toned)'), I(ic))))
+		const SelectAll = () => D('display:flex;align-items:center;gap:10px;color:var(--ui-text-muted)', m ? S('width:44px;height:44px;margin-left:-11px;display:flex;align-items:center;justify-content:center', Cb(false, 22, sel.length > 0)) : Cb(false, 18, sel.length > 0), S('color:var(--ui-text-highlighted);font-weight:500', 'Select all'), S('', imgs.length + ' images'))
+
+		const UP = s.upload
+		const upRow = r => {
+			const sc = { err: 'var(--ui-error)', dup: 'var(--ui-info)' }[r.st] || 'var(--ui-text-muted)'
+			const body = {
+				prog: [S('', 'Uploading ' + r.p), D('width:100%;height:4px;background:var(--ui-bg-accented)', D('width:' + r.pct + ';height:4px;background:var(--ui-primary)'))],
+				wait: [S('color:var(--ui-text-muted)', 'Waiting')],
+				ok: [S('display:flex;align-items:center;gap:6px;color:var(--ui-success)', I('circle-check', 14), 'Added to your library')],
+				dup: [S('font-weight:600;color:var(--ui-text-highlighted)', 'Already in your library'), S('color:var(--ui-text-toned);font-size:12px', r.msg), D('display:flex;gap:8px;flex-wrap:wrap', B('Use existing', { h: m ? 44 : 28, fs: 12, px: 10, full: m }), B('Upload anyway', { h: m ? 44 : 28, fs: 12, px: 10, full: m }))],
+				rej: [S('display:flex;gap:6px;align-items:center;font-weight:600;color:var(--ui-error)', I('file-x', 14), r.title), S('color:var(--ui-text-toned);font-size:12px', r.msg)],
+				fail: [S('display:flex;gap:6px;align-items:center;font-weight:600;color:var(--ui-error)', I('circle-x', 14), 'Upload failed'), S('color:var(--ui-text-toned);font-size:12px', 'The server didn\'t accept the file. Nothing was added to your library.'), D('display:flex', B('Try again', { icon: 'rotate-cw', z: 14, h: m ? 44 : 28, fs: 12, px: 10, full: m }))]
+			}[r.st]
+			return D('display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-top:1px solid var(--ui-border-muted)', Th(byId(r.im || 8), 'width:40px;height:40px;flex-shrink:0;border:1px solid var(--ui-border)', 16), D('flex:1;min-width:0;display:flex;flex-direction:column;gap:6px', D('display:flex;justify-content:space-between;gap:8px', S('font-weight:500;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', r.n), S('color:var(--ui-text-muted);white-space:nowrap', r.sz)), ...body), r.st === 'prog' && S('width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)', I('x', 14)))
+		}
+		const UpPanel = () => D('background:var(--ui-bg);border:1px solid var(--ui-border);display:flex;flex-direction:column', D('display:flex;align-items:center;gap:12px;padding:12px 14px', D('flex:1;display:flex;flex-direction:column;gap:2px', S('font-weight:600;color:var(--ui-text-highlighted)', UP.title), S('color:var(--ui-text-muted)', UP.sub)), UP.done ? B('Dismiss', { h: m ? 44 : 28, fs: 12 }) : B('Cancel all', { h: m ? 44 : 28, fs: 12 })), ...UP.rows.map(upRow), UP.summary && D('padding:12px 14px;border-top:1px solid var(--ui-border);background:var(--ui-bg-elevated);color:var(--ui-text-toned);font-weight:500', UP.summary))
+
+		const Groups = () => {
+			const G = [
+				{ n: 'floorboards.jpg', sub: '3 identical images · 2.4 MB each · 3600 × 2400', c: [12, 5, 6], keep: 12 },
+				{ n: 'IMG_4471.jpg', sub: '2 identical images · 3.1 MB each · 3600 × 2400', c: [7, 9], keep: 7 }
+			]
+			return D('display:flex;flex-direction:column;gap:16px', ...G.slice(2 - dg).map((g, gi) => D('background:var(--ui-bg);border:1px solid var(--ui-border)', D('padding:12px 14px;border-bottom:1px solid var(--ui-border);display:flex;flex-direction:column;gap:2px', S('font-weight:600;color:var(--ui-text-highlighted)', 'Group ' + (gi + 1)), S('color:var(--ui-text-muted)', g.sub)),
+				D('display:grid;grid-template-columns:' + (m ? 'minmax(0,1fr)' : 'repeat(' + g.c.length + ',minmax(0,1fr))') + ';gap:' + (m ? 0 : 16) + 'px;padding:' + (m ? 0 : 16) + 'px', ...g.c.map(id => {
+					const im = byId(id), k = id === g.keep
+					const others = g.c.filter(x => x !== id).length
+					return D('display:flex;' + (m ? 'flex-direction:column;gap:12px;padding:14px;border-bottom:1px solid var(--ui-border-muted)' : 'flex-direction:column;gap:12px;padding:12px;border:1px solid ' + (k ? 'var(--ui-primary)' : 'var(--ui-border)')) + ';background:' + (k ? 'var(--rc-sand)' : 'var(--ui-bg)') + ';color:' + (k ? '#111111' : 'var(--ui-text)'),
+						D('display:flex;gap:12px;' + (m ? 'align-items:flex-start' : 'flex-direction:column'), Th(im, (m ? 'width:96px;height:72px;flex-shrink:0' : 'aspect-ratio:4/3') + ';border:1px solid var(--ui-border)'),
+							D('display:flex;flex-direction:column;gap:4px;min-width:0', D('display:flex;gap:6px;align-items:center;flex-wrap:wrap', S('font-weight:500;color:' + (k ? '#111111' : 'var(--ui-text-highlighted)') + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap', im.n), k && S('height:20px;padding:0 6px;display:inline-flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-size:12px;font-weight:500', 'Suggested')),
+								S('font-size:12px;color:' + (k ? '#444444' : 'var(--ui-text-muted)'), 'Uploaded ' + im.d + ' by ' + im.by),
+								S('font-weight:500;text-decoration:underline;text-underline-offset:3px', 'Used in ' + pl(im.used)))),
+						B('Merge into this one', { k: k ? 'primary' : 'outline', full: false, icon: 'merge', h: bh }))
+				})),
+				D('padding:10px 14px;border-top:1px solid var(--ui-border);color:var(--ui-text-muted);font-size:12px', 'Suggested: the most used copy, then the oldest. Choosing another copy switches articles to it.'))))
+		}
+
+		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 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 }
+			if (s.limited) parts.push(Alert('info', 'timer', 'Too many uploads', 'For your security, wait a moment before uploading again.'))
+			if (s.error) parts.push(Alert('error', 'circle-x', 'Couldn\'t load your images', 'Check your connection and try again.', 'Try again'))
+			const tb = m
+				? D('display:flex;flex-direction:column;gap:12px', Search(), TabRow(), D('display:flex;gap:8px', Sort(), Toggle()))
+				: 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(), Toggle()))
+			parts.push(tb)
+			if (UP) parts.push(UpPanel())
+			if (s.loading) parts.push(Skel())
+			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())
+			}
+			return parts
+		}
+		const BulkBar = () => D('position:absolute;z-index:30;bottom:' + (m ? 16 : 24) + 'px;' + (m ? 'left:16px;right:16px' : 'left:calc(224px + (100% - 224px) / 2);transform:translateX(-50%);width:400px') + ';display:flex;align-items:center;gap:8px;padding:8px 8px 8px 16px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);box-shadow:var(--rc-shadow-pop)', S('flex:1;font-weight:500', sel.length + ' selected'), B('Delete', { k: 'danger', icon: 'trash-2' }), B('Clear', { k: 'inv' }))
+
+		// ---------- detail panel
+		const Panel = () => {
+			const im = byId(s.panel.id), list = usedList(im.used)
+			const meta = [['Type', im.ty], ['Size', im.sz], ['Dimensions', im.dim], ['Uploaded', im.d], ['Uploaded by', im.by]]
+			const w = m ? '100%' : '460px'
+			return D('position:absolute;inset:0;z-index:40;display:flex;justify-content:flex-end;background:' + (m ? 'var(--ui-bg)' : 'var(--rc-overlay)'),
+				D('width:' + w + ';height:100%;background:var(--ui-bg);display:flex;flex-direction:column;' + (m ? '' : 'box-shadow:var(--rc-shadow-modal)'),
+					D('height:' + (m ? 56 : 56) + 'px;flex-shrink:0;display:flex;align-items:center;gap:' + (m ? 4 : 12) + 'px;padding:0 ' + (m ? 6 : 20) + 'px;border-bottom:1px solid var(--ui-border)', m && S('width:44px;height:44px;display:flex;align-items:center;justify-content:center', I('arrow-left', 20)), 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', im.n), !m && S('width:28px;height:28px;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:20px',
+						Th(im, 'aspect-ratio:' + (m ? '4/3' : '16/10') + ';border:1px solid var(--ui-border);flex-shrink:0', 40),
+						D('display:flex;gap:8px;' + (m ? 'flex-wrap:wrap' : ''), B('Copy URL', { icon: 'link', full: m }), B('Rename', { icon: 'pencil', full: m }), B('Delete', { k: 'del', icon: 'trash-2', full: m })),
+						im.dup && Alert('info', 'copy', 'Identical to 2 other images', 'floorboards-copy.jpg and IMG_2208.jpg have the same content.', 'Review duplicates', { icon: 'arrow-right' }),
+						D('display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 12px;color:var(--ui-text-toned)', ...meta.flatMap(([k, v]) => [S('color:var(--ui-text-muted)', k), S('color:var(--ui-text-highlighted)', v)]), S('color:var(--ui-text-muted)', 'URL'), S('font:400 12px/20px \'IBM Plex Mono\',monospace;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', 'cms.renew.example/media/' + im.n)),
+						D('display:flex;flex-direction:column;gap:8px', S('font:600 14px/22px \'IBM Plex Sans\',sans-serif;color:var(--ui-text-highlighted)', im.used ? 'Used in ' + pl(im.used) : 'Not used in any article'),
+							im.used ? D('border:1px solid var(--ui-border)', ...list.map(([t, on], i) => D('display:flex;align-items:center;gap:8px;min-height:' + (m ? 48 : 40) + 'px;padding:0 12px;border-top:' + (i ? '1px solid var(--ui-border-muted)' : '0'), S('flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;text-decoration:underline;text-underline-offset:3px;color:var(--ui-text-highlighted)', t), on ? Bd('Online', 'on', 22) : Bd('Draft', 'draft', 22), I('arrow-up-right', 14, 'color:var(--ui-text-muted)'))))
+								: S('color:var(--ui-text-muted)', 'This image is safe to delete. No article shows it.'),
+							im.used ? S('color:var(--ui-text-muted);font-size:12px', 'Counted from the text of your articles each time you open this page.') : null))))
+		}
+
+		// ---------- modal
+		const Field = (lab, val, o = {}) => D('display:flex;flex-direction:column;gap:6px', D('display:flex;justify-content:space-between', S('font-weight:500;color:var(--ui-text-highlighted)', lab), o.count && S('font:400 12px \'IBM Plex Mono\',monospace;color:var(--ui-text-muted)', o.count)), D('display:flex;align-items:center;min-height:' + (o.area ? 72 : m ? 44 : 40) + 'px;border:1px solid ' + (o.err ? 'var(--ui-error)' : o.focus ? 'var(--ui-primary)' : 'var(--ui-border-accented)') + ';' + (o.focus ? 'box-shadow:0 0 0 1px var(--ui-primary);' : '') + 'background:var(--ui-bg);font-size:' + (m ? 16 : 13) + 'px;' + (o.area ? 'align-items:flex-start;' : ''), S('flex:1;min-width:0;padding:' + (o.area ? '10px' : '0') + ' 12px;color:' + (o.val ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)') + (o.dis ? ';opacity:.6' : ''), val), o.suffix && S('padding:0 12px;color:var(--ui-text-muted);font:400 13px \'IBM Plex Mono\',monospace', o.suffix)), o.err && S('display:flex;gap:6px;align-items:center;color:var(--ui-error);font-size:12px', I('circle-alert', 14), o.err), o.help && S('color:var(--ui-text-muted);font-size:12px', o.help))
+		const ArtBox = (list, more) => D('border:1px solid var(--ui-border)', ...list.map(([t, on], i) => D('display:flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-top:' + (i ? '1px solid var(--ui-border-muted)' : '0'), S('flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-text-highlighted)', t), on ? Bd('Online', 'on') : Bd('Draft', 'draft'))), more && D('padding:8px 12px;border-top:1px solid var(--ui-border-muted);color:var(--ui-text-muted)', more))
+		const modalCfg = () => {
+			const md = s.modal, k = md.k
+			if (k === 'rename') return { title: 'Rename image', desc: 'Only the filename changes. The URL stays the same, so articles that use this image keep working.', body: [Field('Filename', md.err ? '' : md.val || 'north-wall', { val: !md.err, suffix: '.jpg', focus: !md.loading, err: md.err, dis: md.loading, help: md.err ? '' : 'Letters, numbers, dashes and underscores. The .jpg ending stays.' })], cancel: 'Cancel', confirm: md.loading ? 'Renaming…' : 'Rename' }
+			if (k === 'del') return { title: 'Delete this image?', desc: '"window-frame.jpg" will be deleted from your library. No article uses it. This can\'t be undone.', cancel: 'Cancel', confirm: md.loading ? 'Deleting…' : 'Delete image', tone: 'danger' }
+			if (k === 'delUsed') return { title: 'Delete an image that\'s in use?', desc: '"north-wall.jpg" is used in 2 articles. If you delete it, they will show a broken image. This can\'t be undone.', body: [ArtBox(usedList(2))], cancel: 'Cancel', confirm: md.loading ? 'Deleting…' : 'Delete image', tone: 'danger' }
+			if (k === 'bulk') return { title: 'Delete 3 images?', desc: '2 of them are used in 5 articles, which will show a broken image. The other one isn\'t used anywhere. This can\'t be undone.', body: [D('display:flex;flex-direction:column;border:1px solid var(--ui-border)', ...[['north-wall.jpg', 'Used in 2'], ['kitchen-after.webp', 'Used in 3'], ['window-frame.jpg', 'Unused']].map(([n, u], i) => D('display:flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-top:' + (i ? '1px solid var(--ui-border-muted)' : '0'), S('flex:1;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap', n), Bd(u === 'Unused' ? 'Unused' : u, u === 'Unused' ? 'unused' : 'used'))))], cancel: 'Cancel', confirm: md.loading ? 'Deleting…' : 'Delete 3 images', tone: 'danger' }
+			if (k === 'merge') return { title: 'Merge into floorboards.jpg?', desc: 'Articles that use the other 2 copies will be switched to floorboards.jpg, and the other 2 copies will be deleted. 5 articles will be updated. This can\'t be undone.', body: [D('display:flex;gap:12px;align-items:center;border:1px solid var(--ui-border);padding:10px 12px', Th(byId(12), 'width:56px;height:42px;flex-shrink:0;border:1px solid var(--ui-border)', 16), D('display:flex;flex-direction:column;min-width:0', S('font-weight:500;color:var(--ui-text-highlighted)', 'floorboards.jpg'), S('font-size:12px;color:var(--ui-text-muted)', 'Kept · used in 4 articles now')))], cancel: 'Cancel', confirm: md.loading ? 'Merging…' : 'Merge 2 copies', tone: 'danger' }
+			if (k === 'remove') return { title: 'Remove this image from the article?', desc: 'It\'s removed from this article only. The file stays in your library and in any other article that uses it.', body: [D('display:flex;gap:12px;align-items:center;border:1px solid var(--ui-border);padding:10px 12px', Th(byId(1), 'width:56px;height:42px;flex-shrink:0;border:1px solid var(--ui-border)', 16), D('display:flex;flex-direction:column;min-width:0', S('font-weight:500;color:var(--ui-text-highlighted)', 'north-wall.jpg'), S('font-size:12px;color:var(--ui-text-muted)', 'Stays in the library · 3.9 MB')))], cancel: 'Cancel', confirm: 'Remove image' }
+		}
+		const Shell = (o, body) => D('position:absolute;inset:0;z-index:50;background:var(--rc-overlay);display:flex;align-items:' + (m ? 'flex-end' : 'flex-start') + ';justify-content:center;padding:' + (m ? 16 : 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',
+				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:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)', I('x'))),
+				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;opacity:' + (o.cdis ? 0.4 : 1), o.loading && I('loader-circle'), o.confirm))))
+		const Modal = () => {
+			const md = s.modal, c = modalCfg()
+			return Shell(c, D('padding:20px 24px 0;display:flex;flex-direction:column;gap:16px;min-height:0;overflow:hidden', md.notice && D('display:flex;gap:8px;padding:10px 12px;background:var(--rc-error-soft);color:var(--ui-error)', S('display:flex;padding-top:2px', I('circle-x')), S('color:var(--ui-text-toned)', md.notice)), ...(c.body || [])))
+		}
+		const Toasts = () => D('position:absolute;z-index:60;display:flex;flex-direction:column;gap:8px;' + (m ? 'left:16px;right:16px;bottom:' + (s.sel && s.sel.length ? 80 : 16) + 'px' : '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'))))
+
+		// ---------- picker (editor + dialog)
+		const Editor = () => D('flex:1;min-height:0;overflow:hidden;background:var(--ui-bg-muted);display:flex;flex-direction:column',
+			D('background:var(--ui-bg);border-bottom:1px solid var(--ui-border);padding:12px ' + (m ? 16 : 24) + 'px;display:flex;align-items:center;gap:12px', S('flex:1;font:600 ' + (m ? 16 : 20) + 'px/28px \'IBM Plex Sans\',sans-serif;color:var(--ui-text-highlighted)', 'How we price a bathroom renovation'), !m && B('Save', { dis: true }), !m && B('Publish', { k: 'primary' })),
+			D('flex:1;overflow:hidden;padding:' + (m ? '20px 16px' : '32px 0') + ';display:flex;justify-content:center', D('width:100%;max-width:680px;display:flex;flex-direction:column;gap:16px;font-family:\'Source Serif 4\',serif;font-size:' + (m ? 16 : 18) + 'px;line-height:1.66;color:var(--ui-text-toned)',
+				S('display:block', 'A bathroom is priced by what has to happen behind the walls before anything gets tiled.'),
+				s.inArticle && D('position:relative;aspect-ratio:16/9;border:1px solid var(--ui-border);overflow:hidden', Th(byId(1), 'position:absolute;inset:0', 40), S('position:absolute;top:8px;right:8px;height:28px;padding:0 10px;display:flex;align-items:center;gap:6px;background:var(--ui-bg);border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font:500 12px \'IBM Plex Sans\',sans-serif', I('trash-2', 14), 'Remove image')),
+				S('display:block', 'We don\'t add a margin on materials you choose yourself.'))))
+		const PT = s.pk || {}
+		const pImgs = (PT.ids || [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]).map(byId)
+		const inArt = [1, 4]
+		const cols = m ? 3 : 4
+		const PTile = im => {
+			const on = PT.sel === im.id
+			return D('display:flex;flex-direction:column;gap:6px;min-width:0', D('position:relative;' + (on ? 'outline:2px solid var(--ui-primary);outline-offset:2px;' : ''), Th(im, 'aspect-ratio:1/1;border:1px solid var(--ui-border)', 20),
+				inArt.includes(im.id) && S('position:absolute;left:4px;bottom:4px;height:18px;padding:0 5px;display:flex;align-items:center;background:var(--rc-sand);color:#111111;font-size:11px;font-weight:500', 'In this article'),
+				on && 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', im.n))
+		}
+		const PGrid = () => D('display:grid;grid-template-columns:repeat(' + cols + ',minmax(0,1fr));gap:12px ' + (m ? 8 : 12) + 'px', ...pImgs.map(PTile), ...(PT.more ? Array.from({ length: cols }, () => D('display:flex;flex-direction:column;gap:6px', S('display:block;aspect-ratio:1/1;background:var(--ui-bg-accented)'), S('display:block;width:70%;height:10px;background:var(--ui-bg-accented)'))) : []))
+		const PSkel = () => D('display:grid;grid-template-columns:repeat(' + cols + ',minmax(0,1fr));gap:12px ' + (m ? 8 : 12) + 'px', ...Array.from({ length: m ? 9 : 8 }, () => D('display:flex;flex-direction:column;gap:6px', S('display:block;aspect-ratio:1/1;background:var(--ui-bg-accented)'), S('display:block;width:70%;height:10px;background:var(--ui-bg-accented)'))))
+		const PTabs = () => D('display:flex;gap:20px;border-bottom:1px solid var(--ui-border);padding:0 24px;margin-top:16px', ...['Upload', 'Library'].map(t => S('height:' + (m ? 44 : 36) + 'px;display:flex;align-items:center;gap:6px;border-bottom:2px solid ' + (PT.tab === t ? 'var(--ui-primary)' : 'transparent') + ';margin-bottom:-1px;font-weight:' + (PT.tab === t ? 500 : 400) + ';color:' + (PT.tab === t ? 'var(--ui-text-highlighted)' : 'var(--ui-text-toned)'), I(t === 'Upload' ? 'upload' : 'images', 14), t)))
+		const drop = (icon, title, text, bd, ic) => D('height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;border:' + bd + ';background:var(--ui-bg)', I(icon, 24, 'color:' + (ic || 'var(--ui-text-toned)')), S('font-weight:500;color:var(--ui-text-highlighted)', title), S('color:var(--ui-text-toned);font-size:12px;max-width:300px', text))
+		const PBody = () => {
+			if (PT.tab === 'Upload') {
+				if (PT.dup) return D('display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--ui-info);background:var(--ui-bg)', D('display:flex;gap:12px;align-items:center', Th(byId(1), 'width:72px;height:54px;flex-shrink:0;border:1px solid var(--ui-border)', 16), D('display:flex;flex-direction:column;gap:2px;min-width:0', S('font-weight:600;color:var(--ui-text-highlighted)', 'Already in your library'), S('color:var(--ui-text-toned);font-size:12px', 'north-wall.jpg matches an image uploaded on 12 Sep 2026 by Marta Alves.'))), D('display:flex;gap:8px;' + (m ? 'flex-direction:column' : ''), B('Use existing', { k: 'primary', full: m }), B('Upload anyway', { full: m })))
+				return drop('image-plus', 'Drop an image here, or choose a file', 'PNG, JPEG, WEBP, SVG · max 10 MB', '1px dashed var(--ui-border-accented)')
+			}
+			const kids = []
+			kids.push(D('height:' + (m ? 44 : 32) + 'px;padding:0 4px 0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:' + (PT.q ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)') + (m ? ';font-size:16px' : ''), I('search', 14), S('flex:1', PT.q || 'Search by filename'), PT.q && S('width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)', I('x', 14))))
+			if (PT.error) kids.push(Alert('error', 'circle-x', 'Couldn\'t load your library', 'Check your connection and try again.', 'Try again'))
+			else if (PT.empty === 'first') kids.push(Empty('images', 'Your library is empty', 'Images you upload appear here, ready to use in any article.', 'Upload an image', true, 32))
+			else if (PT.empty === 'search') kids.push(Empty('search', 'No images match "wall"', 'Check the spelling, or search for a shorter part of the filename.', 'Clear search', false, 32))
+			else if (PT.loading) kids.push(PSkel())
+			else {
+				kids.push(S('color:var(--ui-text-muted);font-size:12px', 'Newest first · 48 images'), D('min-height:0;overflow:hidden;' + (PT.sel ? 'max-height:' + (m ? 120 : 190) + 'px' : 'max-height:' + (m ? 300 : 300) + 'px'), PGrid()))
+				if (!PT.sel) kids.push(D('display:flex;justify-content:center', B(PT.more ? 'Loading…' : 'Load more', { icon: PT.more ? 'loader-circle' : null, dis: !!PT.more })))
+			}
+			if (PT.sel) { const im = byId(PT.sel); kids.push(D('display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ui-border)', D('display:flex;gap:12px;align-items:center', Th(im, 'width:56px;height:56px;flex-shrink:0;border:1px solid var(--ui-border)', 16), D('display:flex;flex-direction:column;min-width:0', S('font-weight:500;color:var(--ui-text-highlighted)', im.n), S('font-size:12px;color:var(--ui-text-muted)', im.dim + ' · ' + im.sz))), Field('Alt text (optional)', PT.alt || 'e.g. North wall of the kitchen before plastering', { val: !!PT.alt, focus: !!PT.alt, help: 'Describes the image for people who use a screen reader, and shows if it doesn\'t load. Leave it empty if the image is only decoration.' }))) }
+			return D('display:flex;flex-direction:column;gap:12px', ...kids)
+		}
+		const Picker = () => {
+			const ins = PT.tab === 'Library'
+			return Shell({ title: 'Add an image', close: true, w: 640, top: 40, cancel: 'Cancel', confirm: ins ? 'Insert image' : null, cdis: ins && !PT.sel }, D('display:flex;flex-direction:column;min-height:0;flex:1', PTabs(), D('padding:16px 24px 0;min-height:0;overflow:hidden;display:flex;flex-direction:column', PBody())))
+		}
+
+		// ---------- shell
+		const nav = [['home', 'house', 'Home'], ['articles', 'file-text', 'Articles'], ['media', 'images', 'Media'], ['users', 'users', 'Users'], ['integration', 'plug', 'Integration'], ['settings', 'settings', 'Settings']]
+		const isPicker = s.kind === 'picker'
+		const navKey = isPicker ? 'articles' : 'media'
+		const crumbs = isPicker ? ['Articles', 'How we price a bathroom renovation'] : ['Media']
+		const side = D('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',
+			D('display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:10px', h('svg', { width: 26, height: 26, viewBox: '0 0 16 16', shapeRendering: 'crispEdges' }, h('rect', { width: 16, height: 16, fill: '#111' }), h('path', { fill: '#fff', fillRule: 'evenodd', d: 'M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z' })), S('font-weight:600;font-size:14px;color:var(--ui-text-highlighted)', 'RenewCMS')),
+			...nav.map(([k, ic, t]) => D('display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;background:' + (k === navKey ? 'var(--rc-sand)' : 'transparent') + ';color:' + (k === navKey ? '#111111' : 'var(--ui-text-toned)') + ';font-weight:' + (k === navKey ? 500 : 400), I(ic), t)),
+			D('flex:1'), D('display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;color:var(--ui-text-highlighted)', S('width:26px;height:26px;flex-shrink:0;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 11px \'IBM Plex Sans\',sans-serif', 'MA'), S('flex:1;font-weight:500', 'Marta Alves'), I('chevrons-up-down', 14)))
+		const topbar = m
+			? D('height:56px;flex-shrink:0;border-bottom:1px solid var(--ui-border);background:var(--ui-bg);display:flex;align-items:center;padding:0 6px;gap:4px;color:var(--ui-text-highlighted)', S('width:44px;height:44px;display:flex;align-items:center;justify-content:center', I(isPicker ? 'arrow-left' : 'menu', 20)), S('flex:1;font-weight:600;font-size:16px', isPicker ? 'Edit article' : 'Media'), isPicker && S('width:44px;height:44px;display:flex;align-items:center;justify-content:center', I('ellipsis', 20)))
+			: D('height:48px;flex-shrink:0;border-bottom:1px solid var(--ui-border);background:var(--ui-bg);display:flex;align-items:center;padding:0 24px;gap:8px;color:var(--ui-text-muted)', I('panel-left-close'), S('width:1px;height:16px;background:var(--ui-border);margin:0 6px'), ...crumbs.flatMap((c, i) => [i > 0 && I('chevron-right', 14), S('color:' + (i === crumbs.length - 1 ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)') + ';font-weight:' + (i === crumbs.length - 1 ? 500 : 400), c)]))
+		const offline = s.offline && D('flex-shrink:0;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted)', I('wifi-off'), S('flex:1', 'You\'re offline. You can look through the images that are loaded, but uploading, renaming and deleting need a connection.'))
+		const pad = m ? 16 : 24
+		const content = isPicker ? Editor() : D('flex:1;min-height:0;overflow:hidden;padding:' + pad + 'px;display:flex;flex-direction:column;gap:16px;position:relative', Header(), ...pageBody())
+		const dragOv = s.drag && D('position:absolute;z-index:35;inset:' + (m ? 8 : 12) + 'px;top:' + (m ? 64 : 60) + 'px;border:2px dashed var(--ui-primary);background:var(--rc-sand);color:#111111;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center', I('upload', 28), S('font-weight:600;font-size:16px', 'Drop images to upload'), S('color:#444444', 'PNG, JPEG, WEBP, SVG · max 10 MB each'))
+		const fab = m && !isPicker && !(sel.length) && !s.panel && !s.modal && !s.error && s.empty !== 'first' && !s.drag && 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);opacity:' + (s.limited || s.offline ? 0.4 : 1), I(s.limited ? 'timer' : 'upload', 18), s.limited ? 'Try again in 0:42' : 'Upload')
+		const ann = s.ann && D('position:absolute;z-index:20;' + (m ? 'left:16px;bottom:24px' : 'left:248px;bottom:20px'), Note(s.ann))
+		const root = D('width:' + (m ? 390 : 1440) + 'px;height:' + (m ? 844 : 900) + 'px;position:relative;display:flex;flex-direction:' + (m ? 'column' : 'row') + ';background:var(--ui-bg-muted);color:var(--ui-text);font-family:\'IBM Plex Sans\',sans-serif;font-size:13px;line-height:20px;overflow:hidden',
+			!m && side, D('flex:1;min-width:0;min-height:0;display:flex;flex-direction:column', topbar, offline, content),
+			dragOv, fab, ann, sel.length > 0 && !s.panel && !s.modal && BulkBar(), s.panel && Panel(), isPicker && s.picker && Picker(), s.modal && Modal(), s.toasts && Toasts())
+		return { view: root }
+	}
+}
+</script>
+</body>
+</html>

docs/design/source/RenewCMS Prototype.dc.html

@@ -187,6 +187,7 @@ class Component extends DCLogic {
 	act(a) {
 		const s = this.state
 		if (a === 'usermenu') return this.setState({ userMenu: !s.userMenu })
+		if (a && a.startsWith('theme-')) return this.setState({ mode: a.slice(6) })
 		if (s.userMenu) this.setState({ userMenu: false })
 		if (a === 'pf-reset') return this.setState({ pfReset: 'sent' })
 		if (a === 'mnav-close') return this.setState({ mnav: false })
@@ -428,7 +429,7 @@ class Component extends DCLogic {
 			devices: devs, modes, flows, hint, tools,
 			hs: s.hs, hsClass: s.hs ? 'hs' : '', hsJust: s.hs ? 'flex-end' : 'flex-start', hsBg: s.hs ? 'var(--ui-primary)' : 'var(--ui-bg-accented)', toggleHs: () => this.setState({ hs: !s.hs }),
 			mobile, isAuth, isApp, isEmail,
-			authS: isAuth ? this.authS() : {}, appS: isApp ? { ...this.appS(), userMenu: s.userMenu } : {},
+			authS: isAuth ? this.authS() : {}, appS: isApp ? { ...this.appS(), userMenu: s.userMenu, mode: s.mode } : {},
 			authBg: mobile ? 'var(--ui-bg)' : 'var(--ui-bg-muted)', authTop: mobile ? '40px' : '108px',
 			emailHtml: isEmail ? this.emailHtml() : '', emailSubject: s.email === 'reset' ? 'Reset your RenewCMS password' : 'Verify your RenewCMS account',
 			devW: dw + 'px', devH: dh + 'px', zoom: s.zoom, boxW: Math.round(dw * s.zoom) + 'px', boxH: Math.round(dh * s.zoom) + 'px',

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

@@ -39,12 +39,13 @@
 <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;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"><dc-import name="AppFrame" s="{{ st }}" mobile="{{ false }}" hint-size="1440px,900px"></dc-import></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></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"><dc-import name="AppFrame" s="{{ st.m }}" mobile="{{ true }}" hint-size="390px,844px"></dc-import></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></div></div>
 </div>
 </div>
 </sc-for>
 </div>
+<sc-if value="{{ g.table }}"><div style="display:flex;flex-direction:column;gap:8px;max-width:1240px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ g.tableTitle }}</span><div style="background:var(--ui-bg);border:1px solid var(--ui-border)"><div style="display:grid;grid-template-columns:90px 240px minmax(0,1fr);padding:8px 12px;background:var(--ui-bg-elevated);color:var(--ui-text-muted);font-weight:500"><span>Status</span><span>Where</span><span>Copy</span></div><sc-for list="{{ g.table }}" as="r" hint-placeholder-count="3"><div style="display:grid;grid-template-columns:90px 240px minmax(0,1fr);gap:0;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-toned);padding-right:16px">{{ r.b }}</span><span style="color:var(--ui-text-highlighted);text-wrap:pretty">{{ r.c }}</span></div></sc-for></div></div></sc-if>
 </section>
 </sc-for>
 
@@ -96,18 +97,28 @@ class Component extends DCLogic {
 		const cropM = crop => ({ title: 'Crop and resize', desc: 'north-wall.jpg · 3.9 MB', close: true, crop, cancel: 'Choose another file', confirm: 'Upload image' })
 		const del = (loading, err) => ({ title: 'Delete this article?', desc: '"Winter checklist for timber windows" and its 3 images will be deleted. This can\'t be undone.', cancel: 'Cancel', confirm: loading ? 'Deleting…' : 'Delete article', tone: 'danger', loading, notice: err })
 		const people = [
-			{ email: 'sam.oliveira@renew.example', st: 'pending', c: '27 Sep 2026' },
+			{ email: 'sam.oliveira@renew.example', role: 'admin', st: 'pending', c: '27 Sep 2026' },
-			{ email: 'p.huber@gmail.com', st: 'expired', c: '3 Aug 2026' },
+			{ email: 'p.huber@gmail.com', display: 'Paul Huber', role: 'admin', st: 'expired', c: '3 Aug 2026' },
-			{ u: 'ines', display: 'Inès Duarte', st: 'accepted', c: '18 Jun 2026' },
+			{ email: 'ines.duarte@renew.example', display: 'Inès Duarte', role: 'admin', st: 'accepted', c: '18 Jun 2026' },
-			{ u: 'jonas', st: 'accepted', c: '2 Apr 2026' },
+			{ email: 'jonas@renew.example', role: 'admin', st: 'accepted', c: '2 Apr 2026' },
-			{ u: 'marta', st: 'accepted', c: '12 Mar 2026', you: true }
+			{ email: 'marta@renew.example', role: 'owner', st: 'accepted', c: '12 Mar 2026', you: true }
 		]
 		const U = (o = {}) => ({ kind: 'users', nav: 'users', crumbs: ['Users'], mTitle: 'Users', ...o, users: { rows: people, ...(o.users || {}) } })
 		const inv = (o = {}) => ({ title: 'Invite a user', desc: 'We\'ll email them a link to choose a username and password. The link expires after 3 days.', close: true, cancel: 'Cancel', confirm: 'Send invite', ...o, fields: o.fields || [{ label: 'Email', ph: 'name@example.com', focus: true }] })
 		const invF = (value, extra = {}) => [{ label: 'Email', value, ...extra }]
 		const P = (pf = {}, o = {}) => withM({ kind: 'profile', nav: 'profile', crumbs: ['Profile'], mTitle: 'Profile', ...o, pf })
 		const dname = 'Marta Alves'
-		return [
+		const MS = (o) => ({ frame: 'MediaFrame', isMedia: true, ...o, m: { frame: 'MediaFrame', isMedia: true, ...o } })
+		const Mp = (o) => MS({ kind: 'page', ...o })
+		const TT = (tone, icon, title, text, action) => [tone, icon, title, text, action]
+		const upT = (rows, o = {}) => ({ title: 'Uploading 6 images', sub: '2 of 6 done', rows, ...o })
+		const rowOk = (n, sz, im) => ({ n, sz, st: 'ok', im })
+		const rowDup = { n: 'floorboards-2.jpg', sz: '2.4 MB', st: 'dup', im: 12, msg: 'Same as "floorboards.jpg", uploaded 14 Jun 2026 by Inès Duarte.' }
+		const rowRej = { n: 'scan.tif', sz: '14.2 MB', st: 'rej', title: 'scan.tif is 14.2 MB', msg: 'Images can be up to 10 MB. Use a PNG, JPEG, WEBP or SVG image.' }
+		const rowFail = { n: 'roof.png', sz: '1.4 MB', st: 'fail', im: 10 }
+		const gone = [1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12]
+		const pk = (o = {}, x = {}) => MS({ kind: 'picker', picker: true, pk: { tab: 'Library', ...o }, ...x })
+		return this.finish([
 			{ label: 'Boot', title: 'App boot', route: 'any route, first load', api: 'GET /v1/auth/me (pending)', note: 'While the session is checked, the shell renders with skeletons, never a spinner. The possible outcomes are: 200 with a verified user, which renders the route; 200 with an unverified user, which goes to /register/pending; and 401, which goes to /login?redirect=<path>. Public routes skip this check.', states: [
 				withM({ ...home, name: 'Checking session', trigger: 'The first paint on any back-office URL, and usually visible for well under a second.', boot: true })
 			] },
@@ -164,11 +175,87 @@ class Component extends DCLogic {
 				E({ save: 'offline' }, { name: 'Offline', trigger: 'The connection dropped. Writing continues, and Save and Publish wait.', offline: true }),
 				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({ 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.' }),
+				Mp({ empty: 'first', name: 'Empty library, first run', trigger: 'Zero images. Toolbar and tabs are hidden; one call to action. Copy: "No images yet" / "Upload your first image. You can use it in any article." / "Upload an image".' }),
+				Mp({ tab: 'unused', q: 'wall', empty: 'search', name: 'No results', trigger: 'Search or filter matched nothing. "Clear filters" resets the search and goes back to All.' }),
+				Mp({ hover: 2, focus: 3, ann: 'aria-label: kitchen-before.webp, 1.1 MB, used in 1 article', name: 'Hover, focus and keyboard', trigger: 'Hover (second item) darkens the border, adds the pop shadow and reveals the checkbox. Keyboard focus (third item) shows the 2 px primary ring with a 2 px offset and reveals the checkbox. Tab moves between items, Enter opens the detail panel, Space toggles selection, and arrow keys move focus across the grid.' }),
+				Mp({ sel: [1, 2, 8], name: 'Selection and bulk bar', trigger: 'Checkbox on any item, or Space. Selected items take the sand fill with a primary outline, and Select all shows a partial state. The bar is sticky at the bottom (above the bottom edge on mobile, replacing the Upload button). Announced: "3 selected". Escape or Clear empties it.' }),
+				Mp({ sel: [1, 2, 8], modal: { k: 'bulk' }, name: 'Bulk delete: confirm', trigger: 'Delete in the bulk bar. The dialog says how many of the selection are in use and lists them. The confirm button carries the count.' }),
+				Mp({ sel: [1, 2, 8], modal: { k: 'bulk', loading: true }, name: 'Bulk delete: in progress', trigger: 'Requests in flight. The dialog can\'t be dismissed.' }),
+				Mp({ ids: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12], sel: [8], toasts: [TT('error', 'circle-x', 'Couldn\'t delete 1 image', '2 images were deleted. window-frame.jpg is still in your library. Try again.', 'Retry')], name: 'Bulk delete: partly failed', trigger: 'Some requests failed. Deleted images leave the grid, failed ones stay selected, and the toast stays until retried or dismissed.' }),
+				Mp({ ids: [3, 4, 5, 6, 7, 9, 10, 11, 12], toasts: [TT('success', 'circle-check', '3 images deleted', 'They\'re gone from your library.')], name: 'Bulk delete: done', trigger: '204 for all. Focus moves to the next item.' }),
+				Mp({ panel: { id: 1 }, name: 'Detail panel: in use', trigger: 'Click or Enter on an item. Right-hand slideover on desktop, full screen on mobile with a back arrow. Actions: Copy URL, Rename, Delete. "Used in 2 articles" lists title, Online or Draft, and links to the editor. Focus returns to the item on close.' }),
+				Mp({ panel: { id: 8 }, name: 'Detail panel: unused', trigger: 'Used in nothing. The section reads "Not used in any article" and says the image is safe to delete.' }),
+				Mp({ panel: { id: 12 }, name: 'Detail panel: duplicate', trigger: 'The image has identical copies. An info alert links to the duplicates view.' }),
+				Mp({ panel: { id: 1 }, toasts: [TT('success', 'circle-check', 'URL copied', 'Paste it wherever you need the image address.')], name: 'Copy URL', trigger: 'Copy URL. Clipboard write succeeded. Success toasts last 5 s.' }),
+				Mp({ panel: { id: 1 }, modal: { k: 'rename', val: 'north-wall' }, name: 'Rename: dialog', trigger: 'Rename in the panel. The field holds the name without its extension, and the .jpg ending is fixed. The description says the URL stays the same.' }),
+				Mp({ panel: { id: 1 }, modal: { k: 'rename', val: 'north-wall-01', loading: true }, name: 'Rename: saving', trigger: 'PATCH in flight. Field and buttons disabled, dialog can\'t be dismissed.' }),
+				Mp({ panel: { id: 1 }, modal: { k: 'rename', err: 'Enter a filename.' }, name: 'Rename: validation', trigger: 'Empty or only symbols, on submit or blur. Nothing is sent.' }),
+				Mp({ panel: { id: 1 }, modal: { k: 'rename', val: 'north-wall-01', notice: 'Couldn\'t rename the image. Your text is still here. Try again in a moment.' }, name: 'Rename: failed', trigger: '500 or network failure. The error shows inside the dialog.' }),
+				Mp({ panel: { id: 1 }, toasts: [TT('success', 'circle-check', 'Image renamed', 'It\'s now "north-wall-01.jpg". The URL is the same.')], name: 'Rename: done', trigger: '200: the panel title and list update in place.' }),
+				Mp({ panel: { id: 8 }, modal: { k: 'del' }, name: 'Delete: unused image', trigger: 'Delete in the panel. Plain confirm. Says what happens and that it can\'t be undone.' }),
+				Mp({ panel: { id: 1 }, modal: { k: 'delUsed' }, name: 'Delete: image in use', trigger: 'Stronger confirm. Lists the affected articles and states that they will show a broken image.' }),
+				Mp({ panel: { id: 1 }, modal: { k: 'delUsed', loading: true }, name: 'Delete: in progress', trigger: 'DELETE in flight. The dialog can\'t be dismissed.' }),
+				Mp({ panel: { id: 8 }, modal: { k: 'del', notice: 'Couldn\'t delete the image, so it\'s still there. Try again in a moment.' }, name: 'Delete: failed', trigger: '500 or network failure. The error shows inside the dialog, as in the article delete.' }),
+				Mp({ ids: gone, toasts: [TT('success', 'circle-check', 'Image deleted', '"window-frame.jpg" is gone from your library.')], name: 'Delete: done', trigger: '204: the panel closes, the item leaves the grid and focus moves to the next item.' }),
+				Mp({ ids: gone, toasts: [TT('info', 'info', 'That image no longer exists', 'It was deleted somewhere else, so we removed it from the library.')], name: 'Image already gone (404)', trigger: 'Any action on an image that was deleted elsewhere. The panel closes and the item leaves the list.' }),
+				Mp({ drag: true, name: 'Upload: drag over the page', trigger: 'Files dragged onto the page. A dashed drop area covers the content. Dropping starts the upload straight away; there is no crop step on this page.' }),
+				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({ 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', dupEmpty: true, name: 'Duplicates: empty', trigger: 'No groups. The Duplicates tab loses its count badge.' }),
+				Mp({ tab: 'dups', modal: { k: 'merge' }, name: 'Merge: confirm', trigger: '"Merge into this one" on floorboards.jpg. The dialog says articles using the other copies will switch to this image and the other copies will be deleted, with the article count.' }),
+				Mp({ tab: 'dups', modal: { k: 'merge', loading: true }, name: 'Merge: in progress', trigger: 'Request in flight. The dialog can\'t be dismissed.' }),
+				Mp({ tab: 'dups', modal: { k: 'merge', notice: 'Couldn\'t merge the copies. Nothing was changed. Try again in a moment.' }, name: 'Merge: failed', trigger: '500 or network failure. Nothing is switched or deleted.' }),
+				Mp({ tab: 'dups', modal: { k: 'merge', notice: 'One of these images changed, so nothing was merged. The list is up to date now. Check it and try again.' }, name: 'Merge: conflict (409)', trigger: 'A copy was deleted, or a new copy appeared, since the page loaded.' }),
+				Mp({ tab: 'dups', dupGroups: 1, ids: [1, 2, 3, 4, 7, 8, 9, 10, 11, 12], toasts: [TT('success', 'circle-check', 'Copies merged', '2 copies merged. 5 articles updated.')], name: 'Merge: done', trigger: '200: the group leaves the list. When it was the last one, "No duplicates" shows.' }),
+				Mp({ error: true, name: 'List failed to load', trigger: 'A 500 or network failure on the list request. The alert replaces the images; Try again repeats the request.' }),
+				Mp({ offline: true, name: 'Offline', trigger: 'navigator.onLine is false. Loaded images stay browsable. Upload, Rename, Delete and Merge are disabled, and the banner says why.' })
+			], tableTitle: 'Status to copy', table: [
+				{ a: '200 / 201', b: 'Upload, rename, merge', c: 'Upload: row reads "Added to your library". Rename: "Image renamed" / "It\'s now "north-wall-01.jpg". The URL is the same." Merge: "Copies merged" / "2 copies merged. 5 articles updated."' },
+				{ a: '204', b: 'Delete, bulk delete', c: '"Image deleted" / ""window-frame.jpg" is gone from your library." Bulk: "3 images deleted" / "They\'re gone from your library."' },
+				{ a: '400', b: 'Upload row', c: '"broken.png couldn\'t be read" / "The server couldn\'t read this image. Save it again as a PNG or JPEG, then try again." In a dialog: "Something in the form isn\'t valid. Check the highlighted fields."' },
+				{ a: '401', b: 'Any call', c: 'Handled globally: /login?redirect=/media&reason=expired. No local copy.' },
+				{ a: '403', b: 'Any call, unverified', c: 'Handled globally: /register/pending.' },
+				{ a: '404', b: 'Rename, delete, merge, panel', c: 'Toast (info): "That image no longer exists" / "It was deleted somewhere else, so we removed it from the library." The panel or dialog closes.' },
+				{ a: '409', b: 'Merge', c: 'Dialog alert: "One of these images changed, so nothing was merged. The list is up to date now. Check it and try again."' },
+				{ a: '413', b: 'Upload row', c: '"scan.tif is 14.2 MB" / "Images can be up to 10 MB. Use a PNG, JPEG, WEBP or SVG image."' },
+				{ a: '415', b: 'Upload row', c: '"notes.pdf isn\'t an image" / "Images can be up to 10 MB. Use a PNG, JPEG, WEBP or SVG image."' },
+				{ a: '429', b: 'Upload', c: 'Alert (info): "Too many uploads" / "For your security, wait a moment before uploading again." The button reads "Try again in 0:42" and counts down.' },
+				{ a: '500 / network', b: 'List', c: 'Alert: "Couldn\'t load your images" / "Check your connection and try again." with "Try again".' },
+				{ a: '500 / network', b: 'Upload row', c: '"Upload failed" / "The server didn\'t accept the file. Nothing was added to your library." with "Try again".' },
+				{ a: '500 / network', b: 'Rename dialog', c: '"Couldn\'t rename the image. Your text is still here. Try again in a moment."' },
+				{ a: '500 / network', b: 'Delete dialog', c: '"Couldn\'t delete the image, so it\'s still there. Try again in a moment."' },
+				{ a: '500 / network', b: 'Merge dialog', c: '"Couldn\'t merge the copies. Nothing was changed. Try again in a moment."' },
+				{ a: 'Partial', b: 'Bulk delete', c: 'Toast (error, stays): "Couldn\'t delete 1 image" / "2 images were deleted. window-frame.jpg is still in your library. Try again." with "Retry".' },
+				{ a: 'Offline', b: 'Whole page', c: 'Banner: "You\'re offline. You can look through the images that are loaded, but uploading, renaming and deleting need a connection."' }
+			] },
+			{ label: 'Media picker', title: 'Picker in the editor', route: '/article/:id/edit', api: 'GET /v1/media/?q=&limit=&cursor= · POST /v1/media/ (same as the Media page)', note: 'The existing "Add an image" dialog gains two tabs, Upload and Library. The Upload tab is the current flow unchanged, so it still offers crop and resize, and a new image lands in the library and is inserted as before. The Library tab opens on the Library tab when the library has images and on Upload when it is empty. Images load 24 at a time with "Load more". Newest first, and images already in this article carry "In this article". Alt text is set here and lives only in the article. The dialog is 640 px wide on desktop and a bottom sheet on mobile.', states: [
+				pk({ tab: 'Upload' }, { name: 'Upload tab', trigger: 'The image button in the toolbar. Identical to the current "Add an image" content; only the tabs are new. Rejected, uploading and failed states are unchanged.', inArticle: false }),
+				pk({ tab: 'Upload', dup: true }, { name: 'Upload tab: already in your library', trigger: 'A chosen file has the same content as an existing image. Nothing is sent. "Use existing" inserts the existing image (the alt text step follows); "Upload anyway" continues to crop and upload as usual.' }),
+				pk({ loading: true }, { name: 'Library: loading', trigger: 'The Library tab was opened, or a search changed. Skeleton tiles after 150 ms.' }),
+				pk({}, { name: 'Library: nothing selected', trigger: 'Newest first. Tiles are buttons labelled with filename, size and use, and Enter or Space selects. Images already in this article carry "In this article". "Insert image" is disabled.' }),
+				pk({ sel: 2, alt: '' }, { name: 'Library: selected', trigger: 'One image selected (single selection). Below the grid: thumbnail, filename, dimensions and size, and an optional alt text field. "Insert image" turns on.' }),
+				pk({ sel: 2, alt: 'A kitchen with new oak worktops and white tiles' }, { name: 'Library: alt text entered', trigger: 'Alt text is optional. Empty alt text is inserted as a decorative image. It is not saved on the image.' }),
+				pk({ more: true }, { name: 'Library: loading more', trigger: '"Load more" pressed. The button shows progress and new skeleton tiles appear at the end. Focus stays on the button until the new tiles arrive, then moves to the first new tile.' }),
+				pk({ empty: 'first' }, { name: 'Library: empty', trigger: 'Zero images. "Upload an image" switches to the Upload tab.' }),
+				pk({ q: 'wall', empty: 'search' }, { name: 'Library: no results', trigger: 'Search matched nothing. "Clear search" resets it.' }),
+				pk({ error: true }, { name: 'Library: failed to load', trigger: 'A 500 or network failure. The error shows in the dialog and Try again repeats the request. A 429 uses the same countdown alert as the Media page, and a 401 is handled globally.' }),
+				MS({ kind: 'picker', inArticle: true, name: 'Inserted', trigger: 'Insert image from either tab. The image goes in at the cursor with the chosen alt text, and the article now has unsaved changes.', toasts: [TT('success', 'circle-check', 'Image added', 'Save to keep it in the article.')] }),
+				MS({ kind: 'picker', inArticle: true, picker: false, modal: { k: 'remove' }, name: 'Remove image: confirm', trigger: 'Remove image on an image in the article. It now only removes it from this article, and the copy says the file stays in the library. The confirm button is neutral, not red, because nothing is deleted. Title: "Remove this image from the article?"' }),
+				MS({ kind: 'picker', name: 'Removed', trigger: 'Confirmed. The image leaves the article body, which now has unsaved changes.', toasts: [TT('success', 'circle-check', 'Image removed', 'It\'s still in your library.')] })
+			] },
 			{ label: 'Integration', title: 'Connect your website', route: '/integration', api: 'none (static)', note: 'Written for a developer. The base URL is window.location.origin.', states: [
 				withM({ kind: 'integration', nav: 'integration', crumbs: ['Integration'], mTitle: 'Integration', name: 'Default', trigger: 'Opened from the sidebar or the Home card.' }),
 				withM({ kind: 'integration', nav: 'integration', crumbs: ['Integration'], mTitle: 'Integration', copied: true, name: 'Copied', trigger: 'The base URL was copied. The button reads "Copied" for 2 s and this is announced.' })
 			] },
-			{ label: 'Users', title: 'Users', route: '/users', api: 'GET /v1/user/ · POST /v1/user/invite', note: 'One shared workspace: every user sees the same articles and this same list. Rows have no actions yet. Pending and expired invites show the email address, because a username only exists once the invite is accepted. An invite is Pending until its link is used, Expired after 3 days, and Accepted once the account is created.', states: [
+			{ label: 'Users', title: 'Users', route: '/users', api: 'GET /v1/user/ · POST /v1/user/invite · DELETE /v1/user/invite/:id (pending) · POST /v1/user/invite/:id/renew (pending)', note: 'One shared workspace: every user sees the same articles and this same list. Columns: email, display name, role (owner or admin), invite status and created date. A pending invite can be cancelled and an expired one renewed; accepted accounts have no row actions. An invite is Pending until its link is used, Expired after 3 days, and Accepted once the account is created.', states: [
 				withM({ ...U(), name: 'Default', trigger: 'The list loaded, newest first.' }),
 				withM({ ...U({ users: { loading: true } }), name: 'Loading', trigger: 'The first load, or a retry. Skeletons appear after 150 ms.' }),
 				withM({ ...U({ users: { rows: people.slice(-1), only: true } }), name: 'Only you', trigger: 'Nobody has been invited yet. The admin who registered is always listed.' }),
@@ -178,7 +265,17 @@ class Component extends DCLogic {
 				withM({ ...U({ modal: inv({ loading: true, confirm: 'Sending…', fields: invF('lea.martin@renew.example') }) }), name: 'Invite: sending', trigger: 'Request in flight. The field is disabled and the dialog can\'t be dismissed.' }),
 				withM({ ...U({ modal: inv({ fields: invF('jonas@renew.example', { err: 'This address already has an account.' }) }) }), name: 'Invite: already a user (409)', trigger: 'The email belongs to an existing user. For a live pending invite the message reads "There\'s already a pending invite for this address." An expired invite can be sent again.' }),
 				withM({ ...U({ modal: inv({ notice: 'Couldn\'t send the invite. Try again in a moment.', fields: invF('lea.martin@renew.example') }) }), name: 'Invite: failed', trigger: '500, network failure, or the email couldn\'t be sent. The address stays in the field.' }),
-				withM({ ...U({ users: { rows: [{ email: 'lea.martin@renew.example', 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.' })
+				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' } }), name: 'Cancel invite: confirm', trigger: '"Cancel invite" on a Pending row.' }),
+				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: 'Cancelling…', tone: 'danger', loading: true } }), name: 'Cancel invite: sending', trigger: 'Request in flight. Both buttons are disabled.' }),
+				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({ 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', route: '/settings', api: 'none (static)', note: 'Opened from the sidebar. For now it holds only the Version section.', states: [
+				withM({ kind: 'settings', nav: 'settings', crumbs: ['Settings'], mTitle: 'Settings', name: 'Default', trigger: 'Opened from the sidebar.' })
 			] },
 			{ label: 'Profile', title: 'Profile', route: '/profile', api: 'GET /v1/auth/me · PATCH /v1/user/me (pending) · POST /v1/auth/password-reset', note: 'Opened from the account menu at the bottom of the sidebar. Username, email and password are read-only. The display name is optional, trimmed, and up to 60 characters. Once saved it replaces the username everywhere a person is named: the sidebar, the account menu, the Home greeting, the Users list (with the username beside it) and the emails RenewCMS sends, such as "Marta Alves invited you to RenewCMS". Saving it empty goes back to the username. The reset link uses the same flow as "Forgot password" and ends on the auth board\'s "Choose a new password" screen.', states: [
 				withM({ ...home, home: { sub: 'Here\'s where things stand on your site.', stats, recent }, userMenu: true, name: 'Account menu', trigger: 'The account chip at the bottom of the sidebar. On mobile, the account row in the navigation drawer opens it as a sheet. Escape or a click outside closes it.' }),
@@ -193,7 +290,7 @@ class Component extends DCLogic {
 				P({ reset: 'sent' }, { display: dname, name: 'Reset: sent', trigger: '200. The message stays until the page is left. "Send again" sends a new link and the old one stops working.' }),
 				P({ reset: 'limited' }, { display: dname, name: 'Reset: too many requests (429)', trigger: 'Rate limited. The button is disabled for 5 minutes.' }),
 				P({ reset: 'error' }, { display: dname, name: 'Reset: failed', trigger: '500 or network failure. The button can be pressed again.' }),
-				withM({ ...U(), display: dname, name: 'Display names in the Users list', trigger: 'Accounts with a display name show it first, with the username beside it in grey. Accounts without one show the username.' })
+				withM({ ...U(), display: dname, name: 'Display names in the Users list', trigger: 'The Display name column shows the name when one is set and a dash when not. Your own row follows your saved name.' })
 			] },
 			{ label: 'Global', title: 'Global states', route: 'any route', api: '', note: 'A 401 on any back-office call redirects to /login?redirect=<path>&reason=expired (see "Session expired" on the auth board). A 403 from an unverified account redirects to /register/pending. A 429 appears only on log in and password reset. Toasts sit bottom right on desktop and bottom center on mobile, at most 3 at once. Success and info last 5 s; errors stay until dismissed.', states: [
 				withM({ kind: 'error', nav: '', crumbs: ['Not found'], mTitle: 'Not found', name: '404 inside the shell', trigger: 'An unknown route while logged in. Logged out, the same content appears inside AuthShell.', err: { code: '404', title: 'Page not found', text: 'The link may be mistyped, or the page may have moved.', primary: 'Go to Home', secondary: 'All articles' } }),
@@ -201,8 +298,9 @@ class Component extends DCLogic {
 				withM({ ...L({ offline: true }), name: 'Offline banner', trigger: 'navigator.onLine is false. The banner is shown on every back-office page.' }),
 				withM({ ...L({ toasts: [T('success', 'circle-check', 'Article published', '"Winter checklist for timber windows" is now online.'), T('info', 'info', 'That article no longer exists', 'It was deleted somewhere else, so we removed it from the list.'), T('error', 'circle-x', 'Couldn\'t unpublish', 'The server didn\'t respond. Nothing changed.', 'Retry')] }), name: 'Toast stack', trigger: 'Three at most, newest at the bottom. A fourth pushes out the oldest non-error toast.' })
 			] }
-		]
+		])
 	}
+	finish(gs) { return gs.map(g => ({ ...g, states: g.states.map(st => ({ notMedia: !st.isMedia, ...st, m: { ...st.m } })) })) }
 	renderVals() {
 		const modes = [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']].map(([k, label]) => {
 			const on = this.state.mode === k

docs/design/states.md

@@ -80,6 +80,60 @@ Every state is drawn at desktop and mobile on the screen boards, with final copy
 | Editor | `/article/:id/edit` | Offline | navigator.onLine is false | [editor](screens/editor.md) |
 | Editor | `/article/:id/edit` | Deleted | 204: /article with toast | [editor](screens/editor.md) |
 | Editor | `/article/:id/edit` | Session expired | 401: draft kept in sessionStorage, then /login | [editor](screens/editor.md) |
+| Media | `/media` | Grid, many images | Default view | [media](screens/media.md) |
+| Media | `/media` | Grid, few images | Three images | [media](screens/media.md) |
+| Media | `/media` | List view | The list icon in the toggle | [media](screens/media.md) |
+| Media | `/media` | Loading | The first load, a retry, or a change of search or filter | [media](screens/media.md) |
+| Media | `/media` | Empty library, first run | Zero images | [media](screens/media.md) |
+| Media | `/media` | No results | Search or filter matched nothing | [media](screens/media.md) |
+| Media | `/media` | Hover, focus and keyboard | Hover (second item) darkens the border, adds the pop shadow and reveals the checkbox | [media](screens/media.md) |
+| Media | `/media` | Selection and bulk bar | Checkbox on any item, or Space | [media](screens/media.md) |
+| Media | `/media` | Bulk delete: confirm | Delete in the bulk bar | [media](screens/media.md) |
+| Media | `/media` | Bulk delete: in progress | Requests in flight | [media](screens/media.md) |
+| Media | `/media` | Bulk delete: partly failed | Some requests failed | [media](screens/media.md) |
+| Media | `/media` | Bulk delete: done | 204 for all | [media](screens/media.md) |
+| Media | `/media` | Detail panel: in use | Click or Enter on an item | [media](screens/media.md) |
+| Media | `/media` | Detail panel: unused | Used in nothing | [media](screens/media.md) |
+| Media | `/media` | Detail panel: duplicate | The image has identical copies | [media](screens/media.md) |
+| Media | `/media` | Copy URL | Copy URL | [media](screens/media.md) |
+| Media | `/media` | Rename: dialog | Rename in the panel | [media](screens/media.md) |
+| Media | `/media` | Rename: saving | PATCH in flight | [media](screens/media.md) |
+| Media | `/media` | Rename: validation | Empty or only symbols, on submit or blur | [media](screens/media.md) |
+| Media | `/media` | Rename: failed | 500 or network failure | [media](screens/media.md) |
+| Media | `/media` | Rename: done | 200: the panel title and list update in place | [media](screens/media.md) |
+| Media | `/media` | Delete: unused image | Delete in the panel | [media](screens/media.md) |
+| Media | `/media` | Delete: image in use | Stronger confirm | [media](screens/media.md) |
+| Media | `/media` | Delete: in progress | DELETE in flight | [media](screens/media.md) |
+| Media | `/media` | Delete: failed | 500 or network failure | [media](screens/media.md) |
+| Media | `/media` | Delete: done | 204: the panel closes, the item leaves the grid and focus moves to the next item | [media](screens/media.md) |
+| Media | `/media` | Image already gone (404) | Any action on an image that was deleted elsewhere | [media](screens/media.md) |
+| Media | `/media` | Upload: drag over the page | Files dragged onto the page | [media](screens/media.md) |
+| Media | `/media` | Upload: several files, mixed | Upload button or drop, several files | [media](screens/media.md) |
+| Media | `/media` | Upload: summary | All rows settled | [media](screens/media.md) |
+| Media | `/media` | Upload: rejected files (413, 400) | Type and size are checked in the browser first, so nothing is sent | [media](screens/media.md) |
+| Media | `/media` | Upload: too many requests (429) | Rate limited | [media](screens/media.md) |
+| Media | `/media` | Duplicates: groups | The Duplicates tab | [media](screens/media.md) |
+| Media | `/media` | Duplicates: empty | No groups | [media](screens/media.md) |
+| Media | `/media` | Merge: confirm | "Merge into this one" on floorboards.jpg | [media](screens/media.md) |
+| Media | `/media` | Merge: in progress | Request in flight | [media](screens/media.md) |
+| Media | `/media` | Merge: failed | 500 or network failure | [media](screens/media.md) |
+| Media | `/media` | Merge: conflict (409) | A copy was deleted, or a new copy appeared, since the page loaded | [media](screens/media.md) |
+| Media | `/media` | Merge: done | 200: the group leaves the list | [media](screens/media.md) |
+| Media | `/media` | List failed to load | A 500 or network failure on the list request | [media](screens/media.md) |
+| Media | `/media` | Offline | navigator.onLine is false | [media](screens/media.md) |
+| Media picker | `/article/:id/edit` | Upload tab | The image button in the toolbar | [media-picker](screens/media-picker.md) |
+| Media picker | `/article/:id/edit` | Upload tab: already in your library | A chosen file has the same content as an existing image | [media-picker](screens/media-picker.md) |
+| Media picker | `/article/:id/edit` | Library: loading | The Library tab was opened, or a search changed | [media-picker](screens/media-picker.md) |
+| Media picker | `/article/:id/edit` | Library: nothing selected | Newest first | [media-picker](screens/media-picker.md) |
+| Media picker | `/article/:id/edit` | Library: selected | One image selected (single selection) | [media-picker](screens/media-picker.md) |
+| Media picker | `/article/:id/edit` | Library: alt text entered | Alt text is optional | [media-picker](screens/media-picker.md) |
+| Media picker | `/article/:id/edit` | Library: loading more | "Load more" pressed | [media-picker](screens/media-picker.md) |
+| Media picker | `/article/:id/edit` | Library: empty | Zero images | [media-picker](screens/media-picker.md) |
+| Media picker | `/article/:id/edit` | Library: no results | Search matched nothing | [media-picker](screens/media-picker.md) |
+| Media picker | `/article/:id/edit` | Library: failed to load | A 500 or network failure | [media-picker](screens/media-picker.md) |
+| Media picker | `/article/:id/edit` | Inserted | Insert image from either tab | [media-picker](screens/media-picker.md) |
+| Media picker | `/article/:id/edit` | Remove image: confirm | Remove image on an image in the article | [media-picker](screens/media-picker.md) |
+| Media picker | `/article/:id/edit` | Removed | Confirmed | [media-picker](screens/media-picker.md) |
 | Integration | `/integration` | Default | Page load | [integration](screens/integration.md) |
 | Integration | `/integration` | Copied | Copy clicked (2 s) | [integration](screens/integration.md) |
 | Users | `/users` | Default | List loaded, newest first | [users](screens/users.md) |
@@ -90,6 +144,12 @@ Every state is drawn at desktop and mobile on the screen boards, with final copy
 | Users | `/users` | Invite: already a user | 409 | [users](screens/users.md) |
 | Users | `/users` | Invite: failed | 500, network or mail failure | [users](screens/users.md) |
 | Users | `/users` | Invite sent | 201: dialog closes, Pending row on top, toast | [users](screens/users.md) |
+| Users | `/users` | Cancel invite: confirm, sending, failed | "Cancel invite" on a Pending row; DELETE in flight; 500 or network | [users](screens/users.md) |
+| Users | `/users` | Cancel invite: done | 204: row removed, toast | [users](screens/users.md) |
+| Users | `/users` | Renew invite: sending | "Renew invite" on an Expired row; POST in flight | [users](screens/users.md) |
+| Users | `/users` | Renew invite: done | 200: row Pending on top, toast | [users](screens/users.md) |
+| Users | `/users` | Renew invite: failed | 500 or network: toast, row stays Expired | [users](screens/users.md) |
+| Settings | `/settings` | Default | Opened from the sidebar | [settings](screens/settings.md) |
 | Profile | `/profile` | Account menu | Account chip clicked | [profile](screens/profile.md) |
 | Profile | `/profile` | Loading | Opened by URL before /auth/me returns | [profile](screens/profile.md) |
 | Profile | `/profile` | Default, no display name | First visit | [profile](screens/profile.md) |
@@ -131,6 +191,8 @@ Response bodies are plain text and are never shown. `useApi` throws an `ApiError
 | 500 | Save | "Save failed" + Retry. Changes are kept | SaveStatus |
 | 500 | Publish / unpublish | "Couldn't publish" / "Couldn't unpublish" + Retry | Toast |
 | 500 | Load users | "Couldn't load users. Check your connection and try again." + Try again | Alert |
+| 500 | Cancel invite | "Couldn't cancel the invite. Try again in a moment." The dialog stays open | Notice in dialog |
+| 500 | Renew invite | "Couldn't renew the invite. Try again in a moment." The row stays Expired | Toast |
 | 500 | Invite | "Couldn't send the invite. Try again in a moment." The address stays | Alert in dialog |
 | 500 | Save display name | "Couldn't save your display name. Your text is still here. Try again in a moment." | Alert in card |
 | 500 | Send reset link (profile) | "Couldn't send the link. Check your connection and try again." | Note |
@@ -146,9 +208,24 @@ Added by the Users and Profile screens, none of which exist yet:
 
 - `GET /v1/user/`: the users and their invites, newest first.
 - `POST /v1/user/invite`: sends an invitation email. 201, 409 for an existing account or a live pending invite.
+- `DELETE /v1/user/invite/:id`: cancels a Pending invite. 204. Owner only.
+- `POST /v1/user/invite/:id/renew`: replaces the code, resets the 3 days and created date, and resends the email. 200 with the invite. Owner only.
+- `GET /v1/user/` and `GET /v1/auth/me` gain a `role` ("owner" or "admin"); the list gains `email` on accepted users.
+- `POST /v1/user/invite` becomes owner only, and always creates an admin.
+- `GET /v1/settings`: `{ "version": "..." }`.
 - `PATCH /v1/user/me`: saves the display name. `GET /v1/auth/me` returns it.
 - `GET /v1/auth/invite?c=CODE`: looks up the invite on load, returns `{ email }`, 404 or 410. `POST /v1/auth/invite/accept` takes `{ code, username, password }` and returns 200 with the session cookie, 409 for a taken username, 404 or 410.
 
 Still not supported, so shown disabled or omitted:
 
-Renaming a title (shown read-only, with an explanation in Details), resending the verification email (the pending page explains how to start over), changing the email or username, listing or deleting individual images, removing users, revoking invites and any kind of role. Changing the password while logged in works only through the emailed reset link on the Profile page.
+Renaming a title (shown read-only, with an explanation in Details), resending the verification email (the pending page explains how to start over), changing the email or username, removing users, promoting or demoting anyone, and any role other than owner and admin. Changing the password while logged in works only through the emailed reset link on the Profile page.
+
+Added by the Media screens, none of which exist yet:
+
+- `GET /v1/media/?q=&filter=&sort=&limit=&cursor=&hash=`: the library, newest first by default. `hash` (SHA-256 hex) returns only the images with that content, which is how the browser checks for a duplicate before uploading. Each item carries `id`, `filename`, `url`, `size`, `content_type`, `width`, `height` (null for SVG), `uploaded_by`, `created_at`, `used_in` (count) and `duplicate` (bool). The response also carries the counts for the Unused and Duplicates tabs.
+- `POST /v1/media/`: multipart `file`, no article id. 201 with the item. It always stores the file: the duplicate check happens in the browser (hash with `crypto.subtle`, then `GET /v1/media/?hash=`), and when `crypto.subtle` is unavailable the check is skipped and any duplicate shows up under Duplicates. The server keeps each image's SHA-256. 413 for over 10 MB, 415 for another type, 400 for an unreadable image, 429 with `Retry-After`.
+- `PATCH /v1/media/{id}`: `{ filename }`, the extension is kept and the URL does not change. 200, 404.
+- `DELETE /v1/media/{id}`: 204, 404. Deleting an image that is in use is allowed.
+- `POST /v1/media/merge`: `{ keep_id, merge_ids }`. Rewrites article bodies from the merged copies' URLs to the kept image's URL, then deletes the copies. 200 with `{ articles_updated, merged }`, 404, 409 when a listed copy is gone or the group changed.
+- `GET /v1/media/{id}/usage`: `[{ id, title, published }]`, read from article bodies.
+- Images no longer belong to an article, and deleting an article no longer deletes images. `POST /v1/article/{id}/image` and `DELETE /v1/article/{id}/image/{imageId}` are replaced by the endpoints above.

docs/release-notes.md

@@ -0,0 +1,29 @@
+# Release notes format
+
+Name: `vX.Y.Z-beta - Short theme` (theme is 2 to 6 words, sentence case).
+Tag: `vX.Y.Z-beta`, always with the `v`.
+
+Body, in this order. Omit a section only when it would be empty, except Upgrading, which is always present.
+
+1. Intro: one or two plain sentences on what the release is about. No heading.
+2. `## New`: user-visible features. Group with a bold title line (`**Group name**`) followed by bullets.
+3. `## Improvements and fixes`: flat bullets.
+4. `## API`: one bullet per endpoint change, `METHOD /v1/path` in backticks, then behaviour and status codes. Prefix breaking or shape changes with "Changed:".
+5. `## Under the hood`: dependencies, tests, docs, architecture. Only when relevant to contributors.
+6. `## Upgrading`: binary replacement, schema/migration changes, new env vars, behaviour changes for existing installs.
+7. `## Known limitations`: only when there are real ones.
+
+Rules: bullets are full sentences ending with a period; user-facing wording, no commit prefixes; sentence-case headings; no horizontal rules, no metadata block, no "Pre-1.0" boilerplate (the prerelease flag says it); every release ships all 6 binaries from `task release`.
+
+## 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 <binary>` (one `--asset` per binary), after `task release`.
+
+| Tag | Name |
+| --- | --- |
+| `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 |

docs/releases/v2.0.0-beta.md

@@ -0,0 +1,28 @@
+A ground-up rewrite of RenewCMS's backend architecture and frontend. The Go-template UI is replaced by a Vue 3 single-page app embedded in the same binary.
+
+## New
+
+**Vue 3 single-page app**
+- Built with Vite, Pinia and vue-router, and embedded into the single binary. There is no separate frontend deployment.
+- The UI uses Nuxt UI (migrated from an initial PrimeVue base) with shared design tokens.
+- New screens: login, registration, home and navigation, article list, article editor (ProseMirror-based) with a creation modal, image upload, and an account and integration screen.
+- A typed API client and a session store handle 401, unverified 403, 429 and offline states the same way everywhere.
+
+**Domain-driven backend**
+- `internal/domain` (entities, sentinel errors, repository interfaces) is isolated from persistence (GORM), mailer and API concerns, with a strict inward dependency rule.
+- Business logic moved out of handlers and the persistence layer into use cases: article rules, image validation, password and code hashing, not-found handling, and session invalidation on password reset.
+- The composition root (`api/dependecyInjection.go`) wires the database, repositories and use cases explicitly. Runtime settings are read once at startup.
+- The auth handler is split into dedicated registration, login, verification and password-reset handlers, each with per-client rate limiting on the public routes.
+
+## Improvements and fixes
+- API responses no longer leak password hashes, verification or reset code hashes, or their expiry dates.
+- Article read rules now apply the same way to the single-article and list endpoints: the public sees online articles only, verified users also see offline ones.
+- Registration only opens when no verified account exists, and deleting a user frees its username and email for reuse.
+- Rate limiting now keys off the real peer IP.
+
+## Under the hood
+- Use cases are covered by a full in-memory fake test suite with clean gremlins mutation coverage.
+- Vitest and Vue Test Utils run the frontend tests, and an automated visual-parity check compares the app to the design source boards.
+
+## Upgrading
+- Deployment is unchanged: a single binary, systemd and a reverse proxy. Replace the binary and restart.

docs/releases/v2.1.0-beta.md

@@ -0,0 +1,20 @@
+This release adds image upload to the article editor and fixes several rough edges from v2.0.0-beta.
+
+## New
+
+**Image upload in the article editor**
+- The editor's Image toolbar button, or dropping a file onto the editor, opens an upload dialog.
+- Choose or drop a PNG, JPEG, WEBP or SVG file up to 10 MB. Progress is shown live, and the image is inserted at the cursor as soon as it is uploaded.
+- Invalid files (wrong type or too large) are rejected in the browser before anything is sent. The same wording is reused if the server rejects a file the browser let through.
+- A failed upload leaves the article untouched and offers a retry.
+
+## Improvements and fixes
+- Uploaded images now render in the editor and the article body. The dev server proxy was missing a route for the endpoint that serves them.
+- Clicking a row in the article list now opens the editor. The row-click handler was reading the wrong argument.
+- The article details panel's copy URL control now copies the link and confirms with a toast.
+- The user menu's dropdown trigger no longer misrenders when the sidebar is collapsed.
+- The sidebar's collapsed or expanded state is remembered across reloads.
+- Smaller styling and layout fixes in the article details panel, editor toolbar and new-article dialog.
+
+## Upgrading
+- Replace the binary and restart.

docs/releases/v2.2.0-beta.md

@@ -0,0 +1,32 @@
+This release reworks image handling in the article editor and brings the password-reset screens up to the new design.
+
+## New
+
+**Crop and resize before upload**
+- A Crop and resize step now sits between picking an image and uploading it. It applies to JPEG, PNG and WEBP files. SVG files still upload straight away.
+- Move or resize the crop frame by dragging it or its handles. Arrow keys nudge it by 1 px, and Shift+arrow resizes it by 1 px.
+- Aspect ratios: Original, Free, 16:9, 4:3 and 1:1.
+- Rotate and Reset buttons.
+- Output width presets: Original, 1600 px (default), 1200 px and 800 px. The output is never wider than the crop frame.
+- A live line shows the final pixel size and an approximate file size before you upload.
+
+**Remove images from the editor**
+- Images in an article can now be removed from the editor. The image file and its database row are both deleted.
+- The editor renders images as a dedicated image node.
+
+**Password-reset screens**
+- The Forgot password and Reset password screens follow the new design and cover every state in the spec.
+
+## API
+- `DELETE /v1/article/{id}/image/{imageId}` (authenticated) deletes an image. It returns 204 on success, 404 for an unknown article or image, and 400 for an ID that isn't a valid uint32.
+- Changed: `POST /v1/article/{id}/image` now returns `{"id": …, "location": …}` instead of `{"location": …}`. The change is additive, but anything parsing the response strictly should be checked.
+
+## Under the hood
+- The editor now depends on `@tiptap/extension-image`, `@tiptap/pm` and `@tiptap/vue-3`, all pinned to 3.31.3.
+- New feature specs and QA procedures cover crop and resize, image removal and both reset screens.
+- New Go HTTP tests cover image deletion, and Vitest specs were added and updated for the editor and reset views.
+- The visual-check states cover the new screens, and the design docs are updated to match.
+
+## Upgrading
+- No new environment variables and no schema changes.
+- Replace the binary and restart.

docs/releases/v2.3.0-beta.md

@@ -0,0 +1,43 @@
+RenewCMS is no longer a one-person tool. The admin can now invite other people, each with their own account and the exact same access, and everyone can set a display name.
+
+## New
+
+**Invite other users**
+- A new Users page in the back-office lists everyone who can sign in, plus pending and expired invites, with a status badge for each.
+- Invite user sends an email with a personal link. The link works once and expires after 3 days.
+- Invited people choose their own username and password on a new Accept invite screen, and land on Home already logged in.
+- Everyone shares one workspace: same articles, same images, same access.
+- Registration stays closed to everyone who wasn't invited.
+- A new invitation email template supports light and dark mode.
+
+**Display name and profile**
+- A new Profile page is opened from the account menu at the bottom of the sidebar.
+- Set an optional display name (up to 60 characters). It replaces your username in the sidebar, the account menu, the Home greeting, the Users list and the emails RenewCMS sends. Clear it to go back to your username.
+- Send yourself a password reset link from the Profile page.
+- The account chip now opens a menu with Profile and Log out, and keeps the System, Light and Dark theme choice.
+
+## Improvements and fixes
+- Accepting an invite is atomic: two simultaneous requests with the same link can only create one account.
+- The Accept invite screen shows a retry option instead of a permanent spinner when the invite can't be loaded.
+- Invite email validation is now the same in the browser and on the server.
+- The mobile account sheet reports its open state correctly and returns focus to the account chip when it closes.
+- A failed password reset email is now logged on the server. The response is unchanged.
+
+## API
+- `PATCH /v1/user/me` sets the display name.
+- `GET /v1/auth/me` and `POST /v1/auth/verify` now return `display_name`.
+- `GET /v1/user/` lists users and invites.
+- `POST /v1/user/invite` sends an invite and is rate limited.
+- `GET /v1/auth/invite` and `POST /v1/auth/invite/accept` power the Accept invite screen.
+
+## Under the hood
+- Deleting a user now goes through the persistence model.
+
+## Upgrading
+- Download the binary for your platform, replace the old one and restart. Your `.env` and SQLite file stay as they are.
+- The database migrates itself on startup. It adds a `display_name` column to `users` and a new `invites` table. Existing data is untouched. Back up your SQLite file first as a precaution.
+- Invitation emails need working SMTP settings, like the verification and reset emails already do. No new environment variables.
+
+## Known limitations
+- Users and invites can't be removed, revoked or resent yet, and there are no roles: everybody is an equal admin.
+- Invited addresses that already have an account are rejected. An expired invite can be replaced by sending a new one.

docs/releases/v2.4.0-beta.md

@@ -0,0 +1,42 @@
+RenewCMS now knows who owns the workspace. The owner manages invites, including cancelling and renewing them, while every admin keeps the same access to content. A new Settings page shows which build is running.
+
+## New
+
+**Owner and admin roles**
+- The first registered account is the owner. Everyone who joins through an invite is an admin.
+- Only the owner can send, cancel or renew invites. Admins keep the same access to articles, images, the Users list, their Profile and Settings.
+- There is exactly one owner. Roles can't be changed or transferred yet.
+- Existing installs are migrated automatically: the oldest account becomes the owner and every other account an admin.
+
+**Invite management**
+- Pending invites get a Cancel invite action on the Users page. The invite link stops working.
+- Expired invites get a Renew invite action. It sends a new email with a new personal link valid for 3 days, and the old link stays dead.
+
+**Users list**
+- The Users table and the mobile card list now show Email, Display name (a dash when empty), Role, Invite status and Created.
+- A new role badge tells the owner and admins apart.
+
+**Settings page**
+- A new Settings page at `/settings` sits after Integration in the sidebar and the mobile drawer. It shows the version of the running build.
+
+## Improvements and fixes
+- The desktop account menu's icons, labels and check mark are now centred in their 32 px rows.
+- The account menu follows the redesigned board: System, Light and Dark stay in both the menu and the mobile sheet.
+- The article editor's toolbar scrolls horizontally on mobile instead of overflowing.
+- The editor's last-saved label now moves from minutes to hours and days instead of counting minutes only.
+
+## API
+- `DELETE /v1/user/invite/{id}` cancels a pending invite and returns 204.
+- `POST /v1/user/invite/{id}/renew` returns 200 with a new code, sets `expires_at` to now plus 3 days and `created_at` to now, and resends the invitation email.
+- Changed: `POST /v1/user/invite` is now owner-only, like the two endpoints above. Other users get 403 with "Only the owner can do this."
+- `GET /v1/settings` (authenticated, verified users) returns the running build's version.
+- Changed: user objects from `GET /v1/user/`, `GET /v1/auth/me` and `POST /v1/auth/verify` now include `role` (`owner` or `admin`).
+
+## Upgrading
+- Replace the binary and restart. Your `.env` and SQLite file stay as they are.
+- The database migrates itself on startup. It adds a `role` column to `users` and fills it in: the account with the lowest id becomes the owner, every other account an admin. A database that already has roles is left unchanged. Back up your SQLite file first as a precaution.
+- Behaviour change: admins who joined through a v2.3.0-beta invite can no longer send invites.
+- No new environment variables.
+
+## Known limitations
+- No endpoint changes or transfers the owner role, and users can't be removed yet.

docs/releases/v2.5.0-beta.md

@@ -0,0 +1,55 @@
+RenewCMS now has a media library. Every uploaded image lives in one place where you can browse, rename, delete and clean up duplicates, and the article editor can reuse an image you already uploaded.
+
+## New
+
+**Media page**
+- A new Media page at `/media` sits between Articles and Users in the sidebar and the mobile drawer.
+- Browse the library as a grid or a list, with search by filename, sort by newest, oldest, name or largest, and Unused and Duplicates tabs with counts.
+- Open an image to see its type, size, dimensions, uploader, upload date and URL, copy its URL, and see which articles use it.
+- Rename an image. Only the filename changes, the URL stays the same, so articles keep working.
+- Delete one image or many at once. Deleting an image that is still used asks for a stronger confirmation and lists the articles that will show a broken image.
+- Upload several images at once, with a progress row for each one and a summary. Drop files anywhere on the page.
+- When you upload a file that is already in the library, you are told so and can use the existing image instead.
+- A Duplicates view groups identical images and merges them into one. Articles that used the other copies switch to the one you keep.
+
+**Image picker in the editor**
+- The editor's "Add an image" dialog now has Upload and Library tabs. Pick an image you already uploaded, set its alt text and insert it.
+- Images already in the article are tagged "In this article".
+- Removing an image from an article now only removes it from that article. The file stays in the library.
+
+## Improvements and fixes
+- Deleting an article no longer deletes its images, and its confirmation says so.
+- An image that no longer exists shows a "This image is no longer available" placeholder in the editor, with a way to remove it, instead of a collapsed pixel.
+- Deleted images stop showing as soon as you open an article, not only after a refresh. Uploaded images are now revalidated by the browser instead of being cached for a year.
+- The editor's Images row in the article details counts the images in the article body.
+
+## API
+- `GET /v1/media/` lists the library with `q`, `filter` (`all`, `unused`, `duplicates`), `sort`, `limit`, `cursor` and `hash` parameters. Each item carries its size, type, dimensions, uploader, `used_in` count and a `duplicate` flag, and the response carries the counts for each tab.
+- `POST /v1/media/` uploads an image (multipart `file`). It returns 201, 400 for an unreadable image, 413 for a file over 10 MB and 415 for another type.
+- `PATCH /v1/media/{id}` renames an image and keeps its extension and URL. It returns 200, or 404.
+- `DELETE /v1/media/{id}` deletes an image, even when articles use it. It returns 204, or 404.
+- `POST /v1/media/merge` takes `keep_id` and `merge_ids`, switches the articles that use the other copies to the kept image, deletes the copies and returns how many articles changed. It returns 409 when a copy is gone or the images are no longer identical.
+- `GET /v1/media/{id}/usage` lists the articles that use an image, with their title and whether they are online.
+- Changed: images no longer belong to an article. `GET /v1/article/{id}` no longer returns `images`, and deleting an article keeps its images.
+- Changed: `DELETE /v1/article/{id}/image/{imageId}` and `POST /v1/article/{id}/image` are removed, replaced by the `/v1/media/` endpoints.
+- Changed: `/static/uploadedImages/*` now sends `Cache-Control: public, no-cache` instead of a one-year `immutable` lifetime.
+
+## Under the hood
+- The image domain, repository, use cases and handlers were rebuilt around a library model, keeping the domain, use-case and infrastructure layering.
+- WEBP dimensions are read with `golang.org/x/image`. `golang.org/x/sys` and `golang.org/x/text` were updated with it.
+- New feature specs and tests cover the media API, the Media page, uploads, duplicates and the editor picker.
+
+## Upgrading
+- Replace the binary and restart. Your `.env`, SQLite file and uploads directory stay as they are, and there are no new environment variables.
+- The database migrates itself on startup. It adds columns to the images table, and a one-time backfill reads each existing image file to fill in its size, type, dimensions and content hash. An image whose file is missing is left alone. Back up your SQLite file and uploads directory first as a precaution.
+- Existing images become part of the library and are no longer tied to an article. The old article link is no longer used.
+- Clients that call the removed article image endpoints, or read `images` from an article, must switch to `/v1/media/`.
+- Browsers keep serving images they cached before the upgrade until they are reloaded once.
+
+## Known limitations
+- The Media page shows only the first 100 images.
+- There is no rate limit on `/v1/media/` yet.
+- The library list loads every article and image in memory, so very large libraries will be slow.
+- A file whose extension doesn't match its content type, such as a JPEG labelled as PNG, is rejected.
+- Searching filenames with non-ASCII letters is case-sensitive.
+- Uploaded SVGs are served as they are. They are sandboxed with a restrictive content security policy, but not sanitised.

features/accept_invitation.feature

@@ -26,7 +26,8 @@ Feature: An invited person accepts their invitation and gets a verified account
     And error responses are plain text from http.Error, success responses are JSON
     And accepting creates a user with the invite's email (already lower case), the chosen username,
       the hashed password, is_verified true, an empty verification code, and an empty display name
-    And the created user has the same access as any other verified user: no roles, no ownership
+    And the created user is an admin: same access to articles, the users list and Settings, but
+      cannot invite
     And the jwt cookie is set exactly as registration sets it: HttpOnly, path "/", 24 hours, with
       claims user_id and token_version, and Secure in production
 

features/articles_list.feature

@@ -59,9 +59,9 @@ Feature: Articles list screen
       remaining articles, and raises an info toast (icon info, id "article-not-found-{id}"): title
       "That article no longer exists" text "It was deleted somewhere else, so we removed it from
       the list."
-    And "Delete…" opens ConfirmDialog: title "Delete this article?" text "\"{title}\" and its
+    And "Delete…" opens ConfirmDialog: title "Delete this article?" text "\"{title}\" will be
-      {n} images will be deleted. This can't be undone." (a components.md convention: the row's
+      deleted. Its images stay in your library. This can't be undone." (the second sentence is
-      title plus its image count, "and its image" for exactly 1 and no image clause at all for 0),
+      present only when the article body holds at least one image),
       "Cancel" and "Delete article" (danger); while the DELETE request is in flight the dialog
       cannot be dismissed by Cancel, Esc or a backdrop click, both buttons are disabled, the
       confirm button reads "Deleting…" with a loading indicator, and aria-busy is set
@@ -72,7 +72,7 @@ Feature: Articles list screen
     And a successful delete (204) closes the dialog, removes the row, moves focus to the next row
       (or the page heading if the deleted row was last), recomputes the tab counts, and raises a
       success toast (icon circle-check, id "article-deleted-{id}"): title "Article deleted" text
-      "\"{title}\" and its images are gone."; this is also where a delete initiated from the editor
+      "\"{title}\" is gone."; this is also where a delete initiated from the editor
       ends up
     And the list, sorted by last updated with the most recently updated article first, holds
       these 6 articles by default: id 1 "How we price a bathroom renovation" (online, updated "2
@@ -231,7 +231,7 @@ Feature: Articles list screen
     Given the Default state has loaded, and id 4 "Winter checklist for timber windows" has 3 images
     When the user chooses "Delete…" from id 4's row menu
     Then ConfirmDialog opens: title "Delete this article?" text "\"Winter checklist for timber
-      windows\" and its 3 images will be deleted. This can't be undone.", "Cancel" and "Delete
+      windows\" will be deleted. Its images stay in your library. This can't be undone.", "Cancel" and "Delete
       article" (danger)
 
   Scenario: Delete in progress — the dialog cannot be dismissed while the request is in flight
@@ -256,4 +256,4 @@ Feature: Articles list screen
     Then the dialog closes, id 4's row is removed from the list, and focus moves to the next row
     And the tabs read "All 5" "Online 4" "Drafts 1"
     And a success toast appears: icon circle-check, id "article-deleted-4", title "Article
-      deleted", text "\"Winter checklist for timber windows\" and its images are gone."
+      deleted", text "\"Winter checklist for timber windows\" is gone."

features/articles_list.qa.md

@@ -114,7 +114,7 @@ as listed), unless a scenario's Examples row substitutes a smaller fixture.
 18. **Deleted** — continuing from 16 (a fresh attempt), resolve the DELETE 204; assert the dialog
     closes, id 4's row is removed, focus moves to the next row; assert tabs read "All 5" "Online
     4" "Drafts 1"; assert a toast with id "article-deleted-4", icon circle-check, title "Article
-    deleted", text "\"Winter checklist for timber windows\" and its images are gone."
+    deleted", text "\"Winter checklist for timber windows\" is gone."
 
 ## Visual (manual verification — desktop and mobile, light and dark)
 

features/dashboard_shell_branding.feature

@@ -17,7 +17,7 @@ Feature: DashboardShell wordmark, sidebar collapse and the UserMenu
       AuthShell uses) followed by the "RenewCMS" wordmark text, not the plain
       <span class="font-semibold">RenewCMS</span> the shell renders today
     And the sidebar's #default slot is a UNavigationMenu orientation="vertical" :collapsed bound
-      to the sidebar's own collapsed state, with items Home, Articles, Users and Integration, in that order
+      to the sidebar's own collapsed state, with items Home, Articles, Users, Integration and Settings, in that order
     And the sidebar's #footer slot renders a UserMenu component, not the plain
       <span>Log out</span> text the shell renders today
     And UserMenu is the account menu specified in features/profile_page.feature, anchored to a

features/delete_article_cascades_images.feature

@@ -1,84 +0,0 @@
-Feature: Deleting an article also deletes its images
-
-  As an authenticated RenewCMS user managing the CMS
-  I want deleting an article to also delete every image attached to it
-  So that removing an article doesn't leave orphaned image rows and files behind,
-    and so that an id that doesn't exist still answers 404 the same way every other
-    article write does
-
-  Background:
-    Given internal/domain/article.Article carries Images []*image.Image, populated by
-      ArticleRepository.Get via Preload("Images")
-    And internal/domain/image.Repository already exposes Delete(id uint32) error, which
-      on the real ImageRepository also removes the uploaded file from UPLOAD_DIR
-    And before this slice, DeleteArticleUseCase.DeleteArticle only called
-      articleRepository.Delete(id) and never touched image.Repository, so an article's
-      images were never deleted along with it
-    And this slice changes NewDeleteArticleUseCase to also take an image.Repository, and
-      changes DeleteArticleUseCase.DeleteArticle(id) to look up the article, delete every
-      image in its Images slice through image.Repository.Delete, and only then delete the
-      article itself through article.Repository.Delete
-    And this slice rewires api/dependecyInjection.go so
-      useCases.NewDeleteArticleUseCase(repos.ArticleRepo, repos.ImageRepo) supplies both
-      repositories
-    And DELETE /v1/article/{id} keeps sitting behind the jwtauth Verifier and
-      Authenticator group in api/router.go, unchanged from
-      features/write_not_found_errors.feature
-    And DELETE /v1/article/{id} keeps answering 204 with an empty body on success and 404
-      with body apperr.ArticleNotFoundErrorMessage for an id absent from the article
-      repository, backed by errors.Is(err, article.ErrArticleNotFound), unchanged from
-      features/write_not_found_errors.feature
-    And no image HTTP endpoint is mounted in api/router.go as of this slice, so cascading
-      image deletion is only observable through the image repository's state, not through
-      a separate HTTP call
-    And the use case deletes images in the order they appear in the article's Images
-      slice, and aborts on the first image.Repository.Delete error, leaving the article
-      and any not-yet-deleted images untouched, and answering the same generic 500 the
-      DeleteArticle handler already falls back to on any non-not-found error
-
-  Scenario: Deleting an article with images removes the article and every one of its images
-    Given a valid jwt cookie for a user with id 1
-    And the article repository contains an article with id 1 whose Images slice holds
-      image id 10 and image id 11
-    And the image repository contains images with id 10 and id 11
-    When the client sends DELETE /v1/article/1 with that cookie
-    Then the response status is 204
-    And the article repository no longer contains an article with id 1
-    And the image repository no longer contains an image with id 10 or id 11
-
-  Scenario: Deleting an article with no images still succeeds
-    Given a valid jwt cookie for a user with id 1
-    And the article repository contains an article with id 2 whose Images slice is empty
-    When the client sends DELETE /v1/article/2 with that cookie
-    Then the response status is 204
-    And the article repository no longer contains an article with id 2
-    And no call reaches the image repository's Delete method
-
-  Scenario: Deleting an unknown article still answers 404 and deletes no images
-    Given a valid jwt cookie for a user with id 1
-    And the article repository has no article with id 9999
-    When the client sends DELETE /v1/article/9999 with that cookie
-    Then the response status is 404
-    And the response body is the text "Article not found"
-    And no call reaches the image repository's Delete method
-
-  Scenario: Deleting an article still requires authentication
-    Given no jwt cookie is sent
-    And the article repository contains an article with id 1 whose Images slice holds
-      image id 10
-    When the client sends DELETE /v1/article/1 without a cookie
-    Then the response status is 401
-    And the article repository still contains the article with id 1
-    And the image repository still contains the image with id 10
-
-  Scenario: A failure deleting one of an article's images aborts the whole delete
-    Given a valid jwt cookie for a user with id 1
-    And the article repository contains an article with id 3 whose Images slice holds
-      image id 20 followed by image id 21
-    And the image repository contains images with id 20 and id 21
-    And the image repository's Delete fails for image id 20
-    When the client sends DELETE /v1/article/3 with that cookie
-    Then the response status is 500
-    And the response body is the text "Failed to delete article"
-    And the article repository still contains the article with id 3
-    And the image repository still contains the image with id 21

features/delete_article_cascades_images.qa.md

@@ -1,67 +0,0 @@
-# QA procedure: delete_article_cascades_images
-
-Package: `test` (black-box, extending `article_test.go`).
-
-## Setup shared by every case
-1. Call `validator.InitValidator()` once.
-2. Reuse `mockArticleRepo` (`test/article_test.go`) and `mockImageRepo`
-   (`test/image_test.go`) as-is. Extend `mockArticleRepo` seeding so a seeded article's
-   `Images []*image.Image` can hold pointers into the same `mockImageRepo.images` map used
-   by the test, so deleting through the article side and asserting through the image side
-   observe the same state.
-3. Add a call counter (or reuse the existing `failSwitch`/call-tracking pattern already in
-   `test/`) on `mockImageRepo.Delete` so a scenario can assert it was never called, and reuse
-   `mockImageRepo.fail` (the existing `failSwitch`) to make `Delete` fail for a specific
-   image id.
-4. Wire the real use cases over the fakes: `useCases.NewCreateArticleUseCase`,
-   `useCases.NewGetArticleUseCase`, `useCases.NewListArticlesUseCase`,
-   `useCases.NewUpdateArticleUseCase`, and the new two-argument
-   `useCases.NewDeleteArticleUseCase(articleRepo, imageRepo)`. Build `article.NewHandler(...)`
-   with the same constructor shape it already has (the use case's internal dependency count
-   changes, not the handler's).
-5. Build a test `jwtauth.New("HS256", []byte("test-secret"), nil)`.
-6. Mount the routes on a fresh `chi.NewRouter()` mirroring `api/router.go`'s current shape:
-   `GET /` under `jwtauth.Verifier` only; `GET /{id}`, `POST /`, `DELETE /{id}`,
-   `PATCH /{id}`, `PATCH /{id}/publish`, `PATCH /{id}/unpublish` under `jwtauth.Verifier` +
-   `jwtauth.Authenticator`.
-7. Mint a valid jwt cookie for user id 1: `token.Encode(map[string]any{"user_id": uint32(1)})`,
-   set as the `jwt` cookie on the relevant `httptest.NewRequest`.
-
-## HTTP checks
-8. Seed `imageRepo.images[10]` and `imageRepo.images[11]`, then seed
-   `articleRepo.articles[1] = article.Article{ID: 1, Title: "Backyard Renovation Update",
-   Images: []*image.Image{imageRepo.images[10], imageRepo.images[11]}}` (pointers into the
-   same map). Send `DELETE /v1/article/1` with the valid cookie -> status `204`; assert
-   `articleRepo.articles` no longer has key `1`; assert `imageRepo.images` no longer has
-   keys `10` or `11`.
-9. Seed `articleRepo.articles[2] = article.Article{ID: 2, Title: "Draft: Kitchen Remodel"}`
-   with a nil/empty `Images` slice. Send `DELETE /v1/article/2` with the valid cookie ->
-   status `204`; assert `articleRepo.articles` no longer has key `2`; assert the image-delete
-   call counter is `0`.
-10. Empty `articleRepo`, empty `imageRepo`. Send `DELETE /v1/article/9999` with the valid
-    cookie -> status `404`, body `"Article not found\n"`; assert the image-delete call
-    counter is `0`.
-11. Seed `imageRepo.images[10]` and `articleRepo.articles[1]` with `Images` holding image id
-    10, per step 8's pattern. Send `DELETE /v1/article/1` with **no** cookie -> status `401`;
-    assert `articleRepo.articles[1]` is still present and `imageRepo.images[10]` is still
-    present.
-12. Seed `imageRepo.images[20]` and `imageRepo.images[21]`, then seed
-    `articleRepo.articles[3] = article.Article{ID: 3, Title: "Kitchen Progress Photos",
-    Images: []*image.Image{imageRepo.images[20], imageRepo.images[21]}}` (image 20 before
-    image 21 in the slice). Arm `imageRepo.fail` so `Delete` returns an error only when
-    called with id `20` (leave id `21` unarmed). Send `DELETE /v1/article/3` with the valid
-    cookie -> status `500`, body `"Failed to delete article\n"`; assert
-    `articleRepo.articles[3]` is still present; assert `imageRepo.images[21]` is still
-    present (never reached because the delete aborted on image `20` first).
-
-## Manual verification (not exercised by the Go test)
-- Real cascading delete against a real SQLite file and real `UPLOAD_DIR`: confirm that after
-  `DELETE /v1/article/{id}` on a real running instance, the uploaded image files under
-  `UPLOAD_DIR` for that article are gone from disk and the `images` table no longer holds
-  those rows, and that no orphaned rows are left behind in the `article_images` join table.
-  Not exercised by `task test` (fakes only); requires `task dev` or a built `task build`
-  binary with a scratch DB/upload dir.
-- SPA-visible behaviour: confirm the back-office article deletion flow (if/when one exists)
-  reflects that any images shown for that article are gone too. No such UI exists yet as of
-  this slice.
-- No SMTP involvement.

features/delete_article_keeps_images.feature

@@ -0,0 +1,39 @@
+Feature: Deleting an article never deletes images
+
+  As an authenticated RenewCMS user
+  I want deleting an article to leave the media library alone
+  So that an image used by other articles, or waiting in the library, is never lost
+
+  Background:
+    Given images belong to the library and internal/domain/article.Article carries no Images
+    And DeleteArticleUseCase depends only on article.Repository and calls its Delete
+    And api/dependecyInjection.go builds useCases.NewDeleteArticleUseCase(repos.ArticleRepo)
+    And DELETE /v1/article/{id} stays behind the same jwtauth group, answering 204 with an
+      empty body, 404 with apperr.ArticleNotFoundErrorMessage for errors.Is(err,
+      article.ErrArticleNotFound), and the generic 500 "Failed to delete article" otherwise
+
+  Scenario: Deleting an article leaves every image it used
+    Given a valid jwt cookie for user 1
+    And article 1 whose body contains the urls of images 10 and 11
+    And the image repository contains images 10 and 11
+    When the client sends DELETE /v1/article/1
+    Then the response status is 204
+    And the article repository no longer contains article 1
+    And the image repository still contains images 10 and 11 and Delete was never called
+
+  Scenario: Deleting an unknown article is 404 and touches no image
+    Given a valid jwt cookie for user 1 and no article 9999
+    When the client sends DELETE /v1/article/9999
+    Then the response status is 404 and the body is "Article not found"
+    And the image repository is untouched
+
+  Scenario: Deleting still requires authentication
+    Given no jwt cookie
+    When the client sends DELETE /v1/article/1
+    Then the response status is 401 and article 1 and image 10 still exist
+
+  Scenario: An article repository failure is 500 and everything stays
+    Given the article repository's Delete fails
+    When the client sends DELETE /v1/article/1 with a valid cookie
+    Then the response status is 500 and the body is "Failed to delete article"
+    And the image repository is untouched

features/delete_article_keeps_images.qa.md

@@ -0,0 +1,12 @@
+# QA procedure: delete_article_keeps_images
+
+Package: `test` (black-box). Wire `useCases.NewDeleteArticleUseCase(articleRepo)` (single argument) with the other article use cases and mount as in the retired `delete_article_cascades_images.qa.md`: `Verifier` plus `Authenticator`, `RequireCurrentToken`, `RequireVerifiedUser`, jwt cookie for user id 1. Seed images 10 and 11 in `mockImageRepo` and the article body with their urls. Call `validator.InitValidator()` first.
+
+## HTTP checks
+1. `DELETE /v1/article/1` with a valid cookie -> 204, `articleRepo` no longer holds article 1, `imageRepo.images` still holds 10 and 11 and `deleteCalls` is empty.
+2. `DELETE /v1/article/9999` -> 404, body `"Article not found\n"`, image repo untouched.
+3. `DELETE /v1/article/1` without cookie -> 401, article and images still present.
+4. Article fake's `Delete` armed to fail -> 500, body `"Failed to delete article\n"`, image repo untouched.
+
+## Manual verification
+With a real SQLite file and `UPLOAD_DIR`, delete an article and confirm the image files and rows remain and still load. No SMTP.

features/editor_image_crop_resize.feature

@@ -9,8 +9,10 @@ Feature: Crop and resize step in the editor's image uploader
     Given ImageUploader inserts a crop-and-resize step between the idle file picker and the
       upload, for any JPEG, PNG or WEBP that already passed the browser validation described in
       features/editor_image_upload.feature; that feature's idle, dragging-over, rejected,
-      uploading, inserted and failed states and its POST /v1/article/{articleId}/image contract
+      uploading, inserted and failed states and its POST /v1/media/ contract are unchanged and
-      are unchanged and out of scope here
+      out of scope here
+    And the hash lookup from features/editor_image_upload.feature runs before this step opens,
+      so the step only opens for a file with no match, or after "Upload anyway"
     And an SVG file skips this step entirely and uploads immediately, as before
     And opening the step retitles the modal from "Add an image" to "Crop and resize", with the
       description "{filename} · {size}" (e.g. "north-wall.jpg · 3.9 MB")
@@ -32,8 +34,8 @@ Feature: Crop and resize step in the editor's image uploader
       crop is narrower than the chosen width, an info row reads "The crop is {crop width} px
       wide, so it's uploaded at that size. Enlarging it would make it blurry."
     And the footer offers "Choose another file" (discards this step and returns to the idle file
-      picker with no adjustments carried over) and "Upload image" (uploads the cropped, resized
+      picker, with the tabs, with no adjustments carried over) and "Upload image" (uploads the cropped, resized
-      file through the unchanged POST /v1/article/{articleId}/image flow)
+      file through the unchanged POST /v1/media/ flow)
     And "Rotate" turns the image 90° clockwise each activation, cycling 0°→90°→180°→270°→0°, and
       width presets apply to the post-rotation image
     And "Reset" returns the ratio to Original, the width to 1600 px, the crop frame to the whole
@@ -43,7 +45,7 @@ Feature: Crop and resize step in the editor's image uploader
     Given ImageUploader is open in the idle state for article 12
     When the user chooses a file named "north-wall.jpg", content type "image/jpeg", size 3.9 MB,
       natural dimensions 4032 × 3024 px
-    Then no request is sent to POST /v1/article/12/image
+    Then no request is sent to POST /v1/media/
     And the modal retitles to "Crop and resize" with the description "north-wall.jpg · 3.9 MB"
     And the crop frame starts as the whole image, ratio "Original" is selected, and width
       "1600 px" is selected
@@ -53,7 +55,7 @@ Feature: Crop and resize step in the editor's image uploader
   Scenario: An SVG skips the crop step and uploads immediately
     Given ImageUploader is open in the idle state for article 12
     When the user chooses a file named "diagram.svg", content type "image/svg+xml", size 40 KB
-    Then POST /v1/article/12/image is sent immediately with that file
+    Then POST /v1/media/ is sent immediately with that file
     And the crop-and-resize step is never shown
 
   Scenario Outline: Choosing an aspect ratio locks the frame to it
@@ -108,7 +110,7 @@ Feature: Crop and resize step in the editor's image uploader
   Scenario: "Choose another file" returns to the file picker without uploading
     Given the crop-and-resize step is open for "north-wall.jpg"
     When the user activates "Choose another file"
-    Then no request is sent to POST /v1/article/12/image
+    Then no request is sent to POST /v1/media/
     And the idle state is shown again, with the file picker available
 
   Scenario: A newly chosen file opens a fresh crop step, not the previous file's adjustments
@@ -123,7 +125,7 @@ Feature: Crop and resize step in the editor's image uploader
     Given the crop-and-resize step is open for "north-wall.jpg" with ratio "Original", width
       "1600 px" and the mono line "Uploads as 1600 × 1200 px · about 420 KB"
     When the user activates "Upload image"
-    Then POST /v1/article/12/image is sent with a single file under the field name "file" whose
+    Then POST /v1/media/ is sent with a single file under the field name "file" whose
       pixel dimensions are 1600 × 1200 and whose size is about 420 KB, not the original
       4032 × 3024, 3.9 MB file
     And the uploading state shows "Uploading 0.0 of 420 KB"

features/editor_image_crop_resize.qa.md

@@ -18,7 +18,7 @@ it renders internally (canvas/OffscreenCanvas is a coder implementation detail).
    "1600 px" selected, mono line "Uploads as 1600 × 1200 px · about 420 KB", footer "Choose
    another file" / "Upload image".
 2. **An SVG bypasses the step** — choose `diagram.svg` (image/svg+xml, 40 KB); assert an XHR to
-   `/v1/article/12/image` is created immediately and the crop step never renders.
+   `/v1/media/` is created immediately and the crop step never renders.
 3. **Ratio presets lock the frame, Examples-driven (16:9 / 4:3 / 1:1)** — from the opened step,
    select each ratio pill; assert the frame's reported rect and the mono line's output size match
    the feature's Examples table.

features/editor_image_removal.feature

@@ -1,148 +1,90 @@
-Feature: Removing an inline image from the editor
+Feature: Removing an inline image from the article
 
   As a verified RenewCMS owner writing an article
-  I want to remove an image I've already inserted into the article body,
+  I want to take an image out of the article body, from a button or with Backspace or Delete
-    either through an explicit delete button or by pressing Backspace/Delete
+  So that an unwanted image leaves the article without deleting the file from my library
-    on the selected image, directly from the editor
-  So that a mistaken or unwanted image doesn't have to stay in the article
-    forever, and removing it behaves like every other destructive action in
-    RenewCMS: it asks for confirmation first, however the user starts it
 
   Background:
-    Given docs/design/ has no board or state for removing an inline image;
+    Given this slice is SPA only for this file; the Go alias deletion is in
-      this feature was added at the user's explicit request ahead of design
+      features/remove_legacy_article_image_alias.feature
-      coverage, reusing the editor's existing visual language rather than
+    And docs/design/screens/media-picker.md now covers this flow ("Remove image: confirm" and
-      inventing new components: the trash icon and error color already used
+      "Removed"); it supersedes the earlier version of this feature, which had no design
-      by the article "Delete" button, and the ConfirmDialog component
+      coverage and used a red confirm that deleted through DELETE /v1/article/{id}/image/{imageId}
-      already used by "Delete this article?" (docs/design/screens/editor.md's
+    And removing an image is a body edit only: no API call of any kind is sent, before, during
-      "Delete: confirm" state)
+      or after the confirm, and the library and every other article are untouched
-    And this slice changes ArticleEditor's exposed insertImage(src, alt) to
+    And ArticleEditor keeps its exposed insertImage(src, alt, imageId) and removeImage(imageId),
-      insertImage(src, alt, imageId), stamping the inserted <img> node with
+      its "request-remove-image" event with the image id, and its Backspace and Delete handling,
-      the image's numeric id as a data-image-id attribute, persisted in the
+      which still intercepts the keys before Tiptap deletes the node
-      saved article body HTML; EditorView passes the id it now receives from
+    And an image already in a body from before data-image-id existed has no id, shows no
-      a successful upload (features/remove_article_image.feature's change to
+      "Remove image" button and is not intercepted by Backspace or Delete (unchanged)
-      POST .../image's 201 body) through to insertImage
+    And selecting an image node that carries data-image-id shows a button "Remove image" at the
-    And an image already present in an article's body from before this slice
+      image's top-right corner (8 px from the top and right): trash-2 icon at 14 px, neutral,
-      has no data-image-id attribute and so shows no delete affordance and
+      28 px high, 12 px medium text, a 1 px accented border and the page background; deselecting
-      is not intercepted by Backspace/Delete, until it is removed and
-      re-added
-    And selecting an image node that does carry a data-image-id attribute
-      shows a small delete button anchored to the image's top-right corner,
-      icon i-lucide-trash-2, color error, matching the article Delete
-      button's icon and color; deselecting the image (clicking elsewhere)
       hides it
-    And there are two equivalent triggers for the same removal flow:
+    And EditorView reacts to "request-remove-image" by opening ConfirmDialog with tone "neutral",
-      activating that delete button, and pressing Backspace or Delete while
+      title "Remove this image from the article?", description "It's removed from this article
-      the image node is selected (a Tiptap NodeSelection on the image).
+      only. The file stays in your library and in any other article that uses it.", confirmLabel
-      Tiptap's native node deletion on Backspace/Delete is intercepted
+      "Remove image" and cancelLabel "Cancel"; the confirm button is primary, not red
-      before it reaches the document (e.g. via a keyboard-shortcut/keydown
+    And the body of the confirm is a bordered row with a 56 × 42 px thumbnail of the image, its
-      handler registered on the Image node or at the editor level, checked
+      filename, and "Stays in the library · {size}", for example "north-wall.jpg" and "Stays in
-      first while an image node is selected) so the key press never removes
+      the library · 3.9 MB"
-      the node directly; instead it triggers exactly the same flow as the
+    And the filename and size come from the images the SPA has seen this session, kept by image
-      button
+      id: those inserted from either tab and those loaded in the Library list
-    And either trigger emits ArticleEditor's new "request-remove-image"
+    And confirming runs removeImage(imageId), moves useArticleDraft to "dirty", closes the
-      event with the node's numeric image id; ArticleEditor does not call
+      dialog and shows the toast; the action cannot fail, so there is no inline error
-      the API or show any dialog itself, mirroring how "request-image"
+    And a thumbnail uses the image's src from the node
-      already only opens ImageUploader from EditorView
-    And EditorView reacts to "request-remove-image" by opening the existing
-      ConfirmDialog component with title "Remove this image?", description
-      "This image will be removed from the article. This can't be undone.",
-      confirmLabel "Remove image", cancelLabel "Cancel", pendingLabel
-      "Removing…", tone "danger" — the same component and tone already used
-      for "Delete this article?"
-    And ConfirmDialog's action calls DELETE /v1/article/{articleId}/image/
-      {imageId} through useApi (not the raw XMLHttpRequest used for upload,
-      since there is no progress to observe)
-    And on success (204) the action removes the image node from
-      ArticleEditor's content via a new exposed removeImage(imageId) method,
-      which moves useArticleDraft's state to "dirty" the same way any other
-      body edit does; ConfirmDialog then closes and a toast appears: color
-      success, icon i-lucide-circle-check, title "Image removed",
-      description "Save to keep this change."
-    And on any failure (404 for either the article or the image, 500, or a
-      network failure) the action throws, so ConfirmDialog shows its own
-      inline error "Couldn't remove the image, so it's still there. Try
-      again in a moment." and stays open; the image node is not removed and
-      the draft's dirty state is unchanged
-    And a 401 is handled entirely by useApi's global handling
-      (features/api_client_global_error_handling.feature) and is out of
-      scope for new scenarios here
-    And once the confirm dialog is open, its cancel/confirm/failure
-      behaviour (covered below) is identical regardless of which trigger
-      opened it, so those scenarios are written once, against the button
-      trigger, and are not duplicated per trigger
 
-  Scenario: Selecting an inserted image reveals its delete button
+  Scenario: Selecting an inserted image reveals "Remove image"
-    Given the user is on /article/12/edit with an image in the body carrying
+    Given the user is on /article/12/edit with an image in the body carrying data-image-id "1"
-      data-image-id "10"
     When the user clicks that image
-    Then a delete button (trash icon, error color) appears at the image's
+    Then a button "Remove image" with a trash-2 icon shows at the image's top-right corner
-      top-right corner
     When the user clicks elsewhere in the editor
-    Then the delete button is no longer shown
+    Then the button is no longer shown
 
-  Scenario Outline: Either trigger opens the confirm dialog and sends no request yet, without letting Tiptap delete the node itself
+  Scenario: An image without data-image-id has no button
-    Given the image with data-image-id "10" is selected on /article/12/edit
+    Given the body has an image with no data-image-id
+    When the user clicks it
+    Then no "Remove image" button shows and Backspace does nothing special to it
+
+  Scenario Outline: Either trigger opens the neutral confirm and sends nothing
+    Given the image with data-image-id "1" ("north-wall.jpg", 3.9 MB, inserted this session) is selected on /article/12/edit
     When the user <triggers-removal>
-    Then a dialog titled "Remove this image?" opens, with description "This
+    Then a dialog titled "Remove this image from the article?" opens, with the description "It's removed from this article only. The file stays in your library and in any other article that uses it."
-      image will be removed from the article. This can't be undone.",
+    And its body shows the thumbnail, "north-wall.jpg" and "Stays in the library · 3.9 MB"
-      cancel "Cancel" and confirm "Remove image"
+    And its buttons read "Cancel" and a primary "Remove image"
-    And no request has been sent to DELETE /v1/article/12/image/10
+    And no request has been sent
-    And the image node is still present in the editor's content (Tiptap's
+    And the image node is still in the editor's content (Tiptap's native deletion did not run)
-      native node deletion did not run)
 
     Examples:
       | triggers-removal                                     |
-      | activates the image's delete button                |
+      | activates the "Remove image" button                  |
       | presses Backspace with the image node selected       |
       | presses Delete with the image node selected          |
 
-  Scenario: Cancelling the confirm dialog changes nothing
+  Scenario: The confirm for an image the session has not seen
-    Given the confirm dialog is open for image id 10 on /article/12/edit
+    Given the image with data-image-id "7" was in the saved body and is not in the session's record
+    When the user activates "Remove image"
+    Then the body row shows the thumbnail and "Stays in the library" with no filename and no size
+
+  Scenario: Cancelling changes nothing
+    Given the confirm is open for image id 1
     When the user activates "Cancel"
-    Then the dialog closes
+    Then the dialog closes, no request has been sent, the image is still in the content, and the draft's dirty state is unchanged
-    And no request has been sent to DELETE /v1/article/12/image/10
-    And the image is still present in the editor's content
-    And the draft's dirty state is unchanged
 
-  Scenario: Confirming removes the image, marks the draft dirty, and shows a success toast
+  Scenario: Confirming removes the image from the body only
-    Given the confirm dialog is open for image id 10 on /article/12/edit,
+    Given the confirm is open for image id 1 on /article/12/edit, the draft in the Saved state
-      the draft in the Saved state
     When the user activates "Remove image"
-    Then DELETE /v1/article/12/image/10 is sent
+    Then the dialog closes and the image leaves the editor's content
-    When that request resolves 204
+    And SaveStatus reads "Unsaved changes" and Save is enabled
-    Then the dialog closes
+    And a toast appears: color success, icon i-lucide-circle-check, title "Image removed", description "It's still in your library."
-    And the image is removed from the editor's content
+    And no request of any kind has been sent
-    And SaveStatus reads "Unsaved changes" and the Save button becomes
-      enabled
-    And a toast appears: color success, icon i-lucide-circle-check, title
-      "Image removed", description "Save to keep this change."
 
-  Scenario Outline: A failed removal keeps the image and shows the dialog's inline error
+  Scenario: A removal started by Backspace behaves like one started by the button
-    Given the confirm dialog is open for image id 10 on /article/12/edit
+    Given the confirm is open for image id 1, opened by Backspace, the draft in the Saved state
     When the user activates "Remove image"
-    And DELETE /v1/article/12/image/10 <failure>
+    Then the outcome is the same as above
-    Then the dialog stays open, showing the inline error "Couldn't remove
-      the image, so it's still there. Try again in a moment."
-    And the image is still present in the editor's content
-    And the draft's dirty state is unchanged
 
-    Examples:
+  Scenario: The removed image can be picked again
-      | failure                      |
+    Given image id 1 was removed from the body this session
-      | resolves with a 404 response |
+    When the user opens the Library tab
-      | resolves with a 500 response |
+    Then "north-wall.jpg" no longer carries "In this article"
-      | never reaches the server     |
-
-  Scenario: Confirming a removal started by Backspace/Delete behaves exactly like confirming one started by the button
-    Given the confirm dialog is open for image id 10 on /article/12/edit,
-      opened by pressing Backspace with the image node selected, the draft
-      in the Saved state
-    When the user activates "Remove image"
-    Then DELETE /v1/article/12/image/10 is sent
-    When that request resolves 204
-    Then the dialog closes
-    And the image is removed from the editor's content
-    And SaveStatus reads "Unsaved changes" and the Save button becomes
-      enabled
-    And a toast appears: color success, icon i-lucide-circle-check, title
-      "Image removed", description "Save to keep this change."

features/editor_image_removal.qa.md

@@ -1,88 +1,25 @@
-# QA: Removing an inline image from the editor
+# QA: Removing an inline image from the article
 
 ## Automated (Vitest + Vue Test Utils, `task test:web`)
 
-Mount EditorPage inside DashboardShell at `/article/12/edit` with the
+Mount EditorPage at `/article/12/edit` with the `editor_core.qa.md` fixture article and a body of `<img src="/static/uploadedImages/1.jpg" data-image-id="1" alt="">`. Seed the session's image record with id 1 ("north-wall.jpg", 3.9 MB). Spy on `request` and on `XMLHttpRequest` and assert they are never called by any step below.
-editor_core.qa.md fixture article (id 12, "How we price a bathroom
-renovation", is_online false), GET already resolved 200, and a body
-containing `<img src="/static/uploadedImages/before.png" data-image-id="10"
-alt="">`. Mock `useApi`'s `request` for `DELETE /v1/article/12/image/10`
-(fetch-based, not XHR — reuse whatever mock
-`api_client_global_error_handling.qa.md` already sets up for `request`).
 
-1. **Selecting the image reveals the delete button** — click the image
+1. **Selecting reveals the button** - click the image; assert a button named "Remove image" with a trash-2 icon renders at the corner; click elsewhere; assert it is gone.
-   node; assert a delete button (trash icon, error color) renders anchored
+2. **No id, no button** - an image without `data-image-id`: no button, and a Backspace keydown does not open the dialog.
-   to it; click elsewhere in the editor; assert the button is gone.
+3. **Triggers, Examples-driven** - button click, Backspace keydown and Delete keydown each open the dialog with the exact title, description, "Cancel" and a primary (not error) "Remove image"; assert the body shows the thumbnail, "north-wall.jpg" and "Stays in the library · 3.9 MB"; assert no request; assert the node is still in the document.
-2. **Activating the delete button opens the confirm dialog** — select the
+4. **Unseen image** - id 7 not in the record; assert the row shows the thumbnail and "Stays in the library" only.
-   image, activate its delete button; assert a dialog titled "Remove this
+5. **Cancel changes nothing.**
-   image?", description "This image will be removed from the article. This
+6. **Confirm** - click "Remove image"; assert the dialog closes, the node is gone, SaveStatus "Unsaved changes", Save enabled, the toast (color success, icon `i-lucide-circle-check`, "Image removed" / "It's still in your library."), and zero requests.
-   can't be undone.", cancel "Cancel", confirm "Remove image"; assert no
+7. **Backspace-opened confirm** gives the same outcome as 6.
-   request was sent yet; assert the image node is still present (Tiptap's
+8. **Removed image loses its tag** - open the Library after step 6; assert "north-wall.jpg" has no "In this article" tag.
-   native deletion did not run).
-3. **Backspace on the selected image opens the same confirm dialog instead
-   of deleting the node** — select the image node (NodeSelection), fire a
-   `keydown` for `Backspace`; assert the same dialog as step 2 opens;
-   assert no request was sent yet; assert the image node is still present
-   in the editor's document (i.e. the keydown was intercepted before
-   Tiptap's default node-deletion ran, not just undone afterwards).
-4. **Delete on the selected image opens the same confirm dialog instead of
-   deleting the node** — same as step 3 but firing `keydown` for `Delete`.
-5. **Cancelling changes nothing** — from the open dialog (opened via the
-   button), click "Cancel"; assert the dialog closes, no request was sent,
-   the image node is still in the editor's content, and SaveStatus/dirty
-   state is unchanged.
-6. **Confirming removes the image, marks dirty, and toasts (button
-   trigger)** — from the open dialog (Saved state), click "Remove image";
-   assert a DELETE request to `/v1/article/12/image/10` was made; resolve
-   it 204; assert the dialog closes, the image node is gone from the
-   editor's content, SaveStatus reads "Unsaved changes" and Save is
-   enabled, and a toast appears with color success, icon
-   `i-lucide-circle-check`, title "Image removed", description "Save to
-   keep this change."
-7. **Confirming removes the image the same way when opened via
-   Backspace/Delete** — repeat step 6's assertions, but open the dialog via
-   the Backspace keydown from step 3 instead of the button; assert the
-   outcome (request, node removal, dirty state, toast) is identical.
-8. **A failed removal keeps the image and shows the inline error,
-   Examples-driven** — for a 404 response, a 500 response, and a rejected/
-   network-failure request: from the open dialog (button trigger), click
-   "Remove image"; resolve/reject accordingly; assert the dialog stays open
-   showing the inline error "Couldn't remove the image, so it's still
-   there. Try again in a moment."; assert the image node is still present
-   and the draft's dirty state is unchanged.
 
-## Visual
+## Visual: `task visual:check -- media-picker`
 
-No `docs/design/` board or state exists for this trigger (see the feature's
+The states "Remove image: confirm" and "Removed" are in the `media-picker` group; the setups are in `editor_media_picker.qa.md`. The sample data is north-wall.jpg, image id 1, 3.9 MB. The "Remove image" button is visible in "Remove image: confirm" and "Inserted", so the setup must select the image node. The confirm's confirm button must not be error-coloured.
-Background). Per the user's explicit direction this slice ships the SPA
-behaviour anyway, but `task visual:check -- editor` has nothing to compare
-it against, so no visual capture is added for it — this is an intentional
-gap, `skip: no-design-coverage` (distinct from `skip: clock-sensitive`), not
-a QA oversight. If a board for this state is added to `docs/design/` later,
-it needs its own follow-up slice to add the visual check.
 
-- [ ] Keyboard/focus: once a delete button is shown, it is reachable by Tab
+- [ ] Keyboard and focus: the button is reachable by Tab and activates with Enter or Space. Backspace or Delete with focus outside the editor does nothing. ConfirmDialog's focus trap and default focus on "Cancel" are unchanged.
-      and activates on Enter/Space; pressing Backspace/Delete with the
-      image node selected but focus elsewhere in the page does not trigger
-      removal (only an actual Tiptap NodeSelection on the image should);
-      ConfirmDialog's existing focus trap and cancel-button-default-focus
-      behaviour (already covered by the article-delete flow) applies
-      unchanged regardless of which trigger opened it.
 
 ## Manual verification
 
-- **Real DELETE round trip against a running server** — Vitest only mocks
+- **Real keyboard behaviour** in a real browser, including an IME: Backspace or Delete on a selected image opens the confirm instead of deleting the node (jsdom doesn't exercise ProseMirror's keymap precedence).
-  `useApi`'s request; confirm a real removal (204/404/500) against
+- **Save after removal** against `task dev`: remove an image, save, reload; the image is gone from the article and still listed in `/media`.
-  `task dev` with a live SQLite file and the real
-  `DELETE /v1/article/{id}/image/{imageId}` handler, since
-  `features/remove_article_image.feature`'s httptest suite covers the
-  handler in isolation but never through this SPA flow.
-- **Real keyboard behaviour** — confirm in a real browser that selecting an
-  image (click) and pressing Backspace/Delete opens the confirm dialog
-  rather than deleting the node, including with an IME or on a platform
-  where Backspace/Delete semantics differ, since jsdom's `keydown`
-  simulation doesn't exercise Tiptap's real ProseMirror keymap precedence.
-- **Design review of the delete-button/ConfirmDialog approach** — since
-  there is no board for this state, once a board is added, re-verify this
-  implementation still matches it (or update the implementation to match);
-  until then this is a best-effort, design-team-unreviewed UI.

features/editor_image_upload.feature

@@ -1,58 +1,75 @@
-Feature: Wiring the editor's image upload flow
+Feature: The editor's Upload tab uploads to the library
 
   As a verified RenewCMS owner writing an article
-  I want the editor's image button (and dropping a file onto the editor) to open an upload
+  I want the Upload tab of the "Add an image" dialog to check my file, spot duplicates,
-    modal that validates the file, shows progress, and inserts the result at my cursor
+    upload to my library and insert the result at my cursor
   So that I can add images to an article's body without leaving the editor, with clear
     feedback when a file is rejected or the upload fails
 
   Background:
-    Given EditorView.vue listens for ArticleEditor's "request-image" event and, on it, opens
+    Given this slice is SPA only for this file: the API from the media library slice is used
-      ImageUploader (a UModal titled "Add an image") with the current article's id
+      unchanged
-    And dropping a file directly onto the editor surface also opens ImageUploader, with that
+    And EditorView listens for ArticleEditor's "request-image" event and opens ImageUploader
-      file already provided to it instead of an empty idle state
+      (a UModal titled "Add an image") with the picker tabs, whose Library tab is specified in
-    And ImageUploader validates a chosen or dropped file in the browser, checking both its MIME
+      features/editor_media_picker.feature
-      type and its file extension against png/jpeg/webp/svg, and that its size is at most
+    And dropping a file onto the editor surface opens ImageUploader on the Upload tab with that
-      10 × 1024 × 1024 bytes, before sending anything
+      file already provided, and no list request is sent until the Library tab is opened
-    And a file that passes validation is uploaded via a new useImageUpload composable, using
+    And this file supersedes these statements of the earlier version: the upload goes to
-      XMLHttpRequest (not useApi) so upload progress is observable, as multipart/form-data with
+      POST /v1/media/ and no longer to POST /v1/article/{articleId}/image; the 201 body is the
-      the file under the field name "file", to POST /v1/article/{articleId}/image, per
+      library item { id, filename, url, size, content_type, width, height, sha256, uploaded_by,
-      features/upload_article_image.feature's already-implemented and already-mounted contract
+      created_at, used_in, duplicate }; there is no article id in any upload request and no 404
-    And a 201 response's {"location": "..."} is inserted into ArticleEditor's content at the
+      for a deleted article on upload
-      current cursor position via an exposed insertImage(src, alt) method, with alt ""; this
+    And ImageUploader validates a chosen or dropped file in the browser with validateImageFile
-      moves useArticleDraft's state to "dirty" the same way any other body edit does
+      from web/src/lib/imageUpload.ts, size first (10485760 bytes allowed, one byte more is too
-    And closing the modal while an upload is in flight aborts the XMLHttpRequest
+      large), then MIME type and extension must both be allowed (png, jpeg, webp, svg), before
-    And a 401 response is handled entirely by useApi's global handling
+      hashing or sending anything
-      (features/api_client_global_error_handling.feature) and is out of scope for new scenarios
+    And a file that passes validation is hashed with hashFile from web/src/lib/fileHash.ts (the
-      here; the same is true of a 404 (the article was deleted elsewhere), which the editor's
+      lib shared with MediaPage), and GET /v1/media/?hash=<sha256 hex> is sent through useApi;
-      existing not-found handling already covers (features/editor_core.feature)
+      when hashFile resolves null, or the lookup fails with 500 or a network error, the check
+      is skipped and the flow continues as if nothing matched
+    And a file with no match continues exactly as in features/editor_image_crop_resize.feature:
+      a JPEG, PNG or WEBP opens the crop and resize step, an SVG is uploaded immediately
+    And the upload is sent with XMLHttpRequest (not useApi) so progress is observable, as
+      multipart/form-data with the file under the field name "file" to POST /v1/media/, with the
+      jwt cookie
+    And a 201 inserts the item's url at the cursor through insertImage(item.url, "", item.id),
+      so the node carries data-image-id, and useArticleDraft moves to "dirty"
+    And closing the dialog while an upload is in flight aborts the XMLHttpRequest
+    And the tabs show only on the choose step (idle, the duplicate card and the Library tab);
+      the crop, uploading, rejected and failed steps keep the earlier look without tabs
+    And the footer on the Upload tab holds only the step's own actions ("Cancel" in idle);
+      there is no "Insert image" button on it
 
-  Scenario: Opening the uploader from the toolbar's image button shows the idle state
+  Rule: Opening
+
+    Scenario: The toolbar's image button opens on Upload when the library is empty
       Given the user is on /article/12/edit with the editor focused
+      And GET /v1/media/?limit=24 resolves 200 with no item
       When the user activates the toolbar's "Image" button
-    Then ImageUploader opens titled "Add an image"
+      Then ImageUploader opens titled "Add an image" with the tabs "Upload" (icon upload) and "Library" (icon images)
-    And it shows "Drop an image here", a "Choose file" action, and the help text
+      And the Upload tab is selected and shows the image-plus icon, "Drop an image here, or choose a file" and "PNG, JPEG, WEBP, SVG · max 10 MB"
-      "PNG, JPEG, WEBP, SVG · max 10 MB"
+      And its footer reads "Cancel" only
-    And its cancel action reads "Cancel"
+      And no POST has been sent
-    And no request has been sent
 
-  Scenario: Dragging a file over the editor surface shows the dragging-over state
+    Scenario: Dropping a file opens Upload with the file
-    Given ImageUploader is open in the idle state
+      Given the user is on /article/12/edit and ImageUploader is not open
+      When the user drops a file named "before.png", content type "image/png", size 3.9 MB, onto the editor surface
+      Then ImageUploader opens on the Upload tab
+      And GET /v1/media/?hash=<sha256 of the file> is sent, and no request to GET /v1/media/?limit=24 is sent
+      And when the lookup resolves 200 with no item the crop and resize step shows for "before.png"
+      And no POST /v1/media/ has been sent
+
+    Scenario: Dragging a file over the drop zone shows the dragging-over state
+      Given ImageUploader is open on the Upload tab in the idle state
       When the user drags a file over the drop zone
       Then the drop zone reads "Drop to upload"
 
-  Scenario: Dropping a valid file onto the editor opens the uploader already uploading it
+  Rule: Browser checks, nothing is sent
-    Given the user is on /article/12/edit with the editor focused and ImageUploader is not open
-    When the user drops a file named "before.png", content type "image/png", size 3.9 MB, onto
-      the editor surface
-    Then ImageUploader opens titled "Add an image"
-    And POST /v1/article/12/image is sent with that file under the field name "file"
-    And the uploading state is shown, not the idle state
 
-  Scenario Outline: Choosing a file the browser can reject never sends a request
+    Scenario Outline: Choosing a file the browser can reject sends nothing
-    Given ImageUploader is open in the idle state for article 12
+      Given ImageUploader is open in the idle state
       When the user chooses a file named "<filename>", content type "<content_type>", size <size>
-    Then no request is sent to POST /v1/article/12/image
+      Then no hash lookup and no POST /v1/media/ is sent
       And the rejected state shows the title "\"<filename>\" can't be used"
       And its text reads "<description>"
       And its confirm action reads "Choose another file" and its cancel action reads "Cancel"
@@ -64,73 +81,111 @@ Feature: Wiring the editor's image upload flow
         | north-wall.tif | image/png       | 14.2 MB | north-wall.tif is 14.2 MB. Images can be up to 10 MB. |
 
     Scenario: "Choose another file" from the rejected state returns to idle
-    Given ImageUploader is in the rejected state for a file named "plan.pdf"
+      Given ImageUploader is in the rejected state for "plan.pdf"
       When the user activates "Choose another file"
-    Then the idle state is shown again, with the file picker available
+      Then the idle state is shown again, with the tabs
 
-  Scenario: A valid upload shows progress and its cancel action reads "Cancel upload"
+  Rule: Already in your library
-    Given ImageUploader is open in the idle state for article 12
-    When the user chooses a file named "north-wall.jpg", content type "image/jpeg", size 3.9 MB
-    Then POST /v1/article/12/image is sent with that file under the field name "file"
-    And the uploading state shows "north-wall.jpg 0%" and "Uploading 0.0 of 3.9 MB"
-    And its cancel action reads "Cancel upload"
-    When the upload reports 2.4 MB sent of 3.9 MB
-    Then the uploading state shows "north-wall.jpg 62%" and "Uploading 2.4 of 3.9 MB"
 
-  Scenario: Closing the dialog during an upload cancels it
+    Scenario: A file whose content exists shows the duplicate card and sends nothing
-    Given ImageUploader is uploading a file named "north-wall.jpg" to article 12
+      Given ImageUploader is open in the idle state
-    When the user activates "Cancel upload" (or otherwise closes the modal)
+      And GET /v1/media/?hash=<sha256 of north-wall.jpg> resolves 200 with the image "north-wall.jpg" (id 1, 4032 × 3024, uploaded 12 Sep 2026 by Marta Alves)
-    Then the in-flight XMLHttpRequest is aborted
+      When the user chooses a valid file named "north-wall.jpg" of 3.9 MB
-    And the modal closes
+      Then the Upload tab shows a card with an info border: a 72 × 54 thumbnail of the existing image, the title "Already in your library" and the text "north-wall.jpg matches an image uploaded on 12 Sep 2026 by Marta Alves."
-    And the editor's body is unchanged and remains in its previous dirty/clean state
+      And the card has the buttons "Use existing" (primary) and "Upload anyway", stacked and full width below md
+      And no POST /v1/media/ has been sent and the crop step has not opened
 
-  Scenario: A successful upload inserts the image at the cursor and marks the draft dirty
+    Scenario: Several matches name the oldest one
-    Given the user is on /article/12/edit in the Saved state and ImageUploader is uploading a
+      Given the hash lookup resolves 200 with several images
-      file named "north-wall.jpg" to article 12
+      Then the card names the oldest match
-    When POST /v1/article/12/image resolves 201 with {"location": "/static/uploadedImages/north-wall.jpg"}
-    Then the uploading state briefly shows "Image added"
-    And the image at "/static/uploadedImages/north-wall.jpg" is inserted into the editor's
-      content at the cursor via insertImage
-    And SaveStatus reads "Unsaved changes" and the Save button becomes enabled
-    And a toast appears: color success, icon i-lucide-circle-check, title "Image added",
-      description "Save to keep it in the article."
-    And the modal closes 600 ms after the response resolves
 
-  Scenario Outline: A server-side upload failure keeps the article unchanged and offers a retry
+    Scenario: A match without a known uploader drops the "by" part
-    Given ImageUploader is uploading a file named "north-wall.jpg" to article 12
+      Given the matched image's uploaded_by is empty
-    When POST /v1/article/12/image <failure>
+      Then the text reads "north-wall.jpg matches an image uploaded on 12 Sep 2026."
-    Then the failed state shows the title "Upload failed"
+
-    And its text reads "The server didn't accept the file. Your article hasn't changed."
+    Scenario: "Use existing" goes to the alt text step for the existing image
-    And its confirm action reads "Try again"
+      Given the duplicate card is showing for image id 1
-    And the editor's body is unchanged, and no image is inserted
+      When the user activates "Use existing"
+      Then the Library tab is selected with "north-wall.jpg" selected, its panel visible with the empty "Alt text (optional)" field, and "Insert image" enabled
+      And no POST /v1/media/ has been sent
+
+    Scenario: "Upload anyway" continues to crop and upload
+      Given the duplicate card is showing for "north-wall.jpg" (4032 × 3024)
+      When the user activates "Upload anyway"
+      Then the crop and resize step opens for that file
+      And the hash lookup is not repeated
+      And uploading from that step sends POST /v1/media/ and follows the normal states
+
+    Scenario: "Upload anyway" for an SVG uploads immediately
+      Given the duplicate card is showing for "diagram.svg"
+      When the user activates "Upload anyway"
+      Then POST /v1/media/ is sent with that file
+
+    Scenario Outline: The duplicate check is skipped when it cannot run
+      Given ImageUploader is open in the idle state
+      When the user chooses a valid file and <condition>
+      Then the flow continues to the crop step (or the upload for an SVG) with no card
 
       Examples:
-      | failure                     |
+        | condition                                                       |
-      | resolves with a 500 response |
+        | crypto.subtle is undefined (an insecure context)                |
-      | never reaches the server     |
+        | GET /v1/media/?hash= resolves with a 500 response               |
+        | GET /v1/media/?hash= never reaches the server                   |
+
+  Rule: Uploading
+
+    Scenario: A valid upload shows progress and its cancel action reads "Cancel upload"
+      Given the crop step was confirmed (or an SVG chosen) for "north-wall.jpg", 3.9 MB
+      Then POST /v1/media/ is sent with the file under the field name "file"
+      And the uploading state shows "north-wall.jpg 0%" and "Uploading 0.0 of 3.9 MB", and its cancel action reads "Cancel upload"
+      When the upload reports 2.4 MB sent of 3.9 MB
+      Then it shows "north-wall.jpg 62%" and "Uploading 2.4 of 3.9 MB"
+
+    Scenario: Closing the dialog during an upload cancels it
+      Given ImageUploader is uploading "north-wall.jpg"
+      When the user activates "Cancel upload" (or otherwise closes the dialog)
+      Then the in-flight XMLHttpRequest is aborted and the dialog closes
+      And the editor's body and its dirty or clean state are unchanged
+
+    Scenario: A successful upload inserts the image at the cursor and marks the draft dirty
+      Given the user is on /article/12/edit in the Saved state and "north-wall.jpg" is uploading
+      When POST /v1/media/ resolves 201 with the item { id: 13, url: "/static/uploadedImages/13.jpg", filename: "north-wall.jpg" }
+      Then the uploading state briefly shows "Image added"
+      And the image "/static/uploadedImages/13.jpg" is inserted at the cursor with alt "" and data-image-id 13
+      And SaveStatus reads "Unsaved changes" and Save is enabled
+      And a toast appears: color success, icon i-lucide-circle-check, title "Image added", description "Save to keep it in the article."
+      And the dialog closes 600 ms after the response
+
+    Scenario Outline: A server answer for a file that passed the browser checks
+      Given ImageUploader is uploading "<file>" of <size>
+      When POST /v1/media/ resolves <status>
+      Then the <state> state shows the title "<title>"
+      And its text reads "<text>"
+      And its confirm action reads "<confirm>"
+      And no image is inserted and the editor's body is unchanged
+
+      Examples:
+        | file           | size    | status | state    | title                           | text                                                  | confirm             |
+        | notes.pdf      | 210 KB  | 415    | rejected | "notes.pdf" can't be used       | Use a PNG, JPEG, WEBP or SVG image, up to 10 MB.      | Choose another file |
+        | north-wall.tif | 14.2 MB | 413    | rejected | "north-wall.tif" can't be used  | north-wall.tif is 14.2 MB. Images can be up to 10 MB. | Choose another file |
+        | broken.png     | 3.0 MB  | 400    | rejected | "broken.png" can't be used      | Use a PNG, JPEG, WEBP or SVG image, up to 10 MB.      | Choose another file |
+        | north-wall.jpg | 3.9 MB  | 500    | failed   | Upload failed                   | The server didn't accept the file. Your article hasn't changed. | Try again |
+        | north-wall.jpg | 3.9 MB  | 429    | failed   | Upload failed                   | The server didn't accept the file. Your article hasn't changed. | Try again |
+        | north-wall.jpg | 3.9 MB  | none (network) | failed | Upload failed               | The server didn't accept the file. Your article hasn't changed. | Try again |
 
     Scenario: "Try again" re-attempts the upload with the same file
-    Given ImageUploader is in the failed state for a file named "north-wall.jpg", article 12,
+      Given ImageUploader is in the failed state for "north-wall.jpg" after a 500
-      after a 500 response
       When the user activates "Try again"
-    Then POST /v1/article/12/image is sent again with that same file under the field name "file"
+      Then POST /v1/media/ is sent again with that same file and no new hash lookup, and the uploading state shows
-    And the uploading state is shown
 
-  Scenario: A server 400 for a type the client should have caught shows the same rejected copy
+  Rule: Sessions
-    Given ImageUploader is uploading a file named "notes.pdf" to article 12 (a type that
-      defensively passed the browser's own check, e.g. a MIME type the browser misreported)
-    When POST /v1/article/12/image resolves 400
-    Then the rejected state shows the title "\"notes.pdf\" can't be used"
-    And its text reads "Use a PNG, JPEG, WEBP or SVG image, up to 10 MB."
-    And its confirm action reads "Choose another file"
-    And the editor's body is unchanged, and no image is inserted
 
-  Scenario: A server 400 for a size the client should have caught shows the same size-named copy
+    Scenario Outline: Session errors are global
-    Given ImageUploader is uploading a file named "north-wall.tif" to article 12 (a file that
+      When <call> resolves <status>
-      defensively passed the browser's own size check somehow, e.g. its reported size changed
+      Then the user is sent where useApi sends a <status> from /article/12/edit, and no local copy shows
-      between selection and send)
+
-    When POST /v1/article/12/image resolves 400
+      Examples:
-    Then the rejected state shows the title "\"north-wall.tif\" can't be used"
+        | call                      | status |
-    And its text reads "north-wall.tif is 14.2 MB. Images can be up to 10 MB."
+        | POST /v1/media/ (XHR)     | 401    |
-    And its confirm action reads "Choose another file"
+        | POST /v1/media/ (XHR)     | 403    |
-    And the editor's body is unchanged, and no image is inserted
+        | GET /v1/media/?hash=      | 401    |

features/editor_image_upload.qa.md

@@ -1,90 +1,33 @@
-# QA: Wiring the editor's image upload flow
+# QA: The editor's Upload tab uploads to the library
 
 ## Automated (Vitest + Vue Test Utils, `task test:web`)
 
-Mock `XMLHttpRequest` (a fake implementing `open`/`setRequestHeader`/`send`/`abort` and firing
+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.
-`upload.progress`, `load`, `error`) for `POST /v1/article/{id}/image`; useApi/fetch is not
-involved in this slice. Mount EditorPage inside DashboardShell at `/article/12/edit` with the
-editor_core.qa.md fixture article (id 12, title "How we price a bathroom renovation", is_online
-false), GET already resolved 200.
 
-1. **Toolbar button opens the idle state** — click the toolbar's "Image" button; assert
+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.
-   ImageUploader opens titled "Add an image", showing "Drop an image here", "Choose file",
+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.
-   "PNG, JPEG, WEBP, SVG · max 10 MB", cancel "Cancel"; assert no XHR was created.
+3. **Dragging over shows "Drop to upload"**.
-2. **Dragging over shows "Drop to upload"** — with the uploader open idle, fire a `dragover` on
+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.
-   the drop zone; assert the text changes to "Drop to upload".
+5. **"Choose another file" returns to idle**, with the tabs back.
-3. **Dropping a file on the editor opens the uploader already uploading** — with the uploader
+6. **Duplicate card** - the hash lookup resolves one item (id 1, "north-wall.jpg", `created_at` 12 Sep 2026, `uploaded_by` "Marta Alves"); assert the card copy and buttons, no XHR, and no crop step.
-   closed, dispatch a `drop` event with a file `before.png` (image/png, 3.9 MB) on the editor
+7. **Several matches name the oldest**, and **no uploader drops the "by" part**.
-   surface; assert ImageUploader opens and an XHR to `/v1/article/12/image` is created with that
+8. **"Use existing"** - assert the Library tab is selected, image 1 selected, the alt field empty, "Insert image" enabled, and no XHR.
-   file, and the uploading state (not idle) is shown.
+9. **"Upload anyway"** - assert the crop step opens (raster) with no second `?hash=` request; for an SVG assert the XHR is created at once.
-4. **Rejected — Examples-driven on type, extension mismatch, and size** — for each of `plan.pdf`
+10. **Check skipped** - Examples: `hashFile` resolves null, lookup 500, lookup rejects; assert the crop step opens with no card.
-   (application/pdf, 1.2 MB), `disguised.png` (application/pdf, 1.2 MB), and `north-wall.tif`
+11. **Uploading and progress** - confirm the crop step; assert the XHR is `POST /v1/media/` with field `file`, cancel "Cancel upload", and `loaded: 2.4 * 1024 * 1024, total: 3.9 * 1024 * 1024` gives "north-wall.jpg 62%" and "Uploading 2.4 of 3.9 MB".
-   (image/png, 14.2 MB), choose the file via the `UFileUpload`; assert no XHR is created and the
+12. **Closing during an upload aborts** - `abort` called, dialog closed, body and dirty state unchanged.
-   rejected state shows the exact title/text/confirm/cancel copy from the feature's Examples.
+13. **201 inserts** - resolve the XHR with the item (id 13, url `/static/uploadedImages/13.jpg`); assert `insertImage` was called with (url, "", 13), SaveStatus "Unsaved changes", Save enabled, the toast (color success, icon `i-lucide-circle-check`, "Image added" / "Save to keep it in the article."), and after 600 ms of fake timers the dialog closes.
-5. **"Choose another file" returns to idle** — from the rejected state, click "Choose another
+14. **Server answers, Examples-driven** - 415, 413, 400 give the rejected copy; 500, 429 and a network `error` give "Upload failed"; assert no `insertImage` call and the body unchanged.
-   file"; assert the idle state re-renders.
+15. **"Try again" resends the same file** with no new `?hash=` request.
-6. **Uploading shows live progress and "Cancel upload"** — choose `north-wall.jpg` (image/jpeg,
+16. **Sessions** - Examples from the feature; assert the same redirect `useApi` performs, with no local copy.
-   3.9 MB); assert the XHR is created with that file under field `file`; assert cancel reads
-   "Cancel upload"; fire an `upload.progress` event with `loaded: 2.4 * 1024 * 1024, total: 3.9 *
-   1024 * 1024`; assert the text reads "north-wall.jpg 62%" and "Uploading 2.4 of 3.9 MB".
-7. **Closing during an upload aborts the XHR** — from the uploading state, click "Cancel
-   upload"; assert the fake XHR's `abort` was called, the modal closes, and the editor's body
-   and dirty state are unchanged from before the upload started.
-8. **A 201 inserts at the cursor and marks the draft dirty** — from the uploading state, resolve
-   the fake XHR with status 201 and body `{"location": "/static/uploadedImages/north-wall.jpg"}`;
-   assert `insertImage` (or the editor's exposed method) was called with that location; assert
-   SaveStatus now reads "Unsaved changes" and Save is enabled; assert a toast appears with color
-   success, icon `i-lucide-circle-check`, title "Image added", description "Save to keep it in
-   the article."; advance fake timers 600 ms and assert the modal has closed.
-9. **A 500 or network failure shows "Upload failed" and keeps the article unchanged, Examples-
-   driven** — for (a) the fake XHR firing `load` with status 500 and (b) firing `error`; assert
-   the failed state shows title "Upload failed", text "The server didn't accept the file. Your
-   article hasn't changed.", confirm "Try again"; assert no `insertImage` call and the editor's
-   body/dirty state is unchanged.
-10. **"Try again" resends the same file** — from the failed state for `north-wall.jpg`, click
-    "Try again"; assert a new XHR is created for `/v1/article/12/image` with the same file, and
-    the uploading state is shown again.
-11. **A server 400 for a type the client should have caught shows the rejected copy** — from an
-    uploading state for `notes.pdf`, resolve the fake XHR with status 400; assert the rejected
-    state shows title "\"notes.pdf\" can't be used", text "Use a PNG, JPEG, WEBP or SVG image,
-    up to 10 MB.", confirm "Choose another file"; assert no `insertImage` call.
-12. **A server 400 for a size the client should have caught shows the size-named rejected copy**
-    — from an uploading state for `north-wall.tif`, resolve the fake XHR with status 400; assert
-    the rejected state shows title "\"north-wall.tif\" can't be used", text "north-wall.tif is
-    14.2 MB. Images can be up to 10 MB.", confirm "Choose another file"; assert no `insertImage`
-    call.
 
-## Visual (manual verification — desktop and mobile, light and dark)
+## Visual
 
-Reference: `docs/design/screens/editor.md` states "Upload: choose", "Upload: in progress",
+The Upload tab states are drawn in the `media-picker` group; see `editor_media_picker.qa.md`. The editor-group state 'Upload: choose' awaits the user's editor board update: the user refreshes the editor board themselves, and until then `task visual:check -- editor` is expected to fail on that state. The states "Upload: in progress" and "Upload: rejected" and the crop and resize states are unchanged. `web/visual/states.ts` line 2309 mocks `POST /v1/article/12/image` and must mock `POST /v1/media/` with the item shape, and every editor upload state needs a `GET /v1/media/?limit=24` mock.
-"Upload: rejected", "Upload: inserted", and `docs/design/source/RenewCMS Screens Back-
-office.dc.html`. Run `task visual:check -- editor` for each state below; add each state's mock
-setup to `web/visual/states.ts` first, reusing editor_core.qa.md's fixture article (id 12, title
-"How we price a bathroom renovation", draft, "Today, 11:02", 3 images) plus the sample file data
-from the board: filename "north-wall.jpg", size 3.9 MB, progress 62% / 2.4 of 3.9 MB uploaded.
-
-- [ ] Upload: choose — modal "Add an image", idle state, cancel "Cancel".
-- [ ] Upload: in progress — modal "Add an image", uploading "north-wall.jpg 62%" / "Uploading
-      2.4 of 3.9 MB", cancel "Cancel upload".
-- [ ] Upload: rejected — modal "Add an image", rejected state for a sample rejected file per the
-      board's script, cancel "Cancel", confirm "Choose another file".
-- [ ] Upload: inserted — toast "Image added" / "Save to keep it in the article.", editor status
-      "draft", save "dirty".
-- [ ] Mobile (all of the above at 390×844): same modal layout constraints as other editor
-      modals (leading arrow-left button, trailing ellipsis in the header behind it).
-- [ ] Keyboard/focus: the drop zone is reachable by Tab and Enter opens the file picker; focus
-      moves into the modal on open and is trapped there; Esc during "Upload: in progress"
-      behaves like "Cancel upload" (aborts, closes); the progress bar's `role="progressbar"` /
-      `aria-valuenow` updates are announced without spamming on every progress tick.
-  - [ ] Motion: modal open/close follows the standard 240 ms timing; the success state's 600 ms
-      auto-close is not visually checked as a capture (it's a timing behavior, not a static
-      state) — cover only via the Vitest fake-timer assertion above.
 
 ## Manual verification
 
-- **Real POST round trip against a running server** — Vitest only mocks `XMLHttpRequest`;
+- **Real round trip against `task dev`** with a live SQLite file: a real upload through the SPA (201, 413, 415, 400, 401), then the image shows in `/media`.
-  confirm a real upload (200/400/401/404/500) against `task dev` with a live SQLite file and the
+- **Real OS drag and drop** of an image onto the editor in a real browser.
-  real `POST /v1/article/{id}/image` handler, since `features/upload_article_image.feature`'s
+- **Real `crypto.subtle`** in a secure context (localhost or HTTPS), including the duplicate card for a file already in the library, and the skipped check on plain HTTP.
-  httptest suite covers the handler in isolation but never through this SPA flow.
+- **Keyboard and focus**: the drop zone is reachable by Tab and opens the file chooser with Enter or Space. Focus moves into the dialog and is trapped. Esc during "Upload: in progress" aborts and closes. Tabs are reachable and arrow keys move between them.
-- **Real drag-and-drop from the OS file picker** — jsdom's `drop` event is synthetic; confirm a
-  real OS-level drag of an image file onto the editor in a real browser.

features/editor_media_picker.feature

@@ -0,0 +1,221 @@
+Feature: The editor's Library tab, picking an image from the media library
+
+  As a verified RenewCMS owner writing an article
+  I want to browse my library from the "Add an image" dialog and insert an existing image
+    with alt text
+  So that I can reuse an image without uploading it again
+
+  Background:
+    Given this slice is SPA only for this feature: the API from the media library slice is used
+      unchanged, and the Go change to remove the legacy alias is specified in
+      features/remove_legacy_article_image_alias.feature
+    And the screen is docs/design/screens/media-picker.md, drawn by docs/design/source/MediaFrame.dc.html,
+      inside ImageUploader (UModal "Add an image") on /article/:id/edit
+    And the dialog has a title "Add an image", an x to close, and two tabs under the title,
+      "Upload" (icon upload) and "Library" (icon images), 36 px high on desktop and 44 px on
+      mobile with a 2 px primary underline on the selected one; it is 640 px wide on desktop and
+      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
+      "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 }
+    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
+    And the search field reads "Search by filename" (32 px high on desktop, 44 px with 16 px
+      text on mobile), with a search icon and, once it has text, an x that clears it
+    And the grid has 4 columns on desktop and 3 on mobile with a 12 px gap (8 px between
+      columns on mobile), square tiles with a 1 px border, and the filename under each tile in
+      12 px toned text with an ellipsis; it scrolls inside the dialog, 300 px high with nothing
+      selected, 190 px on desktop and 120 px on mobile with one selected
+    And every tile is one button whose accessible name reads like the Media page's, for example
+      "north-wall.jpg, 3.9 MB, used in 2 articles" or "window-frame.jpg, 1.8 MB, unused"
+    And skeleton tiles show only after 150 ms: 8 on desktop and 9 on mobile for a first load
+      or a search, one row (4 or 3) at the end for "Load more"
+    And a 401 or 403 on any of these calls is handled globally by useApi, with no local copy
+
+  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
+      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
+      When the dialog opens
+      Then the Upload tab is selected, in its idle state
+      When the user selects the Library tab
+      Then the empty panel shows
+
+    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
+      When the user selects the Library tab
+      Then GET /v1/media/?limit=24 is sent
+
+  Rule: Browsing
+
+    Scenario: Library, nothing selected
+      Given the first page resolved with the 12-image fixture
+      Then the line "Newest first · 48 images" shows under the search field
+      And 12 tiles show in fixture order, 4 per row on desktop and 3 on mobile, each with its filename
+      And the tiles of "north-wall.jpg" and "logo-renew.svg" carry a sand "In this article" tag (bottom-left, 18 px high, 11 px text)
+      And no other tile carries it
+      And "Load more" shows below the grid, and "Insert image" is disabled
+
+    Scenario: A search is active, so the count is not shown
+      Given the user typed "wall" and the response resolved with 2 items
+      Then the line reads "Newest first"
+
+    Scenario: Load more is hidden on the last page
+      Given the response has next_cursor null
+      Then "Load more" is not shown
+
+    Scenario Outline: A tile's accessible name
+      Given the first page resolved with the 12-image fixture
+      Then the tile for "<filename>" is named "<name>"
+
+      Examples:
+        | filename            | name                                           |
+        | north-wall.jpg      | north-wall.jpg, 3.9 MB, used in 2 articles     |
+        | kitchen-before.webp | kitchen-before.webp, 1.1 MB, used in 1 article |
+        | window-frame.jpg    | window-frame.jpg, 1.8 MB, unused               |
+
+  Rule: Selection
+
+    Scenario Outline: A tile is selected by pointer or keyboard
+      Given the first page resolved with the 12-image fixture
+      When the user <action> on the tile of "kitchen-after.webp"
+      Then that tile has a 2 px primary outline (2 px offset) and a 20 px primary check at its top-right
+      And "Insert image" is enabled
+
+      Examples:
+        | action     |
+        | clicks     |
+        | presses Enter |
+        | presses Space |
+
+    Scenario: The selection panel
+      Given "kitchen-after.webp" is selected
+      Then the grid shrinks and a panel shows below it, under a 1 px top border
+      And the panel has a 56 px thumbnail, the filename "kitchen-after.webp", "2400 × 1600 · 1.2 MB", and a field "Alt text (optional)"
+      And the field's placeholder reads "e.g. North wall of the kitchen before plastering"
+      And its help reads "Describes the image for people who use a screen reader, and shows if it doesn't load. Leave it empty if the image is only decoration."
+      And "Load more" is hidden while an image is selected
+
+    Scenario: Selection is single
+      Given "kitchen-after.webp" is selected and the alt text reads "A kitchen"
+      When the user selects "window-frame.jpg"
+      Then only "window-frame.jpg" is selected and the alt text field is empty
+
+    Scenario: Activating the selected tile again keeps it selected
+      Given "kitchen-after.webp" is selected
+      When the user activates its tile
+      Then it stays selected
+
+    Scenario: An SVG's panel reads "Vector"
+      When the user selects "logo-renew.svg"
+      Then the panel reads "Vector · 8 KB"
+
+    Scenario: An image already in the article can be selected and inserted again
+      When the user selects "north-wall.jpg", which carries "In this article"
+      Then "Insert image" is enabled
+
+  Rule: Insert
+
+    Scenario: Insert with alt text
+      Given the user is on /article/12/edit in the Saved state with "kitchen-after.webp" (id 2, url "/static/uploadedImages/2.webp") selected
+      And the alt text reads "A kitchen with new oak worktops and white tiles"
+      When the user activates "Insert image"
+      Then insertImage is called with "/static/uploadedImages/2.webp", "A kitchen with new oak worktops and white tiles" and image id 2
+      And the image is in the editor's content at the cursor, with data-image-id 2
+      And SaveStatus reads "Unsaved changes" and Save is enabled
+      And a toast appears: color success, icon i-lucide-circle-check, title "Image added", description "Save to keep it in the article."
+      And the dialog closes at once
+      And no POST, PATCH or DELETE has been sent
+
+    Scenario: Empty alt text inserts a decorative image
+      Given "kitchen-after.webp" is selected and the alt text is empty
+      When the user activates "Insert image"
+      Then insertImage is called with alt ""
+
+    Scenario: Alt text lives only in the article
+      Given "kitchen-after.webp" is selected with alt text "A kitchen"
+      When the user activates "Insert image"
+      Then no request carries the alt text and the library item is unchanged
+
+    Scenario Outline: Leaving without inserting changes nothing
+      Given "kitchen-after.webp" is selected with alt text "A kitchen"
+      When the user <action>
+      Then the dialog closes, the editor's content and dirty state are unchanged, and no toast shows
+
+      Examples:
+        | action               |
+        | activates "Cancel"   |
+        | activates the x      |
+        | presses Escape       |
+
+  Rule: Search
+
+    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
+      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
+
+    Scenario: No results
+      Given GET /v1/media/?q=wall&limit=24 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"
+      Then the field is emptied and the list is requested again with no q
+
+  Rule: Load more
+
+    Scenario: Loading more shows progress and appends
+      Given the first page resolved with 12 images, next_cursor "c24"
+      When the user activates "Load more"
+      Then GET /v1/media/ is sent with limit=24 and cursor=c24
+      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"
+      When the user activates "Load more"
+      Then GET /v1/media/ is sent with q=wall, limit=24 and cursor=c24
+
+  Rule: Empty and failed
+
+    Scenario: Empty library
+      Given the Library tab is selected and GET /v1/media/?limit=24 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"
+      Then the Upload tab is selected
+
+    Scenario Outline: The library fails to load
+      Given GET /v1/media/ <failure>
+      When the Library tab loads
+      Then an error alert shows in the dialog: icon circle-x, title "Couldn't load your library", text "Check your connection and try again.", and a "Try again" button
+      And "Insert image" is disabled
+      When the user activates "Try again"
+      Then the same request is sent again with a skeleton, and on 200 the tiles replace the alert
+
+      Examples:
+        | failure                      |
+        | resolves with a 500 response |
+        | never reaches the server     |

features/editor_media_picker.qa.md

@@ -0,0 +1,54 @@
+# QA: The editor's Library tab
+
+## 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.
+
+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.
+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".
+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`.
+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`.
+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".
+- "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.
+- "Library: nothing selected": the 12 tiles, tags on ids 1 and 4, "Load more".
+- "Library: selected": id 2 (kitchen-after.webp, 2400 × 1600 · 1.2 MB), empty alt.
+- "Library: alt text entered": id 2 with alt "A kitchen with new oak worktops and white tiles".
+- "Library: loading more": 12 tiles plus one skeleton row, button "Loading…".
+- "Library: empty": a mock with zero items. "Library: no results": search "wall" and zero items.
+- "Library: failed to load": a 500.
+- "Inserted": the editor with an image (id 1 as the board draws it) and the toast "Image added" / "Save to keep it in the article.".
+- "Remove image: confirm": the confirm over the editor, image id 1 (north-wall.jpg, 3.9 MB). See `editor_image_removal.qa.md`.
+- "Removed": the editor without the image and the toast "Image removed" / "It's still in your library.".
+
+Clock-sensitive: none. Dates are absolute. Nothing is skipped.
+
+Layout facts the mocks must hit (from the frame): the dialog is 640 px at 40 px from the top; the tabs row has a 20 px gap and 24 px side padding; the body has 16 px top padding and 24 px side padding; the search field is 32 px (44 px on mobile); the grid gap is 12 px (8 px between columns on mobile).
+
+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 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.

features/get_current_user.feature

@@ -11,8 +11,8 @@ Feature: A logged-in user fetches their own public profile without triggering th
   Background:
     Given the public user struct and its converter, shared by the auth and user handlers from a
       package under api/pkg (features/user_display_name.feature), exactly the JSON shape
-      POST /v1/auth/verify returns: id, username, email, is_verified, created_at, updated_at and
+      POST /v1/auth/verify returns: id, username, email, is_verified, created_at, updated_at,
-      display_name
+      display_name and role
     And this slice adds GET /v1/auth/me, handled by a new MeHandler (api/handlers/auth/meHandler.go)
       built with NewMeHandler(container.GetUserUseCase), the same GetUserUseCase every other
       protected handler already gets from api/dependecyInjection.go; no new use case or domain
@@ -43,23 +43,23 @@ Feature: A logged-in user fetches their own public profile without triggering th
 
   Scenario: A verified user fetches their own profile
     Given a user repository containing user id 7, username "alice", email "alice@example.com",
-      is_verified true, TokenVersion 0
+      is_verified true, role "owner", TokenVersion 0
     And a valid jwt cookie for user id 7 encoding token_version 0
     When the client sends GET /v1/auth/me with that cookie
     Then the response status is 200
     And the response header Cache-Control is "no-store"
     And the response body is the user as JSON with id 7, username "alice", email
-      "alice@example.com", is_verified true
+      "alice@example.com", is_verified true, role "owner"
 
   Scenario: An unverified user still fetches their own profile, with is_verified false, not a 403
     Given a user repository containing user id 8, username "bob", email "bob@example.com",
-      is_verified false, TokenVersion 0
+      is_verified false, role "owner", TokenVersion 0
     And a valid jwt cookie for user id 8 encoding token_version 0
     When the client sends GET /v1/auth/me with that cookie
     Then the response status is 200
     And the response header Cache-Control is "no-store"
     And the response body is the user as JSON with id 8, username "bob", email "bob@example.com",
-      is_verified false
+      is_verified false, role "owner"
 
   Scenario: No jwt cookie at all is refused
     Given a user repository containing user id 7, username "alice", is_verified true, TokenVersion 0

features/get_current_user.qa.md

@@ -37,13 +37,13 @@ wiring pattern in `test/stale_token_invalidation_http_test.go`.
 ## HTTP-level checks
 
 8. Seed `mockUserRepo` with user id 7, username "alice", email "alice@example.com",
-   `IsVerified: true`, `TokenVersion: 0`. Mint a cookie for user 7 with `token_version: 0`.
+   `IsVerified: true`, `Role: owner`, `TokenVersion: 0`. Mint a cookie for user 7 with
-   `GET /v1/auth/me` → assert status `200`, `Cache-Control` header equals `"no-store"`, and the
+   `token_version: 0`. `GET /v1/auth/me` → assert status `200`, `Cache-Control` header equals
-   decoded JSON body has `id: 7`, `username: "alice"`, `email: "alice@example.com"`,
+   `"no-store"`, and the decoded JSON body has `id: 7`, `username: "alice"`,
-   `is_verified: true`.
+   `email: "alice@example.com"`, `is_verified: true`, `role: "owner"`.
-9. Seed user id 8, username "bob", email "bob@example.com", `IsVerified: false`,
+9. Seed user id 8, username "bob", email "bob@example.com", `IsVerified: false`, `Role: owner`,
    `TokenVersion: 0`. Mint a matching cookie. `GET /v1/auth/me` → assert status `200` (not 403),
-   `Cache-Control: no-store`, and `is_verified: false` in the body.
+   `Cache-Control: no-store`, `is_verified: false` and `role: "owner"` in the body.
 10. No `jwt` cookie at all against the router from step 6 → assert status `401` (produced by
     `jwtauth.Authenticator` itself; don't assert an exact body for this case, same rationale as
     `features/account_verification.qa.md` step 15).

features/image_upload_rules.feature

@@ -17,8 +17,8 @@ Feature: Allowed image types and the size limit are a domain rule
       the matching sentinel and calling the repository not at all when either check fails
     And ImageRepository.Create no longer rejects an unrecognized content type itself; it
       only maps an already-allowed content type to a file extension
-    And no image HTTP endpoint is mounted in api/router.go as of this slice, so this
+    And the HTTP mapping of these sentinels is 413, 415 and 400, specified in
-      behavior is observable only through CreateImageUseCase
+      features/media_library.feature
 
   Scenario Outline: CreateImage accepts every allowed content type within the size limit
     Given an empty image repository fake

features/invitations.feature

@@ -6,9 +6,13 @@ Feature: A verified user can invite another person by email, and the users list
     registration stays closed to everyone who was not invited
 
   Background:
-    Given the workspace is shared: there are no roles, no ownership and no way to remove a user
+    Given the workspace is shared: every verified user sees the same articles and the same list,
+      roles are owner and admin (features/user_roles.feature), and there is no way to remove a user
     And POST /v1/user/invite and GET /v1/user/ are mounted in NewUserRouter, inside the group that
       requires a valid jwt cookie, a current token_version and a verified user
+    And POST /v1/user/invite additionally requires the owner role (403
+      apperr.OwnerRequiredErrorMessage for an admin); GET /v1/user/ is open to every verified user
+    And wherever a scenario has verified user id 7 post an invite, user 7 is the owner
     And an invite has an id, an email stored in lower case, a hashed code, an expires_at equal to
       its creation time plus 3 days, an invited_by user id, a nullable accepted_at and a created_at
     And the raw invite code is a uuid, hashed with the same hash.Hasher used for verification codes,
@@ -17,8 +21,8 @@ Feature: A verified user can invite another person by email, and the users list
       expires_at is in the future, expired when accepted_at is empty and expires_at is in the past,
       accepted when accepted_at is set
     And the users list item shape is: id, kind ("user" or "invite"), status, created_at, plus
-      username and display_name for a user, plus email for an invite; a user is never listed with
+      username, display_name, email and role for a user, plus email for an invite; neither the
-      an email, and neither the code, its hash, invited_by nor password fields ever appear
+      code, its hash, invited_by nor password fields ever appear
     And error responses are plain text from http.Error, success responses are JSON
     And the invite email uses the template "invitation" with data Host (the configured PublicURL),
       VerificationCode (the raw code), Email (the invited address) and InvitedBy (the inviter's
@@ -30,7 +34,7 @@ Feature: A verified user can invite another person by email, and the users list
       /login and /password-reset
 
   Scenario: A verified user invites a new address
-    Given a user repository containing verified user id 7, username "marta", display_name ""
+    Given a user repository containing verified user id 7, who is the owner, username "marta", display_name ""
     And an empty invite repository
     And a valid jwt cookie for user id 7
     When the client sends POST /v1/user/invite with body {"email": "Sam.Oliveira@Renew.example"}
@@ -116,6 +120,7 @@ Feature: A verified user can invite another person by email, and the users list
       | with no jwt cookie                             | POST   | /v1/user/invite | 401    |
       | with a jwt cookie of an unverified user        | POST   | /v1/user/invite | 403    |
       | with a jwt cookie whose token_version is stale | POST   | /v1/user/invite | 401    |
+      | with a jwt cookie of a verified admin          | POST   | /v1/user/invite | 403    |
       | with no jwt cookie                             | GET    | /v1/user/       | 401    |
       | with a jwt cookie of an unverified user        | GET    | /v1/user/       | 403    |
 
@@ -142,9 +147,10 @@ Feature: A verified user can invite another person by email, and the users list
     And the accepted invite is not listed
     And the invite items have exactly the keys id, kind, email, status, created_at, with kind
       "invite" and status "pending" or "expired"
-    And the user items have exactly the keys id, kind, username, display_name, status, created_at,
+    And the user items have exactly the keys id, kind, username, display_name, email, role, status,
-      with kind "user" and status "accepted"
+      created_at, with kind "user" and status "accepted"
-    And no user item has an email key, and no item has a key named password, password_reset_code,
+    And each user item has its own email and a role
+    And no item has a key named password, password_reset_code,
       verification_code, verification_expiration, password_reset_expiration, token_version,
       code, hashed_code, invited_by or accepted_at
 

features/invitations.qa.md

@@ -14,11 +14,13 @@ plus a `fixedClock` only if the use case takes one. Reuse `mockUserRepo` and `st
 3. Handler: `user.NewHandler(updateProfile, createInvite, listUsersAndInvites)` mounted on a fresh
    `chi.NewRouter()` mirroring `NewUserRouter`: `jwtauth.Verifier` + `jwtauth.Authenticator` with
    `jwtauth.New("HS256", []byte("test-secret"), nil)`, `RequireCurrentToken(getUser)`,
-   `RequireVerifiedUser(getUser)`, then `POST /invite` and `GET /`. For the rate-limit case
+   `RequireVerifiedUser(getUser)`, then `POST /invite` and `GET /`. `POST /invite` is also wrapped
-   wrap only `POST /invite` in `TrustedProxyRealIP(nil)` + `NewRateLimiter(2, time.Minute)`.
+   in `RequireOwner(getUser)`, placed before the limiter. For the rate-limit case
+   wrap only `POST /invite` in `RequireOwner(getUser)` + `TrustedProxyRealIP(nil)` +
+   `NewRateLimiter(2, time.Minute)`.
    Requests via `httptest`; jwt cookie built with the `user_id` and `token_version` claims as in
    `test/verified_account_required_http_test.go`. No live server, no real SQLite, no real SMTP.
-4. Seed users: verified id 7 "marta"; unverified id 8 for the 403 cases. Time is real: build
+4. Seed users: verified id 7 "marta" with `Role: owner`; unverified id 8 for the 403 cases. Time is real: build
    invites with `ExpiresAt`/`CreatedAt` relative to `time.Now()` and compare with a 5 s tolerance.
 
 ## POST /v1/user/invite
@@ -47,7 +49,8 @@ plus a `fixedClock` only if the use case takes one. Reuse `mockUserRepo` and `st
     `inviteRepo` empty. Repeat the same request without re-arming -> `201`. With a seeded expired invite and a
     failing send -> `500` and no invite for that address remains.
 13. Auth table (`POST`): no cookie -> `401`; cookie of unverified user 8 -> `403`; cookie with stale
-    `token_version` -> `401`. Each asserts no invite and no mail.
+    `token_version` -> `401`; cookie of a verified admin (seeded with `Role: admin`) -> `403`, plain
+    text body exactly `apperr.OwnerRequiredErrorMessage`. Each asserts no invite and no mail.
 14. Rate limit: limiter of 2 per minute, `RemoteAddr` `203.0.113.20:1234`, three valid POSTs -> `201`,
     `201`, `429`; third body is exactly `apperr.TooManyRequestsErrorMessage`, has `Retry-After`, and adds no
     invite or mail. `GET /` from the same address afterwards is not `429`.
@@ -55,9 +58,10 @@ plus a `fixedClock` only if the use case takes one. Reuse `mockUserRepo` and `st
 ## GET /v1/user/
 15. Seed per the feature scenario (three users, an expired, a pending and an accepted invite, with the
     stated `CreatedAt` values). `200`; decode as `[]map[string]json.RawMessage`. Assert length 5, order
-    (pending sam, expired p.huber, ines, jonas, marta), key sets exactly as specified for user and invite
+    (pending sam, expired p.huber, ines, jonas, marta), key sets exactly as specified: `id`, `kind`,
-    items, accepted invite absent, and none of the forbidden keys anywhere. Also assert the raw body string
+    `username`, `display_name`, `email`, `role`, `status`, `created_at` for user items and `id`, `kind`,
-    contains no user email address.
+    `email`, `status`, `created_at` for invite items, accepted invite absent, and none of the forbidden
+    keys anywhere. Also assert the raw body string contains each accepted user's own email address.
 16. Only user 7 -> array with exactly one `kind:"user"` item, status `accepted`.
 17. Invite created 3 days + 1 minute ago -> `status:"expired"`; created 2 days ago -> `pending`;
     with `AcceptedAt` set -> not listed.

features/invite_management.feature

@@ -0,0 +1,205 @@
+Feature: The owner can cancel a pending invite and renew a pending or expired one
+
+  As the owner of the shared RenewCMS workspace
+  I want to cancel an invite I no longer want, or renew one that is stale or expired
+  So that only the people I currently intend to invite can create an account
+
+  Background:
+    Given the invite domain, the invitation email and the roles are those of features/invitations.feature
+      and features/user_roles.feature
+    And DELETE /v1/user/invite/{id} and POST /v1/user/invite/{id}/renew are mounted in NewUserRouter,
+      in the same group as POST /v1/user/invite: valid jwt cookie, current token_version, verified user,
+      owner role, trusted-proxy real IP, then the auth rate limiter
+    And the checks run in this order: 401, 403 unverified, 403 not owner, 429, 400 invalid id, 404, 409,
+      then the action
+    And user 7 "marta" is the verified owner and user 9 "jonas" is a verified admin
+    And error responses are plain text from http.Error, and the messages are:
+      | case                        | status | body                                                   |
+      | unknown invite              | 404    | Invite not found                                       |
+      | invite already accepted     | 409    | This invite has already been accepted.                 |
+      | id is not a uint32          | 400    | apperr.IdUint32ErrorMessage                            |
+      | not the owner               | 403    | Only the owner can do this.                            |
+      | no valid session            | 401    | apperr.UnauthorizedErrorMessage                        |
+      | rate limited                | 429    | apperr.TooManyRequestsErrorMessage                     |
+      | renew email not sent        | 500    | Couldn't send the invite. Try again in a moment.       |
+    And the renew response has the same shape as the create response: exactly the keys id, kind
+      ("invite"), email, status, created_at and expires_at
+
+  Rule: Cancelling an invite
+
+    Scenario: The owner cancels a pending invite
+      Given an invite id 3 for "sam.oliveira@renew.example", pending, created by user 7
+      And a valid jwt cookie for user 7
+      When the client sends DELETE /v1/user/invite/3
+      Then the response status is 204
+      And the response body is empty
+      And the invite repository no longer holds invite 3
+      And no email was sent
+      And GET /v1/user/ no longer lists the invite
+
+    Scenario: A cancelled invite's link stops working
+      Given invite 3 was cancelled by the owner
+      When the client sends GET /v1/auth/invite?c=<the code from that invite>
+      Then the response status is 404
+      And the response body is "This invite link doesn't work."
+      And accepting the invite with that code returns 404, creates no user and sets no cookie
+
+    Scenario: A cancelled address can be invited again
+      Given invite 3 for "sam.oliveira@renew.example" was cancelled
+      When the owner sends POST /v1/user/invite for that address
+      Then the response status is 201
+
+    Scenario: The owner cancels an expired invite
+      Given invite 4 is expired
+      When the owner sends DELETE /v1/user/invite/4
+      Then the response status is 204
+      And the invite repository no longer holds invite 4
+
+    Scenario: Other invites and users are untouched
+      Given invites 3 and 4 and users 7 and 9
+      When the owner cancels invite 3
+      Then invite 4 and users 7 and 9 are unchanged
+
+    Scenario: An unknown invite is not found
+      When the owner sends DELETE /v1/user/invite/999
+      Then the response status is 404
+      And the response body is "Invite not found"
+
+    Scenario: Cancelling twice is not found
+      Given the owner cancelled invite 3
+      When the owner sends DELETE /v1/user/invite/3 again
+      Then the response status is 404
+
+    Scenario: An accepted invite cannot be cancelled
+      Given invite 5 was accepted and its user exists
+      When the owner sends DELETE /v1/user/invite/5
+      Then the response status is 409
+      And the response body is "This invite has already been accepted."
+      And invite 5 and its user remain
+
+  Rule: Renewing an invite
+
+    Scenario: The owner renews an expired invite
+      Given invite 4 for "lea.martin@renew.example", created 5 days ago, expired 2 days ago,
+        invited_by 7, stored code hash "hashed:OLD-CODE"
+      And a valid jwt cookie for user 7
+      When the client sends POST /v1/user/invite/4/renew
+      Then the response status is 200
+      And the response has Cache-Control "no-store"
+      And the response id is 4, kind "invite", email "lea.martin@renew.example" and status "pending"
+      And created_at is now and expires_at is 3 days after created_at, each within 5 seconds
+      And the response body has no key named code, hashed_code, invited_by or accepted_at
+      And the invite repository holds exactly one invite for that address, with id 4, a new code hash,
+        invited_by 7 and accepted_at empty
+
+    Scenario: The owner renews a pending invite
+      Given invite 3 is pending
+      When the owner sends POST /v1/user/invite/3/renew
+      Then the response status is 200
+      And invite 3 has a new code hash and created_at now
+
+    Scenario: A renewed invite moves to the top of the users list
+      Given invite 3 is pending and older than invite 6
+      When the owner renews invite 3
+      Then GET /v1/user/ lists invite 3 before invite 6
+
+    Scenario: The old link is dead and the new link works
+      Given invite 4 was renewed and the raw code in the new email is NEW-CODE
+      When the client sends GET /v1/auth/invite?c=<the old code>
+      Then the response status is 404
+      And accepting with the old code returns 404 and creates no user
+      And GET /v1/auth/invite?c=NEW-CODE returns 200 with {"email": "lea.martin@renew.example"}
+      And this holds when the renewed invite was pending as well as expired
+
+    Scenario: Renewing sends the invitation email again
+      When the owner renews invite 4
+      Then exactly one email was sent, with template "invitation"
+      And its Host is the configured PublicURL, its Email is the invited address, its InvitedBy is
+        the acting owner's display name or, when empty, username
+      And its VerificationCode is the new raw code
+      And the link in it is <Host>/invite/accept?c=<new raw code>
+      And the invite's invited_by is unchanged
+
+    Scenario: An unknown or cancelled invite is not found
+      When the owner sends POST /v1/user/invite/999/renew
+      Then the response status is 404
+      And the response body is "Invite not found"
+      And renewing a cancelled invite also returns 404
+
+    Scenario: An accepted invite cannot be renewed
+      Given invite 5 was accepted
+      When the owner sends POST /v1/user/invite/5/renew
+      Then the response status is 409
+      And the response body is "This invite has already been accepted."
+      And invite 5 is unchanged and no email was sent
+
+    Scenario: A failed email leaves the invite as it was
+      Given expired invite 4 and an email repository whose next send fails
+      When the owner sends POST /v1/user/invite/4/renew
+      Then the response status is 500
+      And the response body is "Couldn't send the invite. Try again in a moment."
+      And invite 4 keeps its old code hash, expires_at and created_at, and is still expired
+      And a pending invite whose renew mail fails keeps its old link valid
+      And a retry of the same request returns 200
+
+  Rule: Only the owner can manage invites
+
+    Scenario Outline: Access is checked on both endpoints
+      Given invite 3 is pending
+      When <caller> sends <method> <path>
+      Then the response status is <status>
+      And invite 3 is unchanged
+      And no email was sent
+
+      Examples:
+        | caller                          | method | path                        | status |
+        | a client with no cookie         | DELETE | /v1/user/invite/3           | 401    |
+        | a client with no cookie         | POST   | /v1/user/invite/3/renew     | 401    |
+        | a stale token_version           | DELETE | /v1/user/invite/3           | 401    |
+        | a stale token_version           | POST   | /v1/user/invite/3/renew     | 401    |
+        | an unverified user              | DELETE | /v1/user/invite/3           | 403    |
+        | an unverified user              | POST   | /v1/user/invite/3/renew     | 403    |
+        | verified admin 9                | DELETE | /v1/user/invite/3           | 403    |
+        | verified admin 9                | POST   | /v1/user/invite/3/renew     | 403    |
+
+    Scenario: An admin is refused with the owner message, even on an unknown id
+      When admin 9 sends DELETE /v1/user/invite/999
+      Then the response status is 403
+      And the response body is "Only the owner can do this."
+
+    Scenario Outline: An id that is not a uint32 is rejected
+      When the owner sends <method> <path>
+      Then the response status is 400
+      And the response body is apperr.IdUint32ErrorMessage
+
+      Examples:
+        | method | path                            |
+        | DELETE | /v1/user/invite/abc             |
+        | DELETE | /v1/user/invite/-1              |
+        | DELETE | /v1/user/invite/4294967296      |
+        | POST   | /v1/user/invite/abc/renew       |
+        | POST   | /v1/user/invite/-1/renew        |
+        | POST   | /v1/user/invite/4294967296/renew|
+
+  Rule: Rate limiting
+
+    Scenario: Requests over the limit are refused
+      Given the auth rate limiter allows 2 requests per window
+      When the owner sends three valid requests to DELETE or renew from IP 203.0.113.40
+      Then the third response is 429 with apperr.TooManyRequestsErrorMessage and a Retry-After header
+      And the third request changes nothing and sends no email
+      And GET /v1/user/ from the same address is not 429
+
+    Scenario: An admin does not use up the quota
+      When admin 9 sends three requests from one IP
+      Then all three responses are 403, not 429
+
+    Scenario: The counter is shared with inviting
+      Given the auth rate limiter allows 2 requests per window
+      When the owner sends POST /v1/user/invite, then renews an invite, then sends DELETE /v1/user/invite/3
+      Then the DELETE returns 429
+
+  Rule: Existing behaviour is unchanged
+
+    Scenario: The invitation and acceptance features still hold
+      Then every scenario of features/invitations.feature and features/accept_invitation.feature still passes

features/invite_management.qa.md

@@ -0,0 +1,71 @@
+# QA procedure: invite management
+
+Package: `test` (black-box). Reuse `mockUserRepo`, `stubHasher`, `mockMailRepo` and `mockInviteRepo`.
+Extend `mockInviteRepo` with the new renew method and a `failSwitch` entry for it (unique type names
+across the package). No live server, no real SQLite (except case 27), no real SMTP.
+
+## Setup shared by every case
+1. Call `validator.InitValidator()` once.
+2. Use cases over domain interfaces only: `CreateInvite`, `ListUsersAndInvites`, `GetInvite`, the accept
+   use case, plus the new cancel and renew use cases (final names are the coder's).
+3. Handler built with `NewHandler(...)` on a fresh `chi.NewRouter()` mirroring `NewUserRouter`:
+   `jwtauth.Verifier` + `jwtauth.Authenticator` (`jwtauth.New("HS256", []byte("test-secret"), nil)`),
+   `RequireCurrentToken`, `RequireVerifiedUser`, `GET /`, then a group with `RequireOwner`,
+   `TrustedProxyRealIP(nil)` and `NewRateLimiter` containing `POST /invite`, `DELETE /invite/{id}` and
+   `POST /invite/{id}/renew`. Mount `GET /invite` and `POST /invite/accept` from the auth handler for the
+   old-link cases.
+4. Seed users: owner 7 "marta", unverified 8, admin 9. Invite hashes are `"hashed:"+raw`. Times are
+   relative to `time.Now()`, compared with a 5 s tolerance.
+
+## DELETE /v1/user/invite/{id}
+5. Pending invite, owner cookie -> `204`, empty body, invite gone, no mail, absent from `GET /`.
+6. After cancel: `GET /invite?c=<code>` -> `404`; accept -> `404`, no user, no cookie; re-invite the address -> `201`.
+7. Expired invite -> `204`.
+8. Unknown id -> `404` "Invite not found"; second delete -> `404`.
+9. Accepted invite -> `409` "This invite has already been accepted."; invite and user remain.
+10. Other invites and users unchanged after a cancel.
+11. Repository delete failure -> `500`, invite still present.
+
+## POST /v1/user/invite/{id}/renew
+12. Expired invite -> `200`, `Cache-Control: no-store`; key set exactly `id`, `kind`, `email`, `status`,
+    `created_at`, `expires_at`; no `code`, `hashed_code`, `invited_by`, `accepted_at`.
+13. Stored invite: same id, new hash, `invited_by` 7, `accepted_at` nil, `created_at` about now,
+    `expires_at` = `created_at` + 72h.
+14. Pending invite renews with `200`, new hash.
+15. Mail: exactly one entry, template `invitation`, `Host`, `Email`, `InvitedBy` by display name or username
+    of the acting owner, `VerificationCode` = raw new code.
+16. `GET /` lists the renewed invite first.
+17. Old code: `GET /invite` and accept -> `404`, no user; new code -> `200` with the email. Control checks before
+    the renew show the old code worked. Same for pending.
+18. Unknown id -> `404`; cancelled id -> `404`.
+19. Accepted -> `409`, all fields unchanged, no mail.
+20. `mailRepo.fail.failNext("Send")` -> `500` "Couldn't send the invite. Try again in a moment."; invite hash,
+    expiry and created_at unchanged; retry -> `200`.
+21. Renew persistence failure -> `500`, no mail, invite unchanged.
+
+## Access and ids (table over both endpoints)
+22. No cookie -> `401`; stale `token_version` -> `401`; unverified -> `403`; admin -> `403` with body
+    `apperr.OwnerRequiredErrorMessage`; admin on an unknown id -> `403`. Each: invite unchanged, no mail.
+23. Ids `abc`, `-1`, `4294967296` -> `400` `apperr.IdUint32ErrorMessage` on both endpoints.
+
+## Rate limit
+24. Limiter of 2, `RemoteAddr` `203.0.113.40:1234`: third request -> `429`, `apperr.TooManyRequestsErrorMessage`,
+    `Retry-After`, no change, no mail. `GET /` from the same address is not `429`.
+25. Admin's three requests -> `403`, `403`, `403`.
+26. Shared counter: `POST /invite`, renew, then `DELETE` -> `429`.
+
+## Use case and persistence
+27. Use case level:
+    - unknown id -> `errors.Is(err, ErrInviteNotFound)`; accepted -> the accepted sentinel (name is the coder's);
+    - success returns the same id, a new hash, `CreatedAt` about now, `ExpiresAt` = `CreatedAt` + `invite.Lifetime`;
+    - mail failure wraps `ErrInviteEmailNotSent` and restores the prior values;
+    - the mail logic is shared with `CreateInvite`.
+28. Persistence on in-memory SQLite: the renew method updates hash, expiry and created_at by id, returns
+    `ErrInviteNotFound` when the row is missing or already accepted.
+
+## Manual
+Renew against a real or sandboxed SMTP server: one mail arrives, the new link works, the old mail's link is dead.
+Persistence across a restart on a fresh SQLite file. Review layering and that no comments were introduced.
+
+## Out of scope
+SPA handling of 404, 409 and 429 on these endpoints: this slice is API-only.

features/media_browse.feature

@@ -0,0 +1,370 @@
+Feature: Media page, part 1: browse and manage
+
+  As a verified RenewCMS owner
+  I want /media to show every image in my library, let me search, filter, sort and switch view, and
+    let me inspect, copy, rename and delete one image at a time
+  So that I can manage the library from one place, with the page always reflecting what the
+    server actually holds
+
+  Background:
+    Given /media is a verified route (meta.auth "verified", meta.title "Media") rendered as
+      MediaPage inside DashboardShell, per docs/design/routes.md
+    And the sidebar gains the item "Media" (icon images) between "Articles" and "Users", in the
+      desktop sidebar and in the mobile drawer, it is the active item on /media, and the
+      breadcrumb reads "Media" (mobile title "Media")
+    And this slice is SPA only: the API from slice A already exists and is used unchanged, and
+      no Go code, use case or repository changes
+    And upload, multi-select, the bulk bar, the Duplicates tab content, duplicate merge,
+      drag-and-drop and the rate-limited state are specified in
+      features/media_upload_selection_duplicates.feature
+    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 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
+      means grid); a value outside these sets is dropped and the default applies; the names
+      mirror the API's own q, filter and sort parameters
+    And the header shows the title "Media", the subtitle "Every image you've uploaded, ready to
+      use in any article." and a primary "Upload" button (icon upload) on the right; on mobile it is
+      the full-width 48 px button pinned to the bottom
+    And the toolbar holds the tabs "All", "Unused" and "Duplicates" with a count each, then the
+      search field (placeholder "Search by filename"), the sort menu (options "Newest", "Oldest",
+      "Name", "Largest", sent as sort=newest, oldest, name, largest) and the grid/list toggle
+      (icons layout-grid and list); below md the toolbar stacks: search, tabs, then sort and toggle
+    And the tab counts come from the response's counts object (all, unused, duplicates). The
+      Duplicates count is a number of groups, drawn as an info-tinted badge only while it is
+      above 0. The All and Unused counts are drawn as plain muted mono numbers, as in the board
+    And the Duplicates tab selects the groups view and ?filter=duplicates is a valid value
+    And the grid is 5 columns on desktop and 2 on mobile, with a 16 px gap (10 px on mobile),
+      and each card is one button holding MediaThumb (4:3, a checkerboard behind PNG and SVG),
+      the filename (medium weight, ellipsis), "size · dimensions" and the MediaBadges; an SVG's
+      dimensions read "Vector"
+    And sizes read "8 KB" and "860 KB" (whole KB) below 1 MB and "3.9 MB" (one decimal, 1024
+      base) from 1 MB up; dimensions read "4032 × 3024"; dates read "12 Sep 2026" (absolute,
+      never relative); the Type column reads JPEG, PNG, WEBP or SVG from content_type
+    And the MediaBadges are: "Unused" (warning-soft fill, icon unlink) when used_in is 0,
+      "Duplicate" (info-soft fill, icon copy) when duplicate is true, and "Used in N"
+      (outline, toned text) when used_in is above 0; in the detail panel the article rows use
+      "Online" (icon globe, inverted fill) and "Draft" (icon pencil-line, outline)
+    And each card's accessible name reads "north-wall.jpg, 3.9 MB, used in 2 articles",
+      "kitchen-before.webp, 1.1 MB, used in 1 article" (singular for 1) or "window-frame.jpg,
+      1.8 MB, unused"
+    And list view is a table from md up (columns Filename with a 40 px thumbnail and the
+      Duplicate badge, Dimensions, Size, Type, Used in, Uploaded by, and Uploaded with an
+      arrow-down as the sorted column; 36 px header, 56 px rows) and a card list below md (56 px
+      thumbnail, filename, "size · dimensions · type", badges plus "uploader · date", and a
+      trailing chevron-right); in the table the "Used in" cell is an underlined count that
+      opens the detail panel, and reads the Unused badge when used_in is 0
+    And the checkbox column of the table (36 px), the 44 px checkbox column of the card list and
+      the "Select all" row above the grid are specified in
+      features/media_upload_selection_duplicates.feature
+    And the detail panel is a USlideover: 460 px on the right on desktop (a close button x),
+      full screen on mobile with an arrow-left back button; its title is the filename; the body
+      holds the 16:10 preview (4:3 on mobile), the actions "Copy URL" (icon link), "Rename"
+      (icon pencil) and "Delete" (icon trash-2, error-coloured text), the duplicate alert when
+      the image is a duplicate, the metadata list (Type, Size, Dimensions, Uploaded, Uploaded by,
+      and URL in mono) and the "Used in" section
+    And opening the panel for an image with used_in above 0 calls GET /v1/media/{id}/usage; for an
+      image with used_in 0 no usage call is sent
+    And the dialogs (Rename, Delete) are UModal with sm:max-w-md, a bottom sheet on mobile and
+      Cancel first; while a request runs the confirm button shows a loader-circle, both buttons
+      are disabled, and the dialog cannot be dismissed by Cancel, Escape or a backdrop click; a
+      failure shows an error alert at the top of the dialog body and the dialog stays open
+    And every success toast lasts 5 s; toast ids follow the action-plus-id convention:
+      "media-url-copied-{id}", "media-renamed-{id}", "media-deleted-{id}", "media-not-found-{id}"
+    And the library is this 12-image fixture, newest first (id, filename, size, dimensions, type,
+      used in, uploader, uploaded, flags), from the board's own script:
+      | id | filename              | size   | dimensions  | type | used | uploaded by | uploaded    | flags     |
+      | 1  | north-wall.jpg        | 3.9 MB | 4032 × 3024 | JPEG | 2    | Marta Alves | 12 Sep 2026 |           |
+      | 2  | kitchen-after.webp    | 1.2 MB | 2400 × 1600 | WEBP | 3    | Inès Duarte | 8 Sep 2026  |           |
+      | 3  | kitchen-before.webp   | 1.1 MB | 2400 × 1600 | WEBP | 1    | Inès Duarte | 8 Sep 2026  |           |
+      | 4  | logo-renew.svg        | 8 KB   | Vector      | SVG  | 5    | jonas       | 5 Sep 2026  | alpha     |
+      | 5  | floorboards-copy.jpg  | 2.4 MB | 3600 × 2400 | JPEG | 3    | Marta Alves | 2 Sep 2026  | duplicate |
+      | 6  | IMG_2208.jpg          | 2.4 MB | 3600 × 2400 | JPEG | 2    | jonas       | 30 Aug 2026 | duplicate |
+      | 7  | IMG_4471.jpg          | 3.1 MB | 3600 × 2400 | JPEG | 2    | Marta Alves | 29 Aug 2026 | duplicate |
+      | 8  | window-frame.jpg      | 1.8 MB | 3000 × 2000 | JPEG | 0    | Inès Duarte | 28 Aug 2026 |           |
+      | 9  | stone-wall-detail.jpg | 3.1 MB | 3600 × 2400 | JPEG | 1    | jonas       | 21 Aug 2026 | duplicate |
+      | 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
+
+  Scenario: Default, many images
+    Given GET /v1/media/?filter=all&sort=newest&limit=100 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
+      Duplicates count drawn as an info-tinted badge
+    And the grid shows the 12 images in exactly the fixture's order, 5 per row on desktop and 2
+      on mobile, each card with its thumbnail, filename, "size · dimensions" and badges
+    And the "Select all" row above the grid reads "Select all" and "12 images"
+    And the toolbar shows "Search by filename", the sort "Newest" and the grid toggle selected
+
+  Scenario Outline: Each card's badges and accessible name follow the image
+    Given the Default state has loaded
+    Then the card for "<filename>" has the accessible name "<name>" and the badges "<badges>"
+
+    Examples:
+      | filename            | name                                           | badges               |
+      | north-wall.jpg      | north-wall.jpg, 3.9 MB, used in 2 articles     | Used in 2            |
+      | kitchen-before.webp | kitchen-before.webp, 1.1 MB, used in 1 article | Used in 1            |
+      | window-frame.jpg    | window-frame.jpg, 1.8 MB, unused               | Unused               |
+      | floorboards.jpg     | floorboards.jpg, 2.4 MB, used in 4 articles    | Duplicate, Used in 4 |
+      | logo-renew.svg      | logo-renew.svg, 8 KB, used in 5 articles       | Used in 5            |
+
+  Scenario: Grid, few images, keeps card size
+    Given GET /v1/media/ resolves 200 with ids 1, 4 and 8 and counts { all: 3, unused: 1, duplicates: 0 }
+    When the user navigates to /media
+    Then three cards render at the same size as in the 12-image grid, not stretched
+    And a checkerboard shows behind the SVG thumbnail of "logo-renew.svg"
+    And the tabs read "All 3", "Unused 1" and "Duplicates" with no count badge
+
+  Scenario: List view, desktop, is a table
+    Given the Default state has loaded at md width or more
+    When the user activates the list icon in the toggle
+    Then the URL gains ?view=list
+    And a table shows the columns Filename, Dimensions, Size, Type, Used in, Uploaded by and
+      Uploaded (with an arrow-down), 12 rows of 56 px under a 36 px header, in fixture order
+    And each Filename cell shows a 40 px thumbnail, the filename and, for duplicates, the
+      Duplicate badge; the Used in cell shows an underlined count, or the Unused badge
+      for id 8 and id 10
+    And the Uploaded by cells read the uploader and the Uploaded cells read "12 Sep 2026"
+
+  Scenario: List view, mobile, is a card list
+    Given the Default state has loaded below md width with ?view=list
+    Then a card list replaces the grid; each row shows a 56 px thumbnail, the filename,
+      "3.9 MB · 4032 × 3024 · JPEG", the badges followed by "Marta Alves · 12 Sep 2026", and a
+      trailing chevron-right
+    When the user taps a row
+    Then the detail panel opens for that image
+
+  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
+    And the control shows "<control>"
+
+    Examples:
+      | url                    | request                   | control                                     |
+      | ?filter=unused         | filter=unused&sort=newest | tab "Unused" selected                       |
+      | ?sort=largest          | filter=all&sort=largest   | sort "Largest"                              |
+      | ?sort=name             | filter=all&sort=name      | sort "Name"                                 |
+      | ?sort=oldest           | filter=all&sort=oldest    | sort "Oldest"                               |
+      | ?q=wall                | q=wall&filter=all         | search field "wall"                         |
+      | ?view=list             | filter=all&sort=newest    | list icon selected                          |
+      | ?filter=bogus&sort=zzz | filter=all&sort=newest    | tab "All" and sort "Newest", URL kept clean |
+      | ?filter=duplicates     | filter=all&sort=newest    | tab "All" selected                          |
+
+  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
+    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
+    Then the URL gains sort=largest and the list is requested again
+    And selecting "All" removes filter from the URL, "Newest" removes sort, and the grid icon removes view
+
+  Scenario: Loading, skeleton cards after 150 ms
+    Given GET /v1/media/ has not yet resolved
+    When the user navigates to /media
+    Then nothing is drawn for the first 150 ms
+    And after 150 ms 10 skeleton cards (6 on mobile) replace the images, the list container is
+      aria-busy="true", and the toolbar stays visible
+    When the request resolves 200 with the 12-image fixture
+    Then the skeleton cards are replaced by the Default state's cards
+    And the same skeleton appears on a retry and on a change of search, tab or sort, in grid and
+      list view alike
+
+  Scenario: Empty library, first run
+    Given GET /v1/media/ resolves 200 with zero items and counts { all: 0, unused: 0, duplicates: 0 } and no q
+    When the user navigates to /media
+    Then the toolbar and the tabs are hidden
+    And one panel shows the images icon, title "No images yet", text "Upload your first image. You can use it in any article.", a primary "Upload an image" button, and under it "PNG, JPEG, WEBP, SVG · max 10 MB each"
+
+  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
+    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
+
+  Scenario: Hover, focus and keyboard
+    Given the Default state has loaded on desktop
+    Then every card is one button and one tab stop
+    When the pointer rests on the second card ("kitchen-after.webp")
+    Then its border darkens (border-accented) and it gains the pop shadow
+    When the third card ("kitchen-before.webp") takes keyboard focus
+    Then it shows a 2 px primary ring with a 2 px offset and its accessible name reads "kitchen-before.webp, 1.1 MB, used in 1 article"
+    When the user presses an arrow key on a card
+    Then focus moves to the neighbouring card across the grid (left and right by one, up and down by one row, stopping at the edges)
+    When the user presses Enter on a card
+    Then the detail panel opens for that image
+    When the user presses Space on a card
+    Then the card's selection toggles and no panel opens
+
+  Scenario: Detail panel, in use
+    Given the Default state has loaded and GET /v1/media/1/usage resolves 200 with [{ id: 10, title: "How we price a bathroom renovation", published: true }, { id: 11, title: "Winter checklist for timber windows", published: false }]
+    When the user activates the "north-wall.jpg" card
+    Then the slideover opens with the title "north-wall.jpg", a 16:10 preview and the actions "Copy URL", "Rename" and "Delete" (Delete in error-coloured text)
+    And the metadata list reads Type "JPEG", Size "3.9 MB", Dimensions "4032 × 3024", Uploaded "12 Sep 2026", Uploaded by "Marta Alves" and URL in mono
+    And the "Used in" section reads "Used in 2 articles" over one bordered row per article: the title as an underlined link to /article/{id}/edit, a badge "Online" (icon globe, inverted) for "How we price a bathroom renovation" or "Draft" (icon pencil-line, outline) for "Winter checklist for timber windows", and an arrow-up-right
+    And the footnote reads "Counted from the text of your articles each time you open this page."
+    When the user closes the panel (x, the back arrow on mobile, or Escape)
+    Then the panel closes and focus returns to the "north-wall.jpg" card
+
+  Scenario: Detail panel, unused
+    Given the Default state has loaded
+    When the user activates the "window-frame.jpg" card
+    Then no usage request is sent
+    And the "Used in" section reads "Not used in any article" over the text "This image is safe to delete. No article shows it."
+
+  Scenario: Detail panel, duplicate
+    Given the Default state has loaded, GET /v1/media/?hash=<sha256 of id 12> resolves 200 with ids 12, 5 and 6, and GET /v1/media/12/usage resolves 200
+    When the user activates the "floorboards.jpg" card
+    Then an info alert reads "Identical to 2 other images" over "floorboards-copy.jpg and IMG_2208.jpg have the same content." with an action "Review duplicates" (icon arrow-right)
+    And the action is enabled and selects the Duplicates tab
+
+  Scenario: The Used in count in list view opens the panel
+    Given the Default state has loaded with ?view=list at md width or more
+    When the user activates the underlined "2" in the "north-wall.jpg" row
+    Then the detail panel opens for "north-wall.jpg" with its "Used in 2 articles" list
+
+  Scenario: Copy URL
+    Given the detail panel is open for "north-wall.jpg"
+    When the user activates "Copy URL"
+    Then "{origin}{url}" (the absolute address of the image) is written to the clipboard
+    And a success toast appears: icon circle-check, id "media-url-copied-1", title "URL copied", text "Paste it wherever you need the image address."
+
+  Scenario: Rename, dialog
+    Given the detail panel is open for "north-wall.jpg"
+    When the user activates "Rename"
+    Then a dialog opens: title "Rename image", description "Only the filename changes. The URL stays the same, so articles that use this image keep working."
+    And the field "Filename" holds "north-wall" with the mono suffix ".jpg" fixed after it and the help "Letters, numbers, dashes and underscores. The .jpg ending stays."
+    And the buttons read "Cancel" then "Rename"
+
+  Scenario Outline: Rename, validation, nothing is sent
+    Given the Rename dialog is open for "north-wall.jpg"
+    When the user enters "<value>" and submits or leaves the field
+    Then the field shows the error "Enter a filename." with a circle-alert icon and the help text is replaced
+    And no PATCH is sent
+
+    Examples:
+      | value |
+      |       |
+      | ---   |
+      | !!!   |
+
+  Scenario: Rename, saving
+    Given the Rename dialog is open for "north-wall.jpg" with "north-wall-01" entered
+    When the user activates "Rename"
+    Then PATCH /v1/media/1 is sent with { "filename": "north-wall-01" }
+    And the field and both buttons are disabled, the confirm button reads "Renaming…" with a loader-circle, and Cancel, Escape and a backdrop click do not close the dialog
+
+  Scenario Outline: Rename, failed, the dialog stays and keeps the text
+    Given a rename is in flight for "north-wall.jpg" with "north-wall-01" entered
+    When PATCH /v1/media/1 <failure>
+    Then the dialog stays open with an error alert "Couldn't rename the image. Your text is still here. Try again in a moment." at the top of its body
+    And "north-wall-01" is still in the field and Cancel and Rename are enabled again
+
+    Examples:
+      | failure                      |
+      | resolves with a 500 response |
+      | never reaches the server     |
+
+  Scenario: Rename, done
+    Given a rename is in flight for "north-wall.jpg" with "north-wall-01" entered
+    When PATCH /v1/media/1 resolves 200 with the item, filename "north-wall-01.jpg"
+    Then the dialog closes, the panel title reads "north-wall-01.jpg", the card or row for id 1 reads "north-wall-01.jpg" in place (the list is not reordered), and the URL row is unchanged
+    And a success toast appears: icon circle-check, id "media-renamed-1", title "Image renamed", text `It's now "north-wall-01.jpg". The URL is the same.`
+
+  Scenario: Delete, unused image
+    Given the detail panel is open for "window-frame.jpg" (used in 0)
+    When the user activates "Delete"
+    Then a dialog opens: title "Delete this image?", description `"window-frame.jpg" will be deleted from your library. No article uses it. This can't be undone.`, no body, "Cancel" and a danger "Delete image"
+
+  Scenario: Delete, image in use
+    Given the detail panel is open for "north-wall.jpg" with its 2 articles loaded from GET /v1/media/1/usage
+    When the user activates "Delete"
+    Then a dialog opens: title "Delete an image that's in use?", description `"north-wall.jpg" is used in 2 articles. If you delete it, they will show a broken image. This can't be undone.`
+    And the body lists the two affected articles, each with its title and an "Online" or "Draft" badge, "Cancel" and a danger "Delete image"
+
+  Scenario: Delete, in progress
+    Given the Delete dialog is open for "window-frame.jpg"
+    When the user activates "Delete image"
+    Then DELETE /v1/media/8 is sent
+    And both buttons are disabled, the confirm button reads "Deleting…" with a loader-circle, aria-busy is set, and Cancel, Escape and a backdrop click do not close it
+
+  Scenario Outline: Delete, failed, the image stays
+    Given a delete is in flight for "window-frame.jpg"
+    When DELETE /v1/media/8 <failure>
+    Then the dialog stays open with an error alert "Couldn't delete the image, so it's still there. Try again in a moment." and both buttons enabled again
+    And the "window-frame.jpg" card is untouched behind the dialog
+
+    Examples:
+      | failure                      |
+      | resolves with a 500 response |
+      | never reaches the server     |
+
+  Scenario: Delete, done
+    Given a delete is in flight for "window-frame.jpg" (id 8, the 8th card)
+    When DELETE /v1/media/8 resolves 204
+    Then the dialog and the panel close and the card leaves the grid
+    And focus moves to the next card ("stone-wall-detail.jpg"); when the deleted card was the last, focus moves to the page heading
+    And a success toast appears: icon circle-check, id "media-deleted-8", title "Image deleted", text `"window-frame.jpg" is gone from your library.`
+    And the list is then requested again in the background, with no skeleton, to refresh the counts and the Duplicate flags
+
+  Scenario Outline: Image already gone, a 404 on any action removes it
+    Given the detail panel or a dialog is open for "window-frame.jpg"
+    When <trigger> resolves 404
+    Then the panel and any dialog close and the image leaves the list
+    And an info toast appears: icon info, id "media-not-found-8", title "That image no longer exists", text "It was deleted somewhere else, so we removed it from the library."
+    And the list is then requested again in the background to refresh the counts
+
+    Examples:
+      | trigger                         |
+      | DELETE /v1/media/8              |
+      | PATCH /v1/media/8               |
+      | GET /v1/media/8/usage (on open) |
+
+  Scenario Outline: List failed to load
+    Given GET /v1/media/ <failure>
+    When the user navigates to /media
+    Then an error alert replaces the images: icon circle-x, title "Couldn't load your images", text "Check your connection and try again.", and a "Try again" button (icon rotate-cw)
+    And the toolbar stays visible
+    When the user activates "Try again"
+    Then the skeleton cards show and GET /v1/media/ is sent again, and on success the Default state replaces the alert
+
+    Examples:
+      | failure                      |
+      | resolves with a 500 response |
+      | never reaches the server     |
+
+  Scenario: Offline
+    Given the Default state has loaded
+    When navigator.onLine becomes false
+    Then a banner with the wifi-off icon reads "You're offline. You can look through the images that are loaded, but uploading, renaming and deleting need a connection."
+    And the loaded cards stay browsable and the detail panel still opens and "Copy URL" still works
+    And "Upload", "Rename" and "Delete" are disabled
+    When navigator.onLine becomes true
+    Then the banner disappears and "Rename" and "Delete" are enabled again
+
+  Scenario Outline: Session errors are global
+    When any /v1/media call resolves <status>
+    Then the user is sent to <destination> by useApi, and no local media copy is shown
+
+    Examples:
+      | status | destination                           |
+      | 401    | /login?redirect=/media&reason=expired |
+      | 403    | /register/pending (unverified user)   |
+
+  Scenario: The sidebar item and the mobile drawer
+    Given the user is signed in and verified
+    When the sidebar renders
+    Then it lists Home, Articles, Media (icon images), Users, Integration, Settings in that order
+    And on /media, "Media" is the active item, on desktop and in the mobile drawer
+    When the user activates "Media"
+    Then the router goes to /media

features/media_browse.qa.md

@@ -0,0 +1,151 @@
+# QA: Media page, part 1 (browse and manage)
+
+## Scope note (informational)
+
+SPA only. The media API already exists (slice A), so there is no HTTP-level Go test in this slice
+and no `test/` file. The Go suite is run only to confirm nothing regressed (`task test`).
+
+Slice B2 (upload, multi-select, bulk bar, Duplicates content, merge, drag and drop, rate limit) is
+specified in features/media_upload_selection_duplicates.feature and its .qa.md.
+
+Toast ids: "media-url-copied-{id}", "media-renamed-{id}", "media-deleted-{id}", "media-not-found-{id}".
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Mock `useApi`'s `request` (or the global fetch it wraps) per case for `GET /v1/media/`,
+`GET /v1/media/{id}/usage`, `GET /v1/media/?hash=`, `PATCH /v1/media/{id}` and
+`DELETE /v1/media/{id}`, plus `navigator.clipboard.writeText` and `navigator.onLine`. No real
+backend. Mount MediaPage inside DashboardShell with a verified session and a test router at
+/media. Sample data is the 12-image fixture in the .feature Background (same ids, filenames,
+sizes, dimensions, used_in, uploaders and dates as the board's script), with counts { all: 12,
+unused: 2, duplicates: 2 }. Use fake timers for the 150 ms skeleton delay and the 120 ms search
+debounce.
+
+Logic and copy:
+
+1. **Formatting** (pure functions) - size: 8192 bytes to "8 KB", 880640 to "860 KB", 4089446 to
+   "3.9 MB"; dimensions "4032 × 3024"; null width and height to "Vector"; date "12 Sep 2026"
+   from `created_at`; type from content_type (image/jpeg "JPEG", image/png "PNG", image/webp
+   "WEBP", image/svg+xml "SVG"); accessible name for used_in 2, 1 and 0 ("used in 2 articles",
+   "used in 1 article", "unused").
+2. **Query string mapping** - Examples-driven from the .feature: each URL produces the exact
+   request query and control state; unknown values fall back to defaults;
+   changing a control rewrites the URL and drops default values.
+3. **Default** - 12 cards in fixture order, tabs "All 12" "Unused 2" "Duplicates 2", the
+   Duplicates badge only when duplicates > 0, "Select all" and "12 images" in the Select all row,
+   breadcrumb "Media".
+4. **Badges and accessible names** - the 5 Examples rows (badges and aria-label / accessible name).
+5. **Grid, few images** - 3 items; tabs "All 3" "Unused 1" "Duplicates" without a badge.
+6. **List view** - desktop: table with the 7 column headers and 12 rows, the Used in cell
+   underlined count or Unused badge; mobile: card list with "3.9 MB · 4032 × 3024 · JPEG" and
+   "Marta Alves · 12 Sep 2026"; clicking the Used in count opens the panel.
+7. **Duplicates tab** - covered by the B2 spec.
+8. **Loading** - unresolved GET: nothing before 150 ms; after 150 ms the skeleton (10 cards,
+   6 below md) and aria-busy; resolve; cards replace it; same on retry and on search, tab and
+   sort change, in list view too.
+9. **Empty library** - zero items and counts 0 with no q: toolbar and tabs absent, copy exact,
+   "Upload an image" enabled, the footnote "PNG, JPEG, WEBP, SVG · max 10 MB each".
+10. **No results** - unused + "wall": title `No images match "wall"`, text "Nothing matches in
+    Unused. Check the spelling, or clear the filters."; "Clear filters" resets q and filter and
+    restores the cards.
+11. **Keyboard** - each card is a button; Enter opens the panel; Space toggles selection and opens nothing; arrow keys
+    move focus (left, right, up, down by one row, stopping at the edges); Escape closes the panel
+    and focus returns to the card.
+12. **Detail panel, in use** - usage called once for id 1, title, actions, metadata rows, article
+    rows with links to /article/{id}/edit and Online / Draft badges, footnote text.
+13. **Detail panel, unused** - no usage request; "Not used in any article" and the safe-to-delete
+    text.
+14. **Detail panel, duplicate** - hash query used; alert title "Identical to 2 other images" and
+    "floorboards-copy.jpg and IMG_2208.jpg have the same content." (the image itself is excluded);
+    the "Review duplicates" action is enabled and selects the Duplicates tab.
+15. **Copy URL** - clipboard called with `{origin}{url}`; toast id "media-url-copied-1", icon
+    circle-check, title "URL copied", text "Paste it wherever you need the image address.".
+16. **Rename dialog** - title, description, field "north-wall" with ".jpg" suffix, help text,
+    Cancel then Rename.
+17. **Rename validation** - "", "---", "!!!": error "Enter a filename." on submit and on blur,
+    no PATCH.
+18. **Rename saving** - PATCH /v1/media/1 body { filename: "north-wall-01" } (no extension); the
+    field and buttons disabled, "Renaming…", dialog not dismissible by Escape or backdrop.
+19. **Rename failed** - 500 and network rejection: alert copy exact, text kept, buttons enabled.
+20. **Rename done** - 200: panel title, card and row updated in place, order unchanged; toast id
+    "media-renamed-1", title "Image renamed", text `It's now "north-wall-01.jpg". The URL is the same.`
+21. **Delete, unused** and **Delete, in use** - dialog titles, descriptions with the exact quotes
+    and counts, the article list with badges only in the in-use variant, "Delete image" danger.
+22. **Delete in progress** - DELETE /v1/media/8; buttons disabled; "Deleting…"; not dismissible.
+23. **Delete failed** - 500 and network rejection: alert copy exact, item untouched.
+24. **Delete done** - 204: dialog and panel closed, card removed, focus on the next card (heading
+    when last), toast id "media-deleted-8", title "Image deleted", text `"window-frame.jpg" is gone from your library.`; a background list refresh
+    without skeleton follows and updates the counts.
+25. **404 Examples-driven** - DELETE, PATCH, usage: everything closes, the item is removed,
+    toast id "media-not-found-8", icon info, title "That image no longer exists", text "It was
+    deleted somewhere else, so we removed it from the library.".
+26. **List failed** - 500 and network rejection: alert copy exact, toolbar visible; "Try again"
+    re-requests, shows skeleton, then the list.
+27. **Offline** - onLine false: banner copy exact, Upload, Rename and Delete disabled, Copy URL
+    and panel still work; back online restores them.
+28. **401 / 403** - handled by useApi (redirect target strings asserted); no local media copy.
+29. **Sidebar and drawer** - Media between Articles and Users with the images icon, active on
+    /media, in the desktop sidebar and the mobile drawer; the route has meta.auth "verified" and
+    meta.title "Media" (routerGuard spec extended).
+30. **Header** - title, subtitle, and the Upload button (also the mobile pinned 48 px variant).
+
+## Visual (`task visual:check -- media`, desktop and mobile, light and dark)
+
+Reference: docs/design/screens/media.md and `source/MediaFrame.dc.html` (group "Media" in the
+back-office board). Add each setup to `web/visual/states.ts` first, mocking `/v1/media/`,
+`/v1/media/{id}/usage` and `/v1/media/?hash=` from the board's own script: the 12 images (ids,
+filenames, sizes, dimensions, used in, uploaders, absolute dates), and the article rows for
+the panels ("How we price a bathroom renovation" Online, "Winter checklist for timber windows"
+Draft for north-wall.jpg). None of the B1 states depends on the current date (all dates are
+absolute), so none is `skip: 'clock-sensitive'`.
+
+The board draws its thumbnails as placeholder tiles (a striped tone fill with an image
+icon, the RenewCMS mark on the SVG, a checkerboard behind PNG and SVG), not photographs. The
+mocked image URLs must render the same way, or the 10 % gate fails for a reason unrelated to
+the code.
+
+Harness note: the B2 states now have setups and no longer carry `skip: 'pending'`.
+
+Setups for this slice (name in screens/media.md, then what must be drawn):
+
+- [ ] Grid, many images: 12 cards, tabs 12 / 2 / 2, Select all row showing "12 images" only.
+- [ ] Grid, few images: ids 1, 4, 8; checkerboard behind the SVG.
+- [ ] List view: table at desktop, card list at mobile.
+- [ ] Loading: skeleton cards (10 desktop, 6 mobile), toolbar visible.
+- [ ] Empty library, first run: no toolbar, "No images yet" panel and the footnote.
+- [ ] No results: unused + "wall".
+- [ ] Hover, focus and keyboard: hover on id 2, focus ring on id 3 (the checkbox reveal is covered by B2).
+- [ ] Detail panel: in use (id 1), unused (id 8), duplicate (id 12).
+- [ ] Copy URL: id 1 panel plus the toast.
+- [ ] Rename: dialog, saving, validation, failed, done (id 1, "north-wall-01").
+- [ ] Delete: unused (id 8), in use (id 1), in progress (id 1), failed (id 8), done (grid without
+      id 8 plus toast).
+- [ ] Image already gone (404): grid without id 8 plus the info toast.
+- [ ] List failed to load: alert with "Try again".
+- [ ] Offline: banner and disabled Upload.
+
+The B2 states are listed in features/media_upload_selection_duplicates.qa.md.
+
+Manual checks screenshots cannot cover:
+
+- [ ] Keyboard and focus order: Tab visits the search, tabs, sort, toggle, then one stop per card;
+      arrow keys move across the grid; Enter opens the panel; focus is trapped in the panel and in
+      dialogs, starts on Cancel in dialogs, and returns to the card on close; after a delete focus
+      lands on the next card.
+- [ ] Hover, motion and reduced motion: card hover shadow, skeleton pulse, panel and dialog
+      transitions stop under reduced motion.
+- [ ] Screen reader: the card's accessible name reads correctly.
+
+## Manual verification
+
+- **Real round trips against a running server** (`task dev`): list with real counts, sorting,
+  search, usage, rename (extension kept, URL unchanged), delete, a concurrent 404. Vitest only
+  mocks `useApi`.
+- **Real image rendering**: the thumbnails and previews load from the real `url` and the
+  checkerboard shows behind real transparent PNG and SVG files.
+- **Real clipboard write** in a real browser.
+- **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.

features/media_library.feature

@@ -0,0 +1,391 @@
+Feature: The media library holds every uploaded image as a library-level asset
+
+  As a verified RenewCMS user
+  I want to upload, browse, rename, delete, merge and inspect images that belong to the
+    library and not to any article
+  So that one image can be used in many articles, deleting an article never deletes an image,
+    and duplicates can be merged without leaving a broken image behind
+
+  Background:
+    Given internal/domain/image.Image carries ID, Path, Filename, Size, ContentType, Width,
+      Height (0 for SVG), SHA256, UploadedByID, CreatedAt and UpdatedAt, and no article id
+    And image.ImageInput gains Width, Height, SHA256 and UploadedByID
+    And internal/domain/image defines the sentinels ErrImageUnreadable, ErrInvalidFilename,
+      ErrMergeCopyMissing and ErrMergeHashMismatch, plus the existing ErrImageNotFound,
+      ErrImageTypeNotAllowed and ErrImageTooLarge, all asserted with errors.Is
+    And image.Repository exposes Create, Get, Delete, List(query), FindByHash, Rename,
+      ListByHash groups and Counts, and article.Repository exposes
+      FindByBodyContaining(filename) and the existing UpdateBody, and no longer AddImage
+    And CreateImageUseCase reads the bytes fully, rejects a type outside image/png, image/jpeg,
+      image/webp and image/svg+xml with ErrImageTypeNotAllowed, rejects more than 10485760
+      bytes actually read with ErrImageTooLarge, computes SHA-256 hex and, for raster images,
+      width and height from the bytes, and rejects bytes that cannot be decoded (or an SVG
+      without an svg root) with ErrImageUnreadable, all before image.Repository.Create is called
+    And an image's "used in" is the count of articles, online or draft, whose body contains
+      the image's url, read from article bodies each time
+    And /v1/media is mounted in api/router.go behind jwtauth.Verifier, jwtauth.Authenticator,
+      middleware.RequireCurrentToken and middleware.RequireVerifiedUser
+    And every media item is JSON with snake_case fields:
+      {"id","filename","url","size","content_type","width","height","sha256","uploaded_by",
+      "created_at","used_in","duplicate"}, where url is the stored path
+      "/static/uploadedImages/<uuid><ext>", width and height are null for SVG, uploaded_by is
+      the uploader's display name (username when empty, "" when unknown) and duplicate is true
+      when another image has the same sha256
+    And request bodies are validated with validate tags and validator.Validate.Struct, and
+      errors are plain text from http.Error
+
+  Scenario Outline: Every media route refuses callers that are not logged in and verified
+    When the client sends <method> <path> <credentials>
+    Then the response status is <status>
+    And no image or article is read or changed
+
+    Examples:
+      | method | path              | credentials                  | status |
+      | GET    | /v1/media/        | no cookie                    | 401    |
+      | POST   | /v1/media/        | no cookie                    | 401    |
+      | PATCH  | /v1/media/1       | no cookie                    | 401    |
+      | DELETE | /v1/media/1       | no cookie                    | 401    |
+      | POST   | /v1/media/merge   | no cookie                    | 401    |
+      | GET    | /v1/media/1/usage | no cookie                    | 401    |
+      | GET    | /v1/media/        | a stale token_version cookie | 401    |
+      | GET    | /v1/media/        | cookie of an unverified user | 403    |
+      | DELETE | /v1/media/1       | cookie of an unverified user | 403    |
+
+  Rule: Listing
+
+    Background:
+      Given user 1 has display name "Inès Duarte" and user 2 has no display name and username "marta"
+      And the library holds, uploaded in this order (oldest first):
+        | id | filename             | size    | content_type  | width | height | sha256 | uploaded by |
+        | 1  | north-wall.jpg       | 4089446 | image/jpeg    | 3600  | 2400   | A      | 1           |
+        | 2  | floorboards.jpg      | 2516582 | image/jpeg    | 3600  | 2400   | B      | 1           |
+        | 3  | floorboards-copy.jpg | 2516582 | image/jpeg    | 3600  | 2400   | B      | 2           |
+        | 4  | window-frame.jpg     | 812345  | image/jpeg    | 1200  | 800    | C      | 2           |
+        | 5  | logo.svg             | 1204    | image/svg+xml | 0     | 0      | D      | 1           |
+      And article 1 "Kitchen Renovation" is online and its body contains the urls of images 1 and 2
+      And article 2 "Backyard Notes" is a draft and its body contains the url of image 1
+      And article 3 "Empty" has a body with no image url
+
+    Scenario: The default list is newest first with used_in, duplicate and tab counts
+      When the client sends GET /v1/media/ with a valid cookie
+      Then the response status is 200
+      And the "items" ids are 5, 4, 3, 2, 1 in that order
+      And item 1 has used_in 2, duplicate false and uploaded_by "Inès Duarte"
+      And items 2 and 3 have duplicate true, and item 3 has uploaded_by "marta"
+      And item 5 has width null, height null and used_in 0
+      And "next_cursor" is null
+      And "counts" is {"all": 5, "unused": 3, "duplicates": 1}
+
+    Scenario: An empty library answers an empty list, not null
+      Given the library holds no image
+      When the client sends GET /v1/media/ with a valid cookie
+      Then the response status is 200
+      And "items" is an empty array and "counts" is {"all": 0, "unused": 0, "duplicates": 0}
+
+    Scenario Outline: sort orders the list
+      When the client sends GET /v1/media/?sort=<sort> with a valid cookie
+      Then the "items" ids are <ids> in that order
+
+      Examples:
+        | sort    | ids           |
+        | newest  | 5, 4, 3, 2, 1 |
+        | oldest  | 1, 2, 3, 4, 5 |
+        | name    | 2, 3, 5, 1, 4 |
+        | largest | 1, 2, 3, 4, 5 |
+
+    Scenario Outline: filter narrows the list and the counts stay library-wide
+      When the client sends GET /v1/media/?filter=<filter> with a valid cookie
+      Then the "items" ids, as a set, are <ids>
+      And "counts" is still {"all": 5, "unused": 3, "duplicates": 1}
+
+      Examples:
+        | filter     | ids       |
+        | all        | 1,2,3,4,5 |
+        | unused     | 3, 4, 5   |
+        | duplicates | 2, 3      |
+
+    Scenario Outline: q matches the filename case-insensitively
+      When the client sends GET /v1/media/?q=<q> with a valid cookie
+      Then the "items" ids are <ids> in that order
+      And "counts" is still {"all": 5, "unused": 3, "duplicates": 1}
+
+      Examples:
+        | q          | ids  |
+        | FLOORBOARD | 3, 2 |
+        | wall       | 1    |
+        | zzz        |      |
+
+    Scenario: q, filter and sort combine
+      When the client sends GET /v1/media/?q=floorboards&filter=unused&sort=oldest with a valid cookie
+      Then the "items" ids are 3
+
+    Scenario: hash returns only the images with that content
+      When the client sends GET /v1/media/?hash=<sha256 of image 2's bytes> with a valid cookie
+      Then the "items" ids, as a set, are 2, 3
+
+    Scenario: hash of unknown content returns no item
+      When the client sends GET /v1/media/?hash=<64 hex zeros> with a valid cookie
+      Then the response status is 200 and "items" is empty
+
+    Scenario: limit and cursor page through the list
+      When the client sends GET /v1/media/?limit=2 with a valid cookie
+      Then the "items" ids are 5, 4 and "next_cursor" is a non-empty string
+      When the client sends GET /v1/media/?limit=2&cursor=<that next_cursor>
+      Then the "items" ids are 3, 2 and "next_cursor" is a non-empty string
+      When the client sends GET /v1/media/?limit=2&cursor=<that next_cursor>
+      Then the "items" ids are 1 and "next_cursor" is null
+
+    Scenario Outline: A malformed query answers 400
+      When the client sends GET /v1/media/?<query> with a valid cookie
+      Then the response status is 400
+      And the response body is the text apperr.MediaQueryErrorMessage
+
+      Examples:
+        | query        |
+        | filter=bogus |
+        | sort=bogus   |
+        | limit=0      |
+        | limit=101    |
+        | limit=abc    |
+        | cursor=%%%   |
+        | hash=notahash |
+
+  Rule: Uploading
+
+    Scenario Outline: An allowed image is always stored, with its metadata and hash
+      Given a valid cookie for user 1 whose display name is "Inès Duarte"
+      When the client sends POST /v1/media/ with multipart field "file" named <name>, content type <content_type> and real <content_type> bytes
+      Then the response status is 201
+      And the body is a media item whose filename is <name>, content_type is <content_type>, size is the byte count, width and height are <width> and <height>, sha256 is the SHA-256 hex of the bytes, uploaded_by is "Inès Duarte", used_in is 0 and duplicate is false
+      And the item's url matches "/static/uploadedImages/<uuid><ext>"
+      And the image repository holds one new image with UploadedByID 1
+
+      Examples:
+        | name           | content_type  | width | height |
+        | north-wall.png | image/png     | 3     | 2      |
+        | IMG_2208.jpg   | image/jpeg    | 3     | 2      |
+        | hero.webp      | image/webp    | 1     | 1      |
+        | logo.svg       | image/svg+xml | null  | null   |
+
+    Scenario: Uploading the same bytes twice stores both and marks both as duplicates
+      Given the library holds image 1 with the same bytes
+      When the client sends POST /v1/media/ with those bytes named "north-wall-again.png"
+      Then the response status is 201 and the item has duplicate true
+      And the library now holds two images with the same sha256 and different urls
+      And "counts".duplicates is 1 when listed
+
+    Scenario: A filename without extension gets the canonical one, a path is stripped
+      When the client uploads real PNG bytes named "C:\\photos\\north wall" with content type "image/png"
+      Then the item filename is "north wall.png"
+
+    Scenario: A file exactly at 10485760 bytes is accepted, one byte more is 413
+      When the client uploads a valid PNG padded to 10485760 bytes
+      Then the response status is 201
+      When the client uploads a valid PNG padded to 10485761 bytes
+      Then the response status is 413
+      And the response body is the text "the file exceeds the maximum upload size"
+      And the image repository's Create was called once in total
+
+    Scenario: A disallowed content type is 415
+      When the client uploads "notes.pdf" with content type "application/pdf"
+      Then the response status is 415
+      And the response body is the text "the file must be a PNG, JPEG, WEBP, or SVG image"
+      And the image repository's Create is never called
+
+    Scenario Outline: Bytes that cannot be read as the declared type are 400
+      When the client uploads <name> with content type <content_type> and the bytes "not an image"
+      Then the response status is 400
+      And the response body is the text "the image could not be read"
+      And the image repository's Create is never called
+
+      Examples:
+        | name        | content_type  |
+        | broken.png  | image/png     |
+        | broken.jpg  | image/jpeg    |
+        | broken.webp | image/webp    |
+        | broken.svg  | image/svg+xml |
+
+    Scenario: A request without the "file" part is 400
+      When the client sends POST /v1/media/ with a multipart body that has no "file" field
+      Then the response status is 400
+      And the image repository's Create is never called
+
+    Scenario: A repository failure is a generic 500
+      Given the image repository's next Create fails
+      When the client uploads a valid PNG
+      Then the response status is 500 and the body is "Internal server error"
+
+  Rule: Renaming
+
+    Background:
+      Given image 1 is "north-wall.jpg" with url "/static/uploadedImages/aaa.jpeg" and article 1 body contains that url
+
+    Scenario: Rename changes the display name, keeps the extension and the url
+      When the client sends PATCH /v1/media/1 with {"filename": "north-wall-01"}
+      Then the response status is 200
+      And the body is the media item with filename "north-wall-01.jpg" and url "/static/uploadedImages/aaa.jpeg"
+      And article 1's body is unchanged
+      And a following GET /v1/media/?q=north-wall-01 returns image 1
+
+    Scenario: Surrounding whitespace is trimmed and unicode letters are allowed
+      When the client sends PATCH /v1/media/1 with {"filename": "  Été_2026-a  "}
+      Then the response status is 200 and the filename is "Été_2026-a.jpg"
+
+    Scenario Outline: An invalid new name is 400 and nothing changes
+      When the client sends PATCH /v1/media/1 with <body>
+      Then the response status is 400
+      And the response body is the text "Enter a filename." for every row except "not json"
+      And the image's filename is still "north-wall.jpg"
+
+      Examples:
+        | body                  |
+        | {"filename": ""}      |
+        | {"filename": "   "}   |
+        | {"filename": "***"}   |
+        | {"filename": "a.b"}   |
+        | {"filename": "a b"}   |
+        | {"filename": "<101 letters>"} |
+        | {}                    |
+        | not json              |
+
+    Scenario: Renaming an unknown image is 404
+      When the client sends PATCH /v1/media/9999 with {"filename": "x"}
+      Then the response status is 404 and the body is "Image not found"
+
+    Scenario: A malformed id is 400
+      When the client sends PATCH /v1/media/abc with {"filename": "x"}
+      Then the response status is 400 and the body is apperr.IdUint32ErrorMessage
+
+  Rule: Deleting
+
+    Scenario: An image in use can be deleted and article bodies are left alone
+      Given image 1 is used in article 1's body
+      When the client sends DELETE /v1/media/1 with a valid cookie
+      Then the response status is 204 and the body is empty
+      And image 1 is gone from the repository and its file from UPLOAD_DIR
+      And article 1's body is byte-for-byte unchanged
+
+    Scenario: A file already missing from disk still deletes the row
+      Given image 4's file is not in UPLOAD_DIR
+      When the client sends DELETE /v1/media/4
+      Then the response status is 204 and image 4 is gone from the repository
+
+    Scenario: Deleting an unknown image is 404
+      When the client sends DELETE /v1/media/9999
+      Then the response status is 404 and the body is "Image not found"
+
+    Scenario: A malformed id is 400
+      When the client sends DELETE /v1/media/abc
+      Then the response status is 400 and the body is apperr.IdUint32ErrorMessage
+
+    Scenario: A repository failure is a generic 500 and the image stays
+      Given the image repository's Delete fails
+      When the client sends DELETE /v1/media/1
+      Then the response status is 500 and image 1 is still in the repository
+
+  Rule: Usage
+
+    Scenario: Usage lists the articles whose body contains the url
+      Given article 1 "Kitchen Renovation" is online and article 2 "Backyard Notes" is a draft, both containing image 1's url, and article 3 does not
+      When the client sends GET /v1/media/1/usage with a valid cookie
+      Then the response status is 200
+      And the body is [{"id": 1, "title": "Kitchen Renovation", "published": true}, {"id": 2, "title": "Backyard Notes", "published": false}]
+
+    Scenario: An unused image has an empty array, not null
+      When the client sends GET /v1/media/4/usage
+      Then the response status is 200 and the body is []
+
+    Scenario: An absolute url still counts as used
+      Given article 3's body contains "https://cms.example.com/static/uploadedImages/aaa.jpeg" for image 1
+      Then GET /v1/media/1/usage includes article 3
+
+    Scenario Outline: Unknown or malformed ids
+      When the client sends GET /v1/media/<id>/usage
+      Then the response status is <status> and the body is <body>
+
+      Examples:
+        | id   | status | body                        |
+        | 9999 | 404    | Image not found             |
+        | abc  | 400    | apperr.IdUint32ErrorMessage |
+
+  Rule: Merging
+
+    Background:
+      Given images 2, 3 and 6 share sha256 B, image 1 has sha256 A
+      And article 1 body contains the urls of images 2 and 3, article 2 body contains image 3's url twice, article 3 body contains image 2's url only, and article 4 has none of them
+
+    Scenario: Merge switches bodies to the kept url and deletes the copies
+      When the client sends POST /v1/media/merge with {"keep_id": 2, "merge_ids": [3, 6]}
+      Then the response status is 200
+      And the body is {"articles_updated": 2, "merged": 2}
+      And article 1's body has image 3's url replaced by image 2's url
+      And article 2's body has both occurrences of image 3's url replaced by image 2's url
+      And article 3 and article 4 are unchanged
+      And images 3 and 6 are gone from the repository and from UPLOAD_DIR, and image 2 remains
+
+    Scenario: Merging copies that no article uses updates zero articles
+      When the client sends POST /v1/media/merge with {"keep_id": 2, "merge_ids": [6]}
+      Then the response status is 200 and the body is {"articles_updated": 0, "merged": 1}
+
+    Scenario: A copy that is gone answers 409 and changes nothing
+      When the client sends POST /v1/media/merge with {"keep_id": 2, "merge_ids": [3, 9999]}
+      Then the response status is 409 and the body is apperr.MediaMergeConflictErrorMessage
+      And no article body changed and images 2 and 3 still exist
+
+    Scenario: A copy that does not share the hash answers 409 and changes nothing
+      When the client sends POST /v1/media/merge with {"keep_id": 2, "merge_ids": [3, 1]}
+      Then the response status is 409
+      And no article body changed and images 1, 2 and 3 still exist
+
+    Scenario: A kept image that is gone answers 404
+      When the client sends POST /v1/media/merge with {"keep_id": 9999, "merge_ids": [3]}
+      Then the response status is 404 and the body is "Image not found"
+      And nothing changed
+
+    Scenario Outline: An invalid merge request is 400 and nothing changes
+      When the client sends POST /v1/media/merge with <body>
+      Then the response status is 400 and the body is apperr.MediaMergeRequestErrorMessage
+
+      Examples:
+        | body                                |
+        | {"keep_id": 2, "merge_ids": []}     |
+        | {"keep_id": 2}                      |
+        | {"merge_ids": [3]}                  |
+        | {"keep_id": 2, "merge_ids": [2, 3]} |
+        | {"keep_id": 2, "merge_ids": [3, 3]} |
+        | {"keep_id": 0, "merge_ids": [3]}    |
+        | not json                            |
+
+    Scenario: A failure rewriting a body restores the bodies already rewritten
+      Given the article repository's UpdateBody fails for article 2
+      When the client sends POST /v1/media/merge with {"keep_id": 2, "merge_ids": [3]}
+      Then the response status is 500
+      And article 1's body is back to its original text, article 2 is unchanged
+      And images 2 and 3 still exist
+
+    Scenario: A failure deleting a copy after the rewrite is 500 and the bodies stay switched
+      Given the image repository's Delete fails for image 3
+      When the client sends POST /v1/media/merge with {"keep_id": 2, "merge_ids": [3]}
+      Then the response status is 500
+      And article 1's and article 2's bodies use image 2's url and image 3 still exists
+
+  @manual
+  Rule: Startup backfill and migration (persistence, verified by hand, see the qa.md)
+
+    Scenario: Existing rows get metadata and hash from the files on disk
+      Given the images table has rows created before this slice, with a path and no filename, size, content_type, width, height or sha256, and their files are in UPLOAD_DIR
+      When the server boots
+      Then each row gets filename equal to the stored file name, size, content_type, width and height (0 for SVG) and sha256 read from its file, and UploadedByID stays 0
+      And the old article_id column and the article_images table are kept and not written
+
+    Scenario: A row whose file is missing does not stop the boot
+      Given a row whose file is not in UPLOAD_DIR
+      When the server boots
+      Then the boot completes, the row is left without metadata, and the server serves requests
+
+    Scenario: The backfill is idempotent
+      When the server boots a second time
+      Then no row is changed again
+
+    Scenario: A row without metadata still lists
+      Then GET /v1/media/ returns it with size 0, width null, height null, sha256 "" and duplicate false

features/media_library.qa.md

@@ -0,0 +1,39 @@
+# QA procedure: media_library
+
+Package: `test` (black-box). New file `test/media_library_http_test.go`. Fake type names must be unique in the package.
+
+## Setup shared by every case
+1. Call `validator.InitValidator()` once.
+2. Rewrite `mockImageRepo` (`test/image_test.go`) to the new `image.Repository`: Create (stores the metadata from the ImageInput and derives a `/static/uploadedImages/<n>.<ext>` path), Get, Delete (records calls, honours `failDeleteFor`), List(query), FindByHash, Rename, ListByHash groups, Counts. Add fields for seeding `Filename`, `Size`, `ContentType`, `Width`, `Height`, `SHA256`, `UploadedByID`, `CreatedAt`.
+3. Extend `mockArticleRepo` (`test/article_test.go`) with `FindByBodyContaining(filename)` (substring over `Body`) and a per-id failure switch for `UpdateBody`. Remove `AddImage` and the article `Images` field from the fake and from every test that uses them.
+4. Use the existing user fake so `uploaded_by` resolves: user 1 display name "Inès Duarte", user 2 username "marta" with empty display name.
+5. Wire the real use cases over the fakes: create, list, rename, delete, merge and usage media use cases, `NewCreateImageUseCase(imageRepo)`, `NewGetUserUseCase(userRepo)`. Build `media.NewHandler(...)` (`api/handlers/media`).
+6. Build `jwtauth.New("HS256", []byte("test-secret"), nil)`. Mount on a fresh `chi.NewRouter()` mirroring `api/router.go`: `jwtauth.Verifier` at the top, then in the media group `Authenticator`, `RequireCurrentToken(getUser)`, `RequireVerifiedUser(getUser)`, with the six routes under `/v1/media`.
+7. Mint cookies via `token.Encode(map[string]any{"user_id": uint32(n), ...})` as in the other HTTP tests. Build a stale-token cookie with a `token_version` lower than the user's, and use an unverified user for the 403 case.
+8. Build multipart bodies with `mime/multipart.Writer`, using `CreatePart` with an explicit part `Content-Type` header. Generate real bytes in the test:
+   - PNG (3x2) with `image/png`;
+   - JPEG (3x2) with `image/jpeg`;
+   - a tiny valid WEBP fixture (1x1) as a byte constant;
+   - SVG `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"/>`.
+
+   Compute expected sha256 in the test with `crypto/sha256`. For size limits, pad valid PNG bytes to 10485760 and 10485761 bytes.
+9. Seed the Listing background exactly as in the feature (5 images, 3 articles, 2 users), with `created_at` strictly increasing by id.
+
+## 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"`.
+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.
+15. Usage: assert the exact JSON arrays (raw body compared as JSON), the empty `[]`, the absolute-url article, 404 and 400.
+16. Merge: assert 200 `{articles_updated, merged}`, resulting bodies (both occurrences replaced), unchanged bodies for the other articles, and only image 2 left. Assert the 409 rows and 404 row, with no body change and no `Delete` calls (`deleteCalls` empty). Assert every 400 row with `apperr.MediaMergeRequestErrorMessage`. Assert the two failure rows: `UpdateBody` failing for article 2 leaves article 1 restored and no `Delete` call; `Delete` failing for image 3 leaves bodies switched and returns 500.
+17. Unit-level asserts (same file, no HTTP) with `errors.Is` on the sentinels `ErrImageUnreadable`, `ErrMergeCopyMissing`, `ErrMergeHashMismatch`, `ErrInvalidFilename`.
+18. Layering guard: `go list -deps` or a grep-style test that `api/handlers/media` imports no `persistence`, `mailer`, `models` or `gorm` package.
+
+## Manual verification (not exercised by `task test`)
+- Real upload, rename, delete, merge against a scratch SQLite file and `UPLOAD_DIR` via `task dev`: the files land on disk, `url` loads through `/static/uploadedImages/`, deleting an in-use image leaves the article body text untouched, and a merge removes the copy files.
+- Delete when the file was already removed from `UPLOAD_DIR` still answers 204.
+- Startup backfill: copy an old database (rows with only `path`), boot, and check that filename, size, content_type, width, height and sha256 are filled; check idempotency on a second boot; check that a row whose file is missing does not stop the boot; check that the `article_images` table and `article_id` column are still present and not written.
+- `UploadedByID` 0 rows display an empty `uploaded_by`.
+- WEBP dimensions with a real WEBP file (the fixture is minimal).
+- No SMTP involvement. No real rate limit (out of scope for this slice).

features/media_upload_selection_duplicates.feature

@@ -0,0 +1,452 @@
+Feature: Media page, part 2: upload, selection and duplicates
+
+  As a verified RenewCMS owner
+  I want to upload images to the library from /media, select several images to delete them
+    together, and merge identical copies
+  So that I can keep the library complete and free of duplicates without leaving the page
+
+  Background:
+    Given /media is the verified route from slice B1, rendered as MediaPage inside
+      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 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>,
+      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
+      /login?redirect=/media&reason=expired and /register/pending as useApi does, with no local
+      copy
+    And the browser-side checks reuse validateImageFile from web/src/lib/imageUpload.ts: size is
+      checked first (10 MB = 10485760 bytes is allowed, one byte more is too large), then the
+      file's MIME type and its extension must both be allowed (PNG, JPEG, WEBP, SVG; .png, .jpg,
+      .jpeg, .webp, .svg); a rejected file is never hashed and never sent
+    And hashing lives in a shared module under web/src/lib that depends on nothing in the Media
+      page, so that the editor's media picker slice reuses it: it reads the file, computes the
+      SHA-256 with crypto.subtle and resolves the lowercase 64-character hex, or resolves null when
+      crypto.subtle is unavailable
+    And at most 2 uploads are in flight at once; files are processed in the order they were
+      chosen or dropped, and hashing runs inside the file's concurrency slot while its row reads
+      "Waiting"
+    And uploads from this page are not cropped or resized, and each file is sent as chosen
+    And toast ids are "media-bulk-deleted", "media-bulk-delete-failed", "media-merged-{keep_id}"
+      and "media-not-found-{id}", and success toasts last 5 s; the bulk-delete failure toast has
+      no duration and stays until retried or dismissed
+    And the 12-image fixture, its counts { all: 12, unused: 2, duplicates: 2 } and its sample
+      data are the ones in features/media_browse.feature; the duplicate groups are {12, 5, 6}
+      (floorboards.jpg, floorboards-copy.jpg, IMG_2208.jpg, 3600 × 2400, 2.4 MB each) and
+      {7, 9} (IMG_4471.jpg, stone-wall-detail.jpg, 3600 × 2400, 3.1 MB each)
+    And where a board frame contradicts the design prose or the fixture, this spec follows the
+      prose and the fixture, and the design is corrected by the user, with no visual exception
+
+  Rule: Upload entry points
+
+    Scenario Outline: The Upload controls open the file chooser
+      Given the Default state has loaded <context>
+      When the user activates "<control>"
+      Then the file chooser opens, accepts several files and offers image/png, image/jpeg, image/webp and image/svg+xml
+
+      Examples:
+        | context                      | control         |
+        | at md width or more          | Upload          |
+        | below md width               | Upload          |
+        | and the library has no image | Upload an image |
+
+    Scenario: Dropping files anywhere on the page
+      Given the Default state has loaded at md width or more
+      When the user drags files over the page
+      Then a dashed primary-bordered area covers the content, with the upload icon, the title "Drop images to upload" and the text "PNG, JPEG, WEBP, SVG · max 10 MB each"
+      And the mobile pinned Upload button is hidden while the area shows
+      When the user drags the files away from the page
+      Then the area disappears and nothing is uploaded
+      When the user drops the files on the page
+      Then the area disappears and the upload of each file starts straight away, with no crop step
+
+    Scenario: Dragging something that is not a file does nothing
+      When the user drags selected text over the page
+      Then no drop area shows
+
+  Rule: Browser checks, nothing is sent
+
+    Scenario Outline: A file that fails the checks becomes a rejected row
+      Given the user chooses the file "<file>" of <size> with MIME type "<mime>"
+      Then one row is added with the file-x icon, the title "<title>" and the text "Images can be up to 10 MB. Use a PNG, JPEG, WEBP or SVG image."
+      And no hash lookup and no POST /v1/media/ is sent for it
+
+      Examples:
+        | file      | size    | mime            | title                    |
+        | scan.tif  | 14.2 MB | image/tiff      | scan.tif is 14.2 MB      |
+        | notes.pdf | 210 KB  | application/pdf | notes.pdf isn't an image |
+        | photo.png | 10.1 MB | image/png       | photo.png is 10.1 MB     |
+        | fake.jpg  | 40 KB   | text/plain      | fake.jpg isn't an image  |
+        | logo.gif  | 40 KB   | image/gif       | logo.gif isn't an image  |
+        | pic.jpg   | 40 KB   | image/png       | pic.jpg isn't an image   |
+
+    Scenario: Every rejected file leaves the panel with "Nothing was uploaded"
+      Given the user chooses scan.tif (14.2 MB), notes.pdf (210 KB) and broken.png (3.0 MB, rejected by the server with 400)
+      Then the panel header reads "Nothing was uploaded" with "3 files were rejected" and a "Dismiss" button
+      And the rows read "scan.tif is 14.2 MB", "notes.pdf isn't an image" and "broken.png couldn't be read" with "The server couldn't read this image. Save it again as a PNG or JPEG, then try again."
+      And no summary line shows
+
+    Scenario: Rejected and failed rows without an added image
+      Given the user chooses one rejected file and one file whose upload fails with 500
+      Then the panel header reads "Nothing was uploaded" with "2 files need attention"
+      And no summary line shows
+
+  Rule: The upload panel and its rows
+
+    Scenario: Files upload two at a time with progress
+      Given the user chooses 6 valid images and the duplicate lookup finds nothing
+      Then the panel shows above the images, below the toolbar, with the title "Uploading 6 images", "0 of 6 done" and a "Cancel all" button
+      And rows 1 and 2 read "Uploading", and rows 3 to 6 read "Waiting" (each row: 40 px thumbnail, filename, size)
+      When the first upload reports 1.1 MB sent of 2.6 MB
+      Then its row reads "Uploading 1.1 of 2.6 MB" over a 4 px progress bar filled to 42 % and shows a cancel x
+      When the first upload resolves 201
+      Then its row reads "Added to your library" with a circle-check icon, the header reads "1 of 6 done", and row 3 starts uploading
+      And at no time are more than 2 requests to POST /v1/media/ in flight
+
+    Scenario: The panel header counts settled rows
+      Given a panel with rows Added, Duplicate, Rejected, Failed, Uploading and Waiting
+      Then the header reads "4 of 6 done"
+
+    Scenario: Singular forms
+      Given the user chooses 1 valid image
+      Then the panel title reads "Uploading 1 image"
+
+    Scenario: New files added while the panel is open
+      Given the panel is showing rows
+      When the user chooses or drops more files
+      Then their rows are appended and the header counts cover all rows
+
+    Scenario: A new upload refreshes the list in the background
+      Given an upload resolves 201
+      Then the list is requested again with no skeleton, so the new image shows and the counts update
+
+    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
+      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
+
+    Scenario: Several existing matches name the oldest one
+      Given the lookup matches several images
+      Then the row names the oldest match
+
+    Scenario: Use existing selects the existing image
+      Given the row for "floorboards-2.jpg" is showing "Already in your library" for id 12
+      When the user activates "Use existing"
+      Then the row is dropped from the panel
+      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
+      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
+
+    Scenario: Upload anyway stores a second copy
+      Given the row for "floorboards-2.jpg" is showing "Already in your library"
+      When the user activates "Upload anyway"
+      Then the file is sent with POST /v1/media/ and the row follows the normal upload states
+      And when it resolves 201 the list is reloaded and the Duplicates tab count reflects the new copy
+
+    Scenario Outline: The duplicate check is skipped when it cannot run
+      Given the user chooses a valid image and <condition>
+      Then the file is sent with POST /v1/media/ without waiting for the answer to a lookup
+      And any duplicate then shows up under Duplicates
+
+      Examples:
+        | condition                                                      |
+        | crypto.subtle is undefined (an insecure context)               |
+        | GET /v1/media/?hash= fails with 500 or never reaches the server |
+
+    Scenario Outline: Server answers for an upload that passed the checks
+      Given a valid image "<file>" of <size> is uploading
+      When POST /v1/media/ resolves <status>
+      Then the row reads <row>
+
+      Examples:
+        | file       | size   | status              | row                                                                                                                                              |
+        | roof.png   | 1.4 MB | 201                 | circle-check "Added to your library"                                                                                                             |
+        | scan.png   | 9.9 MB | 413                 | file-x "scan.png is 9.9 MB" over "Images can be up to 10 MB. Use a PNG, JPEG, WEBP or SVG image."                                               |
+        | notes.png  | 210 KB | 415                 | file-x "notes.png isn't an image" over the same text                                                                                             |
+        | broken.png | 3.0 MB | 400                 | file-x "broken.png couldn't be read" over "The server couldn't read this image. Save it again as a PNG or JPEG, then try again."               |
+        | roof.png   | 1.4 MB | 500                 | circle-x "Upload failed" over "The server didn't accept the file. Nothing was added to your library." and a "Try again" button (icon rotate-cw) |
+        | roof.png   | 1.4 MB | no answer (network) | the same Failed row                                                                                                                              |
+
+    Scenario: Try again retries one file
+      Given a row is "Upload failed"
+      When the user activates "Try again"
+      Then only that file is sent again with POST /v1/media/ (no new duplicate lookup), and the row follows the normal upload states
+
+    Scenario: Cancelling one upload or all of them
+      Given several files are uploading or waiting
+      When the user activates the cancel x on an uploading row
+      Then that request is aborted and the row is removed, and the next waiting file starts
+      When the user activates "Cancel all"
+      Then every request in flight is aborted and every waiting row is removed, Added, rejected and failed rows stay, and when no row is left the panel closes
+
+    Scenario: The panel settles with a summary
+      Given 5 files settled as 2 Added, 1 Already in your library (still undecided), 1 rejected and 1 failed
+      Then the header reads "Upload finished" with "5 images" and a "Dismiss" button in place of "Cancel all"
+      And a summary line reads "2 uploaded · 1 already in your library · 2 need attention"
+      And the page announces the summary when the last row settles
+      When the user activates "Dismiss"
+      Then the panel and its rows disappear, including rejected and failed rows, which stay until then
+
+    Scenario Outline: The summary line counts each outcome and omits empty parts
+      Given the panel has settled with <uploaded> added, <dup> already in the library, <attention> rejected or failed
+      Then the summary line reads "<line>"
+
+      Examples:
+        | uploaded | dup | attention | line                                                       |
+        | 2        | 1   | 2         | 2 uploaded · 1 already in your library · 2 need attention |
+        | 3        | 0   | 0         | 3 uploaded                                                 |
+        | 0        | 1   | 0         | 1 already in your library                                  |
+        | 1        | 0   | 1         | 1 uploaded · 1 need attention                              |
+
+  Rule: Too many uploads (429)
+
+    Scenario: The server rate limits an upload
+      Given a file is uploading and files are waiting
+      When POST /v1/media/ resolves 429 with the header Retry-After: 42
+      Then an info alert with the timer icon reads "Too many uploads" over "For your security, wait a moment before uploading again."
+      And the Upload button reads "Try again in 0:42" with the timer icon and is disabled, and so is the mobile pinned button
+      And Added rows stay in the panel
+      And the rate-limited file goes back to Waiting and the queue pauses
+      And the countdown is driven by useRetryAfter and ticks once per second
+      When the countdown reaches 0:00
+      Then the alert disappears, the Upload button reads "Upload" and is enabled again
+      And the paused file and the waiting files resume by themselves
+
+    Scenario: A missing Retry-After counts as 60 seconds
+      When POST /v1/media/ resolves 429 without a readable Retry-After header
+      Then the countdown starts at 1:00
+
+    Scenario: Dropping or choosing files while rate limited
+      Given the countdown is running
+      When the user drops files on the page
+      Then nothing is uploaded and the drop area does not show
+
+  Rule: Offline
+
+    Scenario: Upload, bulk delete and merge need a connection
+      Given the Default state has loaded and navigator.onLine becomes false
+      Then the offline banner from B1 shows
+      And "Upload" (header, mobile pinned button and "Upload an image"), "Delete" in the bulk bar and every "Merge into this one" are disabled, and dropping files does nothing
+      And browsing, selecting and "Clear" still work
+      When navigator.onLine becomes true
+      Then they are enabled again
+
+  Rule: Selection
+
+    Scenario: Selecting images
+      Given the Default state has loaded at md width or more
+      Then no checkbox is shown on the cards
+      When the pointer rests on a card, or a card takes keyboard focus
+      Then its checkbox shows at the top left (36 px)
+      When the user ticks the checkbox of "north-wall.jpg" (or presses Space on the card)
+      Then the card takes the sand fill (--rc-sand) with a primary outline, and every card now shows its checkbox
+      And the page announces "north-wall.jpg selected, 1 selected"
+      And the keyboard path is Space on the card: the checkbox itself is not an extra tab stop
+      And Enter still opens the detail panel, and ticking a checkbox does not
+
+    Scenario: Unselecting announces the new count
+      Given 3 images are selected
+      When the user unselects "north-wall.jpg"
+      Then the page announces "north-wall.jpg unselected, 2 selected"
+      And when the last one is unselected it announces "Selection cleared"
+
+    Scenario: Selection on mobile
+      Given the Default state has loaded below md width
+      Then every card shows a 44 px checkbox, and so does every row of the card list in list view
+      And tapping the checkbox toggles the selection, and tapping the card opens the detail panel
+
+    Scenario: Select all and the partial state
+      Given the Default state has loaded
+      Then the row above the grid reads "Select all" and "12 images", with an unchecked checkbox
+      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
+      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
+
+    Scenario: Escape and Clear empty the selection
+      Given 3 images are selected and the detail panel is closed
+      When the user presses Escape, or activates "Clear" in the bulk bar
+      Then the selection is emptied and the bulk bar disappears
+      Given the detail panel is open over a selection
+      When the user presses Escape
+      Then only the panel closes and the selection stays
+
+    Scenario: The selection follows the query
+      Given 3 images are selected
+      When the user changes the search text, the tab or the sort
+      Then the selection is cleared
+      When the user switches between grid and list
+      Then the selection is kept
+
+    Scenario: The bulk bar
+      Given the images "north-wall.jpg", "kitchen-after.webp" and "window-frame.jpg" are selected
+      Then a sticky bar sits at the bottom: 400 px wide and 24 px above the bottom edge, centred over the content area on desktop; full width with 16 px side margins and 16 px above the bottom edge on mobile
+      And it has the inverted fill, the text "3 selected", a danger "Delete" button (icon trash-2) and an inverted "Clear" button
+      And on mobile it replaces the pinned Upload button
+      And toasts sit above it on mobile
+
+  Rule: Bulk delete
+
+    Scenario: Bulk delete, confirm
+      Given "north-wall.jpg" (used in 2), "kitchen-after.webp" (used in 3) and "window-frame.jpg" (unused) are selected
+      When the user activates "Delete"
+      Then a dialog opens titled "Delete 3 images?" with the description "2 of them are used in 5 articles, which will show a broken image. The other one isn't used anywhere. This can't be undone."
+      And the body has one bordered row per selected image: the filename and the badge "Used in 2", "Used in 3" or "Unused"
+      And the buttons read "Cancel" first, then a danger "Delete 3 images"
+      And no usage request is sent
+
+    Scenario: Bulk delete, singular
+      Given one image is selected
+      When the user activates "Delete"
+      Then the dialog is titled "Delete 1 image?" and the confirm button reads "Delete 1 image"
+
+    Scenario: Bulk delete, in progress
+      Given the bulk delete dialog is open for 3 images
+      When the user activates "Delete 3 images"
+      Then one DELETE /v1/media/{id} is sent for each of the 3 images
+      And both buttons are disabled, the confirm button reads "Deleting…" with a loader-circle, and Cancel, Escape and a backdrop click do not close the dialog
+
+    Scenario: Bulk delete, done
+      Given a bulk delete of ids 1, 2 and 8 is in flight
+      When every DELETE resolves 204
+      Then the dialog closes, the 3 cards leave the grid and the selection is empty
+      And focus moves to the card now at the position of the first deleted card, or to the page heading when no card remains
+      And a success toast appears: icon circle-check, id "media-bulk-deleted", title "3 images deleted", text "They're gone from your library."
+      And the list is then requested again in the background, with no skeleton
+
+    Scenario: Bulk delete, partly failed
+      Given a bulk delete of ids 1, 2 and 8 is in flight
+      When DELETE /v1/media/1 and DELETE /v1/media/2 resolve 204 and DELETE /v1/media/8 resolves 500
+      Then the dialog closes, the cards for ids 1 and 2 leave the grid, and "window-frame.jpg" stays in the grid and stays selected, so the bulk bar reads "1 selected"
+      And an error toast appears and stays until retried or dismissed: icon circle-x, id "media-bulk-delete-failed", title "Couldn't delete 1 image", text "2 images were deleted. window-frame.jpg is still in your library. Try again." and a "Retry" button (icon rotate-cw)
+      When the user activates "Retry"
+      Then DELETE /v1/media/8 is sent again with no dialog, and on 204 the card leaves and the toast is replaced by a success toast
+
+    Scenario: Bulk delete, several failures
+      Given a bulk delete of 4 images in which two fail
+      Then the toast title reads "Couldn't delete 2 images" and the text names both files, "a.jpg and b.jpg are still in your library. Try again."
+
+    Scenario: Bulk delete, an image that no longer exists
+      Given a bulk delete of 3 images is in flight
+      When one DELETE resolves 404 and the others 204
+      Then the 404 image leaves the list and counts as deleted, and the success toast reads "3 images deleted"
+
+    Scenario: Bulk delete, every request fails
+      Given a bulk delete of 3 images is in flight
+      When every DELETE resolves 500 or never arrives
+      Then the dialog stays open with an error alert "Couldn't delete the images, so they're still there. Try again in a moment." and both buttons enabled
+
+  Rule: 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
+      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
+      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"
+      And group 1 has one column per copy, in the order "floorboards.jpg", "floorboards-copy.jpg", "IMG_2208.jpg" (most used, then oldest, then lowest id), and group 2 has "IMG_4471.jpg" then "stone-wall-detail.jpg"; below md the columns stack
+      And each copy shows its thumbnail, filename, "Uploaded 14 Jun 2026 by Inès Duarte", an underlined "Used in 4 articles" that opens its detail panel, and a "Merge into this one" button (icon merge)
+      And "floorboards.jpg" and "IMG_4471.jpg" carry the sand fill, a primary outline, the "Suggested" tag and a primary button, and the other copies are outlined with outline buttons
+      And each group's footer reads "Suggested: the most used copy, then the oldest. Choosing another copy switches articles to it."
+
+    Scenario: Group header details
+      Given a group of SVG images whose uploader is unknown
+      Then the header reads "2 identical images · 8 KB each · Vector" and each copy reads "Uploaded 14 Jun 2026" without "by"
+
+    Scenario Outline: The suggested copy
+      Given a group of copies <copies>
+      Then the suggested copy is <suggested>
+
+      Examples:
+        | copies                                        | suggested                             |
+        | used in 4 (14 Jun), 3 (2 Sep) and 2 (30 Aug) | the copy used in 4                    |
+        | used in 2 (29 Aug) and 2 (21 Aug)             | the copy of 21 Aug (same use, oldest) |
+        | used in 0 (3 Sep) and 0 (1 Sep)               | the copy of 1 Sep                     |
+
+    Scenario: Duplicates, empty
+      Given GET /v1/media/?filter=duplicates resolves 200 with no item and counts.duplicates 0
+      Then the Duplicates tab has no count badge
+      And a panel shows the copy icon, "No duplicates", "Every image in your library is different." and a "Back to all images" button
+      When the user activates "Back to all images"
+      Then the tab returns to All and ?filter leaves the URL
+
+  Rule: Merge
+
+    Scenario: Merge, confirm
+      Given the Duplicates tab shows group 1
+      When the user activates "Merge into this one" on "floorboards.jpg"
+      Then a dialog opens titled "Merge into floorboards.jpg?" with the description "Articles that use the other 2 copies will be switched to floorboards.jpg, and the other 2 copies will be deleted. 5 articles will be updated. This can't be undone."
+      And the body shows the kept image: its thumbnail, "floorboards.jpg" and "Kept · used in 4 articles now"
+      And the buttons read "Cancel" first, then a danger "Merge 2 copies"
+
+    Scenario: Choosing another copy keeps that one
+      When the user activates "Merge into this one" on "IMG_2208.jpg" in group 1
+      Then the dialog is titled "Merge into IMG_2208.jpg?" and its article count is the sum of the used_in of "floorboards.jpg" and "floorboards-copy.jpg"
+
+    Scenario: Merge, singular
+      Given a group of 2 copies
+      Then the description reads "Articles that use the other copy will be switched to …" and the confirm button reads "Merge 1 copy"
+
+    Scenario: Merge, in progress
+      Given the Merge dialog is open for group 1 with "floorboards.jpg" kept
+      When the user activates "Merge 2 copies"
+      Then POST /v1/media/merge is sent with { "keep_id": 12, "merge_ids": [5, 6] }
+      And both buttons are disabled, the confirm button reads "Merging…" with a loader-circle, and Cancel, Escape and a backdrop click do not close the dialog
+
+    Scenario: Merge, done
+      Given a merge for group 1 is in flight
+      When POST /v1/media/merge resolves 200 with { "articles_updated": 5, "merged": 2 }
+      Then the dialog closes and group 1 leaves the list
+      And a success toast appears: icon circle-check, id "media-merged-12", title "Copies merged", text "2 copies merged. 5 articles updated."
+      And the page announces the same text, and the list is requested again in the background so the counts and the Duplicate flags update
+      And when it was the last group, the "No duplicates" panel shows and the tab loses its count badge
+
+    Scenario Outline: Merge, errors keep the dialog open or remove the image
+      Given a merge for group 1 is in flight
+      When POST /v1/media/merge <failure>
+      Then <result>
+
+      Examples:
+        | failure                      | result                                                                                                                                                              |
+        | resolves with a 500 response | the dialog stays open with the error alert "Couldn't merge the copies. Nothing was changed. Try again in a moment." and both buttons enabled again                  |
+        | never reaches the server     | the same alert                                                                                                                                                      |
+        | resolves with a 409 response | the dialog stays open with "One of these images changed, so nothing was merged. The list is up to date now. Check it and try again.", and the list is reloaded      |
+        | resolves with a 404 response | the dialog closes, the info toast "That image no longer exists" (id "media-not-found-12") shows, and the list is reloaded                                           |
+
+  Rule: Sessions
+
+    Scenario Outline: Session errors are global for the new calls
+      When <call> resolves <status>
+      Then the user is sent to <destination> and no local copy shows
+
+      Examples:
+        | call                  | status | destination                           |
+        | POST /v1/media/ (XHR) | 401    | /login?redirect=/media&reason=expired |
+        | POST /v1/media/ (XHR) | 403    | /register/pending                     |
+        | POST /v1/media/merge  | 401    | /login?redirect=/media&reason=expired |
+        | DELETE /v1/media/{id} | 403    | /register/pending                     |
+        | GET /v1/media/?hash=  | 401    | /login?redirect=/media&reason=expired |

features/media_upload_selection_duplicates.qa.md

@@ -0,0 +1,58 @@
+# QA: Media page, part 2 (upload, selection, duplicates)
+
+## Scope note
+
+SPA only. No Go test and no `test/` file; run the Go suite once (`task test`) to confirm nothing regressed. The server never returns 429 for POST /v1/media/ today (no rate limiter is mounted on the media router), so every 429 case is proven with a mock only.
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Mount MediaPage in DashboardShell with a verified session and a test router at /media, as in the B1 spec. Mock useApi's `request` for GET/DELETE/merge and the list; replace `XMLHttpRequest` with a controllable stub (per instance: `open`, `send`, `abort`, `upload.onprogress` with `loaded`/`total`, `status`, `responseText`, `getResponseHeader('Retry-After')`, `load`, `error`, `abort` events). Stub `crypto.subtle.digest` to a known hex per file with `vi.stubGlobal`, and to `undefined` for the unavailable case. Use fake timers for the 150 ms skeleton, the 120 ms search debounce and the 1 s Retry-After tick. Sample data is the 12-image fixture of media_browse.feature. Files are built with `new File([...], name, { type })` and a `size` override for over-limit sizes.
+
+1. **Hashing lib** (pure): digest of a known byte array gives the expected lowercase 64-char hex; `crypto.subtle` undefined gives null; nothing in the lib imports from the Media page.
+2. **Browser checks**: the six rows of the .feature, plus 10485760 bytes accepted and 10485761 rejected; size beats type; a rejected file triggers no hash call, no GET and no XHR; titles and text exact.
+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.
+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.
+10. **429**: `Retry-After: 42` gives the alert copy and "Try again in 0:42" (disabled, timer icon; mobile pinned button too); the 429'd file returns to Waiting; advancing 42 s re-enables, removes the alert and resumes the queue; Added rows kept; missing header gives 1:00; drops ignored while counting.
+11. **Offline**: Upload, "Upload an image", bulk "Delete" and "Merge into this one" disabled; drops ignored; Clear and selection still work; back online re-enables.
+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.
+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.
+
+## Visual (`task visual:check -- media`, desktop and mobile, light and dark)
+
+Reference: docs/design/screens/media.md and `source/MediaFrame.dc.html`. The 20 B2 states lose `skip: 'pending'` and get a setup in `web/visual/states.ts`. None depends on the current date (dates are absolute), so none is `skip: 'clock-sensitive'`. Where a board frame contradicts the prose or fixture (bulk delete done / partly failed, "4 articles", tab badge at zero, "2 of 6 done", merge done with one group left), the user corrects the board; no exception is added.
+
+Harness requirements:
+- Upload states use an init-script XHR stub that holds a request at 1.1 of 2.6 MB (42 %); files come from `setInputFiles`; the duplicate state mocks `GET /v1/media/?hash=` by the hash of the file's bytes.
+- The drag state dispatches a synthetic `dragenter` with `dataTransfer.types` = `['Files']`.
+- The 429 state freezes timers with Playwright `page.clock` so the button reads "0:42".
+
+Setups:
+- [ ] Selection and bulk bar (ids 1, 2, 8; partial select-all)
+- [ ] Bulk delete: confirm, in progress, partly failed, done
+- [ ] Upload: drag over the page, several files mixed, summary, rejected files (413, 400), too many requests (429)
+- [ ] Duplicates: groups, empty
+- [ ] Merge: confirm, in progress, failed, conflict (409), done
+
+Manual checks screenshots cannot cover:
+- [ ] Keyboard and focus order: Space toggles selection, Enter opens the panel, Escape order (panel first, then selection); focus after a bulk delete; dialog focus starts on Cancel.
+- [ ] Drag and drop with real files from the OS, including a folder and a non-image drop.
+- [ ] Progress bar smoothness, hover and focus rings, reduced motion.
+- [ ] Screen reader announcements for selection, upload completion and merge.
+
+## Manual verification
+
+- Real upload round trip against a running server (`task dev`): progress on a large file, 413 at 10 MB + 1 byte, 415, 400 for a corrupt PNG, uploading the same bytes twice (duplicate row, "Upload anyway", Duplicates tab).
+- Real SHA-256 over a 10 MB file, and the skip path on an insecure origin (plain http on a LAN address).
+- Real merge: article bodies rewritten, counts after the refresh.
+- Real 429 cannot be checked: the media router has no limiter.
+- Real bulk delete of 20+ images with one deleted from another tab first (404 handling).

features/nuxt_ui_shell_foundation.feature

@@ -130,14 +130,14 @@ Feature: Nuxt UI shell foundation and router guards
     Then the alert above the title contains "Your session expired."
     And the footer area outside the card contains a "Forgot password?" link
 
-  Scenario: DashboardShell renders the four navigation destinations
+  Scenario: DashboardShell renders the five navigation destinations
     Given the current route is /article
     When DashboardShell mounts
-    Then the sidebar navigation lists exactly four destinations in this order: "Home" linking to
+    Then the sidebar navigation lists exactly five destinations in this order: "Home" linking to
-      /home, "Articles" linking to /article, "Users" linking to /users, and "Integration" linking
+      /home, "Articles" linking to /article, "Users" linking to /users, "Integration" linking
-      to /integration
+      to /integration, and "Settings" linking to /settings
     And the "Articles" destination has aria-current="page"
-    And none of "Home", "Users" and "Integration" has aria-current set
+    And none of "Home", "Users", "Integration" and "Settings" has aria-current set
 
   Scenario: DashboardShell shows the offline banner when the browser reports offline
     Given navigator.onLine is false

features/nuxt_ui_shell_foundation.qa.md

@@ -41,7 +41,7 @@ Mock `useApi` / the `/v1/auth/me` call per case; no real backend, no httptest se
 13. **AuthShell notice/footer slots** — mount AuthShell with notice and footer slot content; assert
     both render outside/above the card content as specified.
 14. **DashboardShell nav + aria-current** — mount DashboardShell with current route /article; assert
-    4 links in order (Home→/home, Articles→/article, Users→/users, Integration→/integration), and only the Articles link
+    5 links in order (Home→/home, Articles→/article, Users→/users, Integration→/integration, Settings→/settings), and only the Articles link
     has aria-current="page".
 15. **DashboardShell offline banner** — mock navigator.onLine false, mount DashboardShell; assert
     the offline banner is visible; set navigator.onLine true and dispatch the 'online' event; assert
@@ -57,7 +57,7 @@ plus the components.md AuthShell/DashboardShell sections.
 - [ ] AuthShell below sm: card loses border, 20px padding fills screen, fields/buttons use xl size,
       light and dark.
 - [ ] AuthShell footer: UColorModeSelect size="sm" plus footer links render outside the card.
-- [ ] DashboardShell desktop: sidebar with RenewCMS logo header, 3 nav items, UserMenu footer;
+- [ ] DashboardShell desktop: sidebar with RenewCMS logo header, 5 nav items, UserMenu footer;
       collapsing the sidebar leaves a 56px icon rail with tooltips on hover/focus.
 - [ ] DashboardShell mobile (below lg): UDashboardSidebarToggle appears, sidebar becomes a
       slideover, closes after navigating.

features/profile_page.feature

@@ -18,8 +18,8 @@ Feature: Profile page, display name and the account menu
       display_name in a response is read as ""; the session store gains an action that replaces
       the session's displayName from the display_name of a PATCH /v1/user/me response
     And the PageHeader shows breadcrumb "Profile" (mobile title "Profile"), the page title
-      "Profile" and the subtitle "Your account on this RenewCMS workspace."; none of the four
+      "Profile" and the subtitle "Your account on this RenewCMS workspace."; none of the five
-      navigation items (Home, Articles, Users, Integration) has aria-current="page" on /profile
+      navigation items (Home, Articles, Users, Integration, Settings) has aria-current="page" on /profile
     And the page is at most 720 px wide with three ProfileCards in this order: Display name,
       Account, Password; cards are separated by 20 px, have 20 px padding (16 px on mobile) and
       inputs are 40 px high (44 px on mobile, 16 px text)
@@ -92,7 +92,7 @@ Feature: Profile page, display name and the account menu
       checked (kept from the shipped menu), a separator, and "Log out" (icon log-out); items are
       32 px on desktop and 48 px at 15 px text on mobile
     And activating "Profile" navigates to /profile and closes the menu (when already on /profile
-      it only closes); activating a theme item sets the preference and closes the menu;
+      it only closes); activating a theme item sets the preference and, in the desktop popover, keeps the menu open (the mobile sheet closes);
       activating "Log out" behaves as today: POST /v1/auth/logout in a try/finally, then
       session.clear() and a navigation to /login
     And avatar initials are the uppercased first Unicode character of each of the first two words
@@ -296,7 +296,10 @@ Feature: Profile page, display name and the account menu
     And its header shows "marta" in semibold and "marta@renew.example" in muted 12 px
     And below it are "Profile" (circle-user), a separator, "System", "Light", "Dark" (the
       current preference checked), a separator, and "Log out" (log-out)
+    And every item is 32 px high
     And "Profile" is not highlighted
+    And "System", "Light" and "Dark" form one group where choosing one applies the theme at once
+      and keeps the menu open
 
   Scenario: Account menu — opened from the drawer on mobile
     Given the user is on /home on a viewport below lg and the navigation drawer is open
@@ -305,8 +308,17 @@ Feature: Profile page, display name and the account menu
       with the Home page behind it
     And its header shows a 36 px avatar "MA", the name "marta" at 15 px semibold and the email
       "marta@renew.example" muted
-    And its items are 48 px high: "Profile", a separator, "System", "Light", "Dark", a separator,
+    And its items are 48 px high at 15 px text: "Profile", a separator, "System", "Light", "Dark",
-      "Log out"
+      a separator, "Log out"
+    And the sheet has the same items in the same order as the desktop popover, so it is no taller
+      than the board's sheet
+
+  Scenario: Account menu matches the board with no visual exception
+    Given web/visual/states.ts has no exception on the profile state "Account menu"
+    When `task visual:check -- profile "Account menu"` runs at desktop and mobile, light and dark
+    Then every capture is within 10 %
+    And System, Light and Dark are present in the popover and in the sheet
+    And item heights are 32 px on desktop and 48 px on mobile
 
   Scenario Outline: Closing the menu
     Given the account menu is open

features/profile_page.qa.md

@@ -102,12 +102,17 @@ capture must be within 10 %. Base session mock: GET /v1/auth/me 200 with id 1, u
 "marta", email "marta@renew.example", is_verified true, display_name "" (state-specific
 overrides below).
 
-- [ ] Account menu: /home with `now: boardNow` and the home Default fixtures, session as above,
+- [ ] Account menu: /home with `now: boardNow` and the home Default fixtures, session as above
-      menu opened by clicking the chip (on mobile: open the drawer, then the account row). Name
+      (id 1, "marta", "marta@renew.example", display_name ""), menu opened by clicking the chip
-      "marta", initials "MA", email "marta@renew.example". The theme items kept by user decision
+      (on mobile: open the drawer, then the account row). Name "marta", initials "MA", email
-      are not drawn on the board, so the mobile capture is expected to exceed 10 %. The user has
+      "marta@renew.example". The board now draws System, Light and Dark, with Light checked in
-      approved a per-state `exception` for it, to be added with `approvedBy` only after the
+      its sample. The `exception` block is removed from web/visual/states.ts, so the default 10 %
-      real difference is measured and reported to the user with its cause.
+      gate applies. `task visual:check -- profile "Account menu"` must PASS on all four captures
+      (desktop and mobile, light and dark). If the only remaining diff is the board's Profile
+      highlight on Home (the app highlights Profile only on /profile), do NOT re-add an exception
+      and do NOT highlight Profile on Home. Stop and ask the user.
+- [ ] Manual: item heights measured 32 px (desktop popover) and 48 px (mobile sheet); arrow keys move
+      between items; Escape and outside click close; choosing a theme keeps the menu open.
 - [ ] Loading: /profile with GET /v1/auth/me hanging; three skeleton cards, 16 px apart.
 - [ ] Default, no display name: empty field, "0 / 60", the username footer, Save at 40 %.
 - [ ] Editing: type "Marta Alves"; field focused; "11 / 60"; "Unsaved changes"; Save enabled.

features/public_article_read.feature

@@ -23,7 +23,7 @@ Feature: Single article read follows the same online/offline visibility rule as
       group that already holds GET /v1/article/ (features/public_article_listing.feature), so a
       missing or invalid jwt cookie no longer blocks the request; POST /v1/article/,
       DELETE /v1/article/{id}, PATCH /v1/article/{id}, PATCH /v1/article/{id}/publish,
-      PATCH /v1/article/{id}/unpublish and POST /v1/article/{id}/image keep requiring
+      and PATCH /v1/article/{id}/unpublish keep requiring
       Verifier + Authenticator + RequireVerifiedUser, unchanged
     And Handler.GetArticle reuses the existing Handler.callerIsVerified(r) helper already used by
       Handler.ListArticles: when the request resolves to a verified account it calls

features/remove_article_image.feature

@@ -1,99 +0,0 @@
-Feature: Removing an image from an article
-
-  As an authenticated RenewCMS user managing the CMS
-  I want to delete an already-uploaded image by its id
-  So that a removed image's file and row are actually gone, and a delete on
-    an unknown article or an unknown image answers 404 the same way every
-    other article write does
-
-  Background:
-    Given internal/infrastructure/useCases.DeleteImageUseCase.DeleteImage(imageId)
-      already exists and calls image.Repository.Delete(imageId), which returns
-      image.ErrImageNotFound for an unknown id and, on the real ImageRepository,
-      also removes the uploaded file from UPLOAD_DIR, per
-      features/delete_article_cascades_images.feature
-    And this slice changes POST /v1/article/{id}/image's success response
-      (api/handlers/image.Handler.PostImage, features/upload_article_image.feature)
-      to also return the created image's numeric id, so the 201 body becomes
-      {"id": ..., "location": ...}; this lets a client address the image later
-      through this slice's DELETE route
-    And this slice mounts DELETE /v1/article/{articleId}/image/{imageId} in
-      api/router.go, in the same jwtauth Verifier + Authenticator group as
-      POST .../image
-    And this slice adds a DeleteImage method to api/handlers/image.Handler,
-      grows NewHandler's signature to also take DeleteImageUseCase, and wires
-      it in api/router.go
-    And DeleteImage parses articleId and imageId from the URL, answering 400
-      with apperr.IdUint32ErrorMessage if either isn't a valid uint32
-    And DeleteImage first calls GetArticleUseCase.GetArticle(articleId);
-      errors.Is(err, article.ErrArticleNotFound) answers 404 with
-      apperr.ArticleNotFoundErrorMessage; this only confirms the article id
-      in the URL names a real article, and does not verify that the image id
-      belongs to that article's Images slice (a shallow existence check on
-      both ids, not an ownership check)
-    And DeleteImage then calls DeleteImageUseCase.DeleteImage(imageId);
-      errors.Is(err, image.ErrImageNotFound) answers 404 with the new
-      apperr.ImageNotFoundErrorMessage = "Image not found"; any other error
-      falls back to the existing generic 500
-    And on success DeleteImage answers 204 with an empty body, the same shape
-      as DELETE /v1/article/{id}
-
-  Scenario: Removing an image from an article it belongs to succeeds
-    Given a valid jwt cookie for a user with id 1
-    And the article repository contains an article with id 1 titled
-      "Backyard Renovation Update" whose Images slice holds image id 10
-    And the image repository contains an image with id 10
-    When the client sends DELETE /v1/article/1/image/10 with that cookie
-    Then the response status is 204
-    And the response body is empty
-    And the image repository no longer contains an image with id 10
-
-  Scenario: Removing an image from an unknown article answers 404 and never touches the image repository
-    Given a valid jwt cookie for a user with id 1
-    And the article repository has no article with id 9999
-    And the image repository contains an image with id 10
-    When the client sends DELETE /v1/article/9999/image/10 with that cookie
-    Then the response status is 404
-    And the response body is the text "Article not found"
-    And the image repository's Delete is never called
-    And the image repository still contains the image with id 10
-
-  Scenario: Removing an unknown image from an existing article answers 404
-    Given a valid jwt cookie for a user with id 1
-    And the article repository contains an article with id 1 titled
-      "Backyard Renovation Update"
-    And the image repository has no image with id 9999
-    When the client sends DELETE /v1/article/1/image/9999 with that cookie
-    Then the response status is 404
-    And the response body is the text "Image not found"
-
-  Scenario: Removing an image id that belongs to a different article still succeeds, because the check is shallow
-    Given a valid jwt cookie for a user with id 1
-    And the article repository contains an article with id 1 titled
-      "Backyard Renovation Update" whose Images slice is empty
-    And the article repository contains a second article with id 2 whose
-      Images slice holds image id 10
-    And the image repository contains an image with id 10
-    When the client sends DELETE /v1/article/1/image/10 with that cookie
-    Then the response status is 204
-    And the image repository no longer contains an image with id 10
-
-  Scenario: Removing an image still requires authentication
-    Given no jwt cookie is sent
-    And the article repository contains an article with id 1 titled
-      "Backyard Renovation Update" whose Images slice holds image id 10
-    And the image repository contains an image with id 10
-    When the client sends DELETE /v1/article/1/image/10 without a cookie
-    Then the response status is 401
-    And the image repository still contains the image with id 10
-
-  Scenario Outline: A malformed id in the URL answers 400 before either repository is touched
-    Given a valid jwt cookie for a user with id 1
-    When the client sends DELETE /v1/article/<article_id>/image/<image_id> with that cookie
-    Then the response status is 400
-    And the response body is the text "The server expects the ID to be in the format of an unsigned 32-bit integer (uint32)."
-
-    Examples:
-      | article_id | image_id |
-      | abc        | 10       |
-      | 1          | abc      |

features/remove_article_image.qa.md

@@ -1,56 +0,0 @@
-# QA procedure: remove_article_image
-
-Package: `test` (black-box, extending `article_test.go` / `image_test.go`).
-
-## Setup shared by every case
-1. Call `validator.InitValidator()` once.
-2. Reuse `mockArticleRepo` and `mockImageRepo` as-is.
-3. Wire `useCases.NewDeleteImageUseCase(imageRepo)` (already used by
-   `delete_article_cascades_images.qa.md`'s suite) alongside the existing
-   use cases.
-4. Build `image.NewHandler(...)` with its grown constructor including the
-   delete use case, matching whatever parameter order the coder settles on.
-5. Build a test `jwtauth.New("HS256", []byte("test-secret"), nil)`.
-6. Mount `DELETE /{id}/image/{imageId}` alongside the existing article
-   routes under the authenticated group, mirroring `api/router.go` after
-   this slice.
-7. Mint a valid jwt cookie for user id 1 as in `upload_article_image.qa.md`.
-
-## HTTP checks
-8. Seed `articleRepo.articles[1]` with `Images: []*image.Image{{ID: 10}}`
-   and `imageRepo.images[10] = image.Image{ID: 10}`. Send
-   `DELETE /v1/article/1/image/10` with the valid cookie. Assert status
-   204, empty body; assert `imageRepo.images` no longer has key 10.
-9. Empty `articleRepo`; seed `imageRepo.images[10]`. Send
-   `DELETE /v1/article/9999/image/10`. Assert 404, body
-   `"Article not found\n"`; assert `imageRepo.images` still has key 10
-   (Delete never called — track via a call-count field on the fake, the
-   same way the existing fakes already track `Create`).
-10. Seed `articleRepo.articles[1]`; empty `imageRepo`. Send
-    `DELETE /v1/article/1/image/9999`. Assert 404, body
-    `"Image not found\n"`.
-11. Seed `articleRepo.articles[1]` (empty Images) and `articleRepo.articles[2]`
-    with `Images: []*image.Image{{ID: 10}}`; seed `imageRepo.images[10]`.
-    Send `DELETE /v1/article/1/image/10`. Assert 204; assert
-    `imageRepo.images` no longer has key 10 — asserts the shallow-check
-    contract from the feature's fourth scenario.
-12. Seed as in step 8. Send `DELETE /v1/article/1/image/10` with **no**
-    cookie. Assert 401; assert `imageRepo.images` still has key 10.
-13. Examples-driven: send `DELETE /v1/article/abc/image/10` and
-    `DELETE /v1/article/1/image/abc` with the valid cookie. Assert 400,
-    body `"The server expects the ID to be in the format of an unsigned
-    32-bit integer (uint32).\n"` for each.
-
-## Also touched by this slice: upload_article_image's 201 body
-14. Extend `upload_article_image.qa.md`'s existing 201-body assertion to
-    also decode and check the `id` field equals the newly created image's
-    `ID` in `imageRepo.images`.
-
-## Manual verification (not exercised by the Go test)
-- Real DELETE against a real SQLite file and real UPLOAD_DIR: confirm the
-  file is actually removed from disk and the `article_images` join row is
-  gone, the same way `upload_article_image.qa.md`'s manual item covers the
-  POST side.
-- SPA-visible behaviour: covered separately by
-  `features/editor_image_removal.qa.md`.
-- No SMTP involvement.

features/remove_legacy_article_image_alias.feature

@@ -0,0 +1,42 @@
+Feature: The legacy POST /v1/article/{id}/image alias is removed
+
+  As the maintainer of RenewCMS
+  I want the editor to upload through /v1/media only and the article alias deleted
+  So that there is one way to add an image and no dead route to keep
+
+  Background:
+    Given this is a Go API change in a slice that is otherwise SPA only, made at the user's request
+    And features/upload_article_image.feature and its .qa.md are deleted, with their tests
+    And api/router.go no longer mounts r.Post("/{id}/image", ...) in NewArticleRouter, and the
+      imageHandler variable and the api/handlers/image import are removed from it
+    And the package api/handlers/image (PostLegacyArticleImage, its NewHandler and its helpers) is deleted
+    And CreateImageUseCase and GetArticleUseCase stay: both are used by the media handler and
+      the article handler, and api/pkg/upload stays because the media handler uses it
+    And the rest of the protected article group is unchanged, still behind jwtauth.Authenticator,
+      RequireCurrentToken and RequireVerifiedUser
+    And docs/architecture.md no longer lists api/handlers/image
+    And POST /v1/media/ is the only upload route, and DELETE /v1/article/{id}/image/{imageId}
+      stays unmounted, as before
+
+  Scenario Outline: The removed routes are not found
+    Given a valid jwt cookie for verified user 1 and an article with id 1
+    When the client sends <method> <path> with a valid PNG as multipart field "file"
+    Then the response status is 404
+    And the image repository's Create is never called
+    And no image exists afterwards
+
+    Examples:
+      | method | path                    |
+      | POST   | /v1/article/1/image     |
+      | DELETE | /v1/article/1/image/10  |
+
+  Scenario: Uploading still works through the media route
+    Given a valid jwt cookie for verified user 1
+    When the client sends POST /v1/media/ with a real PNG named "before.png"
+    Then the response status is 201 and the body is the library item with a "url" and an "id"
+    And GET /v1/media/ lists it
+
+  Scenario: The rest of the article router is unchanged
+    Given a valid jwt cookie for verified user 1 and an article with id 1
+    When the client sends PATCH /v1/article/1/publish
+    Then the response is as before this slice

features/remove_legacy_article_image_alias.qa.md

@@ -0,0 +1,21 @@
+# QA procedure: remove_legacy_article_image_alias
+
+Package: `test` (black-box, httptest, in-memory fakes, no live server).
+
+## Setup
+1. Call `validator.InitValidator()`.
+2. Build the article router exactly as `NewArticleRouter` does after the change (no image handler), wrapped in `Verifier`, `Authenticator`, `RequireCurrentToken` and `RequireVerifiedUser`, over fake article, image and user repositories. Reuse `newMultipartFileRequest` and `pngBytes` from `test/media_fixtures_test.go`.
+
+## HTTP checks
+3. `POST /v1/article/1/image` with a valid PNG and a valid cookie -> 404, `Create` never called.
+4. `DELETE /v1/article/1/image/10` with a valid cookie -> 404, image 10 still exists.
+5. `POST /v1/media/` with a valid PNG -> 201 with `id` and `url` (this stays covered by `media_library_http_test.go`; confirm the case still passes after the deletions).
+6. `PATCH /v1/article/1/publish` still answers as in `verified_account_required_http_test.go`.
+
+## Cleanup (Go)
+7. Delete `test/upload_article_image_http_test.go`.
+8. In `test/verified_account_required_http_test.go`: remove the `api/handlers/image` import, the `imageHandler` construction (line 34), the route `r.Post("/{id}/image", ...)` (line 53) and the "unverified user is refused when attaching an image" case (around line 149).
+9. Run `task test` and `task lint`; nothing else may reference `PostLegacyArticleImage` or `handlers/image`.
+
+## Manual verification
+With `task dev`, `curl -i -X POST /v1/article/1/image` with a valid cookie answers 404.

features/serve_uploaded_images.feature

@@ -23,9 +23,11 @@ Feature: Serving uploaded images as static files
       "application/octet-stream"
     And every response from this handler, success or 404, sets
       "X-Content-Type-Options: nosniff"
-    And every successful response sets a long-lived, public Cache-Control
+    And every successful response sets the Cache-Control header
-      header, e.g. "public, max-age=31536000, immutable", because a stored
+      "public, no-cache", so a browser may store the file but must revalidate
-      filename is a UUID and its bytes never change
+      it before reusing it; a stored filename is a UUID and its bytes never
+      change, but the file can be deleted from the media library, and a
+      long-lived cache would keep showing it
     And an "image/svg+xml" response additionally sets
       "Content-Security-Policy: default-src 'none'; style-src
       'unsafe-inline'; sandbox", so a script embedded in an uploaded SVG
@@ -42,7 +44,7 @@ Feature: Serving uploaded images as static files
       cookie
     Then the response status is 200
     And the response Content-Type is <content_type>
-    And the response Cache-Control is "public, max-age=31536000, immutable"
+    And the response Cache-Control is "public, no-cache"
     And the response X-Content-Type-Options is "nosniff"
     And the response has no Content-Security-Policy header
     And the response body is that file's exact content
@@ -61,7 +63,7 @@ Feature: Serving uploaded images as static files
       with no jwt cookie
     Then the response status is 200
     And the response Content-Type is "image/svg+xml"
-    And the response Cache-Control is "public, max-age=31536000, immutable"
+    And the response Cache-Control is "public, no-cache"
     And the response X-Content-Type-Options is "nosniff"
     And the response Content-Security-Policy is
       "default-src 'none'; style-src 'unsafe-inline'; sandbox"
@@ -128,7 +130,7 @@ Feature: Serving uploaded images as static files
       with no jwt cookie
     Then the response status is 200
     And the response Content-Type is "image/webp"
-    And the response Cache-Control is "public, max-age=31536000, immutable"
+    And the response Cache-Control is "public, no-cache"
     And the response X-Content-Type-Options is "nosniff"
     And the response body is empty
 

features/serve_uploaded_images.qa.md

@@ -29,7 +29,7 @@ Package: `test` (black-box, new file `test/serve_uploaded_images_test.go`).
    non-empty byte content. For each, `httptest.NewRequest("GET",
    "/static/uploadedImages/"+name, nil)`, no cookie. Assert status `200`;
    `Content-Type` equals the expected value; `Cache-Control` equals
-   `"public, max-age=31536000, immutable"`; `X-Content-Type-Options` equals
+   `"public, no-cache"`; `X-Content-Type-Options` equals
    `"nosniff"`; `Content-Security-Policy` header is absent; body bytes equal
    what was written.
 7. Write a `.svg` file whose content contains an inline `onload` handler

features/settings_page.feature

@@ -0,0 +1,131 @@
+Feature: Settings page and GET /v1/settings
+
+  As a verified RenewCMS user in the shared workspace
+  I want a Settings page that shows the version of the RenewCMS build I am running
+  So that I can tell which build is deployed when I report a problem or check an upgrade
+
+  Background:
+    Given GET /v1/settings is mounted under /v1 in api/router.go in its own router, behind
+      jwtauth.Verifier, jwtauth.Authenticator, middleware.RequireCurrentToken and
+      middleware.RequireVerifiedUser, the same chain as NewUserRouter
+    And the response of a verified caller is 200 with the JSON body {"version": "<value>"}, one
+      snake_case field and nothing else, built from the domain entity settings.Settings in
+      internal/domain/settings
+    And GetSettingsUseCase (internal/infrastructure/useCases) is built with the version string and
+      depends only on the domain package; the handler in api/handlers/settings receives it
+      through NewHandler and never reads config, os or the environment
+    And config.Settings gains a Version field; cmd/server/main.go sets it from its own
+      main.version variable ("dev" unless set with -ldflags -X main.version) right after
+      config.NewSettingsFromEnv, and api/dependecyInjection.go passes settings.Version to the use
+      case; no os.Getenv or os.LookupEnv for the version appears outside cmd/server/main.go and
+      internal/infrastructure/config, and the version is captured once at startup
+    And /settings is a verified route (meta.auth "verified", meta.title "Settings") rendered as
+      SettingsPage inside DashboardShell, per docs/design/routes.md and docs/design/screens/settings.md
+    And SettingsPage calls GET /v1/settings once per navigation to it
+    And the PageHeader shows breadcrumb "Settings" (mobile title "Settings"), the page title
+      "Settings" and the subtitle "Workspace information."
+    And the page is at most 720 px wide, with padding 32 px on desktop and 20px 16px 88px on
+      mobile, and 20 px between the header and the card
+    And the page holds one card, --ui-bg with a 1 px --ui-border, 20 px padding on desktop and
+      16 px on mobile, containing a single row laid out as the board frame draws it: the label at
+      the left, the value at the right, vertically centred, 16 px apart
+    And the label is "Version" (15 px semibold, --ui-text-highlighted) and the value is the
+      server's version string in IBM Plex Mono 14 px, --ui-text-toned, with no "v" added by the
+      SPA
+    And the page has no action, toggle, link or input; every verified user sees it, owner and
+      admin alike
+    And DashboardShell's navigation gains "Settings" (icon settings, i-lucide-settings, linking to
+      /settings) after "Integration", in the sidebar and in the mobile drawer, so it lists five
+      destinations in this order: Home, Articles, Users, Integration, Settings
+    And skeleton placeholders show only after 150 ms of loading, so a fast response never flashes
+      them
+    And the Loading and Error states are not drawn in docs/design; they are decided in this spec
+      and covered by Vitest only (no visual state)
+
+  Scenario Outline: A verified caller gets the running build's version
+    Given the process was started with a config.Settings whose Version is "<version>"
+    And a verified user is logged in with a valid jwt cookie
+    When the client sends GET /v1/settings
+    Then the response status is 200
+    And the response body is exactly the JSON object {"version": "<version>"}
+
+    Examples:
+      | version     |
+      | v2.2.0-beta |
+      | dev         |
+
+  Scenario: The use case returns the version it was built with
+    Given GetSettingsUseCase is built with the version "v2.2.0-beta"
+    When GetSettings is called
+    Then it returns a settings.Settings whose Version is "v2.2.0-beta"
+
+  Scenario: A request without a jwt cookie is refused
+    When the client sends GET /v1/settings with no jwt cookie
+    Then the response status is 401
+    And the use case is not consulted for the response
+
+  Scenario: A token whose version no longer matches the account is refused
+    Given user id 7 exists with token version 1
+    And the jwt cookie was minted for user 7 with token version 0
+    When the client sends GET /v1/settings with that cookie
+    Then the response status is 401
+    And the response body is apperr.UnauthorizedErrorMessage
+
+  Scenario: An unverified account is refused
+    Given user id 8 exists with is_verified false and a valid jwt cookie
+    When the client sends GET /v1/settings with that cookie
+    Then the response status is 403
+    And the response body is apperr.VerificationRequiredErrorMessage
+    And the response does not contain the version
+
+  Scenario: Default — the Version row shows the server's version
+    Given GET /v1/settings resolves 200 with {"version": "v2.2.0-beta"}
+    When the user navigates to /settings
+    Then the breadcrumb reads "Settings" (mobile title "Settings")
+    And the header shows the title "Settings" and the subtitle "Workspace information."
+    And the card shows one row: the label "Version" and the value "v2.2.0-beta"
+    And the "Settings" nav item has aria-current="page" and no other nav item does
+
+  Scenario: The value is shown exactly as reported, with no prefix added
+    Given GET /v1/settings resolves 200 with {"version": "dev"}
+    When the user navigates to /settings
+    Then the value reads "dev"
+
+  Scenario: Navigation — "Settings" sits after Integration
+    Given the user is on /home
+    When DashboardShell mounts
+    Then the sidebar and the mobile drawer list Home, Articles, Users, Integration, Settings in
+      that order
+    And "Settings" has the settings icon and links to /settings
+
+  Scenario: Loading — the value becomes a skeleton after 150 ms while the request is in flight
+    Given GET /v1/settings has not yet resolved
+    When the user navigates to /settings
+    Then the label "Version" is visible at once, and nothing stands in for the value during the
+      first 150 ms
+    And after 150 ms a skeleton replaces the value only, and the card is aria-busy="true"
+    When GET /v1/settings then resolves 200 with {"version": "v2.2.0-beta"}
+    Then the skeleton is replaced by "v2.2.0-beta" and aria-busy is no longer set
+
+  Scenario Outline: Error — a 500 or a network failure replaces the row with an inline alert and a retry
+    Given GET /v1/settings <failure>
+    When the user navigates to /settings
+    Then the card shows an error alert with no close button and no title, reading "Couldn't reach
+      RenewCMS. Check your connection and try again.", with an action "Try again" (icon rotate-cw)
+    And the "Version" row is not shown
+    And the header (title and subtitle) is still shown
+    When the user activates "Try again"
+    Then the Loading state shows and GET /v1/settings is sent again
+    When it then resolves 200 with {"version": "v2.2.0-beta"}
+    Then the Default state's row replaces the alert
+
+    Examples:
+      | failure                      |
+      | resolves with a 500 response |
+      | never reaches the server     |
+
+  Scenario: A 401 or an unverified 403 is handled globally, not by the page
+    Given GET /v1/settings resolves 401
+    When the user navigates to /settings
+    Then useApi's global handling redirects to "/login?redirect=/settings&reason=expired"
+    And SettingsPage shows no error alert of its own

features/settings_page.qa.md

@@ -0,0 +1,92 @@
+# QA: Settings page and GET /v1/settings
+
+## Automated Go (`task test`, package `test`, black-box)
+
+Files: `test/settings_test.go` (use case) and `test/settings_http_test.go` (HTTP). Fakes: reuse
+`mockUserRepo` from `test/user_test.go`; no settings repository exists, so none is needed. Name any
+new fake uniquely, since all fakes share one package.
+
+Setup shared by the HTTP cases:
+1. Call `validator.InitValidator()` once.
+2. Build `token := jwtauth.New("HS256", []byte("test-secret"), nil)`, `getUser :=
+   useCases.NewGetUserUseCase(userRepo)` and `settingsHandler :=
+   settings.NewHandler(useCases.NewGetSettingsUseCase(version))`.
+3. Mount on a fresh `chi.NewRouter()` mirroring `NewSettingsRouter`:
+   `r.Route("/v1/settings", ...)` with `jwtauth.Verifier(token)`, `jwtauth.Authenticator(token)`,
+   `middleware.RequireCurrentToken(getUser)`, `middleware.RequireVerifiedUser(getUser)`, then
+   `r.Get("/", settingsHandler.GetSettings)`. No live server, no SQLite, no SMTP.
+4. Mint cookies with `token.Encode(map[string]any{"user_id": uint32(id), "token_version":
+   uint32(v)})`, as in `test/stale_token_invalidation_http_test.go`.
+
+Cases:
+5. Use case, table-driven over versions "v2.2.0-beta" and "dev": `NewGetSettingsUseCase(v)
+   .GetSettings().Version == v`. The rule that `internal/domain/settings` and the use case do not
+   import `config`, `os`, `net/http` or `gorm` is a review item, not a Go test.
+6. Verified user id 7 (`IsVerified: true`, `TokenVersion: 0`), matching cookie, version
+   "v2.2.0-beta": `GET /v1/settings` returns 200 and the body decodes to exactly one key
+   `version` equal to "v2.2.0-beta" (decode into `map[string]any` and assert `len == 1`). Repeat
+   with version "dev".
+7. No cookie: 401. Do not assert an exact body (it is produced by `jwtauth.Authenticator`).
+8. User 7 with `TokenVersion: 1`, cookie encoding `token_version: 0`: 401, body exactly
+   `apperr.UnauthorizedErrorMessage`.
+9. User 8 with `IsVerified: false`, matching cookie: 403, body exactly
+   `apperr.VerificationRequiredErrorMessage`, and the body does not contain the version string.
+10. After building the router, call `t.Setenv("ENVIRONMENT", "development")` and re-request as in
+    case 6: the response is unchanged (nothing is read from the environment at request time).
+
+## Automated SPA (Vitest + Vue Test Utils, `task test:web`)
+
+Mock `useApi`'s `request` for `GET /v1/settings`. Mount SettingsPage inside DashboardShell with a
+resolved verified session and a test router at /settings. Use fake timers for the 150 ms cases. No
+test freezes the system date.
+
+1. **Default** — resolve `{ version: 'v2.2.0-beta' }`; assert breadcrumb "Settings", title
+   "Settings", subtitle "Workspace information.", one row with the label "Version" and the value
+   exactly "v2.2.0-beta", `request` called once with `/v1/settings`, and no button, link, switch or
+   input inside the card.
+2. **No prefix** — resolve `{ version: 'dev' }`; assert the value text is exactly "dev".
+3. **Navigation** — assert the sidebar and the drawer list Home, Articles, Users, Integration,
+   Settings in that order with the settings icon on the last; on /settings only "Settings" carries
+   `aria-current="page"`.
+4. **Loading** — unresolved request; at 149 ms assert no skeleton and that "Version" is present; at
+   150 ms assert a skeleton in place of the value and `aria-busy="true"` on the card; resolve and
+   assert the value and no `aria-busy`.
+5. **Error, Examples-driven** — reject with `ApiError(500)`, then `NetworkError`; assert the alert
+   text "Couldn't reach RenewCMS. Check your connection and try again.", the "Try again" action, no
+   close button, no title and no "Version" row, with the header still shown. Click "Try again";
+   assert Loading and a second `request`; resolve and assert the Default row.
+6. **401** — reject with `ApiError(401)`; assert the page shows no alert of its own (the redirect
+   itself is covered by `useApi`'s existing tests).
+7. **Router meta** — assert the `/settings` route has `meta.auth === 'verified'` and
+   `meta.title === 'Settings'`.
+8. **Amended shell specs** — update the existing Vitest for `nuxt_ui_shell_foundation` case 14,
+   `dashboard_shell_branding`, users_screen and profile_page to five nav items, in the same change.
+
+## Visual (`task visual:check -- settings`, desktop and mobile, light and dark)
+
+Reference: `docs/design/screens/settings.md`; board group "Settings" in `docs/design/source/RenewCMS
+Screens Back-office.dc.html`; exact values from the `isSettings` block of
+`docs/design/source/AppFrame.dc.html`. Add the mock to `web/visual/states.ts`. The gate is hard:
+every capture within 10 %.
+
+- [ ] Default: mock `GET /v1/settings` returning `{ "version": "v2.2.0-beta" }` (the board's
+      sample). Layout as the frame draws it: the header is a 20/28 semibold title with the muted
+      subtitle 2 px below; the card is the header's next sibling, 20 px below; the card is
+      `--ui-bg` with a 1 px `--ui-border` and no drawn radius; the row is a flex row with
+      `justify-content: space-between`, `align-items: center` and a 16 px gap, the label at the
+      left and the mono value at the right; the whole page is at most 720 px wide.
+- [ ] Not drawn, no visual state: Loading and Error. Do not add them to `web/visual/states.ts`;
+      Vitest cases 4 and 5 cover them.
+- [ ] Not covered by screenshots: keyboard order (Tab reaches the "Settings" nav item; on Error,
+      Tab reaches "Try again", and Enter and Space activate it); focus after a navigation; the
+      skeleton pulse under reduced motion.
+
+## Manual verification
+
+- With a build made through `task build` or `task release` (`-ldflags -X main.version=...`),
+  open /settings and confirm the value equals the injected version. A build without the flag must
+  show `dev`.
+- Confirm against a running `task dev` API that an unverified account is sent to /register/pending
+  and a logged-out browser to /login?redirect=/settings&reason=expired.
+- Confirm the embedded SPA (built without `-tags nofrontend`) serves /settings on a hard refresh,
+  since Vitest never exercises the embedded frontend.

features/upload_article_image.feature

@@ -1,99 +0,0 @@
-Feature: Uploading an image to an article
-
-  As an authenticated RenewCMS user managing the CMS
-  I want to attach an image file to an existing article and get back the
-  image's public location
-  So that an unknown article answers 404 the same way every other article
-    write does, without ever creating an orphaned image, and a disallowed
-    content type is rejected with 400 before it becomes part of the
-    article, without a maintainer needing to trust the client to send a
-    sane file
-
-  Background:
-    Given internal/infrastructure/useCases.CreateImageUseCase.CreateImage
-      already checks the uploaded content type against the allowed list
-      (image/png, image/jpeg, image/webp, image/svg+xml) and the size
-      against the 10485760-byte maximum before calling image.Repository.Create,
-      returning image.ErrImageTypeNotAllowed or image.ErrImageTooLarge and
-      calling the repository not at all when either check fails
-    And internal/infrastructure/persistence's ArticleRepository.AddImage
-      already returns article.ErrArticleNotFound when the article id doesn't
-      match any row, and image.ErrImageNotFound when the article exists but
-      the image id doesn't, both asserted with errors.Is
-    And before this slice, api/handlers/image.Handler.PostImage existed and
-      was wired to CreateImageUseCase and UpdateArticleUseCase.AddImage, but
-      no route called it, and every error it got back from either use case
-      fell through to a blanket 500
-    And this slice mounts POST /v1/article/{id}/image in api/router.go, in
-      the same jwtauth Verifier + Authenticator group as the other article
-      write routes, and changes the upload flow so that the article's
-      existence is confirmed before the image is created, so that an
-      unknown article id never leaves an orphaned image behind
-    And this slice changes PostImage's error handling so that errors.Is(err,
-      image.ErrImageTypeNotAllowed) or errors.Is(err, image.ErrImageTooLarge)
-      answers 400 with the sentinel's own message, errors.Is(err,
-      article.ErrArticleNotFound) answers 404 with body
-      apperr.ArticleNotFoundErrorMessage, and any other error still falls
-      back to a generic 500
-    And PostImage reads the uploaded file from the multipart form field
-      "file"
-    And on success PostImage answers 201 with a JSON body
-      {"id": ..., "location": ...} holding the created image's numeric id
-      and public path, e.g. "/static/uploadedImages/<stored-filename>"
-    And this slice (features/remove_article_image.feature) adds the "id"
-      field to that body; the id lets a client later address the image
-      through DELETE /v1/article/{id}/image/{imageId}
-
-  Scenario: Uploading an allowed image type to an existing article succeeds
-    Given a valid jwt cookie for a user with id 1
-    And the article repository contains an article with id 1 titled
-      "Backyard Renovation Update"
-    When the client sends POST /v1/article/1/image with that cookie and a
-      multipart form field "file" holding a file named "before.png" with
-      content type "image/png"
-    Then the response status is 201
-    And the response body is JSON with a "location" field whose value is
-      "/static/uploadedImages/before.png"
-    And the response body's "id" field equals the new image's id in the
-      image repository
-    And the image repository contains a new image whose Path is
-      "/static/uploadedImages/before.png"
-    And the article repository's article with id 1 has that new image's id
-      in its Images slice
-
-  Scenario: Uploading to an unknown article answers 404 and creates no image
-    Given a valid jwt cookie for a user with id 1
-    And the article repository has no article with id 9999
-    When the client sends POST /v1/article/9999/image with that cookie and a
-      multipart form field "file" holding a file named "before.png" with
-      content type "image/png"
-    Then the response status is 404
-    And the response body is the text "Article not found"
-    And the image repository's Create is never called
-    And no image exists in the image repository
-
-  Scenario: Uploading a disallowed content type answers 400 before the article is touched
-    Given a valid jwt cookie for a user with id 1
-    And the article repository contains an article with id 1 titled
-      "Backyard Renovation Update"
-    When the client sends POST /v1/article/1/image with that cookie and a
-      multipart form field "file" holding a file named "notes.pdf" with
-      content type "application/pdf"
-    Then the response status is 400
-    And the response body is the text
-      "the file must be a PNG, JPEG, WEBP, or SVG image"
-    And the image repository's Create is never called
-    And the article repository's article with id 1 still has an empty
-      Images slice
-
-  Scenario: Uploading an image still requires authentication
-    Given no jwt cookie is sent
-    And the article repository contains an article with id 1 titled
-      "Backyard Renovation Update"
-    When the client sends POST /v1/article/1/image without a cookie and a
-      multipart form field "file" holding a file named "before.png" with
-      content type "image/png"
-    Then the response status is 401
-    And the image repository's Create is never called
-    And the article repository's article with id 1 still has an empty
-      Images slice

features/upload_article_image.qa.md

@@ -1,73 +0,0 @@
-# QA procedure: upload_article_image
-
-Package: `test` (black-box, extending `article_test.go` / `image_test.go`).
-
-## Setup shared by every case
-1. Call `validator.InitValidator()` once.
-2. Reuse `mockArticleRepo` (`test/article_test.go`) and `mockImageRepo`
-   (`test/image_test.go`) as-is; both already implement `AddImage` /
-   `Create` returning `article.ErrArticleNotFound` / `image.ErrImageNotFound`
-   for an unknown id, per `features/write_not_found_errors.feature`.
-3. Wire the real use cases over the fakes: `useCases.NewCreateArticleUseCase`,
-   `useCases.NewGetArticleUseCase`, `useCases.NewListArticlesUseCase`,
-   `useCases.NewUpdateArticleUseCase(articleRepo)`,
-   `useCases.NewDeleteArticleUseCase(articleRepo, imageRepo)`,
-   `useCases.NewCreateImageUseCase(imageRepo)`.
-4. Build `article.NewHandler(...)` with its existing constructor shape, and
-   `image.NewHandler(createImageUseCase, updateArticleUseCase)`
-   (`api/handlers/image`).
-5. Build a test `jwtauth.New("HS256", []byte("test-secret"), nil)`.
-6. Mount the routes on a fresh `chi.NewRouter()` mirroring `api/router.go`'s
-   shape after this slice: `GET /` under `jwtauth.Verifier` only;
-   `GET /{id}`, `POST /`, `DELETE /{id}`, `PATCH /{id}`,
-   `PATCH /{id}/publish`, `PATCH /{id}/unpublish` and the new
-   `POST /{id}/image` (routed to `imageHandler.PostImage`) under
-   `jwtauth.Verifier` + `jwtauth.Authenticator`.
-7. Mint a valid jwt cookie for user id 1:
-   `token.Encode(map[string]any{"user_id": uint32(1)})`, set as the `jwt`
-   cookie on the relevant `httptest.NewRequest`.
-8. Build multipart request bodies with `mime/multipart.Writer`, field name
-   `"file"`, setting the part's `Content-Type` header explicitly (Go's
-   multipart writer defaults to sniffing otherwise, so set it via
-   `CreatePart` with an explicit MIME header rather than
-   `CreateFormFile`), and set the request's `Content-Type` header to the
-   writer's `FormDataContentType()`.
-
-## HTTP checks
-9. Seed `articleRepo.articles[1] = article.Article{ID: 1, Title: "Backyard
-   Renovation Update"}`. Send `POST /v1/article/1/image` with the valid
-   cookie and a multipart `"file"` part named `"before.png"`,
-   content type `"image/png"`, some non-empty byte content. Assert status
-   `201`; decode the JSON body and assert `location` equals
-   `"/static/uploadedImages/before.png"`; assert `imageRepo.images` gained
-   exactly one entry whose `Path` matches that location; assert
-   `articleRepo.articles[1].Images` now contains that image's id.
-10. Empty `articleRepo`, empty `imageRepo`. Send `POST /v1/article/9999/image`
-    with the valid cookie and the same `"before.png"` / `"image/png"` part.
-    Assert status `404`, body `"Article not found\n"`; assert
-    `imageRepo.images` is still empty (the article's existence is confirmed
-    before any image is created, so nothing is left orphaned).
-11. Seed `articleRepo.articles[1] = article.Article{ID: 1, Title: "Backyard
-    Renovation Update"}` with an empty `Images` slice. Send
-    `POST /v1/article/1/image` with the valid cookie and a multipart
-    `"file"` part named `"notes.pdf"`, content type `"application/pdf"`.
-    Assert status `400`, body
-    `"the file must be a PNG, JPEG, WEBP, or SVG image\n"`; assert
-    `imageRepo.images` is still empty; assert
-    `articleRepo.articles[1].Images` is still empty.
-12. Seed the same article id 1 as step 11. Send `POST /v1/article/1/image`
-    with **no** cookie and the `"before.png"` / `"image/png"` part. Assert
-    status `401`; assert `imageRepo.images` is still empty; assert
-    `articleRepo.articles[1].Images` is still empty.
-
-## Manual verification (not exercised by the Go test)
-- Real upload against a real SQLite file and real `UPLOAD_DIR`: confirm that
-  after `POST /v1/article/{id}/image` on a real running instance, the file
-  actually lands on disk under `UPLOAD_DIR`, the `images` row's `path`
-  resolves to a URL the SPA can load, and the `article_images` join table
-  gets the new row. Not exercised by `task test` (fakes only); requires
-  `task dev` or a built `task build` binary with a scratch DB/upload dir.
-- SPA-visible behaviour: confirm the back-office article editor (if/when an
-  image-upload UI exists) shows the uploaded image at that location. No such
-  UI exists yet as of this slice.
-- No SMTP involvement.

features/user_response_field_hygiene.feature

@@ -7,8 +7,8 @@ Feature: API responses never expose a user's secret fields
     credential or a still-valid reset/verification secret
 
   Background:
-    Given the public shape of a user in any API response is exactly seven fields: id, username,
+    Given the public shape of a user in any API response is exactly eight fields: id, username,
-      email, is_verified, created_at, updated_at and display_name
+      email, is_verified, created_at, updated_at, display_name and role
     And password, password_reset_code, verification_code, verification_expiration,
       password_reset_expiration and token_version never appear in any response body, under any key
       name, regardless of their value or whether they are set
@@ -21,7 +21,7 @@ Feature: API responses never expose a user's secret fields
     When the client sends POST /v1/auth/verify with body {"code": "abc123"}
     Then the response status is 200
     And the response body is a JSON object with exactly the keys id, username, email,
-      is_verified, created_at, updated_at and display_name
+      is_verified, created_at, updated_at, display_name and role
     And the response body does not contain the keys password, password_reset_code,
       verification_code, verification_expiration, password_reset_expiration or token_version
     And the response body's is_verified is true

features/user_response_field_hygiene.qa.md

@@ -21,11 +21,12 @@ Package: `test` (black-box), extending `test/account_verification_http_test.go`'
    user id 7. Decode the response body into `map[string]json.RawMessage` (not into `user.User`)
    and assert:
    - the key set is exactly `{"id", "username", "email", "is_verified", "created_at",
-     "updated_at", "display_name"}`;
+     "updated_at", "display_name", "role"}`;
    - none of `password`, `password_reset_code`, `verification_code`,
      `verification_expiration`, `password_reset_expiration`, `token_version` is present;
    - `is_verified` unmarshals to `true`;
-   - `display_name` unmarshals to `""`.
+   - `display_name` unmarshals to `""`;
+   - `role` unmarshals to `"owner"` (seeded user 7 has `Role: owner`).
 5. Rejected verify: same seed, `{"code":"wrong-code"}` → assert status `403` and that the raw
    response body bytes, treated as a string, contain none of the substrings `password`,
    `verification_code`, `password_reset_code`, `verification_expiration`,

features/user_roles.feature

@@ -0,0 +1,114 @@
+Feature: Users have a role, owner or admin, and only the owner can invite
+
+  As the person who registered the workspace
+  I want my account to be the owner and everyone I invite to be an admin
+  So that only I can invite people, while every admin keeps the same access to articles,
+    the users list, their own profile and Settings
+
+  Background:
+    Given a user has a role that is exactly "owner" or "admin", stored on the user record and read
+      from the user repository on every request, never from the jwt claims
+    And the first registered user is the owner: CreateUser creates the user with role "owner",
+      and registration is only possible while no verified user exists
+    And every user created by accepting an invite is an admin: AcceptInvite creates the user with
+      role "admin", whatever the inviter's role
+    And there is exactly one owner and no endpoint changes, transfers or removes a role
+    And AutoMigrate adds the role column to existing databases and backfills it: the user with the
+      lowest id becomes "owner" and every other user "admin"; a database that already has roles
+      is left unchanged by a later start
+    And the public user shape (api/pkg/publicuser) is id, username, email, is_verified, created_at,
+      updated_at, display_name and role
+    And the users list user items are id, kind, username, display_name, email, role, status,
+      created_at; invite items are unchanged: id, kind, email, status, created_at
+    And POST /v1/user/invite is owner-only: after the jwt, current-token and verified checks, a
+      RequireOwner check loads the user with GetUserUseCase and refuses any role other than
+      "owner" with 403 and the plain-text body apperr.OwnerRequiredErrorMessage
+      "Only the owner can do this.", before the rate limiter, the body decoding and the validation
+    And GET /v1/user/ stays open to every verified user, owner and admin alike
+    And error responses are plain text from http.Error, success responses are JSON
+
+  Scenario: The first registered user is the owner
+    Given the user repository is empty
+    When the client sends POST /v1/auth/register with username "marta", password "hunter2example12",
+      email "marta@renew.example"
+    Then the response status is 200
+    And the user repository holds one user with username "marta" and role "owner"
+
+  Scenario: A user created by accepting an invite is an admin
+    Given a verified owner "marta" and a pending invite for "lea.martin@renew.example" with a known raw code
+    When the client sends POST /v1/auth/invite/accept with that code, username "lea" and password "limewash2026"
+    Then the response status is 200
+    And the user repository holds user "lea" with role "admin"
+    And user "marta" still has role "owner"
+
+  Scenario Outline: GET /v1/auth/me returns the role of the session user
+    Given a verified user "<username>" with role "<role>" and a valid jwt cookie for that user
+    When the client sends GET /v1/auth/me
+    Then the response status is 200
+    And the response body has the key role with value "<role>"
+
+    Examples:
+      | username | role  |
+      | marta    | owner |
+      | lea      | admin |
+
+  Scenario: An unverified owner sees their role on /auth/me
+    Given an unverified user "bob" with role "owner" and a valid jwt cookie
+    When the client sends GET /v1/auth/me
+    Then the response status is 200
+    And the response body's role is "owner" and is_verified is false
+
+  Scenario: The users list carries email and role on accepted users
+    Given verified owner id 1 "marta" with email "marta@renew.example"
+    And admin id 2 "jonas" with email "jonas@renew.example"
+    And admin id 3 "ines" with display_name "Inès Duarte" and email "ines.duarte@renew.example"
+    And a pending invite for "sam.oliveira@renew.example"
+    When the client sends GET /v1/user/ with a valid jwt cookie for user id 2
+    Then the response status is 200
+    And the user items have exactly the keys id, kind, username, display_name, email, role, status, created_at
+    And user 1 has email "marta@renew.example" and role "owner"; users 2 and 3 have role "admin" and their own email
+    And the invite item has exactly the keys id, kind, email, status, created_at
+    And no item has a key named password, password_reset_code, verification_code,
+      verification_expiration, password_reset_expiration, token_version, code, hashed_code,
+      invited_by or accepted_at
+
+  Scenario: The owner can invite
+    Given a verified owner id 1 "marta" and a valid jwt cookie for user id 1
+    When the client sends POST /v1/user/invite with body {"email": "sam.oliveira@renew.example"}
+    Then the response status is 201
+    And one invite exists and one "invitation" email was sent
+
+  Scenario: An admin cannot invite
+    Given a verified admin id 2 "jonas" and a valid jwt cookie for user id 2
+    When the client sends POST /v1/user/invite with body {"email": "sam.oliveira@renew.example"}
+    Then the response status is 403
+    And the response body is exactly apperr.OwnerRequiredErrorMessage, as plain text
+    And the invite repository is still empty
+    And no email was sent
+
+  Scenario Outline: The owner check comes before validation and the rate limiter
+    Given a verified admin id 2 and a valid jwt cookie for user id 2
+    When the client sends POST /v1/user/invite with body <body>
+    Then the response status is 403
+    And no invite was created and no email was sent
+
+    Examples:
+      | body                      |
+      | {"email": "not-an-email"} |
+      | not json                  |
+
+  Scenario: An admin's refused invites do not use up the rate limit
+    Given AUTH_RATE_LIMIT_MAX_ATTEMPTS is 2 for a window covering the whole test
+    When an admin at IP "203.0.113.20" sends 3 POST /v1/user/invite requests
+    Then all 3 responses are 403 and none is 429
+
+  Scenario: The role is read on every request, not from the token
+    Given a verified user id 2 whose stored role is "owner", with a valid jwt cookie
+    And the stored role changes to "admin" without the token changing
+    When the client sends POST /v1/user/invite with a valid body
+    Then the response status is 403
+
+  Scenario: An admin can still list users
+    Given a verified admin id 2 and a valid jwt cookie for user id 2
+    When the client sends GET /v1/user/
+    Then the response status is 200

features/user_roles.qa.md

@@ -0,0 +1,55 @@
+# QA procedure: user_roles
+
+Package: `test` (black-box). Reuse `mockUserRepo`, `stubHasher`, `mockMailRepo`, `mockInviteRepo`.
+No live server, no real SQLite file, no real SMTP.
+
+## Setup shared by every case
+1. Call `validator.InitValidator()` once.
+2. Use cases: `NewGetUserUseCase`, `NewCreateInviteUseCase`, `NewListUsersAndInvitesUseCase`,
+   `NewCreateUserUseCase`, `NewAcceptInviteUseCase` over the fakes.
+3. Router mirrors `NewUserRouter`: `jwtauth.Verifier` + `Authenticator` with
+   `jwtauth.New("HS256", []byte("test-secret"), nil)`, `RequireCurrentToken`, `RequireVerifiedUser`,
+   `GET /`, and a group with `RequireOwner(getUser)`, `TrustedProxyRealIP(nil)`,
+   `NewRateLimiter(2, time.Minute)`, `POST /invite`. A second router mirrors `NewAuthRouter` for
+   `/register`, `/invite/accept` and `/me`.
+4. Seed: owner id 1 "marta" (role owner), admin id 2 "jonas" (role admin), both verified.
+   Cookies carry `user_id` and `token_version`, and never a role.
+
+## Roles at creation
+5. Empty repo, `POST /v1/auth/register` -> 200, the stored user has `Role == user.RoleOwner`.
+6. Pending invite with a known code (stubHasher), `POST /v1/auth/invite/accept` -> 200, the stored
+   user has `Role == user.RoleAdmin`, and user 1 is still owner.
+7. Use-case level: `CreateUser` returns a user with `RoleOwner`; `AcceptInvite` returns `RoleAdmin`.
+
+## GET /v1/auth/me
+8. Table over owner and admin: 200, decode into `map[string]json.RawMessage`, key `role` equals the stored role.
+9. Unverified owner -> 200, `role` "owner", `is_verified` false.
+10. The key set of the public user is exactly the eight fields, and `POST /v1/auth/verify` returns the same eight.
+
+## GET /v1/user/
+11. Seed three users plus a pending invite. 200; user items have exactly the keys id, kind, username,
+    display_name, email, role, status, created_at; email and role match the seed. The invite item has
+    exactly id, kind, email, status, created_at. No forbidden key appears anywhere.
+12. Cookie of admin 2 -> 200.
+
+## POST /v1/user/invite
+13. Owner cookie, valid body -> 201, one invite, one "invitation" mail.
+14. Admin cookie, valid body -> 403, body exactly `apperr.OwnerRequiredErrorMessage`, `Content-Type`
+    is not JSON-decoded (plain text), no invite, no mail.
+15. Admin cookie with `{"email":"not-an-email"}` and with `not json` -> 403 both.
+16. Rate limit 2: admin sends 3 requests -> 403, 403, 403.
+17. Flip user 2's stored role from owner to admin between two requests with the same cookie ->
+    second request 403.
+18. Existing auth table from invitations.qa.md (no cookie 401, unverified 403, stale token 401) is
+    unchanged; the unverified 403 body remains `apperr.VerificationRequiredErrorMessage`.
+
+## Use case level
+19. `RequireOwner` with a user id that no longer exists -> 401 `apperr.UnauthorizedErrorMessage`;
+    with an unexpected repository error -> 500.
+
+## Manual verification (not exercised by the Go tests)
+- Persistence backfill: copy a SQLite file from before this change with 3 users and no role column.
+  Start the app: the column exists, the lowest id is `owner`, the others `admin`. Restart: nothing
+  changes. Start against a fresh file: registering creates an owner.
+- Layering check by review: `Role` and the sentinel/constants live in `internal/domain/user`; GORM
+  tags only in `persistence/models`, converted by the mapper.

features/users_row_actions.feature

@@ -0,0 +1,174 @@
+Feature: Users row actions: Cancel invite and Renew invite
+
+  As the owner of a RenewCMS workspace
+  I want to cancel a pending invite and renew an expired one from the Users list
+  So that I can correct a wrong address or resend a lapsed link without leaving the page
+
+  Background:
+    Given /users is the verified route of features/users_screen.feature, rendered as UsersPage with
+      UsersTable (md and up) or UserCardList (below md), per docs/design/screens/users.md
+    And the backend already exists (features/invite_management.feature) and this slice changes no Go:
+      DELETE /v1/user/invite/{id} answers 204 with an empty body, and POST /v1/user/invite/{id}/renew
+      answers 200 with {id, kind "invite", email, status "pending", created_at, expires_at}
+    And useUsers gains cancelInvite(id), which sends DELETE /v1/user/invite/{id} with no body, and
+      renewInvite(id), which sends POST /v1/user/invite/{id}/renew with no body
+    And the actions are shown only when the session user's role from GET /v1/auth/me is "owner";
+      for "admin", or any other or absent value, no action button is rendered and the sixth column
+      stays empty; this is not drawn in docs/design, so it has no visual state and is covered
+      by Vitest only
+    And the sixth column (desktop) or the last line of the card (below md) holds at most one
+      action: "Cancel invite" on a Pending row, "Renew invite" on an Expired row, nothing on an
+      Accepted row
+    And each action is an outline button: 28 px high on desktop (12 px medium text, 13 px icon,
+      9 px side padding, --ui-border-accented border, --ui-bg fill, no wrapping) and 44 px high
+      below md (14 px side padding, 14 px icon); UButton variant "outline" size "xs"
+    And "Cancel invite" has the icon user-x and text in --ui-error; "Renew invite" has the icon
+      refresh-cw and text --ui-text-highlighted
+    And below md the action is the last line of the card, under the badges line
+    And "Cancel invite" opens ConfirmDialog (tone "danger") through useOverlay: title "Cancel this
+      invite?", description "The link sent to {email} will stop working. You can invite the address
+      again later.", cancel button "Keep invite", confirm button "Cancel invite", pending label
+      "Cancelling…"; the action runs inside the dialog, so the failure notice shows in the dialog
+    And "Renew invite" asks nothing and sends the request at once
+    And a request failure is any 500, any network failure that never reaches the server, and any
+      other status except 401 and 403; 401 and 403 are handled entirely by useApi's global handling
+      (features/api_client_global_error_handling.feature); the response body text is never shown
+      verbatim
+    And the fixture is the Default fixture of features/users_screen.feature: invite id 2
+      "sam.oliveira@renew.example" pending 27 Sep 2026; invite id 1 "p.huber@gmail.com" with
+      display_name "Paul Huber" expired 3 Aug 2026; users 3, 2, 1; the session user is "marta",
+      role "owner"; rows are keyed by kind and id
+
+  Scenario: Default: actions sit on the right of the Pending and Expired rows only
+    Given GET /v1/user/ resolves 200 with the Default fixture
+    When the owner navigates to /users at desktop
+    Then the first row "sam.oliveira@renew.example" ends with "Cancel invite" (icon user-x, text --ui-error)
+    And the second row "p.huber@gmail.com" ends with "Renew invite" (icon refresh-cw)
+    And the three Accepted rows have an empty sixth cell
+    And below md the same two cards end with the same buttons as 44 px buttons
+
+  Scenario Outline: Non-owners see no row actions
+    Given the session user has role "<role>" and GET /v1/user/ resolves 200 with the Default fixture
+    When the user navigates to /users at desktop and at a below-md width
+    Then <result>
+
+    Examples:
+      | role   | result                                                   |
+      | admin  | no "Cancel invite" and no "Renew invite" button exists   |
+      | (none) | no "Cancel invite" and no "Renew invite" button exists   |
+      | owner  | "Cancel invite" and "Renew invite" are present once each |
+
+  Scenario: Cancel invite: confirm
+    Given the Default state has loaded
+    When the owner activates "Cancel invite" on the "sam.oliveira@renew.example" row
+    Then a danger modal opens titled "Cancel this invite?"
+    And its text reads "The link sent to sam.oliveira@renew.example will stop working. You can invite
+      the address again later."
+    And its buttons are "Keep invite" and "Cancel invite" (danger), and no request has been sent
+
+  Scenario: Cancel invite: "Keep invite" closes the dialog and changes nothing
+    Given the "Cancel this invite?" dialog is open for "sam.oliveira@renew.example"
+    When the owner activates "Keep invite"
+    Then the dialog closes, DELETE /v1/user/invite/2 is never sent and all 5 rows remain
+
+  Scenario: Cancel invite: sending
+    Given the "Cancel this invite?" dialog is open for "sam.oliveira@renew.example"
+    When the owner activates "Cancel invite" and DELETE /v1/user/invite/2 has not resolved
+    Then DELETE /v1/user/invite/2 was sent once
+    And the confirm button reads "Cancelling…" with a loading indicator
+    And "Keep invite" is disabled
+    And Esc and a backdrop click do not close the dialog
+
+  Scenario Outline: Cancel invite: failed
+    Given the "Cancel this invite?" dialog is open for "sam.oliveira@renew.example"
+    When the owner activates "Cancel invite" and DELETE /v1/user/invite/2 <failure>
+    Then the dialog stays open, with an error notice inside it reading "Couldn't cancel the invite.
+      Try again in a moment."
+    And "Keep invite" and "Cancel invite" are enabled again
+    And all 5 rows remain and no toast is raised
+
+    Examples:
+      | failure                                                    |
+      | resolves with a 500 response                               |
+      | resolves with a 500 response whose body is some other text |
+      | never reaches the server                                   |
+      | resolves with a 404 response                               |
+
+  Scenario: Cancel invite: retrying after a failure
+    Given the dialog shows the failure notice
+    When the owner activates "Cancel invite" again and DELETE /v1/user/invite/2 resolves 204
+    Then DELETE /v1/user/invite/2 was sent a second time
+    And the dialog closes and the row is removed
+
+  Scenario: Cancel invite: done
+    Given the "Cancel this invite?" dialog is open for "sam.oliveira@renew.example"
+    When the owner activates "Cancel invite" and DELETE /v1/user/invite/2 resolves 204
+    Then the dialog closes
+    And the row "sam.oliveira@renew.example" is gone and the other 4 rows remain in their order
+    And GET /v1/user/ is not called again
+    And a toast appears: color success, icon i-lucide-circle-check, id "invite-cancelled-2", title
+      "Invite cancelled", description "sam.oliveira@renew.example can no longer use the link."
+
+  Scenario: Cancel invite: an Expired row can't be cancelled from the list
+    Given the Default state has loaded
+    Then the "p.huber@gmail.com" row offers "Renew invite" and no "Cancel invite"
+
+  Scenario: Renew invite: sending
+    Given the Default state has loaded
+    When the owner activates "Renew invite" on the "p.huber@gmail.com" row and
+      POST /v1/user/invite/1/renew has not resolved
+    Then POST /v1/user/invite/1/renew was sent once with no body and no confirmation was shown
+    And on that row the button reads "Renewing…" with the icon loader-circle at 50 % opacity, disabled
+    And no other row's button changes and the "Cancel invite" button of "sam.oliveira@renew.example" stays enabled
+    And a second activation of the busy button sends nothing
+
+  Scenario: Renew invite: done
+    Given POST /v1/user/invite/1/renew was sent from the "p.huber@gmail.com" row
+    When it resolves 200 with id 1, kind "invite", email "p.huber@gmail.com", status "pending",
+      created_at now and expires_at 3 days later
+    Then the row moves to the top of the list as Pending, created "Today", drawn with the
+      --ui-bg-elevated background, keeping its display name "Paul Huber" and role "admin", and now
+      ends with "Cancel invite"
+    And "sam.oliveira@renew.example" is now the second row and the other rows are unchanged
+    And exactly one row exists for "p.huber@gmail.com" and GET /v1/user/ is not called again
+    And a toast appears: color success, icon i-lucide-circle-check, id "invite-renewed-1", title
+      "Invite renewed", description "p.huber@gmail.com has 3 days to accept the new link."
+
+  Scenario: Renew invite: renewing a Pending row is not offered
+    Given the Default state has loaded
+    Then the "sam.oliveira@renew.example" row offers "Cancel invite" and no "Renew invite"
+
+  Scenario Outline: Renew invite: failed
+    Given the Default state has loaded
+    When the owner activates "Renew invite" on the "p.huber@gmail.com" row and
+      POST /v1/user/invite/1/renew <failure>
+    Then a toast appears: color error, icon i-lucide-circle-x, id "invite-renew-failed-1", title
+      "Couldn't renew the invite", description "Try again in a moment."
+    And the row stays Expired in its place, with "Renew invite" enabled again
+    And the list is otherwise unchanged
+
+    Examples:
+      | failure                                                    |
+      | resolves with a 500 response                               |
+      | resolves with a 500 response whose body is some other text |
+      | never reaches the server                                   |
+      | resolves with a 404 response                               |
+
+  Scenario: Renew invite: retrying after a failure
+    Given the failed toast has appeared for "p.huber@gmail.com"
+    When the owner activates "Renew invite" again and POST /v1/user/invite/1/renew resolves 200
+    Then the "Invite renewed" toast is raised and the row is Pending on top
+
+  Scenario: Renew invite: only the busy row is busy
+    Given the fixture also holds Expired invite id 7 "old@renew.example"
+    When the owner activates "Renew invite" on "p.huber@gmail.com" and it has not resolved
+    Then "Renew invite" on "old@renew.example" is still enabled and can be activated
+
+  Scenario: Actions after a new invite is sent
+    Given the Default state has loaded and an invite for "lea.martin@renew.example" was sent (201)
+    Then the new first row ends with "Cancel invite"
+
+  Scenario: Cancelling a just-renewed row
+    Given "p.huber@gmail.com" was renewed and is the first row
+    When the owner confirms "Cancel invite" for it and DELETE /v1/user/invite/1 resolves 204
+    Then the row is gone and the toast "Invite cancelled" is raised

features/users_row_actions.qa.md

@@ -0,0 +1,98 @@
+# QA: Users row actions (Cancel invite, Renew invite)
+
+## Implementation note for coder (informational, not a QA assertion)
+
+No Go change. Toasts use useToast().add({ id, color, icon, title, description }):
+- cancelled: id "invite-cancelled-{id}", color success, icon i-lucide-circle-check, title "Invite cancelled",
+  description "{email} can no longer use the link."
+- renewed: id "invite-renewed-{id}", color success, icon i-lucide-circle-check, title "Invite renewed",
+  description "{email} has 3 days to accept the new link."
+- renew failed: id "invite-renew-failed-{id}", color error, icon i-lucide-circle-x, title "Couldn't renew the invite",
+  description "Try again in a moment."
+
+Cancel runs through ConfirmDialog (tone "danger", cancelLabel "Keep invite", confirmLabel "Cancel invite",
+pendingLabel "Cancelling…"); its action throws an Error whose message is "Couldn't cancel the invite. Try again in
+a moment." for any failure except 401/403 (global handling), so the dialog shows it. Remove the 10.5 % exception
+from the "users" > Default state in web/visual/states.ts.
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Mock useApi's `request` for GET /v1/user/, DELETE /v1/user/invite/{id} and POST /v1/user/invite/{id}/renew. Mount
+UsersPage inside DashboardShell with a verified owner session (id 1, "marta", role "owner") and a test router at
+/users. Default fixture as in features/users_screen.qa.md. No test freezes the system date; the renewed row's
+"Today" label is not asserted. Run layout cases at desktop and below-md widths (mock matchMedia).
+
+1. Default actions: row 1 has "Cancel invite" (user-x), row 2 "Renew invite" (refresh-cw), Accepted rows have
+   none; at below-md the same buttons sit last in the cards.
+2. Non-owners, Examples-driven: role "admin", role absent, role "owner"; assert presence or absence of both
+   buttons at both widths.
+3. Cancel invite: confirm: click "Cancel invite" on row 1; assert dialog title, text with the address, "Keep
+   invite", "Cancel invite", and that `request` was not called with DELETE.
+4. Keep invite: click it; assert the dialog closed, no DELETE, 5 rows.
+5. Cancel invite: sending: unresolved DELETE; assert one call to DELETE /v1/user/invite/2 (no body), "Cancelling…",
+   "Keep invite" disabled, Escape and backdrop click do not close.
+6. Cancel invite: failed, Examples-driven: ApiError(500), ApiError(500) with other text, ApiError(404),
+   NetworkError; assert the dialog stays open with the notice "Couldn't cancel the invite. Try again in a moment."
+   once (never the raw body), buttons re-enabled, 5 rows, no toast.
+7. Cancel invite: retry: after 6, resolve 204 on the second click; assert two DELETE calls, dialog closed, row gone.
+8. Cancel invite: done: resolve 204; assert dialog closed, row 1 gone, 4 rows in order, no second GET, toast
+   raised with the id, color, icon, title and description above.
+9. 401 and 403 on DELETE and on renew: assert the global handling runs and no local notice or toast is added.
+10. Renew invite: sending: unresolved POST; assert one call to POST /v1/user/invite/1/renew with no body, no
+    dialog, the row-2 button reads "Renewing…", is disabled, has the loader-circle icon and 50 % opacity class; row
+    1's "Cancel invite" is enabled; a second click sends nothing.
+11. Only the busy row is busy: two Expired rows; renew one, assert the other button is enabled and usable.
+12. Renew invite: done: resolve 200 with the response shape; assert "p.huber@gmail.com" is first, Pending, has the
+    --ui-bg-elevated class, keeps "Paul Huber", ends with "Cancel invite", "sam.oliveira@renew.example" second, one
+    row for the address, no second GET, and the toast (id, color, icon, title, description).
+13. Renew invite: failed, Examples-driven: ApiError(500), ApiError(500) with other text, ApiError(404),
+    NetworkError; assert the error toast, the row still Expired in place, the button enabled again with the label
+    "Renew invite".
+14. Renew retry: after 13, resolve 200; assert the success toast and the row on top.
+15. Interplay: a row from a fresh invite (201) shows "Cancel invite"; cancelling a just-renewed row removes it and
+    raises "Invite cancelled".
+16. Invite-only rule: assert no "Renew invite" on a Pending row and no "Cancel invite" on an Expired row.
+
+## Visual (task visual:check -- users, desktop and mobile, light and dark)
+
+Reference: docs/design/screens/users.md; board group "Users" in `docs/design/source/RenewCMS Screens
+Back-office.dc.html`; exact values in `docs/design/source/AppFrame.dc.html`. Layout (button size, position in the
+sixth column and on the card, dialog geometry) is taken from the board frame, not components.md. The gate is hard:
+every capture of every non-skipped state must be within 10 %, both viewports, both themes. Use the board's sample
+data: the existing `usersFixture` (sam.oliveira@renew.example pending 27 Sep 2026; p.huber@gmail.com "Paul Huber"
+expired 3 Aug 2026), session marta/owner. Add these 7 states to `users` in web/visual/states.ts:
+
+- [ ] Cancel invite: confirm: steps click "Cancel invite" on the sam.oliveira row; dialog "Cancel this invite?" with
+      text naming sam.oliveira@renew.example, "Keep invite", "Cancel invite".
+- [ ] Cancel invite: sending: mock `DELETE /v1/user/invite/2` status 204 with `hang: true`; steps open the dialog and
+      click "Cancel invite"; "Cancelling…" loading, "Keep invite" disabled.
+- [ ] Cancel invite: failed: mock `DELETE /v1/user/invite/2` status 500; steps open the dialog and confirm; the
+      notice "Couldn't cancel the invite. Try again in a moment." inside the dialog, buttons enabled.
+- [ ] Cancel invite: done: `{ path: '/users', skip: 'clock-sensitive' }` (per the user's request; the design does
+      not mark it clock-sensitive). Prints SKIP, never investigated or date-frozen. Vitest case 8 covers it.
+- [ ] Renew invite: sending: mock `POST /v1/user/invite/1/renew` status 200 with `hang: true`; steps click "Renew
+      invite" on the p.huber row; only that button shows "Renewing…", loader-circle, 50 % opacity.
+- [ ] Renew invite: done: `{ path: '/users', skip: 'clock-sensitive' }` ("Today"). Vitest case 12 covers it.
+- [ ] Renew invite: failed: mock `POST /v1/user/invite/1/renew` status 500; steps click "Renew invite"; the error
+      toast "Couldn't renew the invite" / "Try again in a moment." is visible and the p.huber row is Expired with
+      "Renew invite". Keep the toast on screen for the capture; if the runner can't, stop and ask.
+- [ ] Default: with the exception removed it passes at 10 % with the drawn buttons; if it fails, stop and ask (no
+      exception without approval).
+- [ ] Not drawn, no visual state: non-owner rendering and the 404 fallback. Vitest only (cases 2, 6, 13).
+- [ ] Not covered by screenshots: keyboard order (Tab reaches each row action; in the dialog focus starts on "Keep
+      invite", is trapped, Esc closes it except while Cancelling…, focus return after the dialog closes); hover and
+      active on the buttons; motion (modal 240 ms, toast enter and exit), stopped under reduced motion.
+
+## Manual verification
+
+- Real round trips against `task dev`, as owner: cancel a pending invite (row disappears, the old link at
+  /invite/accept?c=... answers "This invite link doesn't work."), renew an expired one (row moves to top with
+  "Today", old link dead, new link works), and reload to confirm the order matches the API.
+- Real invitation email on renew needs real or sandboxed SMTP (`SMTP_HOST` and related vars): confirm the new mail
+  arrives with the new link and the old one no longer works.
+- Failure paths with the API stopped or SMTP failing: the renew toast and the cancel dialog notice appear, and a
+  retry succeeds.
+- Admin session against `task dev`: no row actions are shown.
+- Toast placement and stacking on desktop (bottom right) and above the pinned "Invite user" button on mobile.
+- Focus after a successful cancel (the row is gone) lands somewhere sensible.
+- "Today" and the elevated row on a live app after Renew, since visual:check skips it.

features/users_screen.feature

@@ -12,43 +12,63 @@ Feature: Users screen and InviteUserModal
     And UsersPage calls GET /v1/user/ once per navigation, and InviteUserModal sends POST
       /v1/user/invite; both endpoints already exist (features/invitations.feature) and this slice
       wires the SPA to them unchanged, with no Go change
-    And the list items keep the API shape: kind "user" (id, username, display_name, status
+    And the list items keep the API shape: user items are kind "user" (id, username, display_name,
-      "accepted", created_at) or kind "invite" (id, email, status "pending" or "expired",
+      email, role "owner" or "admin", status "accepted", created_at) or kind "invite" (id, email,
-      created_at); the list is used in the order the API returns it (created date, newest first),
+      status "pending" or "expired", created_at); the list is used in the order the API returns it
-      and rows are keyed by kind and id, because a user and an invite can share a numeric id
+      (created date, newest first), and rows are keyed by kind and id, because a user and an
+      invite can share a numeric id
     And DashboardShell's navigation gains "Users" (icon users, linking to /users) between
       "Articles" and "Integration", in the sidebar and in the mobile drawer, so it lists Home,
-      Articles, Users, Integration in that order; "Users" has aria-current="page" on /users; the
+      Articles, Users, Integration, Settings in that order; "Users" has aria-current="page" on /users; the
-      "four navigation destinations" scenario of nuxt_ui_shell_foundation.feature and the items of
+      "five navigation destinations" scenario of nuxt_ui_shell_foundation.feature and the items of
       dashboard_shell_branding.feature are amended accordingly
     And the PageHeader shows breadcrumb "Users" (mobile title "Users")
     And the page header is the title "Users" with the subtitle "Everyone who can sign in and work
-      on your articles." and, on desktop (md and up), a primary "Invite user" button (icon
+      on your articles." and, on desktop (md and up) for the owner, a primary "Invite user" button
-      user-plus) at the right of the header
+      (icon user-plus) at the right of the header
-    And below md, "Invite user" is instead a full-width 48 px button (icon user-plus) pinned 16 px
+    And below md, for the owner, "Invite user" is instead a full-width 48 px button (icon
-      from the left, right and bottom of the screen with the popover shadow, and it is hidden
+      user-plus) pinned 16 px from the left, right and bottom of the screen with the popover
-      while InviteUserModal is open
+      shadow, and it is hidden while InviteUserModal is open
-    And the list is rendered as UsersTable (desktop, md and up: columns Username, Invite status,
+    And "Invite user" (desktop header button and the mobile pinned button) is shown only when the
-      Created, grid minmax(0,1fr) 160px 160px, 36 px header, 44 px rows, an arrow-down icon on the
+      session user's role from GET /v1/auth/me is "owner"; for "admin", or any other or absent
-      Created header) or UserCardList (below md: 68 px minimum row height, the name line, then the
+      value, neither button is rendered, the pinned button's bottom space is not reserved, and
-      InviteStatusBadge and "Created {date}"), both fed by the same items array; rows have no
+      the "Only you" hint is hidden; this is not drawn in docs/design, so it has no visual state
-      actions and are not clickable
+      and is covered by Vitest only
-    And a user row's name cell shows the display name first (medium weight, highlighted) with the
+    And the list is rendered as UsersTable (desktop, md and up) or UserCardList (below md), both
-      username beside it in muted text when display_name is not empty, otherwise the username
+      fed by the same items array; rows are not clickable; row actions are specified in features/users_row_actions.feature
-      alone (medium weight, highlighted); an invite row shows the email address in regular weight,
+    And UsersTable has the columns Email, Display name, Role, Invite status and Created, plus an
-      toned; an accepted user is never shown by email
+      unlabeled, empty actions column kept so the grid matches the board: grid
-    And the row whose kind is "user" and whose id equals the session user's id (from GET
+      minmax(0,1.3fr) minmax(0,1fr) 84px 120px 110px 150px with a 12 px gap, a 36 px header on
-      /v1/auth/me) carries a muted mono "you" tag after the name
+      --ui-bg-elevated, 48 px rows with a top border, and an arrow-down icon on the Created header
+    And UserCardList (below md) has a 68 px minimum row height: the email line (with the "you"
+      tag), the display name below it only when there is one, then the RoleBadge, the
+      InviteStatusBadge and "Created {date}" on one line
+    And the username is not shown anywhere in the list
+    And the Email cell shows the account's or invite's email address, medium weight, highlighted;
+      the row whose kind is "user" and whose id equals the session user's id (from GET
+      /v1/auth/me) carries a muted mono "you" tag after it
+    And the Display name cell shows the item's display_name, highlighted, or a muted dash "—" when
+      it is empty or absent; an invite item shows the dash unless it carries a display_name; the
+      current user's row shows their saved name
+    And RoleBadge is a 20 px badge, IBM Plex Mono 11 px medium, 7 px side padding, no icon, showing
+      the word: owner (filled --ui-primary, --ui-bg text, --ui-primary border) or admin
+      (transparent, --ui-text-toned text, --ui-border-accented border); a user row shows its
+      role, and an invite row shows "admin", the role it will create
     And InviteStatusBadge shows icon and word, never color alone: Accepted (circle-check, success
       soft), Pending (mail, warning soft), Expired (clock-alert, transparent, muted, with an
       accented border)
     And the Created column shows the date as "27 Sep 2026", or "Today" when it is the current day;
       the fixture below uses absolute dates only
-    And skeleton rows (5) show only after 150 ms of loading, so a fast response never flashes them
+    And skeleton rows (5) show only after 150 ms of loading, so a fast response never flashes them,
+      one bar per column plus a RoleBadge placeholder and an InviteStatusBadge placeholder in the
+      table (md and up); the below-md card skeleton keeps the board's two-bar shape
     And the Default fixture holds 5 items, newest first: invite id 2 "sam.oliveira@renew.example"
-      pending 27 Sep 2026; invite id 1 "p.huber@gmail.com" expired 3 Aug 2026; user id 3 "ines"
+      pending 27 Sep 2026; invite id 1 "p.huber@gmail.com" with display_name "Paul Huber" expired
-      with display_name "Inès Duarte" accepted 18 Jun 2026; user id 2 "jonas" accepted 2 Apr 2026;
+      3 Aug 2026; user id 3 "ines" email "ines.duarte@renew.example" display_name "Inès Duarte"
-      user id 1 "marta" accepted 12 Mar 2026; the session user is id 1 "marta"
+      role admin accepted 18 Jun 2026; user id 2 "jonas" email "jonas@renew.example" no display
+      name, role admin, accepted 2 Apr 2026; user id 1 "marta" email "marta@renew.example" no
+      display name, role owner, accepted 12 Mar 2026; the session user is id 1 "marta", role
+      "owner"
     And InviteUserModal is a UModal opened from either "Invite user" button; every time it opens it
       starts in its default state: title "Invite a user", text "We'll email them a link to choose
       a username and password. The link expires after 3 days.", an empty, focused Email field
@@ -86,48 +106,87 @@ Feature: Users screen and InviteUserModal
       form is not disabled by an in-flight request; focus returns to the button that opened it
     And a 401 and a 403 (unverified) on either endpoint are handled entirely by useApi's global
       handling (features/api_client_global_error_handling.feature)
-    And this slice does not build the accept-invite screen (/invite/accept), does not add row
+    And this slice does not build the accept-invite screen (/invite/accept); the "Display names in the Users list" state of the
-      actions (remove, promote, revoke or resend), and does not change how display names look in
+      Profile group is drawn by this same list
-      the Profile group's "Display names in the Users list" state
 
-  Scenario: Default — the list loads newest first, with display name, "you" tag and status badges
+  Scenario: Default — the list loads newest first with email, display name, role, status and created
-    Given GET /v1/user/ resolves 200 with the 5-item Default fixture and the session user is "marta"
+    Given GET /v1/user/ resolves 200 with the 5-item Default fixture and the session user is
+      "marta" with role "owner"
     When the user navigates to /users
     Then the breadcrumb reads "Users" (mobile title "Users")
     And the header shows the title "Users", the subtitle and, on desktop, "Invite user"
-    And the rows appear in exactly the fixture's order
+    And the table header reads Email, Display name, Role, Invite status, Created, and an empty
-    And the first row shows "sam.oliveira@renew.example" (toned), a Pending badge and "27 Sep 2026"
+      unlabeled sixth cell
-    And the second row shows "p.huber@gmail.com", an Expired badge and "3 Aug 2026"
+    And the rows appear in exactly the fixture's order, each 48 px high
-    And the third row shows "Inès Duarte" first with "ines" beside it in muted text, an Accepted
+    And the first row shows "sam.oliveira@renew.example", "—" (muted), "admin", a Pending badge
+      and "27 Sep 2026"
+    And the second row shows "p.huber@gmail.com", "Paul Huber", "admin", an Expired badge and
+      "3 Aug 2026"
+    And the third row shows "ines.duarte@renew.example", "Inès Duarte", "admin", an Accepted
       badge and "18 Jun 2026"
-    And the fifth row shows "marta" with the "you" tag, an Accepted badge and "12 Mar 2026"
+    And the fourth row shows "jonas@renew.example", "—", "admin", an Accepted badge and "2 Apr 2026"
-    And no row shows an email address for an accepted user
+    And the fifth row shows "marta@renew.example" with the "you" tag, "—", "owner" (filled), an
-    And below md the same rows render as cards, each with the name line, then the badge and
+      Accepted badge and "12 Mar 2026"
-      "Created {date}"
+    And the username "ines", "jonas" or "marta" appears in no row
+    And below md the same rows render as cards: the email line, the display name below it only
+      for "p.huber@gmail.com" and "ines.duarte@renew.example", then the RoleBadge, the status
+      badge and "Created {date}" on one line
 
   Scenario: Navigation — "Users" sits between Articles and Integration
     Given the user is on /users
     When DashboardShell mounts
-    Then the sidebar and the mobile drawer list Home, Articles, Users, Integration in that order
+    Then the sidebar and the mobile drawer list Home, Articles, Users, Integration, Settings in that order
     And "Users" has the users icon, links to /users and has aria-current="page"
 
   Scenario: Loading — skeleton rows after 150 ms while the first request, or a retry, is in flight
     Given GET /v1/user/ has not yet resolved
     When the user navigates to /users
     Then nothing is drawn in place of the list for the first 150 ms
-    And after 150 ms 5 skeleton rows replace the list, and the list container is aria-busy="true"
+    And after 150 ms 5 skeleton rows replace the list, on desktop each with one bar per column
+      plus a RoleBadge and an InviteStatusBadge placeholder and below md in the board's two-bar
+      card shape, and the list container is aria-busy="true"
     When GET /v1/user/ then resolves 200 with the Default fixture
     Then the skeleton rows are replaced by the Default state's rows
 
   Scenario: Only you — nobody has been invited yet
-    Given GET /v1/user/ resolves 200 with only user id 1 "marta", accepted 12 Mar 2026, and the
+    Given GET /v1/user/ resolves 200 with only user id 1 "marta" (email "marta@renew.example",
-      session user is "marta"
+      role "owner"), accepted 12 Mar 2026, and the session user is "marta" with role "owner"
     When the user navigates to /users
-    Then the list has one row: "marta" with the "you" tag, an Accepted badge and "12 Mar 2026"
+    Then the list has one row: "marta@renew.example" with the "you" tag, "—", "owner", an
+      Accepted badge and "12 Mar 2026"
     And under the list the hint reads "Invite someone so they can sign in with their own account
       instead of sharing yours."
     And "Invite user" is still available
 
+  Scenario: Display names in the Users list — saved names show, empty ones show a dash
+    Given GET /v1/auth/me resolves 200 for user id 1 with display_name "Marta Alves" and role "owner"
+    And GET /v1/user/ resolves 200 with the Default fixture where user id 1 has display_name
+      "Marta Alves"
+    When the user navigates to /users
+    Then the row "marta@renew.example" (you) shows "Marta Alves", "owner" and an Accepted badge
+    And the row "ines.duarte@renew.example" shows "Inès Duarte", "admin" and an Accepted badge
+    And the row "jonas@renew.example" shows a muted "—", "admin" and an Accepted badge
+    And the sidebar chip also shows "Marta Alves"
+
+  Scenario Outline: Non-owners cannot invite — "Invite user" and the hint are not rendered
+    Given the session user is "<username>" with role "<role>" and GET /v1/user/ resolves 200
+      with <fixture>
+    When the user navigates to /users at desktop and at a below-md width
+    Then <invite>
+    And the list still renders normally
+    And <hint>
+
+    Examples:
+      | username | role  | fixture                                      | invite                                               | hint                                    |
+      | jonas    | admin | the Default fixture                          | no "Invite user" button is rendered, header or pinned | the pinned button's space is not reserved |
+      | jonas    | admin | only user id 1 "marta" and user id 2 "jonas" | no "Invite user" button is rendered, header or pinned | the "Invite someone…" hint is not shown |
+      | marta    | owner | the Default fixture                          | "Invite user" is rendered in the header (desktop) and pinned (below md) | the list is unchanged                 |
+
+  Scenario: An unknown or missing role is treated as non-owner
+    Given GET /v1/auth/me resolves 200 without a role
+    When the user navigates to /users
+    Then no "Invite user" button is rendered
+
   Scenario Outline: Error — a 500 or a network failure replaces the list with an alert and a retry
     Given GET /v1/user/ <failure>
     When the user navigates to /users
@@ -185,8 +244,8 @@ Feature: Users screen and InviteUserModal
       "lea.martin@renew.example", status "pending", created_at now, expires_at 3 days later
     Then the modal closes and focus returns to "Invite user"
     And GET /v1/user/ is not called again
-    And the list has 6 rows, the first being "lea.martin@renew.example" with a Pending badge and
+    And the list has 6 rows, the first being "lea.martin@renew.example" with "—", "admin", a
-      "Today", drawn with the --ui-bg-elevated background
+      Pending badge and "Today", drawn with the --ui-bg-elevated background
     And the other 5 rows are unchanged and follow it in their previous order
     And a toast appears: color success, icon i-lucide-circle-check, id "invite-sent-3", title
       "Invite sent", description "lea.martin@renew.example has 3 days to accept."
@@ -200,7 +259,7 @@ Feature: Users screen and InviteUserModal
   Scenario: Invite sent into the Only-you state keeps a coherent list
     Given the Only-you state has loaded
     When an invite for "lea.martin@renew.example" is sent and resolves 201
-    Then the list shows the new Pending row above the "marta" row
+    Then the list shows the new Pending row above the "marta@renew.example" row
     And the Only-you hint is no longer shown
 
   Scenario Outline: Invite: already a user (409) — the field error depends on the response text

features/users_screen.qa.md

@@ -3,9 +3,9 @@
 ## Implementation note for coder (informational, not a QA assertion)
 
 The invitations API is already built and covered by features/invitations.qa.md: this slice has no
-Go change, so it has no HTTP-level Go section.
+Go change in this slice; the API shape was extended by user_roles.feature, so it has no HTTP-level Go section.
 
-The shell specs were amended to four destinations (Home, Articles, Users, Integration):
+The shell specs were amended to five destinations (Home, Articles, Users, Integration, Settings):
 nuxt_ui_shell_foundation.feature / .qa.md (case 14) and dashboard_shell_branding.feature. Their
 Vitest tests must be updated in the same change.
 
@@ -16,20 +16,27 @@ The list items are keyed by `kind` and `id`.
 ## Automated (Vitest + Vue Test Utils, `task test:web`)
 
 Mock `useApi`'s `request` for `GET /v1/user/` and `POST /v1/user/invite` per case; no real backend.
-Mount UsersPage inside DashboardShell with a resolved verified session (id 1, username "marta") and
+Mount UsersPage inside DashboardShell with a resolved verified session (id 1, username "marta",
-a test router at /users. The Default fixture is the Background's 5 items; the invite fixture is
+role "owner") and a test router at /users; cases 6 to 17 use that owner session. The Default
+fixture is the Background's 5 items; the invite fixture is
 id 3, email "lea.martin@renew.example". No test freezes the system date. The specs only assert on
 the fixture's absolute dates; the sent row's "Today" label is not asserted anywhere (see the Visual
 part). Run each layout case at a desktop and a below-md width (mock `matchMedia`).
 
-1. **Default** — assert breadcrumb "Users", title, subtitle, "Invite user", rows in fixture order,
+1. **Default** — assert breadcrumb "Users", title, subtitle, "Invite user", the table header
-   "Inès Duarte" with "ines" beside it, the "you" tag only on the "marta" row, badge words and
+   labels (Email, Display name, Role, Invite status, Created), rows in fixture order, per row the
-   the fixture's absolute dates; assert no accepted row shows an email.
+   email, the display name or "—", the RoleBadge word and class (owner filled, admin outlined),
-2. **Navigation** — assert the sidebar and the drawer list Home, Articles, Users, Integration in
+   the badge word and the absolute date, "Paul Huber" on the invite row, the "you" tag only on
-   that order, and "Users" carries aria-current="page" on /users.
+   "marta@renew.example", no username text in any row, and the below-md cards (display name line
+   only when set).
+2. **Navigation** — assert the sidebar and the drawer list Home, Articles, Users, Integration,
+   Settings in that order, and "Users" carries aria-current="page" on /users.
 3. **Loading** — unresolved `GET`; with fake timers assert nothing is drawn at 149 ms; at 150 ms
-   assert 5 skeleton rows and `aria-busy="true"`; resolve and assert the Default rows.
+   assert 5 skeleton rows and `aria-busy="true"`, and at desktop that each row has a RoleBadge
-4. **Only you** — a single "marta" item; assert the row, the hint text and "Invite user".
+   and a status badge placeholder (below md the cards keep the two-bar shape); resolve and
+   assert the Default rows.
+4. **Only you** — a single "marta" item (email, role "owner"); assert the row, the hint text and
+   "Invite user".
 5. **Error, Examples-driven** — reject with `ApiError(500)`, then `NetworkError`; assert the alert
    copy, the "Try again" action, no close button and no rows; click "Try again"; assert `request`
    is called again, then resolve the Default fixture and assert its rows.
@@ -45,8 +52,8 @@ part). Run each layout case at a desktop and a below-md width (mock `matchMedia`
    was not called a second time, the list has 6 rows with the new Pending row first and the
    others unchanged, the first row has the `--ui-bg-elevated` background class, and the toast
    was raised with id "invite-sent-3", color success, icon "i-lucide-circle-check", title
-   "Invite sent" and description "lea.martin@renew.example has 3 days to accept." Assert nothing
+   "Invite sent" and description "lea.martin@renew.example has 3 days to accept." Assert the new
-   about the "Today" label.
+   first row shows "—" and "admin", and nothing about the "Today" label.
 10. **Replacement of an expired invite** — invite "p.huber@gmail.com", resolve 201; assert exactly
     one row for that address, first and Pending.
 11. **Invite sent into Only you** — assert the new row above "marta" and the hint gone.
@@ -65,6 +72,14 @@ part). Run each layout case at a desktop and a below-md width (mock `matchMedia`
     the same body; resolve 201 and assert the closed modal, the row and the toast.
 17. **Cancel discards** — type, click "Cancel"; assert immediate close, no `request`, an empty
     field on reopening, and focus back on the opening button.
+18. **Display names in the Users list** — the Default fixture with user 1 named "Marta Alves"
+    (session `/v1/auth/me` too); assert the "marta@renew.example" row shows "Marta Alves", "owner"
+    and Accepted, the "ines.duarte@renew.example" row "Inès Duarte" and "admin", the
+    "jonas@renew.example" row "—" and "admin", and the sidebar chip "Marta Alves".
+19. **Non-owners, Examples-driven** — session role "admin", at desktop and below md; assert no
+    "Invite user" button (header or pinned), the list still renders, no reserved space for the
+    pinned button, and the hint absent for a list of only "marta" and "jonas". Also a session with
+    no role (no button) and an owner control (button present in both layouts).
 
 ## Visual (task visual:check -- users, desktop and mobile, light and dark)
 
@@ -73,11 +88,23 @@ Screens Back-office.dc.html`, exact values in `docs/design/source/AppFrame.dc.ht
 state's mock to `web/visual/states.ts` with the board's own sample data. The gate is hard: every
 capture of every non-skipped state must be within 10 %, for both viewports and both themes.
 
-- [ ] Default: the 5 board rows (`sam.oliveira@renew.example`, `p.huber@gmail.com`, `ines` with
+- [ ] Fixtures: `usersFixture` in `web/visual/states.ts` follows the board data: invite 2
-      "Inès Duarte", `jonas`, `marta` with "you"), dates 27 Sep 2026, 3 Aug 2026, 18 Jun 2026,
+      `sam.oliveira@renew.example` pending, no name; invite 1 `p.huber@gmail.com` with
-      2 Apr 2026, 12 Mar 2026; session user `marta`.
+      `display_name: 'Paul Huber'` expired; user 3 `ines.duarte@renew.example` "Inès Duarte" admin;
-- [ ] Loading: 5 skeleton rows; the setup must give skeletons time to show (150 ms) before the capture.
+      user 2 `jonas@renew.example` admin, empty name; user 1 `marta@renew.example` owner, empty
-- [ ] Only you: the single `marta` row plus the hint.
+      name. `verifiedSession` carries `role: 'owner'`. `profileSession` and `usersWithDisplayNames`
+      are updated so "Display names in the Users list" shows "Marta Alves", owner.
+- [ ] Default: the 5 board rows by email with display names, roles and status badges, dates
+      27 Sep 2026, 3 Aug 2026, 18 Jun 2026, 2 Apr 2026, 12 Mar 2026; session user `marta`. The
+      Cancel/Renew buttons in the sixth column are specified in features/users_row_actions.feature.
+- [ ] Loading: 5 skeleton rows, with role and status placeholders on desktop and the board's
+      two-bar cards on mobile; the setup must give skeletons time to show (150 ms) before the
+      capture.
+- [ ] Only you: the single `marta@renew.example` row (owner) plus the hint.
+- [ ] Profile "Display names in the Users list" (`task visual:check -- profile "Display names in
+      the Users list"`): Marta Alves / Inès Duarte / dash.
+- [ ] Not drawn, no visual state: non-owner rendering (no "Invite user", no hint). Covered by
+      Vitest only (case 19); do not add it to `web/visual/states.ts`.
 - [ ] Error: the alert and "Try again", no table or cards; the header button is still drawn.
 - [ ] Invite: default: modal over the Default list, empty focused Email; the mobile pinned button hidden.
 - [ ] Invite: validation: value `sam.oliveira@renew`, error copy.
@@ -91,6 +118,9 @@ capture of every non-skipped state must be within 10 %, for both viewports and b
 - [ ] Layout, taken from the board frame (`AppFrame.dc.html`), not `components.md`: desktop header
       row is title block left and the 32 px "Invite user" button right, aligned to the bottom of
       the row; on mobile the button is 16 px from left, right and bottom, 48 px high, 18 px icon.
+- [ ] Layout, from `AppFrame.dc.html`: 36 px table header, 48 px rows, sixth 150 px track empty;
+      RoleBadge 20 px high, 7 px side padding, IBM Plex Mono 11 px medium; cards show the email
+      line, then the display name, then the badges line.
 - [ ] Not covered by screenshots: keyboard and focus order (Tab reaches "Invite user", the modal
       focus starts on Email, then Cancel, then "Send invite", focus is trapped, Esc closes it in
       every dismissible state and is blocked while Sending, focus returns to the opening button);
@@ -106,6 +136,8 @@ capture of every non-skipped state must be within 10 %, for both viewports and b
 - **Real invitation email** — needs real or sandboxed SMTP (`SMTP_HOST` and the related env
   vars): the mail arrives and its link `{PUBLIC_URL}/invite/accept?c=...` carries the code. The
   link will not resolve in the SPA, because the accept screen is out of scope.
+- **Admin session** — sign in once as an admin against `task dev` and confirm there is no
+  "Invite user" button and no "Only you" hint.
 - **Toast placement and stacking on a live app** — bottom right on desktop and above the pinned
   button on mobile.
 - **"Today" and the elevated row on a live app** — confirm the new row and the "Today" label

features/verified_account_required.feature

@@ -12,12 +12,12 @@ Feature: Protected article routes and the offline-inclusive listing require a ve
     Given before this slice, the protected group inside NewArticleRouter (api/router.go) applies
       only jwtauth.Verifier then jwtauth.Authenticator to GET /v1/article/{id}, POST /v1/article/,
       DELETE /v1/article/{id}, PATCH /v1/article/{id}, PATCH /v1/article/{id}/publish,
-      PATCH /v1/article/{id}/unpublish and POST /v1/article/{id}/image, so any caller with a
+      PATCH /v1/article/{id}/unpublish, so any caller with a
       validly signed, unexpired jwt cookie reaches the handler regardless of that account's
       is_verified status
     And this slice adds a third middleware, api/middleware.RequireVerifiedUser(getUser
       *useCases.GetUserUseCase), mounted after jwtauth.Authenticator in that same group, so the
-      order becomes Verifier, Authenticator, RequireVerifiedUser for all seven routes above
+      order becomes Verifier, Authenticator, RequireVerifiedUser for all six routes above
     And RequireVerifiedUser reads user_id from the request's jwt claims using a new exported
       helper, api/pkg/claims.UserId(r *http.Request) (uint32, bool), which replaces the
       identical private userIdFromClaims method api/handlers/auth.Handler.Verify and
@@ -81,16 +81,6 @@ Feature: Protected article routes and the offline-inclusive listing require a ve
       | PATCH  | /v1/article/1/publish       |
       | PATCH  | /v1/article/1/unpublish     |
 
-  Scenario: An unverified user is also refused when attaching an image
-    Given a user repository containing user id 1, is_verified false
-    And a valid jwt cookie for user id 1
-    And the article repository contains an article with id 1 titled "Backyard Renovation Update"
-    When the client sends POST /v1/article/1/image with that cookie and a multipart form field
-      "file" holding a file named "before.png" with content type "image/png"
-    Then the response status is 403
-    And the response body is the apperr.VerificationRequiredErrorMessage text
-    And the image repository's Create is never called
-
   Scenario: A verified user still exercises the protected routes exactly as before
     Given a user repository containing user id 1, is_verified true
     And a valid jwt cookie for user id 1

features/verified_account_required.qa.md

@@ -29,8 +29,7 @@ routers, so the HTTP-level checks live in a new `test/verified_account_required_
    - a nested `r.Group` adding `jwtauth.Authenticator(token)` then
      `middleware.RequireVerifiedUser(getUser)`, containing `r.Get("/{id}", ...)`,
      `r.Post("/", ...)`, `r.Delete("/{id}", ...)`, `r.Patch("/{id}", ...)`,
-     `r.Patch("/{id}/publish", ...)`, `r.Patch("/{id}/unpublish", ...)`,
+     `r.Patch("/{id}/publish", ...)`, `r.Patch("/{id}/unpublish", ...)`
-     `r.Post("/{id}/image", ...)`
    No live server.
 8. Mint jwt cookies with `token.Encode(map[string]any{"user_id": uint32(1)})` for the valid-token
    cases, following the convention in `features/article_publishing.qa.md`.
@@ -45,10 +44,6 @@ routers, so the HTTP-level checks live in a new `test/verified_account_required_
     `PATCH /v1/article/1/unpublish`, each sent with the valid cookie from step 8 → assert status
     `403` and body exactly `apperr.VerificationRequiredErrorMessage`. Assert the article repository
     was not mutated by any of the write calls.
-11. Same seed, `POST /v1/article/1/image` with the valid cookie and a multipart form field `"file"`
-    holding `before.png` / `image/png` → assert status `403`, body
-    `apperr.VerificationRequiredErrorMessage`, and the image repository's `Create` is never called
-    (mirroring the assertion style in `test/upload_article_image_test.go`).
 
 ## HTTP checks: a verified caller is unaffected
 
@@ -127,7 +122,7 @@ routers, so the HTTP-level checks live in a new `test/verified_account_required_
 ## Manual verification (not exercised by the Go test)
 
 - The SPA-visible behaviour of an unverified, logged-in user landing on the back-office article
-  screens (create/edit/publish/image-upload) and seeing a 403 instead of the normal editing UI,
+  screens (create/edit/publish) and seeing a 403 instead of the normal editing UI,
   and the front-office/back-office listing showing only published articles to that same unverified
   session, is out of scope for this slice's automated test and should be checked by hand against a
   running dev build with an unverified test account.

go.mod

@@ -12,6 +12,7 @@ require (
 	github.com/google/uuid v1.6.0
 	github.com/joho/godotenv v1.5.1
 	golang.org/x/crypto v0.44.0
+	golang.org/x/image v0.46.0
 	gopkg.in/gomail.v2 v2.0.0-20160411212932-81ebce5c23df
 	gorm.io/gorm v1.31.1
 )
@@ -41,8 +42,8 @@ require (
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
 	github.com/segmentio/asm v1.2.1 // indirect
 	golang.org/x/exp v0.0.0-20251113190631-e25ba8c21ef6 // indirect
-	golang.org/x/sys v0.38.0 // indirect
+	golang.org/x/sys v0.48.0 // indirect
-	golang.org/x/text v0.31.0 // indirect
+	golang.org/x/text v0.42.0 // indirect
 	gopkg.in/alexcesaro/quotedprintable.v3 v3.0.0-20150716171945-2caba252f4dc // indirect
 	modernc.org/libc v1.67.0 // indirect
 	modernc.org/mathutil v1.7.1 // indirect

go.sum

@@ -82,17 +82,19 @@ golang.org/x/crypto v0.44.0 h1:A97SsFvM3AIwEEmTBiaxPPTYpDC47w720rdiiUvgoAU=
 golang.org/x/crypto v0.44.0/go.mod h1:013i+Nw79BMiQiMsOPcVCB5ZIJbYkerPrGnOa00tvmc=
 golang.org/x/exp v0.0.0-20251113190631-e25ba8c21ef6 h1:zfMcR1Cs4KNuomFFgGefv5N0czO2XZpUbxGUy8i8ug0=
 golang.org/x/exp v0.0.0-20251113190631-e25ba8c21ef6/go.mod h1:46edojNIoXTNOhySWIWdix628clX9ODXwPsQuG6hsK0=
-golang.org/x/mod v0.30.0 h1:fDEXFVZ/fmCKProc/yAXXUijritrDzahmwwefnjoPFk=
+golang.org/x/image v0.46.0 h1:b1+oYj0Jbp6K5MDT4i4/eZpYlk3V8SJhhDKh6LBHAyQ=
-golang.org/x/mod v0.30.0/go.mod h1:lAsf5O2EvJeSFMiBxXDki7sCgAxEUcZHXoXMKT4GJKc=
+golang.org/x/image v0.46.0/go.mod h1:3B3W05VGVQyuXucLINLjXKrqISASfi4Xj+iCVkLMwew=
-golang.org/x/sync v0.18.0 h1:kr88TuHDroi+UVf+0hZnirlk8o8T+4MrK6mr60WkH/I=
+golang.org/x/mod v0.41.0 h1:qJmnOUb4YB+FsEuM3HcWucdZASCPGhsX6uljO6pog0c=
-golang.org/x/sync v0.18.0/go.mod h1:9KTHXmSnoGruLpwFjVSX0lNNA75CykiMECbovNTZqGI=
+golang.org/x/mod v0.41.0/go.mod h1:Ek9pY8RKWXwsWvd3rQiHYtMqkjSUV+s1Rj7j4H5Ur6o=
+golang.org/x/sync v0.23.0 h1:KameEIfc1IkluZyXWLn39Wd4tURc6GbCiISGiZm2bQk=
+golang.org/x/sync v0.23.0/go.mod h1:sUUOizhqBxiL6pEWpqNLUiaJn1ShEbZ6BBqskPbjZm0=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.38.0 h1:3yZWxaJjBmCWXqhN1qh02AkOnCQ1poK6oF+a7xWL6Gc=
+golang.org/x/sys v0.48.0 h1:bbX/i/6MgT9BVLM9RT1thmxL04yeTAhbEz4SyadbXoo=
-golang.org/x/sys v0.38.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
+golang.org/x/sys v0.48.0/go.mod h1:hNLxWAXmnKAxqDtdwIYC4bM9oQPEecfsnNMuSxOs3og=
-golang.org/x/text v0.31.0 h1:aC8ghyu4JhP8VojJ2lEHBnochRno1sgL6nEi9WGFGMM=
+golang.org/x/text v0.42.0 h1:JbOZXgfeCPU9gacVtYliJqOhD+zhrEqK4LfdpmlUZqI=
-golang.org/x/text v0.31.0/go.mod h1:tKRAlv61yKIjGGHX/4tP1LTbc13YSec1pxVEWXzfoeM=
+golang.org/x/text v0.42.0/go.mod h1:ojzP1Z+2QtioaF8DTtO8K5q7JWVVYwZKenzujK0Zd0E=
-golang.org/x/tools v0.39.0 h1:ik4ho21kwuQln40uelmciQPp9SipgNDdrafrYA4TmQQ=
+golang.org/x/tools v0.49.0 h1:3NI7VXzL9+1WZD52Dx2ttoPwD5DWrFGpl9mFZDlmisI=
-golang.org/x/tools v0.39.0/go.mod h1:JnefbkDPyD8UU2kI5fuf8ZX4/yUeh9W877ZeBONxUqQ=
+golang.org/x/tools v0.49.0/go.mod h1:SJNXV9DBKT0UbdttsQjbfJlAE/q+y36++zo3uL3N0Oo=
 gopkg.in/alexcesaro/quotedprintable.v3 v3.0.0-20150716171945-2caba252f4dc h1:2gGKlE2+asNV9m7xrywl36YYNnBG5ZQ0r/BOOxqPpmk=
 gopkg.in/alexcesaro/quotedprintable.v3 v3.0.0-20150716171945-2caba252f4dc/go.mod h1:m7x9LTH6d71AHyAX77c9yqWCCa3UKHcVEj9y7hAtKDk=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=

internal/domain/article/articleDomain.go

@@ -1,7 +1,6 @@
 package article
 
 import (
-	domain "RenewCMS/internal/domain/image"
 	"errors"
 	"time"
 	"unicode/utf8"
@@ -30,7 +29,6 @@ type Article struct {
 	ID        uint32    `json:"id"`
 	Title     string    `json:"title"`
 	Body      string    `json:"body"`
-	Images    []*domain.Image `json:"images"`
 	IsOnline  bool      `json:"is_online"`
 	CreatedAt time.Time `json:"created_at"`
 	UpdatedAt time.Time `json:"updated_at"`

internal/domain/article/articleRepositoryInterface.go

@@ -13,5 +13,5 @@ type Repository interface {
 	UpdateBody(id uint32, body string) (Article, error)
 	UpdateIsOnline(id uint32, isOnline bool) (Article, error)
 	Delete(id uint32) error
-	AddImage(postId uint32, imageId uint32) error
+	FindByBodyContaining(filename string) ([]Article, error)
 }

internal/domain/image/imageDomain.go

@@ -3,16 +3,33 @@ package image
 import (
 	"errors"
 	"io"
+	"path"
+	"regexp"
 	"sort"
+	"strings"
 	"time"
+	"unicode/utf8"
 )
 
 var ErrImageNotFound = errors.New("image not found")
 var ErrImageTypeNotAllowed = errors.New("the file must be a PNG, JPEG, WEBP, or SVG image")
 var ErrImageTooLarge = errors.New("the file exceeds the maximum upload size")
+var ErrImageUnreadable = errors.New("the image could not be read")
+var ErrInvalidFilename = errors.New("invalid filename")
+var ErrInvalidQuery = errors.New("invalid media query")
+var ErrInvalidMergeRequest = errors.New("invalid merge request")
+var ErrMergeCopyMissing = errors.New("a merged copy no longer exists")
+var ErrMergeHashMismatch = errors.New("a merged copy does not share the kept image's content")
 
 const MaxImageSize int64 = 10485760
 
+const (
+	MinFilenameRunes = 1
+	MaxFilenameRunes = 100
+	DefaultListLimit = 24
+	MaxListLimit     = 100
+)
+
 var allowedContentTypes = map[string]bool{
 	"image/png":     true,
 	"image/jpeg":    true,
@@ -20,6 +37,16 @@ var allowedContentTypes = map[string]bool{
 	"image/svg+xml": true,
 }
 
+var canonicalExtensions = map[string]string{
+	"image/png":     ".png",
+	"image/jpeg":    ".jpg",
+	"image/webp":    ".webp",
+	"image/svg+xml": ".svg",
+}
+
+var filenameStemPattern = regexp.MustCompile(`^[\p{L}\p{N}_-]+$`)
+var sha256Pattern = regexp.MustCompile(`^[0-9a-f]{64}$`)
+
 func IsAllowedContentType(contentType string) bool {
 	return allowedContentTypes[contentType]
 }
@@ -33,17 +60,147 @@ func AllowedContentTypes() []string {
 	return types
 }
 
+func NormalizeUploadFilename(original string, contentType string) string {
+	name := original[strings.LastIndexAny(original, `/\`)+1:]
+	name = strings.TrimSpace(name)
+	if name == "" || name == "." {
+		name = "image"
+	}
+	if path.Ext(name) == "" {
+		name += canonicalExtensions[contentType]
+	}
+	return name
+}
+
+func ExtensionOf(filename string) string {
+	return path.Ext(filename)
+}
+
+func StemOf(filename string) string {
+	return strings.TrimSuffix(filename, path.Ext(filename))
+}
+
+func ValidateFilenameStem(stem string) (string, error) {
+	trimmed := strings.TrimSpace(stem)
+	runeCount := utf8.RuneCountInString(trimmed)
+	if runeCount < MinFilenameRunes || runeCount > MaxFilenameRunes {
+		return "", ErrInvalidFilename
+	}
+	if !filenameStemPattern.MatchString(trimmed) {
+		return "", ErrInvalidFilename
+	}
+	return trimmed, nil
+}
+
+func StoredName(imagePath string) string {
+	return path.Base(imagePath)
+}
+
+type Sort string
+
+const (
+	SortNewest  Sort = "newest"
+	SortOldest  Sort = "oldest"
+	SortName    Sort = "name"
+	SortLargest Sort = "largest"
+)
+
+type Filter string
+
+const (
+	FilterAll        Filter = "all"
+	FilterUnused     Filter = "unused"
+	FilterDuplicates Filter = "duplicates"
+)
+
+type ListQuery struct {
+	Search string
+	Hash   string
+	Filter Filter
+	Sort   Sort
+	Limit  int
+	Cursor string
+}
+
+func NewListQuery() ListQuery {
+	return ListQuery{Filter: FilterAll, Sort: SortNewest, Limit: DefaultListLimit}
+}
+
+func (q ListQuery) Validate() error {
+	switch q.Filter {
+	case FilterAll, FilterUnused, FilterDuplicates:
+	default:
+		return ErrInvalidQuery
+	}
+	switch q.Sort {
+	case SortNewest, SortOldest, SortName, SortLargest:
+	default:
+		return ErrInvalidQuery
+	}
+	if q.Limit < 1 || q.Limit > MaxListLimit {
+		return ErrInvalidQuery
+	}
+	if q.Hash != "" && !sha256Pattern.MatchString(q.Hash) {
+		return ErrInvalidQuery
+	}
+	return nil
+}
+
+func SortImages(images []Image, order Sort) {
+	sort.SliceStable(images, func(i, j int) bool {
+		a, b := images[i], images[j]
+		switch order {
+		case SortOldest:
+			if !a.CreatedAt.Equal(b.CreatedAt) {
+				return a.CreatedAt.Before(b.CreatedAt)
+			}
+			return a.ID < b.ID
+		case SortName:
+			nameA, nameB := strings.ToLower(StemOf(a.Filename)), strings.ToLower(StemOf(b.Filename))
+			if nameA != nameB {
+				return nameA < nameB
+			}
+			return a.ID < b.ID
+		case SortLargest:
+			if a.Size != b.Size {
+				return a.Size > b.Size
+			}
+			return a.ID < b.ID
+		default:
+			if !a.CreatedAt.Equal(b.CreatedAt) {
+				return a.CreatedAt.After(b.CreatedAt)
+			}
+			return a.ID > b.ID
+		}
+	})
+}
+
+type Counts struct {
+	All             int
+	DuplicateGroups int
+}
+
 type ImageInput struct {
 	Content      io.Reader
 	Filename     string
 	Size         int64
 	ContentType  string
+	Width        int
+	Height       int
+	SHA256       string
+	UploadedByID uint32
 }
 
 type Image struct {
 	ID           uint32    `json:"id"`
 	Path         string    `json:"path"`
-	ArticleID uint32    `json:"article_id"`
+	Filename     string    `json:"filename"`
+	Size         int64     `json:"size"`
+	ContentType  string    `json:"content_type"`
+	Width        int       `json:"width"`
+	Height       int       `json:"height"`
+	SHA256       string    `json:"sha256"`
+	UploadedByID uint32    `json:"uploaded_by_id"`
 	CreatedAt    time.Time `json:"created_at"`
 	UpdatedAt    time.Time `json:"updated_at"`
 }

internal/domain/image/imageRepositoryInterface.go

@@ -1,6 +1,17 @@
 package image
 
+type SearchQuery struct {
+	Search string
+	Hash   string
+}
+
 type Repository interface {
 	Create(input ImageInput) (Image, error)
+	Get(id uint32) (Image, error)
 	Delete(id uint32) error
+	List(query SearchQuery) ([]Image, error)
+	FindByHash(hash string) ([]Image, error)
+	Rename(id uint32, filename string) (Image, error)
+	ListDuplicates() ([]Image, error)
+	Counts() (Counts, error)
 }

internal/domain/invite/inviteDomain.go

@@ -11,6 +11,7 @@ var ErrInviteNotFound = errors.New("invite not found")
 var ErrInviteEmailNotSent = errors.New("invite email not sent")
 var ErrInviteInvalid = errors.New("invite invalid")
 var ErrInviteExpired = errors.New("invite expired")
+var ErrInviteAlreadyAccepted = errors.New("invite already accepted")
 
 const Lifetime = 3 * 24 * time.Hour
 

internal/domain/invite/inviteRepositoryInterface.go

@@ -9,5 +9,6 @@ type Repository interface {
 	Create(invite Invite) (Invite, error)
 	GetAll() []Invite
 	Delete(id uint32) error
+	Renew(id uint32, hashedCode string, expiresAt time.Time, createdAt time.Time) (Invite, error)
 	AcceptWithUser(inviteID uint32, acceptedAt time.Time, newUser user.User) (user.User, error)
 }

internal/domain/settings/settingsDomain.go

@@ -0,0 +1,5 @@
+package settings
+
+type Settings struct {
+	Version string `json:"version"`
+}

internal/domain/user/userDomain.go

@@ -16,6 +16,13 @@ var ErrPasswordResetCodeExpired = errors.New("password reset code expired")
 var ErrInvalidDisplayName = errors.New("invalid display name")
 var ErrUsernameTaken = errors.New("username taken")
 
+type Role string
+
+const (
+	RoleOwner Role = "owner"
+	RoleAdmin Role = "admin"
+)
+
 type User struct {
 	ID                      uint32    `json:"id"`
 	Username                string    `json:"username"`
@@ -24,6 +31,7 @@ type User struct {
 	Email                   string    `json:"email"`
 	DisplayName             string    `json:"display_name"`
 	IsVerified              bool      `json:"is_verified"`
+	Role                    Role      `json:"role"`
 	VerificationCode        string    `json:"verification_code"`
 	VerificationExpiration  time.Time `json:"verification_expiration"`
 	PasswordResetExpiration time.Time `json:"password_reset_expiration"`

internal/infrastructure/config/settings.go

@@ -31,6 +31,7 @@ type Settings struct {
 	Smtp               SmtpSettings
 	AuthRateLimit      AuthRateLimitSettings
 	TrustedProxies     []string
+	Version            string
 }
 
 func (s Settings) IsProduction() bool {