@vertexvis/viewer-toolkit-react 0.0.2-canary.1 → 0.0.2-canary.3

package/dist/bundle.cjs.js

@@ -1,557 +1,292 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var uiReact = require('@vertexvis/ui-react');
-var utils = require('@vertexvis/utils');
+var classNames = require('classnames');
 var recoil = require('recoil');
-var geometry = require('@vertexvis/geometry');
 var Pino = require('pino');
+var geometry = require('@vertexvis/geometry');
+var utils = require('@vertexvis/utils');
+var React = require('react');
 var viewerReact = require('@vertexvis/viewer-react');
-var classNames = require('classnames');
 var loader = require('@vertexvis/viewer/loader');
 
 function _interopNamespaceDefault(e) {
-   var n = Object.create(null);
-   if (e) {
-      Object.keys(e).forEach(function (k) {
-         if (k !== 'default') {
-            var d = Object.getOwnPropertyDescriptor(e, k);
-            Object.defineProperty(n, k, d.get ? d : {
-               enumerable: true,
-               get: function () { return e[k]; }
-            });
-         }
-      });
-   }
-   n.default = e;
-   return Object.freeze(n);
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-// DEPRECATED - avoid if possible
-const useRecoilReducer = ({ reducer, atom, }) => {
-    const state = recoil.useRecoilValue(atom);
-    const dispatch = useRecoilReducerDispatch({
-        reducer,
-        atom,
-    });
-    return [state, dispatch];
-};
-// DEPRECATED - avoid if possible
-const useRecoilReducerDispatch = ({ reducer, atom, }) => {
-    const dispatch = recoil.useRecoilCallback(({ set }) => async (action) => {
-        set(atom, (previousValue) => reducer(previousValue, action));
-    }, []);
-    return dispatch;
+const DEFAULT_VERTICAL_SCALE = 1;
+const VertexResizableContent = ({ displayShadow, heading, id, initialScale, position = 'left', children, onResize, }) => {
+    const isHorizontallyPositioned = position === 'left' || position === 'right';
+    const isVerticallyPositioned = position === 'top';
+    function getHorizontalResizeDirection() {
+        switch (position) {
+            case 'left':
+                return 'right';
+            case 'right':
+                return 'left';
+            default:
+                return 'none';
+        }
+    }
+    function getVerticalResizeDirection() {
+        return position === 'top' ? 'top' : 'none';
+    }
+    const initialVerticalScale = initialScale != null ? initialScale : DEFAULT_VERTICAL_SCALE;
+    return (jsxRuntime.jsx(uiReact.VertexResizable, { id: id, "data-testid": `resizable-content-position-${position}`, className: classNames('pointer-events-auto z-popover md:z-overlay bg-white bg-opacity-95 flex-grow-0 flex-shrink-0', {
+            ['border-r min-w-75 max-w-half']: position === 'left',
+            ['sidebar-shadow-right']: position === 'left' && displayShadow,
+            ['border-l right-0 relative']: position === 'right',
+            ['sidebar-shadow-left']: position === 'right' && displayShadow,
+            ['border-t bottom-0 fixed']: position === 'top',
+            ['min-h-12 sheet']: isVerticallyPositioned,
+        }), style: {
+            // This corrects an issue on mobile where `100vh` reflects the space
+            // under the address bar and bottom toolbar in CSS.
+            maxHeight: position === 'top' ? window.innerHeight : undefined,
+        }, initialHorizontalScale: isHorizontallyPositioned ? initialScale : undefined, initialVerticalScale: isVerticallyPositioned ? initialVerticalScale : undefined, horizontalDirection: getHorizontalResizeDirection(), verticalDirection: getVerticalResizeDirection(), position: position === 'right' || position === 'top' ? 'absolute' : 'relative', onResizeEnd: () => onResize === null || onResize === void 0 ? void 0 : onResize(), children: jsxRuntime.jsxs("div", { className: "flex flex-col h-full w-full", children: [jsxRuntime.jsx("div", { className: "flex justify-center w-full", children: jsxRuntime.jsx("div", { className: "block md:hidden w-20 h-0.5 mt-0.5 bg-neutral-600 rounded" }) }), heading, jsxRuntime.jsx("div", { className: classNames('w-full flex flex-col h-0 flex-grow', {
+                        ['right-0']: position === 'right',
+                    }), children: children })] }) }));
 };
 
-const isInputElement = (target) => {
-    const isAutoResizeTextarea = target instanceof HTMLElement &&
-        target.tagName === 'VERTEX-AUTO-RESIZE-TEXTAREA';
-    const isTextField = target instanceof HTMLElement && target.tagName === 'VERTEX-TEXTFIELD';
-    const isContentEditable = target instanceof HTMLElement && target.contentEditable === 'true';
-    const isSceneTreeSearch = target instanceof HTMLElement &&
-        target.tagName === 'VERTEX-SCENE-TREE-SEARCH';
-    const isInput = target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement;
-    const isVertexViewerPinTool = target instanceof HTMLElement &&
-        target.tagName === 'VERTEX-VIEWER-PIN-TOOL';
-    const isVertexViewerTransformWidget = target instanceof HTMLElement &&
-        target.tagName === 'VERTEX-VIEWER-TRANSFORM-WIDGET';
-    return (isAutoResizeTextarea ||
-        isTextField ||
-        isContentEditable ||
-        isSceneTreeSearch ||
-        isInput ||
-        isVertexViewerPinTool ||
-        isVertexViewerTransformWidget);
+function contextMenuItemIsRow(item) {
+    var _a;
+    return item != null && ((_a = item === null || item === void 0 ? void 0 : item.node) === null || _a === void 0 ? void 0 : _a.id) != null;
+}
+const contextMenuActive = recoil.atom({
+    key: 'contextMenuActive',
+    default: undefined,
+});
+const contextMenuPosition = recoil.atom({
+    key: 'contextMenuPosition',
+    default: undefined,
+});
+const contextMenuTarget = recoil.atom({
+    key: 'contextMenuTarget',
+    default: undefined,
+});
+const contextMenuItem = recoil.atom({
+    key: 'contextMenuItem',
+    default: undefined,
+});
+const contextMenuActions = recoil.atom({
+    key: 'contextMenuActions',
+    default: [],
+});
+const contextMenuActivePosition = recoil.selector({
+    key: 'contextMenuActivePosition',
+    get: ({ get }) => get(contextMenuActive) != null ? get(contextMenuPosition) : undefined,
+});
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const keyBindings = recoil.atom({
-    key: 'keyBindings',
-    default: {
-        applyBindings: [],
-        bindings: {},
-        pressed: {},
+// Create a new logger instance
+const pinoLogger = Pino({
+    formatters: {
+        level(level) {
+            return { level };
+        },
     },
 });
-function reducer(state, action) {
-    var _a, _b, _c, _d;
-    switch (action.type) {
-        case 'push-key-binding':
-            const toAdd = (_a = state.bindings[action.binding.keyBind]) === null || _a === void 0 ? void 0 : _a.find((b) => b.id === action.binding.id);
-            return toAdd != null
-                ? state
-                : Object.assign(Object.assign({}, state), { bindings: Object.assign(Object.assign({}, state.bindings), { [action.binding.keyBind]: [
-                            ...((_b = state.bindings[action.binding.keyBind]) !== null && _b !== void 0 ? _b : []),
-                            action.binding,
-                        ] }) });
-        case 'remove-key-binding':
-            const toRemove = (_c = state.bindings[action.binding.keyBind]) === null || _c === void 0 ? void 0 : _c.find((b) => b.id === action.binding.id);
-            return toRemove == null
-                ? state
-                : Object.assign(Object.assign({}, state), { bindings: Object.assign(Object.assign({}, state.bindings), { [action.binding.keyBind]: ((_d = state.bindings[action.binding.keyBind]) !== null && _d !== void 0 ? _d : []).filter((b) => b.id !== action.binding.id) }) });
-        case 'add-apply-key-binding':
-            return Object.assign(Object.assign({}, state), { applyBindings: [...state.applyBindings, action.binding] });
-        case 'remove-apply-key-binding':
-            return Object.assign(Object.assign({}, state), { applyBindings: state.applyBindings.filter((binding) => binding.id !== action.id) });
-        case 'set-key-pressed':
-            return Object.assign(Object.assign({}, state), { applyBindings: state.applyBindings.map((binding) => (Object.assign(Object.assign({}, binding), { active: binding.keyBind != null &&
-                        allPressed(binding.keyBind, state.pressed) }))), pressed: Object.assign(Object.assign({}, state.pressed), { [action.key]: action.pressed }), lastPressed: action.pressed ? action.key : undefined });
-    }
-}
-const useKeyBindingState = () => {
-    return useRecoilReducer({
-        reducer,
-        atom: keyBindings,
-    });
+const logger = {
+    error: (message, error) => {
+        if (error != null) {
+            pinoLogger.error(error, message);
+        }
+        else {
+            pinoLogger.error(message);
+        }
+    },
+    info: (message, obj) => {
+        if (obj != null) {
+            pinoLogger.info(obj, message);
+        }
+        else {
+            pinoLogger.info(message);
+        }
+    },
+    warn: (message, err) => {
+        if (err != null) {
+            pinoLogger.warn(err, message);
+        }
+        else {
+            pinoLogger.warn(message);
+        }
+    },
+    debug: (message, obj) => {
+        if (obj != null) {
+            pinoLogger.debug(obj, message);
+        }
+        else {
+            pinoLogger.debug(message);
+        }
+    },
 };
-function pressedValue(keyBind, pressed) {
-    return keyBind.includes('!')
-        ? !pressed[keyBind.replace('!', '')] &&
-            !pressed[keyBind.replace('!', '').toLowerCase()]
-        : pressed[keyBind] || pressed[keyBind.toLowerCase()];
-}
-function isPressed(keyBind, pressed) {
-    const keys = keyBind.split('||');
-    return keys.length > 1
-        ? keys.some((key) => pressedValue(key, pressed))
-        : pressedValue(keys[0], pressed);
-}
-function allPressed(keyBind, pressed) {
-    const keys = keyBind.split('+');
-    return keys.every((key) => isPressed(key, pressed));
-}
-function matchingSingleFnBindings(applyBindings, pressed, lastPressed) {
-    return applyBindings
-        .filter((binding) => !binding.repeat)
-        .filter((binding) => {
-        var _a;
-        return binding.keyBind != null &&
-            lastPressed != null &&
-            ((_a = binding.keyBind) === null || _a === void 0 ? void 0 : _a.includes(lastPressed)) &&
-            allPressed(binding.keyBind, pressed);
-    })
-        .map((binding) => binding.fn);
-}
-function matchingOffBindings(applyBindings, pressed, lastPressed) {
-    return applyBindings
-        .filter((binding) => binding.off &&
-        binding.active &&
-        binding.keyBind != null &&
-        lastPressed == null &&
-        !allPressed(binding.keyBind, pressed))
-        .map((binding) => binding.off);
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+class DefaultRecoilDeps {
 }
 /**
- * Depends on `useKeyBindings`.
+ * Returns a Recoil callback that can be used for action hooks.
  *
- * Adds a global key binding. Any key binding
- * added this way will listen to global state for pressed
- * keys, and executed whenever the key state matches the
- * provided `keyBind`.
+ * This uses `useRecoilCallback` but the deps implementation differs from
+ * Recoil. If no deps are provided, then it will always return the same function
+ * vs returning a new function.
  *
- * @param binding - The `ApplyKeyBinding` to add.
- */
-const useApplyKeyBinding = (binding) => {
-    const [state, dispatch] = useKeyBindingState();
-    React.useEffect(() => {
-        const id = utils.UUID.create();
-        dispatch({
-            type: 'add-apply-key-binding',
-            binding: Object.assign(Object.assign({}, binding), { id, active: binding.keyBind != null && allPressed(binding.keyBind, state.pressed) }),
-        });
-        return () => {
-            dispatch({
-                type: 'remove-apply-key-binding',
-                id,
-            });
-        };
-    }, [binding.fn, binding.off, binding.keyBind, binding.repeat]);
-};
-/**
- * Depends on `useKeyBindings`.
+ * If you want to use the original Recoil callback behavior, pass
+ * `DefaultRecoilCallbackDepsBehavior`.
  *
- * Adds a stack-based key binding. Any key binding
- * added this way will be added to an existing (or new)
- * stack for the specified `keyBind`.
- *
- * Provided `binding`s will be added and cancelled based
- * on the specified `addPredicate` and `cancelPredicate`
- * respectively. These predicates are evaluated any time
- * that the `deps` array changes.
- *
- * @param binding - The `StackKeyBinding` to add.
- * @param deps (optional) - The React dependency list.
+ * @param fn The callback.
+ * @param deps The deps to memoize over. Defaults to `[]`.
+ * @returns A callback function
+ * @see https://recoiljs.org/docs/api-reference/core/useRecoilCallback
  */
-const useStackKeyBinding = (binding, deps = []) => {
-    const [, dispatch] = useKeyBindingState();
-    React.useEffect(() => {
-        const addPredicatePassing = binding.addPredicate == null || binding.addPredicate();
-        const cancelPredicatePassing = binding.cancelPredicate != null && binding.cancelPredicate();
-        if (addPredicatePassing) {
-            dispatch({
-                type: 'push-key-binding',
-                binding,
-            });
-        }
-        if (cancelPredicatePassing) {
-            dispatch({
-                type: 'remove-key-binding',
-                binding,
-            });
-        }
-    }, deps);
-};
+function useActionCallback(fn, deps = []) {
+    const d = deps instanceof DefaultRecoilDeps ? undefined : deps;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return recoil.useRecoilCallback((cbInterface) => fn(Object.assign(Object.assign({}, cbInterface), { snapshot: Object.defineProperties(cbInterface.snapshot, {
+            getPromiseRequired: {
+                configurable: true,
+                value: createGetPromiseRequiredWrapper(cbInterface.snapshot),
+            },
+            tryGetPromise: {
+                configurable: true,
+                value: createTryGetPromiseWrapper(cbInterface.snapshot),
+            },
+        }) })), d);
+}
 /**
- * Enables key binding usage.
+ * Returns a callback that can be used with `useActionCallback` or `useRecoilCallback`,
+ * and automatically handles retention of the `snapshot` object for use with asynchronous
+ * selectors.
  *
- * This hook must appear in the tree for `useStackKeyBinding`
- * or `useApplyKeyBinding` to work.
+ * This function expects a callback that would ordinarily be passed to `useActionCallback`
+ * or `useRecoilCallback`, but that returns an asynchronous action where the `snapshot` is
+ * used.
+ *
+ * @example
+ *
+ * const asyncSelector = selector({
+ *   key: 'asyncSelector',
+ *   get: async ({ get }) => {
+ *     return await fetch('/api/item');
+ *   }
+ * })
+ *
+ * useActionCallback(
+ *   retainSnapshot(
+ *     ({ snapshot }) => async () => {
+ *       const asyncValue = await snapshot.getPromise(asyncSelector);
+ *     }
+ *   )
+ * )
+ *
+ * @param fn The callback.
+ * @returns The callback wrapped with a retain/release of the underlying snapshot.
  */
-const useKeyBindings = ({ keydownRepeatInterval = 25, keydownIgnorePredicate = isInputElement, } = {}) => {
-    const [state, dispatch] = useKeyBindingState();
-    const applyStackKeyBindings = React.useCallback((key) => {
-        Object.keys(state.bindings)
-            .filter((k) => k.includes(key) && allPressed(k, Object.assign(Object.assign({}, state.pressed), { [key]: true })))
-            .forEach((k) => {
-            const bindings = state.bindings[k];
-            const poppedBinding = bindings.length > 0 ? bindings[bindings.length - 1] : undefined;
-            if (poppedBinding != null) {
-                poppedBinding.fn();
-                dispatch({
-                    type: 'remove-key-binding',
-                    binding: poppedBinding,
-                });
+function retainSnapshot(fn) {
+    return (_a) => {
+        var { snapshot } = _a, cb = __rest(_a, ["snapshot"]);
+        return async (...args) => {
+            const release = snapshot.retain();
+            try {
+                const returnValue = await fn(Object.assign(Object.assign({}, cb), { snapshot }))(...args);
+                return returnValue;
             }
-        });
-    }, [state]);
-    React.useEffect(() => {
-        const handleKeyDown = (event) => {
-            if (!event.repeat && !keydownIgnorePredicate(event.target)) {
-                dispatch({
-                    type: 'set-key-pressed',
-                    key: event.key,
-                    pressed: true,
-                });
-                applyStackKeyBindings(event.key);
-                // If the key is associated with a keybinding, then prevent default behavior
-                const currentPressed = Object.assign(Object.assign({}, state.pressed), { [event.key]: true });
-                const activeMatchesSingleFnBindings = matchingSingleFnBindings(state.applyBindings, currentPressed, event.key);
-                const activeMatchesOffBindings = matchingOffBindings(state.applyBindings, currentPressed, event.key);
-                if (activeMatchesSingleFnBindings.length > 0 ||
-                    activeMatchesOffBindings.length > 0) {
-                    event.preventDefault();
-                }
+            finally {
+                release();
             }
         };
-        const handleKeyUp = (event) => {
-            dispatch({
-                type: 'set-key-pressed',
-                key: event.key,
-                pressed: false,
-            });
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        window.addEventListener('keyup', handleKeyUp);
-        return () => {
-            window.removeEventListener('keydown', handleKeyDown);
-            window.removeEventListener('keyup', handleKeyUp);
-        };
-    }, [applyStackKeyBindings, state.applyBindings, state.pressed]);
-    React.useEffect(() => {
-        const activeMatchesSingleFnBindings = matchingSingleFnBindings(state.applyBindings, state.pressed, state.lastPressed);
-        const activeMatchesOffBindings = matchingOffBindings(state.applyBindings, state.pressed, state.lastPressed);
-        activeMatchesSingleFnBindings.forEach((fn) => fn());
-        activeMatchesOffBindings.forEach((fn) => fn());
-    }, [state.pressed, state.lastPressed]);
-    React.useEffect(() => {
-        const matchingRepeatBindings = state.applyBindings
-            .filter((binding) => binding.repeat &&
-            binding.keyBind != null &&
-            allPressed(binding.keyBind, state.pressed))
-            .map((binding) => binding.fn);
-        if (matchingRepeatBindings.length > 0) {
-            const interval = setInterval(() => {
-                matchingRepeatBindings.forEach((fn) => fn());
-            }, keydownRepeatInterval);
-            return () => {
-                clearInterval(interval);
-            };
+    };
+}
+function createGetPromiseRequiredWrapper(snapshot) {
+    return async (recoilValue, error) => {
+        const value = await snapshot.getPromise(recoilValue);
+        if (value == null) {
+            throw (error !== null && error !== void 0 ? error : new Error(`No value present for required value ${recoilValue.key}`));
         }
-        else {
-            return () => {
-                return undefined;
+        return value;
+    };
+}
+function createTryGetPromiseWrapper(snapshot) {
+    return async (value) => {
+        try {
+            return { value: await snapshot.getPromise(value) };
+        }
+        catch (e) {
+            logger.debug(`Error encountered retrieving Recoil value. [key={${value.key}}]`, e);
+            return {
+                error: e,
             };
         }
-    }, [state.applyBindings, state.lastPressed]);
-};
-
-function useLongPress({ target, callback, delay = 500, onMovement, }) {
-    const [longPressTimeout, setLongPressTimeout] = React__namespace.useState();
-    const [touchStartPosition, setTouchStartPosition] = React__namespace.useState();
-    React__namespace.useEffect(() => {
-        const handleTouchStart = (e) => {
-            const event = e;
-            if (event.touches != null && event.touches.length === 1) {
-                if (longPressTimeout != null) {
-                    clearTimeout(longPressTimeout);
-                }
-                setTouchStartPosition(geometry.Point.create(event.touches[0].clientX, event.touches[0].clientY));
-                setLongPressTimeout(setTimeout(() => callback === null || callback === void 0 ? void 0 : callback(event), delay));
-            }
-        };
-        const handleTouchMove = (e) => {
-            const event = e;
-            if (event.touches != null &&
-                event.touches.length > 0 &&
-                longPressTimeout != null &&
-                touchStartPosition != null &&
-                geometry.Point.distance(touchStartPosition, geometry.Point.create(event.touches[0].clientX, event.touches[0].clientY)) >= 2) {
-                clearTimeout(longPressTimeout);
-                onMovement === null || onMovement === void 0 ? void 0 : onMovement();
-            }
-        };
-        const handleTouchEnd = () => {
-            if (longPressTimeout != null) {
-                clearTimeout(longPressTimeout);
-            }
-        };
-        target === null || target === void 0 ? void 0 : target.addEventListener('touchstart', handleTouchStart);
-        target === null || target === void 0 ? void 0 : target.addEventListener('touchmove', handleTouchMove);
-        target === null || target === void 0 ? void 0 : target.addEventListener('touchend', handleTouchEnd);
-        return () => {
-            target === null || target === void 0 ? void 0 : target.removeEventListener('touchstart', handleTouchStart);
-            target === null || target === void 0 ? void 0 : target.removeEventListener('touchmove', handleTouchMove);
-            target === null || target === void 0 ? void 0 : target.removeEventListener('touchend', handleTouchEnd);
-        };
-    }, [target, longPressTimeout, touchStartPosition]);
+    };
 }
 
-function contextMenuItemIsRow(item) {
-    var _a;
-    return item != null && ((_a = item === null || item === void 0 ? void 0 : item.node) === null || _a === void 0 ? void 0 : _a.id) != null;
-}
-const contextMenuActive = recoil.atom({
-    key: 'contextMenuActive',
-    default: undefined,
-});
-const contextMenuPosition = recoil.atom({
-    key: 'contextMenuPosition',
-    default: undefined,
-});
-const contextMenuTarget = recoil.atom({
-    key: 'contextMenuTarget',
+const viewerElement = recoil.atom({
+    key: 'viewerToolkitViewerElement',
     default: undefined,
+    dangerouslyAllowMutability: true,
 });
-const contextMenuItem = recoil.atom({
-    key: 'contextMenuItem',
-    default: undefined,
+const viewerInitialSceneReady = recoil.atom({
+    key: 'viewerInitialSceneReady',
+    default: false,
 });
-const contextMenuActions = recoil.atom({
-    key: 'contextMenuActions',
-    default: [],
+const viewerBaseInteractionHandlerProvider = recoil.atom({
+    key: 'viewerBaseInteractionHandlerProvider',
+    default: Promise.resolve(undefined),
+    dangerouslyAllowMutability: true,
 });
-const contextMenuActivePosition = recoil.selector({
-    key: 'contextMenuActivePosition',
-    get: ({ get }) => get(contextMenuActive) != null ? get(contextMenuPosition) : undefined,
-});
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
-// Create a new logger instance
-const pinoLogger = Pino({
-    formatters: {
-        level(level) {
-            return { level };
-        },
-    },
-});
-const logger = {
-    error: (message, error) => {
-        if (error != null) {
-            pinoLogger.error(error, message);
-        }
-        else {
-            pinoLogger.error(message);
-        }
-    },
-    info: (message, obj) => {
-        if (obj != null) {
-            pinoLogger.info(obj, message);
-        }
-        else {
-            pinoLogger.info(message);
-        }
-    },
-    warn: (message, err) => {
-        if (err != null) {
-            pinoLogger.warn(err, message);
-        }
-        else {
-            pinoLogger.warn(message);
-        }
-    },
-    debug: (message, obj) => {
-        if (obj != null) {
-            pinoLogger.debug(obj, message);
-        }
-        else {
-            pinoLogger.debug(message);
-        }
-    },
-};
-/* eslint-enable @typescript-eslint/no-explicit-any */
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-class DefaultRecoilDeps {
-}
-/**
- * Returns a Recoil callback that can be used for action hooks.
- *
- * This uses `useRecoilCallback` but the deps implementation differs from
- * Recoil. If no deps are provided, then it will always return the same function
- * vs returning a new function.
- *
- * If you want to use the original Recoil callback behavior, pass
- * `DefaultRecoilCallbackDepsBehavior`.
- *
- * @param fn The callback.
- * @param deps The deps to memoize over. Defaults to `[]`.
- * @returns A callback function
- * @see https://recoiljs.org/docs/api-reference/core/useRecoilCallback
- */
-function useActionCallback(fn, deps = []) {
-    const d = deps instanceof DefaultRecoilDeps ? undefined : deps;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    return recoil.useRecoilCallback((cbInterface) => fn(Object.assign(Object.assign({}, cbInterface), { snapshot: Object.defineProperties(cbInterface.snapshot, {
-            getPromiseRequired: {
-                configurable: true,
-                value: createGetPromiseRequiredWrapper(cbInterface.snapshot),
-            },
-            tryGetPromise: {
-                configurable: true,
-                value: createTryGetPromiseWrapper(cbInterface.snapshot),
-            },
-        }) })), d);
-}
-/**
- * Returns a callback that can be used with `useActionCallback` or `useRecoilCallback`,
- * and automatically handles retention of the `snapshot` object for use with asynchronous
- * selectors.
- *
- * This function expects a callback that would ordinarily be passed to `useActionCallback`
- * or `useRecoilCallback`, but that returns an asynchronous action where the `snapshot` is
- * used.
- *
- * @example
- *
- * const asyncSelector = selector({
- *   key: 'asyncSelector',
- *   get: async ({ get }) => {
- *     return await fetch('/api/item');
- *   }
- * })
- *
- * useActionCallback(
- *   retainSnapshot(
- *     ({ snapshot }) => async () => {
- *       const asyncValue = await snapshot.getPromise(asyncSelector);
- *     }
- *   )
- * )
- *
- * @param fn The callback.
- * @returns The callback wrapped with a retain/release of the underlying snapshot.
- */
-function retainSnapshot(fn) {
-    return (_a) => {
-        var { snapshot } = _a, cb = __rest(_a, ["snapshot"]);
-        return async (...args) => {
-            const release = snapshot.retain();
-            try {
-                const returnValue = await fn(Object.assign(Object.assign({}, cb), { snapshot }))(...args);
-                return returnValue;
-            }
-            finally {
-                release();
-            }
-        };
-    };
-}
-function createGetPromiseRequiredWrapper(snapshot) {
-    return async (recoilValue, error) => {
-        const value = await snapshot.getPromise(recoilValue);
-        if (value == null) {
-            throw (error !== null && error !== void 0 ? error : new Error(`No value present for required value ${recoilValue.key}`));
-        }
-        return value;
-    };
-}
-function createTryGetPromiseWrapper(snapshot) {
-    return async (value) => {
-        try {
-            return { value: await snapshot.getPromise(value) };
-        }
-        catch (e) {
-            logger.debug(`Error encountered retrieving Recoil value. [key={${value.key}}]`, e);
-            return {
-                error: e,
-            };
-        }
-    };
-}
-
-const viewerElement = recoil.atom({
-    key: 'viewerToolkitViewerElement',
-    default: undefined,
-    dangerouslyAllowMutability: true,
-});
-const viewerInitialSceneReady = recoil.atom({
-    key: 'viewerInitialSceneReady',
-    default: false,
-});
-const viewerBaseInteractionHandlerProvider = recoil.atom({
-    key: 'viewerBaseInteractionHandlerProvider',
-    default: Promise.resolve(undefined),
-    dangerouslyAllowMutability: true,
-});
-const viewerPrimaryInteractionType = recoil.atom({
-    key: 'viewerPrimaryInteractionType',
-    default: 'rotate',
+const viewerPrimaryInteractionType = recoil.atom({
+    key: 'viewerPrimaryInteractionType',
+    default: 'rotate',
 });
 
 const viewerSceneProvider = recoil.selector({
@@ -1155,27 +890,27 @@ function useCrossSectioningActions() {
 }
 
 var index$3 = /*#__PURE__*/Object.freeze({
-   __proto__: null,
-   DEFAULT_ALIGN_TO_PLANE_ANIMATION_DURATION_MS: DEFAULT_ALIGN_TO_PLANE_ANIMATION_DURATION_MS,
-   DEFAULT_SLIDER_RANGE: DEFAULT_SLIDER_RANGE,
-   crossSectioningActiveAxis: crossSectioningActiveAxis,
-   crossSectioningAdditionalToolsOpen: crossSectioningAdditionalToolsOpen,
-   crossSectioningAlignment: crossSectioningAlignment,
-   crossSectioningAlignmentToolsOpen: crossSectioningAlignmentToolsOpen,
-   crossSectioningAvailableAxes: crossSectioningAvailableAxes,
-   crossSectioningAxisToolsOpen: crossSectioningAxisToolsOpen,
-   crossSectioningBorderWidth: crossSectioningBorderWidth,
-   crossSectioningEnabled: crossSectioningEnabled,
-   crossSectioningHighlightColor: crossSectioningHighlightColor,
-   crossSectioningInteractionHandler: crossSectioningInteractionHandler,
-   crossSectioningIsInteractive: crossSectioningIsInteractive,
-   crossSectioningOffsetScalar: crossSectioningOffsetScalar,
-   crossSectioningPlaneDisplayOffset: crossSectioningPlaneDisplayOffset,
-   crossSectioningPlanes: crossSectioningPlanes,
-   crossSectioningSliderRange: crossSectioningSliderRange,
-   crossSectioningTargetBoundingBox: crossSectioningTargetBoundingBox,
-   useCrossSectioning: useCrossSectioning,
-   useCrossSectioningActions: useCrossSectioningActions
+  __proto__: null,
+  DEFAULT_ALIGN_TO_PLANE_ANIMATION_DURATION_MS: DEFAULT_ALIGN_TO_PLANE_ANIMATION_DURATION_MS,
+  DEFAULT_SLIDER_RANGE: DEFAULT_SLIDER_RANGE,
+  crossSectioningActiveAxis: crossSectioningActiveAxis,
+  crossSectioningAdditionalToolsOpen: crossSectioningAdditionalToolsOpen,
+  crossSectioningAlignment: crossSectioningAlignment,
+  crossSectioningAlignmentToolsOpen: crossSectioningAlignmentToolsOpen,
+  crossSectioningAvailableAxes: crossSectioningAvailableAxes,
+  crossSectioningAxisToolsOpen: crossSectioningAxisToolsOpen,
+  crossSectioningBorderWidth: crossSectioningBorderWidth,
+  crossSectioningEnabled: crossSectioningEnabled,
+  crossSectioningHighlightColor: crossSectioningHighlightColor,
+  crossSectioningInteractionHandler: crossSectioningInteractionHandler,
+  crossSectioningIsInteractive: crossSectioningIsInteractive,
+  crossSectioningOffsetScalar: crossSectioningOffsetScalar,
+  crossSectioningPlaneDisplayOffset: crossSectioningPlaneDisplayOffset,
+  crossSectioningPlanes: crossSectioningPlanes,
+  crossSectioningSliderRange: crossSectioningSliderRange,
+  crossSectioningTargetBoundingBox: crossSectioningTargetBoundingBox,
+  useCrossSectioning: useCrossSectioning,
+  useCrossSectioningActions: useCrossSectioningActions
 });
 
 const useHitActions = () => {
@@ -1225,108 +960,407 @@ const useHitActions = () => {
                     updateTransformWidgetPosition();
                 }
             }
-            setContextMenuItem();
-            crossSectioningActions.sectionCurrentHit();
-            setCurrentHitResult();
-        })),
-        longPress: useActionCallback(retainSnapshot(({ snapshot, set, reset }) => async (event) => {
-            reset(hitResultsTapDetails);
-            set(hitResultsLongPressDetails, event.detail);
-            await snapshot.tryGetPromise(hitResult);
-            setContextMenuItem();
-            setCurrentHitResult();
-        })),
-    };
-};
-
-const hitState = recoil.selector({
-    key: 'viewerToolkitHitState',
-    get: ({ get }) => {
-        const tapDetails = get(hitResultsTapDetails);
-        const longPressDetails = get(hitResultsLongPressDetails);
-        const previous = get(previousHitResult);
-        const current = get(currentHitResult);
-        const state = {
-            tapDetails,
-            longPressDetails,
-            previousHitResult: previous,
-            currentHitResult: current,
+            setContextMenuItem();
+            crossSectioningActions.sectionCurrentHit();
+            setCurrentHitResult();
+        })),
+        longPress: useActionCallback(retainSnapshot(({ snapshot, set, reset }) => async (event) => {
+            reset(hitResultsTapDetails);
+            set(hitResultsLongPressDetails, event.detail);
+            await snapshot.tryGetPromise(hitResult);
+            setContextMenuItem();
+            setCurrentHitResult();
+        })),
+    };
+};
+
+const hitState = recoil.selector({
+    key: 'viewerToolkitHitState',
+    get: ({ get }) => {
+        const tapDetails = get(hitResultsTapDetails);
+        const longPressDetails = get(hitResultsLongPressDetails);
+        const previous = get(previousHitResult);
+        const current = get(currentHitResult);
+        const state = {
+            tapDetails,
+            longPressDetails,
+            previousHitResult: previous,
+            currentHitResult: current,
+        };
+        return state;
+    },
+});
+
+var index$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  currentHitResult: currentHitResult,
+  hitResult: hitResult,
+  hitResultsLongPressDetails: hitResultsLongPressDetails,
+  hitResultsSkipNextTap: hitResultsSkipNextTap,
+  hitResultsTapDetails: hitResultsTapDetails,
+  hitState: hitState,
+  previousHitResult: previousHitResult,
+  useHitActions: useHitActions
+});
+
+function useContextMenuActions() {
+    return {
+        pointerDown: useActionCallback(({ set }) => async (event, pointOverride) => {
+            var _a, _b;
+            if (event.button === 2) {
+                const xCoordinate = (_a = pointOverride === null || pointOverride === void 0 ? void 0 : pointOverride.x) !== null && _a !== void 0 ? _a : event.clientX;
+                const yCoordinate = (_b = pointOverride === null || pointOverride === void 0 ? void 0 : pointOverride.y) !== null && _b !== void 0 ? _b : event === null || event === void 0 ? void 0 : event.clientY;
+                set(contextMenuPosition, geometry.Point.create(xCoordinate, yCoordinate));
+                set(contextMenuTarget, event.target);
+            }
+        }),
+        pointerUp: useActionCallback(({ snapshot, set }) => async (event, type, predicate, onOpen, pointOverride) => {
+            var _a, _b;
+            const downPosition = await snapshot.getPromise(contextMenuPosition);
+            const active = await snapshot.getPromise(contextMenuActive);
+            if (downPosition != null && active == null) {
+                const xCoordinate = (_a = pointOverride === null || pointOverride === void 0 ? void 0 : pointOverride.x) !== null && _a !== void 0 ? _a : event.clientX;
+                const yCoordinate = (_b = pointOverride === null || pointOverride === void 0 ? void 0 : pointOverride.y) !== null && _b !== void 0 ? _b : event === null || event === void 0 ? void 0 : event.clientY;
+                const point = geometry.Point.create(xCoordinate, yCoordinate);
+                const pointDistance = downPosition != null ? geometry.Point.distance(downPosition, point) : 0;
+                const predicateResult = predicate == null || predicate(event);
+                if (pointDistance < 2 && predicateResult) {
+                    onOpen === null || onOpen === void 0 ? void 0 : onOpen(event, downPosition !== null && downPosition !== void 0 ? downPosition : point);
+                    set(contextMenuActive, type);
+                }
+            }
+        }),
+        contextMenu: useActionCallback(() => (event, predicate) => {
+            if (predicate == null || predicate(event)) {
+                event.preventDefault();
+            }
+        }),
+        longPress: useActionCallback(({ set }) => (event, type, predicate, onOpen) => {
+            if (predicate == null || predicate(event)) {
+                const point = geometry.Point.create(event.touches[0].clientX, event.touches[0].clientY);
+                set(contextMenuPosition, point);
+                set(contextMenuTarget, event.target);
+                set(contextMenuActive, type);
+                onOpen === null || onOpen === void 0 ? void 0 : onOpen(event, point);
+            }
+        }),
+        clearActiveContextMenu: useActionCallback(({ reset, set }) => (dismissedFromWindowPointerEvent) => {
+            set(hitResultsSkipNextTap, !!dismissedFromWindowPointerEvent);
+            reset(contextMenuActive);
+            reset(contextMenuActions);
+            reset(contextMenuPosition);
+        }),
+        clearDismissedState: useActionCallback(({ reset }) => () => reset(hitResultsSkipNextTap)),
+    };
+}
+
+function targetWithinMenu(event) {
+    return (event.target instanceof Element && isChildOf('vertex-menu', event.target));
+}
+function targetShouldSkipNextHit(event) {
+    return (event.target instanceof Element && isChildOf('vertex-viewer', event.target));
+}
+function isChildOf(elementType, target) {
+    return target.closest(elementType) != null;
+}
+
+const isInputElement = (target) => {
+    const isAutoResizeTextarea = target instanceof HTMLElement &&
+        target.tagName === 'VERTEX-AUTO-RESIZE-TEXTAREA';
+    const isTextField = target instanceof HTMLElement && target.tagName === 'VERTEX-TEXTFIELD';
+    const isContentEditable = target instanceof HTMLElement && target.contentEditable === 'true';
+    const isSceneTreeSearch = target instanceof HTMLElement &&
+        target.tagName === 'VERTEX-SCENE-TREE-SEARCH';
+    const isInput = target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement;
+    const isVertexViewerPinTool = target instanceof HTMLElement &&
+        target.tagName === 'VERTEX-VIEWER-PIN-TOOL';
+    const isVertexViewerTransformWidget = target instanceof HTMLElement &&
+        target.tagName === 'VERTEX-VIEWER-TRANSFORM-WIDGET';
+    return (isAutoResizeTextarea ||
+        isTextField ||
+        isContentEditable ||
+        isSceneTreeSearch ||
+        isInput ||
+        isVertexViewerPinTool ||
+        isVertexViewerTransformWidget);
+};
+
+// DEPRECATED - avoid if possible
+const useRecoilReducer = ({ reducer, atom, }) => {
+    const state = recoil.useRecoilValue(atom);
+    const dispatch = useRecoilReducerDispatch({
+        reducer,
+        atom,
+    });
+    return [state, dispatch];
+};
+// DEPRECATED - avoid if possible
+const useRecoilReducerDispatch = ({ reducer, atom, }) => {
+    const dispatch = recoil.useRecoilCallback(({ set }) => async (action) => {
+        set(atom, (previousValue) => reducer(previousValue, action));
+    }, []);
+    return dispatch;
+};
+
+const keyBindings = recoil.atom({
+    key: 'keyBindings',
+    default: {
+        applyBindings: [],
+        bindings: {},
+        pressed: {},
+    },
+});
+function reducer(state, action) {
+    var _a, _b, _c, _d;
+    switch (action.type) {
+        case 'push-key-binding':
+            const toAdd = (_a = state.bindings[action.binding.keyBind]) === null || _a === void 0 ? void 0 : _a.find((b) => b.id === action.binding.id);
+            return toAdd != null
+                ? state
+                : Object.assign(Object.assign({}, state), { bindings: Object.assign(Object.assign({}, state.bindings), { [action.binding.keyBind]: [
+                            ...((_b = state.bindings[action.binding.keyBind]) !== null && _b !== void 0 ? _b : []),
+                            action.binding,
+                        ] }) });
+        case 'remove-key-binding':
+            const toRemove = (_c = state.bindings[action.binding.keyBind]) === null || _c === void 0 ? void 0 : _c.find((b) => b.id === action.binding.id);
+            return toRemove == null
+                ? state
+                : Object.assign(Object.assign({}, state), { bindings: Object.assign(Object.assign({}, state.bindings), { [action.binding.keyBind]: ((_d = state.bindings[action.binding.keyBind]) !== null && _d !== void 0 ? _d : []).filter((b) => b.id !== action.binding.id) }) });
+        case 'add-apply-key-binding':
+            return Object.assign(Object.assign({}, state), { applyBindings: [...state.applyBindings, action.binding] });
+        case 'remove-apply-key-binding':
+            return Object.assign(Object.assign({}, state), { applyBindings: state.applyBindings.filter((binding) => binding.id !== action.id) });
+        case 'set-key-pressed':
+            return Object.assign(Object.assign({}, state), { applyBindings: state.applyBindings.map((binding) => (Object.assign(Object.assign({}, binding), { active: binding.keyBind != null &&
+                        allPressed(binding.keyBind, state.pressed) }))), pressed: Object.assign(Object.assign({}, state.pressed), { [action.key]: action.pressed }), lastPressed: action.pressed ? action.key : undefined });
+    }
+}
+const useKeyBindingState = () => {
+    return useRecoilReducer({
+        reducer,
+        atom: keyBindings,
+    });
+};
+function pressedValue(keyBind, pressed) {
+    return keyBind.includes('!')
+        ? !pressed[keyBind.replace('!', '')] &&
+            !pressed[keyBind.replace('!', '').toLowerCase()]
+        : pressed[keyBind] || pressed[keyBind.toLowerCase()];
+}
+function isPressed(keyBind, pressed) {
+    const keys = keyBind.split('||');
+    return keys.length > 1
+        ? keys.some((key) => pressedValue(key, pressed))
+        : pressedValue(keys[0], pressed);
+}
+function allPressed(keyBind, pressed) {
+    const keys = keyBind.split('+');
+    return keys.every((key) => isPressed(key, pressed));
+}
+function matchingSingleFnBindings(applyBindings, pressed, lastPressed) {
+    return applyBindings
+        .filter((binding) => !binding.repeat)
+        .filter((binding) => {
+        var _a;
+        return binding.keyBind != null &&
+            lastPressed != null &&
+            ((_a = binding.keyBind) === null || _a === void 0 ? void 0 : _a.includes(lastPressed)) &&
+            allPressed(binding.keyBind, pressed);
+    })
+        .map((binding) => binding.fn);
+}
+function matchingOffBindings(applyBindings, pressed, lastPressed) {
+    return applyBindings
+        .filter((binding) => binding.off &&
+        binding.active &&
+        binding.keyBind != null &&
+        lastPressed == null &&
+        !allPressed(binding.keyBind, pressed))
+        .map((binding) => binding.off);
+}
+/**
+ * Depends on `useKeyBindings`.
+ *
+ * Adds a global key binding. Any key binding
+ * added this way will listen to global state for pressed
+ * keys, and executed whenever the key state matches the
+ * provided `keyBind`.
+ *
+ * @param binding - The `ApplyKeyBinding` to add.
+ */
+const useApplyKeyBinding = (binding) => {
+    const [state, dispatch] = useKeyBindingState();
+    React.useEffect(() => {
+        const id = utils.UUID.create();
+        dispatch({
+            type: 'add-apply-key-binding',
+            binding: Object.assign(Object.assign({}, binding), { id, active: binding.keyBind != null && allPressed(binding.keyBind, state.pressed) }),
+        });
+        return () => {
+            dispatch({
+                type: 'remove-apply-key-binding',
+                id,
+            });
+        };
+    }, [binding.fn, binding.off, binding.keyBind, binding.repeat]);
+};
+/**
+ * Depends on `useKeyBindings`.
+ *
+ * Adds a stack-based key binding. Any key binding
+ * added this way will be added to an existing (or new)
+ * stack for the specified `keyBind`.
+ *
+ * Provided `binding`s will be added and cancelled based
+ * on the specified `addPredicate` and `cancelPredicate`
+ * respectively. These predicates are evaluated any time
+ * that the `deps` array changes.
+ *
+ * @param binding - The `StackKeyBinding` to add.
+ * @param deps (optional) - The React dependency list.
+ */
+const useStackKeyBinding = (binding, deps = []) => {
+    const [, dispatch] = useKeyBindingState();
+    React.useEffect(() => {
+        const addPredicatePassing = binding.addPredicate == null || binding.addPredicate();
+        const cancelPredicatePassing = binding.cancelPredicate != null && binding.cancelPredicate();
+        if (addPredicatePassing) {
+            dispatch({
+                type: 'push-key-binding',
+                binding,
+            });
+        }
+        if (cancelPredicatePassing) {
+            dispatch({
+                type: 'remove-key-binding',
+                binding,
+            });
+        }
+    }, deps);
+};
+/**
+ * Enables key binding usage.
+ *
+ * This hook must appear in the tree for `useStackKeyBinding`
+ * or `useApplyKeyBinding` to work.
+ */
+const useKeyBindings = ({ keydownRepeatInterval = 25, keydownIgnorePredicate = isInputElement, } = {}) => {
+    const [state, dispatch] = useKeyBindingState();
+    const applyStackKeyBindings = React.useCallback((key) => {
+        Object.keys(state.bindings)
+            .filter((k) => k.includes(key) && allPressed(k, Object.assign(Object.assign({}, state.pressed), { [key]: true })))
+            .forEach((k) => {
+            const bindings = state.bindings[k];
+            const poppedBinding = bindings.length > 0 ? bindings[bindings.length - 1] : undefined;
+            if (poppedBinding != null) {
+                poppedBinding.fn();
+                dispatch({
+                    type: 'remove-key-binding',
+                    binding: poppedBinding,
+                });
+            }
+        });
+    }, [state]);
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!event.repeat && !keydownIgnorePredicate(event.target)) {
+                dispatch({
+                    type: 'set-key-pressed',
+                    key: event.key,
+                    pressed: true,
+                });
+                applyStackKeyBindings(event.key);
+                // If the key is associated with a keybinding, then prevent default behavior
+                const currentPressed = Object.assign(Object.assign({}, state.pressed), { [event.key]: true });
+                const activeMatchesSingleFnBindings = matchingSingleFnBindings(state.applyBindings, currentPressed, event.key);
+                const activeMatchesOffBindings = matchingOffBindings(state.applyBindings, currentPressed, event.key);
+                if (activeMatchesSingleFnBindings.length > 0 ||
+                    activeMatchesOffBindings.length > 0) {
+                    event.preventDefault();
+                }
+            }
         };
-        return state;
-    },
-});
-
-var index$2 = /*#__PURE__*/Object.freeze({
-   __proto__: null,
-   currentHitResult: currentHitResult,
-   hitResult: hitResult,
-   hitResultsLongPressDetails: hitResultsLongPressDetails,
-   hitResultsSkipNextTap: hitResultsSkipNextTap,
-   hitResultsTapDetails: hitResultsTapDetails,
-   hitState: hitState,
-   previousHitResult: previousHitResult,
-   useHitActions: useHitActions
-});
+        const handleKeyUp = (event) => {
+            dispatch({
+                type: 'set-key-pressed',
+                key: event.key,
+                pressed: false,
+            });
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keyup', handleKeyUp);
+        };
+    }, [applyStackKeyBindings, state.applyBindings, state.pressed]);
+    React.useEffect(() => {
+        const activeMatchesSingleFnBindings = matchingSingleFnBindings(state.applyBindings, state.pressed, state.lastPressed);
+        const activeMatchesOffBindings = matchingOffBindings(state.applyBindings, state.pressed, state.lastPressed);
+        activeMatchesSingleFnBindings.forEach((fn) => fn());
+        activeMatchesOffBindings.forEach((fn) => fn());
+    }, [state.pressed, state.lastPressed]);
+    React.useEffect(() => {
+        const matchingRepeatBindings = state.applyBindings
+            .filter((binding) => binding.repeat &&
+            binding.keyBind != null &&
+            allPressed(binding.keyBind, state.pressed))
+            .map((binding) => binding.fn);
+        if (matchingRepeatBindings.length > 0) {
+            const interval = setInterval(() => {
+                matchingRepeatBindings.forEach((fn) => fn());
+            }, keydownRepeatInterval);
+            return () => {
+                clearInterval(interval);
+            };
+        }
+        else {
+            return () => {
+                return undefined;
+            };
+        }
+    }, [state.applyBindings, state.lastPressed]);
+};
 
-function useContextMenuActions() {
-    return {
-        pointerDown: useActionCallback(({ set }) => async (event, pointOverride) => {
-            var _a, _b;
-            if (event.button === 2) {
-                const xCoordinate = (_a = pointOverride === null || pointOverride === void 0 ? void 0 : pointOverride.x) !== null && _a !== void 0 ? _a : event.clientX;
-                const yCoordinate = (_b = pointOverride === null || pointOverride === void 0 ? void 0 : pointOverride.y) !== null && _b !== void 0 ? _b : event === null || event === void 0 ? void 0 : event.clientY;
-                set(contextMenuPosition, geometry.Point.create(xCoordinate, yCoordinate));
-                set(contextMenuTarget, event.target);
-            }
-        }),
-        pointerUp: useActionCallback(({ snapshot, set }) => async (event, type, predicate, onOpen, pointOverride) => {
-            var _a, _b;
-            const downPosition = await snapshot.getPromise(contextMenuPosition);
-            const active = await snapshot.getPromise(contextMenuActive);
-            if (downPosition != null && active == null) {
-                const xCoordinate = (_a = pointOverride === null || pointOverride === void 0 ? void 0 : pointOverride.x) !== null && _a !== void 0 ? _a : event.clientX;
-                const yCoordinate = (_b = pointOverride === null || pointOverride === void 0 ? void 0 : pointOverride.y) !== null && _b !== void 0 ? _b : event === null || event === void 0 ? void 0 : event.clientY;
-                const point = geometry.Point.create(xCoordinate, yCoordinate);
-                const pointDistance = downPosition != null ? geometry.Point.distance(downPosition, point) : 0;
-                const predicateResult = predicate == null || predicate(event);
-                if (pointDistance < 2 && predicateResult) {
-                    onOpen === null || onOpen === void 0 ? void 0 : onOpen(event, downPosition !== null && downPosition !== void 0 ? downPosition : point);
-                    set(contextMenuActive, type);
+function useLongPress({ target, callback, delay = 500, onMovement, }) {
+    const [longPressTimeout, setLongPressTimeout] = React__namespace.useState();
+    const [touchStartPosition, setTouchStartPosition] = React__namespace.useState();
+    React__namespace.useEffect(() => {
+        const handleTouchStart = (e) => {
+            const event = e;
+            if (event.touches != null && event.touches.length === 1) {
+                if (longPressTimeout != null) {
+                    clearTimeout(longPressTimeout);
                 }
+                setTouchStartPosition(geometry.Point.create(event.touches[0].clientX, event.touches[0].clientY));
+                setLongPressTimeout(setTimeout(() => callback === null || callback === void 0 ? void 0 : callback(event), delay));
             }
-        }),
-        contextMenu: useActionCallback(() => (event, predicate) => {
-            if (predicate == null || predicate(event)) {
-                event.preventDefault();
+        };
+        const handleTouchMove = (e) => {
+            const event = e;
+            if (event.touches != null &&
+                event.touches.length > 0 &&
+                longPressTimeout != null &&
+                touchStartPosition != null &&
+                geometry.Point.distance(touchStartPosition, geometry.Point.create(event.touches[0].clientX, event.touches[0].clientY)) >= 2) {
+                clearTimeout(longPressTimeout);
+                onMovement === null || onMovement === void 0 ? void 0 : onMovement();
             }
-        }),
-        longPress: useActionCallback(({ set }) => (event, type, predicate, onOpen) => {
-            if (predicate == null || predicate(event)) {
-                const point = geometry.Point.create(event.touches[0].clientX, event.touches[0].clientY);
-                set(contextMenuPosition, point);
-                set(contextMenuTarget, event.target);
-                set(contextMenuActive, type);
-                onOpen === null || onOpen === void 0 ? void 0 : onOpen(event, point);
+        };
+        const handleTouchEnd = () => {
+            if (longPressTimeout != null) {
+                clearTimeout(longPressTimeout);
             }
-        }),
-        clearActiveContextMenu: useActionCallback(({ reset, set }) => (dismissedFromWindowPointerEvent) => {
-            set(hitResultsSkipNextTap, !!dismissedFromWindowPointerEvent);
-            reset(contextMenuActive);
-            reset(contextMenuActions);
-            reset(contextMenuPosition);
-        }),
-        clearDismissedState: useActionCallback(({ reset }) => () => reset(hitResultsSkipNextTap)),
-    };
-}
-
-function targetWithinMenu(event) {
-    return (event.target instanceof Element && isChildOf('vertex-menu', event.target));
-}
-function targetShouldSkipNextHit(event) {
-    return (event.target instanceof Element && isChildOf('vertex-viewer', event.target));
-}
-function isChildOf(elementType, target) {
-    return target.closest(elementType) != null;
+        };
+        target === null || target === void 0 ? void 0 : target.addEventListener('touchstart', handleTouchStart);
+        target === null || target === void 0 ? void 0 : target.addEventListener('touchmove', handleTouchMove);
+        target === null || target === void 0 ? void 0 : target.addEventListener('touchend', handleTouchEnd);
+        return () => {
+            target === null || target === void 0 ? void 0 : target.removeEventListener('touchstart', handleTouchStart);
+            target === null || target === void 0 ? void 0 : target.removeEventListener('touchmove', handleTouchMove);
+            target === null || target === void 0 ? void 0 : target.removeEventListener('touchend', handleTouchEnd);
+        };
+    }, [target, longPressTimeout, touchStartPosition]);
 }
 
 const VertexContextMenu = ({ targetElement, menuType, disableBackdrop, openPredicate, onOpen, onClose, children, }) => {
@@ -1378,7 +1412,9 @@ const VertexContextMenu = ({ targetElement, menuType, disableBackdrop, openPredi
             var _a, _b;
             const pointerEvent = event;
             const targetElement = target;
-            const boundingBox = targetElement != null ? targetElement.getBoundingClientRect() : undefined;
+            const boundingBox = targetElement != null
+                ? targetElement.getBoundingClientRect()
+                : undefined;
             const xCoordinate = pointerEvent.clientX - ((_a = boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.x) !== null && _a !== void 0 ? _a : 0);
             const yCoordinate = pointerEvent.clientY - ((_b = boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.y) !== null && _b !== void 0 ? _b : 0);
             contextMenuActions.pointerDown(pointerEvent, geometry.Point.create(xCoordinate, yCoordinate));
@@ -1387,7 +1423,9 @@ const VertexContextMenu = ({ targetElement, menuType, disableBackdrop, openPredi
             var _a, _b;
             const pointerEvent = event;
             const targetElement = target;
-            const boundingBox = targetElement != null ? targetElement.getBoundingClientRect() : undefined;
+            const boundingBox = targetElement != null
+                ? targetElement.getBoundingClientRect()
+                : undefined;
             const xCoordinate = pointerEvent.clientX - ((_a = boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.x) !== null && _a !== void 0 ? _a : 0);
             const yCoordinate = pointerEvent.clientY - ((_b = boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.y) !== null && _b !== void 0 ? _b : 0);
             contextMenuActions.pointerUp(event, menuType, openPredicate, onOpen, geometry.Point.create(xCoordinate, yCoordinate));
@@ -1647,18 +1685,18 @@ const selectionState = recoil.selector({
 });
 
 var index$1 = /*#__PURE__*/Object.freeze({
-   __proto__: null,
-   selectionHighestSelectedAncestor: selectionHighestSelectedAncestor,
-   selectionLastSelectWasMultiSelect: selectionLastSelectWasMultiSelect,
-   selectionLastSelected: selectionLastSelected,
-   selectionLastSelectionFromViewer: selectionLastSelectionFromViewer,
-   selectionPreviousVisibleSummary: selectionPreviousVisibleSummary,
-   selectionSelectedItemIds: selectionSelectedItemIds,
-   selectionSelectedItems: selectionSelectedItems,
-   selectionState: selectionState,
-   selectionVisibleCount: selectionVisibleCount,
-   selectionVisibleSummary: selectionVisibleSummary,
-   useSelectionActions: useSelectionActions
+  __proto__: null,
+  selectionHighestSelectedAncestor: selectionHighestSelectedAncestor,
+  selectionLastSelectWasMultiSelect: selectionLastSelectWasMultiSelect,
+  selectionLastSelected: selectionLastSelected,
+  selectionLastSelectionFromViewer: selectionLastSelectionFromViewer,
+  selectionPreviousVisibleSummary: selectionPreviousVisibleSummary,
+  selectionSelectedItemIds: selectionSelectedItemIds,
+  selectionSelectedItems: selectionSelectedItems,
+  selectionState: selectionState,
+  selectionVisibleCount: selectionVisibleCount,
+  selectionVisibleSummary: selectionVisibleSummary,
+  useSelectionActions: useSelectionActions
 });
 
 const VertexFitSelectedMenuItem = () => {
@@ -1678,16 +1716,14 @@ const VertexFlyToMenuItem = () => {
     return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "fly-to-part-menu-option", onClick: () => {
             var _a;
             const isRow = contextMenuItemIsRow(currentItem);
-            const itemId = isRow
-                ? (_a = currentItem === null || currentItem === void 0 ? void 0 : currentItem.node.id) === null || _a === void 0 ? void 0 : _a.hex
-                : currentItem === null || currentItem === void 0 ? void 0 : currentItem.id;
+            const itemId = isRow ? (_a = currentItem === null || currentItem === void 0 ? void 0 : currentItem.node.id) === null || _a === void 0 ? void 0 : _a.hex : currentItem === null || currentItem === void 0 ? void 0 : currentItem.id;
             if (itemId != null) {
                 cameraActions.flyToById(itemId);
             }
         }, disabled: currentItem == null, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "paper-airplane", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Fly To" })] }));
 };
 
-function useSceneItemsOperations({ viewerElement }) {
+function useSceneItemsOperations({ viewerElement, }) {
     const sceneItemsOperation = React.useCallback(async (f, ids) => {
         const scene = await (viewerElement === null || viewerElement === void 0 ? void 0 : viewerElement.scene());
         if (ids == null) {
@@ -1733,7 +1769,9 @@ function useSceneItemsOperations({ viewerElement }) {
 
 const VertexHideAllMenuItem = () => {
     const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
-    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
+    const sceneItemOperations = useSceneItemsOperations({
+        viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null,
+    });
     return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "hide-all-menu-option", onClick: () => {
             sceneItemOperations.sceneItemsOperation((builder) => builder.hide());
         }, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Hide All Parts" })] }));
@@ -1742,13 +1780,13 @@ const VertexHideAllMenuItem = () => {
 const VertexHidePartMenuItem = () => {
     const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
     const currentItem = recoil.useRecoilValue(contextMenuItem);
-    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
+    const sceneItemOperations = useSceneItemsOperations({
+        viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null,
+    });
     return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "hide-menu-option", onClick: () => {
             var _a;
             const isRow = contextMenuItemIsRow(currentItem);
-            const itemId = isRow
-                ? (_a = currentItem === null || currentItem === void 0 ? void 0 : currentItem.node.id) === null || _a === void 0 ? void 0 : _a.hex
-                : currentItem.id;
+            const itemId = isRow ? (_a = currentItem === null || currentItem === void 0 ? void 0 : currentItem.node.id) === null || _a === void 0 ? void 0 : _a.hex : currentItem.id;
             if (itemId != null) {
                 sceneItemOperations.sceneItemsOperation((builder) => builder.hide(), [itemId]);
             }
@@ -1758,13 +1796,17 @@ const VertexHidePartMenuItem = () => {
 const VertexHideSelectedMenuItem = () => {
     const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
     const selectedItems = recoil.useRecoilValue(selectionSelectedItemIds);
-    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
+    const sceneItemOperations = useSceneItemsOperations({
+        viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null,
+    });
     return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "hide-selected-menu-option", onClick: () => sceneItemOperations.hideSelected(), disabled: selectedItems.length === 0, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Hide Selected" })] }));
 };
 
 const VertexShowAllMenuItem = () => {
     const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
-    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
+    const sceneItemOperations = useSceneItemsOperations({
+        viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null,
+    });
     return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "show-all-menu-option", onClick: () => {
             sceneItemOperations.sceneItemsOperation((builder) => builder.show());
         }, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Show All Parts" })] }));
@@ -1773,13 +1815,13 @@ const VertexShowAllMenuItem = () => {
 const VertexShowOnlyMenuItem = () => {
     const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
     const currentItem = recoil.useRecoilValue(contextMenuItem);
-    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
+    const sceneItemOperations = useSceneItemsOperations({
+        viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null,
+    });
     return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "show-only-menu-option", onClick: () => {
             var _a;
             const isRow = contextMenuItemIsRow(currentItem);
-            const itemId = isRow
-                ? (_a = currentItem === null || currentItem === void 0 ? void 0 : currentItem.node.id) === null || _a === void 0 ? void 0 : _a.hex
-                : currentItem === null || currentItem === void 0 ? void 0 : currentItem.id;
+            const itemId = isRow ? (_a = currentItem === null || currentItem === void 0 ? void 0 : currentItem.node.id) === null || _a === void 0 ? void 0 : _a.hex : currentItem === null || currentItem === void 0 ? void 0 : currentItem.id;
             if (itemId != null) {
                 sceneItemOperations.showOnlyItem(itemId);
             }
@@ -1789,7 +1831,9 @@ const VertexShowOnlyMenuItem = () => {
 const VertexShowOnlySelectedMenuItem = () => {
     const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
     const selectedItems = recoil.useRecoilValue(selectionSelectedItemIds);
-    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
+    const sceneItemOperations = useSceneItemsOperations({
+        viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null,
+    });
     return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "show-only-selected-menu-option", onClick: () => sceneItemOperations.showOnlySelected(), disabled: selectedItems.length === 0, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Show Only Selected" })] }));
 };
 
@@ -1874,16 +1918,14 @@ const DefaultSceneTreeContextMenu = () => {
     return (jsxRuntime.jsxs("div", { className: "w-56", children: [jsxRuntime.jsx(VertexHideSelectedMenuItem, {}), jsxRuntime.jsx(VertexHideAllMenuItem, {}), jsxRuntime.jsx(VertexShowOnlyMenuItem, {}), jsxRuntime.jsx(VertexShowOnlySelectedMenuItem, {}), jsxRuntime.jsx(VertexShowAllMenuItem, {}), jsxRuntime.jsx(uiReact.VertexMenuDivider, { className: "md:contents hidden short:hidden" }), jsxRuntime.jsx(VertexFitSelectedMenuItem, {}), jsxRuntime.jsx(VertexFlyToMenuItem, {})] }));
 };
 
-const VertexSceneTreeContextMenu = ({ children }) => {
+const VertexSceneTreeContextMenu = ({ children, }) => {
     const sceneTreeActions = useSceneTreeActions();
     const sceneTreeHTMLElement = recoil.useRecoilValue(sceneTreeElement);
     const hasDefinedChildren = children != null && children !== false;
     return (jsxRuntime.jsx(VertexContextMenu, { menuType: "scene-tree", targetElement: sceneTreeHTMLElement, onOpen: async (event, _pt) => {
             const pointerEvent = event;
             await sceneTreeActions.setContextMenuItem(pointerEvent.clientY);
-        }, disableBackdrop: true, children: hasDefinedChildren
-            ? (children)
-            : (jsxRuntime.jsx(DefaultSceneTreeContextMenu, {})) }));
+        }, disableBackdrop: true, children: hasDefinedChildren ? children : jsxRuntime.jsx(DefaultSceneTreeContextMenu, {}) }));
 };
 
 const DefaultViewerContextMenu = () => {
@@ -1893,9 +1935,7 @@ const DefaultViewerContextMenu = () => {
 const VertexViewerContextMenu = ({ children }) => {
     const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
     const hasDefinedChildren = children != null && children !== false;
-    return (jsxRuntime.jsx(VertexContextMenu, { menuType: "viewer", targetElement: viewerHTMLElement, disableBackdrop: true, children: hasDefinedChildren
-            ? (children)
-            : (jsxRuntime.jsx(DefaultViewerContextMenu, {})) }));
+    return (jsxRuntime.jsx(VertexContextMenu, { menuType: "viewer", targetElement: viewerHTMLElement, disableBackdrop: true, children: hasDefinedChildren ? children : jsxRuntime.jsx(DefaultViewerContextMenu, {}) }));
 };
 
 const sdkConfig = recoil.atom({
@@ -1945,6 +1985,24 @@ function styleFromFontFace(fontFace) {
     }
 }
 
+const VertexSceneTreeCollapseAll = () => {
+    const sceneTreeHTMLElement = recoil.useRecoilValue(sceneTreeElement);
+    return (jsxRuntime.jsx(uiReact.VertexTooltip, { className: "w-auto", content: "Collapse All", placement: "top", children: jsxRuntime.jsx(uiReact.VertexIcon, { size: "sm", className: "h-6 w-6 hover:bg-neutral-300 rounded cursor-pointer", "data-testid": "collapse-all-icon", name: "collapse-all", onClick: () => {
+                sceneTreeHTMLElement === null || sceneTreeHTMLElement === void 0 ? void 0 : sceneTreeHTMLElement.collapseAll();
+            } }) }));
+};
+
+const VertexSceneTreeExpandAll = () => {
+    const sceneTreeHTMLElement = recoil.useRecoilValue(sceneTreeElement);
+    return (jsxRuntime.jsx(uiReact.VertexTooltip, { className: "w-auto", content: "Expand All", placement: "top", children: jsxRuntime.jsx(uiReact.VertexIcon, { size: "sm", "data-testid": "expand-all-icon", className: "h-6 w-6 hover:bg-neutral-300 rounded cursor-pointer", name: "expand-all", onClick: () => {
+                sceneTreeHTMLElement === null || sceneTreeHTMLElement === void 0 ? void 0 : sceneTreeHTMLElement.expandAll();
+            } }) }));
+};
+
+function VertexSceneTreeToolbar() {
+    return (jsxRuntime.jsx(viewerReact.VertexSceneTreeToolbar, { className: "h-10 border-b border-neutral-300 box-border", children: jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 w-full text-neutral-700 items-center gap mx-2", children: [jsxRuntime.jsx(VertexSceneTreeExpandAll, {}), jsxRuntime.jsx(VertexSceneTreeCollapseAll, {})] }) }));
+}
+
 const DEFAULT_NAME_COLUMN = {
     binding: '{{row.node.name}}',
     label: 'Name',
@@ -2023,24 +2081,6 @@ const VertexSceneTreeTableLayout = (sdkProps) => {
         }) })));
 };
 
-const VertexSceneTreeExpandAll = () => {
-    const sceneTreeHTMLElement = recoil.useRecoilValue(sceneTreeElement);
-    return (jsxRuntime.jsx(uiReact.VertexTooltip, { className: "w-auto", content: "Expand All", placement: "top", children: jsxRuntime.jsx(uiReact.VertexIcon, { size: "sm", "data-testid": "expand-all-icon", className: "h-6 w-6 hover:bg-neutral-300 rounded cursor-pointer", name: "expand-all", onClick: () => {
-                sceneTreeHTMLElement === null || sceneTreeHTMLElement === void 0 ? void 0 : sceneTreeHTMLElement.expandAll();
-            } }) }));
-};
-
-const VertexSceneTreeCollapseAll = () => {
-    const sceneTreeHTMLElement = recoil.useRecoilValue(sceneTreeElement);
-    return (jsxRuntime.jsx(uiReact.VertexTooltip, { className: "w-auto", content: "Collapse All", placement: "top", children: jsxRuntime.jsx(uiReact.VertexIcon, { size: "sm", className: "h-6 w-6 hover:bg-neutral-300 rounded cursor-pointer", "data-testid": "collapse-all-icon", name: "collapse-all", onClick: () => {
-                sceneTreeHTMLElement === null || sceneTreeHTMLElement === void 0 ? void 0 : sceneTreeHTMLElement.collapseAll();
-            } }) }));
-};
-
-function VertexSceneTreeToolbar() {
-    return (jsxRuntime.jsx(viewerReact.VertexSceneTreeToolbar, { className: "h-10 border-b border-neutral-300 box-border", children: jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 w-full text-neutral-700 items-center gap mx-2", children: [jsxRuntime.jsx(VertexSceneTreeExpandAll, {}), jsxRuntime.jsx(VertexSceneTreeCollapseAll, {})] }) }));
-}
-
 const VertexSceneTree = (_a) => {
     var { id, font, backgroundColors, children, style, onPointerDown, onClick, onToggleSelection, onToggleExpansion, onToggleVisibility, className, rowData } = _a, sdkProps = __rest(_a, ["id", "font", "backgroundColors", "children", "style", "onPointerDown", "onClick", "onToggleSelection", "onToggleExpansion", "onToggleVisibility", "className", "rowData"]);
     const config = recoil.useRecoilValue(sdkConfig);
@@ -2074,13 +2114,13 @@ const VertexSceneTree = (_a) => {
         }
         onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
     };
-    return (jsxRuntime.jsxs(viewerReact.VertexSceneTree, Object.assign({ id: id !== null && id !== void 0 ? id : 'vertex-scene-tree', "data-testid": "vertex-scene-tree", config: config, ref: callbackRef, className: classNames('shrink-0', className), style: Object.assign(Object.assign(Object.assign({}, styleFromOptionalFont(font)), styleFromOptionalBackgroundColors(backgroundColors)), style), onConnectionError: (e) => {
-            logger.error('Scene Tree Connection Error: ', e.detail);
-        }, viewer: viewer, onPointerDown: handlePointerDown, onClick: handleClick, rowData: (row) => {
-            var _a;
-            const providedRowData = (_a = rowData === null || rowData === void 0 ? void 0 : rowData(row)) !== null && _a !== void 0 ? _a : {};
-            return Object.assign({ handleExpansion: wrappedExpansionHandler, handleSelection: wrappedSelectionHandler, handleVisibility: wrappedVisibilityHandler }, providedRowData);
-        } }, sdkProps, { children: [jsxRuntime.jsx(VertexSceneTreeToolbar, {}), jsxRuntime.jsx(VertexSceneTreeTableLayout, {}), children] })));
+    return (jsxRuntime.jsx("div", { className: "flex flex-col w-full h-full", children: jsxRuntime.jsx("div", { className: "flex group h-full", children: jsxRuntime.jsxs(viewerReact.VertexSceneTree, Object.assign({ id: id !== null && id !== void 0 ? id : 'vertex-scene-tree', "data-testid": "vertex-scene-tree", config: config, ref: callbackRef, className: classNames('flex-1', className), style: Object.assign(Object.assign(Object.assign({}, styleFromOptionalFont(font)), styleFromOptionalBackgroundColors(backgroundColors)), style), onConnectionError: (e) => {
+                    logger.error('Scene Tree Connection Error: ', e.detail);
+                }, viewer: viewer, onPointerDown: handlePointerDown, onClick: handleClick, rowData: (row) => {
+                    var _a;
+                    const providedRowData = (_a = rowData === null || rowData === void 0 ? void 0 : rowData(row)) !== null && _a !== void 0 ? _a : {};
+                    return Object.assign({ handleExpansion: wrappedExpansionHandler, handleSelection: wrappedSelectionHandler, handleVisibility: wrappedVisibilityHandler }, providedRowData);
+                } }, sdkProps, { children: [jsxRuntime.jsx(VertexSceneTreeToolbar, {}), jsxRuntime.jsx(VertexSceneTreeTableLayout, {}), children] })) }) }));
 };
 
 const useSynchronizedProp = (state, value) => {
@@ -2537,8 +2577,8 @@ const VertexViewerToolkitRootConfig = ({ config, children, }) => {
 };
 
 var index = /*#__PURE__*/Object.freeze({
-   __proto__: null,
-   get AssemblyFontFace () { return AssemblyFontFace; }
+  __proto__: null,
+  get AssemblyFontFace () { return AssemblyFontFace; }
 });
 
 exports.CrossSection = index$3;
@@ -2553,6 +2593,7 @@ exports.VertexHideAllMenuItem = VertexHideAllMenuItem;
 exports.VertexHidePartMenuItem = VertexHidePartMenuItem;
 exports.VertexHideSelectedMenuItem = VertexHideSelectedMenuItem;
 exports.VertexPanButton = VertexPanButton;
+exports.VertexResizableContent = VertexResizableContent;
 exports.VertexRotateButton = VertexRotateButton;
 exports.VertexSceneTree = VertexSceneTree;
 exports.VertexSceneTreeContextMenu = VertexSceneTreeContextMenu;