@aihu/css-engine

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.

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

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

function compile(classes: string[]): string

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

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

function defineStylePack(input: StylePackInput): StylePack

Define a style pack from a token map.

function isUsableExecutable(candidate: string): boolean

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

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`).

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

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

const aihuDefault: StylePack

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

const aihuGraphite: StylePack

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

const builtinPacks: Record<string, StylePack>

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

const DARK_SELECTOR

The selector the dark overrides are emitted under.

const position

interface CompileSfcOptions {
  /**
   * Project theme: CSS containing `@theme { … }` blocks, or a bare
   * `--name: value;` declaration list. Replaces the built-in default token
   * values. They still compile to `var(--name, <value>)` fallbacks, so a theme
   * the component inherits from the document wins; an SFC's own `@theme`
   * block overrides both.
   */
  theme?: string
  /**
   * `false` drops the default-value fallbacks, so token references compile to
   * bare `var(--name)`. For apps that always load their tokens at `:root`.
   * Tokens an SFC's own `@theme` sets are still declared. Default `true`.
   */
  hostTokens?: boolean
}

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.

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>
}

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

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

type Placement

type PositionOptions

type TokenMap = Record<string, string>

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