studio-engine 0.124.0 → 0.126.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b7f68b7fc8c9d951dfa0f8069db58d4d819a9e5c785a35c5319c00d1a7450fab
-  data.tar.gz: 3674ddc7b3c29a7f58e06ee8c928bf63223a52388a191f819a90919986355e79
+  metadata.gz: b282dc9ef2736f70ae7d985d1617ad22f61f25b6bba0a2b9391804e68c01069d
+  data.tar.gz: 3a0234c85465610eb31351583c0b0d743cf1a42f7db193d762869b040255143a
 SHA512:
-  metadata.gz: 1b8755f0f24f02d33aaf1f91bac610325e988a5cf9633ec74b31227b14f9f8582293ff0bd225b38efdc62e468b433dabb66fa14590e785355073f70d339add32
-  data.tar.gz: '083f8e499dedaa8efb934df433a3cd99c196828d7625e77e0cd4cd3f5003d5ab57a26990eee8c031a803d4b80fb7777ce05133cb4fda5bd616a38b448a288dc6'
+  metadata.gz: ddf281dc8349069d3c2e8aea1a5084dd5030f0b927675ce20fd3a139565ca862e3d52faaa2e6d27a1d76aed9a9e6b566fb1174da3e6a73ffe559466118c914d9
+  data.tar.gz: 2d2f261cedcef59c97ce8f4af60b2942b4cfce84d3355fdd7f8604e52193f08c98c73b14592eabcfaf1e284f4b049aea7e7bbac51c3c5c600f745724822255fa

data/CHANGELOG.md

@@ -4,6 +4,69 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.126.0 — 2026-11-04
+
+### Changed
+
+- **Link sidebar: no section labels, a calmer title, one line a row at rest.** No section shows
+  a label word or the ADMIN chip at any level; a subtle divider separates the groups, and each
+  group keeps its words as its accessible name. Every row is one line and one height at rest. A
+  link's `desc:` fades in on hover or keyboard focus with no layout change: 200ms after 150ms in,
+  140ms out, the label lifting 8px by a transform. A touch screen shows none, and reduced motion
+  slides nothing. The engine's Profile row no longer passes a `desc:`. The Geo rows behave the
+  same; the row that cannot link holds only the string to copy, reveals it on a tap as well, and
+  keeps the long form in its title. A plain emoji now sits in the swap's box
+  (`.studio-emoji-box`), so a mixed list is one height. The title is `type-subhead`: signed in, admin included, the name the navbar shows
+  (`Studio.navbar_user_name`); signed out, Good morning, Good afternoon or Good evening by the
+  browser's local time, written by `studio/link_sidebar`. The panel's accessible name stays
+  "Admin menu" or "Links menu". The navbar baseline is regenerated for it.
+
+### Fixed
+
+- **A panel link followed by Back no longer leaves the panel off-screen for good.** Turbo
+  clones the page one tick after `turbo:before-cache`, so a response inside a
+  `components/_sidebar_panel`'s 200ms leave filed the panel with Alpine's phase classes on it.
+  A hovered link has a prefetched response, so this reached production too: after Back the
+  gear set the flag, and the panel sat one width past the viewport, until a full load. The new
+  `studio/transition_snapshot` finishes every running x-transition before the clone, and
+  strips a whole phase's named classes from a restored page. Hosts pick it up with the gem: it
+  covers their own panels on the shared partial and their other `x-show` transitions. A host
+  that overrides `layouts/studio/_head` gets it from `studio/application`.
+
+- `/admin/schema`: a database with an expression index renders. Rails returns such an index's
+  columns as a String, and the page called `join` on it, which answered 500.
+
+## 0.125.0 — 2026-11-04
+
+### Added
+
+- **Page transitions across full page loads.** With `Studio.page_transition_direction` set,
+  a same-origin full load plays the app's direction through the browser's cross-document
+  view transition: the same pair of styles, keyframes and timing as a Turbo visit, with the
+  navbar and banners held still. This reaches strict-policy pages, which must stay their
+  own documents. New files, linked only with a direction: `studio/page_transition_full_load.css`
+  and the classic `studio/page_transition_reveal.js`, which carries the request's nonce. A
+  reload, a same-path load, reduced motion and a browser without support load plainly. A full
+  load has no morph, and it cannot wait for images, so the 500ms image cap does not apply.
+  With no direction, a host renders no new tag.
+  [`docs/PAGE_TRANSITIONS.md`](docs/PAGE_TRANSITIONS.md).
+
+### Fixed
+
+- **A Turbo visit answered by `turbo-visit-control: reload` no longer plays the engine's fade**
+  before the full load. Turbo opens its view transition before it reads the meta, so that
+  transition now draws nothing.
+- **The navbar no longer draws twice during a page transition** when the old header is taller
+  than the new one, as on Back to a scrolled page. This changes Turbo visits too: only the new
+  navbar draws.
+
+- Link sidebar: a one-line row centers its icon on its label. It sat 3px low. A row with a
+  description keeps its icon at the top. The navbar baseline is regenerated for it.
+- Page transitions: an advance visit to the same path keeps a shared `data-vt-morph` name, so
+  a launch panel still morphs into the chat at its own address. A refresh stays silent.
+- Page transitions: a GET that redirects moves the page once. It played the move twice, because
+  Turbo renders the response and then visits the final address with that same response.
+
 ## 0.124.0 — 2026-11-04
 
 ### Added

data/README.md

@@ -41,7 +41,7 @@ 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).
+- **App-to-app page transitions**: `config.page_transition_direction` (`:left`, `:right`, `:top`, `:bottom`) moves an app's pages one way on every page change, full page loads included, 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; `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).

data/app/assets/javascripts/studio/page_transition_reveal.js

