studio-engine 0.78.0 → 0.80.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 12e1056052d4d49cd70e0ca81e8a39fc4f1c370166d73ea319315337fc648f5f
-  data.tar.gz: 0d94f90bff68c27a6c86d07ad53904b330a3717121f5f944244d0153a2e53a63
+  metadata.gz: 7b9678d8f3c7e2fbb15531909b721ff80ccd9e933d15c283e0c7fa1861137b11
+  data.tar.gz: c495551acf3d80d22f1c7760d65cabb0f949021680f94f152514e409c117400a
 SHA512:
-  metadata.gz: cb929bb288de471829b57f90cfbf01fff7d4e51d68607da51b32df832ad4946662a0617a85002ec6244c23fb3d3d17db069528b090690378ba68a7f53669141a
-  data.tar.gz: bb9eb9c389d8d89887ba72b0bff91b080944b501c3564aed06b26b317f013445f6fd9636d327ba20e70cfd7e4d3065928b6d091eed8c22160e6b819de69825ba
+  metadata.gz: 9c28aa14a0b3a28ca0dd876fc0835431f66588159ec3d11e79f6319f9350be50e4a49d4e6891253334a07f3a0c49db0974e74819b2d2d6f40a17460f5b8e68f9
+  data.tar.gz: 1221cfc40625adeda5fda0293de168969e95d50e43ecb01f2dde1c21c2d0b0f41807b10118f63f291ca74c094f7b1eec1ae23dc4b107be6e6543de8c5b2274ca

data/CHANGELOG.md

@@ -4,6 +4,46 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.80.0 — 2026-09-30
+
+### Added
+
+- **`Studio.navbar_user_name` and `Studio.sign_in_label` set the navbar's two
+  identity words.** `navbar_user_name` takes a method name (`:player_name`) or a
+  callable `->(user, view)` and replaces `display_name` in the signed-in user
+  nav; a blank answer or a raise falls back to `display_name`, and a raise is
+  reported once rather than 500ing the layout. `sign_in_label` (default
+  `"Log in"`) labels the signed-out button in `layouts/_navbar` and
+  `components/_user_nav`. An app that sets neither renders the same navbar bytes
+  as before. See the README, *Navbar identity*.
+
+## 0.79.0 — 2026-09-30
+
+### Changed
+
+- **The signed-in user nav fits a phone.** `components/_user_nav` draws its theme
+  toggle from `md` up only (the navbar's phone row already has one, so phones
+  showed two), and the name and avatar are now ONE link to the account page, one
+  tab stop, where they were two links to the same place. Below `md` the avatar
+  stands alone and the name is screen-reader text. The desktop sidebar button
+  passed as `extra_icons_html`, the admin menu, the account destination, the
+  second row and the banners are unchanged. From `md` up the name now sits beside
+  the avatar, centred on it, rather than on the top row. Apps that shadow the
+  partial (mcritchie-studio, turf-monster, cyvasse) are unaffected until they
+  drop their copy.
+- **Default button fills clear WCAG AA under their white label.** The default
+  success green is `#367E3A` (5.0:1 under white), was `#4BAF50` (2.78:1); a
+  configured success colour paints as before. While an app leaves its primary
+  at the engine default `#8E82FE` (3.1:1), the resolver emits `--color-cta-fill`
+  (`#7268CB`), which `btn-primary`, `btn-outline`'s hover and the user nav's
+  level bar paint; `--color-cta` stays the violet, because apps also paint it
+  as text on dark surfaces. A configured primary emits no fill, so those fall
+  back to the app's own `--color-cta` as before. `--color-cta-hover` is held to
+  AA too, unchanged wherever `darken(primary, 0.30)` already passes. Engine views
+  that painted text or icons with the raw `--color-success` now read
+  `--color-success-ink` (the darker default green is 3.49:1 as text on the dark
+  page).
+
 ## 0.78.0 — 2026-09-29
 
 ### Added

data/README.md

@@ -611,6 +611,36 @@ end
 - A bad entry raises `Studio::NavbarLinks::InvalidLink` naming its index: at
   assignment for a static Array, at render for a callable.
 
