studio-engine 0.125.0 → 0.126.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 13bb9cfe1f6491a4dd2a199c16f734f466edad8fb38beae903033305e8fd91da
-  data.tar.gz: 20d1fec190a9bfe2391e4e4121f2fa11dc35729abd54a8df47e0a19346611715
+  metadata.gz: b282dc9ef2736f70ae7d985d1617ad22f61f25b6bba0a2b9391804e68c01069d
+  data.tar.gz: 3a0234c85465610eb31351583c0b0d743cf1a42f7db193d762869b040255143a
 SHA512:
-  metadata.gz: 3687dd8d85fffecbb4c1ab84177bcdb9dee0bfd0aa87dac7dbad61a81a4921d920f9c2f1cda8cfc3bff378c4a12d3528ab015e14085b447204c745e69c84155e
-  data.tar.gz: 2d135f12456ce99328d5422df362a83271cd9075b9f618c80b0cf3053edccb3a383164a0c23fdc6cced5e5e4514467e90b637d5beb976f052b2b742cfd7a8b18
+  metadata.gz: ddf281dc8349069d3c2e8aea1a5084dd5030f0b927675ce20fd3a139565ca862e3d52faaa2e6d27a1d76aed9a9e6b566fb1174da3e6a73ffe559466118c914d9
+  data.tar.gz: 2d2f261cedcef59c97ce8f4af60b2942b4cfce84d3355fdd7f8604e52193f08c98c73b14592eabcfaf1e284f4b049aea7e7bbac51c3c5c600f745724822255fa

data/CHANGELOG.md

@@ -4,6 +4,38 @@ 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

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

@@ -1084,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/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,
@@ -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

@@ -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/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.126.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.125.0
+  version: 0.126.0
 platform: ruby
 authors:
 - Alex McRitchie
@@ -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