docs: release notes format and patch notes for v2.0.0-beta to v2.4.0-beta

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,142 @@
+package api
+
+import (
+	domainArticle "RenewCMS/internal/domain/article"
+	domainImage "RenewCMS/internal/domain/image"
+	domainInvite "RenewCMS/internal/domain/invite"
+	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"
+	"fmt"
+	"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
+	UpdateUserProfileUseCase    *useCases.UpdateUserProfileUseCase
+	ListUsersUseCase            *useCases.ListUsersUseCase
+	CreateInviteUseCase         *useCases.CreateInviteUseCase
+	CancelInviteUseCase         *useCases.CancelInviteUseCase
+	RenewInviteUseCase          *useCases.RenewInviteUseCase
+	ListUsersAndInvitesUseCase  *useCases.ListUsersAndInvitesUseCase
+	GetInviteUseCase            *useCases.GetInviteUseCase
+	AcceptInviteUseCase         *useCases.AcceptInviteUseCase
+	SendMailUseCase             *useCases.SendMailUseCase
+	CreateImageUseCase          *useCases.CreateImageUseCase
+	DeleteImageUseCase          *useCases.DeleteImageUseCase
+	GetSettingsUseCase          *useCases.GetSettingsUseCase
+}
+
+type Repositories struct {
+	ArticleRepo domainArticle.Repository
+	UserRepo    domainUser.Repository
+	ImageRepo   domainImage.Repository
+	InviteRepo  domainInvite.Repository
+	MailRepo    domainMail.Repository
+}
+
+const sqliteBusyTimeoutMs = 5000
+
+func SQLiteDSN(dbName string) string {
+	return fmt.Sprintf("%s?_pragma=busy_timeout(%d)", dbName, sqliteBusyTimeoutMs)
+}
+
+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(SQLiteDSN(dbName)), &gorm.Config{})
+	if err != nil {
+		panic("Unable to open the database: " + err.Error())
+	}
+
+	if err := db.AutoMigrate(&models.Article{}, &models.User{}, &models.Invite{}); err != nil {
+		panic("Failed to migrate database: " + err.Error())
+	}
+
+	if err := persistence.BackfillUserRoles(db); err != nil {
+		panic("Failed to backfill user roles: " + err.Error())
+	}
+
+	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),
+		InviteRepo:  persistence.NewInviteRepository(db),
+		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),
+		UpdateUserProfileUseCase:    useCases.NewUpdateUserProfileUseCase(repos.UserRepo),
+		ListUsersUseCase:            useCases.NewListUsersUseCase(repos.UserRepo),
+		CreateInviteUseCase:         useCases.NewCreateInviteUseCase(repos.UserRepo, repos.InviteRepo, hasher, repos.MailRepo, settings.PublicURL),
+		CancelInviteUseCase:         useCases.NewCancelInviteUseCase(repos.InviteRepo),
+		RenewInviteUseCase:          useCases.NewRenewInviteUseCase(repos.UserRepo, repos.InviteRepo, hasher, repos.MailRepo, settings.PublicURL),
+		ListUsersAndInvitesUseCase:  useCases.NewListUsersAndInvitesUseCase(repos.UserRepo, repos.InviteRepo),
+		GetInviteUseCase:            useCases.NewGetInviteUseCase(repos.InviteRepo, hasher),
+		AcceptInviteUseCase:         useCases.NewAcceptInviteUseCase(repos.UserRepo, repos.InviteRepo, hasher),
+		SendMailUseCase:             useCases.NewSendMailUseCase(repos.MailRepo),
+		CreateImageUseCase:          useCases.NewCreateImageUseCase(repos.ImageRepo),
+		DeleteImageUseCase:          useCases.NewDeleteImageUseCase(repos.ImageRepo),
+		GetSettingsUseCase:          useCases.NewGetSettingsUseCase(settings.Version),
+	}
+}
+
+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/acceptInviteHandler.go

@@ -0,0 +1,102 @@
+package auth
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	validator "RenewCMS/api/pkg/validator"
+	"RenewCMS/internal/domain/invite"
+	"RenewCMS/internal/domain/user"
+	"RenewCMS/internal/infrastructure/useCases"
+	"encoding/json"
+	"errors"
+	"net/http"
+
+	"github.com/go-chi/jwtauth/v5"
+)
+
+type AcceptInviteHandler struct {
+	Token               *jwtauth.JWTAuth
+	GetInviteUseCase    *useCases.GetInviteUseCase
+	AcceptInviteUseCase *useCases.AcceptInviteUseCase
+	IsProduction        bool
+}
+
+type AcceptInviteRequest struct {
+	Code     string `json:"code" validate:"required"`
+	Username string `json:"username" validate:"required,min=3,max=20"`
+	Password string `json:"password" validate:"required,min=8"`
+}
+
+type inviteEmailResponse struct {
+	Email string `json:"email"`
+}
+
+func NewAcceptInviteHandler(getInvite *useCases.GetInviteUseCase, acceptInvite *useCases.AcceptInviteUseCase, token *jwtauth.JWTAuth, isProduction bool) *AcceptInviteHandler {
+	return &AcceptInviteHandler{
+		Token:               token,
+		GetInviteUseCase:    getInvite,
+		AcceptInviteUseCase: acceptInvite,
+		IsProduction:        isProduction,
+	}
+}
+
+func (h *AcceptInviteHandler) GetInvite(w http.ResponseWriter, r *http.Request) {
+	found, err := h.GetInviteUseCase.GetInvite(r.URL.Query().Get("c"))
+	if err != nil {
+		writeAcceptInviteError(w, err)
+		return
+	}
+
+	body, err := json.Marshal(inviteEmailResponse{Email: found.Email})
+	if err != nil {
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+	w.Header().Set("Cache-Control", "no-store")
+	_, _ = w.Write(body)
+}
+
+func (h *AcceptInviteHandler) AcceptInvite(w http.ResponseWriter, r *http.Request) {
+	var request AcceptInviteRequest
+	if err := json.NewDecoder(r.Body).Decode(&request); err != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	if err := validator.Validate.Struct(request); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	createdUser, err := h.AcceptInviteUseCase.AcceptInvite(useCases.AcceptInviteCommand{
+		Code:     request.Code,
+		Username: request.Username,
+		Password: request.Password,
+	})
+	if err != nil {
+		writeAcceptInviteError(w, err)
+		return
+	}
+
+	if err := setJwtCookie(w, h.Token, h.IsProduction, createdUser); err != nil {
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+
+	message, _ := json.Marshal(map[string]any{"message": "Invite accepted! HTTPonly jwt cookie created"})
+	_, _ = w.Write(message)
+}
+
+func writeAcceptInviteError(w http.ResponseWriter, err error) {
+	switch {
+	case errors.Is(err, invite.ErrInviteInvalid):
+		http.Error(w, apperr.InviteInvalidErrorMessage, http.StatusNotFound)
+	case errors.Is(err, invite.ErrInviteExpired):
+		http.Error(w, apperr.InviteExpiredErrorMessage, http.StatusGone)
+	case errors.Is(err, user.ErrUsernameTaken):
+		http.Error(w, apperr.UsernameTakenErrorMessage, http.StatusConflict)
+	case errors.Is(err, invite.ErrEmailHasAccount):
+		http.Error(w, apperr.EmailHasAccountErrorMessage, http.StatusConflict)
+	default:
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+	}
+}

api/handlers/auth/loginHandler.go

@@ -0,0 +1,146 @@
+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 setJwtCookie(w http.ResponseWriter, token *jwtauth.JWTAuth, isProduction bool, u user.User) error {
+	_, tokenString, err := 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:   isProduction,
+		HttpOnly: true,
+		Path:     "/",
+	})
+	return nil
+}
+
+func (h *LoginHandler) SetJwtCookie(w *http.ResponseWriter, u user.User) error {
+	return setJwtCookie(*w, h.Token, h.IsProduction, u)
+}
+
+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,48 @@
+package auth
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	"RenewCMS/api/pkg/claims"
+	"RenewCMS/api/pkg/publicuser"
+	"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(publicuser.New(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,99 @@
+package auth
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	"RenewCMS/api/pkg/claims"
+	"RenewCMS/api/pkg/publicuser"
+	validator "RenewCMS/api/pkg/validator"
+	"RenewCMS/internal/domain/user"
+	"RenewCMS/internal/infrastructure/useCases"
+	"encoding/json"
+	"errors"
+	"net/http"
+)
+
+type VerificationHandler struct {
+	VerifyUseCase *useCases.VerifyUserUseCase
+	CancelUseCase *useCases.CancelRegistrationUseCase
+	IsProduction  bool
+}
+
+type VerifyCredentials struct {
+	Code string `json:"code" validate:"required"`
+}
+
+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(publicuser.New(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,121 @@
+package image
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	domainArticle "RenewCMS/internal/domain/article"
+	domainImage "RenewCMS/internal/domain/image"
+	"RenewCMS/internal/infrastructure/useCases"
+	"encoding/json"
+	"errors"
+	"net/http"
+	"strconv"
+
+	"github.com/go-chi/chi/v5"
+)
+
+type Handler struct {
+	CreateUseCase *useCases.CreateImageUseCase
+	GetUseCase    *useCases.GetArticleUseCase
+	UpdateUseCase *useCases.UpdateArticleUseCase
+	DeleteUseCase *useCases.DeleteImageUseCase
+}
+
+func NewHandler(create *useCases.CreateImageUseCase, get *useCases.GetArticleUseCase, update *useCases.UpdateArticleUseCase, deleteUseCase *useCases.DeleteImageUseCase) *Handler {
+	return &Handler{
+		CreateUseCase: create,
+		GetUseCase:    get,
+		UpdateUseCase: update,
+		DeleteUseCase: deleteUseCase,
+	}
+}
+
+func writeInternalServerError(w http.ResponseWriter) {
+	http.Error(w, "Internal server error", http.StatusInternalServerError)
+}
+
+func writeArticleError(w http.ResponseWriter, err error) {
+	if errors.Is(err, domainArticle.ErrArticleNotFound) {
+		http.Error(w, apperr.ArticleNotFoundErrorMessage, http.StatusNotFound)
+		return
+	}
+	writeInternalServerError(w)
+}
+
+func (h *Handler) PostImage(w http.ResponseWriter, r *http.Request) {
+	articleId, err := strconv.ParseUint(chi.URLParam(r, "id"), 10, 32)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	if _, err := h.GetUseCase.GetArticle(uint32(articleId)); err != nil {
+		writeArticleError(w, err)
+		return
+	}
+
+	file, fileHeader, err := r.FormFile("file")
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+	defer file.Close()
+
+	newImage, err := h.CreateUseCase.CreateImage(domainImage.ImageInput{
+		Content:     file,
+		Filename:    fileHeader.Filename,
+		Size:        fileHeader.Size,
+		ContentType: fileHeader.Header.Get("Content-Type"),
+	})
+	if err != nil {
+		if errors.Is(err, domainImage.ErrImageTypeNotAllowed) || errors.Is(err, domainImage.ErrImageTooLarge) {
+			http.Error(w, err.Error(), http.StatusBadRequest)
+			return
+		}
+		writeInternalServerError(w)
+		return
+	}
+
+	if err := h.UpdateUseCase.AddImage(uint32(articleId), newImage.ID); err != nil {
+		writeArticleError(w, err)
+		return
+	}
+
+	responseJson, err := json.Marshal(map[string]any{"id": newImage.ID, "location": newImage.Path})
+	if err != nil {
+		writeInternalServerError(w)
+		return
+	}
+
+	w.WriteHeader(http.StatusCreated)
+	_, _ = w.Write(responseJson)
+}
+
+func (h *Handler) DeleteImage(w http.ResponseWriter, r *http.Request) {
+	articleId, err := strconv.ParseUint(chi.URLParam(r, "id"), 10, 32)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	imageId, err := strconv.ParseUint(chi.URLParam(r, "imageId"), 10, 32)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	if _, err := h.GetUseCase.GetArticle(uint32(articleId)); err != nil {
+		writeArticleError(w, err)
+		return
+	}
+
+	if err := h.DeleteUseCase.DeleteImage(uint32(imageId)); err != nil {
+		if errors.Is(err, domainImage.ErrImageNotFound) {
+			http.Error(w, apperr.ImageNotFoundErrorMessage, http.StatusNotFound)
+			return
+		}
+		writeInternalServerError(w)
+		return
+	}
+
+	w.WriteHeader(http.StatusNoContent)
+}

api/handlers/settings/settingsHandler.go

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

api/handlers/staticimages/staticImagesHandler.go

@@ -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/handlers/user/inviteHandler.go

@@ -0,0 +1,204 @@
+package user
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	"RenewCMS/api/pkg/claims"
+	validator "RenewCMS/api/pkg/validator"
+	"RenewCMS/internal/domain/invite"
+	"RenewCMS/internal/domain/user"
+	"RenewCMS/internal/infrastructure/useCases"
+	"encoding/json"
+	"errors"
+	"net/http"
+	"strconv"
+	"time"
+
+	"github.com/go-chi/chi/v5"
+)
+
+type InviteHandler struct {
+	CreateInviteUseCase        *useCases.CreateInviteUseCase
+	CancelInviteUseCase        *useCases.CancelInviteUseCase
+	RenewInviteUseCase         *useCases.RenewInviteUseCase
+	ListUsersAndInvitesUseCase *useCases.ListUsersAndInvitesUseCase
+}
+
+type CreateInviteRequest struct {
+	Email string `json:"email" validate:"required,inviteemail"`
+}
+
+type inviteResponse struct {
+	ID        uint32    `json:"id"`
+	Kind      string    `json:"kind"`
+	Email     string    `json:"email"`
+	Status    string    `json:"status"`
+	CreatedAt time.Time `json:"created_at"`
+	ExpiresAt time.Time `json:"expires_at"`
+}
+
+type inviteListItem struct {
+	ID        uint32    `json:"id"`
+	Kind      string    `json:"kind"`
+	Email     string    `json:"email"`
+	Status    string    `json:"status"`
+	CreatedAt time.Time `json:"created_at"`
+}
+
+type userListItem struct {
+	ID          uint32    `json:"id"`
+	Kind        string    `json:"kind"`
+	Username    string    `json:"username"`
+	DisplayName string    `json:"display_name"`
+	Email       string    `json:"email"`
+	Role        string    `json:"role"`
+	Status      string    `json:"status"`
+	CreatedAt   time.Time `json:"created_at"`
+}
+
+func NewInviteHandler(createInvite *useCases.CreateInviteUseCase, cancelInvite *useCases.CancelInviteUseCase, renewInvite *useCases.RenewInviteUseCase, listUsersAndInvites *useCases.ListUsersAndInvitesUseCase) *InviteHandler {
+	return &InviteHandler{
+		CreateInviteUseCase:        createInvite,
+		CancelInviteUseCase:        cancelInvite,
+		RenewInviteUseCase:         renewInvite,
+		ListUsersAndInvitesUseCase: listUsersAndInvites,
+	}
+}
+
+func (h *InviteHandler) CreateInvite(w http.ResponseWriter, r *http.Request) {
+	var request CreateInviteRequest
+	if err := json.NewDecoder(r.Body).Decode(&request); err != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	if err := validator.Validate.Struct(request); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	userId, ok := claims.UserId(r)
+	if !ok {
+		http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+		return
+	}
+
+	created, err := h.CreateInviteUseCase.CreateInvite(useCases.CreateInviteCommand{
+		Email:     request.Email,
+		InvitedBy: userId,
+	})
+	if err != nil {
+		writeCreateInviteError(w, err)
+		return
+	}
+
+	writeInviteResponse(w, http.StatusCreated, created)
+}
+
+func writeInviteResponse(w http.ResponseWriter, status int, entry invite.Invite) {
+	body, err := json.Marshal(inviteResponse{
+		ID:        entry.ID,
+		Kind:      useCases.EntryKindInvite,
+		Email:     entry.Email,
+		Status:    string(entry.StatusAt(time.Now())),
+		CreatedAt: entry.CreatedAt,
+		ExpiresAt: entry.ExpiresAt,
+	})
+	if err != nil {
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+	w.Header().Set("Cache-Control", "no-store")
+	w.WriteHeader(status)
+	_, _ = w.Write(body)
+}
+
+func parseInviteId(r *http.Request) (uint32, error) {
+	id, err := strconv.ParseUint(chi.URLParam(r, "id"), 10, 32)
+	return uint32(id), err
+}
+
+func (h *InviteHandler) CancelInvite(w http.ResponseWriter, r *http.Request) {
+	id, err := parseInviteId(r)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	if err := h.CancelInviteUseCase.CancelInvite(id); err != nil {
+		writeManageInviteError(w, err)
+		return
+	}
+	w.WriteHeader(http.StatusNoContent)
+}
+
+func (h *InviteHandler) RenewInvite(w http.ResponseWriter, r *http.Request) {
+	id, err := parseInviteId(r)
+	if err != nil {
+		http.Error(w, apperr.IdUint32ErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	userId, ok := claims.UserId(r)
+	if !ok {
+		http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+		return
+	}
+
+	renewed, err := h.RenewInviteUseCase.RenewInvite(useCases.RenewInviteCommand{ID: id, RenewedBy: userId})
+	if err != nil {
+		writeManageInviteError(w, err)
+		return
+	}
+	writeInviteResponse(w, http.StatusOK, renewed)
+}
+
+func writeManageInviteError(w http.ResponseWriter, err error) {
+	switch {
+	case errors.Is(err, invite.ErrInviteNotFound):
+		http.Error(w, apperr.InviteNotFoundErrorMessage, http.StatusNotFound)
+	case errors.Is(err, invite.ErrInviteAlreadyAccepted):
+		http.Error(w, apperr.InviteAlreadyAcceptedErrorMessage, http.StatusConflict)
+	case errors.Is(err, invite.ErrInviteEmailNotSent):
+		http.Error(w, apperr.InviteNotSentErrorMessage, http.StatusInternalServerError)
+	case errors.Is(err, user.ErrUserNotFound):
+		http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+	default:
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+	}
+}
+
+func writeCreateInviteError(w http.ResponseWriter, err error) {
+	switch {
+	case errors.Is(err, invite.ErrEmailHasAccount):
+		http.Error(w, apperr.EmailHasAccountErrorMessage, http.StatusConflict)
+	case errors.Is(err, invite.ErrPendingInvite):
+		http.Error(w, apperr.PendingInviteErrorMessage, http.StatusConflict)
+	case errors.Is(err, invite.ErrInviteEmailNotSent):
+		http.Error(w, apperr.InviteNotSentErrorMessage, http.StatusInternalServerError)
+	case errors.Is(err, user.ErrUserNotFound):
+		http.Error(w, apperr.UnauthorizedErrorMessage, http.StatusUnauthorized)
+	default:
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+	}
+}
+
+func (h *InviteHandler) ListUsers(w http.ResponseWriter, _ *http.Request) {
+	entries := h.ListUsersAndInvitesUseCase.ListUsersAndInvites()
+
+	items := make([]any, 0, len(entries))
+	for _, entry := range entries {
+		if entry.Kind == useCases.EntryKindInvite {
+			items = append(items, inviteListItem{entry.ID, entry.Kind, entry.Email, entry.Status, entry.CreatedAt})
+			continue
+		}
+		items = append(items, userListItem{entry.ID, entry.Kind, entry.Username, entry.DisplayName, entry.Email, entry.Role, entry.Status, entry.CreatedAt})
+	}
+
+	body, err := json.Marshal(items)
+	if err != nil {
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+	w.Header().Set("Cache-Control", "no-store")
+	_, _ = w.Write(body)
+}

api/handlers/user/userHandler.go

@@ -0,0 +1,70 @@
+package user
+
+import (
+	"RenewCMS/api/pkg/apperr"
+	"RenewCMS/api/pkg/claims"
+	"RenewCMS/api/pkg/publicuser"
+	validator "RenewCMS/api/pkg/validator"
+	"RenewCMS/internal/domain/user"
+	"RenewCMS/internal/infrastructure/useCases"
+	"encoding/json"
+	"errors"
+	"net/http"
+)
+
+type Handler struct {
+	UpdateProfileUseCase *useCases.UpdateUserProfileUseCase
+}
+
+type UpdateProfileRequest struct {
+	DisplayName *string `json:"display_name" validate:"required"`
+}
+
+func NewHandler(updateProfile *useCases.UpdateUserProfileUseCase) *Handler {
+	return &Handler{
+		UpdateProfileUseCase: updateProfile,
+	}
+}
+
+func (h *Handler) UpdateMe(w http.ResponseWriter, r *http.Request) {
+	var request UpdateProfileRequest
+	err := json.NewDecoder(r.Body).Decode(&request)
+	if err != nil {
+		http.Error(w, apperr.BodyErrorMessage, http.StatusBadRequest)
+		return
+	}
+
+	err = validator.Validate.Struct(request)
+	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
+	}
+
+	updatedUser, err := h.UpdateProfileUseCase.UpdateDisplayName(userId, *request.DisplayName)
+	if err != nil {
+		if errors.Is(err, user.ErrInvalidDisplayName) {
+			http.Error(w, apperr.DisplayNameErrorMessage, http.StatusBadRequest)
+			return
+		}
+		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(publicuser.New(updatedUser))
+	if err != nil {
+		http.Error(w, "Internal server error", http.StatusInternalServerError)
+		return
+	}
+	w.Header().Set("Cache-Control", "no-store")
+	_, _ = w.Write(body)
+}

api/middleware/auth.go

@@ -0,0 +1,97 @@
+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)
+		})
+	}
+}
+
+func RequireOwner(getUser *useCases.GetUserUseCase) func(http.Handler) http.Handler {
+	return func(next http.Handler) http.Handler {
+		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			currentUser, ok := resolveCurrentUser(getUser, w, r)
+			if !ok {
+				return
+			}
+
+			if currentUser.Role != user.RoleOwner {
+				http.Error(w, apperr.OwnerRequiredErrorMessage, http.StatusForbidden)
+				return
+			}
+
+			next.ServeHTTP(w, r)
+		})
+	}
+}

