feat: Add content overlay and status bar overlay mode for condensed layout

[jjbeckman13]

Summary

Adds a content overlay and status bar overlay mode to StandardLayout, enabling parent applications to iframe an AppUI child app and seamlessly place their own UI components over a reserved transparent zone.

Motivation

Portal applications have the need to overlay their own header, toolbar, or navigation components on top of the viewport area without conflicting with the AppUI widget panel layout. This PR provides first-class support for that pattern.

Changes

Core Library (@itwin/appui-react)

• StandardLayout.tsx — New optional contentOverlay (ReactNode) and statusBarOverlay (boolean) props on the internal layout component. When contentOverlay is provided, it renders inside .nz-centerArea above the viewport. When statusBarOverlay is true, the status bar renders between widget panels (overlaying the viewport) instead of as a full-width grid row.

• StandardLayout.scss — Added .nz-statusBarOverlay styles with:

  • Transparent background on the docked bar
  • Per-item rounded pill backgrounds (--iui-color-background + --iui-border-radius-1)
  • Configurable spacing/padding with left offset to clear the iTwin.js viewport watermark
  • Bottom margin to float above the viewport edge

• ConfigurableUiContent.tsx — Exposed statusBarOverlay in the public ConfigurableUiContext so consuming apps can enable it declaratively.

• Frontstage.tsx — Reads statusBarOverlay from context and passes it through to StandardLayout.

Test App

• ContentOverlayFrontstage.tsx — New frontstage demonstrating the overlay pattern:

  • OverlaySpacer component posts its bounding rect to window.parent via postMessage
  • Listens for appui-set-overlay-mode messages to toggle overlay mode without iframe reload
  • Includes sample status bar items (coordinates, units, connection status)

• parent-app.html — Full demo of the parent portal pattern:

  • Normal mode: header + left nav + embedded iframe
  • Full-screen mode: hides chrome, iframe fills viewport, parent overlays its toolbar via postMessage-reported coordinates
  • Toggle via icon button — no iframe src reload, uses message passing

How It Works

┌─────────────────────────────────────────┐
│  Parent App (portal)                    │
│  ┌───────────────────────────────────┐  │
│  │ iframe (AppUI child)              │  │
│  │  ┌─────────────────────────────┐  │  │
│  │  │ .nz-centerArea              │  │  │
│  │  │  ┌──────────────────────┐   │  │  │
│  │  │  │ contentOverlay spacer│◄──┼──┼──┼── posts rect to parent
│  │  │  └──────────────────────┘   │  │  │
│  │  │  viewport                   │  │  │
│  │  │  ┌──────────────────────┐   │  │  │
│  │  │  │ statusBarOverlay     │   │  │  │
│  │  │  └──────────────────────┘   │  │  │
│  │  └─────────────────────────────┘  │  │
│  └───────────────────────────────────┘  │
│  ┌───────────────────────────────────┐  │
│  │ Overlay bar (positioned via rect) │  │
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘

Demo

2026-04-30_15-45-04.mp4

Testing

1. Run the test-app: pnpm --filter test-app dev
2. Open http://localhost:3000/parent-app.html
3. Click the expand icon in the header to enter full-screen overlay mode
4. Observe: parent toolbar overlays the reserved spacer, status bar items appear as floating pills over the viewport
5. Click the collapse icon to exit back to normal layout

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}