studio-engine 0.132.0 → 0.133.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dd2c739840540a736a0ad347abe13b22047ff20070c8e336df86172c6518d848
-  data.tar.gz: fced70c6c90490c2d74732bdae8270b25f0e7717a87623daf734984c6e4fb101
+  metadata.gz: 4fb5298612e52f07d4d829bf6154de3fe55d44e79f9fcc7fb3fc5c64a5fc77b1
+  data.tar.gz: ae606171f7f2f8866e4bdf20b609192ab6da90a502357c32267f00810a1567ee
 SHA512:
-  metadata.gz: fb8cc964841b4eb76cdb6a64a69cf2394f18d7d87863585c1159c2afc12305e5268acb8c508f7922744669793be9364135e79898415a1d6444c57c1e64dbd815
-  data.tar.gz: 3ad57bddb03aaf79c98c1f6f38ac5e92d743f59ce7701e502c092123b8731f0ac1c1d32a209310684662c8c81c6f2a2b44cbdb0a45c29d9265013aaa782ef607
+  metadata.gz: 7aba4b035be637a6496b1c7e05d6bf9829a803f1566bd8192a3de247ae692e678d4387b6c8af861b1b56e763d79033c4411ab4385896bd4ba482a6eeb9ce166e
+  data.tar.gz: 17c221456698d97e663896658e84d22e174bf889d3ee684dc79ea9f7925cda3c8ac1a6b5212dafc427abdbbfaeafe1a2db101f5eebddf5f612bb65d5f14b89fc

data/CHANGELOG.md

@@ -1,9 +1,96 @@
 # Changelog
 
-The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This project follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html) — `MAJOR.MINOR.PATCH`. Consumer Rails apps install the released RubyGems package and pin the floor each one needs — the pins differ on purpose, and every consumer records why beside its own. Bumping the gem version and updating consumer lockfiles is a release; `bin/release prepare` allocates the version and does both (see [`docs/RELEASE.md`](./docs/RELEASE.md)). Write entries under `## Unreleased` and never write a version heading: when `prepare` allocates a version it rolls this file in the same commit, moving everything under `## Unreleased` beneath a new `## <version> — <date>` heading (written even when the bucket is empty) and leaving `## Unreleased` first and empty. It refuses the sweep, with nothing published, when the roll would lie or it cannot read this file; when it skips allocation, nothing rolls. [`docs/RELEASE.md`](./docs/RELEASE.md), *Rolling `Unreleased` into a version*, says when each happens and what to do by hand. `test/docs/changelog_structure_test.rb` guards the shape.
+The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This project follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html) — `MAJOR.MINOR.PATCH`. Consumer Rails apps install the released RubyGems package and pin the floor each one needs — the pins differ on purpose, and every consumer records why beside its own. Bumping the gem version and updating consumer lockfiles is a release; `bin/release prepare` allocates the version and does both (see [`docs/RELEASE.md`](./docs/RELEASE.md)). **Do not edit this file in a PR.** Add a fragment, `changelog.d/<slug>.<kind>.md`, instead ([`changelog.d/README.md`](./changelog.d/README.md)); `bin/changelog-check` fails a PR that adds lines under `## Unreleased`. At release, `bin/changelog-compile` folds the fragments into `## Unreleased` by kind and deletes them. Never write a version heading: when `prepare` allocates a version it rolls this file in the same commit, moving everything under `## Unreleased` beneath a new `## <version> — <date>` heading (written even when the bucket is empty) and leaving `## Unreleased` first and empty. It refuses the sweep, with nothing published, when the roll would lie or it cannot read this file; when it skips allocation, nothing rolls. [`docs/RELEASE.md`](./docs/RELEASE.md), *Rolling `Unreleased` into a version*, says when each happens and what to do by hand. `test/docs/changelog_structure_test.rb` guards the shape.
 
 ## Unreleased
 
