@reactvision/react-viro 2.43.0 → 2.43.1

package/dist/fabric-interop/components/ViroVRSceneNavigator.js

@@ -0,0 +1,73 @@
+"use strict";
+/**
+ * ViroVRSceneNavigator
+ *
+ * A component for rendering VR scenes.
+ */
+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.ViroVRSceneNavigator = void 0;
+const react_1 = __importStar(require("react"));
+const ViroFabricContainer_1 = require("../ViroFabricContainer");
+const ViroGlobal_1 = require("./ViroGlobal");
+/**
+ * ViroVRSceneNavigator is a component for rendering VR scenes.
+ * It provides a container for VR scenes and handles the VR session lifecycle.
+ */
+const ViroVRSceneNavigator = (props) => {
+    const [apiKey] = (0, react_1.useState)(() => {
+        // Generate a random API key for demo purposes
+        return `viro-${Math.random().toString(36).substring(2, 15)}`;
+    });
+    // Initialize VR scene
+    (0, react_1.useEffect)(() => {
+        const nativeViro = (0, ViroGlobal_1.getNativeViro)();
+        if (!nativeViro)
+            return;
+        // Initialize Viro
+        nativeViro.initialize();
+        // Cleanup when unmounting
+        return () => {
+            // Cleanup code here
+        };
+    }, []);
+    // Create the scene component
+    const SceneComponent = props.initialScene.scene;
+    // Render the VR scene
+    return (<ViroFabricContainer_1.ViroFabricContainer style={props.style} debug={false} arEnabled={false} onCameraTransformUpdate={props.onCameraTransformUpdate}>
+      <SceneComponent />
+    </ViroFabricContainer_1.ViroFabricContainer>);
+};
+exports.ViroVRSceneNavigator = ViroVRSceneNavigator;

package/dist/fabric-interop/components/ViroVideo.d.ts

@@ -0,0 +1,32 @@
+/**
+ * ViroVideo
+ *
+ * A component for displaying video content in 3D space.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroVideoProps extends ViroCommonProps {
+    source: {
+        uri: string;
+    } | number;
+    width?: number;
+    height?: number;
+    loop?: boolean;
+    muted?: boolean;
+    volume?: number;
+    paused?: boolean;
+    resizeMode?: "ScaleToFill" | "ScaleToFit" | "StretchToFill";
+    stereoMode?: "LeftRight" | "RightLeft" | "TopBottom" | "BottomTop" | "None";
+    materials?: string | string[];
+    lightReceivingBitMask?: number;
+    shadowCastingBitMask?: number;
+    onBufferStart?: () => void;
+    onBufferEnd?: () => void;
+    onFinish?: () => void;
+    onUpdateTime?: (currentTime: number, totalTime: number) => void;
+    onError?: (error: string) => void;
+}
+/**
+ * ViroVideo is a component for displaying video content in 3D space.
+ */
+export declare const ViroVideo: React.FC<ViroVideoProps>;

package/dist/fabric-interop/components/ViroVideo.js

@@ -0,0 +1,52 @@
+"use strict";
+/**
+ * ViroVideo
+ *
+ * A component for displaying video content in 3D space.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroVideo = void 0;
+const ViroUtils_1 = require("./ViroUtils");
+/**
+ * ViroVideo is a component for displaying video content in 3D space.
+ */
+const ViroVideo = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.convertCommonProps)(props),
+        source: props.source,
+        width: props.width,
+        height: props.height,
+        loop: props.loop,
+        muted: props.muted,
+        volume: props.volume,
+        paused: props.paused,
+        resizeMode: props.resizeMode,
+        stereoMode: props.stereoMode,
+        materials: props.materials,
+        lightReceivingBitMask: props.lightReceivingBitMask,
+        shadowCastingBitMask: props.shadowCastingBitMask,
+    };
+    // Create the node (parent will be determined by context)
+    const nodeId = (0, ViroUtils_1.useViroNode)("video", nativeProps);
+    // Register event handlers using our new event system
+    (0, ViroUtils_1.useViroEventListeners)(nodeId, {
+        onHover: props.onHover,
+        onClick: props.onClick,
+        onClickState: props.onClickState,
+        onTouch: props.onTouch,
+        onScroll: props.onScroll,
+        onSwipe: props.onSwipe,
+        onDrag: props.onDrag,
+        onPinch: props.onPinch,
+        onRotate: props.onRotate,
+        onFuse: typeof props.onFuse === "function"
+            ? props.onFuse
+            : props.onFuse?.callback,
+        onCollision: props.onCollision,
+        onTransformUpdate: props.onTransformUpdate,
+    });
+    // Component doesn't have children, so just return null
+    return null;
+};
+exports.ViroVideo = ViroVideo;

