studio-engine 0.111.2.rc1 → 0.111.3.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8808038af9e2419c0af0177895740230d150828f028ae40be6824c877624b557
-  data.tar.gz: ca450685c591c1414842097435599e658e5a0a68cbf9b05f1405d7c338d35a88
+  metadata.gz: 8107aa8a527107e7b61ed7816152274bda0265ecb8fdfc1c1ac102cb96adff0c
+  data.tar.gz: 74e40a25b75a473bca96886dd3811cfb844ba9e93de65fa4e5b9ab32b1b70ffe
 SHA512:
-  metadata.gz: ae13f4a634c55627b37809d8fb01b39c853a8bec472374aaf5afd30f3f57d84ca99b2d07a92132b8e8ee4ddf28e563ef2fe62befea927262830fb4e7f2065efa
-  data.tar.gz: d900c3a5fcb6aae1d4339fe0a74b078cc9876c11f810f751112e0b2018fbaf54f5205363d8b61d78474c502b501b4f110f9c9eea78e2faaa426c19e92c0bdf1b
+  metadata.gz: '0837f160f4ff4c1d250b34ca315b195af43f03b1a506ae6b57e08f1b3b643e5192523489a6306615ce3b2dc4d7450ed01fa4f6be3ca36b32d93d6189384ef8a1'
+  data.tar.gz: d0e31886e8ce2ab4a0125e3ea9f7e25b53cf62392f3f46ede9b6d7d45e4468d21a4d03014cfa9c50de3c78c7f7804473c82b6ecf2d11eda7b45cc72849d24a76

data/CHANGELOG.md

@@ -4,6 +4,24 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.111.3 — 2026-10-18
+
+### Fixed
+
+- **The desktop navbar links keep their gap to the brand on the scroll
+  timeline.** From 768px on `data-nav-timeline`, the brand shrinks by a
+  transform from its left edge, and a transform keeps its layout box, so the
+  links beside it stayed put and the gap widened as the page scrolled (24px at
+  the top to 148px collapsed on the lab header). `studio/nav_collapse` now also
+  publishes `--nav-brand-shrink`, the brand's expanded width times
+  `1 - --nav-brand-scale`, measured once like the other timeline values, and
+  `[data-nav-links]` slides left by it on the brand's own timeline, range and
+  easing (reduced motion snaps it with the brand). The engine navbar's desktop
+  `<nav>` carries the hook only when the header is on the timeline, so an
+  opted-out navbar stays byte-identical; a forked header opts in by putting `data-nav-links`
+  on its links, as with `data-nav-account` and `data-nav-tools`. Off the
+  timeline (phones, Firefox, previews) nothing changes.
+
 ## 0.111.2 — 2026-10-18
 
 ### Fixed

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

