studio-engine 0.116.1 → 0.116.2.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0a2c1402ba7875aa502acdcdf8a273f216495fa2c3a37e00c9000622de11f52a
-  data.tar.gz: 49ff67175f004ed66f671245e673a5b50090585a41448b28ce369c0ee148f1da
+  metadata.gz: 8fa12ba607e8798bdcb58e5b2758cc0a2fc57f20f298bf42b30fe8ce550e3723
+  data.tar.gz: 7f6c1fd58ad8722230cd3cf6992b9b8e9fc59c340ad7466f58dc77d9399b070c
 SHA512:
-  metadata.gz: fb499cd28e29a024ac4d7c31eeaee28043a4e1d1ea841e801d11070b81bb518a861f06d7b52fb0f4ecc94c18c46de1529701a711b4d2cdc69e5f79ac06197c8c
-  data.tar.gz: 93b0522427c0481f8777dc1612dc4da0ece932d2a51c0dc635c7fadff5c5d92abba37a9b8d2b285fdb2153fae047a81b52d94299df88261d8efe3d7c31d190cd
+  metadata.gz: 3887513540ba4056ec5d3d2c7d9a1b1b83cafc6e41005732ac582b091bb347db7a4400c6feab5b1c0f1cc87a7e7d08c4bb9bee8031f5ad7caa6a62d7bf752df3
+  data.tar.gz: 1da12039f78c9f35c8d28d03ff776d5b41184444b0cd133264578aaff3c441665065448a8d872cbc39d9ee4098fd6ea05bdbd0e114a1dacfd8f781b885201659

data/CHANGELOG.md

@@ -4,6 +4,34 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.116.2 — 2026-10-28
+
+### Added
+
+- **`Studio.navbar_name_in_rows`: the name stacks over the second row.** `true`
+  moves the signed-in name out of the account control to the end of the user
+  nav's row 1 (`[data-nav-tools]`, after the icons), so it sits directly over the
+  row-2 slot (a level or seeds bar), and the avatar stands alone in
+  `[data-nav-account]`, labelled with the name. The name is its own control of
+  the avatar's kind (`[data-nav-name-trigger]`: the host sidebar button, the link
+  sidebar button, the account link or plain text) and opens what the avatar
+  opens; the account group in `engine.css` lights gear, name and avatar from it
+  too. Below `md` the name control is `hidden` (no invisible tab stop) unless
+  `Studio.navbar_phone_name` shows the name there. `false`, the default, renders byte-identical to before. The scroll
+  timeline's name scale and `studio/nav_collapse`'s name width now skip the
+  avatar's `aria-hidden` box, so neither mistakes it for the name. The partial
+  reads it through `studio_navbar_name_in_rows?`, memoized per render like the
+  other navbar helpers, so one request may set `@studio_navbar_name_in_rows`.
+  Guarded by `test/integration/navbar_name_in_rows_render_test.rb` and
+  `e2e/navbar_name_in_rows.spec.js`.
+
+### Changed
+
+- **`.gitignore` ignores `/.npmrc`.** The hub's `bin/agent-worktree` writes a
+  desk-local `.npmrc` (the npm script guard) before it links a desk's
+  `node_modules` to the primary's; unignored, that file would dirty the desk, so
+  desks fell back to `npm ci`. Development only; the packaged gem is unchanged.
+
 ## 0.116.1 — 2026-10-28
 
 ### Fixed

data/README.md

@@ -1057,6 +1057,16 @@ name never fades. A browser without scroll timelines (Firefox today) ends a long
 name in an ellipsis instead. `false`, the default, keeps the name
 screen-reader text below `md`.
 