@@ -0,0 +1,75 @@
+// studio/page_transition_reveal: the arriving half of a full-load page transition
+// (docs/PAGE_TRANSITIONS.md, "Full page loads"). Loaded only with
+// Studio.page_transition_direction set.
+//
+// CLASSIC AND SYNCHRONOUS ON PURPOSE. pagereveal fires before the first render, and a listener
+// bound after that misses it for good. A module is deferred, so it can be too late.
+//
+// It holds no table of styles. The leaving page drew the style with studio/page_transitions
+// at pageswap and left it here. No style means the leaving page did not plan this one (its
+// module had not run, or it was the same path), so the load is plain, not the browser's fade.
+(function () {
+  var STYLE_KEY = "studio-page-transition-style"
+  var HOLD_CAP_MS = 3000
+
+  // Holds the first render to the end of parsing, on an arrival only (nothing has this id). A
+  // render of half a body would give the new picture no navbar or stack to hold still. The
+  // browser sets no limit on this hold, so the timer does: a slow body paints at the cap. The
+  // cap sits inside the browser's own limit on the transition, so the motion still plays.
+  function holdForTheWholePage() {
+    try {
+      if (!window.sessionStorage.getItem(STYLE_KEY)) return
+    } catch (_error) {
+      return
+    }
+    var link = document.createElement("link")
+    link.rel = "expect"
+    link.href = "#studio-page-transition-end-of-parse"
+    link.setAttribute("blocking", "render")
+    document.head.appendChild(link)
+    window.setTimeout(function () { link.remove() }, HOLD_CAP_MS)
+  }
+
+  function takeStyle() {
+    try {
+      var style = window.sessionStorage.getItem(STYLE_KEY)
+      window.sessionStorage.removeItem(STYLE_KEY)
+      return style
+    } catch (_error) {
+      return null
+    }
+  }
+
+  holdForTheWholePage()
+
+  window.addEventListener("pagereveal", function (event) {
+    var root = document.documentElement
+    // A page back from the back/forward cache still wears what it had on when it left.
+    delete root.dataset.pageTransition
+    delete root.dataset.pageTransitionVisit
+
+    var style = takeStyle()
+    var transition = event.viewTransition
+    if (!transition) return
+    var direction = document.querySelector('meta[name="page-transition-direction"]')
+    if (!style || !direction) {
+      transition.skipTransition()
+      return
+    }
+
+    // engine.css reads these three. The new page's picture comes after this listener, so the
+    // held stack and every morph name are settled in time.
+    root.dataset.pageTransitionDirection = direction.content
+    root.dataset.pageTransition = style
+    root.dataset.pageTransitionVisit = ""
+    var stack = document.querySelector("[data-vt-held], .studio-bar-stack")
+    if (stack) stack.setAttribute("data-vt-held", "")
+
+    var done = function () {
+      if (root.dataset.pageTransition !== style) return
+      delete root.dataset.pageTransition
+      delete root.dataset.pageTransitionVisit
+    }
+    transition.finished.then(done, done)
+  })
+})()

data/app/assets/stylesheets/studio/page_transition_full_load.css

@@ -0,0 +1,10 @@
+/* Opts a document in to the browser's cross-document view transition. A separate file,
+   because this at-rule takes no selector: in the engine's bundle it would act on every
+   host. layouts/studio/_head links it only with Studio.page_transition_direction set.
+   Both documents must carry it. Reduced motion gets no transition at all.
+   docs/PAGE_TRANSITIONS.md, "Full page loads". */
+@media (prefers-reduced-motion: no-preference) {
+  @view-transition {
+    navigation: auto;
+  }
+}

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

@@ -674,7 +674,7 @@ html[data-page-transition]::view-transition-new(root) {
   backface-visibility: hidden;
 }
 
-/* A same-page visit (a refresh, a poll) draws nothing. */
+/* A same-page visit (a refresh, a poll, the second half of a redirect) draws nothing. */
 html[data-page-transition="still"]::view-transition-old(root),
 html[data-page-transition="still"]::view-transition-new(root) {
   animation: none;
@@ -695,6 +695,12 @@ html[data-page-transition-direction][data-page-transition-visit] [data-vt-held]
   animation: none;
 }
 
+/* A taller old navbar would show under the new one for the whole motion, then pop off.
+   Only the new navbar draws. Where the two match, the new one covers the same pixels. */
+html[data-page-transition]:not([data-page-transition="still"])::view-transition-old(studio-header) {
+  opacity: 0;
+}
+
 /* 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. */
@@ -1078,6 +1084,68 @@ html[data-page-transition="unfold-top"]::view-transition-new(root) { animation-n
         font-size: calc(var(--nav-avatar) / 3 / 0.7);
       }
     }
