studio-engine 0.122.0 → 0.124.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cd0f77b33c7833a6cb5061bc17b11baad3db5ad3b2e6ad232b31cc363d124e49
-  data.tar.gz: 942b24a25b2dbdb8d7e1af5a918c323718fcb2438eced8b46dd1593f1563d9a0
+  metadata.gz: b7f68b7fc8c9d951dfa0f8069db58d4d819a9e5c785a35c5319c00d1a7450fab
+  data.tar.gz: 3674ddc7b3c29a7f58e06ee8c928bf63223a52388a191f819a90919986355e79
 SHA512:
-  metadata.gz: 2d81f612a81ddb2d5e9ccdf6c85d4e4cea1bd47043ba5e0c9732202f55e39489b44059646e8f42848530525c2c4c8f23ecd299afeb322b43adb3dd3bb513ff1a
-  data.tar.gz: 3f6a3214f4a5a80cfc2c73453dd0429161f28879ba3bd41857160ab02c2f70bb633213d317c19d9026e786afb7d99c37ddc5e6e1da2793d8edf495fa976f216d
+  metadata.gz: 1b8755f0f24f02d33aaf1f91bac610325e988a5cf9633ec74b31227b14f9f8582293ff0bd225b38efdc62e468b433dabb66fa14590e785355073f70d339add32
+  data.tar.gz: '083f8e499dedaa8efb934df433a3cd99c196828d7625e77e0cd4cd3f5003d5ab57a26990eee8c031a803d4b80fb7777ce05133cb4fda5bd616a38b448a288dc6'

data/CHANGELOG.md