api/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,27 @@
+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 ImageNotFoundErrorMessage = "Image not found"
+const DisplayNameErrorMessage = "Display name must be 60 characters or fewer."
+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."
+const EmailHasAccountErrorMessage = "This address already has an account."
+const PendingInviteErrorMessage = "There's already a pending invite for this address."
+const InviteNotSentErrorMessage = "Couldn't send the invite. Try again in a moment."
+const InviteNotFoundErrorMessage = "Invite not found"
+const InviteAlreadyAcceptedErrorMessage = "This invite has already been accepted."
+const InviteInvalidErrorMessage = "This invite link doesn't work."
+const InviteExpiredErrorMessage = "This invite has expired."
+const OwnerRequiredErrorMessage = "Only the owner can do this."
+const UsernameTakenErrorMessage = "That username is taken. Try another."

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/publicuser/publicUser.go

@@ -0,0 +1,30 @@
+package publicuser
+
+import (
+	"RenewCMS/internal/domain/user"
+	"time"
+)
+
+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"`
+	DisplayName string    `json:"display_name"`
+	Role        user.Role `json:"role"`
+}
+
+func New(u user.User) PublicUser {
+	return PublicUser{
+		ID:          u.ID,
+		Username:    u.Username,
+		Email:       u.Email,
+		IsVerified:  u.IsVerified,
+		CreatedAt:   u.CreatedAt,
+		UpdatedAt:   u.UpdatedAt,
+		DisplayName: u.DisplayName,
+		Role:        u.Role,
+	}
+}

api/pkg/validator/validator.go

@@ -0,0 +1,22 @@
+package validator
+
+import (
+	"regexp"
+
+	"github.com/go-playground/validator/v10"
+)
+
+const inviteEmailTag = "inviteemail"
+
+var inviteEmailPattern = regexp.MustCompile(`^[^\s@]+@[^\s@.]+(\.[^\s@.]+)+$`)
+
+var Validate *validator.Validate
+
+func InitValidator() {
+	Validate = validator.New()
+	_ = Validate.RegisterValidation(inviteEmailTag, isInviteEmail)
+}
+
+func isInviteEmail(field validator.FieldLevel) bool {
+	return inviteEmailPattern.MatchString(field.Field().String())
+}

api/router.go

