ESC

@aihu/css-engine

Runtime core

aihu CSS engine — Tailwind v4 hard fork with WC-native scoped output.

version: 0.6.1
exports: 19
values: 13
types: 6

`anchorFallback`

function

function anchorFallback( anchor: Element, floating: HTMLElement, opts: PositionOptions = {}, ): () => void

Fallback for the `anchor:` feature: position `floating` against `anchor` with JS when native CSS anchor positioning is unsupported.

`cn`

function

function cn(...inputs: ClassValue[]): string

Merge class values, resolving last-wins conflicts per property group.

`compile`

function

function compile(classes: string[]): string

`compileSfc`

function

function compileSfc(source: string, id?: string, lightScopeId?: string): string

Compile a `.aihu` SFC source string to scoped, shadow-DOM-embedded CSS.

`defineStylePack`

function

function defineStylePack(input: StylePackInput): StylePack

Define a style pack from a token map.

`isUsableExecutable`

function

function isUsableExecutable(candidate: string): boolean

Whether `candidate` is a usable `aihu-css-compile` executable — NOT merely a present file.

`popoverFallback`

function

function popoverFallback( anchor: Element, panel: HTMLElement, opts: PositionOptions = {}, ): () => void

Fallback for the `popover:` feature: emulate the Popover API's top layer by portaling `panel` out of the normal flow and positioning it against `anchor` with the SHARED positioning shim (`position`, also used by `anchorFallback`).

`portal`

function

function portal(el: HTMLElement): () => void

Portal `el` to a top-layer-emulating container appended to `<body>` with a high z-index.

`position`

function

function position( anchor: Element, floating: HTMLElement, opts: PositionOptions = {}, ): Placement

Position `floating` against `anchor` and apply `position: fixed; left/top`.

`aihuDefault`

const

const aihuDefault: StylePack

`aihu-default` — the aihu brand palette (warm paper + ink, accent `#c8543a`), derived from `aihu-logo.html` / `aihu-wordmark.svg`.

`aihuGraphite`

const

const aihuGraphite: StylePack

`aihu-graphite` — a neutral monochrome ramp expressed in `oklch()` (chroma ≈ 0).

`builtinPacks`

const

const builtinPacks: Record<string, StylePack>

All built-in packs, keyed by name — handy for registry/iteration.

`DARK_SELECTOR`

const

const DARK_SELECTOR

The selector the dark overrides are emitted under.

`PositionOptions`

interface

interface PositionOptions {
  /** Preferred side. Default `'bottom'`. */
  placement?: Placement
  /** Gap between anchor and floating element, in px. Default `4`. */
  offset?: number
  /** Flip to the opposite side if it would overflow the viewport. Default `true`. */
  flip?: boolean
}

`StylePack`

interface

interface StylePack {
  readonly name: string
  readonly tokens: TokenMap
  readonly dark: TokenMap
  /** Named themes, keyed by theme name. Empty when the pack declares none. */
  readonly themes: Record<string, TokenMap>
  /** The named themes this pack offers, in declaration order. */
  readonly themeNames: readonly string[]
  /**
   * Serialize the pack to a `:root { … }` (+ dark, + named-theme) CSS string —
   * the same shape as the shipped `styles/*.css` bundles.
   */
  toCss(): string
}

A registered, validated style-pack descriptor.

`StylePackInput`

interface

interface StylePackInput {
  /** Pack name, e.g. `'acme'` (used for registration / debugging). */
  name: string
  /** Light-theme tokens (the `:root` block). Names without the `--` prefix. */
  tokens: TokenMap
  /**
   * Optional dark-theme overrides. Emitted under {@link DARK_SELECTOR} — i.e.
   * both `.dark` and `[data-theme="dark"]`.
   */
  dark?: TokenMap
  /**
   * Optional named themes, each emitted as its own `[data-theme="<name>"]`
   * block. This is the dimension a swappable theme catalog (daisyUI's `light`/
   * `cupcake`/`dracula`/… set) transcribes into.
   *
   * Each entry is an OVERRIDE layer over `tokens`, not a standalone theme: only
   * the names that differ from the base need listing, exactly as `dark` works
   * today. A theme is selected by putting `data-theme="<name>"` on an ancestor
   * (per Founder-decision #3, `<html>`).
   *
   * `'dark'` is reserved — use the `dark` field, which is dual-keyed.
   */
  themes?: Record<string, TokenMap>
}

`ClassValue`

type

type ClassValue = string | number | null | undefined | false | ClassValue[]

A class value: string, falsy (dropped), or a nested array of the same.

`Placement`

type

type Placement = 'top' | 'bottom' | 'left' | 'right'

Where to place the floating element relative to its anchor.

`TokenMap`

type

type TokenMap = Record<string, string>

A design-token map: `name` → CSS value.