@@ -4,6 +4,148 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.124.0 — 2026-11-04
+
+### Added
+
+- **App-to-app page transitions: `Studio.page_transition_direction`** (`:left`, `:right`,
+  `:top`, `:bottom`, default nil). Each app moves its pages one way, and each page change
+  draws that direction's fade or unfold at random, at the Codrops demo's values. It is the
+  one switch: a set direction turns smooth-load on, metas and navbar pin included. The
+  navbar and banner stack hold still; eager images load before the swap, capped at 500ms;
+  a same-page visit, reduced motion and a browser without view transitions play nothing.
+  With nil, the HTML is unchanged except one more import map entry that nothing fetches.
+  New: `studio/page_transitions`, loaded by its own tag only with the setting on, and the
+  `data-vt-morph` marker for a named element (the `agent_chat` portrait and composer carry
+  it; a host marks its own when it sets a direction). No host changes here. The doc holds
+  a proposed assignment. [`docs/PAGE_TRANSITIONS.md`](docs/PAGE_TRANSITIONS.md).
+- **The marketing kit: every app has a public `/marketing-kit`, and its footer links
+  it, with no setup.** `Studio.routes` draws the page (`Studio.draw_marketing_kit_routes`,
+  default true; helper `studio_marketing_kit_path`) with no sign-in, and a host's own
+  route of that path wins from either side of `Studio.routes`. `Studio.marketing_kit`
+  (a Hash or a callable taking the view) declares `logos`, `palette`, `typefaces` and
+  `tagline`; unset, the logos derive from `Studio.navbar_wordmark`, the footer's lockup
+  and `Studio.theme_logos`, and the colours from what the app paints. Logos read "Download Light" and "Download Dark", the PNG when
+  there is one, else the SVG; a missing file shows no link and no broken image. One
+  click on a colour copies its hex and confirms (new: the lazy `copy-text` controller).
+  An app with no database can draw the page alone with `Studio.marketing_kit_routes(self)`.
+- **The footer's Marketing Kit link**, in the brand block (`.ftr-kit`), on every app
+  with the page, signed in or out. An app that links the page in a column or on the
+  legal line gets no second link, and `marketing_kit: false` in the facts shows none.
+  Its columns and legal line are unchanged. [`docs/SITE_FOOTER.md`](docs/SITE_FOOTER.md),
+  *The marketing kit*.
+- **`studio/_page_header`, and the triple stack as a standard.** A page title,
+  optional meta beside it and optional tabs on the right. At rest it has no
+  background and no border; once stuck under the navbar it takes the bar. It joins
+  the pinned stack (`data-pin="page"`), so a sticky table header sits under it:
+  navbar, page row, table header, with no overlap. `/admin/style`, `/admin/models`
+  and `/admin/surveys` use it.
+  [`docs/PAGE_HEADER.md`](docs/PAGE_HEADER.md) carries the rule and the locals. New:
+  `studio/page_header` and the lazy `page-header` controller.
+
+### Changed
+
+- **A signed-out visitor's link sidebar has no "Links" title.** Signed-in and admin titles
+  are unchanged, and the panel keeps its accessible name.
+
+### Fixed
+
+- **A tap no longer leaves the navbar's account group lit.** On a touch screen a tap
+  leaves `:hover` on what was tapped, so the gear, the name and the avatar (THE ACCOUNT
+  GROUP in `engine.css`) stayed lit after the sidebar closed. Every `:hover` of the
+  group now sits inside `@media (hover: hover)`; `:focus-visible` stays outside it, so
+  a keyboard still lights the group. A mouse sees no change.
+- **The theme toggle draws left of the gear at every width, signed in or out.** The
+  signed-in desktop rail already did. The signed-out rail (`layouts/_navbar` and the
+  signed-out branch of `components/_user_nav`) and the phone row drew the gear first.
+  The navbar baseline (`test/fixtures/files/navbar_unset_baseline`) is regenerated for
+  this order: 14 of its 19 files move, and only the order of their lines changes. A
+  host that draws its own pair keeps its own order: the hub's
+  `layouts/_navbar_phone_account` still draws gear, then toggle.
+- **A table's sticky header no longer sits on top of the page row on `/admin/models`.**
+- **The open tab on `/admin/models` is scrolled into view at phone width.**
+- **`studio/pinned_stack` places a header with no `data-pin` at its place in the
+  document.** It was appended, so it read as below every other layer, and a layer
+  under it composed a top of 0.
+
+## 0.123.0 — 2026-11-03
+
+### Added
+
+- **Hold to talk in the shared agent chat.** `render "studio/agent_chat/chat", ..., voice: true`
+  puts the microphone chip and a hold-to-talk button in the composer's mic slot,
+  with the approved privacy line under it (`Studio::AgentChat::VOICE_PRIVACY`;
+  `voice_copy: { privacy:, recorder:, chip: }` overrides). Off by default, and
+  shown only where `Studio.voice_transcription` is on. Moved from the hub's
+  `chat/_voice` and `voice_chat.js` (new: `studio/agent_chat_voice`, the lazy
+  `agent-chat-voice` controller). Two fixes on the way: a new hold clears the last
+  take's line, and a take recorded during transcription waits its turn. A failed
+  send now adds the words after a typed draft instead of losing them.
+  [`docs/AGENT_CHAT.md`](docs/AGENT_CHAT.md) carries the adoption checklist.
+- **`Studio.voice_chat_allowed`**, a callable taking the signed-in user (default:
+  anyone signed in). It decides who sees the mic, who may post to
+  `POST /voice/takes` (a JSON `403 {error, reason: "not_allowed"}` otherwise), and
+  whether the proxy forwards a message's `voice`. A signed-out visitor is never
+  allowed, whatever the hook says.
+- **`studio:voice-recorder:hint`**, on the recorder: `{ kind, text }` for a line
+  while it records. A blank `copy.recording[kind]` now blanks that line.
+- **`Studio.agent_chat_allowed`**, the chat's server-side gate: a callable taking
+  the user, nil when signed out (default: everyone, so a public chat is unchanged).
+  `Studio::AgentChatsController` answers a refused viewer a JSON `403 {error, reason:
+  "not_allowed"}` on both calls before any hub call, and the chat partial renders
+  nothing for them. The footer's Chat link follows it unless
+  `site_footer_chat_allowed` is set, and a user it refuses may not talk by voice.
+- **The proxy carries `voice`.** `POST /agent_chat/messages` and
+  `Studio::AgentChat.post_message(voice:)` forward `{check, score, duration_ms}`
+  to the hub, and never a name: the hub names the speaker. A malformed `voice` is
+  a `422`. When the hub answers what it kept, the proxy answers `{turn, voice}`.
+- **A public refresh hook on the chat.** Dispatch `studio:agent-chat:refresh` on
+  the chat's section, optionally with `{detail: {turn}}`: the turn shows at once
+  and the chat polls now; a poll in flight is followed by one more.
+- **The footer's standard Chat link.** `Studio.site_footer_chat_path` (a path or a
+  callable taking the view), `site_footer_chat_label` (default "Chat") and
+  `site_footer_chat_allowed` (a callable taking the viewer, nil when signed out;
+  default `Studio.agent_chat_allowed`) add a plain link at the end of the Contact
+  column, or a Contact column if the facts have none. No path, no link.
+  [`docs/SITE_FOOTER.md`](docs/SITE_FOOTER.md), *The Chat link*.
+- **`Studio::UserSession` and `studio_user_sessions`.** One row per signed-in browser
+  session: user, admin, started, last seen. A new row after 30 idle minutes; at most one
+  write per 5 minutes, and no query between writes. No IP and no user agent. An app with
+  the migration records automatically.
+- **A standard Sessions tab on the admin models page** when the table exists.
+
+### Changed
+
+- **The admin models page is one table per tab.** The title and tabs share one sticky
+  row and the open tab is highlighted. `/admin/models` shows the first tab; a page's `h1`
+  is now always "Models". `studio/admin_models/index` and `PREVIEW_LIMIT` are gone.
+- **`/admin/style` has one sticky header row.** The title and the section tabs
+  share it, and the tab highlight follows the section in view
+  (`studio/style_section_nav`). The intro paragraph is gone; the version sits at
+  the row's right.
+- **`GET /admin/theme` redirects to `/admin/style#theme`.** The route and the
+  `admin_theme_path` helper stay, and so do the save endpoints. A form save now
+  lands on the style guide. The standalone page's logos, semantic tokens and type
+  moved to the Theme section; its button and component specimens were already in
+  Tricks.
+
+### Removed
+
+- **`/admin/design_system` and `admin_design_system_path`.** The route only
+  redirected to `/admin/style`. No app links it.
+- **`theme_settings/edit` and the `themeEditor` factory** (`window.themeEditor`).
+  `dsThemeEditor` is the one editor.
+
+### Fixed
+
+- **The microphone help's Close never submits a surrounding form.** It is a plain
+  button now, not `<form method="dialog">`, which the parser drops inside a form.
+- **A hold-to-talk recorder stops when a held key loses focus**, instead of recording
+  to the cap and sending a take on its own, and a right-click or control-click no
+  longer starts a take.
+- **The emoji swap no longer clips a large glyph.** Its box is `max(1.25rem, 1.25em)` tall and
+  `max(1.5rem, 1.25em)` wide, so a 24px emoji fits.
+
 ## 0.122.0 — 2026-11-01
 
 ### Added

