@gluonjs/core / packages/atoms/src / UiOwner

Interface: UiOwner

Properties

disposed

readonly disposed: boolean

---

selection

readonly selection: UiStyleSelection

---

styleOwner

readonly styleOwner: StyleSheetOwner

Additional target-scoped sheets explicitly retained by this UI handle.

---

target

readonly target: StyleTarget

---

tenantId?

readonly optional tenantId?: string

---

theme

readonly theme: UiThemeName

---

themeSheet

readonly themeSheet: CSSStyleSheet

Methods

dispose()

dispose(): void

Returns

void

---

setTheme()

setTheme(theme): void

Parameters

theme

UiThemeName

Returns

void

---

setTokens()

setTokens(tokens): void

Parameters

tokens

UiTokenOverrides

Returns

void

Example

Retain the shared target foundation, active theme, component style owner, and exact cleanup lifecycle:

import {
  UiHydrationError,
  createUiStyleSelection,
  installUi,
  type InstallUiOptions,
  type UiHydrationMismatch,
  type UiOwner,
  type UiStyleSelection,
} from '@gluonjs/atoms';

const options = { theme: 'dark', hydrate: false } satisfies InstallUiOptions;
const selection: UiStyleSelection = createUiStyleSelection(options.theme);
const owner: UiOwner = installUi(document, options);
owner.setTheme('light');
console.log(selection.entries.map((entry) => entry.id), owner.theme, owner.themeSheet);
owner.dispose();

const mismatch: UiHydrationMismatch = 'missing';
const diagnostic = new UiHydrationError(mismatch, 'The server omitted the UI theme carrier.');
console.error(diagnostic.code, diagnostic.mismatch);