+### Navbar identity — `Studio.navbar_user_name` and `Studio.sign_in_label`
+
+Two words the navbar says about the viewer. Both defaults render the navbar
+byte-identical to before, so an app that sets neither sees no change. Rules:
+`lib/studio/navbar_identity.rb`.
+
+```ruby
+Studio.configure do |config|
+  # The signed-in name in components/_user_nav. nil (the default) is display_name.
+  config.navbar_user_name = :player_name                        # a method on the user
+  # config.navbar_user_name = ->(user, view) { user.player_name } # or a callable
+
+  # The signed-out button in layouts/_navbar and components/_user_nav.
+  config.sign_in_label = "Sign in"                              # default "Log in"
+end
+```
+
+- `navbar_user_name` is `nil`, a method name (Symbol or String), or a callable.
+  A two-argument callable gets `(user, view)`; a one-argument callable gets the
+  user alone.
+- The name is always escaped, even when the method or callable returns an
+  `html_safe` string.
+- A method or callable that answers blank falls back to `display_name`. One
+  that raises also falls back, and the error is reported once per process per
+  error class (to `ErrorLog` when the app has it, else the Rails log), so a
+  broken setting never 500s the layout.
+- The engine has no I18n catalogue, so the label is plain config, not a locale
+  key. A blank or non-String label, or a `navbar_user_name` of any other type,
+  raises `Studio::NavbarIdentity::InvalidConfig` at assignment.
+
 ### User nav slots
 
 `components/_user_nav.html.erb` renders the right-side navbar user section.

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