data/README.md

@@ -41,9 +41,10 @@ resolved.
 - **Geo**: `Studio::GeoDetection` places every visitor (IP → country + subdivision, session-cached), `Studio::GeoSetting` stores the operator's blocked countries and regions, `require_geo_allowed` locks whichever surfaces an app chooses, and the shared badge + `/admin/geo` manager ship with it. See [`docs/GEO.md`](docs/GEO.md).
 - **Site identity and link previews**: `Studio::SiteIdentity` holds the app's title, description and image, edited at `/admin/link_preview` beside a live unfurl card and read anywhere through `Studio.site_identity`. Every page unfurls with it unless it calls `link_preview image:, title:, description:`, and `Studio::LinkPreviewBots` serves preview fetchers a slim page under iMessage's 1 MiB limit. Adopt with `bin/rails g studio:site_identity`. See [`docs/LINK_PREVIEW.md`](docs/LINK_PREVIEW.md).
 - **Branded loader**: `studio_loader`, `studio_loader_pending` and `studio_loader_overlay` draw the app's own icon in its theme colours for page loads, long waits and pending buttons, in the style `config.loader` names (Breathe by default). See [`docs/LOADER.md`](docs/LOADER.md).
+- **App-to-app page transitions**: `config.page_transition_direction` (`:left`, `:right`, `:top`, `:bottom`) moves an app's pages one way on every page change, with the navbar and banners held still. It turns smooth-load on. See [`docs/PAGE_TRANSITIONS.md`](docs/PAGE_TRANSITIONS.md).
 - **Public user page**: `/u/:username` shows a user's avatar and username (nothing else), and unfurls with their avatar, falling back to the site image. Link any username to it with `link_to_user_profile(user)` or `studio_user_profile_path(user)`. Opt in with `config.draw_public_user_routes = true`. See [`docs/PUBLIC_USER_PAGE.md`](docs/PUBLIC_USER_PAGE.md).
 - **Transactional emails**: `Studio::EmailCatalog` — every email an app sends, its type, a live preview, and its banner — plus the shared `/admin/emails` page. Every app inherits the standard emails and their artwork on day one, and can register its own workflows and upload its own banners. See [Transactional emails](#transactional-emails).
-- **Site footer**: `<%= studio_site_footer %>` in the layout renders the public site's footer. It is on by default: with nothing configured it prints the app's name, logo and the legal links the app has routes for, and no address. `config.site_footer` declares the app's own facts (brand, social profiles, link columns, an address with a live map, legal links), every part optional; `config.site_footer_address` adds a location in one setting; `config.site_footer = false` turns the footer off. Leaflet is vendored and served by the engine. See [`docs/SITE_FOOTER.md`](docs/SITE_FOOTER.md).
+- **Site footer**: `<%= studio_site_footer %>` in the layout renders the public site's footer. It is on by default: with nothing configured it prints the app's name, logo and the legal links the app has routes for, and no address. `config.site_footer` declares the app's own facts (brand, social profiles, link columns, an address with a live map, legal links), every part optional; `config.site_footer_address` adds a location in one setting; `config.site_footer = false` turns the footer off; `config.site_footer_chat_path` adds a standard Chat link to the Contact column. Leaflet is vendored and served by the engine. See [`docs/SITE_FOOTER.md`](docs/SITE_FOOTER.md).
 - **Booking**: a simple scheduler on Google Calendar appointment schedules, with or without the footer. With `config.booking_url`, `studio_booking_frame` embeds Google's booking page, `studio_booking_link` opens it in a popup, and `config.draw_booking_routes = true` draws `/schedule` (or name the app's own page with `config.booking_path`). `config.booking_crop` crops the frame to the slot picker at rest, from numbers `bin/booking-crop-measure` reads off the app's own schedule. See [`docs/BOOKING.md`](docs/BOOKING.md).
 - **Voice profile**: an opt-in row on `/profile` ("Set up your voice"): the person reads three phrases with a live level meter, their device turns each take into a speaker embedding (WeSpeaker via transformers.js), and only the averaged vector is saved on their user, never audio. `Studio::VoiceMatch.identify(embedding, among: User.all, model:)` answers who is speaking. Turn it on with `config.voice_profile = true` after installing the migration. See [`docs/VOICE_PROFILE.md`](docs/VOICE_PROFILE.md).
 - **Voice capture**: the microphone chip (names the microphone a page records from, picks another, Chrome help dialog), one level meter, and a record button that refuses a silent take and hands a heard one to the page as a `studio:voice-recorder:take` event with the blob; it uploads nothing. Render `studio/voice/microphone_chip` and `studio/voice/recorder`. See [`docs/VOICE_CAPTURE.md`](docs/VOICE_CAPTURE.md).
