studio-engine 0.105.0 → 0.106.0.rc2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b5e9eefb6bad47abe79849c59d248536a70bb9275c6f7074210bfdd88b975e76
-  data.tar.gz: 69fd09fd720f85729f90cb354ff8273665ec4f98b04f63368bbc093e57188468
+  metadata.gz: be24916d860667899a893bce707087ca252ac14dcc8525974a1ff54f48b45f0b
+  data.tar.gz: 2b97f80181cf0af261fcfc623b18fc0212f4547eee5fd49fbe5042bd780d73f1
 SHA512:
-  metadata.gz: 66b905941833f30f59c9595b34a2c5485089685212e44970acb04f090f0d6fd157681b2523e11c577037bf666420743f5a9646ed50d8d8a4e3593861877aa4d7
-  data.tar.gz: cbb687874917a0b899690134eaa19ba94b80d52160c74e846b3b2d81295f2ef64050ca6b3b51591b5184f6bd4c53a65037b8f1741bac2e7c9a7a9b1e85a62be4
+  metadata.gz: 619518448f747b05444d75f6cf662055a13a03c5a7adb5b8eb46ca24f9eb416ed934a8d6e03bbcfde331b367f6e039877150b067231e2e6cb09fe518f5b25fc7
+  data.tar.gz: 5453348e783a3d4c65968a1a7ef91aab01772244d51378730c31efc4e842c3936c51a371daf99c907d8999a01b7e954b2a5b802dcbe2f8026670b91c98ca6d57

data/CHANGELOG.md

@@ -4,6 +4,35 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+### Added
+
+- **`config.navbar_wordmark`: a brand lockup image in the engine navbar, off by
+  default.** Set it to `{ light: "/brand/navbar-light.svg", dark:
+  "/brand/navbar-dark.svg" }` and `layouts/_navbar` draws the lockup in place of
+  the "Navbar Logo" image and the `app_name` text, inside the same root link and
+  brand h1, with `alt` set to `app_name`. Both files render and engine.css shows
+  the one matching the root's `dark` class. Its height follows the logo's
+  collapse size and it scales down inside the phone column. Unset, the navbar is
+  byte-identical. See `docs/NAVBAR_SETUP.md`.
+
+## 0.106.0 — 2026-10-14
+
+### Changed
+
+- **The navbar names the signed-in user by first name.** With
+  `Studio.navbar_user_name` unset, the user nav (and anything else calling
+  `Studio.navbar_user_name_for`) prints the user's `first_name`, else the first
+  word of `name`, else `display_name` whole, as before. A host that configures
+  the setting is unchanged. A user nav with no second row now centres its icon
+  column, so the gear and theme toggle sit level with the name rather than at
+  the top of the bar.
+- **A host can make the name and avatar open the link sidebar.** Define the
+  view helper `studio_account_opens_sidebar?` as true and the account link
+  carries the sidebar's toggle attributes (`data-profile-image-toggle`,
+  `aria-controls`), so `studio/link_sidebar` opens the sidebar on click; the
+  link keeps its href for a click before that script loads. Without the helper
+  the link is unchanged.
+
 ## 0.105.0 — 2026-10-13
 
 ### Added

data/README.md

@@ -624,13 +624,13 @@ end
 
 ### 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`.
+Two words the navbar says about the viewer. The name defaults to the user's
+first name: the `first_name` column, else the first word of `name`, else
+`display_name` whole. 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.
+  # The signed-in name in components/_user_nav. nil (the default) is the first name.
   config.navbar_user_name = :player_name                        # a method on the user
   # config.navbar_user_name = ->(user, view) { user.player_name } # or a callable
 

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

