OnboardingShell

PURPOSE

Stripped-down React layout shell for the prologue tunnel. Renders a dark, centered container with no bottom navigation, no currency bar, and no hamburger menu. Used only during the prologue beats before the hub is unlocked.

OWNS

• A single OnboardingShell named export.
• The wrapping div.sig-shop element with overridden justifyContent: 'center'.
• The inner main element that hosts centered, scrollable child content with touch scrolling enabled.

READS FROM

• react — imports the ReactNode type.
• ../screens/shop/shop.css — side-effect import that supplies the sig-shop class styling.
• OnboardingShellProps — local interface with a single children: ReactNode prop.

PUSHES TO

• Nothing. The component is purely presentational; it renders children into a styled wrapper and emits no events, callbacks, or store mutations.

DOES NOT

• Does not render a bottom navigation bar.
• Does not render a currency bar.
• Does not render a hamburger menu.
• Does not subscribe to any store or context.
• Does not dispatch actions or call services.
• Does not conditionally render — always wraps children unchanged.

Signals

• None emitted.
• None consumed.

Entry points

• OnboardingShell({ children }) — named React function component. Mounted by prologue-tunnel screens that need a chrome-free layout.

Pattern notes

• Reuses the sig-shop class from the shop screen stylesheet to inherit the full-height column layout, then overrides justifyContent inline to recenter content vertically.
• Inline styles on the main element handle flex layout, padding, gap, centering, and overflow. WebkitOverflowScrolling: 'touch' is set for momentum scrolling on iOS.
• No props beyond children, keeping the shell a pure wrapper. Guided CTA buttons and prologue copy are provided by the caller, not by the shell itself.