studio-engine 0.106.0 → 0.107.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7259ed5d43dafb6e374341620d0d52a88f759c35c9ee5084500acc93f7dfa6d1
-  data.tar.gz: 63e473266fb1e1d95e7db15ac351d6535a62f25c1c5aea0446b81ef5a0168f82
+  metadata.gz: dd203cdc5c017f4b75ad4f8a1d1af735e55a0791b33e457db3352bf4c250066c
+  data.tar.gz: b6afd7f7ea6cfe36293c5151caa9a4c53ffb31def0c0b3be752551a52e9655e9
 SHA512:
-  metadata.gz: 381f6d4550605a78526ac6c6e2496bed35aaa1d8de6cc4470346035c8daa881a7d301192cc152e87dea073956544f1968e181fd6e4264e9f88868708daa8d2e3
-  data.tar.gz: 3ed8191d7d9807f8df60f6dee74cc787ce0680aedd8dfeacd33c762979713cdbe0cafd35b867bd9c130f090e942164cca095f972bac5d93242098a0780d36adf
+  metadata.gz: 8efd7d7240c1498a9bf3ba8486e7dcd46c52e174242aeea6e0560abfcded3a5a40530418316463834d5b02bedb4975dc2d16a3fdea2e1d980c3cf1dafbc2a89e
+  data.tar.gz: 11a034ae73a7112c6d2d1a46c639616230794a64ef88ae620552a3cb027c09cc5406812c78821c5658a0287bf9e44c26b5e417212be6b6292e5292fbd419d161

data/CHANGELOG.md

@@ -4,6 +4,32 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.107.0 — 2026-10-14
+
+### Changed
+
+- **The engine navbar's account row is Studio's, for every app.** From 768px
+  the theme toggle leads the gear, both a size down (moon 14px, gear 16px in a
+  24px box), and the moon, gear, name and avatar sit one 0.75rem gap apart,
+  measured ink to ink. A user nav with no second row (`data-nav-rows="1"`) gets
+  a 40px avatar that shrinks to 32px on the scroll ramp and the name on the rule
+  of 3 against it; a two-row nav keeps its 2rem avatar. The account no longer
+  dims on hover. Rules: `engine.css`, *THE ACCOUNT ROW*. Turf Monster forks the
+  partial and is untouched.
+- **The name and avatar open the link sidebar wherever it renders.**
+  `StudioSidebarHelper#studio_account_opens_sidebar?` now answers
+  `studio_sidebar?`, so the account is a `<button>` carrying the sidebar's
+  toggle attributes, announced as a button that opens a dialog rather than a
+  link to `/profile`. An app with no sidebar keeps the link; a host may define
+  the helper to decide otherwise. Selectors and tests that pinned
+  `a[data-nav-account]` should match `[data-nav-account]`.
+
+### Removed
+
+- **`show_logout_link`.** The user nav and `layouts/_navbar` no longer draw a
+  Log out link (the link sidebar carries it), and a call that still passes the
+  local renders without it and without the second row it held open.
+
 ### Added
 
 - **`config.navbar_wordmark`: a brand lockup image in the engine navbar, off by

data/README.md

@@ -678,7 +678,7 @@ Apps customize it through partial slots — each an optional local naming a
 partial (String path, or `{ partial:, locals: }`):
 
 - `balance_slot` — balance display at the start of the top row
