lunchboxjs 0.2.1016 → 0.2.1018

package/dist/lunchboxjs.js

@@ -4,8 +4,7 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Lunchbox = {}, global.vue, global.three));
 })(this, (function (exports, vue, THREE) { 'use strict';
 
-    function _interopNamespace(e) {
-        if (e && e.__esModule) return e;
+    function _interopNamespaceDefault(e) {
         var n = Object.create(null);
         if (e) {
             Object.keys(e).forEach(function (k) {
@@ -18,41 +17,38 @@
                 }
             });
         }
-        n["default"] = e;
+        n.default = e;
         return Object.freeze(n);
     }
 
-    var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+    var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 
     function find(target) {
-      target = vue.isRef(target) ? target.value : target; // handle standard lunchbox node
-
+      target = vue.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 (vue.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;
     };
 
@@ -65,18 +61,15 @@
        * 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`
@@ -102,7 +95,6 @@
        * _.isObjectLike(null);
        * // => false
        */
-
       function isObjectLike(value) {
         return !!value && typeof value == 'object';
       }
@@ -132,15 +124,11 @@
        * _.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) => {
@@ -153,10 +141,11 @@
       }, 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);
     };
@@ -175,61 +164,61 @@
     };
 
     /** Create a new Lunchbox comment node. */
-
     function createCommentNode(options = {}) {
       const defaults = {
         text: options.text ?? ''
       };
-      return new exports.MiniDom.RendererCommentNode({ ...defaults,
+      return new exports.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 exports.MiniDom.RendererDomNode({ ...defaults,
+      const node = new exports.MiniDom.RendererDomNode({
+        ...defaults,
         ...options,
         metaType: 'domMeta'
       });
       return node;
     }
     /** Create a new Lunchbox text node. */
-
     function createTextNode(options = {}) {
       const defaults = {
         text: options.text ?? ''
       };
-      return new exports.MiniDom.RendererTextNode({ ...options,
+      return new exports.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 exports.MiniDom.RendererStandardNode({ ...options,
+      const node = new exports.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;
     }
 
@@ -244,14 +233,12 @@
       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
@@ -259,27 +246,25 @@
           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;
@@ -293,11 +278,10 @@
         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(vue.toRaw(scene), vue.toRaw(camera));
       }
@@ -312,42 +296,37 @@
         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 = vue.defineComponent({
       name: 'LunchboxScene',
-
       setup(props, {
         slots
       }) {
@@ -355,12 +334,10 @@
           default: () => [slots.default?.()]
         });
       }
-
     });
 
     const LunchboxEventHandlers = vue.defineComponent({
       name: 'LunchboxEventHandlers',
-
       setup() {
         const interactables = useLunchboxInteractables();
         const globals = useGlobals();
@@ -371,7 +348,6 @@
         const inputActive = vue.ref(false);
         let currentIntersections = [];
         const raycaster = new THREE__namespace.Raycaster(new THREE__namespace.Vector3(), new THREE__namespace.Vector3(0, 0, -1));
-
         const fireEventsFromIntersections = ({
           element,
           eventKeys,
@@ -387,52 +363,44 @@
               });
             }
           });
-        }; // 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,
@@ -441,18 +409,15 @@
               }
             } 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);
             }
@@ -462,8 +427,8 @@
               element: interactables?.value.find(interactable => interactable.instance?.uuid === intersection.object.uuid),
               intersection
             };
-          }); // new interactions
-
+          });
+          // new interactions
           entering.forEach(({
             element,
             intersection
@@ -473,8 +438,8 @@
               eventKeys: ['onPointerEnter'],
               intersection
             });
-          }); // unchanged interactions
-
+          });
+          // unchanged interactions
           staying.forEach(({
             element,
             intersection
@@ -485,8 +450,8 @@
               eventKeys,
               intersection
             });
-          }); // exited interactions
-
+          });
+          // exited interactions
           leaving.forEach(({
             element,
             intersection
@@ -499,28 +464,24 @@
             });
           });
           currentIntersections = [].concat(entering, staying);
-        }; // update function
-
-
+        };
+        // update function
         onBeforeRender(update);
-
         const teardown = () => offBeforeRender(update);
-
         vue.onBeforeUnmount(teardown);
         const clickEventKeys = ['onClick', 'onPointerDown', 'onPointerUp'];
         vue.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({
@@ -538,16 +499,14 @@
               }
             });
           });
-        }); // return arbitrary object to ensure instantiation
+        });
+        // return arbitrary object to ensure instantiation
         // TODO: why can't we return a <raycaster/> here?
-
         return () => vue.createVNode(vue.resolveComponent("object3D"), null, null);
       }
-
     });
 
     /** fixed & fill styling for container */
-
     const fillStyle = position => {
       return {
         position,
@@ -560,7 +519,6 @@
         display: 'block'
       };
     };
-
     const LunchboxWrapper = vue.defineComponent({
       name: 'Lunchbox',
       props: {
@@ -582,7 +540,6 @@
         zoom: Number,
         updateSource: Object
       },
-
       setup(props, context) {
         const canvas = vue.ref();
         let dpr = props.dpr ?? -1;
@@ -594,101 +551,87 @@
         const updateGlobals = useUpdateGlobals();
         const app = useApp();
         const consolidatedCameraProperties = vue.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__namespace?.ColorManagement) {
           THREE__namespace.ColorManagement.legacyMode = false;
         }
-
-        const interactables = useLunchboxInteractables(); // MOUNT
+        const interactables = useLunchboxInteractables();
+        // MOUNT
         // ====================
-
         vue.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__namespace.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__namespace.sRGBEncoding;
               normalizedRenderer.toneMapping = THREE__namespace.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,
@@ -696,10 +639,9 @@
               renderer: normalizedRenderer,
               scene: normalizedScene
             });
-          } // KICK UPDATE
+          }
+          // KICK UPDATE
           // ====================
-
-
           update({
             app,
             camera: normalizedCamera,
@@ -707,36 +649,35 @@
             scene: normalizedScene,
             updateSource: props.updateSource
           });
-        }); // UNMOUNT
+        });
+        // UNMOUNT
         // ====================
-
         vue.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 = vue.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
         vue.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
@@ -745,10 +686,11 @@
           }
         }, {
           immediate: true
-        }); // RENDER FUNCTION
+        });
+        // RENDER FUNCTION
         // ====================
-
-        return () => vue.createVNode(vue.Fragment, null, [context.slots?.renderer?.()?.length ? // TODO: remove `as any` cast
+        return () => vue.createVNode(vue.Fragment, null, [context.slots?.renderer?.()?.length ?
+        // TODO: remove `as any` cast
         renderer.value = context.slots?.renderer?.()[0] : // ...otherwise, add canvas...
         vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
           "class": "lunchbox-container",
@@ -769,14 +711,16 @@
             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
         vue.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 ? vue.createVNode(vue.resolveComponent("orthographicCamera"), vue.mergeProps({
           "ref": camera,
           "args": props.cameraArgs ?? []
@@ -785,22 +729,32 @@
           "args": props.cameraArgs ?? [props.r3f ? 75 : 45, 0.5625, 1, 1000]
         }, consolidatedCameraProperties), null), interactables?.value.length && vue.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:
@@ -846,42 +800,36 @@
     fog: FogProps
     fogExp2: FogExp2Props
     shape: ShapeProps
-    */
-    ];
-
-    const catalogue = {}; // component creation utility
+    */];
 
+    const catalogue = {};
+    // component creation utility
     const createComponent$1 = tag => vue.defineComponent({
       inheritAttrs: false,
       name: tag,
-
       setup(props, context) {
         return () => {
           return vue.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 => vue.defineComponent({
       inheritAttrs: false,
       name: tag,
-
       render() {
         return vue.h(tag, this.$attrs, this.$slots?.default?.() || []);
       }
-
     });
-
     const extend = ({
       app,
       ...targets
@@ -900,14 +848,12 @@
       // 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({
@@ -923,17 +869,17 @@
     }
 
     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__namespace[uppercaseType] || catalogue[translatedType] || THREE__namespace[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,
@@ -959,12 +905,10 @@
         // 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);
     }
 
@@ -980,15 +924,13 @@
      */
 
     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
@@ -998,7 +940,6 @@
       if (!validate(uuid)) {
         throw TypeError('Stringified UUID is invalid');
       }
-
       return uuid;
     }
 
@@ -1011,119 +952,97 @@
 
       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.
-
     exports.MiniDom = void 0;
-
     (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);
@@ -1133,20 +1052,15 @@
               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);
@@ -1158,73 +1072,57 @@
           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);
@@ -1232,15 +1130,12 @@
           this.attachedArray = options.attachedArray ?? {};
           this.instance = options.instance ?? null;
         }
-
         attached;
         attachedArray;
         instance;
       }
-
       MiniDom.RendererStandardNode = RendererStandardNode;
     })(exports.MiniDom || (exports.MiniDom = {}));
-
     function isMinidomNode(item) {
       return item?.minidomType === 'RendererNode';
     }
@@ -1269,7 +1164,6 @@
       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,
@@ -1278,7 +1172,6 @@
         updateSource: opts.updateSource
       }));
     };
-
     const update = opts => {
       if (opts.updateSource) {
         if (!opts.app.config.globalProperties.lunchbox.watchStopHandle) {
@@ -1292,37 +1185,35 @@
       } 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(vue.toRaw(scene), opts.app.config.globalProperties.lunchbox.camera // toRaw(camera)
+          renderer.render(vue.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: vue.inject(onBeforeRenderKey),
@@ -1334,21 +1225,18 @@
      * 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: vue.inject(onBeforeRenderKey),
@@ -1360,21 +1248,18 @@
      * 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 = vue.inject(frameIdKey);
       return () => {
@@ -1382,26 +1267,22 @@
       };
     };
     /** 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 = vue.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,
@@ -1417,37 +1298,33 @@
           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);
@@ -1462,18 +1339,17 @@
         } 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
@@ -1483,25 +1359,20 @@
         // 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 = {
@@ -1511,8 +1382,8 @@
     };
     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'];
@@ -1520,55 +1391,48 @@
       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];
@@ -1576,26 +1440,23 @@
             }
           }
         }
-
         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
@@ -1603,15 +1464,13 @@
         }
       }
     };
-
     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
@@ -1627,11 +1486,9 @@
         });
       }
     }
-
     function attachToParentInstance(child, parent, key, value) {
       const finalValueToAttach = value ?? child.instance;
       const parentInstanceAsAny = parent.instance;
-
       if (child.props.attach === key) {
         parent.attached = {
           [key]: finalValueToAttach,
@@ -1639,40 +1496,38 @@
         };
         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();
       });
     };
@@ -1680,45 +1535,38 @@
     /*
         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 = vue.ref([]); // NODE OPS
+      const interactables = vue.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
@@ -1730,16 +1578,13 @@
             } 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,
@@ -1747,15 +1592,13 @@
             value: nextValue
           });
         },
-
         remove,
-
-        setElementText() {// noop
+        setElementText() {
+          // noop
         },
-
-        setText() {// noop
+        setText() {
+          // noop
         }
-
       };
       return {
         nodeOps,
@@ -1764,18 +1607,14 @@
     };
 
     /** The current camera as a computed value. */
-
     const useCamera = () => vue.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 = vue.watch(useCamera(), newVal => {
         if (newVal) {
@@ -1785,18 +1624,14 @@
       });
     };
     /** The current renderer as a computed value. */
-
     const useRenderer = () => vue.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 = vue.watch(useRenderer(), newVal => {
         if (newVal) {
@@ -1808,18 +1643,14 @@
       });
     };
     /** The current scene as a computed value. */
-
     const useScene = () => vue.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 = vue.watch(useScene(), newVal => {
         if (newVal) {
@@ -1829,16 +1660,15 @@
       }, {
         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);
     };
@@ -1847,24 +1677,20 @@
      * 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: vue.inject(setCustomRenderKey),
-
         /** Clear the active app's custom render function. */
         clearCustomRender: vue.inject(clearCustomRenderKey)
       };
     };
     /** Use app-level globals. */
-
     const useGlobals = () => vue.inject(globalsInjectionKey);
     /** Construct a function to update your app-level globals.
      *
@@ -1876,29 +1702,23 @@
      * updateGlobals({ dpr: 2 })
      * ```
      */
-
     const useUpdateGlobals = () => vue.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 = () => vue.inject(appKey);
     /** Obtain a list of the start callback functions. Usually used internally by Lunchbox. */
-
     const useStartCallbacks = () => vue.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 {
@@ -1906,41 +1726,39 @@
       }
     };
     /** Obtain a list of interactable objects (registered via onClick, onHover, etc events). Usually used internally by Lunchbox. */
-
     const useLunchboxInteractables = () => vue.inject(lunchboxInteractables);
     /** Build a computed instance-getter from a specified ref. Defaults to a `toRaw`'d result. */
-
     const getInstance = (target, raw = true) => vue.computed(() => {
       const output = target.value?.$el?.instance ?? target.value?.instance ?? null;
       if (output && raw) return vue.toRaw(output);
       return output;
-    }); // CREATE APP
+    });
+    // CREATE APP
     // ====================
-
-    const createApp = root => {
+    const createApp = (root, rootProps = {}) => {
       const {
         nodeOps,
         interactables
       } = createNodeOps();
-      const app = vue.createRenderer(nodeOps).createApp(root); // provide Lunchbox interaction handlers flag (modified when user references events via
+      const app = vue.createRenderer(nodeOps).createApp(root, rootProps);
+      // 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) => {
@@ -1955,14 +1773,13 @@
           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) => {
@@ -1977,14 +1794,13 @@
           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 = vue.reactive({
         afterRender,
         beforeRender,
@@ -1993,35 +1809,34 @@
         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 exports.MiniDom.RendererRootNode({
           domElement,
           isLunchboxRootNode: true,
@@ -2034,44 +1849,41 @@
         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, vue.computed(() => app.config.globalProperties.lunchbox.renderer));
       app.provide(appSceneKey, vue.computed(() => app.config.globalProperties.lunchbox.scene));
-      app.provide(appCameraKey, vue.computed(() => app.config.globalProperties.lunchbox.camera)); // done
-
+      app.provide(appCameraKey, vue.computed(() => app.config.globalProperties.lunchbox.camera));
+      app._props;
+      // done
       return app;
     };
 
@@ -2135,6 +1947,4 @@
     exports.useUpdateGlobals = useUpdateGlobals;
     exports.watchStopHandleKey = watchStopHandleKey;
 
-    Object.defineProperty(exports, '__esModule', { value: true });
-
 }));