@sig-ui/dom

Browser runtime utilities for SigUI.

What this package is for

Use @sig-ui/dom for:

• runtime brand/theme variable updates
• CSS variable injection/removal
• breakpoint and device-context watchers
• adaptive token application based on environment
• token-aligned animation helpers

How it fits in SigUI

core -> theme -> dom

• Depends on @sig-ui/core and @sig-ui/theme.
• Peer layer with @sig-ui/components.
• Optional in static build-only setups.

Install

bun add @sig-ui/dom

Quick examples

import { applyBrandColor, removeBrandColor } from "@sig-ui/dom";

applyBrandColor("#0ea5e9");
// later
removeBrandColor();

import { watchBreakpoint } from "@sig-ui/dom";

const stop = watchBreakpoint((bp) => {
  document.documentElement.dataset.bp = bp;
});

import { animate } from "@sig-ui/dom/animate";

animate(".card", { y: [8, 0], opacity: [0, 1] }, { duration: "normal" });

Main entry points

• @sig-ui/dom
• @sig-ui/dom/animate
• @sig-ui/dom/spacing
• @sig-ui/dom/manager
• @sig-ui/dom/viz
• @sig-ui/dom/inspector

LLM instructions

When generating code with @sig-ui/dom:

• Use this package only in browser/client code. In SSR frameworks, run it from client lifecycle hooks or guard with typeof window !== "undefined".
• Use static CSS generated by @sig-ui/cli for initial rendering; use DOM runtime helpers for runtime changes, watchers, and adaptive behavior.
• Store and call cleanup functions returned by watchers such as watchBreakpoint or watchDarkMode.
• Do not expect this package to register sg-* elements. Pair it with @sig-ui/components when Web Components are needed.
• Import animation helpers from @sig-ui/dom/animate and token/runtime helpers from the documented entry points above.

Full docs

• docs/ARCHITECTURE_OVERVIEW.md
• docs/DOM.md
• docs/THEME.md (upstream)
• docs/COMPONENTS.md (peer layer)