@@ -540,6 +540,22 @@ body.modal-open .studio-app-banner {
     .nav-shell .nav-title { font-size: var(--nav-title-size); line-height: var(--nav-title-lead); }
     .nav-shell .nav-title span:last-child { font-size: var(--nav-title-lead-size); }
 
+    /* Studio.navbar_wordmark: a brand lockup image in place of the logo and
+       title. HEIGHT-LED: it rides --nav-logo-size, so it collapses exactly as
+       the logo does in every band, and its width is the artwork's own. On a
+       phone the left column is what is left beside the user column's
+       min(14rem, 46vw) cap; the brand box and the image both carry min-width 0
+       and the image max-width 100%, so a wide lockup scales down inside that
+       column (object-fit keeps its aspect, pinned left) instead of painting
+       over the user nav. Both theme files render and the root's `dark` class
+       picks one: the light file on a light page, the dark file on a dark page. */
+    .nav-wordmark-brand { display: flex; align-items: center; min-width: 0; margin: 0; }
+    .nav-wordmark { display: block; width: auto; max-width: 100%; min-width: 0; object-fit: contain; object-position: left center; }
+    .nav-shell .nav-wordmark { height: var(--nav-logo-size); }
+    .nav-wordmark-dark { display: none; }
+    .dark .nav-wordmark-light { display: none; }
+    .dark .nav-wordmark-dark { display: block; }
+
     @media (max-width: 767px) {
       .nav-title { flex-direction: column; gap: 0; }
       .nav-title span:first-child { margin-bottom: -4px; }

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

@@ -78,8 +78,10 @@
         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">
+        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>
       <%# 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) %>
@@ -207,8 +209,22 @@
         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 link'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. %>
     <% 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="flex-shrink-0 flex items-center" aria-hidden="true">
@@ -216,7 +232,7 @@
       </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'" %>
+      <%= 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 %>
     <% 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

@@ -42,6 +42,7 @@
   last_word = words.pop
   prefix = words.join(" ")
   logo_path = Studio.logo_for("Navbar Logo")
+  wordmark = Studio.navbar_wordmark
 %>
 
 <%# nav-shell is the --nav-p scope: the engine's nav-collapse controller (studio/nav_collapse) writes
@@ -143,6 +144,21 @@
     <div class="flex-1 min-w-0 px-4">
       <div class="flex items-center gap-6 min-w-0">
         <%= link_to root_path, class: "nav-logo-link inline-flex items-center gap-3 group min-w-0" do %>
+          <% if wordmark %>
+          <%# Studio.navbar_wordmark: the brand lockup (icon + words as one
+              artwork) replaces the logo AND the title text. Both theme files
+              render; engine.css (.nav-wordmark-light / -dark) shows the one
+              matching the root's `dark` class, so a toggle needs no script.
+              The brand_tag still wraps it, so the page keeps its h1 and the
+              h1's accessible name is the alt text. Height follows
+              --nav-logo-size; width is the artwork's own, shrinking with the
+              column (the min-w-0 chain above; the brand box's own min-width 0
+              is in engine.css) rather than spilling. %>
+          <<%= brand_tag %> class="nav-wordmark-brand">
+            <img src="<%= wordmark[:light] %>" alt="<%= Studio.app_name %>" class="nav-wordmark nav-wordmark-light">
+            <img src="<%= wordmark[:dark] %>" alt="<%= Studio.app_name %>" class="nav-wordmark nav-wordmark-dark">
+          </<%= brand_tag %>>
+          <% else %>
           <% if logo_path %>
             <%# No w-*/h-* utility here: .nav-shell .nav-logo sizes it off --nav-p.
                 transition-transform, NOT transition-all — the hover lift still
@@ -155,6 +171,7 @@
               `truncate` on the h1 would clip the flex CONTAINER and leave the
               spans drawing outside it, which is the bug rather than the fix. %>
           <<%= brand_tag %> class="nav-title font-extrabold text-heading tracking-tight min-w-0"><span class="truncate"><%= prefix %></span><span class="text-primary truncate"><%= last_word %></span></<%= brand_tag %>>
+          <% end %>
         <% end %>
         <%# Desktop nav — Studio.navbar_links %>
         <nav class="hidden md:flex items-center gap-4"<%= ' aria-label="Main"'.html_safe if navbar_links.any? %>>

data/lib/studio/navbar_identity.rb

@@ -7,7 +7,8 @@
 #
 # Studio.navbar_user_name is one of:
 #
-#   nil                     the default: user.display_name, as before
+#   nil                     the default: the user's first name (first_name, else
+#                           the first word of name), else user.display_name
 #   :player_name            a method called on the user ("player_name" works too)
 #   ->(user, view) { ... }  a callable; a one-argument callable gets the user only
 #
@@ -32,7 +33,7 @@ module Studio
 
     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?
+      return first_name(user) || fallback if config.nil?
 
       begin
         text = plain_text(configured_name(config, user, view))
@@ -62,6 +63,16 @@ module Studio
       @reported_lock.synchronize { @reported.clear }
     end
 
+    # The default name: the first_name column, else the first word of name; nil
+    # when the host has neither, and the caller prints display_name. display_name
+    # itself is never split: a host may build it from a username or an email.
+    def first_name(user)
+      given = plain_text(user.first_name) if user.respond_to?(:first_name)
+      return given unless given.to_s.empty?
+
+      plain_text(user.name).split.first if user.respond_to?(:name)
+    end
+
     def configured_name(config, user, view)
       return user.public_send(config.to_sym) unless config.respond_to?(:call)
 

data/lib/studio/navbar_wordmark.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+# Studio.navbar_wordmark: an opt-in brand lockup image (an icon plus the app's
+# words, made as one piece of artwork) that the engine navbar draws in place of
+# the "Navbar Logo" image and the app_name text. Pure Ruby, so the unit suite
+# covers it without the dummy app.
+#
+# The config is nil (the default, and the navbar renders as it always has) or
+# a Hash naming one file per theme:
+#
+#   config.navbar_wordmark = { light: "/brand/navbar-light.svg",
+#                              dark:  "/brand/navbar-dark.svg" }
+#
+# light is the artwork drawn on a LIGHT page, dark the artwork drawn on a DARK
+# page (the root carries the `dark` class). Both images render; engine.css hides
+# the one that does not match the theme, so a toggle swaps them with no script.
+module Studio
+  module NavbarWordmark
+    class InvalidConfig < ArgumentError; end
+
+    THEMES = %i[light dark].freeze
+
+    module_function
+
+    # The config as { light: String, dark: String }, or nil when unset.
+    def normalize(config)
+      return nil if config.nil?
+
+      validate!(config)
+      THEMES.to_h { |theme| [theme, fetch(config, theme).strip] }
+    end
+
+    def validate!(config)
+      return nil if config.nil?
+
+      unless config.is_a?(Hash)
+        raise InvalidConfig, "Studio.navbar_wordmark must be nil or a Hash of " \
+                             "{ light: path, dark: path } (got #{config.inspect})"
+      end
+
+      extra = config.keys.map(&:to_sym) - THEMES
+      raise InvalidConfig, "Studio.navbar_wordmark takes only :light and :dark (got #{extra.inspect})" if extra.any?
+
+      THEMES.each do |theme|
+        value = fetch(config, theme)
+        next if value.is_a?(String) && !value.strip.empty?
+
+        raise InvalidConfig, "Studio.navbar_wordmark[:#{theme}] must be a non-blank path (got #{value.inspect})"
+      end
+      nil
+    end
+
+    def fetch(config, theme)
+      config.key?(theme) ? config[theme] : config[theme.to_s]
+    end
+  end
+end

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.105.0"
+  VERSION = "0.106.0.rc2"
 end

data/lib/studio.rb

@@ -33,6 +33,7 @@ require "studio/site_footer"
 require "studio/booking"
 require "studio/navbar_links"
 require "studio/navbar_identity"
+require "studio/navbar_wordmark"
 require "studio/auth_labels"
 require "studio/profile_sections"
 require "studio/profile_image"
@@ -223,7 +224,7 @@ module Studio
 
   # ---- 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
+  # The name defaults to the user's first name. The engine has no
   # I18n catalogue, so the label is plain config rather than a locale key.
   # The label also words the engine's auth pages (lib/studio/auth_labels.rb).
   # Rules: lib/studio/navbar_identity.rb.
@@ -232,7 +233,8 @@ module Studio
   #   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
+  # nil means the first name (first_name, else the first word of name), else
+  # 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
 
@@ -244,6 +246,21 @@ module Studio
 
   mattr_reader :sign_in_label, default: NavbarIdentity::DEFAULT_SIGN_IN_LABEL
 
+  # ---- Navbar wordmark ----
+  # A brand lockup image (icon plus words as one artwork) drawn in place of the
+  # "Navbar Logo" and the app_name text. nil, the default, renders the navbar
+  # byte-identical to before. light is the file for a light page, dark the file
+  # for a dark page; both render and engine.css shows the one matching the
+  # root's `dark` class. Rules: lib/studio/navbar_wordmark.rb.
+  #
+  #   config.navbar_wordmark = { light: "/brand/navbar-light.svg",
+  #                              dark:  "/brand/navbar-dark.svg" }
+  mattr_reader :navbar_wordmark, default: nil
+
+  def self.navbar_wordmark=(config)
+    @@navbar_wordmark = NavbarWordmark.normalize(config)
+  end
+
   def self.sign_in_label=(label)
     NavbarIdentity.validate_label!(label)
     @@sign_in_label = label

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.105.0
+  version: 0.106.0.rc2
 platform: ruby
 authors:
 - Alex McRitchie
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-10-13 00:00:00.000000000 Z
+date: 2026-10-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -760,6 +760,7 @@ files:
 - lib/studio/name_parts.rb
 - lib/studio/navbar_identity.rb
 - lib/studio/navbar_links.rb
+- lib/studio/navbar_wordmark.rb
 - lib/studio/newsletter.rb
 - lib/studio/oauth_identity.rb
 - lib/studio/partial_block.rb