@reactvision/react-viro 2.53.1 → 2.55.0

package/dist/components/Studio/domain/sceneNavigationHandler.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.executeFunctionWithRelations = executeFunctionWithRelations;
+exports.executeOnLoadFunction = executeOnLoadFunction;
+const react_native_1 = require("react-native");
+const ViroPlatform_1 = require("../../Utilities/ViroPlatform");
+const VRTStudioModule_1 = require("../VRTStudioModule");
+const ANIMATION_CHAIN_MAX_DEPTH = 10;
+/**
+ * Resolves a scene function by ID from a flat list.
+ */
+function resolveById(id, fns) {
+    return fns.find((f) => f.id === id);
+}
+/**
+ * Looks up target_asset_id for an ANIMATION-type scene function.
+ * The inline scene_animation only has the animation UUID — we resolve it
+ * from the top-level animations array.
+ */
+function resolveAnimationTargetAssetId(animationId, animations) {
+    return animations.find((a) => a.id === animationId)?.target_asset_id;
+}
+/**
+ * Single dispatcher for all scene function types.
+ * Used by onClick, onCollision, and on_load_function triggers.
+ */
+function executeFunctionWithRelations(fn, sceneNavigator, animations, onAnimationTrigger, depth = 0, onSceneChange) {
+    if (depth > ANIMATION_CHAIN_MAX_DEPTH) {
+        console.warn(`[Studio] Max animation chain depth (${ANIMATION_CHAIN_MAX_DEPTH}) exceeded for function ${fn.id}.`);
+        return;
+    }
+    if (fn.function_type === "NAVIGATION") {
+        const nav = fn.scene_navigation;
+        if (!nav?.navigate_to || !sceneNavigator)
+            return;
+        void navigateToScene(sceneNavigator, nav.navigate_to, animations, onSceneChange);
+    }
+    else if (fn.function_type === "ALERT") {
+        const alrt = fn.scene_alert;
+        if (!alrt)
+            return;
+        if (ViroPlatform_1.isQuest) {
+            // Alert.alert shows a 2D panel dialog — invisible in the VR compositor.
+            // Log it so it's not silently swallowed; in-scene VR alert UI is a TODO.
+            console.warn(`[Studio] Alert (Quest — not shown in VR): "${alrt.alert_title}" — ${alrt.alert_message}`);
+            return;
+        }
+        react_native_1.Alert.alert(alrt.alert_title ?? "Alert", alrt.alert_message ?? "", [
+            { text: "OK", style: "default" },
+        ]);
+    }
+    else if (fn.function_type === "ANIMATION") {
+        const anim = fn.scene_animation;
+        if (!anim || !onAnimationTrigger)
+            return;
+        const animLookupId = fn.animation ?? anim.id;
+        const targetAssetId = resolveAnimationTargetAssetId(animLookupId, animations);
+        if (!targetAssetId) {
+            console.warn(`[Studio] ANIMATION function ${fn.id}: could not resolve target_asset_id for animation ${anim.id}`);
+            return;
+        }
+        onAnimationTrigger(targetAssetId, anim.animation_key);
+    }
+}
+/**
+ * Executes the scene's on_load_function if set.
+ */
+function executeOnLoadFunction(functionId, functions, sceneNavigator, animations, onAnimationTrigger, onSceneChange) {
+    const fn = resolveById(functionId, functions);
+    if (!fn) {
+        console.warn(`[Studio] on_load_function ${functionId} not found.`);
+        return;
+    }
+    executeFunctionWithRelations(fn, sceneNavigator, animations, onAnimationTrigger, 0, onSceneChange);
+}
+/**
+ * Navigates to a new AR scene by fetching its data via rvGetScene and
+ * pushing it onto the ViroARSceneNavigator stack.
+ *
+ * The sceneNavigator object exposes rvGetScene as a method — no separate
+ * API client needed here.
+ */
+async function navigateToScene(sceneNavigator, targetSceneId, currentAnimations, onSceneChange) {
+    if (!sceneNavigator) {
+        console.error("[Studio] SceneNavigator not available for navigation");
+        react_native_1.Alert.alert("Navigation Error", "Unable to navigate to scene");
+        return;
+    }
+    console.log(`[Studio] Navigating to scene: ${targetSceneId}`);
+    try {
+        const result = await VRTStudioModule_1.VRTStudioModule.rvGetScene(targetSceneId);
+        if (!result?.success) {
+            throw new Error(result?.error ?? "rvGetScene failed");
+        }
+        const sceneData = JSON.parse(result.data);
+        // Lazy import to avoid circular dependency
+        const { StudioARScene } = require("../StudioARScene");
+        sceneNavigator.push({
+            scene: StudioARScene,
+            passProps: {
+                sceneData,
+                onSceneChange,
+            },
+        });
+        onSceneChange?.(targetSceneId, sceneData.scene.name ?? targetSceneId);
+        console.log(`[Studio] Navigated to scene: ${sceneData.scene.name}`);
+    }
+    catch (error) {
+        console.error("[Studio] Error navigating to scene:", error);
+        react_native_1.Alert.alert("Navigation Error", "Failed to load scene");
+    }
+}

