lunchboxjs 0.2.1016 → 0.2.1017-beta

package/dist/lunchboxjs.module.js

@@ -2,34 +2,31 @@ import { isRef, isVNode, toRaw, defineComponent, createVNode, resolveComponent,
 import * as THREE from 'three';
 
 function find(target) {
-  target = isRef(target) ? target.value : target; // handle standard lunchbox node
-
+  target = isRef(target) ? target.value : target;
+  // handle standard lunchbox node
   if (isLunchboxStandardNode(target)) {
     return target?.instance;
-  } // handle component
-
-
+  }
+  // handle component
   if (isLunchboxComponent(target)) {
     return target?.$el?.instance;
-  } // handle vnode
-
-
+  }
+  // handle vnode
   if (isVNode(target)) {
     return target.el?.instance;
   }
-
   return null;
 }
 
 const get = (obj, path, defValue) => {
   // If path is not defined or it has false value
-  if (!path) return undefined; // Check if path is string or array. Regex : ensure that we do not have '.' and brackets.
+  if (!path) return undefined;
+  // Check if path is string or array. Regex : ensure that we do not have '.' and brackets.
   // Regex explained: https://regexr.com/58j0k
-
-  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g); // Find value
-
-  const result = pathArray?.reduce((prevObj, key) => prevObj && prevObj[key], obj); // If found value is undefined return default value; otherwise return the value
-
+  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
+  // Find value
+  const result = pathArray?.reduce((prevObj, key) => prevObj && prevObj[key], obj);
+  // If found value is undefined return default value; otherwise return the value
   return result === undefined ? defValue : result;
 };
 
@@ -42,18 +39,15 @@ const buildIsNumber = () => {
    * Copyright 2009-2016 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
    * Available under MIT license <https://lodash.com/license>
    */
-
   /** `Object#toString` result references. */
   const numberTag = '[object Number]';
   /** Used for built-in method references. */
-
   const objectProto = Object.prototype;
   /**
    * Used to resolve the
    * [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
    * of values.
    */
-
   const objectToString = objectProto.toString;
   /**
    * Checks if `value` is object-like. A value is object-like if it's not `null`
@@ -79,7 +73,6 @@ const buildIsNumber = () => {
    * _.isObjectLike(null);
    * // => false
    */
-
   function isObjectLike(value) {
     return !!value && typeof value == 'object';
   }
@@ -109,15 +102,11 @@ const buildIsNumber = () => {
    * _.isNumber('3');
    * // => false
    */
-
-
   const output = function isNumber(value) {
     return typeof value == 'number' || isObjectLike(value) && objectToString.call(value) == numberTag;
   };
-
   return output;
 };
-
 const isNumber = buildIsNumber();
 
 const set = (obj, path, value) => {
@@ -130,10 +119,11 @@ const set = (obj, path, value) => {
   }, obj);
 };
 
+// MAKE SURE THESE MATCH VALUES IN types.EventKey
 /** Type check on whether target is a Lunchbox.EventKey */