@@ -0,0 +1,196 @@
+package api
+
+import (
+	"RenewCMS/api/handlers/article"
+	"RenewCMS/api/handlers/auth"
+	"RenewCMS/api/handlers/frontend"
+	"RenewCMS/api/handlers/image"
+	"RenewCMS/api/handlers/settings"
+	"RenewCMS/api/handlers/staticimages"
+	"RenewCMS/api/handlers/user"
+	"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, container.DeleteImageUseCase)
+
+	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)
+		r.Delete("/{id}/image/{imageId}", imageHandler.DeleteImage)
+	})
+	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)
+	acceptInviteHandler := auth.NewAcceptInviteHandler(container.GetInviteUseCase, container.AcceptInviteUseCase, container.Token, isProduction)
+
+	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(middleware.TrustedProxyRealIP(trustedProxies))
+		r.Use(middleware.NewRateLimiter(rateLimit.MaxAttempts, rateLimit.Window))
+		r.Get("/invite", acceptInviteHandler.GetInvite)
+		r.Post("/invite/accept", acceptInviteHandler.AcceptInvite)
+	})
+	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 NewUserRouter(container *UseCases, rateLimit config.AuthRateLimitSettings, trustedProxies []string) http.Handler {
+	r := chi.NewRouter()
+
+	userHandler := user.NewHandler(container.UpdateUserProfileUseCase)
+	inviteHandler := user.NewInviteHandler(container.CreateInviteUseCase, container.CancelInviteUseCase, container.RenewInviteUseCase, container.ListUsersAndInvitesUseCase)
+
+	r.Use(jwtauth.Verifier(container.Token))
+	r.Use(jwtauth.Authenticator(container.Token))
+	r.Use(middleware.RequireCurrentToken(container.GetUserUseCase))
+	r.Use(middleware.RequireVerifiedUser(container.GetUserUseCase))
+	r.Patch("/me", userHandler.UpdateMe)
+	r.Get("/", inviteHandler.ListUsers)
+	r.Group(func(r chi.Router) {
+		r.Use(middleware.RequireOwner(container.GetUserUseCase))
+		r.Use(middleware.TrustedProxyRealIP(trustedProxies))
+		r.Use(middleware.NewRateLimiter(rateLimit.MaxAttempts, rateLimit.Window))
+		r.Post("/invite", inviteHandler.CreateInvite)
+		r.Delete("/invite/{id}", inviteHandler.CancelInvite)
+		r.Post("/invite/{id}/renew", inviteHandler.RenewInvite)
+	})
+	return r
+}
+
+func NewSettingsRouter(container *UseCases) http.Handler {
+	r := chi.NewRouter()
+
+	settingsHandler := settings.NewHandler(container.GetSettingsUseCase)
+
+	r.Use(jwtauth.Verifier(container.Token))
+	r.Use(jwtauth.Authenticator(container.Token))
+	r.Use(middleware.RequireCurrentToken(container.GetUserUseCase))
+	r.Use(middleware.RequireVerifiedUser(container.GetUserUseCase))
+	r.Get("/", settingsHandler.GetSettings)
+	return r
+}
+
+func 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("/user", NewUserRouter(container, settings.AuthRateLimit, settings.TrustedProxies))
+	r.Mount("/settings", NewSettingsRouter(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,152 @@
+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
+	}
+	settings.Version = version
+
+	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,46 @@
+# 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/`.
+
+### Delivery packages
+
+| Package | Role |
+|---|---|
+| `api/handlers/user` | Authenticated user endpoints: profile update (`UpdateMe`) and the users list with invitations (`CreateInvite`, `ListUsers`). |
+| `api/pkg/publicuser` | `PublicUser`, the JSON shape of a user with no password, codes or token version. `publicuser.New` converts a domain `user.User`, so handlers never serialise the domain struct directly. |
+
+## 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`, `POST /v1/auth/password-reset` or the invite-accept pair (`GET /v1/auth/invite` and `POST /v1/auth/invite/accept`, sharing one counter) within the window, tracked independently per route.                                                          |
+| `AUTH_RATE_LIMIT_WINDOW_SECONDS` | `60`        | Length, in seconds, of the fixed rate-limit window for the 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 the rate limiting of the routes above. 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,44 @@
+# 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 three 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` | 22 | `source/RenewCMS Screens Back-office.dc.html` |
+| [Integration](screens/integration.md) | `/integration` | 2 | `source/RenewCMS Screens Back-office.dc.html` |
+| [Users](screens/users.md) | `/users` | 17 | `source/RenewCMS Screens Back-office.dc.html` |
+| [Settings](screens/settings.md) | `/settings` | 1 | `source/RenewCMS Screens Back-office.dc.html` |
+| [Profile](screens/profile.md) | `/profile` | 13 | `source/RenewCMS Screens Back-office.dc.html` |
+| [Accept invite](screens/accept-invite.md) | `/invite/accept?c=CODE` | 9 | `source/RenewCMS Screens Auth.dc.html` |
+| [Global](screens/global.md) | `any route` | 4 | `source/RenewCMS Screens Back-office.dc.html` |
+
+## Other boards
+
+- `source/RenewCMS Prototype.dc.html`: the clickable flows (first run, edit and publish, password reset, delete, session expiry mid-edit).
+- `source/RenewCMS Handoff.dc.html`: the handoff page the first markdown here was generated from. It predates the Users and Profile screens and the invitation email, so it does not list them. Those are written by hand from the Back-office board, `AppFrame.dc.html`, the Prototype and `emails/invitation.html`.
+- `source/RenewCMS Components Product.dc.html`: not regenerated for the new screens either. The matching component changes are in `components.md`, under "Added with the Users and Profile screens" and "Added with roles, invite actions and Settings".
+- `source/RenewCMS Directions.dc.html`: the three brand directions (history only).

docs/design/components.md

@@ -0,0 +1,766 @@
+# 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 (a bottom sheet below md) | displayName?, username, email | logout | none | DashboardShell |
+| UsersTable | UTable | rows: UserRow[], loading, canManage: boolean, busyIds: Set | cancel-invite, renew-invite | none | Users (md and up) |
+| UserCardList | custom list | same as UsersTable | same as UsersTable | none | Users (below md) |
+| RoleBadge | UBadge | role: 'owner'\|'admin' | none | none | Users |
+| SettingsPage | custom card | none (reads GET /v1/settings) | none | none | Settings |
+| InviteStatusBadge | UBadge | status: 'accepted'\|'pending'\|'expired' | none | none | Users |
+| InviteUserModal | UModal, UForm, UFormField, UInput | none | invited(invite) | none | Users |
+| ProfileCard | custom card (border, padding, optional footer strip) | title, description | none | default, footer | Profile |
+| 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, Accept invite |
+| PasswordStrengthHint | custom (in UFormField #help) | rules: { label, met }[], showErrors: boolean | none | none | Register, Reset, Accept invite |
+| ResultPanel | custom + UButton | tone: 'success'\|'error'\|'info', icon, title, description, actions: ButtonProps[] | none | default | Pending, Verify, Reset request, Reset, Accept invite, 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` (it also carries the display name), `useUsers` (the list and the invite action), `useProfile` (the display name draft and save), `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 five destinations (Home, Articles, Users, Integration, Settings), and the user menu sits at its foot. The top bar carries the breadcrumbs and page title. Collapsing the sidebar leaves a 56 px icon rail. Below lg , the sidebar becomes a slideover.
+
+RenewCMS
+
+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. Superseded: see "UserMenu (changed)" under "Added with the Users and Profile screens", which restores the System, Light and Dark items.
+
+Props, slots No props, because the shell reads the user from the session Pinia store. The navbar reads route.meta.title and route.meta.breadcrumb . Slots navbar-right (page actions on mobile) and default . It shows the offline banner when navigator.onLine is false.
+
+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. A JPEG, PNG or WEBP then goes through a crop-and-resize step before it uploads; an SVG skips straight to uploading. 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
+
+Crop and resize north-wall.jpg · 3.9 MB
+
+crop, default: whole image selected, width "1600 px"
+
+Crop and resize north-wall.jpg · 3.9 MB
+
+crop, ratio locked to 16:9
+
+Crop and resize north-wall.jpg · 3.9 MB
+
+crop, crop narrower than the chosen width
+
+north-wall.jpg 43%
+
+Uploading 180 of 420 KB
+
+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, '') .
+
+Crop and resize A JPEG, PNG or WEBP opens on a 640px-wide modal (`md.crop`) between the file picker and the upload, replacing the "Add an image" title with "Crop and resize" and the filename/size as the description. The stage shows the image with the crop frame starting as the whole image: a rule-of-thirds grid (lines at 33.3 %/66.6 %), four 12×12 px corner handles, and a pixel-size label (mono, bottom-left, dark pill) that tracks the frame's current size. The frame is `tabindex="0"`, `aria-label="Crop area. Arrow keys move it, Shift and arrow keys resize it."`; dragging moves it, dragging a handle resizes it, arrow keys nudge it by 1 px and Shift+arrow keys resize it.
+
+Aspect ratio is a `radiogroup` of five pills — Original, Free, 16:9, 4:3, 1:1 — plus Rotate and Reset actions above it. Width is a second `radiogroup` — Original, 1600 px (default), 1200 px, 800 px. A mono line below reads "Uploads as {width} × {height} px · about {size}", where the estimated size is shown in KB under 1 MB and in MB above it. When the chosen width is larger than the crop's own width, the output stays at the crop's size (never upscaled) and an info row explains why: "The crop is {crop width} px wide, so it's uploaded at that size. Enlarging it would make it blurry." The footer becomes "Choose another file" (back to the file picker, `data-act="upload-pick"` from `idle`) and "Upload image" (starts the upload with the cropped, resized file). SVGs never see this step: they upload as soon as they're chosen. The "in progress" state afterwards reports the resized file's size, e.g. "Uploading 180 of 420 KB".
+
+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.
+
+## Added with the Users and Profile screens
+
+The Product components board was not regenerated for these. They are written from `source/RenewCMS Screens Back-office.dc.html`, `source/AppFrame.dc.html` and the Prototype. Their exact values come from AppFrame.
+
+### UserMenu (changed)
+
+The chip at the foot of the sidebar no longer logs out on click. It opens the account menu, which lists Profile, the theme choice and Log out.
+
+- **Chip:** 40 px high, an initials avatar (26 px, sand `#d4c5b0` with ink text), the name, and a chevrons-up-down icon. `aria-haspopup="menu"`, `aria-expanded`, title "Account". While the menu is open, or while `/profile` is the current page, it takes `--rc-sand` with `#111111` text.
+- **Name:** the display name when there is one, otherwise the username. Initials come from the first letters of the first two words of the display name, uppercased. Without a display name they come from the username.
+- **Desktop menu:** a 224 px popover anchored above the chip on its left edge, with `--rc-shadow-pop`. Header: the name in semibold, the email below it in muted 12 px, a bottom border. Items are 32 px: Profile (circle-user), a separator, System, Light and Dark (14 px text, a check icon at the right edge on the current choice), a separator, Log out (log-out). The current page's item is highlighted with `--ui-bg-elevated`. The theme items are radio-style: choosing one applies at once and keeps the menu open. Nuxt UI: `type: 'checkbox'` items bound to `useColorMode().preference`.
+- **Mobile:** the account row in the navigation drawer opens a bottom sheet over an `--rc-overlay` scrim, with a grab handle. Header: 36 px avatar, name in 15 px semibold, email in muted text. Items are 48 px at 15 px text; the theme items keep the same order and separators.
+- **Keyboard:** Escape or a click outside closes it. Arrow keys move between items.
+- The board now draws the theme items, so the chip, menu and sheet need no visual exception. The board highlights Profile even on Home; the app highlights it only on `/profile`.
+
+### DashboardShell (changed)
+
+The navigation gains **Users** (users icon) between Articles and Integration, in the sidebar and in the mobile drawer. Breadcrumbs for the new pages are "Users" and "Profile". It later gains **Settings** (settings icon) after Integration, with the breadcrumb "Settings".
+
+### UsersTable, UserCardList
+
+Superseded by "UsersTable, UserCardList (changed)" below.
+
+Skeleton rows appear after 150 ms of loading.
+
+### InviteStatusBadge
+
+A 22 px outline-less badge with a 12 px icon and the word, so status is never shown by color alone.
+
+| Status | Icon | Fill and text |
+|---|---|---|
+| Accepted | circle-check | `--rc-success-soft`, `--ui-success` |
+| Pending | mail | `--rc-warning-soft`, `--ui-warning` |
+| Expired | clock-alert | transparent, `--ui-text-muted`, border `--ui-border-accented` |
+
+### InviteUserModal
+
+A UModal with one field, following the NewArticleModal pattern: title "Invite a user", the text "We'll email them a link to choose a username and password. The link expires after 3 days.", an Email field (placeholder "name@example.com", focused on open), Cancel and "Send invite". While sending, the field is disabled, the button reads "Sending…" and the dialog can't be dismissed. A field error shows under the input, a request failure shows an alert above the buttons, and the address always stays in the field. On success it closes and emits the new invite.
+
+### ProfileCard
+
+A bordered card with 20 px padding (16 px on mobile), a semibold 14 px title, a muted description, and its content. An optional footer strip sits below a top border on `--ui-bg-muted`, with the status text on the left and the action on the right. The Display name card uses the footer; Account and Password do not.
+
+The Display name field uses CharacterCounter with a maximum of 60, counted in Unicode characters, in the mono style on the right of the help row. Read-only fields (username, email, password) are disabled inputs on `--ui-bg-elevated` with a lock icon at the right.
+
+## 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".
+
+## Added with roles, invite actions and Settings
+
+Written from `source/RenewCMS Screens Back-office.dc.html` and `source/AppFrame.dc.html`. The Product components board was not regenerated for these.
+
+### UsersTable, UserCardList (changed)
+
+Columns Email, Display name, Role, Invite status, Created (sorted descending, with an arrow-down icon on the header) and an unlabeled actions column. Grid `minmax(0,1.3fr) minmax(0,1fr) 84px 120px 110px 150px`, 12 px gap, 36 px header on `--ui-bg-elevated`, 48 px rows with a top border. Below md the same rows become cards with a 68 px minimum height: the email line, the display name below it when set, then role badge, status badge and "Created {date}" on one line, then the row action as a 44 px button.
+
+The email cell is medium weight and highlighted, with a mono "you" tag on the current user's row. The display name is highlighted, or a muted `—` when empty. The row of a just-sent or just-renewed invite has `--ui-bg-elevated`. Skeleton rows have one bar per column. The username is not shown.
+
+### RoleBadge
+
+A 20 px badge in IBM Plex Mono 11 px medium, 7 px side padding, no icon.
+
+| Role | Fill | Text | Border |
+|---|---|---|---|
+| owner | `--ui-primary` | `--ui-bg` | `--ui-primary` |
+| admin | transparent | `--ui-text-toned` | `--ui-border-accented` |
+
+### Row action button (Users)
+
+A 28 px outline button on desktop (12 px medium text, 13 px icon, 9 px side padding, `--ui-border-accented` border, `--ui-bg` fill, no wrapping), 44 px on mobile (14 px side padding, 14 px icon). Cancel invite: user-x, text `--ui-error`. Renew invite: refresh-cw, text `--ui-text-highlighted`. While busy: the label becomes "Renewing…", the icon loader-circle, opacity 50 %, disabled. Nuxt UI: `UButton variant="outline" size="xs"` with the classes above.
+
+Cancel goes through `ConfirmDialog` with `tone: 'danger'`: title "Cancel this invite?", the description names the address, the cancel button reads "Keep invite" and the confirm button "Cancel invite", pending label "Cancelling…", and a failure shows a notice inside the dialog.
+
+### SettingsPage
+
+A page header (title "Settings", subtitle "Workspace information."), then one card holding a "Version" row. See [screens/settings.md](screens/settings.md).

docs/design/emails.md

@@ -0,0 +1,16 @@
+# 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}}`.
+
+- `source/emails/invitation.html` uses `{{.Host}}`, `{{.VerificationCode}}`, `{{.Email}}` and `{{.InvitedBy}}`, linking to `{{.Host}}/invite/accept?c={{.VerificationCode}}`. `{{.Email}}` is the invited address, shown in the body only. `{{.InvitedBy}}` is the inviter's display name, or their username when they have none. The subject is "{{.InvitedBy}} invited you to RenewCMS". The invite expires in 3 days and works once.
+
+Previews: `source/RenewCMS Emails.dc.html`.
+
+## Transactional emails
+
+Three Go html/template files: emails/verification.html, emails/password-reset.html and emails/invitation.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", "Reset your RenewCMS password" and "<InvitedBy> invited you to RenewCMS", where .InvitedBy is the inviter's display name or username. 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,25 @@
+# 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 |
+| `/users` | DashboardShell | verified | UsersPage + InviteUserModal | GET /v1/user/ · POST /v1/user/invite · DELETE /v1/user/invite/:id · POST /v1/user/invite/:id/renew |
+| `/settings` | DashboardShell | verified | SettingsPage | GET /v1/settings |
+| `/profile` | DashboardShell | verified | ProfilePage | GET /v1/auth/me · PATCH /v1/user/me · POST /v1/auth/password-reset |
+| `/invite/accept` | AuthShell | public | AcceptInvitePage | GET /v1/auth/invite?c=* · POST /v1/auth/invite/accept* |
+| `/:pathMatch(.*)*` | either | any | NotFoundPage | none |
+
+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/accept-invite.md

@@ -0,0 +1,114 @@
+# Accept invite
+
+- **Route:** `/invite/accept?c=CODE`
+- **API:** GET /v1/auth/invite?c=CODE (pending) · POST /v1/auth/invite/accept (pending)
+- **Visual reference:** `source/RenewCMS Screens Auth.dc.html`, group "Accept invite" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+Opened from the invitation email. The link carries only the code, so the invited email is looked up on load and shown read-only. Username and password follow the Register rules, including PasswordStrengthHint, with no confirm field. On success the person is logged in and sent to /home with a toast. The account is already verified, because the invite went to their email, so it skips the pending and verify screens.
+
+Neither endpoint exists yet:
+
+- `GET /v1/auth/invite?c=CODE` returns `{ email }`, or 404 or 410.
+- `POST /v1/auth/invite/accept` takes `{ code, username, password }`. It returns 200 with the session cookie, 409 for a taken username, or 404 or 410 as above.
+
+Registration stays closed to everyone else: [register.md](register.md) "Registration closed" still applies to `/register`. The board does not draw the case of a logged-in person opening the link; it is not specified.
+
+## States
+
+### Checking the link
+
+**Trigger:** On load, while the invite is looked up.
+
+- Full-card spinner: "Checking your invite…"
+
+### Default
+
+**Trigger:** The code is valid and unused.
+
+- Heading: **Accept your invite**
+- Description: "Choose a username and password to finish setting up your account."
+- Field `Email`: placeholder "you@example.com"; value "lea.martin@renew.example"; read-only; help "From your invitation."
+- Field `Username`: placeholder "e.g. lea"; counter "0 / 20"; help "Letters and numbers, 3 to 20 characters. You'll use it to log in."
+- Field `Password`: password with show/hide; checklist "At least 8 characters" (unmet)
+- Submit button: "Accept invite"
+- Footer: Already have an account? [Log in]
+
+### Validation errors
+
+**Trigger:** Checked on blur and on submit, using the same rules as Register. Nothing is sent.
+
+- Heading: **Accept your invite**
+- Description: "Choose a username and password to finish setting up your account."
+- Field `Email`: placeholder "you@example.com"; value "lea.martin@renew.example"; read-only; help "From your invitation."
+- Field `Username`: placeholder "e.g. lea"; value "ma"; counter "2 / 20" in error; **error "Use 3 to 20 characters."**
+- Field `Password`: value "lime"; password with show/hide; checklist "At least 8 characters" (err)
+- Submit button: "Accept invite"
+- Footer: Already have an account? [Log in]
+
+### Filled, valid
+
+**Trigger:** Every rule is met and the checklist item turns green.
+
+- Heading: **Accept your invite**
+- Description: "Choose a username and password to finish setting up your account."
+- Field `Email`: placeholder "you@example.com"; value "lea.martin@renew.example"; read-only; help "From your invitation."
+- Field `Username`: placeholder "e.g. lea"; value "lea"; counter "3 / 20"; help "Letters and numbers, 3 to 20 characters. You'll use it to log in."
+- Field `Password`: value "limewash2026"; password with show/hide; password shown; checklist "At least 8 characters" (met)
+- Submit button: "Accept invite"
+- Footer: Already have an account? [Log in]
+
+### Submitting
+
+**Trigger:** Fields and button are disabled.
+
+- Heading: **Accept your invite**
+- Description: "Choose a username and password to finish setting up your account."
+- Field `Email`: placeholder "you@example.com"; value "lea.martin@renew.example"; read-only; help "From your invitation."
+- Field `Username`: placeholder "e.g. lea"; value "lea"; counter "3 / 20"; help "Letters and numbers, 3 to 20 characters. You'll use it to log in."
+- Field `Password`: value "limewash2026"; password with show/hide; checklist "At least 8 characters" (met)
+- Submit button: "Creating account…", loading
+- Footer: Already have an account? [Log in]
+
+### Username taken (409)
+
+**Trigger:** Another user has that username. The value is kept and the field gets focus.
+
+- Heading: **Accept your invite**
+- Description: "Choose a username and password to finish setting up your account."
+- Field `Email`: placeholder "you@example.com"; value "lea.martin@renew.example"; read-only; help "From your invitation."
+- Field `Username`: placeholder "e.g. lea"; value "marta"; counter "5 / 20"; focused; **error "That username is taken. Try another."**
+- Field `Password`: value "limewash2026"; password with show/hide; checklist "At least 8 characters" (met)
+- Submit button: "Accept invite"
+- Footer: Already have an account? [Log in]
+
+### Invalid or used link (404)
+
+**Trigger:** The code is wrong, was already accepted, or is missing from the URL. No form is shown.
+
+- ResultPanel (error, link-2-off): **This invite link doesn't work**; text "It may be incomplete, or it may already have been used. If you already set up your account, log in instead."; note "Open the link from your email again, or copy the full address into your browser."; actions "Go to log in" (primary)
+
+### Expired link (410)
+
+**Trigger:** The invite is older than 3 days.
+
+- ResultPanel (error, clock): **This invite has expired**; text "Invites work once, for 3 days. Ask the person who invited you to send a new one."; actions "Go to log in" (secondary)
+
+### 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: **Accept your invite**
+- Description: "Choose a username and password to finish setting up your account."
+- Field `Email`: placeholder "you@example.com"; value "lea.martin@renew.example"; read-only; help "From your invitation."
+- Field `Username`: placeholder "e.g. lea"; value "lea"; counter "3 / 20"; help "Letters and numbers, 3 to 20 characters. You'll use it to log in."
+- Field `Password`: value "limewash2026"; password with show/hide; checklist "At least 8 characters" (met)
+- Submit button: "Accept invite"
+- Footer: Already have an account? [Log in]
+
+### Success
+
+**Trigger:** 200 sets the session cookie → /home after 800 ms, with a toast. No verification step.
+
+- ResultPanel (success, circle-check): **Your account is ready**; text "Taking you to your dashboard…"
+- Toast (circle-check): **Welcome to RenewCMS** "You're logged in as lea."

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,219 @@
+# 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: crop and resize
+
+**Trigger:** A JPEG, PNG or WEBP passed the checks, and nothing is sent yet. The crop starts as the whole image and the width defaults to 1600 px. SVGs skip this step.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Modal: **Crop and resize** "north-wall.jpg · 3.9 MB"
+  - crop: ratio "Original", width "1600 px"
+  - cancel "Choose another file"
+  - confirm "Upload image"
+- Editor: status "draft", save "dirty"
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Upload: crop to a ratio
+
+**Trigger:** 16:9 chosen. The frame keeps the ratio while it's dragged or resized. Arrow keys move it; Shift and arrow keys resize it.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Modal: **Crop and resize** "north-wall.jpg · 3.9 MB"
+  - crop: ratio "16:9", width "1600 px"
+  - cancel "Choose another file"
+  - confirm "Upload image"
+- Editor: status "draft", save "dirty"
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Upload: crop narrower than the width
+
+**Trigger:** The crop is smaller than the chosen width, so it keeps its own size.
+
+- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
+- Modal: **Crop and resize** "north-wall.jpg · 3.9 MB"
+  - crop: ratio "1:1", width "1600 px"
+  - note: "The crop is 640 px wide, so it's uploaded at that size. Enlarging it would make it blurry."
+  - cancel "Choose another file"
+  - confirm "Upload image"
+- Editor: status "draft", save "dirty"
+- Mobile: leading arrow-left button, trailing ellipsis
+
+### Upload: in progress
+
+**Trigger:** Upload image was pressed. The cropped, resized 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" ("Uploading 180 of 420 KB")
+  - 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 greeting reads "Good morning, {name}", where the name is the display name when the user has saved one and the username otherwise. 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/profile.md

@@ -0,0 +1,179 @@
+# Profile
+
+- **Route:** `/profile`
+- **API:** GET /v1/auth/me · PATCH /v1/user/me (pending) · POST /v1/auth/password-reset
+- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Profile" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
+
+Opened from the account menu at the bottom of the sidebar. Username, email and password are read-only. The display name is optional, trimmed, and up to 60 characters.
+
+Once saved it replaces the username everywhere a person is named:
+
+- the sidebar chip and the account menu (name, and the avatar initials)
+- the Home greeting ("Good morning, Marta Alves")
+- the Display name column of the Users list
+- the emails RenewCMS sends, such as "Marta Alves invited you to RenewCMS"
+
+Saving it empty goes back to the username. Logging in still uses the username.
+
+The reset link uses the same flow as "Forgot password" and ends on the auth board's "Choose a new password" screen ([reset-password.md](reset-password.md)).
+
+## The page
+
+Three cards under the title "Profile" and the subtitle "Your account on this RenewCMS workspace.", 720 px wide at most.
+
+| Card | Content |
+|---|---|
+| Display name | Title "Display name". Text "Shown instead of your username across the back-office and in the emails RenewCMS sends. Leave it empty to use your username." One input, label "Display name (optional)", placeholder "e.g. Marta Alves", with a live counter "n / 60" in mono on the right of the help row. A footer strip holds a status line on the left and the Save button on the right. |
+| Account | Title "Account". Text "Set when your account was created. You log in with your username, even after adding a display name." Two disabled inputs with a lock icon: Username and Email (two columns on desktop, one on mobile). |
+| Password | Title "Password". Text "To change it, we'll email a reset link to marta@renew.example. The link works once, within 1 hour." A disabled input showing "••••••••••••" beside the button "Send reset link" (mail icon). A note appears under them once a request has been made. |
+
+**Footer status line** (12 px): "Unsaved changes" in the warning color while dirty and not saving. Otherwise "You appear as “Marta Alves”." when a display name is saved, or "You appear as “marta”, your username." when it isn't.
+
+**Save button:** full opacity when the value changed and is valid, or while saving. 40 % opacity and inert otherwise. Enter in the field saves.
+
+**Counting:** characters are counted as Unicode characters, not bytes or UTF-16 units. The counter turns red over 60.
+
+**Leaving the page** with unsaved changes asks for confirmation.
+
+**Mobile:** cards use 16 px padding, inputs are 44 px, the two account inputs stack, and the password input and its button stack.
+
+## The account menu
+
+Opened from the account chip at the bottom of the sidebar (chevrons-up-down icon; `aria-haspopup="menu"`, `aria-expanded`). The chip takes the sand fill with ink text while the menu is open, and while `/profile` is the current page.
+
+Desktop: a 224 px popover above the chip, aligned to its left. Mobile: the account row in the navigation drawer opens it as a bottom sheet with a grab handle. Escape or a click outside closes both.
+
+| Part | Content |
+|---|---|
+| Header | The name in semibold (display name, or the username), and the email in muted 12 px (14 px on mobile, with a 36 px initials avatar beside them) |
+| Item | Profile (circle-user icon), highlighted while on `/profile` |
+| Separator | |
+| Items | System, Light, Dark: a radio-style group, the current choice carries a check icon at the right edge; choosing one applies the theme at once and keeps the menu open |
+| Separator | |
+| Item | Log out (log-out icon) |
+
+Avatar initials come from the first letters of the first two words of the display name, uppercased ("Marta Alves" gives MA). Without a display name they come from the username.
+
+The board's menu now carries System, Light and Dark, matching the shipped UserMenu. The theme choice stays in the account menu; the Profile page does not repeat it. Items are 32 px on desktop and 48 px in the mobile sheet.
+
+## States
+
+### Account menu
+
+**Trigger:** The account chip at the bottom of the sidebar. On mobile, the account row in the navigation drawer opens it as a sheet. Escape or a click outside closes it.
+
+- Breadcrumbs: Home (mobile title "Home")
+- Page behind the menu: Home, default
+- Menu open, as described above, with the System, Light and Dark group between Profile and Log out. The board shows Light checked
+
+### Loading
+
+**Trigger:** Opened directly by URL before /auth/me has returned. From the menu, the cached user renders straight away.
+
+- Breadcrumbs: Profile (mobile title "Profile")
+- Three skeleton cards (one input, two inputs, one input)
+
+### Default, no display name
+
+**Trigger:** The usual first visit. The username is used everywhere.
+
+- Breadcrumbs: Profile (mobile title "Profile")
+- Display name: empty, placeholder "e.g. Marta Alves", counter "0 / 60"
+- Footer: "You appear as “marta”, your username."
+- Save: 40 % opacity
+
+### Editing
+
+**Trigger:** Typing in the field. Save turns on, and leaving the page asks for confirmation.
+
+- Breadcrumbs: Profile (mobile title "Profile")
+- Display name: "Marta Alves"; focused; counter "11 / 60"
+- Footer: "Unsaved changes" (warning)
+- Save: enabled
+
+### Too long
+
+**Trigger:** Over 60 characters. Checked as you type, and Save stays off.
+
+- Breadcrumbs: Profile (mobile title "Profile")
+- Display name: "Marta Alves, Head of Renovations, Brussels and Wallonia office"; focused; counter red
+- **Error "Use 60 characters or fewer."**
+- Footer: "Unsaved changes" (warning)
+- Save: 40 % opacity
+
+### Saving
+
+**Trigger:** Save, or Enter in the field. The field is disabled.
+
+- Breadcrumbs: Profile (mobile title "Profile")
+- Display name: "Marta Alves", disabled, dimmed
+- Save: "Saving…" with a loader
+
+### Saved
+
+**Trigger:** 200: the sidebar and account menu switch to the display name at once, and a toast confirms.
+
+- Breadcrumbs: Profile (mobile title "Profile")
+- Sidebar chip: "Marta Alves", initials MA
+- Display name: "Marta Alves"; counter "11 / 60"
+- Footer: "You appear as “Marta Alves”."
+- Toast (success, circle-check): **Display name saved** "You now appear as Marta Alves across RenewCMS and in emails."
+
+### Save failed
+
+**Trigger:** 500 or network failure. The typed value is kept.
+
+- Breadcrumbs: Profile (mobile title "Profile")
+- Alert (error) in the Display name card: "Couldn't save your display name. Your text is still here. Try again in a moment."
+- Display name: "Marta Alves"
+- Footer: "Unsaved changes" (warning)
+- Save: enabled
+
+### Reset: sending
+
+**Trigger:** "Send reset link". No confirmation, since it only sends an email.
+
+- Breadcrumbs: Profile (mobile title "Profile")
+- Button: "Sending…" with a loader
+- Sidebar chip shows the display name "Marta Alves"
+
+### Reset: sent
+
+**Trigger:** 200. The message stays until the page is left. "Send again" sends a new link and the old one stops working.
+
+- Breadcrumbs: Profile (mobile title "Profile")
+- Button: "Send again" (mail)
+- Note (success, mail-check): **Reset link sent** "Check marta@renew.example. The link works once, within 1 hour."
+
+### Reset: too many requests (429)
+
+**Trigger:** Rate limited. The button is disabled for 5 minutes.
+
+- Breadcrumbs: Profile (mobile title "Profile")
+- Button: "Send reset link", 40 % opacity, disabled
+- Note (warning, clock-alert): **Too many requests** "You've asked for several links recently. Wait a few minutes, then try again."
+
+### Reset: failed
+
+**Trigger:** 500 or network failure. The button can be pressed again.
+
+- Breadcrumbs: Profile (mobile title "Profile")
+- Button: "Send reset link"
+- Note (error, circle-x): **Couldn't send the link** "Check your connection and try again."
+
+### Display names in the Users list
+
+**Trigger:** The Display name column of the Users list shows the name when one is set and a dash when not. Your own row follows your saved name. This state needs the Users page ([users.md](users.md)).
+
+- Breadcrumbs: Users (mobile title "Users")
+- Signed-in user's display name: "Marta Alves" (sidebar chip shows it too)
+- Row `marta@renew.example` (you): display name "Marta Alves", role owner, Accepted
+- Row `ines.duarte@renew.example`: display name "Inès Duarte", role admin, Accepted
+- Row `jonas@renew.example`: display name "—" (muted), role admin, Accepted
+
+## Notes for implementation
+
+- `PATCH /v1/user/me` is marked pending by the design: it does not exist yet. `GET /v1/auth/me` has to start returning the display name.
+- The Password card sends the reset email to the account's own address through the existing `POST /v1/auth/password-reset`. The link ends on the reset confirm screen, and a successful reset invalidates the current session like any other reset.
+- "Disabled for 5 minutes" is the design's number. The real window comes from the `Retry-After` header, as on the login and reset screens.
+- Resolved: the theme choice (System, Light, Dark) stays in the account menu, as the board now draws it. The board still draws Profile highlighted on Home; the app highlights it only on `/profile`.

docs/design/screens/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/settings.md

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

docs/design/screens/users.md

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

docs/design/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,459 @@
+<!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="usermenu" role="button" aria-haspopup="menu" aria-expanded="{{ menuOpen }}" title="Account" style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;background:{{ chipBg }};color:{{ chipFg }}"><span style="width:26px;height:26px;flex-shrink:0;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 11px 'IBM Plex Sans',sans-serif">{{ ini }}</span><span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500">{{ who }}</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat"></span></div></sc-if>
+</div>
+<sc-if value="{{ deskMenu }}"><div role="menu" aria-label="Account" style="position:absolute;left:12px;bottom:56px;z-index:40;width:224px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px"><div style="padding:8px 8px 10px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--ui-border);margin-bottom:4px"><span style="font-weight:600;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ who }}</span><span style="font-size:12px;color:var(--ui-text-muted)">marta@renew.example</span></div><div data-act="nav-profile" role="menuitem" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:10px;background:{{ pfItemBg }};color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-user.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-user.svg') center / contain no-repeat"></span>Profile</div><div style="height:1px;background:var(--ui-border);margin:4px 0"></div><sc-for list="{{ themeSeg }}" as="m" hint-placeholder-count="3"><div data-act="{{ m.act }}" role="menuitemradio" aria-checked="{{ m.on }}" style="height:32px;padding:0 8px;display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--ui-text-highlighted)">{{ m.t }}<span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;opacity:{{ m.op }};-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span></div></sc-for><div style="height:1px;background:var(--ui-border);margin:4px 0"></div><div data-act="logout" role="menuitem" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:10px;color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/log-out.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/log-out.svg') center / contain no-repeat"></span>Log out</div></div></sc-if>
+</sc-if>
+<div style="flex:1;min-width:0;min-height:0;display:flex;flex-direction:column">
+<sc-if value="{{ desk }}" hint-placeholder-val="{{ true }}">
+<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, {{ who }}</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" role="button" aria-label="Delete article" style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;font-weight:500;border:1px solid var(--ui-error);color:var(--ui-error);cursor:pointer"><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</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="{{ isUsers }}">
+<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)">Users</span><span style="color:var(--ui-text-muted)">Everyone who can sign in and work on your articles.</span></div><sc-if value="{{ desk }}"><span data-act="invite" 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/user-plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/user-plus.svg') center / contain no-repeat"></span>Invite user</span></sc-if></div>
+<sc-if value="{{ usError }}"><div role="alert" style="display:flex;gap:10px;padding:12px 14px;background:var(--rc-error-soft);color:var(--ui-error)"><span style="display:flex;padding-top:2px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:8px"><div style="display:flex;flex-direction:column;gap:2px"><span style="font-weight:600">Couldn't load users</span><span style="color:var(--ui-text-toned)">Check your connection and try again.</span></div><span style="align-self:flex-start;height:{{ btnH }};padding:0 10px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted);font-weight:500;font-size:12px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat"></span>Try again</span></div></div></sc-if>
+<sc-if value="{{ usTable }}">
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border)">
+<div style="display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 84px 120px 110px 150px;gap:12px;height:36px;align-items:center;padding:0 12px;background:var(--ui-bg-elevated);color:var(--ui-text-muted);font-weight:500"><span>Email</span><span>Display name</span><span>Role</span><span>Invite status</span><span style="display:flex;align-items:center;gap:4px;color:var(--ui-text-highlighted)">Created<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat"></span></span><span></span></div>
+<sc-for list="{{ usRows }}" as="r" hint-placeholder-count="5">
+<div style="display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 84px 120px 110px 150px;gap:12px;height:48px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border);background:{{ r.bg }}">
+<sc-if value="{{ r.skel }}"><span style="height:12px;width:60%;background:var(--ui-bg-accented)"></span><span style="height:12px;width:50%;background:var(--ui-bg-accented)"></span><span style="width:52px;height:20px;background:var(--ui-bg-accented)"></span><span style="width:76px;height:20px;background:var(--ui-bg-accented)"></span><span style="width:80px;height:12px;background:var(--ui-bg-accented)"></span></sc-if>
+<sc-if value="{{ r.email }}"><span style="display:flex;align-items:center;gap:8px;min-width:0"><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:{{ r.fg }}">{{ r.email }}</span><sc-if value="{{ r.you }}"><span style="flex-shrink:0;font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">you</span></sc-if></span><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:{{ r.dfg }}">{{ r.dn }}</span><span><span style="height:20px;padding:0 7px;display:inline-flex;align-items:center;background:{{ r.rl.bg }};color:{{ r.rl.fg }};border:1px solid {{ r.rl.bd }};font:500 11px 'IBM Plex Mono',monospace">{{ r.rl.t }}</span></span><span><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;background:{{ r.b.bg }};color:{{ r.b.fg }};border:1px solid {{ r.b.bd }};font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ r.b.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ r.b.icon }}.svg') center / contain no-repeat"></span>{{ r.b.t }}</span></span><span style="color:var(--ui-text-muted)">{{ r.c }}</span><span style="display:flex;justify-content:flex-end"><sc-if value="{{ r.act }}"><span data-act="{{ r.act.key }}" style="height:28px;padding:0 9px;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:{{ r.act.fg }};font-weight:500;font-size:12px;opacity:{{ r.act.op }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ r.act.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ r.act.icon }}.svg') center / contain no-repeat"></span>{{ r.act.t }}</span></sc-if></span></sc-if>
+</div>
+</sc-for>
+</div>
+</sc-if>
+<sc-if value="{{ usCards }}">
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);margin:0 -16px;border-left:0;border-right:0">
+<sc-for list="{{ usRows }}" as="r" hint-placeholder-count="5">
+<div style="display:flex;flex-direction:column;justify-content:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--ui-border);min-height:68px;background:{{ r.bg }}">
+<sc-if value="{{ r.skel }}"><span style="width:55%;height:14px;background:var(--ui-bg-accented)"></span><span style="width:40%;height:12px;background:var(--ui-bg-accented)"></span></sc-if>
+<sc-if value="{{ r.email }}"><span style="display:flex;align-items:center;gap:8px;min-width:0"><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:21px;font-weight:500;color:{{ r.fg }}">{{ r.email }}</span><sc-if value="{{ r.you }}"><span style="flex-shrink:0;font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">you</span></sc-if></span><sc-if value="{{ r.display2 }}"><span style="color:var(--ui-text-toned)">{{ r.dn }}</span></sc-if><div style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ui-text-muted)"><span style="height:20px;padding:0 7px;display:inline-flex;align-items:center;background:{{ r.rl.bg }};color:{{ r.rl.fg }};border:1px solid {{ r.rl.bd }};font:500 11px 'IBM Plex Mono',monospace">{{ r.rl.t }}</span><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;background:{{ r.b.bg }};color:{{ r.b.fg }};border:1px solid {{ r.b.bd }};font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ r.b.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ r.b.icon }}.svg') center / contain no-repeat"></span>{{ r.b.t }}</span><span>Created {{ r.c }}</span></div><sc-if value="{{ r.act }}"><div style="display:flex;padding-top:4px"><span data-act="{{ r.act.key }}" style="height:44px;padding:0 14px;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:{{ r.act.fg }};font-weight:500;font-size:13px;opacity:{{ r.act.op }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ r.act.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ r.act.icon }}.svg') center / contain no-repeat"></span>{{ r.act.t }}</span></div></sc-if></sc-if>
+</div>
+</sc-for>
+</div>
+</sc-if>
+<sc-if value="{{ usOnly }}"><span style="color:var(--ui-text-muted);text-wrap:pretty">Invite someone so they can sign in with their own account instead of sharing yours.</span></sc-if>
+</div>
+<sc-if value="{{ mob }}"><sc-if value="{{ listFab }}"><div data-act="invite" style="position:absolute;left:16px;right:16px;bottom:16px;height:48px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;font-size:15px;box-shadow:var(--rc-shadow-pop)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/user-plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/user-plus.svg') center / contain no-repeat"></span>Invite user</div></sc-if></sc-if>
+</sc-if>
+
+<sc-if value="{{ isSettings }}">
+<div style="padding:{{ pad }};display:flex;flex-direction:column;gap:20px;max-width:720px;overflow:hidden">
+<div style="display:flex;flex-direction:column;gap:2px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Settings</span><span style="color:var(--ui-text-muted)">Workspace information.</span></div>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:{{ cardPad }};display:flex;align-items:center;justify-content:space-between;gap:16px"><span style="font:600 15px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Version</span><span style="font:400 14px/22px 'IBM Plex Mono',monospace;color:var(--ui-text-toned)">v2.2.0-beta</span></div>
+</div>
+</sc-if>
+
+<sc-if value="{{ isProfile }}">
+<div style="padding:{{ pad }};display:flex;flex-direction:column;gap:20px;max-width:720px;overflow:hidden">
+<div style="display:flex;flex-direction:column;gap:2px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Profile</span><span style="color:var(--ui-text-muted)">Your account on this RenewCMS workspace.</span></div>
+<sc-if value="{{ pfLoading }}"><div aria-busy="true" style="display:flex;flex-direction:column;gap:16px"><div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:{{ cardPad }};display:flex;flex-direction:column;gap:12px"><span style="width:120px;height:14px;background:var(--ui-bg-accented)"></span><span style="height:40px;background:var(--ui-bg-accented)"></span></div><div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:{{ cardPad }};display:flex;flex-direction:column;gap:12px"><span style="width:90px;height:14px;background:var(--ui-bg-accented)"></span><span style="height:40px;background:var(--ui-bg-accented)"></span><span style="height:40px;background:var(--ui-bg-accented)"></span></div><div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:{{ cardPad }};display:flex;flex-direction:column;gap:12px"><span style="width:100px;height:14px;background:var(--ui-bg-accented)"></span><span style="height:40px;background:var(--ui-bg-accented)"></span></div></div></sc-if>
+<sc-if value="{{ pfReady }}">
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border)">
+<div style="padding:{{ cardPad }};display:flex;flex-direction:column;gap:14px">
+<div style="display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">Display name</span><span style="color:var(--ui-text-muted);text-wrap:pretty">Shown instead of your username across the back-office and in the emails RenewCMS sends. Leave it empty to use your username.</span></div>
+<sc-if value="{{ pf.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)">{{ pf.notice }}</span></div></sc-if>
+<div style="display:flex;flex-direction:column;gap:6px">
+<label style="font-weight:500;color:var(--ui-text-highlighted)">Display name <span style="font-weight:400;color:var(--ui-text-muted)">(optional)</span></label>
+<div style="height:{{ inH }};padding:0 10px;display:flex;align-items:center;border:1px solid {{ dn.bd }};box-shadow:{{ dn.sh }};background:{{ dn.bg }};color:{{ dn.fg }};font-size:{{ inF }};overflow:hidden;white-space:nowrap"><span style="overflow:hidden;text-overflow:ellipsis">{{ dn.shown }}</span><sc-if value="{{ dn.caret }}"><span style="flex-shrink:0;display:inline-block;width:1px;height:18px;background:var(--ui-text-highlighted);margin-left:1px"></span></sc-if></div>
+<div style="display:flex;gap:12px;align-items:flex-start"><span style="flex:1;display:flex;gap:6px;align-items:center;color:var(--ui-error);font-size:12px"><sc-if value="{{ dn.err }}"><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>{{ dn.err }}</sc-if></span><span style="font:400 12px 'IBM Plex Mono',monospace;color:{{ dn.countFg }}">{{ dn.count }}</span></div>
+</div>
+</div>
+<div style="padding:12px {{ cardPadX }};border-top:1px solid var(--ui-border);background:var(--ui-bg-muted);display:flex;align-items:center;gap:12px"><span style="flex:1;min-width:0;color:{{ dn.footFg }};font-size:12px;line-height:18px">{{ dn.foot }}</span><span data-act="pf-save" style="height:{{ btnH }};padding:0 14px;display:flex;align-items:center;gap:6px;flex-shrink:0;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;opacity:{{ dnSave.op }}"><sc-if value="{{ dnSave.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>{{ dnSave.t }}</span></div>
+</div>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:{{ cardPad }};display:flex;flex-direction:column;gap:14px">
+<div style="display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">Account</span><span style="color:var(--ui-text-muted);text-wrap:pretty">Set when your account was created. You log in with your username, even after adding a display name.</span></div>
+<div style="display:grid;grid-template-columns:{{ pfCols }};gap:14px"><div style="display:flex;flex-direction:column;gap:6px;min-width:0"><span style="font-weight:500;color:var(--ui-text-highlighted)">Username</span><div aria-disabled="true" style="height:{{ inH }};padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border);background:var(--ui-bg-elevated);color:var(--ui-text-toned);font-size:{{ inF }};cursor:not-allowed"><span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">marta</span><span style="display:flex;color:var(--ui-text-dimmed)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/lock.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/lock.svg') center / contain no-repeat"></span></span></div></div><div style="display:flex;flex-direction:column;gap:6px;min-width:0"><span style="font-weight:500;color:var(--ui-text-highlighted)">Email</span><div aria-disabled="true" style="height:{{ inH }};padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border);background:var(--ui-bg-elevated);color:var(--ui-text-toned);font-size:{{ inF }};cursor:not-allowed"><span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">marta@renew.example</span><span style="display:flex;color:var(--ui-text-dimmed)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/lock.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/lock.svg') center / contain no-repeat"></span></span></div></div></div>
+</div>
+<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:{{ cardPad }};display:flex;flex-direction:column;gap:14px">
+<div style="display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">Password</span><span style="color:var(--ui-text-muted);text-wrap:pretty">To change it, we'll email a reset link to marta@renew.example. The link works once, within 1 hour.</span></div>
+<div style="display:flex;flex-direction:{{ pwDir }};align-items:{{ pwAlign }};gap:12px"><div style="flex:1;min-width:0"><div style="display:flex;flex-direction:column;gap:6px;min-width:0"><span style="font-weight:500;color:var(--ui-text-highlighted)">Password</span><div aria-disabled="true" style="height:{{ inH }};padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border);background:var(--ui-bg-elevated);color:var(--ui-text-toned);font-size:{{ inF }};cursor:not-allowed"><span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0.12em">••••••••••••</span><span style="display:flex;color:var(--ui-text-dimmed)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/lock.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/lock.svg') center / contain no-repeat"></span></span></div></div></div><span data-act="pf-reset" style="height:{{ inH }};padding:0 14px;display:flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted);font-weight:500;white-space:nowrap;opacity:{{ rsBtn.op }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ rsBtn.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ rsBtn.icon }}.svg') center / contain no-repeat"></span>{{ rsBtn.t }}</span></div>
+<sc-if value="{{ rsNote }}"><div role="status" style="display:flex;gap:10px;padding:12px 14px;background:{{ rsNote.bg }}"><span style="display:flex;padding-top:2px;color:{{ rsNote.fg }}"><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/{{ rsNote.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ rsNote.icon }}.svg') center / contain no-repeat"></span></span><div style="display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;color:{{ rsNote.fg }}">{{ rsNote.title }}</span><span style="color:var(--ui-text-toned);text-wrap:pretty">{{ rsNote.text }}</span></div></div></sc-if>
+</div>
+</sc-if>
+</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="{{ mobMenu }}"><div style="position:absolute;inset:0;z-index:50;background:var(--rc-overlay);display:flex;align-items:flex-end"><div role="menu" aria-label="Account" style="width:100%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal);padding:8px 0 24px"><div style="margin:0 auto 8px;width:36px;height:4px;background:var(--ui-bg-accented)"></div><div style="padding:8px 16px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--ui-border);margin-bottom:4px"><span style="width:36px;height:36px;flex-shrink:0;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 13px 'IBM Plex Sans',sans-serif">{{ ini }}</span><div style="display:flex;flex-direction:column;min-width:0"><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">{{ who }}</span><span style="color:var(--ui-text-muted)">marta@renew.example</span></div></div><div data-act="nav-profile" role="menuitem" style="height:48px;padding:0 16px;display:flex;align-items:center;gap:12px;font-size:15px;background:{{ pfItemBg }};color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-user.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-user.svg') center / contain no-repeat"></span>Profile</div><div style="height:1px;background:var(--ui-border);margin:4px 0"></div><sc-for list="{{ themeSeg }}" as="m" hint-placeholder-count="3"><div data-act="{{ m.act }}" role="menuitemradio" aria-checked="{{ m.on }}" style="height:48px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;font-size:15px;color:var(--ui-text-highlighted)">{{ m.t }}<span aria-hidden="true" style="display:inline-block;width:18px;height:18px;background-color:currentColor;opacity:{{ m.op }};-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span></div></sc-for><div style="height:1px;background:var(--ui-border);margin:4px 0"></div><div data-act="logout" role="menuitem" style="height:48px;padding:0 16px;display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/log-out.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/log-out.svg') center / contain no-repeat"></span>Log out</div></div></div></sc-if>
+
+<sc-if value="{{ s.modal }}">
+<div style="position:absolute;inset:0;z-index:50;background:var(--rc-overlay);display:flex;align-items:{{ modalAlign }};justify-content:center;padding:{{ modalPad }}">
+<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>
+<sc-if value="{{ s.modal.crop }}">
+<div style="display:flex;flex-direction:column;gap:16px">
+<div style="height:{{ cr.stageH }};padding:16px;background:var(--ui-bg-elevated);display:flex;align-items:center;justify-content:center">
+<div role="img" aria-label="north-wall.jpg, 4032 × 3024 px" style="position:relative;height:100%;max-width:100%;aspect-ratio:4/3;overflow:hidden;background:#d8d0c3">
+<div style="position:absolute;left:0;right:0;bottom:0;height:32%;background:#8f8373"></div>
+<div style="position:absolute;left:56%;top:14%;width:22%;height:42%;background:#f1ece3;border:6px solid #c4b9a8"></div>
+<div tabindex="0" aria-label="Crop area. Arrow keys move it, Shift and arrow keys resize it." style="position:absolute;left:{{ cr.l }};top:{{ cr.t }};width:{{ cr.w }};height:{{ cr.h }};box-shadow:0 0 0 2000px rgb(10 10 10 / 0.55);outline:1px solid #ffffff;cursor:move">
+<div style="position:absolute;left:33.333%;top:0;bottom:0;width:1px;background:rgb(255 255 255 / 0.45)"></div>
+<div style="position:absolute;left:66.666%;top:0;bottom:0;width:1px;background:rgb(255 255 255 / 0.45)"></div>
+<div style="position:absolute;top:33.333%;left:0;right:0;height:1px;background:rgb(255 255 255 / 0.45)"></div>
+<div style="position:absolute;top:66.666%;left:0;right:0;height:1px;background:rgb(255 255 255 / 0.45)"></div>
+<div style="position:absolute;left:-6px;top:-6px;width:12px;height:12px;background:#ffffff;border:1px solid #111111"></div>
+<div style="position:absolute;right:-6px;top:-6px;width:12px;height:12px;background:#ffffff;border:1px solid #111111"></div>
+<div style="position:absolute;left:-6px;bottom:-6px;width:12px;height:12px;background:#ffffff;border:1px solid #111111"></div>
+<div style="position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;background:#ffffff;border:1px solid #111111"></div>
+<span style="position:absolute;left:8px;bottom:8px;padding:1px 6px;background:rgb(17 17 17 / 0.8);color:#ffffff;font:400 11px/18px 'IBM Plex Mono',monospace;white-space:nowrap">{{ cr.dims }}</span>
+</div>
+</div>
+</div>
+<div style="display:flex;flex-direction:column;gap:6px">
+<div style="display:flex;align-items:center;gap:4px"><span style="flex:1;font-weight:500;color:var(--ui-text-highlighted)">Aspect ratio</span><span data-act="crop-rotate" style="height:{{ btnH }};padding:0 8px;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/rotate-ccw-square.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/rotate-ccw-square.svg') center / contain no-repeat"></span>Rotate</span><span data-act="crop-reset" style="height:{{ btnH }};padding:0 8px;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/undo-2.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/undo-2.svg') center / contain no-repeat"></span>Reset</span></div>
+<div role="radiogroup" aria-label="Aspect ratio" style="display:flex;border:1px solid var(--ui-border-accented);width:{{ cr.groupW }}">
+<sc-for list="{{ cr.ratios }}" as="p" hint-placeholder-count="5"><span role="radio" aria-checked="{{ p.on }}" data-act="{{ p.act }}" style="flex:{{ cr.pillFlex }};height:{{ btnH }};padding:0 12px;display:flex;align-items:center;justify-content:center;font-weight:500;white-space:nowrap;background:{{ p.bg }};color:{{ p.fg }}">{{ p.t }}</span></sc-for>
+</div>
+</div>
+<div style="display:flex;flex-direction:column;gap:6px">
+<span style="font-weight:500;color:var(--ui-text-highlighted)">Width</span>
+<div role="radiogroup" aria-label="Width" style="display:flex;border:1px solid var(--ui-border-accented);width:{{ cr.groupW }}">
+<sc-for list="{{ cr.sizes }}" as="p" hint-placeholder-count="4"><span role="radio" aria-checked="{{ p.on }}" data-act="{{ p.act }}" style="flex:{{ cr.pillFlex }};height:{{ btnH }};padding:0 12px;display:flex;align-items:center;justify-content:center;font-weight:500;white-space:nowrap;background:{{ p.bg }};color:{{ p.fg }}">{{ p.t }}</span></sc-for>
+</div>
+<span style="font:400 12px/18px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">{{ cr.out }}</span>
+</div>
+<sc-if value="{{ cr.note }}"><div role="status" style="display:flex;gap:8px;padding:10px 12px;background:var(--rc-info-soft)"><span style="display:flex;padding-top:2px;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="color:var(--ui-text-toned);text-wrap:pretty">{{ cr.note }}</span></div></sc-if>
+</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'], ['users', 'users', 'Users'], ['integration', 'plug', 'Integration'], ['settings', 'settings', 'Settings']]
+		const nav = navItems.map(([key, icon, t]) => ({ key, icon, t, bg: s.nav === key ? 'var(--rc-sand)' : 'transparent', fg: s.nav === key ? '#111111' : 'var(--ui-text-toned)', fw: s.nav === key ? 500 : 400 }))
+		const crumbs = (s.crumbs || []).map((t, i, a) => ({ t, sep: i > 0, fg: i === a.length - 1 ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)', fw: i === a.length - 1 ? 500 : 400 }))
+		const L = s.list || {}
+		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 180 of 420 KB', progress: '43%', 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
+		let cr = {}
+		if (md.crop) {
+			const C = md.crop, IW = 4032, IH = 3024
+			const ri = C.ratio || 0, si = C.size ?? 1
+			const presets = [[0, 0, 100, 100], [6, 8, 88, 78], [0, 12.5, 100, 75], [0, 0, 100, 100], [12.5, 0, 75, 100]]
+			const r = C.rect || presets[ri]
+			const cw = Math.round(IW * r[2] / 100), ch = Math.round(IH * r[3] / 100)
+			const target = [cw, 1600, 1200, 800][si]
+			const ow = Math.min(target, cw), oh = Math.round(ch * ow / cw)
+			const kb = Math.round(ow * oh * 0.22 / 1000)
+			const pill = (pre, cur) => (t, i) => ({ t, on: i === cur, act: pre + i, bg: i === cur ? 'var(--ui-primary)' : 'transparent', fg: i === cur ? 'var(--ui-bg)' : 'var(--ui-text-toned)' })
+			cr = {
+				l: r[0] + '%', t: r[1] + '%', w: r[2] + '%', h: r[3] + '%', dims: fmt(cw) + ' × ' + fmt(ch),
+				ratios: ['Original', 'Free', '16:9', '4:3', '1:1'].map(pill('crop-r-', ri)),
+				sizes: ['Original', '1600 px', '1200 px', '800 px'].map(pill('crop-s-', si)),
+				out: 'Uploads as ' + fmt(ow) + ' × ' + fmt(oh) + ' px · about ' + (kb >= 1000 ? (kb / 1000).toFixed(1) + ' MB' : kb + ' KB'),
+				note: target > cw ? 'The crop is ' + cw + ' px wide, so it\'s uploaded at that size. Enlarging it would make it blurry.' : '',
+				stageH: m ? '240px' : '340px', pillFlex: m ? '1 1 0' : '0 0 auto', groupW: m ? '100%' : 'max-content'
+			}
+		}
+		const US = s.users || {}
+		const badges = { accepted: { t: 'Accepted', icon: 'circle-check', bg: 'var(--rc-success-soft)', fg: 'var(--ui-success)', bd: 'var(--rc-success-soft)' }, pending: { t: 'Pending', icon: 'mail', bg: 'var(--rc-warning-soft)', fg: 'var(--ui-warning)', bd: 'var(--rc-warning-soft)' }, expired: { t: 'Expired', icon: 'clock-alert', bg: 'transparent', fg: 'var(--ui-text-muted)', bd: 'var(--ui-border-accented)' } }
+		const roles = { owner: { t: 'owner', bg: 'var(--ui-primary)', fg: 'var(--ui-bg)', bd: 'var(--ui-primary)' }, admin: { t: 'admin', bg: 'transparent', fg: 'var(--ui-text-toned)', bd: 'var(--ui-border-accented)' } }
+		const acts = { pending: { key: 'cancel-invite', t: 'Cancel invite', icon: 'user-x', fg: 'var(--ui-error)', op: '1' }, expired: { key: 'renew-invite', t: 'Renew invite', icon: 'refresh-cw', fg: 'var(--ui-text-highlighted)', op: '1' } }
+		const usRows = (US.loading ? Array.from({ length: 5 }, () => ({ skel: true })) : (US.rows || [])).map(r => { if (r.skel) return r; const dn = (r.you && s.display) || r.display || ''; const a0 = acts[r.st]; return { ...r, dn: dn || '—', dfg: dn ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)', display2: !!dn, fg: 'var(--ui-text-highlighted)', rl: roles[r.role] || roles.admin, b: badges[r.st] || badges.pending, bg: r.hl ? 'var(--ui-bg-elevated)' : 'transparent', act: a0 && (r.busy ? { ...a0, t: r.busy, icon: 'loader-circle', op: '0.5' } : a0) } })
+		const who = s.display || 'marta'
+		const ini = s.display ? s.display.trim().split(/\s+/).slice(0, 2).map(w => w[0]).join('').toUpperCase() : 'MA'
+		const pf = s.pf || {}
+		const dnVal = pf.value ?? s.display ?? ''
+		const dnLen = [...dnVal].length
+		const dn = { shown: dnVal || (pf.focus ? '' : 'e.g. Marta Alves'), caret: !!pf.focus, fg: pf.saving ? 'var(--ui-text-dimmed)' : dnVal ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)', bd: pf.err ? 'var(--ui-error)' : pf.focus ? 'var(--ui-primary)' : 'var(--ui-border-accented)', sh: pf.err ? 'inset 0 0 0 1px var(--ui-error)' : pf.focus ? 'inset 0 0 0 1px var(--ui-primary)' : 'none', bg: pf.saving ? 'var(--ui-bg-elevated)' : 'var(--ui-bg)', count: dnLen + ' / 60', countFg: dnLen > 60 ? 'var(--ui-error)' : 'var(--ui-text-muted)', err: pf.err || '', foot: pf.dirty && !pf.saving ? 'Unsaved changes' : 'You appear as \u201c' + who + '\u201d' + (s.display ? '.' : ', your username.'), footFg: pf.dirty && !pf.saving ? 'var(--ui-warning)' : 'var(--ui-text-muted)' }
+		const dnSave = { t: pf.saving ? 'Saving…' : 'Save', loading: !!pf.saving, op: pf.saving || (pf.dirty && !pf.err) ? '1' : '0.4' }
+		const rs = pf.reset || 'idle'
+		const rsMap = { sent: { bg: 'var(--rc-success-soft)', fg: 'var(--ui-success)', icon: 'mail-check', title: 'Reset link sent', text: 'Check marta@renew.example. The link works once, within 1 hour.' }, limited: { bg: 'var(--rc-warning-soft)', fg: 'var(--ui-warning)', icon: 'clock-alert', title: 'Too many requests', text: 'You\'ve asked for several links recently. Wait a few minutes, then try again.' }, error: { bg: 'var(--rc-error-soft)', fg: 'var(--ui-error)', icon: 'circle-x', title: 'Couldn\'t send the link', text: 'Check your connection and try again.' } }
+		const rsNote = rsMap[rs] || null
+		const rsBtn = { t: rs === 'sending' ? 'Sending…' : rs === 'sent' ? 'Send again' : 'Send reset link', icon: rs === 'sending' ? 'loader-circle' : 'mail', op: rs === 'limited' ? '0.4' : '1' }
+		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 {
+			cr, s, nav, crumbs, who, ini, pf, dn, dnSave, rsNote, rsBtn,
+			themeSeg: [['system','monitor','System'],['light','sun','Light'],['dark','moon','Dark']].map(([k,icon,tt])=>{const on=(s.mode||'light')===k;return {act:'theme-'+k,icon,t:tt,on,op:on?1:0}}), menuOpen: !!s.userMenu, deskMenu: !m && !!s.userMenu, mobMenu: m && !!s.userMenu, pfItemBg: 'var(--ui-bg-elevated)',
+			chipBg: s.userMenu || s.nav === 'profile' ? 'var(--rc-sand)' : 'transparent', chipFg: s.userMenu || s.nav === 'profile' ? '#111111' : 'var(--ui-text-highlighted)',
+			isSettings: k === 'settings', isProfile: k === 'profile', pfLoading: k === 'profile' && !!pf.loading, pfReady: k === 'profile' && !pf.loading,
+			cardPad: m ? '16px' : '20px', cardPadX: m ? '16px' : '20px', inH: m ? '44px' : '40px', pfCols: m ? 'minmax(0,1fr)' : 'minmax(0,1fr) minmax(0,1.4fr)', pwDir: m ? 'column' : 'row', pwAlign: m ? 'stretch' : 'flex-end', edTitle, edBody: e.body || '', sampleBody: !e.body, tabs, rows, save, counter, pub, mFields, up, toasts, endpoints, toolbar,
+			desk: !m, mob: m, notBoot: !s.boot,
+			fw: m ? '390px' : '1440px', fh: m ? '844px' : '900px', dir: m ? 'column' : 'row',
+			mLead: s.mLead || 'menu',
+			isBoot: !!s.boot, isHome: k === 'home' && !s.boot, isList: k === 'articles', isEditor: k === 'editor', isInteg: k === 'integration', isError: k === 'error', isUsers: k === 'users',
+			usRows, usError: !!US.error, usOnly: !!US.only && !US.error, usTable: !m && !US.error, usCards: m && !US.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' : (md.crop ? '56px 16px 16px' : '140px 16px 16px'), modalW: m ? '100%' : (md.crop ? '640px' : 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 role="button" aria-label="Delete article" style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-error);color:var(--ui-error);font-weight:500;cursor:pointer"><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</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,61 @@
+<!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">Three Go <code>html/template</code> files: <a href="emails/verification.html">emails/verification.html</a>, <a href="emails/password-reset.html">emails/password-reset.html</a> and <a href="emails/invitation.html">emails/invitation.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", "Reset your RenewCMS password" and "&lt;username&gt; invited you to RenewCMS", using <code>.InvitedBy</code>. <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: '', i: '' }
+	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 }))
+		fetch('emails/invitation.html').then(x => x.text()).then(i => this.setState({ i }))
+	}
+	fill(t) {
+		return t.split('{{.InvitedBy}}').join('marta').split('{{.Email}} It').join('lea.martin@renew.example. It').split('sent to {{.Email}}').join('sent to lea.martin@renew.example').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) },
+			{ title: 'Invitation email', vars: '{{.Host}} · {{.VerificationCode}} · {{.Email}} · {{.InvitedBy}} → /invite/accept?c=', frames: this.frames(this.state.i) }
+		] }
+	}
+}
+</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,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>
+<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: 'Seven 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 the three 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/invitation.html', d: 'Go html/template', href: 'emails/invitation.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)'],
+			['/invite/accept', 'AuthShell', 'public', 'AcceptInvitePage', 'GET /v1/auth/invite?c=* · POST /v1/auth/invite/accept*'],
+			['/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, Accept invite'],
+			['PasswordStrengthHint', 'custom (in UFormField #help)', 'rules: { label, met }[], showErrors: boolean', 'none', 'none', 'Register, Reset, Accept invite'],
+			['ResultPanel', 'custom + UButton', "tone: 'success'|'error'|'info', icon, title, description, actions: ButtonProps[]", 'none', 'default', 'Pending, Verify, Reset request, Reset, Accept invite, 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('Accept invite', '/invite/accept?c=', [['Checking the link', 'On load: GET invite*'], ['Default', 'Valid, unused code; email read-only'], ['Validation errors', 'Register rules fail'], ['Submitting', 'In flight'], ['Username taken', '409'], ['Invalid or used', '404 or no c parameter'], ['Expired', '410: ask the person who invited you'], ['Server error', '500 or network'], ['Success', '200: logged in, /home with toast']]),
+			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'],
+			['404', 'Accept invite', '"This invite link doesn\'t work." Offers Go to log in', 'ResultPanel'],
+			['409', 'Accept invite', '"That username is taken. Try another."', 'Field'],
+			['410', 'Accept invite', '"This invite has expired. Ask the person who invited you to send a new one."', 'ResultPanel'],
+			['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: 'GET /v1/auth/invite?c=CODE → { email } | 404 | 410', d: 'Looks up the invite on load so the email can be shown and dead links are caught before the form. POST /v1/auth/invite/accept { code, username, password } returns 200 with the session cookie, 409 for a taken username, 404 or 410 as above. Neither exists yet.' },
+			{ 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,450 @@
+<!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 }
+		]
+	}
+	people() {
+		return [
+			{ email: 'sam.oliveira@renew.example', st: 'pending', c: '27 Sep 2026' },
+			{ email: 'p.huber@gmail.com', st: 'expired', c: '3 Aug 2026' },
+			{ u: 'ines', st: 'accepted', c: '18 Jun 2026' },
+			{ u: 'jonas', st: 'accepted', c: '2 Apr 2026' },
+			{ u: 'marta', st: 'accepted', c: '12 Mar 2026', you: true }
+		]
+	}
+	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: 'invite', name: 'Invite a user', desc: 'Give someone their own login instead of sharing yours.', steps: [['users', 'Go to Users'], ['form', 'Open the invite form'], ['taken', 'Try an address that\'s taken'], ['sent', 'Send the invite']], hints: { users: 'Click "Users" in the sidebar. On mobile, open the menu first.', form: 'Click "Invite user".', taken: 'Click "Send invite". The form fills with an address that already has an account.', sent: 'Click "Send invite" again. This time it uses a new address.' } },
+		{ 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 users = key === 'first' ? this.people().slice(-1) : this.people()
+		const common = { users, 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 }
+		if (key === 'invite') return { ...common, route: 'home', 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 === 'usermenu') return this.setState({ userMenu: !s.userMenu })
+		if (a && a.startsWith('theme-')) return this.setState({ mode: a.slice(6) })
+		if (s.userMenu) this.setState({ userMenu: false })
+		if (a === 'pf-reset') return this.setState({ pfReset: 'sent' })
+		if (a === 'mnav-close') return this.setState({ mnav: false })
+		if (a.startsWith('nav-')) { const to = a.slice(4); if (to === 'users') this.mark('users'); return this.go(to) }
+		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 === 'invite') { this.mark('form'); return this.setState({ modal: { type: 'invite', tries: 0 }, menu: null }) }
+		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 === 'invite') {
+			if (a === 'modal-cancel' || a === 'modal-close') return close()
+			if (a === 'modal-confirm') {
+				const taken = !m.tries
+				const email = taken ? 'jonas@renew.example' : 'lea.martin@renew.example'
+				this.setState({ modal: { ...m, email, err: null, loading: true } })
+				this.later(() => {
+					if (taken) { this.setState({ modal: { ...m, email, tries: 1, loading: false, err: 'This address already has an account.' } }); return this.mark('taken') }
+					this.setState(st => ({ modal: null, users: [{ email, st: 'pending', c: 'Today', hl: true }, ...st.users.map(u => ({ ...u, hl: false }))] }))
+					this.mark('sent')
+					this.toast('success', 'circle-check', 'Invite sent', email + ' has 3 days to accept.')
+				}, 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 (m.state === 'crop' && typeof a === 'string') {
+				if (a === 'modal-cancel') return this.setState({ modal: { ...m, state: 'idle' } })
+				if (a.startsWith('crop-r-')) return this.setState({ modal: { ...m, ratio: +a.slice(7) } })
+				if (a.startsWith('crop-s-')) return this.setState({ modal: { ...m, size: +a.slice(7) } })
+				if (a === 'crop-reset') return this.setState({ modal: { ...m, ratio: 0, size: 1 } })
+			}
+			if (a === 'modal-cancel' || a === 'modal-close') return close()
+			if (a === 'upload-pick' && m.state === 'idle') return this.setState({ modal: { ...m, state: 'crop', ratio: 0, size: 1 } })
+			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 === 'users') return { kind: 'users', ...T('users', ['Users']), mTitle: 'Users', users: { rows: s.users, only: s.users.length === 1 }, modal: this.modalS() }
+		if (s.route === 'profile') return { kind: 'profile', ...T('profile', ['Profile']), mTitle: 'Profile', pf: { reset: s.pfReset } }
+		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: 'trash-2', 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 === 'invite') return { title: 'Invite a user', desc: 'We\'ll email them a link to choose a username and password. The link expires after 3 days.', close: true, cancel: 'Cancel', confirm: m.loading ? 'Sending…' : 'Send invite', loading: m.loading, fields: [m.email ? { label: 'Email', value: m.email, err: m.err } : { label: 'Email', ph: 'name@example.com', focus: true }] }
+		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' && m.state === 'crop') return { title: 'Crop and resize', desc: 'north-wall.jpg · 3.9 MB', close: true, crop: { ratio: m.ratio, size: m.size }, cancel: 'Choose another file', confirm: 'Upload image' }
+		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-users', 'users', 'Users', 'users'], ['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(), userMenu: s.userMenu, mode: s.mode } : {},
+			authBg: mobile ? 'var(--ui-bg)' : 'var(--ui-bg-muted)', authTop: mobile ? '40px' : '108px',
+			emailHtml: isEmail ? this.emailHtml() : '', emailSubject: s.email === 'reset' ? 'Reset your RenewCMS password' : 'Verify your RenewCMS account',
+			devW: dw + 'px', devH: dh + 'px', zoom: s.zoom, boxW: Math.round(dw * s.zoom) + 'px', boxH: Math.round(dh * s.zoom) + 'px',
+			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,200 @@
+<!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 seven 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 inv = { title: 'Accept your invite', desc: 'Choose a username and password to finish setting up your account.', submit: { t: 'Accept invite' }, footer: { pre: 'Already have an account?', link: 'Log in' } }
+		const invF = (u, p) => [E({ value: 'lea.martin@renew.example', ro: true, help: 'From your invitation.' }), U({ ph: 'e.g. lea', count: ((u && u.value) || '').length + ' / 20', help: 'Letters and numbers, 3 to 20 characters. You\'ll use it to log in.', ...u }), 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: 'Accept invite', title: 'Accept invite', route: '/invite/accept?c=CODE', api: 'GET /v1/auth/invite?c= (pending) · POST /v1/auth/invite/accept (pending)', note: 'Opened from the invitation email. The link carries only the code, so the invited email is looked up on load and shown read-only. Username and password follow the Register rules, including PasswordStrengthHint. On success the person is logged in and sent to /home with a toast; they are already verified because the invite went to their email.', states: [
+				{ name: 'Checking the link', trigger: 'On load, while the invite is looked up.', spinner: 'Checking your invite…' },
+				{ ...inv, name: 'Default', trigger: 'The code is valid and unused.', fields: invF({}, {}) },
+				{ ...inv, name: 'Validation errors', trigger: 'Checked on blur and on submit, using the same rules as Register. Nothing is sent.', fields: invF({ value: 'ma', err: 'Use 3 to 20 characters.', countErr: true, help: '' }, { value: 'lime', hints: pwHint('err') }) },
+				{ ...inv, name: 'Filled, valid', trigger: 'Every rule is met and the checklist item turns green.', fields: invF({ value: 'lea' }, { value: 'limewash2026', shown: true, hints: pwHint('met') }) },
+				{ ...inv, name: 'Submitting', trigger: 'Fields and button are disabled.', fields: invF({ value: 'lea' }, { value: 'limewash2026', hints: pwHint('met') }), submit: { t: 'Creating account…', loading: true } },
+				{ ...inv, name: 'Username taken (409)', trigger: 'Another user has that username. The value is kept and the field gets focus.', fields: invF({ value: 'marta', err: 'That username is taken. Try another.', focus: true, help: '' }, { value: 'limewash2026', hints: pwHint('met') }) },
+				{ name: 'Invalid or used link (404)', trigger: 'The code is wrong, was already accepted, or is missing from the URL. No form is shown.', result: { tone: 'error', icon: 'link-2-off', title: 'This invite link doesn\'t work', text: 'It may be incomplete, or it may already have been used. If you already set up your account, log in instead.', note: 'Open the link from your email again, or copy the full address into your browser.', actions: [{ t: 'Go to log in' }] } },
+				{ name: 'Expired link (410)', trigger: 'The invite is older than 3 days.', result: { tone: 'error', icon: 'clock', title: 'This invite has expired', text: 'Invites work once, for 3 days. Ask the person who invited you to send a new one.', actions: [{ t: 'Go to log in', secondary: true }] } },
+				{ ...inv, 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: invF({ value: 'lea' }, { value: 'limewash2026', hints: pwHint('met') }) },
+				{ name: 'Success', trigger: '200 sets the session cookie → /home after 800 ms, with a toast. No verification step.', result: { tone: 'success', icon: 'circle-check', title: 'Your account is ready', text: 'Taking you to your dashboard…', actions: [] }, toast: toast('success', 'circle-check', 'Welcome to RenewCMS', 'You\'re logged in as lea.') }
+			] },
+			{ 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,226 @@
+<!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 cropM = crop => ({ title: 'Crop and resize', desc: 'north-wall.jpg · 3.9 MB', close: true, crop, cancel: 'Choose another file', confirm: 'Upload image' })
+		const del = (loading, err) => ({ title: 'Delete this article?', desc: '"Winter checklist for timber windows" and its 3 images will be deleted. This can\'t be undone.', cancel: 'Cancel', confirm: loading ? 'Deleting…' : 'Delete article', tone: 'danger', loading, notice: err })
+		const people = [
+			{ email: 'sam.oliveira@renew.example', role: 'admin', st: 'pending', c: '27 Sep 2026' },
+			{ email: 'p.huber@gmail.com', display: 'Paul Huber', role: 'admin', st: 'expired', c: '3 Aug 2026' },
+			{ email: 'ines.duarte@renew.example', display: 'Inès Duarte', role: 'admin', st: 'accepted', c: '18 Jun 2026' },
+			{ email: 'jonas@renew.example', role: 'admin', st: 'accepted', c: '2 Apr 2026' },
+			{ email: 'marta@renew.example', role: 'owner', st: 'accepted', c: '12 Mar 2026', you: true }
+		]
+		const U = (o = {}) => ({ kind: 'users', nav: 'users', crumbs: ['Users'], mTitle: 'Users', ...o, users: { rows: people, ...(o.users || {}) } })
+		const inv = (o = {}) => ({ title: 'Invite a user', desc: 'We\'ll email them a link to choose a username and password. The link expires after 3 days.', close: true, cancel: 'Cancel', confirm: 'Send invite', ...o, fields: o.fields || [{ label: 'Email', ph: 'name@example.com', focus: true }] })
+		const invF = (value, extra = {}) => [{ label: 'Email', value, ...extra }]
+		const P = (pf = {}, o = {}) => withM({ kind: 'profile', nav: 'profile', crumbs: ['Profile'], mTitle: 'Profile', ...o, pf })
+		const dname = 'Marta Alves'
+		return [
+			{ 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: crop and resize', trigger: 'A JPEG, PNG or WEBP passed the checks, and nothing is sent yet. The crop starts as the whole image and the width defaults to 1600 px. SVGs skip this step.', modal: cropM({ ratio: 0, size: 1 }) }),
+				E({ save: 'dirty' }, { name: 'Upload: crop to a ratio', trigger: '16:9 chosen. The frame keeps the ratio while it\'s dragged or resized. Arrow keys move it; Shift and arrow keys resize it.', modal: cropM({ ratio: 2, size: 1 }) }),
+				E({ save: 'dirty' }, { name: 'Upload: crop narrower than the width', trigger: 'The crop is smaller than the chosen width, so it keeps its own size.', modal: cropM({ ratio: 4, size: 1, rect: [42, 34, 15.873, 21.164] }) }),
+				E({ save: 'dirty' }, { name: 'Upload: in progress', trigger: 'Upload image was pressed. The cropped, resized 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: 'Users', title: 'Users', route: '/users', api: 'GET /v1/user/ · POST /v1/user/invite · DELETE /v1/user/invite/:id (pending) · POST /v1/user/invite/:id/renew (pending)', note: 'One shared workspace: every user sees the same articles and this same list. Columns: email, display name, role (owner or admin), invite status and created date. A pending invite can be cancelled and an expired one renewed; accepted accounts have no row actions. An invite is Pending until its link is used, Expired after 3 days, and Accepted once the account is created.', states: [
+				withM({ ...U(), name: 'Default', trigger: 'The list loaded, newest first.' }),
+				withM({ ...U({ users: { loading: true } }), name: 'Loading', trigger: 'The first load, or a retry. Skeletons appear after 150 ms.' }),
+				withM({ ...U({ users: { rows: people.slice(-1), only: true } }), name: 'Only you', trigger: 'Nobody has been invited yet. The admin who registered is always listed.' }),
+				withM({ ...U({ users: { error: true } }), name: 'Error', trigger: 'A 500 or network failure on the list request.' }),
+				withM({ ...U({ modal: inv() }), name: 'Invite: default', trigger: '"Invite user" in the page header, or the bottom button on mobile.' }),
+				withM({ ...U({ modal: inv({ fields: invF('sam.oliveira@renew', { err: 'Enter a full email address, like name@example.com.' }) }) }), name: 'Invite: validation', trigger: 'On submit or blur. Nothing is sent.' }),
+				withM({ ...U({ modal: inv({ loading: true, confirm: 'Sending…', fields: invF('lea.martin@renew.example') }) }), name: 'Invite: sending', trigger: 'Request in flight. The field is disabled and the dialog can\'t be dismissed.' }),
+				withM({ ...U({ modal: inv({ fields: invF('jonas@renew.example', { err: 'This address already has an account.' }) }) }), name: 'Invite: already a user (409)', trigger: 'The email belongs to an existing user. For a live pending invite the message reads "There\'s already a pending invite for this address." An expired invite can be sent again.' }),
+				withM({ ...U({ modal: inv({ notice: 'Couldn\'t send the invite. Try again in a moment.', fields: invF('lea.martin@renew.example') }) }), name: 'Invite: failed', trigger: '500, network failure, or the email couldn\'t be sent. The address stays in the field.' }),
+				withM({ ...U({ modal: { title: 'Cancel this invite?', desc: 'The link sent to sam.oliveira@renew.example will stop working. You can invite the address again later.', cancel: 'Keep invite', confirm: 'Cancel invite', tone: 'danger' } }), name: 'Cancel invite: confirm', trigger: '"Cancel invite" on a Pending row.' }),
+				withM({ ...U({ modal: { title: 'Cancel this invite?', desc: 'The link sent to sam.oliveira@renew.example will stop working. You can invite the address again later.', cancel: 'Keep invite', confirm: 'Cancelling…', tone: 'danger', loading: true } }), name: 'Cancel invite: sending', trigger: 'Request in flight. Both buttons are disabled.' }),
+				withM({ ...U({ modal: { title: 'Cancel this invite?', desc: 'The link sent to sam.oliveira@renew.example will stop working. You can invite the address again later.', cancel: 'Keep invite', confirm: 'Cancel invite', tone: 'danger', notice: 'Couldn\'t cancel the invite. Try again in a moment.' } }), name: 'Cancel invite: failed', trigger: '500 or network failure. The dialog stays open.' }),
+				withM({ ...U({ users: { rows: people.slice(1) }, toasts: [T('success', 'circle-check', 'Invite cancelled', 'sam.oliveira@renew.example can no longer use the link.')] }), name: 'Cancel invite: done', trigger: '204: the row disappears and a toast confirms.' }),
+				withM({ ...U({ users: { rows: people.map(p => p.st === 'expired' ? { ...p, busy: 'Renewing…' } : p) } }), name: 'Renew invite: sending', trigger: '"Renew invite" on an Expired row. No confirmation, since it only sends an email. The button shows progress and is disabled.' }),
+				withM({ ...U({ users: { rows: [{ ...people[1], st: 'pending', c: 'Today', hl: true }, ...people.filter((p, i) => i !== 1)] }, toasts: [T('success', 'circle-check', 'Invite renewed', 'p.huber@gmail.com has 3 days to accept the new link.')] }), name: 'Renew invite: done', trigger: '200: the row becomes Pending with today\'s date, moves to the top, and the old link stops working.' }),
+				withM({ ...U({ toasts: [T('error', 'circle-x', 'Couldn\'t renew the invite', 'Try again in a moment.')] }), name: 'Renew invite: failed', trigger: '500 or network failure. The row stays Expired and the button can be pressed again.' }),
+				withM({ ...U({ users: { rows: [{ email: 'lea.martin@renew.example', role: 'admin', st: 'pending', c: 'Today', hl: true }, ...people] } , toasts: [T('success', 'circle-check', 'Invite sent', 'lea.martin@renew.example has 3 days to accept.')] }), name: 'Invite sent', trigger: '201: the dialog closes, the new invite appears at the top as Pending, and a toast confirms.' })
+			] },
+			{ label: 'Settings', title: 'Settings', route: '/settings', api: 'none (static)', note: 'Opened from the sidebar. For now it holds only the Version section.', states: [
+				withM({ kind: 'settings', nav: 'settings', crumbs: ['Settings'], mTitle: 'Settings', name: 'Default', trigger: 'Opened from the sidebar.' })
+			] },
+			{ label: 'Profile', title: 'Profile', route: '/profile', api: 'GET /v1/auth/me · PATCH /v1/user/me (pending) · POST /v1/auth/password-reset', note: 'Opened from the account menu at the bottom of the sidebar. Username, email and password are read-only. The display name is optional, trimmed, and up to 60 characters. Once saved it replaces the username everywhere a person is named: the sidebar, the account menu, the Home greeting, the Users list (with the username beside it) and the emails RenewCMS sends, such as "Marta Alves invited you to RenewCMS". Saving it empty goes back to the username. The reset link uses the same flow as "Forgot password" and ends on the auth board\'s "Choose a new password" screen.', states: [
+				withM({ ...home, home: { sub: 'Here\'s where things stand on your site.', stats, recent }, userMenu: true, name: 'Account menu', trigger: 'The account chip at the bottom of the sidebar. On mobile, the account row in the navigation drawer opens it as a sheet. Escape or a click outside closes it.' }),
+				P({ loading: true }, { name: 'Loading', trigger: 'Opened directly by URL before /auth/me has returned. From the menu, the cached user renders straight away.' }),
+				P({}, { name: 'Default, no display name', trigger: 'The usual first visit. The username is used everywhere.' }),
+				P({ value: dname, focus: true, dirty: true }, { name: 'Editing', trigger: 'Typing in the field. Save turns on, and leaving the page asks for confirmation.' }),
+				P({ value: 'Marta Alves, Head of Renovations, Brussels and Wallonia office', focus: true, dirty: true, err: 'Use 60 characters or fewer.' }, { name: 'Too long', trigger: 'Over 60 characters. Checked as you type, and Save stays off.' }),
+				P({ value: dname, dirty: true, saving: true }, { name: 'Saving', trigger: 'Save, or Enter in the field. The field is disabled.' }),
+				P({}, { display: dname, name: 'Saved', trigger: '200: the sidebar and account menu switch to the display name at once, and a toast confirms.', toasts: [T('success', 'circle-check', 'Display name saved', 'You now appear as Marta Alves across RenewCMS and in emails.')] }),
+				P({ value: dname, dirty: true, notice: 'Couldn\'t save your display name. Your text is still here. Try again in a moment.' }, { name: 'Save failed', trigger: '500 or network failure. The typed value is kept.' }),
+				P({ reset: 'sending' }, { display: dname, name: 'Reset: sending', trigger: '"Send reset link". No confirmation, since it only sends an email.' }),
+				P({ reset: 'sent' }, { display: dname, name: 'Reset: sent', trigger: '200. The message stays until the page is left. "Send again" sends a new link and the old one stops working.' }),
+				P({ reset: 'limited' }, { display: dname, name: 'Reset: too many requests (429)', trigger: 'Rate limited. The button is disabled for 5 minutes.' }),
+				P({ reset: 'error' }, { display: dname, name: 'Reset: failed', trigger: '500 or network failure. The button can be pressed again.' }),
+				withM({ ...U(), display: dname, name: 'Display names in the Users list', trigger: 'The Display name column shows the name when one is set and a dash when not. Your own row follows your saved name.' })
+			] },
+			{ label: 'Global', title: 'Global states', route: 'any route', api: '', note: 'A 401 on any back-office call redirects to /login?redirect=<path>&reason=expired (see "Session expired" on the auth board). A 403 from an unverified account redirects to /register/pending. A 429 appears only on log in and password reset. Toasts sit bottom right on desktop and bottom center on mobile, at most 3 at once. Success and info last 5 s; errors stay until dismissed.', states: [
+				withM({ kind: 'error', nav: '', crumbs: ['Not found'], mTitle: 'Not found', name: '404 inside the shell', trigger: 'An unknown route while logged in. Logged out, the same content appears inside AuthShell.', err: { code: '404', title: 'Page not found', text: 'The link may be mistyped, or the page may have moved.', primary: 'Go to Home', secondary: 'All articles' } }),
+				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/invitation.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>You're invited to RenewCMS</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;">{{.InvitedBy}} invited you to work on articles in RenewCMS. The invite expires in 3 days.</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;">You're invited to RenewCMS</h1>
+							<p class="rc-text" style="margin:0 0 28px 0;font-size:16px;line-height:26px;color:#222222;">{{.InvitedBy}} invited you to write and publish articles in RenewCMS at {{.Host}}. Accept to choose a username and password. You'll sign in with your own account.</p>
+							<table role="presentation" cellpadding="0" cellspacing="0" border="0" class="rc-btn">
+								<tr>
+									<td bgcolor="#111111" style="background-color:#111111;">
+										<a href="{{.Host}}/invite/accept?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;">Accept invite</a>
+									</td>
+								</tr>
+							</table>
+							<p class="rc-muted" style="margin:16px 0 0 0;font-size:14px;line-height:22px;color:#666666;">This invite was sent to {{.Email}}. It expires in 3 days 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}}/invite/accept?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;">Not expecting this? Ignore this email and no account will be created. If the invite has expired, ask {{.InvitedBy}} to send a new one.</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/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,167 @@
+# 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` | Choose, crop and resize, 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) |
+| Users | `/users` | Default | List loaded, newest first | [users](screens/users.md) |
+| Users | `/users` | Loading | First load or retry | [users](screens/users.md) |
+| Users | `/users` | Only you | Nobody invited yet | [users](screens/users.md) |
+| Users | `/users` | Error | 500 or network | [users](screens/users.md) |
+| Users | `/users` | Invite: default, validation, sending | Invite modal opened, invalid email, POST in flight | [users](screens/users.md) |
+| Users | `/users` | Invite: already a user | 409 | [users](screens/users.md) |
+| Users | `/users` | Invite: failed | 500, network or mail failure | [users](screens/users.md) |
+| Users | `/users` | Invite sent | 201: dialog closes, Pending row on top, toast | [users](screens/users.md) |
+| Users | `/users` | Cancel invite: confirm, sending, failed | "Cancel invite" on a Pending row; DELETE in flight; 500 or network | [users](screens/users.md) |
+| Users | `/users` | Cancel invite: done | 204: row removed, toast | [users](screens/users.md) |
+| Users | `/users` | Renew invite: sending | "Renew invite" on an Expired row; POST in flight | [users](screens/users.md) |
+| Users | `/users` | Renew invite: done | 200: row Pending on top, toast | [users](screens/users.md) |
+| Users | `/users` | Renew invite: failed | 500 or network: toast, row stays Expired | [users](screens/users.md) |
+| Settings | `/settings` | Default | Opened from the sidebar | [settings](screens/settings.md) |
+| Profile | `/profile` | Account menu | Account chip clicked | [profile](screens/profile.md) |
+| Profile | `/profile` | Loading | Opened by URL before /auth/me returns | [profile](screens/profile.md) |
+| Profile | `/profile` | Default, no display name | First visit | [profile](screens/profile.md) |
+| Profile | `/profile` | Editing, too long | Typing; over 60 characters | [profile](screens/profile.md) |
+| Profile | `/profile` | Saving, saved, save failed | PATCH in flight, 200, 500 or network | [profile](screens/profile.md) |
+| Profile | `/profile` | Reset: sending, sent, 429, failed | POST /v1/auth/password-reset | [profile](screens/profile.md) |
+| Profile | `/profile` | Display names in the Users list | Accounts with a display name | [profile](screens/profile.md) |
+| Accept invite | `/invite/accept?c=` | Checking the link | On load: GET invite | [accept-invite](screens/accept-invite.md) |
+| Accept invite | `/invite/accept?c=` | Default, validation errors, filled, submitting | Valid, unused code; email read-only | [accept-invite](screens/accept-invite.md) |
+| Accept invite | `/invite/accept?c=` | Username taken | 409 | [accept-invite](screens/accept-invite.md) |
+| Accept invite | `/invite/accept?c=` | Invalid or used, expired | 404 or no c parameter, 410 | [accept-invite](screens/accept-invite.md) |
+| Accept invite | `/invite/accept?c=` | Server error | 500 or network | [accept-invite](screens/accept-invite.md) |
+| Accept invite | `/invite/accept?c=` | Success | 200: logged in, /home with toast | [accept-invite](screens/accept-invite.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 |
+| 409 | Invite | "This address already has an account." or, for a live invite, "There's already a pending invite for this address." | Field error |
+| 404 | Accept invite | "This invite link doesn't work." Offers Go to log in | ResultPanel |
+| 409 | Accept invite | "That username is taken. Try another." | Field |
+| 410 | Accept invite | "This invite has expired. Ask the person who invited you to send a new one." | 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 | Profile, reset link | "Too many requests. You've asked for several links recently. Wait a few minutes, then try again." Button disabled | Note |
+| 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 | Load users | "Couldn't load users. Check your connection and try again." + Try again | Alert |
+| 500 | Cancel invite | "Couldn't cancel the invite. Try again in a moment." The dialog stays open | Notice in dialog |
+| 500 | Renew invite | "Couldn't renew the invite. Try again in a moment." The row stays Expired | Toast |
+| 500 | Invite | "Couldn't send the invite. Try again in a moment." The address stays | Alert in dialog |
+| 500 | Save display name | "Couldn't save your display name. Your text is still here. Try again in a moment." | Alert in card |
+| 500 | Send reset link (profile) | "Couldn't send the link. Check your connection and try again." | Note |
+| 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
+
+Existing: `GET /v1/auth/me`, `GET /v1/auth/registration`, `429` with `Retry-After` on `/v1/auth/login` and `/v1/auth/password-reset`, and `/static/uploadedImages/*`.
+
+Added by the Users and Profile screens, none of which exist yet:
+
+- `GET /v1/user/`: the users and their invites, newest first.
+- `POST /v1/user/invite`: sends an invitation email. 201, 409 for an existing account or a live pending invite.
+- `DELETE /v1/user/invite/:id`: cancels a Pending invite. 204. Owner only.
+- `POST /v1/user/invite/:id/renew`: replaces the code, resets the 3 days and created date, and resends the email. 200 with the invite. Owner only.
+- `GET /v1/user/` and `GET /v1/auth/me` gain a `role` ("owner" or "admin"); the list gains `email` on accepted users.
+- `POST /v1/user/invite` becomes owner only, and always creates an admin.
+- `GET /v1/settings`: `{ "version": "..." }`.
+- `PATCH /v1/user/me`: saves the display name. `GET /v1/auth/me` returns it.
+- `GET /v1/auth/invite?c=CODE`: looks up the invite on load, returns `{ email }`, 404 or 410. `POST /v1/auth/invite/accept` takes `{ code, username, password }` and returns 200 with the session cookie, 409 for a taken username, 404 or 410.
+
+Still not supported, so shown disabled or omitted:
+
+Renaming a title (shown read-only, with an explanation in Details), resending the verification email (the pending page explains how to start over), changing the email or username, listing or deleting individual images, removing users, promoting or demoting anyone, and any role other than owner and admin. Changing the password while logged in works only through the emailed reset link on the Profile page.

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.

docs/release-notes.md

@@ -0,0 +1,28 @@
+# Release notes format
+
+Name: `vX.Y.Z-beta - Short theme` (theme is 2 to 6 words, sentence case).
+Tag: `vX.Y.Z-beta`, always with the `v`.
+
+Body, in this order. Omit a section only when it would be empty, except Upgrading, which is always present.
+
+1. Intro: one or two plain sentences on what the release is about. No heading.
+2. `## New`: user-visible features. Group with a bold title line (`**Group name**`) followed by bullets.
+3. `## Improvements and fixes`: flat bullets.
+4. `## API`: one bullet per endpoint change, `METHOD /v1/path` in backticks, then behaviour and status codes. Prefix breaking or shape changes with "Changed:".
+5. `## Under the hood`: dependencies, tests, docs, architecture. Only when relevant to contributors.
+6. `## Upgrading`: binary replacement, schema/migration changes, new env vars, behaviour changes for existing installs.
+7. `## Known limitations`: only when there are real ones.
+
+Rules: bullets are full sentences ending with a period; user-facing wording, no commit prefixes; sentence-case headings; no horizontal rules, no metadata block, no "Pre-1.0" boilerplate (the prerelease flag says it); every release ships all 6 binaries from `task release`.
+
+## Published releases
+
+Each body lives in `docs/releases/<tag>.md`. Publish with `tea releases create --tag <tag> --title "<name>" --note-file docs/releases/<tag>.md --prerelease --asset <binary>` (one `--asset` per binary), after `task release`.
+
+| Tag | Name |
+| --- | --- |
+| `2.0.0-beta` (legacy tag without the `v`, kept as is) | v2.0.0-beta - Vue 3 SPA and domain-driven backend |
+| `v2.1.0-beta` | v2.1.0-beta - Image upload in the editor |
+| `v2.2.0-beta` | v2.2.0-beta - Image crop, image removal & reset screens |
+| `v2.3.0-beta` | v2.3.0-beta - Multi-user invitations, display names & profile page |
+| `v2.4.0-beta` | v2.4.0-beta - Owner role, invite management & Settings page |

docs/releases/v2.0.0-beta.md

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

docs/releases/v2.1.0-beta.md

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

docs/releases/v2.2.0-beta.md

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

docs/releases/v2.3.0-beta.md

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

docs/releases/v2.4.0-beta.md

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

features/accept_invitation.feature

@@ -0,0 +1,160 @@
+Feature: An invited person accepts their invitation and gets a verified account
+
+  As a person who received an invitation email
+  I want to open the link, see which address it was sent to, choose a username and password,
+    and land logged in
+  So that I get an account with exactly the same access as everyone else, while registration
+    stays closed to anyone who was not invited
+
+  Background:
+    Given GET /v1/auth/invite and POST /v1/auth/invite/accept are mounted in NewAuthRouter and are
+      public: no jwt cookie is required and an existing jwt cookie is ignored
+    And both are rate-limited per client IP with the auth rate limiter (AUTH_RATE_LIMIT_MAX_ATTEMPTS,
+      AUTH_RATE_LIMIT_WINDOW_SECONDS), counted independently of /login, /password-reset and
+      POST /v1/user/invite
+    And an invite is looked up by comparing the raw code against the stored hashed code with the
+      same hash.Hasher used to create it, and the raw code is never stored
+    And an invite is usable only when accepted_at is empty and expires_at is in the future
+    And a code that matches no invite, matches an accepted invite, or is missing or empty answers
+      404 with body apperr.InviteInvalidErrorMessage "This invite link doesn't work."
+    And a code that matches an unaccepted invite whose expires_at is in the past answers 410 with
+      body apperr.InviteExpiredErrorMessage "This invite has expired."
+    And the POST body has the validate tags code required, username required,min=3,max=20 and
+      password required,min=8, checked with validator.Validate.Struct before any lookup, and a
+      failure answers 400 with the validator's text; an unparseable body answers 400 with
+      apperr.BodyErrorMessage
+    And error responses are plain text from http.Error, success responses are JSON
+    And accepting creates a user with the invite's email (already lower case), the chosen username,
+      the hashed password, is_verified true, an empty verification code, and an empty display name
+    And the created user is an admin: same access to articles, the users list and Settings, but
+      cannot invite
+    And the jwt cookie is set exactly as registration sets it: HttpOnly, path "/", 24 hours, with
+      claims user_id and token_version, and Secure in production
+
+  Scenario: The invited email is read from a valid code
+    Given a pending invite for "lea.martin@renew.example" whose raw code is "3f0c1a52-8d0e-4c53-9a3a-6b7c0d9e1f42"
+    When the client sends GET /v1/auth/invite?c=3f0c1a52-8d0e-4c53-9a3a-6b7c0d9e1f42
+    Then the response status is 200
+    And the response body is a JSON object with exactly the key email, with value "lea.martin@renew.example"
+    And the response has Cache-Control "no-store"
+    And the invite is unchanged
+
+  Scenario Outline: A link that does not work is reported without saying why
+    Given a pending invite for "lea.martin@renew.example", an accepted invite for "sam@renew.example"
+      and an expired invite for "p.huber@gmail.com", each with its own raw code
+    When the client sends GET /v1/auth/invite<query>
+    Then the response status is <status>
+    And the response body is "<body>"
+
+    Examples:
+      | query                     | status | body                           |
+      | ?c=not-a-known-code       | 404    | This invite link doesn't work. |
+      | ?c=<accepted invite code> | 404    | This invite link doesn't work. |
+      | ?c=                       | 404    | This invite link doesn't work. |
+      |                           | 404    | This invite link doesn't work. |
+      | ?c=<expired invite code>  | 410    | This invite has expired.       |
+
+  Scenario: Accepting creates a verified user, logs them in and closes the invite
+    Given a verified user "marta" and a pending invite for "Lea.Martin@Renew.example" created at
+      invitation time, with raw code "3f0c1a52-8d0e-4c53-9a3a-6b7c0d9e1f42"
+    When the client sends POST /v1/auth/invite/accept with body
+      {"code": "3f0c1a52-8d0e-4c53-9a3a-6b7c0d9e1f42", "username": "lea", "password": "limewash2026"}
+    Then the response status is 200
+    And the response body is a JSON object {"message": "Invite accepted! HTTPonly jwt cookie created"}
+    And a jwt cookie is set, and decoding it gives the new user's id and token_version
+    And the user repository holds a user "lea" with email "lea.martin@renew.example", is_verified
+      true, an empty verification_code and a stored password that is a hash, not "limewash2026"
+    And the invite now has accepted_at set and its status is "accepted"
+    And no email was sent
+
+  Scenario: The new account works like any other account
+    Given the invite from the previous scenario was accepted and the jwt cookie was kept
+    When the client sends GET /v1/auth/me and GET /v1/user/ with that cookie
+    Then both responses are 200
+    And the GET /v1/user/ list shows user "lea" with status "accepted" and no invite for
+      "lea.martin@renew.example"
+
+  Scenario: An accepted code cannot be used again
+    Given an invite that was just accepted by "lea"
+    When the client sends POST /v1/auth/invite/accept with the same code, username "lea2" and
+      password "limewash2026"
+    Then the response status is 404
+    And the response body is "This invite link doesn't work."
+    And no user "lea2" exists and no jwt cookie is set
+    When the client sends GET /v1/auth/invite with the same code
+    Then the response status is 404
+
+  Scenario Outline: A code that cannot be used creates nothing
+    Given <state>
+    When the client sends POST /v1/auth/invite/accept with a body using <code> and username "lea" and password "limewash2026"
+    Then the response status is <status>
+    And the response body is "<body>"
+    And no user was created, no jwt cookie is set and no invite changed
+
+    Examples:
+      | state                              | code           | status | body                           |
+      | no invite has that code            | an unknown one | 404    | This invite link doesn't work. |
+      | an invite that expired an hour ago | its code       | 410    | This invite has expired.       |
+
+  Scenario: A taken username is refused and the invite stays usable
+    Given a verified user "marta" and a pending invite for "lea.martin@renew.example"
+    When the client sends POST /v1/auth/invite/accept with username "marta" and password "limewash2026"
+    Then the response status is 409
+    And the response body is "That username is taken. Try another."
+    And no jwt cookie is set and the invite is still pending
+    When the client resends with username "lea"
+    Then the response status is 200
+
+  Scenario: An address that got an account in the meantime is refused
+    Given a pending invite for "lea.martin@renew.example" and an unverified user "leam" with email "Lea.Martin@Renew.example"
+    When the client sends POST /v1/auth/invite/accept with username "lea" and password "limewash2026"
+    Then the response status is 409
+    And the response body is exactly apperr.EmailHasAccountErrorMessage
+    And no user "lea" was created, no jwt cookie is set and the invite is still pending
+
+  Scenario Outline: An invalid body is rejected before the code is looked up
+    Given a pending invite with a known code
+    When the client sends POST /v1/auth/invite/accept with body <body>
+    Then the response status is 400
+    And no user was created and the invite is still pending
+
+    Examples:
+      | body                                                                                |
+      | {"code": "<code>", "username": "le", "password": "limewash2026"}                    |
+      | {"code": "<code>", "username": "abcdefghijklmnopqrstu", "password": "limewash2026"} |
+      | {"code": "<code>", "username": "lea", "password": "lime"}                           |
+      | {"code": "<code>", "password": "limewash2026"}                                      |
+      | {"username": "lea", "password": "limewash2026"}                                     |
+      | not json                                                                            |
+
+  Scenario: An existing jwt cookie is ignored and replaced
+    Given a valid jwt cookie for verified user "marta" and a pending invite for "lea.martin@renew.example"
+    When the client sends POST /v1/auth/invite/accept with that cookie and username "lea", password "limewash2026"
+    Then the response status is 200
+    And the Set-Cookie jwt carries the new user's id, not marta's
+
+  Scenario: A failure while accepting rolls back and leaves the invite pending and no user behind
+    Given a pending invite and the accept operation of the invite repository set to fail
+    When the client sends POST /v1/auth/invite/accept with username "lea" and password "limewash2026"
+    Then the response status is 500
+    And the user insert and the invite update are rolled back together
+    And no user "lea" exists, no jwt cookie is set and the invite is still pending
+
+  Scenario: The accept endpoints are rate-limited
+    Given AUTH_RATE_LIMIT_MAX_ATTEMPTS is 2 for a window covering the whole test
+    When the client at IP "203.0.113.30" sends 2 requests to POST /v1/auth/invite/accept and then a 3rd
+    Then the 3rd response is 429 with body apperr.TooManyRequestsErrorMessage and a Retry-After header
+    And GET /v1/auth/registration from the same client is not rejected with 429
+
+  Scenario: Registration stays closed for everyone else
+    Given a verified user and an accepted invite
+    When the client sends POST /v1/auth/register with username "sam", password "hunter2example12",
+      email "sam@renew.example"
+    Then the response status is 403
+    And the response body is exactly apperr.RegistrationClosedErrorMessage
+    And GET /v1/auth/registration still reports {"open": false}
+
+  Scenario: The invite response never leaks the code or other invite data
+    Given a pending invite
+    When the client sends GET /v1/auth/invite with its code
+    Then the body contains no key named code, hashed_code, invited_by, expires_at, id or accepted_at

features/accept_invitation.qa.md

@@ -0,0 +1,38 @@
+# QA procedure: accept invitation (API)
+
+Package `test` (black-box). Reuse `mockUserRepo`, `stubHasher`, `mockMailRepo`, `mockInviteRepo` (extend it with an accept method and a `failSwitch` entry for it; type names stay unique in the package).
+
+## Setup shared by every case
+1. `validator.InitValidator()` once.
+2. Use cases: the accept use case (constructor takes only domain interfaces: user repo, invite repo, hasher; final names are the coder's), a get-invite use case for GET, plus `CreateUser`, `GetUser`, `ListUsersAndInvites` for the regression cases.
+3. Handler built with `NewHandler(...)` over the use cases, mounted on a fresh `chi.NewRouter()` mirroring `NewAuthRouter`: `GET /invite` and `POST /invite/accept` inside a group with `TrustedProxyRealIP(nil)` + `NewRateLimiter(...)`; `/register`, `/registration` and (with `jwtauth.Verifier`, `Authenticator`, `RequireCurrentToken`) `/me` for regression. `jwtauth.New("HS256", []byte("test-secret"), nil)`. `httptest` only.
+4. Seed invites via `mockInviteRepo` with `HashedCode == "hashed:"+rawCode` (stubHasher); times relative to `time.Now()`, 5 s tolerance.
+
+## GET /v1/auth/invite
+5. Valid code -> 200; decode `map[string]json.RawMessage`: keys exactly `email`; value the stored lower-case email; `Cache-Control: no-store`; invite unchanged. Raw body contains none of `code`, `hashed_code`, `invited_by`, `expires_at`, `id`, `accepted_at`.
+6. Table: unknown code, accepted invite code, `?c=`, no query -> 404 with body exactly `apperr.InviteInvalidErrorMessage`; expired code -> 410 with `apperr.InviteExpiredErrorMessage`.
+
+## POST /v1/auth/invite/accept
+7. Happy path: body `{code, username:"lea", password:"limewash2026"}` -> 200, `{"message":…}`. `Set-Cookie` `jwt` HttpOnly, Path "/", decode via `jwtauth` to get `user_id` and `token_version` of the created user. `userRepo`: user "lea", `Email=="lea.martin@renew.example"`, `IsVerified`, empty `VerificationCode`, password `"hashed:limewash2026"`. Invite `AcceptedAt` not nil. `SentEmails` empty.
+8. Follow-up with the cookie: `GET /me` -> 200; list use case shows user "lea" and no invite for the address.
+9. Repeat POST with the same code -> 404 `InviteInvalid`, no user "lea2", no `Set-Cookie`; GET same code -> 404.
+10. Table for 404 (unknown code) and 410 (expired an hour ago): exact bodies, no user, no cookie, invites unchanged.
+11. Username "marta" taken -> 409, body `apperr.UsernameTakenErrorMessage` ("That username is taken. Try another."), no cookie, invite still pending; retry with "lea" -> 200.
+12. Unverified user with email `Lea.Martin@Renew.example` present -> 409, body `apperr.EmailHasAccountErrorMessage`, no user created, invite pending, no cookie.
+13. 400 table (username 2 chars, 21 chars, password 4 chars, no username, no code, `not json`): status 400, user repo and invite unchanged. Code lookup is not reached (assert the invite repo saw no accept call).
+14. Cookie of verified user 7 sent with a valid accept -> 200 and the new cookie's `user_id` is the new user's.
+15. Invite repo `AcceptWithUser` set to fail (`failSwitch`) -> 500, no user "lea" remains (the failed accept created none, and the use case never calls user repo `Delete`), invite pending, no cookie. The real rollback is covered against SQLite in `test/accept_invitation_atomic_test.go`.
+16. Rate limit: limiter of 2 per minute, `RemoteAddr` `203.0.113.30:1234`, three POSTs -> third is 429 with body `apperr.TooManyRequestsErrorMessage` and `Retry-After`; `GET /registration` afterwards is not 429.
+
+## Regression
+17. Verified user present: `POST /register` -> 403 body `apperr.RegistrationClosedErrorMessage`, no user created; `GET /registration` -> `{"open":false}` after an invite was accepted. Empty user repo -> `POST /register` still 200 with a `verification` mail.
+
+## Use case level (no HTTP)
+18. Accept use case: unknown or empty code -> `errors.Is(err, invite.ErrInviteNotFound)`; expired -> an expired sentinel; taken username -> a username-taken sentinel; email owned -> `invite.ErrEmailHasAccount` (sentinel names are the coder's). Domain sentinels asserted with `errors.Is`.
+
+## Open questions (no design state, not invented)
+- GET /v1/auth/invite failing on load with a 500 or a network error: the design has no state for it.
+- 429 on POST /v1/auth/invite/accept: the SPA shows the design's server-error alert ("Couldn't create the account").
+
+## Manual verification
+- Fresh SQLite file: invite acceptance persists across restart, `accepted_at` stored, unique username constraint holds; send a real invitation and open its link end to end (real SMTP, real embedded SPA).

features/accept_invite_screen.feature

@@ -0,0 +1,105 @@
+Feature: Accept invite screen
+
+  As a person who opened the link in the invitation email
+  I want /invite/accept?c=CODE to show me the invited address and let me choose a username and
+    password
+  So that I finish setting up my account and arrive logged in
+
+  Background:
+    Given /invite/accept is a public route (meta.auth "public") rendered as AcceptInvitePage inside
+      AuthShell, per docs/design/routes.md
+    And on mount AcceptInvitePage reads the "c" query parameter once: if it is absent or empty no
+      request is made and the "Invalid or used link (404)" state renders
+    And otherwise it calls GET /v1/auth/invite?c=CODE and shows "Checking the link" until it resolves
+    And the Username and Password rules are Register's, including PasswordStrengthHint, with no
+      confirm field; validation runs on blur and on submit and nothing is sent when it fails
+    And a submit that passes calls POST /v1/auth/invite/accept with { code: c, username, password }
+    And a logged-in visitor sees the same screen: the route stays public and nothing redirects
+    And the board is docs/design/source/RenewCMS Screens Auth.dc.html, group "Accept invite"; the
+      board frame decides layout and sample data (lea.martin@renew.example, "lea", "limewash2026",
+      "marta")
+
+  Scenario: Checking the link
+    When the user opens /invite/accept?c=abc123 and GET /v1/auth/invite has not resolved
+    Then a full-card spinner reads "Checking your invite…"
+
+  Scenario: Default
+    Given GET /v1/auth/invite?c=abc123 resolves 200 with {"email": "lea.martin@renew.example"}
+    Then the heading is "Accept your invite"
+    And the description is "Choose a username and password to finish setting up your account."
+    And the Email field has placeholder "you@example.com", shows "lea.martin@renew.example", is
+      read-only, with help "From your invitation."
+    And the Username field has placeholder "e.g. lea", counter "0 / 20" and help "Letters and numbers,
+      3 to 20 characters. You'll use it to log in."
+    And the Password field is a password input with show/hide and checklist "At least 8 characters" unmet
+    And the submit button reads "Accept invite"
+    And the footer reads "Already have an account?" with a "Log in" link to /login
+
+  Scenario: Validation errors
+    Given the form is shown, Username is "ma" and Password is "lime"
+    When the user blurs both fields and submits
+    Then POST /v1/auth/invite/accept is never called
+    And the Username shows counter "2 / 20" in error and the error "Use 3 to 20 characters."
+    And the checklist item "At least 8 characters" is in its error state
+
+  Scenario: Filled, valid
+    Given Username is "lea" and Password is "limewash2026" with the password shown
+    Then the counter reads "3 / 20", the checklist item "At least 8 characters" is met and no error shows
+
+  Scenario: Submitting
+    When the user submits valid values and POST /v1/auth/invite/accept has not resolved
+    Then the fields and button are disabled
+    And the submit button reads "Creating account…" and is loading
+
+  Scenario: Username taken (409)
+    When POST /v1/auth/invite/accept resolves 409 with body "That username is taken. Try another."
+    Then the Username keeps "marta", shows counter "5 / 20", is focused and shows the error
+      "That username is taken. Try another."
+    And the Password keeps its value, the form re-enables and the button reads "Accept invite"
+
+  Scenario Outline: The link does not work
+    When <trigger>
+    Then no form is shown
+    And a ResultPanel (tone error, icon i-lucide-link-2-off) reads "This invite link doesn't work"
+      with text "It may be incomplete, or it may already have been used. If you already set up your
+      account, log in instead." and note "Open the link from your email again, or copy the full
+      address into your browser."
+    And its only action is a primary "Go to log in" that navigates to /login
+
+    Examples:
+      | trigger                                                                |
+      | the user opens /invite/accept with no c parameter (no request is made) |
+      | GET /v1/auth/invite?c=abc123 resolves 404                              |
+      | the submit resolves 404, replacing the form                            |
+      | the submit resolves 409 with apperr.EmailHasAccountErrorMessage        |
+
+  Scenario Outline: Expired link (410)
+    When <trigger>
+    Then no form is shown
+    And a ResultPanel (tone error, icon i-lucide-clock) reads "This invite has expired" with text
+      "Invites work once, for 3 days. Ask the person who invited you to send a new one."
+    And its only action is a secondary "Go to log in" that navigates to /login
+
+    Examples:
+      | trigger                                     |
+      | GET /v1/auth/invite?c=abc123 resolves 410   |
+      | the submit resolves 410, replacing the form |
+
+  Scenario Outline: Server error
+    When the submit <failure>
+    Then an error Alert (icon i-lucide-circle-x) reads "Couldn't create the account" with "Something
+      went wrong on the server. Try again in a moment." above the heading
+    And the form is still shown with Email, Username "lea" and Password "limewash2026" kept, re-enabled
+
+    Examples:
+      | failure                                |
+      | resolves 500                           |
+      | resolves 429                           |
+      | never reaches the server               |
+
+  Scenario: Success
+    When POST /v1/auth/invite/accept resolves 200 with the jwt cookie
+    Then a ResultPanel (tone success, icon i-lucide-circle-check) reads "Your account is ready" with
+      text "Taking you to your dashboard…"
+    And a Toast (icon i-lucide-circle-check) reads "Welcome to RenewCMS" with "You're logged in as lea."
+    And after 800 ms the app navigates to /home with no verification step

features/accept_invite_screen.qa.md

@@ -0,0 +1,26 @@
+# QA: Accept invite screen
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+Mock `useApi` for GET `/v1/auth/invite` and POST `/v1/auth/invite/accept` per case; mount AcceptInvitePage inside AuthShell with a test router at `/invite/accept?c=abc123`. Use fake timers for the 800 ms redirect only; never freeze the date.
+1. Checking the link: GET unresolved -> "Checking your invite…" spinner.
+2. Default: GET 200 `{email:"lea.martin@renew.example"}` -> heading, description, read-only Email with help, Username "0 / 20" and its help, Password checklist unmet, button "Accept invite", footer "Log in" -> /login.
+3. Validation errors: Username "ma", Password "lime", blur + submit -> no POST, "Use 3 to 20 characters.", counter "2 / 20" error, checklist error.
+4. Filled, valid: "lea" / "limewash2026" shown -> "3 / 20", checklist met.
+5. Submitting: POST unresolved -> fields disabled, "Creating account…" loading.
+6. Username taken: POST 409 body "That username is taken. Try another." -> value "marta" kept, "5 / 20", focus on Username, error copy, password kept, form re-enabled.
+7. Link does not work (table): no `c` (no request at all), GET 404, POST 404, POST 409 with `This address already has an account.` -> ResultPanel link-2-off with the title, text, note and one primary "Go to log in"; click navigates to /login.
+8. Expired (table): GET 410, POST 410 -> ResultPanel clock, title, text, one secondary "Go to log in".
+9. Server error (table): POST 500, POST 429, rejected fetch -> Alert "Couldn't create the account" + description, form kept.
+10. Success: POST 200 -> ResultPanel "Your account is ready", Toast "Welcome to RenewCMS" / "You're logged in as lea."; advance 800 ms -> router path is /home.
+11. Logged-in visitor: session store holds a verified user; mounting shows the Default state, no redirect.
+
+## Open questions (no design state, not invented)
+- GET /v1/auth/invite failing on load with a 500 or a network error: the design has no state for it.
+
+## Visual (`task visual:check -- accept-invite`, desktop and mobile, light and dark; hard gate 10 %)
+Sample data from the board frame: email `lea.martin@renew.example`; username `lea` (taken state: `marta`); password `limewash2026`; validation state username `ma`, password `lime`. States: Checking the link, Default, Validation errors, Filled valid, Submitting, Username taken (409), Invalid or used link (404), Expired link (410), Server error, Success. `skip: clock-sensitive`: none (expiry is driven by the 410 status, not the clock). Layout placement comes from the board frame markup, not from components.md prose.
+
+## Manual checks (not covered by screenshots)
+- Keyboard: Tab order Username -> Password -> show/hide -> Accept invite -> Log in; Username is focused after a 409; the ResultPanel title takes focus on 404/410.
+- Password show/hide and hover states; the 800 ms hand-off; the Toast disappearing.
+- Real e2e: open the emailed link against `task dev`.

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.