@@ -169,6 +170,7 @@ Studio.configure do |config|
   # multi-second pages BEFORE opting in — no-preview holds the old page until
   # the fresh response arrives.
   config.smooth_load = true
+  # config.page_transition_direction = :left  # the app's page move; also turns smooth-load on
   # Nav spinner minimum display (default 2500). Smooth-load apps typically
   # drop to ~300; keep the high floor if multi-second ops ride the spinner.
   config.nav_spinner_min_ms = 300
@@ -249,7 +251,7 @@ Set `Studio.draw_survey_routes = true` to add the public survey pages (`/surveys
 
 **Magic links need the `studio_links` table.** Install it with `bin/rails studio_engine:install:migrations && bin/rails db:migrate` (install all of them) before enabling `:magic_link` — never by hand-copying the migration, which collides with the task's own copy on `class CreateStudioLinks`. Without the table, the first sign-in raises `Studio::Link::MissingTable`.
 
-Set `Studio.agent_chat_souls = %w[alex]` to add the shared agent chat's proxy (`POST /agent_chat/messages`, `GET /agent_chat/turns`), which forwards to the McRitchie Studio hub with the app's `AGENT_CHAT_TOKEN`; then `render "studio/agent_chat/chat", soul: "alex", name: "Alex", portrait: ...` on any page ([`docs/AGENT_CHAT.md`](docs/AGENT_CHAT.md)).
+Set `Studio.agent_chat_souls = %w[alex]` to add the shared agent chat's proxy (`POST /agent_chat/messages`, `GET /agent_chat/turns`), which forwards to the McRitchie Studio hub with the app's `AGENT_CHAT_TOKEN`; then `render "studio/agent_chat/chat", soul: "alex", name: "Alex", portrait: ...` on any page, with `voice: true` for hold to talk in the composer ([`docs/AGENT_CHAT.md`](docs/AGENT_CHAT.md)).
 
 In non-production local requests, this also draws `/_studio/local_emails`, a local email inbox for agent/worktree proof flows. Set `LOCAL_EMAIL_CAPTURE=1` or run with `AGENT_WORKTREE=1` to record outbox rows without sending real email.
 
@@ -285,6 +287,17 @@ actions; the engine supplies only the banner.
 
 ## UI Primitives
 
+### The page header — `studio/_page_header`
+
+An admin page's title: 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: "Models", meta: "v1.2.3", label: "Models",
+      tabs: [{ label: "Users", href: users_path, current: "page" }, { label: "Teams", href: teams_path }] %>
+```
+
 ### The "at" time stamp — `at_time_tag`
 
 Stamps WHEN something happened, on the reader's own clock: `at 3:53p`, gaining a
@@ -1159,7 +1172,9 @@ pointing at or focusing any of the gear, the name or the avatar lights all three
 (the primary colour, a turn of the gear, a primary glow on the avatar). The
 same holds for a host sidebar: a host that sets both `navbar_menu_trigger` and
 `navbar_account_sidebar` gets its gear and account lit as one menu. An account
-link is never grouped (`engine.css`, *THE ACCOUNT GROUP*).
+link is never grouped (`engine.css`, *THE ACCOUNT GROUP*). Pointing needs a
+pointer: the hover half sits inside `@media (hover: hover)`, so a tap on a touch
+screen lights nothing, and a keyboard still does.
 
 ## Transactional emails
 

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

@@ -223,6 +223,93 @@ body.modal-open .studio-app-banner {
   line-height: 1.4;
 }
 
+/* -- The page header (studio/_page_header, docs/PAGE_HEADER.md) ---------
+   A normal page header at rest and a bar once stuck. The border is there in
+   both states, in transparent at rest, so the row's height never changes and
+   the pinned stack has nothing to republish. The layout is owned here: the
+   engine's views depend on no responsive utility a host may not have emitted.
+   The fade is owned too, because .fade-edge-x is in the opt-in motion layer, and
+   it marks only an end that hides a tab (studio/controllers/page_header). */
+
+@utility page-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-block: 0.5rem;
+  border-block: 1px solid transparent;
+  background-color: transparent;
+  transition: background-color 150ms ease, border-color 150ms ease;
+
+  &[data-stuck],
+  [data-studio-controller-failed~="page-header"] + & {
+    @apply bg-surface border-subtle;
+  }
+}
+
+@utility page-header-sentinel {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+@utility page-header-lead {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  min-width: 0;
+}
+
+@utility page-header-title {
+  @apply text-heading;
+  font-size: calc(var(--type-base, 16px) * 1.5);
+  font-weight: var(--type-display-weight, 800);
+  line-height: 1.25;
+}
+
+@utility page-header-meta {
+  white-space: nowrap;
+
+  @media (width < 40rem) {
+    display: none;
+  }
+}
+
+@utility page-header-tabs {
+  --page-header-fade-start: 0px;
+  --page-header-fade-end: 0px;
+  flex: 1 1 0%;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--page-header-fade-start), #000 calc(100% - var(--page-header-fade-end)), transparent 100%);
+          mask-image: linear-gradient(to right, transparent 0, #000 var(--page-header-fade-start), #000 calc(100% - var(--page-header-fade-end)), transparent 100%);
+
+  &[data-fade-start] {
+    --page-header-fade-start: 2rem;
+  }
+
+  &[data-fade-end] {
+    --page-header-fade-end: 2rem;
+  }
+}
+
+/* width: max-content, then an auto margin: the tabs float right while they fit,
+   and start at the left, all reachable, once they do not. justify-content would
+   push the overflow past the start, where no scroll can reach it. */
+@utility page-header-track {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: max-content;
+  margin-left: auto;
+}
+
+@utility page-header-actions {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
 /* -- 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:
@@ -565,6 +652,87 @@ body.modal-open .studio-app-banner {
   animation: none;
 }
 
+/* -- App-to-app page transitions --------------------------------------------
+   Studio.page_transition_direction (studio/page_transitions, docs/PAGE_TRANSITIONS.md).
+   Every rule is gated on an attribute only that script sets, so an app without
+   the setting keeps the fade above. Attribute selectors outrank the bare
+   ::view-transition-*(root) rules, here and in a host. The effects are from the
+   Codrops Page Transitions demo, at its values; the keyframes were written fresh.
+
+   Black behind the pages gives the shading: a page at opacity 0.3 darkens as it
+   moves. */
+html[data-page-transition]:not([data-page-transition="still"])::view-transition {
+  background: #000;
+}
+
+html[data-page-transition]::view-transition-old(root),
+html[data-page-transition]::view-transition-new(root) {
+  mix-blend-mode: normal;
+  animation-duration: 700ms;
+  animation-timing-function: ease;
+  animation-fill-mode: both;
+  backface-visibility: hidden;
+}
+
+/* A same-page visit (a refresh, a poll) draws nothing. */
+html[data-page-transition="still"]::view-transition-old(root),
+html[data-page-transition="still"]::view-transition-new(root) {
+  animation: none;
+}
+
+/* The banner stack holds still with the navbar. The name goes on the one element
+   the script marks, since a duplicate name silently cancels the transition. It
+   lasts for the visit alone: a name at rest makes the stack a stacking context,
+   and its tooltip then paints under the navbar. No group animation either: a page
+   left scrolled has the stack above the viewport, and it would slide down. */
+html[data-page-transition-direction][data-page-transition-visit] [data-vt-held] {
+  view-transition-name: studio-bar-stack;
+}
+
+::view-transition-group(studio-bar-stack),
+::view-transition-old(studio-bar-stack),
+::view-transition-new(studio-bar-stack) {
+  animation: none;
+}
+
+/* A named element moves with the page, unless both pages share its name. The
+   script decides that before the old page's picture, and only then is the name let
+   through, so the morph stands. data-vt-morph carries the name it marks. */
+html[data-page-transition-direction]:not([data-page-transition-morph]) [data-vt-morph] {
+  view-transition-name: none !important;
+}
+
+html[data-page-transition="fade-left"]::view-transition-old(root) { animation-name: pt-out-left; }
+html[data-page-transition="fade-left"]::view-transition-new(root) { animation-name: pt-in-from-right; }
+html[data-page-transition="fade-right"]::view-transition-old(root) { animation-name: pt-out-right; }
+html[data-page-transition="fade-right"]::view-transition-new(root) { animation-name: pt-in-from-left; }
+html[data-page-transition="fade-top"]::view-transition-old(root) { animation-name: pt-out-top; }
+html[data-page-transition="fade-top"]::view-transition-new(root) { animation-name: pt-in-from-bottom; }
+html[data-page-transition="fade-bottom"]::view-transition-old(root) { animation-name: pt-out-bottom; }
+html[data-page-transition="fade-bottom"]::view-transition-new(root) { animation-name: pt-in-from-top; }
+
+html[data-page-transition="unfold-right"]::view-transition-old(root) { animation-name: pt-out-left; }
+html[data-page-transition="unfold-right"]::view-transition-new(root) { animation-name: pt-unfold-right; transform-origin: 0% 50%; }
+html[data-page-transition="unfold-left"]::view-transition-old(root) { animation-name: pt-out-right; }
+html[data-page-transition="unfold-left"]::view-transition-new(root) { animation-name: pt-unfold-left; transform-origin: 100% 50%; }
+html[data-page-transition="unfold-bottom"]::view-transition-old(root) { animation-name: pt-out-top; }
+html[data-page-transition="unfold-bottom"]::view-transition-new(root) { animation-name: pt-unfold-bottom; transform-origin: 50% 0%; }
+html[data-page-transition="unfold-top"]::view-transition-old(root) { animation-name: pt-out-bottom; }
+html[data-page-transition="unfold-top"]::view-transition-new(root) { animation-name: pt-unfold-top; transform-origin: 50% 100%; }
+
+@keyframes pt-out-left { to { opacity: 0.3; transform: translateX(-100%); } }
+@keyframes pt-out-right { to { opacity: 0.3; transform: translateX(100%); } }
+@keyframes pt-out-top { to { opacity: 0.3; transform: translateY(-100%); } }
+@keyframes pt-out-bottom { to { opacity: 0.3; transform: translateY(100%); } }
+@keyframes pt-in-from-right { from { opacity: 0.3; transform: translateX(100%); } }
+@keyframes pt-in-from-left { from { opacity: 0.3; transform: translateX(-100%); } }
+@keyframes pt-in-from-bottom { from { opacity: 0.3; transform: translateY(100%); } }
+@keyframes pt-in-from-top { from { opacity: 0.3; transform: translateY(-100%); } }
+@keyframes pt-unfold-right { from { opacity: 0; transform: perspective(1200px) translateX(100%) rotateY(90deg); } }
+@keyframes pt-unfold-left { from { opacity: 0; transform: perspective(1200px) translateX(-100%) rotateY(-90deg); } }
+@keyframes pt-unfold-bottom { from { opacity: 0; transform: perspective(1200px) translateY(100%) rotateX(-90deg); } }
+@keyframes pt-unfold-top { from { opacity: 0; transform: perspective(1200px) translateY(-100%) rotateX(90deg); } }
+
 /* Turbo's progress bar is the slow-load feedback under no-preview (the old
    page holds until the fresh response). Theme it so every app's bar matches
    its brand instead of Turbo's default. The fallback (#0076ff, Turbo's own
@@ -784,36 +952,67 @@ body.modal-open .studio-app-banner {
            saying they are its one menu, as Turf Monster's gear sidebar is.
        With Studio.navbar_name_in_rows the name is its own control in row 1
        ([data-nav-name-trigger]), and pointing at it lights the group too.
-       An account link is never grouped. */
+       An account link is never grouped.
+
+       POINTING NEEDS A POINTER. Every :hover below sits inside
+       @media (hover: hover), and each :focus-visible rule stays outside it. On
+       a touch screen a tap leaves :hover on what was tapped until the next tap
+       lands elsewhere, so the group stayed lit after its sidebar closed. Tailwind's
+       hover: and group-hover: variants already carry this guard; these
+       hand-written selectors do not get it for free. */
     :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]) [data-link-sidebar-trigger] svg,
     :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]) [data-nav-account] > [aria-hidden] > * {
       transition: transform 200ms ease, box-shadow 200ms ease;
     }
