amadan

oficina / fichas Public

Scaffold the app with rastrillo new

`rastrillo new fichas`, merged into the existing repo. The scaffold's
README is dropped in favour of the one already here; its build and
browser-drive sections are appended to it instead.

Two departures from what the scaffold emitted, both to match the siblings:
the module path is amadan.net/oficina/fichas rather than a bare "fichas",
and go.mod takes go 1.26 with toolchain go1.26.5 as memoria does.

rastrillo stays pinned at v0.23.0. v0.27.0 declares its path as
amadan.net/rastrillo/rastrillo, so `go get ...@upgrade` fails on the
rename; memoria requires both paths and this app does not need the newer
one yet.

make ci is green: vet, gofmt, tests, and migration check agreeing.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Paul Campbell pushed by paul@keymail.dev 9091ffd4851e4b00aac976172006e02dd3984874 parent b9ca5ec
33 files changed, +4780 −0
  • .amadan/ci +6 −0
  • .amadan/ci.d/10-vet +2 −0
  • .amadan/ci.d/20-fmt +2 −0
  • .amadan/ci.d/30-test +2 −0
  • .amadan/ci.d/40-migration-check +2 −0
  • .gitignore +8 −0
  • AGENTS.md +73 −0
  • CLAUDE.md +5 −0
  • Makefile +109 −0
  • README.md +19 −0
  • cmd/fichas/main.go +62 −0
  • go.mod +38 −0
  • go.sum +95 −0
  • internal/fichas/app.go +61 −0
  • internal/fichas/handlers.go +19 −0
  • internal/fichas/icons/icons.go +47 −0
  • internal/fichas/migrations.go +42 −0
  • internal/fichas/migrations/0001_init.sql +2 −0
  • internal/fichas/migrations/schema.sql +5 −0
  • internal/fichas/models.go +25 −0
  • internal/fichas/render.go +72 −0
  • internal/fichas/static/datetime.js +1338 −0
  • internal/fichas/static/rastrillo.js +337 −0
  • internal/fichas/static/select.js +280 −0
  • internal/fichas/static/theme.css +187 −0
  • internal/fichas/static/tokens.css +1664 −0
  • internal/fichas/templates/errors.html +9 −0
  • internal/fichas/templates/index.html +3 −0
  • internal/fichas/templates/layout.html +26 −0
  • internal/fichastest/browser_test.go +53 −0
  • internal/fichastest/harness_test.go +62 −0
  • internal/fichastest/index_test.go +71 −0
  • internal/fichastest/vendored_test.go +54 −0

CI passed — run details

