chore: release v0.24.0

[github-actions]

Summary

All bumped packages.

Package	From	To
@reactunity/create	0.23.2	0.24.0
@reactunity/material	0.23.2	0.24.0
@reactunity/renderer	0.23.2	0.24.0
@reactunity/scripts	0.23.2	0.24.0

Changelogs

2026-09-03-1f9ad3.md

Show Bumped Packages (1)

Package	Bump
npm:@reactunity/renderer	minor

Tailwind's Preflight, rewritten for ReactUnity

@reactunity/renderer/tailwind.css is what a ReactUnity app imports in place of Tailwind's
Preflight. Preflight resets what a browser does to a document, and here most of it names elements
ReactUnity has not got while the rules that do land — * clearing every margin and padding — leave
ReactUnity's own control styling half undone. This is the equivalent written for what ReactUnity
renders: the padding and the grey fill on a button, an input and a toggle go, so p-* and
bg-* are the only things that decide, appearance stays so they still behave as controls, and the
root gets a line height and the font family ReactUnity actually ships. It also carries the two theme
values whose defaults are stacks of web font names, --font-sans and --font-mono.

An app still writes the one line Tailwind's docs give it. @reactunity/renderer/vite aliases a
bare @import "tailwindcss" to this file, so nothing about the setup changes:

@import "tailwindcss";

Only the bare specifier is aliased — tailwindcss/theme.css and the rest keep resolving to the
package, which is where this entry gets them from — and reactUnity({ tailwind: false }) turns the
alias off. Either half can also be imported alone, as
@reactunity/renderer/tailwind/preflight.css — into layer(base), since an unlayered rule beats
every utility — and @reactunity/renderer/tailwind/theme.css. The kitchen-sink sample now loads
Tailwind once for every page, Preflight included and the control look written back into its own
base layer through @apply, and
Using Tailwind CSS covers what does and does
not carry over.

2026-09-03-4ac1e7.md

Show Bumped Packages (1)

Package	Bump
npm:@reactunity/renderer	minor

CSS logical properties

padding-inline, margin-block, inset-inline-start and the rest of the logical box properties
now work, as longhands, as the two-value shorthands, and under their camelCase names in an inline
style:

#panel {
  direction: rtl;
  padding-inline: 4px 12px;
  margin-block-start: 8px;
}

The inline axis is handed to Yoga's own start and end edges rather than resolved here, which is what
makes direction mean something: it is inherited, so setting it once turns the inline axis around
for a whole subtree, and an element needs no direction of its own to follow one set above it. The
block axis is always vertical — writing-mode does not exist here, so block-start is the top.

An inline value takes precedence over the physical property covering the same edge whichever order
the two are declared in. CSS would let the later declaration win; that is the one place the two
disagree, and the reason not to set both on one edge. Under UIToolkit the inline axis is always the
physical one, since UIElements has no start and end edge and ignores direction.

padding-start, margin-end and border-start-width — the React Native spellings that have been
in the property table all along — reach the same edges, and now do something for the first time:
nothing had been pushing them to Yoga.

The practical effect is that Tailwind's px-*, py-*, mx-*, my-*, inset-x-*, border-x-*,
ps-*, ms-*, start-* and space-x-* all work. v4 writes every two-axis and start/end utility
as a logical property, so those had been quietly doing nothing.

2026-09-03-7b3e41.md

Show Bumped Packages (1)

Package	Bump
npm:@reactunity/renderer	minor

A Vite preset for ReactUnity apps

@reactunity/renderer/vite configures Vite the way a ReactUnity app needs it, so a project's whole
config is:

import reactUnity from '@reactunity/renderer/vite';
import { defineConfig } from 'vite';

export default defineConfig({ plugins: [reactUnity()] });

Output goes into the Unity project. The preset walks up from the Vite root looking for an
Assets folder beside a ProjectSettings/ProjectVersion.txt, testing each ancestor and one level
below it, and builds into that project's Assets/Resources/react. Both layouts are found: the app
inside the project, and the app beside it. unityProject and assetPath say it outright when the
guess is wrong, and it stays out of the way entirely if the config already sets build.outDir.

