studio-engine 0.125.0 → 0.127.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 13bb9cfe1f6491a4dd2a199c16f734f466edad8fb38beae903033305e8fd91da
-  data.tar.gz: 20d1fec190a9bfe2391e4e4121f2fa11dc35729abd54a8df47e0a19346611715
+  metadata.gz: 22ef2ab3094c82f6f447ee86455dac3e2c70b759ec3d58f2f1a887a347c4b1ad
+  data.tar.gz: 92c5bc2d6c5f53914e33d7c50623a076791ef50faff385b4e63218e3773eb6a6
 SHA512:
-  metadata.gz: 3687dd8d85fffecbb4c1ab84177bcdb9dee0bfd0aa87dac7dbad61a81a4921d920f9c2f1cda8cfc3bff378c4a12d3528ab015e14085b447204c745e69c84155e
-  data.tar.gz: 2d135f12456ce99328d5422df362a83271cd9075b9f618c80b0cf3053edccb3a383164a0c23fdc6cced5e5e4514467e90b637d5beb976f052b2b742cfd7a8b18
+  metadata.gz: 1420fb65a41535cc4c4ae4a1466a83fe46d02eca34c17ed26b1ef1fdfc1cf6ca934776f70a843380410593c7932bbc23c53fe2fe6f0b992e3bf5a19206b5e7f3
+  data.tar.gz: c88656c2c2363917fff41839b65c00ccc0f499d3c30c1a216ae783081f6712b44c200ef93500fceae04d99f6719db344ed0b213b742e104d632d9a0d063fc4d3

data/CHANGELOG.md

@@ -4,6 +4,60 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.127.0 — 2026-11-04
+
+### Added
+
+- **Link sidebar: a soft blurred edge.** `components/_sidebar_panel` takes `edge:`, default
+  false, and `components/_link_sidebar` passes `edge: true`. From `md` up, the panel draws a band
+  along its inner edge: 40px wide, a 6px blur, fading out into the page. It is a pseudo-element
+  of the panel, so it slides with it, leaves with it and takes no clicks. It adds no scrim and no
+  darkening. A browser with no `backdrop-filter` shows the panel plain. A host panel keeps its
+  plain edge unless it opts in. The navbar baseline is regenerated for the link sidebar's
+  `data-sidebar-edge` attribute.
+
+### Fixed
+
+- **`studio/_page_header` takes a long title, and any parent.** A long title used to squeeze
+  the tabs out and overflow the page. It now wraps and stops at three lines, and the tabs move
+  to their own line when it leaves them less than 6rem, so a page has no sideways overflow at
+  any width. A short title's row is unchanged. In a flex or grid parent with a sibling above
+  it, the row no longer shows its bar at rest: the controller measures the row's place from
+  the row there, because the sentinel sits at the parent's start. `docs/PAGE_HEADER.md` loses
+  both limits.
+
+## 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

data/README.md

