lunchboxjs 0.1.4016 → 0.2.1001-beta.0

package/dist/lunchboxjs.module.js

@@ -1,1046 +1,858 @@
-import { toRaw, ref, onMounted, getCurrentInstance, onBeforeUnmount, h, defineComponent, isRef, isVNode, watch, reactive, computed, createRenderer } from 'vue';
+import { isRef, isVNode, inject, ref, watch, toRaw, defineComponent, createVNode, resolveComponent, reactive, onMounted, onBeforeUnmount, Fragment, mergeProps, h, createRenderer, computed } from 'vue';
 import * as THREE from 'three';
-import { set, get, isNumber } from 'lodash';
-
-// this needs to be in a separate file to ensure it's created immediately
-const allNodes = [];
-
-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(toRaw(scene), toRaw(camera.instance));
-    }
-};
+import { get, isNumber, set } from 'lodash';
 
-const prepCanvas = (container, canvasElement, onBeforeUnmount) => {
-    const containerElement = container.value?.domElement;
-    if (!containerElement)
-        throw new Error('missing container');
-    // save...
-    // ...and size element
-    resizeCanvas();
-    // attach listeners
-    const observer = new ResizeObserver(([canvas]) => {
-        resizeCanvas();
-    });
-    // window.addEventListener('resize', resizeCanvas)
-    if (containerElement) {
-        observer.observe(containerElement);
-    }
-    // cleanup
-    onBeforeUnmount(() => {
-        if (canvasElement) {
-            observer.unobserve(canvasElement);
-        }
-    });
-};
+function find(target) {
+  target = isRef(target) ? target.value : target; // handle standard lunchbox node
 
-// 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%',
-    };
-};
-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,
-        shadow: [Boolean, Object],
-        transparent: Boolean,
-        zoom: Number,
-        updateSource: Object,
-    },
-    setup(props, context) {
-        const canvas = ref();
-        const useFallbackRenderer = ref(true);
-        const dpr = ref(props.dpr ?? -1);
-        const container = ref();
-        let renderer;
-        let camera;
-        let scene;
-        // https://threejs.org/docs/index.html#manual/en/introduction/Color-management
-        if (props.r3f && THREE?.ColorManagement) {
-            THREE.ColorManagement.legacyMode = false;
-        }
-        // MOUNT
-        // ====================
-        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.sRGBEncoding;
-                        rendererAsWebGlRenderer.value.instance.toneMapping =
-                            THREE.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) => {
-                        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.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, onBeforeUnmount);
-            }
-            else {
-                throw new Error('missing renderer');
-            }
-            // CALLBACK PREP
-            // ====================
-            const app = 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
-        // ====================
-        onBeforeUnmount(() => {
-            cancelUpdate();
-            cancelUpdateSource();
-        });
-        // RENDER FUNCTION
-        // ====================
-        return () => [
-            context.slots.default?.() ?? null,
-            h('div', {
-                style: fillStyle('absolute'),
-                ref: container,
-            }, [
-                useFallbackRenderer.value
-                    ? h('canvas', {
-                        style: fillStyle('fixed'),
-                        class: 'lunchbox-canvas',
-                        ref: canvas,
-                    })
-                    : null,
-            ]),
-        ];
-    },
-};
+  if (isLunchboxStandardNode(target)) {
+    return target?.instance;
+  } // handle component
 
-// 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
-*/
-];
 
-const catalogue = {};
+  if (isLunchboxComponent(target)) {
+    return target?.$el?.instance;
+  } // handle vnode
 
-const lunchboxDomComponentNames = ['canvas', 'div', 'LunchboxWrapper'];
-// component creation utility
-const createComponent$1 = (tag) => defineComponent({
-    inheritAttrs: false,
-    name: tag,
-    setup(props, context) {
-        return () => {
-            return h(tag, context.attrs, context.slots?.default?.() || []);
-        };
-    },
-});
-// turn components into registered map
-const processed = autoGeneratedComponents
-    .map(createComponent$1)
-    .reduce((acc, curr) => {
-    acc[curr.name] = curr;
-    return acc;
-}, {});
-const components = {
-    ...processed,
-    Lunchbox: LunchboxWrapper,
-};
 
-function find(target) {
-    target = 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 (isVNode(target)) {
-        return target.el?.instance;
-    }
-    return null;
+  if (isVNode(target)) {
+    return target.el?.instance;
+  }
+
+  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;
 };
 