-
 const isEventKey = target => {
-  return ['onClick', 'onContextMenu', 'onDoubleClick', 'onPointerUp', 'onPointerDown', 'onPointerOver', 'onPointerOut', 'onPointerEnter', 'onPointerLeave', 'onPointerMove', // 'onPointerMissed',
+  return ['onClick', 'onContextMenu', 'onDoubleClick', 'onPointerUp', 'onPointerDown', 'onPointerOver', 'onPointerOut', 'onPointerEnter', 'onPointerLeave', 'onPointerMove',
+  // 'onPointerMissed',
   // 'onUpdate',
   'onWheel'].includes(target);
 };
@@ -152,61 +142,61 @@ const isLunchboxRootNode = node => {
 };
 
 /** Create a new Lunchbox comment node. */
-
 function createCommentNode(options = {}) {
   const defaults = {
     text: options.text ?? ''
   };
-  return new MiniDom.RendererCommentNode({ ...defaults,
+  return new MiniDom.RendererCommentNode({
+    ...defaults,
     ...options,
     metaType: 'commentMeta'
   });
 }
 /** Create a new DOM node. */
-
 function createDomNode(options = {}) {
   const domElement = document.createElement(options.type ?? '');
   const defaults = {
     domElement
   };
-  const node = new MiniDom.RendererDomNode({ ...defaults,
+  const node = new MiniDom.RendererDomNode({
+    ...defaults,
     ...options,
     metaType: 'domMeta'
   });
   return node;
 }
 /** Create a new Lunchbox text node. */
-
 function createTextNode(options = {}) {
   const defaults = {
     text: options.text ?? ''
   };
-  return new MiniDom.RendererTextNode({ ...options,
+  return new MiniDom.RendererTextNode({
+    ...options,
     ...defaults,
     metaType: 'textMeta'
   });
 }
 /** Create a new Lunchbox standard node. */
-
 function createNode(options = {}, props = {}) {
   const defaults = {
     attached: options.attached ?? [],
     attachedArray: options.attachedArray ?? {},
     instance: options.instance ?? null
   };
-  const node = new MiniDom.RendererStandardNode({ ...options,
+  const node = new MiniDom.RendererStandardNode({
+    ...options,
     ...defaults,
     metaType: 'standardMeta'
   });
-
   if (node.type && !isLunchboxRootNode(node) && !node.instance) {
-    node.instance = instantiateThreeObject({ ...node,
-      props: { ...node.props,
+    node.instance = instantiateThreeObject({
+      ...node,
+      props: {
+        ...node.props,
         ...props
       }
     });
   }
-
   return node;
 }
 
@@ -221,14 +211,12 @@ function addEventListener({
   if (!node.eventListeners[key]) {
     node.eventListeners[key] = [];
   }
-
   if (!node.eventListenerRemoveFunctions[key]) {
     node.eventListenerRemoveFunctions[key] = [];
-  } // add event listener
-
-
-  node.eventListeners[key].push(value); // if we need it, let's get/create the main raycaster
-
+  }
+  // add event listener
+  node.eventListeners[key].push(value);
+  // if we need it, let's get/create the main raycaster
   if (interactionsRequiringRaycaster.includes(key)) {
     if (node.instance && !interactables.value.includes(node)) {
       // add to interactables
@@ -236,27 +224,25 @@ function addEventListener({
       node.eventListenerRemoveFunctions[key].push(() => {
         // remove from interactables
         const idx = interactables.value.indexOf(node);
-
         if (idx !== -1) {
           interactables.value.splice(idx, 1);
         }
       });
     }
   }
-
   return node;
 }
-const interactionsRequiringRaycaster = ['onClick', 'onPointerUp', 'onPointerDown', 'onPointerOver', 'onPointerOut', 'onPointerEnter', 'onPointerLeave', 'onPointerMove' // 'onPointerMissed',
+const interactionsRequiringRaycaster = ['onClick', 'onPointerUp', 'onPointerDown', 'onPointerOver', 'onPointerOut', 'onPointerEnter', 'onPointerLeave', 'onPointerMove'
+// 'onPointerMissed',
 ];
 
 const resizeCanvas = (camera, renderer, scene, width, height) => {
   // ignore if no element
   if (!renderer?.domElement || !scene || !camera) return;
   width = width ?? window.innerWidth;
-  height = height ?? window.innerHeight; // update camera
-
+  height = height ?? window.innerHeight;
+  // update camera
   const aspect = width / height;
-
   if (camera.type?.toLowerCase() === 'perspectivecamera') {
     const perspectiveCamera = camera;
     perspectiveCamera.aspect = aspect;
@@ -270,11 +256,10 @@ const resizeCanvas = (camera, renderer, scene, width, height) => {
     orthoCamera.right = 10;
     orthoCamera.left = -10;
     orthoCamera.updateProjectionMatrix();
-  } else ; // update canvas
-
-
-  renderer.setSize(width, height); // render immediately so there's no flicker
-
+  } else ;
+  // update canvas
+  renderer.setSize(width, height);
+  // render immediately so there's no flicker
   if (scene && camera) {
     renderer.render(toRaw(scene), toRaw(camera));
   }
@@ -289,42 +274,37 @@ const getInnerDimensions = node => {
     height
   };
 };
-
 const prepCanvas = (container, camera, renderer, scene, sizePolicy) => {
   const containerElement = container.value?.domElement;
-  if (!containerElement) throw new Error('missing container'); // save and size element
-
+  if (!containerElement) throw new Error('missing container');
+  // save and size element
   const resizeCanvasByPolicy = () => {
     if (sizePolicy === 'container') {
       const dims = getInnerDimensions(containerElement);
       resizeCanvas(camera, renderer, scene, dims.width, dims.height);
     } else resizeCanvas(camera, renderer, scene);
   };
-
-  resizeCanvasByPolicy(); // attach listeners
-
+  resizeCanvasByPolicy();
+  // attach listeners
   let observer = new ResizeObserver(() => {
     resizeCanvasByPolicy();
-  }); // window.addEventListener('resize', resizeCanvas)
-
+  });
+  // window.addEventListener('resize', resizeCanvas)
   if (containerElement) {
     observer.observe(containerElement);
-  } // cleanup
-
-
+  }
+  // cleanup
   return {
     dispose() {
       if (containerElement) {
         observer.unobserve(containerElement);
       }
     }
-
   };
 };
 
 const LunchboxScene = defineComponent({
   name: 'LunchboxScene',
-
   setup(props, {
     slots
   }) {
@@ -332,12 +312,10 @@ const LunchboxScene = defineComponent({
       default: () => [slots.default?.()]
     });
   }
-
 });
 
 const LunchboxEventHandlers = defineComponent({
   name: 'LunchboxEventHandlers',
-
   setup() {
     const interactables = useLunchboxInteractables();
     const globals = useGlobals();
@@ -348,7 +326,6 @@ const LunchboxEventHandlers = defineComponent({
     const inputActive = ref(false);
     let currentIntersections = [];
     const raycaster = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3(0, 0, -1));
-
     const fireEventsFromIntersections = ({
       element,
       eventKeys,
@@ -364,52 +341,44 @@ const LunchboxEventHandlers = defineComponent({
           });
         }
       });
-    }; // add mouse listener to renderer DOM element when the element is ready
-
-
+    };
+    // add mouse listener to renderer DOM element when the element is ready
     onRendererReady(v => {
-      if (!v?.domElement) return; // we have a DOM element, so let's add mouse listeners
-
+      if (!v?.domElement) return;
+      // we have a DOM element, so let's add mouse listeners
       const {
         domElement
       } = v;
-
       const mouseMoveListener = evt => {
         const screenWidth = (domElement.width ?? 1) / globals.dpr;
         const screenHeight = (domElement.height ?? 1) / globals.dpr;
         mousePos.value.x = evt.offsetX / screenWidth * 2 - 1;
         mousePos.value.y = -(evt.offsetY / screenHeight) * 2 + 1;
       };
-
       const mouseDownListener = () => inputActive.value = true;
-
-      const mouseUpListener = () => inputActive.value = false; // add mouse events
-
-
+      const mouseUpListener = () => inputActive.value = false;
+      // add mouse events
       domElement.addEventListener('pointermove', mouseMoveListener);
       domElement.addEventListener('pointerdown', mouseDownListener);
       domElement.addEventListener('pointerup', mouseUpListener);
     });
     const camera = useCamera();
-
     const update = () => {
       const c = camera.value;
-      if (!c) return; // console.log(camera.value)
-
+      if (!c) return;
+      // console.log(camera.value)
       raycaster.setFromCamera(mousePos.value, c);
       const intersections = raycaster.intersectObjects(interactables?.value.map(v => v.instance) ?? []);
       let leaveValues = [],
-          entering = [],
-          staying = []; // intersection arrays
-
-      leaveValues = currentIntersections.map(v => v.intersection); // element arrays
-
+        entering = [],
+        staying = [];
+      // intersection arrays
+      leaveValues = currentIntersections.map(v => v.intersection);
+      // element arrays
       intersections?.forEach(intersection => {
         const currentIdx = currentIntersections.findIndex(v => v.intersection.object === intersection.object);
-
         if (currentIdx === -1) {
           const found = interactables?.value.find(v => v.instance?.uuid === intersection.object.uuid);
-
           if (found) {
             entering.push({
               element: found,
@@ -418,18 +387,15 @@ const LunchboxEventHandlers = defineComponent({
           }
         } else {
           const found = interactables?.value.find(v => v.instance?.uuid === intersection.object.uuid);
-
           if (found) {
             staying.push({
               element: found,
               intersection
             });
           }
-        } // this is a current intersection, so it won't be in our `leave` array
-
-
+        }
+        // this is a current intersection, so it won't be in our `leave` array
         const leaveIdx = leaveValues.findIndex(v => v.object.uuid === intersection.object.uuid);
-
         if (leaveIdx !== -1) {
           leaveValues.splice(leaveIdx, 1);
         }
@@ -439,8 +405,8 @@ const LunchboxEventHandlers = defineComponent({
           element: interactables?.value.find(interactable => interactable.instance?.uuid === intersection.object.uuid),
           intersection
         };
-      }); // new interactions
-
+      });
+      // new interactions
       entering.forEach(({
         element,
         intersection
@@ -450,8 +416,8 @@ const LunchboxEventHandlers = defineComponent({
           eventKeys: ['onPointerEnter'],
           intersection
         });
-      }); // unchanged interactions
-
+      });
+      // unchanged interactions
       staying.forEach(({
         element,
         intersection
@@ -462,8 +428,8 @@ const LunchboxEventHandlers = defineComponent({
           eventKeys,
           intersection
         });
-      }); // exited interactions
-
+      });
+      // exited interactions
       leaving.forEach(({
         element,
         intersection
@@ -476,28 +442,24 @@ const LunchboxEventHandlers = defineComponent({
         });
       });
       currentIntersections = [].concat(entering, staying);
-    }; // update function
-
-
+    };
+    // update function
     onBeforeRender(update);
-
     const teardown = () => offBeforeRender(update);
-
     onBeforeUnmount(teardown);
     const clickEventKeys = ['onClick', 'onPointerDown', 'onPointerUp'];
     watch(inputActive, isDown => {
       // run raycaster on click (necessary when `update` is not automatically called,
       // for example in `updateSource` functions)
-      update(); // meshes with multiple intersections receive multiple callbacks by default -
+      update();
+      // meshes with multiple intersections receive multiple callbacks by default -
       // let's make it so they only receive one callback of each type per frame.
       // (ie usually when you click on a mesh, you expect only one click event to fire, even
       // if there are technically multiple intersections with that mesh)
-
       const uuidsInteractedWithThisFrame = [];
       currentIntersections.forEach(v => {
         clickEventKeys.forEach(key => {
           const id = v.element.uuid + key;
-
           if (isDown && (key === 'onClick' || key === 'onPointerDown')) {
             if (!uuidsInteractedWithThisFrame.includes(id)) {
               v.element.eventListeners[key]?.forEach(cb => cb({
@@ -515,16 +477,14 @@ const LunchboxEventHandlers = defineComponent({
           }
         });
       });
-    }); // return arbitrary object to ensure instantiation
+    });
+    // return arbitrary object to ensure instantiation
     // TODO: why can't we return a <raycaster/> here?
-
     return () => createVNode(resolveComponent("object3D"), null, null);
   }
-
 });
 
 /** fixed & fill styling for container */
-
 const fillStyle = position => {
   return {
     position,
@@ -537,7 +497,6 @@ const fillStyle = position => {
     display: 'block'
   };
 };
-
 const LunchboxWrapper = defineComponent({
   name: 'Lunchbox',
   props: {
@@ -559,7 +518,6 @@ const LunchboxWrapper = defineComponent({
     zoom: Number,
     updateSource: Object
   },
-
   setup(props, context) {
     const canvas = ref();
     let dpr = props.dpr ?? -1;
@@ -571,101 +529,87 @@ const LunchboxWrapper = defineComponent({
     const updateGlobals = useUpdateGlobals();
     const app = useApp();
     const consolidatedCameraProperties = reactive({});
-    const startCallbacks = useStartCallbacks(); // https://threejs.org/docs/index.html#manual/en/introduction/Color-management
-
+    const startCallbacks = useStartCallbacks();
+    // https://threejs.org/docs/index.html#manual/en/introduction/Color-management
     if (props.r3f && THREE?.ColorManagement) {
       THREE.ColorManagement.legacyMode = false;
     }
-
-    const interactables = useLunchboxInteractables(); // MOUNT
+    const interactables = useLunchboxInteractables();
+    // MOUNT
     // ====================
-
     onMounted(async () => {
       // canvas needs to exist (or user needs to handle it on their own)
-      if (!canvas.value && !context.slots?.renderer?.()?.length) throw new Error('missing canvas'); // no camera provided, so let's create one
-
+      if (!canvas.value && !context.slots?.renderer?.()?.length) throw new Error('missing canvas');
+      // no camera provided, so let's create one
       if (!context.slots?.camera?.()?.length) {
         if (props.cameraPosition) {
           consolidatedCameraProperties.position = props.cameraPosition;
         }
-
         if (props.cameraLook || props.cameraLookAt) {
           consolidatedCameraProperties.lookAt = props.cameraLook || props.cameraLookAt;
         }
-
         if (props.zoom !== undefined) {
           consolidatedCameraProperties.zoom = props.zoom;
         }
-      } // SCENE
+      }
+      // SCENE
       // ====================
       // set background color
-
-
       if (scene.value?.$el?.instance && props.background) {
         scene.value.$el.instance.background = new THREE.Color(props.background);
-      } // MISC PROPERTIES
+      }
+      // MISC PROPERTIES
       // ====================
-
-
       if (dpr === -1) {
         dpr = window.devicePixelRatio;
       }
-
       updateGlobals?.({
         dpr
       });
-
-      while (!renderer.value?.$el?.instance && // TODO: remove `as any`
+      while (!renderer.value?.$el?.instance &&
+      // TODO: remove `as any`
       !renderer.value?.component?.ctx.$el?.instance) {
         await new Promise(r => requestAnimationFrame(r));
       }
-
-      while (!scene.value?.$el?.instance && // TODO: remove `as any`
+      while (!scene.value?.$el?.instance &&
+      // TODO: remove `as any`
       !scene.value?.component?.ctx.$el?.instance) {
         await new Promise(r => requestAnimationFrame(r));
       }
-
       const normalizedRenderer = renderer.value?.$el?.instance ?? renderer.value?.component?.ctx.$el?.instance;
       normalizedRenderer.setPixelRatio(globals.dpr);
       const normalizedScene = scene.value?.$el?.instance ?? scene.value?.component?.ctx.$el?.instance;
-      const normalizedCamera = camera.value?.$el?.instance ?? camera.value?.component?.ctx.$el?.instance; // TODO: update DPR on monitor switch
+      const normalizedCamera = camera.value?.$el?.instance ?? camera.value?.component?.ctx.$el?.instance;
+      // TODO: update DPR on monitor switch
       // prep canvas (sizing, observe, unmount, etc)
       // (only run if no custom renderer)
-
       if (!context.slots?.renderer?.()?.length) {
         // TODO: use dispose
         prepCanvas(container, normalizedCamera, normalizedRenderer, normalizedScene, props.sizePolicy);
-
         if (props.r3f) {
           normalizedRenderer.outputEncoding = THREE.sRGBEncoding;
           normalizedRenderer.toneMapping = THREE.ACESFilmicToneMapping;
-        } // update render sugar
-
-
+        }
+        // update render sugar
         const sugar = {
           shadow: props.shadow
         };
-
         if (sugar?.shadow) {
           normalizedRenderer.shadowMap.enabled = true;
-
           if (typeof sugar.shadow === 'object') {
             normalizedRenderer.shadowMap.type = sugar.shadow.type;
           }
         }
-      } // START
+      }
+      // START
       // ====================
-
-
       if (!app) {
         throw new Error('error creating app');
-      } // save renderer, scene, camera
-
-
+      }
+      // save renderer, scene, camera
       app.config.globalProperties.lunchbox.camera = normalizedCamera;
       app.config.globalProperties.lunchbox.renderer = normalizedRenderer;
       app.config.globalProperties.lunchbox.scene = normalizedScene;
-
       for (let startCallback of startCallbacks ?? []) {
         startCallback({
           app,
@@ -673,10 +617,9 @@ const LunchboxWrapper = defineComponent({
           renderer: normalizedRenderer,
           scene: normalizedScene
         });
-      } // KICK UPDATE
+      }
+      // KICK UPDATE
       // ====================
-
-
       update({
         app,
         camera: normalizedCamera,
@@ -684,36 +627,35 @@ const LunchboxWrapper = defineComponent({
         scene: normalizedScene,
         updateSource: props.updateSource
       });
-    }); // UNMOUNT
+    });
+    // UNMOUNT
     // ====================
-
     onBeforeUnmount(() => {
       cancelUpdate();
       cancelUpdateSource();
-    }); // RENDER FUNCTION
+    });
+    // RENDER FUNCTION
     // ====================
-
     const containerFillStyle = props.sizePolicy === 'container' ? 'static' : 'absolute';
-    const canvasFillStyle = props.sizePolicy === 'container' ? 'static' : 'fixed'; // REACTIVE CUSTOM CAMERAS
+    const canvasFillStyle = props.sizePolicy === 'container' ? 'static' : 'fixed';
+    // REACTIVE CUSTOM CAMERAS
     // ====================
     // find first camera with `type.name` property
     // (which indicates a Lunch.Node)
-
     const activeCamera = computed(() => {
       const output = context.slots?.camera?.().find(c => c.type?.name);
-
       if (output) {
         return output;
       }
-
       return output;
-    }); // TODO: make custom cameras reactive
-
+    });
+    // TODO: make custom cameras reactive
     watch(activeCamera, async (newVal, oldVal) => {
       // console.log('got camera', newVal)
       if (newVal && newVal?.props?.key !== oldVal?.props?.key) {
         // TODO: remove cast
-        camera.value = newVal; // TODO: why isn't this updating app camera?
+        camera.value = newVal;
+        // TODO: why isn't this updating app camera?
         // const el = await waitFor(() => newVal.el)
         // console.log(el)
         // camera.value = el
@@ -722,10 +664,11 @@ const LunchboxWrapper = defineComponent({
       }
     }, {
       immediate: true
-    }); // RENDER FUNCTION
+    });
+    // RENDER FUNCTION
     // ====================
-
-    return () => createVNode(Fragment, null, [context.slots?.renderer?.()?.length ? // TODO: remove `as any` cast
+    return () => createVNode(Fragment, null, [context.slots?.renderer?.()?.length ?
+    // TODO: remove `as any` cast
     renderer.value = context.slots?.renderer?.()[0] : // ...otherwise, add canvas...
     createVNode(Fragment, null, [createVNode("div", {
       "class": "lunchbox-container",
@@ -746,14 +689,16 @@ const LunchboxWrapper = defineComponent({
         powerPreference: !!props.r3f ? 'high-performance' : 'default',
         ...(props.rendererArguments ?? {})
       }]
-    }), null)]), context.slots?.scene?.()?.length ? // TODO: remove `as any` cast
+    }), null)]), context.slots?.scene?.()?.length ?
+    // TODO: remove `as any` cast
     scene.value = context.slots?.scene?.()[0] : // ...otherwise, add default scene
     // TODO: why does this need to be a separate component? <scene> throws an error
     createVNode(LunchboxScene, {
       "ref": scene
     }, {
       default: () => [context.slots?.default?.()]
-    }), context.slots?.camera?.()?.length ? // TODO: remove `any` cast
+    }), context.slots?.camera?.()?.length ?
+    // TODO: remove `any` cast
     camera.value : props.ortho || props.orthographic ? createVNode(resolveComponent("orthographicCamera"), mergeProps({
       "ref": camera,
       "args": props.cameraArgs ?? []
@@ -762,22 +707,32 @@ const LunchboxWrapper = defineComponent({
       "args": props.cameraArgs ?? [props.r3f ? 75 : 45, 0.5625, 1, 1000]
     }, consolidatedCameraProperties), null), interactables?.value.length && createVNode(LunchboxEventHandlers, null, null)]);
   }
-
 });
 
 // list of all components to register out of the box
-const autoGeneratedComponents = [// ThreeJS basics
-'mesh', 'instancedMesh', 'scene', 'sprite', 'object3D', // geometry
-'instancedBufferGeometry', 'bufferGeometry', 'boxBufferGeometry', 'circleBufferGeometry', 'coneBufferGeometry', 'cylinderBufferGeometry', 'dodecahedronBufferGeometry', 'extrudeBufferGeometry', 'icosahedronBufferGeometry', 'latheBufferGeometry', 'octahedronBufferGeometry', 'parametricBufferGeometry', 'planeBufferGeometry', 'polyhedronBufferGeometry', 'ringBufferGeometry', 'shapeBufferGeometry', 'sphereBufferGeometry', 'tetrahedronBufferGeometry', 'textBufferGeometry', 'torusBufferGeometry', 'torusKnotBufferGeometry', 'tubeBufferGeometry', 'wireframeGeometry', 'parametricGeometry', 'tetrahedronGeometry', 'octahedronGeometry', 'icosahedronGeometry', 'dodecahedronGeometry', 'polyhedronGeometry', 'tubeGeometry', 'torusKnotGeometry', 'torusGeometry', // textgeometry has been moved to /examples/jsm/geometries/TextGeometry
+const autoGeneratedComponents = [
+// ThreeJS basics
+'mesh', 'instancedMesh', 'scene', 'sprite', 'object3D',
+// geometry
+'instancedBufferGeometry', 'bufferGeometry', 'boxBufferGeometry', 'circleBufferGeometry', 'coneBufferGeometry', 'cylinderBufferGeometry', 'dodecahedronBufferGeometry', 'extrudeBufferGeometry', 'icosahedronBufferGeometry', 'latheBufferGeometry', 'octahedronBufferGeometry', 'parametricBufferGeometry', 'planeBufferGeometry', 'polyhedronBufferGeometry', 'ringBufferGeometry', 'shapeBufferGeometry', 'sphereBufferGeometry', 'tetrahedronBufferGeometry', 'textBufferGeometry', 'torusBufferGeometry', 'torusKnotBufferGeometry', 'tubeBufferGeometry', 'wireframeGeometry', 'parametricGeometry', 'tetrahedronGeometry', 'octahedronGeometry', 'icosahedronGeometry', 'dodecahedronGeometry', 'polyhedronGeometry', 'tubeGeometry', 'torusKnotGeometry', 'torusGeometry',
+// textgeometry has been moved to /examples/jsm/geometries/TextGeometry
 // 'textGeometry',
-'sphereGeometry', 'ringGeometry', 'planeGeometry', 'latheGeometry', 'shapeGeometry', 'extrudeGeometry', 'edgesGeometry', 'coneGeometry', 'cylinderGeometry', 'circleGeometry', 'boxGeometry', // materials
-'material', 'shadowMaterial', 'spriteMaterial', 'rawShaderMaterial', 'shaderMaterial', 'pointsMaterial', 'meshPhysicalMaterial', 'meshStandardMaterial', 'meshPhongMaterial', 'meshToonMaterial', 'meshNormalMaterial', 'meshLambertMaterial', 'meshDepthMaterial', 'meshDistanceMaterial', 'meshBasicMaterial', 'meshMatcapMaterial', 'lineDashedMaterial', 'lineBasicMaterial', // lights
-'light', 'spotLightShadow', 'spotLight', 'pointLight', 'rectAreaLight', 'hemisphereLight', 'directionalLightShadow', 'directionalLight', 'ambientLight', 'lightShadow', 'ambientLightProbe', 'hemisphereLightProbe', 'lightProbe', // textures
-'texture', 'videoTexture', 'dataTexture', 'dataTexture3D', 'compressedTexture', 'cubeTexture', 'canvasTexture', 'depthTexture', // Texture loaders
-'textureLoader', // misc
-'group', 'catmullRomCurve3', 'points', 'raycaster', // helpers
-'cameraHelper', // cameras
-'camera', 'perspectiveCamera', 'orthographicCamera', 'cubeCamera', 'arrayCamera', // renderers
+'sphereGeometry', 'ringGeometry', 'planeGeometry', 'latheGeometry', 'shapeGeometry', 'extrudeGeometry', 'edgesGeometry', 'coneGeometry', 'cylinderGeometry', 'circleGeometry', 'boxGeometry',
+// materials
+'material', 'shadowMaterial', 'spriteMaterial', 'rawShaderMaterial', 'shaderMaterial', 'pointsMaterial', 'meshPhysicalMaterial', 'meshStandardMaterial', 'meshPhongMaterial', 'meshToonMaterial', 'meshNormalMaterial', 'meshLambertMaterial', 'meshDepthMaterial', 'meshDistanceMaterial', 'meshBasicMaterial', 'meshMatcapMaterial', 'lineDashedMaterial', 'lineBasicMaterial',
+// lights
+'light', 'spotLightShadow', 'spotLight', 'pointLight', 'rectAreaLight', 'hemisphereLight', 'directionalLightShadow', 'directionalLight', 'ambientLight', 'lightShadow', 'ambientLightProbe', 'hemisphereLightProbe', 'lightProbe',
+// textures
+'texture', 'videoTexture', 'dataTexture', 'dataTexture3D', 'compressedTexture', 'cubeTexture', 'canvasTexture', 'depthTexture',
+// Texture loaders
+'textureLoader',
+// misc
+'group', 'catmullRomCurve3', 'points', 'raycaster',
+// helpers
+'cameraHelper',
+// cameras
+'camera', 'perspectiveCamera', 'orthographicCamera', 'cubeCamera', 'arrayCamera',
+// renderers
 'webGLRenderer'
 /*
 // List copied from r3f:
@@ -823,42 +778,36 @@ color: ColorProps
 fog: FogProps
 fogExp2: FogExp2Props
 shape: ShapeProps
-*/
-];
-
-const catalogue = {}; // component creation utility
+*/];
 
+const catalogue = {};
+// component creation utility
 const createComponent$1 = tag => defineComponent({
   inheritAttrs: false,
   name: tag,
-
   setup(props, context) {
     return () => {
       return h(tag, context.attrs, context.slots?.default?.() || []);
     };
   }
-
-}); // turn components into registered map
-
-
+});
+// turn components into registered map
 const processed = autoGeneratedComponents.map(createComponent$1).reduce((acc, curr) => {
   acc[curr.name] = curr;
   return acc;
 }, {});
-const components = { ...processed,
+const components = {
+  ...processed,
   Lunchbox: LunchboxWrapper
 };
 
 const createComponent = tag => defineComponent({
   inheritAttrs: false,
   name: tag,
-
   render() {
     return h(tag, this.$attrs, this.$slots?.default?.() || []);
   }
-
 });
-
 const extend = ({
   app,
   ...targets
@@ -877,14 +826,12 @@ function processProp({
   // return $attachedArray value if needed
   if (typeof prop === 'string' && prop.startsWith('$attachedArray')) {
     return node.attachedArray[prop.replace('$attachedArray.', '')];
-  } // return $attached value if needed
-
-
+  }
+  // return $attached value if needed
   if (typeof prop === 'string' && prop.startsWith('$attached')) {
     return node.attached[prop.replace('$attached.', '')];
-  } // otherwise, return plain value
-
-
+  }
+  // otherwise, return plain value
   return prop;
 }
 function processPropAsArray({
@@ -900,17 +847,17 @@ function processPropAsArray({
 }
 
 function instantiateThreeObject(node) {
-  if (!node.type) return null; // what class will we be instantiating?
-
+  if (!node.type) return null;
+  // what class will we be instantiating?
   const uppercaseType = node.type[0].toUpperCase() + node.type.slice(1);
   const translatedType = uppercaseType.replace(/Lunchbox$/, '');
   const targetClass = catalogue[node.type] || THREE[uppercaseType] || catalogue[translatedType] || THREE[translatedType];
-  if (!targetClass) throw `${uppercaseType} is not part of the THREE namespace! Did you forget to extend? import {extend} from 'lunchbox'; extend({app, YourComponent, ...})`; // what args have we been provided?
-
-  const args = node.props.args ?? []; // replace $attached values with their instances
+  if (!targetClass) throw `${uppercaseType} is not part of the THREE namespace! Did you forget to extend? import {extend} from 'lunchbox'; extend({app, YourComponent, ...})`;
+  // what args have we been provided?
+  const args = node.props.args ?? [];
+  // replace $attached values with their instances
   // we need to guarantee everything comes back as an array so we can spread $attachedArrays,
   // so we'll use processPropAsArray
-
   const argsWrappedInArrays = args.map(arg => {
     return processPropAsArray({
       node,
@@ -936,12 +883,10 @@ function rng() {
     // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
     // find the complete implementation of crypto (msCrypto) on IE11.
     getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
-
     if (!getRandomValues) {
       throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
     }
   }
-
   return getRandomValues(rnds8);
 }
 
@@ -957,15 +902,13 @@ function validate(uuid) {
  */
 
 var byteToHex = [];
-
 for (var i = 0; i < 256; ++i) {
   byteToHex.push((i + 0x100).toString(16).substr(1));
 }
-
 function stringify(arr) {
-  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; // Note: Be careful editing this code!  It's been tuned for performance
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  // Note: Be careful editing this code!  It's been tuned for performance
   // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-
   var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID.  If this throws, it's likely due to one
   // of the following:
   // - One or more input array values don't map to a hex octet (leading to
@@ -975,7 +918,6 @@ function stringify(arr) {
   if (!validate(uuid)) {
     throw TypeError('Stringified UUID is invalid');
   }
-
   return uuid;
 }
 
@@ -988,119 +930,97 @@ function v4(options, buf, offset) {
 
   if (buf) {
     offset = offset || 0;
-
     for (var i = 0; i < 16; ++i) {
       buf[offset + i] = rnds[i];
     }
-
     return buf;
   }
-
   return stringify(rnds);
 }
 
+// MiniDom recreates DOM node properties and methods.
 // Since Vue 3 is a DOM-first framework, many of its nodeOps depend on
 // properties and methods the DOM naturally contains. MiniDom recreates
 // those properties (as well as a few from the tree-model npm package)
 // to make a DOM-like but otherwise agnostic hierarchy structure.
-
 var MiniDom;
-
 (function (MiniDom) {
   class BaseNode {
     constructor(options = {}, parent) {
       this.parentNode = options?.parentNode ?? parent ?? null;
       this.minidomType = 'MinidomBaseNode';
-      this.uuid = options?.uuid ?? v4(); // allNodes.push(this)
+      this.uuid = options?.uuid ?? v4();
+      // allNodes.push(this)
     }
 
-    uuid; // DOM FEATURES
+    uuid;
+    // DOM FEATURES
     // ====================
-
     parentNode;
-
     get nextSibling() {
       if (!this.parentNode) return null;
-      const idx = this.parentNode.children.findIndex(n => n.uuid === this.uuid); // return next sibling if we're present and not the last child of the parent
-
+      const idx = this.parentNode.children.findIndex(n => n.uuid === this.uuid);
+      // return next sibling if we're present and not the last child of the parent
       if (idx !== -1 && idx < this.parentNode.children.length - 1) {
         return this.parentNode.children[idx + 1];
       }
-
       return null;
     }
-
     insertBefore(child, anchor) {
       child.removeAsChildFromAnyParents();
       child.parentNode = this;
       const anchorIdx = this.children.findIndex(n => n.uuid === anchor?.uuid);
-
       if (anchorIdx !== -1) {
         this.children.splice(anchorIdx, 0, child);
       } else {
         this.children.push(child);
       }
     }
-
     removeChild(child) {
       const idx = this.children.findIndex(n => n?.uuid === child?.uuid);
-
       if (idx !== -1) {
         this.children.splice(idx, 1);
       }
-    } // TREE FEATURES
+    }
+    // TREE FEATURES
     // ====================
-
-
     children = [];
-
     addChild(child) {
       if (child) {
         // remove child from any other parents
-        child.removeAsChildFromAnyParents(); // add to this node
-
+        child.removeAsChildFromAnyParents();
+        // add to this node
         child.parentNode = this;
         this.insertBefore(child, null);
       }
-
       return this;
     }
     /** Get the array of Nodes representing the path from the root to this Node (inclusive). */
-
-
     getPath() {
       const output = [];
       let current = this;
-
       while (current) {
         output.unshift(current);
         current = current.parentNode;
       }
-
       return output;
     }
     /** Drop this node. Removes parent's knowledge of this node
      * and resets this node's internal parent. */
-
-
     drop() {
       // remove as child
-      this.removeAsChildFromAnyParents(); // remove parent
-
+      this.removeAsChildFromAnyParents();
+      // remove parent
       this.parentNode = null;
     }
     /** Walk over the entire subtree. Return falsey value in callback to end early. */
     // TODO: depth-first vs breadth-first
-
-
     walk(callback) {
       const queue = [this, ...this.children];
       const traversed = [];
       let canContinue = true;
-
       while (queue.length && canContinue) {
         const current = queue.shift();
-
         if (current) {
           if (traversed.includes(current)) continue;
           traversed.push(current);
@@ -1110,20 +1030,15 @@ var MiniDom;
           canContinue = false;
         }
       }
-    } // INTERNAL FEATURES
+    }
+    // INTERNAL FEATURES
     // ====================
-
-
     minidomType;
-
     removeAsChildFromAnyParents() {
       this.parentNode?.removeChild(this);
     }
-
   }
-
   MiniDom.BaseNode = BaseNode;
-
   class RendererBaseNode extends MiniDom.BaseNode {
     constructor(options = {}, parent) {
       super(options, parent);
@@ -1135,73 +1050,57 @@ var MiniDom;
       this.props = options.props ?? [];
       this.type = options.type ?? '';
     }
-
     eventListeners;
     eventListenerRemoveFunctions;
     name;
     metaType;
     props;
     type;
-
     drop() {
-      super.drop(); // handle remove functions
-
+      super.drop();
+      // handle remove functions
       Object.keys(this.eventListenerRemoveFunctions).forEach(key => {
         this.eventListenerRemoveFunctions[key].forEach(func => func());
       });
     }
-
   }
-
-  MiniDom.RendererBaseNode = RendererBaseNode; // ====================
+  MiniDom.RendererBaseNode = RendererBaseNode;
+  // ====================
   // SPECIFIC RENDERER NODES BELOW
   // ====================
-
   class RendererRootNode extends MiniDom.RendererBaseNode {
     constructor(options = {}, parent) {
       super(options, parent);
       this.domElement = options.domElement ?? document.createElement('div');
     }
-
     domElement;
     isLunchboxRootNode = true;
   }
-
   MiniDom.RendererRootNode = RendererRootNode;
-
   class RendererCommentNode extends MiniDom.RendererBaseNode {
     constructor(options = {}, parent) {
       super(options, parent);
       this.text = options.text ?? '';
     }
-
     text;
   }
-
   MiniDom.RendererCommentNode = RendererCommentNode;
-
   class RendererDomNode extends MiniDom.RendererBaseNode {
     constructor(options = {}, parent) {
       super(options, parent);
       this.domElement = options.domElement ?? document.createElement('div');
     }
-
     domElement;
   }
-
   MiniDom.RendererDomNode = RendererDomNode;
-
   class RendererTextNode extends MiniDom.RendererBaseNode {
     constructor(options = {}, parent) {
       super(options, parent);
       this.text = options.text ?? '';
     }
-
     text;
   }
-
   MiniDom.RendererTextNode = RendererTextNode;
-
   class RendererStandardNode extends MiniDom.RendererBaseNode {
     constructor(options = {}, parent) {
       super(options, parent);
@@ -1209,15 +1108,12 @@ var MiniDom;
       this.attachedArray = options.attachedArray ?? {};
       this.instance = options.instance ?? null;
     }
-
     attached;
     attachedArray;
     instance;
   }
-
   MiniDom.RendererStandardNode = RendererStandardNode;
 })(MiniDom || (MiniDom = {}));
-
 function isMinidomNode(item) {
   return item?.minidomType === 'RendererNode';
 }
@@ -1246,7 +1142,6 @@ const requestUpdate = opts => {
   if (typeof opts.app.config.globalProperties.lunchbox.frameId === 'number') {
     cancelAnimationFrame(opts.app.config.globalProperties.lunchbox.frameId);
   }
-
   opts.app.config.globalProperties.lunchbox.frameId = requestAnimationFrame(() => update({
     app: opts.app,
     renderer: opts.renderer,
@@ -1255,7 +1150,6 @@ const requestUpdate = opts => {
     updateSource: opts.updateSource
   }));
 };
-
 const update = opts => {
   if (opts.updateSource) {
     if (!opts.app.config.globalProperties.lunchbox.watchStopHandle) {
@@ -1269,37 +1163,35 @@ const update = opts => {
   } else {
     // request next frame on a continuous loop
     requestUpdate(opts);
-  } // prep options
-
-
+  }
+  // prep options
   const {
     app,
     renderer,
     scene
-  } = opts; // BEFORE RENDER
-
+  } = opts;
+  // BEFORE RENDER
   app.config.globalProperties.lunchbox.beforeRender.forEach(cb => {
     cb?.(opts);
-  }); // RENDER
-
+  });
+  // RENDER
   if (renderer && scene && opts.app.config.globalProperties.lunchbox.camera) {
     if (app.customRender) {
       app.customRender(opts);
     } else {
-      renderer.render(toRaw(scene), opts.app.config.globalProperties.lunchbox.camera // toRaw(camera)
+      renderer.render(toRaw(scene), opts.app.config.globalProperties.lunchbox.camera
+      // toRaw(camera)
       );
     }
-  } // AFTER RENDER
-
-
+  }
+  // AFTER RENDER
   app.config.globalProperties.lunchbox.afterRender.forEach(cb => {
     cb?.(opts);
   });
-}; // before render
+};
+// before render
 // ====================
-
 /** Obtain callback methods for `onBeforeRender` and `offBeforeRender`. Usually used internally by Lunchbox. */
-
 const useBeforeRender = () => {
   return {
     onBeforeRender: inject(onBeforeRenderKey),
@@ -1311,21 +1203,18 @@ const useBeforeRender = () => {
  * Note that if `updateSource` is set in the Lunchbox wrapper component, this will **only** run
  * before a render triggered by that `updateSource`. Normally, the function should run every frame.
  */
-
 const onBeforeRender = (cb, index = Infinity) => {
   useBeforeRender().onBeforeRender?.(cb, index);
 };
 /** Remove a function from the `beforeRender` callback list. Useful for tearing down functions added
  * by `onBeforeRender`.
  */
-
 const offBeforeRender = cb => {
   useBeforeRender().offBeforeRender?.(cb);
-}; // after render
+};
+// after render
 // ====================
-
 /** Obtain callback methods for `onAfterRender` and `offAfterRender`. Usually used internally by Lunchbox. */
-
 const useAfterRender = () => {
   return {
     onAfterRender: inject(onBeforeRenderKey),
@@ -1337,21 +1226,18 @@ const useAfterRender = () => {
  * Note that if `updateSource` is set in the Lunchbox wrapper component, this will **only** run
  * after a render triggered by that `updateSource`. Normally, the function should run every frame.
  */
-
 const onAfterRender = (cb, index = Infinity) => {
   useBeforeRender().onBeforeRender?.(cb, index);
 };
 /** Remove a function from the `afterRender` callback list. Useful for tearing down functions added
  * by `onAfterRender`.
  */
-
 const offAfterRender = cb => {
   useBeforeRender().offBeforeRender?.(cb);
 };
 /** Obtain a function used to cancel the current update frame. Use `cancelUpdate` if you wish
  * to immediately invoke the cancellation function. Usually used internally by Lunchbox.
  */
-
 const useCancelUpdate = () => {
   const frameId = inject(frameIdKey);
   return () => {
@@ -1359,26 +1245,22 @@ const useCancelUpdate = () => {
   };
 };
 /** Cancel the current update frame. Usually used internally by Lunchbox. */
-
 const cancelUpdate = () => {
   useCancelUpdate()?.();
 };
 /** Obtain a function used to cancel an update source. Use `cancelUpdateSource` if you wish to
  * immediately invoke the cancellation function. Usually used internally by Lunchbox.
  */
-
 const useCancelUpdateSource = () => {
   const cancel = inject(watchStopHandleKey);
   return () => cancel?.();
 };
 /** Cancel an update source. Usually used internally by Lunchbox. */
-
 const cancelUpdateSource = () => {
   useCancelUpdateSource()?.();
 };
 
 /** Update a single prop on a given node. */
-
 function updateObjectProp({
   node,
   key,
@@ -1394,37 +1276,33 @@ function updateObjectProp({
       interactables,
       value
     });
-  } // update THREE property
+  }
+  // update THREE property
   // get final key
-
-
   const camelKey = key.replace(/-/g, '.');
-  const finalKey = propertyShortcuts[camelKey] || camelKey; // handle and return early if prop is specific to Vue/Lunchbox
-
-  if (internalLunchboxVueKeys.includes(key) || internalLunchboxVueKeys.includes(finalKey)) return node; // everything else should be Three-specific, so let's cancel if this isn't a standard node
-
-  if (!isLunchboxStandardNode(node)) return node; // parse $attached values
-
+  const finalKey = propertyShortcuts[camelKey] || camelKey;
+  // handle and return early if prop is specific to Vue/Lunchbox
+  if (internalLunchboxVueKeys.includes(key) || internalLunchboxVueKeys.includes(finalKey)) return node;
+  // everything else should be Three-specific, so let's cancel if this isn't a standard node
+  if (!isLunchboxStandardNode(node)) return node;
+  // parse $attached values
   if (typeof value === 'string' && value.startsWith('$attached')) {
     const attachedName = value.replace('$attached.', '');
     value = get(node.attached, attachedName, null);
-  } // save instance
-
-
-  const target = node.instance; // cancel if no target
-
-  if (!target) return node; // burrow down until we get property to change
-
+  }
+  // save instance
+  const target = node.instance;
+  // cancel if no target
+  if (!target) return node;
+  // burrow down until we get property to change
   let liveProperty;
-
   for (let i = 0; i < nestedPropertiesToCheck.length && !liveProperty; i++) {
     const nestedProperty = nestedPropertiesToCheck[i];
     const fullPath = [nestedProperty, finalKey].filter(Boolean).join('.');
     liveProperty = liveProperty = get(target, fullPath);
-  } // change property
+  }
+  // change property
   // first, save as array in case we need to spread it
-
-
   if (liveProperty && isNumber(value) && liveProperty?.setScalar) {
     // if value is a number and the property has a `setScalar` method, use that
     liveProperty.setScalar(value);
@@ -1439,18 +1317,17 @@ function updateObjectProp({
     } else {
       if (!Array.isArray(value)) {
         throw new Error('Arguments on a declarative method must be wrapped in an array.\nWorks:\n<example :methodCall="[256]" />\nDoesn\'t work:\n<example :methodCall="256" />');
-      } // if property is a function, let's try calling it
-
-
+      }
+      // if property is a function, let's try calling it
       liveProperty.bind(node.instance)(...value);
-    } // pass the result to the parent
+    }
+    // pass the result to the parent
     // const parent = node.parentNode
     // if (parent) {
     //     const parentAsLunchboxNode = parent as Lunchbox.Node
     //     parentAsLunchboxNode.attached[finalKey] = result
     //         ; (parentAsLunchboxNode.instance as any)[finalKey] = result
     // }
-
   } else if (get(target, finalKey, undefined) !== undefined) {
     // blank strings evaluate to `true`
     // <mesh castShadow receiveShadow /> will work the same as
@@ -1460,25 +1337,20 @@ function updateObjectProp({
     // if you see this error in production, you might need to add `finalKey`
     // to `internalLunchboxVueKeys` below
     console.log(`No property ${finalKey} found on ${target}`);
-  } // mark that we need to update if needed
-
-
+  }
+  // mark that we need to update if needed
   const targetTypeRaw = target?.texture?.type || target?.type;
-
   if (typeof targetTypeRaw === 'string') {
     const targetType = targetTypeRaw.toLowerCase();
-
     switch (true) {
       case targetType.includes('material'):
         target.needsUpdate = true;
         break;
-
       case targetType.includes('camera') && target.updateProjectionMatrix:
         target.updateProjectionMatrix();
         break;
     }
   }
-
   return node;
 }
 const propertyShortcuts = {
@@ -1488,8 +1360,8 @@ const propertyShortcuts = {
 };
 const nestedPropertiesToCheck = ['', 'parameters'];
 /** props that Lunchbox intercepts and prevents passing to created instances */
-
-const internalLunchboxVueKeys = ['args', 'attach', 'attachArray', 'is.default', 'isDefault', 'key', 'onAdded', // 'onReady',
+const internalLunchboxVueKeys = ['args', 'attach', 'attachArray', 'is.default', 'isDefault', 'key', 'onAdded',
+// 'onReady',
 'ref', 'src'];
 
 const autoAttach = ['geometry', 'material'];
@@ -1497,55 +1369,48 @@ const createElement = (type, isSVG, isCustomizedBuiltin, vnodeProps) => {
   const options = {
     type,
     props: vnodeProps
-  }; // handle dom node
-
+  };
+  // handle dom node
   const isDomNode = isLunchboxDomComponent(options);
-
   if (isDomNode) {
     const node = createDomNode(options);
     return node;
-  } // handle standard node
-
-
-  const node = createNode(options); // autoattach
-
+  }
+  // handle standard node
+  const node = createNode(options);
+  // autoattach
   autoAttach.forEach(key => {
     if (type.toLowerCase().endsWith(key)) {
       node.props.attach = key;
     }
-  }); // TODO: array autoattach
-
+  });
+  // TODO: array autoattach
   return node;
 };
 
 const insert = (child, parent, anchor) => {
   if (!parent) {
     throw new Error('missing parent');
-  } // add to parent tree node if we have one
+  }
+  // add to parent tree node if we have one
   // let effectiveParent = parent ?? ensureRootNode()
-
-
-  parent.insertBefore(child, anchor); // handle comment & text nodes
-
+  parent.insertBefore(child, anchor);
+  // handle comment & text nodes
   if (child.metaType === 'commentMeta' || child.metaType === 'textMeta') {
     return;
-  } // handle dom element
-
-
+  }
+  // handle dom element
   if (isLunchboxDomComponent(child)) {
     if (isLunchboxDomComponent(parent) || isLunchboxRootNode(parent)) {
       parent.domElement.appendChild(child.domElement);
     }
-  } // handle standard nodes
-
-
+  }
+  // handle standard nodes
   if (isLunchboxStandardNode(child)) {
     // let effectiveParent = parent
     let effectiveParentNodeType = parent.metaType;
-
     if (effectiveParentNodeType === 'textMeta' || effectiveParentNodeType === 'commentMeta') {
       const path = parent.getPath();
-
       for (let i = path.length - 1; i >= 0; i--) {
         if (path[i].metaType !== 'textMeta' && path[i].metaType !== 'commentMeta') {
           parent = path[i];
@@ -1553,26 +1418,23 @@ const insert = (child, parent, anchor) => {
         }
       }
     }
-
     if (isLunchboxStandardNode(child) && child.instance?.isObject3D && isLunchboxStandardNode(parent) && parent.instance?.isObject3D) {
       parent.instance?.add?.(child.instance);
-    } // add attached props
-
-
+    }
+    // add attached props
     if (child?.props?.attach && isLunchboxStandardNode(parent) && parent?.instance) {
       // if this element is a loader and the `src` attribute is being used,
       // let's assume we want to create the loader and run `load`
-      const isUsingLoaderSugar = child.type?.toLowerCase().endsWith('loader') && child.props.src && (child.props.attach || child.props.attachArray); // run special loader behavior
-
+      const isUsingLoaderSugar = child.type?.toLowerCase().endsWith('loader') && child.props.src && (child.props.attach || child.props.attachArray);
+      // run special loader behavior
       if (isUsingLoaderSugar) {
         runLoader(child, parent);
       } else {
         // update attached normally
         attachToParentInstance(child, parent, child.props.attach);
       }
-    } // fire onAdded event
-
-
+    }
+    // fire onAdded event
     if (child.props?.onAdded) {
       child.props.onAdded({
         instance: child.instance
@@ -1580,15 +1442,13 @@ const insert = (child, parent, anchor) => {
     }
   }
 };
-
 function runLoader(child, parent) {
-  const loader = child.instance; // ensure parent has attached spaces ready
-
+  const loader = child.instance;
+  // ensure parent has attached spaces ready
   parent.attached = parent.attached || {};
-  parent.attachedArray = parent.attachedArray || {}; // this should never be true, but just in case
-
+  parent.attachedArray = parent.attachedArray || {};
+  // this should never be true, but just in case
   if (!child.props.attach) return;
-
   if (child.type?.toLowerCase() === 'textureloader') {
     // if this is a texture loader, immediately pass
     // load function to parent attachment
@@ -1604,11 +1464,9 @@ function runLoader(child, parent) {
     });
   }
 }
-
 function attachToParentInstance(child, parent, key, value) {
   const finalValueToAttach = value ?? child.instance;
   const parentInstanceAsAny = parent.instance;
-
   if (child.props.attach === key) {
     parent.attached = {
       [key]: finalValueToAttach,
@@ -1616,40 +1474,38 @@ function attachToParentInstance(child, parent, key, value) {
     };
     parentInstanceAsAny[key] = value ?? child.instance;
   }
-
   if (child.props.attachArray === key) {
     if (!parent.attachedArray[child.props.attachArray]) {
       parent.attachedArray[child.props.attachArray] = [];
     }
-
-    parent.attachedArray[child.props.attachArray].push(finalValueToAttach); // TODO: implement auto-attaching array
-
+    parent.attachedArray[child.props.attachArray].push(finalValueToAttach);
+    // TODO: implement auto-attaching array
     parentInstanceAsAny[key] = [parentInstanceAsAny[key]];
   }
 }
 
 const remove = node => {
-  if (!node) return; // prep subtree
-
+  if (!node) return;
+  // prep subtree
   const subtree = [];
   node.walk(descendant => {
     subtree.push(descendant);
     return true;
-  }); // clean up subtree
-
+  });
+  // clean up subtree
   subtree.forEach(n => {
     if (isLunchboxStandardNode(n)) {
       // try to remove three object
-      n.instance?.removeFromParent?.(); // try to dispose three object
-
-      const dispose = // calling `dispose` on a scene triggers an error,
+      n.instance?.removeFromParent?.();
+      // try to dispose three object
+      const dispose =
+      // calling `dispose` on a scene triggers an error,
       // so let's ignore if this node is a scene
       n.type !== 'scene' && n.instance?.dispose;
       if (dispose) dispose.bind(n.instance)();
       n.instance = null;
-    } // drop tree node
-
-
+    }
+    // drop tree node
     n.drop();
   });
 };
@@ -1657,45 +1513,38 @@ const remove = node => {
 /*
     Elements are `create`d from the outside in, then `insert`ed from the inside out.
 */
-
 const createNodeOps = () => {
   // APP-LEVEL GLOBALS
   // ====================
   // These need to exist at the app level in a place where the node ops can access them.
   // It'd be better to set these via `app.provide` at app creation, but the node ops need access
   // to these values before the app is instantiated, so this is the next-best place for them to exist.
-  const interactables = ref([]); // NODE OPS
+  const interactables = ref([]);
+  // NODE OPS
   // ====================
-
   const nodeOps = {
     createElement,
-
     createText(text) {
       return createTextNode({
         text
       });
     },
-
     createComment(text) {
       return createCommentNode({
         text
       });
     },
-
     insert,
-
     nextSibling(node) {
       const result = node.nextSibling;
       if (!result) return null;
       return result;
     },
-
     parentNode(node) {
       const result = node.parentNode;
       if (!result) return null;
       return result;
     },
-
     patchProp(node, key, prevValue, nextValue) {
       if (isLunchboxDomComponent(node)) {
         // handle DOM node
@@ -1707,16 +1556,13 @@ const createNodeOps = () => {
         } else {
           node.domElement.setAttribute(key, nextValue);
         }
-
         return;
-      } // ignore if root node, or Lunchbox internal prop
-
-
+      }
+      // ignore if root node, or Lunchbox internal prop
       if (isLunchboxRootNode(node) || key.startsWith('$')) {
         return;
-      } // otherwise, update prop
-
-
+      }
+      // otherwise, update prop
       updateObjectProp({
         node: node,
         key,
@@ -1724,15 +1570,13 @@ const createNodeOps = () => {
         value: nextValue
       });
     },
-
     remove,
-
-    setElementText() {// noop
+    setElementText() {
+      // noop
     },
-
-    setText() {// noop
+    setText() {
+      // noop
     }
-
   };
   return {
     nodeOps,
@@ -1741,18 +1585,14 @@ const createNodeOps = () => {
 };
 
 /** The current camera as a computed value. */
-
 const useCamera = () => inject(appCameraKey);
 /** Run a function using the current camera when it's present. */
-
 const onCameraReady = cb => {
   const existing = useCamera();
-
   if (existing.value) {
     cb(existing.value);
     return;
   }
-
   let stopWatch = null;
   stopWatch = watch(useCamera(), newVal => {
     if (newVal) {
@@ -1762,18 +1602,14 @@ const onCameraReady = cb => {
   });
 };
 /** The current renderer as a computed value. */
-
 const useRenderer = () => inject(appRenderersKey);
 /** Run a function using the current renderer when it's present. */
-
 const onRendererReady = cb => {
   const existing = useRenderer();
-
   if (existing.value) {
     cb(existing.value);
     return;
   }
-
   let stopWatch = null;
   stopWatch = watch(useRenderer(), newVal => {
     if (newVal) {
@@ -1785,18 +1621,14 @@ const onRendererReady = cb => {
   });
 };
 /** The current scene as a computed value. */
-
 const useScene = () => inject(appSceneKey);
 /** Run a function using the current scene when it's present. */
-
 const onSceneReady = cb => {
   const existing = useScene();
-
   if (existing.value) {
     cb(existing.value);
     return;
   }
-
   let stopWatch = null;
   stopWatch = watch(useScene(), newVal => {
     if (newVal) {
@@ -1806,16 +1638,15 @@ const onSceneReady = cb => {
   }, {
     immediate: true
   });
-}; // CUSTOM RENDER SUPPORT
+};
+// CUSTOM RENDER SUPPORT
 // ====================
-
 /** Set a custom render function, overriding the Lunchbox app's default render function.
  * Changing this requires the user to manually render their scene.
  *
  * Invokes immediately - use `useCustomRender().setCustomRender`
  * if you need to call somewhere outside of `setup`.
  */
-
 const setCustomRender = render => {
   useCustomRender()?.setCustomRender?.(render);
 };
@@ -1824,24 +1655,20 @@ const setCustomRender = render => {
  * Invokes immediately - use `useCustomRender().clearCustomRender`
  * if you need to call somewhere outside of `setup`.
  */
-
 const clearCustomRender = () => {
   useCustomRender()?.clearCustomRender?.();
 };
 /** Provides `setCustomRender` and `clearCustomRender` functions to be called in a non-`setup` context. */
-
 const useCustomRender = () => {
   return {
     /** Set a custom render function, overriding the Lunchbox app's default render function.
      * Changing this requires the user to manually render their scene. */
     setCustomRender: inject(setCustomRenderKey),
-
     /** Clear the active app's custom render function. */
     clearCustomRender: inject(clearCustomRenderKey)
   };
 };
 /** Use app-level globals. */
-
 const useGlobals = () => inject(globalsInjectionKey);
 /** Construct a function to update your app-level globals.
  *
@@ -1853,29 +1680,23 @@ const useGlobals = () => inject(globalsInjectionKey);
  * updateGlobals({ dpr: 2 })
  * ```
  */
-
 const useUpdateGlobals = () => inject(updateGlobalsInjectionKey);
 /** Update app-level globals.
  *
  * Invokes immediately - use `useUpdateGlobals`
  * if you need to call somewhere outside of `setup`.
  */
-
 const updateGlobals = newValue => {
   useUpdateGlobals()?.(newValue);
 };
 /** Use the current Lunchbox app. Usually used internally by Lunchbox. */
-
 const useApp = () => inject(appKey);
 /** Obtain a list of the start callback functions. Usually used internally by Lunchbox. */
-
 const useStartCallbacks = () => inject(startCallbackKey);
 /** Run a given callback once when the Lunchbox app starts. Include an index to
  * splice the callback at that index in the callback queue. */
-
 const onStart = (cb, index = Infinity) => {
   const callbacks = useStartCallbacks();
-
   if (index === Infinity) {
     callbacks?.push(cb);
   } else {
@@ -1883,41 +1704,39 @@ const onStart = (cb, index = Infinity) => {
   }
 };
 /** Obtain a list of interactable objects (registered via onClick, onHover, etc events). Usually used internally by Lunchbox. */
-
 const useLunchboxInteractables = () => inject(lunchboxInteractables);
 /** Build a computed instance-getter from a specified ref. Defaults to a `toRaw`'d result. */
-
 const getInstance = (target, raw = true) => computed(() => {
   const output = target.value?.$el?.instance ?? target.value?.instance ?? null;
   if (output && raw) return toRaw(output);
   return output;
-}); // CREATE APP
+});
+// CREATE APP
 // ====================
-
 const createApp = root => {
   const {
     nodeOps,
     interactables
   } = createNodeOps();
-  const app = createRenderer(nodeOps).createApp(root); // provide Lunchbox interaction handlers flag (modified when user references events via
+  const app = createRenderer(nodeOps).createApp(root);
+  // provide Lunchbox interaction handlers flag (modified when user references events via
   // @click, etc)
-
-  app.provide(lunchboxInteractables, interactables); // register all components
+  app.provide(lunchboxInteractables, interactables);
+  // register all components
   // ====================
-
   Object.keys(components).forEach(key => {
     app?.component(key, components[key]);
-  }); // provide custom renderer functions
+  });
+  // provide custom renderer functions
   // ====================
-
   app.provide(setCustomRenderKey, render => {
     app.setCustomRender(render);
   });
   app.provide(clearCustomRenderKey, () => {
     app.clearCustomRender();
-  }); // before render
+  });
+  // before render
   // ====================
-
   const beforeRender = [];
   app.provide(beforeRenderKey, beforeRender);
   app.provide(onBeforeRenderKey, (cb, index = Infinity) => {
@@ -1932,14 +1751,13 @@ const createApp = root => {
       beforeRender.splice(cb, 1);
     } else {
       const idx = beforeRender.findIndex(v => v == cb);
-
       if (idx !== -1) {
         beforeRender.splice(idx, 1);
       }
     }
-  }); // after render
+  });
+  // after render
   // ====================
-
   const afterRender = [];
   app.provide(afterRenderKey, afterRender);
   app.provide(onAfterRenderKey, (cb, index = Infinity) => {
@@ -1954,14 +1772,13 @@ const createApp = root => {
       afterRender.splice(cb, 1);
     } else {
       const idx = afterRender.findIndex(v => v == cb);
-
       if (idx !== -1) {
         afterRender.splice(idx, 1);
       }
     }
-  }); // save app-level components
+  });
+  // save app-level components
   // ====================
-
   app.config.globalProperties.lunchbox = reactive({
     afterRender,
     beforeRender,
@@ -1970,35 +1787,34 @@ const createApp = root => {
     frameId: -1,
     renderer: null,
     scene: null,
-    watchStopHandle: null // TODO: inputActive, mousePos
-
-  }); // provide app-level globals & globals update method
+    watchStopHandle: null
+    // TODO: inputActive, mousePos
+  });
+  // provide app-level globals & globals update method
   // ====================
-
   app.provide(globalsInjectionKey, app.config.globalProperties.lunchbox);
   app.provide(updateGlobalsInjectionKey, newGlobals => {
     Object.keys(newGlobals).forEach(key => {
-      const typedKey = key; // TODO: fix
-
+      const typedKey = key;
+      // TODO: fix
       app.config.globalProperties.lunchbox[typedKey] = newGlobals[typedKey];
     });
-  }); // frame ID (used for update functions)
+  });
+  // frame ID (used for update functions)
   // ====================
-
-  app.provide(frameIdKey, app.config.globalProperties.lunchbox.frameId); // watch stop handler (used for conditional update loop)
+  app.provide(frameIdKey, app.config.globalProperties.lunchbox.frameId);
+  // watch stop handler (used for conditional update loop)
   // ====================
-
-  app.provide(watchStopHandleKey, app.config.globalProperties.lunchbox.watchStopHandle); // update mount function to match Lunchbox.Node
+  app.provide(watchStopHandleKey, app.config.globalProperties.lunchbox.watchStopHandle);
+  // update mount function to match Lunchbox.Node
   // ====================
-
   const {
     mount
   } = app;
-
   app.mount = (root, ...args) => {
     // find DOM element to use as app root
-    const domElement = typeof root === 'string' ? document.querySelector(root) : root; // create or find root node
-
+    const domElement = typeof root === 'string' ? document.querySelector(root) : root;
+    // create or find root node
     const rootNode = new MiniDom.RendererRootNode({
       domElement,
       isLunchboxRootNode: true,
@@ -2011,44 +1827,40 @@ const createApp = root => {
     app.provide(appRootNodeKey, rootNode);
     const mounted = mount(rootNode, ...args);
     return mounted;
-  }; // embed .extend function
+  };
+  // embed .extend function
   // ====================
-
-
   app.extend = targets => {
     extend({
       app: app,
       ...targets
     });
     return app;
-  }; // start callback functions
+  };
+  // start callback functions
   // ====================
-
-
   const startCallbacks = [];
-  app.provide(startCallbackKey, startCallbacks); // prep for custom render support
+  app.provide(startCallbackKey, startCallbacks);
+  // prep for custom render support
   // ====================
-
   app.setCustomRender = newRender => {
     if (app) {
       app.customRender = newRender;
     }
-  }; // add custom render removal
-
-
+  };
+  // add custom render removal
   app.clearCustomRender = () => {
     if (app) {
       app.customRender = null;
     }
-  }; // provide app
+  };
+  // provide app
   // ====================
-
-
   app.provide(appKey, app);
   app.provide(appRenderersKey, computed(() => app.config.globalProperties.lunchbox.renderer));
   app.provide(appSceneKey, computed(() => app.config.globalProperties.lunchbox.scene));
-  app.provide(appCameraKey, computed(() => app.config.globalProperties.lunchbox.camera)); // done
-
+  app.provide(appCameraKey, computed(() => app.config.globalProperties.lunchbox.camera));
+  // done
   return app;
 };