@@ -230,9 +230,12 @@ body.modal-open .studio-app-banner {
    @utility with unlayered overrides. Defaults resolve to the same white as
    before (a literal #fff — the engine's both-modes guard bars raw
    --color-white references, which only exist in Tailwind's compiled theme). */
+/* The fill is --color-cta-fill when the resolver emits one — only while the
+   app leaves its primary at the engine default, whose own hex is 3.1:1 under
+   white — and otherwise the app's --color-cta, as it always was. */
 @utility btn-primary {
   color: var(--btn-primary-fg, #fff);
-  background-color: var(--color-cta);
+  background-color: var(--color-cta-fill, var(--color-cta));
   &:hover {
     color: var(--btn-primary-fg-hover, var(--btn-primary-fg, #fff));
     background-color: var(--color-cta-hover);
@@ -258,7 +261,7 @@ body.modal-open .studio-app-banner {
   border-color: var(--color-cta);
   &:hover {
     @apply text-white;
-    background-color: var(--color-cta);
+    background-color: var(--color-cta-fill, var(--color-cta));
   }
 }
 

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

@@ -11,6 +11,10 @@
                          address + level progress bar) entirely
                          (e.g. a seeds bar)
 
+    Config, not locals: the signed-in name is Studio.navbar_user_name
+    (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)
@@ -40,7 +44,7 @@
      end
    end %>
 
-<%# Where the username and the avatar point — resolved ONCE, used by both.
+<%# Where the account link (the username and the avatar, one link) points.
 
     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
@@ -69,16 +73,14 @@
 
 <div class="flex gap-2">
   <% if logged_in? %>
-    <%# Left column: Div 1 + Div 2 stacked %>
-    <%# min-w-0 belongs HERE, on the flex item of the outer row. A flex item
-        defaults to min-width auto, so without it this column refuses to
-        shrink below its content and the username overflows instead of
-        truncating. Div 1 below is a block child of this column, not a flex
-        item of the outer row, so min-w-0 there has no effect on shrinking.
-        The username link truncates on its own: overflow-hidden gives it an
-        automatic minimum size of zero inside Div 1. %>
+    <%# Left column: Div 1 + Div 2 stacked.
+        min-w-0 belongs HERE, on the flex item of the nav root: a flex item
+        defaults to min-width auto, and without it this column refuses to
+        shrink below balance + icons. On a 320px phone with a balance the
+        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). %>
     <div class="flex-1 min-w-0">
-      <%# Div 1 (Bigger): balance + icons + username. %>
+      <%# 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">
@@ -86,14 +88,11 @@
           <%# Skipped when the link sidebar carries the admin menu — two cog
               glyphs side by side read as a double gear. %>
           <%= render "components/admin_dropdown" unless respond_to?(:studio_sidebar_replaces_admin_menu?) && studio_sidebar_replaces_admin_menu? %>
-          <%= render "components/theme_toggle_morph" %>
+          <%# 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>
-        <% nav_name_classes = "text-heading font-semibold hover:text-primary transition text-base leading-none truncate text-right" %>
-        <% if studio_nav_destination %>
-          <%= link_to current_user.display_name, studio_nav_destination, class: nav_name_classes %>
-        <% else %>
-          <span class="<%= nav_name_classes %>"><%= current_user.display_name %></span>
-        <% end %>
       </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 %>
@@ -154,7 +153,7 @@
              @navbar-seeds-update.window="handleSeedsUpdate($event.detail)"
              class="relative mt-0.5" style="height: 14px;">
           <%# Fill bar %>
-          <div class="absolute inset-y-0 left-0 rounded z-0" style="background: var(--color-cta); transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);" :style="{ width: barWidth + '%' }"></div>
+          <div class="absolute inset-y-0 left-0 rounded z-0" style="background: var(--color-cta-fill, var(--color-cta)); transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);" :style="{ width: barWidth + '%' }"></div>
           <%# Text layer 1: muted (visible outside bar) %>
           <div class="absolute inset-0 flex items-center justify-between px-1.5 font-mono text-muted z-[1] nav-bar-text">
             <span>
@@ -196,21 +195,35 @@
         </style>
       <% end %>
     </div>
-    <%# Div 3 (Avatar): spans both rows %>
-    <% if studio_nav_destination %>
-      <%= link_to studio_nav_destination, class: "hover:opacity-80 transition flex-shrink-0 flex items-center", "x-bind:style": "$store.devMode && 'background: lightgreen'" do %>
-        <%= render "components/avatar", user: current_user, size: "nav" %>
-      <% end %>
-    <% else %>
-      <span class="flex-shrink-0 flex items-center" x-bind:style="$store.devMode && 'background: lightgreen'">
+    <%# 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.
+        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
+        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. %>
+    <% account_classes = "group flex items-center gap-2 flex-shrink-0" %>
+    <% 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="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'" %>
+    <% else %>
+      <span class="<%= account_classes %>" data-nav-account x-bind:style="$store.devMode && 'background: lightgreen'"><%= account_inner %></span>
+    <% end %>
   <% else %>
     <%= render "components/admin_dropdown" unless respond_to?(:studio_sidebar_replaces_admin_menu?) && studio_sidebar_replaces_admin_menu? %>
-    <%= render "components/theme_toggle_morph" %>
+    <%# Desktop only, as above: the phone row carries the toggle below md. %>
+    <span class="hidden md:flex" data-nav-theme-toggle="desktop"><%= render "components/theme_toggle_morph" %></span>
     <div class="flex items-center gap-3 ml-auto">
-      <%= link_to "Log in", login_path, class: "text-heading hover:text-primary text-sm font-semibold transition" %>
+      <%= link_to Studio.sign_in_label, login_path, class: "text-heading hover:text-primary text-sm font-semibold transition" %>
       <%= link_to "Sign up", signup_path, class: "btn btn-primary btn-sm" %>
     </div>
   <% end %>

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

@@ -162,7 +162,7 @@
         <div class="flex items-center justify-end gap-3">
           <%= sidebar_trigger_desktop if sidebar_active %>
           <span class="hidden md:flex"><%= render "components/theme_toggle_morph" %></span>
-          <%= link_to "Log in", login_path, class: "btn btn-primary" %>
+          <%= link_to Studio.sign_in_label, login_path, class: "btn btn-primary" %>
         </div>
       <% end %>
     </div>

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

@@ -121,7 +121,7 @@
         </template>
         <template x-if="!toast.image">
           <div class="w-10 h-10 rounded-full flex items-center justify-center bg-inset shrink-0" style="margin-top: 2px;">
-            <svg x-show="toast.type === 'notice'" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" style="color: var(--color-success)" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+            <svg x-show="toast.type === 'notice'" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" style="color: var(--color-success-ink)" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
             </svg>
             <svg x-show="toast.type !== 'notice'" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" style="color: var(--color-danger)" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">

data/app/views/studio/board/_board.html.erb

@@ -226,7 +226,7 @@
              x-transition:leave-end="opacity-0 translate-x-8"
              class="bg-surface border rounded-lg px-4 py-2.5 text-sm font-medium shadow-lg backdrop-blur-sm"
              :style="toast.type === 'success'
-                       ? 'border-color: var(--color-success); color: var(--color-success)'
+                       ? 'border-color: var(--color-success); color: var(--color-success-ink)'
                        : 'border-color: var(--color-danger); color: var(--color-danger)'">
           <span x-text="toast.message"></span>
         </div>

data/app/views/studio/modals/shared/_email_field.html.erb

@@ -58,7 +58,7 @@
     <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
       <span x-show="status === 'loading'" x-cloak class="spinner text-secondary" aria-hidden="true"></span>
       <svg x-show="status === 'valid'" x-cloak xmlns="http://www.w3.org/2000/svg" class="w-5 h-5"
-           style="color: var(--color-success)" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+           style="color: var(--color-success-ink)" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
         <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
       </svg>
       <svg x-show="status === 'invalid'" x-cloak xmlns="http://www.w3.org/2000/svg" class="w-5 h-5"

data/app/views/style/_modal_specimen.html.erb

@@ -95,7 +95,7 @@
         <svg x-show="!copiedRef" class="w-3 h-3 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
           <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
         </svg>
-        <svg x-show="copiedRef" x-cloak class="w-3 h-3 shrink-0" style="color: var(--color-success)" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true">
+        <svg x-show="copiedRef" x-cloak class="w-3 h-3 shrink-0" style="color: var(--color-success-ink)" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true">
           <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
         </svg>
         <span class="sr-only" x-text="copiedRef ? 'Copied' : ''"></span>

data/app/views/style/_modals.html.erb

@@ -868,7 +868,7 @@
       <div class="flex flex-wrap items-center gap-3">
         <h3 class="text-xl font-bold text-heading">Profile Leveling</h3>
         <% if leveling_on %>
-          <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">leveling on</span>
+          <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">leveling on</span>
         <% else %>
           <span class="badge" style="color: var(--color-warning); border-color: var(--color-warning)">leveling off</span>
         <% end %>
@@ -958,7 +958,7 @@
             glow_when: ds_glow.call("join-newsletter", celebrate: true) } do %>
         <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 text-center space-y-2">
           <div class="mx-auto w-7 h-7 rounded-full flex items-center justify-center" style="background: color-mix(in srgb, var(--color-success) 15%, transparent)">
-            <svg class="w-4 h-4" style="color: var(--color-success)" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
+            <svg class="w-4 h-4" style="color: var(--color-success-ink)" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
           </div>
           <div x-show="opts.leveling" class="flex gap-1">
             <span class="flex-1 h-2 rounded" style="background: var(--color-cta)"></span>
@@ -1022,7 +1022,7 @@
       <div class="flex flex-wrap items-center gap-3">
         <h3 class="text-xl font-bold text-heading">Web3</h3>
         <% if web3_on %>
-          <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">enabled on this app</span>
+          <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">enabled on this app</span>
         <% else %>
           <span class="badge" style="color: var(--color-warning); border-color: var(--color-warning)">disabled on this app</span>
         <% end %>
@@ -1192,7 +1192,7 @@
       <div class="flex flex-wrap items-center gap-3">
         <h3 class="text-xl font-bold text-heading">Contest entry &amp; eligibility</h3>
         <% if age_gate_on %>
-          <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">age gate on</span>
+          <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">age gate on</span>
         <% else %>
           <span class="badge" style="color: var(--color-warning); border-color: var(--color-warning)">age gate off</span>
         <% end %>
@@ -1312,7 +1312,7 @@
             open_expr: "$store.dsModals.open('ds-success')" } do %>
         <div class="pointer-events-none w-40 rounded-lg bg-surface border border-subtle shadow p-4 text-center space-y-2">
           <div class="mx-auto w-7 h-7 rounded-full flex items-center justify-center" style="background: color-mix(in srgb, var(--color-success) 15%, transparent)">
-            <svg class="w-4 h-4" style="color: var(--color-success)" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
+            <svg class="w-4 h-4" style="color: var(--color-success-ink)" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
           </div>
           <span class="block h-2 w-24 mx-auto rounded" style="background: var(--color-text); opacity: .18"></span>
           <span class="block h-4 w-full rounded" style="background: var(--color-cta)"></span>
@@ -1441,7 +1441,7 @@
       <div class="flex flex-wrap items-center gap-3">
         <h3 class="text-xl font-bold text-heading">Rewards</h3>
         <% if leveling_on %>
-          <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">enabled on this app</span>
+          <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">enabled on this app</span>
         <% else %>
           <span class="badge" style="color: var(--color-warning); border-color: var(--color-warning)">disabled on this app</span>
         <% end %>

data/app/views/style/_tasks.html.erb

@@ -85,7 +85,7 @@
   <%= render "studio/board_assets" %>
   <div class="space-y-3">
     <div class="flex items-center gap-2">
-      <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">Live</span>
+      <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">Live</span>
       <p class="label-upper"><code class="font-mono text-2xs">studio/board/board</code> &middot; demo &mdash; drag a card between columns</p>
     </div>
     <%= render "studio/board/board",
@@ -268,7 +268,7 @@
   <div class="grid gap-4 sm:grid-cols-2">
     <div class="card p-5 space-y-2">
       <div class="flex items-center gap-2">
-        <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">Shared</span>
+        <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">Shared</span>
         <p class="text-heading font-semibold text-sm">What every board inherits</p>
       </div>
       <ul class="text-secondary text-sm space-y-1 list-disc list-inside">

data/app/views/style/_theme.html.erb

@@ -183,12 +183,13 @@
     function dsThemeEditor(seed) {
       return {
         colors: Object.assign({ primary: '#000', dark: '#0f172a', light: '#ffffff',
-                                success: '#4BAF50', warning: '#FF7C47', danger: '#EF4444',
+                                success: '#367E3A', warning: '#FF7C47', danger: '#EF4444',
                                 accent: '#6366F1' }, seed || {}),
         saving: false,
         updatePreview() {
           var d = document.documentElement.style;
           d.setProperty('--color-cta', this.colors.primary);
+          d.setProperty('--color-cta-fill', this.colors.primary);
           if (this.colors.success) d.setProperty('--color-success', this.colors.success);
           if (this.colors.warning) d.setProperty('--color-warning', this.colors.warning);
           if (this.colors.danger)  d.setProperty('--color-danger', this.colors.danger);

data/app/views/style/_tricks.html.erb

@@ -90,7 +90,7 @@
             locals: { klass: ".badge", usage: %(<span class="badge">Neutral</span>) } do %>
         <div class="flex flex-wrap items-center justify-center gap-2">
           <span class="badge text-body">Neutral</span>
-          <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">Success</span>
+          <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">Success</span>
           <span class="badge" style="color: var(--color-warning); border-color: var(--color-warning)">Warning</span>
           <span class="badge" style="color: var(--color-danger); border-color: var(--color-danger)">Danger</span>
         </div>
@@ -174,7 +174,7 @@
       <%= render layout: "style/specimen",
             locals: { klass: "in a status badge",
                       usage: %(<span class="badge">Shipped ) + erb.call("at_time_tag(release.shipped_at)") + "</span>" } do %>
-        <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">Shipped <%= at_time_tag(42.minutes.ago) %></span>
+        <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">Shipped <%= at_time_tag(42.minutes.ago) %></span>
       <% end %>
     </div>
   </section>
@@ -442,7 +442,7 @@
       <div class="flex flex-wrap items-center gap-3">
         <h3 class="text-xl font-bold text-heading">Leveling</h3>
         <% if leveling_on %>
-          <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">enabled on this app</span>
+          <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">enabled on this app</span>
         <% else %>
           <span class="badge" style="color: var(--color-warning); border-color: var(--color-warning)">disabled on this app</span>
         <% end %>

data/app/views/theme_settings/edit.html.erb

@@ -71,13 +71,13 @@
               <p class="text-sm mb-3" :style="{ color: '#94a3b8' }">Card on surface with secondary text.</p>
               <div class="flex gap-2">
                 <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.primary }">Primary</button>
-                <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.success || '#4BAF50' }">Accent</button>
+                <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.success || '#367E3A' }">Accent</button>
                 <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.danger || '#EF4444' }">Danger</button>
               </div>
             </div>
             <div class="flex gap-2">
               <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" :style="{ backgroundColor: colors.primary + '33', color: colors.primary, border: '1px solid ' + colors.primary + '55' }">Badge</span>
-              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" :style="{ backgroundColor: (colors.success || '#4BAF50') + '33', color: colors.success || '#4BAF50', border: '1px solid ' + (colors.success || '#4BAF50') + '55' }">Success</span>
+              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" :style="{ backgroundColor: (colors.success || '#367E3A') + '33', color: colors.success || '#367E3A', border: '1px solid ' + (colors.success || '#367E3A') + '55' }">Success</span>
             </div>
           </div>
         </div>
@@ -94,13 +94,13 @@
               <p class="text-sm mb-3" :style="{ color: '#64748b' }">Card on surface with secondary text.</p>
               <div class="flex gap-2">
                 <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.primary }">Primary</button>
-                <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.success || '#4BAF50' }">Accent</button>
+                <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.success || '#367E3A' }">Accent</button>
                 <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.danger || '#EF4444' }">Danger</button>
               </div>
             </div>
             <div class="flex gap-2">
               <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" :style="{ backgroundColor: colors.primary + '33', color: colors.primary, border: '1px solid ' + colors.primary + '55' }">Badge</span>