-- `extra_icons_slot` — app icon buttons before the admin gear + theme toggle
+- `extra_icons_slot` — app icon buttons between the theme toggle and the gear
 - `div2_slot` — replaces the default second row (wallet address + level bar)
 
 ```erb
@@ -691,6 +691,24 @@ The legacy string locals (`balance_html`, `extra_icons_html`, `div2_html` —
 pre-rendered HTML injected via `raw`) are deprecated but still honored when the
 matching slot is absent, so existing call sites render unchanged.
 
+### The account row
+
+From 768px the user nav's right end reads theme toggle, gear, name, avatar,
+one gap apart (0.75rem, measured ink to ink), with the moon at 14px and the
+gear's 16px glyph in a 24px box. A nav with no second row (no level, no
+wallet, no `div2_slot`; `data-nav-rows="1"`) takes a 40px avatar that shrinks
+to 32px on the navbar's scroll ramp, and the name on the rule of 3 against it:
+its capitals a third of the avatar's height. A two-row nav keeps the 2rem
+avatar. The rules are `engine.css`, *THE ACCOUNT ROW*, layered like the
+collapse band table, so an app's own `@layer utilities` can override them.
+
+Wherever the link sidebar renders (`studio_sidebar?`, which is every signed-in
+app with `/profile`), the name and avatar are one button that opens it, as the
+gear does: the sidebar heads with the profile. A host can define the view
+helper `studio_account_opens_sidebar?` to decide otherwise; with no sidebar
+the account stays a link to the account page. Log out lives in the sidebar,
+never the bar.
+
 ## Transactional emails
 
 Every consuming app can render the same admin page — **`/admin/emails`** —

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

@@ -580,6 +580,61 @@ body.modal-open .studio-app-banner {
         --nav-title-lead-size: calc(1.3rem - 0.3rem * var(--nav-p, 0)); /* 20.8px -> 16px   */
       }
     }
+
+    /* THE ACCOUNT ROW (components/_user_nav), from 768px. Every app whose
+       navbar renders the engine's user nav gets this; Turf Monster forks the
+       partial, carries none of these hooks, and keeps its own two-row nav.
+
+       ICONS. The theme toggle leads the rail (the partial renders it first) and
+       both icons sit a size down: the moon at 14px, the gear's 16px glyph in a
+       24px box, whether the gear is the sidebar trigger or the admin dropdown.
+
+       ONE GAP. Moon to gear, gear to name and name to avatar are the same
+       --nav-gap, measured ink to ink. Each box gap gives back what its edges
+       already hold: the moon's and gear's blank margins inside their 24-unit
+       artwork, the gear's 4px inset in its box, and the name's side bearing
+       (8.6px between moon and gear, 6.3px between gear and name, measured in
+       Chrome). The partial's inline 6px padding on the icon row is zeroed on a
+       one-row nav so the row's edge is the gear's; a two-row nav keeps it, as
+       its second row lines up under that padding.
+
+       ONE-ROW NAVS (data-nav-rows="1"): the avatar is 40px at rest and shrinks
+       to 32px on the scroll ramp (--nav-p, as the logo and title do), and the
+       name sits on the rule of 3 against it: its capitals are a third of the
+       avatar's height and centred on it. Montserrat's cap height is 0.7em, so
+       the size is a third of the avatar over 0.7. On the partial's
+       leading-none, Montserrat's capitals sit 0.01em below the line box's
+       middle, so no trim is needed (text-box would cut the ink, since the name
+       truncates with overflow hidden). A two-row nav keeps the 2rem avatar its
+       second row is laid out against. Below 768px the avatar stays 2rem. */
+    @media (min-width: 768px) {
+      .nav-shell {
+        --nav-avatar: calc(2.5rem - 0.5rem * var(--nav-p, 0));        /* 40px -> 32px */
+        --nav-gap: 0.75rem;
+      }
+      .nav-shell [data-nav-tools] [data-nav-theme-toggle="desktop"] { transform: scale(0.875); }
+      .nav-shell [data-nav-tools] [data-link-sidebar-trigger],
+      .nav-shell [data-nav-tools] [data-nav-admin-gear] {
+        width: 1.5rem;
+        height: 1.5rem;
+        align-items: center;
+        justify-content: center;
+      }
+      .nav-shell [data-nav-tools] [data-link-sidebar-trigger] svg,
+      .nav-shell [data-nav-tools] [data-nav-admin-gear] svg { width: 1rem; height: 1rem; }
+      .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); }
+      .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);
+        height: var(--nav-avatar);
+        font-size: 0.875rem;
+      }
+      .nav-shell [data-nav-rows="1"] + [data-nav-account] [data-nav-name] {
+        font-size: calc(var(--nav-avatar) / 3 / 0.7);
+      }
+    }
 }
 
 /* A board whose controller failed to load (studio/lazy_controllers marks its

data/app/helpers/studio_sidebar_helper.rb

@@ -11,6 +11,15 @@ module StudioSidebarHelper
     studio_sidebar_sections.any?
   end
 
+  # The navbar's name and avatar open the sidebar wherever it renders. The
+  # sidebar heads with the engine's own "You > Profile" section
+  # (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.
+  def studio_account_opens_sidebar?
+    studio_sidebar?
+  end
+
   # 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

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

@@ -7,7 +7,7 @@
 <% display_class = local_assigns.fetch(:display_class, nil) %>
 <% if respond_to?(:admin?) && admin? %>
 <div x-data="{ open: false }" class="<%= ["relative leading-none", display_class].compact.join(" ") %>">
-  <button @click="open = !open" class="flex text-secondary hover:text-heading transition" title="Admin">
+  <button @click="open = !open" class="flex text-secondary hover:text-heading transition" title="Admin" data-nav-admin-gear>
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
       <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
       <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />

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

@@ -15,10 +15,6 @@
     (default display_name) and the signed-out button reads
     Studio.sign_in_label (default "Log in"); lib/studio/navbar_identity.rb.
 
-    Other locals:
-      show_logout_link — boolean, show explicit "Log out" link in the
-                         second row (Studio uses this)
-
     Legacy string locals (deprecated): balance_html, extra_icons_html,
     div2_html — pre-rendered HTML injected via raw. Still honored when
     the matching slot local is absent, so existing call sites render
@@ -30,7 +26,6 @@
 <% div2_slot        ||= nil %>
 <% balance_html     ||= nil %>
 <% extra_icons_html ||= nil %>
-<% show_logout_link ||= false %>
 <% div2_html        ||= nil %>
 <%# Slot resolution: the slot local wins when both a slot and its legacy
     string are passed. Returns nil when neither is present. %>
@@ -44,7 +39,9 @@
      end
    end %>
 
-<%# Where the account link (the username and the avatar, one link) points.
+<%# Where the account control (the username and the avatar, one control) points
+    when it is a link: an app with no link sidebar. Where the sidebar renders,
+    the control opens it instead (Div 3 below).
 
     A HOST'S OWN account_path WINS: an app that already has an account page keeps
     it rather than being repointed at a thinner /profile by a routine dependency
@@ -80,34 +77,39 @@
         reserved column is 147px, and a column that will not give pushed the
         avatar 17px past the screen edge (e2e/header_phone_width.spec.js).
         It is a centred flex column, so with no second row the icons sit level
-        with the name and avatar rather than at the top of the bar. %>
-    <div class="flex-1 min-w-0 flex flex-col justify-center" data-nav-tools>
+        with the name and avatar rather than at the top of the bar.
+        data-nav-rows says which navbar this is: "1" when no second row renders,
+        and then engine.css sizes the account on the rule of 3 (THE ACCOUNT
+        ROW there). A two-row nav keeps the engine's 2rem avatar under its row. %>
+    <% div2_content = studio_nav_slot.call(div2_slot, div2_html) %>
+    <% 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 %>
+    <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;' : '')">
         <%= studio_nav_slot.call(balance_slot, balance_html) %>
         <div class="flex items-center gap-2 ml-auto self-end">
+          <%# The theme toggle leads the rail, then the app's icons, then the
+              gear. Desktop only: below md the engine navbar's phone row draws
+              the theme toggle, so a second one here put two on every phone. The
+              signed-out bar has always done it this way (layouts/_navbar). %>
+          <span class="hidden md:flex" data-nav-theme-toggle="desktop"><%= render "components/theme_toggle_morph" %></span>
           <%= studio_nav_slot.call(extra_icons_slot, extra_icons_html) %>
           <%# Skipped when the link sidebar carries the admin menu — two cog
               glyphs side by side read as a double gear. Desktop only, like
               the theme toggle: below md the navbar's phone row draws the cog,
               so a second one here put two on an admin's phone. %>
           <%= render "components/admin_dropdown", display_class: "hidden md:block" unless respond_to?(:studio_sidebar_replaces_admin_menu?) && studio_sidebar_replaces_admin_menu? %>
-          <%# Desktop only. Below md the engine navbar's phone row draws the
-              theme toggle, so a second one here put two on every phone. The
-              signed-out bar has always done it this way (layouts/_navbar). %>
-          <span class="hidden md:flex" data-nav-theme-toggle="desktop"><%= render "components/theme_toggle_morph" %></span>
         </div>
       </div>
-      <% div2_content = studio_nav_slot.call(div2_slot, div2_html) %>
-      <% 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?) %>
       <% if div2_content.present? %>
         <%# Div 2 replaced by the consumer's slot (div2_slot or legacy div2_html). %>
         <%= div2_content %>
-      <% elsif server_level || wallet_connected || show_logout_link %>
+      <% elsif server_level || wallet_connected %>
         <%# Div 2 (Smaller): wallet address (left) + level (right) with progress
             bar. Renders only when it has something to show — an off-chain,
-            level-less user without a logout link gets NO second row, so the
+            level-less user gets NO second row, so the
             nav collapses to one line instead of an empty progress strip. %>
         <div x-data="{
                barWidth: 0,
@@ -167,8 +169,6 @@
             </span>
             <% if server_level %>
               <span :class="leveledUp && 'nav-level-pop'" x-text="'Level ' + displayLevel">Level <%= server_level %></span>
-            <% elsif show_logout_link %>
-              <%= link_to "Log out", logout_path, class: "font-mono text-muted no-underline nav-bar-text" %>
             <% end %>
           </div>
           <%# Text layer 2: white (clip-path reveals where bar covers) %>
@@ -180,8 +180,6 @@
             </span>
             <% if server_level %>
               <span :class="leveledUp && 'nav-level-pop'" x-text="'Level ' + displayLevel">Level <%= server_level %></span>
-            <% elsif show_logout_link %>
-              <%= link_to "Log out", logout_path, class: "font-mono text-white no-underline nav-bar-text" %>
             <% end %>
           </div>
         </div>
@@ -199,40 +197,41 @@
         </style>
       <% end %>
     </div>
-    <%# Div 3 (Account): the name and the avatar are ONE link to the account
-        page, one tab stop — they used to be two links to the same place.
+    <%# Div 3 (Account): the name and the avatar are ONE control, one tab
+        stop — they used to be two links to the same place.
         Below md the name is screen-reader text and the avatar stands alone,
         so a phone never shows the name truncated to "Guest 55…"; from md up
         it shows beside the avatar and truncates when the row is tight.
 
-        The link never shrinks (the avatar must stay on screen); the icon
+        The control never shrinks (the avatar must stay on screen); the icon
         column beside it is what gives way. So the name cannot truncate by
         flex shrinking: from md up its box carries a max width instead, and
         the name ellipsizes inside it. The avatar is aria-hidden: the name is
-        the link's accessible name.
+        the control's accessible name.
 
-        A host whose link sidebar heads with the profile can make the link open
-        the sidebar instead, by defining studio_account_opens_sidebar? as true
-        (a view helper; the engine defines none, so every other host keeps the
-        link). The link then carries the sidebar's toggle attributes and
-        studio/link_sidebar claims its click; the href stays, so a click before
-        that script loads still reaches the account page. %>
+        WHERE THE LINK SIDEBAR RENDERS, THE ACCOUNT OPENS IT. The sidebar
+        heads with the engine's "You > Profile" section, so the name and avatar open it as the gear does
+        (studio_account_opens_sidebar?, which StudioSidebarHelper answers with
+        studio_sidebar?; a host may define its own). It is then a BUTTON, not a
+        link: it does not navigate, and a screen reader announces "Alex, button,
+        dialog" rather than a link that goes nowhere it says. studio/link_sidebar
+        claims its click from the document, before Alpine binds, as it does the
+        gear's. An app with no sidebar keeps the link to the account page. %>
+    <% account_opens_sidebar = respond_to?(:studio_account_opens_sidebar?) && studio_account_opens_sidebar? %>
     <% account_classes = "group flex items-center gap-2 flex-shrink-0" %>
-    <% account_toggle =
-         if studio_nav_destination && respond_to?(:studio_account_opens_sidebar?) && studio_account_opens_sidebar?
-           { "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'" }
-         else
-           {}
-         end %>
     <% account_inner = capture do %>
-      <span class="sr-only md:not-sr-only md:max-w-40"><span class="block truncate text-right text-heading font-semibold text-base leading-none transition<%= " group-hover:text-primary" if studio_nav_destination %>" data-nav-name><%= Studio.navbar_user_name_for(current_user, self) %></span></span>
+      <span class="sr-only md:not-sr-only md:max-w-40"><span class="block truncate text-right text-heading font-semibold text-base leading-none transition<%= " group-hover:text-primary" if account_opens_sidebar || studio_nav_destination %>" data-nav-name><%= Studio.navbar_user_name_for(current_user, self) %></span></span>
       <span class="flex-shrink-0 flex items-center" aria-hidden="true">
         <%= render "components/avatar", user: current_user, size: "nav" %>
       </span>
     <% end %>
-    <% if studio_nav_destination %>
-      <%= link_to account_inner, studio_nav_destination, class: "#{account_classes} hover:opacity-80 transition", "data-nav-account": "", "x-bind:style": "$store.devMode && 'background: lightgreen'", **account_toggle %>
+    <% if 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
+              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'" %>
     <% else %>
       <span class="<%= account_classes %>" data-nav-account x-bind:style="$store.devMode && 'background: lightgreen'"><%= account_inner %></span>
     <% end %>

data/app/views/layouts/_navbar.html.erb

@@ -4,7 +4,6 @@
       preview         — if true, disables scroll handler and sticky positioning
       balance_html    — raw HTML for balance display (passed through to _user_nav)
       extra_icons_html — raw HTML for extra icon buttons (passed through to _user_nav)
-      show_logout_link — boolean, show "Log out" link in user nav (passed through to _user_nav)
       brand_heading   — boolean, draw the brand title as the page's h1 (default: true).
                         Pass false on a page that carries its own h1: the brand is
                         drawn as a div with the same classes and contents.
@@ -21,7 +20,6 @@
 <% pin_header = Studio.smooth_load && !is_preview %>
 <% balance_html = local_assigns.fetch(:balance_html, nil) %>
 <% extra_icons_html = local_assigns.fetch(:extra_icons_html, nil) %>
-<% show_logout_link = local_assigns.fetch(:show_logout_link, false) %>
 <% brand_tag = local_assigns.fetch(:brand_heading, true) ? "h1" : "div" %>
 <%# Out-of-the-box navigation (engine 0.30): when the host declares
     Studio.sidebar_sections, the navbar mounts the link-sidebar trigger in its
@@ -186,7 +184,7 @@
         to fit. %>
     <div class="<%= balance_html.present? ? 'user-nav-col' : 'user-nav-fit' %> flex-shrink-0 pl-0 pr-4 md:px-4">
       <% if show_user %>
-        <%= render "components/user_nav", balance_html: balance_html, extra_icons_html: extra_icons_html, show_logout_link: show_logout_link %>
+        <%= render "components/user_nav", balance_html: balance_html, extra_icons_html: extra_icons_html %>
       <% else %>
         <div class="flex items-center justify-end gap-3">
           <%= sidebar_trigger_desktop if sidebar_active %>

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.106.0"
+  VERSION = "0.107.0.rc1"
 end

metadata

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