studio-engine 0.62.6 → 0.63.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fa64bc8c9da93f3beaede057f50b905755a4d62e549aa83d32d154fd6f2dbf4c
-  data.tar.gz: 9e3fc2011c4cada24b7d93f08a3e4e54fad76df242a8e3986b83bb0e8a742126
+  metadata.gz: 7fcb787be0caeb8c975281d334f56a0d0ce699dbd25851b59948de0e5c6a87a4
+  data.tar.gz: a0b21daec66caf0110d3fc6f33f311a678b4216bda5b7d033011d84465ec54d3
 SHA512:
-  metadata.gz: 842b7b8f102010ef77ee303a763c42dfceb047ccb3d8cdce2b06e44a95d97fc8ca91a03207eecb6b0c9340f9434baf071ad6914e6cc7f6910a8889f8300b2a8e
-  data.tar.gz: dea3a8a030028885d614787882af0ceaec4bda5a50a175e863f5a2144d44b3f958a9d9d2594c7dee592365af0636e748239ed1b11579bf92bc91ae28da0d637d
+  metadata.gz: 26fdea81fbf8edcb85f0e6121c9bfa8b15dc34cf2b9166ebdd3cf158e2c09636d6ea5401baf203f293f6c2b2a866a2ddecdeacdd326c85bb3df6fa058af16800
+  data.tar.gz: 2493f082d861b7a8dadf60963df93c09aac10da94b6f0a7064644600b7da5bbd0079d0b58d4d1d1dbda717881f63af9fc53a5fdb9eab0c0ad644c1e7eaf5fb0b

data/CHANGELOG.md

@@ -4,6 +4,58 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+### Changed
+
+- **The navbar collapse primitive is broadcastable, rate-limited, and cheap per
+  frame.** Three defects in the primitive as first landed, none of which a
+  consuming app should inherit:
+
+  **The band table shipped from the wrong file.** The `.nav-shell` `--nav-*`
+  sizes were inline in `layouts/_navbar.html.erb`, so only an app rendering that
+  partial got them — and **three of six apps fork the navbar**
+  (`turf-monster`, `mcritchie-studio`, `moms-app`), each left to hand-write its
+  own. That is precisely how four independent copies of this collapse came to
+  exist. They now ship from `engine.css`, which every engine-consuming app
+  imports, inside `@layer utilities` so a consumer's own layer still wins on
+  source order. The primitive is now three layers, each on a channel reaching
+  further than the last: **mechanism** in `layouts/studio/_head` (every app
+  renders it) → **sizes** in `engine.css` (every app imports it) → **markup** in
+  `layouts/_navbar` (only apps that do not fork). Adopting the collapse in a
+  hand-written header is `nav-shell` + `x-data="navCollapse()"` plus overrides
+  for only the endpoints that differ.
+
+  **A flick collapsed the header in one frame.** Progress is a pure function of
+  scroll position, so a scrollY jump of 90px moved the header's whole range with
+  it. Measured in `turf-monster` at 390×844 — 8px/frame walked 3.9px of header,
+  24px/frame 14.1px, a momentum flick **39.0px, the entire 178 → 139 collapse**.
+  Found on a phone, by a person, with every tier here green. `navCollapse` now
+  clamps the per-frame step: `maxStep = 3 × --nav-max-step ÷ --nav-ramp`,
+  derived from the ramp's documented 3× relation to the collapse total, so one
+  number (`5px`) covers every band. **A slow scroll never reaches the clamp**, so
+  the deliberate case is not approximated — it is the same arithmetic. The snap
+  paths (short-page guard, `prefers-reduced-motion`) bypass it, because each is a
+  decision rather than motion. An unfinished clamp schedules its own frame; once
+  the finger lifts nothing else will, and the collapse would otherwise freeze
+  where the clamp left it.
+
+  **The geometry publisher had become per-frame.** The `--nav-h` / `--nav-bottom`
+  `ResizeObserver` called `publish()` directly rather than through its own rAF
+  coalescer. That was fine while the header only resized during a 300ms
+  transition; the collapse made it resize every scroll frame, each one forcing
+  layout and then writing two **inherited** custom properties on
+  `documentElement`. Measured at 6× CPU throttle: frames over 20ms were **13/24
+  through the ramp vs 0/24 past it** (median 26ms vs 8ms), and ablating the
+  observer alone gave 0/24 and median 13ms — it cost ~2.6× the reflow it was
+  reacting to. It now routes through `schedule()`, both reads are hoisted above
+  both writes (a read after a write to `documentElement` forces a fresh layout),
+  and an unchanged value skips its write entirely.
+
+  `nav_offset_contract_test` was rebound rather than relaxed: it now captures the
+  local each source is read into and requires *that* local to be the one written,
+  so the source-swap mutation it was written for still dies, and it gained a
+  guard on the read-before-write order.
+
+
 ### Breaking
 
 - **The age-gate DOB modal is renamed, and the refusal moved to its own card.**
