App

import { createRoot } from 'react-dom/client';
import { App } from '@wearables-ui-toolkit/mrbd';
import { AppRoutes } from './AppRoutes';

function Root() {
  return (
    <App>
      <AppRoutes />
    </App>
  );
}

createRoot(document.getElementById('root')!).render(<Root />);

html,
body,
#root {
  height: 100%;
  margin: 0;
  background-color: var(--uit-color-background-window);
}

<App className="app-shell" style={{ padding: 'var(--uit-spacing-medium)' }}>
  <AppRoutes />
</App>

import { App } from '@wearables-ui-toolkit/mrbd/App';

• Text font.App registers Noto Sans in the regular, medium, and bold weights used by the design system. It checks for an installed copy first by registering local-only font faces ahead of the downloadable family. On its first mount, App appends the Google Fonts stylesheet link and preconnect hints; the browser fetches font files only when no local copy is installed. No font package is needed, and the toolkit registers no other family.
• Theme scope. The root anchors the stylesheet’s element reset and base typography. The box-sizing and margin and padding reset, text font stack, font smoothing, window background, and primary text colors apply within this subtree. The zero-specificity reset does not override component styles or affect the host document outside App.
• Platform profile.App supplies the Meta Ray-Ban Display platform profile to its subtree. Components such as Container and Surface read this profile automatically when calculating their default content scale, so applications do not pass a platform value to individual components.
• Focus root.App scopes the focus-navigation provider to its content and enables automatic initial focus. On mount, and when the focused element is removed, the toolkit focuses the top-left eligible interactable. The toolkit skips elements without a measured box and elements with initialFocusEligible={false}. If nothing else has focus on mount, App focuses its content element to give directional navigation a starting point.
• Toast presenter.App owns the toast container. Use the toast API to show a toast; mounting another presenter is unsupported because it can produce duplicate or inconsistent announcements.
• Floating portal root.App provides an absolutely positioned overlay layer inside the content element. The layer sits above ordinary content and ignores pointer events while tooltips, context menus, vertical menus, and other floating interface elements render through it. Replacing this provider is unsupported because the toolkit owns consistent overlay placement and focus scope.
• Tooltip boundary.App uses the content element as the boundary for anchored tooltips, keeping them within the application viewport.

• The application owns the document title, landmarks, and accessible names; App does not add roles, landmarks, or accessible names.
• The content element is programmatically focusable but is not a tab stop. This preserves the first real control as the target of the first Tab press.
• Floating interface elements render through a layer inside the content element, so overlays stay in the same accessibility subtree as their related content.

• Render one App at the top of the tree, above the router, so the toolkit has one consistent focus and overlay root.
• Let App load the component styles, semantic tokens, and typography classes.
• Give the mount element a real height so App can fill it responsively.
• Let App own the platform profile, toasts, floating portals, and initial focus.

• Avoid recreating only part of the application shell; use App so fonts, focus, toasts, and portals remain coordinated.
• Do not nest App. Multiple roots are an unsupported composition and create competing focus, toast, and portal ownership.
• Do not mount another toast presenter or floating-portal provider. App owns both services for its subtree.
• Avoid loading a different text font or overriding the registered family. Noto Sans is the public toolkit text font and keeps typography consistent.
• Prefer a dark window background for the additive-light display. A light page background emits light where the design expects transparency.
• Avoid fixed device dimensions. Size the root from the available viewport so the layout stays responsive across Meta Ray-Ban Display environments.