The output folder is cleaned, and the .meta files survive. Unity writes a .meta beside every
asset, and the GUID in it is what scenes and prefabs reference — so emptying the folder the way Vite
would means every rebuild mints new GUIDs and breaks whatever pointed at the old ones. The clean
deletes the output and leaves the metas, and once the build has written its files it drops only the
metas whose asset did not come back, along with any directory the build left empty. A build that
fails leaves the metas alone, so the next successful one restores the files under their original
GUIDs. preserve exempts paths the build does not own, and the clean refuses outright to run on a
directory that is not plausibly build output — a package, a repository, an Assets folder, or
anything containing the Vite root.

For the same reason, output filenames carry no content hash by default: a hash renames the file on
every build, which costs it its meta. hashFileNames: true restores Vite's naming.

Emitted assets carry their extension twice, so index.css is written as index.css.css. Unity
finds a resource by its path minus the last extension, which makes assets/index.js and
assets/index.css the same resource -- and asking for the script could hand back the stylesheet, to
be run as JavaScript. Doubling puts the type back into the name the lookup uses. Content hashes did
this by accident before; without them it has to be deliberate.

Assets are never inlined. Vite turns a file under 4 kB into a data: URI, and Unity loads an
asset URL through its own loaders — so a small image that got inlined stopped resolving. The limit
is 0, which is where react-unity-scripts had it too.

CSS is emitted for an old browser. ReactUnity's CSS subset does not know oklch(), color-mix()
or nesting, and a stylesheet that uses them silently loses those declarations. build.cssTarget
defaults to chrome87, which is what makes Lightning CSS lower them on the way out — enough that
Tailwind v4's palette arrives as hex.

Vite's devtools and the HMR error overlay are off. Neither has anywhere to draw in Unity, and an
overlay rendered into a page nobody is looking at only hides the console message.

Everything the config sets itself wins — the preset only fills in what was left out — and
react: false drops @vitejs/plugin-react for a project that wants to configure React itself.

2026-09-05-9f2d4b.md

Show Bumped Packages (1)

Package	Bump
npm:@reactunity/renderer	minor

@starting-style, light-dark(), color-scheme, place-* shorthands, math functions, :nth-child(of S), attr(), linear() and boolean hover/pointer queries

@starting-style is the style an element has on the frame it appears, and the state a transition starts from. It used to collapse into the enclosing rule, so @starting-style { opacity: 0 } made the element invisible for good. Each rule in a block is now applied through :enter, which is the machinery ReactUnity already had for the first frame: .a { @starting-style { opacity: 0 } } is .a:enter { opacity: 0 }, and the top-level form works the same. The one visible deviation is that :enter adds pseudo-class specificity where the web adds none.

light-dark(<light>, <dark>) picks one of two values, wherever a color goes. The new color-scheme property (normal, light, dark, light dark; inherited) decides: a single scheme settles it for the subtree, anything else defers to the prefers-color-scheme media feature, and a change to that feature restyles the tree. color-scheme on the root element also seeds prefers-color-scheme, so @media (prefers-color-scheme: dark) rules follow the page's declared scheme; a value set through MediaProvider.SetValue is never seeded over, and withdrawing the declaration restores what the feature held. DefaultMediaProvider.SeedValue is the public shape of that.

place-content, place-items and place-self set the align and justify pair in one declaration, which Tailwind emits constantly. Yoga has no justify-items or justify-self, so the last two set their align property and only check that a second value is a keyword. The align and justify longhands also take the web spellings start, end, self-start, self-end, left, right and normal.

The math functions beyond min()/max()/clamp(): round() with nearest, up, down and to-zero, mod(), rem(), abs(), sign(), sin(), cos(), tan(), asin(), acos(), atan(), atan2(), pow(), sqrt(), hypot(), log() and exp(), plus the constants pi, e, infinity, -infinity and NaN. Operands are calc() expressions, so they nest in one another and in calc(), and take var(); all-constant inputs fold at parse time. The property's own converter reads the operands, so round(1250ms, 1s) is a duration, and when it refuses one they are all read as plain numbers, which is what calc(mod(7, 3) * 1s) needs; round(1s, 1) mixes the two and is invalid. Trigonometric arguments are angles or radians, the inverse functions return degrees. calc() with a leading sign, calc(-1 * 10px), used to fail to parse and now works.