-    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]) [data-link-sidebar-trigger]:hover { background-color: transparent; }
-    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-link-sidebar-trigger],
-    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-name] { color: var(--color-primary); }
-    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-account] > [aria-hidden] > * {
+    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-link-sidebar-trigger],
+    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-name] { color: var(--color-primary); }
+    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-account] > [aria-hidden] > * {
       box-shadow:
         0 0 0 2px rgb(var(--color-primary-rgb) / 0.85),
         0 0 14px 2px rgb(var(--color-primary-rgb) / 0.45);
     }
     @media (prefers-reduced-motion: no-preference) {
-      :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-link-sidebar-trigger] svg { transform: rotate(45deg); }
+      :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-link-sidebar-trigger] svg { transform: rotate(45deg); }
+    }
+    @media (hover: hover) {
+      :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]) [data-link-sidebar-trigger]:hover { background-color: transparent; }
+      :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover) [data-link-sidebar-trigger],
+      :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover) [data-nav-name] { color: var(--color-primary); }
+      :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover) [data-nav-account] > [aria-hidden] > * {
+        box-shadow:
+          0 0 0 2px rgb(var(--color-primary-rgb) / 0.85),
+          0 0 14px 2px rgb(var(--color-primary-rgb) / 0.45);
+      }
+      @media (prefers-reduced-motion: no-preference) {
+        :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover) [data-link-sidebar-trigger] svg { transform: rotate(45deg); }
+      }
     }
     :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])) [data-nav-menu-trigger] [aria-controls] svg,
     :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])) [data-nav-account] > [aria-hidden] > * {
       transition: transform 200ms ease, box-shadow 200ms ease;
     }
