lunchboxjs 0.1.4018 → 0.2.1001-beta.2

package/dist/lunchboxjs.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('three'), require('lodash')) :
     typeof define === 'function' && define.amd ? define(['exports', 'vue', 'three', 'lodash'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.LunchboxRenderer = {}, global.vue, global.three, global.lodash));
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Lunchbox = {}, global.vue, global.three, global.lodash));
 })(this, (function (exports, vue, THREE, lodash) { 'use strict';
 
     function _interopNamespace(e) {
@@ -24,1063 +24,819 @@
 
     var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 
-    // this needs to be in a separate file to ensure it's created immediately
-    const allNodes = [];
+    function find(target) {
+      target = vue.isRef(target) ? target.value : target; // handle standard lunchbox node
 
-    const resizeCanvas = (width, height) => {
-        const renderer = ensureRenderer.value?.instance;
-        const scene = ensuredScene.value.instance;
-        const camera = ensuredCamera.value;
-        // ignore if no element
-        if (!renderer?.domElement || !scene || !camera)
-            return;
-        width = width ?? window.innerWidth;
-        height = height ?? window.innerHeight;
-        // update camera
-        const aspect = width / height;
-        if (camera.type?.toLowerCase() === 'perspectivecamera') {
-            const perspectiveCamera = camera.instance;
-            perspectiveCamera.aspect = aspect;
-            perspectiveCamera.updateProjectionMatrix();
-        }
-        else if (camera.type?.toLowerCase() === 'orthographiccamera') {
-            // console.log('TODO: ortho camera update')
-            const orthoCamera = camera.instance;
-            const heightInTermsOfWidth = height / width;
-            orthoCamera.top = heightInTermsOfWidth * 10;
-            orthoCamera.bottom = -heightInTermsOfWidth * 10;
-            orthoCamera.right = 10;
-            orthoCamera.left = -10;
-            orthoCamera.updateProjectionMatrix();
-        }
-        else {
-            console.log('TODO: non-ortho or perspective camera');
-        }
-        // update canvas
-        renderer.setSize(width, height);
-        // render immediately so there's no flicker
-        if (scene && camera.instance) {
-            renderer.render(vue.toRaw(scene), vue.toRaw(camera.instance));
-        }
-    };
+      if (isLunchboxStandardNode(target)) {
+        return target?.instance;
+      } // handle component
 
-    const getInnerDimensions = (node) => {
-        const computedStyle = getComputedStyle(node);
-        const width = node.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
-        const height = node.clientHeight - parseFloat(computedStyle.paddingTop) - parseFloat(computedStyle.paddingBottom);
-        return { width, height };
-    };
-    const prepCanvas = (container, canvasElement, onBeforeUnmount, sizePolicy) => {
-        const containerElement = container.value?.domElement;
-        if (!containerElement)
-            throw new Error('missing container');
-        // save...
-        // ...and size element
-        const resizeCanvasByPolicy = () => {
-            if (sizePolicy === "container") {
-                const dims = getInnerDimensions(containerElement);
-                resizeCanvas(dims.width, dims.height);
-            }
-            else
-                resizeCanvas();
-        };
-        resizeCanvasByPolicy();
-        // attach listeners
-        const observer = new ResizeObserver(([canvas]) => {
-            resizeCanvasByPolicy();
-        });
-        // window.addEventListener('resize', resizeCanvas)
-        if (containerElement) {
-            observer.observe(containerElement);
-        }
-        // cleanup
-        onBeforeUnmount(() => {
-            if (canvasElement) {
-                observer.unobserve(canvasElement);
-            }
-        });
-    };
-
-    // TODO:
-    // Continue r3f prop - what else (besides camera fov) makes r3f look good?
-    /** fixed & fill styling for container */
-    const fillStyle = (position) => {
-        return {
-            position,
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            display: 'block',
-        };
-    };
-    const LunchboxWrapper = {
-        name: 'Lunchbox',
-        props: {
-            // These should match the Lunchbox.WrapperProps interface
-            background: String,
-            cameraArgs: Array,
-            cameraLook: Array,
-            cameraLookAt: Array,
-            cameraPosition: Array,
-            dpr: Number,
-            ortho: Boolean,
-            orthographic: Boolean,
-            r3f: Boolean,
-            rendererArguments: Object,
-            rendererProperties: Object,
-            sizePolicy: String,
-            shadow: [Boolean, Object],
-            transparent: Boolean,
-            zoom: Number,
-            updateSource: Object,
-        },
-        setup(props, context) {
-            const canvas = vue.ref();
-            const useFallbackRenderer = vue.ref(true);
-            const dpr = vue.ref(props.dpr ?? -1);
-            const container = vue.ref();
-            let renderer;
-            let camera;
-            let scene;
-            // https://threejs.org/docs/index.html#manual/en/introduction/Color-management
-            if (props.r3f && THREE__namespace?.ColorManagement) {
-                THREE__namespace.ColorManagement.legacyMode = false;
-            }
-            // MOUNT
-            // ====================
-            vue.onMounted(() => {
-                // canvas needs to exist
-                if (!canvas.value)
-                    throw new Error('missing canvas');
-                // RENDERER
-                // ====================
-                // is there already a renderer?
-                // TODO: allow other renderer types
-                renderer = tryGetNodeWithInstanceType([
-                    'WebGLRenderer',
-                ]);
-                // if renderer is missing, initialize with options
-                if (!renderer) {
-                    // build renderer args
-                    const rendererArgs = {
-                        alpha: props.transparent,
-                        antialias: true,
-                        canvas: canvas.value.domElement,
-                        powerPreference: !!props.r3f
-                            ? 'high-performance'
-                            : 'default',
-                        ...(props.rendererArguments ?? {}),
-                    };
-                    // create new renderer
-                    ensureRenderer.value = createNode({
-                        type: 'WebGLRenderer',
-                        uuid: fallbackRendererUuid,
-                        props: {
-                            args: [rendererArgs],
-                        },
-                    });
-                    // we've initialized the renderer, so anything depending on it can execute now
-                    rendererReady.value = true;
-                    const rendererAsWebGlRenderer = ensureRenderer;
-                    // apply r3f settings if desired
-                    if (props.r3f) {
-                        if (rendererAsWebGlRenderer.value.instance) {
-                            rendererAsWebGlRenderer.value.instance.outputEncoding =
-                                THREE__namespace.sRGBEncoding;
-                            rendererAsWebGlRenderer.value.instance.toneMapping =
-                                THREE__namespace.ACESFilmicToneMapping;
-                        }
-                    }
-                    // update render sugar
-                    const sugar = {
-                        shadow: props.shadow,
-                    };
-                    if (rendererAsWebGlRenderer.value.instance && sugar?.shadow) {
-                        rendererAsWebGlRenderer.value.instance.shadowMap.enabled =
-                            true;
-                        if (typeof sugar.shadow === 'object') {
-                            rendererAsWebGlRenderer.value.instance.shadowMap.type =
-                                sugar.shadow.type;
-                        }
-                    }
-                    // set renderer props if needed
-                    if (props.rendererProperties) {
-                        Object.keys(props.rendererProperties).forEach((key) => {
-                            lodash.set(rendererAsWebGlRenderer.value, key, props.rendererProperties[key]);
-                        });
-                    }
-                    // update using created renderer
-                    renderer = rendererAsWebGlRenderer.value;
-                }
-                else {
-                    useFallbackRenderer.value = false;
-                    // the user has initialized the renderer, so anything depending
-                    // on the renderer can execute
-                    rendererReady.value = true;
-                }
-                // CAMERA
-                // ====================
-                // is there already a camera?
-                camera = tryGetNodeWithInstanceType([
-                    'PerspectiveCamera',
-                    'OrthographicCamera',
-                ]);
-                // if not, let's create one
-                if (!camera) {
-                    // create ortho camera
-                    if (props.ortho || props.orthographic) {
-                        ensuredCamera.value = createNode({
-                            props: { args: props.cameraArgs ?? [] },
-                            type: 'OrthographicCamera',
-                            uuid: fallbackCameraUuid,
-                        });
-                    }
-                    else {
-                        ensuredCamera.value = createNode({
-                            props: {
-                                args: props.cameraArgs ?? [
-                                    props.r3f ? 75 : 45,
-                                    0.5625,
-                                    1,
-                                    1000,
-                                ],
-                            },
-                            type: 'PerspectiveCamera',
-                            uuid: fallbackCameraUuid,
-                        });
-                    }
-                    cameraReady.value = true;
-                    camera = ensuredCamera.value;
-                }
-                else {
-                    cameraReady.value = true;
-                }
-                if (!camera.instance) {
-                    throw new Error('Error creating camera.');
-                }
-                // move camera if needed
-                if (camera && props.cameraPosition) {
-                    camera.instance.position.set(...props.cameraPosition);
-                }
-                // angle camera if needed
-                if (camera && (props.cameraLookAt || props.cameraLook)) {
-                    const source = (props.cameraLookAt || props.cameraLook);
-                    camera.instance.lookAt(...source);
-                }
-                // zoom camera if needed
-                if (camera && props.zoom !== undefined) {
-                    camera.instance.zoom = props.zoom;
-                }
-                // SCENE
-                // ====================
-                scene = ensuredScene.value;
-                // set background color
-                if (scene && scene.instance && props.background) {
-                    scene.instance.background = new THREE__namespace.Color(props.background);
-                }
-                // MISC PROPERTIES
-                // ====================
-                if (dpr.value === -1) {
-                    dpr.value = window.devicePixelRatio;
-                }
-                if (renderer?.instance) {
-                    renderer.instance.setPixelRatio(dpr.value);
-                    globals.dpr.value = dpr.value;
-                    // prep canvas (sizing, observe, unmount, etc)
-                    prepCanvas(container, renderer.instance.domElement, vue.onBeforeUnmount, props.sizePolicy);
-                }
-                else {
-                    throw new Error('missing renderer');
-                }
-                // CALLBACK PREP
-                // ====================
-                const app = vue.getCurrentInstance().appContext.app;
-                // START
-                // ====================
-                for (let startCallback of startCallbacks) {
-                    startCallback({
-                        app,
-                        camera: camera.instance,
-                        renderer: renderer.instance,
-                        scene: scene.instance,
-                    });
-                }
-                // KICK UPDATE
-                // ====================
-                update({
-                    app,
-                    camera: camera.instance,
-                    renderer: renderer.instance,
-                    scene: scene.instance,
-                    updateSource: props.updateSource,
-                });
-            });
-            // UNMOUNT
-            // ====================
-            vue.onBeforeUnmount(() => {
-                cancelUpdate();
-                cancelUpdateSource();
-            });
-            // RENDER FUNCTION
-            // ====================
-            const containerFillStyle = props.sizePolicy === 'container' ? 'static' : 'absolute';
-            const canvasFillStyle = props.sizePolicy === 'container' ? 'static' : 'fixed';
-            return () => [
-                context.slots.default?.() ?? null,
-                vue.h('div', {
-                    style: fillStyle(containerFillStyle),
-                    ref: container,
-                }, [
-                    useFallbackRenderer.value
-                        ? vue.h('canvas', {
-                            style: fillStyle(canvasFillStyle),
-                            class: 'lunchbox-canvas',
-                            ref: canvas,
-                        })
-                        : 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
-        // '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',
-        // helpers
-        'cameraHelper',
-        // cameras
-        'camera',
-        'perspectiveCamera',
-        'orthographicCamera',
-        'cubeCamera',
-        'arrayCamera',
-        // renderers
-        'webGLRenderer',
-        /*
-        // List copied from r3f:
-        // https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/three-types.ts
-
-        // NOT IMPLEMENTED (can be added via Extend - docs.lunchboxjs.com/components/extend/):
-        audioListener: AudioListenerProps
-        positionalAudio: PositionalAudioProps
-
-        lOD: LODProps
-        skinnedMesh: SkinnedMeshProps
-        skeleton: SkeletonProps
-        bone: BoneProps
-        lineSegments: LineSegmentsProps
-        lineLoop: LineLoopProps
-        // see `audio`
-        // line: LineProps
-        immediateRenderObject: ImmediateRenderObjectProps
-
-        // primitive
-        primitive: PrimitiveProps
-
-        // helpers
-        spotLightHelper: SpotLightHelperProps
-        skeletonHelper: SkeletonHelperProps
-        pointLightHelper: PointLightHelperProps
-        hemisphereLightHelper: HemisphereLightHelperProps
-        gridHelper: GridHelperProps
-        polarGridHelper: PolarGridHelperProps
-        directionalLightHelper: DirectionalLightHelperProps
-        boxHelper: BoxHelperProps
-        box3Helper: Box3HelperProps
-        planeHelper: PlaneHelperProps
-        arrowHelper: ArrowHelperProps
-        axesHelper: AxesHelperProps
-
-
-        // misc
-        raycaster: RaycasterProps
-        vector2: Vector2Props
-        vector3: Vector3Props
-        vector4: Vector4Props
-        euler: EulerProps
-        matrix3: Matrix3Props
-        matrix4: Matrix4Props
-        quaternion: QuaternionProps
-        bufferAttribute: BufferAttributeProps
-        instancedBufferAttribute: InstancedBufferAttributeProps
-        color: ColorProps
-        fog: FogProps
-        fogExp2: FogExp2Props
-        shape: ShapeProps
-    */
-    ];
+      if (isLunchboxComponent(target)) {
+        return target?.$el?.instance;
+      } // handle vnode
 
-    const catalogue = {};
 
-    const lunchboxDomComponentNames = ['canvas', 'div', 'LunchboxWrapper'];
-    // 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
-    const processed = autoGeneratedComponents
-        .map(createComponent$1)
-        .reduce((acc, curr) => {
-        acc[curr.name] = curr;
-        return acc;
-    }, {});
-    const components = {
-        ...processed,
-        Lunchbox: LunchboxWrapper,
-    };
+      if (vue.isVNode(target)) {
+        return target.el?.instance;
+      }
 
-    function find(target) {
-        target = vue.isRef(target) ? target.value : target;
-        // handle standard lunchbox node
-        if (isLunchboxStandardNode(target)) {
-            return target?.instance;
-        }
-        // handle component
-        if (isLunchboxComponent(target)) {
-            return target?.$el?.instance;
-        }
-        // handle vnode
-        if (vue.isVNode(target)) {
-            return target.el?.instance;
-        }
-        return null;
+      return null;
     }
 
-    // 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',
-            // 'onUpdate',
-            'onWheel',
-        ].includes(target);
+
+    const isEventKey = target => {
+      return ['onClick', 'onContextMenu', 'onDoubleClick', 'onPointerUp', 'onPointerDown', 'onPointerOver', 'onPointerOut', 'onPointerEnter', 'onPointerLeave', 'onPointerMove', // 'onPointerMissed',
+      // 'onUpdate',
+      'onWheel'].includes(target);
     };
-    const isLunchboxComponent = (node) => {
-        return node?.$el && node?.$el?.hasOwnProperty?.('instance');
+    const isLunchboxComponent = node => {
+      return node?.$el && node?.$el?.hasOwnProperty?.('instance');
     };
-    const isLunchboxDomComponent = (node) => {
-        if (node?.metaType === 'domMeta')
-            return true;
-        const typeToCheck = typeof node === 'string' ? node : node?.type;
-        return lunchboxDomComponentNames.includes(typeToCheck ?? '');
+    const isLunchboxDomComponent = node => {
+      if (node?.metaType === 'domMeta') return true;
+      return node?.props?.['data-lunchbox'];
     };
-    const isLunchboxStandardNode = (node) => {
-        return node?.metaType === 'standardMeta';
+    const isLunchboxStandardNode = node => {
+      return node?.metaType === 'standardMeta';
     };
-    const isLunchboxRootNode = (node) => {
-        return node.isLunchboxRootNode;
+    const isLunchboxRootNode = node => {
+      return node.isLunchboxRootNode;
     };
 
-    const interactables = [];
-    const addInteractable = (target) => {
-        interactables.push(target);
-    };
-    const removeInteractable = (target) => {
-        const idx = interactables.indexOf(target);
-        if (idx !== -1) {
-            interactables.splice(idx, 1);
-        }
-    };
+    /** Create a new Lunchbox comment node. */
+
+    function createCommentNode(options = {}) {
+      const defaults = {
+        text: options.text ?? ''
+      };
+      return new exports.MiniDom.RendererCommentNode({ ...defaults,
+        ...options,
+        metaType: 'commentMeta'
+      });
+    }
+    /** Create a new DOM node. */
 
-    /** Mouse is down, touch is pressed, etc */
-    const inputActive = vue.ref(false);
+    function createDomNode(options = {}) {
+      const domElement = document.createElement(options.type ?? '');
+      const defaults = {
+        domElement
+      };
+      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,
+        ...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,
+        ...defaults,
+        metaType: 'standardMeta'
+      });
+
+      if (node.type && !isLunchboxRootNode(node) && !node.instance) {
+        node.instance = instantiateThreeObject({ ...node,
+          props: { ...node.props,
+            ...props
+          }
+        });
+      }
+
+      return node;
+    }
 
     /** Add an event listener to the given node. Also creates the event teardown function and any necessary raycaster/interaction dictionary updates. */
-    function addEventListener({ node, key, value, }) {
-        // create new records for this key if needed
-        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
-        if (interactionsRequiringRaycaster.includes(key)) {
-            // we're not using `v` here, we're just making sure the raycaster has been created
-            // TODO: is this necessary?
-            ensuredRaycaster.value;
-            if (node.instance && !interactables.includes(node)) {
-                addInteractable(node);
-                node.eventListenerRemoveFunctions[key].push(() => removeInteractable(node));
+    function addEventListener({
+      node,
+      key,
+      interactables,
+      value
+    }) {
+      // create new records for this key if needed
+      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
+
+      if (interactionsRequiringRaycaster.includes(key)) {
+        if (node.instance && !interactables.value.includes(node)) {
+          // add to interactables
+          interactables.value.push(node);
+          node.eventListenerRemoveFunctions[key].push(() => {
+            // remove from interactables
+            const idx = interactables.value.indexOf(node);
+
+            if (idx !== -1) {
+              interactables.value.splice(idx, 1);
             }
+          });
         }
-        // register click, pointerdown, pointerup
-        if (key === 'onClick' || key === 'onPointerDown' || key === 'onPointerUp') {
-            const stop = vue.watch(() => inputActive.value, (isDown) => {
-                const idx = currentIntersections
-                    .map((v) => v.element)
-                    .findIndex((v) => v.instance &&
-                    v.instance.uuid === node.instance?.uuid);
-                if (idx !== -1) {
-                    if (isDown &&
-                        (key === 'onClick' || key === 'onPointerDown')) {
-                        node.eventListeners[key].forEach((func) => {
-                            func({
-                                intersection: currentIntersections[idx].intersection,
-                            });
-                        });
-                    }
-                    else if (!isDown && key === 'onPointerUp') {
-                        node.eventListeners[key].forEach((func) => {
-                            func({
-                                intersection: currentIntersections[idx].intersection,
-                            });
-                        });
-                    }
-                }
-            });
-            node.eventListenerRemoveFunctions[key].push(stop);
-        }
-        return node;
+      }
+
+      return node;
     }
-    const interactionsRequiringRaycaster = [
-        'onClick',
-        'onPointerUp',
-        'onPointerDown',
-        'onPointerOver',
-        'onPointerOut',
-        'onPointerEnter',
-        'onPointerLeave',
-        'onPointerMove',
-        // 'onPointerMissed',
+    const interactionsRequiringRaycaster = ['onClick', 'onPointerUp', 'onPointerDown', 'onPointerOver', 'onPointerOut', 'onPointerEnter', 'onPointerLeave', 'onPointerMove' // 'onPointerMissed',
     ];
 
-    let mouseMoveListener;
-    let mouseDownListener;
-    let mouseUpListener;
-    const mousePos = vue.ref({ x: Infinity, y: Infinity });
-    let autoRaycasterEventsInitialized = false;
-    let frameID$1;
-    const setupAutoRaycaster = (node) => {
-        const instance = node.instance;
-        if (!instance)
-            return;
-        // add mouse events once renderer is ready
-        let stopWatcher = null;
-        stopWatcher = vue.watch(() => ensureRenderer.value, (renderer) => {
-            // make sure renderer exists
-            if (!renderer?.instance)
-                return;
-            // cancel early if autoraycaster exists
-            if (autoRaycasterEventsInitialized) {
-                if (stopWatcher)
-                    stopWatcher();
-                return;
-            }
-            // create mouse events
-            mouseMoveListener = (evt) => {
-                const screenWidth = (renderer.instance.domElement.width ?? 1) /
-                    globals.dpr.value;
-                const screenHeight = (renderer.instance.domElement.height ?? 1) /
-                    globals.dpr.value;
-                mousePos.value.x = (evt.offsetX / screenWidth) * 2 - 1;
-                mousePos.value.y = -(evt.offsetY / screenHeight) * 2 + 1;
-            };
-            mouseDownListener = () => (inputActive.value = true);
-            mouseUpListener = () => (inputActive.value = false);
-            // add mouse events
-            renderer.instance.domElement.addEventListener('mousemove', mouseMoveListener);
-            renderer.instance.domElement.addEventListener('mousedown', mouseDownListener);
-            renderer.instance.domElement.addEventListener('mouseup', mouseUpListener);
-            // TODO: add touch events
-            // process mouse events asynchronously, whenever the mouse state changes
-            vue.watch(() => [inputActive.value, mousePos.value.x, mousePos.value.y], () => {
-                if (frameID$1)
-                    cancelAnimationFrame(frameID$1);
-                frameID$1 = requestAnimationFrame(() => {
-                    autoRaycasterBeforeRender();
+    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
+
+      const aspect = width / height;
+
+      if (camera.type?.toLowerCase() === 'perspectivecamera') {
+        const perspectiveCamera = camera;
+        perspectiveCamera.aspect = aspect;
+        perspectiveCamera.updateProjectionMatrix();
+      } else if (camera.type?.toLowerCase() === 'orthographiccamera') {
+        // TODO: ortho camera update
+        const orthoCamera = camera;
+        const heightInTermsOfWidth = height / width;
+        orthoCamera.top = heightInTermsOfWidth * 10;
+        orthoCamera.bottom = -heightInTermsOfWidth * 10;
+        orthoCamera.right = 10;
+        orthoCamera.left = -10;
+        orthoCamera.updateProjectionMatrix();
+      } 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));
+      }
+    };
+
+    const getInnerDimensions = node => {
+      const computedStyle = getComputedStyle(node);
+      const width = node.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
+      const height = node.clientHeight - parseFloat(computedStyle.paddingTop) - parseFloat(computedStyle.paddingBottom);
+      return {
+        width,
+        height
+      };
+    };
+
+    const prepCanvas = (container, camera, renderer, scene, sizePolicy) => {
+      const containerElement = container.value?.domElement;
+      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
+
+      let observer = new ResizeObserver(() => {
+        resizeCanvasByPolicy();
+      }); // window.addEventListener('resize', resizeCanvas)
+
+      if (containerElement) {
+        observer.observe(containerElement);
+      } // cleanup
+
+
+      return {
+        dispose() {
+          if (containerElement) {
+            observer.unobserve(containerElement);
+          }
+        }
+
+      };
+    };
+
+    const LunchboxScene = vue.defineComponent({
+      name: 'LunchboxScene',
+
+      setup(props, {
+        slots
+      }) {
+        return () => vue.createVNode(vue.resolveComponent("scene"), null, {
+          default: () => [slots.default?.()]
+        });
+      }
+
+    });
+
+    const LunchboxEventHandlers = vue.defineComponent({
+      name: 'LunchboxEventHandlers',
+
+      setup() {
+        const interactables = useLunchboxInteractables();
+        const globals = useGlobals();
+        const mousePos = vue.ref({
+          x: Infinity,
+          y: Infinity
+        });
+        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,
+          intersection
+        }) => {
+          if (!element) return;
+          eventKeys.forEach(eventKey => {
+            if (element.eventListeners[eventKey]) {
+              element.eventListeners[eventKey].forEach(cb => {
+                cb({
+                  intersection
                 });
-            });
-            // mark complete
-            autoRaycasterEventsInitialized = true;
-            // cancel setup watcher
-            if (stopWatcher) {
-                stopWatcher();
+              });
             }
-        }, { immediate: true });
-    };
-    // AUTO-RAYCASTER CALLBACK
-    // ====================
-    let currentIntersections = [];
-    const autoRaycasterBeforeRender = () => {
-        // setup
-        const raycaster = ensuredRaycaster.value?.instance;
-        const camera = ensuredCamera.value?.instance;
-        if (!raycaster || !camera)
-            return;
-        raycaster.setFromCamera(globals.mousePos.value, camera);
-        const intersections = raycaster.intersectObjects(interactables.map((v) => v.instance));
-        let leaveValues = [], 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);
+          });
+        }; // 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
+
+          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
+
+
+          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)
+
+          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
+
+          intersections?.forEach(intersection => {
+            const currentIdx = currentIntersections.findIndex(v => v.intersection.object === intersection.object);
+
             if (currentIdx === -1) {
-                const found = interactables.find((v) => v.instance?.uuid === intersection.object.uuid);
-                if (found) {
-                    entering.push({ element: found, intersection });
-                }
-            }
-            else {
-                const found = interactables.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
-            const leaveIdx = leaveValues.findIndex((v) => v.object.uuid === intersection.object.uuid);
+              const found = interactables?.value.find(v => v.instance?.uuid === intersection.object.uuid);
+
+              if (found) {
+                entering.push({
+                  element: found,
+                  intersection
+                });
+              }
+            } 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
+
+
+            const leaveIdx = leaveValues.findIndex(v => v.object.uuid === intersection.object.uuid);
+
             if (leaveIdx !== -1) {
-                leaveValues.splice(leaveIdx, 1);
+              leaveValues.splice(leaveIdx, 1);
             }
-        });
-        const leaving = leaveValues.map((intersection) => {
+          });
+          const leaving = leaveValues.map(intersection => {
             return {
-                element: interactables.find((interactable) => interactable.instance?.uuid === intersection.object.uuid),
-                intersection,
+              element: interactables?.value.find(interactable => interactable.instance?.uuid === intersection.object.uuid),
+              intersection
             };
-        });
-        // new interactions
-        entering.forEach(({ element, intersection }) => {
+          }); // new interactions
+
+          entering.forEach(({
+            element,
+            intersection
+          }) => {
             fireEventsFromIntersections({
-                element,
-                eventKeys: ['onPointerEnter'],
-                intersection,
+              element,
+              eventKeys: ['onPointerEnter'],
+              intersection
             });
-        });
-        // unchanged interactions
-        staying.forEach(({ element, intersection }) => {
-            const eventKeys = [
-                'onPointerOver',
-                'onPointerMove',
-            ];
-            fireEventsFromIntersections({ element, eventKeys, intersection });
-        });
-        // exited interactions
-        leaving.forEach(({ element, intersection }) => {
-            const eventKeys = [
-                'onPointerLeave',
-                'onPointerOut',
-            ];
-            fireEventsFromIntersections({ element, eventKeys, intersection });
-        });
-        currentIntersections = [].concat(entering, staying);
-    };
-    // utility function for firing multiple callbacks and multiple events on a Lunchbox.Element
-    const fireEventsFromIntersections = ({ element, eventKeys, intersection, }) => {
-        if (!element)
-            return;
-        eventKeys.forEach((eventKey) => {
-            if (element.eventListeners[eventKey]) {
-                element.eventListeners[eventKey].forEach((cb) => {
-                    cb({ intersection });
-                });
-            }
-        });
+          }); // unchanged interactions
+
+          staying.forEach(({
+            element,
+            intersection
+          }) => {
+            const eventKeys = ['onPointerOver', 'onPointerMove'];
+            fireEventsFromIntersections({
+              element,
+              eventKeys,
+              intersection
+            });
+          }); // exited interactions
+
+          leaving.forEach(({
+            element,
+            intersection
+          }) => {
+            const eventKeys = ['onPointerLeave', 'onPointerOut'];
+            fireEventsFromIntersections({
+              element,
+              eventKeys,
+              intersection
+            });
+          });
+          currentIntersections = [].concat(entering, staying);
+        }; // 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 -
+          // 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({
+                    intersection: v.intersection
+                  }));
+                  uuidsInteractedWithThisFrame.push(id);
+                }
+              } else if (!isDown && key === 'onPointerUp') {
+                if (!uuidsInteractedWithThisFrame.includes(id)) {
+                  v.element.eventListeners[key]?.forEach(cb => cb({
+                    intersection: v.intersection
+                  }));
+                  uuidsInteractedWithThisFrame.push(id);
+                }
+              }
+            });
+          });
+        }); // 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,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        display: 'block'
+      };
     };
 