package/dist/fabric-interop/components/index.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Viro Component Wrappers
+ *
+ * This module exports React components that maintain the same API as the original
+ * Viro components but use the Fabric interop layer internally.
+ */
+export { ViroNode } from "./ViroNode";
+export { ViroScene } from "./ViroScene";
+export { ViroARScene } from "./ViroARScene";
+export { ViroFlexView } from "./ViroFlexView";
+export { ViroBox } from "./ViroBox";
+export { ViroSphere } from "./ViroSphere";
+export { Viro3DObject } from "./Viro3DObject";
+export { ViroGeometry } from "./ViroGeometry";
+export { ViroQuad } from "./ViroQuad";
+export { ViroPolygon } from "./ViroPolygon";
+export { ViroPolyline } from "./ViroPolyline";
+export { ViroSurface } from "./ViroSurface";
+export { ViroText } from "./ViroText";
+export { ViroImage } from "./ViroImage";
+export { ViroVideo } from "./ViroVideo";
+export { ViroAnimatedImage } from "./ViroAnimatedImage";
+export { Viro360Image } from "./Viro360Image";
+export { Viro360Video } from "./Viro360Video";
+export { ViroSkyBox } from "./ViroSkyBox";
+export { ViroPortal } from "./ViroPortal";
+export { ViroPortalScene } from "./ViroPortalScene";
+export { ViroAmbientLight } from "./ViroAmbientLight";
+export { ViroDirectionalLight } from "./ViroDirectionalLight";
+export { ViroSpotLight } from "./ViroSpotLight";
+export { ViroOmniLight } from "./ViroOmniLight";
+export { ViroLightingEnvironment } from "./ViroLightingEnvironment";
+export { ViroCamera } from "./ViroCamera";
+export { ViroOrbitCamera } from "./ViroOrbitCamera";
+export { ViroSound } from "./ViroSound";
+export { ViroSoundField } from "./ViroSoundField";
+export { ViroSpatialSound } from "./ViroSpatialSound";
+export { ViroButton } from "./ViroButton";
+export { ViroController } from "./ViroController";
+export { ViroSpinner } from "./ViroSpinner";
+export { ViroParticleEmitter } from "./ViroParticleEmitter";
+export { ViroAnimatedComponent } from "./ViroAnimatedComponent";
+export { ViroMaterialVideo } from "./ViroMaterialVideo";
+export { ViroSceneNavigator } from "./ViroSceneNavigator";
+export { ViroVRSceneNavigator } from "./ViroVRSceneNavigator";
+export { ViroARSceneNavigator } from "./ViroARSceneNavigator";
+export { Viro3DSceneNavigator } from "./Viro3DSceneNavigator";
+export { ViroARCamera } from "./ViroARCamera";
+export { ViroARPlane } from "./AR/ViroARPlane";
+export { ViroARPlaneSelector } from "./AR/ViroARPlaneSelector";
+export { ViroARImageMarker } from "./ViroARImageMarker";
+export { ViroARObjectMarker } from "./ViroARObjectMarker";
+export * from "./ViroUtils";
+export * from "./Animation/ViroAnimations";
+import ViroAnimations from "./Animation/ViroAnimations";
+export { ViroAnimations };
+export * from "./Material/ViroMaterials";
+import ViroMaterials from "./Material/ViroMaterials";
+export { ViroMaterials };
+export * from "./AR/ViroARTrackingTargets";
+import ViroARTrackingTargets from "./AR/ViroARTrackingTargets";
+export { ViroARTrackingTargets };

package/dist/fabric-interop/components/index.js

