npm - @vertexvis/viewer-toolkit-react - Versions diffs - 0.0.2-canary.2 → 0.0.2-canary.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/bundle.cjs.js +700 -694
package/dist/bundle.cjs.js.map +1 -1
package/dist/bundle.esm.js +693 -687
package/dist/bundle.esm.js.map +1 -1
package/dist/components/context-menu/context-menu.d.ts +2 -2
package/dist/components/context-menu/fly-out-context-menu.d.ts +3 -3
package/dist/components/context-menu/scene-tree-context-menu.d.ts +1 -1
package/dist/index.d.ts +1 -1
package/dist/state/context-menu/actions.d.ts +1 -1
package/dist/state/context-menu/context-menu.d.ts +1 -1
package/dist/state/keybinding/keybinding.d.ts +1 -1
package/dist/state/viewer/scene/item-operations.d.ts +1 -1
package/package.json +3 -3

package/dist/bundle.cjs.js CHANGED Viewed

@@ -3,29 +3,29 @@
 var jsxRuntime = require('react/jsx-runtime');
 var uiReact = require('@vertexvis/ui-react');
 var classNames = require('classnames');
-var React = require('react');
-var utils = require('@vertexvis/utils');
 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 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]; }
-                });
-            }
+  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);
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
 }
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
@@ -64,539 +64,240 @@ const VertexResizableContent = ({ displayShadow, heading, id, initialScale, posi
                     }), children: children })] }) }));
 };
-// 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;
-};
+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,
+});
-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);
+/******************************************************************************
+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`.
- *
- * 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`.
+ * Returns a Recoil callback that can be used for action hooks.
  *
- * @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`.
+ * 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.
  *
- * 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`.
+ * If you want to use the original Recoil callback behavior, pass
+ * `DefaultRecoilCallbackDepsBehavior`.
  *
- * 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',
+const viewerElement = recoil.atom({
+    key: 'viewerToolkitViewerElement',
     default: undefined,
+    dangerouslyAllowMutability: true,
 });
-const contextMenuPosition = recoil.atom({
-    key: 'contextMenuPosition',
-    default: undefined,
+const viewerInitialSceneReady = recoil.atom({
+    key: 'viewerInitialSceneReady',
+    default: false,
 });
-const contextMenuTarget = recoil.atom({
-    key: 'contextMenuTarget',
-    default: undefined,
+const viewerBaseInteractionHandlerProvider = recoil.atom({
+    key: 'viewerBaseInteractionHandlerProvider',
+    default: Promise.resolve(undefined),
+    dangerouslyAllowMutability: true,
 });
-const contextMenuItem = recoil.atom({
-    key: 'contextMenuItem',
-    default: undefined,
+const viewerPrimaryInteractionType = recoil.atom({
+    key: 'viewerPrimaryInteractionType',
+    default: 'rotate',
 });
-const contextMenuActions = recoil.atom({
-    key: 'contextMenuActions',
-    default: [],
+const viewerSceneProvider = recoil.selector({
+    key: 'viewerScene',
+    get: ({ get }) => async () => { var _a; return (_a = get(viewerElement)) === null || _a === void 0 ? void 0 : _a.scene(); },
+    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 viewerSceneProvider = recoil.selector({
-    key: 'viewerScene',
-    get: ({ get }) => async () => { var _a; return (_a = get(viewerElement)) === null || _a === void 0 ? void 0 : _a.scene(); },
-    dangerouslyAllowMutability: true,
-});
-const viewerFrameScene = recoil.atom({
-    key: 'viewerFrameScene',
-    default: undefined,
-    dangerouslyAllowMutability: true,
+const viewerFrameScene = recoil.atom({
+    key: 'viewerFrameScene',
+    default: undefined,
+    dangerouslyAllowMutability: true,
 });
 const viewerSceneVisibleBoundingBox = recoil.selector({
     key: 'viewerSceneVisibleBoundingBox',
@@ -1189,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 = () => {
@@ -1259,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, }) => {
@@ -1412,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));
@@ -1421,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));
@@ -1681,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 = () => {
@@ -1712,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) {
@@ -1767,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" })] }));
@@ -1776,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]);
             }
@@ -1792,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" })] }));
@@ -1807,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);
             }
@@ -1823,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" })] }));
 };
@@ -1908,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 = () => {
@@ -1927,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({
@@ -1979,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',
@@ -2057,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);
@@ -2571,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;