fix: anchor scroll-fade to page backdrop (--shell-gradient-base)

Themes with a gradient page background (bloom, cream) anchor it to
--shell-gradient-base, which differs from --background (e.g. bloom dark:
9,10,17 vs 10,10,10). Fading to --background left a faint seam against the
tinted backdrop. Fade to --shell-gradient-base instead, with --background
as a fallback for themes that don't define it (default).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: interacsean

packages/core/src/components/sidebar/sidebar-layout.tsx

@@ -124,9 +124,11 @@ export const SidebarLayout = (props: SidebarLayoutProps) => {
           >
             {/* Scroll-fade: a sticky strip that rides the top of the scroll
                 viewport so content dissolves into the pinned breadcrumb rather
-                than cutting off. It's a seamless gradient from the theme
-                background at full opacity to the SAME colour at zero alpha —
-                using relative-colour syntax rather than `transparent` (which is
+                than cutting off. It's a seamless gradient from the page
+                backdrop colour (--shell-gradient-base, which themes with a
+                gradient page background anchor to; falls back to --background)
+                at full opacity to the SAME colour at zero alpha — using
+                relative-colour syntax rather than `transparent` (which is
                 black·0 and would band to grey on light themes). h-8 with -mb-12
                 cancels its own height plus the flex gap so it adds no layout
                 space; it fades in once scrolled and is inert to pointer
@@ -135,7 +137,7 @@ export const SidebarLayout = (props: SidebarLayoutProps) => {
               aria-hidden
               style={{
                 backgroundImage:
-                  "linear-gradient(to bottom, var(--background), rgb(from var(--background) r g b / 0))",
+                  "linear-gradient(to bottom, var(--shell-gradient-base, var(--background)), rgb(from var(--shell-gradient-base, var(--background)) r g b / 0))",
               }}
               className="astw:pointer-events-none astw:sticky astw:top-0 astw:z-10 astw:-mb-12 astw:h-8 astw:shrink-0 astw:opacity-0 astw:transition-opacity astw:duration-200 astw:group-data-[scrolled]/scroll:opacity-100"
             />