+### Name in rows — `Studio.navbar_name_in_rows`
+
+`true` ends the user nav's row 1 with the signed-in name, after the icons, so
+it stacks over the row-2 slot (`div2_slot`, or the engine's wallet-and-level
+row), and leaves the avatar alone in `[data-nav-account]` with the name as its
+`aria-label`. The name is its own control (`[data-nav-name-trigger]`) of the
+avatar's kind and opens what the avatar opens. It may shrink and truncate; the
+icons may not. `Studio.navbar_phone_name` still decides whether it shows below
+`md`. `false`, the default, keeps the name inside the account control.
+
 ### Brand, root hook and layer tier — `Studio.navbar_brand`, `Studio.navbar_root_hook`, `Studio.navbar_z_tier`
 
 ```ruby

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

@@ -738,36 +738,38 @@ body.modal-open .studio-app-banner {
            (Studio.navbar_menu_trigger) and an account that opens the host's
            sidebar (Studio.navbar_account_sidebar). A host that sets both is
            saying they are its one menu, as Turf Monster's gear sidebar is.
+       With Studio.navbar_name_in_rows the name is its own control in row 1
+       ([data-nav-name-trigger]), and pointing at it lights the group too.
        An account link is never grouped. */
     :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]) [data-link-sidebar-trigger] svg,
     :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]) [data-nav-account] > [aria-hidden] > * {
       transition: transform 200ms ease, box-shadow 200ms ease;
     }
     :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]) [data-link-sidebar-trigger]:hover { background-color: transparent; }
-    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible) [data-link-sidebar-trigger],
-    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible) [data-nav-name] { color: var(--color-primary); }
-    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible) [data-nav-account] > [aria-hidden] > * {
+    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-link-sidebar-trigger],
+    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-name] { color: var(--color-primary); }
+    :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-account] > [aria-hidden] > * {
       box-shadow:
         0 0 0 2px rgb(var(--color-primary-rgb) / 0.85),
         0 0 14px 2px rgb(var(--color-primary-rgb) / 0.45);
     }
     @media (prefers-reduced-motion: no-preference) {
-      :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible) [data-link-sidebar-trigger] svg { transform: rotate(45deg); }
+      :has(> [data-nav-tools]):has(> [data-nav-account][aria-controls~="studio-link-sidebar"]):has([data-link-sidebar-trigger]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-link-sidebar-trigger]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-link-sidebar-trigger] svg { transform: rotate(45deg); }
     }
     :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])) [data-nav-menu-trigger] [aria-controls] svg,
     :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])) [data-nav-account] > [aria-hidden] > * {
       transition: transform 200ms ease, box-shadow 200ms ease;
     }
     :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])) [data-nav-menu-trigger] [aria-controls]:hover { background-color: transparent; }
-    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible) [data-nav-menu-trigger] [aria-controls],
-    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible) [data-nav-name] { color: var(--color-primary); }
-    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible) [data-nav-account] > [aria-hidden] > * {
+    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-menu-trigger] [aria-controls],
+    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-name] { color: var(--color-primary); }
+    :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-account] > [aria-hidden] > * {
       box-shadow:
         0 0 0 2px rgb(var(--color-primary-rgb) / 0.85),
         0 0 14px 2px rgb(var(--color-primary-rgb) / 0.45);
     }
     @media (prefers-reduced-motion: no-preference) {
-      :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible) [data-nav-menu-trigger] [aria-controls] svg { transform: rotate(45deg); }
+      :has(> [data-nav-tools] [data-nav-menu-trigger]):has(> [data-nav-account][data-profile-image-toggle]:not([aria-controls~="studio-link-sidebar"])):has([data-nav-menu-trigger] [aria-controls]:hover, [data-nav-account]:hover, [data-nav-name-trigger]:hover, [data-nav-menu-trigger] [aria-controls]:focus-visible, [data-nav-account]:focus-visible, [data-nav-name-trigger]:focus-visible) [data-nav-menu-trigger] [aria-controls] svg { transform: rotate(45deg); }
     }
     /* THE ACCOUNT ROW (components/_user_nav), from 768px. Every app whose
        navbar renders the engine's user nav gets this, Turf Monster included:
@@ -813,6 +815,11 @@ body.modal-open .studio-app-banner {
       .nav-shell [data-nav-tools] :has(> [data-nav-theme-toggle="desktop"]) { gap: calc(var(--nav-gap) - 8.6px); }
       .nav-shell :has(> [data-nav-tools]) { gap: calc(var(--nav-gap) - 6.3px); }
       .nav-shell [data-nav-account] { gap: var(--nav-gap); }
+      /* Studio.navbar_name_in_rows: the name ends row 1, so the row's gap is
+         now name to avatar, a whole --nav-gap, and gear to name is row 1's,
+         the same gap less the name's 6.3px side bearing (its gap-2 given back). */
+      .nav-shell :has(> [data-nav-tools] [data-nav-name-trigger]) { gap: var(--nav-gap); }
+      .nav-shell [data-nav-tools] [data-nav-name-trigger] { margin-inline-start: calc(var(--nav-gap) - 6.3px - 0.5rem); }
       .nav-shell [data-nav-tools][data-nav-rows="1"] > div:first-child { padding-inline: 0 !important; }
       .nav-shell [data-nav-rows="1"] + [data-nav-account] > [aria-hidden] > * {
         width: var(--nav-avatar);
@@ -906,7 +913,8 @@ body.modal-open .studio-app-banner {
       .nav-shell[data-nav-timeline] .nav-logo-link,
       .nav-shell[data-nav-timeline] [data-nav-account] > [aria-hidden],
       .nav-shell[data-nav-timeline] [data-nav-avatar-badge],
-      .nav-shell[data-nav-timeline] [data-nav-account] > span:first-child,
+      .nav-shell[data-nav-timeline] [data-nav-account] > span:first-child:not([aria-hidden]),
+      .nav-shell[data-nav-timeline] [data-nav-name-trigger],
       .nav-shell[data-nav-timeline] [data-nav-tools],
       .nav-shell[data-nav-timeline] [data-nav-links] {
         animation-timing-function: ease-in-out;
@@ -917,7 +925,12 @@ body.modal-open .studio-app-banner {
       .nav-shell[data-nav-timeline] .nav-logo-link { transform-origin: left center; animation-name: nav-tl-brand; }
       .nav-shell[data-nav-timeline] [data-nav-account] > [aria-hidden],
       .nav-shell[data-nav-timeline] [data-nav-avatar-badge] { transform-origin: right center; animation-name: nav-tl-avatar; }
-      .nav-shell[data-nav-timeline] [data-nav-account] > span:first-child { transform-origin: right center; animation-name: nav-tl-name; }
+      /* The name in row 1 (Studio.navbar_name_in_rows) rides the icon column's
+         slide and scales by the avatar's ratio from its right edge, so it
+         keeps its gap to the avatar; the gear-to-name gap grows by what the
+         name gives up. */
+      .nav-shell[data-nav-timeline] [data-nav-name-trigger] { transform-origin: right center; animation-name: nav-tl-avatar; }
+      .nav-shell[data-nav-timeline] [data-nav-account] > span:first-child:not([aria-hidden]) { transform-origin: right center; animation-name: nav-tl-name; }
       .nav-shell[data-nav-timeline] [data-nav-tools] { animation-name: nav-tl-tools; }
       .nav-shell[data-nav-timeline] [data-nav-links] { animation-name: nav-tl-links; }
     }

data/app/helpers/studio_navbar_helper.rb

@@ -50,6 +50,14 @@ module StudioNavbarHelper
     @studio_navbar_avatar_badge = Studio.navbar_avatar_badge_for(self)
   end
 
+  # Studio.navbar_name_in_rows, read once per render pass. The ivar lets one
+  # request set it without writing the process-wide setting (the e2e lab).
+  def studio_navbar_name_in_rows?
+    return @studio_navbar_name_in_rows if defined?(@studio_navbar_name_in_rows)
+
+    @studio_navbar_name_in_rows = Studio.navbar_name_in_rows
+  end
+
   # Studio.navbar_header_bars as partial specs, [] for none.
   def studio_navbar_header_bars
     @studio_navbar_header_bars ||= Studio.navbar_header_bars_for(self)

data/app/javascript/studio/nav_collapse.js

@@ -451,7 +451,9 @@ export class NavCollapse {
     var el = this.el;
     var brand = el.querySelector('.nav-logo-link');
     var avatar = el.querySelector('[data-nav-account] > [aria-hidden]');
-    var name = el.querySelector('[data-nav-account] > span:first-child');
+    // The name's box, never the avatar's: with Studio.navbar_name_in_rows the
+    // name is in row 1 and the avatar is the account's first child.
+    var name = el.querySelector('[data-nav-account] > span:first-child:not([aria-hidden])');
     var read = function () {
       return {
         h: el.offsetHeight,

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

@@ -93,6 +93,27 @@
     <% server_level = current_user.respond_to?(:level) && current_user.level.present? ? current_user.level : nil %>
     <% wallet_connected = current_user.respond_to?(:truncated_solana) && current_user.try(:solana_connected?) %>
     <% nav_rows = div2_content.present? || server_level || wallet_connected ? 2 : 1 %>
+    <%# The account's kind (a host sidebar, the link sidebar, a link or plain
+        text) is read here, before the rows: Studio.navbar_name_in_rows draws
+        the name as its own control at the end of row 1, and that control must
+        open what the avatar opens. Div 3's comments below say what each kind is. %>
+    <% account_sidebar = respond_to?(:studio_navbar_account_sidebar) ? studio_navbar_account_sidebar : nil %>
+    <% account_opens_sidebar = !account_sidebar && respond_to?(:studio_account_opens_sidebar?) && studio_account_opens_sidebar? %>
+    <%# Studio.navbar_phone_name: the name shows below md too, capped, and
+        fades at its edge when it overflows (engine.css, THE PHONE NAME). %>
+    <% phone_name = Studio.navbar_phone_name %>
+    <% name_in_rows = respond_to?(:studio_navbar_name_in_rows?) ? studio_navbar_name_in_rows? : Studio.navbar_name_in_rows %>
+    <% nav_user_name = Studio.navbar_user_name_for(current_user, self) %>
+    <%# The name: its box (screen-reader text below md, or the phone name's
+        capped box) around the truncating data-nav-name. Built here as a
+        string, not a capture, so the default render keeps its bytes. %>
+    <% name_hover = account_sidebar || account_opens_sidebar || studio_nav_destination %>
+    <% name_html = safe_join([
+         (phone_name ? '<span class="min-w-0 max-w-[4.5rem] min-[400px]:max-w-[6rem] md:max-w-40" data-nav-name-phone>' : '<span class="sr-only md:not-sr-only md:max-w-40">').html_safe,
+         %(<span class="block truncate text-right text-heading font-semibold text-base leading-none transition#{" group-hover:text-primary" if name_hover}" data-nav-name>).html_safe,
+         nav_user_name,
+         "</span></span>".html_safe
+       ]) %>
     <div class="flex-1 min-w-0 flex flex-col justify-center" data-nav-tools data-nav-rows="<%= nav_rows %>">
       <%# Div 1 (Bigger): balance + icons. %>
       <div class="flex items-center gap-2 leading-none" :style="'padding: 0 6px;' + ($store.devMode ? 'background: cornflowerblue;' : '')">
@@ -114,6 +135,32 @@
           <%= render "components/admin_dropdown", display_class: "hidden md:block" unless respond_to?(:studio_sidebar_replaces_admin_menu?) && studio_sidebar_replaces_admin_menu? %>
           <% end %>
         </div>
+        <% if name_in_rows %>
+          <%# Studio.navbar_name_in_rows: the name ends row 1, over the row-2
+              slot, as its own control (data-nav-name-trigger) of the avatar's
+              kind. It is the one that gives way: it may shrink and truncate,
+              the icons may not. %>
+          <%# Below md, unless Studio.navbar_phone_name, the name is not shown,
+              so its control is not rendered there at all (hidden, never a
+              0x0 tab stop announcing the name a second time): the avatar,
+              labelled with the name, is the account below md. %>
+          <% name_classes = "group min-w-0 flex-shrink rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40#{" hidden md:block" unless phone_name}" %>
+          <% if account_sidebar %>
+            <% name_js = studio_navbar_account_sidebar_expressions(account_sidebar) %>
+            <%= tag.button type: "button", class: "#{name_classes} cursor-pointer",
+                           data: { nav_name_trigger: "", profile_image_toggle: "" },
+                           aria: { controls: account_sidebar[:controls], haspopup: "dialog" },
+                           ":aria-expanded": name_js[:expanded], "@click.stop": name_js[:toggle] do %><%= name_html %><% end %>
+          <% elsif account_opens_sidebar %>
+            <button type="button" class="<%= name_classes %> cursor-pointer" data-nav-name-trigger data-profile-image-toggle
+                    aria-controls="studio-link-sidebar studio-link-sidebar-mobile" aria-haspopup="dialog"
+                    :aria-expanded="$store.sidebars && $store.sidebars.linkTreeOpen ? 'true' : 'false'"><%= name_html %></button>
+          <% elsif studio_nav_destination %>
+            <%= link_to name_html, studio_nav_destination, class: name_classes, "data-nav-name-trigger": "" %>
+          <% else %>
+            <span class="<%= name_classes %>" data-nav-name-trigger><%= name_html %></span>
+          <% end %>
+        <% end %>
       </div>
       <% if div2_content.present? %>
         <%# Div 2 replaced by the consumer's slot (div2_slot or legacy div2_html). %>
@@ -237,14 +284,12 @@
         this one; the guarded @click is the path when nothing claims it. Its
         controls may not name the engine's own link sidebar ids, refused at
         assignment (lib/studio/navbar_account_sidebar.rb). %>
-    <% account_sidebar = respond_to?(:studio_navbar_account_sidebar) ? studio_navbar_account_sidebar : nil %>
-    <% account_opens_sidebar = !account_sidebar && respond_to?(:studio_account_opens_sidebar?) && studio_account_opens_sidebar? %>
     <% account_classes = "group flex items-center gap-2 flex-shrink-0" %>
-    <%# Studio.navbar_phone_name: the name shows below md too, capped, and
-        fades at its edge when it overflows (engine.css, THE PHONE NAME). %>
-    <% phone_name = Studio.navbar_phone_name %>
+    <%# With Studio.navbar_name_in_rows the name is in row 1, so the avatar
+        stands alone here and the control takes the name as its label. %>
+    <% account_label = name_in_rows ? nav_user_name : nil %>
     <% account_inner = capture do %>
-      <% if phone_name %><span class="min-w-0 max-w-[4.5rem] min-[400px]:max-w-[6rem] md:max-w-40" data-nav-name-phone><% else %><span class="sr-only md:not-sr-only md:max-w-40"><% end %><span class="block truncate text-right text-heading font-semibold text-base leading-none transition<%= " group-hover:text-primary" if account_sidebar || account_opens_sidebar || studio_nav_destination %>" data-nav-name><%= Studio.navbar_user_name_for(current_user, self) %></span></span>
+      <% unless name_in_rows %><%= name_html %><% end %>
       <span class="flex-shrink-0 flex items-center" aria-hidden="true">
         <%= render "components/avatar", user: current_user, size: "nav" %>
       </span>
@@ -253,16 +298,16 @@
       <% account_js = studio_navbar_account_sidebar_expressions(account_sidebar) %>
       <%= tag.button type: "button", class: "#{account_classes} cursor-pointer rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
                      data: { nav_account: "", profile_image_toggle: "" },
-                     aria: { controls: account_sidebar[:controls], haspopup: "dialog" },
+                     aria: { controls: account_sidebar[:controls], haspopup: "dialog", label: account_label },
                      ":aria-expanded": account_js[:expanded], "@click.stop": account_js[:toggle],
                      "x-bind:style": "$store.devMode && 'background: lightgreen'" do %><%= account_inner %><% end %>
     <% elsif account_opens_sidebar %>
-      <button type="button" class="<%= account_classes %> cursor-pointer rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40" data-nav-account data-profile-image-toggle
+      <button type="button" class="<%= account_classes %> cursor-pointer rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40" data-nav-account data-profile-image-toggle<%= %( aria-label="#{h(account_label)}").html_safe if account_label %>
               aria-controls="studio-link-sidebar studio-link-sidebar-mobile" aria-haspopup="dialog"
               :aria-expanded="$store.sidebars && $store.sidebars.linkTreeOpen ? 'true' : 'false'"
               x-bind:style="$store.devMode && 'background: lightgreen'"><%= account_inner %></button>
     <% elsif studio_nav_destination %>
-      <%= link_to account_inner, studio_nav_destination, class: account_classes, "data-nav-account": "", "x-bind:style": "$store.devMode && 'background: lightgreen'" %>
+      <%= link_to account_inner, studio_nav_destination, class: account_classes, "data-nav-account": "", "aria-label": account_label, "x-bind:style": "$store.devMode && 'background: lightgreen'" %>
     <% else %>
       <span class="<%= account_classes %>" data-nav-account x-bind:style="$store.devMode && 'background: lightgreen'"><%= account_inner %></span>
     <% end %>

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.116.1"
+  VERSION = "0.116.2.rc1"
 end

data/lib/studio.rb

@@ -407,6 +407,23 @@ module Studio
     @@navbar_phone_name = navbar_boolean!(:navbar_phone_name, value)
   end
 
+  # ---- Navbar name in rows ----
+  # true moves the signed-in name out of the account control and into the user
+  # nav's rows: it ends row 1 ([data-nav-tools], after the icons), so it stacks
+  # directly over the row-2 slot (a level or seeds bar), and the avatar stands
+  # alone in [data-nav-account]. The name stays a control of its own that opens
+  # what the avatar opens, and the account group (engine.css, THE ACCOUNT
+  # GROUP) lights the three together from either. Turf Monster's stacked name
+  # and level, as before it adopted the engine's user nav. false, the default,
+  # renders byte-identical to before.
+  #
+  #   config.navbar_name_in_rows = true
+  mattr_reader :navbar_name_in_rows, default: false
+
+  def self.navbar_name_in_rows=(value)
+    @@navbar_name_in_rows = navbar_boolean!(:navbar_name_in_rows, value)
+  end
+
   # ---- Navbar brand ----
   # The navbar's logo image and title words, for an app whose brand is not the
   # "Navbar Logo" image plus app_name with its last word in text-primary: a

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.116.1
+  version: 0.116.2.rc1
 platform: ruby
 authors:
 - Alex McRitchie