@wardic/dom

Effect-typed: this package uses Effect's own types, so it moves to a new Effect major only in a Wardic major (the roadmap).

The browser's Environment for Wardic: its renderer, input, probe, projection system and the services a binding builds on. Each module is @wardic/dom/<Module>, and each page is generated from its source's doc comments.

Module
AppearAppear animations: a mount animation a server renders as CSS, played from the first paint, before any code runs, which the engine takes over at mount from where it has got to.
ColorCSS colours: parse reads a colour string, format writes one, interpolator blends two in a colour space, and TOKEN finds a colour inside a longer value, a shadow's say.
DomAnnouncerThe DOM's Announcer: a shared live region, an element a screen reader watches and reads out as its text changes, and the helpers a binding uses to describe a Reorder group's items to one.
DomClockThe DOM's Clock: core's Clock and its Refresh frame source over the browser's requestAnimationFrame, as one Layer that needs nothing.
DomDefaultTransitionThe DOM's Default transition, Motion's by value: a spring for the transforms, a 0.3 s ease for the rest, and a 0.8 s tween through more than two keyframes.
DomInputThe DOM's InputSource: pointer, keyboard and focus events as core's own, mapped from the DOM's names by toPointer, keyOf, kindOf and buttonOf.
DomInterpolatorsThe DOM's InterpolatorRegistry: core's value kinds with the DOM's colours and complex values, and the DOM's Key rules.
DomKeyRulesThe DOM's Key rules, for the keys it blends by name.
DomPositionalKeysThe DOM's Positional keys, the keys reduced motion lands at once rather than animating: the transforms, and the keys that place and size an element's box, top, width and the rest.
DomProbeThe DOM's Probe: boxes from getBoundingClientRect, sizes and visibility from the observers, the viewport, the reduced-motion preference from matchMedia, whether the page is shown, and a container's scroll.
DomProjectionSystemThe DOM's Projection system: layer builds it, writing through the Environment's FlushGate, and make builds it over any sink, for a binding that wires it itself.
DomRendererThe DOM's Renderer: project turns a Frame's values into a style patch, grouping the transform keys into one transform and drawing a bare number on a length in px, and its commit writes the patch onto an element.
FlushGateThe Flush gate: where a binding writes each element's animated values, drawn onto the elements once a frame.
MeasuredPairMeasured pairs: a key that places or sizes the box, whose two ends are lengths of different types, "auto" against px, "50%" against a number, a calc(), can't blend as written.
OwnValuesAn element's own values: what its style or its computed style says for a key, read once, the value an animation starts from, and returns to when nothing else sets it.
ProjectionSystemThe Projection system: what runs the DOM's layout animations, one per Environment a binding builds.
ReorderControllerA Reorder group on the DOM: the group, its items' drags, its keyboard and its announcements, one controller a group.
ReportReporting a failure where a fiber stops: logged at Error and handed to the Environment's ErrorReporters, so an app's error tracking sees it.
ScrollOffsetScroll offsets, the DOM's: Motion's syntax for where a target's progress through its scroll container runs, from 0 to 1, which the DOM's Probe.scroll resolves.
StyleAn element's style as a binding builds it: its starting style, what it's drawn with before any animation runs, from its initial (or its animate, with initial: false); how an app's own style and Wardic's are layered (over, without); and a drag element's default style.
SvgSVG: which elements are SVG's, and a style patch split into the CSS an SVG element takes and the attributes it takes instead.
VariablesCSS variables in animated values: a value that's wholly a var() is resolved against an element, so var(--accent) animates from or to the colour it stands for.