+
+    /* THE SIDEBAR ROW'S DESCRIPTION (components/_link_sidebar, _geo_signpost). At rest
+       a row with a description is one line, the height of any other row. On hover or
+       keyboard focus the description fades in under the label, and no layout changes:
+       it is absolute, inside the row's padding, and the label lifts by a transform.
+
+       THE LIFT is half the description's 16px line, which centres the two lines on the
+       row. It comes in over 200ms after 150ms, so a pointer crossing the list leaves no
+       partial lift on the rows it crosses, and it goes in 140ms.
+
+       THE ROW THAT CANNOT LINK (aria-disabled) reveals on :focus as well, because a tap
+       focuses it and matches no :focus-visible. Its string stays selectable.
+
+       POINTING NEEDS A POINTER: :hover sits inside @media (hover: hover), and the focus
+       rules stay outside it, as in THE ACCOUNT GROUP. Under reduced motion nothing
+       slides: the description fades in where it will sit and the label moves at once. */
+    [data-sidebar-row-desc] {
+      position: absolute;
+      inset-inline: 0;
+      top: 100%;
+      opacity: 0;
+      transform: translateY(-0.25rem);
+      pointer-events: none;
+      transition: opacity 140ms ease-in, transform 140ms ease-in;
+    }
+    [data-sidebar-row-described][aria-disabled="true"] [data-sidebar-row-desc] { pointer-events: auto; }
+    [data-sidebar-row-label] { transition: transform 140ms ease-in; }
+    [data-sidebar-row-described]:focus-visible [data-sidebar-row-label],
+    [data-sidebar-row-described][aria-disabled="true"]:focus [data-sidebar-row-label] {
+      transform: translateY(-0.5rem);
+      transition: transform 200ms ease-out 150ms;
+    }
+    [data-sidebar-row-described]:focus-visible [data-sidebar-row-desc],
+    [data-sidebar-row-described][aria-disabled="true"]:focus [data-sidebar-row-desc] {
+      opacity: 1;
+      transform: translateY(-0.5rem);
+      transition: opacity 200ms ease-out 150ms, transform 200ms ease-out 150ms;
+    }
+    @media (hover: hover) {
+      [data-sidebar-row-described]:hover [data-sidebar-row-label] {
+        transform: translateY(-0.5rem);
+        transition: transform 200ms ease-out 150ms;
+      }
+      [data-sidebar-row-described]:hover [data-sidebar-row-desc] {
+        opacity: 1;
+        transform: translateY(-0.5rem);
+        transition: opacity 200ms ease-out 150ms, transform 200ms ease-out 150ms;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      [data-sidebar-row-label],
+      [data-sidebar-row-described]:hover [data-sidebar-row-label],
+      [data-sidebar-row-described]:focus-visible [data-sidebar-row-label],
+      [data-sidebar-row-described][aria-disabled="true"]:focus [data-sidebar-row-label] { transition: none; }
+      [data-sidebar-row-desc],
+      [data-sidebar-row-described]:hover [data-sidebar-row-desc],
+      [data-sidebar-row-described]:focus-visible [data-sidebar-row-desc],
+      [data-sidebar-row-described][aria-disabled="true"]:focus [data-sidebar-row-desc] {
+        transform: translateY(-0.5rem);
+        transition: opacity 200ms ease-out 150ms;
+      }
+    }
 }
 
 /* THE SCROLL-DRIVEN COLLAPSE (opt-in: config.navbar_scroll_timeline, which puts

data/app/helpers/studio_sidebar_helper.rb

@@ -12,7 +12,7 @@ module StudioSidebarHelper
   end
 
   # The navbar's name and avatar open the sidebar wherever it renders. The
-  # sidebar heads with the engine's own "You > Profile" section
+  # sidebar heads with the engine's own Profile row
   # (Studio::SidebarSections prepends it whenever /profile is drawn), so the
   # account page stays one click away (components/_user_nav). A host may
   # define its own to say otherwise.
@@ -22,7 +22,7 @@ module StudioSidebarHelper
 
   # The admin dropdown and the sidebar trigger share the cog glyph — showing
   # both reads as a double gear. When the viewer's resolved sections carry an
-  # admin-flagged entry, the sidebar IS the admin menu (its title says so) and
+  # admin-flagged entry, the sidebar IS the admin menu (its accessible name says so) and
   # the engine components skip the dropdown. Declaring only public sections
   # keeps the dropdown, so admins never lose Theme/Navbar/Error Logs.
   def studio_sidebar_replaces_admin_menu?

data/app/javascript/studio/application.js

@@ -14,6 +14,7 @@ import NavCollapseController from "studio/controllers/nav_collapse_controller"
 import ModalHostController from "studio/controllers/modal_host_controller"
 import ToastController from "studio/controllers/toast_controller"
 import LinkSidebarController from "studio/controllers/link_sidebar_controller"
+import "studio/transition_snapshot"
 import IdentityMiniController from "studio/controllers/identity_mini_controller"
 import { startPinnedStack } from "studio/pinned_stack"
 import { installAlpineShims } from "studio/alpine_shims"

data/app/javascript/studio/controllers/link_sidebar_controller.js

@@ -6,13 +6,15 @@
 //
 // The open flag and the document handlers are studio/link_sidebar, which
 // registers $store.sidebars.linkTreeOpen on alpine:init and before a Turbo
-// render. connect() registers it too, for a sidebar that arrived any other way.
+// render. connect() registers it too, and writes the panel's greeting, for a
+// sidebar that arrived any other way.
 // Registered by studio/application.
 import { Controller } from "@hotwired/stimulus"
-import { ensureLinkSidebarStore } from "studio/link_sidebar"
+import { ensureLinkSidebarStore, paintGreetings } from "studio/link_sidebar"
 
 export default class extends Controller {
   connect() {
     ensureLinkSidebarStore(window.Alpine)
+    paintGreetings(document)
   }
 }

data/app/javascript/studio/link_sidebar.js

@@ -21,6 +21,12 @@
 // A host with its own `sidebars` store keeps it and gains the flag
 // (turf-monster's holds gearOpen).
 //
+// THE GREETING. A signed-out panel's title is a greeting by the browser's local
+// time. components/_link_sidebar renders a default; this writes the right word
+// over it on load, after a Turbo visit or snapshot restore (turbo:load), on a bfcache
+// restore, and as the trigger opens the panel. A panel left open across a boundary
+// keeps its word until it next opens.
+//
 // THE DOCUMENT HANDLERS run in the capture phase, so the trigger works for a
 // click that lands before Alpine has bound it. They are installed once, on
 // every page, and do nothing where no link sidebar is rendered.
@@ -37,6 +43,25 @@ export const LINK_SIDEBAR_PANELS = "#studio-link-sidebar, #studio-link-sidebar-m
 export const LINK_SIDEBAR_TRIGGERS = "[data-link-sidebar-trigger], [data-username-display], [data-profile-image-toggle]"
 const CONTROLS_PANEL = '[aria-controls~="studio-link-sidebar"]'
 const CLOSE_BUTTON = "[data-link-sidebar-close]"
+const GREETING = "[data-link-sidebar-greeting]"
+
+// The three words, by the hour of `now` in the browser's own time zone.
+export function greetingFor(now) {
+  const hour = now.getHours()
+  if (hour >= 5 && hour < 12) return "Good morning"
+  if (hour >= 12 && hour < 17) return "Good afternoon"
+  return "Good evening"
+}
+
+// Writes the word into every greeting under `root`, the desktop and the phone panel
+// both. A signed-in panel holds no greeting, so its name is left alone.
+export function paintGreetings(root, now = new Date()) {
+  if (!root || typeof root.querySelectorAll !== "function") return
+  const word = greetingFor(now)
+  root.querySelectorAll(GREETING).forEach((node) => {
+    if (node.textContent !== word) node.textContent = word
+  })
+}
 
 // Registers the flag: a new `sidebars` store, or one more key on the host's.
 // Null before Alpine exists.
@@ -130,14 +155,18 @@ export function handleLinkSidebarKeydown(event, Alpine) {
 const installed = new WeakSet()
 
 // Once per window: a second call adds no second listener.
-export function installLinkSidebar({ win, doc } = {}) {
+export function installLinkSidebar({ win, doc, now = () => new Date() } = {}) {
   const host = win || globalThis
   const root = doc || host.document
   if (!root || typeof root.addEventListener !== "function") return false
   if (installed.has(host)) return false
   installed.add(host)
 
-  const register = () => registerLinkSidebar(host.Alpine, root)
+  const paint = (target = root) => paintGreetings(target, now())
+  const register = () => {
+    registerLinkSidebar(host.Alpine, root)
+    paint()
+  }
   root.addEventListener("alpine:init", register)
   root.addEventListener("turbo:load", register)
   root.addEventListener("turbo:before-render", (event) => {
@@ -145,12 +174,19 @@ export function installLinkSidebar({ win, doc } = {}) {
   })
   // A page restored from Turbo's cache or the bfcache comes back closed.
   root.addEventListener("turbo:before-cache", () => closeLinkSidebar(host.Alpine))
-  host.addEventListener("pageshow", (event) => { if (event.persisted) closeLinkSidebar(host.Alpine) })
-  root.addEventListener("click", (event) => handleLinkSidebarClick(event, host.Alpine), true)
+  host.addEventListener("pageshow", (event) => {
+    if (!event.persisted) return
+    closeLinkSidebar(host.Alpine)
+    paint()
+  })
+  root.addEventListener("click", (event) => {
+    if (handleLinkSidebarClick(event, host.Alpine) === "toggle") paint()
+  }, true)
   root.addEventListener("keydown", (event) => handleLinkSidebarKeydown(event, host.Alpine), true)
 
   // Alpine already started (a host that loads it ahead of the module tags).
   if (host.Alpine && host.Alpine.version) register()
+  else paint()
   return true
 }
 

data/app/javascript/studio/page_transitions.js

@@ -7,6 +7,10 @@
 // settled ahead of the visit: the held banner stack and the morph names are decided here on
 // turbo:visit and from the response, never first at before-render.
 //
+// A full load is the other path to the same look. The new document draws the motion, so the old
+// one only plans it: at pageswap it names what it holds, draws the style here, and leaves it for
+// studio/page_transition_reveal, the classic script that applies it at pagereveal.
+//
 // The effects are from the Codrops Page Transitions demo; the keyframes were written fresh.
 
 export const DIRECTIONS = Object.freeze({
@@ -16,9 +20,12 @@ export const DIRECTIONS = Object.freeze({
   bottom: Object.freeze(["fade-bottom", "unfold-top"]),
 })
 
-// A same-page visit (a refresh, a poll): the transition still runs, and draws nothing.
+// A same-page visit (a refresh, a poll, the second half of a redirect): the transition still
+// runs, and draws nothing.
 export const STILL = "still"
 export const READY_CAP_MS = 500
+// Read by app/assets/javascripts/studio/page_transition_reveal.js too.
+export const FULL_LOAD_STYLE_KEY = "studio-page-transition-style"
 const MAX_READY_IMAGES = 12
 const REDUCED_MOTION = "(prefers-reduced-motion: reduce)"
 
@@ -29,13 +36,37 @@ export function pickStyle(direction, random = Math.random) {
 }
 
 // The style for one visit, STILL, or null to leave the swap alone (the engine's fade plays,
-// and a morph between two pages stands).
-export function planVisit({ direction, from, to, transitions, sharedName }, random = Math.random) {
+// and a morph between two pages stands). An advance visit to the same path can bring a new
+// page, as a launch panel does when it gives way to the chat at its own address, so a name
+// the two share still morphs. A refresh replaces, and stays silent.
+export function planVisit({ direction, from, to, transitions, sharedName, advance }, random = Math.random) {
   if (!transitions || !from || !to || !Object.hasOwn(DIRECTIONS, direction)) return null
-  if (from === to) return STILL
+  if (from === to) return advance && sharedName ? null : STILL
   return sharedName ? null : pickStyle(direction, random)
 }
 
+// The style a full load should play, or null for a plain load: planVisit's own rule, so the
+// two paths cannot differ. No morph, since the old page cannot read the new page's names
+// before its picture, and a browser with no activation entry has nothing to compare.
+export function planFullLoad({ direction, from, activation }, random = Math.random) {
+  const url = activation && activation.entry && activation.entry.url
+  if (!url) return null
+  const to = new URL(url).pathname
+  const style = planVisit({ direction, from, to, transitions: true, sharedName: false }, random)
+  return style === STILL ? null : style
+}
+
+// Hands the style to the next document. Storage can refuse, and then the load is plain.
+export function leaveStyle(win, style) {
+  try {
+    if (style) win.sessionStorage.setItem(FULL_LOAD_STYLE_KEY, style)
+    else win.sessionStorage.removeItem(FULL_LOAD_STYLE_KEY)
+    return !!style
+  } catch {
+    return false
+  }
+}
+
 // A slow image must not hold a click: past the cap the swap goes ahead.
 export function withCap(promise, ms, timer = setTimeout) {
   return Promise.race([promise, new Promise((done) => timer(done, ms))])
@@ -109,12 +140,14 @@ export function installPageTransitions(doc) {
   const known = new Map()
   let from = win.location.pathname
   let target = null
+  let advance = false
+  let rendered = false
 
   const nameTheMorph = (shared) => {
     if (shared) root.dataset.pageTransitionMorph = ""
     else delete root.dataset.pageTransitionMorph
   }
-  const predict = (names) => nameTheMorph(target !== from && shareName(morphNames(doc), names))
+  const predict = (names) => nameTheMorph((target !== from || advance) && shareName(morphNames(doc), names))
 
   root.dataset.pageTransitionDirection = readDirection(doc)
   markHeld(doc)
@@ -122,7 +155,17 @@ export function installPageTransitions(doc) {
 
   doc.addEventListener("turbo:visit", (event) => {
     root.dataset.pageTransitionVisit = ""
+    // Turbo opens its view transition before it reads turbo-visit-control. A response it will
+    // not render gets no turbo:before-render, so this stands, and that transition draws nothing.
+    // The full load after it plays the one motion. Left alone while a motion is still running.
+    if (!root.dataset.pageTransition) root.dataset.pageTransition = STILL
     target = new URL(event.detail.url).pathname
+    // A GET that redirects: Turbo renders the response, then replaces to the final address
+    // with that same response, all before turbo:load. The page has landed, so nothing moves.
+    const action = event.detail.action
+    if (rendered && action === "replace") from = target
+    rendered = false
+    advance = action === "advance"
     predict(known.get(target))
   })
 
@@ -154,6 +197,7 @@ export function installPageTransitions(doc) {
       to: target,
       transitions: !!doc.startViewTransition && !win.matchMedia(REDUCED_MOTION).matches,
       sharedName,
+      advance,
     })
     nameTheMorph(sharedName && style !== STILL)
     if (style) root.dataset.pageTransition = style
@@ -161,11 +205,20 @@ export function installPageTransitions(doc) {
     if (style && style !== STILL) holdRender(event, () => readyForSwap(doc, newBody))
   }, { capture: true })
 
-  // Turbo fires this after the transition has finished.
+  // A refused form renders with no visit and fires no turbo:load, so only a render inside a
+  // visit counts. Otherwise the flag would outlive that render and eat the next page's move.
+  doc.addEventListener("turbo:render", () => { rendered = !!target })
+
+  // Turbo fires this after the transition has finished. With no visit, it is this document's
+  // own first load, and a full load's motion can still be playing: its script cleans up.
   doc.addEventListener("turbo:load", () => {
+    const visited = target !== null
     from = win.location.pathname
     target = null
+    advance = false
+    rendered = false
     known.set(from, morphNames(doc))
+    if (!visited) return
     delete root.dataset.pageTransition
     delete root.dataset.pageTransitionVisit
     nameTheMorph(false)
@@ -173,8 +226,37 @@ export function installPageTransitions(doc) {
 
   // A visit that never renders: the stack must not keep its name at rest.
   for (const name of ["turbo:fetch-request-error", "turbo:reload"]) {
-    doc.addEventListener(name, () => { delete root.dataset.pageTransitionVisit })
+    doc.addEventListener(name, () => {
+      delete root.dataset.pageTransitionVisit
+      if (name !== "turbo:reload") delete root.dataset.pageTransition
+    })
   }
+
+  // The last moment on the old document. The browser takes its picture after this.
+  win.addEventListener("pageswap", (event) => {
+    const transition = event.viewTransition
+    const style = transition && planFullLoad({ direction: readDirection(doc), from, activation: event.activation })
+    const left = leaveStyle(win, style)
+    if (!transition) return
+    if (!left) {
+      transition.skipTransition()
+      return
+    }
+    markHeld(doc)
+    root.dataset.pageTransitionVisit = ""
+    nameTheMorph(false)
+    // The loader settles at pagehide, which comes after the picture.
+    if (win.StudioLoader) win.StudioLoader.hide()
+  })
+
+  // Back from the back/forward cache: a visit that left by a full load is over.
+  win.addEventListener("pageshow", (event) => {
+    if (!event.persisted) return
+    from = win.location.pathname
+    target = null
+    advance = false
+    rendered = false
+  })
   return true
 }
 

data/app/javascript/studio/transition_snapshot.js

@@ -0,0 +1,123 @@
+// studio/transition_snapshot: Turbo's snapshot never keeps an Alpine transition's
+// mid-slide state, and a restored page recovers from one that did.
+//
+// THE DEFECT. Turbo clones the live page one tick after turbo:before-cache. A link
+// in a components/_sidebar_panel closes the panel on its click, so a response that
+// arrives inside the 200ms leave clones the panel with Alpine's phase classes on it
+// (`transition ease-in duration-200 translate-x-full`). A hovered link has a
+// prefetched response, so this is ordinary in production as well as on localhost.
+// The clone has no running transition to remove them. Back then restores it, and the
+// panel sits one width off-screen for good: Alpine's transition removes only the
+// classes it added itself, so it never removes a class it found already there, and
+// closing and reopening changes nothing. Only a full load clears it.
+//
+// THE TWO HALVES.
+//
+//   1. Before the clone, finish every running transition with Alpine's own finish().
+//      Alpine removes exactly what it added, and a leave goes on to its display:none.
+//      This also covers an x-transition.opacity, which writes inline style and names
+//      no class.
+//   2. On turbo:before-render, strip the phase classes from the incoming body before
+//      Alpine sees it, for a snapshot that holds them anyway.
+//
+// WHEN "BEFORE THE CLONE" IS. Two handlers, because nothing orders Turbo's clone and
+// its swap. turbo:before-cache cannot finish anything itself: the event is what closes
+// a panel (link_sidebar's handler, a panel's @turbo:before-cache.window), and that
+// close starts its leave in a microtask after the handlers return.
+//
+//   turbo:before-render  the plain path, measured: the swap runs in microtasks, ahead
+//                        of the clone. This is the last moment the panel is connected,
+//                        and Alpine skips a finished transition's cleanup on a
+//                        disconnected element.
+//   a zero timeout set   the path where the clone comes first (a view transition or a
+//   in before-cache      held render puts the swap later). It fires ahead of the one
+//                        Turbo sets right after the event for its clone: timers of one
+//                        delay fire in order.
+//
+// Neither waits for an animation, so nothing here depends on how long a slide takes.
+// The timeout also strips the old body, for a transition something started after
+// before-render on a body that has gone. If Turbo ever changes this order, the second
+// half still recovers the page.
+//
+// THE STRIP'S RULE. It removes only classes named in the element's own x-transition
+// attributes, and only when the element holds a whole phase: all of a direction's
+// `during` classes plus all of its `-start` or all of its `-end`. A panel at rest
+// never holds that. The cost: the strip runs on every Turbo render, not only a restore,
+// so an element that keeps a whole phase at rest loses those classes. No view in the engine, the
+// hub or turf-monster names one (scanned 2026-11-04).
+//
+// Nothing here sets `display`: studio/link_sidebar's contract stands, and x-show
+// still owns it. WHY THIS IS ITS OWN ENTRY POINT. layouts/studio/_head imports it by
+// its own nonced module tag as well as through the boot graph, so a failed boot
+// leaves a page this. It imports nothing.
+
+const RUNS_A_TRANSITION = "[x-show], [x-transition\\:enter], [x-transition\\:leave]"
+const NAMES_CLASSES = "[x-transition\\:enter], [x-transition\\:leave]"
+const DIRECTIONS = ["enter", "leave"]
+
+function named(el, part) {
+  return (el.getAttribute(`x-transition:${part}`) || "").split(/\s+/).filter(Boolean)
+}
+
+function holdsAll(el, classes) {
+  return classes.length > 0 && classes.every((name) => el.classList.contains(name))
+}
+
+// The classes to remove from `el`: empty unless it holds a whole phase.
+export function midSlideClasses(el) {
+  const classes = new Set()
+  for (const direction of DIRECTIONS) {
+    const during = named(el, direction)
+    const start = named(el, `${direction}-start`)
+    const end = named(el, `${direction}-end`)
+    if (holdsAll(el, during) && (holdsAll(el, start) || holdsAll(el, end))) {
+      for (const name of [...during, ...start, ...end]) classes.add(name)
+    }
+  }
+  return [...classes]
+}
+
+// The second half. Null-safe: turbo:before-render may carry no body.
+export function stripMidSlideClasses(root) {
+  if (!root || typeof root.querySelectorAll !== "function") return
+  root.querySelectorAll(NAMES_CLASSES).forEach((el) => {
+    const classes = midSlideClasses(el)
+    if (classes.length) el.classList.remove(...classes)
+  })
+}
+
+// The first half. finish() is what Alpine's own timer calls when a slide ends, and
+// it runs once, so that timer does nothing afterward. An Alpine with no such handle
+// or no finish() finishes nothing here, and must not throw: the strip runs next.
+export function finishTransitions(root) {
+  if (!root || typeof root.querySelectorAll !== "function") return
+  root.querySelectorAll(RUNS_A_TRANSITION).forEach((el) => {
+    if (typeof el._x_transitioning?.finish === "function") el._x_transitioning.finish()
+  })
+}
+
+const installed = new WeakSet()
+
+// Once per window: a second call adds no second listener.
+export function installTransitionSnapshot({ win, doc } = {}) {
+  const host = win || globalThis
+  const root = doc || host.document
+  if (!root || typeof root.addEventListener !== "function") return false
+  if (installed.has(host)) return false
+  installed.add(host)
+
+  root.addEventListener("turbo:before-cache", () => {
+    const body = root.body
+    host.setTimeout(() => {
+      finishTransitions(body)
+      stripMidSlideClasses(body)
+    }, 0)
+  })
+  root.addEventListener("turbo:before-render", (event) => {
+    finishTransitions(root.body)
+    stripMidSlideClasses(event.detail && event.detail.newBody)
+  })
+  return true
+}
+
+if (typeof window !== "undefined") installTransitionSnapshot({ win: window, doc: document })

data/app/views/components/_geo_signpost.html.erb

@@ -82,33 +82,38 @@
       `nil.to_sym` raised NoMethodError inside admin chrome on every page. %>
   <% if local_assigns[:variant].presence&.to_sym == :sidebar %>
     <%# Sidebar variant: the wide emoji row the link sidebar's own sections use,
-        so an engine-owned row is indistinguishable from a host-declared one. %>
+        so an engine-owned row is indistinguishable from a host-declared one: one
+        line at rest, its description on hover or focus. %>
     <% if geo_live %>
       <%= link_to admin_geo_path,
-            class: "group flex items-start gap-3 px-4 py-3 text-sm text-body hover:text-heading hover:bg-surface-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset transition",
+            class: "group flex items-center gap-3 px-4 py-3 text-sm text-body hover:text-heading hover:bg-surface-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset transition",
+            "data-sidebar-row-described": "",
             "@click": geo_close do %>
-        <span class="text-lg leading-none flex-shrink-0">🌍</span>
-        <span class="min-w-0">
-          <span class="block font-medium truncate">Geo</span>
-          <span class="block text-xs text-muted leading-snug mt-0.5">Country and subdivision blocking</span>
+        <span class="studio-emoji-box text-lg leading-none flex-shrink-0">🌍</span>
+        <span class="relative min-w-0 flex-1">
+          <span class="block font-medium truncate" data-sidebar-row-label>Geo</span>
+          <span class="block truncate text-xs text-muted" data-sidebar-row-desc>Country and subdivision blocking</span>
         </span>
       <% end %>
     <% else %>
-      <%# No `select-none` here, and that is the fix rather than an omission: the
-          row's whole job in this state is to hand over the string below, and
-          select-none made it unselectable. role/aria-disabled give a screen
-          reader the "unavailable destination" this paints for a sighted eye. %>
-      <span class="flex items-start gap-3 px-4 py-3 text-sm text-muted cursor-not-allowed"
+      <%# The row that cannot link holds the string to copy as its description. A title
+          alone failed on touch (THE HINT, above), so tabindex lets a tap and a key
+          focus the row, and engine.css reveals it on :focus. The long form stays in
+          the title. No `select-none` here, and that is the fix rather than an
+          omission: the row's whole job in this state is to hand over the string, and
+          select-none made it unselectable. role/aria-disabled give a screen reader
+          the "unavailable destination" this paints for a sighted eye. %>
+      <span class="flex items-center gap-3 px-4 py-3 text-sm text-muted cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset"
             role="link"
             aria-disabled="true"
+            tabindex="0"
             data-test="geo-signpost-disabled"
+            data-sidebar-row-described
             title="<%= geo_title %>">
-        <span class="text-lg leading-none flex-shrink-0">🌍</span>
-        <span class="min-w-0">
-          <span class="block font-medium truncate">Geo</span>
-          <span class="block text-xs text-muted leading-snug mt-0.5"><%= geo_lead %>
-            <code class="font-mono break-all"><%= geo_code %></code>
-          </span>
+        <span class="studio-emoji-box text-lg leading-none flex-shrink-0">🌍</span>
+        <span class="relative min-w-0 flex-1">
+          <span class="block font-medium truncate" data-sidebar-row-label>Geo</span>
+          <span class="block truncate text-xs text-muted" data-sidebar-row-desc><code class="font-mono"><%= geo_code %></code></span>
         </span>
       </span>
     <% end %>

data/app/views/components/_link_sidebar.html.erb

@@ -6,9 +6,37 @@
     this automatically when sections are declared. %>
 <% sections = studio_sidebar_sections %>
 <% sidebar_admin = respond_to?(:admin?) && admin? %>
-<%# A signed-out visitor's panel has no title: its links say what it is. It keeps its
-    accessible name (aria_label) and its close button. %>
-<% sidebar_title = if sidebar_admin then "Admin Menu" elsif respond_to?(:logged_in?) && logged_in? then "Links" end %>
+<%# THE PANEL'S TITLE. Signed in, admin included: the name the navbar shows, from the
+    same call. Signed out: a greeting by the browser's local time, which the server
+    cannot know, so studio/link_sidebar writes the word over this default before the
+    panel opens (greetingFor). The panel is hidden until then, so nothing flashes.
+
+    It goes in the panel's lead slot (title_html), not its title. A title names the
+    panel through aria-labelledby, and "Good morning" or "Alex" is no name for a
+    menu: the panel keeps "Admin menu" or "Links menu" as its aria-label. %>
+<% sidebar_signed_in = respond_to?(:logged_in?) && logged_in? %>
+<% sidebar_user = sidebar_signed_in && respond_to?(:current_user) ? current_user : nil %>
+<% sidebar_title_class = "type-subhead text-heading truncate pr-3" %>
+<% sidebar_title_html =
+     if sidebar_user
+       sidebar_name = Studio.navbar_user_name_for(sidebar_user, self).to_s.squish
+       tag.p(sidebar_name, class: sidebar_title_class, title: sidebar_name, data: { link_sidebar_title: "" })
+     elsif !sidebar_signed_in
+       tag.p("Good morning", class: sidebar_title_class, data: { link_sidebar_title: "", link_sidebar_greeting: "" })
+     end %>
+<%# THE GROUPS. No section shows a label word and none shows the admin chip: a divider
+    separates the groups. The words stay as each group's accessible name, so a screen
+    reader still announces them. An empty section draws no group, or its two dividers
+    would touch.
+
+    A ROW IS ONE LINE AT REST, with or without a desc:, so the spacing never changes. A
+    desc: fades in on hover or keyboard focus, and nothing moves to make room: it sits
+    absolutely in the row's padding as the label lifts by a transform. engine.css, THE
+    SIDEBAR ROW'S DESCRIPTION, holds the rules. A row with no desc: gains no attribute. %>
+<% sidebar_group = lambda do |title:, admin:, first:, &block|
+     name = [title.presence, ("admin" if admin && !title.to_s.match?(/\badmin\b/i))].compact.join(", ").presence
+     tag.div(role: "group", aria: { label: name }, class: ["py-1", ("border-t border-subtle" unless first)], &block)
+   end %>
 <% close_action = "$store.sidebars.linkTreeOpen = false" %>
 
 <style>
@@ -25,21 +53,16 @@
 <template data-studio-controller="link-sidebar"></template>
 
 <% body_html = capture do %>
-  <nav class="flex-1 min-h-0 overflow-y-auto py-2" aria-label="Studio links">
-    <% sections.each do |section| %>
-      <div class="px-4 pt-4 pb-1 label-upper font-bold text-muted flex items-center gap-2">
-        <span><%= section[:title] %></span>
-        <% if section[:admin] %>
-          <span class="rounded border border-primary/20 bg-primary/10 px-1.5 py-0.5 text-[10px] font-mono text-primary-ink">ADMIN</span>
-        <% end %>
-      </div>
-
+  <nav class="flex-1 min-h-0 overflow-y-auto py-1" aria-label="Studio links">
+    <% sections.select { |section| section[:links].any? }.each_with_index do |section, index| %>
+      <%= sidebar_group.call(title: section[:title], admin: section[:admin], first: index.zero?) do %>
       <% section[:links].each do |link| %>
         <% target = link[:target].presence %>
         <%= link_to link[:href],
-              class: "group flex items-start gap-3 px-4 py-3 text-sm text-body hover:text-heading hover:bg-surface-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset transition",
+              class: "group flex items-center gap-3 px-4 py-3 text-sm text-body hover:text-heading hover:bg-surface-alt focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset transition",
               target: target,
               rel: target == "_blank" ? "noopener" : nil,
+              "data-sidebar-row-described": (link[:desc].present? ? "" : nil),
               "@click": close_action do %>
           <% if link[:hover_emoji].present? %>
             <%= render "components/emoji_swap",
@@ -47,16 +70,21 @@
                   hover: link[:hover_emoji],
                   class_name: "text-lg leading-none" %>
           <% else %>
-            <span class="text-lg leading-none flex-shrink-0"><%= link[:emoji] %></span>
+            <span class="studio-emoji-box text-lg leading-none flex-shrink-0"><%= link[:emoji] %></span>
+          <% end %>
+          <% if link[:desc].present? %>
+            <span class="relative min-w-0 flex-1">
+              <span class="block font-medium truncate" data-sidebar-row-label><%= link[:label] %></span>
+              <span class="block truncate text-xs text-muted" data-sidebar-row-desc><%= link[:desc] %></span>
+            </span>
+          <% else %>
+            <span class="min-w-0">
+              <span class="block font-medium truncate"><%= link[:label] %></span>
+            </span>
           <% end %>
-          <span class="min-w-0">
-            <span class="block font-medium truncate"><%= link[:label] %></span>
-            <% if link[:desc].present? %>
-              <span class="block text-xs text-muted leading-snug mt-0.5"><%= link[:desc] %></span>
-            <% end %>
-          </span>
         <% end %>
       <% end %>
+      <% end %>
     <% end %>
 
     <%# THE GEO SIGNPOST — how a sidebar-chrome app gets geo signage at all.
@@ -93,11 +121,9 @@
         bare call would raise for them. The two must stay the same question —
         if the helper's rule changes, this changes with it. %>
     <% if sidebar_admin && sections.any? { |section| section[:admin] } %>
-      <div class="px-4 pt-4 pb-1 label-upper font-bold text-muted flex items-center gap-2">
-        <span>Geo</span>
-        <span class="rounded border border-primary/20 bg-primary/10 px-1.5 py-0.5 text-[10px] font-mono text-primary-ink">ADMIN</span>
-      </div>
-      <%= render "components/geo_signpost", variant: :sidebar, close_action: close_action %>
+      <%= sidebar_group.call(title: "Geo", admin: true, first: false) do %>
+        <%= render "components/geo_signpost", variant: :sidebar, close_action: close_action %>
+      <% end %>
     <% end %>
   </nav>
 <% end %>
@@ -116,7 +142,7 @@
 
 <%= render "components/sidebar_panel",
       id: "studio-link-sidebar",
-      title: sidebar_title,
+      title_html: sidebar_title_html,
       open: "$store.sidebars.linkTreeOpen",
       body_html: body_html,
       footer_html: footer_html,
@@ -129,7 +155,7 @@
 
 <%= render "components/sidebar_panel",
       id: "studio-link-sidebar-mobile",
-      title: sidebar_title,
+      title_html: sidebar_title_html,
       open: "$store.sidebars.linkTreeOpen",
       body_html: body_html,
       footer_html: footer_html,

data/app/views/layouts/studio/_head.html.erb

@@ -30,7 +30,7 @@
 <%# The session-drift stamp + browser store. Renders nothing unless the controller
     includes Studio::ErrorHandling. See studio/_session_stamp.
 
-    THE ONE ENGINE SCRIPT THAT STAYS CLASSIC, AND SYNCHRONOUS. Host code
+    AN ENGINE SCRIPT THAT STAYS CLASSIC, AND SYNCHRONOUS. Host code
     registers identity sources with window.StudioSession as its own modules
     EVALUATE (turf-monster registers its identity source from a module at
     import; CHANGELOG, "Held"), and the host's entry point is the module tag
@@ -39,6 +39,14 @@
     silently be null. It becomes a module when those consumers wait for it. %>
 <%= render "studio/session_stamp" %>
 <%= render "layouts/studio/smooth_load" %>
+<%# A FULL PAGE LOAD PLAYS THE SAME TRANSITION, only with the setting on: an app without it
+    gets neither tag. The sheet carries the at-rule that takes no selector, so it cannot sit in
+    the engine's bundle. The script is classic and synchronous, the second one here, because
+    pagereveal fires before the first render, ahead of every module. docs/PAGE_TRANSITIONS.md. %>
+<% if @studio_page_transition_direction || Studio.page_transition_direction %>
+  <%= stylesheet_link_tag "studio/page_transition_full_load" %>
+  <%= javascript_include_tag "studio/page_transition_reveal", nonce: studio_script_nonce %>
+<% end %>
 <%# The favicon's URL carries its content version (Studio::PublicFileVersion),
     so a redrawn favicon is a new URL no browser has cached. %>
 <link rel="icon" type="image/png" href="<%= Studio::PublicFileVersion.path("/favicon.png") %>">
@@ -197,7 +205,8 @@
     take every bare specifier on the page down with it. The ones below that load by
     URL (type="module" with a src) are external files, not inline scripts: they
     carry no body and need no nonce under a policy that allows 'self'. The session
-    store (studio/_session_stamp, above) is the one classic script, and says why.
+    store (studio/_session_stamp, above) and the full-load script above are the two
+    classic scripts, and each says why.
     A MODULE LOADED BY URL MUST IMPORT NO BARE SPECIFIER. javascript_include_tag
     also sends a `Link: rel=modulepreload` response header, which the browser
     acts on before it parses this map, so a bare import in that module can
@@ -246,6 +255,10 @@
     the document click and Escape handlers. It imports nothing, and the
     link-sidebar controller imports it. %>
 <%= javascript_import_module_tag "studio/link_sidebar" %>
+<%# THE SNAPSHOT CLEANUP, BY ITS OWN DOOR, for the same reason. studio/transition_snapshot
+    keeps Turbo from filing a panel mid-slide, and recovers a page restored from a
+    snapshot that holds one. It imports nothing. %>
+<%= javascript_import_module_tag "studio/transition_snapshot" %>
 <%# THE X-DATA FACTORIES, BY THEIR OWN DOOR, for the same reason.
     studio/alpine_scopes publishes the factories a page binds by name
     (cropPhotoModal, imageUploadHost, submitFormWithProgress), each from the

data/app/views/schema/index.html.erb

@@ -65,7 +65,7 @@
             <p class="text-muted text-xs font-medium mb-1">Indexes</p>
             <% table[:indexes].each do |idx| %>
               <div class="flex items-center gap-2 text-xs py-0.5">
-                <span class="text-secondary font-mono truncate flex-1"><%= idx.columns.join(", ") %></span>
+                <span class="text-secondary font-mono truncate flex-1"><%= Array(idx.columns).join(", ") %></span>
                 <% if idx.unique %>
                   <span class="text-primary font-medium shrink-0">UNIQUE</span>
                 <% end %>

data/lib/studio/engine.rb

@@ -89,8 +89,9 @@ module Studio
       # loaded as an ES module (Alpine by the head's type="module" tag,
       # canvas-confetti and SortableJS through their importmap pins, Leaflet by
       # studio/footer_map's import()), and studio/session.js, the one classic
-      # script (layouts/studio/_head says why). The engine's own modules are
-      # under app/javascript, enumerated below.
+      # script (layouts/studio/_head says why), with studio/page_transition_reveal.js,
+      # the other classic one. The engine's own modules are under app/javascript,
+      # enumerated below.
       app.config.assets.precompile += %w[
         studio/sticky_table_header.css
         studio/alpine.js
@@ -99,6 +100,8 @@ module Studio
         studio/leaflet.js
         studio/leaflet.css
         studio/session.js
+        studio/page_transition_full_load.css
+        studio/page_transition_reveal.js
         studio/montserrat-latin.woff2
         studio/montserrat-latin-ext.woff2
       ]

data/lib/studio/sidebar_sections.rb

@@ -16,6 +16,9 @@
 # trigger and panel stay invisible to everyone else even when the host
 # declares nothing but admin links.
 #
+# A section's title is its group's accessible name; the panel shows no label word. A
+# link's desc is optional and shows only on hover or keyboard focus.
+#
 # THE ENGINE PREPENDS ONE SECTION OF ITS OWN — "You", linking to /profile. The
 # engine ships that page, so it ships the way in rather than asking five apps to
 # declare the same entry and watch them drift. See `standard` below for the two
@@ -57,8 +60,7 @@ module Studio
       return [] unless profile_link?(view)
 
       [{ title: "You", links: [
-        { label: "Profile", href: view.profile_path, emoji: "👤",
-          desc: "Your name, email and photo" }
+        { label: "Profile", href: view.profile_path, emoji: "👤" }
       ] }]
     end
 

data/lib/studio/ui_primitives.rb

@@ -3,6 +3,9 @@
 module Studio
   module UiPrimitives
     EMOJI_SWAP_CSS = <<~CSS
+      /* .studio-emoji-box is a plain emoji in the swap's box, so a row with a plain
+         emoji and a row with a swap are one height and their labels line up. */
+      .studio-emoji-box,
       .studio-emoji-swap,
       .nav-emoji-swap {
         position: relative;

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.124.0"
+  VERSION = "0.126.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.124.0
+  version: 0.126.0
 platform: ruby
 authors:
 - Alex McRitchie
@@ -424,9 +424,11 @@ files:
 - app/assets/javascripts/studio/alpine.js
 - app/assets/javascripts/studio/canvas_confetti.js
 - app/assets/javascripts/studio/leaflet.js
+- app/assets/javascripts/studio/page_transition_reveal.js
 - app/assets/javascripts/studio/session.js
 - app/assets/javascripts/studio/sortable.js
 - app/assets/stylesheets/studio/leaflet.css
+- app/assets/stylesheets/studio/page_transition_full_load.css
 - app/assets/stylesheets/studio/sticky_table_header.css
 - app/assets/tailwind/studio_engine/engine-motion.css
 - app/assets/tailwind/studio_engine/engine.css
@@ -561,6 +563,7 @@ files:
 - app/javascript/studio/survey.js
 - app/javascript/studio/theme_editor.js
 - app/javascript/studio/toast.js
+- app/javascript/studio/transition_snapshot.js
 - app/javascript/studio/vendor/stimulus.js
 - app/javascript/studio/voice_profile.js
 - app/javascript/studio/voice_recorder.js