-              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" :style="{ backgroundColor: (colors.success || '#4BAF50') + '33', color: colors.success || '#4BAF50', border: '1px solid ' + (colors.success || '#4BAF50') + '55' }">Success</span>
+              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" :style="{ backgroundColor: (colors.success || '#367E3A') + '33', color: colors.success || '#367E3A', border: '1px solid ' + (colors.success || '#367E3A') + '55' }">Success</span>
             </div>
           </div>
         </div>

data/lib/studio/navbar_identity.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+# Resolves the two words the engine navbar says about who is (or is not) signed
+# in: the signed-in user's name (Studio.navbar_user_name) and the signed-out
+# button's label (Studio.sign_in_label). Pure Ruby, so the unit suite covers it
+# without the dummy app.
+#
+# Studio.navbar_user_name is one of:
+#
+#   nil                     the default: user.display_name, as before
+#   :player_name            a method called on the user ("player_name" works too)
+#   ->(user, view) { ... }  a callable; a one-argument callable gets the user only
+#
+# A layout must not 500 over a name. When the configured method or callable
+# RAISES, the navbar prints display_name and the failure is reported once per
+# process per error class (ErrorLog when the host has it, else Rails.logger),
+# not once per page view. A BLANK answer falls back to display_name quietly:
+# a user with no player name yet is data, not a fault.
+#
+# The name comes back as a plain String, never an html_safe buffer, so ERB
+# escapes whatever a host's method or callable returned.
+module Studio
+  module NavbarIdentity
+    class InvalidConfig < ArgumentError; end
+
+    DEFAULT_SIGN_IN_LABEL = "Log in"
+
+    @reported = {}
+    @reported_lock = Mutex.new
+
+    module_function
+
+    def user_name(user, view = nil, config: Studio.navbar_user_name)
+      fallback = user.display_name # outside the rescue: the default path is not ours to swallow
+      return fallback if config.nil?
+
+      begin
+        text = plain_text(configured_name(config, user, view))
+      rescue StandardError => e
+        report_once(e)
+        return fallback
+      end
+      text.empty? ? fallback : text
+    end
+
+    def validate_name!(config)
+      return nil if config.nil? || config.respond_to?(:call)
+      return nil if (config.is_a?(Symbol) || config.is_a?(String)) && !config.to_s.strip.empty?
+
+      raise InvalidConfig, "Studio.navbar_user_name must be nil, a method name (Symbol) or a callable " \
+                           "->(user, view) (got #{config.inspect})"
+    end
+
+    def validate_label!(label)
+      return nil if label.is_a?(String) && !label.strip.empty?
+
+      raise InvalidConfig, "Studio.sign_in_label must be non-blank text (got #{label.inspect})"
+    end
+
+    # Forget what was reported, so a reconfigured name reports its own failure.
+    def reset_reported!
+      @reported_lock.synchronize { @reported.clear }
+    end
+
+    def configured_name(config, user, view)
+      return user.public_send(config.to_sym) unless config.respond_to?(:call)
+
+      config.respond_to?(:arity) && config.arity == 1 ? config.call(user) : config.call(user, view)
+    end
+
+    # String.new drops an html_safe flag: SafeBuffer#to_s returns the buffer
+    # itself, which ERB would print raw.
+    def plain_text(value)
+      String.new(value.to_s).strip
+    end
+
+    def report_once(error)
+      first = @reported_lock.synchronize { @reported[error.class.name] ? false : (@reported[error.class.name] = true) }
+      return unless first
+
+      if defined?(::ErrorLog) && ::ErrorLog.respond_to?(:capture!)
+        ::ErrorLog.capture!(error)
+      elsif defined?(::Rails) && ::Rails.respond_to?(:logger) && ::Rails.logger
+        ::Rails.logger.warn("[studio-navbar] Studio.navbar_user_name failed, showing display_name: " \
+                            "#{error.class}: #{error.message}")
+      end
+    rescue StandardError
+      nil # reporting is best-effort: the navbar still renders
+    end
+  end
+end