-    // ENSURE ROOT
-    // ====================
-    const rootUuid = 'LUNCHBOX_ROOT';
-    exports.lunchboxTree = void 0;
-    function ensureRootNode(options = {}) {
-        if (!exports.lunchboxTree) {
-            exports.lunchboxTree = new MiniDom.RendererRootNode(options);
-        }
-        return exports.lunchboxTree;
-    }
-    // This is used in `buildEnsured` below and `LunchboxWrapper`
-    /** Search the overrides record and the node tree for a node in the given types */
-    function tryGetNodeWithInstanceType(pascalCaseTypes) {
-        if (!Array.isArray(pascalCaseTypes)) {
-            pascalCaseTypes = [pascalCaseTypes];
-        }
-        // default to override if we have one
-        for (let singleType of pascalCaseTypes) {
-            if (overrides[singleType])
-                return overrides[singleType];
+    const LunchboxWrapper = vue.defineComponent({
+      name: 'Lunchbox',
+      props: {
+        // These should match the Lunchbox.WrapperProps interface
+        background: String,
+        cameraArgs: Array,
+        cameraLook: Array,
+        cameraLookAt: Array,
+        cameraPosition: Array,
+        dpr: Number,
+        ortho: Boolean,
+        orthographic: Boolean,
+        r3f: Boolean,
+        rendererArguments: Object,
+        rendererProperties: Object,
+        sizePolicy: String,
+        shadow: [Boolean, Object],
+        transparent: Boolean,
+        zoom: Number,
+        updateSource: Object
+      },
+
+      setup(props, context) {
+        const canvas = vue.ref();
+        let dpr = props.dpr ?? -1;
+        const container = vue.ref();
+        const renderer = vue.ref();
+        const camera = vue.ref();
+        const scene = vue.ref();
+        const globals = useGlobals();
+        const updateGlobals = useUpdateGlobals();
+        const app = useApp();
+        const consolidatedCameraProperties = vue.reactive({});
+        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;
         }
-        // look for auto-created node
-        for (let singleType of pascalCaseTypes) {
-            const found = autoCreated[singleType] ||
-                allNodes.find((node) => node.type?.toLowerCase() ===
-                    singleType.toLowerCase());
-            // cancel if found example is marked !isDefault
-            if (isMinidomNode(found) &&
-                (found.props['is-default'] === false ||
-                    !found.props['isDefault'] === false)) {
-                return null;
+
+        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 (!context.slots?.camera?.()?.length) {
+            if (props.cameraPosition) {
+              consolidatedCameraProperties.position = props.cameraPosition;
             }
-            // if we have one, save and return
-            if (found) {
-                const createdAsNode = found;
-                autoCreated[singleType] = createdAsNode;
-                return createdAsNode;
+
+            if (props.cameraLook || props.cameraLookAt) {
+              consolidatedCameraProperties.lookAt = props.cameraLook || props.cameraLookAt;
             }
-        }
-        return null;
-    }
-    // GENERIC ENSURE FUNCTION
-    // ====================
-    // Problem:
-    // I want to make sure an object of type Xyz exists in my Lunchbox app.
-    // If it doesn't exist, I want to create it and add it to the root node.
-    //
-    // Solution:
-    // export const ensuredXyz = buildEnsured<Xyz>('Xyz', 'FALLBACK_XYZ')
-    //
-    // Now in other components, you can do both:
-    // import { ensuredXyz }
-    // ensuredXyz.value (...)
-    // and:
-    // ensuredXyz.value = ...
-    const autoCreated = vue.reactive({});
-    const overrides = vue.reactive({});
-    /**
-     * Build a computed ensured value with a getter and setter.
-     * @param pascalCaseTypes List of types this can be. Will autocreate first type if array provided.
-     * @param fallbackUuid Fallback UUID to use.
-     * @param props Props to pass to autocreated element
-     * @returns Computed getter/setter for ensured object.
-     */
-    function buildEnsured(pascalCaseTypes, fallbackUuid, props = {}, callback = null) {
-        // make sure we've got an array
-        if (!Array.isArray(pascalCaseTypes)) {
-            pascalCaseTypes = [pascalCaseTypes];
-        }
-        // add type for autoCreated and overrides
-        for (let singleType of pascalCaseTypes) {
-            if (!autoCreated[singleType]) {
-                autoCreated[singleType] = null;
+
+            if (props.zoom !== undefined) {
+              consolidatedCameraProperties.zoom = props.zoom;
             }
-            if (!overrides[singleType]) {
-                overrides[singleType] = null;
+          } // SCENE
+          // ====================
+          // set background color
+
+
+          if (scene.value?.$el?.instance && props.background) {
+            scene.value.$el.instance.background = new THREE__namespace.Color(props.background);
+          } // MISC PROPERTIES
+          // ====================
+
+
+          if (dpr === -1) {
+            dpr = window.devicePixelRatio;
+          }
+
+          updateGlobals?.({
+            dpr
+          });
+
+          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`
+          !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
+          // 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
+
+
+            const sugar = {
+              shadow: props.shadow
+            };
+
+            if (sugar?.shadow) {
+              normalizedRenderer.shadowMap.enabled = true;
+
+              if (typeof sugar.shadow === 'object') {
+                normalizedRenderer.shadowMap.type = sugar.shadow.type;
+              }
             }
-        }
-        return vue.computed({
-            get() {
-                // try to get existing type
-                const existing = tryGetNodeWithInstanceType(pascalCaseTypes);
-                if (existing)
-                    return existing;
-                // otherwise, create a new node
-                const root = ensureRootNode();
-                const node = createNode({
-                    type: pascalCaseTypes[0],
-                    uuid: fallbackUuid,
-                    props,
-                });
-                root.addChild(node);
-                autoCreated[pascalCaseTypes[0]] = node;
-                if (callback) {
-                    callback(node);
-                }
-                return node;
-            },
-            set(val) {
-                const t = val.type ?? '';
-                const pascalType = t[0].toUpperCase() + t.slice(1);
-                overrides[pascalType] = val;
-            },
-        });
-    }
-    // ENSURE CAMERA
-    // ====================
-    const fallbackCameraUuid = 'FALLBACK_CAMERA';
-    const defaultCamera = buildEnsured(['PerspectiveCamera', 'OrthographicCamera'], fallbackCameraUuid, { args: [45, 0.5625, 1, 1000] });
-    /** Special value to be changed ONLY in `LunchboxWrapper`.
-     * Functions waiting for a Camera need to wait for this to be true.  */
-    const cameraReady = vue.ref(false);
-    const ensuredCamera = vue.computed({
-        get() {
-            return (cameraReady.value ? defaultCamera.value : null);
-        },
-        set(val) {
-            const t = val.type ?? '';
-            const pascalType = t[0].toUpperCase() + t.slice(1);
-            overrides[pascalType] = val;
-        },
-    });
-    // ENSURE RENDERER
-    // ====================
-    const fallbackRendererUuid = 'FALLBACK_RENDERER';
-    const ensuredRenderer = buildEnsured(
-    // TODO: ensure support for css/svg renderers
-    ['WebGLRenderer'], //, 'CSS2DRenderer', 'CSS3DRenderer', 'SVGRenderer'],
-    fallbackRendererUuid, {});
-    /** Special value to be changed ONLY in `LunchboxWrapper`.
-     * Functions waiting for a Renderer need to wait for this to be true.  */
-    const rendererReady = vue.ref(false);
-    const ensureRenderer = vue.computed({
-        get() {
-            return (rendererReady.value ? ensuredRenderer.value : null);
-        },
-        set(val) {
-            const t = val.type ?? '';
-            const pascalType = t[0].toUpperCase() + t.slice(1);
-            overrides[pascalType] = val;
-        },
+          } // START
+          // ====================
+
+
+          if (!app) {
+            throw new Error('error creating app');
+          } // 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,
+              camera: normalizedCamera,
+              renderer: normalizedRenderer,
+              scene: normalizedScene
+            });
+          } // KICK UPDATE
+          // ====================
+
+
+          update({
+            app,
+            camera: normalizedCamera,
+            renderer: normalizedRenderer,
+            scene: normalizedScene,
+            updateSource: props.updateSource
+          });
+        }); // UNMOUNT
+        // ====================
+
+        vue.onBeforeUnmount(() => {
+          cancelUpdate();
+          cancelUpdateSource();
+        }); // RENDER FUNCTION
+        // ====================
+
+        const containerFillStyle = props.sizePolicy === 'container' ? 'static' : 'absolute';
+        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
+
+        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?
+            // const el = await waitFor(() => newVal.el)
+            // console.log(el)
+            // camera.value = el
+            // console.log(newVal.uuid)
+            // updateGlobals?.({ camera: el })
+          }
+        }, {
+          immediate: true
+        }); // RENDER FUNCTION
+        // ====================
+
+        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",
+          "style": fillStyle(containerFillStyle),
+          "ref": container,
+          "data-lunchbox": "true"
+        }, [vue.createVNode("canvas", {
+          "ref": canvas,
+          "class": "lunchbox-canvas",
+          "style": fillStyle(canvasFillStyle),
+          "data-lunchbox": "true"
+        }, null)]), canvas.value?.domElement && vue.createVNode(vue.resolveComponent("webGLRenderer"), vue.mergeProps(props.rendererProperties ?? {}, {
+          "ref": renderer,
+          "args": [{
+            alpha: props.transparent,
+            antialias: true,
+            canvas: canvas.value?.domElement,
+            powerPreference: !!props.r3f ? 'high-performance' : 'default',
+            ...(props.rendererArguments ?? {})
+          }]
+        }), 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
+        camera.value : props.ortho || props.orthographic ? vue.createVNode(vue.resolveComponent("orthographicCamera"), vue.mergeProps({
+          "ref": camera,
+          "args": props.cameraArgs ?? []
+        }, consolidatedCameraProperties), null) : vue.createVNode(vue.resolveComponent("perspectiveCamera"), vue.mergeProps({
+          "ref": camera,
+          "args": props.cameraArgs ?? [props.r3f ? 75 : 45, 0.5625, 1, 1000]
+        }, consolidatedCameraProperties), null), interactables?.value.length && vue.createVNode(LunchboxEventHandlers, null, null)]);
+      }
+
     });
-    // ENSURE SCENE
-    // ====================
-    const fallbackSceneUuid = 'FALLBACK_SCENE';
-    const ensuredScene = buildEnsured('Scene', fallbackSceneUuid);
-    // ENSURE AUTO-RAYCASTER
-    const autoRaycasterUuid = 'AUTO_RAYCASTER';
-    // `unknown` is intentional here - we need to typecast the node since Raycaster isn't an Object3D
-    const ensuredRaycaster = buildEnsured('Raycaster', autoRaycasterUuid, {}, (node) => setupAutoRaycaster(node));
 
-    /** Create a new Lunchbox comment node. */
-    function createCommentNode(options = {}) {
-        const defaults = {
-            text: options.text ?? '',
-        };
-        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,
-            ...options,
-            metaType: 'domMeta',
-        });
-        return node;
-    }
-    /** Create a new Lunchbox text node. */
-    function createTextNode(options = {}) {
-        const defaults = {
-            text: options.text ?? '',
-        };
-        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,
+    // 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
+    // '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
+    'webGLRenderer'
+    /*
+    // List copied from r3f:
+    // https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/three-types.ts
+     // NOT IMPLEMENTED (can be added via Extend - docs.lunchboxjs.com/components/extend/):
+    audioListener: AudioListenerProps
+    positionalAudio: PositionalAudioProps
+     lOD: LODProps
+    skinnedMesh: SkinnedMeshProps
+    skeleton: SkeletonProps
+    bone: BoneProps
+    lineSegments: LineSegmentsProps
+    lineLoop: LineLoopProps
+    // see `audio`
+    // line: LineProps
+    immediateRenderObject: ImmediateRenderObjectProps
+     // primitive
+    primitive: PrimitiveProps
+     // helpers
+    spotLightHelper: SpotLightHelperProps
+    skeletonHelper: SkeletonHelperProps
+    pointLightHelper: PointLightHelperProps
+    hemisphereLightHelper: HemisphereLightHelperProps
+    gridHelper: GridHelperProps
+    polarGridHelper: PolarGridHelperProps
+    directionalLightHelper: DirectionalLightHelperProps
+    boxHelper: BoxHelperProps
+    box3Helper: Box3HelperProps
+    planeHelper: PlaneHelperProps
+    arrowHelper: ArrowHelperProps
+    axesHelper: AxesHelperProps
+      // misc
+    vector2: Vector2Props
+    vector3: Vector3Props
+    vector4: Vector4Props
+    euler: EulerProps
+    matrix3: Matrix3Props
+    matrix4: Matrix4Props
+    quaternion: QuaternionProps
+    bufferAttribute: BufferAttributeProps
+    instancedBufferAttribute: InstancedBufferAttributeProps
+    color: ColorProps
+    fog: FogProps
+    fogExp2: FogExp2Props
+    shape: ShapeProps
+    */
+    ];
+
+    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?.() || []);
         };
-        const node = new MiniDom.RendererStandardNode({
-            ...options,
-            ...defaults,
-            metaType: 'standardMeta',
-        });
-        if (node.type && !isLunchboxRootNode(node) && !node.instance) {
-            // if (node.type.includes('Camera')) {
-            //     console.log(node.type, {
-            //         ...node.props,
-            //         ...props,
-            //     })
-            //     console.trace()
-            // }
-            node.instance = instantiateThreeObject({
-                ...node,
-                props: {
-                    ...node.props,
-                    ...props,
-                },
-            });
-        }
-        // TODO: these manual overrides are a bit brittle - replace?
-        if (node.type?.toLowerCase() === 'scene') {
-            // manually set scene override
-            ensuredScene.value = node;
-        }
-        else if (node.type?.toLowerCase().endsWith('camera')) {
-            ensuredCamera.value = node;
-        }
-        return node;
-    }
+      }
+
+    }); // turn components into registered map
+
+
+    const processed = autoGeneratedComponents.map(createComponent$1).reduce((acc, curr) => {
+      acc[curr.name] = curr;
+      return acc;
+    }, {});
+    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 createComponent = (tag) => vue.defineComponent({
-        inheritAttrs: false,
-        name: tag,
-        render() {
-            return vue.h(tag, this.$attrs, this.$slots?.default?.() || []);
-        },
     });
-    const extend = ({ app, ...targets }) => {
-        Object.keys(targets).forEach((key) => {
-            app.component(key, createComponent(key));
-            catalogue[key] = targets[key];
-        });
+
+    const extend = ({
+      app,
+      ...targets
+    }) => {
+      Object.keys(targets).forEach(key => {
+        app.component(key, createComponent(key));
+        catalogue[key] = targets[key];
+      });
     };
 
     /** Process props into either themselves or the $attached value */
-    function processProp({ node, prop, }) {
-        // return $attachedArray value if needed
-        if (typeof prop === 'string' && prop.startsWith('$attachedArray')) {
-            return node.attachedArray[prop.replace('$attachedArray.', '')];
-        }
-        // return $attached value if needed
-        if (typeof prop === 'string' && prop.startsWith('$attached')) {
-            return node.attached[prop.replace('$attached.', '')];
-        }
-        // otherwise, return plain value
-        return prop;
+    function processProp({
+      node,
+      prop
+    }) {
+      // return $attachedArray value if needed
+      if (typeof prop === 'string' && prop.startsWith('$attachedArray')) {
+        return node.attachedArray[prop.replace('$attachedArray.', '')];
+      } // return $attached value if needed
+
+
+      if (typeof prop === 'string' && prop.startsWith('$attached')) {
+        return node.attached[prop.replace('$attached.', '')];
+      } // otherwise, return plain value
+
+
+      return prop;
     }
-    function processPropAsArray({ node, prop, }) {
-        const isAttachedArray = typeof prop === 'string' && prop.startsWith('$attachedArray');
-        const output = processProp({ node, prop });
-        return Array.isArray(output) && isAttachedArray
-            ? output
-            : [output];
+    function processPropAsArray({
+      node,
+      prop
+    }) {
+      const isAttachedArray = typeof prop === 'string' && prop.startsWith('$attachedArray');
+      const output = processProp({
+        node,
+        prop
+      });
+      return Array.isArray(output) && isAttachedArray ? output : [output];
     }
 
     function instantiateThreeObject(node) {
-        if (!node.type)
-            return null;
-        // what class will we be instantiating?
-        const uppercaseType = node.type[0].toUpperCase() + node.type.slice(1);
-        const targetClass = catalogue[node.type] || THREE__namespace[uppercaseType];
-        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, prop: arg });
-        });
-        let processedArgs = [];
-        argsWrappedInArrays.forEach((arr) => {
-            processedArgs = processedArgs.concat(arr);
+      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
+      // 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,
+          prop: arg
         });
-        const instance = new targetClass(...processedArgs);
-        return instance;
+      });
+      let processedArgs = [];
+      argsWrappedInArrays.forEach(arr => {
+        processedArgs = processedArgs.concat(arr);
+      });
+      const instance = new targetClass(...processedArgs);
+      return instance;
     }
 
     // Unique ID creation requires a high quality random # generator. In the browser we therefore
@@ -1121,9 +877,9 @@
     }
 
     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
@@ -1157,775 +913,1088 @@
       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;
+
+    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);
-            }
-            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
-                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
-            // ====================
-            children = [];
-            addChild(child) {
-                if (child) {
-                    // remove child from any other parents
-                    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 parent
-                this.parentNode = null;
-                // remove as child
-                this.removeAsChildFromAnyParents();
-            }
-            /** 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);
-                        queue.push(...current.children.filter((child) => !traversed.includes(child)));
-                        canContinue = callback(current);
-                    }
-                    else {
-                        canContinue = false;
-                    }
-                }
-            }
-            // INTERNAL FEATURES
-            // ====================
-            minidomType;
-            removeAsChildFromAnyParents() {
-                allNodes.forEach((node) => node.removeChild(this));
-            }
+      class BaseNode {
+        constructor(options = {}, parent) {
+          this.parentNode = options?.parentNode ?? parent ?? null;
+          this.minidomType = 'MinidomBaseNode';
+          this.uuid = options?.uuid ?? v4(); // allNodes.push(this)
         }
-        MiniDom.BaseNode = BaseNode;
-        class RendererBaseNode extends MiniDom.BaseNode {
-            constructor(options = {}, parent) {
-                super(options, parent);
-                this.minidomType = 'RendererNode';
-                this.eventListeners = {};
-                this.eventListenerRemoveFunctions = {};
-                this.name = options.name ?? '';
-                this.metaType = options.metaType ?? 'standardMeta';
-                this.props = options.props ?? [];
-                this.type = options.type ?? '';
-            }
-            eventListeners;
-            eventListenerRemoveFunctions;
-            name;
-            metaType;
-            props;
-            type;
-            drop() {
-                super.drop();
-                // handle remove functions
-                Object.keys(this.eventListenerRemoveFunctions).forEach((key) => {
-                    this.eventListenerRemoveFunctions[key].forEach((func) => func());
-                });
-            }
-        }
-        MiniDom.RendererBaseNode = RendererBaseNode;
+
+        uuid; // DOM FEATURES
         // ====================
-        // SPECIFIC RENDERER NODES BELOW
+
+        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
+
+          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
         // ====================
-        class RendererRootNode extends MiniDom.RendererBaseNode {
-            constructor(options = {}, parent) {
-                super(options, parent);
-                this.domElement =
-                    options.domElement ?? document.createElement('div');
-            }
-            domElement;
-            isLunchboxRootNode = true;
+
+
+        children = [];
+
+        addChild(child) {
+          if (child) {
+            // remove child from any other parents
+            child.removeAsChildFromAnyParents(); // add to this node
+
+            child.parentNode = this;
+            this.insertBefore(child, null);
+          }
+
+          return this;
         }
-        MiniDom.RendererRootNode = RendererRootNode;
-        class RendererCommentNode extends MiniDom.RendererBaseNode {
-            constructor(options = {}, parent) {
-                super(options, parent);
-                this.text = options.text ?? '';
-            }
-            text;
+        /** 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;
         }
-        MiniDom.RendererCommentNode = RendererCommentNode;
-        class RendererDomNode extends MiniDom.RendererBaseNode {
-            constructor(options = {}, parent) {
-                super(options, parent);
-                this.domElement =
-                    options.domElement ?? document.createElement('div');
-            }
-            domElement;
+        /** 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.parentNode = null;
         }
-        MiniDom.RendererDomNode = RendererDomNode;
-        class RendererTextNode extends MiniDom.RendererBaseNode {
-            constructor(options = {}, parent) {
-                super(options, parent);
-                this.text = options.text ?? '';
+        /** 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);
+              queue.push(...current.children.filter(child => !traversed.includes(child)));
+              canContinue = callback(current);
+            } else {
+              canContinue = false;
             }
-            text;
+          }
+        } // INTERNAL FEATURES
+        // ====================
+
+
+        minidomType;
+
+        removeAsChildFromAnyParents() {
+          this.parentNode?.removeChild(this);
         }
-        MiniDom.RendererTextNode = RendererTextNode;
-        class RendererStandardNode extends MiniDom.RendererBaseNode {
-            constructor(options = {}, parent) {
-                super(options, parent);
-                this.attached = options.attached ?? [];
-                this.attachedArray = options.attachedArray ?? {};
-                this.instance = options.instance ?? null;
-            }
-            attached;
-            attachedArray;
-            instance;
+
+      }
+
+      MiniDom.BaseNode = BaseNode;
+
+      class RendererBaseNode extends MiniDom.BaseNode {
+        constructor(options = {}, parent) {
+          super(options, parent);
+          this.minidomType = 'RendererNode';
+          this.eventListeners = {};
+          this.eventListenerRemoveFunctions = {};
+          this.name = options.name ?? '';
+          this.metaType = options.metaType ?? 'standardMeta';
+          this.props = options.props ?? [];
+          this.type = options.type ?? '';
         }
-        MiniDom.RendererStandardNode = RendererStandardNode;
-    })(MiniDom || (MiniDom = {}));
-    function isMinidomNode(item) {
-        return item?.minidomType === 'RendererNode';
-    }
-    const rootNode = new MiniDom.RendererRootNode();
-    rootNode.minidomType = 'RootNode';
 
-    const startCallbacks = [];
-    const onStart = (cb, index = Infinity) => {
-        if (index === Infinity) {
-            startCallbacks.push(cb);
+        eventListeners;
+        eventListenerRemoveFunctions;
+        name;
+        metaType;
+        props;
+        type;
+
+        drop() {
+          super.drop(); // handle remove functions
+
+          Object.keys(this.eventListenerRemoveFunctions).forEach(key => {
+            this.eventListenerRemoveFunctions[key].forEach(func => func());
+          });
         }
-        else {
-            startCallbacks.splice(index, 0, cb);
+
+      }
+
+      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');
         }
-    };
 
-    let frameID;
-    let watchStopHandle;
-    const beforeRender = [];
-    const afterRender = [];
-    const requestUpdate = (opts) => {
-        cancelUpdate();
-        frameID = requestAnimationFrame(() => update({
-            app: opts.app,
-            renderer: ensureRenderer.value?.instance,
-            scene: ensuredScene.value.instance,
-            camera: ensuredCamera.value?.instance,
-            updateSource: opts.updateSource,
-        }));
-    };
-    const update = (opts) => {
-        if (opts.updateSource) {
-            if (!watchStopHandle) {
-                // request next frame only when state changes
-                watchStopHandle = vue.watch(opts.updateSource, () => {
-                    requestUpdate(opts);
-                }, {
-                    deep: true,
-                });
-            }
+        domElement;
+        isLunchboxRootNode = true;
+      }
+
+      MiniDom.RendererRootNode = RendererRootNode;
+
+      class RendererCommentNode extends MiniDom.RendererBaseNode {
+        constructor(options = {}, parent) {
+          super(options, parent);
+          this.text = options.text ?? '';
         }
-        else {
-            // request next frame on a continuous loop
-            requestUpdate(opts);
+
+        text;
+      }
+
+      MiniDom.RendererCommentNode = RendererCommentNode;
+
+      class RendererDomNode extends MiniDom.RendererBaseNode {
+        constructor(options = {}, parent) {
+          super(options, parent);
+          this.domElement = options.domElement ?? document.createElement('div');
         }
-        // prep options
-        const { app, renderer, scene, camera } = opts;
-        // BEFORE RENDER
-        beforeRender.forEach((cb) => {
-            if (cb) {
-                cb(opts);
-            }
-        });
-        // RENDER
-        if (renderer && scene && camera) {
-            if (app.customRender) {
-                app.customRender(opts);
-            }
-            else {
-                renderer.render(vue.toRaw(scene), vue.toRaw(camera));
-            }
+
+        domElement;
+      }
+
+      MiniDom.RendererDomNode = RendererDomNode;
+
+      class RendererTextNode extends MiniDom.RendererBaseNode {
+        constructor(options = {}, parent) {
+          super(options, parent);
+          this.text = options.text ?? '';
         }
-        // AFTER RENDER
-        afterRender.forEach((cb) => {
-            if (cb) {
-                cb(opts);
-            }
-        });
+
+        text;
+      }
+
+      MiniDom.RendererTextNode = RendererTextNode;
+
+      class RendererStandardNode extends MiniDom.RendererBaseNode {
+        constructor(options = {}, parent) {
+          super(options, parent);
+          this.attached = options.attached ?? [];
+          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';
+    }
+
+    const globalsInjectionKey = Symbol();
+    const updateGlobalsInjectionKey = Symbol();
+    const setCustomRenderKey = Symbol();
+    const clearCustomRenderKey = Symbol();
+    const beforeRenderKey = Symbol();
+    const onBeforeRenderKey = Symbol();
+    const offBeforeRenderKey = Symbol();
+    const afterRenderKey = Symbol();
+    const onAfterRenderKey = Symbol();
+    const offAfterRenderKey = Symbol();
+    const frameIdKey = Symbol();
+    const watchStopHandleKey = Symbol();
+    const appRootNodeKey = Symbol();
+    const appKey = Symbol();
+    const appRenderersKey = Symbol();
+    const appSceneKey = Symbol();
+    const appCameraKey = Symbol();
+    const lunchboxInteractables = Symbol();
+    const startCallbackKey = Symbol();
+
+    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,
+        scene: opts.scene,
+        camera: opts.camera,
+        updateSource: opts.updateSource
+      }));
+    };
+
+    const update = opts => {
+      if (opts.updateSource) {
+        if (!opts.app.config.globalProperties.lunchbox.watchStopHandle) {
+          // request next frame only when state changes
+          opts.app.config.globalProperties.lunchbox.watchStopHandle = vue.watch(opts.updateSource, () => {
+            requestUpdate(opts);
+          }, {
+            deep: true
+          });
+        }
+      } else {
+        // request next frame on a continuous loop
+        requestUpdate(opts);
+      } // prep options
+
+
+      const {
+        app,
+        renderer,
+        scene
+      } = opts; // BEFORE RENDER
+
+      app.config.globalProperties.lunchbox.beforeRender.forEach(cb => {
+        cb?.(opts);
+      }); // 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)
+          );
+        }
+      } // AFTER RENDER
+
+
+      app.config.globalProperties.lunchbox.afterRender.forEach(cb => {
+        cb?.(opts);
+      });
+    }; // before render
+    // ====================
+
+    /** Obtain callback methods for `onBeforeRender` and `offBeforeRender`. Usually used internally by Lunchbox. */
+
+    const useBeforeRender = () => {
+      return {
+        onBeforeRender: vue.inject(onBeforeRenderKey),
+        offBeforeRender: vue.inject(offBeforeRenderKey)
+      };
     };
+    /** Run a function before every render.
+     *
+     * 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) => {
-        if (index === Infinity) {
-            beforeRender.push(cb);
-        }
-        else {
-            beforeRender.splice(index, 0, cb);
-        }
+      useBeforeRender().onBeforeRender?.(cb, index);
     };
-    const offBeforeRender = (cb) => {
-        if (isFinite(cb)) {
-            beforeRender.splice(cb, 1);
-        }
-        else {
-            const idx = beforeRender.findIndex((v) => v == cb);
-            beforeRender.splice(idx, 1);
-        }
+    /** Remove a function from the `beforeRender` callback list. Useful for tearing down functions added
+     * by `onBeforeRender`.
+     */
+
+    const offBeforeRender = cb => {
+      useBeforeRender().offBeforeRender?.(cb);
+    }; // after render
+    // ====================
+
+    /** Obtain callback methods for `onAfterRender` and `offAfterRender`. Usually used internally by Lunchbox. */
+
+    const useAfterRender = () => {
+      return {
+        onAfterRender: vue.inject(onBeforeRenderKey),
+        offAfterRender: vue.inject(offBeforeRenderKey)
+      };
     };
+    /** Run a function after every render.
+     *
+     * 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) => {
-        if (index === Infinity) {
-            afterRender.push(cb);
-        }
-        else {
-            afterRender.splice(index, 0, cb);
-        }
+      useBeforeRender().onBeforeRender?.(cb, index);
     };
-    const offAfterRender = (cb) => {
-        if (isFinite(cb)) {
-            afterRender.splice(cb, 1);
-        }
-        else {
-            const idx = afterRender.findIndex((v) => v == cb);
-            afterRender.splice(idx, 1);
-        }
+    /** 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 () => {
+        if (frameId !== undefined) cancelAnimationFrame(frameId);
+      };
+    };
+    /** Cancel the current update frame. Usually used internally by Lunchbox. */
+
     const cancelUpdate = () => {
-        if (frameID)
-            cancelAnimationFrame(frameID);
+      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 = () => {
-        if (watchStopHandle)
-            watchStopHandle();
+      useCancelUpdateSource()?.();
     };
 
     /** Update a single prop on a given node. */
-    function updateObjectProp({ node, key, value, }) {
-        // handle and return early if prop is an event
-        // (event list from react-three-fiber)
-        if (isEventKey(key)) {
-            return addEventListener({ node, key, value });
-        }
-        // 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
-        if (typeof value === 'string' && value.startsWith('$attached')) {
-            const attachedName = value.replace('$attached.', '');
-            value = lodash.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
-        let liveProperty;
-        for (let i = 0; i < nestedPropertiesToCheck.length && !liveProperty; i++) {
-            const nestedProperty = nestedPropertiesToCheck[i];
-            const fullPath = [nestedProperty, finalKey].filter(Boolean).join('.');
-            liveProperty = liveProperty = lodash.get(target, fullPath);
-        }
-        // change property
-        // first, save as array in case we need to spread it
-        if (liveProperty && lodash.isNumber(value) && liveProperty.setScalar) {
-            // if value is a number and the property has a `setScalar` method, use that
-            liveProperty.setScalar(value);
-        }
-        else if (liveProperty && liveProperty.set) {
-            // if property has `set` method, use that (https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#shortcuts)
-            const nextValueAsArray = Array.isArray(value) ? value : [value];
-            target[finalKey].set(...nextValueAsArray);
-        }
-        else if (typeof liveProperty === 'function') {
-            // some function properties are set rather than called, so let's handle them
-            if (finalKey.toLowerCase() === 'onbeforerender' ||
-                finalKey.toLowerCase() === 'onafterrender') {
-                target[finalKey] = value;
-            }
-            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
-                liveProperty.bind(node.instance)(...value);
-            }
-            // 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 (lodash.get(target, finalKey, undefined) !== undefined) {
-            // blank strings evaluate to `true`
-            // <mesh castShadow receiveShadow /> will work the same as
-            // <mesh :castShadow="true" :receiveShadow="true" />
-            lodash.set(target, finalKey, value === '' ? true : value);
-        }
-        else {
-            // 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
-        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;
-            }
+
+    function updateObjectProp({
+      node,
+      key,
+      interactables,
+      value
+    }) {
+      // handle and return early if prop is an event
+      // (event list from react-three-fiber)
+      if (isEventKey(key)) {
+        return addEventListener({
+          node,
+          key,
+          interactables,
+          value
+        });
+      } // 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
+
+      if (typeof value === 'string' && value.startsWith('$attached')) {
+        const attachedName = value.replace('$attached.', '');
+        value = lodash.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
+
+      let liveProperty;
+
+      for (let i = 0; i < nestedPropertiesToCheck.length && !liveProperty; i++) {
+        const nestedProperty = nestedPropertiesToCheck[i];
+        const fullPath = [nestedProperty, finalKey].filter(Boolean).join('.');
+        liveProperty = liveProperty = lodash.get(target, fullPath);
+      } // change property
+      // first, save as array in case we need to spread it
+
+
+      if (liveProperty && lodash.isNumber(value) && liveProperty.setScalar) {
+        // if value is a number and the property has a `setScalar` method, use that
+        liveProperty.setScalar(value);
+      } else if (liveProperty && liveProperty.set) {
+        // if property has `set` method, use that (https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#shortcuts)
+        const nextValueAsArray = Array.isArray(value) ? value : [value];
+        target[finalKey].set(...nextValueAsArray);
+      } else if (typeof liveProperty === 'function') {
+        // some function properties are set rather than called, so let's handle them
+        if (finalKey.toLowerCase() === 'onbeforerender' || finalKey.toLowerCase() === 'onafterrender') {
+          target[finalKey] = value;
+        } 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
+
+
+          liveProperty.bind(node.instance)(...value);
+        } // 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 (lodash.get(target, finalKey, undefined) !== undefined) {
+        // blank strings evaluate to `true`
+        // <mesh castShadow receiveShadow /> will work the same as
+        // <mesh :castShadow="true" :receiveShadow="true" />
+        lodash.set(target, finalKey, value === '' ? true : value);
+      } else {
+        // 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
+
+
+      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;
+      }
+
+      return node;
     }
     const propertyShortcuts = {
-        x: 'position.x',
-        y: 'position.y',
-        z: 'position.z',
+      x: 'position.x',
+      y: 'position.y',
+      z: 'position.z'
     };
     const nestedPropertiesToCheck = ['', 'parameters'];
     /** props that Lunchbox intercepts and prevents passing to created instances */
-    const internalLunchboxVueKeys = [
-        'args',
-        'attach',
-        'attachArray',
-        'is.default',
-        'isDefault',
-        'key',
-        'onAdded',
-        // 'onReady',
-        'ref',
-        'src',
-    ];
+
+    const internalLunchboxVueKeys = ['args', 'attach', 'attachArray', 'is.default', 'isDefault', 'key', 'onAdded', // 'onReady',
+    'ref', 'src'];
 
     const autoAttach = ['geometry', 'material'];
     const createElement = (type, isSVG, isCustomizedBuiltin, vnodeProps) => {
-        const options = { type };
-        if (vnodeProps) {
-            options.props = vnodeProps;
-        }
-        // handle dom node
-        const isDomNode = isLunchboxDomComponent(type);
-        if (isDomNode) {
-            const node = createDomNode(options);
-            return node;
-        }
-        // handle standard node
-        const node = createNode(options);
-        // autoattach
-        autoAttach.forEach((key) => {
-            if (type.toLowerCase().endsWith(key)) {
-                node.props.attach = key;
-            }
-        });
-        // TODO: array autoattach
+      const options = {
+        type,
+        props: vnodeProps
+      }; // handle dom node
+
+      const isDomNode = isLunchboxDomComponent(options);
+
+      if (isDomNode) {
+        const node = createDomNode(options);
         return node;
+      } // handle standard node
+
+
+      const node = createNode(options); // autoattach
+
+      autoAttach.forEach(key => {
+        if (type.toLowerCase().endsWith(key)) {
+          node.props.attach = key;
+        }
+      }); // TODO: array autoattach
+
+      return node;
     };
 
     const insert = (child, parent, anchor) => {
-        // add to parent tree node if we have one
-        let effectiveParent = parent ?? ensureRootNode();
-        effectiveParent.insertBefore(child, anchor);
-        // handle comment & text nodes
-        if (child.metaType === 'commentMeta' || child.metaType === 'textMeta') {
-            return;
+      if (!parent) {
+        throw new Error('missing parent');
+      } // add to parent tree node if we have one
+      // let effectiveParent = parent ?? ensureRootNode()
+
+
+      parent.insertBefore(child, anchor); // handle comment & text nodes
+
+      if (child.metaType === 'commentMeta' || child.metaType === 'textMeta') {
+        return;
+      } // handle dom element
+
+
+      if (isLunchboxDomComponent(child)) {
+        if (isLunchboxDomComponent(parent) || isLunchboxRootNode(parent)) {
+          parent.domElement.appendChild(child.domElement);
         }
-        // handle dom element
-        if (isLunchboxDomComponent(child)) {
-            if (isLunchboxDomComponent(parent) || isLunchboxRootNode(parent)) {
-                parent.domElement.appendChild(child.domElement);
+      } // 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];
+              break;
             }
+          }
         }
-        // handle standard nodes
-        if (isLunchboxStandardNode(child)) {
-            // let effectiveParent = parent
-            let effectiveParentNodeType = effectiveParent.metaType;
-            if (effectiveParentNodeType === 'textMeta' ||
-                effectiveParentNodeType === 'commentMeta') {
-                const path = effectiveParent.getPath();
-                for (let i = path.length - 1; i >= 0; i--) {
-                    if (path[i].metaType !== 'textMeta' &&
-                        path[i].metaType !== 'commentMeta') {
-                        effectiveParent = path[i];
-                        break;
-                    }
-                }
-            }
-            // add to scene if parent is the wrapper node
-            if (child.metaType === 'standardMeta' &&
-                child.type !== 'scene' &&
-                isLunchboxRootNode(effectiveParent)) {
-                // ensure scene exists
-                const sceneNode = ensuredScene.value;
-                if (sceneNode.instance && child) {
-                    sceneNode.addChild(child);
-                }
-                if (child.instance &&
-                    child.instance.isObject3D &&
-                    sceneNode.instance) {
-                    if (sceneNode !== child) {
-                        sceneNode.instance.add(child.instance);
-                    }
-                }
-            }
-            // add to hierarchy otherwise
-            else if (isLunchboxStandardNode(child) &&
-                child.instance?.isObject3D &&
-                isLunchboxStandardNode(effectiveParent) &&
-                effectiveParent.instance?.isObject3D) {
-                effectiveParent.instance?.add?.(child.instance);
-            }
-            // 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
-                if (isUsingLoaderSugar) {
-                    runLoader(child, parent);
-                }
-                else {
-                    // update attached normally
-                    attachToParentInstance(child, parent, child.props.attach);
-                }
-            }
-            // fire onAdded event
-            if (child.props?.onAdded) {
-                child.props.onAdded({
-                    instance: child.instance,
-                });
-            }
+
+        if (isLunchboxStandardNode(child) && child.instance?.isObject3D && isLunchboxStandardNode(parent) && parent.instance?.isObject3D) {
+          parent.instance?.add?.(child.instance);
+        } // 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
+
+          if (isUsingLoaderSugar) {
+            runLoader(child, parent);
+          } else {
+            // update attached normally
+            attachToParentInstance(child, parent, child.props.attach);
+          }
+        } // fire onAdded event
+
+
+        if (child.props?.onAdded) {
+          child.props.onAdded({
+            instance: child.instance
+          });
         }
+      }
     };
+
     function runLoader(child, parent) {
-        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
-        if (!child.props.attach)
-            return;
-        if (child.type?.toLowerCase() === 'textureloader') {
-            // if this is a texture loader, immediately pass
-            // load function to parent attachment
-            const textureLoader = loader;
-            const inProgressTexture = textureLoader.load(child.props.src);
-            attachToParentInstance(child, parent, child.props.attach, inProgressTexture);
-        }
-        else {
-            // use a standard callback-based loader
-            loader.load(child.props.src, (loadedData) => {
-                attachToParentInstance(child, parent, child.props.attach, loadedData);
-            }, null, (err) => {
-                throw new Error(err);
-            });
-        }
+      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
+
+      if (!child.props.attach) return;
+
+      if (child.type?.toLowerCase() === 'textureloader') {
+        // if this is a texture loader, immediately pass
+        // load function to parent attachment
+        const textureLoader = loader;
+        const inProgressTexture = textureLoader.load(child.props.src);
+        attachToParentInstance(child, parent, child.props.attach, inProgressTexture);
+      } else {
+        // use a standard callback-based loader
+        loader.load(child.props.src, loadedData => {
+          attachToParentInstance(child, parent, child.props.attach, loadedData);
+        }, null, err => {
+          throw new Error(err);
+        });
+      }
     }
+
     function attachToParentInstance(child, parent, key, value) {
-        const finalValueToAttach = value ?? child.instance;
-        const parentInstanceAsAny = parent.instance;
-        if (child.props.attach === key) {
-            parent.attached = {
-                [key]: finalValueToAttach,
-                ...(parent.attached || {}),
-            };
-            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
-            parentInstanceAsAny[key] = [parentInstanceAsAny[key]];
+      const finalValueToAttach = value ?? child.instance;
+      const parentInstanceAsAny = parent.instance;
+
+      if (child.props.attach === key) {
+        parent.attached = {
+          [key]: finalValueToAttach,
+          ...(parent.attached || {})
+        };
+        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
+
+        parentInstanceAsAny[key] = [parentInstanceAsAny[key]];
+      }
     }
 
-    const remove = (node) => {
-        if (!node)
-            return;
-        const overrideKeys = Object.keys(overrides);
-        // prep subtree
-        const subtree = [];
-        node.walk((descendant) => {
-            subtree.push(descendant);
-            return true;
-        });
-        // clean up subtree
-        subtree.forEach((n) => {
-            const overrideKey = overrideKeys.find((key) => overrides[key]?.uuid === n.uuid);
-            // if this node is an override, remove it from the overrides list
-            if (overrideKey) {
-                overrides[overrideKey] = null;
-            }
-            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,
-                // 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
-            n.drop();
-            // remove Lunchbox node from main list
-            const idx = allNodes.findIndex((v) => v.uuid === n.uuid);
-            if (idx !== -1) {
-                allNodes.splice(idx, 1);
-            }
-        });
+    const remove = node => {
+      if (!node) return; // prep subtree
+
+      const subtree = [];
+      node.walk(descendant => {
+        subtree.push(descendant);
+        return true;
+      }); // 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,
+          // 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
+
+
+        n.drop();
+      });
     };
 
     /*
         Elements are `create`d from the outside in, then `insert`ed from the inside out.
     */
-    const nodeOps = {
+
+    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 nodeOps = {
         createElement,
+
         createText(text) {
-            return createTextNode({ text });
+          return createTextNode({
+            text
+          });
         },
+
         createComment(text) {
-            return createCommentNode({ text });
+          return createCommentNode({
+            text
+          });
         },
+
         insert,
+
         nextSibling(node) {
-            const result = node.nextSibling;
-            // console.log('found', result)
-            if (!result)
-                return null;
-            return result;
+          const result = node.nextSibling;
+          if (!result) return null;
+          return result;
         },
+
         parentNode(node) {
-            const result = node.parentNode;
-            if (!result)
-                return null;
-            return result;
+          const result = node.parentNode;
+          if (!result) return null;
+          return result;
         },
+
         patchProp(node, key, prevValue, nextValue) {
-            if (isLunchboxDomComponent(node)) {
-                // handle DOM node
-                if (key === 'style') {
-                    // special handling for style
-                    Object.keys(nextValue).forEach((k) => {
-                        node.domElement.style[k] = nextValue[k];
-                    });
-                }
-                else {
-                    node.domElement.setAttribute(key, nextValue);
-                }
-                return;
+          if (isLunchboxDomComponent(node)) {
+            // handle DOM node
+            if (key === 'style') {
+              // special handling for style
+              Object.keys(nextValue).forEach(k => {
+                node.domElement.style[k] = nextValue[k];
+              });
+            } else {
+              node.domElement.setAttribute(key, nextValue);
             }
-            // ignore if root node, or Lunchbox internal prop
-            if (isLunchboxRootNode(node) || key.startsWith('$')) {
-                return;
-            }
-            // otherwise, update prop
-            updateObjectProp({ node: node, key, value: nextValue });
+
+            return;
+          } // ignore if root node, or Lunchbox internal prop
+
+
+          if (isLunchboxRootNode(node) || key.startsWith('$')) {
+            return;
+          } // otherwise, update prop
+
+
+          updateObjectProp({
+            node: node,
+            key,
+            interactables,
+            value: nextValue
+          });
         },
+
         remove,
-        setElementText() {
-            // noop
-        },
-        setText() {
-            // noop
+
+        setElementText() {// noop
         },
-    };
 
-    /** Useful globals. */
-    const globals = {
-        dpr: vue.ref(1),
-        inputActive,
-        mousePos,
+        setText() {// noop
+        }
+
+      };
+      return {
+        nodeOps,
+        interactables
+      };
     };
-    /** The current camera. Often easier to use `useCamera` instead of this. */
-    const camera = vue.computed(() => ensuredCamera.value?.instance ?? null);
+
+    /** The current camera as a computed value. */
+
+    const useCamera = () => vue.inject(appCameraKey);
     /** Run a function using the current camera when it's present. */
-    function useCamera(callback) {
-        return vue.watch(camera, (newVal) => {
-            if (!newVal)
-                return;
-            callback(newVal);
-        }, { immediate: true });
-    }
-    /** The current renderer. Often easier to use `useRenderer` instead of this. */
-    const renderer = vue.computed(() => ensureRenderer.value?.instance ?? null);
+
+    const onCameraReady = cb => {
+      const stopWatch = vue.watch(useCamera(), newVal => {
+        if (newVal) {
+          cb(newVal);
+          stopWatch();
+        }
+      }, {
+        immediate: true
+      });
+    };
+    /** The current renderer as a computed value. */
+
+    const useRenderer = () => vue.inject(appRenderersKey);
     /** Run a function using the current renderer when it's present. */
-    function useRenderer(callback) {
-        return vue.watch(renderer, (newVal) => {
-            if (!newVal)
-                return;
-            callback(newVal);
-        }, { immediate: true });
-    }
-    /** The current scene. Often easier to use `useScene` instead of this. */
-    const scene = vue.computed(() => ensuredScene.value.instance);
+
+    const onRendererReady = cb => {
+      const stopWatch = vue.watch(useRenderer(), newVal => {
+        if (newVal) {
+          cb(newVal);
+          stopWatch();
+        }
+      }, {
+        immediate: true
+      });
+    };
+    /** The current scene as a computed value. */
+
+    const useScene = () => vue.inject(appSceneKey);
     /** Run a function using the current scene when it's present. */
-    function useScene(callback) {
-        return vue.watch(scene, (newVal) => {
-            if (!newVal)
-                return;
-            callback(newVal);
-        }, { immediate: true });
-    }
-    // CUSTOM RENDER SUPPORT
+
+    const onSceneReady = cb => {
+      const stopWatch = vue.watch(useScene(), newVal => {
+        if (newVal) {
+          cb(newVal);
+          stopWatch();
+        }
+      }, {
+        immediate: true
+      });
+    }; // CUSTOM RENDER SUPPORT
     // ====================
-    let app = null;
-    let queuedCustomRenderFunction = null;
+
     /** 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) => {
-        if (app)
-            app.setCustomRender(render);
-        else
-            queuedCustomRenderFunction = render;
+
+    const setCustomRender = render => {
+      useCustomRender()?.setCustomRender?.(render);
     };
-    /** Clear the active app's custom render function. */
+    /** Clear the active app's custom render function.
+     *
+     * Invokes immediately - use `useCustomRender().clearCustomRender`
+     * if you need to call somewhere outside of `setup`.
+     */
+
     const clearCustomRender = () => {
-        if (app)
-            app.clearCustomRender();
-        else
-            queuedCustomRenderFunction = null;
+      useCustomRender()?.clearCustomRender?.();
     };
-    // CREATE APP
+    /** 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.
+     *
+     * ```js
+     * // in setup():
+     * const updateGlobals = useUpdateGlobals()
+     *
+     * // ...later, to update the device pixel resolution...
+     * 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 {
+        callbacks?.splice(index, 0, cb);
+      }
+    };
+    /** Obtain a list of interactable objects (registered via onClick, onHover, etc events). Usually used internally by Lunchbox. */
+
+    const useLunchboxInteractables = () => vue.inject(lunchboxInteractables); // CREATE APP
     // ====================
-    const createApp = (root) => {
-        app = vue.createRenderer(nodeOps).createApp(root);
-        // register all components
-        Object.keys(components).forEach((key) => {
-            app?.component(key, components[key]);
-        });
-        // 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 rootNode = ensureRootNode({
-                domElement,
-                isLunchboxRootNode: true,
-                name: 'root',
-                metaType: 'rootMeta',
-                type: 'root',
-                uuid: rootUuid,
-            });
-            app.rootNode = rootNode;
-            const mounted = mount(rootNode, ...args);
-            return mounted;
-        };
-        // embed .extend function
-        app.extend = (targets) => {
-            extend({ app: app, ...targets });
-            return app;
-        };
-        // prep for custom render support
-        app.setCustomRender = (newRender) => {
-            app.customRender = newRender;
-        };
-        // add queued custom render if we have one
-        if (queuedCustomRenderFunction) {
-            app.setCustomRender(queuedCustomRenderFunction);
-            queuedCustomRenderFunction = null;
+
+    const createApp = root => {
+      const {
+        nodeOps,
+        interactables
+      } = createNodeOps();
+      const app = vue.createRenderer(nodeOps).createApp(root); // provide Lunchbox interaction handlers flag (modified when user references events via
+      // @click, etc)
+
+      app.provide(lunchboxInteractables, interactables); // register all components
+      // ====================
+
+      Object.keys(components).forEach(key => {
+        app?.component(key, components[key]);
+      }); // provide custom renderer functions
+      // ====================
+
+      app.provide(setCustomRenderKey, render => {
+        app.setCustomRender(render);
+      });
+      app.provide(clearCustomRenderKey, () => {
+        app.clearCustomRender();
+      }); // before render
+      // ====================
+
+      const beforeRender = [];
+      app.provide(beforeRenderKey, beforeRender);
+      app.provide(onBeforeRenderKey, (cb, index = Infinity) => {
+        if (index === Infinity) {
+          beforeRender.push(cb);
+        } else {
+          beforeRender.splice(index, 0, cb);
         }
-        // add custom render removal
-        app.clearCustomRender = () => {
-            app.customRender = null;
-        };
-        // done
+      });
+      app.provide(offBeforeRenderKey, cb => {
+        if (isFinite(cb)) {
+          beforeRender.splice(cb, 1);
+        } else {
+          const idx = beforeRender.findIndex(v => v == cb);
+
+          if (idx !== -1) {
+            beforeRender.splice(idx, 1);
+          }
+        }
+      }); // after render
+      // ====================
+
+      const afterRender = [];
+      app.provide(afterRenderKey, afterRender);
+      app.provide(onAfterRenderKey, (cb, index = Infinity) => {
+        if (index === Infinity) {
+          afterRender.push(cb);
+        } else {
+          afterRender.splice(index, 0, cb);
+        }
+      });
+      app.provide(offAfterRenderKey, cb => {
+        if (isFinite(cb)) {
+          afterRender.splice(cb, 1);
+        } else {
+          const idx = afterRender.findIndex(v => v == cb);
+
+          if (idx !== -1) {
+            afterRender.splice(idx, 1);
+          }
+        }
+      }); // save app-level components
+      // ====================
+
+      app.config.globalProperties.lunchbox = vue.reactive({
+        afterRender,
+        beforeRender,
+        camera: null,
+        dpr: 1,
+        frameId: -1,
+        renderer: null,
+        scene: null,
+        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
+
+          app.config.globalProperties.lunchbox[typedKey] = newGlobals[typedKey];
+        });
+      }); // frame ID (used for update functions)
+      // ====================
+
+      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
+      // ====================
+
+      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 rootNode = new exports.MiniDom.RendererRootNode({
+          domElement,
+          isLunchboxRootNode: true,
+          name: 'root',
+          metaType: 'rootMeta',
+          type: 'root',
+          uuid: 'LUNCHBOX_ROOT'
+        });
+        app.rootNode = rootNode;
+        app.provide(appRootNodeKey, rootNode);
+        const mounted = mount(rootNode, ...args);
+        return mounted;
+      }; // embed .extend function
+      // ====================
+
+
+      app.extend = targets => {
+        extend({
+          app: app,
+          ...targets
+        });
         return app;
+      }; // start callback functions
+      // ====================
+
+
+      const startCallbacks = [];
+      app.provide(startCallbackKey, startCallbacks); // prep for custom render support
+      // ====================
+
+      app.setCustomRender = newRender => {
+        if (app) {
+          app.customRender = newRender;
+        }
+      }; // add custom render removal
+
+
+      app.clearCustomRender = () => {
+        if (app) {
+          app.customRender = null;
+        }
+      }; // 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
+
+      return app;
     };
 
-    exports.camera = camera;
+    exports.addEventListener = addEventListener;
+    exports.afterRenderKey = afterRenderKey;
+    exports.appCameraKey = appCameraKey;
+    exports.appKey = appKey;
+    exports.appRenderersKey = appRenderersKey;
+    exports.appRootNodeKey = appRootNodeKey;
+    exports.appSceneKey = appSceneKey;
+    exports.beforeRenderKey = beforeRenderKey;
+    exports.cancelUpdate = cancelUpdate;
+    exports.cancelUpdateSource = cancelUpdateSource;
     exports.clearCustomRender = clearCustomRender;
+    exports.clearCustomRenderKey = clearCustomRenderKey;
     exports.createApp = createApp;
+    exports.createCommentNode = createCommentNode;
+    exports.createDomNode = createDomNode;
+    exports.createNode = createNode;
+    exports.createTextNode = createTextNode;
+    exports.extend = extend;
     exports.find = find;
-    exports.globals = globals;
+    exports.frameIdKey = frameIdKey;
+    exports.globalsInjectionKey = globalsInjectionKey;
+    exports.instantiateThreeObject = instantiateThreeObject;
+    exports.isMinidomNode = isMinidomNode;
+    exports.lunchboxInteractables = lunchboxInteractables;
+    exports.nestedPropertiesToCheck = nestedPropertiesToCheck;
     exports.offAfterRender = offAfterRender;
+    exports.offAfterRenderKey = offAfterRenderKey;
     exports.offBeforeRender = offBeforeRender;
+    exports.offBeforeRenderKey = offBeforeRenderKey;
     exports.onAfterRender = onAfterRender;
+    exports.onAfterRenderKey = onAfterRenderKey;
     exports.onBeforeRender = onBeforeRender;
+    exports.onBeforeRenderKey = onBeforeRenderKey;
+    exports.onCameraReady = onCameraReady;
+    exports.onRendererReady = onRendererReady;
+    exports.onSceneReady = onSceneReady;
     exports.onStart = onStart;
-    exports.renderer = renderer;
-    exports.scene = scene;
     exports.setCustomRender = setCustomRender;
+    exports.setCustomRenderKey = setCustomRenderKey;
+    exports.startCallbackKey = startCallbackKey;
+    exports.update = update;
+    exports.updateGlobals = updateGlobals;
+    exports.updateGlobalsInjectionKey = updateGlobalsInjectionKey;
+    exports.updateObjectProp = updateObjectProp;
+    exports.useAfterRender = useAfterRender;
+    exports.useApp = useApp;
+    exports.useBeforeRender = useBeforeRender;
     exports.useCamera = useCamera;
+    exports.useCancelUpdate = useCancelUpdate;
+    exports.useCancelUpdateSource = useCancelUpdateSource;
+    exports.useCustomRender = useCustomRender;
+    exports.useGlobals = useGlobals;
+    exports.useLunchboxInteractables = useLunchboxInteractables;
     exports.useRenderer = useRenderer;
     exports.useScene = useScene;
+    exports.useStartCallbacks = useStartCallbacks;
+    exports.useUpdateGlobals = useUpdateGlobals;
+    exports.watchStopHandleKey = watchStopHandleKey;
 
     Object.defineProperty(exports, '__esModule', { value: true });