studio-engine 0.126.0 → 0.127.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b282dc9ef2736f70ae7d985d1617ad22f61f25b6bba0a2b9391804e68c01069d
-  data.tar.gz: 3a0234c85465610eb31351583c0b0d743cf1a42f7db193d762869b040255143a
+  metadata.gz: 22ef2ab3094c82f6f447ee86455dac3e2c70b759ec3d58f2f1a887a347c4b1ad
+  data.tar.gz: 92c5bc2d6c5f53914e33d7c50623a076791ef50faff385b4e63218e3773eb6a6
 SHA512:
-  metadata.gz: ddf281dc8349069d3c2e8aea1a5084dd5030f0b927675ce20fd3a139565ca862e3d52faaa2e6d27a1d76aed9a9e6b566fb1174da3e6a73ffe559466118c914d9
-  data.tar.gz: 2d2f261cedcef59c97ce8f4af60b2942b4cfce84d3355fdd7f8604e52193f08c98c73b14592eabcfaf1e284f4b049aea7e7bbac51c3c5c600f745724822255fa
+  metadata.gz: 1420fb65a41535cc4c4ae4a1466a83fe46d02eca34c17ed26b1ef1fdfc1cf6ca934776f70a843380410593c7932bbc23c53fe2fe6f0b992e3bf5a19206b5e7f3
+  data.tar.gz: c88656c2c2363917fff41839b65c00ccc0f499d3c30c1a216ae783081f6712b44c200ef93500fceae04d99f6719db344ed0b213b742e104d632d9a0d063fc4d3

data/CHANGELOG.md

@@ -4,6 +4,28 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.127.0 — 2026-11-04
+
+### Added
+
+- **Link sidebar: a soft blurred edge.** `components/_sidebar_panel` takes `edge:`, default
+  false, and `components/_link_sidebar` passes `edge: true`. From `md` up, the panel draws a band
+  along its inner edge: 40px wide, a 6px blur, fading out into the page. It is a pseudo-element
+  of the panel, so it slides with it, leaves with it and takes no clicks. It adds no scrim and no
+  darkening. A browser with no `backdrop-filter` shows the panel plain. A host panel keeps its
+  plain edge unless it opts in. The navbar baseline is regenerated for the link sidebar's
+  `data-sidebar-edge` attribute.
+
+### Fixed
+
+- **`studio/_page_header` takes a long title, and any parent.** A long title used to squeeze
+  the tabs out and overflow the page. It now wraps and stops at three lines, and the tabs move
+  to their own line when it leaves them less than 6rem, so a page has no sideways overflow at
+  any width. A short title's row is unchanged. In a flex or grid parent with a sibling above
+  it, the row no longer shows its bar at rest: the controller measures the row's place from
+  the row there, because the sentinel sits at the parent's start. `docs/PAGE_HEADER.md` loses
+  both limits.
+
 ## 0.126.0 — 2026-11-04
 
 ### Changed

data/README.md