data/lib/studio/theme_resolver.rb

@@ -2,6 +2,18 @@ module Studio
   class ThemeResolver
     ROLES = %i[primary dark light success warning danger accent].freeze
 
+    # The engine's default role colours — the resolver's fallbacks, and the
+    # same values lib/studio.rb ships as its theme_* defaults.
+    DEFAULT_PRIMARY = "#8E82FE"
+    # #367E3A, not the #4BAF50 it was until engine-navbar-phone-polish: the old
+    # green measured 2.78:1 under the white label btn-success draws on it. This
+    # is the same hue at 5.0:1 (the shade cyvasse chose for its own success).
+    DEFAULT_SUCCESS = "#367E3A"
+
+    # WCAG AA for normal-size text. Every filled button draws a 14px bold white
+    # label, which is not "large" text, so its fill owes 4.5:1 against white.
+    WHITE_LABEL_TARGET = 4.5
+
     attr_reader :colors
 
     # colors: hash of role => hex string (e.g. { primary: "#8E82FE", dark: "#1A1535", ... })
@@ -29,9 +41,9 @@ module Studio
 
     def dark_mode_vars
       dark_base   = colors[:dark] || "#1A1535"
-      primary     = colors[:primary] || "#8E82FE"
+      primary     = colors[:primary] || DEFAULT_PRIMARY
       border_rgb  = ColorScale.lighten(dark_base, 0.30)
