@expofp/renderer 3.34.1 → 3.35.0

package/dist/Renderer.d.ts

@@ -2,6 +2,7 @@ import { type Box } from '@expofp/geometry';
 import { type HTMLAttributes, type ReactNode, type Ref } from 'react';
 import { type ControlsConfig } from './controls';
 import { type ExternalCanvasProps } from './external/ExternalCanvas';
+import { type LightingProps } from './objects/lighting';
 import { type CameraProps } from './space/Camera';
 import { type SceneDef } from './types/defs';
 import { type PointerMissedEventData } from './types/events';
@@ -60,6 +61,19 @@ export interface RendererProps extends HTMLAttributes<HTMLDivElement>, CameraPro
      * without taking a gesture away.
      */
     controls?: ControlsConfig;
+    /**
+     * The scene's lighting, and the darkening that rides with it: the rig's contrast and three
+     * colors, and a `shadow` object holding the shade both darkening terms blend toward and each
+     * term's own numbers. See {@link LightingProps}.
+     *
+     * Every value is optional and every omitted one keeps the design's own default, so a caller sets
+     * the one number a plan needs and nothing else. Where the key light points is not here: that is
+     * the design's decision, and the debug GUI keeps it.
+     *
+     * Changing a value moves a mounted scene with no remount and no shader recompile. It lands on a
+     * uniform or on a field the frame reads, and asks for a redraw.
+     */
+    lighting?: LightingProps;
     /**
      * The part of the canvas the plan should be framed inside, in css pixels from its top-left
      * corner — for a host whose own header, sheet or panel covers the rest.

package/dist/Renderer.js

@@ -24,12 +24,12 @@ export function Renderer(props) {
     // attributes — which is what React warns about, and the reason every member of `CameraProps` has
     // to be named here as well as reassembled below. They are passed on untouched: what an omitted
     // one means is `Camera`'s to say, and it is the only place that says it.
-    const { debug, scene, memoryLimit, minZoom, maxZoom, minPitch, maxPitch, bounds, smoothTime, controls, visibleRect, onPointerMissed, gl, requestFrame, onFrame, children, ...canvasProps } = props;
+    const { debug, scene, memoryLimit, minZoom, maxZoom, minPitch, maxPitch, bounds, smoothTime, controls, lighting, visibleRect, onPointerMissed, gl, requestFrame, onFrame, children, ...canvasProps } = props;
     const cameraProps = { minZoom, maxZoom, minPitch, maxPitch, bounds, smoothTime };
     const external = gl !== undefined;
     // The one tree, whichever canvas it lands on. The mount decides nothing about it; the tree
     // leaves out what external mode has no object for — the controls here, the camera inside Scene.
-    const tree = (_jsx(DebugOverlay, { enabled: debug, children: _jsxs(Scene, { sceneDef: scene, external: external, memoryLimit: memoryLimit, visibleRect: visibleRect, ...cameraProps, children: [!external && _jsx(Controls, { config: controls }), _jsx(PointerMissed, { onPointerMissed: onPointerMissed }), children] }) }));
+    const tree = (_jsx(DebugOverlay, { enabled: debug, children: _jsxs(Scene, { sceneDef: scene, external: external, memoryLimit: memoryLimit, lighting: lighting, visibleRect: visibleRect, ...cameraProps, children: [!external && _jsx(Controls, { config: controls }), _jsx(PointerMissed, { onPointerMissed: onPointerMissed }), children] }) }));
     // The host's context arriving is what selects external mode. The mount swap is an element-type
     // change, so flipping modes at runtime remounts — like `debug`, both are fixed for a renderer's
     // lifetime in practice.
@@ -43,11 +43,23 @@ export function Renderer(props) {
         return (_jsx(ExternalCanvas, { gl: gl, requestFrame: requestFrame, onFrame: onFrame, children: tree }));
     }
     return (_jsx(StrictMode, { children: _jsx(Suspense, { fallback: null, children: _jsx(CanvasWithDebug, { ...canvasProps, debugEnabled: debug, 
-                // Tonemapping off: plan colors are authored values, not scene-referred light.
+                // R3F force-writes ACES filmic tone mapping onto a fresh renderer unless `flat` is set,
+                // which lands it on three's own default, `NoToneMapping`, instead. This renderer does not
+                // tone map: `Lighting` keeps the rig's light sum in range by construction, rather than
+                // compressing an unbounded one back into range afterward.
                 flat: true, 
                 // three leaves the stencil buffer off by default. Line layers need one: it is how they keep
                 // translucent lines from darkening where they overlap (see `LineMaterial`), and without the
                 // buffer the stencil settings silently do nothing. In the MapLibre embed the context is the
                 // map's own, which already has one.
-                gl: { stencil: true }, frameloop: debug ? 'always' : 'demand', resize: { debounce: 50 }, children: tree }) }) }));
+                gl: { stencil: true }, 
+                // three reads a program's info log straight after linking it, and that read blocks until
+                // the driver has finished linking. Left to itself the driver links in the background,
+                // because `KHR_parallel_shader_compile` is there, so the check is the whole of what makes
+                // a compile synchronous: 17 programs cost 64 ms of main thread on a large scene, in
+                // blocks of up to 12 ms, and they land in the frames where the layers are still mounting.
+                // Debug keeps the check, because a broken shader has to report itself somewhere.
+                onCreated: (state) => {
+                    state.gl.debug.checkShaderErrors = debug ?? false;
+                }, frameloop: debug ? 'always' : 'demand', resize: { debounce: 50 }, children: tree }) }) }));
 }

package/dist/core/shader-source.d.ts

@@ -11,6 +11,9 @@
  * Both helpers throw when they cannot find it, for the same reason: what reaches the driver
  * otherwise is a compile error naming an undeclared identifier, a long way from the patch that
  * failed to declare it.
+ *
+ * {@link sceneColorAnchor} is not about `main`, but it answers the same kind of question: where in a
+ * shader's own text a patch belongs.
  */
 /**
  * Declares GLSL above `main`, where file-scope declarations belong — samplers, varyings, functions.
@@ -47,4 +50,21 @@ export declare function openMain(source: string, glsl: string): string;
  * @throws {Error} If the source does not contain the anchor.
  */
 export declare function replaceAnchor(source: string, anchor: string, glsl: string): string;