@@ -0,0 +1,144 @@
+"use strict";
+/**
+ * Viro Component Wrappers
+ *
+ * This module exports React components that maintain the same API as the original
+ * Viro components but use the Fabric interop layer internally.
+ */
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroARTrackingTargets = exports.ViroMaterials = exports.ViroAnimations = exports.ViroARObjectMarker = exports.ViroARImageMarker = exports.ViroARPlaneSelector = exports.ViroARPlane = exports.ViroARCamera = exports.Viro3DSceneNavigator = exports.ViroARSceneNavigator = exports.ViroVRSceneNavigator = exports.ViroSceneNavigator = exports.ViroMaterialVideo = exports.ViroAnimatedComponent = exports.ViroParticleEmitter = exports.ViroSpinner = exports.ViroController = exports.ViroButton = exports.ViroSpatialSound = exports.ViroSoundField = exports.ViroSound = exports.ViroOrbitCamera = exports.ViroCamera = exports.ViroLightingEnvironment = exports.ViroOmniLight = exports.ViroSpotLight = exports.ViroDirectionalLight = exports.ViroAmbientLight = exports.ViroPortalScene = exports.ViroPortal = exports.ViroSkyBox = exports.Viro360Video = exports.Viro360Image = exports.ViroAnimatedImage = exports.ViroVideo = exports.ViroImage = exports.ViroText = exports.ViroSurface = exports.ViroPolyline = exports.ViroPolygon = exports.ViroQuad = exports.ViroGeometry = exports.Viro3DObject = exports.ViroSphere = exports.ViroBox = exports.ViroFlexView = exports.ViroARScene = exports.ViroScene = exports.ViroNode = void 0;
+// Basic components
+var ViroNode_1 = require("./ViroNode");
+Object.defineProperty(exports, "ViroNode", { enumerable: true, get: function () { return ViroNode_1.ViroNode; } });
+var ViroScene_1 = require("./ViroScene");
+Object.defineProperty(exports, "ViroScene", { enumerable: true, get: function () { return ViroScene_1.ViroScene; } });
+var ViroARScene_1 = require("./ViroARScene");
+Object.defineProperty(exports, "ViroARScene", { enumerable: true, get: function () { return ViroARScene_1.ViroARScene; } });
+var ViroFlexView_1 = require("./ViroFlexView");
+Object.defineProperty(exports, "ViroFlexView", { enumerable: true, get: function () { return ViroFlexView_1.ViroFlexView; } });
+// 3D primitives
+var ViroBox_1 = require("./ViroBox");
+Object.defineProperty(exports, "ViroBox", { enumerable: true, get: function () { return ViroBox_1.ViroBox; } });
+var ViroSphere_1 = require("./ViroSphere");
+Object.defineProperty(exports, "ViroSphere", { enumerable: true, get: function () { return ViroSphere_1.ViroSphere; } });
+var Viro3DObject_1 = require("./Viro3DObject");
+Object.defineProperty(exports, "Viro3DObject", { enumerable: true, get: function () { return Viro3DObject_1.Viro3DObject; } });
+var ViroGeometry_1 = require("./ViroGeometry");
+Object.defineProperty(exports, "ViroGeometry", { enumerable: true, get: function () { return ViroGeometry_1.ViroGeometry; } });
+var ViroQuad_1 = require("./ViroQuad");
+Object.defineProperty(exports, "ViroQuad", { enumerable: true, get: function () { return ViroQuad_1.ViroQuad; } });
+var ViroPolygon_1 = require("./ViroPolygon");
+Object.defineProperty(exports, "ViroPolygon", { enumerable: true, get: function () { return ViroPolygon_1.ViroPolygon; } });
+var ViroPolyline_1 = require("./ViroPolyline");
+Object.defineProperty(exports, "ViroPolyline", { enumerable: true, get: function () { return ViroPolyline_1.ViroPolyline; } });
+var ViroSurface_1 = require("./ViroSurface");
+Object.defineProperty(exports, "ViroSurface", { enumerable: true, get: function () { return ViroSurface_1.ViroSurface; } });
+// 2D components
+var ViroText_1 = require("./ViroText");
+Object.defineProperty(exports, "ViroText", { enumerable: true, get: function () { return ViroText_1.ViroText; } });
+var ViroImage_1 = require("./ViroImage");
+Object.defineProperty(exports, "ViroImage", { enumerable: true, get: function () { return ViroImage_1.ViroImage; } });
+var ViroVideo_1 = require("./ViroVideo");
+Object.defineProperty(exports, "ViroVideo", { enumerable: true, get: function () { return ViroVideo_1.ViroVideo; } });
+var ViroAnimatedImage_1 = require("./ViroAnimatedImage");
+Object.defineProperty(exports, "ViroAnimatedImage", { enumerable: true, get: function () { return ViroAnimatedImage_1.ViroAnimatedImage; } });
+// 360 components
+var Viro360Image_1 = require("./Viro360Image");
+Object.defineProperty(exports, "Viro360Image", { enumerable: true, get: function () { return Viro360Image_1.Viro360Image; } });
+var Viro360Video_1 = require("./Viro360Video");
+Object.defineProperty(exports, "Viro360Video", { enumerable: true, get: function () { return Viro360Video_1.Viro360Video; } });
+var ViroSkyBox_1 = require("./ViroSkyBox");
+Object.defineProperty(exports, "ViroSkyBox", { enumerable: true, get: function () { return ViroSkyBox_1.ViroSkyBox; } });
+// Portal components
+var ViroPortal_1 = require("./ViroPortal");
+Object.defineProperty(exports, "ViroPortal", { enumerable: true, get: function () { return ViroPortal_1.ViroPortal; } });
+var ViroPortalScene_1 = require("./ViroPortalScene");
+Object.defineProperty(exports, "ViroPortalScene", { enumerable: true, get: function () { return ViroPortalScene_1.ViroPortalScene; } });
+// Lights
+var ViroAmbientLight_1 = require("./ViroAmbientLight");
+Object.defineProperty(exports, "ViroAmbientLight", { enumerable: true, get: function () { return ViroAmbientLight_1.ViroAmbientLight; } });
+var ViroDirectionalLight_1 = require("./ViroDirectionalLight");
+Object.defineProperty(exports, "ViroDirectionalLight", { enumerable: true, get: function () { return ViroDirectionalLight_1.ViroDirectionalLight; } });
+var ViroSpotLight_1 = require("./ViroSpotLight");
+Object.defineProperty(exports, "ViroSpotLight", { enumerable: true, get: function () { return ViroSpotLight_1.ViroSpotLight; } });
+var ViroOmniLight_1 = require("./ViroOmniLight");
+Object.defineProperty(exports, "ViroOmniLight", { enumerable: true, get: function () { return ViroOmniLight_1.ViroOmniLight; } });
+var ViroLightingEnvironment_1 = require("./ViroLightingEnvironment");
+Object.defineProperty(exports, "ViroLightingEnvironment", { enumerable: true, get: function () { return ViroLightingEnvironment_1.ViroLightingEnvironment; } });
+// Cameras
+var ViroCamera_1 = require("./ViroCamera");
+Object.defineProperty(exports, "ViroCamera", { enumerable: true, get: function () { return ViroCamera_1.ViroCamera; } });
+var ViroOrbitCamera_1 = require("./ViroOrbitCamera");
+Object.defineProperty(exports, "ViroOrbitCamera", { enumerable: true, get: function () { return ViroOrbitCamera_1.ViroOrbitCamera; } });
+// Audio
+var ViroSound_1 = require("./ViroSound");
+Object.defineProperty(exports, "ViroSound", { enumerable: true, get: function () { return ViroSound_1.ViroSound; } });
+var ViroSoundField_1 = require("./ViroSoundField");
+Object.defineProperty(exports, "ViroSoundField", { enumerable: true, get: function () { return ViroSoundField_1.ViroSoundField; } });
+var ViroSpatialSound_1 = require("./ViroSpatialSound");
+Object.defineProperty(exports, "ViroSpatialSound", { enumerable: true, get: function () { return ViroSpatialSound_1.ViroSpatialSound; } });
+// Interactive components
+var ViroButton_1 = require("./ViroButton");
+Object.defineProperty(exports, "ViroButton", { enumerable: true, get: function () { return ViroButton_1.ViroButton; } });
+var ViroController_1 = require("./ViroController");
+Object.defineProperty(exports, "ViroController", { enumerable: true, get: function () { return ViroController_1.ViroController; } });
+var ViroSpinner_1 = require("./ViroSpinner");
+Object.defineProperty(exports, "ViroSpinner", { enumerable: true, get: function () { return ViroSpinner_1.ViroSpinner; } });
+// Effects
+var ViroParticleEmitter_1 = require("./ViroParticleEmitter");
+Object.defineProperty(exports, "ViroParticleEmitter", { enumerable: true, get: function () { return ViroParticleEmitter_1.ViroParticleEmitter; } });
+var ViroAnimatedComponent_1 = require("./ViroAnimatedComponent");
+Object.defineProperty(exports, "ViroAnimatedComponent", { enumerable: true, get: function () { return ViroAnimatedComponent_1.ViroAnimatedComponent; } });
+var ViroMaterialVideo_1 = require("./ViroMaterialVideo");
+Object.defineProperty(exports, "ViroMaterialVideo", { enumerable: true, get: function () { return ViroMaterialVideo_1.ViroMaterialVideo; } });
+// Scene navigators
+var ViroSceneNavigator_1 = require("./ViroSceneNavigator");
+Object.defineProperty(exports, "ViroSceneNavigator", { enumerable: true, get: function () { return ViroSceneNavigator_1.ViroSceneNavigator; } });
+var ViroVRSceneNavigator_1 = require("./ViroVRSceneNavigator");
+Object.defineProperty(exports, "ViroVRSceneNavigator", { enumerable: true, get: function () { return ViroVRSceneNavigator_1.ViroVRSceneNavigator; } });
+var ViroARSceneNavigator_1 = require("./ViroARSceneNavigator");
+Object.defineProperty(exports, "ViroARSceneNavigator", { enumerable: true, get: function () { return ViroARSceneNavigator_1.ViroARSceneNavigator; } });
+var Viro3DSceneNavigator_1 = require("./Viro3DSceneNavigator");
+Object.defineProperty(exports, "Viro3DSceneNavigator", { enumerable: true, get: function () { return Viro3DSceneNavigator_1.Viro3DSceneNavigator; } });
+// AR components
+var ViroARCamera_1 = require("./ViroARCamera");
+Object.defineProperty(exports, "ViroARCamera", { enumerable: true, get: function () { return ViroARCamera_1.ViroARCamera; } });
+var ViroARPlane_1 = require("./AR/ViroARPlane");
+Object.defineProperty(exports, "ViroARPlane", { enumerable: true, get: function () { return ViroARPlane_1.ViroARPlane; } });
+var ViroARPlaneSelector_1 = require("./AR/ViroARPlaneSelector");
+Object.defineProperty(exports, "ViroARPlaneSelector", { enumerable: true, get: function () { return ViroARPlaneSelector_1.ViroARPlaneSelector; } });
+var ViroARImageMarker_1 = require("./ViroARImageMarker");
+Object.defineProperty(exports, "ViroARImageMarker", { enumerable: true, get: function () { return ViroARImageMarker_1.ViroARImageMarker; } });
+var ViroARObjectMarker_1 = require("./ViroARObjectMarker");
+Object.defineProperty(exports, "ViroARObjectMarker", { enumerable: true, get: function () { return ViroARObjectMarker_1.ViroARObjectMarker; } });
+// Utilities
+__exportStar(require("./ViroUtils"), exports);
+// Animation utilities
+__exportStar(require("./Animation/ViroAnimations"), exports);
+const ViroAnimations_1 = __importDefault(require("./Animation/ViroAnimations"));
+exports.ViroAnimations = ViroAnimations_1.default;
+// Material utilities
+__exportStar(require("./Material/ViroMaterials"), exports);
+const ViroMaterials_1 = __importDefault(require("./Material/ViroMaterials"));
+exports.ViroMaterials = ViroMaterials_1.default;
+// AR utilities
+__exportStar(require("./AR/ViroARTrackingTargets"), exports);
+const ViroARTrackingTargets_1 = __importDefault(require("./AR/ViroARTrackingTargets"));
+exports.ViroARTrackingTargets = ViroARTrackingTargets_1.default;

