react-native-webrtc-kaleidoscope 2.0.0 → 2.1.0

package/src/index.ts

@@ -8,16 +8,31 @@
 
 import { requireNativeModule } from 'expo-modules-core';
 import { Platform } from 'react-native';
-import { BACKGROUND_PRESETS } from './backgrounds';
-import { type ApplyVideoEffects, toEffectSpec } from './types';
+import {
+  createControls,
+  type Reconcile,
+  type ResetLayerUniforms,
+  type SetLayerUniforms,
+  type SetMask,
+} from './kaleidoscope/controls';
+import { toEffectSpec } from './kaleidoscope/effect';
+import type { ApplyVideoEffects, CompositeSpec } from './kaleidoscope/effect.types';
+import type { KaleidoscopeBinding, KaleidoscopeBindOptions } from './kaleidoscope/types';
+import type { KaleidoscopeLayer, KaleidoscopePresetBook } from './kaleidoscope.preset-book.types';
 
+// The native module's tuning functions. Only the three the JS layer drives are
+// declared: blur sigma (from a blur preset's options) and the mask edge (from
+// the mask() verb). The native module also exposes segmentation/debug/reset
+// functions, but nothing in JS calls them anymore, so they're not declared here.
 interface KaleidoscopeNativeModule {
-  setBlurSigma: (value: number) => void;
   setMaskHardness: (value: number) => void;
   setMaskThreshold: (value: number) => void;
-  setSegmentationTargetShortSide: (value: number) => void;
-  setDebugTiming: (value: boolean) => void;
-  resetEffectTuning: () => void;
+  // KaleidoscopePreset layer-stack channel. Optional: a native build predating the
+  // compositor won't expose it, so callers guard with `?.`. JS sends the active
+  // composite's ordered layer stack as a JSON string; native parses + composites
+  // it. Blur sigma and generative uniforms now ride inside each layer's
+  // `uniforms`, so there is no separate setBlurSigma/setShaderUniforms channel.
+  setCompositeLayers?: (json: string) => void;
 }
 
 // Lazy because the module is not available during pure-JS tests; the
@@ -26,72 +41,72 @@ interface KaleidoscopeNativeModule {
 const nativeModule = (): KaleidoscopeNativeModule =>
   requireNativeModule<KaleidoscopeNativeModule>('RnWebrtcKaleidoscope');
 
-/**
- * Set the Gaussian sigma for the blur effect. Higher = softer blur.
- * Clamped to [0.5, 7] (the useful range before the linear-sampled kernel
- * truncates and bands). Default 5.
- */
-export const setBlurSigma = (value: number): void => {
-  nativeModule().setBlurSigma(value);
-};
-
-/**
- * Set the mask smoothstep hardness for blur and background-image
- * composites, in [0, 1]. 0 = soft halo, 1 = near-step edge. Default 0.5.
- */
-export const setMaskHardness = (value: number): void => {
-  nativeModule().setMaskHardness(value);
-};
-
-/**
- * Set the mask smoothstep threshold (center of the transition) in
- * [0.05, 0.95]. 0.5 is neutral. Higher values reject low-confidence
- * pixels (helps tighten the silhouette against chair-edge noise);
- * lower values are more inclusive. Optimal value is platform-specific:
- * all three platforms run MediaPipe selfie segmentation, but the input
- * downscale and API variant differ and produce different confidence
- * distributions.
- */
-export const setMaskThreshold = (value: number): void => {
-  nativeModule().setMaskThreshold(value);
-};
-
-/**
- * Set the segmentation input short-side (px). The person mask is computed from
- * an input downscaled to this; lower = cheaper segmentation (helps on older
- * devices like the A11), softer mask edge. Default 384, clamped [128, 1080]
- * identically on both native platforms. Native only; the web pipeline ignores it.
- */
-export const setSegmentationTargetShortSide = (value: number): void => {
-  nativeModule().setSegmentationTargetShortSide(value);
-};
-
-/**
- * Toggle native per-frame GPU/segmentation timing logs (off by default). iOS
- * logs under os_log "Perf"; Android under the "Perf" logcat tag.
- */
-export const setDebugTiming = (value: boolean): void => {
-  nativeModule().setDebugTiming(value);
-};
+// The native tuning functions (setMaskHardness / setMaskThreshold) remain on the
+// native module and are called internally: the mask edge flows from the mask()
+// verb (see bindKaleidoscope). The composite layer stack flows through
+// setCompositeLayers. The old global set* JS exports are gone; effects are driven by
+// kaleidoscope / transform / mask, not loose setters.
 
-/**
- * Reset all effect tuning parameters to library defaults.
- */
-export const resetEffectTuning = (): void => {
-  nativeModule().resetEffectTuning();
-};
-
-export type { BackgroundPresetName } from './backgrounds';
+export type { CatalogImageId } from '../catalog/images';
+export type {
+  AnamorphicLensFlareUniforms,
+  BlurUniforms,
+  CloudsUniforms,
+  CorporateBlobsUniforms,
+  FirefliesUniforms,
+  GodraysUniforms,
+  LayerShaderName,
+  LayerShaderOptions,
+  LightBeamsAndMotesUniforms,
+  NebulaUniforms,
+  PatchableShaderName,
+  PlasmaUniforms,
+  ShaderUniformsMap,
+  SimianlightsUniforms,
+  UniformControl,
+} from '../catalog/shaders';
+// Per-shader control descriptors (platform-agnostic data). Imported individually
+// per the shader a preset's layer uses; there is no all-shaders aggregate.
+export {
+  ANAMORPHIC_LENSFLARE_CONTROLS,
+  BLUR_CONTROLS,
+  CLOUDS_CONTROLS,
+  CORPORATE_BLOBS_CONTROLS,
+  defaultUniforms,
+  FIREFLIES_CONTROLS,
+  GODRAYS_CONTROLS,
+  LIGHT_BEAMS_AND_MOTES_CONTROLS,
+  NEBULA_CONTROLS,
+  PLASMA_CONTROLS,
+  SIMIANLIGHTS_CONTROLS,
+} from '../catalog/shaders';
 export type {
-  ApplyVideoEffects,
-  BackgroundImageSpec,
-  BlurSpec,
+  CompositeSpec,
   EffectInput,
   EffectName,
   EffectSpec,
   TransformName,
   TransformSpec,
-} from './types';
+} from './kaleidoscope/effect.types';
+export type {
+  KaleidoscopeBinding,
+  KaleidoscopeBindOptions,
+  MaskInput,
+  PatchesFor,
+  PatchFor,
+  TransformInput,
+} from './kaleidoscope/types';
+export type {
+  KaleidoscopeBlendMode,
+  KaleidoscopeControls,
+  KaleidoscopeLayer,
+  KaleidoscopeLayerTarget,
+  KaleidoscopePreset,
+  KaleidoscopePresetBook,
+  KaleidoscopePresetEntry,
+  KaleidoscopeTaxonomy,
+} from './kaleidoscope.preset-book.types';
+export type { RGB } from './lib/primitives.types';
 
 interface WebRTCTrackExtensions {
   remote?: boolean;
@@ -114,41 +129,56 @@ interface WebRTCTrackExtensions {
 // because rn-webrtc's setVideoEffects calls ProcessorProvider.getProcessor()
 // and filters nulls into an empty list, which then hits the
 // VideoEffectProcessor empty-processors-list bug (refcount goes negative,
-// EglRenderer crashes one frame later). Until each effect ships a native
-// factory, dropping its name here is the safe behavior.
+// EglRenderer crashes one frame later). Dropping an unregistered name here is
+// the safe behavior.
 //
-// Background-image preset names come from src/backgrounds.ts; the encoder
-// turns `{name:'background-image', source:'dark-office'}` into the flat-string
-// `'background-image-dark-office'` because the rn-webrtc native registry is
-// keyed by flat strings (parameterization via uniforms is a follow-up).
-//
-// iOS registers the same effects via ios/.../Registration.swift. Each
-// platform's allowlist matches exactly what its native Registration installs;
-// anything else is filtered out before reaching upstream so a name with no
-// registered processor never triggers the empty-processors-list crash.
-// The four geometric transform ops share one native processor per platform
-// (TransformFactory on Android, TransformProcessor on iOS); each is a flat name.
+// The art axis is now one registered "composite" compositor: blur, images, and
+// generative shaders are all layers inside it, delivered out-of-band via
+// setCompositeLayers. The four geometric transform ops share one native processor
+// per platform (TransformFactory on Android, TransformProcessor on iOS); each is
+// a flat name. iOS registers the same set via ios/.../Registration.swift.
 const TRANSFORM_EFFECTS: readonly string[] = ['flip-x', 'flip-y', 'rotate-cw', 'rotate-ccw'];
 
 // Android (Registration.kt) and iOS (Registration.swift) install an identical
 // effect set, so one list covers both natives. If the platforms ever diverge,
 // split this back into per-platform lists keyed off Platform.OS.
-const NATIVE_REGISTERED_EFFECTS_LIST: readonly string[] = [
-  ...TRANSFORM_EFFECTS,
-  'blur',
-  ...BACKGROUND_PRESETS.map((name) => `background-image-${name}`),
-];
+const NATIVE_REGISTERED_EFFECTS_LIST: readonly string[] = [...TRANSFORM_EFFECTS, 'composite'];
 
 const registeredForPlatform = (): readonly string[] =>
   Platform.OS === 'android' || Platform.OS === 'ios' ? NATIVE_REGISTERED_EFFECTS_LIST : [];
 
 const NATIVE_REGISTERED_EFFECTS: ReadonlySet<string> = new Set(registeredForPlatform());
 
+// Serialize a composite's layer stack to the JSON shape the native CompositeLayers
+// channel parses: an array of { id, shader, target, blend?, source?, uniforms? }.
+// Every layer carries its `id`. An `image` layer's native `source` IS its `id`
+// (the bundled WebP basename the prebuild plugin copied under that name); all
+// other layers carry their uniforms.
+const serializeCompositeLayers = (layers: ReadonlyArray<KaleidoscopeLayer>): string => {
+  const wire = layers.map((layer) => {
+    const base: Record<string, unknown> = {
+      id: layer.id,
+      shader: layer.shader,
+      target: layer.target ?? 'background',
+    };
+    if (layer.blend != null) base.blend = layer.blend;
+    if (layer.shader === 'image') {
+      // The layer id is the image id (the bundled WebP basename); the native
+      // compositor resolves assets/images/<id>.webp from it.
+      base.source = layer.id;
+    } else if ('uniforms' in layer) {
+      base.uniforms = layer.uniforms;
+    }
+    return base;
+  });
+  return JSON.stringify(wire);
+};
+
 const specToNativeName = (spec: ReturnType<typeof toEffectSpec>): string => {
-  // background-image uses one registered factory per source preset.
-  // {name: 'background-image', source: 'dark-office'} -> 'background-image-dark-office'
-  if (spec.name === 'background-image') {
-    return `background-image-${spec.source}`;
+  // The composite runs through the single registered "composite" compositor; its
+  // layer stack is delivered out-of-band via setCompositeLayers (see applyVideoEffects).
+  if (spec.name === 'composite') {
+    return 'composite';
   }
   return spec.name;
 };
@@ -161,7 +191,10 @@ const specToNativeName = (spec: ReturnType<typeof toEffectSpec>): string => {
 // entry be collected when the track is.
 const lastAppliedSignatureByTrack = new WeakMap<object, string>();
 
-export const applyVideoEffects: ApplyVideoEffects = (track, effects) => {
+// The lower-level native primitive: route a spec array through the upstream
+// `_setVideoEffects`. Internal now (the public surface is the three verbs);
+// `bindKaleidoscope`'s reconcile drives it.
+const applyVideoEffects: ApplyVideoEffects = (track, effects) => {
   const t = track as MediaStreamTrack & WebRTCTrackExtensions;
   if (t.remote) {
     throw new Error('kaleidoscope: cannot apply effects to remote tracks');
@@ -171,11 +204,26 @@ export const applyVideoEffects: ApplyVideoEffects = (track, effects) => {
       'kaleidoscope: track has no _setVideoEffects method (is react-native-webrtc >=124 installed?)',
     );
   }
-  // Native side currently only consumes effect names. Spec parameters (blur
-  // sigma, etc.) are dropped here; they wire through in a follow-up commit
-  // once the GPU effects accept uniforms.
-  const allNames = effects.map((e) => specToNativeName(toEffectSpec(e)));
-  const names = allNames.filter((n) => NATIVE_REGISTERED_EFFECTS.has(n));
+  const specs = effects.map(toEffectSpec);
+  // Deliver the composite's layer stack out-of-band before the "composite" name
+  // is dispatched. Blur sigma and generative uniforms ride inside each layer's
+  // `uniforms`. Guarded: a native build without the compositor lacks the function
+  // (and drops the "composite" name below if not registered).
+  for (const spec of specs) {
+    if (spec.name === 'composite') {
+      nativeModule().setCompositeLayers?.(serializeCompositeLayers((spec as CompositeSpec).layers));
+    }
+  }
+  // The composite name is book-driven: the prebuild copied the images and native
+  // registration installed the one "composite" compositor, so it passes the
+  // crash-guard. Transforms must be in the static set (always are).
+  const mapped = specs.map((spec) => ({
+    name: specToNativeName(spec),
+    trusted: spec.name === 'composite',
+  }));
+  const names = mapped
+    .filter((m) => m.trusted || NATIVE_REGISTERED_EFFECTS.has(m.name))
+    .map((m) => m.name);
 
   // Dedup against the last set applied to this track. Order is significant
   // (effects chain in array order), so the signature preserves it. Skip the
@@ -187,7 +235,9 @@ export const applyVideoEffects: ApplyVideoEffects = (track, effects) => {
   }
   lastAppliedSignatureByTrack.set(track, signature);
 
-  const dropped = allNames.filter((n) => !NATIVE_REGISTERED_EFFECTS.has(n));
+  const dropped = mapped
+    .filter((m) => !m.trusted && !NATIVE_REGISTERED_EFFECTS.has(m.name))
+    .map((m) => m.name);
   if (dropped.length > 0) {
     console.warn(
       `kaleidoscope: dropping effects not registered on this native platform: ${dropped.join(', ')}. ` +
@@ -206,9 +256,40 @@ export const applyVideoEffects: ApplyVideoEffects = (track, effects) => {
   //     violates the React Native bridge's nonnull contract. The supported
   //     clear value is `[]`, which iOS's VideoEffectProcessor treats as a
   //     passthrough (no double-release bug on this platform).
-  // The explicit type annotation is required — without it TS widens the
+  // The explicit type annotation is required; without it TS widens the
   // empty-array literal to `never[] | null`.
   const clearValue: ReadonlyArray<string> | null = Platform.OS === 'ios' ? [] : null;
   t._setVideoEffects(names.length === 0 ? clearValue : names);
   return track;
 };
+
+/**
+ * Bind a track and a preset book; get the three verbs back
+ * (`{ kaleidoscope, transform, mask }`). On native the track is mutated in
+ * place, so `controls.track` is the bound track and `onTrack` fires with it
+ * after each `kaleidoscope` preset switch and `transform` command. `mask`
+ * updates the segmentation edge the per-frame processors read.
+ */
+export const bindKaleidoscope = <P extends KaleidoscopePresetBook>(
+  track: MediaStreamTrack,
+  options: KaleidoscopeBindOptions<P>,
+): KaleidoscopeBinding<P> => {
+  const reconcile: Reconcile = {
+    apply: (specs) => applyVideoEffects(track, specs),
+    dispose: () => {},
+  };
+  const setMask: SetMask = (hardness, threshold) => {
+    nativeModule().setMaskHardness(hardness);
+    nativeModule().setMaskThreshold(threshold);
+  };
+  // Native has no live per-layer uniform channel yet (Phase B): a patch of the
+  // active preset is a no-op here, so the verb's patch path is inert on native
+  // until the compositor reads layer-id-keyed overrides. The verb still drives
+  // preset switches through reconcile.
+  const setLayerUniforms: SetLayerUniforms = () => {};
+  // Native re-sends the full layer stack (with baked uniforms) on every preset
+  // switch via setCompositeLayers, so there is no stale override to clear; no-op for
+  // parity with the inert setLayerUniforms above.
+  const resetLayerUniforms: ResetLayerUniforms = () => {};
+  return createControls(track, options, reconcile, setMask, setLayerUniforms, resetLayerUniforms);
+};

package/src/index.web.ts

@@ -4,85 +4,98 @@
 // resolution; the `.web.ts` suffix here is just our source convention, not what
 // selects this file at consume time.
 //
-// applyVideoEffects(track, effects) wires an Insertable-Streams pipeline that
-// chains each effect's transform and returns a new MediaStreamTrack carrying
-// the transformed frames. Pass the returned track to a `<video>` element or
-// to `RTCRtpSender.replaceTrack(...)`.
+// Every visual effect is one composite (a layer stack) or one transform. A
+// composite wires an Insertable-Streams stage that runs the whole layer stack
+// through the compositor and returns a new MediaStreamTrack carrying the
+// transformed frames. Pass the returned track to a `<video>` element or to
+// `RTCRtpSender.replaceTrack(...)`.
 
-import { type ApplyVideoEffects, type EffectInput, type EffectSpec, toEffectSpec } from './types';
-import { makeBackgroundImage } from './web/effects/background-image';
-import { blur } from './web/effects/blur';
-import { makeTransform } from './web/effects/transform';
 import {
   applyEffectToTrack,
   type DisposablePipeline,
   type FrameTransform,
-} from './web/insertable-streams';
-import { tuning } from './web/tuning';
-
-/**
- * Set the Gaussian sigma for the blur effect. Higher = softer blur.
- * Clamped to [0.5, 7] (the useful range before the linear-sampled kernel
- * truncates and bands). Default 5.
- */
-export const setBlurSigma = (value: number): void => {
-  tuning.setBlurSigma(value);
-};
-
-/**
- * Set the mask smoothstep hardness for blur and background-image
- * composites, in [0, 1]. 0 = soft halo, 1 = near-step edge. Default 0.5.
- */
-export const setMaskHardness = (value: number): void => {
-  tuning.setMaskHardness(value);
-};
-
-/**
- * Set the mask smoothstep threshold (center of the transition) in
- * [0.05, 0.95]. 0.5 is neutral. Higher values reject low-confidence
- * pixels; lower values are more inclusive. Optimal value is platform-
- * specific because each segmentation model has a different confidence
- * distribution.
- */
-export const setMaskThreshold = (value: number): void => {
-  tuning.setMaskThreshold(value);
-};
-
-/**
- * Set the segmentation input short-side (px). Native-only knob (lower =
- * cheaper segmentation on older devices); stored on web for API parity but
- * the web MediaPipe pipeline does not consume it.
- */
-export const setSegmentationTargetShortSide = (value: number): void => {
-  tuning.setSegmentationTargetShortSide(value);
-};
-
-/**
- * Toggle native per-frame timing logs (off by default). No-op effect on web
- * beyond storing the flag.
- */
-export const setDebugTiming = (value: boolean): void => {
-  tuning.setDebugTiming(value);
-};
+  makeComposite,
+  makeTransform,
+  resetLayerUniforms as resetCompositeLayerUniforms,
+  setLayerUniforms as setCompositeLayerUniforms,
+  tuning,
+} from '../web-driver';
+import {
+  createControls,
+  type Reconcile,
+  type ResetLayerUniforms,
+  type SetLayerUniforms,
+  type SetMask,
+} from './kaleidoscope/controls';
+import { toEffectSpec } from './kaleidoscope/effect';
+import type { EffectInput, EffectSpec } from './kaleidoscope/effect.types';
+import type { KaleidoscopeBinding, KaleidoscopeBindOptions } from './kaleidoscope/types';
+import type { KaleidoscopePresetBook } from './kaleidoscope.preset-book.types';
 
-/**
- * Reset all effect tuning parameters to library defaults.
- */
-export const resetEffectTuning = (): void => {
-  tuning.reset();
-};
+// The tuning channel (tuning.*) is internal: the mask edge flows from the mask()
+// verb (see bindKaleidoscope). Per-layer uniform tuning flows from the
+// kaleidoscope verb's patch path into the composite compositor's live channel. The
+// old global set* exports are gone; effects are driven by kaleidoscope /
+// transform / mask, not loose setters.
 
-export type { BackgroundPresetName } from './backgrounds';
+export type { CatalogImageId } from '../catalog/images';
+export type {
+  AnamorphicLensFlareUniforms,
+  BlurUniforms,
+  CloudsUniforms,
+  CorporateBlobsUniforms,
+  FirefliesUniforms,
+  GodraysUniforms,
+  LayerShaderName,
+  LayerShaderOptions,
+  LightBeamsAndMotesUniforms,
+  NebulaUniforms,
+  PatchableShaderName,
+  PlasmaUniforms,
+  ShaderUniformsMap,
+  SimianlightsUniforms,
+  UniformControl,
+} from '../catalog/shaders';
+export {
+  ANAMORPHIC_LENSFLARE_CONTROLS,
+  BLUR_CONTROLS,
+  CLOUDS_CONTROLS,
+  CORPORATE_BLOBS_CONTROLS,
+  defaultUniforms,
+  FIREFLIES_CONTROLS,
+  GODRAYS_CONTROLS,
+  LIGHT_BEAMS_AND_MOTES_CONTROLS,
+  NEBULA_CONTROLS,
+  PLASMA_CONTROLS,
+  SIMIANLIGHTS_CONTROLS,
+} from '../catalog/shaders';
 export type {
-  ApplyVideoEffects,
-  BackgroundImageSpec,
-  BlurSpec,
+  CompositeSpec,
   EffectInput,
   EffectName,
   EffectSpec,
   TransformName,
   TransformSpec,
-} from './types';
+} from './kaleidoscope/effect.types';
+export type {
+  KaleidoscopeBinding,
+  KaleidoscopeBindOptions,
+  MaskInput,
+  PatchesFor,
+  PatchFor,
+  TransformInput,
+} from './kaleidoscope/types';
+export type {
+  KaleidoscopeBlendMode,
+  KaleidoscopeControls,
+  KaleidoscopeLayer,
+  KaleidoscopeLayerTarget,
+  KaleidoscopePreset,
+  KaleidoscopePresetBook,
+  KaleidoscopePresetEntry,
+  KaleidoscopeTaxonomy,
+} from './kaleidoscope.preset-book.types';
+export type { RGB } from './lib/primitives.types';
 
 const specToTransform = (spec: EffectSpec): FrameTransform => {
   switch (spec.name) {
@@ -91,12 +104,11 @@ const specToTransform = (spec: EffectSpec): FrameTransform => {
     case 'rotate-cw':
     case 'rotate-ccw':
       return makeTransform(spec.name);
-    case 'blur':
-      // Blur strength comes from the global tuning state (setBlurSigma), not
-      // the spec; the spec carries no parameters.
-      return blur;
-    case 'background-image':
-      return makeBackgroundImage(spec.source);
+    case 'composite':
+      // The layer stack runs as a single compositor stage (painter's order,
+      // per-layer blend), not a serial chain of replace-stages. Blur, image, and
+      // generative layers all live inside it.
+      return makeComposite(spec.layers);
   }
 };
 
@@ -139,5 +151,45 @@ export const applyVideoEffectsDisposable = (
   };
 };
 
-export const applyVideoEffects: ApplyVideoEffects = (track, effects) =>
-  applyVideoEffectsDisposable(track, effects).track;
+/**
+ * Bind a track and a preset book; get the three verbs back
+ * (`{ kaleidoscope, transform, mask }`). Presets live in the consumer's
+ * project; these verbs drive them. On web each `kaleidoscope` preset switch and
+ * each `transform` command rebuilds the Insertable-Streams pipeline and yields a
+ * new output track, so read the live track from `onTrack` (or `controls.track`);
+ * the prior pipeline is disposed each command and on `dispose()`. A `kaleidoscope`
+ * patch of the active preset and `mask` both update what the running pipeline
+ * reads per frame (no rebuild).
+ */
+export const bindKaleidoscope = <P extends KaleidoscopePresetBook>(
+  track: MediaStreamTrack,
+  options: KaleidoscopeBindOptions<P>,
+): KaleidoscopeBinding<P> => {
+  let prevDispose = (): void => {};
+  const reconcile: Reconcile = {
+    apply: (specs) => {
+      // Rebuild the whole pipeline from the base track each command, disposing
+      // the previous one (generators/pipes) so stages don't leak.
+      prevDispose();
+      const { track: out, dispose } = applyVideoEffectsDisposable(track, specs);
+      prevDispose = dispose;
+      return out;
+    },
+    dispose: () => prevDispose(),
+  };
+  const setMask: SetMask = (hardness, threshold) => {
+    tuning.setMaskHardness(hardness);
+    tuning.setMaskThreshold(threshold);
+  };
+  // Live per-layer uniform channel: a patch of the active preset writes here
+  // (keyed by layer id) and the running compositor merges it each frame.
+  const setLayerUniforms: SetLayerUniforms = (id, uniforms) => {
+    setCompositeLayerUniforms(id, uniforms);
+  };
+  // A preset switch drops every live override so reused layer ids revert to the
+  // new preset's baked uniforms (see createControls).
+  const resetLayerUniforms: ResetLayerUniforms = () => {
+    resetCompositeLayerUniforms();
+  };
+  return createControls(track, options, reconcile, setMask, setLayerUniforms, resetLayerUniforms);
+};