Optional runtime styling
Request-local collection, ownership-safe adoption, and explicit streaming constraints.
Optional dependency
The standard component path uses prebuilt CSS. Applications that need runtime rule insertion can opt into @fayegram-ai/faye-ui/runtime-styles and a rendering integration such as @fayegram-ai/faye-ui/nextjs, within the single public package.
GlobalStyles accepts trusted CSS with an immutable identity and order. The styled helper binds an already-compiled sheet and forwards explicitly permitted props. Neither API makes untrusted arbitrary CSS safe.
Registry lifecycle
A DOM container has one registry owner. The registry adopts matching direct-child hydrated sheets, validates identities, reference-counts client additions, and releases only what it owns.
The Next adapter marks emitted styles with a request-local React identity. Hydration hoists only its marked streamed tags, validates all identities before mutation, preserves unrelated registries, and observes late stream arrivals. The head container still has one owner: place one FayeUIStyleRegistry at the application boundary, not one around every widget.
The deferred registry is memory-only until attachment. React rendering does not mutate a document or acquire global ownership. StrictMode detach and reattach are supported by the registry contract.
Integration evidence
Actual Next.js/React integration, streaming ownership and cleanup are mandatory verification gates. A matching passing report establishes those automated checks; it does not constitute a general streaming performance guarantee or replace device/CSP review.
Live examples
Try the controls below, then read or copy the complete example to adapt it for your application.
Optional stylesheet runtime
A scoped global rule from the optional runtime.
Actual Next.js streaming integration is checked by the mandatory RSC/browser fixtures. Late styles cannot reorder already-flushed sheets.
Read the complete example
'use client';
import { compileSheet } from '@fayegram-ai/faye-ui/styles';
import { styled } from '@fayegram-ai/faye-ui/runtime-styles/styled';
import { GlobalStyles } from '@fayegram-ai/faye-ui/runtime-styles/react';
import { FayeUIStyleRegistry } from '@fayegram-ai/faye-ui/nextjs';
import { Section } from '../example';
const sheet = compileSheet({ schemaVersion: 1, id: 'docs-styled-note', component: 'docs.note', rules: [{ id: 'base', part: 'root', declarations: { padding: { token: 'space.4' }, border: '1px solid var(--faye-ui-color-border)', borderRadius: { token: 'radius.control' }, backgroundColor: { token: 'color.subtle' } } }] }, { schemaVersion: 1, name: 'docs.note', parts: ['root'], states: [], variants: {}, defaults: {} });
const Note = styled('aside', { sheet });
export default function RuntimeStyles() {
return <FayeUIStyleRegistry><Section title="Optional stylesheet runtime" note="Actual Next.js streaming integration is checked by the mandatory RSC/browser fixtures. Late styles cannot reorder already-flushed sheets."><Note aria-label="Styled note">A component bound to a compiled customization sheet.</Note><GlobalStyles id="docs-runtime-note" order={1} css="@layer faye-ui.local {.docs-runtime-note {font-style:italic}}"/><p className="docs-runtime-note">A scoped global rule from the optional runtime.</p></Section></FayeUIStyleRegistry>;
}