package/dist/fabric-interop/examples/BasicSceneExample.d.ts

@@ -0,0 +1,11 @@
+/**
+ * BasicSceneExample
+ *
+ * A simple example demonstrating the new fabric-interop system with:
+ * - Scene management and lifecycle
+ * - Property system with individual setters
+ * - Event system with JSI + fallback
+ * - Memory management integration
+ */
+import React from "react";
+export declare const BasicSceneExample: React.FC;

package/dist/fabric-interop/examples/BasicSceneExample.js

@@ -0,0 +1,244 @@
+"use strict";
+/**
+ * BasicSceneExample
+ *
+ * A simple example demonstrating the new fabric-interop system with:
+ * - Scene management and lifecycle
+ * - Property system with individual setters
+ * - Event system with JSI + fallback
+ * - Memory management integration
+ */
+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.BasicSceneExample = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const index_1 = require("../index");
+const BasicSceneExample = () => {
+    const [sceneActive, setSceneActive] = (0, react_1.useState)(false);
+    const [memoryStats, setMemoryStats] = (0, react_1.useState)(null);
+    // Initialize materials and animations when component mounts
+    (0, react_1.useEffect)(() => {
+        // Create a red material for the box
+        (0, index_1.createMaterial)("redMaterial", {
+            diffuseColor: "#FF0000",
+            shininess: 2.0,
+            lightingModel: "Lambert",
+        });
+        // Create a blue material for the box
+        (0, index_1.createMaterial)("blueMaterial", {
+            diffuseColor: "#0000FF",
+            shininess: 2.0,
+            lightingModel: "Lambert",
+        });
+        // Create a rotation animation
+        (0, index_1.createAnimation)("spinAnimation", {
+            properties: {
+                rotateY: "+=360",
+            },
+            duration: 2000,
+            easing: "Linear",
+        });
+        // Create a scale animation
+        (0, index_1.createAnimation)("pulseAnimation", {
+            properties: {
+                scaleX: 1.5,
+                scaleY: 1.5,
+                scaleZ: 1.5,
+            },
+            duration: 1000,
+            easing: "EaseInEaseOut",
+        });
+    }, []);
+    // Handle scene initialization
+    const handleSceneInitialized = (success) => {
+        console.log("Scene initialized:", success);
+        setSceneActive(success);
+        if (success) {
+            react_native_1.Alert.alert("Success", "Viro scene initialized successfully!");
+        }
+        else {
+            react_native_1.Alert.alert("Error", "Failed to initialize Viro scene");
+        }
+    };
+    // Handle scene state changes
+    const handleSceneStateChanged = (event) => {
+        console.log("Scene state changed:", event);
+    };
+    // Handle memory warnings
+    const handleMemoryWarning = (event) => {
+        console.log("Memory warning received:", event.memoryStats);
+        setMemoryStats(event.memoryStats);
+        react_native_1.Alert.alert("Memory Warning", `Memory usage: ${event.memoryStats.usedMemoryMB?.toFixed(1) || "N/A"} MB`);
+    };
+    // Handle box click
+    const handleBoxClick = () => {
+        react_native_1.Alert.alert("Box Clicked", "The red box was clicked!");
+        // Execute spin animation
+        (0, index_1.executeAnimation)("box1", "spinAnimation", {
+            run: true,
+            loop: false,
+        });
+    };
+    // Handle box hover
+    const handleBoxHover = (isHovering) => {
+        console.log("Box hover:", isHovering);
+        if (isHovering) {
+            // Execute pulse animation on hover
+            (0, index_1.executeAnimation)("box1", "pulseAnimation", {
+                run: true,
+                loop: false,
+            });
+        }
+    };
+    // Get current memory stats
+    const checkMemoryStats = () => {
+        const stats = (0, index_1.getMemoryStats)();
+        setMemoryStats(stats);
+        if (stats) {
+            react_native_1.Alert.alert("Memory Stats", `Total Scenes: ${stats.totalScenes || 0}\n` +
+                `Active Scenes: ${stats.activeScenes || 0}\n` +
+                `Managed Nodes: ${stats.managedNodes || 0}\n` +
+                `Memory Usage: ${stats.usedMemoryMB?.toFixed(1) || "N/A"} MB`);
+        }
+        else {
+            react_native_1.Alert.alert("Memory Stats", "Memory statistics not available");
+        }
+    };
+    // Perform manual memory cleanup
+    const cleanupMemory = () => {
+        (0, index_1.performMemoryCleanup)();
+        react_native_1.Alert.alert("Memory Cleanup", "Memory cleanup performed");
+    };
+    return (<react_native_1.View style={styles.container}>
+      <react_native_1.Text style={styles.title}>Viro Fabric Interop Example</react_native_1.Text>
+      <react_native_1.Text style={styles.subtitle}>
+        Demonstrating New Architecture compatibility
+      </react_native_1.Text>
+
+      <react_native_1.View style={styles.controls}>
+        <react_native_1.Button title="Check Memory Stats" onPress={checkMemoryStats} disabled={!sceneActive}/>
+        <react_native_1.Button title="Cleanup Memory" onPress={cleanupMemory} disabled={!sceneActive}/>
+      </react_native_1.View>
+
+      {memoryStats && (<react_native_1.View style={styles.stats}>
+          <react_native_1.Text style={styles.statsTitle}>Memory Stats:</react_native_1.Text>
+          <react_native_1.Text>Total Scenes: {memoryStats.totalScenes || 0}</react_native_1.Text>
+          <react_native_1.Text>Active Scenes: {memoryStats.activeScenes || 0}</react_native_1.Text>
+          <react_native_1.Text>Managed Nodes: {memoryStats.managedNodes || 0}</react_native_1.Text>
+          <react_native_1.Text>
+            Memory Usage: {memoryStats.usedMemoryMB?.toFixed(1) || "N/A"} MB
+          </react_native_1.Text>
+        </react_native_1.View>)}
+
+      <index_1.ViroFabricContainer style={styles.viroContainer} debug={true} arEnabled={false} worldAlignment="Gravity" onInitialized={handleSceneInitialized} onSceneStateChanged={handleSceneStateChanged} onMemoryWarning={handleMemoryWarning}>
+        <index_1.ViroScene onSceneLoadStart={() => console.log("Scene load started")} onSceneLoadEnd={() => console.log("Scene load ended")} onSceneError={(error) => console.error("Scene error:", error)}>
+          {/* Red box with click and hover events */}
+          <index_1.ViroBox position={[-1, 0, -3]} scale={[0.5, 0.5, 0.5]} materials={["redMaterial"]} onClick={handleBoxClick} onHover={(isHovering) => handleBoxHover(isHovering)} canClick={true} canHover={true}/>
+
+          {/* Blue box with different position */}
+          <index_1.ViroBox position={[1, 0, -3]} scale={[0.5, 0.5, 0.5]} materials={["blueMaterial"]} onClick={() => react_native_1.Alert.alert("Blue Box", "Blue box clicked!")} canClick={true}/>
+
+          {/* Center box with animation */}
+          <index_1.ViroBox position={[0, 1, -3]} scale={[0.3, 0.3, 0.3]} materials={["redMaterial"]} animation={{
+            name: "spinAnimation",
+            run: true,
+            loop: true,
+        }}/>
+        </index_1.ViroScene>
+      </index_1.ViroFabricContainer>
+
+      <react_native_1.View style={styles.footer}>
+        <react_native_1.Text style={styles.footerText}>
+          Status: {sceneActive ? "Active" : "Initializing..."}
+        </react_native_1.Text>
+        <react_native_1.Text style={styles.footerText}>
+          Features: Scene Management • Property System • Event System • Memory
+          Management
+        </react_native_1.Text>
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.BasicSceneExample = BasicSceneExample;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#f0f0f0",
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: "bold",
+        textAlign: "center",
+        marginTop: 20,
+        marginBottom: 5,
+    },
+    subtitle: {
+        fontSize: 14,
+        textAlign: "center",
+        color: "#666",
+        marginBottom: 15,
+    },
+    controls: {
+        flexDirection: "row",
+        justifyContent: "space-around",
+        paddingHorizontal: 20,
+        marginBottom: 10,
+    },
+    stats: {
+        backgroundColor: "#fff",
+        margin: 10,
+        padding: 10,
+        borderRadius: 5,
+        borderWidth: 1,
+        borderColor: "#ddd",
+    },
+    statsTitle: {
+        fontWeight: "bold",
+        marginBottom: 5,
+    },
+    viroContainer: {
+        flex: 1,
+        backgroundColor: "#000",
+    },
+    footer: {
+        backgroundColor: "#333",
+        padding: 10,
+    },
+    footerText: {
+        color: "#fff",
+        textAlign: "center",
+        fontSize: 12,
+    },
+});

package/dist/fabric-interop/examples/ComprehensiveExample.d.ts

@@ -0,0 +1,13 @@
+/**
+ * ComprehensiveExample
+ *
+ * A comprehensive example demonstrating the updated fabric-interop system with:
+ * - Multiple component types (3D primitives, lights, text, images)
+ * - Scene management and lifecycle
+ * - Property system with individual setters
+ * - Event system with JSI + fallback
+ * - Memory management integration
+ * - Material and animation management
+ */
+import React from "react";
+export declare const ComprehensiveExample: React.FC;