studio-engine 0.32.2 → 0.32.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9525633783466e9475652bb4ded7c35b05c36165cf76db8c68db9e9ee357e0cb
-  data.tar.gz: 7e2bbfa555bd538f915985213fafe2a27de2ef6bb0a2ae6b4868054a3dea127b
+  metadata.gz: e56dfd4be2d6f429f329626c4aebb8b22aa9e0069cfdf8905a02fab4bc47ab4c
+  data.tar.gz: 71b6a6d3dafa57d3b25e9cb791049ae9b4a975efa7d14b08b961492b2b870d6f
 SHA512:
-  metadata.gz: 33d02975ad35287da64b3a75ee297efec825d68fa5b3823e5ec834dc67eb572df96e669cff6fa94ce731293b343f2b9b9aef8a9a4ce9a6b63d4bddd79989fbda
-  data.tar.gz: 792e5a6c4159be01aba533ad28e705d09576a2a8b5ee8b9af05f0dc1200ba2baddd8dad772f1eea6dd6d0b7957705d57901d937c0cf73be21a89d726fbccbd20
+  metadata.gz: ea74d63cf741530df52e0fbe490a3fe48817845235f12aa911e094d67fe6012e3b9f1d139f95d8f5240d467fa079a2746f6a3985c256a3daee948136752e3c9c
+  data.tar.gz: 75146aa7893ca074ada0c58b5ecfb20641615432c63090d3d8bd39bd0b6f6e480a6d7e558bbf45ac8003144a6fd224222fd7eeaac297571b522e255e43343472

data/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This project follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html) — `MAJOR.MINOR.PATCH`. Consumer Rails apps install the released RubyGems package with `gem "studio-engine", "~> 0.6"`; bumping the gem version and updating consumer lockfiles is a release.
 
