@reactvision/react-viro 2.57.3 → 2.57.4

package/components/Studio/domain/dragConfiguration.ts

@@ -1,6 +1,6 @@
 import { StudioAsset, StudioSceneMeta } from "../types";
 
-export type DragType = "FixedToWorld" | "FixedToPlane" | undefined;
+export type DragType = "FixedToPlane" | "FixedDistance" | undefined;
 
 export type DragPlane = {
   planePoint: [number, number, number];
@@ -10,8 +10,10 @@ export type DragPlane = {
 
 export class DragConfiguration {
   /**
-   * Chooses FixedToPlane when the scene uses plane detection, FixedToWorld otherwise.
-   * Returns undefined if the asset is not draggable.
+   * FixedToPlane when the scene uses plane detection; otherwise FixedDistance,
+   * which keeps the object at its grab distance and follows the finger.
+   * (FixedToWorld raycast-snapped objects toward the camera on drag start, so
+   * they appeared to grow and were hard to place.) undefined if not draggable.
    */
   static getDragType(asset: StudioAsset, scene: StudioSceneMeta | null): DragType {
     if (!asset.is_draggable) return undefined;
@@ -21,7 +23,7 @@ export class DragConfiguration {
     if (planeDetection === "AUTOMATIC" || planeDetection === "MANUAL") {
       return "FixedToPlane";
     }
-    return "FixedToWorld";
+    return "FixedDistance";
   }
 
   /**

package/components/Studio/domain/materialConfig.ts

@@ -1,6 +1,5 @@
 /**
  * Studio material_config parsing and Viro material definition building.
- * Ported from studio-go/domain/materialConfig.ts — no zod dependency.
  */
 
 // ─── Types ────────────────────────────────────────────────────────────────────
@@ -51,7 +50,9 @@ const TEXTURE_KEYS = [
   "specularTexture",
 ] as const;
 
-function textureToViro(uri: string | null | undefined): { uri: string } | undefined {
+function textureToViro(
+  uri: string | null | undefined
+): { uri: string } | undefined {
   if (uri == null || uri === "") return undefined;
   return { uri };
 }
@@ -76,7 +77,9 @@ const TIME_WORD_RE = /\btime\b/i;
 const CAMERA_TEXTURE_RE = /\bcamera_texture\b/;
 const RF_VIEWPORT_RE = /\b_rf_vpw\b|\b_rf_vph\b/;
 
-export function materialConfigNeedsTimeUniform(config: MaterialConfig): boolean {
+export function materialConfigNeedsTimeUniform(
+  config: MaterialConfig
+): boolean {
   if (config.materialUniforms?.some((u) => u.name === "time")) return true;
   return collectShaderModifierStrings(config).some((s) => TIME_WORD_RE.test(s));
 }
@@ -85,8 +88,12 @@ export function materialConfigNeedsTimeUniform(config: MaterialConfig): boolean
  * True if the shader uses _rf_vpw/_rf_vph viewport uniforms.
  * These must be pushed via ViroMaterials.updateShaderUniform on mount and orientation change.
  */
-export function materialConfigNeedsViewportUniforms(config: MaterialConfig): boolean {
-  return collectShaderModifierStrings(config).some((s) => RF_VIEWPORT_RE.test(s));
+export function materialConfigNeedsViewportUniforms(
+  config: MaterialConfig
+): boolean {
+  return collectShaderModifierStrings(config).some((s) =>
+    RF_VIEWPORT_RE.test(s)
+  );
 }
 
 /**
@@ -101,7 +108,8 @@ function injectMissingGlslDeclarations(uniforms: string, body: string): string {
       result;
   }
   if (RF_VIEWPORT_RE.test(body) && !/\b_rf_vpw\b/.test(result)) {
-    result = "uniform highp float _rf_vpw;\nuniform highp float _rf_vph;\n" + result;
+    result =
+      "uniform highp float _rf_vpw;\nuniform highp float _rf_vph;\n" + result;
   }
   return result;
 }
@@ -112,13 +120,20 @@ function injectMissingGlslDeclarations(uniforms: string, body: string): string {
  * GLSL only, we add the runtime binding here.
  */
 function mergeMaterialUniformsForViro(
-  config: MaterialConfig,
+  config: MaterialConfig
 ): Array<{ name: string; type: string; value: unknown }> | undefined {
   const list = config.materialUniforms
-    ? config.materialUniforms.map((u) => ({ name: u.name, type: u.type, value: u.value }))
+    ? config.materialUniforms.map((u) => ({
+        name: u.name,
+        type: u.type,
+        value: u.value,
+      }))
     : [];
 
-  if (materialConfigNeedsTimeUniform(config) && !list.some((u) => u.name === "time")) {
+  if (
+    materialConfigNeedsTimeUniform(config) &&
+    !list.some((u) => u.name === "time")
+  ) {
     list.push({ name: "time", type: "float", value: 0 });
   }
 
@@ -139,7 +154,7 @@ function mergeMaterialUniformsForViro(
  * layer binds the camera feed even when the DB JSON omits `requiresCameraTexture`.
  */
 function normalizeShaderModifiersForViro(
-  mods: NonNullable<MaterialConfig["shaderModifiers"]>,
+  mods: NonNullable<MaterialConfig["shaderModifiers"]>
 ): Record<string, string | object> {
   const out: Record<string, string | object> = {};
   for (const [key, stage] of Object.entries(mods)) {
@@ -199,39 +214,51 @@ export function parseMaterialConfig(raw: unknown): MaterialConfig | null {
 
   try {
     const config: MaterialConfig = {
-      lightingModel:
-        (["Constant", "Lambert", "Blinn", "Phong", "PBR"].includes(r.lightingModel as string)
-          ? r.lightingModel
-          : "PBR") as MaterialConfig["lightingModel"],
+      lightingModel: (["Constant", "Lambert", "Blinn", "Phong", "PBR"].includes(
+        r.lightingModel as string
+      )
+        ? r.lightingModel
+        : "PBR") as MaterialConfig["lightingModel"],
     };
 
-    if (typeof r.presetName === "string")    config.presetName    = r.presetName;
-    if (typeof r.diffuseColor === "string")  config.diffuseColor  = r.diffuseColor;
-    if (typeof r.roughness === "number")     config.roughness     = r.roughness;
-    if (typeof r.metalness === "number")     config.metalness     = r.metalness;
-    if (typeof r.shininess === "number")     config.shininess     = r.shininess;
-    if (typeof r.alpha === "number")         config.alpha         = r.alpha;
-    if (typeof r.blendMode === "string")     config.blendMode     = r.blendMode;
+    if (typeof r.presetName === "string") config.presetName = r.presetName;
+    if (typeof r.diffuseColor === "string")
+      config.diffuseColor = r.diffuseColor;
+    if (typeof r.roughness === "number") config.roughness = r.roughness;
+    if (typeof r.metalness === "number") config.metalness = r.metalness;
+    if (typeof r.shininess === "number") config.shininess = r.shininess;
+    if (typeof r.alpha === "number") config.alpha = r.alpha;
+    if (typeof r.blendMode === "string") config.blendMode = r.blendMode;
     if (r.bloomThreshold != null && typeof r.bloomThreshold === "number")
-                                             config.bloomThreshold = r.bloomThreshold;
-    if (["Clamp","Repeat","Mirror"].includes(r.wrapS as string)) config.wrapS = r.wrapS as any;
-    if (["Clamp","Repeat","Mirror"].includes(r.wrapT as string)) config.wrapT = r.wrapT as any;
-    if (typeof r.transparencyMode === "string") config.transparencyMode = r.transparencyMode;
-    if (typeof r.cullMode === "string")      config.cullMode      = r.cullMode;
+      config.bloomThreshold = r.bloomThreshold;
+    if (["Clamp", "Repeat", "Mirror"].includes(r.wrapS as string))
+      config.wrapS = r.wrapS as any;
+    if (["Clamp", "Repeat", "Mirror"].includes(r.wrapT as string))
+      config.wrapT = r.wrapT as any;
+    if (typeof r.transparencyMode === "string")
+      config.transparencyMode = r.transparencyMode;
+    if (typeof r.cullMode === "string") config.cullMode = r.cullMode;
 
     for (const key of TEXTURE_KEYS) {
       const v = r[key];
       if (typeof v === "string" || v === null) (config as any)[key] = v;
     }
 
-    if (r.shaderModifiers && typeof r.shaderModifiers === "object" && !Array.isArray(r.shaderModifiers)) {
-      config.shaderModifiers = r.shaderModifiers as Record<string, ShaderModifierStage | string>;
+    if (
+      r.shaderModifiers &&
+      typeof r.shaderModifiers === "object" &&
+      !Array.isArray(r.shaderModifiers)
+    ) {
+      config.shaderModifiers = r.shaderModifiers as Record<
+        string,
+        ShaderModifierStage | string
+      >;
     }
 
     if (Array.isArray(r.materialUniforms)) {
       config.materialUniforms = r.materialUniforms.filter(
         (u): u is { name: string; type: string; value: unknown } =>
-          u && typeof u.name === "string" && typeof u.type === "string",
+          u && typeof u.name === "string" && typeof u.type === "string"
       );
     }
 
@@ -245,20 +272,24 @@ export function parseMaterialConfig(raw: unknown): MaterialConfig | null {
 /**
  * Maps a validated Studio material_config to Viro's `createMaterials` definition shape.
  */
-export function buildViroMaterialDefinition(config: MaterialConfig): ViroMaterialDefinition {
+export function buildViroMaterialDefinition(
+  config: MaterialConfig
+): ViroMaterialDefinition {
   const out: ViroMaterialDefinition = { lightingModel: config.lightingModel };
 
-  if (config.diffuseColor  !== undefined) out.diffuseColor  = config.diffuseColor;
-  if (config.roughness     !== undefined) out.roughness     = config.roughness;
-  if (config.metalness     !== undefined) out.metalness     = config.metalness;
-  if (config.shininess     !== undefined) out.shininess     = config.shininess;
-  if (config.alpha         !== undefined) out.alpha         = config.alpha;
-  if (config.blendMode     !== undefined) out.blendMode     = config.blendMode;
-  if (config.bloomThreshold!= undefined) out.bloomThreshold = config.bloomThreshold;
-  if (config.wrapS         !== undefined) out.wrapS         = config.wrapS;
-  if (config.wrapT         !== undefined) out.wrapT         = config.wrapT;
-  if (config.transparencyMode !== undefined) out.transparencyMode = config.transparencyMode;
-  if (config.cullMode      !== undefined) out.cullMode      = config.cullMode;
+  if (config.diffuseColor !== undefined) out.diffuseColor = config.diffuseColor;
+  if (config.roughness !== undefined) out.roughness = config.roughness;
+  if (config.metalness !== undefined) out.metalness = config.metalness;
+  if (config.shininess !== undefined) out.shininess = config.shininess;
+  if (config.alpha !== undefined) out.alpha = config.alpha;
+  if (config.blendMode !== undefined) out.blendMode = config.blendMode;
+  if (config.bloomThreshold != undefined)
+    out.bloomThreshold = config.bloomThreshold;
+  if (config.wrapS !== undefined) out.wrapS = config.wrapS;
+  if (config.wrapT !== undefined) out.wrapT = config.wrapT;
+  if (config.transparencyMode !== undefined)
+    out.transparencyMode = config.transparencyMode;
+  if (config.cullMode !== undefined) out.cullMode = config.cullMode;
 
   for (const key of TEXTURE_KEYS) {
     const mapped = textureToViro((config as any)[key]);
@@ -266,7 +297,9 @@ export function buildViroMaterialDefinition(config: MaterialConfig): ViroMateria
   }
 
   if (config.shaderModifiers !== undefined) {
-    out.shaderModifiers = normalizeShaderModifiersForViro(config.shaderModifiers);
+    out.shaderModifiers = normalizeShaderModifiersForViro(
+      config.shaderModifiers
+    );
   }
 
   const mergedUniforms = mergeMaterialUniformsForViro(config);

package/components/Studio/domain/physicsConfig.ts

@@ -1,6 +1,5 @@
 /**
  * Studio physics_config and physics_world_config parsing and Viro prop building.
- * Ported from studio-go/domain/physicsConfig.ts — no zod dependency.
  */
 
 // ─── Types ────────────────────────────────────────────────────────────────────
@@ -12,7 +11,15 @@ type ForceEntry = { value: Vec3; position?: Vec3 };
 type PhysicsShape =
   | { type: "Box"; params: [number, number, number] }
   | { type: "Sphere"; params: [number] }
-  | { type: "Compound"; children: Array<{ type: "Box" | "Sphere"; params: number[]; position: Vec3; rotation?: Vec3 }> };
+  | {
+      type: "Compound";
+      children: Array<{
+        type: "Box" | "Sphere";
+        params: number[];
+        position: Vec3;
+        rotation?: Vec3;
+      }>;
+    };
 
 export type PhysicsBodyConfig = {
   enabled: boolean;
@@ -42,7 +49,9 @@ export type BuildViroPhysicsBodyOptions = {
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
 function isVec3(v: unknown): v is Vec3 {
-  return Array.isArray(v) && v.length === 3 && v.every((n) => typeof n === "number");
+  return (
+    Array.isArray(v) && v.length === 3 && v.every((n) => typeof n === "number")
+  );
 }
 
 function parseShape(raw: unknown): PhysicsShape | undefined {
@@ -56,11 +65,24 @@ function parseShape(raw: unknown): PhysicsShape | undefined {
     return { type: "Sphere", params: [r.params[0] as number] };
   }
   if (r.type === "Compound" && Array.isArray(r.children)) {
-    const children = (r.children as unknown[]).filter((c): c is { type: "Box" | "Sphere"; params: number[]; position: Vec3; rotation?: Vec3 } => {
-      if (!c || typeof c !== "object") return false;
-      const ch = c as Record<string, unknown>;
-      return (ch.type === "Box" || ch.type === "Sphere") && Array.isArray(ch.params) && isVec3(ch.position);
-    });
+    const children = (r.children as unknown[]).filter(
+      (
+        c
+      ): c is {
+        type: "Box" | "Sphere";
+        params: number[];
+        position: Vec3;
+        rotation?: Vec3;
+      } => {
+        if (!c || typeof c !== "object") return false;
+        const ch = c as Record<string, unknown>;
+        return (
+          (ch.type === "Box" || ch.type === "Sphere") &&
+          Array.isArray(ch.params) &&
+          isVec3(ch.position)
+        );
+      }
+    );
     if (children.length > 0) return { type: "Compound", children };
   }
   return undefined;
@@ -68,12 +90,17 @@ function parseShape(raw: unknown): PhysicsShape | undefined {
 
 function mapShapeToViro(shape: PhysicsShape): Record<string, unknown> {
   if (shape.type === "Box") return { type: "Box", params: [...shape.params] };
-  if (shape.type === "Sphere") return { type: "Sphere", params: [...shape.params] };
+  if (shape.type === "Sphere")
+    return { type: "Sphere", params: [...shape.params] };
   return {
     type: "Compound",
     params: [],
     children: shape.children.map((c) => {
-      const base: Record<string, unknown> = { type: c.type, params: [...c.params], position: [...c.position] };
+      const base: Record<string, unknown> = {
+        type: c.type,
+        params: [...c.params],
+        position: [...c.position],
+      };
       if (c.rotation) base.rotation = [...c.rotation];
       return base;
     }),
@@ -84,13 +111,15 @@ function normalizeTorque(torque: Vec3 | Vec3[]): Vec3 {
   if (Array.isArray(torque[0])) {
     return (torque as Vec3[]).reduce<Vec3>(
       (acc, t) => [acc[0] + t[0], acc[1] + t[1], acc[2] + t[2]],
-      [0, 0, 0],
+      [0, 0, 0]
     );
   }
   return [...(torque as Vec3)] as Vec3;
 }
 
-function normalizeForce(force: ForceEntry | ForceEntry[]): Array<{ value: number[]; position?: number[] }> {
+function normalizeForce(
+  force: ForceEntry | ForceEntry[]
+): Array<{ value: number[]; position?: number[] }> {
   const arr = Array.isArray(force) ? force : [force];
   return arr.map((f) => ({
     value: [...f.value],
@@ -103,7 +132,9 @@ function normalizeForce(force: ForceEntry | ForceEntry[]): Array<{ value: number
 /**
  * Parses `scene.physics_world_config` JSON. Returns null if missing or invalid.
  */
-export function parsePhysicsWorldConfig(raw: unknown): PhysicsWorldConfig | null {
+export function parsePhysicsWorldConfig(
+  raw: unknown
+): PhysicsWorldConfig | null {
   if (raw == null || typeof raw !== "object" || Array.isArray(raw)) return null;
   const r = raw as Record<string, unknown>;
   try {
@@ -124,9 +155,11 @@ export function parsePhysicsBodyConfig(raw: unknown): PhysicsBodyConfig | null {
   if (raw == null || typeof raw !== "object" || Array.isArray(raw)) return null;
   const r = raw as Record<string, unknown>;
   try {
-    const type = (["Dynamic", "Kinematic", "Static"].includes(r.type as string)
-      ? r.type
-      : undefined) as PhysicsBodyConfig["type"] | undefined;
+    const type = (
+      ["Dynamic", "Kinematic", "Static"].includes(r.type as string)
+        ? r.type
+        : undefined
+    ) as PhysicsBodyConfig["type"] | undefined;
     if (!type) return null;
 
     const mass = typeof r.mass === "number" ? r.mass : 0;
@@ -139,12 +172,12 @@ export function parsePhysicsBodyConfig(raw: unknown): PhysicsBodyConfig | null {
     const shape = parseShape(r.shape);
     if (shape) config.shape = shape;
     if (typeof r.restitution === "number") config.restitution = r.restitution;
-    if (typeof r.friction === "number")    config.friction    = r.friction;
-    if (typeof r.useGravity === "boolean") config.useGravity  = r.useGravity;
-    if (typeof r.viroTag === "string")     config.viroTag     = r.viroTag;
-    if (isVec3(r.velocity))               config.velocity    = r.velocity;
-    if (r.torque != null)                 config.torque      = r.torque as Vec3 | Vec3[];
-    if (r.force != null)                  config.force       = r.force as ForceEntry | ForceEntry[];
+    if (typeof r.friction === "number") config.friction = r.friction;
+    if (typeof r.useGravity === "boolean") config.useGravity = r.useGravity;
+    if (typeof r.viroTag === "string") config.viroTag = r.viroTag;
+    if (isVec3(r.velocity)) config.velocity = r.velocity;
+    if (r.torque != null) config.torque = r.torque as Vec3 | Vec3[];
+    if (r.force != null) config.force = r.force as ForceEntry | ForceEntry[];
 
     return config;
   } catch {
@@ -166,23 +199,33 @@ export function buildViroPhysicsWorld(config: PhysicsWorldConfig): {
 /** Maps validated Studio physics_config to Viro `physicsBody` prop. */
 export function buildViroPhysicsBody(
   config: PhysicsBodyConfig,
-  options?: BuildViroPhysicsBodyOptions,
+  options?: BuildViroPhysicsBodyOptions
 ): Record<string, unknown> {
   const kinematicDrag =
-    options?.kinematicDragOverride === true && config.type === "Dynamic" && config.enabled;
+    options?.kinematicDragOverride === true &&
+    config.type === "Dynamic" &&
+    config.enabled;
 
   const type = kinematicDrag ? "Kinematic" : config.type;
   const mass = kinematicDrag ? 0 : config.mass;
-  const shape = mapShapeToViro(config.shape ?? { type: "Box", params: [1, 1, 1] });
+  const shape = mapShapeToViro(
+    config.shape ?? { type: "Box", params: [1, 1, 1] }
+  );
 
-  const body: Record<string, unknown> = { type, mass, shape, enabled: config.enabled };
+  const body: Record<string, unknown> = {
+    type,
+    mass,
+    shape,
+    enabled: config.enabled,
+  };
 
   if (config.restitution !== undefined) body.restitution = config.restitution;
-  if (config.friction    !== undefined) body.friction    = config.friction;
-  if (config.useGravity  !== undefined) body.useGravity  = kinematicDrag ? false : config.useGravity;
-  if (config.velocity    !== undefined) body.velocity    = [...config.velocity];
-  if (config.torque      !== undefined) body.torque      = normalizeTorque(config.torque);
-  if (config.force       !== undefined) body.force       = normalizeForce(config.force);
+  if (config.friction !== undefined) body.friction = config.friction;
+  if (config.useGravity !== undefined)
+    body.useGravity = kinematicDrag ? false : config.useGravity;
+  if (config.velocity !== undefined) body.velocity = [...config.velocity];
+  if (config.torque !== undefined) body.torque = normalizeTorque(config.torque);
+  if (config.force !== undefined) body.force = normalizeForce(config.force);
 
   return body;
 }
@@ -193,7 +236,7 @@ export function buildViroPhysicsBody(
  */
 export function shouldUseKinematicPhysicsDrag(
   asset: { is_draggable: boolean },
-  config: PhysicsBodyConfig | null,
+  config: PhysicsBodyConfig | null
 ): boolean {
   return (
     asset.is_draggable === true &&

package/components/Studio/domain/viroNodeFactory.tsx

@@ -20,7 +20,11 @@ import {
 } from "./apiRequestHelpers";
 import { parseMaterialConfig, studioMaterialName } from "./materialConfig";
 import { DragConfiguration } from "./dragConfiguration";
-import { buildViroPhysicsBody, parsePhysicsBodyConfig } from "./physicsConfig";
+import {
+  buildViroPhysicsBody,
+  parsePhysicsBodyConfig,
+  shouldUseKinematicPhysicsDrag,
+} from "./physicsConfig";
 import { StudioVariableStore } from "./variableStore";
 import { StudioVisibilityStore } from "./visibilityStore";
 
@@ -54,6 +58,7 @@ export function createNodeConfig(
   scene: StudioSceneMeta | null,
   onAnimationTrigger?: (targetAssetId: string, animKey: string) => void,
   animationStates?: Record<string, ViroAnimationProp>,
+  isDragActive?: (assetId: string) => boolean,
   onSceneChange?: (sceneId: string, sceneName: string) => void,
   runtimeCtx?: SequenceRuntimeContext
 ): NodeConfig {
@@ -107,8 +112,12 @@ export function createNodeConfig(
   }
 
   const parsedPhysics = parsePhysicsBodyConfig(asset.physics_config);
+  const dragActive = isDragActive?.(asset.id) ?? false;
   const physicsBody = parsedPhysics
-    ? buildViroPhysicsBody(parsedPhysics)
+    ? buildViroPhysicsBody(parsedPhysics, {
+        kinematicDragOverride:
+          dragActive && shouldUseKinematicPhysicsDrag(asset, parsedPhysics),
+      })
     : undefined;
   const viroTag = parsedPhysics ? asset.id : undefined;
 
@@ -194,6 +203,7 @@ function create3DObject(
   asset: StudioAsset,
   config: NodeConfig,
   onAssetLoaded?: (id: string) => void,
+  notifyPhysicsDrag?: (assetId: string) => void,
   onCollision?: (
     viroTag: string,
     collidedPoint: [number, number, number],
@@ -241,7 +251,9 @@ function create3DObject(
       }
       // Viro derives native canDrag from `onDrag != undefined`; without this prop
       // the drag recognizer is never attached, even when dragType is set.
-      {...(config.dragType ? { onDrag: () => {} } : {})}
+      {...(config.dragType
+        ? { onDrag: () => notifyPhysicsDrag?.(asset.id) }
+        : {})}
       {...(shaderOverrides ? { shaderOverrides } : {})}
       {...(config.physicsBody
         ? { physicsBody: config.physicsBody as any, viroTag: config.viroTag }
@@ -254,7 +266,8 @@ function create3DObject(
 function createImage(
   asset: StudioAsset,
   config: NodeConfig,
-  onAssetLoaded?: (id: string) => void
+  onAssetLoaded?: (id: string) => void,
+  notifyPhysicsDrag?: (assetId: string) => void
 ): React.ReactElement | null {
   if (!asset.file_url) {
     console.warn(`[Studio] Image "${asset.name}" has no file_url`);
@@ -273,7 +286,9 @@ function createImage(
       onClick={config.onClick}
       onLoadEnd={() => onAssetLoaded?.(asset.id)}
       onError={(e) => console.error(`[Studio] Image "${asset.name}" error:`, e)}
-      {...(config.dragType ? { onDrag: () => {} } : {})}
+      {...(config.dragType
+        ? { onDrag: () => notifyPhysicsDrag?.(asset.id) }
+        : {})}
     />
   );
 }
@@ -288,10 +303,11 @@ const VariableText: React.FC<{
   asset: StudioAsset;
   config: NodeConfig;
   store?: StudioVariableStore;
+  notifyPhysicsDrag?: (assetId: string) => void;
   // Injected by VisibleNode via cloneElement; TEXT is the only node type that
   // is a component wrapper, so it forwards visibility to its ViroText.
   visible?: boolean;
-}> = ({ asset, config, store, visible }) => {
+}> = ({ asset, config, store, notifyPhysicsDrag, visible }) => {
   const template = asset.name ?? "";
   const compute = () =>
     store
@@ -323,7 +339,9 @@ const VariableText: React.FC<{
         color: "#FFFFFF",
         textAlign: "center",
       }}
-      {...(config.dragType ? { onDrag: () => {} } : {})}
+      {...(config.dragType
+        ? { onDrag: () => notifyPhysicsDrag?.(asset.id) }
+        : {})}
     />
   );
 };
@@ -357,16 +375,24 @@ const VisibleNode: React.FC<{
 function createText(
   asset: StudioAsset,
   config: NodeConfig,
+  notifyPhysicsDrag?: (assetId: string) => void,
   store?: StudioVariableStore
 ): React.ReactElement {
   return (
-    <VariableText key={asset.id} asset={asset} config={config} store={store} />
+    <VariableText
+      key={asset.id}
+      asset={asset}
+      config={config}
+      store={store}
+      notifyPhysicsDrag={notifyPhysicsDrag}
+    />
   );
 }
 
 function createVideo(
   asset: StudioAsset,
-  config: NodeConfig
+  config: NodeConfig,
+  notifyPhysicsDrag?: (assetId: string) => void
 ): React.ReactElement | null {
   if (!asset.file_url) {
     console.warn(`[Studio] Video "${asset.name}" has no file_url`);
@@ -386,7 +412,9 @@ function createVideo(
       loop={true}
       muted={false}
       onError={(e) => console.error(`[Studio] Video "${asset.name}" error:`, e)}
-      {...(config.dragType ? { onDrag: () => {} } : {})}
+      {...(config.dragType
+        ? { onDrag: () => notifyPhysicsDrag?.(asset.id) }
+        : {})}
     />
   );
 }
@@ -404,6 +432,8 @@ export function createNode(
     collidedPoint: [number, number, number],
     collidedNormal: [number, number, number]
   ) => void,
+  isDragActive?: (assetId: string) => boolean,
+  notifyPhysicsDrag?: (assetId: string) => void,
   onSceneChange?: (sceneId: string, sceneName: string) => void,
   runtimeCtx?: SequenceRuntimeContext
 ): React.ReactElement | null {
@@ -415,6 +445,7 @@ export function createNode(
     scene,
     onAnimationTrigger,
     animationStates,
+    isDragActive,
     onSceneChange,
     runtimeCtx
   );
@@ -422,16 +453,24 @@ export function createNode(
   let node: React.ReactElement | null;
   switch (type) {
     case "3D-MODEL":
-      node = create3DObject(asset, config, onAssetLoaded, onCollision);
+      // NOTE: notifyPhysicsDrag and onCollision are distinct wirings — keep both;
+      // a drag-only merge here once silently killed collisions.
+      node = create3DObject(
+        asset,
+        config,
+        onAssetLoaded,
+        notifyPhysicsDrag,
+        onCollision
+      );
       break;
     case "IMAGE":
-      node = createImage(asset, config, onAssetLoaded);
+      node = createImage(asset, config, onAssetLoaded, notifyPhysicsDrag);
       break;
     case "TEXT":
-      node = createText(asset, config, runtimeCtx?.variableStore);
+      node = createText(asset, config, notifyPhysicsDrag, runtimeCtx?.variableStore);
       break;
     case "VIDEO":
-      node = createVideo(asset, config);
+      node = createVideo(asset, config, notifyPhysicsDrag);
       break;
     default:
       console.warn(`[Studio] Unknown asset type "${type}" for "${asset.name}"`);

package/components/Studio/index.ts

@@ -1,5 +1,9 @@
 export { StudioARScene } from "./StudioARScene";
 export { StudioSceneNavigator } from "./StudioSceneNavigator";
+export type {
+  StudioSceneNavigatorHandle,
+  StudioSceneNavigatorProps,
+} from "./StudioSceneNavigator";
 export type {
   StudioAnimation,
   StudioAsset,

package/components/Studio/types.ts

@@ -149,7 +149,7 @@ export interface StudioApiRequestOutcome {
  */
 export type StudioApiRequestExecutor = (
   functionId: string,
-  variables: Record<string, boolean | number | string>,
+  variables: Record<string, boolean | number | string>
 ) => Promise<StudioApiRequestOutcome>;
 
 export interface StudioSceneFunction {
@@ -267,13 +267,7 @@ export interface StudioAnimation {
   properties: Record<string, unknown>; // Viro keyframe format
   duration_ms: number | null;
   delay_ms: number | null;
-  easing:
-    | "Linear"
-    | "EaseIn"
-    | "EaseOut"
-    | "EaseInEaseOut"
-    | "Bounce"
-    | null;
+  easing: "Linear" | "EaseIn" | "EaseOut" | "EaseInEaseOut" | "Bounce" | null;
   loop: boolean;
   interruptible: boolean;
   on_start_function: string | null;
@@ -326,6 +320,7 @@ export interface StudioSceneResponse {
   functions: StudioSceneFunction[];
   /** Absent in responses from backends predating the Variables feature. */
   variables?: StudioSceneVariable[];
+  is_free_tier?: boolean;
   meta: { request_id: string };
 }
 

package/components/Utilities/ViroVersion.ts

@@ -1 +1 @@
-export const VIRO_VERSION = "2.57.3";
+export const VIRO_VERSION = "2.57.4";

package/components/ViroXRSceneNavigator.tsx

@@ -75,6 +75,8 @@ type Props = ViewProps & {
   autofocus?: boolean;
   videoQuality?: "High" | "Low";
   numberOfTrackedImages?: number;
+  /** AR depth/people occlusion. Flows via ...rest to ViroARSceneNavigator. */
+  occlusionMode?: "peopleOnly" | "depthBased";
 
   // ── Forwarded to ViroVRSceneNavigator (Quest path via bridge) ──────────────
   vrModeEnabled?: boolean;