+## 0.133.1 — 2026-11-06
+
+### Changed
+
+- **The browser lane runs as three shards.** It had grown to about 17 minutes of specs on
+  one runner, against about 9 minutes for the engine suite, so it was the long pole of
+  every engine PR. Each shard writes its own receipt, and `bin/e2e-executed-set-check`
+  now also refuses receipts whose shard total is not `shards:` in `config/e2e_lane.yml`.
+  Nothing changes for a consumer.
+
+## 0.133.0 — 2026-11-06
+
+### Deprecated
+
+- **`studio/_page_header`'s `actions_html:`.** It still renders, before the menu, for one
+  more release. In development the first render from each call site writes one warning to
+  the log. Move each control to `tabs:`, `menu:`, `action:`, `tools_html:` or `meta:`.
+### Changed
+
+- **A link to a place on the same page scrolls there. It no longer loads the page again.**
+  Alex McRitchie, on the style guide's tabs: "The system needs to understand when a scroll
+  down is the solution rather than a page change." Turbo 8 made a click on `#tricks` a full
+  visit: a fetch, a render and the page transition. `studio/in_page_links` now takes a plain
+  click on a link to this page's path and query with a `#fragment` whose element exists. It
+  smooth-scrolls to the element under the pinned stack (a jump under reduced motion), pushes
+  the fragment so Back and a shared link work, and moves focus to the target. Cross-page
+  links, modifier clicks, `target`, `download` and `data-turbo="false"` are untouched. The
+  style guide's tab highlight holds the clicked tab until the scroll settles
+  (docs/PAGE_HEADER.md, "In-page links"; task `in-page-links-scroll`).
+- **The style guide's cards carry trick names, not markup snippets.** Alex McRitchie,
+  2026-11-06: "I really just need to have a good naming convention so I can convey an
+  idea to my agents." Every card under Tricks, Loaders and Tasks on `/admin/style` now
+  shows a short name as its heading ("Sheen", "Border Glow", "Hold"), a one-line note,
+  and its class or helper small and muted. A variant is the name, a middle dot and a
+  lower-case word ("Sheen · loop", "Border Glow · clear", "Hold · recolor"), and
+  variants of one primitive share a card, side by side on its stage: Tricks and
+  Loaders went from 79 cards to 58. The usage `<pre>` and its Copy are gone; the one Copy copies the
+  agent line, for example `Sheen — .sheen; Sheen · loop — .sheen--loop`. One registry,
+  `config/studio_tricks.yml` (`Studio::Tricks`), feeds the cards and the generated
+  glossary `docs/TRICKS.md` (`bin/tricks-doc`; `test/lib/tricks_registry_test.rb`
+  fails when they drift, a name repeats, or a token names a class, helper, partial or
+  script the engine does not ship). `style/_specimen` takes `trick:` (and `variant:`)
+  in place of `klass:`, `usage:` and `note:`. The Tricks branded-loader group no longer
+  repeats the busy button and the overlay trigger: they are the Loaders section's Busy
+  Button and Overlay (task `tricks-named-not-snippets`).
+
+### Added
+
+- **The page header's four kinds of control.** Alex McRitchie, 2026-11-06: the
+  /deployments header showed a grey pill, a purple button and a black button side by
+  side. `studio/_page_header` now takes the right side as four kinds, each with one look,
+  in one fixed order and at one height: `tabs:` (views of the same thing) or `anchors:`
+  (sections of this page, the same pill group), `menu:` (pages elsewhere, behind one
+  neutral "Links" button that opens a popover list; Escape closes it and focus returns),
+  `action:` (the one primary button) and `tools_html:` (local-only controls, muted). A
+  small primary button in the row takes a clear 1px border, so it stands at a neutral
+  button's height. `docs/PAGE_HEADER.md` gives the decision rule for which kind a link is,
+  and the style guide's Page header specimen shows all four (task
+  `page-header-control-kinds`).
+
+- **A carousel can loop and play itself: `loop:` and `autoplay:`.** Alex McRitchie wants
+  the hub's Portfolio spotlight "auto scrolling and in a loop". `loop: true` wraps the
+  arrows and keys (last to first, first to last) and keeps both arrows enabled, with no
+  cloned slides. `autoplay: <seconds>` moves one slide each interval in `:standard` and
+  `:spotlight`; it holds on hover over the slides, on keyboard focus, in a hidden tab, off
+  screen, and after any swipe or press until the reader is idle; it starts stopped under
+  reduced motion and never writes the status line. A pause button (`.carousel-autoplay`,
+  "Pause slideshow" / "Play slideshow") meets WCAG 2.2.2. Both default off, so every
+  existing carousel is unchanged (task `carousel-autoplay-and-loop`).
+- **The engine ships a standard sign-in card.** Alex McRitchie, on the style guide's
+  Email field specimen: "this should use the standard auth component with Google and
+  Email." `studio/auth/_sign_in_card` (a page) and `studio/auth/_sign_in_modal` (a
+  modal host's template) render Google, then "or", then the email magic link; Send
+  flips the card to a link-sent step with the shared resend footer. Locals: `heading`,
+  `subheading` (default "Sign in to" the app name), `return_to` (a plain in-app path
+  only; it rides the magic-link POST and the Google request URL), `preamble` and
+  `extras` slots for an age attestation or extra providers, and `demo`. Real use
+  posts Google to `/auth/google_oauth2` (`button_to` POST, Turbo off) and the email to
+  `POST /magic_link`, and reads the `503 delivery_failed` answer. `demo: true` posts
+  nothing. `/admin/style` > Modals > Auth is now one "Sign in" specimen that opens
+  the card in demo mode; the separate Email field and Resend footer specimens are
+  gone, and both partials stay. `studio/modals/auth/_resend_footer` takes
+  `close: false` for a host that is not a modal. The hub and turf-monster still
+  render their own cards; adoption is follow-up work. This reverses the 2026-09-09
+  call (PR #319) that the engine ships only the fragments, not a card. Docs: `docs/SIGN_IN_CARD.md`
+  (task `engine-ships-sign-in-card`).
+
 ## 0.132.0 — 2026-11-06
 
 ## 0.131.0 — 2026-11-05

data/README.md

@@ -30,7 +30,7 @@ resolved.
 
 ## What It Provides
 
-- **Authentication**: Passwordless magic-link auth, optional password auth, Google OAuth via OmniAuth (ships ready: strategy, default `User.from_omniauth` and a setup modal until the OAuth client is set; docs/GOOGLE_AUTH_SETUP.md), Solana wallet sign-in, and optional one-way SSO patterns
+- **Authentication**: Passwordless magic-link auth, optional password auth, Google OAuth via OmniAuth (ships ready: strategy, default `User.from_omniauth` and a setup modal until the OAuth client is set; docs/GOOGLE_AUTH_SETUP.md), Solana wallet sign-in, and optional one-way SSO patterns; one standard sign-in card (Google, or, email magic link) as a page partial and a modal ([`docs/SIGN_IN_CARD.md`](docs/SIGN_IN_CARD.md))
 - **Error handling**: `Studio::ErrorHandling` concern with `rescue_and_log`, `ErrorLog` model with `capture!`, error log viewer at `/error_logs`. `rescue_and_log` writes one row per failure: an unsaved `target:` or `parent:` is named on the row by its slug (else `unsaved User`), never linked, so the logger never saves it. If the row itself cannot be written, the original error still raises and `Rails.logger.error` records both.
 - **Session drift**: every page carries a session stamp and loads `window.StudioSession`, which notices when another tab signs in or out, the session expires, or the server revokes it; `session:changed` / `session:mismatch` events, cross-tab sync, an identity-source plug-in interface, and `expectChange` holds for deliberate switches. The rehydrate endpoint (`GET /session/state`) is opt-in. See [`docs/SESSION_DRIFT.md`](docs/SESSION_DRIFT.md).
 - **Theme system**: Dynamic CSS custom properties generated from 7 role colors (primary, dark, light, success, accent, warning, danger). Dark/light mode toggle. Admin theme editor at `/admin/theme`.
@@ -293,18 +293,24 @@ actions; the engine supplies only the banner.
 ### The page header — `studio/_page_header`
 
 An admin page's title: a crumb trail from the app's one parent map (`Studio.crumbs`,
-`studio_crumbs`) above an h2-size title, tabs with a gliding pill and one action on the right,
-and the page's other links on a line under it. A plain header at rest, a bar once stuck under
+`studio_crumbs`) above an h2-size title, the right side's four kinds of control (tabs or
+anchors with a gliding pill, a Links menu, one action, then tools, in that order and at one
+height), and the page's other links on a line under it. A plain header at rest, a bar once stuck under
 the navbar, in the pinned stack so a table's sticky header sits under it
 ([`docs/PAGE_HEADER.md`](docs/PAGE_HEADER.md)).
 
 ```erb
 <%= render "studio/page_header", title: "Deployments", crumbs: studio_crumbs(:deployments),
-      label: "Views", tabs: [{ label: "Board", href: deployments_path, current: "page" }],
-      actions_html: link_to("New Task", new_task_path, class: "btn btn-sm btn-primary"),
+      label: "Views", tabs: [{ label: "Board", href: deployments_path, current: "page" },
+                             { label: "Triage", href: triage_path }],
+      menu: [{ label: "Stages", href: stages_path }, { label: "Docs", href: docs_path }],
+      action: { label: "New Task", href: new_task_path },
       links: [{ label: "Epics", href: epics_path }] %>
 ```
 
