lunchboxjs 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/lunchboxjs.module.js

@@ -1,1925 +0,0 @@
-import { isRef, isVNode, toRaw, defineComponent, createVNode, resolveComponent, ref, onBeforeUnmount, watch, reactive, onMounted, computed, Fragment, mergeProps, h, inject, getCurrentInstance, onUnmounted, createRenderer } from 'vue';
-import * as THREE from 'three';
-
-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;
-}
-
-const get = (obj, path, defValue) => {
-  // If path is not defined or it has false value
-  if (!path) return undefined;
-  // Check if path is string or array. Regex : ensure that we do not have '.' and brackets.
-  // Regex explained: https://regexr.com/58j0k
-  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
-  // Find value
-  const result = pathArray?.reduce((prevObj, key) => prevObj && prevObj[key], obj);
-  // If found value is undefined return default value; otherwise return the value
-  return result === undefined ? defValue : result;
-};
-
-const buildIsNumber = () => {
-  /**
-   * lodash (Custom Build) <https://lodash.com/>
-   * Build: `lodash modularize exports="npm" -o ./`
-   * Copyright 2012-2016 The Dojo Foundation <http://dojofoundation.org/>
-   * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
-   * Copyright 2009-2016 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
-   * Available under MIT license <https://lodash.com/license>
-   */
-  /** `Object#toString` result references. */
-  const numberTag = '[object Number]';
-  /** Used for built-in method references. */
-  const objectProto = Object.prototype;
-  /**
-   * Used to resolve the
-   * [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
-   * of values.
-   */
-  const objectToString = objectProto.toString;
-  /**
-   * Checks if `value` is object-like. A value is object-like if it's not `null`
-   * and has a `typeof` result of "object".
-   *
-   * @static
-   * @memberOf _
-   * @since 4.0.0
-   * @category Lang
-   * @param {*} value The value to check.
-   * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
-   * @example
-   *
-   * _.isObjectLike({});
-   * // => true
-   *
-   * _.isObjectLike([1, 2, 3]);
-   * // => true
-   *
-   * _.isObjectLike(_.noop);
-   * // => false
-   *
-   * _.isObjectLike(null);
-   * // => false
-   */
-  function isObjectLike(value) {
-    return !!value && typeof value == 'object';
-  }
-  /**
-   * Checks if `value` is classified as a `Number` primitive or object.
-   *
-   * **Note:** To exclude `Infinity`, `-Infinity`, and `NaN`, which are
-   * classified as numbers, use the `_.isFinite` method.
-   *
-   * @static
-   * @memberOf _
-   * @since 0.1.0
-   * @category Lang
-   * @param {*} value The value to check.
-   * @returns {boolean} Returns `true` if `value` is a number, else `false`.
-   * @example
-   *
-   * _.isNumber(3);
-   * // => true
-   *
-   * _.isNumber(Number.MIN_VALUE);
-   * // => true
-   *
-   * _.isNumber(Infinity);
-   * // => true
-   *
-   * _.isNumber('3');
-   * // => false
-   */
-  const output = function isNumber(value) {
-    return typeof value == 'number' || isObjectLike(value) && objectToString.call(value) == numberTag;
-  };
-  return output;
-};
-const isNumber = buildIsNumber();
-
-const set = (obj, path, value) => {
-  // Regex explained: https://regexr.com/58j0k
-  const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
-  pathArray?.reduce((acc, key, i) => {
-    if (acc[key] === undefined) acc[key] = {};
-    if (i === pathArray.length - 1) acc[key] = value;
-    return acc[key];
-  }, obj);
-};
-
-// MAKE SURE THESE MATCH VALUES IN types.EventKey
-/** Type check on whether target is a Lunchbox.EventKey */
-const isEventKey = target => {
-  return ['onClick', 'onContextMenu', 'onDoubleClick', 'onPointerUp', 'onPointerDown', 'onPointerOver', 'onPointerOut', 'onPointerEnter', 'onPointerLeave', 'onPointerMove',
-  // 'onPointerMissed',
-  // 'onUpdate',
-  'onWheel'].includes(target);
-};
-const isLunchboxComponent = node => {
-  return node?.$el && node?.$el?.hasOwnProperty?.('instance');
-};
-const isLunchboxDomComponent = node => {
-  if (node?.metaType === 'domMeta') return true;
-  return node?.props?.['data-lunchbox'];
-};
-const isLunchboxStandardNode = node => {
-  return node?.metaType === 'standardMeta';
-};
-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;
-}
-
-/** 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,
-  interactables,
-  value
-}) {
-  // create new records for this key if needed
-  if (!node.eventListeners[key]) {
-    node.eventListeners[key] = [];
-  }
-  if (!node.eventListenerRemoveFunctions[key]) {
-    node.eventListenerRemoveFunctions[key] = [];
-  }
-  // add event listener
-  node.eventListeners[key].push(value);
-  // if we need it, let's get/create the main raycaster
-  if (interactionsRequiringRaycaster.includes(key)) {
-    if (node.instance && !interactables.value.includes(node)) {
-      // add to interactables
-      interactables.value.push(node);
-      node.eventListenerRemoveFunctions[key].push(() => {
-        // remove from interactables
-        const idx = interactables.value.indexOf(node);
-        if (idx !== -1) {
-          interactables.value.splice(idx, 1);
-        }
-      });
-    }
-  }
-  return node;
-}
-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);
-      }
-    }
-  };
-};
-
-const LunchboxScene = defineComponent({
-  name: 'LunchboxScene',
-  setup(props, {
-    slots
-  }) {
-    return () => createVNode(resolveComponent("scene"), null, {
-      default: () => [slots.default?.()]
-    });
-  }
-});
-
-const LunchboxEventHandlers = defineComponent({
-  name: 'LunchboxEventHandlers',
-  setup() {
-    const interactables = useLunchboxInteractables();
-    const globals = useGlobals();
-    const mousePos = ref({
-      x: Infinity,
-      y: Infinity
-    });
-    const inputActive = ref(false);
-    let currentIntersections = [];
-    const raycaster = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3(0, 0, -1));
-    const fireEventsFromIntersections = ({
-      element,
-      eventKeys,
-      intersection
-    }) => {
-      if (!element) return;
-      eventKeys.forEach(eventKey => {
-        if (element.eventListeners[eventKey]) {
-          element.eventListeners[eventKey].forEach(cb => {
-            cb({
-              intersection
-            });
-          });
-        }
-      });
-    };
-    // add mouse listener to renderer DOM element when the element is ready
-    onRendererReady(v => {
-      if (!v?.domElement) return;
-      // we have a DOM element, so let's add mouse listeners
-      const {
-        domElement
-      } = v;
-      const mouseMoveListener = evt => {
-        const screenWidth = (domElement.width ?? 1) / globals.dpr;
-        const screenHeight = (domElement.height ?? 1) / globals.dpr;
-        mousePos.value.x = evt.offsetX / screenWidth * 2 - 1;
-        mousePos.value.y = -(evt.offsetY / screenHeight) * 2 + 1;
-      };
-      const mouseDownListener = () => inputActive.value = true;
-      const mouseUpListener = () => inputActive.value = false;
-      // add mouse events
-      domElement.addEventListener('pointermove', mouseMoveListener);
-      domElement.addEventListener('pointerdown', mouseDownListener);
-      domElement.addEventListener('pointerup', mouseUpListener);
-    });
-    const camera = useCamera();
-    const update = () => {
-      const c = camera.value;
-      if (!c) return;
-      // console.log(camera.value)
-      raycaster.setFromCamera(mousePos.value, c);
-      const intersections = raycaster.intersectObjects(interactables?.value.map(v => v.instance) ?? []);
-      let leaveValues = [],
-        entering = [],
-        staying = [];
-      // intersection arrays
-      leaveValues = currentIntersections.map(v => v.intersection);
-      // element arrays
-      intersections?.forEach(intersection => {
-        const currentIdx = currentIntersections.findIndex(v => v.intersection.object === intersection.object);
-        if (currentIdx === -1) {
-          const found = interactables?.value.find(v => v.instance?.uuid === intersection.object.uuid);
-          if (found) {
-            entering.push({
-              element: found,
-              intersection
-            });
-          }
-        } else {
-          const found = interactables?.value.find(v => v.instance?.uuid === intersection.object.uuid);
-          if (found) {
-            staying.push({
-              element: found,
-              intersection
-            });
-          }
-        }
-        // this is a current intersection, so it won't be in our `leave` array
-        const leaveIdx = leaveValues.findIndex(v => v.object.uuid === intersection.object.uuid);
-        if (leaveIdx !== -1) {
-          leaveValues.splice(leaveIdx, 1);
-        }
-      });
-      const leaving = leaveValues.map(intersection => {
-        return {
-          element: interactables?.value.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);
-    };
-    // update function
-    onBeforeRender(update);
-    const teardown = () => offBeforeRender(update);
-    onBeforeUnmount(teardown);
-    const clickEventKeys = ['onClick', 'onPointerDown', 'onPointerUp'];
-    watch(inputActive, isDown => {
-      // run raycaster on click (necessary when `update` is not automatically called,
-      // for example in `updateSource` functions)
-      update();
-      // meshes with multiple intersections receive multiple callbacks by default -
-      // let's make it so they only receive one callback of each type per frame.
-      // (ie usually when you click on a mesh, you expect only one click event to fire, even
-      // if there are technically multiple intersections with that mesh)
-      const uuidsInteractedWithThisFrame = [];
-      currentIntersections.forEach(v => {
-        clickEventKeys.forEach(key => {
-          const id = v.element.uuid + key;
-          if (isDown && (key === 'onClick' || key === 'onPointerDown')) {
-            if (!uuidsInteractedWithThisFrame.includes(id)) {
-              v.element.eventListeners[key]?.forEach(cb => cb({
-                intersection: v.intersection
-              }));
-              uuidsInteractedWithThisFrame.push(id);
-            }
-          } else if (!isDown && key === 'onPointerUp') {
-            if (!uuidsInteractedWithThisFrame.includes(id)) {
-              v.element.eventListeners[key]?.forEach(cb => cb({
-                intersection: v.intersection
-              }));
-              uuidsInteractedWithThisFrame.push(id);
-            }
-          }
-        });
-      });
-    });
-    // return arbitrary object to ensure instantiation
-    // TODO: why can't we return a <raycaster/> here?
-    return () => createVNode(resolveComponent("object3D"), null, null);
-  }
-});
-
-/** fixed & fill styling for container */
-const fillStyle = position => {
-  return {
-    position,
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    display: 'block'
-  };
-};
-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;
-    }
-    const interactables = useLunchboxInteractables();
-    // MOUNT
-    // ====================
-    onMounted(async () => {
-      // canvas needs to exist (or user needs to handle it on their own)
-      if (!canvas.value && !context.slots?.renderer?.()?.length) throw new Error('missing canvas');
-      // no camera provided, so let's create one
-      if (!context.slots?.camera?.()?.length) {
-        if (props.cameraPosition) {
-          consolidatedCameraProperties.position = props.cameraPosition;
-        }
-        if (props.cameraLook || props.cameraLookAt) {
-          consolidatedCameraProperties.lookAt = props.cameraLook || props.cameraLookAt;
-        }
-        if (props.zoom !== undefined) {
-          consolidatedCameraProperties.zoom = props.zoom;
-        }
-      }
-      // SCENE
-      // ====================
-      // 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
-      });
-      while (!renderer.value?.$el?.instance &&
-      // TODO: remove `as any`
-      !renderer.value?.component?.ctx.$el?.instance) {
-        await new Promise(r => requestAnimationFrame(r));
-      }
-      while (!scene.value?.$el?.instance &&
-      // TODO: remove `as any`
-      !scene.value?.component?.ctx.$el?.instance) {
-        await new Promise(r => requestAnimationFrame(r));
-      }
-      const normalizedRenderer = renderer.value?.$el?.instance ?? renderer.value?.component?.ctx.$el?.instance;
-      normalizedRenderer.setPixelRatio(globals.dpr);
-      const normalizedScene = scene.value?.$el?.instance ?? scene.value?.component?.ctx.$el?.instance;
-      const normalizedCamera = camera.value?.$el?.instance ?? camera.value?.component?.ctx.$el?.instance;
-      // TODO: update DPR on monitor switch
-      // prep canvas (sizing, observe, unmount, etc)
-      // (only run if no custom renderer)
-      if (!context.slots?.renderer?.()?.length) {
-        // TODO: use dispose
-        prepCanvas(container, normalizedCamera, normalizedRenderer, normalizedScene, props.sizePolicy);
-        if (props.r3f) {
-          normalizedRenderer.outputEncoding = THREE.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;
-          }
-        }
-      }
-      // 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';
-    // REACTIVE CUSTOM CAMERAS
-    // ====================
-    // find first camera with `type.name` property
-    // (which indicates a Lunch.Node)
-    const activeCamera = computed(() => {
-      const output = context.slots?.camera?.().find(c => c.type?.name);
-      if (output) {
-        return output;
-      }
-      return output;
-    });
-    // TODO: make custom cameras reactive
-    watch(activeCamera, async (newVal, oldVal) => {
-      // console.log('got camera', newVal)
-      if (newVal && newVal?.props?.key !== oldVal?.props?.key) {
-        // TODO: remove cast
-        camera.value = newVal;
-        // TODO: why isn't this updating app camera?
-        // const el = await waitFor(() => newVal.el)
-        // console.log(el)
-        // camera.value = el
-        // console.log(newVal.uuid)
-        // updateGlobals?.({ camera: el })
-      }
-    }, {
-      immediate: true
-    });
-    // RENDER FUNCTION
-    // ====================
-    return () => 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 : 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), interactables?.value.length && createVNode(LunchboxEventHandlers, null, null)]);
-  }
-});
-
-// list of all components to register out of the box
-const autoGeneratedComponents = [
-// ThreeJS basics
-'mesh', 'instancedMesh', 'scene', 'sprite', 'object3D',
-// geometry
-'instancedBufferGeometry', 'bufferGeometry', 'boxBufferGeometry', 'circleBufferGeometry', 'coneBufferGeometry', 'cylinderBufferGeometry', 'dodecahedronBufferGeometry', 'extrudeBufferGeometry', 'icosahedronBufferGeometry', 'latheBufferGeometry', 'octahedronBufferGeometry', 'parametricBufferGeometry', 'planeBufferGeometry', 'polyhedronBufferGeometry', 'ringBufferGeometry', 'shapeBufferGeometry', 'sphereBufferGeometry', 'tetrahedronBufferGeometry', 'textBufferGeometry', 'torusBufferGeometry', 'torusKnotBufferGeometry', 'tubeBufferGeometry', 'wireframeGeometry', 'parametricGeometry', 'tetrahedronGeometry', 'octahedronGeometry', 'icosahedronGeometry', 'dodecahedronGeometry', 'polyhedronGeometry', 'tubeGeometry', 'torusKnotGeometry', 'torusGeometry',
-// textgeometry has been moved to /examples/jsm/geometries/TextGeometry
-// 'textGeometry',
-'sphereGeometry', 'ringGeometry', 'planeGeometry', 'latheGeometry', 'shapeGeometry', 'extrudeGeometry', 'edgesGeometry', 'coneGeometry', 'cylinderGeometry', 'circleGeometry', 'boxGeometry',
-// materials
-'material', 'shadowMaterial', 'spriteMaterial', 'rawShaderMaterial', 'shaderMaterial', 'pointsMaterial', 'meshPhysicalMaterial', 'meshStandardMaterial', 'meshPhongMaterial', 'meshToonMaterial', 'meshNormalMaterial', 'meshLambertMaterial', 'meshDepthMaterial', 'meshDistanceMaterial', 'meshBasicMaterial', 'meshMatcapMaterial', 'lineDashedMaterial', 'lineBasicMaterial',
-// lights
-'light', 'spotLightShadow', 'spotLight', 'pointLight', 'rectAreaLight', 'hemisphereLight', 'directionalLightShadow', 'directionalLight', 'ambientLight', 'lightShadow', 'ambientLightProbe', 'hemisphereLightProbe', 'lightProbe',
-// textures
-'texture', 'videoTexture', 'dataTexture', 'dataTexture3D', 'compressedTexture', 'cubeTexture', 'canvasTexture', 'depthTexture',
-// Texture loaders
-'textureLoader',
-// misc
-'group', 'catmullRomCurve3', 'points', 'raycaster',
-// helpers
-'cameraHelper',
-// cameras
-'camera', 'perspectiveCamera', 'orthographicCamera', 'cubeCamera', 'arrayCamera',
-// renderers
-'webGLRenderer'
-/*
-// List copied from r3f:
-// https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/three-types.ts
- // NOT IMPLEMENTED (can be added via Extend - docs.lunchboxjs.com/components/extend/):
-audioListener: AudioListenerProps
-positionalAudio: PositionalAudioProps
- lOD: LODProps
-skinnedMesh: SkinnedMeshProps
-skeleton: SkeletonProps
-bone: BoneProps
-lineSegments: LineSegmentsProps
-lineLoop: LineLoopProps
-// see `audio`
-// line: LineProps
-immediateRenderObject: ImmediateRenderObjectProps
- // primitive
-primitive: PrimitiveProps
- // helpers
-spotLightHelper: SpotLightHelperProps
-skeletonHelper: SkeletonHelperProps
-pointLightHelper: PointLightHelperProps
-hemisphereLightHelper: HemisphereLightHelperProps
-gridHelper: GridHelperProps
-polarGridHelper: PolarGridHelperProps
-directionalLightHelper: DirectionalLightHelperProps
-boxHelper: BoxHelperProps
-box3Helper: Box3HelperProps
-planeHelper: PlaneHelperProps
-arrowHelper: ArrowHelperProps
-axesHelper: AxesHelperProps
-  // misc
-vector2: Vector2Props
-vector3: Vector3Props
-vector4: Vector4Props
-euler: EulerProps
-matrix3: Matrix3Props
-matrix4: Matrix4Props
-quaternion: QuaternionProps
-bufferAttribute: BufferAttributeProps
-instancedBufferAttribute: InstancedBufferAttributeProps
-color: ColorProps
-fog: FogProps
-fogExp2: FogExp2Props
-shape: ShapeProps
-*/];
-
-const catalogue = {};
-// component creation utility
-const createComponent$1 = tag => 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
-};
-
-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];
-  });
-};
-
-/** 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 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 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
-    });
-  });
-  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
-// require the crypto API and do not support built-in fallback to lower quality random number
-// generators (like Math.random()).
-var getRandomValues;
-var rnds8 = new Uint8Array(16);
-function rng() {
-  // lazy load so that environments that need to polyfill have a chance to do so
-  if (!getRandomValues) {
-    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
-    // find the complete implementation of crypto (msCrypto) on IE11.
-    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
-    if (!getRandomValues) {
-      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-    }
-  }
-  return getRandomValues(rnds8);
-}
-
-var REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
-
-function validate(uuid) {
-  return typeof uuid === 'string' && REGEX.test(uuid);
-}
-
-/**
- * Convert array of 16 byte values to UUID string format of the form:
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
- */
-
-var byteToHex = [];
-for (var i = 0; i < 256; ++i) {
-  byteToHex.push((i + 0x100).toString(16).substr(1));
-}
-function stringify(arr) {
-  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  // Note: Be careful editing this code!  It's been tuned for performance
-  // 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
-  // "undefined" in the uuid)
-  // - Invalid input values for the RFC `version` or `variant` fields
-
-  if (!validate(uuid)) {
-    throw TypeError('Stringified UUID is invalid');
-  }
-  return uuid;
-}
-
-function v4(options, buf, offset) {
-  options = options || {};
-  var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
-
-  rnds[6] = rnds[6] & 0x0f | 0x40;
-  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
-
-  if (buf) {
-    offset = offset || 0;
-    for (var i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
-    }
-    return buf;
-  }
-  return stringify(rnds);
-}
-
-// MiniDom recreates DOM node properties and methods.
-// Since Vue 3 is a DOM-first framework, many of its nodeOps depend on
-// properties and methods the DOM naturally contains. MiniDom recreates
-// those properties (as well as a few from the tree-model npm package)
-// to make a DOM-like but otherwise agnostic hierarchy structure.
-var MiniDom;
-(function (MiniDom) {
-  class BaseNode {
-    constructor(options = {}, parent) {
-      this.parentNode = options?.parentNode ?? parent ?? null;
-      this.minidomType = 'MinidomBaseNode';
-      this.uuid = options?.uuid ?? v4();
-      // allNodes.push(this)
-    }
-
-    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 as child
-      this.removeAsChildFromAnyParents();
-      // remove parent
-      this.parentNode = null;
-    }
-    /** Walk over the entire subtree. Return falsey value in callback to end early. */
-    // TODO: depth-first vs breadth-first
-    walk(callback) {
-      const queue = [this, ...this.children];
-      const traversed = [];
-      let canContinue = true;
-      while (queue.length && canContinue) {
-        const current = queue.shift();
-        if (current) {
-          if (traversed.includes(current)) continue;
-          traversed.push(current);
-          queue.push(...current.children.filter(child => !traversed.includes(child)));
-          canContinue = callback(current);
-        } else {
-          canContinue = false;
-        }
-      }
-    }
-    // INTERNAL FEATURES
-    // ====================
-    minidomType;
-    removeAsChildFromAnyParents() {
-      this.parentNode?.removeChild(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
-  // ====================
-  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';
-}
-
-// These keys originally used Symbols per Vue instructions,
-// but differing dev/build values made dev difficult.
-// These strings have some risk of namespace collision,
-// but that's a low enough risk that they're worth hardcoding
-// as strings, in my opinion.
-const globalsInjectionKey = 'lunchbox-globals'; // Symbol()
-const updateGlobalsInjectionKey = 'lunchbox-updateGlobals'; // Symbol()
-const setCustomRenderKey = 'lunchbox-setCustomRender'; // Symbol()
-const clearCustomRenderKey = 'lunchbox-clearCustomRender'; //Symbol()
-const beforeRenderKey = 'lunchbox-beforeRender'; // Symbol()
-const onBeforeRenderKey = 'lunchbox-onBeforeRender'; //Symbol()
-const offBeforeRenderKey = 'lunchbox-offBeforeRender'; // Symbol()
-const afterRenderKey = 'lunchbox-afterRender'; // Symbol()
-const onAfterRenderKey = 'lunchbox-onAfterRender'; // Symbol()
-const offAfterRenderKey = 'lunchbox-offAfterRender'; // Symbol()
-const frameIdKey = 'lunchbox-frameId'; // Symbol()
-const watchStopHandleKey = 'lunchbox-watchStopHandle'; // Symbol()
-const appRootNodeKey = 'lunchbox-appRootNode'; // Symbol()
-const appKey = 'lunchbox-appKey'; //  Symbol()
-const appRenderersKey = 'lunchbox-renderer'; //Symbol()
-const appSceneKey = 'lunchbox-scene'; // Symbol()
-const appCameraKey = 'lunchbox-camera'; //Symbol()
-const lunchboxInteractables = 'lunchbox-interactables'; // Symbol()
-const startCallbackKey = 'lunchbox-startCallback'; // Symbol()
-
-const requestUpdate = opts => {
-  if (typeof opts.app.config.globalProperties.lunchbox.frameId === 'number') {
-    cancelAnimationFrame(opts.app.config.globalProperties.lunchbox.frameId);
-  }
-  opts.app.config.globalProperties.lunchbox.frameId = requestAnimationFrame(() => update({
-    app: opts.app,
-    renderer: opts.renderer,
-    scene: opts.scene,
-    camera: opts.camera,
-    updateSource: opts.updateSource
-  }));
-};
-const update = opts => {
-  if (opts.updateSource) {
-    if (!opts.app.config.globalProperties.lunchbox.watchStopHandle) {
-      // request next frame only when state changes
-      opts.app.config.globalProperties.lunchbox.watchStopHandle = watch(opts.updateSource, () => {
-        requestUpdate(opts);
-      }, {
-        deep: true
-      });
-    }
-  } else {
-    // request next frame on a continuous loop
-    requestUpdate(opts);
-  }
-  // prep options
-  const {
-    app,
-    renderer,
-    scene
-  } = opts;
-  // BEFORE RENDER
-  app.config.globalProperties.lunchbox.beforeRender.forEach(cb => {
-    cb?.(opts);
-  });
-  // RENDER
-  if (renderer && scene && opts.app.config.globalProperties.lunchbox.camera) {
-    if (app.customRender) {
-      app.customRender(opts);
-    } else {
-      renderer.render(toRaw(scene), opts.app.config.globalProperties.lunchbox.camera
-      // toRaw(camera)
-      );
-    }
-  }
-  // AFTER RENDER
-  app.config.globalProperties.lunchbox.afterRender.forEach(cb => {
-    cb?.(opts);
-  });
-};
-// before render
-// ====================
-/** Obtain callback methods for `onBeforeRender` and `offBeforeRender`. Usually used internally by Lunchbox. */
-const useBeforeRender = () => {
-  return {
-    onBeforeRender: inject(onBeforeRenderKey),
-    offBeforeRender: inject(offBeforeRenderKey)
-  };
-};
-/** Run a function before every render.
- *
- * Note that if `updateSource` is set in the Lunchbox wrapper component, this will **only** run
- * before a render triggered by that `updateSource`. Normally, the function should run every frame.
- */
-const onBeforeRender = (cb, index = Infinity) => {
-  useBeforeRender().onBeforeRender?.(cb, index);
-};
-/** Remove a function from the `beforeRender` callback list. Useful for tearing down functions added
- * by `onBeforeRender`.
- */
-const offBeforeRender = cb => {
-  useBeforeRender().offBeforeRender?.(cb);
-};
-// after render
-// ====================
-/** Obtain callback methods for `onAfterRender` and `offAfterRender`. Usually used internally by Lunchbox. */
-const useAfterRender = () => {
-  return {
-    onAfterRender: inject(onBeforeRenderKey),
-    offAfterRender: inject(offBeforeRenderKey)
-  };
-};
-/** Run a function after every render.
- *
- * Note that if `updateSource` is set in the Lunchbox wrapper component, this will **only** run
- * after a render triggered by that `updateSource`. Normally, the function should run every frame.
- */
-const onAfterRender = (cb, index = Infinity) => {
-  useBeforeRender().onBeforeRender?.(cb, index);
-};
-/** Remove a function from the `afterRender` callback list. Useful for tearing down functions added
- * by `onAfterRender`.
- */
-const offAfterRender = cb => {
-  useBeforeRender().offBeforeRender?.(cb);
-};
-/** Obtain a function used to cancel the current update frame. Use `cancelUpdate` if you wish
- * to immediately invoke the cancellation function. Usually used internally by Lunchbox.
- */
-const useCancelUpdate = () => {
-  const frameId = inject(frameIdKey);
-  return () => {
-    if (frameId !== undefined) cancelAnimationFrame(frameId);
-  };
-};
-/** Cancel the current update frame. Usually used internally by Lunchbox. */
-const cancelUpdate = () => {
-  useCancelUpdate()?.();
-};
-/** Obtain a function used to cancel an update source. Use `cancelUpdateSource` if you wish to
- * immediately invoke the cancellation function. Usually used internally by Lunchbox.
- */
-const useCancelUpdateSource = () => {
-  const cancel = inject(watchStopHandleKey);
-  return () => cancel?.();
-};
-/** Cancel an update source. Usually used internally by Lunchbox. */
-const cancelUpdateSource = () => {
-  useCancelUpdateSource()?.();
-};
-
-/** Update a single prop on a given node. */
-function updateObjectProp({
-  node,
-  key,
-  interactables,
-  value
-}) {
-  // handle and return early if prop is an event
-  // (event list from react-three-fiber)
-  if (isEventKey(key)) {
-    return addEventListener({
-      node,
-      key,
-      interactables,
-      value
-    });
-  }
-  // update THREE property
-  // get final key
-  const camelKey = key.replace(/-/g, '.');
-  const finalKey = propertyShortcuts[camelKey] || camelKey;
-  // handle and return early if prop is specific to Vue/Lunchbox
-  if (internalLunchboxVueKeys.includes(key) || internalLunchboxVueKeys.includes(finalKey)) return node;
-  // everything else should be Three-specific, so let's cancel if this isn't a standard node
-  if (!isLunchboxStandardNode(node)) return node;
-  // parse $attached values
-  if (typeof value === 'string' && value.startsWith('$attached')) {
-    const attachedName = value.replace('$attached.', '');
-    value = 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
-  // first, save as array in case we need to spread it
-  if (liveProperty && isNumber(value) && liveProperty?.setScalar) {
-    // if value is a number and the property has a `setScalar` method, use that
-    liveProperty.setScalar(value);
-  } else if (liveProperty && liveProperty.set) {
-    // if property has `set` method, use that (https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#shortcuts)
-    const nextValueAsArray = Array.isArray(value) ? value : [value];
-    target[finalKey].set(...nextValueAsArray);
-  } else if (typeof liveProperty === 'function') {
-    // some function properties are set rather than called, so let's handle them
-    if (finalKey.toLowerCase() === 'onbeforerender' || finalKey.toLowerCase() === 'onafterrender') {
-      target[finalKey] = value;
-    } else {
-      if (!Array.isArray(value)) {
-        throw new Error('Arguments on a declarative method must be wrapped in an array.\nWorks:\n<example :methodCall="[256]" />\nDoesn\'t work:\n<example :methodCall="256" />');
-      }
-      // if property is a function, let's try calling it
-      liveProperty.bind(node.instance)(...value);
-    }
-    // pass the result to the parent
-    // const parent = node.parentNode
-    // if (parent) {
-    //     const parentAsLunchboxNode = parent as Lunchbox.Node
-    //     parentAsLunchboxNode.attached[finalKey] = result
-    //         ; (parentAsLunchboxNode.instance as any)[finalKey] = result
-    // }
-  } else if (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;
-}
-const propertyShortcuts = {
-  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 autoAttach = ['geometry', 'material'];
-const createElement = (type, isSVG, isCustomizedBuiltin, vnodeProps) => {
-  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) => {
-  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 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;
-        }
-      }
-    }
-    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);
-    });
-  }
-}
-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 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 createNodeOps = () => {
-  // APP-LEVEL GLOBALS
-  // ====================
-  // These need to exist at the app level in a place where the node ops can access them.
-  // It'd be better to set these via `app.provide` at app creation, but the node ops need access
-  // to these values before the app is instantiated, so this is the next-best place for them to exist.
-  const interactables = ref([]);
-  // NODE OPS
-  // ====================
-  const nodeOps = {
-    createElement,
-    createText(text) {
-      return createTextNode({
-        text
-      });
-    },
-    createComment(text) {
-      return createCommentNode({
-        text
-      });
-    },
-    insert,
-    nextSibling(node) {
-      const result = node.nextSibling;
-      if (!result) return null;
-      return result;
-    },
-    parentNode(node) {
-      const result = node.parentNode;
-      if (!result) return null;
-      return result;
-    },
-    patchProp(node, key, prevValue, nextValue) {
-      if (isLunchboxDomComponent(node)) {
-        // handle DOM node
-        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,
-        interactables,
-        value: nextValue
-      });
-    },
-    remove,
-    setElementText() {
-      // noop
-    },
-    setText() {
-      // noop
-    }
-  };
-  return {
-    nodeOps,
-    interactables
-  };
-};
-
-const BridgeComponent = defineComponent({
-  name: 'BridgeComponent',
-  props: {
-    app: {
-      type: Object
-    },
-    root: {
-      type: Object
-    },
-    appSetup: {
-      type: Function,
-      default: app => app
-    }
-  },
-  setup(props, ctx) {
-    // we need an app or root to mount
-    if (!props.app && !props.root) {
-      throw new Error('app or root required as <bridge> prop');
-    }
-    // prep container
-    const container = ref();
-    // create app
-    let app = props.appSetup(props.app ?? createApp(props.root, ctx.attrs));
-    // get all provided values - this isn't in the types or docs, so it may be unstable
-    const provides = getCurrentInstance()?.provides ?? {};
-    // provide values
-    Object.keys(provides).forEach(key => {
-      app?.provide(key, inject(key));
-    });
-    // mount
-    onMounted(() => {
-      app?.mount(container.value);
-    });
-    // unmount
-    onUnmounted(() => {
-      app?.unmount();
-      app = null;
-    });
-    return () => createVNode("div", {
-      "ref": container
-    }, null);
-  }
-});
-
-const bridge = {
-  install(app) {
-    // register wrapper component
-    app.component('lunchbox', BridgeComponent);
-  }
-};
-
-/** The current camera as a computed value. */
-const useCamera = () => inject(appCameraKey);
-/** Run a function using the current camera when it's present. */
-const onCameraReady = cb => {
-  const existing = useCamera();
-  if (existing.value) {
-    cb(existing.value);
-    return;
-  }
-  let stopWatch = null;
-  stopWatch = watch(useCamera(), newVal => {
-    if (newVal) {
-      cb(newVal);
-      stopWatch?.();
-    }
-  });
-};
-/** The current renderer as a computed value. */
-const useRenderer = () => inject(appRenderersKey);
-/** Run a function using the current renderer when it's present. */
-const onRendererReady = cb => {
-  const existing = useRenderer();
-  if (existing.value) {
-    cb(existing.value);
-    return;
-  }
-  let stopWatch = null;
-  stopWatch = watch(useRenderer(), newVal => {
-    if (newVal) {
-      cb(newVal);
-      stopWatch?.();
-    }
-  }, {
-    immediate: true
-  });
-};
-/** The current scene as a computed value. */
-const useScene = () => inject(appSceneKey);
-/** Run a function using the current scene when it's present. */
-const onSceneReady = cb => {
-  const existing = useScene();
-  if (existing.value) {
-    cb(existing.value);
-    return;
-  }
-  let stopWatch = null;
-  stopWatch = watch(useScene(), newVal => {
-    if (newVal) {
-      cb(newVal);
-      stopWatch?.();
-    }
-  }, {
-    immediate: true
-  });
-};
-// CUSTOM RENDER SUPPORT
-// ====================
-/** Set a custom render function, overriding the Lunchbox app's default render function.
- * Changing this requires the user to manually render their scene.
- *
- * Invokes immediately - use `useCustomRender().setCustomRender`
- * if you need to call somewhere outside of `setup`.
- */
-const setCustomRender = render => {
-  useCustomRender()?.setCustomRender?.(render);
-};
-/** Clear the active app's custom render function.
- *
- * Invokes immediately - use `useCustomRender().clearCustomRender`
- * if you need to call somewhere outside of `setup`.
- */
-const clearCustomRender = () => {
-  useCustomRender()?.clearCustomRender?.();
-};
-/** Provides `setCustomRender` and `clearCustomRender` functions to be called in a non-`setup` context. */
-const useCustomRender = () => {
-  return {
-    /** Set a custom render function, overriding the Lunchbox app's default render function.
-     * Changing this requires the user to manually render their scene. */
-    setCustomRender: inject(setCustomRenderKey),
-    /** Clear the active app's custom render function. */
-    clearCustomRender: inject(clearCustomRenderKey)
-  };
-};
-/** Use app-level globals. */
-const useGlobals = () => inject(globalsInjectionKey);
-/** Construct a function to update your app-level globals.
- *
- * ```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);
-};
-/** Use the current Lunchbox app. Usually used internally by Lunchbox. */
-const useApp = () => inject(appKey);
-/** Obtain a list of the start callback functions. Usually used internally by Lunchbox. */
-const useStartCallbacks = () => inject(startCallbackKey);
-/** Run a given callback once when the Lunchbox app starts. Include an index to
- * splice the callback at that index in the callback queue. */
-const onStart = (cb, index = Infinity) => {
-  const callbacks = useStartCallbacks();
-  if (index === Infinity) {
-    callbacks?.push(cb);
-  } else {
-    callbacks?.splice(index, 0, cb);
-  }
-};
-/** Obtain a list of interactable objects (registered via onClick, onHover, etc events). Usually used internally by Lunchbox. */
-const useLunchboxInteractables = () => inject(lunchboxInteractables);
-/** Build a computed instance-getter from a specified ref. Defaults to a `toRaw`'d result. */
-const getInstance = (target, raw = true) => computed(() => {
-  const output = target.value?.$el?.instance ?? target.value?.instance ?? null;
-  if (output && raw) return toRaw(output);
-  return output;
-});
-// CREATE APP
-// ====================
-const createApp = (root, rootProps = {}) => {
-  console.log("HERE");
-  const {
-    nodeOps,
-    interactables
-  } = createNodeOps();
-  const app = createRenderer(nodeOps).createApp(root, rootProps);
-  // provide Lunchbox interaction handlers flag (modified when user references events via
-  // @click, etc)
-  app.provide(lunchboxInteractables, interactables);
-  // register all components
-  // ====================
-  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);
-    }
-  });
-  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));
-  app._props;
-  // done
-  return app;
-};
-
-export { MiniDom, addEventListener, afterRenderKey, appCameraKey, appKey, appRenderersKey, appRootNodeKey, appSceneKey, beforeRenderKey, cancelUpdate, cancelUpdateSource, clearCustomRender, clearCustomRenderKey, createApp, createCommentNode, createDomNode, createNode, createTextNode, extend, find, frameIdKey, getInstance, globalsInjectionKey, instantiateThreeObject, isMinidomNode, bridge as lunchbox, lunchboxInteractables, nestedPropertiesToCheck, offAfterRender, offAfterRenderKey, offBeforeRender, offBeforeRenderKey, onAfterRender, onAfterRenderKey, onBeforeRender, onBeforeRenderKey, onCameraReady, onRendererReady, onSceneReady, onStart, setCustomRender, setCustomRenderKey, startCallbackKey, update, updateGlobals, updateGlobalsInjectionKey, updateObjectProp, useAfterRender, useApp, useBeforeRender, useCamera, useCancelUpdate, useCancelUpdateSource, useCustomRender, useGlobals, useLunchboxInteractables, useRenderer, useScene, useStartCallbacks, useUpdateGlobals, watchStopHandleKey };