623723a · oficina/calendar

diff --git a/AGENTS.md b/AGENTS.md

index 2e6b8a6..491bb16 100644

--- a/AGENTS.md

+++ b/AGENTS.md

@@ -55,7 +55,7 @@ pass by reading a file the data has not reached.

|---|---|---|---|

| 1 | **Store what the person said**: wall-clock time plus IANA zone is the record; the UTC columns are a derived index | Storing the instant as truth — a tzdata update then moves a meeting and nobody can say what was meant | This session, 2026-09-02 |

-| 2 | Pin rastrillo v0.23.0 and take theme `day` directly from `ui.ThemeCSS` | Consuming `estilo`, which is `day` byte-for-byte today and pins v0.22.0 — adopting it buys nothing and drags us back a release ("the two-pins trap", estilo's own AGENTS.md) | This session, 2026-09-02 |

+| 2 | *(Superseded 2026-09-29: the suite's theme is estilo's Calma — estilo AGENTS.md row 8 — so Calendar now serves `theme.ForApp("calendar")`, written to static/theme.css by scripts/writeestilo and pinned by TestThemeIsEstilosForCalendar.)* Pin rastrillo v0.23.0 and take theme `day` directly from `ui.ThemeCSS` | Consuming `estilo`, which is `day` byte-for-byte today and pins v0.22.0 — adopting it buys nothing and drags us back a release ("the two-pins trap", estilo's own AGENTS.md) | This session, 2026-09-02 |

| 3 | This app's own components take `cal-` | `rst-` is the framework's and a future release may claim a name; `estilo-` is the suite's, and a month grid is not a suite component until a second app copies one | This session, 2026-09-02 |

| 4 | The recurrence subset is the six a picker offers; anything else is stored verbatim, flagged, and not expanded | Refusing a rule we cannot expand — an importer that eats a rule it does not understand eats data | This session, 2026-09-02 |

| 5 | Reminders are per PERSON, not per event | Per-event reminders — two people on one meeting want different warnings, and the fix needs a person column anyway | This session, 2026-09-02 |

diff --git a/Makefile b/Makefile

index 0e9b3a3..cd8844f 100644

--- a/Makefile

+++ b/Makefile

@@ -128,7 +128,7 @@ credits:

GOOS=$$(go env GOHOSTOS) GOARCH=$$(go env GOHOSTARCH) CGO_ENABLED=0 \

go build -o "$$notices_tmp/notices" amadan.net/oficina/estilo.git/cmd/oficina-notices; \

GOOS=linux GOARCH=arm64 CGO_ENABLED=0 "$$notices_tmp/notices" \

- -package ./cmd/calendar -lucide \

+ -package ./cmd/calendar -lucide -onest \

-exclude amadan.net/oficina/estilo.git,amadan.net/oficina/home/connect,amadan.net/oficina/home/handoff,amadan.net/rastrillo/native/server \

> "$$notices_tmp/notices.json"; \

mv "$$notices_tmp/notices.json" internal/calendar/credits/notices.json

diff --git a/go.mod b/go.mod

index 2170f17..da777bc 100644

--- a/go.mod

+++ b/go.mod

@@ -14,7 +14,7 @@ require (

gorm.io/gorm v1.31.2

)

-require amadan.net/oficina/estilo.git v0.0.0-20260924071126-894afdcb71a9

+require amadan.net/oficina/estilo.git v0.0.0-20260929231226-cce11010ece0

require (

github.com/BurntSushi/toml v1.6.0 // indirect

diff --git a/go.sum b/go.sum

index 9964860..2f15ceb 100644

--- a/go.sum

+++ b/go.sum

@@ -1,5 +1,5 @@

-amadan.net/oficina/estilo.git v0.0.0-20260924071126-894afdcb71a9 h1:vHOkWeJ7mRwLjPbMihf0f7aqz4CLSe0/NseQsHcJUYQ=

-amadan.net/oficina/estilo.git v0.0.0-20260924071126-894afdcb71a9/go.mod h1:4u0jNBtIdMLOsJyrScfqoEuYDJF7BBM3qM9YWbzt6aw=

+amadan.net/oficina/estilo.git v0.0.0-20260929231226-cce11010ece0 h1:Qww+xGIYJaj+6TIX4Knr71ghxeYJjtgFm6WukX6NkGg=

+amadan.net/oficina/estilo.git v0.0.0-20260929231226-cce11010ece0/go.mod h1:4u0jNBtIdMLOsJyrScfqoEuYDJF7BBM3qM9YWbzt6aw=

amadan.net/oficina/home/connect v0.0.0-20260923190447-01166fcfc0a9 h1:K/PaOVdQqRMwifPD6ipiwLeGR5nbFSxm9FxjrDJlZcg=

amadan.net/oficina/home/connect v0.0.0-20260923190447-01166fcfc0a9/go.mod h1:YroavXe43Wietec+po8mtSk4a9Bir2h31Q3iAf4MWxI=

amadan.net/oficina/home/handoff v0.0.0-20260908102137-481d2d57f489 h1:RPKtyry/71i06o8L+gjAaUyexbmG56kO1YPs601URAM=

diff --git a/internal/calendar/credits/notices.json b/internal/calendar/credits/notices.json

index a937eb6..78702c2 100644

--- a/internal/calendar/credits/notices.json

+++ b/internal/calendar/credits/notices.json

@@ -22,6 +22,17 @@

}

]

},

+ {

+ "Name": "Onest",

+ "Version": "Google Fonts v11",

+ "SourceURL": "https://github.com/googlefonts/onest",

+ "Notices": [

+ {

+ "Name": "OFL.txt",

+ "Text": "Copyright 2021 The Onest Project Authors (https://github.com/googlefonts/onest)\n\nThis Font Software is licensed under the SIL Open Font License, Version 1.1.\nThis license is copied below, and is also available with a FAQ at:\nhttps://scripts.sil.org/OFL\n\n\n-----------------------------------------------------------\nSIL OPEN FONT LICENSE Version 1.1 - 26 February 2007\n-----------------------------------------------------------\n\nPREAMBLE\nThe goals of the Open Font License (OFL) are to stimulate worldwide\ndevelopment of collaborative font projects, to support the font creation\nefforts of academic and linguistic communities, and to provide a free and\nopen framework in which fonts may be shared and improved in partnership\nwith others.\n\nThe OFL allows the licensed fonts to be used, studied, modified and\nredistributed freely as long as they are not sold by themselves. The\nfonts, including any derivative works, can be bundled, embedded, \nredistributed and/or sold with any software provided that any reserved\nnames are not used by derivative works. The fonts and derivatives,\nhowever, cannot be released under any other type of license. The\nrequirement for fonts to remain under this license does not apply\nto any document created using the fonts or their derivatives.\n\nDEFINITIONS\n\"Font Software\" refers to the set of files released by the Copyright\nHolder(s) under this license and clearly marked as such. This may\ninclude source files, build scripts and documentation.\n\n\"Reserved Font Name\" refers to any names specified as such after the\ncopyright statement(s).\n\n\"Original Version\" refers to the collection of Font Software components as\ndistributed by the Copyright Holder(s).\n\n\"Modified Version\" refers to any derivative made by adding to, deleting,\nor substituting -- in part or in whole -- any of the components of the\nOriginal Version, by changing formats or by porting the Font Software to a\nnew environment.\n\n\"Author\" refers to any designer, engineer, programmer, technical\nwriter or other person who contributed to the Font Software.\n\nPERMISSION \u0026 CONDITIONS\nPermission is hereby granted, free of charge, to any person obtaining\na copy of the Font Software, to use, study, copy, merge, embed, modify,\nredistribute, and sell modified and unmodified copies of the Font\nSoftware, subject to the following conditions:\n\n1) Neither the Font Software nor any of its individual components,\nin Original or Modified Versions, may be sold by itself.\n\n2) Original or Modified Versions of the Font Software may be bundled,\nredistributed and/or sold with any software, provided that each copy\ncontains the above copyright notice and this license. These can be\nincluded either as stand-alone text files, human-readable headers or\nin the appropriate machine-readable metadata fields within text or\nbinary files as long as those fields can be easily viewed by the user.\n\n3) No Modified Version of the Font Software may use the Reserved Font\nName(s) unless explicit written permission is granted by the corresponding\nCopyright Holder. This restriction only applies to the primary font name as\npresented to the users.\n\n4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font\nSoftware shall not be used to promote, endorse or advertise any\nModified Version, except to acknowledge the contribution(s) of the\nCopyright Holder(s) and the Author(s) or with their explicit written\npermission.\n\n5) The Font Software, modified or unmodified, in part or in whole,\nmust be distributed entirely under this license, and must not be\ndistributed under any other license. The requirement for fonts to\nremain under this license does not apply to any document created\nusing the Font Software.\n\nTERMINATION\nThis license becomes null and void if any of the above conditions are\nnot met.\n\nDISCLAIMER\nTHE FONT SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT\nOF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE\nCOPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\nINCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL\nDAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\nFROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM\nOTHER DEALINGS IN THE FONT SOFTWARE.\n"

+ }

+ ]

+ },

