// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import React from 'react';

/**
 * @file AppShell.tsx
 * @input Uses React, Theme-resolved breakpoints, Layout, navigation slots, and StyleX
 * @output Exports AppShell component and AppShellProps with SSR-safe mobile layout
 * @position Page shell for an application — the top-level wrapper for any app.
 *   Composes Layout internally to provide header, sideNav, and main content areas.
 *   Use for any app that needs a top nav, side navigation, and scrollable content.
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/AppShell/AppShell.doc.mjs
 * - /packages/core/src/AppShell/index.ts
 * - /packages/core/src/AppShell/AppShell.test.tsx
 * - /apps/storybook/stories/AppShell.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/AppShell/ (showcase blocks)
 */

import { isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState, type ReactNode } from 'react';
import * as stylex from "../style-runtime.js";
import "../theme/tokens.stylex.js";
import { colorVars, fontWeightVars, radiusVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
import { Layout } from "../Layout/Layout.js";
import { LayoutHeader } from "../Layout/LayoutHeader.js";
import { LayoutPanel } from "../Layout/LayoutPanel.js";
import { LayoutContent } from "../Layout/LayoutContent.js";
import { MobileNavToggle } from "../MobileNav/MobileNavToggle.js";
import { SideNavRenderContext } from "../SideNav/SideNavRenderContext.js";
import { TopNavRenderContext } from "../TopNav/TopNavRenderContext.js";
import { TopNavMobileContentContext } from "../TopNav/TopNavMobileContentContext.js";
import { AppShellMobileContext } from "./AppShellMobileContext.js";
import type { AppShellMobileContextValue } from "./AppShellMobileContext.js";
import type { SpacingStep } from "../utils/types.js";
import type { BaseProps } from "../BaseProps.js";
import { mergeProps, isRenderable } from "../utils/index.js";
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
import { useMediaQuery } from "../hooks/useMediaQuery.js";
import { observeResize } from "../utils/sharedResizeObserver.js";
import { themeProps } from "../utils/themeProps.js";
import { useTranslator } from "../i18n/index.js";
import { useThemeDefinition } from "../theme/useTheme.js";
import { DEFAULT_WIDTH_BREAKPOINTS, type WidthBreakpointName } from "../theme/themeAdaptations.js";
import type { AppShellVariantMap } from "./index.js";
import { useMergedRefs } from "../hooks/useMergedRefs.js";
// =============================================================================
// Constants
// =============================================================================

const MAIN_CONTENT_ID = 'astryx-app-shell-main';

// =============================================================================
// Types
// =============================================================================

/**
 * SideNav breakpoint options. Named points resolve through the nearest Theme;
 * without an active theme they use Astryx's default width-breakpoint map.
 */
export type AppShellBreakpoint = WidthBreakpointName | 'none';

/**
 * Navigation background style:
 * - `wash`: Nav areas use wash background, no dividers
 * - `surface`: Nav areas use surface background, no dividers
 * - `section`: Dividers between nav and content (classic look)
 * - `elevated`: Wash nav background with elevated surface content + border radius
 * @default 'elevated'
 */

/**
 * Navigation background style. Extensible via module augmentation of AppShellVariantMap.
 */
export type AppShellVariant = keyof AppShellVariantMap;

/**
 * Configuration object for mobile navigation behavior.
 * Used when you need to customize the auto mobile nav without replacing it entirely.
 */
export interface MobileNavConfig {
  /**
   * Whether to auto-render the hamburger toggle.
   * When false, use `<MobileNavToggle />` to place it yourself.
   * @default true
   */
  hasToggle?: boolean;

  /**
   * Controlled open state. When provided, AppShell doesn't manage
   * mobile nav state internally.
   */
  isOpen?: boolean;

  /**
   * Callback when the mobile nav drawer open state changes.
   */
  onOpenChange?: (isOpen: boolean) => void;

  /**
   * Custom drawer content. Replaces the auto-generated drawer.
   * Can be an `<MobileNav>` for full drawer config (title, width, side)
   * or raw children.
   */
  content?: ReactNode;

  /**
   * Named Theme width point below which mobile nav activates. `sm`, `md`,
   * `lg`, `xl`, and `2xl` resolve through the nearest Theme's effective
   * `adaptations.widthBreakpoints`; equality belongs to the wider layout.
   * Use `none` to disable automatic mobile mode.
   * @default 'md'
   */
  breakpoint?: AppShellBreakpoint;

  /**
   * SSR hint: whether the initial render should assume mobile layout.
   * Seeds the breakpoint state so the server-rendered HTML matches
   * the client on mobile devices, avoiding a layout flash. Ignored when
   * `breakpoint` is `none`, which is always non-mobile.
   *
   * Derive from the User-Agent header or a device-detection cookie
   * in a server component, then pass down.
   *
   * @default false
   */
  defaultIsMobile?: boolean;
}
export interface AppShellProps extends BaseProps<HTMLDivElement> {
  /** Ref forwarded to the root element */
  ref?: React.Ref<HTMLDivElement>;
  /**
   * Navigation background style controlling how nav areas contrast with content.
   * - `wash`: Nav uses wash background, no dividers
   * - `surface`: Nav uses surface background, no dividers
   * - `section`: Dividers between nav and content (classic look)
   * - `elevated`: Wash nav with elevated surface content area + border radius
   * @default 'elevated'
   */
  variant?: AppShellVariant;

  /**
   * Optional banner slot for system-wide announcements.
   * Renders above the top nav and scrolls away with the page in auto mode.
   */
  banner?: ReactNode;

  /**
   * Main content area (rendered as `<main>`).
   */
  children: ReactNode;

  /**
   * Padding for the main content area using the spacing scale.
   * Set based on the dominant content pattern for the page:
   * - `4` (16px) — standard padding for forms, settings, text-heavy pages
   * - `0` — no padding, for dashboards, maps, tables that need edge-to-edge
   * Override individual sections with `<Section padding={...}>`.
   * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
   */
  contentPadding?: SpacingStep;

  /**
   * Height behavior:
   * - `fill`: Shell fills viewport, content scrolls internally (default)
   * - `auto`: Shell grows with content, page scrolls as a whole
   * @default 'fill'
   */
  height?: 'fill' | 'auto';

  /**
   * Mobile navigation configuration.
   *
   * Accepts three shapes:
   * - **`false`** — Disable mobile nav entirely.
   * - **`MobileNavConfig` object** — Configure auto behavior (toggle, controlled state, custom content).
   * - **`ReactNode`** — Full escape hatch: provide your own `<MobileNav>` (you own everything).
   *
   * When omitted, AppShell automatically generates a mobile drawer with
   * sideNav content (and TopNav items in the future) below the breakpoint.
   *
   * @example
   * ```
   * <AppShell topNav={...} sideNav={...} />
   * <AppShell mobileNav={{ isOpen, onOpenChange }} />
   * <AppShell mobileNav={{ hasToggle: false }}>
   *   <MobileNavToggle />
   * </AppShell>
   * <AppShell mobileNav={<MobileNav header="Menu">...</MobileNav>} />
   * <AppShell mobileNav={false} />
   * ```
   */
  mobileNav?: false | MobileNavConfig | ReactNode;

  /**
   * Side navigation — typically an SideNav.
   *
   * Pass `undefined` (or omit) when a page has no side navigation.
   * Do NOT pass a component that renders `null` — AppShell treats any
   * renderable value as "sidenav exists".
   *
   * **Next.js parallel routes:** Conditionally pass the slot based on
   * the current route rather than relying on a `default.tsx` that
   * returns `null`:
   *
   * @example
   * ```
   * const SIDEBAR_ROUTES = ['/dashboard', '/settings'];
   * function Layout({ children, sidebar }) {
   *   const hasSidebar = SIDEBAR_ROUTES.some(r => pathname.startsWith(r));
   *   return (
   *     <AppShell
   *       sideNav={hasSidebar ? sidebar : undefined}
   *       mobileNav={hasSidebar ? { breakpoint: 'md' } : false}>
   *       {children}
   *     </AppShell>
   *   );
   * }
   * ```
   */
  sideNav?: ReactNode;

  /**
   * Top navigation — typically an TopNav.
   * Same contract as `sideNav` — pass `undefined` when there's no top nav.
   */
  topNav?: ReactNode;
}

// =============================================================================
// Styles
// =============================================================================

const styles = {
  root: {
    k1xSpc: "x78zum5",
    kXwgrk: "xdt5ytf",
    kVAEAm: "x1n2onr6",
    kVQacm: "x7giv3",
    $$css: true as const
  },
  variantWash: {
    kWkggS: "x1eiddq6",
    $$css: true as const
  },
  variantSurface: {
    kWkggS: "x10xzikg",
    $$css: true as const
  },
  variantSection: {
    kWkggS: "x10xzikg",
    $$css: true as const
  },
  variantElevated: {
    kWkggS: "x1eiddq6",
    $$css: true as const
  },
  rootFill: {
    kZKoxP: "xtdtrs8",
    $$css: true as const
  },
  rootAuto: {
    kAzted: "x1ov3xa9",
    $$css: true as const
  },
  skipLink: {
    kVAEAm: "x10l6tqk x1xrnuwo",
    kzqmXN: "x1i1rx1s x1jqxupm",
    kZKoxP: "xjm9jq1 x15cytp8",
    k8WAf4: "xt970qd xh2mrf5",
    kg3NbH: "xnjsko4 x1cf3d6k",
    kogj98: "xkdpibf x1y5lnwp",
    kVQacm: "xb3r6kr xomzh7y",
    kz4h6p: "x1hyvwdk x1rsz1da",
    khDVqt: "xuxw1ft x1hbpcn8",
    kMzoRj: "xc342km",
    k87sOh: "x13vifvy x1rw3289",
    kLqNvP: "x1o0tod xodanix",
    kWkggS: "x10xzikg",
    kMwMTN: "xjse4m1",
    kY2c9j: "x1q2oy4v",
    kybGjl: "x1hl2dhg",
    k63SB2: "x2mo6ok",
    kGuDYH: "xjm74w1",
    $$css: true as const
  },
  mainFocusTarget: {
    kI3sdo: "x1uvtmcs",
    $$css: true as const
  },
  contentBgSurface: {
    kWkggS: "x10xzikg",
    $$css: true as const
  },
  contentBgWash: {
    kWkggS: "x1eiddq6",
    $$css: true as const
  },
  contentBgTransparent: {
    kWkggS: "xjbqb8w",
    kHBbk8: "xc8icb0",
    $$css: true as const
  },
  navAreaWash: {
    kWkggS: "x1eiddq6",
    $$css: true as const
  },
  navAreaSurface: {
    kWkggS: "x10xzikg",
    $$css: true as const
  },
  banner: {
    kmuXW: "x2lah0s",
    $$css: true as const
  },
  headerSticky: {
    kVAEAm: "x7wzq59",
    k87sOh: "x13vifvy",
    kY2c9j: "x1vjfegm",
    $$css: true as const
  },
  panelAutoFill: {
    kUk6DE: "x98rzlu",
    kVQacm: "xysyzu8",
    $$css: true as const
  }
};

// =============================================================================
// Component
// =============================================================================

/**
 * Page shell for an application. Provides the structural frame for an app:
 * top navigation, side navigation, and main content area.
 *
 * Slot-based API with `topNav`, `sideNav`, `banner`, and `children`.
 * Supports two height modes (`fill` and `auto`), responsive side nav
 * collapse, and mobile overlay with backdrop.
 *
 * @example
 * ```
 * <AppShell
 *   topNav={<TopNav label="Navigation" heading={<TopNavHeading heading="My App" />} />}
 *   sideNav={<SideNav>{navSections}</SideNav>}
 *   mobileNav={
 *     <MobileNav isOpen={mobileOpen} onOpenChange={(open) => setMobileOpen(open)} header="My App">
 *       {navSections}
 *     </MobileNav>
 *   }>
 *   <Content />
 * </AppShell>
 * ```
 */
export function AppShell({
  variant = 'elevated',
  banner,
  children,
  contentPadding,
  'data-testid': dataTestId,
  height = 'fill',
  mobileNav,
  sideNav,
  topNav,
  xstyle,
  className,
  style,
  ref,
  ...rest
}: AppShellProps) {
  const t = useTranslator();
  const activeTheme = useThemeDefinition();
  // =========================================================================
  // Parse mobileNav prop — normalize to config, custom element, or disabled
  // =========================================================================
  const mobileNavDisabled = mobileNav === false;
  const mobileNavConfig: MobileNavConfig | null = mobileNav != null && mobileNav !== false && typeof mobileNav === 'object' && !isValidElement(mobileNav) ? mobileNav as MobileNavConfig : null;
  const sideNavBreakpoint: AppShellBreakpoint = mobileNavConfig?.breakpoint ?? 'md';
  // ReactNode shorthand — user provides <MobileNav> directly as the prop
  const mobileNavReactNode: ReactNode | null = mobileNav != null && mobileNav !== false && (isValidElement(mobileNav) || typeof mobileNav === 'string') ? mobileNav : null;
  // Custom content from config object
  const mobileNavConfigContent: ReactNode | null = mobileNavConfig?.content ?? null;
  const mobileNavHasToggle = mobileNavConfig?.hasToggle !== false;
  const mobileNavIsControlled = mobileNavConfig?.isOpen !== undefined;

  // =========================================================================
  // Slot presence — checks whether slot containers have rendered DOM content.
  // Refs are attached to wrapper divs around each slot; a MutationObserver
  // checks childNodes to track whether each slot has rendered content.
  // =========================================================================

  // =========================================================================
  // Mobile nav open state (controlled + uncontrolled)
  // =========================================================================
  const activeWidthBreakpoints = activeTheme?.__adaptations?.widthBreakpoints;
  const breakpointQuery = sideNavBreakpoint === 'none' ? '(width < 0px)' : `(width < ${activeWidthBreakpoints?.[sideNavBreakpoint] ?? DEFAULT_WIDTH_BREAKPOINTS[sideNavBreakpoint]}px)`;
  const isBelowBreakpoint = useMediaQuery(breakpointQuery, sideNavBreakpoint === 'none' ? false : mobileNavConfig?.defaultIsMobile);
  const [uncontrolledMobileOpen, setUncontrolledMobileOpen] = useState(false);
  const isMobileNavOpen = mobileNavConfig?.isOpen ?? uncontrolledMobileOpen;
  const mobileNavOnOpenChange = mobileNavConfig?.onOpenChange;
  const setMobileNavOpen = useCallback((open: boolean) => {
    if (!mobileNavIsControlled) {
      setUncontrolledMobileOpen(open);
    }
    mobileNavOnOpenChange?.(open);
  },
  // Depend on the callback itself, not on the config object: the documented
  // usage is an inline `mobileNav={{isOpen, onOpenChange}}` literal, which is
  // a new object every render and would otherwise churn this callback and the
  // context value memo built from it on every render of the shell.
  [mobileNavIsControlled, mobileNavOnOpenChange]);

  // Move focus to the main content container when the skip link is activated.
  // Hash navigation alone doesn't reliably move focus in every browser, so
  // focus the target explicitly (it's focusable via tabIndex={-1}).
  const handleSkipLinkClick = useCallback(() => {
    document.getElementById(MAIN_CONTENT_ID)?.focus();
  }, []);
  const isFill = height === 'fill';
  const isAuto = height === 'auto';

  // Nav style derived values
  const hasBanner = isRenderable(banner);
  const hasTopNav = isRenderable(topNav);
  const hasSideNav = isRenderable(sideNav);
  const hasNavContent = hasTopNav || hasSideNav;
  const mobileNavEnabled = !mobileNavDisabled && hasNavContent && mobileNavReactNode == null;
  const navHasDividers = variant === 'section';
  const isElevated = variant === 'elevated';
  const navAreaStyle = variant === 'wash' || variant === 'elevated' ? styles.navAreaWash : variant === 'surface' ? styles.navAreaSurface : undefined;
  // Section normally inherits the shell's surface background. Its auto-height
  // header needs to paint that surface itself while content scrolls beneath it.
  const headerAreaStyle = navAreaStyle ?? (isAuto && variant === 'section' ? styles.navAreaSurface : undefined);
  const contentAreaStyle = variant === 'wash' ? styles.contentBgWash : variant === 'elevated' && hasTopNav && hasSideNav && !isBelowBreakpoint ? styles.contentBgTransparent : variant === 'surface' || variant === 'elevated' ? styles.contentBgSurface : undefined;

  // Background for sticky elements in auto mode — must be opaque so content
  // doesn't show through when scrolling underneath. Uses the nav area bg if
  // set, otherwise falls back to the shell variant bg (always surface for section).
  const stickyBgStyle = navAreaStyle ?? styles.navAreaSurface;

  // =========================================================================
  // Header height measurement for sticky sideNav offset (auto mode)
  // =========================================================================
  const headerRef = useRef<HTMLDivElement>(null);
  const shellRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (!isAuto || !headerRef.current || !shellRef.current) {
      return;
    }
    const headerEl = headerRef.current;
    const shellEl = shellRef.current;
    const updateHeight = () => {
      const height = headerEl.getBoundingClientRect().height;
      shellEl.style.setProperty('--_app-shell-header-height', `${height}px`);
    };
    return observeResize(headerEl, () => updateHeight());
  }, [isAuto]);

  // =========================================================================
  // Determine if sideNav should show as overlay (mobile) or inline
  // =========================================================================
  const showSideNavInline = hasSideNav && !isBelowBreakpoint;

  // Mobile nav rendering modes:
  // 1. ReactNode shorthand — user provided <MobileNav> directly
  const shouldRenderMobileNavReactNode = mobileNavReactNode != null;
  // 2. Config with custom content
  const shouldRenderConfigContent = mobileNavEnabled && mobileNavConfigContent != null && isBelowBreakpoint;

  // =========================================================================
  // Mobile context — shared with MobileNavToggle and future TopNav mobile
  // =========================================================================
  // Stable id shared by the drawer (applied as its `id`) and the toggle
  // (referenced via `aria-controls`) so screen readers know what it controls.
  const mobileNavId = useId();
  const mobileContextValue = useMemo<AppShellMobileContextValue>(() => ({
    isMobile: isBelowBreakpoint,
    isMobileNavOpen,
    mobileNavId,
    toggleMobileNav: () => mobileNavEnabled && setMobileNavOpen(!isMobileNavOpen),
    openMobileNav: () => mobileNavEnabled && setMobileNavOpen(true),
    closeMobileNav: () => setMobileNavOpen(false),
    isMobileNavEnabled: mobileNavEnabled,
    hasAutoToggle: mobileNavHasToggle
  }), [isBelowBreakpoint, isMobileNavOpen, mobileNavId, setMobileNavOpen, mobileNavEnabled, mobileNavHasToggle]);

  // =========================================================================
  // Build header content (topNav + banner)
  //
  // In auto mode, the header wrapper gets sticky positioning so the topNav
  // stays pinned while the page scrolls. The ref is used to measure header
  // height for the sideNav's sticky offset.
  // =========================================================================
  // When below breakpoint, TopNav renders in mobile-bar mode (heading + endContent + toggle).
  // Wrap with mobile content context so TopNav knows there's SideNav content
  // in the drawer and shows the toggle even without its own collapsible items.
  const mobileContentValue = hasSideNav && mobileNavHasToggle ?
  // eslint-disable-next-line @eslint-react/no-unstable-context-value -- context transports ReactNode; instability is inherent
  <SideNavRenderContext value="drawer-content">
        {sideNav}
      </SideNavRenderContext> : null;
  const drawerMobileContentValue = hasSideNav ?
  // eslint-disable-next-line @eslint-react/no-unstable-context-value -- context transports ReactNode; instability is inherent
  <SideNavRenderContext value="drawer-content">
      {sideNav}
    </SideNavRenderContext> : null;
  const topNavContent = hasTopNav ? isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null ? <TopNavMobileContentContext value={mobileContentValue}>
        <TopNavRenderContext value="mobile-bar">{topNav}</TopNavRenderContext>
      </TopNavMobileContentContext> : topNav : null;
  const headerInner = hasTopNav || hasBanner ? <LayoutHeader padding={0} hasDivider={navHasDividers && hasTopNav}>
        {hasBanner && <div {...stylex.props(styles.banner, navAreaStyle)}>{banner}</div>}
        {hasTopNav && topNavContent}
      </LayoutHeader> : undefined;
  const headerContent = isRenderable(headerInner) ? <div ref={headerRef}
  // Top-level banner landmark for the header region (topNav + banner).
  // Safe here: the wrapper is never nested inside main/nav/other landmarks.
  role="banner" {...mergeProps(themeProps('app-shell-header', {
    variant
  }), stylex.props(headerAreaStyle, isAuto && styles.headerSticky))}>
      {headerInner}
    </div> : undefined;

  // =========================================================================
  // Build sideNav content
  //
  // In auto mode, the sideNav panel is not internally scrollable (the page
  // scrolls as a whole), but it gets sticky positioning so it stays pinned
  // below the header while the main content scrolls. A wrapper div applies
  // the sticky behavior since LayoutPanel doesn't accept style/className.
  // =========================================================================
  const sideNavPanel = showSideNavInline ? <LayoutPanel padding={0} hasDivider={navHasDividers} isScrollable={isFill} {...themeProps('app-shell-sidenav', {
    variant
  })} xstyle={[navAreaStyle, isAuto && stickyBgStyle, isAuto && styles.panelAutoFill]}>
      {sideNav}
    </LayoutPanel> : undefined;
  const sideNavContent = sideNavPanel != null && isAuto ? <div className="x2lah0s x7giv3 x7wzq59 xht72ud xpa73km x78zum5 xdt5ytf">{sideNavPanel}</div> : sideNavPanel;

  // =========================================================================
  // Build main content
  // =========================================================================
  const shouldElevateWithCorner = isElevated && hasTopNav && showSideNavInline;
  const mainInner = <LayoutContent padding={contentPadding ?? 0} role="main" id={MAIN_CONTENT_ID}
  // Focusable skip-link target (WCAG 2.4.1) — without tabIndex, several
  // browsers won't move focus to the div when the skip link is activated.
  tabIndex={-1} isScrollable={isFill} xstyle={[contentAreaStyle, styles.mainFocusTarget]}>
      {children}
    </LayoutContent>;
  const mainContent = shouldElevateWithCorner ? <div className="x1n2onr6 x78zum5 x98rzlu x2lwn1j x5yr21d">
      <div className="x10l6tqk x10a8y8t x10xzikg x183tx6i x47corl" />
      {mainInner}
    </div> : mainInner;

  // =========================================================================
  // Render
  //
  // TODO: Include root providers (ThemeProvider, ProseProvider, LayerProvider)
  // at the app level once they're available for wrapping.
  // =========================================================================
  // =========================================================================
  // Build auto mobile nav hamburger for TopNav
  // Injected into the headerContent when mobileNav is enabled and hasToggle
  // =========================================================================
  const shouldShowAutoToggle = !mobileNavDisabled && mobileNavHasToggle && isBelowBreakpoint;

  // For sidenav-only layouts with no TopNav, render the sideNav in topbar
  // mode — it shows heading + footer icons horizontally, with the hamburger
  const autoMobileTopBar = shouldShowAutoToggle && !hasTopNav && hasSideNav ? <div
  // Banner landmark for the mobile top bar, so the sidenav-only layout
  // exposes the same landmark structure as the topNav one. Only when
  // there is no headerContent: a banner slot with no topNav renders both,
  // and two sibling banner regions is worse than the one this restores.
  role={headerContent == null ? 'banner' : undefined} {...mergeProps(themeProps('app-shell-header', {
    variant
  }), stylex.props(headerAreaStyle, isAuto && styles.headerSticky))}>
        <LayoutHeader padding={0} hasDivider={navHasDividers}>
          <div className="x78zum5 x6s0dn4 x1k15mir xf314gf" role="navigation" aria-label={t('@astryx.appShell.mobileNavigation')}>
            <SideNavRenderContext value="topbar">
              {sideNav}
            </SideNavRenderContext>
            <MobileNavToggle />
          </div>
        </LayoutHeader>
      </div> : undefined;
  return <AppShellMobileContext value={mobileContextValue}>
      <div {...rest} ref={useMergedRefs(ref, shellRef)} data-testid={dataTestId} {...mergeProps(themeProps('app-shell', {
      variant
    }), stylex.props(styles.root, variant === 'wash' ? styles.variantWash : variant === 'surface' ? styles.variantSurface : variant === 'section' ? styles.variantSection : styles.variantElevated, isFill ? styles.rootFill : styles.rootAuto, xstyle), className, style)}>
        {/* Skip-to-content link */}
        <a href={`#${MAIN_CONTENT_ID}`} onClick={handleSkipLinkClick} {...focusOutlineProps.focusVisible(styles.skipLink)} data-testid="skip-to-content">
          {t('@astryx.appShell.skipToContent')}
        </a>

        <Layout height={height} padding={0} header={<>
              {headerContent}
              {autoMobileTopBar}
            </>} start={sideNavContent} content={mainContent} />

        {/* Keep the drawer mounted while its exit animation completes. Native dialog
            visibility hides it once closed; responsive mounting stays unchanged. */}
        {shouldRenderMobileNavReactNode && mobileNavReactNode}
        {shouldRenderConfigContent && mobileNavConfigContent}
        {isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null && !mobileNavConfigContent && <>
              {/* SideNav drawer — always mounted so presence detection works.
                Hidden when TopNav owns the drawer (combined mode passes
                sideNav via TopNav's mobile content context instead). */}
              {hasSideNav && !hasTopNav && <SideNavRenderContext value="drawer">
                  {sideNav}
                </SideNavRenderContext>}
              {hasTopNav && <TopNavMobileContentContext value={drawerMobileContentValue}>
                  <TopNavRenderContext value="drawer">
                    {topNav}
                  </TopNavRenderContext>
                </TopNavMobileContentContext>}
            </>}
      </div>
    </AppShellMobileContext>;
}
AppShell.displayName = 'AppShell';