:nth-child(An+B of S) and :nth-last-child(An+B of S) count only the siblings matching S, a selector list of compound selectors; a branch with a combinator is dropped, since siblings are what is counted. The clause adds the specificity of its most specific branch, as on the web.

attr() reads a data-* prop into any property: content: attr(data-label), with the prefix optional, a fallback as the second argument, and a unit after the name (attr(data-size px)) or a type for a typed value. A pseudo element reads the element it belongs to, and a number or boolean prop reads as its text.

linear() joins steps() and cubic-bezier() as an easing: linear(0, 0.25 40%, 1), with up to two positions per stop to hold a value, missing positions spread evenly, and extrapolation past the ends.

The hover, any-hover, pointer and any-pointer media features are now always defined, so the boolean forms (hover) and (pointer) are the standard way to gate hover-only styling; a platform whose real value was the provider's default used to leave them undefined. Two provider bugs went with it: a mobile platform registered the console media type instead of mobile, and the legacy Input path listed a touch screen as a fine pointer.

TypeScript's RenderStyle gains colorScheme, placeContent, placeItems and placeSelf, and the align and justify types take the new spellings.

2026-09-05-b7e3a1.md

Show Bumped Packages (1)

Package	Bump
npm:@reactunity/renderer	minor

Accept the CSS that Tailwind and the web actually emit

A stylesheet written for a browser, or generated by Tailwind v4, reaches ReactUnity full of spellings the engine parsed into nothing. Each one below was silently dropped before; each is now either honoured or mapped onto the nearest thing the renderer already had.

Names and keywords. Vendor prefixes are stripped, so -webkit-line-clamp is max-lines and -webkit-text-stroke is text-stroke (custom properties keep their --). text-decoration-line sets the same flags as font-style. overflow: auto scrolls and overflow: clip hides. font-variant: small-caps (and -caps, all-small-caps, petite-caps) is a text-transform. text-align takes justify, start and end; text-overflow takes clip. text-wrap: balance | pretty | stable parse as plain wrapping. The dvh/svh/lvh family, dvw/svw/lvw, their min/max forms and vi/vb all resolve as viewport lengths.

min(), max() and clamp(). Anywhere calc() works, with the same operand grammar, so clamp(1rem, 2vw + 0.5rem, 2rem) and min(100%, var(--width)) resolve against the same reference as calc. none is accepted for either bound of clamp, and all-constant inputs fold at parse time.

white-space. text-wrap: nowrap used to be the whole story; white-space now carries pre, pre-wrap, pre-line and break-spaces, and TextMeshPro's textWrappingMode follows it, preserving runs of spaces and newlines where the value asks for it. The renderer's whiteSpace typing grew the same values.

text-shadow. Rendered through TMP's underlay, so the shader draws it and no second text object exists. Pixel offsets and blur are converted to the underlay's own units from the font asset's sampling point size and gradient scale, which is why 1px 1px 2px looks the same at any font size. TMP has a single underlay, so only the first shadow of a list is drawn.

overflow-x and overflow-y. overflow is now a two-value shorthand over them. Yoga still has one overflow, so it gets the stronger of the two (scroll over hidden over visible), and the mask applies when either axis is hidden, because a rectangle mask cannot clip one axis alone. What the split does buy is scroll direction: a <scroll> with overflow-x: hidden scrolls vertically only, and overflow-y: hidden horizontally only, unless the direction prop says otherwise.

caret-color and ::selection. Both on <input>. The caret defaults to currentColor as the spec says. ::selection is a pseudo-element like ::placeholder, and its background-color is the TMP_InputField's selection highlight, so input:focus::selection { background-color: … } works too. That is the whole of what TextMeshPro can recolor: the selected glyphs keep their own color, and <text> has no selection at all.

scrollbar-color and scrollbar-width. scrollbar-color: <thumb> <track> and scrollbar-width: auto | thin | none | <length> on a <scroll>. They are implemented as custom properties the user-agent ::scrollbar and ::scrollbar-thumb rules read through var(), which gives the precedence the web has for free: a ::scrollbar rule of your own still wins, and auto falls back to the defaults. none is a zero-size scrollbar rather than display: none, because the ScrollRect toggles the scrollbar object itself to auto-hide it. One deviation: both inherit, where the spec inherits only the color.