-      success     = colors[:success] || "#4BAF50"
+      success     = colors[:success] || DEFAULT_SUCCESS
       warning     = colors[:warning] || "#FF7C47"
       danger      = colors[:danger] || "#EF4444"
       surfaces    = dark_surfaces(dark_base)
@@ -69,8 +81,11 @@ module Studio
         "--color-border"         => ColorScale.with_opacity(border_rgb, 0.2),
         "--color-border-strong"  => ColorScale.with_opacity(border_rgb, 0.4),
         "--color-shadow"         => "transparent",
+        # --color-cta stays the brand colour: apps also paint it as TEXT on
+        # dark surfaces, where a darker shade would lose contrast. The button
+        # fill under a white label is a separate, derived var: see #fill_vars.
         "--color-cta"            => primary,
-        "--color-cta-hover"      => ColorScale.darken(primary, 0.30),
+        "--color-cta-hover"      => cta_hover(primary),
         "--color-success"        => success,
         "--color-warning"        => warning,
         "--color-danger"         => danger,
@@ -99,7 +114,7 @@ module Studio
         "--color-warning-ink"    => status_ink(warning, surfaces, direction: :lighten),
         "--color-success-ink"    => status_ink(success, surfaces, direction: :lighten),
         "--color-accent"         => colors[:accent] || "#F72585"