@@ -73,6 +125,23 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
   absent rather than rendered dead) and a back link that returns to the birthday
   card. Displays `min_age` / `state`; computes no eligibility of its own.
 
+- **`studio/modals/_wallet_connect` — the Connect Wallet picker, engine-owned.**
+  The reown-style wallet chooser existed three times before this — turf-monster's
+  226 lines, mcritchie-studio's 107 and the style guide's 176 — sharing no code.
+  It is one partial now, and `style/modals/_wallet_connect` CONFIGURES it rather
+  than porting it, so the specimen and production cannot drift again. Locals:
+  `store` (default `"modals"`), `connect_fn` (default `"solanaConnectAndVerify"`),
+  `title`, `extra_data` (extra x-data members as a brace-less JS fragment), plus a
+  BLOCK for the pre-connect slot. App behaviour arrives as optional hook METHODS
+  defined in `extra_data`, each called only if it exists: `onInit`, `canPick`,
+  `verifyArgs`, `onConnected(result)`, `onDeepLink`, `onBack`. Carries the mobile
+  Phantom single-row fix (one Phantom row in every state) and a `role="alert"` on
+  the connect error that both app copies lacked.
+
+  **NO SHIPPING CONSUMER RENDERS IT YET.** Both apps still ship their own copy and
+  adopt this one after it releases, so the green consumer CI here says they still
+  compile — it says nothing about this partial.
+
 ### Fixed
 
 - **The engine navbar's collapse tracks the finger instead of a clock.**

data/README.md