-    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])) [data-nav-menu-trigger] [aria-controls]:hover { background-color: transparent; }
-    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-menu-trigger] [aria-controls],
-    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-name] { color: var(--color-primary); }
-    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-account] > [aria-hidden] > * {
+    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-menu-trigger] [aria-controls],
+    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-name] { color: var(--color-primary); }
+    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-account] > [aria-hidden] > * {
       box-shadow:
         0 0 0 2px rgb(var(--color-primary-rgb) / 0.85),
         0 0 14px 2px rgb(var(--color-primary-rgb) / 0.45);
     }
     @media (prefers-reduced-motion: no-preference) {
-      :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-menu-trigger] [aria-controls] svg { transform: rotate(45deg); }
+      :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-menu-trigger] [aria-controls] svg { transform: rotate(45deg); }
+    }
+    @media (hover: hover) {
+      :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])) [data-nav-menu-trigger] [aria-controls]:hover { background-color: transparent; }
+      :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover) [data-nav-menu-trigger] [aria-controls],
+      :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover) [data-nav-name] { color: var(--color-primary); }
+      :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover) [data-nav-account] > [aria-hidden] > * {
+        box-shadow:
+          0 0 0 2px rgb(var(--color-primary-rgb) / 0.85),
+          0 0 14px 2px rgb(var(--color-primary-rgb) / 0.45);
+      }
+      @media (prefers-reduced-motion: no-preference) {
+        :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover) [data-nav-menu-trigger] [aria-controls] svg { transform: rotate(45deg); }
+      }
     }
     /* THE ACCOUNT ROW (components/_user_nav), from 768px. Every app whose
        navbar renders the engine's user nav gets this, Turf Monster included:

data/app/controllers/concerns/studio/admin_models.rb

@@ -2,7 +2,6 @@ module Studio
   module AdminModels
     extend ActiveSupport::Concern
 
-    PREVIEW_LIMIT = 10
     PER_PAGE = 25
     TEAM_SORTS = {
       "team" => "LOWER(teams.name)",
@@ -10,27 +9,22 @@ module Studio
       "league" => "LOWER(COALESCE(teams.league, ''))"
     }.freeze
     SHARED_TABLE_KEYS = %w[teams arenas].freeze
+    SESSIONS_CONFIG = { label: "Sessions", description: "Signed-in sessions, most recent first" }.freeze
 
     included do
       before_action :set_model_config, only: :show
       helper Studio::AdminModelsTableHelper
-      helper_method :team_sort_url, :team_sort_indicator, :team_sport_emoji,
+      helper_method :admin_model_configs, :team_sort_url, :team_sort_indicator, :team_sport_emoji,
                     :team_record_json, :admin_models_table_partial
     end
 
+    # The first tab. Each model has its own tab and page (#show); this page is that
+    # first one, so /admin/models always shows a table.
     def index
-      @sections = admin_model_configs.map do |key, config|
-        scope = admin_model_scope_for(key)
-        {
-          key: key,
-          label: config.fetch(:label),
-          description: config.fetch(:description),
-          count: scope.count,
-          records: scope.limit(PREVIEW_LIMIT)
-        }
-      end
-
-      render "studio/admin_models/index"
+      @key = admin_model_configs.keys.first.to_s
+      @config = admin_model_configs.fetch(@key)
+      @scope = admin_model_scope(@key)
+      show
     end
 
     def show
@@ -47,11 +41,23 @@ module Studio
     def set_model_config
       @key = params[:key].to_s
       @config = admin_model_configs.fetch(@key) { raise ActiveRecord::RecordNotFound }
-      @scope = admin_model_scope_for(@key)
+      @scope = admin_model_scope(@key)
     end
 
+    # The host's models, with the engine's standard ones after its Users tab. A host
+    # adds a model by adding it to MODELS and answering it in #admin_model_scope_for.
     def admin_model_configs
-      self.class::MODELS
+      configs = self.class::MODELS.to_a
+      return configs.to_h unless Studio::UserSession.available?
+
+      at = (configs.index { |key, _| key.to_s == "users" } || -1) + 1
+      configs.insert(at, ["sessions", SESSIONS_CONFIG]).to_h
+    end
+
+    def admin_model_scope(key)
+      return Studio::UserSession.includes(:user).recent if key.to_s == "sessions"
+
+      admin_model_scope_for(key)
     end
 
     def admin_model_scope_for(_key)
@@ -107,6 +113,8 @@ module Studio
     end
 
     def admin_models_table_partial(key)
+      return "studio/admin_models/sessions_table" if key.to_s == "sessions"
+
       shared_table_keys = if self.class.const_defined?(:SHARED_TABLE_KEYS, false)
         self.class::SHARED_TABLE_KEYS
       else

data/app/controllers/concerns/studio/error_handling.rb

@@ -21,6 +21,7 @@ module Studio
       rescue_from "Sluggable::SlugRefused", with: :handle_slug_refused
 
       before_action :require_authentication
+      after_action :track_user_session
 
       helper_method :current_user, :logged_in?, :sso_user_available?, :sso_display_name, :sso_source_app, :sso_hub_logo, :admin?,
                     :onchain_session?, :wallet_context, :client_session_payload
@@ -28,6 +29,18 @@ module Studio
 
     private
 
+    # The signed-in person, not whoever an admin is impersonating. A signed-out
+    # request stops at the cookie: it runs no query it would not otherwise run. A
+    # request must not fail because its bookkeeping did.
+    def track_user_session
+      return unless session[Studio.session_key]
+
+      user = respond_to?(:true_user, true) ? true_user : current_user
+      Studio::UserSession.track(session, user) if user
+    rescue StandardError => e
+      Rails.logger&.warn("[user_session] #{e.class}: #{e.message}")
+    end
+
     def current_user
       return @current_user if defined?(@current_user)
       @current_user = User.find_by(id: session[Studio.session_key])