@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/components/app-shell/ProductShell.svelte

@@ -0,0 +1,668 @@
+<script lang="ts">import { ScrollArea } from "../ui/scroll-area";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarProvider, SidebarRail } from "../ui/sidebar";
+import { SharedModeWatcher } from "../ui/mode-switcher";
+import SidebarNavigation from "./SidebarNavigation.svelte";
+import AppSwitcherRail from "./AppSwitcherRail.svelte";
+import AppMenuChip from "./AppMenuChip.svelte";
+import ShellStyleMenu from "./ShellStyleMenu.svelte";
+// A WebGL enhancement that only runs after mount, so it loads on demand and
+// stays out of every app's initial JS.
+const loadAmbientCanvas = () => import("./ShellAmbientCanvas.svelte");
+import { createThemePresetBootstrapScript } from "../theme/theme-preset-client.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
+import { ModeSwitcher } from "../ui/mode-switcher";
+import { coerceShellStyle, resolveShellStyle } from "./shell-style";
+import { ownPreferenceStores } from "../../preferences/preference-stores.js";
+import { isNavItemActive } from "./nav-active";
+import ProductShellHeader from "./ProductShellHeader.svelte";
+import SkipLink from "../a11y/SkipLink.svelte";
+import UserMenu from "./UserMenu.svelte";
+import WorkspaceLink from "./WorkspaceLink.svelte";
+import { requiresDocumentNavigation } from "./packaged-navigation.js";
+import OrgSwitcher from "./OrgSwitcher.svelte";
+import VibesLogo from "../brand/VibesLogo.svelte";
+import { Icon } from "../icon";
+import { cn } from "../../utils.js";
+import { PRODUCT_SHELL_INSET_CLASS, productShellMainClass } from "./product-shell-scroll.js";
+import { resolveAppShellLocation } from "./shell-location.js";
+import { onMount } from "svelte";
+import { DropdownMenuSeparator } from "../ui/dropdown-menu";
+import AppShellUtilityTriggers from "./AppShellUtilityTriggers.svelte";
+import AppShellUtilityMenuItems from "./AppShellUtilityMenuItems.svelte";
+import AppShellUtilityMounts from "./AppShellUtilityMounts.svelte";
+import { captureAppShellUtilities, provideShellUtilities } from "./app-shell-utilities.svelte.js";
+let { appId, title, location, pathname = "", route, navigation = [], navigationProjection, user = null, viewer, signInHref, signOutHref = "/auth/signout", accountHref, workspaceHref, workspaceLabel = "All Projects", workspaceDescription = "View all your projects", organizations = [], activeOrgId = null, onOrganizationSwitch, extraUserMenuContent, breadcrumbs = [], header, headerActions, children, collapsibleSections = true, showAppSwitcher = true, showModeSwitcher = true, showMessenger = true, messengerChatOrigin, appOrigins, marshalProjectId, brand, presentation = "default", contentClass = "p-4 md:p-6", contentScroll = "page", sidebar, banner, provider, messenger, searchSlot, sidebarOpen, onSidebarOpenChange, chrome, chromeLocked = false, showShellStyleMenu = true, onShellStyleChange, ambient = true, appearanceHref, onThemePresetChange, onModeChange, disableInlineAppearanceBootstrap = true } = $props();
+// The shell owns this runtime's browser-side preference stores (layout, color
+// theme, mode) and provides them to its subtree, so no two runtimes share a
+// preference. Each store mirrors through the runtime's preference storage once
+// it resolves; cookies carry the values until then.
+const preferenceStores = ownPreferenceStores();
+// `app-shell/utility` contributions from the runtime this shell is handed
+// (surface-sveltekit context). No runtime, or no Kit app-shell plugin,
+// renders none. They load after mount, so SSR and hydration agree.
+const shellUtilities = captureAppShellUtilities(() => ({
+	signedIn: user != null,
+	surface: "shell",
+	route: route ?? undefined
+}));
+provideShellUtilities(shellUtilities);
+onMount(() => {
+	let detach;
+	let unmounted = false;
+	void shellUtilities.start().then((cleanup) => {
+		if (unmounted) cleanup();
+		else detach = cleanup;
+	});
+	return () => {
+		unmounted = true;
+		detach?.();
+	};
+});
+const hasUserMenuUtilities = $derived(shellUtilities.at("user-menu").length > 0);
+const userMenuContent = $derived(extraUserMenuContent || hasUserMenuUtilities ? composedUserMenuContent : undefined);
+// Only forward open/onOpenChange to <SidebarProvider> when the caller opts
+// into controlled mode. Passing `open` unconditionally would override the
+// provider's internal toggle for every uncontrolled app (it defaults `open`
+// to true and mutates it on toggle), so an empty object preserves that.
+const sidebarControl = $derived(sidebarOpen !== undefined ? {
+	open: sidebarOpen,
+	onOpenChange: onSidebarOpenChange ?? (() => {})
+} : {});
+const resolvedAppId = $derived(navigationProjection?.currentAppId ?? appId);
+const shellLocation = $derived(resolveAppShellLocation(location, pathname));
+const appMeta = $derived(navigationProjection?.app);
+const resolvedBrand = $derived(brand ?? appMeta?.brand);
+/**
+* Branded apps suppress the suite app switcher by default — they should
+* read as standalone products. Callers can still force-enable it by
+* passing `showAppSwitcher={true}` explicitly when needed.
+*/
+const effectiveShowAppSwitcher = $derived(resolvedBrand?.hideSuiteIdentity ? false : showAppSwitcher);
+const shellNavigation = $derived(navigationProjection ? navigationProjection.groups : navigation);
+/**
+* Apps surfaced in the dedicated icon rail. We keep `currentAppId` in the
+* set so the active app gets the highlighted slot — unlike the old
+* footer switcher we don't filter it out.
+*/
+const railApps = $derived(effectiveShowAppSwitcher ? navigationProjection?.apps ?? [] : []);
+const showRail = $derived(railApps.length > 0);
+const resolvedPathname = $derived(shellLocation.pathname);
+// The scrollable region is the inner `<main>`, not the window, so SvelteKit's
+// native scroll restoration (window-only) never resets it on client-side
+// navigation, leaving each new page stuck at the previous page's offset.
+// The host-supplied location is the navigation signal, keeping this reusable
+// component independent of SvelteKit while preserving its restoration rules.
+let mainEl = $state(null);
+let restoredNavigationKey = $state(null);
+$effect(() => {
+	const navigationKey = `${shellLocation.pathname}${shellLocation.search}${shellLocation.hash}`;
+	if (!mainEl || navigationKey === restoredNavigationKey) return;
+	restoredNavigationKey = navigationKey;
+	if (shellLocation.hash) {
+		document.querySelector(shellLocation.hash)?.scrollIntoView();
+	} else {
+		mainEl?.scrollTo(0, 0);
+	}
+});
+const resolvedTitle = $derived(title ?? resolvedBrand?.name ?? appMeta?.label ?? "Vibes");
+const resolvedAccountHref = $derived(accountHref ?? navigationProjection?.accountHref ?? "/account");
+const resolvedAppearanceHref = $derived(appearanceHref ?? `${resolvedAccountHref.replace(/\/$/, "")}/appearance`);
+const resolvedWorkspaceHref = $derived(workspaceHref ?? navigationProjection?.workspaceHref ?? "/");
+const orgHomeApp = $derived(navigationProjection?.orgHomeApp);
+const activeOrg = $derived(activeOrgId ? organizations.find((org) => org.id === activeOrgId) ?? null : null);
+const resolvedMessengerChatOrigin = $derived(messengerChatOrigin ?? navigationProjection?.chatHref);
+function isLogoName(logo) {
+	return typeof logo === "string";
+}
+const brandLogoName = $derived.by(() => {
+	const logo = resolvedBrand?.logo;
+	return isLogoName(logo) ? logo : undefined;
+});
+const brandLogoUrl = $derived(brandLogoName?.startsWith("/") || brandLogoName?.startsWith("http") ? brandLogoName : undefined);
+const BrandLogoComponent = $derived.by(() => {
+	const logo = resolvedBrand?.logo;
+	return logo && !isLogoName(logo) ? logo : undefined;
+});
+const brandCompactLabel = $derived.by(() => {
+	const explicit = resolvedBrand?.compactLabel?.trim();
+	if (explicit) return explicit.slice(0, 2).toUpperCase();
+	const fallback = resolvedBrand?.name?.match(/[A-Za-z0-9]/)?.[0];
+	return fallback?.toUpperCase() ?? "?";
+});
+/*
+* Shell anatomy resolution: a consumer-supplied `sidebar` snippet owns the
+* navigation column, so those shells stay on the Suite anatomy regardless of
+* preference. Otherwise: locked apps render their default; everyone else gets
+* user preference → app default → 'suite'.
+*/
+const chromeDefault = $derived(coerceShellStyle(chrome) ?? "suite");
+const resolvedChrome = $derived.by(() => {
+	if (sidebar) return "suite";
+	if (chromeLocked) return chromeDefault;
+	return resolveShellStyle(preferenceStores.shellStyle.preference, chromeDefault);
+});
+const shellStyleMenuVisible = $derived(showShellStyleMenu && !chromeLocked && !sidebar);
+/* Canvas scope segments: the app's top-level nav items, capped with overflow. */
+const CANVAS_SCOPE_LIMIT = 6;
+const canvasScopes = $derived(shellNavigation.flatMap((group) => group.items).map((item) => ({
+	label: item.label,
+	href: item.href,
+	external: item.external ?? false,
+	active: isNavItemActive(item, resolvedPathname)
+})));
+const canvasPrimary = $derived(canvasScopes.slice(0, CANVAS_SCOPE_LIMIT));
+const canvasOverflow = $derived(canvasScopes.slice(CANVAS_SCOPE_LIMIT));
+const themePresetTag = "script";
+const themePresetBootstrapHtml = `<${themePresetTag}>${createThemePresetBootstrapScript()}</${themePresetTag}>`;
+</script>
+
+<svelte:head>
+	{#if !disableInlineAppearanceBootstrap}
+		<!-- Explicit legacy opt-in only. Canonical CSP does not allow this script. -->
+		{@html themePresetBootstrapHtml}
+	{/if}
+</svelte:head>
+
+<SkipLink targetId="main-content" />
+
+{#snippet composedUserMenuContent()}
+	{#if extraUserMenuContent}
+		{@render extraUserMenuContent()}
+		{#if hasUserMenuUtilities}
+			<DropdownMenuSeparator />
+		{/if}
+	{/if}
+	<AppShellUtilityMenuItems utilities={shellUtilities} />
+{/snippet}
+
+{#snippet composedHeaderActions()}
+	{#if headerActions}
+		{@render headerActions()}
+	{/if}
+	<AppShellUtilityTriggers utilities={shellUtilities} placement="header" />
+{/snippet}
+
+{#snippet shellPickers()}
+	{#if shellStyleMenuVisible}
+		<ShellStyleMenu
+			current={resolvedChrome}
+			onchange={onShellStyleChange}
+			onThemeChange={onThemePresetChange}
+			{onModeChange}
+			appearanceHref={resolvedAppearanceHref}
+			class="h-8 w-8"
+		/>
+	{/if}
+{/snippet}
+
+{#snippet mainRegion()}
+	{#if banner}
+		{@render banner()}
+	{/if}
+
+	{#if header}
+		<div class="border-b bg-background px-4 py-3 md:px-6">
+			{@render header()}
+		</div>
+	{/if}
+
+	<div
+		bind:this={mainEl}
+		id="main-content"
+		tabindex="-1"
+		class={productShellMainClass(contentScroll)}
+		style="scroll-margin-top: var(--header-height, 4rem);"
+	>
+		<div
+			class={cn(
+				contentClass,
+				contentScroll === 'pane'
+					? 'h-full min-h-0 w-full'
+					: resolvedChrome === 'canvas' && 'mx-auto w-full max-w-6xl md:px-8 md:py-7'
+			)}
+		>
+			{#if provider}
+				{@render provider({ content: children })}
+			{:else}
+				{@render children()}
+			{/if}
+		</div>
+	</div>
+{/snippet}
+
+{#snippet canvasScopeLink(scope: {
+	label: string;
+	href: string;
+	external: boolean;
+	active: boolean;
+})}
+	<a
+		href={scope.href}
+		data-active={scope.active ? 'true' : undefined}
+		target={scope.external ? '_blank' : undefined}
+		rel={scope.external ? 'noreferrer' : undefined}
+		class={cn(
+			'rounded-md px-3 py-1.5 text-sm whitespace-nowrap text-muted-foreground transition-colors hover:bg-accent hover:text-foreground',
+			scope.active &&
+				'bg-brand/14 font-semibold text-brand shadow-[inset_0_0_0_0.5px_color-mix(in_oklab,var(--brand)_22%,transparent)]'
+		)}
+	>
+		{scope.label}
+	</a>
+{/snippet}
+
+{#if resolvedChrome === 'suite' && showRail}
+	<AppSwitcherRail
+		apps={railApps}
+		currentAppId={resolvedAppId}
+		orientation="vertical"
+		class="fixed inset-y-0 left-0 z-30 hidden w-14 md:flex"
+	/>
+{/if}
+
+<!-- Keep providers and workspace content mounted while only the surrounding chrome changes. -->
+<SidebarProvider
+	{...sidebarControl}
+	data-shell-chrome={resolvedChrome}
+	class={cn(
+		'relative isolate h-svh overflow-hidden',
+		resolvedChrome === 'suite' && showRail && 'md:pl-14',
+		presentation === 'native' && 'product-shell--native'
+	)}
+>
+	{#if ambient}
+		{#await loadAmbientCanvas() then { default: ShellAmbientCanvas }}
+			<ShellAmbientCanvas />
+		{/await}
+	{/if}
+	{#if resolvedChrome !== 'canvas'}
+		{#if sidebar}
+			{@render sidebar()}
+		{/if}
+		{#if !sidebar}
+			<Sidebar
+				collapsible="icon"
+				variant={resolvedChrome === 'focus' ? 'inset' : 'sidebar'}
+				class={cn('!border-r-0', resolvedChrome === 'suite' && showRail && 'md:!start-14')}
+				role="navigation"
+			>
+				{#if resolvedChrome === 'suite' && showRail}
+					<AppSwitcherRail
+						apps={railApps}
+						currentAppId={resolvedAppId}
+						orientation="horizontal"
+						class="flex md:hidden"
+					/>
+				{/if}
+				<SidebarHeader
+					class={cn('border-b-inset h-16 border-b p-2', resolvedChrome !== 'focus' && 'border-r')}
+				>
+					{#if resolvedChrome === 'focus'}
+						<!--
+					Focus: the rail is gone — the app chip carries identity and suite
+					switching (grid menu + ⌘K palette remain the switching paths).
+				-->
+						<div class="flex h-12 w-full items-center group-data-[collapsible=icon]:hidden">
+							<AppMenuChip
+								apps={railApps}
+								currentAppId={resolvedAppId}
+								appLabel={resolvedTitle}
+								brand={resolvedBrand}
+							/>
+						</div>
+						<div class="hidden h-12 items-center justify-center group-data-[collapsible=icon]:flex">
+							<VibesLogo size={28} class="object-contain" />
+						</div>
+					{:else if resolvedBrand}
+						{@const brandHref =
+							resolvedBrand.homeHref ??
+							(resolvedBrand.hideSuiteIdentity ? '/' : resolvedWorkspaceHref)}
+						<a
+							href={brandHref}
+							data-sveltekit-reload={requiresDocumentNavigation(brandHref) ? true : undefined}
+							class={cn(
+								'group flex h-12 w-full min-w-0 items-center gap-2 px-2 sm:px-1',
+								resolvedBrand.logoAspect === 'wide' &&
+									'justify-center group-data-[collapsible=icon]:px-0'
+							)}
+							aria-label={resolvedBrand.name}
+						>
+							{#if brandLogoUrl}
+								{@const wide = resolvedBrand.logoAspect === 'wide'}
+								<div
+									class={cn(
+										'flex min-w-0 items-center',
+										wide
+											? 'h-10 flex-1 justify-center group-data-[collapsible=icon]:hidden'
+											: 'h-10 w-10 shrink-0'
+									)}
+								>
+									<img
+										src={brandLogoUrl}
+										alt={resolvedBrand.name}
+										class={cn(
+											wide
+												? 'h-10 max-h-10 w-auto max-w-full object-contain'
+												: 'h-10 w-10 object-contain',
+											resolvedBrand.logoClass
+										)}
+									/>
+								</div>
+								{#if wide}
+									<span
+										aria-hidden="true"
+										class={cn(
+											'hidden h-9 w-9 shrink-0 items-center justify-center rounded-full border border-sidebar-border bg-sidebar-accent text-base font-semibold text-sidebar-accent-foreground shadow-xs group-data-[collapsible=icon]:inline-flex',
+											resolvedBrand.compactClass
+										)}
+										style={resolvedBrand.circleBg
+											? `background-color: ${resolvedBrand.circleBg}; color: ${resolvedBrand.circleFg || '#ffffff'};`
+											: undefined}
+									>
+										{resolvedBrand.markLetter || brandCompactLabel}
+									</span>
+								{/if}
+							{:else if resolvedBrand.markLetter || resolvedBrand.circleBg}
+								<span
+									aria-hidden="true"
+									class={cn(
+										'flex h-9 w-9 shrink-0 items-center justify-center rounded-full font-bold shadow-xs',
+										resolvedBrand.compactClass
+									)}
+									style={`background-color: ${resolvedBrand.circleBg || '#92400e'}; color: ${resolvedBrand.circleFg || '#ffffff'};`}
+								>
+									{resolvedBrand.markLetter || brandCompactLabel}
+								</span>
+							{:else if brandLogoName !== undefined}
+								<Icon icon={brandLogoName} class="h-9 w-9" />
+							{:else if BrandLogoComponent}
+								<BrandLogoComponent class="h-9 w-9" />
+							{:else}
+								<VibesLogo size={40} class="object-contain" />
+							{/if}
+							{#if !resolvedBrand.hideWordmark}
+								<div class="flex items-center group-data-[collapsible=icon]:hidden">
+									<span
+										class={`text-2xl font-semibold ${resolvedBrand.wordmarkClass ?? 'text-foreground'}`}
+										>{resolvedBrand.name}</span
+									>
+								</div>
+							{/if}
+						</a>
+					{:else}
+						<a
+							href={resolvedWorkspaceHref}
+							data-sveltekit-reload={requiresDocumentNavigation(resolvedWorkspaceHref)
+								? true
+								: undefined}
+							class="group flex h-12 items-center gap-2 px-2 sm:px-1"
+						>
+							<VibesLogo size={40} class="object-contain" />
+							<div class="flex items-center group-data-[collapsible=icon]:hidden">
+								<span
+									class="[background-image:var(--brand-gradient)] bg-clip-text text-2xl font-semibold text-transparent"
+									>vibes.dev</span
+								>
+							</div>
+						</a>
+					{/if}
+				</SidebarHeader>
+
+				<SidebarContent>
+					<ScrollArea class="sidebar-nav-scroll h-full w-full">
+						<SidebarNavigation
+							navigation={shellNavigation}
+							pathname={resolvedPathname}
+							{collapsibleSections}
+							storageKey={`product-shell:${appId}:navigation`}
+						/>
+					</ScrollArea>
+				</SidebarContent>
+
+				<SidebarFooter>
+					{#if !resolvedBrand?.hideSuiteIdentity}
+						<WorkspaceLink
+							href={resolvedWorkspaceHref}
+							label={workspaceLabel}
+							description={workspaceDescription}
+							icon="lucide:briefcase"
+						/>
+					{/if}
+					{#if orgHomeApp}
+						<WorkspaceLink
+							href={orgHomeApp.href}
+							label={orgHomeApp.brand?.name ?? orgHomeApp.label}
+							description={activeOrg?.name ? `Return to ${activeOrg.name}` : orgHomeApp.description}
+							icon={typeof orgHomeApp.icon === 'string' ? orgHomeApp.icon : 'lucide:building-2'}
+						/>
+					{/if}
+					{#if user && organizations.length > 0}
+						<OrgSwitcher {organizations} {activeOrgId} {onOrganizationSwitch} />
+					{/if}
+					{#if user}
+						<UserMenu
+							{user}
+							{signOutHref}
+							accountHref={resolvedAccountHref}
+							extraMenuContent={userMenuContent}
+						/>
+					{:else if signInHref}
+						<WorkspaceLink
+							href={signInHref}
+							label="Sign in"
+							description="Get started with vibes"
+							icon="lucide:log-in"
+						/>
+					{/if}
+				</SidebarFooter>
+
+				<SidebarRail />
+			</Sidebar>
+		{/if}
+	{/if}
+
+	<!--
+		Inset must NOT be a second scrollport. Base SidebarInset ships
+		overflow-y-auto; we override to overflow-hidden so only #main-content
+		scrolls (see product-shell-scroll.ts: mobile double-overflow trap).
+	-->
+	<SidebarInset class={PRODUCT_SHELL_INSET_CLASS}>
+		{#if resolvedChrome === 'canvas'}
+			<header
+				class="flex h-12 shrink-0 items-center gap-2 border-b bg-background/85 px-3 backdrop-blur-md md:px-4"
+			>
+				<AppMenuChip
+					compact
+					apps={railApps}
+					currentAppId={resolvedAppId}
+					appLabel={resolvedTitle}
+					brand={resolvedBrand}
+					class="w-auto max-w-60 shrink-0"
+				/>
+				<nav
+					aria-label="Sections"
+					class="hidden min-w-0 flex-1 items-center gap-1 overflow-x-auto md:flex"
+				>
+					{#each canvasPrimary as scope (scope.href)}
+						{@render canvasScopeLink(scope)}
+					{/each}
+					{#if canvasOverflow.length > 0}
+						<DropdownMenu>
+							<DropdownMenuTrigger>
+								{#snippet child({ props })}
+									<button
+										type="button"
+										class="rounded-md px-3 py-1.5 text-sm whitespace-nowrap text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+										{...props}
+									>
+										More
+									</button>
+								{/snippet}
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="start">
+								{#each canvasOverflow as scope (scope.href)}
+									<DropdownMenuItem>
+										{#snippet child({ props })}
+											<a
+												href={scope.href}
+												class={cn('w-full', scope.active && 'font-medium text-brand')}
+												{...props}
+											>
+												{scope.label}
+											</a>
+										{/snippet}
+									</DropdownMenuItem>
+								{/each}
+							</DropdownMenuContent>
+						</DropdownMenu>
+					{/if}
+				</nav>
+				<div class="ml-auto flex shrink-0 items-center gap-1">
+					{@render composedHeaderActions()}
+					{@render shellPickers()}
+					{#if showModeSwitcher && !shellStyleMenuVisible}
+						<!-- The Appearance menu owns Mode; the standalone switcher shows only when it is hidden. -->
+						<ModeSwitcher class="h-8 w-8" />
+					{/if}
+					{#if user}
+						<UserMenu
+							variant="toolbar"
+							{user}
+							{signOutHref}
+							accountHref={resolvedAccountHref}
+							showThemeToggle={!shellStyleMenuVisible}
+							extraMenuContent={userMenuContent}
+						/>
+					{:else if signInHref}
+						<a href={signInHref} class="px-2 text-sm font-medium hover:text-brand">Sign in</a>
+					{/if}
+				</div>
+			</header>
+			<nav
+				aria-label="Sections"
+				class="flex shrink-0 items-center gap-1 overflow-x-auto border-b px-2 py-1.5 md:hidden"
+			>
+				{#each canvasScopes as scope (scope.href)}
+					{@render canvasScopeLink(scope)}
+				{/each}
+			</nav>
+		{:else}
+			<ProductShellHeader
+				title={resolvedTitle}
+				{breadcrumbs}
+				headerActions={composedHeaderActions}
+				{searchSlot}
+				showModeSwitcher={showModeSwitcher && !shellStyleMenuVisible}
+			>
+				{#snippet pickers()}
+					{@render shellPickers()}
+				{/snippet}
+			</ProductShellHeader>
+		{/if}
+
+		{@render mainRegion()}
+	</SidebarInset>
+</SidebarProvider>
+
+<SharedModeWatcher disableHeadScriptInjection={disableInlineAppearanceBootstrap} />
+
+{#if messenger}
+	{@render messenger()}
+{/if}
+
+<AppShellUtilityMounts utilities={shellUtilities} />
+
+<style>
+	@reference "tailwindcss";
+	@reference "../../styles.css";
+
+	/*
+	 * Native is a generic shell behavior profile, not an app override.
+	 * VibesKit owns these stable regions and their accessibility fallbacks.
+	 */
+	:global(.product-shell--native [data-slot='sidebar-inner']) {
+		border-right: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
+		background: color-mix(in oklab, var(--sidebar) 88%, transparent);
+		backdrop-filter: blur(22px) saturate(145%);
+		-webkit-backdrop-filter: blur(22px) saturate(145%);
+	}
+
+	:global(.product-shell--native [data-slot='sidebar-header']) {
+		border-right: 0;
+		border-bottom-color: color-mix(in oklab, var(--border) 68%, transparent);
+	}
+
+	:global(.product-shell--native [data-slot='sidebar-inset'] > header) {
+		border-bottom-color: color-mix(in oklab, var(--border) 68%, transparent);
+		background: color-mix(in oklab, var(--background) 82%, transparent);
+		backdrop-filter: blur(20px) saturate(140%);
+		-webkit-backdrop-filter: blur(20px) saturate(140%);
+	}
+
+	:global(
+		.product-shell--native
+			:is(
+				[data-slot='button'],
+				[data-slot='sidebar-menu-button'],
+				[data-slot='sidebar-menu-sub-button']
+			)
+	) {
+		transition:
+			transform 100ms ease-out,
+			color 150ms ease-out,
+			background-color 150ms ease-out,
+			border-color 150ms ease-out;
+	}
+
+	:global(
+		.product-shell--native
+			:is(
+				[data-slot='button'],
+				[data-slot='sidebar-menu-button'],
+				[data-slot='sidebar-menu-sub-button']
+			):active
+	) {
+		transform: scale(0.975);
+	}
+
+	@media (prefers-reduced-transparency: reduce) {
+		:global(.product-shell--native [data-slot='sidebar-inner']),
+		:global(.product-shell--native [data-slot='sidebar-inset'] > header) {
+			background: var(--background);
+			backdrop-filter: none;
+			-webkit-backdrop-filter: none;
+		}
+	}
+
+	@media (prefers-contrast: more) {
+		:global(.product-shell--native [data-slot='sidebar-inner']),
+		:global(.product-shell--native [data-slot='sidebar-inset'] > header) {
+			border-color: var(--foreground);
+			background: var(--background);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:global(
+			.product-shell--native
+				:is(
+					[data-slot='button'],
+					[data-slot='sidebar-menu-button'],
+					[data-slot='sidebar-menu-sub-button']
+				)
+		) {
+			transition: none;
+		}
+
+		:global(
+			.product-shell--native
+				:is(
+					[data-slot='button'],
+					[data-slot='sidebar-menu-button'],
+					[data-slot='sidebar-menu-sub-button']
+				):active
+		) {
+			transform: none;
+		}
+	}
+</style>