@@ -238,6 +238,31 @@ the block:
 <% end %>
 ```
 
+**Connect Wallet — `studio/modals/wallet_connect`.** The reown-style wallet
+picker, engine-owned so the apps stop each keeping a copy. Register it like any
+other modal and configure it with locals:
+
+```erb
+<template x-if="$store.modals.current().id === 'wallet-connect'">
+  <%= render "studio/modals/wallet_connect" %>
+</template>
+```
+
+Locals: `store` (default `"modals"`), `connect_fn` (the window function that
+connects AND verifies, default `"solanaConnectAndVerify"`), `title`, `slot` /
+`slot_locals` (a partial rendered before the wallet rows — an app's legal-age
+attestation goes here), and `extra_data` (a JS fragment merged into the
+component's `x-data`).
+
+App behaviour arrives as optional **hook methods** defined in `extra_data`, each
+called only when present: `onInit`, `canPick` (falsy aborts a pick or a deep
+link), `verifyArgs` (merged into the connect options), `onConnected(result)`,
+`onDeepLink`, `onBack`. An app that needs none passes no `extra_data`.
+
+The slot is a **named local, not a block** — `block_given?` is always true inside
+a compiled Rails partial, so a block-shaped slot yields the captured page body
+into the card whenever no block is passed.
+
 **Page-scoped hosts — `studio/modals/scoped_host`.** When a page must bring its
 own modals (because not every consuming app renders a shared host, and the ones
 that do register their own modal set), render a second host on its own Alpine
@@ -323,6 +348,42 @@ against this (unknown keys and gutted registries fall back to the built-in
 `'pop'`), but your other custom keys are lost unless the late script merges
 into the existing object instead of assigning over it.
 
+`window.StudioModals.CARD_WIDTHS` is the **card-width registry**, and it works
+exactly like the animation one: define it **before** the host renders and your
+entries merge over the engine defaults. Keys are modal ids, values are the
+Tailwind `max-w-*` class that card should use. `DEFAULT_CARD_WIDTH` (default
+`max-w-sm`) covers every id you don't name:
+
+```html
+<script>
+  window.StudioModals = window.StudioModals || {};
+  window.StudioModals.CARD_WIDTHS = { 'wallet-setup': 'max-w-md' };
+</script>
+```
+
+By modal **id** rather than by prop on purpose: a card opened from several
+places would have to carry the prop at every opener, and one miss renders the
+same card at two widths depending on how the user got there. The width is
+resolved inside `cardClasses()`, so the card element carries no static
+`max-w-*` — don't add one, or the winner is left to stylesheet source order.
+
+**App-wide registrations — `app/views/modals/_host_extras.html.erb`.** The
+block above registers modals per *call site*. An app that renders the host from
+more than one layout (a live one and, say, an `/admin` preview harness) would
+have to repeat every registration in each. Define this optional partial instead
+and the host renders it inside the card on **every** render path:
+
+```erb
+<%# app/views/modals/_host_extras.html.erb %>
+<template x-if="$store.modals.current().id === 'cosign-rejected'">
+  <%= render "modals/cosign_rejected" %>
+</template>
+```
+
+It's a convention, not a local — an app that ships no such file renders nothing
+and needs no call-site change. Use it for modals that belong to the *app*; keep
+page-specific ones in the block where their call site can see them.
+
 `window.StudioModals.holdAtLeast(ms)` returns a thenable that resolves no
 sooner than `ms` after creation — stamp it when a processing view becomes
 visible so fast operations don't flash the spinner.

data/app/assets/stylesheets/studio/sticky_table_header.css

@@ -25,7 +25,10 @@
   display: none;
   overflow: hidden;
   pointer-events: none;
-  z-index: 45;
+  /* --z-sticky: it fakes a sticky <thead>, so a side panel or a menu opened over
+     the table still covers it. The old bare 45 sat between the panel and dropdown
+     tiers for no recorded reason. */
+  z-index: var(--z-sticky, 30);
 }
 
 .sticky-table-header-clone table {

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

@@ -1137,7 +1137,30 @@
    ========================================================================== */
 
 /* Scroll lock applied by the store's _sync() when the stack is non-empty. */
-body.modal-open { overflow: hidden; }
+/* THE SCROLL LOCK GOES ON THE ELEMENT THAT ACTUALLY SCROLLS.
+   Measured on a consumer, 2026-08-27, before this change: with a modal open a
+   real wheel gesture still scrolled the page (600px → 1000px) and the sticky
+   header unpinned and slid away with it. The lock had been inert there for as
+   long as the link sidebar had shipped.
+
+   `body { overflow: hidden }` locks the viewport only when it PROPAGATES to
+   it, and body's overflow propagates only while `html` is `overflow: visible`.
+   This gem's own link-sidebar partial sets `html { overflow-x: clip }` so the
+   off-canvas panel never flashes a scrollbar — correct on its own terms, clip
+   creates no scroll container — but it ends the propagation. The lock then
+   stopped locking the viewport and started making BODY a scroll container
+   instead: one holding scrollTop 0 forever while the viewport scrolled past
+   it. Every `position: sticky` child of body then has a scrollport that never
+   moves, which is why the header unpinned and why the modal-open banner lift
+   had nothing to pin against.
+
+   So lock `html`, and put body back to `visible` so it is not a second scroll
+   container. An app that sets no overflow on html is unaffected — locking html
+   is correct there too; it was simply never the only thing that worked.
+
+   :has() is the trigger because the class lands on body, not html. */
+html:has(body.modal-open) { overflow: hidden; }
+body.modal-open { overflow: visible; }
 
 /* Drain-bar keyframe — a translucent overlay sweeping a CTA button over its
    countdown (studio/modals/blocks/_cta_redirect + _success_card cta_drain). */

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

@@ -28,6 +28,91 @@
   their local copies for this import.
 */
 
+/* -- Layer scale ------------------------------------------------------------
+   The ONE stacking order every Studio app shares. Read the ORDER, not the
+   number: the tier is the contract, the integer is an implementation detail.
+
+   BELOW 100 is page furniture that never blocks another layer, and those tiers
+   line up with Tailwind's own z-10..z-50 — `z-20` and var(--z-raised) are the
+   same rung, so either spelling is fine down here.
+
+   AT 100 AND UP every tier is chrome that can COVER other chrome, and that is
+   where a raw integer stops being readable. The defect this scale was built
+   from: a docked bottom bar at inline `z-index:9999` painting over a modal
+   backdrop at `z-[120]`, with 9,798 unclaimed values between them and no
+   ladder anywhere that said which should win. Three layers were tied at 130
+   and two at 10000, each tie resolved by source order rather than by anyone's
+   decision.
+
+   Consumers override a TIER in their own :root (loaded after this file) — the
+   same seam --studio-toast-z has always had. Override the tier, never the call
+   site: a bespoke number at a call site is how the ladder rotted the first time.
+*/
+:root {
+  --z-behind:       -1;  /* decoration painted behind its own box */
+  --z-base:          0;  /* fixed page backgrounds and their scrims */
+  --z-content:      10;  /* raised content inside a card */
+  --z-raised:       20;  /* hover lifts, in-page click catchers */
+  --z-sticky:       30;  /* in-page sticky headers, bars pinned under the nav */
+  --z-panel:        40;  /* in-page side panels */
+  --z-dropdown:     50;  /* menus and anchored popovers */
+
+  --z-docked:      100;  /* docked bottom bar — must never cover a modal */
+  --z-nav:         110;  /* the pinned navbar */
+  --z-drawer:      150;  /* full-cover drawers (link sidebar, gear sidebar) */
+  --z-modal:       200;  /* modal backdrop + card — THE app blocker */
+  --z-lightbox:    210;  /* a lightbox opened from inside a modal */
+  --z-alert:       300;  /* transient overlays that must not be missed */
+  --z-toast-blur:  399;  /* the frosted halo behind the toasts */
+  --z-toast:       400;  /* toasts */
+  --z-banner:      500;  /* environment / DEV MODE — reachable mid-modal */
+  --z-tooltip:     600;  /* tooltips on the banner, so they clear it */
+}
+
+/* The environment / impersonation bars stay in NORMAL FLOW at rest
+   (banners/_stack records why: pinning them in the RESTING state needs one
+   pinned sibling to measure the other, and the measured version visibly
+   jumped). Flow costs them a stacking level, so the modal backdrop dims the DEV
+   MODE and Email buttons exactly when a QA session needs them.
+
+   So both the level AND the pin are scoped to `body.modal-open` — set by every
+   modal host in this repo and by the consumer forks of it, and the one state
+   where each is free:
+
+     · the LEVEL is free because that class also locks body scroll
+       (engine-motion.css), so the bars can never scroll up behind the pinned
+       navbar while they outrank it;
+     · the PIN is free because a frozen page cannot jump. The measurement
+       problem banners/_stack records is a RESTING-state problem — two pinned
+       siblings of unknown height must lay out adjacently, so one has to measure
+       the other. Here they deliberately OVERLAP: the navbar is dimmed under a
+       backdrop and is not the reader's business.
+
+   With no modal open the bars are unpositioned, exactly as before.
+
+   sticky, NOT fixed, and the difference is load-bearing. A LEVEL ALONE IS NOT
+   THE FIX: the first cut used `position: relative`, which escapes z-index:auto
+   and reads correctly at the top of a page — and leaves the bars exactly where
+   they were for a reader who has scrolled, which is every reader who did
+   anything before opening a modal. Measured on a consumer board at scrollY 900
+   with the modal open: relative put the stack at top -900, off screen; sticky
+   put it at top 0. `fixed` also pins, but pulls the stack out of flow and the
+   page jumps up by its height — sticky keeps the space reserved, so applying it
+   on open shifts nothing (document height identical before and after, measured).
+
+   THE ONE REQUIREMENT ON THE CONSUMER: render the bars as a SIBLING of the
+   navbar, before it — not inside <header>. A pinned header carrying a z-index
+   is a stacking context, and a descendant's z-index is clamped inside it, so a
+   bar nested in the header composites at the HEADER's level no matter what it
+   asks for. --nav-bottom already reports the header's live bottom edge for
+   anything that needs to sit under chrome stacked above it. */
+body.modal-open .studio-bar-stack,
+body.modal-open .studio-app-banner {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-banner, 500);
+}
+
 /* -- Surfaces -------------------------------------------------------------- */
 
 @utility card {
@@ -193,12 +278,16 @@
 
 /* -- Link sidebar (out-of-the-box navigation) ------------------------------
    Paired with components/_link_sidebar + _link_sidebar_trigger and the
-   Studio.sidebar_sections config. The layer sits above the sticky header
-   (z-50) and the modal host. Inert without the panel in the DOM, so apps
-   that declare no sections are unaffected. */
+   Studio.sidebar_sections config. A full-cover drawer, so it takes the shared
+   --z-drawer tier: above the navbar and any docked bottom bar, BELOW the modal
+   host. It used to be a bare 10000, which put it over every modal and tied it
+   exactly with turf-monster's gear sidebar — two unrelated drawers on one
+   number, resolved by source order. A modal opened FROM a drawer is the newer
+   task and should win. Inert without the panel in the DOM, so apps that declare
+   no sections are unaffected. */
 
 @utility studio-link-sidebar-layer {
-  z-index: 10000;
+  z-index: var(--z-drawer, 150);
 }
 
 /* Alpine's pre-init cloak. Engine partials (sidebar panels, dropdowns, the
@@ -283,3 +372,118 @@
     animation: none !important;
   }
 }
+
+/* === THE NAVBAR COLLAPSE BAND TABLE =====================================
+   LAYER 2 OF THE PRIMITIVE, and it lives here rather than in
+   layouts/_navbar.html.erb for one reason: every engine-consuming app imports
+   this stylesheet, but only some render that partial. Three of six FORK the
+   navbar (turf-monster, mcritchie-studio, moms-app), and while the table sat
+   inline each fork had to hand-write its own — which is exactly how four
+   independent copies of this collapse came to exist.
+
+   The primitive is three layers, each on a channel that reaches further than
+   the last:
+
+     1. MECHANISM  layouts/studio/_head   @property --nav-p + navCollapse()
+                                          — every app renders it
+     2. SIZES      this file              the .nav-shell band table
+                                          — every app imports it
+     3. MARKUP     layouts/_navbar        the header itself
+                                          — only apps that do not fork
+
+   So adopting the collapse in a hand-written header is: put `nav-shell` and
+   x-data="navCollapse()" on it, and override only the endpoints that differ
+   from the defaults below.
+
+   LAYERED ON PURPOSE. These are DEFAULTS, so a consuming app has to be able to
+   beat them, and unlayered CSS beats every layered rule regardless of
+   specificity — shipping them bare would make the engine's numbers
+   unoverridable by the apps they exist to serve. Inside @layer utilities the
+   engine's import comes FIRST in a consumer's application.css, so the
+   consumer's own `@layer utilities` block wins on source order at equal
+   specificity, which is the whole "override only what differs" promise.
+   `.nav-shell .nav-logo` still outranks a bare `.w-12` on specificity, so an
+   app that DOES put a size utility on its logo has to mean it. */
+@layer utilities {
+    .nav-title { display: flex; gap: 0.25em; align-items: baseline; }
+
+    /* THE COLLAPSE BAND TABLE. Each band is the two ENDPOINTS of its collapse
+       written once, not two rule sets that have to be kept in step — the old
+       shape, where a base rule and an `.is-scrolled` override each carried half
+       the answer and `transition: font-size` guessed the middle.
+
+       --nav-ramp is the scroll distance the collapse is spread over, and it is
+       3x that band's collapse TOTAL (mobile: 8px of logo + 32px of padding =
+       40px, ramp 120px; desktop: 16px + 32px = 48px, ramp 144px). That ratio is
+       what puts the peak content speed near 1.5x rather than 2x — see the
+       navCollapse comment in layouts/studio/_head. Retune one and retune the
+       other, or the easing stops matching the geometry.
+
+       Endpoints below are UNCHANGED from the threshold build. This is the same
+       navbar; only the path between the ends is new.
+
+       EVERY var() CARRIES A FALLBACK OF 0, and it is inert where @property works.
+       navCollapse only WRITES --nav-p when progress changes, so on an unscrolled
+       page it is never written at all and the registration is doing 100% of the work
+       on first paint. In a browser that ignores @property, an unregistered custom
+       property is the guaranteed-invalid token and every calc() here goes
+       invalid-at-computed-value-time — measured: padding-block 0 and the logo at its
+       intrinsic size. `var(--nav-p, 0)` degrades to "always expanded" instead, which
+       is the pre-collapse navbar rather than a broken one. It costs nothing where
+       @property is honoured, which is why it is written unconditionally. (Not a NEW
+       exposure: the built Tailwind v4 already ships 59 @property registrations, so
+       that browser band is unsupported engine-wide.) */
+    .nav-shell {
+      --nav-ramp: 144px;
+      /* How far the collapse may travel in ONE animation frame, as header
+         height. Position-linked progress alone puts the WHOLE collapse in a
+         single frame on a flick — measured 39px in turf-monster, the full
+         178 -> 139. navCollapse() converts this to --nav-p units off
+         --nav-ramp's 3x relation to the collapse total, so one number covers
+         every band. */
+      --nav-max-step: 5px;
+      --nav-pad: calc(1.5rem - 1rem * var(--nav-p, 0));                 /* py-6 -> py-2 */
+      --nav-logo-size: calc(3rem - 1rem * var(--nav-p, 0));             /* 48px -> 32px */
+      --nav-title-size: calc(1.875rem - 0.625rem * var(--nav-p, 0));    /* 3xl  -> xl   */
+      --nav-title-lead-size: var(--nav-title-size);                  /* one line here */
+      /* THE LINE BOX, and the reason this variable exists at all. `text-3xl` and
+         `text-xl` are FONT-SIZE AND LINE-HEIGHT PAIRS (1.875rem/2.25rem and
+         1.25rem/1.75rem). Carrying only the font-size across dropped the
+         line-height to whatever the h1 inherited, and the header grew 9px at every
+         width >= 768px — expanded 84px -> 93px, measured. Collapsed was unaffected
+         because the 32px logo, not the title, sets the row height there, which is
+         exactly why a one-endpoint check would have missed this. Mobile was clean
+         only because its band already declared line-height: 1.15 explicitly.
+         Interpolate the PAIR or the endpoints move. */
+      --nav-title-lead: calc(2.25rem - 0.5rem * var(--nav-p, 0));       /* 36px -> 28px */
+    }
+    .nav-row { padding-block: var(--nav-pad); }
+    .nav-shell .nav-logo { width: var(--nav-logo-size); height: var(--nav-logo-size); }
+    .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); }
+
+    @media (max-width: 767px) {
+      .nav-title { flex-direction: column; gap: 0; }
+      .nav-title span:first-child { margin-bottom: -4px; }
+      .nav-logo-link { gap: 0.5rem !important; }
+      .nav-shell {
+        --nav-ramp: 120px;
+        --nav-logo-size: calc(3rem - 0.5rem * var(--nav-p, 0));         /* 48px -> 40px   */
+        --nav-title-size: calc(1.25rem - 0.25rem * var(--nav-p, 0));    /* 20px -> 16px   */
+        --nav-title-lead-size: calc(1.5rem - 0.35rem * var(--nav-p, 0));/* 24px -> 18.4px */
+        /* Mobile stacks the two words, so its line box is a RATIO, not the desktop
+           pair. Declared here rather than as a `line-height` on .nav-title, because
+           `.nav-shell .nav-title` outranks a bare `.nav-title` on specificity no
+           matter which comes later in the sheet — one declaration site, like every
+           other endpoint in this table. */
+        --nav-title-lead: 1.15;
+      }
+    }
+    @media (max-width: 399px) {
+      .nav-logo-link { gap: 0.25rem !important; }
+      .nav-shell {
+        --nav-title-size: calc(1.1rem - 0.2rem * var(--nav-p, 0));      /* 17.6px -> 14.4px */
+        --nav-title-lead-size: calc(1.3rem - 0.3rem * var(--nav-p, 0)); /* 20.8px -> 16px   */
+      }
+    }
+}

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

@@ -64,82 +64,14 @@
        mirror the col's clamps: the item is flex-shrink-0, so without them a
        long nowrap username sizes the column past a narrow viewport. */
     .user-nav-fit { max-width: 14rem; }
-    .nav-title { display: flex; gap: 0.25em; align-items: baseline; }
-
-    /* THE COLLAPSE BAND TABLE. Each band is the two ENDPOINTS of its collapse
-       written once, not two rule sets that have to be kept in step — the old
-       shape, where a base rule and an `.is-scrolled` override each carried half
-       the answer and `transition: font-size` guessed the middle.
-
-       --nav-ramp is the scroll distance the collapse is spread over, and it is
-       3x that band's collapse TOTAL (mobile: 8px of logo + 32px of padding =
-       40px, ramp 120px; desktop: 16px + 32px = 48px, ramp 144px). That ratio is
-       what puts the peak content speed near 1.5x rather than 2x — see the
-       navCollapse comment in layouts/studio/_head. Retune one and retune the
-       other, or the easing stops matching the geometry.
-
-       Endpoints below are UNCHANGED from the threshold build. This is the same
-       navbar; only the path between the ends is new.
-
-       EVERY var() CARRIES A FALLBACK OF 0, and it is inert where @property works.
-       navCollapse only WRITES --nav-p when progress changes, so on an unscrolled
-       page it is never written at all and the registration is doing 100% of the work
-       on first paint. In a browser that ignores @property, an unregistered custom
-       property is the guaranteed-invalid token and every calc() here goes
-       invalid-at-computed-value-time — measured: padding-block 0 and the logo at its
-       intrinsic size. `var(--nav-p, 0)` degrades to "always expanded" instead, which
-       is the pre-collapse navbar rather than a broken one. It costs nothing where
-       @property is honoured, which is why it is written unconditionally. (Not a NEW
-       exposure: the built Tailwind v4 already ships 59 @property registrations, so
-       that browser band is unsupported engine-wide.) */
-    .nav-shell {
-      --nav-ramp: 144px;
-      --nav-pad: calc(1.5rem - 1rem * var(--nav-p, 0));                 /* py-6 -> py-2 */
-      --nav-logo-size: calc(3rem - 1rem * var(--nav-p, 0));             /* 48px -> 32px */
-      --nav-title-size: calc(1.875rem - 0.625rem * var(--nav-p, 0));    /* 3xl  -> xl   */
-      --nav-title-lead-size: var(--nav-title-size);                  /* one line here */
-      /* THE LINE BOX, and the reason this variable exists at all. `text-3xl` and
-         `text-xl` are FONT-SIZE AND LINE-HEIGHT PAIRS (1.875rem/2.25rem and
-         1.25rem/1.75rem). Carrying only the font-size across dropped the
-         line-height to whatever the h1 inherited, and the header grew 9px at every
-         width >= 768px — expanded 84px -> 93px, measured. Collapsed was unaffected
-         because the 32px logo, not the title, sets the row height there, which is
-         exactly why a one-endpoint check would have missed this. Mobile was clean
-         only because its band already declared line-height: 1.15 explicitly.
-         Interpolate the PAIR or the endpoints move. */
-      --nav-title-lead: calc(2.25rem - 0.5rem * var(--nav-p, 0));       /* 36px -> 28px */
-    }
-    .nav-row { padding-block: var(--nav-pad); }
-    .nav-shell .nav-logo { width: var(--nav-logo-size); height: var(--nav-logo-size); }
-    .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); }
-
     @media (min-width: 400px) { .user-nav-col { width: 15rem; } .user-nav-fit { max-width: 15rem; } }
     @media (min-width: 768px) { .user-nav-col { width: 20rem; } .user-nav-fit { max-width: 20rem; } }
-    @media (max-width: 767px) {
-      .nav-title { flex-direction: column; gap: 0; }
-      .nav-title span:first-child { margin-bottom: -4px; }
-      .nav-logo-link { gap: 0.5rem !important; }
-      .nav-shell {
-        --nav-ramp: 120px;
-        --nav-logo-size: calc(3rem - 0.5rem * var(--nav-p, 0));         /* 48px -> 40px   */
-        --nav-title-size: calc(1.25rem - 0.25rem * var(--nav-p, 0));    /* 20px -> 16px   */
-        --nav-title-lead-size: calc(1.5rem - 0.35rem * var(--nav-p, 0));/* 24px -> 18.4px */
-        /* Mobile stacks the two words, so its line box is a RATIO, not the desktop
-           pair. Declared here rather than as a `line-height` on .nav-title, because
-           `.nav-shell .nav-title` outranks a bare `.nav-title` on specificity no
-           matter which comes later in the sheet — one declaration site, like every
-           other endpoint in this table. */
-        --nav-title-lead: 1.15;
-      }
-    }
-    @media (max-width: 399px) {
-      .nav-logo-link { gap: 0.25rem !important; }
-      .nav-shell {
-        --nav-title-size: calc(1.1rem - 0.2rem * var(--nav-p, 0));      /* 17.6px -> 14.4px */
-        --nav-title-lead-size: calc(1.3rem - 0.3rem * var(--nav-p, 0)); /* 20.8px -> 16px   */
-      }
-    }
+    /* The COLLAPSE band table used to live here, which meant only an app
+       rendering THIS partial got it. Three of six apps fork the navbar, so each
+       was left to hand-write its own — the way four independent copies happened
+       in the first place. It ships from engine.css now (every consuming app
+       imports it), so a forking app adopts the collapse with `nav-shell` +
+       x-data="navCollapse()" and overrides only the endpoints that differ. */
   </style>
   <div class="nav-row flex items-center">
     <%# Left side: logo + nav %>

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

@@ -12,10 +12,13 @@
 
 <style>
   /* Z-indexes are CSS-var-driven so consumer apps can override without
-     !important. The defaults (60 / 55) sit just above typical sticky-nav
-     baselines (50). Apps with higher navbars set --studio-toast-z and
-     --studio-toast-blur-z in :root. */
-  #toast-container { z-index: var(--studio-toast-z, 60); }
+     !important. The per-app names stay — they are the published seam — but the
+     DEFAULT now comes from the shared layer scale in engine.css rather than a
+     bare 60/55 that sat below every app navbar. A toast is the one thing that
+     must surface over an open modal, so --z-toast is above --z-modal and an app
+     that never overrides gets that for free. Apps that DO override should set
+     the tier (--z-toast) instead, and drop the per-component name. */
+  #toast-container { z-index: var(--studio-toast-z, var(--z-toast, 400)); }
   .toast-shadow-all {
     box-shadow: 0 0 30px rgba(0,0,0,0.4), 0 0 10px rgba(0,0,0,0.2);
   }
@@ -62,7 +65,7 @@
     mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0) 100%);
     -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0) 100%);
     pointer-events: none;
-    z-index: var(--studio-toast-blur-z, 55);
+    z-index: var(--studio-toast-blur-z, var(--z-toast-blur, 399));
     transition: opacity 0.5s ease;
     background: rgba(255, 255, 255, 0.15);
   }