+## 0.32.3 — 2026-08-09
+
+**New public CSS custom property: `--nav-bottom`.** `_head.html.erb` now
+publishes the page header's **bottom edge** in viewport coordinates alongside
+the existing `--nav-h`, which stays the header's **height**. Use them for
+different jobs:
+
+- `var(--nav-h)` — to size something as tall as the header.
+- `var(--nav-bottom)` — to **start** something underneath it.
+
+They are equal only when the header sits at the top of the viewport, which is
+why one was long used for the other. An app that renders chrome **above** the
+navbar — an environment banner before the `<header>` — pushes the header down,
+and a `fixed` overlay offset by `--nav-h` then rides up over the header by
+exactly the height of that chrome.
+
+**Fix — `components/_sidebar_panel` offsets from `--nav-bottom`.** The open
+sidebar panel overlapped the header by 47px on `mcritchie-industries`, covering
+the Log in button. Falls back to `var(--nav-h)` (then `6rem`), so a host that
+overrides `layouts/studio/_head` keeps today's geometry rather than collapsing.
+**No change for a consumer whose header already starts at the viewport top** —
+the two values converge there.
+
+Unlike `--nav-h`, `--nav-bottom` is **scroll-dependent**: chrome above the
+header scrolls away while a panel is open, and nothing locks body scroll. It
+republishes on a passive `scroll` listener behind a `requestAnimationFrame`
+throttle, bound once at script eval rather than per Turbo visit. A page with no
+`<header>` now releases the observed node, so a Turbo visit to a headerless page
+can no longer publish an all-zero rect from a detached element.
+
+**Note for hosts that override `components/_sidebar_panel`** — an app copy of
+that partial shadows the engine's, so it keeps the old `top:var(--nav-h, 6rem)`
+until updated. `mcritchie-studio` and `turf-monster` both carry such an override.
+
 ## 0.32.2 — 2026-08-09
 
 **Two public-page navigation fixes** (found by the industries sidebar-adoption

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

@@ -1,7 +1,18 @@
 <%# Shared fixed right-sidebar shell (lifted from the mcritchie-studio hub).
     Alpine-driven: `open` is an Alpine expression; the panel slides in from
     off-screen right under x-transition and positions beneath the sticky
-    header via the --nav-h custom property _head.html.erb publishes. %>
+    header via the --nav-bottom custom property _head.html.erb publishes.
+    --nav-bottom is the header's BOTTOM EDGE, not its height: the two differ
+    the moment an app renders chrome above the navbar (an environment banner
+    before the header), and positioning off the height put this panel over the
+    header by exactly that much.
+
+    The --nav-h fallback is NOT for a host pinning an older gem — an older gem
+    ships the old _head and the old panel together, so that path never runs.
+    It is reachable only when a host OVERRIDES layouts/studio/_head, in which
+    case --nav-bottom is never published and this degrades to the previous,
+    BUGGY geometry. That is a deliberate floor, not a safe default: it keeps an
+    overriding host at today's behaviour instead of collapsing to 6rem. %>
 <% id             = local_assigns.fetch(:id, nil) %>
 <% title          = local_assigns.fetch(:title, nil) %>
 <% open           = local_assigns.fetch(:open) %>
@@ -33,7 +44,7 @@
   x-transition:leave-start="translate-x-0"
   x-transition:leave-end="translate-x-full"
   class="<%= display_class %> fixed right-0 <%= width_class %> bg-surface border-l border-subtle shadow-2xl <%= z_class %> flex-col <%= panel_class %>"
-  style="top:var(--nav-h, 6rem);height:calc(100% - var(--nav-h, 6rem))"
+  style="top:var(--nav-bottom, var(--nav-h, 6rem));height:calc(100% - var(--nav-bottom, var(--nav-h, 6rem)))"
   role="<%= role %>"
   <% if labelledby %>aria-labelledby="<%= labelledby %>"<% elsif aria_label.present? %>aria-label="<%= aria_label %>"<% end %>>
   <div class="flex flex-col h-full">

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

@@ -96,19 +96,54 @@
   body { overflow-anchor: none; }
 </style>
 <script>
-  // studio-engine: publish the sticky header's live height as the --nav-h
-  // CSS variable so fixed/sticky elements below the navbar can position off
-  // it (e.g. top: var(--nav-h)) without hardcoded px. Tracks every resize,
-  // including scroll-collapse animations, and re-attaches after Turbo nav.
+  // studio-engine: publish the sticky header's live geometry as CSS custom
+  // properties so fixed/sticky elements can position off it without hardcoded
+  // px. Tracks every resize, including scroll-collapse animations, and
+  // re-attaches after Turbo nav.
+  //
+  //   --nav-h      the header's HEIGHT
+  //   --nav-bottom the header's BOTTOM EDGE, in viewport coordinates
+  //
+  // They are equal only when the header sits at the top of the viewport, which
+  // is why one was long mistaken for the other. An app that stacks chrome ABOVE
+  // the header — an environment banner rendered before the navbar, as
+  // mcritchie-industries does — pushes the header down, and a `fixed` overlay
+  // positioned at --nav-h then rides UP over the header by exactly the height of
+  // that chrome. Use --nav-h to size something as tall as the header; use
+  // --nav-bottom to start something underneath it.
   (function () {
     if (!window.ResizeObserver) return;
     var ro = null;
+    var current = null;
+    var queued = false;
     function publish(header) {
-      document.documentElement.style.setProperty('--nav-h', header.offsetHeight + 'px');
+      var style = document.documentElement.style;
+      style.setProperty('--nav-h', header.offsetHeight + 'px');
+      // Scroll-dependent where --nav-h is not: chrome above the header scrolls
+      // away while an overlay is open (nothing here locks body scroll), so this
+      // is republished on scroll. Clamped at 0 — once the sticky header is
+      // pinned at top:0 the two values converge, which is why a consumer whose
+      // header already starts at the viewport top sees no change at all.
+      style.setProperty('--nav-bottom', Math.max(0, header.getBoundingClientRect().bottom) + 'px');
+    }
+    function schedule() {
+      if (queued || !current) return;
+      queued = true;
+      window.requestAnimationFrame(function () { queued = false; if (current) publish(current); });
     }
     function attach() {
       var header = document.querySelector('header');
-      if (!header) return;
+      if (!header) {
+        // A page with no <header> — a bare error page, a print view. RELEASE the
+        // old node instead of returning: the scroll listener outlives the visit,
+        // and publishing from a DETACHED element yields an all-zero rect, which
+        // would drive --nav-h to 0px. Before this listener existed nothing ran
+        // after detach, so --nav-h simply kept its last value; keep that promise.
+        if (ro) { ro.disconnect(); ro = null; }
+        current = null;
+        return;
+      }
+      current = header;
       if (ro) ro.disconnect();
       ro = new ResizeObserver(function () { publish(header); });
       ro.observe(header);
@@ -116,6 +151,10 @@
     }
     document.addEventListener('DOMContentLoaded', attach);
     document.addEventListener('turbo:load', attach);
+    // Registered ONCE at script eval, not inside attach(), so a Turbo nav
+    // re-points `current` instead of stacking another listener per visit.
+    window.addEventListener('scroll', schedule, { passive: true });
+    window.addEventListener('resize', schedule, { passive: true });
   })();
 </script>
 

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.32.2"
+  VERSION = "0.32.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.32.2
+  version: 0.32.3
 platform: ruby
 authors:
 - Alex McRitchie