@@ -775,7 +775,14 @@ body.modal-open .studio-app-banner {
      band so it stays centred on the visible bar, the brand scales from its left
      edge, the avatar and name from the right (the name by the avatar's ratio,
      the rule of 3), and the icon rail slides right by what the account gave up
-     so the gaps stay even. The compositor runs these with the scroll itself.
+     so the gaps stay even. A transform keeps the brand's layout box, so the
+     links beside it ([data-nav-links], the navbar's desktop <nav>) slide left
+     by the width the brand gives up (--nav-brand-shrink) and keep their gap
+     to it. The compositor runs these with the scroll itself.
+
+     FORKED HEADERS opt in by hook, as with data-nav-account and data-nav-tools:
+     data-nav-links on the element holding the links beside the brand. Without
+     it those links stay put while the brand shrinks, and the gap widens.
 
      THE SCROLLED LINE AND SHADOW are drawn by ::after on the same timeline,
      not by border-b (which would add a pixel of height and reflow).
@@ -823,7 +830,8 @@ body.modal-open .studio-app-banner {
       .nav-shell[data-nav-timeline] .nav-logo-link,
       .nav-shell[data-nav-timeline] [data-nav-account] > [aria-hidden],
       .nav-shell[data-nav-timeline] [data-nav-account] > span:first-child,
-      .nav-shell[data-nav-timeline] [data-nav-tools] {
+      .nav-shell[data-nav-timeline] [data-nav-tools],
+      .nav-shell[data-nav-timeline] [data-nav-links] {
         animation-timing-function: ease-in-out;
         animation-fill-mode: both;
         animation-timeline: scroll(root block);
@@ -833,6 +841,7 @@ body.modal-open .studio-app-banner {
       .nav-shell[data-nav-timeline] [data-nav-account] > [aria-hidden] { transform-origin: right center; animation-name: nav-tl-avatar; }
       .nav-shell[data-nav-timeline] [data-nav-account] > span:first-child { transform-origin: right center; animation-name: nav-tl-name; }
       .nav-shell[data-nav-timeline] [data-nav-tools] { animation-name: nav-tl-tools; }
+      .nav-shell[data-nav-timeline] [data-nav-links] { animation-name: nav-tl-links; }
     }
     /* Reduced motion: the shrink snaps at the first pixel, as --nav-p's 0/1
        snap does on the script path. */
@@ -876,6 +885,7 @@ body.modal-open .studio-app-banner {
 @keyframes nav-tl-avatar { to { transform: scale(var(--nav-avatar-scale, 1)); } }
 @keyframes nav-tl-name { to { transform: translateX(var(--nav-avatar-shrink, 0px)) scale(var(--nav-avatar-scale, 1)); } }
 @keyframes nav-tl-tools { to { transform: translateX(var(--nav-tools-shift, 0px)); } }
+@keyframes nav-tl-links { to { transform: translateX(calc(-1 * var(--nav-brand-shrink, 0px))); } }
 @keyframes nav-tl-lit { to { opacity: 1; } }
 
 /* A board whose controller failed to load (studio/lazy_controllers marks its

data/app/javascript/studio/nav_collapse.js

@@ -220,26 +220,32 @@ export function timelineOn(el, wide) {
 //
 //   rest, collapsed   the header's height expanded and collapsed
 //   brand0, brand1    the brand link's height expanded and collapsed
+//   brandW            the brand link's width expanded (0: none)
 //   avatar0, avatar1  the avatar's height expanded and collapsed (0: none)
 //   nameW             the account name's width
 //
 // The name scales by the avatar's ratio (the rule of 3), and the icon rail
 // slides right by what the name and avatar give up, so the gaps stay even.
-// Without an avatar (signed out) nothing on the right moves.
-export function timelineVars({ rest, collapsed, brand0, brand1, avatar0, avatar1, nameW }) {
+// Without an avatar (signed out) nothing on the right moves. The brand scales
+// from its left edge, but a transform keeps its layout box, so the links beside
+// it ([data-nav-links]) slide left by the width it gives up (brandShrink) and
+// keep their gap to it.
+export function timelineVars({ rest, collapsed, brand0, brand1, brandW, avatar0, avatar1, nameW }) {
+  var brandScale = brand0 > 0 ? brand1 / brand0 : 1;
   var avatarScale = avatar0 > 0 ? avatar1 / avatar0 : 1;
   var avatarShrink = avatar0 > 0 ? Math.max(0, avatar0 - avatar1) : 0;
   return {
     band: Math.max(0, rest - collapsed),
-    brandScale: brand0 > 0 ? brand1 / brand0 : 1,
+    brandScale: brandScale,
+    brandShrink: brandW > 0 ? Math.max(0, brandW * (1 - brandScale)) : 0,
     avatarScale: avatarScale,
     avatarShrink: avatarShrink,
     toolsShift: avatar0 > 0 ? nameW * (1 - avatarScale) + avatarShrink : 0
   };
 }
 
-var TIMELINE_PROPS = ['--nav-band', '--nav-start', '--nav-brand-scale', '--nav-avatar-scale',
-  '--nav-avatar-shrink', '--nav-tools-shift'];
+var TIMELINE_PROPS = ['--nav-band', '--nav-start', '--nav-brand-scale', '--nav-brand-shrink',
+  '--nav-avatar-scale', '--nav-avatar-shrink', '--nav-tools-shift'];
 
 // What the timeline mode leaves on the header. stopTimeline() clears it, and
 // so does the --nav-p path's start(): a Turbo snapshot taken wide and restored
@@ -450,6 +456,7 @@ export class NavCollapse {
       return {
         h: el.offsetHeight,
         brand: brand ? brand.offsetHeight : 0,
+        brandW: brand ? brand.offsetWidth : 0,
         avatar: avatar ? avatar.offsetHeight : 0
       };
     };
@@ -460,7 +467,7 @@ export class NavCollapse {
     el.style.removeProperty('--nav-p');
     var vars = timelineVars({
       rest: open.h, collapsed: shut.h,
-      brand0: open.brand, brand1: shut.brand,
+      brand0: open.brand, brand1: shut.brand, brandW: open.brandW,
       avatar0: open.avatar, avatar1: shut.avatar,
       nameW: name ? name.offsetWidth : 0
     });
@@ -472,6 +479,7 @@ export class NavCollapse {
       '--nav-band': round(vars.band) + 'px',
       '--nav-start': start + 'px',
       '--nav-brand-scale': String(round(vars.brandScale)),
+      '--nav-brand-shrink': round(vars.brandShrink) + 'px',
       '--nav-avatar-scale': String(round(vars.avatarScale)),
       '--nav-avatar-shrink': round(vars.avatarShrink) + 'px',
       '--nav-tools-shift': round(vars.toolsShift) + 'px'

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

@@ -175,8 +175,11 @@
           <<%= 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? %>>
+        <%# Desktop nav — Studio.navbar_links. data-nav-links, only where the
+            header is on the scroll timeline (so an opted-out header stays
+            byte-identical): it slides left by what the scaled brand gives up
+            (engine.css, THE SCROLL-DRIVEN COLLAPSE). %>
+        <nav <%= "data-nav-links " if scroll_timeline && !is_preview %>class="hidden md:flex items-center gap-4"<%= ' aria-label="Main"'.html_safe if navbar_links.any? %>>
           <% navbar_links.each do |link| %>
           <%= studio_navbar_link_tag(link, size: "text-sm") %>
           <% end %>

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.111.2.rc1"
+  VERSION = "0.111.3.rc1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.111.2.rc1
+  version: 0.111.3.rc1
 platform: ruby
 authors:
 - Alex McRitchie
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-10-18 00:00:00.000000000 Z
+date: 2026-10-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails