@volter/editor-game 0.5.65

package/src/three/authoring/spatial-light-handles.ts

@@ -0,0 +1,178 @@
+/**
+ * Native Three light projection onto the format-neutral spatial-handle seam.
+ *
+ * The live THREE.Light remains the value owner and the R3F adapter remains the
+ * persistence owner. This module only converts native distance/angle values to
+ * world-space geometry and a dragged world point back to the same native prop.
+ */
+
+import type { SpatialHandleLayer, SpatialPoint3 } from '@volter/editor-project/adapter';
+import * as THREE from 'three';
+import { applyTypedField, type TypedThreeField, typedFieldForPath } from './typed-three-inspector';
+
+const RANGE_COLOR = '#ffd166';
+const ANGLE_COLOR = '#ff9f43';
+const ROUND_TO = 1000;
+
+export type LightHandleId = 'light-range' | 'light-angle';
+
+export interface LightHandleEdit {
+  readonly field: TypedThreeField;
+  readonly value: number;
+}
+
+function tuple(value: THREE.Vector3): SpatialPoint3 {
+  return [value.x, value.y, value.z];
+}
+
+function rounded(value: number): number {
+  return Math.round(value * ROUND_TO) / ROUND_TO;
+}
+
+function lightFrame(object: THREE.Object3D): {
+  origin: THREE.Vector3;
+  rangeAxis: THREE.Vector3;
+} {
+  object.updateWorldMatrix(true, false);
+  const rotation = object.getWorldQuaternion(new THREE.Quaternion());
+  return {
+    origin: object.getWorldPosition(new THREE.Vector3()),
+    rangeAxis: new THREE.Vector3(1, 0, 0).applyQuaternion(rotation).normalize(),
+  };
+}
+
+function spotFrame(light: THREE.SpotLight): {
+  origin: THREE.Vector3;
+  direction: THREE.Vector3;
+  radial: THREE.Vector3;
+} {
+  light.updateWorldMatrix(true, false);
+  light.target.updateWorldMatrix(true, false);
+  const origin = light.getWorldPosition(new THREE.Vector3());
+  const target = light.target.getWorldPosition(new THREE.Vector3());
+  const direction = target.sub(origin).normalize();
+  if (direction.lengthSq() < 1e-8) {
+    direction.set(0, 0, -1).applyQuaternion(light.getWorldQuaternion(new THREE.Quaternion()));
+  }
+  const reference =
+    Math.abs(direction.y) > 0.98 ? new THREE.Vector3(1, 0, 0) : new THREE.Vector3(0, 1, 0);
+  const radial = new THREE.Vector3().crossVectors(direction, reference).normalize();
+  return { origin, direction, radial };
+}
+
+function pointOnSpotCone(
+  origin: THREE.Vector3,
+  direction: THREE.Vector3,
+  radial: THREE.Vector3,
+  length: number,
+  halfAngle: number,
+): THREE.Vector3 {
+  return origin
+    .clone()
+    .addScaledVector(direction, Math.cos(halfAngle) * length)
+    .addScaledVector(radial, Math.sin(halfAngle) * length);
+}
+
+/** Point/spot range and spot cone geometry. A zero Three distance means
+ * unbounded, so it deliberately has no finite range ring or drag point. */
+export function lightHandleLayer(
+  object: THREE.Object3D,
+  writable: (path: string) => boolean,
+): SpatialHandleLayer | null {
+  const light = object as THREE.Object3D &
+    Partial<THREE.PointLight> & {
+      isPointLight?: boolean;
+      isSpotLight?: boolean;
+    };
+  if (!light.isPointLight && !light.isSpotLight) return null;
+
+  const { origin, rangeAxis } = lightFrame(object);
+  const distance = typeof light.distance === 'number' ? light.distance : 0;
+  const guides: SpatialHandleLayer['guides'][number][] = [];
+  const handles: SpatialHandleLayer['handles'][number][] = [];
+
+  if (distance > 0) {
+    guides.push({
+      kind: 'sphere',
+      center: tuple(origin),
+      radius: distance,
+      color: RANGE_COLOR,
+      opacity: 0.62,
+    });
+    handles.push({
+      id: 'light-range',
+      label: 'Light range',
+      position: tuple(origin.clone().addScaledVector(rangeAxis, distance)),
+      color: RANGE_COLOR,
+      writable: writable('light.distance'),
+    });
+  }
+
+  if (light.isSpotLight) {
+    const spot = object as THREE.SpotLight;
+    const { direction, radial } = spotFrame(spot);
+    // With an unbounded spot, target distance supplies only a readable guide
+    // length; it never becomes an authored light value.
+    const targetDistance = origin.distanceTo(spot.target.getWorldPosition(new THREE.Vector3()));
+    const length = distance > 0 ? distance : Math.max(1, targetDistance);
+    const fullAngle = THREE.MathUtils.radToDeg(spot.angle * 2);
+    guides.push({
+      kind: 'cone',
+      origin: tuple(origin),
+      direction: tuple(direction),
+      length,
+      angle: fullAngle,
+      color: ANGLE_COLOR,
+      opacity: 0.75,
+    });
+    handles.push({
+      id: 'light-angle',
+      label: 'Spot angle',
+      position: tuple(pointOnSpotCone(origin, direction, radial, length, spot.angle)),
+      color: ANGLE_COLOR,
+      writable: writable('light.angle'),
+    });
+  }
+
+  return guides.length > 0 || handles.length > 0
+    ? { id: 'light', category: 'lights', guides, handles }
+    : null;
+}
+
+/** Translate a drag point into the exact native/source field it edits. */
+export function lightEditFromWorld(
+  object: THREE.Object3D,
+  sourceTag: string | undefined,
+  handleId: string,
+  worldPosition: SpatialPoint3,
+): LightHandleEdit | null {
+  const light = object as THREE.Object3D &
+    Partial<THREE.PointLight> & {
+      isPointLight?: boolean;
+      isSpotLight?: boolean;
+    };
+  const point = new THREE.Vector3(...worldPosition);
+  let path: string;
+  let value: number;
+
+  if (handleId === 'light-range' && (light.isPointLight || light.isSpotLight)) {
+    path = 'light.distance';
+    value = Math.max(0.01, rounded(point.distanceTo(lightFrame(object).origin)));
+  } else if (handleId === 'light-angle' && light.isSpotLight) {
+    path = 'light.angle';
+    const { origin, direction } = spotFrame(object as THREE.SpotLight);
+    const delta = point.sub(origin);
+    const axial = delta.dot(direction);
+    const radial = Math.sqrt(Math.max(0, delta.lengthSq() - axial * axial));
+    value = rounded(Math.max(0.01, Math.min(Math.PI / 2, Math.atan2(radial, axial))));
+  } else {
+    return null;
+  }
+
+  const field = typedFieldForPath(object, null, path, sourceTag);
+  return field ? { field, value } : null;
+}
+
+export function previewLightEdit(object: THREE.Object3D, edit: LightHandleEdit): void {
+  applyTypedField(object, null, edit.field, edit.value);
+}

package/src/three/authoring/spatial-lod-handles.ts

@@ -0,0 +1,93 @@
+/** Native THREE.LOD distance thresholds projected onto generic viewport guides. */
+
+import type { R3fLodBinding } from '@volter/editor-core/ui-source/r3f-lod-binding';
+import type { SpatialHandleLayer, SpatialPoint3 } from '@volter/editor-project/adapter';
+import * as THREE from 'three';
+
+const COLORS = ['#7dd3fc', '#60a5fa', '#818cf8', '#a78bfa', '#c084fc'];
+const ROUND_TO = 1000;
+
+export interface LodSourceBinding {
+  readonly key: string;
+  readonly sourceOid?: string;
+  readonly sourceFile?: string;
+  readonly source?: R3fLodBinding;
+  readonly lod: THREE.LOD;
+  readonly writableDistances: ReadonlySet<number>;
+  readonly writableHysteresis: boolean;
+}
+
+export interface LodDistanceEdit {
+  readonly binding: LodSourceBinding;
+  readonly level: number;
+  readonly value: number;
+}
+
+function centerOf(binding: LodSourceBinding): THREE.Vector3 {
+  binding.lod.updateWorldMatrix(true, false);
+  return binding.lod.getWorldPosition(new THREE.Vector3());
+}
+
+function color(index: number): string {
+  return COLORS[index % COLORS.length]!;
+}
+
+export function lodHandleLayer(binding: LodSourceBinding): SpatialHandleLayer {
+  const center = centerOf(binding);
+  const guides: SpatialHandleLayer['guides'][number][] = [];
+  const handles: SpatialHandleLayer['handles'][number][] = [];
+  binding.lod.levels.forEach((level, index) => {
+    if (!Number.isFinite(level.distance) || level.distance <= 0) return;
+    guides.push({
+      kind: 'sphere',
+      center: [center.x, center.y, center.z],
+      radius: level.distance,
+      color: color(index),
+      opacity: 0.56,
+    });
+    handles.push({
+      id: `lod:${encodeURIComponent(binding.key)}:${index}`,
+      label: `LOD ${index} distance`,
+      position: [center.x + level.distance, center.y, center.z],
+      color: color(index),
+      writable: binding.writableDistances.has(index),
+    });
+  });
+  return { id: `lod:${binding.key}`, category: 'lod', guides, handles };
+}
+
+function rounded(value: number): number {
+  return Math.round(value * ROUND_TO) / ROUND_TO;
+}
+
+export function normalizeLodDistance(
+  binding: LodSourceBinding,
+  level: number,
+  value: number,
+): number {
+  const previous = binding.lod.levels[level - 1]?.distance;
+  const next = binding.lod.levels[level + 1]?.distance;
+  const minimum = previous === undefined ? 0 : previous + 0.01;
+  const maximum = next === undefined ? Number.POSITIVE_INFINITY : Math.max(minimum, next - 0.01);
+  return rounded(THREE.MathUtils.clamp(value, minimum, maximum));
+}
+
+export function lodEditFromWorld(
+  bindings: readonly LodSourceBinding[],
+  handleId: string,
+  worldPosition: SpatialPoint3,
+): LodDistanceEdit | null {
+  const match = /^lod:([^:]+):(\d+)$/.exec(handleId);
+  if (!match) return null;
+  const key = decodeURIComponent(match[1]!);
+  const level = Number(match[2]);
+  const binding = bindings.find((candidate) => candidate.key === key);
+  if (!binding || !binding.writableDistances.has(level)) return null;
+  const value = new THREE.Vector3(...worldPosition).distanceTo(centerOf(binding));
+  return { binding, level, value: normalizeLodDistance(binding, level, value) };
+}
+
+export function previewLodDistance(edit: LodDistanceEdit): void {
+  const level = edit.binding.lod.levels[edit.level];
+  if (level) level.distance = edit.value;
+}

package/src/three/authoring/spatial-particle-handles.ts

@@ -0,0 +1,368 @@
+/** Native three.quarks emitter shapes projected onto generic viewport guides. */
+
+import type {
+  QuarksEmitterShape,
+  R3fParticleBinding,
+} from '@volter/editor-core/ui-source/r3f-particle-binding';
+import type { SpatialHandleLayer, SpatialPoint3 } from '@volter/editor-project/adapter';
+import * as THREE from 'three';
+
+const PARTICLE_COLOR = '#ff9f43';
+const PARTICLE_SECONDARY = '#ffd166';
+const ROUND_TO = 1000;
+
+export interface NativeEmitterShape {
+  readonly type: QuarksEmitterShape;
+  radius?: number;
+  arc?: number;
+  thickness?: number;
+  angle?: number;
+  donutRadius?: number;
+  width?: number;
+  height?: number;
+  column?: number;
+  row?: number;
+}
+
+/**
+ * A three.quarks `ParticleSystem.emitter`, once the SOURCE has declared it.
+ *
+ * Deliberately carries no `type: 'ParticleEmitter'` discriminant. Which live
+ * object is an emitter is decided by the project's own source — the
+ * `<primitive object={system.emitter}>` element the OID index stamps with a
+ * `particleBinding` — never by string-matching a third-party library's
+ * internal `Object3D.type`. See `particleBindingsOf` in
+ * `r3f-source-authoring-adapter.ts` for the one place that decision is made.
+ */
+export interface NativeParticleEmitter extends THREE.Object3D {
+  readonly system: { readonly emitterShape: NativeEmitterShape };
+}
+
+/**
+ * The native emitter shape of an object the source already declared to be an
+ * emitter, or `null` when the live object does not carry one.
+ *
+ * This reads the declared object's OWN three.quarks state; it is not a test of
+ * whether an arbitrary object is an emitter, and must never be used as one.
+ */
+export function nativeEmitterShapeOf(object: THREE.Object3D): NativeEmitterShape | null {
+  const shape = (object as Partial<NativeParticleEmitter>).system?.emitterShape;
+  return shape && typeof shape.type === 'string' ? shape : null;
+}
+
+export interface ParticleSourceBinding {
+  readonly sourceOid: string;
+  readonly sourceFile: string;
+  readonly source: R3fParticleBinding;
+  readonly emitter: NativeParticleEmitter;
+  readonly shape: NativeEmitterShape;
+  readonly writableFields: ReadonlySet<string>;
+}
+
+export interface ParticleFieldEdit {
+  readonly binding: ParticleSourceBinding;
+  readonly field: string;
+  readonly value: number;
+}
+
+function key(binding: ParticleSourceBinding): string {
+  return encodeURIComponent(binding.sourceOid);
+}
+
+function point(value: THREE.Vector3): SpatialPoint3 {
+  return [value.x, value.y, value.z];
+}
+
+function world(binding: ParticleSourceBinding, local: THREE.Vector3): SpatialPoint3 {
+  binding.emitter.updateWorldMatrix(true, false);
+  return point(local.clone().applyMatrix4(binding.emitter.matrixWorld));
+}
+
+function line(
+  binding: ParticleSourceBinding,
+  points: readonly THREE.Vector3[],
+  opacity = 0.72,
+): SpatialHandleLayer['guides'][number] {
+  binding.emitter.updateWorldMatrix(true, false);
+  const matrix = binding.emitter.matrixWorld;
+  return {
+    kind: 'line',
+    points: points.map((candidate) => point(candidate.clone().applyMatrix4(matrix))),
+    color: PARTICLE_COLOR,
+    opacity,
+  };
+}
+
+function ring(
+  radius: number,
+  plane: 'xy' | 'xz' | 'yz' = 'xy',
+  segments = 48,
+  arc = Math.PI * 2,
+): THREE.Vector3[] {
+  const points: THREE.Vector3[] = [];
+  for (let index = 0; index <= segments; index += 1) {
+    const angle = (index / segments) * arc;
+    const a = Math.cos(angle) * radius;
+    const b = Math.sin(angle) * radius;
+    points.push(
+      plane === 'xy'
+        ? new THREE.Vector3(a, b, 0)
+        : plane === 'xz'
+          ? new THREE.Vector3(a, 0, b)
+          : new THREE.Vector3(0, a, b),
+    );
+  }
+  return points;
+}
+
+function rotateAroundZ(points: readonly THREE.Vector3[], angle: number): THREE.Vector3[] {
+  return points.map((candidate) =>
+    candidate.clone().applyAxisAngle(new THREE.Vector3(0, 0, 1), angle),
+  );
+}
+
+function upperArc(radius: number, plane: 'xz' | 'yz', segments = 24): THREE.Vector3[] {
+  const points: THREE.Vector3[] = [];
+  for (let index = 0; index <= segments; index += 1) {
+    const angle = (index / segments) * Math.PI;
+    const radial = Math.cos(angle) * radius;
+    const z = Math.sin(angle) * radius;
+    points.push(plane === 'xz' ? new THREE.Vector3(radial, 0, z) : new THREE.Vector3(0, radial, z));
+  }
+  return points;
+}
+
+function field(
+  shape: NativeEmitterShape,
+  name: keyof NativeEmitterShape,
+  fallback: number,
+): number {
+  const value = shape[name];
+  return typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+}
+
+function outline(binding: ParticleSourceBinding): SpatialHandleLayer['guides'][number][] {
+  const shape = binding.shape;
+  const radius = field(shape, 'radius', 10);
+  const arc = THREE.MathUtils.clamp(field(shape, 'arc', Math.PI * 2), 0, Math.PI * 2);
+  const fullArc = Math.abs(arc - Math.PI * 2) < 0.001;
+  switch (shape.type) {
+    case 'point':
+      return [
+        line(binding, [new THREE.Vector3(-0.2, 0, 0), new THREE.Vector3(0.2, 0, 0)]),
+        line(binding, [new THREE.Vector3(0, -0.2, 0), new THREE.Vector3(0, 0.2, 0)]),
+        line(binding, [new THREE.Vector3(0, 0, -0.2), new THREE.Vector3(0, 0, 0.2)]),
+      ];
+    case 'sphere':
+      return [
+        line(binding, ring(radius, 'xy', 48, arc)),
+        line(binding, ring(radius, 'xz'), 0.5),
+        line(binding, rotateAroundZ(ring(radius, 'xz'), fullArc ? Math.PI / 2 : arc), 0.5),
+      ];
+    case 'hemisphere':
+      return [
+        line(binding, ring(radius, 'xy', 48, arc)),
+        line(binding, upperArc(radius, 'xz'), 0.55),
+        line(binding, rotateAroundZ(upperArc(radius, 'xz'), fullArc ? Math.PI / 2 : arc), 0.55),
+      ];
+    case 'cone': {
+      const angle = field(shape, 'angle', Math.PI / 6);
+      const length = Math.max(radius, 1);
+      const guides = [line(binding, ring(radius, 'xy', 48, arc))];
+      const rays = fullArc
+        ? [0, Math.PI / 2, Math.PI, (3 * Math.PI) / 2]
+        : [0, arc / 3, (arc * 2) / 3, arc];
+      for (const theta of rays) {
+        const start = new THREE.Vector3(Math.cos(theta) * radius, Math.sin(theta) * radius, 0);
+        const end = start
+          .clone()
+          .add(
+            new THREE.Vector3(
+              Math.cos(theta) * Math.sin(angle),
+              Math.sin(theta) * Math.sin(angle),
+              Math.cos(angle),
+            ).multiplyScalar(length),
+          );
+        guides.push(line(binding, [start, end], 0.58));
+      }
+      return guides;
+    }
+    case 'circle':
+      return [line(binding, ring(radius, 'xy', 48, arc))];
+    case 'donut': {
+      const tube = field(shape, 'donutRadius', radius * 0.2);
+      return [
+        line(binding, ring(Math.max(0, radius - tube), 'xy', 48, arc), 0.45),
+        line(binding, ring(radius, 'xy', 48, arc)),
+        line(binding, ring(radius + tube, 'xy', 48, arc), 0.45),
+        line(
+          binding,
+          ring(tube, 'xz').map((candidate) => candidate.add(new THREE.Vector3(radius, 0, 0))),
+          0.45,
+        ),
+      ];
+    }
+    case 'rectangle':
+    case 'grid': {
+      const width = field(shape, 'width', shape.type === 'grid' ? 1 : 10);
+      const height = field(shape, 'height', shape.type === 'grid' ? 1 : 10);
+      const halfWidth = width / 2;
+      const halfHeight = height / 2;
+      const guides = [
+        line(binding, [
+          new THREE.Vector3(-halfWidth, -halfHeight, 0),
+          new THREE.Vector3(halfWidth, -halfHeight, 0),
+          new THREE.Vector3(halfWidth, halfHeight, 0),
+          new THREE.Vector3(-halfWidth, halfHeight, 0),
+          new THREE.Vector3(-halfWidth, -halfHeight, 0),
+        ]),
+      ];
+      if (shape.type === 'grid') {
+        const columns = Math.min(16, Math.max(1, Math.round(field(shape, 'column', 10))));
+        const rows = Math.min(16, Math.max(1, Math.round(field(shape, 'row', 10))));
+        for (let index = 1; index < columns; index += 1) {
+          const x = -halfWidth + (index / columns) * width;
+          guides.push(
+            line(
+              binding,
+              [new THREE.Vector3(x, -halfHeight, 0), new THREE.Vector3(x, halfHeight, 0)],
+              0.24,
+            ),
+          );
+        }
+        for (let index = 1; index < rows; index += 1) {
+          const y = -halfHeight + (index / rows) * height;
+          guides.push(
+            line(
+              binding,
+              [new THREE.Vector3(-halfWidth, y, 0), new THREE.Vector3(halfWidth, y, 0)],
+              0.24,
+            ),
+          );
+        }
+      }
+      return guides;
+    }
+  }
+}
+
+function handle(
+  binding: ParticleSourceBinding,
+  fieldName: string,
+  label: string,
+  local: THREE.Vector3,
+): SpatialHandleLayer['handles'][number] {
+  return {
+    id: `particle:${key(binding)}:${fieldName}`,
+    label,
+    position: world(binding, local),
+    color: fieldName === 'angle' ? PARTICLE_SECONDARY : PARTICLE_COLOR,
+    writable: binding.writableFields.has(fieldName),
+  };
+}
+
+export function particleHandleLayer(binding: ParticleSourceBinding): SpatialHandleLayer {
+  const shape = binding.shape;
+  const radius = field(shape, 'radius', 10);
+  const handles: SpatialHandleLayer['handles'][number][] = [];
+  if (['sphere', 'hemisphere', 'cone', 'circle', 'donut'].includes(shape.type)) {
+    handles.push(handle(binding, 'radius', 'Emitter radius', new THREE.Vector3(radius, 0, 0)));
+  }
+  if (shape.type === 'cone') {
+    const angle = field(shape, 'angle', Math.PI / 6);
+    const length = Math.max(radius, 1);
+    handles.push(
+      handle(
+        binding,
+        'angle',
+        'Cone angle',
+        new THREE.Vector3(radius + Math.sin(angle) * length, 0, Math.cos(angle) * length),
+      ),
+    );
+  }
+  if (shape.type === 'donut') {
+    handles.push(
+      handle(
+        binding,
+        'donutRadius',
+        'Donut tube radius',
+        new THREE.Vector3(radius, 0, field(shape, 'donutRadius', radius * 0.2)),
+      ),
+    );
+  }
+  if (shape.type === 'rectangle' || shape.type === 'grid') {
+    handles.push(
+      handle(
+        binding,
+        'width',
+        'Emitter width',
+        new THREE.Vector3(field(shape, 'width', 1) / 2, 0, 0),
+      ),
+      handle(
+        binding,
+        'height',
+        'Emitter height',
+        new THREE.Vector3(0, field(shape, 'height', 1) / 2, 0),
+      ),
+    );
+  }
+  return {
+    id: `particle:${key(binding)}`,
+    category: 'particles',
+    guides: outline(binding),
+    handles,
+  };
+}
+
+function rounded(value: number): number {
+  return Math.round(value * ROUND_TO) / ROUND_TO;
+}
+
+function clampParticleField(fieldName: string, value: number): number {
+  if (fieldName === 'angle') return rounded(THREE.MathUtils.clamp(value, 0.01, Math.PI / 2 - 0.01));
+  if (fieldName === 'arc') return rounded(THREE.MathUtils.clamp(value, 0, Math.PI * 2));
+  if (fieldName === 'thickness') return rounded(THREE.MathUtils.clamp(value, 0, 1));
+  if (fieldName === 'column' || fieldName === 'row') return Math.max(1, Math.round(value));
+  return rounded(Math.max(0.01, value));
+}
+
+export function normalizeParticleField(fieldName: string, value: number): number {
+  return clampParticleField(fieldName, value);
+}
+
+export function particleEditFromWorld(
+  bindings: readonly ParticleSourceBinding[],
+  handleId: string,
+  worldPosition: SpatialPoint3,
+): ParticleFieldEdit | null {
+  const match = /^particle:([^:]+):(radius|angle|donutRadius|width|height)$/.exec(handleId);
+  const binding = match ? bindings.find((candidate) => key(candidate) === match[1]) : undefined;
+  const fieldName = match?.[2];
+  if (!binding || !fieldName || !binding.writableFields.has(fieldName)) return null;
+  binding.emitter.updateWorldMatrix(true, false);
+  const local = binding.emitter.worldToLocal(new THREE.Vector3(...worldPosition));
+  const radius = field(binding.shape, 'radius', 10);
+  let value: number;
+  if (fieldName === 'radius') {
+    value =
+      binding.shape.type === 'sphere' || binding.shape.type === 'hemisphere'
+        ? local.length()
+        : Math.hypot(local.x, local.y);
+  } else if (fieldName === 'angle') {
+    value = Math.atan2(
+      Math.max(0, Math.hypot(local.x, local.y) - radius),
+      Math.abs(local.z) || 0.001,
+    );
+  } else if (fieldName === 'donutRadius') {
+    value = Math.abs(local.z);
+  } else if (fieldName === 'width') {
+    value = Math.abs(local.x) * 2;
+  } else {
+    value = Math.abs(local.y) * 2;
+  }
+  return { binding, field: fieldName, value: clampParticleField(fieldName, value) };
+}
+
+export function previewParticleEdit(edit: ParticleFieldEdit): void {
+  (edit.binding.shape as unknown as Record<string, unknown>)[edit.field] = edit.value;
+}