-      }
+      }.merge(fill_vars(primary, success))
     end
 
     # Every dark-mode background a text var can sit on (page, surface,
@@ -166,6 +181,38 @@ module Studio
       contrast_ink(role, direction: direction, start: 0.0, target: 4.5, against: surfaces + tints)
     end
 
+    # The lightest shade of `color` that carries a white label at AA: the
+    # colour itself when it already passes, otherwise the same hue darkened in
+    # 0.02 steps until it does. A fill shade, derived the way the text inks are.
+    def white_label_fill(color)
+      contrast_ink(color, direction: :darken, start: 0.0, target: WHITE_LABEL_TARGET, against: ["#ffffff"])
+    end
+
+    # --color-cta-fill: the fill btn-primary, btn-outline's hover and the user
+    # nav's level bar paint under a white label (the same in both modes).
+    # Emitted ONLY while the app leaves its primary at the engine default
+    # (#8E82FE, 3.1:1 under white), which is the engine's to make accessible.
+    # A CONFIGURED primary emits no fill, so those rules fall back to
+    # var(--color-cta), the app's own choice: mcritchie-industries pairs a navy
+    # label with its orange (a darkened fill would drop it to 3.3:1), and
+    # cyvasse sets --color-cta itself.
+    #
+    # Success needs no fill var: its DEFAULT is already AA under white
+    # (DEFAULT_SUCCESS), and a configured success colour is the app's own —
+    # turf-monster's suite pins that a configured #4BAF50 still paints as-is.
+    def fill_vars(primary, _success)
+      return {} unless primary.to_s.casecmp?(DEFAULT_PRIMARY)
+
+      { "--color-cta-fill" => white_label_fill(primary) }
+    end
+
+    # The hover fill is always derived, so it is always held to AA under white:
+    # darken(primary, 0.30) as before when that passes (every consumer palette
+    # today), darker only for a primary so light that 0.30 is not enough.
+    def cta_hover(primary)
+      contrast_ink(primary, direction: :darken, start: 0.30, target: WHITE_LABEL_TARGET, against: ["#ffffff"])
+    end
+
     # Bounded, clamped search: raise the blend amount from `start` until the
     # ink clears `target` contrast against every background in `against`.
     # Clamps at 1.0 (pure white/black), so a pathological base degrades to the
@@ -182,7 +229,7 @@ module Studio
 
     # Generate --color-primary-{50..900} + RGB variants for Tailwind opacity support
     def primary_palette_vars
-      primary = colors[:primary] || "#8E82FE"
+      primary = colors[:primary] || DEFAULT_PRIMARY
       scale = ColorScale.generate(primary)
       vars = {}
 
@@ -202,8 +249,8 @@ module Studio
 
     def light_mode_vars
       light_base = colors[:light] || "#f8fafc"
-      primary    = colors[:primary] || "#8E82FE"
-      success    = colors[:success] || "#4BAF50"
+      primary    = colors[:primary] || DEFAULT_PRIMARY
+      success    = colors[:success] || DEFAULT_SUCCESS
       warning    = colors[:warning] || "#FF7C47"
       danger     = colors[:danger] || "#EF4444"
       surfaces   = light_surfaces(light_base)