package/dist/components/Studio/domain/studioMaterials.d.ts

@@ -0,0 +1,6 @@
+import { StudioAsset } from "../types";
+/**
+ * Registers Viro materials for scene assets that have a valid `material_config`.
+ * Call synchronously after fetching assets and before rendering AR nodes.
+ */
+export declare function registerStudioMaterialsForAssets(assets: StudioAsset[]): void;

package/dist/components/Studio/domain/studioMaterials.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerStudioMaterialsForAssets = registerStudioMaterialsForAssets;
+const ViroMaterials_1 = require("../../Material/ViroMaterials");
+const materialConfig_1 = require("./materialConfig");
+/**
+ * Registers Viro materials for scene assets that have a valid `material_config`.
+ * Call synchronously after fetching assets and before rendering AR nodes.
+ */
+function registerStudioMaterialsForAssets(assets) {
+    const materials = {};
+    for (const asset of assets) {
+        if (asset.asset_type_name !== "3D-MODEL")
+            continue;
+        if (asset.material_config == null)
+            continue;
+        const config = (0, materialConfig_1.parseMaterialConfig)(asset.material_config);
+        if (!config)
+            continue;
+        materials[(0, materialConfig_1.studioMaterialName)(asset.id)] = (0, materialConfig_1.buildViroMaterialDefinition)(config);
+    }
+    if (Object.keys(materials).length === 0)
+        return;
+    try {
+        ViroMaterials_1.ViroMaterials.createMaterials(materials);
+    }
+    catch (err) {
+        console.error("[studioMaterials] ViroMaterials.createMaterials failed", err);
+    }
+}

package/dist/components/Studio/domain/triggerImageRegistry.d.ts

@@ -0,0 +1,13 @@
+import { StudioAsset } from "../types";
+/**
+ * Registers trigger image targets with ViroReact for image recognition.
+ * One target per asset with trigger_image_url.
+ * Must be called before rendering ViroARImageMarker components.
+ *
+ * @returns Map from trigger_image_url → target name for lookup in ViroARImageMarker
+ */
+export declare function registerTriggerImageTargets(assets: StudioAsset[]): Map<string, string>;
+/**
+ * Cleans up trigger image targets when the scene unmounts.
+ */
+export declare function cleanupTriggerImageTargets(targetNames: string[]): void;

package/dist/components/Studio/domain/triggerImageRegistry.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerTriggerImageTargets = registerTriggerImageTargets;
+exports.cleanupTriggerImageTargets = cleanupTriggerImageTargets;
+const ViroARTrackingTargets_1 = require("../../AR/ViroARTrackingTargets");
+const DEFAULT_PHYSICAL_WIDTH = 0.2; // meters
+const DEFAULT_ORIENTATION = "Up";
+/**
+ * Registers trigger image targets with ViroReact for image recognition.
+ * One target per asset with trigger_image_url.
+ * Must be called before rendering ViroARImageMarker components.
+ *
+ * @returns Map from trigger_image_url → target name for lookup in ViroARImageMarker
+ */
+function registerTriggerImageTargets(assets) {
+    const assetsWithTrigger = assets.filter((a) => !!a.trigger_image_url);
+    if (assetsWithTrigger.length === 0) {
+        return new Map();
+    }
+    const urlToTargetName = new Map();
+    const targets = {};
+    assetsWithTrigger.forEach((asset, index) => {
+        const targetName = `studio-trigger-${index}`;
+        urlToTargetName.set(asset.trigger_image_url, targetName);
+        targets[targetName] = {
+            source: { uri: asset.trigger_image_url },
+            orientation: asset.trigger_image_orientation ?? DEFAULT_ORIENTATION,
+            physicalWidth: asset.trigger_image_physical_width_m ?? DEFAULT_PHYSICAL_WIDTH,
+            type: "Image",
+        };
+    });
+    ViroARTrackingTargets_1.ViroARTrackingTargets.createTargets(targets);
+    return urlToTargetName;
+}
+/**
+ * Cleans up trigger image targets when the scene unmounts.
+ */
+function cleanupTriggerImageTargets(targetNames) {
+    targetNames.forEach((name) => {
+        try {
+            ViroARTrackingTargets_1.ViroARTrackingTargets.deleteTarget(name);
+        }
+        catch (error) {
+            console.warn(`[Studio] Failed to delete trigger target "${name}":`, error);
+        }
+    });
+}