+/** 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
+  };
+  const node = new MiniDom.RendererStandardNode({ ...options,
+    ...defaults,
+    metaType: 'standardMeta'
+  });
+
+  if (node.type && !isLunchboxRootNode(node) && !node.instance) {
+    node.instance = instantiateThreeObject({ ...node,
+      props: { ...node.props,
+        ...props
+      }
+    });
+  }
+
+  return node;
+}
+
+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 startCallbackKey = Symbol();
+
+const ensuredCamera = () => inject(appCameraKey); // ENSURE RENDERER
+// ====================
+
+const ensureRenderer = () => inject(appRenderersKey); // ENSURE SCENE
+// ====================
+
+const ensuredScene = () => inject(appSceneKey);
+
 const interactables = [];
-const addInteractable = (target) => {
-    interactables.push(target);
+const addInteractable = target => {
+  interactables.push(target);
 };
-const removeInteractable = (target) => {
-    const idx = interactables.indexOf(target);
-    if (idx !== -1) {
-        interactables.splice(idx, 1);
-    }
+const removeInteractable = target => {
+  const idx = interactables.indexOf(target);
+
+  if (idx !== -1) {
+    interactables.splice(idx, 1);
+  }
 };
 
 /** Mouse is down, touch is pressed, etc */
+
 const inputActive = ref(false);
 