@@ -231,7 +278,7 @@ module Studio
         "--color-border-strong"  => ColorScale.darken(light_base, 0.15),
         "--color-shadow"         => "rgba(0,0,0,0.05)",
         "--color-cta"            => primary,
-        "--color-cta-hover"      => ColorScale.darken(primary, 0.30),
+        "--color-cta-hover"      => cta_hover(primary),
         "--color-success"        => success,
         "--color-warning"        => warning,
         "--color-danger"         => danger,
@@ -256,7 +303,7 @@ module Studio
         "--color-warning-ink"    => status_ink(warning, surfaces, direction: :darken),
         "--color-success-ink"    => status_ink(success, surfaces, direction: :darken),
         "--color-accent"         => colors[:accent] || "#F72585"
-      }
+      }.merge(fill_vars(primary, success))
     end
   end
 end

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.78.0"
+  VERSION = "0.80.0"
 end

data/lib/studio.rb

@@ -13,6 +13,7 @@ require "studio/js_identifier"
 require "studio/partial_block"
 require "studio/sidebar_sections"
 require "studio/navbar_links"
+require "studio/navbar_identity"
 require "studio/profile_sections"
 require "studio/profile_image"
 require "studio/oauth_identity"
@@ -192,6 +193,33 @@ module Studio
     @@navbar_links = links
   end
 
+  # ---- Navbar identity ----
+  # The name the signed-in user nav prints, and the signed-out button's label.
+  # Both defaults render the navbar byte-identical to before. The engine has no
+  # I18n catalogue, so the label is plain config rather than a locale key.
+  # Rules: lib/studio/navbar_identity.rb.
+  #
+  #   config.navbar_user_name = :player_name                          # a method on the user
+  #   config.navbar_user_name = ->(user, view) { user.player_name }   # or a callable
+  #   config.sign_in_label    = "Sign in"
+  #
+  # nil means user.display_name. A method or callable that raises, or answers
+  # blank, falls back to display_name; a raise is reported once, never a 500.
+  mattr_reader :navbar_user_name, default: nil
+
+  def self.navbar_user_name=(config)
+    NavbarIdentity.validate_name!(config)
+    NavbarIdentity.reset_reported!
+    @@navbar_user_name = config
+  end
+
+  mattr_reader :sign_in_label, default: NavbarIdentity::DEFAULT_SIGN_IN_LABEL
+
+  def self.sign_in_label=(label)
+    NavbarIdentity.validate_label!(label)
+    @@sign_in_label = label
+  end
+
   # ---- The shared profile page (/profile) ----
   # The rows that make up /profile. `nil` — the default — means "the engine's
   # standard page", NOT "no rows": a brand-new app with an empty initializer gets
@@ -607,7 +635,9 @@ module Studio
   mattr_accessor :theme_primary,  default: "#8E82FE"
   mattr_accessor :theme_dark,     default: "#1A1535"
   mattr_accessor :theme_light,    default: "#f8fafc"
-  mattr_accessor :theme_success,  default: "#4BAF50"
+  # #367E3A: the default green's AA shade under a white label (5.0:1). The old
+  # #4BAF50 measured 2.78:1 on btn-success. Studio::ThemeResolver::DEFAULT_SUCCESS.
+  mattr_accessor :theme_success,  default: "#367E3A"
   mattr_accessor :theme_warning,  default: "#FF7C47"
   mattr_accessor :theme_danger,   default: "#EF4444"
   mattr_accessor :theme_accent,   default: "#F72585"
@@ -900,6 +930,11 @@ module Studio
     NavbarLinks.resolve(navbar_links, view)
   end
 
+  # The signed-in user's navbar name for a view (lib/studio/navbar_identity.rb).
+  def self.navbar_user_name_for(user, view = nil)
+    NavbarIdentity.user_name(user, view, config: navbar_user_name)
+  end
+
   # The engine's standard /profile rows. Hosts compose against this rather than
   # restating a literal list, so a later release that adds a standard row
   # delivers it to every app that used the seam as intended.

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.78.0
+  version: 0.80.0
 platform: ruby
 authors:
 - Alex McRitchie
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-09-29 00:00:00.000000000 Z
+date: 2026-09-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -573,6 +573,7 @@ files:
 - lib/studio/log_rotation.rb
 - lib/studio/mail_transport.rb
 - lib/studio/name_parts.rb
+- lib/studio/navbar_identity.rb
 - lib/studio/navbar_links.rb
 - lib/studio/newsletter.rb
 - lib/studio/oauth_identity.rb