Window & viewport
The architecture of space.
Space management
The viewport is the stage for things that live above the page.
Notifications, windows, and overlays need a central order. Scala JS UI 1.0 gathers those concerns in the viewport so pages do not have to manage global UI layers on their own.
Notify
Short feedback without losing context.
Window
Focused work surfaces above the page.
Overlay
Anchor-bound surfaces for selection and details.
Viewport
Four notification types show how global feedback is triggered from a page.
The viewport is the quiet center that carries windows, notifications, and overlays. It brings order to the chaos and gives it a stage.
Window
A window remains in the global viewport while the page underneath keeps its state.
Windows are movable islands in the viewport. They allow focus without losing context.
Center
Global UI belongs in one place
Viewport.windows and Viewport.notifications form the state of the top UI layer.
Focus
Windows keep Z-index and activity
The viewport can touch, arrange, and close windows without duplicating page logic.
Readability
Pages only trigger intents
The page says notify or addWindow, the viewport handles presentation and lifecycle.
Usage
The page binds the viewport once and then only sends clear intents.
scala
// Place the viewport in the app shell
viewport {
router(routes)
}
// Send notification
Viewport.notify("Hello world", NotificationKind.Success)
// Add window
Viewport.addWindow(new WindowConf(
title = "My window",
component = () => new MyContent()
))