@@ -1092,9 +1092,13 @@ config.navbar_account_sidebar = { flag: "gearOpen", controls: %w[gear-sidebar ge
 
 ### Sidebar panel lead and close hook
 
-`components/_sidebar_panel` takes two opt-in locals; unset, the panel renders
+`components/_sidebar_panel` takes three opt-in locals; unset, the panel renders
 as before:
 
+- `edge: true` draws a soft blurred band along the panel's inner edge from `md`
+  up, through a `data-sidebar-edge` hook and engine.css. It takes no clicks. The
+  link sidebar passes it. It softens the page beside the panel, so leave it off
+  a panel kept open beside live content.
 - `title_html:` HTML in the title's place, for a panel whose header leads with
   a live status line. It is content, not a name: it never feeds
   `aria-labelledby` or `aria-label`, so a caller that passes it instead of

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

@@ -229,12 +229,19 @@ body.modal-open .studio-app-banner {
    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). */
+   it marks only an end that hides a tab (studio/controllers/page_header).
+
+   A LONG TITLE: the row wraps. The tabs' flex-basis is their floor, so a title that
+   leaves them less than that takes the first line and the tabs take the next, at
+   full width. A title too long for its line wraps, then stops at three lines. A short
+   title never reaches the floor, and its row is one line as before. */
 
 @utility page-header {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.75rem;
+  min-width: 0;
   padding-block: 0.5rem;
   border-block: 1px solid transparent;
   background-color: transparent;
@@ -256,7 +263,7 @@ body.modal-open .studio-app-banner {
   display: flex;
   align-items: baseline;
   gap: 0.5rem;
-  flex-shrink: 0;
+  flex: 0 1 auto;
   min-width: 0;
 }
 
@@ -265,6 +272,14 @@ body.modal-open .studio-app-banner {
   font-size: calc(var(--type-base, 16px) * 1.5);
   font-weight: var(--type-display-weight, 800);
   line-height: 1.25;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  /* Up and down only. A hidden x would shave a glyph's overhang off a short title. */
+  overflow-x: visible;
+  overflow-y: clip;
 }
 
 @utility page-header-meta {
@@ -278,7 +293,7 @@ body.modal-open .studio-app-banner {
 @utility page-header-tabs {
   --page-header-fade-start: 0px;
   --page-header-fade-end: 0px;
-  flex: 1 1 0%;
+  flex: 1 1 6rem;
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
@@ -1084,6 +1099,97 @@ html[data-page-transition="unfold-top"]::view-transition-new(root) { animation-n
         font-size: calc(var(--nav-avatar) / 3 / 0.7);
       }
     }
+
+    /* THE SIDEBAR'S EDGE (components/_sidebar_panel, edge: true). A soft band along the panel's
+       inner edge, where the page behind is blurred and fades out to sharp, so the panel
+       stands off a busy page with no scrim and no darkening.
+
+       It is a pseudo-element of the panel: it moves with the slide, it leaves with the
+       panel, and it takes no clicks, so an outside click still reaches the page. A
+       transform on the panel does not start a new backdrop root, so it blurs the page.
+       40px wide, a 6px blur, held for the 10px nearest the panel, then fading to sharp.
+       right: 100% measures from the padding box, so the band runs over the panel's 1px
+       border. Stopping short of it left the border as a lit line beside the blur.
+
+       FROM md UP ONLY. Below that the link sidebar fills the width, so nothing sits
+       beside it, and a phone does not pay for a backdrop filter through the slide. A
+       browser with no backdrop-filter gets an empty box, so the panel is plain. */
+    @media (min-width: 768px) {
+      [data-sidebar-edge]::before {
+        content: "";
+        position: absolute;
+        inset-block: 0;
+        right: 100%;
+        width: 2.5rem;
+        pointer-events: none;
+        -webkit-backdrop-filter: blur(6px);
+        backdrop-filter: blur(6px);
+        -webkit-mask-image: linear-gradient(to left, #000 25%, transparent);
+        mask-image: linear-gradient(to left, #000 25%, transparent);
+      }
+    }
+
+    /* 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/controllers/page_header_controller.js

@@ -10,7 +10,7 @@
 // carries data-studio-controller-failed and engine.css gives the row its bar at
 // all times, so a stuck row never lays a transparent title over the page.
 import { Controller } from "@hotwired/stimulus"
-import { hiddenEnds, isStuck, revealBy } from "studio/page_header"
+import { hiddenEnds, isStuck, revealBy, sentinelMarksThePlace } from "studio/page_header"
 
 export default class extends Controller {
   connect() {
@@ -42,7 +42,7 @@ export default class extends Controller {
   }
 
   sync() {
-    const stuck = isStuck(this.row.getBoundingClientRect().top, this.element.getBoundingClientRect().top)
+    const stuck = isStuck(this.row.getBoundingClientRect().top, this.restTop())
     const ends = this.tabs ? hiddenEnds(this.tabs) : null
 
     this.row.toggleAttribute("data-stuck", stuck)
@@ -51,6 +51,20 @@ export default class extends Controller {
     this.tabs.toggleAttribute("data-fade-end", ends.end)
   }
 
+  // The top of the row's place in the flow. In a flex or grid parent only the row
+  // can say, so it is unstuck for one read. No frame paints in between, and the box
+  // keeps its size, so nothing moves and the stack republishes nothing.
+  restTop() {
+    if (sentinelMarksThePlace(getComputedStyle(this.element.parentElement).display)) {
+      return this.element.getBoundingClientRect().top
+    }
+
+    this.row.style.position = "static"
+    const top = this.row.getBoundingClientRect().top
+    this.row.style.position = ""
+    return top
+  }
+
   // Moves the tabs only: scrollIntoView would also move the page.
   revealOpenTab() {
     const open = this.tabs?.querySelector("[aria-current]")

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_header.js

@@ -8,6 +8,13 @@ export function isStuck(rowTop, restTop) {
   return rowTop - restTop > 0.5
 }
 
+// Whether the sentinel marks the row's place. It is absolutely positioned, so in a
+// block parent it sits where the row starts. In a flex or grid parent it sits at the
+// parent's start instead, whatever is above the row.
+export function sentinelMarksThePlace(parentDisplay) {
+  return !/flex|grid/.test(parentDisplay)
+}
+
 // Which ends of the tabs hide a tab, so a fade marks only an end with more to see.
 export function hiddenEnds({ scrollLeft, clientWidth, scrollWidth }) {
   return {

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 #{link[:desc].present? ? "items-start" : "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",
+              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,
@@ -124,12 +150,13 @@
       outside_action: close_action,
       escape_action: close_action,
       display_class: "hidden md:flex",
+      edge: true,
       role: "navigation",
       aria_label: sidebar_admin ? "Admin menu" : "Links menu" %>
 
 <%= 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,
@@ -138,5 +165,6 @@
       escape_action: close_action,
       display_class: "flex md:hidden",
       width_class: "w-full",
+      edge: true,
       role: "navigation",
       aria_label: sidebar_admin ? "Admin menu" : "Links menu" %>

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

@@ -19,13 +19,17 @@
     would cover the expanded header. engine.css (THE PINNED EDGE ON THE SCROLL
     TIMELINE) moves it with the header on the scroll timeline instead.
 
-    Two opt-in locals (unset, the panel renders as it did in 0.113.0):
+    Three opt-in locals (unset, the panel renders as it did in 0.113.0):
       title_html  the header's LEAD SLOT: HTML in the title's place, for a panel
                   whose lead is a live status line rather than a label. It is
                   content, NOT a name: it never feeds aria-labelledby or
                   aria-label, so a caller that passes it instead of `title` must
                   pass aria_label, or the panel has no accessible name. `title`
                   wins when both are passed. Escaped unless html_safe.
+      edge        true stamps data-sidebar-edge, the soft blurred band along the
+                  panel's inner edge, drawn by engine.css (THE SIDEBAR'S EDGE) from md
+                  up. It softens the page beside the panel, so it suits a menu that
+                  opens over the page, not a panel kept open beside live content.
       close_hook  true stamps the close button data-sidebar-panel-close="<id>"
                   too, so a host's own document handler can match the button
                   to its panel by id. Needs `id`; without one it adds nothing.
@@ -49,6 +53,7 @@
 <% aria_label     = local_assigns.fetch(:aria_label, title) %>
 <% labelledby     = id.present? && title.present? ? "#{id}-title" : nil %>
 <% close_hook     = local_assigns.fetch(:close_hook, false) && id.present? %>
+<% edge           = local_assigns.fetch(:edge, false) %>
 
 <aside
   <% if id.present? %>id="<%= id %>"<% end %>
@@ -76,6 +81,9 @@
   class="<%= display_class %> fixed right-0 <%= width_class %> bg-surface border-l border-subtle shadow-2xl <%= z_class %> flex-col <%= panel_class %>"
   style="top:var(--nav-bottom, var(--nav-h, 6rem));height:calc(100% - var(--nav-bottom, var(--nav-h, 6rem)))"
   data-pin-edge
+  <% if edge %>
+  data-sidebar-edge
+  <% end %>
   role="<%= role %>"
   <% if labelledby %>aria-labelledby="<%= labelledby %>"<% elsif aria_label.present? %>aria-label="<%= aria_label %>"<% end %>>
   <div class="flex flex-col h-full">

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

@@ -255,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/app/views/studio/_page_header.html.erb

@@ -33,9 +33,11 @@
 
     THE SENTINEL stays at the row's place in the flow, and the row's distance from
     it is what "stuck" means, on every kind of header. It is absolutely positioned,
-    so a space-y parent adds nothing for it. It carries the controller, so the row
-    keeps its data-studio-controller for the page's own. So the row carries no top
-    margin: the space above it belongs to its container. %>
+    so a space-y parent adds nothing for it. In a flex or grid parent it sits at the
+    parent's start, so the controller measures the row's place from the row. It
+    carries the controller, so the row keeps its data-studio-controller for the
+    page's own. So the row carries no top margin: the space above it belongs to its
+    container. %>
 <div class="page-header-sentinel" data-studio-controller="page-header" aria-hidden="true"></div>
 <%= content_tag(tabs.any? ? :nav : :div,
       class: "page-header sticky #{row_class}".strip,

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.125.0"
+  VERSION = "0.127.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.125.0
+  version: 0.127.0
 platform: ruby
 authors:
 - Alex McRitchie
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-11-04 00:00:00.000000000 Z
+date: 2026-11-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -563,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