package/dist/components/Studio/domain/useStudioShaderTimeUniforms.d.ts

@@ -0,0 +1,6 @@
+import { StudioAsset } from "../types";
+/**
+ * Drives the `time` shader uniform for materials that use animated presets.
+ * Uses `setInterval(16)` and `Date.now() % 1000000` like working Viro starter kits.
+ */
+export declare function useStudioShaderTimeUniforms(assets: StudioAsset[]): void;

package/dist/components/Studio/domain/useStudioShaderTimeUniforms.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStudioShaderTimeUniforms = useStudioShaderTimeUniforms;
+const react_1 = require("react");
+const ViroMaterials_1 = require("../../Material/ViroMaterials");
+const materialConfig_1 = require("./materialConfig");
+/** ~60fps — matches Viro starter kit / shader docs. */
+const TIME_TICK_MS = 16;
+function computeTimeUniformPayload(assets) {
+    const names = [];
+    for (const asset of assets) {
+        if (asset.asset_type_name !== "3D-MODEL")
+            continue;
+        if (asset.material_config == null)
+            continue;
+        const config = (0, materialConfig_1.parseMaterialConfig)(asset.material_config);
+        if (!config || !(0, materialConfig_1.materialConfigNeedsTimeUniform)(config))
+            continue;
+        names.push((0, materialConfig_1.studioMaterialName)(asset.id));
+    }
+    names.sort();
+    return { key: names.join("|"), names };
+}
+/**
+ * Drives the `time` shader uniform for materials that use animated presets.
+ * Uses `setInterval(16)` and `Date.now() % 1000000` like working Viro starter kits.
+ */
+function useStudioShaderTimeUniforms(assets) {
+    const payload = (0, react_1.useMemo)(() => computeTimeUniformPayload(assets), [assets]);
+    const payloadRef = (0, react_1.useRef)(payload);
+    payloadRef.current = payload;
+    const applyTimeUniforms = (0, react_1.useCallback)(() => {
+        const { names } = payloadRef.current;
+        if (names.length === 0)
+            return;
+        const time = Date.now() % 1_000_000;
+        for (const name of names) {
+            ViroMaterials_1.ViroMaterials.updateShaderUniform(name, "time", "float", time);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (payload.names.length === 0)
+            return;
+        const id = setInterval(applyTimeUniforms, TIME_TICK_MS);
+        applyTimeUniforms();
+        return () => clearInterval(id);
+    }, [payload.key, applyTimeUniforms]);
+}

package/dist/components/Studio/domain/useStudioShaderViewportUniforms.d.ts

@@ -0,0 +1,6 @@
+import { StudioAsset } from "../types";
+/**
+ * Pushes _rf_vpw / _rf_vph (physical pixel dimensions) to materials that sample the camera
+ * feed via gl_FragCoord. Called on mount and whenever the screen dimensions change.
+ */
+export declare function useStudioShaderViewportUniforms(assets: StudioAsset[]): void;

package/dist/components/Studio/domain/useStudioShaderViewportUniforms.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStudioShaderViewportUniforms = useStudioShaderViewportUniforms;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const ViroMaterials_1 = require("../../Material/ViroMaterials");
+const materialConfig_1 = require("./materialConfig");
+function computeViewportPayload(assets) {
+    const names = [];
+    for (const asset of assets) {
+        if (asset.asset_type_name !== "3D-MODEL")
+            continue;
+        if (asset.material_config == null)
+            continue;
+        const config = (0, materialConfig_1.parseMaterialConfig)(asset.material_config);
+        if (!config || !(0, materialConfig_1.materialConfigNeedsViewportUniforms)(config))
+            continue;
+        names.push((0, materialConfig_1.studioMaterialName)(asset.id));
+    }
+    names.sort();
+    return { key: names.join("|"), names };
+}
+/**
+ * Pushes _rf_vpw / _rf_vph (physical pixel dimensions) to materials that sample the camera
+ * feed via gl_FragCoord. Called on mount and whenever the screen dimensions change.
+ */
+function useStudioShaderViewportUniforms(assets) {
+    const payload = (0, react_1.useMemo)(() => computeViewportPayload(assets), [assets]);
+    const pushViewport = (0, react_1.useCallback)(() => {
+        if (payload.names.length === 0)
+            return;
+        const { width, height } = react_native_1.Dimensions.get("screen");
+        const pr = react_native_1.PixelRatio.get();
+        const pw = width * pr;
+        const ph = height * pr;
+        for (const name of payload.names) {
+            ViroMaterials_1.ViroMaterials.updateShaderUniform(name, "_rf_vpw", "float", pw);
+            ViroMaterials_1.ViroMaterials.updateShaderUniform(name, "_rf_vph", "float", ph);
+        }
+    }, [payload]);
+    (0, react_1.useEffect)(() => {
+        if (payload.names.length === 0)
+            return;
+        pushViewport();
+        const sub = react_native_1.Dimensions.addEventListener("change", pushViewport);
+        return () => sub.remove();
+    }, [payload.key, pushViewport]);
+}

package/dist/components/Studio/domain/viroNodeFactory.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { StudioAnimation, StudioAsset, StudioSceneMeta, ViroAnimationProp } from "../types";
+type SceneNavigator = any;
+export type NodeConfig = {
+    position: [number, number, number];
+    rotation: [number, number, number];
+    scale: [number, number, number];
+    dragType?: "FixedDistance" | "FixedDistanceOrigin" | "FixedToWorld" | "FixedToPlane";
+    dragPlane?: {
+        planePoint: [number, number, number];
+        planeNormal: [number, number, number];
+        maxDistance: number;
+    };
+    physicsBody?: Record<string, unknown>;
+    viroTag?: string;
+    onClick?: () => void;
+    animation?: ViroAnimationProp;
+};
+/**
+ * Derives the transform config for an asset.
+ * Clamps Z to -2 for non-trigger assets to guarantee visibility.
+ */
+export declare function createNodeConfig(asset: StudioAsset, sceneNavigator: SceneNavigator | undefined, animations: StudioAnimation[], scene: StudioSceneMeta | null, onAnimationTrigger?: (targetAssetId: string, animKey: string) => void, animationStates?: Record<string, ViroAnimationProp>, onSceneChange?: (sceneId: string, sceneName: string) => void): NodeConfig;
+/**
+ * Creates the appropriate Viro component for a StudioAsset.
+ */
+export declare function createNode(asset: StudioAsset, sceneNavigator: SceneNavigator | undefined, animations: StudioAnimation[], scene: StudioSceneMeta | null, onAnimationTrigger?: (targetAssetId: string, animKey: string) => void, animationStates?: Record<string, ViroAnimationProp>, onAssetLoaded?: (id: string) => void, onCollision?: (viroTag: string, collidedPoint: [number, number, number], collidedNormal: [number, number, number]) => void, onSceneChange?: (sceneId: string, sceneName: string) => void): React.ReactElement | null;
+export {};

package/dist/components/Studio/domain/viroNodeFactory.js

@@ -0,0 +1,193 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createNodeConfig = createNodeConfig;
+exports.createNode = createNode;
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const Viro3DObject_1 = require("../../Viro3DObject");
+const ViroImage_1 = require("../../ViroImage");
+const ViroText_1 = require("../../ViroText");
+const ViroVideo_1 = require("../../ViroVideo");
+const sceneNavigationHandler_1 = require("./sceneNavigationHandler");
+const materialConfig_1 = require("./materialConfig");
+const dragConfiguration_1 = require("./dragConfiguration");
+const physicsConfig_1 = require("./physicsConfig");
+/**
+ * Derives the transform config for an asset.
+ * Clamps Z to -2 for non-trigger assets to guarantee visibility.
+ */
+function createNodeConfig(asset, sceneNavigator, animations, scene, onAnimationTrigger, animationStates, onSceneChange) {
+    const hasTriggerImage = !!asset.trigger_image_url;
+    let posZ = asset.position_z ?? -2;
+    if (!hasTriggerImage && posZ > -0.5) {
+        console.warn(`[Studio/NodeFactory] Asset "${asset.name}" Z=${posZ} too close, clamping to -2`);
+        posZ = -2;
+    }
+    const position = [
+        asset.position_x ?? 0,
+        asset.position_y ?? 0,
+        posZ,
+    ];
+    // Apply trigger image orientation offset to rotation Z
+    let rotationZ = asset.rotation_z ?? 0;
+    if (hasTriggerImage && asset.trigger_image_orientation) {
+        const offsets = {
+            Left: -90,
+            Right: 90,
+            Down: 180,
+            Up: 0,
+        };
+        rotationZ += offsets[asset.trigger_image_orientation] ?? 0;
+    }
+    const rotation = [
+        asset.rotation_x ?? 0,
+        asset.rotation_y ?? 0,
+        rotationZ,
+    ];
+    let scaleValue = asset.scale ?? 1;
+    if (scaleValue < 0.01)
+        scaleValue = 0.1;
+    if (scaleValue > 10)
+        scaleValue = 2;
+    const scale = [scaleValue, scaleValue, scaleValue];
+    const dragType = dragConfiguration_1.DragConfiguration.getDragType(asset, scene);
+    let dragPlane;
+    if (dragType === "FixedToPlane") {
+        dragPlane = dragConfiguration_1.DragConfiguration.getDragPlane(scene?.plane_direction ?? "Horizontal", position);
+    }
+    const parsedPhysics = (0, physicsConfig_1.parsePhysicsBodyConfig)(asset.physics_config);
+    const physicsBody = parsedPhysics ? (0, physicsConfig_1.buildViroPhysicsBody)(parsedPhysics) : undefined;
+    const viroTag = parsedPhysics ? asset.id : undefined;
+    const onClick = createOnClickHandler(asset, sceneNavigator, animations, onAnimationTrigger, onSceneChange);
+    const animation = animationStates?.[asset.id];
+    return { position, rotation, scale, dragType, dragPlane, physicsBody, viroTag, onClick, animation };
+}
+function createOnClickHandler(asset, sceneNavigator, animations, onAnimationTrigger, onSceneChange) {
+    const fn = asset.scene_function;
+    if (!fn)
+        return undefined;
+    if (fn.function_type === "NAVIGATION" && !fn.scene_navigation?.navigate_to) {
+        console.warn(`[Studio] Asset "${asset.name}" has NAVIGATION but no target scene`);
+        return undefined;
+    }
+    if (fn.function_type === "ALERT" && !fn.scene_alert) {
+        console.warn(`[Studio] Asset "${asset.name}" has ALERT but no alert data`);
+        return undefined;
+    }
+    if (fn.function_type === "ANIMATION" && !fn.scene_animation) {
+        console.warn(`[Studio] Asset "${asset.name}" has ANIMATION but no animation data`);
+        return undefined;
+    }
+    return () => (0, sceneNavigationHandler_1.executeFunctionWithRelations)(fn, sceneNavigator, animations, onAnimationTrigger, 0, onSceneChange);
+}
+/** Resolves asset type from asset_type_name. */
+function resolveType(asset) {
+    return asset.asset_type_name ?? null;
+}
+/** Infers 3D model format from file extension. */
+function inferModelType(url) {
+    const ext = url.toLowerCase().split(".").pop();
+    if (ext === "gltf")
+        return "GLTF";
+    if (ext === "obj")
+        return "OBJ";
+    if (ext === "vrx")
+        return "VRX";
+    return "GLB";
+}
+function create3DObject(asset, config, onAssetLoaded, onCollision) {
+    if (!asset.file_url) {
+        console.warn(`[Studio] 3D model "${asset.name}" has no file_url`);
+        return null;
+    }
+    const modelType = inferModelType(asset.file_url);
+    // Android: slightly reduce scale for stability
+    const scale = react_native_1.Platform.OS === "android"
+        ? [
+            config.scale[0] * 0.8,
+            config.scale[1] * 0.8,
+            config.scale[2] * 0.8,
+        ]
+        : config.scale;
+    const hasMaterialConfig = (0, materialConfig_1.parseMaterialConfig)(asset.material_config) !== null;
+    const shaderOverrides = hasMaterialConfig ? [(0, materialConfig_1.studioMaterialName)(asset.id)] : undefined;
+    return (<Viro3DObject_1.Viro3DObject key={asset.id} source={{ uri: asset.file_url }} position={config.position} rotation={config.rotation} scale={scale} type={modelType} dragType={config.dragType} dragPlane={config.dragPlane} animation={config.animation} onClick={config.onClick} renderingOrder={react_native_1.Platform.OS === "android" ? 1 : 0} onLoadEnd={() => onAssetLoaded?.(asset.id)} onError={(e) => console.error(`[Studio] 3D model "${asset.name}" error:`, e)} 
+    // Viro derives native canDrag from `onDrag != undefined`; without this prop
+    // the drag recognizer is never attached, even when dragType is set.
+    {...(config.dragType ? { onDrag: () => { } } : {})} {...(shaderOverrides ? { shaderOverrides } : {})} {...(config.physicsBody ? { physicsBody: config.physicsBody, viroTag: config.viroTag } : {})} {...(onCollision ? { onCollision: onCollision } : {})}/>);
+}
+function createImage(asset, config, onAssetLoaded) {
+    if (!asset.file_url) {
+        console.warn(`[Studio] Image "${asset.name}" has no file_url`);
+        return null;
+    }
+    return (<ViroImage_1.ViroImage key={asset.id} source={{ uri: asset.file_url }} position={config.position} rotation={config.rotation} scale={config.scale} dragType={config.dragType} animation={config.animation} onClick={config.onClick} onLoadEnd={() => onAssetLoaded?.(asset.id)} onError={(e) => console.error(`[Studio] Image "${asset.name}" error:`, e)} {...(config.dragType ? { onDrag: () => { } } : {})}/>);
+}
+function createText(asset, config) {
+    return (<ViroText_1.ViroText key={asset.id} text={asset.name ?? ""} position={config.position} rotation={config.rotation} scale={config.scale} dragType={config.dragType} animation={config.animation} onClick={config.onClick} style={{
+            fontFamily: "Arial",
+            fontSize: 20,
+            color: "#FFFFFF",
+            textAlign: "center",
+        }} {...(config.dragType ? { onDrag: () => { } } : {})}/>);
+}
+function createVideo(asset, config) {
+    if (!asset.file_url) {
+        console.warn(`[Studio] Video "${asset.name}" has no file_url`);
+        return null;
+    }
+    return (<ViroVideo_1.ViroVideo key={asset.id} source={{ uri: asset.file_url }} position={config.position} rotation={config.rotation} scale={config.scale} dragType={config.dragType} animation={config.animation} onClick={config.onClick} loop={true} muted={false} onError={(e) => console.error(`[Studio] Video "${asset.name}" error:`, e)} {...(config.dragType ? { onDrag: () => { } } : {})}/>);
+}
+/**
+ * Creates the appropriate Viro component for a StudioAsset.
+ */
+function createNode(asset, sceneNavigator, animations, scene, onAnimationTrigger, animationStates, onAssetLoaded, onCollision, onSceneChange) {
+    const type = resolveType(asset);
+    const config = createNodeConfig(asset, sceneNavigator, animations, scene, onAnimationTrigger, animationStates, onSceneChange);
+    switch (type) {
+        case "3D-MODEL":
+            return create3DObject(asset, config, onAssetLoaded, onCollision);
+        case "IMAGE":
+            return createImage(asset, config, onAssetLoaded);
+        case "TEXT":
+            return createText(asset, config);
+        case "VIDEO":
+            return createVideo(asset, config);
+        default:
+            console.warn(`[Studio] Unknown asset type "${type}" for "${asset.name}"`);
+            return null;
+    }
+}

package/dist/components/Studio/index.d.ts

@@ -0,0 +1,3 @@
+export { StudioARScene } from "./StudioARScene";
+export { StudioSceneNavigator } from "./StudioSceneNavigator";
+export type { StudioAnimation, StudioAsset, StudioCollisionBinding, StudioProjectApiResponse, StudioProjectAsset, StudioProjectMeta, StudioProjectOpeningScene, StudioProjectOverview, StudioProjectSceneSummary, StudioSceneCreatedBy, StudioSceneFunction, StudioSceneMeta, StudioSceneResponse, ViroAnimationProp, } from "./types";

package/dist/components/Studio/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioSceneNavigator = exports.StudioARScene = void 0;
+var StudioARScene_1 = require("./StudioARScene");
+Object.defineProperty(exports, "StudioARScene", { enumerable: true, get: function () { return StudioARScene_1.StudioARScene; } });
+var StudioSceneNavigator_1 = require("./StudioSceneNavigator");
+Object.defineProperty(exports, "StudioSceneNavigator", { enumerable: true, get: function () { return StudioSceneNavigator_1.StudioSceneNavigator; } });