# Tempo Documentation

This file is generated from the Tempo documentation site.

# Tempo


| [![npm @tempots/dom](https://img.shields.io/npm/v/@tempots/dom?label=@tempots/dom)](https://www.npmjs.com/package/@tempots/dom) | [![npm @tempots/std](https://img.shields.io/npm/v/@tempots/std?label=@tempots/std)](https://www.npmjs.com/package/@tempots/std) | [![npm @tempots/ui](https://img.shields.io/npm/v/@tempots/ui?label=@tempots/ui)](https://www.npmjs.com/package/@tempots/ui) | [![codecov](https://codecov.io/gh/fponticelli/tempots/branch/main/graph/badge.svg)](https://codecov.io/gh/fponticelli/tempots) | [![CI](https://github.com/fponticelli/tempots/workflows/CI/badge.svg)](https://github.com/fponticelli/tempots/actions) |
| --- | --- | --- | --- | --- |


> A new UI Framework for the web

## Why Choose Tempo?

- Simple TypeScript functions
- Predictable rendering without surprises
- Zero dependencies
- No hidden complexities
- Directly updates the DOM (no virtual DOM)
- Fine-grained control when required
- Lightweight and efficient

To get started, see the [Quick Start](#quick-start) guide.

## Documentation

- [Quick Start](#quick-start): Get started with Tempo in a few simple steps
- [Installation](#installation): Install Tempo using npm or yarn
- [How It Works](#how-does-it-work): Learn how Tempo works under the hood
- [Renderables](#renderables): The building blocks of Tempo applications
- [Signals](#signals): Reactive state management
- [Build your own Renderables](#build-your-own-renderables): Create reusable components
- [Providers](#providers): Dependency injection and context sharing
- [Examples & Best Practices](#examples-patterns): Common patterns and best practices
- [Troubleshooting & FAQ](#troubleshooting-faq): Common issues and solutions

## Libraries

Tempo provides a set of libraries to help you build your applications:

- [@tempots/dom](#tempotsdom): The core UI framework
- [@tempots/std](#tempotsstd): A [standard library](#standard-library) with utility functions and types
- [@tempots/ui](#tempotsui): A collection of [reusable UI components](#ui-components)

## Demos

See Tempo in action with these demo applications:

- [Hackers News PWA](https://tempo-ts.com/demo/hnpwa.html): A Hacker News reader
- [7GUIs](https://tempo-ts.com/demo/7guis.html): Implementation of the 7GUIs benchmark
- [TodoMVC](https://tempo-ts.com/demo/todomvc.html): The classic TodoMVC example
- [Counter Demo](https://tempo-ts.com/demo/counter.html): A simple counter application

## LLM-Friendly Documentation

This documentation is available in LLM-optimized formats following the [llms.txt](https://llmstxt.org/) convention:

- [`llms.txt`](/llms.txt) — Documentation index for AI tools
- [`llms-full.txt`](/llms-full.txt) — Complete documentation in a single file

---

# Quick Start

Tempo can be used for fully fledged single-page applications or simple widgets. Either way, it is easy to get started:

1.	Define a template or component
2.	Render it to the DOM at a specific location

## Hello World

A classic “Hello World” example:```ts
import { html, render } from '@tempots/dom'

// Define a template or renderable
const HelloWorld = html.h1('Hello World')

// Render it to the DOM
render(HelloWorld, document.body)
```

The `render()` call returns a function that can be used to remove the rendered template from the DOM:

```ts
// Render it to the DOM
const remove = render(HelloWorld, document.body)

// Remove it from the DOM after 1 second
setTimeout(() => {
  console.log('Removing HelloWorld')
  remove()
}, 1000)
```

## Add state and interactivity

State in Tempo is managed through signals. Signals are reactive and can be used to update the DOM (or anything else) when they change. A `Signal` is a readonly object that can be observed but not updated. A `Prop` is a writable object that can be updated. A `Computed` is a readonly object that is derived from other signals.

Here is an example of a simple counter:

```ts
import { html, on, render, prop } from '@tempots/dom'

// Define a writeable signal
const count = prop(0)

// Define a template
const Counter = html.div(
  html.h1(count.map(v => `count: ${v}`)),  // ✨ Auto-disposed
  html.div(
    html.button(on.click(() => count.value++), '+'),
    html.button(on.click(() => count.value--), '-'),
  )
)

// Render it to the DOM
render(Counter, document.body)
```

The `count` signal is updated by mutating the `count.value` that computes a new value based on the current value. `count` can also be set directly by calling `count.set()` or update with a function with `count.update(v => v+1)`.

What about ``count.map(v => `count: ${v}`)``? This is a `Computed` signal that is derived from the `count` signal. It will update whenever `count` changes. The `map()` function is a helper function that maps the value of the signal to a new value.

Events are handled by using the functions associated to the `on` object. The `on.click()` function creates an event listener for the `click` event.

### Automatic Memory Management

**Important:** Signals created within renderables (like `count` and `count.map(...)` above) are automatically tracked and disposed when the component is removed from the DOM. This means:

- ✅ No manual cleanup needed
- ✅ No memory leaks
- ✅ Works with all signal types: `prop()`, `signal()`, `computed()`
- ✅ Works with derived signals: `.map()`, `.filter()`, `.flatMap()`, etc.

Tempo automatically creates a disposal scope for each renderable and tracks all signals created within it. When the renderable is removed from the DOM, all tracked signals are automatically disposed.

Note that differently from other frameworks, Tempo does not make a distinction between children nodes, attributes, properties, or event handlers. Everything satisfies the same `Renderable` type and `Renderable`s can be nested in any component that accept children. This brings a lot of flexibility and simplicity to the API. One example is that you can use the `Portal` component not just to render the content of a selected element but also change/add to its attributes, classes and event handlers.

## Next Steps

- [Installation](#installation)
- Learn more about [how Tempo works](#how-does-it-work)
- [Renderables](#renderables), the building blocks of Tempo applications
- [Signals](#signals), the reactive core of Tempo
- [Learn more about Building your own Renderables](#build-your-own-renderables)
- [Render](#render), the function to apply Renderables to the DOM

---

# Installation

Tempo is available as a package on npm. You can install it using npm or yarn:```bash
# npm
npm install @tempots/dom

# yarn
yarn add @tempots/dom
```

Tempo is written in TypeScript so types are generated and included in the package. You can use Tempo with or without TypeScript. If you are using TypeScript, you will get full type checking and autocompletion.

`@tempots/dom` doesn't have any dependency. If you use `@tempots/ui` you will also need to install `@tempots/dom` and `@tempots/std` as they are peer dependencies.

## Additional Packages

Tempo provides additional packages for specific use cases:

| Package | Purpose |
|---------|---------|
| `@tempots/std` | Standard library with utilities and common patterns |
| `@tempots/ui` | Pre-built UI components |
| `@tempots/server` | Server-side rendering to strings and streams |
| `@tempots/client` | Client-side hydration and islands architecture |
| `@tempots/vite` | Vite plugin for SSG with automatic route discovery |

### For SSR/SSG Projects

If you're building a server-rendered or static site, install the SSR packages:

```bash
npm install @tempots/dom @tempots/server @tempots/client @tempots/vite
```

See [SSR & Headless Rendering](#ssr-headless-rendering) for detailed documentation.

## Next Steps

- [How does Tempo work?](#how-does-it-work)
- [Learn more about Renderables](#renderables)
- [Learn more about Signals](#signals)
- [Learn more about Building your own Renderables](#build-your-own-renderables)
- [SSR & Headless Rendering](#ssr-headless-rendering)
- [Explore Examples & Best Practices](#examples-patterns)
- [Learn more about render](#render)

---

# How Does It Work?

## Renderable

The core of Tempo is the `Renderable` type. A `Renderable` is a function with the following signature:```ts
type Renderable = (context: DOMContext) => Clear
type Clear = (removeTree: boolean) => void
```

The `Renderable` function takes a `DOMContext` object, which provides access to the DOM and other utilities. The function returns a `Clear` function that removes the rendered template from the DOM.

This simple signature offers flexibility and ease of use. For instance, consider the `Fragment` component, which can have multiple children but doesn’t contribute to the DOM itself. It’s used to group multiple renderables together. Here’s its implementation:

```ts
export const Fragment =
  (...children: TNode[]): Renderable =>
  (ctx: DOMContext) => {
    const clears = children.map(child => renderableOfTNode(child)(ctx))
    return (removeTree: boolean) => {
      clears.forEach(clear => clear(removeTree))
    }
  }
```

In Tempo, you often pass a `TNode` (short for Tempo Node) to existing renderables. A `TNode` is a union type that includes commonly used types in Tempo: `Renderable`, `Value<string>`, `Value<number>`, `Value<boolean>`, `Signal<string | null | undefined>`, `undefined`, `null`, or an `Array<Renderable>`. The `renderableOfTNode` function helps convert a `TNode` to a `Renderable`.

Using `TNode` makes the API more flexible and allows for a more declarative syntax.

```ts
html.div('Hello World')
// equivalent to
html.div(TextNode('Hello World'))
```

### Clear

The `Clear` function removes the rendered template from the DOM. Its argument, `removeTree`, indicates whether to remove side effects, such as clearing an interval or timeout, and all DOM modifications (`true`) or only side effects (`false`).

### TNode

A `TNode` is treated differently based on its type:

- `string`, `number`, `boolean` or their `Signal` counterparts: Treated as a text node.
- Signals containing `null` or `undefined` values render as empty text (equivalent to `''`).
- `undefined` or `null`: Ignored (renders nothing).
- `Renderable`: Left unmodified.
- `Renderable[]`: Gets wrapped into a `Fragment`.

## DOMContext

The `DOMContext` object, passed to the Renderable function, provides access to the DOM and other utilities. It has the following properties:

- `element`: The Element instance associated with this context.
- `reference`: An optional Node instance serving as a reference for this context.
- `document`: The Document instance associated with this context.

The reference node, `TextNode` with an empty string, acts as a placeholder when elements are added or removed between siblings. It’s useful for `Renderables` like `ForEach` or `When`, which need to track element positions in the DOM.

Additionally, `DOMContext` contains a collection of providers for shared state between Renderables, avoiding prop drilling and keeping the API clean. The `isFirstLevel` property, still experimental, marks nodes for server-side rendering and hydration.

## Next Steps

- [Learn more about Renderables](#renderables)
- [Learn more about Signals](#signals)
- [Learn more about Building your own Renderables](#build-your-own-renderables)
- [Explore the Standard Library](#standard-library)
- [Discover UI Components](#ui-components)
- [Learn more about render](#render)

---

# Renderables

Renderables or components are the building blocks of Tempo applications. They are the templates that are rendered to the DOM. Tempo provides a set of functions to create and manipulate renderables.

The Renderable functions use the convention of starting with a capital letter. This is to differentiate them from regular functions and to make it easier to identify them in the code. The notable exception is for basic html/svg elements, which are lowercase.

## HTML/SVG, text and Attributes

To create HTML or SVG elements, use the `html` and `svg` objects. Each of them contains the full list of available tags as functions. For example, to create a `div` element, use `html.div()`. To create a `circle` element, use `svg.circle()`.

These functions take an arbitrary number of `TNode` arguments. A `TNode` can be a primitive (`string`, `number`, `boolean`), a `Signal` of a primitive (including nullable signals like `Signal<string |="" null="">`), a `Renderable`, a `Renderable[]`, or `null`/`undefined`.

To create text nodes, you can just pass a primitive or a `Signal` of a primitive where a `TNode` is expected. Signals containing `null` or `undefined` render as empty text. Alternatively you can be explicit and use the `TextNode()` function.

</string>```ts
const titleSignal = signal('Hello, World!')

html.div(
  'Hello, World!', // <-- this is a text node
  titleSignal, // <-- this is a signal that automatically updates a text node
  html.span('This is a span'),
  TextNode('This is also a text node')
)
```

To create DOM attributes and properties use the `attr` object. It contains functions for all the standard attributes and properties. For example, to set the `id` attribute, use `attr.id('my-id')`.

```ts
html.img(
  attr.id('my-id'),
  attr.src('https://example.com/image.jpg'),
  attr.title(titleSignal)
)
```

You will have noticed that text nodes and attribute values accept both literal values (ex. `'Hello, World!'`) and signals (ex. `titleSignal`). This is because the arguments are typed as `Value<T>` which is a union of `T` and `Signal<T>`. `Value<string>` also happens to be part of the `TNode` union.

### attr.class

The `class` attribute is special in the sense that can be used multiple times in the same element.

```ts
const classSignal = signal('class3 class4')
html.div(attr.class('class1 class2'), attr.class(classSignal))
```

A class attribute can be a string or a signal that emits a string. The string can contain multiple classes separated by spaces.

### Other attributes and elements

There are helpers to create arbitrary data-attributes, math/svg elements and attributes, and style attributes.

```ts
html.div(
  dataAttr('mydata', 'myvalue'),
  math.math(
    mathAttr.display('inline'),
    math.mfrac(math.msup(math.mi('π'), math.mn('2')), math.mn('6'))
  ),
  svg.svg(svg.circle(svgAttr.cx(50), svgAttr.cy(50), svgAttr.r(40))),
  style.color('red')
)
```

## Events

Similar to attributes, events can be set using the `on` object. The `on` object contains functions for all the standard events. For example, to set the `click` event, use `on.click(fn)`.

It is fine to use `signal.value` or `signal.get()` to get the value of a signal in an event handler.

### emit helpers

Tempo provides a set of functions to simplify event handling by extracting values from DOM events:

| Helper                            | Description                                    |
| --------------------------------- | ---------------------------------------------- |
| `emitValue(fn)`                   | Extract string value from input/textarea       |
| `emitValueAsNumber(fn)`           | Extract numeric value (uses `valueAsNumber`)   |
| `emitValueAsDate(fn)`             | Extract Date from date input                   |
| `emitValueAsNullableDate(fn)`     | Extract Date or null from date input           |
| `emitValueAsDateTime(fn)`         | Extract Date from datetime-local input         |
| `emitValueAsNullableDateTime(fn)` | Extract Date or null from datetime-local input |
| `emitChecked(fn)`                 | Extract boolean from checkbox/radio            |
| `emitTarget(fn)`                  | Get the target element directly                |

```ts
const name = prop('')
const age = prop(0)
const birthDate = prop<Date | null>(null)
const isSubscribed = prop(false)

html.form(
  // Text input - use prop.set directly as callback
  html.input(
    attr.type('text'),
    attr.value(name),
    on.input(emitValue(name.set))
  ),

  // Number input - use filter for validation
  html.input(
    attr.type('number'),
    attr.value(age.map(String)),
    on.input(
      emitValueAsNumber(v => {
        if (!isNaN(v)) age.set(v)
      })
    )
  ),

  // Date input - prop.set works directly
  html.input(
    attr.type('date'),
    on.change(emitValueAsNullableDate(birthDate.set))
  ),

  // Checkbox - prop.set works directly
  html.input(
    attr.type('checkbox'),
    attr.checked(isSubscribed),
    on.change(emitChecked(isSubscribed.set))
  ),

  // Direct element access
  html.input(
    on.focus(
      emitTarget((input: HTMLInputElement) => {
        input.select() // Select all text on focus
      })
    )
  )
)
```

**Emit Options:**

All emit helpers accept an optional second argument for event control:

```ts
type EmitOptions = {
  preventDefault?: boolean
  stopPropagation?: boolean
  stopImmediatePropagation?: boolean
}

// Example: prevent form submission
on.submit(
  emitTarget(
    () => {
      console.log('Form submitted')
    },
    { preventDefault: true }
  )
)
```

### Delegated Events

For containers with many similar children (such as lists rendered with `ForEach`), attaching individual `on` handlers to each item creates one listener per element. The `delegate` object provides an alternative: a single event listener on the **container** that matches children by CSS selector using `Element.closest()`.

```ts
import { html, delegate, ForEach, prop } from '@tempots/dom'

const items = prop(['Apple', 'Banana', 'Cherry'])

html.ul(
  delegate.click('li', (event) => {
    const li = (event.target as Element).closest('li')!
    console.log('Clicked:', li.textContent)
  }),
  ForEach(items, (item) => html.li(item))
)
```

`delegate` uses the same proxy pattern as `on`, so all standard events are available (`delegate.click`, `delegate.input`, `delegate.keydown`, etc.). It accepts an optional third argument for `HandlerOptions` (`once`, `passive`, `signal`).

**When to use `delegate` vs `on`:**

| Use `on` | Use `delegate` |
| --- | --- |
| Small/static number of elements | Large or dynamic lists (`ForEach`, `Repeat`) |
| Need per-element context | One handler for many similar children |
| Non-bubbling events (`focus`, `blur`, `mouseenter`, `mouseleave`) | Standard bubbling events (`click`, `input`, `keydown`, etc.) |

> **Note:** Delegated events rely on event bubbling. Events that do not bubble (`focus`, `blur`, `mouseenter`, `mouseleave`) will not be captured by delegation. Use `on` for those.

## input elements

When using `input` elements it is very common you want to specify the type of the input. Tempo provides a set of functions to create `input` elements with the correct type. For example, to create a `number` input, use `input.number()`.

## bind

Tempo provides functions to bind `Props` to input elements. For example, to bind a `string` prop to an `input` element, use `BindText`. Other bind functions include `BindNumber`, `BindDate`, `BindDateTime`, and `BindChecked`. These set a bidirectional binding between the prop and the input element.

```ts
import { prop, input, BindText, BindNumber, BindDate, BindDateTime, BindChecked } from '@tempots/dom'

// Text binding - syncs input value with prop
const email = prop('')
input.text(BindText(email))

// Number binding - parses input as number
const age = prop(0)
input.number(BindNumber(age))

// Date binding - syncs with date input
const birthDate = prop(new Date())
input.date(BindDate(birthDate))

// DateTime binding - syncs with datetime-local input
const appointmentTime = prop(new Date())
input['datetime-local'](BindDateTime(appointmentTime))

// Checkbox binding - syncs checked state
const isSubscribed = prop(false)
input.checkbox(BindChecked(isSubscribed))
```

## Conditionals

Tempo has a set of functions to create conditional renderables. For example, to render a `div` element only if a condition is met, use `When` (or `Unless` for its negation).

```ts
const showSignal = signal(true)

When(showSignal, () => html.div('This is visible'))
```

A second argument can be passed to `When` to specify a renderable to show when the condition is false.

An interesting aspect of conditionals in Tempo, is that there is no DOM rebuilding unless the branch is changed.

### Ensure

In TypeScript it is common to work with values that can be `null` or `undefined`. To render a value only if it is not `null` or `undefined`, use `Ensure`.

```ts
const valueSignal = signal<string | null>('Hello, World!')

Ensure(valueSignal, v => html.div(v.map(text => `This is visible: ${text}`)))
```

Unlike `When`, `Ensure` takes a function that returns a renderable. This function is called with a new signal that is guaranteed to be not `null` or `undefined`.

### OneOf

`OneOf` helpers allow matching a signal and rendering a branch based on its
value. Several variations exist depending on what you want to match.

```ts
const status = signal<{ loading: true } | { error: string }>({ loading: true })

OneOf(status, {
  loading: () => html.div('Loading...'),
  error: e => html.div('Error:', e),
})
```

#### OneOfValue

```ts
const mode = signal<'view' | 'edit'>('view')

OneOfValue(mode, {
  view: () => html.div('Viewing'),
  edit: () => html.div('Editing'),
})
```

#### OneOfTuple

```ts
const pair = signal(['A', 1] as ['A' | 'B', number])

OneOfTuple(pair, {
  A: n => html.div('A:', n.map(String)),
  B: n => html.div('B:', n.map(String)),
})
```

#### OneOfField

```ts
type State =
  | { state: 'loading' }
  | { state: 'error'; message: string }
  | { state: 'ready'; content: string }

const state = signal<State>({ state: 'loading' })

OneOfField(state, 'state', {
  loading: () => html.div('Loading...'),
  error: s => html.div('Error:', s.$.message),
  ready: s => html.div('Ready:', s.$.content),
})
```

#### OneOfKind

```ts
type MyType = { kind: 'A'; text: string } | { kind: 'B'; value: number }

const valueSignal = signal<MyType>({ kind: 'A', text: 'Hello, World!' })

OneOfKind(valueSignal, {
  A: v => html.div('A:', v.$.text),
  B: v => html.div('B:', v.$.value.map(String)),
})
```

#### OneOfType

```ts
type Msg = { type: 'inc'; value: number } | { type: 'dec'; value: number }

const msg = signal<Msg>({ type: 'inc', value: 1 })

OneOfType(msg, {
  inc: m => html.div('Inc', m.$.value.map(String)),
  dec: m => html.div('Dec', m.$.value.map(String)),
})
```

## Loops

Of course you can also render lists of elements. Tempo provides a set of functions to create loops. For example, to render a list of `div` elements, use `ForEach`.

```ts
const itemsSignal = signal(['Item 1', 'Item 2', 'Item 3'])

ForEach(itemsSignal, (item, position) =>
  html.div(position.$.counter.map(String), ': ', item)
)
```

The renderable function takes two arguments. The first is a signal that represent an element of the list. The second is a signal that represents the position of the element in the list. The position signal has a `counter` field that is the 1-based index of the element in the list as well as a `isFirst`, `isLast` and `index`.

`ForEach` accepts an optional third argument to render a separator between elements.

You can wrap your loop in a `NotEmpty` renderable if you want to ensure that the list is not empty. This is useful in the case of structures like `UL` or `OL` where an empty list would not be desired.

```ts
const itemsSignal = signal(['Item 1', 'Item 2', 'Item 3'])

NotEmpty(
  itemsSignal,
  items => html.ul(ForEach(items, item => html.li(item))),
  () => 'No items'
)
```

### KeyedForEach

When list items have stable identities (e.g., database IDs), `KeyedForEach` provides efficient reconciliation by tracking items by key rather than by index. When items are reordered, existing DOM nodes are **moved** rather than recreated, and signal identities are preserved.

```ts
const todos = prop([
  { id: 1, text: 'Buy groceries' },
  { id: 2, text: 'Walk the dog' },
  { id: 3, text: 'Read a book' },
])

html.ul(
  KeyedForEach(
    todos,
    (todo) => todo.id,                    // key function
    (todo, pos) => html.li(               // item renderer
      todo.map((t) => t.text)
    ),
    () => html.hr()                       // optional separator
  )
)
```

The key differences between `ForEach` and `KeyedForEach`:

| | `ForEach` | `KeyedForEach` |
|---|---|---|
| **Tracking** | By index (position) | By key (identity) |
| **Reorder** | Signals at each position update with new values | DOM nodes move; signals keep their identity |
| **Position** | `ElementPosition` (static `index`) | `KeyedPosition` (reactive `index`, all fields update) |
| **Best for** | Simple lists, append-only, rarely reordered | Sortable lists, drag-and-drop, items with stable IDs |

Each item's callback receives a `KeyedPosition` with fully reactive fields: `index`, `counter`, `isFirst`, `isLast`, `isEven`, `isOdd`, and `total`. All of these update automatically when an item moves to a new position.

`Repeat` takes a signal that represents the number of times to repeat the renderable. It is useful when you want to repeat a renderable a fixed number of times.

```ts
const countSignal = signal(3)

Repeat(countSignal, pos =>
  html.div(`${pos.counter} of `, pos.$.total.map(String))
)
```

`counter` is a fixed value so it is not wrapped in a signal but `total` is a signal as it can vary when `countSignal` changes.

If you know ahead of time the number and content of the elements, you can use a regular loop to create an array of renderables.

```ts
const items = ['Item 1', 'Item 2', 'Item 3']

html.div(items.map((item, index) => html.div(String(index), ': ', item)))
```

### TransitionKeyedForEach

`TransitionKeyedForEach` is a drop-in replacement for `KeyedForEach` that supports enter and exit animations. Items that leave the list are kept in the DOM for a configurable duration with an `isExiting` signal set to `true`, allowing CSS transitions or animations to play before removal.

```ts
import { TransitionKeyedForEach } from '@tempots/dom'

TransitionKeyedForEach(
  todoItems,
  (item) => item.id,
  (item, position, isExiting) => html.div(
    attr.class('todo-item'),
    attr.class(isExiting.map(e => e ? 'todo-item--exiting' : '')),
    item.map(i => i.text),
  ),
  { exitDuration: 300 }
)
```

```css
.todo-item--exiting {
  animation: fade-out 300ms ease-out forwards;
}
```

The `config` object supports:
- `exitClass` / `exitDuration` — class and duration for exit animations
- `enterClass` / `enterDuration` — class and duration for enter animations
- `useAnimationEvents` — listen for `animationend`/`transitionend` instead of using a fixed duration

## Animation Renderables

### RafLoop

A renderable that runs a `requestAnimationFrame` loop for the lifetime of the component. The loop is automatically stopped when the component is disposed.

```ts
import { RafLoop } from '@tempots/dom'

html.canvas(
  RafLoop((dt) => {
    // dt is delta time in milliseconds since last frame
    // Update canvas, particles, etc.
  })
)
```

For imperative use inside `WithElement`, use `createRafLoop()` which returns a handle with a `dispose()` method.

## Gesture Renderables

### PinchZoom

Attaches two-finger pinch-to-zoom with simultaneous pan to the parent element:

```ts
import { PinchZoom, prop } from '@tempots/dom'
import type { PinchZoomState } from '@tempots/dom'

const viewport = prop<PinchZoomState>({ scale: 1, panX: 0, panY: 0 })

html.div(
  attr.style(viewport.map(v => ({
    transform: `translate(${v.panX}px, ${v.panY}px) scale(${v.scale})`,
  }))),
  PinchZoom(viewport, { minScale: 0.25, maxScale: 4 }),
)
```

### Inertia

Attaches physics-based inertia drag-and-scroll to the parent element. On pointer up, the surface continues scrolling with exponential velocity decay.

```ts
import { Inertia, prop } from '@tempots/dom'

const offset = prop({ x: 0, y: 0 })

html.div(
  Inertia(
    (dx, dy) => offset.set({
      x: offset.get().x + dx,
      y: offset.get().y + dy,
    }),
    { friction: 0.95 }
  ),
)
```

## Lifecycle

For more advanced use cases, Tempo provides a set of functions to handle the lifecycle of a renderable. For example, to run a function when a renderable is mounted, use `WithElement`. This will take a callback function that will be called with the HTML DOM Element just mounted. Similarly `WithCtx` will take a callback function that will be called with the current `DOMContext`, and `WithBrowserCtx` for browser-specific contexts.

```ts
html.div(
  // element is the DIV Element just mounted
  WithElement(element => {
    console.log('Mounted', element)
  })
)
```

Whenever you want to cleanup resources when a renderable is unmounted, use `OnDispose`.

```ts
html.div(
  WithElement(element => {
    const listener = () => console.log('Clicked')
    element.addEventListener('click', listener)
    return OnDispose((removeTree, ctx) => {
      if (removeTree) {
        element.removeEventListener('click', listener)
      }
    })
  })
)
```

## Error Boundaries

`Catch` wraps a renderable subtree and renders a fallback if it throws during rendering. This prevents a single failing component from crashing the entire app.

```ts
import { Catch, html, on } from '@tempots/dom'

Catch(
  MyComponent(),
  (error, retry) => html.div(
    html.p('Something went wrong: ', error.map(e => e.message)),
    html.button(on.click(retry), 'Retry')
  )
)
```

- `error` is a `Signal<Error>` — the fallback reactively displays the error message
- `retry` is a function that disposes the fallback and re-attempts rendering the children
- If retry also fails, the error signal updates with the new error (fallback stays rendered)
- Catches synchronous render errors only (not event handlers or async code)

## Fragment/Empty

You can use `Fragment` where a single renderable is expected but you want to render multiple components. Similarly, you can use `Empty` to fill a slot with nothing.

## Providers

To simplify the structure of a larger project, it is often useful to use a Provide/Use pattern. In a high-level component, you can provide a value (or function, or signal, or anything really) that is consumed by a lower-level component. You can use `Provide` to provide a single value (or a record or a function), and `Use` to consume it.

A provider is a simple object that knows how to provide a context value and how to identify itself.

```ts
const Preferences = {
  mark: makeProviderMark<Signal<Preferences>>('Preferences'),
  create: () => {
    const preferences = signal({ theme: 'bubbly' })
    // the implementation, it must return an object with
    return { value: preferences, dispose: preferences.dispose }
  },
}
```

The provider can be made available this way:

```ts
const MyComponent = Provide(
  Preferences,
  {}, // options (can be empty)
  () => html.div(...)
)
```

And it can be used this way:

```ts
Use(Preferences, value => html.div(value.$.theme))
```

If you want to `set` and/or `use` multiple providers at once, you can use `WithProvider`.

```ts
WithProvider(({ set, use }) => {
  set(Preferences, {})
  const preferences = use(Preferences)
  return html.div(preferences.$.theme)
})
```

## Asynchronous Operations

Tempo provides two renderables for handling async operations: `Async` and `Task`.

### Async vs Task

- **`Async(promise, options)`** - Wraps an existing Promise. The promise starts executing immediately when created.
- **`Task(fn, options)`** - Wraps a function that returns a Promise. The function is called when the component renders (lazy execution).

```ts
import { Async, Task } from '@tempots/dom'

// Async: promise executes immediately when this line runs
const immediateLoad = Async(
  fetch('/api/data').then(r => r.json()),
  {
    pending: () => html.div('Loading...'),
    then: data => html.div('Data: ', JSON.stringify(data)),
    error: err => html.div('Error: ', String(err))
  }
)

// Task: fetch only happens when the component renders
const lazyLoad = Task(
  () => fetch('/api/data').then(r => r.json()),
  {
    pending: () => html.div('Loading...'),
    then: data => html.div('Data: ', JSON.stringify(data)),
    error: err => html.div('Error: ', String(err))
  }
)

// Shorthand: just pass a function for the success case
const simpleTask = Task(
  () => fetch('/api/data').then(r => r.json()),
  data => html.div('Data: ', JSON.stringify(data))
)
```

### Using Signals for Reactive Data

More often you'll want to combine `Signal`s with `Promise` for reactive data fetching:

```ts
const dataSignal = Signal.ofPromise<string | null>(
  fetch('https://api.example.com/data').then(res => res.text()),
  null // initial value before the promise resolves
)

html.div(Ensure(dataSignal, data => html.div(data), html.div('Loading...')))
```

When you need to refetch based on changing parameters, use `mapAsync`:

```ts
const idSignal = signal(1)

const dataSignal = idSignal.mapAsync<string | null>(
  async id => {
    const res = await fetch(`https://api.example.com/data/${id}`)
    return res.text()
  },
  null // default value before the promise resolves
)

// dataSignal automatically refetches when idSignal changes
```

## Portal

A `Portal` is a way to render a renderable in a different part of the DOM. This is useful when you want to render a modal, a tooltip or you want to make changes to the `head` element. The `HTMLTitle` renderable defined in the `@tempots/ui` package is a good example of this.

```ts
export const HTMLTitle = (title: Value<string>) =>
  Portal('head > title', attr.innerText(title))
```

## Next Steps

- [Learn more about Signals](#signals)
- [Learn more about Building your own Renderables](#build-your-own-renderables)
- [Learn more about Providers](#providers)
- [Discover UI Components](#ui-components)
- [Explore Examples & Best Practices](#examples-patterns)
- [Learn more about render](#render)

---

# Signals

Signals are the reactive data stores. They are used to manage state and notify state changes.

## Create signals

There are three types of signals: `Signal`, `Prop`, and `Computed`. A `Signal` is a readonly object that can be observed but not updated. A `Prop` is a writable object that can be updated. A `Computed` is a readonly object that is derived from other signals.

To create a signal, use the `signal()`, `prop()`, and `computed()` (or `computedOf`) functions.```tsx
// create a signal that cannot be updated
const s = signal(0)

// create a signal that can be updated
const p = prop(0)
p.value = 1
console.log(p.value) // 1

// create a computed signal from a single dependency
const c1 = computed(() => s.value * 2, [s])

// for multiple signals, prefer computedOf - cleaner syntax with type-safe values
const c2 = computedOf(s, p)((sVal, pVal) => sVal + pVal)
```

When you create a Computed signal, you need to provide a function that returns the value of the signal. The function will be called whenever the dependency signals in the second argument change. There is no magic here, if you don't provide the dependency signals, the computed signal will not update.

Signals can also be created from promises using the `Signal.ofPromise()` static method.

```ts
const userSignal = Signal.ofPromise(
  fetch('/api/user').then(r => r.json()),
  null, // initial value before promise resolves
  error => ({ error: String(error) }) // optional error recovery function
)
```

The first argument is a promise that resolves to the value of the signal. The second argument is the initial value used until the promise resolves. An optional third argument is an error recovery function.

## Read signals

Once you have a signal, you can read its value using the `value` property (or `get()` function). You generally don't access the `value` property directly unless you are referring it within an event handler or a computed signal.

Since signals are reactive, you can listen to changes using the `on()` method. The method returns a function that you can call to stop listening to changes.

This is how tempo monitors changes and updates the DOM.

When you add a callback to a signal, the callback is called immediately with the current value of the signal.

## Modify props

You can update a prop using the `set()` method or using the `value` setter. They both take a new value and update the signal. You can also update a prop using the `update()` method. The method takes a function that receives the current value and returns the new value.

```ts
const p = prop(0)
p.set(1)
p.value = 2
p.update(v => v + 1)
```

## Effects

You can also create side effects using the `effect()` function. The function takes a function that performs the side effect and an array of signals that the side effect depends on. The function is called immediately and whenever the dependency signals change. The function returns a function that you can call to stop the side effect.

## Transform signals

You can transform signals using the `map()`, `filter()`, `flatMap()`, and other functions. These functions create a new signal that is derived from the original signal.

```ts
const count = prop(0)
const doubled = count.map(x => x * 2) // ✨ Auto-disposed
const positive = count.filter(x => x > 0) // ✨ Auto-disposed
```

**Automatic Disposal:** All derived signals (created with `.map()`, `.filter()`, `.flatMap()`, etc.) are automatically tracked and disposed when used within renderables. No manual cleanup needed!

Since you will often work with signals of objects, you might find the `$` property useful. `$` is an object that contains signals for each property of the object. This makes it easy to work with signals of objects.

```ts
const prop = prop({ name: 'John', age: 30 })
console.log(prop.$.name.value) // John
```

The `at()` function is equivalent to `$` and it takes the key as an argument.

## Automatic Memory Management

When you create signals within a renderable, Tempo automatically tracks them and disposes them when the component is removed from the DOM. This applies to:

- **Signal creation**: `prop()`, `signal()`, `computed()`, `computedOf()`
- **Signal transformations**: `.map()`, `.filter()`, `.flatMap()`, `.filterMap()`, etc.
- **Effects**: `effect()` functions

```ts
import { html, prop, render } from '@tempots/dom'

const MyComponent = () => {
  const count = prop(0) // ✨ Auto-disposed
  const doubled = count.map(x => x * 2) // ✨ Auto-disposed

  return html.div('Count: ', count, ' Doubled: ', doubled)
}

const clear = render(MyComponent(), document.body)
// Later: clear() will automatically dispose count and doubled
```

### Long-Lived Signals

If you need to create a signal that outlives the current component scope, use `untracked()`:

```ts
import { untracked, prop } from '@tempots/dom'

const globalState = untracked(() => prop(0)) // Not auto-disposed
// Remember to dispose manually when done: globalState.dispose()
```

## Signal Methods Reference

### Listening Methods

| Method                         | Description                                                                                   |
| ------------------------------ | --------------------------------------------------------------------------------------------- |
| `on(listener, options?)`       | Listen to value changes. Called immediately with current value. Returns unsubscribe function. |
| `onChange(listener, options?)` | Like `on()` but skips the initial call - only fires on actual changes.                        |
| `hasListeners()`               | Returns `true` if the signal has any registered listeners.                                    |

**Listener Options:**

```ts
type ListenerOptions = {
  skipInitial?: boolean // Don't call immediately with current value
  once?: boolean // Unsubscribe after first call
  abortSignal?: AbortSignal // Cancel via AbortController
}
```

### Transformation Methods

| Method                                 | Description                                                  |
| -------------------------------------- | ------------------------------------------------------------ |
| `map(fn, equals?)`                     | Transform values to a new type. Returns a Computed signal.   |
| `flatMap(fn, equals?)`                 | Map then flatten nested signals.                             |
| `filter(predicate, startValue?)`       | Only emit values matching predicate.                         |
| `filterMap(fn, startValue, equals?)`   | Map + filter in one operation. Skips null/undefined results. |
| `mapMaybe(fn, alt)`                    | Map with fallback for null/undefined results.                |
| `mapAsync(fn, alt, recover?, equals?)` | Async transformation with abort support.                     |
| `tap(fn)`                              | Execute side effect without modifying value.                 |

```ts
const count = prop(5)

// Transform to different types
const doubled = count.map(n => n * 2)
const message = count.map(n => `Count is ${n}`)

// Filter values
const positive = count.filter(n => n > 0)

// Async transformation
const userData = userId.mapAsync(
  async (id, { abortSignal }) => {
    const res = await fetch(`/api/users/${id}`, { signal: abortSignal })
    return res.json()
  },
  null // initial value
)

// Side effects without modifying
const logged = count.tap(n => console.log('Value:', n))
```

### Object Access Methods

| Method    | Description                                                                                              |
| --------- | -------------------------------------------------------------------------------------------------------- |
| `at(key)` | Get a signal for a specific property of the value.                                                       |
| `$`       | Proxy object providing signals for all properties. `signal.$.name` is equivalent to `signal.at('name')`. |

### Disposal Methods

| Method                | Description                                     |
| --------------------- | ----------------------------------------------- |
| `dispose()`           | Dispose the signal and release all resources.   |
| `isDisposed()`        | Returns `true` if the signal has been disposed. |
| `onDispose(listener)` | Register a callback to run when disposed.       |

### Prop-Specific Methods

| Method          | Description                                              |
| --------------- | -------------------------------------------------------- |
| `set(value)`    | Set a new value.                                         |
| `update(fn)`    | Update value using a function: `prop.update(v => v + 1)` |
| `reducer(fn)`   | Create a reducer function with effects.                  |
| `iso(get, set)` | Create a bidirectional transformation (isomorphism).     |
| `atProp(key)`   | Get a writable Prop for a specific property.             |

```ts
const user = prop({ name: 'John', age: 30 })

// Get writable access to nested property
const nameProp = user.atProp('name')
nameProp.value = 'Jane' // Updates user.value.name
```

### Static Methods

| Method                                               | Description                     |
| ---------------------------------------------------- | ------------------------------- |
| `Signal.ofPromise(promise, init, recover?, equals?)` | Create signal from a Promise.   |
| `Signal.is(value)`                                   | Check if a value is a Signal.   |
| `Prop.is(value)`                                     | Check if a value is a Prop.     |
| `Computed.is(value)`                                 | Check if a value is a Computed. |

## Storage Utilities

Tempo provides utilities for persisting signals to browser storage with automatic synchronization across tabs.

### localStorageProp

Creates a Prop backed by localStorage:

```ts
import { localStorageProp } from '@tempots/dom'

const theme = localStorageProp({
  key: 'app-theme',
  defaultValue: 'light',
})

// Value persists across page reloads
theme.value = 'dark'
```

### sessionStorageProp

Creates a Prop backed by sessionStorage (cleared when browser closes):

```ts
import { sessionStorageProp } from '@tempots/dom'

const formData = sessionStorageProp({
  key: 'checkout-form',
  defaultValue: { email: '', address: '' },
})
```

### storedProp Options

Both `localStorageProp` and `sessionStorageProp` accept these options:

```ts
type StorageOptions<T> = {
  key: Value<string> // Storage key (can be reactive)
  defaultValue: T | (() => T) // Default when not in storage
  serialize?: (v: T) => string // Custom serialization (default: JSON.stringify)
  deserialize?: (v: string) => T // Custom deserialization (default: JSON.parse)
  equals?: (a: T, b: T) => boolean // Equality function
  syncTabs?: boolean // Sync across browser tabs (default: true)
  onKeyChange?: 'load' | 'migrate' | 'keep' // Behavior when key changes
}
```

### syncProp

For cross-tab synchronization of any Prop:

```ts
import { syncProp, prop } from '@tempots/dom'

// Create a synchronized prop
const sharedState = syncProp({
  key: 'shared-state',
  prop: prop({ count: 0 }),
})

// Changes in one tab automatically appear in other tabs
sharedState.value = { count: 1 }
```

## Animation

Tempo provides built-in signal animation support to smoothly transition between values.

### animateSignal

Creates a new signal that smoothly interpolates whenever the source signal changes:

```ts
import { prop, animateSignal, easeInOutCubic } from '@tempots/dom'

const position = prop(0)
const animated = animateSignal(position, {
  duration: 300,
  easing: easeInOutCubic,
})

// When position changes, animated smoothly transitions to the new value
position.set(100) // animated smoothly goes from 0 to 100
```

### Easing Functions

Tempo includes 25 standard easing functions covering all common animation curves:

| Family | In | Out | InOut |
|--------|------|------|-------|
| Quad | `easeInQuad` | `easeOutQuad` | `easeInOutQuad` |
| Cubic | `easeInCubic` | `easeOutCubic` | `easeInOutCubic` |
| Quart | `easeInQuart` | `easeOutQuart` | `easeInOutQuart` |
| Sine | `easeInSine` | `easeOutSine` | `easeInOutSine` |
| Expo | `easeInExpo` | `easeOutExpo` | `easeInOutExpo` |
| Back | `easeInBack` | `easeOutBack` | `easeInOutBack` |
| Bounce | `easeInBounce` | `easeOutBounce` | `easeInOutBounce` |
| Elastic | `easeInElastic` | `easeOutElastic` | `easeInOutElastic` |

Plus `linear` (identity) and three **combinators** for building custom easings:

```ts
import { reverseEasing, mirrorEasing, chainEasing, easeInQuad, easeOutElastic } from '@tempots/dom'

// Reverse: plays easing backwards (easeIn → easeOut)
const myEaseOut = reverseEasing(easeInQuad)

// Mirror: symmetric in-out from a single ease-in
const myEaseInOut = mirrorEasing(easeInQuad)

// Chain: compose two easings (first half + second half)
const dramatic = chainEasing(easeInQuad, easeOutElastic)
```

### createTween

For imperative control over animations (e.g., animate to a target on user action), use `createTween`:

```ts
import { createTween, easeInOutCubic, interpolateNumber } from '@tempots/dom'

const tween = createTween(0, {
  duration: 300,
  easing: easeInOutCubic,
})

// Animate to target value on demand
tween.tweenTo(100)

// Read current animated value
tween.value.get() // smoothly approaches 100

// Cancel mid-animation
tween.cancel()

// Clean up
tween.dispose()
```

`createTween` supports a `reducedMotion` signal to respect the user's accessibility preference — when `true`, `tweenTo()` sets the value immediately without animation.

### Reduced Motion

Track the user's `prefers-reduced-motion` system preference reactively:

```ts
import { createReducedMotionSignal, createTween } from '@tempots/dom'

const reducedMotion = createReducedMotionSignal()

const tween = createTween(0, {
  duration: 300,
  reducedMotion, // automatically skips animation when user prefers reduced motion
})
```

The `ReducedMotion` provider makes this available app-wide via the `Provide`/`Use` pattern — see the [Providers page](#providers).

## Next Steps

- [Learn more about Building your own Renderables](#build-your-own-renderables)
- [Explore the Standard Library](#standard-library)
- [Troubleshooting & FAQ](#troubleshooting-faq)
- [Learn more about render](#render)

---

# Build your own Renderables or Components

A reusable Renderable or Component can be exported as either a constant value or a function.```ts
const Logo = html.div(
  attr.class('logo'),
  html.img(attr.src('logo.png'))
)
```

In this example, `Logo` is a reusable component. The content of the component remains the same; it doesn’t change. However, it is still reusable because it doesn’t generate a new DOM unless it is `render`ed. It can be applied multiple times in different locations, making it versatile across applications.

Using a capitalized name for your component is a common convention to indicate that it is a component.

You can create a component that is still constant and reusable but has dynamic content.

```ts
const UserView = Async(
  fetchUser(),
  (user) => html.div(user.name)
)
```

The rendered content of the component is dynamic and depends on the result of the `fetchUser()` promise but the promise is executed only once for any instantiation of the component.

## Options

More commonly, you'll see components that take a set of options as argument. In this case the component is a function that returns a `Renderable`. Tempo uses "options" instead of "props" to avoid confusion with the `prop()` signal type.

```ts
const UserView = (user: User) => html.div(user.name)
```

This is a valid component but it is not often what you want in the context of Tempo because it does not allow to update the DOM when the options change. Each application of this component will result in a DOM state that will not change unless the component is re-rendered.

To address this, you want to use `Signal`s instead.

```ts
const UserView = (user: Signal<User>) => html.div(user.$.name)
```

Now, any time the `user` signal changes, the DOM will be updated. Notice that the `$` property is used to access the value of a field wrapped in the signal. It is convenient and type-safe. The equivalent method is `user.at('name')`.

To get the best of both worlds, you can use `Value<T>`.

```ts
const UserView = (user: Value<User>) =>
  html.div(
    Value.map(user, ({ name }) => name)
  )
```

`Value<T>` is a union type that can be either a `Signal<T>` or a `T`. It is a convenient way to work with signals and values in the same way. `Value.map` is used to map a `Value<T>` to a new `Value<O>`.

Most Renderables in Tempo accept `Value<T>` instead of `Signal<T>` or `T`.

If you want to create components that take multiple arguments or options, you can shape them the way you want.

## Next Steps

- [Discover UI Components](#ui-components)
- [Explore Examples & Best Practices](#examples-patterns)
- [Learn more about render](#render)

---

# Providers

Providers in Tempo offer a powerful dependency injection system that allows you to share state, services, and functionality across your application without prop drilling. This pattern is similar to React's Context API or Angular's dependency injection system, but with Tempo's functional approach.

## Core Concepts

The provider system in Tempo consists of several key components:

1. **Provider Mark**: A unique identifier for a provider
2. **Provider**: An object that knows how to create and dispose of a value
3. **Provide**: A renderable that makes a provider available to its children
4. **Use**: A renderable that consumes a provider's value (throws if missing)
5. **UseOptional**: A renderable that consumes a provider's value safely (returns `undefined` or a fallback if missing)
6. **WithProvider**: A more flexible API for working with multiple providers

## Creating a Provider

A provider is an object with two properties:

- `mark`: A unique identifier created with `makeProviderMark`
- `create`: A function that creates the provider's value and returns an object with:
  - `value`: The actual value to be provided
  - `dispose`: A cleanup function called when the provider is no longer needed
  - `onUse` (optional): A function called when the provider is used

Here's how to create a simple provider:```typescript
import { makeProviderMark, signal, Signal, Provider } from '@tempots/dom'

// Define the type for our preferences
interface Preferences {
  theme: 'light' | 'dark'
  fontSize: number
}

// Create a provider for preferences
const PreferencesProvider: Provider<Signal<Preferences>> = {
  // Create a unique mark with the correct type
  mark: makeProviderMark<Signal<Preferences>>('Preferences'),

  // Create function returns the value and cleanup
  create: () => {
    // Create a signal to hold the preferences
    const preferences = signal<Preferences>({
      theme: 'light',
      fontSize: 16
    })

    // Return the value and cleanup function
    return {
      value: preferences,
      dispose: () => preferences.dispose()
    }
  }
}
```

## Providing Values

Once you have a provider, you can make it available to child components using the `Provide` renderable:

```typescript
import { html, Provide } from '@tempots/dom'

// Make the preferences available to all children
const App = () =>
  Provide(
    PreferencesProvider,  // The provider to use
    {},                   // Options (if any)
    () => html.div(       // Child components that can access the provider
      html.h1('My App'),
      SettingsPanel(),
      MainContent()
    )
  )
```

The `Provide` function takes three arguments:
1. The provider object
2. Options to pass to the provider's `create` function (can be empty `{}`)
3. A function that returns the child components

## Consuming Provider Values

To use a provider's value, use the `Use` renderable:

```typescript
import { html, Use } from '@tempots/dom'

const ThemeToggle = () =>
  Use(
    PreferencesProvider,          // The provider to use
    preferences => html.div(      // Function that receives the provider value
      html.button(
        on.click(() => {
          // Toggle the theme
          preferences.update(prefs => ({
            ...prefs,
            theme: prefs.theme === 'light' ? 'dark' : 'light'
          }))
        }),
        'Toggle Theme: ',
        preferences.$.theme        // Access theme property using $ shorthand
      )
    )
  )
```

The `Use` function takes two arguments:
1. The provider to consume
2. A function that receives the provider's value and returns a renderable

## Using Multiple Providers

If you need to use multiple providers, you can use `UseMany`:

```typescript
import { html, UseMany } from '@tempots/dom'

const SettingsPanel = () =>
  UseMany(
    PreferencesProvider,
    UserProvider
  )(
    (preferences, user) => html.div(
      html.h2('Settings for ', user.$.name),
      html.div('Theme: ', preferences.$.theme),
      html.div('Font Size: ', preferences.$.fontSize.map(String))
    )
  )
```

## Optional Providers with UseOptional

Sometimes a provider may or may not be available in the component tree. `Use` throws a `ProviderNotFoundError` when a provider is missing, but `UseOptional` handles this gracefully.

### Without a fallback

When called with just a provider and a child function, `UseOptional` passes `T | undefined` to the child:

```typescript
import { html, UseOptional } from '@tempots/dom'

const OptionalTheme = () =>
  UseOptional(
    ThemeProvider,
    theme => html.div(
      theme !== undefined
        ? `Theme: ${theme.value}`
        : 'No theme provider — using system defaults'
    )
  )
```

### With a fallback value

When called with a fallback, the child always receives `T` — either the provider value or the fallback:

```typescript
import { html, UseOptional } from '@tempots/dom'

const defaultPreferences = { theme: 'light', fontSize: 16 }

const ThemedContent = () =>
  UseOptional(
    PreferencesProvider,
    defaultPreferences,
    prefs => html.div(
      `Theme: ${prefs.theme}, Font size: ${prefs.fontSize}`
    )
  )
```

This is useful for building reusable components that can work standalone or adapt when a parent provides configuration.

## Advanced Usage with WithProvider

For more complex scenarios, you can use `WithProvider` which gives you direct access to `set`, `use`, and `tryUse` functions:

```typescript
import { html, WithProvider } from '@tempots/dom'

const AdvancedComponent = () =>
  WithProvider(({ set, use, tryUse }) => {
    // Set up multiple providers
    set(PreferencesProvider, {})
    set(UserProvider, { userId: 123 })

    // Use the providers (throws if missing)
    const preferences = use(PreferencesProvider)
    const user = use(UserProvider)

    // Optionally use a provider (returns undefined if missing)
    const analytics = tryUse(AnalyticsProvider)
    analytics?.trackPageView('advanced')

    // Return a renderable using the providers
    return html.div(
      html.h2(`Hello, ${user.$.name}`),
      html.div(`Your theme is: ${preferences.$.theme}`)
    )
  })
```

## Provider with Options

Providers can accept options when they're created:

```typescript
// Provider that accepts options
const ThemeProvider: Provider<Signal<string>, { initialTheme: string }> = {
  mark: makeProviderMark<Signal<string>>('Theme'),
  create: (options = { initialTheme: 'light' }) => {
    const theme = signal(options.initialTheme)
    return {
      value: theme,
      dispose: () => theme.dispose()
    }
  }
}

// Using the provider with options
const App = () =>
  Provide(
    ThemeProvider,
    { initialTheme: 'dark' },  // Pass options here
    () => html.div(
      // ...
    )
  )
```

## Real-World Example: Theme Provider

Here's a complete example of a theme provider that detects the user's system preferences:

```typescript
import {
  makeProviderMark,
  signal,
  Signal,
  Provider,
  html,
  Provide,
  Use,
  attr,
  on
} from '@tempots/dom'

// Define theme types
type Theme = 'light' | 'dark'

// Create the theme provider
const ThemeProvider: Provider<Signal<Theme>> = {
  mark: makeProviderMark<Signal<Theme>>('Theme'),
  create: () => {
    // Detect system preference
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')
    const theme = signal<Theme>(prefersDark.matches ? 'dark' : 'light')

    // Listen for system preference changes
    const handler = (e: MediaQueryListEvent) => {
      theme.value = e.matches ? 'dark' : 'light'
    }
    prefersDark.addEventListener('change', handler)

    return {
      value: theme,
      dispose: () => {
        prefersDark.removeEventListener('change', handler)
        theme.dispose()
      }
    }
  }
}

// App component that provides the theme
const App = () =>
  Provide(
    ThemeProvider,
    {},
    () => html.div(
      // Apply theme class to body
      Use(
        ThemeProvider,
        theme => html.body(
          attr.class(theme.map(t => `theme-${t}`)),
          html.h1('Themed App'),
          ThemeToggle(),
          Content()
        )
      )
    )
  )

// Theme toggle button
const ThemeToggle = () =>
  Use(
    ThemeProvider,
    theme => html.button(
      on.click(() => {
        theme.value = theme.value === 'light' ? 'dark' : 'light'
      }),
      'Toggle Theme: ',
      theme.map(t => t === 'light' ? '🌞' : '🌙')
    )
  )

// Content that uses the theme
const Content = () =>
  Use(
    ThemeProvider,
    theme => html.div(
      attr.class('content'),
      html.p(`Current theme: ${theme.value}`)
    )
  )
```

## Built-in Providers

### ReducedMotion

Tempo ships a `ReducedMotion` provider that tracks the user's `prefers-reduced-motion` system preference. This is useful for any component that performs animations:

```typescript
import { Provide, Use, ReducedMotion, html, When } from '@tempots/dom'

// Provide at app level (once)
const App = () =>
  Provide(ReducedMotion, undefined,
    () => html.div(
      AnimatedWidget(),
    )
  )

// Consume anywhere in the tree
const AnimatedWidget = () =>
  Use(ReducedMotion, (reducedMotion) =>
    When(
      reducedMotion,
      html.div('Static content'),           // reduced motion: skip animation
      html.div(/* animated content */),      // full motion: animate
    )
  )
```

The signal updates automatically when the user changes their system preference.

## Next Steps

- [Learn more about Building your own Renderables](#build-your-own-renderables)
- [Explore Examples & Best Practices](#examples-patterns)
- [Learn more about render](#render)

---

# Standard Library (@tempots/std)

The `@tempots/std` package is a comprehensive standard library for TypeScript that provides utility functions and types commonly used in web applications. This package serves as a natural complement to the Tempo libraries but can be used independently in any TypeScript project.

## Installation```bash
# npm
npm install @tempots/std

# yarn
yarn add @tempots/std

# pnpm
pnpm add @tempots/std
```

## Features

The library provides utility functions organized into several modules:

### Array Operations

```typescript
import {
  filterMapArray,
  uniqueByPrimitive,
  range,
  chunk,
  partition,
  groupBy,
} from '@tempots/std'

// Filter and map in one pass
const numbers = [1, 2, 3, 4, 5]
const evenDoubled = filterMapArray(numbers, n =>
  n % 2 === 0 ? n * 2 : undefined
) // [4, 8]

// Generate a range of numbers
const oneToFive = range(5, 1) // [1, 2, 3, 4, 5]

// Get unique values by a key extractor
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Clone' },
]
const uniqueUsers = uniqueByPrimitive(users, user => user.id) // [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]

// Chunk an array into groups
const chunked = chunk([1, 2, 3, 4, 5], 2) // [[1, 2], [3, 4], [5]]

// Partition by predicate
const [evens, odds] = partition(numbers, n => n % 2 === 0) // [[2, 4], [1, 3, 5]]
```

### String Utilities

```typescript
import { capitalizeWords, ellipsis } from '@tempots/std'
// or
import { capitalizeWords, ellipsis } from '@tempots/std/string'

// Capitalize words
const capitalized = capitalizeWords('hello world') // 'Hello World'

// Truncate text with ellipsis (uses unicode ellipsis character)
const truncated = ellipsis('This is a long text', 10) // 'This is a…'
```

### Result Type

The `Result` type provides a way to handle operations that might fail:

```typescript
import { Result } from '@tempots/std'
// or
import { Result } from '@tempots/std/result'

// Create a success result
const success = Result.success(42)

// Create a failure result
const failure = Result.failure(new Error('Something went wrong'))

// Match on a result
const value = Result.match(
  success,
  value => `Success: ${value}`,
  error => `Error: ${error.message}`
) // 'Success: 42'
```

### AsyncResult Type

Similar to `Result`, but for asynchronous operations with loading states:

```typescript
import { AsyncResult } from '@tempots/std'

// Create from a promise
const asyncResult = await AsyncResult.ofPromise(
  fetch('https://api.example.com/data').then(r => r.json())
)

// Handle the result with pattern matching
AsyncResult.match(asyncResult, {
  success: data => console.log('Data:', data),
  failure: error => console.error('Error:', error),
  loading: () => console.log('Loading...'),
  notAsked: () => console.log('Not started'),
})
```

### Validation Type

The `Validation` type is useful for form validation and data checking. It represents either a valid state or an invalid state with an error:

```typescript
import { Validation } from '@tempots/std'

// Define validation rules
const validateEmail = (email: string): Validation<string> => {
  if (!email.includes('@')) {
    return Validation.invalid('Email must contain @')
  }
  if (email.length < 5) {
    return Validation.invalid('Email too short')
  }
  return Validation.valid
}

const validateAge = (age: number): Validation<string> => {
  if (age < 0) return Validation.invalid('Age cannot be negative')
  if (age > 150) return Validation.invalid('Age seems unrealistic')
  return Validation.valid
}

// Use validation
const emailResult = validateEmail('user@example.com')

// Pattern matching
Validation.match(
  emailResult,
  () => console.log('Email is valid!'),
  error => console.log('Invalid:', error)
)

// Type guards
if (Validation.isValid(emailResult)) {
  console.log('Proceed with valid email')
}

if (Validation.isInvalid(emailResult)) {
  console.log('Error:', emailResult.error)
}

// Execute side effects conditionally
Validation.whenValid(emailResult, () => {
  submitForm()
})

Validation.whenInvalid(emailResult, error => {
  showError(error)
})

// Convert to Result type for further processing
const result = Validation.toResult(emailResult, 'user@example.com')
```

**Form Validation Example with Tempo:**

```typescript
import { html, prop } from '@tempots/dom'
import { Validation } from '@tempots/std'

const email = prop('')
const emailError = email.map(value => {
  const validation = validateEmail(value)
  return Validation.isInvalid(validation) ? validation.error : null
})

html.form(
  html.input(
    attr.type('email'),
    attr.value(email),
    on.input(emitValue(email.set)) // Use prop.set directly
  ),
  Ensure(emailError, error => html.span(attr.class('error'), error))
)
```

## Available Modules

The library is organized into the following modules:

- `array` - Array manipulation utilities (filterMapArray, uniqueByPrimitive, range, chunk, partition, groupBy, etc.)
- `async-result` - Asynchronous result handling with loading states
- `bigint` - BigInt utilities
- `boolean` - Boolean utilities
- `date` - Date manipulation utilities
- `deferred` - Promise deferral utilities
- `domain` - Domain-specific types (Maybe, Nothing, Compare, etc.)
- `equal` - Deep equality comparison
- `function` - Function composition and manipulation
- `iterator` - Iterator utilities (take, skip, filter, map, reduce, find, etc.)
- `json` - JSON utilities
- `map` - Map utilities (mapFromEntries, mapFilter, mapMerge, mapGroupBy, etc.)
- `number` - Number utilities (clamp, interpolate, snapToGrid, etc.)
- `object` - Object manipulation
- `promise` - Promise utilities
- `random` - Random value generation
- `regexp` - Regular expression utilities
- `result` - Result type for error handling
- `set` - Set utilities (setUnion, setIntersection, setDifference, etc.)
- `string` - String manipulation utilities (80+ functions)
- `timer` - Timing utilities (delayed, interval, throttle, debounce)
- `union` - Union type utilities
- `url` - URL/path utilities (parseUrl, buildUrl, joinPaths, etc.)
- `validation` - Data validation utilities

## Next Steps

- [Learn more about the UI components library](#ui-components)
- [Learn more about render](#render)

---

# UI Components (@tempots/ui)

The `@tempots/ui` package is a collection of reusable UI components and renderables built on top of `@tempots/dom` to accelerate development with Tempo. This package provides higher-level abstractions for common UI patterns and components.

## Installation```bash
# npm
npm install @tempots/dom @tempots/std @tempots/ui

# yarn
yarn add @tempots/dom @tempots/std @tempots/ui

# pnpm
pnpm add @tempots/dom @tempots/std @tempots/ui
```

Note: `@tempots/dom` and `@tempots/std` are peer dependencies and must be installed alongside `@tempots/ui`.

## Features

### UI Components

The library provides a set of reusable UI components:

#### AutoFocus and AutoSelect

```typescript
import { html, render } from '@tempots/dom'
import { AutoFocus, AutoSelect } from '@tempots/ui'

// Create an input that automatically gets focus
const focusedInput = html.input(
  AutoFocus(), // Automatically focus this input when rendered
  AutoSelect()  // Automatically select all text when focused
)

// Render it to the DOM
render(focusedInput, document.body)
```

#### InViewport

Detect when an element is in the viewport:

```typescript
import { html, render } from '@tempots/dom'
import { InViewport } from '@tempots/ui'

// Create an element that detects when it's in the viewport
const lazyLoadedContent = InViewport(
  { mode: 'partial', once: false }, // mode: 'partial' | 'full', once?: boolean
  (isVisible) => isVisible.map(v => v
    ? html.div('Content is visible!')
    : html.div('Loading...'))
)

// Render it to the DOM
render(lazyLoadedContent, document.body)
```

#### HTMLTitle

Set the document title:

```typescript
import { html, render, prop } from '@tempots/dom'
import { HTMLTitle } from '@tempots/ui'

// Create a title that updates when the signal changes
const title = prop('Welcome to my app')
const app = html.div(
  HTMLTitle(title),
  html.h1(title)
)

// Render it to the DOM
render(app, document.body)

// Update the title
title.value = 'New page title'
```

#### Router

Client-side routing with `RootRouter` and `ChildRouter`:

```typescript
import { html, render, Provide, Use } from '@tempots/dom'
import { RootRouter, ChildRouter, Location, NavigationService } from '@tempots/ui'

// Define routes - handlers receive a Signal<RouteInfo>
const app = Provide(Location, {}, () =>
  RootRouter({
    '/': () => html.div('Home page'),
    '/about': () => html.div('About page'),
    '/users/:id': (info) => html.div('User ID: ', info.$.params.$.id),
    '/admin/*': () => AdminRoutes(),
    '*': () => html.div('404 - Not found')
  })
)

// Nested routes with ChildRouter
const AdminRoutes = () => ChildRouter({
  '/users': () => html.div('Admin Users'),
  '/settings': () => html.div('Admin Settings'),
  '*': () => html.div('Admin 404')
})

// Render it to the DOM
render(app, document.body)

// Navigate programmatically using NavigationService
NavigationService.navigate('/about')
```

#### Query

Handle async data loading with loading/error states:

```typescript
import { html, prop, render } from '@tempots/dom'
import { Query } from '@tempots/ui'

// Create a query that loads data from an API
const userId = prop(1)

const userQueryView = Query({
  request: userId,
  load: async ({ request, abortSignal }) => {
    const response = await fetch(`https://api.example.com/user/${request}`, { signal: abortSignal })
    if (!response.ok) throw new Error('Failed to load user')
    return response.json()
  },
  convertError: error => error instanceof Error ? error.message : String(error),
  pending: ({ previous, reload }) => html.div('Loading...'),
  failure: ({ error, reload }) => html.div(
    error.map(message => `Error: ${message}`),
    html.button(on.click(reload), 'Retry')
  ),
  success: ({ value, reload }) => html.div(
    value.map(u => `Hello, ${u.name}!`),
    html.button(on.click(reload), 'Refresh')
  ),
})

// Render it to the DOM
render(userQueryView, document.body)

// Trigger a reload by changing the request value
userId.value = 2
```

## Available Components

The library includes the following components and utilities:

### Input & Focus
- `AutoFocus` - Automatically focus an element
- `AutoSelect` - Automatically select text in an input
- `SelectOnFocus` - Select all text when an input is focused

### Viewport & Layout
- `InViewport` - Detect when an element is in the viewport
- `WhenInViewport` - Conditional rendering based on viewport visibility
- `WindowSize` - Track window dimensions
- `ElementRect` - Track element size and position
- `PopOver` - Create popup/popover elements
- `HiddenWhenEmpty` - Hide an element when its content is empty

### Routing
- `RootRouter` - Root-level client-side routing
- `ChildRouter` - Nested routing for sub-routes
- `Location` - Provider for reactive location state
- `NavigationService` - Programmatic navigation utilities
- `Anchor` - Navigation-aware anchor element

### Async Operations
- `Query` - Async data loading with loading/error states
- `Mutation` - Handle async mutations (POST/PUT operations)
- `AsyncResultView` - Display async operation results
- `ResultView` - Display success/failure results

### Events & Interaction
- `OnClickOutside` - Detect clicks outside an element
- `OnKeyPressed` - Handle keyboard events with modifier support
- `OnEnterKey` - Handle Enter key press
- `OnEscapeKey` - Handle Escape key press

### Utilities
- `HTMLTitle` - Set the document title
- `Appearance` - Detect and react to light/dark mode
- `classes` - Conditional CSS class binding
- `Ticker` / `ticker` - Counter/timer signal utilities
- `makeRelativeTime` - Human-readable relative time formatting

## Next Steps

- [Learn more about render](#render)
- Check out the [demos](https://tempo-ts.com/demo/counter.html) to see these components in action

---

# SSR & Headless Rendering

Tempo provides comprehensive support for server-side rendering (SSR), static site generation (SSG), and client-side hydration through dedicated packages:

| Package | Purpose |
|---------|---------|
| `@tempots/server` | Server-side rendering to strings and streams |
| `@tempots/client` | Client-side hydration and islands architecture |
| `@tempots/vite` | Vite plugin for SSG with automatic route discovery |

## Why SSR/SSG?

- **SEO optimization** - Pre-render pages for search engine crawlers
- **Performance** - Send pre-rendered HTML for faster initial page loads
- **Static hosting** - Deploy to CDNs without a server
- **Progressive enhancement** - Pages work before JavaScript loads

## @tempots/server

The server package provides functions to render Tempo components to HTML strings or streams.

### Installation```bash
npm install @tempots/server
```

### renderToString

Renders a component to an HTML string:

```typescript
import { renderToString } from '@tempots/server'
import { html } from '@tempots/dom'

const App = () => html.div(
  html.h1('Hello, World!'),
  html.p('Rendered on the server.')
)

const htmlString = await renderToString(App(), {
  url: 'https://example.com/page',
  generatePlaceholders: true, // Enable hydration markers
})
```

### renderToStream

Renders to a Node.js Readable stream for streaming SSR:

```typescript
import { renderToStream } from '@tempots/server'

app.get('/', (req, res) => {
  const stream = renderToStream(App(), {
    url: req.url,
    onShellReady: () => res.write('<!DOCTYPE html>'),
    onAllReady: () => res.end(),
  })
  stream.pipe(res)
})
```

### createRenderer

High-level convenience function for SSR entry points:

```typescript
// entry-server.ts
import { createRenderer } from '@tempots/server'
import { App } from './App'

export const { render, renderStream } = createRenderer(
  (options) => App(options),
  {
    hydrate: true,
    getData: async (url) => {
      // Fetch data for this URL
      return { user: await fetchUser() }
    }
  }
)
```

## @tempots/client

The client package provides hydration and islands architecture support.

### Installation

```bash
npm install @tempots/client
```

### hydrate

Hydrates server-rendered HTML with client-side interactivity:

```typescript
import { hydrate } from '@tempots/client'
import { App } from './App'

// Server-rendered HTML is already in the DOM
const cleanup = hydrate(App(), document.getElementById('app')!)
```

### startClient

High-level client initialization with islands support:

```typescript
import { startClient } from '@tempots/client'
import { App } from './App'
import { Counter, TodoList } from './islands'

startClient({
  app: () => App(),
  islands: { Counter, TodoList },
  container: '#app',
  debug: true,
})
```

### Islands Architecture

Islands allow you to hydrate only interactive components while keeping the rest static:

```typescript
// Define an island component
import { html, prop, on } from '@tempots/dom'

export const Counter = (options: unknown) => {
  const { initial = 0 } = (options ?? {}) as { initial?: number }
  const count = prop(initial)

  return html.div(
    html.button(on.click(() => count.update(n => n - 1)), '-'),
    html.span(count.map(String)),
    html.button(on.click(() => count.update(n => n + 1)), '+'),
  )
}

// Mark islands in your SSR template
import { islandMarker, attr } from '@tempots/dom'

const CounterIsland = (initial: number) => html.div(
  ...islandMarker('Counter', { initial }, 'visible').map(
    ({ name, value }) => attr[name](value)
  ),
  // Static placeholder content
  html.span(String(initial))
)
```

Hydration strategies:
- `"immediate"` - Hydrate as soon as possible
- `"idle"` - Hydrate when browser is idle
- `"visible"` - Hydrate when scrolled into view
- `{ media: "(min-width: 768px)" }` - Hydrate when media query matches

## @tempots/vite

The Vite plugin provides SSG with automatic route discovery.

### Installation

```bash
npm install @tempots/vite
```

### Configuration

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import { tempo } from '@tempots/vite'

export default defineConfig({
  plugins: [
    tempo({
      mode: 'ssg',           // or 'ssr', 'islands', 'hybrid'
      routes: 'crawl',       // Auto-discover routes (default)
      seedRoutes: ['/'],     // Starting points for crawling
      ssrEntry: 'src/entry-server.ts',
      container: '#app',
      hydrate: true,
    })
  ]
})
```

### Route Discovery

By default, the plugin crawls your site starting from `/` and discovers all internal links:

```typescript
// Explicit routes
tempo({
  routes: ['/', '/about', '/contact'],
})

// Dynamic routes
tempo({
  routes: async () => {
    const posts = await fetchBlogPosts()
    return ['/', ...posts.map(p => `/blog/${p.slug}`)]
  },
})

// Crawl with multiple entry points
tempo({
  routes: 'crawl',
  seedRoutes: ['/', '/docs', '/api'],
})
```

### Project Structure

```
my-app/
├── src/
│   ├── App.ts              # Main app component
│   ├── entry-client.ts     # Client entry (hydration)
│   └── entry-server.ts     # Server entry (rendering)
├── index.html              # HTML template
└── vite.config.ts          # Vite configuration
```

### Entry Files

**entry-server.ts:**
```typescript
import { renderToString } from '@tempots/server'
import { App } from './App'

export async function render(url: string): Promise<string> {
  return renderToString(App(), {
    url,
    generatePlaceholders: true,
  })
}
```

**entry-client.ts:**
```typescript
import { render } from '@tempots/dom'
import { App } from './App'

render(App(), document.getElementById('app')!)
```

## Low-Level API: runHeadless

For advanced use cases, you can use the low-level headless rendering API:

```typescript
import { runHeadless, html } from '@tempots/dom'

const App = () => html.div(
  html.h1('Hello, World!'),
  html.p('Headless rendered')
)

const { root, clear, currentURL } = runHeadless(() => App(), {
  startUrl: 'https://example.com',
  selector: 'body',
})

// Get HTML output
const htmlOutput = root.contentToHTML(true) // true = include placeholders

// Clean up
clear()
```

## Context-Aware Rendering

Conditionally render based on environment:

```typescript
import { html, WithBrowserCtx, WithHeadlessCtx } from '@tempots/dom'

const App = () => html.div(
  // Only in browser
  WithBrowserCtx(() =>
    html.div('Window width: ', window.innerWidth.toString())
  ),

  // Only in headless/SSR
  WithHeadlessCtx(() =>
    html.div('Server-rendered placeholder')
  ),

  // Both environments
  html.p('Universal content')
)
```

## Next Steps

- [Quick Start](#quick-start) - Get started with Tempo
- [Renderables](#renderables) - Learn about the building blocks
- [Signals](#signals) - Reactive state management
- [Examples](#examples-patterns) - Common patterns and best practices

---

# Examples & Patterns

This page provides practical examples and patterns for common scenarios when building applications with Tempo.

## Form Handling

### Complete Form with Validation```typescript
import { html, prop, computedOf, render, Ensure, attr, on, emitValue } from '@tempots/dom'
import type { Prop, Signal } from '@tempots/dom'
import { Validation } from '@tempots/std'

// Validation functions
const validateEmail = (value: string): Validation<string> => {
  if (!value) return Validation.valid // Don't show error when empty
  if (!value.includes('@')) return Validation.invalid('Invalid email format')
  return Validation.valid
}

const validatePassword = (value: string): Validation<string> => {
  if (!value) return Validation.valid // Don't show error when empty
  if (value.length < 8) return Validation.invalid('At least 8 characters')
  if (!/[A-Z]/.test(value)) return Validation.invalid('Needs uppercase letter')
  if (!/[0-9]/.test(value)) return Validation.invalid('Needs a number')
  return Validation.valid
}

// Form component with real-time validation
const RegistrationForm = () => {
  const name = prop('')
  const email = prop('')
  const password = prop('')

  // Real-time validation errors (derived from field values)
  const emailError = email.map(v => {
    const result = validateEmail(v)
    return Validation.isInvalid(result) ? result.error : null
  })

  const passwordError = password.map(v => {
    const result = validatePassword(v)
    return Validation.isInvalid(result) ? result.error : null
  })

  // Check if form can be submitted
  const canSubmit = computedOf(name, email, password)((n, e, p) =>
    n.trim().length > 0 &&
    Validation.isValid(validateEmail(e)) &&
    Validation.isValid(validatePassword(p))
  )

  const handleSubmit = () => {
    console.log('Form submitted:', {
      name: name.value,
      email: email.value
    })
  }

  return html.form(
    on.submit(e => { e.preventDefault(); handleSubmit() }),

    FormField('Name', name),
    FormField('Email', email, emailError, 'email'),
    FormField('Password', password, passwordError, 'password'),

    html.button(
      attr.type('submit'),
      attr.disabled(canSubmit.map(v => !v)),
      'Register'
    )
  )
}

// Reusable form field component
const FormField = (
  label: string,
  value: Prop<string>,
  error?: Signal<string | null>,
  type: string = 'text'
) => html.div(
  attr.class('form-field'),
  html.label(label),
  html.input(
    attr.type(type),
    attr.value(value),
    on.input(emitValue(value.set)),
    error ? attr.class(error.map(e => e ? 'error' : '')) : null
  ),
  error ? Ensure(error, err => html.span(attr.class('error-message'), err)) : null
)
```

## Data Fetching with Query

### Basic Query Usage

```typescript
import { html, prop, render, attr, on, emitValue, Ensure } from '@tempots/dom'
import { Query } from '@tempots/ui'

interface User {
  id: number
  name: string
  email: string
}

const UserProfile = () => {
  const userId = prop(1)

  return html.div(
    // User selector
    html.select(
      on.change(emitValue(v => userId.value = parseInt(v))),
      html.option(attr.value('1'), 'User 1'),
      html.option(attr.value('2'), 'User 2'),
      html.option(attr.value('3'), 'User 3')
    ),

    // Query with loading/error states
    Query<User, string>({
      request: userId,
      load: async ({ request, abortSignal }) => {
        const res = await fetch(`/api/users/${request}`, { signal: abortSignal })
        if (!res.ok) throw new Error('Failed to load user')
        return res.json()
      },
      convertError: e => e instanceof Error ? e.message : 'Unknown error',
      pending: ({ previous }) => html.div(
        'Loading...',
        // Show previous data while loading
        Ensure(previous, user => html.div(
          attr.class('stale'),
          'Previous: ', user.$.name
        ))
      ),
      failure: ({ error, reload }) => html.div(
        html.p('Error: ', error),
        html.button(on.click(reload), 'Retry')
      ),
      success: ({ value, reload }) => html.div(
        html.h2(value.$.name),
        html.p(value.$.email),
        html.button(on.click(reload), 'Refresh')
      )
    })
  )
}
```

### Mutation for POST/PUT Operations

```typescript
import { html, prop, attr, on, emitValue } from '@tempots/dom'
import { Mutation } from '@tempots/ui'

interface User {
  id: number
  name: string
  email: string
}

const CreateUserForm = () => {
  const name = prop('')
  const email = prop('')

  return html.div(
    Mutation<{ name: string; email: string }, User, string>({
      mutate: async ({ request, abortSignal }) => {
        const res = await fetch('/api/users', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(request),
          signal: abortSignal
        })
        if (!res.ok) throw new Error('Failed to create user')
        return res.json()
      },
      convertError: e => e instanceof Error ? e.message : 'Unknown error',
      idle: ({ trigger }) => html.form(
        on.submit(e => {
          e.preventDefault()
          trigger({ name: name.value, email: email.value })
        }),
        html.input(
          attr.placeholder('Name'),
          attr.value(name),
          on.input(emitValue(name.set))
        ),
        html.input(
          attr.type('email'),
          attr.placeholder('Email'),
          attr.value(email),
          on.input(emitValue(email.set))
        ),
        html.button(attr.type('submit'), 'Create User')
      ),
      pending: () => html.div('Creating user...'),
      failure: ({ error, reset }) => html.div(
        html.p('Error: ', error),
        html.button(on.click(reset), 'Try Again')
      ),
      success: ({ value, reset }) => html.div(
        html.p('User created: ', value.$.name),
        html.button(on.click(reset), 'Create Another')
      )
    })
  )
}
```

## Router with Authentication

### Protected Routes

```typescript
import { html, prop, Provide, Use, makeProviderMark, When, Fragment, attr, on, emitValue } from '@tempots/dom'
import type { Signal, TNode } from '@tempots/dom'
import { RootRouter, ChildRouter, Location, NavigationService, Anchor } from '@tempots/ui'

interface User {
  id: number
  name: string
  email: string
}

// Auth provider
const Auth = {
  mark: makeProviderMark<Signal<User | null>>('Auth'),
  create: () => {
    const user = prop<User | null>(null)
    return { value: user, dispose: user.dispose }
  }
}

// Protected route wrapper
const ProtectedRoute = (content: () => TNode) =>
  Use(Auth, user =>
    When(
      user.map(u => u !== null),
      content,
      () => {
        // Redirect to login
        NavigationService.navigate('/login')
        return html.div('Redirecting to login...')
      }
    )
  )

// App with routing
const App = () => Provide(Auth, {}, () =>
  Provide(Location, {}, () =>
    html.div(
      Navigation(),
      RootRouter({
        '/': () => html.div('Home - Public'),
        '/login': () => LoginPage(),
        '/dashboard': () => ProtectedRoute(() => Dashboard()),
        '/dashboard/*': () => ProtectedRoute(() => DashboardRoutes()),
        '*': () => html.div('404 - Not Found')
      })
    )
  )
)

// Nested dashboard routes
const DashboardRoutes = () => ChildRouter({
  '/profile': () => html.div('Profile Page'),
  '/settings': () => html.div('Settings Page'),
  '*': () => html.div('Dashboard Home')
})

// Navigation component
const Navigation = () => Use(Auth, user =>
  html.nav(
    Anchor('/', 'Home'),
    When(
      user.map(u => u === null),
      () => Anchor('/login', 'Login'),
      () => Fragment(
        Anchor('/dashboard', 'Dashboard'),
        html.button(
          on.click(() => user.value = null),
          'Logout'
        )
      )
    )
  )
)

// Login page
const LoginPage = () => Use(Auth, user => {
  const email = prop('')
  const password = prop('')

  const handleLogin = async () => {
    // Simulate login
    user.value = { id: 1, name: 'John', email: email.value }
    NavigationService.navigate('/dashboard')
  }

  return html.form(
    on.submit(e => { e.preventDefault(); handleLogin() }),
    html.h1('Login'),
    html.input(
      attr.type('email'),
      attr.placeholder('Email'),
      on.input(emitValue(email.set))
    ),
    html.input(
      attr.type('password'),
      attr.placeholder('Password'),
      on.input(emitValue(password.set))
    ),
    html.button(attr.type('submit'), 'Login')
  )
})
```

## Keyboard Shortcuts

### Global Keyboard Handler

```typescript
import { html, prop, attr, on, emitValue, When } from '@tempots/dom'
import { OnKeyPressed, OnEnterKey, OnEscapeKey } from '@tempots/ui'

const KeyboardShortcutsDemo = () => {
  const isModalOpen = prop(false)
  const searchQuery = prop('')

  return html.div(
    // Global keyboard shortcuts
    OnKeyPressed({
      key: 'k',
      ctrl: true,
      handler: () => {
        // Ctrl+K to open search
        document.querySelector<HTMLInputElement>('#search')?.focus()
      }
    }),

    OnKeyPressed({
      key: 's',
      ctrl: true,
      handler: (e) => {
        e.preventDefault()
        console.log('Save triggered!')
      }
    }),

    // Search input with keyboard handling
    html.div(
      html.input(
        attr.id('search'),
        attr.placeholder('Search... (Ctrl+K)'),
        attr.value(searchQuery),
        on.input(emitValue(searchQuery.set)),
        OnEnterKey(() => {
          console.log('Searching for:', searchQuery.value)
        }),
        OnEscapeKey(() => {
          searchQuery.value = ''
          document.querySelector<HTMLInputElement>('#search')?.blur()
        })
      )
    ),

    // Modal with escape to close
    html.button(
      on.click(() => isModalOpen.value = true),
      'Open Modal (Esc to close)'
    ),

    When(isModalOpen, () =>
      html.div(
        attr.class('modal'),
        OnEscapeKey(() => isModalOpen.value = false),
        html.div(
          attr.class('modal-content'),
          html.h2('Modal Title'),
          html.p('Press Escape to close this modal'),
          html.button(
            on.click(() => isModalOpen.value = false),
            'Close'
          )
        )
      )
    )
  )
}
```

### Input with Key Modifiers

```typescript
const TextEditor = () => {
  const text = prop('')
  const history = prop<string[]>([])

  const saveToHistory = () => {
    history.update(h => [...h, text.value])
  }

  const undo = () => {
    history.update(h => {
      if (h.length === 0) return h
      const prev = h[h.length - 1]
      text.value = prev ?? ''
      return h.slice(0, -1)
    })
  }

  return html.div(
    html.textarea(
      attr.value(text),
      on.input(emitValue(text.set)),

      // Ctrl+S to save
      OnKeyPressed({
        key: 's',
        ctrl: true,
        handler: e => {
          e.preventDefault()
          saveToHistory()
          console.log('Saved!')
        }
      }),

      // Ctrl+Z to undo
      OnKeyPressed({
        key: 'z',
        ctrl: true,
        handler: e => {
          e.preventDefault()
          undo()
        }
      })
    ),

    html.div(
      'History: ',
      history.map(h => h.length.toString()),
      ' saves'
    )
  )
}
```

## Click Outside Detection

```typescript
import { html, prop, attr, on, When } from '@tempots/dom'
import { OnClickOutside } from '@tempots/ui'

const Dropdown = () => {
  const isOpen = prop(false)

  return html.div(
    attr.class('dropdown'),

    html.button(
      on.click(() => isOpen.update(v => !v)),
      'Toggle Dropdown'
    ),

    When(isOpen, () =>
      html.div(
        attr.class('dropdown-menu'),
        OnClickOutside(() => isOpen.value = false),
        html.ul(
          html.li('Option 1'),
          html.li('Option 2'),
          html.li('Option 3')
        )
      )
    )
  )
}
```

## Viewport Detection

```typescript
import { html, attr, When } from '@tempots/dom'
import { InViewport, WhenInViewport } from '@tempots/ui'

const LazyLoadedSection = () => html.div(
  // Load content when element comes into view
  InViewport(
    { mode: 'partial', once: true },
    isVisible => When(isVisible,
      () => html.div(
        attr.class('loaded'),
        'Content loaded when scrolled into view!'
      ),
      () => html.div(
        attr.class('placeholder'),
        'Scroll to load...'
      )
    )
  )
)

// Or use the convenience wrapper
const AnimatedOnScroll = () => html.div(
  WhenInViewport(
    { mode: 'full' },
    () => html.div(
      attr.class('animate-in'),
      'This animates when fully visible'
    )
  )
)
```

## Next Steps

- [Learn about Signals](#signals)
- [Explore UI Components](#ui-components)
- [Server-Side Rendering](#ssr-headless-rendering)
- [Troubleshooting](#troubleshooting-faq)

---

# Render

Rendering is the final act of applying `Renderable`s to the DOM. When defining renderables, nothing in the DOM is changed or updated, not until those renderables are applied using either `render()` or `renderWithContext()`. Both functions return a `cancel` function that can be used to undo the modifications described in the applied renderables.

## render()

A rendering function that takes two mandatory arguments, a `Renderable` that describes the change to apply to the DOM and a parent node (either as an instance or as a CSS selector) where to apply those changes.

Optionally you can pass an object with the following options:

* a `document` instance to be used during the rendering. This is only necessary in special context, like rendering in a non-browser context when using a string selector for `parent`.
* the `clear` option indicates if the rendering operation should also remove the contents that were potentially generated by the SSR component.
* the `disposeWithParent` option indicates if the rendering operation should be automatically disposed when the parent node is removed from the DOM.```ts
function render(
  node: Renderable,
  parent: Node | string,
  { doc, clear, disposeWithParent = true }: {
    doc?: Document
    clear?: boolean
    disposeWithParent?: boolean
  } = {}
): () => void
```

## renderWithContext()

`renderWithContext()` is a more atomic operation that requires an already instantiated `DOMContext`. Like `render` it returns a `cancel` function.

```ts
function renderWithContext(node: Renderable, ctx: DOMContext): () => void
```

## Next Steps

Check out these resources:

- [Explore Examples & Best Practices](#examples-patterns)
- [Troubleshooting & FAQ](#troubleshooting-faq)
- [Standard Library](#standard-library)
- [UI Components](#ui-components)

Or explore the API documentation for the Tempo libraries:

- [@tempots/dom](#tempotsdom)
- [@tempots/std](#tempotsstd)
- [@tempots/ui](#tempotsui)

---

# Troubleshooting & FAQ

This page addresses common issues and questions that may arise when working with Tempo.

## Common Mistakes

### Renderables should not be payloads to signals

The following is an anti-pattern.```typescript
function Counter() {
  const p = prop(1);
  // DON'T!
  return p.map((value) => html.div(String(value)));
}
```

This is how it should work:

```typescript
function Counter() {
  const p = prop(1);
  // DO!
  return html.div(p.map(String));
}
```

In the rare case where a signal should really contain a Renderable, the `MapSignal` component is the way to go. The reason to avoid it is that the entire sub-tree DOM is re-rendered when the `prop` changes which is potentially inefficient.

```typescript
function Counter() {
  const p = prop(1);
  // Correct but inefficient
  return MapSignal(p, (value) => html.div(String(value)));
}
```

## Frequently Asked Questions

### How does Tempo compare to React, Vue, or Angular?

Tempo is a lightweight UI framework that takes a different approach:

- **No Virtual DOM**: Tempo directly updates the DOM, which can be more efficient for many use cases.
- **Fully Typed**: Built from the ground up with TypeScript for excellent type safety.
- **Zero Dependencies**: Tempo has no external dependencies, making it lightweight.
- **Functional Approach**: Uses plain functions rather than classes or JSX.
- **Fine-Grained Reactivity**: Uses signals for precise updates rather than re-rendering components.

### Can I use Tempo with existing libraries?

Yes! Tempo can be integrated with most JavaScript libraries. Since Tempo directly manipulates the DOM, you can use it alongside other libraries that do the same. You can:

1. Use the `WithElement` renderable to get a reference to a DOM element
2. Initialize third-party libraries with that element
3. Clean up resources with `OnDispose`

```typescript
import { html, WithElement, OnDispose } from '@tempots/dom'
import SomeThirdPartyLib from 'some-third-party-lib'

const ThirdPartyComponent = () => html.div(
  WithElement(element => {
    // Initialize the third-party library
    const instance = new SomeThirdPartyLib(element)

    // Return a cleanup function
    return OnDispose(() => {
      instance.destroy()
    })
  })
)
```

The other way around is also possible. You can use Tempo to create renderables that can be used in other libraries. Just get access to a parent node and use `render` to render Tempo content. The function returned by `render` can be used to dispose of the rendered content.

```ts
import { render } from '@tempots/dom'

const cancel = render(
  html.div('Hello World'),
  document.getElementById('root')
)

// later
cancel()
```

### Does Tempo support Server-Side Rendering (SSR)?

Tempo has experimental support for server-side rendering. The `DOMContext` includes an `isFirstLevel` property that can be used to mark nodes for server-side rendering and hydration. However, this feature is still under development.

## Common Issues

### Signals not updating the UI

If your signals are changing but the UI isn't updating, check:

1. **Signal Dependencies**: For computed signals, make sure you've included all dependencies in the dependency array.

```typescript
// Incorrect - missing dependency
// This still works but it only updates on variations of signal1
const computed = computed(() => signal1.value + signal2.value, [signal1])

// Correct
const computed = computed(() => signal1.value + signal2.value, [signal1, signal2])
```

2. **Signal Equality**: Signals use reference equality by default. For objects, you might need to provide a custom equality function.

```typescript
// Custom equality function for objects
const userSignal = signal(
  { name: 'John', age: 30 },
  (a, b) => a.name === b.name && a.age === b.age
)
```

3. **Immutable Updates**: When updating objects or arrays in props, make sure to create new references.

```typescript
// Incorrect - mutating the array
const items = prop([1, 2, 3])
items.value.push(4) // UI won't update!

// Correct - creating a new array
items.value = [...items.value, 4]
```

### Memory Leaks

If your application is experiencing memory leaks, check:

1. **Cleanup Functions**: Make sure you're properly cleaning up resources with `OnDispose`.

```typescript
WithElement(element => {
  const interval = setInterval(() => {
    // Do something
  }, 1000)

  return OnDispose(() => {
    clearInterval(interval)
  })
})
```

2. **Signal Listeners**: When working outside the renderable context, if you manually add listeners to signals, make sure to remove them.

```typescript
const clear = signal.on(value => {
  // Do something with value
})

// Later, when no longer needed
clear()
```

If a Signal is disposed, it will automatically remove all listeners and you don't need to call `clear`.

Within renderables, the scope is automatically tracked and signals are automatically disposed. The exception to that is if you define a signal in an async context where the scope cannot be automatically tracked. In this case you will have to manually dispose the signal.

3. **Event Listeners**: If you manually add DOM event listeners, make sure to remove them.

```typescript
WithElement(element => {
  const handler = () => console.log('Clicked')
  element.addEventListener('click', handler)

  return OnDispose(() => {
    element.removeEventListener('click', handler)
  })
})
```

### TypeScript Errors

If you're encountering TypeScript errors:

1. **Check TypeScript Version**: Tempo requires TypeScript 4.7 or later.

2. **Import Types**: Make sure you're importing types correctly.

```typescript
// Import types
import { Renderable, Signal, Prop } from '@tempots/dom'
```

3. **Generic Type Parameters**: Make sure you're providing the correct type parameters.

```typescript
// Specify the type parameter
const userSignal = signal<User | null>(null)
```

## Next Steps

- [Learn more about Signals](#signals)
- [Explore Examples & Best Practices](#examples-patterns)
- [Check out the Demos](https://tempo-ts.com/demo/hnpwa.html)

---

# @tempots/core

Core types and utilities for the multi-context Tempo framework. This package provides the foundational signal system, disposal management, and rendering primitives shared across all Tempo rendering contexts.

## Installation```bash
npm install @tempots/core
```

## Features

- **Signal System** - Reactive state management with `Signal`, `Prop`, and `Computed`
- **Disposal Scopes** - Automatic resource lifecycle management
- **Renderables** - Type-safe renderable abstraction for multi-context rendering
- **Providers** - Dependency injection via `makeProviderMark`
- **Signal Utilities** - Rich set of derived signal operators

## Signals

Signals are the reactive primitives that drive all state management in Tempo:

```typescript
import { prop, computed, effect } from '@tempots/core'

// Prop: read-write signal
const count = prop(0)

// Computed: derived signal
const doubled = computed(() => count.value * 2)

// Effect: side-effect on signal changes
effect(() => console.log('Count:', count.value))

// Update triggers reactivity
count.set(5) // logs "Count: 5", doubled.value === 10
```

### Signal Transformations

```typescript
// Map, filter, flatMap
const label = count.map(n => `Count: ${n}`)
const positive = count.filter(n => n > 0)

// Async mapping
const data = count.mapAsync(async n => fetch(`/api/${n}`).then(r => r.json()))

// Feed into another prop
const target = prop('')
count.feedProp(target, n => String(n))
```

### Signal Utilities

```typescript
import { and, or, not, notNil, throttleSignal, distinctUntilChanged, accumulateSignal } from '@tempots/core'

// Boolean combinators
const canSubmit = and(isValid, isNotLoading)
const showWarning = or(hasError, isExpired)
const isHidden = not(isVisible)

// Throttle rapid updates
const throttled = throttleSignal(mouseMoveSignal, 16) // ~60fps

// Skip duplicate values
const unique = distinctUntilChanged(searchQuery)

// Accumulate values (scan/reduce)
const sum = accumulateSignal(valueSignal, (acc, val) => acc + val, 0)
```

### Storage-Backed Props

```typescript
import { localStorageProp, sessionStorageProp, storedProp } from '@tempots/core'

const theme = localStorageProp({ key: 'theme', defaultValue: 'light' })
const token = sessionStorageProp({ key: 'auth-token', defaultValue: '' })
```

### History / Undo-Redo

```typescript
import { prop, propHistory } from '@tempots/core'

const counter = prop(0)
const history = propHistory(counter)

counter.set(1); counter.set(2); counter.set(3)
history.undo()  // counter.value === 2
history.redo()  // counter.value === 3
history.go(0)   // counter.value === 0
```

## Disposal Scopes

Signals created within a `DisposalScope` are automatically tracked and disposed when the scope is disposed:

```typescript
import { DisposalScope, prop, computed } from '@tempots/core'

const scope = new DisposalScope()
const count = scope.prop(0)
const doubled = scope.computed(() => count.value * 2)

// Later: disposes both signals
scope.dispose()
```

## Easing Functions

A comprehensive set of easing functions for smooth animations. These are used by `animateSignal` and `createTween` but can be used standalone:

```typescript
import { easeInOutCubic, easeOutElastic, reverseEasing, mirrorEasing, chainEasing } from '@tempots/core'
import type { EasingFn } from '@tempots/core'

// Use with animateSignal
const animated = animateSignal(position, {
  duration: 300,
  easing: easeInOutCubic,
})

// Combine easings with combinators
const customEasing = chainEasing(easeInQuad, easeOutElastic)
const symmetric = mirrorEasing(easeInCubic)
const reversed = reverseEasing(easeInQuad) // produces easeOut curve
```

### Available Easings

| Family | In | Out | InOut |
|--------|------|------|-------|
| Quad | `easeInQuad` | `easeOutQuad` | `easeInOutQuad` |
| Cubic | `easeInCubic` | `easeOutCubic` | `easeInOutCubic` |
| Quart | `easeInQuart` | `easeOutQuart` | `easeInOutQuart` |
| Sine | `easeInSine` | `easeOutSine` | `easeInOutSine` |
| Expo | `easeInExpo` | `easeOutExpo` | `easeInOutExpo` |
| Back | `easeInBack` | `easeOutBack` | `easeInOutBack` |
| Bounce | `easeInBounce` | `easeOutBounce` | `easeInOutBounce` |
| Elastic | `easeInElastic` | `easeOutElastic` | `easeInOutElastic` |

Plus `linear` for no easing.

### Combinators

- **`reverseEasing(fn)`** — Plays the easing backwards. `reverseEasing(easeIn)` produces an ease-out curve.
- **`mirrorEasing(fn)`** — First half uses `fn`, second half plays it in reverse. Creates symmetric in-out easings from a single ease-in.
- **`chainEasing(a, b)`** — Uses `a` for the first half, `b` for the second half. Compose any two easings sequentially.

## Core Types

### Renderable

The universal rendering abstraction that all platform packages build upon:

```typescript
import { createRenderable } from '@tempots/core'

const MY_TYPE = Symbol('MY_RENDERABLE')

const myComponent = createRenderable(MY_TYPE, (ctx) => {
  // Render logic here
  return (removeTree) => {
    // Cleanup logic here
  }
})
```

### TNode

Represents any content that can be rendered — renderables, strings, signals of strings, arrays, or null:

```typescript
type TNode<CTX, TType> = Renderable<CTX, TType> | Value<string> | null | undefined | Renderable<CTX, TType>[]
```

### Value

A type that can be either a static value or a reactive signal:

```typescript
type Value<T> = T | Signal<T>
```

## Usage

`@tempots/core` is typically used indirectly through platform-specific packages like `@tempots/dom` or `@tempots/native`. Those packages re-export the signal system and provide higher-level APIs built on these core types.

For more information, see the [Tempo documentation](/).

---

# @tempots/render

Platform-agnostic shared renderables for the Tempo framework. This package provides the `createRenderKit` factory that each platform (DOM, Native, etc.) calls with its own renderable factory to get correctly-branded shared renderables.

## Installation```bash
npm install @tempots/render
```

## Overview

`@tempots/render` sits between `@tempots/core` (signals, types) and platform packages (`@tempots/dom`, `@tempots/native`). It implements all the shared rendering logic — conditional rendering, list rendering, async data loading, dependency injection — in a platform-agnostic way.

Each platform package calls `createRenderKit()` with its own factory function to get renderables branded for that platform's type system.

## Features

- **Conditional Rendering** - `When`, `Unless`, `Ensure`, `EnsureAll`, `NotEmpty`
- **List Rendering** - `ForEach`, `Repeat`
- **Pattern Matching** - `OneOf`, `OneOfValue`, `OneOfField`, `OneOfKind`, `OneOfType`, `OneOfTuple`
- **Async Data** - `Task`, `Async` with pending/success/error states
- **Dependency Injection** - `Provide`, `Use` for provider-based context sharing
- **Composition** - `Fragment`, `Empty`, `Conjunction`
- **Signal Mapping** - `MapSignal` for rendering signal-driven content

## How It Works

### The RenderKit Factory

```typescript
import { createRenderKit } from '@tempots/render'

// Each platform creates its own branded kit
const domKit = createRenderKit<DOMContext, typeof DOM_TYPE>({
  type: DOM_TYPE,
  create: (renderFn) => ({ type: DOM_TYPE, render: renderFn }),
  renderTNode: (ctx, node) => { /* DOM-specific TNode rendering */ },
  wrapContext: (ctx, providers) => ctx.withProviders(providers),
  getProviders: (ctx) => ctx.providers,
})

// domKit now has: When, ForEach, Repeat, OneOf, Task, Provide, Use, etc.
// All correctly typed for DOMContext
```

### Shared Renderables

All renderables returned by `createRenderKit` share the same implementation but are branded for their specific platform:

```typescript
// These work identically on DOM and Native
When(isVisible, () => content)
ForEach(items, (item, position) => renderItem(item))
Provide(ThemeProvider, darkTheme, content)
Use(ThemeProvider, theme => renderWithTheme(theme))
Task({ run: () => fetchData(), success: data => renderData(data) })
```

## Architecture

```
@tempots/core (signals, types)
       |
@tempots/render (shared renderables via createRenderKit)
       |
  +----+--------+
  |             |
@tempots/dom  @tempots/native
```

This layered architecture ensures:
- **Code reuse**: Conditional rendering, list rendering, etc. are implemented once
- **Type safety**: Each platform's renderables are branded and cannot be mixed
- **Extensibility**: New platforms only need to implement the factory config

For more information, see the [Tempo documentation](/).

---

# @tempots/dom

Tempo DOM is a lightweight UI Framework for building web applications. It has no dependencies and it is built with [TypeScript](https://www.typescriptlang.org/).

To install use:```bash
# npm
npm install @tempots/dom

# yarn
yarn add @tempots/dom
```

## Animation & Motion

### Easing Functions

All easing functions from `@tempots/core` are re-exported for convenience. See the core package documentation for the full list of 25 standard easings and 3 combinators.

```typescript
import { easeInOutCubic, easeOutElastic, animateSignal, prop } from '@tempots/dom'

const position = prop(0)
const animated = animateSignal(position, {
  duration: 300,
  easing: easeInOutCubic,
})
```

### Signal Tween

An imperative tween that drives a reactive signal from its current value to a target using easing. Complements `animateSignal` (declarative) with explicit `tweenTo()` control.

```typescript
import { createTween, easeInOutCubic } from '@tempots/dom'

const tween = createTween({ x: 0, y: 0 }, {
  duration: 300,
  easing: easeInOutCubic,
  interpolate: (a, b, t) => ({
    x: a.x + (b.x - a.x) * t,
    y: a.y + (b.y - a.y) * t,
  }),
})

tween.tweenTo({ x: 100, y: 200 })
// Later: tween.cancel() or tween.dispose()
```

Supports `reducedMotion: Signal<boolean>` to skip animations for accessibility.

### RAF Loop

A `requestAnimationFrame` loop with delta-time tracking. Available as both an imperative utility and a Tempo renderable.

```typescript
import { createRafLoop, RafLoop, html } from '@tempots/dom'

// Imperative (inside WithElement callbacks)
const handle = createRafLoop((dt) => {
  offset = (offset + speed * dt) % totalLength
})
// Later: handle.dispose()

// Renderable (auto-disposes with component lifecycle)
html.canvas(
  RafLoop((dt) => {
    // update canvas each frame
  })
)
```

### Reduced Motion

A reactive signal that tracks the user's `prefers-reduced-motion` system preference. Available as both a factory function and a Tempo Provider.

```typescript
import { createReducedMotionSignal, ReducedMotion, Provide, Use } from '@tempots/dom'

// Standalone
const reducedMotion = createReducedMotionSignal()
if (reducedMotion.get()) {
  // skip animation
}

// As a Provider (app-wide singleton)
Provide(ReducedMotion, undefined,
  Use(ReducedMotion, (reducedMotion) =>
    When(reducedMotion, html.span('Animations disabled'))
  )
)
```

## List Transitions

### TransitionKeyedForEach

A drop-in replacement for `KeyedForEach` that supports exit animations. Items leaving the list stay in the DOM for a configurable duration with an `isExiting` signal, allowing CSS transitions to play before removal.

```typescript
import { TransitionKeyedForEach, prop, html, attr } from '@tempots/dom'

const items = prop([
  { id: '1', text: 'Buy groceries' },
  { id: '2', text: 'Walk the dog' },
])

TransitionKeyedForEach(
  items,
  (item) => item.id,
  (item, position, isExiting) => html.div(
    attr.class('todo-item'),
    attr.class(isExiting.map(e => e ? 'todo-item--exiting' : '')),
    item.map(i => i.text),
  ),
  { exitDuration: 300 }
)
```

```css
.todo-item--exiting {
  animation: fade-out 300ms ease-out forwards;
}
```

Configuration options:
- `exitClass` — CSS class added during exit animation
- `exitDuration` — Milliseconds before DOM removal
- `enterClass` — CSS class added during enter animation
- `enterDuration` — Milliseconds before enter class is removed
- `useAnimationEvents` — Listen for `animationend`/`transitionend` instead of fixed duration

## Touch & Gesture Handlers

### Pinch-Zoom

Two-finger pinch-to-zoom with simultaneous pan. Available as both an imperative handler and a Tempo renderable.

```typescript
import { PinchZoom, prop, html } from '@tempots/dom'
import type { PinchZoomState } from '@tempots/dom'

const viewport = prop<PinchZoomState>({ scale: 1, panX: 0, panY: 0 })

html.div(
  attr.style(viewport.map(v => ({
    transform: `translate(${v.panX}px, ${v.panY}px) scale(${v.scale})`,
  }))),
  PinchZoom(viewport, { minScale: 0.25, maxScale: 4 }),
  // ... content
)
```

### Inertia Scroll

Physics-based inertia for pan/scroll interactions. When the user releases a drag, the surface continues scrolling with exponential velocity decay.

```typescript
import { Inertia, prop, html } from '@tempots/dom'

const offset = prop({ x: 0, y: 0 })

html.div(
  Inertia(
    (dx, dy) => offset.set({
      x: offset.get().x + dx,
      y: offset.get().y + dy,
    }),
    { friction: 0.95 }
  ),
  // ... scrollable content
)
```

## DOM Utilities

### isInputFocused

Checks whether the currently focused element is an editable form control. Useful for keyboard shortcut systems.

```typescript
import { isInputFocused } from '@tempots/dom'

document.addEventListener('keydown', (e) => {
  if (isInputFocused()) return // don't intercept typing
  if (e.key === 'Delete') deleteSelected()
})
```

For more information, see the [Tempo documentation](/).

---

# @tempots/native

JSI Bridge  <-->  Native Views (iOS/Android)
</-->```

## Quick Start

```typescript
import { renderNative, view, nativeStyle, nativeOn, prop } from '@tempots/native'

function Counter() {
  const count = prop(0)

  return view.View(
    view.Text(
      count.map(n => `Count: ${n}`),
      nativeStyle.style({ fontSize: 48, textAlign: 'center', color: '#333' })
    ),
    view.View(
      view.View(
        nativeOn.press(() => count.set(count.value - 1)),
        view.Text('-'),
        nativeStyle.style({ padding: 20, backgroundColor: '#ff6b6b' })
      ),
      view.View(
        nativeOn.press(() => count.set(count.value + 1)),
        view.Text('+'),
        nativeStyle.style({ padding: 20, backgroundColor: '#51cf66' })
      ),
      nativeStyle.style({ flexDirection: 'row', justifyContent: 'center', gap: 20 })
    ),
    nativeStyle.style({ flex: 1, justifyContent: 'center', alignItems: 'center' })
  )
}

renderNative(Counter())
```

## Native Views

Create native views using the `view` proxy object:

```typescript
import { view } from '@tempots/native'

view.View(...)              // Container view
view.Text('Hello')          // Text display
view.Image(...)             // Image display
view.ScrollView(...)        // Scrollable container
view.TextInput(...)         // Text input field
view.SafeAreaView(...)      // Safe area container
view.FlatList(...)          // Optimized list
view.Modal(...)             // Modal overlay
view.Switch(...)            // Toggle switch
view.MyCustomView(...)      // Any custom native view type
```

## Styles

Apply styles statically or reactively:

```typescript
import { nativeStyle, applyStyle } from '@tempots/native'
import { prop } from '@tempots/core'

// Static styles
view.View(
  nativeStyle.style({
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#f0f0f0',
    padding: 16,
    borderRadius: 8,
  })
)

// Reactive styles
const bg = prop('#f0f0f0')
view.View(
  applyStyle(bg.map(color => ({ backgroundColor: color })))
)
```

## Events

Handle native touch and input events:

```typescript
import { nativeOn } from '@tempots/native'

view.View(
  nativeOn.press((e) => console.log('Pressed at', e.pageX, e.pageY)),
  nativeOn.longPress((e) => console.log('Long pressed')),
)

view.TextInput(
  nativeOn.changeText((e) => console.log('Text:', e.text)),
  nativeOn.submitEditing((e) => console.log('Submitted:', e.text)),
)
```

## Shared Renderables

All standard Tempo renderables work with native contexts:

- `When` / `Unless` - Conditional rendering
- `ForEach` - List rendering from reactive arrays
- `Repeat` - Render N items
- `OneOf` / `OneOfValue` - Pattern matching
- `Task` / `Async` - Async data loading
- `Provide` / `Use` - Dependency injection

## Navigation

In-memory navigation with a history stack:

```typescript
import { createNavigator } from '@tempots/native'

type Route = 'home' | 'about' | 'settings'
const nav = createNavigator<Route>('home')

nav.navigate('about')   // push "about" onto the stack
nav.back()              // pop back to "home"
```

## Lifecycle Signals

Track app-level state changes:

```typescript
import { createAppStateSignal, createDimensionsSignal, createKeyboardSignal } from '@tempots/native'

const appState = createAppStateSignal(bridge)    // "active" | "background" | "inactive"
const dims = createDimensionsSignal(bridge)       // { width, height, scale, fontScale }
const keyboard = createKeyboardSignal(bridge)     // { visible: boolean, height: number }
```

For more information, see the [Tempo documentation](/).

---

# @tempots/server

Tempo Server provides server-side rendering (SSR) utilities for Tempo applications. Render your Tempo components to HTML strings or streams for faster initial page loads and better SEO.

## Installation```bash
npm install @tempots/server
```

## Features

- **renderToString** - Render components to HTML strings
- **renderToStream** - Stream rendered HTML for faster time-to-first-byte
- **createRenderer** - High-level convenience function for SSR entry points
- Hydration placeholder generation for client-side rehydration

## Quick Example

```typescript
import { renderToString } from '@tempots/server'
import { html } from '@tempots/dom'

const App = () => html.div(
  html.h1('Hello, SSR!'),
  html.p('Rendered on the server.')
)

const htmlString = await renderToString(App(), {
  url: 'https://example.com/page',
  generatePlaceholders: true,
})
```

For complete documentation, see [SSR & Headless Rendering](#ssr-headless-rendering).

---

# @tempots/client

Tempo Client provides client-side hydration utilities for Tempo SSR applications. Hydrate server-rendered HTML to make it interactive, or use the islands architecture to selectively hydrate only interactive components.

## Installation```bash
npm install @tempots/client
```

## Features

- **hydrate** - Hydrate server-rendered HTML with client-side interactivity
- **startClient** - High-level client initialization with islands support
- **Islands Architecture** - Hydrate only interactive components while keeping the rest static
- Multiple hydration strategies: immediate, idle, visible, and media query-based

## Quick Example

```typescript
import { startClient } from '@tempots/client'
import { App } from './App'
import { Counter, TodoList } from './islands'

startClient({
  app: () => App(),
  islands: { Counter, TodoList },
  container: '#app',
})
```

## Islands Architecture

Islands allow selective hydration of interactive components:

```typescript
import { islandMarker, attr, html } from '@tempots/dom'

const CounterIsland = (initial: number) => html.div(
  ...islandMarker('Counter', { initial }, 'visible').map(
    ({ name, value }) => attr[name](value)
  ),
  html.span(String(initial))  // Static placeholder
)
```

Hydration strategies:
- `"immediate"` - Hydrate as soon as possible
- `"idle"` - Hydrate when browser is idle
- `"visible"` - Hydrate when scrolled into view
- `{ media: "(min-width: 768px)" }` - Hydrate when media query matches

For complete documentation, see [SSR & Headless Rendering](#ssr-headless-rendering).

---

# Tempo Standard Library (@tempots/std)

A comprehensive standard library for TypeScript that provides utility functions and types commonly used in web applications. This package serves as a natural complement to the Tempo libraries but can be used independently in any TypeScript project.

## Overview

The Tempo Standard Library fills the gaps in JavaScript's standard library with a collection of well-tested, type-safe utility functions. It follows functional programming principles and provides consistent APIs across all modules.

## Key Features

- **Zero Dependencies**: Lightweight with no external dependencies
- **Type Safe**: Full TypeScript support with comprehensive type definitions
- **Functional**: Immutable operations and functional programming patterns
- **Modular**: Import only what you need for optimal bundle size
- **Well Tested**: Comprehensive test coverage for reliability
- **Consistent APIs**: Uniform naming and parameter conventions

## Module Categories

### Data Manipulation
- **array**: Array operations (map, filter, reduce, unique, etc.)
- **object**: Object manipulation and transformation utilities
- **string**: String processing and formatting functions

### Async Operations
- **promise**: Promise utilities and helpers
- **deferred**: Promise deferral and cancellation
- **async-result**: Asynchronous result handling with error management

### Type Safety
- **result**: Result type for error handling without exceptions
- **validation**: Data validation and type checking utilities
- **domain**: Common domain types and type guards

### Utilities
- **function**: Function composition and manipulation
- **timer**: Timing utilities and delays
- **equal**: Deep equality comparison functions
- **json**: JSON parsing and serialization helpers

### Numeric Operations
- **number**: Number utilities and mathematical operations (clamp, interpolate, snapToGrid, wrap, etc.)
- **bigint**: BigInt manipulation functions

## Design Principles

### Functional Programming
All functions are pure and side-effect free where possible:```typescript
// Pure function - doesn't modify input
const doubled = mapArray([1, 2, 3], x => x * 2) // [2, 4, 6]

// Immutable operations
const filtered = filterArray(numbers, x => x > 5)
```

### Type Safety
Comprehensive TypeScript support with generic types:
```typescript
// Type-safe array operations
const strings: string[] = ['a', 'b', 'c']
const lengths: number[] = mapArray(strings, s => s.length)

// Result type for error handling
const result: Result<number, string> = parseNumber('42')
```

### Consistent APIs
Uniform parameter ordering and naming conventions:
```typescript
// Data first, function second pattern
mapArray(array, fn)
filterArray(array, predicate)
foldLeftArray(array, reducer, initial)
```

## Usage Patterns

### Error Handling with Result Type
```typescript
import { Result, success, failure } from '@tempots/std/result'

function divide(a: number, b: number): Result<number, string> {
  if (b === 0) {
    return failure('Division by zero')
  }
  return success(a / b)
}

const result = divide(10, 2)
result.match({
  success: value => console.log(`Result: ${value}`),
  failure: error => console.error(`Error: ${error}`)
})
```

### Array Processing
```typescript
import { mapArray, filterArray, foldLeftArray } from '@tempots/std/array'

const numbers = [1, 2, 3, 4, 5]
const evenSquares = mapArray(
  filterArray(numbers, n => n % 2 === 0),
  n => n * n
) // [4, 16]

const sum = foldLeftArray(numbers, (acc, n) => acc + n, 0) // 15
```

### Async Operations
```typescript
import { deferred } from '@tempots/std/deferred'
import { delayed } from '@tempots/std/timer'

// Create a deferred promise
const { promise, resolve, reject } = deferred<string>()

// Delay execution
const cancel = delayed(() => resolve('Done!'), 1000)

// Use the promise
promise.then(value => console.log(value))
```

## Integration with Tempo

While @tempots/std can be used independently, it integrates seamlessly with Tempo:

```typescript
import { prop, computed } from '@tempots/dom'
import { mapArray, filterArray } from '@tempots/std'

const items = prop([1, 2, 3, 4, 5])
const evenItems = computed(() =>
  filterArray(items.value, n => n % 2 === 0)
)
const doubled = computed(() =>
  mapArray(evenItems.value, n => n * 2)
)
```

## Performance Considerations

- **Tree Shaking**: Import specific functions to minimize bundle size
- **Immutability**: Functions create new objects rather than mutating inputs
- **Lazy Evaluation**: Some operations support lazy evaluation patterns
- **Memory Efficiency**: Optimized algorithms for common operations

## Best Practices

1. **Import Specifically**: Import only the functions you need
   ```typescript
   import { mapArray } from '@tempots/std/array'
   // Instead of: import { mapArray } from '@tempots/std'
   ```

2. **Use Result Types**: Prefer Result types over throwing exceptions
   ```typescript
   // Good
   function parseNumber(str: string): Result<number, string>

   // Avoid
   function parseNumber(str: string): number // throws on error
   ```

3. **Compose Functions**: Build complex operations from simple functions
   ```typescript
   const processData = (data: string[]) =>
     mapArray(
       filterArray(data, s => s.length > 0),
       s => s.toUpperCase()
     )
   ```

## Contributing

See the main [CONTRIBUTING.md](../../CONTRIBUTING.md) for development setup and guidelines.

## Documentation

For detailed API documentation, see the [Tempo Documentation Site](https://tempo-ts.com/library/tempots-std.html).

---

# @tempots/vite

Tempo Vite is a Vite plugin for building Tempo applications with SSR, SSG, or islands architecture. It provides automatic route discovery, static site generation, and seamless integration with Vite's build system.

## Installation```bash
npm install @tempots/vite
```

## Features

- **SSG Mode** - Static site generation with pre-rendered HTML
- **SSR Mode** - Server-side rendering for dynamic content
- **Islands Mode** - Selective hydration of interactive components
- **Route Crawling** - Automatic route discovery by crawling internal links
- Seamless Vite integration

## Quick Example

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import { tempo } from '@tempots/vite'

export default defineConfig({
  plugins: [
    tempo({
      mode: 'ssg',
      ssrEntry: 'src/entry-server.ts',
      routes: 'crawl',  // Auto-discover routes
      hydrate: true,
    })
  ]
})
```

## Route Discovery

```typescript
// Explicit routes
tempo({ routes: ['/', '/about', '/contact'] })

// Dynamic routes
tempo({
  routes: async () => {
    const posts = await fetchBlogPosts()
    return ['/', ...posts.map(p => `/blog/${p.slug}`)]
  }
})

// Crawl with seed routes (default)
tempo({
  routes: 'crawl',
  seedRoutes: ['/', '/docs'],
})
```

For complete documentation, see [SSR & Headless Rendering](#ssr-headless-rendering).

---

# Tempo UI (@tempots/ui)

A collection of reusable UI components and renderables built on top of @tempots/dom to accelerate development with Tempo. This package provides higher-level abstractions for common UI patterns and components.

## Overview

Tempo UI bridges the gap between the low-level DOM manipulation of @tempots/dom and the high-level components needed for real applications. It provides a curated set of components, utilities, and patterns that solve common UI development challenges.

## Key Features

- **Component Library**: Pre-built components for common UI patterns
- **Routing System**: Client-side routing with URL synchronization
- **Query Management**: Async data loading with loading/error states
- **Form Utilities**: Enhanced form controls and input handling
- **Accessibility**: Built-in accessibility features and ARIA support
- **Performance**: Optimized components with minimal overhead
- **Type Safety**: Full TypeScript support with comprehensive types

## Component Categories

### Input Enhancement
- **AutoFocus**: Automatically focus elements when rendered
- **AutoSelect**: Automatically select text in inputs
- **SelectOnFocus**: Select text when input receives focus

### Layout & Visibility
- **InViewport**: Detect when elements enter/exit the viewport
- **HiddenWhenEmpty**: Hide elements when they have no content
- **PopOver**: Create popup and popover elements
- **Size**: Responsive size utilities

### Navigation & Routing
- **Router**: Client-side routing system
- **Location**: Navigation and location utilities
- **Anchor**: Enhanced anchor link handling

### Data Loading
- **Query**: Async data loading with loading/error states
- **AsyncResultView**: Display async operation results
- **ResultView**: Display success/failure results

### Utilities
- **HTMLTitle**: Dynamic document title management
- **Appearance**: Theme and appearance utilities
- **Ticker**: Time-based updates and animations

## Design Philosophy

### Composition Over Configuration
Components are designed to be composed together rather than configured with many options:```typescript
// Compose multiple behaviors
html.input(
  AutoFocus(),
  AutoSelect(),
  SelectOnFocus(),
  attr.placeholder('Enter text...')
)
```

### Minimal API Surface
Each component has a focused, minimal API that does one thing well:

```typescript
// Simple, focused APIs
const AutoFocus = (delay: number = 10): Renderable
const InViewport = (options: IntersectionObserverInit, render: (isVisible: Signal<boolean>) => TNode): Renderable
```

### Framework Integration
Components integrate seamlessly with Tempo's reactive system:

```typescript
// Reactive integration
const isVisible = prop(false)
InViewport({}, visible => {
  isVisible.set(visible.value)
  return html.div('Content is visible!')
})
```

## Routing System

### Basic Routing
```typescript
import { Router, Location } from '@tempots/ui'

const AppRouter = Router({
  '/': () => html.div('Home Page'),
  '/about': () => html.div('About Page'),
  '/users/:id': (info) => {
    const userId = info.$.params.$.id
    return html.div('User Profile: ', userId)
  },
  '*': () => html.div('404 - Not Found')
})

render(AppRouter, document.body)
```

### Programmatic Navigation
```typescript
// Navigate to different routes
Location.navigate('/about')
Location.navigate('/users/123')

// Access current location
Use(Location, location => {
  return html.div('Current path: ', location.$.pathname)
})
```

### Route Parameters
```typescript
// Extract route parameters
'/users/:id/posts/:postId': (info) => {
  const userId = info.$.params.$.id
  const postId = info.$.params.$.postId
  return UserPost({ userId, postId })
}
```

## Query Management

### Basic Query Loading
```typescript
import { Query } from '@tempots/ui'

const userQuery = Query({
  load: () => fetch('/api/user').then(r => r.json()),
  loading: () => html.div('Loading user...'),
  error: (err) => html.div('Error: ', err.message),
  success: (user) => html.div(
    html.h2(user.name),
    html.p(user.email)
  )
})
```

### Advanced Query Patterns
```typescript
// Query with dependencies
const userPosts = Query({
  load: async () => {
    const user = await fetchUser()
    const posts = await fetchUserPosts(user.id)
    return { user, posts }
  },
  loading: () => SkeletonLoader(),
  error: (err) => ErrorMessage({ error: err }),
  success: ({ user, posts }) => UserPostsList({ user, posts })
})
```

## Form Enhancement

### Input Focus Management
```typescript
import { AutoFocus, AutoSelect, SelectOnFocus } from '@tempots/ui'

function LoginForm() {
  const username = prop('')
  const password = prop('')

  return html.form(
    html.input(
      AutoFocus(),           // Focus on render
      SelectOnFocus(),       // Select text on focus
      attr.placeholder('Username'),
      attr.value(username),
      on.input(e => username.set(e.target.value))
    ),
    html.input(
      attr.type('password'),
      attr.placeholder('Password'),
      attr.value(password),
      on.input(e => password.set(e.target.value))
    )
  )
}
```

### Form Validation
```typescript
// Combine with @tempots/std for validation
import { Result, success, failure } from '@tempots/std'

const validateEmail = (email: string): Result<string, string> => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(email)
    ? success(email)
    : failure('Invalid email format')
}

const emailInput = prop('')
const emailValidation = emailInput.map(validateEmail)
```

## Viewport Detection

### Lazy Loading
```typescript
import { InViewport } from '@tempots/ui'

const LazyImage = ({ src, alt }: { src: string, alt: string }) =>
  InViewport(
    { threshold: 0.1 },
    isVisible => isVisible.value
      ? html.img(attr.src(src), attr.alt(alt))
      : html.div(attr.class('placeholder'), 'Loading...')
  )
```

### Infinite Scrolling
```typescript
const InfiniteList = ({ items, loadMore }: { items: Signal<Item[]>, loadMore: () => void }) =>
  html.div(
    ForEach(items, item => ItemComponent(item)),
    InViewport(
      { threshold: 1.0 },
      isVisible => {
        if (isVisible.value) loadMore()
        return html.div('Loading more...')
      }
    )
  )
```

## Performance Considerations

- **Lazy Loading**: Components only render when needed
- **Event Cleanup**: Automatic cleanup of event listeners and observers
- **Memory Management**: Proper disposal of resources and subscriptions
- **Bundle Size**: Tree-shakeable components for optimal bundle size

## Integration Patterns

### With @tempots/dom
```typescript
// Enhance basic DOM elements
html.input(
  AutoFocus(),
  attr.value(signal),
  on.input(handler)
)
```

### With @tempots/std
```typescript
// Use std utilities for data processing
import { mapArray, filterArray } from '@tempots/std'

const processedItems = computed(() =>
  mapArray(
    filterArray(items.value, item => item.visible),
    item => ({ ...item, processed: true })
  )
)
```

## Best Practices

1. **Compose Components**: Build complex UI by composing simple components
2. **Use Signals**: Leverage reactive signals for dynamic behavior
3. **Handle Errors**: Always provide error states for async operations
4. **Accessibility**: Use semantic HTML and ARIA attributes
5. **Performance**: Use lazy loading and viewport detection for large lists

## Contributing

See the main [CONTRIBUTING.md](../../CONTRIBUTING.md) for development setup and guidelines.

## Documentation

For detailed API documentation, see the [Tempo Documentation Site](https://tempo-ts.com/library/tempots-ui.html).

---

# @tempots/eslint-plugin

ESLint plugin for TempoTS to help catch common signal usage issues and prevent memory leaks.

## Installation```bash
npm install -D @tempots/eslint-plugin
```

## Quick Setup

Use the recommended configuration:

```javascript
// eslint.config.js
import tempots from '@tempots/eslint-plugin'

export default [
  tempots.configs.recommended,
  // ... your other configs
]
```

This enables all rules with sensible defaults. For maximum safety, use `tempots.configs.strict` instead (all rules set to `error`).

## Rules

### Signal Lifecycle

- **`no-module-level-signals`** (warn) - Warns about signals created at module level outside renderables. Use `untracked()` for intentionally long-lived signals.
- **`require-untracked-disposal`** (error) - Requires disposal of signals created with `untracked()` to prevent memory leaks.
- **`require-async-signal-disposal`** (warn) - Requires proper disposal for signals created in async contexts (setTimeout, Promise callbacks) where auto-disposal doesn't apply.
- **`no-unnecessary-disposal`** (warn) - Warns about redundant manual disposal of auto-disposed signals. Auto-fixable.
- **`no-signal-reassignment`** (error) - Prevents reassignment of signal variables, which would leak the original signal.
- **`prefer-const-signals`** (warn) - Prefers `const` for signal declarations to prevent accidental reassignment. Auto-fixable.

### Renderable Patterns

- **`no-renderable-signal-map`** (warn) - Warns when mapping signals to renderables (e.g., `signal.map(v => html.div(v))`). Signals can be passed directly into renderables.
- **`no-empty-fragment`** (warn) - Warns about `Fragment()` with no children. Use `Empty` instead.
- **`no-single-child-fragment`** (warn) - Warns about `Fragment()` with a single child, which is unnecessary wrapping.

## Examples

### Correct signal usage

```typescript
const MyComponent = ctx => {
  const count = prop(0)          // Auto-disposed
  const doubled = count.map(x => x * 2) // Auto-disposed

  return html.div(count, ' x 2 = ', doubled)
}
```

### Async signals need manual tracking

```typescript
const MyComponent = ctx => {
  const data = prop(null)        // Create synchronously (auto-disposed)

  setTimeout(() => {
    data.set(fetchedValue)       // Just update the value
  }, 1000)

  return html.div(data)
}
```

### Module-level signals need untracked

```typescript
const globalCount = untracked(() => prop(0))
// Remember to dispose when done: globalCount.dispose()
```

## Custom Configuration

```javascript
// eslint.config.js
import tempots from '@tempots/eslint-plugin'

export default [
  {
    plugins: { tempots },
    rules: {
      'tempots/no-module-level-signals': 'warn',
      'tempots/require-untracked-disposal': 'error',
      'tempots/no-signal-reassignment': 'error',
      'tempots/prefer-const-signals': 'warn',
    },
  },
]
```

For more information, see the [Tempo documentation](/).

---

# tempots-core api index

[Home](#tempots-ui-api-index)

## tempots-core: API Reference

## tempots-core: Packages


| Package | Description |
| --- | --- |
| [@tempots/core](#core) | Core types and utilities for multi-context Tempo framework. This package provides the foundational types and utilities that are shared across all Tempo rendering contexts (DOM, ThreeJS, Konva, PixiJS, etc.). |

---

## core.accumulatesignal: accumulateSignal() function

Creates a signal that accumulates values over time using a reducer function, similar to `Array.reduce` but reactive. Each time the source signal changes, the reducer is called with the current accumulator and the new value.

**Signature:**```typescript
accumulateSignal: <T, A>(signal: Signal<T>, reducer: (acc: A, value: T) => A, initial: A, equals?: (a: A, b: A) => boolean) => Signal<A>
```## core.accumulatesignal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| signal | [Signal](#core-signal)&lt;T&gt; | The source signal. |
| reducer | (acc: A, value: T) =&gt; A | Function that takes the accumulator and the new value, returns the next accumulator. |
| initial | A | The initial accumulator value. |
| equals | (a: A, b: A) =&gt; boolean | _(Optional)_ Equality function for the accumulator. Defaults to `===`. |


**Returns:**

[Signal](#core-signal)&lt;A&gt;

A new signal that emits the accumulated value.

## core.accumulatesignal: Example```typescript
const clicks = prop(0)
const total = accumulateSignal(clicks, (sum, n) => sum + n, 0)
clicks.set(5)  // total.value === 5
clicks.set(3)  // total.value === 8
```

---

## core.and: and() function

Creates a computed signal that emits true if all input signals are true.

**Signature:**```typescript
export declare function and(...args: Value<boolean>[]): Computed<boolean>;
```## core.and: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| args | [Value](#core-value)&lt;boolean&gt;\[\] | The input signals. |


**Returns:**

[Computed](#core-computed)&lt;boolean&gt;

- The computed signal.

---

## core.animatesignal: animateSignal() function

Animates a signal by creating a new signal that transitions from an initial value to the current value of the input signal.

**Signature:**```typescript
animateSignal: <T>(signal: Signal<T>, options?: AnimateSignal<T>) => Prop<T>
```## core.animatesignal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| signal | [Signal](#core-signal)&lt;T&gt; | The input signal to animate. |
| options | AnimateSignal&lt;T&gt; | _(Optional)_ The animation options. |


**Returns:**

[Prop](#core-prop)&lt;T&gt;

- The animated signal.

---

## core.animatesignals: animateSignals() function

Animates signals based on the provided options.

**Signature:**```typescript
animateSignals: <T>(initialValue: T, fn: () => T, dependencies: Array<AnySignal>, options?: AnimateSignalsOptions<T>) => Prop<T>
```## core.animatesignals: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| initialValue | T | The initial value of the animation. |
| fn | () =&gt; T | A function that returns the end value of the animation. |
| dependencies | Array&lt;[AnySignal](#core-anysignal)&gt; | An array of signals that the animation depends on. |
| options | AnimateSignalsOptions&lt;T&gt; | _(Optional)_ Optional options for the animation. |


**Returns:**

[Prop](#core-prop)&lt;T&gt;

- The animated value as Prop<T/>

---

## core.anysignal: AnySignal type

Represents any type of signal. It can be a Signal, Prop, or Computed.

**Signature:**```typescript
export type AnySignal<T = any> = Signal<T> | Prop<T> | Computed<T>;
```
**References:** [Signal](#core-signal), [Prop](#core-prop), [Computed](#core-computed)

---

## core.atgetter: AtGetter type

Represents a type that maps each property of `T` to a `Signal` of its corresponding type.

**Signature:**```typescript
export type AtGetter<T> = {
    [K in keyof T]-?: Signal<T[K]>;
};
```
**References:** [Signal](#core-signal)

---

## core.basevaluetype: BaseValueType type

Gets the base value type of a given Value type.

**Signature:**```typescript
export type BaseValueType<T> = NonNullable<ValueType<T>>;
```
**References:** [ValueType](#core-valuetype)

---

## core.bind: bind() function

Binds a function or signal of a function to a set of signals and literals.

**Signature:**```typescript
bind: <FN extends (...args: any[]) => R, R = ReturnType<FN>>(fn: Value<FN>) => (...args: Values<Parameters<FN>>) => Computed<R>
```## core.bind: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | [Value](#core-value)&lt;FN&gt; | The function to bind. |


**Returns:**

(...args: [Values](#core-values)&lt;Parameters&lt;FN&gt;&gt;) =&gt; [Computed](#core-computed)&lt;R&gt;

- A function that takes a set of signals and literals and returns a computed signal.

---

## core.chaineasing: chainEasing() function

Chains two easing functions: `a` is used for the first half of the animation, `b` for the second half.

**Signature:**```typescript
chainEasing: (a: EasingFn, b: EasingFn) => EasingFn
```## core.chaineasing: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | [EasingFn](#core-easingfn) | Easing for the first half. |
| b | [EasingFn](#core-easingfn) | Easing for the second half. |


**Returns:**

[EasingFn](#core-easingfn)

A new easing function.

---

## core.clear: Clear type

A function that clears a resource.

Clear functions are returned by renderables and are called when the rendered content needs to be removed. The `removeTree` parameter indicates whether the entire tree should be removed (true) or just the event listeners and reactive subscriptions (false).

**Signature:**```typescript
export type Clear = (removeTree: boolean) => void;
```

---

## core.coalesce: coalesce() function

**Signature:**```typescript
export declare function coalesce<L>(...args: readonly [...unknown[], L]): Computed<ValueType<L>>;
```## core.coalesce: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| args | readonly \[...unknown\[\], L\] |  |


**Returns:**

[Computed](#core-computed)&lt;[ValueType](#core-valuetype)&lt;L&gt;&gt;

---

## core.computed._constructor_: Computed.(constructor)

Creates a new Computed signal.

\*\*Auto-Registration:\*\* This constructor automatically registers the signal with the current disposal scope (if one exists). This ensures that computed signals created by methods like `.map()`, `.flatMap()`, `.filter()`, etc. are automatically tracked and disposed.

When a computed signal is created within a renderable or `WithScope()`, it will be automatically disposed when the component unmounts or the scope is disposed.

To create a computed signal that outlives the current scope, use `untracked()`:```typescript
const globalSignal = untracked(() => mySignal.map(x => x * 2));
// Remember to dispose manually: globalSignal.dispose()
```

**Signature:**

```typescript
constructor(_fn: () => T, equals?: (a: T, b: T) => boolean);
```## core.computed._constructor_: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| \_fn | () =&gt; T | The function that computes the value of the signal. |
| equals | (a: T, b: T) =&gt; boolean | _(Optional)_ The function used to compare two values of type T for equality. |

---

## core.computed.dispose: Computed.dispose() method

Disposes the computed signal and cancels any pending recomputations. Uses structural parent references to remove itself from parents' derivative lists, then directly disposes own derivatives.

**Signature:**```typescript
dispose(): void;
```
**Returns:**

void

---

## core.computed.get: Computed.get() method

Gets the current value of the signal.

**Signature:**```typescript
get(): T;
```
**Returns:**

T

The current value of the signal.

---

## core.computed.is: Computed.is() method

Checks if a value is an instance of `Computed`.

**Signature:**```typescript
static is<T = unknown>(value: unknown): value is Computed<T>;
```## core.computed.is: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | unknown | The value to check. |


**Returns:**

value is [Computed](#core-computed)&lt;T&gt;

`true` if the value is an instance of `Computed`, `false` otherwise.

---

## core.computed: computed() function

Creates a computed signal that depends on other signals and updates when any of the dependencies change.

**Signature:**```typescript
computed: <T>(fn: () => T, dependencies: Array<AnySignal>, equals?: (a: T, b: T) => boolean) => Computed<T>
```## core.computed: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | () =&gt; T | The function that computes the value. |
| dependencies | Array&lt;[AnySignal](#core-anysignal)&gt; | The array of signals that the computed value depends on. |
| equals | (a: T, b: T) =&gt; boolean | _(Optional)_ The equality function used to compare the previous and current computed values. |


**Returns:**

[Computed](#core-computed)&lt;T&gt;

- The computed signal.

---

## core.computed.setdirty: Computed.setDirty() method

Marks the signal as dirty, indicating that its value has changed and needs to be recalculated. If the signal is already dirty or disposed, this method does nothing. It also marks all dependent signals as dirty and schedules a notification to update their values.

**Signature:**```typescript
setDirty(): void;
```
**Returns:**

void

---

## core.computed.value: Computed.value property

Gets the value of the signal.

**Signature:**```typescript
get value(): T;
```

---

## core.computedof: computedOf() function

Creates a computed signal that depends on other signals or literal values and updates when any of the dependencies change.

**Signature:**```typescript
computedOf: <T extends Value<unknown>[]>(...args: T) => <O>(fn: (...args: ValueTypes<T>) => O, equals?: (a: O, b: O) => boolean) => import('./signal').Computed<O>
```## core.computedof: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| args | T |  |


**Returns:**

&lt;O&gt;(fn: (...args: [ValueTypes](#core-valuetypes)&lt;T&gt;) =&gt; O, equals?: (a: O, b: O) =&gt; boolean) =&gt; import('./signal').[Computed](#core-computed)&lt;O&gt;

- The computed signal.

---

## core.computedofasync: computedOfAsync() function

Creates a computed signal that depends on other signals or literal values and performs an asynchronous computation when any of the dependencies change.

This is the async version of `computedOf`. It handles Promise-based computations by providing an alternative value while the async operation is pending and optional error recovery.

**Signature:**```typescript
computedOfAsync: <T extends Value<unknown>[]>(...args: T) => <O>(fn: (...args: [...ValueTypes<T>, {
    abortSignal: AbortSignal;
}]) => Promise<O>, alt: O, recover?: (error: unknown) => O, equals?: (a: O, b: O) => boolean) => Prop<O>
```## core.computedofasync: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| args | T | The signals or literal values that the computation depends on. |


**Returns:**

&lt;O&gt;(fn: (...args: \[...[ValueTypes](#core-valuetypes)&lt;T&gt;, { abortSignal: AbortSignal; }\]) =&gt; Promise&lt;O&gt;, alt: O, recover?: (error: unknown) =&gt; O, equals?: (a: O, b: O) =&gt; boolean) =&gt; [Prop](#core-prop)&lt;O&gt;

A function that takes the async computation function and configuration.

## core.computedofasync: Example```ts
const userId = prop(1)
const userData = computedOfAsync(userId)(
  async (id, { abortSignal }) => {
    const response = await fetch(`/api/users/${id}`, { signal: abortSignal })
    return response.json()
  },
  { name: 'Loading...', id: 0 },  // alt value while loading
  (error) => ({ name: 'Error', id: -1 })  // optional recovery
)
```

---

## core.computedofasyncgenerator: computedOfAsyncGenerator() function

Creates a computed signal that depends on other signals or literal values and performs an asynchronous generator computation when any of the dependencies change.

This is the async generator version of `computedOf`. It handles streaming computations where multiple values are yielded over time. Each yield updates the signal.

**Signature:**```typescript
computedOfAsyncGenerator: <T extends Value<unknown>[]>(...args: T) => <O>(fn: (...args: [...ValueTypes<T>, {
    abortSignal: AbortSignal;
}]) => AsyncGenerator<O, void, unknown>, alt: O, recover?: (error: unknown) => O, equals?: (a: O, b: O) => boolean) => Prop<O>
```## core.computedofasyncgenerator: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| args | T | The signals or literal values that the computation depends on. |


**Returns:**

&lt;O&gt;(fn: (...args: \[...[ValueTypes](#core-valuetypes)&lt;T&gt;, { abortSignal: AbortSignal; }\]) =&gt; AsyncGenerator&lt;O, void, unknown&gt;, alt: O, recover?: (error: unknown) =&gt; O, equals?: (a: O, b: O) =&gt; boolean) =&gt; [Prop](#core-prop)&lt;O&gt;

A function that takes the async generator function and configuration.

## core.computedofasyncgenerator: Example```ts
const query = prop('hello')
const streamingResponse = computedOfAsyncGenerator(query)(
  async function* (q, { abortSignal }) {
    const response = await fetch(`/api/stream?q=${q}`, { signal: abortSignal })
    const reader = response.body!.getReader()
    let accumulated = ''

    while (true) {
      const { done, value } = await reader.read()
      if (done) break
      accumulated += new TextDecoder().decode(value)
      yield accumulated
    }
  },
  '',  // alt value while loading
  (error) => 'Error: ' + error  // optional recovery
)
```

---

## core.computedrecord: computedRecord() function

Computes a value based on a record of signals and literals.

**Signature:**```typescript
computedRecord: <T extends Record<string, Value<unknown>>, O>(record: T, fn: (value: RemoveSignals<T>) => O) => Computed<O>
```## core.computedrecord: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| record | T | The record containing signals and literals. |
| fn | (value: [RemoveSignals](#core-removesignals)&lt;T&gt;) =&gt; O | The function to compute the value based on the literals. |


**Returns:**

[Computed](#core-computed)&lt;O&gt;

- The computed value as a signal.

---

## core.createrenderable: createRenderable() function

Creates a renderable object from a render function and type symbol.

This is a helper function for creating renderables. Most users will use context-specific helpers like `domRenderable()` or `threeRenderable()` instead of calling this directly.

**Signature:**```typescript
export declare function createRenderable<CTX extends RenderContext, TType extends symbol>(type: TType, renderFn: (ctx: CTX) => Clear): Renderable<CTX, TType>;
```## core.createrenderable: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| type | TType | The symbol type for runtime type checking |
| renderFn | (ctx: CTX) =&gt; [Clear](#core-clear) | The function that renders content into the context |


**Returns:**

[Renderable](#core-renderable)&lt;CTX, TType&gt;

A renderable object

## core.createrenderable: Example```typescript
const DOM_RENDERABLE_TYPE = Symbol('DOM_RENDERABLE')

const myComponent = createRenderable(
  DOM_RENDERABLE_TYPE,
  (ctx: DOMContext) => {
    const divCtx = ctx.makeChildElement('div', undefined)
    divCtx.makeChildText('Hello, World!')
    return (removeTree) => {
      divCtx.clear(removeTree)
    }
  }
)
```

---

## core.createselector: createSelector() function

Creates an O(1) selection primitive. Instead of creating a computed per item that ALL re-evaluate when the source changes, only the previously-selected and newly-selected items are notified.

**Signature:**```typescript
createSelector: <T>(source: Signal<T>, equals?: (a: T, b: T) => boolean) => ((key: T) => Signal<boolean>)
```## core.createselector: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| source | [Signal](#core-signal)&lt;T&gt; | The signal containing the currently selected value. |
| equals | (a: T, b: T) =&gt; boolean | _(Optional)_ Equality function. Defaults to `===`. |


**Returns:**

((key: T) =&gt; [Signal](#core-signal)&lt;boolean&gt;)

A function that takes a key and returns a `Signal<boolean>` that is `true` when that key matches the current source value.

## core.createselector: Example


</boolean>```typescript
const selected = prop(0)
const isSelected = createSelector(selected)

// Each call returns a Signal<boolean> that only updates
// when this specific key becomes or stops being selected
const isItem1 = isSelected(1) // Signal<false>
const isItem2 = isSelected(2) // Signal<false>

selected.set(1) // isItem1 -> true, isItem2 unchanged
selected.set(2) // isItem1 -> false, isItem2 -> true
```

---

## core.delaysignal: delaySignal() function

Delays the value of a signal by a specified amount of time.

**Signature:**```typescript
delaySignal: <T>(signal: Signal<T>, ms: number | ((value: T) => number)) => Signal<T>
```## core.delaysignal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| signal | [Signal](#core-signal)&lt;T&gt; | The signal to delay. |
| ms | number \\| ((value: T) =&gt; number) | The amount of time to delay the signal in milliseconds. |


**Returns:**

[Signal](#core-signal)&lt;T&gt;

- The delayed signal.

---

## core.disposalscope.computed: DisposalScope.computed() method

Creates a computed signal and tracks it in this scope. Use this method in async contexts where automatic tracking doesn't work.

**Signature:**```typescript
computed<T>(fn: () => T, dependencies: Array<AnySignal>, equals?: (a: T, b: T) => boolean): Computed<T>;
```## core.disposalscope.computed: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | () =&gt; T | The computation function |
| dependencies | Array&lt;[AnySignal](#core-anysignal)&gt; | Array of signals this computed depends on |
| equals | (a: T, b: T) =&gt; boolean | _(Optional)_ Optional equality function |


**Returns:**

[Computed](#core-computed)&lt;T&gt;

A tracked Computed signal

---

## core.disposalscope.computedof: DisposalScope.computedOf() method

Creates a computed signal with curried signature and tracks it in this scope. Use this method in async contexts where automatic tracking doesn't work.

**Signature:**```typescript
computedOf<T extends Value<unknown>[]>(...args: T): <O>(fn: (...args: ValueTypes<T>) => O, equals?: (a: O, b: O) => boolean) => Computed<O>;
```## core.disposalscope.computedof: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| args | T | Values or signals to compute from |


**Returns:**

&lt;O&gt;(fn: (...args: [ValueTypes](#core-valuetypes)&lt;T&gt;) =&gt; O, equals?: (a: O, b: O) =&gt; boolean) =&gt; [Computed](#core-computed)&lt;O&gt;

A function that takes the computation function and returns a tracked Computed signal

---

## core.disposalscope.dispose: DisposalScope.dispose() method

Dispose all signals tracked by this scope. This method is idempotent - calling it multiple times is safe.

**Signature:**```typescript
dispose(): void;
```
**Returns:**

void

---

## core.disposalscope.disposed: DisposalScope.disposed property

Check if this scope has been disposed.

**Signature:**```typescript
get disposed(): boolean;
```

---

## core.disposalscope.effect: DisposalScope.effect() method

Creates an effect and tracks it in this scope. Use this method in async contexts where automatic tracking doesn't work.

**Signature:**```typescript
effect(fn: () => void, signals: Array<AnySignal>, options?: ListenerOptions): () => void;
```## core.disposalscope.effect: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | () =&gt; void | The effect function |
| signals | Array&lt;[AnySignal](#core-anysignal)&gt; | Array of signals to listen to |
| options | [ListenerOptions](#core-listeneroptions) | _(Optional)_ Optional listener options |


**Returns:**

() =&gt; void

A clear function (the effect itself is tracked in the scope)

---

## core.disposalscope.effectof: DisposalScope.effectOf() method

Creates an effect with curried signature and tracks it in this scope. Use this method in async contexts where automatic tracking doesn't work.

**Signature:**```typescript
effectOf<T extends Value<unknown>[]>(...args: T): (fn: (...args: ValueTypes<T>) => void, options?: ListenerOptions) => (() => void);
```## core.disposalscope.effectof: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| args | T | Values or signals to listen to |


**Returns:**

(fn: (...args: [ValueTypes](#core-valuetypes)&lt;T&gt;) =&gt; void, options?: [ListenerOptions](#core-listeneroptions)) =&gt; (() =&gt; void)

A function that takes the effect function and returns a clear function

---

## core.disposalscope.gettrackedsignals: DisposalScope.getTrackedSignals() method

Returns the signals tracked by this scope. Used by dev tools (HMR, signal inspector) to introspect scope contents.

**Signature:**```typescript
getTrackedSignals(): ReadonlyArray<AnySignal>;
```
**Returns:**

ReadonlyArray&lt;[AnySignal](#core-anysignal)&gt;

Read-only array of tracked signals, empty if none or after disposal

---

## core.disposalscope: DisposalScope class

A DisposalScope tracks signals created during its lifetime and disposes them when the scope ends. This enables automatic signal disposal without manual OnDispose() calls.

**Signature:**```typescript
export declare class DisposalScope implements Scope 
```**Implements:** [Scope](#core-scope)

## core.disposalscope: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [disposed](#core-disposalscope-disposed) | `readonly` | boolean | Check if this scope has been disposed. |


## core.disposalscope: Methods


| Method | Modifiers | Description |
| --- | --- | --- |
| [computed(fn, dependencies, equals)](#core-disposalscope-computed) |  | Creates a computed signal and tracks it in this scope. Use this method in async contexts where automatic tracking doesn't work. |
| [computedOf(args)](#core-disposalscope-computedof) |  | Creates a computed signal with curried signature and tracks it in this scope. Use this method in async contexts where automatic tracking doesn't work. |
| [dispose()](#core-disposalscope-dispose) |  | Dispose all signals tracked by this scope. This method is idempotent - calling it multiple times is safe. |
| [effect(fn, signals, options)](#core-disposalscope-effect) |  | Creates an effect and tracks it in this scope. Use this method in async contexts where automatic tracking doesn't work. |
| [effectOf(args)](#core-disposalscope-effectof) |  | Creates an effect with curried signature and tracks it in this scope. Use this method in async contexts where automatic tracking doesn't work. |
| [getTrackedSignals()](#core-disposalscope-gettrackedsignals) |  | Returns the signals tracked by this scope. Used by dev tools (HMR, signal inspector) to introspect scope contents. |
| [onDispose(callback)](#core-disposalscope-ondispose) |  | Register a disposal callback to be called when this scope is disposed. Callbacks are called before signals are disposed. Use this for cleanup that doesn't need the `removeTree` parameter. |
| [prop(value, equals)](#core-disposalscope-prop) |  | Creates a prop signal and tracks it in this scope. Use this method in async contexts where automatic tracking doesn't work. |
| [track(signal)](#core-disposalscope-track) |  | Register a signal with this scope for automatic disposal. |

---

## core.disposalscope.ondispose: DisposalScope.onDispose() method

Register a disposal callback to be called when this scope is disposed. Callbacks are called before signals are disposed. Use this for cleanup that doesn't need the `removeTree` parameter.

**Signature:**```typescript
onDispose(callback: () => void): void;
```## core.disposalscope.ondispose: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| callback | () =&gt; void | The callback to call on disposal |


**Returns:**

void

---

## core.disposalscope.prop: DisposalScope.prop() method

Creates a prop signal and tracks it in this scope. Use this method in async contexts where automatic tracking doesn't work.

**Signature:**```typescript
prop<T>(value: T, equals?: (a: T, b: T) => boolean): Prop<T>;
```## core.disposalscope.prop: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | T | The initial value |
| equals | (a: T, b: T) =&gt; boolean | _(Optional)_ Optional equality function |


**Returns:**

[Prop](#core-prop)&lt;T&gt;

A tracked Prop signal

---

## core.disposalscope.track: DisposalScope.track() method

Register a signal with this scope for automatic disposal.

**Signature:**```typescript
track(signal: AnySignal): void;
```## core.disposalscope.track: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| signal | [AnySignal](#core-anysignal) | The signal to track |


**Returns:**

void

---

## core.distinctuntilchanged: distinctUntilChanged() function

Creates a signal that only emits when the value changes according to the provided equality function. Useful downstream of `.map()` chains where a transformation may produce the same output for different inputs.

**Signature:**```typescript
distinctUntilChanged: <T>(signal: Signal<T>, equals?: (a: T, b: T) => boolean) => Signal<T>
```## core.distinctuntilchanged: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| signal | [Signal](#core-signal)&lt;T&gt; | The input signal. |
| equals | (a: T, b: T) =&gt; boolean | _(Optional)_ Equality function to compare consecutive values. Defaults to `===`. |


**Returns:**

[Signal](#core-signal)&lt;T&gt;

A new signal that skips consecutive equal values.

---

## core.easeinback: easeInBack variable

Back ease-in (overshoots at start, s = 1.70158).

**Signature:**```typescript
easeInBack: EasingFn
```

---

## core.easeinbounce: easeInBounce variable

Bounce ease-in.

**Signature:**```typescript
easeInBounce: EasingFn
```

---

## core.easeincubic: easeInCubic variable

Cubic ease-in.

**Signature:**```typescript
easeInCubic: EasingFn
```

---

## core.easeinelastic: easeInElastic variable

Elastic ease-in.

**Signature:**```typescript
easeInElastic: EasingFn
```

---

## core.easeinexpo: easeInExpo variable

Exponential ease-in.

**Signature:**```typescript
easeInExpo: EasingFn
```

---

## core.easeinoutback: easeInOutBack variable

Back ease-in-out (overshoots both ends).

**Signature:**```typescript
easeInOutBack: EasingFn
```

---

## core.easeinoutbounce: easeInOutBounce variable

Bounce ease-in-out.

**Signature:**```typescript
easeInOutBounce: EasingFn
```

---

## core.easeinoutcubic: easeInOutCubic variable

Cubic ease-in-out.

**Signature:**```typescript
easeInOutCubic: EasingFn
```

---

## core.easeinoutelastic: easeInOutElastic variable

Elastic ease-in-out.

**Signature:**```typescript
easeInOutElastic: EasingFn
```

---

## core.easeinoutexpo: easeInOutExpo variable

Exponential ease-in-out.

**Signature:**```typescript
easeInOutExpo: EasingFn
```

---

## core.easeinoutquad: easeInOutQuad variable

Quadratic ease-in-out.

**Signature:**```typescript
easeInOutQuad: EasingFn
```

---

## core.easeinoutquart: easeInOutQuart variable

Quartic ease-in-out.

**Signature:**```typescript
easeInOutQuart: EasingFn
```

---

## core.easeinoutsine: easeInOutSine variable

Sine ease-in-out.

**Signature:**```typescript
easeInOutSine: EasingFn
```

---

## core.easeinquad: easeInQuad variable

Quadratic ease-in.

**Signature:**```typescript
easeInQuad: EasingFn
```

---

## core.easeinquart: easeInQuart variable

Quartic ease-in.

**Signature:**```typescript
easeInQuart: EasingFn
```

---

## core.easeinsine: easeInSine variable

Sine ease-in.

**Signature:**```typescript
easeInSine: EasingFn
```

---

## core.easeoutback: easeOutBack variable

Back ease-out (overshoots at end).

**Signature:**```typescript
easeOutBack: EasingFn
```

---

## core.easeoutbounce: easeOutBounce variable

Bounce ease-out.

**Signature:**```typescript
easeOutBounce: EasingFn
```

---

## core.easeoutcubic: easeOutCubic variable

Cubic ease-out.

**Signature:**```typescript
easeOutCubic: EasingFn
```

---

## core.easeoutelastic: easeOutElastic variable

Elastic ease-out.

**Signature:**```typescript
easeOutElastic: EasingFn
```

---

## core.easeoutexpo: easeOutExpo variable

Exponential ease-out.

**Signature:**```typescript
easeOutExpo: EasingFn
```

---

## core.easeoutquad: easeOutQuad variable

Quadratic ease-out.

**Signature:**```typescript
easeOutQuad: EasingFn
```

---

## core.easeoutquart: easeOutQuart variable

Quartic ease-out.

**Signature:**```typescript
easeOutQuart: EasingFn
```

---

## core.easeoutsine: easeOutSine variable

Sine ease-out.

**Signature:**```typescript
easeOutSine: EasingFn
```

---

## core.easingfn: EasingFn type

A function that maps a normalized time value `t` in \[0, 1\] to a progress value, typically also in \[0, 1\] but may overshoot for back/elastic easings.

**Signature:**```typescript
export type EasingFn = (t: number) => number;
```

---

## core.effect: effect() function

Executes the provided function `fn` whenever any of the signals in the `signals` array change. Returns a disposable object that can be used to stop the effect.

**Signature:**```typescript
effect: (fn: () => void, signals: Array<AnySignal>, options?: ListenerOptions) => () => void
```## core.effect: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | () =&gt; void | The function to execute when the signals change. |
| signals | Array&lt;[AnySignal](#core-anysignal)&gt; | An array of signals to watch for changes. |
| options | [ListenerOptions](#core-listeneroptions) | _(Optional)_ |


**Returns:**

() =&gt; void

A disposable object that can be used to stop the effect.

---

## core.effectof: effectOf() function

Creates an effect that depends on other signals or literal values and updates when any of the dependencies change.

**Signature:**```typescript
effectOf: <T extends Value<unknown>[]>(...args: T) => (fn: (...args: ValueTypes<T>) => void, options?: ListenerOptions) => () => void
```## core.effectof: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| args | T | The array of signals or literal values that the effect depends on. |


**Returns:**

(fn: (...args: [ValueTypes](#core-valuetypes)&lt;T&gt;) =&gt; void, options?: [ListenerOptions](#core-listeneroptions)) =&gt; () =&gt; void

A disposable object that can be used to stop the effect.

---

## core.elementposition._constructor_: ElementPosition.(constructor)

Creates a new instance of `ElementPosition`.

**Signature:**```typescript
constructor(
    index: number, 
    total: Signal<number>);
```## core.elementposition._constructor_: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| index | number | The index of the element. |
| total | [Signal](#core-signal)&lt;number&gt; | The total number of elements in the collection. |

---

## core.elementposition.counter: ElementPosition.counter property

The counter of the element starting from 1.

**Signature:**```typescript
readonly counter: number;
```

---

## core.elementposition.dispose: ElementPosition.dispose() method

Disposes the internal signal created by `isLast`.

\*\*Note:\*\* With automatic signal disposal, this method is now a no-op when used within a disposal scope (e.g., inside a renderable). The signal created by `isLast` is automatically tracked and disposed when the scope ends. This method is kept for backward compatibility and for cases where ElementPosition is used outside a scope.

**Signature:**```typescript
dispose(): void;
```
**Returns:**

void

---

## core.elementposition.index: ElementPosition.index property

The index of the element.

**Signature:**```typescript
readonly index: number;
```

---

## core.elementposition.iseven: ElementPosition.isEven property

Checks if the counter of the element is even.

**Signature:**```typescript
readonly isEven: boolean;
```

---

## core.elementposition.isfirst: ElementPosition.isFirst property

Checks if the element is the first element in the collection.

**Signature:**```typescript
readonly isFirst: boolean;
```

---

## core.elementposition.islast: ElementPosition.isLast property

Checks if the element is the last element in the collection.

**Signature:**```typescript
get isLast(): Signal<boolean>;
```

---

## core.elementposition.isodd: ElementPosition.isOdd property

Checks if the counter of the element is odd.

**Signature:**```typescript
readonly isOdd: boolean;
```

---

## core.elementposition: ElementPosition class

Represents the position of an element in a collection.

**Signature:**```typescript
export declare class ElementPosition 
```## core.elementposition: Constructors


| Constructor | Modifiers | Description |
| --- | --- | --- |
| [(constructor)(index, total)](#core-elementposition-constructor) |  | Creates a new instance of `ElementPosition`. |


## core.elementposition: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [counter](#core-elementposition-counter) | `readonly` | number | The counter of the element starting from 1. |
| [index](#core-elementposition-index) | `readonly` | number | The index of the element. |
| [isEven](#core-elementposition-iseven) | `readonly` | boolean | Checks if the counter of the element is even. |
| [isFirst](#core-elementposition-isfirst) | `readonly` | boolean | Checks if the element is the first element in the collection. |
| [isLast](#core-elementposition-islast) | `readonly` | [Signal](#core-signal)&lt;boolean&gt; | Checks if the element is the last element in the collection. |
| [isOdd](#core-elementposition-isodd) | `readonly` | boolean | Checks if the counter of the element is odd. |
| [total](#core-elementposition-total) | `readonly` | [Signal](#core-signal)&lt;number&gt; | The total number of elements in the collection. |


## core.elementposition: Methods


| Method | Modifiers | Description |
| --- | --- | --- |
| [dispose()](#core-elementposition-dispose) |  | Disposes the internal signal created by `isLast`. \*\*Note:\*\* With automatic signal disposal, this method is now a no-op when used within a disposal scope (e.g., inside a renderable). The signal created by `isLast` is automatically tracked and disposed when the scope ends. This method is kept for backward compatibility and for cases where ElementPosition is used outside a scope. |

---

## core.elementposition.total: ElementPosition.total property

The total number of elements in the collection.

**Signature:**```typescript
readonly total: Signal<number>;
```

---

## core.endinterpolate: endInterpolate() function

A fake interpolate function that always returns the end value.

**Signature:**```typescript
endInterpolate: <T>(_start: T, end: T) => T
```## core.endinterpolate: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| \_start | T |  |
| end | T |  |


**Returns:**

T

---

## core.getcurrentscope: getCurrentScope() function

Get the current active scope.

**Signature:**```typescript
getCurrentScope: () => Scope | null
```
**Returns:**

[Scope](#core-scope) \| null

The current scope, or null if no scope is active

---

## core.getparentscope: getParentScope() function

Get the parent scope of the current scope.

 Most users don't need this. Accessing parent scopes can lead to unexpected behavior. Only use this for debugging or advanced use cases.

**Signature:**```typescript
getParentScope: () => Scope | null
```
**Returns:**

[Scope](#core-scope) \| null

The parent scope or null if no parent exists

---

## core.getscopestack: getScopeStack() function

Get the full scope stack. Useful for debugging scope hierarchy.

 Most users don't need this. Use getCurrentScope() instead.

**Signature:**```typescript
getScopeStack: () => readonly Scope[]
```
**Returns:**

readonly [Scope](#core-scope)\[\]

Read-only array of active scopes

---

## core.guessinterpolate: guessInterpolate() function

Returns an interpolation function based on the type of the value.

**Signature:**```typescript
guessInterpolate: <T>(value: T) => Interpolate<T>
```## core.guessinterpolate: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | T | The value to be interpolated. |


**Returns:**

[Interpolate](#core-interpolate)&lt;T&gt;

An interpolation function that takes a start value, an end value, and a delta, and returns an interpolated value.

---

## core.hierarchicalcontext.makeref: HierarchicalContext.makeRef() method

Creates a reference marker at the current position.

Reference markers are used to preserve exact insertion points when conditionally rendering or swapping children. For example, when using `When(condition, () => Child())`, the reference marker ensures that `Child` is inserted at the correct position when the condition becomes true.

**Signature:**```typescript
makeRef(): this;
```
**Returns:**

this

A new context with a reference to the marker

---

## core.hierarchicalcontext: HierarchicalContext interface

Extended interface for contexts that support hierarchical rendering with ordered children.

Most rendering contexts (DOM, ThreeJS, Konva, PixiJS) have ordered children where position matters for rendering order, z-index, or scene graph traversal. This interface provides methods for creating reference markers that preserve exact insertion points when conditionally rendering or swapping children.

Reference markers are invisible placeholders that mark positions in the children list. Implementation varies by context: - DOM: Comment nodes (``) - ThreeJS: Empty `Object3D` with `visible=false` - Konva: Invisible `Group` with `listening=false` - PixiJS: Empty `Container` with `renderable=false`

**Signature:**```typescript
export interface HierarchicalContext extends RenderContext 
```**Extends:** [RenderContext](#core-rendercontext)

## core.hierarchicalcontext: Methods


| Method | Description |
| --- | --- |
| [makeRef()](#core-hierarchicalcontext-makeref) | Creates a reference marker at the current position. Reference markers are used to preserve exact insertion points when conditionally rendering or swapping children. For example, when using `When(condition, () => Child())`, the reference marker ensures that `Child` is inserted at the correct position when the condition becomes true. |

---

## core.interpolate: Interpolate type

Represents a function that interpolates between two values.

**Signature:**```typescript
export type Interpolate<T> = (start: T, end: T, delta: number) => T;
```

---

## core.interpolatedate: interpolateDate variable

Interpolates between two dates based on a delta value.

**Signature:**```typescript
interpolateDate: Interpolate<Date>
```

---

## core.interpolatenumber: interpolateNumber variable

Interpolates a number between a start and end value based on a delta.

**Signature:**```typescript
interpolateNumber: Interpolate<number>
```

---

## core.interpolatestring: interpolateString variable

Interpolates between two strings based on a delta value.

**Signature:**```typescript
interpolateString: Interpolate<string>
```

---

## core.joinsignals: joinSignals() function

Joins a set of signals into a single signal that emits a record of the values.

**Signature:**```typescript
joinSignals: <T extends Record<string, Value<unknown>>>(values: T) => Signal<{ [K in keyof T]: T[K]; }>
```## core.joinsignals: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| values | T | The set of signals to join as a record of `Value`s. |


**Returns:**

[Signal](#core-signal)&lt;{ \[K in keyof T\]: T\[K\]; }&gt;

A signal that emits a record of the values.

---

## core.keyedposition._constructor_: KeyedPosition.(constructor)

Creates a new instance of `KeyedPosition`.

**Signature:**```typescript
constructor(initialIndex: number, 
    total: Signal<number>);
```## core.keyedposition._constructor_: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| initialIndex | number | The initial index of the element. |
| total | [Signal](#core-signal)&lt;number&gt; | A reactive signal representing the total number of elements in the collection. |

---

## core.keyedposition.counter: KeyedPosition.counter property

The 1-based counter (index + 1).

**Signature:**```typescript
get counter(): Signal<number>;
```

---

## core.keyedposition.dispose: KeyedPosition.dispose() method

Disposes the internal signals created by this position.

\*\*Note:\*\* With automatic signal disposal, this method is typically a no-op when used within a disposal scope (e.g., inside a renderable). Kept for backward compatibility and edge cases.

**Signature:**```typescript
dispose(): void;
```
**Returns:**

void

---

## core.keyedposition.index: KeyedPosition.index property

The reactive index of the element. Created lazily on first access.

**Signature:**```typescript
get index(): Signal<number>;
```

---

## core.keyedposition.iseven: KeyedPosition.isEven property

Whether the counter is even.

**Signature:**```typescript
get isEven(): Signal<boolean>;
```

---

## core.keyedposition.isfirst: KeyedPosition.isFirst property

Whether this is the first element in the collection.

**Signature:**```typescript
get isFirst(): Signal<boolean>;
```

---

## core.keyedposition.islast: KeyedPosition.isLast property

Whether this is the last element in the collection.

**Signature:**```typescript
get isLast(): Signal<boolean>;
```

---

## core.keyedposition.isodd: KeyedPosition.isOdd property

Whether the counter is odd.

**Signature:**```typescript
get isOdd(): Signal<boolean>;
```

---

## core.keyedposition: KeyedPosition class

Represents the position of an element in a keyed collection.

Unlike [ElementPosition](#core-elementposition) where `index` and derived fields are static, `KeyedPosition` makes \*\*all fields reactive\*\*. When an item moves to a new position (e.g., due to array reordering in `KeyedForEach`), all derived fields (`counter`, `isFirst`, `isEven`, `isOdd`, `isLast`) update automatically.

The index signal and all derived fields are created lazily — only when first accessed — to avoid unnecessary signal overhead when they are not used.

**Signature:**```typescript
export declare class KeyedPosition 
```## core.keyedposition: Constructors


| Constructor | Modifiers | Description |
| --- | --- | --- |
| [(constructor)(initialIndex, total)](#core-keyedposition-constructor) |  | Creates a new instance of `KeyedPosition`. |


## core.keyedposition: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [counter](#core-keyedposition-counter) | `readonly` | [Signal](#core-signal)&lt;number&gt; | The 1-based counter (index + 1). |
| [index](#core-keyedposition-index) | `readonly` | [Signal](#core-signal)&lt;number&gt; | The reactive index of the element. Created lazily on first access. |
| [isEven](#core-keyedposition-iseven) | `readonly` | [Signal](#core-signal)&lt;boolean&gt; | Whether the counter is even. |
| [isFirst](#core-keyedposition-isfirst) | `readonly` | [Signal](#core-signal)&lt;boolean&gt; | Whether this is the first element in the collection. |
| [isLast](#core-keyedposition-islast) | `readonly` | [Signal](#core-signal)&lt;boolean&gt; | Whether this is the last element in the collection. |
| [isOdd](#core-keyedposition-isodd) | `readonly` | [Signal](#core-signal)&lt;boolean&gt; | Whether the counter is odd. |
| [total](#core-keyedposition-total) | `readonly` | [Signal](#core-signal)&lt;number&gt; | The reactive total number of elements in the collection. |


## core.keyedposition: Methods


| Method | Modifiers | Description |
| --- | --- | --- |
| [dispose()](#core-keyedposition-dispose) |  | Disposes the internal signals created by this position. \*\*Note:\*\* With automatic signal disposal, this method is typically a no-op when used within a disposal scope (e.g., inside a renderable). Kept for backward compatibility and edge cases. |

---

## core.keyedposition.total: KeyedPosition.total property

The reactive total number of elements in the collection.

**Signature:**```typescript
readonly total: Signal<number>;
```

---

## core.linear: linear variable

Identity easing: `f(t) = t`.

**Signature:**```typescript
linear: EasingFn
```

---

## core.listeneroptions: ListenerOptions type

**Signature:**```typescript
export type ListenerOptions = {
    skipInitial?: boolean;
    once?: boolean;
    abortSignal?: AbortSignal;
    noAutoDispose?: boolean;
};
```

---

## core.localstorageprop: localStorageProp() function

Creates a prop that is backed by the localStorage or a MemoryStore.

**Signature:**```typescript
localStorageProp: <T>(options: StorageOptions<T>) => Prop<T>
```## core.localstorageprop: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| options | StorageOptions&lt;T&gt; | The options for creating the prop. |


**Returns:**

[Prop](#core-prop)&lt;T&gt;

The created prop.

---

## core.makeprovidermark: makeProviderMark() function

Creates a unique symbol that can be used as a provider mark for a specific type `T`.

**Signature:**```typescript
makeProviderMark: <T>(identifier: string) => ProviderMark<T>
```## core.makeprovidermark: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| identifier | string | A string that uniquely identifies the provider |


**Returns:**

[ProviderMark](#core-providermark)&lt;T&gt;

A unique symbol that can be used as a provider mark

## core.makeprovidermark: Example```typescript
interface UserService {
  getUser(id: string): Promise<User>
}

const USER_SERVICE = makeProviderMark<UserService>('UserService')
```

---

## core package

Core types and utilities for multi-context Tempo framework.

This package provides the foundational types and utilities that are shared across all Tempo rendering contexts (DOM, ThreeJS, Konva, PixiJS, etc.).

## core: Classes


| Class | Description |
| --- | --- |
| [Computed](#core-computed) | Represents a computed signal that derives its value from a function. It extends the `Signal` class. |
| [DisposalScope](#core-disposalscope) | A DisposalScope tracks signals created during its lifetime and disposes them when the scope ends. This enables automatic signal disposal without manual OnDispose() calls. |
| [ElementPosition](#core-elementposition) | Represents the position of an element in a collection. |
| [KeyedPosition](#core-keyedposition) | Represents the position of an element in a keyed collection. Unlike [ElementPosition](#core-elementposition) where `index` and derived fields are static, `KeyedPosition` makes \*\*all fields reactive\*\*. When an item moves to a new position (e.g., due to array reordering in `KeyedForEach`), all derived fields (`counter`, `isFirst`, `isEven`, `isOdd`, `isLast`) update automatically. The index signal and all derived fields are created lazily — only when first accessed — to avoid unnecessary signal overhead when they are not used. |
| [MemoryStore](#core-memorystore) | Represents a memory store that stores key-value pairs. |
| [Prop](#core-prop) | Represents a property signal that holds a value of type T. It extends the `Signal` class. |
| [Signal](#core-signal) |  |


## core: Functions


| Function | Description |
| --- | --- |
| [accumulateSignal(signal, reducer, initial, equals)](#core-accumulatesignal) | Creates a signal that accumulates values over time using a reducer function, similar to `Array.reduce` but reactive. Each time the source signal changes, the reducer is called with the current accumulator and the new value. |
| [and(args)](#core-and) | Creates a computed signal that emits true if all input signals are true. |
| [animateSignal(signal, options)](#core-animatesignal) | Animates a signal by creating a new signal that transitions from an initial value to the current value of the input signal. |
| [animateSignals(initialValue, fn, dependencies, options)](#core-animatesignals) | Animates signals based on the provided options. |
| [bind(fn)](#core-bind) | Binds a function or signal of a function to a set of signals and literals. |
| [chainEasing(a, b)](#core-chaineasing) | Chains two easing functions: `a` is used for the first half of the animation, `b` for the second half. |
| [coalesce(args)](#core-coalesce) |  |
| [computed(fn, dependencies, equals)](#core-computed) | Creates a computed signal that depends on other signals and updates when any of the dependencies change. |
| [computedOf(args)](#core-computedof) | Creates a computed signal that depends on other signals or literal values and updates when any of the dependencies change. |
| [computedOfAsync(args)](#core-computedofasync) | Creates a computed signal that depends on other signals or literal values and performs an asynchronous computation when any of the dependencies change. This is the async version of `computedOf`. It handles Promise-based computations by providing an alternative value while the async operation is pending and optional error recovery. |
| [computedOfAsyncGenerator(args)](#core-computedofasyncgenerator) | Creates a computed signal that depends on other signals or literal values and performs an asynchronous generator computation when any of the dependencies change. This is the async generator version of `computedOf`. It handles streaming computations where multiple values are yielded over time. Each yield updates the signal. |
| [computedRecord(record, fn)](#core-computedrecord) | Computes a value based on a record of signals and literals. |
| [createRenderable(type, renderFn)](#core-createrenderable) | Creates a renderable object from a render function and type symbol. This is a helper function for creating renderables. Most users will use context-specific helpers like `domRenderable()` or `threeRenderable()` instead of calling this directly. |
| [createSelector(source, equals)](#core-createselector) | Creates an O(1) selection primitive. Instead of creating a computed per item that ALL re-evaluate when the source changes, only the previously-selected and newly-selected items are notified. |
| [delaySignal(signal, ms)](#core-delaysignal) | Delays the value of a signal by a specified amount of time. |
| [distinctUntilChanged(signal, equals)](#core-distinctuntilchanged) | Creates a signal that only emits when the value changes according to the provided equality function. Useful downstream of `.map()` chains where a transformation may produce the same output for different inputs. |
| [effect(fn, signals, options)](#core-effect) | Executes the provided function `fn` whenever any of the signals in the `signals` array change. Returns a disposable object that can be used to stop the effect. |
| [effectOf(args)](#core-effectof) | Creates an effect that depends on other signals or literal values and updates when any of the dependencies change. |
| [endInterpolate(\_start, end)](#core-endinterpolate) | A fake interpolate function that always returns the end value. |
| [getCurrentScope()](#core-getcurrentscope) | Get the current active scope. |
| [getParentScope()](#core-getparentscope) | Get the parent scope of the current scope. Most users don't need this. Accessing parent scopes can lead to unexpected behavior. Only use this for debugging or advanced use cases. |
| [getScopeStack()](#core-getscopestack) | Get the full scope stack. Useful for debugging scope hierarchy. Most users don't need this. Use getCurrentScope() instead. |
| [guessInterpolate(value)](#core-guessinterpolate) | Returns an interpolation function based on the type of the value. |
| [joinSignals(values)](#core-joinsignals) | Joins a set of signals into a single signal that emits a record of the values. |
| [localStorageProp(options)](#core-localstorageprop) | Creates a prop that is backed by the localStorage or a MemoryStore. |
| [makeProviderMark(identifier)](#core-makeprovidermark) | Creates a unique symbol that can be used as a provider mark for a specific type `T`. |
| [merge(options)](#core-merge) | Merges a record of signals and literals into a single signal. |
| [mirrorEasing(fn)](#core-mirroreasing) | Mirrors an easing function: the first half uses `fn`, the second half plays it in reverse. Useful for creating symmetric in-out easings from a single ease-in. |
| [not(arg)](#core-not) | Creates a signal or value that is the boolean negation of the input. If the input is a Signal, returns a mapped Signal. If it is a literal, returns the negated value. |
| [notNil(arg)](#core-notnil) | Creates a signal or value that is `true` when the input is not `null` or `undefined`. If the input is a Signal, returns a mapped Signal. If it is a literal, returns the boolean result. |
| [or(args)](#core-or) | Creates a computed signal that emits true if any input signal is true. |
| [previousSignal(signal)](#core-previoussignal) | Creates a signal that emits the previous value of the input signal. |
| [prop(value, equals)](#core-prop) | Creates a new Prop object with the specified value and equality function. |
| [propHistory(prop, options)](#core-prophistory) | Creates a history controller for a Prop, enabling undo/redo navigation. |
| [propHistory(signal, set, options)](#core-prophistory1) | Creates a history controller for a Signal with an external setter, enabling undo/redo navigation. |
| [reverseEasing(fn)](#core-reverseeasing) | Reverses an easing function: the result plays the easing curve backwards. `reverseEasing(easeIn)` produces an ease-out curve. |
| [scoped(fn)](#core-scoped) | Execute a function in a new scope and dispose the scope immediately after. Useful for one-off scoped operations. |
| [sessionStorageProp(options)](#core-sessionstorageprop) | Creates a prop that stores its value in the session storage. |
| [signal(value, equals)](#core-signal) | Creates a signal with the specified initial value and equality function. |
| [slidingWindowSignal({ size, signal, }, input)](#core-slidingwindowsignal) | Creates a signal that emits a sliding window of values from the input signal. |
| [storedProp({ key, defaultValue, store, serialize, deserialize, equals, onLoad, syncTabs, onKeyChange, }, input)](#core-storedprop) | Creates a stored property that persists its value in a storage mechanism. |
| [strictEquals(a, b)](#core-strictequals) | Singleton strict equality function. Used as default `equals` for all signals to avoid allocating a new arrow function per signal instance. |
| [syncProp(propToSync, { channel: channelName, serialize, deserialize, equals, }, input)](#core-syncprop) | Synchronizes a prop across browser tabs using BroadcastChannel. When the prop value changes in one tab, all other tabs with the same channel will be updated. |
| [throttleSignal(signal, ms)](#core-throttlesignal) | Creates a signal that throttles the input signal, emitting at most once per interval. The first change is emitted immediately, then subsequent changes within the interval are batched — the most recent value is emitted when the interval expires. |
| [untracked(fn)](#core-untracked) | Execute a function without any scope tracking. Signals created inside will NOT be automatically tracked. |
| [withScope(scope, fn)](#core-withscope) | Execute a function within a scope context. The scope is pushed before the function executes and popped after. The scope is NOT disposed - the caller is responsible for disposal. |


## core: Interfaces


| Interface | Description |
| --- | --- |
| [HierarchicalContext](#core-hierarchicalcontext) | Extended interface for contexts that support hierarchical rendering with ordered children. Most rendering contexts (DOM, ThreeJS, Konva, PixiJS) have ordered children where position matters for rendering order, z-index, or scene graph traversal. This interface provides methods for creating reference markers that preserve exact insertion points when conditionally rendering or swapping children. Reference markers are invisible placeholders that mark positions in the children list. Implementation varies by context: - DOM: Comment nodes (``) - ThreeJS: Empty `Object3D` with `visible=false` - Konva: Invisible `Group` with `listening=false` - PixiJS: Empty `Container` with `renderable=false` |
| [Renderable](#core-renderable) | A renderable object that can be rendered into a specific context. Renderables are the fundamental building blocks of Tempo applications. They are objects with a `render()` method that receives a context and returns a cleanup function, and a `type` symbol for runtime type checking. |
| [RenderContext](#core-rendercontext) | Base interface for all rendering contexts. A RenderContext provides the minimal interface needed for rendering content. Context-specific implementations (DOM, ThreeJS, Konva, etc.) extend this interface with their own methods. |
| [Scope](#core-scope) | Minimal interface for scope tracking. Both DisposalScope and lightweight inline scopes implement this. Only `track` and `onDispose` are needed by the signal system. |


## core: Variables


| Variable | Description |
| --- | --- |
| [easeInBack](#core-easeinback) | Back ease-in (overshoots at start, s = 1.70158). |
| [easeInBounce](#core-easeinbounce) | Bounce ease-in. |
| [easeInCubic](#core-easeincubic) | Cubic ease-in. |
| [easeInElastic](#core-easeinelastic) | Elastic ease-in. |
| [easeInExpo](#core-easeinexpo) | Exponential ease-in. |
| [easeInOutBack](#core-easeinoutback) | Back ease-in-out (overshoots both ends). |
| [easeInOutBounce](#core-easeinoutbounce) | Bounce ease-in-out. |
| [easeInOutCubic](#core-easeinoutcubic) | Cubic ease-in-out. |
| [easeInOutElastic](#core-easeinoutelastic) | Elastic ease-in-out. |
| [easeInOutExpo](#core-easeinoutexpo) | Exponential ease-in-out. |
| [easeInOutQuad](#core-easeinoutquad) | Quadratic ease-in-out. |
| [easeInOutQuart](#core-easeinoutquart) | Quartic ease-in-out. |
| [easeInOutSine](#core-easeinoutsine) | Sine ease-in-out. |
| [easeInQuad](#core-easeinquad) | Quadratic ease-in. |
| [easeInQuart](#core-easeinquart) | Quartic ease-in. |
| [easeInSine](#core-easeinsine) | Sine ease-in. |
| [easeOutBack](#core-easeoutback) | Back ease-out (overshoots at end). |
| [easeOutBounce](#core-easeoutbounce) | Bounce ease-out. |
| [easeOutCubic](#core-easeoutcubic) | Cubic ease-out. |
| [easeOutElastic](#core-easeoutelastic) | Elastic ease-out. |
| [easeOutExpo](#core-easeoutexpo) | Exponential ease-out. |
| [easeOutQuad](#core-easeoutquad) | Quadratic ease-out. |
| [easeOutQuart](#core-easeoutquart) | Quartic ease-out. |
| [easeOutSine](#core-easeoutsine) | Sine ease-out. |
| [interpolateDate](#core-interpolatedate) | Interpolates between two dates based on a delta value. |
| [interpolateNumber](#core-interpolatenumber) | Interpolates a number between a start and end value based on a delta. |
| [interpolateString](#core-interpolatestring) | Interpolates between two strings based on a delta value. |
| [linear](#core-linear) | Identity easing: `f(t) = t`. |
| [Value](#core-value) |  |


## core: Type Aliases


| Type Alias | Description |
| --- | --- |
| [AnySignal](#core-anysignal) | Represents any type of signal. It can be a Signal, Prop, or Computed. |
| [AtGetter](#core-atgetter) | Represents a type that maps each property of `T` to a `Signal` of its corresponding type. |
| [BaseValueType](#core-basevaluetype) | Gets the base value type of a given Value type. |
| [Clear](#core-clear) | A function that clears a resource. Clear functions are returned by renderables and are called when the rendered content needs to be removed. The `removeTree` parameter indicates whether the entire tree should be removed (true) or just the event listeners and reactive subscriptions (false). |
| [EasingFn](#core-easingfn) | A function that maps a normalized time value `t` in \[0, 1\] to a progress value, typically also in \[0, 1\] but may overshoot for back/elastic easings. |
| [Interpolate](#core-interpolate) | Represents a function that interpolates between two values. |
| [ListenerOptions](#core-listeneroptions) |  |
| [Nil](#core-nil) | Represents a value that can be null or undefined. |
| [Primitive](#core-primitive) | Primitive types that can be rendered as text content. The rendering context coerces these to strings automatically. |
| [PropHistory](#core-prophistory) | A history controller that provides undo/redo navigation for a signal. |
| [PropHistoryOptions](#core-prophistoryoptions) | Options for configuring a PropHistory controller. |
| [ProviderMark](#core-providermark) | Represents a provider mark for dependency injection. Provider marks are unique symbols used to identify providers in a dependency injection system. The type parameter ensures type safety when retrieving providers. |
| [RemoveSignals](#core-removesignals) | Removes signals from a given object type and returns a new object type with only the non-signal properties. |
| [StoredPropOptions](#core-storedpropoptions) | Represents the properties required for storing and retrieving a value of type `T`. |
| [SyncPropOptions](#core-syncpropoptions) | Options for synchronizing a prop across browser tabs. |
| [TNode](#core-tnode) |  |
| [Value](#core-value) | Represents a value that can either be a `Signal<T>` or a generic type `T`. </T> |
| [Values](#core-values) | Wraps all non-`Value` types in the array in `Value`. |
| [ValueType](#core-valuetype) | Gets the value type of a given Value type. If the type is a `Signal`, it returns the inferred value type. Otherwise, it returns the type itself. |
| [ValueTypes](#core-valuetypes) | Gets the value types of a given array of Value types. |

---

## core.memorystore.getitem: MemoryStore.getItem property

Retrieves the value associated with the specified key from the memory store.

**Signature:**```typescript
readonly getItem: (key: string) => string | null;
```

---

## core.memorystore: MemoryStore class

Represents a memory store that stores key-value pairs.

**Signature:**```typescript
export declare class MemoryStore 
```## core.memorystore: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [getItem](#core-memorystore-getitem) | `readonly` | (key: string) =&gt; string \\| null | Retrieves the value associated with the specified key from the memory store. |
| [setItem](#core-memorystore-setitem) | `readonly` | (key: string, value: string) =&gt; void | Sets the value associated with the specified key in the memory store. |

---

## core.memorystore.setitem: MemoryStore.setItem property

Sets the value associated with the specified key in the memory store.

**Signature:**```typescript
readonly setItem: (key: string, value: string) => void;
```

---

## core.merge: merge() function

Merges a record of signals and literals into a single signal.

**Signature:**```typescript
merge: <T extends Record<string, Value<unknown>>>(options: T) => Signal<{ [K in keyof T]: ValueType<T[K]>; }>
```## core.merge: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| options | T | The record containing signals and literals. |


**Returns:**

[Signal](#core-signal)&lt;{ \[K in keyof T\]: [ValueType](#core-valuetype)&lt;T\[K\]&gt;; }&gt;

- The merged signal.

---

## core.mirroreasing: mirrorEasing() function

Mirrors an easing function: the first half uses `fn`, the second half plays it in reverse. Useful for creating symmetric in-out easings from a single ease-in.

**Signature:**```typescript
mirrorEasing: (fn: EasingFn) => EasingFn
```## core.mirroreasing: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | [EasingFn](#core-easingfn) | The easing function to mirror. |


**Returns:**

[EasingFn](#core-easingfn)

A new easing function.

---

## core.nil: Nil type

Represents a value that can be null or undefined.

**Signature:**```typescript
export type Nil = null | undefined;
```

---

## core.not: not() function

Creates a signal or value that is the boolean negation of the input. If the input is a Signal, returns a mapped Signal. If it is a literal, returns the negated value.

**Signature:**```typescript
export declare function not(arg: Value<boolean>): Value<boolean>;
```## core.not: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| arg | [Value](#core-value)&lt;boolean&gt; | A boolean value or signal. |


**Returns:**

[Value](#core-value)&lt;boolean&gt;

The negated value or signal.

---

## core.notnil: notNil() function

Creates a signal or value that is `true` when the input is not `null` or `undefined`. If the input is a Signal, returns a mapped Signal. If it is a literal, returns the boolean result.

**Signature:**```typescript
export declare function notNil<T>(arg: Value<T>): Value<boolean>;
```## core.notnil: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| arg | [Value](#core-value)&lt;T&gt; | A value or signal to check. |


**Returns:**

[Value](#core-value)&lt;boolean&gt;

A value or signal that emits `true` when the input is not nil.

---

## core.or: or() function

Creates a computed signal that emits true if any input signal is true.

**Signature:**```typescript
export declare function or(...args: Value<boolean>[]): Computed<boolean>;
```## core.or: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| args | [Value](#core-value)&lt;boolean&gt;\[\] | The input signals. |


**Returns:**

[Computed](#core-computed)&lt;boolean&gt;

- The computed signal.

---

## core.previoussignal: previousSignal() function

Creates a signal that emits the previous value of the input signal.

**Signature:**```typescript
previousSignal: <T>(signal: Signal<T>) => Signal<T | undefined>
```## core.previoussignal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| signal | [Signal](#core-signal)&lt;T&gt; | The input signal. |


**Returns:**

[Signal](#core-signal)&lt;T \| undefined&gt;

- The signal that emits the previous value of the input signal.

---

## core.primitive: Primitive type

Primitive types that can be rendered as text content. The rendering context coerces these to strings automatically.

**Signature:**```typescript
export type Primitive = string | number | boolean;
```

---

## core.prop.atprop: Prop.atProp() method

Returns a `Prop` that represents the value at the specified key of the current value.

**Signature:**```typescript
atProp<K extends keyof T>(key: K): Prop<T[K]>;
```## core.prop.atprop: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| key | K | The key of the value to access. |


**Returns:**

[Prop](#core-prop)&lt;T\[K\]&gt;

A `Prop` that represents the value at the specified key.

---

## core.prop.is: Prop.is property

Checks if a value is a Prop.

**Signature:**```typescript
static is: <T_1>(value: T_1 | Prop<T_1> | Signal<T_1> | Computed<T_1>) => value is Prop<T_1>;
```

---

## core.prop.iso: Prop.iso() method

Creates an isomorphism for the Signal. An isomorphism is a pair of functions that convert values between two types, along with an equality function to compare values of the second type.

**Signature:**```typescript
iso<O>(to: (value: T) => O, from: (value: O) => T, equals?: (a: O, b: O) => boolean): Prop<O>;
```## core.prop.iso: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| to | (value: T) =&gt; O | A function that converts values from type T to type O. |
| from | (value: O) =&gt; T | A function that converts values from type O to type T. |
| equals | (a: O, b: O) =&gt; boolean | _(Optional)_ An optional function that compares values of type O for equality. Defaults to a strict equality check (===). |


**Returns:**

[Prop](#core-prop)&lt;O&gt;

A Prop object representing the isomorphism.

---

## core.prop: prop() function

Creates a new Prop object with the specified value and equality function.

**Signature:**```typescript
prop: <T>(value: T, equals?: (a: T, b: T) => boolean) => Prop<T>
```## core.prop: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | T | The initial value of the Prop. |
| equals | (a: T, b: T) =&gt; boolean | _(Optional)_ The equality function used to compare values. Defaults to strict equality (===). |


**Returns:**

[Prop](#core-prop)&lt;T&gt;

A new Prop object.

---

## core.prop.reducer: Prop.reducer() method

Creates a reducer function that combines the provided reducer function and effects.

**Signature:**```typescript
reducer<A>(fn: (acc: T, value: A) => T, ...effects: ReducerEffect<T, A>[]): (action: A) => void;
```## core.prop.reducer: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (acc: T, value: A) =&gt; T | The reducer function that takes the current state and an action, and returns the new state. |
| effects | ReducerEffect&lt;T, A&gt;\[\] | An array of effects to be executed after the state is updated. |


**Returns:**

(action: A) =&gt; void

A dispatch function that can be used to update the state and trigger the effects.

---

## core.prop.set: Prop.set() method

Changes the value of the property and notifies its listeners.

**Signature:**```typescript
set(value: T): void;
```## core.prop.set: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | T | The new value of the property. |


**Returns:**

void

---

## core.prop.update: Prop.update() method

Updates the value of the signal by applying the provided function to the current value.

**Signature:**```typescript
update(fn: (value: T) => T): void;
```## core.prop.update: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (value: T) =&gt; T | The function to apply to the current value. |


**Returns:**

void

---

## core.prop.value: Prop.value property

Access for the current value of the property.

**Signature:**```typescript
get value(): T;

set value(value: T);
```

---

## core.prophistory_1: propHistory() function

Creates a history controller for a Signal with an external setter, enabling undo/redo navigation.

**Signature:**```typescript
export declare function propHistory<T>(signal: Signal<T>, set: (value: T) => void, options?: PropHistoryOptions<T>): PropHistory<T>;
```## core.prophistory_1: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| signal | [Signal](#core-signal)&lt;T&gt; | The Signal to track. |
| set | (value: T) =&gt; void | The setter function. |
| options | [PropHistoryOptions](#core-prophistoryoptions)&lt;T&gt; | _(Optional)_ Optional configuration. |


**Returns:**

[PropHistory](#core-prophistory)&lt;T&gt;

A PropHistory controller.

## core.prophistory_1: Example```typescript
const mySignal = signal(0)
const mySet = (v: number) => mySignal._setAndNotify(v)
const history = propHistory(mySignal, mySet)
history.set(5)
history.undo()  // calls mySet(0)
```

---

## core.prophistory: PropHistory type

A history controller that provides undo/redo navigation for a signal.

**Signature:**```typescript
export type PropHistory<T> = {
    readonly signal: Signal<T>;
    readonly set: (value: T) => void;
    readonly undo: () => void;
    readonly redo: () => void;
    readonly go: (index: number) => void;
    readonly canUndo: Signal<boolean>;
    readonly canRedo: Signal<boolean>;
    readonly entries: Signal<readonly T[]>;
    readonly index: Signal<number>;
    readonly clear: (resetValue?: T) => void;
    readonly pause: () => () => void;
    readonly transaction: (fn: () => void) => void;
    readonly dispose: () => void;
};
```
**References:** [Signal](#core-signal)

---

## core.prophistoryoptions: PropHistoryOptions type

Options for configuring a PropHistory controller.

**Signature:**```typescript
export type PropHistoryOptions<T> = {
    maxSize?: number;
    filter?: (value: T, previousValue: T) => boolean;
};
```

---

## core.providermark: ProviderMark type

Represents a provider mark for dependency injection.

Provider marks are unique symbols used to identify providers in a dependency injection system. The type parameter ensures type safety when retrieving providers.

**Signature:**```typescript
export type ProviderMark<T> = symbol & {
    readonly __type: T;
};
```

---

## core.removesignals: RemoveSignals type

Removes signals from a given object type and returns a new object type with only the non-signal properties.

**Signature:**```typescript
export type RemoveSignals<T extends Record<string | number | symbol, Value<unknown>>, K extends (string | number | symbol) & keyof T = keyof T> = {
    [k in K]: ValueType<T[k]>;
};
```
**References:** [ValueType](#core-valuetype)

---

## core.renderable: Renderable interface

A renderable object that can be rendered into a specific context.

Renderables are the fundamental building blocks of Tempo applications. They are objects with a `render()` method that receives a context and returns a cleanup function, and a `type` symbol for runtime type checking.

**Signature:**```typescript
export interface Renderable<CTX extends RenderContext, TType extends symbol = symbol> 
```

## core.renderable: Example


```typescript
// DOM renderable
const DOM_RENDERABLE_TYPE = Symbol('DOM_RENDERABLE')
type DOMRenderable = Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>

const myComponent: DOMRenderable = {
  type: DOM_RENDERABLE_TYPE,
  render: (ctx: DOMContext) => {
    const divCtx = ctx.makeChildElement('div', undefined)
    divCtx.makeChildText('Hello, World!')
    return (removeTree) => {
      divCtx.clear(removeTree)
    }
  }
}
```## core.renderable: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [type](#core-renderable-type) | `readonly` | TType | Symbol type for runtime type checking. This symbol is used to distinguish between renderables for different contexts at runtime. Each context defines its own unique symbol. |


## core.renderable: Methods


| Method | Description |
| --- | --- |
| [render(ctx)](#core-renderable-render) | Renders the content into the provided context. |

---

## core.renderable.render: Renderable.render() method

Renders the content into the provided context.

**Signature:**```typescript
render(ctx: CTX): Clear;
```## core.renderable.render: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| ctx | CTX | The context to render into |


**Returns:**

[Clear](#core-clear)

A cleanup function that removes the rendered content

---

## core.renderable.type: Renderable.type property

Symbol type for runtime type checking.

This symbol is used to distinguish between renderables for different contexts at runtime. Each context defines its own unique symbol.

**Signature:**```typescript
readonly type: TType;
```

---

## core.rendercontext.clear: RenderContext.clear() method

Clears the context and optionally removes the rendered tree.

**Signature:**```typescript
clear(removeTree: boolean): void;
```## core.rendercontext.clear: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| removeTree | boolean | Whether to remove the entire rendered tree |


**Returns:**

void

---

## core.rendercontext: RenderContext interface

Base interface for all rendering contexts.

A RenderContext provides the minimal interface needed for rendering content. Context-specific implementations (DOM, ThreeJS, Konva, etc.) extend this interface with their own methods.

**Signature:**```typescript
export interface RenderContext 
```## core.rendercontext: Methods


| Method | Description |
| --- | --- |
| [clear(removeTree)](#core-rendercontext-clear) | Clears the context and optionally removes the rendered tree. |

---

## core.reverseeasing: reverseEasing() function

Reverses an easing function: the result plays the easing curve backwards. `reverseEasing(easeIn)` produces an ease-out curve.

**Signature:**```typescript
reverseEasing: (fn: EasingFn) => EasingFn
```## core.reverseeasing: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | [EasingFn](#core-easingfn) | The easing function to reverse. |


**Returns:**

[EasingFn](#core-easingfn)

A new easing function.

---

## core.scope: Scope interface

Minimal interface for scope tracking. Both DisposalScope and lightweight inline scopes implement this. Only `track` and `onDispose` are needed by the signal system.

**Signature:**```typescript
export interface Scope 
```## core.scope: Methods


| Method | Description |
| --- | --- |
| [onDispose(callback)](#core-scope-ondispose) |  |
| [track(signal)](#core-scope-track) |  |

---

## core.scope.ondispose: Scope.onDispose() method

**Signature:**```typescript
onDispose(callback: () => void): void;
```## core.scope.ondispose: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| callback | () =&gt; void |  |


**Returns:**

void

---

## core.scope.track: Scope.track() method

**Signature:**```typescript
track(signal: AnySignal): void;
```## core.scope.track: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| signal | [AnySignal](#core-anysignal) |  |


**Returns:**

void

---

## core.scoped: scoped() function

Execute a function in a new scope and dispose the scope immediately after. Useful for one-off scoped operations.

**Signature:**```typescript
scoped: <T>(fn: (scope: DisposalScope) => T) => T
```## core.scoped: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (scope: [DisposalScope](#core-disposalscope)) =&gt; T | The function to execute, receives the scope as parameter |


**Returns:**

T

The result of the function

---

## core.sessionstorageprop: sessionStorageProp() function

Creates a prop that stores its value in the session storage.

**Signature:**```typescript
sessionStorageProp: <T>(options: StorageOptions<T>) => Prop<T>
```## core.sessionstorageprop: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| options | StorageOptions&lt;T&gt; | The options for the storage prop. |


**Returns:**

[Prop](#core-prop)&lt;T&gt;

A prop that stores its value in the session storage.

---

## core.signal._: Signal.$ property

Represents a collection of signals mapping to each key/field in the wrapped value.

**Signature:**```typescript
get $(): AtGetter<T>;
```

---

## core.signal._constructor_: Signal.(constructor)

Represents a signal with a value of type T.

**Signature:**```typescript
constructor(value: T, equals?: (a: T, b: T) => boolean);
```## core.signal._constructor_: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | T | The initial value of the signal. |
| equals | (a: T, b: T) =&gt; boolean | _(Optional)_ A function that determines whether two values of type T are equal. |

---

## core.signal.at: Signal.at() method

Returns a new Signal that emits the value at the specified key of the current value.

**Signature:**```typescript
at<K extends keyof T>(key: K): Signal<T[K]>;
```## core.signal.at: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| key | K | The key of the value to retrieve. |


**Returns:**

[Signal](#core-signal)&lt;T\[K\]&gt;

A new Signal that emits the value at the specified key.

---

## core.signal.count: Signal.count() method

Returns a signal that emits the count of values received so far.

**Signature:**```typescript
count(): Computed<number>;
```
**Returns:**

[Computed](#core-computed)&lt;number&gt;

A signal that emits the count of values received so far.

---

## core.signal.derive: Signal.derive() method

Derives a new signal from the current signal. Useful to create a new signal that emits the same values as the current signal but can be disposed independently.

**Signature:**```typescript
derive(): Computed<T>;
```
**Returns:**

[Computed](#core-computed)&lt;T&gt;

A new signal that emits the same values as the current signal.

---

## core.signal.deriveprop: Signal.deriveProp() method

Derives a new property from the current signal.

**Signature:**```typescript
deriveProp(input?: {
        autoDisposeProp?: boolean;
        equals?: (a: T, b: T) => boolean;
    }): Prop<T>;
```## core.signal.deriveprop: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| { autoDisposeProp, equals, } | (not declared) | _(Optional)_ |
| input | { autoDisposeProp?: boolean; equals?: (a: T, b: T) =&gt; boolean; } | _(Optional)_ |


**Returns:**

[Prop](#core-prop)&lt;T&gt;

The derived property.

---

## core.signal.dispose: Signal.dispose() method

Disposes the signal, releasing any resources associated with it. This clears all listeners, derivatives, and disposal callbacks.

**Signature:**```typescript
dispose(): void;
```
**Returns:**

void

---

## core.signal.feedprop: Signal.feedProp() method

Feeds a property into the signal and sets up disposal behavior.

**Signature:**```typescript
feedProp(prop: Prop<T>, autoDisposeProp?: boolean): Prop<T>;
```## core.signal.feedprop: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| prop | [Prop](#core-prop)&lt;T&gt; | The property to feed into the signal. |
| autoDisposeProp | boolean | _(Optional)_ Determines whether the property should be automatically disposed when the signal is disposed. |


**Returns:**

[Prop](#core-prop)&lt;T&gt;

The input property.

---

## core.signal.filter: Signal.filter() method

**Signature:**```typescript
filter(fn: (value: T) => boolean, startValue?: T): Computed<T>;
```## core.signal.filter: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (value: T) =&gt; boolean |  |
| startValue | T | _(Optional)_ |


**Returns:**

[Computed](#core-computed)&lt;T&gt;

---

## core.signal.filtermap: Signal.filterMap() method

Returns a new Computed object that applies the provided mapping function to the value of this Signal, and filters out values that are `undefined` or `null`.

**Signature:**```typescript
filterMap<O>(fn: (value: T) => O | undefined | null, startValue: O, equals?: (a: O, b: O) => boolean): Computed<O>;
```## core.signal.filtermap: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (value: T) =&gt; O \\| undefined \\| null | The mapping function to apply to the value of this Signal. |
| startValue | O | The initial value for the Computed object. |
| equals | (a: O, b: O) =&gt; boolean | _(Optional)_ Optional equality function to determine if two values are equal. |


**Returns:**

[Computed](#core-computed)&lt;O&gt;

- A new Computed object with the mapped and filtered values.

---

## core.signal.flatmap: Signal.flatMap() method

Returns a new Signal that applies the given function to the value of the current Signal, and then flattens the resulting Signal.

**Signature:**```typescript
flatMap<O>(fn: (value: T) => Signal<O>, equals?: (a: O, b: O) => boolean): Computed<O>;
```## core.signal.flatmap: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (value: T) =&gt; [Signal](#core-signal)&lt;O&gt; | The function to apply to the value of the current Signal. |
| equals | (a: O, b: O) =&gt; boolean | _(Optional)_ A function that determines whether two values of type O are equal. Defaults to a strict equality check (===). |


**Returns:**

[Computed](#core-computed)&lt;O&gt;

A new Signal that emits the values of the resulting Signal.

---

## core.signal.get: Signal.get() method

Gets the current value of the signal.

**Signature:**```typescript
get(): T;
```
**Returns:**

T

The current value of the signal.

---

## core.signal.haslisteners: Signal.hasListeners() method

Checks if the signal has any registered listeners.

**Signature:**```typescript
hasListeners(): boolean;
```
**Returns:**

boolean

`true` if the signal has listeners, `false` otherwise.

---

## core.signal.is: Signal.is property

Checks if a value is a Signal.

**Signature:**```typescript
static readonly is: <O>(value: O | Signal<O>) => value is Signal<O>;
```

---

## core.signal.isdisposed: Signal.isDisposed() method

Checks whether the signal is disposed.

**Signature:**```typescript
isDisposed(): boolean;
```
**Returns:**

boolean

True if the signal is disposed, false otherwise.

---

## core.signal.map: Signal.map() method

Creates a new computed signal by applying a transformation function to this signal's value.

The `map` method is one of the most commonly used signal operations. It creates a new computed signal that automatically updates whenever the source signal changes. The transformation function is called with the current value and should return the new value.

**Signature:**```typescript
map<O>(fn: (value: T) => O, equals?: (a: O, b: O) => boolean): Computed<O>;
```## core.signal.map: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (value: T) =&gt; O | Function that transforms the signal's value to a new value |
| equals | (a: O, b: O) =&gt; boolean | _(Optional)_ Optional function to determine if two transformed values are equal (defaults to strict equality) |


**Returns:**

[Computed](#core-computed)&lt;O&gt;

A new computed signal with the transformed value (auto-registered with current scope)

## core.signal.map: Example 1```typescript
const count = prop(5)

// Transform to different types
const doubled = count.map(n => n * 2)
const message = count.map(n => `Count is ${n}`)
const isEven = count.map(n => n % 2 === 0)

// Use in UI
html.div(
  html.div('Original: ', count.map(String)),
  html.div('Doubled: ', doubled.map(String)),
  html.div('Message: ', message),
  html.div('Is even: ', isEven.map(String))
)
```

## core.signal.map: Example 2


```typescript
// Chain multiple transformations
const user = prop({ name: 'John', age: 30 })
const greeting = user
  .map(u => u.name)
  .map(name => name.toUpperCase())
  .map(name => `Hello, ${name}!`)
```

## core.signal.map: Example 3


```typescript
// With custom equality function for objects
const items = prop([{ id: 1, name: 'Item 1' }])
const itemNames = items.map(
  items => items.map(item => item.name),
  (a, b) => JSON.stringify(a) === JSON.stringify(b) // deep equality
)
```
\*\*Auto-Disposal:\*\* The returned computed signal is automatically registered with the current disposal scope (if one exists). When used within a renderable or `WithScope()`, the signal will be automatically disposed when the component unmounts. No manual `OnDispose()` needed!

```typescript
const MyComponent: Renderable = (ctx) => {
  const count = prop(0);
  const doubled = count.map(x => x * 2);  // ✅ Auto-disposed
  return html.div(doubled);
};
```

---

## core.signal.mapasync: Signal.mapAsync() method

Maps the values emitted by the signal to a new value asynchronously using the provided function. If the function throws an error, it will be caught and logged. If a recovery function is provided, it will be called with the error and its return value will be used as the mapped value. If no recovery function is provided, the error will be logged as an unhandled promise rejection.

**Signature:**```typescript
mapAsync<O>(fn: (value: T, options: {
        abortSignal: AbortSignal;
    }) => Promise<O>, alt: O, recover?: (error: unknown) => O, equals?: (a: O, b: O) => boolean): Prop<O>;
```## core.signal.mapasync: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (value: T, options: { abortSignal: AbortSignal; }) =&gt; Promise&lt;O&gt; | The function to map the values emitted by the signal. The second argument to this function allows to cancel the previously running mapping function if it has not completed by the time a new value is emitted. |
| alt | O | The alternate value to use if the signal is disposed or the mapping function throws an error. |
| recover | (error: unknown) =&gt; O | _(Optional)_ The recovery function to handle errors thrown by the mapping function. |
| equals | (a: O, b: O) =&gt; boolean | _(Optional)_ The equality function to compare the mapped values for equality. |


**Returns:**

[Prop](#core-prop)&lt;O&gt;

A property that holds the mapped value and can be observed for changes.

---

## core.signal.mapasyncgenerator: Signal.mapAsyncGenerator() method

Maps the values emitted by the signal to multiple values over time using an async generator. Each time the source signal changes, a new async generator is created and iterated. Previous generators are aborted when a new value arrives.

This is useful for streaming data, such as: - AI/LLM streaming responses - Server-Sent Events (SSE) - Paginated data loading - WebSocket message streams

**Signature:**```typescript
mapAsyncGenerator<O>(fn: (value: T, options: {
        abortSignal: AbortSignal;
    }) => AsyncGenerator<O, void, unknown>, alt: O, recover?: (error: unknown) => O, equals?: (a: O, b: O) => boolean): Prop<O>;
```## core.signal.mapasyncgenerator: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (value: T, options: { abortSignal: AbortSignal; }) =&gt; AsyncGenerator&lt;O, void, unknown&gt; | The async generator function that yields values over time. The second argument provides an AbortSignal to cancel the generator when a new value arrives. |
| alt | O | The initial value to use before the first yield. |
| recover | (error: unknown) =&gt; O | _(Optional)_ Optional function to handle errors thrown by the generator. |
| equals | (a: O, b: O) =&gt; boolean | _(Optional)_ Optional equality function to compare yielded values. |


**Returns:**

[Prop](#core-prop)&lt;O&gt;

A property that updates each time the generator yields a value.

## core.signal.mapasyncgenerator: Example```typescript
const query = prop('hello')

// Stream AI response tokens
const streamingResponse = query.mapAsyncGenerator(
  async function* (q, { abortSignal }) {
    const response = await fetch('/api/stream?q=' + q, { signal: abortSignal })
    const reader = response.body!.getReader()
    let accumulated = ''

    while (true) {
      const { done, value } = await reader.read()
      if (done) break
      accumulated += new TextDecoder().decode(value)
      yield accumulated  // Update signal with each chunk
    }
  },
  '',  // alt: empty string while loading
  (err) => 'Error: ' + err  // recover
)
```

---

## core.signal.mapmaybe: Signal.mapMaybe() method

Maps the values of the signal using the provided function `fn`, and returns a new signal containing the mapped values. If the mapped value is `undefined` or `null`, it is replaced with the provided `alt` value.

**Signature:**```typescript
mapMaybe<O>(fn: (value: T) => O | undefined | null, alt: O): Computed<O>;
```## core.signal.mapmaybe: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (value: T) =&gt; O \\| undefined \\| null | The function used to map the values of the signal. |
| alt | O | The alternative value to use when the mapped value is `undefined` or `null`. |


**Returns:**

[Computed](#core-computed)&lt;O&gt;

A new signal containing the mapped values.

---

## core.signal: signal() function

Creates a signal with the specified initial value and equality function.

**Signature:**```typescript
signal: <T>(value: T, equals?: (a: T, b: T) => boolean) => Signal<T>
```## core.signal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | T | The initial value of the signal. |
| equals | (a: T, b: T) =&gt; boolean | _(Optional)_ The equality function used to compare signal values. Defaults to a strict equality check (`===`). |


**Returns:**

[Signal](#core-signal)&lt;T&gt;

A new Signal instance.

---

## core.signal.ofpromise: Signal.ofPromise property

Creates a Signal that holds the result of a Promise, with proper error handling.

This static method creates a signal that starts with an initial value and updates when the promise resolves. If the promise rejects, an optional recovery function can provide a fallback value.

**Signature:**```typescript
static readonly ofPromise: <O>(promise: Promise<O>, init: O, recover?: (error: unknown) => O, equals?: (a: O, b: O) => boolean) => Signal<O>;
```

## core.signal.ofpromise: Example 1


```typescript
// Basic usage with API call
const userData = Signal.ofPromise(
  fetch('/api/user').then(r => r.json()),
  { loading: true }, // initial state
  error => ({ error: error.message, loading: false }) // error recovery
)

// Use in UI
Ensure(userData,
  (user) => html.div('Welcome, ', user.map(u => u.name)),
  () => html.div('Loading...')
)
```

## core.signal.ofpromise: Example 2


```typescript
// With custom equality function
const config = Signal.ofPromise(
  loadConfig(),
  {},
  () => ({}),
  (a, b) => JSON.stringify(a) === JSON.stringify(b) // deep equality
)
```

---

## core.signal.on: Signal.on() method

Registers a listener function to be called whenever the value of the signal changes. The listener function will be immediately called with the current value of the signal. Returns a function that can be called to unregister the listener.

When called within a DisposalScope (e.g., inside a renderable), the listener is automatically cleaned up when the scope is disposed. This prevents memory leaks when listening to outer-scope signals from inner scopes.

**Signature:**```typescript
on(listener: (value: T, previousValue: T | undefined) => void, options?: ListenerOptions): () => void;
```## core.signal.on: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| listener | (value: T, previousValue: T \\| undefined) =&gt; void | The listener function to be called when the value of the signal changes. |
| options | [ListenerOptions](#core-listeneroptions) | _(Optional)_ Options for the listener. |


**Returns:**

() =&gt; void

## core.signal.on: Example```typescript
// Automatic cleanup when scope disposes
const MyComponent = () => {
  const outerSignal = prop(0)

  return html.div(
    When(someCondition, () => {
      // This listener is automatically cleaned up when the When() disposes
      outerSignal.on(value => console.log(value))
      return html.span('Inner content')
    })
  )
}
```

---

## core.signal.onchange: Signal.onChange() method

Registers a listener function to be called whenever the value of the signal changes. The listener function will not be called with the current value of the signal. Returns a function that can be called to unregister the listener.

**Signature:**```typescript
onChange(listener: (value: T, previousValue: T) => void, options?: ListenerOptions): () => void;
```## core.signal.onchange: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| listener | (value: T, previousValue: T) =&gt; void | The listener function to be called when the value of the signal changes. |
| options | [ListenerOptions](#core-listeneroptions) | _(Optional)_ Options for the listener. |


**Returns:**

() =&gt; void

---

## core.signal.ondispose: Signal.onDispose() method

Adds a listener function to be called when the object is disposed.

**Signature:**```typescript
onDispose(listener: () => void): void;
```## core.signal.ondispose: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| listener | () =&gt; void | The listener function to be called when the object is disposed. |


**Returns:**

void

A function that can be called to remove the listener.

---

## core.signal.setderivative: Signal.setDerivative() method

Adds a computed value as a derivative of the signal. Uses structural parent↔child references instead of closure-based disposal wiring. Parent.dispose() directly disposes derivatives; Computed.dispose() removes itself from parents.

**Signature:**```typescript
setDerivative<O>(computed: Computed<O>): void;
```## core.signal.setderivative: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| computed | [Computed](#core-computed)&lt;O&gt; | The computed value to add as a derivative. |


**Returns:**

void

---

## core.signal.tap: Signal.tap() method

Invokes a callback function with the current value of the signal, without modifying the signal.

**Signature:**```typescript
tap(fn: (value: T) => void): Computed<T>;
```## core.signal.tap: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (value: T) =&gt; void | The callback function to be invoked with the current value of the signal. |


**Returns:**

[Computed](#core-computed)&lt;T&gt;

A new signal that emits the same value as the original signal and invokes the callback function.

---

## core.signal.value: Signal.value property

Gets the value of the signal.

**Signature:**```typescript
get value(): T;
```

---

## core.slidingwindowsignal: slidingWindowSignal() function

Creates a signal that emits a sliding window of values from the input signal.

**Signature:**```typescript
slidingWindowSignal: <T>(input: {
    size: number | undefined;
    signal: Signal<T>;
}) => Computed<T[]>
```## core.slidingwindowsignal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| { size, signal, } | (not declared) |  |
| input | { size: number \\| undefined; signal: [Signal](#core-signal)&lt;T&gt;; } |  |


**Returns:**

[Computed](#core-computed)&lt;T\[\]&gt;

- The signal that emits the sliding window of values.

---

## core.storedprop: storedProp() function

Creates a stored property that persists its value in a storage mechanism.

**Signature:**```typescript
storedProp: <T>(input: StoredPropOptions<T>) => Prop<T>
```## core.storedprop: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| { key, defaultValue, store, serialize, deserialize, equals, onLoad, syncTabs, onKeyChange, } | (not declared) |  |
| input | [StoredPropOptions](#core-storedpropoptions)&lt;T&gt; |  |


**Returns:**

[Prop](#core-prop)&lt;T&gt;

- The created stored property.

---

## core.storedpropoptions: StoredPropOptions type

Represents the properties required for storing and retrieving a value of type `T`.

**Signature:**```typescript
export type StoredPropOptions<T> = {
    key: Value<string>;
    defaultValue: T | (() => T);
    store: {
        getItem: (key: string) => string | null;
        setItem: (key: string, value: string) => void;
    };
    serialize?: (v: T) => string;
    deserialize?: (v: string) => T;
    equals?: (a: T, b: T) => boolean;
    onLoad?: (value: T) => T;
    syncTabs?: boolean;
    onKeyChange?: 'load' | 'migrate' | 'keep';
};
```
**References:** [Value](#core-value)

---

## core.strictequals: strictEquals() function

Singleton strict equality function. Used as default `equals` for all signals to avoid allocating a new arrow function per signal instance.

**Signature:**```typescript
strictEquals: <T>(a: T, b: T) => boolean
```## core.strictequals: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | T |  |
| b | T |  |


**Returns:**

boolean

---

## core.syncprop: syncProp() function

Synchronizes a prop across browser tabs using BroadcastChannel. When the prop value changes in one tab, all other tabs with the same channel will be updated.

**Signature:**```typescript
syncProp: <T>(propToSync: Prop<T>, input: SyncPropOptions<T>) => (() => void)
```## core.syncprop: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| propToSync | [Prop](#core-prop)&lt;T&gt; | The prop to synchronize across tabs. |
| { channel: channelName, serialize, deserialize, equals, } | (not declared) |  |
| input | [SyncPropOptions](#core-syncpropoptions)&lt;T&gt; |  |


**Returns:**

(() =&gt; void)

A disposal function to stop synchronization.

## core.syncprop: Example```ts
const counter = prop(0)
const dispose = syncProp(counter, { channel: 'my-counter' })
// Now when counter changes in this tab, it will update in all other tabs
// and vice versa
```

---

## core.syncpropoptions: SyncPropOptions type

Options for synchronizing a prop across browser tabs.

**Signature:**```typescript
export type SyncPropOptions<T> = {
    channel: string;
    serialize?: (v: T) => string;
    deserialize?: (v: string) => T;
    equals?: (a: T, b: T) => boolean;
};
```

---

## core.throttlesignal: throttleSignal() function

Creates a signal that throttles the input signal, emitting at most once per interval. The first change is emitted immediately, then subsequent changes within the interval are batched — the most recent value is emitted when the interval expires.

**Signature:**```typescript
throttleSignal: <T>(signal: Signal<T>, ms: number) => Signal<T>
```## core.throttlesignal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| signal | [Signal](#core-signal)&lt;T&gt; | The input signal to throttle. |
| ms | number | The minimum interval between emissions in milliseconds. |


**Returns:**

[Signal](#core-signal)&lt;T&gt;

A new signal that emits throttled values.

---

## core.tnode: TNode type

**Signature:**```typescript
export type TNode<CTX extends RenderContext, TType extends symbol> = Renderable<CTX, TType> | Value<string> | Value<number> | Value<boolean> | Signal<string | Nil> | Signal<number | Nil> | Signal<boolean | Nil> | undefined | null | Renderable<CTX, TType>[];
```
**References:** [RenderContext](#core-rendercontext), [Renderable](#core-renderable), [Signal](#core-signal), [Nil](#core-nil)

---

## core.untracked: untracked() function

Execute a function without any scope tracking. Signals created inside will NOT be automatically tracked.

**Signature:**```typescript
untracked: <T>(fn: () => T) => T
```## core.untracked: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | () =&gt; T | The function to execute |


**Returns:**

T

The result of the function

---

## core.value: Value variable

**Signature:**```typescript
Value: {
    map: <T, U>(value: Value<T>, fn: (value: T) => U) => Value<U>;
    toSignal: <T>(value: Value<T>, equals?: (a: T, b: T) => boolean) => Signal<T>;
    maybeToSignal: <T>(value: Value<T> | undefined | null, equals?: (a: T, b: T) => boolean) => Signal<T> | undefined;
    get: <T>(value: Value<T>) => T;
    on: <T>(value: Value<T>, listener: (value: T) => void) => (() => void);
    dispose: <T>(value: Value<T>) => void;
    disposeFn: <T>(value: Value<T>) => () => void;
    deriveProp: <T>(value: Value<T>, { autoDisposeProp, equals, }?: {
        autoDisposeProp?: boolean;
        equals?: (a: T, b: T) => boolean;
    }) => Prop<T>;
    truthy: <T>(value: Value<T>) => Value<boolean>;
    falsy: <T>(value: Value<T>) => Value<boolean>;
    nil: <T>(value: Value<T>) => Value<boolean>;
    defined: <T>(value: Value<T>) => Value<boolean>;
}
```

---

## core.values: Values type

Wraps all non-`Value` types in the array in `Value`.

**Signature:**```typescript
export type Values<T extends unknown[]> = {
    [K in keyof T]: T[K] extends Signal<unknown> | Computed<unknown> | Prop<unknown> ? T[K] : Value<T[K]>;
};
```
**References:** [Signal](#core-signal), [Computed](#core-computed), [Prop](#core-prop)

---

## core.valuetype: ValueType type

Gets the value type of a given Value type. If the type is a `Signal`, it returns the inferred value type. Otherwise, it returns the type itself.

**Signature:**```typescript
export type ValueType<T> = T extends Computed<infer V> ? V : T extends Prop<infer V> ? V : T extends Signal<infer V> ? V : T;
```
**References:** [Computed](#core-computed), [Prop](#core-prop), [Signal](#core-signal)

---

## core.valuetypes: ValueTypes type

Gets the value types of a given array of Value types.

**Signature:**```typescript
export type ValueTypes<T extends Value<unknown>[]> = {
    [K in keyof T]: ValueType<T[K]>;
};
```
**References:** [ValueType](#core-valuetype)

---

## core.withscope: withScope() function

Execute a function within a scope context. The scope is pushed before the function executes and popped after. The scope is NOT disposed - the caller is responsible for disposal.

**Signature:**```typescript
withScope: <T>(scope: Scope, fn: () => T) => T
```## core.withscope: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| scope | [Scope](#core-scope) | The scope to use |
| fn | () =&gt; T | The function to execute |


**Returns:**

T

The result of the function

---

# tempots-dom api index

[Home](#tempots-ui-api-index)

## tempots-dom: API Reference

## tempots-dom: Packages


| Package | Description |
| --- | --- |
| [@tempots/dom](#dom) |  |

---

## dom._isfragment: \_isFragment() function

**Signature:**```typescript
_isFragment: (node: Node) => node is DocumentFragment
```## dom._isfragment: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| node | Node |  |


**Returns:**

node is DocumentFragment

---

## dom.aria: aria variable

An object that provides a convenient way to create mountable attributes for ARIA properties.

The type of the value is inferred from the attribute name.

**Signature:**```typescript
aria: {
    activedescendant: (value: SplitNValue<string>) => Renderable;
    atomic: (value: SplitNValue<boolean>) => Renderable;
    autocomplete: (value: SplitNValue<"none" | "inline" | "list" | "both">) => Renderable;
    braillelabel: (value: SplitNValue<string>) => Renderable;
    brailleroledescription: (value: SplitNValue<string>) => Renderable;
    busy: (value: SplitNValue<boolean>) => Renderable;
    checked: (value: SplitNValue<boolean | "mixed">) => Renderable;
    colcount: (value: SplitNValue<number>) => Renderable;
    colindex: (value: SplitNValue<number>) => Renderable;
    colindextext: (value: SplitNValue<string>) => Renderable;
    colspan: (value: SplitNValue<number>) => Renderable;
    controls: (value: SplitNValue<string>) => Renderable;
    current: (value: SplitNValue<string>) => Renderable;
    describedby: (value: SplitNValue<string>) => Renderable;
    description: (value: SplitNValue<string>) => Renderable;
    details: (value: SplitNValue<string>) => Renderable;
    disabled: (value: SplitNValue<boolean>) => Renderable;
    dropeffect: (value: SplitNValue<"none" | "copy" | "execute" | "link" | "move" | "popup">) => Renderable;
    errormessage: (value: SplitNValue<string>) => Renderable;
    expanded: (value: SplitNValue<boolean | "undefined">) => Renderable;
    flowto: (value: SplitNValue<string>) => Renderable;
    grabbed: (value: SplitNValue<boolean>) => Renderable;
    haspopup: (value: SplitNValue<boolean | "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog">) => Renderable;
    hidden: (value: SplitNValue<boolean | "undefined">) => Renderable;
    invalid: (value: SplitNValue<boolean | "true" | "false" | "grammar" | "spelling">) => Renderable;
    keyshortcuts: (value: SplitNValue<string>) => Renderable;
    label: (value: SplitNValue<string>) => Renderable;
    labelledby: (value: SplitNValue<string>) => Renderable;
    level: (value: SplitNValue<number>) => Renderable;
    live: (value: SplitNValue<"off" | "assertive" | "polite">) => Renderable;
    modal: (value: SplitNValue<boolean>) => Renderable;
    multiline: (value: SplitNValue<boolean>) => Renderable;
    multiselectable: (value: SplitNValue<boolean>) => Renderable;
    orientation: (value: SplitNValue<"undefined" | "horizontal" | "vertical">) => Renderable;
    owns: (value: SplitNValue<string>) => Renderable;
    placeholder: (value: SplitNValue<string>) => Renderable;
    posinset: (value: SplitNValue<number>) => Renderable;
    pressed: (value: SplitNValue<boolean | "undefined" | "mixed">) => Renderable;
    readonly: (value: SplitNValue<boolean>) => Renderable;
    relevant: (value: SplitNValue<string>) => Renderable;
    required: (value: SplitNValue<boolean>) => Renderable;
    roledescription: (value: SplitNValue<string>) => Renderable;
    rowcount: (value: SplitNValue<number>) => Renderable;
    rowindex: (value: SplitNValue<number>) => Renderable;
    rowindextext: (value: SplitNValue<string>) => Renderable;
    rowspan: (value: SplitNValue<number>) => Renderable;
    selected: (value: SplitNValue<boolean | "undefined">) => Renderable;
    setsize: (value: SplitNValue<number>) => Renderable;
    sort: (value: SplitNValue<"none" | "ascending" | "descending" | "other">) => Renderable;
    valuemax: (value: SplitNValue<number>) => Renderable;
    valuemin: (value: SplitNValue<number>) => Renderable;
    valuenow: (value: SplitNValue<number>) => Renderable;
    valuetext: (value: SplitNValue<string>) => Renderable;
}
```

## dom.aria: Example


```ts
const button = html.button(
  aria.label('Click me!'), // maps to the `aria-label` attribute
  // maps to the `aria-pressed` attribute where pressed is a `Signal<boolean>`
  aria.pressed(pressed)
)
```

---

## dom.ariaattributes: AriaAttributes type

Represents a collection of ARIA attributes and their corresponding types.

**Signature:**```typescript
export type AriaAttributes = {
    activedescendant: string;
    atomic: boolean;
    autocomplete: 'none' | 'inline' | 'list' | 'both';
    braillelabel: string;
    brailleroledescription: string;
    busy: boolean;
    checked: boolean | 'mixed';
    colcount: number;
    colindex: number;
    colindextext: string;
    colspan: number;
    controls: string;
    current: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | string;
    describedby: string;
    description: string;
    details: string;
    disabled: boolean;
    dropeffect: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup';
    errormessage: string;
    expanded: boolean | 'undefined';
    flowto: string;
    grabbed: boolean;
    haspopup: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
    hidden: boolean | 'undefined';
    invalid: boolean | 'false' | 'true' | 'grammar' | 'spelling';
    keyshortcuts: string;
    label: string;
    labelledby: string;
    level: number;
    live: 'off' | 'assertive' | 'polite';
    modal: boolean;
    multiline: boolean;
    multiselectable: boolean;
    orientation: 'horizontal' | 'vertical' | 'undefined';
    owns: string;
    placeholder: string;
    posinset: number;
    pressed: boolean | 'mixed' | 'undefined';
    readonly: boolean;
    relevant: 'additions' | 'removals' | 'text' | 'all' | string;
    required: boolean;
    roledescription: string;
    rowcount: number;
    rowindex: number;
    rowindextext: string;
    rowspan: number;
    selected: boolean | 'undefined';
    setsize: number;
    sort: 'none' | 'ascending' | 'descending' | 'other';
    valuemax: number;
    valuemin: number;
    valuenow: number;
    valuetext: string;
};
```

---

## dom.async: Async() function

**Signature:**```typescript
Async: <T>(promise: Promise<T>, options: import('@tempots/render').AsyncOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE> | ((value: T) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>)) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.async: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| promise | Promise&lt;T&gt; |  |
| options | import('@tempots/render').AsyncOptions&lt;T, [DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; \\| ((value: T) =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;) |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.attr_2: Attr\_2() function

Creates a renderable for an HTML attribute with the specified name and value.

This is the functional equivalent of using `attr[name](value)` with a dynamic attribute name.

The `class` attribute is special and can be used multiple times on the same element. Multiple class values will be merged together.

**Signature:**```typescript
Attr: (name: string, value: unknown) => Renderable
```## dom.attr_2: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| name | string | The name of the attribute. |
| value | unknown | The value of the attribute (can be a literal or Signal). |


**Returns:**

[Renderable](#dom-renderable)

A renderable that sets the attribute.

## dom.attr_2: Example```ts
const button = html.button(
  Attr('type', 'button'),
  Attr('disabled', disabledSignal),
  // Multiple class attributes
  Attr('class', 'btn btn-primary'),
  Attr('class', 'active'),  // Both classes will be applied
  // ...
)
```

---

## dom.attr: attr variable

The `attr` object allows to create any HTML attribute. Either a literal value or `Signal` can be passed as a value. The type of the value is inferred from the attribute name.

**Signature:**```typescript
attr: {
    accept: (value: SplitNValue<string>) => Renderable;
    'accept-charset': (value: SplitNValue<string>) => Renderable;
    accesskey: (value: SplitNValue<string>) => Renderable;
    action: (value: SplitNValue<string>) => Renderable;
    align: (value: SplitNValue<string>) => Renderable;
    allow: (value: SplitNValue<string>) => Renderable;
    allowfullscreen: (value: SplitNValue<boolean>) => Renderable;
    allowpaymentrequest: (value: SplitNValue<boolean>) => Renderable;
    alt: (value: SplitNValue<string>) => Renderable;
    as: (value: SplitNValue<string>) => Renderable;
    async: (value: SplitNValue<boolean>) => Renderable;
    autocapitalize: (value: SplitNValue<"none" | "off" | "on" | "sentences" | "words" | "characters">) => Renderable;
    autocomplete: (value: SplitNValue<string>) => Renderable;
    autofocus: (value: SplitNValue<boolean>) => Renderable;
    autoplay: (value: SplitNValue<boolean>) => Renderable;
    bgcolor: (value: SplitNValue<string>) => Renderable;
    border: (value: SplitNValue<string>) => Renderable;
    capture: (value: SplitNValue<boolean | "user" | "environment">) => Renderable;
    charset: (value: SplitNValue<string>) => Renderable;
    checked: (value: SplitNValue<boolean>) => Renderable;
    cite: (value: SplitNValue<string>) => Renderable;
    class: (value: SplitNValue<string>) => Renderable;
    color: (value: SplitNValue<string>) => Renderable;
    cols: (value: SplitNValue<number>) => Renderable;
    colspan: (value: SplitNValue<number>) => Renderable;
    content: (value: SplitNValue<string>) => Renderable;
    contenteditable: (value: SplitNValue<boolean | "true" | "false" | "plaintext-only">) => Renderable;
    controls: (value: SplitNValue<string>) => Renderable;
    coords: (value: SplitNValue<string>) => Renderable;
    crossorigin: (value: SplitNValue<"" | "anonymous" | "use-credentials">) => Renderable;
    data: (value: SplitNValue<string>) => Renderable;
    datetime: (value: SplitNValue<string>) => Renderable;
    decoding: (value: SplitNValue<"sync" | "async" | "auto">) => Renderable;
    default: (value: SplitNValue<string>) => Renderable;
    defer: (value: SplitNValue<string>) => Renderable;
    dir: (value: SplitNValue<"auto" | "ltr" | "rtl">) => Renderable;
    dirname: (value: SplitNValue<string>) => Renderable;
    disabled: (value: SplitNValue<boolean>) => Renderable;
    download: (value: SplitNValue<string>) => Renderable;
    draggable: (value: SplitNValue<boolean | "true" | "false">) => Renderable;
    dropzone: (value: SplitNValue<string>) => Renderable;
    enctype: (value: SplitNValue<string>) => Renderable;
    enterkeyhint: (value: SplitNValue<"enter" | "done" | "go" | "next" | "previous" | "search" | "send">) => Renderable;
    for: (value: SplitNValue<string>) => Renderable;
    form: (value: SplitNValue<string>) => Renderable;
    formaction: (value: SplitNValue<string>) => Renderable;
    formenctype: (value: SplitNValue<string>) => Renderable;
    formmethod: (value: SplitNValue<string>) => Renderable;
    formnovalidate: (value: SplitNValue<boolean>) => Renderable;
    formtarget: (value: SplitNValue<string>) => Renderable;
    headers: (value: SplitNValue<string>) => Renderable;
    height: (value: SplitNValue<string>) => Renderable;
    hidden: (value: SplitNValue<boolean | "" | "until-found" | "hidden">) => Renderable;
    high: (value: SplitNValue<string>) => Renderable;
    href: (value: SplitNValue<string>) => Renderable;
    hreflang: (value: SplitNValue<string>) => Renderable;
    'http-equiv': (value: SplitNValue<string>) => Renderable;
    icon: (value: SplitNValue<string>) => Renderable;
    id: (value: SplitNValue<string>) => Renderable;
    imagesizes: (value: SplitNValue<string>) => Renderable;
    imagesrcset: (value: SplitNValue<string>) => Renderable;
    inputmode: (value: SplitNValue<"none" | "text" | "search" | "decimal" | "numeric" | "tel" | "email" | "url">) => Renderable;
    integrity: (value: SplitNValue<string>) => Renderable;
    is: (value: SplitNValue<string>) => Renderable;
    ismap: (value: SplitNValue<string>) => Renderable;
    itemid: (value: SplitNValue<string>) => Renderable;
    itemprop: (value: SplitNValue<string>) => Renderable;
    itemref: (value: SplitNValue<string>) => Renderable;
    itemscope: (value: SplitNValue<boolean>) => Renderable;
    itemtype: (value: SplitNValue<string>) => Renderable;
    keytype: (value: SplitNValue<string>) => Renderable;
    kind: (value: SplitNValue<string>) => Renderable;
    label: (value: SplitNValue<string>) => Renderable;
    lang: (value: SplitNValue<string>) => Renderable;
    language: (value: SplitNValue<string>) => Renderable;
    list: (value: SplitNValue<string>) => Renderable;
    loading: (value: SplitNValue<"eager" | "lazy">) => Renderable;
    loop: (value: SplitNValue<string>) => Renderable;
    low: (value: SplitNValue<string>) => Renderable;
    manifest: (value: SplitNValue<string>) => Renderable;
    max: (value: SplitNValue<number>) => Renderable;
    maxlength: (value: SplitNValue<number>) => Renderable;
    media: (value: SplitNValue<string>) => Renderable;
    method: (value: SplitNValue<string>) => Renderable;
    min: (value: SplitNValue<number>) => Renderable;
    minlength: (value: SplitNValue<number>) => Renderable;
    multiple: (value: SplitNValue<boolean>) => Renderable;
    muted: (value: SplitNValue<boolean>) => Renderable;
    name: (value: SplitNValue<string>) => Renderable;
    nonce: (value: SplitNValue<string>) => Renderable;
    novalidate: (value: SplitNValue<string>) => Renderable;
    open: (value: SplitNValue<string>) => Renderable;
    optimum: (value: SplitNValue<string>) => Renderable;
    part: (value: SplitNValue<string>) => Renderable;
    pattern: (value: SplitNValue<string>) => Renderable;
    ping: (value: SplitNValue<string>) => Renderable;
    placeholder: (value: SplitNValue<string>) => Renderable;
    playsinline: (value: SplitNValue<boolean>) => Renderable;
    popover: (value: SplitNValue<"" | "auto" | "manual">) => Renderable;
    popovertarget: (value: SplitNValue<string>) => Renderable;
    popovertargetaction: (value: SplitNValue<"hide" | "show" | "toggle">) => Renderable;
    poster: (value: SplitNValue<string>) => Renderable;
    preload: (value: SplitNValue<string>) => Renderable;
    property: (value: SplitNValue<string>) => Renderable;
    radiogroup: (value: SplitNValue<string>) => Renderable;
    readonly: (value: SplitNValue<boolean>) => Renderable;
    referrerpolicy: (value: SplitNValue<"no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url">) => Renderable;
    rel: (value: SplitNValue<string>) => Renderable;
    required: (value: SplitNValue<string>) => Renderable;
    reversed: (value: SplitNValue<string>) => Renderable;
    role: (value: SplitNValue<string>) => Renderable;
    rows: (value: SplitNValue<number>) => Renderable;
    rowspan: (value: SplitNValue<number>) => Renderable;
    sandbox: (value: SplitNValue<string>) => Renderable;
    scope: (value: SplitNValue<string>) => Renderable;
    scoped: (value: SplitNValue<string>) => Renderable;
    seamless: (value: SplitNValue<string>) => Renderable;
    selected: (value: SplitNValue<boolean>) => Renderable;
    shape: (value: SplitNValue<string>) => Renderable;
    size: (value: SplitNValue<number>) => Renderable;
    sizes: (value: SplitNValue<string>) => Renderable;
    slot: (value: SplitNValue<string>) => Renderable;
    span: (value: SplitNValue<string>) => Renderable;
    spellcheck: (value: SplitNValue<boolean | "true" | "false">) => Renderable;
    src: (value: SplitNValue<string>) => Renderable;
    srcdoc: (value: SplitNValue<string>) => Renderable;
    srclang: (value: SplitNValue<string>) => Renderable;
    srcset: (value: SplitNValue<string>) => Renderable;
    start: (value: SplitNValue<string>) => Renderable;
    step: (value: SplitNValue<number>) => Renderable;
    style: (value: SplitNValue<string>) => Renderable;
    tabindex: (value: SplitNValue<number>) => Renderable;
    target: (value: SplitNValue<string>) => Renderable;
    title: (value: SplitNValue<string>) => Renderable;
    translate: (value: SplitNValue<"yes" | "no">) => Renderable;
    type: (value: SplitNValue<string>) => Renderable;
    usemap: (value: SplitNValue<string>) => Renderable;
    value: (value: SplitNValue<string>) => Renderable;
    valueAsNumber: (value: SplitNValue<number>) => Renderable;
    valueAsDate: (value: SplitNValue<Date>) => Renderable;
    width: (value: SplitNValue<string>) => Renderable;
    wrap: (value: SplitNValue<string>) => Renderable;
    textContent: (value: SplitNValue<string>) => Renderable;
    innerText: (value: SplitNValue<string>) => Renderable;
    innerHTML: (value: SplitNValue<string>) => Renderable;
    outerHTML: (value: SplitNValue<string>) => Renderable;
}
```

## dom.attr: Example


```ts
const button = html.button(
  attr.type('button'),
  attr.disabled(disabled), // where disabled is a `Signal<boolean>`
  // ...
)
```

---

## dom.bindchecked: BindChecked() function

Binds a `boolean` property to the checked value of an input element. The binding is two-way.

**Signature:**```typescript
BindChecked: (prop: Prop<boolean>) => Renderable
```## dom.bindchecked: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| prop | Prop&lt;boolean&gt; | The `boolean` property to bind. |


**Returns:**

[Renderable](#dom-renderable)

A Renderable.

---

## dom.binddate: BindDate() function

Binds a `Date` property to an input element. The binding is two-way. Changes to the input element will update the property but will only be affected by day changes and ignore time changes.

**Signature:**```typescript
BindDate: (prop: Prop<Date>, handler?: keyof HTMLEvents) => Renderable
```## dom.binddate: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| prop | Prop&lt;Date&gt; | The `Date` property to bind. |
| handler | keyof [HTMLEvents](#dom-htmlevents) | _(Optional)_ The event handler to use (default: 'input'). |


**Returns:**

[Renderable](#dom-renderable)

A Renderable.

---

## dom.binddatetime: BindDateTime() function

Binds a `Date` property to an input element. The binding is two-way.

**Signature:**```typescript
BindDateTime: (prop: Prop<Date>, handler?: keyof HTMLEvents) => Renderable
```## dom.binddatetime: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| prop | Prop&lt;Date&gt; | The `Date` property to bind. |
| handler | keyof [HTMLEvents](#dom-htmlevents) | _(Optional)_ The event handler to use (default: 'input'). |


**Returns:**

[Renderable](#dom-renderable)

A Renderable.

---

## dom.bindnumber: BindNumber() function

Binds a `number` property to an input element. The binding is two-way.

**Signature:**```typescript
BindNumber: (prop: Prop<number>, handler?: keyof HTMLEvents) => Renderable
```## dom.bindnumber: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| prop | Prop&lt;number&gt; | The `number` property to bind. |
| handler | keyof [HTMLEvents](#dom-htmlevents) | _(Optional)_ The event handler to use (default: 'input'). |


**Returns:**

[Renderable](#dom-renderable)

A Renderable.

---

## dom.bindtext: BindText() function

Binds a `string` property to an input element. The binding is two-way.

**Signature:**```typescript
BindText: (prop: Prop<string>, handler?: keyof HTMLEvents) => Renderable
```## dom.bindtext: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| prop | Prop&lt;string&gt; | The `string` property to bind. |
| handler | keyof [HTMLEvents](#dom-htmlevents) | _(Optional)_ The event handler to use (default: 'input'). |


**Returns:**

[Renderable](#dom-renderable)

A Renderable.

---

## dom.browsercontext._constructor_: BrowserContext.(constructor)

Constructs a new `DOMContext` instance.

**Signature:**```typescript
constructor(
    document: Document, 
    element: HTMLElement, 
    reference: Node | undefined, 
    providers: Providers);
```## dom.browsercontext._constructor_: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| document | Document | The `Document` instance associated with this context. |
| element | HTMLElement | The `Element` instance associated with this context. |
| reference | Node \\| undefined | An optional `Node` instance that serves as a reference for this context. |
| providers | Providers | The `Providers` instance associated with this context. |

---

## dom.browsercontext.addclasses: BrowserContext.addClasses() method

Adds classes to the element.

**Signature:**```typescript
addClasses(tokens: string[]): void;
```## dom.browsercontext.addclasses: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| tokens | string\[\] | The class names to add. |


**Returns:**

void

---

## dom.browsercontext.appendorinsert: BrowserContext.appendOrInsert() method

Appends or inserts a child node to the element, depending on whether a reference node is provided.

**Signature:**```typescript
appendOrInsert(child: Node): void;
```## dom.browsercontext.appendorinsert: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| child | Node | The child node to append or insert. |


**Returns:**

void

---

## dom.browsercontext.clear: BrowserContext.clear() method

**Signature:**```typescript
clear(removeTree: boolean): void;
```## dom.browsercontext.clear: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| removeTree | boolean |  |


**Returns:**

void

---

## dom.browsercontext.createelement: BrowserContext.createElement() method

Creates a new DOM element (eg: HTML or SVG) with the specified tag name and namespace.

**Signature:**```typescript
createElement(tagName: string, namespace: string | undefined): HTMLElement;
```## dom.browsercontext.createelement: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| tagName | string | The tag name of the element to create. |
| namespace | string \\| undefined | The namespace URI to create the element in, or `undefined` to create a standard HTML element. |


**Returns:**

HTMLElement

The newly created element.

---

## dom.browsercontext.createtext: BrowserContext.createText() method

Creates a new text node with the specified text content.

**Signature:**```typescript
createText(text: Primitive): Text;
```## dom.browsercontext.createtext: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| text | Primitive | The text content for the new text node. |


**Returns:**

Text

A new `Text` node with the specified text content.

---

## dom.browsercontext.detach: BrowserContext.detach() method

**Signature:**```typescript
detach(): void;
```
**Returns:**

void

---

## dom.browsercontext.document: BrowserContext.document property

The `Document` instance associated with this context.

**Signature:**```typescript
readonly document: Document;
```

---

## dom.browsercontext.element: BrowserContext.element property

The `Element` instance associated with this context.

**Signature:**```typescript
readonly element: HTMLElement;
```

---

## dom.browsercontext.getclasses: BrowserContext.getClasses() method

Gets the classes of the element.

**Signature:**```typescript
getClasses(): string[];
```
**Returns:**

string\[\]

The classes of the element.

---

## dom.browsercontext.getprovider: BrowserContext.getProvider() method

Retrieves a provider for the given provider mark.

**Signature:**```typescript
getProvider<T>(mark: ProviderMark<T>): {
        value: T;
        onUse: (() => void) | undefined;
    };
```## dom.browsercontext.getprovider: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| mark | ProviderMark&lt;T&gt; | The provider mark to retrieve the provider for. |


**Returns:**

{ value: T; onUse: (() =&gt; void) \| undefined; }

The provider for the given mark.

## dom.browsercontext.getprovider: Exceptions

Throws `ProviderNotFoundError` if the provider for the given mark is not found.

---

## dom.browsercontext.getstyle: BrowserContext.getStyle() method

Gets the style of the element.

**Signature:**```typescript
getStyle(name: string): string;
```## dom.browsercontext.getstyle: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| name | string | The name of the style to get. |


**Returns:**

string

The value of the style.

---

## dom.browsercontext.gettext: BrowserContext.getText() method

Gets the text content of the current element or text node.

**Signature:**```typescript
getText(): string;
```
**Returns:**

string

The text content of the current element or text node.

---

## dom.browsercontext.getwindow: BrowserContext.getWindow() method

**Signature:**```typescript
getWindow(): Window & typeof globalThis;
```
**Returns:**

Window &amp; typeof globalThis

---

## dom.browsercontext.isbrowser: BrowserContext.isBrowser() method

Returns `true` if the context is a browser context.

**Signature:**```typescript
isBrowser(): this is BrowserContext;
```
**Returns:**

this is [BrowserContext](#dom-browsercontext)

`true` if the context is a browser context.

---

## dom.browsercontext.isbrowserdom: BrowserContext.isBrowserDOM() method

> Warning: This API is now obsolete.
>
> Use `isBrowser()` instead.
>

Returns `true` if the context is a browser DOM context.

**Signature:**```typescript
isBrowserDOM(): this is BrowserContext;
```
**Returns:**

this is [BrowserContext](#dom-browsercontext)

`true` if the context is a browser DOM context.

---

## dom.browsercontext.isheadless: BrowserContext.isHeadless() method

Returns `true` if the context is a headless context.

**Signature:**```typescript
isHeadless(): this is HeadlessContext;
```
**Returns:**

this is [HeadlessContext](#dom-headlesscontext)

`true` if the context is a headless context.

---

## dom.browsercontext.isheadlessdom: BrowserContext.isHeadlessDOM() method

Returns `true` if the context is a headless DOM context.

**Signature:**```typescript
isHeadlessDOM(): this is HeadlessContext;
```
**Returns:**

this is [HeadlessContext](#dom-headlesscontext)

`true` if the context is a headless DOM context.

---

## dom.browsercontext.makeaccessors: BrowserContext.makeAccessors() method

**Signature:**```typescript
makeAccessors(name: string): {
        get: () => any;
        set: (value: unknown) => void;
    };
```## dom.browsercontext.makeaccessors: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| name | string |  |


**Returns:**

{ get: () =&gt; any; set: (value: unknown) =&gt; void; }

---

## dom.browsercontext.makechildelement: BrowserContext.makeChildElement() method

Creates a new child element and appends it to the current element, returning a new context.

This method creates a new DOM element with the specified tag name and namespace, appends it to the current element, and returns a new DOMContext focused on the newly created child element. This is the primary method for building DOM trees.

**Signature:**```typescript
makeChildElement(tagName: string, namespace: string | undefined): DOMContext;
```## dom.browsercontext.makechildelement: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| tagName | string | The tag name of the element to create (e.g., 'div', 'span', 'svg') |
| namespace | string \\| undefined | The namespace URI for the element, or undefined for HTML elements |


**Returns:**

[DOMContext](#dom-domcontext)

A new DOMContext focused on the newly created child element

## dom.browsercontext.makechildelement: Example```typescript
// Create HTML elements
const divCtx = ctx.makeChildElement('div', undefined)
const spanCtx = divCtx.makeChildElement('span', undefined)

// Create SVG elements
const svgCtx = ctx.makeChildElement('svg', 'http://www.w3.org/2000/svg')
const circleCtx = svgCtx.makeChildElement('circle', 'http://www.w3.org/2000/svg')
```

---

## dom.browsercontext.makechildtext: BrowserContext.makeChildText() method

Creates a new text node with the specified text content and appends it to the current element.

**Signature:**```typescript
makeChildText(text: Primitive): DOMContext;
```## dom.browsercontext.makechildtext: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| text | Primitive | The text content for the new text node. Primitives are coerced to strings by the DOM. |


**Returns:**

[DOMContext](#dom-domcontext)

A new `DOMContext` with a reference to the new text node.

---

## dom.browsercontext.makemarker: BrowserContext.makeMarker() method

Creates a lightweight Comment marker node and appends/inserts it. Used as boundary references for keyed list items and conditional renderables.

**Signature:**```typescript
makeMarker(): DOMContext;
```
**Returns:**

[DOMContext](#dom-domcontext)

---

## dom.browsercontext.makeportal: BrowserContext.makePortal() method

Creates a portal to render content in a different part of the DOM tree.

Portals allow you to render child components into a DOM node that exists outside the parent component's DOM hierarchy. This is useful for modals, tooltips, dropdowns, and other UI elements that need to break out of their container's styling or z-index context.

**Signature:**```typescript
makePortal(selector: string | HTMLElement): DOMContext;
```## dom.browsercontext.makeportal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| selector | string \\| HTMLElement | CSS selector string or HTMLElement reference for the portal target |


**Returns:**

[DOMContext](#dom-domcontext)

A new DOMContext focused on the portal target element

## dom.browsercontext.makeportal: Exceptions

{Error} When the selector doesn't match any element in the document

## dom.browsercontext.makeportal: Example 1```typescript
// Portal to a modal container
const modalCtx = ctx.makePortal('#modal-root')
const modal = modalCtx.makeChildElement('div', undefined)

// Add modal content
modal.makeChildText('This renders in #modal-root')
```

## dom.browsercontext.makeportal: Example 2


```typescript
// Portal to an existing element reference
const tooltipContainer = document.getElementById('tooltip-container')!
const tooltipCtx = ctx.makePortal(tooltipContainer)

// Render tooltip content
const tooltip = tooltipCtx.makeChildElement('div', undefined)
tooltip.addClasses(['tooltip', 'tooltip-top'])
```

## dom.browsercontext.makeportal: Example 3


```typescript
// Portal for dropdown menu
const dropdownCtx = ctx.makePortal('body') // Render at body level
const dropdown = dropdownCtx.makeChildElement('div', undefined)
dropdown.addClasses(['dropdown-menu'])
dropdown.setStyle('position', 'absolute')
dropdown.setStyle('top', '100px')
dropdown.setStyle('left', '50px')
```

---

## dom.browsercontext.makeref: BrowserContext.makeRef() method

Creates a new `DOMContext` with a reference to a newly created Comment node. The Comment node is appended or inserted to the current `DOMContext`. The new `DOMContext` with the reference is returned.

**Signature:**```typescript
makeRef(): DOMContext;
```
**Returns:**

[DOMContext](#dom-domcontext)

---

## dom.browsercontext: BrowserContext class

Browser implementation of DOMContext for real DOM manipulation in web browsers.

BrowserContext provides a comprehensive API for creating, manipulating, and managing DOM elements in a browser environment. It handles element creation, text nodes, event listeners, styling, and provider management while maintaining immutability through context chaining.

The context uses a reference system to track insertion points within sibling elements, allowing precise control over where new elements are inserted in the DOM tree.

**Signature:**```typescript
export declare class BrowserContext implements DOMContext 
```
**Implements:** [DOMContext](#dom-domcontext)

## dom.browsercontext: Example 1


```typescript
// Create a context for the document body
const ctx = BrowserContext.of(document.body, undefined, {})

// Create child elements
const divCtx = ctx.makeChildElement('div', undefined)
const textCtx = divCtx.makeChildText('Hello, World!')

// Add event listeners
divCtx.on('click', (event, ctx) => {
  console.log('Div clicked!', event.target)
})
```

## dom.browsercontext: Example 2


```typescript
// Working with providers
const themeProvider = makeProviderMark<string>('theme')
const ctxWithProvider = ctx.setProvider(themeProvider, 'dark', undefined)

// Later retrieve the provider
const { value: theme } = ctxWithProvider.getProvider(themeProvider)
```

## dom.browsercontext: Example 3


```typescript
// Portal to different DOM location
const modalCtx = ctx.makePortal('#modal-root')
const modalContent = modalCtx.makeChildElement('div', undefined)
```## dom.browsercontext: Constructors


| Constructor | Modifiers | Description |
| --- | --- | --- |
| [(constructor)(document, element, reference, providers)](#dom-browsercontext-constructor) |  | Constructs a new `DOMContext` instance. |


## dom.browsercontext: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [document](#dom-browsercontext-document) | `readonly` | Document | The `Document` instance associated with this context. |
| [element](#dom-browsercontext-element) | `readonly` | HTMLElement | The `Element` instance associated with this context. |
| [providers](#dom-browsercontext-providers) | `readonly` | Providers | The `Providers` instance associated with this context. |
| [reference](#dom-browsercontext-reference) | `readonly` | Node \\| undefined | An optional `Node` instance that serves as a reference for this context. |


## dom.browsercontext: Methods


| Method | Modifiers | Description |
| --- | --- | --- |
| [addClasses(tokens)](#dom-browsercontext-addclasses) |  | Adds classes to the element. |
| [appendOrInsert(child)](#dom-browsercontext-appendorinsert) |  | Appends or inserts a child node to the element, depending on whether a reference node is provided. |
| [clear(removeTree)](#dom-browsercontext-clear) |  |  |
| [createElement(tagName, namespace)](#dom-browsercontext-createelement) |  | Creates a new DOM element (eg: HTML or SVG) with the specified tag name and namespace. |
| [createText(text)](#dom-browsercontext-createtext) |  | Creates a new text node with the specified text content. |
| [detach()](#dom-browsercontext-detach) |  |  |
| [getClasses()](#dom-browsercontext-getclasses) |  | Gets the classes of the element. |
| [getProvider(mark)](#dom-browsercontext-getprovider) |  | Retrieves a provider for the given provider mark. |
| [getStyle(name)](#dom-browsercontext-getstyle) |  | Gets the style of the element. |
| [getText()](#dom-browsercontext-gettext) |  | Gets the text content of the current element or text node. |
| [getWindow()](#dom-browsercontext-getwindow) |  |  |
| [isBrowser()](#dom-browsercontext-isbrowser) |  | Returns `true` if the context is a browser context. |
| [isBrowserDOM()](#dom-browsercontext-isbrowserdom) |  | Returns `true` if the context is a browser DOM context. |
| [isHeadless()](#dom-browsercontext-isheadless) |  | Returns `true` if the context is a headless context. |
| [isHeadlessDOM()](#dom-browsercontext-isheadlessdom) |  | Returns `true` if the context is a headless DOM context. |
| [makeAccessors(name)](#dom-browsercontext-makeaccessors) |  |  |
| [makeChildElement(tagName, namespace)](#dom-browsercontext-makechildelement) |  | Creates a new child element and appends it to the current element, returning a new context. This method creates a new DOM element with the specified tag name and namespace, appends it to the current element, and returns a new DOMContext focused on the newly created child element. This is the primary method for building DOM trees. |
| [makeChildText(text)](#dom-browsercontext-makechildtext) |  | Creates a new text node with the specified text content and appends it to the current element. |
| [makeMarker()](#dom-browsercontext-makemarker) |  | Creates a lightweight Comment marker node and appends/inserts it. Used as boundary references for keyed list items and conditional renderables. |
| [makePortal(selector)](#dom-browsercontext-makeportal) |  | Creates a portal to render content in a different part of the DOM tree. Portals allow you to render child components into a DOM node that exists outside the parent component's DOM hierarchy. This is useful for modals, tooltips, dropdowns, and other UI elements that need to break out of their container's styling or z-index context. |
| [makeRef()](#dom-browsercontext-makeref) |  | Creates a new `DOMContext` with a reference to a newly created Comment node. The Comment node is appended or inserted to the current `DOMContext`. The new `DOMContext` with the reference is returned. |
| [moveRangeBefore(startRef, endRef, targetRef)](#dom-browsercontext-moverangebefore) |  |  |
| [of(element, ref, providers)](#dom-browsercontext-of) | `static` | Creates a new `DOMContext` instance for the given `Element` and optional reference `Node`. |
| [on(event, listener, options)](#dom-browsercontext-on) |  | Adds an event listener to the element. |
| [reattach()](#dom-browsercontext-reattach) |  |  |
| [removeAllBefore(ref)](#dom-browsercontext-removeallbefore) |  |  |
| [removeClasses(tokens)](#dom-browsercontext-removeclasses) |  | Removes classes from the element. |
| [removeRange(startRef, endRef)](#dom-browsercontext-removerange) |  |  |
| [setProvider(mark, value, onUse)](#dom-browsercontext-setprovider) |  | Sets a provider for the given provider mark. |
| [setStyle(name, value)](#dom-browsercontext-setstyle) |  | Sets the style of the element. |
| [setText(text)](#dom-browsercontext-settext) |  | Sets the text content of the current element. |
| [tryGetProvider(mark)](#dom-browsercontext-trygetprovider) |  |  |
| [withElement(element)](#dom-browsercontext-withelement) |  | Creates a new `DOMContext` instance with the provided `element`. |
| [withReference(reference)](#dom-browsercontext-withreference) |  | Creates a new `DOMContext` instance with the specified reference. |

---

## dom.browsercontext.moverangebefore: BrowserContext.moveRangeBefore() method

**Signature:**```typescript
moveRangeBefore(startRef: DOMContext, endRef: DOMContext, targetRef: DOMContext): void;
```## dom.browsercontext.moverangebefore: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| startRef | [DOMContext](#dom-domcontext) |  |
| endRef | [DOMContext](#dom-domcontext) |  |
| targetRef | [DOMContext](#dom-domcontext) |  |


**Returns:**

void

---

## dom.browsercontext.of: BrowserContext.of() method

Creates a new `DOMContext` instance for the given `Element` and optional reference `Node`.

**Signature:**```typescript
static of(element: HTMLElement, ref: Node | undefined, providers: Providers): DOMContext;
```## dom.browsercontext.of: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| element | HTMLElement | The `HTMLElement` to create the `DOMContext` for. |
| ref | Node \\| undefined | A reference `Node` to associate with the `DOMContext` or undefined . |
| providers | Providers | The providers to associate with the `DOMContext`. |


**Returns:**

[DOMContext](#dom-domcontext)

A new `DOMContext` instance.

---

## dom.browsercontext.on: BrowserContext.on() method

Adds an event listener to the element.

**Signature:**```typescript
on<E>(event: string, listener: (event: E, ctx: BrowserContext) => void, options?: HandlerOptions): Clear;
```## dom.browsercontext.on: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| event | string | The event to listen for. |
| listener | (event: E, ctx: [BrowserContext](#dom-browsercontext)) =&gt; void | The listener to call when the event occurs. |
| options | [HandlerOptions](#dom-handleroptions) | _(Optional)_ The options for the event listener. |


**Returns:**

Clear

A function to remove the event listener.

---

## dom.browsercontext.providers: BrowserContext.providers property

The `Providers` instance associated with this context.

**Signature:**```typescript
readonly providers: Providers;
```

---

## dom.browsercontext.reattach: BrowserContext.reattach() method

**Signature:**```typescript
reattach(): void;
```
**Returns:**

void

---

## dom.browsercontext.reference: BrowserContext.reference property

An optional `Node` instance that serves as a reference for this context.

**Signature:**```typescript
readonly reference: Node | undefined;
```

---

## dom.browsercontext.removeallbefore: BrowserContext.removeAllBefore() method

**Signature:**```typescript
removeAllBefore(ref: DOMContext): void;
```## dom.browsercontext.removeallbefore: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| ref | [DOMContext](#dom-domcontext) |  |


**Returns:**

void

---

## dom.browsercontext.removeclasses: BrowserContext.removeClasses() method

Removes classes from the element.

**Signature:**```typescript
removeClasses(tokens: string[]): void;
```## dom.browsercontext.removeclasses: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| tokens | string\[\] | The class names to remove. |


**Returns:**

void

---

## dom.browsercontext.removerange: BrowserContext.removeRange() method

**Signature:**```typescript
removeRange(startRef: DOMContext, endRef: DOMContext): void;
```## dom.browsercontext.removerange: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| startRef | [DOMContext](#dom-domcontext) |  |
| endRef | [DOMContext](#dom-domcontext) |  |


**Returns:**

void

---

## dom.browsercontext.setprovider: BrowserContext.setProvider() method

Sets a provider for the given provider mark.

**Signature:**```typescript
setProvider<T>(mark: ProviderMark<T>, value: T, onUse: undefined | (() => void)): DOMContext;
```## dom.browsercontext.setprovider: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| mark | ProviderMark&lt;T&gt; | The provider mark to set the provider for. |
| value | T | The provider to set for the given mark. |
| onUse | undefined \\| (() =&gt; void) |  |


**Returns:**

[DOMContext](#dom-domcontext)

A new `DOMContext` instance with the specified provider.

---

## dom.browsercontext.setstyle: BrowserContext.setStyle() method

Sets the style of the element.

**Signature:**```typescript
setStyle(name: string, value: string): void;
```## dom.browsercontext.setstyle: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| name | string | The name of the style to set. |
| value | string | The value of the style to set. |


**Returns:**

void

---

## dom.browsercontext.settext: BrowserContext.setText() method

Sets the text content of the current element.

**Signature:**```typescript
setText(text: Primitive): void;
```## dom.browsercontext.settext: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| text | Primitive | The text content to set. Primitives are coerced to strings by the DOM. |


**Returns:**

void

---

## dom.browsercontext.trygetprovider: BrowserContext.tryGetProvider() method

**Signature:**```typescript
tryGetProvider<T>(mark: ProviderMark<T>): {
        value: T;
        onUse: (() => void) | undefined;
    } | undefined;
```## dom.browsercontext.trygetprovider: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| mark | ProviderMark&lt;T&gt; |  |


**Returns:**

{ value: T; onUse: (() =&gt; void) \| undefined; } \| undefined

---

## dom.browsercontext.withelement: BrowserContext.withElement() method

Creates a new `DOMContext` instance with the provided `element`.

**Signature:**```typescript
withElement(element: HTMLElement): BrowserContext;
```## dom.browsercontext.withelement: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| element | HTMLElement | The DOM element to use in the new `DOMContext` instance. |


**Returns:**

[BrowserContext](#dom-browsercontext)

A new `DOMContext` instance with the provided `element`.

---

## dom.browsercontext.withreference: BrowserContext.withReference() method

Creates a new `DOMContext` instance with the specified reference.

**Signature:**```typescript
withReference(reference: Node | undefined): DOMContext;
```## dom.browsercontext.withreference: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| reference | Node \\| undefined | The optional `Node` to use as the reference for the new `DOMContext`. |


**Returns:**

[DOMContext](#dom-domcontext)

A new `DOMContext` instance with the specified reference.

---

## dom.catch: Catch() function

**Signature:**```typescript
Catch: (children: import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, fallback: (error: import('@tempots/core').Signal<Error>, retry: () => void) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.catch: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| children | import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |
| fallback | (error: import('@tempots/core').Signal&lt;Error&gt;, retry: () =&gt; void) =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.class_placeholder_attr: CLASS\_PLACEHOLDER\_ATTR variable

**Signature:**```typescript
CLASS_PLACEHOLDER_ATTR = "data-tts-class"
```

---

## dom.conjunction: Conjunction() function

**Signature:**```typescript
Conjunction: (separator: () => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, options?: import('@tempots/render').ConjunctionOptions<DOMContext, typeof DOM_RENDERABLE_TYPE> | undefined) => (pos: import('@tempots/core').Signal<import('@tempots/core').ElementPosition>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.conjunction: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| separator | () =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |
| options | import('@tempots/render').ConjunctionOptions&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; \\| undefined | _(Optional)_ |


**Returns:**

(pos: import('@tempots/core').Signal&lt;import('@tempots/core').ElementPosition&gt;) =&gt; import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.createinertiahandler: createInertiaHandler() function

Creates an inertia handler for pan/scroll interactions. During a drag, call `track(x, y)` on each pointer move to build up velocity. On release, call `release()` to start an exponential decay animation.

**Signature:**```typescript
export declare function createInertiaHandler(onDelta: (dx: number, dy: number) => void, config?: InertiaConfig): InertiaHandler;
```## dom.createinertiahandler: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| onDelta | (dx: number, dy: number) =&gt; void | Called with `(dx, dy)` deltas each frame during the decay. |
| config | [InertiaConfig](#dom-inertiaconfig) | _(Optional)_ Optional friction and threshold settings. |


**Returns:**

[InertiaHandler](#dom-inertiahandler)

An inertia handler.

---

## dom.createpinchzoomhandler: createPinchZoomHandler() function

Creates event handlers for two-finger pinch-to-zoom with simultaneous pan.

**Signature:**```typescript
export declare function createPinchZoomHandler(state: Prop<PinchZoomState>, getContainerRect: () => DOMRect, config?: PinchZoomConfig): PinchZoomHandler;
```## dom.createpinchzoomhandler: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| state | Prop&lt;[PinchZoomState](#dom-pinchzoomstate)&gt; | A `Prop` holding the current zoom/pan state. Updated on each touch move. |
| getContainerRect | () =&gt; DOMRect | Returns the bounding rect of the zoomable container. |
| config | [PinchZoomConfig](#dom-pinchzoomconfig) | _(Optional)_ Optional scale limits. |


**Returns:**

[PinchZoomHandler](#dom-pinchzoomhandler)

Touch event handlers to attach to the target element.

---

## dom.createrafloop: createRafLoop() function

Creates a `requestAnimationFrame` loop that calls `callback` on every frame with the elapsed time in milliseconds since the previous frame.

The first frame always receives `dt = 0`.

**Signature:**```typescript
export declare function createRafLoop(callback: (dt: number) => void): RafLoopHandle;
```## dom.createrafloop: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| callback | (dt: number) =&gt; void | Called each frame with delta time in milliseconds. |


**Returns:**

[RafLoopHandle](#dom-rafloophandle)

A handle with a `dispose()` method to stop the loop.

---

## dom.createreducedmotionsignal: createReducedMotionSignal() function

Creates a reactive signal that tracks the user's `prefers-reduced-motion` system preference. The signal updates automatically when the preference changes.

SSR-safe: returns a signal with `false` when `window` is unavailable.

**Signature:**```typescript
export declare function createReducedMotionSignal(): Signal<boolean>;
```
**Returns:**

Signal&lt;boolean&gt;

A signal that is `true` when reduced motion is preferred.

---

## dom.createtween: createTween() function

Creates an imperative tween that drives a reactive signal from its current value to a target using an easing function over a fixed duration.

Complements `animateSignal` (declarative) with explicit `tweenTo()` control.

**Signature:**```typescript
export declare function createTween<T>(initial: T, config?: TweenConfig<T>): TweenHandle<T>;
```## dom.createtween: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| initial | T | The initial value. |
| config | [TweenConfig](#dom-tweenconfig)&lt;T&gt; | _(Optional)_ Optional tween configuration. |


**Returns:**

[TweenHandle](#dom-tweenhandle)&lt;T&gt;

A tween handle.

---

## dom.cssstyles: CSSStyles type

Represents a subset of CSS styles. It is a type that excludes certain properties from the `CSSStyleDeclaration` type.

**Signature:**```typescript
export type CSSStyles = Omit<CSSStyleDeclaration, ExcludeFromStyle>;
```
**References:** [ExcludeFromStyle](#dom-excludefromstyle)

---

## dom.dataattr: DataAttr() function

Creates a renderable for a data attribute with the specified name and value.

This is an alias for `dataAttr(name, value)` that accepts `unknown` values.

**Signature:**```typescript
DataAttr: (name: string, value: Value<string>) => Renderable
```## dom.dataattr: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| name | string | The name of the data attribute (without the 'data-' prefix). |
| value | Value&lt;string&gt; | The value of the attribute (can be a literal or Signal). |


**Returns:**

[Renderable](#dom-renderable)

A renderable that sets the data attribute.

## dom.dataattr: Example```ts
const button = html.button(
  DataAttr('myinfo', 'something'), // maps to the `data-myinfo` attribute
)
```

---

## dom.delegate: delegate variable

Provides type-safe delegated event handlers for all HTML events.

The `delegate` object is a proxy that creates event handlers attached to the \*\*container element\*\* rather than individual children. Events are matched against a CSS selector using `Element.closest()`, making this ideal for lists and other containers with many similar children.

Unlike `on`, which attaches one listener per element, `delegate` attaches a single listener on the container regardless of how many children match.

**Signature:**```typescript
delegate: {
    abort: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    afterprint: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    animationcancel: (selector: string, handler: (event: AnimationEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    animationend: (selector: string, handler: (event: AnimationEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    animationiteration: (selector: string, handler: (event: AnimationEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    animationstart: (selector: string, handler: (event: AnimationEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    auxclick: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    beforeinput: (selector: string, handler: (event: InputEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    beforeprint: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    beforeunload: (selector: string, handler: (event: BeforeUnloadEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    blur: (selector: string, handler: (event: FocusEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    cancel: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    canplay: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    canplaythrough: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    change: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    click: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    close: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    compositionend: (selector: string, handler: (event: CompositionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    compositionstart: (selector: string, handler: (event: CompositionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    compositionupdate: (selector: string, handler: (event: CompositionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    contextmenu: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    copy: (selector: string, handler: (event: ClipboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    cuechange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    cut: (selector: string, handler: (event: ClipboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    dblclick: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    drag: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    dragend: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    dragenter: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    dragexit: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    dragleave: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    dragover: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    dragstart: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    drop: (selector: string, handler: (event: DragEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    durationchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    emptied: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    ended: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    error: (selector: string, handler: (event: ErrorEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    focus: (selector: string, handler: (event: FocusEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    focusin: (selector: string, handler: (event: FocusEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    focusout: (selector: string, handler: (event: FocusEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    formdata: (selector: string, handler: (event: FormDataEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    fullscreenchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    fullscreenerror: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    gotpointercapture: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    hashchange: (selector: string, handler: (event: HashChangeEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    input: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    invalid: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    keydown: (selector: string, handler: (event: KeyboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    keypress: (selector: string, handler: (event: KeyboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    keyup: (selector: string, handler: (event: KeyboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    languagechange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    load: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    loadeddata: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    loadedmetadata: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    loadend: (selector: string, handler: (event: ProgressEvent<EventTarget>, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    loadstart: (selector: string, handler: (event: ProgressEvent<EventTarget>, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    lostpointercapture: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    message: (selector: string, handler: (event: MessageEvent<any>, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    messageerror: (selector: string, handler: (event: MessageEvent<any>, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    mousedown: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    mouseenter: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    mouseleave: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    mousemove: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    mouseout: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    mouseover: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    mouseup: (selector: string, handler: (event: MouseEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    offline: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    online: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    orientationchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pagehide: (selector: string, handler: (event: PageTransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pageshow: (selector: string, handler: (event: PageTransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    paste: (selector: string, handler: (event: ClipboardEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pause: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    play: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    playing: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointercancel: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerdown: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerenter: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerleave: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerlockchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerlockerror: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointermove: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerout: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerover: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerrawupdate: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    pointerup: (selector: string, handler: (event: PointerEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    popstate: (selector: string, handler: (event: PopStateEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    progress: (selector: string, handler: (event: ProgressEvent<EventTarget>, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    ratechange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    readystatechange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    rejectionhandled: (selector: string, handler: (event: PromiseRejectionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    reset: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    resize: (selector: string, handler: (event: UIEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    scroll: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    scrollend: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    securitypolicyviolation: (selector: string, handler: (event: SecurityPolicyViolationEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    seeked: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    seeking: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    select: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    selectionchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    selectstart: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    slotchange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    stalled: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    storage: (selector: string, handler: (event: StorageEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    submit: (selector: string, handler: (event: SubmitEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    suspend: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    timeupdate: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    toggle: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    touchcancel: (selector: string, handler: (event: TouchEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    touchend: (selector: string, handler: (event: TouchEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    touchmove: (selector: string, handler: (event: TouchEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    touchstart: (selector: string, handler: (event: TouchEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    transitioncancel: (selector: string, handler: (event: TransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    transitionend: (selector: string, handler: (event: TransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    transitionrun: (selector: string, handler: (event: TransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    transitionstart: (selector: string, handler: (event: TransitionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    unhandledrejection: (selector: string, handler: (event: PromiseRejectionEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    unload: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    visibilitychange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    volumechange: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    waiting: (selector: string, handler: (event: Event, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
    wheel: (selector: string, handler: (event: WheelEvent, ctx: DOMContext) => void, options?: HandlerOptions) => Renderable;
}
```

## dom.delegate: Remarks

Delegated events rely on event bubbling. Events that do not bubble (such as `focus`, `blur`, `mouseenter`, `mouseleave`) will not be captured by delegation. Use the regular `on` handler for those events.

## dom.delegate: Example 1


```typescript
// Delegated click on list items — one listener on the <ul>
html.ul(
  delegate.click('li', (event, ctx) => {
    const li = (event.target as Element).closest('li')!
    console.log('Clicked:', li.textContent)
  }),
  ForEach(items, (item) => html.li(item))
)
```

## dom.delegate: Example 2


```typescript
// Delegated click on buttons inside a toolbar
html.div(
  delegate.click('button', (event) => {
    const btn = (event.target as Element).closest('button')!
    console.log('Button clicked:', btn.dataset.action)
  }),
  html.button(attr.data('action', 'save'), 'Save'),
  html.button(attr.data('action', 'cancel'), 'Cancel')
)
```

---

## dom.disposecallback: DisposeCallback type

Callback invoked on dispose, specialized for DOMContext.

**Signature:**```typescript
export type DisposeCallback = BaseDisposeCallback<DOMContext>;
```
**References:** [DOMContext](#dom-domcontext)

---

## dom.dom_renderable_type: DOM\_RENDERABLE\_TYPE variable

Symbol to brand DOM renderables and prevent mixing with other contexts

**Signature:**```typescript
DOM_RENDERABLE_TYPE: unique symbol
```

---

## dom.domcontext.addclasses: DOMContext.addClasses() method

Adds classes to the element.

**Signature:**```typescript
addClasses(tokens: string[]): void;
```## dom.domcontext.addclasses: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| tokens | string\[\] | The class names to add. |


**Returns:**

void

---

## dom.domcontext.clear: DOMContext.clear() method

**Signature:**```typescript
clear(removeTree: boolean): void;
```## dom.domcontext.clear: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| removeTree | boolean |  |


**Returns:**

void

---

## dom.domcontext.detach: DOMContext.detach() method

Detaches the context's container element from the live DOM tree. Use before bulk insertions to avoid incremental layout recalculations.

**Signature:**```typescript
detach(): void;
```
**Returns:**

void

---

## dom.domcontext.getclasses: DOMContext.getClasses() method

Gets the classes of the element.

**Signature:**```typescript
getClasses(): string[];
```
**Returns:**

string\[\]

The classes of the element.

---

## dom.domcontext.getprovider: DOMContext.getProvider() method

Retrieves a provider for the given provider mark.

**Signature:**```typescript
getProvider<T>(mark: ProviderMark<T>): {
        value: T;
        onUse?: () => void;
    };
```## dom.domcontext.getprovider: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| mark | ProviderMark&lt;T&gt; | The provider mark to retrieve the provider for. |


**Returns:**

{ value: T; onUse?: () =&gt; void; }

The provider for the given mark.

## dom.domcontext.getprovider: Exceptions

Throws `ProviderNotFoundError` if the provider for the given mark is not found.

---

## dom.domcontext.getstyle: DOMContext.getStyle() method

Gets the style of the element.

**Signature:**```typescript
getStyle(name: string): string;
```## dom.domcontext.getstyle: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| name | string | The name of the style to get. |


**Returns:**

string

The value of the style.

---

## dom.domcontext.gettext: DOMContext.getText() method

Gets the text content of the current element or text node.

**Signature:**```typescript
getText(): string;
```
**Returns:**

string

The text content of the current element or text node.

---

## dom.domcontext.isbrowser: DOMContext.isBrowser() method

Returns `true` if the context is a browser DOM context.

**Signature:**```typescript
isBrowser(): this is BrowserContext;
```
**Returns:**

this is [BrowserContext](#dom-browsercontext)

`true` if the context is a browser DOM context.

---

## dom.domcontext.isbrowserdom: DOMContext.isBrowserDOM() method

> Warning: This API is now obsolete.
>
> Use `isBrowser()` instead.
>

Returns `true` if the context is a browser DOM context.

**Signature:**```typescript
isBrowserDOM(): this is BrowserContext;
```
**Returns:**

this is [BrowserContext](#dom-browsercontext)

`true` if the context is a browser DOM context.

---

## dom.domcontext.isheadless: DOMContext.isHeadless() method

Returns `true` if the context is a headless context.

**Signature:**```typescript
isHeadless(): this is HeadlessContext;
```
**Returns:**

this is [HeadlessContext](#dom-headlesscontext)

`true` if the context is a headless context.

---

## dom.domcontext.isheadlessdom: DOMContext.isHeadlessDOM() method

Returns `true` if the context is a headless DOM context.

**Signature:**```typescript
isHeadlessDOM(): this is HeadlessContext;
```
**Returns:**

this is [HeadlessContext](#dom-headlesscontext)

`true` if the context is a headless DOM context.

---

## dom.domcontext.makeaccessors: DOMContext.makeAccessors() method

Returns an object with methods to get and set the value of a property or attribute.

**Signature:**```typescript
makeAccessors(name: string): {
        get(): unknown;
        set(value: unknown): void;
    };
```## dom.domcontext.makeaccessors: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| name | string | The name of the property to create accessors for. |


**Returns:**

{ get(): unknown; set(value: unknown): void; }

An object with methods to get and set the value of the property.

---

## dom.domcontext.makechildelement: DOMContext.makeChildElement() method

Creates a new DOM element (eg: HTML or SVG) with the specified tag name and namespace and appends it to the current element.

**Signature:**```typescript
makeChildElement(tagName: string, namespace: string | undefined): DOMContext;
```## dom.domcontext.makechildelement: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| tagName | string | The tag name of the element to create. |
| namespace | string \\| undefined | The namespace URI to create the element in, or `undefined` to create a standard HTML element. |


**Returns:**

[DOMContext](#dom-domcontext)

The newly created element.

---

## dom.domcontext.makechildtext: DOMContext.makeChildText() method

Creates a new text node with the specified text content and appends it to the current element.

**Signature:**```typescript
makeChildText(text: Primitive): DOMContext;
```## dom.domcontext.makechildtext: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| text | Primitive | The text content for the new text node. |


**Returns:**

[DOMContext](#dom-domcontext)

A new `DOMContext` with a reference to the new text node.

---

## dom.domcontext.makemarker: DOMContext.makeMarker() method

Creates a lightweight marker node (Comment node) as a boundary reference.

**Signature:**```typescript
makeMarker(): DOMContext;
```
**Returns:**

[DOMContext](#dom-domcontext)

---

## dom.domcontext.makeportal: DOMContext.makePortal() method

Creates a new `DOMContext` instance with a reference to a DOM element selected by the provided `selector`.

**Signature:**```typescript
makePortal(selector: string | HTMLElement): DOMContext;
```## dom.domcontext.makeportal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| selector | string \\| HTMLElement | The CSS selector for the target DOM element. |


**Returns:**

[DOMContext](#dom-domcontext)

A new `DOMContext` instance with a reference to the selected DOM element.

---

## dom.domcontext.makeref: DOMContext.makeRef() method

Creates a new `DOMContext` with a reference to a newly created text node. The text node is appended or inserted to the current `DOMContext`. The new `DOMContext` with the reference is returned.

**Signature:**```typescript
makeRef(): DOMContext;
```
**Returns:**

[DOMContext](#dom-domcontext)

---

## dom.domcontext: DOMContext interface

`DOMContext` is an immutable class that represents the context of a DOM element. It provides methods and properties to manipulate and interact with the DOM element.

A reference in a DOMContext is to mark a position within a set of siblings. It is used to insert new elements before the reference.

**Signature:**```typescript
export interface DOMContext 
```## dom.domcontext: Methods


| Method | Description |
| --- | --- |
| [addClasses(tokens)](#dom-domcontext-addclasses) | Adds classes to the element. |
| [clear(removeTree)](#dom-domcontext-clear) |  |
| [detach()](#dom-domcontext-detach) | Detaches the context's container element from the live DOM tree. Use before bulk insertions to avoid incremental layout recalculations. |
| [getClasses()](#dom-domcontext-getclasses) | Gets the classes of the element. |
| [getProvider(mark)](#dom-domcontext-getprovider) | Retrieves a provider for the given provider mark. |
| [getStyle(name)](#dom-domcontext-getstyle) | Gets the style of the element. |
| [getText()](#dom-domcontext-gettext) | Gets the text content of the current element or text node. |
| [isBrowser()](#dom-domcontext-isbrowser) | Returns `true` if the context is a browser DOM context. |
| [isBrowserDOM()](#dom-domcontext-isbrowserdom) | Returns `true` if the context is a browser DOM context. |
| [isHeadless()](#dom-domcontext-isheadless) | Returns `true` if the context is a headless context. |
| [isHeadlessDOM()](#dom-domcontext-isheadlessdom) | Returns `true` if the context is a headless DOM context. |
| [makeAccessors(name)](#dom-domcontext-makeaccessors) | Returns an object with methods to get and set the value of a property or attribute. |
| [makeChildElement(tagName, namespace)](#dom-domcontext-makechildelement) | Creates a new DOM element (eg: HTML or SVG) with the specified tag name and namespace and appends it to the current element. |
| [makeChildText(text)](#dom-domcontext-makechildtext) | Creates a new text node with the specified text content and appends it to the current element. |
| [makeMarker()](#dom-domcontext-makemarker) | Creates a lightweight marker node (Comment node) as a boundary reference. |
| [makePortal(selector)](#dom-domcontext-makeportal) | Creates a new `DOMContext` instance with a reference to a DOM element selected by the provided `selector`. |
| [makeRef()](#dom-domcontext-makeref) | Creates a new `DOMContext` with a reference to a newly created text node. The text node is appended or inserted to the current `DOMContext`. The new `DOMContext` with the reference is returned. |
| [moveRangeBefore(startRef, endRef, targetRef)](#dom-domcontext-moverangebefore) | Moves a range of sibling nodes (from `startRef` to `endRef` inclusive) before `targetRef`. All three refs must be children of the same parent element. Used by `KeyedForEach` to reorder keyed items without recreating DOM nodes. |
| [on(event, listener, options)](#dom-domcontext-on) | Adds an event listener to the element. |
| [reattach()](#dom-domcontext-reattach) | Re-attaches the container element after a detach. |
| [removeAllBefore(ref)](#dom-domcontext-removeallbefore) | Removes all sibling nodes before the given reference marker in one operation. Used as a fast path for clearing entire lists. |
| [removeClasses(tokens)](#dom-domcontext-removeclasses) | Removes classes from the element. |
| [removeRange(startRef, endRef)](#dom-domcontext-removerange) | Removes all sibling nodes between `startRef` and `endRef` (inclusive). Used for bulk removal of keyed entries. |
| [setProvider(mark, value, onUse)](#dom-domcontext-setprovider) | Sets a provider for the given provider mark. |
| [setStyle(name, value)](#dom-domcontext-setstyle) | Sets the style of the element. |
| [setText(text)](#dom-domcontext-settext) | Sets the text content of the current element. |
| [tryGetProvider(mark)](#dom-domcontext-trygetprovider) | Retrieves a provider for the given provider mark, returning `undefined` if the provider is not found instead of throwing. |

---

## dom.domcontext.moverangebefore: DOMContext.moveRangeBefore() method

Moves a range of sibling nodes (from `startRef` to `endRef` inclusive) before `targetRef`. All three refs must be children of the same parent element.

Used by `KeyedForEach` to reorder keyed items without recreating DOM nodes.

**Signature:**```typescript
moveRangeBefore(startRef: DOMContext, endRef: DOMContext, targetRef: DOMContext): void;
```## dom.domcontext.moverangebefore: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| startRef | [DOMContext](#dom-domcontext) | The context whose reference marks the start of the range. |
| endRef | [DOMContext](#dom-domcontext) | The context whose reference marks the end of the range. |
| targetRef | [DOMContext](#dom-domcontext) | The context before which the range will be inserted. |


**Returns:**

void

---

## dom.domcontext.on: DOMContext.on() method

Adds an event listener to the element.

**Signature:**```typescript
on<E>(event: string, listener: (event: E, ctx: DOMContext) => void, options?: HandlerOptions): Clear;
```## dom.domcontext.on: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| event | string | The event to listen for. |
| listener | (event: E, ctx: [DOMContext](#dom-domcontext)) =&gt; void | The listener to call when the event occurs. |
| options | [HandlerOptions](#dom-handleroptions) | _(Optional)_ The options for the event listener. |


**Returns:**

Clear

A function to remove the event listener.

---

## dom.domcontext.reattach: DOMContext.reattach() method

Re-attaches the container element after a detach.

**Signature:**```typescript
reattach(): void;
```
**Returns:**

void

---

## dom.domcontext.removeallbefore: DOMContext.removeAllBefore() method

Removes all sibling nodes before the given reference marker in one operation. Used as a fast path for clearing entire lists.

**Signature:**```typescript
removeAllBefore(ref: DOMContext): void;
```## dom.domcontext.removeallbefore: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| ref | [DOMContext](#dom-domcontext) |  |


**Returns:**

void

---

## dom.domcontext.removeclasses: DOMContext.removeClasses() method

Removes classes from the element.

**Signature:**```typescript
removeClasses(tokens: string[]): void;
```## dom.domcontext.removeclasses: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| tokens | string\[\] | The class names to remove. |


**Returns:**

void

---

## dom.domcontext.removerange: DOMContext.removeRange() method

Removes all sibling nodes between `startRef` and `endRef` (inclusive). Used for bulk removal of keyed entries.

**Signature:**```typescript
removeRange(startRef: DOMContext, endRef: DOMContext): void;
```## dom.domcontext.removerange: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| startRef | [DOMContext](#dom-domcontext) |  |
| endRef | [DOMContext](#dom-domcontext) |  |


**Returns:**

void

---

## dom.domcontext.setprovider: DOMContext.setProvider() method

Sets a provider for the given provider mark.

**Signature:**```typescript
setProvider<T>(mark: ProviderMark<T>, value: T, onUse: undefined | (() => void)): DOMContext;
```## dom.domcontext.setprovider: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| mark | ProviderMark&lt;T&gt; | The provider mark to set the provider for. |
| value | T | The provider to set for the given mark. |
| onUse | undefined \\| (() =&gt; void) |  |


**Returns:**

[DOMContext](#dom-domcontext)

---

## dom.domcontext.setstyle: DOMContext.setStyle() method

Sets the style of the element.

**Signature:**```typescript
setStyle(name: string, value: string): void;
```## dom.domcontext.setstyle: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| name | string | The name of the style to set. |
| value | string | The value of the style to set. |


**Returns:**

void

---

## dom.domcontext.settext: DOMContext.setText() method

Sets the text content of the current element.

**Signature:**```typescript
setText(text: Primitive): void;
```## dom.domcontext.settext: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| text | Primitive | The text content to set. |


**Returns:**

void

---

## dom.domcontext.trygetprovider: DOMContext.tryGetProvider() method

Retrieves a provider for the given provider mark, returning `undefined` if the provider is not found instead of throwing.

**Signature:**```typescript
tryGetProvider<T>(mark: ProviderMark<T>): {
        value: T;
        onUse?: () => void;
    } | undefined;
```## dom.domcontext.trygetprovider: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| mark | ProviderMark&lt;T&gt; | The provider mark to retrieve the provider for. |


**Returns:**

{ value: T; onUse?: () =&gt; void; } \| undefined

The provider value and optional onUse callback, or `undefined` if not found.

---

## dom.domnode: DOMNode() function

Creates a renderable DOM node.

**Signature:**```typescript
DOMNode: (node: Node) => Renderable<BrowserContext>
```## dom.domnode: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| node | Node | The DOM node to render. |


**Returns:**

[Renderable](#dom-renderable)&lt;[BrowserContext](#dom-browsercontext)&gt;

A renderable object that can be used to remove the rendered node from the DOM.

---

## dom.el: El() function

Creates a Renderable that represents an HTML element.

**Signature:**```typescript
El: (tagName: string, ...children: TNode[]) => Renderable
```## dom.el: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| tagName | string | The tag name of the HTML element. |
| children | [TNode](#dom-tnode)\[\] | The child nodes of the HTML element. |


**Returns:**

[Renderable](#dom-renderable)

A renderable object that creates and appends the HTML element to the DOM.

---

## dom.elns: ElNS() function

Creates a renderable object that represents an element in the DOM with a specified namespace.

**Signature:**```typescript
ElNS: (tagName: string, namespace: string, ...children: TNode[]) => Renderable
```## dom.elns: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| tagName | string | The name of the HTML tag for the element. |
| namespace | string | The namespace of the element. |
| children | [TNode](#dom-tnode)\[\] | The child nodes of the element. |


**Returns:**

[Renderable](#dom-renderable)

A renderable object that creates and appends the element to the DOM.

---

## dom.emit: emit() function

Creates an event handler that calls the provided function with the event as an argument.

**Signature:**```typescript
emit: (fn: (event: Event) => void, options?: EmitOptions) => (event: Event) => void
```## dom.emit: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (event: Event) =&gt; void | The function to call when the event is triggered. |
| options | [EmitOptions](#dom-emitoptions) | _(Optional)_ |


**Returns:**

(event: Event) =&gt; void

An event handler function that can be used with event listeners.

---

## dom.emitchecked: emitChecked() function

Creates an event handler that extracts and emits the checked state from a checkbox or radio input.

This utility simplifies handling checkbox and radio button state changes by automatically extracting the `checked` property from the target element.

**Signature:**```typescript
emitChecked: (fn: (checked: boolean, event: Event) => void, options?: EmitOptions) => (event: Event) => void
```## dom.emitchecked: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (checked: boolean, event: Event) =&gt; void | Callback function that receives the input element's checked state |
| options | [EmitOptions](#dom-emitoptions) | _(Optional)_ |


**Returns:**

(event: Event) =&gt; void

Event handler function that can be used with event listeners

## dom.emitchecked: Example 1```typescript
const isEnabled = prop(false)

html.input(
  attr.type('checkbox'),
  attr.checked(isEnabled),
  on.change(emitChecked(checked => isEnabled.value = checked))
)
```

## dom.emitchecked: Example 2


```typescript
// With radio buttons
const selectedOption = prop('')

html.div(
  html.label(
    html.input(
      attr.type('radio'),
      attr.name('option'),
      attr.value('A'),
      on.change(emitChecked(checked => {
        if (checked) selectedOption.value = 'A'
      }))
    ),
    'Option A'
  ),
  html.label(
    html.input(
      attr.type('radio'),
      attr.name('option'),
      attr.value('B'),
      on.change(emitChecked(checked => {
        if (checked) selectedOption.value = 'B'
      }))
    ),
    'Option B'
  )
)
```

---

## dom.emitoptions: EmitOptions type

Options for event handlers.

**Signature:**```typescript
export type EmitOptions = {
    preventDefault?: boolean;
    stopPropagation?: boolean;
    stopImmediatePropagation?: boolean;
};
```

---

## dom.emittarget: emitTarget() function

Creates an event handler that extracts and emits the target element from an event.

**Signature:**```typescript
emitTarget: <EL extends HTMLElement>(fn: (element: EL, event: Event) => void, options?: EmitOptions) => (event: Event) => void
```## dom.emittarget: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (element: EL, event: Event) =&gt; void | Callback function that receives the target element |
| options | [EmitOptions](#dom-emitoptions) | _(Optional)_ |


**Returns:**

(event: Event) =&gt; void

Event handler function that can be used with event listeners

## dom.emittarget: Example```typescript
html.input(
  on.input(emitTarget((input) => {
    console.log('Input value:', input.value)
  }))
)
```

---

## dom.emitvalue: emitValue() function

Creates an event handler that extracts and emits the string value from an input element.

This utility simplifies handling input events by automatically extracting the value from the target element and passing it to your callback function.

**Signature:**```typescript
emitValue: (fn: (text: string, event: Event) => void, options?: EmitOptions) => (event: Event) => void
```## dom.emitvalue: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (text: string, event: Event) =&gt; void | Callback function that receives the input element's string value |
| options | [EmitOptions](#dom-emitoptions) | _(Optional)_ |


**Returns:**

(event: Event) =&gt; void

Event handler function that can be used with event listeners

## dom.emitvalue: Example 1```typescript
const name = prop('')

html.input(
  attr.value(name),
  on.input(emitValue(value => name.value = value))
)
```

## dom.emitvalue: Example 2


```typescript
// With textarea
const description = prop('')

html.textarea(
  attr.value(description),
  on.input(emitValue(value => {
    description.value = value
    console.log('Description updated:', value)
  }))
)
```

---

## dom.emitvalueasdate: emitValueAsDate() function

Converts the value of an HTML input element to a Date object and emits it using the provided callback function.

**Signature:**```typescript
emitValueAsDate: (fn: (date: Date, event: Event) => void, options?: EmitOptions) => (event: Event) => void
```## dom.emitvalueasdate: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (date: Date, event: Event) =&gt; void | The callback function to be called with the converted Date object. |
| options | [EmitOptions](#dom-emitoptions) | _(Optional)_ |


**Returns:**

(event: Event) =&gt; void

A function that can be used as an event handler for input events.

---

## dom.emitvalueasdatetime: emitValueAsDateTime() function

Emits the value of an HTMLInputElement as a Date object.

**Signature:**```typescript
emitValueAsDateTime: (fn: (date: Date, event: Event) => void, options?: EmitOptions) => (event: Event) => void
```## dom.emitvalueasdatetime: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (date: Date, event: Event) =&gt; void | The callback function to be called with the emitted Date object. |
| options | [EmitOptions](#dom-emitoptions) | _(Optional)_ |


**Returns:**

(event: Event) =&gt; void

The event handler function.

---

## dom.emitvalueasnullabledate: emitValueAsNullableDate() function

Converts the value of an HTML input element to a Date object or null and emits it using the provided callback function.

**Signature:**```typescript
emitValueAsNullableDate: (fn: (date: Date | null, event: Event) => void, options?: EmitOptions) => (event: Event) => void
```## dom.emitvalueasnullabledate: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (date: Date \\| null, event: Event) =&gt; void | The callback function to be called with the converted Date object or null. |
| options | [EmitOptions](#dom-emitoptions) | _(Optional)_ |


**Returns:**

(event: Event) =&gt; void

A function that can be used as an event handler for input events.

---

## dom.emitvalueasnullabledatetime: emitValueAsNullableDateTime() function

Emits the value of an HTMLInputElement as a Date object or null.

**Signature:**```typescript
emitValueAsNullableDateTime: (fn: (date: Date | null, event: Event) => void, options?: EmitOptions) => (event: Event) => void
```## dom.emitvalueasnullabledatetime: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (date: Date \\| null, event: Event) =&gt; void | The callback function to be called with the emitted Date object or null. |
| options | [EmitOptions](#dom-emitoptions) | _(Optional)_ |


**Returns:**

(event: Event) =&gt; void

The event handler function.

---

## dom.emitvalueasnumber: emitValueAsNumber() function

Creates an event handler that extracts and emits the numeric value from an input element.

This utility automatically converts the input's value to a number using the browser's built-in `valueAsNumber` property, which handles number inputs correctly and returns `NaN` for invalid numeric values.

**Signature:**```typescript
emitValueAsNumber: (fn: (num: number, event: Event) => void, options?: EmitOptions) => (event: Event) => void
```## dom.emitvalueasnumber: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (num: number, event: Event) =&gt; void | Callback function that receives the input element's numeric value (may be NaN) |
| options | [EmitOptions](#dom-emitoptions) | _(Optional)_ |


**Returns:**

(event: Event) =&gt; void

Event handler function that can be used with event listeners

## dom.emitvalueasnumber: Example 1```typescript
const age = prop(0)

html.input(
  attr.type('number'),
  attr.value(age.map(String)),
  on.input(emitValueAsNumber(value => {
    if (!isNaN(value)) {
      age.value = value
    }
  }))
)
```

## dom.emitvalueasnumber: Example 2


```typescript
// With range input
const volume = prop(50)

html.input(
  attr.type('range'),
  attr.min('0'),
  attr.max('100'),
  attr.value(volume.map(String)),
  on.input(emitValueAsNumber(value => volume.value = value))
)
```

---

## dom.empty: Empty variable

**Signature:**```typescript
Empty: import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```

---

## dom.ensure: Ensure() function

**Signature:**```typescript
Ensure: <T>(value: import('@tempots/render').NillifyValue<T>, then: (value: import('@tempots/core').Signal<T & {} extends infer T_1 ? { [P in keyof T_1]: T_1[P]; } : never>) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, otherwise?: (() => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.ensure: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | import('@tempots/render').NillifyValue&lt;T&gt; |  |
| then | (value: import('@tempots/core').Signal&lt;T &amp; {} extends infer T\_1 ? { \[P in keyof T\_1\]: T\_1\[P\]; } : never&gt;) =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |
| otherwise | (() =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;) \\| undefined | _(Optional)_ |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.ensureall: EnsureAll() function

**Signature:**```typescript
EnsureAll: <T extends readonly import('@tempots/core').Value<unknown>[]>(...signals: { [K in keyof T]: import('@tempots/render').NillifyValue<T[K]>; }) => (callback: (...values: { [K_1 in keyof T]: import('@tempots/core').Signal<(T[K_1] extends import('@tempots/core').Value<infer U> ? U : never) & {} extends infer T_1 ? { [P in keyof T_1]: T_1[P]; } : never>; }) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, otherwise?: (() => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.ensureall: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| signals | { \[K in keyof T\]: import('@tempots/render').NillifyValue&lt;T\[K\]&gt;; } |  |


**Returns:**

(callback: (...values: { \[K\_1 in keyof T\]: import('@tempots/core').Signal&lt;(T\[K\_1\] extends import('@tempots/core').Value&lt;infer U&gt; ? U : never) &amp; {} extends infer T\_1 ? { \[P in keyof T\_1\]: T\_1\[P\]; } : never&gt;; }) =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;, otherwise?: (() =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;) \| undefined) =&gt; import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.excludefromstyle: ExcludeFromStyle type

Represents a set of properties or values that are excluded from the CSSStyleDeclaration interface.

**Signature:**```typescript
export type ExcludeFromStyle = 'getPropertyPriority' | 'getPropertyValue' | 'item' | 'removeProperty' | 'setProperty' | 'parentRule' | 'length' | 'name' | number | typeof Symbol.iterator;
```

---

## dom.foreach: ForEach() function

**Signature:**```typescript
ForEach: <T>(value: import('@tempots/core').Value<T[]>, item: (value: import('@tempots/core').Signal<T>, position: import('@tempots/core').ElementPosition) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, separator?: ((pos: import('@tempots/core').ElementPosition) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.foreach: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | import('@tempots/core').Value&lt;T\[\]&gt; |  |
| item | (value: import('@tempots/core').Signal&lt;T&gt;, position: import('@tempots/core').ElementPosition) =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |
| separator | ((pos: import('@tempots/core').ElementPosition) =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;) \\| undefined | _(Optional)_ |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.fragment: Fragment() function

**Signature:**```typescript
Fragment: (...children: import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>[]) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.fragment: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| children | import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;\[\] |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.getwindow: getWindow() function

**Signature:**```typescript
getWindow: () => Window | undefined
```
**Returns:**

Window \| undefined

---

## dom.globalprobe: GlobalProbe variable

**Signature:**```typescript
GlobalProbe: Provider<() => void, ProbeOptions>
```

---

## dom.handleroptions: HandlerOptions type

Options for event listeners.

**Signature:**```typescript
export type HandlerOptions = {
    once?: boolean;
    signal?: AbortSignal;
    passive?: boolean;
    capture?: boolean;
};
```

---

## dom.headlessadapter._constructor_: HeadlessAdapter.(constructor)

Constructs a new instance of the `HeadlessAdapter` class

**Signature:**```typescript
constructor(input: {
        select: (selector: string) => EL[];
        getAttribute: (el: EL, attr: string) => string | null;
        setAttribute: (el: EL, attr: string, value: string | null) => void;
        getClass: (el: EL) => string | null;
        setClass: (el: EL, cls: string | null) => void;
        getStyles: (el: EL) => Record<string, string>;
        setStyles: (el: EL, styles: Record<string, string>) => void;
        appendHTML: (el: EL, html: string) => void;
        getInnerHTML: (el: EL) => string | null;
        setInnerHTML: (el: EL, html: string) => void;
        getInnerText: (el: EL) => string | null;
        setInnerText: (el: EL, text: string) => void;
    });
```## dom.headlessadapter._constructor_: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| { select, getAttribute, setAttribute, getClass, setClass, getStyles, setStyles, appendHTML, getInnerHTML, setInnerHTML, getInnerText, setInnerText, } | (not declared) |  |
| input | { select: (selector: string) =&gt; EL\[\]; getAttribute: (el: EL, attr: string) =&gt; string \\| null; setAttribute: (el: EL, attr: string, value: string \\| null) =&gt; void; getClass: (el: EL) =&gt; string \\| null; setClass: (el: EL, cls: string \\| null) =&gt; void; getStyles: (el: EL) =&gt; Record&lt;string, string&gt;; setStyles: (el: EL, styles: Record&lt;string, string&gt;) =&gt; void; appendHTML: (el: EL, html: string) =&gt; void; getInnerHTML: (el: EL) =&gt; string \\| null; setInnerHTML: (el: EL, html: string) =&gt; void; getInnerText: (el: EL) =&gt; string \\| null; setInnerText: (el: EL, text: string) =&gt; void; } |  |

---

## dom.headlessadapter.appendhtml: HeadlessAdapter.appendHTML property

Appends HTML to an element.

**Signature:**```typescript
readonly appendHTML: (el: EL, html: string) => void;
```

---

## dom.headlessadapter.getattribute: HeadlessAdapter.getAttribute property

Gets the value of an attribute from an element.

**Signature:**```typescript
readonly getAttribute: (el: EL, attr: string) => string | null;
```

---

## dom.headlessadapter.getclass: HeadlessAdapter.getClass property

Gets the class of an element.

**Signature:**```typescript
readonly getClass: (el: EL) => string | null;
```

---

## dom.headlessadapter.getinnerhtml: HeadlessAdapter.getInnerHTML property

Gets the inner HTML of an element.

**Signature:**```typescript
readonly getInnerHTML: (el: EL) => string | null;
```

---

## dom.headlessadapter.getinnertext: HeadlessAdapter.getInnerText property

Gets the inner text of an element.

**Signature:**```typescript
readonly getInnerText: (el: EL) => string | null;
```

---

## dom.headlessadapter.getstyles: HeadlessAdapter.getStyles property

Gets the styles of an element.

**Signature:**```typescript
readonly getStyles: (el: EL) => Record<string, string>;
```

---

## dom.headlessadapter: HeadlessAdapter class

Represents an adapter for headless rendering environments. This class provides methods to interact with elements in a headless context.

This class is used to adapt the HeadlesContext to whatever you want to use to render your final HTML. You can use libraries like cheerio to render your HTML.

For cheerio an adapter could look like this:```ts
const renderWithCheerio = (html: string, root: HeadlessPortal) => {
  const $ = cheerio.load(html)

  const adapter = new HeadlessAdapter<cheerio.Cheerio<any>>({
    select: (selector: string): cheerio.Cheerio<any>[] => [$(selector)],
    getAttribute: (el, name: string) => el.attr(name) ?? null,
    setAttribute: (el, name: string, value: string | null) => {
      if (value === null) {
        el.removeAttr(name)
      } else {
        el.attr(name, value)
      }
    },
    getClass: el => el.attr('class') ?? '',
    setClass: (el, value: string | null) => {
      if (value === null) {
        el.removeAttr('class')
      } else {
        el.attr('class', value)
      }
    },
    getStyles: el => el.attr('style') ?? {},
    setStyles: (el, value: Record<string, string>) => {
      if (Object.keys(value).length === 0) {
        el.removeAttr('style')
      } else {
        el.css(value)
      }
    },
    appendHTML: (el, html) => el.append(html),
    getInnerHTML: el => el.html() ?? '',
    setInnerHTML: (el, html) => el.html(html),
    getInnerText: el => el.text() ?? '',
    setInnerText: (el, text) => el.text(text),
  })

  adapter.setFromRoot(root, true)

  return $.html()
}
```
This function will return the rendered HTML as a string.

**Signature:**

```typescript
export declare class HeadlessAdapter<EL> 
```## dom.headlessadapter: Constructors


| Constructor | Modifiers | Description |
| --- | --- | --- |
| [(constructor)({ select, getAttribute, setAttribute, getClass, setClass, getStyles, setStyles, appendHTML, getInnerHTML, setInnerHTML, getInnerText, setInnerText, }, input)](#dom-headlessadapter-constructor) |  | Constructs a new instance of the `HeadlessAdapter` class |


## dom.headlessadapter: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [appendHTML](#dom-headlessadapter-appendhtml) | `readonly` | (el: EL, html: string) =&gt; void | Appends HTML to an element. |
| [getAttribute](#dom-headlessadapter-getattribute) | `readonly` | (el: EL, attr: string) =&gt; string \\| null | Gets the value of an attribute from an element. |
| [getClass](#dom-headlessadapter-getclass) | `readonly` | (el: EL) =&gt; string \\| null | Gets the class of an element. |
| [getInnerHTML](#dom-headlessadapter-getinnerhtml) | `readonly` | (el: EL) =&gt; string \\| null | Gets the inner HTML of an element. |
| [getInnerText](#dom-headlessadapter-getinnertext) | `readonly` | (el: EL) =&gt; string \\| null | Gets the inner text of an element. |
| [getStyles](#dom-headlessadapter-getstyles) | `readonly` | (el: EL) =&gt; Record&lt;string, string&gt; | Gets the styles of an element. |
| [select](#dom-headlessadapter-select) | `readonly` | (selector: string) =&gt; EL\[\] | Selects elements from the headless environment. |
| [setAttribute](#dom-headlessadapter-setattribute) | `readonly` | (el: EL, attr: string, value: string \\| null) =&gt; void | Sets the value of an attribute on an element. |
| [setClass](#dom-headlessadapter-setclass) | `readonly` | (el: EL, cls: string \\| null) =&gt; void | Sets the class of an element. |
| [setFromRoot](#dom-headlessadapter-setfromroot) | `readonly` | (root: [HeadlessPortal](#dom-headlessportal), setPlaceholders: boolean) =&gt; void | Sets the content of the root element from a HeadlessPortal. Generally this will be the same instance that is returned by `runHeadless`. |
| [setInnerHTML](#dom-headlessadapter-setinnerhtml) | `readonly` | (el: EL, html: string) =&gt; void | Sets the inner HTML of an element. |
| [setInnerText](#dom-headlessadapter-setinnertext) | `readonly` | (el: EL, text: string) =&gt; void | Sets the inner text of an element. |
| [setStyles](#dom-headlessadapter-setstyles) | `readonly` | (el: EL, styles: Record&lt;string, string&gt;) =&gt; void | Sets the styles of an element. |

---

## dom.headlessadapter.select: HeadlessAdapter.select property

Selects elements from the headless environment.

**Signature:**```typescript
readonly select: (selector: string) => EL[];
```

---

## dom.headlessadapter.setattribute: HeadlessAdapter.setAttribute property

Sets the value of an attribute on an element.

**Signature:**```typescript
readonly setAttribute: (el: EL, attr: string, value: string | null) => void;
```

---

## dom.headlessadapter.setclass: HeadlessAdapter.setClass property

Sets the class of an element.

**Signature:**```typescript
readonly setClass: (el: EL, cls: string | null) => void;
```

---

## dom.headlessadapter.setfromroot: HeadlessAdapter.setFromRoot property

Sets the content of the root element from a HeadlessPortal. Generally this will be the same instance that is returned by `runHeadless`.

**Signature:**```typescript
readonly setFromRoot: (root: HeadlessPortal, setPlaceholders: boolean) => void;
```

---

## dom.headlessadapter.setinnerhtml: HeadlessAdapter.setInnerHTML property

Sets the inner HTML of an element.

**Signature:**```typescript
readonly setInnerHTML: (el: EL, html: string) => void;
```

---

## dom.headlessadapter.setinnertext: HeadlessAdapter.setInnerText property

Sets the inner text of an element.

**Signature:**```typescript
readonly setInnerText: (el: EL, text: string) => void;
```

---

## dom.headlessadapter.setstyles: HeadlessAdapter.setStyles property

Sets the styles of an element.

**Signature:**```typescript
readonly setStyles: (el: EL, styles: Record<string, string>) => void;
```

---

## dom.headlesscontainer.currenturl: HeadlessContainer.currentURL property

**Signature:**```typescript
currentURL: Prop<string>;
```

---

## dom.headlesscontainer: HeadlessContainer interface

**Signature:**```typescript
export interface HeadlessContainer 
```## dom.headlesscontainer: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [currentURL](#dom-headlesscontainer-currenturl) |  | Prop&lt;string&gt; |  |

---

## dom.headlesscontext._constructor_: HeadlessContext.(constructor)

Constructs a new instance of the `HeadlessContext` class

**Signature:**```typescript
constructor(element: HeadlessBase, reference: HeadlessNode | undefined, container: HeadlessContainer, providers: Providers);
```## dom.headlesscontext._constructor_: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| element | HeadlessBase |  |
| reference | [HeadlessNode](#dom-headlessnode) \\| undefined |  |
| container | [HeadlessContainer](#dom-headlesscontainer) |  |
| providers | Providers |  |

---

## dom.headlesscontext.addclasses: HeadlessContext.addClasses() method

**Signature:**```typescript
addClasses(tokens: string[]): void;
```## dom.headlesscontext.addclasses: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| tokens | string\[\] |  |


**Returns:**

void

---

## dom.headlesscontext.appendorinsert: HeadlessContext.appendOrInsert() method

**Signature:**```typescript
appendOrInsert(element: HeadlessNode): void;
```## dom.headlesscontext.appendorinsert: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| element | [HeadlessNode](#dom-headlessnode) |  |


**Returns:**

void

---

## dom.headlesscontext.clear: HeadlessContext.clear() method

**Signature:**```typescript
clear(removeTree: boolean): void;
```## dom.headlesscontext.clear: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| removeTree | boolean |  |


**Returns:**

void

---

## dom.headlesscontext.container: HeadlessContext.container property

**Signature:**```typescript
readonly container: HeadlessContainer;
```

---

## dom.headlesscontext.detach: HeadlessContext.detach() method

**Signature:**```typescript
detach(): void;
```
**Returns:**

void

---

## dom.headlesscontext.element: HeadlessContext.element property

**Signature:**```typescript
readonly element: HeadlessBase;
```

---

## dom.headlesscontext.getclasses: HeadlessContext.getClasses() method

**Signature:**```typescript
getClasses(): string[];
```
**Returns:**

string\[\]

---

## dom.headlesscontext.getprovider: HeadlessContext.getProvider() method

**Signature:**```typescript
getProvider<T>(mark: ProviderMark<T>): {
        value: T;
        onUse: (() => void) | undefined;
    };
```## dom.headlesscontext.getprovider: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| mark | ProviderMark&lt;T&gt; |  |


**Returns:**

{ value: T; onUse: (() =&gt; void) \| undefined; }

---

## dom.headlesscontext.getstyle: HeadlessContext.getStyle() method

**Signature:**```typescript
getStyle(name: string): string;
```## dom.headlesscontext.getstyle: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| name | string |  |


**Returns:**

string

---

## dom.headlesscontext.gettext: HeadlessContext.getText() method

**Signature:**```typescript
getText(): string;
```
**Returns:**

string

---

## dom.headlesscontext.isbrowser: HeadlessContext.isBrowser() method

**Signature:**```typescript
isBrowser(): this is BrowserContext;
```
**Returns:**

this is [BrowserContext](#dom-browsercontext)

---

## dom.headlesscontext.isbrowserdom: HeadlessContext.isBrowserDOM() method

**Signature:**```typescript
isBrowserDOM(): this is BrowserContext;
```
**Returns:**

this is [BrowserContext](#dom-browsercontext)

---

## dom.headlesscontext.isheadless: HeadlessContext.isHeadless() method

**Signature:**```typescript
isHeadless(): this is HeadlessContext;
```
**Returns:**

this is [HeadlessContext](#dom-headlesscontext)

---

## dom.headlesscontext.isheadlessdom: HeadlessContext.isHeadlessDOM() method

**Signature:**```typescript
isHeadlessDOM(): this is HeadlessContext;
```
**Returns:**

this is [HeadlessContext](#dom-headlesscontext)

---

## dom.headlesscontext.makeaccessors: HeadlessContext.makeAccessors() method

**Signature:**```typescript
makeAccessors(name: string): {
        get(): unknown;
        set(value: unknown): void;
    };
```## dom.headlesscontext.makeaccessors: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| name | string |  |


**Returns:**

{ get(): unknown; set(value: unknown): void; }

---

## dom.headlesscontext.makechildelement: HeadlessContext.makeChildElement() method

**Signature:**```typescript
makeChildElement(tagName: string, namespace: string | undefined): DOMContext;
```## dom.headlesscontext.makechildelement: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| tagName | string |  |
| namespace | string \\| undefined |  |


**Returns:**

[DOMContext](#dom-domcontext)

---

## dom.headlesscontext.makechildtext: HeadlessContext.makeChildText() method

**Signature:**```typescript
makeChildText(text: Primitive): DOMContext;
```## dom.headlesscontext.makechildtext: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| text | Primitive |  |


**Returns:**

[DOMContext](#dom-domcontext)

---

## dom.headlesscontext.makemarker: HeadlessContext.makeMarker() method

**Signature:**```typescript
makeMarker(): DOMContext;
```
**Returns:**

[DOMContext](#dom-domcontext)

---

## dom.headlesscontext.makeportal: HeadlessContext.makePortal() method

**Signature:**```typescript
makePortal(selector: string | HTMLElement): DOMContext;
```## dom.headlesscontext.makeportal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| selector | string \\| HTMLElement |  |


**Returns:**

[DOMContext](#dom-domcontext)

---

## dom.headlesscontext.makeref: HeadlessContext.makeRef() method

**Signature:**```typescript
makeRef(): DOMContext;
```
**Returns:**

[DOMContext](#dom-domcontext)

---

## dom.headlesscontext: HeadlessContext class

**Signature:**```typescript
export declare class HeadlessContext implements DOMContext 
```**Implements:** [DOMContext](#dom-domcontext)

## dom.headlesscontext: Constructors


| Constructor | Modifiers | Description |
| --- | --- | --- |
| [(constructor)(element, reference, container, providers)](#dom-headlesscontext-constructor) |  | Constructs a new instance of the `HeadlessContext` class |


## dom.headlesscontext: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [container](#dom-headlesscontext-container) | `readonly` | [HeadlessContainer](#dom-headlesscontainer) |  |
| [element](#dom-headlesscontext-element) | `readonly` | HeadlessBase |  |
| [providers](#dom-headlesscontext-providers) | `readonly` | Providers |  |
| [reference](#dom-headlesscontext-reference) | `readonly` | [HeadlessNode](#dom-headlessnode) \\| undefined |  |


## dom.headlesscontext: Methods


| Method | Modifiers | Description |
| --- | --- | --- |
| [addClasses(tokens)](#dom-headlesscontext-addclasses) |  |  |
| [appendOrInsert(element)](#dom-headlesscontext-appendorinsert) |  |  |
| [clear(removeTree)](#dom-headlesscontext-clear) |  |  |
| [detach()](#dom-headlesscontext-detach) |  |  |
| [getClasses()](#dom-headlesscontext-getclasses) |  |  |
| [getProvider(mark)](#dom-headlesscontext-getprovider) |  |  |
| [getStyle(name)](#dom-headlesscontext-getstyle) |  |  |
| [getText()](#dom-headlesscontext-gettext) |  |  |
| [isBrowser()](#dom-headlesscontext-isbrowser) |  |  |
| [isBrowserDOM()](#dom-headlesscontext-isbrowserdom) |  |  |
| [isHeadless()](#dom-headlesscontext-isheadless) |  |  |
| [isHeadlessDOM()](#dom-headlesscontext-isheadlessdom) |  |  |
| [makeAccessors(name)](#dom-headlesscontext-makeaccessors) |  |  |
| [makeChildElement(tagName, namespace)](#dom-headlesscontext-makechildelement) |  |  |
| [makeChildText(text)](#dom-headlesscontext-makechildtext) |  |  |
| [makeMarker()](#dom-headlesscontext-makemarker) |  |  |
| [makePortal(selector)](#dom-headlesscontext-makeportal) |  |  |
| [makeRef()](#dom-headlesscontext-makeref) |  |  |
| [moveRangeBefore(startRef, endRef, targetRef)](#dom-headlesscontext-moverangebefore) |  |  |
| [on(event, listener)](#dom-headlesscontext-on) |  |  |
| [reattach()](#dom-headlesscontext-reattach) |  |  |
| [removeAllBefore(ref)](#dom-headlesscontext-removeallbefore) |  |  |
| [removeClasses(tokens)](#dom-headlesscontext-removeclasses) |  |  |
| [removeRange(startRef, endRef)](#dom-headlesscontext-removerange) |  |  |
| [setProvider(mark, value, onUse)](#dom-headlesscontext-setprovider) |  | Sets a provider for the given provider mark. |
| [setStyle(name, value)](#dom-headlesscontext-setstyle) |  |  |
| [setText(text)](#dom-headlesscontext-settext) |  |  |
| [tryGetProvider(mark)](#dom-headlesscontext-trygetprovider) |  |  |

---

## dom.headlesscontext.moverangebefore: HeadlessContext.moveRangeBefore() method

**Signature:**```typescript
moveRangeBefore(startRef: DOMContext, endRef: DOMContext, targetRef: DOMContext): void;
```## dom.headlesscontext.moverangebefore: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| startRef | [DOMContext](#dom-domcontext) |  |
| endRef | [DOMContext](#dom-domcontext) |  |
| targetRef | [DOMContext](#dom-domcontext) |  |


**Returns:**

void

---

## dom.headlesscontext.on: HeadlessContext.on() method

**Signature:**```typescript
on<E>(event: string, listener: (event: E, ctx: HeadlessContext) => void): Clear;
```## dom.headlesscontext.on: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| event | string |  |
| listener | (event: E, ctx: [HeadlessContext](#dom-headlesscontext)) =&gt; void |  |


**Returns:**

Clear

---

## dom.headlesscontext.providers: HeadlessContext.providers property

**Signature:**```typescript
readonly providers: Providers;
```

---

## dom.headlesscontext.reattach: HeadlessContext.reattach() method

**Signature:**```typescript
reattach(): void;
```
**Returns:**

void

---

## dom.headlesscontext.reference: HeadlessContext.reference property

**Signature:**```typescript
readonly reference: HeadlessNode | undefined;
```

---

## dom.headlesscontext.removeallbefore: HeadlessContext.removeAllBefore() method

**Signature:**```typescript
removeAllBefore(ref: DOMContext): void;
```## dom.headlesscontext.removeallbefore: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| ref | [DOMContext](#dom-domcontext) |  |


**Returns:**

void

---

## dom.headlesscontext.removeclasses: HeadlessContext.removeClasses() method

**Signature:**```typescript
removeClasses(tokens: string[]): void;
```## dom.headlesscontext.removeclasses: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| tokens | string\[\] |  |


**Returns:**

void

---

## dom.headlesscontext.removerange: HeadlessContext.removeRange() method

**Signature:**```typescript
removeRange(startRef: DOMContext, endRef: DOMContext): void;
```## dom.headlesscontext.removerange: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| startRef | [DOMContext](#dom-domcontext) |  |
| endRef | [DOMContext](#dom-domcontext) |  |


**Returns:**

void

---

## dom.headlesscontext.setprovider: HeadlessContext.setProvider() method

Sets a provider for the given provider mark.

**Signature:**```typescript
setProvider<T>(mark: ProviderMark<T>, value: T, onUse: undefined | (() => void)): DOMContext;
```## dom.headlesscontext.setprovider: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| mark | ProviderMark&lt;T&gt; | The provider mark to set the provider for. |
| value | T | The provider to set for the given mark. |
| onUse | undefined \\| (() =&gt; void) |  |


**Returns:**

[DOMContext](#dom-domcontext)

A new `DOMContext` instance with the specified provider.

---

## dom.headlesscontext.setstyle: HeadlessContext.setStyle() method

**Signature:**```typescript
setStyle(name: string, value: string): void;
```## dom.headlesscontext.setstyle: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| name | string |  |
| value | string |  |


**Returns:**

void

---

## dom.headlesscontext.settext: HeadlessContext.setText() method

**Signature:**```typescript
setText(text: Primitive): void;
```## dom.headlesscontext.settext: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| text | Primitive |  |


**Returns:**

void

---

## dom.headlesscontext.trygetprovider: HeadlessContext.tryGetProvider() method

**Signature:**```typescript
tryGetProvider<T>(mark: ProviderMark<T>): {
        value: T;
        onUse: (() => void) | undefined;
    } | undefined;
```## dom.headlesscontext.trygetprovider: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| mark | ProviderMark&lt;T&gt; |  |


**Returns:**

{ value: T; onUse: (() =&gt; void) \| undefined; } \| undefined

---

## dom.headlesselement._constructor_: HeadlessElement.(constructor)

Constructs a new instance of the `HeadlessElement` class

**Signature:**```typescript
constructor(tagName: string, namespace: string | undefined, parent: HeadlessBase | undefined);
```## dom.headlesselement._constructor_: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| tagName | string |  |
| namespace | string \\| undefined |  |
| parent | HeadlessBase \\| undefined |  |

---

## dom.headlesselement.isportal: HeadlessElement.isPortal() method

**Signature:**```typescript
isPortal(): this is HeadlessPortal;
```
**Returns:**

this is [HeadlessPortal](#dom-headlessportal)

---

## dom.headlesselement: HeadlessElement class

**Signature:**```typescript
export declare class HeadlessElement extends HeadlessBase 
```**Extends:** HeadlessBase

## dom.headlesselement: Constructors


| Constructor | Modifiers | Description |
| --- | --- | --- |
| [(constructor)(tagName, namespace, parent)](#dom-headlesselement-constructor) |  | Constructs a new instance of the `HeadlessElement` class |


## dom.headlesselement: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [namespace](#dom-headlesselement-namespace) | `readonly` | string \\| undefined |  |
| [tagName](#dom-headlesselement-tagname) | `readonly` | string |  |


## dom.headlesselement: Methods


| Method | Modifiers | Description |
| --- | --- | --- |
| [isPortal()](#dom-headlesselement-isportal) |  |  |
| [toHTML(generatePlaceholders)](#dom-headlesselement-tohtml) |  |  |
| [toHTMLStream(options)](#dom-headlesselement-tohtmlstream) |  | Generates HTML output as an async stream of string chunks. Yields the opening tag, then each child's content, then the closing tag. |

---

## dom.headlesselement.namespace: HeadlessElement.namespace property

**Signature:**```typescript
readonly namespace: string | undefined;
```

---

## dom.headlesselement.tagname: HeadlessElement.tagName property

**Signature:**```typescript
readonly tagName: string;
```

---

## dom.headlesselement.tohtml: HeadlessElement.toHTML() method

**Signature:**```typescript
toHTML(generatePlaceholders?: boolean): string;
```## dom.headlesselement.tohtml: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| generatePlaceholders | boolean | _(Optional)_ |


**Returns:**

string

---

## dom.headlesselement.tohtmlstream: HeadlessElement.toHTMLStream() method

Generates HTML output as an async stream of string chunks. Yields the opening tag, then each child's content, then the closing tag.

**Signature:**```typescript
toHTMLStream(options?: StreamOptions): AsyncGenerator<string>;
```## dom.headlesselement.tohtmlstream: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| options | [StreamOptions](#dom-streamoptions) | _(Optional)_ Options for streaming output. String chunks of HTML content. |


**Returns:**

AsyncGenerator&lt;string&gt;

---

## dom.headlessnode: HeadlessNode type

**Signature:**```typescript
export type HeadlessNode = HeadlessElement | HeadlessPortal | HeadlessText;
```
**References:** [HeadlessElement](#dom-headlesselement), [HeadlessPortal](#dom-headlessportal), [HeadlessText](#dom-headlesstext)

---

## dom.headlessoptions: HeadlessOptions type

Options for running a headless environment.

**Signature:**```typescript
export type HeadlessOptions = {
    startUrl?: Value<string>;
    selector: string;
    providers?: Providers;
};
```

---

## dom.headlessportal._constructor_: HeadlessPortal.(constructor)

Constructs a new instance of the `HeadlessPortal` class

**Signature:**```typescript
constructor(selector: string | HTMLElement, parent: HeadlessBase | undefined);
```## dom.headlessportal._constructor_: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| selector | string \\| HTMLElement |  |
| parent | HeadlessBase \\| undefined |  |

---

## dom.headlessportal.contenttohtml: HeadlessPortal.contentToHTML() method

**Signature:**```typescript
contentToHTML(generatePlaceholders?: boolean): string;
```## dom.headlessportal.contenttohtml: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| generatePlaceholders | boolean | _(Optional)_ |


**Returns:**

string

---

## dom.headlessportal.contenttohtmlstream: HeadlessPortal.contentToHTMLStream() method

Streams the portal's content HTML. Unlike toHTMLStream, this yields the actual content for rendering at the target location.

**Signature:**```typescript
contentToHTMLStream(options?: StreamOptions): AsyncGenerator<string>;
```## dom.headlessportal.contenttohtmlstream: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| options | [StreamOptions](#dom-streamoptions) | _(Optional)_ Options for streaming output. String chunks of the portal's content. |


**Returns:**

AsyncGenerator&lt;string&gt;

---

## dom.headlessportal.isportal: HeadlessPortal.isPortal() method

**Signature:**```typescript
isPortal(): this is HeadlessPortal;
```
**Returns:**

this is [HeadlessPortal](#dom-headlessportal)

---

## dom.headlessportal: HeadlessPortal class

**Signature:**```typescript
export declare class HeadlessPortal extends HeadlessBase 
```**Extends:** HeadlessBase

## dom.headlessportal: Constructors


| Constructor | Modifiers | Description |
| --- | --- | --- |
| [(constructor)(selector, parent)](#dom-headlessportal-constructor) |  | Constructs a new instance of the `HeadlessPortal` class |


## dom.headlessportal: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [selector](#dom-headlessportal-selector) | `readonly` | string \\| HTMLElement |  |


## dom.headlessportal: Methods


| Method | Modifiers | Description |
| --- | --- | --- |
| [contentToHTML(generatePlaceholders)](#dom-headlessportal-contenttohtml) |  |  |
| [contentToHTMLStream(options)](#dom-headlessportal-contenttohtmlstream) |  | Streams the portal's content HTML. Unlike toHTMLStream, this yields the actual content for rendering at the target location. |
| [isPortal()](#dom-headlessportal-isportal) |  |  |
| [toHTML()](#dom-headlessportal-tohtml) |  |  |
| [toHTMLStream(options)](#dom-headlessportal-tohtmlstream) |  | Portals don't render inline - they render at their target selector. This method yields nothing for the inline position. |

---

## dom.headlessportal.selector: HeadlessPortal.selector property

**Signature:**```typescript
readonly selector: string | HTMLElement;
```

---

## dom.headlessportal.tohtml: HeadlessPortal.toHTML() method

**Signature:**```typescript
toHTML(): string;
```
**Returns:**

string

---

## dom.headlessportal.tohtmlstream: HeadlessPortal.toHTMLStream() method

Portals don't render inline - they render at their target selector. This method yields nothing for the inline position.

**Signature:**```typescript
toHTMLStream(options?: StreamOptions): AsyncGenerator<string>;
```## dom.headlessportal.tohtmlstream: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| options | [StreamOptions](#dom-streamoptions) | _(Optional)_ |


**Returns:**

AsyncGenerator&lt;string&gt;

---

## dom.headlesstext._constructor_: HeadlessText.(constructor)

Constructs a new instance of the `HeadlessText` class

**Signature:**```typescript
constructor(text: string);
```## dom.headlesstext._constructor_: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| text | string |  |

---

## dom.headlesstext.gettext: HeadlessText.getText() method

**Signature:**```typescript
getText(): string;
```
**Returns:**

string

---

## dom.headlesstext.id: HeadlessText.id property

**Signature:**```typescript
readonly id: string;
```

---

## dom.headlesstext.iselement: HeadlessText.isElement() method

**Signature:**```typescript
isElement(): this is HeadlessElement;
```
**Returns:**

this is [HeadlessElement](#dom-headlesselement)

---

## dom.headlesstext.istext: HeadlessText.isText() method

**Signature:**```typescript
isText(): this is HeadlessText;
```
**Returns:**

this is [HeadlessText](#dom-headlesstext)

---

## dom.headlesstext: HeadlessText class

**Signature:**```typescript
export declare class HeadlessText 
```## dom.headlesstext: Constructors


| Constructor | Modifiers | Description |
| --- | --- | --- |
| [(constructor)(text)](#dom-headlesstext-constructor) |  | Constructs a new instance of the `HeadlessText` class |


## dom.headlesstext: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [id](#dom-headlesstext-id) | `readonly` | string |  |
| [text](#dom-headlesstext-text) |  | string |  |


## dom.headlesstext: Methods


| Method | Modifiers | Description |
| --- | --- | --- |
| [getText()](#dom-headlesstext-gettext) |  |  |
| [isElement()](#dom-headlesstext-iselement) |  |  |
| [isText()](#dom-headlesstext-istext) |  |  |
| [toHTML()](#dom-headlesstext-tohtml) |  |  |
| [toHTMLStream(options)](#dom-headlesstext-tohtmlstream) |  | Streams the text content as a single chunk. |

---

## dom.headlesstext.text: HeadlessText.text property

**Signature:**```typescript
text: string;
```

---

## dom.headlesstext.tohtml: HeadlessText.toHTML() method

**Signature:**```typescript
toHTML(): string;
```
**Returns:**

string

---

## dom.headlesstext.tohtmlstream: HeadlessText.toHTMLStream() method

Streams the text content as a single chunk.

**Signature:**```typescript
toHTMLStream(options?: StreamOptions): AsyncGenerator<string>;
```## dom.headlesstext.tohtmlstream: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| options | [StreamOptions](#dom-streamoptions) | _(Optional)_ Options (unused for text nodes, kept for API consistency). The text content. |


**Returns:**

AsyncGenerator&lt;string&gt;

---

## dom.html: html variable

A convenience object to create Renderables for HTML elements.

**Signature:**```typescript
html: {
    a: (...children: TNode[]) => Renderable;
    abbr: (...children: TNode[]) => Renderable;
    address: (...children: TNode[]) => Renderable;
    area: (...children: TNode[]) => Renderable;
    article: (...children: TNode[]) => Renderable;
    aside: (...children: TNode[]) => Renderable;
    audio: (...children: TNode[]) => Renderable;
    b: (...children: TNode[]) => Renderable;
    base: (...children: TNode[]) => Renderable;
    bdi: (...children: TNode[]) => Renderable;
    bdo: (...children: TNode[]) => Renderable;
    blockquote: (...children: TNode[]) => Renderable;
    body: (...children: TNode[]) => Renderable;
    br: (...children: TNode[]) => Renderable;
    button: (...children: TNode[]) => Renderable;
    canvas: (...children: TNode[]) => Renderable;
    caption: (...children: TNode[]) => Renderable;
    cite: (...children: TNode[]) => Renderable;
    code: (...children: TNode[]) => Renderable;
    col: (...children: TNode[]) => Renderable;
    colgroup: (...children: TNode[]) => Renderable;
    data: (...children: TNode[]) => Renderable;
    datalist: (...children: TNode[]) => Renderable;
    dd: (...children: TNode[]) => Renderable;
    del: (...children: TNode[]) => Renderable;
    details: (...children: TNode[]) => Renderable;
    dfn: (...children: TNode[]) => Renderable;
    dialog: (...children: TNode[]) => Renderable;
    div: (...children: TNode[]) => Renderable;
    dl: (...children: TNode[]) => Renderable;
    dt: (...children: TNode[]) => Renderable;
    em: (...children: TNode[]) => Renderable;
    embed: (...children: TNode[]) => Renderable;
    fencedframe: (...children: TNode[]) => Renderable;
    fieldset: (...children: TNode[]) => Renderable;
    figcaption: (...children: TNode[]) => Renderable;
    figure: (...children: TNode[]) => Renderable;
    footer: (...children: TNode[]) => Renderable;
    form: (...children: TNode[]) => Renderable;
    h1: (...children: TNode[]) => Renderable;
    h2: (...children: TNode[]) => Renderable;
    h3: (...children: TNode[]) => Renderable;
    h4: (...children: TNode[]) => Renderable;
    h5: (...children: TNode[]) => Renderable;
    h6: (...children: TNode[]) => Renderable;
    head: (...children: TNode[]) => Renderable;
    header: (...children: TNode[]) => Renderable;
    hgroup: (...children: TNode[]) => Renderable;
    hr: (...children: TNode[]) => Renderable;
    html: (...children: TNode[]) => Renderable;
    i: (...children: TNode[]) => Renderable;
    iframe: (...children: TNode[]) => Renderable;
    img: (...children: TNode[]) => Renderable;
    input: (...children: TNode[]) => Renderable;
    ins: (...children: TNode[]) => Renderable;
    kbd: (...children: TNode[]) => Renderable;
    label: (...children: TNode[]) => Renderable;
    legend: (...children: TNode[]) => Renderable;
    li: (...children: TNode[]) => Renderable;
    link: (...children: TNode[]) => Renderable;
    main: (...children: TNode[]) => Renderable;
    map: (...children: TNode[]) => Renderable;
    mark: (...children: TNode[]) => Renderable;
    menu: (...children: TNode[]) => Renderable;
    meta: (...children: TNode[]) => Renderable;
    meter: (...children: TNode[]) => Renderable;
    nav: (...children: TNode[]) => Renderable;
    noscript: (...children: TNode[]) => Renderable;
    object: (...children: TNode[]) => Renderable;
    ol: (...children: TNode[]) => Renderable;
    optgroup: (...children: TNode[]) => Renderable;
    option: (...children: TNode[]) => Renderable;
    output: (...children: TNode[]) => Renderable;
    p: (...children: TNode[]) => Renderable;
    param: (...children: TNode[]) => Renderable;
    picture: (...children: TNode[]) => Renderable;
    portal: (...children: TNode[]) => Renderable;
    pre: (...children: TNode[]) => Renderable;
    progress: (...children: TNode[]) => Renderable;
    q: (...children: TNode[]) => Renderable;
    rp: (...children: TNode[]) => Renderable;
    rt: (...children: TNode[]) => Renderable;
    ruby: (...children: TNode[]) => Renderable;
    s: (...children: TNode[]) => Renderable;
    samp: (...children: TNode[]) => Renderable;
    script: (...children: TNode[]) => Renderable;
    search: (...children: TNode[]) => Renderable;
    section: (...children: TNode[]) => Renderable;
    select: (...children: TNode[]) => Renderable;
    slot: (...children: TNode[]) => Renderable;
    small: (...children: TNode[]) => Renderable;
    source: (...children: TNode[]) => Renderable;
    span: (...children: TNode[]) => Renderable;
    strong: (...children: TNode[]) => Renderable;
    style: (...children: TNode[]) => Renderable;
    sub: (...children: TNode[]) => Renderable;
    summary: (...children: TNode[]) => Renderable;
    sup: (...children: TNode[]) => Renderable;
    table: (...children: TNode[]) => Renderable;
    tbody: (...children: TNode[]) => Renderable;
    td: (...children: TNode[]) => Renderable;
    template: (...children: TNode[]) => Renderable;
    textarea: (...children: TNode[]) => Renderable;
    tfoot: (...children: TNode[]) => Renderable;
    th: (...children: TNode[]) => Renderable;
    thead: (...children: TNode[]) => Renderable;
    time: (...children: TNode[]) => Renderable;
    title: (...children: TNode[]) => Renderable;
    tr: (...children: TNode[]) => Renderable;
    track: (...children: TNode[]) => Renderable;
    u: (...children: TNode[]) => Renderable;
    ul: (...children: TNode[]) => Renderable;
    var: (...children: TNode[]) => Renderable;
    video: (...children: TNode[]) => Renderable;
    wbr: (...children: TNode[]) => Renderable;
}
```

---

## dom.htmlattributes: HTMLAttributes type

Represents the HTML attributes that can be used in an HTML element.

\*\*Security Warning:\*\* Some properties like `innerHTML` and `outerHTML` can introduce Cross-Site Scripting (XSS) vulnerabilities if used with untrusted user input. Always sanitize user-provided content before using these properties.

**Signature:**```typescript
export type HTMLAttributes = {
    accept: string;
    'accept-charset': string;
    accesskey: string;
    action: string;
    align: string;
    allow: string;
    allowfullscreen: boolean;
    allowpaymentrequest: boolean;
    alt: string;
    as: string;
    async: boolean;
    autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
    autocomplete: string;
    autofocus: boolean;
    autoplay: boolean;
    bgcolor: string;
    border: string;
    capture: boolean | 'user' | 'environment';
    charset: string;
    checked: boolean;
    cite: string;
    class: string;
    color: string;
    cols: number;
    colspan: number;
    content: string;
    contenteditable: boolean | 'true' | 'false' | 'plaintext-only';
    controls: string;
    coords: string;
    crossorigin: 'anonymous' | 'use-credentials' | '';
    data: string;
    datetime: string;
    decoding: 'sync' | 'async' | 'auto';
    default: string;
    defer: string;
    dir: 'ltr' | 'rtl' | 'auto';
    dirname: string;
    disabled: boolean;
    download: string;
    draggable: boolean | 'true' | 'false';
    dropzone: string;
    enctype: string;
    enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
    for: string;
    form: string;
    formaction: string;
    formenctype: string;
    formmethod: string;
    formnovalidate: boolean;
    formtarget: string;
    headers: string;
    height: string;
    hidden: 'until-found' | 'hidden' | '' | boolean;
    high: string;
    href: string;
    hreflang: string;
    'http-equiv': string;
    icon: string;
    id: string;
    imagesizes: string;
    imagesrcset: string;
    inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
    integrity: string;
    is: string;
    ismap: string;
    itemid: string;
    itemprop: string;
    itemref: string;
    itemscope: boolean;
    itemtype: string;
    keytype: string;
    kind: string;
    label: string;
    lang: string;
    language: string;
    list: string;
    loading: 'eager' | 'lazy';
    loop: string;
    low: string;
    manifest: string;
    max: number;
    maxlength: number;
    media: string;
    method: string;
    min: number;
    minlength: number;
    multiple: boolean;
    muted: boolean;
    name: string;
    nonce: string;
    novalidate: string;
    open: string;
    optimum: string;
    part: string;
    pattern: string;
    ping: string;
    placeholder: string;
    playsinline: boolean;
    popover: 'auto' | 'manual' | '';
    popovertarget: string;
    popovertargetaction: 'hide' | 'show' | 'toggle';
    poster: string;
    preload: string;
    property: string;
    radiogroup: string;
    readonly: boolean;
    referrerpolicy: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
    rel: string;
    required: string;
    reversed: string;
    role: string;
    rows: number;
    rowspan: number;
    sandbox: string;
    scope: string;
    scoped: string;
    seamless: string;
    selected: boolean;
    shape: string;
    size: number;
    sizes: string;
    slot: string;
    span: string;
    spellcheck: boolean | 'true' | 'false';
    src: string;
    srcdoc: string;
    srclang: string;
    srcset: string;
    start: string;
    step: number;
    style: string;
    tabindex: number;
    target: string;
    title: string;
    translate: 'yes' | 'no';
    type: string;
    usemap: string;
    value: string;
    valueAsNumber: number;
    valueAsDate: Date;
    width: string;
    wrap: string;
    textContent: string;
    innerText: string;
    innerHTML: string;
    outerHTML: string;
};
```

---

## dom.htmlevents: HTMLEvents type

Represents a mapping of HTML event names to their corresponding event types.

**Signature:**```typescript
export type HTMLEvents = {
    abort: Event;
    afterprint: Event;
    animationcancel: AnimationEvent;
    animationend: AnimationEvent;
    animationiteration: AnimationEvent;
    animationstart: AnimationEvent;
    auxclick: MouseEvent;
    beforeinput: InputEvent;
    beforeprint: Event;
    beforeunload: BeforeUnloadEvent;
    blur: FocusEvent;
    cancel: Event;
    canplay: Event;
    canplaythrough: Event;
    change: Event;
    click: MouseEvent;
    close: Event;
    compositionend: CompositionEvent;
    compositionstart: CompositionEvent;
    compositionupdate: CompositionEvent;
    contextmenu: MouseEvent;
    copy: ClipboardEvent;
    cuechange: Event;
    cut: ClipboardEvent;
    dblclick: MouseEvent;
    drag: DragEvent;
    dragend: DragEvent;
    dragenter: DragEvent;
    dragexit: Event;
    dragleave: DragEvent;
    dragover: DragEvent;
    dragstart: DragEvent;
    drop: DragEvent;
    durationchange: Event;
    emptied: Event;
    ended: Event;
    error: ErrorEvent;
    focus: FocusEvent;
    focusin: FocusEvent;
    focusout: FocusEvent;
    formdata: FormDataEvent;
    fullscreenchange: Event;
    fullscreenerror: Event;
    gotpointercapture: PointerEvent;
    hashchange: HashChangeEvent;
    input: Event;
    invalid: Event;
    keydown: KeyboardEvent;
    keypress: KeyboardEvent;
    keyup: KeyboardEvent;
    languagechange: Event;
    load: Event;
    loadeddata: Event;
    loadedmetadata: Event;
    loadend: ProgressEvent;
    loadstart: ProgressEvent;
    lostpointercapture: PointerEvent;
    message: MessageEvent;
    messageerror: MessageEvent;
    mousedown: MouseEvent;
    mouseenter: MouseEvent;
    mouseleave: MouseEvent;
    mousemove: MouseEvent;
    mouseout: MouseEvent;
    mouseover: MouseEvent;
    mouseup: MouseEvent;
    offline: Event;
    online: Event;
    orientationchange: Event;
    pagehide: PageTransitionEvent;
    pageshow: PageTransitionEvent;
    paste: ClipboardEvent;
    pause: Event;
    play: Event;
    playing: Event;
    pointercancel: PointerEvent;
    pointerdown: PointerEvent;
    pointerenter: PointerEvent;
    pointerleave: PointerEvent;
    pointerlockchange: Event;
    pointerlockerror: Event;
    pointermove: PointerEvent;
    pointerout: PointerEvent;
    pointerover: PointerEvent;
    pointerrawupdate: PointerEvent;
    pointerup: PointerEvent;
    popstate: PopStateEvent;
    progress: ProgressEvent;
    ratechange: Event;
    readystatechange: Event;
    rejectionhandled: PromiseRejectionEvent;
    reset: Event;
    resize: UIEvent;
    scroll: Event;
    scrollend: Event;
    securitypolicyviolation: SecurityPolicyViolationEvent;
    seeked: Event;
    seeking: Event;
    select: Event;
    selectionchange: Event;
    selectstart: Event;
    slotchange: Event;
    stalled: Event;
    storage: StorageEvent;
    submit: SubmitEvent;
    suspend: Event;
    timeupdate: Event;
    toggle: Event;
    touchcancel: TouchEvent;
    touchend: TouchEvent;
    touchmove: TouchEvent;
    touchstart: TouchEvent;
    transitioncancel: TransitionEvent;
    transitionend: TransitionEvent;
    transitionrun: TransitionEvent;
    transitionstart: TransitionEvent;
    unhandledrejection: PromiseRejectionEvent;
    unload: Event;
    visibilitychange: Event;
    volumechange: Event;
    waiting: Event;
    wheel: WheelEvent;
};
```

---

## dom.htmltags: HTMLTags type

Represents a mapping of HTML tag names to their corresponding element types.

**Signature:**```typescript
export type HTMLTags = {
    a: HTMLAnchorElement;
    abbr: HTMLElement;
    address: HTMLElement;
    area: HTMLAreaElement;
    article: HTMLElement;
    aside: HTMLElement;
    audio: HTMLAudioElement;
    b: HTMLElement;
    base: HTMLBaseElement;
    bdi: HTMLElement;
    bdo: HTMLElement;
    blockquote: HTMLQuoteElement;
    body: HTMLBodyElement;
    br: HTMLBRElement;
    button: HTMLButtonElement;
    canvas: HTMLCanvasElement;
    caption: HTMLTableCaptionElement;
    cite: HTMLElement;
    code: HTMLElement;
    col: HTMLTableColElement;
    colgroup: HTMLTableColElement;
    data: HTMLDataElement;
    datalist: HTMLDataListElement;
    dd: HTMLElement;
    del: HTMLModElement;
    details: HTMLDetailsElement;
    dfn: HTMLElement;
    dialog: HTMLDialogElement;
    div: HTMLDivElement;
    dl: HTMLDListElement;
    dt: HTMLElement;
    em: HTMLElement;
    embed: HTMLEmbedElement;
    fencedframe: HTMLElement;
    fieldset: HTMLFieldSetElement;
    figcaption: HTMLElement;
    figure: HTMLElement;
    footer: HTMLElement;
    form: HTMLFormElement;
    h1: HTMLHeadingElement;
    h2: HTMLHeadingElement;
    h3: HTMLHeadingElement;
    h4: HTMLHeadingElement;
    h5: HTMLHeadingElement;
    h6: HTMLHeadingElement;
    head: HTMLHeadElement;
    header: HTMLElement;
    hgroup: HTMLElement;
    hr: HTMLHRElement;
    html: HTMLHtmlElement;
    i: HTMLElement;
    iframe: HTMLIFrameElement;
    img: HTMLImageElement;
    input: HTMLInputElement;
    ins: HTMLModElement;
    kbd: HTMLElement;
    label: HTMLLabelElement;
    legend: HTMLLegendElement;
    li: HTMLLIElement;
    link: HTMLLinkElement;
    main: HTMLElement;
    map: HTMLMapElement;
    mark: HTMLElement;
    menu: HTMLMenuElement;
    meta: HTMLMetaElement;
    meter: HTMLMeterElement;
    nav: HTMLElement;
    noscript: HTMLElement;
    object: HTMLObjectElement;
    ol: HTMLOListElement;
    optgroup: HTMLOptGroupElement;
    option: HTMLOptionElement;
    output: HTMLOutputElement;
    p: HTMLParagraphElement;
    param: HTMLParamElement;
    picture: HTMLPictureElement;
    portal: HTMLElement;
    pre: HTMLPreElement;
    progress: HTMLProgressElement;
    q: HTMLQuoteElement;
    rp: HTMLElement;
    rt: HTMLElement;
    ruby: HTMLElement;
    s: HTMLElement;
    samp: HTMLElement;
    script: HTMLScriptElement;
    search: HTMLElement;
    section: HTMLElement;
    select: HTMLSelectElement;
    slot: HTMLSlotElement;
    small: HTMLElement;
    source: HTMLSourceElement;
    span: HTMLSpanElement;
    strong: HTMLElement;
    style: HTMLStyleElement;
    sub: HTMLElement;
    summary: HTMLElement;
    sup: HTMLElement;
    table: HTMLTableElement;
    tbody: HTMLTableSectionElement;
    td: HTMLTableCellElement;
    template: HTMLTemplateElement;
    textarea: HTMLTextAreaElement;
    tfoot: HTMLTableSectionElement;
    th: HTMLTableCellElement;
    thead: HTMLTableSectionElement;
    time: HTMLTimeElement;
    title: HTMLTitleElement;
    tr: HTMLTableRowElement;
    track: HTMLTrackElement;
    u: HTMLElement;
    ul: HTMLUListElement;
    var: HTMLElement;
    video: HTMLVideoElement;
    wbr: HTMLElement;
};
```

---

## dom.hydration_id_attr: HYDRATION\_ID\_ATTR variable

Attribute name for hydration IDs. Used to match server-rendered elements with client-side renderables during hydration.

**Signature:**```typescript
HYDRATION_ID_ATTR = "data-tempo-id"
```

---

## dom.iframe: IFrame() function

Creates an iframe element and optionally renders content into its document.

When children are provided, they are rendered into the iframe's contentDocument. This allows you to create isolated DOM contexts with their own styles and scripts.

**Signature:**```typescript
export declare function IFrame(input?: IFrameOptions, ...children: TNode[]): import('..').Renderable;
```## dom.iframe: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| { src, name, width, height, sandbox, allow, referrerpolicy, loading, iframeChild, onLoad, } | (not declared) | _(Optional)_ |
| input | [IFrameOptions](#dom-iframeoptions) | _(Optional)_ |
| children | [TNode](#dom-tnode)\[\] | Optional content to render inside the iframe's document |


**Returns:**

import('..').[Renderable](#dom-renderable)

A renderable that creates and manages the iframe

## dom.iframe: Example 1```typescript
// Simple iframe with src
IFrame({ src: 'https://example.com', width: 800, height: 600 })
```

## dom.iframe: Example 2


```typescript
// Iframe with rendered content
IFrame(
  { width: 800, height: 600 },
  html.div(
    html.style('body { font-family: sans-serif; }'),
    html.h1('Hello from iframe!'),
    html.p('This content is rendered inside the iframe')
  )
)
```

## dom.iframe: Example 3


```typescript
// Iframe with onLoad callback
IFrame(
  {
    width: 800,
    height: 600,
    onLoad: (iframe, doc) => {
      console.log('Iframe loaded:', doc.title)
    }
  },
  html.div('Content')
)
```

---

## dom.iframeoptions.allow: IFrameOptions.allow property

The allow attribute for the iframe.

**Signature:**```typescript
allow?: Value<string>;
```

---

## dom.iframeoptions.height: IFrameOptions.height property

The height of the iframe.

**Signature:**```typescript
height?: SplitValue<string | number>;
```

---

## dom.iframeoptions.iframechild: IFrameOptions.iframeChild property

Content to attach directly to the iframe's element, not the document body.

**Signature:**```typescript
iframeChild?: TNode;
```

---

## dom.iframeoptions.loading: IFrameOptions.loading property

The loading attribute for the iframe.

**Signature:**```typescript
loading?: Value<'eager' | 'lazy'>;
```

---

## dom.iframeoptions: IFrameOptions interface

**Signature:**```typescript
export interface IFrameOptions 
```## dom.iframeoptions: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [allow?](#dom-iframeoptions-allow) |  | Value&lt;string&gt; | _(Optional)_ The allow attribute for the iframe. |
| [height?](#dom-iframeoptions-height) |  | [SplitValue](#dom-splitvalue)&lt;string \\| number&gt; | _(Optional)_ The height of the iframe. |
| [iframeChild?](#dom-iframeoptions-iframechild) |  | [TNode](#dom-tnode) | _(Optional)_ Content to attach directly to the iframe's element, not the document body. |
| [loading?](#dom-iframeoptions-loading) |  | Value&lt;'eager' \\| 'lazy'&gt; | _(Optional)_ The loading attribute for the iframe. |
| [name?](#dom-iframeoptions-name) |  | Value&lt;string&gt; | _(Optional)_ The name of the iframe. |
| [onLoad?](#dom-iframeoptions-onload) |  | (iframe: HTMLIFrameElement) =&gt; void | _(Optional)_ Callback function that is called when the iframe is loaded. Receives the iframe element and its contentDocument. |
| [referrerpolicy?](#dom-iframeoptions-referrerpolicy) |  | Value&lt;[ReferrerPolicy](#dom-referrerpolicy2)&gt; | _(Optional)_ The referrerpolicy attribute for the iframe. |
| [sandbox?](#dom-iframeoptions-sandbox) |  | Value&lt;string&gt; | _(Optional)_ The sandbox attribute for the iframe. |
| [src?](#dom-iframeoptions-src) |  | Value&lt;string&gt; | _(Optional)_ The URL of the page to embed in the iframe. |
| [width?](#dom-iframeoptions-width) |  | [SplitValue](#dom-splitvalue)&lt;string \\| number&gt; | _(Optional)_ The width of the iframe. |

---

## dom.iframeoptions.name: IFrameOptions.name property

The name of the iframe.

**Signature:**```typescript
name?: Value<string>;
```

---

## dom.iframeoptions.onload: IFrameOptions.onLoad property

Callback function that is called when the iframe is loaded. Receives the iframe element and its contentDocument.

**Signature:**```typescript
onLoad?: (iframe: HTMLIFrameElement) => void;
```

---

## dom.iframeoptions.referrerpolicy: IFrameOptions.referrerpolicy property

The referrerpolicy attribute for the iframe.

**Signature:**```typescript
referrerpolicy?: Value<ReferrerPolicy>;
```

---

## dom.iframeoptions.sandbox: IFrameOptions.sandbox property

The sandbox attribute for the iframe.

**Signature:**```typescript
sandbox?: Value<string>;
```

---

## dom.iframeoptions.src: IFrameOptions.src property

The URL of the page to embed in the iframe.

**Signature:**```typescript
src?: Value<string>;
```

---

## dom.iframeoptions.width: IFrameOptions.width property

The width of the iframe.

**Signature:**```typescript
width?: SplitValue<string | number>;
```

---

## dom.inertia: Inertia() function

A Tempo renderable that attaches inertia-based pointer drag handlers to the parent element. On pointer up, the surface continues scrolling with exponential velocity decay.

**Signature:**```typescript
Inertia: (onDelta: (dx: number, dy: number) => void, config?: InertiaConfig) => Renderable
```## dom.inertia: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| onDelta | (dx: number, dy: number) =&gt; void | Called with `(dx, dy)` deltas each frame during drag and decay. |
| config | [InertiaConfig](#dom-inertiaconfig) | _(Optional)_ Optional friction and threshold settings. |


**Returns:**

[Renderable](#dom-renderable)

A renderable.

---

## dom.inertiaconfig: InertiaConfig type

Configuration for inertia scroll behavior.

**Signature:**```typescript
export type InertiaConfig = {
    readonly friction?: number;
    readonly minVelocity?: number;
};
```

---

## dom.inertiahandler: InertiaHandler type

Handle returned by [createInertiaHandler()](#dom-createinertiahandler).

**Signature:**```typescript
export type InertiaHandler = {
    track: (x: number, y: number) => void;
    release: () => RafLoopHandle;
};
```
**References:** [RafLoopHandle](#dom-rafloophandle)

---

## dom.input: input variable

A convenience object to create Renderables for HTMLInput elements.

It automatically creates an attribute with the specified type

**Signature:**```typescript
input: {
    number: (...children: TNode[]) => Renderable;
    date: (...children: TNode[]) => Renderable;
    time: (...children: TNode[]) => Renderable;
    text: (...children: TNode[]) => Renderable;
    color: (...children: TNode[]) => Renderable;
    search: (...children: TNode[]) => Renderable;
    hidden: (...children: TNode[]) => Renderable;
    tel: (...children: TNode[]) => Renderable;
    email: (...children: TNode[]) => Renderable;
    url: (...children: TNode[]) => Renderable;
    checkbox: (...children: TNode[]) => Renderable;
    radio: (...children: TNode[]) => Renderable;
    file: (...children: TNode[]) => Renderable;
    password: (...children: TNode[]) => Renderable;
    button: (...children: TNode[]) => Renderable;
    submit: (...children: TNode[]) => Renderable;
    reset: (...children: TNode[]) => Renderable;
    range: (...children: TNode[]) => Renderable;
    image: (...children: TNode[]) => Renderable;
    month: (...children: TNode[]) => Renderable;
    week: (...children: TNode[]) => Renderable;
    "datetime-local": (...children: TNode[]) => Renderable;
}
```

## dom.input: Example


```ts
input.text() // equivalent to html.input(attr.type('text'))
```

---

## dom.inputtypes: InputTypes type

Represents the possible input types for HTML input elements.

**Signature:**```typescript
export type InputTypes = 'text' | 'number' | 'checkbox' | 'radio' | 'file' | 'password' | 'button' | 'submit' | 'reset' | 'date' | 'range' | 'color' | 'hidden' | 'image' | 'month' | 'time' | 'week' | 'email' | 'tel' | 'url' | 'search' | 'datetime-local';
```

---

## dom.isinputfocused: isInputFocused() function

Checks whether the currently focused element is an editable form control (`INPUT`, `TEXTAREA`, `SELECT`) or has `contentEditable` set.

Useful for keyboard shortcut systems to avoid intercepting normal text input.

**Signature:**```typescript
export declare function isInputFocused(doc?: Document): boolean;
```## dom.isinputfocused: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| doc | Document | _(Optional)_ The document to check. Defaults to `document` in browser environments. |


**Returns:**

boolean

`true` if an input-like element is focused.

---

## dom.keyedforeach: KeyedForEach() function

**Signature:**```typescript
KeyedForEach: <T, K>(value: import('@tempots/core').Value<T[]>, key: (item: T) => K, item: (value: import('@tempots/core').Signal<T>, position: import('@tempots/core').KeyedPosition) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, separator?: ((pos: import('@tempots/core').KeyedPosition) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.keyedforeach: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | import('@tempots/core').Value&lt;T\[\]&gt; |  |
| key | (item: T) =&gt; K |  |
| item | (value: import('@tempots/core').Signal&lt;T&gt;, position: import('@tempots/core').KeyedPosition) =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |
| separator | ((pos: import('@tempots/core').KeyedPosition) =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;) \\| undefined | _(Optional)_ |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.makeprobe: makeProbe() function

**Signature:**```typescript
makeProbe: (identifier: symbol) => Provider<() => void, ProbeOptions>
```## dom.makeprobe: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| identifier | symbol |  |


**Returns:**

[Provider](#dom-provider)&lt;() =&gt; void, [ProbeOptions](#dom-probeoptions)&gt;

---

## dom.mapsignal: MapSignal() function

**Signature:**```typescript
MapSignal: <T>(value: import('@tempots/core').Value<T>, fn: (value: T) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.mapsignal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | import('@tempots/core').Value&lt;T&gt; |  |
| fn | (value: T) =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.maptext: MapText() function

**Signature:**```typescript
MapText: <T>(source: import('@tempots/core').Signal<T>, fn: (value: T) => string) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.maptext: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| source | import('@tempots/core').Signal&lt;T&gt; |  |
| fn | (value: T) =&gt; string |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.math: math variable

A convenience object to create Renderables for MATH elements.

**Signature:**```typescript
math: {
    'annotation-xml': (...children: TNode[]) => Renderable;
    annotation: (...children: TNode[]) => Renderable;
    maction: (...children: TNode[]) => Renderable;
    maligngroup: (...children: TNode[]) => Renderable;
    malignmark: (...children: TNode[]) => Renderable;
    math: (...children: TNode[]) => Renderable;
    menclose: (...children: TNode[]) => Renderable;
    merror: (...children: TNode[]) => Renderable;
    mfenced: (...children: TNode[]) => Renderable;
    mfrac: (...children: TNode[]) => Renderable;
    mglyph: (...children: TNode[]) => Renderable;
    mi: (...children: TNode[]) => Renderable;
    mlabeledtr: (...children: TNode[]) => Renderable;
    mlongdiv: (...children: TNode[]) => Renderable;
    mmultiscripts: (...children: TNode[]) => Renderable;
    mn: (...children: TNode[]) => Renderable;
    mo: (...children: TNode[]) => Renderable;
    mover: (...children: TNode[]) => Renderable;
    mpadded: (...children: TNode[]) => Renderable;
    mphantom: (...children: TNode[]) => Renderable;
    mprescripts: (...children: TNode[]) => Renderable;
    mroot: (...children: TNode[]) => Renderable;
    mrow: (...children: TNode[]) => Renderable;
    ms: (...children: TNode[]) => Renderable;
    mscarries: (...children: TNode[]) => Renderable;
    mscarry: (...children: TNode[]) => Renderable;
    msgroup: (...children: TNode[]) => Renderable;
    msline: (...children: TNode[]) => Renderable;
    mspace: (...children: TNode[]) => Renderable;
    msqrt: (...children: TNode[]) => Renderable;
    msrow: (...children: TNode[]) => Renderable;
    mstack: (...children: TNode[]) => Renderable;
    mstyle: (...children: TNode[]) => Renderable;
    msub: (...children: TNode[]) => Renderable;
    msubsup: (...children: TNode[]) => Renderable;
    msup: (...children: TNode[]) => Renderable;
    mtable: (...children: TNode[]) => Renderable;
    mtd: (...children: TNode[]) => Renderable;
    mtext: (...children: TNode[]) => Renderable;
    mtr: (...children: TNode[]) => Renderable;
    munder: (...children: TNode[]) => Renderable;
    munderover: (...children: TNode[]) => Renderable;
    none: (...children: TNode[]) => Renderable;
    semantics: (...children: TNode[]) => Renderable;
}
```

---

## dom.mathattr: mathAttr variable

An object that provides attribute functions for MathML tags.

**Signature:**```typescript
mathAttr: {
    accent: (value: SplitNValue<string | boolean>) => Renderable;
    accentunder: (value: SplitNValue<string | boolean>) => Renderable;
    actiontype: (value: SplitNValue<"statusline" | "tooltip" | "input">) => Renderable;
    align: (value: SplitNValue<"left" | "right" | "center">) => Renderable;
    altimg: (value: SplitNValue<string>) => Renderable;
    altimgheight: (value: SplitNValue<string>) => Renderable;
    altimgvalign: (value: SplitNValue<string>) => Renderable;
    altimgwidth: (value: SplitNValue<string>) => Renderable;
    alttext: (value: SplitNValue<string>) => Renderable;
    background: (value: SplitNValue<string>) => Renderable;
    base: (value: SplitNValue<string>) => Renderable;
    bevelled: (value: SplitNValue<string | boolean>) => Renderable;
    charalign: (value: SplitNValue<"left" | "right" | "center">) => Renderable;
    class: (value: SplitNValue<string>) => Renderable;
    close: (value: SplitNValue<string>) => Renderable;
    color: (value: SplitNValue<string>) => Renderable;
    columnalign: (value: SplitNValue<string>) => Renderable;
    columnlines: (value: SplitNValue<string>) => Renderable;
    columnspacing: (value: SplitNValue<string>) => Renderable;
    columnspan: (value: SplitNValue<string | number>) => Renderable;
    columnwidth: (value: SplitNValue<string>) => Renderable;
    crossout: (value: SplitNValue<string>) => Renderable;
    decimalpoint: (value: SplitNValue<string>) => Renderable;
    definitionurl: (value: SplitNValue<string>) => Renderable;
    denomalign: (value: SplitNValue<"left" | "right" | "center">) => Renderable;
    depth: (value: SplitNValue<string>) => Renderable;
    dir: (value: SplitNValue<"ltr" | "rtl">) => Renderable;
    display: (value: SplitNValue<"inline" | "block">) => Renderable;
    displaystyle: (value: SplitNValue<string | boolean>) => Renderable;
    edge: (value: SplitNValue<"left" | "right">) => Renderable;
    encoding: (value: SplitNValue<string>) => Renderable;
    equalcolumns: (value: SplitNValue<string | boolean>) => Renderable;
    equalrows: (value: SplitNValue<string | boolean>) => Renderable;
    fence: (value: SplitNValue<string | boolean>) => Renderable;
    fontfamily: (value: SplitNValue<string>) => Renderable;
    fontsize: (value: SplitNValue<string>) => Renderable;
    fontstyle: (value: SplitNValue<"normal" | "italic">) => Renderable;
    fontweight: (value: SplitNValue<"normal" | "bold">) => Renderable;
    form: (value: SplitNValue<"prefix" | "infix" | "postfix">) => Renderable;
    frame: (value: SplitNValue<string>) => Renderable;
    groupalign: (value: SplitNValue<string>) => Renderable;
    height: (value: SplitNValue<string>) => Renderable;
    href: (value: SplitNValue<string>) => Renderable;
    id: (value: SplitNValue<string>) => Renderable;
    indentalign: (value: SplitNValue<"left" | "right" | "auto" | "center" | "id">) => Renderable;
    indentalignfirst: (value: SplitNValue<"left" | "right" | "auto" | "center" | "id" | "indentaling">) => Renderable;
    indentalignlast: (value: SplitNValue<"left" | "right" | "auto" | "center" | "id" | "indentaling">) => Renderable;
    indentshift: (value: SplitNValue<string>) => Renderable;
    indentshiftfirst: (value: SplitNValue<string>) => Renderable;
    indentshiftlast: (value: SplitNValue<string>) => Renderable;
    indenttarget: (value: SplitNValue<string>) => Renderable;
    infixlinebreakstyle: (value: SplitNValue<"before" | "after" | "duplicate">) => Renderable;
    intent: (value: SplitNValue<string>) => Renderable;
    largeop: (value: SplitNValue<string | boolean>) => Renderable;
    leftoverhang: (value: SplitNValue<string>) => Renderable;
    length: (value: SplitNValue<string>) => Renderable;
    linebreak: (value: SplitNValue<"auto" | "newline" | "nobreak" | "goodbreak" | "badbreak">) => Renderable;
    linebreakmultchar: (value: SplitNValue<string>) => Renderable;
    linebreakstyle: (value: SplitNValue<"before" | "after" | "duplicate" | "infixlinebreakstyle">) => Renderable;
    lineleading: (value: SplitNValue<string>) => Renderable;
    linethickness: (value: SplitNValue<string>) => Renderable;
    location: (value: SplitNValue<string>) => Renderable;
    longdivstyle: (value: SplitNValue<"lefttop" | "stackedrightright" | "mediumstackedrightright" | "shortstackedrightright" | "righttop">) => Renderable;
    lquote: (value: SplitNValue<string>) => Renderable;
    lspace: (value: SplitNValue<string>) => Renderable;
    mathbackground: (value: SplitNValue<string>) => Renderable;
    mathcolor: (value: SplitNValue<string>) => Renderable;
    mathdepth: (value: SplitNValue<string>) => Renderable;
    mathsize: (value: SplitNValue<string>) => Renderable;
    mathvariant: (value: SplitNValue<"normal" | "italic" | "bold" | "bold-italic" | "double-struck" | "bold-fraktur" | "script" | "bold-script" | "fraktur" | "sans-serif" | "bold-sans-serif" | "sans-serif-italic" | "sans-serif-bold-italic" | "monospace" | "initial" | "tailed" | "looped" | "stretched">) => Renderable;
    maxsize: (value: SplitNValue<string>) => Renderable;
    maxwidth: (value: SplitNValue<string>) => Renderable;
    minlabelspacing: (value: SplitNValue<string>) => Renderable;
    minsize: (value: SplitNValue<string>) => Renderable;
    movablelimits: (value: SplitNValue<string | boolean>) => Renderable;
    mslinethickness: (value: SplitNValue<string>) => Renderable;
    notation: (value: SplitNValue<string>) => Renderable;
    numalign: (value: SplitNValue<"left" | "right" | "center">) => Renderable;
    open: (value: SplitNValue<string>) => Renderable;
    other: (value: SplitNValue<string>) => Renderable;
    overflow: (value: SplitNValue<"scale" | "linebreak" | "scroll" | "elide" | "truncate">) => Renderable;
    position: (value: SplitNValue<string>) => Renderable;
    rightoverhang: (value: SplitNValue<string>) => Renderable;
    rowalign: (value: SplitNValue<string>) => Renderable;
    rowlines: (value: SplitNValue<string>) => Renderable;
    rowspacing: (value: SplitNValue<string>) => Renderable;
    rowspan: (value: SplitNValue<string | number>) => Renderable;
    rquote: (value: SplitNValue<string>) => Renderable;
    rspace: (value: SplitNValue<string>) => Renderable;
    scriptlevel: (value: SplitNValue<string>) => Renderable;
    scriptminsize: (value: SplitNValue<string>) => Renderable;
    scriptsizemultiplier: (value: SplitNValue<string>) => Renderable;
    selection: (value: SplitNValue<string>) => Renderable;
    separator: (value: SplitNValue<string | boolean>) => Renderable;
    separators: (value: SplitNValue<string>) => Renderable;
    shift: (value: SplitNValue<string>) => Renderable;
    side: (value: SplitNValue<"left" | "right" | "leftoverlap" | "rightoverlap">) => Renderable;
    stackalign: (value: SplitNValue<"left" | "right" | "center" | "decimalpoint">) => Renderable;
    stretchy: (value: SplitNValue<string | boolean>) => Renderable;
    style: (value: SplitNValue<string>) => Renderable;
    subscriptshift: (value: SplitNValue<string>) => Renderable;
    superscriptshift: (value: SplitNValue<string>) => Renderable;
    symmetric: (value: SplitNValue<string | boolean>) => Renderable;
    type: (value: SplitNValue<string>) => Renderable;
    valign: (value: SplitNValue<"bottom" | "top" | "center" | "baseline" | "axis">) => Renderable;
    voffset: (value: SplitNValue<string>) => Renderable;
    width: (value: SplitNValue<string>) => Renderable;
    xlink: (value: SplitNValue<string>) => Renderable;
    xmlns: (value: SplitNValue<string>) => Renderable;
    xref: (value: SplitNValue<string>) => Renderable;
}
```

## dom.mathattr: Example


```ts
const math = html.math(
 mathAttr.mathvariant('bold'),
 mathAttr.mathsize(size), // where size is a `Signal<number>`
// ...
)
```

---

## dom.mathel: MathEl() function

Creates a Renderable that represents a MathML element.

**Signature:**```typescript
MathEl: (tagName: string, ...children: TNode[]) => Renderable
```## dom.mathel: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| tagName | string | The tag name of the MathML element. |
| children | [TNode](#dom-tnode)\[\] | The child nodes of the MathML element. |


**Returns:**

[Renderable](#dom-renderable)

A renderable function that creates and appends the MathML element to the DOM.

---

## dom.mathmlattributes: MathMLAttributes type

Represents the attributes used in MathML elements.

**Signature:**```typescript
export type MathMLAttributes = {
    accent: boolean | string;
    accentunder: boolean | string;
    actiontype: 'statusline' | 'tooltip' | 'input';
    align: 'left' | 'center' | 'right';
    altimg: string;
    altimgheight: string;
    altimgvalign: string;
    altimgwidth: string;
    alttext: string;
    background: string;
    base: string;
    bevelled: boolean | string;
    charalign: 'left' | 'center' | 'right';
    class: string;
    close: string;
    color: string;
    columnalign: string;
    columnlines: string;
    columnspacing: string;
    columnspan: number | string;
    columnwidth: string;
    crossout: string;
    decimalpoint: string;
    definitionurl: string;
    denomalign: 'left' | 'center' | 'right';
    depth: string;
    dir: 'ltr' | 'rtl';
    display: 'block' | 'inline';
    displaystyle: boolean | string;
    edge: 'left' | 'right';
    encoding: string;
    equalcolumns: boolean | string;
    equalrows: boolean | string;
    fence: boolean | string;
    fontfamily: string;
    fontsize: string;
    fontstyle: 'normal' | 'italic';
    fontweight: 'normal' | 'bold';
    form: 'prefix' | 'infix' | 'postfix';
    frame: string;
    groupalign: string;
    height: string;
    href: string;
    id: string;
    indentalign: 'left' | 'center' | 'right' | 'auto' | 'id';
    indentalignfirst: 'left' | 'center' | 'right' | 'auto' | 'id' | 'indentaling';
    indentalignlast: 'left' | 'center' | 'right' | 'auto' | 'id' | 'indentaling';
    indentshift: string;
    indentshiftfirst: string;
    indentshiftlast: string;
    indenttarget: string;
    infixlinebreakstyle: 'before' | 'after' | 'duplicate';
    intent: string;
    largeop: boolean | string;
    leftoverhang: string;
    length: string;
    linebreak: 'auto' | 'newline' | 'nobreak' | 'goodbreak' | 'badbreak';
    linebreakmultchar: string;
    linebreakstyle: 'before' | 'after' | 'duplicate' | 'infixlinebreakstyle';
    lineleading: string;
    linethickness: string;
    location: string;
    longdivstyle: 'lefttop' | 'stackedrightright' | 'mediumstackedrightright' | 'shortstackedrightright' | 'righttop';
    lquote: string;
    lspace: string;
    mathbackground: string;
    mathcolor: string;
    mathdepth: string;
    mathsize: string;
    mathvariant: 'normal' | 'bold' | 'italic' | 'bold-italic' | 'double-struck' | 'bold-fraktur' | 'script' | 'bold-script' | 'fraktur' | 'sans-serif' | 'bold-sans-serif' | 'sans-serif-italic' | 'sans-serif-bold-italic' | 'monospace' | 'initial' | 'tailed' | 'looped' | 'stretched';
    maxsize: string;
    maxwidth: string;
    minlabelspacing: string;
    minsize: string;
    movablelimits: boolean | string;
    mslinethickness: string;
    notation: string;
    numalign: 'left' | 'center' | 'right';
    open: string;
    other: string;
    overflow: 'linebreak' | 'scroll' | 'elide' | 'truncate' | 'scale';
    position: string;
    rightoverhang: string;
    rowalign: string;
    rowlines: string;
    rowspacing: string;
    rowspan: number | string;
    rquote: string;
    rspace: string;
    scriptlevel: string;
    scriptminsize: string;
    scriptsizemultiplier: string;
    selection: string;
    separator: boolean | string;
    separators: string;
    shift: string;
    side: 'left' | 'leftoverlap' | 'right' | 'rightoverlap';
    stackalign: 'left' | 'center' | 'right' | 'decimalpoint';
    stretchy: boolean | string;
    style: string;
    subscriptshift: string;
    superscriptshift: string;
    symmetric: boolean | string;
    type: string;
    valign: 'top' | 'bottom' | 'center' | 'baseline' | 'axis';
    voffset: string;
    width: string;
    xlink: string;
    xmlns: string;
    xref: string;
};
```

---

## dom.mathmltags: MathMLTags type

Represents a collection of MathML tags.

**Signature:**```typescript
export type MathMLTags = {
    'annotation-xml': MathMLElement;
    annotation: MathMLElement;
    maction: MathMLElement;
    maligngroup: MathMLElement;
    malignmark: MathMLElement;
    math: MathMLElement;
    menclose: MathMLElement;
    merror: MathMLElement;
    mfenced: MathMLElement;
    mfrac: MathMLElement;
    mglyph: MathMLElement;
    mi: MathMLElement;
    mlabeledtr: MathMLElement;
    mlongdiv: MathMLElement;
    mmultiscripts: MathMLElement;
    mn: MathMLElement;
    mo: MathMLElement;
    mover: MathMLElement;
    mpadded: MathMLElement;
    mphantom: MathMLElement;
    mprescripts: MathMLElement;
    mroot: MathMLElement;
    mrow: MathMLElement;
    ms: MathMLElement;
    mscarries: MathMLElement;
    mscarry: MathMLElement;
    msgroup: MathMLElement;
    msline: MathMLElement;
    mspace: MathMLElement;
    msqrt: MathMLElement;
    msrow: MathMLElement;
    mstack: MathMLElement;
    mstyle: MathMLElement;
    msub: MathMLElement;
    msubsup: MathMLElement;
    msup: MathMLElement;
    mtable: MathMLElement;
    mtd: MathMLElement;
    mtext: MathMLElement;
    mtr: MathMLElement;
    munder: MathMLElement;
    munderover: MathMLElement;
    none: MathMLElement;
    semantics: MathMLElement;
};
```

---

## dom package

## dom: Classes


| Class | Description |
| --- | --- |
| [BrowserContext](#dom-browsercontext) | Browser implementation of DOMContext for real DOM manipulation in web browsers. BrowserContext provides a comprehensive API for creating, manipulating, and managing DOM elements in a browser environment. It handles element creation, text nodes, event listeners, styling, and provider management while maintaining immutability through context chaining. The context uses a reference system to track insertion points within sibling elements, allowing precise control over where new elements are inserted in the DOM tree. |
| [HeadlessAdapter](#dom-headlessadapter) | Represents an adapter for headless rendering environments. This class provides methods to interact with elements in a headless context. This class is used to adapt the HeadlesContext to whatever you want to use to render your final HTML. You can use libraries like cheerio to render your HTML. For cheerio an adapter could look like this: |```ts
const renderWithCheerio = (html: string, root: HeadlessPortal) => {
  const $ = cheerio.load(html)

  const adapter = new HeadlessAdapter<cheerio.Cheerio<any>>({
    select: (selector: string): cheerio.Cheerio<any>[] => [$(selector)],
    getAttribute: (el, name: string) => el.attr(name) ?? null,
    setAttribute: (el, name: string, value: string | null) => {
      if (value === null) {
        el.removeAttr(name)
      } else {
        el.attr(name, value)
      }
    },
    getClass: el => el.attr('class') ?? '',
    setClass: (el, value: string | null) => {
      if (value === null) {
        el.removeAttr('class')
      } else {
        el.attr('class', value)
      }
    },
    getStyles: el => el.attr('style') ?? {},
    setStyles: (el, value: Record<string, string>) => {
      if (Object.keys(value).length === 0) {
        el.removeAttr('style')
      } else {
        el.css(value)
      }
    },
    appendHTML: (el, html) => el.append(html),
    getInnerHTML: el => el.html() ?? '',
    setInnerHTML: (el, html) => el.html(html),
    getInnerText: el => el.text() ?? '',
    setInnerText: (el, text) => el.text(text),
  })

  adapter.setFromRoot(root, true)

  return $.html()
}
```This function will return the rendered HTML as a string.


<tr><td>

[HeadlessContext](#dom-headlesscontext)


</td><td>


</td></tr>
<tr><td>

[HeadlessElement](#dom-headlesselement)


</td><td>


</td></tr>
<tr><td>

[HeadlessPortal](#dom-headlessportal)


</td><td>


</td></tr>
<tr><td>

[HeadlessText](#dom-headlesstext)


</td><td>


</td></tr>
<tr><td>

[RenderingError](#dom-renderingerror)


</td><td>

Represents an error that occurs during rendering.


</td></tr>


## dom: Functions


| Function | Description |
| --- | --- |
| [\_isFragment(node)](#dom-isfragment) |  |
| [Aria(name, value)](#dom-aria) | Creates a renderable for an ARIA attribute with the specified name and value. This is the functional equivalent of using `aria[name](value)` with a dynamic attribute name. |
| [Async(promise, options)](#dom-async) |  |
| [Attr\_2(name, value)](#dom-attr2) | Creates a renderable for an HTML attribute with the specified name and value. This is the functional equivalent of using `attr[name](value)` with a dynamic attribute name. The `class` attribute is special and can be used multiple times on the same element. Multiple class values will be merged together. |
| [BindChecked(prop)](#dom-bindchecked) | Binds a `boolean` property to the checked value of an input element. The binding is two-way. |
| [BindDate(prop, handler)](#dom-binddate) | Binds a `Date` property to an input element. The binding is two-way. Changes to the input element will update the property but will only be affected by day changes and ignore time changes. |
| [BindDateTime(prop, handler)](#dom-binddatetime) | Binds a `Date` property to an input element. The binding is two-way. |
| [BindNumber(prop, handler)](#dom-bindnumber) | Binds a `number` property to an input element. The binding is two-way. |
| [BindText(prop, handler)](#dom-bindtext) | Binds a `string` property to an input element. The binding is two-way. |
| [Catch(children, fallback)](#dom-catch) |  |
| [Conjunction(separator, options)](#dom-conjunction) |  |
| [createInertiaHandler(onDelta, config)](#dom-createinertiahandler) | Creates an inertia handler for pan/scroll interactions. During a drag, call `track(x, y)` on each pointer move to build up velocity. On release, call `release()` to start an exponential decay animation. |
| [createPinchZoomHandler(state, getContainerRect, config)](#dom-createpinchzoomhandler) | Creates event handlers for two-finger pinch-to-zoom with simultaneous pan. |
| [createRafLoop(callback)](#dom-createrafloop) | Creates a `requestAnimationFrame` loop that calls `callback` on every frame with the elapsed time in milliseconds since the previous frame. The first frame always receives `dt = 0`. |
| [createReducedMotionSignal()](#dom-createreducedmotionsignal) | Creates a reactive signal that tracks the user's `prefers-reduced-motion` system preference. The signal updates automatically when the preference changes. SSR-safe: returns a signal with `false` when `window` is unavailable. |
| [createTween(initial, config)](#dom-createtween) | Creates an imperative tween that drives a reactive signal from its current value to a target using an easing function over a fixed duration. Complements `animateSignal` (declarative) with explicit `tweenTo()` control. |
| [dataAttr(name, value)](#dom-dataattr) | Creates a renderable for a `data-` attribute with the specified name and value. |
| [DataAttr(name, value)](#dom-dataattr) | Creates a renderable for a data attribute with the specified name and value. This is an alias for `dataAttr(name, value)` that accepts `unknown` values. |
| [DOMNode(node)](#dom-domnode) | Creates a renderable DOM node. |
| [El(tagName, children)](#dom-el) | Creates a Renderable that represents an HTML element. |
| [ElNS(tagName, namespace, children)](#dom-elns) | Creates a renderable object that represents an element in the DOM with a specified namespace. |
| [emit(fn, options)](#dom-emit) | Creates an event handler that calls the provided function with the event as an argument. |
| [emitChecked(fn, options)](#dom-emitchecked) | Creates an event handler that extracts and emits the checked state from a checkbox or radio input. This utility simplifies handling checkbox and radio button state changes by automatically extracting the `checked` property from the target element. |
| [emitTarget(fn, options)](#dom-emittarget) | Creates an event handler that extracts and emits the target element from an event. |
| [emitValue(fn, options)](#dom-emitvalue) | Creates an event handler that extracts and emits the string value from an input element. This utility simplifies handling input events by automatically extracting the value from the target element and passing it to your callback function. |
| [emitValueAsDate(fn, options)](#dom-emitvalueasdate) | Converts the value of an HTML input element to a Date object and emits it using the provided callback function. |
| [emitValueAsDateTime(fn, options)](#dom-emitvalueasdatetime) | Emits the value of an HTMLInputElement as a Date object. |
| [emitValueAsNullableDate(fn, options)](#dom-emitvalueasnullabledate) | Converts the value of an HTML input element to a Date object or null and emits it using the provided callback function. |
| [emitValueAsNullableDateTime(fn, options)](#dom-emitvalueasnullabledatetime) | Emits the value of an HTMLInputElement as a Date object or null. |
| [emitValueAsNumber(fn, options)](#dom-emitvalueasnumber) | Creates an event handler that extracts and emits the numeric value from an input element. This utility automatically converts the input's value to a number using the browser's built-in `valueAsNumber` property, which handles number inputs correctly and returns `NaN` for invalid numeric values. |
| [Ensure(value, then, otherwise)](#dom-ensure) |  |
| [EnsureAll(signals)](#dom-ensureall) |  |
| [ForEach(value, item, separator)](#dom-foreach) |  |
| [Fragment(children)](#dom-fragment) |  |
| [getWindow()](#dom-getwindow) |  |
| [IFrame({ src, name, width, height, sandbox, allow, referrerpolicy, loading, iframeChild, onLoad, }, input, children)](#dom-iframe) | Creates an iframe element and optionally renders content into its document. When children are provided, they are rendered into the iframe's contentDocument. This allows you to create isolated DOM contexts with their own styles and scripts. |
| [Inertia(onDelta, config)](#dom-inertia) | A Tempo renderable that attaches inertia-based pointer drag handlers to the parent element. On pointer up, the surface continues scrolling with exponential velocity decay. |
| [isInputFocused(doc)](#dom-isinputfocused) | Checks whether the currently focused element is an editable form control (`INPUT`, `TEXTAREA`, `SELECT`) or has `contentEditable` set. Useful for keyboard shortcut systems to avoid intercepting normal text input. |
| [KeyedForEach(value, key, item, separator)](#dom-keyedforeach) |  |
| [makeProbe(identifier)](#dom-makeprobe) |  |
| [MapSignal(value, fn)](#dom-mapsignal) |  |
| [MapText(source, fn)](#dom-maptext) |  |
| [MathAttr(name, value)](#dom-mathattr) | Creates a renderable for a MathML attribute with the specified name and value. This is the functional equivalent of using `mathAttr[name](value)`. |
| [MathEl(tagName, children)](#dom-mathel) | Creates a Renderable that represents a MathML element. |
| [NotEmpty(value, display, whenEmpty)](#dom-notempty) |  |
| [OnChecked(fn)](#dom-onchecked) | **_(ALPHA)_** Attaches an event handler to the 'click' event that triggers when a checkbox is checked or unchecked. |
| [OnDispose(fns)](#dom-ondispose) |  |
| [OneOf(match, cases)](#dom-oneof) |  |
| [OneOfField(match, field, cases)](#dom-oneoffield) |  |
| [OneOfKind(match, cases)](#dom-oneofkind) |  |
| [OneOfTuple(match, cases)](#dom-oneoftuple) |  |
| [OneOfType(match, cases)](#dom-oneoftype) |  |
| [OneOfValue(match, cases)](#dom-oneofvalue) |  |
| [PinchZoom(state, config)](#dom-pinchzoom) | A Tempo renderable that attaches pinch-to-zoom touch handlers to the parent element. The handlers are automatically removed on disposal. |
| [Portal(selector, node)](#dom-portal) | Renders the given `node` into a DOM element selected by the provided `selector`. Throws an error if the element cannot be found. |
| [Provide(provider, options, child)](#dom-provide) |  |
| [RafLoop(callback)](#dom-rafloop) | A Tempo renderable that runs a `requestAnimationFrame` loop for the lifetime of the component. The loop is automatically stopped when the renderable is disposed. |
| [render(node, parent, { doc, clear, disposeWithParent, providers, onScope, }, input)](#dom-render) | Renders a `Renderable` node into a specified parent element or selector. |
| [renderableOfTNode(child)](#dom-renderableoftnode) |  |
| [renderWithContext(renderable, ctx, onScope)](#dom-renderwithcontext) | Renders the given `renderable` with the provided `ctx` DOM context. Creates a DisposalScope for automatic signal disposal. All signals created during the renderable execution are tracked and disposed when the clear function is called. |
| [Repeat(times, element, separator)](#dom-repeat) |  |
| [restoreTempoPlaceholders()](#dom-restoretempoplaceholders) | Restores all placeholders in the DOM. This function is useful when the HTML is rendered on the server and then hydrated on the client. It restores the original content that was replaced with placeholders during the initial render. When you render on the server side, make sure to call `HeadlessAdapter.setFromRoot` with the result of `runHeadless` and the second parameter `setPlaceholders` to `true`. |
| [runHeadless(makeRenderable, { startUrl, selector, providers, }, input)](#dom-runheadless) | Runs a renderable function in a headless environment. |
| [selectedClass(source, key, activeClass, equals)](#dom-selectedclass) | Creates a renderable that toggles a CSS class based on O(1) selection matching. Instead of creating a `computed` per row that re-evaluates when the source changes (O(n) for n rows), this uses `createSelector` from `@tempots/core` to only update the two rows that actually change (the previously selected and newly selected). A shared selector is automatically created per source signal and cached via WeakMap. |
| [ShadowRoot\_2({ mode, delegatesFocus, slotAssignment, clonable, serializable, }, input, children)](#dom-shadowroot2) |  |
| [SVGAttr(name, value)](#dom-svgattr) | Creates a renderable for an SVG attribute with the specified name and value. This is the functional equivalent of using `svgAttr[name](value)` with a dynamic attribute name. |
| [SVGEl(tagName, children)](#dom-svgel) | Creates a Renderable that represents an SVG element. |
| [Task(task, options)](#dom-task) |  |
| [TextNode(value)](#dom-textnode) | Creates a renderable text node. |
| [TransitionKeyedForEach(items, key, renderFn, config)](#dom-transitionkeyedforeach) | A drop-in replacement for `KeyedForEach` that supports enter and exit animations by delaying DOM removal. Items that leave the list are kept in the DOM with an `isExiting` signal set to `true`, allowing CSS transitions or class-based animations to play before removal. |
| [Unless(condition, then, otherwise)](#dom-unless) |  |
| [Use(provider, child)](#dom-use) |  |
| [UseMany(providers)](#dom-usemany) |  |
| [When(condition, then, otherwise)](#dom-when) |  |
| [WithBrowserCtx(fn)](#dom-withbrowserctx) | Returns a renderable object that executes the given function with the current DOMContext as argument. The given function can return a TNode or void. If you need to perform some actions when the Renderable is disposed, you can use `OnDispose` as the return value. |
| [WithCtx(fn)](#dom-withctx) | Returns a renderable object that executes the given function with the current DOMContext as argument. The given function can return a TNode or void. If you need to perform some actions when the Renderable is disposed, you can use `OnDispose` as the return value. |
| [WithElement(fn)](#dom-withelement) | Executes a callback function when the parent element is mounted in the DOM. The given function can return a TNode or void. Any returned TNode will be appended to the element argument. If you need to perform some actions when the Renderable is disposed, you can use `OnDispose` as the return value. |
| [WithHeadlessCtx(fn)](#dom-withheadlessctx) | Returns a renderable object that executes the given function with the current DOMContext as argument. |
| [WithProvider(fn)](#dom-withprovider) |  |
| [WithScope(fn)](#dom-withscope) |  |


## dom: Interfaces


| Interface | Description |
| --- | --- |
| [DOMContext](#dom-domcontext) | `DOMContext` is an immutable class that represents the context of a DOM element. It provides methods and properties to manipulate and interact with the DOM element. A reference in a DOMContext is to mark a position within a set of siblings. It is used to insert new elements before the reference. |
| [HeadlessContainer](#dom-headlesscontainer) |  |
| [IFrameOptions](#dom-iframeoptions) |  |
| [RafLoopHandle](#dom-rafloophandle) | Handle returned by [createRafLoop()](#dom-createrafloop) to stop the animation loop. |
| [ShadowRootOptions](#dom-shadowrootoptions) |  |
| [StreamOptions](#dom-streamoptions) | Options for streaming HTML output. |


## dom: Variables


| Variable | Description |
| --- | --- |
| [aria](#dom-aria) | An object that provides a convenient way to create mountable attributes for ARIA properties. The type of the value is inferred from the attribute name. |
| [attr](#dom-attr) | The `attr` object allows to create any HTML attribute. Either a literal value or `Signal` can be passed as a value. The type of the value is inferred from the attribute name. |
| [CLASS\_PLACEHOLDER\_ATTR](#dom-classplaceholderattr) |  |
| [delegate](#dom-delegate) | Provides type-safe delegated event handlers for all HTML events. The `delegate` object is a proxy that creates event handlers attached to the \*\*container element\*\* rather than individual children. Events are matched against a CSS selector using `Element.closest()`, making this ideal for lists and other containers with many similar children. Unlike `on`, which attaches one listener per element, `delegate` attaches a single listener on the container regardless of how many children match. |
| [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype) | Symbol to brand DOM renderables and prevent mixing with other contexts |
| [Empty](#dom-empty) |  |
| [GlobalProbe](#dom-globalprobe) |  |
| [html](#dom-html) | A convenience object to create Renderables for HTML elements. |
| [HYDRATION\_ID\_ATTR](#dom-hydrationidattr) | Attribute name for hydration IDs. Used to match server-rendered elements with client-side renderables during hydration. |
| [input](#dom-input) | A convenience object to create Renderables for HTMLInput elements. It automatically creates an attribute with the specified type |
| [math](#dom-math) | A convenience object to create Renderables for MATH elements. |
| [mathAttr](#dom-mathattr) | An object that provides attribute functions for MathML tags. |
| [on](#dom-on) | Provides type-safe event handlers for all HTML events. The `on` object is a proxy that provides access to all standard HTML events with proper TypeScript typing. Each event handler receives the native event object and the DOM context. Use `on.document` to attach listeners to `document` and `on.window` to attach listeners to `window`. These listeners are automatically removed when the component is disposed. |
| [ReducedMotion](#dom-reducedmotion) | A Tempo provider for the reduced motion preference signal. Use with `Provide` / `Use` for app-wide access. |
| [style](#dom-style) | A collection of functions to create style renderables. |
| [svg](#dom-svg) | A convenience object to create Renderables for SVG elements. |
| [svgAttr](#dom-svgattr) | An object that provides a convenient way to create mountable attributes for SVG elements. |
| [UseOptional](#dom-useoptional) |  |


## dom: Type Aliases


| Type Alias | Description |
| --- | --- |
| [AriaAttributes](#dom-ariaattributes) | Represents a collection of ARIA attributes and their corresponding types. |
| [CSSStyles](#dom-cssstyles) | Represents a subset of CSS styles. It is a type that excludes certain properties from the `CSSStyleDeclaration` type. |
| [DisposeCallback](#dom-disposecallback) | Callback invoked on dispose, specialized for DOMContext. |
| [EmitOptions](#dom-emitoptions) | Options for event handlers. |
| [ExcludeFromStyle](#dom-excludefromstyle) | Represents a set of properties or values that are excluded from the CSSStyleDeclaration interface. |
| [HandlerOptions](#dom-handleroptions) | Options for event listeners. |
| [HeadlessNode](#dom-headlessnode) |  |
| [HeadlessOptions](#dom-headlessoptions) | Options for running a headless environment. |
| [HTMLAttributes](#dom-htmlattributes) | Represents the HTML attributes that can be used in an HTML element. \*\*Security Warning:\*\* Some properties like `innerHTML` and `outerHTML` can introduce Cross-Site Scripting (XSS) vulnerabilities if used with untrusted user input. Always sanitize user-provided content before using these properties. |
| [HTMLEvents](#dom-htmlevents) | Represents a mapping of HTML event names to their corresponding event types. |
| [HTMLTags](#dom-htmltags) | Represents a mapping of HTML tag names to their corresponding element types. |
| [InertiaConfig](#dom-inertiaconfig) | Configuration for inertia scroll behavior. |
| [InertiaHandler](#dom-inertiahandler) | Handle returned by [createInertiaHandler()](#dom-createinertiahandler). |
| [InputTypes](#dom-inputtypes) | Represents the possible input types for HTML input elements. |
| [MathMLAttributes](#dom-mathmlattributes) | Represents the attributes used in MathML elements. |
| [MathMLTags](#dom-mathmltags) | Represents a collection of MathML tags. |
| [NValue](#dom-nvalue) | Represents a nullable value or a signal of a nullable value. |
| [PinchZoomConfig](#dom-pinchzoomconfig) | Configuration for the pinch-zoom handler. |
| [PinchZoomHandler](#dom-pinchzoomhandler) | Event handlers returned by [createPinchZoomHandler()](#dom-createpinchzoomhandler). |
| [PinchZoomState](#dom-pinchzoomstate) | State for a pinch-zoom interaction. |
| [ProbeOptions](#dom-probeoptions) |  |
| [ProbeResolution](#dom-proberesolution) |  |
| [Provider](#dom-provider) | Represents a provider for a specific type `T`, specialized for DOMContext. |
| [ProviderOptions](#dom-provideroptions) | Represents an object with provider options, specialized for DOMContext. |
| [ReferrerPolicy\_2](#dom-referrerpolicy2) |  |
| [Renderable](#dom-renderable) | A renderable object that can render content into the DOM. Renderables are the fundamental building blocks of Tempo applications. They are objects with a `render()` method that receives a DOMContext and returns a cleanup function, and a `type` symbol for runtime type checking. This is a specialized version of the core Renderable type for DOM contexts. |
| [RenderOptions](#dom-renderoptions) | Options for rendering. |
| [Size](#dom-size) | Represents the size of an object with width and height. |
| [SplitNValue](#dom-splitnvalue) |  |
| [SplitValue](#dom-splitvalue) |  |
| [StyleOptions](#dom-styleoptions) |  |
| [SVGAttributes](#dom-svgattributes) | Represents the attributes that can be used in SVG elements. |
| [SVGTags](#dom-svgtags) | Represents a mapping of SVG tag names to their corresponding SVG element types. |
| [TNode](#dom-tnode) | A flexible type representing any content that can be rendered in Tempo. TNode (Template Node) is the union type that encompasses all possible content that can be rendered in a Tempo application. This includes components, text, signals, arrays of content, and null/undefined values for conditional rendering. |
| [TransitionConfig](#dom-transitionconfig) | Configuration for enter/exit transitions. |
| [TweenConfig](#dom-tweenconfig) | Configuration for a tween animation. |
| [TweenHandle](#dom-tweenhandle) | Handle returned by [createTween()](#dom-createtween). |
| [WithDispose](#dom-withdispose) | Object with a dispose method, specialized for DOMContext. |

---

## dom.notempty: NotEmpty() function

**Signature:**```typescript
NotEmpty: <T>(value: import('@tempots/core').Value<T[]>, display: (value: import('@tempots/core').Signal<T[]>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>, whenEmpty?: (() => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.notempty: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | import('@tempots/core').Value&lt;T\[\]&gt; |  |
| display | (value: import('@tempots/core').Signal&lt;T\[\]&gt;) =&gt; import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |
| whenEmpty | (() =&gt; import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;) \\| undefined | _(Optional)_ |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.nvalue: NValue type

Represents a nullable value or a signal of a nullable value.

**Signature:**```typescript
export type NValue<T> = Value<NonNullable<T>> | Signal<T> | Signal<T | null> | Signal<T | undefined> | Signal<T | null | undefined> | null | undefined;
```

---

## dom.on: on variable

Provides type-safe event handlers for all HTML events.

The `on` object is a proxy that provides access to all standard HTML events with proper TypeScript typing. Each event handler receives the native event object and the DOM context.

Use `on.document` to attach listeners to `document` and `on.window` to attach listeners to `window`. These listeners are automatically removed when the component is disposed.

**Signature:**```typescript
on: EventHandlerMap & {
    document: EventHandlerMap;
    window: EventHandlerMap;
}
```

## dom.on: Example 1


```typescript
// Basic click handler
html.button(
  on.click((event, ctx) => {
    console.log('Button clicked!', event.target)
  }),
  'Click me'
)
```

## dom.on: Example 2


```typescript
// Input event with value extraction
const text = prop('')

html.input(
  attr.value(text),
  on.input((event) => {
    text.value = (event.target as HTMLInputElement).value
  })
)
```

## dom.on: Example 3


```typescript
// Multiple event handlers on same element
html.div(
  on.mouseenter(() => console.log('Mouse entered')),
  on.mouseleave(() => console.log('Mouse left')),
  on.click(() => console.log('Clicked')),
  'Hover and click me'
)
```

## dom.on: Example 4


```typescript
// Keyboard event handling
html.input(
  on.keydown((event) => {
    if (event.key === 'Enter') {
      console.log('Enter pressed!')
      event.preventDefault()
    }
  })
)
```

## dom.on: Example 5


```typescript
// Global keyboard shortcut scoped to a component's lifetime
html.div(
  on.document.keydown((event) => {
    if (event.key === 'Escape') {
      console.log('Escape pressed anywhere!')
    }
  }),
  'Press Escape anywhere'
)
```

## dom.on: Example 6


```typescript
// Window resize listener scoped to a component's lifetime
html.div(
  on.window.resize(() => {
    console.log('Window resized!')
  }),
  'Resize the window'
)
```

---

## dom.onchecked: OnChecked() function

> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
>

Attaches an event handler to the 'click' event that triggers when a checkbox is checked or unchecked.

**Signature:**```typescript
OnChecked: (fn: (event: boolean, ctx: DOMContext) => void) => Renderable
```## dom.onchecked: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (event: boolean, ctx: [DOMContext](#dom-domcontext)) =&gt; void | The callback function to be executed when the checkbox is clicked. |


**Returns:**

[Renderable](#dom-renderable)

---

## dom.ondispose: OnDispose() function

**Signature:**```typescript
OnDispose: (...fns: (import('@tempots/render').DisposeCallback<DOMContext> | import('@tempots/render').WithDispose<DOMContext>)[]) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.ondispose: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fns | (import('@tempots/render').DisposeCallback&lt;[DOMContext](#dom-domcontext)&gt; \\| import('@tempots/render').WithDispose&lt;[DOMContext](#dom-domcontext)&gt;)\[\] |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.oneof: OneOf() function

**Signature:**```typescript
OneOf: <T extends Record<string, unknown>>(match: import('@tempots/core').Value<T>, cases: import('@tempots/render').OneOfOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.oneof: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| match | import('@tempots/core').Value&lt;T&gt; |  |
| cases | import('@tempots/render').OneOfOptions&lt;T, [DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.oneoffield: OneOfField() function

**Signature:**```typescript
OneOfField: <T extends { [_ in K]: string; }, K extends string>(match: import('@tempots/core').Value<T>, field: K, cases: import('@tempots/render').OneOfFieldOptions<T, K, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.oneoffield: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| match | import('@tempots/core').Value&lt;T&gt; |  |
| field | K |  |
| cases | import('@tempots/render').OneOfFieldOptions&lt;T, K, [DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.oneofkind: OneOfKind() function

**Signature:**```typescript
OneOfKind: <T extends {
    kind: string;
}>(match: import('@tempots/core').Value<T>, cases: import('@tempots/render').OneOfKindOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.oneofkind: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| match | import('@tempots/core').Value&lt;T&gt; |  |
| cases | import('@tempots/render').OneOfKindOptions&lt;T, [DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.oneoftuple: OneOfTuple() function

**Signature:**```typescript
OneOfTuple: <T extends string, V>(match: import('@tempots/core').Value<[T, V]>, cases: import('@tempots/render').OneOfTupleOptions<T, V, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.oneoftuple: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| match | import('@tempots/core').Value&lt;\[T, V\]&gt; |  |
| cases | import('@tempots/render').OneOfTupleOptions&lt;T, V, [DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.oneoftype: OneOfType() function

**Signature:**```typescript
OneOfType: <T extends {
    type: string;
}>(match: import('@tempots/core').Value<T>, cases: import('@tempots/render').OneOfTypeOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.oneoftype: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| match | import('@tempots/core').Value&lt;T&gt; |  |
| cases | import('@tempots/render').OneOfTypeOptions&lt;T, [DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.oneofvalue: OneOfValue() function

**Signature:**```typescript
OneOfValue: <T extends symbol | number | string>(match: import('@tempots/core').Value<T>, cases: import('@tempots/render').OneOfValueOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.oneofvalue: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| match | import('@tempots/core').Value&lt;T&gt; |  |
| cases | import('@tempots/render').OneOfValueOptions&lt;T, [DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.pinchzoom: PinchZoom() function

A Tempo renderable that attaches pinch-to-zoom touch handlers to the parent element. The handlers are automatically removed on disposal.

**Signature:**```typescript
PinchZoom: (state: Prop<PinchZoomState>, config?: PinchZoomConfig) => Renderable
```## dom.pinchzoom: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| state | Prop&lt;[PinchZoomState](#dom-pinchzoomstate)&gt; | A `Prop` holding the current zoom/pan state. |
| config | [PinchZoomConfig](#dom-pinchzoomconfig) | _(Optional)_ Optional scale limits. |


**Returns:**

[Renderable](#dom-renderable)

A renderable.

---

## dom.pinchzoomconfig: PinchZoomConfig type

Configuration for the pinch-zoom handler.

**Signature:**```typescript
export type PinchZoomConfig = {
    readonly minScale?: number;
    readonly maxScale?: number;
};
```

---

## dom.pinchzoomhandler: PinchZoomHandler type

Event handlers returned by [createPinchZoomHandler()](#dom-createpinchzoomhandler).

**Signature:**```typescript
export type PinchZoomHandler = {
    readonly onTouchStart: (e: TouchEvent) => void;
    readonly onTouchMove: (e: TouchEvent) => void;
    readonly onTouchEnd: (e: TouchEvent) => void;
};
```

---

## dom.pinchzoomstate: PinchZoomState type

State for a pinch-zoom interaction.

**Signature:**```typescript
export type PinchZoomState = {
    readonly scale: number;
    readonly panX: number;
    readonly panY: number;
};
```

---

## dom.portal: Portal() function

Renders the given `node` into a DOM element selected by the provided `selector`. Throws an error if the element cannot be found.

**Signature:**```typescript
Portal: (selector: string | HTMLElement, node: TNode) => Renderable
```## dom.portal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| selector | string \\| HTMLElement | The CSS selector for the target DOM element. |
| node | [TNode](#dom-tnode) | The node to be rendered. |


**Returns:**

[Renderable](#dom-renderable)

The result of rendering the `node` into the selected DOM element.

---

## dom.probeoptions: ProbeOptions type

**Signature:**```typescript
export type ProbeOptions = {
    callback?: (resolution: ProbeResolution) => void;
    timeout?: number;
};
```
**References:** [ProbeResolution](#dom-proberesolution)

---

## dom.proberesolution: ProbeResolution type

**Signature:**```typescript
export type ProbeResolution = 'resolved' | 'timeout' | 'disposed';
```

---

## dom.provide: Provide() function

**Signature:**```typescript
Provide: <T, O>(provider: import('@tempots/render').Provider<T, O, DOMContext>, options: O, child: () => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.provide: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| provider | import('@tempots/render').Provider&lt;T, O, [DOMContext](#dom-domcontext)&gt; |  |
| options | O |  |
| child | () =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.provider: Provider type

Represents a provider for a specific type `T`, specialized for DOMContext.

**Signature:**```typescript
export type Provider<T, O = any> = BaseProvider<T, O, DOMContext>;
```
**References:** [DOMContext](#dom-domcontext)

---

## dom.provideroptions: ProviderOptions type

Represents an object with provider options, specialized for DOMContext.

**Signature:**```typescript
export type ProviderOptions = BaseProviderOptions<DOMContext>;
```
**References:** [DOMContext](#dom-domcontext)

---

## dom.rafloop: RafLoop() function

A Tempo renderable that runs a `requestAnimationFrame` loop for the lifetime of the component. The loop is automatically stopped when the renderable is disposed.

**Signature:**```typescript
RafLoop: (callback: (dt: number) => void) => Renderable
```## dom.rafloop: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| callback | (dt: number) =&gt; void | Called each frame with delta time in milliseconds. |


**Returns:**

[Renderable](#dom-renderable)

A renderable.

---

## dom.rafloophandle.dispose: RafLoopHandle.dispose property

Cancel the loop and stop future callbacks.

**Signature:**```typescript
dispose: () => void;
```

---

## dom.rafloophandle: RafLoopHandle interface

Handle returned by [createRafLoop()](#dom-createrafloop) to stop the animation loop.

**Signature:**```typescript
export interface RafLoopHandle 
```## dom.rafloophandle: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [dispose](#dom-rafloophandle-dispose) |  | () =&gt; void | Cancel the loop and stop future callbacks. |

---

## dom.reducedmotion: ReducedMotion variable

A Tempo provider for the reduced motion preference signal. Use with `Provide` / `Use` for app-wide access.

**Signature:**```typescript
ReducedMotion: Provider<Signal<boolean>, undefined, DOMContext>
```

## dom.reducedmotion: Example


```ts
Provide(ReducedMotion, undefined,
  Use(ReducedMotion, (reducedMotion) =>
    reducedMotion.map(v => v ? 'static' : 'animated')
  )
)
```

---

## dom.referrerpolicy_2: ReferrerPolicy\_2 type

**Signature:**```typescript
export type ReferrerPolicy = 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
```

---

## dom.render: render() function

Renders a `Renderable` node into a specified parent element or selector.

**Signature:**```typescript
render: (node: Renderable, parent: Node | string, input?: RenderOptions) => () => void
```## dom.render: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| node | [Renderable](#dom-renderable) | The `Renderable` node to render. |
| parent | Node \\| string | The parent element or selector where the node should be rendered. |
| { doc, clear, disposeWithParent, providers, onScope, } | (not declared) | _(Optional)_ |
| input | [RenderOptions](#dom-renderoptions) | _(Optional)_ |


**Returns:**

() =&gt; void

The result of rendering the `Renderable` node.

## dom.render: Exceptions

Throws a `RenderingError` if the parent element cannot be found by the provided selector.

---

## dom.renderable: Renderable type

A renderable object that can render content into the DOM.

Renderables are the fundamental building blocks of Tempo applications. They are objects with a `render()` method that receives a DOMContext and returns a cleanup function, and a `type` symbol for runtime type checking.

This is a specialized version of the core Renderable type for DOM contexts.

**Signature:**```typescript
export type Renderable<CTX extends DOMContext = DOMContext> = CoreRenderable<CTX, typeof DOM_RENDERABLE_TYPE>;
```
**References:** [DOMContext](#dom-domcontext), [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)

## dom.renderable: Example 1


```typescript
// Simple renderable that creates a div
const MyComponent: Renderable = {
  type: DOM_RENDERABLE_TYPE,
  render: (ctx) => {
    const divCtx = ctx.makeChildElement('div', undefined)
    divCtx.makeChildText('Hello, World!')

    // Return cleanup function
    return (removeTree) => {
      if (removeTree) {
        // Cleanup logic here
      }
    }
  }
}
```

## dom.renderable: Example 2


```typescript
// Renderable with event listeners
const Button: Renderable = {
  type: DOM_RENDERABLE_TYPE,
  render: (ctx) => {
    const buttonCtx = ctx.makeChildElement('button', undefined)
    buttonCtx.makeChildText('Click me')

    const clearClick = buttonCtx.on('click', () => {
      console.log('Button clicked!')
    })

    return (removeTree) => {
      clearClick(removeTree)
    }
  }
}
```

---

## dom.renderableoftnode: renderableOfTNode() function

**Signature:**```typescript
renderableOfTNode: (child: import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.renderableoftnode: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| child | import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.renderingerror._constructor_: RenderingError.(constructor)

Constructs a new instance of the `RenderingError` class

**Signature:**```typescript
constructor(message: string);
```## dom.renderingerror._constructor_: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| message | string |  |

---

## dom.renderingerror: RenderingError class

Represents an error that occurs during rendering.

**Signature:**```typescript
export declare class RenderingError extends Error 
```**Extends:** Error

## dom.renderingerror: Constructors


| Constructor | Modifiers | Description |
| --- | --- | --- |
| [(constructor)(message)](#dom-renderingerror-constructor) |  | Constructs a new instance of the `RenderingError` class |

---

## dom.renderoptions: RenderOptions type

Options for rendering.

**Signature:**```typescript
export type RenderOptions = {
    doc?: Document;
    clear?: boolean;
    disposeWithParent?: boolean;
    providers?: Providers;
    onScope?: (scope: DisposalScope) => void;
};
```

---

## dom.renderwithcontext: renderWithContext() function

Renders the given `renderable` with the provided `ctx` DOM context.

Creates a DisposalScope for automatic signal disposal. All signals created during the renderable execution are tracked and disposed when the clear function is called.

**Signature:**```typescript
renderWithContext: (renderable: Renderable, ctx: DOMContext, onScope?: (scope: DisposalScope) => void) => (removeTree?: boolean) => void
```## dom.renderwithcontext: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| renderable | [Renderable](#dom-renderable) | The renderable node to be rendered. |
| ctx | [DOMContext](#dom-domcontext) | The DOM context to be used for rendering. |
| onScope | (scope: DisposalScope) =&gt; void | _(Optional)_ |


**Returns:**

(removeTree?: boolean) =&gt; void

A function that can be called to clear the rendered node.

---

## dom.repeat: Repeat() function

**Signature:**```typescript
Repeat: (times: import('@tempots/core').Value<number>, element: (index: import('@tempots/core').ElementPosition) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, separator?: ((pos: import('@tempots/core').ElementPosition) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.repeat: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| times | import('@tempots/core').Value&lt;number&gt; |  |
| element | (index: import('@tempots/core').ElementPosition) =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |
| separator | ((pos: import('@tempots/core').ElementPosition) =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;) \\| undefined | _(Optional)_ |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.restoretempoplaceholders: restoreTempoPlaceholders() function

Restores all placeholders in the DOM. This function is useful when the HTML is rendered on the server and then hydrated on the client. It restores the original content that was replaced with placeholders during the initial render. When you render on the server side, make sure to call `HeadlessAdapter.setFromRoot` with the result of `runHeadless` and the second parameter `setPlaceholders` to `true`.

**Signature:**```typescript
restoreTempoPlaceholders: () => void
```
**Returns:**

void

---

## dom.runheadless: runHeadless() function

Runs a renderable function in a headless environment.

**Signature:**```typescript
runHeadless: (makeRenderable: () => Renderable, input?: HeadlessOptions) => {
    clear: (removeTree?: boolean) => void;
    root: HeadlessPortal;
    currentURL: import('@tempots/core').Prop<string>;
}
```## dom.runheadless: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| makeRenderable | () =&gt; [Renderable](#dom-renderable) | A function that returns a Renderable to be rendered in the headless environment. |
| { startUrl, selector, providers, } | (not declared) | _(Optional)_ |
| input | [HeadlessOptions](#dom-headlessoptions) | _(Optional)_ |


**Returns:**

{ clear: (removeTree?: boolean) =&gt; void; root: [HeadlessPortal](#dom-headlessportal); currentURL: import('@tempots/core').Prop&lt;string&gt;; }

An object containing the clear function, root element, and current URL Signal of the headless environment.

---

## dom.selectedclass: selectedClass() function

Creates a renderable that toggles a CSS class based on O(1) selection matching.

Instead of creating a `computed` per row that re-evaluates when the source changes (O(n) for n rows), this uses `createSelector` from `@tempots/core` to only update the two rows that actually change (the previously selected and newly selected).

A shared selector is automatically created per source signal and cached via WeakMap.

**Signature:**```typescript
selectedClass: <T>(source: Signal<T>, key: T, activeClass?: string, equals?: (a: T, b: T) => boolean) => Renderable
```## dom.selectedclass: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| source | Signal&lt;T&gt; | The signal containing the currently selected value. |
| key | T | The static key to compare against (e.g., the row's ID). |
| activeClass | string | _(Optional)_ The CSS class(es) to toggle (space-separated). Defaults to `'danger'`. |
| equals | (a: T, b: T) =&gt; boolean | _(Optional)_ Optional equality function. Defaults to `===`. |


**Returns:**

[Renderable](#dom-renderable)

A renderable that adds/removes the class based on selection state.

## dom.selectedclass: Example```ts
const selected = prop(0)
html.tr(
  selectedClass(selected, item.id, 'danger'),
  // ...
)
```

---

## dom.shadowroot_2: ShadowRoot\_2() function

**Signature:**```typescript
export declare function ShadowRoot(input: ShadowRootOptions, ...children: TNode[]): import('..').Renderable;
```## dom.shadowroot_2: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| { mode, delegatesFocus, slotAssignment, clonable, serializable, } | (not declared) |  |
| input | [ShadowRootOptions](#dom-shadowrootoptions) |  |
| children | [TNode](#dom-tnode)\[\] |  |


**Returns:**

import('..').[Renderable](#dom-renderable)

---

## dom.shadowrootoptions.clonable: ShadowRootOptions.clonable property

**Signature:**```typescript
clonable?: boolean;
```

---

## dom.shadowrootoptions.delegatesfocus: ShadowRootOptions.delegatesFocus property

**Signature:**```typescript
delegatesFocus?: boolean;
```

---

## dom.shadowrootoptions: ShadowRootOptions interface

**Signature:**```typescript
export interface ShadowRootOptions 
```## dom.shadowrootoptions: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [clonable?](#dom-shadowrootoptions-clonable) |  | boolean | _(Optional)_ |
| [delegatesFocus?](#dom-shadowrootoptions-delegatesfocus) |  | boolean | _(Optional)_ |
| [mode](#dom-shadowrootoptions-mode) |  | 'open' \\| 'closed' |  |
| [serializable?](#dom-shadowrootoptions-serializable) |  | boolean | _(Optional)_ |
| [slotAssignment?](#dom-shadowrootoptions-slotassignment) |  | 'named' \\| 'manual' | _(Optional)_ |

---

## dom.shadowrootoptions.mode: ShadowRootOptions.mode property

**Signature:**```typescript
mode: 'open' | 'closed';
```

---

## dom.shadowrootoptions.serializable: ShadowRootOptions.serializable property

**Signature:**```typescript
serializable?: boolean;
```

---

## dom.shadowrootoptions.slotassignment: ShadowRootOptions.slotAssignment property

**Signature:**```typescript
slotAssignment?: 'named' | 'manual';
```

---

## dom.size: Size type

Represents the size of an object with width and height.

**Signature:**```typescript
export type Size = {
    readonly width: number;
    readonly height: number;
};
```

---

## dom.splitnvalue: SplitNValue type

**Signature:**```typescript
export type SplitNValue<T> = (T extends unknown ? TupleToUnion<NValue<T>[]> : never) | NValue<T>;
```
**References:** [NValue](#dom-nvalue)

---

## dom.splitvalue: SplitValue type

**Signature:**```typescript
export type SplitValue<T> = (T extends unknown ? TupleToUnion<Value<T>[]> : never) | Value<T>;
```

---

## dom.streamoptions.generateplaceholders: StreamOptions.generatePlaceholders property

Whether to generate placeholder attributes for hydration.

**Signature:**```typescript
generatePlaceholders?: boolean;
```

---

## dom.streamoptions: StreamOptions interface

Options for streaming HTML output.

**Signature:**```typescript
export interface StreamOptions 
```## dom.streamoptions: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [generatePlaceholders?](#dom-streamoptions-generateplaceholders) |  | boolean | _(Optional)_ Whether to generate placeholder attributes for hydration. |

---

## dom.style: style variable

A collection of functions to create style renderables.

**Signature:**```typescript
style: {
    page: (value: NValue<string>) => Renderable;
    grid: (value: NValue<string>) => Renderable;
    all: (value: NValue<string>) => Renderable;
    accentColor: (value: NValue<string>) => Renderable;
    alignContent: (value: NValue<string>) => Renderable;
    alignItems: (value: NValue<string>) => Renderable;
    alignSelf: (value: NValue<string>) => Renderable;
    alignmentBaseline: (value: NValue<string>) => Renderable;
    animation: (value: NValue<string>) => Renderable;
    animationComposition: (value: NValue<string>) => Renderable;
    animationDelay: (value: NValue<string>) => Renderable;
    animationDirection: (value: NValue<string>) => Renderable;
    animationDuration: (value: NValue<string>) => Renderable;
    animationFillMode: (value: NValue<string>) => Renderable;
    animationIterationCount: (value: NValue<string>) => Renderable;
    animationName: (value: NValue<string>) => Renderable;
    animationPlayState: (value: NValue<string>) => Renderable;
    animationTimingFunction: (value: NValue<string>) => Renderable;
    appearance: (value: NValue<string>) => Renderable;
    aspectRatio: (value: NValue<string>) => Renderable;
    backdropFilter: (value: NValue<string>) => Renderable;
    backfaceVisibility: (value: NValue<string>) => Renderable;
    background: (value: NValue<string>) => Renderable;
    backgroundAttachment: (value: NValue<string>) => Renderable;
    backgroundBlendMode: (value: NValue<string>) => Renderable;
    backgroundClip: (value: NValue<string>) => Renderable;
    backgroundColor: (value: NValue<string>) => Renderable;
    backgroundImage: (value: NValue<string>) => Renderable;
    backgroundOrigin: (value: NValue<string>) => Renderable;
    backgroundPosition: (value: NValue<string>) => Renderable;
    backgroundPositionX: (value: NValue<string>) => Renderable;
    backgroundPositionY: (value: NValue<string>) => Renderable;
    backgroundRepeat: (value: NValue<string>) => Renderable;
    backgroundSize: (value: NValue<string>) => Renderable;
    baselineShift: (value: NValue<string>) => Renderable;
    baselineSource: (value: NValue<string>) => Renderable;
    blockSize: (value: NValue<string>) => Renderable;
    border: (value: NValue<string>) => Renderable;
    borderBlock: (value: NValue<string>) => Renderable;
    borderBlockColor: (value: NValue<string>) => Renderable;
    borderBlockEnd: (value: NValue<string>) => Renderable;
    borderBlockEndColor: (value: NValue<string>) => Renderable;
    borderBlockEndStyle: (value: NValue<string>) => Renderable;
    borderBlockEndWidth: (value: NValue<string>) => Renderable;
    borderBlockStart: (value: NValue<string>) => Renderable;
    borderBlockStartColor: (value: NValue<string>) => Renderable;
    borderBlockStartStyle: (value: NValue<string>) => Renderable;
    borderBlockStartWidth: (value: NValue<string>) => Renderable;
    borderBlockStyle: (value: NValue<string>) => Renderable;
    borderBlockWidth: (value: NValue<string>) => Renderable;
    borderBottom: (value: NValue<string>) => Renderable;
    borderBottomColor: (value: NValue<string>) => Renderable;
    borderBottomLeftRadius: (value: NValue<string>) => Renderable;
    borderBottomRightRadius: (value: NValue<string>) => Renderable;
    borderBottomStyle: (value: NValue<string>) => Renderable;
    borderBottomWidth: (value: NValue<string>) => Renderable;
    borderCollapse: (value: NValue<string>) => Renderable;
    borderColor: (value: NValue<string>) => Renderable;
    borderEndEndRadius: (value: NValue<string>) => Renderable;
    borderEndStartRadius: (value: NValue<string>) => Renderable;
    borderImage: (value: NValue<string>) => Renderable;
    borderImageOutset: (value: NValue<string>) => Renderable;
    borderImageRepeat: (value: NValue<string>) => Renderable;
    borderImageSlice: (value: NValue<string>) => Renderable;
    borderImageSource: (value: NValue<string>) => Renderable;
    borderImageWidth: (value: NValue<string>) => Renderable;
    borderInline: (value: NValue<string>) => Renderable;
    borderInlineColor: (value: NValue<string>) => Renderable;
    borderInlineEnd: (value: NValue<string>) => Renderable;
    borderInlineEndColor: (value: NValue<string>) => Renderable;
    borderInlineEndStyle: (value: NValue<string>) => Renderable;
    borderInlineEndWidth: (value: NValue<string>) => Renderable;
    borderInlineStart: (value: NValue<string>) => Renderable;
    borderInlineStartColor: (value: NValue<string>) => Renderable;
    borderInlineStartStyle: (value: NValue<string>) => Renderable;
    borderInlineStartWidth: (value: NValue<string>) => Renderable;
    borderInlineStyle: (value: NValue<string>) => Renderable;
    borderInlineWidth: (value: NValue<string>) => Renderable;
    borderLeft: (value: NValue<string>) => Renderable;
    borderLeftColor: (value: NValue<string>) => Renderable;
    borderLeftStyle: (value: NValue<string>) => Renderable;
    borderLeftWidth: (value: NValue<string>) => Renderable;
    borderRadius: (value: NValue<string>) => Renderable;
    borderRight: (value: NValue<string>) => Renderable;
    borderRightColor: (value: NValue<string>) => Renderable;
    borderRightStyle: (value: NValue<string>) => Renderable;
    borderRightWidth: (value: NValue<string>) => Renderable;
    borderSpacing: (value: NValue<string>) => Renderable;
    borderStartEndRadius: (value: NValue<string>) => Renderable;
    borderStartStartRadius: (value: NValue<string>) => Renderable;
    borderStyle: (value: NValue<string>) => Renderable;
    borderTop: (value: NValue<string>) => Renderable;
    borderTopColor: (value: NValue<string>) => Renderable;
    borderTopLeftRadius: (value: NValue<string>) => Renderable;
    borderTopRightRadius: (value: NValue<string>) => Renderable;
    borderTopStyle: (value: NValue<string>) => Renderable;
    borderTopWidth: (value: NValue<string>) => Renderable;
    borderWidth: (value: NValue<string>) => Renderable;
    bottom: (value: NValue<string>) => Renderable;
    boxDecorationBreak: (value: NValue<string>) => Renderable;
    boxShadow: (value: NValue<string>) => Renderable;
    boxSizing: (value: NValue<string>) => Renderable;
    breakAfter: (value: NValue<string>) => Renderable;
    breakBefore: (value: NValue<string>) => Renderable;
    breakInside: (value: NValue<string>) => Renderable;
    captionSide: (value: NValue<string>) => Renderable;
    caretColor: (value: NValue<string>) => Renderable;
    clear: (value: NValue<string>) => Renderable;
    clip: (value: NValue<string>) => Renderable;
    clipPath: (value: NValue<string>) => Renderable;
    clipRule: (value: NValue<string>) => Renderable;
    color: (value: NValue<string>) => Renderable;
    colorInterpolation: (value: NValue<string>) => Renderable;
    colorInterpolationFilters: (value: NValue<string>) => Renderable;
    colorScheme: (value: NValue<string>) => Renderable;
    columnCount: (value: NValue<string>) => Renderable;
    columnFill: (value: NValue<string>) => Renderable;
    columnGap: (value: NValue<string>) => Renderable;
    columnRule: (value: NValue<string>) => Renderable;
    columnRuleColor: (value: NValue<string>) => Renderable;
    columnRuleStyle: (value: NValue<string>) => Renderable;
    columnRuleWidth: (value: NValue<string>) => Renderable;
    columnSpan: (value: NValue<string>) => Renderable;
    columnWidth: (value: NValue<string>) => Renderable;
    columns: (value: NValue<string>) => Renderable;
    contain: (value: NValue<string>) => Renderable;
    containIntrinsicBlockSize: (value: NValue<string>) => Renderable;
    containIntrinsicHeight: (value: NValue<string>) => Renderable;
    containIntrinsicInlineSize: (value: NValue<string>) => Renderable;
    containIntrinsicSize: (value: NValue<string>) => Renderable;
    containIntrinsicWidth: (value: NValue<string>) => Renderable;
    container: (value: NValue<string>) => Renderable;
    containerName: (value: NValue<string>) => Renderable;
    containerType: (value: NValue<string>) => Renderable;
    content: (value: NValue<string>) => Renderable;
    contentVisibility: (value: NValue<string>) => Renderable;
    counterIncrement: (value: NValue<string>) => Renderable;
    counterReset: (value: NValue<string>) => Renderable;
    counterSet: (value: NValue<string>) => Renderable;
    cssFloat: (value: NValue<string>) => Renderable;
    cssText: (value: NValue<string>) => Renderable;
    cursor: (value: NValue<string>) => Renderable;
    cx: (value: NValue<string>) => Renderable;
    cy: (value: NValue<string>) => Renderable;
    d: (value: NValue<string>) => Renderable;
    direction: (value: NValue<string>) => Renderable;
    display: (value: NValue<string>) => Renderable;
    dominantBaseline: (value: NValue<string>) => Renderable;
    emptyCells: (value: NValue<string>) => Renderable;
    fill: (value: NValue<string>) => Renderable;
    fillOpacity: (value: NValue<string>) => Renderable;
    fillRule: (value: NValue<string>) => Renderable;
    filter: (value: NValue<string>) => Renderable;
    flex: (value: NValue<string>) => Renderable;
    flexBasis: (value: NValue<string>) => Renderable;
    flexDirection: (value: NValue<string>) => Renderable;
    flexFlow: (value: NValue<string>) => Renderable;
    flexGrow: (value: NValue<string>) => Renderable;
    flexShrink: (value: NValue<string>) => Renderable;
    flexWrap: (value: NValue<string>) => Renderable;
    float: (value: NValue<string>) => Renderable;
    floodColor: (value: NValue<string>) => Renderable;
    floodOpacity: (value: NValue<string>) => Renderable;
    font: (value: NValue<string>) => Renderable;
    fontFamily: (value: NValue<string>) => Renderable;
    fontFeatureSettings: (value: NValue<string>) => Renderable;
    fontKerning: (value: NValue<string>) => Renderable;
    fontOpticalSizing: (value: NValue<string>) => Renderable;
    fontPalette: (value: NValue<string>) => Renderable;
    fontSize: (value: NValue<string>) => Renderable;
    fontSizeAdjust: (value: NValue<string>) => Renderable;
    fontStretch: (value: NValue<string>) => Renderable;
    fontStyle: (value: NValue<string>) => Renderable;
    fontSynthesis: (value: NValue<string>) => Renderable;
    fontSynthesisSmallCaps: (value: NValue<string>) => Renderable;
    fontSynthesisStyle: (value: NValue<string>) => Renderable;
    fontSynthesisWeight: (value: NValue<string>) => Renderable;
    fontVariant: (value: NValue<string>) => Renderable;
    fontVariantAlternates: (value: NValue<string>) => Renderable;
    fontVariantCaps: (value: NValue<string>) => Renderable;
    fontVariantEastAsian: (value: NValue<string>) => Renderable;
    fontVariantLigatures: (value: NValue<string>) => Renderable;
    fontVariantNumeric: (value: NValue<string>) => Renderable;
    fontVariantPosition: (value: NValue<string>) => Renderable;
    fontVariationSettings: (value: NValue<string>) => Renderable;
    fontWeight: (value: NValue<string>) => Renderable;
    forcedColorAdjust: (value: NValue<string>) => Renderable;
    gap: (value: NValue<string>) => Renderable;
    gridArea: (value: NValue<string>) => Renderable;
    gridAutoColumns: (value: NValue<string>) => Renderable;
    gridAutoFlow: (value: NValue<string>) => Renderable;
    gridAutoRows: (value: NValue<string>) => Renderable;
    gridColumn: (value: NValue<string>) => Renderable;
    gridColumnEnd: (value: NValue<string>) => Renderable;
    gridColumnGap: (value: NValue<string>) => Renderable;
    gridColumnStart: (value: NValue<string>) => Renderable;
    gridGap: (value: NValue<string>) => Renderable;
    gridRow: (value: NValue<string>) => Renderable;
    gridRowEnd: (value: NValue<string>) => Renderable;
    gridRowGap: (value: NValue<string>) => Renderable;
    gridRowStart: (value: NValue<string>) => Renderable;
    gridTemplate: (value: NValue<string>) => Renderable;
    gridTemplateAreas: (value: NValue<string>) => Renderable;
    gridTemplateColumns: (value: NValue<string>) => Renderable;
    gridTemplateRows: (value: NValue<string>) => Renderable;
    height: (value: NValue<string>) => Renderable;
    hyphenateCharacter: (value: NValue<string>) => Renderable;
    hyphenateLimitChars: (value: NValue<string>) => Renderable;
    hyphens: (value: NValue<string>) => Renderable;
    imageOrientation: (value: NValue<string>) => Renderable;
    imageRendering: (value: NValue<string>) => Renderable;
    inlineSize: (value: NValue<string>) => Renderable;
    inset: (value: NValue<string>) => Renderable;
    insetBlock: (value: NValue<string>) => Renderable;
    insetBlockEnd: (value: NValue<string>) => Renderable;
    insetBlockStart: (value: NValue<string>) => Renderable;
    insetInline: (value: NValue<string>) => Renderable;
    insetInlineEnd: (value: NValue<string>) => Renderable;
    insetInlineStart: (value: NValue<string>) => Renderable;
    isolation: (value: NValue<string>) => Renderable;
    justifyContent: (value: NValue<string>) => Renderable;
    justifyItems: (value: NValue<string>) => Renderable;
    justifySelf: (value: NValue<string>) => Renderable;
    left: (value: NValue<string>) => Renderable;
    letterSpacing: (value: NValue<string>) => Renderable;
    lightingColor: (value: NValue<string>) => Renderable;
    lineBreak: (value: NValue<string>) => Renderable;
    lineHeight: (value: NValue<string>) => Renderable;
    listStyle: (value: NValue<string>) => Renderable;
    listStyleImage: (value: NValue<string>) => Renderable;
    listStylePosition: (value: NValue<string>) => Renderable;
    listStyleType: (value: NValue<string>) => Renderable;
    margin: (value: NValue<string>) => Renderable;
    marginBlock: (value: NValue<string>) => Renderable;
    marginBlockEnd: (value: NValue<string>) => Renderable;
    marginBlockStart: (value: NValue<string>) => Renderable;
    marginBottom: (value: NValue<string>) => Renderable;
    marginInline: (value: NValue<string>) => Renderable;
    marginInlineEnd: (value: NValue<string>) => Renderable;
    marginInlineStart: (value: NValue<string>) => Renderable;
    marginLeft: (value: NValue<string>) => Renderable;
    marginRight: (value: NValue<string>) => Renderable;
    marginTop: (value: NValue<string>) => Renderable;
    marker: (value: NValue<string>) => Renderable;
    markerEnd: (value: NValue<string>) => Renderable;
    markerMid: (value: NValue<string>) => Renderable;
    markerStart: (value: NValue<string>) => Renderable;
    mask: (value: NValue<string>) => Renderable;
    maskClip: (value: NValue<string>) => Renderable;
    maskComposite: (value: NValue<string>) => Renderable;
    maskImage: (value: NValue<string>) => Renderable;
    maskMode: (value: NValue<string>) => Renderable;
    maskOrigin: (value: NValue<string>) => Renderable;
    maskPosition: (value: NValue<string>) => Renderable;
    maskRepeat: (value: NValue<string>) => Renderable;
    maskSize: (value: NValue<string>) => Renderable;
    maskType: (value: NValue<string>) => Renderable;
    mathDepth: (value: NValue<string>) => Renderable;
    mathStyle: (value: NValue<string>) => Renderable;
    maxBlockSize: (value: NValue<string>) => Renderable;
    maxHeight: (value: NValue<string>) => Renderable;
    maxInlineSize: (value: NValue<string>) => Renderable;
    maxWidth: (value: NValue<string>) => Renderable;
    minBlockSize: (value: NValue<string>) => Renderable;
    minHeight: (value: NValue<string>) => Renderable;
    minInlineSize: (value: NValue<string>) => Renderable;
    minWidth: (value: NValue<string>) => Renderable;
    mixBlendMode: (value: NValue<string>) => Renderable;
    objectFit: (value: NValue<string>) => Renderable;
    objectPosition: (value: NValue<string>) => Renderable;
    offset: (value: NValue<string>) => Renderable;
    offsetAnchor: (value: NValue<string>) => Renderable;
    offsetDistance: (value: NValue<string>) => Renderable;
    offsetPath: (value: NValue<string>) => Renderable;
    offsetPosition: (value: NValue<string>) => Renderable;
    offsetRotate: (value: NValue<string>) => Renderable;
    opacity: (value: NValue<string>) => Renderable;
    order: (value: NValue<string>) => Renderable;
    orphans: (value: NValue<string>) => Renderable;
    outline: (value: NValue<string>) => Renderable;
    outlineColor: (value: NValue<string>) => Renderable;
    outlineOffset: (value: NValue<string>) => Renderable;
    outlineStyle: (value: NValue<string>) => Renderable;
    outlineWidth: (value: NValue<string>) => Renderable;
    overflow: (value: NValue<string>) => Renderable;
    overflowAnchor: (value: NValue<string>) => Renderable;
    overflowBlock: (value: NValue<string>) => Renderable;
    overflowClipMargin: (value: NValue<string>) => Renderable;
    overflowInline: (value: NValue<string>) => Renderable;
    overflowWrap: (value: NValue<string>) => Renderable;
    overflowX: (value: NValue<string>) => Renderable;
    overflowY: (value: NValue<string>) => Renderable;
    overscrollBehavior: (value: NValue<string>) => Renderable;
    overscrollBehaviorBlock: (value: NValue<string>) => Renderable;
    overscrollBehaviorInline: (value: NValue<string>) => Renderable;
    overscrollBehaviorX: (value: NValue<string>) => Renderable;
    overscrollBehaviorY: (value: NValue<string>) => Renderable;
    padding: (value: NValue<string>) => Renderable;
    paddingBlock: (value: NValue<string>) => Renderable;
    paddingBlockEnd: (value: NValue<string>) => Renderable;
    paddingBlockStart: (value: NValue<string>) => Renderable;
    paddingBottom: (value: NValue<string>) => Renderable;
    paddingInline: (value: NValue<string>) => Renderable;
    paddingInlineEnd: (value: NValue<string>) => Renderable;
    paddingInlineStart: (value: NValue<string>) => Renderable;
    paddingLeft: (value: NValue<string>) => Renderable;
    paddingRight: (value: NValue<string>) => Renderable;
    paddingTop: (value: NValue<string>) => Renderable;
    pageBreakAfter: (value: NValue<string>) => Renderable;
    pageBreakBefore: (value: NValue<string>) => Renderable;
    pageBreakInside: (value: NValue<string>) => Renderable;
    paintOrder: (value: NValue<string>) => Renderable;
    perspective: (value: NValue<string>) => Renderable;
    perspectiveOrigin: (value: NValue<string>) => Renderable;
    placeContent: (value: NValue<string>) => Renderable;
    placeItems: (value: NValue<string>) => Renderable;
    placeSelf: (value: NValue<string>) => Renderable;
    pointerEvents: (value: NValue<string>) => Renderable;
    position: (value: NValue<string>) => Renderable;
    printColorAdjust: (value: NValue<string>) => Renderable;
    quotes: (value: NValue<string>) => Renderable;
    r: (value: NValue<string>) => Renderable;
    resize: (value: NValue<string>) => Renderable;
    right: (value: NValue<string>) => Renderable;
    rotate: (value: NValue<string>) => Renderable;
    rowGap: (value: NValue<string>) => Renderable;
    rubyAlign: (value: NValue<string>) => Renderable;
    rubyPosition: (value: NValue<string>) => Renderable;
    rx: (value: NValue<string>) => Renderable;
    ry: (value: NValue<string>) => Renderable;
    scale: (value: NValue<string>) => Renderable;
    scrollBehavior: (value: NValue<string>) => Renderable;
    scrollMargin: (value: NValue<string>) => Renderable;
    scrollMarginBlock: (value: NValue<string>) => Renderable;
    scrollMarginBlockEnd: (value: NValue<string>) => Renderable;
    scrollMarginBlockStart: (value: NValue<string>) => Renderable;
    scrollMarginBottom: (value: NValue<string>) => Renderable;
    scrollMarginInline: (value: NValue<string>) => Renderable;
    scrollMarginInlineEnd: (value: NValue<string>) => Renderable;
    scrollMarginInlineStart: (value: NValue<string>) => Renderable;
    scrollMarginLeft: (value: NValue<string>) => Renderable;
    scrollMarginRight: (value: NValue<string>) => Renderable;
    scrollMarginTop: (value: NValue<string>) => Renderable;
    scrollPadding: (value: NValue<string>) => Renderable;
    scrollPaddingBlock: (value: NValue<string>) => Renderable;
    scrollPaddingBlockEnd: (value: NValue<string>) => Renderable;
    scrollPaddingBlockStart: (value: NValue<string>) => Renderable;
    scrollPaddingBottom: (value: NValue<string>) => Renderable;
    scrollPaddingInline: (value: NValue<string>) => Renderable;
    scrollPaddingInlineEnd: (value: NValue<string>) => Renderable;
    scrollPaddingInlineStart: (value: NValue<string>) => Renderable;
    scrollPaddingLeft: (value: NValue<string>) => Renderable;
    scrollPaddingRight: (value: NValue<string>) => Renderable;
    scrollPaddingTop: (value: NValue<string>) => Renderable;
    scrollSnapAlign: (value: NValue<string>) => Renderable;
    scrollSnapStop: (value: NValue<string>) => Renderable;
    scrollSnapType: (value: NValue<string>) => Renderable;
    scrollbarColor: (value: NValue<string>) => Renderable;
    scrollbarGutter: (value: NValue<string>) => Renderable;
    scrollbarWidth: (value: NValue<string>) => Renderable;
    shapeImageThreshold: (value: NValue<string>) => Renderable;
    shapeMargin: (value: NValue<string>) => Renderable;
    shapeOutside: (value: NValue<string>) => Renderable;
    shapeRendering: (value: NValue<string>) => Renderable;
    stopColor: (value: NValue<string>) => Renderable;
    stopOpacity: (value: NValue<string>) => Renderable;
    stroke: (value: NValue<string>) => Renderable;
    strokeDasharray: (value: NValue<string>) => Renderable;
    strokeDashoffset: (value: NValue<string>) => Renderable;
    strokeLinecap: (value: NValue<string>) => Renderable;
    strokeLinejoin: (value: NValue<string>) => Renderable;
    strokeMiterlimit: (value: NValue<string>) => Renderable;
    strokeOpacity: (value: NValue<string>) => Renderable;
    strokeWidth: (value: NValue<string>) => Renderable;
    tabSize: (value: NValue<string>) => Renderable;
    tableLayout: (value: NValue<string>) => Renderable;
    textAlign: (value: NValue<string>) => Renderable;
    textAlignLast: (value: NValue<string>) => Renderable;
    textAnchor: (value: NValue<string>) => Renderable;
    textBox: (value: NValue<string>) => Renderable;
    textBoxEdge: (value: NValue<string>) => Renderable;
    textBoxTrim: (value: NValue<string>) => Renderable;
    textCombineUpright: (value: NValue<string>) => Renderable;
    textDecoration: (value: NValue<string>) => Renderable;
    textDecorationColor: (value: NValue<string>) => Renderable;
    textDecorationLine: (value: NValue<string>) => Renderable;
    textDecorationSkipInk: (value: NValue<string>) => Renderable;
    textDecorationStyle: (value: NValue<string>) => Renderable;
    textDecorationThickness: (value: NValue<string>) => Renderable;
    textEmphasis: (value: NValue<string>) => Renderable;
    textEmphasisColor: (value: NValue<string>) => Renderable;
    textEmphasisPosition: (value: NValue<string>) => Renderable;
    textEmphasisStyle: (value: NValue<string>) => Renderable;
    textIndent: (value: NValue<string>) => Renderable;
    textOrientation: (value: NValue<string>) => Renderable;
    textOverflow: (value: NValue<string>) => Renderable;
    textRendering: (value: NValue<string>) => Renderable;
    textShadow: (value: NValue<string>) => Renderable;
    textTransform: (value: NValue<string>) => Renderable;
    textUnderlineOffset: (value: NValue<string>) => Renderable;
    textUnderlinePosition: (value: NValue<string>) => Renderable;
    textWrap: (value: NValue<string>) => Renderable;
    textWrapMode: (value: NValue<string>) => Renderable;
    textWrapStyle: (value: NValue<string>) => Renderable;
    top: (value: NValue<string>) => Renderable;
    touchAction: (value: NValue<string>) => Renderable;
    transform: (value: NValue<string>) => Renderable;
    transformBox: (value: NValue<string>) => Renderable;
    transformOrigin: (value: NValue<string>) => Renderable;
    transformStyle: (value: NValue<string>) => Renderable;
    transition: (value: NValue<string>) => Renderable;
    transitionBehavior: (value: NValue<string>) => Renderable;
    transitionDelay: (value: NValue<string>) => Renderable;
    transitionDuration: (value: NValue<string>) => Renderable;
    transitionProperty: (value: NValue<string>) => Renderable;
    transitionTimingFunction: (value: NValue<string>) => Renderable;
    translate: (value: NValue<string>) => Renderable;
    unicodeBidi: (value: NValue<string>) => Renderable;
    userSelect: (value: NValue<string>) => Renderable;
    vectorEffect: (value: NValue<string>) => Renderable;
    verticalAlign: (value: NValue<string>) => Renderable;
    viewTransitionClass: (value: NValue<string>) => Renderable;
    viewTransitionName: (value: NValue<string>) => Renderable;
    visibility: (value: NValue<string>) => Renderable;
    webkitAlignContent: (value: NValue<string>) => Renderable;
    webkitAlignItems: (value: NValue<string>) => Renderable;
    webkitAlignSelf: (value: NValue<string>) => Renderable;
    webkitAnimation: (value: NValue<string>) => Renderable;
    webkitAnimationDelay: (value: NValue<string>) => Renderable;
    webkitAnimationDirection: (value: NValue<string>) => Renderable;
    webkitAnimationDuration: (value: NValue<string>) => Renderable;
    webkitAnimationFillMode: (value: NValue<string>) => Renderable;
    webkitAnimationIterationCount: (value: NValue<string>) => Renderable;
    webkitAnimationName: (value: NValue<string>) => Renderable;
    webkitAnimationPlayState: (value: NValue<string>) => Renderable;
    webkitAnimationTimingFunction: (value: NValue<string>) => Renderable;
    webkitAppearance: (value: NValue<string>) => Renderable;
    webkitBackfaceVisibility: (value: NValue<string>) => Renderable;
    webkitBackgroundClip: (value: NValue<string>) => Renderable;
    webkitBackgroundOrigin: (value: NValue<string>) => Renderable;
    webkitBackgroundSize: (value: NValue<string>) => Renderable;
    webkitBorderBottomLeftRadius: (value: NValue<string>) => Renderable;
    webkitBorderBottomRightRadius: (value: NValue<string>) => Renderable;
    webkitBorderRadius: (value: NValue<string>) => Renderable;
    webkitBorderTopLeftRadius: (value: NValue<string>) => Renderable;
    webkitBorderTopRightRadius: (value: NValue<string>) => Renderable;
    webkitBoxAlign: (value: NValue<string>) => Renderable;
    webkitBoxFlex: (value: NValue<string>) => Renderable;
    webkitBoxOrdinalGroup: (value: NValue<string>) => Renderable;
    webkitBoxOrient: (value: NValue<string>) => Renderable;
    webkitBoxPack: (value: NValue<string>) => Renderable;
    webkitBoxShadow: (value: NValue<string>) => Renderable;
    webkitBoxSizing: (value: NValue<string>) => Renderable;
    webkitFilter: (value: NValue<string>) => Renderable;
    webkitFlex: (value: NValue<string>) => Renderable;
    webkitFlexBasis: (value: NValue<string>) => Renderable;
    webkitFlexDirection: (value: NValue<string>) => Renderable;
    webkitFlexFlow: (value: NValue<string>) => Renderable;
    webkitFlexGrow: (value: NValue<string>) => Renderable;
    webkitFlexShrink: (value: NValue<string>) => Renderable;
    webkitFlexWrap: (value: NValue<string>) => Renderable;
    webkitJustifyContent: (value: NValue<string>) => Renderable;
    webkitLineClamp: (value: NValue<string>) => Renderable;
    webkitMask: (value: NValue<string>) => Renderable;
    webkitMaskBoxImage: (value: NValue<string>) => Renderable;
    webkitMaskBoxImageOutset: (value: NValue<string>) => Renderable;
    webkitMaskBoxImageRepeat: (value: NValue<string>) => Renderable;
    webkitMaskBoxImageSlice: (value: NValue<string>) => Renderable;
    webkitMaskBoxImageSource: (value: NValue<string>) => Renderable;
    webkitMaskBoxImageWidth: (value: NValue<string>) => Renderable;
    webkitMaskClip: (value: NValue<string>) => Renderable;
    webkitMaskComposite: (value: NValue<string>) => Renderable;
    webkitMaskImage: (value: NValue<string>) => Renderable;
    webkitMaskOrigin: (value: NValue<string>) => Renderable;
    webkitMaskPosition: (value: NValue<string>) => Renderable;
    webkitMaskRepeat: (value: NValue<string>) => Renderable;
    webkitMaskSize: (value: NValue<string>) => Renderable;
    webkitOrder: (value: NValue<string>) => Renderable;
    webkitPerspective: (value: NValue<string>) => Renderable;
    webkitPerspectiveOrigin: (value: NValue<string>) => Renderable;
    webkitTextFillColor: (value: NValue<string>) => Renderable;
    webkitTextSizeAdjust: (value: NValue<string>) => Renderable;
    webkitTextStroke: (value: NValue<string>) => Renderable;
    webkitTextStrokeColor: (value: NValue<string>) => Renderable;
    webkitTextStrokeWidth: (value: NValue<string>) => Renderable;
    webkitTransform: (value: NValue<string>) => Renderable;
    webkitTransformOrigin: (value: NValue<string>) => Renderable;
    webkitTransformStyle: (value: NValue<string>) => Renderable;
    webkitTransition: (value: NValue<string>) => Renderable;
    webkitTransitionDelay: (value: NValue<string>) => Renderable;
    webkitTransitionDuration: (value: NValue<string>) => Renderable;
    webkitTransitionProperty: (value: NValue<string>) => Renderable;
    webkitTransitionTimingFunction: (value: NValue<string>) => Renderable;
    webkitUserSelect: (value: NValue<string>) => Renderable;
    whiteSpace: (value: NValue<string>) => Renderable;
    whiteSpaceCollapse: (value: NValue<string>) => Renderable;
    widows: (value: NValue<string>) => Renderable;
    width: (value: NValue<string>) => Renderable;
    willChange: (value: NValue<string>) => Renderable;
    wordBreak: (value: NValue<string>) => Renderable;
    wordSpacing: (value: NValue<string>) => Renderable;
    wordWrap: (value: NValue<string>) => Renderable;
    writingMode: (value: NValue<string>) => Renderable;
    x: (value: NValue<string>) => Renderable;
    y: (value: NValue<string>) => Renderable;
    zIndex: (value: NValue<string>) => Renderable;
    zoom: (value: NValue<string>) => Renderable;
    variable: (name: `--${string}`, value: NValue<string>) => Renderable;
}
```

---

## dom.styleoptions: StyleOptions type

**Signature:**```typescript
export type StyleOptions = Merge<{
    [AN in keyof CSSStyles]: (value: NValue<string>) => Renderable;
}, {
    variable: (name: `--${string}`, value: NValue<string>) => Renderable;
}>;
```
**References:** [CSSStyles](#dom-cssstyles), [NValue](#dom-nvalue), [Renderable](#dom-renderable)

---

## dom.svg: svg variable

A convenience object to create Renderables for SVG elements.

**Signature:**```typescript
svg: {
    a: (...children: TNode[]) => Renderable;
    animate: (...children: TNode[]) => Renderable;
    animateMotion: (...children: TNode[]) => Renderable;
    animateTransform: (...children: TNode[]) => Renderable;
    circle: (...children: TNode[]) => Renderable;
    clipPath: (...children: TNode[]) => Renderable;
    defs: (...children: TNode[]) => Renderable;
    desc: (...children: TNode[]) => Renderable;
    ellipse: (...children: TNode[]) => Renderable;
    feBlend: (...children: TNode[]) => Renderable;
    feColorMatrix: (...children: TNode[]) => Renderable;
    feComponentTransfer: (...children: TNode[]) => Renderable;
    feComposite: (...children: TNode[]) => Renderable;
    feConvolveMatrix: (...children: TNode[]) => Renderable;
    feDiffuseLighting: (...children: TNode[]) => Renderable;
    feDisplacementMap: (...children: TNode[]) => Renderable;
    feDistantLight: (...children: TNode[]) => Renderable;
    feDropShadow: (...children: TNode[]) => Renderable;
    feFlood: (...children: TNode[]) => Renderable;
    feFuncA: (...children: TNode[]) => Renderable;
    feFuncB: (...children: TNode[]) => Renderable;
    feFuncG: (...children: TNode[]) => Renderable;
    feFuncR: (...children: TNode[]) => Renderable;
    feGaussianBlur: (...children: TNode[]) => Renderable;
    feImage: (...children: TNode[]) => Renderable;
    feMerge: (...children: TNode[]) => Renderable;
    feMergeNode: (...children: TNode[]) => Renderable;
    feMorphology: (...children: TNode[]) => Renderable;
    feOffset: (...children: TNode[]) => Renderable;
    fePointLight: (...children: TNode[]) => Renderable;
    feSpecularLighting: (...children: TNode[]) => Renderable;
    feSpotLight: (...children: TNode[]) => Renderable;
    feTile: (...children: TNode[]) => Renderable;
    feTurbulence: (...children: TNode[]) => Renderable;
    filter: (...children: TNode[]) => Renderable;
    foreignObject: (...children: TNode[]) => Renderable;
    g: (...children: TNode[]) => Renderable;
    image: (...children: TNode[]) => Renderable;
    line: (...children: TNode[]) => Renderable;
    linearGradient: (...children: TNode[]) => Renderable;
    marker: (...children: TNode[]) => Renderable;
    mask: (...children: TNode[]) => Renderable;
    metadata: (...children: TNode[]) => Renderable;
    mpath: (...children: TNode[]) => Renderable;
    path: (...children: TNode[]) => Renderable;
    pattern: (...children: TNode[]) => Renderable;
    polygon: (...children: TNode[]) => Renderable;
    polyline: (...children: TNode[]) => Renderable;
    radialGradient: (...children: TNode[]) => Renderable;
    rect: (...children: TNode[]) => Renderable;
    script: (...children: TNode[]) => Renderable;
    set: (...children: TNode[]) => Renderable;
    stop: (...children: TNode[]) => Renderable;
    style: (...children: TNode[]) => Renderable;
    svg: (...children: TNode[]) => Renderable;
    switch: (...children: TNode[]) => Renderable;
    symbol: (...children: TNode[]) => Renderable;
    text: (...children: TNode[]) => Renderable;
    textPath: (...children: TNode[]) => Renderable;
    title: (...children: TNode[]) => Renderable;
    tspan: (...children: TNode[]) => Renderable;
    use: (...children: TNode[]) => Renderable;
    view: (...children: TNode[]) => Renderable;
}
```

---

## dom.svgattr: svgAttr variable

An object that provides a convenient way to create mountable attributes for SVG elements.

**Signature:**```typescript
svgAttr: {
    'accent-height': (value: SplitNValue<string | number>) => Renderable;
    accumulate: (value: SplitNValue<"none" | "sum">) => Renderable;
    additive: (value: SplitNValue<"sum" | "replace">) => Renderable;
    'alignment-baseline': (value: SplitNValue<"auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit">) => Renderable;
    'allow-reorder': (value: SplitNValue<"yes" | "no">) => Renderable;
    alphabetic: (value: SplitNValue<string | number>) => Renderable;
    amplitude: (value: SplitNValue<string | number>) => Renderable;
    'arabic-form': (value: SplitNValue<"initial" | "medial" | "terminal" | "isolated">) => Renderable;
    ascent: (value: SplitNValue<string | number>) => Renderable;
    attributeName: (value: SplitNValue<string>) => Renderable;
    attributeType: (value: SplitNValue<"auto" | "CSS" | "XML">) => Renderable;
    autoReverse: (value: SplitNValue<string | boolean>) => Renderable;
    azimuth: (value: SplitNValue<string | number>) => Renderable;
    baseFrequency: (value: SplitNValue<string | number>) => Renderable;
    baseProfile: (value: SplitNValue<string>) => Renderable;
    'baseline-shift': (value: SplitNValue<string | number>) => Renderable;
    bbox: (value: SplitNValue<string>) => Renderable;
    begin: (value: SplitNValue<string>) => Renderable;
    bias: (value: SplitNValue<string | number>) => Renderable;
    by: (value: SplitNValue<string>) => Renderable;
    calcMode: (value: SplitNValue<"discrete" | "linear" | "paced" | "spline">) => Renderable;
    'cap-height': (value: SplitNValue<string | number>) => Renderable;
    class: (value: SplitNValue<string>) => Renderable;
    clip: (value: SplitNValue<string>) => Renderable;
    'clip-path': (value: SplitNValue<string>) => Renderable;
    clipPathUnits: (value: SplitNValue<"userSpaceOnUse" | "objectBoundingBox">) => Renderable;
    clipRule: (value: SplitNValue<"inherit" | "nonzero" | "evenodd">) => Renderable;
    'color-interpolation': (value: SplitNValue<"auto" | "inherit" | "sRGB" | "linearRGB">) => Renderable;
    'color-interpolation-filters': (value: SplitNValue<"auto" | "inherit" | "sRGB" | "linearRGB">) => Renderable;
    'color-profile': (value: SplitNValue<string>) => Renderable;
    'color-rendering': (value: SplitNValue<"auto" | "inherit" | "optimizeSpeed" | "optimizeQuality">) => Renderable;
    contentScriptType: (value: SplitNValue<string>) => Renderable;
    contentStyleType: (value: SplitNValue<string>) => Renderable;
    crossorigin: (value: SplitNValue<"anonymous" | "use-credentials">) => Renderable;
    cursor: (value: SplitNValue<string>) => Renderable;
    cx: (value: SplitNValue<string | number>) => Renderable;
    cy: (value: SplitNValue<string | number>) => Renderable;
    d: (value: SplitNValue<string>) => Renderable;
    decelerate: (value: SplitNValue<string | number>) => Renderable;
    descent: (value: SplitNValue<string | number>) => Renderable;
    diffuseConstant: (value: SplitNValue<string | number>) => Renderable;
    direction: (value: SplitNValue<"ltr" | "rtl" | "inherit">) => Renderable;
    display: (value: SplitNValue<string>) => Renderable;
    divisor: (value: SplitNValue<string | number>) => Renderable;
    'dominant-baseline': (value: SplitNValue<"auto" | "middle" | "central" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit" | "text-bottom" | "text-top">) => Renderable;
    dur: (value: SplitNValue<string>) => Renderable;
    dx: (value: SplitNValue<string | number>) => Renderable;
    dy: (value: SplitNValue<string | number>) => Renderable;
    edgeMode: (value: SplitNValue<"none" | "duplicate" | "wrap">) => Renderable;
    elevation: (value: SplitNValue<string | number>) => Renderable;
    'enable-background': (value: SplitNValue<string>) => Renderable;
    end: (value: SplitNValue<string>) => Renderable;
    exponent: (value: SplitNValue<string | number>) => Renderable;
    externalResourcesRequired: (value: SplitNValue<string | boolean>) => Renderable;
    fill: (value: SplitNValue<string>) => Renderable;
    'fill-opacity': (value: SplitNValue<string | number>) => Renderable;
    'fill-rule': (value: SplitNValue<"inherit" | "nonzero" | "evenodd">) => Renderable;
    filter: (value: SplitNValue<string>) => Renderable;
    filterRes: (value: SplitNValue<string>) => Renderable;
    filterUnits: (value: SplitNValue<"userSpaceOnUse" | "objectBoundingBox">) => Renderable;
    'flood-color': (value: SplitNValue<string>) => Renderable;
    'flood-opacity': (value: SplitNValue<string | number>) => Renderable;
    focusable: (value: SplitNValue<string | boolean>) => Renderable;
    'font-family': (value: SplitNValue<string>) => Renderable;
    'font-size': (value: SplitNValue<string | number>) => Renderable;
    'font-size-adjust': (value: SplitNValue<string | number>) => Renderable;
    'font-stretch': (value: SplitNValue<string>) => Renderable;
    'font-style': (value: SplitNValue<"normal" | "italic" | "inherit" | "oblique">) => Renderable;
    'font-variant': (value: SplitNValue<string>) => Renderable;
    'font-weight': (value: SplitNValue<string>) => Renderable;
    format: (value: SplitNValue<string>) => Renderable;
    fr: (value: SplitNValue<string | number>) => Renderable;
    from: (value: SplitNValue<string>) => Renderable;
    fx: (value: SplitNValue<string | number>) => Renderable;
    fy: (value: SplitNValue<string | number>) => Renderable;
    g1: (value: SplitNValue<string>) => Renderable;
    g2: (value: SplitNValue<string>) => Renderable;
    'glyph-name': (value: SplitNValue<string>) => Renderable;
    'glyph-orientation-horizontal': (value: SplitNValue<string | number>) => Renderable;
    'glyph-orientation-vertical': (value: SplitNValue<string | number>) => Renderable;
    glyphRef: (value: SplitNValue<string>) => Renderable;
    gradientTransform: (value: SplitNValue<string>) => Renderable;
    gradientUnits: (value: SplitNValue<"userSpaceOnUse" | "objectBoundingBox">) => Renderable;
    hanging: (value: SplitNValue<string | number>) => Renderable;
    height: (value: SplitNValue<string | number>) => Renderable;
    'horiz-adv-x': (value: SplitNValue<string | number>) => Renderable;
    'horiz-origin-x': (value: SplitNValue<string | number>) => Renderable;
    'horiz-origin-y': (value: SplitNValue<string | number>) => Renderable;
    href: (value: SplitNValue<string>) => Renderable;
    id: (value: SplitNValue<string>) => Renderable;
    ideographic: (value: SplitNValue<string | number>) => Renderable;
    'image-rendering': (value: SplitNValue<"auto" | "inherit" | "optimizeSpeed" | "optimizeQuality">) => Renderable;
    in: (value: SplitNValue<string>) => Renderable;
    in2: (value: SplitNValue<string>) => Renderable;
    intercept: (value: SplitNValue<string | number>) => Renderable;
    k: (value: SplitNValue<string | number>) => Renderable;
    k1: (value: SplitNValue<string | number>) => Renderable;
    k2: (value: SplitNValue<string | number>) => Renderable;
    k3: (value: SplitNValue<string | number>) => Renderable;
    k4: (value: SplitNValue<string | number>) => Renderable;
    kernelMatrix: (value: SplitNValue<string>) => Renderable;
    kernelUnitLength: (value: SplitNValue<string | number>) => Renderable;
    kerning: (value: SplitNValue<string | number>) => Renderable;
    keyPoints: (value: SplitNValue<string>) => Renderable;
    keySplines: (value: SplitNValue<string>) => Renderable;
    keyTimes: (value: SplitNValue<string>) => Renderable;
    lang: (value: SplitNValue<string>) => Renderable;
    lengthAdjust: (value: SplitNValue<"spacing" | "spacingAndGlyphs">) => Renderable;
    'letter-spacing': (value: SplitNValue<string | number>) => Renderable;
    'lighting-color': (value: SplitNValue<string>) => Renderable;
    limitingConeAngle: (value: SplitNValue<string | number>) => Renderable;
    local: (value: SplitNValue<string>) => Renderable;
    'marker-end': (value: SplitNValue<string>) => Renderable;
    markerHeight: (value: SplitNValue<string | number>) => Renderable;
    'marker-mid': (value: SplitNValue<string>) => Renderable;
    'marker-start': (value: SplitNValue<string>) => Renderable;
    markerUnits: (value: SplitNValue<"strokeWidth" | "userSpaceOnUse">) => Renderable;
    markerWidth: (value: SplitNValue<string | number>) => Renderable;
    mask: (value: SplitNValue<string>) => Renderable;
    maskContentUnits: (value: SplitNValue<"userSpaceOnUse" | "objectBoundingBox">) => Renderable;
    maskUnits: (value: SplitNValue<"userSpaceOnUse" | "objectBoundingBox">) => Renderable;
    mathematical: (value: SplitNValue<string | number>) => Renderable;
    max: (value: SplitNValue<string>) => Renderable;
    media: (value: SplitNValue<string>) => Renderable;
    method: (value: SplitNValue<"align" | "stretch">) => Renderable;
    min: (value: SplitNValue<string>) => Renderable;
    mode: (value: SplitNValue<"normal" | "multiply" | "screen" | "darken" | "lighten">) => Renderable;
    name: (value: SplitNValue<string>) => Renderable;
    numOctaves: (value: SplitNValue<string | number>) => Renderable;
    offset: (value: SplitNValue<string | number>) => Renderable;
    opacity: (value: SplitNValue<string | number>) => Renderable;
    operator: (value: SplitNValue<"over" | "in" | "out" | "atop" | "xor" | "lighter" | "arithmetic">) => Renderable;
    order: (value: SplitNValue<string | number>) => Renderable;
    orient: (value: SplitNValue<string | number>) => Renderable;
    orientation: (value: SplitNValue<"h" | "v">) => Renderable;
    origin: (value: SplitNValue<string>) => Renderable;
    overflow: (value: SplitNValue<"auto" | "hidden" | "scroll" | "inherit" | "visible">) => Renderable;
    'overline-position': (value: SplitNValue<string | number>) => Renderable;
    'overline-thickness': (value: SplitNValue<string | number>) => Renderable;
    'paint-order': (value: SplitNValue<string>) => Renderable;
    'panose-1': (value: SplitNValue<string>) => Renderable;
    path: (value: SplitNValue<string>) => Renderable;
    pathLength: (value: SplitNValue<string | number>) => Renderable;
    patternContentUnits: (value: SplitNValue<"userSpaceOnUse" | "objectBoundingBox">) => Renderable;
    patternTransform: (value: SplitNValue<string>) => Renderable;
    patternUnits: (value: SplitNValue<"userSpaceOnUse" | "objectBoundingBox">) => Renderable;
    'pointer-events': (value: SplitNValue<"none" | "all" | "fill" | "stroke" | "inherit" | "visible" | "bounding-box" | "visiblePainted" | "visibleFill" | "visibleStroke" | "painted">) => Renderable;
    points: (value: SplitNValue<string>) => Renderable;
    pointsAtX: (value: SplitNValue<string | number>) => Renderable;
    pointsAtY: (value: SplitNValue<string | number>) => Renderable;
    pointsAtZ: (value: SplitNValue<string | number>) => Renderable;
    preserveAlpha: (value: SplitNValue<string | boolean>) => Renderable;
    preserveAspectRatio: (value: SplitNValue<string>) => Renderable;
    primitiveUnits: (value: SplitNValue<"userSpaceOnUse" | "objectBoundingBox">) => Renderable;
    r: (value: SplitNValue<string | number>) => Renderable;
    radius: (value: SplitNValue<string | number>) => Renderable;
    refX: (value: SplitNValue<string | number>) => Renderable;
    refY: (value: SplitNValue<string | number>) => Renderable;
    'rendering-intent': (value: SplitNValue<"auto" | "inherit" | "perceptual" | "relative-colorimetric" | "saturation" | "absolute-colorimetric">) => Renderable;
    repeatCount: (value: SplitNValue<string | number>) => Renderable;
    repeatDur: (value: SplitNValue<string>) => Renderable;
    requiredExtensions: (value: SplitNValue<string>) => Renderable;
    requiredFeatures: (value: SplitNValue<string>) => Renderable;
    restart: (value: SplitNValue<"always" | "whenNotActive" | "never">) => Renderable;
    result: (value: SplitNValue<string>) => Renderable;
    role: (value: SplitNValue<string>) => Renderable;
    rotate: (value: SplitNValue<string | number>) => Renderable;
    rx: (value: SplitNValue<string | number>) => Renderable;
    ry: (value: SplitNValue<string | number>) => Renderable;
    scale: (value: SplitNValue<string | number>) => Renderable;
    seed: (value: SplitNValue<string | number>) => Renderable;
    'shape-rendering': (value: SplitNValue<"auto" | "inherit" | "optimizeSpeed" | "crispEdges" | "geometricPrecision">) => Renderable;
    side: (value: SplitNValue<"left" | "right">) => Renderable;
    slope: (value: SplitNValue<string | number>) => Renderable;
    spacing: (value: SplitNValue<"auto" | "exact">) => Renderable;
    specularConstant: (value: SplitNValue<string | number>) => Renderable;
    specularExponent: (value: SplitNValue<string | number>) => Renderable;
    speed: (value: SplitNValue<string | number>) => Renderable;
    spreadMethod: (value: SplitNValue<"pad" | "reflect" | "repeat">) => Renderable;
    startOffset: (value: SplitNValue<string | number>) => Renderable;
    stdDeviation: (value: SplitNValue<string | number>) => Renderable;
    stemh: (value: SplitNValue<string | number>) => Renderable;
    stemv: (value: SplitNValue<string | number>) => Renderable;
    stitchTiles: (value: SplitNValue<"noStitch" | "stitch">) => Renderable;
    'stop-color': (value: SplitNValue<string>) => Renderable;
    'stop-opacity': (value: SplitNValue<string | number>) => Renderable;
    'strikethrough-position': (value: SplitNValue<string | number>) => Renderable;
    'strikethrough-thickness': (value: SplitNValue<string | number>) => Renderable;
    string: (value: SplitNValue<string>) => Renderable;
    stroke: (value: SplitNValue<string>) => Renderable;
    'stroke-dasharray': (value: SplitNValue<string>) => Renderable;
    'stroke-dashoffset': (value: SplitNValue<string | number>) => Renderable;
    'stroke-linecap': (value: SplitNValue<"inherit" | "butt" | "round" | "square">) => Renderable;
    'stroke-linejoin': (value: SplitNValue<"inherit" | "round" | "miter" | "bevel">) => Renderable;
    'stroke-miterlimit': (value: SplitNValue<string | number>) => Renderable;
    'stroke-opacity': (value: SplitNValue<string | number>) => Renderable;
    'stroke-width': (value: SplitNValue<string | number>) => Renderable;
    style: (value: SplitNValue<string>) => Renderable;
    surfaceScale: (value: SplitNValue<string | number>) => Renderable;
    systemLanguage: (value: SplitNValue<string>) => Renderable;
    tabindex: (value: SplitNValue<string | number>) => Renderable;
    tableValues: (value: SplitNValue<string>) => Renderable;
    target: (value: SplitNValue<string>) => Renderable;
    targetX: (value: SplitNValue<string | number>) => Renderable;
    targetY: (value: SplitNValue<string | number>) => Renderable;
    'text-anchor': (value: SplitNValue<"middle" | "inherit" | "start" | "end">) => Renderable;
    'text-decoration': (value: SplitNValue<"none" | "inherit" | "underline" | "overline" | "line-through" | "blink">) => Renderable;
    textLength: (value: SplitNValue<string | number>) => Renderable;
    'text-rendering': (value: SplitNValue<"auto" | "inherit" | "optimizeSpeed" | "geometricPrecision" | "optimizeLegibility">) => Renderable;
    title: (value: SplitNValue<string>) => Renderable;
    to: (value: SplitNValue<string>) => Renderable;
    transform: (value: SplitNValue<string>) => Renderable;
    'transform-origin': (value: SplitNValue<string>) => Renderable;
    type: (value: SplitNValue<string>) => Renderable;
    u1: (value: SplitNValue<string>) => Renderable;
    u2: (value: SplitNValue<string>) => Renderable;
    'underline-position': (value: SplitNValue<string | number>) => Renderable;
    'underline-thickness': (value: SplitNValue<string | number>) => Renderable;
    unicode: (value: SplitNValue<string>) => Renderable;
    'unicode-bidi': (value: SplitNValue<"normal" | "inherit" | "embed" | "isolate" | "bidi-override" | "isolate-override" | "plaintext">) => Renderable;
    'unicode-range': (value: SplitNValue<string>) => Renderable;
    'units-per-em': (value: SplitNValue<string | number>) => Renderable;
    'v-alphabetic': (value: SplitNValue<string | number>) => Renderable;
    values: (value: SplitNValue<string>) => Renderable;
    'vector-effect': (value: SplitNValue<"none" | "non-scaling-stroke" | "non-scaling-size" | "non-rotation" | "fixed-position">) => Renderable;
    version: (value: SplitNValue<string>) => Renderable;
    'vert-adv-y': (value: SplitNValue<string | number>) => Renderable;
    'vert-origin-x': (value: SplitNValue<string | number>) => Renderable;
    'vert-origin-y': (value: SplitNValue<string | number>) => Renderable;
    'v-hanging': (value: SplitNValue<string | number>) => Renderable;
    'v-ideographic': (value: SplitNValue<string | number>) => Renderable;
    viewBox: (value: SplitNValue<string>) => Renderable;
    viewTarget: (value: SplitNValue<string>) => Renderable;
    visibility: (value: SplitNValue<"hidden" | "inherit" | "visible" | "collapse">) => Renderable;
    'v-mathematical': (value: SplitNValue<string | number>) => Renderable;
    width: (value: SplitNValue<string | number>) => Renderable;
    widths: (value: SplitNValue<string>) => Renderable;
    'word-spacing': (value: SplitNValue<string | number>) => Renderable;
    'writing-mode': (value: SplitNValue<"inherit" | "lr-tb" | "rl-tb" | "tb-rl" | "lr" | "rl" | "tb">) => Renderable;
    x1: (value: SplitNValue<string | number>) => Renderable;
    x2: (value: SplitNValue<string | number>) => Renderable;
    x: (value: SplitNValue<string | number>) => Renderable;
    xChannelSelector: (value: SplitNValue<"R" | "G" | "B" | "A">) => Renderable;
    'x-height': (value: SplitNValue<string | number>) => Renderable;
    'xlink:actuate': (value: SplitNValue<"none" | "other" | "onLoad" | "onRequest">) => Renderable;
    'xlink:arcrole': (value: SplitNValue<string>) => Renderable;
    'xlink:href': (value: SplitNValue<string>) => Renderable;
    'xlink:role': (value: SplitNValue<string>) => Renderable;
    'xlink:show': (value: SplitNValue<"none" | "other" | "replace" | "embed" | "new">) => Renderable;
    'xlink:title': (value: SplitNValue<string>) => Renderable;
    'xlink:type': (value: SplitNValue<"none" | "simple" | "extended" | "locator" | "arc" | "resource" | "title">) => Renderable;
    xlinkActuate: (value: SplitNValue<"none" | "other" | "onLoad" | "onRequest">) => Renderable;
    xlinkArcrole: (value: SplitNValue<string>) => Renderable;
    xlinkHref: (value: SplitNValue<string>) => Renderable;
    xlinkRole: (value: SplitNValue<string>) => Renderable;
    xlinkShow: (value: SplitNValue<"none" | "other" | "replace" | "embed" | "new">) => Renderable;
    xlinkTitle: (value: SplitNValue<string>) => Renderable;
    xlinkType: (value: SplitNValue<"none" | "simple" | "extended" | "locator" | "arc" | "resource" | "title">) => Renderable;
    'xml:base': (value: SplitNValue<string>) => Renderable;
    'xml:lang': (value: SplitNValue<string>) => Renderable;
    'xml:space': (value: SplitNValue<"default" | "preserve">) => Renderable;
    xmlBase: (value: SplitNValue<string>) => Renderable;
    xmlLang: (value: SplitNValue<string>) => Renderable;
    xmlns: (value: SplitNValue<string>) => Renderable;
    'xmlns:xlink': (value: SplitNValue<string>) => Renderable;
    xmlnsXlink: (value: SplitNValue<string>) => Renderable;
    xmlSpace: (value: SplitNValue<"default" | "preserve">) => Renderable;
    y1: (value: SplitNValue<string | number>) => Renderable;
    y2: (value: SplitNValue<string | number>) => Renderable;
    y: (value: SplitNValue<string | number>) => Renderable;
    yChannelSelector: (value: SplitNValue<"R" | "G" | "B" | "A">) => Renderable;
    z: (value: SplitNValue<string | number>) => Renderable;
    zoomAndPan: (value: SplitNValue<"disable" | "magnify">) => Renderable;
}
```

## dom.svgattr: Example


```ts
const svg = html.svg(
 svgAttr.width(100),
 svgAttr.height(height), // where height is a `Signal<number>`
// ...
)
```

---

## dom.svgattributes: SVGAttributes type

Represents the attributes that can be used in SVG elements.

**Signature:**```typescript
export type SVGAttributes = {
    'accent-height': number | string;
    accumulate: 'none' | 'sum';
    additive: 'replace' | 'sum';
    'alignment-baseline': 'auto' | 'baseline' | 'before-edge' | 'text-before-edge' | 'middle' | 'central' | 'after-edge' | 'text-after-edge' | 'ideographic' | 'alphabetic' | 'hanging' | 'mathematical' | 'inherit';
    'allow-reorder': 'no' | 'yes';
    alphabetic: number | string;
    amplitude: number | string;
    'arabic-form': 'initial' | 'medial' | 'terminal' | 'isolated';
    ascent: number | string;
    attributeName: string;
    attributeType: 'CSS' | 'XML' | 'auto';
    autoReverse: boolean | string;
    azimuth: number | string;
    baseFrequency: number | string;
    baseProfile: string;
    'baseline-shift': number | string;
    bbox: string;
    begin: string;
    bias: number | string;
    by: string;
    calcMode: 'discrete' | 'linear' | 'paced' | 'spline';
    'cap-height': number | string;
    class: string;
    clip: string;
    'clip-path': string;
    clipPathUnits: 'userSpaceOnUse' | 'objectBoundingBox';
    clipRule: 'nonzero' | 'evenodd' | 'inherit';
    'color-interpolation': 'auto' | 'sRGB' | 'linearRGB' | 'inherit';
    'color-interpolation-filters': 'auto' | 'sRGB' | 'linearRGB' | 'inherit';
    'color-profile': string;
    'color-rendering': 'auto' | 'optimizeSpeed' | 'optimizeQuality' | 'inherit';
    contentScriptType: string;
    contentStyleType: string;
    crossorigin: 'anonymous' | 'use-credentials';
    cursor: string;
    cx: number | string;
    cy: number | string;
    d: string;
    decelerate: number | string;
    descent: number | string;
    diffuseConstant: number | string;
    direction: 'ltr' | 'rtl' | 'inherit';
    display: string;
    divisor: number | string;
    'dominant-baseline': 'auto' | 'text-bottom' | 'alphabetic' | 'ideographic' | 'middle' | 'central' | 'mathematical' | 'hanging' | 'text-top' | 'inherit';
    dur: string;
    dx: number | string;
    dy: number | string;
    edgeMode: 'duplicate' | 'wrap' | 'none';
    elevation: number | string;
    'enable-background': string;
    end: string;
    exponent: number | string;
    externalResourcesRequired: boolean | string;
    fill: string;
    'fill-opacity': number | string;
    'fill-rule': 'nonzero' | 'evenodd' | 'inherit';
    filter: string;
    filterRes: string;
    filterUnits: 'userSpaceOnUse' | 'objectBoundingBox';
    'flood-color': string;
    'flood-opacity': number | string;
    focusable: boolean | 'auto' | string;
    'font-family': string;
    'font-size': number | string;
    'font-size-adjust': number | string;
    'font-stretch': string;
    'font-style': 'normal' | 'italic' | 'oblique' | 'inherit';
    'font-variant': string;
    'font-weight': string;
    format: string;
    fr: number | string;
    from: string;
    fx: number | string;
    fy: number | string;
    g1: string;
    g2: string;
    'glyph-name': string;
    'glyph-orientation-horizontal': number | string;
    'glyph-orientation-vertical': number | string;
    glyphRef: string;
    gradientTransform: string;
    gradientUnits: 'userSpaceOnUse' | 'objectBoundingBox';
    hanging: number | string;
    height: number | string;
    'horiz-adv-x': number | string;
    'horiz-origin-x': number | string;
    'horiz-origin-y': number | string;
    href: string;
    id: string;
    ideographic: number | string;
    'image-rendering': 'auto' | 'optimizeSpeed' | 'optimizeQuality' | 'inherit';
    in: string;
    in2: string;
    intercept: number | string;
    k: number | string;
    k1: number | string;
    k2: number | string;
    k3: number | string;
    k4: number | string;
    kernelMatrix: string;
    kernelUnitLength: number | string;
    kerning: number | string;
    keyPoints: string;
    keySplines: string;
    keyTimes: string;
    lang: string;
    lengthAdjust: 'spacing' | 'spacingAndGlyphs';
    'letter-spacing': number | string;
    'lighting-color': string;
    limitingConeAngle: number | string;
    local: string;
    'marker-end': string;
    markerHeight: number | string;
    'marker-mid': string;
    'marker-start': string;
    markerUnits: 'userSpaceOnUse' | 'strokeWidth';
    markerWidth: number | string;
    mask: string;
    maskContentUnits: 'userSpaceOnUse' | 'objectBoundingBox';
    maskUnits: 'userSpaceOnUse' | 'objectBoundingBox';
    mathematical: number | string;
    max: string;
    media: string;
    method: 'align' | 'stretch';
    min: string;
    mode: 'normal' | 'multiply' | 'screen' | 'darken' | 'lighten';
    name: string;
    numOctaves: number | string;
    offset: number | string;
    opacity: number | string;
    operator: 'over' | 'in' | 'out' | 'atop' | 'xor' | 'lighter' | 'arithmetic';
    order: number | string;
    orient: 'auto' | 'auto-start-reverse' | number | string;
    orientation: 'h' | 'v';
    origin: string;
    overflow: 'visible' | 'hidden' | 'scroll' | 'auto' | 'inherit';
    'overline-position': number | string;
    'overline-thickness': number | string;
    'paint-order': string;
    'panose-1': string;
    path: string;
    pathLength: number | string;
    patternContentUnits: 'userSpaceOnUse' | 'objectBoundingBox';
    patternTransform: string;
    patternUnits: 'userSpaceOnUse' | 'objectBoundingBox';
    'pointer-events': 'bounding-box' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all' | 'none' | 'inherit';
    points: string;
    pointsAtX: number | string;
    pointsAtY: number | string;
    pointsAtZ: number | string;
    preserveAlpha: boolean | string;
    preserveAspectRatio: string;
    primitiveUnits: 'userSpaceOnUse' | 'objectBoundingBox';
    r: number | string;
    radius: number | string;
    refX: number | string;
    refY: number | string;
    'rendering-intent': 'auto' | 'perceptual' | 'relative-colorimetric' | 'saturation' | 'absolute-colorimetric' | 'inherit';
    repeatCount: number | string;
    repeatDur: string;
    requiredExtensions: string;
    requiredFeatures: string;
    restart: 'always' | 'whenNotActive' | 'never';
    result: string;
    role: string;
    rotate: number | string;
    rx: number | string;
    ry: number | string;
    scale: number | string;
    seed: number | string;
    'shape-rendering': 'auto' | 'optimizeSpeed' | 'crispEdges' | 'geometricPrecision' | 'inherit';
    side: 'left' | 'right';
    slope: number | string;
    spacing: 'auto' | 'exact';
    specularConstant: number | string;
    specularExponent: number | string;
    speed: number | string;
    spreadMethod: 'pad' | 'reflect' | 'repeat';
    startOffset: number | string;
    stdDeviation: number | string;
    stemh: number | string;
    stemv: number | string;
    stitchTiles: 'noStitch' | 'stitch';
    'stop-color': string;
    'stop-opacity': number | string;
    'strikethrough-position': number | string;
    'strikethrough-thickness': number | string;
    string: string;
    stroke: string;
    'stroke-dasharray': string;
    'stroke-dashoffset': number | string;
    'stroke-linecap': 'butt' | 'round' | 'square' | 'inherit';
    'stroke-linejoin': 'miter' | 'round' | 'bevel' | 'inherit';
    'stroke-miterlimit': number | string;
    'stroke-opacity': number | string;
    'stroke-width': number | string;
    style: string;
    surfaceScale: number | string;
    systemLanguage: string;
    tabindex: number | string;
    tableValues: string;
    target: string;
    targetX: number | string;
    targetY: number | string;
    'text-anchor': 'start' | 'middle' | 'end' | 'inherit';
    'text-decoration': 'none' | 'underline' | 'overline' | 'line-through' | 'blink' | 'inherit';
    textLength: number | string;
    'text-rendering': 'auto' | 'optimizeSpeed' | 'optimizeLegibility' | 'geometricPrecision' | 'inherit';
    title: string;
    to: string;
    transform: string;
    'transform-origin': string;
    type: string;
    u1: string;
    u2: string;
    'underline-position': number | string;
    'underline-thickness': number | string;
    unicode: string;
    'unicode-bidi': 'normal' | 'embed' | 'isolate' | 'bidi-override' | 'isolate-override' | 'plaintext' | 'inherit';
    'unicode-range': string;
    'units-per-em': number | string;
    'v-alphabetic': number | string;
    values: string;
    'vector-effect': 'none' | 'non-scaling-stroke' | 'non-scaling-size' | 'non-rotation' | 'fixed-position';
    version: string;
    'vert-adv-y': number | string;
    'vert-origin-x': number | string;
    'vert-origin-y': number | string;
    'v-hanging': number | string;
    'v-ideographic': number | string;
    viewBox: string;
    viewTarget: string;
    visibility: 'visible' | 'hidden' | 'collapse' | 'inherit';
    'v-mathematical': number | string;
    width: number | string;
    widths: string;
    'word-spacing': number | string;
    'writing-mode': 'lr-tb' | 'rl-tb' | 'tb-rl' | 'lr' | 'rl' | 'tb' | 'inherit';
    x1: number | string;
    x2: number | string;
    x: number | string;
    xChannelSelector: 'R' | 'G' | 'B' | 'A';
    'x-height': number | string;
    'xlink:actuate': 'onLoad' | 'onRequest' | 'other' | 'none';
    'xlink:arcrole': string;
    'xlink:href': string;
    'xlink:role': string;
    'xlink:show': 'new' | 'replace' | 'embed' | 'other' | 'none';
    'xlink:title': string;
    'xlink:type': 'simple' | 'extended' | 'locator' | 'arc' | 'resource' | 'title' | 'none';
    xlinkActuate: 'onLoad' | 'onRequest' | 'other' | 'none';
    xlinkArcrole: string;
    xlinkHref: string;
    xlinkRole: string;
    xlinkShow: 'new' | 'replace' | 'embed' | 'other' | 'none';
    xlinkTitle: string;
    xlinkType: 'simple' | 'extended' | 'locator' | 'arc' | 'resource' | 'title' | 'none';
    'xml:base': string;
    'xml:lang': string;
    'xml:space': 'default' | 'preserve';
    xmlBase: string;
    xmlLang: string;
    xmlns: string;
    'xmlns:xlink': string;
    xmlnsXlink: string;
    xmlSpace: 'default' | 'preserve';
    y1: number | string;
    y2: number | string;
    y: number | string;
    yChannelSelector: 'R' | 'G' | 'B' | 'A';
    z: number | string;
    zoomAndPan: 'disable' | 'magnify';
};
```

---

## dom.svgel: SVGEl() function

Creates a Renderable that represents an SVG element.

**Signature:**```typescript
SVGEl: (tagName: string, ...children: TNode[]) => Renderable
```## dom.svgel: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| tagName | string | The tag name of the SVG element. |
| children | [TNode](#dom-tnode)\[\] | The child nodes of the SVG element. |


**Returns:**

[Renderable](#dom-renderable)

A renderable function that creates and appends the SVG element to the DOM.

---

## dom.svgtags: SVGTags type

Represents a mapping of SVG tag names to their corresponding SVG element types.

**Signature:**```typescript
export type SVGTags = {
    a: SVGAElement;
    animate: SVGAnimateElement;
    animateMotion: SVGAnimateMotionElement;
    animateTransform: SVGAnimateTransformElement;
    circle: SVGCircleElement;
    clipPath: SVGClipPathElement;
    defs: SVGDefsElement;
    desc: SVGDescElement;
    ellipse: SVGEllipseElement;
    feBlend: SVGFEBlendElement;
    feColorMatrix: SVGFEColorMatrixElement;
    feComponentTransfer: SVGFEComponentTransferElement;
    feComposite: SVGFECompositeElement;
    feConvolveMatrix: SVGFEConvolveMatrixElement;
    feDiffuseLighting: SVGFEDiffuseLightingElement;
    feDisplacementMap: SVGFEDisplacementMapElement;
    feDistantLight: SVGFEDistantLightElement;
    feDropShadow: SVGFEDropShadowElement;
    feFlood: SVGFEFloodElement;
    feFuncA: SVGFEFuncAElement;
    feFuncB: SVGFEFuncBElement;
    feFuncG: SVGFEFuncGElement;
    feFuncR: SVGFEFuncRElement;
    feGaussianBlur: SVGFEGaussianBlurElement;
    feImage: SVGFEImageElement;
    feMerge: SVGFEMergeElement;
    feMergeNode: SVGFEMergeNodeElement;
    feMorphology: SVGFEMorphologyElement;
    feOffset: SVGFEOffsetElement;
    fePointLight: SVGFEPointLightElement;
    feSpecularLighting: SVGFESpecularLightingElement;
    feSpotLight: SVGFESpotLightElement;
    feTile: SVGFETileElement;
    feTurbulence: SVGFETurbulenceElement;
    filter: SVGFilterElement;
    foreignObject: SVGForeignObjectElement;
    g: SVGGElement;
    image: SVGImageElement;
    line: SVGLineElement;
    linearGradient: SVGLinearGradientElement;
    marker: SVGMarkerElement;
    mask: SVGMaskElement;
    metadata: SVGMetadataElement;
    mpath: SVGMPathElement;
    path: SVGPathElement;
    pattern: SVGPatternElement;
    polygon: SVGPolygonElement;
    polyline: SVGPolylineElement;
    radialGradient: SVGRadialGradientElement;
    rect: SVGRectElement;
    script: SVGScriptElement;
    set: SVGSetElement;
    stop: SVGStopElement;
    style: SVGStyleElement;
    svg: SVGSVGElement;
    switch: SVGSwitchElement;
    symbol: SVGSymbolElement;
    text: SVGTextElement;
    textPath: SVGTextPathElement;
    title: SVGTitleElement;
    tspan: SVGTSpanElement;
    use: SVGUseElement;
    view: SVGViewElement;
};
```

---

## dom.task: Task() function

**Signature:**```typescript
Task: <T>(task: () => Promise<T>, options: import('@tempots/render').TaskOptions<T, DOMContext, typeof DOM_RENDERABLE_TYPE> | ((value: T) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>)) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.task: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| task | () =&gt; Promise&lt;T&gt; |  |
| options | import('@tempots/render').TaskOptions&lt;T, [DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; \\| ((value: T) =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;) |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.textnode: TextNode() function

Creates a renderable text node.

**Signature:**```typescript
TextNode: <T extends Primitive>(value: Value<T>) => Renderable
```## dom.textnode: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | Value&lt;T&gt; | The value of the text node. |


**Returns:**

[Renderable](#dom-renderable)

A renderable text node.

---

## dom.tnode: TNode type

A flexible type representing any content that can be rendered in Tempo.

TNode (Template Node) is the union type that encompasses all possible content that can be rendered in a Tempo application. This includes components, text, signals, arrays of content, and null/undefined values for conditional rendering.

**Signature:**```typescript
export type TNode<CTX extends DOMContext = DOMContext> = Renderable<CTX> | string | number | boolean | Signal<string> | Signal<number> | Signal<boolean> | Signal<string | Nil> | Signal<number | Nil> | Signal<boolean | Nil> | undefined | null | Renderable<CTX>[];
```
**References:** [DOMContext](#dom-domcontext), [Renderable](#dom-renderable)

## dom.tnode: Example 1


```typescript
// All of these are valid TNode values:

// Renderable component
const component: TNode = MyComponent()

// Static text
const text: TNode = 'Hello, World!'

// Signal text
const dynamicText: TNode = userNameSignal

// Array of content
const list: TNode = [
  html.div('Item 1'),
  html.div('Item 2'),
  html.div('Item 3')
]

// Conditional content
const conditional: TNode = isVisible.value ? html.div('Visible') : null
```

## dom.tnode: Example 2


```typescript
// Function that accepts any renderable content
function Container(children: TNode): Renderable {
  return html.div(
    attr.class('container'),
    children // Can be any TNode type
  )
}

// Usage with different TNode types
Container('Simple text')
Container(MyComponent())
Container([html.p('Paragraph 1'), html.p('Paragraph 2')])
Container(isLoading.value ? 'Loading...' : null)
```

## dom.tnode: Example 3


```typescript
// Building complex content with TNode
const buildContent = (items: string[]): TNode => {
  if (items.length === 0) {
    return html.div('No items found')
  }

  return items.map(item => html.div(item))
}
```

---

## dom.transitionconfig: TransitionConfig type

Configuration for enter/exit transitions.

**Signature:**```typescript
export type TransitionConfig = {
    readonly exitClass?: string;
    readonly exitDuration?: number;
    readonly enterClass?: string;
    readonly enterDuration?: number;
    readonly useAnimationEvents?: boolean;
};
```

---

## dom.transitionkeyedforeach: TransitionKeyedForEach() function

A drop-in replacement for `KeyedForEach` that supports enter and exit animations by delaying DOM removal. Items that leave the list are kept in the DOM with an `isExiting` signal set to `true`, allowing CSS transitions or class-based animations to play before removal.

**Signature:**```typescript
export declare function TransitionKeyedForEach<T>(items: Signal<T[]>, key: (item: T) => string | number, renderFn: (item: Signal<T>, position: KeyedPosition, isExiting: Signal<boolean>) => TNode, config: TransitionConfig): Renderable;
```## dom.transitionkeyedforeach: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| items | Signal&lt;T\[\]&gt; | A signal of the current item array. |
| key | (item: T) =&gt; string \\| number | A function that returns a unique key for each item. |
| renderFn | (item: Signal&lt;T&gt;, position: KeyedPosition, isExiting: Signal&lt;boolean&gt;) =&gt; [TNode](#dom-tnode) | Renders each item. Receives the item signal, keyed position, and an `isExiting` signal. |
| config | [TransitionConfig](#dom-transitionconfig) | Transition configuration (classes, durations). |


**Returns:**

[Renderable](#dom-renderable)

A renderable.

---

## dom.tweenconfig: TweenConfig type

Configuration for a tween animation.

**Signature:**```typescript
export type TweenConfig<T> = {
    readonly duration?: number;
    readonly easing?: EasingFn;
    readonly interpolate?: Interpolate<T>;
    readonly reducedMotion?: Signal<boolean>;
};
```

---

## dom.tweenhandle: TweenHandle type

Handle returned by [createTween()](#dom-createtween).

**Signature:**```typescript
export type TweenHandle<T> = {
    readonly value: Signal<T>;
    tweenTo: (target: T) => void;
    cancel: () => void;
    dispose: () => void;
};
```

---

## dom.unless: Unless() function

**Signature:**```typescript
Unless: (condition: import('@tempots/core').Value<boolean>, then: () => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, otherwise?: (() => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.unless: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| condition | import('@tempots/core').Value&lt;boolean&gt; |  |
| then | () =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |
| otherwise | (() =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;) \\| undefined | _(Optional)_ |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.use: Use() function

**Signature:**```typescript
Use: <T>(provider: import('@tempots/render').Provider<T, unknown, DOMContext>, child: (provider: T) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.use: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| provider | import('@tempots/render').Provider&lt;T, unknown, [DOMContext](#dom-domcontext)&gt; |  |
| child | (provider: T) =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.usemany: UseMany() function

**Signature:**```typescript
UseMany: <P extends import('@tempots/render').Provider<unknown, unknown, DOMContext>[]>(...providers: P) => (child: (...values: import('@tempots/render').ToProviderTypes<P>) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.usemany: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| providers | P |  |


**Returns:**

(child: (...values: import('@tempots/render').ToProviderTypes&lt;P&gt;) =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;) =&gt; import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.useoptional: UseOptional variable

**Signature:**```typescript
UseOptional: {
    <T>(provider: import('@tempots/render').Provider<T, unknown, DOMContext>, child: (value: T | undefined) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>): import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>;
    <T>(provider: import('@tempots/render').Provider<T, unknown, DOMContext>, fallback: T, child: (value: T) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>): import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>;
}
```

---

## dom.when: When() function

**Signature:**```typescript
When: (condition: import('@tempots/core').Value<boolean>, then: () => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>, otherwise?: (() => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) | undefined) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.when: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| condition | import('@tempots/core').Value&lt;boolean&gt; |  |
| then | () =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |
| otherwise | (() =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;) \\| undefined | _(Optional)_ |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.withbrowserctx: WithBrowserCtx() function

Returns a renderable object that executes the given function with the current DOMContext as argument. The given function can return a TNode or void. If you need to perform some actions when the Renderable is disposed, you can use `OnDispose` as the return value.

**Signature:**```typescript
WithBrowserCtx: (fn: (ctx: BrowserContext) => TNode | void) => Renderable
```## dom.withbrowserctx: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (ctx: [BrowserContext](#dom-browsercontext)) =&gt; [TNode](#dom-tnode) \\| void | The function to be executed with the DOMContext argument. |


**Returns:**

[Renderable](#dom-renderable)

A Clear function that can be used to clean up any resources associated with the execution.

---

## dom.withctx: WithCtx() function

Returns a renderable object that executes the given function with the current DOMContext as argument. The given function can return a TNode or void. If you need to perform some actions when the Renderable is disposed, you can use `OnDispose` as the return value.

**Signature:**```typescript
WithCtx: (fn: (ctx: DOMContext) => TNode | void) => Renderable
```## dom.withctx: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (ctx: [DOMContext](#dom-domcontext)) =&gt; [TNode](#dom-tnode) \\| void | The function to be executed with the DOMContext argument. |


**Returns:**

[Renderable](#dom-renderable)

A Clear function that can be used to clean up any resources associated with the execution.

---

## dom.withdispose: WithDispose type

Object with a dispose method, specialized for DOMContext.

**Signature:**```typescript
export type WithDispose = BaseWithDispose<DOMContext>;
```
**References:** [DOMContext](#dom-domcontext)

---

## dom.withelement: WithElement() function

Executes a callback function when the parent element is mounted in the DOM. The given function can return a TNode or void. Any returned TNode will be appended to the element argument. If you need to perform some actions when the Renderable is disposed, you can use `OnDispose` as the return value.

**Signature:**```typescript
WithElement: <T extends HTMLElement>(fn: (element: T) => TNode | void) => Renderable
```## dom.withelement: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (element: T) =&gt; [TNode](#dom-tnode) \\| void | The callback function to be executed. |


**Returns:**

[Renderable](#dom-renderable)

- The renderable function.

---

## dom.withheadlessctx: WithHeadlessCtx() function

Returns a renderable object that executes the given function with the current DOMContext as argument.

**Signature:**```typescript
WithHeadlessCtx: (fn: (ctx: HeadlessContext) => TNode | void) => Renderable
```## dom.withheadlessctx: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (ctx: [HeadlessContext](#dom-headlesscontext)) =&gt; [TNode](#dom-tnode) \\| void | The function to be executed with the DOMContext argument. |


**Returns:**

[Renderable](#dom-renderable)

A Clear function that can be used to clean up any resources associated with the execution.

---

## dom.withprovider: WithProvider() function

**Signature:**```typescript
WithProvider: (fn: (opts: import('@tempots/render').ProviderOptions<DOMContext>) => void | import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.withprovider: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (opts: import('@tempots/render').ProviderOptions&lt;[DOMContext](#dom-domcontext)&gt;) =&gt; void \\| import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

## dom.withscope: WithScope() function

**Signature:**```typescript
WithScope: (fn: (scope: import('@tempots/core').DisposalScope) => import('@tempots/core').TNode<DOMContext, typeof DOM_RENDERABLE_TYPE>) => import('@tempots/core').Renderable<DOMContext, typeof DOM_RENDERABLE_TYPE>
```## dom.withscope: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (scope: import('@tempots/core').DisposalScope) =&gt; import('@tempots/core').TNode&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt; |  |


**Returns:**

import('@tempots/core').Renderable&lt;[DOMContext](#dom-domcontext), typeof [DOM\_RENDERABLE\_TYPE](#dom-domrenderabletype)&gt;

---

# tempots-std api index

[Home](#tempots-ui-api-index)

## tempots-std: API Reference

## tempots-std: Packages


| Package | Description |
| --- | --- |
| [@tempots/std](#std) |  |

---

## std.adddays: addDays() function

Adds the specified number of days to a date.

This function creates a new Date object with the specified number of days added. Negative values subtract days.

**Signature:**```typescript
addDays: (date: Date, days: number) => Date
```## std.adddays: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| date | Date | The base date |
| days | number | Number of days to add (can be negative) |


**Returns:**

Date

A new Date object with days added

## std.adddays: Example```typescript
const date = new Date('2023-01-15')
const future = addDays(date, 7)
// Result: 2023-01-22

const past = addDays(date, -3)
// Result: 2023-01-12
```

---

## std.addhours: addHours() function

Adds the specified number of hours to a date.

This function creates a new Date object with the specified number of hours added. Negative values subtract hours.

**Signature:**```typescript
addHours: (date: Date, hours: number) => Date
```## std.addhours: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| date | Date | The base date |
| hours | number | Number of hours to add (can be negative) |


**Returns:**

Date

A new Date object with hours added

## std.addhours: Example```typescript
const date = new Date('2023-01-15T10:00:00')
const future = addHours(date, 5)
// Result: 2023-01-15T15:00:00

const past = addHours(date, -2)
// Result: 2023-01-15T08:00:00
```

---

## std.addminutes: addMinutes() function

Adds the specified number of minutes to a date.

This function creates a new Date object with the specified number of minutes added. Negative values subtract minutes.

**Signature:**```typescript
addMinutes: (date: Date, minutes: number) => Date
```## std.addminutes: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| date | Date | The base date |
| minutes | number | Number of minutes to add (can be negative) |


**Returns:**

Date

A new Date object with minutes added

## std.addminutes: Example```typescript
const date = new Date('2023-01-15T10:30:00')
const future = addMinutes(date, 45)
// Result: 2023-01-15T11:15:00

const past = addMinutes(date, -15)
// Result: 2023-01-15T10:15:00
```

---

## std.analogous: analogous() function

Returns an analogous color scheme consisting of the original color and two neighbors at the given angle offset.

**Signature:**```typescript
analogous: (c: Color, angle?: number) => [Color, Color, Color]
```## std.analogous: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | Any color value |
| angle | number | _(Optional)_ The hue offset in degrees (default 30) |


**Returns:**

\[[Color](#std-color), [Color](#std-color), [Color](#std-color)\]

A triple of \[original, +angle, -angle\] in the same color space as the input

## std.analogous: Example```ts
const red = rgba(1, 0, 0, 1)
const [base, warm, cool] = analogous(red)
```

---

## std.angledifference: angleDifference() function

Calculates the minimum difference between two angles in degrees.

**Signature:**```typescript
angleDifference: (a: number, b: number, turn?: number) => number
```## std.angledifference: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | number | The first angle in degrees. |
| b | number | The second angle in degrees. |
| turn | number | _(Optional)_ The total number of degrees in a full turn. Default is 360.0. |


**Returns:**

number

The difference between the two angles.

## std.angledifference: Example```ts
angleDifference(0, 90) // returns 90
angleDifference(90, 0) // returns -90
angleDifference(0, 270) // returns -90
angleDifference(270, 0) // returns 90
```

---

## std.applyarraydiffoperations: applyArrayDiffOperations() function

Applies a series of operations to an array and returns the modified array.

**Signature:**```typescript
applyArrayDiffOperations: <T>(operations: ArrayDiffOperations<T>, start: T[]) => T[]
```## std.applyarraydiffoperations: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| operations | [ArrayDiffOperations](#std-arraydiffoperations)&lt;T&gt; | The operations to apply. |
| start | T\[\] | The initial array. |


**Returns:**

T\[\]

The modified array after applying the operations.

---

## std.arearraysequal: areArraysEqual() function

Checks if two arrays are equal based on a custom equality function.

**Signature:**```typescript
areArraysEqual: <T>(a: T[], b: T[], equals: (a: T, b: T) => boolean) => boolean
```## std.arearraysequal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | T\[\] | The first array. |
| b | T\[\] | The second array. |
| equals | (a: T, b: T) =&gt; boolean | The custom equality function to compare elements. |


**Returns:**

boolean

Returns `true` if the arrays are equal, `false` otherwise.

---

## std.argsafter: ArgsAfter type

**Signature:**```typescript
export type ArgsAfter<Args extends unknown[], After extends ArgsSubset<Args>> = Args extends [...After, ...infer Rest] ? Rest : never;
```
**References:** [ArgsSubset](#std-argssubset)

---

## std.argssubset: ArgsSubset type

**Signature:**```typescript
export type ArgsSubset<T extends unknown[]> = T extends [] ? [] : T extends [infer A, ...infer Rest] ? [A] | [A, ...ArgsSubset<Rest>] : never;
```
**References:** [ArgsSubset](#std-argssubset)

---

## std.arraydiffoperations: ArrayDiffOperations type

Represents the different operations that can be performed on an array.

**Signature:**```typescript
export type ArrayDiffOperations<T> = {
    removals: Array<{
        at: number;
        qt: number;
    }>;
    swaps: Array<{
        from: number;
        to: number;
    }>;
    inserts: Array<{
        at: number;
        values: T[];
    }>;
};
```

---

## std.arrayhasvalues: arrayHasValues() function

Checks if an array has values.

**Signature:**```typescript
arrayHasValues: <T>(arr: T[]) => arr is [T, ...T[]]
```## std.arrayhasvalues: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| arr | T\[\] | The array to check. |


**Returns:**

arr is \[T, ...T\[\]\]

`true` if the array has values, `false` otherwise.

---

## std.arrayhead: arrayHead() function

Returns the first element of an array, or `undefined` if the array is empty.

**Signature:**```typescript
arrayHead: <A>(arr: A[]) => Maybe<A>
```## std.arrayhead: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| arr | A\[\] | The input array. |


**Returns:**

[Maybe](#std-maybe)&lt;A&gt;

The first element of the array, or `undefined` if the array is empty.

---

## std.arraytail: arrayTail() function

Returns a new array containing all elements of the input array except for the first element.

**Signature:**```typescript
arrayTail: <A>(arr: A[]) => A[]
```## std.arraytail: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| arr | A\[\] | The input array. |


**Returns:**

A\[\]

A new array containing all elements of the input array except for the first element.

---

## std.asyncfailure: AsyncFailure type

Represents a failure result.

**Signature:**```typescript
export type AsyncFailure<E> = {
    readonly type: 'AsyncFailure';
    readonly error: E;
};
```

---

## std.asyncresult: AsyncResult variable

A set of utility functions for working with `AsyncResult`.

**Signature:**```typescript
AsyncResult: {
    notAsked: {
        type: "NotAsked";
    };
    loading<V>(previousValue?: Maybe<V>): AsyncResult<V, never>;
    success<V>(value: V): AsyncResult<V, never>;
    failure<E>(error: E): AsyncResult<never, E>;
    isSuccess<V, E>(r: AsyncResult<V, E>): r is AsyncSuccess<V>;
    isFailure<V, E>(r: AsyncResult<V, E>): r is AsyncFailure<E>;
    isNotAsked<V, E>(r: AsyncResult<V, E>): r is NotAsked;
    isLoading<V, E>(r: AsyncResult<V, E>): r is Loading<V>;
    getOrElse<V, E>(r: AsyncResult<V, E>, alt: V): V;
    getOrElseLazy<V, E>(r: AsyncResult<V, E>, altf: () => V): V;
    getOrNull<V, E>(r: AsyncResult<V, E>): V | null;
    getOrUndefined<V, E>(r: AsyncResult<V, E>): Maybe<V>;
    getUnsafe: <V, E>(r: AsyncResult<V, E>) => V;
    match: <V1, V2, E>(r: AsyncResult<V1, E>, { success, failure, loading, notAsked, }: {
        success: (value: V1) => V2;
        failure: (error: E) => V2;
        loading: (previousValue?: V1) => V2;
        notAsked: () => V2;
    }) => V2;
    effect: <V, E>(r: AsyncResult<V, E>, handlers: {
        success?: (value: V) => void;
        failure?: (error: E) => void;
        loading?: (previousValue?: V) => void;
        notAsked?: () => void;
        else?: () => void;
    }) => AsyncResult<V, E>;
    whenSuccess: <V, E>(r: AsyncResult<V, E>, apply: (v: V) => void) => AsyncResult<V, E>;
    whenFailure: <V, E>(r: AsyncResult<V, E>, apply: (e: E) => void) => AsyncResult<V, E>;
    equals: <V, E>(r1: AsyncResult<V, E>, r2: AsyncResult<V, E>, options?: {
        valueEquals: (v1: V, v2: V) => boolean;
        errorEquals: (e1: E, e2: E) => boolean;
    }) => boolean;
    all: <V, E>(results: AsyncResult<V, E>[]) => AsyncResult<V[], E>;
    ofPromise: <V>(p: Promise<V>) => Promise<AsyncResult<V, Error>>;
    map: <V, U, E>(result: AsyncResult<V, E>, fn: (value: V) => U) => AsyncResult<U, E>;
    flatMap: <V, U, E>(result: AsyncResult<V, E>, fn: (value: V) => AsyncResult<U, E>) => AsyncResult<U, E>;
    mapError: <V, E, F>(result: AsyncResult<V, E>, fn: (error: E) => F) => AsyncResult<V, F>;
    flatMapError: <V, E, F>(result: AsyncResult<V, E>, fn: (error: E) => AsyncResult<V, F>) => AsyncResult<V, F>;
    toResult: <V, E>(result: AsyncResult<V, E>) => import('./result').Result<V, E> | undefined;
    isSettled<V, E>(r: AsyncResult<V, E>): r is Settled<V, E>;
    recover: <V, E>(result: AsyncResult<V, E>, fn: (error: E) => V) => AsyncResult<V, never>;
    ap: <V, U, E>(resultFn: AsyncResult<(v: V) => U, E>, resultVal: AsyncResult<V, E>) => AsyncResult<U, E>;
    map2: <V1, V2, U, E>(r1: AsyncResult<V1, E>, r2: AsyncResult<V2, E>, fn: (v1: V1, v2: V2) => U) => AsyncResult<U, E>;
    map3: <V1, V2, V3, U, E>(r1: AsyncResult<V1, E>, r2: AsyncResult<V2, E>, r3: AsyncResult<V3, E>, fn: (v1: V1, v2: V2, v3: V3) => U) => AsyncResult<U, E>;
}
```

---

## std.asyncsuccess: AsyncSuccess type

Represents a successful result.

**Signature:**```typescript
export type AsyncSuccess<V> = {
    readonly type: 'AsyncSuccess';
    readonly value: V;
};
```

---

## std.biabs: biAbs() function

Returns the absolute value of a bigint.

**Signature:**```typescript
biAbs: (x: bigint) => bigint
```## std.biabs: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The bigint to compute the absolute value of. |


**Returns:**

bigint

The absolute value of `x`.

---

## std.biceildiv: biCeilDiv() function

Calculates the ceiling division of two BigInt numbers.

**Signature:**```typescript
biCeilDiv: (x: bigint, y: bigint) => bigint
```## std.biceildiv: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The dividend. |
| y | bigint | The divisor. |


**Returns:**

bigint

The result of dividing `x` by `y`, rounded up to the nearest whole number.

---

## std.bicompare: biCompare() function

Compares two BigInt values and returns a number indicating their relative order.

**Signature:**```typescript
biCompare: (x: bigint, y: bigint) => number
```## std.bicompare: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The first BigInt value to compare. |
| y | bigint | The second BigInt value to compare. |


**Returns:**

number

A negative number if `x` is less than `y`, a positive number if `x` is greater than `y`,

or zero if `x` is equal to `y`.

---

## std.bifloordiv: biFloorDiv() function

Divides two BigInt numbers and returns the largest integer less than or equal to the quotient.

**Signature:**```typescript
biFloorDiv: (x: bigint, y: bigint) => bigint
```## std.bifloordiv: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The dividend. |
| y | bigint | The divisor. |


**Returns:**

bigint

The largest integer less than or equal to the quotient of `x` divided by `y`.

---

## std.bigcd: biGcd() function

Calculates the greatest common divisor (GCD) of two BigInt numbers.

**Signature:**```typescript
biGcd: (x: bigint, y: bigint) => bigint
```## std.bigcd: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The first BigInt number. |
| y | bigint | The second BigInt number. |


**Returns:**

bigint

The GCD of `x` and `y`.

---

## std.biiseven: biIsEven() function

Checks if a given bigint is even.

**Signature:**```typescript
biIsEven: (x: bigint) => boolean
```## std.biiseven: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The bigint to check. |


**Returns:**

boolean

`true` if the bigint is even, `false` otherwise.

---

## std.biisnegative: biIsNegative() function

Checks if a given bigint is negative.

**Signature:**```typescript
biIsNegative: (x: bigint) => boolean
```## std.biisnegative: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The bigint to check. |


**Returns:**

boolean

`true` if the bigint is negative, `false` otherwise.

---

## std.biisodd: biIsOdd() function

Checks if a given bigint is odd.

**Signature:**```typescript
biIsOdd: (x: bigint) => boolean
```## std.biisodd: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The bigint to check. |


**Returns:**

boolean

`true` if the bigint is odd, `false` otherwise.

---

## std.biisone: biIsOne() function

Checks if a given bigint is equal to 1n.

**Signature:**```typescript
biIsOne: (x: bigint) => boolean
```## std.biisone: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The bigint to check. |


**Returns:**

boolean

`true` if the bigint is equal to 1n, `false` otherwise.

---

## std.biispositive: biIsPositive() function

Checks if a bigint is positive.

**Signature:**```typescript
biIsPositive: (x: bigint) => boolean
```## std.biispositive: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The bigint to check. |


**Returns:**

boolean

`true` if the bigint is positive, `false` otherwise.

---

## std.biisprime: biIsPrime() function

Checks if a given number is prime.

**Signature:**```typescript
biIsPrime: (x: bigint) => boolean
```## std.biisprime: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The number to check for primality. |


**Returns:**

boolean

`true` if the number is prime, `false` otherwise.

---

## std.biiszero: biIsZero() function

Checks if a given bigint is zero.

**Signature:**```typescript
biIsZero: (x: bigint) => boolean
```## std.biiszero: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The bigint to check. |


**Returns:**

boolean

`true` if the bigint is zero, `false` otherwise.

---

## std.bilcm: biLcm() function

Calculates the least common multiple (LCM) of two BigInt numbers.

**Signature:**```typescript
biLcm: (x: bigint, y: bigint) => bigint
```## std.bilcm: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The first BigInt number. |
| y | bigint | The second BigInt number. |


**Returns:**

bigint

The least common multiple of `x` and `y`.

---

## std.bimax: biMax() function

Returns the maximum of two BigInt values.

**Signature:**```typescript
biMax: (x: bigint, y: bigint) => bigint
```## std.bimax: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The first BigInt value. |
| y | bigint | The second BigInt value. |


**Returns:**

bigint

The maximum of the two BigInt values.

---

## std.bimin: biMin() function

Returns the minimum of two BigInt values.

**Signature:**```typescript
biMin: (x: bigint, y: bigint) => bigint
```## std.bimin: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The first BigInt value. |
| y | bigint | The second BigInt value. |


**Returns:**

bigint

The smaller of the two BigInt values.

---

## std.binextprime: biNextPrime() function

Finds the next prime number greater than the given number.

**Signature:**```typescript
biNextPrime: (x: bigint) => bigint
```## std.binextprime: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The starting number. |


**Returns:**

bigint

The next prime number greater than `x`.

---

## std.bipow: biPow() function

Calculates the power of a bigint number.

**Signature:**```typescript
biPow: (x: bigint, y: bigint) => bigint
```## std.bipow: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The base number. |
| y | bigint | The exponent. |


**Returns:**

bigint

The result of raising `x` to the power of `y`.

## std.bipow: Exceptions

Throws `ArgumentError` if the exponent `y` is negative.

---

## std.biprevprime: biPrevPrime() function

Returns the previous prime number less than the given number. Throws an error if there is no previous prime.

**Signature:**```typescript
biPrevPrime: (x: bigint) => bigint
```## std.biprevprime: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| x | bigint | The number to find the previous prime for. |


**Returns:**

bigint

The previous prime number less than `x`.

## std.biprevprime: Exceptions

Throws `ArgumentError` if there is no previous prime.

---

## std.booleantoint: booleanToInt() function

Converts a boolean to an integer value (`true` =&gt; `1`, `false` =&gt; `0`).

**Signature:**```typescript
booleanToInt: (v: boolean) => number
```## std.booleantoint: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| v | boolean | The boolean value. |


**Returns:**

number

The integer value.

---

## std.buildarray: buildArray() function

Generates an array of values by applying a function to each index.

This function provides a more semantic alternative to `Array.from({ length }, (_, i) => f(i))` with better readability and intent expression. It's particularly useful for creating arrays with computed values based on their position.

**Signature:**```typescript
buildArray: <A>(length: number, f: (index: number) => A) => A[]
```## std.buildarray: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| length | number | The length of the resulting array. |
| f | (index: number) =&gt; A | The function to apply to each index. It takes the index as a parameter and returns the corresponding value. |


**Returns:**

A\[\]

An array of values generated by applying the function to each index.

## std.buildarray: Example```typescript
// Create an array of squares
const squares = buildArray(5, i => i * i)
// Result: [0, 1, 4, 9, 16]

// Create an array of objects with IDs
const items = buildArray(3, i => ({ id: i, name: `Item ${i}` }))
// Result: [{ id: 0, name: 'Item 0' }, { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]
```

---

## std.buildurl: buildUrl() function

Builds a URL from a base URL and query parameters.

This function safely constructs URLs with query parameters, handling encoding and existing parameters properly.

**Signature:**```typescript
buildUrl: (base: string, params?: Record<string, string>) => string
```## std.buildurl: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| base | string | The base URL |
| params | Record&lt;string, string&gt; | _(Optional)_ Query parameters to add |


**Returns:**

string

The constructed URL string

## std.buildurl: Example```typescript
const url = buildUrl('https://api.example.com/users', {
  page: '1',
  limit: '10',
  search: 'john doe'
})
// Result: 'https://api.example.com/users?page=1&limit=10&search=john%20doe'
```

---

## std.canceloptions: CancelOptions interface

Options for cancelling a throttled function.

**Signature:**```typescript
export interface CancelOptions 
```## std.canceloptions: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [upcomingOnly?](#std-canceloptions-upcomingonly) |  | boolean | _(Optional)_ If true, only prevents future scheduled executions. If false, also prevents all future executions even after new calls. false |

---

## std.canceloptions.upcomingonly: CancelOptions.upcomingOnly property

If true, only prevents future scheduled executions. If false, also prevents all future executions even after new calls.  false

**Signature:**```typescript
upcomingOnly?: boolean;
```

---

## std.canonicalizenewlines: canonicalizeNewlines() function

Replaces occurrances of `\r\n`, `\n\r`, `\r` with `\n`

**Signature:**```typescript
canonicalizeNewlines: (value: string) => string
```## std.canonicalizenewlines: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to normalize. |


**Returns:**

string

The string with normalized line endings.

---

## std.canparseboolean: canParseBoolean() function

Returns `true` if the passed value can be parsed as a boolean. The following values are considered parsable:

- `'true'` / `'false'` - `'0'` / `'1'` - `'on'` / `'off'`

The comparison is case insensitive.

**Signature:**```typescript
canParseBoolean: (v: string) => boolean
```## std.canparseboolean: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| v | string | The value to check. |


**Returns:**

boolean

`true` if the value can be parsed; otherwise, `false`.

---

## std.canparsecolor: canParseColor() function

Returns `true` if the string can be parsed as any supported color format.

**Signature:**```typescript
canParseColor: (s: string) => boolean
```## std.canparsecolor: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to test. |


**Returns:**

boolean

`true` if the string is a valid color.

## std.canparsecolor: Example```ts
canParseColor('#ff0000') // true
canParseColor('rgb(255, 0, 0)') // true
canParseColor('red') // true
canParseColor('nope') // false
```

---

## std.canparsehex: canParseHex() function

Returns `true` if the string can be parsed as a hex color.

**Signature:**```typescript
canParseHex: (s: string) => boolean
```## std.canparsehex: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to test. |


**Returns:**

boolean

`true` if the string is a valid hex color.

## std.canparsehex: Example```ts
canParseHex('#ff0000') // true
canParseHex('#f00') // true
canParseHex('red') // false
```

---

## std.canparsehsl: canParseHsl() function

Returns `true` if the string can be parsed as an `hsl()` or `hsla()` color.

Supports both legacy comma-separated and modern space-separated syntax.

**Signature:**```typescript
canParseHsl: (s: string) => boolean
```## std.canparsehsl: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to test. |


**Returns:**

boolean

`true` if the string is a valid HSL functional notation.

## std.canparsehsl: Example```ts
canParseHsl('hsl(0, 100%, 50%)') // true
canParseHsl('hsl(120 50% 50% / 0.5)') // true
canParseHsl('#ff0000') // false
```

---

## std.canparsehsv: canParseHsv() function

Returns `true` if the string can be parsed as an `hsv()` or `hsva()` color.

This is a non-standard format commonly used in design tools such as Figma and Sketch. Supports both legacy comma-separated and modern space-separated syntax.

**Signature:**```typescript
canParseHsv: (s: string) => boolean
```## std.canparsehsv: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to test. |


**Returns:**

boolean

`true` if the string is a valid HSV functional notation.

## std.canparsehsv: Example```ts
canParseHsv('hsv(0, 100%, 100%)') // true
canParseHsv('hsv(120 50% 80% / 0.5)') // true
canParseHsv('hsl(0, 100%, 50%)') // false
```

---

## std.canparsehwb: canParseHwb() function

Returns `true` if the string can be parsed as an `hwb()` CSS Level 4 color.

Only the modern space-separated syntax is supported: `hwb(h w% b%)` or `hwb(h w% b% / alpha)`.

**Signature:**```typescript
canParseHwb: (s: string) => boolean
```## std.canparsehwb: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to test. |


**Returns:**

boolean

`true` if the string is a valid HWB functional notation.

## std.canparsehwb: Example```ts
canParseHwb('hwb(0 0% 0%)') // true
canParseHwb('hwb(180 20% 30% / 0.5)') // true
canParseHwb('rgb(255, 0, 0)') // false
```

---

## std.canparselab: canParseLab() function

Returns `true` if the string can be parsed as a `lab()` color.

**Signature:**```typescript
canParseLab: (s: string) => boolean
```## std.canparselab: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to test. |


**Returns:**

boolean

`true` if the string is a valid LAB functional notation.

## std.canparselab: Example```ts
canParseLab('lab(50 -20 30)') // true
canParseLab('lab(50% -20 30 / 0.5)') // true
canParseLab('#ff0000') // false
```

---

## std.canparselch: canParseLch() function

Returns `true` if the string can be parsed as an `lch()` color.

**Signature:**```typescript
canParseLch: (s: string) => boolean
```## std.canparselch: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to test. |


**Returns:**

boolean

`true` if the string is a valid LCH functional notation.

## std.canparselch: Example```ts
canParseLch('lch(50 36 326)') // true
canParseLch('lch(50% 36 326 / 0.8)') // true
canParseLch('rgb(0,0,0)') // false
```

---

## std.canparsenamedcolor: canParseNamedColor() function

Returns `true` if the string is a recognized CSS named color.

**Signature:**```typescript
canParseNamedColor: (s: string) => boolean
```## std.canparsenamedcolor: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to test (case-insensitive). |


**Returns:**

boolean

`true` if the string is a named color.

## std.canparsenamedcolor: Example```ts
canParseNamedColor('red') // true
canParseNamedColor('Red') // true
canParseNamedColor('notacolor') // false
```

---

## std.canparseoklab: canParseOklab() function

Returns `true` if the string can be parsed as an `oklab()` color.

**Signature:**```typescript
canParseOklab: (s: string) => boolean
```## std.canparseoklab: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to test. |


**Returns:**

boolean

`true` if the string matches the `oklab()` format.

## std.canparseoklab: Example```ts
canParseOklab('oklab(0.5 -0.1 0.1)') // true
canParseOklab('red') // false
```

---

## std.canparseoklch: canParseOklch() function

Returns `true` if the string can be parsed as an `oklch()` color.

**Signature:**```typescript
canParseOklch: (s: string) => boolean
```## std.canparseoklch: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to test. |


**Returns:**

boolean

`true` if the string matches the `oklch()` format.

## std.canparseoklch: Example```ts
canParseOklch('oklch(0.5 0.15 326)') // true
canParseOklch('red') // false
```

---

## std.canparsergb: canParseRgb() function

Returns `true` if the string can be parsed as an `rgb()` or `rgba()` color.

**Signature:**```typescript
canParseRgb: (s: string) => boolean
```## std.canparsergb: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to test. |


**Returns:**

boolean

`true` if the string is a valid RGB functional notation.

## std.canparsergb: Example```ts
canParseRgb('rgb(255, 0, 0)') // true
canParseRgb('rgb(255 0 0 / 0.5)') // true
canParseRgb('rgb(100% 0% 0%)') // true
canParseRgb('#ff0000') // false
```

---

## std.capitalize: capitalize() function

`capitalize` returns a string with the first character convert to upper case.

**Signature:**```typescript
capitalize: (s: string) => string
```## std.capitalize: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to capitalize. |


**Returns:**

string

The capitalized string.

---

## std.capitalizewords: capitalizeWords() function

Capitalize the first letter of every word in `value`. If `whiteSpaceOnly` is set to `true` the process is limited to whitespace separated words.

**Signature:**```typescript
capitalizeWords: (value: string, whiteSpaceOnly?: boolean) => string
```## std.capitalizewords: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to capitalize. |
| whiteSpaceOnly | boolean | _(Optional)_ If `true`, only whitespace separated words will be capitalized. |


**Returns:**

string

The string with the first letter of each word capitalized.

---

## std.ceilto: ceilTo() function

Rounds a number up to the specified number of decimals.

**Signature:**```typescript
ceilTo: (v: number, decimals: number) => number
```## std.ceilto: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| v | number | The number to round up. |
| decimals | number | The number of decimals to round up to. |


**Returns:**

number

The rounded up number.

## std.ceilto: Example```ts
ceilTo(1.234, 2) // returns 1.24
ceilTo(1.234, 1) // returns 1.3
ceilTo(1.234, 0) // returns 2
```

---

## std.chain: chain() function

Chains multiple iterables into a single iterable.

This function creates a new iterable that yields all elements from the input iterables in sequence.

**Signature:**```typescript
chain: <T>(...iterables: Iterable<T>[]) => Iterable<T>
```## std.chain: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| iterables | Iterable&lt;T&gt;\[\] | The iterables to chain |


**Returns:**

Iterable&lt;T&gt;

An iterable that yields all elements in sequence

## std.chain: Example```typescript
const first = [1, 2, 3]
const second = [4, 5, 6]
const third = [7, 8, 9]
const chained = [...chain(first, second, third)] // [1, 2, 3, 4, 5, 6, 7, 8, 9]

// Works with different iterable types
const mixed = [...chain([1, 2], new Set([3, 4]), 'ab')] // [1, 2, 3, 4, 'a', 'b']
```

---

## std.channelof: ChannelOf type

Extracts the channel names of a color type, excluding the `space` discriminant.

**Signature:**```typescript
export type ChannelOf<C extends Color> = Exclude<keyof C, 'space'>;
```
**References:** [Color](#std-color)

---

## std.chunk: chunk() function

Splits an array into chunks of the specified size.

This function divides an array into smaller arrays of a fixed size. The last chunk may contain fewer elements if the array length is not evenly divisible by the chunk size.

**Signature:**```typescript
chunk: <T>(array: readonly T[], size: number) => T[][]
```## std.chunk: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| array | readonly T\[\] | The array to chunk |
| size | number | The size of each chunk (must be positive) |


**Returns:**

T\[\]\[\]

An array of chunks

## std.chunk: Example```typescript
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const chunks = chunk(numbers, 3)
// Result: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

const uneven = chunk([1, 2, 3, 4, 5], 2)
// Result: [[1, 2], [3, 4], [5]]
```

---

## std.chunkstring: chunkString() function

Returns an array of `string` whose elements are equally long (using `len`). If the string `s` is not exactly divisible by `len` the last element of the array will be shorter.

**Signature:**```typescript
chunkString: (s: string, len: number) => string[]
```## std.chunkstring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to chunk. |
| len | number | The length of each chunk. |


**Returns:**

string\[\]

An array of chunks.

---

## std.clamp: clamp() function

`clamp` restricts a value within the specified range.

**Signature:**```typescript
clamp: (value: number, min: number, max: number) => number
```## std.clamp: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | number | The value to clamp. |
| min | number | The minimum value. |
| max | number | The maximum value. |


**Returns:**

number

The clamped value.

## std.clamp: Example```ts
clamp(1.3, 0, 1) // returns 1
clamp(0.8, 0, 1) // returns 0.8
clamp(-0.5, 0, 1) // returns 0.0
```

---

## std.clampint: clampInt() function

Clamps a number to a specified range and returns an integer value.

**Signature:**```typescript
clampInt: (value: number, min: number, max: number) => number
```## std.clampint: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | number | The number to clamp. |
| min | number | The minimum value of the range. |
| max | number | The maximum value of the range. |


**Returns:**

number

The clamped integer value.

## std.clampint: Example```ts
clampInt(5, 0, 10) // returns 5
clampInt(15, 0, 10) // returns 10
clampInt(-5, 0, 10) // returns 0
```

---

## std.clampsym: clampSym() function

Like clamp but you only pass one argument (`max`) that is used as the upper limit and the opposite (additive inverse or `-max`) as the lower limit.

**Signature:**```typescript
clampSym: (v: number, max: number) => number
```## std.clampsym: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| v | number | The value to clamp. |
| max | number | The maximum value. |


**Returns:**

number

The clamped value.

## std.clampsym: Example```ts
clampSym(5, 10) // returns 5
clampSym(15, 10) // returns 10
clampSym(-5, 10) // returns -5
clampSym(-15, 10) // returns -10
```

---

## std.clamptogamut: clampToGamut() function

Clamps a color to the sRGB gamut by clamping RGB channel values.

If the color is already in gamut, it is returned unchanged. Otherwise, it is converted to RGB8 (which clamps channels to 0–255) and converted back to the original color space.

For perceptually better results on wide-gamut colors, use [clampToGamutOklch()](#std-clamptogamutoklch) which preserves lightness and hue.

**Signature:**```typescript
clampToGamut: (c: Color) => Color
```## std.clamptogamut: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to clamp. |


**Returns:**

[Color](#std-color)

A color within the sRGB gamut in the original color space.

## std.clamptogamut: Example```ts
clampToGamut(rgb8a(255, 0, 0)) // unchanged
```

---

## std.clamptogamutoklch: clampToGamutOklch() function

Clamps a color to the sRGB gamut by reducing chroma in OKLCH space while preserving lightness and hue.

This produces more perceptually pleasing results than simple RGB clamping, as it finds the most saturated version of the color that still fits within sRGB.

Uses binary search to find the maximum in-gamut chroma.

**Signature:**```typescript
clampToGamutOklch: (c: Color) => Color
```## std.clamptogamutoklch: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to clamp. |


**Returns:**

[Color](#std-color)

A color within the sRGB gamut in the original color space.

## std.clamptogamutoklch: Example```ts
clampToGamutOklch(oklcha(0.5, 0.4, 150))
// Same lightness and hue, reduced chroma to fit sRGB
```

---

## std.closestnamedcolor: closestNamedColor() function

Finds the CSS named color closest to the given color using CIE76 (simple Euclidean) distance in CIELAB space.

**Signature:**```typescript
closestNamedColor: (c: Color) => string
```## std.closestnamedcolor: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to match against. |


**Returns:**

string

The lowercase CSS color name that is perceptually closest to `c`.

## std.closestnamedcolor: Example```ts
import { rgb8a } from './color'
closestNamedColor(rgb8a(255, 0, 0)) // 'red'
```

---

## std.collapsetext: collapseText() function

It cleans up all the whitespaces in the passed `value`. `collapse` does the following: - remove trailing/leading whitespaces - within the string, it collapses seqeunces of whitespaces into a single space character For whitespaces in this description, it is intended to be anything that is matched by the regular expression `\s`.

**Signature:**```typescript
collapseText: (value: string) => string
```## std.collapsetext: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to collapse. |


**Returns:**

string

The string with all whitespaces collapsed.

---

## std.color: Color type

A color value in any of the supported color spaces.

**Signature:**```typescript
export type Color = RGBA | RGB8A | HSLA | HSVA | HWBA | LABA | LCHA | OKLABA | OKLCHA;
```
**References:** [RGBA](#std-rgba), [RGB8A](#std-rgb8a), [HSLA](#std-hsla), [HSVA](#std-hsva), [HWBA](#std-hwba), [LABA](#std-laba), [LCHA](#std-lcha), [OKLABA](#std-oklaba), [OKLCHA](#std-oklcha)

---

## std.colordistance: colorDistance() function

Computes the CIEDE2000 color distance between two colors.

This is the most perceptually uniform color difference metric standardized by the CIE. It accounts for lightness, chroma, and hue weighting as well as interactive effects between chroma and hue differences.

**Signature:**```typescript
colorDistance: (a: Color, b: Color) => number
```## std.colordistance: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | [Color](#std-color) | The first color. |
| b | [Color](#std-color) | The second color. |


**Returns:**

number

The CIEDE2000 deltaE value.

## std.colordistance: Example```ts
import { rgb8a } from './color'
colorDistance(
  rgb8a(255, 0, 0),
  rgb8a(0, 255, 0)
) // ~86.61
```

---

## std.colordistancesimple: colorDistanceSimple() function

Computes the CIE76 color distance (Euclidean distance in CIELAB space) between two colors.

**Signature:**```typescript
colorDistanceSimple: (a: Color, b: Color) => number
```## std.colordistancesimple: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | [Color](#std-color) | The first color. |
| b | [Color](#std-color) | The second color. |


**Returns:**

number

The Euclidean distance in LAB space.

## std.colordistancesimple: Example```ts
import { rgb8a } from './color'
colorDistanceSimple(
  rgb8a(255, 0, 0),
  rgb8a(0, 255, 0)
) // ~170.56
```

---

## std.colorspace: ColorSpace type

String literal union of all supported color spaces.

**Signature:**```typescript
export type ColorSpace = 'rgb' | 'rgb8' | 'hsl' | 'hsv' | 'hwb' | 'lab' | 'lch' | 'oklab' | 'oklch';
```

---

## std.colortostring: colorToString() function

Serializes a color to a CSS-compatible string based on its color space.

RGBA (0–1) colors are first converted to RGB8A for CSS serialization.

**Signature:**```typescript
colorToString: (c: Color) => string
```## std.colortostring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to serialize. |


**Returns:**

string

A CSS color string.

## std.colortostring: Example```ts
colorToString(rgb8a(255, 0, 0)) // 'rgb(255 0 0)'
colorToString(hsla(0, 1, 0.5)) // 'hsl(0 100% 50%)'
```

---

## std.compare: Compare type

Represents a function that compares two values of type T and returns a number. The returned number indicates the relative order of the two values: - A negative number if `a` is less than `b`. - Zero if `a` is equal to `b`. - A positive number if `a` is greater than `b`.

**Signature:**```typescript
export type Compare<T> = (a: T, b: T) => number;
```

---

## std.comparearrays: compareArrays() function

Compares two arrays based on their lengths and element values.

**Signature:**```typescript
compareArrays: <A>(a: A[], b: A[], comparef: Compare<A>, shorterFirst?: boolean) => number
```## std.comparearrays: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | A\[\] | The first array to compare. |
| b | A\[\] | The second array to compare. |
| comparef | [Compare](#std-compare)&lt;A&gt; | The compare function to use for comparing the elements of the arrays. |
| shorterFirst | boolean | _(Optional)_ Specifies whether shorter arrays should be considered smaller. Defaults to true. |


**Returns:**

number

A compare function that can be used to compare arrays.

---

## std.comparebooleans: compareBooleans() function

Returns a comparison value (`Int`) from two boolean values.

**Signature:**```typescript
compareBooleans: (a: boolean, b: boolean) => number
```## std.comparebooleans: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | boolean | The first boolean value. |
| b | boolean | The second boolean value. |


**Returns:**

number

A comparison value.

---

## std.comparecaseinsensitive: compareCaseInsensitive() function

Compares two strings ignoring their case.

**Signature:**```typescript
compareCaseInsensitive: (a: string | null | undefined, b: string | null | undefined) => number
```## std.comparecaseinsensitive: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | string \\| null \\| undefined | The first string to compare. |
| b | string \\| null \\| undefined | The second string to compare. |


**Returns:**

number

A negative number if `a` is less than `b`, zero if they are equal, or a positive number if `a` is greater than `b`.

---

## std.comparedates: compareDates() function

Compares two dates.

**Signature:**```typescript
compareDates: (a: Date, b: Date) => number
```## std.comparedates: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | Date | The first date |
| b | Date | The second date |


**Returns:**

number

A negative number if `a` is less than `b`, zero if they are equal, or a positive number if `a` is greater than `b`.

---

## std.comparenumbers: compareNumbers() function

It returns the comparison value (an integer number) between two `float` values.

**Signature:**```typescript
compareNumbers: (a: number, b: number) => number
```## std.comparenumbers: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | number | The first value to compare. |
| b | number | The second value to compare. |


**Returns:**

number

A number indicating the relative order of the two values.

## std.comparenumbers: Example```ts
compare(5, 10) // returns -1
compare(10, 5) // returns 1
compare(5, 5) // returns 0
```

---

## std.comparestrings: compareStrings() function

It compares to string and it returns a negative number if `a` is inferior to `b`, zero if they are the same, or otherwise a positive non-sero number.

**Signature:**```typescript
compareStrings: (a: string, b: string) => number
```## std.comparestrings: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | string | The first string to compare. |
| b | string | The second string to compare. |


**Returns:**

number

A negative number if `a` is less than `b`, zero if they are equal, or a positive number if `a` is greater than `b`.

---

## std.complement: complement() function

Returns the complementary color by rotating the hue 180 degrees in OKLCH space.

**Signature:**```typescript
complement: (c: Color) => Color
```## std.complement: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | Any color value |


**Returns:**

[Color](#std-color)

The complementary color in the same color space as the input

## std.complement: Example```ts
const red = rgba(1, 0, 0, 1)
const cyan = complement(red)
```

---

## std.compose_1: compose() function

**Signature:**```typescript
export declare function compose<TArgs extends unknown[], R1>(fn1: (...args: TArgs) => R1): (...args: TArgs) => R1;
```## std.compose_1: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn1 | (...args: TArgs) =&gt; R1 |  |


**Returns:**

(...args: TArgs) =&gt; R1

---

## std.compose_2: compose() function

**Signature:**```typescript
export declare function compose<TArgs extends unknown[], R1, R2>(fn2: (arg: R1) => R2, fn1: (...args: TArgs) => R1): (...args: TArgs) => R2;
```## std.compose_2: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn2 | (arg: R1) =&gt; R2 |  |
| fn1 | (...args: TArgs) =&gt; R1 |  |


**Returns:**

(...args: TArgs) =&gt; R2

---

## std.compose_3: compose() function

**Signature:**```typescript
export declare function compose<TArgs extends unknown[], R1, R2, R3>(fn3: (arg: R2) => R3, fn2: (arg: R1) => R2, fn1: (...args: TArgs) => R1): (...args: TArgs) => R3;
```## std.compose_3: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn3 | (arg: R2) =&gt; R3 |  |
| fn2 | (arg: R1) =&gt; R2 |  |
| fn1 | (...args: TArgs) =&gt; R1 |  |


**Returns:**

(...args: TArgs) =&gt; R3

---

## std.compose_4: compose() function

**Signature:**```typescript
export declare function compose<TArgs extends unknown[], R1, R2, R3, R4>(fn4: (arg: R3) => R4, fn3: (arg: R2) => R3, fn2: (arg: R1) => R2, fn1: (...args: TArgs) => R1): (...args: TArgs) => R4;
```## std.compose_4: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn4 | (arg: R3) =&gt; R4 |  |
| fn3 | (arg: R2) =&gt; R3 |  |
| fn2 | (arg: R1) =&gt; R2 |  |
| fn1 | (...args: TArgs) =&gt; R1 |  |


**Returns:**

(...args: TArgs) =&gt; R4

---

## std.compose: compose() function

Composes functions from right to left.

This function creates a new function that applies the given functions in right-to-left order. The rightmost function can accept multiple arguments, while the others must be unary.

**Signature:**```typescript
export declare function compose(): <T>(arg: T) => T;
```
**Returns:**

&lt;T&gt;(arg: T) =&gt; T

A new function that applies all functions in right-to-left order

## std.compose: Example


```typescript
const add = (a: number, b: number) => a + b
const double = (x: number) => x * 2
const square = (x: number) => x * x

const composed = compose(square, double, add)
const result = composed(2, 3) // square(double(add(2, 3))) = square(double(5)) = square(10) = 100
```

---

## std.containsalltext: containsAllText() function

`containsAllText` returns `true` if `s` contains all of the strings in `tests`

**Signature:**```typescript
containsAllText: (s: string, tests: string[]) => boolean
```## std.containsalltext: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to search in. |
| tests | string\[\] | The strings to search for. |


**Returns:**

boolean

`true` if `s` contains all of the strings in `tests`, `false` otherwise.

---

## std.containsalltextcaseinsensitive: containsAllTextCaseInsensitive() function

`containsAllTextCaseInsensitive` returns `true` if `s` contains all of the strings in `tests` regardless of the text case

**Signature:**```typescript
containsAllTextCaseInsensitive: (s: string, tests: string[]) => boolean
```## std.containsalltextcaseinsensitive: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to search in. |
| tests | string\[\] | The strings to search for. |


**Returns:**

boolean

`true` if `s` contains all of the strings in `tests` (case-insensitive), `false` otherwise.

---

## std.containsanytext: containsAnyText() function

`containsAnyText` returns `true` if `s` contains any of the strings in `tests`

**Signature:**```typescript
containsAnyText: (s: string, tests: string[]) => boolean
```## std.containsanytext: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to search in. |
| tests | string\[\] | The strings to search for. |


**Returns:**

boolean

`true` if `s` contains any of the strings in `tests`, `false` otherwise.

---

## std.containsanytextcaseinsensitive: containsAnyTextCaseInsensitive() function

`containsAnyTextCaseInsensitive` returns `true` if `s` contains any of the strings in `tests` regardless of the text case

**Signature:**```typescript
containsAnyTextCaseInsensitive: (s: string, tests: string[]) => boolean
```## std.containsanytextcaseinsensitive: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to search in. |
| tests | string\[\] | The strings to search for. |


**Returns:**

boolean

`true` if `s` contains any of the strings in `tests` (case-insensitive), `false` otherwise.

---

## std.contrastcolor: contrastColor() function

Picks whichever of two candidates has better contrast against a reference color.

Useful for choosing a readable foreground color for a given background.

**Signature:**```typescript
contrastColor: (c: Color, dark?: Color, light?: Color) => Color
```## std.contrastcolor: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The reference color (e.g. a background) |
| dark | [Color](#std-color) | _(Optional)_ The dark candidate (defaults to black) |
| light | [Color](#std-color) | _(Optional)_ The light candidate (defaults to white) |


**Returns:**

[Color](#std-color)

The candidate with the higher contrast ratio

## std.contrastcolor: Example```ts
// Returns white for a dark background
contrastColor(rgb8a(30, 30, 30))

// Returns black for a light background
contrastColor(rgb8a(220, 220, 220))
```

---

## std.contrastlevel: ContrastLevel type

WCAG contrast level thresholds.

- `'AA'` — 4.5:1 for normal text - `'AAA'` — 7:1 for normal text - `'AA-large'` — 3:1 for large text - `'AAA-large'` — 4.5:1 for large text

**Signature:**```typescript
export type ContrastLevel = 'AA' | 'AAA' | 'AA-large' | 'AAA-large';
```

---

## std.contrastratio: contrastRatio() function

Computes the WCAG contrast ratio between two colors.

The ratio ranges from 1:1 (identical) to 21:1 (black vs white).

**Signature:**```typescript
contrastRatio: (a: Color, b: Color) => number
```## std.contrastratio: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | [Color](#std-color) | The first color |
| b | [Color](#std-color) | The second color |


**Returns:**

number

A number between 1 and 21

## std.contrastratio: Example```ts
contrastRatio(
  rgb8a(0, 0, 0),
  rgb8a(255, 255, 255)
) // 21
```

---

## std.convertcolor: convertColor() function

Converts a color from one color space to another.

Uses RGB8A as an internal hub — the source color is first converted to RGB8A, then from RGB8A to the target space.

**Signature:**```typescript
convertColor: (c: Color, to: ColorSpace) => Color
```## std.convertcolor: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to convert. |
| to | [ColorSpace](#std-colorspace) | The target color space. |


**Returns:**

[Color](#std-color)

The converted color.

## std.convertcolor: Example```ts
convertColor(rgb8a(255, 0, 0), 'hsl') // hsla(0, 100, 50)
convertColor(hsla(120, 100, 50), 'rgb8') // rgb8a(0, 255, 0)
```

---

## std.countstringoccurrences: countStringOccurrences() function

Return the number of occurrences of `test` in `s`.

**Signature:**```typescript
countStringOccurrences: (s: string, test: string) => number
```## std.countstringoccurrences: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to search in. |
| test | string | The string to search for. |


**Returns:**

number

The number of occurrences of `test` in `s`.

---

## std.curryleft: curryLeft() function

Curries a function from left to right.

**Signature:**```typescript
curryLeft: <A, Rest extends unknown[], Ret>(f: (a: A, ...rest: Rest) => Ret) => (a: A) => (...rest: Rest) => Ret
```## std.curryleft: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| f | (a: A, ...rest: Rest) =&gt; Ret | The function to curry. |


**Returns:**

(a: A) =&gt; (...rest: Rest) =&gt; Ret

A curried function.

---

## std.darken: darken() function

Decreases the lightness of a color by the given amount.

Operates in OKLCH space and returns the result in the same color space as the input.

**Signature:**```typescript
darken: (c: Color, amount: number) => Color
```## std.darken: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to darken. |
| amount | number | A value between 0 and 1 indicating how much to decrease lightness. |


**Returns:**

[Color](#std-color)

The darkened color in the original color space.

## std.darken: Example```ts
const dark = darken(rgb8a(200, 150, 150, 1), 0.2)
```

---

## std.dasherize: dasherize() function

`dasherize` replaces all the occurrances of `_` with `-`

**Signature:**```typescript
dasherize: (s: string) => string
```## std.dasherize: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to dasherize. |


**Returns:**

string

The dasherized string.

---

## std.debounce: debounce() function

Debounce execution of a function. Debouncing, unlike throttling, guarantees that a function is only executed a single time, either at the very beginning of a series of calls, or at the very end.

**Signature:**```typescript
export declare function debounce<This, F extends (this: This, ...args: any[]) => any>(delay: number, callback: F, input?: DebounceOptions): ThrottledFunction<Parameters<F>, This>;
```## std.debounce: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| delay | number | A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful. |
| callback | F | A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is, to `callback` when the debounced-function is executed. |
| { atBegin } | (not declared) | _(Optional)_ |
| input | [DebounceOptions](#std-debounceoptions) | _(Optional)_ |


**Returns:**

[ThrottledFunction](#std-throttledfunction)&lt;Parameters&lt;F&gt;, This&gt;

{Function} A new, debounced function.

---

## std.debounceoptions: DebounceOptions type

Options for debouncing a function.

**Signature:**```typescript
export type DebounceOptions = {
    atBegin?: boolean;
};
```

---

## std.decodebase64: decodeBase64() function

Decodes a base64 encoded string.

**Signature:**```typescript
decodeBase64: (s: string) => string
```## std.decodebase64: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The base64 encoded string to decode. |


**Returns:**

string

The decoded string.

## std.decodebase64: Exceptions

Throws a `MissingImplementationError` if no implementation is found for base64 decoding.

---

## std.deepclone: deepClone() function

Creates a deep clone of an object.

This function recursively clones objects, arrays, and primitive values. It handles Date objects specially and avoids infinite recursion.

**Signature:**```typescript
deepClone: <T>(obj: T) => T
```## std.deepclone: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| obj | T | The object to clone |


**Returns:**

T

A deep clone of the object

## std.deepclone: Example```typescript
const original = {
  name: 'Alice',
  settings: { theme: 'dark', notifications: true },
  tags: ['user', 'admin']
}
const cloned = deepClone(original)
cloned.settings.theme = 'light' // Original remains unchanged
```

---

## std.deepequal: deepEqual() function

Checks if two values are equal by comparing their contents.

**Signature:**```typescript
deepEqual: <A>(a: A, b: A) => boolean
```## std.deepequal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | A | The first value to compare. |
| b | A | The second value to compare. |


**Returns:**

boolean

`true` if the values are deeply equal, `false` otherwise.

---

## std.deferred: deferred() function

Creates a deferred object. A deferred object is a promise that can be resolved or rejected.

**Signature:**```typescript
deferred: <T>() => {
    promise: Promise<T>;
    resolve: (value: T) => void;
    reject: (reason?: unknown) => void;
}
```
**Returns:**

{ promise: Promise&lt;T&gt;; resolve: (value: T) =&gt; void; reject: (reason?: unknown) =&gt; void; }

A deferred object.

## std.deferred: Example


```ts
const { promise, resolve, reject } = deferred<number>()

promise.then((value) => {
  console.warn(value)
})

resolve(42)
```

---

## std.delayed: delayed() function

Delays the execution of a function by the given number of milliseconds.

**Signature:**```typescript
delayed: (fn: () => (() => void) | void, ms: number) => () => void
```## std.delayed: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | () =&gt; (() =&gt; void) \\| void | The function to delay. The function can optionally return a callback that will be invoked when the delay is cancelled. |
| ms | number | The number of milliseconds to delay the function. |


**Returns:**

() =&gt; void

A function that, when called, will cancel the delay and prevent the original function from being executed.

## std.delayed: Example```ts
// Delay a function for 1 second
const cancel = delayed(() => console.warn('Hello!'), 1000);

// Cancel the delayed execution if needed
cancel();
```

---

## std.delayedanimationframe: delayedAnimationFrame() function

Delays the execution of a function using requestAnimationFrame.

**Signature:**```typescript
delayedAnimationFrame: (callback: (time: DOMHighResTimeStamp) => void) => () => void
```## std.delayedanimationframe: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| callback | (time: DOMHighResTimeStamp) =&gt; void | The function to delay. |


**Returns:**

() =&gt; void

A function that, when called, will cancel the delay and prevent the original function from being executed.

---

## std.deletefirstfromstring: deleteFirstFromString() function

If present, it removes the first occurrence of `toremove` from `value`.

**Signature:**```typescript
deleteFirstFromString: (value: string, toremove: string) => string
```## std.deletefirstfromstring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to remove the text from. |
| toremove | string | The text to remove from `value`. |


**Returns:**

string

The string with the text removed.

---

## std.deletestringafter: deleteStringAfter() function

If present, it removes the `toremove` text from the end of `value`.

**Signature:**```typescript
deleteStringAfter: (value: string, toremove: string) => string
```## std.deletestringafter: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to remove the text from. |
| toremove | string | The text to remove from the end of `value`. |


**Returns:**

string

The string with the text removed.

---

## std.deletestringbefore: deleteStringBefore() function

If present, it removes the `toremove` text from the beginning of `value`.

**Signature:**```typescript
deleteStringBefore: (value: string, toremove: string) => string
```## std.deletestringbefore: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to remove the text from. |
| toremove | string | The text to remove from the beginning of `value`. |


**Returns:**

string

The string with the text removed.

---

## std.deletesubstring: deleteSubstring() function

If present, it removes all the occurrences of `toremove` from `value`.

**Signature:**```typescript
deleteSubstring: (value: string, toremove: string) => string
```## std.deletesubstring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to remove the occurrences from. |
| toremove | string | The string to remove from `value`. |


**Returns:**

string

The string with all occurrences of `toremove` removed.

---

## std.desaturate: desaturate() function

Decreases the chroma (saturation) of a color by the given amount.

Operates in OKLCH space. The amount is scaled by 0.4 to map the 0–1 input range to the typical OKLCH chroma range.

**Signature:**```typescript
desaturate: (c: Color, amount: number) => Color
```## std.desaturate: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to desaturate. |
| amount | number | A value between 0 and 1 indicating how much to decrease chroma. |


**Returns:**

[Color](#std-color)

The desaturated color in the original color space.

## std.desaturate: Example```ts
const muted = desaturate(rgb8a(255, 0, 0, 1), 0.5)
```

---

## std.detectcolorspace: detectColorSpace() function

Detects the color space of a CSS color string. Returns `undefined` when the format is not recognized.

CSS color strings (`#hex`, `rgb()`, named colors) are detected as `'rgb8'` since they use 0–255 integer channels.

**Signature:**```typescript
detectColorSpace: (s: string) => ColorSpace | undefined
```## std.detectcolorspace: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to inspect. |


**Returns:**

[ColorSpace](#std-colorspace) \| undefined

The detected `ColorSpace`, or `undefined`.

## std.detectcolorspace: Example```ts
detectColorSpace('#ff0000') // 'rgb8'
detectColorSpace('hsl(0, 100%, 50%)') // 'hsl'
detectColorSpace('red') // 'rgb8'
detectColorSpace('nope') // undefined
```

---

## std.diffindays: diffInDays() function

Calculates the difference in days between two dates.

Returns a positive number if dateB is after dateA, negative if before. The calculation ignores time components and focuses on calendar days.

**Signature:**```typescript
diffInDays: (dateA: Date, dateB: Date) => number
```## std.diffindays: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| dateA | Date | The first date |
| dateB | Date | The second date |


**Returns:**

number

The difference in days (dateB - dateA)

## std.diffindays: Example```typescript
const dateA = new Date('2023-01-15')
const dateB = new Date('2023-01-20')
const diff = diffInDays(dateA, dateB)
// Result: 5

const diffReverse = diffInDays(dateB, dateA)
// Result: -5
```

---

## std.diffinhours: diffInHours() function

Calculates the difference in hours between two dates.

Returns a positive number if dateB is after dateA, negative if before. The result includes fractional hours for precise calculations.

**Signature:**```typescript
diffInHours: (dateA: Date, dateB: Date) => number
```## std.diffinhours: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| dateA | Date | The first date |
| dateB | Date | The second date |


**Returns:**

number

The difference in hours (dateB - dateA)

## std.diffinhours: Example```typescript
const dateA = new Date('2023-01-15T10:00:00')
const dateB = new Date('2023-01-15T15:30:00')
const diff = diffInHours(dateA, dateB)
// Result: 5.5
```

---

## std.drop: Drop type

**Signature:**```typescript
export type Drop<T extends unknown[], N extends number, I extends unknown[] = []> = I['length'] extends N ? T : T extends [infer _, ...infer R] ? Drop<R, N, [...I, unknown]> : [];
```
**References:** [Drop](#std-drop)

---

## std.ellipsis: ellipsis() function

`ellipsis` truncates `s` at len `maxlen` replaces the last characters with the content of `symbol`.

**Signature:**```typescript
ellipsis: (s: string, maxlen?: number, symbol?: string) => string
```## std.ellipsis: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to truncate. |
| maxlen | number | _(Optional)_ The maximum length of the string. |
| symbol | string | _(Optional)_ The symbol to replace the truncated characters with. |


**Returns:**

string

The truncated string.

## std.ellipsis: Example```ts
ellipsis('tempo is a nice library', 9) // returns 'tempo is …'
```

---

## std.ellipsismiddle: ellipsisMiddle() function

Same as `ellipsis` but puts the symbol in the middle of the string and not to the end.

**Signature:**```typescript
ellipsisMiddle: (s: string, maxlen?: number, symbol?: string) => string
```## std.ellipsismiddle: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to truncate. |
| maxlen | number | _(Optional)_ The maximum length of the string. |
| symbol | string | _(Optional)_ The symbol to replace the truncated characters with. |


**Returns:**

string

The truncated string.

## std.ellipsismiddle: Example```ts
ellipsisMiddle('tempo is a nice library', 18) // returns 'tempo is … library'
```

---

## std.encodebase64: encodeBase64() function

Encodes a string to base64.

**Signature:**```typescript
encodeBase64: (s: string) => string
```## std.encodebase64: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to encode. |


**Returns:**

string

The base64 encoded string.

## std.encodebase64: Exceptions

Throws `MissingImplementationError` if no implementation is found for base64 encoding.

---

## std.endofday: endOfDay() function

Returns a new Date representing the end of the day (23:59:59.999).

This is useful for date range queries where you need the last millisecond of a given day.

**Signature:**```typescript
endOfDay: (date: Date) => Date
```## std.endofday: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| date | Date | The input date |


**Returns:**

Date

A new Date set to the end of the day

## std.endofday: Example```typescript
const date = new Date('2023-01-15T14:30:45.123')
const end = endOfDay(date)
// Result: 2023-01-15T23:59:59.999
```

---

## std.endofweek: endOfWeek() function

Returns a new Date representing the end of the week (Sunday 23:59:59.999).

This follows the ISO 8601 standard where Sunday is the last day of the week. Useful for weekly reports and date grouping.

**Signature:**```typescript
endOfWeek: (date: Date) => Date
```## std.endofweek: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| date | Date | The input date |


**Returns:**

Date

A new Date set to the end of the week

## std.endofweek: Example```typescript
const date = new Date('2023-01-18') // Wednesday
const end = endOfWeek(date)
// Result: 2023-01-22T23:59:59.999 (Sunday)
```

---

## std.epsilon: EPSILON variable

Constant value employed to see if two `number` values are very close.

**Signature:**```typescript
EPSILON = 1e-9
```

---

## std.equalcolors: equalColors() function

Checks whether two colors are perceptually equal within a given tolerance, by comparing their CIELAB channels.

Both colors are first converted to the LAB color space. The `l`, `a`, and `b` channels are compared using the supplied tolerance, while alpha is compared with a fixed tolerance of 0.01.

**Signature:**```typescript
equalColors: (a: Color, b: Color, tolerance?: number) => boolean
```## std.equalcolors: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | [Color](#std-color) | The first color. |
| b | [Color](#std-color) | The second color. |
| tolerance | number | _(Optional)_ Maximum allowed difference per LAB channel. Defaults to 0.01. |


**Returns:**

boolean

`true` when every channel is within tolerance.

## std.equalcolors: Example```ts
import { rgb8a } from './color'
equalColors(rgb8a(255, 0, 0), rgb8a(254, 0, 0)) // true
equalColors(rgb8a(255, 0, 0), rgb8a(0, 0, 255))  // false
```

---

## std.every: every() function

Tests whether all elements in an iterable satisfy the predicate.

This function returns true if the predicate returns true for all elements, or false otherwise. It short-circuits on the first false result.

**Signature:**```typescript
every: <T>(iterable: Iterable<T>, predicate: (item: T) => boolean) => boolean
```## std.every: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| iterable | Iterable&lt;T&gt; | The iterable to test |
| predicate | (item: T) =&gt; boolean | Function that tests each element |


**Returns:**

boolean

true if all elements satisfy the predicate, false otherwise

## std.every: Example```typescript
const numbers = [2, 4, 6, 8]
const allEven = every(numbers, n => n % 2 === 0) // true

const users = [{ age: 25 }, { age: 30 }, { age: 17 }]
const allAdults = every(users, user => user.age >= 18) // false
```

---

## std.failure: Failure type

Represents a failure result.

**Signature:**```typescript
export type Failure<E> = {
    readonly type: 'Failure';
    readonly error: E;
};
```

---

## std.fillarray: fillArray() function

Creates a new array with the specified length and fills it with the provided value.

This function provides a more semantic alternative to `Array(length).fill(value)` or `new Array(length).fill(value)` with better type inference and clearer intent. It's particularly useful when you need arrays of non-primitive values or when working with functional programming patterns.

**Signature:**```typescript
fillArray: <A>(length: number, value: A) => A[]
```## std.fillarray: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| length | number | The length of the new array. |
| value | A | The value to fill the array with. |


**Returns:**

A\[\]

A new array filled with the specified value.

## std.fillarray: Example```typescript
// Create an array of default objects
const defaultUsers = fillArray(3, { name: '', active: false })
// Result: [{ name: '', active: false }, { name: '', active: false }, { name: '', active: false }]

// Create an array of empty arrays
const matrix = fillArray(3, [] as number[])
// Result: [[], [], []]

// Create an array of functions
const handlers = fillArray(5, () => console.log('handler'))
// Result: [function, function, function, function, function]
```

---

## std.filter: filter() function

Filters an iterable, yielding only elements that satisfy the predicate.

This function creates a new iterable that yields only elements for which the predicate returns true. It's lazy and memory-efficient.

**Signature:**```typescript
filter: <T>(iterable: Iterable<T>, predicate: (item: T) => boolean) => Iterable<T>
```## std.filter: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| iterable | Iterable&lt;T&gt; | The iterable to filter |
| predicate | (item: T) =&gt; boolean | Function that tests each element |


**Returns:**

Iterable&lt;T&gt;

An iterable that yields filtered elements

## std.filter: Example```typescript
const numbers = [1, 2, 3, 4, 5, 6]
const evens = [...filter(numbers, n => n % 2 === 0)] // [2, 4, 6]

// Chain with other operations
const result = take(filter(largeDataset, isValid), 100)
```

---

## std.filtercharcodes: filterCharcodes() function

Same as `filterCharcodes` but `predicate` operates on integer char codes instead of string characters.

**Signature:**```typescript
filterCharcodes: (s: string, predicate: (n: number) => boolean) => string
```## std.filtercharcodes: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to filter. |
| predicate | (n: number) =&gt; boolean | The function to apply to each character code in the string. |


**Returns:**

string

The filtered string.

---

## std.filterchars: filterChars() function

`filterString` applies `predicate` character by character to `s` and it returns a filtered version of the string.

**Signature:**```typescript
filterChars: (s: string, predicate: (s: string) => boolean) => string
```## std.filterchars: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to filter. |
| predicate | (s: string) =&gt; boolean | The function to apply to each character in the string. |


**Returns:**

string

The filtered string.

---

## std.filtermaparray: filterMapArray() function

Applies a mapping function to each element of an array and returns a new array containing the mapped values, excluding any `null` or `undefined` values.

**Signature:**```typescript
filterMapArray: <A, B>(arr: A[], f: (a: A, index: number) => Maybe<B>) => B[]
```## std.filtermaparray: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| arr | A\[\] | The input array. |
| f | (a: A, index: number) =&gt; [Maybe](#std-maybe)&lt;B&gt; | The mapping function to apply to each element. |


**Returns:**

B\[\]

The new array containing the mapped values.

---

## std.filternullsfromarray: filterNullsFromArray() function

Filters out null and undefined values from an array.

**Signature:**```typescript
filterNullsFromArray: <T>(arr: Array<T | Nothing>) => T[]
```## std.filternullsfromarray: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| arr | Array&lt;T \\| [Nothing](#std-nothing)&gt; | The array to filter. |


**Returns:**

T\[\]

The filtered array.

---

## std.filtertuple: FilterTuple type

Filters out elements from a tuple that are equal to the specified type.

**Signature:**```typescript
export type FilterTuple<T extends unknown[], N> = T extends [] ? [] : T extends [infer H, ...infer R] ? N extends H ? FilterTuple<R, N> : [H, ...FilterTuple<R, N>] : T;
```
**References:** [FilterTuple](#std-filtertuple)

---

## std.find: find() function

Finds the first element in an iterable that satisfies the predicate.

This function returns the first element for which the predicate returns true, or undefined if no such element is found.

**Signature:**```typescript
find: <T>(iterable: Iterable<T>, predicate: (item: T) => boolean) => T | undefined
```## std.find: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| iterable | Iterable&lt;T&gt; | The iterable to search |
| predicate | (item: T) =&gt; boolean | Function that tests each element |


**Returns:**

T \| undefined

The first matching element, or undefined if none found

## std.find: Example```typescript
const numbers = [1, 3, 5, 8, 9, 12]
const firstEven = find(numbers, n => n % 2 === 0) // 8

const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }]
const adult = find(users, user => user.age >= 18) // { name: 'Alice', age: 25 }
```

---

## std.firstargument: FirstArgument type

Extracts the first argument type from a function type.

**Signature:**```typescript
export type FirstArgument<F> = F extends Fun1<infer A, unknown> ? A : never;
```
**References:** [Fun1](#std-fun1)

---

## std.flip: flip() function

Reverses the order of all arguments of a function.

This function creates a new function that calls the original function with all arguments in reverse order. This is useful for creating more readable function compositions or when you need to change the argument order for currying or partial application.

**Signature:**```typescript
export declare function flip<TArgs extends unknown[], R>(fn: (...args: TArgs) => R): (...args: Reverse<TArgs>) => R;
```## std.flip: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (...args: TArgs) =&gt; R | The function to flip |


**Returns:**

(...args: [Reverse](#std-reverse)&lt;TArgs&gt;) =&gt; R

A new function with all arguments reversed

## std.flip: Example```typescript
const divide = (a: number, b: number) => a / b
const flippedDivide = flip(divide)

divide(10, 2) // 5
flippedDivide(2, 10) // 5 (same result, but arguments are reversed)

// Works with any number of arguments
const subtract = (a: number, b: number, c: number) => a - b - c
const flippedSubtract = flip(subtract)

subtract(10, 3, 2) // 5 (10 - 3 - 2)
flippedSubtract(2, 3, 10) // 5 (10 - 3 - 2, arguments reversed)
```

---

## std.floorto: floorTo() function

Rounds a number down to the specified number of decimals.

**Signature:**```typescript
floorTo: (v: number, decimals: number) => number
```## std.floorto: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| v | number | The number to round down. |
| decimals | number | The number of decimals to round down to. |


**Returns:**

number

The rounded down number.

## std.floorto: Example```ts
floorTo(1.234, 2) // returns 1.23
floorTo(1.234, 1) // returns 1.2
floorTo(1.234, 0) // returns 1
```

---

## std.fun0: Fun0 type

Represents a function that takes no arguments and returns a value of type `R`.

**Signature:**```typescript
export type Fun0<R> = () => R;
```

---

## std.fun1: Fun1 type

Represents a function that takes one argument of type `A` and returns a value of type `R`.

**Signature:**```typescript
export type Fun1<A, R> = (a: A) => R;
```

---

## std.fun2: Fun2 type

Represents a function that takes two arguments of types `A` and `B`, and returns a value of type `R`.

**Signature:**```typescript
export type Fun2<A, B, R> = (a: A, b: B) => R;
```

---

## std.fun3: Fun3 type

Represents a function that takes three arguments of types A, B, and C, and returns a value of type R.

**Signature:**```typescript
export type Fun3<A, B, C, R> = (a: A, b: B, c: C) => R;
```

---

## std.fun4: Fun4 type

Represents a function that takes four arguments of types A, B, C, and D, and returns a value of type R.

**Signature:**```typescript
export type Fun4<A, B, C, D, R> = (a: A, b: B, c: C, d: D) => R;
```

---

## std.fun5: Fun5 type

Represents a function that takes five arguments of types A, B, C, D, and E, and returns a value of type R.

**Signature:**```typescript
export type Fun5<A, B, C, D, E, R> = (a: A, b: B, c: C, d: D, e: E) => R;
```

---

## std.fun6: Fun6 type

Represents a function that takes six arguments of types A, B, C, D, E, F and returns a value of type R.

**Signature:**```typescript
export type Fun6<A, B, C, D, E, F, R> = (a: A, b: B, c: C, d: D, e: E, f: F) => R;
```

---

## std.getbasename: getBaseName() function

Extracts the base name (file name without extension) from a path.

This function returns the file name without its extension.

**Signature:**```typescript
getBaseName: (path: string) => string
```## std.getbasename: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| path | string | The path to extract base name from |


**Returns:**

string

The base name without extension

## std.getbasename: Example```typescript
getBaseName('/path/to/file.txt') // 'file'
getBaseName('image.jpeg') // 'image'
getBaseName('README') // 'README'
getBaseName('.hidden') // '.hidden'
getBaseName('file.tar.gz') // 'file.tar'
```

---

## std.getchannel: getChannel() function

Returns the value of a single channel from a color.

The `channel` parameter is type-safe — only channels that exist on the specific color type are accepted.

**Signature:**```typescript
getChannel: <C extends Color>(c: C, channel: ChannelOf<C>) => number
```## std.getchannel: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | C | The color to read from. |
| channel | [ChannelOf](#std-channelof)&lt;C&gt; | The channel name. |


**Returns:**

number

The channel value.

## std.getchannel: Example```ts
getChannel(rgb8a(255, 0, 0), 'r') // 255
getChannel(hsla(120, 50, 75), 'h') // 120
```

---

## std.getchannels: getChannels() function

Returns all channels of a color as a plain object, excluding the `space` discriminant.

**Signature:**```typescript
getChannels: <C extends Color>(c: C) => Omit<C, "space">
```## std.getchannels: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | C | The color to extract channels from. |


**Returns:**

Omit&lt;C, "space"&gt;

An object mapping channel names to values.

## std.getchannels: Example```ts
getChannels(rgb8a(255, 0, 0))
// { r: 255, g: 0, b: 0, alpha: 1 }
```

---

## std.getchannelsasarray: getChannelsAsArray() function

Returns all channel values of a color as a number array.

The order is consistent per color space: color-specific channels first, then alpha. For example, RGB8 returns `[r, g, b, alpha]`, HSL returns `[h, s, l, alpha]`.

**Signature:**```typescript
getChannelsAsArray: (c: Color) => number[]
```## std.getchannelsasarray: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to extract values from. |


**Returns:**

number\[\]

An array of channel values.

## std.getchannelsasarray: Example```ts
getChannelsAsArray(rgb8a(255, 0, 0)) // [255, 0, 0, 1]
getChannelsAsArray(hsla(120, 50, 75, 0.5)) // [120, 50, 75, 0.5]
```

---

## std.getfileextension: getFileExtension() function

Extracts the file extension from a path.

This function returns the file extension including the dot, or an empty string if no extension is found.

**Signature:**```typescript
getFileExtension: (path: string) => string
```## std.getfileextension: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| path | string | The path to extract extension from |


**Returns:**

string

The file extension including the dot, or empty string

## std.getfileextension: Example```typescript
getFileExtension('/path/to/file.txt') // '.txt'
getFileExtension('image.jpeg') // '.jpeg'
getFileExtension('README') // ''
getFileExtension('.hidden') // ''
getFileExtension('file.tar.gz') // '.gz'
```

---

## std.getfilename: getFileName() function

Extracts the file name from a path.

This function returns the last segment of a path, which is typically the file name.

**Signature:**```typescript
getFileName: (path: string) => string
```## std.getfilename: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| path | string | The path to extract file name from |


**Returns:**

string

The file name

## std.getfilename: Example```typescript
getFileName('/path/to/file.txt') // 'file.txt'
getFileName('file.txt') // 'file.txt'
getFileName('/path/to/directory/') // ''
getFileName('/path/to/directory') // 'directory'
```

---

## std.getqueryparams: getQueryParams() function

Extracts query parameters from a URL as an object.

This function parses the query string and returns all parameters as a plain object with string values.

**Signature:**```typescript
getQueryParams: (url: string) => Record<string, string>
```## std.getqueryparams: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| url | string | The URL to extract parameters from |


**Returns:**

Record&lt;string, string&gt;

An object containing all query parameters

## std.getqueryparams: Example```typescript
const params = getQueryParams('https://example.com/path?name=john&age=30&active=true')
// Result: { name: 'john', age: '30', active: 'true' }

const empty = getQueryParams('https://example.com/path')
// Result: {}
```

---

## std.grayscale: grayscale() function

Converts a color to grayscale by removing all chroma.

Operates in OKLCH space by setting chroma to 0 while preserving lightness and hue. Returns the result in the same color space as the input.

**Signature:**```typescript
grayscale: (c: Color) => Color
```## std.grayscale: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to convert to grayscale. |


**Returns:**

[Color](#std-color)

The grayscale color in the original color space.

## std.grayscale: Example```ts
const gray = grayscale(rgb8a(255, 0, 0, 1))
```

---

## std.groupby: groupBy() function

Groups array elements by a key function.

This function creates an object where keys are the result of the key function and values are arrays of elements that produced that key.

**Signature:**```typescript
groupBy: <T, K extends string | number | symbol>(array: readonly T[], keyFn: (item: T) => K) => Record<K, T[]>
```## std.groupby: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| array | readonly T\[\] | The array to group |
| keyFn | (item: T) =&gt; K | Function that extracts the grouping key from each element |


**Returns:**

Record&lt;K, T\[\]&gt;

An object with grouped elements

## std.groupby: Example```typescript
const users = [
  { name: 'Alice', department: 'Engineering' },
  { name: 'Bob', department: 'Engineering' },
  { name: 'Carol', department: 'Marketing' }
]
const byDepartment = groupBy(users, user => user.department)
// Result: {
//   Engineering: [{ name: 'Alice', ... }, { name: 'Bob', ... }],
//   Marketing: [{ name: 'Carol', ... }]
// }
```

---

## std.hsla.alpha: HSLA.alpha property

**Signature:**```typescript
readonly alpha: number;
```

---

## std.hsla.h: HSLA.h property

**Signature:**```typescript
readonly h: number;
```

---

## std.hsla.l: HSLA.l property

**Signature:**```typescript
readonly l: number;
```

---

## std.hsla: HSLA interface

An HSLA color with `h` (0–360), `s` (0–1), `l` (0–1), and `alpha` (0–1).

**Signature:**```typescript
export interface HSLA 
```## std.hsla: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [alpha](#std-hsla-alpha) | `readonly` | number |  |
| [h](#std-hsla-h) | `readonly` | number |  |
| [l](#std-hsla-l) | `readonly` | number |  |
| [s](#std-hsla-s) | `readonly` | number |  |
| [space](#std-hsla-space) | `readonly` | 'hsl' |  |

---

## std.hsla.s: HSLA.s property

**Signature:**```typescript
readonly s: number;
```

---

## std.hsla.space: HSLA.space property

**Signature:**```typescript
readonly space: 'hsl';
```

---

## std.hslatohslstring: hslaToHslString() function

Serializes an HSLA color to an `hsl()` or `hsla()` CSS string.

Produces `hsl(h, s%, l%)` when alpha is 1, or `hsla(h, s%, l%, alpha)` otherwise. Hue, saturation, and lightness are rounded to two decimal places for readability.

**Signature:**```typescript
hslaToHslString: (c: HSLA) => string
```## std.hslatohslstring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [HSLA](#std-hsla) | The HSLA color to serialize. |


**Returns:**

string

A CSS color string.

## std.hslatohslstring: Example```ts
hslaToHslString(hsla(0, 1, 0.5)) // 'hsl(0 100% 50%)'
hslaToHslString(hsla(120, 0.5, 0.75, 0.5)) // 'hsl(120 50% 75% / 0.5)'
```

---

## std.hslatohsva: hslaToHsva() function

Converts an HSLA color to an HSVA color using a direct formula that avoids an intermediate RGB conversion.

**Signature:**```typescript
hslaToHsva: (c: HSLA) => HSVA
```## std.hslatohsva: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [HSLA](#std-hsla) | The HSLA color to convert. |


**Returns:**

[HSVA](#std-hsva)

An HSVA color.

## std.hslatohsva: Example```ts
hslaToHsva(hsla(0, 1, 0.5)) // hsva(0, 1, 1)
hslaToHsva(hsla(0, 0, 0)) // hsva(0, 0, 0)
hslaToHsva(hsla(120, 0.5, 0.75)) // hsva(120, ~0.333, ~0.875)
```

---

## std.hslatorgb8a: hslaToRgb8a() function

Converts an HSLA color to an RGB8A color using sector-based hue-to-RGB conversion.

**Signature:**```typescript
hslaToRgb8a: (c: HSLA) => RGB8A
```## std.hslatorgb8a: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [HSLA](#std-hsla) | The HSLA color to convert. |


**Returns:**

[RGB8A](#std-rgb8a)

The equivalent RGB8A color.

## std.hslatorgb8a: Example```ts
hslaToRgb8a(hsla(0, 1, 0.5)) // rgb8a(255, 0, 0)
hslaToRgb8a(hsla(120, 1, 0.5)) // rgb8a(0, 255, 0)
hslaToRgb8a(hsla(240, 1, 0.5)) // rgb8a(0, 0, 255)
```

---

## std.hsva.alpha: HSVA.alpha property

**Signature:**```typescript
readonly alpha: number;
```

---

## std.hsva.h: HSVA.h property

**Signature:**```typescript
readonly h: number;
```

---

## std.hsva: HSVA interface

An HSVA color with `h` (0–360), `s` (0–1), `v` (0–1), and `alpha` (0–1).

**Signature:**```typescript
export interface HSVA 
```## std.hsva: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [alpha](#std-hsva-alpha) | `readonly` | number |  |
| [h](#std-hsva-h) | `readonly` | number |  |
| [s](#std-hsva-s) | `readonly` | number |  |
| [space](#std-hsva-space) | `readonly` | 'hsv' |  |
| [v](#std-hsva-v) | `readonly` | number |  |

---

## std.hsva.s: HSVA.s property

**Signature:**```typescript
readonly s: number;
```

---

## std.hsva.space: HSVA.space property

**Signature:**```typescript
readonly space: 'hsv';
```

---

## std.hsva.v: HSVA.v property

**Signature:**```typescript
readonly v: number;
```

---

## std.hsvatohsla: hsvaToHsla() function

Converts an HSVA color to an HSLA color using a direct formula that avoids an intermediate RGB conversion.

**Signature:**```typescript
hsvaToHsla: (c: HSVA) => HSLA
```## std.hsvatohsla: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [HSVA](#std-hsva) | The HSVA color to convert. |


**Returns:**

[HSLA](#std-hsla)

An HSLA color.

## std.hsvatohsla: Example```ts
hsvaToHsla(hsva(0, 1, 1)) // hsla(0, 1, 0.5)
hsvaToHsla(hsva(0, 0, 0)) // hsla(0, 0, 0)
hsvaToHsla(hsva(120, 0.5, 0.8)) // hsla(120, ~0.471, 0.6)
```

---

## std.hsvatohsvstring: hsvaToHsvString() function

Serializes an HSVA color to an `hsv()` or `hsva()` string.

Produces `hsv(h, s%, v%)` when alpha is 1, or `hsva(h, s%, v%, a)` otherwise.

**Signature:**```typescript
hsvaToHsvString: (c: HSVA) => string
```## std.hsvatohsvstring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [HSVA](#std-hsva) | The HSVA color to serialize. |


**Returns:**

string

An HSV color string.

## std.hsvatohsvstring: Example```ts
hsvaToHsvString(hsva(0, 1, 1)) // 'hsv(0, 100%, 100%)'
hsvaToHsvString(hsva(120, 0.5, 0.8, 0.5)) // 'hsva(120, 50%, 80%, 0.5)'
```

---

## std.hsvatorgb8a: hsvaToRgb8a() function

Converts an HSVA color to an RGB8A color.

Uses the standard HSV-to-RGB algorithm with chroma, hue sectors, and an offset to produce final channel values.

**Signature:**```typescript
hsvaToRgb8a: (c: HSVA) => RGB8A
```## std.hsvatorgb8a: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [HSVA](#std-hsva) | The HSVA color to convert. |


**Returns:**

[RGB8A](#std-rgb8a)

An RGB8A color.

## std.hsvatorgb8a: Example```ts
hsvaToRgb8a(hsva(0, 1, 1)) // rgb8a(255, 0, 0)
hsvaToRgb8a(hsva(120, 1, 1)) // rgb8a(0, 255, 0)
hsvaToRgb8a(hsva(0, 0, 0)) // rgb8a(0, 0, 0)
```

---

## std.humanize: humanize() function

Works the same as `underscore` but also replaces underscores with whitespaces.

**Signature:**```typescript
humanize: (s: string) => string
```## std.humanize: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to convert. |


**Returns:**

string

The converted string.

---

## std.hwba.alpha: HWBA.alpha property

**Signature:**```typescript
readonly alpha: number;
```

---

## std.hwba.b: HWBA.b property

**Signature:**```typescript
readonly b: number;
```

---

## std.hwba.h: HWBA.h property

**Signature:**```typescript
readonly h: number;
```

---

## std.hwba: HWBA interface

An HWBA color with `h` (0–360), `w` (0–1), `b` (0–1), and `alpha` (0–1).

**Signature:**```typescript
export interface HWBA 
```## std.hwba: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [alpha](#std-hwba-alpha) | `readonly` | number |  |
| [b](#std-hwba-b) | `readonly` | number |  |
| [h](#std-hwba-h) | `readonly` | number |  |
| [space](#std-hwba-space) | `readonly` | 'hwb' |  |
| [w](#std-hwba-w) | `readonly` | number |  |

---

## std.hwba.space: HWBA.space property

**Signature:**```typescript
readonly space: 'hwb';
```

---

## std.hwba.w: HWBA.w property

**Signature:**```typescript
readonly w: number;
```

---

## std.hwbatohwbstring: hwbaToHwbString() function

Serializes an HWBA color to a CSS `hwb()` string.

Produces `hwb(h w% b%)` when alpha is 1, or `hwb(h w% b% / alpha)` otherwise.

**Signature:**```typescript
hwbaToHwbString: (c: HWBA) => string
```## std.hwbatohwbstring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [HWBA](#std-hwba) | The HWBA color to serialize. |


**Returns:**

string

A CSS `hwb()` color string.

## std.hwbatohwbstring: Example```ts
hwbaToHwbString(hwba(0, 0, 0)) // 'hwb(0 0% 0%)'
hwbaToHwbString(hwba(180, 0.2, 0.3, 0.5)) // 'hwb(180 20% 30% / 0.5)'
```

---

## std.hwbatorgb8a: hwbaToRgb8a() function

Converts an HWBA color to an RGB8A color.

When whiteness plus blackness exceed 1, they are proportionally scaled so that their sum equals 1. The pure hue color is then blended between white and black according to the whiteness and blackness values.

**Signature:**```typescript
hwbaToRgb8a: (c: HWBA) => RGB8A
```## std.hwbatorgb8a: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [HWBA](#std-hwba) | The HWBA color to convert. |


**Returns:**

[RGB8A](#std-rgb8a)

An RGB8A color.

## std.hwbatorgb8a: Example```ts
hwbaToRgb8a(hwba(0, 0, 0)) // rgb8a(255, 0, 0)
hwbaToRgb8a(hwba(0, 1, 0)) // rgb8a(255, 255, 255)
hwbaToRgb8a(hwba(0, 0, 1)) // rgb8a(0, 0, 0)
```

---

## std.id: Id type

Represents an identity type that preserves the properties of the original type.

**Signature:**```typescript
export type Id<T> = {} & {
    [P in keyof T]: T[P];
};
```

---

## std.identity: identity() function

Returns the input value as is.

**Signature:**```typescript
identity: <T>(v: T) => T
```## std.identity: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| v | T | The value to be returned. |


**Returns:**

T

The input value.

---

## std.ifemptystring: ifEmptyString() function

`ifEmpty` returns `value` if it is neither `null` or empty, otherwise it returns `alt`

**Signature:**```typescript
ifEmptyString: (value: string, alt: string) => string
```## std.ifemptystring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to check. |
| alt | string | The alternative value to return if `value` is `null` or empty. |


**Returns:**

string

The original string if it is not `null` or empty, otherwise the alternative value.

---

## std.indexkey: IndexKey type

Represents a key type that can be used to index any object.

**Signature:**```typescript
export type IndexKey = keyof any;
```

---

## std.interpolate: interpolate() function

`interpolate` returns a value between `a` and `b` for any value of `t` (normally between 0 and 1).

**Signature:**```typescript
interpolate: (a: number, b: number, t: number) => number
```## std.interpolate: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | number | The first value. |
| b | number | The second value. |
| t | number | The interpolation value. |


**Returns:**

number

The interpolated value.

## std.interpolate: Example```ts
interpolate(0, 10, 0.5) // returns 5
interpolate(0, 10, 0.25) // returns 2.5
interpolate(0, 10, 0.75) // returns 7.5
```

---

## std.interpolateangle: interpolateAngle() function

Interpolates values in a polar coordinate system looking for the narrowest delta angle. It can be either clock-wise or counter-clock-wise.

**Signature:**```typescript
interpolateAngle: (a: number, b: number, t: number, turn?: number) => number
```## std.interpolateangle: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | number | The first angle in degrees. |
| b | number | The second angle in degrees. |
| t | number | The interpolation value. |
| turn | number | _(Optional)_ The total number of degrees in a full turn. Default is 360.0. |


**Returns:**

number

The interpolated angle.

## std.interpolateangle: Example```ts
interpolateAngle(0, 90, 0.5) // returns 45
interpolateAngle(0, 270, 0.5) // returns 315
interpolateAngle(0, 90, 0.25) // returns 22.5
interpolateAngle(0, 270, 0.25) // returns 337.5
```

---

## std.interpolateangleccw: interpolateAngleCCW() function

Interpolates values in a polar coordinate system always in counter-clock-wise direction.

**Signature:**```typescript
interpolateAngleCCW: (a: number, b: number, t: number, turn?: number) => number
```## std.interpolateangleccw: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | number | The first angle in degrees. |
| b | number | The second angle in degrees. |
| t | number | The interpolation value. |
| turn | number | _(Optional)_ The total number of degrees in a full turn. Default is 360.0. |


**Returns:**

number

The interpolated angle.

## std.interpolateangleccw: Example```ts
interpolateAngleCCW(0, 90, 0.5) // returns 45
interpolateAngleCCW(0, 270, 0.5) // returns 315
interpolateAngleCCW(0, 90, 0.25) // returns 22.5
interpolateAngleCCW(0, 270, 0.25) // returns 337.5
```

---

## std.interpolateanglecw: interpolateAngleCW() function

Interpolates values in a polar coordinate system always in clock-wise direction.

**Signature:**```typescript
interpolateAngleCW: (a: number, b: number, t: number, turn?: number) => number
```## std.interpolateanglecw: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | number | The first angle in degrees. |
| b | number | The second angle in degrees. |
| t | number | The interpolation value. |
| turn | number | _(Optional)_ The total number of degrees in a full turn. Default is 360.0. |


**Returns:**

number

The interpolated angle.

## std.interpolateanglecw: Example```ts
interpolateAngleCW(0, 90, 0.5) // returns 45
interpolateAngleCW(0, 270, 0.5) // returns 315
interpolateAngleCW(0, 90, 0.25) // returns 22.5
interpolateAngleCW(0, 270, 0.25) // returns 337.5
```

---

## std.interpolatecolors: interpolateColors() function

Generates an array of evenly spaced colors between two endpoints (inclusive).

If `steps` is less than 2, returns a single-element array containing the midpoint blend of `a` and `b`.

**Signature:**```typescript
interpolateColors: (a: Color, b: Color, steps: number, space?: ColorSpace) => Color[]
```## std.interpolatecolors: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | [Color](#std-color) | The start color. |
| b | [Color](#std-color) | The end color. |
| steps | number | The number of colors to generate (inclusive of both endpoints). |
| space | [ColorSpace](#std-colorspace) | _(Optional)_ The color space to interpolate in. Defaults to `'oklch'`. |


**Returns:**

[Color](#std-color)\[\]

An array of interpolated colors.

## std.interpolatecolors: Example```ts
import { rgb8a } from './color'
interpolateColors(rgb8a(255, 0, 0), rgb8a(0, 0, 255), 5)
// [red, ..., blue] — 5 evenly spaced colors in oklch
```

---

## std.interpolatewidestangle: interpolateWidestAngle() function

Interpolates values in a polar coordinate system looking for the shortest delta angle. Note: Despite the name "widest", this function actually uses the shortest angle difference, identical to `interpolateAngle`. The name is misleading for historical reasons.

**Signature:**```typescript
interpolateWidestAngle: (a: number, b: number, t: number, turn?: number) => number
```## std.interpolatewidestangle: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | number | The first angle in degrees. |
| b | number | The second angle in degrees. |
| t | number | The interpolation value. |
| turn | number | _(Optional)_ The total number of degrees in a full turn. Default is 360.0. |


**Returns:**

number

The interpolated angle.

## std.interpolatewidestangle: Example```ts
interpolateWidestAngle(0, 90, 0.5) // returns 45 (using shortest path)
interpolateWidestAngle(0, 270, 0.5) // returns 315 (using shortest path)
interpolateWidestAngle(0, 90, 0.25) // returns 22.5 (using shortest path)
interpolateWidestAngle(0, 270, 0.25) // returns 337.5 (using shortest path)
```

---

## std.interval: interval() function

Executes a function repeatedly at a fixed interval.

**Signature:**```typescript
interval: (fn: () => void, ms: number) => () => void
```## std.interval: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | () =&gt; void | The function to execute periodically. The function can optionally return a callback that will be invoked when the delay is cancelled. |
| ms | number | The number of milliseconds between each execution. |


**Returns:**

() =&gt; void

A function that, when called, will cancel the interval and stop future executions.

## std.interval: Example```ts
// Execute a function every 2 seconds
const stop = interval(() => console.warn('Tick'), 2000);

// Stop the interval after some time
setTimeout(() => stop(), 10000);
```

---

## std.intervalanimationframe: intervalAnimationFrame() function

Executes a function repeatedly using requestAnimationFrame.

**Signature:**```typescript
intervalAnimationFrame: (callback: (time: DOMHighResTimeStamp) => void) => () => void
```## std.intervalanimationframe: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| callback | (time: DOMHighResTimeStamp) =&gt; void | The function to execute periodically. |


**Returns:**

() =&gt; void

A function that, when called, will cancel the interval and stop future executions.

---

## std.invalid: Invalid type

Represents an invalid value with an associated error.

**Signature:**```typescript
export type Invalid<E> = {
    readonly type: 'invalid';
    readonly error: E;
};
```

---

## std.invert: invert() function

Inverts the RGB channels of a color while preserving alpha.

Converts to RGB8 space, inverts each channel (`255 - value`), and converts back to the original color space.

**Signature:**```typescript
invert: (c: Color) => Color
```## std.invert: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to invert. |


**Returns:**

[Color](#std-color)

The inverted color in the original color space.

## std.invert: Example```ts
const inv = invert(rgb8a(255, 0, 0, 1))
// result is cyan: rgb8a(0, 255, 255, 1)
```

---

## std.isalpha: isAlpha() function

Checks if `s` contains only (and at least one) alphabetical characters.

**Signature:**```typescript
isAlpha: (s: string) => boolean
```## std.isalpha: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to check. |


**Returns:**

boolean

`true` if the string contains only alphabetical characters, `false` otherwise.

---

## std.isalphanum: isAlphaNum() function

`isAlphaNum` returns `true` if the string only contains alpha-numeric characters.

**Signature:**```typescript
isAlphaNum: (value: string) => boolean
```## std.isalphanum: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to check. |


**Returns:**

boolean

`true` if the string contains only alpha-numeric characters, `false` otherwise.

---

## std.isarrayempty: isArrayEmpty() function

Checks if an array is empty.

**Signature:**```typescript
isArrayEmpty: <T>(arr: T[]) => arr is []
```## std.isarrayempty: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| arr | T\[\] | The array to check. |


**Returns:**

arr is \[\]

`true` if the array is empty, `false` otherwise.

---

## std.isbreakingwhitespace: isBreakingWhitespace() function

Checks if a string contains any breaking whitespace characters.

**Signature:**```typescript
isBreakingWhitespace: (value: string) => boolean
```## std.isbreakingwhitespace: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to check. |


**Returns:**

boolean

`true` if the string contains breaking whitespace characters, `false` otherwise.

---

## std.isdigitsonly: isDigitsOnly() function

`isDigitsOnly` returns `true` if the string only contains digits.

**Signature:**```typescript
isDigitsOnly: (value: string) => boolean
```## std.isdigitsonly: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to check. |


**Returns:**

boolean

`true` if the string contains only digits, `false` otherwise.

---

## std.isemptyobject: isEmptyObject() function

Checks if an object is empty. An object is considered empty if it has no own enumerable properties.

**Signature:**```typescript
isEmptyObject: (obj: object) => boolean
```## std.isemptyobject: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| obj | object | The object to check. |


**Returns:**

boolean

`true` if the object is empty, `false` otherwise.

---

## std.isemptystring: isEmptyString() function

`isEmpty` returns true if either `value` is null or is an empty string.

**Signature:**```typescript
isEmptyString: (value: string) => boolean
```## std.isemptystring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to check. |


**Returns:**

boolean

`true` if the string is `null` or empty, `false` otherwise.

---

## std.ishsla: isHsla() function

Returns `true` if the color is an HSLA color.

**Signature:**```typescript
isHsla: (c: Color) => c is HSLA
```## std.ishsla: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to check. |


**Returns:**

c is [HSLA](#std-hsla)

`true` if the color is HSLA.

---

## std.ishsva: isHsva() function

Returns `true` if the color is an HSVA color.

**Signature:**```typescript
isHsva: (c: Color) => c is HSVA
```## std.ishsva: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to check. |


**Returns:**

c is [HSVA](#std-hsva)

`true` if the color is HSVA.

---

## std.ishwba: isHwba() function

Returns `true` if the color is an HWBA color.

**Signature:**```typescript
isHwba: (c: Color) => c is HWBA
```## std.ishwba: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to check. |


**Returns:**

c is [HWBA](#std-hwba)

`true` if the color is HWBA.

---

## std.isingamut: isInGamut() function

Tests whether a color is within the sRGB gamut.

Colors in HSL, HSV, HWB, RGB, and RGB8 spaces are always in gamut by definition. Colors in LAB, LCH, OKLAB, and OKLCH may fall outside sRGB if their chroma is too high.

**Signature:**```typescript
isInGamut: (c: Color, tolerance?: number) => boolean
```## std.isingamut: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to test. |
| tolerance | number | _(Optional)_ How far outside 0–1 is still considered in-gamut. Defaults to 0.002 to account for floating-point imprecision. |


**Returns:**

boolean

`true` if the color is representable in sRGB.

## std.isingamut: Example```ts
isInGamut(rgb8a(255, 0, 0)) // true
isInGamut(oklcha(0.5, 0.4, 150)) // likely false (very high chroma)
```

---

## std.isjson: isJSON() function

Checks if the value is a valid JSON value with comprehensive validation.

This function provides thorough validation that goes beyond basic type checking by recursively validating nested objects and arrays to ensure the entire structure can be safely serialized to JSON.

**Signature:**```typescript
isJSON: (value: JSONValue) => value is JSONValue
```## std.isjson: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | [JSONValue](#std-jsonvalue) | The value to check. |


**Returns:**

value is [JSONValue](#std-jsonvalue)

`true` if the value is a completely valid JSON value; otherwise, `false`.

## std.isjson: Example```typescript
isJSON('hello') // true
isJSON(42) // true
isJSON(true) // true
isJSON(null) // true
isJSON({ name: 'Alice', age: 30 }) // true
isJSON([1, 2, { nested: true }]) // true
isJSON(undefined) // false
isJSON(() => {}) // false
isJSON({ func: () => {} }) // false (contains non-JSON value)
```

---

## std.isjsonarray: isJSONArray() function

Checks if the value is a JSON array with recursive validation.

This function provides more thorough validation than `Array.isArray()` by recursively checking that all elements in the array are valid JSON values. This is essential for ensuring data can be safely serialized to JSON.

**Signature:**```typescript
isJSONArray: (value: JSONValue) => value is JSONArray
```## std.isjsonarray: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | [JSONValue](#std-jsonvalue) | The value to check. |


**Returns:**

value is [JSONArray](#std-jsonarray)

`true` if the value is a JSON array with all valid JSON elements; otherwise, `false`.

## std.isjsonarray: Example```typescript
isJSONArray([1, 2, 3]) // true
isJSONArray(['hello', 'world']) // true
isJSONArray([1, 'hello', true, null]) // true
isJSONArray([1, 2, undefined]) // false (undefined is not JSON-serializable)
isJSONArray([1, 2, () => {}]) // false (functions are not JSON-serializable)
```

---

## std.isjsonobject: isJSONObject() function

Checks if the value is a JSON object.

**Signature:**```typescript
isJSONObject: (value: JSONValue) => value is JSONObject
```## std.isjsonobject: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | [JSONValue](#std-jsonvalue) | The value to check. |


**Returns:**

value is [JSONObject](#std-jsonobject)

`true` if the value is a JSON object; otherwise, `false`.

---

## std.isjsonprimitive: isJSONPrimitive() function

Checks if the value is a JSON primitive.

**Signature:**```typescript
isJSONPrimitive: (value: JSONValue) => value is JSONPrimitive
```## std.isjsonprimitive: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | [JSONValue](#std-jsonvalue) | The value to check. |


**Returns:**

value is [JSONPrimitive](#std-jsonprimitive)

`true` if the value is a JSON primitive; otherwise, `false`.

---

## std.islaba: isLaba() function

Returns `true` if the color is a LABA color.

**Signature:**```typescript
isLaba: (c: Color) => c is LABA
```## std.islaba: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to check. |


**Returns:**

c is [LABA](#std-laba)

`true` if the color is LABA.

---

## std.islcha: isLcha() function

Returns `true` if the color is a LCHA color.

**Signature:**```typescript
isLcha: (c: Color) => c is LCHA
```## std.islcha: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to check. |


**Returns:**

c is [LCHA](#std-lcha)

`true` if the color is LCHA.

---

## std.islowercase: isLowerCase() function

Returns `true` if the value string is composed of only lower cased characters or case neutral characters.

**Signature:**```typescript
isLowerCase: (value: string) => boolean
```## std.islowercase: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to check. |


**Returns:**

boolean

`true` if the string contains only lower case characters, `false` otherwise.

---

## std.isobject: isObject() function

Checks if the given value is an object.

**Signature:**```typescript
isObject: (obj: unknown) => obj is Record<IndexKey, unknown>
```## std.isobject: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| obj | unknown | The value to check. |


**Returns:**

obj is Record&lt;[IndexKey](#std-indexkey), unknown&gt;

`true` if the value is an object, `false` otherwise.

---

## std.isoklaba: isOklaba() function

Returns `true` if the color is an OKLABA color.

**Signature:**```typescript
isOklaba: (c: Color) => c is OKLABA
```## std.isoklaba: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to check. |


**Returns:**

c is [OKLABA](#std-oklaba)

`true` if the color is OKLABA.

---

## std.isoklcha: isOklcha() function

Returns `true` if the color is an OKLCHA color.

**Signature:**```typescript
isOklcha: (c: Color) => c is OKLCHA
```## std.isoklcha: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to check. |


**Returns:**

c is [OKLCHA](#std-oklcha)

`true` if the color is OKLCHA.

---

## std.isopaque: isOpaque() function

Returns `true` if the color is fully opaque (alpha &gt;= 1).

**Signature:**```typescript
isOpaque: (c: Color) => boolean
```## std.isopaque: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to check. |


**Returns:**

boolean

`true` if opaque.

## std.isopaque: Example```ts
isOpaque(rgb8a(255, 0, 0)) // true
isOpaque(rgb8a(255, 0, 0, 0.5)) // false
```

---

## std.isrgb8a: isRgb8a() function

Returns `true` if the color is an RGB8A color (0–255 channels).

**Signature:**```typescript
isRgb8a: (c: Color) => c is RGB8A
```## std.isrgb8a: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to check. |


**Returns:**

c is [RGB8A](#std-rgb8a)

`true` if the color is RGB8A.

---

## std.isrgba: isRgba() function

Returns `true` if the color is an RGBA color (0–1 channels).

**Signature:**```typescript
isRgba: (c: Color) => c is RGBA
```## std.isrgba: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to check. |


**Returns:**

c is [RGBA](#std-rgba)

`true` if the color is RGBA.

---

## std.issameday: isSameDay() function

Checks if two dates represent the same calendar day.

This comparison ignores time components and only compares the date parts. Useful for date-based filtering and grouping.

**Signature:**```typescript
isSameDay: (dateA: Date, dateB: Date) => boolean
```## std.issameday: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| dateA | Date | The first date |
| dateB | Date | The second date |


**Returns:**

boolean

true if both dates represent the same calendar day

## std.issameday: Example```typescript
const date1 = new Date('2023-01-15T10:30:00')
const date2 = new Date('2023-01-15T18:45:00')
const date3 = new Date('2023-01-16T10:30:00')

isSameDay(date1, date2) // true
isSameDay(date1, date3) // false
```

---

## std.issamehour: isSameHour() function

Checks if two dates represent the same hour.

This comparison ignores date and minute components and only compares the hour parts. Useful for time-based filtering and grouping.

**Signature:**```typescript
isSameHour: (dateA: Date, dateB: Date) => boolean
```## std.issamehour: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| dateA | Date | The first date |
| dateB | Date | The second date |


**Returns:**

boolean

true if both dates represent the same hour

## std.issamehour: Example```typescript
const date1 = new Date('2023-01-15T10:30:00')
const date2 = new Date('2023-01-15T10:45:00')
const date3 = new Date('2023-01-16T10:30:00')

isSameHour(date1, date2) // true
isSameHour(date1, date3) // false
```

---

## std.issameminute: isSameMinute() function

Checks if two dates represent the same minute.

This comparison ignores date, hour, and second components and only compares the minute parts. Useful for time-based filtering and grouping.

**Signature:**```typescript
isSameMinute: (dateA: Date, dateB: Date) => boolean
```## std.issameminute: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| dateA | Date | The first date |
| dateB | Date | The second date |


**Returns:**

boolean

true if both dates represent the same minute

## std.issameminute: Example```typescript
const date1 = new Date('2023-01-15T10:30:00')
const date2 = new Date('2023-01-15T10:30:45')
const date3 = new Date('2023-01-16T10:30:00')

isSameMinute(date1, date2) // true
isSameMinute(date1, date3) // false
```

---

## std.issamemonth: isSameMonth() function

Checks if two dates represent the same calendar month.

This comparison ignores the day and time components and only compares the month and year parts. Useful for monthly reports and date grouping.

**Signature:**```typescript
isSameMonth: (dateA: Date, dateB: Date) => boolean
```## std.issamemonth: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| dateA | Date | The first date |
| dateB | Date | The second date |


**Returns:**

boolean

true if both dates represent the same calendar month

## std.issamemonth: Example```typescript
const date1 = new Date('2023-01-15') // January
const date2 = new Date('2023-02-15') // February
const date3 = new Date('2024-01-15') // January of next year

isSameMonth(date1, date2) // false
isSameMonth(date1, date3) // true
```

---

## std.issamesecond: isSameSecond() function

Checks if two dates represent the same second.

This comparison ignores date, hour, and minute components and only compares the second parts. Useful for time-based filtering and grouping.

**Signature:**```typescript
isSameSecond: (dateA: Date, dateB: Date) => boolean
```## std.issamesecond: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| dateA | Date | The first date |
| dateB | Date | The second date |


**Returns:**

boolean

true if both dates represent the same second

## std.issamesecond: Example```typescript
const date1 = new Date('2023-01-15T10:30:00')
const date2 = new Date('2023-01-15T10:30:00')
const date3 = new Date('2023-01-16T10:30:00')

isSameSecond(date1, date2) // true
isSameSecond(date1, date3) // false
```

---

## std.issameweek: isSameWeek() function

Checks if two dates represent the same calendar week.

This comparison uses the ISO 8601 week definition, where weeks start on Monday. Useful for weekly reports and date grouping.

**Signature:**```typescript
isSameWeek: (dateA: Date, dateB: Date) => boolean
```## std.issameweek: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| dateA | Date | The first date |
| dateB | Date | The second date |


**Returns:**

boolean

true if both dates represent the same calendar week

## std.issameweek: Example```typescript
const date1 = new Date('2023-01-15') // Monday
const date2 = new Date('2023-01-16') // Tuesday
const date3 = new Date('2023-01-22') // Monday of next week

isSameWeek(date1, date2) // true
isSameWeek(date1, date3) // false
```

---

## std.issameyear: isSameYear() function

Checks if two dates represent the same calendar year.

This comparison ignores the month and day components and only compares the year part. Useful for yearly reports and date grouping.

**Signature:**```typescript
isSameYear: (dateA: Date, dateB: Date) => boolean
```## std.issameyear: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| dateA | Date | The first date |
| dateB | Date | The second date |


**Returns:**

boolean

true if both dates represent the same calendar year

## std.issameyear: Example```typescript
const date1 = new Date('2023-01-15') // January
const date2 = new Date('2023-02-15') // February
const date3 = new Date('2024-01-15') // January of next year

isSameYear(date1, date2) // true
isSameYear(date1, date3) // false
```

---

## std.isspaceat: isSpaceAt() function

Checks if the character at the specified position in a string is a whitespace character.

**Signature:**```typescript
isSpaceAt: (s: string, pos: number) => boolean
```## std.isspaceat: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The input string. |
| pos | number | The position of the character to check. |


**Returns:**

boolean

A boolean indicating whether the character at the specified position is a whitespace character.

---

## std.istransparent: isTransparent() function

Returns `true` if the color is fully transparent (alpha &lt;= 0).

**Signature:**```typescript
isTransparent: (c: Color) => boolean
```## std.istransparent: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to check. |


**Returns:**

boolean

`true` if transparent.

## std.istransparent: Example```ts
isTransparent(rgb8a(255, 0, 0, 0)) // true
isTransparent(rgb8a(255, 0, 0, 0.5)) // false
```

---

## std.isunion: IsUnion type

**Signature:**```typescript
export type IsUnion<T, U = T> = T extends any ? [U] extends [T] ? false : true : never;
```

---

## std.isuppercase: isUpperCase() function

Returns `true` if the value string is composed of only upper cased characters or case neutral characters.

**Signature:**```typescript
isUpperCase: (value: string) => boolean
```## std.isuppercase: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to check. |


**Returns:**

boolean

`true` if the string contains only upper case characters, `false` otherwise.

---

## std.isvaliddate: isValidDate() function

Checks if a value is a valid Date object.

This function checks both that the value is a Date instance and that it represents a valid date (not NaN).

**Signature:**```typescript
isValidDate: (date: unknown) => date is Date
```## std.isvaliddate: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| date | unknown | The value to check |


**Returns:**

date is Date

true if the value is a valid Date, false otherwise

## std.isvaliddate: Example```typescript
isValidDate(new Date()) // true
isValidDate(new Date('2023-01-15')) // true
isValidDate(new Date('invalid')) // false
isValidDate('2023-01-15') // false
isValidDate(null) // false
```

---

## std.isvalidurl: isValidUrl() function

Checks if a string is a valid URL.

This function validates URLs more safely than using the URL constructor directly, as it doesn't throw exceptions.

**Signature:**```typescript
isValidUrl: (url: string) => boolean
```## std.isvalidurl: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| url | string | The string to validate |


**Returns:**

boolean

true if the string is a valid URL, false otherwise

## std.isvalidurl: Example```typescript
isValidUrl('https://example.com') // true
isValidUrl('http://localhost:3000/path') // true
isValidUrl('ftp://files.example.com') // true
isValidUrl('not-a-url') // false
isValidUrl('') // false
```

---

## std.isweekend: isWeekend() function

Checks if a date falls on a weekend (Saturday or Sunday).

This is useful for business logic that needs to handle weekends differently, such as scheduling or date calculations.

**Signature:**```typescript
isWeekend: (date: Date) => boolean
```## std.isweekend: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| date | Date | The date to check |


**Returns:**

boolean

true if the date is a Saturday or Sunday

## std.isweekend: Example```typescript
const saturday = new Date('2023-01-14') // Saturday
const monday = new Date('2023-01-16') // Monday

isWeekend(saturday) // true
isWeekend(monday) // false
```

---

## std.joinarraywithconjunction: joinArrayWithConjunction() function

Joins an array of values into a string using a conjunction and separator.

**Signature:**```typescript
joinArrayWithConjunction: <A>(arr: A[], conjunction?: string, separator?: string) => string
```## std.joinarraywithconjunction: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| arr | A\[\] | The array of values to join. |
| conjunction | string | _(Optional)_ The conjunction to use between the second-to-last and last value. Default is ' and '. |
| separator | string | _(Optional)_ The separator to use between each value. Default is ', '. |


**Returns:**

string

The joined string.

---

## std.joinpaths: joinPaths() function

Joins multiple path segments into a single path.

This function properly handles leading and trailing slashes, ensuring a clean path without double slashes or missing separators.

**Signature:**```typescript
joinPaths: (...paths: string[]) => string
```## std.joinpaths: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| paths | string\[\] | Path segments to join |


**Returns:**

string

The joined path

## std.joinpaths: Example```typescript
const path = joinPaths('api', 'v1', 'users', '123')
// Result: 'api/v1/users/123'

const withSlashes = joinPaths('/api/', '/v1/', 'users/')
// Result: '/api/v1/users/'

const empty = joinPaths('', 'path', '', 'file')
// Result: 'path/file'
```

---

## std.jsonarray: JSONArray type

Represents an array of JSON values.

**Signature:**```typescript
export type JSONArray = JSONValue[];
```
**References:** [JSONValue](#std-jsonvalue)

---

## std.jsonobject: JSONObject interface

Represents a JSON object.

**Signature:**```typescript
export interface JSONObject 
```

---

## std.jsonprimitive: JSONPrimitive type

Represents a JSON primitive value. It can be a string, boolean, number, or Nothing (null or undefined).

**Signature:**```typescript
export type JSONPrimitive = string | boolean | number | Nothing;
```
**References:** [Nothing](#std-nothing)

---

## std.jsonvalue: JSONValue type

Represents a JSON value, which can be a primitive, an object, or an array.

**Signature:**```typescript
export type JSONValue = JSONPrimitive | JSONObject | JSONArray;
```
**References:** [JSONPrimitive](#std-jsonprimitive), [JSONObject](#std-jsonobject), [JSONArray](#std-jsonarray)

---

## std.jsquote: jsQuote() function

Quotes a string for use in JavaScript code. If the string contains a newline character, it will be quoted using backticks. Otherwise, it will be quoted using single quotes (`'`) or double quotes (`"`) based on the `prefer` parameter.

**Signature:**```typescript
jsQuote: (s: string, prefer?: string) => string
```## std.jsquote: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to be quoted. |
| prefer | string | _(Optional)_ The preferred quote character. Defaults to single quote (`'`). |


**Returns:**

string

The quoted string.

---

## std.laba.a: LABA.a property

**Signature:**```typescript
readonly a: number;
```

---

## std.laba.alpha: LABA.alpha property

**Signature:**```typescript
readonly alpha: number;
```

---

## std.laba.b: LABA.b property

**Signature:**```typescript
readonly b: number;
```

---

## std.laba.l: LABA.l property

**Signature:**```typescript
readonly l: number;
```

---

## std.laba: LABA interface

A CIE LAB color with `l` (0–1), `a` (\~-125 to 125), `b` (\~-125 to 125), and `alpha` (0–1).

**Signature:**```typescript
export interface LABA 
```## std.laba: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [a](#std-laba-a) | `readonly` | number |  |
| [alpha](#std-laba-alpha) | `readonly` | number |  |
| [b](#std-laba-b) | `readonly` | number |  |
| [l](#std-laba-l) | `readonly` | number |  |
| [space](#std-laba-space) | `readonly` | 'lab' |  |

---

## std.laba.space: LABA.space property

**Signature:**```typescript
readonly space: 'lab';
```

---

## std.labatolabstring: labaToLabString() function

Serializes a LABA color to a `lab()` CSS string.

Produces `lab(L a b)` when alpha is 1, or `lab(L a b / alpha)` otherwise. Lightness is rounded to 2 decimal places; `a` and `b` axes are rounded to 4 decimal places.

**Signature:**```typescript
labaToLabString: (c: LABA) => string
```## std.labatolabstring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [LABA](#std-laba) | The LABA color to serialize. |


**Returns:**

string

A CSS `lab()` color string.

## std.labatolabstring: Example```ts
labaToLabString(laba(0.5, -20, 30))
// 'lab(50 -20 30)'
labaToLabString(laba(0.5, -20, 30, 0.5))
// 'lab(50 -20 30 / 0.5)'
```

---

## std.labatorgb8a: labaToRgb8a() function

Converts a LABA color to an RGB8A color through the CIE XYZ intermediate color space.

Channel values are clamped to the sRGB gamut before rounding.

**Signature:**```typescript
labaToRgb8a: (c: LABA) => RGB8A
```## std.labatorgb8a: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [LABA](#std-laba) | The LABA color to convert. |


**Returns:**

[RGB8A](#std-rgb8a)

The equivalent RGB8A color.

## std.labatorgb8a: Example```ts
labaToRgb8a(laba(0.5323, 80.11, 67.22)) // rgb8a(~255, ~0, ~0)
labaToRgb8a(laba(0, 0, 0))              // rgb8a(0, 0, 0)
```

---

## std.lcha.alpha: LCHA.alpha property

**Signature:**```typescript
readonly alpha: number;
```

---

## std.lcha.c: LCHA.c property

**Signature:**```typescript
readonly c: number;
```

---

## std.lcha.h: LCHA.h property

**Signature:**```typescript
readonly h: number;
```

---

## std.lcha.l: LCHA.l property

**Signature:**```typescript
readonly l: number;
```

---

## std.lcha: LCHA interface

A CIE LCH color with `l` (0–1), `c` (0–150+), `h` (0–360), and `alpha` (0–1).

**Signature:**```typescript
export interface LCHA 
```## std.lcha: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [alpha](#std-lcha-alpha) | `readonly` | number |  |
| [c](#std-lcha-c) | `readonly` | number |  |
| [h](#std-lcha-h) | `readonly` | number |  |
| [l](#std-lcha-l) | `readonly` | number |  |
| [space](#std-lcha-space) | `readonly` | 'lch' |  |

---

## std.lcha.space: LCHA.space property

**Signature:**```typescript
readonly space: 'lch';
```

---

## std.lchatolchstring: lchaToLchString() function

Serializes a LCHA color to an `lch()` CSS string.

Produces `lch(L C H)` when alpha is 1, or `lch(L C H / alpha)` otherwise. Lightness is rounded to 2 decimal places; chroma and hue are rounded to 4 decimal places.

**Signature:**```typescript
lchaToLchString: (c: LCHA) => string
```## std.lchatolchstring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [LCHA](#std-lcha) | The LCHA color to serialize. |


**Returns:**

string

A CSS `lch()` color string.

## std.lchatolchstring: Example```ts
lchaToLchString(lcha(0.5, 36, 326))
// 'lch(50 36 326)'
lchaToLchString(lcha(0.5, 36, 326, 0.8))
// 'lch(50 36 326 / 0.8)'
```

---

## std.lchatorgb8a: lchaToRgb8a() function

Converts a LCHA color to an RGB8A color by converting from polar coordinates to rectangular LAB and then to RGB8A.

**Signature:**```typescript
lchaToRgb8a: (c: LCHA) => RGB8A
```## std.lchatorgb8a: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [LCHA](#std-lcha) | The LCHA color to convert. |


**Returns:**

[RGB8A](#std-rgb8a)

The equivalent RGB8A color.

## std.lchatorgb8a: Example```ts
lchaToRgb8a(lcha(0.5323, 104.55, 40.0)) // rgb8a(~255, ~0, ~0)
lchaToRgb8a(lcha(0, 0, 0))              // rgb8a(0, 0, 0)
```

---

## std.lighten: lighten() function

Increases the lightness of a color by the given amount.

Operates in OKLCH space and returns the result in the same color space as the input.

**Signature:**```typescript
lighten: (c: Color, amount: number) => Color
```## std.lighten: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to lighten. |
| amount | number | A value between 0 and 1 indicating how much to increase lightness. |


**Returns:**

[Color](#std-color)

The lightened color in the original color space.

## std.lighten: Example```ts
const light = lighten(rgb8a(100, 50, 50, 1), 0.2)
```

---

## std.loading: Loading type

Represents a loading state in an asynchronous result.

**Signature:**```typescript
export type Loading<V> = {
    readonly type: 'Loading';
    readonly previousValue?: V;
};
```

---

## std.looseequal: looseEqual() function

Checks if two values are loosely equal.

**Signature:**```typescript
looseEqual: <T>(a: T, b: T) => boolean
```## std.looseequal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | T | The first value to compare. |
| b | T | The second value to compare. |


**Returns:**

boolean

`true` if the values are loosely equal, `false` otherwise.

---

## std.lowercasefirst: lowerCaseFirst() function

Convert first letter in `value` to lower case.

**Signature:**```typescript
lowerCaseFirst: (value: string) => string
```## std.lowercasefirst: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to convert. |


**Returns:**

string

The string with the first letter in lower case.

---

## std.lpad: lpad() function

Pads a string on the left with a specified character until it reaches a specified length. If the string is already longer than the specified length, it is returned as is.

**Signature:**```typescript
lpad: (s: string, char: string, length: number) => string
```## std.lpad: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to pad. |
| char | string | The character to use for padding. |
| length | number | The desired length of the padded string. |


**Returns:**

string

The padded string.

---

## std.luminance: luminance() function

Computes the WCAG relative luminance of a color.

Converts the color to sRGB, linearizes each channel, and returns the weighted sum per the WCAG 2.x formula.

**Signature:**```typescript
luminance: (c: Color) => number
```## std.luminance: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to measure |


**Returns:**

number

A number between 0 (darkest) and 1 (lightest)

## std.luminance: Example```ts
luminance(rgb8a(255, 255, 255)) // 1
luminance(rgb8a(0, 0, 0))       // 0
```

---

## std.map: map() function

Maps an iterable, transforming each element with the mapper function.

This function creates a new iterable that yields transformed elements. It's lazy and memory-efficient, processing elements on-demand.

**Signature:**```typescript
map: <T, U>(iterable: Iterable<T>, mapper: (item: T) => U) => Iterable<U>
```## std.map: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| iterable | Iterable&lt;T&gt; | The iterable to map |
| mapper | (item: T) =&gt; U | Function that transforms each element |


**Returns:**

Iterable&lt;U&gt;

An iterable that yields transformed elements

## std.map: Example```typescript
const numbers = [1, 2, 3, 4, 5]
const doubled = [...map(numbers, n => n * 2)] // [2, 4, 6, 8, 10]

const users = [{ name: 'Alice' }, { name: 'Bob' }]
const names = [...map(users, user => user.name)] // ['Alice', 'Bob']
```

---

## std.mapchars: mapChars() function

It maps a string character by character using `callback`.

**Signature:**```typescript
mapChars: <T>(callback: (c: string) => T, value: string) => T[]
```## std.mapchars: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| callback | (c: string) =&gt; T | The function to apply to each character in the string. |
| value | string | The string to map. |


**Returns:**

T\[\]

An array of the mapped characters.

---

## std.mapentries: mapEntries() function

Gets all entries from a Map as an array of key-value pairs.

This provides a convenient way to get Map entries as an array for further processing or serialization.

**Signature:**```typescript
mapEntries: <K, V>(map: Map<K, V>) => [K, V][]
```## std.mapentries: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| map | Map&lt;K, V&gt; | The Map to extract entries from |


**Returns:**

\[K, V\]\[\]

An array of all key-value pairs in the Map

## std.mapentries: Example```typescript
const map = new Map([['a', 1], ['b', 2], ['c', 3]])
const entries = mapEntries(map)
// Result: [['a', 1], ['b', 2], ['c', 3]]
```

---

## std.mapfilter: mapFilter() function

Creates a new Map containing only entries that satisfy the predicate.

This provides a functional approach to filtering Maps, similar to Array.prototype.filter but for Map objects.

**Signature:**```typescript
mapFilter: <K, V>(map: Map<K, V>, predicate: (value: V, key: K) => boolean) => Map<K, V>
```## std.mapfilter: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| map | Map&lt;K, V&gt; | The Map to filter |
| predicate | (value: V, key: K) =&gt; boolean | Function that tests each entry |


**Returns:**

Map&lt;K, V&gt;

A new Map with entries that satisfy the predicate

## std.mapfilter: Example```typescript
const map = new Map([['a', 1], ['b', 2], ['c', 3], ['d', 4]])
const evenValues = mapFilter(map, (value) => value % 2 === 0)
// Result: Map { 'b' => 2, 'd' => 4 }
```

---

## std.mapfromentries: mapFromEntries() function

Creates a Map from an array of key-value pairs.

This function provides better type inference than the Map constructor when working with typed key-value pairs.

**Signature:**```typescript
mapFromEntries: <K, V>(entries: readonly [K, V][]) => Map<K, V>
```## std.mapfromentries: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| entries | readonly \[K, V\]\[\] | Array of key-value pairs |


**Returns:**

Map&lt;K, V&gt;

A new Map containing the entries

## std.mapfromentries: Example```typescript
const entries: [string, number][] = [['a', 1], ['b', 2], ['c', 3]]
const map = mapFromEntries(entries)
// Result: Map { 'a' => 1, 'b' => 2, 'c' => 3 }
```

---

## std.mapgroupby: mapGroupBy() function

Groups an array of items by a key function into a Map.

This is more flexible than object-based grouping as it supports any key type, not just strings and symbols.

**Signature:**```typescript
mapGroupBy: <T, K>(array: readonly T[], keyFn: (item: T) => K) => Map<K, T[]>
```## std.mapgroupby: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| array | readonly T\[\] | Array of items to group |
| keyFn | (item: T) =&gt; K | Function that extracts the grouping key from each item |


**Returns:**

Map&lt;K, T\[\]&gt;

A Map where keys are group identifiers and values are arrays of items

## std.mapgroupby: Example```typescript
const users = [
  { name: 'Alice', department: 'Engineering' },
  { name: 'Bob', department: 'Engineering' },
  { name: 'Carol', department: 'Marketing' }
]
const byDepartment = mapGroupBy(users, user => user.department)
// Result: Map {
//   'Engineering' => [{ name: 'Alice', ... }, { name: 'Bob', ... }],
//   'Marketing' => [{ name: 'Carol', ... }]
// }
```

---

## std.mapisempty: mapIsEmpty() function

Checks if a Map is empty.

This provides a semantic way to check for empty Maps, making code more readable than checking size === 0.

**Signature:**```typescript
mapIsEmpty: <K, V>(map: Map<K, V>) => boolean
```## std.mapisempty: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| map | Map&lt;K, V&gt; | The Map to check |


**Returns:**

boolean

true if the Map has no entries, false otherwise

## std.mapisempty: Example```typescript
const emptyMap = new Map()
const nonEmptyMap = new Map([['a', 1]])

mapIsEmpty(emptyMap) // true
mapIsEmpty(nonEmptyMap) // false
```

---

## std.mapkeys: mapKeys() function

Gets all keys from a Map as an array.

This provides a convenient way to get Map keys as an array for further processing with array methods.

**Signature:**```typescript
mapKeys: <K, V>(map: Map<K, V>) => K[]
```## std.mapkeys: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| map | Map&lt;K, V&gt; | The Map to extract keys from |


**Returns:**

K\[\]

An array of all keys in the Map

## std.mapkeys: Example```typescript
const map = new Map([['a', 1], ['b', 2], ['c', 3]])
const keys = mapKeys(map)
// Result: ['a', 'b', 'c']
```

---

## std.mapmap: mapMap() function

Creates a new Map with values transformed by the mapper function.

This provides a functional approach to transforming Map values, similar to Array.prototype.map but for Map objects.

**Signature:**```typescript
mapMap: <K, V, U>(map: Map<K, V>, mapper: (value: V, key: K) => U) => Map<K, U>
```## std.mapmap: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| map | Map&lt;K, V&gt; | The Map to transform |
| mapper | (value: V, key: K) =&gt; U | Function that transforms each value |


**Returns:**

Map&lt;K, U&gt;

A new Map with transformed values

## std.mapmap: Example```typescript
const map = new Map([['a', 1], ['b', 2], ['c', 3]])
const doubled = mapMap(map, (value) => value * 2)
// Result: Map { 'a' => 2, 'b' => 4, 'c' => 6 }
```

---

## std.mapmerge: mapMerge() function

Merges multiple Maps into a single Map.

Later Maps take precedence over earlier ones for duplicate keys. This is useful for combining configuration objects or merging data.

**Signature:**```typescript
mapMerge: <K, V>(...maps: Map<K, V>[]) => Map<K, V>
```## std.mapmerge: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| maps | Map&lt;K, V&gt;\[\] | Maps to merge |


**Returns:**

Map&lt;K, V&gt;

A new Map containing all entries from input Maps

## std.mapmerge: Example```typescript
const map1 = new Map([['a', 1], ['b', 2]])
const map2 = new Map([['b', 3], ['c', 4]])
const merged = mapMerge(map1, map2)
// Result: Map { 'a' => 1, 'b' => 3, 'c' => 4 }
```

---

## std.mapregexp: mapRegExp() function

Map the function `f` on each occurance matched by the pattern.

**Signature:**```typescript
mapRegExp: (subject: string, pattern: RegExp, f: (...s: string[]) => string) => string
```## std.mapregexp: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| subject | string | The string to search. |
| pattern | RegExp | The pattern to match. |
| f | (...s: string\[\]) =&gt; string | The function to apply to each match. |


**Returns:**

string

---

## std.maptoobject: mapToObject() function

Converts a Map with string keys to a plain object.

This is useful for serialization or when you need to work with APIs that expect plain objects instead of Maps.

**Signature:**```typescript
mapToObject: <V>(map: Map<string, V>) => Record<string, V>
```## std.maptoobject: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| map | Map&lt;string, V&gt; | The Map to convert |


**Returns:**

Record&lt;string, V&gt;

A plain object with the same key-value pairs

## std.maptoobject: Example```typescript
const map = new Map([['name', 'Alice'], ['age', '30']])
const obj = mapToObject(map)
// Result: { name: 'Alice', age: '30' }
```

---

## std.mapvalues: mapValues() function

Gets all values from a Map as an array.

This provides a convenient way to get Map values as an array for further processing with array methods.

**Signature:**```typescript
mapValues: <K, V>(map: Map<K, V>) => V[]
```## std.mapvalues: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| map | Map&lt;K, V&gt; | The Map to extract values from |


**Returns:**

V\[\]

An array of all values in the Map

## std.mapvalues: Example```typescript
const map = new Map([['a', 1], ['b', 2], ['c', 3]])
const values = mapValues(map)
// Result: [1, 2, 3]
```

---

## std.maybe: Maybe type

Represents a type that can either hold a value of type T or be undefined.

**Signature:**```typescript
export type Maybe<T> = T | undefined;
```

---

## std package

## std: Functions


| Function | Description |
| --- | --- |
| [addDays(date, days)](#std-adddays) | Adds the specified number of days to a date. This function creates a new Date object with the specified number of days added. Negative values subtract days. |
| [addHours(date, hours)](#std-addhours) | Adds the specified number of hours to a date. This function creates a new Date object with the specified number of hours added. Negative values subtract hours. |
| [addMinutes(date, minutes)](#std-addminutes) | Adds the specified number of minutes to a date. This function creates a new Date object with the specified number of minutes added. Negative values subtract minutes. |
| [analogous(c, angle)](#std-analogous) | Returns an analogous color scheme consisting of the original color and two neighbors at the given angle offset. |
| [angleDifference(a, b, turn)](#std-angledifference) | Calculates the minimum difference between two angles in degrees. |
| [applyArrayDiffOperations(operations, start)](#std-applyarraydiffoperations) | Applies a series of operations to an array and returns the modified array. |
| [areArraysEqual(a, b, equals)](#std-arearraysequal) | Checks if two arrays are equal based on a custom equality function. |
| [arrayDiffOperations(from, to, getKey)](#std-arraydiffoperations) | Calculates the difference operations between two arrays based on a key function. |
| [arrayHasValues(arr)](#std-arrayhasvalues) | Checks if an array has values. |
| [arrayHead(arr)](#std-arrayhead) | Returns the first element of an array, or `undefined` if the array is empty. |
| [arrayTail(arr)](#std-arraytail) | Returns a new array containing all elements of the input array except for the first element. |
| [biAbs(x)](#std-biabs) | Returns the absolute value of a bigint. |
| [biCeilDiv(x, y)](#std-biceildiv) | Calculates the ceiling division of two BigInt numbers. |
| [biCompare(x, y)](#std-bicompare) | Compares two BigInt values and returns a number indicating their relative order. |
| [biFloorDiv(x, y)](#std-bifloordiv) | Divides two BigInt numbers and returns the largest integer less than or equal to the quotient. |
| [biGcd(x, y)](#std-bigcd) | Calculates the greatest common divisor (GCD) of two BigInt numbers. |
| [biIsEven(x)](#std-biiseven) | Checks if a given bigint is even. |
| [biIsNegative(x)](#std-biisnegative) | Checks if a given bigint is negative. |
| [biIsOdd(x)](#std-biisodd) | Checks if a given bigint is odd. |
| [biIsOne(x)](#std-biisone) | Checks if a given bigint is equal to 1n. |
| [biIsPositive(x)](#std-biispositive) | Checks if a bigint is positive. |
| [biIsPrime(x)](#std-biisprime) | Checks if a given number is prime. |
| [biIsZero(x)](#std-biiszero) | Checks if a given bigint is zero. |
| [biLcm(x, y)](#std-bilcm) | Calculates the least common multiple (LCM) of two BigInt numbers. |
| [biMax(x, y)](#std-bimax) | Returns the maximum of two BigInt values. |
| [biMin(x, y)](#std-bimin) | Returns the minimum of two BigInt values. |
| [biNextPrime(x)](#std-binextprime) | Finds the next prime number greater than the given number. |
| [biPow(x, y)](#std-bipow) | Calculates the power of a bigint number. |
| [biPrevPrime(x)](#std-biprevprime) | Returns the previous prime number less than the given number. Throws an error if there is no previous prime. |
| [booleanToInt(v)](#std-booleantoint) | Converts a boolean to an integer value (`true` =&gt; `1`, `false` =&gt; `0`). |
| [buildArray(length, f)](#std-buildarray) | Generates an array of values by applying a function to each index. This function provides a more semantic alternative to `Array.from({ length }, (_, i) => f(i))` with better readability and intent expression. It's particularly useful for creating arrays with computed values based on their position. |
| [buildUrl(base, params)](#std-buildurl) | Builds a URL from a base URL and query parameters. This function safely constructs URLs with query parameters, handling encoding and existing parameters properly. |
| [canonicalizeNewlines(value)](#std-canonicalizenewlines) | Replaces occurrances of `\r\n`, `\n\r`, `\r` with `\n` |
| [canParseBoolean(v)](#std-canparseboolean) | Returns `true` if the passed value can be parsed as a boolean. The following values are considered parsable: - `'true'` / `'false'` - `'0'` / `'1'` - `'on'` / `'off'` The comparison is case insensitive. |
| [canParseColor(s)](#std-canparsecolor) | Returns `true` if the string can be parsed as any supported color format. |
| [canParseHex(s)](#std-canparsehex) | Returns `true` if the string can be parsed as a hex color. |
| [canParseHsl(s)](#std-canparsehsl) | Returns `true` if the string can be parsed as an `hsl()` or `hsla()` color. Supports both legacy comma-separated and modern space-separated syntax. |
| [canParseHsv(s)](#std-canparsehsv) | Returns `true` if the string can be parsed as an `hsv()` or `hsva()` color. This is a non-standard format commonly used in design tools such as Figma and Sketch. Supports both legacy comma-separated and modern space-separated syntax. |
| [canParseHwb(s)](#std-canparsehwb) | Returns `true` if the string can be parsed as an `hwb()` CSS Level 4 color. Only the modern space-separated syntax is supported: `hwb(h w% b%)` or `hwb(h w% b% / alpha)`. |
| [canParseLab(s)](#std-canparselab) | Returns `true` if the string can be parsed as a `lab()` color. |
| [canParseLch(s)](#std-canparselch) | Returns `true` if the string can be parsed as an `lch()` color. |
| [canParseNamedColor(s)](#std-canparsenamedcolor) | Returns `true` if the string is a recognized CSS named color. |
| [canParseOklab(s)](#std-canparseoklab) | Returns `true` if the string can be parsed as an `oklab()` color. |
| [canParseOklch(s)](#std-canparseoklch) | Returns `true` if the string can be parsed as an `oklch()` color. |
| [canParseRgb(s)](#std-canparsergb) | Returns `true` if the string can be parsed as an `rgb()` or `rgba()` color. |
| [capitalize(s)](#std-capitalize) | `capitalize` returns a string with the first character convert to upper case. |
| [capitalizeWords(value, whiteSpaceOnly)](#std-capitalizewords) | Capitalize the first letter of every word in `value`. If `whiteSpaceOnly` is set to `true` the process is limited to whitespace separated words. |
| [ceilTo(v, decimals)](#std-ceilto) | Rounds a number up to the specified number of decimals. |
| [chain(iterables)](#std-chain) | Chains multiple iterables into a single iterable. This function creates a new iterable that yields all elements from the input iterables in sequence. |
| [chunk(array, size)](#std-chunk) | Splits an array into chunks of the specified size. This function divides an array into smaller arrays of a fixed size. The last chunk may contain fewer elements if the array length is not evenly divisible by the chunk size. |
| [chunkString(s, len)](#std-chunkstring) | Returns an array of `string` whose elements are equally long (using `len`). If the string `s` is not exactly divisible by `len` the last element of the array will be shorter. |
| [clamp(value, min, max)](#std-clamp) | `clamp` restricts a value within the specified range. |
| [clampInt(value, min, max)](#std-clampint) | Clamps a number to a specified range and returns an integer value. |
| [clampSym(v, max)](#std-clampsym) | Like clamp but you only pass one argument (`max`) that is used as the upper limit and the opposite (additive inverse or `-max`) as the lower limit. |
| [clampToGamut(c)](#std-clamptogamut) | Clamps a color to the sRGB gamut by clamping RGB channel values. If the color is already in gamut, it is returned unchanged. Otherwise, it is converted to RGB8 (which clamps channels to 0–255) and converted back to the original color space. For perceptually better results on wide-gamut colors, use [clampToGamutOklch()](#std-clamptogamutoklch) which preserves lightness and hue. |
| [clampToGamutOklch(c)](#std-clamptogamutoklch) | Clamps a color to the sRGB gamut by reducing chroma in OKLCH space while preserving lightness and hue. This produces more perceptually pleasing results than simple RGB clamping, as it finds the most saturated version of the color that still fits within sRGB. Uses binary search to find the maximum in-gamut chroma. |
| [closestNamedColor(c)](#std-closestnamedcolor) | Finds the CSS named color closest to the given color using CIE76 (simple Euclidean) distance in CIELAB space. |
| [collapseText(value)](#std-collapsetext) | It cleans up all the whitespaces in the passed `value`. `collapse` does the following: - remove trailing/leading whitespaces - within the string, it collapses seqeunces of whitespaces into a single space character For whitespaces in this description, it is intended to be anything that is matched by the regular expression `\s`. |
| [colorDistance(a, b)](#std-colordistance) | Computes the CIEDE2000 color distance between two colors. This is the most perceptually uniform color difference metric standardized by the CIE. It accounts for lightness, chroma, and hue weighting as well as interactive effects between chroma and hue differences. |
| [colorDistanceSimple(a, b)](#std-colordistancesimple) | Computes the CIE76 color distance (Euclidean distance in CIELAB space) between two colors. |
| [colorToString(c)](#std-colortostring) | Serializes a color to a CSS-compatible string based on its color space. RGBA (0–1) colors are first converted to RGB8A for CSS serialization. |
| [compareArrays(a, b, comparef, shorterFirst)](#std-comparearrays) | Compares two arrays based on their lengths and element values. |
| [compareBooleans(a, b)](#std-comparebooleans) | Returns a comparison value (`Int`) from two boolean values. |
| [compareCaseInsensitive(a, b)](#std-comparecaseinsensitive) | Compares two strings ignoring their case. |
| [compareDates(a, b)](#std-comparedates) | Compares two dates. |
| [compareNumbers(a, b)](#std-comparenumbers) | It returns the comparison value (an integer number) between two `float` values. |
| [compareStrings(a, b)](#std-comparestrings) | It compares to string and it returns a negative number if `a` is inferior to `b`, zero if they are the same, or otherwise a positive non-sero number. |
| [complement(c)](#std-complement) | Returns the complementary color by rotating the hue 180 degrees in OKLCH space. |
| [compose()](#std-compose) | Composes functions from right to left. This function creates a new function that applies the given functions in right-to-left order. The rightmost function can accept multiple arguments, while the others must be unary. |
| [compose(fn1)](#std-compose1) |  |
| [compose(fn2, fn1)](#std-compose2) |  |
| [compose(fn3, fn2, fn1)](#std-compose3) |  |
| [compose(fn4, fn3, fn2, fn1)](#std-compose4) |  |
| [containsAllText(s, tests)](#std-containsalltext) | `containsAllText` returns `true` if `s` contains all of the strings in `tests` |
| [containsAllTextCaseInsensitive(s, tests)](#std-containsalltextcaseinsensitive) | `containsAllTextCaseInsensitive` returns `true` if `s` contains all of the strings in `tests` regardless of the text case |
| [containsAnyText(s, tests)](#std-containsanytext) | `containsAnyText` returns `true` if `s` contains any of the strings in `tests` |
| [containsAnyTextCaseInsensitive(s, tests)](#std-containsanytextcaseinsensitive) | `containsAnyTextCaseInsensitive` returns `true` if `s` contains any of the strings in `tests` regardless of the text case |
| [contrastColor(c, dark, light)](#std-contrastcolor) | Picks whichever of two candidates has better contrast against a reference color. Useful for choosing a readable foreground color for a given background. |
| [contrastRatio(a, b)](#std-contrastratio) | Computes the WCAG contrast ratio between two colors. The ratio ranges from 1:1 (identical) to 21:1 (black vs white). |
| [convertColor(c, to)](#std-convertcolor) | Converts a color from one color space to another. Uses RGB8A as an internal hub — the source color is first converted to RGB8A, then from RGB8A to the target space. |
| [countStringOccurrences(s, test)](#std-countstringoccurrences) | Return the number of occurrences of `test` in `s`. |
| [curryLeft(f)](#std-curryleft) | Curries a function from left to right. |
| [darken(c, amount)](#std-darken) | Decreases the lightness of a color by the given amount. Operates in OKLCH space and returns the result in the same color space as the input. |
| [dasherize(s)](#std-dasherize) | `dasherize` replaces all the occurrances of `_` with `-` |
| [debounce(delay, callback, { atBegin }, input)](#std-debounce) | Debounce execution of a function. Debouncing, unlike throttling, guarantees that a function is only executed a single time, either at the very beginning of a series of calls, or at the very end. |
| [decodeBase64(s)](#std-decodebase64) | Decodes a base64 encoded string. |
| [deepClone(obj)](#std-deepclone) | Creates a deep clone of an object. This function recursively clones objects, arrays, and primitive values. It handles Date objects specially and avoids infinite recursion. |
| [deepEqual(a, b)](#std-deepequal) | Checks if two values are equal by comparing their contents. |
| [deferred()](#std-deferred) | Creates a deferred object. A deferred object is a promise that can be resolved or rejected. |
| [delayed(fn, ms)](#std-delayed) | Delays the execution of a function by the given number of milliseconds. |
| [delayedAnimationFrame(callback)](#std-delayedanimationframe) | Delays the execution of a function using requestAnimationFrame. |
| [deleteFirstFromString(value, toremove)](#std-deletefirstfromstring) | If present, it removes the first occurrence of `toremove` from `value`. |
| [deleteStringAfter(value, toremove)](#std-deletestringafter) | If present, it removes the `toremove` text from the end of `value`. |
| [deleteStringBefore(value, toremove)](#std-deletestringbefore) | If present, it removes the `toremove` text from the beginning of `value`. |
| [deleteSubstring(value, toremove)](#std-deletesubstring) | If present, it removes all the occurrences of `toremove` from `value`. |
| [desaturate(c, amount)](#std-desaturate) | Decreases the chroma (saturation) of a color by the given amount. Operates in OKLCH space. The amount is scaled by 0.4 to map the 0–1 input range to the typical OKLCH chroma range. |
| [detectColorSpace(s)](#std-detectcolorspace) | Detects the color space of a CSS color string. Returns `undefined` when the format is not recognized. CSS color strings (`#hex`, `rgb()`, named colors) are detected as `'rgb8'` since they use 0–255 integer channels. |
| [diffInDays(dateA, dateB)](#std-diffindays) | Calculates the difference in days between two dates. Returns a positive number if dateB is after dateA, negative if before. The calculation ignores time components and focuses on calendar days. |
| [diffInHours(dateA, dateB)](#std-diffinhours) | Calculates the difference in hours between two dates. Returns a positive number if dateB is after dateA, negative if before. The result includes fractional hours for precise calculations. |
| [ellipsis(s, maxlen, symbol)](#std-ellipsis) | `ellipsis` truncates `s` at len `maxlen` replaces the last characters with the content of `symbol`. |
| [ellipsisMiddle(s, maxlen, symbol)](#std-ellipsismiddle) | Same as `ellipsis` but puts the symbol in the middle of the string and not to the end. |
| [encodeBase64(s)](#std-encodebase64) | Encodes a string to base64. |
| [endOfDay(date)](#std-endofday) | Returns a new Date representing the end of the day (23:59:59.999). This is useful for date range queries where you need the last millisecond of a given day. |
| [endOfWeek(date)](#std-endofweek) | Returns a new Date representing the end of the week (Sunday 23:59:59.999). This follows the ISO 8601 standard where Sunday is the last day of the week. Useful for weekly reports and date grouping. |
| [equalColors(a, b, tolerance)](#std-equalcolors) | Checks whether two colors are perceptually equal within a given tolerance, by comparing their CIELAB channels. Both colors are first converted to the LAB color space. The `l`, `a`, and `b` channels are compared using the supplied tolerance, while alpha is compared with a fixed tolerance of 0.01. |
| [every(iterable, predicate)](#std-every) | Tests whether all elements in an iterable satisfy the predicate. This function returns true if the predicate returns true for all elements, or false otherwise. It short-circuits on the first false result. |
| [fillArray(length, value)](#std-fillarray) | Creates a new array with the specified length and fills it with the provided value. This function provides a more semantic alternative to `Array(length).fill(value)` or `new Array(length).fill(value)` with better type inference and clearer intent. It's particularly useful when you need arrays of non-primitive values or when working with functional programming patterns. |
| [filter(iterable, predicate)](#std-filter) | Filters an iterable, yielding only elements that satisfy the predicate. This function creates a new iterable that yields only elements for which the predicate returns true. It's lazy and memory-efficient. |
| [filterCharcodes(s, predicate)](#std-filtercharcodes) | Same as `filterCharcodes` but `predicate` operates on integer char codes instead of string characters. |
| [filterChars(s, predicate)](#std-filterchars) | `filterString` applies `predicate` character by character to `s` and it returns a filtered version of the string. |
| [filterMapArray(arr, f)](#std-filtermaparray) | Applies a mapping function to each element of an array and returns a new array containing the mapped values, excluding any `null` or `undefined` values. |
| [filterNullsFromArray(arr)](#std-filternullsfromarray) | Filters out null and undefined values from an array. |
| [find(iterable, predicate)](#std-find) | Finds the first element in an iterable that satisfies the predicate. This function returns the first element for which the predicate returns true, or undefined if no such element is found. |
| [flip(fn)](#std-flip) | Reverses the order of all arguments of a function. This function creates a new function that calls the original function with all arguments in reverse order. This is useful for creating more readable function compositions or when you need to change the argument order for currying or partial application. |
| [floorTo(v, decimals)](#std-floorto) | Rounds a number down to the specified number of decimals. |
| [getBaseName(path)](#std-getbasename) | Extracts the base name (file name without extension) from a path. This function returns the file name without its extension. |
| [getChannel(c, channel)](#std-getchannel) | Returns the value of a single channel from a color. The `channel` parameter is type-safe — only channels that exist on the specific color type are accepted. |
| [getChannels(c)](#std-getchannels) | Returns all channels of a color as a plain object, excluding the `space` discriminant. |
| [getChannelsAsArray(c)](#std-getchannelsasarray) | Returns all channel values of a color as a number array. The order is consistent per color space: color-specific channels first, then alpha. For example, RGB8 returns `[r, g, b, alpha]`, HSL returns `[h, s, l, alpha]`. |
| [getFileExtension(path)](#std-getfileextension) | Extracts the file extension from a path. This function returns the file extension including the dot, or an empty string if no extension is found. |
| [getFileName(path)](#std-getfilename) | Extracts the file name from a path. This function returns the last segment of a path, which is typically the file name. |
| [getQueryParams(url)](#std-getqueryparams) | Extracts query parameters from a URL as an object. This function parses the query string and returns all parameters as a plain object with string values. |
| [grayscale(c)](#std-grayscale) | Converts a color to grayscale by removing all chroma. Operates in OKLCH space by setting chroma to 0 while preserving lightness and hue. Returns the result in the same color space as the input. |
| [groupBy(array, keyFn)](#std-groupby) | Groups array elements by a key function. This function creates an object where keys are the result of the key function and values are arrays of elements that produced that key. |
| [hsla(h, s, l, alpha)](#std-hsla) | Creates an HSLA color, wrapping hue and clamping other channels. |
| [hslaToHslString(c)](#std-hslatohslstring) | Serializes an HSLA color to an `hsl()` or `hsla()` CSS string. Produces `hsl(h, s%, l%)` when alpha is 1, or `hsla(h, s%, l%, alpha)` otherwise. Hue, saturation, and lightness are rounded to two decimal places for readability. |
| [hslaToHsva(c)](#std-hslatohsva) | Converts an HSLA color to an HSVA color using a direct formula that avoids an intermediate RGB conversion. |
| [hslaToRgb8a(c)](#std-hslatorgb8a) | Converts an HSLA color to an RGB8A color using sector-based hue-to-RGB conversion. |
| [hsva(h, s, v, alpha)](#std-hsva) | Creates an HSVA color, wrapping hue and clamping other channels. |
| [hsvaToHsla(c)](#std-hsvatohsla) | Converts an HSVA color to an HSLA color using a direct formula that avoids an intermediate RGB conversion. |
| [hsvaToHsvString(c)](#std-hsvatohsvstring) | Serializes an HSVA color to an `hsv()` or `hsva()` string. Produces `hsv(h, s%, v%)` when alpha is 1, or `hsva(h, s%, v%, a)` otherwise. |
| [hsvaToRgb8a(c)](#std-hsvatorgb8a) | Converts an HSVA color to an RGB8A color. Uses the standard HSV-to-RGB algorithm with chroma, hue sectors, and an offset to produce final channel values. |
| [humanize(s)](#std-humanize) | Works the same as `underscore` but also replaces underscores with whitespaces. |
| [hwba(h, w, b, alpha)](#std-hwba) | Creates an HWBA color, wrapping hue and clamping other channels. |
| [hwbaToHwbString(c)](#std-hwbatohwbstring) | Serializes an HWBA color to a CSS `hwb()` string. Produces `hwb(h w% b%)` when alpha is 1, or `hwb(h w% b% / alpha)` otherwise. |
| [hwbaToRgb8a(c)](#std-hwbatorgb8a) | Converts an HWBA color to an RGB8A color. When whiteness plus blackness exceed 1, they are proportionally scaled so that their sum equals 1. The pure hue color is then blended between white and black according to the whiteness and blackness values. |
| [identity(v)](#std-identity) | Returns the input value as is. |
| [ifEmptyString(value, alt)](#std-ifemptystring) | `ifEmpty` returns `value` if it is neither `null` or empty, otherwise it returns `alt` |
| [interpolate(a, b, t)](#std-interpolate) | `interpolate` returns a value between `a` and `b` for any value of `t` (normally between 0 and 1). |
| [interpolateAngle(a, b, t, turn)](#std-interpolateangle) | Interpolates values in a polar coordinate system looking for the narrowest delta angle. It can be either clock-wise or counter-clock-wise. |
| [interpolateAngleCCW(a, b, t, turn)](#std-interpolateangleccw) | Interpolates values in a polar coordinate system always in counter-clock-wise direction. |
| [interpolateAngleCW(a, b, t, turn)](#std-interpolateanglecw) | Interpolates values in a polar coordinate system always in clock-wise direction. |
| [interpolateColors(a, b, steps, space)](#std-interpolatecolors) | Generates an array of evenly spaced colors between two endpoints (inclusive). If `steps` is less than 2, returns a single-element array containing the midpoint blend of `a` and `b`. |
| [interpolateWidestAngle(a, b, t, turn)](#std-interpolatewidestangle) | Interpolates values in a polar coordinate system looking for the shortest delta angle. Note: Despite the name "widest", this function actually uses the shortest angle difference, identical to `interpolateAngle`. The name is misleading for historical reasons. |
| [interval(fn, ms)](#std-interval) | Executes a function repeatedly at a fixed interval. |
| [intervalAnimationFrame(callback)](#std-intervalanimationframe) | Executes a function repeatedly using requestAnimationFrame. |
| [invert(c)](#std-invert) | Inverts the RGB channels of a color while preserving alpha. Converts to RGB8 space, inverts each channel (`255 - value`), and converts back to the original color space. |
| [isAlpha(s)](#std-isalpha) | Checks if `s` contains only (and at least one) alphabetical characters. |
| [isAlphaNum(value)](#std-isalphanum) | `isAlphaNum` returns `true` if the string only contains alpha-numeric characters. |
| [isArrayEmpty(arr)](#std-isarrayempty) | Checks if an array is empty. |
| [isBreakingWhitespace(value)](#std-isbreakingwhitespace) | Checks if a string contains any breaking whitespace characters. |
| [isDigitsOnly(value)](#std-isdigitsonly) | `isDigitsOnly` returns `true` if the string only contains digits. |
| [isEmptyObject(obj)](#std-isemptyobject) | Checks if an object is empty. An object is considered empty if it has no own enumerable properties. |
| [isEmptyString(value)](#std-isemptystring) | `isEmpty` returns true if either `value` is null or is an empty string. |
| [isHsla(c)](#std-ishsla) | Returns `true` if the color is an HSLA color. |
| [isHsva(c)](#std-ishsva) | Returns `true` if the color is an HSVA color. |
| [isHwba(c)](#std-ishwba) | Returns `true` if the color is an HWBA color. |
| [isInGamut(c, tolerance)](#std-isingamut) | Tests whether a color is within the sRGB gamut. Colors in HSL, HSV, HWB, RGB, and RGB8 spaces are always in gamut by definition. Colors in LAB, LCH, OKLAB, and OKLCH may fall outside sRGB if their chroma is too high. |
| [isJSON(value)](#std-isjson) | Checks if the value is a valid JSON value with comprehensive validation. This function provides thorough validation that goes beyond basic type checking by recursively validating nested objects and arrays to ensure the entire structure can be safely serialized to JSON. |
| [isJSONArray(value)](#std-isjsonarray) | Checks if the value is a JSON array with recursive validation. This function provides more thorough validation than `Array.isArray()` by recursively checking that all elements in the array are valid JSON values. This is essential for ensuring data can be safely serialized to JSON. |
| [isJSONObject(value)](#std-isjsonobject) | Checks if the value is a JSON object. |
| [isJSONPrimitive(value)](#std-isjsonprimitive) | Checks if the value is a JSON primitive. |
| [isLaba(c)](#std-islaba) | Returns `true` if the color is a LABA color. |
| [isLcha(c)](#std-islcha) | Returns `true` if the color is a LCHA color. |
| [isLowerCase(value)](#std-islowercase) | Returns `true` if the value string is composed of only lower cased characters or case neutral characters. |
| [isObject(obj)](#std-isobject) | Checks if the given value is an object. |
| [isOklaba(c)](#std-isoklaba) | Returns `true` if the color is an OKLABA color. |
| [isOklcha(c)](#std-isoklcha) | Returns `true` if the color is an OKLCHA color. |
| [isOpaque(c)](#std-isopaque) | Returns `true` if the color is fully opaque (alpha &gt;= 1). |
| [isRgb8a(c)](#std-isrgb8a) | Returns `true` if the color is an RGB8A color (0–255 channels). |
| [isRgba(c)](#std-isrgba) | Returns `true` if the color is an RGBA color (0–1 channels). |
| [isSameDay(dateA, dateB)](#std-issameday) | Checks if two dates represent the same calendar day. This comparison ignores time components and only compares the date parts. Useful for date-based filtering and grouping. |
| [isSameHour(dateA, dateB)](#std-issamehour) | Checks if two dates represent the same hour. This comparison ignores date and minute components and only compares the hour parts. Useful for time-based filtering and grouping. |
| [isSameMinute(dateA, dateB)](#std-issameminute) | Checks if two dates represent the same minute. This comparison ignores date, hour, and second components and only compares the minute parts. Useful for time-based filtering and grouping. |
| [isSameMonth(dateA, dateB)](#std-issamemonth) | Checks if two dates represent the same calendar month. This comparison ignores the day and time components and only compares the month and year parts. Useful for monthly reports and date grouping. |
| [isSameSecond(dateA, dateB)](#std-issamesecond) | Checks if two dates represent the same second. This comparison ignores date, hour, and minute components and only compares the second parts. Useful for time-based filtering and grouping. |
| [isSameWeek(dateA, dateB)](#std-issameweek) | Checks if two dates represent the same calendar week. This comparison uses the ISO 8601 week definition, where weeks start on Monday. Useful for weekly reports and date grouping. |
| [isSameYear(dateA, dateB)](#std-issameyear) | Checks if two dates represent the same calendar year. This comparison ignores the month and day components and only compares the year part. Useful for yearly reports and date grouping. |
| [isSpaceAt(s, pos)](#std-isspaceat) | Checks if the character at the specified position in a string is a whitespace character. |
| [isTransparent(c)](#std-istransparent) | Returns `true` if the color is fully transparent (alpha &lt;= 0). |
| [isUpperCase(value)](#std-isuppercase) | Returns `true` if the value string is composed of only upper cased characters or case neutral characters. |
| [isValidDate(date)](#std-isvaliddate) | Checks if a value is a valid Date object. This function checks both that the value is a Date instance and that it represents a valid date (not NaN). |
| [isValidUrl(url)](#std-isvalidurl) | Checks if a string is a valid URL. This function validates URLs more safely than using the URL constructor directly, as it doesn't throw exceptions. |
| [isWeekend(date)](#std-isweekend) | Checks if a date falls on a weekend (Saturday or Sunday). This is useful for business logic that needs to handle weekends differently, such as scheduling or date calculations. |
| [joinArrayWithConjunction(arr, conjunction, separator)](#std-joinarraywithconjunction) | Joins an array of values into a string using a conjunction and separator. |
| [joinPaths(paths)](#std-joinpaths) | Joins multiple path segments into a single path. This function properly handles leading and trailing slashes, ensuring a clean path without double slashes or missing separators. |
| [jsQuote(s, prefer)](#std-jsquote) | Quotes a string for use in JavaScript code. If the string contains a newline character, it will be quoted using backticks. Otherwise, it will be quoted using single quotes (`'`) or double quotes (`"`) based on the `prefer` parameter. |
| [laba(l, a, b, alpha)](#std-laba) | Creates a CIE LAB color. |
| [labaToLabString(c)](#std-labatolabstring) | Serializes a LABA color to a `lab()` CSS string. Produces `lab(L a b)` when alpha is 1, or `lab(L a b / alpha)` otherwise. Lightness is rounded to 2 decimal places; `a` and `b` axes are rounded to 4 decimal places. |
| [labaToRgb8a(c)](#std-labatorgb8a) | Converts a LABA color to an RGB8A color through the CIE XYZ intermediate color space. Channel values are clamped to the sRGB gamut before rounding. |
| [lcha(l, c, h, alpha)](#std-lcha) | Creates a CIE LCH color. |
| [lchaToLchString(c)](#std-lchatolchstring) | Serializes a LCHA color to an `lch()` CSS string. Produces `lch(L C H)` when alpha is 1, or `lch(L C H / alpha)` otherwise. Lightness is rounded to 2 decimal places; chroma and hue are rounded to 4 decimal places. |
| [lchaToRgb8a(c)](#std-lchatorgb8a) | Converts a LCHA color to an RGB8A color by converting from polar coordinates to rectangular LAB and then to RGB8A. |
| [lighten(c, amount)](#std-lighten) | Increases the lightness of a color by the given amount. Operates in OKLCH space and returns the result in the same color space as the input. |
| [looseEqual(a, b)](#std-looseequal) | Checks if two values are loosely equal. |
| [lowerCaseFirst(value)](#std-lowercasefirst) | Convert first letter in `value` to lower case. |
| [lpad(s, char, length)](#std-lpad) | Pads a string on the left with a specified character until it reaches a specified length. If the string is already longer than the specified length, it is returned as is. |
| [luminance(c)](#std-luminance) | Computes the WCAG relative luminance of a color. Converts the color to sRGB, linearizes each channel, and returns the weighted sum per the WCAG 2.x formula. |
| [map(iterable, mapper)](#std-map) | Maps an iterable, transforming each element with the mapper function. This function creates a new iterable that yields transformed elements. It's lazy and memory-efficient, processing elements on-demand. |
| [mapChars(callback, value)](#std-mapchars) | It maps a string character by character using `callback`. |
| [mapEntries(map)](#std-mapentries) | Gets all entries from a Map as an array of key-value pairs. This provides a convenient way to get Map entries as an array for further processing or serialization. |
| [mapFilter(map, predicate)](#std-mapfilter) | Creates a new Map containing only entries that satisfy the predicate. This provides a functional approach to filtering Maps, similar to Array.prototype.filter but for Map objects. |
| [mapFromEntries(entries)](#std-mapfromentries) | Creates a Map from an array of key-value pairs. This function provides better type inference than the Map constructor when working with typed key-value pairs. |
| [mapGroupBy(array, keyFn)](#std-mapgroupby) | Groups an array of items by a key function into a Map. This is more flexible than object-based grouping as it supports any key type, not just strings and symbols. |
| [mapIsEmpty(map)](#std-mapisempty) | Checks if a Map is empty. This provides a semantic way to check for empty Maps, making code more readable than checking size === 0. |
| [mapKeys(map)](#std-mapkeys) | Gets all keys from a Map as an array. This provides a convenient way to get Map keys as an array for further processing with array methods. |
| [mapMap(map, mapper)](#std-mapmap) | Creates a new Map with values transformed by the mapper function. This provides a functional approach to transforming Map values, similar to Array.prototype.map but for Map objects. |
| [mapMerge(maps)](#std-mapmerge) | Merges multiple Maps into a single Map. Later Maps take precedence over earlier ones for duplicate keys. This is useful for combining configuration objects or merging data. |
| [mapRegExp(subject, pattern, f)](#std-mapregexp) | Map the function `f` on each occurance matched by the pattern. |
| [mapToObject(map)](#std-maptoobject) | Converts a Map with string keys to a plain object. This is useful for serialization or when you need to work with APIs that expect plain objects instead of Maps. |
| [mapValues(map)](#std-mapvalues) | Gets all values from a Map as an array. This provides a convenient way to get Map values as an array for further processing with array methods. |
| [meetsContrast(a, b, level)](#std-meetscontrast) | Checks whether two colors meet a WCAG contrast level. |
| [memoize(f)](#std-memoize) | Memoizes the result of a function and returns a new function that caches the result. The cached result is returned if available, otherwise the original function is called and the result is cached for future invocations. |
| [mergeObjects(a, b)](#std-mergeobjects) | Merges two objects together. |
| [mixColors(a, b, t, space)](#std-mixcolors) | Blends two colors together in the specified color space. Converts both colors to the target space, linearly interpolates each channel (using shortest-path hue interpolation for polar spaces), and returns the result in the target space. |
| [nearEqual(a, b, tollerance)](#std-nearequal) | number numbers can sometime introduce tiny errors even for simple operations. `nearEqual` compares two floats using a tiny tollerance (last optional argument). By default it is defined as `EPSILON`. |
| [nearEqualAngles(a, b, turn, tollerance)](#std-nearequalangles) | number numbers can sometime introduce tiny errors even for simple operations. `nearEqualAngles` compares two angles (default is 360deg) using a tiny tollerance (last optional argument). By default the tollerance is defined as `EPSILON`. |
| [nearZero(n, tollerance)](#std-nearzero) | `nearZero` finds if the passed number is zero or very close to it. By default `EPSILON` is used as the tollerance value. |
| [negate(predicate)](#std-negate) | Creates a negated version of a predicate function. This function returns a new predicate that returns the opposite boolean result of the original predicate. |
| [normalizePath(path)](#std-normalizepath) | Normalizes a path by removing redundant segments. This function resolves '..' and '.' segments in paths, similar to path.normalize in Node.js but for web contexts. |
| [objectEntries(obj)](#std-objectentries) | Returns an array of entries (key-value pairs) from the given object with proper type inference. This function provides better type safety than `Object.entries()` by returning `[keyof T, T[keyof T]][]` instead of `[string, unknown][]`, preserving both key and value types for type-safe destructuring and iteration. |
| [objectFromEntries(entries)](#std-objectfromentries) | Creates an object from an array of entries with proper type inference. This function provides better type safety than `Object.fromEntries()` by accepting properly typed entries and returning a typed object instead of `{ [k: string]: unknown }`. |
| [objectKeys(obj)](#std-objectkeys) | Returns an array of keys from the given object with proper type inference. This function provides better type safety than `Object.keys()` by returning `Array<keyof T="">` instead of `string[]`, ensuring type correctness when working with the keys in TypeScript. </keyof> |
| [objectValues(obj)](#std-objectvalues) | Returns an array of values from the given object with proper type inference. This function provides better type safety than `Object.values()` by returning `Array<T[keyof T]="">` instead of `unknown[]`, preserving the union type of all possible values in the object. </T[keyof> |
| [oklaba(l, a, b, alpha)](#std-oklaba) | Creates an OKLAB color. |
| [oklabaToOklabString(c)](#std-oklabatooklabstring) | Serializes an OKLABA color to a CSS `oklab()` string. Produces `oklab(L a b)` when alpha is 1, or `oklab(L a b / alpha)` otherwise. Values are rounded to 5 decimal places. |
| [oklabaToRgb8a(c)](#std-oklabatorgb8a) | Converts an OKLABA color to an RGB8A color. |
| [oklcha(l, c, h, alpha)](#std-oklcha) | Creates an OKLCH color. |
| [oklchaToOklchString(c)](#std-oklchatooklchstring) | Serializes an OKLCHA color to a CSS `oklch()` string. Produces `oklch(L C H)` when alpha is 1, or `oklch(L C H / alpha)` otherwise. L and C are rounded to 5 decimal places, H to 2. |
| [oklchaToRgb8a(c)](#std-oklchatorgb8a) | Converts an OKLCHA color to an RGB8A color. |
| [omit(obj, keys)](#std-omit) | Creates a new object with all keys except the specified ones from the source object. This function provides type-safe property exclusion, ensuring that only valid keys can be omitted and the result type reflects the remaining properties. |
| [once(fn)](#std-once) | Ensures a function is called at most once. Subsequent calls return the result of the first call without executing the function again. |
| [opacify(c, amount)](#std-opacify) | Increases the opacity (alpha) of a color by the given amount. No color space conversion is performed — the alpha channel is adjusted directly. |
| [parseAlpha(s)](#std-parsealpha) | Parses an alpha value from a CSS string. Supports both decimal (`0.5`) and percentage (`50%`) forms. Returns 1 when the value is `undefined`. |
| [parseBoolean(v)](#std-parseboolean) | Returns `true`/`false` if the passed value can be parsed. The following values are considered parsable: - `'true'` / `'false'` - `'0'` / `'1'` - `'on'` / `'off'` |
| [parseColor(s)](#std-parsecolor) | Parses a CSS color string into a `Color` value, auto-detecting the format. Supports hex, `rgb()`, `hsl()`, `hsv()`, `hwb()`, `lab()`, `lch()`, `oklab()`, `oklch()`, and all 148 CSS named colors. Hex, `rgb()`, and named colors produce `RGB8A` values. |
| [parseHex(s)](#std-parsehex) | Parses a hex color string into an RGB8A color. Supports `#RGB`, `#RGBA`, `#RRGGBB`, and `#RRGGBBAA` formats. |
| [parseHsl(s)](#std-parsehsl) | Parses an `hsl()` or `hsla()` color string into an HSLA color. Supports both legacy comma-separated and modern space-separated syntax. |
| [parseHsv(s)](#std-parsehsv) | Parses an `hsv()` or `hsva()` color string into an HSVA color. Supports both legacy comma-separated and modern space-separated syntax. |
| [parseHwb(s)](#std-parsehwb) | Parses an `hwb()` CSS Level 4 color string into an HWBA color. Only the modern space-separated syntax is supported: `hwb(h w% b%)` or `hwb(h w% b% / alpha)`. |
| [parseJSON(value)](#std-parsejson) | Parses a JSON string into a JSON value. |
| [parseLab(s)](#std-parselab) | Parses a `lab()` color string into a LABA color. Supports `lab(L a b)` and `lab(L a b / alpha)` syntax. The lightness value can be a percentage (0–100%) or a plain number (0–100). The `a` and `b` axes accept any number, including negatives. |
| [parseLch(s)](#std-parselch) | Parses an `lch()` color string into a LCHA color. Supports `lch(L C H)` and `lch(L C H / alpha)` syntax. The lightness value can be a percentage (0–100%) or a plain number (0–100). Chroma must be non-negative, and hue is an angle in degrees. |
| [parseNamedColor(s)](#std-parsenamedcolor) | Parses a CSS named color string into an RGB8A color. |
| [parseOklab(s)](#std-parseoklab) | Parses an `oklab()` color string into an OKLABA color. L may be a percentage (0–100% mapped to 0–1) or a decimal (0–1). The `a` and `b` channels are decimals that may be negative. |
| [parseOklch(s)](#std-parseoklch) | Parses an `oklch()` color string into an OKLCHA color. L may be a percentage (0–100% mapped to 0–1) or a decimal (0–1). C is a non-negative decimal and H is an angle in degrees. |
| [parseRgb(s)](#std-parsergb) | Parses an `rgb()` or `rgba()` color string into an RGB8A color. Supports integer values (0–255), percentage values (0%–100%), both legacy comma-separated and modern space-separated syntax. |
| [parseUrl(url)](#std-parseurl) | Safely parses a URL string into a URL object. This function provides better error handling than the URL constructor by returning null for invalid URLs instead of throwing. |
| [partial(fn, prefixArgs)](#std-partial) | Creates a partially applied function. This function allows you to fix some arguments of a function, returning a new function that accepts the remaining arguments. |
| [partition(array, predicate)](#std-partition) | Partitions an array into two arrays based on a predicate. This function splits an array into two parts: elements that satisfy the predicate and elements that don't. The order of elements is preserved. |
| [pick(obj, keys)](#std-pick) | Creates a new object with only the specified keys from the source object. This function provides type-safe property selection, ensuring that only valid keys can be picked and the result type reflects the selected properties. |
| [pipe(value, f1)](#std-pipe) | Pipes a value through a series of functions from left to right. This function applies the given functions to a value in left-to-right order, passing the result of each function to the next. |
| [pipe(value, f1, f2)](#std-pipe1) |  |
| [pipe(value, f1, f2, f3)](#std-pipe2) |  |
| [pipe(value, f1, f2, f3, f4)](#std-pipe3) |  |
| [pipe(value, fns)](#std-pipe4) |  |
| [quote(s, quoteChar)](#std-quote) | Returns a quoted version of the input string. |
| [randomBytes(length)](#std-randombytes) | Generates random bytes as a Uint8Array. This function creates an array of random bytes, useful for cryptographic operations or when you need raw random data. |
| [randomChoice(array)](#std-randomchoice) | Selects a random element from an array. This function provides a convenient way to pick a random item from an array, handling the index calculation automatically. |
| [randomChoices(array, count)](#std-randomchoices) | Selects multiple random elements from an array without replacement. This function picks a specified number of unique elements from an array. The order of selected elements is randomized. |
| [randomColor(space)](#std-randomcolor) | Generates a random color in the specified color space with fully opaque alpha. Each channel is randomised within its natural range for the target space. Alpha is always set to 1. |
| [randomFloat(min, max, inclusive)](#std-randomfloat) | Generates a random floating-point number between min and max. This function provides a convenient way to generate random floats within a specific range, with optional exclusion of the maximum value. |
| [randomHex(length)](#std-randomhex) | Generates a random hexadecimal string of specified length. This function creates a random string using hexadecimal characters (0-9, a-f). Useful for generating tokens, IDs, or other random identifiers. |
| [randomInt(min, max)](#std-randomint) | Generates a random integer between min and max (inclusive). This function provides a more convenient API than manually scaling Math.random() and handles the common case of generating integers within a specific range. |
| [randomStringSequence(alphabet, length)](#std-randomstringsequence) | Returns a random sampling of the specified length from the seed string. |
| [randomStringSequenceBase64(length)](#std-randomstringsequencebase64) | Like `randomSequence`, but automatically uses the base64 sequence as the seed string. |
| [randomSubString(value, length)](#std-randomsubstring) | Returns a random substring from the `value` argument. The length of such value is by default `1`. |
| [randomUuid()](#std-randomuuid) | Generates a random UUID v4 string. This function creates a UUID (Universally Unique Identifier) using random numbers. While not cryptographically secure, it's suitable for most application needs. |
| [range(length, startAt)](#std-range) | Generates an array of consecutive numbers in a specified range. This function provides a more intuitive API than `Array.from({ length }, (_, i) => startAt + i)` for creating numeric sequences. It's commonly needed for iterations, indexing, and mathematical operations. |
| [rankArray(array, compare, incrementDuplicates)](#std-rankarray) | Assigns ranks to the elements in the array based on the provided compare function. The ranks are assigned in ascending order, with the lowest value receiving a rank of 0. If there are duplicate values, the rank of the duplicates can be incremented or not based on the `incrementDuplicates` parameter. |
| [reduce(iterable, reducer, initial)](#std-reduce) | Reduces an iterable to a single value using the reducer function. This function processes all elements in the iterable, accumulating a result using the reducer function and initial value. |
| [removeAllFromArray(arr, item)](#std-removeallfromarray) | Removes all occurrences of an item from an array. |
| [removeAllFromArrayByPredicate(arr, predicate)](#std-removeallfromarraybypredicate) | Removes all occurrences in an array that satisfy the given predicate. |
| [removeObjectFields(ob, fields)](#std-removeobjectfields) | Removes specified fields from an object and returns a new object without those fields. |
| [removeOneFromArray(arr, item)](#std-removeonefromarray) | Removes the first occurrence of an item from an array. |
| [removeOneFromArrayByPredicate(arr, predicate)](#std-removeonefromarraybypredicate) | Removes the first occurrence in an array that satisfy the given predicate. |
| [removeQueryParam(url, key)](#std-removequeryparam) | Removes a query parameter from a URL. This function removes a specific query parameter from a URL, preserving all other parameters and URL components. |
| [reverseString(s)](#std-reversestring) | Returns a new string whose characters are in reverse order. |
| [rgb8a(r, g, b, alpha)](#std-rgb8a) | Creates an 8-bit RGB8A color with channels in the 0–255 range. |
| [rgb8aToHexString(c)](#std-rgb8atohexstring) | Serializes an RGB8A color to a hex string. Produces `#rrggbb` when alpha is 1, or `#rrggbbaa` otherwise. |
| [rgb8aToHsla(c)](#std-rgb8atohsla) | Converts an RGB8A color to an HSLA color using the standard min/max/delta algorithm. |
| [rgb8aToHsva(c)](#std-rgb8atohsva) | Converts an RGB8A color to an HSVA color. Uses the standard RGB-to-HSV algorithm where Value is the maximum channel and Saturation is the ratio of chroma to Value. |
| [rgb8aToHwba(c)](#std-rgb8atohwba) | Converts an RGB8A color to an HWBA color. The conversion derives hue, whiteness, and blackness from the RGB channels. Whiteness is the minimum channel value and blackness is one minus the maximum channel value. |
| [rgb8aToLaba(c)](#std-rgb8atolaba) | Converts an RGB8A color to a LABA color through the CIE XYZ intermediate color space. |
| [rgb8aToLcha(c)](#std-rgb8atolcha) | Converts an RGB8A color to a LCHA color by converting to LABA first and then applying the polar (cylindrical) transformation. |
| [rgb8aToOklaba(c)](#std-rgb8atooklaba) | Converts an RGB8A color to an OKLABA color. |
| [rgb8aToOklcha(c)](#std-rgb8atooklcha) | Converts an RGB8A color to an OKLCHA color. |
| [rgb8aToRgba(c)](#std-rgb8atorgba) | Converts an RGB8A color (0–255) to an RGBA color (0–1). |
| [rgb8aToRgbString(c)](#std-rgb8atorgbstring) | Serializes an RGB8A color to an `rgb()` or `rgba()` CSS string. |
| [rgba(r, g, b, alpha)](#std-rgba) | Creates an RGBA color with channels in the 0–1 range. |
| [rgbaToRgb8a(c)](#std-rgbatorgb8a) | Converts an RGBA color (0–1) to an RGB8A color (0–255). |
| [rgbaToRgbString(c)](#std-rgbatorgbstring) | Serializes an RGBA color (0–1) to an `rgb()` CSS string using percentage values. |
| [root(base, index)](#std-root) | Computes the nth root (`index`) of `base`. |
| [roundTo(f, decimals)](#std-roundto) | Rounds a number to the specified number of decimals. |
| [rpad(s, char, length)](#std-rpad) | Pads a string on the right with a specified character until it reaches a specified length. If the string is already longer than the specified length, it is returned as is. |
| [sameObjectKeys(a, b)](#std-sameobjectkeys) | Checks if two objects have the same keys. |
| [saturate(c, amount)](#std-saturate) | Increases the chroma (saturation) of a color by the given amount. Operates in OKLCH space. The amount is scaled by 0.4 to map the 0–1 input range to the typical OKLCH chroma range. |
| [seedRandom(seed)](#std-seedrandom) | Creates a seeded random number generator. This function returns a deterministic random number generator that produces the same sequence of numbers for the same seed. Useful for testing or when reproducible randomness is needed. |
| [setDifference(setA, setB)](#std-setdifference) | Creates the difference between two Sets. The difference contains elements that are in the first Set but not in the second. This is equivalent to the mathematical difference operation (A - B). |
| [setFilter(set, predicate)](#std-setfilter) | Creates a new Set containing only elements that satisfy the predicate. This provides a functional approach to filtering Sets, similar to Array.prototype.filter but for Set objects. |
| [setFromArray(array)](#std-setfromarray) | Creates a Set from an array, removing duplicates. This provides a semantic way to deduplicate arrays using Sets. |
| [setIntersection(setA, setB)](#std-setintersection) | Creates the intersection of two Sets. The intersection contains only elements that appear in both Sets. This is equivalent to the mathematical intersection operation (A ∩ B). |
| [setIsEmpty(set)](#std-setisempty) | Checks if a Set is empty. This provides a semantic way to check for empty Sets, making code more readable than checking size === 0. |
| [setIsSubset(subset, superset)](#std-setissubset) | Checks if one Set is a subset of another. A Set is a subset if all of its elements are contained in the other Set. An empty Set is considered a subset of any Set. |
| [setIsSuperset(superset, subset)](#std-setissuperset) | Checks if one Set is a superset of another. A Set is a superset if it contains all elements of the other Set. This is the inverse of the subset relationship. |
| [setMap(set, mapper)](#std-setmap) | Creates a new Set with elements transformed by the mapper function. This provides a functional approach to transforming Set elements, similar to Array.prototype.map but for Set objects. |
| [setQueryParam(url, key, value)](#std-setqueryparam) | Sets a query parameter in a URL. This function adds or updates a single query parameter in a URL, preserving all other parameters and URL components. |
| [setSymmetricDifference(setA, setB)](#std-setsymmetricdifference) | Creates the symmetric difference between two Sets. The symmetric difference contains elements that are in either Set but not in both. This is equivalent to (A - B) ∪ (B - A) or (A ∪ B) - (A ∩ B). |
| [setToArray(set)](#std-settoarray) | Converts a Set to an array. This provides a convenient way to convert Sets to arrays for further processing with array methods. |
| [setUnion(sets)](#std-setunion) | Creates the union of multiple Sets. The union contains all unique elements that appear in any of the input Sets. This is equivalent to the mathematical union operation (A ∪ B ∪ C...). |
| [shuffle(array)](#std-shuffle) | Shuffles an array in place using the Fisher-Yates algorithm. This function randomly reorders the elements of an array, modifying the original array. Each permutation is equally likely. |
| [shuffled(array)](#std-shuffled) | Returns a shuffled copy of an array without modifying the original. This function creates a new array with the same elements as the input but in random order, leaving the original array unchanged. |
| [skip(iterable, count)](#std-skip) | Skips the first n elements and returns an iterable of the remaining elements. This function creates a new iterable that yields all elements after skipping the specified number of initial elements. |
| [sleep(ms, { abortSignal }, input)](#std-sleep) | Sleep for a given number of milliseconds. |
| [smartQuote(s, prefer)](#std-smartquote) | Converts a string in a quoted string. |
| [snapToGrid(value, gridSize)](#std-snaptogrid) | Snaps a value to the nearest multiple of `gridSize`. |
| [some(iterable, predicate)](#std-some) | Tests whether at least one element in an iterable satisfies the predicate. This function returns true if the predicate returns true for any element, or false if no elements satisfy the predicate. It short-circuits on the first true result. |
| [splitComplementary(c)](#std-splitcomplementary) | Returns a split-complementary color scheme consisting of the original color and two colors adjacent to its complement at 150 and 210 degree offsets. |
| [splitStringOnce(s, separator)](#std-splitstringonce) | It only splits on the first occurrance of separator. |
| [splitStringOnFirst(s, find)](#std-splitstringonfirst) | Splits a string into two parts based on the first occurrence of a specified substring. If the substring is found, returns an array with two elements: the part of the string before the substring and the part after the substring. If the substring is not found, returns an array with a single element: the original string. |
| [splitStringOnLast(s, find)](#std-splitstringonlast) | Splits a string into two parts at the last occurrence of a specified substring. If the substring is found, the function returns an array with two elements: the part of the string before the substring and the part after the substring. If the substring is not found, the function returns an array with a single element, which is the original string. |
| [startOfDay(date)](#std-startofday) | Returns a new Date representing the start of the day (00:00:00.000). This is useful for date comparisons and range queries where you need to normalize dates to the beginning of the day. |
| [startOfWeek(date)](#std-startofweek) | Returns a new Date representing the start of the week (Monday 00:00:00.000). This follows the ISO 8601 standard where Monday is the first day of the week. Useful for weekly reports and date grouping. |
| [strictEqual(a, b)](#std-strictequal) | Checks if two values are strictly equal. |
| [stringEndsWithAny(s, values)](#std-stringendswithany) | Returns `true` if `s` ends with any of the values in `values`. |
| [stringHasContent(value)](#std-stringhascontent) | Returns `true` if `value` is not `null` and contains at least one character. |
| [stringHashCode(value, seed)](#std-stringhashcode) | Calculates the hash code for a given string. |
| [stringsDifferAtIndex(a, b)](#std-stringsdifferatindex) | Compares strings `a` and `b` and returns the position where they differ. If the strings are equal, it returns `-1`. |
| [stringStartsWithAny(s, values)](#std-stringstartswithany) | Returns `true` if `s` starts with any of the values in `values`. |
| [stringToCharcodes(s)](#std-stringtocharcodes) | It transforms a string into an `Array` of char codes in integer format. |
| [substringAfter(value, searchFor)](#std-substringafter) | `substringAfter` searches for the first occurrance of `searchFor` and returns the text after that. If `searchFor` is not found, an empty string is returned. |
| [substringAfterLast(value, searchFor)](#std-substringafterlast) | `substringAfterLast` searches for the last occurrance of `searchFor` and returns the text after that. If `searchFor` is not found, an empty string is returned. |
| [substringBefore(value, searchFor)](#std-substringbefore) | `substringBefore` searches for the first occurrance of `searchFor` and returns the text before that. If `searchFor` is not found, an empty string is returned. |
| [substringBeforeLast(value, searchFor)](#std-substringbeforelast) | `substringBeforeLast` searches for the last occurrance of `searchFor` and returns the text before that. If `searchFor` is not found, an empty string is returned. |
| [surroundString(s, left, right)](#std-surroundstring) | Surrounds a string with the contents of `left` and `right`. If `right` is omitted, `left` will be used on both sides |
| [take(iterable, count)](#std-take) | Takes the first n elements from an iterable. This function creates a new array containing the first n elements from the iterable. It's useful for limiting results or sampling data. |
| [tetradic(c)](#std-tetradic) | Returns a tetradic (rectangular) color scheme consisting of the original color and three colors evenly spaced at 90 degree intervals. |
| [textContainsCaseInsensitive(s, test)](#std-textcontainscaseinsensitive) | `textContainsCaseInsensitive` returns `true` if `s` contains one or more occurrences of `test` regardless of the text case. |
| [textEndsWithAnyCaseInsensitive(s, values)](#std-textendswithanycaseinsensitive) | Compares a string `s` with many `values` and see if one of them matches its end ignoring their case. |
| [textEndsWithCaseInsensitive(s, end)](#std-textendswithcaseinsensitive) | Checks if a string ends with another string in a case-insensitive manner. |
| [textStartsWithAnyCaseInsensitive(s, values)](#std-textstartswithanycaseinsensitive) | Compares a string `s` with many `values` and see if one of them matches its beginning ignoring their case. |
| [textStartsWithCaseInsensitive(s, start)](#std-textstartswithcaseinsensitive) | Checks if a string starts with another string in a case-insensitive manner. |
| [textToLines(s)](#std-texttolines) | Returns an array of `string` split by line breaks. |
| [throttle(delay, callback, options)](#std-throttle) | Creates a throttled version of a function that limits how often the function can be called. |
| [toArray(iterable)](#std-toarray) | Converts an iterable to an array. This function creates a new array containing all elements from the iterable. It's equivalent to \[...iterable\] but more explicit in intent. |
| [toHex(num, length)](#std-tohex) | Converts a number to its hexadecimal representation. |
| [transparentize(c, amount)](#std-transparentize) | Decreases the opacity (alpha) of a color by the given amount. No color space conversion is performed — the alpha channel is adjusted directly. |
| [triadic(c)](#std-triadic) | Returns a triadic color scheme consisting of the original color and two colors evenly spaced at 120 degree intervals. |
| [trimChars(value, charlist)](#std-trimchars) | `trimChars` removes from the beginning and the end of the string any character that is present in `charlist`. |
| [trimCharsLeft(value, charlist)](#std-trimcharsleft) | `trimCharsLeft` removes from the beginning of the string any character that is present in `charlist`. |
| [trimCharsRight(value, charlist)](#std-trimcharsright) | `trimCharsRight` removes from the end of the string any character that is present in `charlist`. |
| [trimStringSlice(value, index, length)](#std-trimstringslice) | Removes a slice from `index` to `index + length` from `value`. |
| [underscore(s)](#std-underscore) | `underscore` finds UpperCase characters and turns them into LowerCase and prepends them with a whtiespace. Sequences of more than one UpperCase character are left untouched. |
| [uniqueByPrimitive(values, predicate)](#std-uniquebyprimitive) | Removes duplicate objects from an array based on a key extraction function. This function removes duplicates from arrays of objects by extracting a primitive key from each object and using that key to determine uniqueness. When duplicates are found, the first occurrence is kept. |
| [upperCaseFirst(value)](#std-uppercasefirst) | Convert first letter in `value` to upper case. |
| [widestAngleDifference(a, b, turn)](#std-widestangledifference) | Calculates the minimum difference between two angles in degrees. Note: Despite the name "widest", this function actually calculates the shortest angle difference, identical to `angleDifference`. The name is misleading for historical reasons. |
| [withAlpha(c, alpha)](#std-withalpha) | Creates a new color with the alpha channel set to the given value. This is a shortcut for `withColor(c, { alpha })`. |
| [withColor(c, changes)](#std-withcolor) | Creates a new color with one or more channels replaced, applying clamping and hue wrapping via the color's constructor. Returns the same color type as the input. |
| [wrap(v, min, max)](#std-wrap) | Passed two boundaries values (`min`, `max`), `wrap` ensures that the passed value `v` will be included in the boundaries. If the value exceeds `max`, the value is reduced by `min` repeatedely until it falls within the range. Similar and inverted treatment is performed if the value is below `min`. |
| [wrapCircular(v, max)](#std-wrapcircular) | Similar to `wrap`, it works for numbers between 0 and `max`. |
| [wrapColumns(s, columns, indent, newline)](#std-wrapcolumns) | `wrapColumns` splits a long string into lines that are at most `columns` long. Individual words whose length exceeds `columns` are not split. |
| [wrapLine(s, columns, indent, newline)](#std-wrapline) | Wraps a string into multiple lines based on the specified number of columns, indentation, and newline character. |
| [xorBoolean(a, b)](#std-xorboolean) | Returns `true` when arguments are different. |


## std: Interfaces


| Interface | Description |
| --- | --- |
| [CancelOptions](#std-canceloptions) | Options for cancelling a throttled function. |
| [HSLA](#std-hsla) | An HSLA color with `h` (0–360), `s` (0–1), `l` (0–1), and `alpha` (0–1). |
| [HSVA](#std-hsva) | An HSVA color with `h` (0–360), `s` (0–1), `v` (0–1), and `alpha` (0–1). |
| [HWBA](#std-hwba) | An HWBA color with `h` (0–360), `w` (0–1), `b` (0–1), and `alpha` (0–1). |
| [JSONObject](#std-jsonobject) | Represents a JSON object. |
| [LABA](#std-laba) | A CIE LAB color with `l` (0–1), `a` (\~-125 to 125), `b` (\~-125 to 125), and `alpha` (0–1). |
| [LCHA](#std-lcha) | A CIE LCH color with `l` (0–1), `c` (0–150+), `h` (0–360), and `alpha` (0–1). |
| [OKLABA](#std-oklaba) | An OKLAB color with `l` (0–1), `a` (\~-0.4 to 0.4), `b` (\~-0.4 to 0.4), and `alpha` (0–1). |
| [OKLCHA](#std-oklcha) | An OKLCH color with `l` (0–1), `c` (0–0.4+), `h` (0–360), and `alpha` (0–1). |
| [RGB8A](#std-rgb8a) | An 8-bit RGBA color with channels `r` (0–255), `g` (0–255), `b` (0–255), and `alpha` (0–1). This is the format used by CSS `rgb()` and hex notation. |
| [RGBA](#std-rgba) | An RGBA color with channels `r` (0–1), `g` (0–1), `b` (0–1), and `alpha` (0–1). |
| [ThrottledFunction](#std-throttledfunction) | Represents a throttled function with a cancel method. |
| [ThrottleOptions](#std-throttleoptions) | Configuration options for throttle function. |


## std: Variables


| Variable | Description |
| --- | --- |
| [AsyncResult](#std-asyncresult) | A set of utility functions for working with `AsyncResult`. |
| [EPSILON](#std-epsilon) | Constant value employed to see if two `number` values are very close. |
| [NAMED\_COLORS](#std-namedcolors) | CSS named colors map. Contains all 148 CSS named colors as lowercase keys mapped to `[r, g, b]` tuples. |
| [Result](#std-result) | Utility functions for working with `Result` types. |
| [Validation](#std-validation) | Utility functions for working with `Validation` types. |


## std: Type Aliases


| Type Alias | Description |
| --- | --- |
| [ArgsAfter](#std-argsafter) |  |
| [ArgsSubset](#std-argssubset) |  |
| [ArrayDiffOperations](#std-arraydiffoperations) | Represents the different operations that can be performed on an array. |
| [AsyncFailure](#std-asyncfailure) | Represents a failure result. |
| [AsyncResult](#std-asyncresult) | Represents the result of an asynchronous operation that can be in one of the following states: - `NotAsked`: The operation has not been requested yet. - `Loading`: The operation is currently in progress. - `Success`: The operation has completed successfully and contains a value of type `V`. - `Failure`: The operation has completed with an error and contains an error of type `E`. |
| [AsyncSuccess](#std-asyncsuccess) | Represents a successful result. |
| [ChannelOf](#std-channelof) | Extracts the channel names of a color type, excluding the `space` discriminant. |
| [Color](#std-color) | A color value in any of the supported color spaces. |
| [ColorSpace](#std-colorspace) | String literal union of all supported color spaces. |
| [Compare](#std-compare) | Represents a function that compares two values of type T and returns a number. The returned number indicates the relative order of the two values: - A negative number if `a` is less than `b`. - Zero if `a` is equal to `b`. - A positive number if `a` is greater than `b`. |
| [ContrastLevel](#std-contrastlevel) | WCAG contrast level thresholds. - `'AA'` — 4.5:1 for normal text - `'AAA'` — 7:1 for normal text - `'AA-large'` — 3:1 for large text - `'AAA-large'` — 4.5:1 for large text |
| [DebounceOptions](#std-debounceoptions) | Options for debouncing a function. |
| [Drop](#std-drop) |  |
| [Failure](#std-failure) | Represents a failure result. |
| [FilterTuple](#std-filtertuple) | Filters out elements from a tuple that are equal to the specified type. |
| [FirstArgument](#std-firstargument) | Extracts the first argument type from a function type. |
| [Fun0](#std-fun0) | Represents a function that takes no arguments and returns a value of type `R`. |
| [Fun1](#std-fun1) | Represents a function that takes one argument of type `A` and returns a value of type `R`. |
| [Fun2](#std-fun2) | Represents a function that takes two arguments of types `A` and `B`, and returns a value of type `R`. |
| [Fun3](#std-fun3) | Represents a function that takes three arguments of types A, B, and C, and returns a value of type R. |
| [Fun4](#std-fun4) | Represents a function that takes four arguments of types A, B, C, and D, and returns a value of type R. |
| [Fun5](#std-fun5) | Represents a function that takes five arguments of types A, B, C, D, and E, and returns a value of type R. |
| [Fun6](#std-fun6) | Represents a function that takes six arguments of types A, B, C, D, E, F and returns a value of type R. |
| [Id](#std-id) | Represents an identity type that preserves the properties of the original type. |
| [IndexKey](#std-indexkey) | Represents a key type that can be used to index any object. |
| [Invalid](#std-invalid) | Represents an invalid value with an associated error. |
| [IsUnion](#std-isunion) |  |
| [JSONArray](#std-jsonarray) | Represents an array of JSON values. |
| [JSONPrimitive](#std-jsonprimitive) | Represents a JSON primitive value. It can be a string, boolean, number, or Nothing (null or undefined). |
| [JSONValue](#std-jsonvalue) | Represents a JSON value, which can be a primitive, an object, or an array. |
| [Loading](#std-loading) | Represents a loading state in an asynchronous result. |
| [Maybe](#std-maybe) | Represents a type that can either hold a value of type T or be undefined. |
| [Merge](#std-merge) | Represents the type resulting from merging two types `A` and `B`. The resulting type is the intersection of `A` and `B`. |
| [NonLoading](#std-nonloading) | Represents a state in an asynchronous result that is not loading. |
| [NotAsked](#std-notasked) | Represents the state when a result has not been requested yet. |
| [Nothing](#std-nothing) | Represents a value that can be either `undefined` or `null`. |
| [PartialBy](#std-partialby) | Creates a new type by making the specified key `K` of `T` optional. |
| [Primitive](#std-primitive) | Represents a primitive value that can be of type string, boolean, number, null, or undefined. |
| [PromiseResult](#std-promiseresult) | Represents a promise that resolves to a `Result` type. |
| [PromiseValidation](#std-promisevalidation) | Represents a promise that resolves to a `Validation` object. |
| [RequiredBy](#std-requiredby) | Creates a new type by making the specified key `K` of `T` required. |
| [Result](#std-result) | Represents a result that can either be a success or a failure. |
| [Reverse](#std-reverse) |  |
| [Settled](#std-settled) | Represents a settled state in an asynchronous result. |
| [SplitLiteral](#std-splitliteral) | Splits a string literal type `T` by a specified delimiter `SplitBy`. Returns a tuple containing the split parts of the string. |
| [SplitLiteralToUnion](#std-splitliteraltounion) | Converts a string literal type `T` into a union type by splitting it using the specified delimiter `SplitBy`. |
| [Success](#std-success) | Represents a successful result. |
| [TupleToUnion](#std-tupletounion) | Converts a tuple type to a union type. |
| [Valid](#std-valid) | Represents a valid result. |
| [Validation](#std-validation) | Represents a type that can either be `Valid` or `Invalid`. |

---

## std.meetscontrast: meetsContrast() function

Checks whether two colors meet a WCAG contrast level.

**Signature:**```typescript
meetsContrast: (a: Color, b: Color, level: ContrastLevel) => boolean
```## std.meetscontrast: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | [Color](#std-color) | The first color |
| b | [Color](#std-color) | The second color |
| level | [ContrastLevel](#std-contrastlevel) | The WCAG level to test against |


**Returns:**

boolean

`true` if the contrast ratio meets or exceeds the threshold for the given level

## std.meetscontrast: Example```ts
meetsContrast(
  rgb8a(0, 0, 0),
  rgb8a(255, 255, 255),
  'AAA'
) // true
```

---

## std.memoize: memoize() function

Memoizes the result of a function and returns a new function that caches the result. The cached result is returned if available, otherwise the original function is called and the result is cached for future invocations.

**Signature:**```typescript
memoize: <T>(f: () => NonNullable<T>) => (() => NonNullable<T>)
```## std.memoize: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| f | () =&gt; NonNullable&lt;T&gt; | The function to memoize. |


**Returns:**

(() =&gt; NonNullable&lt;T&gt;)

A new function that caches the result of the original function.

---

## std.merge: Merge type

Represents the type resulting from merging two types `A` and `B`. The resulting type is the intersection of `A` and `B`.

**Signature:**```typescript
export type Merge<A, B> = Id<A & B>;
```
**References:** [Id](#std-id)

---

## std.mergeobjects: mergeObjects() function

Merges two objects together.

**Signature:**```typescript
mergeObjects: <A extends Record<IndexKey, unknown>, B extends Record<IndexKey, unknown>>(a: A, b: B) => Merge<A, B>
```## std.mergeobjects: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | A | The first object to merge. |
| b | B | The second object to merge. |


**Returns:**

[Merge](#std-merge)&lt;A, B&gt;

The merged object.

---

## std.mixcolors: mixColors() function

Blends two colors together in the specified color space.

Converts both colors to the target space, linearly interpolates each channel (using shortest-path hue interpolation for polar spaces), and returns the result in the target space.

**Signature:**```typescript
mixColors: (a: Color, b: Color, t?: number, space?: ColorSpace) => Color
```## std.mixcolors: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | [Color](#std-color) | The first color. |
| b | [Color](#std-color) | The second color. |
| t | number | _(Optional)_ The blend factor (0 = fully `a`, 1 = fully `b`). Defaults to 0.5. |
| space | [ColorSpace](#std-colorspace) | _(Optional)_ The color space to blend in. Defaults to `'oklch'`. |


**Returns:**

[Color](#std-color)

The blended color in the specified space.

## std.mixcolors: Example```ts
import { rgb8a } from './color'
mixColors(rgb8a(255, 0, 0), rgb8a(0, 0, 255))
// blended in oklch at t=0.5
mixColors(rgb8a(255, 0, 0), rgb8a(0, 0, 255), 0.25, 'lab')
// 25% blend in LAB space
```

---

## std.named_colors: NAMED\_COLORS variable

CSS named colors map.

Contains all 148 CSS named colors as lowercase keys mapped to `[r, g, b]` tuples.

**Signature:**```typescript
NAMED_COLORS: Record<string, readonly [number, number, number]>
```

---

## std.nearequal: nearEqual() function

number numbers can sometime introduce tiny errors even for simple operations. `nearEqual` compares two floats using a tiny tollerance (last optional argument). By default it is defined as `EPSILON`.

**Signature:**```typescript
nearEqual: (a: number, b: number, tollerance?: number) => boolean
```## std.nearequal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | number | The first number to compare. |
| b | number | The second number to compare. |
| tollerance | number | _(Optional)_ The tollerance value. Default is `EPSILON`. |


**Returns:**

boolean

`true` if the numbers are very close, `false` otherwise.

## std.nearequal: Example```ts
nearEqual(5, 5.000000000000001) // returns true
nearEqual(5, 5.000000000001) // returns false
nearEqual(5, 5.000000000001, 1e-9) // returns true
```

---

## std.nearequalangles: nearEqualAngles() function

number numbers can sometime introduce tiny errors even for simple operations. `nearEqualAngles` compares two angles (default is 360deg) using a tiny tollerance (last optional argument). By default the tollerance is defined as `EPSILON`.

**Signature:**```typescript
nearEqualAngles: (a: number, b: number, turn?: number, tollerance?: number) => boolean
```## std.nearequalangles: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | number | The first angle in degrees. |
| b | number | The second angle in degrees. |
| turn | number | _(Optional)_ The total number of degrees in a full turn. Default is 360.0. |
| tollerance | number | _(Optional)_ The tollerance value. Default is `EPSILON`. |


**Returns:**

boolean

`true` if the angles are very close, `false` otherwise.

## std.nearequalangles: Example```ts
nearEqualAngles(0, 360) // returns true
nearEqualAngles(0, 361) // returns false
nearEqualAngles(0, 360.000000000001) // returns true
nearEqualAngles(0, 361, 360, 1) // returns true
```

---

## std.nearzero: nearZero() function

`nearZero` finds if the passed number is zero or very close to it. By default `EPSILON` is used as the tollerance value.

**Signature:**```typescript
nearZero: (n: number, tollerance?: number) => boolean
```## std.nearzero: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| n | number | The number to check. |
| tollerance | number | _(Optional)_ The tollerance value. Default is `EPSILON`. |


**Returns:**

boolean

`true` if the number is zero or very close to it, `false` otherwise.

## std.nearzero: Example```ts
nearZero(0.000000000000001) // returns true
nearZero(0.000000001) // returns false
nearZero(0.000000001, 1e-9) // returns true
```

---

## std.negate: negate() function

Creates a negated version of a predicate function.

This function returns a new predicate that returns the opposite boolean result of the original predicate.

**Signature:**```typescript
negate: <Args extends readonly unknown[]>(predicate: (...args: Args) => boolean) => ((...args: Args) => boolean)
```## std.negate: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| predicate | (...args: Args) =&gt; boolean | The predicate function to negate |


**Returns:**

((...args: Args) =&gt; boolean)

A new predicate that returns the opposite result

## std.negate: Example```typescript
const isEven = (n: number) => n % 2 === 0
const isOdd = negate(isEven)

isEven(4) // true
isOdd(4) // false
isOdd(3) // true
```

---

## std.nonloading: NonLoading type

Represents a state in an asynchronous result that is not loading.

**Signature:**```typescript
export type NonLoading<V, E> = NotAsked | Settled<V, E>;
```
**References:** [NotAsked](#std-notasked), [Settled](#std-settled)

---

## std.normalizepath: normalizePath() function

Normalizes a path by removing redundant segments.

This function resolves '..' and '.' segments in paths, similar to path.normalize in Node.js but for web contexts.

**Signature:**```typescript
normalizePath: (path: string) => string
```## std.normalizepath: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| path | string | The path to normalize |


**Returns:**

string

The normalized path

## std.normalizepath: Example```typescript
const path = normalizePath('/api/../users/./123/../456')
// Result: '/users/456'

const relative = normalizePath('../../parent/child')
// Result: '../../parent/child'
```

---

## std.notasked: NotAsked type

Represents the state when a result has not been requested yet.

**Signature:**```typescript
export type NotAsked = {
    readonly type: 'NotAsked';
};
```

---

## std.nothing: Nothing type

Represents a value that can be either `undefined` or `null`.

**Signature:**```typescript
export type Nothing = undefined | null;
```

---

## std.objectentries: objectEntries() function

Returns an array of entries (key-value pairs) from the given object with proper type inference.

This function provides better type safety than `Object.entries()` by returning `[keyof T, T[keyof T]][]` instead of `[string, unknown][]`, preserving both key and value types for type-safe destructuring and iteration.

**Signature:**```typescript
objectEntries: <T extends object>(obj: T) => [keyof T, T[keyof T]][]
```## std.objectentries: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| obj | T | The object from which to extract entries. |


**Returns:**

\[keyof T, T\[keyof T\]\]\[\]

An array of tuples with proper typing, where each tuple contains a key and its corresponding value.

## std.objectentries: Example```typescript
const user = { id: 1, name: 'Alice', active: true }
const entries = objectEntries(user)
// Type: Array<['id' | 'name' | 'active', number | string | boolean]>
// Result: [['id', 1], ['name', 'Alice'], ['active', true]]

// Type-safe destructuring
entries.forEach(([key, value]) => {
  // TypeScript knows key is 'id' | 'name' | 'active'
  // TypeScript knows value is number | string | boolean
  console.log(`${key}: ${value}`)
})
```

---

## std.objectfromentries: objectFromEntries() function

Creates an object from an array of entries with proper type inference.

This function provides better type safety than `Object.fromEntries()` by accepting properly typed entries and returning a typed object instead of `{ [k: string]: unknown }`.

**Signature:**```typescript
objectFromEntries: <T extends object>(entries: [keyof T, T[keyof T]][]) => T
```## std.objectfromentries: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| entries | \[keyof T, T\[keyof T\]\]\[\] | The array of entries to create an object from. |


**Returns:**

T

The created object with proper typing.

## std.objectfromentries: Example```typescript
const entries: [string, number][] = [['a', 1], ['b', 2], ['c', 3]]
const obj = objectFromEntries(entries)
// Type: { [x: string]: number }
// Result: { a: 1, b: 2, c: 3 }

// Works with union types
const mixedEntries: Array<['id' | 'name', number | string]> = [
  ['id', 123],
  ['name', 'Alice']
]
const user = objectFromEntries(mixedEntries)
// Type: { [x: string]: number | string }
```

---

## std.objectkeys: objectKeys() function

Returns an array of keys from the given object with proper type inference.

This function provides better type safety than `Object.keys()` by returning `Array<keyof T="">` instead of `string[]`, ensuring type correctness when working with the keys in TypeScript.

**Signature:**

</keyof>```typescript
objectKeys: <T extends object>(obj: T) => Array<keyof T>
```## std.objectkeys: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| obj | T | The object from which to extract keys. |


**Returns:**

Array&lt;keyof T&gt;

An array of keys from the object with proper typing.

## std.objectkeys: Example```typescript
const user = { id: 1, name: 'Alice', active: true }
const keys = objectKeys(user)
// Type: Array<'id' | 'name' | 'active'>
// Result: ['id', 'name', 'active']

// Type-safe iteration
keys.forEach(key => {
  console.log(user[key]) // TypeScript knows this is valid
})
```

---

## std.objectvalues: objectValues() function

Returns an array of values from the given object with proper type inference.

This function provides better type safety than `Object.values()` by returning `Array<T[keyof T]="">` instead of `unknown[]`, preserving the union type of all possible values in the object.

**Signature:**

</T[keyof>```typescript
objectValues: <T extends object>(obj: T) => Array<T[keyof T]>
```## std.objectvalues: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| obj | T | The object from which to extract values. |


**Returns:**

Array&lt;T\[keyof T\]&gt;

An array of values from the object with proper typing.

## std.objectvalues: Example```typescript
const user = { id: 1, name: 'Alice', active: true }
const values = objectValues(user)
// Type: Array<number | string | boolean>
// Result: [1, 'Alice', true]

// Type-safe processing
values.forEach(value => {
  // TypeScript knows value can be number | string | boolean
  if (typeof value === 'string') {
    console.log(value.toUpperCase())
  }
})
```

---

## std.oklaba.a: OKLABA.a property

**Signature:**```typescript
readonly a: number;
```

---

## std.oklaba.alpha: OKLABA.alpha property

**Signature:**```typescript
readonly alpha: number;
```

---

## std.oklaba.b: OKLABA.b property

**Signature:**```typescript
readonly b: number;
```

---

## std.oklaba.l: OKLABA.l property

**Signature:**```typescript
readonly l: number;
```

---

## std.oklaba: OKLABA interface

An OKLAB color with `l` (0–1), `a` (\~-0.4 to 0.4), `b` (\~-0.4 to 0.4), and `alpha` (0–1).

**Signature:**```typescript
export interface OKLABA 
```## std.oklaba: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [a](#std-oklaba-a) | `readonly` | number |  |
| [alpha](#std-oklaba-alpha) | `readonly` | number |  |
| [b](#std-oklaba-b) | `readonly` | number |  |
| [l](#std-oklaba-l) | `readonly` | number |  |
| [space](#std-oklaba-space) | `readonly` | 'oklab' |  |

---

## std.oklaba.space: OKLABA.space property

**Signature:**```typescript
readonly space: 'oklab';
```

---

## std.oklabatooklabstring: oklabaToOklabString() function

Serializes an OKLABA color to a CSS `oklab()` string.

Produces `oklab(L a b)` when alpha is 1, or `oklab(L a b / alpha)` otherwise. Values are rounded to 5 decimal places.

**Signature:**```typescript
oklabaToOklabString: (c: OKLABA) => string
```## std.oklabatooklabstring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [OKLABA](#std-oklaba) | The OKLABA color to serialize. |


**Returns:**

string

A CSS `oklab()` color string.

## std.oklabatooklabstring: Example```ts
oklabaToOklabString(oklaba(0.5, -0.1, 0.1)) // 'oklab(0.5 -0.1 0.1)'
oklabaToOklabString(oklaba(0.5, -0.1, 0.1, 0.8)) // 'oklab(0.5 -0.1 0.1 / 0.8)'
```

---

## std.oklabatorgb8a: oklabaToRgb8a() function

Converts an OKLABA color to an RGB8A color.

**Signature:**```typescript
oklabaToRgb8a: (c: OKLABA) => RGB8A
```## std.oklabatorgb8a: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [OKLABA](#std-oklaba) | The OKLABA color to convert. |


**Returns:**

[RGB8A](#std-rgb8a)

The equivalent RGB8A color with channels clamped to 0–255.

## std.oklabatorgb8a: Example```ts
oklabaToRgb8a(oklaba(0.628, 0.225, 0.126)) // rgb8a(~255, ~0, ~0)
```

---

## std.oklcha.alpha: OKLCHA.alpha property

**Signature:**```typescript
readonly alpha: number;
```

---

## std.oklcha.c: OKLCHA.c property

**Signature:**```typescript
readonly c: number;
```

---

## std.oklcha.h: OKLCHA.h property

**Signature:**```typescript
readonly h: number;
```

---

## std.oklcha.l: OKLCHA.l property

**Signature:**```typescript
readonly l: number;
```

---

## std.oklcha: OKLCHA interface

An OKLCH color with `l` (0–1), `c` (0–0.4+), `h` (0–360), and `alpha` (0–1).

**Signature:**```typescript
export interface OKLCHA 
```## std.oklcha: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [alpha](#std-oklcha-alpha) | `readonly` | number |  |
| [c](#std-oklcha-c) | `readonly` | number |  |
| [h](#std-oklcha-h) | `readonly` | number |  |
| [l](#std-oklcha-l) | `readonly` | number |  |
| [space](#std-oklcha-space) | `readonly` | 'oklch' |  |

---

## std.oklcha.space: OKLCHA.space property

**Signature:**```typescript
readonly space: 'oklch';
```

---

## std.oklchatooklchstring: oklchaToOklchString() function

Serializes an OKLCHA color to a CSS `oklch()` string.

Produces `oklch(L C H)` when alpha is 1, or `oklch(L C H / alpha)` otherwise. L and C are rounded to 5 decimal places, H to 2.

**Signature:**```typescript
oklchaToOklchString: (c: OKLCHA) => string
```## std.oklchatooklchstring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [OKLCHA](#std-oklcha) | The OKLCHA color to serialize. |


**Returns:**

string

A CSS `oklch()` color string.

## std.oklchatooklchstring: Example```ts
oklchaToOklchString(oklcha(0.5, 0.15, 326)) // 'oklch(0.5 0.15 326)'
oklchaToOklchString(oklcha(0.5, 0.15, 326, 0.8)) // 'oklch(0.5 0.15 326 / 0.8)'
```

---

## std.oklchatorgb8a: oklchaToRgb8a() function

Converts an OKLCHA color to an RGB8A color.

**Signature:**```typescript
oklchaToRgb8a: (c: OKLCHA) => RGB8A
```## std.oklchatorgb8a: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [OKLCHA](#std-oklcha) | The OKLCHA color to convert. |


**Returns:**

[RGB8A](#std-rgb8a)

The equivalent RGB8A color with channels clamped to 0–255.

## std.oklchatorgb8a: Example```ts
oklchaToRgb8a(oklcha(0.628, 0.258, 29.2)) // rgb8a(~255, ~0, ~0)
```

---

## std.omit: omit() function

Creates a new object with all keys except the specified ones from the source object.

This function provides type-safe property exclusion, ensuring that only valid keys can be omitted and the result type reflects the remaining properties.

**Signature:**```typescript
omit: <T extends object, K extends keyof T>(obj: T, keys: readonly K[]) => Omit<T, K>
```## std.omit: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| obj | T | The source object |
| keys | readonly K\[\] | Array of keys to omit |


**Returns:**

Omit&lt;T, K&gt;

A new object without the specified keys

## std.omit: Example```typescript
const user = { id: 1, name: 'Alice', email: 'alice@example.com', password: 'secret' }
const publicUser = omit(user, ['password'])
// Result: { id: 1, name: 'Alice', email: 'alice@example.com' }
// Type: Omit<typeof user, 'password'>
```

---

## std.once: once() function

Ensures a function is called at most once.

Subsequent calls return the result of the first call without executing the function again.

**Signature:**```typescript
once: <Args extends readonly unknown[], Return>(fn: (...args: Args) => Return) => ((...args: Args) => Return)
```## std.once: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (...args: Args) =&gt; Return | The function to wrap |


**Returns:**

((...args: Args) =&gt; Return)

A new function that can only be called once

## std.once: Example```typescript
let counter = 0
const increment = once(() => ++counter)

increment() // 1
increment() // 1 (same result, function not called again)
increment() // 1
```

---

## std.opacify: opacify() function

Increases the opacity (alpha) of a color by the given amount.

No color space conversion is performed — the alpha channel is adjusted directly.

**Signature:**```typescript
opacify: (c: Color, amount: number) => Color
```## std.opacify: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to make more opaque. |
| amount | number | A value between 0 and 1 indicating how much to increase alpha. |


**Returns:**

[Color](#std-color)

The color with increased opacity, in the same color space.

## std.opacify: Example```ts
const opaque = opacify(rgb8a(100, 50, 50, 0.5), 0.3)
// alpha is now 0.8
```

---

## std.parsealpha: parseAlpha() function

Parses an alpha value from a CSS string. Supports both decimal (`0.5`) and percentage (`50%`) forms. Returns 1 when the value is `undefined`.

**Signature:**```typescript
parseAlpha: (s: string | undefined) => number
```## std.parsealpha: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string \\| undefined | The alpha string to parse. |


**Returns:**

number

A number between 0 and 1.

---

## std.parseboolean: parseBoolean() function

Returns `true`/`false` if the passed value can be parsed. The following values are considered parsable:

- `'true'` / `'false'` - `'0'` / `'1'` - `'on'` / `'off'`

**Signature:**```typescript
parseBoolean: (v: string) => boolean
```## std.parseboolean: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| v | string | The value to parse. |


**Returns:**

boolean

The parsed boolean value.

---

## std.parsecolor: parseColor() function

Parses a CSS color string into a `Color` value, auto-detecting the format.

Supports hex, `rgb()`, `hsl()`, `hsv()`, `hwb()`, `lab()`, `lch()`, `oklab()`, `oklch()`, and all 148 CSS named colors. Hex, `rgb()`, and named colors produce `RGB8A` values.

**Signature:**```typescript
parseColor: (s: string) => Color
```## std.parsecolor: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to parse. |


**Returns:**

[Color](#std-color)

A `Color` value.

## std.parsecolor: Exceptions

ParsingError if the format is not recognized.

## std.parsecolor: Example```ts
parseColor('#ff0000') // RGB8A
parseColor('hsl(0, 100%, 50%)') // HSLA
parseColor('red') // RGB8A
```

---

## std.parsehex: parseHex() function

Parses a hex color string into an RGB8A color.

Supports `#RGB`, `#RGBA`, `#RRGGBB`, and `#RRGGBBAA` formats.

**Signature:**```typescript
parseHex: (s: string) => RGB8A
```## std.parsehex: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The hex string to parse. |


**Returns:**

[RGB8A](#std-rgb8a)

An RGB8A color.

## std.parsehex: Exceptions

ParsingError if the string is not a valid hex color.

## std.parsehex: Example```ts
parseHex('#ff0000') // rgb8a(255, 0, 0)
parseHex('#f00') // rgb8a(255, 0, 0)
parseHex('#ff000080') // rgb8a(255, 0, 0, ~0.502)
```

---

## std.parsehsl: parseHsl() function

Parses an `hsl()` or `hsla()` color string into an HSLA color.

Supports both legacy comma-separated and modern space-separated syntax.

**Signature:**```typescript
parseHsl: (s: string) => HSLA
```## std.parsehsl: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to parse. |


**Returns:**

[HSLA](#std-hsla)

An HSLA color.

## std.parsehsl: Exceptions

ParsingError if the string is not a valid HSL color.

## std.parsehsl: Example```ts
parseHsl('hsl(0, 100%, 50%)') // hsla(0, 1, 0.5)
parseHsl('hsla(120, 50%, 75%, 0.8)') // hsla(120, 0.5, 0.75, 0.8)
parseHsl('hsl(240 100% 50% / 50%)') // hsla(240, 1, 0.5, 0.5)
```

---

## std.parsehsv: parseHsv() function

Parses an `hsv()` or `hsva()` color string into an HSVA color.

Supports both legacy comma-separated and modern space-separated syntax.

**Signature:**```typescript
parseHsv: (s: string) => HSVA
```## std.parsehsv: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to parse. |


**Returns:**

[HSVA](#std-hsva)

An HSVA color.

## std.parsehsv: Exceptions

ParsingError if the string is not a valid HSV color.

## std.parsehsv: Example```ts
parseHsv('hsv(0, 100%, 100%)') // hsva(0, 1, 1)
parseHsv('hsva(120, 50%, 80%, 0.5)') // hsva(120, 0.5, 0.8, 0.5)
parseHsv('hsv(240 25% 90% / 50%)') // hsva(240, 0.25, 0.9, 0.5)
```

---

## std.parsehwb: parseHwb() function

Parses an `hwb()` CSS Level 4 color string into an HWBA color.

Only the modern space-separated syntax is supported: `hwb(h w% b%)` or `hwb(h w% b% / alpha)`.

**Signature:**```typescript
parseHwb: (s: string) => HWBA
```## std.parsehwb: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to parse. |


**Returns:**

[HWBA](#std-hwba)

An HWBA color.

## std.parsehwb: Exceptions

ParsingError if the string is not a valid HWB color.

## std.parsehwb: Example```ts
parseHwb('hwb(0 0% 0%)') // hwba(0, 0, 0)
parseHwb('hwb(180 20% 30%)') // hwba(180, 0.2, 0.3)
parseHwb('hwb(90 10% 20% / 0.5)') // hwba(90, 0.1, 0.2, 0.5)
```

---

## std.parsejson: parseJSON() function

Parses a JSON string into a JSON value.

**Signature:**```typescript
parseJSON: (value: string) => Result<JSONValue, Error>
```## std.parsejson: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The JSON string to parse. |


**Returns:**

[Result](#std-result)&lt;[JSONValue](#std-jsonvalue), Error&gt;

A result containing the parsed JSON value or an error if parsing fails.

---

## std.parselab: parseLab() function

Parses a `lab()` color string into a LABA color.

Supports `lab(L a b)` and `lab(L a b / alpha)` syntax. The lightness value can be a percentage (0–100%) or a plain number (0–100). The `a` and `b` axes accept any number, including negatives.

**Signature:**```typescript
parseLab: (s: string) => LABA
```## std.parselab: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to parse. |


**Returns:**

[LABA](#std-laba)

A LABA color.

## std.parselab: Exceptions

ParsingError if the string is not a valid LAB color.

## std.parselab: Example```ts
parseLab('lab(50 -20 30)') // laba(0.5, -20, 30)
parseLab('lab(50% -20 30 / 0.5)') // laba(0.5, -20, 30, 0.5)
```

---

## std.parselch: parseLch() function

Parses an `lch()` color string into a LCHA color.

Supports `lch(L C H)` and `lch(L C H / alpha)` syntax. The lightness value can be a percentage (0–100%) or a plain number (0–100). Chroma must be non-negative, and hue is an angle in degrees.

**Signature:**```typescript
parseLch: (s: string) => LCHA
```## std.parselch: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to parse. |


**Returns:**

[LCHA](#std-lcha)

A LCHA color.

## std.parselch: Exceptions

ParsingError if the string is not a valid LCH color.

## std.parselch: Example```ts
parseLch('lch(50 36 326)') // lcha(0.5, 36, 326)
parseLch('lch(75% 40 120 / 50%)') // lcha(0.75, 40, 120, 0.5)
```

---

## std.parsenamedcolor: parseNamedColor() function

Parses a CSS named color string into an RGB8A color.

**Signature:**```typescript
parseNamedColor: (s: string) => RGB8A
```## std.parsenamedcolor: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The named color string (case-insensitive). |


**Returns:**

[RGB8A](#std-rgb8a)

An RGB8A color.

## std.parsenamedcolor: Exceptions

ParsingError if the string is not a recognized named color.

## std.parsenamedcolor: Example```ts
parseNamedColor('red') // rgb8a(255, 0, 0)
parseNamedColor('cornflowerblue') // rgb8a(100, 149, 237)
```

---

## std.parseoklab: parseOklab() function

Parses an `oklab()` color string into an OKLABA color.

L may be a percentage (0–100% mapped to 0–1) or a decimal (0–1). The `a` and `b` channels are decimals that may be negative.

**Signature:**```typescript
parseOklab: (s: string) => OKLABA
```## std.parseoklab: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to parse. |


**Returns:**

[OKLABA](#std-oklaba)

An OKLABA color.

## std.parseoklab: Exceptions

ParsingError if the string is not a valid OKLAB color.

## std.parseoklab: Example```ts
parseOklab('oklab(0.5 -0.1 0.1)') // oklaba(0.5, -0.1, 0.1)
parseOklab('oklab(50% -0.1 0.1 / 0.8)') // oklaba(0.5, -0.1, 0.1, 0.8)
```

---

## std.parseoklch: parseOklch() function

Parses an `oklch()` color string into an OKLCHA color.

L may be a percentage (0–100% mapped to 0–1) or a decimal (0–1). C is a non-negative decimal and H is an angle in degrees.

**Signature:**```typescript
parseOklch: (s: string) => OKLCHA
```## std.parseoklch: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to parse. |


**Returns:**

[OKLCHA](#std-oklcha)

An OKLCHA color.

## std.parseoklch: Exceptions

ParsingError if the string is not a valid OKLCH color.

## std.parseoklch: Example```ts
parseOklch('oklch(0.5 0.15 326)') // oklcha(0.5, 0.15, 326)
parseOklch('oklch(50% 0.15 326 / 0.8)') // oklcha(0.5, 0.15, 326, 0.8)
```

---

## std.parsergb: parseRgb() function

Parses an `rgb()` or `rgba()` color string into an RGB8A color.

Supports integer values (0–255), percentage values (0%–100%), both legacy comma-separated and modern space-separated syntax.

**Signature:**```typescript
parseRgb: (s: string) => RGB8A
```## std.parsergb: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to parse. |


**Returns:**

[RGB8A](#std-rgb8a)

An RGB8A color.

## std.parsergb: Exceptions

ParsingError if the string is not a valid RGB color.

## std.parsergb: Example```ts
parseRgb('rgb(255, 0, 0)') // rgb8a(255, 0, 0)
parseRgb('rgb(255 0 0 / 50%)') // rgb8a(255, 0, 0, 0.5)
parseRgb('rgb(100% 0% 0%)') // rgb8a(255, 0, 0)
```

---

## std.parseurl: parseUrl() function

Safely parses a URL string into a URL object.

This function provides better error handling than the URL constructor by returning null for invalid URLs instead of throwing.

**Signature:**```typescript
parseUrl: (url: string) => URL | null
```## std.parseurl: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| url | string | The URL string to parse |


**Returns:**

URL \| null

A URL object if valid, null otherwise

## std.parseurl: Example```typescript
const url = parseUrl('https://example.com/path?param=value')
// Result: URL object

const invalid = parseUrl('not-a-url')
// Result: null
```

---

## std.partial: partial() function

Creates a partially applied function.

This function allows you to fix some arguments of a function, returning a new function that accepts the remaining arguments.

**Signature:**```typescript
export declare function partial<PrefixArgs extends unknown[], RestArgs extends unknown[], Return>(fn: (...args: [...PrefixArgs, ...RestArgs]) => Return, ...prefixArgs: PrefixArgs): (...rest: RestArgs) => Return;
```## std.partial: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (...args: \[...PrefixArgs, ...RestArgs\]) =&gt; Return | The function to partially apply |
| prefixArgs | PrefixArgs |  |


**Returns:**

(...rest: RestArgs) =&gt; Return

A new function that accepts the remaining arguments

## std.partial: Example```typescript
const add = (a: number, b: number, c: number) => a + b + c
const add5And10 = partial(add, 5, 10)
const result = add5And10(3) // 5 + 10 + 3 = 18
```

---

## std.partialby: PartialBy type

Creates a new type by making the specified key `K` of `T` optional.

**Signature:**```typescript
export type PartialBy<T, K extends keyof T> = Merge<Omit<T, K>, Partial<Pick<T, K>>>;
```
**References:** [Merge](#std-merge)

---

## std.partition: partition() function

Partitions an array into two arrays based on a predicate.

This function splits an array into two parts: elements that satisfy the predicate and elements that don't. The order of elements is preserved.

**Signature:**```typescript
partition: <T>(array: readonly T[], predicate: (item: T) => boolean) => [T[], T[]]
```## std.partition: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| array | readonly T\[\] | The array to partition |
| predicate | (item: T) =&gt; boolean | Function that tests each element |


**Returns:**

\[T\[\], T\[\]\]

A tuple containing \[matching elements, non-matching elements\]

## std.partition: Example```typescript
const numbers = [1, 2, 3, 4, 5, 6]
const [evens, odds] = partition(numbers, n => n % 2 === 0)
// evens: [2, 4, 6]
// odds: [1, 3, 5]
```

---

## std.pick: pick() function

Creates a new object with only the specified keys from the source object.

This function provides type-safe property selection, ensuring that only valid keys can be picked and the result type reflects the selected properties.

**Signature:**```typescript
pick: <T extends object, K extends keyof T>(obj: T, keys: readonly K[]) => Pick<T, K>
```## std.pick: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| obj | T | The source object |
| keys | readonly K\[\] | Array of keys to pick |


**Returns:**

Pick&lt;T, K&gt;

A new object containing only the specified keys

## std.pick: Example```typescript
const user = { id: 1, name: 'Alice', email: 'alice@example.com', password: 'secret' }
const publicUser = pick(user, ['id', 'name', 'email'])
// Result: { id: 1, name: 'Alice', email: 'alice@example.com' }
// Type: Pick<typeof user, 'id' | 'name' | 'email'>
```

---

## std.pipe_1: pipe() function

**Signature:**```typescript
export declare function pipe<A, B, C>(value: A, f1: (a: A) => B, f2: (b: B) => C): C;
```## std.pipe_1: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | A |  |
| f1 | (a: A) =&gt; B |  |
| f2 | (b: B) =&gt; C |  |


**Returns:**

C

---

## std.pipe_2: pipe() function

**Signature:**```typescript
export declare function pipe<A, B, C, D>(value: A, f1: (a: A) => B, f2: (b: B) => C, f3: (c: C) => D): D;
```## std.pipe_2: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | A |  |
| f1 | (a: A) =&gt; B |  |
| f2 | (b: B) =&gt; C |  |
| f3 | (c: C) =&gt; D |  |


**Returns:**

D

---

## std.pipe_3: pipe() function

**Signature:**```typescript
export declare function pipe<A, B, C, D, E>(value: A, f1: (a: A) => B, f2: (b: B) => C, f3: (c: C) => D, f4: (d: D) => E): E;
```## std.pipe_3: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | A |  |
| f1 | (a: A) =&gt; B |  |
| f2 | (b: B) =&gt; C |  |
| f3 | (c: C) =&gt; D |  |
| f4 | (d: D) =&gt; E |  |


**Returns:**

E

---

## std.pipe_4: pipe() function

**Signature:**```typescript
export declare function pipe<T>(value: T, ...fns: Array<(arg: unknown) => unknown>): unknown;
```## std.pipe_4: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | T |  |
| fns | Array&lt;(arg: unknown) =&gt; unknown&gt; |  |


**Returns:**

unknown

---

## std.pipe: pipe() function

Pipes a value through a series of functions from left to right.

This function applies the given functions to a value in left-to-right order, passing the result of each function to the next.

**Signature:**```typescript
export declare function pipe<A, B>(value: A, f1: (a: A) => B): B;
```## std.pipe: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | A | The initial value |
| f1 | (a: A) =&gt; B |  |


**Returns:**

B

The final result after applying all functions

## std.pipe: Example```typescript
const add5 = (x: number) => x + 5
const double = (x: number) => x * 2
const square = (x: number) => x * x

const result = pipe(3, add5, double, square) // square(double(add5(3))) = square(double(8)) = square(16) = 256
```

---

## std.primitive: Primitive type

Represents a primitive value that can be of type string, boolean, number, null, or undefined.

**Signature:**```typescript
export type Primitive = string | boolean | number | null | undefined;
```

---

## std.promiseresult: PromiseResult type

Represents a promise that resolves to a `Result` type.

**Signature:**```typescript
export type PromiseResult<V, E> = PromiseLike<Result<V, E>>;
```
**References:** [Result](#std-result)

---

## std.promisevalidation: PromiseValidation type

Represents a promise that resolves to a `Validation` object.

**Signature:**```typescript
export type PromiseValidation<E> = PromiseLike<Validation<E>>;
```
**References:** [Validation](#std-validation)

---

## std.quote: quote() function

Returns a quoted version of the input string.

**Signature:**```typescript
quote: (s: string, quoteChar?: string) => string
```## std.quote: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The input string to be quoted. |
| quoteChar | string | _(Optional)_ The character used for quoting. Defaults to single quote ('). |


**Returns:**

string

The quoted string.

---

## std.randombytes: randomBytes() function

Generates random bytes as a Uint8Array.

This function creates an array of random bytes, useful for cryptographic operations or when you need raw random data.

**Signature:**```typescript
randomBytes: (length: number) => Uint8Array
```## std.randombytes: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| length | number | The number of bytes to generate |


**Returns:**

Uint8Array

A Uint8Array containing random bytes

## std.randombytes: Example```typescript
const key = randomBytes(32) // 32 random bytes
const salt = randomBytes(16) // 16 random bytes for salt
```

---

## std.randomchoice: randomChoice() function

Selects a random element from an array.

This function provides a convenient way to pick a random item from an array, handling the index calculation automatically.

**Signature:**```typescript
randomChoice: <T>(array: readonly T[]) => T
```## std.randomchoice: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| array | readonly T\[\] | The array to choose from |


**Returns:**

T

A random element from the array

## std.randomchoice: Exceptions

Error if the array is empty

## std.randomchoice: Example```typescript
const colors = ['red', 'green', 'blue', 'yellow']
const randomColor = randomChoice(colors) // One of the colors

const users = [{ name: 'Alice' }, { name: 'Bob' }]
const randomUser = randomChoice(users) // One of the users
```

---

## std.randomchoices: randomChoices() function

Selects multiple random elements from an array without replacement.

This function picks a specified number of unique elements from an array. The order of selected elements is randomized.

**Signature:**```typescript
randomChoices: <T>(array: readonly T[], count: number) => T[]
```## std.randomchoices: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| array | readonly T\[\] | The array to choose from |
| count | number | The number of elements to select |


**Returns:**

T\[\]

An array of randomly selected elements

## std.randomchoices: Exceptions

Error if count is greater than array length or if array is empty

## std.randomchoices: Example```typescript
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const sample = randomChoices(numbers, 3) // e.g., [7, 2, 9]

const team = randomChoices(allPlayers, 5) // Pick 5 random players
```

---

## std.randomcolor: randomColor() function

Generates a random color in the specified color space with fully opaque alpha.

Each channel is randomised within its natural range for the target space. Alpha is always set to 1.

**Signature:**```typescript
randomColor: (space?: ColorSpace) => Color
```## std.randomcolor: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| space | [ColorSpace](#std-colorspace) | _(Optional)_ The color space to generate in. Defaults to `'rgb8'`. |


**Returns:**

[Color](#std-color)

A random [Color](#std-color) in the requested space.

## std.randomcolor: Example```ts
const c = randomColor('hsl')
c.space // 'hsl'
```

---

## std.randomfloat: randomFloat() function

Generates a random floating-point number between min and max.

This function provides a convenient way to generate random floats within a specific range, with optional exclusion of the maximum value.

**Signature:**```typescript
randomFloat: (min: number, max: number, inclusive?: boolean) => number
```## std.randomfloat: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| min | number | The minimum value (inclusive) |
| max | number | The maximum value (exclusive by default) |
| inclusive | boolean | _(Optional)_ Whether to include the maximum value (default: false) |


**Returns:**

number

A random float between min and max

## std.randomfloat: Example```typescript
const temperature = randomFloat(-10.0, 35.0) // Random temperature
const percentage = randomFloat(0, 100) // Random percentage
```

---

## std.randomhex: randomHex() function

Generates a random hexadecimal string of specified length.

This function creates a random string using hexadecimal characters (0-9, a-f). Useful for generating tokens, IDs, or other random identifiers.

**Signature:**```typescript
randomHex: (length: number) => string
```## std.randomhex: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| length | number | The length of the hex string to generate |


**Returns:**

string

A random hexadecimal string

## std.randomhex: Example```typescript
const token = randomHex(16) // e.g., "a1b2c3d4e5f67890"
const color = '#' + randomHex(6) // Random hex color
```

---

## std.randomint: randomInt() function

Generates a random integer between min and max (inclusive).

This function provides a more convenient API than manually scaling Math.random() and handles the common case of generating integers within a specific range.

**Signature:**```typescript
randomInt: (min: number, max: number) => number
```## std.randomint: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| min | number | The minimum value (inclusive) |
| max | number | The maximum value (inclusive) |


**Returns:**

number

A random integer between min and max

## std.randomint: Example```typescript
const dice = randomInt(1, 6) // 1, 2, 3, 4, 5, or 6
const index = randomInt(0, array.length - 1) // Valid array index
```

---

## std.randomstringsequence: randomStringSequence() function

Returns a random sampling of the specified length from the seed string.

**Signature:**```typescript
randomStringSequence: (alphabet: string, length: number) => string
```## std.randomstringsequence: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| alphabet | string | The seed string to sample from. |
| length | number | The length of the random string to generate. |


**Returns:**

string

The random string.

---

## std.randomstringsequencebase64: randomStringSequenceBase64() function

Like `randomSequence`, but automatically uses the base64 sequence as the seed string.

**Signature:**```typescript
randomStringSequenceBase64: (length: number) => string
```## std.randomstringsequencebase64: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| length | number | The length of the random string to generate. |


**Returns:**

string

The random string.

---

## std.randomsubstring: randomSubString() function

Returns a random substring from the `value` argument. The length of such value is by default `1`.

**Signature:**```typescript
randomSubString: (value: string, length?: number) => string
```## std.randomsubstring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to extract the random substring from. |
| length | number | _(Optional)_ The length of the random substring to extract. |


**Returns:**

string

The random substring.

---

## std.randomuuid: randomUuid() function

Generates a random UUID v4 string.

This function creates a UUID (Universally Unique Identifier) using random numbers. While not cryptographically secure, it's suitable for most application needs.

**Signature:**```typescript
randomUuid: () => string
```
**Returns:**

string

A random UUID v4 string

## std.randomuuid: Example


```typescript
const id = randomUuid() // e.g., "f47ac10b-58cc-4372-a567-0e02b2c3d479"
const sessionId = randomUuid()
```

---

## std.range: range() function

Generates an array of consecutive numbers in a specified range.

This function provides a more intuitive API than `Array.from({ length }, (_, i) => startAt + i)` for creating numeric sequences. It's commonly needed for iterations, indexing, and mathematical operations.

**Signature:**```typescript
range: (length: number, startAt?: number) => number[]
```## std.range: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| length | number | The length of the array to generate. |
| startAt | number | _(Optional)_ The starting value of the range. Default is 0. |


**Returns:**

number\[\]

An array of numbers in the specified range.

## std.range: Example```typescript
// Create a range from 0 to 4
const zeroToFour = range(5)
// Result: [0, 1, 2, 3, 4]

// Create a range from 10 to 14
const tenToFourteen = range(5, 10)
// Result: [10, 11, 12, 13, 14]

// Use for creating test data
const testIds = range(100, 1000)
// Result: [1000, 1001, 1002, ..., 1099]
```

---

## std.rankarray: rankArray() function

Assigns ranks to the elements in the array based on the provided compare function. The ranks are assigned in ascending order, with the lowest value receiving a rank of 0. If there are duplicate values, the rank of the duplicates can be incremented or not based on the `incrementDuplicates` parameter.

**Signature:**```typescript
rankArray: <T>(array: T[], compare: (a: T, b: T) => number, incrementDuplicates?: boolean) => number[]
```## std.rankarray: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| array | T\[\] | The array to rank. |
| compare | (a: T, b: T) =&gt; number | The compare function used to determine the order of elements. |
| incrementDuplicates | boolean | _(Optional)_ Whether to increment the rank of duplicate values. |


**Returns:**

number\[\]

An array of ranks corresponding to the elements in the input array.

---

## std.reduce: reduce() function

Reduces an iterable to a single value using the reducer function.

This function processes all elements in the iterable, accumulating a result using the reducer function and initial value.

**Signature:**```typescript
reduce: <T, U>(iterable: Iterable<T>, reducer: (acc: U, item: T) => U, initial: U) => U
```## std.reduce: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| iterable | Iterable&lt;T&gt; | The iterable to reduce |
| reducer | (acc: U, item: T) =&gt; U | Function that combines accumulator with each element |
| initial | U | Initial value for the accumulator |


**Returns:**

U

The final accumulated value

## std.reduce: Example```typescript
const numbers = [1, 2, 3, 4, 5]
const sum = reduce(numbers, (acc, n) => acc + n, 0) // 15

const words = ['hello', 'world', 'foo', 'bar']
const longest = reduce(words, (acc, word) => word.length > acc.length ? word : acc, '')
```

---

## std.removeallfromarray: removeAllFromArray() function

Removes all occurrences of an item from an array.

**Signature:**```typescript
removeAllFromArray: <A>(arr: A[], item: A) => boolean
```## std.removeallfromarray: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| arr | A\[\] | The array from which to remove the item. |
| item | A | The item to remove from the array. |


**Returns:**

boolean

`true` if at least one occurrence was found and removed, `false` otherwise.

---

## std.removeallfromarraybypredicate: removeAllFromArrayByPredicate() function

Removes all occurrences in an array that satisfy the given predicate.

**Signature:**```typescript
removeAllFromArrayByPredicate: <A>(arr: A[], predicate: (a: A) => boolean) => boolean
```## std.removeallfromarraybypredicate: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| arr | A\[\] | The array from which elements will be removed. |
| predicate | (a: A) =&gt; boolean | The predicate function used to determine which elements to remove. |


**Returns:**

boolean

`true` if at least one element was removed, `false` otherwise.

---

## std.removeobjectfields: removeObjectFields() function

Removes specified fields from an object and returns a new object without those fields.

**Signature:**```typescript
removeObjectFields: <T extends object, F extends Array<keyof T>>(ob: T, ...fields: F) => Omit<T, TupleToUnion<F>>
```## std.removeobjectfields: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| ob | T | The object from which fields will be removed. |
| fields | F | The fields to be removed from the object. |


**Returns:**

Omit&lt;T, [TupleToUnion](#std-tupletounion)&lt;F&gt;&gt;

A new object without the specified fields.

---

## std.removeonefromarray: removeOneFromArray() function

Removes the first occurrence of an item from an array.

**Signature:**```typescript
removeOneFromArray: <A>(arr: A[], item: A) => boolean
```## std.removeonefromarray: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| arr | A\[\] | The array from which to remove the item. |
| item | A | The item to remove from the array. |


**Returns:**

boolean

`true` if the item was found and removed, `false` otherwise.

---

## std.removeonefromarraybypredicate: removeOneFromArrayByPredicate() function

Removes the first occurrence in an array that satisfy the given predicate.

**Signature:**```typescript
removeOneFromArrayByPredicate: <A>(arr: A[], predicate: (a: A) => boolean) => boolean
```## std.removeonefromarraybypredicate: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| arr | A\[\] | The array from which elements will be removed. |
| predicate | (a: A) =&gt; boolean | The predicate function used to determine which elements to remove. |


**Returns:**

boolean

`true` if at least one element was removed, `false` otherwise.

---

## std.removequeryparam: removeQueryParam() function

Removes a query parameter from a URL.

This function removes a specific query parameter from a URL, preserving all other parameters and URL components.

**Signature:**```typescript
removeQueryParam: (url: string, key: string) => string
```## std.removequeryparam: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| url | string | The base URL |
| key | string | The parameter key to remove |


**Returns:**

string

The URL with the parameter removed

## std.removequeryparam: Example```typescript
const url = removeQueryParam('https://example.com/path?keep=this&remove=that', 'remove')
// Result: 'https://example.com/path?keep=this'
```

---

## std.requiredby: RequiredBy type

Creates a new type by making the specified key `K` of `T` required.

**Signature:**```typescript
export type RequiredBy<T, K extends keyof T> = Merge<Omit<T, K>, Required<Pick<T, K>>>;
```
**References:** [Merge](#std-merge)

---

## std.result: Result variable

Utility functions for working with `Result` types.

**Signature:**```typescript
Result: {
    success<V>(value: V): Result<V, any>;
    failure<E>(error: E): Result<any, E>;
    map: <V1, V2, E>(r: Result<V1, E>, f: (value: V1) => V2) => Result<V2, E>;
    flatMap: <V1, V2, E>(r: Result<V1, E>, f: (value: V1) => Result<V2, E>) => Result<V2, E>;
    toAsync<V, E>(r: Result<V, E>): AsyncResult<V, E>;
    toValidation<V, E>(r: Result<V, E>): Validation<E>;
    isSuccess<V, E>(r: Result<V, E>): r is Success<V>;
    isFailure<V, E>(r: Result<V, E>): r is Failure<E>;
    getOrElse<V, E>(r: Result<V, E>, alt: V): V;
    getOrElseLazy<V, E>(r: Result<V, E>, altf: () => V): V;
    getOrNull<V, E>(r: Result<V, E>): V | null;
    getOrUndefined<V, E>(r: Result<V, E>): Maybe<V>;
    getUnsafe: <V, E>(r: Result<V, E>) => V;
    match: <V1, V2, E>(r: Result<V1, E>, success: (value: V1) => V2, failure: (error: E) => V2) => V2;
    effect: <V, E>(r: Result<V, E>, handlers: {
        success?: (value: V) => void;
        failure?: (error: E) => void;
        else?: () => void;
    }) => Result<V, E>;
    whenSuccess: <V, E>(r: Result<V, E>, apply: (v: V) => void) => Result<V, E>;
    whenFailure: <V, E>(r: Result<V, E>, apply: (e: E) => void) => Result<V, E>;
    combine: <V, E>(r1: Result<V, E>, r2: Result<V, E>, combineV: (v1: V, v2: V) => V, combineE: (e1: E, e2: E) => E) => Result<V, E>;
    equals: <V, E>(r1: Result<V, E>, r2: Result<V, E>, options?: {
        valueEquals: (v1: V, v2: V) => boolean;
        errorEquals: (e1: E, e2: E) => boolean;
    }) => boolean;
    all: <V, E>(results: Result<V, E>[]) => Result<V[], E>;
    mapError: <V, E, F>(r: Result<V, E>, f: (error: E) => F) => Result<V, F>;
    flatMapError: <V, E, F>(r: Result<V, E>, f: (error: E) => Result<V, F>) => Result<V, F>;
    recover: <V, E>(r: Result<V, E>, f: (error: E) => V) => Result<V, never>;
    ap: <V, U, E>(resultFn: Result<(v: V) => U, E>, resultVal: Result<V, E>) => Result<U, E>;
    map2: <V1, V2, U, E>(r1: Result<V1, E>, r2: Result<V2, E>, f: (v1: V1, v2: V2) => U) => Result<U, E>;
    map3: <V1, V2, V3, U, E>(r1: Result<V1, E>, r2: Result<V2, E>, r3: Result<V3, E>, f: (v1: V1, v2: V2, v3: V3) => U) => Result<U, E>;
    ofPromise: <V>(p: Promise<V>) => Promise<Result<V, Error>>;
    swap: <V, E>(r: Result<V, E>) => Result<E, V>;
    fromNullable: <V, E>(value: V | null | undefined, error: E) => Result<V, E>;
    fromNullableLazy: <V, E>(value: V | null | undefined, errorFn: () => E) => Result<V, E>;
    tryCatch: <V>(f: () => V) => Result<V, Error>;
}
```

---

## std.reverse: Reverse type

**Signature:**```typescript
export type Reverse<T extends unknown[]> = T extends [infer A, ...infer Rest] ? [...Reverse<Rest>, A] : [];
```
**References:** [Reverse](#std-reverse)

---

## std.reversestring: reverseString() function

Returns a new string whose characters are in reverse order.

**Signature:**```typescript
reverseString: (s: string) => string
```## std.reversestring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to reverse. |


**Returns:**

string

The reversed string.

---

## std.rgb8a.alpha: RGB8A.alpha property

**Signature:**```typescript
readonly alpha: number;
```

---

## std.rgb8a.b: RGB8A.b property

**Signature:**```typescript
readonly b: number;
```

---

## std.rgb8a.g: RGB8A.g property

**Signature:**```typescript
readonly g: number;
```

---

## std.rgb8a: RGB8A interface

An 8-bit RGBA color with channels `r` (0–255), `g` (0–255), `b` (0–255), and `alpha` (0–1). This is the format used by CSS `rgb()` and hex notation.

**Signature:**```typescript
export interface RGB8A 
```## std.rgb8a: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [alpha](#std-rgb8a-alpha) | `readonly` | number |  |
| [b](#std-rgb8a-b) | `readonly` | number |  |
| [g](#std-rgb8a-g) | `readonly` | number |  |
| [r](#std-rgb8a-r) | `readonly` | number |  |
| [space](#std-rgb8a-space) | `readonly` | 'rgb8' |  |

---

## std.rgb8a.r: RGB8A.r property

**Signature:**```typescript
readonly r: number;
```

---

## std.rgb8a.space: RGB8A.space property

**Signature:**```typescript
readonly space: 'rgb8';
```

---

## std.rgb8atohexstring: rgb8aToHexString() function

Serializes an RGB8A color to a hex string.

Produces `#rrggbb` when alpha is 1, or `#rrggbbaa` otherwise.

**Signature:**```typescript
rgb8aToHexString: (c: RGB8A) => string
```## std.rgb8atohexstring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [RGB8A](#std-rgb8a) | The RGB8A color to serialize. |


**Returns:**

string

A hex color string.

## std.rgb8atohexstring: Example```ts
rgb8aToHexString(rgb8a(255, 0, 0)) // '#ff0000'
rgb8aToHexString(rgb8a(255, 0, 0, 0.5)) // '#ff000080'
```

---

## std.rgb8atohsla: rgb8aToHsla() function

Converts an RGB8A color to an HSLA color using the standard min/max/delta algorithm.

**Signature:**```typescript
rgb8aToHsla: (c: RGB8A) => HSLA
```## std.rgb8atohsla: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [RGB8A](#std-rgb8a) | The RGB8A color to convert. |


**Returns:**

[HSLA](#std-hsla)

The equivalent HSLA color.

## std.rgb8atohsla: Example```ts
rgb8aToHsla(rgb8a(255, 0, 0)) // hsla(0, 1, 0.5)
rgb8aToHsla(rgb8a(0, 128, 0)) // hsla(120, 1, ~0.251)
rgb8aToHsla(rgb8a(0, 0, 0)) // hsla(0, 0, 0)
```

---

## std.rgb8atohsva: rgb8aToHsva() function

Converts an RGB8A color to an HSVA color.

Uses the standard RGB-to-HSV algorithm where Value is the maximum channel and Saturation is the ratio of chroma to Value.

**Signature:**```typescript
rgb8aToHsva: (c: RGB8A) => HSVA
```## std.rgb8atohsva: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [RGB8A](#std-rgb8a) | The RGB8A color to convert. |


**Returns:**

[HSVA](#std-hsva)

An HSVA color.

## std.rgb8atohsva: Example```ts
rgb8aToHsva(rgb8a(255, 0, 0)) // hsva(0, 1, 1)
rgb8aToHsva(rgb8a(0, 0, 0)) // hsva(0, 0, 0)
rgb8aToHsva(rgb8a(128, 128, 128)) // hsva(0, 0, ~0.502)
```

---

## std.rgb8atohwba: rgb8aToHwba() function

Converts an RGB8A color to an HWBA color.

The conversion derives hue, whiteness, and blackness from the RGB channels. Whiteness is the minimum channel value and blackness is one minus the maximum channel value.

**Signature:**```typescript
rgb8aToHwba: (c: RGB8A) => HWBA
```## std.rgb8atohwba: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [RGB8A](#std-rgb8a) | The RGB8A color to convert. |


**Returns:**

[HWBA](#std-hwba)

An HWBA color.

## std.rgb8atohwba: Example```ts
rgb8aToHwba(rgb8a(255, 0, 0)) // hwba(0, 0, 0)
rgb8aToHwba(rgb8a(0, 0, 0)) // hwba(0, 0, 1)
rgb8aToHwba(rgb8a(255, 255, 255)) // hwba(0, 1, 0)
```

---

## std.rgb8atolaba: rgb8aToLaba() function

Converts an RGB8A color to a LABA color through the CIE XYZ intermediate color space.

**Signature:**```typescript
rgb8aToLaba: (c: RGB8A) => LABA
```## std.rgb8atolaba: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [RGB8A](#std-rgb8a) | The RGB8A color to convert. |


**Returns:**

[LABA](#std-laba)

The equivalent LABA color.

## std.rgb8atolaba: Example```ts
rgb8aToLaba(rgb8a(255, 0, 0)) // laba(~0.5323, ~80.11, ~67.22)
rgb8aToLaba(rgb8a(0, 0, 0))   // laba(0, 0, 0)
```

---

## std.rgb8atolcha: rgb8aToLcha() function

Converts an RGB8A color to a LCHA color by converting to LABA first and then applying the polar (cylindrical) transformation.

**Signature:**```typescript
rgb8aToLcha: (c: RGB8A) => LCHA
```## std.rgb8atolcha: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [RGB8A](#std-rgb8a) | The RGB8A color to convert. |


**Returns:**

[LCHA](#std-lcha)

The equivalent LCHA color.

## std.rgb8atolcha: Example```ts
rgb8aToLcha(rgb8a(255, 0, 0)) // lcha(~0.5323, ~104.55, ~40.0)
rgb8aToLcha(rgb8a(0, 0, 0))   // lcha(0, 0, 0)
```

---

## std.rgb8atooklaba: rgb8aToOklaba() function

Converts an RGB8A color to an OKLABA color.

**Signature:**```typescript
rgb8aToOklaba: (c: RGB8A) => OKLABA
```## std.rgb8atooklaba: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [RGB8A](#std-rgb8a) | The RGB8A color to convert. |


**Returns:**

[OKLABA](#std-oklaba)

The equivalent OKLABA color.

## std.rgb8atooklaba: Example```ts
rgb8aToOklaba(rgb8a(255, 0, 0)) // oklaba(~0.628, ~0.225, ~0.126)
```

---

## std.rgb8atooklcha: rgb8aToOklcha() function

Converts an RGB8A color to an OKLCHA color.

**Signature:**```typescript
rgb8aToOklcha: (c: RGB8A) => OKLCHA
```## std.rgb8atooklcha: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [RGB8A](#std-rgb8a) | The RGB8A color to convert. |


**Returns:**

[OKLCHA](#std-oklcha)

The equivalent OKLCHA color.

## std.rgb8atooklcha: Example```ts
rgb8aToOklcha(rgb8a(255, 0, 0)) // oklcha(~0.628, ~0.258, ~29.2)
```

---

## std.rgb8atorgba: rgb8aToRgba() function

Converts an RGB8A color (0–255) to an RGBA color (0–1).

**Signature:**```typescript
rgb8aToRgba: (c: RGB8A) => RGBA
```## std.rgb8atorgba: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [RGB8A](#std-rgb8a) | The RGB8A color to convert. |


**Returns:**

[RGBA](#std-rgba)

An RGBA color.

## std.rgb8atorgba: Example```ts
rgb8aToRgba(rgb8a(255, 0, 0)) // rgba(1, 0, 0)
```

---

## std.rgb8atorgbstring: rgb8aToRgbString() function

Serializes an RGB8A color to an `rgb()` or `rgba()` CSS string.

**Signature:**```typescript
rgb8aToRgbString: (c: RGB8A) => string
```## std.rgb8atorgbstring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [RGB8A](#std-rgb8a) | The RGB8A color to serialize. |


**Returns:**

string

A CSS color string.

## std.rgb8atorgbstring: Example```ts
rgb8aToRgbString(rgb8a(255, 0, 0)) // 'rgb(255 0 0)'
rgb8aToRgbString(rgb8a(255, 0, 0, 0.5)) // 'rgb(255 0 0 / 0.5)'
```

---

## std.rgba.alpha: RGBA.alpha property

**Signature:**```typescript
readonly alpha: number;
```

---

## std.rgba.b: RGBA.b property

**Signature:**```typescript
readonly b: number;
```

---

## std.rgba.g: RGBA.g property

**Signature:**```typescript
readonly g: number;
```

---

## std.rgba: RGBA interface

An RGBA color with channels `r` (0–1), `g` (0–1), `b` (0–1), and `alpha` (0–1).

**Signature:**```typescript
export interface RGBA 
```## std.rgba: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [alpha](#std-rgba-alpha) | `readonly` | number |  |
| [b](#std-rgba-b) | `readonly` | number |  |
| [g](#std-rgba-g) | `readonly` | number |  |
| [r](#std-rgba-r) | `readonly` | number |  |
| [space](#std-rgba-space) | `readonly` | 'rgb' |  |

---

## std.rgba.r: RGBA.r property

**Signature:**```typescript
readonly r: number;
```

---

## std.rgba.space: RGBA.space property

**Signature:**```typescript
readonly space: 'rgb';
```

---

## std.rgbatorgb8a: rgbaToRgb8a() function

Converts an RGBA color (0–1) to an RGB8A color (0–255).

**Signature:**```typescript
rgbaToRgb8a: (c: RGBA) => RGB8A
```## std.rgbatorgb8a: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [RGBA](#std-rgba) | The RGBA color to convert. |


**Returns:**

[RGB8A](#std-rgb8a)

An RGB8A color.

## std.rgbatorgb8a: Example```ts
rgbaToRgb8a(rgba(1, 0, 0)) // rgb8a(255, 0, 0)
```

---

## std.rgbatorgbstring: rgbaToRgbString() function

Serializes an RGBA color (0–1) to an `rgb()` CSS string using percentage values.

**Signature:**```typescript
rgbaToRgbString: (c: RGBA) => string
```## std.rgbatorgbstring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [RGBA](#std-rgba) | The RGBA color to serialize. |


**Returns:**

string

A CSS color string.

## std.rgbatorgbstring: Example```ts
rgbaToRgbString(rgba(1, 0, 0)) // 'rgb(100% 0% 0%)'
rgbaToRgbString(rgba(1, 0, 0, 0.5)) // 'rgb(100% 0% 0% / 0.5)'
```

---

## std.root: root() function

Computes the nth root (`index`) of `base`.

**Signature:**```typescript
root: (base: number, index: number) => number
```## std.root: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| base | number | The base number. |
| index | number | The index of the root. |


**Returns:**

number

The nth root of the base number.

## std.root: Example```ts
root(8, 3) // returns 2
root(27, 3) // returns 3
root(16, 4) // returns 2
```

---

## std.roundto: roundTo() function

Rounds a number to the specified number of decimals.

**Signature:**```typescript
roundTo: (f: number, decimals: number) => number
```## std.roundto: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| f | number | The number to round. |
| decimals | number | The number of decimals to round to. |


**Returns:**

number

The rounded number.

## std.roundto: Example```ts
roundTo(1.234, 2) // returns 1.23
roundTo(1.234, 1) // returns 1.2
roundTo(1.234, 0) // returns 1
```

---

## std.rpad: rpad() function

Pads a string on the right with a specified character until it reaches a specified length. If the string is already longer than the specified length, it is returned as is.

**Signature:**```typescript
rpad: (s: string, char: string, length: number) => string
```## std.rpad: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to pad. |
| char | string | The character to use for padding. |
| length | number | The desired length of the padded string. |


**Returns:**

string

The padded string.

---

## std.sameobjectkeys: sameObjectKeys() function

Checks if two objects have the same keys.

**Signature:**```typescript
sameObjectKeys: <T extends object>(a: T, b: T) => boolean
```## std.sameobjectkeys: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | T | The first object. |
| b | T | The second object. |


**Returns:**

boolean

`true` if both objects have the same keys, `false` otherwise.

---

## std.saturate: saturate() function

Increases the chroma (saturation) of a color by the given amount.

Operates in OKLCH space. The amount is scaled by 0.4 to map the 0–1 input range to the typical OKLCH chroma range.

**Signature:**```typescript
saturate: (c: Color, amount: number) => Color
```## std.saturate: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to saturate. |
| amount | number | A value between 0 and 1 indicating how much to increase chroma. |


**Returns:**

[Color](#std-color)

The saturated color in the original color space.

## std.saturate: Example```ts
const vivid = saturate(rgb8a(100, 100, 100, 1), 0.5)
```

---

## std.seedrandom: seedRandom() function

Creates a seeded random number generator.

This function returns a deterministic random number generator that produces the same sequence of numbers for the same seed. Useful for testing or when reproducible randomness is needed.

**Signature:**```typescript
seedRandom: (seed: string) => (() => number)
```## std.seedrandom: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| seed | string | The seed string for the random number generator |


**Returns:**

(() =&gt; number)

A function that generates seeded random numbers between 0 and 1

## std.seedrandom: Example```typescript
const rng = seedRandom('my-seed')
const num1 = rng() // Always the same for this seed
const num2 = rng() // Next number in sequence

// Create another generator with same seed
const rng2 = seedRandom('my-seed')
const same1 = rng2() // Same as num1
```

---

## std.setdifference: setDifference() function

Creates the difference between two Sets.

The difference contains elements that are in the first Set but not in the second. This is equivalent to the mathematical difference operation (A - B).

**Signature:**```typescript
setDifference: <T>(setA: Set<T>, setB: Set<T>) => Set<T>
```## std.setdifference: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| setA | Set&lt;T&gt; | Set to subtract from |
| setB | Set&lt;T&gt; | Set to subtract |


**Returns:**

Set&lt;T&gt;

A new Set containing elements in setA but not in setB

## std.setdifference: Example```typescript
const setA = new Set([1, 2, 3, 4])
const setB = new Set([3, 4, 5, 6])
const difference = setDifference(setA, setB)
// Result: Set { 1, 2 }
```

---

## std.setfilter: setFilter() function

Creates a new Set containing only elements that satisfy the predicate.

This provides a functional approach to filtering Sets, similar to Array.prototype.filter but for Set objects.

**Signature:**```typescript
setFilter: <T>(set: Set<T>, predicate: (value: T) => boolean) => Set<T>
```## std.setfilter: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| set | Set&lt;T&gt; | The Set to filter |
| predicate | (value: T) =&gt; boolean | Function that tests each element |


**Returns:**

Set&lt;T&gt;

A new Set with elements that satisfy the predicate

## std.setfilter: Example```typescript
const numbers = new Set([1, 2, 3, 4, 5, 6])
const evenNumbers = setFilter(numbers, n => n % 2 === 0)
// Result: Set { 2, 4, 6 }
```

---

## std.setfromarray: setFromArray() function

Creates a Set from an array, removing duplicates.

This provides a semantic way to deduplicate arrays using Sets.

**Signature:**```typescript
setFromArray: <T>(array: readonly T[]) => Set<T>
```## std.setfromarray: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| array | readonly T\[\] | The array to convert |


**Returns:**

Set&lt;T&gt;

A new Set containing unique elements from the array

## std.setfromarray: Example```typescript
const array = [1, 2, 2, 3, 3, 3, 4]
const set = setFromArray(array)
// Result: Set { 1, 2, 3, 4 }
```

---

## std.setintersection: setIntersection() function

Creates the intersection of two Sets.

The intersection contains only elements that appear in both Sets. This is equivalent to the mathematical intersection operation (A ∩ B).

**Signature:**```typescript
setIntersection: <T>(setA: Set<T>, setB: Set<T>) => Set<T>
```## std.setintersection: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| setA | Set&lt;T&gt; | First Set |
| setB | Set&lt;T&gt; | Second Set |


**Returns:**

Set&lt;T&gt;

A new Set containing elements present in both input Sets

## std.setintersection: Example```typescript
const setA = new Set([1, 2, 3, 4])
const setB = new Set([3, 4, 5, 6])
const intersection = setIntersection(setA, setB)
// Result: Set { 3, 4 }
```

---

## std.setisempty: setIsEmpty() function

Checks if a Set is empty.

This provides a semantic way to check for empty Sets, making code more readable than checking size === 0.

**Signature:**```typescript
setIsEmpty: <T>(set: Set<T>) => boolean
```## std.setisempty: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| set | Set&lt;T&gt; | The Set to check |


**Returns:**

boolean

true if the Set has no elements, false otherwise

## std.setisempty: Example```typescript
const emptySet = new Set()
const nonEmptySet = new Set([1, 2, 3])

setIsEmpty(emptySet) // true
setIsEmpty(nonEmptySet) // false
```

---

## std.setissubset: setIsSubset() function

Checks if one Set is a subset of another.

A Set is a subset if all of its elements are contained in the other Set. An empty Set is considered a subset of any Set.

**Signature:**```typescript
setIsSubset: <T>(subset: Set<T>, superset: Set<T>) => boolean
```## std.setissubset: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| subset | Set&lt;T&gt; | Set to check if it's a subset |
| superset | Set&lt;T&gt; | Set to check against |


**Returns:**

boolean

true if subset is a subset of superset, false otherwise

## std.setissubset: Example```typescript
const subset = new Set([1, 2])
const superset = new Set([1, 2, 3, 4])
const notSubset = new Set([1, 5])

setIsSubset(subset, superset) // true
setIsSubset(notSubset, superset) // false
setIsSubset(new Set(), superset) // true (empty set)
```

---

## std.setissuperset: setIsSuperset() function

Checks if one Set is a superset of another.

A Set is a superset if it contains all elements of the other Set. This is the inverse of the subset relationship.

**Signature:**```typescript
setIsSuperset: <T>(superset: Set<T>, subset: Set<T>) => boolean
```## std.setissuperset: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| superset | Set&lt;T&gt; | Set to check if it's a superset |
| subset | Set&lt;T&gt; | Set to check against |


**Returns:**

boolean

true if superset is a superset of subset, false otherwise

## std.setissuperset: Example```typescript
const superset = new Set([1, 2, 3, 4])
const subset = new Set([1, 2])
const notSubset = new Set([1, 5])

setIsSuperset(superset, subset) // true
setIsSuperset(superset, notSubset) // false
```

---

## std.setmap: setMap() function

Creates a new Set with elements transformed by the mapper function.

This provides a functional approach to transforming Set elements, similar to Array.prototype.map but for Set objects.

**Signature:**```typescript
setMap: <T, U>(set: Set<T>, mapper: (value: T) => U) => Set<U>
```## std.setmap: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| set | Set&lt;T&gt; | The Set to transform |
| mapper | (value: T) =&gt; U | Function that transforms each element |


**Returns:**

Set&lt;U&gt;

A new Set with transformed elements

## std.setmap: Example```typescript
const numbers = new Set([1, 2, 3])
const doubled = setMap(numbers, n => n * 2)
// Result: Set { 2, 4, 6 }
```

---

## std.setqueryparam: setQueryParam() function

Sets a query parameter in a URL.

This function adds or updates a single query parameter in a URL, preserving all other parameters and URL components.

**Signature:**```typescript
setQueryParam: (url: string, key: string, value: string) => string
```## std.setqueryparam: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| url | string | The base URL |
| key | string | The parameter key |
| value | string | The parameter value |


**Returns:**

string

The URL with the parameter set

## std.setqueryparam: Example```typescript
const url = setQueryParam('https://example.com/path?existing=value', 'new', 'param')
// Result: 'https://example.com/path?existing=value&new=param'

const updated = setQueryParam('https://example.com/path?existing=old', 'existing', 'new')
// Result: 'https://example.com/path?existing=new'
```

---

## std.setsymmetricdifference: setSymmetricDifference() function

Creates the symmetric difference between two Sets.

The symmetric difference contains elements that are in either Set but not in both. This is equivalent to (A - B) ∪ (B - A) or (A ∪ B) - (A ∩ B).

**Signature:**```typescript
setSymmetricDifference: <T>(setA: Set<T>, setB: Set<T>) => Set<T>
```## std.setsymmetricdifference: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| setA | Set&lt;T&gt; | First Set |
| setB | Set&lt;T&gt; | Second Set |


**Returns:**

Set&lt;T&gt;

A new Set containing elements in either Set but not both

## std.setsymmetricdifference: Example```typescript
const setA = new Set([1, 2, 3, 4])
const setB = new Set([3, 4, 5, 6])
const symDiff = setSymmetricDifference(setA, setB)
// Result: Set { 1, 2, 5, 6 }
```

---

## std.settled: Settled type

Represents a settled state in an asynchronous result.

**Signature:**```typescript
export type Settled<V, E> = AsyncSuccess<V> | AsyncFailure<E>;
```
**References:** [AsyncSuccess](#std-asyncsuccess), [AsyncFailure](#std-asyncfailure)

---

## std.settoarray: setToArray() function

Converts a Set to an array.

This provides a convenient way to convert Sets to arrays for further processing with array methods.

**Signature:**```typescript
setToArray: <T>(set: Set<T>) => T[]
```## std.settoarray: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| set | Set&lt;T&gt; | The Set to convert |


**Returns:**

T\[\]

An array containing all elements from the Set

## std.settoarray: Example```typescript
const set = new Set([3, 1, 4, 1, 5]) // Note: duplicates are removed
const array = setToArray(set)
// Result: [3, 1, 4, 5]
```

---

## std.setunion: setUnion() function

Creates the union of multiple Sets.

The union contains all unique elements that appear in any of the input Sets. This is equivalent to the mathematical union operation (A ∪ B ∪ C...).

**Signature:**```typescript
setUnion: <T>(...sets: Set<T>[]) => Set<T>
```## std.setunion: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| sets | Set&lt;T&gt;\[\] | Sets to union |


**Returns:**

Set&lt;T&gt;

A new Set containing all unique elements from input Sets

## std.setunion: Example```typescript
const setA = new Set([1, 2, 3])
const setB = new Set([3, 4, 5])
const setC = new Set([5, 6, 7])
const union = setUnion(setA, setB, setC)
// Result: Set { 1, 2, 3, 4, 5, 6, 7 }
```

---

## std.shuffle: shuffle() function

Shuffles an array in place using the Fisher-Yates algorithm.

This function randomly reorders the elements of an array, modifying the original array. Each permutation is equally likely.

**Signature:**```typescript
shuffle: <T>(array: T[]) => T[]
```## std.shuffle: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| array | T\[\] | The array to shuffle (modified in place) |


**Returns:**

T\[\]

The same array reference (for chaining)

## std.shuffle: Example```typescript
const deck = ['A', 'K', 'Q', 'J', '10', '9', '8', '7']
shuffle(deck) // deck is now randomly ordered

const playlist = [...songs]
shuffle(playlist) // Randomize playlist order
```

---

## std.shuffled: shuffled() function

Returns a shuffled copy of an array without modifying the original.

This function creates a new array with the same elements as the input but in random order, leaving the original array unchanged.

**Signature:**```typescript
shuffled: <T>(array: readonly T[]) => T[]
```## std.shuffled: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| array | readonly T\[\] | The array to shuffle |


**Returns:**

T\[\]

A new shuffled array

## std.shuffled: Example```typescript
const original = [1, 2, 3, 4, 5]
const shuffled = shuffled(original) // e.g., [3, 1, 5, 2, 4]
// original is still [1, 2, 3, 4, 5]
```

---

## std.skip: skip() function

Skips the first n elements and returns an iterable of the remaining elements.

This function creates a new iterable that yields all elements after skipping the specified number of initial elements.

**Signature:**```typescript
skip: <T>(iterable: Iterable<T>, count: number) => Iterable<T>
```## std.skip: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| iterable | Iterable&lt;T&gt; | The iterable to skip elements from |
| count | number | The number of elements to skip |


**Returns:**

Iterable&lt;T&gt;

An iterable that yields remaining elements

## std.skip: Example```typescript
const numbers = [1, 2, 3, 4, 5]
const afterFirst2 = [...skip(numbers, 2)] // [3, 4, 5]

// Use with other iterator functions
const result = take(skip(largeDataset, 100), 10) // Skip 100, take next 10
```

---

## std.sleep: sleep() function

Sleep for a given number of milliseconds.

**Signature:**```typescript
sleep: (ms: number, input?: {
    abortSignal?: AbortSignal;
}) => Promise<void>
```## std.sleep: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| ms | number | The number of milliseconds to sleep. |
| { abortSignal } | (not declared) | _(Optional)_ |
| input | { abortSignal?: AbortSignal; } | _(Optional)_ |


**Returns:**

Promise&lt;void&gt;

A promise that resolves after the given number of milliseconds.

---

## std.smartquote: smartQuote() function

Converts a string in a quoted string.

**Signature:**```typescript
smartQuote: (s: string, prefer?: string) => string
```## std.smartquote: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to quote. |
| prefer | string | _(Optional)_ The preferred quote character. Defaults to single quote (`'`). |


**Returns:**

string

The quoted string.

---

## std.snaptogrid: snapToGrid() function

Snaps a value to the nearest multiple of `gridSize`.

**Signature:**```typescript
snapToGrid: (value: number, gridSize: number) => number
```## std.snaptogrid: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | number | The value to snap. |
| gridSize | number | The grid increment to snap to. |


**Returns:**

number

The snapped value.

## std.snaptogrid: Example```ts
snapToGrid(7, 5) // returns 5
snapToGrid(8, 5) // returns 10
snapToGrid(2.3, 0.5) // returns 2.5
```

---

## std.some: some() function

Tests whether at least one element in an iterable satisfies the predicate.

This function returns true if the predicate returns true for any element, or false if no elements satisfy the predicate. It short-circuits on the first true result.

**Signature:**```typescript
some: <T>(iterable: Iterable<T>, predicate: (item: T) => boolean) => boolean
```## std.some: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| iterable | Iterable&lt;T&gt; | The iterable to test |
| predicate | (item: T) =&gt; boolean | Function that tests each element |


**Returns:**

boolean

true if any element satisfies the predicate, false otherwise

## std.some: Example```typescript
const numbers = [1, 3, 5, 8, 9]
const hasEven = some(numbers, n => n % 2 === 0) // true

const users = [{ age: 15 }, { age: 16 }, { age: 17 }]
const hasAdult = some(users, user => user.age >= 18) // false
```

---

## std.splitcomplementary: splitComplementary() function

Returns a split-complementary color scheme consisting of the original color and two colors adjacent to its complement at 150 and 210 degree offsets.

**Signature:**```typescript
splitComplementary: (c: Color) => [Color, Color, Color]
```## std.splitcomplementary: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | Any color value |


**Returns:**

\[[Color](#std-color), [Color](#std-color), [Color](#std-color)\]

A triple of \[original, +150, +210\] in the same color space as the input

## std.splitcomplementary: Example```ts
const red = rgba(1, 0, 0, 1)
const [base, left, right] = splitComplementary(red)
```

---

## std.splitliteral: SplitLiteral type

Splits a string literal type `T` by a specified delimiter `SplitBy`. Returns a tuple containing the split parts of the string.

**Signature:**```typescript
export type SplitLiteral<T extends string, SplitBy extends string> = FilterTuple<T extends `${infer A}${SplitBy}${infer B}` ? [...SplitLiteral<A, SplitBy>, ...SplitLiteral<B, SplitBy>] : [T], ''>;
```
**References:** [FilterTuple](#std-filtertuple), [SplitLiteral](#std-splitliteral)

---

## std.splitliteraltounion: SplitLiteralToUnion type

Converts a string literal type `T` into a union type by splitting it using the specified delimiter `SplitBy`.

**Signature:**```typescript
export type SplitLiteralToUnion<T extends string, SplitBy extends string> = TupleToUnion<SplitLiteral<T, SplitBy>>;
```
**References:** [TupleToUnion](#std-tupletounion), [SplitLiteral](#std-splitliteral)

---

## std.splitstringonce: splitStringOnce() function

It only splits on the first occurrance of separator.

**Signature:**```typescript
splitStringOnce: (s: string, separator: string) => [string] | [string, string]
```## std.splitstringonce: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to split. |
| separator | string | The separator to split the string on. |


**Returns:**

\[string\] \| \[string, string\]

An array with the split string.

---

## std.splitstringonfirst: splitStringOnFirst() function

Splits a string into two parts based on the first occurrence of a specified substring. If the substring is found, returns an array with two elements: the part of the string before the substring and the part after the substring. If the substring is not found, returns an array with a single element: the original string.

**Signature:**```typescript
splitStringOnFirst: (s: string, find: string) => [string] | [string, string]
```## std.splitstringonfirst: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to split. |
| find | string | The substring to search for. |


**Returns:**

\[string\] \| \[string, string\]

An array containing the split parts of the string.

---

## std.splitstringonlast: splitStringOnLast() function

Splits a string into two parts at the last occurrence of a specified substring. If the substring is found, the function returns an array with two elements: the part of the string before the substring and the part after the substring. If the substring is not found, the function returns an array with a single element, which is the original string.

**Signature:**```typescript
splitStringOnLast: (s: string, find: string) => [string] | [string, string]
```## std.splitstringonlast: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to split. |
| find | string | The substring to search for. |


**Returns:**

\[string\] \| \[string, string\]

An array containing the split parts of the string.

---

## std.startofday: startOfDay() function

Returns a new Date representing the start of the day (00:00:00.000).

This is useful for date comparisons and range queries where you need to normalize dates to the beginning of the day.

**Signature:**```typescript
startOfDay: (date: Date) => Date
```## std.startofday: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| date | Date | The input date |


**Returns:**

Date

A new Date set to the start of the day

## std.startofday: Example```typescript
const date = new Date('2023-01-15T14:30:45.123')
const start = startOfDay(date)
// Result: 2023-01-15T00:00:00.000
```

---

## std.startofweek: startOfWeek() function

Returns a new Date representing the start of the week (Monday 00:00:00.000).

This follows the ISO 8601 standard where Monday is the first day of the week. Useful for weekly reports and date grouping.

**Signature:**```typescript
startOfWeek: (date: Date) => Date
```## std.startofweek: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| date | Date | The input date |


**Returns:**

Date

A new Date set to the start of the week

## std.startofweek: Example```typescript
const date = new Date('2023-01-18') // Wednesday
const start = startOfWeek(date)
// Result: 2023-01-16T00:00:00.000 (Monday)
```

---

## std.strictequal: strictEqual() function

Checks if two values are strictly equal.

**Signature:**```typescript
strictEqual: <A>(a: A, b: A) => boolean
```## std.strictequal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | A | The first value to compare. |
| b | A | The second value to compare. |


**Returns:**

boolean

`true` if the values are strictly equal, `false` otherwise.

---

## std.stringendswithany: stringEndsWithAny() function

Returns `true` if `s` ends with any of the values in `values`.

**Signature:**```typescript
stringEndsWithAny: (s: string, values: string[]) => boolean
```## std.stringendswithany: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to compare. |
| values | string\[\] | The values to compare with the end of `s`. |


**Returns:**

boolean

`true` if `s` ends with any of the values in `values`, `false` otherwise.

---

## std.stringhascontent: stringHasContent() function

Returns `true` if `value` is not `null` and contains at least one character.

**Signature:**```typescript
stringHasContent: (value: string) => boolean
```## std.stringhascontent: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to check. |


**Returns:**

boolean

`true` if the string is not `null` and contains at least one character, `false` otherwise.

---

## std.stringhashcode: stringHashCode() function

Calculates the hash code for a given string.

**Signature:**```typescript
stringHashCode: (value: string, seed?: number) => number
```## std.stringhashcode: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to calculate the hash code for. |
| seed | number | _(Optional)_ The seed value for the hash code calculation. Default is 0x811c9dc5. |


**Returns:**

number

The calculated hash code as a number.

---

## std.stringsdifferatindex: stringsDifferAtIndex() function

Compares strings `a` and `b` and returns the position where they differ. If the strings are equal, it returns `-1`.

**Signature:**```typescript
stringsDifferAtIndex: (a: string, b: string) => number
```## std.stringsdifferatindex: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | string | The first string to compare. |
| b | string | The second string to compare. |


**Returns:**

number

The position where the strings differ, or `-1` if they are equal.

## std.stringsdifferatindex: Example```ts
stringsDifferAtIndex('abcdef', 'abc123') // returns 3
```

---

## std.stringstartswithany: stringStartsWithAny() function

Returns `true` if `s` starts with any of the values in `values`.

**Signature:**```typescript
stringStartsWithAny: (s: string, values: string[]) => boolean
```## std.stringstartswithany: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to compare. |
| values | string\[\] | The values to compare with the start of `s`. |


**Returns:**

boolean

`true` if `s` starts with any of the values in `values`, `false` otherwise.

---

## std.stringtocharcodes: stringToCharcodes() function

It transforms a string into an `Array` of char codes in integer format.

**Signature:**```typescript
stringToCharcodes: (s: string) => number[]
```## std.stringtocharcodes: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to transform. |


**Returns:**

number\[\]

An array of char codes.

---

## std.substringafter: substringAfter() function

`substringAfter` searches for the first occurrance of `searchFor` and returns the text after that. If `searchFor` is not found, an empty string is returned.

**Signature:**```typescript
substringAfter: (value: string, searchFor: string) => string
```## std.substringafter: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to search in. |
| searchFor | string | The string to search for. |


**Returns:**

string

The text after the first occurrance of `searchFor` or an empty string if `searchFor` is not found.

---

## std.substringafterlast: substringAfterLast() function

`substringAfterLast` searches for the last occurrance of `searchFor` and returns the text after that. If `searchFor` is not found, an empty string is returned.

**Signature:**```typescript
substringAfterLast: (value: string, searchFor: string) => string
```## std.substringafterlast: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to search in. |
| searchFor | string | The string to search for. |


**Returns:**

string

The text after the last occurrance of `searchFor` or an empty string if `searchFor` is not found.

---

## std.substringbefore: substringBefore() function

`substringBefore` searches for the first occurrance of `searchFor` and returns the text before that. If `searchFor` is not found, an empty string is returned.

**Signature:**```typescript
substringBefore: (value: string, searchFor: string) => string
```## std.substringbefore: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to search in. |
| searchFor | string | The string to search for. |


**Returns:**

string

The text before the first occurrance of `searchFor` or an empty string if `searchFor` is not found.

---

## std.substringbeforelast: substringBeforeLast() function

`substringBeforeLast` searches for the last occurrance of `searchFor` and returns the text before that. If `searchFor` is not found, an empty string is returned.

**Signature:**```typescript
substringBeforeLast: (value: string, searchFor: string) => string
```## std.substringbeforelast: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to search in. |
| searchFor | string | The string to search for. |


**Returns:**

string

The text before the last occurrance of `searchFor` or an empty string if `searchFor` is not found.

---

## std.success: Success type

Represents a successful result.

**Signature:**```typescript
export type Success<V> = {
    readonly type: 'Success';
    readonly value: V;
};
```

---

## std.surroundstring: surroundString() function

Surrounds a string with the contents of `left` and `right`. If `right` is omitted, `left` will be used on both sides

**Signature:**```typescript
surroundString: (s: string, left: string, right?: string) => string
```## std.surroundstring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to surround. |
| left | string | The left side of the surrounding text. |
| right | string | _(Optional)_ The right side of the surrounding text. Defaults to `left`. |


**Returns:**

string

The surrounded string.

---

## std.take: take() function

Takes the first n elements from an iterable.

This function creates a new array containing the first n elements from the iterable. It's useful for limiting results or sampling data.

**Signature:**```typescript
take: <T>(iterable: Iterable<T>, count: number) => T[]
```## std.take: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| iterable | Iterable&lt;T&gt; | The iterable to take elements from |
| count | number | The number of elements to take |


**Returns:**

T\[\]

An array containing the first count elements

## std.take: Example```typescript
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const first3 = take(numbers, 3) // [1, 2, 3]

const firstUsers = take(userGenerator(), 5) // First 5 users from generator
```

---

## std.tetradic: tetradic() function

Returns a tetradic (rectangular) color scheme consisting of the original color and three colors evenly spaced at 90 degree intervals.

**Signature:**```typescript
tetradic: (c: Color) => [Color, Color, Color, Color]
```## std.tetradic: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | Any color value |


**Returns:**

\[[Color](#std-color), [Color](#std-color), [Color](#std-color), [Color](#std-color)\]

A quadruple of \[original, +90, +180, +270\] in the same color space as the input

## std.tetradic: Example```ts
const red = rgba(1, 0, 0, 1)
const [a, b, c, d] = tetradic(red)
```

---

## std.textcontainscaseinsensitive: textContainsCaseInsensitive() function

`textContainsCaseInsensitive` returns `true` if `s` contains one or more occurrences of `test` regardless of the text case.

**Signature:**```typescript
textContainsCaseInsensitive: (s: string, test: string) => boolean
```## std.textcontainscaseinsensitive: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to search in. |
| test | string | The string to search for. |


**Returns:**

boolean

`true` if `s` contains `test` (case-insensitive), `false` otherwise.

---

## std.textendswithanycaseinsensitive: textEndsWithAnyCaseInsensitive() function

Compares a string `s` with many `values` and see if one of them matches its end ignoring their case.

**Signature:**```typescript
textEndsWithAnyCaseInsensitive: (s: string, values: string[]) => boolean
```## std.textendswithanycaseinsensitive: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to compare. |
| values | string\[\] | The values to compare with the end of `s`. |


**Returns:**

boolean

`true` if `s` ends with any of the values in `values` (case-insensitive), `false` otherwise.

---

## std.textendswithcaseinsensitive: textEndsWithCaseInsensitive() function

Checks if a string ends with another string in a case-insensitive manner.

**Signature:**```typescript
textEndsWithCaseInsensitive: (s: string, end: string) => boolean
```## std.textendswithcaseinsensitive: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to check. |
| end | string | The string to check if it is the ending of `s`. |


**Returns:**

boolean

`true` if `s` ends with `end` (case-insensitive), otherwise `false`.

---

## std.textstartswithanycaseinsensitive: textStartsWithAnyCaseInsensitive() function

Compares a string `s` with many `values` and see if one of them matches its beginning ignoring their case.

**Signature:**```typescript
textStartsWithAnyCaseInsensitive: (s: string, values: string[]) => boolean
```## std.textstartswithanycaseinsensitive: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to compare. |
| values | string\[\] | The values to compare with the start of `s`. |


**Returns:**

boolean

`true` if `s` starts with any of the values in `values` (case-insensitive), `false` otherwise.

---

## std.textstartswithcaseinsensitive: textStartsWithCaseInsensitive() function

Checks if a string starts with another string in a case-insensitive manner.

**Signature:**```typescript
textStartsWithCaseInsensitive: (s: string, start: string) => boolean
```## std.textstartswithcaseinsensitive: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to check. |
| start | string | The string to compare with the start of `s`. |


**Returns:**

boolean

`true` if `s` starts with `start` (case-insensitive), `false` otherwise.

---

## std.texttolines: textToLines() function

Returns an array of `string` split by line breaks.

**Signature:**```typescript
textToLines: (s: string) => string[]
```## std.texttolines: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to split. |


**Returns:**

string\[\]

An array of lines.

---

## std.throttle: throttle() function

Creates a throttled version of a function that limits how often the function can be called.

**Signature:**```typescript
export declare function throttle<This, F extends (this: This, ...args: any[]) => any>(delay: number, callback: F, options?: ThrottleOptions): ThrottledFunction<Parameters<F>, This>;
```## std.throttle: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| delay | number | Milliseconds to wait before allowing the next call. |
| callback | F | The function to throttle. |
| options | [ThrottleOptions](#std-throttleoptions) | _(Optional)_ Configuration options for the throttle behavior. |


**Returns:**

[ThrottledFunction](#std-throttledfunction)&lt;Parameters&lt;F&gt;, This&gt;

A throttled version of the function with a cancel method.

## std.throttle: Remarks

Throttling is useful for rate-limiting event handlers, API calls, and other expensive operations. Common delay values are 100-250ms for UI updates and 1000ms+ for API calls.

## std.throttle: Example```ts
// Create a throttled function that executes at most once every second
const throttledScroll = throttle(1000, () => {
  console.warn('Scroll event handled');
});

// Attach to scroll event
window.addEventListener('scroll', throttledScroll);

// Cancel throttle if needed
throttledScroll.cancel();
```

---

## std.throttledfunction.cancel: ThrottledFunction.cancel property

**Signature:**```typescript
cancel: (options?: CancelOptions) => void;
```

---

## std.throttledfunction: ThrottledFunction interface

Represents a throttled function with a cancel method.

**Signature:**```typescript
export interface ThrottledFunction<TArgs extends any[], This = unknown> 
```## std.throttledfunction: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [cancel](#std-throttledfunction-cancel) |  | (options?: [CancelOptions](#std-canceloptions)) =&gt; void |  |

---

## std.throttleoptions.debouncemode: ThrottleOptions.debounceMode property

Controls the throttle behavior: - If true, schedules clearing instead of the callback - If false, schedules the callback - If undefined, applies normal throttle behavior

**Signature:**```typescript
debounceMode?: boolean;
```

---

## std.throttleoptions: ThrottleOptions interface

Configuration options for throttle function.

**Signature:**```typescript
export interface ThrottleOptions 
```## std.throttleoptions: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [debounceMode?](#std-throttleoptions-debouncemode) |  | boolean | _(Optional)_ Controls the throttle behavior: - If true, schedules clearing instead of the callback - If false, schedules the callback - If undefined, applies normal throttle behavior |
| [noLeading?](#std-throttleoptions-noleading) |  | boolean | _(Optional)_ If true, suppresses the immediate call on the first trigger. false |
| [noTrailing?](#std-throttleoptions-notrailing) |  | boolean | _(Optional)_ If true, suppresses the final call after the last trigger. false |

---

## std.throttleoptions.noleading: ThrottleOptions.noLeading property

If true, suppresses the immediate call on the first trigger.  false

**Signature:**```typescript
noLeading?: boolean;
```

---

## std.throttleoptions.notrailing: ThrottleOptions.noTrailing property

If true, suppresses the final call after the last trigger.  false

**Signature:**```typescript
noTrailing?: boolean;
```

---

## std.toarray: toArray() function

Converts an iterable to an array.

This function creates a new array containing all elements from the iterable. It's equivalent to \[...iterable\] but more explicit in intent.

**Signature:**```typescript
toArray: <T>(iterable: Iterable<T>) => T[]
```## std.toarray: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| iterable | Iterable&lt;T&gt; | The iterable to convert |


**Returns:**

T\[\]

A new array containing all elements from the iterable

## std.toarray: Example```typescript
const set = new Set([1, 2, 3, 2, 1])
const array = toArray(set) // [1, 2, 3]

const mapped = map([1, 2, 3], n => n * 2)
const result = toArray(mapped) // [2, 4, 6]
```

---

## std.tohex: toHex() function

Converts a number to its hexadecimal representation.

**Signature:**```typescript
toHex: (num: number, length?: number) => string
```## std.tohex: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| num | number | The number to convert. |
| length | number | _(Optional)_ The desired length of the hexadecimal string. Defaults to 0. |


**Returns:**

string

The hexadecimal representation of the number.

## std.tohex: Example```ts
toHex(255) // returns 'ff'
toHex(255, 4) // returns '00ff'
toHex(255, 8) // returns '000000ff'
```

---

## std.transparentize: transparentize() function

Decreases the opacity (alpha) of a color by the given amount.

No color space conversion is performed — the alpha channel is adjusted directly.

**Signature:**```typescript
transparentize: (c: Color, amount: number) => Color
```## std.transparentize: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | The color to make more transparent. |
| amount | number | A value between 0 and 1 indicating how much to decrease alpha. |


**Returns:**

[Color](#std-color)

The color with decreased opacity, in the same color space.

## std.transparentize: Example```ts
const faded = transparentize(rgb8a(100, 50, 50, 1), 0.3)
// alpha is now 0.7
```

---

## std.triadic: triadic() function

Returns a triadic color scheme consisting of the original color and two colors evenly spaced at 120 degree intervals.

**Signature:**```typescript
triadic: (c: Color) => [Color, Color, Color]
```## std.triadic: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | [Color](#std-color) | Any color value |


**Returns:**

\[[Color](#std-color), [Color](#std-color), [Color](#std-color)\]

A triple of \[original, +120, +240\] in the same color space as the input

## std.triadic: Example```ts
const red = rgba(1, 0, 0, 1)
const [a, b, c] = triadic(red)
```

---

## std.trimchars: trimChars() function

`trimChars` removes from the beginning and the end of the string any character that is present in `charlist`.

**Signature:**```typescript
trimChars: (value: string, charlist: string) => string
```## std.trimchars: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to trim. |
| charlist | string | The characters to remove from the beginning and end of the string. |


**Returns:**

string

The trimmed string.

---

## std.trimcharsleft: trimCharsLeft() function

`trimCharsLeft` removes from the beginning of the string any character that is present in `charlist`.

**Signature:**```typescript
trimCharsLeft: (value: string, charlist: string) => string
```## std.trimcharsleft: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to trim. |
| charlist | string | The characters to remove from the beginning of the string. |


**Returns:**

string

The trimmed string.

---

## std.trimcharsright: trimCharsRight() function

`trimCharsRight` removes from the end of the string any character that is present in `charlist`.

**Signature:**```typescript
trimCharsRight: (value: string, charlist: string) => string
```## std.trimcharsright: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to trim. |
| charlist | string | The characters to remove from the end of the string. |


**Returns:**

string

The trimmed string.

---

## std.trimstringslice: trimStringSlice() function

Removes a slice from `index` to `index + length` from `value`.

**Signature:**```typescript
trimStringSlice: (value: string, index: number, length: number) => string
```## std.trimstringslice: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to remove the slice from. |
| index | number | The starting index of the slice to remove. |
| length | number | The length of the slice to remove. |


**Returns:**

string

The string with the slice removed.

---

## std.tupletounion: TupleToUnion type

Converts a tuple type to a union type.

**Signature:**```typescript
export type TupleToUnion<T extends unknown[]> = T[number];
```

---

## std.underscore: underscore() function

`underscore` finds UpperCase characters and turns them into LowerCase and prepends them with a whtiespace. Sequences of more than one UpperCase character are left untouched.

**Signature:**```typescript
underscore: (s: string) => string
```## std.underscore: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to underscore. |


**Returns:**

string

The underscored string.

---

## std.uniquebyprimitive: uniqueByPrimitive() function

Removes duplicate objects from an array based on a key extraction function.

This function removes duplicates from arrays of objects by extracting a primitive key from each object and using that key to determine uniqueness. When duplicates are found, the first occurrence is kept.

**Signature:**```typescript
uniqueByPrimitive: <T>(values: T[], predicate: (a: T) => string | number | symbol) => T[]
```## std.uniquebyprimitive: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| values | T\[\] | The input array containing objects to deduplicate |
| predicate | (a: T) =&gt; string \\| number \\| symbol | Function that extracts a primitive key from each element for comparison |


**Returns:**

T\[\]

A new array with duplicate elements removed based on the extracted key

## std.uniquebyprimitive: Example 1```typescript
// Remove users with duplicate IDs
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice Clone' },
  { id: 3, name: 'Charlie' }
]
const uniqueUsers = uniqueByPrimitive(users, user => user.id)
// Result: [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Bob' },
//   { id: 3, name: 'Charlie' }
// ]
```

## std.uniquebyprimitive: Example 2


```typescript
// Remove products with duplicate names
const products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Mouse', price: 25 },
  { name: 'Laptop', price: 1200 },
  { name: 'Keyboard', price: 75 }
]
const uniqueProducts = uniqueByPrimitive(products, p => p.name)
// Result: [
//   { name: 'Laptop', price: 1000 },
//   { name: 'Mouse', price: 25 },
//   { name: 'Keyboard', price: 75 }
// ]
```

## std.uniquebyprimitive: Example 3


```typescript
// Use with complex key extraction
const events = [
  { date: '2023-01-01', type: 'click' },
  { date: '2023-01-01', type: 'hover' },
  { date: '2023-01-01', type: 'click' },
  { date: '2023-01-02', type: 'click' }
]
const uniqueEvents = uniqueByPrimitive(events, e => `${e.date}-${e.type}`)
// Result: [
//   { date: '2023-01-01', type: 'click' },
//   { date: '2023-01-01', type: 'hover' },
//   { date: '2023-01-02', type: 'click' }
// ]
```

---

## std.uppercasefirst: upperCaseFirst() function

Convert first letter in `value` to upper case.

**Signature:**```typescript
upperCaseFirst: (value: string) => string
```## std.uppercasefirst: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| value | string | The string to convert. |


**Returns:**

string

The string with the first letter in upper case.

---

## std.valid: Valid type

Represents a valid result.

**Signature:**```typescript
export type Valid = {
    readonly type: 'valid';
};
```

---

## std.validation: Validation variable

Utility functions for working with `Validation` types.

**Signature:**```typescript
Validation: {
    valid: {
        type: "valid";
    };
    invalid<E>(error: E): Validation<E>;
    isValid<E>(r: Validation<E>): r is Valid;
    isInvalid<E>(r: Validation<E>): r is Invalid<E>;
    match: <V, E>(r: Validation<E>, valid: () => V, invalid: (error: E) => V) => V;
    toResult: <T, E>(validation: Validation<E>, value: T) => Result<T, E>;
    effect: <E>(v: Validation<E>, handlers: {
        valid?: () => void;
        invalid?: (error: E) => void;
        else?: () => void;
    }) => Validation<E>;
    whenValid: <E>(r: Validation<E>, apply: () => void) => Validation<E>;
    whenInvalid: <E>(r: Validation<E>, apply: (e: E) => void) => Validation<E>;
    mapError: <E, F>(v: Validation<E>, f: (error: E) => F) => Validation<F>;
    flatMapError: <E, F>(v: Validation<E>, f: (error: E) => Validation<F>) => Validation<F>;
    combine: <E>(v1: Validation<E>, v2: Validation<E>, combineErrors: (e1: E, e2: E) => E) => Validation<E>;
    all: <E>(validations: Validation<E>[]) => Validation<E>;
    allErrors: <E>(validations: Validation<E>[]) => Validation<E[]>;
    equals: <E>(v1: Validation<E>, v2: Validation<E>, errorEquals?: (e1: E, e2: E) => boolean) => boolean;
    recover: <E>(_v: Validation<E>) => Validation<never>;
    getError: <E>(v: Validation<E>) => E | undefined;
    getErrorOrElse: <E>(v: Validation<E>, defaultError: E) => E;
}
```

---

## std.widestangledifference: widestAngleDifference() function

Calculates the minimum difference between two angles in degrees. Note: Despite the name "widest", this function actually calculates the shortest angle difference, identical to `angleDifference`. The name is misleading for historical reasons.

**Signature:**```typescript
widestAngleDifference: (a: number, b: number, turn?: number) => number
```## std.widestangledifference: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | number | The first angle in degrees. |
| b | number | The second angle in degrees. |
| turn | number | _(Optional)_ The total angle of a full turn. Defaults to 360 degrees. |


**Returns:**

number

The shortest angle difference between `a` and `b`.

## std.widestangledifference: Example```ts
widestAngleDifference(0, 90) // returns 90 (shortest path)
widestAngleDifference(90, 0) // returns -90 (shortest path)
widestAngleDifference(0, 270) // returns -90 (shortest path, not +270)
widestAngleDifference(270, 0) // returns 90 (shortest path, not -270)
```

---

## std.withalpha: withAlpha() function

Creates a new color with the alpha channel set to the given value.

This is a shortcut for `withColor(c, { alpha })`.

**Signature:**```typescript
withAlpha: <C extends Color>(c: C, alpha: number) => C
```## std.withalpha: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | C | The source color. |
| alpha | number | The new alpha value (0–1). |


**Returns:**

C

A new color with the updated alpha.

## std.withalpha: Example```ts
withAlpha(rgb8a(255, 0, 0), 0.5) // rgb8a(255, 0, 0, 0.5)
withAlpha(hsla(120, 100, 50), 0) // hsla(120, 100, 50, 0)
```

---

## std.withcolor: withColor() function

Creates a new color with one or more channels replaced, applying clamping and hue wrapping via the color's constructor.

Returns the same color type as the input.

**Signature:**```typescript
withColor: <C extends Color>(c: C, changes: Partial<Omit<C, "space">>) => C
```## std.withcolor: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| c | C | The source color. |
| changes | Partial&lt;Omit&lt;C, "space"&gt;&gt; | An object with the channels to change. |


**Returns:**

C

A new color with the changes applied.

## std.withcolor: Example```ts
withColor(rgb8a(255, 0, 0), { g: 255 })
// rgb8a(255, 255, 0)

withColor(hsla(0, 100, 50), { h: 120 })
// hsla(120, 100, 50)
```

---

## std.wrap: wrap() function

Passed two boundaries values (`min`, `max`), `wrap` ensures that the passed value `v` will be included in the boundaries. If the value exceeds `max`, the value is reduced by `min` repeatedely until it falls within the range. Similar and inverted treatment is performed if the value is below `min`.

**Signature:**```typescript
wrap: (v: number, min: number, max: number) => number
```## std.wrap: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| v | number | The value to wrap. |
| min | number | The minimum value of the range. |
| max | number | The maximum value of the range. |


**Returns:**

number

The wrapped value.

## std.wrap: Example```ts
wrap(5, 0, 10) // returns 5
wrap(15, 0, 10) // returns 5
wrap(-5, 0, 10) // returns 5
```

---

## std.wrapcircular: wrapCircular() function

Similar to `wrap`, it works for numbers between 0 and `max`.

**Signature:**```typescript
wrapCircular: (v: number, max: number) => number
```## std.wrapcircular: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| v | number | The value to wrap. |
| max | number | The maximum value of the range. |


**Returns:**

number

The wrapped value.

## std.wrapcircular: Example```ts
wrapCircular(5, 10) // returns 5
wrapCircular(15, 10) // returns 5
wrapCircular(-5, 10) // returns 5
```

---

## std.wrapcolumns: wrapColumns() function

`wrapColumns` splits a long string into lines that are at most `columns` long. Individual words whose length exceeds `columns` are not split.

**Signature:**```typescript
wrapColumns: (s: string, columns?: number, indent?: string, newline?: string) => string
```## std.wrapcolumns: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to wrap. |
| columns | number | _(Optional)_ The number of columns per line. |
| indent | string | _(Optional)_ The indentation string to prepend to each line. |
| newline | string | _(Optional)_ The newline character to use for line breaks. |


**Returns:**

string

The wrapped string.

---

## std.wrapline: wrapLine() function

Wraps a string into multiple lines based on the specified number of columns, indentation, and newline character.

**Signature:**```typescript
wrapLine: (s: string, columns: number, indent: string, newline: string) => string
```## std.wrapline: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| s | string | The string to wrap. |
| columns | number | The number of columns per line. |
| indent | string | The indentation string to prepend to each line. |
| newline | string | The newline character to use for line breaks. |


**Returns:**

string

The wrapped string.

---

## std.xorboolean: xorBoolean() function

Returns `true` when arguments are different.

**Signature:**```typescript
xorBoolean: (a: boolean, b: boolean) => boolean
```## std.xorboolean: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | boolean | The first boolean value. |
| b | boolean | The second boolean value. |


**Returns:**

boolean

The result of the XOR operation.

---

# tempots-ui api index

[Home](#tempots-ui-api-index)

## tempots-ui: API Reference

## tempots-ui: Packages


| Package | Description |
| --- | --- |
| [@tempots/ui](#ui) |  |

---

## ui.allplacements: allPlacements variable

Represents all possible placements for a pop-over.

**Signature:**```typescript
allPlacements: Placement[]
```

---

## ui.anchor: Anchor() function

Creates an anchor element with the specified href and children. When the anchor element is clicked, the location is updated to the specified href.

**Signature:**```typescript
Anchor: (hrefOrOptions: HrefOrAnchorOptions, ...children: TNode[]) => Renderable
```## ui.anchor: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| hrefOrOptions | [HrefOrAnchorOptions](#ui-hreforanchoroptions) | The href attribute of the anchor element. |
| children | TNode\[\] | The child elements of the anchor element. |


**Returns:**

Renderable

The anchor element.

---

## ui.anchoroptions: AnchorOptions type

Options for configuring an anchor element.

**Signature:**```typescript
export type AnchorOptions = Merge<{
    href: Value<string>;
} & NavigationOptions, HandleAnchorClickOptions>;
```
**References:** [NavigationOptions](#ui-navigationoptions), [HandleAnchorClickOptions](#ui-handleanchorclickoptions)

---

## ui.appearance: Appearance variable

A provider that provides a child component with an appearance context, which can be used to determine the current appearance (light or dark) based on the user's system preferences.

The appearance context is updated whenever the user's system preferences change, and the component is cleaned up when it is no longer needed.

**Signature:**```typescript
Appearance: Provider<Signal<AppearanceType>>
```

---

## ui.appearancetype: AppearanceType type

Defines the possible appearance types for the application.

**Signature:**```typescript
export type AppearanceType = 'light' | 'dark';
```

---

## ui.arelocationsequal: areLocationsEqual() function

Compares two location objects and returns true if they are equal, false otherwise.

**Signature:**```typescript
areLocationsEqual: (a: LocationData, b: LocationData) => boolean
```## ui.arelocationsequal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| a | [LocationData](#ui-locationdata) | The first location object to compare. |
| b | [LocationData](#ui-locationdata) | The second location object to compare. |


**Returns:**

boolean

True if the location objects are equal, false otherwise.

---

## ui.asyncresultview: AsyncResultView() function

Renders the view based on the result of an asynchronous operation.

**Signature:**```typescript
AsyncResultView: <T, E>(result: Value<AsyncResult<T, E>>, options: AsyncResultViewOptions<T, E> | ((value: Signal<T>) => TNode)) => Renderable
```## ui.asyncresultview: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| result | Value&lt;AsyncResult&lt;T, E&gt;&gt; | The result of the asynchronous operation. |
| options | [AsyncResultViewOptions](#ui-asyncresultviewoptions)&lt;T, E&gt; \\| ((value: Signal&lt;T&gt;) =&gt; TNode) | The options object or a function that returns a TNode. |


**Returns:**

Renderable

The rendered view.

---

## ui.asyncresultviewoptions: AsyncResultViewOptions type

Represents the options for rendering an asynchronous result view.

**Signature:**```typescript
export type AsyncResultViewOptions<T, E> = {
    success: (value: Signal<T>) => TNode;
    failure?: (error: Signal<E>) => TNode;
    notAsked?: () => TNode;
    loading?: (previousValue: Signal<T | undefined>) => TNode;
};
```

---

## ui.autofocus: AutoFocus() function

Automatically focuses an element when it's rendered to the DOM.

This utility is commonly used for form inputs, modals, or any interactive element that should receive focus immediately when it appears. The small default delay ensures the element is fully rendered before attempting to focus.

**Signature:**```typescript
AutoFocus: (delay?: number) => Renderable
```## ui.autofocus: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| delay | number | _(Optional)_ Delay in milliseconds before focusing (default: 10ms) |


**Returns:**

Renderable

A renderable that focuses the element when rendered

## ui.autofocus: Example 1```typescript
// Auto-focus a text input
html.input(
  AutoFocus(),
  attr.placeholder('Enter your name'),
  attr.type('text')
)
```

## ui.autofocus: Example 2


```typescript
// Auto-focus with custom delay
html.textarea(
  AutoFocus(100), // Wait 100ms before focusing
  attr.placeholder('Enter your message')
)
```

## ui.autofocus: Example 3


```typescript
// Use in a modal dialog
const showModal = prop(false)

When(showModal,
  () => html.div(
    attr.class('modal'),
    html.input(
      AutoFocus(), // Focus when modal opens
      attr.placeholder('Search...')
    ),
    html.button(
      on.click(() => showModal.value = false),
      'Close'
    )
  )
)
```

## ui.autofocus: Example 4


```typescript
// Combine with other input enhancements
html.input(
  AutoFocus(),
  AutoSelect(), // Also select the text
  attr.value(searchTerm),
  on.input(emitValue(value => searchTerm.value = value))
)
```

---

## ui.autoselect: AutoSelect() function

Automatically selects all text content in an input element when it's rendered.

This utility is particularly useful for input fields where you want the user to be able to immediately start typing to replace the existing content, or easily copy the current value. The small default delay ensures the element is fully rendered before attempting to select.

**Signature:**```typescript
AutoSelect: (delay?: number) => Renderable
```## ui.autoselect: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| delay | number | _(Optional)_ Delay in milliseconds before selecting text (default: 10ms) |


**Returns:**

Renderable

A renderable that selects all text in the input element when rendered

## ui.autoselect: Example 1```typescript
// Auto-select text in an input
const username = prop('john_doe')

html.input(
  AutoSelect(),
  attr.value(username),
  attr.type('text')
)
// When rendered, 'john_doe' will be automatically selected
```

## ui.autoselect: Example 2


```typescript
// Combine with AutoFocus for complete UX
html.input(
  AutoFocus(),   // Focus the input
  AutoSelect(),  // Select all text
  attr.value(editableValue),
  attr.placeholder('Enter value')
)
```

## ui.autoselect: Example 3


```typescript
// Use in an edit dialog
const editMode = prop(false)
const itemName = prop('Default Name')

When(editMode,
  () => html.div(
    html.label('Edit name:'),
    html.input(
      AutoFocus(),
      AutoSelect(), // Select existing name for easy editing
      attr.value(itemName),
      on.keydown(e => {
        if (e.key === 'Enter') editMode.value = false
        if (e.key === 'Escape') editMode.value = false
      })
    )
  )
)
```

## ui.autoselect: Example 4


```typescript
// Custom delay for specific timing needs
html.input(
  AutoSelect(50), // Wait 50ms before selecting
  attr.value(sensitiveData)
)
```

---

## ui.childrouter: ChildRouter() function

Creates a nested router that matches against the remaining path from parent routers.

ChildRouter is used for nested routing scenarios where a parent router (RootRouter or another ChildRouter) has matched a portion of the path and passed the remaining path to child components. ChildRouter reads the parent routing context and matches its routes against the remaining path.

**Signature:**```typescript
ChildRouter: <T extends { [K in keyof T]: (info: K extends string ? Signal<RouteInfo<MakeParams<ExtractParams<K>>, K>> : never) => TNode; }>(routes: T) => Renderable
```## ui.childrouter: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| routes | T | Object mapping route patterns to handler functions |


**Returns:**

Renderable

A renderable router component that handles nested URL routing

## ui.childrouter: Exceptions

{Error} When no matching route is found for the remaining path

## ui.childrouter: Example 1```typescript
// Parent RootRouter passes remaining path to AdminRoutes
const App = RootRouter({
  '/admin/*': () => AdminRoutes(),
  '/blog/*': () => BlogRoutes()
})

// ChildRouter matches against remaining path
const AdminRoutes = ChildRouter({
  '/users': () => html.div('User List'),
  '/users/:id': (info) => html.div('User: ', info.$.params.$.id),
  '/settings': () => html.div('Admin Settings'),
  '*': () => html.div('Admin 404')
})
```

## ui.childrouter: Example 2


```typescript
// Multiple levels of nesting
const BlogRoutes = ChildRouter({
  '/posts/*': () => PostRoutes(),
  '/categories': () => html.div('Categories')
})

const PostRoutes = ChildRouter({
  '/': () => html.div('All Posts'),
  '/:id': (info) => html.div('Post: ', info.$.params.$.id),
  '/:id/comments': (info) => html.div('Comments for: ', info.$.params.$.id)
})
```

---

## ui.classes: classes() function

Creates a renderable that applies classes based on a record of boolean signals.

**Signature:**```typescript
export declare function classes(obj: Record<string, Value<boolean>>): import('@tempots/core').Renderable<import('@tempots/dom').DOMContext, typeof import('@tempots/dom').DOM_RENDERABLE_TYPE>;
```## ui.classes: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| obj | Record&lt;string, Value&lt;boolean&gt;&gt; | The record of signals. |


**Returns:**

import('@tempots/core').Renderable&lt;import('@tempots/dom').DOMContext, typeof import('@tempots/dom').DOM\_RENDERABLE\_TYPE&gt;

The created renderable.

---

## ui.elementrect: ElementRect() function

Creates a renderable function that monitors the size of an element and provides it as a signal.

**Signature:**```typescript
ElementRect: (fn: (rect: Signal<Rect>) => TNode) => import('@tempots/dom').Renderable
```## ui.elementrect: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (rect: Signal&lt;[Rect](#ui-rect)&gt;) =&gt; TNode | The renderable function that receives the size signal and returns a TNode. |


**Returns:**

import('@tempots/dom').Renderable

A function that takes a DOMContext and returns a renderable function.

---

## ui.evaluatelocationmatch: evaluateLocationMatch() function

**Signature:**```typescript
evaluateLocationMatch: (location: LocationData, matcher: string | RegExp | ((location: LocationData) => boolean), options: LocationMatchOptions | undefined) => boolean
```## ui.evaluatelocationmatch: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| location | [LocationData](#ui-locationdata) |  |
| matcher | string \\| RegExp \\| ((location: [LocationData](#ui-locationdata)) =&gt; boolean) |  |
| options | [LocationMatchOptions](#ui-locationmatchoptions) \\| undefined |  |


**Returns:**

boolean

---

## ui.extractparams: ExtractParams type

Extracts the parameters from a string literal representing a route path.

**Signature:**```typescript
export type ExtractParams<S extends string> = SplitLiteral<S, '/'> extends infer T ? T extends unknown[] ? ExtractParamsFromTuple<T> : never : never;
```
**References:** [ExtractParamsFromTuple](#ui-extractparamsfromtuple)

---

## ui.extractparamsfromtuple: ExtractParamsFromTuple type

Extracts the parameter names from a tuple type.

**Signature:**```typescript
export type ExtractParamsFromTuple<S extends unknown[]> = S extends [] ? [] : S extends [infer H, ...infer R] ? H extends `:${infer P}` ? [P, ...ExtractParamsFromTuple<R>] : H extends `*${infer C}` ? C extends '' ? ExtractParamsFromTuple<R> : [C, ...ExtractParamsFromTuple<R>] : ExtractParamsFromTuple<R> : never;
```
**References:** [ExtractParamsFromTuple](#ui-extractparamsfromtuple)

---

## ui.getabsoluterect: getAbsoluteRect() function

Gets the absolute rectangle of an element relative to the document.

This function calculates the element's position relative to the entire document (including scroll offset), rather than just the viewport. It combines the element's bounding client rectangle with the current scroll position to provide absolute coordinates.

**Signature:**```typescript
export declare function getAbsoluteRect(el: HTMLElement): Rect;
```## ui.getabsoluterect: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| el | HTMLElement | The DOM element to get the absolute rectangle for |


**Returns:**

[Rect](#ui-rect)

A Rect instance representing the element's absolute position and size

## ui.getabsoluterect: Example```typescript
const element = document.getElementById('myElement');
const absoluteRect = getAbsoluteRect(element);

console.log(absoluteRect.left);   // Absolute x position in document
console.log(absoluteRect.top);    // Absolute y position in document
console.log(absoluteRect.width);  // Element width
console.log(absoluteRect.height); // Element height
```

---

## ui.handleanchorclick: handleAnchorClick() function

Handles anchor click events, optionally checking for external URLs and file extensions.

**Signature:**```typescript
handleAnchorClick: (callback: () => boolean, options?: HandleAnchorClickOptions) => (e: MouseEvent) => void
```## ui.handleanchorclick: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| callback | () =&gt; boolean | A function that is called when the anchor click should be handled. The function should return a boolean indicating whether the default anchor click behavior should be prevented. |
| options | [HandleAnchorClickOptions](#ui-handleanchorclickoptions) | _(Optional)_ An optional object of type `HandleAnchorClickOptions`. |


**Returns:**

(e: MouseEvent) =&gt; void

A function that handles the anchor click event, calling the provided callback and preventing the default behavior if the callback returns `true`.

---

## ui.handleanchorclickoptions: HandleAnchorClickOptions type

Options for handling anchor click events.

**Signature:**```typescript
export type HandleAnchorClickOptions = Merge<{
    ignoreUrlWithExtension?: true;
    allowedExtensions?: string[];
} | {
    ignoreUrlWithExtension: false;
}, {
    ignoreExternalUrl?: boolean;
}>;
```

---

## ui.hiddenwhenempty: HiddenWhenEmpty variable

Hides the element when it is empty and restores its initial state when necessary.

**Signature:**```typescript
HiddenWhenEmpty: Renderable
```

---

## ui.hreforanchoroptions: HrefOrAnchorOptions type

Represents either a string value (or Signal of string) for the href, or a full AnchorOptions object.

This type is used as the first parameter of the Anchor function, allowing for flexible configuration of anchor elements.

**Signature:**```typescript
export type HrefOrAnchorOptions = Value<string> | AnchorOptions;
```
**References:** [AnchorOptions](#ui-anchoroptions)

---

## ui.htmltitle: HTMLTitle() function

Creates an HTML title element with the specified title.

**Signature:**```typescript
HTMLTitle: (title: Value<string>) => import('@tempots/dom').Renderable
```## ui.htmltitle: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| title | Value&lt;string&gt; | The title to be set for the HTML title element. |


**Returns:**

import('@tempots/dom').Renderable

The created HTML title element.

---

## ui.inviewport: InViewport() function

Creates a component that tracks whether an element is visible in the viewport.

This component uses the Intersection Observer API to efficiently detect when an element enters or exits the viewport. It's perfect for implementing lazy loading, infinite scrolling, animations on scroll, and other viewport-based interactions.

**Signature:**```typescript
InViewport: (input: InViewportOptions, fn: (value: Signal<boolean>) => TNode) => Renderable
```## ui.inviewport: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| { mode, once } | (not declared) |  |
| input | [InViewportOptions](#ui-inviewportoptions) |  |
| fn | (value: Signal&lt;boolean&gt;) =&gt; TNode | Function that receives the visibility signal and returns content to render |


**Returns:**

Renderable

A renderable component that tracks viewport visibility

## ui.inviewport: Example 1```typescript
// Basic viewport detection
InViewport(
  { mode: 'partial' },
  (isVisible) => html.div(
    attr.class(isVisible.map(v => v ? 'visible' : 'hidden')),
    'This element changes class when visible'
  )
)
```

## ui.inviewport: Example 2


```typescript
// Lazy load images
const imageUrl = 'https://example.com/large-image.jpg'

InViewport(
  { mode: 'partial', once: true },
  (isVisible) => isVisible.value
    ? html.img(attr.src(imageUrl), attr.alt('Lazy loaded image'))
    : html.div(attr.class('placeholder'), 'Loading...')
)
```

## ui.inviewport: Example 3


```typescript
// Infinite scrolling trigger
const loadMore = () => {
  // Load more data
  console.log('Loading more items...')
}

html.div(
  ForEach(items, item => ItemComponent(item)),
  InViewport(
    { mode: 'partial' },
    (isVisible) => {
      // Trigger load more when sentinel comes into view
      isVisible.on(visible => {
        if (visible) loadMore()
      })
      return html.div(attr.class('loading-sentinel'), 'Loading more...')
    }
  )
)
```

## ui.inviewport: Example 4


```typescript
// Animation on scroll
InViewport(
  { mode: 'full' }, // Only trigger when fully visible
  (isVisible) => html.div(
    attr.class(isVisible.map(v =>
      v ? 'animate-fade-in' : 'opacity-0'
    )),
    'This animates when fully in view'
  )
)
```

---

## ui.inviewportmode: InViewportMode type

Represents the mode for determining if an element is in the viewport.

- `partial`: Indicates that the element is considered in the viewport if any part of it is visible. - `full`: Indicates that the element is considered in the viewport only if it is fully visible.

**Signature:**```typescript
export type InViewportMode = 'partial' | 'full';
```

---

## ui.inviewportoptions: InViewportOptions type

**Signature:**```typescript
export type InViewportOptions = {
    mode?: InViewportMode;
    once?: boolean;
};
```
**References:** [InViewportMode](#ui-inviewportmode)

---

## ui.keycombo: KeyCombo type

**Signature:**```typescript
export type KeyCombo = {
    key?: string;
    code?: string;
    ctrlKey?: boolean;
    altKey?: boolean;
    shiftKey?: boolean;
    metaKey?: boolean;
    repeat?: boolean;
    commandOrControlKey?: boolean;
};
```

---

## ui.location_2: Location\_2 variable

Provider exposing the LocationHandle for navigation and location state.

**Signature:**```typescript
Location: Provider<LocationHandle>
```

---

## ui.locationdata: LocationData type

Represents the data for a location.

**Signature:**```typescript
export type LocationData = {
    readonly pathname: string;
    readonly search: Record<string, string>;
    readonly hash?: string;
};
```

---

## ui.locationdraft: LocationDraft type

Draft object provided inside `LocationHandle.run` for staged updates.

**Signature:**```typescript
export type LocationDraft = {
    readonly location: LocationData;
    setLocation: (data: LocationData) => LocationDraft;
    setPathname: (pathname: string) => LocationDraft;
    setHash: (hash: string | undefined | null) => LocationDraft;
    clearHash: () => LocationDraft;
    setSearch: (entries: Record<string, string | null | undefined>) => LocationDraft;
    setSearchParam: (key: string, value: string | null | undefined) => LocationDraft;
    updateSearch: (updater: (curr: Record<string, string>) => Record<string, string>) => LocationDraft;
};
```
**References:** [LocationData](#ui-locationdata), [LocationDraft](#ui-locationdraft)

---

## ui.locationfromurl: locationFromURL() function

Converts a URL string into a LocationData object.

**Signature:**```typescript
locationFromURL: (url: string, baseUrl?: string) => LocationData
```## ui.locationfromurl: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| url | string | The URL string to convert. |
| baseUrl | string | _(Optional)_ |


**Returns:**

[LocationData](#ui-locationdata)

The LocationData object representing the URL.

---

## ui.locationhandle: LocationHandle type

A read/write navigation handle exposed by the Location provider.

**Signature:**```typescript
export type LocationHandle = {
    readonly location: Signal<LocationData>;
    readonly url: Signal<string>;
    readonly pathname: Signal<string>;
    readonly search: Signal<Record<string, string>>;
    readonly hash: Signal<string | undefined>;
    setLocation: (data: LocationData, options?: NavigationOptions) => void;
    updateLocation: (updater: (curr: LocationData) => LocationData, options?: NavigationOptions) => void;
    navigate: (url: string, options?: NavigationOptions) => void;
    replace: (url: string, options?: NavigationOptions) => void;
    back: (options?: NavigationOptions) => void;
    forward: (options?: NavigationOptions) => void;
    go: (delta: number, options?: NavigationOptions) => void;
    setPathname: (pathname: string, options?: NavigationOptions) => void;
    setHash: (hash: string | undefined | null, options?: NavigationOptions) => void;
    clearHash: (options?: NavigationOptions) => void;
    setSearch: (entries: Record<string, string | null | undefined>, options?: NavigationOptions) => void;
    setSearchParam: (key: string, value: string | null | undefined, options?: NavigationOptions) => void;
    updateSearch: (updater: (curr: Record<string, string>) => Record<string, string>, options?: NavigationOptions) => void;
    queryParam: (key: string) => Signal<string | undefined>;
    run: (mutate: (draft: LocationDraft) => void, options?: NavigationOptions) => void;
    match: (matcher: string | RegExp | ((location: LocationData) => boolean), options?: LocationMatchOptions) => boolean;
    matchSignal: (matcher: SplitValue<string | RegExp | ((location: LocationData) => boolean)>, options?: LocationMatchOptions) => Signal<boolean>;
};
```
**References:** [LocationData](#ui-locationdata), [NavigationOptions](#ui-navigationoptions), [LocationDraft](#ui-locationdraft), [LocationMatchOptions](#ui-locationmatchoptions)

---

## ui.locationmatchoptions: LocationMatchOptions type

Options that control how `LocationHandle.match` and `matchSignal` interpret URL parts.

**Signature:**```typescript
export type LocationMatchOptions = {
    includeSearch?: boolean;
    includeHash?: boolean;
    ignoreSearchParams?: string[];
};
```

---

## ui.makemutationresource: makeMutationResource() function

**Signature:**```typescript
makeMutationResource: <Req, Res, E>(input: {
    mutate: (options: MutationResourceLoadOptions<Req, Res, E>) => Promise<Res>;
    convertError: (error: unknown) => E;
    onSuccess?: (value: Res, req: Req) => void;
    onError?: (error: E, req: Req) => void;
    onSettled?: (result: AsyncResult<Res, E>, req: Req) => void;
}) => MutationResource<Req, Res, E>
```## ui.makemutationresource: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| { mutate, convertError, onSuccess, onError, onSettled, } | (not declared) |  |
| input | { mutate: (options: [MutationResourceLoadOptions](#ui-mutationresourceloadoptions)&lt;Req, Res, E&gt;) =&gt; Promise&lt;Res&gt;; convertError: (error: unknown) =&gt; E; onSuccess?: (value: Res, req: Req) =&gt; void; onError?: (error: E, req: Req) =&gt; void; onSettled?: (result: AsyncResult&lt;Res, E&gt;, req: Req) =&gt; void; } |  |


**Returns:**

[MutationResource](#ui-mutationresource)&lt;Req, Res, E&gt;

---

## ui.makeparams: MakeParams type

Represents a type that transforms a tuple of strings into an object with string keys. If the input type is a tuple, each element of the tuple will become a key in the resulting object, with the corresponding value being a string. If the input type is not a tuple, the resulting type will be `never`.

**Signature:**```typescript
export type MakeParams<P> = P extends string[] ? {
    [K in TupleToUnion<P>]: string;
} : never;
```

---

## ui.makequeryresource: makeQueryResource() function

Creates an asynchronous query that can be loaded, reloaded, and disposed of.

**Signature:**```typescript
makeQueryResource: <Req, Res, E>(input: {
    request: Value<Req>;
    load: (options: QueryResourceLoadOptions<Req, Res, E>) => Promise<Res>;
    convertError: (error: unknown) => E;
    onSuccess?: (value: Res, req: Req) => void;
    onError?: (error: E, req: Req) => void;
    onSettled?: (result: AsyncResult<Res, E>, req: Req) => void;
}) => QueryResource<Res, E>
```## ui.makequeryresource: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| { request, load, convertError, onSuccess, onError, onSettled, } | (not declared) |  |
| input | { request: Value&lt;Req&gt;; load: (options: [QueryResourceLoadOptions](#ui-queryresourceloadoptions)&lt;Req, Res, E&gt;) =&gt; Promise&lt;Res&gt;; convertError: (error: unknown) =&gt; E; onSuccess?: (value: Res, req: Req) =&gt; void; onError?: (error: E, req: Req) =&gt; void; onSettled?: (result: AsyncResult&lt;Res, E&gt;, req: Req) =&gt; void; } |  |


**Returns:**

[QueryResource](#ui-queryresource)&lt;Res, E&gt;

The created asynchronous query.

---

## ui.matcheskeycombo: matchesKeyCombo() function

**Signature:**```typescript
export declare function matchesKeyCombo(keyCombo: KeyCombo | string, event: KeyboardEvent): boolean;
```## ui.matcheskeycombo: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| keyCombo | [KeyCombo](#ui-keycombo) \\| string |  |
| event | KeyboardEvent |  |


**Returns:**

boolean

---

## ui.matchesroute: matchesRoute() function

Matches a path against a route.

**Signature:**```typescript
matchesRoute: <P extends string>(route: Route, path: P) => MatchResult<P>
```## ui.matchesroute: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| route | [Route](#ui-route) | The route to match against. |
| path | P | The path to match. |


**Returns:**

[MatchResult](#ui-matchresult)&lt;P&gt;

The match result.

---

## ui.matchresult: MatchResult type

The result of a route match.

**Signature:**```typescript
export type MatchResult<P extends string> = {
    params: ExtractParams<P>;
    path: P;
} | null;
```
**References:** [ExtractParams](#ui-extractparams)

---

## ui.matchresultwithroute: MatchResultWithRoute type

The result of a route match with the matched route.

**Signature:**```typescript
export type MatchResultWithRoute<P extends string, R extends string> = {
    params: ExtractParams<P>;
    route: R;
    path: P;
} | null;
```
**References:** [ExtractParams](#ui-extractparams)

---

## ui package

## ui: Classes


| Class | Description |
| --- | --- |
| [Rect](#ui-rect) | Represents a rectangle with position and dimensions. A Rect defines a rectangular area in 2D space with a position (left, top) and dimensions (width, height). It provides convenient methods for accessing computed properties like right, bottom, center, and size. |
| [Ticker](#ui-ticker) | A property that can be used to force an update. Internally, it's a number that is incremented by one on each tick. Extends the Prop class with a number value. It can be used as a counter Signal. |


## ui: Functions


| Function | Description |
| --- | --- |
| [Anchor(hrefOrOptions, children)](#ui-anchor) | Creates an anchor element with the specified href and children. When the anchor element is clicked, the location is updated to the specified href. |
| [areLocationsEqual(a, b)](#ui-arelocationsequal) | Compares two location objects and returns true if they are equal, false otherwise. |
| [AsyncResultView(result, options)](#ui-asyncresultview) | Renders the view based on the result of an asynchronous operation. |
| [AutoFocus(delay)](#ui-autofocus) | Automatically focuses an element when it's rendered to the DOM. This utility is commonly used for form inputs, modals, or any interactive element that should receive focus immediately when it appears. The small default delay ensures the element is fully rendered before attempting to focus. |
| [AutoSelect(delay)](#ui-autoselect) | Automatically selects all text content in an input element when it's rendered. This utility is particularly useful for input fields where you want the user to be able to immediately start typing to replace the existing content, or easily copy the current value. The small default delay ensures the element is fully rendered before attempting to select. |
| [ChildRouter(routes)](#ui-childrouter) | Creates a nested router that matches against the remaining path from parent routers. ChildRouter is used for nested routing scenarios where a parent router (RootRouter or another ChildRouter) has matched a portion of the path and passed the remaining path to child components. ChildRouter reads the parent routing context and matches its routes against the remaining path. |
| [classes(obj)](#ui-classes) | Creates a renderable that applies classes based on a record of boolean signals. |
| [ElementRect(fn)](#ui-elementrect) | Creates a renderable function that monitors the size of an element and provides it as a signal. |
| [evaluateLocationMatch(location, matcher, options)](#ui-evaluatelocationmatch) |  |
| [getAbsoluteRect(el)](#ui-getabsoluterect) | Gets the absolute rectangle of an element relative to the document. This function calculates the element's position relative to the entire document (including scroll offset), rather than just the viewport. It combines the element's bounding client rectangle with the current scroll position to provide absolute coordinates. |
| [handleAnchorClick(callback, options)](#ui-handleanchorclick) | Handles anchor click events, optionally checking for external URLs and file extensions. |
| [HTMLTitle(title)](#ui-htmltitle) | Creates an HTML title element with the specified title. |
| [InViewport({ mode, once }, input, fn)](#ui-inviewport) | Creates a component that tracks whether an element is visible in the viewport. This component uses the Intersection Observer API to efficiently detect when an element enters or exits the viewport. It's perfect for implementing lazy loading, infinite scrolling, animations on scroll, and other viewport-based interactions. |
| [locationFromURL(url, baseUrl)](#ui-locationfromurl) | Converts a URL string into a LocationData object. |
| [makeMutationResource({ mutate, convertError, onSuccess, onError, onSettled, }, input)](#ui-makemutationresource) |  |
| [makeQueryResource({ request, load, convertError, onSuccess, onError, onSettled, }, input)](#ui-makequeryresource) | Creates an asynchronous query that can be loaded, reloaded, and disposed of. |
| [matchesKeyCombo(keyCombo, event)](#ui-matcheskeycombo) |  |
| [matchesRoute(route, path)](#ui-matchesroute) | Matches a path against a route. |
| [Mutation({ mutate, convertError, onSuccess, onError, onSettled, content, }, input)](#ui-mutation) | Creates a reactive mutation component for handling asynchronous write operations. This component provides a declarative way to handle mutations (POST/PUT/PATCH/DELETE) with proper loading, success, and error states. Unlike Query, mutations are triggered explicitly via `execute()` rather than reactively from a request signal. |
| [MutationDisplay(resource, options)](#ui-mutationdisplay) | Component to display an asynchronous mutation based on its current status. |
| [nowSignal(frequency)](#ui-nowsignal) | Creates a signal that automatically updates with the current time at a specified frequency. The signal will clean up its interval when disposed. |
| [OnClickOutside(handler)](#ui-onclickoutside) | Executes a callback function when a click event occurs outside of the parent element. |
| [OnEnterKey(handler)](#ui-onenterkey) |  |
| [OnEscapeKey(handler)](#ui-onescapekey) |  |
| [OnKeyPressed({ allowedKeys, handler, }, input)](#ui-onkeypressed) |  |
| [PopOver(fn, options)](#ui-popover) | Creates a pop-over component. |
| [Query({ request, load, convertError, onSuccess, onError, onSettled, notAsked, success, pending, failure, keepOnReload, }, input)](#ui-query) | Creates a reactive query component for handling asynchronous data loading. This component provides a declarative way to handle async operations with proper loading, success, and error states. It automatically manages the lifecycle of async requests and provides reload functionality. |
| [QueryDisplay(query, options)](#ui-querydisplay) | Component to display an asynchronous query based on its current status. |
| [relativeTime(date, options)](#ui-relativetime) | Creates a signal that computes a human-readable relative time string between a target date and a reference date. |
| [relativeTimeMillisSignal(date, { now, frequency }, input)](#ui-relativetimemillissignal) | Creates a signal that computes the time difference in milliseconds between a target date and a reference date. |
| [relativeTimeSignal(date, options)](#ui-relativetimesignal) | Creates a signal that computes a human-readable relative time string between a target date and a reference date. |
| [ResultView(result, options)](#ui-resultview) | Renders a view based on the result of a computation. |
| [RootRouter(routes)](#ui-rootrouter) | Creates the root router for an application that provides routing context to child components. RootRouter is the top-level router that matches against the full browser pathname and creates the initial routing context. It provides the RouterContextProvider that child ChildRouter components can use for nested routing scenarios. |
| [SelectOnFocus()](#ui-selectonfocus) | Selects the text inside an input element when it receives focus. |
| [ticker(initial)](#ui-ticker) | Creates a new Ticker instance with an optional initial value. |
| [timeDiffToString(diffInMillis)](#ui-timedifftostring) | Converts a time difference in milliseconds to a human-readable relative time string. |
| [urlFromLocation(location)](#ui-urlfromlocation) | Returns the full URL based on the provided location data. |
| [useAppearance()](#ui-useappearance) | Creates a signal that represents the current appearance (light or dark) based on the user's system preferences. The appearance is updated whenever the user's system preferences change, and the signal is cleaned up when it is no longer needed. |
| [WhenInViewport(options, then, otherwise)](#ui-wheninviewport) | Conditionally renders content based on whether an element is in the viewport. This is a convenience wrapper around `InViewport` that provides a simpler API for cases where you just want to show/hide content based on viewport visibility. It's perfect for simple lazy loading or reveal animations. |
| [WindowSize(fn)](#ui-windowsize) | Creates a renderable function that monitors the window size and invokes the provided function with the current size. |


## ui: Interfaces


| Interface | Description |
| --- | --- |
| [MutationContentOptions](#ui-mutationcontentoptions) |  |
| [MutationDisplayOptions](#ui-mutationdisplayoptions) | Options for displaying the different states of an asynchronous resource. |
| [MutationResource](#ui-mutationresource) | A write-side wrapper for async state around POST/PUT/PATCH/DELETE. Mirrors AsyncResource but the action is explicit (execute), not implicit (reload). |
| [MutationResourceExecuteOptions](#ui-mutationresourceexecuteoptions) | Caller-controlled options for execute(). Useful for optimistic UI. |
| [MutationResourceLoadOptions](#ui-mutationresourceloadoptions) | Options passed to the mutate function. |
| [QueryDisplayOptions](#ui-querydisplayoptions) | Options for displaying the different states of an asynchronous query. |
| [QueryResource](#ui-queryresource) | Represents an asynchronous query with its current status, value, error, and loading state. Provides methods to reload the query and dispose of it. |
| [QueryResourceLoadOptions](#ui-queryresourceloadoptions) | Options for loading a query, including the request, abort signal, and previous result. |
| [RouterContext](#ui-routercontext) | Represents the context information for a router level in nested routing. Each router level (AppRouter or SubRouter) creates a RouterContext that contains information about the matched path, remaining path for child routers, and accumulated parameters from all parent router levels. |


## ui: Variables


| Variable | Description |
| --- | --- |
| [allPlacements](#ui-allplacements) | Represents all possible placements for a pop-over. |
| [Appearance](#ui-appearance) | A provider that provides a child component with an appearance context, which can be used to determine the current appearance (light or dark) based on the user's system preferences. The appearance context is updated whenever the user's system preferences change, and the component is cleaned up when it is no longer needed. |
| [HiddenWhenEmpty](#ui-hiddenwhenempty) | Hides the element when it is empty and restores its initial state when necessary. |
| [Location\_2](#ui-location2) | Provider exposing the LocationHandle for navigation and location state. |
| [NavigationService](#ui-navigationservice) |  |
| [RouterContextProvider](#ui-routercontextprovider) | Provider for router context stack in nested routing scenarios. The RouterContextProvider maintains a stack of RouterContext objects, where each level represents a router in the nested hierarchy. Child routers can access the context stack to determine what path remains to be processed and what parameters have been accumulated from parent router levels. |


## ui: Type Aliases


| Type Alias | Description |
| --- | --- |
| [AnchorOptions](#ui-anchoroptions) | Options for configuring an anchor element. |
| [AppearanceType](#ui-appearancetype) | Defines the possible appearance types for the application. |
| [AsyncResultViewOptions](#ui-asyncresultviewoptions) | Represents the options for rendering an asynchronous result view. |
| [ExtractParams](#ui-extractparams) | Extracts the parameters from a string literal representing a route path. |
| [ExtractParamsFromTuple](#ui-extractparamsfromtuple) | Extracts the parameter names from a tuple type. |
| [HandleAnchorClickOptions](#ui-handleanchorclickoptions) | Options for handling anchor click events. |
| [HrefOrAnchorOptions](#ui-hreforanchoroptions) | Represents either a string value (or Signal of string) for the href, or a full AnchorOptions object. This type is used as the first parameter of the Anchor function, allowing for flexible configuration of anchor elements. |
| [InViewportMode](#ui-inviewportmode) | Represents the mode for determining if an element is in the viewport. - `partial`: Indicates that the element is considered in the viewport if any part of it is visible. - `full`: Indicates that the element is considered in the viewport only if it is fully visible. |
| [InViewportOptions](#ui-inviewportoptions) |  |
| [KeyCombo](#ui-keycombo) |  |
| [LocationData](#ui-locationdata) | Represents the data for a location. |
| [LocationDraft](#ui-locationdraft) | Draft object provided inside `LocationHandle.run` for staged updates. |
| [LocationHandle](#ui-locationhandle) | A read/write navigation handle exposed by the Location provider. |
| [LocationMatchOptions](#ui-locationmatchoptions) | Options that control how `LocationHandle.match` and `matchSignal` interpret URL parts. |
| [MakeParams](#ui-makeparams) | Represents a type that transforms a tuple of strings into an object with string keys. If the input type is a tuple, each element of the tuple will become a key in the resulting object, with the corresponding value being a string. If the input type is not a tuple, the resulting type will be `never`. |
| [MatchResult](#ui-matchresult) | The result of a route match. |
| [MatchResultWithRoute](#ui-matchresultwithroute) | The result of a route match with the matched route. |
| [NavigationOptions](#ui-navigationoptions) | Configuration applied when committing a navigation update. |
| [Placement](#ui-placement) | Represents the placement options for a pop-over. |
| [PopOverArrowOptions](#ui-popoverarrowoptions) | Represents the options for the arrow of a pop-over. |
| [PopOverOptions](#ui-popoveroptions) | Represents the properties for a pop-over. |
| [ResultViewOptions](#ui-resultviewoptions) | Represents the signal for a result. |
| [Route](#ui-route) | Represents a route in the application. |
| [RouteCatchAll](#ui-routecatchall) | Represents a catch-all route. |
| [RouteInfo](#ui-routeinfo) | Represents information about a route. |
| [RouteLiteral](#ui-routeliteral) | Represents a literal route. |
| [RouteParam](#ui-routeparam) | Represents a route parameter. |
| [RouteSegment](#ui-routesegment) | Represents a segment of a route. |

---

## ui.mutation: Mutation() function

Creates a reactive mutation component for handling asynchronous write operations.

This component provides a declarative way to handle mutations (POST/PUT/PATCH/DELETE) with proper loading, success, and error states. Unlike Query, mutations are triggered explicitly via `execute()` rather than reactively from a request signal.

**Signature:**```typescript
Mutation: <Req, Res, E = unknown>(input: {
    mutate: (options: MutationResourceLoadOptions<Req, Res, E>) => Promise<Res>;
    convertError?: (error: unknown) => E;
    onSuccess?: (value: Res, req: Req) => void;
    onError?: (error: E, req: Req) => void;
    onSettled?: (result: AsyncResult<Res, E>, req: Req) => void;
} & MutationDisplayOptions<Req, Res, E>) => Renderable
```## ui.mutation: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| { mutate, convertError, onSuccess, onError, onSettled, content, } | (not declared) |  |
| input | { mutate: (options: [MutationResourceLoadOptions](#ui-mutationresourceloadoptions)&lt;Req, Res, E&gt;) =&gt; Promise&lt;Res&gt;; convertError?: (error: unknown) =&gt; E; onSuccess?: (value: Res, req: Req) =&gt; void; onError?: (error: E, req: Req) =&gt; void; onSettled?: (result: AsyncResult&lt;Res, E&gt;, req: Req) =&gt; void; } &amp; [MutationDisplayOptions](#ui-mutationdisplayoptions)&lt;Req, Res, E&gt; |  |


**Returns:**

Renderable

A renderable component

---

## ui.mutationcontentoptions.cancel: MutationContentOptions.cancel property

**Signature:**```typescript
cancel: (newState?: NonLoading<Res, E>) => void;
```

---

## ui.mutationcontentoptions.error: MutationContentOptions.error property

**Signature:**```typescript
error: Signal<E | undefined>;
```

---

## ui.mutationcontentoptions.execute: MutationContentOptions.execute property

**Signature:**```typescript
execute: (request: Req) => void;
```

---

## ui.mutationcontentoptions: MutationContentOptions interface

**Signature:**```typescript
export interface MutationContentOptions<Req, Res, E> 
```## ui.mutationcontentoptions: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [cancel](#ui-mutationcontentoptions-cancel) |  | (newState?: NonLoading&lt;Res, E&gt;) =&gt; void |  |
| [error](#ui-mutationcontentoptions-error) |  | Signal&lt;E \\| undefined&gt; |  |
| [execute](#ui-mutationcontentoptions-execute) |  | (request: Req) =&gt; void |  |
| [pending](#ui-mutationcontentoptions-pending) |  | Signal&lt;boolean&gt; |  |
| [previous](#ui-mutationcontentoptions-previous) |  | Signal&lt;Res \\| undefined&gt; |  |
| [status](#ui-mutationcontentoptions-status) |  | Signal&lt;AsyncResult&lt;Res, E&gt;&gt; |  |
| [value](#ui-mutationcontentoptions-value) |  | Signal&lt;Res \\| undefined&gt; |  |

---

## ui.mutationcontentoptions.pending: MutationContentOptions.pending property

**Signature:**```typescript
pending: Signal<boolean>;
```

---

## ui.mutationcontentoptions.previous: MutationContentOptions.previous property

**Signature:**```typescript
previous: Signal<Res | undefined>;
```

---

## ui.mutationcontentoptions.status: MutationContentOptions.status property

**Signature:**```typescript
status: Signal<AsyncResult<Res, E>>;
```

---

## ui.mutationcontentoptions.value: MutationContentOptions.value property

**Signature:**```typescript
value: Signal<Res | undefined>;
```

---

## ui.mutationdisplay: MutationDisplay() function

Component to display an asynchronous mutation based on its current status.

**Signature:**```typescript
MutationDisplay: <Req, Res, E>(resource: MutationResource<Req, Res, E>, options: MutationDisplayOptions<Req, Res, E>) => Renderable
```## ui.mutationdisplay: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| resource | [MutationResource](#ui-mutationresource)&lt;Req, Res, E&gt; | The asynchronous resource to display. |
| options | [MutationDisplayOptions](#ui-mutationdisplayoptions)&lt;Req, Res, E&gt; | The display options for the resource. |


**Returns:**

Renderable

{Renderable} A node representing the current state of the resource.

---

## ui.mutationdisplayoptions.content: MutationDisplayOptions.content property

Function to render the mutation content.

**Signature:**```typescript
content: (options: MutationContentOptions<Req, Res, E>) => TNode;
```

---

## ui.mutationdisplayoptions: MutationDisplayOptions interface

Options for displaying the different states of an asynchronous resource.

**Signature:**```typescript
export interface MutationDisplayOptions<Req, Res, E> 
```## ui.mutationdisplayoptions: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [content](#ui-mutationdisplayoptions-content) |  | (options: [MutationContentOptions](#ui-mutationcontentoptions)&lt;Req, Res, E&gt;) =&gt; TNode | Function to render the mutation content. |

---

## ui.mutationresource.cancel: MutationResource.cancel property

Abort the current in-flight request (if any) and clean up.

**Signature:**```typescript
readonly cancel: (newState?: NonLoading<Res, E>) => void;
```

---

## ui.mutationresource.dispose: MutationResource.dispose property

Dispose of resources, aborting any in-flight request.

**Signature:**```typescript
readonly dispose: () => void;
```

---

## ui.mutationresource.error: MutationResource.error property

Latest error (if any).

**Signature:**```typescript
readonly error: Signal<E | undefined>;
```

---

## ui.mutationresource.execute: MutationResource.execute property

Execute the mutation.

**Signature:**```typescript
readonly execute: (request: Req, options?: MutationResourceExecuteOptions<Req, Res>) => void;
```

---

## ui.mutationresource: MutationResource interface

A write-side wrapper for async state around POST/PUT/PATCH/DELETE. Mirrors AsyncResource but the action is explicit (execute), not implicit (reload).

**Signature:**```typescript
export interface MutationResource<Req, Res, E> 
```## ui.mutationresource: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [cancel](#ui-mutationresource-cancel) | `readonly` | (newState?: NonLoading&lt;Res, E&gt;) =&gt; void | Abort the current in-flight request (if any) and clean up. |
| [dispose](#ui-mutationresource-dispose) | `readonly` | () =&gt; void | Dispose of resources, aborting any in-flight request. |
| [error](#ui-mutationresource-error) | `readonly` | Signal&lt;E \\| undefined&gt; | Latest error (if any). |
| [execute](#ui-mutationresource-execute) | `readonly` | (request: Req, options?: [MutationResourceExecuteOptions](#ui-mutationresourceexecuteoptions)&lt;Req, Res&gt;) =&gt; void | Execute the mutation. |
| [pending](#ui-mutationresource-pending) | `readonly` | Signal&lt;boolean&gt; | Whether a mutation is currently in flight. |
| [status](#ui-mutationresource-status) | `readonly` | Signal&lt;AsyncResult&lt;Res, E&gt;&gt; | Current async status (Idle \\| Loading \\| Success \\| Failure). |
| [value](#ui-mutationresource-value) | `readonly` | Signal&lt;Res \\| undefined&gt; | Latest successful value (if any). |

---

## ui.mutationresource.pending: MutationResource.pending property

Whether a mutation is currently in flight.

**Signature:**```typescript
readonly pending: Signal<boolean>;
```

---

## ui.mutationresource.status: MutationResource.status property

Current async status (Idle \| Loading \| Success \| Failure).

**Signature:**```typescript
readonly status: Signal<AsyncResult<Res, E>>;
```

---

## ui.mutationresource.value: MutationResource.value property

Latest successful value (if any).

**Signature:**```typescript
readonly value: Signal<Res | undefined>;
```

---

## ui.mutationresourceexecuteoptions: MutationResourceExecuteOptions interface

Caller-controlled options for execute(). Useful for optimistic UI.

**Signature:**```typescript
export interface MutationResourceExecuteOptions<Req, Res> 
```## ui.mutationresourceexecuteoptions: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [optimisticFromRequest?](#ui-mutationresourceexecuteoptions-optimisticfromrequest) | `readonly` | (req: Req) =&gt; Res | _(Optional)_ Optionally derive an optimistic value from the request. Runs only if optimisticValue is not provided. |
| [optimisticValue?](#ui-mutationresourceexecuteoptions-optimisticvalue) | `readonly` | Res | _(Optional)_ Optionally provide an optimistic value to set immediately. This will set status to Loading with value prefilled. |

---

## ui.mutationresourceexecuteoptions.optimisticfromrequest: MutationResourceExecuteOptions.optimisticFromRequest property

Optionally derive an optimistic value from the request. Runs only if optimisticValue is not provided.

**Signature:**```typescript
readonly optimisticFromRequest?: (req: Req) => Res;
```

---

## ui.mutationresourceexecuteoptions.optimisticvalue: MutationResourceExecuteOptions.optimisticValue property

Optionally provide an optimistic value to set immediately. This will set status to Loading with value prefilled.

**Signature:**```typescript
readonly optimisticValue?: Res;
```

---

## ui.mutationresourceloadoptions.abortsignal: MutationResourceLoadOptions.abortSignal property

Abort signal for this execution.

**Signature:**```typescript
readonly abortSignal: AbortSignal;
```

---

## ui.mutationresourceloadoptions.cancel: MutationResourceLoadOptions.cancel property

Abort the current in-flight request and optionally set a new state.

**Signature:**```typescript
readonly cancel: (newState?: NonLoading<Res, E>) => void;
```

---

## ui.mutationresourceloadoptions: MutationResourceLoadOptions interface

Options passed to the mutate function.

**Signature:**```typescript
export interface MutationResourceLoadOptions<Req, Res, E> 
```## ui.mutationresourceloadoptions: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [abortSignal](#ui-mutationresourceloadoptions-abortsignal) | `readonly` | AbortSignal | Abort signal for this execution. |
| [cancel](#ui-mutationresourceloadoptions-cancel) | `readonly` | (newState?: NonLoading&lt;Res, E&gt;) =&gt; void | Abort the current in-flight request and optionally set a new state. |
| [previous](#ui-mutationresourceloadoptions-previous) | `readonly` | AsyncResult&lt;Res, E&gt; | The previous result of the mutation, if any. |
| [request](#ui-mutationresourceloadoptions-request) | `readonly` | Req | The request to execute the mutation. |

---

## ui.mutationresourceloadoptions.previous: MutationResourceLoadOptions.previous property

The previous result of the mutation, if any.

**Signature:**```typescript
readonly previous: AsyncResult<Res, E>;
```

---

## ui.mutationresourceloadoptions.request: MutationResourceLoadOptions.request property

The request to execute the mutation.

**Signature:**```typescript
readonly request: Req;
```

---

## ui.navigationoptions: NavigationOptions type

Configuration applied when committing a navigation update.

**Signature:**```typescript
export type NavigationOptions = {
    state?: unknown;
    scroll?: 'preserve' | 'auto';
    viewTransition?: boolean;
    replace?: boolean;
};
```

---

## ui.navigationservice: NavigationService variable

**Signature:**```typescript
NavigationService: NavigationServiceImpl
```

---

## ui.nowsignal: nowSignal() function

Creates a signal that automatically updates with the current time at a specified frequency. The signal will clean up its interval when disposed.

**Signature:**```typescript
nowSignal: (frequency?: number) => Signal<Date>
```## ui.nowsignal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| frequency | number | _(Optional)_ Milliseconds between updates (defaults to 1000ms/1 second) |


**Returns:**

Signal&lt;Date&gt;

A Value<Date> that updates with the current time at the specified frequency</Date>

---

## ui.onclickoutside: OnClickOutside() function

Executes a callback function when a click event occurs outside of the parent element.

**Signature:**```typescript
export declare function OnClickOutside(handler: (event: MouseEvent) => void): import('@tempots/dom').Renderable;
```## ui.onclickoutside: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| handler | (event: MouseEvent) =&gt; void | The callback function to be executed when a click event occurs outside of the parent element. |


**Returns:**

import('@tempots/dom').Renderable

A renderable function that takes a DOMContext and returns a function that takes a boolean indicating whether to remove the tree.

---

## ui.onenterkey: OnEnterKey() function

**Signature:**```typescript
export declare function OnEnterKey(handler: (event: KeyboardEvent) => void): import('@tempots/dom').Renderable;
```## ui.onenterkey: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| handler | (event: KeyboardEvent) =&gt; void |  |


**Returns:**

import('@tempots/dom').Renderable

---

## ui.onescapekey: OnEscapeKey() function

**Signature:**```typescript
export declare function OnEscapeKey(handler: (event: KeyboardEvent) => void): import('@tempots/dom').Renderable;
```## ui.onescapekey: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| handler | (event: KeyboardEvent) =&gt; void |  |


**Returns:**

import('@tempots/dom').Renderable

---

## ui.onkeypressed: OnKeyPressed() function

**Signature:**```typescript
export declare function OnKeyPressed(input: {
    allowedKeys: (KeyCombo | string)[];
    handler: (event: KeyboardEvent) => void;
}): import('@tempots/dom').Renderable;
```## ui.onkeypressed: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| { allowedKeys, handler, } | (not declared) |  |
| input | { allowedKeys: ([KeyCombo](#ui-keycombo) \\| string)\[\]; handler: (event: KeyboardEvent) =&gt; void; } |  |


**Returns:**

import('@tempots/dom').Renderable

---

## ui.placement: Placement type

Represents the placement options for a pop-over.

**Signature:**```typescript
export type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
```

---

## ui.popover: PopOver() function

Creates a pop-over component.

**Signature:**```typescript
PopOver: (fn: (open: (options: PopOverOptions) => void, close: () => void) => TNode, options?: {
    isOpen: Value<boolean>;
}) => import('@tempots/core').Renderable<import('@tempots/dom').DOMContext, typeof import('@tempots/dom').DOM_RENDERABLE_TYPE>
```## ui.popover: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (open: (options: [PopOverOptions](#ui-popoveroptions)) =&gt; void, close: () =&gt; void) =&gt; TNode | A function that returns the content of the pop-over. |
| options | { isOpen: Value&lt;boolean&gt;; } | _(Optional)_ The options for the pop-over. |


**Returns:**

import('@tempots/core').Renderable&lt;import('@tempots/dom').DOMContext, typeof import('@tempots/dom').DOM\_RENDERABLE\_TYPE&gt;

The pop-over component.

---

## ui.popoverarrowoptions: PopOverArrowOptions type

Represents the options for the arrow of a pop-over.

**Signature:**```typescript
export type PopOverArrowOptions = {
    x?: number;
    y?: number;
    centerOffset: number;
    alignmentOffset?: number;
    placement: Placement;
    containerWidth: number;
    containerHeight: number;
};
```
**References:** [Placement](#ui-placement)

---

## ui.popoveroptions: PopOverOptions type

Represents the properties for a pop-over.

**Signature:**```typescript
export type PopOverOptions = {
    content: TNode;
    placement?: Value<Placement>;
    mainAxisOffset?: Value<number>;
    crossAxisOffset?: Value<number>;
    arrowPadding?: Value<number>;
    arrow?: (signal: Signal<PopOverArrowOptions>) => TNode;
    target?: string | HTMLElement;
    onClickOutside?: () => void;
};
```
**References:** [Placement](#ui-placement), [PopOverArrowOptions](#ui-popoverarrowoptions)

---

## ui.query: Query() function

Creates a reactive query component for handling asynchronous data loading.

This component provides a declarative way to handle async operations with proper loading, success, and error states. It automatically manages the lifecycle of async requests and provides reload functionality.

**Signature:**```typescript
Query: <Req, Res, E = unknown>(input: {
    request: Value<Req>;
    load: (options: QueryResourceLoadOptions<Req, Res, E>) => Promise<Res>;
    convertError?: (error: unknown) => E;
    onSuccess?: (value: Res, req: Req) => void;
    onError?: (error: E, req: Req) => void;
    onSettled?: (result: AsyncResult<Res, E>, req: Req) => void;
} & QueryDisplayOptions<Res, E>) => Renderable
```## ui.query: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| { request, load, convertError, onSuccess, onError, onSettled, notAsked, success, pending, failure, keepOnReload, } | (not declared) |  |
| input | { request: Value&lt;Req&gt;; load: (options: [QueryResourceLoadOptions](#ui-queryresourceloadoptions)&lt;Req, Res, E&gt;) =&gt; Promise&lt;Res&gt;; convertError?: (error: unknown) =&gt; E; onSuccess?: (value: Res, req: Req) =&gt; void; onError?: (error: E, req: Req) =&gt; void; onSettled?: (result: AsyncResult&lt;Res, E&gt;, req: Req) =&gt; void; } &amp; [QueryDisplayOptions](#ui-querydisplayoptions)&lt;Res, E&gt; |  |


**Returns:**

Renderable

A renderable component

## ui.query: Example 1```typescript
// Basic API data loading
const userId = prop(1)

const UserProfile = Query({
  request: userId,
  load: async ({ request }) => {
    const response = await fetch(`/api/users/${request}`)
    if (!response.ok) throw new Error('Failed to load user')
    return response.json()
  },
  pending: () => html.div('Loading user...'),
  failure: ({ error, reload }) => html.div(
    'Error: ', error,
    html.button(on.click(reload), 'Retry')
  ),
  success: ({ value }) => html.div(
    html.h2(value.map(u => u.name)),
    html.p(value.map(u => u.email))
  )
})
```

## ui.query: Example 2


```typescript
// Query with keepOnReload — success view stays mounted during reloads
const searchQuery = prop('')

const SearchResults = Query({
  request: searchQuery,
  keepOnReload: true,
  load: async ({ request, abortSignal }) => {
    const response = await fetch(`/api/search?q=${request}`, {
      signal: abortSignal
    })
    return response.json()
  },
  convertError: (error) => error instanceof Error ? error.message : 'Unknown error',
  pending: () => html.div('Searching...'),
  failure: ({ error, reload }) => html.div(
    attr.class('error'),
    'Search failed: ', error,
    html.button(on.click(reload), 'Try again')
  ),
  success: ({ value, reload, loading }) => html.div(
    html.button(on.click(reload), 'Refresh'),
    loading.map(l => l ? html.div('Refreshing...') : null),
    ForEach(value, result => SearchResultItem(result))
  )
})
```

---

## ui.querydisplay: QueryDisplay() function

Component to display an asynchronous query based on its current status.

**Signature:**```typescript
QueryDisplay: <Res, E>(query: QueryResource<Res, E>, options: QueryDisplayOptions<Res, E>) => Renderable
```## ui.querydisplay: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| query | [QueryResource](#ui-queryresource)&lt;Res, E&gt; | The asynchronous query to display. |
| options | [QueryDisplayOptions](#ui-querydisplayoptions)&lt;Res, E&gt; | The display options for the query. |


**Returns:**

Renderable

{TNode} A node representing the current state of the query.

---

## ui.querydisplayoptions.failure: QueryDisplayOptions.failure property

Function to render when the query has failed to load.

**Signature:**```typescript
failure?: (options: {
        error: Signal<E>;
        reload: () => void;
    }) => TNode;
```

---

## ui.querydisplayoptions.keeponreload: QueryDisplayOptions.keepOnReload property

When true, the success view stays mounted during reloads instead of switching to the pending view. The `loading` signal passed to `success` indicates when a reload is in progress. Only applies when the query was already in a success state before the reload.

**Signature:**```typescript
keepOnReload?: boolean;
```

---

## ui.querydisplayoptions: QueryDisplayOptions interface

Options for displaying the different states of an asynchronous query.

**Signature:**```typescript
export interface QueryDisplayOptions<Res, E> 
```## ui.querydisplayoptions: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [failure?](#ui-querydisplayoptions-failure) |  | (options: { error: Signal&lt;E&gt;; reload: () =&gt; void; }) =&gt; TNode | _(Optional)_ Function to render when the query has failed to load. |
| [keepOnReload?](#ui-querydisplayoptions-keeponreload) |  | boolean | _(Optional)_ When true, the success view stays mounted during reloads instead of switching to the pending view. The `loading` signal passed to `success` indicates when a reload is in progress. Only applies when the query was already in a success state before the reload. |
| [notAsked?](#ui-querydisplayoptions-notasked) |  | () =&gt; TNode | _(Optional)_ Function to render when the query has not been requested yet. |
| [pending?](#ui-querydisplayoptions-pending) |  | (options: { previous: Signal&lt;Res \\| undefined&gt;; reload: () =&gt; void; cancel: (newState?: NonLoading&lt;Res, E&gt;) =&gt; void; }) =&gt; TNode | _(Optional)_ Function to render when the query is loading. |
| [success](#ui-querydisplayoptions-success) |  | (options: { value: Signal&lt;Res&gt;; reload: () =&gt; void; loading: Signal&lt;boolean&gt;; }) =&gt; TNode | Function to render when the query has successfully loaded. |

---

## ui.querydisplayoptions.notasked: QueryDisplayOptions.notAsked property

Function to render when the query has not been requested yet.

**Signature:**```typescript
notAsked?: () => TNode;
```

---

## ui.querydisplayoptions.pending: QueryDisplayOptions.pending property

Function to render when the query is loading.

**Signature:**```typescript
pending?: (options: {
        previous: Signal<Res | undefined>;
        reload: () => void;
        cancel: (newState?: NonLoading<Res, E>) => void;
    }) => TNode;
```

---

## ui.querydisplayoptions.success: QueryDisplayOptions.success property

Function to render when the query has successfully loaded.

**Signature:**```typescript
success: (options: {
        value: Signal<Res>;
        reload: () => void;
        loading: Signal<boolean>;
    }) => TNode;
```

---

## ui.queryresource.cancel: QueryResource.cancel property

Abort the current in-flight request (if any) and clean up.

**Signature:**```typescript
readonly cancel: (newState?: NonLoading<Res, E>) => void;
```

---

## ui.queryresource.dispose: QueryResource.dispose property

Disposes of the query, aborting any ongoing requests and cleaning up.

**Signature:**```typescript
readonly dispose: () => void;
```

---

## ui.queryresource.error: QueryResource.error property

The current error of the query, or undefined if not failed.

**Signature:**```typescript
readonly error: Signal<E | undefined>;
```

---

## ui.queryresource.loading: QueryResource.loading property

Whether the query is currently loading.

**Signature:**```typescript
readonly loading: Signal<boolean>;
```

---

## ui.queryresource: QueryResource interface

Represents an asynchronous query with its current status, value, error, and loading state. Provides methods to reload the query and dispose of it.

**Signature:**```typescript
export interface QueryResource<Res, E> 
```## ui.queryresource: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [cancel](#ui-queryresource-cancel) | `readonly` | (newState?: NonLoading&lt;Res, E&gt;) =&gt; void | Abort the current in-flight request (if any) and clean up. |
| [dispose](#ui-queryresource-dispose) | `readonly` | () =&gt; void | Disposes of the query, aborting any ongoing requests and cleaning up. |
| [error](#ui-queryresource-error) | `readonly` | Signal&lt;E \\| undefined&gt; | The current error of the query, or undefined if not failed. |
| [loading](#ui-queryresource-loading) | `readonly` | Signal&lt;boolean&gt; | Whether the query is currently loading. |
| [reload](#ui-queryresource-reload) | `readonly` | () =&gt; void | Reloads the query using the current request. |
| [status](#ui-queryresource-status) | `readonly` | Signal&lt;AsyncResult&lt;Res, E&gt;&gt; | The current status of the query as an AsyncResult. |
| [value](#ui-queryresource-value) | `readonly` | Signal&lt;Res \\| undefined&gt; | The current value of the query, or undefined if not loaded or failed. |

---

## ui.queryresource.reload: QueryResource.reload property

Reloads the query using the current request.

**Signature:**```typescript
readonly reload: () => void;
```

---

## ui.queryresource.status: QueryResource.status property

The current status of the query as an AsyncResult.

**Signature:**```typescript
readonly status: Signal<AsyncResult<Res, E>>;
```

---

## ui.queryresource.value: QueryResource.value property

The current value of the query, or undefined if not loaded or failed.

**Signature:**```typescript
readonly value: Signal<Res | undefined>;
```

---

## ui.queryresourceloadoptions.abortsignal: QueryResourceLoadOptions.abortSignal property

The signal to abort the loading process if needed.

**Signature:**```typescript
readonly abortSignal: AbortSignal;
```

---

## ui.queryresourceloadoptions.cancel: QueryResourceLoadOptions.cancel property

Abort the current in-flight request and optionally set a new state.

**Signature:**```typescript
readonly cancel: (newState?: NonLoading<Res, E>) => void;
```

---

## ui.queryresourceloadoptions: QueryResourceLoadOptions interface

Options for loading a query, including the request, abort signal, and previous result.

**Signature:**```typescript
export interface QueryResourceLoadOptions<Req, Res, E> 
```## ui.queryresourceloadoptions: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [abortSignal](#ui-queryresourceloadoptions-abortsignal) | `readonly` | AbortSignal | The signal to abort the loading process if needed. |
| [cancel](#ui-queryresourceloadoptions-cancel) | `readonly` | (newState?: NonLoading&lt;Res, E&gt;) =&gt; void | Abort the current in-flight request and optionally set a new state. |
| [previous](#ui-queryresourceloadoptions-previous) | `readonly` | AsyncResult&lt;Res, E&gt; | The previous result of the query loading, if any. |
| [request](#ui-queryresourceloadoptions-request) | `readonly` | Req | The request to load the query. |

---

## ui.queryresourceloadoptions.previous: QueryResourceLoadOptions.previous property

The previous result of the query loading, if any.

**Signature:**```typescript
readonly previous: AsyncResult<Res, E>;
```

---

## ui.queryresourceloadoptions.request: QueryResourceLoadOptions.request property

The request to load the query.

**Signature:**```typescript
readonly request: Req;
```

---

## ui.rect._constructor_: Rect.(constructor)

Creates a new Rect instance.

**Signature:**```typescript
constructor(
    left: number, 
    top: number, 
    width: number, 
    height: number, 
    localLeft: number, 
    localTop: number);
```## ui.rect._constructor_: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| left | number | The x-coordinate of the left edge |
| top | number | The y-coordinate of the top edge |
| width | number | The width of the rectangle |
| height | number | The height of the rectangle |
| localLeft | number |  |
| localTop | number |  |


## ui.rect._constructor_: Example```typescript
const rect = new Rect(10, 20, 100, 50);
console.log(rect.left);   // 10
console.log(rect.top);    // 20
console.log(rect.width);  // 100
console.log(rect.height); // 50
```

---

## ui.rect.bottom: Rect.bottom property

Gets the y-coordinate of the bottom edge of the rectangle.

**Signature:**```typescript
get bottom(): number;
```

## ui.rect.bottom: Example


```typescript
const rect = new Rect(10, 20, 100, 50);
console.log(rect.bottom); // 70
```

---

## ui.rect.center: Rect.center property

Gets the center point of the rectangle.

**Signature:**```typescript
get center(): {
        x: number;
        y: number;
    };
```

## ui.rect.center: Example


```typescript
const rect = new Rect(10, 20, 100, 50);
const center = rect.center;
console.log(center.x); // 60 (left + width/2)
console.log(center.y); // 45 (top + height/2)
```

---

## ui.rect.equals: Rect.equals property

Compares this rectangle with another rectangle for equality.

Uses near-equality comparison for floating-point precision tolerance. Two rectangles are considered equal if all their corresponding properties (left, top, width, height) are nearly equal within a small tolerance.

**Signature:**```typescript
readonly equals: (other: Rect) => boolean;
```

## ui.rect.equals: Example


```typescript
const rect1 = new Rect(10, 20, 100, 50);
const rect2 = new Rect(10, 20, 100, 50);
const rect3 = new Rect(10.00000001, 20, 100, 50); // Very close values

console.log(rect1.equals(rect2)); // true
console.log(rect1.equals(rect3)); // true (within tolerance)
```

---

## ui.rect.height: Rect.height property

The height of the rectangle

**Signature:**```typescript
readonly height: number;
```

---

## ui.rect.left: Rect.left property

The x-coordinate of the left edge of the rectangle

**Signature:**```typescript
readonly left: number;
```

---

## ui.rect.localbottom: Rect.localBottom property

Gets the bottom edge of the rectangle relative to the parent.

**Signature:**```typescript
get localBottom(): number;
```

## ui.rect.localbottom: Example


```typescript
const rect = new Rect(10, 20, 100, 50, 5, 10);
console.log(rect.localBottom); // 60 (localTop + height)
```

---

## ui.rect.localcenter: Rect.localCenter property

Gets the center point of the rectangle relative to the parent.

**Signature:**```typescript
get localCenter(): {
        x: number;
        y: number;
    };
```

## ui.rect.localcenter: Example


```typescript
const rect = new Rect(10, 20, 100, 50, 5, 10);
const localCenter = rect.localCenter;
console.log(localCenter.x); // 55 (localLeft + width/2)
console.log(localCenter.y); // 65 (localTop + height/2)
```

---

## ui.rect.localleft: Rect.localLeft property

The x-coordinate of the left edge of the rectangle relative to the parent

**Signature:**```typescript
readonly localLeft: number;
```

---

## ui.rect.localright: Rect.localRight property

Gets the right edge of the rectangle relative to the parent.

**Signature:**```typescript
get localRight(): number;
```

## ui.rect.localright: Example


```typescript
const rect = new Rect(10, 20, 100, 50, 5, 10);
console.log(rect.localRight); // 105 (localLeft + width)
```

---

## ui.rect.localtop: Rect.localTop property

The y-coordinate of the top edge of the rectangle relative to the parent

**Signature:**```typescript
readonly localTop: number;
```

---

## ui.rect: Rect class

Represents a rectangle with position and dimensions.

A Rect defines a rectangular area in 2D space with a position (left, top) and dimensions (width, height). It provides convenient methods for accessing computed properties like right, bottom, center, and size.

**Signature:**```typescript
export declare class Rect 
```

## ui.rect: Example


```typescript
// Create a rectangle using the constructor
const rect1 = new Rect(10, 20, 100, 50);

// Create a rectangle using the static factory method
const rect2 = Rect.of({ left: 10, top: 20, width: 100, height: 50 });

// Access computed properties
console.log(rect1.right);   // 110 (left + width)
console.log(rect1.bottom);  // 70 (top + height)
console.log(rect1.center);  // { x: 60, y: 45 }

// Compare rectangles
const areEqual = rect1.equals(rect2); // true
```## ui.rect: Constructors


| Constructor | Modifiers | Description |
| --- | --- | --- |
| [(constructor)(left, top, width, height, localLeft, localTop)](#ui-rect-constructor) |  | Creates a new Rect instance. |


## ui.rect: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [bottom](#ui-rect-bottom) | `readonly` | number | Gets the y-coordinate of the bottom edge of the rectangle. |
| [center](#ui-rect-center) | `readonly` | { x: number; y: number; } | Gets the center point of the rectangle. |
| [equals](#ui-rect-equals) | `readonly` | (other: [Rect](#ui-rect)) =&gt; boolean | Compares this rectangle with another rectangle for equality. Uses near-equality comparison for floating-point precision tolerance. Two rectangles are considered equal if all their corresponding properties (left, top, width, height) are nearly equal within a small tolerance. |
| [height](#ui-rect-height) | `readonly` | number | The height of the rectangle |
| [left](#ui-rect-left) | `readonly` | number | The x-coordinate of the left edge of the rectangle |
| [localBottom](#ui-rect-localbottom) | `readonly` | number | Gets the bottom edge of the rectangle relative to the parent. |
| [localCenter](#ui-rect-localcenter) | `readonly` | { x: number; y: number; } | Gets the center point of the rectangle relative to the parent. |
| [localLeft](#ui-rect-localleft) | `readonly` | number | The x-coordinate of the left edge of the rectangle relative to the parent |
| [localRight](#ui-rect-localright) | `readonly` | number | Gets the right edge of the rectangle relative to the parent. |
| [localTop](#ui-rect-localtop) | `readonly` | number | The y-coordinate of the top edge of the rectangle relative to the parent |
| [right](#ui-rect-right) | `readonly` | number | Gets the x-coordinate of the right edge of the rectangle. |
| [size](#ui-rect-size) | `readonly` | { width: number; height: number; } | Gets the size dimensions of the rectangle. |
| [top](#ui-rect-top) | `readonly` | number | The y-coordinate of the top edge of the rectangle |
| [width](#ui-rect-width) | `readonly` | number | The width of the rectangle |


## ui.rect: Methods


| Method | Modifiers | Description |
| --- | --- | --- |
| [of({ left, top, width, height, localLeft, localTop, }, input)](#ui-rect-of) | `static` | Creates a new Rect instance using an object with optional properties. This factory method provides a convenient way to create rectangles with default values for any unspecified properties. |

---

## ui.rect.of: Rect.of() method

Creates a new Rect instance using an object with optional properties.

This factory method provides a convenient way to create rectangles with default values for any unspecified properties.

**Signature:**```typescript
static of(input: {
        left?: number;
        top?: number;
        width?: number;
        height?: number;
        localLeft?: number;
        localTop?: number;
    }): Rect;
```## ui.rect.of: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| { left, top, width, height, localLeft, localTop, } | (not declared) |  |
| input | { left?: number; top?: number; width?: number; height?: number; localLeft?: number; localTop?: number; } |  |


**Returns:**

[Rect](#ui-rect)

A new Rect instance

## ui.rect.of: Example```typescript
// Create a rectangle at origin with no size
const emptyRect = Rect.of({});

// Create a rectangle with only position
const positioned = Rect.of({ left: 10, top: 20 });

// Create a rectangle with all properties
const fullRect = Rect.of({ left: 10, top: 20, width: 100, height: 50 });
```

---

## ui.rect.right: Rect.right property

Gets the x-coordinate of the right edge of the rectangle.

**Signature:**```typescript
get right(): number;
```

## ui.rect.right: Example


```typescript
const rect = new Rect(10, 20, 100, 50);
console.log(rect.right); // 110
```

---

## ui.rect.size: Rect.size property

Gets the size dimensions of the rectangle.

**Signature:**```typescript
get size(): {
        width: number;
        height: number;
    };
```

## ui.rect.size: Example


```typescript
const rect = new Rect(10, 20, 100, 50);
const size = rect.size;
console.log(size.width);  // 100
console.log(size.height); // 50
```

---

## ui.rect.top: Rect.top property

The y-coordinate of the top edge of the rectangle

**Signature:**```typescript
readonly top: number;
```

---

## ui.rect.width: Rect.width property

The width of the rectangle

**Signature:**```typescript
readonly width: number;
```

---

## ui.relativetime: relativeTime() function

> Warning: This API is now obsolete.
>
> Use makeRelativeTimeSignal instead
>

Creates a signal that computes a human-readable relative time string between a target date and a reference date.

**Signature:**```typescript
relativeTime: (date: Value<Date>, options?: {
    now?: Value<Date>;
    frequency?: number;
}) => import('@tempots/core').Computed<string>
```## ui.relativetime: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| date | Value&lt;Date&gt; | The target date to compare |
| options | { now?: Value&lt;Date&gt;; frequency?: number; } | _(Optional)_ Configuration options |


**Returns:**

import('@tempots/core').Computed&lt;string&gt;

A signal containing a human-readable relative time string (e.g., "2 minutes ago", "in 3 hours"). The signal will clean up its resources when disposed.

---

## ui.relativetimemillissignal: relativeTimeMillisSignal() function

Creates a signal that computes the time difference in milliseconds between a target date and a reference date.

**Signature:**```typescript
relativeTimeMillisSignal: (date: Value<Date>, input?: {
    now?: Value<Date>;
    frequency?: number;
}) => import('@tempots/core').Computed<number>
```## ui.relativetimemillissignal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| date | Value&lt;Date&gt; | The target date to compare |
| { now, frequency } | (not declared) | _(Optional)_ |
| input | { now?: Value&lt;Date&gt;; frequency?: number; } | _(Optional)_ |


**Returns:**

import('@tempots/core').Computed&lt;number&gt;

A signal containing the time difference in milliseconds. Negative values indicate past times, positive values indicate future times. The signal will clean up its resources when disposed.

---

## ui.relativetimesignal: relativeTimeSignal() function

Creates a signal that computes a human-readable relative time string between a target date and a reference date.

**Signature:**```typescript
relativeTimeSignal: (date: Value<Date>, options?: {
    now?: Value<Date>;
    frequency?: number;
}) => import('@tempots/core').Computed<string>
```## ui.relativetimesignal: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| date | Value&lt;Date&gt; | The target date to compare |
| options | { now?: Value&lt;Date&gt;; frequency?: number; } | _(Optional)_ Configuration options |


**Returns:**

import('@tempots/core').Computed&lt;string&gt;

A signal containing a human-readable relative time string (e.g., "2 minutes ago", "in 3 hours"). The signal will clean up its resources when disposed.

---

## ui.resultview: ResultView() function

Renders a view based on the result of a computation.

**Signature:**```typescript
ResultView: <T, E>(result: Value<Result<T, E>>, options: ResultViewOptions<T, E> | ((value: Signal<T>) => TNode)) => Renderable
```## ui.resultview: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| result | Value&lt;Result&lt;T, E&gt;&gt; | The result of the computation. |
| options | [ResultViewOptions](#ui-resultviewoptions)&lt;T, E&gt; \\| ((value: Signal&lt;T&gt;) =&gt; TNode) | The options for rendering the view. |


**Returns:**

Renderable

The rendered view.

---

## ui.resultviewoptions: ResultViewOptions type

Represents the signal for a result.

**Signature:**```typescript
export type ResultViewOptions<T, E> = {
    success: (value: Signal<T>) => TNode;
    failure?: (error: Signal<E>) => TNode;
};
```

---

## ui.rootrouter: RootRouter() function

Creates the root router for an application that provides routing context to child components.

RootRouter is the top-level router that matches against the full browser pathname and creates the initial routing context. It provides the RouterContextProvider that child ChildRouter components can use for nested routing scenarios.

**Signature:**```typescript
RootRouter: <T extends { [K in keyof T]: (info: K extends string ? Signal<RouteInfo<MakeParams<ExtractParams<K>>, K>> : never) => TNode; }>(routes: T) => Renderable
```## ui.rootrouter: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| routes | T | Object mapping route patterns to handler functions |


**Returns:**

Renderable

A renderable router component that handles URL routing and provides context

## ui.rootrouter: Exceptions

{Error} When no matching route is found for the current URL

## ui.rootrouter: Example 1```typescript
// Basic app routing
const App = RootRouter({
  '/': () => html.div('Home Page'),
  '/about': () => html.div('About Page'),
  '/admin/*': () => AdminSection(), // Passes remaining path to AdminSection
  '*': () => html.div('404 - Page Not Found')
})

render(App, document.body)
```

## ui.rootrouter: Example 2


```typescript
// Nested routing with RootRouter and ChildRouter
const App = RootRouter({
  '/': () => html.div('Home'),
  '/admin/*': () => AdminRoutes(),
  '/blog/*': () => BlogRoutes()
})

const AdminRoutes = ChildRouter({
  '/users': () => html.div('User List'),
  '/users/:id': (info) => html.div('User: ', info.$.params.$.id),
  '/settings': () => html.div('Admin Settings')
})
```

---

## ui.route: Route type

Represents a route in the application.

**Signature:**```typescript
export type Route = RouteSegment[];
```
**References:** [RouteSegment](#ui-routesegment)

---

## ui.routecatchall: RouteCatchAll type

Represents a catch-all route.

**Signature:**```typescript
export type RouteCatchAll = {
    type: 'catch-all';
    name?: string;
};
```

---

## ui.routeinfo: RouteInfo type

Represents information about a route.

**Signature:**```typescript
export type RouteInfo<P, R = string> = {
    readonly params: P;
    readonly route: R;
    readonly path: string;
    readonly search: Record<string, string>;
    readonly hash?: string;
};
```

---

## ui.routeliteral: RouteLiteral type

Represents a literal route.

**Signature:**```typescript
export type RouteLiteral = {
    type: 'literal';
    value: string;
};
```

---

## ui.routeparam: RouteParam type

Represents a route parameter.

**Signature:**```typescript
export type RouteParam = {
    type: 'param';
    name: string;
};
```

---

## ui.routercontext.fullpath: RouterContext.fullPath property

The full original pathname from the browser location. This remains the same across all router levels.

**Signature:**```typescript
readonly fullPath: string;
```

---

## ui.routercontext.matchedpath: RouterContext.matchedPath property

The portion of the path that was matched by this router level. For RootRouter, this is the matched portion of the full pathname. For ChildRouter, this is the matched portion of the remaining path from parent.

**Signature:**```typescript
readonly matchedPath: string;
```

---

## ui.routercontext: RouterContext interface

Represents the context information for a router level in nested routing.

Each router level (AppRouter or SubRouter) creates a RouterContext that contains information about the matched path, remaining path for child routers, and accumulated parameters from all parent router levels.

**Signature:**```typescript
export interface RouterContext 
```

## ui.routercontext: Example


```typescript
// For URL "/admin/users/123" with routes:
// RootRouter: { '/admin/*': () => AdminRoutes() }
// ChildRouter: { '/users/:id': (info) => UserDetail(info) }

// RootRouter context:
{
  matchedPath: '/admin',
  remainingPath: '/users/123',
  fullPath: '/admin/users/123',
  params: {}
}

// ChildRouter context:
{
  matchedPath: '/users/123',
  remainingPath: '',
  fullPath: '/admin/users/123',
  params: { id: '123' }
}
```## ui.routercontext: Properties


| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [fullPath](#ui-routercontext-fullpath) | `readonly` | string | The full original pathname from the browser location. This remains the same across all router levels. |
| [matchedPath](#ui-routercontext-matchedpath) | `readonly` | string | The portion of the path that was matched by this router level. For RootRouter, this is the matched portion of the full pathname. For ChildRouter, this is the matched portion of the remaining path from parent. |
| [params](#ui-routercontext-params) | `readonly` | Record&lt;string, string&gt; | Route parameters extracted at this router level. These are accumulated with parameters from parent router levels. |
| [remainingPath](#ui-routercontext-remainingpath) | `readonly` | string | The remaining path that should be processed by child routers. Empty string if no remaining path. |

---

## ui.routercontext.params: RouterContext.params property

Route parameters extracted at this router level. These are accumulated with parameters from parent router levels.

**Signature:**```typescript
readonly params: Record<string, string>;
```

---

## ui.routercontext.remainingpath: RouterContext.remainingPath property

The remaining path that should be processed by child routers. Empty string if no remaining path.

**Signature:**```typescript
readonly remainingPath: string;
```

---

## ui.routercontextprovider: RouterContextProvider variable

Provider for router context stack in nested routing scenarios.

The RouterContextProvider maintains a stack of RouterContext objects, where each level represents a router in the nested hierarchy. Child routers can access the context stack to determine what path remains to be processed and what parameters have been accumulated from parent router levels.

**Signature:**```typescript
RouterContextProvider: Provider<Prop<RouterContext[]>>
```

## ui.routercontextprovider: Example 1


```typescript
// RootRouter creates the initial context
const RootRouter = <T extends Routes>(routes: T) =>
  Provide(
    RouterContextProvider,
    {},
    () => {
      // Router implementation that creates initial context
      return Use(Location, location => {
        // Match routes and create context...
      })
    }
  )
```

## ui.routercontextprovider: Example 2


```typescript
// ChildRouter reads parent context and adds its own
const ChildRouter = <T extends Routes>(routes: T) =>
  Use(RouterContextProvider, contextStack => {
    const parentContext = contextStack.value[contextStack.value.length - 1]
    const remainingPath = parentContext?.remainingPath || ''

    // Match against remaining path and create new context...
  })
```

---

## ui.routesegment: RouteSegment type

Represents a segment of a route.

**Signature:**```typescript
export type RouteSegment = RouteParam | RouteLiteral | RouteCatchAll;
```
**References:** [RouteParam](#ui-routeparam), [RouteLiteral](#ui-routeliteral), [RouteCatchAll](#ui-routecatchall)

---

## ui.selectonfocus: SelectOnFocus() function

Selects the text inside an input element when it receives focus.

**Signature:**```typescript
SelectOnFocus: () => import('@tempots/dom').Renderable
```
**Returns:**

import('@tempots/dom').Renderable

A renderable function that selects the text inside an input element when it receives focus.

---

## ui.ticker: ticker() function

Creates a new Ticker instance with an optional initial value.

**Signature:**```typescript
ticker: (initial?: number) => Ticker
```## ui.ticker: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| initial | number | _(Optional)_ The initial value for the ticker (defaults to 0) |


**Returns:**

[Ticker](#ui-ticker)

A new Ticker instance that only updates when the value changes

---

## ui.ticker.tick: Ticker.tick property

Triggers an update of the Ticker by incrementing its internal value.

**Signature:**```typescript
readonly tick: () => void;
```

---

## ui.timedifftostring: timeDiffToString() function

Converts a time difference in milliseconds to a human-readable relative time string.

**Signature:**```typescript
timeDiffToString: (diffInMillis: number) => string
```## ui.timedifftostring: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| diffInMillis | number | The time difference in milliseconds. Negative values indicate past times, positive values indicate future times. |


**Returns:**

string

A human-readable string representing the relative time difference: - For very recent times (&lt; 1 minute): "just now" or "in a moment" - For other times: formatted strings like "2 minutes ago", "in 3 hours", "yesterday", etc.

## ui.timedifftostring: Exceptions

{Error} Should never throw due to the Infinity max value in units array

---

## ui.urlfromlocation: urlFromLocation() function

Returns the full URL based on the provided location data.

**Signature:**```typescript
urlFromLocation: (location: LocationData) => string
```## ui.urlfromlocation: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| location | [LocationData](#ui-locationdata) | The location data object. |


**Returns:**

string

The full URL string.

---

## ui.useappearance: useAppearance() function

Creates a signal that represents the current appearance (light or dark) based on the user's system preferences.

The appearance is updated whenever the user's system preferences change, and the signal is cleaned up when it is no longer needed.

**Signature:**```typescript
export declare function useAppearance(): Signal<AppearanceType>;
```
**Returns:**

Signal&lt;[AppearanceType](#ui-appearancetype)&gt;

A signal representing the current appearance.

---

## ui.wheninviewport: WhenInViewport() function

Conditionally renders content based on whether an element is in the viewport.

This is a convenience wrapper around `InViewport` that provides a simpler API for cases where you just want to show/hide content based on viewport visibility. It's perfect for simple lazy loading or reveal animations.

**Signature:**```typescript
WhenInViewport: (options: InViewportOptions, then: () => TNode, otherwise?: () => TNode) => Renderable
```## ui.wheninviewport: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| options | [InViewportOptions](#ui-inviewportoptions) | Configuration options for viewport detection |
| then | () =&gt; TNode | Function that returns content to render when element is in viewport |
| otherwise | () =&gt; TNode | _(Optional)_ Optional function that returns content when element is not in viewport |


**Returns:**

Renderable

A renderable component that conditionally shows content based on viewport visibility

## ui.wheninviewport: Example 1```typescript
// Simple lazy loading
WhenInViewport(
  { mode: 'partial', once: true },
  () => html.img(
    attr.src('https://example.com/image.jpg'),
    attr.alt('Lazy loaded image')
  ),
  () => html.div(attr.class('skeleton'), 'Loading...')
)
```

## ui.wheninviewport: Example 2


```typescript
// Reveal animation
WhenInViewport(
  { mode: 'full' },
  () => html.div(
    attr.class('animate-slide-up'),
    'This content slides up when visible'
  )
)
```

## ui.wheninviewport: Example 3


```typescript
// Load expensive component only when needed
WhenInViewport(
  { mode: 'partial', once: true },
  () => ExpensiveChart({ data: chartData }),
  () => html.div('Chart will load when visible')
)
```

---

## ui.windowsize: WindowSize() function

Creates a renderable function that monitors the window size and invokes the provided function with the current size.

**Signature:**```typescript
WindowSize: (fn: (size: Signal<Size>) => TNode) => import('@tempots/dom').Renderable
```## ui.windowsize: Parameters


| Parameter | Type | Description |
| --- | --- | --- |
| fn | (size: Signal&lt;Size&gt;) =&gt; TNode | The function to be invoked with the current window size. |


**Returns:**

import('@tempots/dom').Renderable

A renderable function that monitors the window size.