studio-engine 0.106.0.rc1 → 0.106.0.rc2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a988ae9e78ea6355954e11d8698fc41f69ea88bd91e4d86c21932625081e4aae
-  data.tar.gz: d8fdbcc944fc672efe43802dea5f4e16b6f14d7950cc731fe8d7b72b69cee8b0
+  metadata.gz: be24916d860667899a893bce707087ca252ac14dcc8525974a1ff54f48b45f0b
+  data.tar.gz: 2b97f80181cf0af261fcfc623b18fc0212f4547eee5fd49fbe5042bd780d73f1
 SHA512:
-  metadata.gz: 78ec459d2b0357d17e186dc0d878a2feaa14228855e62fbbe2e9eee000f3a7061c147a277f28851658028697a26959056ac5e4f13ef48dbdb46840135cec125e
-  data.tar.gz: e25bf874a2f3560b3e164ac9d05532052567361aa9220a3c49cf232af7001ee3fbaddedb70a24f0f73873cfc2d936d9561a256e6fbed7f16f256a81fe219bc85
+  metadata.gz: 619518448f747b05444d75f6cf662055a13a03c5a7adb5b8eb46ca24f9eb416ed934a8d6e03bbcfde331b367f6e039877150b067231e2e6cb09fe518f5b25fc7
+  data.tar.gz: 5453348e783a3d4c65968a1a7ef91aab01772244d51378730c31efc4e842c3936c51a371daf99c907d8999a01b7e954b2a5b802dcbe2f8026670b91c98ca6d57

data/CHANGELOG.md

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

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/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_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.106.0.rc1"
+  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"
@@ -245,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,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.106.0.rc1
+  version: 0.106.0.rc2
 platform: ruby
 authors:
 - Alex McRitchie
@@ -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