Host Provider — Cinder component documentation

Overview

Supplies a desktop host platform to descendant Cinder surfaces. It defaults to web, where desktop-only window chrome behavior is inert.

safeHeaderLeft and safeHeaderRight publish the host-provided titlebar insets for Cinder's internal drag-region handshake. Both default to 0px; desktop hosts should set them from the actual native window controls rather than copying OS-specific spacing into application CSS.

HostProvider is the shared coordination boundary for desktop-aware Cinder surfaces. It renders a display: contents provider node, so it does not create a layout box.

Usage

<script lang="ts">
  import { HostProvider } from '@lostgradient/cinder/host-provider';
</script>

<HostProvider platform="macos" safeHeaderLeft="4rem" safeHeaderRight="1rem">
  <p>Desktop-aware application surface</p>
</HostProvider>

Live preview

Desktop-aware application surface

When to use

Use when

A desktop shell needs platform-aware window chrome behavior in descendant components.

Avoid when

The application is web-only and does not render desktop window chrome.

Examples

Desktop host

Provide host platform information to descendants.

Props

Props for host-provider
Name	Type	Default	Description
`platform`	`'web' \| 'macos' \| 'windows' \| 'linux'`	`'web'`	Host platform. Defaults to `web`, where desktop chrome behavior is inert.
`safeHeaderLeft`	`text`	`'0px'`	Inline-start titlebar inset supplied by the desktop host. Defaults to `0px`.
`safeHeaderRight`	`text`	`'0px'`	Inline-end titlebar inset supplied by the desktop host. Defaults to `0px`.
`children`	`snippet`		Descendant application surface.