Media queries. prefers-color-scheme and prefers-reduced-motion exist as features. The default scheme follows the Editor skin in the Editor and is light in a player; reduced motion defaults to no-preference. Both are runtime values, set with DefaultMediaProvider.SetValue from whatever the game reads from the platform.

Gradients. linear-gradient(to right in oklab, …), and the same hint on radial- and conic-gradient, parse. The colour space itself is not honoured; interpolation stays in sRGB, which is what a browser does for the default in srgb and is a close match for the short hues Tailwind emits.

A regression test pins down that Tailwind's filter: var(--tw-blur,) var(--tw-brightness,) … chains already worked: an empty var() fallback resolves to nothing and the remaining functions compose.

2026-09-05-e4c1a7.md

Show Bumped Packages (1)

Package	Bump
npm:@reactunity/renderer	minor

Container queries, style queries and container units

container-type (normal, size, inline-size), container-name and the container shorthand make an element a query container, and @container rules read the nearest eligible ancestor: (min-width: 400px), (width > 400px), (400px <= width < 800px), aspect-ratio, orientation, and/or/not, an optional container name, and nesting inside style rules, @media, @supports, @layer and other @container blocks. A length in a condition resolves against the container, so 20em is its font size.

style() queries compare a property of the container: a custom property as its declared text, with style(--theme) alone meaning it is set; a regular property as its computed value. Every element can answer one, whatever its container-type.

cqw, cqh, cqi, cqb, cqmin and cqmax measure the nearest size container's content box on each axis, and fall back to the viewport where there is none.

A container is measured after layout, and one whose content box changed since a query or a unit last read it restyles its subtree and lays out again in the same frame, up to twice. There is no size containment, so a container whose size depends on what the query changes can oscillate, and stops where the second pass lands. UIToolkit, whose layout is the framework's, sees a resize a frame later. A change to a property a style() query reads re-resolves the elements that read it, inherited or not.

The bundled parser reads a @container prelude as written, since a container query is not a media query, and parses one nested in a style rule the way it parses a nested @media.

TypeScript's RenderStyle gains containerType and containerName.

2026-09-06-a4c7e2.md

Show Bumped Packages (1)

Package	Bump
npm:@reactunity/renderer	minor

scrollbar-gutter, and scrollbar-size is gone

scrollbar-gutter: auto | stable | stable both-edges on a <scroll>. ReactUnity's scrollbars are drawn over the content, so there was never layout shift to prevent; what stable buys here is that content is never covered. The viewport shrinks by the bar's thickness along the bar's edge, for each direction the view can scroll in, and Yoga loses the same width, so a width: 100% child fits the visible area exactly and does not start a horizontal scroll of its own. both-edges mirrors the gutter onto the opposite edge. The thickness comes from the bar's own computed size, so scrollbar-width: thin reserves 6px and none reserves nothing. One limit: a percent padding on the scroll view cannot absorb the gutter, so the gutter is skipped there.

scrollbar-size, an alias of scrollbar-width that never existed on the web, is removed from the property map and the RenderStyle typing. scrollbar-width is the spelling.

2026-09-06-d2e7b9.md

Show Bumped Packages (1)

Package	Bump
npm:@reactunity/renderer	patch

light-dark() reaches Unity as written from a Vite build

The Vite plugin names an old browser as the CSS target so Lightning CSS lowers oklch, color-mix and nesting, which ReactUnity does not read. That target also lowered light-dark(), into two variables that only a color-scheme declaration in the same sheet defines, so an app's own light-dark() colors came out invalid unless a Tailwind scheme-* utility happened to sit next to them. The plugin now excludes that one feature from the lowering, since ReactUnity resolves light-dark() itself; an app that sets css.lightningcss.exclude keeps its own value.

2026-09-07-8b4f2c.md

Show Bumped Packages (1)

Package	Bump
npm:@reactunity/renderer	minor

filter renders