+/**
+ * Where the fragment's **scene** color is final: the line a patch that changes the scene must land
+ * in front of.
+ *
+ * `<opaque_fragment>` writes the scene color, and three's output chain follows it — tone mapping,
+ * the colorspace conversion, fog, dithering. This returns the first of those. A patch below any of
+ * them would edit a value the chain already transformed, so its strength would depend on how bright
+ * the pixel already was.
+ *
+ * Two spellings, because three resolves `#include` after every `onBeforeCompile` while troika
+ * resolves it earlier, in its own rebuild of `main`. The expanded spelling is the `#if` line rather
+ * than the tone-mapping line inside it: the renderer pins `NoToneMapping`, which leaves
+ * `TONE_MAPPING` undefined, and the preprocessor then strips that block and anything put in it.
+ * @param fragmentShader - The shader to search.
+ * @returns The anchor found, or `undefined` if the shader has no output chain.
+ */
+export declare function sceneColorAnchor(fragmentShader: string): string | undefined;
 //# sourceMappingURL=shader-source.d.ts.map

package/dist/core/shader-source.js

@@ -11,6 +11,9 @@
  * Both helpers throw when they cannot find it, for the same reason: what reaches the driver
  * otherwise is a compile error naming an undeclared identifier, a long way from the patch that
  * failed to declare it.