+`actions_html:` is deprecated for one release; the decision rule for which kind a link is
+lives in [`docs/PAGE_HEADER.md`](docs/PAGE_HEADER.md#the-four-kinds-of-control).
+
 ### The section header — `studio/_section_header`
 
 A section's title that sticks under the page row until the next section's takes its place,
@@ -343,6 +349,26 @@ row opens on its first. The browser sets it before the first paint where it has
 `scroll-initial-target`; elsewhere the controller jumps there when it connects, with no
 glide and nothing announced. A `#fragment` link to an element inside the row wins.
 
+`loop: true` wraps the row: Next at the last slide goes to the first, Previous at the first
+to the last, and neither arrow is ever disabled. No slide is cloned, so a screen reader reads
+each one once; the row glides back across itself.
+
+`autoplay:` is the seconds between moves (default `nil`, off). The row moves one slide each
+interval, in both styles. It holds still while the pointer is over the slides, while keyboard
+focus is in the row, while the tab is hidden or the row is off screen, and after a swipe,
+wheel, arrow, dot or key until the reader leaves it alone for one interval (never under five
+seconds). A pause button ("Pause slideshow", then "Play slideshow") sits before the arrows,
+for WCAG 2.2.2. Under reduced motion the row starts stopped, and Play starts it. Autoplay
+never writes the status line. Without `loop:` it stops at the last slide, and Play starts
+again from the first.
+
+```erb
+<%= render layout: "studio/carousel",
+      locals: { label: "Portfolio", items: @apps, style: :spotlight, autoplay: 5, loop: true } do |app| %>
+  <%= render "apps/card", app: app %>
+<% end %>
+```
+
 ```erb
 <%= render layout: "studio/carousel",
       locals: { label: "Team", items: @people, style: :spotlight, caption: ->(person) { person.title } } do |person| %>
@@ -621,23 +647,22 @@ inline transport nothing listens, so the dispatch is a harmless no-op there.
 
 #### The auth modal's credential slot
 
-**This engine ships no sign-in card.** Each app owns its own and computes its
-credential buttons itself: turf-monster's is `app/views/modals/_auth.html.erb`,
-which is also the authority `lib/studio.rb` cites beside the Solana routes. The
-engine's one auth card was the living style guide's MIRROR of turf's,
-`style/modals/_auth`, and it was retired with the other mirrors on 2026-09-09
-(PR #319). For sign-in the engine now ships fragments, not a card:
-`studio/modals/shared/_email_field` and `studio/modals/auth/_resend_footer`,
-each carded on the style guide.
-
-**The wallet credential slot has no host today.** solana-studio still ships
-`solana_studio/auth/_wallet_credential`, a Solana button written to be
-*contributed* into a sign-in card rather than copied into one. The retired
-mirror was its only renderer. Neither turf-monster nor mcritchie-studio names
-the path; turf's card draws its wallet button directly. So bundling solana-studio
-no longer puts a wallet button anywhere. Whether the engine should host the slot
-again, or the convention should be retired, is an open call, not a fact this
-README can settle.
+**This engine ships the standard sign-in card:** `studio/auth/_sign_in_card`
+(a page) and `studio/auth/_sign_in_modal` (a modal), Google, then "or", then the
+email magic link, built from `studio/modals/shared/_email_field` and
+`studio/modals/auth/_resend_footer` ([`docs/SIGN_IN_CARD.md`](docs/SIGN_IN_CARD.md)).
+It is the one authority `lib/studio.rb` cites beside the Solana routes. It
+reverses the 2026-09-09 call (PR #319) that the engine ships only the fragments
+(Alex McRitchie, 2026-11-06). Until the apps adopt it, each still renders its
+own card: turf-monster's `app/views/modals/_auth.html.erb` computes its wallet
+button from `auth_methods` and `feature?(:web3)`.
+
+**The wallet credential slot is the card's `extras:` local.** solana-studio
+still ships `solana_studio/auth/_wallet_credential`, a Solana button written to
+be *contributed* into a sign-in card rather than copied into one. The engine
+card takes extra providers as named partials, after Google and before "or", so
+an app passes `extras: "solana_studio/auth/wallet_credential"` (or its own
+wallet button). Turf's adoption decides which one it keeps.
 
 **A card that does host it owns the gate.** The retired mirror's rules still
 hold; they simply live in that app's view now. Two layers answer two different
@@ -831,8 +856,11 @@ than assuming drop-in equivalence:
 ### Style guide — your app's own section
 
 `/admin/style` is the engine's living style guide, and every section on it is
-the engine's: Theme, Modals, Tricks, Tasks. An app grows a **fifth section, its
-own**, by defining one partial:
+the engine's: Theme, Modals, Tricks, Tasks. Each card under Tricks, Loaders and
+Tasks carries a short trick name ("Sheen", "Border Glow · clear") that you can say
+to an agent: [`docs/TRICKS.md`](./docs/TRICKS.md) maps every name to its class or
+helper, generated from `config/studio_tricks.yml` by `bin/tricks-doc`. An app grows a
+**fifth section, its own**, by defining one partial:
 
 A host may also define `app/views/style/host/_logos.html.erb`, which replaces the Theme section's
 default logo grid.
@@ -2062,9 +2090,12 @@ in [`docs/RELEASE.md`](./docs/RELEASE.md).
 
 **Building an engine change?** Do **not** edit `lib/studio/version.rb`. The
 release owns the version, and McRitchie Studio's `bin/dor-check` refuses any PR
-that touches that file. Update [`CHANGELOG.md`](./CHANGELOG.md) under
-`Unreleased` (that is *not* gated), run `bin/release-check --build`, and open
-your PR into `accepted`. That is the whole of your part.
+that touches that file. Do not edit [`CHANGELOG.md`](./CHANGELOG.md): add a
+fragment, `changelog.d/<slug>.<kind>.md` (format in
+[`changelog.d/README.md`](./changelog.d/README.md)). Engine CI runs
+`bin/changelog-check`, which fails a PR that changes what the gem ships and adds no
+fragment, or that adds lines under `## Unreleased`. Run `bin/release-check --build`
+and open your PR into `accepted`. That is the whole of your part.
 
 **Conducting the release?** Run `bin/release prepare` from mcritchie-studio and
 let it allocate the version — it derives the bump, commits `lib/studio/version.rb`
@@ -2072,8 +2103,9 @@ with its `Gemfile.lock` onto **`origin/release`**, then publishes, tags, and bum
 each consumer's lock. **Do not set the version by hand.** A hand-set number makes
 the allocation read the current version as already past the last tag and skip, so
 the hand number silently wins over the derived one, and the skip rolls no
-changelog. **When it allocates, `prepare` also rolls
-[`CHANGELOG.md`](./CHANGELOG.md)** in the same commit: everything under
+changelog. **When it allocates, the release compiles the fragments
+(`bin/changelog-compile`) and `prepare` rolls [`CHANGELOG.md`](./CHANGELOG.md)** in
+the same commit: everything under
 `## Unreleased` moves beneath the new version's heading, written even when the
 bucket is empty, and `## Unreleased` stays first and empty. It refuses the sweep,
 with nothing published, when the roll would lie or it cannot read the file.

data/app/assets/tailwind/studio_engine/engine.css

@@ -377,6 +377,13 @@ body.modal-open .studio-app-banner {
 
 @utility page-header-actions {
   flex-shrink: 0;
+  /* The fixed order of the right side (docs/PAGE_HEADER.md, "The four kinds of control"):
+     the menu, then the action, then the tools. Each is a .btn-sm, so all share one height. */
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
   /* Never wider than the row: a group of controls wraps inside it on a phone, and the
      page does not scroll sideways. */
   max-width: 100%;
@@ -388,6 +395,116 @@ body.modal-open .studio-app-banner {
   }
 }
 
+/* ONE CONTROL HEIGHT. A .btn-neutral carries a 1px border and a .btn-primary none, so side
+   by side the neutral one stood 2px taller (30px to 28px, measured in the e2e lab). In the
+   row every small primary takes a clear border of the same width, so a tab, the menu, the
+   action and a tool all stand at one height. */
+.page-header .btn-sm.btn-primary {
+  border: 1px solid transparent;
+}
+
+/* THE QUICK-LINKS MENU: related pages elsewhere, behind one neutral "Links" button. The
+   list is the browser's popover, so Escape, a click outside and the focus return need no
+   script. Where the browser has anchor positioning, CSS hangs the list under the button's
+   right edge; elsewhere the page-header controller places it (studio/page_header,
+   menuPlacement). anchor-scope keeps each row's button its own anchor. */
+@utility page-header-menu {
+  position: relative;
+  anchor-scope: --page-header-menu;
+}
+
+@utility page-header-menu-button {
+  gap: 0.375rem;
+  anchor-name: --page-header-menu;
+}
+
+/* A chevron that points down, and up while the list is open. CSS, so a reader hears the
+   button's name alone. */
+@utility page-header-menu-caret {
+  width: 0.375rem;
+  height: 0.375rem;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: translateY(-0.125rem) rotate(45deg);
+  transition: transform 150ms ease;
+
+  .page-header-menu:has(> .page-header-menu-list:popover-open) & {
+    transform: translateY(0.125rem) rotate(225deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+@utility page-header-menu-list {
+  /* The popover's own styles centre it on the screen; this is a dropdown. */
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  min-width: 10rem;
+  max-width: min(20rem, calc(100vw - 2rem));
+  padding: 0.25rem;
+  @apply rounded-lg border border-subtle bg-surface text-body shadow-lg;
+
+  & ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  @supports (anchor-name: --a) and (position-anchor: --a) {
+    position-anchor: --page-header-menu;
+    top: anchor(bottom);
+    right: anchor(right);
+    margin-top: 0.25rem;
+    position-try-fallbacks: flip-block, flip-inline;
+  }
+}
+
+@utility page-header-menu-item {
+  display: block;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  font-size: calc(var(--type-base, 16px) * 0.875);
+  font-weight: 500;
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  @apply text-body;
+
+  &:hover,
+  &:focus-visible {
+    @apply bg-surface-alt text-heading;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+  }
+}
+
+/* THE TOOLS: local-only and dev controls, after the action. Muted, behind a dashed rule, so
+   they never read as the page's own controls; full strength while a pointer or focus is on
+   them. */
+@utility page-header-tools {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding-left: 0.5rem;
+  border-left: 1px dashed;
+  @apply border-subtle;
+  opacity: 0.7;
+  transition: opacity 150ms ease;
+
+  &:hover,
+  &:focus-within {
+    opacity: 1;
+  }
+}
+
 /* THE TRAIL: the page's ancestors above the title (docs/PAGE_HEADER.md, "Crumbs"). It takes
    the row's whole first line, so the title, the tabs and the actions share the next one.
    Ancestors are muted links, the page itself is bold, and a chevron sits between. Below
@@ -829,6 +946,23 @@ body.modal-open .studio-app-banner {
   }
 }
 
+/* The pause button of an autoplaying row (autoplay:), a carousel-button beside the
+   arrows. It shows pause while the row may move and play once the reader (or reduced
+   motion) has stopped it; the controller sets data-carousel-stopped and the name. */
+@utility carousel-autoplay {
+  & .carousel-autoplay-play {
+    display: none;
+  }
+
+  &[data-carousel-stopped] .carousel-autoplay-pause {
+    display: none;
+  }
+
+  &[data-carousel-stopped] .carousel-autoplay-play {
+    display: block;
+  }
+}
+
 /* -- The spotlight carousel (studio/_carousel, style: :spotlight) --------------
    The same region, track, arrows, dots and keys, but each slide snaps to the centre.
    The centred slide is full size and full colour, with its caption under it; its
@@ -1037,6 +1171,13 @@ body.modal-open .studio-app-banner {
   scroll-margin-top: calc(var(--nav-h, 5rem) + var(--pin-page-h, 0px) + var(--section-header-h));
 }
 
+/* An in-page link's target takes focus when the jump lands (studio/in_page_links). One that
+   is not focusable of itself gets tabindex=-1 and this mark until it loses focus. Focus is
+   for the next Tab, not a ring round a whole section. */
+[data-in-page-focus]:focus {
+  outline: none;
+}
+
 /* -- Scrims: tints and shades ----------------------------------------------
    A scrim is the wash laid over media (a photo, a video) so text reads on it.
    It comes in two TONES, and the tone is a design decision, not a colour pick:

data/app/javascript/studio/application.js

@@ -19,6 +19,7 @@ import IdentityMiniController from "studio/controllers/identity_mini_controller"
 import { startPinnedStack } from "studio/pinned_stack"
 import { installAlpineShims } from "studio/alpine_shims"
 import { installStudioLoader } from "studio/loader"
+import "studio/in_page_links"
 
 installAlpineShims()
 startPinnedStack()

data/app/javascript/studio/carousel.js

@@ -48,8 +48,15 @@ export function perPage(clientWidth, slideWidth, gap) {
 }
 
 // The stop an arrow or a key takes the row to, held to the first and last stop.
-export function targetStop(action, current, page, count) {
+// A LOOPING row (loop: true) wraps instead: Next at the last stop goes to the
+// first, Previous at the first goes to the last. A page that would overshoot an
+// end still lands on that end first, so no slide is skipped on the way round.
+export function targetStop(action, current, page, count, loop = false) {
   const last = Math.max(0, count - 1)
+  if (loop && last > 0) {
+    if (action === "next" && current >= last) return 0
+    if (action === "prev" && current <= 0) return last
+  }
   const to = {
     prev: current - page,
     next: current + page,
@@ -60,6 +67,64 @@ export function targetStop(action, current, page, count) {
   return Math.min(last, Math.max(0, to))
 }
 
+// AUTOPLAY (the partial's autoplay:, data-carousel-autoplay): the row moves one
+// stop each interval, never while a reason holds it still.
+
+// The interval in seconds from the attribute, or null for no autoplay.
+export function autoplaySeconds(value) {
+  if (value === null || value === undefined || value === "") return null
+  const seconds = Number(value)
+  return Number.isFinite(seconds) && seconds > 0 ? seconds : null
+}
+
+// The stop autoplay moves to from `current`: the next one, round to the first
+// on a looping row. Null where it has nowhere to go: the last stop of a row that
+// does not loop (autoplay stops there), or a row with one stop.
+export function autoplayStop(current, count, loop = false) {
+  if (!(count > 1)) return null
+  if (current < count - 1) return current + 1
+  return loop ? 0 : null
+}
+
+// What holds autoplay still. "stopped" is the reader's own pause button (and
+// reduced motion, which starts the row stopped); it alone shows the play icon.
+// The rest lift on their own: the pointer leaves, focus leaves, the tab shows,
+// the row scrolls back into view, the reader stops touching it.
+export const PAUSE_REASONS = ["stopped", "hover", "focus", "hidden", "offscreen", "interaction"]
+
+// The reasons with one set or lifted. A new Set: the old one is left alone.
+export function withReason(reasons, reason, on) {
+  const next = new Set(reasons)
+  if (on) next.add(reason)
+  else next.delete(reason)
+  return next
+}
+
+// The reasons a row starts with: stopped under reduced motion, hidden in a
+// hidden tab.
+export function initialReasons({ reducedMotion = false, hidden = false } = {}) {
+  const reasons = new Set()
+  if (reducedMotion) reasons.add("stopped")
+  if (hidden) reasons.add("hidden")
+  return reasons
+}
+
+// Whether autoplay runs: it is on and nothing holds it.
+export function autoplayRunning(seconds, reasons) {
+  return seconds !== null && seconds > 0 && reasons.size === 0
+}
+
+// How long after the reader's last swipe, scroll or press autoplay waits to
+// resume: one interval, and never under five seconds.
+export function idleDelay(seconds) {
+  return Math.max(5000, (seconds || 0) * 1000)
+}
+
+// The pause button's name, from whether the reader has stopped the row.
+export function toggleLabel(stopped) {
+  return stopped ? "Play slideshow" : "Pause slideshow"
+}
+
 // Keys inside these belong to the element, not the row: a form field, and a widget
 // that moves its own selection with the arrow keys.
 export const KEY_OWNERS = [