filter has parsed since the property was added and applied to nothing. FilterDefinition
read every function, interpolated between them, and HasBorderOrBackground even brought a
BorderAndBackground into existence for it -- but no code ever looked at the value, so a
stylesheet asking for filter: grayscale(1) got an unfiltered element and no diagnostic.

It draws now, in the UGUI framework: blur, brightness, contrast, grayscale,
hue-rotate, invert, opacity, saturate, sepia, plus the non-standard grain and
pixelate that backdrop-filter already accepted -- and drop-shadow, which had been a
commented-out field. Four more non-standard ones are added below.

The element's subtree is rendered into a RenderTexture and the result is composited back into
its original slot with the filter applied in one fragment pass. That shape is why filter
needs no per-pipeline code: unlike backdrop-filter, which reads what is behind the element
and so needs URP's _CameraOpaqueTexture in one subshader and a built-in GrabPass in
another, a filter only ever reads the element's own pixels. One subshader serves built-in, URP
and HDRP -- and HDRP is the interesting one, because backdrop-filter has always been broken
there. Its URP subshader is tagged UniversalPipeline, so HDRP falls through to the built-in
one, whose GrabPass HDRP does not support.

An ancestor's overflow: hidden clips the filtered result, not the filter input, which is
what CSS says and what falls out of this design for free. overflow: hidden here is a stencil
Mask, and stencil state does not survive a render-target switch, so the offscreen pass
renders the subtree unclipped; the composite is a MaskableGraphic sitting in the element's
original place, and gets clipped normally. A Mask inside a filtered element still clips,
because the offscreen canvas recomputes stencil depth consistently within itself.

Two details that are easy to get wrong and are worth stating, since both were measured rather
than assumed:

The render target is snapped to whole device pixels. Text is TextMeshProUGUI, and its SDF
antialiasing is derivative-based, so an offscreen canvas that mirrors scaleFactor and
referencePixelsPerUnit reproduces in-place rendering bit for bit -- zero differing pixels,
for a screen-sized target, an element-sized one, and at a fractional scaleFactor of 1.5.
Alignment is the only thing that matters: half a pixel of offset moves 2.75% of pixels with
local deltas to 136/255, which reads as shimmer on anything animating. Nothing about the
target's size changes glyph weight, which never moved more than 0.5% in any variant.

The composite blends premultiplied. UGUI draws with SrcAlpha OneMinusSrcAlpha, so a target
cleared to transparent black comes back with its colour already multiplied by coverage;
blending that again the same way multiplies twice and leaves dark fringes on every edge. The
filter functions are defined on straight alpha, so the shader unpremultiplies, applies the
chain, and premultiplies on the way out.

There is a filter region, as on the web: the target and the composite are both grown past the
element's box so nothing is sliced off at the edge. It is per-side rather than one margin,
because a drop-shadow only needs room on the side it falls -- and the sides are grown to keep
the frame's centre on a whole pixel, since half a pixel of offset is the shimmer case above.

Each side is the blur kernel's exact support rather than a guessed multiple of the radius. One
pass reaches four taps at quarter spacing, so plus or minus its own radius; n passes of
r/sqrt(n) reach sqrt(n)*r, which is at most 2r because n is capped at four. That is half what
the first cut allocated, and the falloff it produces is identical pixel for pixel -- blur(24px)
still measures 0.99 0.96 0.90 0.79 0.64 0.45 0.28 0.15 0.06 0.02 0.00 across its soft edge --
so the render target is about a quarter smaller in area for a wide blur, clipping nothing.

drop-shadow casts from the element's alpha, which is what separates it from box-shadow: it
traces glyphs and transparent images instead of the border box. It is derived from the capture
after the element's own blur, so a blurred element throws a blurred shadow -- the order
blur() drop-shadow() gives on the web -- and it is composited in the fragment pass rather than
blended into the capture, so the colour ops reach the element and not the shadow. Measured:
under grayscale(1) drop-shadow(20px 20px 0 blue) the element reads 0.30 grey, Rec.601 luma of
red, while the shadow stays pure blue. The blur is shared with filter: blur() and lands close
to the spec's sigma of half the radius: a 12px radius measures about 6.4px of sigma.

drop-shadow reuses BoxShadow's parser, so it also accepts a spread and inset, which CSS
does not have here. Both are ignored rather than rejected.

A filtered element stays interactive. Isolating one subtree is only possible by
reparenting it under an offscreen canvas -- a camera cullingMask cannot do it, because a
ScreenSpaceOverlay canvas has no camera to cull against -- and that takes the subtree out of
the main GraphicRaycaster. Events are routed back the way eventViewport already routes them
into a canvas rendered to a texture: CustomViewportRaycaster remaps the pointer from the
composite's rect into the offscreen camera's screen space, so the existing machinery needed no
changes. Two things had to be added on top of it.

The offscreen canvas is WorldSpace, and GraphicRaycaster reports int.MinValue for
sortOrderPriority on anything that is not an overlay -- so every hit inside a filter would
have lost to the canvas the composite sits in. It borrows that canvas's priorities instead.

And the raycast is gated on the composite. The composite stands exactly where the element was,
so whether a point reaches it is whether that point should reach the subtree -- and asking it
runs the ancestor chain the reparent removed. That is what still applies an ancestor's
pointer-events: none, and what makes an ancestor's overflow: hidden clip hits the same way
it clips pixels: with a 200px button inside a 100px overflow: hidden wrapper, a point at 50px
hits and one at 150px does not, filtered or not.

A filtered element stays interactive inside a real page, which the fixtures could not see.
Their filtered element sat directly under the canvas, where nothing else is a raycast target; a
<scroll> around it is, and its viewport was taking every click. Hits inside a filter come back
measured against the offscreen camera, which says nothing about the canvas they have to be sorted
against -- and depth, which would say it, is only compared within one root raycaster. They are
rebased onto the composite now, a thousandth of a unit in front: far too little to reach past a
canvas that genuinely sits closer, and enough to beat the containers holding the element.

Bubbling had the same hole. ExecuteHierarchy walks up from whatever was hit, and the reparent
truncates that walk at the offscreen canvas -- so a wheel over a filtered card would not scroll the
page it was on. The top of the subtree carries on from the composite instead, which is only reached
when nothing inside handled the event first.

The surface is also a scene root, since a nested canvas would inherit the render mode it exists to
escape -- so nothing in the context's own hierarchy reached it, and disposing the context left the
whole subtree behind with a live raycaster on it. Reloading the app a few times was enough to
collect stray raycasters that answered clicks anywhere on screen.

rotate and scale survive a filter, which took a fix rather than a test. The capture
takes the element's rotation so it is framed square-on, and the composite was taking no
transform at all -- so the two cancelled and rotate: 45deg came back as an upright square,
measured as coverage 0.00 -> 1.00 at a corner the rotation had emptied. scale: 2 framed only
the middle half of the element and then drew it into the unscaled box, 1.00 -> 0.00 at 250px
along a 400px-wide element.

Both now come out of the capture and go onto the composite instead, which is also the order CSS
asks for: the chain runs in the element's local space, so pixelate blocks turn with the
element rather than staying screen-aligned, and a blur radius widens with scale because the
render target is sized in the element's scaled pixels and the blur is measured in its texels.

What is not there yet:

• Depth between a filtered subtree and overlapping unfiltered content is settled by standing
  the subtree a hair in front of the composite, not by real depth -- the event system compares
  RaycastResult.depth only within one rootRaycaster, and BaseRaycaster.rootRaycaster is
  not virtual. So a filtered element wins a tie against unfiltered content drawn over it.
• backdrop-filter: drop-shadow(...) parses and does nothing. The two properties share
  FilterDefinition, and a backdrop has no alpha edge to cast from.
• UIToolkit has no filter. Nothing in Unity's own styling maps to it.

A filtered element that is not changing costs nothing per frame. It re-renders when the element
resizes, when a descendant graphic rebuilds, or when any descendant transform moves -- that last
one being the case a naive invalidation misses, since moving a child dirties no graphic at all and
the canvas just re-batches. A static filtered element settles after one render.

A change to the filter value only re-captures when the capture would come out different, which
means a blur radius, or a drop-shadow that moves or resizes the filter region. Every colour op is
a uniform the composite is drawn with, so animating hue-rotate or brightness costs one
material write per frame and no offscreen pass at all -- it was costing a full re-render of the
subtree on every frame of the animation.

Blur iterates its kernel rather than stretching it. Nine taps whose spacing grows with the
radius sample too sparsely for a wide blur and band; convolving the kernel n times widens it by
sqrt(n) with the taps left where they are, so the radius picks a pass count instead, up to
four. blur(24px) falls off monotonically across its whole soft edge.

Four more filter functions, aimed at game UI

posterize, scanlines, tint and chromatic-aberration join grain and pixelate as
functions the web does not have. All four work in backdrop-filter too, since the two
properties share FilterDefinition.

Three of them are pointwise, which is the whole reason they are cheap: they are a uniform the
composited image is drawn with, so they never re-capture the subtree and animating one costs a
material write. chromatic-aberration is the exception -- it reads one offset either side, and
needs transparent margin to read there, or the sampler's clamp leaves the outer edge with no
fringe at all. It widens the capture region the way a blur does. But the margin is whole pixels,
so it only re-renders when that integer changes: animating one through three pixels re-renders
three times, not sixty times a second.