+ *
+ * {@link sceneColorAnchor} is not about `main`, but it answers the same kind of question: where in a
+ * shader's own text a patch belongs.
  */
 /**
  * Declares GLSL above `main`, where file-scope declarations belong — samplers, varyings, functions.
@@ -56,6 +59,29 @@ export function replaceAnchor(source, anchor, glsl) {
         throw new Error(`shader-source: the shader has no "${anchor}" to rewrite.`);
     return source.slice(0, at) + glsl + source.slice(at + anchor.length);
 }
+/**
+ * Where the fragment's **scene** color is final: the line a patch that changes the scene must land
+ * in front of.
+ *
+ * `<opaque_fragment>` writes the scene color, and three's output chain follows it — tone mapping,
+ * the colorspace conversion, fog, dithering. This returns the first of those. A patch below any of
+ * them would edit a value the chain already transformed, so its strength would depend on how bright
+ * the pixel already was.
+ *
+ * Two spellings, because three resolves `#include` after every `onBeforeCompile` while troika
+ * resolves it earlier, in its own rebuild of `main`. The expanded spelling is the `#if` line rather
+ * than the tone-mapping line inside it: the renderer pins `NoToneMapping`, which leaves
+ * `TONE_MAPPING` undefined, and the preprocessor then strips that block and anything put in it.
+ * @param fragmentShader - The shader to search.
+ * @returns The anchor found, or `undefined` if the shader has no output chain.
+ */
+export function sceneColorAnchor(fragmentShader) {
+    const include = /*glsl*/ `#include <tonemapping_fragment>`;
+    const expanded = /*glsl*/ `#if defined( TONE_MAPPING )`;
+    if (fragmentShader.includes(include))
+        return include;
+    return fragmentShader.includes(expanded) ? expanded : undefined;
+}
 /**
  * Rewrites the first opening of `main`, splicing rather than replacing — so a `$` in the injected
  * GLSL cannot be read as a replacement pattern.

package/dist/debug/components/Gui.d.ts

@@ -12,6 +12,8 @@ import { type PropsWithChildren } from 'react';
  * unmount/remount, the same element is re-attached and the scene's own effects
  * re-add their folders. Rendered as an ancestor of the scene, so on unmount
  * React tears the scene's folders down before this component destroys the panel.
+ * It also registers the panel's single change handler, which asks for a redraw. Every folder in the
+ * panel inherits it, so no controller carries one of its own.
  * @param props - Component props; `children` is the scene subtree that consumes
  *   the GUI via `useGui`.
  * @returns The children wrapped with the GUI provided through context.

package/dist/debug/components/Gui.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import './Gui.module.css'; // Global overrides of lil-gui's stock styling (checkbox row layout).
+import { useThree } from '@react-three/fiber';
 import { GUI } from 'lil-gui';
 import { useEffect, useState } from 'react';
 import { GuiContext } from '../debug-context';
@@ -15,6 +16,8 @@ import { GuiContext } from '../debug-context';
  * unmount/remount, the same element is re-attached and the scene's own effects
  * re-add their folders. Rendered as an ancestor of the scene, so on unmount
  * React tears the scene's folders down before this component destroys the panel.
+ * It also registers the panel's single change handler, which asks for a redraw. Every folder in the
+ * panel inherits it, so no controller carries one of its own.
  * @param props - Component props; `children` is the scene subtree that consumes
  *   the GUI via `useGui`.
  * @returns The children wrapped with the GUI provided through context.
@@ -22,11 +25,18 @@ import { GuiContext } from '../debug-context';
 export function Gui(props) {
     const { children } = props;
     const [gui] = useState(() => new GUI({ autoPlace: false, closeFolders: true }));
+    const invalidate = useThree((state) => state.invalidate);
     useEffect(() => {
         gui.domElement.classList.add('lil-auto-place', 'autoPlace');
         document.body.appendChild(gui.domElement);
         gui.close();
+        // One handler for the whole panel: lil-gui walks a changed controller up its parent chain, so
+        // this fires for every controller in every folder and no folder registers its own. It calls
+        // whichever `invalidate` the current mount installed — in the external embed `ExternalCanvas`
+        // replaces it with the host's `requestFrame`, which is how a GUI change reaches a host that owns
+        // the frame.
+        gui.onChange(() => invalidate());
         return () => gui.destroy();
-    }, [gui]);
+    }, [gui, invalidate]);
     return _jsx(GuiContext, { value: gui, children: children });
 }

package/dist/external/ExternalCanvas.js

@@ -82,8 +82,7 @@ function mountExternal(context, requestFrame, onFrame) {
     camera.matrixAutoUpdate = false;
     camera.matrixWorldAutoUpdate = false;
     camera.manual = true;
-    // Constructed bare on purpose: the plan is drawn in three's own defaults — no tonemapping, sRGB
-    // output — and anything the renderer would opine on is left unset.
+    // Constructed bare on purpose: anything the renderer would opine on is left unset.
     const glRenderer = new WebGLRenderer({ canvas, context });
     // Never clear: the host's own layers are already on the canvas when this renderer draws.
     glRenderer.autoClear = false;
@@ -106,10 +105,10 @@ function mountExternal(context, requestFrame, onFrame) {
     void root
         .configure({
         gl: glRenderer,
-        // `flat` is not an opinion here but a shield: R3F's first configure force-writes
-        // `toneMapping` onto any renderer it is handed — ACES filmic unless flat — and flat is the
-        // one value that lands on three's own default, NoToneMapping. Everything else stays as the
-        // bare constructor left it.
+        // R3F force-writes ACES filmic tone mapping onto a fresh renderer unless `flat` is set, which
+        // is the one value landing on three's own default, `NoToneMapping`. This renderer does not
+        // tone map: `Lighting` keeps the rig's light sum in range by construction, rather than
+        // compressing an unbounded one back into range afterward.
         flat: true,
         // The cast widens past R3F's frustum-camera union; `manual` above is what keeps R3F's own
         // camera handling off it.

package/dist/external/external-camera.js

@@ -50,21 +50,34 @@ export function setExternalCameraProjection(camera, mainMatrix) {
     _mainInverse.copy(M).invert();
     _near.set(0, 0, 1).applyMatrix4(_mainInverse);
     _far.set(0, 0, -1).applyMatrix4(_mainInverse);
-    if (_near.distanceToSquared(_position) > _far.distanceToSquared(_position)) {
-        _direction.copy(_near).sub(_far).normalize();
+    const nearZ = _near.distanceToSquared(_position) <= _far.distanceToSquared(_position) ? 1 : -1;
+    if (nearZ === 1) {
+        _direction.copy(_far).sub(_near).normalize();
     }
     else {
-        _direction.copy(_far).sub(_near).normalize();
+        _direction.copy(_near).sub(_far).normalize();
     }
-    // Step 3: synthesize a rigid view matrix via look-at.
+    // Step 3: the camera's up axis, measured rather than chosen, and a rigid view matrix from it.
+    //
+    // Any up not parallel to the view direction gives a valid (P′, V′) pair for *drawing*, because P
+    // is recomputed from M · matrixWorld at the end and absorbs whatever roll V′ was given. The axis
+    // is also *read*, though: `Lighting` takes the plan's heading from the camera's up axis, so a
+    // chosen one aims the key light at an angle the host never had — a fixed world +z aimed it from
+    // the far side of the plan at every bearing, and every face turned toward the camera lost its
+    // direct light.
+    //
+    // Two points at one clip x and one clip z, one at the top of the screen and one at the bottom,
+    // differ by a vector along the camera's up axis alone: a constant clip z is a constant view-space
+    // z, so the forward components cancel and the difference is (0, Δy, 0) in view space. Clip y
+    // grows upward under every projection, maplibre's reverse-z included, so this reads none of the
+    // host's own conventions — and unlike a chosen axis it has no degenerate view to fall back from,
+    // since the axis it recovers is perpendicular to the view direction by construction.
     //
-    // The choice of "up" is arbitrary as long as it is not parallel to the view direction: any
-    // non-degenerate choice yields a valid (P′, V′) pair, because P is recomputed from
-    // M · matrixWorld at the end. The fallback handles top-down or bottom-up views where world +z
-    // aligns with the view ray.
-    _up.set(0, 0, 1);
-    if (Math.abs(_up.dot(_direction)) > 0.999)
-        _up.set(0, 1, 0);
+    // Unprojected at `nearZ`, the near plane's own clip z: a point there is finite under either z
+    // convention, which an interior z is not.
+    _screenTop.set(0, 1, nearZ).applyMatrix4(_mainInverse);
+    _screenBottom.set(0, -1, nearZ).applyMatrix4(_mainInverse);
+    _up.copy(_screenTop).sub(_screenBottom).normalize();
     _target.copy(_position).add(_direction);
     camera.matrixWorld.lookAt(_position, _target, _up);
     camera.matrixWorld.setPosition(_position);
@@ -84,5 +97,7 @@ const _position = new Vector3();
 const _near = new Vector3();
 const _far = new Vector3();
 const _direction = new Vector3();
+const _screenTop = new Vector3();
+const _screenBottom = new Vector3();
 const _target = new Vector3();
 const _up = new Vector3();

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { type CameraAPI, type CameraAxes, type CameraState, type ControlsConfig, type InertiaConfig, type PanConfig, type RollConfig, type TransitionOptions, useCameraAPI, useCameraMoveStart, useCameraState, type ZoomToOptions, } from './controls';
 export { prepareDebug } from './debug/debug-chunk';
 export { useDebugPanel } from './debug/debug-context';
+export { type LightingProps, type ShadowProps } from './objects/lighting';
 export * from './Renderer';
 export { type CameraProps, type SmoothTime } from './space/Camera';
 export { type CanvasPoint, type CanvasPointLike, type PlanPoint, type PlanPointLike, } from './space/Space';

package/dist/objects/Background.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { declareBeforeMain } from '../core/shader-source';
 import { ColorMaterial } from './materials/ColorMaterial';
-import { DIM_INHERIT, DIM_UNIFORM } from './materials/dim';
+import { DIM_INHERIT, DIM_UNIFORM } from './materials/effects/color-dim';
 /**
  * The scene's background: a screen-space quad drawn below every layer, replacing what a clear
  * color would paint — and unlike one, dimmed with the venue. The root `Layer` renders it inside

package/dist/objects/containers/SlotContainer.js

@@ -1,4 +1,4 @@
-import { DIM_SCHEMA, DIM_UNIFORM, dimOrdered, instanceDim, isDimmed } from '../materials/dim';
+import { DIM_SCHEMA, DIM_UNIFORM, dimOrdered, instanceDim, isDimmed, } from '../materials/effects/color-dim';
 /**
  * One layer's mesh bookkeeping: the bound mesh, which slot each def holds, and the paint order
  * across them.
@@ -133,6 +133,12 @@ export class SlotContainer {
         // `setPaintOrder` defaults to 0 and the component's order pass relabels it in the same effect
         // flush, before anything draws.
         this.orderBySlot[slot] = this.orderByDef.get(def) ?? 0;
+        // Seeded here as well, so the instance's first `setDimAt` — every instance writes its dim as it
+        // mounts — reads the split it already draws on rather than `undefined`, and leaves the order
+        // pass to the structural one. Without it, mounting a layer of n defs runs n full order passes.
+        // A dim that arrives with the sync still crosses the split and still re-orders, and a claim
+        // made before the layer's own dim is known is relabelled by `setPaintOrder` in the same flush.
+        this.dimmedBySlot[slot] = isDimmed(def.dim, this.layerDimmed);
         return slot;
     }
     /**

package/dist/objects/containers/hooks.js

@@ -2,7 +2,7 @@ import { useThree } from '@react-three/fiber';
 import { use, useEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { registerHitResolver } from '../../events/pointer';
 import { registerSlotWriter, subscribeDef, syncNow, versionOf } from '../../update';
-import { LayerDimContext } from '../materials/dim';
+import { LayerDimContext } from '../materials/effects/color-dim';
 /**
  * Creates one layer's container and keeps it wired to its layer for as long as the component is
  * mounted: the membership's paint order, and how hits on its mesh resolve back to defs.

package/dist/objects/containers/props.d.ts

@@ -12,6 +12,16 @@ export interface DefsProps<T extends RenderableDef> {
      * updated.
      */
     defs: readonly T[];