@@ -1092,9 +1092,13 @@ config.navbar_account_sidebar = { flag: "gearOpen", controls: %w[gear-sidebar ge
 
 ### Sidebar panel lead and close hook
 
-`components/_sidebar_panel` takes two opt-in locals; unset, the panel renders
+`components/_sidebar_panel` takes three opt-in locals; unset, the panel renders
 as before:
 
+- `edge: true` draws a soft blurred band along the panel's inner edge from `md`
+  up, through a `data-sidebar-edge` hook and engine.css. It takes no clicks. The
+  link sidebar passes it. It softens the page beside the panel, so leave it off
+  a panel kept open beside live content.
 - `title_html:` HTML in the title's place, for a panel whose header leads with
   a live status line. It is content, not a name: it never feeds
   `aria-labelledby` or `aria-label`, so a caller that passes it instead of

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

@@ -229,12 +229,19 @@ body.modal-open .studio-app-banner {
    the pinned stack has nothing to republish. The layout is owned here: the
    engine's views depend on no responsive utility a host may not have emitted.
    The fade is owned too, because .fade-edge-x is in the opt-in motion layer, and
-   it marks only an end that hides a tab (studio/controllers/page_header). */
+   it marks only an end that hides a tab (studio/controllers/page_header).
+
+   A LONG TITLE: the row wraps. The tabs' flex-basis is their floor, so a title that
+   leaves them less than that takes the first line and the tabs take the next, at
+   full width. A title too long for its line wraps, then stops at three lines. A short
+   title never reaches the floor, and its row is one line as before. */
 
 @utility page-header {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.75rem;
+  min-width: 0;
   padding-block: 0.5rem;
   border-block: 1px solid transparent;
   background-color: transparent;
@@ -256,7 +263,7 @@ body.modal-open .studio-app-banner {
   display: flex;
   align-items: baseline;
   gap: 0.5rem;
-  flex-shrink: 0;
+  flex: 0 1 auto;
   min-width: 0;
 }
 
@@ -265,6 +272,14 @@ body.modal-open .studio-app-banner {
   font-size: calc(var(--type-base, 16px) * 1.5);
   font-weight: var(--type-display-weight, 800);
   line-height: 1.25;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  /* Up and down only. A hidden x would shave a glyph's overhang off a short title. */
+  overflow-x: visible;
+  overflow-y: clip;
 }
 
 @utility page-header-meta {
@@ -278,7 +293,7 @@ body.modal-open .studio-app-banner {
 @utility page-header-tabs {
   --page-header-fade-start: 0px;
   --page-header-fade-end: 0px;
-  flex: 1 1 0%;
+  flex: 1 1 6rem;
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
@@ -1085,6 +1100,35 @@ html[data-page-transition="unfold-top"]::view-transition-new(root) { animation-n
       }
     }
 
+    /* THE SIDEBAR'S EDGE (components/_sidebar_panel, edge: true). A soft band along the panel's
+       inner edge, where the page behind is blurred and fades out to sharp, so the panel
+       stands off a busy page with no scrim and no darkening.
+
+       It is a pseudo-element of the panel: it moves with the slide, it leaves with the
+       panel, and it takes no clicks, so an outside click still reaches the page. A
+       transform on the panel does not start a new backdrop root, so it blurs the page.
+       40px wide, a 6px blur, held for the 10px nearest the panel, then fading to sharp.
+       right: 100% measures from the padding box, so the band runs over the panel's 1px
+       border. Stopping short of it left the border as a lit line beside the blur.
+
+       FROM md UP ONLY. Below that the link sidebar fills the width, so nothing sits
+       beside it, and a phone does not pay for a backdrop filter through the slide. A
+       browser with no backdrop-filter gets an empty box, so the panel is plain. */
+    @media (min-width: 768px) {
+      [data-sidebar-edge]::before {
+        content: "";
+        position: absolute;
+        inset-block: 0;
+        right: 100%;
+        width: 2.5rem;
+        pointer-events: none;
+        -webkit-backdrop-filter: blur(6px);
+        backdrop-filter: blur(6px);
+        -webkit-mask-image: linear-gradient(to left, #000 25%, transparent);
+        mask-image: linear-gradient(to left, #000 25%, transparent);
+      }
+    }
+
     /* THE SIDEBAR ROW'S DESCRIPTION (components/_link_sidebar, _geo_signpost). At rest
        a row with a description is one line, the height of any other row. On hover or
        keyboard focus the description fades in under the label, and no layout changes:

data/app/javascript/studio/controllers/page_header_controller.js

@@ -10,7 +10,7 @@
 // carries data-studio-controller-failed and engine.css gives the row its bar at
 // all times, so a stuck row never lays a transparent title over the page.
 import { Controller } from "@hotwired/stimulus"
-import { hiddenEnds, isStuck, revealBy } from "studio/page_header"
+import { hiddenEnds, isStuck, revealBy, sentinelMarksThePlace } from "studio/page_header"
 
 export default class extends Controller {
   connect() {
@@ -42,7 +42,7 @@ export default class extends Controller {
   }
 
   sync() {
-    const stuck = isStuck(this.row.getBoundingClientRect().top, this.element.getBoundingClientRect().top)
+    const stuck = isStuck(this.row.getBoundingClientRect().top, this.restTop())
     const ends = this.tabs ? hiddenEnds(this.tabs) : null
 
     this.row.toggleAttribute("data-stuck", stuck)
@@ -51,6 +51,20 @@ export default class extends Controller {
     this.tabs.toggleAttribute("data-fade-end", ends.end)
   }
 
+  // The top of the row's place in the flow. In a flex or grid parent only the row
+  // can say, so it is unstuck for one read. No frame paints in between, and the box
+  // keeps its size, so nothing moves and the stack republishes nothing.
+  restTop() {
+    if (sentinelMarksThePlace(getComputedStyle(this.element.parentElement).display)) {
+      return this.element.getBoundingClientRect().top
+    }
+
+    this.row.style.position = "static"
+    const top = this.row.getBoundingClientRect().top
+    this.row.style.position = ""
+    return top
+  }
+
   // Moves the tabs only: scrollIntoView would also move the page.
   revealOpenTab() {
     const open = this.tabs?.querySelector("[aria-current]")

data/app/javascript/studio/page_header.js

@@ -8,6 +8,13 @@ export function isStuck(rowTop, restTop) {
   return rowTop - restTop > 0.5
 }
 
+// Whether the sentinel marks the row's place. It is absolutely positioned, so in a
+// block parent it sits where the row starts. In a flex or grid parent it sits at the
+// parent's start instead, whatever is above the row.
+export function sentinelMarksThePlace(parentDisplay) {
+  return !/flex|grid/.test(parentDisplay)
+}
+
 // Which ends of the tabs hide a tab, so a fade marks only an end with more to see.
 export function hiddenEnds({ scrollLeft, clientWidth, scrollWidth }) {
   return {

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

@@ -150,6 +150,7 @@
       outside_action: close_action,
       escape_action: close_action,
       display_class: "hidden md:flex",
+      edge: true,
       role: "navigation",
       aria_label: sidebar_admin ? "Admin menu" : "Links menu" %>
 
@@ -164,5 +165,6 @@
       escape_action: close_action,
       display_class: "flex md:hidden",
       width_class: "w-full",
+      edge: true,
       role: "navigation",
       aria_label: sidebar_admin ? "Admin menu" : "Links menu" %>

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

@@ -19,13 +19,17 @@
     would cover the expanded header. engine.css (THE PINNED EDGE ON THE SCROLL
     TIMELINE) moves it with the header on the scroll timeline instead.
 
-    Two opt-in locals (unset, the panel renders as it did in 0.113.0):
+    Three opt-in locals (unset, the panel renders as it did in 0.113.0):
       title_html  the header's LEAD SLOT: HTML in the title's place, for a panel
                   whose lead is a live status line rather than a label. It is
                   content, NOT a name: it never feeds aria-labelledby or
                   aria-label, so a caller that passes it instead of `title` must
                   pass aria_label, or the panel has no accessible name. `title`
                   wins when both are passed. Escaped unless html_safe.
+      edge        true stamps data-sidebar-edge, the soft blurred band along the
+                  panel's inner edge, drawn by engine.css (THE SIDEBAR'S EDGE) from md
+                  up. It softens the page beside the panel, so it suits a menu that
+                  opens over the page, not a panel kept open beside live content.
       close_hook  true stamps the close button data-sidebar-panel-close="<id>"
                   too, so a host's own document handler can match the button
                   to its panel by id. Needs `id`; without one it adds nothing.
@@ -49,6 +53,7 @@
 <% aria_label     = local_assigns.fetch(:aria_label, title) %>
 <% labelledby     = id.present? && title.present? ? "#{id}-title" : nil %>
 <% close_hook     = local_assigns.fetch(:close_hook, false) && id.present? %>
+<% edge           = local_assigns.fetch(:edge, false) %>
 
 <aside
   <% if id.present? %>id="<%= id %>"<% end %>
@@ -76,6 +81,9 @@
   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-bottom, var(--nav-h, 6rem));height:calc(100% - var(--nav-bottom, var(--nav-h, 6rem)))"
   data-pin-edge
+  <% if edge %>
+  data-sidebar-edge
+  <% end %>
   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/studio/_page_header.html.erb

@@ -33,9 +33,11 @@
 
     THE SENTINEL stays at the row's place in the flow, and the row's distance from
     it is what "stuck" means, on every kind of header. It is absolutely positioned,
-    so a space-y parent adds nothing for it. It carries the controller, so the row
-    keeps its data-studio-controller for the page's own. So the row carries no top
-    margin: the space above it belongs to its container. %>
+    so a space-y parent adds nothing for it. In a flex or grid parent it sits at the
+    parent's start, so the controller measures the row's place from the row. It
+    carries the controller, so the row keeps its data-studio-controller for the
+    page's own. So the row carries no top margin: the space above it belongs to its
+    container. %>
 <div class="page-header-sentinel" data-studio-controller="page-header" aria-hidden="true"></div>
 <%= content_tag(tabs.any? ? :nav : :div,
       class: "page-header sticky #{row_class}".strip,

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.126.0"
+  VERSION = "0.127.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.126.0
+  version: 0.127.0
 platform: ruby
 authors:
 - Alex McRitchie
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-11-04 00:00:00.000000000 Z
+date: 2026-11-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails