feat: integration screen

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,16 @@
+PUBLIC_URL=http://localhost:5173
+JWT_SECRET=change-me-to-a-long-random-string
+SMTP_HOST=mail.service.abc
+SMTP_PORT=465
+SMTP_LOGIN=a@b.c
+SMTP_PASSWORD=12341234
+SMTP_SENDER=a@b.c
+
+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,153 @@
+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
+
+  visual:check:
+    desc: Screenshot a design screen's states next to the built SPA (Playwright) → tmp/visual/<screen>/
+    dir: web
+    deps: [web:install]
+    cmds:
+      - bun visual/check.ts {{.CLI_ARGS}}
+
+  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,151 @@
+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_LOGIN",
+	"SMTP_SENDER",
+	"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,42 @@
+# 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_LOGIN`    | SMTP username used to authenticate with the server. Some providers (e.g. Brevo) issue a login distinct from the sender address. | `noreply@example.com` |
+| `SMTP_SENDER`   | Sender address used in the `From` header. Must be an address/domain the SMTP provider allows that login to send as.  | `noreply@example.com`      |
+| `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,150 @@
+# 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_LOGIN=noreply@example.com
+SMTP_SENDER=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,92 @@
+# 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 test:web        # SPA component tests (Vitest)
+task visual:check -- log-in   # screenshot design vs SPA for a screen → tmp/visual/log-in/
+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.
+- SPA component tests use Vitest + Vue Test Utils (`task test:web`). `task lint:web` runs eslint and a type check.
+
+## Visual check against the design
+
+`task visual:check -- <screen> [state]` compares the SPA with the Claude Design boards in [`docs/design/source`](design/source). The screen is a file name from [`docs/design/screens`](design/screens) (`log-in`, `home`, …), and the state is one of its headings.
+
+- It builds the SPA into `tmp/visual/dist` and serves both the build and the boards locally, so no API or dev server is needed.
+- For every state it screenshots:
+  - the board's frame for that state;
+  - the SPA in the same state, at 1440×900 and 390×844, in light and dark.
+- It saves `design-*.png`, `app-*.png` and `diff-*.png` (differing pixels in red) to `tmp/visual/<screen>/<state>/`, and a summary to `tmp/visual/<screen>/report.md`.
+- [`web/visual/states.ts`](../web/visual/states.ts) says how to reach each state in the SPA: the route, the mocked `/v1` responses (keyed `'METHOD /v1/path'`) and any user steps. A state without an entry is captured on the design side only, and marked "design only" in the report.
+- Narrow a run with `--viewport=desktop|mobile` and `--theme=light|dark`.
+- Lucide icons are served from the local `@iconify-json/lucide` set, for both the boards and the SPA. api.iconify.design rate-limits repeated runs.
+- The first time on a machine, run `bunx playwright install chromium` in `web/`.
+
+The pixel percentage only points at where to look, because font anti-aliasing always differs a little. Judge by comparing the image pairs.
+
+## 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/api_client_global_error_handling.feature

@@ -0,0 +1,121 @@
+Feature: Typed API client and session store with global 401, unverified-403, 429 and offline handling
+
+  As the maintainer of RenewCMS
+  I want useApi to expose one generic authenticated request method that every future screen call
+    site builds on, that turns a mid-session 401 into a redirect to /login with the expired reason
+    and clears the session, turns a 403 from a known-unverified session into a redirect to
+    /register/pending, surfaces the Retry-After seconds from a 429 so screens can show a countdown,
+    and marks the app offline on a network failure
+  So that later screen slices (login, articles, editor, ...) get consistent global session and
+    connectivity handling instead of each reimplementing 401/403/429/offline handling ad hoc
+
+  Background:
+    Given useApi exports a generic request(path, options) method, used by getMe and by every future
+      endpoint call, that always sends credentials: 'include' and parses a JSON response body on
+      success
+    And a non-2xx response makes request(...) throw an ApiError carrying the numeric status; a 429
+      response also carries retryAfter, the integer number of seconds parsed from the response's
+      Retry-After header, or undefined if the header is absent or not a plain integer
+    And a fetch that rejects instead of resolving (no connectivity, DNS failure, the request never
+      reaches a server) makes request(...) throw a NetworkError instead of an ApiError, so callers
+      can tell "the server answered with an error" apart from "the request never got an answer" with
+      instanceof
+    And useApi exports a shared reactive isOffline ref, module-scoped so every caller of useApi() and
+      every component observes the same value: a NetworkError sets it true; it is also true whenever
+      navigator.onLine is false; a request that completes (2xx or a non-network ApiError) while
+      navigator.onLine is true sets it back to false
+    And getMe() calls request('/v1/auth/me', { onUnauthorized: 'passthrough' }): a 401 from this one
+      call still throws a plain ApiError with status 401, exactly as before, and does not trigger the
+      redirect below, because this call only ever runs as part of session.check() during router
+      navigation (features/nuxt_ui_shell_foundation.feature), and the router's own guard already
+      redirects to /login?redirect=<target>&reason=expired for a "no session" boot result
+    And every other call to request(...) uses the default onUnauthorized: 'redirect': on a 401,
+      before the ApiError reaches the caller, useApi calls the session store's clear() action (session
+      = null, status stays 'ready') and navigates the router to
+      /login?redirect=<currentPath>&reason=expired, where <currentPath> is
+      router.currentRoute.value.fullPath at the moment the 401 is received
+    And on a 403, useApi reads the session store: if it holds a session whose verified is false, this
+      is the global "unverified account" case from docs/design/routes.md and states.md, so useApi
+      navigates the router to /register/pending; the ApiError still reaches the caller as a plain 403,
+      and the session store is left untouched, since it already correctly records verified: false; any
+      other 403 (no session, or a session whose verified is true) is not the global case: useApi does
+      nothing extra and the ApiError propagates to the caller unchanged, for the screen to interpret
+      (wrong-credentials at login, already-verified at cancel-registration, an expired verify or reset
+      link, and registration-closed are all screen-level, out of scope here)
+    And the session store gains a clear() action (session = null, status = 'ready', independent of
+      check()/retry()) used by the global 401 handling above
+
+  Scenario: A successful authenticated request returns the parsed body
+    Given a mocked fetch that resolves 200 with JSON body {"id": 5}
+    When useApi().request('/v1/article/5') is called
+    Then the returned value is {"id": 5}
+    And isOffline is false
+
+  Scenario: A 401 received mid-session redirects to login with the expired reason and clears the session
+    Given the session store holds session {"verified": true} and status "ready"
+    And the current route is /article/12/edit
+    And a mocked fetch that resolves 401
+    When useApi().request('/v1/article/12') is called
+    Then the call rejects with an ApiError whose status is 401
+    And the session store's session becomes null and its status stays "ready"
+    And the router navigates to "/login?redirect=/article/12/edit&reason=expired"
+
+  Scenario: The boot call to getMe does not trigger the global 401 redirect
+    Given the session store holds session null and status "checking"
+    And a mocked fetch that resolves 401
+    When useApi().getMe() is called directly, outside of router navigation
+    Then the call rejects with an ApiError whose status is 401
+    And the router does not navigate anywhere
+
+  Scenario: A 403 while the session is known to be unverified redirects to the pending page
+    Given the session store holds session {"verified": false} and status "ready"
+    And a mocked fetch that resolves 403
+    When useApi().request('/v1/article/') is called
+    Then the call rejects with an ApiError whose status is 403
+    And the router navigates to "/register/pending"
+    And the session store's session is still {"verified": false}
+
+  Scenario Outline: A 403 that is not the global unverified case passes through untouched
+    Given the session store holds session <session> and status "ready"
+    And a mocked fetch that resolves 403
+    When useApi().request('/v1/some/endpoint') is called
+    Then the call rejects with an ApiError whose status is 403
+    And the router does not navigate anywhere
+    And the session store is unchanged
+
+    Examples:
+      | session               |
+      | null                  |
+      | {"verified": true}    |
+
+  Scenario: A 429 on a rate-limited endpoint exposes the Retry-After seconds
+    Given a mocked fetch that resolves 429 with a Retry-After header of "30"
+    When useApi().request('/v1/auth/login', { method: 'POST' }) is called
+    Then the call rejects with an ApiError whose status is 429 and whose retryAfter is 30
+
+  Scenario: A 429 with no Retry-After header exposes an undefined retryAfter
+    Given a mocked fetch that resolves 429 with no Retry-After header
+    When useApi().request('/v1/auth/password-reset', { method: 'POST' }) is called
+    Then the call rejects with an ApiError whose status is 429 and whose retryAfter is undefined
+
+  Scenario: A network failure throws a NetworkError and marks the app offline
+    Given navigator.onLine is true
+    And a mocked fetch that rejects with a TypeError, as a real fetch does when the network is
+      unreachable
+    When useApi().request('/v1/article/') is called
+    Then the call rejects with a NetworkError, not an ApiError
+    And isOffline becomes true
+
+  Scenario: A later successful request clears the offline flag
+    Given isOffline is true from a previous network failure
+    And navigator.onLine is true
+    And a mocked fetch that resolves 200 with JSON body {}
+    When useApi().request('/v1/article/') is called
+    Then isOffline becomes false
+
+  Scenario: The browser's own online/offline events also drive the shared flag
+    Given isOffline is false
+    When the browser fires a "offline" event on window
+    Then isOffline becomes true
+    When the browser fires a "online" event on window
+    Then isOffline becomes false

features/api_client_global_error_handling.qa.md

@@ -0,0 +1,76 @@
+# QA: Typed API client and session store with global 401, unverified-403, 429 and offline handling
+
+This is a composable/store-only slice with no new screen and no new `/v1` handler, so there is no
+Go `httptest` procedure. Verification is entirely Vitest (`task test:web`), unit-testing
+`web/src/composables/useApi.ts` and `web/src/stores/session.ts` directly, plus a small check that
+the existing router guard suite still passes unmodified.
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Mock `global.fetch` per case (`vi.fn()`), install a Pinia instance (`createPinia()` /
+`setActivePinia`) before each test, and import the real `router` singleton from `@/router` so
+`request(...)`'s navigation calls are observable on `router.currentRoute`. No real backend, no
+httptest server, no live SMTP.
+
+1. **Successful request returns parsed JSON and leaves isOffline false** — mock fetch resolving
+   `{ ok: true, status: 200, json: async () => ({ id: 5 }) }`; call
+   `useApi().request('/v1/article/5')`; assert it resolves to `{ id: 5 }`, assert `fetch` was called
+   with `credentials: 'include'`, and assert the exported `isOffline` ref is `false`.
+2. **401 mid-session redirects and clears the session** — seed the session store with
+   `session = { verified: true }`, `status = 'ready'`; navigate the router to `/article/12/edit`
+   first so `router.currentRoute.value.fullPath` matches; mock fetch resolving status 401; call
+   `useApi().request('/v1/article/12')`; assert the promise rejects with an `ApiError` whose
+   `status === 401`; assert `session.session === null` and `session.status === 'ready'`; assert
+   `router.currentRoute.value.fullPath` is
+   `/login?redirect=%2Farticle%2F12%2Fedit&reason=expired` (or the equivalent decoded query object).
+3. **getMe's own 401 does not trigger the global redirect** — seed
+   `session = null, status = 'checking'`; mock fetch resolving status 401; record
+   `router.currentRoute.value.fullPath` before the call; call `useApi().getMe()`; assert it rejects
+   with `ApiError` status 401; assert the router's current route is unchanged from before the call.
+4. **403 with a known-unverified session redirects to /register/pending** — seed
+   `session = { verified: false }, status = 'ready'`; mock fetch resolving status 403; call
+   `useApi().request('/v1/article/')`; assert the promise rejects with `ApiError` status 403; assert
+   `router.currentRoute.value.path === '/register/pending'`; assert
+   `session.session` is still `{ verified: false }`.
+5. **403 with no session, or a verified session, passes through untouched** — two cases,
+   `session = null` and `session = { verified: true }`, both `status = 'ready'`; mock fetch resolving
+   status 403; navigate the router to a known path first; call `useApi().request(...)`; assert the
+   promise rejects with `ApiError` status 403; assert the router's current route did not change;
+   assert the session store's state object is unchanged (`toEqual` the pre-call snapshot).
+6. **429 exposes retryAfter parsed from the Retry-After header** — mock fetch resolving
+   `{ ok: false, status: 429, headers: new Headers({ 'Retry-After': '30' }) }`; call
+   `useApi().request('/v1/auth/login', { method: 'POST' })`; assert the rejection is an `ApiError`
+   with `status === 429` and `retryAfter === 30`.
+7. **429 with no Retry-After header exposes retryAfter as undefined** — same as above with no header
+   set; assert `retryAfter === undefined`.
+8. **Network failure throws NetworkError, not ApiError, and sets isOffline true** — set
+   `Object.defineProperty(navigator, 'onLine', { value: true, configurable: true })`; mock fetch to
+   `mockRejectedValue(new TypeError('Failed to fetch'))`; call `useApi().request('/v1/article/')`;
+   assert the rejection is instanceof `NetworkError` and `not instanceof ApiError`; assert `isOffline`
+   is `true` after the rejection settles.
+9. **A later successful request clears isOffline** — starting from `isOffline === true` (reuse the
+   state from test 8, or set it directly if the module exposes a test seam), keep
+   `navigator.onLine === true`, mock fetch resolving 200; call `useApi().request('/v1/article/')`;
+   assert `isOffline` becomes `false` after the call resolves.
+10. **window online/offline events drive isOffline directly** — dispatch
+    `window.dispatchEvent(new Event('offline'))`; assert `isOffline === true`; dispatch
+    `window.dispatchEvent(new Event('online'))`; assert `isOffline === false`. If `useApi`'s offline
+    tracking is implemented as a composable that needs to be "activated" (e.g. listeners attached on
+    first `useApi()` call or app mount), call `useApi()` once before dispatching the events.
+11. **Regression: existing getMe/session/router-guard suites stay green** — run
+    `web/src/router/__tests__/routerGuard.spec.ts` (and any existing `useApi`/`session` spec files)
+    unmodified alongside the new tests in the same `task test:web` run; assert no existing test's
+    assertions changed and all still pass. This is not a new scenario to author, just a check that the
+    new request()/isOffline/clear() additions don't regress boot, session caching or the
+    public/session/verified/any redirect matrix already covered by
+    `features/nuxt_ui_shell_foundation.feature`.
+
+## Manual verification
+
+- **Real network offline test** — disable the machine's network adapter (or use browser devtools'
+  "Offline" throttling) against a `bun dev` instance, trigger a real authenticated call, and confirm
+  `isOffline` flips and a consuming banner-style UI would show, since Vitest only simulates a
+  rejected `fetch`, never a real dropped connection.
+- **429 countdown UI** — this slice only proves `useApi` surfaces `retryAfter`; the actual countdown
+  display (`useRetryAfter`, per `docs/design/components.md`) belongs to the login and
+  password-reset screen slices and is out of scope 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/articles_list.feature

@@ -0,0 +1,259 @@
+Feature: Articles list screen
+
+  As a verified RenewCMS owner
+  I want /article to list every article with its status, let me search and filter it, and let me
+    publish, unpublish or delete a row without leaving the page
+  So that I can manage my whole set of articles from one place, with the list always reflecting
+    what the server actually holds
+
+  Background:
+    Given /article is a verified route (meta.auth "verified") rendered as ArticlesPage inside
+      DashboardShell, per docs/design/routes.md
+    And ArticlesPage calls GET /v1/article/ once per navigation to load the full list (all
+      articles, online and draft, because the request carries the jwt cookie), and every row
+      action goes over PATCH /v1/article/{id}/publish, PATCH /v1/article/{id}/unpublish or
+      DELETE /v1/article/{id}; all three endpoints already exist and this slice wires the SPA to
+      them unchanged, except for one persistence-layer change: ArticleRepository.FindByFilters
+      (which backs GET /v1/article/) gains a .Preload("Images") call, mirroring the one
+      ArticleRepository.Get already has, so every article in the list response carries its real
+      Images array instead of coming back empty; no domain or use-case change is needed, since
+      article.Article.Images already exists
+    And the PageHeader shows breadcrumb "Articles" (mobile title "Articles")
+    And search and the active tab live in the URL query string (?q=, ?status=), so the filtered
+      view can be linked and survives a reload; the list is always sorted by last updated, newest
+      first, with no interactive sort control in this slice; search is case-insensitive, ignores
+      accents, matches anywhere in the title, and is debounced 120 ms; tab counts (All, Online,
+      Drafts) are always computed from the full list fetched by GET /v1/article/, so they never
+      change while the user is only searching
+    And the list is rendered as ArticleTable (desktop, md and up) or ArticleCardList (below md),
+      both fed by the same articles array, loading flag and per-row busy state, and both routed
+      through the same row actions
+    And each row shows its title (a real link to /article/:id/edit), an ArticleStatusBadge (online
+      or draft), and its updated date (relative within 7 days, e.g. "5 days ago"; an absolute date
+      beyond that, e.g. "18 Aug 2026", with the full timestamp in a title attribute)
+    And clicking anywhere on a row except its menu button navigates to /article/:id/edit
+    And each row's ellipsis button (or Enter while it is focused) opens that row's menu, named
+      "Actions for {title}", listing Edit (to /article/:id/edit), Publish or Unpublish (whichever
+      applies to that row's current status), Copy API URL, and, below a separator, "Delete…" in
+      brick red, always last
+    And "Copy API URL" writes the absolute URL "{origin}/v1/article/{id}" to the clipboard; on
+      success it raises a success toast (icon circle-check, id "article-link-copied-{id}"): title
+      "Link copied" text "The API URL for \"{title}\" is on your clipboard."; if the clipboard
+      write itself fails, it raises an error toast instead (icon circle-x, id
+      "article-link-copy-failed-{id}"): title "Couldn't copy the link", with no text line
+    And row actions are never optimistic: a row only changes once the server responds; while a
+      publish or unpublish request for a row is in flight, that row alone is disabled and shows a
+      busy label ("Publishing…" or "Unpublishing…"), and every other row stays interactive
+    And a successful publish or unpublish (200) updates that row's ArticleStatusBadge and updated
+      date in place and raises a success toast (icon circle-check, id
+      "article-published-{id}" or "article-unpublished-{id}" per components.md's action-plus-id
+      toast convention): title "Article published" text "\"{title}\" is now online." for a
+      publish, or title "Article unpublished" text "\"{title}\" is now offline." for an unpublish
+    And a 500 or network failure on a publish or unpublish leaves that row exactly as it was
+      before the request and raises an error toast (icon circle-x, duration 0 so it stays until
+      dismissed or retried, id "article-publish-failed-{id}" or "article-unpublish-failed-{id}"):
+      title "Couldn't publish" or "Couldn't unpublish", text "The server didn't respond. Nothing
+      changed.", with an action "Retry" that re-sends the same request
+    And a 404 on any row action (publish, unpublish or delete) closes any open row menu or delete
+      dialog for that row, removes the row from the list, recomputes the tab counts from the
+      remaining articles, and raises an info toast (icon info, id "article-not-found-{id}"): title
+      "That article no longer exists" text "It was deleted somewhere else, so we removed it from
+      the list."
+    And "Delete…" opens ConfirmDialog: title "Delete this article?" text "\"{title}\" and its
+      {n} images will be deleted. This can't be undone." (a components.md convention: the row's
+      title plus its image count, "and its image" for exactly 1 and no image clause at all for 0),
+      "Cancel" and "Delete article" (danger); while the DELETE request is in flight the dialog
+      cannot be dismissed by Cancel, Esc or a backdrop click, both buttons are disabled, the
+      confirm button reads "Deleting…" with a loading indicator, and aria-busy is set
+    And a 500 on the delete request keeps the dialog open and instead shows an inline alert inside
+      the dialog: "Couldn't delete the article, so it's still there. Try again in a moment.",
+      re-enabling "Cancel" and "Delete article" so the user can retry or back out; the article is
+      left untouched
+    And a successful delete (204) closes the dialog, removes the row, moves focus to the next row
+      (or the page heading if the deleted row was last), recomputes the tab counts, and raises a
+      success toast (icon circle-check, id "article-deleted-{id}"): title "Article deleted" text
+      "\"{title}\" and its images are gone."; this is also where a delete initiated from the editor
+      ends up
+    And the list, sorted by last updated with the most recently updated article first, holds
+      these 6 articles by default: id 1 "How we price a bathroom renovation" (online, updated "2
+      hours ago"), id 2 "Choosing lime plaster for old stone walls" (draft, updated "Yesterday"),
+      id 3 "Before and after: the Rue Verte kitchen" (online, updated "3 days ago"), id 4 "Winter
+      checklist for timber windows" (draft, updated "5 days ago"), id 5 "Why we reuse original
+      floorboards" (online, updated "18 Aug 2026"), id 6 "Our first passive-house retrofit"
+      (online, updated "2 Jul 2026") — 6 total, 4 online, 2 drafts
+
+  Scenario: Default — the list loads sorted by last updated, newest first
+    Given GET /v1/article/ resolves 200 with the 6-article fixture above
+    When the user navigates to /article
+    Then the breadcrumb reads "Articles" (mobile title "Articles")
+    And the tabs read "All 6" "Online 4" "Drafts 2"
+    And the rows appear in exactly the fixture's order, each with its title link, its
+      ArticleStatusBadge and its updated date
+    And the table (desktop) carries a visually hidden caption "Articles, sorted by last updated,
+      newest first"
+
+  Scenario: Loading — skeleton rows while the first request, or a retry, is in flight
+    Given GET /v1/article/ has not yet resolved
+    When the user navigates to /article
+    Then 5 skeleton rows replace the table or card list, and the list container is aria-busy="true"
+    When GET /v1/article/ then resolves 200 with the 6-article fixture
+    Then the skeleton rows are replaced by the Default state's rows
+
+  Scenario: Row menu open shows Edit, the status-appropriate action, Copy API URL and Delete…
+    Given the Default state, with the row for id 4 "Winter checklist for timber windows" (draft,
+      updated "5 days ago")
+    When the user activates that row's ellipsis button
+    Then that row's menu opens, named "Actions for Winter checklist for timber windows", listing
+      Edit, Publish, Copy API URL, and, below a separator, "Delete…" in brick red
+    And every other row is unaffected
+
+  Scenario: Copy API URL succeeds — the absolute URL is copied and confirmed
+    Given the Default state, with the row for id 4 "Winter checklist for timber windows"
+    When the user chooses "Copy API URL" from id 4's row menu
+    Then "{origin}/v1/article/4" is written to the clipboard
+    And a success toast appears: icon circle-check, id "article-link-copied-4", title "Link
+      copied", text "The API URL for \"Winter checklist for timber windows\" is on your
+      clipboard."
+
+  Scenario: Copy API URL fails — the clipboard write itself is rejected
+    Given the Default state, with the row for id 4 "Winter checklist for timber windows"
+    When the user chooses "Copy API URL" from id 4's row menu, and the clipboard write fails
+    Then an error toast appears: icon circle-x, id "article-link-copy-failed-4", title "Couldn't
+      copy the link", with no text line
+
+  Scenario: Empty — zero articles
+    Given GET /v1/article/ resolves 200 with zero articles
+    When the user navigates to /article
+    Then the tabs read "All 0" "Online 0" "Drafts 0"
+    And an EmptyState (variant no-articles) replaces the list: icon file-text, title "No articles
+      yet", text "Write your first one. It stays a draft until you publish it.", and a primary
+      action "New article"
+    When the user activates "New article"
+    Then NewArticleModal opens
+
+  Scenario: No results — a search matches nothing, but the tab counts still show the full list
+    Given the Default state has loaded
+    When the user types "tiles" into the search field
+    Then, after the 120 ms debounce, an EmptyState (variant no-results) replaces the list: icon
+      search, title "No articles match \"tiles\"", text "Check the spelling, or search for a
+      shorter part of the title.", and an action "Clear search"
+    And the tabs still read "All 6" "Online 4" "Drafts 2"
+    When the user activates "Clear search"
+    Then the search field is cleared, the Default state's rows reappear, and focus returns to the
+      search field
+
+  Scenario Outline: An empty tab shows its own EmptyState, while the other tab still counts correctly
+    Given GET /v1/article/ resolves 200 with <fixture>
+    When the user navigates to /article and selects the "<tab>" tab
+    Then the tabs read "<counts>"
+    And an EmptyState replaces the list: title "<title>" text "<text>" action "<action>"
+
+    Examples:
+      | fixture                                    | tab     | counts                            | title                     | text                                              | action        |
+      | 4 articles, all online, none drafts        | Drafts  | All 4, Online 4, Drafts 0         | No drafts                 | Everything you've written is online.             | New article   |
+      | 4 articles, all drafts, none online         | Online  | All 4, Online 0, Drafts 4         | Nothing is online yet     | Publish a draft and it will appear on your website. | Show drafts   |
+
+  Scenario: Action in progress — publishing a row disables only that row
+    Given the Default state has loaded
+    When the user chooses "Publish" from id 4 "Winter checklist for timber windows"'s row menu
+    Then PATCH /v1/article/4/publish is sent
+    And that row alone is disabled and shows the busy label "Publishing…", while the other 5 rows
+      stay interactive
+
+  Scenario: Published — a 200 updates the row in place and raises a toast
+    Given the user chose "Publish" from id 4 "Winter checklist for timber windows"'s row menu, and
+      the request is in flight
+    When PATCH /v1/article/4/publish resolves 200 with the article, is_online true, updated "Just
+      now"
+    Then id 4's row shows an online ArticleStatusBadge and updated date "Just now", no longer busy
+    And a success toast appears: icon circle-check, id "article-published-4", title "Article
+      published", text "\"Winter checklist for timber windows\" is now online."
+
+  Scenario Outline: Action failed, publish — a 500 or a network error leaves the row unchanged and offers Retry
+    Given the user chose "Publish" from id 4 "Winter checklist for timber windows"'s row menu, and
+      the request is in flight
+    When PATCH /v1/article/4/publish <failure>
+    Then id 4's row stays unchanged (draft, updated "5 days ago", no longer busy), because a row
+      never changes before the server responds
+    And an error toast appears, staying until dismissed or retried: icon circle-x, id
+      "article-publish-failed-4", title "Couldn't publish", text "The server didn't respond.
+      Nothing changed.", action "Retry"
+    When the user activates "Retry"
+    Then PATCH /v1/article/4/publish is sent again
+
+    Examples:
+      | failure                       |
+      | resolves with a 500 response  |
+      | never reaches the server      |
+
+  Scenario Outline: Action failed, unpublish — a 500 or a network error leaves the row unchanged and offers Retry
+    Given the user chose "Unpublish" from id 3 "Before and after: the Rue Verte kitchen"'s row
+      menu, and the request is in flight
+    When PATCH /v1/article/3/unpublish <failure>
+    Then id 3's row stays unchanged (online, updated "3 days ago", no longer busy), because a row
+      never changes before the server responds
+    And an error toast appears, staying until dismissed or retried: icon circle-x, id
+      "article-unpublish-failed-3", title "Couldn't unpublish", text "The server didn't respond.
+      Nothing changed.", action "Retry"
+    When the user activates "Retry"
+    Then PATCH /v1/article/3/unpublish is sent again
+
+    Examples:
+      | failure                       |
+      | resolves with a 500 response  |
+      | never reaches the server      |
+
+  Scenario Outline: Row vanished, draft row — a 404 on publish or delete removes the row and shows an info toast
+    Given the Default state has loaded
+    When the user <trigger> for id 2 "Choosing lime plaster for old stone walls"
+    And the request resolves 404
+    Then id 2's row is removed from the list (and any open menu or dialog for it closes)
+    And the tabs read "All 5" "Online 4" "Drafts 1"
+    And an info toast appears: icon info, id "article-not-found-2", title "That article no longer
+      exists", text "It was deleted somewhere else, so we removed it from the list."
+
+    Examples:
+      | trigger                                        |
+      | chooses "Publish" from its row menu             |
+      | confirms "Delete article" in its ConfirmDialog   |
+
+  Scenario: Row vanished, online row — a 404 on unpublish removes the row and shows an info toast
+    Given the Default state has loaded
+    When the user chooses "Unpublish" from id 3 "Before and after: the Rue Verte kitchen"'s row
+      menu
+    And the request resolves 404
+    Then id 3's row is removed from the list (and any open menu closes)
+    And the tabs read "All 5" "Online 3" "Drafts 2"
+    And an info toast appears: icon info, id "article-not-found-3", title "That article no longer
+      exists", text "It was deleted somewhere else, so we removed it from the list."
+
+  Scenario: Delete confirm — opens the dialog with the row's title and image count
+    Given the Default state has loaded, and id 4 "Winter checklist for timber windows" has 3 images
+    When the user chooses "Delete…" from id 4's row menu
+    Then ConfirmDialog opens: title "Delete this article?" text "\"Winter checklist for timber
+      windows\" and its 3 images will be deleted. This can't be undone.", "Cancel" and "Delete
+      article" (danger)
+
+  Scenario: Delete in progress — the dialog cannot be dismissed while the request is in flight
+    Given ConfirmDialog is open for id 4 "Winter checklist for timber windows"
+    When the user activates "Delete article"
+    Then DELETE /v1/article/4 is sent
+    And both "Cancel" and the confirm button are disabled, the confirm button reads "Deleting…"
+      with a loading indicator, aria-busy is set, and Esc and a backdrop click do not close it
+
+  Scenario: Delete failed — a 500 shows an inline alert inside the dialog and keeps the article
+    Given ConfirmDialog is open for id 4 "Winter checklist for timber windows", and "Delete
+      article" has been activated
+    When DELETE /v1/article/4 resolves 500
+    Then the dialog stays open, showing the alert "Couldn't delete the article, so it's still
+      there. Try again in a moment.", with "Cancel" and "Delete article" re-enabled
+    And id 4's row is untouched in the list behind the dialog
+
+  Scenario: Deleted — a 204 closes the dialog, removes the row, and moves focus to the next row
+    Given ConfirmDialog is open for id 4 "Winter checklist for timber windows", and "Delete
+      article" has been activated
+    When DELETE /v1/article/4 resolves 204
+    Then the dialog closes, id 4's row is removed from the list, and focus moves to the next row
+    And the tabs read "All 5" "Online 4" "Drafts 1"
+    And a success toast appears: icon circle-check, id "article-deleted-4", title "Article
+      deleted", text "\"Winter checklist for timber windows\" and its images are gone."

features/articles_list.qa.md

@@ -0,0 +1,176 @@
+# QA: Articles list screen
+
+## Implementation note for coder (informational, not a QA assertion)
+
+`internal/infrastructure/persistence/repositories/articleRepository.go`'s `FindByFilters` gains
+`.Preload("Images")`, mirroring `Get`, so `GET /v1/article/` carries real `Images` arrays for the
+delete dialog's count. This is a persistence-layer change asserted by the existing
+`var _ domain.Repository = &ArticleRepository{}`; it needs no domain or use-case change, since
+`article.Article.Images` already exists.
+
+Toast ids follow components.md's action-plus-id convention: "article-published-{id}",
+"article-unpublished-{id}", "article-publish-failed-{id}", "article-unpublish-failed-{id}",
+"article-not-found-{id}", "article-deleted-{id}", "article-link-copied-{id}",
+"article-link-copy-failed-{id}".
+
+## HTTP-level (Go, `test/`, `task test`)
+
+Build `article.NewHandler(...)` over the real use cases wired to a fake `article.Repository` (in
+the style of `test/article_test.go`'s `mockArticleRepo`), mounted on a fresh `chi.NewRouter()`
+mirroring `NewArticleRouter` in `api/router.go` (the outer group, no auth, for `GET /`). Call
+`validator.InitValidator()` first.
+
+1. **GET /v1/article/ returns each article's images array populated** — seed the fake repository
+   with an article whose `Images` slice holds two `image.Image` entries (ids 10 and 11), send
+   `GET /v1/article/` with `httptest`, decode the JSON array, and assert the matching entry's
+   `images` field is a 2-element array containing those ids (not `null` and not empty), proving
+   the handler's response reflects `FindByFilters`'s `Images` data. Because the fake repository's
+   `FindByFilters` is written by this test rather than GORM, it can't exercise the real
+   `.Preload("Images")` SQL by itself — this test only proves the handler passes the repository's
+   `Images` data through to JSON unchanged. The `.Preload` call itself against a real SQLite file is
+   covered under Manual verification below.
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Mock `useApi`'s calls for `GET /v1/article/`, `PATCH /v1/article/{id}/publish`,
+`PATCH /v1/article/{id}/unpublish`, `DELETE /v1/article/{id}`, and the clipboard write (e.g.
+`navigator.clipboard.writeText`), per case; no real backend, no httptest server. Mount
+ArticlesPage inside DashboardShell with a resolved verified session and a test router at
+/article. Sample data throughout is the Background's 6-article fixture (ids 1-6, titles and dates
+as listed), unless a scenario's Examples row substitutes a smaller fixture.
+
+1. **Default** — mock `GET /v1/article/` resolving 200 with the 6-article fixture; assert
+   breadcrumb "Articles"; assert tabs "All 6" "Online 4" "Drafts 2"; assert the rows render in
+   fixture order with title link, ArticleStatusBadge and updated date; assert the table's visually
+   hidden caption reads "Articles, sorted by last updated, newest first".
+2. **Loading** — mock `GET /v1/article/` with an unresolved promise; assert 5 skeleton rows and
+   `aria-busy="true"` on the list container; resolve 200 with the fixture; assert the Default
+   state's rows replace the skeletons.
+3. **Row menu open** — from Default, click id 4's ellipsis button; assert the menu opens named
+   "Actions for Winter checklist for timber windows" with items Edit, Publish, Copy API URL, and a
+   separator then "Delete…"; assert no other row is affected.
+4. **Copy API URL succeeds** — from Default, mock the clipboard write to resolve, choose "Copy API
+   URL" from id 4's menu; assert the clipboard write was called with
+   `"{origin}/v1/article/4"` (using the test's `window.location.origin`); assert a toast was
+   raised with id "article-link-copied-4", icon circle-check, title "Link copied", text "The API
+   URL for \"Winter checklist for timber windows\" is on your clipboard."
+5. **Copy API URL fails** — from Default, mock the clipboard write to reject, choose "Copy API
+   URL" from id 4's menu; assert a toast was raised with id "article-link-copy-failed-4", icon
+   circle-x, title "Couldn't copy the link", and no description text.
+6. **Empty** — mock `GET /v1/article/` resolving 200 with `[]`; assert tabs "All 0" "Online 0"
+   "Drafts 0"; assert the no-articles EmptyState (icon file-text, title "No articles yet", text,
+   action "New article"); click it; assert NewArticleModal opens.
+7. **No results** — from Default, type "tiles" into the search field; advance past the 120 ms
+   debounce (fake timers); assert the no-results EmptyState (icon search, title "No articles match
+   \"tiles\"", text, action "Clear search"); assert tabs still read "All 6" "Online 4" "Drafts 2";
+   click "Clear search"; assert the Default rows reappear and the search field has focus.
+8. **Empty tab, Examples-driven** — (a) mock `GET /v1/article/` with 4 online-only articles, select
+   the Drafts tab, assert tabs "All 4" "Online 4" "Drafts 0" and the no-drafts EmptyState (icon
+   pencil-line, title "No drafts", text "Everything you've written is online.", action "New
+   article"); (b) mock 4 draft-only articles, select the Online tab, assert tabs "All 4" "Online 0"
+   "Drafts 4" and the EmptyState titled "Nothing is online yet", text "Publish a draft and it will
+   appear on your website.", action "Show drafts" (icon per the board, confirmed in the visual
+   check below).
+9. **Action in progress** — from Default, choose "Publish" from id 4's menu; assert
+   `PATCH /v1/article/4/publish` is called; assert id 4's row is disabled with busy label
+   "Publishing…" and the other 5 rows stay enabled.
+10. **Published** — continuing from 9, resolve the PATCH 200 with `is_online: true`, updated "Just
+    now"; assert id 4's row shows the online badge and "Just now", no longer busy; assert a toast
+    was raised with id "article-published-4", icon circle-check, title "Article published", text
+    "\"Winter checklist for timber windows\" is now online."
+11. **Action failed, publish, Examples-driven** — for each of a 500 response and a network
+    rejection: choose "Publish" from id 4's menu, resolve/reject the mocked PATCH accordingly;
+    assert id 4's row stays exactly unchanged (draft, "5 days ago", not busy) throughout — the row
+    is never touched before the (failed) response, so there is nothing to revert; assert a toast
+    with id "article-publish-failed-4", icon circle-x, title "Couldn't publish", text "The server
+    didn't respond. Nothing changed.", action "Retry"; click "Retry"; assert the same PATCH is
+    called again.
+12. **Action failed, unpublish, Examples-driven** — for each of a 500 response and a network
+    rejection: choose "Unpublish" from id 3's menu (an online row), resolve/reject the mocked
+    PATCH accordingly; assert id 3's row stays exactly unchanged (online, "3 days ago", not busy);
+    assert a toast with id "article-unpublish-failed-3", icon circle-x, title "Couldn't
+    unpublish", text "The server didn't respond. Nothing changed.", action "Retry"; click "Retry";
+    assert the same PATCH is called again.
+13. **Row vanished, draft row, Examples-driven** — for each of (publish 404), (delete-confirm
+    404) on id 2 (a draft row): trigger the action, resolve the mocked call 404; assert id 2's row
+    is removed; assert tabs read "All 5" "Online 4" "Drafts 1"; assert a toast with id
+    "article-not-found-2", icon info, title "That article no longer exists", text "It was deleted
+    somewhere else, so we removed it from the list."
+14. **Row vanished, online row** — choose "Unpublish" from id 3's menu, resolve the mocked PATCH
+    404; assert id 3's row is removed; assert tabs read "All 5" "Online 3" "Drafts 2"; assert a
+    toast with id "article-not-found-3", icon info, title "That article no longer exists", text
+    "It was deleted somewhere else, so we removed it from the list."
+15. **Delete confirm** — from Default (with id 4 carrying 3 images in the mocked
+    `GET /v1/article/` response), choose "Delete…" from id 4's menu; assert ConfirmDialog opens
+    with title "Delete this article?", text "\"Winter checklist for timber windows\" and its 3
+    images will be deleted. This can't be undone.", "Cancel" and "Delete article".
+16. **Delete in progress** — from the open dialog, click "Delete article"; assert
+    `DELETE /v1/article/4` is called; assert both buttons are disabled, the confirm button reads
+    "Deleting…", `aria-busy` is set, and Esc / backdrop click do not close it.
+17. **Delete failed** — continuing from 16, resolve the DELETE 500; assert the dialog stays open
+    with the inline alert "Couldn't delete the article, so it's still there. Try again in a
+    moment.", both buttons re-enabled; assert id 4's row is unchanged in the list behind the
+    dialog.
+18. **Deleted** — continuing from 16 (a fresh attempt), resolve the DELETE 204; assert the dialog
+    closes, id 4's row is removed, focus moves to the next row; assert tabs read "All 5" "Online
+    4" "Drafts 1"; assert a toast with id "article-deleted-4", icon circle-check, title "Article
+    deleted", text "\"Winter checklist for timber windows\" and its images are gone."
+
+## Visual (manual verification — desktop and mobile, light and dark)
+
+Reference: `docs/design/screens/articles.md` and `docs/design/source/RenewCMS Screens
+Back-office.dc.html`, group "Articles". Run `task visual:check -- articles` for each state below
+and compare against the board frame; add each state's mock setup to `web/visual/states.ts` first,
+reusing the 6-article fixture (ids/titles/dates above) as sample data. This screen shows relative
+dates ("2 hours ago", "5 days ago"), so fix `now` to the value the board's own script assumes for
+those relative strings to render identically (derive it from "2 hours ago" against "12 Mar 2026"
+and the absolute dates shown, e.g. "18 Aug 2026", per the board's `base` fixture in the source
+file).
+
+- [ ] Default: tabs "All 6/Online 4/Drafts 2", 6 rows in fixture order, title/status/updated
+      columns (confirm against the board frame directly whether a Created column is also shown —
+      components.md's prose and the rendered board table disagree on this).
+- [ ] Row menu open: id 4's menu open with Edit/Publish/Copy API URL/Delete…, matching the board's
+      dropdown placement and the brick-red Delete… treatment.
+- [ ] Loading: 5 skeleton rows shaped like the real layout.
+- [ ] Empty: EmptyState icon file-text, title, text, single "New article" action.
+- [ ] No results: EmptyState icon search, title with the quoted search term, text, "Clear search".
+- [ ] No drafts / Nothing online: both empty-tab EmptyStates, including the "Nothing is online
+      yet" state's icon (confirm it directly against the board frame, since it isn't given in the
+      prose extraction read for this slice).
+- [ ] Action in progress: id 4's row at 50% opacity with a spinner in the status cell and
+      "aria-busy".
+- [ ] Published / Action failed toasts: colors, icons and the "Retry" action match the board.
+- [ ] Copy API URL: no board state depicts its toasts; verify their copy and icons directly in the
+      app against this spec rather than a board frame.
+- [ ] Row vanished: the info toast and the row's removal match the board.
+- [ ] Delete confirm / in progress / failed: the dialog's three states match the board exactly,
+      including the inline alert's placement in the failed state.
+- [ ] Deleted: toast copy matches, and focus visibly lands on the next row.
+- [ ] Keyboard/focus: roving tabindex across the tab list (Tab enters on the selected tab, ←/→
+      move and activate); each row's title link is reachable and Enter opens the editor; each
+      row's menu opens with Enter/Space/↓, arrow keys and type-ahead navigate it, Home/End jump to
+      the ends, Esc closes it and returns focus to the ellipsis button; ConfirmDialog traps focus,
+      starts on Cancel, and Enter does not confirm by default; on a successful delete, focus lands
+      on the next row (or the page heading if none).
+- [ ] Motion: skeleton pulse and modal open/close follow the standard timings and stop under
+      reduced motion.
+
+## Manual verification
+
+- **Real GET/PATCH/DELETE round trips against a running server** — Vitest only mocks `useApi`;
+  confirm the real 200/404/500 responses, and the real `updated_at`-based ordering, against
+  `task dev` with a live SQLite file, since these automated tests never exercise the actual Go
+  handlers or use cases.
+- **Real .Preload("Images") behavior against a live SQLite file** — confirm `GET /v1/article/`
+  returns accurate, non-empty `images` arrays for articles with real uploaded images, and `[]` for
+  articles with none, against a running server, since the HTTP-level Go test above only proves the
+  handler forwards whatever the (fake) repository returns, not that the real GORM query populates
+  it correctly.
+- **Real image-count accuracy in the delete dialog** — confirm the delete dialog's count matches
+  an article's actual attached images end to end (upload images, then delete), since Vitest only
+  ever supplies a mocked count.
+- **Toast placement and stacking on a live app, including the three-toast cap** — confirm against
+  a running app, since Vitest only asserts `useToast().add` was called with the right arguments.
+- **Real clipboard write on a live app** — confirm `navigator.clipboard.writeText` actually places
+  the URL on the system clipboard in a real browser, since Vitest only mocks the clipboard API.

features/auth_shell_login_conformance.feature

@@ -0,0 +1,94 @@
+Feature: AuthShell and log-in screen conform to the design spec
+
+  As the maintainer of RenewCMS
+  I want AuthShell and LoginView built from the exact primitives docs/design/components.md
+    specifies — AppLogo, UPageCard's own title/description styling, the muted page background,
+    UForm with "Forgot password?" in the Password field's #hint slot, and the neutral-by-default,
+    red-on-error input border
+  So that the log-in screen (and every other AuthShell-based screen) matches the visual spec of
+    record instead of ad hoc markup that happens to look similar
+
+  Background:
+    Given AuthShell is the layout for every public route, per docs/design/routes.md
+    And AuthShell composes a UPageCard variant="outline" as the centered card, with AppLogo
+      rendered as the card's first element — left-aligned above the title/description block,
+      sharing the card's own 24px gap — not as a separate element centered outside/above the
+      card, per docs/design/components.md's AuthShell section and
+      docs/design/source/AuthCard.dc.html
+    And AppLogo is a reusable component (props include size) rendering the brand mark from
+      docs/design/source/brand/favicon.svg as inline SVG, not an <img>
+    And UPageCard's title renders through its own title slot as an h1 (tabindex="-1", so route
+      changes can move focus to it, per AuthShell's a11y spec), and its description renders
+      through UPageCard's description prop — neither is freeform markup in the default slot
+    And from the sm breakpoint up, the centered <main> sits on the muted page background
+      (--ui-bg-muted), the same canvas the rest of the app uses; below sm it sits on --ui-bg
+      instead, per docs/design/components.md's AuthShell "Responsive" line
+    And LoginView's form is a UForm wrapping the Username and Password UFormFields and the
+      submit button
+    And the Password UFormField's "Forgot password?" link renders through the field's #hint
+      slot, in the position the Auth board draws it — right-aligned on the label row — per
+      docs/design/source/RenewCMS Screens Auth.dc.html, group "Log in"
+    And every UInput on the page uses the neutral control-edge border (--ui-border-accented) by
+      default, and turns to the error edge (--ui-error) only when its field has an error, per
+      docs/design/components.md's Input section (":highlight bound to the field error") and
+      foundations.md's Borders and elevation
+
+  Scenario: AppLogo renders the brand mark as inline SVG, and theme-switches
+    Given a public screen renders inside AuthShell
+    When AuthShell mounts
+    Then an AppLogo renders as UPageCard's first element, inside the card, left-aligned, sharing
+      the card's 24px gap with the title/description block below it — not centered above the card
+    And the logo is inline SVG sourced from docs/design/source/brand/favicon.svg, at 32px, not as
+      an <img> tag
+    And the logo carries alt="RenewCMS" (role="img" aria-label="RenewCMS" on the SVG)
+    And the logo is not wrapped in a link, since there is nothing public to go back to
+    And the black square has no edge stroke in light mode or in dark mode, per
+      docs/design/source/AuthCard.dc.html's renderVals(), which computes the logo's edge as the
+      literal, non-theme-branched value "transparent"
+
+  Scenario: UPageCard's title is the page h1, and its description uses UPageCard's own styling
+    Given AuthShell renders with title "Log in" and description
+      "Welcome back. Log in to manage your articles."
+    When AuthShell mounts
+    Then the card is a UPageCard with variant="outline"
+    And UPageCard's title slot renders an h1 with tabindex="-1" containing "Log in"
+    And UPageCard's description prop is "Welcome back. Log in to manage your articles."
+    And neither the title nor the description is rendered as separate freeform markup inside
+      UPageCard's default slot
+
+  Scenario: The page sits on the muted background from sm up, and on the default background below sm
+    Given AuthShell renders any public screen at a viewport of sm or wider
+    When AuthShell mounts
+    Then the centered <main> uses the muted background token (--ui-bg-muted)
+    And the card keeps its border, is capped at 400px, and its top sits 12vh from the top
+
+  Scenario: Below sm, AuthShell drops the muted background, the card border and the card padding
+    Given AuthShell renders any public screen at a viewport below sm
+    When AuthShell mounts
+    Then the centered <main> uses the default background token (--ui-bg), not the muted one
+    And the card has no border and fills the screen with 20px padding
+    And the fields and buttons on the page render at the xl size
+
+  Scenario: The login form is a UForm
+    Given the user is on /login
+    When the login form renders
+    Then the form is a UForm, not a plain HTML <form>, wrapping the Username UFormField, the
+      Password UFormField and the submit button
+
+  Scenario: "Forgot password?" renders in the Password field's hint slot
+    Given the user is on /login
+    When the login form renders
+    Then the Password UFormField's "Forgot password?" link is rendered through the field's
+      #hint slot
+    And the Password field's label reads only "Password", with no link inside it
+
+  Scenario: Inputs are neutral by default and turn to the error edge only when their field has an error
+    Given the user is on /login with no validation errors yet
+    When the Username and Password UInput fields render
+    Then both use the neutral control-edge border (--ui-border-accented), with :highlight false
+    When the user submits with Username "ma" and Password empty (the Validation errors state,
+      per docs/design/screens/log-in.md)
+    Then the Username UInput's edge turns to the error color (--ui-error), with :highlight true,
+      alongside the message "Use at least 3 characters."
+    And the Password UInput's edge turns to the error color (--ui-error), with :highlight true,
+      alongside the message "Enter your password."

features/auth_shell_login_conformance.qa.md

@@ -0,0 +1,88 @@
+# QA: AuthShell and log-in screen conform to the design spec
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+No `/v1` calls are relevant to these assertions; mount AuthShell and LoginView directly (LoginView
+already needs `useApi`/`GET /v1/auth/registration` mocked per features/login_screen.qa.md's setup,
+reused here only as scaffolding, not as the thing under test).
+
+1. **AppLogo renders inline SVG with no edge in either mode** — mount AuthShell with title
+   "Log in"; assert an inline `<svg>` (not `<img>`) renders as UPageCard's first child element,
+   left-aligned (not centered) above the title/description block, sharing the card's 24px gap, at
+   32px, with `role="img" aria-label="RenewCMS"`, and is not inside an `<a>`; assert its outer
+   square has no stroke in light mode; switch to dark mode (toggle the `.dark` class the way
+   `nuxt_ui_shell_foundation`'s color-mode tests do) and assert the outer square still has no
+   stroke, per `docs/design/source/AuthCard.dc.html`'s literal, non-theme-branched
+   `edge: 'transparent'`.
+2. **UPageCard title is an h1 with tabindex="-1"** — mount AuthShell with title "Log in" and
+   description "Welcome back. Log in to manage your articles."; assert
+   `wrapper.find('h1').attributes('tabindex')` is `"-1"` and its text is "Log in"; assert the
+   description text "Welcome back. Log in to manage your articles." renders via UPageCard's
+   `description` prop (not as a sibling `<p>` hand-authored in AuthShell's template). This
+   replaces the older assertion in `AuthShell.spec.ts` that only checked for any `<h1>`; keep that
+   assertion passing (h1 text still equals the title) while adding the tabindex check.
+3. **Muted background at sm and up** — mount AuthShell at a `>= 640px` viewport (mock
+   `useBreakpoints`/matchMedia the way other shell tests do); assert `<main>`'s class list
+   includes the muted background utility (e.g. `bg-muted`); assert the card renders with a
+   border and is capped at 400px width, offset 12vh from the top.
+4. **Default background, borderless card, 20px padding, xl controls below sm** — mount AuthShell
+   at a `< 640px` viewport; assert `<main>`'s class list includes the default background utility
+   (`bg-default`) and not the muted one; assert the card has no border class; assert the card's
+   padding is 20px; assert the Username/Password inputs and submit button render at `size="xl"`.
+5. **Login form is a UForm** — mount LoginView at /login; assert the form wrapping the fields is
+   a UForm component instance, not a bare `<form>` element with only `@submit.prevent` wired by
+   hand.
+6. **Forgot password in the #hint slot** — mount LoginView at /login; assert the Password
+   UFormField is passed content (or renders content) in its `hint` slot containing a
+   "Forgot password?" link to /register/reset/request; assert the field's rendered label text is
+   exactly "Password" with no link inside it.
+7. **Inputs default to neutral, then highlight red on error** — mount LoginView at /login; assert
+   the Username and Password `UInput` components render with `highlight` falsy (or absent) and
+   the theme's default ring class (`ring-(--ui-border-accented)`); then trigger the Validation
+   errors state (type "ma" into Username, submit with Password empty); assert both `UInput`s now
+   receive `:highlight="true"` (or the field's error is otherwise truthy) so the edge renders in
+   `--ui-error`, alongside "Use at least 3 characters." and "Enter your password." respectively.
+
+### Implementation finding for coder
+`web/src/views/LoginView.vue`'s Username and Password `UInput`s currently receive no `:highlight`
+prop at all — `UFormField` gets `:error="usernameError"` / `:error="passwordError"`, but that value
+is never forwarded to the inner `UInput`. Today the edge never turns red in the Validation errors
+state; this isn't a stale/inverted binding, it's a missing one. Wiring `:highlight="!!usernameError"`
+/ `:highlight="!!passwordError"` (or equivalent) onto each `UInput` is the fix scenario 7 above
+pins down.
+
+## Visual (manual verification — desktop and mobile, light and dark)
+
+Reference: `docs/design/source/RenewCMS Screens Auth.dc.html`, group "Log in", plus
+`docs/design/source/RenewCMS Components Product.dc.html`'s AuthShell drawing and
+`docs/design/source/RenewCMS Components Primitives.dc.html`'s Input drawing.
+
+- [ ] AppLogo renders inside UPageCard as its first element, left-aligned above the title (not
+      centered above the card), sharing the card's 24px gap; the mark matches the favicon.svg
+      drawing exactly (white R on a black square), desktop and mobile; no edge stroke is visible
+      around the square in either light or dark mode.
+- [ ] UPageCard title ("Log in") renders at the card-title size/weight from the AuthShell drawing
+      and receives focus (visible focus ring) on route change; description text matches
+      "Welcome back. Log in to manage your articles." styling, desktop and mobile, light and dark.
+- [ ] At sm and up: 400px card with its border, 12vh top offset, on the muted page canvas, light
+      and dark.
+- [ ] Below sm: card fills the screen borderless with 20px padding on the default (not muted)
+      background; fields and the submit button render at the touch (xl, 44px) size, light and
+      dark.
+- [ ] The Password field's "Forgot password?" link sits right-aligned on the label row (the hint
+      position), matching the Auth board, desktop and mobile, light and dark.
+- [ ] Username and Password fields show the neutral control-edge border by default; in the
+      Validation errors state (short username, empty password) both fields' edges turn to the
+      error color alongside their messages, in both light and dark.
+- [ ] Keyboard/focus: Tab order remains Username → Password → show/hide toggle → "Forgot
+      password?" → submit; UPageCard's h1 is reachable/focusable via tabindex="-1" on route
+      change, matching AuthShell's existing a11y spec.
+
+## Manual verification
+
+- **AppLogo reused in DashboardShell** — out of scope for this slice (AuthShell/login only).
+  `DashboardShell.vue`'s sidebar header is currently a plain `<span class="font-semibold">
+  RenewCMS</span>` (not AppLogo), and its footer is a bare `<span>Log out</span>` instead of the
+  UserMenu component components.md specifies. Both need their own "Built from" conformance pass in
+  a later DashboardShell slice; AppLogo (built here with a `size` prop) will be ready to drop in
+  at that point without changes.

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/dashboard_shell_branding.feature

@@ -0,0 +1,101 @@
+Feature: DashboardShell wordmark, sidebar collapse and the UserMenu
+
+  As the maintainer of RenewCMS
+  I want DashboardShell built from the exact primitives docs/design/components.md specifies —
+    AppLogo plus the "RenewCMS" wordmark in the sidebar header, and a UserMenu (UDropdownMenu on a
+    ghost UButton with a UAvatar) in the sidebar footer, with a collapsed rail that hides text but
+    never drops an accessible name
+  So that every verified route's sidebar matches the visual spec of record and stays usable when
+    collapsed, instead of the current plain-text "RenewCMS" header and "Log out" footer
+
+  Background:
+    Given DashboardShell is the layout for every verified route, per docs/design/routes.md
+    And DashboardShell composes a UDashboardGroup storage="local" with a UDashboardSidebar
+      collapsible :resizable="false" :default-size="14" :collapsed-size="3.5", per
+      docs/design/components.md's DashboardShell section
+    And the sidebar's #header slot renders AppLogo (the same reusable inline-SVG brand mark
+      AuthShell uses) followed by the "RenewCMS" wordmark text, not the plain
+      <span class="font-semibold">RenewCMS</span> the shell renders today
+    And the sidebar's #default slot is a UNavigationMenu orientation="vertical" :collapsed bound
+      to the sidebar's own collapsed state, with items Home, Articles and Integration
+    And the sidebar's #footer slot renders a UserMenu component, not the plain
+      <span>Log out</span> text the shell renders today
+    And UserMenu is a UDropdownMenu :content="{ side: 'top', align: 'start' }" anchored to a
+      ghost UButton block containing a UAvatar and the session's username
+    And the UAvatar's initials are the first two characters of the username, upper-cased (for
+      example "marta" gives "MA"), and the avatar is aria-hidden because the username is shown
+      next to it
+    And UserMenu's dropdown groups, top to bottom, are: an account label (the username); a
+      checkbox group of System, Light and Dark bound to useColorMode().preference, with the
+      current preference's item checked; then Log out, in its own trailing group
+    And Log out calls POST /v1/auth/logout inside a try/finally with a loading flag (no catch),
+      then calls session.clear() and navigates to /login — the exact same shape PendingView.vue
+      and VerifyView.vue already use for their own log-out actions, not a new resilience pattern
+    And per docs/design/components.md's DashboardShell a11y note, in the collapsed rail the
+      UNavigationMenu's items show tooltips and keep their aria-label; the wordmark and UserMenu
+      apply that same spirit when the sidebar collapses to :collapsed-size="3.5"
+
+  Scenario: The sidebar header renders AppLogo and the "RenewCMS" wordmark
+    Given the user is on any verified route with the sidebar expanded
+    When DashboardShell mounts
+    Then the sidebar's #header slot renders an AppLogo before the text "RenewCMS"
+    And the wordmark text "RenewCMS" is visible next to the logo
+    And neither the logo nor the wordmark is a link, since there is nothing to navigate to from
+      the shell itself
+
+  Scenario: The sidebar collapse trigger toggles the rail and exposes aria-expanded
+    Given the user is on any verified route with the sidebar expanded
+    When the user activates UDashboardSidebarCollapse in the navbar's leading slot
+    Then the sidebar transitions to its :collapsed-size="3.5" icon-only rail
+    And UDashboardSidebarCollapse carries aria-expanded, reflecting the sidebar's new collapsed
+      state
+    When the user activates UDashboardSidebarCollapse again
+    Then the sidebar returns to its :default-size="14" expanded width
+    And aria-expanded reflects the expanded state
+
+  Scenario: UserMenu's dropdown lists the account label, color-mode checkboxes, then Log out
+    Given the session's username is "marta"
+    When the user activates the UserMenu trigger in the sidebar footer
+    Then the dropdown opens with a UAvatar showing initials "MA" and the trigger's own username
+      text "marta"
+    And the first group is the account label showing "marta"
+    And the second group is a checkbox group with items System, Light and Dark, and exactly the
+      item matching the current useColorMode().preference is checked
+    And the third and final group contains only "Log out", separated from the color-mode group
+
+  Scenario Outline: Selecting a color-mode item updates the preference and its checked state
+    Given the user has opened the UserMenu dropdown
+    And the current useColorMode().preference is "<from>"
+    When the user activates the "<to>" checkbox item
+    Then useColorMode().preference is set to "<to>"
+    And the "<to>" item is checked and the "<from>" item is no longer checked
+
+    Examples:
+      | from   | to     |
+      | system | light  |
+      | light  | dark   |
+      | dark   | system |
+
+  Scenario: A successful logout clears the session and navigates to /login
+    Given the user has opened the UserMenu dropdown
+    When the user activates "Log out"
+    Then a POST request is made to /v1/auth/logout
+    And once it resolves, the local session is cleared
+    And the user is navigated to /login
+
+  Scenario: Collapsed sidebar hides the wordmark and username text but keeps an icon-only rail
+    Given the user is on any verified route
+    When the sidebar is collapsed to its :collapsed-size="3.5" icon-only rail
+    Then the AppLogo icon in the sidebar header remains visible, but the "RenewCMS" wordmark text
+      is hidden, not merely visually truncated
+    And the header keeps an accessible name for the brand mark (an aria-label or sr-only text
+      reading "RenewCMS" on the logo or its wrapper), so collapsing the rail is not a pure a11y
+      regression
+    And the UserMenu trigger in the sidebar footer still shows the UAvatar, but the username text
+      next to it is hidden
+    And the UserMenu trigger keeps an accessible name that includes the username (an aria-label
+      such as "marta — account menu", or a tooltip plus aria-label), matching the same
+      tooltip/aria-label spirit the collapsed rail's UNavigationMenu items already use per
+      docs/design/components.md's DashboardShell a11y note
+    And activating the collapsed UserMenu trigger still opens the same dropdown, with the same
+      account label, color-mode checkbox group and Log out item as the expanded state

features/dashboard_shell_branding.qa.md

@@ -0,0 +1,65 @@
+# QA: DashboardShell branding (wordmark, sidebar collapse, UserMenu)
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Mount DashboardShell (or a verified route rendered inside it) with a resolved session (username
+"marta") and a test router. Mock `useApi`'s `/v1/auth/logout` call per case; no real backend, no
+httptest server. Stub `useColorMode()` so its `preference` can be asserted and set.
+
+1. **Header renders AppLogo and the wordmark** — mount DashboardShell expanded; assert the
+   sidebar's #header slot renders an AppLogo followed by the text "RenewCMS"; assert neither is a
+   link.
+2. **Sidebar collapse trigger toggles the rail and aria-expanded** — mount DashboardShell
+   expanded; activate UDashboardSidebarCollapse; assert the sidebar reaches its
+   :collapsed-size="3.5" state and the trigger's aria-expanded reflects it; activate it again; assert
+   the sidebar returns to :default-size="14" and aria-expanded flips back.
+3. **UserMenu dropdown groups and order** — mount with username "marta" and
+   `useColorMode().preference` set to each of "system", "light", "dark" in turn; open the UserMenu
+   dropdown; assert the avatar shows initials "MA"; assert the trigger shows "marta"; assert the
+   first group is the account label "marta"; assert the second group has System, Light and Dark
+   checkbox items with exactly the current preference's item checked; assert the third, separate
+   group contains only "Log out".
+4. **Selecting a color-mode item updates the preference** — Examples-driven: (system → light),
+   (light → dark), (dark → system). Open the dropdown, activate the target item, assert
+   `useColorMode().preference` is set to the target and its checkbox item is checked while the
+   previous one is not.
+5. **Successful logout clears the session and navigates** — mock `POST /v1/auth/logout` resolving
+   200; open the UserMenu dropdown; activate "Log out"; assert the mock was called; assert the
+   session store's `clear()` is called once it resolves; assert the router navigates to /login.
+6. **Collapsed sidebar hides wordmark/username text but keeps an accessible name** — mount
+   DashboardShell and collapse the sidebar to :collapsed-size="3.5"; assert the AppLogo icon is still
+   present but the "RenewCMS" text node is not rendered (or is visually hidden, e.g. sr-only) while
+   an accessible name for the logo (aria-label or sr-only text reading "RenewCMS") is still present
+   in the accessibility tree; assert the UserMenu trigger still renders the UAvatar but not the
+   visible "marta" text node, while the trigger's accessible name still includes "marta" (via
+   aria-label or a tooltip plus aria-label); activate the collapsed trigger and assert the same
+   dropdown (account label, color-mode group, Log out) opens as in the expanded state.
+
+## Visual (manual verification — desktop and mobile, light and dark)
+
+Reference: `docs/design/components.md`'s DashboardShell section and
+`docs/design/source/RenewCMS Screens Back-office.dc.html`. Run `task visual:check -- <a verified
+screen, e.g. home>` for each state and compare the sidebar header/footer against the board frame.
+
+- [ ] Expanded sidebar: AppLogo plus "RenewCMS" wordmark in the header; UserMenu in the footer
+      shows the avatar and username, matching the board exactly at desktop and mobile.
+- [ ] UserMenu dropdown: opens above the trigger (`side: 'top'`), left-aligned (`align: 'start'`),
+      with the account label, the System/Light/Dark checkbox group and Log out visually separated
+      as in the board.
+- [ ] Color mode selection: choosing Light/Dark/System visibly re-themes the app and moves the
+      checkmark to the selected item.
+- [ ] Collapsed sidebar (icon-only rail): the AppLogo icon and the avatar remain visible; the
+      "RenewCMS" wordmark and the username text are hidden; nothing overflows or clips awkwardly at
+      the :collapsed-size="3.5" width, matching the board's collapsed rail treatment.
+- [ ] Keyboard/focus: Tab reaches UDashboardSidebarCollapse, then the UserMenu trigger; the
+      dropdown opens with Enter/Space, arrow keys move through the checkbox group, and Esc closes
+      it and returns focus to the trigger, in both the expanded and collapsed rail.
+
+## Manual verification
+
+- **Real POST /v1/auth/logout against a running server** — Vitest only mocks `useApi`; confirm the
+  real 200 round-trip against `task dev` with a live SQLite file, since these automated tests
+  never exercise the actual Go handler.
+- **Real useColorMode persistence across reload** — confirm a selected preference survives a full
+  page reload via the plugin's `colorMode: true` storage, since Vitest only asserts the in-memory
+  preference value.

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/editor_core.feature

@@ -0,0 +1,242 @@
+Feature: Editor screen — load, edit and save an article's body
+
+  As a verified RenewCMS owner
+  I want /article/:id/edit to load an article, let me edit its body, save it, and warn me
+    before I lose unsaved work
+  So that I can safely write and revise an article's content, with clear feedback while
+    saving, near the length limit, offline, or when my session expires mid-edit
+
+  Background:
+    Given /article/:id/edit is a verified route (meta.auth "verified") rendered as EditorPage
+      inside DashboardShell, per docs/design/routes.md
+    And EditorPage calls GET /v1/article/{id} once per navigation to load the article, per
+      docs/design/screens/editor.md and features/public_article_read.feature
+    And the header shows breadcrumb "Articles › {article.title}" linking "Articles" to
+      /article (mobile top bar title "Edit article" instead), an ArticleStatusBadge size "md"
+      reflecting article.is_online ("Draft" or "Online"), a SaveStatus span, a Save button,
+      and a PublishControl button, per docs/design/components.md
+    And the article's title is never editable after creation, per
+      features/article_title_rules.feature; only the body is edited here
+    And the body is edited in ArticleEditor (modelValue bound to the fetched HTML body); any
+      change moves useArticleDraft's state from "clean" to "dirty", and PublishControl's label
+      switches from "Publish" (or "Unpublish", if online) to "Save and publish" while dirty and
+      the article is a draft; clicking PublishControl itself is out of scope for this slice and
+      is specified in a follow-on slice (editor_publish_and_delete)
+    And Save is enabled only when useArticleDraft's state is "dirty", the request is not already
+      in flight, the app is not offline, and the body's HTML length is at most 10000 characters;
+      it is disabled in every other case
+    And Save (a click, or Ctrl/⌘ S) sends PATCH /v1/article/{id} with JSON {"body": "..."},
+      the same contract features/edit_article_body.feature already gives the API: 200 with the
+      updated article.Article, 400 for a body over 10000 characters, 404 for an id absent from
+      the repository, 401 with no valid session
+    And a successful save (200) sets useArticleDraft's state to "saved" and records the save
+      time; SaveStatus shows "Saved at {HH:MM}" for the first hour and "Saved {n} min ago" after
+      an hour has passed, per docs/design/components.md
+    And a 500 response or a request that never reaches the server sets useArticleDraft's state
+      to "error"; SaveStatus shows "Save failed" with an inline Retry button (UButton size="xs"
+      variant="outline"); the edited body is kept exactly as typed, both in the editor and for
+      the next Retry
+    And a 404 response to a save (the article was deleted elsewhere) does not use the "error"
+      SaveStatus; it shows a toast "That article no longer exists.", per docs/design/states.md's
+      HTTP-status-to-copy table
+    And a 401 response to a save is handled by useApi's global handling
+      (features/api_client_global_error_handling.feature): before the redirect, useArticleDraft
+      mirrors the current dirty body to sessionStorage keyed by the article's id, so it survives
+      the redirect to /login?redirect=/article/{id}/edit&reason=expired
+    And CharacterCounter shows "{len} / 10 000" below the editor, using the body's HTML string
+      length (formatting and images count); at 9000 characters or more (90%, "Near the limit")
+      it adds a warning icon and stays enabled; above 10000 ("Too long") it adds an icon and the
+      text "{over} characters over. Shorten the text or remove an image. Formatting counts too.",
+      and disables both Save and PublishControl until the length is 10000 or fewer again
+    And a Preview switch, when on, replaces the editable ArticleEditor and its toolbar with a
+      read-only rendering of the title and body in the content type scale; switching it off
+      restores the editable surface with the same content, unchanged
+    And when navigator.onLine is false, or the browser fires a window "offline" event,
+      useArticleDraft's state becomes "offline"; SaveStatus shows the wifi-off icon and reads
+      "Waiting for connection"; Save and PublishControl are disabled with a tooltip explaining
+      why, and DashboardShell's existing OfflineBanner is shown; when the connection returns (a
+      window "online" event, or navigator.onLine true again), Save and PublishControl re-enable
+      according to the underlying dirty/saved/error state, which is unaffected by having been
+      offline
+    And navigating away (the breadcrumb "Articles" link, a sidebar nav link, the browser back
+      button, or closing the tab) while useArticleDraft's state is "dirty" opens ConfirmDialog
+      (neutral tone) titled "Leave without saving?", text 'Your changes to "{article.title}"
+      haven't been saved.', cancel "Discard changes", confirm "Keep editing"; "Discard changes"
+      proceeds with the navigation, discarding the edit; "Keep editing" closes the dialog and
+      keeps the user on the editor with the edit intact; navigating away while "clean" or
+      "saved" never opens this dialog
+    And an id absent from the repository (GET resolves 404) replaces the entire editor with an
+      error state: title "This article doesn't exist.", and a single action "All articles"
+      navigating to /article; no breadcrumb-title, SaveStatus, Save, PublishControl or
+      ArticleEditor renders in this state
+    And skeleton placeholders (for the title, content and details) replace the editor's content
+      only after 150 ms of GET /v1/article/{id} being unresolved, so a fast response never
+      flashes a skeleton, per the Skeleton component spec
+
+  Scenario: Skeletons appear only after 150 ms, never for a fast response
+    Given the user navigates to /article/12/edit for the first time in this session
+    When GET /v1/article/12 has not resolved 150 ms after the navigation
+    Then skeleton placeholders replace the title, content and details areas
+    When GET /v1/article/12 then resolves 200 with a draft article titled "How we price a
+      bathroom renovation"
+    Then the skeletons are replaced by the Saved state's header, editor and details
+    Given a second, separate navigation to /article/12/edit
+    When GET /v1/article/12 resolves in under 150 ms
+    Then no skeleton is ever shown, and the Saved state's content renders directly
+
+  Scenario Outline: Saved — a freshly loaded article, draft or online
+    Given GET /v1/article/12 resolves 200 with an article titled "How we price a bathroom
+      renovation", is_online <is_online>, body length 4318, updated_at "Today, 11:02"
+    When the user navigates to /article/12/edit
+    Then the breadcrumb reads "Articles › How we price a bathroom renovation"
+    And the ArticleStatusBadge reads "<badge>"
+    And SaveStatus reads "Saved at 11:02"
+    And the Save button is disabled
+    And PublishControl reads "<publish_label>"
+    And the character counter reads "4 318 / 10 000"
+
+    Examples:
+      | is_online | badge  | publish_label |
+      | false     | Draft  | Publish       |
+      | true      | Online | Unpublish     |
+
+  Scenario: Unsaved changes — any edit marks the article dirty
+    Given the user is on /article/12/edit in the Saved state, article "How we price a bathroom
+      renovation", draft
+    When the user types into the body
+    Then SaveStatus reads "Unsaved changes"
+    And the Save button becomes enabled
+    And PublishControl now reads "Save and publish"
+
+  Scenario: Saving — Save sends the PATCH and disables itself while in flight
+    Given the user is on /article/12/edit with unsaved changes to the body
+    When the user activates Save
+    Then PATCH /v1/article/12 is sent with JSON {"body": "<the edited body>"}
+    And SaveStatus reads "Saving…"
+    And the Save button is disabled
+
+  Scenario: Ctrl/⌘ S saves the same way as clicking Save
+    Given the user is on /article/12/edit with unsaved changes to the body
+    When the user presses Ctrl+S (or ⌘+S)
+    Then PATCH /v1/article/12 is sent with JSON {"body": "<the edited body>"}
+    And SaveStatus reads "Saving…"
+
+  Scenario: A successful save returns to the Saved state with the new time
+    Given the user is on /article/12/edit in the Saving state
+    When PATCH /v1/article/12 resolves 200 with the updated article
+    Then SaveStatus reads "Saved at {current time}"
+    And the Save button is disabled again
+
+  Scenario: SaveStatus switches to a relative time after an hour
+    Given the user is on /article/12/edit and PATCH /v1/article/12 resolved 200 at 11:02
+    When more than an hour has passed with no further edit or save
+    Then SaveStatus reads "Saved {n} min ago" instead of "Saved at 11:02"
+
+  Scenario Outline: Save failed — a 500 or a network failure keeps the changes and offers Retry
+    Given the user is on /article/12/edit with unsaved changes to the body "Revised opening
+      paragraph."
+    When the user activates Save
+    And PATCH /v1/article/12 <failure>
+    Then SaveStatus reads "Save failed" with a Retry button
+    And the editor still shows the body "Revised opening paragraph."
+    And no navigation occurs
+
+    Examples:
+      | failure                     |
+      | resolves with a 500 response |
+      | never reaches the server     |
+
+  Scenario: Retry resends the same body and can recover
+    Given the user is on /article/12/edit in the Save failed state, with unsaved body "Revised
+      opening paragraph." and PATCH /v1/article/12 having failed with a 500
+    When the user activates Retry
+    Then PATCH /v1/article/12 is sent again with JSON {"body": "Revised opening paragraph."}
+    When it resolves 200 with the updated article
+    Then SaveStatus reads "Saved at {current time}"
+
+  Scenario: A save against an article deleted elsewhere shows a toast, not the error SaveStatus
+    Given the user is on /article/12/edit with unsaved changes to the body
+    When the user activates Save
+    And PATCH /v1/article/12 resolves 404
+    Then a toast reads "That article no longer exists."
+    And SaveStatus does not read "Save failed"
+
+  Scenario: Near the limit — the counter warns at 9000 characters without blocking Save
+    Given the user is on /article/12/edit with unsaved changes making the body's HTML length
+      9240 characters
+    Then the character counter reads "9 240 / 10 000" with a warning icon
+    And the Save button remains enabled
+
+  Scenario: Too long — over 10000 characters disables Save and Publish until shortened
+    Given the user is on /article/12/edit with unsaved changes making the body's HTML length
+      10214 characters
+    Then the character counter reads "10 214 / 10 000" with the text "214 characters over.
+      Shorten the text or remove an image. Formatting counts too."
+    And the Save button is disabled
+    And PublishControl is disabled
+    When the user shortens the body to 10000 characters or fewer
+    Then the character counter no longer shows the over-limit text
+    And the Save button is enabled again
+
+  Scenario: Preview shows the rendered title and body without the editing surface
+    Given the user is on /article/12/edit, article titled "How we price a bathroom renovation"
+      with some body content
+    When the user switches Preview on
+    Then the editing toolbar and the editable surface are replaced by a read-only rendering of
+      the title and body in the content type scale
+    When the user switches Preview off
+    Then the editable ArticleEditor and toolbar return, with the same body content unchanged
+
+  Scenario: Offline blocks Save and Publish, and recovers when the connection returns
+    Given the user is on /article/12/edit with unsaved changes to the body
+    When navigator.onLine becomes false
+    Then SaveStatus shows the wifi-off icon and reads "Waiting for connection"
+    And the Save button and PublishControl are disabled with a tooltip explaining why
+    When navigator.onLine becomes true again
+    Then the Save button re-enables, reflecting the still-unsaved change
+    And SaveStatus reads "Unsaved changes" again
+
+  Scenario: Leaving with unsaved changes prompts, and "Discard changes" proceeds
+    Given the user is on /article/12/edit with unsaved changes to the body
+    When the user activates the "Articles" breadcrumb link
+    Then ConfirmDialog opens, titled "Leave without saving?", text 'Your changes to "How we
+      price a bathroom renovation" haven't been saved.', cancel "Discard changes", confirm
+      "Keep editing"
+    When the user activates "Discard changes"
+    Then the app navigates to /article
+    And the edited body is not saved
+
+  Scenario: Leaving with unsaved changes, "Keep editing" stays on the page
+    Given the user is on /article/12/edit with unsaved changes to the body, and the "Leave
+      without saving?" dialog is open
+    When the user activates "Keep editing"
+    Then the dialog closes
+    And the user remains on /article/12/edit with the unsaved body intact
+
+  Scenario: Leaving a clean article never prompts
+    Given the user is on /article/12/edit in the Saved state, with no unsaved changes
+    When the user activates the "Articles" breadcrumb link
+    Then the app navigates to /article directly, with no ConfirmDialog
+
+  Scenario: Session expired mid-save keeps the draft and restores it after logging back in
+    Given the user is on /article/12/edit with unsaved changes to the body "Paragraph added
+      just before the session expired."
+    When the user activates Save
+    And PATCH /v1/article/12 resolves 401
+    Then the body "Paragraph added just before the session expired." is mirrored to
+      sessionStorage keyed by article id 12
+    And the app navigates to /login?redirect=/article/12/edit&reason=expired
+    When the user logs in again and is returned to /article/12/edit
+    And GET /v1/article/12 resolves 200 with the last-saved body (without that paragraph)
+    Then the editor shows the body "Paragraph added just before the session expired." restored
+      from sessionStorage, not the last-saved body from the GET
+    And SaveStatus reads "Unsaved changes"
+
+  Scenario: An unknown or deleted article id replaces the editor with an error state
+    Given GET /v1/article/9999 resolves 404
+    When the user navigates to /article/9999/edit
+    Then the editor shows a single error state: title "This article doesn't exist." and one
+      action "All articles"
+    And no breadcrumb-title, SaveStatus, Save, PublishControl or ArticleEditor renders
+    When the user activates "All articles"
+    Then the app navigates to /article

features/editor_core.qa.md

@@ -0,0 +1,129 @@
+# QA: Editor screen — load, edit and save (core)
+
+## Implementation note for coder (informational, not a QA assertion)
+
+`docs/design/components.md`'s `ErrorView` only documents two fixed copies (`kind: 'not-found'` →
+"Page not found" / Home, and `kind: 'error'` → the generic retry copy). The editor's own 404-on-
+load state needs different copy ("This article doesn't exist." / "All articles" → /article),
+per `docs/design/states.md`'s HTTP-status-to-copy table. Either widen `ErrorView` with an optional
+title/description/action override, or add a third `kind`; this is a same-layer prop widening, not
+a new component, so it doesn't need its own slice.
+
+Known limitation, not a bug to silently fix: per `features/public_article_read.feature`,
+`GET /v1/article/{id}` falls back to public online-only visibility on a malformed/expired jwt
+(no 401). So if a session is already stale when the owner opens an *offline* article, the GET
+answers 404 exactly like a truly deleted article — the editor cannot tell the two apart from this
+response alone, and correctly shows the "This article doesn't exist." state.
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Mock `useApi`'s `request` for `GET /v1/article/{id}` and `PATCH /v1/article/{id}` per case; no
+real backend, no httptest server. Mount EditorPage inside DashboardShell with a resolved verified
+session (username "marta") and a test router at `/article/12/edit`. Use fake timers for the
+150 ms skeleton delay and the relative-time SaveStatus format. Use `Object.defineProperty`/mocked
+`navigator.onLine` and dispatched `window` `online`/`offline` events for the offline scenarios.
+
+Fixture article (reused across cases unless a scenario overrides a field): id 12, title
+"How we price a bathroom renovation", is_online false, body length 4318, created_at
+"2026-03-12T09:14:00Z", updated_at "2026-09-26T11:02:00Z" (fixed `now`
+"2026-09-26T11:02:00Z" unless a scenario advances it).
+
+1. **Skeleton only after 150 ms** — mock `GET /v1/article/12` unresolved; assert no skeleton
+   before 150 ms; advance past it; assert skeleton placeholders for title/content/details;
+   resolve 200; assert the Saved state renders. Separately, resolve under 150 ms; assert no
+   skeleton ever renders.
+2. **Saved state, draft and online** — Examples-driven on `is_online`: mock `GET
+   /v1/article/12` resolving 200 with the fixture at each `is_online` value; assert the
+   breadcrumb, ArticleStatusBadge ("Draft"/"Online"), SaveStatus "Saved at 11:02", Save
+   disabled, PublishControl ("Publish"/"Unpublish"), and character counter "4 318 / 10 000".
+3. **Unsaved changes** — from the Saved state, type into the body; assert SaveStatus "Unsaved
+   changes", Save enabled, PublishControl now "Save and publish".
+4. **Saving via click and via Ctrl/⌘ S** — from Unsaved changes, (a) click Save, (b) press
+   Ctrl+S; in each, assert `PATCH /v1/article/12` is called with the edited body, SaveStatus
+   "Saving…", Save disabled while unresolved.
+5. **Successful save** — from Saving, resolve `PATCH` 200 with the updated article; assert
+   SaveStatus "Saved at {time}" and Save disabled again.
+6. **Relative save time after an hour** — after a 200 save at 11:02, advance the fake clock past
+   one hour with no further edit; assert SaveStatus switches to "Saved {n} min ago".
+7. **Save failed, Examples-driven** — (a) `PATCH` resolves 500, (b) `PATCH` rejects (network);
+   in each, assert SaveStatus "Save failed" with a visible Retry button, and the editor still
+   shows the typed body.
+8. **Retry recovers** — from Save failed (500), click Retry; assert `PATCH` is called again with
+   the same body; resolve 200; assert SaveStatus "Saved at {time}".
+9. **404 on save shows a toast, not the error SaveStatus** — from Unsaved changes, save; resolve
+   `PATCH` 404; assert a toast "That article no longer exists." appears and SaveStatus never
+   reads "Save failed".
+10. **Near the limit** — set the body's HTML length to 9240 (via a fixture string of that
+    length); assert counter "9 240 / 10 000" with a warning icon and Save still enabled.
+11. **Too long** — set the body's HTML length to 10214; assert counter "10 214 / 10 000" with
+    "214 characters over. Shorten the text or remove an image. Formatting counts too.", Save
+    disabled, PublishControl disabled; shorten to 10000; assert both re-enable and the over-limit
+    text disappears.
+12. **Preview toggle** — from a loaded article with body content, switch Preview on; assert the
+    toolbar and editable surface are gone and a read-only rendering of title+body appears;
+    switch off; assert the editable surface returns with the same content.
+13. **Offline blocks and recovers** — from Unsaved changes, set `navigator.onLine` false and
+    dispatch `window` `offline`; assert SaveStatus shows the wifi-off icon and reads "Waiting
+    for connection", Save and PublishControl disabled with a tooltip; set `navigator.onLine`
+    true and dispatch `online`; assert Save re-enables and SaveStatus reads "Unsaved changes"
+    again.
+14. **Leave guard: Discard changes proceeds** — from Unsaved changes, click the "Articles"
+    breadcrumb link; assert ConfirmDialog opens with the exact title/text/button labels; click
+    "Discard changes"; assert the router navigates to `/article` and no further `PATCH` fires.
+15. **Leave guard: Keep editing stays** — same setup; click "Keep editing"; assert the dialog
+    closes and the router does not navigate, and the unsaved body is still shown.
+16. **No leave guard when clean** — from the Saved state, click the "Articles" breadcrumb link;
+    assert the router navigates to `/article` with no ConfirmDialog ever rendered.
+17. **Session expiry mid-save mirrors and restores the draft** — from Unsaved changes with body
+    "Paragraph added just before the session expired.", save; resolve `PATCH` 401; assert
+    `sessionStorage` holds that body keyed by article id 12, and the router navigates to
+    `/login?redirect=/article/12/edit&reason=expired`. Then, simulating the return trip, mount
+    EditorPage again at `/article/12/edit` with `GET /v1/article/12` resolving 200 with a body
+    that lacks that paragraph; assert the rendered body is the restored sessionStorage draft
+    (with the paragraph) and SaveStatus reads "Unsaved changes".
+18. **Not found on load** — mock `GET /v1/article/9999` resolving 404; mount at
+    `/article/9999/edit`; assert only the error state renders (title "This article doesn't
+    exist.", action "All articles"), with no breadcrumb-title/SaveStatus/Save/PublishControl/
+    ArticleEditor; click "All articles"; assert the router navigates to `/article`.
+
+## Visual (manual verification — desktop and mobile, light and dark)
+
+Reference: `docs/design/screens/editor.md` and `docs/design/source/RenewCMS Screens
+Back-office.dc.html`, group "Editor". Run `task visual:check -- editor` for each state below and
+compare against the board frame; add each state's mock setup to `web/visual/states.ts` first,
+reusing the sample data below and a fixed `now` of "2026-09-26T11:02:00Z" (updated_at "Today,
+11:02"; created_at "12 Mar 2026, 09:14"; id 12; title "How we price a bathroom renovation";
+3 images).
+
+- [ ] Loading: skeletons for title, content and details, shaped like the real layout.
+- [ ] Saved: breadcrumb, "Draft" badge, "Saved at 11:02", disabled Save, "Publish", counter
+      "4 318 / 10 000", details panel (Created/Updated/ID/Images/Public API URL).
+- [ ] Unsaved changes: "Unsaved changes" SaveStatus, enabled Save, "Save and publish".
+- [ ] Saving: "Saving…" SaveStatus, disabled Save.
+- [ ] Save failed: "Save failed" with Retry, per the SaveStatus error spec.
+- [ ] Near the limit: counter "9 240 / 10 000" with the warning icon/style.
+- [ ] Too long: counter "10 214 / 10 000" with the over-limit text and disabled Save/Publish.
+- [ ] Preview: read-only rendered title and body in the content scale, toolbar hidden.
+- [ ] Offline: SaveStatus shows the wifi-off icon and reads "Waiting for connection", disabled
+      Save/Publish, OfflineBanner visible.
+- [ ] Not found (404): the standalone error state, no editor chrome.
+- [ ] Mobile (all of the above at 390×844): sticky bottom bar for Save/PublishControl, details
+      panel as a slideover, single "Edit article" mobile top-bar title instead of the breadcrumb.
+- [ ] Keyboard/focus: Tab reaches the breadcrumb, Save, Preview switch and PublishControl in a
+      sensible order; Ctrl/⌘ S saves from anywhere in the editor surface; the leave-guard
+      ConfirmDialog traps focus starting on "Discard changes" per ConfirmDialog's a11y spec, and
+      Esc behaves like dismissing (equivalent to "Keep editing"); the character-counter live
+      region announces only when crossing the warn/over thresholds, not on every keystroke.
+  - [ ] Motion: modal open/close and skeleton pulse follow the standard 240 ms / 1.6 s timings and
+      stop under reduced motion.
+
+## Manual verification
+
+- **Real GET/PATCH round trip against a running server** — Vitest only mocks `useApi`; confirm
+  the real 200/404/401/500 responses and the real `sessionStorage` restoration across an actual
+  session expiry (`JWT_SECRET`-signed cookie timing out) against `task dev` with a live SQLite
+  file, since automated tests never exercise the real Go handler, `UpdateArticleUseCase`, or a
+  real cookie's `exp` claim.
+- **Real `beforeunload` prompt** — Vitest can assert `onBeforeRouteLeave`'s ConfirmDialog, but a
+  real browser tab-close prompt (native `beforeunload`) needs manual confirmation, since jsdom
+  doesn't model it.

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/home.feature

@@ -0,0 +1,124 @@
+Feature: Home screen
+
+  As a logged-in RenewCMS owner
+  I want /home to summarize how many articles I have, how many are online or drafts, and my five
+    most recently updated articles, all from the single GET /v1/article/ call the route already
+    makes
+  So that I land somewhere useful after logging in, instead of an empty dashboard or a screen that
+    silently fails
+
+  Background:
+    Given /home is a verified route (meta.auth "verified") rendered as HomePage inside
+      DashboardShell, per docs/design/routes.md
+    And HomePage calls GET /v1/article/ once per navigation; there is no separate stats endpoint,
+      so the three stat tiles and the recent list are both derived from that one response
+    And the PageHeader shows breadcrumb "Home" (mobile title "Home") and a primary action "New
+      article" opening NewArticleModal
+    And a "Connect your website" card is always rendered on the page, in every state (Loading,
+      Default, Empty and Error alike): icon plug, title "Connect your website", text "Your site
+      reads published articles from RenewCMS. Share this guide with whoever builds it.", and a
+      link "Open the guide" navigating to /integration
+    And a greeting reading "{greeting}, {username}" sits above the subtitle in every state
+      (Loading, Default, Empty and Error alike); it is computed from the session's username and
+      the device's local hour via Date.getHours(), needs no request of its own since the session
+      is already resolved by the app-boot flow before HomePage ever renders, and so never has its
+      own loading or error state
+    And hours 0 through 11 give the greeting "Good morning", hours 12 through 17 give "Good
+      afternoon", and hours 18 through 23 give "Good evening"
+    And once the list resolves with at least one article, the subtitle reads "Here's where things
+      stand on your site.", three stat tiles show the total article count labelled "articles", the
+      online count labelled "online" and the draft count labelled "drafts", and a recent list shows
+      the 5 most recently updated articles, each with its title, an ArticleStatusBadge (online or
+      draft) and its updated date, linking to /article/:id/edit
+    And while the list request is in flight, skeleton placeholders replace the stat tiles and the
+      recent list rows, but only after 150 ms, so a fast response never flashes a skeleton
+    And when the list resolves with zero articles, the subtitle reads "Welcome to RenewCMS.", and
+      the stat tiles and recent list are replaced by an empty state: icon file-text, title "Write
+      your first article", text "It starts as a draft, so nothing appears on your site until you
+      publish it.", and a single action "New article" that opens NewArticleModal
+    And when the list request fails with a 500 or a network error, the breadcrumb, greeting and
+      subtitle stay visible, the subtitle stays "Here's where things stand on your site.", and the
+      stat tiles and recent list are replaced by an inline role="alert" banner: icon circle-x,
+      title "Couldn't load your articles", text "Check your connection and try again.", and a
+      single action "Try again"
+
+  Scenario: Skeletons appear only after 150 ms, never for a fast response
+    Given the user navigates to /home for the first time in this session
+    When GET /v1/article/ has not resolved 150 ms after the navigation
+    Then skeleton placeholders replace the three stat tiles and the five recent-list rows
+    And the recent list container is aria-busy="true"
+    When GET /v1/article/ then resolves 200 with a non-empty list of articles
+    Then the skeletons are replaced by the Default state's stat tiles and recent list
+    Given a second, separate navigation to /home
+    When GET /v1/article/ resolves in under 150 ms with a non-empty list of articles
+    Then no skeleton is ever shown, and the Default state's content renders directly
+
+  Scenario: Default — the list loaded with a mix of online and draft articles
+    Given GET /v1/article/ resolves 200 with 6 articles, 4 online and 2 drafts, most recently
+      updated first: "How we price a bathroom renovation" (online), "Winter checklist for timber
+      windows" (online), "Choosing tiles for a small bathroom" (draft), "A guide to underfloor
+      heating" (online), "When to reseal a stone worktop" (draft), and "Small bathroom lighting
+      ideas" (online, least recently updated)
+    When the user navigates to /home
+    Then the subtitle reads "Here's where things stand on your site."
+    And the stat tiles read "6" "articles", "4" "online" and "2" "drafts"
+    And the recent list shows exactly the first 5 articles above, in that order, each with its
+      ArticleStatusBadge and updated date, and each row links to its /article/:id/edit
+    And "Small bathroom lighting ideas" does not appear in the recent list
+    And the "Connect your website" card's "Open the guide" link navigates to /integration, and
+      the header's "New article" action opens NewArticleModal
+
+  Scenario: Empty, first run — zero articles
+    Given GET /v1/article/ resolves 200 with zero articles
+    When the user navigates to /home
+    Then the subtitle reads "Welcome to RenewCMS."
+    And no stat tiles are shown
+    And an empty state is shown in place of the recent list: icon file-text, title "Write your
+      first article", text "It starts as a draft, so nothing appears on your site until you
+      publish it.", and a single action "New article"
+    When the user activates "New article"
+    Then NewArticleModal opens
+
+  Scenario Outline: Error — a 500 or a network failure shows the same inline alert
+    Given GET /v1/article/ <failure>
+    When the user navigates to /home
+    Then the breadcrumb, greeting and subtitle remain visible, and the subtitle stays "Here's
+      where things stand on your site."
+    And no stat tiles or recent list are shown
+    And an inline alert with role="alert" is shown in their place: icon circle-x, title
+      "Couldn't load your articles", text "Check your connection and try again.", and a single
+      action "Try again"
+
+    Examples:
+      | failure                   |
+      | fails with a 500 response |
+      | never reaches the server  |
+
+  Scenario: Retry re-issues the request and recovers into the Default state
+    Given the user is on /home in the Error state, because GET /v1/article/ failed
+    When the user activates "Try again"
+    Then GET /v1/article/ is called again
+    When it resolves 200 with 6 articles, 4 online and 2 drafts
+    Then the Alert is replaced by the stat tiles reading "6" "articles", "4" "online", "2" "drafts",
+      and the recent list
+
+  Scenario: The list is fetched exactly once per navigation
+    Given the user navigates to /home
+    Then GET /v1/article/ is called exactly once
+    And both the stat tiles and the recent list are derived from that single response, with no
+      second request made for either
+
+  Scenario Outline: The greeting matches the hour of day
+    Given the session's username is "marta"
+    And the device's local hour is <hour>
+    When the user views /home
+    Then the greeting above the subtitle reads "<greeting>, marta"
+
+    Examples:
+      | hour | greeting       |
+      | 0    | Good morning   |
+      | 11   | Good morning   |
+      | 12   | Good afternoon |
+      | 17   | Good afternoon |
+      | 18   | Good evening   |
+      | 23   | Good evening   |

features/home.qa.md

@@ -0,0 +1,101 @@
+# QA: Home screen
+
+## Implementation note for coder (informational, not a QA assertion)
+
+The greeting requires `useApi.getMe()` and the `Session` type/store
+(`web/src/composables/useApi.ts`, `web/src/stores/session.ts`) to also expose `username`, which
+`GET /v1/auth/me` already returns in its JSON body. Today `getMe()` only extracts `is_verified` and
+discards the rest, and `Session` is just `{ verified: boolean }`. Widen `MeResult` and `Session` to
+carry `username: string` as well; this is a same-layer frontend response-type widening (the wire
+contract doesn't change), not a backend change.
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Mock `useApi`'s `GET /v1/article/` call per case; no real backend, no httptest server. Mount
+HomePage inside DashboardShell with a resolved session (username "marta") and a test router at
+/home.
+
+1. **Skeleton only after 150 ms** — mock `GET /v1/article/` with an unresolved promise; assert no
+   skeleton is present before 150 ms elapse (use fake timers); advance past 150 ms; assert skeleton
+   placeholders replace the stat tiles and the 5 recent-list rows, and the list container has
+   aria-busy="true"; resolve the promise with 200 and a non-empty list; assert the skeletons are
+   gone and the Default content is shown. Separately, mock a promise that resolves in under 150 ms;
+   assert no skeleton ever renders.
+2. **Default state** — mock `GET /v1/article/` resolving 200 with the 6-article fixture (4 online,
+   2 drafts, ordered most-recently-updated first as in the feature); assert subtitle "Here's where
+   things stand on your site."; assert stat tiles "6" "articles", "4" "online", "2" "drafts"; assert
+   the recent list shows exactly the first 5 articles in order, each with its ArticleStatusBadge and
+   updated date, each row linking to /article/:id/edit; assert the 6th (least recently updated)
+   article is absent from the recent list; assert the PageHeader's "New article" action opens
+   NewArticleModal.
+3. **Empty, first run** — mock `GET /v1/article/` resolving 200 with `[]`; assert subtitle "Welcome
+   to RenewCMS."; assert no stat tiles render; assert an empty state renders in place of the recent
+   list with icon file-text, title "Write your first article", text "It starts as a draft, so
+   nothing appears on your site until you publish it.", and action "New article"; click it; assert
+   NewArticleModal opens.
+4. **Error state** — Examples-driven: (a) `GET /v1/article/` resolves 500, (b) it rejects with a
+   network error. In each: assert the breadcrumb, greeting and subtitle remain visible and the
+   subtitle stays "Here's where things stand on your site."; assert no stat tiles or recent list
+   render; assert an inline alert with role="alert" renders in their place, with icon circle-x,
+   title "Couldn't load your articles", text "Check your connection and try again.", and a single
+   action "Try again"; assert the alert text is identical between the 500 case and the network-
+   failure case — there is no separate wording per cause.
+5. **Retry recovers into Default** — start from the Error state (mocked 500); click "Try again"; assert
+   `GET /v1/article/` is called a second time; resolve it 200 with the 6-article fixture; assert the
+   Alert is replaced by the stat tiles "6"/"4"/"2" and the recent list.
+6. **Single request per navigation** — mock `GET /v1/article/` resolving 200 with the 6-article
+   fixture; mount /home; assert the mock was called exactly once, and both the stat tiles and the
+   recent list read from that one resolved value (no second call fires for either).
+7. **Greeting matches the hour of day, at every state, for the session username** — stub the clock
+   (e.g. `vi.setSystemTime` or a mocked `Date.now`/`Date.prototype.getHours`) to each boundary hour
+   in turn (0, 11, 12, 17, 18, 23) and mount with session username "marta"; assert the greeting
+   above the subtitle reads exactly "Good morning, marta" for hours 0 and 11, "Good afternoon,
+   marta" for hours 12 and 17, and "Good evening, marta" for hours 18 and 23. Then, fixing the hour
+   at 9 ("Good morning, marta"), assert the same exact greeting text is shown above the subtitle in
+   all four states: while `GET /v1/article/` is unresolved past 150 ms (Loading), once it resolves
+   with the 6-article fixture (Default), once it resolves with `[]` (Empty), and once it rejects
+   with a 500 (Error).
+8. **"Connect your website" card renders in every state** — assert the static card (icon plug,
+   title "Connect your website", text "Your site reads published articles from RenewCMS. Share
+   this guide with whoever builds it.", link "Open the guide" navigating to /integration) is
+   present and identical while `GET /v1/article/` is unresolved past 150 ms (Loading), once it
+   resolves with the 6-article fixture (Default), once it resolves with `[]` (Empty), and once it
+   rejects with a 500 (Error). The card is not part of the PageHeader's actions.
+
+## Visual (manual verification — desktop and mobile, light and dark)
+
+Reference: `docs/design/screens/home.md` and `docs/design/source/RenewCMS Screens Back-office.dc.html`,
+group "Home". Run `task visual:check -- home` for each state and compare against the board frame.
+
+- [ ] Loading state: skeleton stat tiles and 5 skeleton recent rows, shaped like the real layout,
+      matching the board.
+- [ ] Default state: stat tiles, recent list with ArticleStatusBadge per row, PageHeader primary
+      action "New article", breadcrumb "Home", and the "Connect your website" card below — matches
+      the board exactly at desktop and mobile.
+- [ ] Empty, first run state: the empty state replaces the stats and recent list, matching the
+      board's icon tile, title "Write your first article", text, and single "New article" action.
+- [ ] Error state: the inline alert's icon (circle-x), title "Couldn't load your articles", text
+      "Check your connection and try again.", and "Try again" action match the board; the
+      breadcrumb, greeting and subtitle stay visible above it.
+- [ ] "Connect your website" card: icon plug, title, text and "Open the guide" link match the
+      board, and the card renders identically in every state (Loading, Default, Empty, Error).
+- [ ] Greeting placement: the greeting sits above the subtitle in the PageHeader area (not the note
+      board's fixture text, since the greeting is new content — position and type scale should read
+      as a lightweight line above the description, not competing with the h1).
+- [ ] Keyboard/focus: Tab order reaches "New article" in the header, then the "Connect your
+      website" card's "Open the guide" link, before the recent list; the Error state's "Try again"
+      button is reachable and, on activation, focus stays sensible (not lost) while the request
+      re-runs; the recent list's rows are reachable and each activates its /article/:id/edit link
+      with Enter.
+- [ ] Motion: the skeleton pulse runs at 1.6 s and stops under reduced motion, per the Skeleton
+      component spec.
+
+## Manual verification
+
+- **Real GET /v1/article/ against a running server** — Vitest only mocks `useApi`; confirm the real
+  200/500 round-trip and the real article ordering (by updated_at) against `task dev` with a live
+  SQLite file, since these automated tests never exercise the actual Go handler or the
+  `ListArticles` use case.
+- **Real session username on a live app-boot** — confirm `GET /v1/auth/me`'s `username` field flows
+  through the real session store into the greeting, since Vitest only ever supplies a mocked
+  session.

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/integration.feature

@@ -0,0 +1,63 @@
+Feature: Integration screen
+
+  As a verified RenewCMS owner
+  I want /integration to show my site's base API URL and ready-to-use endpoint examples
+  So that I, or the developer who builds my public site, can wire it up without reading the
+    source
+
+  Background:
+    Given /integration is a verified route (meta.auth "verified") rendered as IntegrationPage
+      inside DashboardShell, per docs/design/routes.md
+    And the screen makes no /v1 calls; api: none (static)
+    And the PageHeader shows title "Connect your website", description "A guide for the developer
+      who builds your public site.", breadcrumb "Integration" (mobile title "Integration"), and no
+      actions
+    And an introductory paragraph reads "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."
+    And a "Base URL" row shows window.location.origin in a monospace box, with a "Copy" button
+      (icon copy) beside it
+    And two EndpointCard entries follow, in this order:
+      | method | path             | description                                                        |
+      | GET    | /v1/article/     | Lists every online article.                                       |
+      | GET    | /v1/article/{id} | Returns one online article. Drafts and unknown ids both return 404. |
+    And each EndpointCard's fetch example uses the current origin as the base of its URL:
+      | path             | fetch example                                                                                                    |
+      | /v1/article/     | const res = await fetch('{origin}/v1/article/')\nconst articles = await res.json()                              |
+      | /v1/article/{id} | const res = await fetch('{origin}/v1/article/12')\nif (res.status === 404) return notFound()\nconst article = await res.json() |
+    And each EndpointCard has fetch, curl and Response tabs, with fetch active by default, and its
+      CodeBlock is labelled "JavaScript" with its own ghost "Copy" button
+    And the curl tab's content is a plain curl command built from the current origin (e.g.
+      "curl {origin}/v1/article/" and "curl {origin}/v1/article/12"), and the Response tab's
+      content is a JSON sample built from the real domain Article fields; neither tab is active by
+      default, and neither is visually checked, since the fetch tab is the one shown in the board
+    And three info notes follow the endpoint cards, in this order:
+      - "Anonymous callers only ever get online articles. Drafts stay private until you publish
+        them."
+      - "Images in body use paths like /static/uploadedImages/<uuid>.png. Prefix them with the
+        base URL before rendering."
+      - "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."
+
+  Scenario: Default — the page loads with the app's own origin
+    Given the app is served from origin "{origin}"
+    When the user navigates to /integration
+    Then the Base URL row shows exactly "{origin}"
+    And the Base URL "Copy" button reads "Copy", not "Copied"
+    And both EndpointCards' fetch examples use "{origin}" as the base of their URL
+
+  Scenario: Copied — the Base URL copy button
+    Given the user is on /integration, served from origin "{origin}"
+    When the user activates the Base URL row's "Copy" button
+    Then "{origin}" is written to the clipboard
+    And the button's icon changes to check and its text changes to "Copied"
+    And the change is announced to assistive technology
+    When 2 seconds elapse without a further click
+    Then the button reverts to icon copy and text "Copy"
+
+  Scenario: Each EndpointCard's own Copy button is independent of the Base URL's
+    Given the user is on /integration
+    When the user activates the "/v1/article/" EndpointCard's "JavaScript" code block's "Copy"
+      button
+    Then that card's own code is written to the clipboard, and only that button reads "Copied"
+    And the Base URL row's "Copy" button and the other EndpointCard's "Copy" button are unaffected