+    /**
+     * How many of `defs` may mount their instances now, counted from the start of the list — the
+     * staged-mount slice, from `useStagedChildren`. Defaults to all of them, which is what a caller
+     * mounting a layer outside the scheduler wants.
+     *
+     * Only the instances are sliced. The container is still built, sized and paint-ordered from the
+     * whole of `defs`, so a growing prefix claims into buffers that were allocated once, and the
+     * order pass that labels them runs per membership change rather than per slice.
+     */
+    mounted?: number;
 }
 /** Props for a component keeping one def's instance in sync. */
 export interface InstanceProps<T extends RenderableDef, C> {

package/dist/objects/images/Images.js

@@ -35,6 +35,11 @@ import { TextureBudgetContext, useResizeFactor } from './texture-budget';
  */
 export function Images(props) {
     const { defs, maxAtlasSize } = props;
+    // Handed to each atlas as a prefix of *its* placements rather than apportioned between them, and
+    // a split source has several placements per def — so a slice mounts somewhere between one and a
+    // few instances per granted child. The scheduler measures what a slice cost and sizes the next
+    // one from that, which is what keeps the budget whatever the ratio turns out to be here.
+    const mounted = props.mounted ?? defs.length;
     const gl = useThree((state) => state.gl);
     const maxTextureSize = maxAtlasSize ?? gl.capabilities.maxTextureSize;
     // Repack when the *set* of images changes, via the "adjust state on prop change" pattern. The
@@ -48,7 +53,7 @@ export function Images(props) {
     if (!sameSet(packed.defs, defs)) {
         setPacked((current) => packImages(defs, maxTextureSize, current.generation + 1));
     }
-    return (_jsx(_Fragment, { children: packed.atlases.map((atlas) => (_jsx(ImageAtlas, { atlas: atlas, defs: defs }, atlasKey(atlas, packed.generation)))) }));
+    return (_jsx(_Fragment, { children: packed.atlases.map((atlas) => (_jsx(ImageAtlas, { atlas: atlas, defs: defs, mounted: mounted }, atlasKey(atlas, packed.generation)))) }));
 }
 /**
  * Draws one atlas as an `InstancedMesh`: the R3F-owned mesh with the atlas texture as its
@@ -67,6 +72,8 @@ export function Images(props) {
  */
 function ImageAtlas(props) {
     const { atlas, defs } = props;
+    // Only the placements are staged; the container and the texture are built from the whole atlas.
+    const mounted = props.mounted ?? atlas.images.length;
     const [texture] = useState(() => makeAtlasTexture(atlas.canvas));
     const container = useContainer(() => new ImageContainer(atlas), defs);
     const invalidate = useThree((state) => state.invalidate);
@@ -94,7 +101,7 @@ function ImageAtlas(props) {
     // pair are placeholders the constructor demands (see `ImageMeshArgs`). The material has to be per
     // mesh: `InstancedMeshExt` wraps whatever it draws with in a closure over its own textures, and two
     // instanced meshes on one material would both render against the first one's.
-    return (_jsxs(_Fragment, { children: [_jsxs(InstancedMesh, { args: container.args, ref: (mesh) => container.bind(mesh), sortObjects: true, customSort: container.customSort, perObjectFrustumCulled: true, children: [_jsx("planeGeometry", {}), _jsx(TextureMaterial, { map: texture, uvOffset: UV_OFFSET_UNIFORM })] }), atlas.images.map((packed) => (_jsx(ImageInstance, { def: packed.def, packed: packed, container: container }, `${defKey(packed.def)}:${packed.uv.u0}:${packed.uv.v0}`)))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(InstancedMesh, { args: container.args, ref: (mesh) => container.bind(mesh), sortObjects: true, customSort: container.customSort, perObjectFrustumCulled: true, children: [_jsx("planeGeometry", {}), _jsx(TextureMaterial, { map: texture, uvOffset: UV_OFFSET_UNIFORM })] }), atlas.images.slice(0, mounted).map((packed) => (_jsx(ImageInstance, { def: packed.def, packed: packed, container: container }, `${defKey(packed.def)}:${packed.uv.u0}:${packed.uv.v0}`)))] }));
 }
 /**
  * Whether two snapshots hold the same *set* of images, order aside — the question "does this need a

package/dist/objects/images/image-container.js

@@ -1,6 +1,6 @@
 import { Vector4 } from 'three';
 import { SlotContainer } from '../containers';
-import { DIM_SCHEMA } from '../materials/dim';
+import { DIM_SCHEMA } from '../materials/effects/color-dim';
 /**
  * The per-instance uniform each atlas mesh reads its texture region from. The container owns the
  * name: it writes each slot's region here (`setUniformAt`) and hands it to the mesh's

package/dist/objects/layer/Layer.js

@@ -5,7 +5,7 @@ import { usePointerProps } from '../../events/pointer';
 import { isImageDefs, isLayerDefs, isLineDefs, isModelDefs, isShapeDefs, isTextDefs, } from '../../types/guards';
 import { Images } from '../images';
 import { Lines } from '../lines';
-import { LayerDimContext } from '../materials/dim';
+import { LayerDimContext } from '../materials/effects/color-dim';
 import { Models } from '../models';
 import { Shapes } from '../shapes';
 import { Texts } from '../text';
@@ -64,7 +64,7 @@ function LayerNode(props) {
     // visibility this is never a prop: nothing between here and the material has any use for it.
     const inheritedDim = use(LayerDimContext);
     const dim = layer.dim ?? inheritedDim;
-    const { children, admitted } = useStagedChildren(layer);
+    const { children, mounted } = useStagedChildren(layer);
     useLayoutTargets(layer, children);
     const pointerProps = usePointerProps(layer, visible);
     let contents = null;
@@ -72,8 +72,8 @@ function LayerNode(props) {
         const childStep = orderStep / children.length;
         contents = children.map((child, index) => (_jsx(LayerNode, { layer: child, parentVisible: visible, orderBase: orderBase + index * childStep, orderStep: childStep }, child.name)));
     }
-    else if (admitted) {
-        contents = _jsx(LeafContent, { defs: children });
+    else if (mounted > 0) {
+        contents = _jsx(LeafContent, { defs: children, mounted: mounted });
     }
     const group = (_jsxs("group", { name: layer.name, visible: !layer.hidden, renderOrder: orderBase, ...pointerProps, children: [prelude, contents] }));
     // Always provided, never conditionally on the layer declaring a `dim`: making the provider appear
@@ -98,17 +98,17 @@ function LayerNode(props) {
  * @returns The container for the defs' kind.
  */
 function LeafContent(props) {
-    const { defs } = props;
+    const { defs, mounted } = props;
     let content = null;
     if (isShapeDefs(defs))
-        content = _jsx(Shapes, { defs: defs });
+        content = _jsx(Shapes, { defs: defs, mounted: mounted });
     else if (isImageDefs(defs))
-        content = _jsx(Images, { defs: defs });
+        content = _jsx(Images, { defs: defs, mounted: mounted });
     else if (isTextDefs(defs))
-        content = _jsx(Texts, { defs: defs });
+        content = _jsx(Texts, { defs: defs, mounted: mounted });
     else if (isLineDefs(defs))
-        content = _jsx(Lines, { defs: defs });
+        content = _jsx(Lines, { defs: defs, mounted: mounted });
     else if (isModelDefs(defs))
-        content = _jsx(Models, { defs: defs });
+        content = _jsx(Models, { defs: defs, mounted: mounted });
     return _jsx(Suspense, { fallback: null, children: content });
 }