{

"Name": "amadan.net/rastrillo/rastrillo",

"Version": "v0.26.1-0.20260908075707-29e4491631bd",

diff --git a/internal/calendar/credits_inventory_test.go b/internal/calendar/credits_inventory_test.go

index f17c1a1..851c02b 100644

--- a/internal/calendar/credits_inventory_test.go

+++ b/internal/calendar/credits_inventory_test.go

@@ -22,7 +22,7 @@ import (

func TestCreditsMatchProductionDependencies(t *testing.T) {

ctx, cancel := context.WithTimeout(t.Context(), 45*time.Second)

defer cancel()

- command := exec.CommandContext(ctx, "go", "list", "-deps", "-json", "./cmd/calendar")

+ command := exec.CommandContext(ctx, "go", "list", "-buildvcs=false", "-deps", "-json", "./cmd/calendar")

command.Dir = filepath.Join("..", "..")

for _, entry := range os.Environ() {

if !strings.HasPrefix(entry, "GOOS=") && !strings.HasPrefix(entry, "GOARCH=") && !strings.HasPrefix(entry, "CGO_ENABLED=") && !strings.HasPrefix(entry, "GOWORK=") {

@@ -30,9 +30,11 @@ func TestCreditsMatchProductionDependencies(t *testing.T) {

}

command.Env = append(command.Env, "GOOS=linux", "GOARCH=arm64", "CGO_ENABLED=0", "GOWORK=off")

+ var stderr bytes.Buffer

+ command.Stderr = &stderr

raw, err := command.Output()

if err != nil {

- t.Fatal("production dependency graph unavailable", err)

+ t.Fatalf("production dependency graph unavailable: %v\n%s", err, stderr.String())

}

inventory, err := catalog.Collect(bytes.NewReader(raw), map[string]bool{"amadan.net/oficina/estilo.git": true, "amadan.net/oficina/home/handoff": true, "amadan.net/oficina/home/connect": true, "amadan.net/rastrillo/native/server": true})

if err != nil {

@@ -42,7 +44,7 @@ func TestCreditsMatchProductionDependencies(t *testing.T) {

if err != nil {

t.Fatal(err)

}

- inventory.Components = append(inventory.Components, credits.Lucide(), credits.Component{Name: "Go", Version: runtime.Version(), SourceURL: "https://go.dev/LICENSE", Notices: []credits.Notice{{Name: "LICENSE", Text: string(goLicense)}}})

+ inventory.Components = append(inventory.Components, credits.Lucide(), credits.Onest(), credits.Component{Name: "Go", Version: runtime.Version(), SourceURL: "https://go.dev/LICENSE", Notices: []credits.Notice{{Name: "LICENSE", Text: string(goLicense)}}})

sort.Slice(inventory.Components, func(i, j int) bool { return inventory.Components[i].Name < inventory.Components[j].Name })

var embedded creditInventory

if err := json.Unmarshal(creditNotices, &embedded); err != nil {

diff --git a/internal/calendar/handlers.go b/internal/calendar/handlers.go

index c08fd34..d2fd362 100644

--- a/internal/calendar/handlers.go

+++ b/internal/calendar/handlers.go

@@ -63,46 +63,6 @@ func safeReturn(r *http.Request, fallback string) string {

return to

}

-// signin serves GET /signin — the form, and the landing spot for every

-// outcome the auth plugin's own handlers redirect back to. The plugin

-// never renders a page itself: it reports outcomes by redirecting here

-// with a query this handler reads.

-//

-// Every outcome on this page means the same operational thing — "sign

-// in did not complete, ask for a new link" — so the copy stays specific

-// where it can be and shares one honest sentence where it cannot. The

-// plugin deliberately refuses to distinguish unknown, used and expired

-// tokens from one another, so there is nothing finer this page could

-// draw.

-func (h *handlers) signin(w http.ResponseWriter, r *http.Request) {

- q := r.URL.Query()

- var d signinData

- if q.Get("sent") == "1" {

- d.Sent = "Check your email. The link works once, and expires shortly."

- }

- switch q.Get("err") {

- case "":

- case "rate":

- d.Error = "Too many attempts. Wait a few minutes, then try again."

- case "address":

- d.Error = "That does not look like an email address."

- case "expired":

- d.Error = "That link has expired. Ask for a new one."

- default:

- d.Error = "That link did not work. Ask for a new one."

- }

- render(w, "signin", h.page(r, "Sign in", d))

-}

-

-// signinData is the sign-in page's own view data. Sent and Error are

-// mutually exclusive in practice but not by construction: somebody who

-// asks for a second link after a failed one should see both facts, not

-// whichever the template happened to check first.

-type signinData struct {

- Sent string

- Error string

-}

-

// index serves GET / — the calendar itself.

func (h *handlers) index(w http.ResponseWriter, r *http.Request) {

render(w, "index", h.page(r, "Calendar", nil))

diff --git a/internal/calendar/home.go b/internal/calendar/home.go

index 898b44a..70e4c90 100644

--- a/internal/calendar/home.go

+++ b/internal/calendar/home.go

@@ -7,6 +7,7 @@ import (

"errors"

"net/http"

+ "amadan.net/oficina/estilo.git/chrome"

"amadan.net/oficina/home/connect"

"amadan.net/oficina/home/connect/linkstore"

"github.com/carlosframework/rastrillo/csrf"

@@ -58,8 +59,13 @@ func (a *App) newHome(settings *connect.DecodedCredentials, list allowlist) (*ho

}

page := func(w http.ResponseWriter, r *http.Request, state, label string, status int) {

data := connect.Page(state, label)

+ // Where sign-out lands is the Oficina door, with Home's own words.

+ tree, view := pages["home"], any(data)

+ if state == "signedout" {

+ tree, view = pages["signin"], signedOutDoor(r, data.Title, data.Body, chrome.Link{Href: data.Action, Label: data.ActionLabel})

+ }

var buf bytes.Buffer

- if err := pages["home"].ExecuteTemplate(&buf, "layout", a.h.page(r, data.Title, data)); err != nil {

+ if err := tree.ExecuteTemplate(&buf, "layout", a.h.page(r, data.Title, view)); err != nil {

ErrorPage(w, r, http.StatusInternalServerError, "")

return

}

diff --git a/internal/calendar/home_door_test.go b/internal/calendar/home_door_test.go

new file mode 100644

index 0000000..f4b48e5

--- /dev/null

+++ b/internal/calendar/home_door_test.go

@@ -0,0 +1,31 @@

+package calendar

+

+import (

+ "strings"

+ "testing"

+)

+

+// With Home on, the local form (/signin/local) and where sign-out lands

+// (/signed-out) are the Oficina door too. The form still posts to

+// /signin; the signed-out card keeps Home's own words and link.

+func TestHomeSignInPagesAreTheDoor(t *testing.T) {

+ f := newHomeRouterFixture(t)

+ for path, want := range map[string][]string{

+ "/signin/local": {"estilo-door", "<span>Calendar</span>", `action="/signin"`, `name="address"`},

+ "/signin/local?sent=1": {"estilo-door", "Check your email", `href="/signin/local"`},

+ "/signed-out": {"estilo-door", "<span>Calendar</span>", "Signed out", "You can sign in again with Home.", `href="/signin">Sign in with Home`},

+ } {

+ w := f.do("GET", path, "")

+ if w.Code != 200 {

+ t.Fatalf("GET %s: status %d", path, w.Code)

+ }

+ for _, s := range want {

+ if !strings.Contains(w.Body.String(), s) {

+ t.Errorf("GET %s is missing %q:\n%s", path, s, w.Body.String())

+ }

+ if got := f.do("GET", "/signed-out", "").Header().Get("Cache-Control"); got != "no-store" {

+ t.Errorf("/signed-out Cache-Control = %q, want no-store", got)

+ }

+}

diff --git a/internal/calendar/render.go b/internal/calendar/render.go

index 7152289..3d6f7fc 100644

--- a/internal/calendar/render.go

+++ b/internal/calendar/render.go

@@ -1,18 +1,15 @@

package calendar

import (

+ "amadan.net/oficina/estilo.git/chrome"

"amadan.net/oficina/estilo.git/credits"

+ "amadan.net/oficina/estilo.git/menu"

"amadan.net/oficina/home/connect"

"bytes"

"embed"

"html/template"

- "io/fs"

"net/http"

- "testing/fstest"

- "amadan.net/oficina/estilo.git/base"

- "amadan.net/oficina/estilo.git/chrome"

- estilomenu "amadan.net/oficina/estilo.git/menu"

"github.com/carlosframework/rastrillo"

"github.com/carlosframework/rastrillo/sessions"

"github.com/carlosframework/rastrillo/ui"

@@ -32,33 +29,7 @@ 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 New mounts.

-var assets = rastrillo.NewAssets(staticFiles())

-

-// staticFiles adds estilo's versioned shared chrome to Calendar's asset

-// tree. Keeping the bytes behind the normal asset handler fingerprints them

-// with the rest of the page, rather than making the browser cache a stale

-// suite bar across an adoption.

-func staticFiles() fs.FS {

- files := fstest.MapFS{}

- if err := fs.WalkDir(appFS, "static", func(name string, entry fs.DirEntry, err error) error {

- if err != nil || entry.IsDir() {

- return err

- }

- data, err := appFS.ReadFile(name)

- if err != nil {

- return err

- }

- files[name] = &fstest.MapFile{Data: data}

- return nil

- }); err != nil {

- panic(err)

- }

- files["static/estilo/base.css"] = &fstest.MapFile{Data: base.CSS()}

- files["static/estilo/menu.css"] = &fstest.MapFile{Data: estilomenu.CSS()}

- files["static/estilo/chrome.css"] = &fstest.MapFile{Data: chrome.CSS()}

- files["static/estilo/chrome.js"] = &fstest.MapFile{Data: chrome.JS()}

- return files

-}

+var assets = rastrillo.NewAssets(appFS)

// pageNames is every page this app renders. Kept as a list rather than

// discovered from the filesystem so a template that is never rendered

@@ -89,7 +60,10 @@ func init() {

Funcs(template.FuncMap{"asset": assets.Path}).

Funcs(appFuncs).

ParseFS(ui.Templates(), "*.html"))

- t = template.Must(t.ParseFS(estilomenu.Templates(), "templates/*.html"))

+ // estilo's menu and chrome: the bar, the account menu, the error

+ // page and the sign-in door. chrome's templates call ui's field and

+ // callout partials, already in the tree, and name menu's.

+ t = template.Must(t.ParseFS(menu.Templates(), "templates/*.html"))

t = template.Must(t.ParseFS(chrome.Templates(), "templates/*.html"))

t = template.Must(t.ParseFS(appFS, "templates/layout.html", "templates/_chip.html",

"templates/_quickadd.html", "templates/_quickpane.html", "templates/_bookingpane.html",

diff --git a/internal/calendar/routes.go b/internal/calendar/routes.go

index 5a4fa20..275c52c 100644

--- a/internal/calendar/routes.go

+++ b/internal/calendar/routes.go

@@ -1,6 +1,8 @@

package calendar

import (

+ "amadan.net/oficina/estilo.git/sky"

+ "amadan.net/oficina/estilo.git/theme"

"amadan.net/oficina/home/connect"

"amadan.net/oficina/home/handoff"

"net/http"

@@ -171,6 +173,12 @@ func (a *App) routes(h *handlers, authPlugin *rauth.Auth, list allowlist, origin

mux := http.NewServeMux()

// The app serves its own static files — the framework never does.

mux.Handle("GET /static/", assets.Handler())

+ // Onest, Calma's typeface, served by estilo under its versioned prefix.

+ mux.Handle("GET "+theme.FontPrefix, theme.FontHandler())

+ // The sign-in door's sky: a closed set of drawings, sessionless and

+ // reachable signed out. More specific than "GET /static/", so the

+ // app's own asset handler never sees these paths.

+ mux.Handle("GET "+sky.Prefix, sky.Handler())

mux.HandleFunc("GET /static/credits.css", serveCreditsCSS)

a.mountTick(mux, h)

mux.Handle("/", a.scheduled.middleware(r))

diff --git a/internal/calendar/signin.go b/internal/calendar/signin.go

new file mode 100644

index 0000000..5645d76

--- /dev/null

+++ b/internal/calendar/signin.go

@@ -0,0 +1,97 @@

+package calendar

+

+import (

+ "net/http"

+

+ "amadan.net/oficina/estilo.git/chrome"

+ "amadan.net/oficina/estilo.git/sky"

+)

+

+// The sign-in pages are the Oficina door (estilo chrome): one card on the

+// suite's sky, Calendar's own mark and name at its head, in Calendar's

+// accent. Only the drawing changed; every outcome, redirect and sentence

+// below is the one the old page had.

+

+// signin serves GET /signin — the form, and the landing spot for every

+// outcome the auth plugin's own handlers redirect back to. The plugin

+// never renders a page itself: it reports outcomes by redirecting here

+// with a query this handler reads.

+//

+// Every outcome on this page means the same operational thing — "sign

+// in did not complete, ask for a new link" — so the copy stays specific

+// where it can be and shares one honest sentence where it cannot. The

+// plugin deliberately refuses to distinguish unknown, used and expired

+// tokens from one another, so there is nothing finer this page could

+// draw.

+//

+// ?sent=1 is the check-your-email card, whose link comes back to this

+// same path — /signin, or /signin/local when Home sign-in is on — so a

+// second link is one click away, as it was when the form stayed below

+// the notice.

+func (h *handlers) signin(w http.ResponseWriter, r *http.Request) {

+ q := r.URL.Query()

+ form := &chrome.SignIn{

+ Icon: assets.Path("static/brand/icon.svg"),

+ App: "Calendar",

+ Sky: sky.For(r.Host),

+ Heading: "Sign in",

+ Lede: "A calendar for one team, on one instance.",

+ Action: "/signin",

+ AddressLabel: "Email address",

+ Help: "We email you a link. There is no password to forget.",

+ Submit: "Email me a link",

+ OpenSource: &chrome.Link{Href: "/help/open-source", Label: "Open source"},

+ }

+ switch q.Get("err") {

+ case "":

+ case "rate":

+ form.Error = "Too many attempts. Wait a few minutes, then try again."

+ case "address":

+ form.AddressError = "That does not look like an email address."

+ case "expired":

+ form.Error = "That link has expired. Ask for a new one."

+ default:

+ form.Error = "That link did not work. Ask for a new one."

+ }

+ sent := q.Get("sent") == "1"

+ failed := form.Error != "" || form.AddressError != ""

+ switch {

+ case sent && !failed:

+ render(w, "signin", h.page(r, "Sign in", signinData{Sent: &chrome.SignInNotice{

+ Icon: form.Icon,

+ App: form.App,

+ Sky: form.Sky,

+ Heading: "Check your email",

+ Body: "The link works once, and expires shortly.",

+ Link: &chrome.Link{Href: r.URL.Path, Label: "Send another link"},

+ }}))

+ case sent:

+ // Somebody who asks for a second link after a failed one should

+ // see both facts, not whichever the page happened to check first.

+ form.Lede = "Check your email. The link works once, and expires shortly."

+ fallthrough

+ default:

+ render(w, "signin", h.page(r, "Sign in", signinData{Form: form}))

+ }

+}

+

+// signinData is the sign-in page's own view data: exactly one of the

+// three door cards.

+type signinData struct {

+ Form *chrome.SignIn

+ Sent *chrome.SignInNotice

+ SignedOut *chrome.SignInNotice

+}

+

+// signedOutDoor is where Home sign-out lands, drawn as the door: Home's

+// own heading, sentence and "Sign in with Home" link, on Calendar's card.

+func signedOutDoor(r *http.Request, heading, body string, link chrome.Link) signinData {

+ return signinData{SignedOut: &chrome.SignInNotice{

+ Icon: assets.Path("static/brand/icon.svg"),

+ App: "Calendar",

+ Sky: sky.For(r.Host),

+ Heading: heading,

+ Body: body,

+ Link: &link,

+ }}

+}

diff --git a/internal/calendar/static/base.css b/internal/calendar/static/base.css

new file mode 100644

index 0000000..9873e71

--- /dev/null

+++ b/internal/calendar/static/base.css

@@ -0,0 +1,15 @@

+/* base/base.css: links. Zero specificity on purpose: any component rule wins.

+ Prose links keep their underline, because colour must never carry meaning

+ alone. Chrome links (bar, nav, menus, rows, buttons) set their own colour

+ and text-decoration, and every one of them outranks :where(). */

+:where(a:any-link) {

+ color: var(--rst-accent);

+ text-decoration-line: underline;

+ text-decoration-thickness: 1px;

+ text-underline-offset: 0.15em;

+}

+:where(a:any-link:hover) { text-decoration-thickness: 2px; }

+:where(a:any-link:focus-visible) {

+ outline: 2px solid var(--rst-accent);

+ outline-offset: 2px;

+}

diff --git a/internal/calendar/static/brand/apple-touch-icon.png b/internal/calendar/static/brand/apple-touch-icon.png

index bc1747b..414cb24 100644

Binary files a/internal/calendar/static/brand/apple-touch-icon.png and b/internal/calendar/static/brand/apple-touch-icon.png differ

diff --git a/internal/calendar/static/brand/brand.css b/internal/calendar/static/brand/brand.css

index 2e194c6..27e25ad 100644

--- a/internal/calendar/static/brand/brand.css

+++ b/internal/calendar/static/brand/brand.css

@@ -1,4 +1,5 @@

-/* Oficina brand artwork. Source: oficina/estilo brand/. */

+/* Oficina brand artwork. Source: oficina/estilo brand/. The icons carry

+ their own squircle and transparent corners, so nothing here rounds them. */

[estilo-brand] {

display: inline-flex;

align-items: center;

@@ -10,7 +11,6 @@

flex-shrink: 0;

inline-size: 1.75rem;

block-size: 1.75rem;

- border-radius: 21%;

vertical-align: middle;

}

[estilo-brand-icon="listing"] {

diff --git a/internal/calendar/static/brand/icon-32.png b/internal/calendar/static/brand/icon-32.png

index 68d97aa..8f1e626 100644

Binary files a/internal/calendar/static/brand/icon-32.png and b/internal/calendar/static/brand/icon-32.png differ

diff --git a/internal/calendar/static/brand/icon.svg b/internal/calendar/static/brand/icon.svg

index 97108f8..72c5aca 100644

--- a/internal/calendar/static/brand/icon.svg

+++ b/internal/calendar/static/brand/icon.svg

@@ -1,10 +1 @@

-<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024" role="img" aria-label="Calendar"><title>Calendar</title><rect x="0" y="0" width="1024" height="1024" rx="0" fill="#CB3F50"/><g transform="translate(153.6 153.6) scale(29.866666666666664)" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v3" />

- <path d="M16 2v3" />

- <rect x="3" y="3" width="18" height="18" rx="2" />

- <path d="M3 9h18" />

- <path d="M8 13h.01" />

- <path d="M12 13h.01" />

- <path d="M16 13h.01" />

- <path d="M8 17h.01" />

- <path d="M12 17h.01" />

- <path d="M16 17h.01" /></g></svg>

+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 100 100" role="img" aria-label="Calendar"><title>Calendar</title><defs><clipPath id="s"><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z"/></clipPath><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#d46568"/><stop offset="1" stop-color="#bc484f"/></linearGradient><filter id="h" x="-40%" y="-60%" width="180%" height="220%"><feGaussianBlur stdDeviation="5.5"/></filter></defs><g clip-path="url(#s)"><rect width="100" height="100" fill="url(#g)"/><g filter="url(#h)" opacity=".7"><rect x="4.00" y="44.9" width="0.88" height="11.0" fill="#feb8b4"/><rect x="5.57" y="37.3" width="0.65" height="17.8" fill="#ffaab0"/><rect x="7.47" y="29.0" width="1.11" height="25.1" fill="#ffc7c7"/><rect x="9.64" y="37.7" width="0.80" height="15.0" fill="#ffb3ad"/><rect x="11.83" y="32.4" width="1.03" height="18.9" fill="#feb9b3"/><rect x="13.88" y="15.4" width="1.15" height="34.4" fill="#ffb2b5"/><rect x="15.13" y="15.2" width="1.05" height="33.8" fill="#ffdbda"/><rect x="16.29" y="21.5" width="0.76" height="26.7" fill="#fed7d5"/><rect x="18.28" y="25.5" width="1.25" height="21.3" fill="#fedbdb"/><rect x="19.97" y="16.0" width="0.86" height="29.7" fill="#fed9d6"/><rect x="22.11" y="16.6" width="1.07" height="27.9" fill="#fed3d2"/><rect x="24.30" y="32.1" width="1.11" height="11.3" fill="#fec1c4"/><rect x="25.55" y="31.1" width="0.73" height="11.7" fill="#fba2a4"/><rect x="27.64" y="17.8" width="0.88" height="24.2" fill="#feb5b8"/><rect x="29.75" y="21.0" width="0.66" height="20.6" fill="#fecaca"/><rect x="31.86" y="26.3" width="0.89" height="15.0" fill="#fededb"/><rect x="33.40" y="15.7" width="0.61" height="25.4" fill="#fca7a3"/><rect x="35.64" y="5.5" width="0.71" height="35.8" fill="#ffd7d7"/><rect x="37.27" y="15.0" width="1.18" height="26.4" fill="#f3aca7"/><rect x="38.76" y="21.5" width="0.98" height="20.2" fill="#fec3c0"/><rect x="40.06" y="17.9" width="0.78" height="24.1" fill="#fed9d9"/><rect x="42.13" y="11.5" width="0.66" height="30.9" fill="#ffdadb"/><rect x="44.15" y="25.3" width="1.01" height="17.6" fill="#feb9bc"/><rect x="46.20" y="32.5" width="0.78" height="11.0" fill="#ffdada"/><rect x="48.18" y="21.5" width="1.03" height="22.5" fill="#ffb0af"/><rect x="50.48" y="21.7" width="0.95" height="22.8" fill="#fec0c3"/><rect x="52.36" y="29.3" width="0.79" height="15.5" fill="#ffd8d6"/><rect x="54.49" y="17.4" width="1.23" height="27.8" fill="#fdb0ac"/><rect x="56.60" y="9.1" width="1.08" height="36.1" fill="#fecacb"/><rect x="58.50" y="21.0" width="0.81" height="24.2" fill="#fed8d5"/><rect x="59.64" y="25.8" width="0.70" height="19.5" fill="#eeaaa8"/><rect x="60.93" y="22.6" width="1.29" height="22.6" fill="#fededf"/><rect x="63.09" y="15.3" width="1.28" height="29.6" fill="#fed8d5"/><rect x="65.21" y="28.9" width="0.90" height="15.7" fill="#f7acaf"/><rect x="67.24" y="33.4" width="0.89" height="11.0" fill="#feb4b6"/><rect x="69.17" y="20.7" width="0.96" height="23.4" fill="#ffd3d4"/><rect x="71.10" y="18.6" width="1.17" height="25.4" fill="#f1b2b3"/><rect x="72.51" y="25.4" width="0.90" height="18.4" fill="#faa4a9"/><rect x="74.50" y="22.6" width="1.15" height="21.2" fill="#f6abab"/><rect x="75.94" y="11.2" width="1.27" height="32.6" fill="#f6aba6"/><rect x="77.15" y="7.0" width="1.07" height="36.9" fill="#fed3d3"/><rect x="79.38" y="20.1" width="1.22" height="24.1" fill="#ffcac5"/><rect x="81.23" y="25.8" width="0.73" height="18.9" fill="#febab7"/><rect x="83.23" y="17.6" width="1.09" height="27.8" fill="#feaaa6"/><rect x="85.24" y="23.9" width="1.09" height="22.4" fill="#feb9bc"/><rect x="86.38" y="33.4" width="0.97" height="13.4" fill="#f1b4af"/><rect x="87.50" y="36.4" width="1.04" height="11.0" fill="#ffdcd9"/><rect x="88.79" y="34.2" width="0.93" height="14.0" fill="#ffbdbd"/><rect x="90.39" y="23.5" width="0.92" height="25.7" fill="#ffc1c4"/><rect x="91.70" y="22.5" width="0.97" height="27.7" fill="#eeaeb2"/><rect x="93.10" y="29.8" width="0.97" height="21.3" fill="#feb4af"/><rect x="94.72" y="33.7" width="0.66" height="18.6" fill="#fed2d3"/></g></g><path d="M96.00 50.00L95.97 64.13L95.90 68.64L95.77 71.90L95.60 74.54L95.37 76.79L95.09 78.76L94.75 80.51L94.37 82.10L93.92 83.54L93.43 84.86L92.87 86.07L92.26 87.19L91.59 88.22L90.85 89.17L90.05 90.05L89.17 90.85L88.22 91.59L87.19 92.26L86.07 92.87L84.86 93.43L83.54 93.92L82.10 94.37L80.51 94.75L78.76 95.09L76.79 95.37L74.54 95.60L71.90 95.77L68.64 95.90L64.13 95.97L50.00 96.00L35.87 95.97L31.36 95.90L28.10 95.77L25.46 95.60L23.21 95.37L21.24 95.09L19.49 94.75L17.90 94.37L16.46 93.92L15.14 93.43L13.93 92.87L12.81 92.26L11.78 91.59L10.83 90.85L9.95 90.05L9.15 89.17L8.41 88.22L7.74 87.19L7.13 86.07L6.57 84.86L6.08 83.54L5.63 82.10L5.25 80.51L4.91 78.76L4.63 76.79L4.40 74.54L4.23 71.90L4.10 68.64L4.03 64.13L4.00 50.00L4.03 35.87L4.10 31.36L4.23 28.10L4.40 25.46L4.63 23.21L4.91 21.24L5.25 19.49L5.63 17.90L6.08 16.46L6.57 15.14L7.13 13.93L7.74 12.81L8.41 11.78L9.15 10.83L9.95 9.95L10.83 9.15L11.78 8.41L12.81 7.74L13.93 7.13L15.14 6.57L16.46 6.08L17.90 5.63L19.49 5.25L21.24 4.91L23.21 4.63L25.46 4.40L28.10 4.23L31.36 4.10L35.87 4.03L50.00 4.00L64.13 4.03L68.64 4.10L71.90 4.23L74.54 4.40L76.79 4.63L78.76 4.91L80.51 5.25L82.10 5.63L83.54 6.08L84.86 6.57L86.07 7.13L87.19 7.74L88.22 8.41L89.17 9.15L90.05 9.95L90.85 10.83L91.59 11.78L92.26 12.81L92.87 13.93L93.43 15.14L93.92 16.46L94.37 17.90L94.75 19.49L95.09 21.24L95.37 23.21L95.60 25.46L95.77 28.10L95.90 31.36L95.97 35.87Z" fill="none" stroke="#fff" stroke-opacity=".18" stroke-width="1"/><rect x="22" y="26" width="56" height="52" rx="7" fill="#fff"/><path d="M22 33a7 7 0 0 1 7-7h42a7 7 0 0 1 7 7v7H22z" fill="#a4323b"/><g fill="#fff"><rect x="34" y="18" width="5" height="14" rx="2.5"/><rect x="61" y="18" width="5" height="14" rx="2.5"/></g><g fill="#a4323b"><circle cx="36" cy="52" r="3.5"/><circle cx="50" cy="52" r="3.5"/><circle cx="64" cy="52" r="3.5"/><circle cx="36" cy="65" r="3.5"/><circle cx="50" cy="65" r="3.5"/></g></svg>

diff --git a/internal/calendar/static/busy.css b/internal/calendar/static/busy.css

new file mode 100644

index 0000000..fc355e6

--- /dev/null

+++ b/internal/calendar/static/busy.css

@@ -0,0 +1,47 @@

+/* busy.css — the one part of rastrillo's busy rule that lives in tokens.css:

+ the spinner takes the label's place. Copied byte for byte from rastrillo's

+ ui/tokens.css (estilo busy/provenance.json), for apps whose vendored

+ tokens.css predates it. Link it after tokens.css. */

+

+/* With no busy label there are no words to show while it works, so the

+ spinner takes the label's place instead of joining it: joining widens

+ the button mid-click and shoves whatever sits beside it. The shim

+ marks a button that HAS a busy label with data-idle-label, which is

+ what the :not() keys on — those words were asked for, so they stay.

+

+ :has(> spinner) because aria-busy is ordinary ARIA an app may set on

+ its own fetch button with no shim and no spinner; keyed on aria-busy

+ alone, that button would lose its label and show nothing at all.

+

+ The label is unpainted, never removed: aria-busy plus the untouched

+ text is what a screen reader announces. -webkit-text-fill-color

+ rather than color, because the ring is drawn in currentColor — a

+ transparent color would take the spinner with it. Element children

+ (an icon) are not reached by the text fill and take opacity 0, which

+ unlike visibility keeps them in the accessibility tree.

+

+ The media query stands the swap down for two readers a lone ring

+ fails. Under reduced motion the ring is still and dimmed, and on its

+ own reads as a stray "C". Under forced colours the engine repaints

+ the text fill, so the label paints anyway and a centred ring would

+ land on top of it. Both keep the older spinner-beside-label look. */

+@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {

+ .rst-btn[aria-busy="true"]:not([data-idle-label]):has(> .rst-spin), [rst-btn][aria-busy="true"]:not([data-idle-label]):has(> [rst-spin]) {

+ -webkit-text-fill-color: transparent;

+ }

+ .rst-btn[aria-busy="true"]:not([data-idle-label]):has(> .rst-spin) > :not(.rst-spin), [rst-btn][aria-busy="true"]:not([data-idle-label]):has(> [rst-spin]) > :not([rst-spin]) {

+ opacity: 0;

+ }

+ .rst-btn[aria-busy="true"]:not([data-idle-label]) > .rst-spin, [rst-btn][aria-busy="true"]:not([data-idle-label]) > [rst-spin] {

+ inset: 0;

+ margin: auto;

+ position: absolute;

+ }

+ /* The spinner's containing block. Zero specificity, so an app's own

+ position: fixed or sticky on a floating Save still wins — either

+ of those contains the spinner just as well, and losing it would

+ drop the button back into the page flow mid-click. */

+ :where(.rst-btn[aria-busy="true"]:not([data-idle-label])), :where([rst-btn][aria-busy="true"]:not([data-idle-label])) {

+ position: relative;

+ }

+}

diff --git a/internal/calendar/static/busy.js b/internal/calendar/static/busy.js

new file mode 100644

index 0000000..550a843

--- /dev/null

+++ b/internal/calendar/static/busy.js

@@ -0,0 +1,252 @@

+/* busy.js — the busy rule. First-party, dependency-free, and on by

+ default: link it and every submit button in every form that goes

+ somewhere is covered, with no attribute to remember, 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. It is

+ app-owned from the moment it is vendored; leave it unlinked to opt the

+ whole app out.

+

+ What a submitted button does: its label gives way to a spinner (the

+ label stays, beside the spinner, under reduced motion or forced

+ colours — tokens.css), it goes aria-busy and then disabled, and its

+ form refuses a second submit. The spinner shows for at least

+ HOLD_MS: a response faster than that is held back until then, so a

+ quick save reads as a deliberate beat rather than a flicker. Going

+ Back to the page hands every busy form back, and a submit still being

+ held when the page is left is dropped rather than sent later.

+

+ Vocabulary:

+ data-busy="false" on a <form> or on one submit button: opt OUT

+ of the busy rule. 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

+

+ A script that handles a submit itself (a fetch, say) cancels it in a

+ listener on the form or the document, as it would anyway: those run

+ before this file's window listener, which then sees the cancelled

+ submit and leaves it — and its feedback — to that script. Two edges

+ of the hold, on purpose: a handler that stops the submit event's

+ propagation keeps it from the window, so that submit goes at once,

+ unheld; and a form removed from the page during the hold (a polled

+ fragment replacing it) takes its held submit with it. */

+(function () {

+ "use strict";

+

+ // How long the spinner shows, at least. Long enough to read as an

+ // answer to the click, short enough never to feel like waiting.

+ var HOLD_MS = 650;

+

+ // ── 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 = (btn && btn.getAttribute("formtarget")) || form.getAttribute("target");

+ if (to && to !== "_self") return;

+ if (/^dialog$/i.test(btn && btn.getAttribute("formmethod") ||

+ form.getAttribute("method"))) return;

+ if (form === releasing) return; // the hold sending the submit it held

+ 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 && !held.has(e)) { 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);

+

+ // ── The hold ─────────────────────────────────────────────────────

+ //

+ // A spinner can only be promised a minimum time by holding the

+ // submit itself: once a fast response arrives the browser navigates

+ // and the spinner is gone. So the submit the busy rule just armed is

+ // cancelled here and sent again, by requestSubmit, once HOLD_MS have

+ // passed since the click.

+ //

+ // This listener is on the window, in the bubble phase — the last place

+ // a submit event reaches — so every handler on the form and the

+ // document has had its say first. One that cancelled the submit owns

+ // it (e.defaultPrevented, and the busy tick above hands the form

+ // back); so does the guard's own refusal of a second submit. Only a

+ // submit nobody else stopped is held, and only if the busy rule armed

+ // it (aria-busy on the form: not opted out, not a dialog, not a new

+ // window) and a button is showing the spinner.

+ var held = new WeakSet(); // submit events this listener cancelled

+ var pending = new Map(); // form -> timer, for a hold still running

+ var releasing = null; // the form whose held submit is going now

+ window.addEventListener("submit", function (e) {

+ var form = e.target;

+ if (!form || form.tagName !== "FORM") return;

+ if (form === releasing) { releasing = null; return; }

+ if (e.defaultPrevented || form.getAttribute("aria-busy") !== "true") return;

+ // Only a submit with a spinner to show is held: the hold is for the

+ // spinner. A script's requestSubmit() with no submitter, or a button

+ // that opted out, has nothing on screen to keep up, and holding it

+ // would only be a silent 650ms stall. The form is still guarded.

+ var btn = e.submitter || null;

+ if (!btn || btn.getAttribute("aria-busy") !== "true") return;

+ e.preventDefault();

+ held.add(e);

+ pending.set(form, setTimeout(function () { release(form, btn); }, HOLD_MS));

+ });

+

+ // Send the held submit. The submitter goes with it, so its name and

+ // value are in the payload exactly as a click would have sent them —

+ // which means, for the moment the entry list is built, it has to be

+ // enabled and an <input type="submit"> has to carry its own value

+ // again, not the busy label. The form is re-checked first: fields

+ // stay editable during the hold, and a form that is no longer valid

+ // must be handed back with its errors showing, not left spinning.

+ function release(form, btn) {

+ pending.delete(form);

+ if (!form.isConnected) return;

+ var skip = form.hasAttribute("novalidate") ||

+ (btn && btn.hasAttribute("formnovalidate"));

+ if (!skip && !form.checkValidity()) {

+ busyOff(form);

+ form.reportValidity();

+ return;

+ }

+ // The submitter may have left the form during the hold (moved,

+ // removed, its form= changed): requestSubmit would throw and leave

+ // the form guarded for good. Hand it back instead.

+ if (btn && (!btn.isConnected || btn.form !== form)) {

+ busyOff(form);

+ return;

+ }

+ var busyValue = null;

+ // Restored, not assumed: a button that opted out of the busy state

+ // (data-busy="false") was never disabled, and must not end up so.

+ var wasDisabled = btn ? btn.disabled : false;

+ if (btn) {

+ btn.disabled = false;

+ var idle = btn.getAttribute("data-idle-label");

+ if (btn.tagName === "INPUT" && idle !== null) {

+ busyValue = btn.value;

+ btn.value = idle;

+ }

+ releasing = form;

+ try {

+ form.requestSubmit(btn || undefined);

+ } finally {

+ releasing = null;

+ if (btn) {

+ btn.disabled = wasDisabled;

+ if (busyValue !== null) btn.value = busyValue;

+ }

+

+ // Leaving the page — a link, Back — while a submit is held drops it:

+ // the visitor has gone somewhere else, and a timer surviving into the

+ // back/forward cache would otherwise send it on their return.

+ window.addEventListener("pagehide", function () {

+ pending.forEach(function (timer) { clearTimeout(timer); });

+ pending.clear();

+ });

+

+ // 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);

+ });

+})();

diff --git a/internal/calendar/static/chrome.css b/internal/calendar/static/chrome.css

new file mode 100644

index 0000000..6bda384

--- /dev/null

+++ b/internal/calendar/static/chrome.css

@@ -0,0 +1,254 @@

+/* chrome/chrome.css: the suite's top bar, account menu, app switcher and

+ sign-in pages. Link it after menu.css (its panels are [estilo-menu]).

+ Two custom properties are PUBLIC contract, read by apps and never

+ copied as numbers: the bar's block size and its stacking level. */

+:root {

+ --estilo-bar-block-size: 3.25rem; /* 52px. PUBLIC */

+ --estilo-z-bar: 45; /* PUBLIC: the bar's stacking level, and the ceiling for in-page layers */

+ --estilo-trigger-size: 2rem; /* 32px targets, above the 24px floor */

+}

+[estilo-bar] {

+ position: relative;

+ z-index: var(--estilo-z-bar);

+ box-sizing: border-box;

+ display: flex;

+ flex-wrap: nowrap;

+ align-items: center;

+ gap: var(--rst-sp-3);

+ block-size: var(--estilo-bar-block-size); /* fixed, not min: nothing may grow it */

+ padding-inline: var(--rst-sp-4);

+ background: var(--rst-surface);

+ color: var(--rst-text);

+ border-block-end: 1px solid var(--rst-line);

+}

+[estilo-bar~="sticky"] { position: sticky; inset-block-start: 0; }

+[estilo-bar-brand] {

+ display: inline-flex;

+ align-items: center;

+ gap: 0.5rem;

+ flex: none;

+ color: var(--rst-text);

+ font-weight: 650;

+ text-decoration: none;

+ white-space: nowrap;

+}

+[estilo-bar-brand] img { flex: none; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 21%; }

+[estilo-bar-context] {

+ flex: 0 1 auto;

+ min-inline-size: 0;

+ overflow: hidden;

+ text-overflow: ellipsis;

+ white-space: nowrap;

+ padding-inline-start: var(--rst-sp-3);

+ border-inline-start: 1px solid var(--rst-line);

+ color: var(--rst-text);

+ font-weight: 550;

+}

+[estilo-bar-nav] { display: flex; align-self: stretch; gap: var(--rst-sp-4); }

+[estilo-bar-nav] a {

+ display: flex;

+ align-items: center;

+ border-block: 2px solid transparent; /* square current marker, in-flow */

+ color: var(--rst-text-muted);

+ font-size: var(--rst-fs-sm);

+ text-decoration: none;

+ white-space: nowrap;

+}

+[estilo-bar-nav] a:hover { color: var(--rst-text); }

+[estilo-bar-nav] a[aria-current] { border-block-end-color: var(--rst-accent); color: var(--rst-text); font-weight: 550; }

+[estilo-bar-end] { display: flex; align-items: center; gap: var(--rst-sp-2); flex: none; margin-inline-start: auto; }

+[estilo-bar-actions] { display: flex; align-items: center; gap: var(--rst-sp-2); }

+[estilo-bar-actions] form { display: contents; } /* a POST action lays out as its button */

+[estilo-bar-trigger] {

+ display: inline-flex;

+ align-items: center;

+ justify-content: center;

+ gap: 0.3rem;

+ box-sizing: border-box;

+ min-inline-size: var(--estilo-trigger-size);

+ block-size: var(--estilo-trigger-size);

+ padding-inline: 0.4rem;

+ border-radius: 0; /* in-flow: square */

+ color: var(--rst-text-muted);

+ font-size: var(--rst-fs-sm);

+ cursor: pointer;

+ list-style: none;

+ user-select: none;

+}

+[estilo-bar-trigger]::-webkit-details-marker { display: none; }

+[estilo-bar-trigger]::marker { content: ""; }

+[estilo-bar-trigger] svg { flex: none; inline-size: 1.125rem; block-size: 1.125rem; }

+[estilo-bar-trigger]:hover,

+[open] > [estilo-bar-trigger] { color: var(--rst-text); background: var(--rst-surface-2); }

+[estilo-bar-trigger]:focus-visible { outline: 2px solid var(--rst-accent); outline-offset: -2px; }

+[estilo-bar-more] { display: none; }

+@media (max-width: 799.98px) { /* rastrillo's shell breakpoint */

+ [estilo-bar-nav], [estilo-bar-actions] { display: none; }

+ [estilo-bar-more] { display: block; }

+ [estilo-bar]:has([estilo-bar-context], [estilo-bar-title]) [estilo-bar-name] { display: none; } /* the icon stays; the title gets the room */

+}

+

+/* The shell. <div estilo-shell> wraps the skip link, the bar and <main>

+ on every page and has no styling of its own. estilo-shell="fill" is the

+ full-height layout for the one kind of page that must fill the viewport

+ (Sheets' grid): the shell is exactly the viewport, the bar keeps its

+ 52px, and <main> takes the rest, so the working area is the viewport

+ less the bar without any app re-deriving that sum. The document never

+ scrolls there, so the root drops its reserved scrollbar gutter, which

+ would otherwise leave a dead strip down the inline end. <main> must be

+ the shell's direct child. */

+[estilo-shell~="fill"] {

+ display: flex;

+ flex-direction: column;

+ block-size: 100dvh;

+}

+[estilo-shell~="fill"] > [estilo-bar] { flex: none; }

+[estilo-shell~="fill"] > main { flex: 1 1 auto; min-block-size: 0; }

+:root:has([estilo-shell~="fill"]) { scrollbar-gutter: auto; }

+

+/* The editable title slot: the open object's title, renamed in place. The

+ input is a bordered control, so it keeps the theme's radius; its block size is

+ fixed so an input in the bar can never grow the bar. */

+[estilo-bar-title] {

+ display: flex;

+ align-items: center;

+ gap: var(--rst-sp-2);

+ flex: 0 1 22rem;

+ min-inline-size: 0;

+ margin: 0;

+ padding-inline-start: var(--rst-sp-3);

+ border-inline-start: 1px solid var(--rst-line);

+}

+[estilo-bar-title-input] {

+ box-sizing: border-box;

+ block-size: 2rem;

+ inline-size: 100%;

+ min-inline-size: 6rem;

+ padding-inline: 0.4rem;

+ border: 1px solid transparent;

+ border-radius: var(--rst-radius-sm);

+ background: transparent;

+ color: var(--rst-text);

+ font: inherit;

+ font-weight: 550;

+ text-overflow: ellipsis;

+}

+[estilo-bar-title-input]:hover { border-color: var(--rst-line); }

+[estilo-bar-title-input]:focus { border-color: var(--rst-accent); outline: none; background: var(--rst-surface); }

+[estilo-bar-title-submit] { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; white-space: nowrap; }

+[estilo-bar-title]:focus-within [estilo-bar-title-submit] { position: static; clip-path: none; inline-size: auto; block-size: 2rem; overflow: visible; flex: none; }

+/* Below the shell breakpoint the row has no room for the button beside the

+ field: it would sit under Menu or the switcher, and a click at its centre

+ would open them instead (found in the first review, at 390px and 320px).

+ So the field takes whatever width is left, down to nothing but its own

+ padding, and on focus the button floats just under it, over the page,

+ where nothing in the bar competes for it. Enter renames at every width. */

+@media (max-width: 799.98px) {

+ [estilo-bar-title] { position: relative; }

+ [estilo-bar-title-input] { min-inline-size: 0; }

+ [estilo-bar-title]:focus-within [estilo-bar-title-submit] {

+ position: absolute;

+ inset-block-start: calc(100% + 0.5rem);

+ inset-inline-start: var(--rst-sp-3);

+ border: 1px solid var(--rst-line);

+ border-radius: var(--estilo-float-radius, 9px); /* a float */

+ background: var(--rst-surface);

+ box-shadow: var(--rst-shadow-pop);

+ }

+}

+

+/* The app switcher: a float, so its tiles may be rounded. */

+[estilo-switcher] { position: relative; }

+[estilo-switcher-panel] { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 4px); }

+[estilo-switcher-grid] { display: grid; grid-template-columns: repeat(3, 5.5rem); gap: 0.25rem; }

+[estilo-switcher-app] {

+ display: flex;

+ flex-direction: column;

+ align-items: center;

+ gap: 0.35rem;

+ padding: 0.6rem 0.25rem;

+ border-radius: var(--rst-radius-sm); /* inside a float: rounded is allowed */

+ color: var(--rst-text);

+ font-size: var(--rst-fs-xs);

+ text-decoration: none;

+}

+[estilo-switcher-app]:hover,

+[estilo-switcher-app]:focus-visible { background: var(--rst-accent-soft); }

+[estilo-switcher-app][aria-current] { background: var(--rst-accent-soft); font-weight: 600; }

+[estilo-switcher-app] img { border-radius: 21%; }

+

+/* The account menu. The account is always the last thing at the inline

+ end of the bar: the "same corner" rule. */

+[estilo-account] { position: relative; }

+[estilo-account-panel] { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 4px); min-inline-size: 15rem; }

+[estilo-avatar] {

+ display: inline-flex;

+ align-items: center;

+ justify-content: center;

+ inline-size: 1.75rem;

+ block-size: 1.75rem;

+ border-radius: 50%; /* an identity mark, not a highlight */

+ background: var(--rst-accent-soft);

+ color: var(--rst-accent);

+ font-size: var(--rst-fs-xs);

+ font-weight: 650;

+}

+[estilo-menu-identity] { display: grid; gap: 0.1rem; padding: 0.5rem var(--estilo-item-padding-inline, 0.65rem); }

+[estilo-menu-identity-label] { color: var(--rst-text-muted); font-size: var(--rst-fs-xs); }

+[estilo-menu-identity-name] { font-weight: 600; overflow-wrap: anywhere; }

+[estilo-menu-identity-address] { color: var(--rst-text-muted); overflow-wrap: anywhere; }

+[estilo-menu-identity-name] + [estilo-menu-identity-address] { font-size: var(--rst-fs-xs); }

+[estilo-bar-signin] { flex: none; }

+

+/* Visually hidden, still announced. */

+[estilo-visually-hidden] { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; white-space: nowrap; }

+

+/* Sign-in, check-your-email and signed-out pages: the Oficina door. The

+ suite's sky behind (estilo sky.css places and animates it), one card on

+ it with the app's mark and name at its head — the same door Home draws

+ at id.oficina.works, in the app's own colour. The door spans the page

+ whatever the app's layout gives it, so the sky is never boxed in. */

+:root:has([estilo-door]) { overflow-x: clip; --rst-scrollbar-gutter: auto; scrollbar-gutter: auto; }

+[estilo-door] {

+ box-sizing: border-box;

+ margin-inline: calc(50% - 50vw);

+ padding: max(40px, 9vh) var(--rst-sp-4) var(--rst-sp-6);

+ min-block-size: 680px;

+ /* The whole sky lies inside the door, fading in and out, so the door's

+ edges never cut it: under an app's bar there is no page top to hide

+ an edge behind, as there is on Home. A sky's layers overhang its box

+ by 12% above and below (sky.css), and fade in over their first 22%

+ and out from 58% to 92% — so a 560px sky placed 67px down starts

+ transparent at the door's top and has faded out by 640px. */

+ --estilo-sky-top: 67px;

+ --estilo-sky-height: 560px;

+}

+[estilo-signin] {

+ box-sizing: border-box;

+ max-inline-size: 460px;

+ margin: 0 auto;

+ padding: 34px 40px 32px;

+ background: var(--rst-surface);

+ border-radius: 20px;

+ box-shadow: 0 0 0 1px light-dark(transparent, var(--rst-line)), var(--rst-shadow-lift);

+}

+[estilo-signin] > [estilo-brand] { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 1.2rem; font-weight: 650; letter-spacing: -0.01em; }

+[estilo-signin] > [estilo-brand] [estilo-brand-icon] { inline-size: 36px; block-size: 36px; }

+[estilo-signin] h1 { margin: 0; font-size: 1.75rem; font-weight: 620; letter-spacing: -0.02em; line-height: 1.15; }

+[estilo-signin-lede] { margin: 0.5rem 0 var(--rst-sp-4); color: var(--rst-text-muted); }

+[estilo-signin] > h1 + :not([estilo-signin-lede]) { margin-block-start: var(--rst-sp-4); }

+[estilo-signin-form] { max-inline-size: none; margin-block-start: var(--rst-sp-4); }

+[estilo-signin-body] { margin: var(--rst-sp-4) 0; }

+@media (max-width: 520px) {

+ [estilo-door] { padding-inline: 14px; padding-block-start: 28px; }

+ [estilo-signin] { padding: 26px 22px 24px; }

+}

+[estilo-signin-foot] { margin-block-start: var(--rst-sp-6); font-size: var(--rst-fs-xs); color: var(--rst-text-muted); }

+/* The door's links are drawn here, not left to the app: an app that does

+ not link base.css (Calendar, Memoria, Calls, Fichas) showed the browser's

+ blue on the card. As base.css does, a link in the card is the app's

+ colour at the lowest specificity, so a link drawn as a button keeps the

+ button's; the foot's is quiet, like its text. */

+:where([estilo-signin]) a { color: var(--rst-accent); text-underline-offset: 0.15em; }

+[estilo-signin-foot] a { color: inherit; }

+[estilo-signin-foot] a:hover, [estilo-signin-foot] a:focus-visible { color: var(--rst-text); }

diff --git a/internal/calendar/static/chrome.js b/internal/calendar/static/chrome.js

new file mode 100644

index 0000000..1f583c6

--- /dev/null

+++ b/internal/calendar/static/chrome.js

@@ -0,0 +1,82 @@

+// chrome/chrome.js: optional behaviour for estilo-bar and the one top-level

+// menu group. Load it with <script defer>. Everything already works

+// without it; this only adds what <details> and the platform cannot do for

+// themselves:

+//

+// - Escape closes the open member of the group (name="estilo-menus": the

+// bar's Menu, switcher and account, and every menubar menu) and returns

+// focus to its title;

+// - a click outside the open member closes it;

+// - Escape in the editable title restores the saved value and leaves

+// the field;

+// - a row or button that opens a dialog (command="show-modal") closes

+// the menu it sat in, returns focus to that menu's title when the

+// dialog closes, and opens the dialog itself on an engine without

+// invoker commands.

+//

+// The group is one group in every app, so closing it is estilo's job, not

+// each app's: Sheets' menubar lost Escape and outside-click entirely when

+// it left rastrillo's dropdown.

+//

+// Both listen in the capture phase. A document app has to stop key

+// events from propagating out of its menus — Sheets' grid library acts on

+// every key it hears on document, so an arrow in an open menu would walk

+// the cell cursor too — and a bubble-phase listener on document never

+// hears the Escape such an app stops. Capture hears it first. An app that

+// closes its own menu on Escape (Docs' menubar) finds nothing open and

+// does nothing, so nothing is handled twice.

+;(() => {

+ const group = 'details[name="estilo-menus"][open]'

+ const openPanel = () => document.querySelector(group)

+

+ // Focus returns to a menu's title; in a menubar with a roving tab stop

+ // (one title tabbable, the rest tabindex=-1) the stop moves with it, so

+ // Tab then Shift+Tab comes back to the menu you were in, not to File

+ // (Astra, estilo #11). A menubar without one is left without one.

+ const returnTo = (title) => {

+ title.focus()

+ const bar = title.closest('[estilo-menubar]')

+ if (!bar) return

+ const titles = bar.querySelectorAll('[estilo-menubar-title]')

+ if (!Array.prototype.some.call(titles, (t) => t.hasAttribute('tabindex'))) return

+ Array.prototype.forEach.call(titles, (t) => { t.tabIndex = t === title ? 0 : -1 })

+ }

+

+ document.addEventListener('keydown', (e) => {

+ if (e.key !== 'Escape' || e.defaultPrevented) return

+ const input = e.target.closest && e.target.closest('[estilo-bar-title-input]')

+ if (input) {

+ input.value = input.defaultValue

+ input.blur()

+ e.preventDefault()

+ return

+ }

+ const open = openPanel()

+ if (!open) return

+ open.open = false

+ const summary = open.querySelector('summary')

+ if (summary) returnTo(summary)

+ e.preventDefault()

+ }, true)

+

+ document.addEventListener('click', (e) => {

+ const open = openPanel()

+ if (open && !open.contains(e.target)) open.open = false

+ }, true)

+

+ const invokers = typeof HTMLButtonElement !== 'undefined' && 'command' in HTMLButtonElement.prototype

+ document.addEventListener('click', (e) => {

+ const button = e.target.closest && e.target.closest('button[commandfor][command="show-modal"]')

+ if (!button || button.disabled) return

+ const dialog = document.getElementById(button.getAttribute('commandfor'))

+ const holder = button.closest('details[name="estilo-menus"]')

+ if (holder) {

+ holder.open = false

+ const summary = holder.querySelector('summary')

+ if (dialog && summary) dialog.addEventListener('close', () => returnTo(summary), { once: true })

+ }

+ if (invokers || !dialog || typeof dialog.showModal !== 'function' || dialog.open) return

+ dialog.showModal()

+ e.preventDefault()

+ })

+})()

diff --git a/internal/calendar/static/menu.css b/internal/calendar/static/menu.css

new file mode 100644

index 0000000..2ddf029

--- /dev/null

+++ b/internal/calendar/static/menu.css

@@ -0,0 +1,143 @@

+/* menu/menu.css: the one floating panel, and the menu bar it hangs from.

+ Every floating surface in the suite uses [estilo-menu]: the account

+ menu, the switcher, the narrow Menu sheet and every menubar menu.

+ A float is rounded and so is a highlight inside it; a menubar title is

+ in the page flow, so it is square (the suite's square rule). */

+:root {

+ --estilo-float-radius: 9px; /* rastrillo's hard-coded dropdown value, named. PUBLIC */

+ --estilo-float-padding: 0.25rem;

+ --estilo-item-padding-block: 0.4rem;

+ --estilo-item-padding-inline: 0.65rem;

+}

+[estilo-menu] {

+ box-sizing: border-box;

+ /* Sized to its rows, not to what it hangs from. Every panel is absolutely

+ positioned inside a <details> no wider than its title, and an absolute

+ box's shrink-to-fit width is capped by that, so without this a row with

+ a shortcut wrapped ("Decrease / indent") inside a menu with room to

+ spare. Docs found it on first adoption. */

+ inline-size: max-content;

+ min-inline-size: 12rem;

+ max-inline-size: min(22rem, calc(100vw - 1rem));

+ /* The 8rem floor is for short frames, where the viewport maths alone can

+ leave a panel a few pixels tall: an overflowing menu can be scrolled,

+ an invisible one cannot. */

+ max-block-size: max(calc(100dvh - var(--estilo-bar-block-size, 3.25rem) - 1rem), 8rem);

+ overflow-y: auto;

+ overscroll-behavior: contain;

+ padding: var(--estilo-float-padding);

+ background: var(--rst-surface);

+ color: var(--rst-text);

+ border: 1px solid var(--rst-line);

+ border-radius: var(--estilo-float-radius);

+ box-shadow: var(--rst-shadow-pop);

+ font-size: var(--rst-fs-sm);

+ text-align: start;

+ z-index: 30;

+}

+[estilo-menu~="sheet"] {

+ position: absolute;

+ inset-inline: 0.5rem;

+ inset-block-start: calc(100% + 4px);

+ inline-size: auto;

+ max-inline-size: none;

+}

+[estilo-menu] form { margin: 0; }

+[estilo-menu-item] {

+ display: flex;

+ align-items: center;

+ gap: 0.5rem;

+ box-sizing: border-box;

+ inline-size: 100%;

+ min-block-size: 2rem;

+ padding: var(--estilo-item-padding-block) var(--estilo-item-padding-inline);

+ border: 0;

+ border-radius: var(--rst-radius-sm); /* inset and rounded: inside a float */

+ background: none;

+ color: var(--rst-text);

+ font: inherit;

+ text-align: start;

+ text-decoration: none;

+ cursor: pointer;

+}

+[estilo-menu-item]:hover,

+[estilo-menu-item]:focus-visible { background: var(--rst-accent-soft); }

+[estilo-menu-item]:focus-visible { outline: 2px solid var(--rst-accent); outline-offset: -2px; }

+[estilo-menu-item][aria-disabled="true"],

+[estilo-menu-item]:disabled {

+ color: var(--rst-text-faint);

+ background: none;

+ cursor: default;

+}

+[estilo-menu-check] {

+ display: inline-flex;

+ flex: none;

+ inline-size: 1rem;

+ block-size: 1rem;

+ visibility: hidden;

+ color: var(--rst-accent);

+}

+[estilo-menu-check] svg { inline-size: 100%; block-size: 100%; }

+[estilo-menu-item][aria-pressed="true"] [estilo-menu-check],

+[estilo-menu-item][aria-current] [estilo-menu-check] { visibility: visible; }

+[estilo-menu-label] { flex: 1 1 auto; min-inline-size: 0; }

+[estilo-menu-key] {

+ flex: none;

+ margin-inline-start: auto;

+ padding-inline-start: 1.5rem;

+ color: var(--rst-text-muted);

+ font: inherit;

+ font-size: var(--rst-fs-xs);

+ font-variant-numeric: tabular-nums;

+ white-space: nowrap;

+}

+[estilo-menu] hr {

+ border: 0;

+ border-block-start: 1px solid var(--rst-line);

+ margin: 0.25rem 0;

+}

+[estilo-menu-heading] {

+ margin: 0;

+ padding: 0.5rem var(--estilo-item-padding-inline) 0.25rem;

+ color: var(--rst-text-muted);

+ font-size: var(--rst-fs-xs);

+ font-weight: 600; /* no text-transform */

+}

+

+/* The document menu bar: File, Edit, View... Titles are in the page flow,

+ so their highlight is square. Every title joins the one top-level

+ exclusivity group, name="estilo-menus", with the bar's own triggers. */

+[estilo-menubar] { display: flex; flex-wrap: wrap; align-items: stretch; min-block-size: 2rem; }

+[estilo-menubar-menu] { position: relative; }

+[estilo-menubar-menu] > [estilo-menu] {

+ position: absolute;

+ inset-inline-start: 0;

+ inset-block-start: calc(100% + 2px);

+}

+[estilo-menubar-title] {

+ display: flex;

+ align-items: center;

+ box-sizing: border-box;

+ block-size: 100%;

+ min-block-size: 2rem;

+ padding-inline: 0.6rem;

+ border-radius: 0; /* square: in-flow */

+ color: var(--rst-text);

+ font-size: var(--rst-fs-sm);

+ white-space: nowrap;

+ list-style: none;

+ cursor: default;

+ user-select: none;

+}

+[estilo-menubar-title]::-webkit-details-marker { display: none; }

+[estilo-menubar-title]::marker { content: ""; }

+[estilo-menubar-title]:hover { background: var(--rst-surface-2); }

+[open] > [estilo-menubar-title] { background: var(--rst-accent-soft); }

+[estilo-menubar-title]:focus-visible { outline: 2px solid var(--rst-accent); outline-offset: -2px; }

+/* A panel hung from a title near the inline end overflows a phone, so

+ below 30rem every menubar panel spans the viewport instead. */

+@media (max-width: 30rem) {

+ [estilo-menubar-menu] { position: static; }

+ [estilo-menubar] { position: relative; }

+ [estilo-menubar-menu] > [estilo-menu] { inset-inline: 0.5rem; inline-size: auto; min-inline-size: 0; max-inline-size: none; }

+}

diff --git a/internal/calendar/static/quickadd.js b/internal/calendar/static/quickadd.js

index 2d38281..099ba7e 100644

--- a/internal/calendar/static/quickadd.js

+++ b/internal/calendar/static/quickadd.js

@@ -114,12 +114,13 @@

var form = root.querySelector("[cal-quick-form]");

if (!form) return;

// requestSubmit fires submit handlers and honours validation the

- // way a real button press does; form.submit() skips both.

+ // way a real button press does; form.submit() skips both. The

+ // button goes with it, so the busy rule shows its spinner on Add.

+ var button = form.querySelector("button[type=submit]");

if (typeof form.requestSubmit === "function") {

- form.requestSubmit();

+ form.requestSubmit(button || undefined);

return;

}

- var button = form.querySelector("button[type=submit]");

if (button) button.click();

}

diff --git a/internal/calendar/static/rastrillo.js b/internal/calendar/static/rastrillo.js

index dc4b344..2c9cd5a 100644

--- a/internal/calendar/static/rastrillo.js

+++ b/internal/calendar/static/rastrillo.js

@@ -5,15 +5,15 @@

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.

+ One section is on by default instead, because it has no per-instance

+ decision to make: light dismiss for the menu idioms, keyed 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. Delete it to opt the whole app out.

+

+ The busy rule, which used to live here too, is busy.js: link it and

+ every submit button in every form is covered; leave it out and none

+ is.

Vocabulary:

data-poll="URL" fetch URL for an HTML fragment, replace this

@@ -27,12 +27,6 @@

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

@@ -135,118 +129,6 @@

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

@@ -321,14 +203,6 @@

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 {

diff --git a/internal/calendar/static/sky.css b/internal/calendar/static/sky.css

new file mode 100644

index 0000000..50067a9

--- /dev/null

+++ b/internal/calendar/static/sky.css

@@ -0,0 +1,76 @@

+/* estilo-sky — Calma's ambient nebula (sky.go). Quiet by default:

+ --estilo-sky-strength is one number for the whole effect.

+

+ Placement is the host's: [estilo-sky-host] is a positioned, clipped box,

+ and a stacking context of its own, so the sky (z-index -1) paints above

+ the host's background and beneath everything else in it, without

+ touching how the host's other children are positioned — a sticky bar

+ stays sticky. Move the sky with --estilo-sky-top and

+ --estilo-sky-height, and set --estilo-sky-strength (0.5, Quiet) on the

+ host or anywhere above it. */

+[estilo-sky-host] {

+ position: relative;

+ overflow: hidden;

+ isolation: isolate;

+}

+

+[estilo-sky] {

+ position: absolute;

+ inset-inline: 0;

+ top: var(--estilo-sky-top, -6%);

+ height: var(--estilo-sky-height, 80%);

+ pointer-events: none;

+ z-index: -1;

+}

+

+/* Each layer overhangs the box so a drift never shows an edge, and fades

+ in and out vertically so the sky has no top or bottom. */

+[estilo-sky] img {

+ position: absolute;

+ left: -8%;

+ top: -12%;

+ width: 116%;

+ height: 124%;

+ max-width: none;

+ opacity: calc(var(--estilo-sky-strength, 0.5) * var(--estilo-sky-gain, 1) * var(--estilo-sky-k, 1));

+ -webkit-mask-image: linear-gradient(#0000, #000 22%, #000 58%, #0000 92%);

+ mask-image: linear-gradient(#0000, #000 22%, #000 58%, #0000 92%);

+ user-select: none;

+}

+/* The sky's colour is the placeholder: the haze and clouds computed into a

+ few pixels and inlined, so it is there in the first frame (placeholder.go

+ has the measurements against the full SVG drawing: 3/255 light, 8/255

+ dark). Stretched to cover as an SVG's xMidYMid slice would, and softened

+ so no pixel grid shows. The haze and clouds SVGs it replaced were

+ drawing almost nothing on top of it, so they are no longer linked

+ (impeccable's detector, 2026-09-29). Over it, two SVG layers carry what

+ a few pixels cannot: the clouds' grain — faint light and dark specks that

+ average to nothing — and the filaments. No script. */

+[estilo-sky] img { object-fit: cover; }

+[estilo-sky-layer="placeholder"] { filter: blur(24px); }

+[estilo-sky-layer="grain"] { --estilo-sky-k: 1; }

+/* The weights haze and clouds had when they were linked, kept for a page

+ cached from then that still names them. */

+[estilo-sky-layer="haze"] { --estilo-sky-k: 0.175; }

+[estilo-sky-layer="clouds"] { --estilo-sky-k: 0.25; }

+[estilo-sky-layer="filaments"] { --estilo-sky-k: 1.3; }

+

+/* One placeholder per scheme; show the one that matches. An explicit

+ Appearance choice ([data-theme]) beats the OS, as it does for estilo's

+ theme. Both are inline, so neither costs a request. */

+[estilo-sky-tone="dark"] { display: none; --estilo-sky-gain: 1.55; }

+:root[data-theme="dark"] [estilo-sky-tone="light"] { display: none; }

+:root[data-theme="dark"] [estilo-sky-tone="dark"] { display: block; }

+@media (prefers-color-scheme: dark) {

+ :root:not([data-theme="light"]) [estilo-sky-tone="light"] { display: none; }

+ :root:not([data-theme="light"]) [estilo-sky-tone="dark"] { display: block; }

+}

+

+/* Drifting: the sky breathes, the grain with it, and the filaments

+ slide. Slow enough to notice only if you look. */

+@media (prefers-reduced-motion: no-preference) {

+ [estilo-sky-layer="placeholder"], [estilo-sky-layer="grain"] { animation: estilo-sky-breathe-near 64s ease-in-out infinite alternate; }

+ [estilo-sky-layer="filaments"] { animation: estilo-sky-drift 80s ease-in-out infinite alternate; }

+}

+@keyframes estilo-sky-breathe-near { to { transform: translate(-3%, 1.5%) scale(1.06); } }

+@keyframes estilo-sky-drift { to { transform: translate(-4%, 1%); } }

diff --git a/internal/calendar/static/theme.css b/internal/calendar/static/theme.css

index 5da4384..656dafb 100644

--- a/internal/calendar/static/theme.css

+++ b/internal/calendar/static/theme.css

@@ -1,169 +1,73 @@

-/* 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.

+/* estilo — the Oficina suite's theme: Calma.

+

+ Calma replaced rastrillo's day on 2026-09-29, by Paul's decision after

+ six rounds of design directions (AGENTS.md, decisions table, row 8).

+ Until then estilo WAS day, byte for byte; it is now its own theme, and

+ theme_test.go gates it on its own terms: the same token set day

+ declares (so rastrillo's tokens.css finds every name it uses), every

+ contrast pair rastrillo gates, in both schemes — for this file AND for

+ every app's accent block (apps.go) — and a golden per app so no value

+ moves without the diff saying so.

+

+ The look: quiet, even and exact. A cool off-white page with white

+ cards, one grey text scale, soft 12px shapes with a long low shadow.

+ Colour belongs to the apps: every app's hue sits on one ring of equal

+ OKLCH lightness, so no app shouts over another, and the interface

+ tints to the app you are in (apps.go — --rst-accent and friends are

+ re-declared per app). This file's own accent is Oficina's, the suite's,

+ used where no app is in charge (sign-in, the team's home).

+

+ Status tones are day's, unchanged: they are functional, not brand, and

+ a pill must 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.

+ As day: every colour is light-dark(<light>, <dark>) under one :root

+ with color-scheme: light dark, and the two [data-theme] rules at the

+ bottom are the whole toggle.

+

+ ── WCAG 2.2 AA ───────────────────────────────────────────────────────

+ Every pair rastrillo's own gate checks is checked by

+ TestContrastMeetsWCAG, for this file and each app's accent, light and

+ dark, through rastrillo's ui.ContrastRatio. The tightest, at the time

+ of writing: faint text on an accent-tinted surface, 4.63:1 (Files,

+ dark); a control border on the sunk surface, 3.2:1 (light).

──────────────────────────────────────────────────────────────────── */

: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;

+ /* Type: the family only. Sizes and spacing stay in tokens.css. Onest

+ where it is served (fonts.go), the system face where it is not. */

+ --rst-font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

- /* Shape: soft, ordinary, unremarkable. */

- --rst-radius: 8px;

- --rst-radius-sm: 6px;

+ /* Shape: soft and exact. */

+ --rst-radius: 12px;

+ --rst-radius-sm: 8px;

--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. */

+ /* Surfaces and lines: a cool off-white page, white cards, a sunk grey. */

+ --rst-bg: light-dark(#f5f6f8, #15171c);

+ --rst-surface: light-dark(#ffffff, #1c1f26);

+ --rst-surface-2: light-dark(#eceef2, #23262e);

+ --rst-line: light-dark(#e3e6eb, #2d313a);

+ --rst-line-strong: light-dark(#7f8591, #7a818e);

+

+ /* The page header's rule: the accent folded into the line, as day. */

--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-text: light-dark(#262a33, #eceef2);

+ --rst-text-muted: light-dark(#565c69, #b4bac6);

+ --rst-text-faint: light-dark(#626875, #8f96a3);

+

+ /* Accent: Oficina's, hue 262 on the ring (apps.go). Each app

+ re-declares these four. */

+ --rst-accent: light-dark(#2e5bb4, #87b1fd);

+ --rst-accent-strong: light-dark(#214a9b, #afcbfe);

+ --rst-accent-soft: light-dark(#e9f1ff, #1f2b42);

+ --rst-on-accent: light-dark(#ffffff, #111418);

+

+ /* Status tones: day's, unchanged. */

--rst-tone-neutral-fg: light-dark(#374151, #c3c9d1);

--rst-tone-neutral-bg: light-dark(#eef0f2, #262c34);

--rst-tone-positive-fg: light-dark(#166534, #6ee7a8);

@@ -173,11 +77,11 @@

--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));

+ /* Depth: a long, low, cool shadow; paper lifted, not stacked. */

+ --rst-shadow-pop: 0 18px 44px -14px light-dark(rgba(20, 24, 33, 0.28), rgba(0, 0, 0, 0.6));

+ --rst-shadow-knob: 0 1px 2px rgba(20, 24, 33, 0.3);

+ --rst-shadow-lift: 0 1px 1px rgba(20, 24, 33, 0.04), 0 14px 36px -14px light-dark(rgba(20, 24, 33, 0.22), rgba(0, 0, 0, 0.55));

+ --rst-overlay: light-dark(rgba(20, 24, 33, 0.45), rgba(0, 0, 0, 0.6));

}

/* The whole toggle. Setting color-scheme re-resolves every light-dark()

@@ -185,3 +89,11 @@

restating a colour. */

:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] { color-scheme: dark; }

+

+/* The accent for Calendar: hue 20 on Calma's ring (estilo theme/apps.go). */

+:root {

+ --rst-accent: light-dark(#a4323b, #f49191);

+ --rst-accent-strong: light-dark(#8c232e, #ffb4b3);

+ --rst-accent-soft: light-dark(#feebea, #3f2222);

+ --rst-on-accent: light-dark(#ffffff, #111418);

+}

diff --git a/internal/calendar/templates/layout.html b/internal/calendar/templates/layout.html

index e8eb1eb..60471a6 100644

--- a/internal/calendar/templates/layout.html

+++ b/internal/calendar/templates/layout.html

@@ -7,15 +7,23 @@

+{{/* Onest, Calma's typeface, served by estilo (routes.go). Then the

+ spec's order: tokens, theme, brand, estilo base, menu, chrome, and the

+ app's own CSS last. busy.css is the 650ms busy rule; sky.css is the

+ sign-in door's sky. */}}

+<link rel="stylesheet" href="/static/estilo/fonts/v1/fonts.css">

+<link rel="stylesheet" href="{{asset "static/busy.css"}}">

-<link rel="stylesheet" href="{{asset "static/estilo/base.css"}}">

-<link rel="stylesheet" href="{{asset "static/estilo/menu.css"}}">

-<link rel="stylesheet" href="{{asset "static/estilo/chrome.css"}}">

+<link rel="stylesheet" href="{{asset "static/base.css"}}">

+<link rel="stylesheet" href="{{asset "static/menu.css"}}">

+<link rel="stylesheet" href="{{asset "static/chrome.css"}}">

+<link rel="stylesheet" href="{{asset "static/sky.css"}}">

-<script defer src="{{asset "static/estilo/chrome.js"}}"></script>

+<script defer src="{{asset "static/busy.js"}}"></script>

+<script defer src="{{asset "static/chrome.js"}}"></script>

diff --git a/internal/calendar/templates/signin.html b/internal/calendar/templates/signin.html

index e2bce4f..0eac71b 100644

--- a/internal/calendar/templates/signin.html

+++ b/internal/calendar/templates/signin.html

@@ -1,31 +1,10 @@

+{{/* The Oficina door (estilo chrome). Exactly one card: the form, the

+ check-your-email notice, or where Home sign-out lands. The form posts

+ its address as "address", the name gateBegin and the auth plugin

+ read. */}}

-<header rst-page-header>

- <div rst-page-header-titles>

- <h1>{{.Title}}</h1>

- <p rst-page-header-sub>A calendar for one team, on one instance.</p>

- </div>

-</header>

-

-{{with .Data.Error}}

-{{/* Alert, not a plain callout: this reports a live problem with the

- thing the person just did, which is what role="alert" is for. */}}

-{{template "callout" dict "Tone" "negative" "Body" . "Alert" true}}

-{{end}}

-

-{{with .Data.Sent}}

-{{template "callout" dict "Tone" "positive" "Body" .}}

-{{end}}

-

-<form rst-form method="post" action="/signin">

- {{template "field" dict

- "ID" "address"

- "Name" "address"

- "Label" "Email address"

- "Type" "email"

- "Autocomplete" "email"

- "Required" true

- "Hint" "We email you a link. There is no password to forget."}}

- {{template "form-foot" dict "Submit" "Email me a link"}}

-</form>

+{{- with .Data.Form}}{{template "estilo-signin" .}}{{end}}

+{{- with .Data.Sent}}{{template "estilo-signin-sent" .}}{{end}}

+{{- with .Data.SignedOut}}{{template "estilo-signed-out" .}}{{end}}

diff --git a/internal/calendartest/fontlink_test.go b/internal/calendartest/fontlink_test.go

new file mode 100644

index 0000000..32496b1

--- /dev/null

+++ b/internal/calendartest/fontlink_test.go

@@ -0,0 +1,24 @@

+package calendartest

+

+import (

+ "bytes"

+ "os"

+ "path/filepath"

+ "testing"

+

+ "amadan.net/oficina/estilo.git/theme"

+)

+

+// The layout names Onest's stylesheet by a literal path; this keeps that

+// literal equal to estilo's versioned prefix, so an estilo font move

+// fails here rather than every page quietly falling back to the system

+// face.

+func TestLayoutLinksEstilosFonts(t *testing.T) {

+ layout, err := os.ReadFile(filepath.Join("..", "calendar", "templates", "layout.html"))

+ if err != nil {

+ t.Fatal(err)

+ }

+ if want := `href="` + theme.FontPrefix + `fonts.css"`; !bytes.Contains(layout, []byte(want)) {

+ t.Errorf("layout.html does not link %s", want)

+ }

+}

diff --git a/internal/calendartest/signin_door_test.go b/internal/calendartest/signin_door_test.go

new file mode 100644

index 0000000..b61861c

--- /dev/null

+++ b/internal/calendartest/signin_door_test.go

@@ -0,0 +1,93 @@

+package calendartest

+

+import (

+ "net/http"

+ "net/url"

+ "regexp"

+ "strings"

+ "testing"

+)

+

+// The sign-in pages are the Oficina door (estilo chrome, Paul

+// 2026-09-29): one card on the suite's sky, Calendar's mark and name at

+// its head. Only the drawing changed — the form still posts "address" to

+// /signin and gets the same answer it always did.

+func TestSignInPageIsTheDoor(t *testing.T) {

+ app := newApp(t)

+ h := app.Handler()

+

+ rec := get(t, h, "/signin")

+ if rec.Code != http.StatusOK {

+ t.Fatalf("GET /signin: status %d, want 200", rec.Code)

+ }

+ body := rec.Body.String()

+ for _, want := range []string{

+ "estilo-door",

+ "<span>Calendar</span>",

+ `<form rst-form estilo-signin-form method="post" action="/signin"`,

+ `name="address"`,

+ "Email me a link",

+ "We email you a link. There is no password to forget.",

+ } {

+ if !strings.Contains(body, want) {

+ t.Errorf("sign-in page is missing %q:\n%s", want, body)

+ }

+

+ // The sky: an inline placeholder, and served layers reachable signed

+ // out through estilo's handler, not the app's /static/ one.

+ if !regexp.MustCompile(`<img estilo-sky-layer="placeholder"[^>]*src="data:image/png;base64,`).MatchString(body) {

+ t.Errorf("sign-in page has no inline estilo-sky-layer placeholder:\n%s", body)

+ }

+ layer := regexp.MustCompile(`<img estilo-sky-layer="[a-z]+"[^>]*src="(/static/estilo/sky/v1/[^"]+)"`).FindStringSubmatch(body)

+ if layer == nil {

+ t.Fatalf("sign-in page links no served estilo-sky-layer img:\n%s", body)

+ }

+ if got := get(t, h, layer[1]); got.Code != http.StatusOK || got.Header().Get("Content-Type") != "image/svg+xml" {

+ t.Errorf("GET %s signed out: %d %q, want 200 image/svg+xml", layer[1], got.Code, got.Header().Get("Content-Type"))

+ }

+

+ // The door's own styles are linked and served.

+ for _, name := range []string{"chrome", "sky"} {

+ href := regexp.MustCompile(`/static/` + name + `\.[0-9a-f]{16}\.css`).FindString(body)

+ if href == "" {

+ t.Errorf("sign-in page does not link static/%s.css", name)

+ continue

+ }

+ if got := get(t, h, href); got.Code != http.StatusOK {

+ t.Errorf("GET %s: status %d, want 200", href, got.Code)

+ }

+

+ // POST address= still begins sign-in exactly as before.

+ posted := post(t, h, "/signin", url.Values{"address": {"someone@example.com"}})

+ if posted.Code != http.StatusSeeOther || posted.Header().Get("Location") != "/signin?sent=1" {

+ t.Fatalf("POST /signin: %d to %q, want 303 to /signin?sent=1", posted.Code, posted.Header().Get("Location"))

+ }

+ if mail, err := app.LastMailForTest(); err != nil || !strings.Contains(mail, "/auth/verify?token=") {

+ t.Fatalf("POST /signin address= mailed no link (err %v)", err)

+ }

+}

+

+// Every outcome the auth plugin redirects back with keeps its sentence;

+// a bad address is the field's own error, the rest are the page's.

+func TestSignInDoorOutcomes(t *testing.T) {

+ h := newApp(t).Handler()

+ for query, want := range map[string][]string{

+ "sent=1": {"estilo-door", "Check your email", "The link works once, and expires shortly.", `href="/signin"`, "Send another link"},

+ "err=rate": {"estilo-signin-form", `role="alert"`, "Too many attempts. Wait a few minutes, then try again."},

+ "err=expired": {"estilo-signin-form", "That link has expired. Ask for a new one."},

+ "err=nope": {"estilo-signin-form", "That link did not work. Ask for a new one."},

+ "err=address": {`rst-field-error id="estilo-signin-address-error" role="alert">That does not look like an email address.`},

+ } {

+ body := get(t, h, "/signin?"+query).Body.String()

+ for _, w := range want {

+ if !strings.Contains(body, w) {

+ t.Errorf("/signin?%s is missing %q:\n%s", query, w, body)

+ }

+ if body := get(t, h, "/signin?sent=1").Body.String(); strings.Contains(body, "estilo-signin-form") {

+ t.Error("/signin?sent=1 still draws the form; the check-your-email card replaces it")

+ }

+}

diff --git a/internal/calendartest/vendored_test.go b/internal/calendartest/vendored_test.go

index ef5dc34..4169ad9 100644

--- a/internal/calendartest/vendored_test.go

+++ b/internal/calendartest/vendored_test.go

@@ -1,6 +1,12 @@

package calendartest

import (

+ "amadan.net/oficina/estilo.git/base"

+ estilobusy "amadan.net/oficina/estilo.git/busy"

+ "amadan.net/oficina/estilo.git/chrome"

+ "amadan.net/oficina/estilo.git/menu"

+ "amadan.net/oficina/estilo.git/sky"

+ "amadan.net/oficina/estilo.git/theme"

"bytes"

"os"

"path/filepath"

@@ -20,7 +26,30 @@ const vendoredTheme = "day"

// 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,

+ // rastrillo's shim as estilo carries it: without the old busy rule,

+ // which would fight busy.js. Pinned to estilo by TestBusyFilesAreEstilos.

+ "rastrillo.js": true,

+ // Calma with Calendar's accent, from estilo (estilo AGENTS.md,

+ // decisions table, row 8; this repo's ruling 2 is superseded). Pinned

+ // to estilo instead, by TestThemeIsEstilosForCalendar below.

+ "theme.css": true,

+}

+

+// TestThemeIsEstilosForCalendar pins static/theme.css to the estilo this

+// app is built against. After an estilo upgrade, re-write it with

+// `go run ./scripts/writeestilo` — never by hand.

+func TestThemeIsEstilosForCalendar(t *testing.T) {

+ want, ok := theme.ForApp("calendar")

+ if !ok {

+ t.Fatal("estilo's theme ring has no calendar")

+ }

+ got, err := os.ReadFile(filepath.Join("..", "calendar", "static", "theme.css"))

+ if err != nil {

+ t.Fatal(err)

+ }

+ if !bytes.Equal(got, want) {

+ t.Error("static/theme.css differs from estilo's theme for calendar; run go run ./scripts/writeestilo")

+ }

}

// The scaffold delivered these files once; they are app-owned from

@@ -52,3 +81,65 @@ func TestVendoredAssetsMatchTheLibrary(t *testing.T) {

}

+

+// rastrillo's busy rule (Paul, 2026-09-29): a submit button's label gives

+// way to a spinner for at least 650ms, the button disables, and Back

+// resets it. static/ carries it as estilo does — the shim without the old

+// rule, busy.js and busy.css — pinned here to the estilo this app builds

+// against. After an estilo upgrade: go run ./scripts/writeestilo.

+func TestBusyFilesAreEstilos(t *testing.T) {

+ for name, want := range map[string][]byte{

+ "rastrillo.js": estilobusy.ShimJS(),

+ "busy.js": estilobusy.JS(),

+ "busy.css": estilobusy.CSS(),

+ } {

+ got, err := os.ReadFile(filepath.Join("..", "calendar", "static", name))

+ if err != nil {

+ t.Fatal(err)

+ }

+ if !bytes.Equal(got, want) {

+ t.Errorf("static/%s differs from estilo's; run go run ./scripts/writeestilo", name)

+ }

+}

+

+// The sign-in door's styles (Paul, 2026-09-29: every app's sign-in is a

+// version of the Oficina sign-in screen): estilo chrome's chrome.css,

+// which holds the [estilo-door] and [estilo-signin] rules, and the sky

+// behind it. Pinned to the estilo this app builds against. After an

+// estilo upgrade: go run ./scripts/writeestilo.

+func TestDoorFilesAreEstilos(t *testing.T) {

+ for name, want := range map[string][]byte{

+ "chrome.css": chrome.CSS(),

+ "sky.css": sky.CSS(),

+ } {

+ got, err := os.ReadFile(filepath.Join("..", "calendar", "static", name))

+ if err != nil {

+ t.Fatal(err)

+ }

+ if !bytes.Equal(got, want) {

+ t.Errorf("static/%s differs from estilo's; run go run ./scripts/writeestilo", name)

+ }

+}

+

+// The shared chrome's other files (estilo spec 2026-09-23 §1): base.css

+// (the link rule), menu.css (every floating panel) and chrome.js (Esc and

+// outside-click close). The layout links them in the spec's order after

+// theme.css. Pinned like the door's; after an estilo upgrade:

+// go run ./scripts/writeestilo.

+func TestSharedChromeFilesAreEstilos(t *testing.T) {

+ for name, want := range map[string][]byte{

+ "base.css": base.CSS(),

+ "menu.css": menu.CSS(),

+ "chrome.js": chrome.JS(),

+ } {

+ got, err := os.ReadFile(filepath.Join("..", "calendar", "static", name))

+ if err != nil {

+ t.Fatal(err)

+ }

+ if !bytes.Equal(got, want) {

+ t.Errorf("static/%s differs from estilo's; run go run ./scripts/writeestilo", name)

+ }

+}

diff --git a/internal/guardstest/guards_test.go b/internal/guardstest/guards_test.go

index f4d37d5..8cf36df 100644

--- a/internal/guardstest/guards_test.go

+++ b/internal/guardstest/guards_test.go

@@ -72,10 +72,10 @@ func walk(t *testing.T, root string, exts []string, fn func(path string, body []

// line cap would break that pin, which is the more valuable guard.

var lineCapExempt = map[string]string{

"internal/calendar/static/datetime.js": "vendored from rastrillo; pinned byte-for-byte",

- "internal/calendar/static/rastrillo.js": "vendored from rastrillo; pinned byte-for-byte",

+ "internal/calendar/static/rastrillo.js": "rastrillo's, written from estilo's busy by scripts/writeestilo; pinned byte-for-byte",

"internal/calendar/static/select.js": "vendored from rastrillo; pinned byte-for-byte",

"internal/calendar/static/tokens.css": "vendored from rastrillo; pinned byte-for-byte",

- "internal/calendar/static/theme.css": "vendored from rastrillo; pinned byte-for-byte",

+ "internal/calendar/static/theme.css": "written from estilo by scripts/writeestilo; pinned byte-for-byte",

}

func TestNoFileExceedsTheLineCap(t *testing.T) {

diff --git a/native/ios/Assets.xcassets/AppIcon.appiconset/AppIcon.png b/native/ios/Assets.xcassets/AppIcon.appiconset/AppIcon.png

index bc4e656..37cdde4 100644

Binary files a/native/ios/Assets.xcassets/AppIcon.appiconset/AppIcon.png and b/native/ios/Assets.xcassets/AppIcon.appiconset/AppIcon.png differ

diff --git a/native/macos/AppIcon.icns b/native/macos/AppIcon.icns

index b3444c8..ec4cd9d 100644

Binary files a/native/macos/AppIcon.icns and b/native/macos/AppIcon.icns differ

diff --git a/scripts/writeestilo/main.go b/scripts/writeestilo/main.go

new file mode 100644

index 0000000..e5520ec

--- /dev/null

+++ b/scripts/writeestilo/main.go

@@ -0,0 +1,40 @@

+// Command writeestilo re-writes the files internal/calendar/static takes from

+// the estilo this module pins: theme.css (Calma, with Calendar's accent),

+// and rastrillo's busy rule as estilo carries it — rastrillo.js without

+// the old rule, busy.js and busy.css — and the sign-in door's chrome.css

+// and sky.css, and the shared chrome's base.css, menu.css and chrome.js. Run it from the repository root

+// after upgrading estilo; the pin tests in internal/calendartest fail until you do.

+package main

+

+import (

+ "os"

+

+ "amadan.net/oficina/estilo.git/base"

+ "amadan.net/oficina/estilo.git/busy"

+ "amadan.net/oficina/estilo.git/chrome"

+ "amadan.net/oficina/estilo.git/menu"

+ "amadan.net/oficina/estilo.git/sky"

+ "amadan.net/oficina/estilo.git/theme"

+)

+

+func main() {

+ css, ok := theme.ForApp("calendar")

+ if !ok {

+ panic("estilo's theme ring has no calendar")

+ }

+ for name, body := range map[string][]byte{

+ "theme.css": css,

+ "rastrillo.js": busy.ShimJS(),

+ "busy.js": busy.JS(),

+ "busy.css": busy.CSS(),

+ "chrome.css": chrome.CSS(),

+ "sky.css": sky.CSS(),

+ "base.css": base.CSS(),

+ "menu.css": menu.CSS(),

+ "chrome.js": chrome.JS(),

+ } {

+ if err := os.WriteFile("internal/calendar/static/"+name, body, 0o644); err != nil {

+ panic(err)

+ }

+}

oficina / calendar Public

Merge origin/main: Calma, the Oficina door and the busy rule