CI log 
=== vet ===
go vet ./...
go: downloading github.com/carlosframework/rastrillo v0.23.0
go: downloading github.com/go-chi/chi/v5 v5.3.2
go: downloading gorm.io/plugin/dbresolver v1.6.2
go: downloading gorm.io/gorm v1.31.2
go: downloading modernc.org/sqlite v1.55.0
go: downloading github.com/jinzhu/now v1.1.5
go: downloading golang.org/x/text v0.20.0
go: downloading github.com/jinzhu/inflection v1.0.0
go: downloading modernc.org/libc v1.74.1
go: downloading golang.org/x/sys v0.46.0
go: downloading github.com/dustin/go-humanize v1.0.1
go: downloading github.com/google/uuid v1.6.0
go: downloading modernc.org/memory v1.11.0
go: downloading modernc.org/mathutil v1.7.1
go: downloading github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec
=== fmt ===
=== test ===
go test ./...
?   	amadan.net/oficina/fichas/cmd/fichas	[no test files]
?   	amadan.net/oficina/fichas/internal/fichas	[no test files]
?   	amadan.net/oficina/fichas/internal/fichas/icons	[no test files]
ok  	amadan.net/oficina/fichas/internal/fichastest	0.013s
=== migration-check ===
go run github.com/carlosframework/rastrillo/cmd/rastrillo migration check
go: downloading github.com/BurntSushi/toml v1.6.0
rastrillo migration check: models and migrations agree
diff --git a/.amadan/ci b/.amadan/ci
new file mode 100755
index 0000000..8c547ee
--- /dev/null
+++ b/.amadan/ci
@@ -0,0 +1,6 @@
+#!/bin/sh
+# amadan CI entry (single-script fallback for runners without step
+# support). The steps in ci.d/ are the same targets, reported one by
+# one. Must stay executable: a non-executable script resolves "skipped".
+set -e
+exec make ci
diff --git a/.amadan/ci.d/10-vet b/.amadan/ci.d/10-vet
new file mode 100755
index 0000000..139a2a2
--- /dev/null
+++ b/.amadan/ci.d/10-vet
@@ -0,0 +1,2 @@
+#!/bin/sh
+exec make vet
diff --git a/.amadan/ci.d/20-fmt b/.amadan/ci.d/20-fmt
new file mode 100755
index 0000000..5884a7b
--- /dev/null
+++ b/.amadan/ci.d/20-fmt
@@ -0,0 +1,2 @@
+#!/bin/sh
+exec make fmt-check
diff --git a/.amadan/ci.d/30-test b/.amadan/ci.d/30-test
new file mode 100755
index 0000000..758ffe2
--- /dev/null
+++ b/.amadan/ci.d/30-test
@@ -0,0 +1,2 @@
+#!/bin/sh
+exec make test
diff --git a/.amadan/ci.d/40-migration-check b/.amadan/ci.d/40-migration-check
new file mode 100755
index 0000000..81db093
--- /dev/null
+++ b/.amadan/ci.d/40-migration-check
@@ -0,0 +1,2 @@
+#!/bin/sh
+exec make migration-check
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..34da04d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,8 @@
+# Build output. make release writes here; nothing in it is source.
+/releases/
+
+# The local SQLite database the app creates when you run it, and its
+# write-ahead log. Real data lives on the platform, never in the repo.
+/fichas.db
+/fichas.db-wal
+/fichas.db-shm
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..d21b0eb
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,73 @@
+# fichas
+
+A [rastrillo](https://github.com/rastrilloorg/rastrillo) app. Read the
+framework's own SKILL.md (repo root, or in the module cache) before
+writing app code — it is the whole app story in ~15KB. The conventions
+below are load-bearing; the framework enforces most of them
+mechanically.
+
+## Layout
+
+- `internal/<app>/` — the app: `models.go` (plain GORM structs
+ + Models), `migrations.go` + `migrations/` (Schema, BootSchema),
+ `app.go` (migrate.Apply + chi router), `handlers.go`,
+ `render.go` + `templates/`. This is SKILL.md's five-file shape.
+- `manifest/` — the declarative path, optional and equal: TOML or .go
+ Resource manifests, each generating a full screen set under `gen/`
+ (see manifest/README.md for the mounting recipe). A hand-written
+ action file at a generated path (carrying `//go:build rastrillo_actions`)
+ takes that one screen over, by existence.
+- `gen/` — generated when manifests are used; never edit. Regenerate
+ with `rastrillo generate`.
+
+## Rules the family holds hard
+
+- Every query touching user-owned rows goes through `scope.Owned` —
+ reads AND writes, transactions included. A row that isn't yours 404s,
+ never 403s.
+- Never bind a request body onto a GORM model: explicit
+ `map[string]any` + `.Select` allowlist.
+- Migrations apply at boot, once each, and are never re-run or reversed.
+- Schema changes: edit models.go, then run `rastrillo migration generate`
+ and read the SQL it writes — it may be a full table rebuild, not just
+ an `ADD COLUMN`. Never edit a migration that has shipped.
+ Renames are hand-written (`rastrillo migration new rename_x`) because
+ a rename is indistinguishable from a drop plus an add.
+- Money is integer cents. A float never touches a value a person will
+ be held to.
+- Screens work with JavaScript disabled; destructive actions get their
+ own confirm-page URL.
+- The gate is `make ci` (vet + gofmt + tests) — the same definition
+ CI runs. Run it before every push. `CGO_ENABLED=0` throughout: the
+ stack is cgo-free by design.
+
+## Serving
+
+`rastrillo.Resolve` + `Serve` speak the CARLOS activation contract
+(socket/addr/db argv, LISTEN_FDS, $STATE_DIRECTORY, `sidecar run`) —
+the golden deployment target, not a requirement: `./app -addr :8080`
+serves anywhere. `GET /healthz` and `GET /api/version` are answered
+by the framework, outside app middleware.
+
+## UX conventions (seeded from profile: considered)
+
+Accessible by construction, progressively enhanced, and never dependent on JavaScript to be usable.
+
+These are rastrillo's own conventions, and the profile is named for what it does rather than after anyone else's work. For wider reading on interface quality, impeccable.style, the WAI-ARIA Authoring Practices and Inclusive Components are all worth your time — none of them is endorsed by, or authoritative for, this framework.
+
+- [x] Icons — lucide, inline — `internal/<app>/icons`
+- [x] Fields — label, hint, help and error in one envelope, wired with aria-describedby — `ui/field, ui/field-select, ui/field-text`
+- [x] Destructive actions — their own confirm-page URL, never a modal — `ui/confirm-form`
+- [x] State — never colour alone — always a text label too — `ui/status-pill, ui/badge`
+- [ ] Dates — relative, with the absolute date in a title attribute
+- [ ] Errors — server-rendered beside the field, in plain language
+- [x] Empty states — say what the screen is for, not just that it is empty — `ui/empty-state`
+
+`[x]` is enforced by a vendored component: use it, do not hand-roll an
+equivalent. `[ ]` is guidance to apply by hand. A convention absent from
+this list is one rastrillo has no opinion about.
+
+Edit any line. **This file is the source of truth, not the profile name.**
+The profile only seeded this list at scaffold time; nothing re-reads it, so
+changing a line here changes what the app does. A convention deleted from
+this file is not a convention to reinstate.
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..971dce4
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,5 @@
+@AGENTS.md
+
+This project keeps its instructions in AGENTS.md so they apply to every
+agent, not just Claude Code. Nothing is duplicated here on purpose: two
+copies drift, and the drift is silent.
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..dfb5c3b
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,109 @@
+APP := fichas
+
+# What `carlos ship -target` defaults to, and therefore what a release
+# must be built for. Building for your own machine and shipping that is a
+# silent architecture mismatch: the binary uploads fine and fails to exec
+# on the instance. Override for a one-off:
+# make release RELEASE_GOARCH=amd64
+RELEASE_GOOS ?= linux
+RELEASE_GOARCH ?= arm64
+RELEASE_BIN := releases/$(APP)-$(RELEASE_GOOS)-$(RELEASE_GOARCH)
+
+# What the running binary reports from GET /api/version. The platform's
+# deploy verification polls that endpoint on every instance socket and
+# compares what it finds against the release it believes it adopted; an
+# unstamped binary answers "dev" from every build you have ever made, so
+# those two facts can never disagree and a process that was never
+# recycled onto the new release verifies green. Stamping this is what
+# gives that check the ability to fail.
+#
+# git describe, because the tag is what you ship against. Outside a
+# repository, or before the first commit, name it yourself:
+# make release VERSION=v0.1.0
+VERSION ?= $(shell git describe --tags --always --dirty 2>/dev/null)
+
+.PHONY: build release version-check test vet fmt-check migration-check ci
+
+# build is the compile check: with more than one package matched, go
+# build discards the output, so this catches a broken package without
+# producing an artifact.
+build:
+ CGO_ENABLED=0 go build ./...
+
+# release is what ships. -s -w drops the symbol table and DWARF, which on
+# this family's apps is 23-31% off the binary and 45-53% off the
+# compressed artifact — and compressed size is what actually gets
+# transferred. carlos is built the same way (see platform's Makefile).
+#
+# What survives: panic traces keep their function names AND line numbers
+# (Go's pclntab is untouched by these flags), debug.ReadBuildInfo works,
+# and go version -m still reports module metadata. What you lose is
+# source-level debugging with delve or gdb — build without the flags for
+# that. rastrillo dev never strips, for the same reason.
+release: version-check
+ @mkdir -p releases
+ CGO_ENABLED=0 GOOS=$(RELEASE_GOOS) GOARCH=$(RELEASE_GOARCH) \
+ go build -ldflags="-s -w -X 'github.com/carlosframework/rastrillo.BuildVersion=$(VERSION)'" \
+ -o $(RELEASE_BIN) ./cmd/$(APP)
+ @echo
+ @echo "built $(RELEASE_BIN) reporting version $(VERSION)"
+ @echo "ship it with:"
+ @echo " carlos ship -app $(APP) -target $(RELEASE_GOOS)-$(RELEASE_GOARCH) $(RELEASE_BIN)"
+
+# version-check refuses rather than letting release ship a binary whose
+# version is untrue. Both refusals are about the same thing: /api/version
+# is only evidence if the answer identifies one artifact.
+#
+# An empty stamp is worse than the "dev" default, because "dev" is
+# saying something true about itself and "" looks like a value that
+# arrived from somewhere.
+#
+# A dirty tree is refused rather than suffixed. A -dirty stamp names a
+# commit plus changes nobody can name, so two different binaries can
+# carry the identical string — which does not fix the check, it makes
+# it look reliable while it is not, and that is the more expensive
+# failure. Refusing costs one `git stash`; a wrong stamp ships. If you
+# mean to ship uncommitted work, say so out loud:
+# make release VERSION=v0.1.0-wip
+version-check:
+ @if [ -z "$(VERSION)" ]; then \
+ echo "make release: no version to stamp."; \
+ echo " git describe found nothing here: no repository, or no commit yet."; \
+ echo " Commit, or name it: make release VERSION=v0.1.0"; \
+ exit 1; \
+ fi
+ @case "$(VERSION)" in *-dirty) \
+ echo "make release: the tree is dirty, so $(VERSION) does not name what you are about to ship."; \
+ echo " Commit or stash first, or name it: make release VERSION=v0.1.0-wip"; \
+ exit 1;; \
+ esac
+
+test:
+ go test ./...
+
+vet:
+ go vet ./...
+
+fmt-check:
+ @out=$$(gofmt -l .); if [ -n "$$out" ]; then echo "gofmt needed:"; echo "$$out"; exit 1; fi
+
+# A step of its own, not folded into another target's recipe: ci.d/
+# steps each exec one make target, so migration-check needs its own
+# name to get its own reported step on a runner with step support.
+#
+# go run, not a bare "rastrillo": go.mod already requires rastrillo, so
+# this needs nothing on PATH but the Go toolchain, and works offline
+# after go mod download. A bare "rastrillo migration check" failed a
+# fresh clone's very first CI run with "make: rastrillo: Command not
+# found", and nothing in the scaffold said what to install.
+migration-check:
+ go run github.com/carlosframework/rastrillo/cmd/rastrillo migration check
+
+# ci is the one gate: what a runner executes and what you run before
+# pushing are the same definition. amadan's runner falls back to this
+# target when .amadan/ci is absent; ci.d/ carries the same targets,
+# reported one by one, for a runner with step support. migration-check
+# fails the build the moment models.go and migrations/ disagree,
+# instead of at boot on whatever machine notices next. If the app
+# declares manifest resources, also add: rastrillo generate --check
+ci: vet fmt-check test migration-check
diff --git a/README.md b/README.md
index b4d5881..9af1af6 100644
--- a/README.md
+++ b/README.md
@@ -45,3 +45,22 @@ specs work hardest to prevent.
Two things block slice 1, both in §10 — the seal-tier list (which card
fields leave the seal, and therefore what can be filtered, sorted and
grouped), and the reach credential ruling.
+
+## Building it
+
+A [rastrillo](https://github.com/rastrilloorg/rastrillo) app. `make ci` is
+the gate — vet, gofmt, tests, migration check — one definition for CI and
+for you. AGENTS.md carries the working conventions.
+
+`internal/fichastest/browser_test.go` walks the app in a real Chromium and
+is loud on any console error, failed request, or JS value that leaked to the
+screen:
+
+```sh
+go test -tags browser ./...
+```
+
+It needs a Chromium on PATH, via `RASTRILLO_CHROME`, or in a Playwright
+cache. **A skip is not a pass:** with no browser it fails unless
+`RASTRILLO_BROWSER_OPTIONAL=1` makes the skip a deliberate, visible choice.
+`make ci` runs the plain suite only.
diff --git a/cmd/fichas/main.go b/cmd/fichas/main.go
new file mode 100644
index 0000000..7f377ff
--- /dev/null
+++ b/cmd/fichas/main.go
@@ -0,0 +1,62 @@
+// Command fichas wires the app: resolve the platform's activation
+// argv, open the database, build the app, serve.
+package main
+
+import (
+ "log/slog"
+ "os"
+
+ "github.com/carlosframework/rastrillo"
+ "github.com/carlosframework/rastrillo/db"
+
+ fichas "amadan.net/oficina/fichas/internal/fichas"
+)
+
+func main() {
+ logger := slog.New(slog.NewTextHandler(os.Stderr, nil))
+
+ // Resolve, not Run: this app opens its own database handle via
+ // db.Open — a *gorm.DB with a split reader/writer pool, not the
+ // bare *sql.DB Options.Router would hand back — so Options.DBPath
+ // must be empty again by the Serve call below, or Serve would open
+ // a second, unused connection to the same file.
+ opts, err := rastrillo.Resolve(rastrillo.Options{DBPath: "fichas.db", Logger: logger})
+ if err != nil {
+ logger.Error("resolve activation", "err", err)
+ os.Exit(1)
+ }
+
+ d, err := db.Open(opts.DBPath, logger)
+ if err != nil {
+ logger.Error("open database", "err", err)
+ os.Exit(1)
+ }
+ defer d.Close()
+
+ // Origin decides the CSRF same-origin check (and, when the app
+ // grows accounts, the Secure/__Host- cookie attributes) — so
+ // defaulting it silently in production would be a real bug. Loud
+ // on purpose, harmless in local dev.
+ origin := os.Getenv("FICHAS_ORIGIN")
+ if origin == "" {
+ origin = "http://localhost:8080"
+ logger.Warn("FICHAS_ORIGIN not set; defaulting", "origin", origin)
+ }
+
+ mux, err := fichas.App(d, origin, logger)
+ if err != nil {
+ logger.Error("build app", "err", err)
+ os.Exit(1)
+ }
+
+ opts.Mux = mux
+ opts.DBPath = ""
+ // The same page a handler's own error path renders (render.go's
+ // ErrorPage — wire it to Ctx.ErrorPage too as the app grows
+ // handlers), so a panic and a handled failure look identical.
+ opts.ErrorPage = fichas.ErrorPage
+ if err := rastrillo.Serve(opts); err != nil {
+ logger.Error("serve failed", "err", err)
+ os.Exit(1)
+ }
+}
diff --git a/go.mod b/go.mod
new file mode 100644
index 0000000..7a7d887
--- /dev/null
+++ b/go.mod
@@ -0,0 +1,38 @@
+module amadan.net/oficina/fichas
+
+go 1.26
+
+toolchain go1.26.5
+
+require (
+ github.com/carlosframework/rastrillo v0.23.0
+ github.com/chromedp/chromedp v0.14.2
+ github.com/go-chi/chi/v5 v5.3.2
+)
+
+require (
+ github.com/BurntSushi/toml v1.6.0 // indirect
+ github.com/chromedp/cdproto v0.0.0-20250724212937-08a3db8b4327 // indirect
+ github.com/chromedp/sysutil v1.1.0 // indirect
+ github.com/dustin/go-humanize v1.0.1 // indirect
+ github.com/go-json-experiment/json v0.0.0-20250725192818-e39067aee2d2 // indirect
+ github.com/gobwas/httphead v0.1.0 // indirect
+ github.com/gobwas/pool v0.2.1 // indirect
+ github.com/gobwas/ws v1.4.0 // indirect
+ github.com/google/uuid v1.6.0 // indirect
+ github.com/jinzhu/inflection v1.0.0 // indirect
+ github.com/jinzhu/now v1.1.5 // indirect
+ github.com/mattn/go-isatty v0.0.20 // indirect
+ github.com/ncruces/go-strftime v1.0.0 // indirect
+ github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
+ golang.org/x/sys v0.46.0 // indirect
+ golang.org/x/text v0.20.0 // indirect
+ gorm.io/gorm v1.31.2 // indirect
+ gorm.io/plugin/dbresolver v1.6.2 // indirect
+ modernc.org/libc v1.74.1 // indirect
+ modernc.org/mathutil v1.7.1 // indirect
+ modernc.org/memory v1.11.0 // indirect
+ modernc.org/sqlite v1.55.0 // indirect
+)
+
+tool github.com/carlosframework/rastrillo/cmd/rastrillo
diff --git a/go.sum b/go.sum
new file mode 100644
index 0000000..9983f7d
--- /dev/null
+++ b/go.sum
@@ -0,0 +1,95 @@
+github.com/BurntSushi/toml v1.6.0 h1:dRaEfpa2VI55EwlIW72hMRHdWouJeRF7TPYhI+AUQjk=
+github.com/BurntSushi/toml v1.6.0/go.mod h1:ukJfTF/6rtPPRCnwkur4qwRxa8vTRFBF0uk2lLoLwho=
+github.com/carlosframework/rastrillo v0.23.0 h1:tKAAlwPt4Pg/rkqk7o6jvV12bbZ0r34oEVpuOlKfX7w=
+github.com/carlosframework/rastrillo v0.23.0/go.mod h1:pZlrE5F5OhspvZFzef0DrfjHAjA8FXycb9J5/8vc8Tw=
+github.com/chromedp/cdproto v0.0.0-20250724212937-08a3db8b4327 h1:UQ4AU+BGti3Sy/aLU8KVseYKNALcX9UXY6DfpwQ6J8E=
+github.com/chromedp/cdproto v0.0.0-20250724212937-08a3db8b4327/go.mod h1:NItd7aLkcfOA/dcMXvl8p1u+lQqioRMq/SqDp71Pb/k=
+github.com/chromedp/chromedp v0.14.2 h1:r3b/WtwM50RsBZHMUm9fsNhhzRStTHrKdr2zmwbZSzM=
+github.com/chromedp/chromedp v0.14.2/go.mod h1:rHzAv60xDE7VNy/MYtTUrYreSc0ujt2O1/C3bzctYBo=
+github.com/chromedp/sysutil v1.1.0 h1:PUFNv5EcprjqXZD9nJb9b/c9ibAbxiYo4exNWZyipwM=
+github.com/chromedp/sysutil v1.1.0/go.mod h1:WiThHUdltqCNKGc4gaU50XgYjwjYIhKWoHGPTUfWTJ8=
+github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
+github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
+github.com/go-chi/chi/v5 v5.3.2 h1:5YQkICvTCSZ25hoRsyJazN0scjzKGiu4VAUc7H1o1nY=
+github.com/go-chi/chi/v5 v5.3.2/go.mod h1:R+tYY2hNuVUUjxoPtqUdgBqevM9s9njzkTLutVsOCto=
+github.com/go-json-experiment/json v0.0.0-20250725192818-e39067aee2d2 h1:iizUGZ9pEquQS5jTGkh4AqeeHCMbfbjeb0zMt0aEFzs=
+github.com/go-json-experiment/json v0.0.0-20250725192818-e39067aee2d2/go.mod h1:TiCD2a1pcmjd7YnhGH0f/zKNcCD06B029pHhzV23c2M=
+github.com/go-sql-driver/mysql v1.7.0 h1:ueSltNNllEqE3qcWBTD0iQd3IpL/6U+mJxLkazJ7YPc=
+github.com/go-sql-driver/mysql v1.7.0/go.mod h1:OXbVy3sEdcQ2Doequ6Z5BW6fXNQTmx+9S1MCJN5yJMI=
+github.com/gobwas/httphead v0.1.0 h1:exrUm0f4YX0L7EBwZHuCF4GDp8aJfVeBrlLQrs6NqWU=
+github.com/gobwas/httphead v0.1.0/go.mod h1:O/RXo79gxV8G+RqlR/otEwx4Q36zl9rqC5u12GKvMCM=
+github.com/gobwas/pool v0.2.1 h1:xfeeEhW7pwmX8nuLVlqbzVc7udMDrwetjEv+TZIz1og=
+github.com/gobwas/pool v0.2.1/go.mod h1:q8bcK0KcYlCgd9e7WYLm9LpyS+YeLd8JVDW6WezmKEw=
+github.com/gobwas/ws v1.4.0 h1:CTaoG1tojrh4ucGPcoJFiAQUAsEWekEWvLy7GsVNqGs=
+github.com/gobwas/ws v1.4.0/go.mod h1:G3gNqMNtPppf5XUz7O4shetPpcZ1VJ7zt18dlUeakrc=
+github.com/google/pprof v0.0.0-20250317173921-a4b03ec1a45e h1:ijClszYn+mADRFY17kjQEVQ1XRhq2/JR1M3sGqeJoxs=
+github.com/google/pprof v0.0.0-20250317173921-a4b03ec1a45e/go.mod h1:boTsfXsheKC2y+lKOCMpSfarhxDeIzfZG1jqGcPl3cA=
+github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
+github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/hashicorp/golang-lru/v2 v2.0.7 h1:a+bsQ5rvGLjzHuww6tVxozPZFVghXaHOwFs4luLUK2k=
+github.com/hashicorp/golang-lru/v2 v2.0.7/go.mod h1:QeFd9opnmA6QUJc5vARoKUSoFhyfM2/ZepoAG6RGpeM=
+github.com/jinzhu/inflection v1.0.0 h1:K317FqzuhWc8YvSVlFMCCUb36O/S9MCKRDI7QkRKD/E=
+github.com/jinzhu/inflection v1.0.0/go.mod h1:h+uFLlag+Qp1Va5pdKtLDYj+kHp5pxUVkryuEj+Srlc=
+github.com/jinzhu/now v1.1.5 h1:/o9tlHleP7gOFmsnYNz3RGnqzefHA47wQpKrrdTIwXQ=
+github.com/jinzhu/now v1.1.5/go.mod h1:d3SSVoowX0Lcu0IBviAWJpolVfI5UJVZZ7cO71lE/z8=
+github.com/keymaildev/signin v0.1.1 h1:gO+1IAM99sqUkBtCezkgGxab+/DOrqwDxd5H32N1s9Q=
+github.com/keymaildev/signin v0.1.1/go.mod h1:Eb/sCmEel1jlcdkgPOrNeMn5jvxzoFvJrdjDUxOBHls=
+github.com/ledongthuc/pdf v0.0.0-20220302134840-0c2507a12d80 h1:6Yzfa6GP0rIo/kULo2bwGEkFvCePZ3qHDDTC3/J9Swo=
+github.com/ledongthuc/pdf v0.0.0-20220302134840-0c2507a12d80/go.mod h1:imJHygn/1yfhB7XSJJKlFZKl/J+dCPAknuiaGOshXAs=
+github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
+github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
+github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
+github.com/ncruces/go-strftime v1.0.0 h1:HMFp8mLCTPp341M/ZnA4qaf7ZlsbTc+miZjCLOFAw7w=
+github.com/ncruces/go-strftime v1.0.0/go.mod h1:Fwc5htZGVVkseilnfgOVb9mKy6w1naJmn9CehxcKcls=
+github.com/orisano/pixelmatch v0.0.0-20220722002657-fb0b55479cde h1:x0TT0RDC7UhAVbbWWBzr41ElhJx5tXPWkIHA2HWPRuw=
+github.com/orisano/pixelmatch v0.0.0-20220722002657-fb0b55479cde/go.mod h1:nZgzbfBr3hhjoZnS66nKrHmduYNpc34ny7RK4z5/HM0=
+github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
+github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
+golang.org/x/mod v0.37.0 h1:vF1DjpVEshcIqoEaauuHebaLk1O1forxjxBaVn884JQ=
+golang.org/x/mod v0.37.0/go.mod h1:m8S8VeM9r4dzDwjrKO0a1sZP3YjeMamRRlD+fmR2Q/0=
+golang.org/x/sync v0.21.0 h1:HLII4xRRTtCRkxYp4HNFF0Js/Og6q2i++KXbg0gHCwM=
+golang.org/x/sync v0.21.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.46.0 h1:noSf2Fq6F8DBgS+LysIkx7rIExoNHJsxOAtPp4rthXw=
+golang.org/x/sys v0.46.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
+golang.org/x/text v0.20.0 h1:gK/Kv2otX8gz+wn7Rmb3vT96ZwuoxnQlY+HlJVj7Qug=
+golang.org/x/text v0.20.0/go.mod h1:D4IsuqiFMhST5bX19pQ9ikHC2GsaKyk/oF+pn3ducp4=
+golang.org/x/tools v0.47.0 h1:7Kn5x/d1svx/PzryTsqeoZN4TZwqeH5pGWjefhLi/1Q=
+golang.org/x/tools v0.47.0/go.mod h1:dFHnyTvFWY212G+h7ZY4Vsp/K3U4/7W9TyVaAul8uCA=
+gorm.io/driver/mysql v1.5.7 h1:MndhOPYOfEp2rHKgkZIhJ16eVUIRf2HmzgoPmh7FCWo=
+gorm.io/driver/mysql v1.5.7/go.mod h1:sEtPWMiqiN1N1cMXoXmBbd8C6/l+TESwriotuRRpkDM=
+gorm.io/driver/sqlite v1.6.0 h1:WHRRrIiulaPiPFmDcod6prc4l2VGVWHz80KspNsxSfQ=
+gorm.io/driver/sqlite v1.6.0/go.mod h1:AO9V1qIQddBESngQUKWL9yoH93HIeA1X6V633rBwyT8=
+gorm.io/gorm v1.31.2 h1:3o8FXNo9v9S858gil+3LlZA1LkCOzgb4g5BL64FgaCo=
+gorm.io/gorm v1.31.2/go.mod h1:XyQVbO2k6YkOis7C2437jSit3SsDK72s7n7rsSHd+Gs=
+gorm.io/plugin/dbresolver v1.6.2 h1:F4b85TenghUeITqe3+epPSUtHH7RIk3fXr5l83DF8Pc=
+gorm.io/plugin/dbresolver v1.6.2/go.mod h1:tctw63jdrOezFR9HmrKnPkmig3m5Edem9fdxk9bQSzM=
+modernc.org/cc/v4 v4.29.0 h1:CXgwL8cvxmyzBQZzbSl/6xFtMCryb6u8IOqDci39cgc=
+modernc.org/cc/v4 v4.29.0/go.mod h1:OnovgIhbbMXMu1aISnJ0wvVD1KnW+cAUJkIrAWh+kVI=
+modernc.org/ccgo/v4 v4.34.6 h1:sBgfIwyN0TQ9C5hwIeuqyeAKyMWnbvj2fvpF4L11uzU=
+modernc.org/ccgo/v4 v4.34.6/go.mod h1:SZ8YcN9NG7XVsQYdm6jYBvi8PQP1qi+kqB6OhjqI3Fk=
+modernc.org/fileutil v1.4.0 h1:j6ZzNTftVS054gi281TyLjHPp6CPHr2KCxEXjEbD6SM=
+modernc.org/fileutil v1.4.0/go.mod h1:EqdKFDxiByqxLk8ozOxObDSfcVOv/54xDs/DUHdvCUU=
+modernc.org/gc/v2 v2.6.5 h1:nyqdV8q46KvTpZlsw66kWqwXRHdjIlJOhG6kxiV/9xI=
+modernc.org/gc/v2 v2.6.5/go.mod h1:YgIahr1ypgfe7chRuJi2gD7DBQiKSLMPgBQe9oIiito=
+modernc.org/gc/v3 v3.1.4 h1:2g65LGVSmFQrXeITAw97x7hCRvZFcyE1uDP+7Vng7JI=
+modernc.org/gc/v3 v3.1.4/go.mod h1:HFK/6AGESC7Ex+EZJhJ2Gni6cTaYpSMmU/cT9RmlfYY=
+modernc.org/goabi0 v0.2.0 h1:HvEowk7LxcPd0eq6mVOAEMai46V+i7Jrj13t4AzuNks=
+modernc.org/goabi0 v0.2.0/go.mod h1:CEFRnnJhKvWT1c1JTI3Avm+tgOWbkOu5oPA8eH8LnMI=
+modernc.org/libc v1.74.1 h1:bdR4VTKFMC4966QSNZ05XLGI/VwzVa2kTUX51Dm0riQ=
+modernc.org/libc v1.74.1/go.mod h1:uH4t5bOx3G3g9Xcmj10YKlTcVISlRDwv8VoQJG9n8Os=
+modernc.org/mathutil v1.7.1 h1:GCZVGXdaN8gTqB1Mf/usp1Y/hSqgI2vAGGP4jZMCxOU=
+modernc.org/mathutil v1.7.1/go.mod h1:4p5IwJITfppl0G4sUEDtCr4DthTaT47/N3aT6MhfgJg=
+modernc.org/memory v1.11.0 h1:o4QC8aMQzmcwCK3t3Ux/ZHmwFPzE6hf2Y5LbkRs+hbI=
+modernc.org/memory v1.11.0/go.mod h1:/JP4VbVC+K5sU2wZi9bHoq2MAkCnrt2r98UGeSK7Mjw=
+modernc.org/opt v0.2.0 h1:tGyef5ApycA7FSEOMraay9SaTk5zmbx7Tu+cJs4QKZg=
+modernc.org/opt v0.2.0/go.mod h1:03fq9lsNfvkYSfxrfUhZCWPk1lm4cq4N+Bh//bEtgns=
+modernc.org/sortutil v1.2.1 h1:+xyoGf15mM3NMlPDnFqrteY07klSFxLElE2PVuWIJ7w=
+modernc.org/sortutil v1.2.1/go.mod h1:7ZI3a3REbai7gzCLcotuw9AC4VZVpYMjDzETGsSMqJE=
+modernc.org/sqlite v1.55.0 h1:hIFh0MCH0rGinQ/4KYb5/UbCkRkb+UP+OkLCVWa5MTM=
+modernc.org/sqlite v1.55.0/go.mod h1:4ntCLuNmnH8+GNqjka1wNg7KJd5/Hi5FYp8K+XQ7GZw=
+modernc.org/strutil v1.2.1 h1:UneZBkQA+DX2Rp35KcM69cSsNES9ly8mQWD71HKlOA0=
+modernc.org/strutil v1.2.1/go.mod h1:EHkiggD70koQxjVdSBM3JKM7k6L0FbGE5eymy9i3B9A=
+modernc.org/token v1.1.0 h1:Xl7Ap9dKaEs5kLoOQeQmPWevfnk/DM5qcLcYlA8ys6Y=
+modernc.org/token v1.1.0/go.mod h1:UGzOrNV1mAFSEB63lOFHIpNRUVMvYTc6yu1SMY/XTDM=
diff --git a/internal/fichas/app.go b/internal/fichas/app.go
new file mode 100644
index 0000000..92f7349
--- /dev/null
+++ b/internal/fichas/app.go
@@ -0,0 +1,61 @@
+package fichas
+
+import (
+ "context"
+ "log/slog"
+ "net/http"
+
+ "github.com/go-chi/chi/v5"
+
+ "github.com/carlosframework/rastrillo/csrf"
+ "github.com/carlosframework/rastrillo/db"
+ "github.com/carlosframework/rastrillo/migrate"
+)
+
+// App wires the whole app: schema, router, static files. It returns a
+// *http.ServeMux because rastrillo.Options.Mux is typed that way — the
+// chi router mounts inside it. origin is the app's external origin
+// ("https://app.example.com") — the CSRF check's yardstick, and, once
+// the app grows accounts, sessions.Config.Origin too.
+//
+// Growing the app is SKILL.md's five-file shape: models in models.go,
+// handlers in handlers.go, and — for a multi-user app — the sessions
+// core plus an identity plugin wired right here (examples/notes in the
+// rastrillo repo is the worked example to copy). Adding a subsystem
+// also means adding its Schema to migrations.go's BootSchema — see
+// the comment there.
+func App(d *db.DB, origin string, logger *slog.Logger) (*http.ServeMux, error) {
+ // Apply BootSchema, not Schema: BootSchema is everything this
+ // app needs at boot (its own migrations plus any subsystem's),
+ // while Schema (migrations.go) stays just this app's own so the
+ // generator and its check never see a subsystem's tables and try
+ // to drop them.
+ migrated, err := migrate.Apply(context.Background(), d, BootSchema)
+ if err != nil {
+ return nil, err
+ }
+ // One line per boot. Result exists so this can be logged, and
+ // until something does, a fleet-wide adoption — every database
+ // stamped, no DDL run, exactly once, never again — produces no
+ // output at all, which is the last event you want to be silent.
+ logger.Info("migrate", "applied", migrated.Applied,
+ "skipped", migrated.Skipped, "adopted", migrated.Adopted)
+
+ a := &app{db: d, logger: logger}
+
+ r := chi.NewRouter()
+ // App-wide, from day one: every state-changing route added below
+ // is born covered. Origin-checking, not tokens — nothing to mint
+ // or forget in a form.
+ r.Use(csrf.Protect(origin))
+ r.Get("/", a.index)
+
+ mux := http.NewServeMux()
+ // The app serves its own static files — the framework never does.
+ // They are embedded (render.go) and fingerprinted: templates link
+ // them via {{asset ...}}, which returns a content-hashed URL the
+ // handler serves cacheable-forever.
+ mux.Handle("GET /static/", assets.Handler())
+ mux.Handle("/", r)
+ return mux, nil
+}
diff --git a/internal/fichas/handlers.go b/internal/fichas/handlers.go
new file mode 100644
index 0000000..335ed49
--- /dev/null
+++ b/internal/fichas/handlers.go
@@ -0,0 +1,19 @@
+package fichas
+
+import (
+ "log/slog"
+ "net/http"
+
+ "github.com/carlosframework/rastrillo/db"
+)
+
+// app holds what every handler needs. When the app grows accounts,
+// this is where the sessions handle lands too.
+type app struct {
+ db *db.DB
+ logger *slog.Logger
+}
+
+func (a *app) index(w http.ResponseWriter, r *http.Request) {
+ render(w, "index", nil)
+}
diff --git a/internal/fichas/icons/icons.go b/internal/fichas/icons/icons.go
new file mode 100644
index 0000000..b92bd36
--- /dev/null
+++ b/internal/fichas/icons/icons.go
@@ -0,0 +1,47 @@
+// Package icons is this app's icon set, scaffolded once by
+// rastrillo new --icons=lucide --icon-delivery=inline and owned
+// by this app from then on. Edit it, add to it, or replace it.
+//
+// Keys are Lucide slugs whatever the set: that is rastrillo's icon
+// vocabulary, so {{icon "search"}} means the same thing in every
+// app and the shipped ui/ partials never have to change.
+//
+// Wire both seams onto your template tree:
+//
+// tmpl := template.Must(template.New("").
+// Funcs(ui.Funcs(ui.WithIcons(icons.Icon, icons.Assets))).
+// ParseFS(ui.Templates(), "*.html"))
+//
+// Every icon is aria-hidden: it sits beside its own visible text label,
+// which is the accessible name. A control that uses an icon as its ONLY
+// label needs an explicit aria-label.
+package icons
+
+import "html/template"
+
+var icons = map[string]template.HTML{
+ "alert-triangle": `<svg class="icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>`,
+ "check": `<svg class="icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>`,
+ "check-circle": `<svg class="icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>`,
+ "chevron-down": `<svg class="icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>`,
+ "help-circle": `<svg class="icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>`,
+ "info": `<svg class="icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`,
+ "kebab": `<svg class="icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>`,
+ "menu": `<svg class="icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" viewBox="0 0 24 24"><path d="M4 12h16"/><path d="M4 6h16"/><path d="M4 18h16"/></svg>`,
+ "plus": `<svg class="icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" viewBox="0 0 24 24"><path d="M5 12h14"/><path d="M12 5v14"/></svg>`,
+ "search": `<svg class="icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>`,
+ "x": `<svg class="icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`,
+ "x-circle": `<svg class="icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`,
+}
+
+// Icon renders one icon by its Lucide slug. An unknown slug renders
+// nothing rather than panicking a page mid-response — a typo costs a
+// missing icon, not a crash. rastrillo generate --check catches it
+// before ship.
+func Icon(slug string) template.HTML { return icons[slug] }
+
+// Assets is the markup this delivery mode needs in the document <head>.
+// Inline delivery vendors every icon into the binary, so there is
+// nothing to load and this returns empty. Call it anyway: switching
+// --icon-delivery later then needs no template change.
+func Assets() template.HTML { return "" }
diff --git a/internal/fichas/migrations.go b/internal/fichas/migrations.go
new file mode 100644
index 0000000..1e4e3ec
--- /dev/null
+++ b/internal/fichas/migrations.go
@@ -0,0 +1,42 @@
+package fichas
+
+import (
+ "embed"
+
+ "github.com/carlosframework/rastrillo/migrate"
+)
+
+//go:embed migrations/*.sql
+var migrationFS embed.FS
+
+// Schema is this app's own migrations, in order — nothing else. It is
+// what `rastrillo migration generate` and `rastrillo migration check` read
+// and write: both work by replaying a set into an in-memory database
+// and diffing the result against Models, so Schema must never carry a
+// framework subsystem's migrations too — mixed in, the diff would see
+// tables (sessions, auth_links, ...) that Models knows nothing about
+// and want to drop every one of them.
+//
+// Add to it with `rastrillo migration generate` after changing a
+// model, or `rastrillo migration new <name>` to write one by hand.
+// Migrations apply at boot and are never re-run or reversed: never
+// edit one that has shipped, add a new one instead.
+var Schema = migrate.MustFromFS(migrationFS, "fichas")
+
+// BootSchema is everything applied at boot, in order — this app's own
+// Schema plus every framework subsystem's — and it is what App() below
+// hands to migrate.Apply. It is a separate variable from Schema for
+// the same reason Schema must stay narrow: generate and check would
+// misread a subsystem's tables as ones Models forgot.
+//
+// A fresh scaffold uses no subsystem yet, so today this is just
+// Schema. Adding one (say, sessions) means editing this line, not
+// Schema:
+//
+// var BootSchema = migrate.Merge(sessions.Schema, Schema)
+//
+// Merge's argument order is apply order, so a subsystem whose
+// migrations another one reads (auth after sessions) goes first.
+// Get this line wrong and either boot silently skips a subsystem's
+// tables, or generate/check try to drop them.
+var BootSchema = migrate.Merge(Schema)
diff --git a/internal/fichas/migrations/0001_init.sql b/internal/fichas/migrations/0001_init.sql
new file mode 100644
index 0000000..c63a80d
--- /dev/null
+++ b/internal/fichas/migrations/0001_init.sql
@@ -0,0 +1,2 @@
+CREATE TABLE `notes` (`id` integer PRIMARY KEY AUTOINCREMENT,`title` text,`body` text,`created_at` datetime,`updated_at` datetime);
+
diff --git a/internal/fichas/migrations/schema.sql b/internal/fichas/migrations/schema.sql
new file mode 100644
index 0000000..239e296
--- /dev/null
+++ b/internal/fichas/migrations/schema.sql
@@ -0,0 +1,5 @@
+-- Generated by rastrillo migration generate; DO NOT EDIT.
+-- The schema every migration in this directory adds up to.
+
+CREATE TABLE `notes` (`id` integer PRIMARY KEY AUTOINCREMENT,`title` text,`body` text,`created_at` datetime,`updated_at` datetime);
+
diff --git a/internal/fichas/models.go b/internal/fichas/models.go
new file mode 100644
index 0000000..db7e53c
--- /dev/null
+++ b/internal/fichas/models.go
@@ -0,0 +1,25 @@
+package fichas
+
+import "time"
+
+// Models is every model the schema generator manages. Keep it in step
+// with the structs below: `rastrillo migration generate` reads
+// it to work out what the database should look like, and
+// `rastrillo migration check` fails CI when it and the
+// migrations disagree.
+var Models = []any{
+ &Note{},
+}
+
+// Note is a starting example model — rename it, replace it, add more
+// beside it. Whatever it becomes, the rule stays the same: every query
+// touching user-owned rows goes through scope.Owned (SKILL.md) — reads
+// AND writes — and a request body is never bound onto a model directly
+// (explicit map[string]any + .Select allowlist).
+type Note struct {
+ ID int64
+ Title string
+ Body string
+ CreatedAt time.Time
+ UpdatedAt time.Time
+}
diff --git a/internal/fichas/render.go b/internal/fichas/render.go
new file mode 100644
index 0000000..c860d92
--- /dev/null
+++ b/internal/fichas/render.go
@@ -0,0 +1,72 @@
+package fichas
+
+import (
+ "bytes"
+ "embed"
+ "html/template"
+ "net/http"
+
+ "github.com/carlosframework/rastrillo"
+ "github.com/carlosframework/rastrillo/ui"
+
+ "amadan.net/oficina/fichas/internal/fichas/icons"
+)
+
+//go:embed templates static
+var appFS embed.FS
+
+// assets fingerprints static/: {{asset "static/tokens.css"}} in a
+// template returns a content-hashed URL, served immutable-cacheable by
+// the handler App mounts.
+var assets = rastrillo.NewAssets(appFS)
+
+// pages is one *template.Template per page, each combining layout.html
+// with that page's own file — kept separate so every page can define a
+// template named "content" without colliding with the others.
+var pages = map[string]*template.Template{}
+
+func init() {
+ for _, name := range []string{"index", "errors"} {
+ pages[name] = template.Must(
+ // ui's partials and their helpers first, so every page can
+ // call one without registering anything. WithIcons points
+ // ui's two icon seams at the app's own set
+ // (internal/fichas/icons, scaffolded by rastrillo new) —
+ // both of them, always: passing only icon would leave
+ // iconAssets on the framework default and silently break
+ // cdn and js delivery. iconAssets is whatever <head> markup
+ // the chosen delivery needs, empty for the vendored-inline
+ // default, so the layout calls it unconditionally and
+ // switching delivery later needs no template edit.
+ template.Must(template.New("layout").
+ Funcs(ui.Funcs(ui.WithIcons(icons.Icon, icons.Assets))).
+ Funcs(template.FuncMap{"asset": assets.Path}).
+ ParseFS(ui.Templates(), "*.html")).
+ // Then the app's own: the shell and this page's body.
+ ParseFS(appFS, "templates/layout.html", "templates/"+name+".html"))
+ }
+}
+
+// render executes name's layout into a buffer before anything touches
+// the wire: a template error becomes a clean 500 instead of garbage
+// appended to a half-written page, and headers (flash cookies, say)
+// stay settable until the status line is written.
+func render(w http.ResponseWriter, name string, data any) {
+ var buf bytes.Buffer
+ if err := pages[name].ExecuteTemplate(&buf, "layout", data); err != nil {
+ http.Error(w, "something went wrong", http.StatusInternalServerError)
+ return
+ }
+ buf.WriteTo(w)
+}
+
+// ErrorPage renders the "errors" page — templates/errors.html, which
+// wraps ui's error-page partial in the layout — for status inside ref
+// (rastrillo.NewRef, or empty when there is none to show). It is the
+// rastrillo.ErrorPageFunc cmd/fichas/main.go points Options.ErrorPage at,
+// so a panic gets the same page a handled failure would; wire it to
+// Ctx.ErrorPage too as the app grows handlers of its own.
+func ErrorPage(w http.ResponseWriter, r *http.Request, status int, ref string) {
+ w.WriteHeader(status)
+ render(w, "errors", map[string]any{"Status": status, "Ref": ref})
+}
diff --git a/internal/fichas/static/datetime.js b/internal/fichas/static/datetime.js
new file mode 100644
index 0000000..c95890a
--- /dev/null
+++ b/internal/fichas/static/datetime.js
@@ -0,0 +1,1338 @@
+/* datetime.js — the natural-language date combobox. A sibling of
+ rastrillo.js and select.js, on exactly the same terms: first-party,
+ dependency-free, inert by default, and app-owned from the moment
+ rastrillo new writes it into static/.
+
+ Type "tomorrow", "next fri 9am", "25 Dec 6pm", "in 2 weeks" or
+ "14:30" and the combobox resolves it, previews the reading, and
+ writes it back to the native input on commit. The native input never
+ leaves the DOM: it keeps its name and its wire value, so every POST
+ is byte-identical to the un-enhanced form and the server keeps
+ parsing it with the same code. With scripts off the field is an
+ ordinary <input type="date">, and the browser's own picker still
+ opens.
+
+ Vocabulary:
+ data-rst-date on a date or datetime-local input: arm
+ the combobox
+ data-rst-time the same, on a time input — the script
+ reads a clock rather than a calendar
+ data-rst-date-words the parser vocabulary, one JSON object
+ of |-separated spellings (see
+ ui/funcs.go's dateWords)
+ data-rst-date-set the commit affordance's label
+ data-rst-date-hint guidance under the list, {example}
+ substituted here with a date this
+ locale's own formatter wrote
+ data-rst-date-pick label for the native-picker button
+ data-rst-date-results live-region text, {n} substituted
+ data-rst-date-result-one live-region text for exactly one
+ data-rst-date-quick-* the seven quick-pick labels: today,
+ tomorrow, next-week, plus-1h, plus-2h,
+ end-of-day, next-day
+ data-rst-range on a WRAPPER around two armed inputs:
+ the two pair up by DOM order (first is
+ the start, second the end). The end
+ gets quick picks relative to the
+ start. A value of "session" also seeds
+ an empty end to start + 1h when the
+ start is committed.
+
+ ui/partials/field-date.html, field-time.html, field-datetime.html
+ and field-daterange.html emit all of it. Every string comes from the
+ framework's base catalog (rastrillo.ui.date_*) and rides out on
+ attributes, because this markup is built in the browser where the
+ catalog is out of reach — so this file carries no English
+ VOCABULARY: not one word the parser matches on is written here. It
+ does carry English fallbacks for the eleven labels it puts on
+ screen, exactly as select.js does, so the file still works standing
+ alone in a page that forgot an attribute.
+
+ The parser is a pure function of (text, vocabulary, locale tables,
+ now). It knows no month names and no weekday names by heart: it asks
+ Intl for them, in the page's own language, and folds the digits the
+ same way, so a field enhanced in Hindi reads Devanagari digits and
+ Hindi month names without a table anyone has to maintain. The
+ vocabulary — "tomorrow", "next", "in", "ago" — is the half a machine
+ cannot derive, and that half arrives translated on the attribute.
+
+ The pure half is exported for Node at the bottom of the file, behind
+ a guard a browser never takes; ui/datetime_node.mjs drives it
+ against ui/testdata/datetime/*.json. */
+(function () {
+ "use strict";
+
+ /* ── the parser ──────────────────────────────────────────────────
+ Pure: no document, no state, no strings of its own. */
+
+ var COMBINING = /[\u0300-\u036f]/g;
+
+ // Scripts that separate words with spaces. A phrase may only match
+ // between word boundaries in these, so "at" cannot be found inside
+ // "atlas" — while an affixing script (Japanese 後, Chinese 后) is
+ // deliberately left free to attach straight onto a quantity. Digits
+ // are excluded on purpose: "9am" and "25dec" are one run to a
+ // tokenizer and two words to a person.
+ var LETTERISH = /[a-z\u00c0-\u024f\u0370-\u03ff\u0400-\u04ff\u0530-\u058f\u0590-\u05ff\u0600-\u06ff\u0900-\u097f\u0980-\u09ff\u0b80-\u0bff\u0e00-\u0e7f]/;
+ // The punctuation that separates words, and not only the ASCII of
+ // it: Arabic writes its comma \u060c and its semicolon \u061b, and CJK
+ // writes \uff0c\u3001\u3002. Left out, those characters fall through to the
+ // unknown-run branch and refuse a phrase that was punctuated
+ // correctly in its own script.
+ var BREAKS = /[\s,;\u060c\u061b\uff0c\u3001\u3002]/;
+
+ function pad(n) { return (n < 10 ? "0" : "") + n; }
+
+ function midnight(d) {
+ return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+ }
+
+ function shiftDays(d, n) {
+ var x = midnight(d);
+ x.setDate(x.getDate() + n);
+ return x;
+ }
+
+ // Strictly the NEXT one: a weekday named on the day it falls means
+ // the one a week out, never today. Naming today has a word of its
+ // own in every catalog, so the ambiguity buys nothing.
+ function comingWeekday(now, target) {
+ var delta = (target - now.getDay() + 7) % 7;
+ return shiftDays(now, delta === 0 ? 7 : delta);
+ }
+
+ function lastWeekday(now, target) {
+ var delta = (now.getDay() - target + 7) % 7;
+ return shiftDays(now, -(delta === 0 ? 7 : delta));
+ }
+
+ // A day-and-month with no year means the next time it comes round.
+ function inferYear(now, mo, d) {
+ var y = now.getFullYear();
+ return new Date(y, mo, d) < midnight(now) ? y + 1 : y;
+ }
+
+ // Checked, never trusted: a 31st of February rolls silently forward
+ // in the Date constructor, which is how a typo becomes a date nobody
+ // meant. Built, read back, and refused if it moved.
+ function makeDate(y, mo, d, h, mi) {
+ // The carrier's wire format is four digits of year, so a year below
+ // a thousand writes "500-12-25" — which every date input rejects by
+ // silently emptying itself. A reading that clears the field is not
+ // a reading, and the floor lives here rather than beside each
+ // caller so no path can grow around it: the wire formats, the
+ // numeric d/m/y, "25 dec 0500" and a bare year all pass through.
+ if (y < 1000) return null;
+ if (mo < 0 || mo > 11 || d < 1 || d > 31) return null;
+ if (h < 0 || h > 23 || mi < 0 || mi > 59) return null;
+ var dt = new Date(y, mo, d, h, mi, 0, 0);
+ if (dt.getMonth() !== mo || dt.getDate() !== d) return null;
+ return dt;
+ }
+
+ // The numbering systems a person may type in, probed against the
+ // locale and unioned into the fold. The locale's default is not
+ // enough on its own: this ICU resolves plain "ar" and plain "hi" to
+ // latn, so those fields read "25" and refused ٢٥ and २५ — the digits
+ // their keyboards make. Unioning DIGITS is safe in a way that unioning
+ // words never is: a digit means the same number in every language, so
+ // an English field that also takes ٢٥ has guessed nothing. Systems
+ // that spell a number a word at a time are absent on purpose; they
+ // cannot be read back a character at a time either.
+ var NUMBERING = ["arab", "arabext", "beng", "deva"];
+
+ // One system's ten digits, merged in. False where it adds nothing, or
+ // cannot be folded at all: more than a character to a digit, a digit
+ // written twice, or a fold contradicting one already agreed.
+ function foldDigits(nf, map) {
+ var i, parts, k, digit, add = {}, differs = false;
+ for (i = 0; i <= 9; i++) {
+ parts = nf.formatToParts(i);
+ digit = "";
+ for (k = 0; k < parts.length; k++) if (parts[k].type === "integer") digit = parts[k].value;
+ if (digit.length !== 1) return false;
+ if (add[digit] !== undefined) return false;
+ if (map[digit] !== undefined && map[digit] !== String(i)) return false;
+ if (digit !== String(i)) differs = true;
+ add[digit] = String(i);
+ }
+ for (digit in add) if (Object.prototype.hasOwnProperty.call(add, digit)) map[digit] = add[digit];
+ return differs;
+ }
+
+ // The ten digits this locale writes, mapped back to ASCII. ar-EG
+ // counts in "١٢٣", which neither \d nor unary + accepts, and a
+ // NumberFormat in that locale printing 0-9 IS the table. null where
+ // there is nothing to fold, and null for a numbering system that
+ // does not spell a number one digit at a time — it cannot be read
+ // back one digit at a time either.
+ function digitFolder(locale) {
+ var map = {}, differs = false, base, root, i;
+ try {
+ base = new Intl.NumberFormat(locale, { useGrouping: false });
+ } catch (e) {
+ return null;
+ }
+ if (foldDigits(base, map)) differs = true;
+ // The tag the probes hang off, with any -u- extension the resolver
+ // already added trimmed off: a second one is an ill-formed tag.
+ try {
+ root = base.resolvedOptions().locale.split("-u-")[0];
+ } catch (e) {
+ root = "";
+ }
+ for (i = 0; root && i < NUMBERING.length; i++) {
+ try {
+ if (foldDigits(new Intl.NumberFormat(root + "-u-nu-" + NUMBERING[i], { useGrouping: false }), map)) differs = true;
+ } catch (e) {
+ /* a numbering system this engine does not know folds nothing */
+ }
+ }
+ if (!differs) return null;
+ return function (s) {
+ var out = "", j;
+ for (j = 0; j < s.length; j++) out += map[s.charAt(j)] !== undefined ? map[s.charAt(j)] : s.charAt(j);
+ return out;
+ };
+ }
+
+ // One normalizer, used on both sides — on the vocabulary and the
+ // Intl names as the tables are built, and on the typed text as it is
+ // read — so a person who leaves the accents off still meets the
+ // words the catalog spells with them.
+ function makeFold(digits) {
+ return function (s) {
+ var out = String(s === null || s === undefined ? "" : s);
+ if (out.normalize) out = out.normalize("NFD").replace(COMBINING, "");
+ out = out.toLowerCase();
+ if (digits) out = digits(out);
+ return out.replace(/\s+/g, " ").trim();
+ };
+ }
+
+ // What this locale calls each month (or weekday), long and short,
+ // index-aligned with the probe dates — which is what turns a matched
+ // word back into a number. Asked of Intl rather than tabulated,
+ // because a table per language is precisely the thing this file
+ // exists not to keep.
+ function nameTable(locale, type, dates, fold) {
+ var widths = ["long", "short"], out = [], i, c, w, opts, fmt, parts, k, value;
+ // Two shapes of every month name, because a month is not one word
+ // in every language: a Russian calendar header says декабрь and a
+ // Russian typing a date writes 25 декабря, and Intl only hands over
+ // that second form when a DAY is in the format. Asking both ways
+ // and keeping both answers is how a DERIVED table covers a case the
+ // grammar decides — no genitive is written down here, and Ukrainian
+ // and Greek are fixed by the same two lines.
+ var contexts = type === "month" ? [null, "numeric"] : [null];
+ for (i = 0; i < dates.length; i++) out.push([]);
+ for (c = 0; c < contexts.length; c++)
+ for (w = 0; w < widths.length; w++) {
+ opts = { timeZone: "UTC" };
+ opts[type] = widths[w];
+ if (contexts[c]) opts.day = contexts[c];
+ try {
+ fmt = new Intl.DateTimeFormat(locale, opts);
+ } catch (e) {
+ continue;
+ }
+ for (i = 0; i < dates.length; i++) {
+ parts = fmt.formatToParts(dates[i]);
+ value = "";
+ for (k = 0; k < parts.length; k++) if (parts[k].type === type) value = parts[k].value;
+ value = fold(value);
+ if (!value) continue;
+ // A NAME has to be a word. Japanese and Chinese write their
+ // months as numbers, and Intl reports that as
+ // {month:"8"}+{literal:"\u6708"} — so the "name" of August comes
+ // back as the bare digit 8, and a table holding it turns every
+ // typed number into a month. It did: ja "2025" tokenized as
+ // month 2 plus 025 and committed 25 February 2027 without a
+ // word of warning, which is the one thing this parser promises
+ // never to do. Anything that is only digits and separators is
+ // refused here rather than trusted; a calendar whose months are
+ // numbers is one this grammar cannot read, and saying so is the
+ // honest answer.
+ if (!/[^\d\s.,\/\-]/.test(value)) continue;
+ if (out[i].indexOf(value) === -1) out[i].push(value);
+ // An abbreviation's full stop is dropped as often as it is
+ // typed ("16 Aug." retyped as "16 Aug"), so both spellings are
+ // in the table rather than tolerated by one regex somewhere.
+ if (value.charAt(value.length - 1) === "." && value.length > 1) {
+ value = value.slice(0, -1);
+ if (out[i].indexOf(value) === -1) out[i].push(value);
+ }
+ }
+ }
+ return out;
+ }
+
+ // The options the field's own display formats with. Up here in the
+ // pure half rather than beside the page code that uses it, because
+ // the parser has to read that display back: what this field writes,
+ // it must be able to re-read, and a reading that cannot is how an
+ // in-place edit turns into a refusal.
+ function displayOptions(kind) {
+ var opts = kind === "time"
+ ? { hour: "numeric", minute: "2-digit" }
+ : { weekday: "short", day: "numeric", month: "short", year: "numeric" };
+ if (kind === "datetime") {
+ opts.hour = "numeric";
+ opts.minute = "2-digit";
+ }
+ return opts;
+ }
+
+ // What Intl writes that nobody typed: the literals it threads between
+ // the numbers (ja 年月日, ru's "г.", pt's "de", the brackets round a
+ // Japanese weekday) and the dayPeriod names it chooses, which are not
+ // always the ones a catalog spells — Intl writes yue's afternoon as
+ // 下晝 where the catalog says 下午. Derived from the same options the
+ // display uses, plus the day-and-month shapes, which is the form a
+ // person types ("25 de marzo"). Literals come back ignorable and
+ // dayPeriods come back as am/pm, so the field can read its own
+ // writing without a per-language table anybody maintains.
+ function displayTokens(locale, fold) {
+ var probes = [displayOptions("date"), displayOptions("datetime"), displayOptions("time"),
+ { day: "numeric", month: "long" }, { day: "numeric", month: "short" }];
+ var when = [new Date(Date.UTC(2026, 11, 25, 15, 30)), new Date(Date.UTC(2026, 2, 3, 9, 5))];
+ var out = { literal: {}, am: {}, pm: {} }, p, i, fmt, parts, k, v, c, run;
+ function keep(bag, s) { s = fold(s); if (s) bag[s] = true; }
+ for (p = 0; p < probes.length; p++) {
+ probes[p].timeZone = "UTC";
+ try {
+ fmt = new Intl.DateTimeFormat(locale, probes[p]);
+ } catch (e) {
+ continue;
+ }
+ for (i = 0; i < when.length; i++) {
+ parts = fmt.formatToParts(when[i]);
+ for (k = 0; k < parts.length; k++) {
+ v = parts[k].value;
+ if (parts[k].type === "dayPeriod") {
+ keep(when[i].getUTCHours() < 12 ? out.am : out.pm, v);
+ continue;
+ }
+ if (parts[k].type !== "literal") continue;
+ // One literal is not always one token: ja hands back "日(" in
+ // a single part. Split into letter runs and single marks so
+ // the day counter stays a day counter and the bracket becomes
+ // its own ignorable thing.
+ for (c = 0, run = ""; c <= v.length; c++) {
+ if (c < v.length && letterish(v.charAt(c))) { run += v.charAt(c); continue; }
+ keep(out.literal, run);
+ run = "";
+ if (c < v.length && !BREAKS.test(v.charAt(c))) keep(out.literal, v.charAt(c));
+ }
+ }
+ }
+ }
+ return out;
+ }
+
+ var TABLES = {};
+
+ // Everything derived from a locale, built once and cached: the fold,
+ // the month and weekday names, the wall-clock formatters the field
+ // shows its value with.
+ function tables(locale) {
+ var key = locale || "";
+ if (TABLES[key]) return TABLES[key];
+ var loc = locale || undefined;
+ var fold = makeFold(digitFolder(loc));
+ var monthDates = [], weekDates = [], i;
+ for (i = 0; i < 12; i++) monthDates.push(new Date(Date.UTC(2026, i, 15)));
+ // 1 Feb 2026 is a Sunday, so the seven probes land index-aligned
+ // with Date.prototype.getDay.
+ for (i = 0; i < 7; i++) weekDates.push(new Date(Date.UTC(2026, 1, 1 + i)));
+ var t = {
+ locale: loc,
+ fold: fold,
+ months: nameTable(loc, "month", monthDates, fold),
+ weekdays: nameTable(loc, "weekday", weekDates, fold),
+ display: displayTokens(loc, fold)
+ };
+ // Does this locale call its months anything at all? Japanese does
+ // not — it numbers them, and nameTable will not hold a bare digit
+ // as a name — so the table is empty and the grammar reads 12月25日
+ // another way. Derived: no list of numbering calendars kept here.
+ t.namedMonths = false;
+ for (i = 0; i < t.months.length; i++) if (t.months[i].length) t.namedMonths = true;
+ TABLES[key] = t;
+ return t;
+ }
+
+ // The vocabulary and the Intl names as one list, longest phrase
+ // first — so a plain scan cannot let "m" win over "may", and a
+ // multi-word entry ("hôm nay", "منتصف الليل", "seo chugainn") is
+ // matched whole. Splitting is on "|" only: "meio-dia" is one entry
+ // and stays one.
+ function index(vocab, tbl) {
+ var list = [], name, alts, i, m, k;
+ for (name in vocab) {
+ if (!Object.prototype.hasOwnProperty.call(vocab, name)) continue;
+ alts = String(vocab[name]).split("|");
+ for (i = 0; i < alts.length; i++) {
+ var text = tbl.fold(alts[i]);
+ if (text) list.push({ text: text, role: "word", kind: name, at: -1 });
+ }
+ }
+ // The display's own vocabulary, on the same list: a literal is a
+ // word the reading may skip, and a dayPeriod is am or pm however
+ // Intl chose to spell it. Both are additive — a spelling already
+ // carrying a kind keeps it and gains this one, because matchAt
+ // merges every entry of the same length.
+ var seen = ["literal", "am", "pm"], kind;
+ for (i = 0; i < seen.length; i++) {
+ kind = seen[i] === "literal" ? "ignore" : seen[i];
+ for (name in tbl.display[seen[i]])
+ if (Object.prototype.hasOwnProperty.call(tbl.display[seen[i]], name))
+ list.push({ text: name, role: "word", kind: kind, at: -1 });
+ }
+ for (m = 0; m < tbl.months.length; m++)
+ for (k = 0; k < tbl.months[m].length; k++)
+ list.push({ text: tbl.months[m][k], role: "month", kind: "", at: m });
+ for (m = 0; m < tbl.weekdays.length; m++)
+ for (k = 0; k < tbl.weekdays[m].length; k++)
+ list.push({ text: tbl.weekdays[m][k], role: "weekday", kind: "", at: m });
+ list.sort(function (a, b) { return b.text.length - a.text.length; });
+ return list;
+ }
+
+ // A separator is never a letter, whatever block it lives in. The
+ // Arabic comma sits at \u060c, inside the same range as the letters
+ // either side of it, so a class drawn by range alone reads
+ // "\u063a\u062f\u0627\u060c 6" as one unbroken word and refuses a phrase that was
+ // punctuated correctly.
+ function letterish(c) {
+ return !!c && !BREAKS.test(c) && LETTERISH.test(c);
+ }
+
+ function boundaryOK(s, from, to) {
+ if (from > 0 && letterish(s.charAt(from - 1)) && letterish(s.charAt(from))) return false;
+ if (to < s.length && letterish(s.charAt(to)) && letterish(s.charAt(to - 1))) return false;
+ return true;
+ }
+
+ // The longest phrase starting here, as one token. Every entry of that
+ // same length is merged in, because one spelling can wear two hats:
+ // Vietnamese "sau" is both "next" and "in", and which one it means is
+ // a question the grammar answers, not the scanner.
+ function matchAt(s, pos, idx) {
+ var best = -1, tok = null, i, e;
+ for (i = 0; i < idx.length; i++) {
+ e = idx[i];
+ if (best >= 0 && e.text.length < best) break;
+ if (s.slice(pos, pos + e.text.length) !== e.text) continue;
+ if (!boundaryOK(s, pos, pos + e.text.length)) continue;
+ if (best < 0) {
+ best = e.text.length;
+ tok = { t: "word", kinds: {}, month: -1, weekday: -1 };
+ }
+ if (e.role === "word") tok.kinds[e.kind] = true;
+ else if (e.role === "month") tok.month = e.at;
+ else tok.weekday = e.at;
+ }
+ return tok ? { tok: tok, len: best } : null;
+ }
+
+ function scan(s, idx) {
+ var toks = [], pos = 0, n = s.length, m, hit, start, glued = false;
+ // Whether nothing at all stood between this token and the one
+ // before it. A counter glued to its number belongs to that number
+ // (12月, 25日); the same word with a space in front of it is a noun
+ // being counted ("3 months"). A fact about the typing, not about
+ // any language, which is why it can be recorded without knowing
+ // which language was typed.
+ function push(tok) {
+ tok.glued = glued;
+ toks.push(tok);
+ glued = true;
+ }
+ while (pos < n) {
+ if (BREAKS.test(s.charAt(pos))) { pos++; glued = false; continue; }
+ m = /^(\d{1,2}):(\d{2})/.exec(s.slice(pos));
+ if (m) {
+ push({ t: "clock", h: +m[1], mi: +m[2] });
+ pos += m[0].length;
+ continue;
+ }
+ hit = matchAt(s, pos, idx);
+ if (hit) { push(hit.tok); pos += hit.len; continue; }
+ m = /^\d+/.exec(s.slice(pos));
+ if (m) {
+ push({ t: "num", n: +m[0], digits: m[0].length });
+ pos += m[0].length;
+ continue;
+ }
+ start = pos;
+ while (pos < n && !BREAKS.test(s.charAt(pos)) && !/\d/.test(s.charAt(pos))) {
+ if (pos > start && matchAt(s, pos, idx)) break;
+ pos++;
+ }
+ if (pos === start) pos++;
+ push({ t: "other", raw: s.slice(start, pos) });
+ }
+ return toks;
+ }
+
+ // parse(text, vocab, tbl, now, ctx) -> {date, hasDate, hasTime} or
+ // null. Never a guess: text this grammar does not understand comes
+ // back null, so nothing is armed and nothing is committed.
+ //
+ // ctx.prev is the value this field is already showing; ctx.base is
+ // the day a wired range's START is on. The two are not
+ // interchangeable. A phrase naming no date at all ("5pm") lands on
+ // the START's day — that is what makes a time-only end stay in the
+ // same session. A phrase naming PART of a date ("2030") keeps the day
+ // THIS field is showing, because the part it left out is the part it
+ // means to keep.
+ function parse(text, vocab, tbl, now, ctx) {
+ ctx = ctx || {};
+ var raw = tbl.fold(text);
+ if (!raw) return null;
+ // Cached against the vocabulary itself, not just the locale: a
+ // page could in principle carry two, and a stale index would parse
+ // the second field with the first field's words.
+ var key = "";
+ for (var name in vocab) if (Object.prototype.hasOwnProperty.call(vocab, name)) key += name + "=" + vocab[name] + "\u0000";
+ if (tbl.indexKey !== key) {
+ tbl.index = index(vocab, tbl);
+ tbl.indexKey = key;
+ }
+ var idx = tbl.index;
+
+ var prev = ctx.prev || null;
+ var base = ctx.base || null;
+ var anchor = midnight(base || prev || now);
+ var own = midnight(prev || base || now);
+ var clockH = prev ? prev.getHours() : 9;
+ var clockM = prev ? prev.getMinutes() : 0;
+
+ var m, d;
+
+ // The wire formats, read straight back: what the native carrier
+ // holds, and what a person pastes out of one form into another.
+ m = /^(\d{4})-(\d{1,2})-(\d{1,2})(?:[t ](\d{1,2}):(\d{2})(?::\d{2})?)?$/.exec(raw);
+ if (m) {
+ d = makeDate(+m[1], +m[2] - 1, +m[3],
+ m[4] === undefined ? clockH : +m[4],
+ m[4] === undefined ? clockM : +m[5]);
+ return d ? { date: d, hasDate: true, hasTime: m[4] !== undefined } : null;
+ }
+ // Year first, with the separators a keyboard reaches for rather
+ // than the wire's hyphen. Nothing else in any calendar puts four
+ // digits in front of a date, so 2026/12/25 and 2026.12.25 need no
+ // day-or-month guess: it is how ja, zh and yue write one down.
+ m = /^(\d{4})[\/.](\d{1,2})[\/.](\d{1,2})$/.exec(raw);
+ if (m) {
+ d = makeDate(+m[1], +m[2] - 1, +m[3], clockH, clockM);
+ return d ? { date: d, hasDate: true, hasTime: false } : null;
+ }
+ // Numeric d/m[/y], day first — and swapped where only the other
+ // reading can be true, so a pasted 12/25/2027 is understood rather
+ // than refused.
+ m = /^(\d{1,2})[\/.\-](\d{1,2})(?:[\/.\-](\d{2}|\d{4}))?$/.exec(raw);
+ if (m) {
+ var day = +m[1], mon = +m[2] - 1, swap;
+ if (mon > 11 && day <= 12) { swap = day; day = +m[2]; mon = swap - 1; }
+ var year = m[3] === undefined ? inferYear(now, mon, day)
+ : (+m[3] < 100 ? 2000 + +m[3] : +m[3]);
+ d = makeDate(year, mon, day, clockH, clockM);
+ return d ? { date: d, hasDate: true, hasTime: false } : null;
+ }
+
+ var toks = scan(raw, idx), i;
+ if (!toks.length) return null;
+ for (i = 0; i < toks.length; i++) if (toks[i].t === "other") return null;
+
+ var used = [];
+ function find(kind) {
+ for (var k = 0; k < toks.length; k++)
+ if (!used[k] && toks[k].t === "word" && toks[k].kinds[kind]) return k;
+ return -1;
+ }
+ function findRole(role) {
+ for (var k = 0; k < toks.length; k++) {
+ if (used[k] || toks[k].t !== "word" || toks[k][role] < 0) continue;
+ // A weekday name being counted is not a weekday: nobody writes
+ // a date by putting a number in front of one. A MONTH name is
+ // the opposite case and is left alone — "25dec" is how people
+ // type one.
+ if (role === "weekday" && k > 0 && toks[k].glued && isCounter(k, k - 1)) continue;
+ return k;
+ }
+ return -1;
+ }
+ function findKind(t) {
+ for (var k = 0; k < toks.length; k++) if (!used[k] && toks[k].t === t) return k;
+ return -1;
+ }
+ function after(k) {
+ return k + 1 < toks.length && !used[k + 1] ? k + 1 : -1;
+ }
+ function before(k) {
+ return k > 0 && !used[k - 1] ? k - 1 : -1;
+ }
+ function unit() {
+ var names = ["minute", "hour", "day", "week", "month"], k, at;
+ for (k = 0; k < names.length; k++) {
+ at = find(names[k]);
+ if (at >= 0) return { name: names[k], at: at };
+ }
+ return null;
+ }
+ // Is the name at k being counted rather than named? A number in
+ // front of it says so, and so does a next/last particle written
+ // straight onto a word that is a unit as well as a name: 来月 is
+ // next MONTH and 翌日 is the next DAY, and both asked for a weekday
+ // until this line, because 月 and 日 are also how Japanese
+ // abbreviates Monday and Sunday.
+ function isCounter(k, p) {
+ if (toks[p].t === "num") return true;
+ if (toks[p].t !== "word") return false;
+ if (!toks[p].kinds.next && !toks[p].kinds.last) return false;
+ return !!(toks[k].kinds.day || toks[k].kinds.week || toks[k].kinds.month);
+ }
+ function isWord(k, kind) {
+ return k >= 0 && toks[k].t === "word" && !!toks[k].kinds[kind];
+ }
+ // The counter glued to a number already claimed — the 日 of 25日,
+ // the 号 of 25号. It belongs to that number, and leaving it behind
+ // failed the leftover check on a date written correctly. Glued is
+ // the whole test: "3 days" has a space and stays a duration.
+ function claimCounter(at, kind) {
+ var nx = at >= 0 ? after(at) : -1;
+ if (nx < 0 || toks[nx].t !== "word" || !toks[nx].glued) return false;
+ if (!toks[nx].kinds[kind]) return false;
+ used[nx] = true;
+ return true;
+ }
+ // A number glued to the month counter where months have no names:
+ // the 12 of 12月25日. Gated on the empty table so no language that
+ // CALLS its months something reaches here — without it, English
+ // "3months" would read as March.
+ function counterMonth() {
+ if (tbl.namedMonths) return -1;
+ for (var k = 0; k < toks.length; k++) {
+ if (used[k] || toks[k].t !== "num" || toks[k].digits > 2) continue;
+ var nx = after(k);
+ if (nx >= 0 && toks[nx].t === "word" && toks[nx].glued && toks[nx].kinds.month) return k;
+ }
+ return -1;
+ }
+
+ var date = null, hasDate = false, hasTime = false, h = 0, mi = 0;
+
+ // A quantity is what tells "in"/"ago" apart from "next"/"last"
+ // where one spelling carries both — Vietnamese "sau" is "next"
+ // with nothing counted and "in" with a number beside it.
+ var quantified = findKind("num") >= 0;
+ var into = find("in"), back = find("ago");
+ // Both directions at once is not a phrase, it is a contradiction:
+ // "in 2 weeks ago" and "через 2 недели назад" name no instant, and
+ // the sign was being picked by whichever branch ran second — ago
+ // won, silently, and the reading looked confident. Two DISTINCT
+ // tokens is the test, because one spelling is allowed to carry
+ // both kinds (Vietnamese "sau" does) and a single word wearing two
+ // hats is still one word.
+ if (into >= 0 && back >= 0 && into !== back) return null;
+ if (quantified && (into >= 0 || back >= 0)) {
+ var u = unit();
+ if (u) {
+ var qi = findKind("num");
+ var qty = toks[qi].n, sign = back >= 0 ? -1 : 1;
+ used[qi] = true;
+ used[u.at] = true;
+ if (into >= 0) used[into] = true;
+ if (back >= 0) used[back] = true;
+ if (u.name === "minute" || u.name === "hour") {
+ // An offset counted in clock units moves the clock, so it
+ // names a time as well as a day.
+ date = new Date(now.getTime() + sign * qty * (u.name === "hour" ? 3600000 : 60000));
+ hasDate = true;
+ hasTime = true;
+ h = date.getHours();
+ mi = date.getMinutes();
+ } else {
+ date = midnight(now);
+ if (u.name === "day") date.setDate(date.getDate() + sign * qty);
+ else if (u.name === "week") date.setDate(date.getDate() + sign * qty * 7);
+ else date.setMonth(date.getMonth() + sign * qty);
+ hasDate = true;
+ }
+ }
+ }
+
+ // The clock. Claimed before the calendar so "25 dec 6pm" cannot
+ // read its 6 as a second day number.
+ if (!hasTime) {
+ var noon = find("noon"), mid = find("midnight");
+ if (noon >= 0) { h = 12; mi = 0; hasTime = true; used[noon] = true; }
+ else if (mid >= 0) { h = 0; mi = 0; hasTime = true; used[mid] = true; }
+ else {
+ var ci = findKind("clock");
+ if (ci >= 0) {
+ h = toks[ci].h;
+ mi = toks[ci].mi;
+ used[ci] = true;
+ hasTime = true;
+ } else {
+ for (i = 0; i < toks.length && !hasTime; i++) {
+ if (used[i] || toks[i].t !== "num") continue;
+ var nx = after(i), pv = before(i);
+ if (isWord(nx, "am") || isWord(nx, "pm") || isWord(pv, "am") || isWord(pv, "pm")) {
+ h = toks[i].n;
+ mi = 0;
+ used[i] = true;
+ hasTime = true;
+ // A half-of-the-day marker and a clock marker can both
+ // sit on the same hour: \u5348\u5f8c6\u6642 and \u4e0b\u53486\u70b9 are "6 in the
+ // afternoon" with the hour word still attached. Claiming
+ // the number and leaving the \u6642 behind failed the
+ // leftover check and refused a perfectly ordinary phrase.
+ if (isWord(nx, "hour")) {
+ used[nx] = true;
+ var mnx = after(nx);
+ if (mnx >= 0 && toks[mnx].t === "num" && (after(mnx) < 0 || isWord(after(mnx), "minute"))) {
+ mi = toks[mnx].n;
+ used[mnx] = true;
+ if (after(mnx) >= 0) used[after(mnx)] = true;
+ }
+ }
+ } else if (isWord(nx, "hour")) {
+ h = toks[i].n;
+ mi = 0;
+ used[i] = true;
+ used[nx] = true;
+ hasTime = true;
+ var mn = after(nx);
+ if (mn >= 0 && toks[mn].t === "num" && (after(mn) < 0 || isWord(after(mn), "minute"))) {
+ mi = toks[mn].n;
+ used[mn] = true;
+ if (after(mn) >= 0) used[after(mn)] = true;
+ }
+ } else if (isWord(pv, "at") || isWord(nx, "at")) {
+ // The particle sits on either side of the hour: English
+ // and Spanish put it in front ("at 6", "a las 6") and
+ // Hindi, Bengali and Japanese put it behind (6 बजे, ৬ টায়,
+ // 6時に). Reading only the front one refused half the
+ // world's ordinary way of naming a time.
+ h = toks[i].n;
+ mi = 0;
+ used[i] = true;
+ used[isWord(pv, "at") ? pv : nx] = true;
+ hasTime = true;
+ }
+ }
+ }
+ if (hasTime) {
+ var pm = find("pm"), am = find("am");
+ // A half-of-the-day marker says the clock beside it is a
+ // 12-hour one, and a 12-hour clock has twelve hours on it.
+ // The fold below is modular, so without this line every
+ // impossible hour came back as a plausible one: "25pm" was
+ // 13:00 and "99am" was 03:00 — a guess dressed as a reading,
+ // and the leftover check could not see it because every token
+ // had been claimed.
+ //
+ // Zero is one of the twelve. Japanese and Chinese write
+ // midnight and noon as 午前0時 and 午後0時, 上午0点 and 下午0点 —
+ // ordinary usage, not a typo — and the modular fold already
+ // says the right thing about them: 0 with a morning marker is
+ // midnight, 0 with an afternoon one is noon, exactly as 12
+ // reads the other way round. That also lets English "0am"
+ // through, which is coherent (it IS midnight) and much
+ // simpler than a rule that would have to know which
+ // languages say it.
+ if (pm >= 0 || am >= 0) {
+ if (h < 0 || h > 12) return null;
+ if (pm >= 0) { used[pm] = true; h = (h % 12) + 12; }
+ else { used[am] = true; h = h % 12; }
+ }
+ }
+ }
+ if (hasTime && (h > 23 || mi > 59)) return null;
+ }
+
+ // The calendar.
+ if (!hasDate) {
+ var tod = find("today"), tom = find("tomorrow"), yes = find("yesterday");
+ if (tom >= 0) { date = shiftDays(now, 1); used[tom] = true; hasDate = true; }
+ else if (yes >= 0) { date = shiftDays(now, -1); used[yes] = true; hasDate = true; }
+ else if (tod >= 0) { date = midnight(now); used[tod] = true; hasDate = true; }
+ }
+ if (!hasDate) {
+ var next = find("next"), last = find("last"), dup;
+ var cm = counterMonth();
+ var wi = findRole("weekday");
+ var mo = findRole("month");
+ if (wi >= 0 && mo >= 0) {
+ if (wi === mo) {
+ // ONE spelling wearing both hats: Spanish "mar" is March and
+ // it is Tuesday, and the scanner merges same-length matches
+ // rather than picking for you. Twice in a row is this field's
+ // own writing — "mar, 3 mar 2026" is Tuesday and then March —
+ // so a second month-naming token settles it and the first is
+ // the decoration. Otherwise a day number beside it settles it
+ // ("25 mar" is a date and nothing else), and with no number
+ // to count, a weekday is what a person means.
+ for (dup = wi + 1; dup < toks.length; dup++)
+ if (!used[dup] && toks[dup].t === "word" && toks[dup].month >= 0) { mo = dup; break; }
+ if (mo !== wi) { used[wi] = true; wi = -1; }
+ else if (findKind("num") >= 0) wi = -1;
+ else mo = -1;
+ } else {
+ // A weekday sitting beside a month and a day is decoration,
+ // not the date: it is how this field writes its own value
+ // back ("Fri, 28 Aug 2026"), and the only way to retype a
+ // year in place is for the weekday beside it to be consumed
+ // rather than obeyed. Obeying it would move the date to the
+ // coming Friday and silently throw the typed year away.
+ used[wi] = true;
+ wi = -1;
+ }
+ } else if (wi >= 0 && cm >= 0) {
+ // Same rule where the months are numbered rather than named:
+ // 2026年12月25日(金) and 2026年12月25日周五 are a full date with
+ // the weekday written beside it, and the weekday is the part
+ // that follows from the rest.
+ used[wi] = true;
+ wi = -1;
+ }
+ if (wi >= 0) {
+ used[wi] = true;
+ if (last >= 0) { used[last] = true; date = lastWeekday(now, toks[wi].weekday); }
+ else {
+ if (next >= 0) used[next] = true;
+ date = comingWeekday(now, toks[wi].weekday);
+ }
+ hasDate = true;
+ } else {
+ if (mo >= 0) {
+ used[mo] = true;
+ var dnum = -1, ynum = -1, dat = -1, k;
+ for (k = 0; k < toks.length; k++) {
+ if (used[k] || toks[k].t !== "num") continue;
+ if (toks[k].digits === 4) {
+ if (ynum >= 0) break;
+ ynum = toks[k].n;
+ used[k] = true;
+ } else if (dnum < 0) {
+ dnum = toks[k].n;
+ dat = k;
+ used[k] = true;
+ } else if (ynum < 0) {
+ ynum = toks[k].n < 100 ? 2000 + toks[k].n : toks[k].n;
+ used[k] = true;
+ } else break;
+ }
+ if (dnum < 0) return null;
+ claimCounter(dat, "day");
+ date = makeDate(ynum >= 0 ? ynum : inferYear(now, toks[mo].month, dnum),
+ toks[mo].month, dnum, 0, 0);
+ if (!date) return null;
+ hasDate = true;
+ } else if (cm >= 0) {
+ // A calendar that numbers its months writes the number with
+ // its counter, and the counter is doing the work a name does
+ // everywhere else. The day beside it is written the same way,
+ // with or without its own counter.
+ var cmon = toks[cm].n - 1, cday = -1, cyear = -1, ck;
+ used[cm] = true;
+ used[cm + 1] = true;
+ ck = after(cm + 1);
+ if (ck >= 0 && toks[ck].t === "num" && toks[ck].digits <= 2) {
+ cday = toks[ck].n;
+ used[ck] = true;
+ claimCounter(ck, "day");
+ }
+ if (cday < 0) return null;
+ // The year goes in front here (2026年12月25日), so it is
+ // whatever four digits are still unspoken for. Without this
+ // the field could write a full date it could not read back.
+ for (ck = 0; ck < toks.length && cyear < 0; ck++) {
+ if (used[ck] || toks[ck].t !== "num" || toks[ck].digits !== 4) continue;
+ cyear = toks[ck].n;
+ used[ck] = true;
+ }
+ date = makeDate(cyear >= 0 ? cyear : inferYear(now, cmon, cday), cmon, cday, 0, 0);
+ if (!date) return null;
+ hasDate = true;
+ } else if (next >= 0 || last >= 0) {
+ var u2 = unit();
+ if (u2 && (u2.name === "day" || u2.name === "week" || u2.name === "month")) {
+ used[u2.at] = true;
+ var dir = last >= 0 ? -1 : 1;
+ used[last >= 0 ? last : next] = true;
+ date = midnight(now);
+ if (u2.name === "day") date.setDate(date.getDate() + dir);
+ else if (u2.name === "week") date.setDate(date.getDate() + 7 * dir);
+ else date.setMonth(date.getMonth() + dir);
+ hasDate = true;
+ }
+ }
+ }
+ }
+ if (!hasDate) {
+ // Four digits on their own move the year and nothing else — the
+ // same bargain a lone time strikes with the date. Focus selects
+ // the whole value, so "2030" is not a fragment someone left
+ // behind: it is the entire gesture of changing a year.
+ var only = -1, count = 0;
+ for (i = 0; i < toks.length; i++) {
+ if (used[i] || toks[i].t !== "num") continue;
+ count++;
+ if (toks[i].digits === 4) only = i;
+ }
+ // Four digits, and a year makeDate's floor will accept — checked
+ // here too so a refused year never claims its token and never
+ // reads as a date at all.
+ if (count === 1 && only >= 0 && toks[only].n >= 1000) {
+ used[only] = true;
+ date = new Date(own.getFullYear(), own.getMonth(), own.getDate());
+ date.setFullYear(toks[only].n);
+ hasDate = true;
+ }
+ }
+
+ // Anything left over is a word this reading did not account for,
+ // and a reading that ignores half the sentence is a guess. Two
+ // exceptions: the "at" particle, which is optional everywhere it
+ // appears and required nowhere; and a literal the display itself
+ // writes, which nobody typed on purpose and which carries no
+ // meaning to drop.
+ for (i = 0; i < toks.length; i++) {
+ if (used[i]) continue;
+ if (toks[i].t !== "word") return null;
+ if (toks[i].month >= 0 || toks[i].weekday >= 0) return null;
+ for (var kind in toks[i].kinds) if (kind !== "at" && kind !== "ignore") return null;
+ }
+ if (!hasDate && !hasTime) return null;
+
+ var on = hasDate ? date : anchor;
+ var out = makeDate(on.getFullYear(), on.getMonth(), on.getDate(),
+ hasTime ? h : clockH, hasTime ? mi : clockM);
+ return out ? { date: out, hasDate: hasDate, hasTime: hasTime } : null;
+ }
+
+ /* ── the page ────────────────────────────────────────────────────
+ Everything below is behind the document guard, so Node loads the
+ parser above and nothing else. */
+
+ if (typeof document !== "undefined") {
+
+ var CAL_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" ' +
+ 'stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">' +
+ '<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>';
+
+ var seq = 0;
+
+ function toWire(kind, d) {
+ var day = d.getFullYear() + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate());
+ var clock = pad(d.getHours()) + ":" + pad(d.getMinutes());
+ if (kind === "date") return day;
+ if (kind === "time") return clock;
+ return day + "T" + clock;
+ }
+
+ function fromWire(kind, value, now) {
+ var s = String(value || ""), m;
+ if (kind === "time") {
+ m = /^(\d{2}):(\d{2})/.exec(s);
+ return m ? new Date(now.getFullYear(), now.getMonth(), now.getDate(), +m[1], +m[2]) : null;
+ }
+ m = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2}))?/.exec(s);
+ if (!m) return null;
+ return new Date(+m[1], +m[2] - 1, +m[3], m[4] ? +m[4] : 0, m[5] ? +m[5] : 0);
+ }
+
+ // displayOptions is up in the pure half, because the parser reads
+ // these back: one set of options, formatted here and derived there.
+ function formatter(locale, kind) {
+ try {
+ return new Intl.DateTimeFormat(locale, displayOptions(kind));
+ } catch (e) {
+ return null;
+ }
+ }
+
+ // Does this browser open a picker for this input? showPicker cannot
+ // be asked: HTML has it RETURN silently — no error, no event —
+ // where the browser has no picker for the type, which is exactly
+ // how a button wired to it ends up looking like a control and doing
+ // nothing. So the presence of the method is the only signal a page
+ // gets, and every field that has it gets the button.
+ //
+ // Recorded rather than guarded, because it will be rediscovered
+ // otherwise: measured on Firefox 152 (macOS), a date and a
+ // datetime-local both open the panel and a TIME opens nothing. The
+ // button is offered there anyway, on the same reasoning that lets a
+ // time field share the calendar's label — one affordance, in one
+ // place, on every date field. If a dead clock is reported, this
+ // paragraph is where the fix starts.
+ function canPick(el) { return !!el.showPicker; }
+
+ function attr(el, name, fallback) {
+ var v = el.getAttribute(name);
+ return v === null || v === "" ? fallback : v;
+ }
+
+ function enhance(native) {
+ if (native.dataset.rstEnhanced) return null; // idempotent: safe to re-scan
+ native.dataset.rstEnhanced = "true";
+
+ var kind = native.type === "time" ? "time" : (native.type === "date" ? "date" : "datetime");
+ var locale = document.documentElement.getAttribute("lang") || undefined;
+ var tbl = tables(locale);
+ var fmt = formatter(locale, kind);
+ var vocab = {};
+ try {
+ vocab = JSON.parse(attr(native, "data-rst-date-words", "{}")) || {};
+ } catch (e) {
+ vocab = {};
+ }
+
+ var id = native.id || "rst-dtp-" + ++seq;
+ var listId = id + "-listbox";
+ var setLabel = attr(native, "data-rst-date-set", "Set");
+ var hintText = attr(native, "data-rst-date-hint", "");
+ var pickLabel = attr(native, "data-rst-date-pick", "Open the calendar");
+ var manyFmt = attr(native, "data-rst-date-results", "{n} suggestions");
+ var oneFmt = attr(native, "data-rst-date-result-one", "1 suggestion");
+ var quick = {
+ today: attr(native, "data-rst-date-quick-today", "Today"),
+ tomorrow: attr(native, "data-rst-date-quick-tomorrow", "Tomorrow"),
+ nextWeek: attr(native, "data-rst-date-quick-next-week", "In a week"),
+ plus1h: attr(native, "data-rst-date-quick-plus-1h", "An hour later"),
+ plus2h: attr(native, "data-rst-date-quick-plus-2h", "Two hours later"),
+ endOfDay: attr(native, "data-rst-date-quick-end-of-day", "End of that day"),
+ nextDay: attr(native, "data-rst-date-quick-next-day", "Same time next day")
+ };
+
+ var wrap = document.createElement("div");
+ wrap.setAttribute("rst-dtp", "");
+
+ var input = document.createElement("input");
+ input.type = "text";
+ input.setAttribute("rst-input", "");
+ input.setAttribute("rst-dtp-input", "");
+ input.id = id + "-combo";
+ input.autocomplete = "off";
+ input.spellcheck = false;
+ input.setAttribute("role", "combobox");
+ input.setAttribute("aria-expanded", "false");
+ input.setAttribute("aria-controls", listId);
+ input.setAttribute("aria-autocomplete", "list");
+
+ var list = document.createElement("ul");
+ list.setAttribute("rst-dtp-list", "");
+ list.id = listId;
+ list.hidden = true;
+ list.setAttribute("role", "listbox");
+
+ var status = document.createElement("p");
+ status.className = "rst-sr-only";
+ status.setAttribute("role", "status");
+ status.setAttribute("aria-live", "polite");
+
+ native.parentNode.insertBefore(wrap, native);
+ wrap.appendChild(input);
+ wrap.appendChild(list);
+ wrap.appendChild(status);
+ wrap.appendChild(native);
+
+ // The label named the native input; it now names the control the
+ // user actually types into. Without this the combobox has no
+ // accessible name at all.
+ var label = native.id ? document.querySelector('label[for="' + native.id + '"]') : null;
+ if (label) label.setAttribute("for", input.id);
+ else if (native.getAttribute("aria-label")) input.setAttribute("aria-label", native.getAttribute("aria-label"));
+ if (native.getAttribute("aria-describedby"))
+ input.setAttribute("aria-describedby", native.getAttribute("aria-describedby"));
+
+ // Hidden, never removed: it is what the form submits.
+ native.removeAttribute("rst-input");
+ native.classList.add("rst-sr-only");
+ native.setAttribute("tabindex", "-1");
+ native.setAttribute("aria-hidden", "true");
+
+ var pick = null;
+ if (canPick(native)) {
+ pick = document.createElement("button");
+ pick.type = "button";
+ pick.setAttribute("rst-dtp-pick", "");
+ pick.setAttribute("aria-label", pickLabel);
+ pick.innerHTML = CAL_SVG;
+ wrap.insertBefore(pick, list);
+ }
+
+ var rows = []; // [{li, date, hasTime}] — selectable rows only
+ var active = -1;
+ var baseOf = null; // range end: () => Date|null, the start's value
+ var onCommit = null;
+ var isEnd = false;
+
+ function current() { return fromWire(kind, native.value, new Date()); }
+ function show(d) { return fmt ? fmt.format(d) : toWire(kind, d); }
+ function paint() {
+ var d = current();
+ input.value = d ? show(d) : "";
+ }
+
+ function setActive(i) {
+ active = i;
+ for (var k = 0; k < rows.length; k++) rows[k].li.classList.toggle("is-active", k === i);
+ if (i >= 0) input.setAttribute("aria-activedescendant", rows[i].li.id);
+ else input.removeAttribute("aria-activedescendant");
+ }
+
+ // extra is the row's variant ("set") or a second attribute
+ // ("rst-dtp-quick"): the vocabulary spells a variant in the
+ // value slot and a kind as an attribute of its own, so one
+ // parameter cannot be both, and the caller says which.
+ function addRow(label, meta, date, hasTime, variant, extra) {
+ var li = document.createElement("li");
+ li.setAttribute("rst-dtp-row", variant || "");
+ if (extra) li.setAttribute(extra, "");
+ li.id = listId + "-" + rows.length;
+ li.setAttribute("role", "option");
+ // The row that IS the committed value says so in the
+ // accessibility tree, which is what aria-selected means on a
+ // listbox option — the highlight below is a separate thing,
+ // moved by the arrow keys.
+ li.setAttribute("aria-selected", toWire(kind, date) === native.value ? "true" : "false");
+ var main = document.createElement("span");
+ main.setAttribute("rst-dtp-label", "");
+ main.textContent = label;
+ li.appendChild(main);
+ if (meta) {
+ var m = document.createElement("span");
+ m.setAttribute("rst-dtp-set", "");
+ m.textContent = meta;
+ li.appendChild(m);
+ }
+ li.addEventListener("mousedown", function (e) {
+ e.preventDefault(); // keep focus; blur would undo the pick
+ commit(date, hasTime);
+ });
+ list.appendChild(li);
+ rows.push({ li: li, date: date, hasTime: hasTime });
+ }
+
+ function picks(now) {
+ var start = baseOf ? baseOf() : null;
+ var out = [], at;
+ if (isEnd && start && kind !== "date") {
+ return [
+ { label: quick.plus1h, date: new Date(start.getTime() + 3600000) },
+ { label: quick.plus2h, date: new Date(start.getTime() + 7200000) },
+ { label: quick.endOfDay, date: new Date(start.getFullYear(), start.getMonth(), start.getDate(), 23, 59) },
+ { label: quick.nextDay, date: new Date(start.getTime() + 86400000) }
+ ];
+ }
+ if (kind === "time") {
+ var from = current() || now;
+ return [
+ { label: quick.plus1h, date: new Date(from.getTime() + 3600000) },
+ { label: quick.plus2h, date: new Date(from.getTime() + 7200000) },
+ { label: quick.endOfDay, date: new Date(from.getFullYear(), from.getMonth(), from.getDate(), 23, 59) }
+ ];
+ }
+ at = function (d) { return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 9, 0); };
+ out.push({ label: quick.today, date: at(now) });
+ out.push({ label: quick.tomorrow, date: at(shiftDays(now, 1)) });
+ out.push({ label: quick.nextWeek, date: at(shiftDays(now, 7)) });
+ return out;
+ }
+
+ function ctx() {
+ return { prev: current(), base: baseOf ? baseOf() : null };
+ }
+
+ function rebuild(query) {
+ var now = new Date();
+ list.textContent = "";
+ rows = [];
+ var text = String(query || "").trim();
+ var read = text ? parse(text, vocab, tbl, now, ctx()) : null;
+ if (read) addRow(show(read.date), setLabel, read.date, read.hasTime, "set");
+ var quickPicks = picks(now), i, skip = read ? toWire(kind, read.date) : "";
+ for (i = 0; i < quickPicks.length; i++) {
+ if (toWire(kind, quickPicks[i].date) === skip) continue;
+ addRow(quickPicks[i].label, show(quickPicks[i].date), quickPicks[i].date, kind !== "date", "", "rst-dtp-quick");
+ }
+ if (hintText) {
+ var hint = document.createElement("li");
+ hint.setAttribute("rst-dtp-hint", "");
+ hint.setAttribute("aria-hidden", "true");
+ hint.textContent = hintText.replace("{example}", show(new Date(now.getFullYear(), now.getMonth(), now.getDate(), 9, 0)));
+ list.appendChild(hint);
+ }
+ status.textContent = rows.length === 1 ? oneFmt : manyFmt.replace("{n}", String(rows.length));
+ // Text that failed to parse leaves NOTHING armed: a quick pick
+ // sitting under the cursor would make Enter on a date the
+ // grammar did not understand commit today instead of refusing.
+ setActive(rows.length && (read || !text) ? 0 : -1);
+ }
+
+ function open() {
+ list.hidden = false;
+ input.setAttribute("aria-expanded", "true");
+ rebuild(input.value);
+ }
+
+ function close() {
+ list.hidden = true;
+ input.setAttribute("aria-expanded", "false");
+ input.removeAttribute("aria-activedescendant");
+ active = -1;
+ }
+
+ function commit(date, hasTime) {
+ native.value = toWire(kind, date);
+ native.dispatchEvent(new Event("change", { bubbles: true }));
+ input.value = show(date);
+ close();
+ if (onCommit) onCommit(date, hasTime);
+ }
+
+ function commitText() {
+ var text = input.value.trim();
+ if (!text) {
+ // Cleared on purpose: an emptied field empties the carrier,
+ // and a required native then fails validation the way it
+ // would with no script at all.
+ input.value = "";
+ if (native.value) {
+ native.value = "";
+ native.dispatchEvent(new Event("change", { bubbles: true }));
+ }
+ return;
+ }
+ var read = parse(text, vocab, tbl, new Date(), ctx());
+ if (read) commit(read.date, read.hasTime);
+ else paint(); // unreadable text is not a value: put the old one back
+ }
+
+ input.addEventListener("focus", function () {
+ input.select();
+ open();
+ });
+ input.addEventListener("click", open);
+ input.addEventListener("input", function () { open(); });
+ input.addEventListener("keydown", function (e) {
+ switch (e.key) {
+ case "ArrowDown":
+ e.preventDefault();
+ if (list.hidden) return open();
+ if (rows.length) setActive(Math.min(active + 1, rows.length - 1));
+ break;
+ case "ArrowUp":
+ e.preventDefault();
+ if (list.hidden) return open();
+ if (rows.length) setActive(Math.max(active - 1, 0));
+ break;
+ case "Enter":
+ e.preventDefault();
+ if (!list.hidden && active >= 0) commit(rows[active].date, rows[active].hasTime);
+ else { commitText(); close(); }
+ break;
+ case "Escape":
+ e.preventDefault();
+ paint();
+ close();
+ break;
+ }
+ });
+
+ // Enter belongs to the combobox, never to the form: a commit that
+ // also submits the page throws the commit away and posts a value
+ // nobody finished choosing. The keydown handler above already
+ // calls preventDefault, which normally stops this event being
+ // generated at all — it is stopped here as well because a
+ // SYNTHETIC key injection (CDP, and every browser drive built on
+ // it) delivers keydown and keypress as two independent events,
+ // so the second one arrives with the first one's refusal
+ // discarded. Measured, not guessed: a keypress listener on the
+ // page reports defaultPrevented=false for exactly that Enter.
+ input.addEventListener("keypress", function (e) {
+ if (e.key === "Enter") e.preventDefault();
+ });
+
+ wrap.addEventListener("focusout", function (e) {
+ if (wrap.contains(e.relatedTarget)) return;
+ commitText();
+ close();
+ });
+
+ if (pick) {
+ pick.addEventListener("click", function () {
+ close();
+ try {
+ native.showPicker();
+ } catch (err) {
+ /* no user gesture, or no picker — nothing to break */
+ }
+ });
+ }
+ // A pick made in the native panel lands in the carrier; repaint.
+ native.addEventListener("change", function () {
+ if (document.activeElement !== input) paint();
+ });
+
+ paint();
+
+ return {
+ get value() { return current(); },
+ commit: commit,
+ follow: function (fn) { baseOf = fn; isEnd = true; },
+ committed: function (fn) { onCommit = fn; }
+ };
+ }
+
+ // Two armed inputs inside one [data-rst-range] are a range: first
+ // is the start, second the end, by DOM order. The end's quick picks
+ // are relative to the start's current value, and a time typed into
+ // the end with no date lands on the start's day.
+ function wireRange(wrapper, start, end) {
+ end.follow(function () { return start.value; });
+ if (wrapper.getAttribute("data-rst-range") !== "session") return;
+ // "session" ranges (a talk, a meeting) seed an empty or backwards
+ // end to an hour later. Server-side nothing is seeded, so a
+ // submission with scripts off is exactly what was typed.
+ start.committed(function (d) {
+ var have = end.value;
+ if (!have || have <= d) end.commit(new Date(d.getTime() + 3600000), true);
+ });
+ }
+
+ function scanPage(root) {
+ var armed = root.querySelectorAll("input[data-rst-date], input[data-rst-time]");
+ var made = [], i, k, wrappers, inside, pair;
+ for (i = 0; i < armed.length; i++) made.push([armed[i], enhance(armed[i])]);
+ wrappers = root.querySelectorAll("[data-rst-range]");
+ for (i = 0; i < wrappers.length; i++) {
+ inside = wrappers[i].querySelectorAll("input[data-rst-date], input[data-rst-time]");
+ pair = [];
+ for (k = 0; k < inside.length && pair.length < 2; k++) {
+ for (var j = 0; j < made.length; j++)
+ if (made[j][0] === inside[k] && made[j][1]) pair.push(made[j][1]);
+ }
+ if (pair.length === 2) wireRange(wrappers[i], pair[0], pair[1]);
+ }
+ }
+
+ if (document.readyState === "loading") {
+ document.addEventListener("DOMContentLoaded", function () { scanPage(document); });
+ } else {
+ scanPage(document);
+ }
+ }
+
+ // The pure half, for ui/datetime_node.mjs. A browser has no `module`
+ // and never takes this branch.
+ if (typeof module !== "undefined" && module && module.exports) {
+ module.exports = { parse: parse, tables: tables, displayOptions: displayOptions };
+ }
+})();
diff --git a/internal/fichas/static/rastrillo.js b/internal/fichas/static/rastrillo.js
new file mode 100644
index 0000000..dc4b344
--- /dev/null
+++ b/internal/fichas/static/rastrillo.js
@@ -0,0 +1,337 @@
+/* rastrillo.js — the fragment shim. First-party, dependency-free, and
+ almost entirely inert: the polling section answers only to an opt-in
+ data attribute, and everything it enhances also works with scripts
+ disabled (a status page's <noscript> meta refresh). This file is
+ app-owned from the moment it is scaffolded — edit it like any other
+ static file.
+
+ Two sections are on by default instead, because neither has a
+ per-instance decision to make. Light dismiss for the menu idioms keys
+ off the rst-dropdown / rst-row-menu attributes: a menu that closes on
+ an outside click on one screen and not the next is worse than either
+ rule applied everywhere. The busy rule keys off nothing at all — every
+ submit button in every form that goes somewhere is covered, because
+ a button that changes something should say so while it works, and a
+ form that double-submits on a second click is a bug on every screen.
+ Delete either section to opt the whole app out of it.
+
+ Vocabulary:
+ data-poll="URL" fetch URL for an HTML fragment, replace this
+ element with it, and keep going only if the
+ replacement element itself carries data-poll
+ data-poll-every="2" seconds between polls (default 2)
+ data-poll-push="URL" optional, beside data-poll: open an
+ EventSource to URL and re-fetch the fragment
+ when the server says so, instead of on a
+ timer. Any EventSource error downgrades this
+ element to timer polling for good (once,
+ no flapping); a browser without EventSource
+ never leaves the timer path
+ data-busy="false" on a <form> or on one submit button: opt OUT
+ of the busy rule below. The rule is the
+ default, so any other value — data-busy on
+ its own included — changes nothing
+ data-busy-label="…" on the form or on the button: replacement
+ button text while it works
+
+ select.js is a sibling file following exactly these rules, kept
+ separate so this one stays small enough to read in one sitting. It
+ answers data-rst-select on a <select>, which field-select emits past
+ ten options.
+
+ Every poll carries the request header Rastrillo-Fragment: 1, which
+ marks the request as a shim poll so a handler can tell it apart from
+ direct navigation. Reserved: the framework's own handlers do not
+ read it today.
+
+ Menus: an open <details rst-dropdown>, <details rst-row-menu> or a
+ nested <details rst-menu-group> closes on an outside click and on
+ Escape, in EITHER spelling, so upgrading this file before running
+ `rastrillo markup` leaves no dead menus. Exclusivity stays native.
+
+ A polled response may answer 204 with a Rastrillo-Location header
+ instead of a fragment; the shim navigates there, but only to a local
+ path. 403 and 404 end the poll for good — the job was swept, or was
+ never yours. Any other fetch error backs off (doubling to a 30s cap)
+ and keeps trying — a network blip must not strand a status page. */
+(function () {
+ "use strict";
+
+ // The same rule sessions.SafeReturn enforces server-side: a same-site
+ // absolute path — starts with exactly one "/", no scheme, no
+ // backslash, no control characters (browsers strip tab/CR/LF before
+ // parsing, so "/\t/evil.example" would resolve scheme-relative).
+ // Anything laxer is an open redirect, here driven by a response
+ // header instead of a form field.
+ function localPath(to) {
+ return to.charAt(0) === "/" && to.charAt(1) !== "/" &&
+ to.indexOf("\\") === -1 && !/[\u0000-\u001f\u007f]/.test(to);
+ }
+
+ function poll(el) {
+ var base = (parseFloat(el.getAttribute("data-poll-every")) || 2) * 1000;
+ var wait = base;
+ var src = null; // open EventSource while pushing; null on the timer path
+ var busy = false; // a fetch is in flight
+ var queued = false; // an update landed mid-fetch; tick again after it
+ function stop() {
+ if (src) { src.close(); src = null; }
+ }
+ // One downgrade, never back: push hands this element to the timer.
+ function fallback() {
+ stop();
+ schedule();
+ }
+ function tick() {
+ if (busy) { queued = true; return; }
+ busy = true;
+ fetch(el.getAttribute("data-poll"), { headers: { "Rastrillo-Fragment": "1" } })
+ .then(function (res) {
+ // Terminal, not an error to retry: retrying a 404 forever is
+ // noise, and following a signed-out redirect would swap a
+ // sign-in page into the fragment's slot.
+ if (res.status === 403 || res.status === 404) return null;
+ if (!res.ok && res.status !== 204) throw new Error("status " + res.status);
+ var to = res.headers.get("Rastrillo-Location");
+ if (to) {
+ if (localPath(to)) window.location.assign(to);
+ return null; // navigating, or refusing to — either way, done
+ }
+ return res.text();
+ })
+ .then(function (html) {
+ busy = false;
+ if (html === null) { stop(); return; } // stopped
+ wait = base; // a healthy response resets the backoff
+ var tpl = document.createElement("template");
+ tpl.innerHTML = html;
+ var next = tpl.content.firstElementChild;
+ if (!next) { stop(); return; } // fragment with no element: stop politely
+ el.replaceWith(next);
+ el = next;
+ if (!el.hasAttribute("data-poll")) { stop(); return; }
+ if (!src) { schedule(); return; }
+ // Pushing: a fragment that dropped data-poll-push falls back
+ // to the timer; otherwise catch up if an update was queued.
+ if (!el.hasAttribute("data-poll-push")) { fallback(); return; }
+ if (queued) { queued = false; tick(); }
+ })
+ .catch(function () {
+ busy = false;
+ wait = Math.min(wait * 2, 30000);
+ if (!src) schedule(); // pushing: the next event retries instead
+ });
+ }
+ function schedule() { setTimeout(tick, wait); }
+ var push = el.getAttribute("data-poll-push");
+ if (push && window.EventSource) {
+ src = new EventSource(push);
+ src.addEventListener("update", function () { tick(); });
+ src.addEventListener("done", function () { stop(); tick(); });
+ src.addEventListener("gone", stop);
+ src.onerror = fallback;
+ return;
+ }
+ schedule();
+ }
+
+ // ── The busy rule ────────────────────────────────────────────────
+ //
+ // A button that CHANGES something says so while it works; a button
+ // that only reveals something — a disclosure, a dropdown, a tab —
+ // does not. So every submit button in every form is covered by
+ // default, with no attribute to remember: the submitted button gets
+ // aria-busy, a spinner and — once the submission is under way —
+ // disabled, and its form gets aria-busy and a guard against a second
+ // submit. The data-busy vocabulary above opts out of either half.
+ //
+ // The guard is the substance, the spinner is the manners, and neither
+ // is a promise: with scripts off the form submits exactly as it
+ // always did, twice if the visitor clicks twice. Idempotency stays
+ // the server's job. One delegated capture-phase listener, for the
+ // reasons light dismiss gives below: fragments, and never double-bind.
+ //
+ // Two traps this shape exists to avoid:
+ //
+ // - A form the browser REFUSED must not sit there looking busy.
+ // Constraint validation fails before the submit event is fired at
+ // all, so an invalid form never reaches this code; a cancelled
+ // one is handed back in the tick below. (formnovalidate skips
+ // validation and really does submit, which should look like it.)
+ // - Nothing that could change the payload happens while the payload
+ // is being read. The entry list is built before submit fires, but
+ // engines have differed, so aria-busy, the spinner and a
+ // <button>'s TEXT (never submitted — a button submits its value
+ // attribute) go on synchronously, while disabled and an
+ // <input type="submit">'s value (which IS what it submits) wait.
+ //
+ // Every busy element in the DOCUMENT, then the ownership test: a
+ // form="id" submit button is owned by a form it does not live in.
+ function busyOff(form) {
+ form.removeAttribute("aria-busy");
+ document.querySelectorAll('[aria-busy="true"]').forEach(function (b) {
+ if (b.form !== form && !form.contains(b)) return;
+ b.disabled = false;
+ b.removeAttribute("aria-busy");
+ var spin = b.querySelector("[rst-spin]");
+ if (spin) spin.remove();
+ var idle = b.getAttribute("data-idle-label");
+ if (idle === null) return;
+ if (b.tagName === "INPUT") { b.value = idle; } else { b.textContent = idle; }
+ b.removeAttribute("data-idle-label");
+ });
+ }
+
+ function busySubmit(e) {
+ var form = e.target;
+ if (!form || form.tagName !== "FORM") return;
+ if (form.getAttribute("data-busy") === "false") return;
+ // The button the browser submitted with: the one clicked, or — for
+ // Enter in a field — the default one it implicitly clicked. Only
+ // that one goes busy; every other submit button in the form keeps
+ // its name and its value. An engine with no SubmitEvent.submitter
+ // leaves the buttons alone and keeps the guard, which is the half
+ // that matters.
+ var btn = e.submitter;
+ // A form that opens its result elsewhere, or a submit that closes a
+ // dialog and stays put, has nothing to be busy about and nothing to
+ // clear. The submitter's formmethod beats the form's.
+ //
+ // getAttribute, never the IDL properties. A form is
+ // [LegacyOverrideBuiltIns]: a control named "target" or "method" (a
+ // target date, a method column — ordinary field names) shadows the IDL
+ // attribute with the input itself, so the property form quietly
+ // switches the rule off and hands back the double submit. The busy flag
+ // below is the form's own aria-busy for the same reason: an expando is
+ // shadowable, and under strict mode assigning to a shadowed one throws.
+ var to = form.getAttribute("target");
+ if (to && to !== "_self") return;
+ if (/^dialog$/i.test(btn && btn.getAttribute("formmethod") ||
+ form.getAttribute("method"))) return;
+ if (form.getAttribute("aria-busy") === "true") { e.preventDefault(); return; }
+ form.setAttribute("aria-busy", "true");
+ if (!btn || btn.getAttribute("data-busy") === "false") btn = null;
+ var label = btn && (btn.getAttribute("data-busy-label") ||
+ form.getAttribute("data-busy-label"));
+ if (btn) {
+ btn.setAttribute("aria-busy", "true");
+ if (btn.tagName === "BUTTON") {
+ if (label) {
+ btn.setAttribute("data-idle-label", btn.textContent);
+ btn.textContent = label;
+ }
+ // A child element, not a pseudo-element: the shim has to be
+ // able to take it away again. An <input type="submit"> has no
+ // children, which is the one shape this cannot draw a spinner
+ // on. tokens.css stops it rotating under reduced motion.
+ var spin = document.createElement("span");
+ spin.setAttribute("rst-spin", "");
+ spin.setAttribute("aria-hidden", "true");
+ btn.insertBefore(spin, btn.firstChild);
+ }
+ }
+ setTimeout(function () {
+ // Someone downstream cancelled the submit — an app handler doing
+ // the work itself, most likely. Nothing is on its way anywhere,
+ // so hand the form back, guard included, and let whoever took the
+ // job own the feedback too.
+ if (e.defaultPrevented) { busyOff(form); return; }
+ if (!btn) return;
+ if (label && btn.tagName === "INPUT") {
+ btn.setAttribute("data-idle-label", btn.value);
+ btn.value = label;
+ }
+ btn.disabled = true;
+ }, 0);
+ }
+
+ document.addEventListener("submit", busySubmit, true);
+
+ // Light dismiss — the one behaviour the native disclosure genuinely
+ // cannot do, which is the shim's whole admission rule. A <details>
+ // menu closes on a second click of its own summary and on nothing
+ // else: not on a click elsewhere on the page, not on Escape. Both are
+ // what every menu anywhere else does, and neither is expressible in
+ // HTML or CSS.
+ //
+ // Two delegated listeners on the document, never one per element, so a
+ // dropdown that arrives inside a polled fragment is covered the moment
+ // it lands and re-scanning can never double-bind. Capture phase, so a
+ // page whose own handler stops propagation cannot leave a menu stuck
+ // open.
+ //
+ // The scriptless baseline is untouched: with this file removed, the
+ // menus still toggle and the native <details name> group still keeps
+ // one open at a time.
+ //
+ // The nested rst-menu-group is in MENUS even though it is never in the
+ // <details name> group with its parent — the two mechanisms answer
+ // different questions. The name group decides which menus may be open
+ // at once, and a submenu must be exempt from it or opening one would
+ // close the menu around it. Dismissal is not exclusivity: a submenu
+ // left open behind its closing parent is still open the next time the
+ // parent opens, which is a menu remembering a state the user has no
+ // way to see. Listing it here also gives the natural behaviour of
+ // clicking elsewhere INSIDE the parent closing the submenu — the
+ // contains(except) test below already draws that line for free.
+ //
+ // Shell chrome and the toggle-block are deliberately absent from
+ // MENUS. A sidebar's disclosure strip and a settings switch are not
+ // menus; closing them because a click landed elsewhere would fight the
+ // user rather than help.
+ var MENUS = "[rst-dropdown][open],[rst-menu-group][open],[rst-row-menu][open]";
+ MENUS += "," + MENUS.replace(/\[(rst[-\w]+)\]/g, ".$1");
+
+ // except is the clicked node: the menu containing it stays open, which
+ // is what keeps a click on a menu item — or on the summary of a menu
+ // being opened right now — from closing the thing being used.
+ function closeMenus(except) {
+ document.querySelectorAll(MENUS).forEach(function (d) {
+ if (!except || !d.contains(except)) d.open = false;
+ });
+ }
+
+ function dismissMenus(e) {
+ if (e.type === "click") { closeMenus(e.target); return; }
+ if (e.key !== "Escape") return;
+ // Focus is about to be inside a subtree that is no longer rendered,
+ // which strands a keyboard user at the top of the document. Hand it
+ // back to the summary that opened the menu.
+ var el = document.activeElement;
+ var host = el && el.closest ? el.closest(MENUS) : null;
+ // Climb to the OUTERMOST open menu around the focus. closest() finds
+ // the innermost, which for focus inside a submenu is the submenu —
+ // and its summary is inside the parent that is about to close too, so
+ // focusing it would hand focus to something no longer rendered, which
+ // is no hand-back at all.
+ while (host && host.parentElement && host.parentElement.closest(MENUS)) {
+ host = host.parentElement.closest(MENUS);
+ }
+ closeMenus(null);
+ if (host) {
+ var summary = host.querySelector("summary");
+ if (summary) summary.focus();
+ }
+ }
+
+ document.addEventListener("click", dismissMenus, true);
+ document.addEventListener("keydown", dismissMenus, true);
+
+ function scan() {
+ document.querySelectorAll("[data-poll]").forEach(poll);
+ }
+
+ // The back/forward cache restores a page's DOM exactly as it was left
+ // — busy buttons still disabled, still wearing the busy label and the
+ // spinner — so a visitor who navigates back finds a dead form. Hand
+ // every busy form back.
+ window.addEventListener("pageshow", function (e) {
+ if (e.persisted) document.querySelectorAll("form[aria-busy]").forEach(busyOff);
+ });
+
+ if (document.readyState === "loading") {
+ document.addEventListener("DOMContentLoaded", scan);
+ } else {
+ scan();
+ }
+})();
diff --git a/internal/fichas/static/select.js b/internal/fichas/static/select.js
new file mode 100644
index 0000000..127b501
--- /dev/null
+++ b/internal/fichas/static/select.js
@@ -0,0 +1,280 @@
+/* select.js — the searchable-select enhancement. A sibling of
+ rastrillo.js, following exactly the same rules: first-party,
+ dependency-free, and inert by default. Only a <select> that opts in
+ with data-rst-select gets behavior, and what it enhances works with
+ scripts disabled, because the thing it enhances is a real <select>
+ that never leaves the page.
+
+ It is a separate file rather than more of rastrillo.js so that both
+ stay small enough for an app owner to read in one sitting — the shim
+ holds itself to 8KB and a full ARIA combobox would have doubled it;
+ this one holds itself to 12KB.
+ Both are app-owned from the moment they are scaffolded.
+
+ Vocabulary:
+ data-rst-select on a <select>: mirror a filterable
+ ARIA 1.2 combobox onto it
+ data-rst-select="false" never; stay a native select at any
+ size
+ data-rst-select-filter placeholder for the filter input
+ data-rst-select-results live-region text, {n} substituted
+ data-rst-select-result-one live-region text for exactly one
+
+ ui/partials/field-select.html emits all four past ten options. The
+ strings come from the framework's base catalog (rastrillo.ui.select_*)
+ and ride out on attributes, because this markup is built in the
+ browser where the catalog is out of reach. */
+(function () {
+ "use strict";
+
+// A <select> with too many options to scan by eye becomes a filterable
+// combobox — but the <select> itself never leaves the DOM. It is
+// visually hidden and mirrored, so form submission, required
+// validation, reset and browser autofill all keep working on the
+// element they always did. Nothing here invents state: the select is
+// the single source of truth, and if this function never runs the user
+// gets a perfectly ordinary native select.
+//
+// Strings arrive on data attributes because this markup is built in
+// the browser, after the catalog is out of reach. See
+// rastrillo.ui.select_* in the framework's base catalog.
+function combo(native) {
+ if (native.dataset.rstEnhanced) return; // idempotent: safe to re-scan
+ native.dataset.rstEnhanced = "true";
+
+ // The list mirrors the select's own shape rather than flattening it:
+ // an <optgroup> the author wrote to make a long list readable becomes
+ // a group in the popup, and loose <option> children sit at the top
+ // level as a group with no label. native.options would have been
+ // shorter and would have silently thrown the headings away.
+ var groups = [];
+ Array.prototype.forEach.call(native.children, function (el) {
+ if (el.tagName === "OPTGROUP") {
+ groups.push({ label: el.label, options: Array.prototype.slice.call(el.querySelectorAll("option")) });
+ } else if (el.tagName === "OPTION") {
+ groups.push({ label: "", options: [el] });
+ }
+ });
+ var id = native.id;
+ var listId = id + "-listbox";
+ var filterLabel = native.getAttribute("data-rst-select-filter") || "Type to filter";
+ var manyFmt = native.getAttribute("data-rst-select-results") || "{n} results";
+ var oneFmt = native.getAttribute("data-rst-select-result-one") || "1 result";
+
+ var wrap = document.createElement("div");
+ wrap.setAttribute("rst-combo", "");
+
+ var input = document.createElement("input");
+ input.type = "text";
+ // rst-input and nothing else: rst-combo-input never had a rule, so
+ // the flip dropped it rather than renaming a name into the
+ // vocabulary that styles nothing.
+ input.setAttribute("rst-input", "");
+ input.id = id + "-combo";
+ input.autocomplete = "off";
+ input.setAttribute("role", "combobox");
+ input.setAttribute("aria-expanded", "false");
+ input.setAttribute("aria-controls", listId);
+ input.setAttribute("aria-autocomplete", "list");
+ input.setAttribute("placeholder", filterLabel);
+
+ var list = document.createElement("ul");
+ list.setAttribute("rst-combo-list", "");
+ list.id = listId;
+ list.setAttribute("role", "listbox");
+ list.hidden = true;
+
+ var status = document.createElement("p");
+ status.className = "rst-sr-only";
+ status.setAttribute("role", "status");
+ status.setAttribute("aria-live", "polite");
+
+ native.parentNode.insertBefore(wrap, native);
+ wrap.appendChild(input);
+ wrap.appendChild(list);
+ wrap.appendChild(status);
+
+ // The label named the select; it now names the control the user
+ // actually types into. Without this the combobox has no accessible
+ // name at all.
+ var label = native.id && document.querySelector('label[for="' + native.id + '"]');
+ if (label) label.setAttribute("for", input.id);
+ // Drop [rst-input] too: both are single class selectors, so its
+ // width:100% wins on source order and would leave the hidden select a
+ // full-width box held out of sight by clip-path alone.
+ native.removeAttribute("rst-input");
+ native.classList.add("rst-sr-only");
+ native.setAttribute("tabindex", "-1");
+ native.setAttribute("aria-hidden", "true");
+
+ var shown = [];
+ var active = -1;
+
+ function chosenLabel() {
+ var o = native.options[native.selectedIndex];
+ return o && o.value !== "" ? o.text : "";
+ }
+ input.value = chosenLabel();
+
+ function close() {
+ list.hidden = true;
+ input.setAttribute("aria-expanded", "false");
+ input.removeAttribute("aria-activedescendant");
+ active = -1;
+ }
+
+ function commit(option) {
+ native.value = option.value;
+ input.value = option.text;
+ // Mirror onto the real control, so a listener the app attached to
+ // the select still fires.
+ native.dispatchEvent(new Event("change", { bubbles: true }));
+ close();
+ }
+
+ // One pickable row. Its index is its position in `shown`, which is
+ // the keyboard order — headings never enter it, so arrowing down
+ // steps option to option straight across a group boundary.
+ function row(o) {
+ var li = document.createElement("li");
+ li.id = listId + "-" + shown.length;
+ li.setAttribute("rst-combo-option", "");
+ li.setAttribute("role", "option");
+ li.setAttribute("aria-selected", o.value === native.value ? "true" : "false");
+ li.textContent = o.text;
+ li.addEventListener("mousedown", function (e) {
+ e.preventDefault(); // keep focus; blur would undo the pick
+ commit(o);
+ });
+ shown.push(o);
+ return li;
+ }
+
+ function draw(filter) {
+ var needle = filter.trim().toLowerCase();
+ shown = [];
+ list.innerHTML = "";
+ groups.forEach(function (g) {
+ var matched = g.options.filter(function (o) {
+ return o.value !== "" && o.text.toLowerCase().indexOf(needle) !== -1;
+ });
+ // A group filtered down to nothing takes its heading with it: a
+ // heading over no rows is a lie about what is there.
+ if (!matched.length) return;
+ var into = list;
+ if (g.label) {
+ // The group's name lives on aria-label, so the heading itself is
+ // furniture — hidden from the accessibility tree, out of the
+ // keyboard order, announced once as the group it names.
+ var box = document.createElement("li");
+ box.setAttribute("role", "group");
+ box.setAttribute("aria-label", g.label);
+ // <li> cannot hold <li>, so the rows nest in a list of their
+ // own; role=none keeps it out of the accessibility tree, which
+ // leaves the options owned by the group.
+ into = document.createElement("ul");
+ into.setAttribute("rst-combo-rows", "");
+ into.setAttribute("role", "none");
+ var head = document.createElement("li");
+ head.setAttribute("rst-select-group", "");
+ head.setAttribute("aria-hidden", "true");
+ head.textContent = g.label;
+ into.appendChild(head);
+ box.appendChild(into);
+ list.appendChild(box);
+ }
+ matched.forEach(function (o) { into.appendChild(row(o)); });
+ });
+ list.hidden = shown.length === 0;
+ input.setAttribute("aria-expanded", shown.length ? "true" : "false");
+ status.textContent = shown.length === 1
+ ? oneFmt
+ : manyFmt.replace("{n}", String(shown.length));
+ active = -1;
+ input.removeAttribute("aria-activedescendant");
+ }
+
+ function move(delta) {
+ if (list.hidden) draw(input.value);
+ if (!shown.length) return;
+ active = (active + delta + shown.length) % shown.length;
+ // The rows, not list.children: a grouped list's children are the
+ // groups, and the headings inside them are not stops.
+ list.querySelectorAll('[role="option"]').forEach(function (li, i) {
+ li.classList.toggle("is-active", i === active);
+ });
+ input.setAttribute("aria-activedescendant", listId + "-" + active);
+ }
+
+ input.addEventListener("input", function () { draw(input.value); });
+ input.addEventListener("focus", function () {
+ // Select the committed label so the first keystroke replaces it.
+ // Otherwise typing into a box holding "Option 1" filters for
+ // "Option 1Option 12" and silently matches nothing.
+ input.select();
+ draw("");
+ });
+ input.addEventListener("blur", function () {
+ // A half-typed filter is not a value: restore what is committed.
+ window.setTimeout(function () { input.value = chosenLabel(); close(); }, 0);
+ });
+ input.addEventListener("keydown", function (e) {
+ switch (e.key) {
+ case "ArrowDown": e.preventDefault(); move(1); break;
+ case "ArrowUp": e.preventDefault(); move(-1); break;
+ case "Home": if (!list.hidden) { e.preventDefault(); active = -1; move(1); } break;
+ case "End": if (!list.hidden) { e.preventDefault(); active = shown.length - 1; move(0); } break;
+ case "Enter":
+ // Enter acts on the filter, never on the form: submitting
+ // mid-filter discards the edit and silently keeps the previous
+ // selection. Take the highlight, or the only match, or close.
+ e.preventDefault();
+ if (active >= 0) {
+ commit(shown[active]);
+ } else if (shown.length === 1) {
+ commit(shown[0]);
+ } else {
+ close();
+ }
+ break;
+ case "Escape": e.preventDefault(); close(); input.value = chosenLabel(); break;
+ }
+ });
+
+ // The same guard datetime.js carries, where the long version of this
+ // note lives. Enter belongs to the combobox, never to the form: a
+ // commit that also submits posts whatever the select held before the
+ // user chose. On a key a person presses, the keydown handler's
+ // preventDefault settles it — the engine derives the keypress from
+ // the keydown it just cancelled. On a SYNTHESISED key it does not:
+ // CDP, and every browser drive built on it, can deliver the keydown
+ // and the character as two independent events, so the second arrives
+ // with no memory of the first one's refusal, carrying the \r that
+ // implicit form submission listens for. Measured, not guessed (issue
+ // #86): without this line the select drive fired a submit on every
+ // run and passed only by outrunning the navigation.
+ input.addEventListener("keypress", function (e) {
+ if (e.key === "Enter") e.preventDefault();
+ });
+}
+
+// Idempotent, so re-scanning is safe if a future change re-scans after
+// the shim swaps in a polled fragment. Today nothing does: a select
+// arriving inside a replacement stays native — correct, not enhanced.
+function scan() {
+ document.querySelectorAll("select[data-rst-select]").forEach(function (el) {
+ // data-rst-select="false" is the markup-side opt-out: a select that
+ // says no stays native at any size. It has to be checked rather
+ // than selected against, because to CSS the attribute is simply
+ // present. field-select opts out the other way, by never emitting
+ // the attribute at all; this is for markup written by hand.
+ if (el.dataset.rstSelect !== "false") combo(el);
+ });
+}
+
+if (document.readyState === "loading") {
+ document.addEventListener("DOMContentLoaded", scan);
+} else {
+ scan();
+}
+})();
diff --git a/internal/fichas/static/theme.css b/internal/fichas/static/theme.css
new file mode 100644
index 0000000..5da4384
--- /dev/null
+++ b/internal/fichas/static/theme.css
@@ -0,0 +1,187 @@
+/* day — rastrillo's default theme: an everyday blue on white and grey.
+ Structure lives in tokens.css; this file is colour, type and shape.
+ rastrillo new writes it once as static/theme.css.
+
+ The look: the ordinary, personable interface. A white page, a plain
+ grey text scale, one friendly blue that means "this does something",
+ and the conventional green/amber/red for status. Nothing here is
+ trying to be memorable — day is the theme an app ships on while it
+ works out what it wants to look like, and the one that never gets in
+ the way of the content. Semantic status colours are functional and
+ never the accent, so a pill can never be mistaken for a link.
+
+ ── One block, both schemes ───────────────────────────────────────────
+ Every token is declared once, as light-dark(<light>, <dark>), under a
+ single :root that sets color-scheme: light dark. The browser picks the
+ half that matches the resolved scheme, so there is no second copy of
+ the palette to keep in sync and no way to author dark half-done. The
+ two rules at the bottom are the whole toggle: setting color-scheme on
+ :root[data-theme=…] re-resolves every light-dark() in the file at
+ once, in both directions, which is why an explicit choice beats the OS
+ without restating a single colour.
+
+ Tokens with one value in both schemes — the font stack, the radii —
+ are written plain, because light-dark(x, x) says nothing twice.
+
+ light-dark() is a colour function: it may only stand where a <color>
+ is expected. So a shadow token wraps its colour in it and writes the
+ geometry once, outside the call — `0 8px 24px light-dark(a, b)`, never
+ `light-dark(0 8px 24px a, …)`, which no browser would accept as a
+ box-shadow.
+
+ ── The shape axis ────────────────────────────────────────────────────
+ Radius and shadow are the theme's now, not tokens.css's: a theme that
+ can only change colour cannot change how an app feels. day is soft and
+ unremarkable — 8px cards, 6px controls, shadows with a wide blur and
+ little alpha, the depth of paper resting on paper.
+
+ ── WCAG 2.2 AA, measured ─────────────────────────────────────────────
+ Normal text needs 4.5:1; large text and UI component boundaries need
+ 3:1. Every pair below was computed from these exact hex values, in
+ both schemes. If you change a token, recompute its rows.
+
+ LIGHT ratio requirement
+ --rst-text on --rst-surface 16.91 4.5:1 text
+ --rst-text on --rst-bg 16.91 4.5:1 text
+ --rst-text on --rst-surface-2 15.77 4.5:1 text
+ --rst-text on --rst-accent-soft 15.21 4.5:1 text
+ --rst-text-muted on --rst-surface 7.56 4.5:1 text
+ --rst-text-muted on --rst-bg 7.56 4.5:1 text
+ --rst-text-muted on --rst-surface-2 7.05 4.5:1 text
+ --rst-text-muted on --rst-accent-soft 6.80 4.5:1 text
+ --rst-text-faint on --rst-surface 5.29 4.5:1 text
+ --rst-text-faint on --rst-bg 5.29 4.5:1 text
+ --rst-text-faint on --rst-surface-2 4.93 4.5:1 text
+ --rst-text-faint on --rst-accent-soft 4.76 4.5:1 text
+ --rst-accent on --rst-surface 5.28 4.5:1 text + focus ring
+ --rst-accent on --rst-bg 5.28 4.5:1 text + focus ring
+ --rst-accent on --rst-surface-2 4.93 4.5:1 text
+ --rst-accent on --rst-accent-soft 4.75 4.5:1 text
+ --rst-on-accent on --rst-accent 5.28 4.5:1 button label
+ --rst-on-accent on --rst-accent-strong 7.18 4.5:1 button label, hover
+ --rst-line-strong on --rst-surface 3.63 3:1 control border
+ --rst-line-strong on --rst-bg 3.63 3:1 control border
+ --rst-line-strong on --rst-surface-2 3.39 3:1 control border
+ pill neutral fg on its own tint 9.02 4.5:1 text
+ pill positive fg on its own tint 6.49 4.5:1 text
+ pill warning fg on its own tint 6.15 4.5:1 text
+ pill negative fg on its own tint 5.30 4.5:1 text
+ --rst-on-accent on negative fg (fill) 6.47 4.5:1 danger button label
+
+ DARK ratio requirement
+ --rst-text on --rst-surface 13.74 4.5:1 text
+ --rst-text on --rst-bg 15.32 4.5:1 text
+ --rst-text on --rst-surface-2 14.63 4.5:1 text
+ --rst-text on --rst-accent-soft 13.02 4.5:1 text
+ --rst-text-muted on --rst-surface 7.56 4.5:1 text
+ --rst-text-muted on --rst-bg 8.43 4.5:1 text
+ --rst-text-muted on --rst-surface-2 8.05 4.5:1 text
+ --rst-text-muted on --rst-accent-soft 7.16 4.5:1 text
+ --rst-text-faint on --rst-surface 6.33 4.5:1 text
+ --rst-text-faint on --rst-bg 7.06 4.5:1 text
+ --rst-text-faint on --rst-surface-2 6.74 4.5:1 text
+ --rst-text-faint on --rst-accent-soft 6.00 4.5:1 text
+ --rst-accent on --rst-surface 6.95 4.5:1 text + focus ring
+ --rst-accent on --rst-bg 7.75 4.5:1 text + focus ring
+ --rst-accent on --rst-surface-2 7.40 4.5:1 text
+ --rst-accent on --rst-accent-soft 6.59 4.5:1 text
+ --rst-on-accent on --rst-accent 7.86 4.5:1 button label
+ --rst-on-accent on --rst-accent-strong 10.29 4.5:1 button label, hover
+ --rst-line-strong on --rst-surface 4.26 3:1 control border
+ --rst-line-strong on --rst-bg 4.75 3:1 control border
+ --rst-line-strong on --rst-surface-2 4.53 3:1 control border
+ pill neutral fg on its own tint 8.44 4.5:1 text
+ pill positive fg on its own tint 10.18 4.5:1 text
+ pill warning fg on its own tint 9.62 4.5:1 text
+ pill negative fg on its own tint 7.85 4.5:1 text
+ --rst-on-accent on negative fg (fill) 8.99 4.5:1 danger button label
+
+ The tightest pair in the set is --rst-accent on --rst-accent-soft in
+ light, at 4.75:1 against a 4.5:1 floor. Put a token on a surface not
+ listed above and you are guessing; recompute first.
+
+ --rst-line is a hairline divider between rows, not a control border or
+ a meaningful graphic, so 1.4.11's 3:1 does not apply to it. Control
+ borders use --rst-line-strong, which does clear 3:1.
+
+ --rst-header-rule is not in the table either, and deliberately so
+ (design doc §6-v2.2): the page header's rule is decoration, not
+ structure — the heading's size, weight and spacing carry the
+ structure — so no contrast floor applies to it and it is not in
+ ui/contrast_test.go's pair table. Do not argue it up to 3:1.
+
+ Pagination chips are the one deliberate exception: they are bordered
+ with --rst-line rather than --rst-line-strong, because a page strip
+ ringed in hard outlines shouts louder than the list it belongs to.
+ 1.4.11 is satisfied without that border — each chip's meaning is
+ carried by its text label at 4.5:1 or better, and the current page
+ adds a filled background, a heavier weight and aria-current on top.
+
+ --rst-shadow-pop, --rst-shadow-knob, --rst-shadow-lift and
+ --rst-overlay are not in the table: they paint a translucent shadow or
+ scrim over whatever sits underneath, not text over a fixed
+ background, so a contrast ratio does not apply. The scrim deepens in
+ dark, matching --rst-shadow-pop's own jump: black reads lighter
+ against a dark backdrop, so the overlay needs more alpha to still
+ read as a dimming layer.
+ ──────────────────────────────────────────────────────────────────── */
+
+:root {
+ color-scheme: light dark;
+
+ /* Type: the family only. Sizes and spacing are structural and stay in
+ tokens.css. */
+ --rst-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+ /* Shape: soft, ordinary, unremarkable. */
+ --rst-radius: 8px;
+ --rst-radius-sm: 6px;
+ --rst-radius-pill: 999px;
+
+ /* Surfaces and lines */
+ --rst-bg: light-dark(#ffffff, #111418);
+ --rst-surface: light-dark(#ffffff, #1a1f26);
+ --rst-surface-2: light-dark(#f6f7f8, #15191f);
+ --rst-line: light-dark(#e5e7eb, #2a3038);
+ --rst-line-strong: light-dark(#7f8792, #79828e);
+
+ /* The page header's rule, derived rather than authored: the accent
+ folded into the line at 18%, so a theme that changes its accent
+ gets a matching rule with no second value to keep in step. day's
+ is barely there — a hairline you would call grey until you put it
+ beside plain's. Decorative: it carries no contrast floor. */
+ --rst-header-rule: color-mix(in oklab, var(--rst-accent) 18%, var(--rst-line));
+
+ /* Text */
+ --rst-text: light-dark(#1a1d21, #e8eaed);
+ --rst-text-muted: light-dark(#4b5563, #a8b0ba);
+ --rst-text-faint: light-dark(#656c78, #98a1ac);
+
+ /* Accent */
+ --rst-accent: light-dark(#2464e0, #7ba7ff);
+ --rst-accent-strong: light-dark(#1a4fc0, #a3c0ff);
+ --rst-accent-soft: light-dark(#eef3fe, #17233a);
+ --rst-on-accent: light-dark(#ffffff, #0b1220);
+
+ /* Status tones */
+ --rst-tone-neutral-fg: light-dark(#374151, #c3c9d1);
+ --rst-tone-neutral-bg: light-dark(#eef0f2, #262c34);
+ --rst-tone-positive-fg: light-dark(#166534, #6ee7a8);
+ --rst-tone-positive-bg: light-dark(#dcfce7, #10281c);
+ --rst-tone-warning-fg: light-dark(#854d0e, #f0c46a);
+ --rst-tone-warning-bg: light-dark(#fef3c7, #2c2110);
+ --rst-tone-negative-fg: light-dark(#b91c1c, #f79aa0);
+ --rst-tone-negative-bg: light-dark(#fee2e2, #331819);
+
+ /* Depth */
+ --rst-shadow-pop: 0 8px 24px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.5));
+ --rst-shadow-knob: 0 1px 2px rgba(0, 0, 0, 0.3);
+ --rst-shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.08);
+ --rst-overlay: light-dark(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.6));
+}
+
+/* The whole toggle. Setting color-scheme re-resolves every light-dark()
+ above, so an explicit choice beats the OS in both directions without
+ restating a colour. */
+:root[data-theme="light"] { color-scheme: light; }
+:root[data-theme="dark"] { color-scheme: dark; }
diff --git a/internal/fichas/static/tokens.css b/internal/fichas/static/tokens.css
new file mode 100644
index 0000000..16a8809
--- /dev/null
+++ b/internal/fichas/static/tokens.css
@@ -0,0 +1,1664 @@
+/* rastrillo/ui — design tokens and the component classes the shipped
+ partials use (see ui_test.go's TestAllPartialsAreDefined for the
+ current, authoritative list — deliberately not counted here, so this
+ comment cannot go stale as the set grows).
+
+ rastrillo new writes this file once into your app's static/ directory.
+ From then on it is yours: edit it, replace it, delete rules you do not
+ want. Nothing regenerates it, and rastrillo.Serve never serves it —
+ your app's own static handler does.
+
+ Every class, attribute and custom property is prefixed rst- — except
+ the single .icon rule, which styles the class rastrillo.Icon emits —
+ so dropping this file into an app with existing CSS has exactly one
+ known collision surface. There are no imports, no remote assets and no webfont:
+ this stylesheet fetches nothing, from anywhere, ever. That is a test,
+ not a wish (ui_test.go, TestTokensCSSIsSelfContained) — which is also
+ why this comment cannot spell those constructs out literally.
+
+ TWO SPELLINGS, ON PURPOSE, FOR ONE RELEASE. Every component rule
+ below names its class and its attribute twin: `.rst-btn, [rst-btn]`,
+ `.rst-btn--primary, [rst-btn~="primary"]`, `.rst-callout__body,
+ [rst-callout-body]`. The attribute spelling is the vocabulary this
+ library is moving to (design spec §6-v3); the class spelling is what
+ every app and every shipped partial writes today. Pairing them here
+ first is what makes the move non-breaking in both directions — this
+ file is written into your static/ once and frozen there, while the
+ partials upgrade with the module, so an app that has not refreshed
+ its copy must keep styling either way.
+
+ The grammar, so a rule you add follows it: the KIND is a bare
+ attribute; a VARIANT is a token in that attribute's value, matched
+ with ~= so `rst-btn="primary compact"` composes the way a class list
+ does; a PART is its own flat attribute (`rst-callout-body`), never a
+ value — the value slot means variant on every attribute or the
+ grammar is unreadable; and rst-tone carries the four tones that
+ data-tone carries today. Both members of a pair weigh exactly the
+ same: a class and an attribute selector are both (0,1,0), so pairing
+ changes no cascade anywhere. ui_test.go's
+ TestEveryClassSelectorHasAnAttributeTwin holds all of that, including
+ the specificity, and the browser drive proves the two spellings
+ compute identical styles.
+
+ Utilities keep the class spelling and are not paired:
+ rst-sr-only, rst-mono, rst-m-hide, rst-grow, rst-nm, rst-danger,
+ rst-cell-mut. They are not kinds — they are cross-cutting styling,
+ which is what class is for, and they stay class after the move.
+
+ Colour, the type family and shape are not here: they live in
+ themes/day.css (or whichever theme was scaffolded), which rastrillo new
+ writes beside this file as static/theme.css. This file is structure —
+ layout, spacing, the type scale, and the component classes, every one
+ of them painted with var(--rst-*). Swap the theme file and the app
+ changes palette, corner and depth; nothing here is touched.
+
+ Radius and shadow used to live in the scale block below. They moved to
+ the themes in v2, because a theme that can only change colour cannot
+ change how an app feels: day is soft (8px/6px, wide low-alpha
+ shadows), plain is nearly square (4px/3px, one hairline layer) and
+ signal is milled (4px/2px, short dense shadows). tokens.css still
+ paints with var(--rst-radius*) and var(--rst-shadow-*) everywhere; it
+ just no longer decides what they are.
+
+ Padding values are load-bearing for SC 2.5.8 Target Size (AA, new in
+ WCAG 2.2): pagination chips measure about 30px, row action pills
+ about 27px and buttons about 34px on their smaller axis, all clear of
+ the 24px minimum. Do not shrink them without re-measuring.
+
+ Type sizes are rem, not px, so the whole scale tracks a reader who has
+ raised their browser's default font size. Spacing is rem for the same
+ reason. Anything you add here should follow suit.
+ ──────────────────────────────────────────────────────────────────── */
+
+/* ── Scale: type and spacing. Theme-independent. Radius is not here —
+ it is part of the theme's shape axis; see themes/. ────────────── */
+:root {
+ --rst-fs-base: 0.875rem; /* 14px at the browser default */
+ --rst-fs-sm: 0.78125rem; /* 12.5px */
+ --rst-fs-xs: 0.71875rem; /* 11.5px */
+
+ --rst-sp-1: 0.25rem;
+ --rst-sp-2: 0.5rem;
+ --rst-sp-3: 0.75rem;
+ --rst-sp-4: 1rem;
+ --rst-sp-5: 1.5rem;
+ --rst-sp-6: 2.5rem;
+
+ /* The scrollbar's gutter, reserved whether or not there is a
+ scrollbar in it, so a short page and a long one are the same width
+ and clicking between them does not slide the layout sideways.
+
+ A token rather than a class for three reasons: the opt-out is one
+ line in your own stylesheet (--rst-scrollbar-gutter: auto), it
+ layers like every other token, and custom properties are untouched
+ by the markup migration, so this survives it without an edit.
+
+ What it costs, chosen knowingly: a page too short to scroll now
+ reserves the strip as well, so there is a thin empty band at the
+ trailing edge where there was none. That is the price of never
+ shifting. both-edges would double the band to keep centred content
+ exactly centred, and was not taken: this system's pages are already
+ a max-width column inside a wider ground, so the asymmetry does not
+ land where it would be seen.
+
+ Do not over-claim what it fixes. macOS overlay scrollbars take no
+ layout space at all, so on a default Mac there was never anything
+ to shift. This is real on Windows and Linux, on a Mac set to
+ "always show scrollbars", and inside the design gallery's own
+ preview iframes. Chrome 94+, Firefox 97+, Safari 18.2+; an older
+ engine ignores the declaration and lands on the behaviour it has
+ today. */
+ --rst-scrollbar-gutter: stable;
+}
+
+/* ── Base. Three rules, so a freshly scaffolded app looks finished
+ before it has any CSS of its own. Delete them if your app owns
+ its own base styles. ──────────────────────────────────────────── */
+/* The gutter is declared on the root element, which is where the
+ viewport's scrollbar lives. It also fixes a second instance of the
+ same bug that nobody had attributed to the scrollbar: the modal's
+ scroll lock below (body:has(.rst-backdrop) { overflow: hidden })
+ takes the scrollbar away the instant a modal opens, and without a
+ reserved gutter the whole page slides sideways while the reader
+ watches. One declaration, both cases. */
+html {
+ scrollbar-gutter: var(--rst-scrollbar-gutter);
+}
+
+body {
+ margin: 0;
+ background: var(--rst-bg);
+ color: var(--rst-text);
+ font-family: var(--rst-font);
+ font-size: var(--rst-fs-base);
+ line-height: 1.5;
+}
+
+/* The content column every screen sits in. Your page markup emits this;
+ no partial does. 64rem, widened from 52rem after the v2 page went
+ live: 52rem is a reading measure, and this column holds list grids
+ and side-by-side form fields, which a reading measure squeezes. */
+.rst-page, [rst-page] {
+ box-sizing: border-box;
+ margin: 0 auto;
+ max-width: 64rem;
+ padding: var(--rst-sp-5) var(--rst-sp-4) var(--rst-sp-6);
+}
+
+/* rastrillo.Icon emits class="icon" with no width or height, so the icon
+ sizes from here and tracks the text beside it. */
+.icon {
+ block-size: 1em;
+ flex: none;
+ inline-size: 1em;
+}
+
+/* Focus is visible everywhere inside the app column (.rst-page) and
+ inside any component rendered outside one. :where() contributes no
+ specificity, so any rule below can override it. */
+:where(.rst-page, .rst-page-header, .rst-list, .rst-lbar, .rst-search, .rst-empty, .rst-pagination) :focus-visible, :where([rst-page], [rst-page-header], [rst-list], [rst-lbar], [rst-search], [rst-empty], [rst-pagination]) :focus-visible {
+ outline: 2px solid var(--rst-accent);
+ outline-offset: 2px;
+}
+
+
+/* ── Buttons: page-header's primary action, empty-state's CTA. ────── */
+.rst-btn, [rst-btn] {
+ align-items: center;
+ background: var(--rst-surface);
+ border: 1px solid var(--rst-line-strong);
+ border-radius: var(--rst-radius-sm);
+ color: var(--rst-text);
+ cursor: pointer;
+ display: inline-flex;
+ font-family: inherit;
+ font-size: var(--rst-fs-sm);
+ font-weight: 600;
+ gap: var(--rst-sp-2);
+ line-height: 1.4;
+ padding: 0.45rem 0.75rem;
+ text-decoration: none;
+}
+.rst-btn:hover, [rst-btn]:hover {
+ border-color: var(--rst-accent);
+ color: var(--rst-accent);
+}
+.rst-btn--primary, [rst-btn~="primary"] {
+ background: var(--rst-accent);
+ border-color: var(--rst-accent);
+ color: var(--rst-on-accent);
+}
+.rst-btn--primary:hover, [rst-btn~="primary"]:hover {
+ background: var(--rst-accent-strong);
+ border-color: var(--rst-accent-strong);
+ color: var(--rst-on-accent);
+}
+
+/* ghost — a quiet Cancel beside a primary/danger action: no fill, a
+ muted label, and it darkens toward the ordinary text colour on hover
+ rather than picking up the accent (the accent means "this navigates
+ somewhere new"; a ghost Cancel does not). */
+.rst-btn--ghost, [rst-btn~="ghost"] {
+ background: transparent;
+ color: var(--rst-text-muted);
+}
+.rst-btn--ghost:hover, [rst-btn~="ghost"]:hover {
+ border-color: var(--rst-line-strong);
+ color: var(--rst-text);
+}
+
+/* danger — a solid fill for a destructive submit (confirm-form,
+ bulk-bar's actions menu). --rst-tone-negative-fg already clears
+ 4.5:1 as a filled background against --rst-on-accent's label colour
+ in both themes, so no new custom properties are needed — computed
+ with the same WCAG relative-luminance formula as each theme file's
+ own contrast table (day's values, shown; every theme's own pair is
+ gated the same way, in both schemes):
+ light --rst-on-accent (#ffffff) on --rst-tone-negative-fg (#b91c1c) 6.47:1
+ dark --rst-on-accent (#0b1220) on --rst-tone-negative-fg (#f79aa0) 8.99:1
+ Hover darkens via filter rather than a themed "negative-strong"
+ token: brightness() scales every channel of the already-themed fill
+ (and, being a post-paint filter, the label too), so one rule works
+ in both themes without a new pair of colours to maintain. Re-checked
+ with the label included in the scaled result, both still clear
+ 4.5:1 by a wide margin (day's values again; a post-paint filter
+ result, so these two rows are illustrative rather than gated):
+ light 0.9× fill (#a61919) vs 0.9× label (#e6e6e6) 6.06:1
+ dark 0.9× fill (#de8a90) vs 0.9× label (#0a101c) 7.38:1
+ background/border-color/color are restated on :hover, matching
+ .rst-btn--primary:hover's pattern exactly — .rst-btn:hover (same
+ 0,2,0 specificity, an earlier rule) sets border-color/color to the
+ accent, and a filter-only :hover rule wins nothing for properties it
+ never declares, so without this restatement the label silently
+ cascades to accent-on-red (~1.05:1) at the exact moment a user
+ commits to a destructive action. */
+.rst-btn--danger, [rst-btn~="danger"] {
+ background: var(--rst-tone-negative-fg);
+ border-color: var(--rst-tone-negative-fg);
+ color: var(--rst-on-accent);
+}
+.rst-btn--danger:hover, [rst-btn~="danger"]:hover {
+ background: var(--rst-tone-negative-fg);
+ border-color: var(--rst-tone-negative-fg);
+ color: var(--rst-on-accent);
+ filter: brightness(0.9);
+}
+
+/* busy — the loading state rastrillo.js gives every submit button on
+ its way out, and the one state of a button that is not a variant:
+ any .rst-btn can wear it. The spinner is a real child element
+ (.rst-spin, further down) rather than a pseudo-element, because the
+ shim adds and removes it; .rst-btn's own `gap` spaces it from the
+ label, so there is no margin here to keep in step with the padding.
+ :disabled arrives a tick later, once the submission is under way —
+ the two are styled together so the button does not change twice.
+ Nothing here animates, so prefers-reduced-motion has nothing to say
+ to it: .rst-spin already stops rotating under that query. */
+.rst-btn[aria-busy="true"], [rst-btn][aria-busy="true"], .rst-btn:disabled, [rst-btn]:disabled {
+ cursor: default;
+}
+/* Dimmed, but not much. A disabled control is "incidental" under WCAG
+ 1.4.3 and exempt from the contrast minimum, and this one is disabled
+ for a second — so the dimming is a hint that the button is not
+ listening, not a licence to make the label hard to read while
+ someone is waiting on it. */
+.rst-btn:disabled, [rst-btn]:disabled {
+ opacity: 0.8;
+}
+/* The ring must not be squeezed by a long label, and must not stretch
+ with the button's align-items: center default.
+
+ Placed by shape rather than by a name of its own: the busy spinner is
+ the shim's rst-spin child of an rst-btn, and there is nothing else it
+ could be. rst-btn__spin was the second name for one thing, and the
+ grammar of §6-v3 is explicit that a part is styled structurally where
+ structure says it. The shim now writes one attribute. */
+.rst-btn > .rst-spin, [rst-btn] > [rst-spin] {
+ align-self: center;
+ flex: none;
+}
+
+/* ── page-header ──────────────────────────────────────────────────── */
+.rst-page-header, [rst-page-header] {
+ align-items: baseline;
+ border-bottom: 1px solid var(--rst-header-rule);
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--rst-sp-3);
+ justify-content: space-between;
+ margin: 0 0 var(--rst-sp-5);
+ padding-bottom: var(--rst-sp-3);
+ position: relative;
+}
+/* The rake line is retired (design doc §6-v2.2). It drew a 2.5rem
+ accent stroke over this rule, flush to the inline start — the
+ library's one flourish, and, built from the same parts in the same
+ order, indistinguishable from a determinate progress bar at 12%. The
+ rule itself carries the theme now: --rst-header-rule is derived from
+ the theme's accent and line, so plain draws grey, day draws a barely
+ tinted hairline and signal a visibly tinted one, and an app that
+ wants its own sets one custom property instead of fighting an
+ ::after it cannot remove.
+
+ The declaration stays, rather than the rule being deleted, because a
+ stylesheet that merely stops mentioning the stroke says nothing to
+ the next reader; this says the stroke is gone on purpose. It also
+ neutralises a vendored theme or app sheet that still carries the old
+ flourish at a lower specificity.
+
+ THE RULE IS DECORATIVE AND CARRIES NO CONTRAST FLOOR. The heading's
+ size, weight and spacing carry the structure; the rule does not. It
+ is deliberately absent from ui/contrast_test.go's pair table, and a
+ later pass must not argue it up to 1.4.11's 3:1 — that floor was
+ never its. See ui/contrast_test.go's colorMixSkip comment.
+
+ position: relative stays: it is the containing block anything an app
+ absolutely positions inside its own header expects to find, and
+ removing it would move those elements rather than tidy the file. */
+.rst-page-header::after, [rst-page-header]::after {
+ content: none;
+}
+.rst-page-header__titles, [rst-page-header-titles] {
+ flex: 1 1 auto;
+ min-inline-size: 0;
+}
+.rst-page-header h1, [rst-page-header] h1 {
+ color: var(--rst-text);
+ font-size: 1.375rem;
+ font-weight: 600;
+ letter-spacing: -0.015em;
+ line-height: 1.25;
+ margin: 0;
+}
+.rst-page-header__sub, [rst-page-header-sub] {
+ color: var(--rst-text-muted);
+ font-size: var(--rst-fs-sm);
+ margin: var(--rst-sp-1) 0 0;
+ max-inline-size: 44rem;
+}
+
+/* ── The list card, its toolbar, and its search field ─────────────── */
+/* No padding here, on purpose: a list card holds rows, and each row pads
+ itself. A form, prose or a strip of links does NOT go in here — it
+ goes in .rst-box, the padded section card. Text touching the border
+ is the sign that content landed in the wrong card. */
+.rst-list, [rst-list] {
+ background: var(--rst-surface);
+ border: 1px solid var(--rst-line);
+ border-radius: var(--rst-radius);
+}
+
+/* Why there is no `overflow: hidden` here, since the obvious way to
+ clip rows to a rounded card is exactly that, and it IS what this rule
+ used to be.
+ A card that clips is a clipping context for everything absolutely
+ positioned inside it — so a bulk bar's Actions menu, or a row kebab's
+ panel, was sliced off at the card's edge the moment it opened. That
+ is any card holding a menu, not one instance of it, so the fix is
+ here rather than at the bulk bar.
+ `overflow: clip` is the same trap: it clips too. `overflow-clip-margin`
+ would push the clip box outward, but it pushes it outward on every
+ side and past the border radius — which is the corner clipping this
+ whole rule exists to do. So the card stops clipping and the rows round
+ THEMSELVES: the first full-bleed child takes the card's start corners,
+ the last takes its end corners, one step in for the 1px border. A
+ card's own rows (.rst-row, .rst-lrow, .rst-lbar, .rst-bulkbar) declare
+ no radius, which is what makes them full-bleed in the first place.
+
+ Both selectors are wrapped in :where() to weigh NOTHING — (0,0,0),
+ not the (0,2,0) a bare `.rst-list > :first-child` would carry. That is
+ the whole mechanism by which a child that owns its own shape keeps it:
+ a bare <form rst-search> or a .rst-empty as the direct first
+ or last child of a card declares its radius at (0,1,0) and therefore
+ wins, and so does any app class doing the same. Source order does NOT
+ decide this and cannot be relied on to — an earlier draft of this
+ comment said it did, and both those children painted lopsided corners
+ (7px over 6px in day) because (0,2,0) beat (0,1,0) whatever the order.
+ :where() rather than a :not(.rst-search, .rst-empty) exception list
+ because the list would need extending for every self-shaped child an
+ app or a later partial invents, and the thing being expressed is not
+ "except these two" but "unless the child says otherwise".
+ TestSelfShapedChildrenKeepTheirCornersInsideACard gates the
+ relationship, by measuring the same child inside a card and outside
+ one and requiring the two to agree.
+
+ KNOWN EDGE, not handled: :last-child is a DOM position, and the old
+ `overflow: hidden` clipped whatever was PAINTED last. So a trailing
+ <input type="hidden"> — which apps write constantly, and which has
+ display: none from the UA — takes the rounding and leaves the real
+ last row square. No template in the framework does this, so nothing
+ regressed; it is unhandled rather than overlooked because the CSS that
+ would handle it has to enumerate what "invisible" means in a selector
+ (:nth-last-child(1 of :not([type=hidden]):not([hidden]))), and the
+ commonest case of all — display: none from the app's own stylesheet —
+ is not expressible in a selector at all. A rule that covered two of
+ the three would read as covering all three. If you are looking at a
+ square corner on a rounded card, look for a hidden last child. */
+:where(.rst-list) > :where(:first-child),
+:where([rst-list]) > :where(:first-child),
+:where(.rst-card) > :where(:first-child),
+:where([rst-card]) > :where(:first-child) {
+ border-start-end-radius: calc(var(--rst-radius) - 1px);
+ border-start-start-radius: calc(var(--rst-radius) - 1px);
+}
+:where(.rst-list) > :where(:last-child),
+:where([rst-list]) > :where(:last-child),
+:where(.rst-card) > :where(:last-child),
+:where([rst-card]) > :where(:last-child) {
+ border-end-end-radius: calc(var(--rst-radius) - 1px);
+ border-end-start-radius: calc(var(--rst-radius) - 1px);
+}
+
+/* list-bar: the toolbar strip. The search field is capped at 20rem so
+ the space to its right stays reserved — that is where the filter and
+ sort controls attach when the dropdown slice lands. */
+.rst-lbar, [rst-lbar] {
+ align-items: center;
+ background: var(--rst-surface-2);
+ border-bottom: 1px solid var(--rst-line);
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--rst-sp-3);
+ padding: var(--rst-sp-2) var(--rst-sp-3);
+}
+/* list-bar-search wraps its form in <search>, the landmark element, so
+ the strip's flex child is the <search>, not the form. Both are sized
+ here: an app that hand-writes a bare <form rst-search> into
+ its own .rst-lbar keeps the layout it had before the element landed. */
+.rst-lbar > search,
+[rst-lbar] > search,
+.rst-lbar > .rst-search,
+[rst-lbar] > [rst-search] {
+ flex: 0 1 20rem;
+}
+
+/* list-bar-search renders this form, which is the field box itself. Used
+ on its own inside a .rst-list card it just needs margin; inside a
+ .rst-lbar the strip supplies the padding. The <search> around it is a
+ plain block box — it draws nothing, so the form remains the field. */
+.rst-search, [rst-search] {
+ align-items: center;
+ background: var(--rst-surface);
+ border: 1px solid var(--rst-line-strong);
+ border-radius: var(--rst-radius-sm);
+ display: flex;
+ gap: var(--rst-sp-2);
+ margin: 0;
+ padding: 0.3rem 0.55rem;
+}
+.rst-list > search,
+[rst-list] > search,
+.rst-list > .rst-search,
+[rst-list] > [rst-search] {
+ margin: var(--rst-sp-3);
+}
+.rst-search .icon, [rst-search] .icon {
+ color: var(--rst-text-faint);
+}
+.rst-search input[type="search"], [rst-search] input[type="search"] {
+ background: transparent;
+ border: 0;
+ color: var(--rst-text);
+ flex: 1;
+ font-family: inherit;
+ font-size: var(--rst-fs-sm);
+ min-inline-size: 0;
+ padding: 0.2rem 0;
+}
+.rst-search input[type="search"]::placeholder, [rst-search] input[type="search"]::placeholder {
+ color: var(--rst-text-faint);
+}
+/* The field box carries the focus indicator for the whole control, so
+ the input's own default outline would only double it up. */
+.rst-search input[type="search"]:focus-visible, [rst-search] input[type="search"]:focus-visible {
+ outline: none;
+}
+.rst-search:focus-within, [rst-search]:focus-within {
+ border-color: var(--rst-accent);
+ outline: 2px solid var(--rst-accent);
+ outline-offset: 1px;
+}
+/* The browser's own ✕ goes (design spec §6-v2.1b.6). It is
+ ::-webkit-search-cancel-button and it does exactly what it is
+ specified to do — it clears the input's VALUE — but a GET form
+ submits on submit, so the results stand and the address bar still
+ says ?q=. list-bar-search renders a real link in its place, and
+ leaving both would be two affordances, one of which lies.
+ -webkit-appearance is not redundant beside display: none: without it
+ WebKit reserves the button's box before the display ever applies. */
+.rst-search input[type="search"]::-webkit-search-cancel-button, [rst-search] input[type="search"]::-webkit-search-cancel-button {
+ -webkit-appearance: none;
+ appearance: none;
+ display: none;
+}
+/* The link that replaces it. 24px on BOTH axes is WCAG 2.2 SC 2.5.8
+ Target Size (AA), which this library gates in CI — an ✕ tucked inside
+ a field is exactly the shape that fails it, and a 17px chip on this
+ branch already did. Do not shrink it without re-measuring. */
+.rst-search__clear, [rst-search-clear] {
+ align-items: center;
+ border-radius: var(--rst-radius-sm);
+ color: var(--rst-text-faint);
+ display: inline-flex;
+ flex: none;
+ justify-content: center;
+ min-block-size: 24px;
+ min-inline-size: 24px;
+ text-decoration: none;
+}
+.rst-search__clear:hover, [rst-search-clear]:hover {
+ background: var(--rst-accent-soft);
+ color: var(--rst-text);
+}
+
+/* ── list-row-action ──────────────────────────────────────────────── */
+.rst-row, [rst-row] {
+ align-items: center;
+ border-top: 1px solid var(--rst-line);
+ display: flex;
+ gap: var(--rst-sp-3);
+ padding: var(--rst-sp-3);
+ position: relative;
+}
+.rst-row:first-child, [rst-row]:first-child {
+ border-top: 0;
+}
+/* The toolbar strip already draws the line under itself. */
+.rst-lbar + .rst-row, [rst-lbar] + [rst-row] {
+ border-top: 0;
+}
+.rst-row:hover, [rst-row]:hover {
+ background: var(--rst-surface-2);
+}
+.rst-row__lead, [rst-row-lead] {
+ align-items: center;
+ background: var(--rst-tone-neutral-bg);
+ block-size: 1.9rem;
+ border-radius: 50%;
+ color: var(--rst-tone-neutral-fg);
+ display: flex;
+ flex: none;
+ font-size: var(--rst-fs-xs);
+ font-weight: 600;
+ inline-size: 1.9rem;
+ justify-content: center;
+}
+.rst-row__lead[data-lead="positive"], [rst-row-lead][data-lead="positive"] {
+ background: var(--rst-tone-positive-bg);
+ color: var(--rst-tone-positive-fg);
+}
+.rst-row__lead[data-lead="warning"], [rst-row-lead][data-lead="warning"] {
+ background: var(--rst-tone-warning-bg);
+ color: var(--rst-tone-warning-fg);
+}
+.rst-row__lead[data-lead="negative"], [rst-row-lead][data-lead="negative"] {
+ background: var(--rst-tone-negative-bg);
+ color: var(--rst-tone-negative-fg);
+}
+.rst-row__lead[data-lead="accent"], [rst-row-lead][data-lead="accent"] {
+ background: var(--rst-accent-soft);
+ color: var(--rst-accent);
+}
+.rst-row__main, [rst-row-main] {
+ flex: 1;
+ min-inline-size: 0;
+}
+/* The name link's overlay makes the whole row clickable without nesting
+ one anchor inside another. The action pill sits above it. */
+.rst-row__main > a, [rst-row-main] > a {
+ color: var(--rst-text);
+ font-weight: 600;
+ text-decoration: none;
+}
+.rst-row__main > a::after, [rst-row-main] > a::after {
+ content: "";
+ inset: 0;
+ position: absolute;
+}
+.rst-row__main > a:hover, [rst-row-main] > a:hover {
+ text-decoration: underline;
+}
+.rst-row__sub, [rst-row-sub] {
+ color: var(--rst-text-muted);
+ display: block;
+ font-size: var(--rst-fs-sm);
+ margin-block-start: 0.1rem;
+}
+.rst-row__action, [rst-row-action] {
+ background: var(--rst-surface);
+ border: 1px solid var(--rst-line-strong);
+ border-radius: var(--rst-radius-pill);
+ color: var(--rst-text-muted);
+ flex: none;
+ font-size: var(--rst-fs-sm);
+ padding: 0.2rem 0.7rem;
+ position: relative;
+ text-decoration: none;
+ z-index: 1;
+}
+.rst-row__action:hover, [rst-row-action]:hover {
+ border-color: var(--rst-accent);
+ color: var(--rst-accent);
+}
+
+/* A status pill inside a row sits above the name link's overlay, like
+ the action pill does. */
+.rst-row .rst-status, [rst-row] [rst-status] {
+ flex: none;
+ position: relative;
+ z-index: 1;
+}
+
+/* ── status-pill. The dot is decoration; the label is the state. ──── */
+.rst-status, [rst-status] {
+ align-items: center;
+ background: var(--rst-tone-neutral-bg);
+ border-radius: var(--rst-radius-pill);
+ color: var(--rst-tone-neutral-fg);
+ display: inline-flex;
+ font-size: var(--rst-fs-xs);
+ font-weight: 600;
+ gap: 0.35rem;
+ line-height: 1.6;
+ padding: 0.15rem 0.55rem;
+}
+.rst-status::before, [rst-status]::before {
+ background: currentColor;
+ block-size: 0.375rem;
+ border-radius: 50%;
+ content: "";
+ flex: none;
+ inline-size: 0.375rem;
+}
+.rst-status[data-tone="positive"], [rst-status][rst-tone~="positive"] {
+ background: var(--rst-tone-positive-bg);
+ color: var(--rst-tone-positive-fg);
+}
+.rst-status[data-tone="warning"], [rst-status][rst-tone~="warning"] {
+ background: var(--rst-tone-warning-bg);
+ color: var(--rst-tone-warning-fg);
+}
+.rst-status[data-tone="negative"], [rst-status][rst-tone~="negative"] {
+ background: var(--rst-tone-negative-bg);
+ color: var(--rst-tone-negative-fg);
+}
+
+/* ── empty-state ──────────────────────────────────────────────────── */
+.rst-empty, [rst-empty] {
+ background: var(--rst-surface);
+ border: 1px dashed var(--rst-line-strong);
+ border-radius: var(--rst-radius);
+ padding: var(--rst-sp-6) var(--rst-sp-4);
+ text-align: center;
+}
+/* Class-based, so it styles the partial's <h2> without inheriting any
+ <h2> default: an empty state's heading is a real heading in the
+ document outline, not a paragraph dressed up as one. */
+.rst-empty__title, [rst-empty-title] {
+ color: var(--rst-text);
+ font-size: 1.0625rem;
+ font-weight: 600;
+ margin: 0 0 var(--rst-sp-2);
+}
+.rst-empty__body, [rst-empty-body] {
+ color: var(--rst-text-muted);
+ margin: 0 auto;
+ max-inline-size: 34rem;
+}
+.rst-empty__cta, [rst-empty-cta] {
+ margin: var(--rst-sp-4) 0 0;
+}
+
+/* ── pagination. The current page is a filled chip AND aria-current AND
+ bolder — three signals, so it never rests on colour alone. ────── */
+.rst-pagination, [rst-pagination] {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ font-variant-numeric: tabular-nums;
+ gap: var(--rst-sp-1);
+ margin: var(--rst-sp-4) 0;
+}
+.rst-pagination a,
+[rst-pagination] a,
+.rst-pagination span,
+[rst-pagination] span {
+ border: 1px solid var(--rst-line);
+ border-radius: var(--rst-radius-sm);
+ color: var(--rst-text-muted);
+ display: inline-block;
+ font-size: var(--rst-fs-sm);
+ min-inline-size: 2rem;
+ padding: 0.3rem 0.6rem;
+ text-align: center;
+ text-decoration: none;
+}
+.rst-pagination a:hover, [rst-pagination] a:hover {
+ background: var(--rst-accent-soft);
+ border-color: var(--rst-accent);
+ color: var(--rst-text);
+}
+.rst-pagination [aria-current="page"], [rst-pagination] [aria-current="page"] {
+ background: var(--rst-accent);
+ border-color: var(--rst-accent);
+ color: var(--rst-on-accent);
+ font-weight: 600;
+}
+.rst-pagination .rst-pagination__disabled, [rst-pagination] [rst-pagination-disabled] {
+ border-style: dashed;
+ color: var(--rst-text-faint);
+}
+.rst-pagination .rst-pagination__gap, [rst-pagination] [rst-pagination-gap] {
+ border-color: transparent;
+ min-inline-size: 0;
+ padding-inline: var(--rst-sp-1);
+}
+
+/* badge — uppercase bordered chip; tones reuse the pill tone pairs. */
+.rst-badge, [rst-badge] {
+ border: 1px solid var(--rst-line);
+ border-radius: var(--rst-radius-sm);
+ color: var(--rst-text-muted);
+ display: inline-block;
+ font-size: 0.6875rem;
+ font-variant-numeric: tabular-nums;
+ font-weight: 700;
+ letter-spacing: 0.04em;
+ padding: 0.05rem 0.4rem;
+ text-transform: uppercase;
+ white-space: nowrap;
+}
+.rst-badge--positive, [rst-badge~="positive"] { background: var(--rst-tone-positive-bg); border-color: var(--rst-tone-positive-fg); color: var(--rst-tone-positive-fg); }
+.rst-badge--warning, [rst-badge~="warning"] { background: var(--rst-tone-warning-bg); border-color: var(--rst-tone-warning-fg); color: var(--rst-tone-warning-fg); }
+.rst-badge--negative, [rst-badge~="negative"] { background: var(--rst-tone-negative-bg); border-color: var(--rst-tone-negative-fg); color: var(--rst-tone-negative-fg); }
+.rst-badge--neutral, [rst-badge~="neutral"] { background: var(--rst-tone-neutral-bg); border-color: var(--rst-tone-neutral-fg); color: var(--rst-tone-neutral-fg); }
+
+/* meter — 4px capacity bar; the number rides beside it as text. */
+.rst-meter, [rst-meter] { align-items: center; color: var(--rst-text-muted); display: inline-flex; font-size: var(--rst-fs-xs); gap: var(--rst-sp-2); }
+.rst-meter__bar, [rst-meter-bar] { background: var(--rst-accent-soft); border-radius: 2px; flex: 1; height: 4px; min-width: 34px; overflow: hidden; }
+.rst-meter__bar i, [rst-meter-bar] i { background: var(--rst-accent); border-radius: 2px; display: block; height: 100%; width: var(--rst-meter-fill, 0%); }
+.rst-meter__num, [rst-meter-num] { font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+/* person — avatar + name + email; avatar is decoration, text is identity. */
+.rst-person, [rst-person] { align-items: center; color: inherit; display: inline-flex; gap: 0.7rem; min-width: 0; text-decoration: none; }
+.rst-person__av, [rst-person-av] { align-items: center; background: var(--rst-accent); border-radius: 50%; color: var(--rst-on-accent); display: flex; flex: none; font-size: 0.6875rem; font-weight: 600; height: 28px; justify-content: center; width: 28px; }
+.rst-person__av--empty, [rst-person-av~="empty"] { background: transparent; border: 1px dashed var(--rst-line-strong); color: transparent; }
+.rst-person__meta, [rst-person-meta] { min-width: 0; }
+.rst-person__name, [rst-person-name] { display: block; font-weight: 550; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rst-person__email, [rst-person-email] { color: var(--rst-text-muted); display: block; font-size: var(--rst-fs-xs); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rst-person:hover .rst-person__name, [rst-person]:hover [rst-person-name] { color: var(--rst-accent); }
+.rst-person--lg .rst-person__av, [rst-person~="lg"] [rst-person-av] { font-size: 1.0625rem; height: 46px; width: 46px; }
+
+/* callout — the one alert vocabulary; icon sized to the first text line. */
+.rst-callout, [rst-callout] { align-items: flex-start; background: var(--rst-surface-2); border: 1px solid var(--rst-line-strong); border-radius: var(--rst-radius); display: flex; gap: 0.6rem; margin: var(--rst-sp-4) 0; padding: 0.85rem 1rem; }
+.rst-callout__ic, [rst-callout-ic] { align-items: center; color: var(--rst-accent); display: inline-flex; flex: none; height: 1.5rem; justify-content: center; width: 1.25rem; }
+.rst-callout__ic svg, [rst-callout-ic] svg, .rst-callout__ic .icon, [rst-callout-ic] .icon { display: block; height: 1.25rem; width: 1.25rem; }
+.rst-callout__body, [rst-callout-body] { line-height: 1.5; min-width: 0; }
+.rst-callout__body > strong, [rst-callout-body] > strong { display: block; font-weight: 600; }
+.rst-callout__body > p, [rst-callout-body] > p { color: var(--rst-text-muted); margin: 0.15rem 0 0; }
+.rst-callout__body > p:only-child, [rst-callout-body] > p:only-child { color: inherit; margin: 0; }
+.rst-callout__body > ul, [rst-callout-body] > ul { color: var(--rst-text-muted); margin: 0.15rem 0 0; padding-inline-start: 1.1rem; }
+.rst-callout[data-tone="positive"], [rst-callout][rst-tone~="positive"] { background: var(--rst-tone-positive-bg); border-color: var(--rst-tone-positive-fg); }
+.rst-callout[data-tone="positive"] > .rst-callout__ic, [rst-callout][rst-tone~="positive"] > [rst-callout-ic] { color: var(--rst-tone-positive-fg); }
+.rst-callout[data-tone="warning"], [rst-callout][rst-tone~="warning"] { background: var(--rst-tone-warning-bg); border-color: var(--rst-tone-warning-fg); }
+.rst-callout[data-tone="warning"] > .rst-callout__ic, [rst-callout][rst-tone~="warning"] > [rst-callout-ic] { color: var(--rst-tone-warning-fg); }
+.rst-callout[data-tone="negative"], [rst-callout][rst-tone~="negative"] { background: var(--rst-tone-negative-bg); border-color: var(--rst-tone-negative-fg); }
+.rst-callout[data-tone="negative"] > .rst-callout__ic, [rst-callout][rst-tone~="negative"] > [rst-callout-ic] { color: var(--rst-tone-negative-fg); }
+
+/* detail-list — a record's labelled facts as a definition list; the
+ partial emits .rst-detail, .rst-mono marking machine-ish values. */
+.rst-detail, [rst-detail] { display: grid; gap: var(--rst-sp-2) var(--rst-sp-5); grid-template-columns: max-content 1fr; margin: var(--rst-sp-4) 0; }
+.rst-detail dt, [rst-detail] dt { color: var(--rst-text-muted); font-size: var(--rst-fs-sm); font-weight: 600; }
+.rst-detail dd, [rst-detail] dd { margin: 0; }
+.rst-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--rst-fs-sm); }
+
+/* ── Narrow screens ───────────────────────────────────────────────── */
+@media (max-width: 34rem) {
+ .rst-lbar > search,
+ [rst-lbar] > search,
+ .rst-lbar > .rst-search,
+ [rst-lbar] > [rst-search] {
+ flex: 1 1 100%;
+ }
+ .rst-row, [rst-row] {
+ align-items: flex-start;
+ flex-wrap: wrap;
+ }
+ .rst-page-header h1, [rst-page-header] h1 {
+ font-size: 1.25rem;
+ }
+}
+
+/* ── The structural idioms: box, list grid, row-menu, dropdown, ftok ── */
+
+/* box — the section card. Its heading (rst-box-head) is a SIBLING
+ before the box, never inside it: a screen is a stack of
+ section-header + card. A box-head action is a compact real button,
+ never a pill. */
+.rst-box, [rst-box] { background: var(--rst-surface); border: 1px solid var(--rst-line); border-radius: var(--rst-radius); margin: var(--rst-sp-4) 0; padding: 1.1rem 1.25rem; }
+.rst-box > :first-child, [rst-box] > :first-child { margin-top: 0; }
+.rst-box > :last-child, [rst-box] > :last-child { margin-bottom: 0; }
+.rst-box-head, [rst-box-head] { align-items: baseline; display: flex; gap: var(--rst-sp-4); justify-content: space-between; margin: 1.5rem 0 0.5rem; }
+.rst-box-head:first-child, [rst-box-head]:first-child { margin-top: 0; }
+.rst-box-head + .rst-box, [rst-box-head] + [rst-box] { margin-top: 0; }
+.rst-box-head h2, [rst-box-head] h2 { font-size: var(--rst-fs-base); margin: 0; }
+.rst-box-foot, [rst-box-foot] { border-top: 1px solid var(--rst-line); color: var(--rst-text-muted); margin-top: var(--rst-sp-4); padding-top: 0.75rem; }
+.rst-box > .rst-detail, [rst-box] > [rst-detail] { margin: 0; }
+
+/* The list grid — the real data-table vocabulary. The card sets the
+ columns once (--rst-cols, inline, trailing 32px for the kebab);
+ rows only choose cells. Hover fill only on rows that contain the
+ identity link — a display-only row must never look clickable.
+ Like .rst-list, .rst-card has no padding: rows only. Anything that
+ is not a row belongs in .rst-box. */
+.rst-card, [rst-card] { background: var(--rst-surface); border: 1px solid var(--rst-line); border-radius: var(--rst-radius); }
+.rst-lrow, [rst-lrow] { align-items: center; border-bottom: 1px solid var(--rst-line); display: grid; gap: 0.85rem; grid-template-columns: var(--rst-cols, 1fr); padding: 0.68rem 1rem; position: relative; }
+.rst-lrow:last-child, [rst-lrow]:last-child { border-bottom: 0; }
+.rst-lrow--head, [rst-lrow~="head"] { color: var(--rst-text-faint); font-size: 0.71875rem; font-weight: 550; letter-spacing: 0.05em; padding: 0.55rem 1rem; text-transform: uppercase; }
+.rst-lrow:not(.rst-lrow--head):has(> .rst-nm, > .rst-person):hover, [rst-lrow]:not([rst-lrow~="head"]):has(> .rst-nm, > [rst-person]):hover { background: var(--rst-accent-soft); }
+.rst-nm { border-radius: var(--rst-radius-sm); color: inherit; font-weight: 550; min-width: 0; text-align: start; text-decoration: none; }
+a.rst-nm:hover { color: var(--rst-accent); }
+.rst-nm small { color: var(--rst-text-muted); display: block; font-size: var(--rst-fs-xs); font-weight: 400; }
+.rst-cell-mut { color: var(--rst-text-muted); font-size: var(--rst-fs-xs); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rst-no-match, [rst-no-match] { color: var(--rst-text-muted); font-size: var(--rst-fs-sm); padding: 1.6rem 1rem; text-align: center; }
+.rst-no-match a, [rst-no-match] a { color: var(--rst-accent); }
+.rst-count-line, [rst-count-line] { color: var(--rst-text-faint); font-size: var(--rst-fs-xs); margin: 0.7rem 0 0; }
+@media (max-width: 800px) {
+ .rst-m-hide { display: none; }
+ .rst-lrow, [rst-lrow], .rst-lrow--head, [rst-lrow~="head"] { grid-template-columns: minmax(0, 1fr) auto 32px; }
+}
+
+/* row-menu — the per-row kebab: native details/summary, no JS. The
+ destructive item sits last, class rst-danger, label ending "…". */
+.rst-row-menu, [rst-row-menu] { justify-self: end; position: relative; }
+.rst-row-menu > summary, [rst-row-menu] > summary { align-items: center; border-radius: var(--rst-radius-sm); color: var(--rst-text-faint); cursor: pointer; display: flex; height: 26px; justify-content: center; list-style: none; width: 26px; }
+.rst-row-menu > summary::-webkit-details-marker, [rst-row-menu] > summary::-webkit-details-marker { display: none; }
+.rst-row-menu > summary:hover, [rst-row-menu] > summary:hover, .rst-row-menu[open] > summary, [rst-row-menu][open] > summary { background: var(--rst-accent-soft); color: var(--rst-text); }
+.rst-row-menu__panel, [rst-row-menu-panel] { background: var(--rst-surface); border: 1px solid var(--rst-line); border-radius: 9px; box-shadow: var(--rst-shadow-pop); inset-inline-end: 0; min-width: 176px; padding: 0.25rem; position: absolute; top: calc(100% + 4px); z-index: 40; }
+.rst-row-menu__panel a, [rst-row-menu-panel] a, .rst-row-menu__panel button, [rst-row-menu-panel] button { background: none; border: 0; border-radius: var(--rst-radius-sm); color: var(--rst-text); cursor: pointer; display: block; font: inherit; font-size: var(--rst-fs-sm); font-weight: 450; margin: 0; padding: 0.4rem 0.65rem; text-align: start; text-decoration: none; width: 100%; }
+.rst-row-menu__panel a:hover, [rst-row-menu-panel] a:hover, .rst-row-menu__panel button:hover, [rst-row-menu-panel] button:hover { background: var(--rst-accent-soft); }
+/* The separator every menu surface draws. Scoped to the row menu alone
+ until the live page showed the topbar account menu wearing the UA's
+ thick inset 3D <hr> instead: that panel is a .rst-dropdown__menu, and
+ nothing named it. The three panels are one surface with three entry
+ points, so one rule names all three — .rst-locale redundantly, since
+ its panel carries .rst-dropdown__menu too, but a locale menu built
+ without that class is still a menu and still needs the hairline. */
+.rst-row-menu__panel hr,
+[rst-row-menu-panel] hr,
+.rst-dropdown__menu hr,
+[rst-dropdown-menu] hr,
+.rst-locale hr,
+[rst-locale] hr { border: 0; border-top: 1px solid var(--rst-line); margin: 0.25rem 0; }
+.rst-danger { color: var(--rst-tone-negative-fg); }
+.rst-row-menu__panel .rst-danger:hover, [rst-row-menu-panel] .rst-danger:hover { background: var(--rst-tone-negative-bg); }
+
+/* dropdown — the details/summary menu vocabulary (header overflow,
+ list-bar Filter/Sort). Exclusivity between siblings is the native
+ details name attribute — zero JS. */
+.rst-dropdown, [rst-dropdown] { position: relative; }
+.rst-dropdown > summary, [rst-dropdown] > summary { align-items: center; color: var(--rst-text-muted); cursor: pointer; display: flex; gap: 0.3rem; list-style: none; padding: 0.4rem 0.6rem; white-space: nowrap; }
+.rst-dropdown > summary::-webkit-details-marker, [rst-dropdown] > summary::-webkit-details-marker { display: none; }
+.rst-dropdown > summary:hover, [rst-dropdown] > summary:hover, .rst-dropdown[open] > summary, [rst-dropdown][open] > summary { color: var(--rst-text); }
+.rst-dropdown__menu, [rst-dropdown-menu] { background: var(--rst-surface); border: 1px solid var(--rst-line); border-radius: 9px; box-shadow: var(--rst-shadow-pop); inset-inline-end: 0; margin-top: 4px; min-width: 176px; padding: 0.25rem; position: absolute; top: 100%; z-index: 30; }
+.rst-dropdown__menu a, [rst-dropdown-menu] a { border-radius: var(--rst-radius-sm); color: inherit; display: block; font-size: var(--rst-fs-sm); padding: 0.4rem 0.65rem; text-decoration: none; }
+.rst-dropdown__menu a:hover, [rst-dropdown-menu] a:hover, .rst-dropdown__menu a[aria-current], [rst-dropdown-menu] a[aria-current] { background: var(--rst-accent-soft); }
+/* locale-menu — the language switcher is a dropdown whose items are
+ one-field POST forms (spec §2.4), so the button inside each form
+ takes the menu-link styling. Autonyms keep their own script, so no
+ text-transform here, ever. */
+.rst-locale form, [rst-locale] form { margin: 0; }
+.rst-locale button, [rst-locale] button { background: none; border: 0; border-radius: var(--rst-radius-sm); color: var(--rst-text); cursor: pointer; display: block; font: inherit; font-size: var(--rst-fs-sm); padding: 0.4rem 0.65rem; text-align: start; width: 100%; }
+.rst-locale button:hover, [rst-locale] button:hover { background: var(--rst-accent-soft); }
+.rst-locale button[aria-current], [rst-locale] button[aria-current] { color: var(--rst-accent); font-weight: 600; }
+/* Task 2's menu only ever held links; bulk-bar's actions menu (Task 4)
+ is real submit buttons on the surrounding form, so the same panel
+ needs button styling too — mirrors .rst-row-menu__panel's combined
+ a/button rule above. */
+.rst-dropdown__menu button, [rst-dropdown-menu] button { background: none; border: 0; border-radius: var(--rst-radius-sm); color: inherit; cursor: pointer; display: block; font: inherit; font-size: var(--rst-fs-sm); margin: 0; padding: 0.4rem 0.65rem; text-align: start; width: 100%; }
+.rst-dropdown__menu button:hover, [rst-dropdown-menu] button:hover { background: var(--rst-accent-soft); }
+/* The same content-box bug the inputs had, in the three menu panels:
+ a full-width button inside a 0.25rem-padded panel measured 100% of
+ the content box and then added its own 0.65rem of side padding, so
+ every hover highlight bled ~20.8px past the panel's rounded edge.
+ One rule for all three panels, because it is one cause. */
+.rst-row-menu__panel a, [rst-row-menu-panel] a, .rst-row-menu__panel button, [rst-row-menu-panel] button, .rst-locale button, [rst-locale] button, .rst-dropdown__menu button, [rst-dropdown-menu] button { box-sizing: border-box; }
+.rst-dropdown__menu .rst-danger:hover, [rst-dropdown-menu] .rst-danger:hover { background: var(--rst-tone-negative-bg); }
+.rst-dropdown__menu .rst-menu-group > summary, [rst-dropdown-menu] [rst-menu-group] > summary { color: var(--rst-text-muted); cursor: pointer; font-size: var(--rst-fs-sm); list-style: none; padding: 0.4rem 0.65rem; }
+.rst-dropdown__menu .rst-menu-group > summary::-webkit-details-marker, [rst-dropdown-menu] [rst-menu-group] > summary::-webkit-details-marker { display: none; }
+.rst-dropdown__menu .rst-menu-group > div, [rst-dropdown-menu] [rst-menu-group] > div { padding-inline-start: 0.6rem; }
+/* Menus that fit the viewport (design spec §6-v2.1b, 1 and 2). Two
+ bugs, one surface — and one rule for all four panels, because
+ .rst-combo__list and .rst-dtp__list have carried the cap and the
+ scroll since they were written and these two never did.
+
+ THE CAP AND THE SCROLL come first because they work in every engine.
+ The twelve-locale language menu measures 388px; on a short viewport
+ its last entries were simply unreachable — no cap, no scroll, nothing
+ to drag. The cap is the space a menu may take: 20rem where the window
+ is tall, and the window itself less the room the anchor and the
+ page's own chrome need where it is not. overscroll-behavior keeps a
+ flick that bottoms the menu out from carrying on into the page behind
+ it.
+
+ THE 8rem FLOOR IS NOT DECORATION, and it went in after the first
+ version of this rule shipped without one. dvh is the viewport, and
+ inside an iframe the viewport is THE FRAME — so in the design
+ gallery's own 100px preview frames `100dvh - 6rem` computed to 4px
+ and a three-item menu rendered as a 12px sliver; below a 96px frame
+ it computed to zero and the menu was invisible. A fix aimed at menu
+ entries nobody could reach had shipped a menu with no entries at all.
+ The floor is the honest trade: in a frame too short for the menu it
+ overflows, and an overflowing menu can be scrolled to, where an
+ invisible one cannot be anything. Any app embedding a screen in a
+ short iframe had the same bug, so this is not a gallery fix.
+
+ THE FLIP is CSS anchor positioning. A menu with no room below opens
+ upward; one against the trailing edge opens the other way inline.
+ Zero script.
+
+ It is Chromium-only today. That is accepted, and the reason is
+ recorded here rather than left looking like an oversight: an engine
+ without it lands on the fixed position above, which is exactly what
+ every engine does today, so nothing regresses — and Firefox and
+ Safari gain the behaviour with no release from us. The alternative
+ was script, which would put positioning behind JavaScript and make
+ the scriptless path worse than the one we already ship. That trade is
+ the wrong way round for this library.
+
+ anchor-scope is load-bearing, not decoration. anchor-name is a
+ document-wide name, so without a scope every menu on the page would
+ resolve --rst-menu to the LAST element carrying it and all of them
+ would pile onto one anchor. Scoping the name to each disclosure's own
+ subtree is what lets one name serve every menu in the library.
+
+ Inside the @supports the fixed insets have to go. position-area
+ supplies the containing block, so a leftover top: 100% would then be
+ measured against THAT box and push the panel a whole anchor-height
+ further down again. The margin stays: position-try-fallbacks flips
+ margins along with insets, so one margin-block-start is the 4px gap
+ in both directions.
+
+ The cap is deliberately NOT a percentage of the position-area. A
+ percentage would be the exact space available, which sounds better
+ and is worse: an element clamped to fit never overflows, and overflow
+ is precisely what triggers position-try-fallbacks, so the menu would
+ scroll in place at the foot of the window instead of flipping up into
+ the room above it.
+
+ position-visibility covers the fixed positioning above. A fixed panel
+ is deliberately outside every scrolling ancestor's clip — that is how
+ a menu opened inside a card escapes it — but the anchor is NOT, so a
+ rail's nav scrolled until the menu's own button is gone could leave
+ the menu painted over unrelated content with nothing under it.
+ anchors-visible ties the panel's visibility to its anchor's: when the
+ button goes, the menu goes.
+
+ It is a no-op in Chromium today, and that is written down rather than
+ left to be rediscovered: Chromium's INITIAL value for the property is
+ already anchors-visible, on every element. The CSS spec's initial
+ value is `always`. So this declaration is not what produces today's
+ behaviour — it is what keeps it if an engine ever aligns with the
+ spec, which would otherwise orphan every menu here with no warning at
+ all. ui's TestAMenuDoesNotOutliveTheAnchorScrolledAwayFromUnderIt
+ watches for exactly that, and says the same at more length. */
+.rst-dropdown__menu,
+[rst-dropdown-menu],
+.rst-row-menu__panel,
+[rst-row-menu-panel] {
+ max-block-size: min(20rem, max(calc(100dvh - 6rem), 8rem));
+ overflow-y: auto;
+ overscroll-behavior: contain;
+}
+@supports (position-area: block-end) and (position-try-fallbacks: flip-block) {
+ .rst-dropdown,
+ [rst-dropdown],
+ .rst-row-menu,
+ [rst-row-menu] {
+ anchor-name: --rst-menu;
+ anchor-scope: --rst-menu;
+ }
+ .rst-dropdown__menu,
+ [rst-dropdown-menu],
+ .rst-row-menu__panel,
+ [rst-row-menu-panel] {
+ inset: auto;
+ margin-block-start: 4px;
+ position: fixed;
+ position-anchor: --rst-menu;
+ position-area: block-end span-inline-start;
+ position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+ position-visibility: anchors-visible;
+ }
+}
+
+.rst-caret, [rst-caret] { align-items: center; color: var(--rst-text-faint); display: inline-flex; font-size: 0.8em; transition: transform 0.15s; }
+.rst-caret svg, [rst-caret] svg, .rst-caret .icon, [rst-caret] .icon { display: block; height: 1em; width: 1em; }
+details[open] > summary > .rst-caret, details[open] > summary > [rst-caret] { transform: rotate(180deg); }
+
+/* ftok — an applied filter as a removable chip; the × is a plain link
+ to the unfiltered URL, so removing a filter is just navigation.
+ The × is 24px square because WCAG 2.2 AA 2.5.8 says a target is, and
+ it was 17px until the accessibility gate measured it. The chip lost
+ its block padding in the same breath to pay for most of that: the
+ chip measures 26.0px tall now against 22.4px before, and would have
+ been 29.2px if the padding had stayed. */
+.rst-ftok, [rst-ftok] { align-items: center; background: var(--rst-surface); border: 1px solid var(--rst-line-strong); border-radius: 7px; display: inline-flex; font-size: var(--rst-fs-xs); gap: 0.45rem; padding-block: 0; padding-inline: 0.6rem 0.2rem; }
+.rst-ftok .rst-ftok__k, [rst-ftok] [rst-ftok-k] { color: var(--rst-text-muted); }
+.rst-ftok a, [rst-ftok] a { align-items: center; border-radius: 4px; color: var(--rst-text-faint); display: inline-flex; height: 24px; justify-content: center; text-decoration: none; width: 24px; }
+.rst-ftok a:hover, [rst-ftok] a:hover { background: var(--rst-tone-negative-bg); color: var(--rst-tone-negative-fg); }
+
+/* Reduced motion: the caret's rotate transition is the only new
+ animation this batch adds. Everything else here (hover fills, colour
+ changes) is not a "large motion" trigger under 2.3.3, so it does not
+ need a rule here too. */
+@media (prefers-reduced-motion: reduce) {
+ .rst-caret, [rst-caret] { transition: none; }
+}
+
+/* ── The form family: field, switch, choice cards, seg-tabs, layout ── */
+
+/* fields — bare on the page, one column; a card in a form is reserved
+ for collections, toggle blocks, and choice cards. */
+.rst-field, [rst-field] { margin: var(--rst-sp-4) 0; }
+.rst-field__label, [rst-field-label] { color: var(--rst-text-muted); display: block; font-size: var(--rst-fs-sm); margin: 0 0 0.2rem; }
+.rst-field__hint, [rst-field-hint] { color: var(--rst-text-faint); font-weight: 400; }
+/* box-sizing is set here rather than in a `*` reset, because this file
+ promises exactly one collision surface with an app's own CSS: the
+ rst- prefix. Without it width:100% is the CONTENT box, so an input
+ overflowed its own wrapper by its padding and borders — 21px for a
+ plain field, 47px once .rst-dtp__input reserves room for the picker
+ button. That overflow was three of this batch's visible bugs at once:
+ an input running under the field beside it in a row, an input running
+ out of its card, and a picker button anchored to the wrapper landing
+ 47px short of the input's visible end. */
+.rst-input, [rst-input] { background: var(--rst-surface); border: 1px solid var(--rst-line-strong); border-radius: var(--rst-radius-sm); box-sizing: border-box; color: inherit; font: inherit; padding: 0.45rem 0.6rem; width: 100%; }
+.rst-input:focus-visible, [rst-input]:focus-visible { outline: 2px solid var(--rst-accent); outline-offset: 2px; }
+/* short is compact, not tiny: 8rem is a border-box width, so it renders
+ within a pixel or two of the old 6.5rem content box plus its padding,
+ and it is wide enough for the postcodes and codes it is for. The
+ max keeps it from overflowing a column narrower than itself. */
+.rst-input--short, [rst-input~="short"] { inline-size: 8rem; max-inline-size: 100%; }
+textarea.rst-input, textarea[rst-input] { min-height: 5rem; resize: vertical; }
+/* field-text/field-textarea (the interim pair the manifest generator
+ emits) mark a required label with * and put the textarea on its own
+ class; styled here so both field families render finished. */
+.rst-field__required, [rst-field-required] { color: var(--rst-tone-negative-fg); }
+.rst-textarea, [rst-textarea] { background: var(--rst-surface); border: 1px solid var(--rst-line-strong); border-radius: var(--rst-radius-sm); box-sizing: border-box; color: inherit; font: inherit; line-height: 1.6; min-height: 5rem; padding: 0.45rem 0.6rem; resize: vertical; width: 100%; }
+.rst-textarea:focus-visible, [rst-textarea]:focus-visible { outline: 2px solid var(--rst-accent); outline-offset: 2px; }
+/* The three message lines under a control. display:block is load-bearing
+ rather than cosmetic: the field partial emits them as <p>, and the
+ field-text/date/time/select family as <small>, and an inline <small>
+ silently drops the top margin — so the same message sat at two
+ different distances from its control depending on which partial drew
+ it. The hint's class is shared with the inline parenthetical inside a
+ label in the field partial, so only the <small> form is blocked out. */
+.rst-field__help, [rst-field-help] { color: var(--rst-text-muted); display: block; font-size: var(--rst-fs-xs); margin: 0.45rem 0 0; }
+.rst-field__error, [rst-field-error] { color: var(--rst-tone-negative-fg); display: block; font-size: var(--rst-fs-xs); margin: 0.45rem 0 0; }
+small.rst-field__hint, small[rst-field-hint] { display: block; font-size: var(--rst-fs-xs); margin: 0.45rem 0 0; }
+
+/* switch — the one toggle mechanism: real checkbox, visible track. The
+ knob's left: 2px is deliberately physical, not inset-inline-start: it
+ is the origin of a physical translateX, so the pair has to travel the
+ same axis in either writing mode or the knob leaves the track. What
+ that gives up: the knob therefore always travels left-to-right, so a
+ mirrored switch would need a direction-scoped rule of its own. */
+.rst-switch, [rst-switch] { align-items: center; cursor: pointer; display: inline-flex; gap: 0.6rem; position: relative; }
+.rst-switch input, [rst-switch] input { height: 1px; opacity: 0; position: absolute; width: 1px; }
+.rst-switch__track, [rst-switch-track] { background: var(--rst-line-strong); border-radius: 10px; flex: none; height: 19px; position: relative; transition: background 0.15s; width: 34px; }
+.rst-switch__track::after, [rst-switch-track]::after { background: var(--rst-surface); border-radius: 50%; box-shadow: var(--rst-shadow-knob); content: ""; height: 15px; left: 2px; position: absolute; top: 2px; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); width: 15px; }
+.rst-switch:has(input:checked) .rst-switch__track, [rst-switch]:has(input:checked) [rst-switch-track] { background: var(--rst-accent); }
+.rst-switch:has(input:checked) .rst-switch__track::after, [rst-switch]:has(input:checked) [rst-switch-track]::after { transform: translateX(15px); }
+.rst-switch:has(input:focus-visible) .rst-switch__track, [rst-switch]:has(input:focus-visible) [rst-switch-track] { outline: 2px solid var(--rst-accent); outline-offset: 2px; }
+.rst-switch:has(input:disabled), [rst-switch]:has(input:disabled) { cursor: default; opacity: 0.55; }
+
+/* choice cards — whole-card target, native input visible. */
+.rst-choice, [rst-choice] { border: 0; margin: var(--rst-sp-4) 0; padding: 0; }
+.rst-choice > legend, [rst-choice] > legend { font-size: var(--rst-fs-sm); font-weight: 600; margin: 0 0 0.45rem; padding: 0; }
+.rst-choice__cards, [rst-choice-cards] { display: grid; gap: 0.5rem; }
+.rst-choice__cards label, [rst-choice-cards] label { align-items: flex-start; border: 1px solid var(--rst-line); border-radius: var(--rst-radius); cursor: pointer; display: flex; gap: 0.7rem; margin: 0; padding: 0.75rem 0.95rem; }
+.rst-choice__cards label:hover, [rst-choice-cards] label:hover { border-color: var(--rst-accent); }
+.rst-choice__cards input, [rst-choice-cards] input { accent-color: var(--rst-accent); flex: none; margin-top: 0.18rem; }
+.rst-choice__title, [rst-choice-title] { display: block; font-size: var(--rst-fs-sm); font-weight: 550; line-height: 1.35; }
+.rst-choice__desc, [rst-choice-desc] { color: var(--rst-text-muted); display: block; font-size: var(--rst-fs-xs); line-height: 1.4; }
+.rst-choice__cards label:has(input:checked), [rst-choice-cards] label:has(input:checked) { background: var(--rst-accent-soft); border-color: var(--rst-accent); }
+.rst-choice__cards label:has(input:focus-visible), [rst-choice-cards] label:has(input:focus-visible) { outline: 2px solid var(--rst-accent); outline-offset: 2px; }
+
+/* seg-tabs — filled pill inside a soft track; current is aria-current.
+ It wraps: width: max-content is what a segmented control wants and
+ max-inline-size: 100% is what WCAG 2.2 AA 1.4.10 requires, because
+ four tabs are 345px wide and a reflow viewport is 320. Two rows beats
+ a sideways scrollbar on the whole page. */
+.rst-seg-tabs, [rst-seg-tabs] { background: var(--rst-accent-soft); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 2px; max-inline-size: 100%; padding: 2px; width: max-content; }
+.rst-seg-tabs a, [rst-seg-tabs] a { border-radius: var(--rst-radius-sm); color: var(--rst-text-muted); font-size: var(--rst-fs-sm); font-weight: 550; padding: 5px 16px; text-decoration: none; }
+.rst-seg-tabs a:hover, [rst-seg-tabs] a:hover { color: var(--rst-text); }
+.rst-seg-tabs a[aria-current], [rst-seg-tabs] a[aria-current] { background: var(--rst-surface); box-shadow: var(--rst-shadow-lift); color: var(--rst-text); font-weight: 600; }
+
+/* form layout — the interview rhythm and the save bar. */
+.rst-form-flow > .rst-field + .rst-field, [rst-form-flow] > [rst-field] + [rst-field] { margin-top: var(--rst-sp-5); }
+/* field-row aligns by the CONTROL row, not by the bottom of the box.
+ align-items:end was the bug: a field carrying an error is taller than
+ its sibling, so bottom-aligning it lifted its input clear of the row
+ and dropped its error line across the field beside it.
+
+ Judged against grid-with-subgrid, which does align label/control/
+ message tracks across siblings exactly: subgrid needs the row to be a
+ grid, and a grid cannot express what this row is for. grid-auto-flow:
+ column never wraps, so a narrow screen overflows instead of stacking;
+ and grid-auto-columns is one value for every column, so rst-grow — a
+ wide field beside a short one — cannot be said at all. Flex keeps
+ both. What align-items:start gives up is a row whose fields have
+ label boxes of different heights; the ::before below buys back the
+ common case of that (a field with no label at all), and a label long
+ enough to wrap is a field that wants its own row.
+
+ The message then flows under its own column and shifts no sibling,
+ which is the second half of the fix — it needs the border-box on
+ .rst-input above to hold, or the control overflows the column the
+ message is measured against. */
+.rst-field-row, [rst-field-row] { align-items: start; display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.75rem 0; }
+.rst-field-row .rst-field, [rst-field-row] [rst-field] { margin: 0; }
+.rst-field-row > .rst-field, [rst-field-row] > [rst-field] { flex: 0 1 auto; min-inline-size: 8rem; }
+.rst-field-row > .rst-grow, [rst-field-row] > .rst-grow { flex: 1 1 12rem; }
+/* A field in a row with no label reserves the label's line anyway, so
+ its control still lines up with a labelled sibling's. It measures
+ that line rather than restating it: the same font-size .rst-field__label
+ declares, one lh of the line-height both of them inherit, and the
+ label's own bottom margin.
+
+ The two block-size declarations are one value with a fallback, not a
+ duplicate: an engine that has :has() but not the lh unit drops the
+ second line and keeps the calc. That window is real — :has() shipped
+ in Chrome 105 and Safari 15.4, lh in Chrome 109 and Safari 16.4 — so
+ Chrome 105-108 and Safari 15.4-16.3 render this rule and would
+ otherwise reserve a zero-height line. They get the body's 1.5
+ line-height as a number; everything newer measures the line itself
+ and the copy stops mattering. Firefox never sees the calc: lh landed
+ there in 120 and :has() in 121, so any Firefox that matches this
+ selector already has the unit. */
+.rst-field-row > .rst-field:not(:has(> .rst-field__label))::before, [rst-field-row] > [rst-field]:not(:has(> [rst-field-label]))::before { block-size: calc(var(--rst-fs-sm) * 1.5); block-size: 1lh; content: ""; display: block; font-size: var(--rst-fs-sm); margin-block-end: 0.2rem; }
+/* A row is sized by its controls, never by its messages: contain keeps a
+ long error out of the field's max-content width, so the sentence wraps
+ under its own control instead of stretching the column it belongs to
+ and squeezing the field beside it. */
+.rst-field-row > .rst-field > :is(.rst-field__help, .rst-field__error, .rst-field__hint), [rst-field-row] > [rst-field] > :is([rst-field-help], [rst-field-error], [rst-field-hint]) { contain: inline-size; }
+/* field-daterange — the fieldset reset the grouped start/end pair needs,
+ with the legend sized like a field label. Its own selector rather than
+ a share of .rst-choice: the two groups look alike today, and a card
+ tweak there must not silently reshape a date range. */
+.rst-field-range, [rst-field-range] { border: 0; margin: var(--rst-sp-4) 0; padding: 0; }
+.rst-field-range > legend, [rst-field-range] > legend { font-size: var(--rst-fs-sm); font-weight: 600; margin: 0 0 0.45rem; padding: 0; }
+.rst-field-range > .rst-field-row, [rst-field-range] > [rst-field-row] { margin: 0; }
+.rst-form-bar, [rst-form-bar] { align-items: center; background: var(--rst-bg); border-top: 1px solid var(--rst-line); bottom: 0; display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.75rem; padding: 0.8rem 0; position: sticky; z-index: 5; }
+.rst-form-bar .rst-form-bar__note, [rst-form-bar] [rst-form-bar-note] { color: var(--rst-text-muted); font-size: var(--rst-fs-xs); margin-inline-end: auto; }
+.rst-form-actions, [rst-form-actions] { display: flex; gap: 0.5rem; justify-content: flex-end; }
+/* form/form-foot — the container the form-foot partial's callers wrap
+ fields in, and the closing action row form-foot itself emits. */
+/* One spacing mechanism, not two. The form is a flex column, so its
+ children's own stacking margins never collapse — they were added to
+ the gap, and they were also added at the two ends, where nothing is
+ being separated from anything. Inside a card holding a single field
+ that was the whole of the dead space under the control: 16px of
+ field margin on top of the card's own padding, at both ends. The gap
+ is now the rhythm (the same var(--rst-sp-5) .rst-form-flow uses
+ between its fields) and the blocks contribute no margin of their
+ own.
+
+ Stated as a rule over every child rather than as a list of the
+ classes we happen to ship: a list is a promise this file cannot keep,
+ because it cannot name .rst-callout's successor, and it cannot name
+ an app's own div at all — and a child the list forgot lands at gap
+ plus its own two margins, which is the bug this rule exists to
+ prevent. So: the form owns the block rhythm, full stop, and the two
+ deliberate exceptions are exempted here where they can be read.
+ .rst-form-foot and .rst-form-bar both set a block-start margin that
+ is not rhythm — it is the extra air that separates a closing action
+ row from the last question above it. */
+.rst-form, [rst-form] { display: flex; flex-direction: column; gap: var(--rst-sp-5); max-inline-size: 44rem; }
+.rst-form > *:not(.rst-form-foot, .rst-form-bar), [rst-form] > *:not([rst-form-foot], [rst-form-bar]) { margin-block: 0; }
+/* The closing action row the form-foot partial emits. It was
+ rst-form__foot until the markup flip (spec §6-v3): BEM's __ flattens
+ to a hyphen, so it and the sticky save bar above wanted the same
+ attribute, and a name the partial emits is the one that should own
+ the name the partial is called. The save bar, which no partial emits
+ and every caller writes by hand, is rst-form-bar now. */
+.rst-form-foot, [rst-form-foot] { display: flex; gap: var(--rst-sp-3); margin-block-start: var(--rst-sp-3); }
+
+@media (prefers-reduced-motion: reduce) {
+ .rst-switch__track, [rst-switch-track], .rst-switch__track::after, [rst-switch-track]::after { transition: none; }
+}
+
+/* ── The routes family: confirm, toggle-block, modal shells, bulk-bar,
+ help ────────────────────────────────────────────────────────── */
+
+/* toggle-block — a bordered card whose head is a switch; the body
+ reveals via :has(), zero JS. The switch is authoritative: the server
+ treats off as off, whatever the revealed (still-POSTed) fields say. */
+.rst-tblock, [rst-tblock] { background: var(--rst-surface); border: 1px solid var(--rst-line); border-radius: var(--rst-radius); margin: 0.7rem 0; overflow: hidden; }
+.rst-tblock > .rst-tblock__head, [rst-tblock] > [rst-tblock-head] { align-items: flex-start; cursor: pointer; display: flex; gap: 0.85rem; margin: 0; padding: 0.9rem 1.05rem; }
+.rst-tblock > .rst-tblock__head:hover, [rst-tblock] > [rst-tblock-head]:hover { background: var(--rst-accent-soft); }
+.rst-tblock .rst-tblock__title, [rst-tblock] [rst-tblock-title] { display: block; font-size: var(--rst-fs-sm); font-weight: 550; }
+.rst-tblock .rst-tblock__desc, [rst-tblock] [rst-tblock-desc] { color: var(--rst-text-muted); display: block; font-size: var(--rst-fs-xs); }
+.rst-tblock .rst-tblock__head input, [rst-tblock] [rst-tblock-head] input { height: 1px; opacity: 0; position: absolute; width: 1px; }
+.rst-tblock:has(.rst-tblock__head input:checked) .rst-switch__track, [rst-tblock]:has([rst-tblock-head] input:checked) [rst-switch-track] { background: var(--rst-accent); }
+.rst-tblock:has(.rst-tblock__head input:checked) .rst-switch__track::after, [rst-tblock]:has([rst-tblock-head] input:checked) [rst-switch-track]::after { transform: translateX(15px); }
+.rst-tblock:has(.rst-tblock__head input:focus-visible) .rst-switch__track, [rst-tblock]:has([rst-tblock-head] input:focus-visible) [rst-switch-track] { outline: 2px solid var(--rst-accent); outline-offset: 2px; }
+.rst-tblock > .rst-tblock__body, [rst-tblock] > [rst-tblock-body] { display: none; }
+.rst-tblock:has(.rst-tblock__head input:checked) > .rst-tblock__body, [rst-tblock]:has([rst-tblock-head] input:checked) > [rst-tblock-body] { background: var(--rst-surface-2); border-radius: 0 0 var(--rst-radius) var(--rst-radius); border-top: 1px solid var(--rst-line); display: block; padding: 0.9rem 1.05rem 1.05rem; }
+
+/* modal route — its own URL: the response renders the page you'll
+ return to inside an inert backdrop, then the overlay. Closing is a
+ plain link to that page. */
+.rst-backdrop, [rst-backdrop] { display: contents; }
+/* The scroll lock. It used to shift the whole page sideways as it
+ landed, because taking the scrollbar away takes its width away too;
+ --rst-scrollbar-gutter at the top of this file reserves that width
+ whether or not a scrollbar is in it, so the page now stays put. */
+body:has(.rst-backdrop), body:has([rst-backdrop]) { overflow: hidden; }
+.rst-modal-overlay, [rst-modal-overlay] { align-items: center; background: var(--rst-overlay); display: flex; inset: 0; justify-content: center; padding: 2rem 1rem; position: fixed; z-index: 10; }
+.rst-modal-panel, [rst-modal-panel] { background: var(--rst-bg); border: 1px solid var(--rst-line); border-radius: 14px; box-shadow: var(--rst-shadow-pop); display: flex; max-height: min(85vh, 640px); max-width: 860px; overflow: hidden; width: 100%; }
+/* The panel is a <dialog open>: the rendered-open, NON-modal dialog is
+ exactly what a modal-as-a-URL is — the server sends the page with the
+ dialog already open, and nothing calls showModal(). So ::backdrop is
+ never painted (it only exists for the top layer) and .rst-modal-overlay
+ stays the scrim, as it was. What the element does bring is a UA block
+ this idiom has to undo: absolute positioning with auto inline insets,
+ auto margins, 1em of padding and the Canvas colour pair. Reset them
+ and the panel lays out as the ordinary flex item it already was. */
+dialog.rst-modal-panel, dialog[rst-modal-panel] { block-size: auto; color: inherit; inset: auto; margin: 0; padding: 0; position: static; }
+.rst-modal-panel > nav, [rst-modal-panel] > nav { border-inline-end: 1px solid var(--rst-line); display: flex; flex: none; flex-direction: column; gap: 0.15rem; padding: 1.1rem 0.8rem; width: 180px; }
+.rst-modal-panel > nav a, [rst-modal-panel] > nav a { border-radius: 8px; color: inherit; padding: 0.4rem 0.65rem; text-decoration: none; }
+.rst-modal-panel > nav a:hover, [rst-modal-panel] > nav a:hover { background: var(--rst-accent-soft); }
+.rst-modal-panel > nav a[aria-current], [rst-modal-panel] > nav a[aria-current] { background: var(--rst-accent-soft); color: var(--rst-accent); font-weight: 600; }
+.rst-modal-panel > section, [rst-modal-panel] > section { flex: 1; min-width: 0; overflow-y: auto; padding: 1.5rem 2rem 2rem; position: relative; }
+.rst-modal-close, [rst-modal-close] { color: var(--rst-text-muted); font-size: 1.5rem; inset-inline-end: 1.1rem; line-height: 1; position: absolute; text-decoration: none; top: 1rem; }
+.rst-modal-close:hover, [rst-modal-close]:hover { color: inherit; }
+@media (max-width: 800px) {
+ .rst-modal-overlay, [rst-modal-overlay] { padding: 0.75rem; }
+ .rst-modal-panel, [rst-modal-panel] { flex-direction: column; max-height: 92vh; }
+ .rst-modal-panel > nav, [rst-modal-panel] > nav { border-bottom: 1px solid var(--rst-line); border-inline-end: 0; flex-direction: row; width: auto; }
+}
+
+/* help — a bordered ? icon-link to a section's help article: plain <a>,
+ new tab, CSS tooltip. The tooltip is NOT the accessible name — the
+ link must carry a full aria-label of its own. */
+.rst-help, [rst-help] { align-items: center; border: 1px solid var(--rst-line-strong); border-radius: 7px; color: var(--rst-text-muted); display: inline-flex; height: 28px; justify-content: center; position: relative; width: 28px; }
+.rst-help:hover, [rst-help]:hover { border-color: var(--rst-text-faint); color: var(--rst-text); }
+.rst-help svg, [rst-help] svg, .rst-help .icon, [rst-help] .icon { height: 15px; width: 15px; }
+.rst-tip::after, [rst-tip]::after { background: var(--rst-text); border-radius: var(--rst-radius-sm); color: var(--rst-bg); content: attr(data-tip); font-size: 0.71875rem; font-weight: 500; inset-inline-end: 0; opacity: 0; padding: 3px 8px; pointer-events: none; position: absolute; top: calc(100% + 6px); transition: opacity 0.12s; white-space: nowrap; z-index: 35; }
+.rst-tip:hover::after, [rst-tip]:hover::after, .rst-tip:focus-visible::after, [rst-tip]:focus-visible::after { opacity: 1; }
+
+/* bulk-bar + selbox — select mode as server-rendered state. */
+.rst-bulkbar, [rst-bulkbar] { align-items: center; background: var(--rst-accent-soft); border-bottom: 1px solid var(--rst-line); display: flex; gap: 0.7rem; min-height: 46px; padding-block: 0; padding-inline: 0.6rem 0.85rem; }
+.rst-bulkbar__close, [rst-bulkbar-close] { align-items: center; border-radius: var(--rst-radius-sm); color: var(--rst-text-muted); display: inline-flex; height: 26px; justify-content: center; text-decoration: none; width: 26px; }
+.rst-bulkbar__close:hover, [rst-bulkbar-close]:hover { background: var(--rst-accent-soft); color: var(--rst-text); }
+.rst-bulkbar__close svg, [rst-bulkbar-close] svg, .rst-bulkbar__close .icon, [rst-bulkbar-close] .icon { height: 15px; width: 15px; }
+.rst-bulkbar__count, [rst-bulkbar-count] { font-size: var(--rst-fs-sm); font-weight: 600; }
+.rst-bulkbar__escalate, [rst-bulkbar-escalate] { color: var(--rst-accent); font-size: var(--rst-fs-xs); font-weight: 550; text-decoration: none; }
+.rst-bulkbar__escalate:hover, [rst-bulkbar-escalate]:hover { text-decoration: underline; }
+.rst-bulkbar .rst-dropdown, [rst-bulkbar] [rst-dropdown] { margin-inline-start: auto; }
+.rst-bulkbar .rst-dropdown > summary, [rst-bulkbar] [rst-dropdown] > summary { background: var(--rst-surface); border: 1px solid var(--rst-line-strong); border-radius: 7px; font-size: var(--rst-fs-xs); font-weight: 550; padding: 0.22rem 0.6rem; }
+.rst-selbox, [rst-selbox] { align-items: center; display: flex; margin: 0; }
+.rst-selbox input, [rst-selbox] input { accent-color: var(--rst-accent); cursor: pointer; height: 16px; margin: 0; width: 16px; }
+.rst-selbox input:focus-visible, [rst-selbox] input:focus-visible { outline: 2px solid var(--rst-accent); outline-offset: 2px; }
+
+.rst-back-nav, [rst-back-nav] { margin: 0 0 var(--rst-sp-3); }
+.rst-back-nav a, [rst-back-nav] a { color: var(--rst-text-muted); text-decoration: none; }
+.rst-back-nav a:hover, [rst-back-nav] a:hover { color: var(--rst-accent); }
+.rst-notice, [rst-notice] { background: var(--rst-tone-positive-bg); border-radius: var(--rst-radius-sm); color: var(--rst-tone-positive-fg); font-size: var(--rst-fs-sm); padding: 0.5rem 0.75rem; }
+.rst-form-error, [rst-form-error] { color: var(--rst-tone-negative-fg); font-size: var(--rst-fs-sm); }
+
+@media (prefers-reduced-motion: reduce) {
+ .rst-tip::after, [rst-tip]::after { transition: none; }
+}
+
+/* rst-spin — the working indicator a status page or busy button wears.
+ Pure CSS; reduced-motion users get a steady dimmed ring instead of
+ rotation. */
+.rst-spin, [rst-spin] {
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ border: 2px solid currentColor;
+ /* Physical on purpose: the gap in a ring that rotates a full turn
+ every 0.8s has no start or end side to mirror. */
+ border-right-color: transparent;
+ border-radius: 50%;
+ vertical-align: -0.15em;
+ animation: rst-spin 0.8s linear infinite;
+}
+@keyframes rst-spin { to { transform: rotate(1turn); } }
+@media (prefers-reduced-motion: reduce) {
+ .rst-spin, [rst-spin] { animation: none; opacity: 0.5; }
+}
+
+/* field-select's combobox, built by rastrillo.js past ten options. The
+ popup deliberately borrows .rst-dropdown__menu's shape so the two
+ overlays read as one system. Nothing here styles the native <select>:
+ it keeps .rst-input and is simply moved out of sight by .rst-sr-only. */
+.rst-combo, [rst-combo] { position: relative; }
+.rst-combo__list, [rst-combo-list] { background: var(--rst-surface); border: 1px solid var(--rst-line); border-radius: 9px; box-shadow: var(--rst-shadow-pop); inset-inline: 0; list-style: none; margin-top: 4px; max-block-size: 15rem; overflow-y: auto; padding: 0.25rem; position: absolute; top: 100%; z-index: 30; }
+.rst-combo__option, [rst-combo-option] { border-radius: var(--rst-radius-sm); color: inherit; cursor: pointer; font-size: var(--rst-fs-sm); padding: 0.4rem 0.65rem; }
+.rst-combo__option:hover, [rst-combo-option]:hover, .rst-combo__option.is-active, [rst-combo-option].is-active { background: var(--rst-accent-soft); }
+/* The committed option is marked in the accessibility tree by
+ aria-selected; this is the matching visual, never the only signal. */
+.rst-combo__option[aria-selected="true"], [rst-combo-option][aria-selected="true"] { font-weight: 600; }
+/* A grouped <select> keeps its groups: each <optgroup> becomes an ARIA
+ group holding its own list of rows, under a heading that is furniture
+ only — the group's aria-label is what a screen reader announces.
+ Same faint uppercase recipe as .rst-lrow--head, for the same reason:
+ it names a run of rows without competing with them. */
+.rst-combo__rows, [rst-combo-rows] { list-style: none; margin: 0; padding: 0; }
+.rst-select__group, [rst-select-group] { color: var(--rst-text-faint); font-size: var(--rst-fs-xs); font-weight: 550; letter-spacing: 0.05em; padding-block: 0.4rem 0.2rem; padding-inline: 0.65rem; text-transform: uppercase; }
+
+/* The date fields' combobox, built by datetime.js on any input carrying
+ data-rst-date or data-rst-time. Same shape as .rst-combo above, plus
+ a picker button anchored in the field and two kinds of row: the
+ reading of what was typed (with its Set affordance) and the quick
+ picks under it. The native input is not styled here either — it keeps
+ its value and its name and is simply moved out of sight by
+ .rst-sr-only, because it is what the form submits. */
+.rst-dtp, [rst-dtp] { position: relative; }
+.rst-dtp__input, [rst-dtp-input] { padding-inline-end: 2.25rem; }
+/* The button is anchored to .rst-dtp, which is exactly as wide and as
+ tall as the input it wraps once the input is a border box — so
+ inset-inline-end puts it at the control's inline end in either
+ writing mode, and inset-block:0 with auto block margins centres it on
+ the control at whatever height the type scale gives it. The old
+ inset-block-start:0.3rem was that centring measured once by hand
+ against one font size. .rst-dtp__input's padding-inline-end is the
+ room this reserves inside the control, so text never runs under it,
+ with a value or without one. */
+.rst-dtp__pick, [rst-dtp-pick] { align-items: center; background: none; border: 0; border-radius: var(--rst-radius-sm); block-size: 1.75rem; color: var(--rst-muted); cursor: pointer; display: flex; inline-size: 1.75rem; inset-block: 0; inset-inline-end: 0.35rem; justify-content: center; margin-block: auto; padding: 0; position: absolute; }
+.rst-dtp__pick:hover, [rst-dtp-pick]:hover { color: var(--rst-text); }
+.rst-dtp__pick svg, [rst-dtp-pick] svg { block-size: 1rem; inline-size: 1rem; }
+.rst-dtp__list, [rst-dtp-list] { background: var(--rst-surface); border: 1px solid var(--rst-line); border-radius: 9px; box-shadow: var(--rst-shadow-pop); inset-inline: 0; list-style: none; margin-block-start: 4px; max-block-size: 17rem; overflow-y: auto; padding: 0.25rem; position: absolute; top: 100%; z-index: 40; }
+.rst-dtp__row, [rst-dtp-row] { align-items: baseline; border-radius: var(--rst-radius-sm); color: inherit; cursor: pointer; display: flex; font-size: var(--rst-fs-sm); gap: 0.5rem; justify-content: space-between; padding: 0.4rem 0.65rem; }
+.rst-dtp__row:hover, [rst-dtp-row]:hover, .rst-dtp__row.is-active, [rst-dtp-row].is-active { background: var(--rst-accent-soft); }
+.rst-dtp__row--set .rst-dtp__label, [rst-dtp-row~="set"] [rst-dtp-label] { font-weight: 600; }
+.rst-dtp__quick .rst-dtp__set, [rst-dtp-quick] [rst-dtp-set] { color: var(--rst-muted); }
+/* The committed value is marked in the accessibility tree by
+ aria-selected; this is the matching visual, never the only signal. */
+.rst-dtp__row[aria-selected="true"] .rst-dtp__label, [rst-dtp-row][aria-selected="true"] [rst-dtp-label] { font-weight: 600; }
+.rst-dtp__set, [rst-dtp-set] { flex: none; font-size: var(--rst-fs-xs); color: var(--rst-muted); }
+.rst-dtp__hint, [rst-dtp-hint] { color: var(--rst-muted); font-size: var(--rst-fs-xs); padding: 0.35rem 0.65rem 0.15rem; }
+
+/* ── Shells: the page frames an app's layout template wraps .rst-page
+ in — topbar and sidebar. Written in logical properties throughout,
+ so a right-to-left locale gets a mirrored shell for free: the rail
+ moves to the inline end, the account menu with it, and nothing
+ here needs a second rule. ─────────────────────────────────────── */
+
+/* skip link — first in the DOM of every shell, out of sight until it
+ takes focus, then a real chip at the block/inline start. A keyboard
+ user must be able to jump the nav; this is the whole mechanism. */
+.rst-skip, [rst-skip] { block-size: 1px; clip-path: inset(50%); inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
+.rst-skip:focus-visible, [rst-skip]:focus-visible { background: var(--rst-surface); block-size: auto; border: 1px solid var(--rst-accent); border-radius: var(--rst-radius-sm); clip-path: none; color: var(--rst-text); inline-size: auto; inset-block-start: var(--rst-sp-2); inset-inline-start: var(--rst-sp-2); overflow: visible; padding: 0.4rem 0.7rem; text-decoration: none; z-index: 60; }
+
+/* topbar shell — brand, nav and an account menu on one bar, the page
+ column beneath it, a footer under that. The account dropdown is
+ pushed to the inline end by auto margin, not by order or float. */
+.rst-shell-topbar .rst-shell__bar, [rst-shell-topbar] [rst-shell-bar] { align-items: center; background: var(--rst-surface); border-block-end: 1px solid var(--rst-line); display: flex; flex-wrap: wrap; gap: var(--rst-sp-4); padding-block: 0.5rem; padding-inline: var(--rst-sp-4); }
+.rst-shell__brand, [rst-shell-brand] { color: inherit; font-weight: 650; text-decoration: none; }
+.rst-shell__nav, [rst-shell-nav] { display: flex; gap: var(--rst-sp-4); }
+.rst-shell__nav a, [rst-shell-nav] a { border-block-end: 2px solid transparent; color: var(--rst-text-muted); font-size: var(--rst-fs-sm); padding-block: 0.3rem; text-decoration: none; }
+.rst-shell__nav a:hover, [rst-shell-nav] a:hover { color: var(--rst-text); }
+.rst-shell__nav a[aria-current], [rst-shell-nav] a[aria-current] { border-block-end-color: var(--rst-accent); color: var(--rst-text); font-weight: 550; }
+.rst-shell__account, [rst-shell-account] { margin-inline-start: auto; }
+/* an account menu whose block was never overridden has an empty menu; hide the whole control rather than show a dead summary. */
+.rst-shell__account:has(> .rst-dropdown__menu:empty), [rst-shell-account]:has(> [rst-dropdown-menu]:empty) { display: none; }
+.rst-shell__foot, [rst-shell-foot] { border-block-start: 1px solid var(--rst-line); color: var(--rst-text-muted); font-size: var(--rst-fs-xs); padding-block: var(--rst-sp-4); padding-inline: var(--rst-sp-4); text-align: center; }
+/* the topbar shell emits a foot even when the block is un-overridden; an empty one is a stray rule and padding, so draw nothing. */
+.rst-shell__foot:empty, [rst-shell-foot]:empty { display: none; }
+
+/* The topbar's narrow layout. Below 800px — the same breakpoint the
+ sidebar collapses at, deliberately, because two shells with two
+ breakpoints is two systems — the bar's tail (nav, account, locale)
+ goes behind one disclosure carrying the `menu` icon. Above it the
+ summary is display: none and the tail is display: contents, so nav,
+ account and locale are direct flex items of the bar again and the
+ inline-end layout is byte-for-byte the one that shipped before this
+ existed. No script: a <details>, a media query and a pair of display
+ rules.
+
+ Why the tail is a SIBLING of the disclosure rather than its content,
+ which is the shape .rst-shell__chrome already uses: a closed
+ <details> hides its own content, and no CSS reliably un-hides it
+ across engines, so the wide layout could not be recovered from
+ inside one. It also keeps the account menu out of the disclosure
+ entirely, which matters — see the name below.
+
+ The name is rst-shell-menu and NOT rst-menus. <details name>
+ exclusivity is document-wide, not sibling-scoped, so a disclosure
+ sharing the menus' group would be closed by the very account menu it
+ reveals: the user clicks Account and the navigation they opened it
+ from disappears. Same rule this file's rst-menu-group already
+ documents ("a nested group MUST name a different one"), met here for
+ the first time in the framework's own shells. */
+.rst-shell-topbar .rst-shell__menu, [rst-shell-topbar] [rst-shell-menu] { margin-inline-start: auto; }
+.rst-shell-topbar .rst-shell__menu > summary, [rst-shell-topbar] [rst-shell-menu] > summary { align-items: center; border: 1px solid var(--rst-line); border-radius: var(--rst-radius-sm); cursor: pointer; display: flex; font-size: var(--rst-fs-sm); font-weight: 550; gap: 0.35rem; list-style: none; min-block-size: 24px; padding-block: 0.3rem; padding-inline: 0.55rem; }
+.rst-shell-topbar .rst-shell__menu > summary::-webkit-details-marker, [rst-shell-topbar] [rst-shell-menu] > summary::-webkit-details-marker { display: none; }
+.rst-shell-topbar .rst-shell__tail, [rst-shell-topbar] [rst-shell-tail] { display: none; }
+/* The account's auto margin has to be undone here, and stretch does not
+ do it: in a column flex box the inline axis is the CROSS axis, and an
+ item with an auto cross-axis margin is exempt from stretching, so
+ margin-inline-start: auto survived and shoved Account to the trailing
+ edge of the collapsed stack — the same trailing-edge shove that made
+ the wrapped bar look wrong in the first place. The wide query below
+ puts it back. */
+.rst-shell-topbar .rst-shell__menu[open] + .rst-shell__tail, [rst-shell-topbar] [rst-shell-menu][open] + [rst-shell-tail] { display: flex; flex-basis: 100%; flex-direction: column; gap: var(--rst-sp-3); }
+.rst-shell-topbar .rst-shell__tail > .rst-shell__account, [rst-shell-topbar] [rst-shell-tail] > [rst-shell-account] { margin-inline-start: 0; }
+/* flex-start so a nav link's aria-current underline is as wide as its
+ own label rather than as wide as the bar, where it reads as a rule
+ across the menu instead of as a marker on one item. */
+.rst-shell-topbar .rst-shell__tail > .rst-shell__nav, [rst-shell-topbar] [rst-shell-tail] > [rst-shell-nav] { align-items: flex-start; flex-direction: column; gap: var(--rst-sp-2); }
+/* The nav links pick up the inline padding the two menu summaries below
+ them already carry, so the collapsed stack reads as one column of
+ labels rather than three components that happen to be above each
+ other. Same reason the rail's links carry 0.55rem. */
+.rst-shell-topbar .rst-shell__tail > .rst-shell__nav a, [rst-shell-topbar] [rst-shell-tail] > [rst-shell-nav] a { padding-inline: 0.6rem; }
+@media (min-width: 800px) {
+ .rst-shell-topbar .rst-shell__menu, [rst-shell-topbar] [rst-shell-menu] { display: none; }
+ /* Both selectors, and both at least as specific as the narrow rules
+ they undo: a media query adds no specificity, so the open
+ disclosure's 0-4-0 rule above would otherwise keep the tail a
+ column for anyone who opened the menu and then widened the
+ window. */
+ .rst-shell-topbar .rst-shell__tail,
+ [rst-shell-topbar] [rst-shell-tail],
+ .rst-shell-topbar .rst-shell__menu[open] + .rst-shell__tail,
+ [rst-shell-topbar] [rst-shell-menu][open] + [rst-shell-tail] { display: contents; }
+ .rst-shell-topbar .rst-shell__tail > .rst-shell__account, [rst-shell-topbar] [rst-shell-tail] > [rst-shell-account] { margin-inline-start: auto; }
+ .rst-shell-topbar .rst-shell__tail > .rst-shell__nav, [rst-shell-topbar] [rst-shell-tail] > [rst-shell-nav] { align-items: normal; flex-direction: row; gap: var(--rst-sp-4); }
+ .rst-shell-topbar .rst-shell__tail > .rst-shell__nav a, [rst-shell-topbar] [rst-shell-tail] > [rst-shell-nav] a { padding-inline: 0; }
+}
+
+/* sidebar shell — a rail beside the page. Below 800px the rail is
+ hidden behind a <details> chrome strip and, opened, becomes an
+ full-width column above the content: the open state is the
+ native element's own, so the shell stays zero-JS like every idiom
+ above it. The main column carries min-inline-size: 0 so a wide child
+ (a list grid, a <pre>) scrolls itself instead of stretching the grid
+ track. */
+.rst-shell__main, [rst-shell-main] { min-inline-size: 0; }
+/* box-sizing on the rail, per this file's convention (see .rst-input
+ above): set on the component that needs it, never in a `*` reset.
+ The rail is the one box in the stylesheet whose height is the
+ VIEWPORT'S — block-size: 100dvh in the query below — and it also
+ carries padding, so as a content box its border box was 100dvh + 32px.
+ Sticky at inset-block-start: 0, the last 32px of it hung under the
+ window and clipped whatever sat at its foot; overflow-y: auto could
+ not help, because the content fitted the content box and no scrollbar
+ was ever owed. Anything sized against the viewport has to be measured
+ the way the viewport measures it. */
+.rst-shell-sidebar > .rst-shell__rail, [rst-shell-sidebar] > [rst-shell-rail] { background: var(--rst-surface); border-block-end: 1px solid var(--rst-line); box-sizing: border-box; display: none; flex-direction: column; gap: var(--rst-sp-3); padding: var(--rst-sp-4); }
+.rst-shell-sidebar > .rst-shell__chrome > summary, [rst-shell-sidebar] > [rst-shell-chrome] > summary { align-items: center; border-block-end: 1px solid var(--rst-line); cursor: pointer; display: flex; font-size: var(--rst-fs-sm); font-weight: 550; gap: 0.3rem; list-style: none; padding-block: 0.55rem; padding-inline: var(--rst-sp-4); }
+.rst-shell-sidebar > .rst-shell__chrome > summary::-webkit-details-marker, [rst-shell-sidebar] > [rst-shell-chrome] > summary::-webkit-details-marker { display: none; }
+.rst-shell-sidebar > .rst-shell__chrome[open] + .rst-shell__rail, [rst-shell-sidebar] > [rst-shell-chrome][open] + [rst-shell-rail] { display: flex; }
+.rst-shell__group, [rst-shell-group] { color: var(--rst-text-faint); font-size: var(--rst-fs-xs); font-weight: 550; letter-spacing: 0.05em; margin-block: var(--rst-sp-3) 0.2rem; text-transform: uppercase; }
+.rst-shell-sidebar .rst-shell__nav, [rst-shell-sidebar] [rst-shell-nav] { flex-direction: column; gap: 2px; }
+.rst-shell-sidebar .rst-shell__nav a, [rst-shell-sidebar] [rst-shell-nav] a { border-block-end: 0; border-radius: var(--rst-radius-sm); display: block; padding-block: 0.35rem; padding-inline: 0.55rem; }
+.rst-shell-sidebar .rst-shell__nav a:hover, [rst-shell-sidebar] [rst-shell-nav] a:hover { background: var(--rst-accent-soft); color: var(--rst-text); }
+.rst-shell-sidebar .rst-shell__nav a[aria-current], [rst-shell-sidebar] [rst-shell-nav] a[aria-current] { background: var(--rst-accent-soft); color: var(--rst-accent); font-weight: 600; }
+/* The rail's foot — the language switcher and the person, in the corner
+ an app puts them in everywhere else. margin-block-start: auto is the
+ whole mechanism: the rail is a column flex box, so the auto margin
+ eats whatever height is left between the nav and the bottom.
+
+ Below 800px the disclosed rail is STILL a flex column — the media
+ query below only adds block-size: 100dvh, it does not change the
+ display — so the reason the foot stays put down there is not that the
+ layout changed but that the column is content-height and the auto
+ margin has no free space to distribute. That is a dependency, so name
+ it: give the disclosed rail a min-block-size or a height and the foot
+ floats back down to the bottom of it, silently. The 390px leg of
+ TestTheSidebarRailPutsThePersonAtItsFootAndTheLanguageMenuOpensUpward
+ asserts the rail's own height for exactly that reason. */
+.rst-shell__rail-foot, [rst-shell-rail-foot] { display: flex; flex-direction: column; gap: var(--rst-sp-3); margin-block-start: auto; }
+/* An un-overridden shell renders the wrapper with nothing in it; draw
+ no gap for it, the same way .rst-shell__foot handles its own. */
+.rst-shell__rail-foot:empty, [rst-shell-rail-foot]:empty { display: none; }
+@media (min-width: 800px) {
+ .rst-shell-sidebar, [rst-shell-sidebar] { display: grid; grid-template-columns: 15rem 1fr; }
+ .rst-shell-sidebar > .rst-shell__chrome, [rst-shell-sidebar] > [rst-shell-chrome] { display: none; }
+ .rst-shell-sidebar > .rst-shell__rail, [rst-shell-sidebar] > [rst-shell-rail] { block-size: 100dvh; border-block-end: 0; border-inline-end: 1px solid var(--rst-line); display: flex; inset-block-start: 0; overflow-y: auto; position: sticky; }
+ /* A menu at the foot of a full-height rail is a DROPUP: the same
+ <details> panel, opened block-start-ward instead of block-end-ward,
+ because below it there is only the window's edge. No script — this
+ is one pair of inset values. Only inside this query: below 800px
+ the rail is a content-height column with the whole page under it,
+ so the same menu opens downward there like every other menu in the
+ system. */
+ .rst-shell__rail-foot .rst-dropdown__menu, [rst-shell-rail-foot] [rst-dropdown-menu] { inset-block-end: calc(100% + 4px); inset-block-start: auto; margin-block-start: 0; }
+ /* Where anchor positioning is available the hand-written inset pair
+ has to be handed back, and not because it stopped being right: the
+ insets above are measured against .rst-dropdown's own box, and
+ position-area replaces that box with the region beside the anchor,
+ so calc(100% + 4px) would be 100% of the free space under the foot
+ — the panel launched up the rail. The flip does this case anyway
+ and does it by measuring: there is no room below the rail's foot,
+ so flip-block turns the menu upward on its own, and it turns back
+ down again in a layout where there IS room, which a fixed pair of
+ insets cannot. Specificity is why this is written here rather than
+ left to the generic rule: .rst-shell__rail-foot .rst-dropdown__menu
+ is (0,2,0) and would otherwise outrank it. */
+ @supports (position-area: block-end) and (position-try-fallbacks: flip-block) {
+ .rst-shell__rail-foot .rst-dropdown__menu, [rst-shell-rail-foot] [rst-dropdown-menu] { inset: auto; margin-block-start: 4px; }
+ }
+}
+
+
+/* console shell — a brand-and-account bar across the top AND a
+ navigation rail down the side. topbar without the rail is topbar;
+ sidebar without the bar is sidebar; this is the admin shape both of
+ them were half of, and the one an app used to hand-write.
+
+ TWO CHROMES, ONE CONTROL. Below 800px the bar's tail and the rail
+ both have to go away, and two disclosures would be two things to
+ learn. So one <details rst-shell-menu> gates both: its own next
+ sibling with +, and the rail from the shell root with :has(). One
+ [open], two reveals, one summary on screen at 390px.
+
+ Both reveals are written as HIDE-WHEN-CLOSED rather than
+ show-when-open. In an engine without :has() the rail's hide rule
+ never matches and the rail renders as a column of links under the
+ bar — longer page, navigation intact. Spelled the other way round,
+ the same missing selector is a phone that cannot navigate. Choose
+ the failure. */
+.rst-shell-console .rst-shell__bar, [rst-shell-console] [rst-shell-bar] { align-items: center; background: var(--rst-surface); border-block-end: 1px solid var(--rst-line); display: flex; flex-wrap: wrap; gap: var(--rst-sp-4); padding-block: 0.5rem; padding-inline: var(--rst-sp-4); }
+.rst-shell-console .rst-shell__menu, [rst-shell-console] [rst-shell-menu] { margin-inline-start: auto; }
+.rst-shell-console .rst-shell__menu > summary, [rst-shell-console] [rst-shell-menu] > summary { align-items: center; border: 1px solid var(--rst-line); border-radius: var(--rst-radius-sm); cursor: pointer; display: flex; font-size: var(--rst-fs-sm); font-weight: 550; gap: 0.35rem; list-style: none; min-block-size: 24px; padding-block: 0.3rem; padding-inline: 0.55rem; }
+.rst-shell-console .rst-shell__menu > summary::-webkit-details-marker, [rst-shell-console] [rst-shell-menu] > summary::-webkit-details-marker { display: none; }
+/* The rail, narrow: a full-width column under the bar, disclosed. It
+ holds navigation and nothing else — the language switcher and the
+ person are on the bar — so there is no rail-foot here and nothing
+ pinned to a bottom edge. box-sizing all the same, because the wide
+ query below sizes something in this subtree against the viewport and
+ a viewport promise has to be kept by the border box. */
+.rst-shell-console > .rst-shell__rail, [rst-shell-console] > [rst-shell-rail] { background: var(--rst-surface); border-block-end: 1px solid var(--rst-line); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--rst-sp-3); padding: var(--rst-sp-4); }
+.rst-shell-console .rst-shell__nav, [rst-shell-console] [rst-shell-nav] { flex-direction: column; gap: 2px; }
+.rst-shell-console .rst-shell__nav a, [rst-shell-console] [rst-shell-nav] a { border-block-end: 0; border-radius: var(--rst-radius-sm); display: block; padding-block: 0.35rem; padding-inline: 0.55rem; }
+.rst-shell-console .rst-shell__nav a:hover, [rst-shell-console] [rst-shell-nav] a:hover { background: var(--rst-accent-soft); color: var(--rst-text); }
+.rst-shell-console .rst-shell__nav a[aria-current], [rst-shell-console] [rst-shell-nav] a[aria-current] { background: var(--rst-accent-soft); color: var(--rst-accent); font-weight: 600; }
+/* The two hide rules. Same [open], two combinators. */
+.rst-shell-console .rst-shell__menu:not([open]) + .rst-shell__tail, [rst-shell-console] [rst-shell-menu]:not([open]) + [rst-shell-tail] { display: none; }
+.rst-shell-console:has(.rst-shell__menu:not([open])) > .rst-shell__rail, [rst-shell-console]:has([rst-shell-menu]:not([open])) > [rst-shell-rail] { display: none; }
+/* Disclosed, the tail is a column across the full width of the wrapped
+ bar. The account's margin-inline-start: auto has to be undone by
+ hand and stretch does not do it: in a column flex box the inline
+ axis is the CROSS axis, and an item with an auto cross-axis margin
+ is exempt from stretching — the same trap the topbar documents. */
+.rst-shell-console .rst-shell__menu[open] + .rst-shell__tail, [rst-shell-console] [rst-shell-menu][open] + [rst-shell-tail] { display: flex; flex-basis: 100%; flex-direction: column; gap: var(--rst-sp-3); }
+.rst-shell-console .rst-shell__tail > .rst-shell__account, [rst-shell-console] [rst-shell-tail] > [rst-shell-account] { margin-inline-start: 0; }
+@media (min-width: 800px) {
+ /* The frame: bar across the top, rail beside the page, footer under
+ the page and not under the rail. Named areas rather than DOM
+ order, because the DOM order is the reading order and must not be
+ spent on layout — and areas map to the block and inline axes, so
+ an RTL locale gets the rail on the other side with no second rule.
+ min-block-size, never block-size: the rail reaches the foot of a
+ short page, and a long one still scrolls the document. */
+ .rst-shell-console, [rst-shell-console] { display: grid; grid-template-areas: "bar bar" "rail main" "rail foot"; grid-template-columns: 15rem 1fr; grid-template-rows: auto 1fr auto; min-block-size: 100dvh; }
+ .rst-shell-console > .rst-shell__bar, [rst-shell-console] > [rst-shell-bar] { grid-area: bar; }
+ .rst-shell-console > .rst-shell__main, [rst-shell-console] > [rst-shell-main] { grid-area: main; }
+ .rst-shell-console > .rst-shell__foot, [rst-shell-console] > [rst-shell-foot] { grid-area: foot; }
+ .rst-shell-console .rst-shell__menu, [rst-shell-console] [rst-shell-menu] { display: none; }
+ /* Every undo below repeats the narrow rule's own selector, because a
+ media query adds no specificity: without the :has() spelling here
+ a reader who opened the menu and then widened the window would
+ keep a hidden rail. */
+ .rst-shell-console .rst-shell__tail,
+ [rst-shell-console] [rst-shell-tail],
+ .rst-shell-console .rst-shell__menu:not([open]) + .rst-shell__tail,
+ [rst-shell-console] [rst-shell-menu]:not([open]) + [rst-shell-tail],
+ .rst-shell-console .rst-shell__menu[open] + .rst-shell__tail,
+ [rst-shell-console] [rst-shell-menu][open] + [rst-shell-tail] { display: contents; }
+ .rst-shell-console .rst-shell__tail > .rst-shell__account, [rst-shell-console] [rst-shell-tail] > [rst-shell-account] { margin-inline-start: auto; }
+ .rst-shell-console > .rst-shell__rail, [rst-shell-console] > [rst-shell-rail] { border-block-end: 0; border-inline-end: 1px solid var(--rst-line); display: flex; grid-area: rail; }
+ /* The undo is a rule of ITS OWN, and this is the whole reason: a
+ selector list is invalid as a whole if any selector in it is
+ invalid, so an engine that cannot parse :has() drops every
+ declaration in the list — including grid-area: rail, which has
+ nothing to do with :has() and which this shell's wide layout is
+ built on. Co-listed, the four selectors above cost the legacy
+ engine its declared frame and left the rail in the right cell only
+ because grid auto-placement happened to put it there. Split, the
+ plain pair always applies and only the fight over `display` — the
+ one declaration the narrow hide rule contests — rides on :has().
+ That is the failure direction this shell chose, actually chosen
+ rather than nearly chosen. */
+ .rst-shell-console:has(.rst-shell__menu:not([open])) > .rst-shell__rail,
+ [rst-shell-console]:has([rst-shell-menu]:not([open])) > [rst-shell-rail] { display: flex; }
+ /* THE VIEWPORT. The rail itself is a grid item stretched to the row,
+ which can be taller than the window — that is what makes the
+ background reach the foot of a long page. So the thing that has to
+ fit the window is the nav, and it is the nav that is sized against
+ it: sticky, capped at the viewport MINUS the two gaps it is inset
+ by, measured as a border box, scrolling itself when an app's
+ navigation is longer than that.
+ This is the shipped regression, avoided by construction rather
+ than by care: block-size: 100dvh on a content box that also
+ carried padding gave a border box 32px taller than the window, and
+ the gate that missed it asked where the person sat inside the rail
+ — a question that stayed true while the rail hung off the screen.
+ TestTheConsoleRailFitsTheViewport asks the other question, and
+ carries a control page that must answer it the other way. */
+ .rst-shell-console > .rst-shell__rail > .rst-shell__nav, [rst-shell-console] > [rst-shell-rail] > [rst-shell-nav] { box-sizing: border-box; inset-block-start: var(--rst-sp-4); max-block-size: calc(100dvh - 2 * var(--rst-sp-4)); overflow-y: auto; position: sticky; }
+}
+
+/* error page — one centred column, whatever shell it lands in: the
+ status as a quiet label above the sentence, one or two ways out, and
+ the reference last, where an operator asked to quote it will find it.
+ Logical properties throughout, so an RTL locale mirrors it with no
+ second rule. */
+.rst-error, [rst-error] { margin-inline: auto; max-inline-size: 28rem; padding-block: 4rem var(--rst-sp-6); padding-inline: var(--rst-sp-4); text-align: center; }
+.rst-error__status, [rst-error-status] { color: var(--rst-text-faint); font-size: var(--rst-fs-xs); font-weight: 600; letter-spacing: 0.08em; margin: 0; }
+.rst-error__title, [rst-error-title] { color: var(--rst-text); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; margin-block: var(--rst-sp-2) 0; }
+.rst-error__body, [rst-error-body] { color: var(--rst-text-muted); margin-block: var(--rst-sp-3) 0; }
+.rst-error__cta, [rst-error-cta] { display: flex; flex-wrap: wrap; gap: var(--rst-sp-2); justify-content: center; margin-block: var(--rst-sp-5) 0; }
+.rst-error__ref, [rst-error-ref] { color: var(--rst-text-faint); margin-block: 2rem 0; }
+
+/* ---------------------------------------------------------------------
+ Utilities, last on purpose.
+
+ .rst-sr-only competes with component rules of the same specificity —
+ both are single class selectors — so the cascade falls to source
+ order. Declared earlier it LOSES: .rst-input's width:100% beat its
+ inline-size:1px. Keep this block at the end of the file so the utility
+ wins wherever it is applied; a test asserts it stays here.
+
+ What that does NOT buy: a replaced element such as <select> has an
+ intrinsic minimum size, so inline-size:1px does not shrink it to 1px
+ whoever wins — measured at ~21px in Chromium. clip-path is what
+ actually hides these, and position:absolute is what keeps them out of
+ flow. Code that wants a genuinely minimal box (select.js does) should
+ drop the component class rather than rely on this.
+ --------------------------------------------------------------------- */
+
+/* Visually hidden, but in the DOM and the tab order — and it un-hides on
+ keyboard focus, because a focused control a sighted keyboard user
+ cannot see is a trap. */
+.rst-sr-only {
+ clip-path: inset(50%);
+ block-size: 1px;
+ inline-size: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+}
+.rst-sr-only:focus-visible {
+ background: var(--rst-accent);
+ border: 0;
+ border-radius: var(--rst-radius-sm);
+ block-size: auto;
+ clip-path: none;
+ color: var(--rst-on-accent);
+ cursor: pointer;
+ font: inherit;
+ font-size: var(--rst-fs-sm);
+ inline-size: auto;
+ overflow: visible;
+ padding: 0.3rem 0.6rem;
+ position: static;
+ white-space: normal;
+}
diff --git a/internal/fichas/templates/errors.html b/internal/fichas/templates/errors.html
new file mode 100644
index 0000000..73a0e8c
--- /dev/null
+++ b/internal/fichas/templates/errors.html
@@ -0,0 +1,9 @@
+{{/* errors.html — the app's error page: layout.html's content block
+ rendered by render.go's ErrorPage, which cmd/<app>/main.go points
+ Options.ErrorPage at (so a panic gets this page) and which the app
+ can wire to Ctx.ErrorPage too as handlers grow. All the wording
+ and layout live in the partial below — restyle the error page by
+ editing this file, or hand it Title/Body/HomeHref/BackHref to
+ override the partial's own catalog defaults; see
+ ui/partials/error-page.html for what it accepts. */}}
+{{define "content"}}{{template "error-page" dict "Status" .Status "Ref" .Ref}}{{end}}
diff --git a/internal/fichas/templates/index.html b/internal/fichas/templates/index.html
new file mode 100644
index 0000000..dd9abab
--- /dev/null
+++ b/internal/fichas/templates/index.html
@@ -0,0 +1,3 @@
+{{define "content"}}
+<h1>Hello, World — this is a rastrillo app.</h1>
+{{end}}
diff --git a/internal/fichas/templates/layout.html b/internal/fichas/templates/layout.html
new file mode 100644
index 0000000..67f5cff
--- /dev/null
+++ b/internal/fichas/templates/layout.html
@@ -0,0 +1,26 @@
+{{define "layout"}}<!doctype html>
+<html lang="{{block "lang" .}}en{{end}}" dir="{{block "dir" .}}ltr{{end}}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{block "title" .}}Hello{{end}}</title>
+<link rel="stylesheet" href="{{asset "static/tokens.css"}}">
+<link rel="stylesheet" href="{{asset "static/theme.css"}}">
+<script defer src="{{asset "static/rastrillo.js"}}"></script>
+{{iconAssets}}
+<script defer src="{{asset "static/select.js"}}"></script>
+<script defer src="{{asset "static/datetime.js"}}"></script>
+{{/* head is the app's own slot in <head>: a favicon, a meta tag, one
+ more stylesheet. Empty by default, last in the head so an app's
+ own CSS wins over the framework's, and the only block in the
+ three shells that is not chrome. */}}
+{{block "head" .}}{{end}}
+</head>
+<body>
+<a rst-skip href="#main">{{T "rastrillo.ui.shell_skip"}}</a>
+<main rst-page id="main">
+{{template "content" .}}
+</main>
+</body>
+</html>
+{{end}}
diff --git a/internal/fichastest/browser_test.go b/internal/fichastest/browser_test.go
new file mode 100644
index 0000000..29f8453
--- /dev/null
+++ b/internal/fichastest/browser_test.go
@@ -0,0 +1,53 @@
+//go:build browser
+
+// The browser drive: the whole app in a real Chromium, wired exactly
+// as cmd/fichas/main.go wires it — loud on any console error, failed
+// request, 4xx/5xx, or JS value that leaked to the screen unrendered.
+// Not part of the plain suite:
+//
+// go test -tags browser ./...
+//
+// It needs a Chromium: on PATH, via RASTRILLO_CHROME, or in a
+// Playwright cache. A skip is not a pass — with no browser this fails,
+// unless RASTRILLO_BROWSER_OPTIONAL is set, which makes the skip a
+// deliberate visible choice rather than an accident.
+package fichastest
+
+import (
+ "io"
+ "log/slog"
+ "net/http"
+ "path/filepath"
+ "testing"
+
+ "github.com/carlosframework/rastrillo/db"
+ "github.com/carlosframework/rastrillo/harness"
+ "github.com/chromedp/chromedp"
+
+ fichas "amadan.net/oficina/fichas/internal/fichas"
+)
+
+// TestBrowserWalk is the minimal loud walk: the home screen arrives
+// with nothing wrong anywhere the rig watches. Grow it with the app —
+// each screen a flow reaches earns a Screen() line, and an expected
+// probe (a signed-out 401, say) earns a rig.Allow.
+func TestBrowserWalk(t *testing.T) {
+ rig := harness.New(t, func(origin string) http.Handler {
+ // The scaffold's own wiring, origin included: the rig hands
+ // the app its localhost origin before serving — the same seam
+ // main.go fills from FICHAS_ORIGIN.
+ logger := slog.New(slog.NewTextHandler(io.Discard, nil))
+ d, err := db.Open(filepath.Join(t.TempDir(), "app.db"), logger)
+ if err != nil {
+ t.Fatalf("db.Open: %v", err)
+ }
+ t.Cleanup(func() { d.Close() })
+ mux, err := fichas.App(d, origin, logger)
+ if err != nil {
+ t.Fatalf("App: %v", err)
+ }
+ return mux
+ })
+ rig.Run(chromedp.Navigate(rig.Origin + "/"))
+ rig.Screen("body", "home")
+}
diff --git a/internal/fichastest/harness_test.go b/internal/fichastest/harness_test.go
new file mode 100644
index 0000000..f748035
--- /dev/null
+++ b/internal/fichastest/harness_test.go
@@ -0,0 +1,62 @@
+// Package fichastest tests the app from the outside: real HTTP
+// requests against the real router, wired exactly as
+// cmd/fichas/main.go wires it.
+//
+// The TDD loop: write a failing test here, make it pass in
+// internal/fichas, repeat.
+package fichastest
+
+import (
+ "io"
+ "log/slog"
+ "net/http"
+ "net/http/httptest"
+ "net/url"
+ "path/filepath"
+ "strings"
+ "testing"
+
+ "github.com/carlosframework/rastrillo/db"
+
+ fichas "amadan.net/oficina/fichas/internal/fichas"
+)
+
+// testOrigin is the origin newApp wires and post presents as its
+// same-origin evidence — the pair a browser form submission would be.
+const testOrigin = "http://app.test"
+
+// newApp builds the whole app per test over a fresh temp database,
+// exactly as main.go does.
+func newApp(t *testing.T) http.Handler {
+ t.Helper()
+ logger := slog.New(slog.NewTextHandler(io.Discard, nil))
+ d, err := db.Open(filepath.Join(t.TempDir(), "app.db"), logger)
+ if err != nil {
+ t.Fatalf("db.Open: %v", err)
+ }
+ t.Cleanup(func() { d.Close() })
+ mux, err := fichas.App(d, testOrigin, logger)
+ if err != nil {
+ t.Fatalf("App: %v", err)
+ }
+ return mux
+}
+
+func get(t *testing.T, h http.Handler, target string) *httptest.ResponseRecorder {
+ t.Helper()
+ rec := httptest.NewRecorder()
+ h.ServeHTTP(rec, httptest.NewRequest(http.MethodGet, target, nil))
+ return rec
+}
+
+func post(t *testing.T, h http.Handler, target string, form url.Values) *httptest.ResponseRecorder {
+ t.Helper()
+ req := httptest.NewRequest(http.MethodPost, target, strings.NewReader(form.Encode()))
+ req.Header.Set("Content-Type", "application/x-www-form-urlencoded")
+ // The same-origin evidence csrf.Protect requires — every current
+ // browser sends it on a form POST; a test client must too.
+ req.Header.Set("Origin", testOrigin)
+ rec := httptest.NewRecorder()
+ h.ServeHTTP(rec, req)
+ return rec
+}
diff --git a/internal/fichastest/index_test.go b/internal/fichastest/index_test.go
new file mode 100644
index 0000000..54adae5
--- /dev/null
+++ b/internal/fichastest/index_test.go
@@ -0,0 +1,71 @@
+package fichastest
+
+import (
+ "net/http"
+ "net/http/httptest"
+ "regexp"
+ "strings"
+ "testing"
+
+ fichas "amadan.net/oficina/fichas/internal/fichas"
+)
+
+// hashedStylesheet is the fingerprinted URL shape the index page
+// links: /static/tokens.<16 hex>.css.
+var hashedStylesheet = regexp.MustCompile(`/static/tokens\.[0-9a-f]{16}\.css`)
+
+func TestIndexRenders(t *testing.T) {
+ rec := get(t, newApp(t), "/")
+ if rec.Code != http.StatusOK {
+ t.Fatalf("GET /: status %d, want 200", rec.Code)
+ }
+ if !strings.Contains(rec.Body.String(), "this is a rastrillo app") {
+ t.Errorf("GET /: page is missing its heading:\n%s", rec.Body.String())
+ }
+}
+
+func TestIndexLinksFingerprintedStylesheet(t *testing.T) {
+ h := newApp(t)
+ href := hashedStylesheet.FindString(get(t, h, "/").Body.String())
+ if href == "" {
+ t.Fatal("index page links no fingerprinted stylesheet")
+ }
+ rec := get(t, h, href)
+ if rec.Code != http.StatusOK {
+ t.Fatalf("GET %s: status %d, want 200", href, rec.Code)
+ }
+ if got := rec.Header().Get("Cache-Control"); got != "public, max-age=31536000, immutable" {
+ t.Errorf("GET %s: Cache-Control = %q, want immutable year", href, got)
+ }
+}
+
+// The bare name keeps working, just never long-cached — so a changed
+// file always shows on an ordinary reload.
+func TestBareAssetNameStaysFresh(t *testing.T) {
+ rec := get(t, newApp(t), "/static/tokens.css")
+ if rec.Code != http.StatusOK {
+ t.Fatalf("GET /static/tokens.css: status %d, want 200", rec.Code)
+ }
+ if got := rec.Header().Get("Cache-Control"); got != "no-cache" {
+ t.Errorf("Cache-Control = %q, want no-cache", got)
+ }
+}
+
+// ErrorPage is what main.go points Options.ErrorPage at (and the seam
+// to wire into Ctx.ErrorPage as handlers grow); called directly, it
+// pins that a panic's page is the framework's error-page partial, not
+// a stray net/http default.
+func TestErrorPageRendersFrameworkPartial(t *testing.T) {
+ rec := httptest.NewRecorder()
+ fichas.ErrorPage(rec, httptest.NewRequest(http.MethodGet, "/", nil), http.StatusInternalServerError, "abc123")
+ if rec.Code != http.StatusInternalServerError {
+ t.Fatalf("ErrorPage: status %d, want %d", rec.Code, http.StatusInternalServerError)
+ }
+ body := rec.Body.String()
+ if !strings.Contains(body, "Something went wrong on our side") {
+ t.Errorf("ErrorPage body missing the 500 title:\n%s", body)
+ }
+ if !strings.Contains(body, "abc123") {
+ t.Errorf("ErrorPage body missing the ref:\n%s", body)
+ }
+}
diff --git a/internal/fichastest/vendored_test.go b/internal/fichastest/vendored_test.go
new file mode 100644
index 0000000..939089e
--- /dev/null
+++ b/internal/fichastest/vendored_test.go
@@ -0,0 +1,54 @@
+package fichastest
+
+import (
+ "bytes"
+ "os"
+ "path/filepath"
+ "testing"
+
+ "github.com/carlosframework/rastrillo/ui"
+)
+
+// vendoredTheme is the theme this app was scaffolded with. Change it
+// here when you swap static/theme.css for another of ui.ThemeNames().
+const vendoredTheme = "day"
+
+// vendoredIsMine names the vendored files this app has edited
+// DELIBERATELY. Add one here when you mean to diverge: this test stops
+// pinning it, and rastrillo doctor leaves it alone too. The file was
+// yours from the moment the scaffold wrote it — this is only where you
+// record that the edit was on purpose, so the next reader (and the next
+// upgrade) can tell it from drift.
+var vendoredIsMine = map[string]bool{
+ // "tokens.css": true,
+}
+
+// The scaffold delivered these files once; they are app-owned from
+// then on. This test pins each vendored copy byte-identical to the
+// library it came from: a reviewer runs the suite instead of reading
+// ~56KB of assets as app diff, and a framework upgrade that forgets
+// to re-copy is caught instead of drifting silently.
+//
+// The list is ui.VendoredAssets — the same function rastrillo new
+// wrote these files from and rastrillo doctor compares them against —
+// so a file added to the library's vendored set is pinned here without
+// this file changing.
+func TestVendoredAssetsMatchTheLibrary(t *testing.T) {
+ assets, ok := ui.VendoredAssets(vendoredTheme)
+ if !ok {
+ t.Fatalf("unknown theme %q", vendoredTheme)
+ }
+ for name, lib := range assets {
+ if vendoredIsMine[name] {
+ continue
+ }
+ vendored, err := os.ReadFile(filepath.Join("..", "fichas", "static", name))
+ if err != nil {
+ t.Errorf("read vendored %s: %v", name, err)
+ continue
+ }
+ if !bytes.Equal(vendored, lib) {
+ t.Errorf("static/%s differs from the library copy; re-copy it with rastrillo doctor --fix (or add it to vendoredIsMine if the edit was deliberate)", name)
+ }
+ }
+}