-/** 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));
-        }
-    }
-    // register click, pointerdown, pointerup
-    if (key === 'onClick' || key === 'onPointerDown' || key === 'onPointerUp') {
-        const stop = 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;
-}
-const interactionsRequiringRaycaster = [
-    'onClick',
-    'onPointerUp',
-    'onPointerDown',
-    'onPointerOver',
-    'onPointerOut',
-    'onPointerEnter',
-    'onPointerLeave',
-    'onPointerMove',
-    // 'onPointerMissed',
-];
+// let mouseDownListener: (event: MouseEvent) => void
+// let mouseUpListener: (event: MouseEvent) => void
 
-let mouseMoveListener;
-let mouseDownListener;
-let mouseUpListener;
-const mousePos = 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 = 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
-        watch(() => [inputActive.value, mousePos.value.x, mousePos.value.y], () => {
-            if (frameID$1)
-                cancelAnimationFrame(frameID$1);
-            frameID$1 = requestAnimationFrame(() => {
-                autoRaycasterBeforeRender();
-            });
-        });
-        // mark complete
-        autoRaycasterEventsInitialized = true;
-        // cancel setup watcher
-        if (stopWatcher) {
-            stopWatcher();
-        }
-    }, { immediate: true });
-};
+const mousePos = ref({
+  x: Infinity,
+  y: Infinity
+}); // let autoRaycasterEventsInitialized = false
+// let frameID: number
+// export const setupAutoRaycaster = (node: Lunch.Node<THREE.Raycaster>) => {
+//     const instance = node.instance
+//     if (!instance) return
+//     // TODO: inject doesn't work here. replace this raycaster with a component so we can
+//     // `inject` in `setup`?
+//     const appLevelGlobals = { dpr: window.devicePixelRatio } //useGlobals()
+//     // add mouse events once renderer is ready
+//     let stopWatcher: WatchStopHandle | null = null
+//     stopWatcher = 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) /
+//                     appLevelGlobals.dpr
+//                 const screenHeight =
+//                     (renderer.instance!.domElement.height ?? 1) /
+//                     appLevelGlobals.dpr
+//                 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
+//             watch(
+//                 () => [inputActive.value, mousePos.value.x, mousePos.value.y],
+//                 () => {
+//                     if (frameID) cancelAnimationFrame(frameID)
+//                     frameID = requestAnimationFrame(() => {
+//                         autoRaycasterBeforeRender()
+//                     })
+//                 }
+//             )
+//             // 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);
-        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);
-        if (leaveIdx !== -1) {
-            leaveValues.splice(leaveIdx, 1);
-        }
-    });
-    const leaving = leaveValues.map((intersection) => {
-        return {
-            element: interactables.find((interactable) => interactable.instance?.uuid === intersection.object.uuid),
-            intersection,
-        };
-    });
-    // new interactions
-    entering.forEach(({ element, intersection }) => {
-        fireEventsFromIntersections({
-            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);
-};
+
+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 as any as THREE.Object3D)
+//     )
+//     let enterValues: Array<Intersection<THREE.Object3D>> = [],
+//         sameValues: Array<Intersection<THREE.Object3D>> = [],
+//         leaveValues: Array<Intersection<THREE.Object3D>> = [],
+//         entering: Array<{
+//             element: Lunch.Node
+//             intersection: Intersection<THREE.Object3D>
+//         }> = [],
+//         staying: Array<{
+//             element: Lunch.Node
+//             intersection: Intersection<THREE.Object3D>
+//         }> = []
+//     // 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) {
+//             // new intersection
+//             enterValues.push(intersection)
+//             const found = interactables.find(
+//                 (v) => v.instance?.uuid === intersection.object.uuid
+//             )
+//             if (found) {
+//                 entering.push({ element: found, intersection })
+//             }
+//         } else {
+//             // existing intersection
+//             sameValues.push(intersection)
+//             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
+//         )
+//         if (leaveIdx !== -1) {
+//             leaveValues.splice(leaveIdx, 1)
+//         }
+//     })
+//     const leaving: Array<{
+//         element: Lunch.Node
+//         intersection: Intersection<THREE.Object3D>
+//     }> = leaveValues.map((intersection) => {
+//         return {
+//             element: interactables.find(
+//                 (interactable) =>
+//                     interactable.instance?.uuid === intersection.object.uuid
+//             ) as any as Lunch.Node,
+//             intersection,
+//         }
+//     })
+//     // new interactions
+//     entering.forEach(({ element, intersection }) => {
+//         fireEventsFromIntersections({
+//             element,
+//             eventKeys: ['onPointerEnter'],
+//             intersection,
+//         })
+//     })
+//     // unchanged interactions
+//     staying.forEach(({ element, intersection }) => {
+//         const eventKeys: Array<Lunch.EventKey> = [
+//             'onPointerOver',
+//             'onPointerMove',
+//         ]
+//         fireEventsFromIntersections({ element, eventKeys, intersection })
+//     })
+//     // exited interactions
+//     leaving.forEach(({ element, intersection }) => {
+//         const eventKeys: Array<Lunch.EventKey> = [
+//             'onPointerLeave',
+//             'onPointerOut',
+//         ]
+//         fireEventsFromIntersections({ element, eventKeys, intersection })
+//     })
+//     currentIntersections = ([] as any).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 });
+// const fireEventsFromIntersections = ({
+//     element,
+//     eventKeys,
+//     intersection,
+// }: {
+//     element: Lunch.Node
+//     eventKeys: Array<Lunch.EventKey>
+//     intersection: Intersection<THREE.Object3D>
+// }) => {
+//     if (!element) return
+//     eventKeys.forEach((eventKey) => {
+//         if (element.eventListeners[eventKey]) {
+//             element.eventListeners[eventKey].forEach((cb) => {
+//                 cb({ intersection })
+//             })
+//         }
+//     })
+// }
+
+/** 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?
+    // const v = ensuredRaycaster.value
+    if (node.instance && !interactables.includes(node)) {
+      addInteractable(node);
+      node.eventListenerRemoveFunctions[key].push(() => removeInteractable(node));
+    }
+  } // register click, pointerdown, pointerup
+
+
+  if (key === 'onClick' || key === 'onPointerDown' || key === 'onPointerUp') {
+    const stop = 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);
+  }
 
-// ENSURE ROOT
-// ====================
-const rootUuid = 'LUNCHBOX_ROOT';
-let lunchboxRootNode;
-function ensureRootNode(options = {}) {
-    if (!lunchboxRootNode) {
-        lunchboxRootNode = new MiniDom.RendererRootNode(options);
-    }
-    return lunchboxRootNode;
+  return node;
 }
-// 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 interactionsRequiringRaycaster = ['onClick', 'onPointerUp', 'onPointerDown', 'onPointerOver', 'onPointerOut', 'onPointerEnter', 'onPointerLeave', 'onPointerMove' // 'onPointerMissed',
+];
+
+const resizeCanvas = (camera, renderer, scene, width, height) => {
+  // ignore if no element
+  if (!renderer?.domElement || !scene || !camera) return;
+  width = width ?? window.innerWidth;
+  height = height ?? window.innerHeight; // update camera
+
+  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(toRaw(scene), 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);
+      }
     }
-    // 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 LunchboxScene = defineComponent({
+  name: 'LunchboxScene',
+
+  setup(props, {
+    slots
+  }) {
+    return () => createVNode(resolveComponent("scene"), null, {
+      default: () => [slots.default?.()]
+    });
+  }
+
+});
+
+/** 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 = 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 = ref();
+    let dpr = props.dpr ?? -1;
+    const container = ref();
+    const renderer = ref();
+    const camera = ref();
+    const scene = ref();
+    const globals = useGlobals();
+    const updateGlobals = useUpdateGlobals();
+    const app = useApp();
+    const consolidatedCameraProperties = reactive({});
+    const startCallbacks = useStartCallbacks(); // https://threejs.org/docs/index.html#manual/en/introduction/Color-management
+
+    if (props.r3f && THREE?.ColorManagement) {
+      THREE.ColorManagement.legacyMode = false;
+    } // MOUNT
+    // ====================
+
+
+    onMounted(async () => {
+      // canvas needs to exist (or user needs to handle it on their own)
+      if (!canvas.value && !context.slots?.renderer?.()?.length) throw new Error('missing canvas'); // no camera provided, so let's create one
+
+      if (!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 = reactive({});
-const overrides = 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.Color(props.background);
+      } // MISC PROPERTIES
+      // ====================
+
+
+      if (dpr === -1) {
+        dpr = window.devicePixelRatio;
+      }
+
+      updateGlobals?.({
+        dpr
+      });
+      console.log(1);
+
+      while (!renderer.value?.$el?.instance && // TODO: remove `as any`
+      !renderer.value?.component?.ctx.$el?.instance) {
+        console.log(2);
+        await new Promise(r => requestAnimationFrame(r));
+      }
+
+      console.log(3);
+
+      while (!scene.value?.$el?.instance && // TODO: remove `as any`
+      !scene.value?.component?.ctx.$el?.instance) {
+        console.log(4);
+        await new Promise(r => requestAnimationFrame(r));
+      }
+
+      console.log(5);
+      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.sRGBEncoding;
+          normalizedRenderer.toneMapping = THREE.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 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 = ref(false);
-const ensuredCamera = 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 = ref(false);
-const ensureRenderer = 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
+    // ====================
+
+    onBeforeUnmount(() => {
+      cancelUpdate();
+      cancelUpdateSource();
+    }); // RENDER FUNCTION
+    // ====================
+
+    const containerFillStyle = props.sizePolicy === 'container' ? 'static' : 'absolute';
+    const canvasFillStyle = props.sizePolicy === 'container' ? 'static' : 'fixed';
+    return () => createVNode(Fragment, null, [context.slots?.renderer?.()?.length ? // TODO: remove `as any` cast
+    renderer.value = context.slots?.renderer?.()[0] : // ...otherwise, add canvas...
+    createVNode(Fragment, null, [createVNode("div", {
+      "class": "lunchbox-container",
+      "style": fillStyle(containerFillStyle),
+      "ref": container,
+      "data-lunchbox": "true"
+    }, [createVNode("canvas", {
+      "ref": canvas,
+      "class": "lunchbox-canvas",
+      "style": fillStyle(canvasFillStyle),
+      "data-lunchbox": "true"
+    }, null)]), canvas.value?.domElement && createVNode(resolveComponent("webGLRenderer"), 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
+    createVNode(LunchboxScene, {
+      "ref": scene
+    }, {
+      default: () => [context.slots?.default?.()]
+    }), context.slots?.camera?.()?.length ? // TODO: remove `any` cast
+    camera.value = context.slots?.camera?.()[0] : props.ortho || props.orthographic ? createVNode(resolveComponent("orthographicCamera"), mergeProps({
+      "ref": camera,
+      "args": props.cameraArgs ?? []
+    }, consolidatedCameraProperties), null) : createVNode(resolveComponent("perspectiveCamera"), mergeProps({
+      "ref": camera,
+      "args": props.cameraArgs ?? [props.r3f ? 75 : 45, 0.5625, 1, 1000]
+    }, consolidatedCameraProperties), 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', // 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
+*/
+];
+
+const catalogue = {};
+
+const createComponent$1 = tag => defineComponent({
+  inheritAttrs: false,
+  name: tag,
+
+  setup(props, context) {
+    return () => {
+      return 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 => defineComponent({
+  inheritAttrs: false,
+  name: tag,
+
+  render() {
+    return h(tag, this.$attrs, this.$slots?.default?.() || []);
+  }
 
-const createComponent = (tag) => defineComponent({
-    inheritAttrs: false,
-    name: tag,
-    render() {
-        return 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[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[uppercaseType] || catalogue[translatedType] || THREE[translatedType];
+  if (!targetClass) throw `${uppercaseType} is not part of the THREE namespace! Did you forget to extend? import {extend} from 'lunchbox'; extend({app, YourComponent, ...})`; // what args have we been provided?
+
+  const args = node.props.args ?? []; // replace $attached values with their instances
+  // 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
@@ -1081,9 +893,9 @@ for (var i = 0; i < 256; ++i) {
 }
 
 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
@@ -1117,746 +929,963 @@ function v4(options, buf, offset) {
   return stringify(rnds);
 }
 
-// MiniDom recreates DOM node properties and methods.
 // Since Vue 3 is a DOM-first framework, many of its nodeOps depend on
 // properties and methods the DOM naturally contains. MiniDom recreates
 // those properties (as well as a few from the tree-model npm package)
 // to make a DOM-like but otherwise agnostic hierarchy structure.
+
 var MiniDom;
+
 (function (MiniDom) {
-    class BaseNode {
-        constructor(options = {}, parent) {
-            this.parentNode = options?.parentNode ?? parent ?? null;
-            this.minidomType = 'MinidomBaseNode';
-            this.uuid = options?.uuid ?? v4();
-            allNodes.push(this);
-        }
-        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;
-    // ====================
-    // SPECIFIC RENDERER NODES BELOW
+
+    uuid; // DOM FEATURES
     // ====================
-    class RendererRootNode extends MiniDom.RendererBaseNode {
-        constructor(options = {}, parent) {
-            super(options, parent);
-            this.domElement =
-                options.domElement ?? document.createElement('div');
-        }
-        domElement;
-        isLunchboxRootNode = true;
-    }
-    MiniDom.RendererRootNode = RendererRootNode;
-    class RendererCommentNode extends MiniDom.RendererBaseNode {
-        constructor(options = {}, parent) {
-            super(options, parent);
-            this.text = options.text ?? '';
-        }
-        text;
-    }
-    MiniDom.RendererCommentNode = RendererCommentNode;
-    class RendererDomNode extends MiniDom.RendererBaseNode {
-        constructor(options = {}, parent) {
-            super(options, parent);
-            this.domElement =
-                options.domElement ?? document.createElement('div');
-        }
-        domElement;
-    }
-    MiniDom.RendererDomNode = RendererDomNode;
-    class RendererTextNode extends MiniDom.RendererBaseNode {
-        constructor(options = {}, parent) {
-            super(options, parent);
-            this.text = options.text ?? '';
-        }
-        text;
-    }
-    MiniDom.RendererTextNode = RendererTextNode;
-    class RendererStandardNode extends MiniDom.RendererBaseNode {
-        constructor(options = {}, parent) {
-            super(options, parent);
-            this.attached = options.attached ?? [];
-            this.attachedArray = options.attachedArray ?? {};
-            this.instance = options.instance ?? null;
-        }
-        attached;
-        attachedArray;
-        instance;
-    }
-    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);
+    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;
     }
-    else {
-        startCallbacks.splice(index, 0, cb);
+
+    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);
+      }
     }
-};
 
-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 = watch(opts.updateSource, () => {
-                requestUpdate(opts);
-            }, {
-                deep: true,
-            });
-        }
+    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;
     }
-    else {
-        // request next frame on a continuous loop
-        requestUpdate(opts);
+    /** 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;
     }
-    // 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(toRaw(scene), toRaw(camera));
-        }
+    /** 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;
     }
-    // AFTER RENDER
-    afterRender.forEach((cb) => {
-        if (cb) {
-            cb(opts);
+    /** 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;
         }
-    });
-};
-const onBeforeRender = (cb, index = Infinity) => {
-    if (index === Infinity) {
-        beforeRender.push(cb);
+      }
+    } // INTERNAL FEATURES
+    // ====================
+
+
+    minidomType;
+
+    removeAsChildFromAnyParents() {
+      this.parentNode?.removeChild(this);
     }
-    else {
-        beforeRender.splice(index, 0, cb);
+
+  }
+
+  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 ?? '';
     }
-};
-const offBeforeRender = (cb) => {
-    if (isFinite(cb)) {
-        beforeRender.splice(cb, 1);
+
+    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 {
-        const idx = beforeRender.findIndex((v) => v == cb);
-        beforeRender.splice(idx, 1);
+
+  }
+
+  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');
     }
-};
-const onAfterRender = (cb, index = Infinity) => {
-    if (index === Infinity) {
-        afterRender.push(cb);
+
+    domElement;
+    isLunchboxRootNode = true;
+  }
+
+  MiniDom.RendererRootNode = RendererRootNode;
+
+  class RendererCommentNode extends MiniDom.RendererBaseNode {
+    constructor(options = {}, parent) {
+      super(options, parent);
+      this.text = options.text ?? '';
     }
-    else {
-        afterRender.splice(index, 0, cb);
+
+    text;
+  }
+
+  MiniDom.RendererCommentNode = RendererCommentNode;
+
+  class RendererDomNode extends MiniDom.RendererBaseNode {
+    constructor(options = {}, parent) {
+      super(options, parent);
+      this.domElement = options.domElement ?? document.createElement('div');
     }
-};
-const offAfterRender = (cb) => {
-    if (isFinite(cb)) {
-        afterRender.splice(cb, 1);
+
+    domElement;
+  }
+
+  MiniDom.RendererDomNode = RendererDomNode;
+
+  class RendererTextNode extends MiniDom.RendererBaseNode {
+    constructor(options = {}, parent) {
+      super(options, parent);
+      this.text = options.text ?? '';
     }
-    else {
-        const idx = afterRender.findIndex((v) => v == cb);
-        afterRender.splice(idx, 1);
+
+    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;
+})(MiniDom || (MiniDom = {}));
+
+function isMinidomNode(item) {
+  return item?.minidomType === 'RendererNode';
+}
+
+// let watchStopHandle: WatchStopHandle
+// export const beforeRender = [] as Lunch.UpdateCallback[]
+// export const afterRender = [] as Lunch.UpdateCallback[]
+
+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 = watch(opts.updateSource, () => {
+        requestUpdate(opts);
+      }, {
+        deep: true
+      });
+    }
+  } else {
+    // request next frame on a continuous loop
+    requestUpdate(opts);
+  } // prep options
+
+
+  const {
+    app,
+    renderer,
+    scene,
+    camera
+  } = opts; // BEFORE RENDER
+
+  app.config.globalProperties.lunchbox.beforeRender.forEach(cb => {
+    cb?.(opts);
+  }); // RENDER
+
+  if (renderer && scene && camera) {
+    if (app.customRender) {
+      app.customRender(opts);
+    } else {
+      renderer.render(toRaw(scene), // opts.app.config.globalProperties.lunchbox.camera!
+      toRaw(camera));
+    }
+  } // AFTER RENDER
+
+
+  app.config.globalProperties.lunchbox.afterRender.forEach(cb => {
+    cb?.(opts);
+  });
+}; // before render
+// ====================
+// TODO: document
+
+const useBeforeRender = () => {
+  return {
+    onBeforeRender: inject(onBeforeRenderKey),
+    offBeforeRender: inject(offBeforeRenderKey)
+  };
+}; // TODO: document
+
+const onBeforeRender = (cb, index = Infinity) => {
+  useBeforeRender().onBeforeRender?.(cb, index);
+}; // TODO: document
+
+const offBeforeRender = cb => {
+  useBeforeRender().offBeforeRender?.(cb);
+}; // after render
+// ====================
+// TODO: document
+
+const useAfterRender = () => {
+  return {
+    onAfterRender: inject(onBeforeRenderKey),
+    offAfterRender: inject(offBeforeRenderKey)
+  };
+}; // TODO: document
+
+const onAfterRender = (cb, index = Infinity) => {
+  useBeforeRender().onBeforeRender?.(cb, index);
+}; // TODO: document
+
+const offAfterRender = cb => {
+  useBeforeRender().offBeforeRender?.(cb);
+}; // export const onAfterRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
+//     if (index === Infinity) {
+//         afterRender.push(cb)
+//     } else {
+//         afterRender.splice(index, 0, cb)
+//     }
+// }
+// export const offAfterRender = (cb: Lunch.UpdateCallback | number) => {
+//     if (isFinite(cb as number)) {
+//         afterRender.splice(cb as number, 1)
+//     } else {
+//         const idx = afterRender.findIndex((v) => v == cb)
+//         afterRender.splice(idx, 1)
+//     }
+// }
+// TODO: document
+
+const useCancelUpdate = () => {
+  const frameId = inject(frameIdKey);
+  return () => {
+    if (frameId !== undefined) cancelAnimationFrame(frameId);
+  };
+}; // TODO: document
+
 const cancelUpdate = () => {
-    if (frameID)
-        cancelAnimationFrame(frameID);
-};
+  useCancelUpdate()?.();
+}; // TODO: document
+
+const useCancelUpdateSource = () => {
+  const cancel = inject(watchStopHandleKey);
+  return () => cancel?.();
+}; // TODO: document
+
 const cancelUpdateSource = () => {
-    if (watchStopHandle)
-        watchStopHandle();
+  useCancelUpdateSource()?.();
 };
 
+/** Update the given node so all of its props are current. */
+
+function updateAllObjectProps({
+  node
+}) {
+  // set props
+  const props = node.props || {};
+  let output = node;
+  Object.keys(props).forEach(key => {
+    output = updateObjectProp({
+      node,
+      key,
+      value: props[key]
+    });
+  });
+  return output;
+}
 /** 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 = 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 = get(target, fullPath);
-    }
-    // change property
-    if (liveProperty && 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') {
-        // 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 (get(target, finalKey, undefined) !== undefined) {
-        // blank strings evaluate to `true`
-        // <mesh castShadow receiveShadow /> will work the same as
-        // <mesh :castShadow="true" :receiveShadow="true" />
-        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,
+  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 = 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 = get(target, fullPath);
+  } // change property
+
+
+  if (liveProperty && 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') {
+    // 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 (get(target, finalKey, undefined) !== undefined) {
+    // blank strings evaluate to `true`
+    // <mesh castShadow receiveShadow /> will work the same as
+    // <mesh :castShadow="true" :receiveShadow="true" />
+    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 = {
-    createElement,
-    createText(text) {
-        return createTextNode({ text });
-    },
-    createComment(text) {
-        return createCommentNode({ text });
-    },
-    insert,
-    nextSibling(node) {
-        const result = node.nextSibling;
-        // console.log('found', result)
-        if (!result)
-            return null;
-        return result;
-    },
-    parentNode(node) {
-        const result = node.parentNode;
-        if (!result)
-            return null;
-        return result;
-    },
-    patchProp(node, key, prevValue, nextValue) {
-        if (isLunchboxDomComponent(node)) {
-            // handle DOM node
-            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;
-        }
-        // ignore if root node, or Lunchbox internal prop
-        if (isLunchboxRootNode(node) || key.startsWith('$')) {
-            return;
-        }
-        // otherwise, update prop
-        updateObjectProp({ node: node, key, value: nextValue });
-    },
-    remove,
-    setElementText() {
-        // noop
-    },
-    setText() {
-        // noop
-    },
-};
+  createElement,
+
+  createText(text) {
+    return createTextNode({
+      text
+    });
+  },
+
+  createComment(text) {
+    return createCommentNode({
+      text
+    });
+  },
+
+  insert,
+
+  nextSibling(node) {
+    const result = node.nextSibling; // console.log('found', result)
+
+    if (!result) return null;
+    return result;
+  },
+
+  parentNode(node) {
+    const result = node.parentNode;
+    if (!result) return null;
+    return result;
+  },
+
+  patchProp(node, key, prevValue, nextValue) {
+    if (isLunchboxDomComponent(node)) {
+      // handle DOM node
+      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;
+    } // ignore if root node, or Lunchbox internal prop
+
+
+    if (isLunchboxRootNode(node) || key.startsWith('$')) {
+      return;
+    } // otherwise, update prop
+
+
+    updateObjectProp({
+      node: node,
+      key,
+      value: nextValue
+    });
+  },
+
+  remove,
+
+  setElementText() {// noop
+  },
+
+  setText() {// noop
+  }
 
-/** Useful globals. */
-const globals = {
-    dpr: ref(1),
-    inputActive,
-    mousePos,
 };
+
 /** The current camera. Often easier to use `useCamera` instead of this. */
-const camera = computed(() => ensuredCamera.value?.instance ?? null);
-/** Run a function using the current camera when it's present. */
-function useCamera(callback) {
-    return watch(camera, (newVal) => {
-        if (!newVal)
-            return;
-        callback(newVal);
-    }, { immediate: true });
-}
-/** The current renderer. Often easier to use `useRenderer` instead of this. */
-const renderer = computed(() => ensureRenderer.value?.instance ?? null);
+// TODO: update docs
+
+const camera = ensuredCamera; // TODO: update docs
+
+const useCamera = () => ensuredCamera();
+/** The current renderer as a computed value. Often easier to use `useRenderer` instead of this. */
+
+const renderer = ensureRenderer;
 /** Run a function using the current renderer when it's present. */
-function useRenderer(callback) {
-    return watch(renderer, (newVal) => {
-        if (!newVal)
-            return;
-        callback(newVal);
-    }, { immediate: true });
-}
+
+const useRenderer = () => ensureRenderer();
 /** The current scene. Often easier to use `useScene` instead of this. */
-const scene = computed(() => ensuredScene.value.instance);
+// TODO: update docs
+
+const scene = ensuredScene;
 /** Run a function using the current scene when it's present. */
+// TODO: update docs
+
 function useScene(callback) {
-    return watch(scene, (newVal) => {
-        if (!newVal)
-            return;
-        callback(newVal);
-    }, { immediate: true });
-}
-// CUSTOM RENDER SUPPORT
+  return watch(scene, newVal => {
+    if (!newVal) return;
+    callback(newVal.value);
+  }, {
+    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?.();
+};
+/** Provides `setCustomRender` and `clearCustomRender` functions to be called in a non-`setup` context. */
+
+const useCustomRender = () => {
+  return {
+    /** Set a custom render function, overriding the Lunchbox app's default render function.
+     * Changing this requires the user to manually render their scene. */
+    setCustomRender: inject(setCustomRenderKey),
+
+    /** Clear the active app's custom render function. */
+    clearCustomRender: inject(clearCustomRenderKey)
+  };
 };
-// CREATE APP
+/** Use app-level globals. */
+
+const useGlobals = () => 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 = () => inject(updateGlobalsInjectionKey);
+/** Update app-level globals.
+ *
+ * Invokes immediately - use `useUpdateGlobals`
+ * if you need to call somewhere outside of `setup`.
+ */
+
+const updateGlobals = newValue => {
+  useUpdateGlobals()?.(newValue);
+}; // TODO: document
+
+const useRootNode = () => inject(appRootNodeKey); // TODO: document
+
+const useApp = () => inject(appKey); // TODO: document
+
+const useStartCallbacks = () => inject(startCallbackKey); //[] as Lunch.UpdateCallback[]
+// TODO: document
+
+const onStart = (cb, index = Infinity) => {
+  const callbacks = useStartCallbacks();
+
+  if (index === Infinity) {
+    callbacks?.push(cb);
+  } else {
+    callbacks?.splice(index, 0, cb);
+  }
+}; // CREATE APP
 // ====================
-const createApp = (root) => {
-    app = 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 app = createRenderer(nodeOps).createApp(root); // 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 = 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 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, computed(() => app.config.globalProperties.lunchbox.renderer));
+  app.provide(appSceneKey, computed(() => app.config.globalProperties.lunchbox.scene));
+  app.provide(appCameraKey, computed(() => app.config.globalProperties.lunchbox.camera)); // done
+
+  return app;
 };
 
-export { camera, clearCustomRender, createApp, find, globals, lunchboxRootNode as lunchboxTree, offAfterRender, offBeforeRender, onAfterRender, onBeforeRender, onStart, renderer, scene, setCustomRender, useCamera, useRenderer, useScene };
+export { MiniDom, addEventListener, addInteractable, afterRenderKey, appCameraKey, appKey, appRenderersKey, appRootNodeKey, appSceneKey, beforeRenderKey, camera, cancelUpdate, cancelUpdateSource, clearCustomRender, clearCustomRenderKey, createApp, createCommentNode, createDomNode, createNode, createTextNode, currentIntersections, ensureRenderer, ensuredCamera, ensuredScene, extend, find, frameIdKey, globalsInjectionKey, inputActive, instantiateThreeObject, interactables, isMinidomNode, mousePos, nestedPropertiesToCheck, offAfterRender, offAfterRenderKey, offBeforeRender, offBeforeRenderKey, onAfterRender, onAfterRenderKey, onBeforeRender, onBeforeRenderKey, onStart, removeInteractable, renderer, scene, setCustomRender, setCustomRenderKey, startCallbackKey, update, updateAllObjectProps, updateGlobals, updateGlobalsInjectionKey, updateObjectProp, useAfterRender, useApp, useBeforeRender, useCamera, useCancelUpdate, useCancelUpdateSource, useCustomRender, useGlobals, useRenderer, useRootNode, useScene, useStartCallbacks, useUpdateGlobals, watchStopHandleKey };