tint multiplies, so it only darkens; brightness(1.4) tint(#f66) is the damage flash, and
grayscale(1) tint(...) is how a panel greys out. posterize(n) rounds to n evenly spaced
levels including both ends, so posterize(2) is black and white rather than black and
mid-grey. Ordering matters for these: the quantisation lands after the colour ops and the tint
so it applies to the final value, and before grain and scanlines, since posterizing noise
flattens it away.

Neither grain nor scanlines takes a time input. Both take a trailing phase, and a
@keyframes animation on that is what moves them -- which keeps a static filter free and puts
the per-frame cost only where it was asked for. A CRT's scanline pattern does not move either;
its hum bar drifts, so the phase is a length and one period of it is one roll. Grain's phase
feeds the noise hash instead, where any change gives an unrelated field rather than the same
one slid across -- so it flickers rather than crawls, and the timing function picks the rate:
linear resamples every frame, steps(12) gives grain at twelve frames a second.

grain was static before this and had no way not to be.

style={undefined} no longer takes the whole app down

A prop that is present and undefined is ordinary React, and style and data were the two that
could not survive it: they are read as objects, and an undefined one arrives in the command batch
as a JSON null. Reading a null's children threw inside the batch flush, which is an unhandled
promise rejection -- so one style={cond ? x : undefined} anywhere left the app with nothing
rendered and a Newtonsoft stack trace as the only clue. An undefined style now means no
declarations, which is what it says.

filter and backdrop-filter are typed

Style is hand-written rather than generated, and neither property was in it -- so
style={{ filter: 'blur(4px)' }} was a type error in every app, while the same declaration in a
stylesheet was fine. Both are SafeString now, alongside boxShadow and textShadow.

Colour ops reached the wrong material under a masking ancestor

Everything above was true of an element with no Mask above it, and false of one inside a
<scroll> or an overflow: hidden ancestor -- which is most real UI. Under a mask UGUI does not
draw a graphic's own material: MaskableGraphic.GetModifiedMaterial hands it to
StencilMaterial.Add, which makes a copy carrying the stencil state and caches it for the life
of the base material. The filter chain was written to the original, so whichever of the two was
made first won -- and when the copy came first, every uniform-driven function fell back to the
shader's identity defaults. Only blur survived, because a blur is baked into the render texture
rather than read at draw time.

The chain is written to whatever is actually being drawn now, and again whenever UGUI rebuilds it
-- the composite listens for its own material going dirty, which is what a mask coming or going
above it raises.

This is a good example of a test suite agreeing with itself: the fixtures put the element
directly under the canvas, so the copy was always made after the write and 20 tests passed on a
feature that did not work on the page it was written for.

Two filters no longer capture each other

Every offscreen surface was parked at the same world position, and every offscreen camera has the
same culling mask -- so a camera saw not just its own subtree but any other subtree that happened
to overlap it there. With one filter on a page nothing shows; with twenty, elements at similar
offsets within their canvases collect pieces of each other. Each surface now takes a slot of its
own, spaced wider than a camera's far plane, and slots are handed back when a filter goes away so
the coordinates stay small enough to stay exact.

Animating backdrop-filter no longer leaks a material per frame

WebFilter cached materials in a static dictionary keyed on the whole property set, including
the FilterDefinition. Since a definition is interpolatable, every frame of a
transition: backdrop-filter produced a distinct key and so a fresh Material that was never
released -- for the life of the process. Each component now owns one material and mutates it in
place.

The cache could not have hit in any case. FilterDefinition overrides Equals but not
operator ==, and the key's Equals compared its definition with == -- by reference --
while its GetHashCode hashed the same field by value. Both now compare by value, which also
keeps an all-identity filter such as brightness(1) from allocating a render target for
nothing.

Applying a style that did not change no longer rebuilds the element

An element's style is applied on every frame it is visited, and three of the things that
application assigns rebuilt their graphic whether or not the value had moved: the background
image's size, the border rounding, and TMP's font style, weight and font asset. Nothing showed,
because a rebuild produces the same pixels -- it was paid for by every element on screen, every
frame, and it is only visible from something that watches for a rebuild.

filter is that something. A filtered element re-captures its subtree when a descendant graphic
goes dirty, so an animation on a pointwise op -- hue-rotate, grain's phase, scanlines'
phase, none of which need a new capture -- was re-rendering the whole subtree sixty times a
second anyway. Measured on the kitchen-sink filter page, four animated cards were re-capturing on
every frame; three of them now hold one capture for the life of the animation, and the fourth
animates blur, which genuinely has to.

The guards are equality checks at the four assignment sites. Rounding needed value equality to
compare with (WebRoundingProperties is a class and each site builds a fresh instance from the
style, so a reference check would never match), and RecalculateFontStyleAndWeight had to stop
assigning fontStyle twice -- once provisionally and once with the transform flags -- before a
guard there could hold.

Offscreen filter surfaces are collected under one object

There was a [FilterSurface] at the scene root per filtered element. They cannot go under the
React canvas: each carries a WorldSpace canvas, and a canvas nested under another inherits that
one's render mode, which would turn the offscreen pass back into an onscreen one. They are
parented to a single [Filters] object instead, created with the first filter in the scene and
destroyed with the context -- which also replaced the per-filter disposable that was keeping them
from outliving the app.

2026-09-07-c9a4e2.md

Show Bumped Packages (1)

Package	Bump
npm:@reactunity/renderer	patch

Container queries measure the content box on UIToolkit, and a few smaller fixes

On UIToolkit a size query and a container unit were reading the element's border box, since that framework's components have no Yoga node to take the padding and border from. They now read contentRect, which is what the docs promised and what UGUI already did, so container-type: size on a padded element answers the same question on both frameworks.

container-type accepts scroll-state, alone or with size and inline-size, so a stylesheet written for the web parses; there are no scroll-state queries, so it decides nothing. A style() query on a custom property registered with a typed @property syntax, <length> or <color> say, compares computed values rather than declared text, so style(--gap: 20px) holds for --gap: 1em at a 20px font size.

A container is now measured only while something reads it. Every restyle of its subtree lets the rules and units that still depend on it register again, and one nothing reads any more drops out of the post-layout check instead of staying there for life. A disabled stylesheet's rules are skipped while matching rather than matched with nothing to apply, which is what kept a removed @container rule measuring its container. That uncovered a cascade slip: when every matching rule was !important, an inline style was placed above them instead of below, and now sits where it belongs.

RenderStyle gains the container shorthand, and the nesting page no longer claims container queries do not exist.

Publish

The following packages will be published if merged:

Package	Version	Registry
@reactunity/create	0.24.0	npm
@reactunity/material	0.24.0	npm
@reactunity/renderer	0.24.0	npm
@reactunity/scripts	0.24.0	npm

[github-actions]

Unit Tests 6000.1.9f1

0 tests  ±0   0 ✅ ±0   0s ⏱️ ±0s
0 suites ±0   0 💤 ±0 
0 files   ±0   0 ❌ ±0 

Results for commit 5e06696. ± Comparison against base commit f785a0a.