chore: Vitest + Vue Test Utils test runner exposed as task test:web

feat: post deletion

.air.toml

@@ -0,0 +1,20 @@
+root = "."
+tmp_dir = "tmp"
+
+[build]
+  cmd = "go build -tags nofrontend -o ./tmp/renewcms.exe ./cmd/server"
+  bin = "tmp/renewcms.exe"
+  delay = 500
+  exclude_dir = ["tmp", "bin", "data", "web", "features", "docs", "internal/infrastructure/assets/dist", ".claude"]
+  exclude_regex = ["_test.go"]
+  include_ext = ["go", "html"]
+  log = "build-errors.log"
+  send_interrupt = true
+  kill_delay = "2s"
+  stop_on_error = true
+
+[log]
+  time = false
+
+[misc]
+  clean_on_exit = true

.env.example

@@ -0,0 +1,15 @@
+PUBLIC_URL=http://localhost:5173
+JWT_SECRET=change-me-to-a-long-random-string
+SMTP_EMAIL=a@b.c
+SMTP_PASSWORD=12341234
+SMTP_HOST=mail.service.abc
+SMTP_PORT=465
+
+ENVIRONMENT=development
+PORT=8080
+DB_FILE=./data/renewcms.db
+UPLOAD_DIR=./data/uploads
+CORS_ALLOWED_ORIGINS=
+AUTH_RATE_LIMIT_MAX_ATTEMPTS=5
+AUTH_RATE_LIMIT_WINDOW_SECONDS=60
+TRUSTED_PROXIES=

.gitattributes

@@ -0,0 +1,4 @@
+* text=auto eol=lf
+*.ico binary
+*.png binary
+*.jpg binary

.gitignore

@@ -1,31 +1,24 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-.DS_Store
-dist
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
+# IDE
 .idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+.vscode
 
-mongodbdata
-.env
+# DB
+*.db
+data/
+
+# Build
+bin
+dist/
+
+# Environment
+.env
+
+# Generated files
+tmp/
+.task/
+build-errors.log
+uploadedImages/
+*.exe
+
+.claude/
+CLAUDE.md

CODING_STANDARDS.md

@@ -0,0 +1,100 @@
+# Coding Standards
+
+These rules apply to every file in this repo , for humans and agents alike.
+
+## General rules
+
+1. Follow standard conventions.
+2. Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
+3. Boy scout rule. Leave the campground cleaner than you found it.
+4. Always find root cause. Always look for the root cause of a problem.
+
+## Design rules
+
+1. Keep configurable data at high levels.
+2. Prefer polymorphism to if/else or switch/case.
+3. Separate multi-threading code.
+4. Prevent over-configurability.
+5. Use dependency injection.
+6. Follow Law of Demeter. A class should know only its direct dependencies.
+
+## Understandability tips
+
+1. Be consistent. If you do something a certain way, do all similar things in the same way.
+2. Use explanatory variables.
+3. Encapsulate boundary conditions. Boundary conditions are hard to keep track of. Put the processing for them in one place.
+4. Prefer dedicated value objects to primitive types.
+5. Avoid logical dependency. Don't write methods which work correctly only depending on something else in the same class.
+6. Avoid negative conditionals.
+
+## Names rules
+
+1. Choose descriptive and unambiguous names.
+2. Make meaningful distinctions.
+3. Use pronounceable names.
+4. Use searchable names.
+5. Replace magic numbers with named constants.
+6. Avoid encodings. Don't append prefixes or type information.
+
+## Functions rules
+
+1. Small.
+2. Do one thing.
+3. Use descriptive names.
+4. Prefer fewer arguments.
+5. Have no side effects.
+6. Don't use flag arguments. Split the method into several independent methods that can be called from the client without the flag.
+
+## Comments rules
+
+1. No comments in the codebase. This covers Go, TypeScript/Vue, HTML templates and config files (YAML, TOML, `.env.example`, `.gitattributes`, …).
+2. Explain yourself in code instead: descriptive names, small functions, named constants, explanatory variables.
+3. The only exceptions are tool directives the code needs to work, such as `//go:build` and `//go:embed`.
+4. Don't comment out code; just remove it.
+5. Prose belongs in `docs/` and `README.md`, not in source files.
+
+## Source code structure
+
+1. Separate concepts vertically.
+2. Related code should appear vertically dense.
+3. Declare variables close to their usage.
+4. Dependent functions should be close.
+5. Similar functions should be close.
+6. Place functions in the downward direction (caller above callee).
+7. Keep lines short.
+8. Don't use horizontal alignment.
+9. Use white space to associate related things and disassociate weakly related ones.
+10. Don't break indentation.
+
+## Objects and data structures
+
+1. Hide internal structure.
+2. Prefer data structures when there's no behavior to attach.
+3. Avoid hybrid structures (half object, half data).
+4. Keep classes small.
+5. Each class should do one thing.
+6. Keep the number of instance variables small.
+7. Base classes should know nothing about their derivatives.
+8. Prefer many small functions over one function with a parameter that selects behavior.
+9. Prefer non-static methods to static methods.
+
+## Tests
+
+1. One assert per test.
+2. Readable.
+3. Fast.
+4. Independent.
+5. Repeatable.
+
+## Code smells to watch for
+
+1. **Rigidity** — the software is difficult to change; a small change causes a cascade of subsequent changes.
+2. **Fragility** — the software breaks in many places due to a single change.
+3. **Immobility** — you cannot reuse parts of the code in other projects because of the risk and effort involved.
+4. **Needless complexity**.
+5. **Needless repetition**.
+6. **Opacity** — the code is hard to understand.
+
+## Credits
+
+Thanks to [@wojtekluwojteklu/clean_code.md](https://gist.github.com/wojteklu/73c6914cc446146b8b533c0988cf8d29)

Dockerfile.backend

@@ -1,14 +0,0 @@
-FROM golang:1.19
-
-WORKDIR /app
-
-COPY go.mod ./
-COPY go.sum ./
-RUN go mod download
-
-ADD cmd ./cmd/
-ADD internal ./internal/
-COPY .env ./
-RUN go build -o ./GohCMS/ ./...
-
-CMD ["./GohCMS/cmd"]

Dockerfile.frontend

@@ -1,12 +0,0 @@
-FROM node:latest as build-stage
-WORKDIR /app
-COPY ./web/admin-gui/package*.json ./
-COPY ./.env ./
-RUN npm install
-COPY ./web/admin-gui/ .
-RUN npm run build
-
-FROM nginx as production-stage
-RUN mkdir /app
-COPY --from=build-stage /app/dist /app
-COPY ./web/admin-gui/nginx.conf /etc/nginx/nginx.conf

README.md

@@ -1,43 +1,43 @@
-# GohCMS
+# RenewCMS
 
-## 🚧 This project is under development !
+A small self-hosted CMS: a Go API and a Vue 3 admin/front SPA, shipped as **a single executable** backed by a SQLite file.
 
-The features are not complete, not fully tested and subject to many changes.
+> 🚧 **Under development.** Features are incomplete, not fully tested and subject to change.
 
-## Setup
+## Quick start
 
-Don't forget to setup the [Environment variables](#environment-variables)!
+### Run a release binary
 
-### Use with Docker
-
-To **run** the app, run the command
-
-```shell
-docker-compose up
+```sh
+cp .env.example .env    # fill in PUBLIC_URL, JWT_SECRET and SMTP_*
+./renewcms              # → http://localhost:8080
 ```
 
-### Build and run it yourself
+Data is stored in `./data/` by default. For a real server (systemd, HTTPS, backups), see **[docs/deployment.md](docs/deployment.md)**.
 
-TODO
+### Develop
 
-### Environment variables
-
-- ./env:
+Requires Go 1.27+, Node.js 22, [Bun](https://bun.sh) and [Task](https://taskfile.dev).
 
+```sh
+cp .env.example .env
+task setup
+task dev                # API with hot reload + Vite HMR → http://localhost:5173
 ```
-APP_API_ADDRESS=http://example.com
-APP_FRONT_ADDRESS=http://example.com
-APP_BASE_API_PATH=/example
-APP_BASE_FRONT_PATH=/example
-APP_API_PORT=1234
-APP_FRONT_PORT=1234
-APP_JWT_SECRET=secret
-```
+
+## Documentation
+
+| Doc | Contents |
+|---|---|
+| [docs/development.md](docs/development.md) | Dev setup, how Vite and the API fit together, tests, lint, `task` commands |
+| [docs/deployment.md](docs/deployment.md) | Building release binaries, running as a service, HTTPS, backups, upgrades |
+| [docs/configuration.md](docs/configuration.md) | Every environment variable |
+| [docs/architecture.md](docs/architecture.md) | Backend layering and how the SPA is embedded |
 
 ## API Usage
 
 TODO
 
-## Demo
+## TODOs
 
-TODO
+- Cancel button when email validation pending or expired

Taskfile.yml

@@ -0,0 +1,146 @@
+version: '3'
+
+vars:
+  BINARY: renewcms
+  DIST_DIR: internal/infrastructure/assets/dist
+  VERSION:
+    sh: git describe --tags --always --dirty
+  LDFLAGS: -s -w -X main.version={{.VERSION}}
+  RELEASE_TARGETS: [windows/amd64, windows/arm64, linux/amd64, linux/arm64, darwin/amd64, darwin/arm64]
+
+env:
+  CGO_ENABLED: '0'
+
+tasks:
+  default:
+    cmds:
+      - task --list
+    silent: true
+
+  setup:
+    desc: Install dev tools, Go modules and frontend dependencies
+    cmds:
+      - go install github.com/air-verse/air@latest
+      - go install github.com/go-gremlins/gremlins/cmd/gremlins@latest
+      - go mod download
+      - task: web:install
+
+  dev:
+    desc: Run the API (air, hot reload) and the SPA (Vite, HMR) together → http://localhost:5173
+    deps: [dev:api, dev:web]
+
+  dev:api:
+    desc: Run the API with hot reload on :8080 (SPA not embedded)
+    cmds:
+      - air
+
+  dev:web:
+    desc: Run the Vite dev server on :5173, proxying /v1 to the API
+    dir: web
+    deps: [web:install]
+    cmds:
+      - bun dev
+
+  test:
+    desc: Run the Go tests
+    cmds:
+      - go test -tags nofrontend ./test/... -count=1 {{.CLI_ARGS}}
+
+  cover:
+    desc: Go test coverage of the use cases → tmp/coverage.out
+    cmds:
+      - mkdir -p tmp
+      - go test -tags nofrontend ./test/... -count=1 -coverpkg=./internal/infrastructure/useCases/... -coverprofile=tmp/coverage.out
+      - go tool cover -func=tmp/coverage.out
+
+  mutate:
+    desc: Gremlins mutation testing of the use cases → tmp/gremlins.json
+    cmds:
+      - mkdir -p tmp
+      - gremlins unleash --integration --tags nofrontend --coverpkg=./internal/infrastructure/useCases/...,./api/middleware/...,./api/pkg/claims/... --timeout-coefficient 10 --output tmp/gremlins.json ./internal/infrastructure/useCases ./api/middleware ./api/pkg/claims
+
+  test:web:
+    desc: Run the SPA test suite (Vitest) in run mode
+    dir: web
+    deps: [web:install]
+    cmds:
+      - bun run vitest run
+
+  lint:
+    desc: gofmt check, go vet, eslint (--fix) and vue-tsc
+    cmds:
+      - task: lint:go
+      - task: lint:web
+
+  lint:go:
+    cmds:
+      - cmd: test -z "$(gofmt -l .)" || (gofmt -l . && echo "unformatted Go files, run 'task fmt'" && exit 1)
+        silent: true
+      - go vet -tags nofrontend ./...
+
+  lint:web:
+    dir: web
+    deps: [web:install]
+    cmds:
+      - bun lint
+      - bun run type-check
+
+  fmt:
+    desc: Format Go and frontend sources
+    cmds:
+      - gofmt -w .
+      - bun run --cwd web format
+
+  web:install:
+    internal: true
+    dir: web
+    sources: [package.json, bun.lock]
+    generates: ['node_modules/.bin/vite*']
+    cmds:
+      - bun install --frozen-lockfile
+
+  build:web:
+    desc: Type-check and build the SPA into {{.DIST_DIR}}
+    dir: web
+    deps: [web:install]
+    sources: [src/**/*, public/**/*, index.html, vite.config.ts, tsconfig*.json, package.json, bun.lock]
+    generates: ['../{{.DIST_DIR}}/index.html']
+    cmds:
+      - bun run build
+
+  build:
+    desc: Production binary for this machine → bin/{{.BINARY}}
+    deps: [build:web]
+    cmds:
+      - go build -trimpath -ldflags "{{.LDFLAGS}}" -o bin/{{.BINARY}}{{exeExt}} ./cmd/server
+
+  release:
+    desc: Cross-compile production binaries for all release targets → bin/
+    deps: [build:web]
+    cmds:
+      - for: { var: RELEASE_TARGETS }
+        task: build:target
+        vars:
+          GOOS: '{{index (splitList "/" .ITEM) 0}}'
+          GOARCH: '{{index (splitList "/" .ITEM) 1}}'
+
+  build:target:
+    internal: true
+    vars:
+      EXT: '{{if eq .GOOS "windows"}}.exe{{end}}'
+    env:
+      GOOS: '{{.GOOS}}'
+      GOARCH: '{{.GOARCH}}'
+    cmds:
+      - go build -trimpath -ldflags "{{.LDFLAGS}}" -o bin/{{.BINARY}}_{{.VERSION}}_{{.GOOS}}_{{.GOARCH}}{{.EXT}} ./cmd/server
+
+  run:
+    desc: Build and run the production binary locally
+    deps: [build]
+    cmds:
+      - ./bin/{{.BINARY}}{{exeExt}}
+
+  clean:
+    desc: Remove build output, the built SPA and tmp/
+    cmds:
+      - rm -rf bin tmp {{.DIST_DIR}}

api/dependecyInjection.go

@@ -0,0 +1,112 @@
+package api
+
+import (
+	domainArticle "RenewCMS/internal/domain/article"
+	domainImage "RenewCMS/internal/domain/image"
+	domainMail "RenewCMS/internal/domain/mail"
+	domainUser "RenewCMS/internal/domain/user"
+	"RenewCMS/internal/infrastructure/config"
+	"RenewCMS/internal/infrastructure/hashing"
+	"RenewCMS/internal/infrastructure/mailer"
+	"RenewCMS/internal/infrastructure/persistence/models"
+	persistence "RenewCMS/internal/infrastructure/persistence/repositories"
+	"RenewCMS/internal/infrastructure/useCases"
+	"os"
+	"path/filepath"
+
+	"github.com/glebarez/sqlite"
+	"github.com/go-chi/jwtauth/v5"
+	"gorm.io/gorm"
+)
+
+type UseCases struct {
+	Token                       *jwtauth.JWTAuth
+	CreateArticleUseCase        *useCases.CreateArticleUseCase
+	GetArticleUseCase           *useCases.GetArticleUseCase
+	ListArticlesUseCase         *useCases.ListArticlesUseCase
+	UpdateArticleUseCase        *useCases.UpdateArticleUseCase
+	DeleteArticleUseCase        *useCases.DeleteArticleUseCase
+	GetUserUseCase              *useCases.GetUserUseCase
+	CreateUserUseCase           *useCases.CreateUserUseCase
+	AuthenticateUserUseCase     *useCases.AuthenticateUserUseCase
+	VerifyUserUseCase           *useCases.VerifyUserUseCase
+	CancelRegistrationUseCase   *useCases.CancelRegistrationUseCase
+	RequestPasswordResetUseCase *useCases.RequestPasswordResetUseCase
+	ResetPasswordUseCase        *useCases.ResetPasswordUseCase
+	ListUsersUseCase            *useCases.ListUsersUseCase
+	SendMailUseCase             *useCases.SendMailUseCase
+	CreateImageUseCase          *useCases.CreateImageUseCase
+	DeleteImageUseCase          *useCases.DeleteImageUseCase
+}
+
+type Repositories struct {
+	ArticleRepo domainArticle.Repository
+	UserRepo    domainUser.Repository
+	ImageRepo   domainImage.Repository
+	MailRepo    domainMail.Repository
+}
+
+func getDb(dbName string) *gorm.DB {
+	if err := os.MkdirAll(filepath.Dir(dbName), os.ModePerm); err != nil {
+		panic("Unable to create necessary subdirectories: " + err.Error())
+	}
+	db, err := gorm.Open(sqlite.Open(dbName), &gorm.Config{})
+	if err != nil {
+		panic("Unable to open the database: " + err.Error())
+	}
+
+	if err := db.AutoMigrate(&models.Article{}, &models.User{}); err != nil {
+		panic("Failed to migrate database: " + err.Error())
+	}
+
+	return db
+}
+
+func getRepositories(db *gorm.DB, settings config.Settings) *Repositories {
+	return &Repositories{
+		ArticleRepo: persistence.NewArticleRepository(db),
+		UserRepo:    persistence.NewUserRepository(db),
+		ImageRepo:   persistence.NewImageRepository(db, settings.UploadDir),
+		MailRepo:    mailer.NewMailRepository(settings.Smtp),
+	}
+}
+
+func getUseCases(repos *Repositories, settings config.Settings) *UseCases {
+	hasher := hashing.NewBcryptHasher()
+
+	return &UseCases{
+		Token:                       jwtauth.New("HS256", []byte(settings.JWTSecret), nil),
+		CreateArticleUseCase:        useCases.NewCreateArticleUseCase(repos.ArticleRepo),
+		GetArticleUseCase:           useCases.NewGetArticleUseCase(repos.ArticleRepo),
+		ListArticlesUseCase:         useCases.NewListArticlesUseCase(repos.ArticleRepo),
+		UpdateArticleUseCase:        useCases.NewUpdateArticleUseCase(repos.ArticleRepo),
+		DeleteArticleUseCase:        useCases.NewDeleteArticleUseCase(repos.ArticleRepo, repos.ImageRepo),
+		GetUserUseCase:              useCases.NewGetUserUseCase(repos.UserRepo),
+		CreateUserUseCase:           useCases.NewCreateUserUseCase(repos.UserRepo, hasher, repos.MailRepo, settings.PublicURL),
+		AuthenticateUserUseCase:     useCases.NewAuthenticateUserUseCase(repos.UserRepo, hasher),
+		VerifyUserUseCase:           useCases.NewVerifyUserUseCase(repos.UserRepo, hasher),
+		CancelRegistrationUseCase:   useCases.NewCancelRegistrationUseCase(repos.UserRepo),
+		RequestPasswordResetUseCase: useCases.NewRequestPasswordResetUseCase(repos.UserRepo, hasher, repos.MailRepo, settings.PublicURL),
+		ResetPasswordUseCase:        useCases.NewResetPasswordUseCase(repos.UserRepo, hasher),
+		ListUsersUseCase:            useCases.NewListUsersUseCase(repos.UserRepo),
+		SendMailUseCase:             useCases.NewSendMailUseCase(repos.MailRepo),
+		CreateImageUseCase:          useCases.NewCreateImageUseCase(repos.ImageRepo),
+		DeleteImageUseCase:          useCases.NewDeleteImageUseCase(repos.ImageRepo),
+	}
+}
+
+func InitContainer(settings config.Settings) (*UseCases, func() error) {
+	db := getDb(settings.DBFile)
+	repos := getRepositories(db, settings)
+	return getUseCases(repos, settings), closeDb(db)
+}
+
+func closeDb(db *gorm.DB) func() error {
+	return func() error {
+		sqlDb, err := db.DB()
+		if err != nil {
+			return err
+		}
+		return sqlDb.Close()
+	}
+}

api/handlers/article/articleHandler.go

@@ -0,0 +1,249 @@
+package article
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	"RenewCMS/api/pkg/claims"
+	validator "RenewCMS/api/pkg/validator"
+	domain "RenewCMS/internal/domain/article"
+	"RenewCMS/internal/infrastructure/useCases"
+	"encoding/json"
+	"errors"
+	"fmt"
+	"log"
+	"net/http"
+	"strconv"
+
+	"github.com/go-chi/chi/v5"
+)
+
+type Handler struct {
+	CreateUseCase  *useCases.CreateArticleUseCase
+	GetUseCase     *useCases.GetArticleUseCase
+	ListUseCase    *useCases.ListArticlesUseCase
+	DeleteUseCase  *useCases.DeleteArticleUseCase
+	UpdateUseCase  *useCases.UpdateArticleUseCase
+	GetUserUseCase *useCases.GetUserUseCase
+}
+
+type PostArticle struct {
+	Title string `json:"title" validate:"required,min=3,max=200"`
+	Body  string `json:"body" validate:"required,max=10000"`
+}
+
+func NewHandler(create *useCases.CreateArticleUseCase, get *useCases.GetArticleUseCase, list *useCases.ListArticlesUseCase, delete *useCases.DeleteArticleUseCase, update *useCases.UpdateArticleUseCase, getUser *useCases.GetUserUseCase) *Handler {
+	return &Handler{
+		CreateUseCase:  create,
+		GetUseCase:     get,
+		ListUseCase:    list,
+		DeleteUseCase:  delete,
+		UpdateUseCase:  update,
+		GetUserUseCase: getUser,
+	}
+}
+
+func parseArticleId(r *http.Request) (uint32, error) {
+	id, err := strconv.ParseUint(chi.URLParam(r, "id"), 10, 32)
+	return uint32(id), err
+}
+
+func (h *Handler) GetArticle(w http.ResponseWriter, r *http.Request) {
+	id, err := parseArticleId(r)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	var article domain.Article
+	if h.callerIsVerified(r) {
+		article, err = h.GetUseCase.GetArticle(id)
+	} else {
+		article, err = h.GetUseCase.GetOnlineArticle(id)
+	}
+	if err != nil {
+		if errors.Is(err, domain.ErrArticleNotFound) {
+			http.Error(w, apperr.ArticleNotFoundErrorMessage, http.StatusNotFound)
+			return
+		}
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+
+	articleJson, err := json.Marshal(article)
+	if err != nil {
+		http.Error(w, "Failed to encode response", http.StatusInternalServerError)
+		return
+	}
+
+	if _, err := w.Write(articleJson); err != nil {
+		fmt.Printf("Failed to write response: %v", err)
+	}
+}
+
+func (h *Handler) PostArticle(w http.ResponseWriter, r *http.Request) {
+	var localArticle PostArticle
+	if err := json.NewDecoder(r.Body).Decode(&localArticle); err != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	if err := validator.Validate.Struct(localArticle); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	createdArticle, err := h.CreateUseCase.CreateArticle(useCases.CreateArticleCommand{
+		Title: localArticle.Title,
+		Body:  localArticle.Body,
+	})
+	if err != nil {
+		if errors.Is(err, domain.ErrInvalidTitle) {
+			http.Error(w, apperr.ArticleTitleErrorMessage, http.StatusBadRequest)
+			return
+		}
+		http.Error(w, "Failed to create article", http.StatusInternalServerError)
+		return
+	}
+
+	articleJson, err := json.Marshal(createdArticle)
+	if err != nil {
+		http.Error(w, "Failed to encode response", http.StatusInternalServerError)
+		return
+	}
+
+	w.WriteHeader(http.StatusCreated)
+	if _, err := w.Write(articleJson); err != nil {
+		log.Printf("Failed to write response: %v", err)
+	}
+}
+
+func writeArticleErrorResponse(w http.ResponseWriter, err error) {
+	if errors.Is(err, domain.ErrArticleNotFound) {
+		http.Error(w, apperr.ArticleNotFoundErrorMessage, http.StatusNotFound)
+		return
+	}
+	http.Error(w, "Internal server error", http.StatusInternalServerError)
+}
+
+func writeArticleJsonResponse(w http.ResponseWriter, article domain.Article) {
+	articleJson, err := json.Marshal(article)
+	if err != nil {
+		http.Error(w, "Failed to encode response", http.StatusInternalServerError)
+		return
+	}
+
+	if _, err := w.Write(articleJson); err != nil {
+		log.Printf("Failed to write response: %v", err)
+	}
+}
+
+func (h *Handler) setIsOnline(w http.ResponseWriter, r *http.Request, isOnline bool) {
+	id, err := parseArticleId(r)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	updatedArticle, err := h.UpdateUseCase.UpdateIsOnline(id, isOnline)
+	if err != nil {
+		writeArticleErrorResponse(w, err)
+		return
+	}
+
+	writeArticleJsonResponse(w, updatedArticle)
+}
+
+type UpdateArticleBody struct {
+	Body string `json:"body" validate:"required,max=10000"`
+}
+
+func (h *Handler) UpdateArticleBody(w http.ResponseWriter, r *http.Request) {
+	id, err := parseArticleId(r)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	var localArticle UpdateArticleBody
+	if err := json.NewDecoder(r.Body).Decode(&localArticle); err != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	if err := validator.Validate.Struct(localArticle); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	updatedArticle, err := h.UpdateUseCase.UpdateBody(id, localArticle.Body)
+	if err != nil {
+		writeArticleErrorResponse(w, err)
+		return
+	}
+
+	writeArticleJsonResponse(w, updatedArticle)
+}
+
+func (h *Handler) PublishArticle(w http.ResponseWriter, r *http.Request) {
+	h.setIsOnline(w, r, true)
+}
+
+func (h *Handler) UnpublishArticle(w http.ResponseWriter, r *http.Request) {
+	h.setIsOnline(w, r, false)
+}
+
+func (h *Handler) callerIsVerified(r *http.Request) bool {
+	userId, ok := claims.UserId(r)
+	if !ok {
+		return false
+	}
+
+	currentUser, err := h.GetUserUseCase.GetUser(userId)
+	if err != nil {
+		return false
+	}
+
+	return currentUser.IsVerified
+}
+
+func (h *Handler) ListArticles(w http.ResponseWriter, r *http.Request) {
+	var articles []domain.Article
+	var err error
+	if h.callerIsVerified(r) {
+		articles, err = h.ListUseCase.ListAllArticles()
+	} else {
+		articles, err = h.ListUseCase.ListOnlineArticles()
+	}
+	if err != nil {
+		http.Error(w, "Failed to retrieve articles", http.StatusInternalServerError)
+		return
+	}
+
+	articlesJson, err := json.Marshal(articles)
+	if err != nil {
+		http.Error(w, "Failed to encode response", http.StatusInternalServerError)
+		return
+	}
+
+	if _, err := w.Write(articlesJson); err != nil {
+		log.Printf("Failed to write response: %v", err)
+	}
+}
+
+func (h *Handler) DeleteArticle(w http.ResponseWriter, r *http.Request) {
+	id, err := parseArticleId(r)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	if err := h.DeleteUseCase.DeleteArticle(id); err != nil {
+		if errors.Is(err, domain.ErrArticleNotFound) {
+			http.Error(w, apperr.ArticleNotFoundErrorMessage, http.StatusNotFound)
+			return
+		}
+		http.Error(w, "Failed to delete article", http.StatusInternalServerError)
+		return
+	}
+
+	w.WriteHeader(http.StatusNoContent)
+}

api/handlers/auth/loginHandler.go

@@ -0,0 +1,142 @@
+package auth
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	validator "RenewCMS/api/pkg/validator"
+	"RenewCMS/internal/domain/user"
+	"RenewCMS/internal/infrastructure/useCases"
+	"encoding/json"
+	"errors"
+	"net/http"
+	"time"
+
+	"github.com/go-chi/jwtauth/v5"
+)
+
+type LoginHandler struct {
+	Token               *jwtauth.JWTAuth
+	CreateUseCase       *useCases.CreateUserUseCase
+	AuthenticateUseCase *useCases.AuthenticateUserUseCase
+	IsProduction        bool
+}
+
+type RegisterCredentials struct {
+	Username string `json:"username" validate:"required,min=3,max=20"`
+	Password string `json:"password" validate:"required,min=8"`
+	Email    string `json:"email" validate:"required,email"`
+}
+
+type LoginCredentials struct {
+	Username string `json:"username" validate:"required,min=3,max=20"`
+	Password string `json:"password" validate:"required,min=8"`
+}
+
+func NewLoginHandler(token *jwtauth.JWTAuth, create *useCases.CreateUserUseCase, authenticate *useCases.AuthenticateUserUseCase, isProduction bool) *LoginHandler {
+	return &LoginHandler{
+		Token:               token,
+		CreateUseCase:       create,
+		AuthenticateUseCase: authenticate,
+		IsProduction:        isProduction,
+	}
+}
+
+func removeJwtCookie(w http.ResponseWriter, isProduction bool) {
+	http.SetCookie(w, &http.Cookie{
+		Name:     "jwt",
+		Value:    "",
+		Expires:  time.Now(),
+		MaxAge:   -1,
+		Secure:   isProduction,
+		HttpOnly: true,
+		Path:     "/",
+	})
+}
+
+func (h *LoginHandler) SetJwtCookie(w *http.ResponseWriter, u user.User) error {
+	_, tokenString, err := h.Token.Encode(map[string]any{"user_id": u.ID, "token_version": u.TokenVersion})
+	if err != nil {
+		return err
+	}
+	http.SetCookie(*w, &http.Cookie{
+		Name:     "jwt",
+		Value:    tokenString,
+		Expires:  time.Now().Add(24 * time.Hour),
+		Secure:   h.IsProduction,
+		HttpOnly: true,
+		Path:     "/",
+	})
+	return nil
+}
+
+func (h *LoginHandler) Login(w http.ResponseWriter, r *http.Request) {
+	var credentials LoginCredentials
+
+	err := json.NewDecoder(r.Body).Decode(&credentials)
+	if err != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	err = validator.Validate.Struct(credentials)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	dbUser, err := h.AuthenticateUseCase.Authenticate(credentials.Username, credentials.Password)
+	if err != nil {
+		http.Error(w, apperr.LogsErrorMessage, http.StatusForbidden)
+		return
+	}
+
+	_ = h.SetJwtCookie(&w, dbUser)
+
+	message, _ := json.Marshal(map[string]any{"message": "User logged in! HTTPonly jwt cookie created"})
+	_, _ = w.Write(message)
+}
+
+func (h *LoginHandler) Register(w http.ResponseWriter, r *http.Request) {
+	var credentials RegisterCredentials
+	err := json.NewDecoder(r.Body).Decode(&credentials)
+	if err != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	err = validator.Validate.Struct(credentials)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	createdUser, err := h.CreateUseCase.CreateUser(useCases.CreateUserCommand{
+		Username: credentials.Username,
+		Password: credentials.Password,
+		Email:    credentials.Email,
+	})
+	if err != nil {
+		if errors.Is(err, user.ErrRegistrationClosed) {
+			http.Error(w, apperr.RegistrationClosedErrorMessage, http.StatusForbidden)
+			return
+		}
+		http.Error(w, apperr.RegistrationFailedErrorMessage, http.StatusInternalServerError)
+		return
+	}
+
+	_ = h.SetJwtCookie(&w, createdUser)
+
+	message, _ := json.Marshal(map[string]any{"message": "User registered! HTTPonly jwt cookie created"})
+	_, _ = w.Write(message)
+}
+
+func (h *LoginHandler) RegistrationStatus(w http.ResponseWriter, _ *http.Request) {
+	body, _ := json.Marshal(map[string]bool{"open": h.CreateUseCase.IsRegistrationOpen()})
+	w.Header().Set("Cache-Control", "no-store")
+	_, _ = w.Write(body)
+}
+
+func (h *LoginHandler) Logout(w http.ResponseWriter, _ *http.Request) {
+	removeJwtCookie(w, h.IsProduction)
+	message, _ := json.Marshal(map[string]any{"message": "User logged out! HTTPonly jwt cookie deleted"})
+	_, _ = w.Write(message)
+}

api/handlers/auth/meHandler.go

@@ -0,0 +1,47 @@
+package auth
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	"RenewCMS/api/pkg/claims"
+	"RenewCMS/internal/domain/user"
+	"RenewCMS/internal/infrastructure/useCases"
+	"encoding/json"
+	"errors"
+	"net/http"
+)
+
+type MeHandler struct {
+	GetUseCase *useCases.GetUserUseCase
+}
+
+func NewMeHandler(getUser *useCases.GetUserUseCase) *MeHandler {
+	return &MeHandler{
+		GetUseCase: getUser,
+	}
+}
+
+func (h *MeHandler) Me(w http.ResponseWriter, r *http.Request) {
+	userId, ok := claims.UserId(r)
+	if !ok {
+		http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+		return
+	}
+
+	loadedUser, err := h.GetUseCase.GetUser(userId)
+	if err != nil {
+		if errors.Is(err, user.ErrUserNotFound) {
+			http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+			return
+		}
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+
+	body, err := json.Marshal(newPublicUser(loadedUser))
+	if err != nil {
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+	w.Header().Set("Cache-Control", "no-store")
+	_, _ = w.Write(body)
+}

api/handlers/auth/passwordResetHandler.go

@@ -0,0 +1,81 @@
+package auth
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	validator "RenewCMS/api/pkg/validator"
+	"RenewCMS/internal/domain/user"
+	"RenewCMS/internal/infrastructure/useCases"
+	"encoding/json"
+	"errors"
+	"net/http"
+)
+
+type PasswordResetHandler struct {
+	RequestPasswordResetUseCase *useCases.RequestPasswordResetUseCase
+	ResetPasswordUseCase        *useCases.ResetPasswordUseCase
+}
+
+type RequestPasswordResetCredentials struct {
+	Email string `json:"email" validate:"required,email"`
+}
+
+type ResetPasswordCredentials struct {
+	Email    string `json:"email" validate:"required,email"`
+	Code     string `json:"code" validate:"required"`
+	Password string `json:"password" validate:"required,min=8"`
+}
+
+func NewPasswordResetHandler(requestPasswordReset *useCases.RequestPasswordResetUseCase, resetPassword *useCases.ResetPasswordUseCase) *PasswordResetHandler {
+	return &PasswordResetHandler{
+		RequestPasswordResetUseCase: requestPasswordReset,
+		ResetPasswordUseCase:        resetPassword,
+	}
+}
+
+func (h *PasswordResetHandler) RequestPasswordReset(w http.ResponseWriter, r *http.Request) {
+	var credentials RequestPasswordResetCredentials
+	err := json.NewDecoder(r.Body).Decode(&credentials)
+	if err != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	err = validator.Validate.Struct(credentials)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	_ = h.RequestPasswordResetUseCase.RequestPasswordReset(credentials.Email)
+
+	message, _ := json.Marshal(map[string]any{"message": apperr.PasswordResetRequestedMessage})
+	_, _ = w.Write(message)
+}
+
+func (h *PasswordResetHandler) ResetPassword(w http.ResponseWriter, r *http.Request) {
+	var credentials ResetPasswordCredentials
+	err := json.NewDecoder(r.Body).Decode(&credentials)
+	if err != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	err = validator.Validate.Struct(credentials)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	err = h.ResetPasswordUseCase.ResetPassword(credentials.Email, credentials.Code, credentials.Password)
+	if err != nil {
+		if errors.Is(err, user.ErrInvalidPasswordResetCode) || errors.Is(err, user.ErrPasswordResetCodeExpired) {
+			http.Error(w, apperr.PasswordResetFailedErrorMessage, http.StatusForbidden)
+			return
+		}
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+
+	message, _ := json.Marshal(map[string]any{"message": "Your password has been reset. You can now log in."})
+	_, _ = w.Write(message)
+}

api/handlers/auth/verificationHandler.go

@@ -0,0 +1,119 @@
+package auth
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	"RenewCMS/api/pkg/claims"
+	validator "RenewCMS/api/pkg/validator"
+	"RenewCMS/internal/domain/user"
+	"RenewCMS/internal/infrastructure/useCases"
+	"encoding/json"
+	"errors"
+	"net/http"
+	"time"
+)
+
+type VerificationHandler struct {
+	VerifyUseCase *useCases.VerifyUserUseCase
+	CancelUseCase *useCases.CancelRegistrationUseCase
+	IsProduction  bool
+}
+
+type VerifyCredentials struct {
+	Code string `json:"code" validate:"required"`
+}
+
+type PublicUser struct {
+	ID         uint32    `json:"id"`
+	Username   string    `json:"username"`
+	Email      string    `json:"email"`
+	IsVerified bool      `json:"is_verified"`
+	CreatedAt  time.Time `json:"created_at"`
+	UpdatedAt  time.Time `json:"updated_at"`
+}
+
+func newPublicUser(u user.User) PublicUser {
+	return PublicUser{
+		ID:         u.ID,
+		Username:   u.Username,
+		Email:      u.Email,
+		IsVerified: u.IsVerified,
+		CreatedAt:  u.CreatedAt,
+		UpdatedAt:  u.UpdatedAt,
+	}
+}
+
+func NewVerificationHandler(verify *useCases.VerifyUserUseCase, cancel *useCases.CancelRegistrationUseCase, isProduction bool) *VerificationHandler {
+	return &VerificationHandler{
+		VerifyUseCase: verify,
+		CancelUseCase: cancel,
+		IsProduction:  isProduction,
+	}
+}
+
+func (h *VerificationHandler) Verify(w http.ResponseWriter, r *http.Request) {
+	var credentials VerifyCredentials
+	err := json.NewDecoder(r.Body).Decode(&credentials)
+	if err != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	err = validator.Validate.Struct(credentials)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	userId, ok := claims.UserId(r)
+	if !ok {
+		http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+		return
+	}
+
+	verifiedUser, err := h.VerifyUseCase.Verify(userId, credentials.Code)
+	if err != nil {
+		if errors.Is(err, user.ErrUserNotFound) {
+			http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+			return
+		}
+		if errors.Is(err, user.ErrInvalidVerificationCode) || errors.Is(err, user.ErrVerificationCodeExpired) {
+			http.Error(w, apperr.VerificationFailedErrorMessage, http.StatusForbidden)
+			return
+		}
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+
+	body, err := json.Marshal(newPublicUser(verifiedUser))
+	if err != nil {
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+	_, _ = w.Write(body)
+}
+
+func (h *VerificationHandler) CancelRegistration(w http.ResponseWriter, r *http.Request) {
+	userId, ok := claims.UserId(r)
+	if !ok {
+		http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+		return
+	}
+
+	err := h.CancelUseCase.CancelRegistration(userId)
+	if err != nil {
+		if errors.Is(err, user.ErrUserNotFound) {
+			http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+			return
+		}
+		if errors.Is(err, user.ErrAlreadyVerified) {
+			http.Error(w, apperr.AlreadyVerifiedErrorMessage, http.StatusForbidden)
+			return
+		}
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+
+	removeJwtCookie(w, h.IsProduction)
+	message, _ := json.Marshal(map[string]any{"message": "Registration cancelled! Account deleted and HTTPonly jwt cookie cleared"})
+	_, _ = w.Write(message)
+}

api/handlers/frontend/frontHandler.go

@@ -0,0 +1,104 @@
+package frontend
+
+import (
+	"RenewCMS/internal/infrastructure/assets"
+	"io"
+	"io/fs"
+	"net/http"
+	"path"
+	"strings"
+	"time"
+
+	"github.com/go-chi/chi/v5"
+)
+
+const hashedAssetsPrefix = "assets/"
+
+const (
+	hashedAssetCacheControl = "public, max-age=31536000, immutable"
+	staticFileCacheControl  = "public, max-age=3600"
+	indexCacheControl       = "no-store, no-cache, must-revalidate"
+)
+
+const devNotice = "RenewCMS was built with -tags nofrontend: the SPA is served by the Vite dev server (http://localhost:5173)."
+
+type spaHandler struct {
+	staticFS fs.FS
+	modTime  time.Time
+}
+
+func NewFrontendRouter() http.Handler {
+	r := chi.NewRouter()
+
+	if assets.Dist == nil {
+		r.Get("/*", serveDevNotice)
+		return r
+	}
+
+	handler := &spaHandler{
+		staticFS: assets.Dist,
+		modTime:  time.Now(),
+	}
+
+	r.Get("/*", handler.ServeHTTP)
+	return r
+}
+
+func serveDevNotice(w http.ResponseWriter, _ *http.Request) {
+	w.Header().Set("Content-Type", "text/plain; charset=utf-8")
+	w.WriteHeader(http.StatusNotFound)
+	_, _ = io.WriteString(w, devNotice)
+}
+
+func (h *spaHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+	path := h.cleanPath(r.URL.Path)
+	if h.fileExists(path) {
+		h.serveAsset(w, r, path)
+		return
+	}
+	h.serveIndex(w, r)
+}
+
+func (h *spaHandler) cleanPath(p string) string {
+	return strings.TrimPrefix(path.Clean("/"+p), "/")
+}
+
+func (h *spaHandler) fileExists(path string) bool {
+	if path == "" || path == "." {
+		return false
+	}
+	f, err := h.staticFS.Open(path)
+	if err != nil {
+		return false
+	}
+	defer f.Close()
+	stat, err := f.Stat()
+	return err == nil && !stat.IsDir()
+}
+
+func (h *spaHandler) serveAsset(w http.ResponseWriter, r *http.Request, path string) {
+	if strings.HasPrefix(path, hashedAssetsPrefix) {
+		w.Header().Set("Cache-Control", hashedAssetCacheControl)
+	} else {
+		w.Header().Set("Cache-Control", staticFileCacheControl)
+	}
+	http.FileServer(http.FS(h.staticFS)).ServeHTTP(w, r)
+}
+
+func (h *spaHandler) serveIndex(w http.ResponseWriter, r *http.Request) {
+	f, err := h.staticFS.Open("index.html")
+	if err != nil {
+		http.Error(w, "Index not found", http.StatusNotFound)
+		return
+	}
+	defer f.Close()
+
+	content, ok := f.(io.ReadSeeker)
+	if !ok {
+		http.Error(w, "File not seekable", http.StatusInternalServerError)
+		return
+	}
+
+	w.Header().Set("Cache-Control", indexCacheControl)
+	http.ServeContent(w, r, "index.html", h.modTime, content)
+}

api/handlers/image/imageHandler.go

@@ -0,0 +1,89 @@
+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
+}
+
+func NewHandler(create *useCases.CreateImageUseCase, get *useCases.GetArticleUseCase, update *useCases.UpdateArticleUseCase) *Handler {
+	return &Handler{
+		CreateUseCase: create,
+		GetUseCase:    get,
+		UpdateUseCase: update,
+	}
+}
+
+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{"location": newImage.Path})
+	if err != nil {
+		writeInternalServerError(w)
+		return
+	}
+
+	w.WriteHeader(http.StatusCreated)
+	_, _ = w.Write(responseJson)
+}

api/handlers/staticimages/staticImagesHandler.go

@@ -0,0 +1,98 @@
+package staticimages
+
+import (
+	"io"
+	"io/fs"
+	"net/http"
+	"os"
+	"path"
+	"strings"
+	"time"
+
+	"github.com/go-chi/chi/v5"
+)
+
+const cacheControl = "public, max-age=31536000, immutable"
+const svgContentSecurityPolicy = "default-src 'none'; style-src 'unsafe-inline'; sandbox"
+const fallbackContentType = "application/octet-stream"
+
+var contentTypeExtensions = map[string]string{
+	".png":  "image/png",
+	".jpeg": "image/jpeg",
+	".webp": "image/webp",
+	".svg":  "image/svg+xml",
+}
+
+type Handler struct {
+	uploadDir fs.FS
+	modTime   time.Time
+}
+
+func NewHandler(uploadDir string) *Handler {
+	return &Handler{
+		uploadDir: os.DirFS(uploadDir),
+		modTime:   time.Now(),
+	}
+}
+
+func (h *Handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("X-Content-Type-Options", "nosniff")
+
+	cleaned := cleanPath(requestedPath(r))
+	file, stat, ok := h.openFile(cleaned)
+	if !ok {
+		http.NotFound(w, r)
+		return
+	}
+	defer file.Close()
+
+	content, ok := file.(io.ReadSeeker)
+	if !ok {
+		http.Error(w, "File not seekable", http.StatusInternalServerError)
+		return
+	}
+
+	contentType := contentTypeFor(cleaned)
+	w.Header().Set("Content-Type", contentType)
+	w.Header().Set("Cache-Control", cacheControl)
+	if contentType == "image/svg+xml" {
+		w.Header().Set("Content-Security-Policy", svgContentSecurityPolicy)
+	}
+
+	http.ServeContent(w, r, cleaned, stat.ModTime(), content)
+}
+
+func requestedPath(r *http.Request) string {
+	if rctx := chi.RouteContext(r.Context()); rctx != nil && rctx.RoutePath != "" {
+		return rctx.RoutePath
+	}
+	return r.URL.Path
+}
+
+func cleanPath(p string) string {
+	return strings.TrimPrefix(path.Clean("/"+p), "/")
+}
+
+func (h *Handler) openFile(p string) (fs.File, fs.FileInfo, bool) {
+	if p == "" || p == "." {
+		return nil, nil, false
+	}
+	file, err := h.uploadDir.Open(p)
+	if err != nil {
+		return nil, nil, false
+	}
+	stat, err := file.Stat()
+	if err != nil || stat.IsDir() {
+		file.Close()
+		return nil, nil, false
+	}
+	return file, stat, true
+}
+
+func contentTypeFor(p string) string {
+	ext := path.Ext(p)
+	if contentType, ok := contentTypeExtensions[ext]; ok {
+		return contentType
+	}
+	return fallbackContentType
+}

api/middleware/auth.go

@@ -0,0 +1,79 @@
+package middleware
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	"RenewCMS/api/pkg/claims"
+	"RenewCMS/internal/domain/user"
+	"RenewCMS/internal/infrastructure/useCases"
+	"errors"
+	"net/http"
+)
+
+func JsonContentTypeMiddleware(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Content-Type", "application/json")
+		next.ServeHTTP(w, r)
+	})
+}
+
+func resolveCurrentUser(getUser *useCases.GetUserUseCase, w http.ResponseWriter, r *http.Request) (user.User, bool) {
+	userId, ok := claims.UserId(r)
+	if !ok {
+		http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+		return user.User{}, false
+	}
+
+	currentUser, err := getUser.GetUser(userId)
+	if err != nil {
+		if errors.Is(err, user.ErrUserNotFound) {
+			http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+			return user.User{}, false
+		}
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return user.User{}, false
+	}
+
+	return currentUser, true
+}
+
+func RequireCurrentToken(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
+			}
+
+			tokenVersion, ok := claims.TokenVersion(r)
+			if !ok {
+				http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+				return
+			}
+
+			if tokenVersion != currentUser.TokenVersion {
+				http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+				return
+			}
+
+			next.ServeHTTP(w, r)
+		})
+	}
+}
+
+func RequireVerifiedUser(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.IsVerified {
+				http.Error(w, apperr.VerificationRequiredErrorMessage, http.StatusForbidden)
+				return
+			}
+
+			next.ServeHTTP(w, r)
+		})
+	}
+}

api/middleware/rateLimit.go

@@ -0,0 +1,60 @@
+package middleware
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	"net/http"
+	"strconv"
+	"sync"
+	"time"
+)
+
+type rateLimitWindow struct {
+	start time.Time
+	count int
+}
+
+func NewRateLimiter(maxAttempts int, window time.Duration) func(http.Handler) http.Handler {
+	var mu sync.Mutex
+	windows := make(map[string]*rateLimitWindow)
+
+	return func(next http.Handler) http.Handler {
+		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			retryAfter, allowed := recordAttempt(&mu, windows, r.RemoteAddr, maxAttempts, window)
+			if !allowed {
+				w.Header().Set("Retry-After", strconv.Itoa(retryAfter))
+				http.Error(w, apperr.TooManyRequestsErrorMessage, http.StatusTooManyRequests)
+				return
+			}
+			next.ServeHTTP(w, r)
+		})
+	}
+}
+
+func recordAttempt(mu *sync.Mutex, windows map[string]*rateLimitWindow, key string, maxAttempts int, window time.Duration) (int, bool) {
+	mu.Lock()
+	defer mu.Unlock()
+
+	now := time.Now()
+	current, exists := windows[key]
+	if !exists || now.Sub(current.start) >= window {
+		current = &rateLimitWindow{start: now}
+		windows[key] = current
+	}
+
+	current.count++
+	if current.count > maxAttempts {
+		return retryAfterSeconds(window - now.Sub(current.start)), false
+	}
+	return 0, true
+}
+
+func retryAfterSeconds(remaining time.Duration) int {
+	seconds := int(remaining / time.Second)
+	if remaining%time.Second > 0 {
+		seconds++
+	}
+	if seconds < 0 {
+		return 0
+	}
+	return seconds
+}

api/middleware/trustedProxyRealIP.go

@@ -0,0 +1,44 @@
+package middleware
+
+import (
+	"net"
+	"net/http"
+)
+
+func TrustedProxyRealIP(trustedProxies []string) func(http.Handler) http.Handler {
+	return func(next http.Handler) http.Handler {
+		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			realIP := r.Header.Get("X-Real-IP")
+			if realIP != "" && isTrustedProxy(r.RemoteAddr, trustedProxies) {
+				r.RemoteAddr = withRewrittenHost(r.RemoteAddr, realIP)
+			}
+			next.ServeHTTP(w, r)
+		})
+	}
+}
+
+func isTrustedProxy(remoteAddr string, trustedProxies []string) bool {
+	host := hostOf(remoteAddr)
+	for _, trusted := range trustedProxies {
+		if host == trusted {
+			return true
+		}
+	}
+	return false
+}
+
+func hostOf(remoteAddr string) string {
+	host, _, err := net.SplitHostPort(remoteAddr)
+	if err != nil {
+		return remoteAddr
+	}
+	return host
+}
+
+func withRewrittenHost(remoteAddr string, newHost string) string {
+	_, port, err := net.SplitHostPort(remoteAddr)
+	if err != nil {
+		return newHost
+	}
+	return net.JoinHostPort(newHost, port)
+}

api/pkg/apperr/messages.go

@@ -0,0 +1,16 @@
+package apperr
+
+const LogsErrorMessage = "Access to the requested resource is forbidden due to incorrect password and/or username."
+const BodyErrorMessage = "The request cannot be processed due to a mismatch in the format of the body."
+const IdUint32ErrorMessage = "The server expects the ID to be in the format of an unsigned 32-bit integer (uint32)."
+const ArticleNotFoundErrorMessage = "Article not found"
+const ArticleTitleErrorMessage = "Article title must be between 3 and 200 characters."
+const RegistrationClosedErrorMessage = "You are not allowed to create a user. Log in or reset database."
+const RegistrationFailedErrorMessage = "Registration failed. Please try again later."
+const UnauthorizedErrorMessage = "You must be logged in to access this resource."
+const VerificationFailedErrorMessage = "The verification code is invalid or has expired."
+const AlreadyVerifiedErrorMessage = "This account is already verified and cannot be cancelled this way."
+const VerificationRequiredErrorMessage = "You must verify your account to access this resource."
+const PasswordResetRequestedMessage = "If an account exists for that email, a password reset link has been sent."
+const PasswordResetFailedErrorMessage = "The password reset code is invalid or has expired."
+const TooManyRequestsErrorMessage = "Too many requests. Please try again later."

api/pkg/claims/claims.go

@@ -0,0 +1,50 @@
+package claims
+
+import (
+	"math"
+	"net/http"
+
+	"github.com/go-chi/jwtauth/v5"
+)
+
+func UserId(r *http.Request) (uint32, bool) {
+	_, claims, err := jwtauth.FromContext(r.Context())
+	if err != nil {
+		return 0, false
+	}
+
+	rawUserId, ok := claims["user_id"]
+	if !ok {
+		return 0, false
+	}
+
+	userIdFloat, ok := rawUserId.(float64)
+	if !ok {
+		return 0, false
+	}
+
+	if userIdFloat < 0 || userIdFloat > math.MaxUint32 || userIdFloat != math.Trunc(userIdFloat) {
+		return 0, false
+	}
+
+	return uint32(userIdFloat), true
+}
+
+func TokenVersion(r *http.Request) (uint32, bool) {
+	_, claims, err := jwtauth.FromContext(r.Context())
+	if err != nil {
+		return 0, false
+	}
+
+	rawTokenVersion, ok := claims["token_version"]
+	if !ok {
+		return 0, false
+	}
+
+	tokenVersionFloat, ok := rawTokenVersion.(float64)
+	if !ok {
+		return 0, false
+	}
+
+	return uint32(tokenVersionFloat), true
+}

api/pkg/validator/validator.go

@@ -0,0 +1,9 @@
+package validator
+
+import "github.com/go-playground/validator/v10"
+
+var Validate *validator.Validate
+
+func InitValidator() {
+	Validate = validator.New()
+}

api/router.go

@@ -0,0 +1,148 @@
+package api
+
+import (
+	"RenewCMS/api/handlers/article"
+	"RenewCMS/api/handlers/auth"
+	"RenewCMS/api/handlers/frontend"
+	"RenewCMS/api/handlers/image"
+	"RenewCMS/api/handlers/staticimages"
+	"RenewCMS/api/middleware"
+	"RenewCMS/internal/infrastructure/config"
+	"encoding/json"
+	"net/http"
+
+	"github.com/MadAppGang/httplog"
+	"github.com/go-chi/chi/v5"
+	chimiddleware "github.com/go-chi/chi/v5/middleware"
+	"github.com/go-chi/cors"
+	"github.com/go-chi/jwtauth/v5"
+)
+
+func enableLoggingIfDev(r *chi.Mux, routerName string, environment string) {
+	if environment == "development" {
+		r.Use(httplog.LoggerWithName(routerName))
+	}
+}
+
+func GetHelloWorld(w http.ResponseWriter, _ *http.Request) {
+	msg, _ := json.Marshal(map[string]string{"message": "Hello World"})
+	_, _ = w.Write(msg)
+}
+
+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)
+
+	r.Group(func(r chi.Router) {
+		r.Get("/", articleHandler.ListArticles)
+		r.Get("/{id}", articleHandler.GetArticle)
+	})
+	r.Group(func(r chi.Router) {
+		r.Use(jwtauth.Authenticator(container.Token))
+		r.Use(middleware.RequireCurrentToken(container.GetUserUseCase))
+		r.Use(middleware.RequireVerifiedUser(container.GetUserUseCase))
+		r.Post("/", articleHandler.PostArticle)
+		r.Delete("/{id}", articleHandler.DeleteArticle)
+		r.Patch("/{id}", articleHandler.UpdateArticleBody)
+		r.Patch("/{id}/publish", articleHandler.PublishArticle)
+		r.Patch("/{id}/unpublish", articleHandler.UnpublishArticle)
+		r.Post("/{id}/image", imageHandler.PostImage)
+	})
+	return r
+}
+
+func NewAuthRouter(container *UseCases, isProduction bool, rateLimit config.AuthRateLimitSettings, trustedProxies []string) http.Handler {
+	r := chi.NewRouter()
+
+	loginHandler := auth.NewLoginHandler(container.Token, container.CreateUserUseCase, container.AuthenticateUserUseCase, isProduction)
+	verificationHandler := auth.NewVerificationHandler(container.VerifyUserUseCase, container.CancelRegistrationUseCase, isProduction)
+	meHandler := auth.NewMeHandler(container.GetUserUseCase)
+	passwordResetHandler := auth.NewPasswordResetHandler(container.RequestPasswordResetUseCase, container.ResetPasswordUseCase)
+
+	r.Post("/register", loginHandler.Register)
+	r.Get("/registration", loginHandler.RegistrationStatus)
+	r.Group(func(r chi.Router) {
+		r.Use(middleware.TrustedProxyRealIP(trustedProxies))
+		r.Use(middleware.NewRateLimiter(rateLimit.MaxAttempts, rateLimit.Window))
+		r.Post("/login", loginHandler.Login)
+	})
+	r.Post("/logout", loginHandler.Logout)
+	r.Group(func(r chi.Router) {
+		r.Use(middleware.TrustedProxyRealIP(trustedProxies))
+		r.Use(middleware.NewRateLimiter(rateLimit.MaxAttempts, rateLimit.Window))
+		r.Post("/password-reset", passwordResetHandler.RequestPasswordReset)
+	})
+	r.Post("/password-reset/confirm", passwordResetHandler.ResetPassword)
+	r.Group(func(r chi.Router) {
+		r.Use(jwtauth.Verifier(container.Token))
+		r.Use(jwtauth.Authenticator(container.Token))
+		r.Use(middleware.RequireCurrentToken(container.GetUserUseCase))
+		r.Post("/verify", verificationHandler.Verify)
+		r.Delete("/register", verificationHandler.CancelRegistration)
+		r.Get("/me", meHandler.Me)
+	})
+	return r
+}
+
+func InitBackendRoutes(container *UseCases, settings config.Settings) *chi.Mux {
+	r := chi.NewRouter()
+
+	enableLoggingIfDev(r, "backend", settings.Environment)
+
+	r.Use(chimiddleware.GetHead)
+	r.Use(middleware.JsonContentTypeMiddleware)
+	r.Get("/", GetHelloWorld)
+	r.Group(func(r chi.Router) {
+		r.Use(jwtauth.Verifier(container.Token))
+		r.Mount("/article", NewArticleRouter(container))
+	})
+	r.Mount("/auth", NewAuthRouter(container, settings.IsProduction(), settings.AuthRateLimit, settings.TrustedProxies))
+
+	return r
+}
+
+func InitFrontendRoutes(environment string) *chi.Mux {
+	r := chi.NewRouter()
+
+	enableLoggingIfDev(r, "frontend", environment)
+
+	r.Mount("/", frontend.NewFrontendRouter())
+
+	return r
+}
+
+func GetHealth(w http.ResponseWriter, _ *http.Request) {
+	w.Header().Set("Content-Type", "text/plain; charset=utf-8")
+	_, _ = w.Write([]byte("ok"))
+}
+
+func enableCorsIfConfigured(r *chi.Mux, origins []string) {
+	if len(origins) == 0 {
+		return
+	}
+	r.Use(cors.Handler(cors.Options{
+		AllowedOrigins:   origins,
+		AllowedMethods:   []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
+		AllowedHeaders:   []string{"Accept", "Authorization", "Content-Type", "X-CSRF-Token"},
+		ExposedHeaders:   []string{"Link"},
+		AllowCredentials: false,
+		MaxAge:           300,
+	}))
+}
+
+func InitRoutes(container *UseCases, settings config.Settings) *chi.Mux {
+	backend := InitBackendRoutes(container, settings)
+	frontend := InitFrontendRoutes(settings.Environment)
+
+	apiRouter := chi.NewRouter()
+	enableCorsIfConfigured(apiRouter, settings.CorsAllowedOrigins)
+	apiRouter.Use(chimiddleware.GetHead)
+	apiRouter.Get("/healthz", GetHealth)
+	apiRouter.Mount("/v1", backend)
+	apiRouter.Mount("/static/uploadedImages", staticimages.NewHandler(settings.UploadDir))
+	apiRouter.Mount("/", frontend)
+
+	return apiRouter
+}

cmd/main.go

@@ -1,99 +0,0 @@
-package main
-
-import (
-	"fmt"
-	"os"
-
-	"github.com/Floriansylvain/GohCMS/internal/api"
-	"github.com/Floriansylvain/GohCMS/internal/articles"
-	"github.com/gin-gonic/gin"
-	"github.com/joho/godotenv"
-)
-
-var (
-	ginMode      string
-	apiPort      string
-	apiBaseUrl   string
-	frontAddress string
-)
-
-func initEnvVariables() {
-	if godotenv.Load() != nil {
-		panic("Error loading .env file.")
-	}
-
-	ginMode = os.Getenv("APP_GIN_MODE")
-	apiPort = os.Getenv("APP_API_PORT")
-	apiBaseUrl = os.Getenv("APP_BASE_API_PATH")
-	frontAddress = os.Getenv("APP_FRONT_ADDRESS")
-}
-
-func initJWT() {
-	errInit := api.AuthMiddleware.MiddlewareInit()
-	if errInit != nil {
-		fmt.Printf(errInit.Error())
-	}
-}
-
-func initBasicRoutes(r *gin.RouterGroup) {
-	r.POST("/login/", api.AuthMiddleware.LoginHandler)
-	r.POST("/logout/", api.AuthMiddleware.LogoutHandler)
-	r.GET("/ping/", api.Ping)
-}
-
-func corsMiddleware(c *gin.Context) {
-	c.Writer.Header().Set("Access-Control-Allow-Origin", frontAddress)
-	c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")
-	c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, accept, origin, Cache-Control, X-Requested-With")
-	c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS, GET, PUT")
-	if c.Request.Method == "OPTIONS" {
-		c.AbortWithStatus(204)
-		return
-	}
-	c.Next()
-}
-
-func jwtProxyMiddleware(c *gin.Context) {
-	jwtToken, _ := c.Cookie("jwt")
-	c.Request.Header.Set("Authorization", fmt.Sprintf("Bearer %v", jwtToken))
-	c.Next()
-}
-
-func initArticlesRoutes(r *gin.RouterGroup) {
-	articlesRouter := r.Group("/articles")
-	articlesRouter.Use(corsMiddleware, api.AuthMiddleware.MiddlewareFunc())
-
-	articlesRouter.GET("/", articles.Get)
-	articlesRouter.GET("/:id", articles.GetUnique)
-	articlesRouter.POST("/:id", articles.Add)
-	articlesRouter.PUT("/:id", articles.Edit)
-	articlesRouter.DELETE("/:id", articles.Delete)
-}
-
-func initGin() {
-	r := gin.Default()
-	r.Use(jwtProxyMiddleware, corsMiddleware)
-
-	var router *gin.RouterGroup
-	if apiBaseUrl != "" {
-		router = r.Group(apiBaseUrl)
-	} else {
-		router = &r.RouterGroup
-	}
-
-	if ginMode == "release" {
-		gin.SetMode(ginMode)
-		api.AuthMiddleware.SecureCookie = true
-	}
-
-	initBasicRoutes(router)
-	initArticlesRoutes(router)
-
-	r.Run(":" + apiPort)
-}
-
-func main() {
-	initEnvVariables()
-	initGin()
-	initJWT()
-}

cmd/server/main.go

@@ -0,0 +1,150 @@
+package main
+
+import (
+	"RenewCMS/api"
+	validator "RenewCMS/api/pkg/validator"
+	"RenewCMS/internal/infrastructure/config"
+	"context"
+	"errors"
+	"fmt"
+	"log"
+	"net/http"
+	"os"
+	"os/signal"
+	"syscall"
+	"time"
+
+	"github.com/joho/godotenv"
+)
+
+var version = "dev"
+
+const (
+	readHeaderTimeout = 10 * time.Second
+	readTimeout       = 30 * time.Second
+	writeTimeout      = 60 * time.Second
+	idleTimeout       = 120 * time.Second
+	shutdownTimeout   = 10 * time.Second
+)
+
+var possibleEnvFileLocations = []string{".env", "../.env"}
+
+var requiredEnvVars = []string{
+	"PUBLIC_URL",
+	"JWT_SECRET",
+	"SMTP_EMAIL",
+	"SMTP_PASSWORD",
+	"SMTP_HOST",
+	"SMTP_PORT",
+}
+
+var envDefaults = map[string]string{
+	"ENVIRONMENT":                    "production",
+	"PORT":                           "8080",
+	"DB_FILE":                        "./data/renewcms.db",
+	"UPLOAD_DIR":                     "./data/uploads",
+	"AUTH_RATE_LIMIT_MAX_ATTEMPTS":   "5",
+	"AUTH_RATE_LIMIT_WINDOW_SECONDS": "60",
+	"TRUSTED_PROXIES":                "",
+}
+
+func main() {
+	if err := run(); err != nil {
+		log.Fatal(err)
+	}
+}
+
+func run() error {
+	initEnvVariables()
+
+	settings, err := config.NewSettingsFromEnv()
+	if err != nil {
+		return err
+	}
+
+	container, closeDb := api.InitContainer(settings)
+	defer closeDatabase(closeDb)
+	validator.InitValidator()
+
+	server := newServer(api.InitRoutes(container, settings), settings)
+	return serveUntilStopped(server, settings)
+}
+
+func initEnvVariables() {
+	loadEnvFile()
+	applyEnvDefaults()
+	ensureRequiredEnvVars()
+}
+
+func loadEnvFile() {
+	for _, envLocation := range possibleEnvFileLocations {
+		if godotenv.Load(envLocation) == nil {
+			return
+		}
+	}
+	log.Println("WARNING: Could not load any .env file")
+}
+
+func applyEnvDefaults() {
+	for envVar, value := range envDefaults {
+		if _, isSet := os.LookupEnv(envVar); !isSet {
+			_ = os.Setenv(envVar, value)
+		}
+	}
+}
+
+func ensureRequiredEnvVars() {
+	for _, envVar := range requiredEnvVars {
+		if _, isSet := os.LookupEnv(envVar); !isSet {
+			panic(fmt.Sprintf("Environment variable %s is not set", envVar))
+		}
+	}
+}
+
+func closeDatabase(closeDb func() error) {
+	if err := closeDb(); err != nil {
+		log.Println("error closing database:", err)
+	}
+}
+
+func newServer(handler http.Handler, settings config.Settings) *http.Server {
+	return &http.Server{
+		Addr:              ":" + settings.Port,
+		Handler:           handler,
+		ReadHeaderTimeout: readHeaderTimeout,
+		ReadTimeout:       readTimeout,
+		WriteTimeout:      writeTimeout,
+		IdleTimeout:       idleTimeout,
+	}
+}
+
+func serveUntilStopped(server *http.Server, settings config.Settings) error {
+	stopSignal, stop := signal.NotifyContext(context.Background(), os.Interrupt, syscall.SIGTERM)
+	defer stop()
+
+	serverErr := make(chan error, 1)
+	go listen(server, serverErr, settings)
+
+	select {
+	case err := <-serverErr:
+		return err
+	case <-stopSignal.Done():
+		return shutdown(server)
+	}
+}
+
+func listen(server *http.Server, serverErr chan<- error, settings config.Settings) {
+	log.Printf("RenewCMS %s (%s) listening on %s, public URL %s", version, settings.Environment, server.Addr, settings.PublicURL)
+	err := server.ListenAndServe()
+	if errors.Is(err, http.ErrServerClosed) {
+		err = nil
+	}
+	serverErr <- err
+}
+
+func shutdown(server *http.Server) error {
+	log.Println("shutting down...")
+	ctx, cancel := context.WithTimeout(context.Background(), shutdownTimeout)
+	defer cancel()
+	return server.Shutdown(ctx)
+}

docker-compose.yml

@@ -1,38 +0,0 @@
-services:
-  backend:
-    build:
-      context: ./
-      dockerfile: ./Dockerfile.backend
-    image: gohcms-backend
-    env_file:
-      - .env
-    ports:
-      - "${APP_API_PORT}:${APP_API_PORT}"
-    networks:
-      - back-net
-  frontend:
-    build:
-      context: ./
-      dockerfile: ./Dockerfile.frontend
-    image: gohcms-frontend
-    env_file:
-      - .env
-    ports:
-      - "${APP_FRONT_PORT}:80"
-    networks:
-      - front-net
-  db:
-    image: mongo:6.0.2
-    # ports:
-    #   - "27017:27017"
-    environment:
-      - MONGO_INITDB_DATABASE=gohcms
-    volumes:
-      - ./mongodbdata:/data/db
-      - ./mongo-init.js:/docker-entrypoint-initdb.d/mongo-init.js
-    networks:
-      - back-net
-
-networks:
-  front-net:
-  back-net:

docs/architecture.md

@@ -0,0 +1,39 @@
+# Architecture
+
+RenewCMS is a Go HTTP API and a Vue 3 SPA, shipped as a single binary.
+
+## Backend layering
+
+Dependencies point inward:
+
+```
+api/  ──▶  internal/infrastructure/useCases  ──▶  internal/domain  ◀──  internal/infrastructure/{persistence,mailer}
+```
+
+| Layer | Location | Rules |
+|---|---|---|
+| Domain | `internal/domain/<name>/` | Entities, `Err…` sentinel errors, `Repository` interfaces. Imports only the stdlib and other domain packages, with no GORM tags. |
+| Use cases | `internal/infrastructure/useCases/` | Application logic. Depends only on domain interfaces, never on persistence, mailer, GORM or `net/http`. |
+| Adapters | `internal/infrastructure/persistence/{models,mappers,repositories}`, `internal/infrastructure/mailer` | Implement a domain `Repository` (assert with `var _ domain.Repository = &X{}`). GORM structs stay in `models` and are converted by `mappers`. |
+| Delivery | `api/handlers/<name>/`, `api/router.go` | HTTP handlers receive use cases through `NewHandler(...)`. They never import persistence, mailer or GORM. |
+| Composition root | `api/dependecyInjection.go` | The only place that opens the DB, builds repositories and use cases, and lists models for `AutoMigrate`. |
+| Entry point | `cmd/server/main.go` | Env/config, HTTP server, graceful shutdown. |
+
+Nothing under `internal/` imports `api/`.
+
+## Frontend ↔ backend
+
+```
+web/ (Vue, Vite)
+  │  task build:web  (vue-tsc + vite build)
+  ▼
+internal/infrastructure/assets/dist/        gitignored build output
+  │  //go:embed all:dist   (assets_embed.go, default build)
+  ▼
+bin/renewcms  ──  /v1/*  API
+               ──  /healthz
+               ──  /*    SPA (api/handlers/frontend), index.html fallback
+```
+
+- **Production:** a single origin. The SPA calls the API with relative URLs, so the JWT cookie works without CORS. Files under `assets/` are content-hashed by Vite and cached for a year. `index.html` is never cached.
+- **Development:** built with `-tags nofrontend` (`assets_stub.go`, `assets.Dist == nil`). Vite serves the SPA on :5173 and proxies `/v1` to the API on :8080. See [development.md](development.md).

docs/configuration.md

@@ -0,0 +1,41 @@
+# Configuration
+
+RenewCMS reads its configuration from environment variables. On startup it also loads a `.env` file from the working directory (or its parent) if one exists. Real environment variables take precedence over `.env`.
+
+Copy [`.env.example`](../.env.example) to `.env` to get started. When a required variable is missing, the server refuses to start and names the variable.
+
+## Variables
+
+### Required
+
+| Name            | Description                                                                                                         | Example                    |
+|-----------------|---------------------------------------------------------------------------------------------------------------------|----------------------------|
+| `PUBLIC_URL`    | Public base URL of the site, including scheme and no trailing slash. Used for links in emails and in the startup log. | `https://cms.example.com`  |
+| `JWT_SECRET`    | Secret used to sign the auth JWT. Use a long random value; changing it logs everyone out.                            | `openssl rand -hex 32`     |
+| `SMTP_EMAIL`    | Sender address and SMTP username.                                                                                   | `noreply@example.com`      |
+| `SMTP_PASSWORD` | SMTP password.                                                                                                      |                            |
+| `SMTP_HOST`     | SMTP server host.                                                                                                   | `smtp.example.com`         |
+| `SMTP_PORT`     | SMTP server port.                                                                                                   | `465`                      |
+
+### Optional
+
+| Name                   | Default              | Description                                                                                                                                                                                                                     |
+|------------------------|----------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `ENVIRONMENT`          | `production`         | `production` or `development`. In `production` the auth cookie is `Secure`, so it is only sent over HTTPS. `development` turns on HTTP request logging.                                                                           |
+| `PORT`                 | `8080`               | Port the HTTP server listens on (all interfaces).                                                                                                                                                                               |
+| `DB_FILE`              | `./data/renewcms.db` | Path to the SQLite database file. Missing parent directories are created. The schema is migrated automatically at startup.                                                                                                      |
+| `UPLOAD_DIR`           | `./data/uploads`     | Directory where uploaded images are stored.                                                                                                                                                                                     |
+| `CORS_ALLOWED_ORIGINS` | *(empty)*            | Semicolon-separated list of origins allowed to call the API. When empty, no CORS headers are sent. That is the right setting whenever the SPA is served by RenewCMS itself (production) or through the Vite proxy (development). |
+| `AUTH_RATE_LIMIT_MAX_ATTEMPTS` | `5`           | Maximum number of requests a single client IP may send to `POST /v1/auth/login` or `POST /v1/auth/password-reset` within the window, tracked independently per route.                                                          |
+| `AUTH_RATE_LIMIT_WINDOW_SECONDS` | `60`        | Length, in seconds, of the fixed rate-limit window for the two routes above.                                                                                                                                                    |
+| `TRUSTED_PROXIES`      | *(empty)*            | Semicolon-separated list of exact IP addresses (no CIDR) of reverse proxies allowed to supply the client IP via `X-Real-IP` for `POST /v1/auth/login` and `POST /v1/auth/password-reset` rate limiting. When a request's connection address is not in this list, any `X-Real-IP` or `X-Forwarded-For` header it sends is ignored and the connection address is used instead. See [deployment.md](deployment.md).      |
+
+Relative paths are resolved against the process's working directory. In production, use absolute paths (see [deployment.md](deployment.md)).
+
+## Adding a variable
+
+1. Read it in the code where it is needed (infrastructure or `api/`, never `internal/domain`).
+2. Register it in [`cmd/server/main.go`](../cmd/server/main.go): add it to `requiredEnvVars` if it is required, or to `envDefaults` if it has a default.
+3. Add it to [`.env.example`](../.env.example) and to the tables above.
+
+Never hardcode a secret, and never commit `.env`.

docs/deployment.md

@@ -0,0 +1,149 @@
+# Deployment
+
+RenewCMS ships as **one self-contained executable**. It serves:
+
+| Path       | What                                    |
+|------------|-----------------------------------------|
+| `/v1/*`    | JSON API                                |
+| `/healthz` | Liveness check, returns `200 ok`        |
+| `/*`       | The Vue SPA (embedded), with fallback to `index.html` for client-side routes |
+
+Its only runtime state is the SQLite database (`DB_FILE`) and the uploads directory (`UPLOAD_DIR`). Nothing else needs to be installed on the server.
+
+## 1. Build
+
+On any machine with the [dev prerequisites](development.md#prerequisites):
+
+```sh
+task build     # this OS/arch → bin/renewcms[.exe]
+task release   # all targets  → bin/renewcms_<version>_<os>_<arch>[.exe]
+```
+
+The frontend is built once and embedded into every binary. The binaries are static (`CGO_ENABLED=0`), so a Linux build runs on any distribution. The version comes from `git describe`: tag a release (`git tag v1.2.0`) before building, and the binary logs its version at startup.
+
+## 2. Lay out the server
+
+The following is a suggested layout for Linux:
+
+```
+/opt/renewcms/renewcms          the binary
+/etc/renewcms/renewcms.env      configuration (chmod 600, owned by root)
+/var/lib/renewcms/              data: renewcms.db, uploads/  (owned by the service user)
+```
+
+```sh
+sudo useradd --system --home /var/lib/renewcms --shell /usr/sbin/nologin renewcms
+sudo install -d -o renewcms -g renewcms /var/lib/renewcms
+sudo install -D -m 755 bin/renewcms_v1.2.0_linux_amd64 /opt/renewcms/renewcms
+sudo install -D -m 600 /dev/null /etc/renewcms/renewcms.env   # then edit it
+```
+
+`/etc/renewcms/renewcms.env` looks like this (see [configuration.md](configuration.md) for every variable):
+
+```sh
+ENVIRONMENT=production
+PUBLIC_URL=https://cms.example.com
+PORT=8080
+DB_FILE=/var/lib/renewcms/renewcms.db
+UPLOAD_DIR=/var/lib/renewcms/uploads
+JWT_SECRET=<openssl rand -hex 32>
+SMTP_EMAIL=noreply@example.com
+SMTP_PASSWORD=...
+SMTP_HOST=smtp.example.com
+SMTP_PORT=465
+```
+
+## 3. Run it as a service (systemd)
+
+`/etc/systemd/system/renewcms.service`:
+
+```ini
+[Unit]
+Description=RenewCMS
+After=network-online.target
+Wants=network-online.target
+
+[Service]
+User=renewcms
+Group=renewcms
+WorkingDirectory=/var/lib/renewcms
+EnvironmentFile=/etc/renewcms/renewcms.env
+ExecStart=/opt/renewcms/renewcms
+Restart=on-failure
+# RenewCMS shuts down gracefully on SIGTERM (up to 10 s to finish requests and close the DB)
+TimeoutStopSec=15
+
+NoNewPrivileges=true
+ProtectSystem=strict
+ProtectHome=true
+PrivateTmp=true
+ReadWritePaths=/var/lib/renewcms
+
+[Install]
+WantedBy=multi-user.target
+```
+
+```sh
+sudo systemctl daemon-reload
+sudo systemctl enable --now renewcms
+journalctl -u renewcms -f
+curl -fsS http://localhost:8080/healthz
+```
+
+On Windows, register the binary as a service with a wrapper such as [NSSM](https://nssm.cc/) or [WinSW](https://github.com/winsw/winsw), and set the same environment variables.
+
+## 4. Put HTTPS in front
+
+With `ENVIRONMENT=production` the auth cookie is `Secure`, so **the site must be served over HTTPS**. Terminate TLS in a reverse proxy and keep RenewCMS on localhost.
+
+[Caddy](https://caddyserver.com) handles certificates automatically:
+
+```caddyfile
+cms.example.com {
+	reverse_proxy localhost:8080 {
+		header_up X-Real-IP {remote_host}
+	}
+}
+```
+
+nginx:
+
+```nginx
+server {
+    listen 443 ssl http2;
+    server_name cms.example.com;
+    # ssl_certificate ... (e.g. certbot)
+
+    client_max_body_size 20m;   # image uploads
+
+    location / {
+        proxy_pass http://127.0.0.1:8080;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}
+```
+
+If RenewCMS runs on the same host as the proxy, consider firewalling port 8080.
+
+Either way, set `TRUSTED_PROXIES` (see [configuration.md](configuration.md)) to the proxy's own address as seen by RenewCMS, typically `127.0.0.1` when the proxy and RenewCMS share a host, so the login/password-reset rate limiter honors the forwarded client IP instead of the proxy's own address.
+
+## Backups
+
+Everything worth backing up is under the data directory. Take a consistent SQLite copy while the service is running:
+
+```sh
+sqlite3 /var/lib/renewcms/renewcms.db ".backup '/backups/renewcms-$(date +%F).db'"
+rsync -a /var/lib/renewcms/uploads/ /backups/uploads/
+```
+
+Alternatively, run `systemctl stop renewcms`, copy the directory, and run `systemctl start renewcms`.
+
+## Upgrading
+
+1. Back up (see above). The schema is migrated automatically at startup (GORM `AutoMigrate`), and there is no down-migration.
+2. Replace `/opt/renewcms/renewcms` with the new binary.
+3. Run `sudo systemctl restart renewcms`, then check `journalctl -u renewcms` for the new version line.
+
+To roll back, put the previous binary back and restore the database backup if the schema changed.

docs/design/README.md

@@ -0,0 +1,39 @@
+# RenewCMS design
+
+The visual spec of record for the back-office SPA and the transactional emails, exported from Claude Design. `features/` stays the behavioural spec; if the two disagree, stop and ask. Agents read this folder and never edit it; a design change is a new export.
+
+## Files
+
+| File | What it holds |
+|---|---|
+| `routes.md` | Every route: layout, auth requirement, page component, API calls |
+| `components.md` | The component inventory with its Nuxt UI mapping, props, emits and slots, then the full component and primitive specs |
+| `states.md` | Every state of every screen with its trigger, and the HTTP-status-to-copy table |
+| `screens/<screen>.md` | One file per screen: route, API, and per state the exact copy, fields, alerts, dialogs and toasts |
+| `foundations.md` | Colors, contrast, type, spacing, motion and icons, and where the token files are |
+| `emails.md` | The two email templates and their variables |
+| `source/` | The raw Claude Design export. Open the `.dc.html` boards in a browser for the drawings (they load `support.js` locally and fonts from Google). |
+
+## Screens
+
+| Screen | Route | States | Board |
+|---|---|---|---|
+| [Log in](screens/log-in.md) | `/login` | 9 | `source/RenewCMS Screens Auth.dc.html` |
+| [Register](screens/register.md) | `/register` | 6 | `source/RenewCMS Screens Auth.dc.html` |
+| [Pending](screens/pending.md) | `/register/pending` | 6 | `source/RenewCMS Screens Auth.dc.html` |
+| [Verify](screens/verify.md) | `/register/validate?c=CODE` | 6 | `source/RenewCMS Screens Auth.dc.html` |
+| [Forgot password](screens/forgot-password.md) | `/register/reset/request` | 6 | `source/RenewCMS Screens Auth.dc.html` |
+| [Reset password](screens/reset-password.md) | `/register/reset/validate?c=CODE&email=EMAIL` | 7 | `source/RenewCMS Screens Auth.dc.html` |
+| [Boot](screens/boot.md) | `any route, first load` | 1 | `source/RenewCMS Screens Back-office.dc.html` |
+| [Home](screens/home.md) | `/home` | 4 | `source/RenewCMS Screens Back-office.dc.html` |
+| [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` | 19 | `source/RenewCMS Screens Back-office.dc.html` |
+| [Integration](screens/integration.md) | `/integration` | 2 | `source/RenewCMS Screens Back-office.dc.html` |
+| [Global](screens/global.md) | `any route` | 4 | `source/RenewCMS Screens Back-office.dc.html` |
+
+## Other boards
+
+- `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 markdown here was generated from.
+- `source/RenewCMS Directions.dc.html`: the three brand directions (history only).

docs/design/components.md

@@ -0,0 +1,669 @@
+# Components
+
+## Inventory
+
+| Component | Nuxt UI base | Props | Emits | Slots | Used on |
+|---|---|---|---|---|---|
+| 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 | none | logout | none | DashboardShell |
+| PageHeader | UPageHeader | title, description? | none | actions, meta | Home, Articles, Integration |
+| ArticleStatusBadge | UBadge | online: boolean, size?: 'sm'\|'md', pending?: 'publish'\|'unpublish' | none | none | Home, Articles, Editor |
+| ArticleTable | UTabs, UInput, UTable, UDropdownMenu, UPagination | articles: Article[], loading, busyIds: Set<number> | publish, unpublish, delete, copy-url | empty, toolbar-right | Articles (md and up) |
+| ArticleCardList | ULink, UDropdownMenu (custom list) | same as ArticleTable | same as ArticleTable | empty | Articles (below md) |
+| EmptyState | UEmpty | variant: 'no-articles'\|'no-results'\|'no-drafts'\|'no-online', query? | action | none | Home, Articles |
+| ConfirmDialog | UModal via useOverlay | title, description, confirmLabel, pendingLabel, tone: 'danger'\|'neutral', action: () => Promise<void> | close(confirmed) | none | Articles, Editor, Pending |
+| NewArticleModal | UModal, UForm, UFormField, UInput, UTextarea | none | created(article) | none | Home, Articles, /article/new |
+| ArticleEditor | UEditor, UEditorToolbar, UDropdownMenu (+ custom Indent extension) | modelValue: string, articleId: number, disabled? | update:modelValue, request-image | none | Editor |
+| ImageUploader | UModal, UFileUpload, UProgress | articleId: number | uploaded(location), close | none | Editor |
+| SaveStatus | custom (span + UButton) | state: 'clean'\|'dirty'\|'saving'\|'saved'\|'error'\|'offline', savedAt?: Date | retry | none | Editor |
+| PublishControl | UButton | online: boolean, dirty: boolean, pending?: string, disabled? | publish, unpublish | none | Editor |
+| ArticleDetails | UCard (desktop) / USlideover (mobile) | article: Article | copy-url | none | Editor |
+| CharacterCounter | custom | value: number, max: number, min?: number, warnAt?: number | none | none | NewArticleModal, Editor, Register |
+| PasswordStrengthHint | custom (in UFormField #help) | rules: { label, met }[], showErrors: boolean | none | none | Register, Reset |
+| ResultPanel | custom + UButton | tone: 'success'\|'error'\|'info', icon, title, description, actions: ButtonProps[] | none | default | Pending, Verify, Reset request, Reset, Register (403) |
+| CodeBlock | custom (shiki) + UButton | code: string, lang: string, label? | none | none | Integration |
+| EndpointCard | UCard, UBadge, UTabs | method: 'GET', path, description, examples: { fetch, curl, response } | none | none | Integration |
+| ErrorView | custom + UButton | kind: 'not-found'\|'error' | retry | none | Not found, error boundary |
+| OfflineBanner | UBanner | none (reads useOnline) | none | none | DashboardShell |
+| AppBoot | USkeleton inside DashboardShell | none | none | none | First load of any verified route |
+
+Composables behind these components: `useSession`, `useApi`, `useArticles` (the list cache plus actions shared by the table, cards and editor), `useArticleDraft` (dirty state, save, and the sessionStorage mirror), `useImageUpload` (XHR with progress) and `useRetryAfter` (429 countdown).
+
+## Product component specs
+
+Extracted from `source/RenewCMS Components Product.dc.html`; open it for the drawings.
+
+## Components: product
+
+These are the RenewCMS components, built from the primitives on the first page . Each one lists the Nuxt UI parts it's made from, its props, emits and slots, every state, and keyboard and responsive behavior. Components marked custom have no Nuxt UI equivalent.
+
+### AuthShell
+
+One centered card for every public screen. The logo sits above the title, and the form or ResultPanel goes in the slot. Footer links and the theme select sit outside the card, so the card itself stays about one task.
+
+Log in Welcome back. Log in to manage your articles.
+
+default slot
+
+Forgot password? System
+
+Built from Custom layout component AuthShell.vue : a UPageCard variant="outline" inside a centered main , with AppLogo , and UColorModeSelect size="sm" in the footer. Forms inside it use UForm rather than UAuthForm , because every screen needs states (such as 403, 429 and an inline login during verification) that UAuthForm doesn't expose.
+
+Props, slots Props title: string , description?: string . Slots default , notice (an alert above the title, for session expired or password changed), footer (links). No emits.
+
+A11y The title is the page's h1 , and document.title becomes "Log in · RenewCMS". On route change, focus moves to the h1 . The logo is alt="RenewCMS" and isn't a link, since there's nothing public to go back to.
+
+Responsive 400 px card from sm up, with its top 12 vh from the top. Below sm , the card loses its border and padding drops to 20 px, filling the screen on --ui-bg , and fields and buttons use xl .
+
+### DashboardShell
+
+The sidebar has three destinations, 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
+
+Home
+
+Articles
+
+Integration
+
+marta Owner
+
+System
+
+Light
+
+Dark
+
+Log out
+
+MA marta
+
+Articles How we price a bathroom renovation
+
+page body
+
+MA
+
+Articles
+
+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.
+
+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.
+
+A11y The first Tab stop is a "Skip to content" link. The sidebar is a nav labeled "Main", and the current page gets aria-current="page" . In the collapsed rail, items show tooltips and keep their aria-label . The collapse button carries aria-expanded . The mobile slideover traps focus and closes after navigating.
+
+Bend The active nav item uses a sand fill with ink text instead of Nuxt UI's primary-tinted background and left indicator. The shell is set up for this in ui.config.ts .
+
+### PageHeader
+
+Articles Everything you've written, online and in draft.
+
+Connect your website New article
+
+Articles Everything you've written, online and in draft.
+
+New article
+
+Built from UPageHeader :title :description , with actions in the #links slot. The ui override is { root: 'py-0 border-0', title: 'text-xl', description: 'text-sm text-muted mt-0.5' } , which brings Nuxt UI's marketing-size header down to dashboard density.
+
+Props, slots title , description? , slot actions (the primary action goes last, so it sits on the right), slot meta (for example, a status badge next to the title in the editor).
+
+Responsive Below md , the actions wrap under the text. The primary action goes full width at 44 px, and secondary actions move into the navbar's overflow menu.
+
+### ArticleStatusBadge
+
+Online
+
+Draft
+
+Online
+
+Draft
+
+Publishing…
+
+Unpublishing…
+
+Built from UBadge . Online: color="neutral" variant="solid" icon="i-lucide-globe" . Draft: color="neutral" variant="outline" icon="i-lucide-pencil-line" . Status is shown by the fill, the icon and the word, never by color alone.
+
+Props online: boolean , size?: 'sm' | 'md' (sm in lists, md in the editor header), pending?: 'publish' | 'unpublish' (shows the -ing label with a spinner while the request runs). No emits, because it isn't interactive.
+
+### ArticleTable
+
+Search, filter tabs, a sortable table and row actions. Everything happens in the browser on the list it has already loaded. Below md , the table becomes a card list with the same data and actions.
+
+All 6 Online 4 Drafts 2
+
+Search by title
+
+Title Status Created Updated
+
+Online Draft
+
+Built from UTabs + UInput type="search" + UTable (desktop), or a custom ArticleCardList of ULink rows (mobile), switched with useBreakpoints at md . Each row has a UDropdownMenu , and the row actions go through useArticleActions() , which shares one set of calls between the table, the list and the editor.
+
+Props, emits Props articles: Article[] , loading: boolean , busyIds: Set<number> . Emits publish(id) , unpublish(id) , delete(article) , copy-url(id) . Search, tab and sort state lives in the URL query ( ?q=&status=&sort= ). Slots #empty , #toolbar-right .
+
+Behavior Search is case-insensitive and ignores accents, and it matches anywhere in the title. It updates on input, debounced 120 ms. Tab counts always reflect the full list. Dates within 7 days are relative ("2 hours ago"); older ones are absolute ("18 Aug 2026"), with the full timestamp in a title attribute. Clicking a row opens the editor, except clicks on the menu.
+
+States Loading (5 skeleton rows), empty, no results, a filter tab with nothing in it, a row busy, an action failed (toast with Retry, row reverts), and a row vanished (a 404 on any action removes the row and shows an info toast). Row actions are never optimistic: the row updates when the 200 arrives.
+
+A11y The table has a visually hidden caption, "Articles, sorted by last updated, newest first". Each row's menu button is named "Actions for How we price a bathroom renovation". After a search, a polite live region announces "3 articles".
+
+### EmptyState
+
+No articles yet Write your first one. It stays a draft until you publish it. New article
+
+No articles match "tiles" Check the spelling, or search for a shorter part of the title. Clear search
+
+No drafts Everything you've written is online. New article
+
+Nothing is online yet Publish a draft and it will appear on your website. Show drafts
+
+Built from UEmpty :icon :title :description :actions variant="naked" , placed in the UTable #empty slot or on the page. The icon tile is overridden to rounded-none bg-elevated .
+
+Props variant: 'no-articles' | 'no-results' | 'no-drafts' | 'no-online' , query?: string . Emits action . Each variant has fixed copy, and the search term is shown in quotes, cut to 40 characters.
+
+A11y The title is an h2 . "No results" is announced through the table's live region. Clear search returns focus to the search field.
+
+### ConfirmDialog
+
+Delete this article? "Winter checklist for timber windows" and its 3 images will be deleted. This can't be undone.
+
+Cancel Delete article
+
+Delete this article? "Winter checklist for timber windows" and its 3 images will be deleted. This can't be undone.
+
+Couldn't delete the article, so it's still there. Try again in a moment.
+
+Cancel Deleting…
+
+Left: default. Right: after a failed attempt (the error appears inline), with the retry running (loading).
+
+Built from UModal opened through useOverlay().create(ConfirmDialog) . open() returns a promise that resolves once the action succeeds or the dialog is cancelled. The action runs inside the dialog, so errors show there instead of in a toast behind the overlay.
+
+Props, emits title , description , confirmLabel , pendingLabel , tone: 'danger' | 'neutral' , action: () => Promise<void> . Emits close(confirmed: boolean) . The delete description comes from the title plus images.length , and reads "and its image" for 1 and just the title for 0.
+
+Other uses Cancel registration: "Cancel your registration?" / "Your account will be deleted. You can register again with the same or a different email." / "Cancel registration" / "Keep my account". Leaving with unsaved changes uses the neutral tone.
+
+A11y role="alertdialog" . Focus starts on Cancel, and Enter doesn't confirm by default. While the action runs, the dialog can't be dismissed, both buttons are disabled, and aria-busy is set. On success, focus goes to the next row, or the page heading if there isn't one.
+
+### ArticleEditor, SaveStatus, PublishControl, CharacterCounter
+
+The editor is made of four components that work together. The header holds the read-only title, status, SaveStatus, Save and PublishControl. A sticky toolbar sits above the writing surface, which uses the content type scale. The counter sits at the foot.
+
+How we price a bathroom renovation Draft
+
+Unsaved changes
+
+Save
+
+Save and publish
+
+Every bathroom is different, but the way we price them isn't. We start with a visit, measure everything, and write down what stays .
+
+What goes into the price
+
+Stripping out and making good
+
+Plumbing moves, if any
+
+Details
+
+Created 12 Mar 2026, 09:14 Updated Today, 11:02 ID 12 Images 3
+
+Public API URL /v1/article/12 Returns 404 until the article is online.
+
+4 318 / 10 000
+
+Unsaved changes dirty, Save enabled
+
+Saving… saving, Save disabled
+
+Saved at 11:02 saved, Save disabled
+
+Save failed Retry error, changes kept
+
+Publish draft, saved
+
+Unpublish online
+
+9 240 / 10 000 body ≥ 90%
+
+10 214 / 10 000 214 characters over. Shorten the text or remove an image. Formatting counts too. over limit, Save disabled
+
+ArticleEditor UEditor v-model content-type="html" :extensions + UEditorToolbar :editor :items layout="fixed" . TipTap v3 StarterKit already includes Underline and Link. TextAlign handles alignment and Image handles images. Formatting is a UDropdownMenu with Paragraph and Headings 1–4 ( h1 is kept because the public site controls how the title appears). Indent and outdent call sinkListItem / liftListItem in lists. For paragraphs, a small custom Indent extension writes data-indent="1–4" , because TipTap has no paragraph indent. Clear formatting runs unsetAllMarks().clearNodes() . The editor surface gets class="article-content" .
+
+Props, emits modelValue: string (HTML), articleId: number , disabled? . Emits update:modelValue , request-image . Exposes insertImage(src, alt) and focus() . The toolbar reflects the active state (bold is on at the cursor) using aria-pressed .
+
+SaveStatus A custom inline span aria-live="polite" , driven by useArticleDraft() : 'clean' | 'dirty' | 'saving' | 'saved' | 'error' . Saved shows the time and switches to "Saved 5 min ago" after an hour. The error state's Retry is a UButton size="xs" variant="outline" . Ctrl/⌘ S saves. Leaving with unsaved changes triggers onBeforeRouteLeave (ConfirmDialog, neutral tone) and beforeunload . There is no autosave , so the owner controls exactly what is sent. The draft is mirrored to sessionStorage so it survives a session expiry.
+
+PublishControl A single UButton . Draft → primary "Publish"; draft with unsaved changes → "Save and publish" (PATCH body, then PATCH publish; if the save fails, it doesn't publish); online → outline "Unpublish". Unpublishing doesn't save pending changes, so the draft edits stay pending. Toasts: "Article published", with the description "Title" is now online. ; "Article unpublished", It's a draft again and hidden from your website.
+
+CharacterCounter A custom component in mono type. Props value: number , max: number , min?: number , warnAt?: number (default 0.9). The title uses [...str].length , so accents and emoji count as one, matching Go's validator, which counts runes. The body uses the HTML string length, which is what the API receives. The warning and error states add an icon and text, not just color. A visually hidden live region announces the change only when a threshold is crossed, not on every keystroke.
+
+Responsive Below lg , the details panel becomes a right slideover, opened with i-lucide-panel-right . Below md , the header wraps: back, title and badge on the first row, then SaveStatus and the counter. Save and Publish move to a sticky bottom bar (44 px). The toolbar scrolls horizontally with fade edges and keeps undo, redo and the image button pinned at the start.
+
+### ImageUploader
+
+Opens from the editor's image button in a small modal. Files are checked in the browser before anything is sent. After a successful upload the image goes in at the cursor and the modal closes.
+
+Drop an image here Choose file PNG, JPEG, WEBP, SVG · max 10 MB
+
+idle
+
+Drop to upload
+
+dragging over
+
+north-wall.jpg 62%
+
+Uploading 2.4 of 3.9 MB
+
+uploading
+
+Image added
+
+success, closes after 600 ms
+
+"plan.pdf" can't be used Use a PNG, JPEG, WEBP or SVG image, up to 10 MB. Choose another file
+
+rejected: type or size
+
+Upload failed The server didn't accept the file. Your article hasn't changed. Try again
+
+server error
+
+Built from UModal title="Add an image" › UFileUpload accept="image/png,image/jpeg,image/webp,image/svg+xml" :multiple="false" layout="list" + UProgress size="xs" . Uploads go through XMLHttpRequest , because fetch has no upload progress, as FormData with the field name file . The 201 location is inserted with insertImage(location, '') .
+
+Validation Before uploading, the uploader checks both the MIME type and the file extension, and that size ≤ 10 × 1024 × 1024 . The size error names the file size: "north-wall.tif is 14.2 MB. Images can be up to 10 MB." A server 400 shows the same message as a client-side rejection.
+
+Props, emits articleId: number . Emits uploaded(location) , close . A 401 hands off to the global session flow. A 404 means the article was deleted, which the editor handles.
+
+A11y, touch The drop zone is a labeled button, so Enter opens the file picker. Progress is exposed as role="progressbar" with aria-valuenow , and the result is announced. On touch screens the drop text is hidden and "Choose file" becomes the main action. Dropping a file directly onto the editor surface also opens the uploader with that file.
+
+### CodeBlock and EndpointCard
+
+GET /v1/article/{id}
+
+Returns one article. Drafts return 404 to anonymous callers, the same as an id that doesn't exist.
+
+fetch curl Response
+
+JavaScript Copied
+
+const res = await fetch( 'https://cms.renew.example/v1/article/12' )
+
+if (res.status === 404 ) return notFound()
+
+const article = await res.json()
+
+CodeBlock This is a custom component, because Nuxt UI's prose code blocks rely on Nuxt Content and don't work in a plain Vue app. Highlighting is done ahead of time with shiki (a dual github-light / github-dark theme remapped to the semantic colors: keywords info, strings success, numbers warning, comments muted). The header shows the language label and a ghost copy UButton , which switches to "Copied" for 2 s through useClipboard . Props code , lang , label? . Long lines scroll horizontally and never wrap.
+
+EndpointCard UCard › a method UBadge (GET is solid ink) + the path in mono + a description, with UTabs (fetch, curl, Response) showing a CodeBlock each. Props method , path , description , examples: { fetch, curl, response } . Snippets use the current location.origin .
+
+A11y The copy button is named "Copy JavaScript example", and its result is announced. Code is a focusable pre ( tabindex="0" ) so keyboard users can scroll it. Syntax colors pass 4.5:1 on --ui-bg-elevated in both themes.
+
+### PasswordStrengthHint
+
+At least 8 characters not met yet
+
+At least 8 characters met
+
+At least 8 characters not met on submit
+
+Passwords match reset screen only
+
+Built from A custom ul in the password UFormField 's #help slot. Props rules: { label: string, met: boolean }[] , showErrors: boolean . There is no meter or score, because the API only requires 8 characters.
+
+A11y The list is the field's aria-describedby . Each item has hidden text reading "met" or "not met". A change is announced once, when the rule becomes met.
+
+### ResultPanel
+
+Check your email If an account exists for that email, a password reset link has been sent. The link expires in 1 hour.
+
+Back to log in
+
+This link has expired Reset links work once, for 1 hour. Request a new one and use it within the hour.
+
+Request a new link
+
+Too many attempts For your security, wait a moment before trying again. You can try again in 0:42 .
+
+Try again in 0:42 API pending
+
+Built from A custom component that fills AuthShell's slot: an icon tile, h1 title, description and UButton block size="lg" actions. Props tone: 'success' | 'error' | 'info' , icon , title , description , actions: ButtonProps[] . Slot default for extras such as the inline login on verify.
+
+A11y When the panel replaces a form, focus moves to its title and the panel is role="status" , or role="alert" for errors. The countdown updates every second visually but is announced only at the start and when it reaches zero.
+
+### Error pages and offline banner
+
+You're offline. You can keep writing, but saving and publishing will wait until you're back online.
+
+404 Page not found The link may be mistyped, or the page may have moved. Go to Home All articles
+
+Error Something went wrong This page couldn't load. Your saved work is safe. Try again, and if it keeps happening, restart the RenewCMS server. Try again Go to Home
+
+Built from UError isn't used because it's built for Nuxt's error.vue . Instead there's a custom ErrorView (props kind: 'not-found' | 'error' ), rendered inside UDashboardPanel when the user is logged in and inside AuthShell otherwise. The offline banner is a UBanner color="neutral" at --z-banner , shown and hidden with useOnline() . Once the connection returns it switches to "You're back online" for 3 s.
+
+A11y The error title is the page h1 and gets focus on render. The banner is role="status" , and it can't be dismissed while offline. The offline state blocks Save and Publish and says why in their tooltip.
+
+## Themed primitives
+
+Extracted from `source/RenewCMS Components Primitives.dc.html`.
+
+## Components: themed primitives
+
+These are Nuxt UI components with the Ledger config applied. Every specimen reads the real --ui-* variables, so the theme switch on the right changes the whole page. The product components are on a second page .
+
+### Button
+
+There are five roles. A screen gets one primary button. Danger is used only for irreversible actions, and always inside a confirmation step.
+
+New article primary
+
+Cancel secondary
+
+Preview ghost
+
+Delete article danger
+
+icon-only
+
+Save sm 28
+
+Save md 32
+
+Save lg 40
+
+Save xl 44, touch
+
+Publish default
+
+Publish hover
+
+Publish focus-visible
+
+Publish active
+
+Publish disabled
+
+Publishing… loading
+
+Delete article danger hover
+
+Cancel secondary hover
+
+Preview ghost hover
+
+Nuxt UI UButton . Primary color="primary" variant="solid" · secondary color="neutral" variant="outline" · ghost color="neutral" variant="ghost" · danger color="error" variant="solid" · icon-only square icon="i-lucide-ellipsis" :aria-label wrapped in UTooltip .
+
+Loading :loading swaps the leading icon for i-lucide-loader-circle and disables the button. The label changes to the -ing form ("Publishing…") and the button width stays fixed, so the layout doesn't jump. loading-auto is used on async @click handlers.
+
+Keyboard, ARIA Native <button> , activated with Enter or Space. Icon-only buttons need an aria-label . Loading sets aria-busy="true" . Disabled buttons stay focusable only when a tooltip explains why they're disabled.
+
+Responsive md on desktop, xl (44 px) below md . Primary page actions go full width in sticky footers on 390 px screens.
+
+Bend Disabled opacity is 40% instead of Nuxt UI's 75%, because a 75% black button still looks clickable. Hover darkens the button one step instead of using Nuxt UI's /75 alpha, so the label keeps its contrast.
+
+### Input, password input, textarea
+
+One outline style for every field. Focus adds a 2 px ink ring inside the edge. Errors turn the edge brick red and always come with a message, never color alone.
+
+marta default, placeholder
+
+marta hover
+
+mar focus
+
+ma error
+
+owner@renew.example disabled / read-only
+
+plaster leading icon, clear
+
+•••••••••• password, hidden
+
+limewash2026 password, shown
+
+A short first paragraph. You can keep writing in the editor. textarea, autoresize 3–8 rows
+
+Nuxt UI UInput variant="outline" color="primary" , :highlight bound to the field error so the edge turns red. The search field is icon="i-lucide-search" with a #trailing clear UButton . UTextarea autoresize :rows="3" :maxrows="8" .
+
+Password UInput :type="shown ? 'text' : 'password'" with a #trailing ghost UButton . aria-label reads "Show password" or "Hide password", with aria-pressed and aria-controls . autocomplete is current-password on log in and new-password on register and reset. Showing the password never clears or moves focus.
+
+States Default, hover (edge goes to muted), focus (2 px ink), filled, error, disabled, read-only (same look as disabled but selectable and focusable, used for the email on the reset screen). Fields are 16 px text below md .
+
+Placeholder Placeholders use --ui-text-muted (5.7:1) and only show an example. The label always carries the meaning.
+
+### Form field
+
+A label on top, then the control, then the help text or the error in the same spot. The right-hand hint slot holds the character counter. Every field in the product is required, so none are marked.
+
+Username 5 / 20
+
+marta 3 to 20 characters. You'll use it to log in.
+
+Username 2 / 20
+
+ma Use at least 3 characters.
+
+Email marta@renew Enter a full email address, like name@example.com.
+
+Nuxt UI UForm :schema :state @submit + UFormField name label help , with the counter in the #hint slot. Validation runs on blur and on submit, then on every input once a field has an error, so the error clears as soon as it's fixed. The schema mirrors the API rules exactly, so a validator 400 shouldn't reach the UI.
+
+ARIA Nuxt UI links the label and aria-describedby (help or error) and sets aria-invalid . On a failed submit, focus moves to the first invalid field. Error text sits in the help slot, so there is no layout shift.
+
+### Checkbox, switch, select
+
+All three are square. The Preview toggle in the editor is the only switch. The select sets sort order in the mobile article list. No screen needs a checkbox yet, but it's themed so it matches if one gets added.
+
+Off
+
+On
+
+Focus
+
+Disabled
+
+Preview off
+
+Preview on
+
+Focus
+
+Disabled
+
+Newest updated first
+
+Newest updated first
+
+Oldest updated first
+
+Nuxt UI UCheckbox , USwitch (slots base and thumb set to rounded-none ), USelect :items value-key="value" , whose content uses --shadow-popover .
+
+Keyboard Space toggles a checkbox or switch. The select opens with Enter, Space or ↓, moves with the arrow keys and type-ahead, and closes with Esc, returning focus to the trigger. The switch uses role="switch" and aria-checked , and its visible label is its name.
+
+### Badge
+
+Badges show status or a count. They never replace a button. Solid ink is for the one state that matters most in a list. Soft semantic badges are for system messages.
+
+Online
+
+Draft
+
+12
+
+success
+
+info
+
+warning
+
+error
+
+GET
+
+Online · md
+
+Nuxt UI UBadge . Solid ink color="neutral" variant="solid" · outline color="neutral" variant="outline" · count color="neutral" variant="soft" size="sm" · semantic variant="soft" . Sizes are sm (22 px, in tables) and md (26 px, in the editor header).
+
+ARIA Badges are text, not live regions. When a status changes, the announcement comes from the toast.
+
+### Alert
+
+Alerts are for messages that belong to a page and stay until the situation changes. Anything that confirms an action someone just took is a toast instead.
+
+Your session expired Log in again to pick up where you left off.
+
+Password changed Log in with your new password.
+
+Almost at the length limit 9 240 of 10 000 characters used. Images and formatting count too.
+
+Couldn't load your articles Check your connection and try again.
+
+Try again
+
+Nuxt UI UAlert variant="soft" :color :icon :title :description :actions . close only on alerts that are safe to dismiss (password changed, session expired). The error alert has no close button because its retry is the way out.
+
+ARIA Info, success and warning use role="status" and error uses role="alert" . Alerts that are already there when the page loads aren't announced again. The description text uses --ui-text-toned rather than the semantic color, so long text stays readable.
+
+### Toast
+
+Toasts confirm that an action finished or failed. Each one has a short title and, at most, one action.
+
+Article published "Winter checklist for timber windows" is now online.
+
+That article no longer exists It was deleted somewhere else, so we removed it from the list.
+
+Couldn't unpublish The server didn't respond.
+
+Retry
+
+Placement Bottom right on desktop, 24 px from the edges. Bottom center at full width minus 16 px on mobile, above the sticky action bar.
+
+Duration Success and info close after 5 s. Errors with retry stay until dismissed or retried. The timer pauses on hover and on focus.
+
+Stack At most 3 visible, newest at the bottom. A fourth pushes out the oldest non-error toast. Repeating the same action replaces its toast instead of adding a new one.
+
+Nuxt UI UApp :toaster="{ position: 'bottom-right', duration: 5000, max: 3 }" . Toasts are raised with useToast().add({ id, title, description, color, icon, actions, duration }) , where id is the action plus the article id so a repeat replaces the old toast. Errors use duration: 0 . The progress bar is off.
+
+ARIA The Reka toast region announces politely, and errors assertively. F8 jumps to the region. Esc closes the focused toast.
+
+### Modal and slideover
+
+Modals ask a question or hold a short form. Slideovers carry navigation and side panels on small screens. Both sit over a 40% ink overlay.
+
+Leave without saving? You have changes to "How we price a bathroom renovation" that haven't been saved.
+
+Discard changes Keep editing
+
+Details
+
+Created 12 Mar 2026, 09:14 Updated Today, 11:02 ID 12 Images 3
+
+Nuxt UI UModal :title :description with the #footer slot for actions, width sm:max-w-md . Opened programmatically with useOverlay().create(ConfirmDialog) . USlideover side="right" for details, side="left" for mobile navigation (built into UDashboardSidebar ).
+
+Button order The safe action is primary and sits on the right, where the eye lands. In destructive confirmations, the danger button is on the right and Cancel on the left (see ConfirmDialog). On mobile the buttons stack full width, with the primary on top.
+
+Keyboard, ARIA Focus is trapped and starts on the least destructive button. Esc and the overlay close it unless it's :dismissible="false" , which is used while an action is running. Focus returns to the trigger. The title is the aria-labelledby and the description is the aria-describedby .
+
+Responsive Below sm , modals sit 16 px from the screen edges and slideovers take the full width. Motion follows the foundations: 240 ms, and instant with reduced motion.
+
+### Dropdown menu and tooltip
+
+The row-action menu is the main dropdown. Delete always comes last, below a separator, in brick red. Tooltips name icon-only buttons and show their keyboard shortcut.
+
+Edit
+
+Unpublish
+
+Copy API URL
+
+Delete…
+
+Bold Ctrl B
+
+Nuxt UI UDropdownMenu :items :content="{ align: 'end' }" , with items grouped in nested arrays so separators appear automatically. The Delete item is color: 'error' , and its label ends in "…" because it opens a confirmation. UTooltip :text :kbds="['ctrl', 'b']" :delay-duration="400" .
+
+Keyboard The menu opens with Enter, Space or ↓. Arrow keys and type-ahead move through it, Home and End jump to the ends, and Esc closes it and returns focus. Tooltips appear on focus as well as hover and never hold information that isn't also in the aria-label .
+
+Touch Tooltips don't show on touch, so every icon-only control on mobile also appears in a labeled menu or has a visible label.
+
+### Tabs
+
+Tabs filter the article list. Each count comes from the full list, so it doesn't change while you search.
+
+All 6
+
+Online 4
+
+Drafts 2
+
+Focused
+
+From left: selected, default, hover, focus-visible.
+
+Nuxt UI UTabs variant="link" color="neutral" :content="false" :items v-model . The count goes in the #trailing slot as the mono sm count badge. The value syncs to ?status=online|draft so the filtered view can be linked.
+
+Keyboard Roving tabindex: Tab enters the tab list on the selected tab, and ← and → move and activate. Each tab's accessible name includes its count, for example "Drafts, 2 articles".
+
+Responsive Tabs stay in one row at 360 px, which is why the labels are short. Each tab is 44 px tall on touch.
+
+### Table and pagination
+
+Rows are 44 px with hairline separators, and only the Updated column sorts. Pagination appears only when a filter shows more than 25 articles.
+
+Title Status Updated
+
+How we price a bathroom renovation default 2 hours ago
+
+Choosing lime plaster for old stone walls hover Yesterday
+
+Before and after: the Rue Verte kitchen focus-visible 3 days ago
+
+Winter checklist for timber windows busy 5 days ago
+
+26–50 of 142 1 2 3 … 6
+
+Nuxt UI UTable :data :columns v-model:sorting v-model:global-filter v-model:pagination :loading with TanStack getPaginationRowModel , and @select for row click. UPagination :total :items-per-page="25" :sibling-count="1" show-edges , active item color="primary" variant="solid" .
+
+States Default, hover ( bg-elevated ), focus-visible (2 px inset ring), busy (a row action is running: 50% opacity, a spinner in the status cell, aria-busy , actions disabled), loading (skeleton rows), empty (EmptyState in the #empty slot).
+
+Keyboard, ARIA Each row's title is a real link to the editor, so Tab reaches it and Enter opens it. The rest of the row is a click target for the mouse only. The sort header is a button with aria-sort . Pagination is a nav labeled "Pages", and the current page has aria-current .
+
+### Skeleton, avatar, kbd, separator
+
+MA marta
+
+JV jan_vries
+
+BO bob
+
+Ctrl
+
+S
+
+Save
+
+Skeleton USkeleton blocks shaped like the real layout: the same row heights, a badge-sized block and a date-sized block. The pulse runs at 1.6 s and stops with reduced motion. The container is aria-busy="true" and a visually hidden live region says "Loading articles". Skeletons appear only after 150 ms, so fast responses never flash.
+
+Avatar UAvatar :alt="username" size="xs|sm" . The initials come from the username: split on anything that isn't a letter or digit, take the first letter of the first two parts, or the first two letters if there is only one part, then uppercase. Sand #d4c5b0 with ink text (11.2:1) in both themes. It's decorative ( aria-hidden ) because the username is always shown next to it.
+
+Kbd UKbd variant="outline" , only inside tooltips and the editor's shortcut hints. The editor shortcuts are Ctrl/⌘ S to save, plus TipTap's defaults: B, I, U, Z and Shift Z.
+
+Separator USeparator uses --ui-border by default and --ui-border-accented between groups in dense toolbars. It's decorative, with role="none" , except between menu groups.
+
+### Color mode
+
+Three choices: System (the default), Light and Dark. The toggle at the top of this page is the component itself, so you can try it.
+
+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".

docs/design/emails.md

@@ -0,0 +1,14 @@
+# Emails
+
+Go `html/template` files, ready to replace `internal/infrastructure/mailer/templates/`:
+
+- `source/emails/verification.html` uses `{{.Host}}` and `{{.VerificationCode}}`, linking to `{{.Host}}/register/validate?c={{.VerificationCode}}`.
+- `source/emails/password-reset.html` uses `{{.Host}}`, `{{.VerificationCode}}` and `{{.Email}}`, linking to `{{.Host}}/register/reset/validate?c={{.VerificationCode}}&email={{.Email}}`.
+
+Previews: `source/RenewCMS Emails.dc.html`.
+
+## Transactional emails
+
+Two Go html/template files: emails/verification.html and emails/password-reset.html . They use a table layout with inline CSS and a 600 px maximum width. The button is bulletproof: a colored table cell plus a padded link, so it survives Outlook. Each has a plain-URL fallback, a hidden preheader, and prefers-color-scheme overrides for clients that support them. The mark is live text in a black cell rather than an image, so it shows even when images are blocked. Previews below use example values.
+
+Suggested subjects are "Verify your RenewCMS account" and "Reset your RenewCMS password". html/template escapes the .Email value for the query string in the reset link (the @ becomes %40), and the confirm route reads it back decoded.

docs/design/foundations.md

@@ -0,0 +1,167 @@
+# Foundations
+
+Token source files (copy them into `web/src/theme/` in the Nuxt UI foundation slice, which then becomes the live source):
+
+- `source/tokens/renewcms.css`: `@theme`, `:root`, `.dark` and the `.article-content` scale
+- `source/tokens/ui.config.ts`: Nuxt UI color aliases, icons and component `ui` overrides
+- `source/tokens/vite.config.ts`: the `@nuxt/ui/vite` plugin setup
+- `source/tokens/tokens.json`: the same values as data
+- `source/brand/favicon.svg`: the mark, dark-aware
+
+Extracted from `source/RenewCMS Foundations.dc.html`:
+
+## Ledger foundations
+
+Everything below is generated from one set of files: tokens/renewcms.css (Tailwind @theme , :root , .dark , article content styles), tokens/ui.config.ts (Nuxt UI colors, icons and component overrides) and tokens/vite.config.ts . The tables on this page read those files, so they can't drift.
+
+### Logo
+
+The mark is a white R on a black square, drawn on a 16-pixel grid so it stays sharp as a favicon. It keeps the same geometry at every size. In dark mode the black square gets a 1 px #444 edge so it doesn't disappear into the background. The wordmark pairs the mark with RenewCMS in Plex Sans Semibold, with the text set at 0.6× the mark's height.
+
+RenewCMS
+
+16
+
+32
+
+64
+
+128, app icon source for 180 / 512
+
+Articles · RenewCMS
+
+RenewCMS
+
+16
+
+32
+
+64
+
+128
+
+Articles · RenewCMS
+
+Favicon file: brand/favicon.svg . The 1 px edge switches on with prefers-color-scheme: dark . Keep clear space of at least half the mark's height around it. The R is never recolored or placed on sand.
+
+### Color scales
+
+Seven Tailwind color scales, each mapped to a Nuxt UI alias. The ink, chalk and sand scales are built on your brand values. The four semantic scales are new and deliberately muted: evenly spaced oklch lightness steps with low chroma, so they sit comfortably next to ink and sand.
+
+### Theme variables
+
+Every --ui-* variable Nuxt UI reads, for both themes. Surfaces are white. The #fafafa brand background is the page canvas behind them. The theme follows the system setting until the owner picks Light or Dark from the user menu, and that choice is stored by Nuxt UI's color mode.
+
+Variable Used for Light Dark
+
+### Contrast checks
+
+Pair Needs Light Dark
+
+### Typography
+
+The interface uses IBM Plex Sans in three weights: 400, 500 and 600. IDs, paths, counters and code are set in IBM Plex Mono. Sizes replace Tailwind's text-* defaults. On screens narrower than md , form fields use 16 px so iOS doesn't zoom in when a field gets focus.
+
+Before and after: the Rue Verte kitchen
+
+GET /v1/article/12 · 8 412 / 10 000
+
+font-mono · 13px / 20px · 400 Code, paths, IDs, counters
+
+Article content uses a separate scale in Source Serif 4, applied through the .article-content class. The editor surface and the preview both use it, so what the owner writes looks like what a public site would roughly show. The measure is capped at 42 rem, about 70 characters per line.
+
+Choosing lime plaster for old stone walls
+
+Cement traps moisture in solid walls. Lime lets the stone breathe, which is why we strip it back on almost every farmhouse we take on .
+
+What we use
+
+Hot-mixed lime for the base coat
+
+Hair or fibre for the scratch coat
+
+A thin lime putty finish
+
+Drying time
+
+It sets slowly, and that is the point.
+
+Before you start
+
+Strip loose material back to sound stone.
+
+Wet the wall the evening before.
+
+Article image
+
+The north wall after the second coat.
+
+Element md and up Below md, spacing
+
+### Spacing, radius and density
+
+Spacing uses Tailwind's 4 px base unit unchanged. Radius is 0 everywhere: setting --ui-radius: 0rem flattens every component that derives its corners from it, and rounded-none overrides cover the few that hard-code rounded-full . The density is compact on desktop. On touch screens, every tap target is at least 44 px.
+
+Control Height and use
+
+size="sm" 28 px · table row actions, toolbar buttons in the editor
+
+size="md" 32 px · default on desktop: buttons, inputs, selects, tabs
+
+size="lg" 40 px · auth forms, primary actions in dialogs
+
+size="xl" 44 px · everything below md, via a responsive size prop
+
+Table row 44 px on desktop, 64 px cards on mobile
+
+Gutters 16 px on mobile, 24 px on desktop; sidebar 224 px, collapses to 56 px
+
+### Borders and elevation
+
+Most surfaces are flat and separated by hairlines. Shadows appear only on things that float above the page.
+
+Hairline 1 px --ui-border . Cards, table edges, sidebar and top bar dividers. Decorative, so no contrast requirement.
+
+Search by title
+
+Control edge 1 px --ui-border-accented . Inputs, selects, checkboxes, outline buttons. 3.6:1 on white.
+
+New article
+
+Focus ring 2 px --ui-primary outline with a 2 px offset, shown only on :focus-visible . Nuxt UI's default, kept.
+
+Edit
+
+Unpublish
+
+Popover --shadow-popover . Dropdown menus, selects, toasts. In dark mode it becomes a darker shadow plus the hairline.
+
+Modal --shadow-modal over a 40% chalk-950 overlay. Modals and slideovers.
+
+Layer z Contents
+
+Breakpoint Min What changes
+
+### Motion
+
+Motion is there to show where something came from or that something is working. It is short and never decorative.
+
+120 ms --duration-fast · ease-standard Hover and pressed colors, focus ring, the counter turning to warning, the switch thumb.
+
+180 ms --duration-base · ease-enter / ease-exit Dropdowns and tooltips (fade plus a 4 px shift), the tab indicator, toasts sliding in, SaveStatus crossfades.
+
+240 ms --duration-slow · ease-enter / ease-exit Modals (fade plus scale from 0.98), slideovers (slide from the edge), sidebar collapse.
+
+Never animates Route changes, table rows sorting or filtering, numbers counting up, the logo, editor text, and anything that runs on page load.
+
+Reduced motion With prefers-reduced-motion: reduce , every transition and animation completes instantly, skeletons stop pulsing and become flat blocks, and toasts appear without sliding. The one exception is the spinner on the automatic verification screen. It keeps turning, slowed to 1.6 s per rotation, because it is the only sign that work is happening.
+
+### Icons
+
+Lucide through Iconify, using Nuxt UI's i-lucide-* classes. Icons are 16 px next to 13–14 px text and 20 px on mobile top bars. They are always paired with a visible label or an aria-label . Each icon maps to one meaning: Eye is only ever show password, and Preview uses Book Open.
+
+### Where Nuxt UI defaults bend
+
+### Files
+
+Ready to paste into the repository. They follow its code style: tabs, no semicolons, single quotes and no comments. The CSS goes in src/assets/main.css and the config in src/theme/ui.config.ts . Add class="isolate" to the app root, as Nuxt UI requires.

docs/design/routes.md

@@ -0,0 +1,21 @@
+# Route map
+
+A global `router.beforeEach` guard reads `meta.auth`. On the first navigation it resolves the session with `GET /v1/auth/me` and caches the result in the session store. `useApi` turns any 401 into `/login?redirect=<path>&reason=expired` and any 403 from an unverified account into `/register/pending`.
+
+| Path | Layout | Auth | Screen | API calls |
+|---|---|---|---|---|
+| `/` | none | any | Redirect | none; goes to /home or /login |
+| `/login` | AuthShell | public | LoginPage | GET /v1/auth/registration · POST /v1/auth/login |
+| `/register` | AuthShell | public | RegisterPage | POST /v1/auth/register |
+| `/register/pending` | AuthShell | session | PendingPage | DELETE /v1/auth/register · POST /v1/auth/logout |
+| `/register/validate` | AuthShell | public | VerifyPage | POST /v1/auth/verify (+ POST /login inline on 401) |
+| `/register/reset/request` | AuthShell | public | ResetRequestPage | POST /v1/auth/password-reset |
+| `/register/reset/validate` | AuthShell | public | ResetConfirmPage | POST /v1/auth/password-reset/confirm |
+| `/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} |
+| `/integration` | DashboardShell | verified | IntegrationPage | none |
+| `/:pathMatch(.*)*` | either | any | NotFoundPage | none |
+
+Auth values: `public` needs no session, `session` needs a logged-in account (verified or not), `verified` needs a verified account, `any` applies to redirects and the catch-all.

docs/design/screens/articles.md

@@ -0,0 +1,122 @@
+# Articles
+
+- **Route:** `/article`
+- **API:** GET /v1/article/ · PATCH …/publish · PATCH …/unpublish · DELETE /v1/article/{id}
+- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Articles" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+Rows update when the server responds, not optimistically. Search, tab and sort are stored in the query string.
+
+## States
+
+### Default
+
+**Trigger:** The list loaded, sorted by last updated.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+
+### Row menu open
+
+**Trigger:** The ellipsis button, or Enter on the focused menu button.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- Row "Winter checklist for timber windows": menu true, online false, updated "5 days ago"
+
+### Loading
+
+**Trigger:** The first load, or a retry.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- List: loading skeleton
+
+### Empty
+
+**Trigger:** The list is empty.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- Tab counts (All, Online, Drafts): 0, 0, 0
+- EmptyState (file-text): **No articles yet** "Write your first one. It stays a draft until you publish it.", action "New article" (primary)
+
+### No results
+
+**Trigger:** Search matched nothing. The tab counts still show the full list.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- Search query: "tiles"
+- EmptyState (search): **No articles match "tiles"** "Check the spelling, or search for a shorter part of the title.", action "Clear search"
+
+### No drafts
+
+**Trigger:** Drafts tab with nothing in it. The "Online" tab has an equivalent "Nothing is online yet" state.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- Active tab index: 2 (0 All, 1 Online, 2 Drafts)
+- Tab counts (All, Online, Drafts): 4, 4, 0
+- EmptyState (pencil-line): **No drafts** "Everything you've written is online.", action "New article"
+
+### Action in progress
+
+**Trigger:** Publish chosen from the row menu. That row is disabled.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- Row "Winter checklist for timber windows": busy "Publishing…", online false, updated "5 days ago"
+
+### Published
+
+**Trigger:** 200: the row updates in place and a toast confirms.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- Toast (success, circle-check): **Article published** ""Winter checklist for timber windows" is now online."
+
+### Action failed
+
+**Trigger:** A 500 or network error. The row stays as it was, and the toast stays until retried or dismissed.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- Toast (error, circle-x): **Couldn't unpublish** "The server didn't respond. Nothing changed." with action "Retry"
+
+### Row vanished (404)
+
+**Trigger:** Any row action gets a 404.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- Toast (info, info): **That article no longer exists** "It was deleted somewhere else, so we removed it from the list."
+- Tab counts (All, Online, Drafts): 5, 4, 1
+
+### Delete: confirm
+
+**Trigger:** Delete… from the row menu.
+
+- 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."
+  - cancel "Cancel"
+  - confirm "Delete article" (danger)
+
+### Delete: in progress
+
+**Trigger:** DELETE in flight. The dialog can't be dismissed.
+
+- 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."
+  - cancel "Cancel"
+  - confirm "Deleting…" (danger), loading, not dismissible
+
+### Delete: failed
+
+**Trigger:** 500, a partial failure where the article is kept. The error shows inside the dialog.
+
+- 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."
+  - Alert: "Couldn't delete the article, so it's still there. Try again in a moment."
+  - cancel "Cancel"
+  - confirm "Delete article" (danger)
+
+### Deleted
+
+**Trigger:** 204: the row is removed and focus moves to the next row. This is also where a delete from the editor ends up.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- Toast (success, circle-check): **Article deleted** ""Winter checklist for timber windows" and its images are gone."
+- Tab counts (All, Online, Drafts): 5, 4, 1

docs/design/screens/boot.md

@@ -0,0 +1,16 @@
+# App boot
+
+- **Route:** `any route, first load`
+- **API:** GET /v1/auth/me (pending)
+- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Boot" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+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
+
+### Checking session
+
+**Trigger:** The first paint on any back-office URL, and usually visible for well under a second.
+
+- Breadcrumbs: Home (mobile title "Home")
+- boot: true

docs/design/screens/editor.md

@@ -0,0 +1,182 @@
+# Editor
+
+- **Route:** `/article/:id/edit`
+- **API:** GET /v1/article/{id} · PATCH /v1/article/{id} · PATCH …/publish|unpublish · POST …/image · DELETE
+- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Editor" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+On mobile, Save and Publish sit in a sticky bottom bar and the details panel opens as a slideover. A session expiry mid-edit keeps the draft in sessionStorage and goes to /login?redirect=/article/12/edit. After logging in, the editor restores the draft and shows "Unsaved changes".
+
+## States
+
+### Loading
+
+**Trigger:** GET in flight. Skeletons for the title, content and details.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Editor: status "draft", save "saved", loading true
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Saved
+
+**Trigger:** Just opened or just saved. Save is disabled.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Editor: status "draft", save "saved"
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Unsaved changes
+
+**Trigger:** Any edit. Publish becomes "Save and publish". Leaving asks for confirmation.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Editor: status "draft", save "dirty"
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Saving
+
+**Trigger:** Save, or Ctrl/⌘ S.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Editor: status "draft", save "saving"
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Save failed
+
+**Trigger:** 500 or network failure. The changes are kept and Retry resends them.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Editor: status "draft", save "error"
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Near the limit
+
+**Trigger:** 90% of 10 000 HTML characters.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Editor: status "draft", save "dirty", len 9240
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Too long
+
+**Trigger:** Over 10 000. Save and Publish are disabled until it's shorter.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Editor: status "draft", save "dirty", len 10214
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Preview
+
+**Trigger:** The Preview switch. Shows the title and body in the content scale, the way a public site might.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Editor: status "draft", save "saved", preview true
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Upload: choose
+
+**Trigger:** The image button in the toolbar, or a file dropped on the editor.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Modal: **Add an image**
+  - upload state: state "idle"
+  - cancel "Cancel"
+- Editor: status "draft", save "dirty"
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Upload: in progress
+
+**Trigger:** A valid file is uploading. Closing the dialog cancels the upload.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Modal: **Add an image**
+  - upload state: state "uploading"
+  - cancel "Cancel upload"
+- Editor: status "draft", save "dirty"
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Upload: rejected
+
+**Trigger:** Checked in the browser, so nothing is sent.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Modal: **Add an image**
+  - upload state: state "rejected"
+  - cancel "Cancel"
+  - confirm "Choose another file"
+- Editor: status "draft", save "dirty"
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Upload: inserted
+
+**Trigger:** 201: the image goes in at the cursor, and the article now has unsaved changes.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Toast (success, circle-check): **Image added** "Save to keep it in the article."
+- Editor: status "draft", save "dirty", image true
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Publishing
+
+**Trigger:** "Save and publish": the PATCH body, then the publish request.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Editor: status "draft", save "saving", pending "Saving and publishing…"
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Published
+
+**Trigger:** 200: the badge flips, Unpublish is offered and a toast confirms.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Toast (success, circle-check): **Article published** ""How we price a bathroom renovation" is now online."
+- Editor: status "online", save "saved"
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Unpublishing
+
+**Trigger:** Unpublish doesn't save pending edits.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Editor: status "online", save "saved", pending "Unpublishing…"
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Delete: confirm
+
+**Trigger:** Delete… from the overflow menu. After a 204, it goes to /article with the "Article deleted" toast.
+
+- 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."
+  - cancel "Cancel"
+  - confirm "Delete article" (danger)
+- Editor: status "draft", save "saved"
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Leave with unsaved changes
+
+**Trigger:** Back, a nav link or closing the tab.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Modal: **Leave without saving?**
+  - text "Your changes to "How we price a bathroom renovation" haven't been saved."
+  - cancel "Discard changes"
+  - confirm "Keep editing"
+- Editor: status "draft", save "dirty"
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Offline
+
+**Trigger:** The connection dropped. Writing continues, and Save and Publish wait.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Editor: status "draft", save "offline"
+- offline: true
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Not found (404)
+
+**Trigger:** Unknown id, or the article was deleted elsewhere.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Editor: status "draft", save "saved", notfound true
+- Mobile: leading arrow-left button, trailing ellipsis

docs/design/screens/forgot-password.md

@@ -0,0 +1,68 @@
+# Forgot password
+
+- **Route:** `/register/reset/request`
+- **API:** POST /v1/auth/password-reset
+- **Visual reference:** `source/RenewCMS Screens Auth.dc.html`, group "Forgot password" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+The sent state reads the same whether or not the email exists, so the page doesn't reveal which emails have accounts.
+
+## States
+
+### Default
+
+**Trigger:** From "Forgot password?" on log in.
+
+- Heading: **Reset your password**
+- Description: "Enter the email for your account and we'll send you a link to choose a new password."
+- Field `Email`: placeholder "you@example.com"
+- Submit button: "Send reset link"
+- Below the card: [Back to log in]
+
+### Validation error
+
+**Trigger:** Invalid email on submit. Nothing is sent.
+
+- Heading: **Reset your password**
+- Description: "Enter the email for your account and we'll send you a link to choose a new password."
+- Field `Email`: placeholder "you@example.com"; value "marta@renew"; **error "Enter a full email address, like name@example.com."**
+- Submit button: "Send reset link"
+- Below the card: [Back to log in]
+
+### Submitting
+
+**Trigger:** Request in flight.
+
+- Heading: **Reset your password**
+- Description: "Enter the email for your account and we'll send you a link to choose a new password."
+- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"
+- Submit button: "Sending…", loading
+- Below the card: [Back to log in]
+
+### Sent
+
+**Trigger:** Any 200, whether or not the account exists.
+
+- ResultPanel (success, mail-check): **Check your email**; text "If an account exists for that email, a password reset link has been sent."; note "The link expires in 1 hour."; actions "Back to log in" (secondary)
+
+### Too many attempts (429)
+
+**Trigger:** Rate limit with Retry-After.
+
+- Relied on an API marked pending in the design; that API now exists.
+- Alert (info, timer): **Too many requests** "Wait a moment before asking for another link."
+- Heading: **Reset your password**
+- Description: "Enter the email for your account and we'll send you a link to choose a new password."
+- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"
+- Submit button: "Try again in 0:58", disabled
+- Below the card: [Back to log in]
+
+### Server error
+
+**Trigger:** 500 or no response.
+
+- Alert (error, circle-x): **Couldn't send the link** "Check your connection and try again."
+- Heading: **Reset your password**
+- Description: "Enter the email for your account and we'll send you a link to choose a new password."
+- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"
+- Submit button: "Send reset link"
+- Below the card: [Back to log in]

docs/design/screens/global.md

@@ -0,0 +1,39 @@
+# Global states
+
+- **Route:** `any route`
+- **API:** 
+- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Global" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+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
+
+### 404 inside the shell
+
+**Trigger:** An unknown route while logged in. Logged out, the same content appears inside AuthShell.
+
+- Breadcrumbs: Not found (mobile title "Not found")
+- 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"}
+
+### Generic error
+
+**Trigger:** An unexpected error while rendering a route.
+
+- Breadcrumbs: Home (mobile title "Home")
+- err: {"code":"Error","title":"Something went wrong","text":"This page couldn't load. Your saved work is safe. Try again, and if it keeps happening, restart the RenewCMS server.","primary":"Try again","secondary":"Go to Home"}
+
+### Offline banner
+
+**Trigger:** navigator.onLine is false. The banner is shown on every back-office page.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- offline: true
+
+### Toast stack
+
+**Trigger:** Three at most, newest at the bottom. A fourth pushes out the oldest non-error toast.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- Toast (success, circle-check): **Article published** ""Winter checklist for timber windows" is now online."
+- Toast (info, info): **That article no longer exists** "It was deleted somewhere else, so we removed it from the list."
+- Toast (error, circle-x): **Couldn't unpublish** "The server didn't respond. Nothing changed." with action "Retry"

docs/design/screens/home.md

@@ -0,0 +1,42 @@
+# Home
+
+- **Route:** `/home`
+- **API:** GET /v1/article/
+- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Home" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+The counts come from the list, so there's no separate endpoint. The five most recently updated articles link to the editor.
+
+## States
+
+### Default
+
+**Trigger:** The articles loaded.
+
+- Breadcrumbs: Home (mobile title "Home")
+- Subtitle: "Here's where things stand on your site."
+- Stats: 6 articles, 4 online, 2 drafts
+- Recent: the 5 most recently updated articles, with status
+
+### Loading
+
+**Trigger:** The list request is in flight. Skeletons appear after 150 ms.
+
+- Breadcrumbs: Home (mobile title "Home")
+- Subtitle: "Here's where things stand on your site."
+- Stats and recent list: skeletons
+
+### Empty, first run
+
+**Trigger:** Zero articles: a single call to action, and no stats.
+
+- Breadcrumbs: Home (mobile title "Home")
+- Subtitle: "Welcome to RenewCMS."
+- First-run empty state instead of stats and recent list
+
+### Error
+
+**Trigger:** A 500 or network failure on the list request.
+
+- Breadcrumbs: Home (mobile title "Home")
+- Subtitle: "Here's where things stand on your site."
+- Error state for the list request

docs/design/screens/integration.md

@@ -0,0 +1,22 @@
+# Connect your website
+
+- **Route:** `/integration`
+- **API:** none (static)
+- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Integration" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+Written for a developer. The base URL is window.location.origin.
+
+## States
+
+### Default
+
+**Trigger:** Opened from the sidebar or the Home card.
+
+- Breadcrumbs: Integration (mobile title "Integration")
+
+### Copied
+
+**Trigger:** The base URL was copied. The button reads "Copied" for 2 s and this is announced.
+
+- Breadcrumbs: Integration (mobile title "Integration")
+- copied: true

docs/design/screens/log-in.md

@@ -0,0 +1,107 @@
+# Log in
+
+- **Route:** `/login`
+- **API:** GET /v1/auth/registration (pending) · POST /v1/auth/login
+- **Visual reference:** `source/RenewCMS Screens Auth.dc.html`, group "Log in" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+After logging in, you go back to the page you originally asked for (?redirect=), or to /home. An unverified account goes to /register/pending. "Create the owner account" appears only when registration is open.
+
+## States
+
+### Default
+
+**Trigger:** Registration is closed, which is the usual case.
+
+- Heading: **Log in**
+- Description: "Welcome back. Log in to manage your articles."
+- Field `Username`: placeholder "Your username"
+- Field `Password`: password with show/hide; link "Forgot password?"
+- Submit button: "Log in"
+
+### Fresh install
+
+**Trigger:** GET /v1/auth/registration returns { open: true }.
+
+- Relied on an API marked pending in the design; that API now exists.
+- Heading: **Log in**
+- Description: "Welcome back. Log in to manage your articles."
+- Field `Username`: placeholder "Your username"
+- Field `Password`: password with show/hide; link "Forgot password?"
+- Submit button: "Log in"
+- Footer: First time here? [Create the owner account]
+
+### Validation errors
+
+**Trigger:** Submit with a short username and an empty password. Nothing is sent.
+
+- Heading: **Log in**
+- Description: "Welcome back. Log in to manage your articles."
+- Field `Username`: placeholder "Your username"; value "ma"; **error "Use at least 3 characters."**
+- Field `Password`: password with show/hide; link "Forgot password?"; **error "Enter your password."**
+- Submit button: "Log in"
+
+### Submitting
+
+**Trigger:** The request is in flight. Fields and button are disabled.
+
+- Heading: **Log in**
+- Description: "Welcome back. Log in to manage your articles."
+- Field `Username`: placeholder "Your username"; value "marta"
+- Field `Password`: value "limewash2026"; password with show/hide; link "Forgot password?"
+- Submit button: "Logging in…", loading
+
+### Wrong credentials (403)
+
+**Trigger:** The API doesn't say which field is wrong, so neither does the message. The password is cleared and gets focus.
+
+- Alert (error, circle-x): **That username and password don't match** "Check both and try again. Passwords are case-sensitive."
+- Heading: **Log in**
+- Description: "Welcome back. Log in to manage your articles."
+- Field `Username`: placeholder "Your username"; value "marta"
+- Field `Password`: password with show/hide; focused; link "Forgot password?"
+- Submit button: "Log in"
+
+### Too many attempts (429)
+
+**Trigger:** Retry-After is counted down. The button re-enables at zero.
+
+- Relied on an API marked pending in the design; that API now exists.
+- Alert (info, timer): **Too many attempts** "For your security, wait a moment before trying again."
+- Heading: **Log in**
+- Description: "Welcome back. Log in to manage your articles."
+- Field `Username`: placeholder "Your username"; value "marta"
+- Field `Password`: value "limewash"; password with show/hide; link "Forgot password?"
+- Submit button: "Try again in 0:42", disabled
+
+### Session expired
+
+**Trigger:** Redirected from a 401 with ?redirect=/article/12/edit&reason=expired. Unsaved edits are kept in the browser.
+
+- Alert (info, clock): **Your session expired** "Log in again to pick up where you left off. Unsaved changes are kept on this device."
+- Heading: **Log in**
+- Description: "Welcome back. Log in to manage your articles."
+- Field `Username`: placeholder "Your username"; value "marta"
+- Field `Password`: password with show/hide; focused; link "Forgot password?"
+- Submit button: "Log in"
+
+### Password changed
+
+**Trigger:** Arrived from a successful reset with ?reason=password-changed.
+
+- Alert (success, circle-check): **Password changed** "Log in with your new password."
+- Heading: **Log in**
+- Description: "Welcome back. Log in to manage your articles."
+- Field `Username`: placeholder "Your username"
+- Field `Password`: password with show/hide; link "Forgot password?"
+- Submit button: "Log in"
+
+### Server or network error
+
+**Trigger:** A 500 or no response. The fields keep their values.
+
+- Alert (error, circle-x): **Couldn't reach RenewCMS** "Check your connection and try again."
+- Heading: **Log in**
+- Description: "Welcome back. Log in to manage your articles."
+- Field `Username`: placeholder "Your username"; value "marta"
+- Field `Password`: value "limewash2026"; password with show/hide; link "Forgot password?"
+- Submit button: "Log in"

docs/design/screens/new-article.md

@@ -0,0 +1,71 @@
+# New article
+
+- **Route:** `modal from anywhere · /article/new`
+- **API:** POST /v1/article/
+- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "New article" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+Recommendation: a modal. It needs two fields, and keeping the page underneath means cancelling costs nothing. /article/new opens the same modal over the article list, so it can be linked to and the back button closes it. A successful create always makes a draft and goes to the editor.
+
+## States
+
+### Default
+
+**Trigger:** "New article" from Home, Articles or the empty state.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- Modal: **New article**
+  - text "It's saved as a draft. Titles can't be changed later, so check it now."
+  - field `Title`: placeholder "e.g. Choosing tiles for a small bathroom"; focused; counter "0 / 200"; help "3 to 200 characters."
+  - field `First paragraph`: placeholder "Start writing. You'll continue in the editor."; textarea; help "You can format it and add images in the editor."
+  - cancel "Cancel"
+  - confirm "Create draft"
+
+### Validation
+
+**Trigger:** On submit or blur. Nothing is sent.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- Modal: **New article**
+  - text "It's saved as a draft. Titles can't be changed later, so check it now."
+  - field `Title`: value "Ti"; counter "2 / 200" in error; **error "Use at least 3 characters."**
+  - field `First paragraph`: textarea; **error "Add a first paragraph. It can be a single sentence."**
+  - cancel "Cancel"
+  - confirm "Create draft"
+
+### Submitting
+
+**Trigger:** Request in flight. Fields are disabled and the dialog can't be dismissed.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- Modal: **New article**
+  - text "It's saved as a draft. Titles can't be changed later, so check it now."
+  - field `Title`: value "Choosing tiles for a small bathroom"; counter "35 / 200"
+  - field `First paragraph`: value "Small rooms show every grout line, so we start with the floor."; textarea
+  - cancel "Cancel"
+  - confirm "Creating…", loading, not dismissible
+
+### Title rejected (400)
+
+**Trigger:** A server 400 that got past the browser checks. The raw error isn't shown.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- Modal: **New article**
+  - text "It's saved as a draft. Titles can't be changed later, so check it now."
+  - field `Title`: value "Choosing tiles for a small bathroom"; counter "35 / 200"; **error "Check this title and try again."**
+  - field `First paragraph`: value "Small rooms show every grout line, so we start with the floor."; textarea
+  - Alert: "Something in the form isn't valid. Check the highlighted fields."
+  - cancel "Cancel"
+  - confirm "Create draft"
+
+### Error
+
+**Trigger:** 500 or network failure.
+
+- Breadcrumbs: Articles (mobile title "Articles")
+- Modal: **New article**
+  - text "It's saved as a draft. Titles can't be changed later, so check it now."
+  - field `Title`: value "Choosing tiles for a small bathroom"; counter "35 / 200"
+  - field `First paragraph`: value "Small rooms show every grout line, so we start with the floor."; textarea
+  - Alert: "Couldn't create the article. Your text is still here. Try again in a moment."
+  - cancel "Cancel"
+  - confirm "Create draft"

docs/design/screens/pending.md

@@ -0,0 +1,61 @@
+# Check your email
+
+- **Route:** `/register/pending`
+- **API:** DELETE /v1/auth/register · POST /v1/auth/logout
+- **Visual reference:** `source/RenewCMS Screens Auth.dc.html`, group "Pending" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+Any back-office route visited by an unverified account lands here. There's no way to resend the email because the API doesn't offer one, so the note explains the way out.
+
+## States
+
+### Default
+
+**Trigger:** Straight after registering, when the email is known from the form.
+
+- ResultPanel (success, mail-check): **Check your email**; text "We sent a verification link to marta@renew.example. It expires in 2 hours."; note "Opened it on another device? That works too; you'll log in there first. Can't find it? Check your spam folder. If the link has expired, cancel your registration and start again."; actions "Log out" (secondary), "Cancel registration" (secondary)
+
+### Email unknown
+
+**Trigger:** Arrived after logging in as an unverified user.
+
+- ResultPanel (success, mail-check): **Check your email**; text "We sent a verification link to the email you registered with. It expires in 2 hours."; note "Opened it on another device? That works too; you'll log in there first. Can't find it? Check your spam folder. If the link has expired, cancel your registration and start again."; actions "Log out" (secondary), "Cancel registration" (secondary)
+
+### Confirm cancel
+
+**Trigger:** "Cancel registration" opens the destructive ConfirmDialog.
+
+- ResultPanel (success, mail-check): **Check your email**; text "We sent a verification link to marta@renew.example. It expires in 2 hours."; note "Opened it on another device? That works too; you'll log in there first. Can't find it? Check your spam folder. If the link has expired, cancel your registration and start again."; actions "Log out" (secondary), "Cancel registration" (secondary)
+- ConfirmDialog: **Cancel your registration?**
+  - text "Your account will be deleted. You can register again with the same or a different email."
+  - cancel "Keep my account"
+  - confirm "Cancel registration"
+
+### Cancelling
+
+**Trigger:** DELETE in flight. The dialog can't be dismissed.
+
+- ResultPanel (success, mail-check): **Check your email**; text "We sent a verification link to marta@renew.example. It expires in 2 hours."; note "Opened it on another device? That works too; you'll log in there first. Can't find it? Check your spam folder. If the link has expired, cancel your registration and start again."; actions "Log out" (secondary), "Cancel registration" (secondary)
+- ConfirmDialog: **Cancel your registration?**
+  - text "Your account will be deleted. You can register again with the same or a different email."
+  - cancel "Keep my account"
+  - confirm "Cancelling…"
+
+### Cancelled
+
+**Trigger:** 200 → /register, with a toast.
+
+- Heading: **Create the owner account**
+- Description: "This creates the single admin account for this site. Once it's verified, registration closes."
+- Field `Username`: placeholder "e.g. marta"; counter "0 / 20"; help "Letters and numbers, 3 to 20 characters. You'll use it to log in."
+- Field `Email`: placeholder "you@example.com"; help "We'll send a verification link here."
+- Field `Password`: password with show/hide; checklist "At least 8 characters" (unmet)
+- Submit button: "Create account"
+- Footer: Already set up? [Log in]
+- Toast (circle-check): **Registration cancelled** "You can create the owner account again."
+
+### Already verified (403)
+
+**Trigger:** Verified on another device. Goes to /home; shown here as the toast over the destination.
+
+- ResultPanel (success, shield-check): **You're verified**; text "Taking you to your dashboard…"
+- Toast (info): **Your account is already verified** "There's nothing to cancel."

docs/design/screens/register.md

@@ -0,0 +1,76 @@
+# Create the owner account
+
+- **Route:** `/register`
+- **API:** POST /v1/auth/register
+- **Visual reference:** `source/RenewCMS Screens Auth.dc.html`, group "Register" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+Seen once, on a fresh install. After registering, the new user is logged in but not yet verified, and goes to /register/pending.
+
+## States
+
+### Default
+
+**Trigger:** Registration is open.
+
+- Heading: **Create the owner account**
+- Description: "This creates the single admin account for this site. Once it's verified, registration closes."
+- Field `Username`: placeholder "e.g. marta"; counter "0 / 20"; help "Letters and numbers, 3 to 20 characters. You'll use it to log in."
+- Field `Email`: placeholder "you@example.com"; help "We'll send a verification link here."
+- Field `Password`: password with show/hide; checklist "At least 8 characters" (unmet)
+- Submit button: "Create account"
+- Footer: Already set up? [Log in]
+
+### Validation errors
+
+**Trigger:** Checked on blur and on submit, using the same rules as the API.
+
+- Heading: **Create the owner account**
+- Description: "This creates the single admin account for this site. Once it's verified, registration closes."
+- Field `Username`: placeholder "e.g. marta"; value "ma"; counter "2 / 20" in error; **error "Use 3 to 20 characters."**
+- Field `Email`: placeholder "you@example.com"; value "marta@renew"; **error "Enter a full email address, like name@example.com."**
+- Field `Password`: value "lime"; password with show/hide; checklist "At least 8 characters" (err)
+- Submit button: "Create account"
+- Footer: Already set up? [Log in]
+
+### Filled, valid
+
+**Trigger:** Every rule is met and the checklist item turns green.
+
+- Heading: **Create the owner account**
+- Description: "This creates the single admin account for this site. Once it's verified, registration closes."
+- Field `Username`: placeholder "e.g. marta"; value "marta"; counter "5 / 20"; help "Letters and numbers, 3 to 20 characters. You'll use it to log in."
+- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; help "We'll send a verification link here."
+- Field `Password`: value "limewash2026"; password with show/hide; password shown; checklist "At least 8 characters" (met)
+- Submit button: "Create account"
+- Footer: Already set up? [Log in]
+
+### Submitting
+
+**Trigger:** Fields and button are disabled.
+
+- Heading: **Create the owner account**
+- Description: "This creates the single admin account for this site. Once it's verified, registration closes."
+- Field `Username`: placeholder "e.g. marta"; value "marta"; counter "5 / 20"; help "Letters and numbers, 3 to 20 characters. You'll use it to log in."
+- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; help "We'll send a verification link here."
+- Field `Password`: value "limewash2026"; password with show/hide; checklist "At least 8 characters" (met)
+- Submit button: "Creating account…", loading
+- Footer: Already set up? [Log in]
+
+### Registration closed (403)
+
+**Trigger:** Someone already verified an owner account. The form is replaced.
+
+- ResultPanel (info, user-x): **This site already has an owner**; text "Log in instead."; actions "Go to log in" (primary)
+
+### Server error
+
+**Trigger:** A 500 or no response. The values are kept.
+
+- Alert (error, circle-x): **Couldn't create the account** "Something went wrong on the server. Try again in a moment."
+- Heading: **Create the owner account**
+- Description: "This creates the single admin account for this site. Once it's verified, registration closes."
+- Field `Username`: placeholder "e.g. marta"; value "marta"; counter "5 / 20"; help "Letters and numbers, 3 to 20 characters. You'll use it to log in."
+- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; help "We'll send a verification link here."
+- Field `Password`: value "limewash2026"; password with show/hide; checklist "At least 8 characters" (met)
+- Submit button: "Create account"
+- Footer: Already set up? [Log in]

docs/design/screens/reset-password.md

@@ -0,0 +1,76 @@
+# Choose a new password
+
+- **Route:** `/register/reset/validate?c=CODE&email=EMAIL`
+- **API:** POST /v1/auth/password-reset/confirm
+- **Visual reference:** `source/RenewCMS Screens Auth.dc.html`, group "Reset password" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+Opened from the reset email. The email comes from the URL and is read-only. The confirm field is checked only in the browser.
+
+## States
+
+### Default
+
+**Trigger:** Both parameters are present.
+
+- Heading: **Choose a new password**
+- Description: "Pick something you haven't used here before. You'll log in with it next."
+- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; read-only; help "From your reset link."
+- Field `New password`: password with show/hide; checklist "At least 8 characters" (unmet)
+- Field `Confirm new password`: password with show/hide; checklist "Passwords match" (unmet)
+- Submit button: "Change password"
+
+### Too short
+
+**Trigger:** On submit, with fewer than 8 characters.
+
+- Heading: **Choose a new password**
+- Description: "Pick something you haven't used here before. You'll log in with it next."
+- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; read-only; help "From your reset link."
+- Field `New password`: value "lime"; password with show/hide; checklist "At least 8 characters" (err)
+- Field `Confirm new password`: value "lime"; password with show/hide; checklist "Passwords match" (met)
+- Submit button: "Change password"
+
+### Mismatch
+
+**Trigger:** On blur of the confirm field, or on submit.
+
+- Heading: **Choose a new password**
+- Description: "Pick something you haven't used here before. You'll log in with it next."
+- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; read-only; help "From your reset link."
+- Field `New password`: value "limewash2026"; password with show/hide; checklist "At least 8 characters" (met)
+- Field `Confirm new password`: value "limewash2025"; password with show/hide; **error "The passwords don't match."**; checklist "Passwords match" (err)
+- Submit button: "Change password"
+
+### Submitting
+
+**Trigger:** Request in flight.
+
+- Heading: **Choose a new password**
+- Description: "Pick something you haven't used here before. You'll log in with it next."
+- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; read-only; help "From your reset link."
+- Field `New password`: value "limewash2026"; password with show/hide; checklist "At least 8 characters" (met)
+- Field `Confirm new password`: value "limewash2026"; password with show/hide; checklist "Passwords match" (met)
+- Submit button: "Changing password…", loading
+
+### Success
+
+**Trigger:** 200 → /login?reason=password-changed.
+
+- Alert (success, circle-check): **Password changed** "Log in with your new password."
+- Heading: **Log in**
+- Description: "Welcome back. Log in to manage your articles."
+- Field `Username`: placeholder "Your username"
+- Field `Password`: password with show/hide; link "Forgot password?"
+- Submit button: "Log in"
+
+### Invalid or expired (403)
+
+**Trigger:** The code is wrong, used, or older than 1 hour.
+
+- ResultPanel (error, link-2-off): **This reset link has expired**; text "Reset links work once, for 1 hour. Request a new one and use it within the hour."; actions "Request a new link" (primary), "Back to log in" (secondary)
+
+### Missing parameters
+
+**Trigger:** The link has no c or no email. No request is made.
+
+- ResultPanel (error, link-2-off): **This link is incomplete**; text "Part of the reset link is missing. Open it from your email again, or request a new one."; actions "Request a new link" (primary)

docs/design/screens/verify.md

@@ -0,0 +1,50 @@
+# Verify account
+
+- **Route:** `/register/validate?c=CODE`
+- **API:** POST /v1/auth/verify
+- **Visual reference:** `source/RenewCMS Screens Auth.dc.html`, group "Verify" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+Opened from the verification email, and submits automatically on load. This is the only full-card spinner in the product.
+
+## States
+
+### Verifying
+
+**Trigger:** On load, with a code in the URL.
+
+- Full-card spinner: "Verifying your account…"
+
+### Success
+
+**Trigger:** 200 → /home after 800 ms, with a toast.
+
+- ResultPanel (success, shield-check): **Your account is verified**; text "Taking you to your dashboard…"
+- Toast (circle-check): **Your account is verified** "Welcome to RenewCMS."
+
+### Invalid or expired (403)
+
+**Trigger:** The code is wrong, used, or older than 2 hours.
+
+- ResultPanel (error, link-2-off): **This verification link doesn't work**; text "It may have expired (links last 2 hours) or already been used."; note "Cancel your registration and start over to get a new link."; actions "Cancel registration and start over" (primary), "Log out" (secondary)
+
+### No session (401)
+
+**Trigger:** Opened in another browser or device. Log in inline, then verification retries automatically with the same code.
+
+- Heading: **Log in to finish verifying**
+- Description: "You opened this link somewhere you're not logged in. Log in here and we'll verify your account right after."
+- Field `Username`: placeholder "Your username"
+- Field `Password`: password with show/hide
+- Submit button: "Log in and verify"
+
+### No session, retrying
+
+**Trigger:** Logged in inline. Now verifying.
+
+- Full-card spinner: "Verifying your account…"
+
+### Missing code
+
+**Trigger:** The link has no ?c= parameter. No request is made.
+
+- ResultPanel (error, link-2-off): **This link is incomplete**; text "The verification code is missing. Open the link from your email again, or copy the full address into your browser."; actions "Go to log in" (secondary)

docs/design/source/AppFrame.dc.html

@@ -0,0 +1,313 @@
+<!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="width:{{ fw }};height:{{ fh }};position:relative;display:flex;flex-direction:{{ dir }};background:var(--ui-bg-muted);color:var(--ui-text);font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px;overflow:hidden">
+<sc-if value="{{ desk }}" hint-placeholder-val="{{ true }}">
+<div style="width:224px;flex-shrink:0;background:var(--ui-bg);border-right:1px solid var(--ui-border);display:flex;flex-direction:column;padding:12px;gap:2px">
+<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:10px"><svg width="26" height="26" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">RenewCMS</span></div>
+<sc-for list="{{ nav }}" as="n" hint-placeholder-count="3">
+<div data-act="nav-{{ n.key }}" style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;background:{{ n.bg }};color:{{ n.fg }};font-weight:{{ n.fw }}"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ n.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ n.icon }}.svg') center / contain no-repeat"></span>{{ n.t }}</div>
+</sc-for>
+<div style="flex:1"></div>
+<sc-if value="{{ s.boot }}"><div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px"><span style="width:26px;height:26px;background:var(--ui-bg-accented)"></span><span style="width:80px;height:12px;background:var(--ui-bg-accented)"></span></div></sc-if>
+<sc-if value="{{ notBoot }}"><div data-act="logout" title="Log out" style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px"><span style="width:26px;height:26px;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 11px 'IBM Plex Sans',sans-serif">MA</span><span style="flex:1;color:var(--ui-text-highlighted)">marta</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>
+<div style="flex:1;min-width:0;min-height:0;display:flex;flex-direction:column">
+<sc-if value="{{ desk }}" hint-placeholder-val="{{ true }}">
+<div style="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)"><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/panel-left-close.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/panel-left-close.svg') center / contain no-repeat"></span><span style="width:1px;height:16px;background:var(--ui-border);margin:0 6px"></span><sc-for list="{{ crumbs }}" as="c" hint-placeholder-count="1"><sc-if value="{{ c.sep }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat"></span></sc-if><span style="color:{{ c.fg }};font-weight:{{ c.fw }}">{{ c.t }}</span></sc-for></div>
+</sc-if>
+<sc-if value="{{ mob }}">
+<div style="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)"><span data-act="m-lead" style="width:44px;height:44px;display:flex;align-items:center;justify-content:center"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ mLead }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ mLead }}.svg') center / contain no-repeat"></span></span><span style="flex:1;min-width:0;font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ s.mTitle }}</span><sc-if value="{{ s.mAction }}"><span data-act="m-action" style="width:44px;height:44px;display:flex;align-items:center;justify-content:center"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ s.mAction }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ s.mAction }}.svg') center / contain no-repeat"></span></span></sc-if></div>
+</sc-if>
+<sc-if value="{{ s.offline }}"><div role="status" style="flex-shrink:0;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted)"><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/wifi-off.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/wifi-off.svg') center / contain no-repeat"></span><span style="flex:1">You're offline. You can keep writing, but saving and publishing will wait until you're back online.</span></div></sc-if>
+
+<div style="flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column">
+
+<sc-if value="{{ isBoot }}">
+<div aria-busy="true" style="padding:{{ pad }};display:flex;flex-direction:column;gap:24px">
+<div style="display:flex;flex-direction:column;gap:8px"><span style="width:220px;height:22px;background:var(--ui-bg-accented)"></span><span style="width:320px;max-width:80%;height:12px;background:var(--ui-bg-accented)"></span></div>
+<div style="display:grid;grid-template-columns:{{ cols3 }};gap:12px"><span style="height:88px;background:var(--ui-bg-accented)"></span><span style="height:88px;background:var(--ui-bg-accented)"></span><span style="height:88px;background:var(--ui-bg-accented)"></span></div>
+<span style="height:220px;background:var(--ui-bg-accented)"></span>
+<span style="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">API pending · GET /v1/auth/me</span>
+</div>
+</sc-if>
+
+<sc-if value="{{ isHome }}">
+<div style="padding:{{ pad }};display:flex;flex-direction:column;gap:{{ gap }};max-width:1040px">
+<div style="display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap"><div style="flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px"><span style="font:600 28px/36px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Good morning, marta</span><span style="color:var(--ui-text-muted);font-size:14px">{{ s.home.sub }}</span></div><sc-if value="{{ desk }}"><span data-act="new" style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span></sc-if></div>
+<sc-if value="{{ s.home.error }}"><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 your articles</span><span style="color:var(--ui-text-toned)">Check your connection and try again.</span></div><span style="align-self:flex-start;height:28px;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="{{ s.home.stats }}">
+<div style="display:grid;grid-template-columns:{{ cols3 }};gap:12px">
+<sc-for list="{{ s.home.stats }}" as="k" hint-placeholder-count="3"><div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:16px;display:flex;flex-direction:column;gap:4px"><sc-if value="{{ k.skel }}"><span style="width:40px;height:28px;background:var(--ui-bg-accented)"></span><span style="width:70px;height:12px;background:var(--ui-bg-accented)"></span></sc-if><sc-if value="{{ k.n }}"><span style="font:600 28px/36px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ k.n }}</span><span style="color:var(--ui-text-muted)">{{ k.l }}</span></sc-if></div></sc-for>
+</div>
+</sc-if>
+<sc-if value="{{ s.home.empty }}">
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:18px;color:var(--ui-text-highlighted)">Write your first article</span><span style="color:var(--ui-text-muted);max-width:340px;font-size:14px;line-height:22px">It starts as a draft, so nothing appears on your site until you publish it.</span><span data-act="new" style="height:{{ btnH }};padding:0 16px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span></div>
+</sc-if>
+<sc-if value="{{ s.home.recent }}">
+<div style="display:flex;flex-direction:column;gap:10px">
+<div style="display:flex;align-items:baseline;justify-content:space-between"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Recently updated</span><span data-act="nav-articles" style="color:var(--ui-text-toned);text-decoration:underline;text-underline-offset:3px">All articles</span></div>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border)">
+<sc-for list="{{ s.home.recent }}" as="a" hint-placeholder-count="5">
+<div data-act="open-{{ a.id }}" style="display:flex;align-items:center;gap:12px;min-height:{{ rowH }};padding:8px 12px;border-top:1px solid var(--ui-border-muted)">
+<sc-if value="{{ a.skel }}"><span style="flex:1;height:12px;background:var(--ui-bg-accented);max-width:60%"></span><span style="width:56px;height:20px;background:var(--ui-bg-accented)"></span></sc-if>
+<sc-if value="{{ a.t }}"><span style="flex:1;min-width:0;font-weight:500;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ a.t }}</span><sc-if value="{{ a.on }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></sc-if><sc-if value="{{ desk }}"><span style="width:110px;text-align:right;color:var(--ui-text-muted)">{{ a.u }}</span></sc-if></sc-if>
+</div>
+</sc-for>
+</div>
+</div>
+</sc-if>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:16px;display:flex;gap:14px;align-items:flex-start"><span style="width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--rc-sand);color:#111"><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/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:4px"><span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">Connect your website</span><span style="color:var(--ui-text-muted);text-wrap:pretty">Your site reads published articles from RenewCMS. Share this guide with whoever builds it.</span><span data-act="nav-integration" style="color:var(--ui-text-highlighted);font-weight:500;text-decoration:underline;text-underline-offset:3px;margin-top:4px">Open the guide</span></div></div>
+</div>
+</sc-if>
+
+<sc-if value="{{ isList }}">
+<div style="padding:{{ pad }};display:flex;flex-direction:column;gap:16px;flex:1;min-height:0">
+<div style="display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap"><div style="flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Articles</span><span style="color:var(--ui-text-muted)">Everything you've written, online and in draft.</span></div><sc-if value="{{ desk }}"><span data-act="new" style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span></sc-if></div>
+<div style="display:flex;flex-direction:{{ tbDir }};gap:{{ tbGap }};border-bottom:{{ tbBorder }}">
+<sc-if value="{{ mob }}"><span style="height:44px;padding:0 4px 0 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:{{ qFg }};font-size:16px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat"></span><span style="flex:1">{{ qText }}</span><sc-if value="{{ s.list.q }}"><span style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></sc-if></span></sc-if>
+<div style="display:flex;gap:20px;flex:1;border-bottom:{{ tabBorder }}"><sc-for list="{{ tabs }}" as="t" hint-placeholder-count="3"><span style="height:{{ tabH }};display:flex;align-items:center;gap:6px;border-bottom:2px solid {{ t.line }};margin-bottom:-1px;font-weight:{{ t.fw }};color:{{ t.fg }};font-size:{{ tabF }}">{{ t.t }}<span style="font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">{{ t.n }}</span></span></sc-for></div>
+<sc-if value="{{ desk }}"><span style="width:260px;height:32px;margin-bottom:6px;padding:0 4px 0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:{{ qFg }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat"></span><span style="flex:1">{{ qText }}</span><sc-if value="{{ s.list.q }}"><span style="width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></sc-if></span></sc-if>
+</div>
+<sc-if value="{{ s.list.empty }}">
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:56px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ s.list.empty.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ s.list.empty.icon }}.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">{{ s.list.empty.title }}</span><span style="color:var(--ui-text-muted);max-width:280px">{{ s.list.empty.text }}</span><span data-act="empty" style="height:{{ btnH }};padding:0 12px;display:flex;align-items:center;font-weight:500;background:{{ emptyBg }};color:{{ emptyFg }};border:1px solid {{ emptyBd }}">{{ s.list.empty.action }}</span></div>
+</sc-if>
+<sc-if value="{{ showTable }}">
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border)">
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 130px 140px 44px;height:36px;align-items:center;padding:0 12px;background:var(--ui-bg-elevated);color:var(--ui-text-muted);font-weight:500"><span>Title</span><span>Status</span><span>Created</span><span style="display:flex;align-items:center;gap:4px;color:var(--ui-text-highlighted)">Updated<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat"></span></span><span></span></div>
+<sc-for list="{{ rows }}" as="a" hint-placeholder-count="6">
+<div data-act="open-{{ a.id }}" style="display:grid;grid-template-columns:minmax(0,1fr) 110px 130px 140px 44px;height:44px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border);background:{{ a.bg }};opacity:{{ a.op }};position:relative">
+<sc-if value="{{ a.skel }}"><span style="height:12px;width:60%;background:var(--ui-bg-accented)"></span><span style="width:60px;height:20px;background:var(--ui-bg-accented)"></span><span style="width:80px;height:12px;background:var(--ui-bg-accented)"></span><span style="width:80px;height:12px;background:var(--ui-bg-accented)"></span><span></span></sc-if>
+<sc-if value="{{ a.t }}">
+<span style="font-weight:500;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:12px">{{ a.t }}</span>
+<span><sc-if value="{{ a.busy }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-muted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>{{ a.busy }}</span></sc-if><sc-if value="{{ a.showOn }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span></sc-if><sc-if value="{{ a.showDraft }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></sc-if></span>
+<span style="color:var(--ui-text-muted)">{{ a.c }}</span><span style="color:var(--ui-text-muted)">{{ a.u }}</span>
+<span data-act="menu-{{ a.id }}" style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted);background:{{ a.menuBg }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span>
+<sc-if value="{{ a.menu }}"><div role="menu" style="position:absolute;right:12px;top:40px;z-index:2;width:220px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px"><div data-act="open-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat"></span>Edit</div><div data-act="pub-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ a.menuIcon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ a.menuIcon }}.svg') center / contain no-repeat"></span>{{ a.menuPub }}</div><div data-act="copyurl" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat"></span>Copy API URL</div><div style="height:1px;background:var(--ui-border);margin:4px 0"></div><div data-act="del-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat"></span>Delete…</div></div></sc-if>
+</sc-if>
+</div>
+</sc-for>
+</div>
+</sc-if>
+<sc-if value="{{ showCards }}">
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);margin:0 -16px;border-left:0;border-right:0">
+<sc-for list="{{ rows }}" as="a" hint-placeholder-count="6">
+<div data-act="open-{{ a.id }}" style="position:relative;display:flex;align-items:center;gap:8px;padding:12px 4px 12px 16px;border-bottom:1px solid var(--ui-border);min-height:68px;opacity:{{ a.op }}">
+<sc-if value="{{ a.skel }}"><div style="flex:1;display:flex;flex-direction:column;gap:8px"><span style="width:70%;height:14px;background:var(--ui-bg-accented)"></span><span style="width:40%;height:12px;background:var(--ui-bg-accented)"></span></div></sc-if>
+<sc-if value="{{ a.t }}"><div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:6px"><span style="font-weight:500;font-size:15px;line-height:21px;color:var(--ui-text-highlighted)">{{ a.t }}</span><div style="display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ui-text-muted)"><sc-if value="{{ a.busy }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>{{ a.busy }}</span></sc-if><sc-if value="{{ a.showOn }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span></sc-if><sc-if value="{{ a.showDraft }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></sc-if><span>Updated {{ a.u }}</span></div></div><span data-act="menu-{{ a.id }}" style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat"></span></span></sc-if><sc-if value="{{ a.menu }}"><div role="menu" style="position:absolute;right:8px;top:56px;z-index:2;width:220px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px"><div data-act="open-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat"></span>Edit</div><div data-act="pub-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ a.menuIcon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ a.menuIcon }}.svg') center / contain no-repeat"></span>{{ a.menuPub }}</div><div data-act="copyurl" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat"></span>Copy API URL</div><div style="height:1px;background:var(--ui-border);margin:4px 0"></div><div data-act="del-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat"></span>Delete…</div></div></sc-if>
+</div>
+</sc-for>
+</div>
+</sc-if>
+</div>
+<sc-if value="{{ mob }}"><sc-if value="{{ listFab }}"><div data-act="new" 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/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</div></sc-if></sc-if>
+</sc-if>
+
+<sc-if value="{{ isEditor }}">
+<sc-if value="{{ s.ed.notfound }}">
+<div style="padding:{{ pad }};display:flex;flex-direction:column;gap:14px;max-width:560px"><span style="font:500 13px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">404</span><span style="font:600 24px/32px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">This article doesn't exist</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">It may have been deleted, or the link is wrong.</span><span data-act="nav-articles" style="align-self:flex-start;height:{{ btnH }};padding:0 12px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500">All articles</span></div>
+</sc-if>
+<sc-if value="{{ edFound }}">
+<div style="flex-shrink:0;background:var(--ui-bg);border-bottom:1px solid var(--ui-border);padding:{{ edHeadPad }};display:flex;flex-wrap:wrap;align-items:center;gap:{{ edHeadGap }}">
+<sc-if value="{{ desk }}"><span data-act="back" style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><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/arrow-left.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-left.svg') center / contain no-repeat"></span></span></sc-if>
+<div style="flex:1 1 {{ edTitleBasis }};min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap">
+<sc-if value="{{ s.ed.loading }}"><span style="width:320px;max-width:70%;height:20px;background:var(--ui-bg-accented)"></span><span style="width:60px;height:22px;background:var(--ui-bg-accented)"></span></sc-if>
+<sc-if value="{{ edReady }}"><span title="The title can't be changed after creation." style="font:600 18px/26px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ edTitle }}</span><sc-if value="{{ edPending }}"><span style="height:26px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--ui-border-accented);color:var(--ui-text-muted);font-size:13px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>{{ s.ed.pending }}</span></sc-if><sc-if value="{{ edOnline }}"><span style="height:26px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:13px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span></sc-if><sc-if value="{{ edDraft }}"><span style="height:26px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:13px;font-weight:500"><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/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></sc-if></sc-if>
+</div>
+<sc-if value="{{ edReady }}">
+<span aria-live="polite" style="display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;color:{{ save.fg }}"><span aria-hidden="true" style="display:inline-block;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ save.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ save.icon }}.svg') center / contain no-repeat"></span>{{ save.t }}<sc-if value="{{ save.retry }}"><span data-act="save" style="height:24px;padding:0 8px;display:flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);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/rotate-cw.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat"></span>Retry</span></sc-if></span>
+<sc-if value="{{ mob }}"><span style="flex:1"></span><span style="font:400 12px 'IBM Plex Mono',monospace;color:{{ counter.fg }}">{{ counter.t }}</span></sc-if>
+<sc-if value="{{ desk }}">
+<span data-act="preview" style="display:flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0;color:var(--ui-text-toned)"><span style="width:32px;height:18px;padding:2px;display:flex;justify-content:{{ pvJust }};background:{{ pvBg }}"><span style="width:14px;height:14px;background:var(--ui-bg)"></span></span>Preview</span>
+<span data-act="save" style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500;opacity:{{ saveOp }}"><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/save.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/save.svg') center / contain no-repeat"></span>Save</span>
+<span data-act="publish" style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;font-weight:500;background:{{ pub.bg }};color:{{ pub.fg }};border:1px solid {{ pub.bd }};opacity:{{ pub.op }}"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ pub.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ pub.icon }}.svg') center / contain no-repeat"></span>{{ pub.t }}</span>
+<span data-act="overflow" style="width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span>
+</sc-if>
+</sc-if>
+</div>
+<sc-if value="{{ showToolbar }}">
+<div role="toolbar" aria-label="Formatting" style="flex-shrink:0;padding:6px {{ tbPadX }};display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--ui-border);overflow:hidden;background:var(--ui-bg)">
+<sc-for list="{{ toolbar }}" as="t" hint-placeholder-count="20"><sc-if value="{{ t.sep }}"><span style="width:1px;height:20px;background:var(--ui-border-accented);margin:0 6px;flex-shrink:0"></span></sc-if><sc-if value="{{ t.btn }}"><span data-act="tb-{{ t.icon }}" style="height:{{ tbBtn }};min-width:{{ tbBtn }};padding:0 6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:4px;color:var(--ui-text-toned);background:{{ t.bg }}"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat"></span>{{ t.text }}</span></sc-if></sc-for>
+</div>
+</sc-if>
+<div style="flex:1;min-height:0;display:flex">
+<div style="flex:1;min-width:0;display:flex;flex-direction:column;background:{{ edBg }}">
+<div data-act="type" style="flex:1;min-height:0;overflow:hidden;padding:{{ edPad }};font-family:'Source Serif 4',serif;color:var(--ui-text-highlighted)">
+<sc-if value="{{ s.ed.loading }}"><div style="display:flex;flex-direction:column;gap:14px;max-width:672px"><span style="height:14px;background:var(--ui-bg-accented)"></span><span style="height:14px;background:var(--ui-bg-accented);width:92%"></span><span style="height:14px;background:var(--ui-bg-accented);width:80%"></span><span style="height:22px;background:var(--ui-bg-accented);width:45%;margin-top:18px"></span><span style="height:14px;background:var(--ui-bg-accented)"></span><span style="height:14px;background:var(--ui-bg-accented);width:70%"></span></div></sc-if>
+<sc-if value="{{ edReady }}">
+<div style="max-width:672px;margin:{{ edMargin }}">
+<sc-if value="{{ s.ed.preview }}"><div style="font-size:{{ h1F }};line-height:1.25;font-weight:600;margin:0 0 20px">{{ edTitle }}</div></sc-if>
+<sc-if value="{{ sampleBody }}"><p style="margin:0 0 20px;font-size:{{ pF }};line-height:1.66">Every bathroom is different, but the way we price them isn't. We start with a visit, measure everything, and <strong>write down what stays</strong>.</p>
+<div style="font-size:{{ h2F }};line-height:1.3;font-weight:600;margin:32px 0 12px">What goes into the price</div>
+<ul style="margin:0 0 20px;padding-left:28px;list-style:square;font-size:{{ pF }};line-height:1.66"><li>Stripping out and making good</li><li>Plumbing moves, if any</li><li>Tiles, fittings and a day for silicone</li></ul>
+<sc-if value="{{ s.ed.image }}"><div style="margin:28px 0;aspect-ratio:16/9;background:var(--ui-bg-elevated);border:1px dashed var(--ui-border-accented);display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted);font:400 13px 'IBM Plex Sans',sans-serif">/static/uploadedImages/3f9c…e1.jpg</div></sc-if>
+<p style="margin:0 0 20px;font-size:{{ pF }};line-height:1.66">We don't add a margin on materials you choose yourself.<sc-if value="{{ caret }}"><span style="display:inline-block;width:2px;height:1.1em;background:var(--ui-text-highlighted);vertical-align:-3px;margin-left:1px"></span></sc-if></p></sc-if><sc-if value="{{ edBody }}"><p style="margin:0 0 20px;font-size:{{ pF }};line-height:1.66">{{ edBody }}<sc-if value="{{ caret }}"><span style="display:inline-block;width:2px;height:1.1em;background:var(--ui-text-highlighted);vertical-align:-3px;margin-left:1px"></span></sc-if></p><sc-if value="{{ s.ed.image }}"><div style="margin:28px 0;aspect-ratio:16/9;background:var(--ui-bg-elevated);border:1px dashed var(--ui-border-accented);display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted);font:400 13px 'IBM Plex Sans',sans-serif">/static/uploadedImages/3f9c…e1.jpg</div></sc-if></sc-if>
+</div>
+</sc-if>
+</div>
+<sc-if value="{{ desk }}"><sc-if value="{{ showToolbar }}"><div style="flex-shrink:0;padding:8px 24px;border-top:1px solid var(--ui-border);background:var(--ui-bg);display:flex;align-items:center;gap:12px"><span style="flex:1;color:{{ counter.fg }};font-size:12px">{{ counter.msg }}</span><span style="display:flex;align-items:center;gap:6px;font:400 12px 'IBM Plex Mono',monospace;color:{{ counter.fg }}"><sc-if value="{{ counter.icon }}"><span aria-hidden="true" style="display:inline-block;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ counter.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ counter.icon }}.svg') center / contain no-repeat"></span></sc-if>{{ counter.t }}</span></div></sc-if></sc-if>
+</div>
+<sc-if value="{{ desk }}">
+<div style="width:280px;flex-shrink:0;border-left:1px solid var(--ui-border);background:var(--ui-bg);padding:20px;display:flex;flex-direction:column;gap:16px">
+<span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">Details</span>
+<sc-if value="{{ s.ed.loading }}"><div style="display:flex;flex-direction:column;gap:10px"><span style="height:12px;background:var(--ui-bg-accented)"></span><span style="height:12px;background:var(--ui-bg-accented)"></span><span style="height:12px;width:60%;background:var(--ui-bg-accented)"></span></div></sc-if>
+<sc-if value="{{ edReady }}">
+<div style="display:grid;grid-template-columns:auto 1fr;gap:8px 12px"><span style="color:var(--ui-text-muted)">Created</span><span>12 Mar 2026, 09:14</span><span style="color:var(--ui-text-muted)">Updated</span><span>Today, 11:02</span><span style="color:var(--ui-text-muted)">ID</span><span style="font-family:'IBM Plex Mono',monospace">12</span><span style="color:var(--ui-text-muted)">Images</span><span>{{ imgCount }}</span></div>
+<div style="display:flex;flex-direction:column;gap:6px"><span style="color:var(--ui-text-muted)">Public API URL</span><span style="display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--ui-bg-elevated);font:400 12px 'IBM Plex Mono',monospace"><span style="flex:1">/v1/article/12</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/copy.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/copy.svg') center / contain no-repeat"></span></span><span style="color:var(--ui-text-muted);font-size:12px;line-height:18px">{{ apiNote }}</span></div>
+<div style="display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:1px solid var(--ui-border)"><span style="color:var(--ui-text-muted)">Title</span><span style="font-size:12px;line-height:18px;color:var(--ui-text-toned)">Titles can't be changed after an article is created. To use a different title, create a new article and delete this one.</span></div>
+</sc-if>
+</div>
+</sc-if>
+</div>
+<sc-if value="{{ mob }}"><sc-if value="{{ edReady }}">
+<div style="flex-shrink:0;padding:12px 16px;border-top:1px solid var(--ui-border);background:var(--ui-bg);display:flex;flex-direction:column;gap:8px">
+<sc-if value="{{ counter.msg }}"><span style="color:{{ counter.fg }};font-size:13px;line-height:19px">{{ counter.msg }}</span></sc-if>
+<div style="display:flex;gap:8px"><span data-act="details" style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned)"><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/panel-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/panel-right.svg') center / contain no-repeat"></span></span><span data-act="save" style="flex:1;height:44px;padding:0 12px;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500;font-size:15px;opacity:{{ saveOp }}">Save</span><span data-act="publish" style="flex:1 0 auto;padding:0 16px;white-space:nowrap;height:44px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:500;font-size:15px;background:{{ pub.bg }};color:{{ pub.fg }};border:1px solid {{ pub.bd }};opacity:{{ pub.op }}">{{ pub.t }}</span></div>
+</div>
+</sc-if></sc-if>
+</sc-if>
+</sc-if>
+
+<sc-if value="{{ isInteg }}">
+<div style="padding:{{ pad }};display:flex;flex-direction:column;gap:24px;max-width:860px;overflow:hidden">
+<div style="display:flex;flex-direction:column;gap:4px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Connect your website</span><span style="color:var(--ui-text-muted)">A guide for the developer who builds your public site.</span></div>
+<p style="margin:0;font-size:14px;line-height:22px;color:var(--ui-text-toned);text-wrap:pretty">RenewCMS is headless: it stores and publishes your articles but doesn't show them to visitors. Your website fetches published articles from the two addresses below and displays them in its own design.</p>
+<div style="display:flex;flex-direction:column;gap:6px"><span style="font-weight:500;color:var(--ui-text-highlighted)">Base URL</span><div style="display:flex;border:1px solid var(--ui-border-accented);background:var(--ui-bg)"><span style="flex:1;min-width:0;height:40px;padding:0 12px;display:flex;align-items:center;font:400 13px 'IBM Plex Mono',monospace;overflow:hidden;white-space:nowrap">https://cms.renew.example</span><span data-act="copy" style="height:40px;padding:0 12px;display:flex;align-items:center;gap:6px;border-left:1px solid var(--ui-border-accented);font-weight:500;color:{{ copyFg }}"><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/{{ copyIcon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ copyIcon }}.svg') center / contain no-repeat"></span>{{ copyText }}</span></div></div>
+<sc-for list="{{ endpoints }}" as="e" hint-placeholder-count="2">
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border)">
+<div style="padding:16px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--ui-border)"><div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font:500 12px 'IBM Plex Mono',monospace">GET</span><span style="font:500 14px 'IBM Plex Mono',monospace;color:var(--ui-text-highlighted)">{{ e.path }}</span></div><span style="color:var(--ui-text-toned)">{{ e.desc }}</span></div>
+<div style="display:flex;gap:20px;padding:0 16px;border-bottom:1px solid var(--ui-border)"><span style="height:36px;display:flex;align-items:center;border-bottom:2px solid {{ e.l1 }};margin-bottom:-1px;font-weight:500;color:var(--ui-text-highlighted)">fetch</span><span style="height:36px;display:flex;align-items:center;color:var(--ui-text-toned)">curl</span><span style="height:36px;display:flex;align-items:center;color:var(--ui-text-toned)">Response</span></div>
+<div style="background:var(--ui-bg-elevated)"><div style="height:32px;padding:0 8px 0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ui-border)"><span style="font:500 12px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">JavaScript</span><span style="display:flex;align-items:center;gap:6px;color:var(--ui-text-toned);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/copy.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/copy.svg') center / contain no-repeat"></span>Copy</span></div><pre style="margin:0;padding:14px 16px;overflow:hidden;font:400 12px/19px 'IBM Plex Mono',monospace;color:var(--ui-text);white-space:pre">{{ e.code }}</pre></div>
+</div>
+</sc-for>
+<div style="display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:22px;color:var(--ui-text-toned)">
+<div style="display:flex;gap:10px"><span style="display:flex;padding-top:3px;color:var(--ui-info)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat"></span></span><span style="text-wrap:pretty">Anonymous callers only ever get online articles. Drafts stay private until you publish them.</span></div>
+<div style="display:flex;gap:10px"><span style="display:flex;padding-top:3px;color:var(--ui-info)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat"></span></span><span style="text-wrap:pretty">Images in <code>body</code> use paths like <code>/static/uploadedImages/&lt;uuid&gt;.png</code>. Prefix them with the base URL before rendering.</span></div>
+<div style="display:flex;gap:10px"><span style="display:flex;padding-top:3px;color:var(--ui-info)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat"></span></span><span style="text-wrap:pretty">Browsers can only call the API from origins listed in the server's CORS setting. Ask whoever runs the server to add your site's address.</span></div>
+</div>
+</div>
+</sc-if>
+
+<sc-if value="{{ isError }}">
+<div style="padding:{{ errPad }};display:flex;flex-direction:column;gap:14px;max-width:560px"><span style="font:500 13px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">{{ s.err.code }}</span><span style="font:600 24px/32px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ s.err.title }}</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">{{ s.err.text }}</span><div style="display:flex;gap:8px;flex-wrap:wrap"><span data-act="err-primary" style="height:{{ btnH }};padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500">{{ s.err.primary }}</span><sc-if value="{{ s.err.secondary }}"><span style="height:{{ btnH }};padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">{{ s.err.secondary }}</span></sc-if></div></div>
+</sc-if>
+
+</div>
+</div>
+
+<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 }}">
+<div role="dialog" aria-modal="true" style="width:{{ modalW }};background:var(--ui-bg);box-shadow:var(--rc-shadow-modal);display:flex;flex-direction:column">
+<div style="padding:20px 24px 0;display:flex;align-items:flex-start;gap:12px"><div style="flex:1;display:flex;flex-direction:column;gap:4px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ s.modal.title }}</span><sc-if value="{{ s.modal.desc }}"><span style="color:var(--ui-text-muted);text-wrap:pretty">{{ s.modal.desc }}</span></sc-if></div><sc-if value="{{ s.modal.close }}"><span data-act="modal-close" style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></sc-if></div>
+<div style="padding:20px 24px 0;display:flex;flex-direction:column;gap:16px">
+<sc-if value="{{ s.modal.notice }}"><div role="alert" style="display:flex;gap:8px;padding:10px 12px;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><span style="color:var(--ui-text-toned)">{{ s.modal.notice }}</span></div></sc-if>
+<sc-for list="{{ mFields }}" as="f" hint-placeholder-count="0">
+<div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;justify-content:space-between"><span style="font-weight:500;color:var(--ui-text-highlighted)">{{ f.label }}</span><sc-if value="{{ f.count }}"><span style="font:400 12px 'IBM Plex Mono',monospace;color:{{ f.countFg }}">{{ f.count }}</span></sc-if></div><div style="min-height:{{ f.h }};padding:{{ f.p }};display:flex;align-items:{{ f.ai }};border:1px solid {{ f.bd }};box-shadow:{{ f.sh }};background:{{ f.bg }};color:{{ f.fg }};font-size:{{ inF }}">{{ f.shown }}</div><sc-if value="{{ f.err }}"><span style="display:flex;gap:6px;align-items:center;color:var(--ui-error);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/circle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat"></span>{{ f.err }}</span></sc-if><sc-if value="{{ f.help }}"><span style="color:var(--ui-text-muted);font-size:12px">{{ f.help }}</span></sc-if></div>
+</sc-for>
+<sc-if value="{{ s.modal.upload }}">
+<div data-act="upload-pick" style="height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;border:{{ up.bd }};background:{{ up.bg }};color:{{ up.fg }}"><span aria-hidden="true" style="display:inline-block;width:24px;height:24px;background-color:{{ up.ic }};-webkit-mask:url('https://api.iconify.design/lucide/{{ up.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ up.icon }}.svg') center / contain no-repeat"></span><span style="font-weight:500;color:var(--ui-text-highlighted)">{{ up.title }}</span><sc-if value="{{ up.progress }}"><div style="width:80%;height:4px;background:var(--ui-bg-accented)"><div style="width:{{ up.progress }};height:4px;background:var(--ui-primary)"></div></div></sc-if><span style="color:var(--ui-text-toned);font-size:12px;max-width:300px">{{ up.text }}</span></div>
+</sc-if>
+</div>
+<div style="padding:20px 24px;display:flex;flex-direction:{{ mBtnDir }};justify-content:flex-end;gap:8px">
+<sc-if value="{{ s.modal.cancel }}"><span data-act="modal-cancel" style="height:{{ btnH }};padding:0 12px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-accented);color:{{ mCancelFg }};font-weight:500">{{ s.modal.cancel }}</span></sc-if>
+<sc-if value="{{ s.modal.confirm }}"><span data-act="modal-confirm" style="height:{{ btnH }};padding:0 12px;display:flex;align-items:center;justify-content:center;gap:6px;background:{{ mConfirmBg }};color:var(--ui-bg);font-weight:500"><sc-if value="{{ s.modal.loading }}"><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/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span></sc-if>{{ s.modal.confirm }}</span></sc-if>
+</div>
+</div>
+</div>
+</sc-if>
+
+<sc-if value="{{ hasToasts }}">
+<div style="position:absolute;z-index:60;display:flex;flex-direction:column;gap:8px;left:{{ tL }};right:{{ tR }};bottom:{{ tB }};width:{{ tW }}">
+<sc-for list="{{ toasts }}" as="t" hint-placeholder-count="1">
+<div style="display:flex;gap:10px;padding:12px 14px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;margin-top:2px;width:16px;height:16px;background-color:{{ t.fg }};-webkit-mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat"></span><div style="flex:1;display:flex;flex-direction:column;gap:6px"><div style="display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;color:var(--ui-text-highlighted)">{{ t.title }}</span><span style="color:var(--ui-text-muted)">{{ t.text }}</span></div><sc-if value="{{ t.action }}"><span data-act="retry" style="align-self:flex-start;height:28px;padding:0 10px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);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>{{ t.action }}</span></sc-if></div><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></div>
+</sc-for>
+</div>
+</sc-if>
+</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;:&quot;boolean&quot;,&quot;default&quot;:false,&quot;tsType&quot;:&quot;boolean&quot;}}">
+class Component extends DCLogic {
+	renderVals() {
+		const s = this.props.s || {}
+		const m = !!this.props.mobile
+		const k = s.kind || 'home'
+		const navItems = [['home', 'house', 'Home'], ['articles', 'file-text', 'Articles'], ['integration', 'plug', 'Integration']]
+		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 || {}
+		const counts = L.counts || [6, 4, 2]
+		const tabs = ['All', 'Online', 'Drafts'].map((t, i) => { const on = (L.tab || 0) === i; return { t, n: counts[i], line: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-text-highlighted)' : 'var(--ui-text-toned)', fw: on ? 500 : 400 } })
+		const rows = (L.loading ? Array.from({ length: 6 }, () => ({ skel: true })) : (L.rows || [])).map(a => ({ ...a, showOn: !a.busy && a.on, showDraft: !a.busy && a.t && !a.on, op: a.busy ? '0.55' : '1', bg: a.menu ? 'var(--ui-bg-elevated)' : 'transparent', menuBg: a.menu ? 'var(--ui-bg-accented)' : 'transparent', menuPub: a.on ? 'Unpublish' : 'Publish', menuIcon: a.on ? 'globe-lock' : 'globe' }))
+		const e = s.ed || {}
+		const saveMap = { clean: ['check', 'Saved', 'var(--ui-text-muted)'], dirty: ['circle-dot', 'Unsaved changes', 'var(--ui-warning)'], saving: ['loader-circle', 'Saving…', 'var(--ui-text-muted)'], saved: ['check', 'Saved at 11:02', 'var(--ui-text-muted)'], error: ['circle-alert', 'Save failed', 'var(--ui-error)'], offline: ['wifi-off', 'Waiting for connection', 'var(--ui-text-muted)'] }
+		const sv = saveMap[e.save || 'saved']
+		const save = { icon: sv[0], t: sv[1], fg: sv[2], retry: e.save === 'error' }
+		const len = e.len || 4318
+		const fmt = n => String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
+		const over = len > 10000, warn = len >= 9000
+		const counter = { t: fmt(len) + ' / 10 000', fg: over ? 'var(--ui-error)' : warn ? 'var(--ui-warning)' : 'var(--ui-text-muted)', icon: over ? 'circle-alert' : warn ? 'triangle-alert' : '', msg: over ? fmt(len - 10000) + ' characters over. Shorten the text or remove an image. Formatting counts too.' : warn ? 'Close to the limit. Images and formatting count too.' : '' }
+		const dirty = e.save === 'dirty' || e.save === 'error'
+		const online = e.status === 'online'
+		const blocked = over || s.offline
+		let pub
+		if (e.pending) pub = { t: e.pending, icon: 'loader-circle', bg: online ? 'var(--ui-bg)' : 'var(--ui-primary)', fg: online ? 'var(--ui-text-highlighted)' : 'var(--ui-bg)', bd: online ? 'var(--ui-border-accented)' : 'var(--ui-primary)', op: '1' }
+		else if (online) pub = { t: 'Unpublish', icon: 'globe-lock', bg: 'var(--ui-bg)', fg: 'var(--ui-text-highlighted)', bd: 'var(--ui-border-accented)', op: s.offline ? '0.4' : '1' }
+		else pub = { t: dirty ? 'Save and publish' : 'Publish', icon: 'globe', bg: 'var(--ui-primary)', fg: 'var(--ui-bg)', bd: 'var(--ui-primary)', op: blocked ? '0.4' : '1' }
+		const md = s.modal || {}
+		const mFields = (md.fields || []).map(f => { const has = f.value; return { ...f, shown: has || f.ph || '', fg: md.loading ? 'var(--ui-text-dimmed)' : has ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)', bd: f.err ? 'var(--ui-error)' : f.focus ? 'var(--ui-primary)' : 'var(--ui-border-accented)', sh: f.err ? 'inset 0 0 0 1px var(--ui-error)' : f.focus ? 'inset 0 0 0 1px var(--ui-primary)' : 'none', bg: md.loading ? 'var(--ui-bg-elevated)' : 'var(--ui-bg)', h: f.area ? (m ? '120px' : '96px') : (m ? '44px' : '40px'), p: f.area ? '8px 10px' : '0 10px', ai: f.area ? 'flex-start' : 'center', countFg: f.countErr ? 'var(--ui-error)' : 'var(--ui-text-muted)' } })
+		const U = md.upload || {}
+		const upMap = {
+			uploading: { icon: 'image-plus', ic: 'var(--ui-text-toned)', title: 'north-wall.jpg', text: 'Uploading 2.4 of 3.9 MB', progress: '62%', bd: '1px solid var(--ui-border)', bg: 'var(--ui-bg)' },
+			rejected: { icon: 'file-x', ic: 'var(--ui-error)', title: 'north-wall.tif is 14.2 MB', text: 'Images can be up to 10 MB. Use a PNG, JPEG, WEBP or SVG image.', bd: '1px solid var(--ui-error)', bg: 'var(--ui-bg)' },
+			idle: { icon: 'image-plus', ic: 'var(--ui-text-toned)', title: 'Drop an image here, or choose a file', text: 'PNG, JPEG, WEBP, SVG · max 10 MB', bd: '1px dashed var(--ui-border-accented)', bg: 'var(--ui-bg)' },
+			error: { icon: 'circle-x', ic: 'var(--ui-error)', title: 'Upload failed', text: 'The server didn\'t accept the file. Your article hasn\'t changed.', bd: '1px solid var(--ui-error)', bg: 'var(--ui-bg)' }
+		}
+		const up = upMap[U.state || 'idle'] || upMap.idle
+		const toasts = (s.toasts || []).map(t => ({ ...t, fg: 'var(--ui-' + t.tone + ')' }))
+		const endpoints = [
+			{ path: '/v1/article/', desc: 'Lists every online article.', l1: 'var(--ui-primary)', code: "const res = await fetch('https://cms.renew.example/v1/article/')\nconst articles = await res.json()" },
+			{ path: '/v1/article/{id}', desc: 'Returns one online article. Drafts and unknown ids both return 404.', l1: 'var(--ui-primary)', code: "const res = await fetch('https://cms.renew.example/v1/article/12')\nif (res.status === 404) return notFound()\nconst article = await res.json()" }
+		]
+		const toolbarDef = [['undo-2'], ['redo-2'], '|', ['pilcrow', 'Paragraph ▾'], '|', ['bold', '', true], ['italic'], ['underline'], ['strikethrough'], '|', ['align-left', '', true], ['align-center'], ['align-right'], ['align-justify'], '|', ['list'], ['list-ordered'], ['indent-decrease'], ['indent-increase'], '|', ['remove-formatting'], ['image-plus', 'Image']]
+		const mobTb = [['image-plus'], ['undo-2'], ['redo-2'], '|', ['pilcrow', '¶ ▾'], ['bold'], ['italic'], ['underline'], ['list'], ['list-ordered']]
+		const toolbar = (m ? mobTb : toolbarDef).map(x => x === '|' ? { sep: true, btn: false } : { sep: false, btn: true, icon: x[0], text: x[1] || '', bg: x[2] ? 'var(--ui-bg-accented)' : 'transparent' })
+		const edReady = k === 'editor' && !e.loading && !e.notfound
+		const edTitle = e.title || 'How we price a bathroom renovation'
+		return {
+			s, nav, crumbs, 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',
+			mLead: s.mLead || 'menu',
+			isBoot: !!s.boot, isHome: k === 'home' && !s.boot, isList: k === 'articles', isEditor: k === 'editor', isInteg: k === 'integration', isError: k === 'error',
+			pad: m ? '20px 16px 88px' : '32px', gap: m ? '20px' : '28px', cols3: m ? 'repeat(3,minmax(0,1fr))' : 'repeat(3,minmax(0,1fr))',
+			btnH: m ? '44px' : '32px', rowH: m ? '52px' : '44px', inF: m ? '16px' : '14px',
+			tbDir: m ? 'column' : 'row', tbGap: m ? '12px' : '16px', tbBorder: m ? '0' : '1px solid var(--ui-border)', tabBorder: m ? '1px solid var(--ui-border)' : '0', tabH: m ? '44px' : '36px', tabF: m ? '14px' : '13px',
+			qText: L.q ? L.q : 'Search by title', qFg: L.q ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)',
+			showTable: !m && !L.empty, showCards: m && !L.empty, listFab: !s.modal,
+			emptyBg: L.empty && L.empty.primary ? 'var(--ui-primary)' : 'var(--ui-bg)', emptyFg: L.empty && L.empty.primary ? 'var(--ui-bg)' : 'var(--ui-text-highlighted)', emptyBd: L.empty && L.empty.primary ? 'var(--ui-primary)' : 'var(--ui-border-accented)',
+			edFound: k === 'editor' && !e.notfound, edReady, edPending: edReady && !!e.pending, edOnline: edReady && !e.pending && online, edDraft: edReady && !e.pending && !online,
+			edHeadPad: m ? '12px 16px' : '14px 24px', edHeadGap: m ? '8px 12px' : '12px', edTitleBasis: m ? '100%' : '200px',
+			showToolbar: k === 'editor' && !e.notfound && !e.preview,
+			tbPadX: m ? '8px' : '24px', tbBtn: m ? '40px' : '28px',
+			edBg: e.preview ? 'var(--ui-bg-muted)' : 'var(--ui-bg)', edPad: m ? '24px 16px' : '40px 48px', edMargin: e.preview ? '0 auto' : '0',
+			h1F: m ? '28px' : '32px', h2F: m ? '23px' : '26px', pF: m ? '17px' : '18px', caret: !e.preview,
+			pvJust: e.preview ? 'flex-end' : 'flex-start', pvBg: e.preview ? 'var(--ui-primary)' : 'var(--ui-bg-accented)',
+			saveOp: (dirty && !blocked) ? '1' : '0.4', imgCount: e.imgs != null ? String(e.imgs) : (e.image ? '4' : '3'), apiNote: online ? 'Live. Your website can read this article.' : 'Returns 404 until the article is online.',
+			copyIcon: s.copied ? 'check' : 'copy', copyText: s.copied ? 'Copied' : 'Copy', copyFg: s.copied ? 'var(--ui-success)' : 'var(--ui-text-highlighted)',
+			errPad: m ? '40px 20px' : '64px 48px',
+			modalAlign: m ? 'flex-end' : 'flex-start', modalPad: m ? '16px' : '140px 16px 16px', modalW: m ? '100%' : (md.wide ? '560px' : '460px'), mBtnDir: m ? 'column-reverse' : 'row',
+			mConfirmBg: md.tone === 'danger' ? 'var(--ui-error)' : 'var(--ui-primary)', mCancelFg: md.loading ? 'var(--ui-text-dimmed)' : 'var(--ui-text-highlighted)',
+			hasToasts: toasts.length > 0, tL: m ? '16px' : 'auto', tR: m ? '16px' : '24px', tB: m ? '16px' : '24px', tW: m ? 'auto' : '356px'
+		}
+	}
+}
+</script>
+</body>
+</html>

docs/design/source/AuthCard.dc.html

@@ -0,0 +1,105 @@
+<!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="width:100%;display:flex;flex-direction:column;align-items:center;gap:20px">
+<div style="width:{{ w }};max-width:100%;background:var(--ui-bg);border:{{ border }};padding:{{ pad }};display:flex;flex-direction:column;gap:24px;font-family:'IBM Plex Sans',sans-serif;color:var(--ui-text)">
+<svg width="32" height="32" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="{{ edge }}" fill-rule="evenodd" d="M0 0h16v16H0zM.5 .5v15h15V.5z"></path><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg>
+<sc-if value="{{ s.spinner }}" hint-placeholder-val="{{ false }}">
+<div role="status" style="display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 0;text-align:center"><span aria-hidden="true" style="display:inline-block;width:32px;height:32px;background-color:var(--ui-text-highlighted);-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ s.spinner }}</span><span style="color:var(--ui-text-muted);font-size:14px">This only takes a moment.</span></div>
+</sc-if>
+<sc-if value="{{ s.title }}" hint-placeholder-val="{{ true }}">
+<div style="display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ s.title }}</span><sc-if value="{{ s.desc }}"><span style="color:var(--ui-text-muted);font-size:14px;line-height:22px;text-wrap:pretty">{{ s.desc }}</span></sc-if></div>
+</sc-if>
+<sc-if value="{{ notice }}">
+<div style="display:flex;gap:10px;padding:12px 14px;background:{{ notice.bg }};color:{{ notice.fg }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;margin-top:2px;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ notice.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ notice.icon }}.svg') center / contain no-repeat"></span><div style="flex:1;display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:20px"><span style="font-weight:600">{{ notice.title }}</span><sc-if value="{{ notice.text }}"><span style="color:var(--ui-text-toned);text-wrap:pretty">{{ notice.text }}</span></sc-if></div></div>
+</sc-if>
+<sc-if value="{{ result }}">
+<div style="display:flex;flex-direction:column;gap:16px">
+<span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:{{ result.bg }};color:{{ result.fg }}"><span aria-hidden="true" style="display:inline-block;width:22px;height:22px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ result.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ result.icon }}.svg') center / contain no-repeat"></span></span>
+<div style="display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ result.title }}</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">{{ result.text }}</span><sc-if value="{{ result.note }}"><span style="color:var(--ui-text-muted);font-size:13px;line-height:20px;text-wrap:pretty">{{ result.note }}</span></sc-if></div>
+<div style="display:flex;flex-direction:column;gap:8px">
+<sc-for list="{{ result.actions }}" as="a" hint-placeholder-count="1">
+<span data-act="{{ a.act }}" style="height:{{ btnH }};display:flex;align-items:center;justify-content:center;font-weight:500;font-size:14px;background:{{ a.bg }};color:{{ a.fg }};border:{{ a.bd }}">{{ a.t }}</span>
+</sc-for>
+</div>
+</div>
+</sc-if>
+<sc-if value="{{ hasForm }}">
+<div style="display:flex;flex-direction:column;gap:18px">
+<sc-for list="{{ fields }}" as="f" hint-placeholder-count="2">
+<div style="display:flex;flex-direction:column;gap:6px">
+<div style="display:flex;justify-content:space-between;gap:8px;font-size:13px"><span style="font-weight:500;color:var(--ui-text-highlighted)">{{ f.label }}</span><sc-if value="{{ f.count }}"><span style="font:400 12px 'IBM Plex Mono',monospace;color:{{ f.countFg }}">{{ f.count }}</span></sc-if><sc-if value="{{ f.link }}"><span data-act="forgot" style="color:var(--ui-text-toned);text-decoration:underline;text-underline-offset:3px">{{ f.link }}</span></sc-if></div>
+<div style="height:{{ inH }};padding:0 4px 0 10px;display:flex;align-items:center;gap:8px;border:1px solid {{ f.bd }};box-shadow:{{ f.sh }};background:{{ f.bg }};font-size:{{ inF }}">
+<span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:{{ f.fg }};letter-spacing:{{ f.ls }}">{{ f.shownValue }}</span>
+<sc-if value="{{ f.pw }}"><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ f.eye }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ f.eye }}.svg') center / contain no-repeat"></span></span></sc-if>
+</div>
+<sc-if value="{{ f.err }}"><span style="display:flex;gap:6px;align-items:center;color:var(--ui-error);font-size:12px;line-height:18px"><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/circle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat"></span>{{ f.err }}</span></sc-if>
+<sc-if value="{{ f.help }}"><span style="color:var(--ui-text-muted);font-size:12px;line-height:18px">{{ f.help }}</span></sc-if>
+<sc-for list="{{ f.hints }}" as="h" hint-placeholder-count="0">
+<span style="display:flex;gap:8px;align-items:center;font-size:12px;line-height:18px;color:{{ h.fg }}"><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/{{ h.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ h.icon }}.svg') center / contain no-repeat"></span><span style="color:{{ h.tfg }}">{{ h.t }}</span></span>
+</sc-for>
+</div>
+</sc-for>
+<span data-act="submit" style="height:{{ btnH }};display:flex;align-items:center;justify-content:center;gap:8px;font-weight:500;font-size:14px;background:var(--ui-primary);color:var(--ui-bg);opacity:{{ submitOpacity }}"><sc-if value="{{ s.submit.loading }}"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span></sc-if>{{ s.submit.t }}</span>
+<sc-if value="{{ s.below }}"><span data-act="below" style="align-self:center;color:var(--ui-text-toned);font-size:13px;text-decoration:underline;text-underline-offset:3px">{{ s.below }}</span></sc-if>
+</div>
+</sc-if>
+</div>
+<sc-if value="{{ hasFooter }}">
+<div style="width:{{ w }};max-width:100%;padding:{{ footPad }};display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ui-text-muted)">
+<span style="display:flex;gap:6px;flex-wrap:wrap;align-items:center"><sc-if value="{{ s.footer }}"><span>{{ s.footer.pre }}</span><span data-act="footer" style="color:var(--ui-text-highlighted);font-weight:500;text-decoration:underline;text-underline-offset:3px">{{ s.footer.link }}</span></sc-if><sc-if value="{{ s.pending }}"><span style="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">API pending</span></sc-if></span>
+<span style="height:28px;padding:0 8px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/monitor.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/monitor.svg') center / contain no-repeat"></span>System</span>
+</div>
+</sc-if>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:480,&quot;height&quot;:620},&quot;s&quot;:{&quot;editor&quot;:null,&quot;tsType&quot;:&quot;object&quot;},&quot;mobile&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:false,&quot;tsType&quot;:&quot;boolean&quot;}}">
+class Component extends DCLogic {
+	renderVals() {
+		const s = this.props.s || {}
+		const m = !!this.props.mobile
+		const tone = t => ({ bg: 'var(--rc-' + t + '-soft)', fg: 'var(--ui-' + t + ')' })
+		const notice = s.notice ? { ...s.notice, ...tone(s.notice.tone) } : null
+		const result = s.result ? { ...s.result, ...tone(s.result.tone), actions: (s.result.actions || []).map((a, i) => i === 0 && !a.secondary ? { act: 'result-' + i, t: a.t, bg: 'var(--ui-primary)', fg: 'var(--ui-bg)', bd: '1px solid var(--ui-primary)' } : { act: 'result-' + i, t: a.t, bg: 'var(--ui-bg)', fg: 'var(--ui-text-highlighted)', bd: '1px solid var(--ui-border-accented)' }) } : null
+		const dis = s.submit && (s.submit.loading || s.submit.disabled)
+		const fields = (s.fields || []).map(f => {
+			const has = f.value != null && f.value !== ''
+			const masked = f.pw && !f.shown && has
+			return {
+				...f,
+				shownValue: has ? (masked ? '•'.repeat(Math.min(f.value.length, 16)) : f.value) : (f.ph || ''),
+				fg: dis || f.ro ? 'var(--ui-text-dimmed)' : has ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)',
+				ls: masked ? '2px' : 'normal',
+				bd: f.err ? 'var(--ui-error)' : f.focus ? 'var(--ui-primary)' : f.ro || dis ? 'var(--ui-border)' : 'var(--ui-border-accented)',
+				sh: f.err ? 'inset 0 0 0 1px var(--ui-error)' : f.focus ? 'inset 0 0 0 1px var(--ui-primary)' : 'none',
+				bg: f.ro || dis ? 'var(--ui-bg-elevated)' : 'var(--ui-bg)',
+				eye: f.shown ? 'eye-off' : 'eye',
+				countFg: f.countErr ? 'var(--ui-error)' : 'var(--ui-text-muted)',
+				hints: (f.hints || []).map(h => ({ t: h.t, icon: h.s === 'met' ? 'check' : h.s === 'err' ? 'circle-alert' : 'circle', fg: h.s === 'met' ? 'var(--ui-success)' : h.s === 'err' ? 'var(--ui-error)' : 'var(--ui-text-muted)', tfg: h.s === 'met' ? 'var(--ui-text)' : h.s === 'err' ? 'var(--ui-error)' : 'var(--ui-text-muted)' }))
+			}
+		})
+		return {
+			s, notice, result, fields,
+			hasForm: fields.length > 0 && !!s.submit,
+			hasFooter: !!(s.footer || s.pending || !m),
+			submitOpacity: s.submit && s.submit.disabled && !s.submit.loading ? '0.4' : '1',
+			w: m ? '100%' : '400px',
+			border: m ? '0' : '1px solid var(--ui-border)',
+			pad: m ? '8px 20px 0' : '40px',
+			footPad: m ? '0 20px 24px' : '0',
+			btnH: m ? '44px' : '40px',
+			inH: m ? '44px' : '40px',
+			inF: m ? '16px' : '14px',
+			edge: 'transparent'
+		}
+	}
+}
+</script>
+</body>
+</html>

docs/design/source/RenewCMS Components Primitives.dc.html

@@ -0,0 +1,344 @@
+<!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>
+<helmet>
+<link rel="icon" href="brand/favicon.svg">
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>body{margin:0;font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px}*{box-sizing:border-box}a{color:inherit;text-underline-offset:3px}a:hover{opacity:.8}code{font-family:'IBM Plex Mono',monospace;font-size:12px}</style>
+</helmet>
+<div ref="{{ rootRef }}" data-screen-label="Primitives" style="--ui-bg:#ffffff;--ui-bg-muted:#fafafa;--ui-bg-elevated:#f3f2f0;--ui-bg-accented:#e6e4e0;--ui-bg-inverted:#111111;--ui-text-dimmed:#999999;--ui-text-muted:#666666;--ui-text-toned:#444444;--ui-text:#222222;--ui-text-highlighted:#111111;--ui-text-inverted:#ffffff;--ui-border:#e6e4e0;--ui-border-muted:#f3f2f0;--ui-border-accented:#8a8783;--ui-primary:#111111;--ui-secondary:#635643;--ui-success:#315b33;--ui-info:#34536d;--ui-warning:#6c4700;--ui-error:#882c21;--rc-primary-hover:#333333;--rc-primary-active:#444444;--rc-error-hover:#6a1a11;--rc-sand:#e8dfd1;--rc-success-soft:#eaefea;--rc-info-soft:#ebeef0;--rc-warning-soft:#f0ede6;--rc-error-soft:#f3eae9;--rc-overlay:rgb(10 10 10 / 0.4);--rc-shadow-pop:0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06);--rc-shadow-modal:0 16px 48px rgb(17 17 17 / 0.18);background:var(--ui-bg-muted);color:var(--ui-text);min-height:100vh">
+<div style="max-width:1200px;margin:0 auto;padding:48px 24px 96px;display:flex;flex-direction:column">
+
+<div style="display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px;padding-bottom:40px">
+<div style="flex:1;min-width:280px;display:flex;flex-direction:column;gap:10px">
+<h1 style="margin:0;font:600 32px/40px 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em;color:var(--ui-text-highlighted)">Components: themed primitives</h1>
+<p style="margin:0;max-width:720px;font-size:15px;line-height:24px;color:var(--ui-text-toned);text-wrap:pretty">These are Nuxt UI components with the Ledger config applied. Every specimen reads the real <code>--ui-*</code> variables, so the theme switch on the right changes the whole page. The product components are on <a href="RenewCMS Components Product.dc.html">a second page</a>.</p>
+</div>
+<div role="radiogroup" aria-label="Theme" style="display:flex;border:1px solid var(--ui-border-accented);background:var(--ui-bg)">
+<sc-for list="{{ modes }}" as="m" hint-placeholder-count="3">
+<button role="radio" aria-checked="{{ m.on }}" onClick="{{ m.pick }}" style="all:unset;cursor:pointer;height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;font-weight:500;background:{{ m.bg }};color:{{ m.fg }}" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px">{{ m.label }}</button>
+</sc-for>
+</div>
+</div>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Button</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">There are five roles. A screen gets one primary button. Danger is used only for irreversible actions, and always inside a confirmation step.</p>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:flex;flex-direction:column;gap:28px">
+<div style="display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end">
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span><code style="color:var(--ui-text-muted)">primary</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--ui-bg);color:var(--ui-text-highlighted);border:1px solid var(--ui-border-accented);font-weight:500">Cancel</span><code style="color:var(--ui-text-muted)">secondary</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;color:var(--ui-text-toned);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/book-open.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/book-open.svg') center / contain no-repeat"></span>Preview</span><code style="color:var(--ui-text-muted)">ghost</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-error);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat"></span>Delete article</span><code style="color:var(--ui-text-muted)">danger</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span><code style="color:var(--ui-text-muted)">icon-only</code></div>
+</div>
+<div style="display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end">
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:28px;padding:0 10px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;font-size:12px">Save</span><code style="color:var(--ui-text-muted)">sm 28</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500">Save</span><code style="color:var(--ui-text-muted)">md 32</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:40px;padding:0 16px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;font-size:14px">Save</span><code style="color:var(--ui-text-muted)">lg 40</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:44px;padding:0 18px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;font-size:16px">Save</span><code style="color:var(--ui-text-muted)">xl 44, touch</code></div>
+</div>
+<div style="display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end">
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500">Publish</span><code style="color:var(--ui-text-muted)">default</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--rc-primary-hover);color:var(--ui-bg);font-weight:500">Publish</span><code style="color:var(--ui-text-muted)">hover</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;outline:2px solid var(--ui-primary);outline-offset:2px">Publish</span><code style="color:var(--ui-text-muted)">focus-visible</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--rc-primary-active);color:var(--ui-bg);font-weight:500">Publish</span><code style="color:var(--ui-text-muted)">active</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;opacity:0.4">Publish</span><code style="color:var(--ui-text-muted)">disabled</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>Publishing…</span><code style="color:var(--ui-text-muted)">loading</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--rc-error-hover);color:var(--ui-bg);font-weight:500">Delete article</span><code style="color:var(--ui-text-muted)">danger hover</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted);border:1px solid var(--ui-border-accented);font-weight:500">Cancel</span><code style="color:var(--ui-text-muted)">secondary hover</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/book-open.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/book-open.svg') center / contain no-repeat"></span>Preview</span><code style="color:var(--ui-text-muted)">ghost hover</code></div>
+</div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UButton</code>. Primary <code>color="primary" variant="solid"</code> · secondary <code>color="neutral" variant="outline"</code> · ghost <code>color="neutral" variant="ghost"</code> · danger <code>color="error" variant="solid"</code> · icon-only <code>square icon="i-lucide-ellipsis" :aria-label</code> wrapped in <code>UTooltip</code>.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Loading</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>:loading</code> swaps the leading icon for <code>i-lucide-loader-circle</code> and disables the button. The label changes to the -ing form ("Publishing…") and the button width stays fixed, so the layout doesn't jump. <code>loading-auto</code> is used on async <code>@click</code> handlers.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Keyboard, ARIA</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Native <code>&lt;button&gt;</code>, activated with Enter or Space. Icon-only buttons need an <code>aria-label</code>. Loading sets <code>aria-busy="true"</code>. Disabled buttons stay focusable only when a tooltip explains why they're disabled.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Responsive</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>md</code> on desktop, <code>xl</code> (44 px) below <code>md</code>. Primary page actions go full width in sticky footers on 390 px screens.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Bend</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Disabled opacity is 40% instead of Nuxt UI's 75%, because a 75% black button still looks clickable. Hover darkens the button one step instead of using Nuxt UI's <code>/75</code> alpha, so the label keeps its contrast.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Input, password input, textarea</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">One outline style for every field. Focus adds a 2 px ink ring inside the edge. Errors turn the edge brick red and always come with a message, never color alone.</p>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:24px">
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-muted)">marta</span><code style="color:var(--ui-text-muted)">default, placeholder</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-text-muted);background:var(--ui-bg);color:var(--ui-text-muted)">marta</span><code style="color:var(--ui-text-muted)">hover</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-primary);box-shadow:inset 0 0 0 1px var(--ui-primary);background:var(--ui-bg);color:var(--ui-text-highlighted)">mar<span style="width:1px;height:16px;background:var(--ui-text-highlighted)"></span></span><code style="color:var(--ui-text-muted)">focus</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-error);box-shadow:inset 0 0 0 1px var(--ui-error);background:var(--ui-bg);color:var(--ui-text-highlighted)">ma</span><code style="color:var(--ui-text-muted)">error</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-border);background:var(--ui-bg-elevated);color:var(--ui-text-dimmed)">owner@renew.example</span><code style="color:var(--ui-text-muted)">disabled / read-only</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 4px 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)"><span style="display:flex;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat"></span></span><span style="flex:1">plaster</span><span style="width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></span><code style="color:var(--ui-text-muted)">leading icon, clear</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 4px 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)"><span style="flex:1;letter-spacing:3px">••••••••••</span><span style="width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><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/eye.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/eye.svg') center / contain no-repeat"></span></span></span><code style="color:var(--ui-text-muted)">password, hidden</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 4px 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)"><span style="flex:1">limewash2026</span><span style="width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned);background:var(--ui-bg-elevated)"><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/eye-off.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/eye-off.svg') center / contain no-repeat"></span></span></span><code style="color:var(--ui-text-muted)">password, shown</code></div>
+<div style="display:flex;flex-direction:column;gap:8px;grid-column:span 2"><span style="min-height:80px;padding:6px 10px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted)">A short first paragraph. You can keep writing in the editor.</span><code style="color:var(--ui-text-muted)">textarea, autoresize 3–8 rows</code></div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UInput variant="outline" color="primary"</code>, <code>:highlight</code> bound to the field error so the edge turns red. The search field is <code>icon="i-lucide-search"</code> with a <code>#trailing</code> clear <code>UButton</code>. <code>UTextarea autoresize :rows="3" :maxrows="8"</code>.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Password</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UInput :type="shown ? 'text' : 'password'"</code> with a <code>#trailing</code> ghost <code>UButton</code>. <code>aria-label</code> reads "Show password" or "Hide password", with <code>aria-pressed</code> and <code>aria-controls</code>. <code>autocomplete</code> is <code>current-password</code> on log in and <code>new-password</code> on register and reset. Showing the password never clears or moves focus.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">States</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Default, hover (edge goes to muted), focus (2 px ink), filled, error, disabled, read-only (same look as disabled but selectable and focusable, used for the email on the reset screen). Fields are 16 px text below <code>md</code>.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Placeholder</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Placeholders use <code>--ui-text-muted</code> (5.7:1) and only show an example. The label always carries the meaning.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Form field</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">A label on top, then the control, then the help text or the error in the same spot. The right-hand hint slot holds the character counter. Every field in the product is required, so none are marked.</p>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:32px">
+<div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;justify-content:space-between"><span style="font-weight:500;color:var(--ui-text-highlighted)">Username</span><span style="font:400 12px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">5 / 20</span></div><span style="height:32px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted)">marta</span><span style="color:var(--ui-text-muted);font-size:12px;line-height:18px">3 to 20 characters. You'll use it to log in.</span></div>
+<div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;justify-content:space-between"><span style="font-weight:500;color:var(--ui-text-highlighted)">Username</span><span style="font:400 12px 'IBM Plex Mono',monospace;color:var(--ui-error)">2 / 20</span></div><span style="height:32px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-error);box-shadow:inset 0 0 0 1px var(--ui-error);background:var(--ui-bg);color:var(--ui-text-highlighted)">ma</span><span style="display:flex;gap:6px;align-items:center;color:var(--ui-error);font-size:12px;line-height:18px"><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/circle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat"></span>Use at least 3 characters.</span></div>
+<div style="display:flex;flex-direction:column;gap:6px"><span style="font-weight:500;color:var(--ui-text-highlighted)">Email</span><span style="height:32px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-error);box-shadow:inset 0 0 0 1px var(--ui-error);background:var(--ui-bg);color:var(--ui-text-highlighted)">marta@renew</span><span style="display:flex;gap:6px;align-items:center;color:var(--ui-error);font-size:12px;line-height:18px"><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/circle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat"></span>Enter a full email address, like name@example.com.</span></div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UForm :schema :state @submit</code> + <code>UFormField name label help</code>, with the counter in the <code>#hint</code> slot. Validation runs on blur and on submit, then on every input once a field has an error, so the error clears as soon as it's fixed. The schema mirrors the API rules exactly, so a validator 400 shouldn't reach the UI.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">ARIA</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Nuxt UI links the label and <code>aria-describedby</code> (help or error) and sets <code>aria-invalid</code>. On a failed submit, focus moves to the first invalid field. Error text sits in the help slot, so there is no layout shift.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Checkbox, switch, select</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">All three are square. The Preview toggle in the editor is the only switch. The select sets sort order in the mobile article list. No screen needs a checkbox yet, but it's themed so it matches if one gets added.</p>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start">
+<div style="display:flex;flex-direction:column;gap:12px">
+<span style="display:flex;align-items:center;gap:8px"><span style="width:16px;height:16px;border:1px solid var(--ui-border-accented);background:var(--ui-bg)"></span>Off</span>
+<span style="display:flex;align-items:center;gap:8px"><span style="width:16px;height:16px;background:var(--ui-primary);color:var(--ui-bg);display:flex;align-items:center;justify-content:center"><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/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span></span>On</span>
+<span style="display:flex;align-items:center;gap:8px"><span style="width:16px;height:16px;background:var(--ui-primary);outline:2px solid var(--ui-primary);outline-offset:2px"></span>Focus</span>
+<span style="display:flex;align-items:center;gap:8px;opacity:0.4"><span style="width:16px;height:16px;border:1px solid var(--ui-border-accented)"></span>Disabled</span>
+</div>
+<div style="display:flex;flex-direction:column;gap:12px">
+<span style="display:flex;align-items:center;gap:10px"><span style="width:36px;height:20px;background:var(--ui-bg-accented);padding:2px;display:flex"><span style="width:16px;height:16px;background:var(--ui-bg);box-shadow:0 0 0 1px var(--ui-border-accented)"></span></span>Preview off</span>
+<span style="display:flex;align-items:center;gap:10px"><span style="width:36px;height:20px;background:var(--ui-primary);padding:2px;display:flex;justify-content:flex-end"><span style="width:16px;height:16px;background:var(--ui-bg)"></span></span>Preview on</span>
+<span style="display:flex;align-items:center;gap:10px"><span style="width:36px;height:20px;background:var(--ui-primary);padding:2px;display:flex;justify-content:flex-end;outline:2px solid var(--ui-primary);outline-offset:2px"><span style="width:16px;height:16px;background:var(--ui-bg)"></span></span>Focus</span>
+<span style="display:flex;align-items:center;gap:10px;opacity:0.4"><span style="width:36px;height:20px;background:var(--ui-bg-accented);padding:2px;display:flex"><span style="width:16px;height:16px;background:var(--ui-bg)"></span></span>Disabled</span>
+</div>
+<div style="display:flex;flex-direction:column;gap:4px;width:240px">
+<span style="height:32px;padding:0 8px 0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-primary);box-shadow:inset 0 0 0 1px var(--ui-primary);background:var(--ui-bg);color:var(--ui-text-highlighted)"><span style="flex:1">Newest updated first</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat"></span></span>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px">
+<div style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)"><span style="flex:1">Newest updated first</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/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span></div>
+<div style="height:32px;padding:0 8px;display:flex;align-items:center;color:var(--ui-text)">Oldest updated first</div>
+</div>
+</div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UCheckbox</code>, <code>USwitch</code> (slots <code>base</code> and <code>thumb</code> set to <code>rounded-none</code>), <code>USelect :items value-key="value"</code>, whose content uses <code>--shadow-popover</code>.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Keyboard</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Space toggles a checkbox or switch. The select opens with Enter, Space or ↓, moves with the arrow keys and type-ahead, and closes with Esc, returning focus to the trigger. The switch uses <code>role="switch"</code> and <code>aria-checked</code>, and its visible label is its name.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Badge</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Badges show status or a count. They never replace a button. Solid ink is for the one state that matters most in a list. Soft semantic badges are for system messages.</p>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:flex;flex-wrap:wrap;gap:20px;align-items:center">
+<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span>
+<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span>
+<span style="height:20px;min-width:20px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned);font:500 11px 'IBM Plex Mono',monospace">12</span>
+<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;background:var(--rc-success-soft);color:var(--ui-success);font-size:12px;font-weight:500">success</span>
+<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;background:var(--rc-info-soft);color:var(--ui-info);font-size:12px;font-weight:500">info</span>
+<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;background:var(--rc-warning-soft);color:var(--ui-warning);font-size:12px;font-weight:500">warning</span>
+<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;background:var(--rc-error-soft);color:var(--ui-error);font-size:12px;font-weight:500">error</span>
+<span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font:500 11px 'IBM Plex Mono',monospace">GET</span>
+<span style="height:26px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:13px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online · md</span>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UBadge</code>. Solid ink <code>color="neutral" variant="solid"</code> · outline <code>color="neutral" variant="outline"</code> · count <code>color="neutral" variant="soft" size="sm"</code> · semantic <code>variant="soft"</code>. Sizes are <code>sm</code> (22 px, in tables) and <code>md</code> (26 px, in the editor header).</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">ARIA</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Badges are text, not live regions. When a status changes, the announcement comes from the toast.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Alert</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Alerts are for messages that belong to a page and stay until the situation changes. Anything that confirms an action someone just took is a toast instead.</p>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:16px">
+<div role="status" style="display:flex;gap:10px;padding:12px 14px;background:var(--rc-info-soft);color:var(--ui-info)"><span style="padding-top:2px;display:flex"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font-weight:600">Your session expired</span><span style="color:var(--ui-text-toned)">Log in again to pick up where you left off.</span></div></div>
+<div role="status" style="display:flex;gap:10px;padding:12px 14px;background:var(--rc-success-soft);color:var(--ui-success)"><span style="padding-top:2px;display:flex"><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-check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-check.svg') center / contain no-repeat"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font-weight:600">Password changed</span><span style="color:var(--ui-text-toned)">Log in with your new password.</span></div><span style="display:flex;color:var(--ui-text-toned);height:20px;align-items:center"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></div>
+<div role="status" style="display:flex;gap:10px;padding:12px 14px;background:var(--rc-warning-soft);color:var(--ui-warning)"><span style="padding-top:2px;display:flex"><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/triangle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/triangle-alert.svg') center / contain no-repeat"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font-weight:600">Almost at the length limit</span><span style="color:var(--ui-text-toned)">9 240 of 10 000 characters used. Images and formatting count too.</span></div></div>
+<div role="alert" style="display:flex;gap:10px;padding:12px 14px;background:var(--rc-error-soft);color:var(--ui-error)"><span style="padding-top:2px;display:flex"><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 your articles</span><span style="color:var(--ui-text-toned)">Check your connection and try again.</span></div><span style="align-self:flex-start;height:28px;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>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UAlert variant="soft" :color :icon :title :description :actions</code>. <code>close</code> only on alerts that are safe to dismiss (password changed, session expired). The error alert has no close button because its retry is the way out.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">ARIA</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Info, success and warning use <code>role="status"</code> and error uses <code>role="alert"</code>. Alerts that are already there when the page loads aren't announced again. The description text uses <code>--ui-text-toned</code> rather than the semantic color, so long text stays readable.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Toast</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Toasts confirm that an action finished or failed. Each one has a short title and, at most, one action.</p>
+<div style="background:var(--ui-bg-muted);border:1px solid var(--ui-border);padding:24px;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start">
+<div style="width:356px;max-width:100%;display:flex;flex-direction:column;gap:8px">
+<div style="display:flex;gap:10px;padding:12px 14px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop)"><span style="display:flex;color:var(--ui-success);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-check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-check.svg') center / contain no-repeat"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;color:var(--ui-text-highlighted)">Article published</span><span style="color:var(--ui-text-muted)">"Winter checklist for timber windows" is now online.</span></div><span style="display:flex;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></div>
+<div style="display:flex;gap:10px;padding:12px 14px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop)"><span style="display:flex;color:var(--ui-info);padding-top:2px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;color:var(--ui-text-highlighted)">That article no longer exists</span><span style="color:var(--ui-text-muted)">It was deleted somewhere else, so we removed it from the list.</span></div><span style="display:flex;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></div>
+<div style="display:flex;gap:10px;padding:12px 14px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop)"><span style="display:flex;color:var(--ui-error);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;color:var(--ui-text-highlighted)">Couldn't unpublish</span><span style="color:var(--ui-text-muted)">The server didn't respond.</span></div><span style="align-self:flex-start;height:28px;padding:0 10px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);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>Retry</span></div><span style="display:flex;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></div>
+</div>
+<div style="flex:1;min-width:260px;display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);font-size:13px;border-top:1px solid var(--ui-border)">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Placement</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Bottom right on desktop, 24 px from the edges. Bottom center at full width minus 16 px on mobile, above the sticky action bar.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Duration</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Success and info close after 5 s. Errors with retry stay until dismissed or retried. The timer pauses on hover and on focus.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Stack</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">At most 3 visible, newest at the bottom. A fourth pushes out the oldest non-error toast. Repeating the same action replaces its toast instead of adding a new one.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UApp :toaster="{ position: 'bottom-right', duration: 5000, max: 3 }"</code>. Toasts are raised with <code>useToast().add({ id, title, description, color, icon, actions, duration })</code>, where <code>id</code> is the action plus the article id so a repeat replaces the old toast. Errors use <code>duration: 0</code>. The progress bar is off.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">ARIA</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The Reka toast region announces politely, and errors assertively. F8 jumps to the region. Esc closes the focused toast.</span>
+</div>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Modal and slideover</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Modals ask a question or hold a short form. Slideovers carry navigation and side panels on small screens. Both sit over a 40% ink overlay.</p>
+<div style="background:var(--rc-overlay);padding:40px 24px;display:flex;flex-wrap:wrap;gap:32px;justify-content:center;align-items:flex-start">
+<div role="dialog" aria-modal="true" style="width:440px;max-width:100%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal)">
+<div style="padding:20px 24px 0;display:flex;align-items:flex-start;gap:12px"><div style="flex:1;display:flex;flex-direction:column;gap:4px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Leave without saving?</span><span style="color:var(--ui-text-muted)">You have changes to "How we price a bathroom renovation" that haven't been saved.</span></div><span style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></div>
+<div style="padding:20px 24px;display:flex;justify-content:flex-end;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">Discard changes</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500">Keep editing</span></div>
+</div>
+<div style="width:320px;max-width:100%;height:340px;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal);display:flex;flex-direction:column">
+<div style="height:52px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--ui-border)"><span style="flex:1;font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">Details</span><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></div>
+<div style="padding:16px;display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:14px"><span style="color:var(--ui-text-muted)">Created</span><span>12 Mar 2026, 09:14</span><span style="color:var(--ui-text-muted)">Updated</span><span>Today, 11:02</span><span style="color:var(--ui-text-muted)">ID</span><span style="font-family:'IBM Plex Mono',monospace">12</span><span style="color:var(--ui-text-muted)">Images</span><span>3</span></div>
+</div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UModal :title :description</code> with the <code>#footer</code> slot for actions, width <code>sm:max-w-md</code>. Opened programmatically with <code>useOverlay().create(ConfirmDialog)</code>. <code>USlideover side="right"</code> for details, <code>side="left"</code> for mobile navigation (built into <code>UDashboardSidebar</code>).</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Button order</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The safe action is primary and sits on the right, where the eye lands. In destructive confirmations, the danger button is on the right and Cancel on the left (see ConfirmDialog). On mobile the buttons stack full width, with the primary on top.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Keyboard, ARIA</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Focus is trapped and starts on the least destructive button. Esc and the overlay close it unless it's <code>:dismissible="false"</code>, which is used while an action is running. Focus returns to the trigger. The title is the <code>aria-labelledby</code> and the description is the <code>aria-describedby</code>.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Responsive</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Below <code>sm</code>, modals sit 16 px from the screen edges and slideovers take the full width. Motion follows the foundations: 240 ms, and instant with reduced motion.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Dropdown menu and tooltip</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">The row-action menu is the main dropdown. Delete always comes last, below a separator, in brick red. Tooltips name icon-only buttons and show their keyboard shortcut.</p>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start">
+<div style="display:flex;flex-direction:column;align-items:flex-end;gap:4px;width:220px">
+<span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span>
+<div role="menu" style="width:220px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px">
+<div style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat"></span>Edit</div>
+<div style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-text)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe-lock.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe-lock.svg') center / contain no-repeat"></span>Unpublish</div>
+<div style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-text)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat"></span>Copy API URL</div>
+<div style="height:1px;background:var(--ui-border);margin:4px 0"></div>
+<div style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat"></span>Delete…</div>
+</div>
+</div>
+<div style="display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:4px">
+<div style="background:var(--ui-bg-inverted);color:var(--ui-text-inverted);padding:4px 8px;display:flex;align-items:center;gap:8px;font-size:12px">Bold<span style="display:flex;gap:2px"><span style="height:18px;min-width:18px;padding:0 4px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-text-muted);font:500 11px 'IBM Plex Mono',monospace">Ctrl</span><span style="height:18px;min-width:18px;padding:0 4px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-text-muted);font:500 11px 'IBM Plex Mono',monospace">B</span></span></div>
+<span style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/bold.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/bold.svg') center / contain no-repeat"></span></span>
+</div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UDropdownMenu :items :content="{ align: 'end' }"</code>, with items grouped in nested arrays so separators appear automatically. The Delete item is <code>color: 'error'</code>, and its label ends in "…" because it opens a confirmation. <code>UTooltip :text :kbds="['ctrl', 'b']" :delay-duration="400"</code>.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Keyboard</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The menu opens with Enter, Space or ↓. Arrow keys and type-ahead move through it, Home and End jump to the ends, and Esc closes it and returns focus. Tooltips appear on focus as well as hover and never hold information that isn't also in the <code>aria-label</code>.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Touch</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Tooltips don't show on touch, so every icon-only control on mobile also appears in a labeled menu or has a visible label.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Tabs</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Tabs filter the article list. Each count comes from the full list, so it doesn't change while you search.</p>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:flex;flex-direction:column;gap:24px">
+<div role="tablist" style="display:flex;gap:20px;border-bottom:1px solid var(--ui-border)">
+<span role="tab" aria-selected="true" style="height:36px;display:flex;align-items:center;gap:6px;border-bottom:2px solid var(--ui-primary);margin-bottom:-1px;font-weight:500;color:var(--ui-text-highlighted)">All<span style="font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">6</span></span>
+<span role="tab" style="height:36px;display:flex;align-items:center;gap:6px;color:var(--ui-text-toned)">Online<span style="font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">4</span></span>
+<span role="tab" style="height:36px;display:flex;align-items:center;gap:6px;color:var(--ui-text-highlighted);border-bottom:2px solid var(--ui-border-accented);margin-bottom:-1px">Drafts<span style="font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">2</span></span>
+<span role="tab" style="height:30px;align-self:center;padding:0 4px;display:flex;align-items:center;gap:6px;color:var(--ui-text-toned);outline:2px solid var(--ui-primary);outline-offset:0">Focused</span>
+</div>
+<span style="color:var(--ui-text-muted);font-size:12px">From left: selected, default, hover, focus-visible.</span>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UTabs variant="link" color="neutral" :content="false" :items v-model</code>. The count goes in the <code>#trailing</code> slot as the mono <code>sm</code> count badge. The value syncs to <code>?status=online|draft</code> so the filtered view can be linked.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Keyboard</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Roving tabindex: Tab enters the tab list on the selected tab, and ← and → move and activate. Each tab's accessible name includes its count, for example "Drafts, 2 articles".</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Responsive</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Tabs stay in one row at 360 px, which is why the labels are short. Each tab is 44 px tall on touch.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Table and pagination</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Rows are 44 px with hairline separators, and only the Updated column sorts. Pagination appears only when a filter shows more than 25 articles.</p>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border)">
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 150px 44px;height:36px;align-items:center;padding:0 12px;background:var(--ui-bg-elevated);color:var(--ui-text-muted);font-weight:500"><span>Title</span><span>Status</span><span style="display:flex;align-items:center;gap:4px;color:var(--ui-text-highlighted)">Updated<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat"></span></span><span></span></div>
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 150px 44px;height:44px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border)"><span style="font-weight:500;color:var(--ui-text-highlighted)">How we price a bathroom renovation</span><span>default</span><span style="color:var(--ui-text-muted)">2 hours ago</span><span style="display:flex;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span></div>
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 150px 44px;height:44px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border);background:var(--ui-bg-elevated)"><span style="font-weight:500;color:var(--ui-text-highlighted)">Choosing lime plaster for old stone walls</span><span>hover</span><span style="color:var(--ui-text-muted)">Yesterday</span><span style="display:flex;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span></div>
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 150px 44px;height:44px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border);outline:2px solid var(--ui-primary);outline-offset:-2px"><span style="font-weight:500;color:var(--ui-text-highlighted)">Before and after: the Rue Verte kitchen</span><span>focus-visible</span><span style="color:var(--ui-text-muted)">3 days ago</span><span style="display:flex;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span></div>
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 150px 44px;height:44px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border);opacity:0.5"><span style="font-weight:500;color:var(--ui-text-highlighted)">Winter checklist for timber windows</span><span style="display:flex;align-items:center;gap:6px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>busy</span><span style="color:var(--ui-text-muted)">5 days ago</span><span></span></div>
+<div style="display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border-top:1px solid var(--ui-border);flex-wrap:wrap"><span style="color:var(--ui-text-muted)">26–50 of 142</span><div style="display:flex;gap:4px"><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-left.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-left.svg') center / contain no-repeat"></span></span><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)">1</span><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500">2</span><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)">3</span><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)">…</span><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)">6</span><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat"></span></span></div></div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UTable :data :columns v-model:sorting v-model:global-filter v-model:pagination :loading</code> with TanStack <code>getPaginationRowModel</code>, and <code>@select</code> for row click. <code>UPagination :total :items-per-page="25" :sibling-count="1" show-edges</code>, active item <code>color="primary" variant="solid"</code>.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">States</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Default, hover (<code>bg-elevated</code>), focus-visible (2 px inset ring), busy (a row action is running: 50% opacity, a spinner in the status cell, <code>aria-busy</code>, actions disabled), loading (skeleton rows), empty (EmptyState in the <code>#empty</code> slot).</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Keyboard, ARIA</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Each row's title is a real link to the editor, so Tab reaches it and Enter opens it. The rest of the row is a click target for the mouse only. The sort header is a button with <code>aria-sort</code>. Pagination is a <code>nav</code> labeled "Pages", and the current page has <code>aria-current</code>.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Skeleton, avatar, kbd, separator</h2>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start">
+<div aria-hidden="true" style="width:320px;max-width:100%;display:flex;flex-direction:column;gap:14px">
+<div style="display:flex;gap:16px;align-items:center"><span style="flex:1;height:14px;background:var(--ui-bg-accented)"></span><span style="width:60px;height:20px;background:var(--ui-bg-accented)"></span><span style="width:70px;height:14px;background:var(--ui-bg-accented)"></span></div>
+<div style="display:flex;gap:16px;align-items:center"><span style="width:70%;height:14px;background:var(--ui-bg-accented)"></span><span style="width:60px;height:20px;background:var(--ui-bg-accented);margin-left:auto"></span><span style="width:70px;height:14px;background:var(--ui-bg-accented)"></span></div>
+<div style="display:flex;gap:16px;align-items:center"><span style="width:55%;height:14px;background:var(--ui-bg-accented)"></span><span style="width:60px;height:20px;background:var(--ui-bg-accented);margin-left:auto"></span><span style="width:70px;height:14px;background:var(--ui-bg-accented)"></span></div>
+</div>
+<div style="display:flex;gap:16px;align-items:flex-end">
+<div style="display:flex;flex-direction:column;gap:6px;align-items:center"><span style="width:24px;height:24px;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 10px 'IBM Plex Sans',sans-serif">MA</span><code style="color:var(--ui-text-muted)">marta</code></div>
+<div style="display:flex;flex-direction:column;gap:6px;align-items:center"><span style="width:32px;height:32px;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 12px 'IBM Plex Sans',sans-serif">JV</span><code style="color:var(--ui-text-muted)">jan_vries</code></div>
+<div style="display:flex;flex-direction:column;gap:6px;align-items:center"><span style="width:32px;height:32px;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 12px 'IBM Plex Sans',sans-serif">BO</span><code style="color:var(--ui-text-muted)">bob</code></div>
+</div>
+<div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
+<span style="height:22px;min-width:22px;padding:0 6px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-accented);border-bottom-width:2px;background:var(--ui-bg);font:500 12px 'IBM Plex Mono',monospace;color:var(--ui-text-toned)">Ctrl</span>
+<span style="height:22px;min-width:22px;padding:0 6px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-accented);border-bottom-width:2px;background:var(--ui-bg);font:500 12px 'IBM Plex Mono',monospace;color:var(--ui-text-toned)">S</span>
+<span style="color:var(--ui-text-muted);margin-left:6px">Save</span>
+</div>
+<div style="width:200px;display:flex;flex-direction:column;gap:12px"><div style="height:1px;background:var(--ui-border)"></div><div style="height:1px;background:var(--ui-border-accented)"></div></div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Skeleton</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>USkeleton</code> blocks shaped like the real layout: the same row heights, a badge-sized block and a date-sized block. The pulse runs at 1.6 s and stops with reduced motion. The container is <code>aria-busy="true"</code> and a visually hidden live region says "Loading articles". Skeletons appear only after 150 ms, so fast responses never flash.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Avatar</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UAvatar :alt="username" size="xs|sm"</code>. The initials come from the username: split on anything that isn't a letter or digit, take the first letter of the first two parts, or the first two letters if there is only one part, then uppercase. Sand <code>#d4c5b0</code> with ink text (11.2:1) in both themes. It's decorative (<code>aria-hidden</code>) because the username is always shown next to it.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Kbd</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UKbd variant="outline"</code>, only inside tooltips and the editor's shortcut hints. The editor shortcuts are Ctrl/⌘ S to save, plus TipTap's defaults: B, I, U, Z and Shift Z.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Separator</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>USeparator</code> uses <code>--ui-border</code> by default and <code>--ui-border-accented</code> between groups in dense toolbars. It's decorative, with <code>role="none"</code>, except between menu groups.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Color mode</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Three choices: System (the default), Light and Dark. The toggle at the top of this page is the component itself, so you can try it.</p>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">In the user menu: a <code>UDropdownMenu</code> group of three <code>type: 'checkbox'</code> items bound to <code>useColorMode().preference</code>. On auth screens: <code>UColorModeSelect</code> in the footer. Nuxt UI's <code>UColorModeButton</code> isn't used because it only toggles between light and dark and hides the system option. <code>colorMode: true</code> in the plugin handles storage and applying the <code>.dark</code> class before first paint.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">ARIA</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Menu items use <code>menuitemcheckbox</code>, with <code>aria-checked</code> on the current choice. The segmented variant is a <code>radiogroup</code> named "Theme".</span>
+</div>
+</section>
+
+</div>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;system&quot;,&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'system' | 'light' | 'dark'&quot;}}">
+class Component extends DCLogic {
+	state = { mode: this.props.theme ?? 'light' }
+	rootRef = React.createRef()
+	light = { '--ui-bg': '#ffffff', '--ui-bg-muted': '#fafafa', '--ui-bg-elevated': '#f3f2f0', '--ui-bg-accented': '#e6e4e0', '--ui-bg-inverted': '#111111', '--ui-text-dimmed': '#999999', '--ui-text-muted': '#666666', '--ui-text-toned': '#444444', '--ui-text': '#222222', '--ui-text-highlighted': '#111111', '--ui-text-inverted': '#ffffff', '--ui-border': '#e6e4e0', '--ui-border-muted': '#f3f2f0', '--ui-border-accented': '#8a8783', '--ui-primary': '#111111', '--ui-secondary': '#635643', '--ui-success': '#315b33', '--ui-info': '#34536d', '--ui-warning': '#6c4700', '--ui-error': '#882c21', '--rc-primary-hover': '#333333', '--rc-primary-active': '#444444', '--rc-error-hover': '#6a1a11', '--rc-sand': '#e8dfd1', '--rc-success-soft': '#eaefea', '--rc-info-soft': '#ebeef0', '--rc-warning-soft': '#f0ede6', '--rc-error-soft': '#f3eae9', '--rc-overlay': 'rgb(10 10 10 / 0.4)', '--rc-shadow-pop': '0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06)', '--rc-shadow-modal': '0 16px 48px rgb(17 17 17 / 0.18)' }
+	dark = { '--ui-bg': '#111111', '--ui-bg-muted': '#0a0a0a', '--ui-bg-elevated': '#1a1a1a', '--ui-bg-accented': '#222222', '--ui-bg-inverted': '#fafafa', '--ui-text-dimmed': '#666666', '--ui-text-muted': '#999999', '--ui-text-toned': '#cfccc7', '--ui-text': '#e6e4e0', '--ui-text-highlighted': '#fafafa', '--ui-text-inverted': '#111111', '--ui-border': '#333333', '--ui-border-muted': '#222222', '--ui-border-accented': '#666666', '--ui-primary': '#fafafa', '--ui-secondary': '#d4c5b0', '--ui-success': '#a3caa3', '--ui-info': '#a5c2db', '--ui-warning': '#dfb67d', '--ui-error': '#fba394', '--rc-primary-hover': '#e5e5e5', '--rc-primary-active': '#cccccc', '--rc-error-hover': '#e37e6e', '--rc-sand': '#d4c5b0', '--rc-success-soft': '#1f241f', '--rc-info-soft': '#202428', '--rc-warning-soft': '#2a251e', '--rc-error-soft': '#2c201f', '--rc-overlay': 'rgb(0 0 0 / 0.6)', '--rc-shadow-pop': '0 4px 16px rgb(0 0 0 / 0.5)', '--rc-shadow-modal': '0 16px 48px rgb(0 0 0 / 0.6)' }
+	resolved() {
+		if (this.state.mode === 'system') return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+		return this.state.mode
+	}
+	apply() {
+		const el = this.rootRef.current
+		if (!el) return
+		const vars = this.resolved() === 'dark' ? this.dark : this.light
+		for (const k in vars) el.style.setProperty(k, vars[k])
+		document.body.style.background = vars['--ui-bg-muted']
+	}
+	componentDidMount() { this.apply() }
+	componentDidUpdate(p) {
+		if (p.theme !== this.props.theme && this.props.theme) this.setState({ mode: this.props.theme })
+		this.apply()
+	}
+	renderVals() {
+		const modes = [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']].map(([k, label]) => {
+			const on = this.state.mode === k
+			return { label, on, bg: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-bg)' : 'var(--ui-text-toned)', pick: () => this.setState({ mode: k }) }
+		})
+		return { rootRef: this.rootRef, modes }
+	}
+}
+</script>
+</body>
+</html>

docs/design/source/RenewCMS Components Product.dc.html

@@ -0,0 +1,390 @@
+<!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>
+<helmet>
+<link rel="icon" href="brand/favicon.svg">
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet">
+<style>body{margin:0;font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px}*{box-sizing:border-box}a{color:inherit;text-underline-offset:3px}a:hover{opacity:.8}code{font-family:'IBM Plex Mono',monospace;font-size:12px}</style>
+</helmet>
+<div ref="{{ rootRef }}" data-screen-label="Product components" style="--ui-bg:#ffffff;--ui-bg-muted:#fafafa;--ui-bg-elevated:#f3f2f0;--ui-bg-accented:#e6e4e0;--ui-bg-inverted:#111111;--ui-text-dimmed:#999999;--ui-text-muted:#666666;--ui-text-toned:#444444;--ui-text:#222222;--ui-text-highlighted:#111111;--ui-text-inverted:#ffffff;--ui-border:#e6e4e0;--ui-border-muted:#f3f2f0;--ui-border-accented:#8a8783;--ui-primary:#111111;--ui-secondary:#635643;--ui-success:#315b33;--ui-info:#34536d;--ui-warning:#6c4700;--ui-error:#882c21;--rc-primary-hover:#333333;--rc-primary-active:#444444;--rc-error-hover:#6a1a11;--rc-sand:#e8dfd1;--rc-success-soft:#eaefea;--rc-info-soft:#ebeef0;--rc-warning-soft:#f0ede6;--rc-error-soft:#f3eae9;--rc-overlay:rgb(10 10 10 / 0.4);--rc-shadow-pop:0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06);--rc-shadow-modal:0 16px 48px rgb(17 17 17 / 0.18);background:var(--ui-bg-muted);color:var(--ui-text);min-height:100vh">
+<div style="max-width:1200px;margin:0 auto;padding:48px 24px 96px;display:flex;flex-direction:column">
+
+<div style="display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px;padding-bottom:40px">
+<div style="flex:1;min-width:280px;display:flex;flex-direction:column;gap:10px">
+<h1 style="margin:0;font:600 32px/40px 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em;color:var(--ui-text-highlighted)">Components: product</h1>
+<p style="margin:0;max-width:720px;font-size:15px;line-height:24px;color:var(--ui-text-toned);text-wrap:pretty">These are the RenewCMS components, built from the primitives on <a href="RenewCMS Components Primitives.dc.html">the first page</a>. Each one lists the Nuxt UI parts it's made from, its props, emits and slots, every state, and keyboard and responsive behavior. Components marked custom have no Nuxt UI equivalent.</p>
+</div>
+<div role="radiogroup" aria-label="Theme" style="display:flex;border:1px solid var(--ui-border-accented);background:var(--ui-bg)">
+<sc-for list="{{ modes }}" as="m" hint-placeholder-count="3">
+<button role="radio" aria-checked="{{ m.on }}" onClick="{{ m.pick }}" style="all:unset;cursor:pointer;height:32px;padding:0 12px;display:flex;align-items:center;font-weight:500;background:{{ m.bg }};color:{{ m.fg }}" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px">{{ m.label }}</button>
+</sc-for>
+</div>
+</div>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">AuthShell</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">One centered card for every public screen. The logo sits above the title, and the form or ResultPanel goes in the slot. Footer links and the theme select sit outside the card, so the card itself stays about one task.</p>
+<div style="background:var(--ui-bg-muted);border:1px solid var(--ui-border);padding:48px 16px;display:flex;flex-wrap:wrap;gap:40px;justify-content:center;align-items:flex-start">
+<div style="width:400px;max-width:100%;display:flex;flex-direction:column;gap:20px">
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:40px;display:flex;flex-direction:column;gap:24px">
+<svg width="32" height="32" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg>
+<div style="display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Log in</span><span style="color:var(--ui-text-muted);font-size:14px;line-height:22px">Welcome back. Log in to manage your articles.</span></div>
+<div style="height:140px;border:1px dashed var(--ui-border-accented);display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)">default slot</div>
+</div>
+<div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--ui-text-muted)"><span style="text-decoration:underline;text-underline-offset:3px;color:var(--ui-text-toned)">Forgot password?</span><span style="height:28px;padding:0 8px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned)"><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/monitor.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/monitor.svg') center / contain no-repeat"></span>System<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat"></span></span></div>
+</div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Custom layout component <code>AuthShell.vue</code>: a <code>UPageCard variant="outline"</code> inside a centered <code>main</code>, with <code>AppLogo</code>, and <code>UColorModeSelect size="sm"</code> in the footer. Forms inside it use <code>UForm</code> rather than <code>UAuthForm</code>, because every screen needs states (such as 403, 429 and an inline login during verification) that <code>UAuthForm</code> doesn't expose.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props, slots</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Props <code>title: string</code>, <code>description?: string</code>. Slots <code>default</code>, <code>notice</code> (an alert above the title, for session expired or password changed), <code>footer</code> (links). No emits.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The title is the page's <code>h1</code>, and <code>document.title</code> becomes "Log in · RenewCMS". On route change, focus moves to the <code>h1</code>. The logo is <code>alt="RenewCMS"</code> and isn't a link, since there's nothing public to go back to.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Responsive</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">400 px card from <code>sm</code> up, with its top 12 vh from the top. Below <code>sm</code>, the card loses its border and padding drops to 20 px, filling the screen on <code>--ui-bg</code>, and fields and buttons use <code>xl</code>.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">DashboardShell</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">The sidebar has three destinations, 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 <code>lg</code>, the sidebar becomes a slideover.</p>
+<div style="display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start">
+<div style="flex:1;min-width:min(100%,640px);height:380px;display:flex;border:1px solid var(--ui-border);background:var(--ui-bg-muted);overflow:hidden">
+<div style="width:224px;flex-shrink:0;background:var(--ui-bg);border-right:1px solid var(--ui-border);display:flex;flex-direction:column;padding:12px;gap:2px">
+<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:10px"><svg width="26" height="26" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">RenewCMS</span></div>
+<div style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;color:var(--ui-text-toned)"><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/house.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat"></span>Home</div>
+<div aria-current="page" style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;background:var(--rc-sand);color:#111;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat"></span>Articles</div>
+<div style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;color:var(--ui-text-toned)"><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/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat"></span>Integration</div>
+<div style="flex:1"></div>
+<div style="position:relative">
+<div style="position:absolute;bottom:48px;left:0;width:200px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px">
+<div style="padding:6px 8px;display:flex;flex-direction:column"><span style="font-weight:500;color:var(--ui-text-highlighted)">marta</span><span style="color:var(--ui-text-muted);font-size:12px">Owner</span></div>
+<div style="height:1px;background:var(--ui-border);margin:4px 0"></div>
+<div style="height:30px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-text)"><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/monitor.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/monitor.svg') center / contain no-repeat"></span><span style="flex:1">System</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/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span></div>
+<div style="height:30px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-text)"><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/sun.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/sun.svg') center / contain no-repeat"></span>Light</div>
+<div style="height:30px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-text)"><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/moon.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/moon.svg') center / contain no-repeat"></span>Dark</div>
+<div style="height:1px;background:var(--ui-border);margin:4px 0"></div>
+<div style="height:30px;padding:0 8px;display:flex;align-items:center;gap:8px;background:var(--ui-bg-elevated);color:var(--ui-text)"><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/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 style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;background:var(--ui-bg-elevated)"><span style="width:26px;height:26px;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 11px 'IBM Plex Sans',sans-serif">MA</span><span style="flex:1;color:var(--ui-text-highlighted)">marta</span><span style="display:flex;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat"></span></span></div>
+</div>
+</div>
+<div style="flex:1;min-width:0;display:flex;flex-direction:column">
+<div style="height:48px;border-bottom:1px solid var(--ui-border);background:var(--ui-bg);display:flex;align-items:center;padding:0 16px;gap:8px;color:var(--ui-text-muted)"><span style="width:28px;height:28px;display:flex;align-items:center;justify-content:center"><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/panel-left-close.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/panel-left-close.svg') center / contain no-repeat"></span></span><span style="width:1px;height:16px;background:var(--ui-border)"></span><span>Articles</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat"></span><span style="color:var(--ui-text-highlighted);font-weight:500">How we price a bathroom renovation</span></div>
+<div style="flex:1;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)">page body</div>
+</div>
+</div>
+<div style="display:flex;gap:16px;align-items:flex-start">
+<div style="width:56px;height:380px;background:var(--ui-bg);border:1px solid var(--ui-border);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px">
+<svg width="26" height="26" viewBox="0 0 16 16" shape-rendering="crispEdges" style="margin:7px 0 17px"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg>
+<span style="width:36px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><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/house.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat"></span></span>
+<span style="width:36px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--rc-sand);color:#111"><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/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat"></span></span>
+<span style="width:36px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><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/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat"></span></span>
+<span style="flex:1"></span>
+<span style="width:26px;height:26px;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 11px 'IBM Plex Sans',sans-serif">MA</span>
+</div>
+<div style="width:220px;height:380px;background:var(--ui-bg);border:1px solid var(--ui-border);display:flex;flex-direction:column">
+<div style="height:56px;display:flex;align-items:center;gap:10px;padding:0 6px;border-bottom:1px solid var(--ui-border)"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat"></span></span><span style="flex:1;font-weight:600;font-size:16px;color:var(--ui-text-highlighted)">Articles</span></div>
+<div style="flex:1;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted);text-align:center;padding:0 16px">Mobile top bar. The menu button opens the sidebar as a left slideover.</div>
+</div>
+</div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UDashboardGroup storage="local"</code> › <code>UDashboardSidebar collapsible :resizable="false" :default-size="16" :collapsed-size="4"</code> with the <code>#header</code> (AppLogo), <code>#default</code> (<code>UNavigationMenu orientation="vertical" :collapsed</code>) and <code>#footer</code> (UserMenu) slots. Each page is a <code>UDashboardPanel</code>, with a <code>UDashboardNavbar</code> holding <code>UDashboardSidebarCollapse</code> and <code>UBreadcrumb</code>. On mobile, <code>UDashboardSidebarToggle</code> appears and the sidebar's built-in slideover takes over.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">UserMenu</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UDropdownMenu :content="{ side: 'top', align: 'start' }"</code> on a ghost <code>UButton block</code> with a <code>UAvatar</code> 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.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props, slots</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">No props, because the shell reads the user from the <code>session</code> Pinia store. The navbar reads <code>route.meta.title</code> and <code>route.meta.breadcrumb</code>. Slots <code>navbar-right</code> (page actions on mobile) and <code>default</code>. It shows the offline banner when <code>navigator.onLine</code> is false.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The first Tab stop is a "Skip to content" link. The sidebar is a <code>nav</code> labeled "Main", and the current page gets <code>aria-current="page"</code>. In the collapsed rail, items show tooltips and keep their <code>aria-label</code>. The collapse button carries <code>aria-expanded</code>. The mobile slideover traps focus and closes after navigating.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Bend</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The active nav item uses a sand fill with ink text instead of Nuxt UI's primary-tinted background and left indicator. The shell is set up for this in <code>ui.config.ts</code>.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">PageHeader</h2>
+<div style="background:var(--ui-bg-muted);border:1px solid var(--ui-border);padding:24px;display:flex;flex-direction:column;gap:24px">
+<div style="display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap"><div style="flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Articles</span><span style="color:var(--ui-text-muted)">Everything you've written, online and in draft.</span></div><div style="display:flex;gap:8px"><span style="height:32px;padding:0 12px;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"><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/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat"></span>Connect your website</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span></div></div>
+<div style="width:358px;max-width:100%;display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--ui-bg);border:1px solid var(--ui-border)"><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)">Articles</span><span style="color:var(--ui-text-muted);font-size:14px">Everything you've written, online and in draft.</span></div><span style="height:44px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;font-size:15px"><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/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span></div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UPageHeader :title :description</code>, with actions in the <code>#links</code> slot. The <code>ui</code> override is <code>{ root: 'py-0 border-0', title: 'text-xl', description: 'text-sm text-muted mt-0.5' }</code>, which brings Nuxt UI's marketing-size header down to dashboard density.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props, slots</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>title</code>, <code>description?</code>, slot <code>actions</code> (the primary action goes last, so it sits on the right), slot <code>meta</code> (for example, a status badge next to the title in the editor).</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Responsive</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Below <code>md</code>, the actions wrap under the text. The primary action goes full width at 44 px, and secondary actions move into the navbar's overflow menu.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">ArticleStatusBadge</h2>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:flex;flex-wrap:wrap;gap:24px;align-items:center">
+<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span>
+<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span>
+<span style="height:26px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:13px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span>
+<span style="height:26px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:13px;font-weight:500"><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/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span>
+<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-muted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>Publishing…</span>
+<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-muted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>Unpublishing…</span>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UBadge</code>. Online: <code>color="neutral" variant="solid" icon="i-lucide-globe"</code>. Draft: <code>color="neutral" variant="outline" icon="i-lucide-pencil-line"</code>. Status is shown by the fill, the icon and the word, never by color alone.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>online: boolean</code>, <code>size?: 'sm' | 'md'</code> (sm in lists, md in the editor header), <code>pending?: 'publish' | 'unpublish'</code> (shows the -ing label with a spinner while the request runs). No emits, because it isn't interactive.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">ArticleTable</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Search, filter tabs, a sortable table and row actions. Everything happens in the browser on the list it has already loaded. Below <code>md</code>, the table becomes a card list with the same data and actions.</p>
+<div style="display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start">
+<div style="flex:1;min-width:min(100%,620px);display:flex;flex-direction:column;gap:12px">
+<div style="display:flex;align-items:flex-end;gap:16px;border-bottom:1px solid var(--ui-border);flex-wrap:wrap">
+<div style="display:flex;gap:20px;flex:1"><span style="height:36px;display:flex;align-items:center;gap:6px;border-bottom:2px solid var(--ui-primary);margin-bottom:-1px;font-weight:500;color:var(--ui-text-highlighted)">All<span style="font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">6</span></span><span style="height:36px;display:flex;align-items:center;gap:6px;color:var(--ui-text-toned)">Online<span style="font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">4</span></span><span style="height:36px;display:flex;align-items:center;gap:6px;color:var(--ui-text-toned)">Drafts<span style="font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">2</span></span></div>
+<span style="width:240px;height:32px;margin-bottom:6px;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-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat"></span>Search by title</span>
+</div>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);position:relative">
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 100px 110px 120px 44px;height:36px;align-items:center;padding:0 12px;background:var(--ui-bg-elevated);color:var(--ui-text-muted);font-weight:500"><span>Title</span><span>Status</span><span>Created</span><span style="display:flex;align-items:center;gap:4px;color:var(--ui-text-highlighted)">Updated<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat"></span></span><span></span></div>
+<sc-for list="{{ articles }}" as="a" hint-placeholder-count="5">
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 100px 110px 120px 44px;height:44px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border)">
+<span style="font-weight:500;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:12px">{{ a.t }}</span>
+<span><sc-if value="{{ a.on }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></sc-if></span>
+<span style="color:var(--ui-text-muted)">{{ a.c }}</span><span style="color:var(--ui-text-muted)">{{ a.u }}</span>
+<span style="display:flex;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span>
+</div>
+</sc-for>
+</div>
+</div>
+<div style="width:358px;max-width:100%;background:var(--ui-bg);border:1px solid var(--ui-border)">
+<sc-for list="{{ articles }}" as="a" hint-placeholder-count="5">
+<div style="display:flex;align-items:center;gap:8px;padding:12px 4px 12px 16px;border-bottom:1px solid var(--ui-border);min-height:64px">
+<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:6px"><span style="font-weight:500;font-size:15px;line-height:21px;color:var(--ui-text-highlighted)">{{ a.t }}</span><div style="display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ui-text-muted)"><sc-if value="{{ a.on }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></sc-if><span>Updated {{ a.u }}</span></div></div>
+<span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat"></span></span>
+</div>
+</sc-for>
+</div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UTabs</code> + <code>UInput type="search"</code> + <code>UTable</code> (desktop), or a custom <code>ArticleCardList</code> of <code>ULink</code> rows (mobile), switched with <code>useBreakpoints</code> at <code>md</code>. Each row has a <code>UDropdownMenu</code>, and the row actions go through <code>useArticleActions()</code>, which shares one set of calls between the table, the list and the editor.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props, emits</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Props <code>articles: Article[]</code>, <code>loading: boolean</code>, <code>busyIds: Set&lt;number&gt;</code>. Emits <code>publish(id)</code>, <code>unpublish(id)</code>, <code>delete(article)</code>, <code>copy-url(id)</code>. Search, tab and sort state lives in the URL query (<code>?q=&amp;status=&amp;sort=</code>). Slots <code>#empty</code>, <code>#toolbar-right</code>.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Behavior</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Search is case-insensitive and ignores accents, and it matches anywhere in the title. It updates on input, debounced 120 ms. Tab counts always reflect the full list. Dates within 7 days are relative ("2 hours ago"); older ones are absolute ("18 Aug 2026"), with the full timestamp in a <code>title</code> attribute. Clicking a row opens the editor, except clicks on the menu.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">States</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Loading (5 skeleton rows), empty, no results, a filter tab with nothing in it, a row busy, an action failed (toast with Retry, row reverts), and a row vanished (a 404 on any action removes the row and shows an info toast). Row actions are never optimistic: the row updates when the 200 arrives.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The table has a visually hidden caption, "Articles, sorted by last updated, newest first". Each row's menu button is named "Actions for How we price a bathroom renovation". After a search, a polite live region announces "3 articles".</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">EmptyState</h2>
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:1px;background:var(--ui-border);border:1px solid var(--ui-border)">
+<div style="background:var(--ui-bg);padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">No articles yet</span><span style="color:var(--ui-text-muted);max-width:240px">Write your first one. It stays a draft until you publish it.</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span></div>
+<div style="background:var(--ui-bg);padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">No articles match "tiles"</span><span style="color:var(--ui-text-muted);max-width:240px">Check the spelling, or search for a shorter part of the title.</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">Clear search</span></div>
+<div style="background:var(--ui-bg);padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">No drafts</span><span style="color:var(--ui-text-muted);max-width:240px">Everything you've written is online.</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span></div>
+<div style="background:var(--ui-bg);padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">Nothing is online yet</span><span style="color:var(--ui-text-muted);max-width:240px">Publish a draft and it will appear on your website.</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">Show drafts</span></div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UEmpty :icon :title :description :actions variant="naked"</code>, placed in the <code>UTable</code> <code>#empty</code> slot or on the page. The icon tile is overridden to <code>rounded-none bg-elevated</code>.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>variant: 'no-articles' | 'no-results' | 'no-drafts' | 'no-online'</code>, <code>query?: string</code>. Emits <code>action</code>. Each variant has fixed copy, and the search term is shown in quotes, cut to 40 characters.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The title is an <code>h2</code>. "No results" is announced through the table's live region. Clear search returns focus to the search field.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">ConfirmDialog</h2>
+<div style="background:var(--rc-overlay);padding:40px 16px;display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:flex-start">
+<div role="alertdialog" style="width:440px;max-width:100%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal)">
+<div style="padding:24px 24px 0;display:flex;flex-direction:column;gap:8px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Delete this article?</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">"Winter checklist for timber windows" and its 3 images will be deleted. This can't be undone.</span></div>
+<div style="padding:24px;display:flex;justify-content:flex-end;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">Cancel</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-error);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat"></span>Delete article</span></div>
+</div>
+<div role="alertdialog" style="width:440px;max-width:100%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal)">
+<div style="padding:24px 24px 0;display:flex;flex-direction:column;gap:8px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Delete this article?</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">"Winter checklist for timber windows" and its 3 images will be deleted. This can't be undone.</span>
+<div role="alert" style="display:flex;gap:8px;padding:10px 12px;margin-top:8px;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><span style="color:var(--ui-text-toned)">Couldn't delete the article, so it's still there. Try again in a moment.</span></div></div>
+<div style="padding:24px;display:flex;justify-content:flex-end;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-dimmed);font-weight:500">Cancel</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-error);color:var(--ui-bg);font-weight:500;opacity:0.85"><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/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>Deleting…</span></div>
+</div>
+</div>
+<p style="margin:0;color:var(--ui-text-muted);font-size:12px">Left: default. Right: after a failed attempt (the error appears inline), with the retry running (loading).</p>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UModal</code> opened through <code>useOverlay().create(ConfirmDialog)</code>. <code>open()</code> returns a promise that resolves once the action succeeds or the dialog is cancelled. The action runs inside the dialog, so errors show there instead of in a toast behind the overlay.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props, emits</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>title</code>, <code>description</code>, <code>confirmLabel</code>, <code>pendingLabel</code>, <code>tone: 'danger' | 'neutral'</code>, <code>action: () =&gt; Promise&lt;void&gt;</code>. Emits <code>close(confirmed: boolean)</code>. The delete description comes from the title plus <code>images.length</code>, and reads "and its image" for 1 and just the title for 0.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Other uses</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Cancel registration: "Cancel your registration?" / "Your account will be deleted. You can register again with the same or a different email." / "Cancel registration" / "Keep my account". Leaving with unsaved changes uses the neutral tone.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>role="alertdialog"</code>. Focus starts on Cancel, and Enter doesn't confirm by default. While the action runs, the dialog can't be dismissed, both buttons are disabled, and <code>aria-busy</code> is set. On success, focus goes to the next row, or the page heading if there isn't one.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">ArticleEditor, SaveStatus, PublishControl, CharacterCounter</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">The editor is made of four components that work together. The header holds the read-only title, status, SaveStatus, Save and PublishControl. A sticky toolbar sits above the writing surface, which uses the content type scale. The counter sits at the foot.</p>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border)">
+<div style="padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--ui-border);flex-wrap:wrap">
+<span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><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/arrow-left.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-left.svg') center / contain no-repeat"></span></span>
+<div style="flex:1;min-width:200px;display:flex;align-items:center;gap:10px"><span style="font:600 18px/26px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">How we price a bathroom renovation</span><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></div>
+<span aria-live="polite" style="display:flex;align-items:center;gap:6px;color:var(--ui-warning)"><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/circle-dot.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-dot.svg') center / contain no-repeat"></span>Unsaved changes</span>
+<span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/save.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/save.svg') center / contain no-repeat"></span>Save</span>
+<span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Save and publish</span>
+<span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span>
+</div>
+<div role="toolbar" aria-label="Formatting" style="padding:6px 16px;display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--ui-border);overflow-x:auto;background:var(--ui-bg)">
+<sc-for list="{{ toolbar }}" as="t" hint-placeholder-count="24">
+<sc-if value="{{ t.sep }}"><span style="width:1px;height:20px;background:var(--ui-border-accented);margin:0 6px;flex-shrink:0"></span></sc-if>
+<sc-if value="{{ t.btn }}"><span title="{{ t.label }}" style="height:28px;min-width:28px;padding:0 6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:4px;color:var(--ui-text-toned);background:{{ t.bg }}"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat"></span>{{ t.text }}</span></sc-if>
+</sc-for>
+</div>
+<div style="display:flex;flex-wrap:wrap">
+<div style="flex:1;min-width:min(100%,520px);padding:40px 32px;font-family:'Source Serif 4',serif;color:var(--ui-text-highlighted)">
+<p style="margin:0 0 20px;font-size:18px;line-height:30px;max-width:672px">Every bathroom is different, but the way we price them isn't. We start with a visit, measure everything, and <strong>write down what stays</strong>.</p>
+<div style="font-size:26px;line-height:34px;font-weight:600;margin:32px 0 12px">What goes into the price</div>
+<ul style="margin:0 0 20px;padding-left:28px;list-style:square;font-size:18px;line-height:30px;max-width:672px"><li>Stripping out and making good</li><li>Plumbing moves, if any<span style="display:inline-block;width:2px;height:22px;background:var(--ui-text-highlighted);vertical-align:-4px;margin-left:1px"></span></li></ul>
+</div>
+<div style="width:280px;max-width:100%;border-left:1px solid var(--ui-border);padding:20px;display:flex;flex-direction:column;gap:14px;font-size:13px">
+<span style="font-weight:600;color:var(--ui-text-highlighted)">Details</span>
+<div style="display:grid;grid-template-columns:auto 1fr;gap:8px 12px"><span style="color:var(--ui-text-muted)">Created</span><span>12 Mar 2026, 09:14</span><span style="color:var(--ui-text-muted)">Updated</span><span>Today, 11:02</span><span style="color:var(--ui-text-muted)">ID</span><span style="font-family:'IBM Plex Mono',monospace">12</span><span style="color:var(--ui-text-muted)">Images</span><span>3</span></div>
+<div style="display:flex;flex-direction:column;gap:6px"><span style="color:var(--ui-text-muted)">Public API URL</span><span style="display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--ui-bg-elevated);font:400 12px 'IBM Plex Mono',monospace;overflow:hidden"><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">/v1/article/12</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/copy.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/copy.svg') center / contain no-repeat"></span></span><span style="color:var(--ui-text-muted);font-size:12px">Returns 404 until the article is online.</span></div>
+</div>
+</div>
+<div style="padding:10px 20px;border-top:1px solid var(--ui-border);display:flex;align-items:center;gap:16px;flex-wrap:wrap"><span style="flex:1"></span><span style="font:400 12px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">4 318 / 10 000</span></div>
+</div>
+
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:1px;background:var(--ui-border);border:1px solid var(--ui-border)">
+<div style="background:var(--ui-bg);padding:16px;display:flex;flex-direction:column;gap:10px"><span style="display:flex;align-items:center;gap:6px;color:var(--ui-warning)"><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/circle-dot.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-dot.svg') center / contain no-repeat"></span>Unsaved changes</span><code style="color:var(--ui-text-muted)">dirty, Save enabled</code></div>
+<div style="background:var(--ui-bg);padding:16px;display:flex;flex-direction:column;gap:10px"><span style="display:flex;align-items:center;gap:6px;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>Saving…</span><code style="color:var(--ui-text-muted)">saving, Save disabled</code></div>
+<div style="background:var(--ui-bg);padding:16px;display:flex;flex-direction:column;gap:10px"><span style="display:flex;align-items:center;gap:6px;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span>Saved at 11:02</span><code style="color:var(--ui-text-muted)">saved, Save disabled</code></div>
+<div style="background:var(--ui-bg);padding:16px;display:flex;flex-direction:column;gap:10px"><span style="display:flex;align-items:center;gap:8px;color:var(--ui-error)"><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/circle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat"></span>Save failed<span style="height:24px;padding:0 8px;display:flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);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/rotate-cw.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat"></span>Retry</span></span><code style="color:var(--ui-text-muted)">error, changes kept</code></div>
+<div style="background:var(--ui-bg);padding:16px;display:flex;flex-direction:column;gap:10px"><span style="display:flex;align-items:center;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Publish</span></span><code style="color:var(--ui-text-muted)">draft, saved</code></div>
+<div style="background:var(--ui-bg);padding:16px;display:flex;flex-direction:column;gap:10px"><span style="display:flex;align-items:center;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe-lock.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe-lock.svg') center / contain no-repeat"></span>Unpublish</span></span><code style="color:var(--ui-text-muted)">online</code></div>
+<div style="background:var(--ui-bg);padding:16px;display:flex;flex-direction:column;gap:10px"><span style="font:400 12px 'IBM Plex Mono',monospace;color:var(--ui-warning);display:flex;align-items:center;gap:6px"><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/triangle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/triangle-alert.svg') center / contain no-repeat"></span>9 240 / 10 000</span><code style="color:var(--ui-text-muted)">body ≥ 90%</code></div>
+<div style="background:var(--ui-bg);padding:16px;display:flex;flex-direction:column;gap:6px"><span style="font:400 12px 'IBM Plex Mono',monospace;color:var(--ui-error);display:flex;align-items:center;gap:6px"><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/circle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat"></span>10 214 / 10 000</span><span style="color:var(--ui-error);font-size:12px">214 characters over. Shorten the text or remove an image. Formatting counts too.</span><code style="color:var(--ui-text-muted)">over limit, Save disabled</code></div>
+</div>
+
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">ArticleEditor</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UEditor v-model content-type="html" :extensions</code> + <code>UEditorToolbar :editor :items layout="fixed"</code>. TipTap v3 StarterKit already includes Underline and Link. <code>TextAlign</code> handles alignment and <code>Image</code> handles images. Formatting is a <code>UDropdownMenu</code> with Paragraph and Headings 1–4 (<code>h1</code> is kept because the public site controls how the title appears). Indent and outdent call <code>sinkListItem</code>/<code>liftListItem</code> in lists. For paragraphs, a small <strong>custom Indent extension</strong> writes <code>data-indent="1–4"</code>, because TipTap has no paragraph indent. Clear formatting runs <code>unsetAllMarks().clearNodes()</code>. The editor surface gets <code>class="article-content"</code>.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props, emits</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>modelValue: string</code> (HTML), <code>articleId: number</code>, <code>disabled?</code>. Emits <code>update:modelValue</code>, <code>request-image</code>. Exposes <code>insertImage(src, alt)</code> and <code>focus()</code>. The toolbar reflects the active state (bold is on at the cursor) using <code>aria-pressed</code>.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">SaveStatus</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">A custom inline <code>span aria-live="polite"</code>, driven by <code>useArticleDraft()</code>: <code>'clean' | 'dirty' | 'saving' | 'saved' | 'error'</code>. Saved shows the time and switches to "Saved 5 min ago" after an hour. The error state's Retry is a <code>UButton size="xs" variant="outline"</code>. Ctrl/⌘ S saves. Leaving with unsaved changes triggers <code>onBeforeRouteLeave</code> (ConfirmDialog, neutral tone) and <code>beforeunload</code>. There is <strong>no autosave</strong>, so the owner controls exactly what is sent. The draft is mirrored to <code>sessionStorage</code> so it survives a session expiry.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">PublishControl</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">A single <code>UButton</code>. Draft → primary "Publish"; draft with unsaved changes → "Save and publish" (PATCH body, then PATCH publish; if the save fails, it doesn't publish); online → outline "Unpublish". Unpublishing doesn't save pending changes, so the draft edits stay pending. Toasts: "Article published", with the description <em>"Title" is now online.</em>; "Article unpublished", <em>It's a draft again and hidden from your website.</em></span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">CharacterCounter</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">A custom component in mono type. Props <code>value: number</code>, <code>max: number</code>, <code>min?: number</code>, <code>warnAt?: number</code> (default 0.9). The title uses <code>[...str].length</code>, so accents and emoji count as one, matching Go's validator, which counts runes. The body uses the HTML string length, which is what the API receives. The warning and error states add an icon and text, not just color. A visually hidden live region announces the change only when a threshold is crossed, not on every keystroke.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Responsive</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Below <code>lg</code>, the details panel becomes a right slideover, opened with <code>i-lucide-panel-right</code>. Below <code>md</code>, the header wraps: back, title and badge on the first row, then SaveStatus and the counter. Save and Publish move to a sticky bottom bar (44 px). The toolbar scrolls horizontally with fade edges and keeps undo, redo and the image button pinned at the start.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">ImageUploader</h2>
+<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Opens from the editor's image button in a small modal. Files are checked in the browser before anything is sent. After a successful upload the image goes in at the cursor and the modal closes.</p>
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:16px">
+<div style="display:flex;flex-direction:column;gap:8px"><div style="height:170px;border:1px dashed var(--ui-border-accented);background:var(--ui-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center"><span style="display:flex;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:24px;height:24px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/image-plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/image-plus.svg') center / contain no-repeat"></span></span><span style="font-weight:500;color:var(--ui-text-highlighted)">Drop an image here</span><span style="height:28px;padding:0 10px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);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/upload.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/upload.svg') center / contain no-repeat"></span>Choose file</span><span style="color:var(--ui-text-muted);font-size:12px">PNG, JPEG, WEBP, SVG · max 10 MB</span></div><code style="color:var(--ui-text-muted)">idle</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><div style="height:170px;border:2px solid var(--ui-primary);background:var(--rc-sand);color:#111;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px"><span style="display:flex"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:24px;height:24px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/image-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/image-down.svg') center / contain no-repeat"></span></span><span style="font-weight:600">Drop to upload</span></div><code style="color:var(--ui-text-muted)">dragging over</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><div style="height:170px;border:1px solid var(--ui-border);background:var(--ui-bg);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:20px"><div style="display:flex;justify-content:space-between;gap:8px"><span style="font-weight:500;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">north-wall.jpg</span><span style="font:400 12px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">62%</span></div><div style="height:4px;background:var(--ui-bg-accented)"><div style="width:62%;height:4px;background:var(--ui-primary)"></div></div><span style="color:var(--ui-text-muted);font-size:12px">Uploading 2.4 of 3.9 MB</span></div><code style="color:var(--ui-text-muted)">uploading</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><div style="height:170px;border:1px solid var(--ui-border);background:var(--ui-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ui-success)"><span style="display:flex"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:24px;height:24px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-check.svg') center / contain no-repeat"></span></span><span style="font-weight:500;color:var(--ui-text-highlighted)">Image added</span></div><code style="color:var(--ui-text-muted)">success, closes after 600 ms</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><div style="height:170px;border:1px solid var(--ui-error);background:var(--ui-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center"><span style="display:flex;color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:24px;height:24px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/file-x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-x.svg') center / contain no-repeat"></span></span><span style="font-weight:500;color:var(--ui-text-highlighted)">"plan.pdf" can't be used</span><span style="color:var(--ui-text-toned);font-size:12px">Use a PNG, JPEG, WEBP or SVG image, up to 10 MB.</span><span style="height:28px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500;font-size:12px">Choose another file</span></div><code style="color:var(--ui-text-muted)">rejected: type or size</code></div>
+<div style="display:flex;flex-direction:column;gap:8px"><div style="height:170px;border:1px solid var(--ui-error);background:var(--ui-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center"><span style="display:flex;color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:24px;height:24px;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><span style="font-weight:500;color:var(--ui-text-highlighted)">Upload failed</span><span style="color:var(--ui-text-toned);font-size:12px">The server didn't accept the file. Your article hasn't changed.</span><span style="height:28px;padding:0 10px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500;font-size:12px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/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><code style="color:var(--ui-text-muted)">server error</code></div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UModal title="Add an image"</code> › <code>UFileUpload accept="image/png,image/jpeg,image/webp,image/svg+xml" :multiple="false" layout="list"</code> + <code>UProgress size="xs"</code>. Uploads go through <code>XMLHttpRequest</code>, because <code>fetch</code> has no upload progress, as <code>FormData</code> with the field name <code>file</code>. The 201 <code>location</code> is inserted with <code>insertImage(location, '')</code>.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Validation</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Before uploading, the uploader checks both the MIME type and the file extension, and that <code>size ≤ 10 × 1024 × 1024</code>. The size error names the file size: "north-wall.tif is 14.2 MB. Images can be up to 10 MB." A server 400 shows the same message as a client-side rejection.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props, emits</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>articleId: number</code>. Emits <code>uploaded(location)</code>, <code>close</code>. A 401 hands off to the global session flow. A 404 means the article was deleted, which the editor handles.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y, touch</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The drop zone is a labeled button, so Enter opens the file picker. Progress is exposed as <code>role="progressbar"</code> with <code>aria-valuenow</code>, and the result is announced. On touch screens the drop text is hidden and "Choose file" becomes the main action. Dropping a file directly onto the editor surface also opens the uploader with that file.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">CodeBlock and EndpointCard</h2>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border)">
+<div style="padding:20px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--ui-border)">
+<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font:500 12px 'IBM Plex Mono',monospace">GET</span><span style="font:500 15px 'IBM Plex Mono',monospace;color:var(--ui-text-highlighted)">/v1/article/{id}</span></div>
+<span style="color:var(--ui-text-toned);font-size:14px">Returns one article. Drafts return 404 to anonymous callers, the same as an id that doesn't exist.</span>
+</div>
+<div style="display:flex;align-items:stretch;border-bottom:1px solid var(--ui-border);padding:0 20px;gap:20px"><span style="height:40px;display:flex;align-items:center;border-bottom:2px solid var(--ui-primary);margin-bottom:-1px;font-weight:500;color:var(--ui-text-highlighted)">fetch</span><span style="height:40px;display:flex;align-items:center;color:var(--ui-text-toned)">curl</span><span style="height:40px;display:flex;align-items:center;color:var(--ui-text-toned)">Response</span></div>
+<div style="background:var(--ui-bg-elevated)">
+<div style="height:36px;padding:0 8px 0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ui-border)"><span style="font:500 12px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">JavaScript</span><span aria-live="polite" style="height:28px;padding:0 8px;display:flex;align-items:center;gap:6px;color:var(--ui-success);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span>Copied</span></div>
+<pre style="margin:0;padding:16px;overflow-x:auto;font:400 13px/20px 'IBM Plex Mono',monospace;color:var(--ui-text)"><span style="color:var(--ui-info)">const</span> res = <span style="color:var(--ui-info)">await</span> fetch(<span style="color:var(--ui-success)">'https://cms.renew.example/v1/article/12'</span>)
+<span style="color:var(--ui-info)">if</span> (res.status === <span style="color:var(--ui-warning)">404</span>) <span style="color:var(--ui-info)">return</span> notFound()
+<span style="color:var(--ui-info)">const</span> article = <span style="color:var(--ui-info)">await</span> res.json()</pre>
+</div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">CodeBlock</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">This is a <strong>custom</strong> component, because Nuxt UI's prose code blocks rely on Nuxt Content and don't work in a plain Vue app. Highlighting is done ahead of time with <code>shiki</code> (a dual <code>github-light</code>/<code>github-dark</code> theme remapped to the semantic colors: keywords info, strings success, numbers warning, comments muted). The header shows the language label and a ghost copy <code>UButton</code>, which switches to "Copied" for 2 s through <code>useClipboard</code>. Props <code>code</code>, <code>lang</code>, <code>label?</code>. Long lines scroll horizontally and never wrap.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">EndpointCard</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UCard</code> › a method <code>UBadge</code> (GET is solid ink) + the path in mono + a description, with <code>UTabs</code> (fetch, curl, Response) showing a CodeBlock each. Props <code>method</code>, <code>path</code>, <code>description</code>, <code>examples: { fetch, curl, response }</code>. Snippets use the current <code>location.origin</code>.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The copy button is named "Copy JavaScript example", and its result is announced. Code is a focusable <code>pre</code> (<code>tabindex="0"</code>) so keyboard users can scroll it. Syntax colors pass 4.5:1 on <code>--ui-bg-elevated</code> in both themes.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">PasswordStrengthHint</h2>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:flex;flex-wrap:wrap;gap:48px">
+<div style="display:flex;flex-direction:column;gap:6px"><span style="display:flex;align-items:center;gap:8px;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle.svg') center / contain no-repeat"></span>At least 8 characters</span><code style="color:var(--ui-text-muted)">not met yet</code></div>
+<div style="display:flex;flex-direction:column;gap:6px"><span style="display:flex;align-items:center;gap:8px;color:var(--ui-success)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span><span style="color:var(--ui-text)">At least 8 characters</span></span><code style="color:var(--ui-text-muted)">met</code></div>
+<div style="display:flex;flex-direction:column;gap:6px"><span style="display:flex;align-items:center;gap:8px;color:var(--ui-error)"><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/circle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat"></span>At least 8 characters</span><code style="color:var(--ui-text-muted)">not met on submit</code></div>
+<div style="display:flex;flex-direction:column;gap:6px"><span style="display:flex;align-items:center;gap:8px;color:var(--ui-success)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span><span style="color:var(--ui-text)">Passwords match</span></span><code style="color:var(--ui-text-muted)">reset screen only</code></div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">A <strong>custom</strong> <code>ul</code> in the password <code>UFormField</code>'s <code>#help</code> slot. Props <code>rules: { label: string, met: boolean }[]</code>, <code>showErrors: boolean</code>. There is no meter or score, because the API only requires 8 characters.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The list is the field's <code>aria-describedby</code>. Each item has hidden text reading "met" or "not met". A change is announced once, when the rule becomes met.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">ResultPanel</h2>
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px">
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:32px;display:flex;flex-direction:column;gap:16px"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--rc-success-soft);color:var(--ui-success)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:22px;height:22px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/mail-check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/mail-check.svg') center / contain no-repeat"></span></span><div style="display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Check your email</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">If an account exists for that email, a password reset link has been sent. The link expires in 1 hour.</span></div><span style="height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">Back to log in</span></div>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:32px;display:flex;flex-direction:column;gap:16px"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--rc-error-soft);color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:22px;height:22px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/link-2-off.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/link-2-off.svg') center / contain no-repeat"></span></span><div style="display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">This link has expired</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">Reset links work once, for 1 hour. Request a new one and use it within the hour.</span></div><span style="height:40px;display:flex;align-items:center;justify-content:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500">Request a new link</span></div>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:32px;display:flex;flex-direction:column;gap:16px"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--rc-info-soft);color:var(--ui-info)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:22px;height:22px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/timer.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/timer.svg') center / contain no-repeat"></span></span><div style="display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Too many attempts</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">For your security, wait a moment before trying again. You can try again in <span style="font-family:'IBM Plex Mono',monospace">0:42</span>.</span></div><span style="height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border);color:var(--ui-text-dimmed);font-weight:500">Try again in 0:42</span><span style="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">API pending</span></div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">A <strong>custom</strong> component that fills AuthShell's slot: an icon tile, <code>h1</code> title, description and <code>UButton block size="lg"</code> actions. Props <code>tone: 'success' | 'error' | 'info'</code>, <code>icon</code>, <code>title</code>, <code>description</code>, <code>actions: ButtonProps[]</code>. Slot <code>default</code> for extras such as the inline login on verify.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">When the panel replaces a form, focus moves to its title and the panel is <code>role="status"</code>, or <code>role="alert"</code> for errors. The countdown updates every second visually but is announced only at the start and when it reaches zero.</span>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
+<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Error pages and offline banner</h2>
+<div style="display:flex;flex-direction:column;gap:16px">
+<div role="status" style="display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);flex-wrap:wrap"><span style="display:flex"><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/wifi-off.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/wifi-off.svg') center / contain no-repeat"></span></span><span style="flex:1;min-width:200px">You're offline. You can keep writing, but saving and publishing will wait until you're back online.</span></div>
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px">
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:40px 32px;display:flex;flex-direction:column;gap:14px"><span style="font:500 13px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">404</span><span style="font:600 24px/32px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Page not found</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">The link may be mistyped, or the page may have moved.</span><div style="display:flex;gap:8px;flex-wrap:wrap"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500">Go to Home</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">All articles</span></div></div>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:40px 32px;display:flex;flex-direction:column;gap:14px"><span style="font:500 13px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">Error</span><span style="font:600 24px/32px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Something went wrong</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">This page couldn't load. Your saved work is safe. Try again, and if it keeps happening, restart the RenewCMS server.</span><div style="display:flex;gap:8px;flex-wrap:wrap"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/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><span style="height:32px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">Go to Home</span></div></div>
+</div>
+</div>
+<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UError</code> isn't used because it's built for Nuxt's <code>error.vue</code>. Instead there's a <strong>custom</strong> <code>ErrorView</code> (props <code>kind: 'not-found' | 'error'</code>), rendered inside <code>UDashboardPanel</code> when the user is logged in and inside AuthShell otherwise. The offline banner is a <code>UBanner color="neutral"</code> at <code>--z-banner</code>, shown and hidden with <code>useOnline()</code>. Once the connection returns it switches to "You're back online" for 3 s.</span>
+<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The error title is the page <code>h1</code> and gets focus on render. The banner is <code>role="status"</code>, and it can't be dismissed while offline. The offline state blocks Save and Publish and says why in their tooltip.</span>
+</div>
+</section>
+
+</div>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;system&quot;,&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'system' | 'light' | 'dark'&quot;}}">
+class Component extends DCLogic {
+	state = { mode: this.props.theme ?? 'light' }
+	rootRef = React.createRef()
+	light = { '--ui-bg': '#ffffff', '--ui-bg-muted': '#fafafa', '--ui-bg-elevated': '#f3f2f0', '--ui-bg-accented': '#e6e4e0', '--ui-bg-inverted': '#111111', '--ui-text-dimmed': '#999999', '--ui-text-muted': '#666666', '--ui-text-toned': '#444444', '--ui-text': '#222222', '--ui-text-highlighted': '#111111', '--ui-text-inverted': '#ffffff', '--ui-border': '#e6e4e0', '--ui-border-muted': '#f3f2f0', '--ui-border-accented': '#8a8783', '--ui-primary': '#111111', '--ui-secondary': '#635643', '--ui-success': '#315b33', '--ui-info': '#34536d', '--ui-warning': '#6c4700', '--ui-error': '#882c21', '--rc-primary-hover': '#333333', '--rc-primary-active': '#444444', '--rc-error-hover': '#6a1a11', '--rc-sand': '#e8dfd1', '--rc-success-soft': '#eaefea', '--rc-info-soft': '#ebeef0', '--rc-warning-soft': '#f0ede6', '--rc-error-soft': '#f3eae9', '--rc-overlay': 'rgb(10 10 10 / 0.4)', '--rc-shadow-pop': '0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06)', '--rc-shadow-modal': '0 16px 48px rgb(17 17 17 / 0.18)' }
+	dark = { '--ui-bg': '#111111', '--ui-bg-muted': '#0a0a0a', '--ui-bg-elevated': '#1a1a1a', '--ui-bg-accented': '#222222', '--ui-bg-inverted': '#fafafa', '--ui-text-dimmed': '#666666', '--ui-text-muted': '#999999', '--ui-text-toned': '#cfccc7', '--ui-text': '#e6e4e0', '--ui-text-highlighted': '#fafafa', '--ui-text-inverted': '#111111', '--ui-border': '#333333', '--ui-border-muted': '#222222', '--ui-border-accented': '#666666', '--ui-primary': '#fafafa', '--ui-secondary': '#d4c5b0', '--ui-success': '#a3caa3', '--ui-info': '#a5c2db', '--ui-warning': '#dfb67d', '--ui-error': '#fba394', '--rc-primary-hover': '#e5e5e5', '--rc-primary-active': '#cccccc', '--rc-error-hover': '#e37e6e', '--rc-sand': '#d4c5b0', '--rc-success-soft': '#1f241f', '--rc-info-soft': '#202428', '--rc-warning-soft': '#2a251e', '--rc-error-soft': '#2c201f', '--rc-overlay': 'rgb(0 0 0 / 0.6)', '--rc-shadow-pop': '0 4px 16px rgb(0 0 0 / 0.5)', '--rc-shadow-modal': '0 16px 48px rgb(0 0 0 / 0.6)' }
+	resolved() {
+		if (this.state.mode === 'system') return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+		return this.state.mode
+	}
+	apply() {
+		const el = this.rootRef.current
+		if (!el) return
+		const vars = this.resolved() === 'dark' ? this.dark : this.light
+		for (const k in vars) el.style.setProperty(k, vars[k])
+		document.body.style.background = vars['--ui-bg-muted']
+	}
+	componentDidMount() { this.apply() }
+	componentDidUpdate(p) {
+		if (p.theme !== this.props.theme && this.props.theme) this.setState({ mode: this.props.theme })
+		this.apply()
+	}
+	renderVals() {
+		const modes = [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']].map(([k, label]) => {
+			const on = this.state.mode === k
+			return { label, on, bg: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-bg)' : 'var(--ui-text-toned)', pick: () => this.setState({ mode: k }) }
+		})
+		const articles = [
+			{ t: 'How we price a bathroom renovation', on: true, c: '12 Mar 2026', u: '2 hours ago' },
+			{ t: 'Choosing lime plaster for old stone walls', on: false, c: '9 Sep 2026', u: 'Yesterday' },
+			{ t: 'Before and after: the Rue Verte kitchen', on: true, c: '28 Aug 2026', u: '3 days ago' },
+			{ t: 'Winter checklist for timber windows', on: false, c: '2 Sep 2026', u: '5 days ago' },
+			{ t: 'Why we reuse original floorboards', on: true, c: '14 Jun 2026', u: '18 Aug 2026' }
+		].map(a => ({ ...a, draft: !a.on }))
+		const tb = [['undo-2', 'Undo'], ['redo-2', 'Redo'], '|', ['pilcrow', 'Paragraph', 'Paragraph ▾'], '|', ['bold', 'Bold', '', true], ['italic', 'Italic'], ['underline', 'Underline'], ['strikethrough', 'Strikethrough'], '|', ['align-left', 'Align left', '', true], ['align-center', 'Align center'], ['align-right', 'Align right'], ['align-justify', 'Justify'], '|', ['list', 'Bulleted list', '', true], ['list-ordered', 'Numbered list'], ['indent-decrease', 'Outdent'], ['indent-increase', 'Indent'], '|', ['remove-formatting', 'Clear formatting'], ['image-plus', 'Insert image', 'Image']]
+		const toolbar = tb.map(x => x === '|' ? { sep: true, btn: false } : { sep: false, btn: true, icon: x[0], label: x[1], text: x[2] || '', bg: x[3] ? 'var(--ui-bg-accented)' : 'transparent' })
+		return { rootRef: this.rootRef, modes, articles, toolbar }
+	}
+}
+</script>
+</body>
+</html>

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

@@ -0,0 +1,286 @@
+<!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>
+<helmet>
+<meta name="design_doc_mode" content="canvas">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Instrument+Sans:wght@400;500;600&family=Newsreader:opsz,wght@6..72,400;6..72,500&family=Archivo:wght@400;500;600;800&family=Literata:opsz,wght@7..72,400;7..72,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>body{margin:0;background:#ecebe8;color:#111;font-family:'IBM Plex Sans',sans-serif}a{color:#111}a:hover{color:#444}</style>
+</helmet>
+<section data-screen-label="Turn 1 directions" style="padding:64px;display:flex;flex-direction:column;gap:40px">
+<div style="display:flex;flex-direction:column;gap:12px;max-width:900px">
+<h1 style="margin:0;font:600 40px/1.1 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em">RenewCMS, three directions</h1>
+<p style="margin:0;font:400 17px/1.55 'IBM Plex Sans',sans-serif;color:#444;text-wrap:pretty">All three share your palette, the white-on-black R and square corners (<code style="font-family:'IBM Plex Mono',monospace">--ui-radius: 0</code>). They differ in type, density and how much the sand accent carries. Each shows the article list at desktop in light and at 390 px in dark. Pick one and I'll build the full foundations.</p>
+</div>
+<div style="display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start">
+
+<div id="1a" data-screen-label="1a Ledger" style="width:1240px;box-sizing:border-box;background:#fff;padding:48px;display:flex;flex-direction:column;gap:36px">
+<div style="display:flex;align-items:center;gap:14px"><span style="background:#111;color:#fff;font:500 14px 'IBM Plex Mono',monospace;padding:4px 9px">1a</span><h2 style="margin:0;font:600 32px/1.1 'IBM Plex Sans',sans-serif;letter-spacing:-0.01em">Ledger</h2></div>
+<p style="margin:0;max-width:820px;font:400 16px/1.6 'IBM Plex Sans',sans-serif;color:#444;text-wrap:pretty">Quiet and precise, like a well-kept account book. Monochrome, hairline borders, compact rows so a few hundred articles scan quickly. Sand appears only where you are: the active nav item and selection. Article content switches to a sturdy serif so writing feels distinct from the tool.</p>
+<div style="display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;font:400 13px/1.5 'IBM Plex Sans',sans-serif;color:#444">
+<div style="display:flex;flex-direction:column;gap:10px">
+<div style="display:flex;gap:6px">
+<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#111"></div><span>primary</span><span style="font-family:'IBM Plex Mono',monospace">#111111</span></div>
+<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#444"></div><span>neutral-600</span><span style="font-family:'IBM Plex Mono',monospace">#444444</span></div>
+<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#666"></div><span>text-muted</span><span style="font-family:'IBM Plex Mono',monospace">#666666</span></div>
+<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#e6e4e0"></div><span>border</span><span style="font-family:'IBM Plex Mono',monospace">#e6e4e0</span></div>
+<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#e8dfd1"></div><span>secondary</span><span style="font-family:'IBM Plex Mono',monospace">#e8dfd1</span></div>
+</div>
+<span>Primary is ink, secondary is sand, neutral is the brand grays with a slight warm tint on borders.</span>
+</div>
+<div style="display:flex;flex-direction:column;gap:6px">
+<span style="font:600 28px/1.1 'IBM Plex Sans',sans-serif;color:#111">Aa IBM Plex Sans</span>
+<span style="font:600 26px/1.2 'Source Serif 4',serif;color:#111">Aa Source Serif 4</span>
+<span>UI at 13/20, content at 18/30. Plex Mono for ids, paths and code.</span>
+</div>
+<div style="display:flex;flex-direction:column;gap:6px">
+<span style="color:#111;font-weight:500">Radius 0 · 1 px borders · compact</span>
+<span>Rows 44 px, controls 32 px, 24 px page gutters. No shadows except menus and modals.</span>
+</div>
+</div>
+
+<div style="width:1144px;height:680px;display:flex;border:1px solid #e6e4e0;background:#fafafa;font:400 13px/20px 'IBM Plex Sans',sans-serif;color:#111;overflow:hidden">
+<div style="width:224px;flex-shrink:0;background:#fff;border-right:1px solid #e6e4e0;display:flex;flex-direction:column;padding:12px;box-sizing:border-box;gap:2px">
+<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:10px"><div style="width:26px;height:26px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font:600 16px 'IBM Plex Sans',sans-serif">R</div><span style="font-weight:600;font-size:14px">RenewCMS</span></div>
+<div style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;color:#444"><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/house.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;"></span>Home</div>
+<div style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;background:#e8dfd1;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;"></span>Articles</div>
+<div style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;color:#444"><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/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;"></span>Integration</div>
+<div style="flex:1"></div>
+<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;border-top:1px solid #e6e4e0;padding-top:8px"><div style="width:26px;height:26px;background:#d4c5b0;display:flex;align-items:center;justify-content:center;font:600 11px 'IBM Plex Sans',sans-serif">MA</div><span style="flex:1">marta</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;color:#666"></span></div>
+</div>
+<div style="flex:1;min-width:0;display:flex;flex-direction:column">
+<div style="height:48px;border-bottom:1px solid #e6e4e0;background:#fff;display:flex;align-items:center;padding:0 24px;gap:8px;color:#666"><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/panel-left.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/panel-left.svg') center / contain no-repeat;"></span><span style="width:1px;height:16px;background:#e6e4e0;margin:0 6px"></span><span>Home</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;"></span><span style="color:#111">Articles</span><span style="flex:1"></span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/sun-moon.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/sun-moon.svg') center / contain no-repeat;"></span></div>
+<div style="padding:24px;display:flex;flex-direction:column;gap:16px">
+<div style="display:flex;align-items:flex-end;gap:16px"><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif">Articles</span><span style="color:#666">Everything you've written, online and in draft.</span></div><div style="height:32px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#111;color:#fff;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span>New article</div></div>
+<div style="display:flex;align-items:center;gap:16px;border-bottom:1px solid #e6e4e0">
+<div style="display:flex;gap:20px;flex:1"><span style="height:36px;display:flex;align-items:center;gap:6px;border-bottom:2px solid #111;font-weight:500">All <span style="color:#666">6</span></span><span style="height:36px;display:flex;align-items:center;gap:6px;color:#666">Online <span>4</span></span><span style="height:36px;display:flex;align-items:center;gap:6px;color:#666">Drafts <span>2</span></span></div>
+<div style="width:240px;height:30px;margin-bottom:6px;border:1px solid #cfccc7;background:#fff;display:flex;align-items:center;gap:8px;padding:0 10px;color:#666;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;"></span>Search by title</div>
+</div>
+<div style="background:#fff;border:1px solid #e6e4e0">
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 120px 130px 44px;height:36px;align-items:center;padding:0 12px;color:#666;background:#f3f2f0;font-weight:500"><span>Title</span><span>Status</span><span>Created</span><span style="display:flex;align-items:center;gap:4px;color:#111">Updated<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;"></span></span><span></span></div>
+<sc-for list="{{ articles }}" as="a" hint-placeholder-count="6">
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 120px 130px 44px;height:44px;align-items:center;padding:0 12px;border-top:1px solid #e6e4e0">
+<span style="font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:16px">{{ a.t }}</span>
+<span><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;background:#111;color:#fff;font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;border:1px solid #999;color:#444;font-size:12px;font-weight:500;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if></span>
+<span style="color:#666">{{ a.c }}</span><span style="color:#666">{{ a.u }}</span>
+<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;color:#666;justify-self:center"></span>
+</div>
+</sc-for>
+</div>
+</div>
+</div>
+</div>
+
+<div style="display:flex;gap:40px;align-items:flex-start">
+<div style="width:390px;height:780px;flex-shrink:0;background:#111;color:#fafafa;font:400 14px/20px 'IBM Plex Sans',sans-serif;display:flex;flex-direction:column;overflow:hidden">
+<div style="height:56px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid #333"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;"></span><div style="width:24px;height:24px;background:#111;border:1px solid #444;color:#fff;display:flex;align-items:center;justify-content:center;font:600 14px 'IBM Plex Sans',sans-serif">R</div><span style="flex:1;font-weight:600;font-size:16px">Articles</span><div style="width:44px;height:44px;background:#fafafa;color:#111;display:flex;align-items:center;justify-content:center"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span></div></div>
+<div style="padding:12px 16px;display:flex;flex-direction:column;gap:10px">
+<div style="height:44px;border:1px solid #444;display:flex;align-items:center;gap:8px;padding:0 12px;color:#999;background:#1a1a1a"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;"></span>Search by title</div>
+<div style="display:flex;gap:20px;border-bottom:1px solid #333"><span style="height:40px;display:flex;align-items:center;gap:6px;border-bottom:2px solid #fafafa;font-weight:500">All <span style="color:#999">6</span></span><span style="height:40px;display:flex;align-items:center;color:#999">Online 4</span><span style="height:40px;display:flex;align-items:center;color:#999">Drafts 2</span></div>
+</div>
+<sc-for list="{{ articles }}" as="a" hint-placeholder-count="6">
+<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #2a2a2a">
+<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:6px"><span style="font-weight:500;font-size:15px">{{ a.t }}</span><div style="display:flex;align-items:center;gap:10px;font-size:12px;color:#999"><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;background:#fafafa;color:#111;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border:1px solid #666;color:#cfccc7;font-weight:500;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if><span>Updated {{ a.u }}</span></div></div>
+<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;color:#999"></span>
+</div>
+</sc-for>
+</div>
+<div style="flex:1;display:flex;flex-direction:column;gap:14px;max-width:560px;padding-top:8px">
+<span style="font:600 30px/1.25 'Source Serif 4',serif;color:#111">Choosing lime plaster for old stone walls</span>
+<p style="margin:0;font:400 18px/30px 'Source Serif 4',serif;color:#222;text-wrap:pretty">Cement traps moisture in solid walls. Lime lets the stone breathe, which is why we strip it back on almost every farmhouse we take on.</p>
+<blockquote style="margin:0;padding-left:18px;border-left:2px solid #111;font:italic 400 18px/30px 'Source Serif 4',serif;color:#444">It sets slowly, and that is the point.</blockquote>
+<p style="margin:0;font:400 13px/1.5 'IBM Plex Sans',sans-serif;color:#666;text-wrap:pretty">Contrast: #111 on #fafafa 18.1:1 · #666 on #fafafa 5.5:1 · #999 on #111 6.6:1. #999 on light fails AA, so it is kept for dark mode and disabled states only.</p>
+</div>
+</div>
+</div>
+
+<div id="1b" data-screen-label="1b Atelier" style="width:1240px;box-sizing:border-box;background:#fff;padding:48px;display:flex;flex-direction:column;gap:36px">
+<div style="display:flex;align-items:center;gap:14px"><span style="background:#111;color:#fff;font:500 14px 'IBM Plex Mono',monospace;padding:4px 9px">1b</span><h2 style="margin:0;font:500 34px/1.1 'Newsreader',serif">Atelier</h2></div>
+<p style="margin:0;max-width:820px;font:400 16px/1.6 'Instrument Sans',sans-serif;color:#444;text-wrap:pretty">Warm and unhurried, like a workshop with good light. The sand accent becomes the frame: a sand sidebar around a pale working surface. Titles are set in a literary serif everywhere, including the table, so the list reads like a table of contents. Generous rows, larger controls, friendly on a phone.</p>
+<div style="display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;font:400 13px/1.5 'Instrument Sans',sans-serif;color:#444">
+<div style="display:flex;flex-direction:column;gap:10px">
+<div style="display:flex;gap:6px">
+<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#222"></div><span>primary</span><span style="font-family:'IBM Plex Mono',monospace">#222222</span></div>
+<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#d4c5b0"></div><span>secondary</span><span style="font-family:'IBM Plex Mono',monospace">#d4c5b0</span></div>
+<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#e8dfd1"></div><span>bg-accented</span><span style="font-family:'IBM Plex Mono',monospace">#e8dfd1</span></div>
+<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#fafafa;border:1px solid #e6e4e0;box-sizing:border-box"></div><span>bg</span><span style="font-family:'IBM Plex Mono',monospace">#fafafa</span></div>
+<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#666"></div><span>text-muted</span><span style="font-family:'IBM Plex Mono',monospace">#666666</span></div>
+</div>
+<span>Primary is near-black for a softer button. Sand is structural here, not just a highlight.</span>
+</div>
+<div style="display:flex;flex-direction:column;gap:6px">
+<span style="font:600 28px/1.1 'Instrument Sans',sans-serif;color:#111">Aa Instrument Sans</span>
+<span style="font:500 28px/1.2 'Newsreader',serif;color:#111">Aa Newsreader</span>
+<span>UI at 15/22, titles and content in Newsreader at 19/32.</span>
+</div>
+<div style="display:flex;flex-direction:column;gap:6px">
+<span style="color:#111;font-weight:500">Radius 0 · tonal surfaces · comfortable</span>
+<span>Rows 60 px, controls 40 px, 32 px gutters. Separation by surface color more than by lines.</span>
+</div>
+</div>
+
+<div style="width:1144px;height:680px;display:flex;background:#fafafa;font:400 15px/22px 'Instrument Sans',sans-serif;color:#111;overflow:hidden;border:1px solid #e6e4e0">
+<div style="width:248px;flex-shrink:0;background:#e8dfd1;display:flex;flex-direction:column;padding:20px 16px;box-sizing:border-box;gap:4px">
+<div style="display:flex;align-items:center;gap:12px;height:40px;padding:0 4px;margin-bottom:20px"><div style="width:32px;height:32px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font:500 20px 'Newsreader',serif">R</div><span style="font:500 20px 'Newsreader',serif">RenewCMS</span></div>
+<div style="display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;color:#444"><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/house.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;"></span>Home</div>
+<div style="display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;background:#fafafa;font-weight:600"><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/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;"></span>Articles</div>
+<div style="display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;color:#444"><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/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;"></span>Integration</div>
+<div style="flex:1"></div>
+<div style="display:flex;align-items:center;gap:12px;height:48px;padding:0 4px"><div style="width:32px;height:32px;background:#222;color:#e8dfd1;display:flex;align-items:center;justify-content:center;font:600 12px 'Instrument Sans',sans-serif">MA</div><span style="flex:1">marta</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;color:#444"></span></div>
+</div>
+<div style="flex:1;min-width:0;display:flex;flex-direction:column">
+<div style="height:60px;display:flex;align-items:center;padding:0 32px;gap:8px;color:#666;font-size:14px"><span>Home</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;"></span><span style="color:#111">Articles</span><span style="flex:1"></span><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/sun-moon.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/sun-moon.svg') center / contain no-repeat;color:#444"></span></div>
+<div style="padding:4px 32px 32px;display:flex;flex-direction:column;gap:22px">
+<div style="display:flex;align-items:flex-end;gap:16px"><div style="flex:1;display:flex;flex-direction:column;gap:4px"><span style="font:500 36px/1.1 'Newsreader',serif">Articles</span><span style="color:#666">Everything you've written, online and in draft.</span></div><div style="height:40px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#222;color:#fff;font-weight:500"><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/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span>New article</div></div>
+<div style="display:flex;align-items:center;gap:16px">
+<div style="display:flex;border:1px solid #d4c5b0;flex-shrink:0"><span style="height:38px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#e8dfd1;font-weight:600">All <span style="font-weight:400;color:#444">6</span></span><span style="height:38px;display:flex;align-items:center;gap:6px;padding:0 14px;color:#444">Online 4</span><span style="height:38px;display:flex;align-items:center;gap:6px;padding:0 14px;color:#444">Drafts 2</span></div>
+<span style="flex:1"></span>
+<div style="width:280px;height:40px;border:1px solid #d4c5b0;background:#fff;display:flex;align-items:center;gap:10px;padding:0 12px;color:#666;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;"></span>Search by title</div>
+</div>
+<div style="display:flex;flex-direction:column;gap:2px">
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 120px 130px 140px 48px;height:36px;align-items:center;padding:0 16px;color:#666;font-size:14px"><span>Title</span><span>Status</span><span>Created</span><span style="display:flex;align-items:center;gap:4px;color:#111">Updated<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/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="{{ articles5 }}" as="a" hint-placeholder-count="5">
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 120px 130px 140px 48px;height:60px;align-items:center;padding:0 16px;background:#fff">
+<span style="font:500 18px/1.2 'Newsreader',serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:16px">{{ a.t }}</span>
+<span><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;background:#111;color:#fff;font-size:13px;font-weight:500"><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/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;background:#e8dfd1;color:#222;font-size:13px;font-weight:500"><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/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if></span>
+<span style="color:#666;font-size:14px">{{ a.c }}</span><span style="color:#666;font-size:14px">{{ a.u }}</span>
+<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;color:#444;justify-self:center"></span>
+</div>
+</sc-for>
+</div>
+</div>
+</div>
+</div>
+
+<div style="display:flex;gap:40px;align-items:flex-start">
+<div style="width:390px;height:780px;flex-shrink:0;background:#111;color:#fafafa;font:400 15px/22px 'Instrument Sans',sans-serif;display:flex;flex-direction:column;overflow:hidden">
+<div style="height:60px;display:flex;align-items:center;gap:12px;padding:0 16px;background:#222"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:22px;height:22px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;"></span><span style="flex:1;font:500 22px 'Newsreader',serif">Articles</span><div style="height:44px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#d4c5b0;color:#111;font-weight:600"><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/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span>New</div></div>
+<div style="padding:16px;display:flex;flex-direction:column;gap:12px">
+<div style="height:44px;border:1px solid #444;display:flex;align-items:center;gap:10px;padding:0 12px;color:#999"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;"></span>Search by title</div>
+<div style="display:flex;border:1px solid #444"><span style="flex:1;height:40px;display:flex;align-items:center;justify-content:center;gap:6px;background:#444;font-weight:600">All 6</span><span style="flex:1;height:40px;display:flex;align-items:center;justify-content:center;color:#cfccc7">Online 4</span><span style="flex:1;height:40px;display:flex;align-items:center;justify-content:center;color:#cfccc7">Drafts 2</span></div>
+</div>
+<div style="padding:0 16px;display:flex;flex-direction:column;gap:8px">
+<sc-for list="{{ articles5 }}" as="a" hint-placeholder-count="5">
+<div style="display:flex;align-items:flex-start;gap:12px;padding:14px;background:#222">
+<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:8px"><span style="font:500 19px/1.25 'Newsreader',serif">{{ a.t }}</span><div style="display:flex;align-items:center;gap:10px;font-size:13px;color:#999"><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;background:#d4c5b0;color:#111;font-weight:500"><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/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;background:#444;color:#e8dfd1;font-weight:500"><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/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if><span>{{ a.u }}</span></div></div>
+<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;color:#999;padding-top:2px"></span>
+</div>
+</sc-for>
+</div>
+</div>
+<div style="flex:1;display:flex;flex-direction:column;gap:14px;max-width:560px;padding-top:8px">
+<span style="font:500 34px/1.2 'Newsreader',serif;color:#111">Choosing lime plaster for old stone walls</span>
+<p style="margin:0;font:400 19px/32px 'Newsreader',serif;color:#222;text-wrap:pretty">Cement traps moisture in solid walls. Lime lets the stone breathe, which is why we strip it back on almost every farmhouse we take on.</p>
+<blockquote style="margin:0;padding:14px 18px;background:#e8dfd1;font:italic 400 19px/30px 'Newsreader',serif;color:#222">It sets slowly, and that is the point.</blockquote>
+<p style="margin:0;font:400 13px/1.5 'Instrument Sans',sans-serif;color:#666;text-wrap:pretty">Contrast: #222 on #e8dfd1 12.4:1 · #444 on #e8dfd1 7.3:1 · #111 on #d4c5b0 11.2:1 · #e8dfd1 on #444 7.3:1.</p>
+</div>
+</div>
+</div>
+
+<div id="1c" data-screen-label="1c Plank" style="width:1240px;box-sizing:border-box;background:#fff;padding:48px;display:flex;flex-direction:column;gap:36px">
+<div style="display:flex;align-items:center;gap:14px"><span style="background:#111;color:#fff;font:500 14px 'IBM Plex Mono',monospace;padding:4px 9px">1c</span><h2 style="margin:0;font:800 36px/1.05 'Archivo',sans-serif;letter-spacing:-0.02em">Plank</h2></div>
+<p style="margin:0;max-width:820px;font:400 16px/1.6 'Archivo',sans-serif;color:#444;text-wrap:pretty">Solid and confident, like freshly cut timber and a builder's pencil. A black sidebar anchors the page, headings are heavy, dates and ids sit in monospace. Status is shape-coded: online is a filled sand tag, draft is a dashed outline. Most graphic of the three, still restrained.</p>
+<div style="display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;font:400 13px/1.5 'Archivo',sans-serif;color:#444">
+<div style="display:flex;flex-direction:column;gap:10px">
+<div style="display:flex;gap:6px">
+<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#111"></div><span>primary</span><span style="font-family:'JetBrains Mono',monospace">#111111</span></div>
+<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#d4c5b0"></div><span>secondary</span><span style="font-family:'JetBrains Mono',monospace">#d4c5b0</span></div>
+<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#222"></div><span>neutral-800</span><span style="font-family:'JetBrains Mono',monospace">#222222</span></div>
+<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#fff;border:1px solid #cfccc7;box-sizing:border-box"></div><span>bg</span><span style="font-family:'JetBrains Mono',monospace">#ffffff</span></div>
+<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#666"></div><span>text-muted</span><span style="font-family:'JetBrains Mono',monospace">#666666</span></div>
+</div>
+<span>Ink and sand at full strength. White page, black frame, sand for the one thing that is live.</span>
+</div>
+<div style="display:flex;flex-direction:column;gap:6px">
+<span style="font:800 28px/1.1 'Archivo',sans-serif;color:#111;letter-spacing:-0.02em">Aa Archivo</span>
+<span style="font:600 26px/1.2 'Literata',serif;color:#111">Aa Literata</span>
+<span style="font:400 14px 'JetBrains Mono',monospace;color:#111">2026-09-24 · /v1/article/12</span>
+</div>
+<div style="display:flex;flex-direction:column;gap:6px">
+<span style="color:#111;font-weight:500">Radius 0 · 2 px frame lines · medium</span>
+<span>Rows 52 px, controls 40 px. Heavy rules around the table, hairlines inside it.</span>
+</div>
+</div>
+
+<div style="width:1144px;height:680px;display:flex;background:#fff;font:400 14px/20px 'Archivo',sans-serif;color:#111;overflow:hidden;border:2px solid #111;box-sizing:border-box">
+<div style="width:232px;flex-shrink:0;background:#111;color:#fafafa;display:flex;flex-direction:column;padding:16px 12px;box-sizing:border-box;gap:4px">
+<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:18px"><div style="width:30px;height:30px;background:#111;border:1px solid #666;color:#fff;display:flex;align-items:center;justify-content:center;font:800 18px 'Archivo',sans-serif;box-sizing:border-box">R</div><span style="font:800 16px 'Archivo',sans-serif;letter-spacing:-0.01em">RenewCMS</span></div>
+<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;color:#cfccc7"><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/house.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;"></span>Home</div>
+<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;background:#d4c5b0;color:#111;font-weight:600"><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/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;"></span>Articles</div>
+<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;color:#cfccc7"><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/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;"></span>Integration</div>
+<div style="flex:1"></div>
+<div style="display:flex;align-items:center;gap:10px;height:48px;padding:8px 6px 0;border-top:1px solid #333"><div style="width:30px;height:30px;background:#fafafa;color:#111;display:flex;align-items:center;justify-content:center;font:600 12px 'Archivo',sans-serif">MA</div><span style="flex:1">marta</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;color:#999"></span></div>
+</div>
+<div style="flex:1;min-width:0;display:flex;flex-direction:column">
+<div style="height:52px;border-bottom:1px solid #cfccc7;display:flex;align-items:center;padding:0 32px;gap:8px;color:#666"><span>Home</span><span>/</span><span style="color:#111;font-weight:500">Articles</span><span style="flex:1"></span><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/sun-moon.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/sun-moon.svg') center / contain no-repeat;color:#111"></span></div>
+<div style="padding:28px 32px;display:flex;flex-direction:column;gap:22px">
+<div style="display:flex;align-items:flex-end;gap:16px"><div style="flex:1;display:flex;flex-direction:column;gap:6px"><span style="font:800 40px/1 'Archivo',sans-serif;letter-spacing:-0.03em">Articles</span><span style="color:#666">Everything you've written, online and in draft.</span></div><div style="height:40px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#111;color:#fff;font-weight:600"><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/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span>New article</div></div>
+<div style="display:flex;align-items:center;gap:16px">
+<div style="display:flex;gap:6px;flex:1"><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#111;color:#fff;font-weight:600">All <span style="font:400 12px 'JetBrains Mono',monospace">6</span></span><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #cfccc7;box-sizing:border-box">Online <span style="font:400 12px 'JetBrains Mono',monospace;color:#666">4</span></span><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #cfccc7;box-sizing:border-box">Drafts <span style="font:400 12px 'JetBrains Mono',monospace;color:#666">2</span></span></div>
+<div style="width:260px;height:40px;border:2px solid #111;display:flex;align-items:center;gap:10px;padding:0 12px;color:#666;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;color:#111"></span>Search by title</div>
+</div>
+<div style="border-top:2px solid #111;border-bottom:2px solid #111">
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 120px 120px 130px 44px;height:40px;align-items:center;padding:0 8px;font-weight:600;border-bottom:1px solid #111"><span>Title</span><span>Status</span><span>Created</span><span style="display:flex;align-items:center;gap:4px">Updated<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/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="{{ articles5 }}" as="a" hint-placeholder-count="5">
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 120px 120px 130px 44px;height:52px;align-items:center;padding:0 8px;border-top:1px solid #e6e4e0">
+<span style="font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:16px">{{ a.t }}</span>
+<span><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;background:#d4c5b0;color:#111;font-size:12px;font-weight:600"><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/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border:1px dashed #444;color:#444;font-size:12px;font-weight:600;box-sizing:border-box"><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/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if></span>
+<span style="color:#666;font:400 12px 'JetBrains Mono',monospace">{{ a.ci }}</span><span style="color:#666;font:400 12px 'JetBrains Mono',monospace">{{ a.ui }}</span>
+<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;justify-self:center"></span>
+</div>
+</sc-for>
+</div>
+</div>
+</div>
+</div>
+
+<div style="display:flex;gap:40px;align-items:flex-start">
+<div style="width:390px;height:780px;flex-shrink:0;background:#111;color:#fafafa;font:400 15px/22px 'Archivo',sans-serif;display:flex;flex-direction:column;overflow:hidden;position:relative">
+<div style="height:56px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:2px solid #333"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:22px;height:22px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;"></span><div style="width:26px;height:26px;border:1px solid #666;display:flex;align-items:center;justify-content:center;font:800 15px 'Archivo',sans-serif;box-sizing:border-box">R</div><span style="flex:1"></span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;"></span></div>
+<div style="padding:20px 16px 12px;display:flex;flex-direction:column;gap:14px">
+<span style="font:800 32px/1 'Archivo',sans-serif;letter-spacing:-0.03em">Articles</span>
+<div style="display:flex;gap:6px"><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#fafafa;color:#111;font-weight:600">All <span style="font:400 12px 'JetBrains Mono',monospace">6</span></span><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #444;box-sizing:border-box">Online <span style="font:400 12px 'JetBrains Mono',monospace;color:#999">4</span></span><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #444;box-sizing:border-box">Drafts <span style="font:400 12px 'JetBrains Mono',monospace;color:#999">2</span></span></div>
+</div>
+<sc-for list="{{ articles5 }}" as="a" hint-placeholder-count="5">
+<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid #333">
+<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:8px"><span style="font-weight:600;font-size:16px">{{ a.t }}</span><div style="display:flex;align-items:center;gap:10px;color:#999;font:400 12px 'JetBrains Mono',monospace"><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;background:#d4c5b0;color:#111;font:600 12px 'Archivo',sans-serif"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;border:1px dashed #999;color:#e8dfd1;font:600 12px 'Archivo',sans-serif;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if><span>{{ a.ui }}</span></div></div>
+<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;color:#999"></span>
+</div>
+</sc-for>
+<div style="position:absolute;left:16px;right:16px;bottom:16px;height:52px;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span>New article</div>
+</div>
+<div style="flex:1;display:flex;flex-direction:column;gap:14px;max-width:560px;padding-top:8px">
+<span style="font:600 30px/1.25 'Literata',serif;color:#111">Choosing lime plaster for old stone walls</span>
+<p style="margin:0;font:400 18px/31px 'Literata',serif;color:#222;text-wrap:pretty">Cement traps moisture in solid walls. Lime lets the stone breathe, which is why we strip it back on almost every farmhouse we take on.</p>
+<blockquote style="margin:0;padding-left:18px;border-left:4px solid #d4c5b0;font:italic 400 18px/31px 'Literata',serif;color:#444">It sets slowly, and that is the point.</blockquote>
+<p style="margin:0;font:400 13px/1.5 'Archivo',sans-serif;color:#666;text-wrap:pretty">Contrast: #111 on #d4c5b0 11.2:1 · #cfccc7 on #111 12.5:1 · #444 dashed border on #fff 9.7:1. Dashed vs filled keeps status legible without color.</p>
+</div>
+</div>
+</div>
+
+</div>
+</section>
+</x-dc>
+<script type="text/x-dc" data-dc-script>
+class Component extends DCLogic {
+	renderVals() {
+		const articles = [
+			{ t: 'How we price a bathroom renovation', on: true, c: '12 Mar 2026', u: '2 hours ago', ci: '2026-03-12', ui: '2h ago' },
+			{ t: 'Choosing lime plaster for old stone walls', on: false, c: '9 Sep 2026', u: 'Yesterday', ci: '2026-09-09', ui: '1d ago' },
+			{ t: 'Before and after: the Rue Verte kitchen', on: true, c: '28 Aug 2026', u: '3 days ago', ci: '2026-08-28', ui: '3d ago' },
+			{ t: 'Winter checklist for timber windows', on: false, c: '2 Sep 2026', u: '5 days ago', ci: '2026-09-02', ui: '5d ago' },
+			{ t: 'Why we reuse original floorboards', on: true, c: '14 Jun 2026', u: '18 Aug 2026', ci: '2026-06-14', ui: '2026-08-18' },
+			{ t: 'Our first passive-house retrofit', on: true, c: '3 Apr 2026', u: '2 Jul 2026', ci: '2026-04-03', ui: '2026-07-02' }
+		].map(a => ({ ...a, draft: !a.on }))
+		return { articles, articles5: articles.slice(0, 5) }
+	}
+}
+</script>
+</body>
+</html>

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

@@ -0,0 +1,59 @@
+<!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>
+<helmet>
+<meta name="design_doc_mode" content="canvas">
+<link rel="icon" href="brand/favicon.svg">
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>body{margin:0;background:#ecebe8;font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px;color:#222}*{box-sizing:border-box}a{color:#111;text-underline-offset:3px}a:hover{color:#444}code{font-family:'IBM Plex Mono',monospace;font-size:12px}</style>
+</helmet>
+<div data-screen-label="Emails" style="padding:64px;display:flex;flex-direction:column;gap:56px;width:max-content;min-width:100%">
+<div style="display:flex;flex-direction:column;gap:10px;max-width:900px">
+<h1 style="margin:0;font:600 36px/44px 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em;color:#111">Transactional emails</h1>
+<p style="margin:0;font-size:16px;line-height:26px;color:#444;text-wrap:pretty">Two Go <code>html/template</code> files: <a href="emails/verification.html">emails/verification.html</a> and <a href="emails/password-reset.html">emails/password-reset.html</a>. They use a table layout with inline CSS and a 600 px maximum width. The button is bulletproof: a colored table cell plus a padded link, so it survives Outlook. Each has a plain-URL fallback, a hidden preheader, and <code>prefers-color-scheme</code> overrides for clients that support them. The mark is live text in a black cell rather than an image, so it shows even when images are blocked. Previews below use example values.</p>
+<p style="margin:0;font-size:14px;line-height:22px;color:#666;text-wrap:pretty">Suggested subjects are "Verify your RenewCMS account" and "Reset your RenewCMS password". <code>html/template</code> escapes the <code>.Email</code> value for the query string in the reset link (the @ becomes %40), and the confirm route reads it back decoded.</p>
+</div>
+<sc-for list="{{ rows }}" as="r" hint-placeholder-count="2">
+<section style="display:flex;flex-direction:column;gap:20px">
+<div style="display:flex;flex-direction:column;gap:4px"><h2 style="margin:0;font:600 26px/34px 'IBM Plex Sans',sans-serif;color:#111">{{ r.title }}</h2><span style="font:400 13px 'IBM Plex Mono',monospace;color:#444">{{ r.vars }}</span></div>
+<div style="display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap">
+<sc-for list="{{ r.frames }}" as="f" hint-placeholder-count="3">
+<div style="display:flex;flex-direction:column;gap:8px"><span style="font-weight:600;font-size:14px;color:#111">{{ f.label }}</span><iframe title="{{ f.label }}" srcDoc="{{ f.html }}" style="width:{{ f.w }};height:760px;border:1px solid #cfccc7;background:#fff"></iframe></div>
+</sc-for>
+</div>
+</section>
+</sc-for>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script>
+class Component extends DCLogic {
+	state = { v: '', r: '' }
+	componentDidMount() {
+		fetch('emails/verification.html').then(x => x.text()).then(v => this.setState({ v }))
+		fetch('emails/password-reset.html').then(x => x.text()).then(r => this.setState({ r }))
+	}
+	fill(t) {
+		return t.split('{{.Host}}').join('https://cms.renew.example').split('{{.VerificationCode}}').join('7f3c9a2e4b1d').split('{{.Email}}').join('marta%40renew.example').replace('uses marta%40renew.example', 'uses marta@renew.example')
+	}
+	frames(t) {
+		if (!t) return []
+		const light = this.fill(t)
+		const dark = light.replace('@media (prefers-color-scheme: dark)', '@media all')
+		return [{ label: 'Light, 680 px', html: light, w: '680px' }, { label: 'Dark, 680 px', html: dark, w: '680px' }, { label: 'Light, 375 px', html: light, w: '375px' }]
+	}
+	renderVals() {
+		return { rows: [
+			{ title: 'Verification email', vars: '{{.Host}} · {{.VerificationCode}} → /register/validate?c=', frames: this.frames(this.state.v) },
+			{ title: 'Password reset email', vars: '{{.Host}} · {{.VerificationCode}} · {{.Email}} → /register/reset/validate?c=&email=', frames: this.frames(this.state.r) }
+		] }
+	}
+}
+</script>
+</body>
+</html>

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

@@ -0,0 +1,286 @@
+<!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>
+<helmet>
+<link rel="icon" href="brand/favicon.svg">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet">
+<style>body{margin:0;background:#fafafa;color:#111;font-family:'IBM Plex Sans',sans-serif;font-size:14px;line-height:22px}a{color:#111;text-underline-offset:3px}a:hover{color:#444}*{box-sizing:border-box}</style>
+</helmet>
+<div data-screen-label="Ledger foundations" style="max-width:1200px;margin:0 auto;padding:56px 24px 96px;display:flex;flex-direction:column;gap:72px">
+
+<div style="display:flex;flex-direction:column;gap:16px">
+<div style="display:flex;align-items:center;gap:12px">
+<svg width="40" height="40" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg>
+<h1 style="margin:0;font:600 36px/1.1 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em">Ledger foundations</h1>
+</div>
+<p style="margin:0;max-width:760px;color:#444;font-size:16px;line-height:26px;text-wrap:pretty">Everything below is generated from one set of files: <a href="tokens/renewcms.css">tokens/renewcms.css</a> (Tailwind <code style="font-family:'IBM Plex Mono',monospace;font-size:14px">@theme</code>, <code style="font-family:'IBM Plex Mono',monospace;font-size:14px">:root</code>, <code style="font-family:'IBM Plex Mono',monospace;font-size:14px">.dark</code>, article content styles), <a href="tokens/ui.config.ts">tokens/ui.config.ts</a> (Nuxt UI colors, icons and component overrides) and <a href="tokens/vite.config.ts">tokens/vite.config.ts</a>. The tables on this page read those files, so they can't drift.</p>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:24px">
+<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Logo</h2>
+<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">The mark is a white R on a black square, drawn on a 16-pixel grid so it stays sharp as a favicon. It keeps the same geometry at every size. In dark mode the black square gets a 1 px <code style="font-family:'IBM Plex Mono',monospace">#444</code> edge so it doesn't disappear into the background. The wordmark pairs the mark with RenewCMS in Plex Sans Semibold, with the text set at 0.6× the mark's height.</p>
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:1px;background:#e6e4e0;border:1px solid #e6e4e0">
+<div style="background:#fff;padding:32px;display:flex;flex-direction:column;gap:32px">
+<div style="display:flex;align-items:center;gap:12px"><svg width="40" height="40" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:600 24px/1 'IBM Plex Sans',sans-serif;letter-spacing:-0.01em;color:#111">RenewCMS</span></div>
+<div style="display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap">
+<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start"><svg width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:400 12px 'IBM Plex Mono',monospace;color:#666">16</span></div>
+<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start"><svg width="32" height="32" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:400 12px 'IBM Plex Mono',monospace;color:#666">32</span></div>
+<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start"><svg width="64" height="64" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:400 12px 'IBM Plex Mono',monospace;color:#666">64</span></div>
+<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start"><svg width="128" height="128" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:400 12px 'IBM Plex Mono',monospace;color:#666">128, app icon source for 180 / 512</span></div>
+</div>
+<div style="display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:#f3f2f0;border:1px solid #e6e4e0;width:260px;font-size:13px"><svg width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="flex:1">Articles · RenewCMS</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/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;color:#666"></span></div>
+</div>
+<div style="background:#111;padding:32px;display:flex;flex-direction:column;gap:32px">
+<div style="display:flex;align-items:center;gap:12px"><svg width="40" height="40" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#444" fill-rule="evenodd" d="M0 0h16v16H0zM.4 .4v15.2h15.2V.4z"></path><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:600 24px/1 'IBM Plex Sans',sans-serif;letter-spacing:-0.01em;color:#fafafa">RenewCMS</span></div>
+<div style="display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap">
+<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start"><svg width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#444" fill-rule="evenodd" d="M0 0h16v16H0zM1 1v14h14V1z"></path><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:400 12px 'IBM Plex Mono',monospace;color:#999">16</span></div>
+<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start"><svg width="32" height="32" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#444" fill-rule="evenodd" d="M0 0h16v16H0zM.5 .5v15h15V.5z"></path><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:400 12px 'IBM Plex Mono',monospace;color:#999">32</span></div>
+<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start"><svg width="64" height="64" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#444" fill-rule="evenodd" d="M0 0h16v16H0zM.25 .25v15.5h15.5V.25z"></path><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:400 12px 'IBM Plex Mono',monospace;color:#999">64</span></div>
+<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start"><svg width="128" height="128" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#444" fill-rule="evenodd" d="M0 0h16v16H0zM.125 .125v15.75h15.75V.125z"></path><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:400 12px 'IBM Plex Mono',monospace;color:#999">128</span></div>
+</div>
+<div style="display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:#222;border:1px solid #333;width:260px;font-size:13px;color:#e6e4e0"><svg width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#444" fill-rule="evenodd" d="M0 0h16v16H0zM1 1v14h14V1z"></path><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="flex:1">Articles · RenewCMS</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/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;color:#999"></span></div>
+</div>
+</div>
+<p style="margin:0;color:#666;font-size:13px">Favicon file: <a href="brand/favicon.svg">brand/favicon.svg</a>. The 1 px edge switches on with <code style="font-family:'IBM Plex Mono',monospace">prefers-color-scheme: dark</code>. Keep clear space of at least half the mark's height around it. The R is never recolored or placed on sand.</p>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:24px">
+<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Color scales</h2>
+<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Seven Tailwind color scales, each mapped to a Nuxt UI alias. The ink, chalk and sand scales are built on your brand values. The four semantic scales are new and deliberately muted: evenly spaced oklch lightness steps with low chroma, so they sit comfortably next to ink and sand.</p>
+<div style="display:flex;flex-direction:column;gap:28px">
+<sc-for list="{{ scales }}" as="sc" hint-placeholder-count="7">
+<div style="display:flex;flex-direction:column;gap:10px">
+<div style="display:flex;align-items:baseline;gap:10px;flex-wrap:wrap"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif">{{ sc.alias }}</span><span style="font:400 13px 'IBM Plex Mono',monospace;color:#666">{{ sc.name }}</span><span style="color:#666;font-size:13px">{{ sc.note }}</span></div>
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr))">
+<sc-for list="{{ sc.steps }}" as="st" hint-placeholder-count="11">
+<div style="height:72px;padding:8px;display:flex;flex-direction:column;justify-content:space-between;background:{{ st.hex }};color:{{ st.fg }};font:400 12px/16px 'IBM Plex Mono',monospace"><span style="font-weight:500">{{ st.k }}</span><span>{{ st.hex }}</span></div>
+</sc-for>
+</div>
+</div>
+</sc-for>
+</div>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:24px">
+<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Theme variables</h2>
+<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Every <code style="font-family:'IBM Plex Mono',monospace">--ui-*</code> variable Nuxt UI reads, for both themes. Surfaces are white. The <code style="font-family:'IBM Plex Mono',monospace">#fafafa</code> brand background is the page canvas behind them. The theme follows the system setting until the owner picks Light or Dark from the user menu, and that choice is stored by Nuxt UI's color mode.</p>
+<div style="border:1px solid #e6e4e0;background:#fff;overflow-x:auto">
+<div style="min-width:760px">
+<div style="display:grid;grid-template-columns:220px minmax(0,1fr) 200px 200px;gap:16px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500;font-size:13px"><span>Variable</span><span>Used for</span><span>Light</span><span>Dark</span></div>
+<sc-for list="{{ vars }}" as="v" hint-placeholder-count="21">
+<div style="display:grid;grid-template-columns:220px minmax(0,1fr) 200px 200px;gap:16px;padding:10px 16px;border-top:1px solid #e6e4e0;align-items:center;font-size:13px">
+<span style="font:500 13px 'IBM Plex Mono',monospace">{{ v.name }}</span><span style="color:#444">{{ v.use }}</span>
+<span style="display:flex;align-items:center;gap:8px"><span style="width:24px;height:24px;border:1px solid #e6e4e0;background:{{ v.lh }}"></span><span style="font:400 12px 'IBM Plex Mono',monospace">{{ v.lr }} {{ v.lh }}</span></span>
+<span style="display:flex;align-items:center;gap:8px"><span style="width:24px;height:24px;border:1px solid #444;background:{{ v.dh }}"></span><span style="font:400 12px 'IBM Plex Mono',monospace">{{ v.dr }} {{ v.dh }}</span></span>
+</div>
+</sc-for>
+</div>
+</div>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:24px">
+<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Contrast checks</h2>
+<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Each ratio is computed from the variables above against WCAG 2.2 AA: 4.5:1 for text and 3:1 for control edges and focus rings. Soft alerts are measured against a 10% tint of the color over the surface, which is how Nuxt UI renders them. {{ passSummary }}</p>
+<div style="border:1px solid #e6e4e0;background:#fff;overflow-x:auto">
+<div style="min-width:720px">
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 90px 190px 190px;gap:16px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500;font-size:13px"><span>Pair</span><span>Needs</span><span>Light</span><span>Dark</span></div>
+<sc-for list="{{ contrast }}" as="c" hint-placeholder-count="26">
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 90px 190px 190px;gap:16px;padding:8px 16px;border-top:1px solid #e6e4e0;align-items:center;font-size:13px">
+<span>{{ c.label }}</span><span style="font:400 12px 'IBM Plex Mono',monospace;color:#444">{{ c.need }}</span>
+<span style="display:flex;align-items:center;gap:10px"><span style="width:40px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:600;background:{{ c.light.bg }};color:{{ c.light.fg }};border:1px solid #e6e4e0">Aa</span><span style="font:500 12px 'IBM Plex Mono',monospace">{{ c.light.ratio }}</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/{{ c.lIcon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ c.lIcon }}.svg') center / contain no-repeat;"></span></span>
+<span style="display:flex;align-items:center;gap:10px"><span style="width:40px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:600;background:{{ c.dark.bg }};color:{{ c.dark.fg }};border:1px solid #444">Aa</span><span style="font:500 12px 'IBM Plex Mono',monospace">{{ c.dark.ratio }}</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/{{ c.dIcon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ c.dIcon }}.svg') center / contain no-repeat;"></span></span>
+</div>
+</sc-for>
+</div>
+</div>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:24px">
+<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Typography</h2>
+<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">The interface uses IBM Plex Sans in three weights: 400, 500 and 600. IDs, paths, counters and code are set in IBM Plex Mono. Sizes replace Tailwind's <code style="font-family:'IBM Plex Mono',monospace">text-*</code> defaults. On screens narrower than <code style="font-family:'IBM Plex Mono',monospace">md</code>, form fields use 16 px so iOS doesn't zoom in when a field gets focus.</p>
+<div style="border:1px solid #e6e4e0;background:#fff">
+<sc-for list="{{ typeUi }}" as="t" hint-placeholder-count="6">
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px;padding:16px;border-bottom:1px solid #e6e4e0;align-items:center">
+<span style="font-family:'IBM Plex Sans',sans-serif;font-size:{{ t.size }};line-height:{{ t.lh }};font-weight:{{ t.fw }};overflow:hidden;text-overflow:ellipsis;white-space:nowrap">Before and after: the Rue Verte kitchen</span>
+<div style="display:flex;flex-direction:column;font-size:12px;line-height:18px;color:#666"><span style="font:500 12px 'IBM Plex Mono',monospace;color:#111">{{ t.name }} · {{ t.size }} / {{ t.lh }} · {{ t.w }}</span><span>{{ t.use }}</span></div>
+</div>
+</sc-for>
+<div style="display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px;padding:16px;align-items:center">
+<span style="font:400 13px/20px 'IBM Plex Mono',monospace">GET /v1/article/12 · 8 412 / 10 000</span>
+<div style="display:flex;flex-direction:column;font-size:12px;line-height:18px;color:#666"><span style="font:500 12px 'IBM Plex Mono',monospace;color:#111">font-mono · 13px / 20px · 400</span><span>Code, paths, IDs, counters</span></div>
+</div>
+</div>
+
+<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Article content uses a separate scale in Source Serif 4, applied through the <code style="font-family:'IBM Plex Mono',monospace">.article-content</code> class. The editor surface and the preview both use it, so what the owner writes looks like what a public site would roughly show. The measure is capped at 42 rem, about 70 characters per line.</p>
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:24px;align-items:start">
+<div style="background:#fff;border:1px solid #e6e4e0;padding:40px;font-family:'Source Serif 4',serif;color:#111">
+<div style="font-size:32px;line-height:40px;font-weight:600;margin:0 0 16px;text-wrap:balance">Choosing lime plaster for old stone walls</div>
+<p style="margin:0 0 20px;font-size:18px;line-height:30px">Cement traps moisture in solid walls. Lime lets the stone breathe, which is why we strip it back on almost every <a href="#" style="color:#111;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px">farmhouse we take on</a>.</p>
+<div style="font-size:26px;line-height:34px;font-weight:600;margin:40px 0 12px">What we use</div>
+<ul style="margin:0 0 20px;padding-left:28px;list-style:square;font-size:18px;line-height:30px"><li style="margin:0 0 6px">Hot-mixed lime for the base coat</li><li style="margin:0 0 6px">Hair or fibre for the scratch coat</li><li style="margin:0 0 6px">A thin lime putty finish</li></ul>
+<div style="font-size:21px;line-height:30px;font-weight:600;margin:32px 0 8px">Drying time</div>
+<blockquote style="margin:28px 0;padding-left:20px;border-left:2px solid #111;font-style:italic;font-size:18px;line-height:30px;color:#444">It sets slowly, and that is the point.</blockquote>
+<div style="font-size:18px;line-height:28px;font-weight:600;margin:24px 0 8px">Before you start</div>
+<ol style="margin:0 0 20px;padding-left:28px;font-size:18px;line-height:30px"><li style="margin:0 0 6px">Strip loose material back to sound stone.</li><li style="margin:0 0 6px">Wet the wall the evening before.</li></ol>
+<div style="margin:28px 0 0"><div style="aspect-ratio:16/9;background:#f3f2f0;border:1px dashed #cfccc7;display:flex;align-items:center;justify-content:center;color:#666;font:400 13px 'IBM Plex Sans',sans-serif">Article image</div><div style="margin-top:8px;font:400 14px/20px 'IBM Plex Sans',sans-serif;color:#666">The north wall after the second coat.</div></div>
+</div>
+<div style="border:1px solid #e6e4e0;background:#fff">
+<div style="display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1fr);gap:12px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500;font-size:13px"><span>Element</span><span>md and up</span><span>Below md, spacing</span></div>
+<sc-for list="{{ typeContent }}" as="t" hint-placeholder-count="10">
+<div style="display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px;line-height:20px">
+<span style="font:500 13px 'IBM Plex Mono',monospace">{{ t.el }}</span><span>{{ t.desk }}</span><span style="color:#444">{{ t.rest }}</span>
+</div>
+</sc-for>
+</div>
+</div>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:24px">
+<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Spacing, radius and density</h2>
+<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Spacing uses Tailwind's 4 px base unit unchanged. Radius is 0 everywhere: setting <code style="font-family:'IBM Plex Mono',monospace">--ui-radius: 0rem</code> flattens every component that derives its corners from it, and <code style="font-family:'IBM Plex Mono',monospace">rounded-none</code> overrides cover the few that hard-code <code style="font-family:'IBM Plex Mono',monospace">rounded-full</code>. The density is compact on desktop. On touch screens, every tap target is at least 44 px.</p>
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:24px;align-items:start">
+<div style="background:#fff;border:1px solid #e6e4e0;padding:20px;display:flex;flex-direction:column;gap:10px">
+<sc-for list="{{ spacing }}" as="s" hint-placeholder-count="10">
+<div style="display:grid;grid-template-columns:44px 64px minmax(0,1fr);gap:12px;align-items:center;font-size:13px"><span style="font:500 12px 'IBM Plex Mono',monospace">{{ s.k }}</span><span style="height:12px;background:#111;width:{{ s.w }}"></span><span style="color:#444">{{ s.px }} · {{ s.use }}</span></div>
+</sc-for>
+</div>
+<div style="background:#fff;border:1px solid #e6e4e0">
+<div style="display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500;font-size:13px"><span>Control</span><span>Height and use</span></div>
+<div style="display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px"><span style="font-family:'IBM Plex Mono',monospace">size="sm"</span><span>28 px · table row actions, toolbar buttons in the editor</span></div>
+<div style="display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px"><span style="font-family:'IBM Plex Mono',monospace">size="md"</span><span>32 px · default on desktop: buttons, inputs, selects, tabs</span></div>
+<div style="display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px"><span style="font-family:'IBM Plex Mono',monospace">size="lg"</span><span>40 px · auth forms, primary actions in dialogs</span></div>
+<div style="display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px"><span style="font-family:'IBM Plex Mono',monospace">size="xl"</span><span>44 px · everything below md, via a responsive size prop</span></div>
+<div style="display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px"><span style="font-family:'IBM Plex Mono',monospace">Table row</span><span>44 px on desktop, 64 px cards on mobile</span></div>
+<div style="display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px"><span style="font-family:'IBM Plex Mono',monospace">Gutters</span><span>16 px on mobile, 24 px on desktop; sidebar 224 px, collapses to 56 px</span></div>
+</div>
+</div>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:24px">
+<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Borders and elevation</h2>
+<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Most surfaces are flat and separated by hairlines. Shadows appear only on things that float above the page.</p>
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px">
+<div style="display:flex;flex-direction:column;gap:12px"><div style="height:96px;background:#fff;border:1px solid #e6e4e0"></div><span style="font-weight:500">Hairline</span><span style="color:#444;font-size:13px">1 px <code style="font-family:'IBM Plex Mono',monospace">--ui-border</code>. Cards, table edges, sidebar and top bar dividers. Decorative, so no contrast requirement.</span></div>
+<div style="display:flex;flex-direction:column;gap:12px"><div style="height:96px;background:#fff;border:1px solid #8a8783;display:flex;align-items:center;padding:0 12px;color:#666">Search by title</div><span style="font-weight:500">Control edge</span><span style="color:#444;font-size:13px">1 px <code style="font-family:'IBM Plex Mono',monospace">--ui-border-accented</code>. Inputs, selects, checkboxes, outline buttons. 3.6:1 on white.</span></div>
+<div style="display:flex;flex-direction:column;gap:12px"><div style="height:96px;background:#fafafa;display:flex;align-items:center;justify-content:center"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:#111;color:#fff;font-weight:500;outline:2px solid #111;outline-offset:2px">New article</span></div><span style="font-weight:500">Focus ring</span><span style="color:#444;font-size:13px">2 px <code style="font-family:'IBM Plex Mono',monospace">--ui-primary</code> outline with a 2 px offset, shown only on <code style="font-family:'IBM Plex Mono',monospace">:focus-visible</code>. Nuxt UI's default, kept.</span></div>
+<div style="display:flex;flex-direction:column;gap:12px"><div style="height:96px;background:#fafafa;display:flex;align-items:center;justify-content:center"><div style="width:180px;background:#fff;border:1px solid #e6e4e0;box-shadow:0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06);padding:4px;font-size:13px"><div style="height:28px;display:flex;align-items:center;gap:8px;padding:0 8px;background:#f3f2f0"><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/pencil.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat;"></span>Edit</div><div style="height:28px;display:flex;align-items:center;gap:8px;padding:0 8px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe-lock.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe-lock.svg') center / contain no-repeat;"></span>Unpublish</div></div></div><span style="font-weight:500">Popover</span><span style="color:#444;font-size:13px"><code style="font-family:'IBM Plex Mono',monospace">--shadow-popover</code>. Dropdown menus, selects, toasts. In dark mode it becomes a darker shadow plus the hairline.</span></div>
+<div style="display:flex;flex-direction:column;gap:12px"><div style="height:96px;background:rgb(10 10 10 / 0.4);display:flex;align-items:center;justify-content:center"><div style="width:180px;height:60px;background:#fff;box-shadow:0 16px 48px rgb(17 17 17 / 0.18)"></div></div><span style="font-weight:500">Modal</span><span style="color:#444;font-size:13px"><code style="font-family:'IBM Plex Mono',monospace">--shadow-modal</code> over a 40% <code style="font-family:'IBM Plex Mono',monospace">chalk-950</code> overlay. Modals and slideovers.</span></div>
+</div>
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:24px;align-items:start">
+<div style="border:1px solid #e6e4e0;background:#fff">
+<div style="display:grid;grid-template-columns:130px 50px minmax(0,1fr);gap:12px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500;font-size:13px"><span>Layer</span><span>z</span><span>Contents</span></div>
+<sc-for list="{{ zLayers }}" as="z" hint-placeholder-count="8">
+<div style="display:grid;grid-template-columns:130px 50px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px"><span style="font-family:'IBM Plex Mono',monospace">{{ z.n }}</span><span style="font-family:'IBM Plex Mono',monospace">{{ z.v }}</span><span style="color:#444">{{ z.u }}</span></div>
+</sc-for>
+</div>
+<div style="border:1px solid #e6e4e0;background:#fff">
+<div style="display:grid;grid-template-columns:90px 70px minmax(0,1fr);gap:12px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500;font-size:13px"><span>Breakpoint</span><span>Min</span><span>What changes</span></div>
+<sc-for list="{{ breakpoints }}" as="b" hint-placeholder-count="6">
+<div style="display:grid;grid-template-columns:90px 70px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px"><span style="font-family:'IBM Plex Mono',monospace">{{ b.n }}</span><span style="font-family:'IBM Plex Mono',monospace">{{ b.v }}</span><span style="color:#444">{{ b.u }}</span></div>
+</sc-for>
+</div>
+</div>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:24px">
+<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Motion</h2>
+<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Motion is there to show where something came from or that something is working. It is short and never decorative.</p>
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;background:#e6e4e0;border:1px solid #e6e4e0">
+<div style="background:#fff;padding:20px;display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Mono',monospace">120 ms</span><span style="font:400 12px 'IBM Plex Mono',monospace;color:#666">--duration-fast · ease-standard</span><span style="color:#444;font-size:13px">Hover and pressed colors, focus ring, the counter turning to warning, the switch thumb.</span></div>
+<div style="background:#fff;padding:20px;display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Mono',monospace">180 ms</span><span style="font:400 12px 'IBM Plex Mono',monospace;color:#666">--duration-base · ease-enter / ease-exit</span><span style="color:#444;font-size:13px">Dropdowns and tooltips (fade plus a 4 px shift), the tab indicator, toasts sliding in, SaveStatus crossfades.</span></div>
+<div style="background:#fff;padding:20px;display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Mono',monospace">240 ms</span><span style="font:400 12px 'IBM Plex Mono',monospace;color:#666">--duration-slow · ease-enter / ease-exit</span><span style="color:#444;font-size:13px">Modals (fade plus scale from 0.98), slideovers (slide from the edge), sidebar collapse.</span></div>
+</div>
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:24px">
+<div style="display:flex;flex-direction:column;gap:8px"><span style="font-weight:600">Never animates</span><span style="color:#444;text-wrap:pretty">Route changes, table rows sorting or filtering, numbers counting up, the logo, editor text, and anything that runs on page load.</span></div>
+<div style="display:flex;flex-direction:column;gap:8px"><span style="font-weight:600">Reduced motion</span><span style="color:#444;text-wrap:pretty">With <code style="font-family:'IBM Plex Mono',monospace">prefers-reduced-motion: reduce</code>, every transition and animation completes instantly, skeletons stop pulsing and become flat blocks, and toasts appear without sliding. The one exception is the spinner on the automatic verification screen. It keeps turning, slowed to 1.6 s per rotation, because it is the only sign that work is happening.</span></div>
+</div>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:24px">
+<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Icons</h2>
+<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Lucide through Iconify, using Nuxt UI's <code style="font-family:'IBM Plex Mono',monospace">i-lucide-*</code> classes. Icons are 16 px next to 13–14 px text and 20 px on mobile top bars. They are always paired with a visible label or an <code style="font-family:'IBM Plex Mono',monospace">aria-label</code>. Each icon maps to one meaning: Eye is only ever show password, and Preview uses Book Open.</p>
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));border-top:1px solid #e6e4e0;border-left:1px solid #e6e4e0;background:#fff">
+<sc-for list="{{ icons }}" as="i" hint-placeholder-count="60">
+<div style="display:flex;align-items:center;gap:12px;padding:10px 14px;border-right:1px solid #e6e4e0;border-bottom:1px solid #e6e4e0;min-width:0"><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/{{ i.n }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ i.n }}.svg') center / contain no-repeat;"></span><span style="flex:1;min-width:0;font-size:13px">{{ i.a }}</span><span style="font:400 11px 'IBM Plex Mono',monospace;color:#666;white-space:nowrap">{{ i.n }}</span></div>
+</sc-for>
+</div>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:24px">
+<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Where Nuxt UI defaults bend</h2>
+<div style="display:flex;flex-direction:column;border-top:1px solid #e6e4e0">
+<sc-for list="{{ bends }}" as="b" hint-placeholder-count="8">
+<div style="display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:24px;padding:14px 0;border-bottom:1px solid #e6e4e0"><span style="font-weight:600">{{ b.w }}</span><span style="color:#444;text-wrap:pretty">{{ b.r }}</span></div>
+</sc-for>
+</div>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:24px">
+<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Files</h2>
+<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Ready to paste into the repository. They follow its code style: tabs, no semicolons, single quotes and no comments. The CSS goes in <code style="font-family:'IBM Plex Mono',monospace">src/assets/main.css</code> and the config in <code style="font-family:'IBM Plex Mono',monospace">src/theme/ui.config.ts</code>. Add <code style="font-family:'IBM Plex Mono',monospace">class="isolate"</code> to the app root, as Nuxt UI requires.</p>
+<div style="border:1px solid #222;background:#111;color:#e6e4e0">
+<div style="display:flex;align-items:stretch;border-bottom:1px solid #333;overflow-x:auto">
+<sc-for list="{{ fileTabs }}" as="f" hint-placeholder-count="3">
+<button onClick="{{ f.pick }}" aria-pressed="{{ f.active }}" style="all:unset;cursor:pointer;height:44px;padding:0 16px;display:flex;align-items:center;font:500 13px 'IBM Plex Mono',monospace;color:{{ f.color }};border-bottom:2px solid {{ f.line }}" style-focus-visible="outline:2px solid #fafafa;outline-offset:-2px">{{ f.name }}</button>
+</sc-for>
+<span style="flex:1"></span>
+<button onClick="{{ copy }}" style="all:unset;cursor:pointer;height:44px;padding:0 16px;display:flex;align-items:center;gap:8px;font:500 13px 'IBM Plex Sans',sans-serif;color:#fafafa" style-hover="background:#222"><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/{{ copyIcon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ copyIcon }}.svg') center / contain no-repeat;"></span><span aria-live="polite">{{ copyLabel }}</span></button>
+</div>
+<pre style="margin:0;padding:20px;max-height:560px;overflow:auto;font:400 13px/20px 'IBM Plex Mono',monospace;tab-size:4;white-space:pre">{{ code }}</pre>
+</div>
+</div>
+
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script>
+class Component extends DCLogic {
+	state = { tokens: null, files: {}, file: 'tokens/renewcms.css', copied: false }
+	componentDidMount() {
+		fetch('tokens/tokens.json').then(r => r.json()).then(tokens => this.setState({ tokens }))
+		for (const f of ['tokens/renewcms.css', 'tokens/ui.config.ts', 'tokens/vite.config.ts']) fetch(f).then(r => r.text()).then(t => this.setState(s => ({ files: { ...s.files, [f]: t } })))
+	}
+	renderVals() {
+		const t = this.state.tokens || { scales: [], vars: [], contrast: [], typeUi: [], typeContent: [] }
+		const scales = t.scales.map(s => ({ ...s, steps: s.steps.map(x => ({ ...x, fg: x.dark ? '#ffffff' : '#111111' })) }))
+		const contrast = t.contrast.map(c => ({ ...c, lIcon: c.need === 'exempt' ? 'minus' : c.lp ? 'check' : 'x', dIcon: c.need === 'exempt' ? 'minus' : c.dp ? 'check' : 'x' }))
+		const req = t.contrast.filter(c => c.need !== 'exempt')
+		const fails = req.filter(c => !c.lp || !c.dp).length
+		const passSummary = t.contrast.length ? (fails ? fails + ' pairs fail.' : 'All ' + req.length + ' required pairs pass in both themes. Dimmed text is used only for disabled controls, which WCAG exempts.') : ''
+		const fw = w => w.startsWith('600') ? 600 : 400
+		const typeUi = t.typeUi.map(x => ({ ...x, fw: fw(x.w) }))
+		const typeContent = t.typeContent.map(x => ({ el: x.el, desk: x.size ? x.size + ' / ' + x.lh + ' · ' + x.w : '', rest: [x.mob, x.sp].filter(Boolean).join(' · ') }))
+		const spacing = [['1', 4, 'icon to label'], ['2', 8, 'inside badges, menu items'], ['3', 12, 'control padding x, table cell padding'], ['4', 16, 'mobile gutter, card padding'], ['5', 20, 'dialog padding on mobile'], ['6', 24, 'desktop gutter, dialog padding'], ['8', 32, 'between page header and content'], ['10', 40, 'auth card padding'], ['12', 48, 'between home sections'], ['16', 64, 'empty state vertical padding']].map(([k, px, use]) => ({ k, px: px + 'px', use, w: px + 'px' }))
+		const zLayers = [['base', 0, 'Page content'], ['--z-sticky', 10, 'Table header, editor toolbar'], ['--z-sidebar', 20, 'UDashboardSidebar, top bar'], ['--z-banner', 30, 'Offline banner'], ['--z-popover', 40, 'Dropdown menu, select, popover'], ['--z-overlay', 50, 'Modal, slideover and their overlays'], ['--z-toast', 60, 'Toaster, above modals so failures stay visible'], ['--z-tooltip', 70, 'Tooltip']].map(([n, v, u]) => ({ n, v, u }))
+		const breakpoints = [['xs', '360', 'Smallest supported width; nothing may overflow'], ['sm', '640', 'Auth card stops being full-bleed'], ['md', '768', 'Article cards become a table; fields drop from 16 to 14 px; content scale grows'], ['lg', '1024', 'Sidebar is persistent (slideover below); editor metadata panel sits inline'], ['xl', '1280', 'Editor gets room for content measure plus metadata panel'], ['2xl', '1536', 'Content is capped at --ui-container; no further changes']].map(([n, v, u]) => ({ n, v: v + 'px', u }))
+		const icons = [['Home', 'house'], ['Articles', 'file-text'], ['Integration', 'plug'], ['Collapse sidebar', 'panel-left-close'], ['Expand sidebar', 'panel-left-open'], ['Open menu (mobile)', 'menu'], ['Close, clear search', 'x'], ['Back', 'arrow-left'], ['Breadcrumb separator', 'chevron-right'], ['User menu', 'chevrons-up-down'], ['Log out', 'log-out'], ['Log in', 'log-in'], ['Light theme', 'sun'], ['Dark theme', 'moon'], ['System theme', 'monitor'], ['New article', 'plus'], ['Edit', 'pencil'], ['Status: Online', 'globe'], ['Status: Draft', 'pencil-line'], ['Publish', 'globe'], ['Unpublish', 'globe-lock'], ['Delete', 'trash-2'], ['Copy API URL', 'link'], ['Row actions', 'ellipsis'], ['Row actions (mobile)', 'ellipsis-vertical'], ['Search', 'search'], ['Sort newest first', 'arrow-down'], ['Sort oldest first', 'arrow-up'], ['Save', 'save'], ['Saving', 'loader-circle'], ['Saved', 'check'], ['Unsaved changes', 'circle-dot'], ['Save failed', 'circle-alert'], ['Retry', 'rotate-cw'], ['Preview', 'book-open'], ['Details panel', 'panel-right'], ['Undo', 'undo-2'], ['Redo', 'redo-2'], ['Paragraph', 'pilcrow'], ['Heading 1', 'heading-1'], ['Heading 2', 'heading-2'], ['Heading 3', 'heading-3'], ['Bold', 'bold'], ['Italic', 'italic'], ['Underline', 'underline'], ['Strikethrough', 'strikethrough'], ['Align left', 'align-left'], ['Align center', 'align-center'], ['Align right', 'align-right'], ['Justify', 'align-justify'], ['Bulleted list', 'list'], ['Numbered list', 'list-ordered'], ['Indent', 'indent-increase'], ['Outdent', 'indent-decrease'], ['Clear formatting', 'remove-formatting'], ['Insert image', 'image-plus'], ['Choose file', 'upload'], ['Drop to upload', 'image-down'], ['File rejected', 'file-x'], ['Show password', 'eye'], ['Hide password', 'eye-off'], ['Rule met', 'check'], ['Rule not met yet', 'circle'], ['Email sent', 'mail-check'], ['Verifying', 'loader-circle'], ['Account verified', 'shield-check'], ['Link invalid or expired', 'link-2-off'], ['Cancel registration', 'user-x'], ['Too many attempts', 'timer'], ['Session expired', 'clock'], ['Success', 'circle-check'], ['Info', 'info'], ['Warning', 'triangle-alert'], ['Error', 'circle-x'], ['Offline', 'wifi-off'], ['Not found', 'file-question-mark'], ['Server error', 'server-crash'], ['Copy', 'copy'], ['Copied', 'check'], ['External link', 'external-link']].map(([a, n]) => ({ a, n }))
+		const bends = [
+			{ w: 'Primary shade 900 / 50', r: 'Nuxt UI points --ui-primary at shade 500 (light) and 400 (dark). On the ink scale those are mid-grays, so it points at 900 (#111) and 50 (#fafafa) instead to keep the brand black.' },
+			{ w: 'White surfaces, #fafafa canvas', r: '--ui-bg is white for cards, tables and the sidebar. The brand background #fafafa becomes --ui-bg-muted, applied to UDashboardPanel body, so panels read as sheets on a desk.' },
+			{ w: 'Darker control edges', r: '--ui-border-accented uses chalk-450 (#8a8783) instead of neutral-300. Inputs and checkboxes need 3:1 against their surface (WCAG 1.4.11), and #cfccc7 reaches only about 1.6:1.' },
+			{ w: 'Secondary text is sand-700', r: 'The brand sands (#d4c5b0, #e8dfd1) can\'t carry text on white, so --ui-secondary is sand-700 for text and outlines. The sand fills are used directly, for the active nav item and avatars.' },
+			{ w: 'rounded-none on Switch, Avatar, Chip, Progress', r: 'These use rounded-full, which --ui-radius doesn\'t reach. Square corners are a hard brand rule, so their slots are overridden.' },
+			{ w: '16 px fields below md', r: 'Nuxt UI md inputs are 14 px. iOS Safari zooms into any field under 16 px, which breaks editing on a phone.' },
+			{ w: 'Inverted tooltips', r: 'Tooltips use ink on white in light mode and white on ink in dark mode, instead of an elevated surface, so they stand out from menus.' },
+			{ w: 'Toaster above modals', r: 'The toaster is raised to z 60 so a failed delete or save is still visible while a dialog is open.' }
+		]
+		const names = { 'tokens/renewcms.css': 'renewcms.css', 'tokens/ui.config.ts': 'ui.config.ts', 'tokens/vite.config.ts': 'vite.config.ts' }
+		const fileTabs = Object.keys(names).map(f => ({ name: names[f], active: this.state.file === f, color: this.state.file === f ? '#fafafa' : '#999999', line: this.state.file === f ? '#fafafa' : 'transparent', pick: () => this.setState({ file: f, copied: false }) }))
+		const code = this.state.files[this.state.file] || ''
+		return {
+			scales, vars: t.vars, contrast, passSummary, typeUi, typeContent, spacing, zLayers, breakpoints, icons, bends, fileTabs, code,
+			copyLabel: this.state.copied ? 'Copied' : 'Copy',
+			copyIcon: this.state.copied ? 'check' : 'copy',
+			copy: () => { navigator.clipboard && navigator.clipboard.writeText(code); this.setState({ copied: true }); clearTimeout(this.t); this.t = setTimeout(() => this.setState({ copied: false }), 2000) }
+		}
+	}
+}
+</script>
+</body>
+</html>

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

@@ -0,0 +1,179 @@
+<!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>
+<helmet>
+<link rel="icon" href="brand/favicon.svg">
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>body{margin:0;background:#fafafa;color:#222;font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px}*{box-sizing:border-box}a{color:#111;text-underline-offset:3px}a:hover{color:#444}code{font-family:'IBM Plex Mono',monospace;font-size:12px}</style>
+</helmet>
+<div data-screen-label="Handoff" style="max-width:1200px;margin:0 auto;padding:56px 24px 96px;display:flex;flex-direction:column;gap:64px">
+
+<div style="display:flex;flex-direction:column;gap:16px">
+<div style="display:flex;align-items:center;gap:12px"><svg width="36" height="36" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><h1 style="margin:0;font:600 34px/42px 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em;color:#111">RenewCMS handoff</h1></div>
+<p style="margin:0;max-width:760px;font-size:16px;line-height:26px;color:#444;text-wrap:pretty">Everything needed to build the back-office in Vue 3, vue-router, Pinia and Nuxt UI v4. Tokens have one source of truth, <code>tokens/renewcms.css</code> plus <code>tokens/ui.config.ts</code>. Components use PascalCase names and routes are kebab-case, matching the code.</p>
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:1px;background:#e6e4e0;border:1px solid #e6e4e0">
+<sc-for list="{{ files }}" as="f" hint-placeholder-count="10"><a href="{{ f.href }}" style="background:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:2px;text-decoration:none"><span style="font-weight:600;color:#111">{{ f.t }}</span><span style="color:#666">{{ f.d }}</span></a></sc-for>
+</div>
+</div>
+
+<section style="display:flex;flex-direction:column;gap:16px">
+<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif;color:#111">Route map</h2>
+<p style="margin:0;max-width:760px;color:#444;font-size:14px;line-height:22px;text-wrap:pretty">A global <code>router.beforeEach</code> guard reads <code>meta.auth</code>. On the first navigation it resolves the session with <code>GET /v1/auth/me</code> (API pending) and caches the result in the <code>session</code> store. A fetch wrapper, <code>useApi</code>, turns any 401 into <code>/login?redirect=&amp;reason=expired</code> and any 403 from an unverified account into <code>/register/pending</code>.</p>
+<div style="border:1px solid #e6e4e0;background:#fff;overflow-x:auto"><div style="min-width:980px">
+<div style="display:grid;grid-template-columns:230px 120px 90px 170px minmax(0,1fr);gap:14px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500"><span>Path</span><span>Layout</span><span>Auth</span><span>Screen</span><span>API calls</span></div>
+<sc-for list="{{ routes }}" as="r" hint-placeholder-count="13"><div style="display:grid;grid-template-columns:230px 120px 90px 170px minmax(0,1fr);gap:14px;padding:10px 16px;border-top:1px solid #e6e4e0"><code style="color:#111">{{ r.p }}</code><span>{{ r.l }}</span><span>{{ r.a }}</span><span style="font-weight:500">{{ r.s }}</span><code style="color:#444">{{ r.api }}</code></div></sc-for>
+</div></div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:16px">
+<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif;color:#111">Component inventory</h2>
+<div style="border:1px solid #e6e4e0;background:#fff;overflow-x:auto"><div style="min-width:1100px">
+<div style="display:grid;grid-template-columns:170px 200px minmax(0,1.4fr) 150px 150px 170px;gap:14px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500"><span>Component</span><span>Nuxt UI base</span><span>Props</span><span>Emits</span><span>Slots</span><span>Used on</span></div>
+<sc-for list="{{ components }}" as="c" hint-placeholder-count="20"><div style="display:grid;grid-template-columns:170px 200px minmax(0,1.4fr) 150px 150px 170px;gap:14px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:12px;line-height:18px"><span style="font:600 13px 'IBM Plex Sans',sans-serif;color:#111">{{ c.n }}</span><code style="color:#444">{{ c.b }}</code><code style="color:#222">{{ c.p }}</code><code style="color:#444">{{ c.e }}</code><code style="color:#444">{{ c.s }}</code><span style="color:#444">{{ c.u }}</span></div></sc-for>
+</div></div>
+<p style="margin:0;color:#666">The composables behind these components are <code>useSession</code>, <code>useApi</code>, <code>useArticles</code> (the list cache plus actions shared by the table, cards and editor), <code>useArticleDraft</code> (dirty state, save, and the sessionStorage mirror), <code>useImageUpload</code> (XHR with progress) and <code>useRetryAfter</code> (429 countdown).</p>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:16px">
+<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif;color:#111">State matrix</h2>
+<p style="margin:0;max-width:760px;color:#444;font-size:14px;line-height:22px">Every state is drawn at desktop and mobile on the <a href="RenewCMS Screens Auth.dc.html">auth</a> and <a href="RenewCMS Screens Back-office.dc.html">back-office</a> boards, with final copy.</p>
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,560px),1fr));gap:16px">
+<sc-for list="{{ matrix }}" as="m" hint-placeholder-count="11">
+<div style="background:#fff;border:1px solid #e6e4e0">
+<div style="padding:12px 16px;border-bottom:1px solid #e6e4e0;display:flex;align-items:baseline;justify-content:space-between;gap:12px"><span style="font:600 15px/22px 'IBM Plex Sans',sans-serif;color:#111">{{ m.s }}</span><code style="color:#666">{{ m.r }}</code></div>
+<sc-for list="{{ m.states }}" as="x" hint-placeholder-count="5"><div style="display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;padding:8px 16px;border-top:1px solid #f3f2f0;font-size:12px;line-height:18px"><span style="font-weight:500;color:#111">{{ x.n }}</span><span style="color:#444">{{ x.t }}</span></div></sc-for>
+</div>
+</sc-for>
+</div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:16px">
+<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif;color:#111">HTTP status to copy</h2>
+<p style="margin:0;max-width:760px;color:#444;font-size:14px;line-height:22px;text-wrap:pretty">Response bodies are plain text and are never shown. <code>useApi</code> throws an <code>ApiError</code> with the <code>status</code> and a <code>context</code> key, and each screen maps them to the copy below.</p>
+<div style="border:1px solid #e6e4e0;background:#fff;overflow-x:auto"><div style="min-width:860px">
+<div style="display:grid;grid-template-columns:70px 220px minmax(0,1fr) 150px;gap:14px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500"><span>Status</span><span>Where</span><span>Copy</span><span>Surface</span></div>
+<sc-for list="{{ errors }}" as="e" hint-placeholder-count="18"><div style="display:grid;grid-template-columns:70px 220px minmax(0,1fr) 150px;gap:14px;padding:10px 16px;border-top:1px solid #e6e4e0"><code style="color:#111;font-weight:500">{{ e.c }}</code><span>{{ e.w }}</span><span style="color:#222">{{ e.t }}</span><span style="color:#666">{{ e.s }}</span></div></sc-for>
+</div></div>
+</section>
+
+<section style="display:flex;flex-direction:column;gap:16px">
+<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif;color:#111">API pending</h2>
+<div style="display:flex;flex-direction:column;border-top:1px solid #e6e4e0">
+<sc-for list="{{ pending }}" as="p" hint-placeholder-count="5"><div style="display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px;padding:12px 0;border-bottom:1px solid #e6e4e0"><code style="color:#111;font-weight:500">{{ p.a }}</code><span style="color:#444;text-wrap:pretty">{{ p.d }}</span></div></sc-for>
+</div>
+</section>
+
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script>
+class Component extends DCLogic {
+	renderVals() {
+		const files = [
+			{ t: 'Prototype', d: 'The five flows, clickable', href: 'RenewCMS Prototype.dc.html' },
+			{ t: 'Foundations', d: 'Tokens, contrast, type, motion, icons', href: 'RenewCMS Foundations.dc.html' },
+			{ t: 'Primitives', d: 'Themed Nuxt UI components', href: 'RenewCMS Components Primitives.dc.html' },
+			{ t: 'Product components', d: '17 RenewCMS components', href: 'RenewCMS Components Product.dc.html' },
+			{ t: 'Auth screens', d: 'Six public routes, every state', href: 'RenewCMS Screens Auth.dc.html' },
+			{ t: 'Back-office screens', d: 'Verified routes and global states', href: 'RenewCMS Screens Back-office.dc.html' },
+			{ t: 'Emails', d: 'Previews of both templates', href: 'RenewCMS Emails.dc.html' },
+			{ t: 'tokens/renewcms.css', d: '@theme, :root, .dark, .article-content', href: 'tokens/renewcms.css' },
+			{ t: 'tokens/ui.config.ts', d: 'Nuxt UI colors, icons, overrides', href: 'tokens/ui.config.ts' },
+			{ t: 'tokens/vite.config.ts', d: 'Vite plugin setup', href: 'tokens/vite.config.ts' },
+			{ t: 'emails/verification.html', d: 'Go html/template', href: 'emails/verification.html' },
+			{ t: 'emails/password-reset.html', d: 'Go html/template', href: 'emails/password-reset.html' },
+			{ t: 'brand/favicon.svg', d: '16 px grid mark, dark-aware', href: 'brand/favicon.svg' }
+		]
+		const routes = [
+			['/', 'none', 'any', 'Redirect', 'none; goes to /home or /login'],
+			['/login', 'AuthShell', 'public', 'LoginPage', 'GET /v1/auth/registration* · POST /v1/auth/login'],
+			['/register', 'AuthShell', 'public', 'RegisterPage', 'POST /v1/auth/register'],
+			['/register/pending', 'AuthShell', 'session', 'PendingPage', 'DELETE /v1/auth/register · POST /v1/auth/logout'],
+			['/register/validate', 'AuthShell', 'public', 'VerifyPage', 'POST /v1/auth/verify (+ POST /login inline on 401)'],
+			['/register/reset/request', 'AuthShell', 'public', 'ResetRequestPage', 'POST /v1/auth/password-reset'],
+			['/register/reset/validate', 'AuthShell', 'public', 'ResetConfirmPage', 'POST /v1/auth/password-reset/confirm'],
+			['/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}'],
+			['/integration', 'DashboardShell', 'verified', 'IntegrationPage', 'none'],
+			['/:pathMatch(.*)*', 'either', 'any', 'NotFoundPage', 'none']
+		].map(([p, l, a, s, api]) => ({ p, l, a, s, api }))
+		const components = [
+			['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', 'none', 'logout', 'none', 'DashboardShell'],
+			['PageHeader', 'UPageHeader', 'title, description?', 'none', 'actions, meta', 'Home, Articles, Integration'],
+			['ArticleStatusBadge', 'UBadge', "online: boolean, size?: 'sm'|'md', pending?: 'publish'|'unpublish'", 'none', 'none', 'Home, Articles, Editor'],
+			['ArticleTable', 'UTabs, UInput, UTable, UDropdownMenu, UPagination', 'articles: Article[], loading, busyIds: Set<number>', 'publish, unpublish, delete, copy-url', 'empty, toolbar-right', 'Articles (md and up)'],
+			['ArticleCardList', 'ULink, UDropdownMenu (custom list)', 'same as ArticleTable', 'same as ArticleTable', 'empty', 'Articles (below md)'],
+			['EmptyState', 'UEmpty', "variant: 'no-articles'|'no-results'|'no-drafts'|'no-online', query?", 'action', 'none', 'Home, Articles'],
+			['ConfirmDialog', 'UModal via useOverlay', "title, description, confirmLabel, pendingLabel, tone: 'danger'|'neutral', action: () => Promise<void>", 'close(confirmed)', 'none', 'Articles, Editor, Pending'],
+			['NewArticleModal', 'UModal, UForm, UFormField, UInput, UTextarea', 'none', 'created(article)', 'none', 'Home, Articles, /article/new'],
+			['ArticleEditor', 'UEditor, UEditorToolbar, UDropdownMenu (+ custom Indent extension)', 'modelValue: string, articleId: number, disabled?', 'update:modelValue, request-image', 'none', 'Editor'],
+			['ImageUploader', 'UModal, UFileUpload, UProgress', 'articleId: number', 'uploaded(location), close', 'none', 'Editor'],
+			['SaveStatus', 'custom (span + UButton)', "state: 'clean'|'dirty'|'saving'|'saved'|'error'|'offline', savedAt?: Date", 'retry', 'none', 'Editor'],
+			['PublishControl', 'UButton', 'online: boolean, dirty: boolean, pending?: string, disabled?', 'publish, unpublish', 'none', 'Editor'],
+			['ArticleDetails', 'UCard (desktop) / USlideover (mobile)', 'article: Article', 'copy-url', 'none', 'Editor'],
+			['CharacterCounter', 'custom', 'value: number, max: number, min?: number, warnAt?: number', 'none', 'none', 'NewArticleModal, Editor, Register'],
+			['PasswordStrengthHint', 'custom (in UFormField #help)', 'rules: { label, met }[], showErrors: boolean', 'none', 'none', 'Register, Reset'],
+			['ResultPanel', 'custom + UButton', "tone: 'success'|'error'|'info', icon, title, description, actions: ButtonProps[]", 'none', 'default', 'Pending, Verify, Reset request, Reset, Register (403)'],
+			['CodeBlock', 'custom (shiki) + UButton', 'code: string, lang: string, label?', 'none', 'none', 'Integration'],
+			['EndpointCard', 'UCard, UBadge, UTabs', "method: 'GET', path, description, examples: { fetch, curl, response }", 'none', 'none', 'Integration'],
+			['ErrorView', 'custom + UButton', "kind: 'not-found'|'error'", 'retry', 'none', 'Not found, error boundary'],
+			['OfflineBanner', 'UBanner', 'none (reads useOnline)', 'none', 'none', 'DashboardShell'],
+			['AppBoot', 'USkeleton inside DashboardShell', 'none', 'none', 'none', 'First load of any verified route']
+		].map(([n, b, p, e, s, u]) => ({ n, b, p, e, s, u }))
+		const M = (s, r, list) => ({ s, r, states: list.map(([n, t]) => ({ n, t })) })
+		const matrix = [
+			M('App boot', 'any verified route', [['Checking session', 'First navigation, while GET /v1/auth/me* is pending'], ['Verified', '200 with is_verified: the route renders'], ['Unverified', '200 with is_verified false: goes to /register/pending'], ['No session', '401: goes to /login?redirect=']]),
+			M('Log in', '/login', [['Default', 'Registration closed'], ['Fresh install', 'registration.open is true*'], ['Validation errors', 'Client rules fail on submit'], ['Submitting', 'Request in flight'], ['Wrong credentials', '403'], ['Too many attempts', '429 with Retry-After*'], ['Session expired', '?reason=expired from a 401'], ['Password changed', '?reason=password-changed'], ['Server error', '500 or network']]),
+			M('Register', '/register', [['Default', 'Open instance'], ['Validation errors', 'Client rules fail'], ['Submitting', 'In flight'], ['Registration closed', '403'], ['Server error', '500 or network']]),
+			M('Pending', '/register/pending', [['Default', 'After registering (email known)'], ['Email unknown', 'After logging in unverified'], ['Confirm cancel', 'Cancel registration clicked'], ['Cancelling', 'DELETE in flight'], ['Cancelled', '200: /register with toast'], ['Already verified', '403: /home with toast']]),
+			M('Verify', '/register/validate?c=', [['Verifying', 'On load'], ['Success', '200: /home with toast'], ['Invalid or expired', '403'], ['No session', '401: inline log in, then retry'], ['Missing code', 'No c parameter']]),
+			M('Forgot password', '/register/reset/request', [['Default', 'Page load'], ['Validation', 'Invalid email'], ['Submitting', 'In flight'], ['Sent', 'Any 200 (neutral copy)'], ['Too many attempts', '429*'], ['Server error', '500 or network']]),
+			M('Reset password', '/register/reset/validate', [['Default', 'c and email present'], ['Too short', 'Under 8 characters'], ['Mismatch', 'Confirm field differs'], ['Submitting', 'In flight'], ['Success', '200: /login?reason=password-changed'], ['Invalid or expired', '403'], ['Missing parameters', 'No c or no email']]),
+			M('Home', '/home', [['Loading', 'List in flight (after 150 ms)'], ['Default', 'List loaded'], ['Empty', 'Zero articles'], ['Error', '500 or network']]),
+			M('Articles', '/article', [['Loading', 'List in flight'], ['Default', 'Loaded'], ['Empty', 'Zero articles'], ['No results', 'Search matches nothing'], ['Empty tab', 'No drafts, or nothing online'], ['Row busy', 'Publish or unpublish in flight'], ['Action failed', '500 or network: toast with Retry'], ['Row vanished', '404 on any row action'], ['Delete confirm, in progress, failed, done', 'ConfirmDialog, then DELETE: 204 or 500']]),
+			M('New article', 'modal · /article/new', [['Default', 'Opened'], ['Validation', 'Title under 3 or body empty'], ['Submitting', 'POST in flight'], ['Title rejected', 'Server 400'], ['Error', '500 or network'], ['Created', '201: editor, with a toast']]),
+			M('Editor', '/article/:id/edit', [['Loading', 'GET in flight'], ['Not found', '404'], ['Saved', 'Clean'], ['Unsaved', 'Any edit'], ['Saving', 'PATCH in flight'], ['Save failed', '500 or network'], ['Near the limit', 'At least 9 000 HTML characters'], ['Too long', 'Over 10 000: Save and Publish disabled'], ['Preview', 'Switch on'], ['Uploading, rejected, inserted', 'ImageUploader'], ['Publishing, unpublishing', 'PATCH publish or unpublish'], ['Leave guard', 'Navigating away while dirty'], ['Offline', 'navigator.onLine is false'], ['Deleted', '204: /article with toast'], ['Session expired', '401: draft kept in sessionStorage, then /login']]),
+			M('Integration', '/integration', [['Default', 'Page load'], ['Copied', 'Copy clicked (2 s)']])
+		]
+		const errors = [
+			['400', 'Any form', 'The field error from the client rules. A server 400 that got through: "Something in the form isn\'t valid. Check the highlighted fields."', 'Field + alert'],
+			['401', 'Any back-office call', 'Goes to /login?redirect=<path>&reason=expired. "Your session expired. Log in again to pick up where you left off."', 'Redirect + alert'],
+			['401', 'Verify', '"Log in to finish verifying." Inline log in, then retry', 'Inline form'],
+			['403', 'Log in', '"That username and password don\'t match. Check both and try again."', 'Alert'],
+			['403', 'Register', '"This site already has an owner. Log in instead."', 'ResultPanel'],
+			['403', 'Any back-office call', 'Unverified: goes to /register/pending', 'Redirect'],
+			['403', 'Verify', '"This verification link doesn\'t work." Offers Cancel registration and start over', 'ResultPanel'],
+			['403', 'Cancel registration', '"Your account is already verified." Goes to /home', 'Toast'],
+			['403', 'Reset confirm', '"This reset link has expired." Offers Request a new link', 'ResultPanel'],
+			['404', 'Editor load', '"This article doesn\'t exist." Offers All articles', 'ErrorView'],
+			['404', 'Row or editor action', '"That article no longer exists." The row is removed', 'Toast'],
+			['404', 'Unknown route', '"Page not found"', 'ErrorView'],
+			['429', 'Log in, reset request', '"Too many attempts. For your security, wait a moment before trying again." With a countdown*', 'Alert + disabled button'],
+			['500', 'Save', '"Save failed" + Retry. Changes are kept', 'SaveStatus'],
+			['500', 'Publish / unpublish', '"Couldn\'t publish" / "Couldn\'t unpublish" + Retry', 'Toast'],
+			['500', 'Delete', '"Couldn\'t delete the article, so it\'s still there. Try again in a moment."', 'Inline in dialog'],
+			['500', 'Upload', '"Upload failed. The server didn\'t accept the file. Your article hasn\'t changed."', 'ImageUploader'],
+			['network', 'Anywhere', '"Couldn\'t reach RenewCMS. Check your connection and try again." Offline: banner', 'Alert / toast / banner']
+		].map(([c, w, t, s]) => ({ c, w, t, s }))
+		const pending = [
+			{ a: 'GET /v1/auth/me → User | 401', d: 'The session check at boot. The HttpOnly cookie can\'t be read from JS. Until this exists, the guard can call GET /v1/article/ and infer: 401 means logged out, but verified and unverified users can\'t be told apart.' },
+			{ a: 'GET /v1/auth/registration → { open }', d: 'Shows "Create the owner account" on /login. Without it, the link is hidden and /register is reachable by URL only.' },
+			{ a: '429 + Retry-After on /login, /password-reset', d: 'Drives the countdown state. The UI falls back to 60 s if the header is missing.' },
+			{ a: 'Serving /static/uploadedImages/*', d: 'The editor and preview are designed as if images load. Until they do, img tags show a broken image.' },
+			{ a: 'Not supported (disabled or omitted)', d: '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 password while logged in, editing the profile or email, listing or deleting individual images, multiple users.' }
+		]
+		return { files, routes, components, matrix, errors, pending }
+	}
+}
+</script>
+</body>
+</html>

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

@@ -0,0 +1,407 @@
+<!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>
+<helmet>
+<link rel="icon" href="brand/favicon.svg">
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet">
+<style>body{margin:0;font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px;overflow:hidden}*{box-sizing:border-box}a{color:inherit;text-underline-offset:3px}a:hover{opacity:.8}[data-act]{cursor:pointer}.hs [data-act]{outline:2px dashed #c9a86a !important;outline-offset:-2px}</style>
+</helmet>
+<div ref="{{ rootRef }}" data-screen-label="Prototype" style="--ui-bg:#ffffff;--ui-bg-muted:#fafafa;--ui-bg-elevated:#f3f2f0;--ui-bg-accented:#e6e4e0;--ui-bg-inverted:#111111;--ui-text-dimmed:#999999;--ui-text-muted:#666666;--ui-text-toned:#444444;--ui-text:#222222;--ui-text-highlighted:#111111;--ui-text-inverted:#ffffff;--ui-border:#e6e4e0;--ui-border-muted:#f3f2f0;--ui-border-accented:#8a8783;--ui-primary:#111111;--ui-secondary:#635643;--ui-success:#315b33;--ui-info:#34536d;--ui-warning:#6c4700;--ui-error:#882c21;--rc-sand:#e8dfd1;--rc-success-soft:#eaefea;--rc-info-soft:#ebeef0;--rc-warning-soft:#f0ede6;--rc-error-soft:#f3eae9;--rc-overlay:rgb(10 10 10 / 0.4);--rc-shadow-pop:0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06);--rc-shadow-modal:0 16px 48px rgb(17 17 17 / 0.18);--rc-canvas:#ecebe8;height:100vh;display:flex;background:var(--rc-canvas);color:var(--ui-text)">
+
+<aside style="width:320px;flex-shrink:0;height:100vh;overflow-y:auto;background:var(--ui-bg);border-right:1px solid var(--ui-border);padding:24px;display:flex;flex-direction:column;gap:24px">
+<div style="display:flex;align-items:center;gap:10px"><svg width="28" height="28" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><div style="display:flex;flex-direction:column"><span style="font:600 16px/22px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">RenewCMS prototype</span><span style="color:var(--ui-text-muted)">Click through the real screens.</span></div></div>
+
+<div style="display:flex;flex-direction:column;gap:10px">
+<div style="display:flex;border:1px solid var(--ui-border-accented)"><sc-for list="{{ devices }}" as="d" hint-placeholder-count="2"><button onClick="{{ d.pick }}" aria-pressed="{{ d.on }}" style="all:unset;cursor:pointer;flex:1;height:32px;display:flex;align-items:center;justify-content:center;font-weight:500;background:{{ d.bg }};color:{{ d.fg }}" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px">{{ d.label }}</button></sc-for></div>
+<div style="display:flex;border:1px solid var(--ui-border-accented)"><sc-for list="{{ modes }}" as="m" hint-placeholder-count="3"><button onClick="{{ m.pick }}" aria-pressed="{{ m.on }}" style="all:unset;cursor:pointer;flex:1;height:32px;display:flex;align-items:center;justify-content:center;font-weight:500;background:{{ m.bg }};color:{{ m.fg }}" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px">{{ m.label }}</button></sc-for></div>
+<button onClick="{{ toggleHs }}" aria-pressed="{{ hs }}" style="all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--ui-text-toned)" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px"><span style="width:32px;height:18px;padding:2px;display:flex;justify-content:{{ hsJust }};background:{{ hsBg }}"><span style="width:14px;height:14px;background:var(--ui-bg)"></span></span>Show clickable areas</button>
+</div>
+
+<div style="display:flex;flex-direction:column;gap:8px">
+<sc-for list="{{ flows }}" as="f" hint-placeholder-count="5">
+<div style="border:1px solid {{ f.bd }};background:var(--ui-bg)">
+<button onClick="{{ f.pick }}" style="all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:12px 14px;width:100%;box-sizing:border-box" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:-2px"><span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">{{ f.name }}</span><span style="color:var(--ui-text-muted)">{{ f.desc }}</span></button>
+<sc-if value="{{ f.on }}">
+<div style="padding:0 14px 14px;display:flex;flex-direction:column;gap:6px">
+<sc-for list="{{ f.steps }}" as="s" hint-placeholder-count="4"><span style="display:flex;align-items:center;gap:8px;color:{{ s.fg }};font-weight:{{ s.fw }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ s.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ s.icon }}.svg') center / contain no-repeat"></span>{{ s.t }}</span></sc-for>
+<sc-if value="{{ hint }}"><span aria-live="polite" style="margin-top:6px;padding:8px 10px;background:var(--rc-sand);color:#111;font-size:12px;line-height:18px">{{ hint }}</span></sc-if>
+<div style="display:flex;flex-direction:column;gap:6px;margin-top:6px">
+<sc-for list="{{ tools }}" as="t" hint-placeholder-count="0"><button onClick="{{ t.run }}" style="all:unset;cursor:pointer;height:32px;padding:0 12px;display:flex;align-items:center;gap:8px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat"></span>{{ t.label }}</button></sc-for>
+<button onClick="{{ f.pick }}" style="all:unset;cursor:pointer;height:32px;padding:0 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;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>Restart this flow</button>
+</div>
+</div>
+</sc-if>
+</div>
+</sc-for>
+</div>
+<span style="color:var(--ui-text-muted);font-size:12px;line-height:18px">Typing is simulated: in the editor, click the text to make a change. Forms fill themselves when you submit. Network delays are faked.</span>
+</aside>
+
+<main ref="{{ stageRef }}" style="flex:1;min-width:0;height:100vh;overflow:auto;display:flex;align-items:center;justify-content:center;padding:24px">
+<div style="flex-shrink:0;width:{{ boxW }};height:{{ boxH }};box-shadow:0 8px 40px rgb(0 0 0 / 0.15);overflow:hidden">
+<div onClick="{{ onStage }}" class="{{ hsClass }}" style="width:{{ devW }};height:{{ devH }};zoom:{{ zoom }};position:relative;overflow:hidden;background:var(--ui-bg-muted)">
+<sc-if value="{{ isAuth }}"><div style="width:100%;height:100%;overflow:hidden;background:{{ authBg }};padding-top:{{ authTop }};display:flex;flex-direction:column;align-items:center"><dc-import name="AuthCard" s="{{ authS }}" mobile="{{ mobile }}" hint-size="400px,520px"></dc-import></div></sc-if>
+<sc-if value="{{ isApp }}"><dc-import name="AppFrame" s="{{ appS }}" mobile="{{ mobile }}" hint-size="100%,100%"></dc-import></sc-if>
+<sc-if value="{{ isEmail }}"><div style="width:100%;height:100%;display:flex;flex-direction:column;background:var(--ui-bg)"><div style="flex-shrink:0;padding:14px 20px;border-bottom:1px solid var(--ui-border);display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">{{ emailSubject }}</span><span style="color:var(--ui-text-muted)">From RenewCMS · to marta@renew.example</span></div><iframe title="Email" srcDoc="{{ emailHtml }}" style="flex:1;width:100%;border:0"></iframe></div></sc-if>
+<sc-if value="{{ mnav }}">
+<div data-act="mnav-close" style="position:absolute;inset:0;z-index:50;background:var(--rc-overlay)">
+<div style="position:absolute;left:0;top:0;bottom:0;width:280px;background:var(--ui-bg);padding:12px;display:flex;flex-direction:column;gap:2px">
+<div style="display:flex;align-items:center;gap:10px;height:48px;padding:0 6px;margin-bottom:8px"><svg width="26" height="26" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">RenewCMS</span></div>
+<sc-for list="{{ mnavItems }}" as="n" hint-placeholder-count="4"><div data-act="{{ n.act }}" style="height:44px;padding:0 12px;display:flex;align-items:center;gap:12px;font-size:15px;background:{{ n.bg }};color:{{ n.fg }}"><span aria-hidden="true" style="display:inline-block;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ n.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ n.icon }}.svg') center / contain no-repeat"></span>{{ n.t }}</div></sc-for>
+</div>
+</div>
+</sc-if>
+<sc-if value="{{ hasToasts }}">
+<div aria-live="polite" style="position:absolute;z-index:60;display:flex;flex-direction:column;gap:8px;left:{{ tL }};right:{{ tR }};bottom:{{ tB }};width:{{ tW }}">
+<sc-for list="{{ toasts }}" as="t" hint-placeholder-count="1">
+<div style="display:flex;gap:10px;padding:12px 14px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);font-size:{{ tF }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;margin-top:2px;width:16px;height:16px;background-color:{{ t.fg }};-webkit-mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat"></span><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;color:var(--ui-text-highlighted)">{{ t.title }}</span><span style="color:var(--ui-text-muted)">{{ t.text }}</span></div></div>
+</sc-for>
+</div>
+</sc-if>
+</div>
+</div>
+</main>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;system&quot;,&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'system' | 'light' | 'dark'&quot;}}">
+class Component extends DCLogic {
+	rootRef = React.createRef()
+	stageRef = React.createRef()
+	timers = []
+	light = { '--ui-bg': '#ffffff', '--ui-bg-muted': '#fafafa', '--ui-bg-elevated': '#f3f2f0', '--ui-bg-accented': '#e6e4e0', '--ui-bg-inverted': '#111111', '--ui-text-dimmed': '#999999', '--ui-text-muted': '#666666', '--ui-text-toned': '#444444', '--ui-text': '#222222', '--ui-text-highlighted': '#111111', '--ui-text-inverted': '#ffffff', '--ui-border': '#e6e4e0', '--ui-border-muted': '#f3f2f0', '--ui-border-accented': '#8a8783', '--ui-primary': '#111111', '--ui-secondary': '#635643', '--ui-success': '#315b33', '--ui-info': '#34536d', '--ui-warning': '#6c4700', '--ui-error': '#882c21', '--rc-sand': '#e8dfd1', '--rc-success-soft': '#eaefea', '--rc-info-soft': '#ebeef0', '--rc-warning-soft': '#f0ede6', '--rc-error-soft': '#f3eae9', '--rc-overlay': 'rgb(10 10 10 / 0.4)', '--rc-shadow-pop': '0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06)', '--rc-shadow-modal': '0 16px 48px rgb(17 17 17 / 0.18)', '--rc-canvas': '#ecebe8' }
+	dark = { '--ui-bg': '#111111', '--ui-bg-muted': '#0a0a0a', '--ui-bg-elevated': '#1a1a1a', '--ui-bg-accented': '#222222', '--ui-bg-inverted': '#fafafa', '--ui-text-dimmed': '#666666', '--ui-text-muted': '#999999', '--ui-text-toned': '#cfccc7', '--ui-text': '#e6e4e0', '--ui-text-highlighted': '#fafafa', '--ui-text-inverted': '#111111', '--ui-border': '#333333', '--ui-border-muted': '#222222', '--ui-border-accented': '#666666', '--ui-primary': '#fafafa', '--ui-secondary': '#d4c5b0', '--ui-success': '#a3caa3', '--ui-info': '#a5c2db', '--ui-warning': '#dfb67d', '--ui-error': '#fba394', '--rc-sand': '#d4c5b0', '--rc-success-soft': '#1f241f', '--rc-info-soft': '#202428', '--rc-warning-soft': '#2a251e', '--rc-error-soft': '#2c201f', '--rc-overlay': 'rgb(0 0 0 / 0.6)', '--rc-shadow-pop': '0 4px 16px rgb(0 0 0 / 0.5)', '--rc-shadow-modal': '0 16px 48px rgb(0 0 0 / 0.6)', '--rc-canvas': '#1c1c1c' }
+	base() {
+		return [
+			{ id: 1, t: 'How we price a bathroom renovation', on: true, c: '12 Mar 2026', u: '2 hours ago', imgs: 3 },
+			{ id: 2, t: 'Choosing lime plaster for old stone walls', on: false, c: '9 Sep 2026', u: 'Yesterday', imgs: 2 },
+			{ id: 3, t: 'Before and after: the Rue Verte kitchen', on: true, c: '28 Aug 2026', u: '3 days ago', imgs: 6 },
+			{ id: 4, t: 'Winter checklist for timber windows', on: false, c: '2 Sep 2026', u: '5 days ago', imgs: 3 },
+			{ id: 5, t: 'Why we reuse original floorboards', on: true, c: '14 Jun 2026', u: '18 Aug 2026', imgs: 1 },
+			{ id: 6, t: 'Our first passive-house retrofit', on: true, c: '3 Apr 2026', u: '2 Jul 2026', imgs: 0 }
+		]
+	}
+	flowDefs = [
+		{ key: 'first', name: 'First run', desc: 'Register, verify by email, write and publish.', steps: [['register', 'Create the owner account'], ['pending', 'Check your email'], ['verified', 'Verify from the email'], ['firstArticle', 'Write the first article'], ['published', 'Publish it']], hints: { register: 'Click "Create account".', pending: 'Use "Open the verification email" below.', verified: 'Click "Verify my account" in the email.', firstArticle: 'Click "New article", then "Create draft".', published: 'Click "Publish" in the editor header.' } },
+		{ key: 'edit', name: 'Edit an article', desc: 'Log in, upload an image, save, unpublish.', steps: [['login', 'Log in'], ['openArticle', 'Open an article'], ['upload', 'Upload an image'], ['saved', 'Save'], ['unpublished', 'Unpublish']], hints: { login: 'Click "Log in".', openArticle: 'Go to Articles and click an online article.', upload: 'Click the image button at the end of the toolbar, then the drop area.', saved: 'Click "Save".', unpublished: 'Click "Unpublish".' } },
+		{ key: 'reset', name: 'Forgot password', desc: 'Request a link, reset, log in.', steps: [['forgot', 'Ask for a reset link'], ['email', 'Open the email'], ['changed', 'Choose a new password'], ['login', 'Log in']], hints: { forgot: 'Click "Forgot password?", then "Send reset link".', email: 'Use "Open the reset email" below, then click its button.', changed: 'Click "Change password".', login: 'Click "Log in".' } },
+		{ key: 'delete', name: 'Delete an article', desc: 'From the row menu, with confirmation.', steps: [['menu', 'Open the row menu'], ['confirm', 'Confirm the delete'], ['deleted', 'Article deleted']], hints: { menu: 'Click the ••• button on any row. On mobile, tap ⋮.', confirm: 'Choose "Delete…", then "Delete article".', deleted: '' } },
+		{ key: 'expiry', name: 'Session expiry mid-edit', desc: 'Your unsaved work survives a new login.', steps: [['edited', 'Make a change'], ['expire', 'Session expires'], ['relogin', 'Log in again'], ['restored', 'Back in the editor, changes kept']], hints: { edited: 'Click the article text to make a change.', expire: 'Use "Simulate session expiry" below.', relogin: 'Click "Log in".', restored: '' } }
+	]
+	start(key) {
+		const articles = this.base()
+		const common = { flow: key, done: [], modal: null, menu: null, busy: null, toasts: [], auth: {}, mnav: false, expired: false, copied: false, email: null, ed: null, cur: null }
+		if (key === 'first') return { ...common, route: 'register', regOpen: true, articles: [] }
+		if (key === 'edit') return { ...common, route: 'login', regOpen: false, articles }
+		if (key === 'reset') return { ...common, route: 'login', regOpen: false, articles }
+		if (key === 'delete') return { ...common, route: 'articles', regOpen: false, articles }
+		return { ...common, route: 'editor', regOpen: false, articles, cur: 1, ed: { status: 'online', save: 'saved', image: false, preview: false } }
+	}
+	state = { device: 'desktop', mode: this.props.theme ?? 'light', hs: false, zoom: 1, emails: {}, ...this.start('first') }
+	later(fn, ms) { this.timers.push(setTimeout(fn, ms)) }
+	clearTimers() { this.timers.forEach(clearTimeout); this.timers = [] }
+	mark(...keys) { this.setState(s => ({ done: [...new Set([...s.done, ...keys])] })) }
+	toast(tone, icon, title, text) {
+		const id = Math.random()
+		this.setState(s => ({ toasts: [...s.toasts.filter(t => t.title !== title), { id, tone, icon, title, text }].slice(-3) }))
+		if (tone !== 'error') this.later(() => this.setState(s => ({ toasts: s.toasts.filter(t => t.id !== id) })), 5000)
+	}
+	resolved() {
+		if (this.state.mode === 'system') return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+		return this.state.mode
+	}
+	apply() {
+		const el = this.rootRef.current
+		if (!el) return
+		const vars = this.resolved() === 'dark' ? this.dark : this.light
+		for (const k in vars) el.style.setProperty(k, vars[k])
+	}
+	fit() {
+		const el = this.stageRef.current
+		if (!el) return
+		const w = el.clientWidth - 48, h = el.clientHeight - 48
+		const [dw, dh] = this.state.device === 'desktop' ? [1440, 900] : [390, 844]
+		const zoom = Math.max(0.3, Math.min(1, w / dw, h / dh))
+		if (Math.abs(zoom - this.state.zoom) > 0.005) this.setState({ zoom })
+	}
+	componentDidMount() {
+		this.apply()
+		this._dev = this.state.device
+		this.fit()
+		this.ro = new ResizeObserver(() => this.fit())
+		if (this.stageRef.current) this.ro.observe(this.stageRef.current)
+		this.onMsg = e => { if (e.data && e.data.rcEmail) this.emailClick() }
+		window.addEventListener('message', this.onMsg)
+		const load = (k, f) => fetch(f).then(r => r.text()).then(t => this.setState(s => ({ emails: { ...s.emails, [k]: t } })))
+		load('verify', 'emails/verification.html')
+		load('reset', 'emails/password-reset.html')
+	}
+	componentWillUnmount() { this.clearTimers(); this.ro && this.ro.disconnect(); window.removeEventListener('message', this.onMsg) }
+	componentDidUpdate(p) {
+		if (p && p.theme !== this.props.theme && this.props.theme) this.setState({ mode: this.props.theme })
+		this.apply()
+		if (this._dev !== this.state.device) { this._dev = this.state.device; this.fit() }
+	}
+	pickFlow(key) { this.clearTimers(); this.setState(this.start(key)) }
+	art(id) { return this.state.articles.find(a => a.id === id) }
+	patchArt(id, p) { this.setState(s => ({ articles: s.articles.map(a => a.id === id ? { ...a, ...p } : a) })) }
+	dirty() { const e = this.state.ed; return this.state.route === 'editor' && e && (e.save === 'dirty' || e.save === 'error') }
+	go(route, extra = {}) {
+		if (this.dirty() && route !== 'editor' && route !== 'login') { this.setState({ modal: { type: 'leave', target: route }, mnav: false }); return }
+		this.setState({ route, menu: null, mnav: false, modal: null, ...extra })
+	}
+	openEditor(id) {
+		const a = this.art(id)
+		if (!a) return
+		this.setState({ route: 'editor', cur: id, menu: null, ed: { status: a.on ? 'online' : 'draft', save: 'saved', image: false, preview: false, body: a.body } })
+		this.mark('openArticle')
+	}
+	emailClick() {
+		const s = this.state
+		if (s.route !== 'email') return
+		if (s.email === 'verify') {
+			this.setState({ route: 'verify' })
+			this.later(() => { this.setState({ route: 'home' }); this.mark('verified'); this.toast('success', 'circle-check', 'Your account is verified', 'Welcome to RenewCMS.') }, 1400)
+		} else {
+			this.setState({ route: 'reset', auth: {} })
+			this.mark('email')
+		}
+	}
+	act(a) {
+		const s = this.state
+		if (a === 'mnav-close') return this.setState({ mnav: false })
+		if (a.startsWith('nav-')) return this.go(a.slice(4))
+		if (a === 'logout') { this.clearTimers(); this.setState({ route: 'login', auth: {}, mnav: false, menu: null, modal: null }); return this.toast('info', 'info', 'You\'re logged out', 'Log in again to keep working.') }
+		if (s.modal) return this.modalAct(a)
+		const r = s.route
+		if (r === 'login') {
+			if (a === 'forgot') return this.setState({ route: 'forgot', auth: {} })
+			if (a === 'footer') return this.setState({ route: 'register', auth: {} })
+			if (a === 'submit' && !s.auth.submitting) {
+				this.setState({ auth: { ...s.auth, u: 'marta', p: 'limewash2026', submitting: true } })
+				this.later(() => {
+					this.mark('login')
+					if (this.state.expired) { this.setState({ route: 'editor', expired: false, auth: {} }); this.mark('relogin', 'restored'); this.toast('info', 'info', 'Unsaved changes restored', 'Your edits from before the session expired are back. Save to keep them.') }
+					else this.setState({ route: 'home', auth: {} })
+				}, 800)
+			}
+			return
+		}
+		if (r === 'register') {
+			if (a === 'footer') return this.setState({ route: 'login', auth: {} })
+			if (a === 'submit' && !s.auth.submitting) {
+				this.setState({ auth: { u: 'marta', e: 'marta@renew.example', p: 'limewash2026', submitting: true } })
+				this.later(() => { this.setState({ route: 'pending', auth: {} }); this.mark('register') }, 900)
+			}
+			return
+		}
+		if (r === 'pending') {
+			if (a === 'result-0') return this.setState({ route: 'login', auth: {} })
+			if (a === 'result-1') { this.setState({ route: 'register', auth: {} }); return this.toast('success', 'circle-check', 'Registration cancelled', 'You can create the owner account again.') }
+			return
+		}
+		if (r === 'forgot') {
+			if (a === 'below') return this.setState({ route: 'login', auth: {} })
+			if (a === 'submit' && !s.auth.submitting) {
+				this.setState({ auth: { e: 'marta@renew.example', submitting: true } })
+				this.later(() => { this.setState({ route: 'forgot-sent', auth: {} }); this.mark('forgot') }, 800)
+			}
+			return
+		}
+		if (r === 'forgot-sent') { if (a === 'result-0') this.setState({ route: 'login', auth: {} }); return }
+		if (r === 'reset') {
+			if (a === 'submit' && !s.auth.submitting) {
+				this.setState({ auth: { p: 'limewash2026', c: 'limewash2026', submitting: true } })
+				this.later(() => { this.setState({ route: 'login', auth: { changed: true } }); this.mark('changed') }, 900)
+			}
+			return
+		}
+		if (a === 'new' || a === 'empty' || (a === 'm-action' && r === 'home')) return this.setState({ modal: { type: 'new' }, menu: null })
+		if (a === 'm-lead' && r !== 'editor') return this.setState({ mnav: true })
+		if (a.startsWith('open-')) return this.openEditor(Number(a.slice(5)))
+		if (a.startsWith('menu-')) { const id = Number(a.slice(5)); this.setState({ menu: s.menu === id ? null : id }); return this.mark('menu') }
+		if (a.startsWith('del-')) return this.setState({ menu: null, modal: { type: 'delete', id: Number(a.slice(4)) } })
+		if (a.startsWith('pub-')) {
+			const id = Number(a.slice(4)), art = this.art(id)
+			this.setState({ menu: null, busy: id })
+			this.later(() => { this.patchArt(id, { on: !art.on, u: 'Just now' }); this.setState({ busy: null }); art.on ? this.toast('success', 'circle-check', 'Article unpublished', 'It\'s a draft again and hidden from your website.') : this.toast('success', 'circle-check', 'Article published', '"' + art.t + '" is now online.') }, 900)
+			return
+		}
+		if (a === 'copyurl') { this.setState({ menu: null }); return this.toast('success', 'check', 'API URL copied', 'Paste it wherever your site needs it.') }
+		if (a === 'copy') { this.setState({ copied: true }); return this.later(() => this.setState({ copied: false }), 2000) }
+		if (r === 'editor') return this.editorAct(a)
+		if (s.menu) this.setState({ menu: null })
+	}
+	editorAct(a) {
+		const s = this.state, e = s.ed, art = this.art(s.cur)
+		const setEd = p => this.setState(st => ({ ed: { ...st.ed, ...p } }))
+		if (a === 'type' && !e.preview && !e.pending) { setEd({ save: 'dirty' }); return this.mark('edited') }
+		if (a === 'preview') return setEd({ preview: !e.preview })
+		if (a === 'back' || a === 'm-lead') return this.go('articles')
+		if (a === 'overflow' || a === 'm-action') return this.setState({ modal: { type: 'delete', id: s.cur, fromEditor: true } })
+		if (a === 'tb-image-plus') return this.setState({ modal: { type: 'upload', state: 'idle' } })
+		if (a === 'save' && (e.save === 'dirty' || e.save === 'error')) {
+			setEd({ save: 'saving' })
+			this.later(() => { setEd({ save: 'saved' }); this.patchArt(s.cur, { u: 'Just now' }); this.mark('saved') }, 800)
+			return
+		}
+		if (a === 'publish' && !e.pending) {
+			const wasDirty = e.save === 'dirty' || e.save === 'error'
+			if (e.status === 'online') {
+				setEd({ pending: 'Unpublishing…' })
+				this.later(() => { setEd({ pending: null, status: 'draft' }); this.patchArt(s.cur, { on: false, u: 'Just now' }); this.mark('unpublished'); this.toast('success', 'circle-check', 'Article unpublished', 'It\'s a draft again and hidden from your website.') }, 900)
+			} else {
+				setEd({ pending: wasDirty ? 'Saving and publishing…' : 'Publishing…', save: wasDirty ? 'saving' : e.save })
+				this.later(() => { setEd({ pending: null, status: 'online', save: 'saved' }); this.patchArt(s.cur, { on: true, u: 'Just now' }); this.mark('published'); this.toast('success', 'circle-check', 'Article published', '"' + art.t + '" is now online.') }, 1100)
+			}
+		}
+	}
+	modalAct(a) {
+		const s = this.state, m = s.modal
+		const close = () => this.setState({ modal: null })
+		if (m.loading) return
+		if (m.type === 'new') {
+			if (a === 'modal-cancel' || a === 'modal-close') return close()
+			if (a === 'modal-confirm') {
+				this.setState({ modal: { ...m, loading: true } })
+				this.later(() => {
+					const id = Math.max(0, ...this.state.articles.map(x => x.id)) + 1
+					const art = { id, t: 'Choosing tiles for a small bathroom', on: false, c: '25 Sep 2026', u: 'Just now', imgs: 0, body: 'Small rooms show every grout line, so we start with the floor and work up.' }
+					this.setState(st => ({ articles: [art, ...st.articles], modal: null, route: 'editor', cur: id, ed: { status: 'draft', save: 'saved', image: false, preview: false, body: art.body } }))
+					this.mark('firstArticle')
+					this.toast('info', 'info', 'Draft created', 'It stays private until you publish it.')
+				}, 900)
+			}
+			return
+		}
+		if (m.type === 'delete') {
+			if (a === 'modal-cancel' || a === 'modal-close') return close()
+			if (a === 'modal-confirm') {
+				const art = this.art(m.id)
+				this.setState({ modal: { ...m, loading: true } })
+				this.mark('confirm')
+				this.later(() => {
+					this.setState(st => ({ articles: st.articles.filter(x => x.id !== m.id), modal: null, route: m.fromEditor ? 'articles' : st.route, ed: m.fromEditor ? null : st.ed }))
+					this.mark('deleted')
+					this.toast('success', 'circle-check', 'Article deleted', '"' + art.t + '" and its images are gone.')
+				}, 1000)
+			}
+			return
+		}
+		if (m.type === 'upload') {
+			if (a === 'modal-cancel' || a === 'modal-close') return close()
+			if ((a === 'upload-pick' || a === 'modal-confirm') && m.state !== 'uploading') {
+				this.setState({ modal: { ...m, state: 'uploading' } })
+				this.later(() => {
+					this.setState(st => ({ modal: null, ed: { ...st.ed, image: true, save: 'dirty' } }))
+					this.mark('upload')
+					this.toast('success', 'circle-check', 'Image added', 'Save to keep it in the article.')
+				}, 1500)
+			}
+			return
+		}
+		if (m.type === 'leave') {
+			if (a === 'modal-cancel') { this.setState(st => ({ modal: null, ed: { ...st.ed, save: 'saved' }, route: m.target, menu: null, mnav: false })); return }
+			if (a === 'modal-confirm' || a === 'modal-close') return close()
+		}
+	}
+	authS() {
+		const s = this.state, A = s.auth || {}, sub = !!A.submitting
+		const U = v => ({ label: 'Username', ph: 'Your username', value: v })
+		const P = (v, o = {}) => ({ label: 'Password', pw: true, value: v, ...o })
+		const E = (v, o = {}) => ({ label: 'Email', ph: 'you@example.com', value: v, ...o })
+		if (s.route === 'login') return { title: 'Log in', desc: 'Welcome back. Log in to manage your articles.', fields: [U(A.u), P(A.p, { link: 'Forgot password?' })], submit: { t: sub ? 'Logging in…' : 'Log in', loading: sub }, notice: s.expired ? { tone: 'info', icon: 'clock', title: 'Your session expired', text: 'Log in again to pick up where you left off. Unsaved changes are kept on this device.' } : A.changed ? { tone: 'success', icon: 'circle-check', title: 'Password changed', text: 'Log in with your new password.' } : null, footer: s.regOpen ? { pre: 'First time here?', link: 'Create the owner account' } : null, pending: s.regOpen }
+		if (s.route === 'register') return { title: 'Create the owner account', desc: 'This creates the single admin account for this site. Once it\'s verified, registration closes.', fields: [{ ...U(A.u), ph: 'e.g. marta', count: ((A.u || '').length) + ' / 20', help: 'Letters and numbers, 3 to 20 characters. You\'ll use it to log in.' }, E(A.e, { help: 'We\'ll send a verification link here.' }), P(A.p, { hints: [{ t: 'At least 8 characters', s: A.p ? 'met' : 'unmet' }] })], submit: { t: sub ? 'Creating account…' : 'Create account', loading: sub }, footer: { pre: 'Already set up?', link: 'Log in' } }
+		if (s.route === 'pending') return { result: { tone: 'success', icon: 'mail-check', title: 'Check your email', text: 'We sent a verification link to marta@renew.example. It expires in 2 hours.', note: 'Opened it on another device? That works too; you\'ll log in there first. Can\'t find it? Check your spam folder. If the link has expired, cancel your registration and start again.', actions: [{ t: 'Log out', secondary: true }, { t: 'Cancel registration', secondary: true }] } }
+		if (s.route === 'verify') return { spinner: 'Verifying your account…' }
+		if (s.route === 'forgot') return { title: 'Reset your password', desc: 'Enter the email for your account and we\'ll send you a link to choose a new password.', fields: [E(A.e)], submit: { t: sub ? 'Sending…' : 'Send reset link', loading: sub }, below: 'Back to log in' }
+		if (s.route === 'forgot-sent') return { result: { tone: 'success', icon: 'mail-check', title: 'Check your email', text: 'If an account exists for that email, a password reset link has been sent.', note: 'The link expires in 1 hour.', actions: [{ t: 'Back to log in', secondary: true }] } }
+		if (s.route === 'reset') return { title: 'Choose a new password', desc: 'Pick something you haven\'t used here before. You\'ll log in with it next.', fields: [E('marta@renew.example', { ro: true, help: 'From your reset link.' }), P(A.p, { label: 'New password', hints: [{ t: 'At least 8 characters', s: A.p ? 'met' : 'unmet' }] }), P(A.c, { label: 'Confirm new password', hints: [{ t: 'Passwords match', s: A.c ? 'met' : 'unmet' }] })], submit: { t: sub ? 'Changing password…' : 'Change password', loading: sub } }
+		return {}
+	}
+	appS() {
+		const s = this.state, arts = s.articles
+		const on = arts.filter(a => a.on).length
+		const counts = [arts.length, on, arts.length - on]
+		const T = (name, crumb) => ({ nav: name, crumbs: crumb })
+		if (s.route === 'home') return { kind: 'home', ...T('home', ['Home']), mTitle: 'Home', mAction: 'plus', home: arts.length ? { sub: 'Here\'s where things stand on your site.', stats: [{ n: String(counts[0]), l: 'articles' }, { n: String(counts[1]), l: 'online' }, { n: String(counts[2]), l: 'drafts' }], recent: arts.slice(0, 5).map(a => ({ ...a, draft: !a.on })) } : { sub: 'Welcome to RenewCMS.', empty: true }, modal: this.modalS() }
+		if (s.route === 'articles') return { kind: 'articles', ...T('articles', ['Articles']), mTitle: 'Articles', list: { counts, rows: arts.map(a => ({ ...a, menu: s.menu === a.id, busy: s.busy === a.id ? (a.on ? 'Unpublishing…' : 'Publishing…') : null })), empty: arts.length ? null : { icon: 'file-text', title: 'No articles yet', text: 'Write your first one. It stays a draft until you publish it.', action: 'New article', primary: true } }, modal: this.modalS() }
+		if (s.route === 'integration') return { kind: 'integration', ...T('integration', ['Integration']), mTitle: 'Integration', copied: s.copied }
+		if (s.route === 'editor') {
+			const a = this.art(s.cur) || {}, e = s.ed || {}
+			return { kind: 'editor', ...T('articles', ['Articles', a.t]), mTitle: 'Edit article', mLead: 'arrow-left', mAction: 'ellipsis', ed: { ...e, title: a.t, imgs: (a.imgs || 0) + (e.image ? 1 : 0) }, modal: this.modalS() }
+		}
+		return { kind: 'home', home: { sub: '' } }
+	}
+	modalS() {
+		const m = this.state.modal
+		if (!m) return null
+		if (m.type === 'new') return { title: 'New article', desc: 'It\'s saved as a draft. Titles can\'t be changed later, so check it now.', close: true, cancel: 'Cancel', confirm: m.loading ? 'Creating…' : 'Create draft', loading: m.loading, wide: true, fields: [{ label: 'Title', value: 'Choosing tiles for a small bathroom', count: '35 / 200', help: '3 to 200 characters.' }, { label: 'First paragraph', value: 'Small rooms show every grout line, so we start with the floor and work up.', area: true, help: 'You can format it and add images in the editor.' }] }
+		if (m.type === 'delete') {
+			const a = this.art(m.id) || { t: '', imgs: 0 }
+			const imgs = a.imgs === 0 ? '' : a.imgs === 1 ? ' and its image' : ' and its ' + a.imgs + ' images'
+			return { title: 'Delete this article?', desc: '"' + a.t + '"' + imgs + ' will be deleted. This can\'t be undone.', cancel: 'Cancel', confirm: m.loading ? 'Deleting…' : 'Delete article', tone: 'danger', loading: m.loading }
+		}
+		if (m.type === 'upload') return { title: 'Add an image', close: true, upload: { state: m.state }, cancel: m.state === 'uploading' ? 'Cancel upload' : 'Cancel' }
+		if (m.type === 'leave') { const a = this.art(this.state.cur) || {}; return { title: 'Leave without saving?', desc: 'Your changes to "' + a.t + '" haven\'t been saved.', cancel: 'Discard changes', confirm: 'Keep editing' } }
+		return null
+	}
+	emailHtml() {
+		const s = this.state, t = s.emails[s.email] || ''
+		if (!t) return ''
+		let h = t.split('{{.Host}}').join('https://cms.renew.example').split('{{.VerificationCode}}').join('7f3c9a2e4b1d').split('{{.Email}}').join('marta@renew.example')
+		if (this.resolved() === 'dark') h = h.replace('@media (prefers-color-scheme: dark)', '@media all')
+		const tag = 'scr' + 'ipt'
+		return h.replace('</body>', '<' + tag + '>document.addEventListener("click",function(e){var a=e.target.closest("a");if(a){e.preventDefault();parent.postMessage({rcEmail:true},"*")}})</' + tag + '></body>')
+	}
+	renderVals() {
+		const s = this.state
+		const mobile = s.device === 'mobile'
+		const authRoutes = ['login', 'register', 'pending', 'verify', 'forgot', 'forgot-sent', 'reset']
+		const isAuth = authRoutes.includes(s.route), isEmail = s.route === 'email', isApp = !isAuth && !isEmail
+		const def = this.flowDefs.find(f => f.key === s.flow)
+		const next = def.steps.find(([k]) => !s.done.includes(k))
+		const flows = this.flowDefs.map(f => {
+			const on = f.key === s.flow
+			return { name: f.name, desc: f.desc, on, bd: on ? 'var(--ui-primary)' : 'var(--ui-border)', pick: () => this.pickFlow(f.key), steps: f.steps.map(([k, t]) => { const d = s.done.includes(k), n = next && next[0] === k; return { t, icon: d ? 'circle-check' : n ? 'circle-dot' : 'circle', fg: d ? 'var(--ui-success)' : n ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)', fw: n ? 600 : 400 } }) }
+		})
+		const hint = next ? (def.hints[next[0]] || '') : 'Flow complete. Restart it, or pick another.'
+		const tools = []
+		if (s.route === 'pending') tools.push({ label: 'Open the verification email', icon: 'mail', run: () => { this.setState({ route: 'email', email: 'verify' }); this.mark('pending') } })
+		if (s.route === 'forgot-sent') tools.push({ label: 'Open the reset email', icon: 'mail', run: () => this.setState({ route: 'email', email: 'reset' }) })
+		if (s.route === 'editor' && s.flow === 'expiry') tools.push({ label: 'Simulate session expiry', icon: 'clock', run: () => { this.clearTimers(); this.setState({ route: 'login', expired: true, auth: {}, modal: null }); this.mark('expire') } })
+		const devs = [['desktop', 'Desktop'], ['mobile', 'Mobile']].map(([k, label]) => { const on = s.device === k; return { label, on, bg: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-bg)' : 'var(--ui-text-toned)', pick: () => this.setState({ device: k }) } })
+		const modes = [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']].map(([k, label]) => { const on = s.mode === k; return { label, on, bg: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-bg)' : 'var(--ui-text-toned)', pick: () => this.setState({ mode: k }) } })
+		const [dw, dh] = mobile ? [390, 844] : [1440, 900]
+		const navKey = s.route === 'editor' ? 'articles' : s.route
+		const mnavItems = [['nav-home', 'house', 'Home', 'home'], ['nav-articles', 'file-text', 'Articles', 'articles'], ['nav-integration', 'plug', 'Integration', 'integration'], ['logout', 'log-out', 'Log out', '']].map(([act, icon, t, k]) => ({ act, icon, t, bg: k && k === navKey ? 'var(--rc-sand)' : 'transparent', fg: k && k === navKey ? '#111111' : 'var(--ui-text-toned)' }))
+		const toasts = s.toasts.map(t => ({ ...t, fg: 'var(--ui-' + t.tone + ')' }))
+		return {
+			rootRef: this.rootRef, stageRef: this.stageRef,
+			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() : {},
+			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',
+			mnav: s.mnav && mobile, mnavItems,
+			hasToasts: toasts.length > 0, toasts,
+			tL: mobile ? '16px' : 'auto', tR: mobile ? '16px' : '24px', tB: mobile ? '16px' : '24px', tW: mobile ? 'auto' : '356px', tF: mobile ? '14px' : '13px',
+			onStage: e => {
+				const el = e.target.closest('[data-act]')
+				if (!el) { if (this.state.menu) this.setState({ menu: null }); return }
+				e.stopPropagation()
+				this.act(el.getAttribute('data-act'))
+			}
+		}
+	}
+}
+</script>
+</body>
+</html>

docs/design/source/RenewCMS Screens Auth.dc.html

@@ -0,0 +1,186 @@
+<!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>
+<helmet>
+<meta name="design_doc_mode" content="canvas">
+<link rel="icon" href="brand/favicon.svg">
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>body{margin:0;font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px}*{box-sizing:border-box}a{color:inherit;text-underline-offset:3px}a:hover{opacity:.8}code{font-family:'IBM Plex Mono',monospace;font-size:12px}</style>
+</helmet>
+<div ref="{{ rootRef }}" data-screen-label="Auth screens" style="--ui-bg:#ffffff;--ui-bg-muted:#fafafa;--ui-bg-elevated:#f3f2f0;--ui-bg-accented:#e6e4e0;--ui-bg-inverted:#111111;--ui-text-dimmed:#999999;--ui-text-muted:#666666;--ui-text-toned:#444444;--ui-text:#222222;--ui-text-highlighted:#111111;--ui-text-inverted:#ffffff;--ui-border:#e6e4e0;--ui-border-muted:#f3f2f0;--ui-border-accented:#8a8783;--ui-primary:#111111;--ui-secondary:#635643;--ui-success:#315b33;--ui-info:#34536d;--ui-warning:#6c4700;--ui-error:#882c21;--rc-sand:#e8dfd1;--rc-success-soft:#eaefea;--rc-info-soft:#ebeef0;--rc-warning-soft:#f0ede6;--rc-error-soft:#f3eae9;--rc-overlay:rgb(10 10 10 / 0.4);--rc-shadow-pop:0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06);--rc-shadow-modal:0 16px 48px rgb(17 17 17 / 0.18);--rc-canvas:#ecebe8;background:var(--rc-canvas);color:var(--ui-text);padding:64px;display:flex;flex-direction:column;gap:72px;width:max-content;min-width:100%">
+
+<div style="display:flex;align-items:flex-end;gap:32px;max-width:1400px">
+<div style="flex:1;display:flex;flex-direction:column;gap:10px">
+<h1 style="margin:0;font:600 36px/44px 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em;color:var(--ui-text-highlighted)">Screens: public and auth</h1>
+<p style="margin:0;max-width:880px;font-size:16px;line-height:26px;color:var(--ui-text-toned);text-wrap:pretty">Every state of the six public routes, at 1440 px (shown at 50%) and 390 px (shown at 75%). Use the switch on the right to see all of them in dark mode. Final copy is written into each state. The back-office screens and global states are on <a href="RenewCMS Screens Back-office.dc.html">the back-office board</a>, and the emails are on <a href="RenewCMS Emails.dc.html">the email board</a>.</p>
+</div>
+<div role="radiogroup" aria-label="Theme" style="display:flex;border:1px solid var(--ui-border-accented);background:var(--ui-bg)">
+<sc-for list="{{ modes }}" as="m" hint-placeholder-count="3">
+<button role="radio" aria-checked="{{ m.on }}" onClick="{{ m.pick }}" style="all:unset;cursor:pointer;height:36px;padding:0 14px;display:flex;align-items:center;font-weight:500;font-size:14px;background:{{ m.bg }};color:{{ m.fg }}" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px">{{ m.label }}</button>
+</sc-for>
+</div>
+</div>
+
+<sc-for list="{{ groups }}" as="g" hint-placeholder-count="6">
+<section data-screen-label="{{ g.label }}" style="display:flex;flex-direction:column;gap:28px">
+<div style="display:flex;flex-direction:column;gap:6px;max-width:1100px">
+<h2 style="margin:0;font:600 28px/36px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ g.title }}</h2>
+<div style="display:flex;gap:16px;flex-wrap:wrap;font:400 14px/22px 'IBM Plex Mono',monospace;color:var(--ui-text-toned)"><span>{{ g.route }}</span><span style="color:var(--ui-text-muted)">{{ g.api }}</span></div>
+<sc-if value="{{ g.note }}"><p style="margin:4px 0 0;font-size:15px;line-height:24px;color:var(--ui-text-toned);text-wrap:pretty">{{ g.note }}</p></sc-if>
+</div>
+<div style="display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start">
+<sc-for list="{{ g.states }}" as="st" hint-placeholder-count="4">
+<div style="display:flex;flex-direction:column;gap:12px">
+<div style="display:flex;flex-direction:column;gap:2px;max-width:1040px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ st.name }}</span><span style="font-size:13px;color:var(--ui-text-muted)">{{ st.trigger }}</span></div>
+<div style="display:flex;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;background:var(--ui-bg-muted);padding-top:108px;position:relative;display:flex;flex-direction:column;align-items:center">
+<dc-import name="AuthCard" s="{{ st }}" mobile="{{ false }}" hint-size="400px,520px"></dc-import>
+<sc-if value="{{ st.dialog }}">
+<div style="position:absolute;inset:0;background:var(--rc-overlay);display:flex;align-items:flex-start;justify-content:center;padding-top:220px">
+<div role="alertdialog" style="width:440px;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal)">
+<div style="padding:24px 24px 0;display:flex;flex-direction:column;gap:8px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ st.dialog.title }}</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">{{ st.dialog.text }}</span></div>
+<div style="padding:24px;display:flex;justify-content:flex-end;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">{{ st.dialog.cancel }}</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-error);color:var(--ui-bg);font-weight:500">{{ st.dialog.confirm }}</span></div>
+</div>
+</div>
+</sc-if>
+<sc-if value="{{ st.toast }}">
+<div style="position:absolute;right:24px;bottom:24px;width:356px;display:flex;gap:10px;padding:12px 14px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;margin-top:2px;width:16px;height:16px;background-color:{{ st.toast.fg }};-webkit-mask:url('https://api.iconify.design/lucide/{{ st.toast.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ st.toast.icon }}.svg') center / contain no-repeat"></span><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;color:var(--ui-text-highlighted)">{{ st.toast.title }}</span><span style="color:var(--ui-text-muted)">{{ st.toast.text }}</span></div></div>
+</sc-if>
+</div>
+</div>
+<div style="width:293px;height:633px;overflow:hidden;border:1px solid var(--ui-border);flex-shrink:0">
+<div style="width:390px;height:844px;zoom:0.75;background:var(--ui-bg);padding-top:40px;position:relative;display:flex;flex-direction:column">
+<dc-import name="AuthCard" s="{{ st }}" mobile="{{ true }}" hint-size="390px,600px"></dc-import>
+<sc-if value="{{ st.dialog }}">
+<div style="position:absolute;inset:0;background:var(--rc-overlay);display:flex;align-items:flex-end;padding:16px">
+<div role="alertdialog" style="width:100%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal)">
+<div style="padding:20px 20px 0;display:flex;flex-direction:column;gap:8px"><span style="font:600 17px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ st.dialog.title }}</span><span style="color:var(--ui-text-toned);font-size:15px;line-height:23px">{{ st.dialog.text }}</span></div>
+<div style="padding:20px;display:flex;flex-direction:column;gap:8px"><span style="height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-error);color:var(--ui-bg);font-weight:500;font-size:15px">{{ st.dialog.confirm }}</span><span style="height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500;font-size:15px">{{ st.dialog.cancel }}</span></div>
+</div>
+</div>
+</sc-if>
+<sc-if value="{{ st.toast }}">
+<div style="position:absolute;left:16px;right:16px;bottom:16px;display:flex;gap:10px;padding:12px 14px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);font-size:14px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;margin-top:3px;width:16px;height:16px;background-color:{{ st.toast.fg }};-webkit-mask:url('https://api.iconify.design/lucide/{{ st.toast.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ st.toast.icon }}.svg') center / contain no-repeat"></span><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;color:var(--ui-text-highlighted)">{{ st.toast.title }}</span><span style="color:var(--ui-text-muted)">{{ st.toast.text }}</span></div></div>
+</sc-if>
+</div>
+</div>
+</div>
+</div>
+</sc-for>
+</div>
+</section>
+</sc-for>
+
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;system&quot;,&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'system' | 'light' | 'dark'&quot;}}">
+class Component extends DCLogic {
+	state = { mode: this.props.theme ?? 'light' }
+	rootRef = React.createRef()
+	light = { '--ui-bg': '#ffffff', '--ui-bg-muted': '#fafafa', '--ui-bg-elevated': '#f3f2f0', '--ui-bg-accented': '#e6e4e0', '--ui-bg-inverted': '#111111', '--ui-text-dimmed': '#999999', '--ui-text-muted': '#666666', '--ui-text-toned': '#444444', '--ui-text': '#222222', '--ui-text-highlighted': '#111111', '--ui-text-inverted': '#ffffff', '--ui-border': '#e6e4e0', '--ui-border-muted': '#f3f2f0', '--ui-border-accented': '#8a8783', '--ui-primary': '#111111', '--ui-secondary': '#635643', '--ui-success': '#315b33', '--ui-info': '#34536d', '--ui-warning': '#6c4700', '--ui-error': '#882c21', '--rc-sand': '#e8dfd1', '--rc-success-soft': '#eaefea', '--rc-info-soft': '#ebeef0', '--rc-warning-soft': '#f0ede6', '--rc-error-soft': '#f3eae9', '--rc-overlay': 'rgb(10 10 10 / 0.4)', '--rc-shadow-pop': '0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06)', '--rc-shadow-modal': '0 16px 48px rgb(17 17 17 / 0.18)', '--rc-canvas': '#ecebe8' }
+	dark = { '--ui-bg': '#111111', '--ui-bg-muted': '#0a0a0a', '--ui-bg-elevated': '#1a1a1a', '--ui-bg-accented': '#222222', '--ui-bg-inverted': '#fafafa', '--ui-text-dimmed': '#666666', '--ui-text-muted': '#999999', '--ui-text-toned': '#cfccc7', '--ui-text': '#e6e4e0', '--ui-text-highlighted': '#fafafa', '--ui-text-inverted': '#111111', '--ui-border': '#333333', '--ui-border-muted': '#222222', '--ui-border-accented': '#666666', '--ui-primary': '#fafafa', '--ui-secondary': '#d4c5b0', '--ui-success': '#a3caa3', '--ui-info': '#a5c2db', '--ui-warning': '#dfb67d', '--ui-error': '#fba394', '--rc-sand': '#d4c5b0', '--rc-success-soft': '#1f241f', '--rc-info-soft': '#202428', '--rc-warning-soft': '#2a251e', '--rc-error-soft': '#2c201f', '--rc-overlay': 'rgb(0 0 0 / 0.6)', '--rc-shadow-pop': '0 4px 16px rgb(0 0 0 / 0.5)', '--rc-shadow-modal': '0 16px 48px rgb(0 0 0 / 0.6)', '--rc-canvas': '#1c1c1c' }
+	resolved() {
+		if (this.state.mode === 'system') return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+		return this.state.mode
+	}
+	apply() {
+		const el = this.rootRef.current
+		if (!el) return
+		const vars = this.resolved() === 'dark' ? this.dark : this.light
+		for (const k in vars) el.style.setProperty(k, vars[k])
+		document.body.style.background = vars['--rc-canvas']
+	}
+	componentDidMount() { this.apply() }
+	componentDidUpdate(p) {
+		if (p.theme !== this.props.theme && this.props.theme) this.setState({ mode: this.props.theme })
+		this.apply()
+	}
+	groups() {
+		const U = (o = {}) => ({ label: 'Username', ph: 'Your username', ...o })
+		const P = (o = {}) => ({ label: 'Password', pw: true, ...o })
+		const E = (o = {}) => ({ label: 'Email', ph: 'you@example.com', ...o })
+		const pwHint = s => [{ t: 'At least 8 characters', s }]
+		const toast = (tone, icon, title, text) => ({ fg: 'var(--ui-' + tone + ')', icon, title, text })
+		const login = { title: 'Log in', desc: 'Welcome back. Log in to manage your articles.', submit: { t: 'Log in' } }
+		const loginF = (u, p) => [U(u), P({ link: 'Forgot password?', ...p })]
+		const reg = { title: 'Create the owner account', desc: 'This creates the single admin account for this site. Once it\'s verified, registration closes.', submit: { t: 'Create account' }, footer: { pre: 'Already set up?', link: 'Log in' } }
+		const regF = (u, e, p) => [U({ ph: 'e.g. marta', count: ((u && u.value) || '').length + ' / 20', help: 'Letters and numbers, 3 to 20 characters. You\'ll use it to log in.', ...u }), E({ help: 'We\'ll send a verification link here.', ...e }), P({ hints: pwHint('unmet'), ...p })]
+		const pendingResult = email => ({ tone: 'success', icon: 'mail-check', title: 'Check your email', text: email ? 'We sent a verification link to ' + email + '. It expires in 2 hours.' : 'We sent a verification link to the email you registered with. It expires in 2 hours.', note: 'Opened it on another device? That works too; you\'ll log in there first. Can\'t find it? Check your spam folder. If the link has expired, cancel your registration and start again.', actions: [{ t: 'Log out', secondary: true }, { t: 'Cancel registration', secondary: true }] })
+		const cancelDialog = (loading) => ({ title: 'Cancel your registration?', text: 'Your account will be deleted. You can register again with the same or a different email.', confirm: loading ? 'Cancelling…' : 'Cancel registration', cancel: 'Keep my account' })
+		const reqBase = { title: 'Reset your password', desc: 'Enter the email for your account and we\'ll send you a link to choose a new password.', submit: { t: 'Send reset link' }, below: 'Back to log in' }
+		const rv = { title: 'Choose a new password', desc: 'Pick something you haven\'t used here before. You\'ll log in with it next.', submit: { t: 'Change password' } }
+		const rvF = (p, c, hints) => [E({ value: 'marta@renew.example', ro: true, help: 'From your reset link.' }), P({ label: 'New password', hints: [{ t: 'At least 8 characters', s: hints[0] }], ...p }), P({ label: 'Confirm new password', hints: [{ t: 'Passwords match', s: hints[1] }], ...c })]
+		const expired = { tone: 'error', icon: 'link-2-off', title: 'This reset link has expired', text: 'Reset links work once, for 1 hour. Request a new one and use it within the hour.', actions: [{ t: 'Request a new link' }, { t: 'Back to log in', secondary: true }] }
+		return [
+			{ label: 'Log in', title: 'Log in', route: '/login', api: 'GET /v1/auth/registration (pending) · POST /v1/auth/login', note: 'After logging in, you go back to the page you originally asked for (?redirect=), or to /home. An unverified account goes to /register/pending. "Create the owner account" appears only when registration is open.', states: [
+				{ ...login, name: 'Default', trigger: 'Registration is closed, which is the usual case.', fields: loginF({}, {}) },
+				{ ...login, name: 'Fresh install', trigger: 'GET /v1/auth/registration returns { open: true }.', fields: loginF({}, {}), footer: { pre: 'First time here?', link: 'Create the owner account' }, pending: true },
+				{ ...login, name: 'Validation errors', trigger: 'Submit with a short username and an empty password. Nothing is sent.', fields: loginF({ value: 'ma', err: 'Use at least 3 characters.' }, { err: 'Enter your password.' }) },
+				{ ...login, name: 'Submitting', trigger: 'The request is in flight. Fields and button are disabled.', fields: loginF({ value: 'marta' }, { value: 'limewash2026' }), submit: { t: 'Logging in…', loading: true } },
+				{ ...login, name: 'Wrong credentials (403)', trigger: 'The API doesn\'t say which field is wrong, so neither does the message. The password is cleared and gets focus.', notice: { tone: 'error', icon: 'circle-x', title: 'That username and password don\'t match', text: 'Check both and try again. Passwords are case-sensitive.' }, fields: loginF({ value: 'marta' }, { focus: true }) },
+				{ ...login, name: 'Too many attempts (429)', trigger: 'Retry-After is counted down. The button re-enables at zero.', notice: { tone: 'info', icon: 'timer', title: 'Too many attempts', text: 'For your security, wait a moment before trying again.' }, fields: loginF({ value: 'marta' }, { value: 'limewash' }), submit: { t: 'Try again in 0:42', disabled: true }, pending: true },
+				{ ...login, name: 'Session expired', trigger: 'Redirected from a 401 with ?redirect=/article/12/edit&reason=expired. Unsaved edits are kept in the browser.', notice: { tone: 'info', icon: 'clock', title: 'Your session expired', text: 'Log in again to pick up where you left off. Unsaved changes are kept on this device.' }, fields: loginF({ value: 'marta' }, { focus: true }) },
+				{ ...login, name: 'Password changed', trigger: 'Arrived from a successful reset with ?reason=password-changed.', notice: { tone: 'success', icon: 'circle-check', title: 'Password changed', text: 'Log in with your new password.' }, fields: loginF({}, {}) },
+				{ ...login, name: 'Server or network error', trigger: 'A 500 or no response. The fields keep their values.', notice: { tone: 'error', icon: 'circle-x', title: 'Couldn\'t reach RenewCMS', text: 'Check your connection and try again.' }, fields: loginF({ value: 'marta' }, { value: 'limewash2026' }) }
+			] },
+			{ label: 'Register', title: 'Create the owner account', route: '/register', api: 'POST /v1/auth/register', note: 'Seen once, on a fresh install. After registering, the new user is logged in but not yet verified, and goes to /register/pending.', states: [
+				{ ...reg, name: 'Default', trigger: 'Registration is open.', fields: regF({}, {}, {}) },
+				{ ...reg, name: 'Validation errors', trigger: 'Checked on blur and on submit, using the same rules as the API.', fields: regF({ value: 'ma', err: 'Use 3 to 20 characters.', countErr: true, help: '' }, { value: 'marta@renew', err: 'Enter a full email address, like name@example.com.', help: '' }, { value: 'lime', hints: pwHint('err') }) },
+				{ ...reg, name: 'Filled, valid', trigger: 'Every rule is met and the checklist item turns green.', fields: regF({ value: 'marta' }, { value: 'marta@renew.example' }, { value: 'limewash2026', shown: true, hints: pwHint('met') }) },
+				{ ...reg, name: 'Submitting', trigger: 'Fields and button are disabled.', fields: regF({ value: 'marta' }, { value: 'marta@renew.example' }, { value: 'limewash2026', hints: pwHint('met') }), submit: { t: 'Creating account…', loading: true } },
+				{ name: 'Registration closed (403)', trigger: 'Someone already verified an owner account. The form is replaced.', result: { tone: 'info', icon: 'user-x', title: 'This site already has an owner', text: 'Log in instead.', actions: [{ t: 'Go to log in' }] } },
+				{ ...reg, name: 'Server error', trigger: 'A 500 or no response. The values are kept.', notice: { tone: 'error', icon: 'circle-x', title: 'Couldn\'t create the account', text: 'Something went wrong on the server. Try again in a moment.' }, fields: regF({ value: 'marta' }, { value: 'marta@renew.example' }, { value: 'limewash2026', hints: pwHint('met') }) }
+			] },
+			{ label: 'Pending', title: 'Check your email', route: '/register/pending', api: 'DELETE /v1/auth/register · POST /v1/auth/logout', note: 'Any back-office route visited by an unverified account lands here. There\'s no way to resend the email because the API doesn\'t offer one, so the note explains the way out.', states: [
+				{ name: 'Default', trigger: 'Straight after registering, when the email is known from the form.', result: pendingResult('marta@renew.example') },
+				{ name: 'Email unknown', trigger: 'Arrived after logging in as an unverified user.', result: pendingResult(null) },
+				{ name: 'Confirm cancel', trigger: '"Cancel registration" opens the destructive ConfirmDialog.', result: pendingResult('marta@renew.example'), dialog: cancelDialog(false) },
+				{ name: 'Cancelling', trigger: 'DELETE in flight. The dialog can\'t be dismissed.', result: pendingResult('marta@renew.example'), dialog: cancelDialog(true) },
+				{ ...reg, name: 'Cancelled', trigger: '200 → /register, with a toast.', fields: regF({}, {}, {}), toast: toast('success', 'circle-check', 'Registration cancelled', 'You can create the owner account again.') },
+				{ name: 'Already verified (403)', trigger: 'Verified on another device. Goes to /home; shown here as the toast over the destination.', result: { tone: 'success', icon: 'shield-check', title: 'You\'re verified', text: 'Taking you to your dashboard…', actions: [] }, toast: toast('info', 'info', 'Your account is already verified', 'There\'s nothing to cancel.') }
+			] },
+			{ label: 'Verify', title: 'Verify account', route: '/register/validate?c=CODE', api: 'POST /v1/auth/verify', note: 'Opened from the verification email, and submits automatically on load. This is the only full-card spinner in the product.', states: [
+				{ name: 'Verifying', trigger: 'On load, with a code in the URL.', spinner: 'Verifying your account…' },
+				{ name: 'Success', trigger: '200 → /home after 800 ms, with a toast.', result: { tone: 'success', icon: 'shield-check', title: 'Your account is verified', text: 'Taking you to your dashboard…', actions: [] }, toast: toast('success', 'circle-check', 'Your account is verified', 'Welcome to RenewCMS.') },
+				{ name: 'Invalid or expired (403)', trigger: 'The code is wrong, used, or older than 2 hours.', result: { tone: 'error', icon: 'link-2-off', title: 'This verification link doesn\'t work', text: 'It may have expired (links last 2 hours) or already been used.', note: 'Cancel your registration and start over to get a new link.', actions: [{ t: 'Cancel registration and start over' }, { t: 'Log out', secondary: true }] } },
+				{ name: 'No session (401)', trigger: 'Opened in another browser or device. Log in inline, then verification retries automatically with the same code.', title: 'Log in to finish verifying', desc: 'You opened this link somewhere you\'re not logged in. Log in here and we\'ll verify your account right after.', fields: [U(), P()], submit: { t: 'Log in and verify' } },
+				{ name: 'No session, retrying', trigger: 'Logged in inline. Now verifying.', spinner: 'Verifying your account…' },
+				{ name: 'Missing code', trigger: 'The link has no ?c= parameter. No request is made.', result: { tone: 'error', icon: 'link-2-off', title: 'This link is incomplete', text: 'The verification code is missing. Open the link from your email again, or copy the full address into your browser.', actions: [{ t: 'Go to log in', secondary: true }] } }
+			] },
+			{ label: 'Forgot password', title: 'Forgot password', route: '/register/reset/request', api: 'POST /v1/auth/password-reset', note: 'The sent state reads the same whether or not the email exists, so the page doesn\'t reveal which emails have accounts.', states: [
+				{ ...reqBase, name: 'Default', trigger: 'From "Forgot password?" on log in.', fields: [E()] },
+				{ ...reqBase, name: 'Validation error', trigger: 'Invalid email on submit. Nothing is sent.', fields: [E({ value: 'marta@renew', err: 'Enter a full email address, like name@example.com.' })] },
+				{ ...reqBase, name: 'Submitting', trigger: 'Request in flight.', fields: [E({ value: 'marta@renew.example' })], submit: { t: 'Sending…', loading: true } },
+				{ name: 'Sent', trigger: 'Any 200, whether or not the account exists.', result: { tone: 'success', icon: 'mail-check', title: 'Check your email', text: 'If an account exists for that email, a password reset link has been sent.', note: 'The link expires in 1 hour.', actions: [{ t: 'Back to log in', secondary: true }] } },
+				{ ...reqBase, name: 'Too many attempts (429)', trigger: 'Rate limit with Retry-After.', notice: { tone: 'info', icon: 'timer', title: 'Too many requests', text: 'Wait a moment before asking for another link.' }, fields: [E({ value: 'marta@renew.example' })], submit: { t: 'Try again in 0:58', disabled: true }, pending: true },
+				{ ...reqBase, name: 'Server error', trigger: '500 or no response.', notice: { tone: 'error', icon: 'circle-x', title: 'Couldn\'t send the link', text: 'Check your connection and try again.' }, fields: [E({ value: 'marta@renew.example' })] }
+			] },
+			{ label: 'Reset password', title: 'Choose a new password', route: '/register/reset/validate?c=CODE&email=EMAIL', api: 'POST /v1/auth/password-reset/confirm', note: 'Opened from the reset email. The email comes from the URL and is read-only. The confirm field is checked only in the browser.', states: [
+				{ ...rv, name: 'Default', trigger: 'Both parameters are present.', fields: rvF({}, {}, ['unmet', 'unmet']) },
+				{ ...rv, name: 'Too short', trigger: 'On submit, with fewer than 8 characters.', fields: rvF({ value: 'lime', err: '' }, { value: 'lime' }, ['err', 'met']) },
+				{ ...rv, name: 'Mismatch', trigger: 'On blur of the confirm field, or on submit.', fields: rvF({ value: 'limewash2026' }, { value: 'limewash2025', err: 'The passwords don\'t match.' }, ['met', 'err']) },
+				{ ...rv, name: 'Submitting', trigger: 'Request in flight.', fields: rvF({ value: 'limewash2026' }, { value: 'limewash2026' }, ['met', 'met']), submit: { t: 'Changing password…', loading: true } },
+				{ ...login, name: 'Success', trigger: '200 → /login?reason=password-changed.', notice: { tone: 'success', icon: 'circle-check', title: 'Password changed', text: 'Log in with your new password.' }, fields: loginF({}, {}) },
+				{ name: 'Invalid or expired (403)', trigger: 'The code is wrong, used, or older than 1 hour.', result: expired },
+				{ name: 'Missing parameters', trigger: 'The link has no c or no email. No request is made.', result: { tone: 'error', icon: 'link-2-off', title: 'This link is incomplete', text: 'Part of the reset link is missing. Open it from your email again, or request a new one.', actions: [{ t: 'Request a new link' }] } }
+			] }
+		]
+	}
+	renderVals() {
+		const modes = [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']].map(([k, label]) => {
+			const on = this.state.mode === k
+			return { label, on, bg: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-bg)' : 'var(--ui-text-toned)', pick: () => this.setState({ mode: k }) }
+		})
+		return { rootRef: this.rootRef, modes, groups: this.groups() }
+	}
+}
+</script>
+</body>
+</html>

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

@@ -0,0 +1,173 @@
+<!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>
+<helmet>
+<meta name="design_doc_mode" content="canvas">
+<link rel="icon" href="brand/favicon.svg">
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet">
+<style>body{margin:0;font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px}*{box-sizing:border-box}a{color:inherit;text-underline-offset:3px}a:hover{opacity:.8}code{font-family:'IBM Plex Mono',monospace;font-size:12px}</style>
+</helmet>
+<div ref="{{ rootRef }}" data-screen-label="Back-office screens" style="--ui-bg:#ffffff;--ui-bg-muted:#fafafa;--ui-bg-elevated:#f3f2f0;--ui-bg-accented:#e6e4e0;--ui-bg-inverted:#111111;--ui-text-dimmed:#999999;--ui-text-muted:#666666;--ui-text-toned:#444444;--ui-text:#222222;--ui-text-highlighted:#111111;--ui-text-inverted:#ffffff;--ui-border:#e6e4e0;--ui-border-muted:#f3f2f0;--ui-border-accented:#8a8783;--ui-primary:#111111;--ui-secondary:#635643;--ui-success:#315b33;--ui-info:#34536d;--ui-warning:#6c4700;--ui-error:#882c21;--rc-sand:#e8dfd1;--rc-success-soft:#eaefea;--rc-info-soft:#ebeef0;--rc-warning-soft:#f0ede6;--rc-error-soft:#f3eae9;--rc-overlay:rgb(10 10 10 / 0.4);--rc-shadow-pop:0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06);--rc-shadow-modal:0 16px 48px rgb(17 17 17 / 0.18);--rc-canvas:#ecebe8;background:var(--rc-canvas);color:var(--ui-text);padding:64px;display:flex;flex-direction:column;gap:72px;width:max-content;min-width:100%">
+
+<div style="display:flex;align-items:flex-end;gap:32px;max-width:1400px">
+<div style="flex:1;display:flex;flex-direction:column;gap:10px">
+<h1 style="margin:0;font:600 36px/44px 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em;color:var(--ui-text-highlighted)">Screens: back-office and global</h1>
+<p style="margin:0;max-width:880px;font-size:16px;line-height:26px;color:var(--ui-text-toned);text-wrap:pretty">Every state of the verified-only routes, plus the global states, at 1440 px (shown at 50%) and 390 px (shown at 75%). The theme switch shows all of them in dark mode. Session expiry and unverified redirects end on screens from <a href="RenewCMS Screens Auth.dc.html">the auth board</a>.</p>
+</div>
+<div role="radiogroup" aria-label="Theme" style="display:flex;border:1px solid var(--ui-border-accented);background:var(--ui-bg)">
+<sc-for list="{{ modes }}" as="m" hint-placeholder-count="3">
+<button role="radio" aria-checked="{{ m.on }}" onClick="{{ m.pick }}" style="all:unset;cursor:pointer;height:36px;padding:0 14px;display:flex;align-items:center;font-weight:500;font-size:14px;background:{{ m.bg }};color:{{ m.fg }}" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px">{{ m.label }}</button>
+</sc-for>
+</div>
+</div>
+
+<sc-for list="{{ groups }}" as="g" hint-placeholder-count="7">
+<section data-screen-label="{{ g.label }}" style="display:flex;flex-direction:column;gap:28px">
+<div style="display:flex;flex-direction:column;gap:6px;max-width:1100px">
+<h2 style="margin:0;font:600 28px/36px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ g.title }}</h2>
+<div style="display:flex;gap:16px;flex-wrap:wrap;font:400 14px/22px 'IBM Plex Mono',monospace;color:var(--ui-text-toned)"><span>{{ g.route }}</span><span style="color:var(--ui-text-muted)">{{ g.api }}</span></div>
+<sc-if value="{{ g.note }}"><p style="margin:4px 0 0;font-size:15px;line-height:24px;color:var(--ui-text-toned);text-wrap:pretty">{{ g.note }}</p></sc-if>
+</div>
+<div style="display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start">
+<sc-for list="{{ g.states }}" as="st" hint-placeholder-count="4">
+<div style="display:flex;flex-direction:column;gap:12px">
+<div style="display:flex;flex-direction:column;gap:2px;max-width:1040px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ st.name }}</span><span style="font-size:13px;color:var(--ui-text-muted)">{{ st.trigger }}</span></div>
+<div style="display:flex;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: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>
+</div>
+</sc-for>
+</div>
+</section>
+</sc-for>
+
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;theme&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;system&quot;,&quot;light&quot;,&quot;dark&quot;],&quot;default&quot;:&quot;light&quot;,&quot;tsType&quot;:&quot;'system' | 'light' | 'dark'&quot;}}">
+class Component extends DCLogic {
+	state = { mode: this.props.theme ?? 'light' }
+	rootRef = React.createRef()
+	light = { '--ui-bg': '#ffffff', '--ui-bg-muted': '#fafafa', '--ui-bg-elevated': '#f3f2f0', '--ui-bg-accented': '#e6e4e0', '--ui-bg-inverted': '#111111', '--ui-text-dimmed': '#999999', '--ui-text-muted': '#666666', '--ui-text-toned': '#444444', '--ui-text': '#222222', '--ui-text-highlighted': '#111111', '--ui-text-inverted': '#ffffff', '--ui-border': '#e6e4e0', '--ui-border-muted': '#f3f2f0', '--ui-border-accented': '#8a8783', '--ui-primary': '#111111', '--ui-secondary': '#635643', '--ui-success': '#315b33', '--ui-info': '#34536d', '--ui-warning': '#6c4700', '--ui-error': '#882c21', '--rc-sand': '#e8dfd1', '--rc-success-soft': '#eaefea', '--rc-info-soft': '#ebeef0', '--rc-warning-soft': '#f0ede6', '--rc-error-soft': '#f3eae9', '--rc-overlay': 'rgb(10 10 10 / 0.4)', '--rc-shadow-pop': '0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06)', '--rc-shadow-modal': '0 16px 48px rgb(17 17 17 / 0.18)', '--rc-canvas': '#ecebe8' }
+	dark = { '--ui-bg': '#111111', '--ui-bg-muted': '#0a0a0a', '--ui-bg-elevated': '#1a1a1a', '--ui-bg-accented': '#222222', '--ui-bg-inverted': '#fafafa', '--ui-text-dimmed': '#666666', '--ui-text-muted': '#999999', '--ui-text-toned': '#cfccc7', '--ui-text': '#e6e4e0', '--ui-text-highlighted': '#fafafa', '--ui-text-inverted': '#111111', '--ui-border': '#333333', '--ui-border-muted': '#222222', '--ui-border-accented': '#666666', '--ui-primary': '#fafafa', '--ui-secondary': '#d4c5b0', '--ui-success': '#a3caa3', '--ui-info': '#a5c2db', '--ui-warning': '#dfb67d', '--ui-error': '#fba394', '--rc-sand': '#d4c5b0', '--rc-success-soft': '#1f241f', '--rc-info-soft': '#202428', '--rc-warning-soft': '#2a251e', '--rc-error-soft': '#2c201f', '--rc-overlay': 'rgb(0 0 0 / 0.6)', '--rc-shadow-pop': '0 4px 16px rgb(0 0 0 / 0.5)', '--rc-shadow-modal': '0 16px 48px rgb(0 0 0 / 0.6)', '--rc-canvas': '#1c1c1c' }
+	resolved() {
+		if (this.state.mode === 'system') return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+		return this.state.mode
+	}
+	apply() {
+		const el = this.rootRef.current
+		if (!el) return
+		const vars = this.resolved() === 'dark' ? this.dark : this.light
+		for (const k in vars) el.style.setProperty(k, vars[k])
+		document.body.style.background = vars['--rc-canvas']
+	}
+	componentDidMount() { this.apply() }
+	componentDidUpdate(p) {
+		if (p.theme !== this.props.theme && this.props.theme) this.setState({ mode: this.props.theme })
+		this.apply()
+	}
+	groups() {
+		const base = [
+			{ t: 'How we price a bathroom renovation', on: true, c: '12 Mar 2026', u: '2 hours ago' },
+			{ t: 'Choosing lime plaster for old stone walls', on: false, c: '9 Sep 2026', u: 'Yesterday' },
+			{ t: 'Before and after: the Rue Verte kitchen', on: true, c: '28 Aug 2026', u: '3 days ago' },
+			{ t: 'Winter checklist for timber windows', on: false, c: '2 Sep 2026', u: '5 days ago' },
+			{ t: 'Why we reuse original floorboards', on: true, c: '14 Jun 2026', u: '18 Aug 2026' },
+			{ t: 'Our first passive-house retrofit', on: true, c: '3 Apr 2026', u: '2 Jul 2026' }
+		]
+		const rows = (patch = {}) => base.map((r, i) => patch[i] ? { ...r, ...patch[i] } : r)
+		const T = (tone, icon, title, text, action) => ({ tone, icon, title, text, action })
+		const withM = (st, mo = {}) => ({ ...st, m: { ...st, ...mo } })
+		const home = { kind: 'home', nav: 'home', crumbs: ['Home'], mTitle: 'Home', mAction: 'plus' }
+		const stats = [{ n: '6', l: 'articles' }, { n: '4', l: 'online' }, { n: '2', l: 'drafts' }]
+		const recent = base.slice(0, 5).map(r => ({ ...r, draft: !r.on }))
+		const list = { kind: 'articles', nav: 'articles', crumbs: ['Articles'], mTitle: 'Articles' }
+		const L = (o = {}) => ({ ...list, ...o, list: { rows: rows(), ...(o.list || {}) } })
+		const nm = (o = {}) => ({ title: 'New article', desc: 'It\'s saved as a draft. Titles can\'t be changed later, so check it now.', close: true, cancel: 'Cancel', confirm: 'Create draft', wide: true, ...o, fields: o.fields || [{ label: 'Title', ph: 'e.g. Choosing tiles for a small bathroom', count: '0 / 200', help: '3 to 200 characters.', focus: true }, { label: 'First paragraph', ph: 'Start writing. You\'ll continue in the editor.', area: true, help: 'You can format it and add images in the editor.' }] })
+		const nf = (title, body, extra = {}) => [{ label: 'Title', value: title, count: [...title].length + ' / 200', ...(extra.t || {}) }, { label: 'First paragraph', value: body, area: true, ...(extra.b || {}) }]
+		const ed = { kind: 'editor', nav: 'articles', crumbs: ['Articles', 'How we price a bathroom renovation'], mTitle: 'Edit article', mLead: 'arrow-left', mAction: 'ellipsis' }
+		const E = (o = {}, extra = {}) => withM({ ...ed, ...extra, ed: { status: 'draft', save: 'saved', ...o } })
+		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 })
+		return [
+			{ 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 })
+			] },
+			{ label: 'Home', title: 'Home', route: '/home', api: 'GET /v1/article/', note: 'The counts come from the list, so there\'s no separate endpoint. The five most recently updated articles link to the editor.', states: [
+				withM({ ...home, name: 'Default', trigger: 'The articles loaded.', home: { sub: 'Here\'s where things stand on your site.', stats, recent } }),
+				withM({ ...home, name: 'Loading', trigger: 'The list request is in flight. Skeletons appear after 150 ms.', home: { sub: 'Here\'s where things stand on your site.', stats: stats.map(() => ({ skel: true })), recent: Array.from({ length: 5 }, () => ({ skel: true })) } }),
+				withM({ ...home, name: 'Empty, first run', trigger: 'Zero articles: a single call to action, and no stats.', home: { sub: 'Welcome to RenewCMS.', empty: true } }),
+				withM({ ...home, name: 'Error', trigger: 'A 500 or network failure on the list request.', home: { sub: 'Here\'s where things stand on your site.', error: true } })
+			] },
+			{ label: 'Articles', title: 'Articles', route: '/article', api: 'GET /v1/article/ · PATCH …/publish · PATCH …/unpublish · DELETE /v1/article/{id}', note: 'Rows update when the server responds, not optimistically. Search, tab and sort are stored in the query string.', states: [
+				withM({ ...L(), name: 'Default', trigger: 'The list loaded, sorted by last updated.' }),
+				withM({ ...L({ list: { rows: rows({ 3: { menu: true } }) } }), name: 'Row menu open', trigger: 'The ellipsis button, or Enter on the focused menu button.' }),
+				withM({ ...L({ list: { loading: true } }), name: 'Loading', trigger: 'The first load, or a retry.' }),
+				withM({ ...L({ list: { counts: [0, 0, 0], empty: { icon: 'file-text', title: 'No articles yet', text: 'Write your first one. It stays a draft until you publish it.', action: 'New article', primary: true } } }), name: 'Empty', trigger: 'The list is empty.' }),
+				withM({ ...L({ list: { q: 'tiles', empty: { icon: 'search', title: 'No articles match "tiles"', text: 'Check the spelling, or search for a shorter part of the title.', action: 'Clear search' } } }), name: 'No results', trigger: 'Search matched nothing. The tab counts still show the full list.' }),
+				withM({ ...L({ list: { tab: 2, counts: [4, 4, 0], empty: { icon: 'pencil-line', title: 'No drafts', text: 'Everything you\'ve written is online.', action: 'New article' } } }), name: 'No drafts', trigger: 'Drafts tab with nothing in it. The "Online" tab has an equivalent "Nothing is online yet" state.' }),
+				withM({ ...L({ list: { rows: rows({ 3: { busy: 'Publishing…' } }) } }), name: 'Action in progress', trigger: 'Publish chosen from the row menu. That row is disabled.' }),
+				withM({ ...L({ list: { rows: rows({ 3: { on: true, u: 'Just now' } }) }, toasts: [T('success', 'circle-check', 'Article published', '"Winter checklist for timber windows" is now online.')] }), name: 'Published', trigger: '200: the row updates in place and a toast confirms.' }),
+				withM({ ...L({ toasts: [T('error', 'circle-x', 'Couldn\'t unpublish', 'The server didn\'t respond. Nothing changed.', 'Retry')] }), name: 'Action failed', trigger: 'A 500 or network error. The row stays as it was, and the toast stays until retried or dismissed.' }),
+				withM({ ...L({ list: { counts: [5, 4, 1], rows: rows().filter((r, i) => i !== 1) }, toasts: [T('info', 'info', 'That article no longer exists', 'It was deleted somewhere else, so we removed it from the list.')] }), name: 'Row vanished (404)', trigger: 'Any row action gets a 404.' }),
+				withM({ ...L({ modal: del(false) }), name: 'Delete: confirm', trigger: 'Delete… from the row menu.' }),
+				withM({ ...L({ modal: del(true) }), name: 'Delete: in progress', trigger: 'DELETE in flight. The dialog can\'t be dismissed.' }),
+				withM({ ...L({ modal: del(false, 'Couldn\'t delete the article, so it\'s still there. Try again in a moment.') }), name: 'Delete: failed', trigger: '500, a partial failure where the article is kept. The error shows inside the dialog.' }),
+				withM({ ...L({ list: { counts: [5, 4, 1], rows: rows().filter((r, i) => i !== 3) }, toasts: [T('success', 'circle-check', 'Article deleted', '"Winter checklist for timber windows" and its images are gone.')] }), name: 'Deleted', trigger: '204: the row is removed and focus moves to the next row. This is also where a delete from the editor ends up.' })
+			] },
+			{ label: 'New article', title: 'New article', route: 'modal from anywhere · /article/new', api: 'POST /v1/article/', note: 'Recommendation: a modal. It needs two fields, and keeping the page underneath means cancelling costs nothing. /article/new opens the same modal over the article list, so it can be linked to and the back button closes it. A successful create always makes a draft and goes to the editor.', states: [
+				withM({ ...L({ modal: nm() }), name: 'Default', trigger: '"New article" from Home, Articles or the empty state.' }),
+				withM({ ...L({ modal: nm({ fields: nf('Ti', '', { t: { err: 'Use at least 3 characters.', countErr: true }, b: { err: 'Add a first paragraph. It can be a single sentence.' } }) }) }), name: 'Validation', trigger: 'On submit or blur. Nothing is sent.' }),
+				withM({ ...L({ modal: nm({ loading: true, confirm: 'Creating…', fields: nf('Choosing tiles for a small bathroom', 'Small rooms show every grout line, so we start with the floor.') }) }), name: 'Submitting', trigger: 'Request in flight. Fields are disabled and the dialog can\'t be dismissed.' }),
+				withM({ ...L({ modal: nm({ notice: 'Something in the form isn\'t valid. Check the highlighted fields.', fields: nf('Choosing tiles for a small bathroom', 'Small rooms show every grout line, so we start with the floor.', { t: { err: 'Check this title and try again.' } }) }) }), name: 'Title rejected (400)', trigger: 'A server 400 that got past the browser checks. The raw error isn\'t shown.' }),
+				withM({ ...L({ modal: nm({ notice: 'Couldn\'t create the article. Your text is still here. Try again in a moment.', fields: nf('Choosing tiles for a small bathroom', 'Small rooms show every grout line, so we start with the floor.') }) }), name: 'Error', trigger: '500 or network failure.' })
+			] },
+			{ label: 'Editor', title: 'Editor', route: '/article/:id/edit', api: 'GET /v1/article/{id} · PATCH /v1/article/{id} · PATCH …/publish|unpublish · POST …/image · DELETE', note: 'On mobile, Save and Publish sit in a sticky bottom bar and the details panel opens as a slideover. A session expiry mid-edit keeps the draft in sessionStorage and goes to /login?redirect=/article/12/edit. After logging in, the editor restores the draft and shows "Unsaved changes".', states: [
+				E({ loading: true }, { name: 'Loading', trigger: 'GET in flight. Skeletons for the title, content and details.' }),
+				E({}, { name: 'Saved', trigger: 'Just opened or just saved. Save is disabled.' }),
+				E({ save: 'dirty' }, { name: 'Unsaved changes', trigger: 'Any edit. Publish becomes "Save and publish". Leaving asks for confirmation.' }),
+				E({ save: 'saving' }, { name: 'Saving', trigger: 'Save, or Ctrl/⌘ S.' }),
+				E({ save: 'error' }, { name: 'Save failed', trigger: '500 or network failure. The changes are kept and Retry resends them.' }),
+				E({ save: 'dirty', len: 9240 }, { name: 'Near the limit', trigger: '90% of 10 000 HTML characters.' }),
+				E({ save: 'dirty', len: 10214 }, { name: 'Too long', trigger: 'Over 10 000. Save and Publish are disabled until it\'s shorter.' }),
+				E({ preview: true }, { name: 'Preview', trigger: 'The Preview switch. Shows the title and body in the content scale, the way a public site might.' }),
+				E({ save: 'dirty' }, { name: 'Upload: choose', trigger: 'The image button in the toolbar, or a file dropped on the editor.', modal: { title: 'Add an image', close: true, upload: { state: 'idle' }, cancel: 'Cancel' } }),
+				E({ save: 'dirty' }, { name: 'Upload: in progress', trigger: 'A valid file is uploading. Closing the dialog cancels the upload.', modal: { title: 'Add an image', close: true, upload: { state: 'uploading' }, cancel: 'Cancel upload' } }),
+				E({ save: 'dirty' }, { name: 'Upload: rejected', trigger: 'Checked in the browser, so nothing is sent.', modal: { title: 'Add an image', close: true, upload: { state: 'rejected' }, cancel: 'Cancel', confirm: 'Choose another file' } }),
+				E({ save: 'dirty', image: true }, { name: 'Upload: inserted', trigger: '201: the image goes in at the cursor, and the article now has unsaved changes.', toasts: [T('success', 'circle-check', 'Image added', 'Save to keep it in the article.')] }),
+				E({ save: 'saving', pending: 'Saving and publishing…' }, { name: 'Publishing', trigger: '"Save and publish": the PATCH body, then the publish request.' }),
+				E({ status: 'online' }, { name: 'Published', trigger: '200: the badge flips, Unpublish is offered and a toast confirms.', toasts: [T('success', 'circle-check', 'Article published', '"How we price a bathroom renovation" is now online.')] }),
+				E({ status: 'online', pending: 'Unpublishing…' }, { name: 'Unpublishing', trigger: 'Unpublish doesn\'t save pending edits.' }),
+				E({}, { name: 'Delete: confirm', trigger: 'Delete… from the overflow menu. After a 204, it goes to /article with the "Article deleted" toast.', modal: { title: 'Delete this article?', desc: '"How we price a bathroom renovation" and its 3 images will be deleted. This can\'t be undone.', cancel: 'Cancel', confirm: 'Delete article', tone: 'danger' } }),
+				E({ save: 'dirty' }, { name: 'Leave with unsaved changes', trigger: 'Back, a nav link or closing the tab.', modal: { title: 'Leave without saving?', desc: 'Your changes to "How we price a bathroom renovation" haven\'t been saved.', cancel: 'Discard changes', confirm: 'Keep editing' } }),
+				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: '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: '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' } }),
+				withM({ kind: 'error', nav: 'home', crumbs: ['Home'], mTitle: 'Home', name: 'Generic error', trigger: 'An unexpected error while rendering a route.', err: { code: 'Error', title: 'Something went wrong', text: 'This page couldn\'t load. Your saved work is safe. Try again, and if it keeps happening, restart the RenewCMS server.', primary: 'Try again', secondary: 'Go to Home' } }),
+				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.' })
+			] }
+		]
+	}
+	renderVals() {
+		const modes = [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']].map(([k, label]) => {
+			const on = this.state.mode === k
+			return { label, on, bg: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-bg)' : 'var(--ui-text-toned)', pick: () => this.setState({ mode: k }) }
+		})
+		return { rootRef: this.rootRef, modes, groups: this.groups() }
+	}
+}
+</script>
+</body>
+</html>

docs/design/source/brand/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" shape-rendering="crispEdges" xmlns:c2pa="http://c2pa.org/manifest"><metadata><c2pa:manifest>AAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYTplOTQ3NWYzYi1iMzk1LTQwYTItYTc0NC02OTBiNWNhN2ExYmEAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaBZb8xjia8MHL36GYqgFh9IAAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDphMzk4M2EzMy03MTA2LTQwODctYjI1Yy05ZDBjMDgyNTBhNWNscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNoZLnQVKFQmfShOH339JG7cQAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggm30c/9ae4hGpd7ZqF9l6g7kujDirGaXyTi536jB+bcekZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaLY9Kv67+CqoKTGwY2CZrToAAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCB5yyMJKOtdrWszMUivonxA1KFo3L7r2RCA4Mx1H0/3uWRuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBiYZmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOmU5NDc1ZjNiLWIzOTUtNDBhMi1hNzQ0LTY5MGI1Y2E3YTFiYS9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOjViZTQwMjZjLWM3ZjctNDUzNC1hYmFiLTY3OTc0OWZjNGFkY3JjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCCbfRz/1p7iEal3tmoX2XqDuS6MOKsZpfJOLnfqMH5tx6JjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFggM1R3FsRboXyA4rm7pAVOcC/HIi2cgqmrpa/mZrSD7n6iY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFggoD1kSgBM7/QspOsFvy5FPeDatbpPPR1Z+79+Ox5QvZZ0Y2xhaW1fZ2VuZXJhdG9yX2luZm+jZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g/oGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd/3cyjxFA3Qo5S46fX0/ihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB/wQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB/wQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj+OPEz5o+nMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn/aArXyTwFAZfKrPzxF2vPoJNf1+UCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9+1rdDwSPLMOPOjKuiXjoU/pUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALine truncated

docs/design/source/emails/password-reset.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="color-scheme" content="light dark">
+	<meta name="supported-color-schemes" content="light dark">
+	<title>Reset your password</title>
+	<style>
+		body { margin: 0; padding: 0; width: 100%; -webkit-text-size-adjust: 100%; }
+		table { border-collapse: collapse; }
+		a { color: #111111; }
+		@media (max-width: 620px) {
+			.rc-card { padding: 28px 20px !important; }
+			.rc-btn a { display: block !important; }
+		}
+		@media (prefers-color-scheme: dark) {
+			.rc-bg { background-color: #0a0a0a !important; }
+			.rc-card { background-color: #111111 !important; border-color: #333333 !important; }
+			.rc-h1, .rc-word { color: #fafafa !important; }
+			.rc-text { color: #e6e4e0 !important; }
+			.rc-muted { color: #999999 !important; }
+			.rc-mark { border: 1px solid #444444 !important; }
+			.rc-btn td { background-color: #fafafa !important; }
+			.rc-btn a { background-color: #fafafa !important; color: #111111 !important; border-color: #fafafa !important; }
+			.rc-url { color: #e6e4e0 !important; background-color: #1a1a1a !important; }
+			.rc-rule { border-color: #333333 !important; }
+		}
+	</style>
+</head>
+<body class="rc-bg" style="margin:0;padding:0;background-color:#fafafa;">
+	<div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;">Choose a new password for RenewCMS. The link expires in 1 hour.</div>
+	<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="rc-bg" style="background-color:#fafafa;">
+		<tr>
+			<td align="center" style="padding:40px 12px;">
+				<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;">
+					<tr>
+						<td style="padding:0 0 20px 0;">
+							<table role="presentation" cellpadding="0" cellspacing="0" border="0">
+								<tr>
+									<td class="rc-mark" width="32" height="32" align="center" valign="middle" bgcolor="#111111" style="width:32px;height:32px;background-color:#111111;color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:19px;font-weight:bold;line-height:32px;">R</td>
+									<td class="rc-word" style="padding-left:10px;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;font-size:17px;font-weight:600;color:#111111;">RenewCMS</td>
+								</tr>
+							</table>
+						</td>
+					</tr>
+					<tr>
+						<td class="rc-card" style="background-color:#ffffff;border:1px solid #e6e4e0;padding:40px;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;">
+							<h1 class="rc-h1" style="margin:0 0 16px 0;font-size:24px;line-height:32px;font-weight:600;color:#111111;">Reset your password</h1>
+							<p class="rc-text" style="margin:0 0 28px 0;font-size:16px;line-height:26px;color:#222222;">Someone asked to reset the password for the RenewCMS account that uses {{.Email}} at {{.Host}}.</p>
+							<table role="presentation" cellpadding="0" cellspacing="0" border="0" class="rc-btn">
+								<tr>
+									<td bgcolor="#111111" style="background-color:#111111;">
+										<a href="{{.Host}}/register/reset/validate?c={{.VerificationCode}}&amp;email={{.Email}}" target="_blank" style="display:inline-block;padding:14px 24px;border:1px solid #111111;background-color:#111111;color:#ffffff;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;font-size:16px;font-weight:600;line-height:20px;text-decoration:none;text-align:center;">Choose a new password</a>
+									</td>
+								</tr>
+							</table>
+							<p class="rc-muted" style="margin:16px 0 0 0;font-size:14px;line-height:22px;color:#666666;">This link expires in 1 hour and works once.</p>
+							<p class="rc-muted" style="margin:28px 0 8px 0;font-size:14px;line-height:22px;color:#666666;">If the button doesn't work, copy this address into your browser:</p>
+							<p class="rc-url" style="margin:0;padding:10px 12px;background-color:#f3f2f0;font-family:'IBM Plex Mono',Menlo,Consolas,monospace;font-size:13px;line-height:20px;color:#222222;word-break:break-all;">{{.Host}}/register/reset/validate?c={{.VerificationCode}}&amp;email={{.Email}}</p>
+							<p class="rc-text rc-rule" style="margin:28px 0 0 0;padding-top:20px;border-top:1px solid #e6e4e0;font-size:14px;line-height:22px;color:#222222;">If this wasn't you, ignore this email; nothing will change.</p>
+						</td>
+					</tr>
+					<tr>
+						<td class="rc-muted" style="padding:20px 0 0 0;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;font-size:12px;line-height:18px;color:#666666;">RenewCMS · {{.Host}}</td>
+					</tr>
+				</table>
+			</td>
+		</tr>
+	</table>
+</body>
+</html>

docs/design/source/emails/verification.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="color-scheme" content="light dark">
+	<meta name="supported-color-schemes" content="light dark">
+	<title>Verify your account</title>
+	<style>
+		body { margin: 0; padding: 0; width: 100%; -webkit-text-size-adjust: 100%; }
+		table { border-collapse: collapse; }
+		a { color: #111111; }
+		@media (max-width: 620px) {
+			.rc-card { padding: 28px 20px !important; }
+			.rc-btn a { display: block !important; }
+		}
+		@media (prefers-color-scheme: dark) {
+			.rc-bg { background-color: #0a0a0a !important; }
+			.rc-card { background-color: #111111 !important; border-color: #333333 !important; }
+			.rc-h1, .rc-word { color: #fafafa !important; }
+			.rc-text { color: #e6e4e0 !important; }
+			.rc-muted { color: #999999 !important; }
+			.rc-mark { border: 1px solid #444444 !important; }
+			.rc-btn td { background-color: #fafafa !important; }
+			.rc-btn a { background-color: #fafafa !important; color: #111111 !important; border-color: #fafafa !important; }
+			.rc-url { color: #e6e4e0 !important; background-color: #1a1a1a !important; }
+			.rc-rule { border-color: #333333 !important; }
+		}
+	</style>
+</head>
+<body class="rc-bg" style="margin:0;padding:0;background-color:#fafafa;">
+	<div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;">Confirm your email to finish setting up RenewCMS. The link expires in 2 hours.</div>
+	<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="rc-bg" style="background-color:#fafafa;">
+		<tr>
+			<td align="center" style="padding:40px 12px;">
+				<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;">
+					<tr>
+						<td style="padding:0 0 20px 0;">
+							<table role="presentation" cellpadding="0" cellspacing="0" border="0">
+								<tr>
+									<td class="rc-mark" width="32" height="32" align="center" valign="middle" bgcolor="#111111" style="width:32px;height:32px;background-color:#111111;color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:19px;font-weight:bold;line-height:32px;">R</td>
+									<td class="rc-word" style="padding-left:10px;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;font-size:17px;font-weight:600;color:#111111;">RenewCMS</td>
+								</tr>
+							</table>
+						</td>
+					</tr>
+					<tr>
+						<td class="rc-card" style="background-color:#ffffff;border:1px solid #e6e4e0;padding:40px;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;">
+							<h1 class="rc-h1" style="margin:0 0 16px 0;font-size:24px;line-height:32px;font-weight:600;color:#111111;">Verify your account</h1>
+							<p class="rc-text" style="margin:0 0 28px 0;font-size:16px;line-height:26px;color:#222222;">Someone, hopefully you, created the owner account for RenewCMS at {{.Host}}. Verify this email address to finish setting it up.</p>
+							<table role="presentation" cellpadding="0" cellspacing="0" border="0" class="rc-btn">
+								<tr>
+									<td bgcolor="#111111" style="background-color:#111111;">
+										<a href="{{.Host}}/register/validate?c={{.VerificationCode}}" target="_blank" style="display:inline-block;padding:14px 24px;border:1px solid #111111;background-color:#111111;color:#ffffff;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;font-size:16px;font-weight:600;line-height:20px;text-decoration:none;text-align:center;">Verify my account</a>
+									</td>
+								</tr>
+							</table>
+							<p class="rc-muted" style="margin:16px 0 0 0;font-size:14px;line-height:22px;color:#666666;">This link expires in 2 hours.</p>
+							<p class="rc-muted" style="margin:28px 0 8px 0;font-size:14px;line-height:22px;color:#666666;">If the button doesn't work, copy this address into your browser:</p>
+							<p class="rc-url" style="margin:0;padding:10px 12px;background-color:#f3f2f0;font-family:'IBM Plex Mono',Menlo,Consolas,monospace;font-size:13px;line-height:20px;color:#222222;word-break:break-all;">{{.Host}}/register/validate?c={{.VerificationCode}}</p>
+							<p class="rc-text rc-rule" style="margin:28px 0 0 0;padding-top:20px;border-top:1px solid #e6e4e0;font-size:14px;line-height:22px;color:#222222;">If this wasn't you, ignore this email; nothing will change.</p>
+						</td>
+					</tr>
+					<tr>
+						<td class="rc-muted" style="padding:20px 0 0 0;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;font-size:12px;line-height:18px;color:#666666;">RenewCMS · {{.Host}}</td>
+					</tr>
+				</table>
+			</td>
+		</tr>
+	</table>
+</body>
+</html>

docs/design/source/tokens/renewcms.css

@@ -0,0 +1,334 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');
+@import 'tailwindcss';
+@import '@nuxt/ui';
+
+@theme static {
+	--font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
+	--font-serif: 'Source Serif 4', ui-serif, Georgia, serif;
+	--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
+
+	--color-ink-50: #fafafa;
+	--color-ink-100: #f2f2f2;
+	--color-ink-200: #e5e5e5;
+	--color-ink-300: #cccccc;
+	--color-ink-400: #999999;
+	--color-ink-500: #666666;
+	--color-ink-600: #444444;
+	--color-ink-700: #333333;
+	--color-ink-800: #222222;
+	--color-ink-900: #111111;
+	--color-ink-950: #0a0a0a;
+
+	--color-chalk-50: #fafafa;
+	--color-chalk-100: #f3f2f0;
+	--color-chalk-200: #e6e4e0;
+	--color-chalk-300: #cfccc7;
+	--color-chalk-400: #999999;
+	--color-chalk-450: #8a8783;
+	--color-chalk-500: #666666;
+	--color-chalk-600: #444444;
+	--color-chalk-700: #333333;
+	--color-chalk-800: #222222;
+	--color-chalk-850: #1a1a1a;
+	--color-chalk-900: #111111;
+	--color-chalk-950: #0a0a0a;
+
+	--color-sand-50: #f7f4ef;
+	--color-sand-100: #f0eae1;
+	--color-sand-200: #e8dfd1;
+	--color-sand-300: #d4c5b0;
+	--color-sand-400: #bba88e;
+	--color-sand-500: #9c8a70;
+	--color-sand-600: #7d6d56;
+	--color-sand-700: #635643;
+	--color-sand-800: #4a4033;
+	--color-sand-900: #322b23;
+	--color-sand-950: #211c17;
+
+	--color-moss-50: #f0faf0;
+	--color-moss-100: #e1f3e1;
+	--color-moss-200: #c7e2c7;
+	--color-moss-300: #a3caa3;
+	--color-moss-400: #7fac7f;
+	--color-moss-500: #5f8e60;
+	--color-moss-600: #457347;
+	--color-moss-700: #315b33;
+	--color-moss-800: #1f4422;
+	--color-moss-900: #143015;
+	--color-moss-950: #081e0a;
+
+	--color-slate-50: #f0f8ff;
+	--color-slate-100: #e2effa;
+	--color-slate-200: #c8dcee;
+	--color-slate-300: #a5c2db;
+	--color-slate-400: #81a3c0;
+	--color-slate-500: #6284a2;
+	--color-slate-600: #486a86;
+	--color-slate-700: #34536d;
+	--color-slate-800: #223d53;
+	--color-slate-900: #162b3c;
+	--color-slate-950: #0a1a26;
+
+	--color-ochre-50: #fff5e8;
+	--color-ochre-100: #fdead1;
+	--color-ochre-200: #f1d4ad;
+	--color-ochre-300: #dfb67d;
+	--color-ochre-400: #c4954f;
+	--color-ochre-500: #a67628;
+	--color-ochre-600: #8a5b00;
+	--color-ochre-700: #6c4700;
+	--color-ochre-800: #503400;
+	--color-ochre-900: #3a2400;
+	--color-ochre-950: #241500;
+
+	--color-brick-50: #fef4f2;
+	--color-brick-100: #ffe7e2;
+	--color-brick-200: #ffcbc2;
+	--color-brick-300: #fba394;
+	--color-brick-400: #e37e6e;
+	--color-brick-500: #c45d4e;
+	--color-brick-600: #a54134;
+	--color-brick-700: #882c21;
+	--color-brick-800: #6a1a11;
+	--color-brick-900: #4d0f08;
+	--color-brick-950: #330503;
+
+	--text-xs: 0.75rem;
+	--text-xs--line-height: 16px;
+	--text-sm: 0.8125rem;
+	--text-sm--line-height: 20px;
+	--text-base: 0.875rem;
+	--text-base--line-height: 22px;
+	--text-lg: 1rem;
+	--text-lg--line-height: 24px;
+	--text-xl: 1.25rem;
+	--text-xl--line-height: 28px;
+	--text-2xl: 1.75rem;
+	--text-2xl--line-height: 36px;
+
+	--breakpoint-xs: 22.5rem;
+	--breakpoint-sm: 40rem;
+	--breakpoint-md: 48rem;
+	--breakpoint-lg: 64rem;
+	--breakpoint-xl: 80rem;
+
+	--shadow-popover: 0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06);
+	--shadow-modal: 0 16px 48px rgb(17 17 17 / 0.18);
+
+	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
+	--ease-enter: cubic-bezier(0, 0, 0, 1);
+	--ease-exit: cubic-bezier(0.4, 0, 1, 1);
+}
+
+:root {
+	--ui-radius: 0rem;
+	--ui-header-height: 3rem;
+	--ui-container: 72rem;
+	--duration-fast: 120ms;
+	--duration-base: 180ms;
+	--duration-slow: 240ms;
+	--z-sticky: 10;
+	--z-sidebar: 20;
+	--z-banner: 30;
+	--z-popover: 40;
+	--z-overlay: 50;
+	--z-toast: 60;
+	--z-tooltip: 70;
+	--ui-bg: var(--color-white);
+	--ui-bg-muted: var(--color-chalk-50);
+	--ui-bg-elevated: var(--color-chalk-100);
+	--ui-bg-accented: var(--color-chalk-200);
+	--ui-bg-inverted: var(--color-chalk-900);
+	--ui-text-dimmed: var(--color-chalk-400);
+	--ui-text-muted: var(--color-chalk-500);
+	--ui-text-toned: var(--color-chalk-600);
+	--ui-text: var(--color-chalk-800);
+	--ui-text-highlighted: var(--color-chalk-900);
+	--ui-text-inverted: var(--color-white);
+	--ui-border: var(--color-chalk-200);
+	--ui-border-muted: var(--color-chalk-100);
+	--ui-border-accented: var(--color-chalk-450);
+	--ui-border-inverted: var(--color-chalk-900);
+	--ui-primary: var(--ui-color-primary-900);
+	--ui-secondary: var(--ui-color-secondary-700);
+	--ui-success: var(--ui-color-success-700);
+	--ui-info: var(--ui-color-info-700);
+	--ui-warning: var(--ui-color-warning-700);
+	--ui-error: var(--ui-color-error-700);
+}
+
+.dark {
+	--ui-bg: var(--color-chalk-900);
+	--ui-bg-muted: var(--color-chalk-950);
+	--ui-bg-elevated: var(--color-chalk-850);
+	--ui-bg-accented: var(--color-chalk-800);
+	--ui-bg-inverted: var(--color-chalk-50);
+	--ui-text-dimmed: var(--color-chalk-500);
+	--ui-text-muted: var(--color-chalk-400);
+	--ui-text-toned: var(--color-chalk-300);
+	--ui-text: var(--color-chalk-200);
+	--ui-text-highlighted: var(--color-chalk-50);
+	--ui-text-inverted: var(--color-chalk-900);
+	--ui-border: var(--color-chalk-700);
+	--ui-border-muted: var(--color-chalk-800);
+	--ui-border-accented: var(--color-chalk-500);
+	--ui-border-inverted: var(--color-chalk-50);
+	--ui-primary: var(--ui-color-primary-50);
+	--ui-secondary: var(--ui-color-secondary-300);
+	--ui-success: var(--ui-color-success-300);
+	--ui-info: var(--ui-color-info-300);
+	--ui-warning: var(--ui-color-warning-300);
+	--ui-error: var(--ui-color-error-300);
+	--shadow-popover: 0 4px 16px rgb(0 0 0 / 0.5);
+	--shadow-modal: 0 16px 48px rgb(0 0 0 / 0.6);
+}
+
+body {
+	background: var(--ui-bg-muted);
+	color: var(--ui-text);
+	font-family: var(--font-sans);
+	font-size: var(--text-sm);
+	line-height: var(--text-sm--line-height);
+	-webkit-font-smoothing: antialiased;
+}
+
+.article-content {
+	font-family: var(--font-serif);
+	font-size: 1.0625rem;
+	line-height: 1.75rem;
+	color: var(--ui-text-highlighted);
+	max-width: 42rem;
+	overflow-wrap: break-word;
+}
+.article-content > :first-child {
+	margin-top: 0;
+}
+.article-content h1,
+.article-content h2,
+.article-content h3,
+.article-content h4 {
+	font-weight: 600;
+	text-wrap: balance;
+	color: var(--ui-text-highlighted);
+}
+.article-content h1 {
+	font-size: 1.75rem;
+	line-height: 2.25rem;
+	margin: 0 0 1rem;
+}
+.article-content h2 {
+	font-size: 1.4375rem;
+	line-height: 1.9375rem;
+	margin: 2.5rem 0 0.75rem;
+}
+.article-content h3 {
+	font-size: 1.1875rem;
+	line-height: 1.75rem;
+	margin: 2rem 0 0.5rem;
+}
+.article-content h4 {
+	font-size: 1.0625rem;
+	line-height: 1.625rem;
+	margin: 1.5rem 0 0.5rem;
+}
+.article-content p {
+	font-size: 1.0625rem;
+	line-height: 1.75rem;
+	margin: 0 0 1.25rem;
+}
+.article-content ul,
+.article-content ol {
+	margin: 0 0 1.25rem;
+	padding-left: 1.75rem;
+}
+.article-content ul {
+	list-style: square;
+}
+.article-content ol {
+	list-style: decimal;
+}
+.article-content li {
+	margin: 0 0 0.375rem;
+}
+.article-content li::marker {
+	color: var(--ui-text-muted);
+}
+.article-content blockquote {
+	margin: 1.75rem 0;
+	padding-left: 1.25rem;
+	border-left: 2px solid var(--ui-primary);
+	font-style: italic;
+	color: var(--ui-text-toned);
+}
+.article-content a {
+	color: var(--ui-text-highlighted);
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 3px;
+}
+.article-content a:hover {
+	text-decoration-thickness: 2px;
+}
+.article-content img {
+	display: block;
+	max-width: 100%;
+	height: auto;
+	margin: 1.75rem 0;
+}
+.article-content figure {
+	margin: 1.75rem 0;
+}
+.article-content figure img {
+	margin: 0;
+}
+.article-content figcaption {
+	margin-top: 0.5rem;
+	font-family: var(--font-sans);
+	font-size: 0.8125rem;
+	line-height: 1.25rem;
+	color: var(--ui-text-muted);
+}
+@media (min-width: 48rem) {
+	.article-content h1 {
+		font-size: 2rem;
+		line-height: 2.5rem;
+	}
+	.article-content h2 {
+		font-size: 1.625rem;
+		line-height: 2.125rem;
+	}
+	.article-content h3 {
+		font-size: 1.3125rem;
+		line-height: 1.875rem;
+	}
+	.article-content h4 {
+		font-size: 1.125rem;
+		line-height: 1.75rem;
+	}
+	.article-content p {
+		font-size: 1.125rem;
+		line-height: 1.875rem;
+	}
+	.article-content {
+		font-size: 1.125rem;
+		line-height: 1.875rem;
+	}
+	.article-content figcaption {
+		font-size: 0.875rem;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	*,
+	::before,
+	::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+	.animate-spin {
+		animation-duration: 1.6s !important;
+		animation-iteration-count: infinite !important;
+	}
+}

docs/design/source/tokens/ui.config.ts

@@ -0,0 +1,183 @@
+export const renewUi = {
+	colors: {
+		primary: 'ink',
+		secondary: 'sand',
+		success: 'moss',
+		info: 'slate',
+		warning: 'ochre',
+		error: 'brick',
+		neutral: 'chalk'
+	},
+	icons: {
+		loading: 'i-lucide-loader-circle',
+		close: 'i-lucide-x',
+		check: 'i-lucide-check',
+		search: 'i-lucide-search',
+		chevronDown: 'i-lucide-chevron-down',
+		chevronRight: 'i-lucide-chevron-right',
+		arrowLeft: 'i-lucide-arrow-left',
+		copy: 'i-lucide-copy',
+		copyCheck: 'i-lucide-check',
+		dark: 'i-lucide-moon',
+		light: 'i-lucide-sun',
+		system: 'i-lucide-monitor',
+		success: 'i-lucide-circle-check',
+		info: 'i-lucide-info',
+		warning: 'i-lucide-triangle-alert',
+		error: 'i-lucide-circle-x',
+		menu: 'i-lucide-menu',
+		panelClose: 'i-lucide-panel-left-close',
+		panelOpen: 'i-lucide-panel-left-open',
+		ellipsis: 'i-lucide-ellipsis',
+		upload: 'i-lucide-upload',
+		eye: 'i-lucide-eye',
+		eyeOff: 'i-lucide-eye-off'
+	},
+	button: {
+		slots: {
+			base: 'rounded-none font-medium transition-colors duration-(--duration-fast) ease-(--ease-standard)'
+		},
+		defaultVariants: {
+			size: 'md'
+		}
+	},
+	input: {
+		slots: {
+			base: 'rounded-none ring-(--ui-border-accented) placeholder:text-muted'
+		},
+		variants: {
+			size: {
+				md: {
+					base: 'text-base md:text-sm'
+				}
+			}
+		}
+	},
+	textarea: {
+		slots: {
+			base: 'rounded-none ring-(--ui-border-accented) placeholder:text-muted text-base md:text-sm'
+		}
+	},
+	select: {
+		slots: {
+			base: 'rounded-none ring-(--ui-border-accented)',
+			content: 'rounded-none shadow-(--shadow-popover)'
+		}
+	},
+	checkbox: {
+		slots: {
+			base: 'rounded-none ring-(--ui-border-accented)'
+		}
+	},
+	switch: {
+		slots: {
+			base: 'rounded-none',
+			thumb: 'rounded-none'
+		}
+	},
+	avatar: {
+		slots: {
+			root: 'rounded-none bg-(--ui-color-secondary-300)',
+			fallback: 'text-(--ui-color-primary-900) font-semibold'
+		}
+	},
+	chip: {
+		slots: {
+			base: 'rounded-none'
+		}
+	},
+	progress: {
+		slots: {
+			base: 'rounded-none',
+			indicator: 'rounded-none'
+		}
+	},
+	badge: {
+		slots: {
+			base: 'rounded-none font-medium'
+		}
+	},
+	kbd: {
+		base: 'rounded-none font-mono'
+	},
+	tabs: {
+		slots: {
+			list: 'rounded-none',
+			trigger: 'rounded-none',
+			indicator: 'rounded-none'
+		}
+	},
+	dropdownMenu: {
+		slots: {
+			content: 'rounded-none shadow-(--shadow-popover)',
+			item: 'rounded-none'
+		}
+	},
+	tooltip: {
+		slots: {
+			content: 'rounded-none bg-inverted text-inverted ring-0'
+		}
+	},
+	modal: {
+		slots: {
+			content: 'rounded-none shadow-(--shadow-modal) divide-default',
+			overlay: 'bg-(--ui-color-neutral-950)/40'
+		}
+	},
+	slideover: {
+		slots: {
+			content: 'rounded-none shadow-(--shadow-modal)',
+			overlay: 'bg-(--ui-color-neutral-950)/40'
+		}
+	},
+	toast: {
+		slots: {
+			root: 'rounded-none shadow-(--shadow-popover)',
+			progress: 'rounded-none'
+		}
+	},
+	toaster: {
+		slots: {
+			viewport: 'z-(--z-toast)'
+		}
+	},
+	alert: {
+		slots: {
+			root: 'rounded-none'
+		}
+	},
+	card: {
+		slots: {
+			root: 'rounded-none'
+		}
+	},
+	table: {
+		slots: {
+			thead: 'bg-elevated',
+			th: 'text-muted font-medium py-2',
+			td: 'py-3',
+			tr: 'data-[selectable=true]:hover:bg-elevated'
+		}
+	},
+	navigationMenu: {
+		compoundVariants: [
+			{
+				orientation: 'vertical',
+				active: true,
+				class: {
+					link: 'bg-(--ui-color-secondary-200) text-(--ui-color-primary-900) dark:bg-(--ui-color-secondary-300) before:hidden'
+				}
+			}
+		]
+	},
+	dashboardSidebar: {
+		slots: {
+			root: 'bg-default'
+		}
+	},
+	dashboardPanel: {
+		slots: {
+			body: 'bg-muted'
+		}
+	}
+}

docs/design/source/tokens/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import ui from '@nuxt/ui/vite'
+import { renewUi } from './src/theme/ui.config'
+
+export default defineConfig({
+	plugins: [
+		vue(),
+		ui({
+			ui: renewUi,
+			colorMode: true,
+			theme: {
+				colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error']
+			}
+		})
+	]
+})

docs/design/states.md

@@ -0,0 +1,115 @@
+# State matrix and error copy
+
+Every state is drawn at desktop and mobile on the screen boards, with final copy. Each screen's file in `screens/` has the full copy per state.
+
+| Screen | Route | State | Trigger | Spec |
+|---|---|---|---|---|
+| App boot | `any verified route` | Checking session | First navigation, while GET /v1/auth/me is pending | [boot](screens/boot.md) |
+| App boot | `any verified route` | Verified | 200 with is_verified: the route renders | [boot](screens/boot.md) |
+| App boot | `any verified route` | Unverified | 200 with is_verified false: goes to /register/pending | [boot](screens/boot.md) |
+| App boot | `any verified route` | No session | 401: goes to /login?redirect= | [boot](screens/boot.md) |
+| Log in | `/login` | Default | Registration closed | [log-in](screens/log-in.md) |
+| Log in | `/login` | Fresh install | registration.open is true | [log-in](screens/log-in.md) |
+| Log in | `/login` | Validation errors | Client rules fail on submit | [log-in](screens/log-in.md) |
+| Log in | `/login` | Submitting | Request in flight | [log-in](screens/log-in.md) |
+| Log in | `/login` | Wrong credentials | 403 | [log-in](screens/log-in.md) |
+| Log in | `/login` | Too many attempts | 429 with Retry-After | [log-in](screens/log-in.md) |
+| Log in | `/login` | Session expired | ?reason=expired from a 401 | [log-in](screens/log-in.md) |
+| Log in | `/login` | Password changed | ?reason=password-changed | [log-in](screens/log-in.md) |
+| Log in | `/login` | Server error | 500 or network | [log-in](screens/log-in.md) |
+| Register | `/register` | Default | Open instance | [register](screens/register.md) |
+| Register | `/register` | Validation errors | Client rules fail | [register](screens/register.md) |
+| Register | `/register` | Submitting | In flight | [register](screens/register.md) |
+| Register | `/register` | Registration closed | 403 | [register](screens/register.md) |
+| Register | `/register` | Server error | 500 or network | [register](screens/register.md) |
+| Pending | `/register/pending` | Default | After registering (email known) | [pending](screens/pending.md) |
+| Pending | `/register/pending` | Email unknown | After logging in unverified | [pending](screens/pending.md) |
+| Pending | `/register/pending` | Confirm cancel | Cancel registration clicked | [pending](screens/pending.md) |
+| Pending | `/register/pending` | Cancelling | DELETE in flight | [pending](screens/pending.md) |
+| Pending | `/register/pending` | Cancelled | 200: /register with toast | [pending](screens/pending.md) |
+| Pending | `/register/pending` | Already verified | 403: /home with toast | [pending](screens/pending.md) |
+| Verify | `/register/validate?c=` | Verifying | On load | [verify](screens/verify.md) |
+| Verify | `/register/validate?c=` | Success | 200: /home with toast | [verify](screens/verify.md) |
+| Verify | `/register/validate?c=` | Invalid or expired | 403 | [verify](screens/verify.md) |
+| Verify | `/register/validate?c=` | No session | 401: inline log in, then retry | [verify](screens/verify.md) |
+| Verify | `/register/validate?c=` | Missing code | No c parameter | [verify](screens/verify.md) |
+| Forgot password | `/register/reset/request` | Default | Page load | [forgot-password](screens/forgot-password.md) |
+| Forgot password | `/register/reset/request` | Validation | Invalid email | [forgot-password](screens/forgot-password.md) |
+| Forgot password | `/register/reset/request` | Submitting | In flight | [forgot-password](screens/forgot-password.md) |
+| Forgot password | `/register/reset/request` | Sent | Any 200 (neutral copy) | [forgot-password](screens/forgot-password.md) |
+| Forgot password | `/register/reset/request` | Too many attempts | 429 | [forgot-password](screens/forgot-password.md) |
+| Forgot password | `/register/reset/request` | Server error | 500 or network | [forgot-password](screens/forgot-password.md) |
+| Reset password | `/register/reset/validate` | Default | c and email present | [reset-password](screens/reset-password.md) |
+| Reset password | `/register/reset/validate` | Too short | Under 8 characters | [reset-password](screens/reset-password.md) |
+| Reset password | `/register/reset/validate` | Mismatch | Confirm field differs | [reset-password](screens/reset-password.md) |
+| Reset password | `/register/reset/validate` | Submitting | In flight | [reset-password](screens/reset-password.md) |
+| Reset password | `/register/reset/validate` | Success | 200: /login?reason=password-changed | [reset-password](screens/reset-password.md) |
+| Reset password | `/register/reset/validate` | Invalid or expired | 403 | [reset-password](screens/reset-password.md) |
+| Reset password | `/register/reset/validate` | Missing parameters | No c or no email | [reset-password](screens/reset-password.md) |
+| Home | `/home` | Loading | List in flight (after 150 ms) | [home](screens/home.md) |
+| Home | `/home` | Default | List loaded | [home](screens/home.md) |
+| Home | `/home` | Empty | Zero articles | [home](screens/home.md) |
+| Home | `/home` | Error | 500 or network | [home](screens/home.md) |
+| Articles | `/article` | Loading | List in flight | [articles](screens/articles.md) |
+| Articles | `/article` | Default | Loaded | [articles](screens/articles.md) |
+| Articles | `/article` | Empty | Zero articles | [articles](screens/articles.md) |
+| Articles | `/article` | No results | Search matches nothing | [articles](screens/articles.md) |
+| Articles | `/article` | Empty tab | No drafts, or nothing online | [articles](screens/articles.md) |
+| Articles | `/article` | Row busy | Publish or unpublish in flight | [articles](screens/articles.md) |
+| Articles | `/article` | Action failed | 500 or network: toast with Retry | [articles](screens/articles.md) |
+| Articles | `/article` | Row vanished | 404 on any row action | [articles](screens/articles.md) |
+| Articles | `/article` | Delete confirm, in progress, failed, done | ConfirmDialog, then DELETE: 204 or 500 | [articles](screens/articles.md) |
+| New article | `modal · /article/new` | Default | Opened | [new-article](screens/new-article.md) |
+| New article | `modal · /article/new` | Validation | Title under 3 or body empty | [new-article](screens/new-article.md) |
+| New article | `modal · /article/new` | Submitting | POST in flight | [new-article](screens/new-article.md) |
+| New article | `modal · /article/new` | Title rejected | Server 400 | [new-article](screens/new-article.md) |
+| New article | `modal · /article/new` | Error | 500 or network | [new-article](screens/new-article.md) |
+| New article | `modal · /article/new` | Created | 201: editor, with a toast | [new-article](screens/new-article.md) |
+| Editor | `/article/:id/edit` | Loading | GET in flight | [editor](screens/editor.md) |
+| Editor | `/article/:id/edit` | Not found | 404 | [editor](screens/editor.md) |
+| Editor | `/article/:id/edit` | Saved | Clean | [editor](screens/editor.md) |
+| Editor | `/article/:id/edit` | Unsaved | Any edit | [editor](screens/editor.md) |
+| Editor | `/article/:id/edit` | Saving | PATCH in flight | [editor](screens/editor.md) |
+| Editor | `/article/:id/edit` | Save failed | 500 or network | [editor](screens/editor.md) |
+| Editor | `/article/:id/edit` | Near the limit | At least 9 000 HTML characters | [editor](screens/editor.md) |
+| Editor | `/article/:id/edit` | Too long | Over 10 000: Save and Publish disabled | [editor](screens/editor.md) |
+| Editor | `/article/:id/edit` | Preview | Switch on | [editor](screens/editor.md) |
+| Editor | `/article/:id/edit` | Uploading, rejected, inserted | ImageUploader | [editor](screens/editor.md) |
+| Editor | `/article/:id/edit` | Publishing, unpublishing | PATCH publish or unpublish | [editor](screens/editor.md) |
+| Editor | `/article/:id/edit` | Leave guard | Navigating away while dirty | [editor](screens/editor.md) |
+| 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) |
+| Integration | `/integration` | Default | Page load | [integration](screens/integration.md) |
+| Integration | `/integration` | Copied | Copy clicked (2 s) | [integration](screens/integration.md) |
+
+## HTTP status to copy
+
+Response bodies are plain text and are never shown. `useApi` throws an `ApiError` with the status and a context key, and each screen maps them to this copy.
+
+| Status | Where | Copy | Surface |
+|---|---|---|---|
+| 400 | Any form | The field error from the client rules. A server 400 that got through: "Something in the form isn't valid. Check the highlighted fields." | Field + alert |
+| 401 | Any back-office call | Goes to /login?redirect=<path>&reason=expired. "Your session expired. Log in again to pick up where you left off." | Redirect + alert |
+| 401 | Verify | "Log in to finish verifying." Inline log in, then retry | Inline form |
+| 403 | Log in | "That username and password don't match. Check both and try again." | Alert |
+| 403 | Register | "This site already has an owner. Log in instead." | ResultPanel |
+| 403 | Any back-office call | Unverified: goes to /register/pending | Redirect |
+| 403 | Verify | "This verification link doesn't work." Offers Cancel registration and start over | ResultPanel |
+| 403 | Cancel registration | "Your account is already verified." Goes to /home | Toast |
+| 403 | Reset confirm | "This reset link has expired." Offers Request a new link | ResultPanel |
+| 404 | Editor load | "This article doesn't exist." Offers All articles | ErrorView |
+| 404 | Row or editor action | "That article no longer exists." The row is removed | Toast |
+| 404 | Unknown route | "Page not found" | ErrorView |
+| 429 | Log in, reset request | "Too many attempts. For your security, wait a moment before trying again." With a countdown | Alert + disabled button |
+| 500 | Save | "Save failed" + Retry. Changes are kept | SaveStatus |
+| 500 | Publish / unpublish | "Couldn't publish" / "Couldn't unpublish" + Retry | Toast |
+| 500 | Delete | "Couldn't delete the article, so it's still there. Try again in a moment." | Inline in dialog |
+| 500 | Upload | "Upload failed. The server didn't accept the file. Your article hasn't changed." | ImageUploader |
+| network | Anywhere | "Couldn't reach RenewCMS. Check your connection and try again." Offline: banner | Alert / toast / banner |
+
+## API the design marked pending
+
+All four now exist: `GET /v1/auth/me`, `GET /v1/auth/registration`, `429` with `Retry-After` on `/v1/auth/login` and `/v1/auth/password-reset`, and `/static/uploadedImages/*`. 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 password while logged in, editing the profile or email, listing or deleting individual images, multiple users.

docs/development.md

@@ -0,0 +1,74 @@
+# Development
+
+## Prerequisites
+
+| Tool                          | Version                    | Install                                                  |
+|-------------------------------|----------------------------|----------------------------------------------------------|
+| [Go](https://go.dev/dl/)      | 1.27+ (see `go.mod`)       |                                                          |
+| [Node.js](https://nodejs.org) | 20.19+ or 22.12+ (22 LTS recommended) | `nvm install 22` — Vite and vue-tsc run on Node |
+| [Bun](https://bun.sh) (package manager and script runner) | 1.x | `powershell -c "irm bun.sh/install.ps1 \| iex"` or `curl -fsSL https://bun.sh/install \| bash` |
+| [Task](https://taskfile.dev)  | 3.43+                      | `go install github.com/go-task/task/v3/cmd/task@latest`  |
+| Git                           | any                        |                                                          |
+
+`task setup` installs the rest: [air](https://github.com/air-verse/air) for hot reload, [gremlins](https://github.com/go-gremlins/gremlins) for mutation testing, Go modules and frontend dependencies. Make sure `$(go env GOPATH)/bin` is on your `PATH`.
+
+No C compiler is needed. The SQLite driver (`glebarez/sqlite`, backed by `modernc.org/sqlite`) is pure Go, and every build runs with `CGO_ENABLED=0`.
+
+## First run
+
+```sh
+cp .env.example .env     # set at least JWT_SECRET; SMTP is only needed to actually send mail
+task setup
+task dev
+```
+
+Open **http://localhost:5173**.
+
+## How the dev setup works
+
+```
+browser ──▶ http://localhost:5173   Vite dev server (HMR)          task dev:web
+              │  /v1/*, /healthz
+              └──proxy──▶ http://localhost:8080   Go API via air   task dev:api
+```
+
+- **Always use the Vite URL (5173).** The Vite dev server proxies API calls to Go (see `server.proxy` in [`web/vite.config.ts`](../web/vite.config.ts)). The browser therefore sees a single origin, so the `jwt` cookie works and no CORS setup is needed. In the frontend, call the API with relative URLs (`/v1/...`) and never hardcode `localhost:8080`.
+- **air** rebuilds and restarts the API when a `.go` or `.html` file (such as a mail template) changes. Its config is in [`.air.toml`](../.air.toml).
+- Run the two halves separately with `task dev:api` and `task dev:web` if you want their logs in separate terminals.
+
+### The `nofrontend` build tag
+
+The production binary embeds the built SPA from `internal/infrastructure/assets/dist/` (the `//go:embed` in `assets_embed.go`). That directory only exists after `task build:web`.
+
+To keep Go work independent of the frontend toolchain, all dev and quality tasks build with **`-tags nofrontend`**. That tag compiles `assets_stub.go` instead of the embed. The resulting binary serves the API normally and answers `/` with a notice that points to Vite.
+
+| Command                            | Tag            | Needs the frontend built? |
+|------------------------------------|----------------|---------------------------|
+| `task dev:api`, `test`, `cover`, `mutate`, `lint:go` | `nofrontend` | no  |
+| `task build`, `release`, `run`     | *(none)*       | yes (the task builds it first) |
+| plain `go build ./...`, `go vet ./...` | *(none)*   | yes, so add `-tags nofrontend` |
+
+If your editor reports `pattern all:dist: no matching files found`, either run `task build:web` once or set the gopls build flags to `-tags=nofrontend`. In VS Code, add this to `settings.json`: `"gopls": { "buildFlags": ["-tags=nofrontend"] }`.
+
+## Everyday commands
+
+```sh
+task --list          # everything available
+task test            # Go tests; extra args pass through: task test -- -run TestCreateArticle -v
+task cover           # coverage of the use cases → tmp/coverage.out
+task mutate          # gremlins mutation testing → tmp/gremlins.json
+task lint            # gofmt check, go vet, eslint --fix, vue-tsc
+task fmt             # gofmt -w + prettier
+task run             # build the production binary and run it (SPA embedded) on :8080
+task clean           # remove bin/, tmp/ and the built SPA
+```
+
+## Tests
+
+- All Go tests live in [`test/`](../test) (package `test`, black-box). They use in-memory fakes of the domain `Repository` interfaces, so they need no database, SMTP server or network.
+- HTTP-level tests use `net/http/httptest` against a chi router. Call `validator.InitValidator()` before invoking a handler.
+- The frontend has no test runner yet. `task lint:web` runs eslint and a type check.
+
+## Data
+
+With the default configuration, local state lives in `./data/`: `renewcms.db` and `uploads/`. The directory is gitignored. Delete it to start from scratch.

features/account_verification.feature

@@ -0,0 +1,127 @@
+Feature: A logged-in user verifies their account with the emailed code
+
+  As the maintainer of RenewCMS
+  I want a logged-in user to confirm ownership of their account by submitting the verification
+    code that CreateUser already emailed them, have a wrong or expired code refused without
+    changing anything, have the stored code cleared the moment it is successfully used so it
+    cannot be replayed, and have a token that carries no usable user_id answered with 401 instead
+    of a panic
+  So that account verification is a real security check, not a formality, and a malformed or
+    hand-crafted token can never crash the server
+
+  Background:
+    Given CreateUserUseCase.CreateUser already stores a bcrypt hash of a random verification code
+      on the new user, alongside VerificationExpiration set to two hours after creation, and emails
+      the raw code to the user (features/registration_gate_and_verification_email.feature)
+    And this slice adds POST /v1/auth/verify, mounted in api/router.go inside a group that applies
+      jwtauth.Verifier and jwtauth.Authenticator to the auth router, so a request with no jwt
+      cookie, an expired jwt, or a jwt with a bad signature never reaches the handler and is
+      answered 401 by jwtauth.Authenticator itself, as already happens for /v1/article routes
+    And the request body is decoded into a VerifyCredentials struct with one field, Code, validated
+      required by validator.Validate.Struct before anything else
+    And a new use case, VerifyUserUseCase (internal/infrastructure/useCases/VerifyUser.go), is
+      injected into auth.Handler as VerifyUseCase; it depends only on user.Repository and
+      hash.Hasher and exposes Verify(userId uint32, code string) (user.User, error)
+    And VerifyUserUseCase.Verify loads the user by id, refuses with the new sentinel
+      user.ErrInvalidVerificationCode when the stored VerificationCode is empty (already used, or
+      never set) or hash.Hasher.Compare finds the submitted code does not match the stored hash,
+      refuses with the new sentinel user.ErrVerificationCodeExpired when
+      time.Now() is after the stored VerificationExpiration, and otherwise calls a new
+      user.Repository method, ClearVerificationCode(userId uint32) (user.User, error), that sets
+      IsVerified true and VerificationCode "" (stored as SQL NULL, the same convention as
+      PasswordResetCode in features/unverified_users_and_reregistration.feature) in one write
+    And today, auth.Handler.IsVerified reads token.PrivateClaims()["user_id"].(float64) with a bare
+      type assertion that panics if the claim is absent or not a number; this slice does not touch
+      IsVerified, but the new Verify handler extracts user_id from the already-verified token's
+      claims safely, and answers 401 with a new apperr.UnauthorizedErrorMessage constant whenever
+      the claim is missing, is not a number, or does not match any user in the repository, instead
+      of panicking or trusting the value
+    And a wrong or expired code is mapped to 403 with a new apperr.VerificationFailedErrorMessage
+      constant, the same status family Login already uses for a rejected credential
+    And on success the handler responds 200 with the updated user as JSON (is_verified true,
+      verification_code "")
+
+  Scenario: A logged-in user verifies their account with the correct emailed code
+    Given a user repository containing user id 7, username "alice", is_verified false, whose stored
+      VerificationCode is the bcrypt hash of "abc123" and whose VerificationExpiration is one hour
+      from now
+    And a valid jwt cookie for user id 7
+    When the client sends POST /v1/auth/verify with body {"code": "abc123"}
+    Then the response status is 200
+    And the response body is the user as JSON with is_verified true and verification_code ""
+    And the user repository's record for id 7 now has is_verified true and an empty
+      verification_code
+
+  Scenario: A wrong code is refused and nothing changes
+    Given a user repository containing user id 7, username "alice", is_verified false, whose stored
+      VerificationCode is the bcrypt hash of "abc123" and whose VerificationExpiration is one hour
+      from now
+    And a valid jwt cookie for user id 7
+    When the client sends POST /v1/auth/verify with body {"code": "wrong-code"}
+    Then the response status is 403
+    And the response body is "The verification code is invalid or has expired."
+    And the user repository's record for id 7 still has is_verified false and the same stored
+      verification_code
+
+  Scenario: An expired code is refused and nothing changes
+    Given a user repository containing user id 7, username "alice", is_verified false, whose stored
+      VerificationCode is the bcrypt hash of "abc123" and whose VerificationExpiration is one hour
+      in the past
+    And a valid jwt cookie for user id 7
+    When the client sends POST /v1/auth/verify with body {"code": "abc123"}
+    Then the response status is 403
+    And the response body is "The verification code is invalid or has expired."
+    And the user repository's record for id 7 still has is_verified false and the same stored
+      verification_code
+
+  Scenario: The code is cleared once used, so it cannot be replayed
+    Given a user repository containing user id 7, username "alice", is_verified false, whose stored
+      VerificationCode is the bcrypt hash of "abc123" and whose VerificationExpiration is one hour
+      from now
+    And a valid jwt cookie for user id 7
+    When the client sends POST /v1/auth/verify with body {"code": "abc123"}
+    Then the response status is 200
+    When the client sends POST /v1/auth/verify again with body {"code": "abc123"}
+    Then the response status is 403
+    And the response body is "The verification code is invalid or has expired."
+
+  Scenario Outline: A token without a valid user_id returns 401 instead of crashing
+    Given a user repository containing user id 7, username "alice", is_verified false, whose stored
+      VerificationCode is the bcrypt hash of "abc123" and whose VerificationExpiration is one hour
+      from now
+    And <token description>
+    When the client sends POST /v1/auth/verify with body {"code": "abc123"}
+    Then the response status is 401
+    And the response body is the new apperr.UnauthorizedErrorMessage text
+    And the handler does not panic
+    And the user repository's record for id 7 still has is_verified false
+
+    Examples:
+      | token description                                                             |
+      | a validly signed jwt cookie whose claims carry no "user_id" key at all        |
+      | a validly signed jwt cookie whose "user_id" claim is the string "seven"       |
+      | a validly signed jwt cookie whose "user_id" claim is the number 999, which does not match any user |
+
+  Scenario: The use case itself enforces the rule, independently of any handler
+    Given a user.Repository fake containing user id 3 with VerificationCode equal to the bcrypt
+      hash of "right-code" and VerificationExpiration one hour from now
+    And a VerifyUserUseCase built directly over that fake and a hasher
+    When Verify is called with userId 3 and code "wrong-code"
+    Then the call returns user.ErrInvalidVerificationCode, asserted with errors.Is
+    And the fake repository's ClearVerificationCode method was never invoked
+
+  Scenario: The use case rejects an expired code independently of any handler
+    Given a user.Repository fake containing user id 3 with VerificationCode equal to the bcrypt
+      hash of "right-code" and VerificationExpiration one hour in the past
+    And a VerifyUserUseCase built directly over that fake and a hasher
+    When Verify is called with userId 3 and code "right-code"
+    Then the call returns user.ErrVerificationCodeExpired, asserted with errors.Is
+    And the fake repository's ClearVerificationCode method was never invoked
+
+  Scenario: The use case succeeds and clears the code independently of any handler
+    Given a user.Repository fake containing user id 3 with VerificationCode equal to the bcrypt
+      hash of "right-code" and VerificationExpiration one hour from now
+    And a VerifyUserUseCase built directly over that fake and a hasher
+    When Verify is called with userId 3 and code "right-code"
+    Then the call returns a user with IsVerified true and VerificationCode ""
+    And the fake repository's ClearVerificationCode method was invoked exactly once with userId 3

features/account_verification.qa.md

@@ -0,0 +1,84 @@
+# QA procedure: account_verification
+
+Package: `test` (black-box), extending `test/user_test.go` (`mockUserRepo`, `stubHasher`).
+
+## Test infrastructure additions needed first
+
+1. Add a `ClearVerificationCode(userId uint32) (user.User, error)` method to `mockUserRepo`
+   mirroring the existing `UpdateVerificationStatus`/`UpdatePasswordResetCode` pattern: honor
+   `m.fail.trigger("ClearVerificationCode")`, look the user up (return `user.ErrUserNotFound` if
+   absent), set `IsVerified = true` and `VerificationCode = ""`, store it back, return it. Track a
+   call counter/last-argument on the mock (or reuse the existing fail-switch style) so scenarios can
+   assert it was or wasn't invoked.
+2. `stubHasher.Compare(hashed, value)` already returns `nil` only when `hashed == "hashed:"+value`
+   and an error otherwise, so seed `VerificationCode` in fixtures as `"hashed:abc123"` to represent
+   "the bcrypt hash of abc123", and submit `"abc123"` as the matching code.
+
+## Setup shared by every case
+
+3. Call `validator.InitValidator()` once.
+4. Use-case-level checks build `useCases.NewVerifyUserUseCase(repo, &stubHasher{})` where `repo` is
+   a `mockUserRepo` pre-populated directly via `repo.users[id] = user.User{...}`.
+5. HTTP-level checks wire `mockUserRepo`, `useCases.NewVerifyUserUseCase(repo, &stubHasher{})` and
+   the other existing use cases into `auth.NewHandler(...)` (extended with the new `VerifyUseCase`
+   parameter) with a test `jwtauth.New("HS256", []byte("test-secret"), nil)`. Mount
+   `POST /v1/auth/verify` on a fresh `chi.NewRouter()` wrapped in `jwtauth.Verifier(token)` then
+   `jwtauth.Authenticator(token)`, mirroring the protected group `api/router.go` adds inside
+   `NewAuthRouter`. No live server. Mint jwt cookies with `token.Encode(map[string]any{"user_id":
+   uint32(7)})` for the valid-token cases, following the convention in
+   `features/article_publishing.qa.md`.
+
+## Use-case-level checks (no HTTP)
+
+6. Repo has user id 3 with `VerificationCode: "hashed:right-code"`,
+   `VerificationExpiration: time.Now().Add(time.Hour)`. Call `Verify(3, "wrong-code")`. Assert
+   `errors.Is(err, user.ErrInvalidVerificationCode)`. Assert `ClearVerificationCode` was never
+   called on the repo.
+7. Same repo, `VerificationExpiration: time.Now().Add(-time.Hour)`. Call `Verify(3, "right-code")`.
+   Assert `errors.Is(err, user.ErrVerificationCodeExpired)`. Assert `ClearVerificationCode` was
+   never called.
+8. Same repo, `VerificationExpiration: time.Now().Add(time.Hour)`. Call `Verify(3, "right-code")`.
+   Assert `err == nil`, `result.IsVerified == true`, `result.VerificationCode == ""`. Assert the
+   repo's stored record for id 3 now has `IsVerified == true` and `VerificationCode == ""`.
+9. Repo has user id 3 with `VerificationCode: ""` (already verified/used). Call
+   `Verify(3, "anything")`. Assert `errors.Is(err, user.ErrInvalidVerificationCode)`.
+
+## HTTP-level checks (fakes, per the shared setup above)
+
+10. Seed `mockUserRepo` with user id 7, username "alice", `IsVerified: false`,
+    `VerificationCode: "hashed:abc123"`, `VerificationExpiration: time.Now().Add(time.Hour)`. Mint a
+    valid jwt cookie for user id 7. `POST /v1/auth/verify` with `{"code":"abc123"}` → assert status
+    `200`, response body decodes to a user JSON with `is_verified: true` and
+    `verification_code: ""`, and the repo's record for id 7 now has `IsVerified == true` and
+    `VerificationCode == ""`.
+11. Same seed, wrong code `{"code":"wrong-code"}` → assert status `403`, body exactly
+    `"The verification code is invalid or has expired."`, and the repo's record for id 7 is
+    unchanged (`IsVerified == false`, `VerificationCode == "hashed:abc123"`).
+12. Same seed but `VerificationExpiration: time.Now().Add(-time.Hour)`, correct code
+    `{"code":"abc123"}` → assert status `403`, same body text as above, and the repo's record for
+    id 7 unchanged.
+13. Replay: repeat case 10's successful call, then immediately `POST /v1/auth/verify` again with
+    the same body `{"code":"abc123"}` on the same router/repo → assert the second response status
+    is `403` with the same body text (the cleared code no longer matches).
+14. Table-driven over three "no valid user_id" cases, each against the case-10 seed and asserting
+    status `401` and a response body equal to the new `apperr.UnauthorizedErrorMessage` constant,
+    without the handler panicking (a panic inside `httptest`/chi would fail the test run directly,
+    so simply completing with the asserted status is sufficient proof):
+    - mint the jwt with `token.Encode(map[string]any{"role": "user"})` (no `user_id` key at all);
+    - mint the jwt with `token.Encode(map[string]any{"user_id": "seven"})` (string, not a number);
+    - mint the jwt with `token.Encode(map[string]any{"user_id": uint32(999)})` (well-formed but no
+      such user in the repo).
+    After each sub-case, assert the repo's record for id 7 is still `IsVerified == false`.
+15. A request with no `jwt` cookie at all against the same router → assert status `401` (produced
+    by `jwtauth.Authenticator` itself, before the handler runs); do not assert an exact body for
+    this one case since it is the library's own default text, not `apperr.UnauthorizedErrorMessage`.
+
+## Manual verification (not exercised by the Go test)
+
+- The real SMTP-delivered verification link and the SPA's `/register/validate?c=...` page actually
+  calling `POST /v1/auth/verify` with the code parsed from the URL, and redirecting or showing a
+  message on success/failure, are out of scope for this slice's automated test and should be
+  checked by hand against a running dev build.
+- The pre-existing bare type assertion in `auth.Handler.IsVerified`
+  (`token.PrivateClaims()["user_id"].(float64)`) is untouched by this slice and remains a latent
+  panic if that helper is ever wired into a route; it is not exercised here.

features/article_publishing.feature

@@ -0,0 +1,109 @@
+Feature: An authenticated user can publish and unpublish an article
+
+  As an authenticated RenewCMS user managing the CMS
+  I want to flip an article's is_online flag from an HTTP endpoint
+  So that a draft can be published to the public site and a published article can be
+    pulled back offline, without deleting it
+
+  Background:
+    Given internal/domain/article.Repository already exposes
+      UpdateIsOnline(id uint32, isOnline bool) (Article, error), and
+      UpdateArticleUseCase.UpdateIsOnline delegates to it unchanged
+    And UpdateArticleUseCase is already built in api/dependecyInjection.go as
+      container.UpdateArticleUseCase, but before this slice no handler or route calls it
+    And this slice adds Handler.PublishArticle and Handler.UnpublishArticle, backed by
+      UpdateArticleUseCase.UpdateIsOnline(id, true) and UpdateIsOnline(id, false)
+    And this slice mounts PATCH /v1/article/{id}/publish and
+      PATCH /v1/article/{id}/unpublish inside the same jwtauth Verifier + Authenticator
+      group as GET /v1/article/{id}, POST /v1/article/ and DELETE /v1/article/{id} in
+      api/router.go, so both require a valid jwt cookie
+    And a successful publish or unpublish answers 200 with the JSON body of the updated
+      article.Article, the same shape GetArticle and PostArticle already return
+    And an id that does not parse as a uint32 answers 400 with body
+      apperr.IdUint32ErrorMessage, the same as GetArticle and DeleteArticle
+    And an id absent from the article repository answers 404 with body
+      apperr.ArticleNotFoundErrorMessage, backed by errors.Is(err, article.ErrArticleNotFound),
+      the same as DeleteArticle already does per features/write_not_found_errors.feature
+    And GET /v1/article/ with no jwt cookie only returns online articles, per
+      features/public_article_listing.feature; this slice does not change that behavior,
+      only feeds it
+
+  Scenario: Publishing an offline article makes it online
+    Given a valid jwt cookie for a user with id 1
+    And the article repository contains an offline article titled "Draft: Kitchen Remodel" with id 2
+    When the client sends PATCH /v1/article/2/publish with that cookie
+    Then the response status is 200
+    And the response body is the article with id 2 and "is_online": true
+
+  Scenario: Unpublishing an online article makes it offline
+    Given a valid jwt cookie for a user with id 1
+    And the article repository contains an online article titled "Backyard Renovation Update" with id 1
+    When the client sends PATCH /v1/article/1/unpublish with that cookie
+    Then the response status is 200
+    And the response body is the article with id 1 and "is_online": false
+
+  Scenario: Publishing an already-online article is idempotent
+    Given a valid jwt cookie for a user with id 1
+    And the article repository contains an online article with id 1
+    When the client sends PATCH /v1/article/1/publish with that cookie
+    Then the response status is 200
+    And the response body is the article with id 1 and "is_online": true
+    And no error is returned
+
+  Scenario: Unpublishing an already-offline article is idempotent
+    Given a valid jwt cookie for a user with id 1
+    And the article repository contains an offline article with id 2
+    When the client sends PATCH /v1/article/2/unpublish with that cookie
+    Then the response status is 200
+    And the response body is the article with id 2 and "is_online": false
+    And no error is returned
+
+  Scenario Outline: Publishing or unpublishing an unknown article answers 404
+    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 PATCH /v1/article/9999/<action> with that cookie
+    Then the response status is 404
+    And the response body is the text "Article not found"
+
+    Examples:
+      | action     |
+      | publish    |
+      | unpublish  |
+
+  Scenario Outline: A malformed id answers 400 before any repository call
+    Given a valid jwt cookie for a user with id 1
+    When the client sends PATCH /v1/article/not-a-number/<action> with that cookie
+    Then the response status is 400
+    And the response body is the text apperr.IdUint32ErrorMessage
+
+    Examples:
+      | action     |
+      | publish    |
+      | unpublish  |
+
+  Scenario Outline: Publish and unpublish require authentication
+    Given no jwt cookie is sent
+    And the article repository contains an article with id 1
+    When the client sends PATCH /v1/article/1/<action> without a cookie
+    Then the response status is 401
+
+    Examples:
+      | action     |
+      | publish    |
+      | unpublish  |
+
+  Scenario: Publishing an article makes it appear in the public online-only list
+    Given a valid jwt cookie for a user with id 1
+    And the article repository contains an offline article titled "Draft: Kitchen Remodel" with id 2
+    When the client sends PATCH /v1/article/2/publish with that cookie
+    And the client then sends GET /v1/article/ with no jwt cookie
+    Then the response status of the second request is 200
+    And the response body of the second request is a JSON array containing the article with id 2
+
+  Scenario: Unpublishing an article removes it from the public online-only list
+    Given a valid jwt cookie for a user with id 1
+    And the article repository contains an online article titled "Backyard Renovation Update" with id 1
+    When the client sends PATCH /v1/article/1/unpublish with that cookie
+    And the client then sends GET /v1/article/ with no jwt cookie
+    Then the response status of the second request is 200
+    And the article with id 1 is absent from the response body of the second request

features/article_publishing.qa.md

@@ -0,0 +1,57 @@
+# QA procedure: article_publishing
+
+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`) as-is; its `UpdateIsOnline` and `FindByFilters`
+   already support everything this slice needs, no fake changes expected.
+3. Wire the real use cases over the fake: `useCases.NewCreateArticleUseCase`,
+   `useCases.NewGetArticleUseCase`, `useCases.NewListArticlesUseCase`,
+   `useCases.NewDeleteArticleUseCase`, `useCases.NewUpdateArticleUseCase`. Build
+   `article.NewHandler(...)` extended to also take the update use case (matching whatever
+   `NewHandler` signature the coder lands on), exposing the new `PublishArticle` and
+   `UnpublishArticle` methods.
+4. Build a test `jwtauth.New("HS256", []byte("test-secret"), nil)`.
+5. Mount the routes on a fresh `chi.NewRouter()` mirroring `api/router.go`'s current shape
+   (per `public_article_listing.qa.md`): `GET /` under `jwtauth.Verifier` only; `GET /{id}`,
+   `POST /`, `DELETE /{id}` under `jwtauth.Verifier` + `jwtauth.Authenticator`. Add
+   `PATCH /{id}/publish` and `PATCH /{id}/unpublish` to that same authenticated group.
+6. 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`.
+7. Seed the repo directly via the map pattern already used elsewhere, e.g.
+   `repo.articles[1] = article.Article{ID: 1, Title: "Backyard Renovation Update", IsOnline: true}`
+   and `repo.articles[2] = article.Article{ID: 2, Title: "Draft: Kitchen Remodel", IsOnline: false}`.
+
+## HTTP checks
+8. `PATCH /v1/article/2/publish` with the valid cookie, repo seeded per step 7 -> status `200`;
+   decode the JSON body and assert `id == 2` and `is_online == true`; assert `repo.articles[2].IsOnline`
+   is now `true`.
+9. `PATCH /v1/article/1/unpublish` with the valid cookie, repo seeded per step 7 -> status `200`;
+   decode the JSON body and assert `id == 1` and `is_online == false`; assert
+   `repo.articles[1].IsOnline` is now `false`.
+10. `PATCH /v1/article/1/publish` with the valid cookie against an article already seeded
+    `IsOnline: true` -> status `200`, body `is_online == true`, no error (idempotency).
+11. `PATCH /v1/article/2/unpublish` with the valid cookie against an article already seeded
+    `IsOnline: false` -> status `200`, body `is_online == false`, no error (idempotency).
+12. `PATCH /v1/article/9999/publish` with the valid cookie, empty repo id `9999` -> status `404`,
+    body `"Article not found\n"`. Repeat for `PATCH /v1/article/9999/unpublish` -> same assertions.
+13. `PATCH /v1/article/not-a-number/publish` with the valid cookie -> status `400`, body matching
+    `apperr.IdUint32ErrorMessage + "\n"`. Repeat for `.../unpublish`.
+14. `PATCH /v1/article/1/publish` with **no** cookie, repo seeded with article id 1 -> status `401`.
+    Repeat for `PATCH /v1/article/1/unpublish` with no cookie -> status `401`.
+15. Integration with the public listing: seed repo with an offline article id 2, call
+    `PATCH /v1/article/2/publish` with the valid cookie (assert `200`), then call
+    `GET /v1/article/` with no cookie and assert the decoded JSON array contains an element with
+    id `2`.
+16. Mirror check: seed repo with an online article id 1, call `PATCH /v1/article/1/unpublish` with
+    the valid cookie (assert `200`), then call `GET /v1/article/` with no cookie and assert the
+    decoded JSON array does not contain an element with id `1`.
+
+## Manual verification (not exercised by the Go test)
+- SPA-visible behaviour: confirm the back-office article editor exposes a publish/unpublish
+  control that calls the new endpoints and updates the visible online/offline state, against the
+  real embedded frontend and a real SQLite file. Not exercised by `task test`; requires `task dev`
+  or a built `task build` binary. (No such UI exists yet as of this slice — this note applies once
+  the SPA is wired to the new endpoints.)
+- No SMTP involvement.

features/article_title_rules.feature

@@ -0,0 +1,85 @@
+Feature: The article title rule is the same in the request and the domain
+
+  As the maintainer of RenewCMS
+  I want PostArticle's title validation and article.CreateArticle's title validation to
+  enforce the identical rule, counted the identical way
+  So that a title the request layer accepts can never be rejected by the domain as a
+  surprise 500, and a domain title rejection that does happen is always reported as a
+  400 with a client-facing apperr message instead of a raw 500
+
+  Background:
+    Given internal/domain/article defines the sentinel article.ErrInvalidTitle
+    And CreateArticleUseCase.CreateArticle rejects a title whose length, counted with
+      utf8.RuneCountInString (runes, not bytes), is below 3 or above 200, returning
+      article.ErrInvalidTitle and storing nothing
+    And api/handlers/article/articleHandler.go's PostArticle.Title carries
+      validate:"required,min=3,max=200", and go-playground/validator's min/max on a
+      string already count runes with utf8.RuneCountInString, so the request tag and the
+      domain check now agree on both the bound (3-200) and the unit (runes)
+    And api/pkg/apperr defines ArticleTitleErrorMessage as "Article title must be
+      between 3 and 200 characters.", a client-facing string distinct from both the raw
+      validator error text and "Failed to create article"
+    And Handler.PostArticle maps errors.Is(err, article.ErrInvalidTitle) from
+      CreateArticleUseCase.CreateArticle to a 400 response with body
+      apperr.ArticleTitleErrorMessage; any other error from CreateArticle still answers
+      500 with body "Failed to create article"
+    And POST /v1/article/ sits behind the jwtauth Verifier and Authenticator group and
+      requires a valid jwt cookie
+    And UpdateArticleUseCase exposes only UpdateBody, AddImage and UpdateIsOnline; no
+      route or use case updates an article's title after creation, so this feature only
+      concerns article creation
+
+  Scenario Outline: CreateArticle now measures title length in runes, not bytes
+    Given an empty article repository fake
+    When CreateArticle is called with a title made of <rune_count> repetitions of the
+      4-byte rune "😀" and a body "Some body text"
+    Then the result is <outcome>
+
+    Examples:
+      | rune_count | outcome                          |
+      | 2          | ErrInvalidTitle, nothing stored  |
+      | 3          | created                          |
+      | 200        | created                          |
+      | 201        | ErrInvalidTitle, nothing stored  |
+
+  Scenario Outline: POST /v1/article/ enforces the same 3-200 rune boundary over HTTP
+    Given a valid jwt cookie for a user with id 1
+    When the client sends POST /v1/article/ with that cookie, a title of <length> ASCII
+      characters and a body "Some body text"
+    Then the response status is <status>
+    And <storage_effect>
+
+    Examples:
+      | length | status | storage_effect          |
+      | 2      | 400    | not created             |
+      | 3      | 201    | created, is_online false |
+      | 200    | 201    | created, is_online false |
+      | 201    | 400    | not created              |
+
+  Scenario: A 200-rune multibyte title is accepted end to end over HTTP
+    Given a valid jwt cookie for a user with id 1
+    When the client sends POST /v1/article/ with that cookie, a title made of 200
+      repetitions of the 4-byte rune "😀" (200 runes, 800 bytes) and a body
+      "Some body text"
+    Then the response status is 201
+    And the response body is the created article's JSON with that title
+
+  Scenario: The handler maps a domain title rejection to 400, not 500
+    Given a valid jwt cookie for a user with id 1
+    And the article repository fake is configured so its next Create call returns
+      article.ErrInvalidTitle directly, standing in for any layer beneath the use
+      case's own check rejecting the title with that same sentinel
+    When the client sends POST /v1/article/ with that cookie, title "Valid Title" and
+      body "Some body text" (both already satisfying PostArticle's own validate tags)
+    Then the response status is 400
+    And the response body is the text apperr.ArticleTitleErrorMessage
+    And the response body is not "Failed to create article"
+
+  Scenario: A non-title repository failure during creation still answers 500
+    Given a valid jwt cookie for a user with id 1
+    And the article repository fake is configured to fail on its next Create call with
+      a generic repository error, not article.ErrInvalidTitle
+    When the client sends POST /v1/article/ with that cookie, title "Valid Title" and
+      body "Some body text"
+    Then the response status is 500
+    And the response body is the text "Failed to create article"

features/article_title_rules.qa.md

@@ -0,0 +1,76 @@
+# QA procedure: article_title_rules
+
+Package: `test` (black-box, alongside `article_test.go` / `use_case_baseline_test.go` /
+`not_found_errors_test.go` / the hasher-domain-interface tests).
+
+## Fakes needed
+1. Extend `mockArticleRepo` (`test/article_test.go`) / its shared `failSwitch`
+   (`test/fakes_common.go`) so a configured failure can return a specific error, not
+   only the generic `errRepositoryFailure`. Today `failSwitch.trigger` always returns
+   the same sentinel; add a way to say "the next call to `Create` returns
+   `article.ErrInvalidTitle`" specifically, distinct from "the next call to `Create`
+   returns a generic repository error" (e.g. a `failNextWith(method string, err error)`
+   on `failSwitch`, keeping `errRepositoryFailure` as the default so existing
+   generic-failure tests don't change).
+2. Add a `createCalled` flag (or equivalent) to `mockArticleRepo` if not already
+   present, so a test can assert `Create` was never reached when request-layer
+   validation rejects a title first.
+
+## Use-case-level checks (fake repo, no HTTP)
+3. `useCases.NewCreateArticleUseCase(repo)`, `CreateArticle(...)` with an empty fake
+   repo:
+   - Title `strings.Repeat("😀", 2)` (2 runes, 8 bytes) -> `errors.Is(err,
+     article.ErrInvalidTitle)`, nothing stored.
+   - Title `strings.Repeat("😀", 3)` (3 runes, 12 bytes) -> no error, created,
+     `is_online` false, one article stored.
+   - Title `strings.Repeat("😀", 200)` (200 runes, 800 bytes) -> no error, created.
+     Proves the check counts runes (`utf8.RuneCountInString`), not `len()` bytes.
+   - Title `strings.Repeat("😀", 201)` (201 runes, 804 bytes) -> `errors.Is(err,
+     article.ErrInvalidTitle)`, nothing stored.
+   - Keep the existing ASCII boundary cases in `TestCreateArticleTitleLengthLimit`
+     (0/2/3/200/201) passing unchanged, as a regression check that byte length and
+     rune length coincide for ASCII.
+
+## HTTP checks (real CreateArticleUseCase over the fake repo, mirroring api/router.go)
+4. Call `validator.InitValidator()`.
+5. Build `useCases.NewCreateArticleUseCase(fakeRepo)` plus `GetArticleUseCase`,
+   `ListArticlesUseCase`, `DeleteArticleUseCase` (real, over the same fake repo). Build
+   `article.NewHandler(create, get, list, delete)`. Mount its routes inside a group
+   wrapped by `jwtauth.Verifier(token)` + `jwtauth.Authenticator(token)` on a fresh
+   `chi.NewRouter()`, with a test `jwtauth.New("HS256", []byte("test-secret"), nil)`, as
+   in `api/router.go`.
+6. Mint a valid jwt cookie for user id 1 (`token.Encode(map[string]any{"user_id":
+   uint32(1)})`, set as the `jwt` cookie on each `httptest.NewRequest`).
+7. `POST /v1/article/` with a 2-ASCII-character title (`"ab"`) and a valid body ->
+   status `400`, `fakeRepo.createCalled` is false. Assert the body is neither
+   `apperr.ArticleTitleErrorMessage` nor `"Failed to create article"`, to keep the two
+   400 sources (request-layer vs. domain-layer) distinguishable in the test.
+8. `POST /v1/article/` with a 3-ASCII-character title -> status `201`, response body
+   decodes to the created article JSON, `is_online` false.
+9. `POST /v1/article/` with a 200-ASCII-character title (`strings.Repeat("a", 200)`) ->
+   status `201`, created.
+10. `POST /v1/article/` with a 201-ASCII-character title -> status `400`, `Create`
+    never called.
+11. `POST /v1/article/` with a title of 200 repetitions of "😀" (200 runes, 800 bytes)
+    and a valid body -> status `201`, created, response JSON's `title` equals the sent
+    title.
+12. Configure the fake repo (per step 1) so its next `Create` call returns
+    `article.ErrInvalidTitle` directly. `POST /v1/article/` with title "Valid Title"
+    and a valid body (both well inside 3-200 runes, so `validator.Validate.Struct`
+    passes and `CreateArticleUseCase`'s own check would also pass) -> status `400`,
+    body `apperr.ArticleTitleErrorMessage + "\n"`. This scenario is deliberately
+    artificial: with the rule aligned, no real HTTP input can make
+    `CreateArticleUseCase.CreateArticle`'s own check return `article.ErrInvalidTitle`
+    once `validator.Validate.Struct` has already accepted the same title, so the only
+    way to exercise `Handler.PostArticle`'s mapping branch today is to have the fake
+    repository hand back that sentinel directly, standing in for a future or
+    repository-level source of the same error.
+13. Configure the fake repo to fail on its next `Create` with the generic
+    `errRepositoryFailure` (existing `failNext("Create")`). `POST /v1/article/` with
+    title "Valid Title" and a valid body -> status `500`, body `"Failed to create
+    article\n"` -- regression proof a non-title failure still answers 500.
+14. `POST /v1/article/` with no jwt cookie -> status `401` (regression: the route is
+    still gated).
+
+## Manual verification (not exercised by the Go test)
+- None. This slice has no SPA-visible behaviour and no SMTP involvement.

features/cancel_pending_registration.feature

@@ -0,0 +1,112 @@
+Feature: A logged-in, unverified user cancels their pending registration
+
+  As the maintainer of RenewCMS
+  I want a logged-in user who has not yet verified their account to be able to delete that
+    account and clear their session in one call, while a user who is already verified cannot use
+    this route to delete their own account, and a token that carries no usable user_id is answered
+    with 401 instead of a panic
+  So that someone who registered by mistake, or changed their mind before verifying, can free their
+    username and email immediately (features/unverified_users_and_reregistration.feature), without
+    exposing a general self-delete for verified accounts
+
+  Background:
+    Given this slice adds DELETE /v1/auth/register, mounted in api/router.go inside the same
+      protected group NewAuthRouter already applies to POST /v1/auth/verify: jwtauth.Verifier then
+      jwtauth.Authenticator, so a request with no jwt cookie, an expired jwt, or a jwt with a bad
+      signature never reaches the handler and is answered 401 by jwtauth.Authenticator itself
+    And the handler extracts user_id from the already-verified token's claims using the same safe
+      pattern auth.Handler.Verify already established (features/account_verification.feature):
+      401 with apperr.UnauthorizedErrorMessage whenever the "user_id" claim is missing, is not a
+      number, or does not match any user in the repository, never a panic and never trusting the
+      raw claim value
+    And a new use case, CancelRegistrationUseCase (internal/infrastructure/useCases/CancelRegistration.go),
+      is injected into auth.Handler as CancelRegistrationUseCase; it depends only on user.Repository
+      and exposes CancelRegistration(userId uint32) error
+    And CancelRegistrationUseCase.CancelRegistration loads the user by id, returns the existing
+      sentinel user.ErrUserNotFound when no such user exists, refuses with a new sentinel
+      user.ErrAlreadyVerified when the loaded user's IsVerified is already true, and otherwise calls
+      user.Repository.Delete(userId), whose GORM implementation removes the row entirely rather than
+      soft-deleting it (features/unverified_users_and_reregistration.feature), so the same username
+      and email are immediately free for a new registration
+    And the handler maps user.ErrUserNotFound to 401 with apperr.UnauthorizedErrorMessage, the same
+      status and body Verify already uses for an unresolvable user_id, and maps
+      user.ErrAlreadyVerified to 403 with a new apperr.AlreadyVerifiedErrorMessage constant
+    And on success the handler clears the "jwt" cookie exactly the way auth.Handler.Logout already
+      does (Max-Age -1, empty value, Path "/") and responds 200 with {"message": "..."}
+    And on any error path the handler returns before touching the "jwt" cookie, so an unresolved or
+      already-verified request leaves the caller's existing session untouched
+
+  Scenario: An unverified user cancels their pending registration
+    Given a user repository containing user id 7, username "alice", email "alice@example.com",
+      is_verified false
+    And a valid jwt cookie for user id 7
+    When the client sends DELETE /v1/auth/register with that cookie
+    Then the response status is 200
+    And the response body is {"message": "..."}
+    And the response clears the "jwt" cookie
+    And the user repository no longer contains user id 7; Get(7) returns user.ErrUserNotFound
+
+  Scenario: Cancelling frees the username and email for a new registration
+    Given a user repository containing user id 7, username "alice", email "alice@example.com",
+      is_verified false
+    And a valid jwt cookie for user id 7
+    When the client sends DELETE /v1/auth/register with that cookie
+    Then the response status is 200
+    When the client sends POST /v1/auth/register with username "alice", password
+      "hunter2example12", email "alice@example.com"
+    Then the response status is 200
+    And a jwt cookie is set
+    And the newly created user's id is different from 7
+
+  Scenario: An already-verified user cannot cancel their account this way
+    Given a user repository containing user id 7, username "alice", email "alice@example.com",
+      is_verified true
+    And a valid jwt cookie for user id 7
+    When the client sends DELETE /v1/auth/register with that cookie
+    Then the response status is 403
+    And the response body is the new apperr.AlreadyVerifiedErrorMessage text
+    And the response does not clear the "jwt" cookie
+    And the user repository's record for id 7 is unchanged: is_verified true, the row still exists
+
+  Scenario Outline: A token without a valid user_id returns 401 instead of crashing
+    Given a user repository containing user id 7, username "alice", is_verified false
+    And <token description>
+    When the client sends DELETE /v1/auth/register with that cookie
+    Then the response status is 401
+    And the response body is the apperr.UnauthorizedErrorMessage text
+    And the handler does not panic
+    And the response does not clear the "jwt" cookie
+    And the user repository's record for id 7 still exists
+
+    Examples:
+      | token description                                                             |
+      | a validly signed jwt cookie whose claims carry no "user_id" key at all        |
+      | a validly signed jwt cookie whose "user_id" claim is the string "seven"       |
+      | a validly signed jwt cookie whose "user_id" claim is the number 999, which does not match any user |
+
+  Scenario: A request with no jwt cookie never reaches the handler
+    Given a user repository containing user id 7, username "alice", is_verified false
+    And no jwt cookie is sent
+    When the client sends DELETE /v1/auth/register without a cookie
+    Then the response status is 401
+    And the user repository's record for id 7 still exists
+
+  Scenario: The use case deletes an unverified user, independently of any handler
+    Given a user.Repository fake containing user id 3, is_verified false
+    And a CancelRegistrationUseCase built directly over that fake
+    When CancelRegistration is called with userId 3
+    Then the call returns nil
+    And the fake repository no longer contains user id 3
+
+  Scenario: The use case refuses to delete an already-verified user, independently of any handler
+    Given a user.Repository fake containing user id 3, is_verified true
+    And a CancelRegistrationUseCase built directly over that fake
+    When CancelRegistration is called with userId 3
+    Then the call returns user.ErrAlreadyVerified, asserted with errors.Is
+    And the fake repository still contains user id 3
+
+  Scenario: The use case reports an unknown user, independently of any handler
+    Given a user.Repository fake containing no user with id 42
+    And a CancelRegistrationUseCase built directly over that fake
+    When CancelRegistration is called with userId 42
+    Then the call returns user.ErrUserNotFound, asserted with errors.Is

features/cancel_pending_registration.qa.md

@@ -0,0 +1,76 @@
+# QA procedure: cancel_pending_registration
+
+Package: `test` (black-box), extending `test/user_test.go` (`mockUserRepo`) and following the
+router/handler wiring pattern already used in `test/account_verification_http_test.go`.
+
+## Test infrastructure reused, none new needed
+
+`mockUserRepo` already supports deleting an entry (used by the existing `DeleteUserUseCase` tests
+in `test/use_case_baseline_test.go`) and returning `user.ErrUserNotFound` from `Get` once a user is
+gone. No new mock methods are required; `CancelRegistrationUseCase` only calls `Get` and `Delete`,
+both of which `mockUserRepo` already implements.
+
+## Setup shared by every case
+
+1. Call `validator.InitValidator()` once.
+2. Use-case-level checks build `useCases.NewCancelRegistrationUseCase(repo)` where `repo` is a
+   `mockUserRepo` pre-populated directly via `repo.users[id] = user.User{...}`.
+3. HTTP-level checks wire `mockUserRepo`, `useCases.NewCancelRegistrationUseCase(repo)` and the
+   other existing use cases into `auth.NewHandler(...)` (extended with the new
+   `CancelRegistrationUseCase` parameter) with a test `jwtauth.New("HS256", []byte("test-secret"),
+   nil)`. Mount `DELETE /v1/auth/register` on a fresh `chi.NewRouter()` wrapped in
+   `jwtauth.Verifier(token)` then `jwtauth.Authenticator(token)`, mirroring the protected group
+   `api/router.go` adds inside `NewAuthRouter` (the same group `POST /v1/auth/verify` already sits
+   in). Mint jwt cookies with `token.Encode(map[string]any{"user_id": uint32(7)})` for the
+   valid-token cases.
+
+## Use-case-level checks (no HTTP)
+
+4. Repo has user id 3, `IsVerified: false`. Call `CancelRegistration(3)`. Assert `err == nil`.
+   Assert `repo.users` no longer has key 3 (or `repo.Get(3)` returns `user.ErrUserNotFound`).
+5. Repo has user id 3, `IsVerified: true`. Call `CancelRegistration(3)`. Assert
+   `errors.Is(err, user.ErrAlreadyVerified)`. Assert the repo still has user id 3 with
+   `IsVerified: true`.
+6. Repo has no user with id 42. Call `CancelRegistration(42)`. Assert
+   `errors.Is(err, user.ErrUserNotFound)`.
+
+## HTTP-level checks (fakes, per the shared setup above)
+
+7. Seed `mockUserRepo` with user id 7, username "alice", email "alice@example.com",
+   `IsVerified: false`. Mint a valid jwt cookie for user id 7. `DELETE /v1/auth/register` with that
+   cookie → assert status `200`, response body decodes to a JSON object with a `message` field,
+   the response has a `Set-Cookie` header for `jwt` with `MaxAge < 0` (or an `Expires` in the past)
+   and an empty `Value` (parse with `http.ParseSetCookie`, mirroring
+   `secureAttributeFromResponse` in `test/runtime_settings_injection_http_test.go`), and
+   `repo.Get(7)` now returns `user.ErrUserNotFound`.
+8. Re-registration after cancel: repeat case 7's cancel call on the same router/repo, then
+   `POST /v1/auth/register` with `{"username":"alice","password":"hunter2example12","email":"alice@example.com"}`
+   → assert status `200`, a `jwt` `Set-Cookie` header is present with a non-empty value, and the
+   newly created user's id (read back via `repo.GetByUsername("alice")` or the use case) is
+   different from `7`.
+9. Seed `mockUserRepo` with user id 7, username "alice", email "alice@example.com",
+   `IsVerified: true`. Mint a valid jwt cookie for user id 7. `DELETE /v1/auth/register` with that
+   cookie → assert status `403`, body exactly the `apperr.AlreadyVerifiedErrorMessage` constant,
+   no `Set-Cookie` header for `jwt` is present in the response, and `repo.Get(7)` still returns the
+   user with `IsVerified: true`.
+10. Table-driven over three "no valid user_id" cases, each against a fresh seed of user id 7,
+    `IsVerified: false`, and asserting status `401`, a response body equal to
+    `apperr.UnauthorizedErrorMessage`, no `jwt` `Set-Cookie` header in the response, and
+    `repo.Get(7)` still succeeding afterward:
+    - mint the jwt with `token.Encode(map[string]any{"role": "user"})` (no `user_id` key at all);
+    - mint the jwt with `token.Encode(map[string]any{"user_id": "seven"})` (string, not a number);
+    - mint the jwt with `token.Encode(map[string]any{"user_id": uint32(999)})` (well-formed but no
+      such user in the repo).
+11. A request with no `jwt` cookie at all against the same router → assert status `401` (produced
+    by `jwtauth.Authenticator` itself, before the handler runs); do not assert an exact body for
+    this case, and assert `repo.Get(7)` still succeeds afterward.
+
+## Manual verification (not exercised by the Go test)
+
+- The SPA-visible "cancel registration" affordance (wherever it is surfaced to a logged-in,
+  unverified user, e.g. on the pending-verification screen) actually calling
+  `DELETE /v1/auth/register` and redirecting to a logged-out state on success is out of scope for
+  this slice's automated test and should be checked by hand against a running dev build.
+- End-to-end confirmation against the real SQLite file that the row is physically gone (not just
+  hidden by a soft-delete) is already covered at the repository level by
+  `features/unverified_users_and_reregistration.feature` and is not re-verified here.

features/delete_article_cascades_images.feature

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1,67 @@
+# 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/edit_article_body.feature

@@ -0,0 +1,103 @@
+Feature: An authenticated user can edit an article's body
+
+  As an authenticated RenewCMS user managing the CMS
+  I want to change an existing article's body from an HTTP endpoint
+  So that a published or draft article's content can be corrected or updated without
+    deleting and recreating it
+
+  Background:
+    Given internal/domain/article.Repository already exposes
+      UpdateBody(id uint32, body string) (Article, error), and
+      UpdateArticleUseCase.UpdateBody delegates to it unchanged
+    And UpdateArticleUseCase is already built in api/dependecyInjection.go as
+      container.UpdateArticleUseCase, but before this slice no handler or route calls
+      UpdateBody
+    And this slice adds Handler.UpdateArticleBody, backed by
+      UpdateArticleUseCase.UpdateBody(id, body)
+    And this slice mounts PATCH /v1/article/{id} inside the same jwtauth Verifier +
+      Authenticator group as GET /v1/article/{id}, POST /v1/article/,
+      DELETE /v1/article/{id}, PATCH /v1/article/{id}/publish and
+      PATCH /v1/article/{id}/unpublish in api/router.go, so it also requires a valid
+      jwt cookie
+    And the request body is JSON {"body": "..."}, validated with
+      validate:"required,max=10000" on the Body field, the same tag PostArticle.Body
+      already carries
+    And a successful edit answers 200 with the JSON body of the updated article.Article,
+      the same shape GetArticle, PostArticle, PublishArticle and UnpublishArticle
+      already return; the article's title, is_online flag and images are unchanged
+    And an id that does not parse as a uint32 answers 400 with body
+      apperr.IdUint32ErrorMessage, the same as GetArticle, DeleteArticle,
+      PublishArticle and UnpublishArticle
+    And a body that is not valid JSON answers 400 with body apperr.BodyErrorMessage,
+      the same as PostArticle
+    And a body that fails its own required/max=10000 validation answers 400 with the
+      raw validator error text, the same as PostArticle already does for its own
+      fields; no new apperr message is introduced for this
+    And an id absent from the article repository answers 404 with body
+      apperr.ArticleNotFoundErrorMessage, backed by
+      errors.Is(err, article.ErrArticleNotFound), the same as DeleteArticle,
+      PublishArticle and UnpublishArticle already do per
+      features/write_not_found_errors.feature
+    And this slice does not add any way to change an article's title after creation,
+      per features/article_title_rules.feature
+
+  Scenario: Editing an existing article's body updates only the body
+    Given a valid jwt cookie for a user with id 1
+    And the article repository contains an online article titled
+      "Backyard Renovation Update" with id 1 and body "Old body text"
+    When the client sends PATCH /v1/article/1 with that cookie and body
+      {"body": "New body text"}
+    Then the response status is 200
+    And the response body is the article with id 1, "body": "New body text",
+      "title": "Backyard Renovation Update" and "is_online": true
+
+  Scenario: Editing an offline article's body leaves it offline
+    Given a valid jwt cookie for a user with id 1
+    And the article repository contains an offline article titled
+      "Draft: Kitchen Remodel" with id 2 and body "Draft notes"
+    When the client sends PATCH /v1/article/2 with that cookie and body
+      {"body": "Revised draft notes"}
+    Then the response status is 200
+    And the response body is the article with id 2, "body": "Revised draft notes"
+      and "is_online": false
+
+  Scenario: Editing an unknown article answers 404
+    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 PATCH /v1/article/9999 with that cookie and body
+      {"body": "New body text"}
+    Then the response status is 404
+    And the response body is the text "Article not found"
+
+  Scenario: A malformed id answers 400 before any repository call
+    Given a valid jwt cookie for a user with id 1
+    When the client sends PATCH /v1/article/not-a-number with that cookie and body
+      {"body": "New body text"}
+    Then the response status is 400
+    And the response body is the text apperr.IdUint32ErrorMessage
+
+  Scenario: A non-JSON request body answers 400 with the body error message
+    Given a valid jwt cookie for a user with id 1
+    And the article repository contains an article with id 1
+    When the client sends PATCH /v1/article/1 with that cookie and a body that is not
+      valid JSON
+    Then the response status is 400
+    And the response body is the text apperr.BodyErrorMessage
+
+  Scenario Outline: A body value that fails validation answers 400
+    Given a valid jwt cookie for a user with id 1
+    And the article repository contains an article with id 1
+    When the client sends PATCH /v1/article/1 with that cookie and body <payload>
+    Then the response status is 400
+
+    Examples:
+      | payload                              |
+      | {"body": ""}                         |
+      | {"body": "<10001-character string>"} |
+
+  Scenario: Editing an article requires authentication
+    Given no jwt cookie is sent
+    And the article repository contains an article with id 1
+    When the client sends PATCH /v1/article/1 without a cookie and body
+      {"body": "New body text"}
+    Then the response status is 401

features/edit_article_body.qa.md

@@ -0,0 +1,58 @@
+# QA procedure: edit_article_body
+
+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`) as-is; its `UpdateBody` already
+   supports everything this slice needs, no fake changes expected.
+3. Wire the real use cases over the fake: `useCases.NewCreateArticleUseCase`,
+   `useCases.NewGetArticleUseCase`, `useCases.NewListArticlesUseCase`,
+   `useCases.NewDeleteArticleUseCase`, `useCases.NewUpdateArticleUseCase`. Build
+   `article.NewHandler(...)` (existing signature, already takes the update use case),
+   exposing the new `UpdateArticleBody` method.
+4. Build a test `jwtauth.New("HS256", []byte("test-secret"), nil)`.
+5. Mount the routes on a fresh `chi.NewRouter()` mirroring `api/router.go`'s current
+   shape (per `article_publishing.qa.md`): `GET /` under `jwtauth.Verifier` only;
+   `GET /{id}`, `POST /`, `DELETE /{id}`, `PATCH /{id}/publish`,
+   `PATCH /{id}/unpublish` under `jwtauth.Verifier` + `jwtauth.Authenticator`. Add
+   `PATCH /{id}` to that same authenticated group.
+6. 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`.
+7. Seed the repo directly via the map pattern already used elsewhere, e.g.
+   `repo.articles[1] = article.Article{ID: 1, Title: "Backyard Renovation Update", Body: "Old body text", IsOnline: true}`
+   and `repo.articles[2] = article.Article{ID: 2, Title: "Draft: Kitchen Remodel", Body: "Draft notes", IsOnline: false}`.
+
+## HTTP checks
+8. `PATCH /v1/article/1` with the valid cookie and JSON body `{"body": "New body text"}`,
+   repo seeded per step 7 -> status `200`; decode the JSON response and assert
+   `id == 1`, `body == "New body text"`, `title == "Backyard Renovation Update"`,
+   `is_online == true`; assert `repo.articles[1].Body` is now `"New body text"` and
+   `repo.articles[1].Title`/`IsOnline` are unchanged.
+9. `PATCH /v1/article/2` with the valid cookie and JSON body
+   `{"body": "Revised draft notes"}`, repo seeded per step 7 -> status `200`; decode
+   the JSON response and assert `id == 2`, `body == "Revised draft notes"`,
+   `is_online == false`.
+10. `PATCH /v1/article/9999` with the valid cookie and a valid JSON body, empty repo
+    id `9999` -> status `404`, body `"Article not found\n"`.
+11. `PATCH /v1/article/not-a-number` with the valid cookie and a valid JSON body ->
+    status `400`, body matching `apperr.IdUint32ErrorMessage + "\n"`.
+12. `PATCH /v1/article/1` with the valid cookie and a malformed JSON body (e.g. raw
+    string `not-json`), repo seeded with article id 1 -> status `400`, body matching
+    `apperr.BodyErrorMessage + "\n"`.
+13. `PATCH /v1/article/1` with the valid cookie and JSON body `{"body": ""}`, repo
+    seeded with article id 1 -> status `400`; assert `repo.articles[1].Body` is
+    unchanged (nothing stored).
+14. `PATCH /v1/article/1` with the valid cookie and JSON body `{"body": "<10001-char
+    string>"}`, repo seeded with article id 1 -> status `400`; assert
+    `repo.articles[1].Body` is unchanged.
+15. `PATCH /v1/article/1` with **no** cookie, repo seeded with article id 1 -> status
+    `401`.
+
+## Manual verification (not exercised by the Go test)
+- SPA-visible behaviour: confirm the back-office article editor exposes a body-editing
+  control that calls `PATCH /v1/article/{id}` and reflects the updated body, against
+  the real embedded frontend and a real SQLite file. Not exercised by `task test`;
+  requires `task dev` or a built `task build` binary. (No such UI exists yet as of this
+  slice.)
+- No SMTP involvement.

features/get_current_user.feature

@@ -0,0 +1,89 @@
+Feature: A logged-in user fetches their own public profile without triggering the verified-account gate
+
+  As the maintainer of RenewCMS
+  I want the SPA to ask "who is currently logged in" via a single endpoint that answers from the
+    same jwt cookie every other protected route already trusts, distinguishes "no valid session"
+    from "a session for an unverified account" so it can route the user to a pending-verification
+    screen instead of guessing, and never competes with real login attempts for rate-limit headroom
+  So that the SPA can restore a session on load without going through the verification gate and
+    without being throttled like a login attempt
+
+  Background:
+    Given the existing PublicUser struct and newPublicUser(u user.User) converter in
+      api/handlers/auth/verificationHandler.go, exactly the JSON shape POST /v1/auth/verify already
+      returns: id, username, email, is_verified, created_at, updated_at
+    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
+      method is introduced
+    And GET /v1/auth/me is mounted in api/router.go's NewAuthRouter inside the same group that
+      already carries jwtauth.Verifier(container.Token), jwtauth.Authenticator(container.Token) and
+      middleware.RequireCurrentToken(container.GetUserUseCase) ahead of /verify and
+      DELETE /register, so:
+      - no jwt cookie, or a jwt with a bad signature, is refused with 401 by jwtauth.Authenticator
+        itself before the handler runs, the same as the other routes in that group
+        (features/stale_token_invalidation.feature)
+      - a well-formed but stale token (whose token_version claim no longer matches the stored user,
+        per features/stale_token_invalidation.feature) is refused with 401
+        apperr.UnauthorizedErrorMessage by RequireCurrentToken before the handler runs
+      - a token minted for a user id that no longer exists (a cancelled registration,
+        features/cancel_pending_registration.feature) is refused with the same 401
+        apperr.UnauthorizedErrorMessage by RequireCurrentToken, for the same reason
+    And unlike NewArticleRouter's protected group, this group does not add
+      middleware.RequireVerifiedUser, and unlike /login and /password-reset, it does not add
+      middleware.NewRateLimiter, so an unverified user reaches the handler, and the route has no
+      per-client attempt ceiling
+    And MeHandler.Me resolves user_id with claims.UserId(r) (401 apperr.UnauthorizedErrorMessage if
+      somehow absent or malformed, though RequireCurrentToken already guarantees a valid one before
+      this handler is reached), loads the user with GetUserUseCase.GetUser(userId) (401
+      apperr.UnauthorizedErrorMessage on user.ErrUserNotFound, 500 "Internal server error" on any
+      other error), sets the response header Cache-Control: no-store, and responds 200 with
+      newPublicUser(loadedUser) as JSON, whatever that user's is_verified value is
+
+  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
+    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
+
+  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
+    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
+
+  Scenario: No jwt cookie at all is refused
+    Given a user repository containing user id 7, username "alice", is_verified true, TokenVersion 0
+    When the client sends GET /v1/auth/me with no jwt cookie
+    Then the response status is 401
+
+  Scenario: A jwt whose token_version no longer matches the stored user is refused
+    Given a user repository containing user id 7, username "alice", is_verified true, TokenVersion 1
+    And a jwt cookie for user id 7 encoding token_version 0, minted before the version advanced
+    When the client sends GET /v1/auth/me with that cookie
+    Then the response status is 401
+    And the response body is the apperr.UnauthorizedErrorMessage text
+
+  Scenario: A jwt minted for a since-deleted account is refused
+    Given a user repository containing user id 7, username "alice", is_verified false, TokenVersion 0
+    And a valid jwt cookie for user id 7 encoding token_version 0
+    When the client sends DELETE /v1/auth/register with that cookie
+    Then the response status is 200
+    When the client sends GET /v1/auth/me with the same cookie
+    Then the response status is 401
+    And the response body is the apperr.UnauthorizedErrorMessage text
+
+  Scenario: The route is never rate-limited, unlike login and password reset
+    Given a user repository containing user id 7, username "alice", is_verified true, TokenVersion 0
+    And a valid jwt cookie for user id 7 encoding token_version 0
+    When the client sends GET /v1/auth/me 5 times in immediate succession
+    Then every response status is 200
+    And none of the responses is 429

features/get_current_user.qa.md

@@ -0,0 +1,64 @@
+# QA procedure: get_current_user
+
+Package: `test` (black-box), extending `test/user_test.go` (`mockUserRepo`) and following the router
+wiring pattern in `test/stale_token_invalidation_http_test.go`.
+
+## Test infrastructure additions needed first
+
+1. No new `mockUserRepo` methods are needed: `GetUser(id)` already exists and is already exercised
+   by other tests (e.g. `test/stale_token_invalidation_http_test.go`). `DELETE /v1/auth/register`
+   already deletes the row via `CancelRegistrationUseCase`, already used in
+   `test/cancel_pending_registration_http_test.go`.
+
+## Setup shared by every case
+
+2. Call `validator.InitValidator()` once.
+3. Build `getUserUseCase := useCases.NewGetUserUseCase(userRepo)`.
+4. Build `meHandler := auth.NewMeHandler(getUserUseCase)`.
+5. Also build `verificationHandler := auth.NewVerificationHandler(useCases.NewVerifyUserUseCase(userRepo,
+   hasher), useCases.NewCancelRegistrationUseCase(userRepo), true)` so the "deleted account" scenario
+   can call `DELETE /v1/auth/register` on the same router.
+6. Mount on a fresh `chi.NewRouter()`, mirroring `NewAuthRouter`'s protected group:
+   ```go
+   r.Route("/v1/auth", func(r chi.Router) {
+       r.Group(func(r chi.Router) {
+           r.Use(jwtauth.Verifier(token))
+           r.Use(jwtauth.Authenticator(token))
+           r.Use(middleware.RequireCurrentToken(getUserUseCase))
+           r.Get("/me", meHandler.Me)
+           r.Delete("/register", verificationHandler.CancelRegistration)
+       })
+   })
+   ```
+   with a test `token := jwtauth.New("HS256", []byte("test-secret"), nil)`. No live server.
+7. Mint jwt cookies with `token.Encode(map[string]any{"user_id": uint32(id), "token_version":
+   uint32(v)})`, the same convention as `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`.
+   `GET /v1/auth/me` → assert status `200`, `Cache-Control` header equals `"no-store"`, and the
+   decoded JSON body has `id: 7`, `username: "alice"`, `email: "alice@example.com"`,
+   `is_verified: true`.
+9. Seed user id 8, username "bob", email "bob@example.com", `IsVerified: false`,
+   `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.
+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).
+11. Seed user id 7 with `TokenVersion: 1`. Mint a cookie encoding `token_version: 0` (stale).
+    `GET /v1/auth/me` → assert status `401` and body exactly `apperr.UnauthorizedErrorMessage`.
+12. Seed user id 7, `IsVerified: false`, `TokenVersion: 0`. Mint a matching cookie.
+    `DELETE /v1/auth/register` with that cookie → assert status `200`. Then `GET /v1/auth/me` with
+    the same cookie → assert status `401` and body exactly `apperr.UnauthorizedErrorMessage`.
+13. Seed user id 7, `IsVerified: true`, `TokenVersion: 0`, matching cookie. Send
+    `GET /v1/auth/me` 5 times in a row on the same router/repo → assert every response is `200`
+    and none is `429`.
+
+## Manual verification (not exercised by the Go test)
+
+- The SPA actually calling `GET /v1/auth/me` on load/refresh to restore session state and route an
+  unverified user to the pending-verification screen (rather than guessing from stored client state)
+  is out of scope for this slice's automated test and should be checked by hand against a running
+  dev build.

features/hasher_domain_interface.feature

@@ -0,0 +1,92 @@
+Feature: Password and code hashing go through a domain Hasher interface
+
+  As the maintainer of RenewCMS
+  I want password and verification/reset-code hashing done by a domain hash.Hasher
+  interface, used only by use cases
+  So that internal/infrastructure/persistence/repositories/userRepository.go and
+    api/handlers/auth/authHandler.go stop calling bcrypt directly, and a use case can be
+    tested against a fake hasher instead of a real bcrypt cost factor
+
+  Background:
+    Given internal/domain/hash defines the interface Hasher with Hash(value string) (string, error)
+      and Compare(hashed string, value string) error
+    And internal/domain/user defines the sentinel user.ErrInvalidCredentials alongside the
+      existing user.ErrUserNotFound
+    And internal/infrastructure/hashing.BcryptHasher implements hash.Hasher and is asserted
+      with var _ hash.Hasher = &BcryptHasher{}
+    And api/dependecyInjection.go constructs one BcryptHasher and passes it to every use case
+      that hashes or compares a secret: CreateUserUseCase, AuthenticateUserUseCase,
+      VerifyUserUseCase, RequestPasswordResetUseCase and ResetPasswordUseCase
+    And UserRepository.Create, UpdatePassword and UpdatePasswordResetCode store the string
+      they are given verbatim and never call bcrypt
+    And the auth Handler no longer imports golang.org/x/crypto/bcrypt; Login calls
+      AuthenticateUserUseCase.Authenticate instead of comparing a hash itself
+
+  Scenario: Creating a user stores a hashed password and a hashed verification code
+    Given a fake hasher that hashes any value "x" to "hashed:x"
+    When CreateUserUseCase.CreateUser is called with username "alice", password
+      "s3cretPassw0rd" and email "alice@example.com"
+    Then the repository's Create is called with a user whose Password is "hashed:s3cretPassw0rd"
+    And that user's VerificationCode is "hashed:<the generated code>", not the raw code
+    And the User returned by the use case has VerificationCode equal to the raw generated
+      code, not the hash
+
+  Scenario: A hashing failure while creating a user persists nothing
+    Given a fake hasher whose Hash always returns an error
+    When CreateUserUseCase.CreateUser is called with username "alice", password
+      "s3cretPassw0rd" and email "alice@example.com"
+    Then the use case returns that error
+    And the repository's Create is never called
+
+  Scenario: Authenticating with the correct password returns the user
+    Given a user repository containing a user "alice" with stored password "hashed:hunter2example"
+    And a fake hasher whose Compare returns nil when given "hashed:hunter2example" and "hunter2example"
+    When AuthenticateUserUseCase.Authenticate is called with username "alice" and password
+      "hunter2example"
+    Then the result is that user, with no error
+
+  Scenario: Authenticating with the wrong password returns a domain sentinel error
+    Given a user repository containing a user "alice" with stored password "hashed:hunter2example"
+    And a fake hasher whose Compare returns an error for that password
+    When AuthenticateUserUseCase.Authenticate is called with username "alice" and password
+      "wrongpassword12"
+    Then the result is the error user.ErrInvalidCredentials
+    And errors.Is(err, user.ErrInvalidCredentials) is true
+
+  Scenario: Authenticating an unknown username never calls the hasher
+    Given a user repository with no user "bob"
+    When AuthenticateUserUseCase.Authenticate is called with username "bob" and password
+      "hunter2example"
+    Then the result is the error user.ErrUserNotFound
+    And the hasher's Compare is never called
+
+  Scenario Outline: Login over HTTP still can't distinguish a bad password from an unknown username
+    Given a user repository containing a user "alice" with stored password "hashed:hunter2example"
+    And a real BcryptHasher
+    When the client sends POST /v1/auth/login with username "<username>" and password "<password>"
+    Then the response status is 403
+    And the response body is the text apperr.LogsErrorMessage
+    And no jwt cookie is set
+
+    Examples:
+      | username | password        | case                    |
+      | alice    | wrongpassword12 | existing user, bad pass |
+      | bob      | hunter2example  | unknown username        |
+
+  Scenario: Registering a user stores the hashed password, never the plaintext
+    Given an empty user repository
+    And a real BcryptHasher
+    When the client sends POST /v1/auth/register with username "alice", password
+      "s3cretPassw0rd" and email "alice@example.com"
+    Then the response status is 200
+    And a jwt cookie is set
+    And the user repository's stored Password for "alice" is not "s3cretPassw0rd"
+    And BcryptHasher.Compare("<the stored value>", "s3cretPassw0rd") returns nil
+
+  Scenario: A hashing failure during registration surfaces as 500 and sets no cookie
+    Given an empty user repository
+    And a fake hasher whose Hash always returns an error
+    When the client sends POST /v1/auth/register with username "alice", password
+      "s3cretPassw0rd" and email "alice@example.com"
+    Then the response status is 500
+    And no jwt cookie is set

features/hasher_domain_interface.qa.md

@@ -0,0 +1,63 @@
+# QA procedure: hasher_domain_interface
+
+Package: `test` (black-box, alongside the existing `article_test.go` / `user_test.go` /
+`use_case_baseline_test.go` / `not_found_errors_test.go`).
+
+## Fakes needed
+1. A `fakeHasher` implementing `hash.Hasher`:
+   - `Hash(value string) (string, error)`: by default returns `"hashed:" + value, nil`;
+     configurable to return `("", someErr)` unconditionally.
+   - `Compare(hashed, value string) error`: by default returns `nil` when
+     `hashed == "hashed:"+value`, else a sentinel mismatch error; configurable to always
+     error, and to record whether it was called.
+2. Extend the existing `mockUserRepo` (from `test/user_test.go` /
+   `not_found_errors_test.go`) with call-recording flags already used elsewhere in the
+   package (`createCalled`, `updatePasswordCalled`, etc.) if not already present, so tests
+   can assert a hashing failure short-circuits before the repository is touched.
+
+## Use-case-level checks (fake hasher + fake repo, no HTTP)
+3. `useCases.NewCreateUserUseCase(fakeRepo, fakeHasher)`, `CreateUser(...)`: assert the
+   `User` argument the fake repo's `Create` receives has `Password == "hashed:s3cretPassw0rd"`
+   and a `VerificationCode` that starts with `"hashed:"`; assert the `User` returned by the
+   use case has a `VerificationCode` that does **not** start with `"hashed:"` (it is the raw
+   UUID, unchanged from current behaviour).
+4. Same use case with `fakeHasher` configured to always error on `Hash`: assert
+   `CreateUser` returns that error and `fakeRepo.Create` was never called.
+7. `useCases.NewAuthenticateUserUseCase(fakeRepo, fakeHasher)` (new use case): seed
+   `fakeRepo` with a user "alice" whose stored `Password` is `"hashed:hunter2example"`.
+   - `Authenticate("alice", "hunter2example")` with `fakeHasher.Compare` returning `nil` →
+     assert the returned user matches and `err` is `nil`.
+   - `Authenticate("alice", "wrongpassword12")` with `fakeHasher.Compare` returning an error
+     → assert `errors.Is(err, user.ErrInvalidCredentials)` is `true`.
+   - `Authenticate("bob", "hunter2example")` with no "bob" in the repo → assert
+     `errors.Is(err, user.ErrUserNotFound)` is `true` and `fakeHasher`'s `Compare` was never
+     invoked (record a `compareCalled` flag).
+
+## HTTP checks (real BcryptHasher, in-memory fake repo, mirroring api/router.go)
+8. Call `validator.InitValidator()`.
+9. Build `hashing.NewBcryptHasher()`, wire `useCases.NewCreateUserUseCase(fakeRepo,
+   bcryptHasher)` and `useCases.NewAuthenticateUserUseCase(fakeRepo, bcryptHasher)` (plus
+   the existing `GetUserUseCase` / `ListUsersUseCase` the auth handler still needs), build
+   `auth.NewHandler(token, get, list, create, authenticate)` (constructor signature grows by
+   the new use case) with a test `jwtauth.New("HS256", []byte("test-secret"), nil)`, mount
+   its routes unprotected on a fresh `chi.NewRouter()` as in `api/router.go`.
+10. Seed the fake user repo directly with a user "alice" whose `Password` field holds a real
+    `bcryptHasher.Hash("hunter2example")` result (not `bcrypt.GenerateFromPassword` called
+    from the test, so the test never imports bcrypt itself).
+11. `POST /v1/auth/login` with `{"username":"alice","password":"wrongpassword12"}` → assert
+    status `403`, body `apperr.LogsErrorMessage + "\n"`, no `Set-Cookie: jwt=...` header.
+12. `POST /v1/auth/login` with `{"username":"bob","password":"hunter2example"}` (no such
+    user) → assert identical status/body/no-cookie outcome to step 11 (regression, same as
+    `not_found_errors.qa.md` steps 13–14).
+13. `POST /v1/auth/register` with `{"username":"alice","password":"s3cretPassw0rd","email":"alice@example.com"}`
+    against an empty fake repo → assert status `200`, a `Set-Cookie: jwt=...` header is
+    present, and the `Password` the fake repo's `Create` received is neither empty nor equal
+    to `"s3cretPassw0rd"`; assert `bcryptHasher.Compare(storedPassword, "s3cretPassw0rd")`
+    returns `nil`.
+14. Rebuild the handler with a `fakeHasher` (from step 1) whose `Hash` always errors in
+    place of `bcryptHasher`, same empty fake repo. `POST /v1/auth/register` with the same
+    valid body → assert status `500`, no `Set-Cookie` header, and the fake repo's `Create`
+    was never called.
+
+## Manual verification (not exercised by the Go test)
+- None. This slice has no SPA-visible behaviour and no SMTP involvement.

features/image_upload_rules.feature

@@ -0,0 +1,65 @@
+Feature: Allowed image types and the size limit are a domain rule
+
+  As the maintainer of RenewCMS
+  I want the image content-type allow-list and the maximum upload size enforced by
+  CreateImageUseCase before it ever calls image.Repository.Create
+  So that persistence stops deciding what counts as a valid image, the rule lives in
+  internal/domain/image where it can be asserted with errors.Is, and no bytes are ever
+  written to UPLOAD_DIR or the database for a rejected upload
+
+  Background:
+    Given internal/domain/image defines the sentinel errors image.ErrImageTypeNotAllowed
+      and image.ErrImageTooLarge
+    And internal/domain/image defines the allowed content types image/png, image/jpeg,
+      image/webp and image/svg+xml, and a maximum size of 10485760 bytes (10 MiB)
+    And CreateImageUseCase.CreateImage checks input.ContentType against the allowed list
+      and input.Size against the maximum before calling imageRepository.Create, returning
+      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
+      behavior is observable only through CreateImageUseCase
+
+  Scenario Outline: CreateImage accepts every allowed content type within the size limit
+    Given an empty image repository fake
+    When CreateImage is called with content type <content_type> and a size of
+      10485760 bytes
+    Then the image repository's Create is called once
+    And the result is the created image, with no error
+
+    Examples:
+      | content_type  |
+      | image/png     |
+      | image/jpeg    |
+      | image/webp    |
+      | image/svg+xml |
+
+  Scenario: CreateImage rejects a disallowed content type before reaching the repository
+    Given an empty image repository fake
+    When CreateImage is called with content type "application/pdf" and a size of 1024 bytes
+    Then the result is image.ErrImageTypeNotAllowed, asserted with errors.Is
+    And the image repository's Create is never called
+
+  Scenario: CreateImage rejects a file that exceeds the size limit
+    Given an empty image repository fake
+    When CreateImage is called with content type "image/png" and a size of
+      10485761 bytes
+    Then the result is image.ErrImageTooLarge, asserted with errors.Is
+    And the image repository's Create is never called
+
+  Scenario: A file exactly at the size limit is accepted, one byte over is not
+    Given an empty image repository fake
+    When CreateImage is called with content type "image/png" and a size of
+      10485760 bytes
+    Then the image repository's Create is called once with no error
+    When CreateImage is called again with content type "image/png" and a size of
+      10485761 bytes
+    Then the result is image.ErrImageTooLarge, asserted with errors.Is
+    And the image repository's Create is still called exactly once in total
+
+  Scenario: A repository failure unrelated to type or size still propagates unchanged
+    Given an image repository fake configured to fail its next Create call with a
+      generic repository error
+    When CreateImage is called with content type "image/png" and a size of 1024 bytes
+    Then the image repository's Create is called once
+    And the result is that generic error, unchanged

features/login_and_password_reset_rate_limiting.feature

@@ -0,0 +1,95 @@
+Feature: Login and password-reset requests are rate-limited per client IP
+
+  As the maintainer of RenewCMS
+  I want POST /v1/auth/login and POST /v1/auth/password-reset to reject a client that sends too
+    many requests within a short window
+  So that these public routes gain brute-force / abuse protection, which today does not exist at
+    all
+
+  Background:
+    Given POST /v1/auth/login and POST /v1/auth/password-reset are both public, mounted directly
+      in NewAuthRouter outside the jwt-protected group
+    And a new chi middleware, RateLimiter (api/middleware/rateLimit.go), is layered only around
+      these two routes as an additional r.Group inside NewAuthRouter; /register, /logout,
+      /password-reset/confirm, /verify and the delete-register route are all unaffected
+    And the client is identified by request IP: chi's own RealIP middleware
+      (github.com/go-chi/chi/v5/middleware) runs first and rewrites r.RemoteAddr from
+      X-Forwarded-For/X-Real-IP when present (matching the nginx reverse proxy setup in
+      docs/deployment.md that already sets X-Forwarded-For), falling back to the raw RemoteAddr
+      otherwise; RateLimiter keys its counters on r.RemoteAddr
+    And RateLimiter(maxAttempts int, window time.Duration) func(http.Handler) http.Handler keeps
+      an in-memory, mutex-guarded fixed-window counter per (route, client IP) pair: the first
+      request from a client opens a window starting now; each subsequent request from the same
+      client within window of that start increments the count; once the count exceeds
+      maxAttempts within the window, every further request from that client is rejected until the
+      window elapses, at which point the next request starts a fresh window
+    And every request to a rate-limited route counts toward its limit, whether the login
+      credentials or the reset email turn out to be valid or not
+    And a rejected request never reaches the auth handler or any use case: no
+      AuthenticateUserUseCase or RequestPasswordResetUseCase call happens, no jwt cookie is set or
+      cleared, and no email is sent
+    And a rejected request receives 429, body apperr.TooManyRequestsErrorMessage ("Too many
+      requests. Please try again later."), and a Retry-After header set to the number of whole
+      seconds remaining until the client's current window elapses
+    And /login and /password-reset are rate-limited independently: exhausting one client's login
+      limit does not affect that same client's ability to call /password-reset, and vice versa
+    And two different client IPs are tracked independently on the same route
+    And this slice adds two new environment variables, both given defaults in
+      cmd/server/main.go's envDefaults (not requiredEnvVars, so existing deployments keep working
+      unchanged): AUTH_RATE_LIMIT_MAX_ATTEMPTS (default "5") and AUTH_RATE_LIMIT_WINDOW_SECONDS
+      (default "60"), read by config.NewSettingsFromEnv into a new config.Settings.AuthRateLimit
+      field (MaxAttempts int, Window time.Duration), documented in .env.example and
+      docs/configuration.md; the same MaxAttempts/Window pair configures both the /login and the
+      /password-reset limiter (two independent counters, one shared configuration)
+    And this is a transport-level protection with no domain or use-case involvement: RateLimiter
+      never imports internal/domain, internal/infrastructure/useCases, persistence or mailer
+
+  Scenario: A client under the limit behaves exactly as before
+    Given AUTH_RATE_LIMIT_MAX_ATTEMPTS is 3 for a window covering the whole test
+    And the user repository contains a user "alice" with a correct password
+    When the client at IP "203.0.113.5" sends POST /v1/auth/login with alice's correct
+      credentials 3 times in a row
+    Then all three responses have status 200 and a jwt cookie is set each time
+
+  Scenario: The request beyond the limit is rejected
+    Given the same setup as above, with 3 requests already sent from "203.0.113.5"
+    When the client at IP "203.0.113.5" sends a 4th POST /v1/auth/login within the window
+    Then the response status is 429
+    And the response body is exactly apperr.TooManyRequestsErrorMessage
+    And the response has a Retry-After header
+    And AuthenticateUserUseCase was not invoked for this 4th request
+
+  Scenario: Failed attempts count toward the same limit as successful ones
+    Given AUTH_RATE_LIMIT_MAX_ATTEMPTS is 3
+    When the client at IP "203.0.113.7" sends 3 POST /v1/auth/login requests with a wrong
+      password, each answered 403
+    And then sends a 4th POST /v1/auth/login with the correct password
+    Then the 4th response is 429, not 200 — correct credentials do not bypass the limit
+
+  Scenario: password-reset requests are limited independently from login
+    Given AUTH_RATE_LIMIT_MAX_ATTEMPTS is 2
+    When the client at IP "203.0.113.9" sends 2 POST /v1/auth/password-reset requests
+    And then sends a 3rd POST /v1/auth/password-reset
+    Then the 3rd response is 429 and no email was sent for it
+    But that same client's POST /v1/auth/login requests are still counted against a separate,
+      unexhausted limit
+
+  Scenario: Different clients are tracked independently
+    Given AUTH_RATE_LIMIT_MAX_ATTEMPTS is 1
+    When client IP "203.0.113.10" sends one POST /v1/auth/login, consuming its own limit
+    And client IP "203.0.113.11" then sends one POST /v1/auth/login
+    Then the second client's request is not rejected by rate limiting
+
+  Scenario: The window resets once it elapses
+    Given AUTH_RATE_LIMIT_MAX_ATTEMPTS is 1 and a short AUTH_RATE_LIMIT_WINDOW_SECONDS the test
+      can wait out
+    When client IP "203.0.113.12" sends one POST /v1/auth/login, consuming its limit
+    And an immediate second request from the same IP is rejected with 429
+    And the test waits until the window has elapsed
+    And the same client sends another POST /v1/auth/login
+    Then that request is not rejected by rate limiting
+
+  Scenario: Routes outside this slice's scope are never rate-limited
+    Given AUTH_RATE_LIMIT_MAX_ATTEMPTS is 1
+    When the client sends 5 POST /v1/auth/register requests in a row
+    Then none of them is rejected with 429 on account of rate limiting

features/login_and_password_reset_rate_limiting.qa.md

@@ -0,0 +1,69 @@
+# QA procedure: login_and_password_reset_rate_limiting
+
+Package: `test` (black-box), extending `test/user_test.go` (`mockUserRepo`, `stubHasher`) and
+`test/mail_test.go` (`mockMailRepo`).
+
+## Test infrastructure additions needed first
+
+1. Implement `api/middleware.NewRateLimiter(maxAttempts int, window time.Duration) func(http.Handler) http.Handler`
+   as an in-memory, mutex-guarded fixed-window counter keyed on `r.RemoteAddr`. Each middleware
+   instance is independent, so wrapping `/login` and `/password-reset` with two separate
+   `NewRateLimiter(...)` calls in `NewAuthRouter` gives them independent counters even with the
+   same `maxAttempts`/`window` values.
+2. In tests, set `req.RemoteAddr = "203.0.113.5:12345"` (host:port, matching real request shape)
+   per simulated client before calling the router, instead of relying on `chi/middleware.RealIP`
+   (that middleware itself needs no test-specific double, since the middleware under test reads
+   `r.RemoteAddr` directly after RealIP would have run in production).
+
+## Setup shared by every case
+
+3. Call `validator.InitValidator()` once.
+4. Build `mockUserRepo`, `mockMailRepo`, `stubHasher`, and the full `useCases` set exactly as the
+   other auth QA procedures do, then `auth.NewHandler(...)`.
+5. Mount a fresh `chi.NewRouter()` mirroring `NewAuthRouter`: `/register`, `/logout`,
+   `/password-reset/confirm`, `/verify` (behind a test `jwtauth.Verifier`+`Authenticator`) wired
+   unprotected/protected exactly as today, plus `/login` wrapped in
+   `middleware.NewRateLimiter(maxAttempts, window)` and `/password-reset` wrapped in its own
+   separate `middleware.NewRateLimiter(maxAttempts, window)` instance. Use small, fast values per
+   scenario (e.g. `maxAttempts=3`, `window=time.Hour` for cases that must not expire mid-test;
+   `maxAttempts=1`, `window=50*time.Millisecond` for the window-reset case, with a
+   `time.Sleep(60*time.Millisecond)` before the final request).
+6. Seed `mockUserRepo` with user "alice", a correct password hash (`stubHasher` convention
+   `"hashed:"+password`), where a scenario needs a valid login.
+
+## HTTP-level checks
+
+7. `maxAttempts=3`, window covering the whole test. From `RemoteAddr "203.0.113.5:1"`, send 3
+   `POST /v1/auth/login` with alice's correct credentials. Assert all three responses are `200`
+   with a `Set-Cookie: jwt=...` header.
+8. Continuing from step 7's state, send a 4th request from the same `RemoteAddr`. Assert status
+   `429`, body byte-for-byte equal to `apperr.TooManyRequestsErrorMessage`, a `Retry-After` header
+   present, and no `Set-Cookie` header (the handler/use case never ran).
+9. Fresh router/state, `maxAttempts=3`. From one `RemoteAddr`, send 3 `POST /v1/auth/login` with a
+   wrong password (assert each is `403`), then a 4th with the correct password. Assert the 4th is
+   `429`, not `200`.
+10. Fresh router/state, `maxAttempts=2`. From one `RemoteAddr`, send 2 `POST /v1/auth/password-reset`
+    with a seeded email (assert both `200`, `mockMailRepo.SentEmails` grows by one each time), then
+    a 3rd. Assert the 3rd is `429` and `mockMailRepo.SentEmails` length is unchanged from after the
+    2nd call. Then, from the same `RemoteAddr`, send a `POST /v1/auth/login` and assert it is not
+    `429` (its own counter is untouched by the password-reset limiter).
+11. Fresh router/state, `maxAttempts=1`. Send one `POST /v1/auth/login` from `RemoteAddr A`,
+    assert `200`ish (not rate-limited). Send one `POST /v1/auth/login` from a different
+    `RemoteAddr B`. Assert it is also not `429`.
+12. Fresh router/state, `maxAttempts=1`, `window=50*time.Millisecond`. From one `RemoteAddr`, send
+    a first `POST /v1/auth/login` (not `429`), immediately a second (assert `429`), then
+    `time.Sleep(60 * time.Millisecond)`, then a third. Assert the third is not `429`.
+13. Fresh router/state, `maxAttempts=1` on both limiters. From one `RemoteAddr`, send 5
+    `POST /v1/auth/register` requests in a row (each with a syntactically valid but distinct body
+    so validation doesn't confound the assertion). Assert none of them is `429`.
+
+## Manual verification (not exercised by the Go test)
+
+- Real behaviour behind the documented nginx reverse proxy (`docs/deployment.md`) — that
+  `X-Forwarded-For` is actually set and trusted, and that clients behind it are rate-limited
+  individually rather than collapsed onto the proxy's own address — is not exercised by an
+  in-process `httptest` router and should be checked by hand against a real reverse-proxy
+  deployment.
+- Sustained load / memory growth of the in-memory per-IP counter map (whether stale entries are
+  ever evicted) is not covered by this QA procedure and should be reviewed separately if this
+  becomes a concern in production.

features/not_found_errors.feature

@@ -0,0 +1,80 @@
+Feature: Domain not-found errors instead of raw GORM errors
+
+  As the maintainer of RenewCMS
+  I want a missing article or user reported as a domain not-found error
+  So that the API answers 404 for it instead of leaking a raw GORM error as a 500, and so that
+    a caller can rely on errors.Is(err, article.ErrArticleNotFound) or errors.Is(err, user.ErrUserNotFound)
+
+  Background:
+    Given internal/domain/article defines the sentinel article.ErrArticleNotFound
+    And internal/domain/user defines the sentinel user.ErrUserNotFound
+    And ArticleRepository.Get and ArticleRepository.GetByName return article.ErrArticleNotFound, not gorm.ErrRecordNotFound, when no row matches
+    And UserRepository.Get, UserRepository.GetByUsername and UserRepository.GetByEmail return user.ErrUserNotFound, not gorm.ErrRecordNotFound, when no row matches
+    And GET /v1/article/{id} sits behind the jwtauth Verifier and Authenticator group, and requires a valid jwt cookie
+    And a later slice, features/public_article_read.feature, moves GET /v1/article/{id} into the
+      Verifier-only group and makes it return an offline article to a verified caller instead of
+      404, mirroring the listing endpoint's visibility rule; the two scenarios below that depended
+      on the older, stricter rule are updated accordingly
+
+  Scenario Outline: The article repository reports a missing article as a domain error
+    Given a repository backed by an in-memory SQLite database containing an article titled "Backyard Renovation Update" with id 1
+    When <method> is called with <input>
+    Then the result is the error article.ErrArticleNotFound
+    And errors.Is(err, gorm.ErrRecordNotFound) is false
+
+    Examples:
+      | method    | input            |
+      | Get       | id 9             |
+      | GetByName | "Unknown Title"  |
+
+  Scenario Outline: The user repository reports a missing user as a domain error
+    Given a repository backed by an in-memory SQLite database containing a user with id 1, username "alice" and email "alice@example.com"
+    When <method> is called with <input>
+    Then the result is the error user.ErrUserNotFound
+    And errors.Is(err, gorm.ErrRecordNotFound) is false
+
+    Examples:
+      | method        | input                |
+      | Get           | id 9                 |
+      | GetByUsername | "bob"                |
+      | GetByEmail    | "bob@example.com"    |
+
+  Scenario: Fetching a nonexistent article answers 404, not 500
+    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 GET /v1/article/9999 with that cookie
+    Then the response status is 404
+    And the response body is the text "Article not found"
+
+  Scenario: Fetching an offline article as an anonymous or unverified caller still answers 404 with the same message
+    Given no jwt cookie is sent
+    And the article repository contains an article with id 2, is_online false
+    When the client sends GET /v1/article/2 without a cookie
+    Then the response status is 404
+    And the response body is the text "Article not found"
+
+  Scenario: Fetching an online article still answers 200
+    Given a valid jwt cookie for a user with id 1
+    And the article repository contains an article with id 1, is_online true
+    When the client sends GET /v1/article/1 with that cookie
+    Then the response status is 200
+    And the response body is the article's JSON representation
+
+  Scenario: An unknown article id answers 404 even without authentication
+    Given no jwt cookie is sent
+    And the article repository has no article with id 9999
+    When the client sends GET /v1/article/9999 without a cookie
+    Then the response status is 404
+    And the response body is the text "Article not found"
+
+  Scenario Outline: Login never reveals whether the username exists
+    Given a user repository containing a user "alice" with password "hunter2example"
+    When the client sends POST /v1/auth/login with username "<username>" and password "<password>"
+    Then the response status is 403
+    And the response body is the text apperr.LogsErrorMessage
+    And no jwt cookie is set
+
+    Examples:
+      | username | password        | case                    |
+      | alice    | wrongpassword12 | existing user, bad pass |
+      | bob      | hunter2example  | unknown username        |

features/not_found_errors.qa.md

@@ -0,0 +1,26 @@
+# QA procedure: not_found_errors
+
+Package: `test` (black-box, alongside the existing `article_test.go` / `user_test.go` / `use_case_baseline_test.go`).
+
+## Setup shared by every case
+1. Call `validator.InitValidator()` once.
+2. Build in-memory fakes for `article.Repository` and `user.Repository` (extend the existing `mockArticleRepo` / `mockUserRepo` patterns in `test/`), updated so that a lookup by an unknown id/name/username/email now returns `article.ErrArticleNotFound` / `user.ErrUserNotFound` instead of `gorm.ErrRecordNotFound` — mirroring the fixed real repositories.
+3. Wire the real use cases (`useCases.NewGetArticleUseCase`, `useCases.NewCreateArticleUseCase` if needed, `useCases.NewGetUserUseCase`, `useCases.NewListUsersUseCase`, `useCases.NewCreateUserUseCase`) over those fakes.
+4. Build `article.NewHandler(...)` and `auth.NewHandler(...)` from those use cases plus a test `jwtauth.New("HS256", []byte("test-secret"), nil)`.
+5. Mount a fresh `chi.NewRouter()` mirroring `api/router.go`: the article handler's routes inside a group wrapped by `jwtauth.Verifier(token)` + `jwtauth.Authenticator(token)`, the auth handler's routes unprotected. No live server.
+
+## Repository-level checks (real persistence repositories, in-memory SQLite, no HTTP)
+6. Open a `gorm.DB` with `sqlite.Open("file:" + t.Name() + "?mode=memory&cache=shared")` (one named in-memory DB per test, so tests never share rows) (the project's `github.com/glebarez/sqlite` driver, never the real `DB_FILE`), and `db.AutoMigrate(&models.Article{})`. Construct a real `persistence.NewArticleRepository(db)`, seed it with an article id 1 via `Create`. Call `Get(9)` directly; assert `errors.Is(err, article.ErrArticleNotFound)` is true and `errors.Is(err, gorm.ErrRecordNotFound)` is false. Repeat for `GetByName("Unknown Title")`. Close the in-memory DB (or let it drop) at the end of the test.
+7. Open a second `gorm.DB` the same way with `db.AutoMigrate(&models.User{})`. Construct a real `persistence.NewUserRepository(db)`, seed it with a user id 1 / username "alice" / email "alice@example.com" via `Create`. Call `Get(9)`, `GetByUsername("bob")`, `GetByEmail("bob@example.com")` directly; assert each returns `user.ErrUserNotFound` and not `gorm.ErrRecordNotFound`.
+
+## HTTP checks (fakes, per the shared setup above)
+8. Mint a valid jwt cookie for user id 1 with the test `jwtauth.JWTAuth` (encode with `token.Encode(map[string]any{"user_id": uint32(1)})` and set it as the `jwt` cookie on the `httptest.NewRequest`).
+9. `GET /v1/article/9999` with that cookie, empty repo id 9999 → assert status `404`, body `"Article not found\n"` (http.Error appends a trailing newline).
+10. `GET /v1/article/2` with that cookie, repo seeded with an offline article id 2 → assert status `404`, body `"Article not found\n"` (regression: unchanged from before this fix).
+11. `GET /v1/article/1` with that cookie, repo seeded with an online article id 1 → assert status `200`, body decodes to the article JSON with id 1.
+12. `GET /v1/article/9999` with **no** cookie → assert status `401` (regression: jwtauth still gates the route).
+13. `POST /v1/auth/login` with `{"username":"alice","password":"wrongpassword12"}` (repo seeded with user "alice"/bcrypt-hashed "hunter2example") → assert status `403`, body equals `apperr.LogsErrorMessage + "\n"`, no `Set-Cookie: jwt=...` header present.
+14. `POST /v1/auth/login` with `{"username":"bob","password":"hunter2example"}` (no such user in the repo) → assert status `403`, **identical** body to step 13, no `Set-Cookie` header — proves the domain-error change didn't turn this into a distinguishable 404/500 and didn't start leaking existence.
+
+## Manual verification (not exercised by the Go test)
+- None. This slice has no SPA-visible behavior and no SMTP involvement; the SPA's article-detail view already treats any non-2xx as "not found" generically (verify only if the SPA has an article-detail page — otherwise skip).

features/public_article_listing.feature

@@ -0,0 +1,66 @@
+Feature: Public and authenticated article listing
+
+  As a visitor of the public site and as an authenticated RenewCMS user
+  I want GET /v1/article/ to return every online article to anyone,
+    and every article, including offline ones, to a caller with a valid jwt cookie
+  So that the public site never displays a draft, while an authenticated user managing
+    the CMS can see and act on articles that are not published yet
+
+  Background:
+    Given internal/domain/article.Article has a json "is_online" field
+    And ListArticlesUseCase.ListOnlineArticles filters article.Filters{IsOnline: true} and
+      ListArticlesUseCase.ListAllArticles applies no filter, both already implemented
+    And before this slice, GET /v1/article/ sits inside the jwtauth Verifier + Authenticator group
+      in api/router.go along with GET /v1/article/{id}, POST /v1/article/ and DELETE /v1/article/{id},
+      so an anonymous request to any of them answers 401, not an online-only list
+    And this slice moves GET /v1/article/ under jwtauth.Verifier only, so a missing or invalid jwt
+      cookie no longer blocks the request; POST /v1/article/ and DELETE /v1/article/{id} keep
+      requiring jwtauth.Verifier + Authenticator, unchanged
+    And a later slice, features/public_article_read.feature, moves GET /v1/article/{id} into the
+      same Verifier-only group as GET /v1/article/, so the 401 Examples table below is updated
+      accordingly
+    And Handler.ListArticles decides between ListAllArticles and ListOnlineArticles by checking the
+      request for a valid jwt, read with jwtauth.FromContext from the token the router-level
+      jwtauth.Verifier (header and cookie sources) placed in the request context, rather than
+      requiring the router-level Authenticator middleware; article.NewHandler takes no token
+    And the response body is the JSON array article.Article marshals to, each element carrying its
+      own "is_online" value
+
+  Scenario: An anonymous visitor only sees online articles
+    Given the article repository contains an online article titled "Backyard Renovation Update" with id 1
+    And the same repository contains an offline article titled "Draft: Kitchen Remodel" with id 2
+    When the client sends GET /v1/article/ with no jwt cookie
+    Then the response status is 200
+    And the response body is a JSON array containing exactly the article with id 1
+    And the article with id 2 is absent from the response body
+
+  Scenario: An authenticated user sees every article, online and offline
+    Given a valid jwt cookie for a user with id 1
+    And the article repository contains an online article titled "Backyard Renovation Update" with id 1
+    And the same repository contains an offline article titled "Draft: Kitchen Remodel" with id 2
+    When the client sends GET /v1/article/ with that cookie
+    Then the response status is 200
+    And the response body is a JSON array containing both the article with id 1 and the article with id 2
+
+  Scenario: A malformed or expired jwt cookie falls back to the public online-only list
+    Given a jwt cookie whose value is not a token issued by JWT_SECRET
+    And the article repository contains an online article with id 1 and an offline article with id 2
+    When the client sends GET /v1/article/ with that cookie
+    Then the response status is 200
+    And the response body is a JSON array containing exactly the article with id 1
+
+  Scenario Outline: The rest of the article routes still require authentication
+    Given no jwt cookie is sent
+    When the client sends <method> <path>
+    Then the response status is 401
+
+    Examples:
+      | method | path                |
+      | POST   | /v1/article/        |
+      | DELETE | /v1/article/1       |
+
+  Scenario: A repository failure still answers 500 regardless of auth state
+    Given the article repository fails on its next call to FindByFilters
+    When the client sends GET /v1/article/ with no jwt cookie
+    Then the response status is 500
+    And the response body is the text "Failed to retrieve articles"

features/public_article_listing.qa.md

@@ -0,0 +1,54 @@
+# QA procedure: public_article_listing
+
+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`) as-is; `FindByFilters` and the `failSwitch`
+   already support everything this slice needs, no fake changes expected.
+3. Wire the real use cases over the fake: `useCases.NewCreateArticleUseCase`,
+   `useCases.NewGetArticleUseCase`, `useCases.NewListArticlesUseCase`,
+   `useCases.NewDeleteArticleUseCase`. Build `article.NewHandler(create, get, list, delete)`.
+4. Build a test `jwtauth.New("HS256", []byte("test-secret"), nil)`.
+5. Mount the routes on a fresh `chi.NewRouter()` mirroring the new `api/router.go` shape:
+   - `r.Route("/article", func(r chi.Router) { ... })`
+   - `r.Use(jwtauth.Verifier(token))` on the whole `/article` group (parses, never rejects)
+   - `r.Get("/", articleHandler.ListArticles)` directly under that Verifier-only group
+   - a nested `r.Group` adding `jwtauth.Authenticator(token)`, containing
+     `r.Get("/{id}", articleHandler.GetArticle)`, `r.Post("/", articleHandler.PostArticle)`,
+     `r.Delete("/{id}", articleHandler.DeleteArticle)`
+   No live server.
+6. 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`.
+7. Seed the repo for the listing cases via `repo.articles[1] = article.Article{ID: 1, Title:
+   "Backyard Renovation Update", IsOnline: true}` and `repo.articles[2] = article.Article{ID: 2,
+   Title: "Draft: Kitchen Remodel", IsOnline: false}` (same direct-map pattern as
+   `TestGetOnlineArticle`).
+
+## HTTP checks
+8. `GET /v1/article/` with no cookie, repo seeded per step 7 -> status `200`; decode the JSON array
+   and assert it has exactly one element, id `1`; assert no element has id `2`.
+9. `GET /v1/article/` with the valid cookie from step 6, same seed -> status `200`; decode the JSON
+   array and assert it has exactly two elements, ids `1` and `2` both present.
+10. `GET /v1/article/` with a cookie named `jwt` whose value is an arbitrary non-token string (e.g.
+    `"not-a-real-token"`), same seed -> status `200`; assert the same single-element (id `1`) result
+    as step 8, proving an invalid cookie falls back to the public list rather than erroring.
+11. `GET /v1/article/1` with no cookie -> status `401` (regression: single-article read still gated).
+12. `POST /v1/article/` with no cookie, JSON body `{"title":"Valid Title","body":"Some content"}` ->
+    status `401` (regression: create still gated).
+13. `DELETE /v1/article/1` with no cookie -> status `401` (regression: delete still gated).
+14. Configure the fake repo's `failSwitch` so the next `FindByFilters` call returns
+    `errRepositoryFailure` (existing `failNext("FindByFilters")` helper). `GET /v1/article/` with no
+    cookie -> status `500`, body `"Failed to retrieve articles\n"`.
+15. As a regression on the valid-cookie path from step 9, also assert `GET /v1/article/{id}` and
+    `POST`/`DELETE` still succeed as before with a valid cookie (existing coverage in
+    `article_test.go` / `article_title_rules_test.go` / `write_not_found_errors_test.go` already
+    covers this; no new assertions needed here beyond confirming the router restructuring didn't
+    regress them -- rerun those suites as part of `task test`).
+
+## Manual verification (not exercised by the Go test)
+- SPA-visible behaviour: confirm the public front-office article list view (unauthenticated) only
+  renders online articles, and the authenticated back-office article list view renders offline
+  drafts too, against the real embedded frontend and a real SQLite file. Not exercised by `task
+  test`; requires `task dev` or a built `task build` binary.
+- No SMTP involvement.

features/public_article_read.feature

@@ -0,0 +1,132 @@
+Feature: Single article read follows the same online/offline visibility rule as the list
+
+  As a visitor of the public site and as an authenticated RenewCMS user
+  I want GET /v1/article/{id} to return an online article to anyone, and an offline article
+    only to a caller resolved as verified, with an unknown id and a hidden offline id
+    answering the exact same 404
+  So that the public site can read a single published article through the API, and a verified
+    user can open their own unpublished draft to edit it, while a draft never leaks its existence
+    to anyone else
+
+  Background:
+    Given internal/domain/article.Article has a json "is_online" field and the sentinel
+      article.ErrArticleNotFound
+    And GetArticleUseCase.GetArticle(id) returns the article regardless of is_online, and
+      GetArticleUseCase.GetOnlineArticle(id) returns article.ErrArticleNotFound when the article
+      exists but is offline, both already implemented and unchanged by this slice
+    And before this slice, GET /v1/article/{id} sits inside the jwtauth Verifier + Authenticator +
+      middleware.RequireVerifiedUser group in api/router.go, so a missing jwt cookie answers 401, an
+      authenticated-but-unverified caller answers 403, and even a verified caller always resolves
+      through GetOnlineArticle, so an offline article answers 404 no matter who asks
+      (features/not_found_errors.feature, features/verified_account_required.feature)
+    And this slice moves GET /v1/article/{id} out of that group and into the jwtauth.Verifier-only
+      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
+      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
+      GetUseCase.GetArticle(id); otherwise (no jwt, malformed jwt, unresolvable user_id, a deleted
+      account, or an account that exists but is not yet verified) it calls
+      GetUseCase.GetOnlineArticle(id), exactly the same fallback rule
+      features/verified_account_required.feature already documents for the listing endpoint
+    And an id that does not parse as a uint32 still answers 400 with apperr.IdUint32ErrorMessage
+      before any lookup happens, for every caller, unchanged
+    And a domain article.ErrArticleNotFound, whether the id is truly unknown or is an offline
+      article hidden from this caller, still answers 404 with apperr.ArticleNotFoundErrorMessage
+      ("Article not found"), the identical body either way, so no response distinguishes the two
+    And a repository failure other than article.ErrArticleNotFound still answers 500 with the text
+      "Internal server error", regardless of caller state, unchanged
+    And this slice amends features/verified_account_required.feature: the Examples table of
+      "An authenticated but unverified user is refused on every protected article route" and of "A
+      request with no jwt cookie is still refused with 401, never 403" both drop their
+      "GET /v1/article/1" row, since that route no longer applies RequireVerifiedUser or requires a
+      cookie at all
+    And this slice amends features/not_found_errors.feature: "Fetching an offline article still
+      answers 404 with the same message" now holds only for an anonymous or unverified caller, not
+      a verified one, and "The article route still requires authentication before existence is even
+      checked" is replaced by this feature's public-visibility scenarios below
+
+  Scenario: An anonymous visitor can read an online article
+    Given the article repository contains an online article titled "Backyard Renovation Update" with id 1
+    When the client sends GET /v1/article/1 with no jwt cookie
+    Then the response status is 200
+    And the response body is the article's JSON representation
+
+  Scenario: An anonymous visitor is told an offline article does not exist
+    Given the article repository contains an offline article titled "Draft: Kitchen Remodel" with id 2
+    When the client sends GET /v1/article/2 with no jwt cookie
+    Then the response status is 404
+    And the response body is the text "Article not found"
+
+  Scenario: An anonymous visitor is told an unknown id does not exist
+    Given the article repository has no article with id 9999
+    When the client sends GET /v1/article/9999 with no jwt cookie
+    Then the response status is 404
+    And the response body is the text "Article not found"
+
+  Scenario: A verified user can open their own offline draft
+    Given a user repository containing user id 1, is_verified true
+    And a valid jwt cookie for user id 1
+    And the article repository contains an offline article titled "Draft: Kitchen Remodel" with id 2
+    When the client sends GET /v1/article/2 with that cookie
+    Then the response status is 200
+    And the response body is the article's JSON representation
+
+  Scenario: A verified user still reads an online article normally
+    Given a user repository containing user id 1, is_verified true
+    And a valid jwt cookie for user id 1
+    And the article repository contains an online article titled "Backyard Renovation Update" with id 1
+    When the client sends GET /v1/article/1 with that cookie
+    Then the response status is 200
+    And the response body is the article's JSON representation
+
+  Scenario: A verified user requesting an unknown id gets the same not-found response
+    Given a user repository containing user id 1, is_verified true
+    And a valid jwt cookie for user id 1
+    And the article repository has no article with id 9999
+    When the client sends GET /v1/article/9999 with that cookie
+    Then the response status is 404
+    And the response body is the text "Article not found"
+
+  Scenario: An authenticated but unverified user is told an offline article does not exist, not refused with 403
+    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 offline article titled "Draft: Kitchen Remodel" with id 2
+    When the client sends GET /v1/article/2 with that cookie
+    Then the response status is 404
+    And the response body is the text "Article not found"
+
+  Scenario: A malformed or expired jwt cookie falls back to the public online-only visibility
+    Given a jwt cookie whose value is not a token issued by JWT_SECRET
+    And the article repository contains an online article with id 1 and an offline article with id 2
+    When the client sends GET /v1/article/1 with that cookie
+    Then the response status is 200
+    When the client sends GET /v1/article/2 with that cookie
+    Then the response status is 404
+    And the response body is the text "Article not found"
+
+  Scenario: An id that isn't a valid uint32 still answers 400, regardless of caller
+    When the client sends GET /v1/article/not-a-number with no jwt cookie
+    Then the response status is 400
+    And the response body is the text apperr.IdUint32ErrorMessage
+
+  Scenario Outline: The rest of the article routes still require a verified account
+    Given no jwt cookie is sent
+    When the client sends <method> <path>
+    Then the response status is 401
+
+    Examples:
+      | method | path                    |
+      | POST   | /v1/article/            |
+      | DELETE | /v1/article/1           |
+      | PATCH  | /v1/article/1           |
+      | PATCH  | /v1/article/1/publish   |
+      | PATCH  | /v1/article/1/unpublish |
+
+  Scenario: A repository failure still answers 500 regardless of caller state
+    Given the article repository fails on its next call to Get
+    When the client sends GET /v1/article/1 with no jwt cookie
+    Then the response status is 500
+    And the response body is the text "Internal server error"

features/public_article_read.qa.md

@@ -0,0 +1,73 @@
+# QA procedure: public_article_read
+
+Package: `test` (black-box, extending `article_test.go`, `verified_account_required_http_test.go`
+and `not_found_errors_test.go`).
+
+## Setup shared by every case
+1. Call `validator.InitValidator()` once.
+2. Reuse `mockArticleRepo` (`test/article_test.go`) and `mockUserRepo` (`test/verified_account_required_http_test.go`)
+   as-is; no fake changes expected.
+3. Wire the real use cases over the fakes: `useCases.NewGetArticleUseCase`, `useCases.NewGetUserUseCase`,
+   plus `NewCreateArticleUseCase`/`NewListArticlesUseCase`/`NewDeleteArticleUseCase`/
+   `NewUpdateArticleUseCase` for the regression routes. Build
+   `article.NewHandler(create, get, list, delete, update, getUser)`.
+4. Build a test `jwtauth.New("HS256", []byte("test-secret"), nil)`.
+5. Mount routes on a fresh `chi.NewRouter()` mirroring the amended `api/router.go` shape:
+   - `r.Route("/v1", func(r chi.Router) { r.Route("/article", func(r chi.Router) { ... }) })`
+   - `r.Use(jwtauth.Verifier(token))` on the whole `/article` group
+   - `r.Get("/", articleHandler.ListArticles)` and `r.Get("/{id}", articleHandler.GetArticle)`
+     directly under that Verifier-only group
+   - a nested `r.Group` adding `jwtauth.Authenticator(token)` then
+     `middleware.RequireVerifiedUser(getUserUseCase)`, containing `r.Post("/", ...)`,
+     `r.Delete("/{id}", ...)`, `r.Patch("/{id}", ...)`, `r.Patch("/{id}/publish", ...)`,
+     `r.Patch("/{id}/unpublish", ...)`
+   No live server.
+6. Mint a valid jwt cookie for user id 1 via `token.Encode(map[string]any{"user_id": uint32(1)})`.
+7. Seed the article repo directly, e.g. `repo.articles[1] = article.Article{ID: 1, Title:
+   "Backyard Renovation Update", IsOnline: true}` and `repo.articles[2] = article.Article{ID: 2,
+   Title: "Draft: Kitchen Remodel", IsOnline: false}`.
+8. Seed the user repo with `repo.users[1] = user.User{ID: 1, IsVerified: <true|false>}` as each case needs.
+
+## HTTP checks
+9. `GET /v1/article/1` (online), no cookie -> 200, decode body, assert `id == 1`.
+10. `GET /v1/article/2` (offline), no cookie -> 404, body `"Article not found\n"`.
+11. `GET /v1/article/9999` (no article with that id), no cookie -> 404, body `"Article not found\n"`.
+12. `GET /v1/article/2`, cookie for user 1 with `IsVerified: true` -> 200, decode body, assert `id == 2`.
+13. `GET /v1/article/1`, cookie for user 1 with `IsVerified: true` -> 200, `id == 1`.
+14. `GET /v1/article/9999`, cookie for user 1 with `IsVerified: true` -> 404, body `"Article not found\n"`.
+15. `GET /v1/article/2`, cookie for user 1 with `IsVerified: false` -> 404, body `"Article not found\n"`
+    (never 403).
+16. `GET /v1/article/1` and `GET /v1/article/2`, cookie named `jwt` whose value is an arbitrary
+    non-token string (e.g. `"not-a-real-token"`) -> 200 for id 1, 404 for id 2 (same as step 9/10,
+    proving the invalid cookie falls back to public visibility).
+17. `GET /v1/article/not-a-number`, no cookie -> 400, body `apperr.IdUint32ErrorMessage + "\n"`.
+18. Regression, no cookie: `POST /v1/article/` -> 401; `DELETE /v1/article/1` -> 401;
+    `PATCH /v1/article/1` -> 401; `PATCH /v1/article/1/publish` -> 401;
+    `PATCH /v1/article/1/unpublish` -> 401.
+19. Configure the fake repo's `failSwitch` so the next `Get` call returns `errRepositoryFailure`
+    (`failNext("Get")`). `GET /v1/article/1` with no cookie -> 500, body `"Internal server error\n"`.
+
+## Required amendments to existing tests/specs (part of this slice, not optional cleanup)
+20. `test/verified_account_required_http_test.go`: move `r.Get("/{id}", articleHandler.GetArticle)`
+    in `newVerifiedAccountRequiredRouter` out of the `Authenticator` + `RequireVerifiedUser` group
+    into the outer Verifier-only group (mirroring step 5 above); remove the
+    `{http.MethodGet, "/v1/article/1", ""}` row from `protectedRouteCases` and the
+    `{http.MethodGet, "/v1/article/1"}` row from `noCookieCases` in `TestVerifiedAccountRequiredHttp`,
+    since that route no longer produces 403 or 401.
+21. `test/not_found_errors_test.go`: move `r.Get("/{id}", articleHandler.GetArticle)` in
+    `newNotFoundErrorsRouter` the same way; change the `"Fetching an offline article still answers
+    404 with the same message"` subtest to use an unverified or anonymous caller (it currently uses
+    `newVerifiedUserRepo()`, which will now 200 instead of 404); replace `"The article route still
+    requires authentication before existence is even checked"` with an assertion that an anonymous
+    request for an unknown id now answers 404 (covered by step 11 above, so this subtest can instead
+    be deleted in favor of the new test file, or repurposed to check `GET /v1/article/1` with no
+    cookie still answers 200 as a cross-file regression note).
+    `features/verified_account_required.feature` and `features/not_found_errors.feature` get the
+    corresponding Examples-table/scenario edits described in this feature's Background.
+
+## Manual verification (not exercised by the Go test)
+- SPA-visible behaviour: confirm the public front-office single-article view (unauthenticated) can
+  open a published article and 404s on a draft URL, and the authenticated back-office view can open
+  its own unpublished draft for editing, against the real embedded frontend and a real SQLite file.
+  Not exercised by `task test`; requires `task dev` or a built `task build` binary.
+- No SMTP involvement.

features/registration_gate_and_verification_email.feature

@@ -0,0 +1,112 @@
+Feature: Registration is only open while no verified account exists, and it sends a time-limited verification email
+
+  As the maintainer of RenewCMS
+  I want the "is registration still open" rule enforced by the create-user use case instead of the
+    auth handler, and a verification email sent on every successful registration whose link uses the
+    configured public URL and whose code expires two hours after creation
+  So that the business rule is testable independently of HTTP, and a newly registered user always
+    receives a working, time-limited verification link built from the server's own configuration
+
+  Background:
+    Given POST /v1/auth/register is public, decodes RegisterCredentials (username, password, email)
+      and validates them with validator.Validate.Struct before anything else
+    And today, the gate lives in api/handlers/auth.Handler.SomeUsersVerified, which calls
+      ListUsersUseCase.ListUsers and loops over IsVerified before the body is even decoded; this slice
+      moves that check into CreateUserUseCase.CreateUser, which consults user.Repository.GetAll itself
+      and returns the sentinel user.ErrRegistrationClosed when at least one existing user already has
+      IsVerified true
+    And the handler stops performing the check itself and stops calling ListUsersUseCase for this
+      purpose: it calls CreateUserUseCase.CreateUser unconditionally and maps user.ErrRegistrationClosed
+      to a 403 response with the same text it returns today, "You are not allowed to create a user. Log
+      in or reset database.", now defined as a named constant in api/pkg/apperr (e.g.
+      apperr.RegistrationClosedErrorMessage) instead of an inline literal in the handler
+    And CreateUserUseCase.CreateUser already sets VerificationExpiration to time.Now().Add(2 * time.Hour)
+      and returns the raw (unhashed) verification code while storing only its hash; this slice does not
+      change that expiry computation
+    And the email send moves into CreateUserUseCase itself: NewCreateUserUseCase gains a mail.Repository
+      (the existing domain interface) and the configured public URL string as constructor parameters,
+      both injected from config.Settings.PublicURL in api/dependecyInjection.go; the handler no longer
+      sends mail and no longer holds a SendMailUseCase or PublicURL itself
+    And after user.Repository.Create succeeds, CreateUserUseCase.CreateUser calls
+      mail.Repository.Send with the user's email, template "mailValidation"
+      (internal/infrastructure/mailer/templates/mailValidation.html, which renders a link from
+      "{{.Host}}/register/validate?c={{.VerificationCode}}"), and data whose Host is the injected public
+      URL and whose VerificationCode is the raw (unhashed) code
+    And if mail.Repository.Send returns an error, CreateUserUseCase.CreateUser deletes the
+      just-created user through user.Repository.Delete and returns an error wrapping the send failure,
+      so no half-registered user is left behind and the same username and email can be used to register
+      again
+    And the handler maps that CreateUser error to a 500 response and never sets the jwt cookie in that
+      case, since CreateUser itself never returned a created user
+
+  Scenario: Registration succeeds when no verified user exists and sends the verification email
+    Given the user repository is empty
+    When the client sends POST /v1/auth/register with username "alice", password "hunter2example12",
+      email "alice@example.com"
+    Then the response status is 200
+    And a jwt cookie is set
+    And exactly one email was sent to "alice@example.com" using template "mailValidation"
+    And that email's data has VerificationCode equal to the raw code returned by CreateUser, not its
+      stored hash
+
+  Scenario: The verification email's Host reflects the injected public URL
+    Given a config.Settings value with PublicURL "https://cms.example.com"
+    And the registration flow is built from that settings value
+    When the client sends POST /v1/auth/register with username "alice", password "hunter2example12",
+      email "alice@example.com"
+    Then the email sent to "alice@example.com" has data.Host equal to "https://cms.example.com"
+    And changing the process environment variable PUBLIC_URL afterward does not change that value on a
+      second registration built from the same settings value
+
+  Scenario: The stored verification code expires two hours after creation
+    Given the user repository is empty
+    When the client sends POST /v1/auth/register with username "alice", password "hunter2example12",
+      email "alice@example.com"
+    Then the created user's VerificationExpiration is within 5 seconds of time.Now().Add(2 * time.Hour)
+
+  Scenario: Registration is rejected once a verified user exists, and no email is sent
+    Given the user repository contains a user "alice" with IsVerified true
+    When the client sends POST /v1/auth/register with username "bob", password "hunter2example12",
+      email "bob@example.com"
+    Then the response status is 403
+    And the response body is "You are not allowed to create a user. Log in or reset database."
+    And the user repository still contains only "alice"
+    And no email was sent
+
+  Scenario: A failed verification email rolls back the just-created user
+    Given the user repository is empty
+    And the mail repository is set to fail on its next Send call
+    When the client sends POST /v1/auth/register with username "alice", password "hunter2example12",
+      email "alice@example.com"
+    Then the response status is 500
+    And no jwt cookie is set
+    And the user repository no longer contains a user named "alice"
+    When the client then sends POST /v1/auth/register again with username "alice",
+      password "hunter2example12", email "alice@example.com", and the mail repository now succeeds
+    Then the response status is 200
+    And a jwt cookie is set
+
+  Scenario: The create-user use case itself enforces the gate, independently of any handler
+    Given a user.Repository fake containing one user with IsVerified true
+    And a CreateUserUseCase built directly over that fake, a hasher and a mail.Repository fake
+    When CreateUser is called with username "bob", password "hunter2example12", email "bob@example.com"
+    Then the call returns user.ErrRegistrationClosed, asserted with errors.Is
+    And the fake repository's Create method was never invoked
+    And no email was sent
+
+  Scenario: The create-user use case allows registration while every existing user is unverified
+    Given a user.Repository fake containing two users, both with IsVerified false
+    And a CreateUserUseCase built directly over that fake, a hasher and a mail.Repository fake
+    When CreateUser is called with username "carol", password "hunter2example12",
+      email "carol@example.com"
+    Then the call succeeds and returns a user with IsVerified false
+    And exactly one email was sent to "carol@example.com" using template "mailValidation"
+
+  Scenario: The create-user use case rolls back the user when the mail repository fails
+    Given an empty user.Repository fake
+    And a CreateUserUseCase built directly over that fake, a hasher and a mail.Repository fake set to
+      fail on its next Send call
+    When CreateUser is called with username "alice", password "hunter2example12",
+      email "alice@example.com"
+    Then the call returns an error wrapping the mail repository's failure
+    And the fake repository no longer contains a user named "alice"

features/registration_gate_and_verification_email.qa.md

@@ -0,0 +1,68 @@
+# QA procedure: registration_gate_and_verification_email
+
+Package: `test` (black-box), extending `test/user_test.go` (mockUserRepo, stubHasher) and
+`test/mail_test.go` (mockMailRepo, recordedMail, failSwitch).
+
+## Setup shared by every case
+1. Call `validator.InitValidator()` once.
+2. Use-case-level checks build:
+   `useCases.NewCreateUserUseCase(repo, &stubHasher{}, mailRepo, "https://cms.example.com")`
+   where `repo` is a `mockUserRepo` and `mailRepo` is a `mockMailRepo`. Use `mailRepo.fail.failNext("Send")`
+   to force the next `Send` call to fail for the rollback cases.
+3. HTTP-level checks wire `mockUserRepo`, `mockMailRepo`,
+   `useCases.NewCreateUserUseCase(repo, &stubHasher{}, mailRepo, publicURL)`,
+   `useCases.NewListUsersUseCase(repo)`, `useCases.NewGetUserUseCase(repo)`,
+   `useCases.NewAuthenticateUserUseCase(repo, ...)` into `auth.NewHandler(...)` (which no longer takes a
+   mail use case or a public URL) with a test `jwtauth.New("HS256", []byte("test-secret"), nil)`. Mount
+   `POST /v1/auth/register` unprotected on a fresh `chi.NewRouter()` mirroring `api/router.go`. No live
+   server, no real SMTP. Default `publicURL` for cases that don't care about its value is
+   `"https://cms.example.com"`.
+
+## Use-case-level checks (no HTTP)
+4. Repository pre-populated with one verified user (`IsVerified: true`). Call `CreateUser` with a new
+   username/email/password. Assert `errors.Is(err, user.ErrRegistrationClosed)`. Assert the repository's
+   `Create` was never called (e.g. repo's user count is unchanged, or a `fail.failNext("Create")`
+   sentinel that would only trip if reached). Assert `mailRepo.SentEmails` is empty.
+5. Repository pre-populated with two unverified users. Call `CreateUser` with a new username. Assert
+   `err == nil`, the returned user has `IsVerified == false`, and `mailRepo.SentEmails` has exactly one
+   entry for the new user's email with `Template == "mailValidation"`.
+6. On an empty repository, call `CreateUser`. Assert `err == nil` and
+   `abs(result.VerificationExpiration.Sub(time.Now().Add(2*time.Hour))) < 5*time.Second`.
+7. On an empty repository, set `mailRepo.fail.failNext("Send")`. Call `CreateUser` with
+   username "alice"/email "alice@example.com". Assert `err != nil` (wrapping the mail repository's
+   failure, e.g. `errors.Is(err, errRepositoryFailure)` per the existing `failSwitch` convention). Assert
+   `repo.GetByUsername("alice")` returns `user.ErrUserNotFound` (the created row was deleted). Then clear
+   the failure and call `CreateUser` again with the same username/email → assert `err == nil`.
+
+## HTTP-level checks (fakes, per the shared setup above)
+8. `POST /v1/auth/register` with `{"username":"alice","password":"hunter2example12","email":"alice@example.com"}`
+   against an empty `mockUserRepo` → assert status `200`, a `Set-Cookie: jwt=...` header present.
+   Assert `mailRepo.SentEmails` has exactly one entry with `Address == "alice@example.com"` and
+   `Template == "mailValidation"`.
+9. Inspect that entry's `Data` and assert it carries the raw verification code (compare against the
+   `VerificationCode` field on the user returned by `CreateUser`/stored via the mock repo lookup) — not
+   the hashed value the repository stores.
+10. Build the handler from a `CreateUserUseCase` constructed with `publicURL = "https://cms.example.com"`.
+    Repeat the registration call. Assert the recorded mail data's `Host` field equals
+    `"https://cms.example.com"`. Then set the process env var `PUBLIC_URL` to a different value and
+    register a second user with the same handler instance; assert the second email's `Host` is still
+    `"https://cms.example.com"` (construction-time value, not read again from the environment).
+11. Seed `mockUserRepo` with one user having `IsVerified: true`. `POST /v1/auth/register` with a new
+    username/email → assert status `403`, body exactly
+    `"You are not allowed to create a user. Log in or reset database."` (the value of the new
+    `apperr` constant), `mockUserRepo` still holds only the original user, and `mailRepo.SentEmails` is
+    still empty.
+12. On an empty `mockUserRepo`, set `mailRepo.fail.failNext("Send")`. `POST /v1/auth/register` with
+    `{"username":"alice","password":"hunter2example12","email":"alice@example.com"}` → assert status
+    `500`, no `Set-Cookie: jwt=...` header present, and `mockUserRepo` does not contain a user named
+    "alice". Then, without re-arming the failure, `POST /v1/auth/register` again with the same body →
+    assert status `200` and a `Set-Cookie: jwt=...` header present (the username and email are free
+    again).
+
+## Manual verification (not exercised by the Go test)
+- The real SMTP send (`internal/infrastructure/mailer.MailRepository.Send` actually dialing a server) is
+  never exercised automatically; verify by hand against a real or sandboxed SMTP server that the
+  rendered `mailValidation.html` link matches `PUBLIC_URL` from the deployed `.env` and that clicking it
+  reaches the SPA's `/register/validate` route.
+- The SPA's handling of an expired or already-used verification code (any UI/UX around
+  `/register/validate?c=...`) is out of scope for this slice and not covered here.

features/registration_status_endpoint.feature

@@ -0,0 +1,80 @@
+Feature: The SPA can ask whether registration is currently open, without exposing anything else
+
+  As the maintainer of RenewCMS
+  I want a public, unauthenticated GET endpoint that reports whether registration is open, driven by
+    the exact same rule CreateUserUseCase already enforces on POST /v1/auth/register, and that reveals
+    nothing beyond that single boolean
+  So that the SPA can decide whether to show a registration form before the user submits anything,
+    without a second, drifting copy of the "is registration closed" rule and without leaking how many
+    accounts exist or who they belong to
+
+  Background:
+    Given CreateUserUseCase already has a private registrationClosed() bool method that loops over
+      user.Repository.GetAll() and returns true as soon as any existing user has IsVerified true; this
+      slice exports that same check as a new method on CreateUserUseCase (e.g. IsRegistrationOpen() bool,
+      returning the negation) so it can be called from outside the use case, and CreateUser itself keeps
+      calling it exactly as before
+    And this slice adds GET /v1/auth/registration, handled from the same handler package as
+      POST /v1/auth/register (api/handlers/auth), reusing the same CreateUserUseCase instance the
+      register handler already holds; no new use case, no new domain method beyond the exported check,
+      and no second loop over user.Repository.GetAll anywhere in the handler
+    And GET /v1/auth/registration is mounted in api/router.go's NewAuthRouter at the top level, outside
+      every r.Group: not inside the jwtauth.Verifier/Authenticator group that guards /verify,
+      DELETE /register and /me, and not inside either middleware.NewRateLimiter group that guards /login
+      and /password-reset; no jwt cookie is ever read, parsed or validated for this route
+    And the handler decodes no request body and reads no cookie and no claim; it calls
+      CreateUserUseCase.IsRegistrationOpen(), sets the response header Cache-Control: no-store, and
+      responds 200 with a JSON body containing exactly one field, "open", and nothing else: no user
+      count, no usernames, no emails, no is_verified values
+
+  Scenario: Registration is reported open while no verified account exists
+    Given the user repository is empty
+    When the client sends GET /v1/auth/registration with no jwt cookie
+    Then the response status is 200
+    And the response header Cache-Control is "no-store"
+    And the response body is exactly {"open": true}
+
+  Scenario: Registration is reported open while every existing account is unverified
+    Given the user repository contains a user "alice" with IsVerified false
+    When the client sends GET /v1/auth/registration with no jwt cookie
+    Then the response status is 200
+    And the response body is exactly {"open": true}
+
+  Scenario: Registration is reported closed once a verified account exists
+    Given the user repository contains a user "alice" with IsVerified true
+    When the client sends GET /v1/auth/registration with no jwt cookie
+    Then the response status is 200
+    And the response header Cache-Control is "no-store"
+    And the response body is exactly {"open": false}
+
+  Scenario: An expired, forged, or otherwise invalid jwt cookie makes no difference to the response
+    Given the user repository contains a user "alice" with IsVerified true
+    And the client holds a jwt cookie that is expired, forged, or otherwise invalid and would be
+      rejected by jwtauth.Authenticator on any protected route
+    When the client sends GET /v1/auth/registration with that cookie attached
+    Then the response status is 200
+    And the response body is exactly {"open": false}, the same as a request with no cookie at all
+    And the response does not set or clear any cookie
+    And this proves the route never even attempts to parse or validate the cookie, not merely that a
+      valid one would be ignored
+
+  Scenario: The endpoint reveals nothing beyond the open flag
+    Given the user repository contains three users, two verified and one unverified
+    When the client sends GET /v1/auth/registration
+    Then the response body's only top-level field is "open"
+    And the response body contains none of: a user count, a username, an email, or an is_verified value
+
+  Scenario: The route is never rate-limited, unlike login and password reset
+    Given the user repository is empty
+    When the client sends GET /v1/auth/registration 20 times in immediate succession from the same
+      client
+    Then every response status is 200
+    And none of the responses is 429
+
+  Scenario: The same rule CreateUser enforces is what answers this endpoint
+    Given a user.Repository fake containing one user with IsVerified true
+    And a CreateUserUseCase built directly over that fake, a hasher and a mail.Repository fake
+    When IsRegistrationOpen is called
+    Then it returns false
+    And calling CreateUser on the same use case with a new username/email/password returns
+      user.ErrRegistrationClosed, asserted with errors.Is

features/registration_status_endpoint.qa.md

@@ -0,0 +1,58 @@
+# QA procedure: registration_status_endpoint
+
+Package: `test` (black-box), extending `test/user_test.go` (`mockUserRepo`, `stubHasher`) and
+`test/mail_test.go` (`mockMailRepo`), and following the router wiring pattern in
+`test/registration_gate_and_verification_email_http_test.go` /
+`test/get_current_user_http_test.go`.
+
+## Setup shared by every case
+
+1. Call `validator.InitValidator()` once.
+2. Build `createUserUseCase := useCases.NewCreateUserUseCase(repo, &stubHasher{}, mailRepo,
+   "https://cms.example.com")` where `repo` is a `mockUserRepo` and `mailRepo` is a `mockMailRepo`.
+3. Build the auth handler(s) the same way `NewAuthRouter` does, but only mount what each case needs:
+   `GET /v1/auth/registration` unprotected, at the router's top level (no `jwtauth.Verifier`, no
+   `jwtauth.Authenticator`, no `middleware.NewRateLimiter`), on a fresh `chi.NewRouter()`. No live
+   server, no real SQLite file, no real SMTP.
+
+## HTTP-level checks
+
+4. Empty `mockUserRepo`. `GET /v1/auth/registration` with no cookie → assert status `200`,
+   `Cache-Control` header equals `"no-store"`, and the decoded JSON body is exactly `{"open": true}`
+   (assert there is no other top-level key by decoding into `map[string]any` and checking `len(body)
+   == 1`).
+5. `mockUserRepo` seeded with one user, `IsVerified: false`. `GET /v1/auth/registration` → assert
+   status `200` and body exactly `{"open": true}`.
+6. `mockUserRepo` seeded with one user, `IsVerified: true`. `GET /v1/auth/registration` → assert
+   status `200`, `Cache-Control: no-store`, and body exactly `{"open": false}`.
+7. Same seed as step 6. Attach a jwt cookie whose value is invalid/expired/garbage — e.g. a plain
+   string like `"jwt=not-a-real-token"`, or a token minted with a different signing key, or one built
+   with `token.Encode` and then manually expired/truncated — deliberately NOT a cookie freshly minted
+   with `token.Encode` against the router's own signing key. `GET /v1/auth/registration` with that
+   cookie attached → assert status `200`, body exactly `{"open": false}` (identical to step 6's
+   cookie-less result), and no `Set-Cookie` header on the response. This demonstrates the route never
+   parses or validates the cookie at all, since an invalid/expired one produces byte-identical output
+   to no cookie.
+8. `mockUserRepo` seeded with three users (two `IsVerified: true`, one `IsVerified: false`).
+   `GET /v1/auth/registration` → decode the body into `map[string]any`, assert its only key is
+   `"open"`, and assert the raw response body (as a string) does not contain any of the seeded
+   usernames or emails, and does not contain a numeric user count anywhere but inside the boolean
+   `open` value.
+9. Empty `mockUserRepo`. Send `GET /v1/auth/registration` 20 times in a row against the same
+   router/repo (a plain loop of `httptest.NewRequest` + `ServeHTTP`, no external rate limiter
+   middleware mounted on this route) → assert every response status is `200` and none is `429`.
+
+## Use-case-level check (no HTTP)
+
+10. Build a `user.Repository` fake (`mockUserRepo`) containing one user with `IsVerified: true`. Build
+    `CreateUserUseCase` over that fake, a `stubHasher`, and a `mockMailRepo`. Call the new exported
+    method (e.g. `IsRegistrationOpen()`) and assert it returns `false`. Then call `CreateUser` with a
+    new username/email/password on the same use case instance and assert
+    `errors.Is(err, user.ErrRegistrationClosed)` — proving both entry points consult the same
+    underlying check rather than two independently-maintained copies.
+
+## Manual verification (not exercised by the Go test)
+
+- The SPA actually calling `GET /v1/auth/registration` before rendering the registration form (rather
+  than always showing it and relying on the 403 from POST /v1/auth/register) is out of scope for this
+  slice's automated test and should be checked by hand against a running dev build.

features/request_password_reset.feature

@@ -0,0 +1,177 @@
+Feature: Anyone can request a password reset, and the response never reveals whether the email exists
+
+  As the maintainer of RenewCMS
+  I want POST /v1/auth/password-reset to always answer with the same status and body regardless of
+    whether the submitted email belongs to an account, and, when it does, to email that account a
+    reset code that expires one hour after it was generated
+  So that the endpoint cannot be used to discover which email addresses are registered, and a
+    legitimate reset link always uses the server's own configured public URL
+
+  Background:
+    Given POST /v1/auth/password-reset is public and mounted alongside /register, /login and
+      /logout in NewAuthRouter, outside the jwt-protected group
+    And the request body is decoded into a RequestPasswordResetCredentials struct with one field,
+      Email, validated required,email by validator.Validate.Struct before anything else
+    And a decode failure or a validation failure (missing or malformed email) is answered exactly
+      like every other auth route: apperr.BodyErrorMessage with 400 for a decode failure, or the
+      validator's error text with 400 for a validation failure; only the "does this email exist"
+      question is hidden, not the shape of the request itself
+    And this slice adds a new use case, RequestPasswordResetUseCase
+      (internal/infrastructure/useCases/RequestPasswordReset.go), injected into auth.Handler as
+      RequestPasswordResetUseCase; its constructor takes user.Repository, hash.Hasher, mail.Repository
+      and the configured public URL string, the same shape as CreateUserUseCase, with the public URL
+      coming from config.Settings.PublicURL through api/dependecyInjection.go
+    And RequestPasswordReset(email string) error looks the user up with user.Repository.GetByEmail;
+      when no user has that email, or GetByEmail returns any other error, it does nothing further and
+      returns nil
+    And when a user is found, RequestPasswordReset generates a random raw code with uuid.NewString()
+      (the same generator CreateUser uses for the verification code), hashes it with hash.Hasher.Hash,
+      and stores the hash together with a fresh expiration of time.Now().Add(1 * time.Hour) by calling
+      user.Repository.UpdatePasswordResetCode(userId uint32, code string, expiration time.Time)
+      (user.User, error) — this slice adds the expiration parameter to that existing repository
+      method and to UpdateUserUseCase.UpdatePasswordResetCode, which gains the same parameter and
+      passes it straight through, and adds a new PasswordResetExpiration time.Time field to
+      user.User, to internal/infrastructure/persistence/models.User (a plain, non-nullable column,
+      the same shape as VerificationExpiration) and to the UserToDomain/UserToModel mappers; no new
+      entry is needed in api/dependecyInjection.go's AutoMigrate call because models.User is already
+      migrated there
+    And storing a new code and expiration always overwrites whatever was stored before, so only the
+      most recently requested code and expiration are ever valid; a user who requests a reset twice
+      can only use the second code, and the first one no longer matches once overwritten
+    And after storing succeeds, RequestPasswordReset calls mail.Repository.Send with the user's
+      email, template "passwordReset" (the already-existing
+      internal/infrastructure/mailer/templates/passwordReset.html, which renders a link from
+      "{{.Host}}/register/reset/validate?c={{.VerificationCode}}&email={{.Email}}"), and a
+      MailPasswordResetData value whose Host is the injected public URL, whose VerificationCode is
+      the raw (unhashed) code, and whose Email is the user's email
+    And RequestPasswordReset never returns a non-nil error to its caller: a failure to hash the
+      code, to store it, or to send the email is swallowed the same way a not-found email is, so the
+      handler can never tell those cases apart either — sending the request always looks the same to
+      the caller regardless of whether the email exists or whether the mail send happened to succeed
+    And a failure to hash the code, to store it, or to send the email is now also written to the
+      process log via the stdlib log package (the same convention
+      internal/infrastructure/mailer/mailRepository.go already uses for its own send failures);
+      this is in addition to, not instead of, always returning nil to the caller — the HTTP response
+      is unaffected by whether a failure occurred or was logged
+    And a reset applies the same way regardless of the user's IsVerified status: an unverified user
+      can request and receive a password reset email exactly like a verified one, since resetting a
+      password is unrelated to email verification
+    And auth.Handler.RequestPasswordReset calls RequestPasswordResetUseCase.RequestPasswordReset and
+      then always responds 200 with the same body,
+      {"message": "If an account exists for that email, a password reset link has been sent."},
+      never sets or clears the jwt cookie, and never branches on the use case's return value
+    And this slice does not add the confirmation endpoint that consumes the code (the page behind
+      "/register/reset/validate?c=...&email=..." and the POST call it would make); only the request
+      step is in scope
+
+  Scenario: Requesting a reset for an existing email sends the reset email and returns the generic message
+    Given the user repository contains a user "alice" with email "alice@example.com" and IsVerified true
+    When the client sends POST /v1/auth/password-reset with body {"email": "alice@example.com"}
+    Then the response status is 200
+    And the response body is {"message": "If an account exists for that email, a password reset link has been sent."}
+    And exactly one email was sent to "alice@example.com" using template "passwordReset"
+    And that email's data has VerificationCode equal to the raw code stored in the repository's
+      hashed PasswordResetCode for alice, not the hash itself, and Email equal to "alice@example.com"
+
+  Scenario: Requesting a reset for an email with no account returns the identical response and sends no email
+    Given the user repository is empty
+    When the client sends POST /v1/auth/password-reset with body {"email": "nobody@example.com"}
+    Then the response status is 200
+    And the response body is {"message": "If an account exists for that email, a password reset link has been sent."}
+    And no email was sent
+
+  Scenario: The reset email's Host reflects the injected public URL
+    Given a config.Settings value with PublicURL "https://cms.example.com"
+    And the auth handler is built from that settings value
+    And the user repository contains a user "alice" with email "alice@example.com"
+    When the client sends POST /v1/auth/password-reset with body {"email": "alice@example.com"}
+    Then the email sent to "alice@example.com" has data.Host equal to "https://cms.example.com"
+
+  Scenario: The stored reset code expires one hour after creation
+    Given the user repository contains a user "alice" with email "alice@example.com"
+    When the client sends POST /v1/auth/password-reset with body {"email": "alice@example.com"}
+    Then alice's stored PasswordResetExpiration is within 5 seconds of time.Now().Add(1 * time.Hour)
+
+  Scenario: A second request overwrites the first code, invalidating it
+    Given the user repository contains a user "alice" with email "alice@example.com"
+    When the client sends POST /v1/auth/password-reset with body {"email": "alice@example.com"}
+    Then exactly one email has been sent, carrying raw code "code-1" in its VerificationCode data
+    When the client sends POST /v1/auth/password-reset again with body {"email": "alice@example.com"}
+    Then exactly two emails have been sent in total, and the second one's VerificationCode data
+      differs from "code-1"
+    And alice's stored, hashed PasswordResetCode no longer matches "code-1" but matches the raw code
+      from the second email
+
+  Scenario: A mail-send failure for an existing user still returns the same generic response
+    Given the user repository contains a user "alice" with email "alice@example.com"
+    And the mail repository is set to fail on its next Send call
+    When the client sends POST /v1/auth/password-reset with body {"email": "alice@example.com"}
+    Then the response status is 200
+    And the response body is {"message": "If an account exists for that email, a password reset link has been sent."}
+    And no jwt cookie is set
+    And a failure was written to the process log naming the mail-send failure
+
+  Scenario: An unverified user can request a password reset exactly like a verified one
+    Given the user repository contains a user "bob" with email "bob@example.com" and IsVerified false
+    When the client sends POST /v1/auth/password-reset with body {"email": "bob@example.com"}
+    Then the response status is 200
+    And the response body is {"message": "If an account exists for that email, a password reset link has been sent."}
+    And exactly one email was sent to "bob@example.com" using template "passwordReset"
+
+  Scenario Outline: A malformed request is still rejected, since this is not an enumeration concern
+    When the client sends POST /v1/auth/password-reset with body <body>
+    Then the response status is 400
+
+    Examples:
+      | body                                |
+      | {}                                   |
+      | {"email": "not-an-email"}            |
+      | not-json                             |
+
+  Scenario: The use case itself hashes the code, stores it with a one-hour expiration, and sends the email
+    Given a user.Repository fake containing user id 3, email "alice@example.com"
+    And a RequestPasswordResetUseCase built directly over that fake, a hasher, a mail.Repository
+      fake and public URL "https://cms.example.com"
+    When RequestPasswordReset is called with "alice@example.com"
+    Then the call returns nil
+    And the fake repository's UpdatePasswordResetCode method was invoked exactly once with userId 3,
+      a hashed code, and an expiration within 5 seconds of time.Now().Add(1 * time.Hour)
+    And exactly one email was sent to "alice@example.com" using template "passwordReset" whose data
+      carries the same raw code that was hashed, and Host "https://cms.example.com"
+
+  Scenario: The use case swallows an unknown email and returns nil without touching the repository or mailer
+    Given an empty user.Repository fake
+    And a RequestPasswordResetUseCase built directly over that fake, a hasher, and a mail.Repository fake
+    When RequestPasswordReset is called with "nobody@example.com"
+    Then the call returns nil
+    And the fake repository's UpdatePasswordResetCode method was never invoked
+    And no email was sent
+
+  Scenario: The use case swallows a mail repository failure and still returns nil
+    Given a user.Repository fake containing user id 3, email "alice@example.com"
+    And a RequestPasswordResetUseCase built directly over that fake, a hasher, and a mail.Repository
+      fake set to fail on its next Send call
+    When RequestPasswordReset is called with "alice@example.com"
+    Then the call returns nil
+    And the fake repository's UpdatePasswordResetCode method was invoked exactly once with userId 3
+    And a failure was written to the process log naming the mail-send failure
+
+  Scenario: The use case logs and swallows a hashing failure
+    Given a user.Repository fake containing user id 3, email "alice@example.com"
+    And a RequestPasswordResetUseCase built directly over that fake, a hasher set to fail on its
+      next Hash call, and a mail.Repository fake
+    When RequestPasswordReset is called with "alice@example.com"
+    Then the call returns nil
+    And the fake repository's UpdatePasswordResetCode method was never invoked
+    And no email was sent
+    And a failure was written to the process log naming the hashing failure
+
+  Scenario: The use case logs and swallows a repository failure while storing the reset code
+    Given a user.Repository fake containing user id 3, email "alice@example.com", set to fail on
+      its next UpdatePasswordResetCode call
+    And a RequestPasswordResetUseCase built directly over that fake, a hasher, and a mail.Repository
+      fake
+    When RequestPasswordReset is called with "alice@example.com"
+    Then the call returns nil
+    And no email was sent
+    And a failure was written to the process log naming the storage failure