@vertexvis/viewer-toolkit-react 0.0.1

package/dist/bundle.esm.js

@@ -0,0 +1,2479 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default from 'react';
+import { VertexMenu, VertexMenuItem, VertexIcon, VertexMenuDivider, VertexPopover, VertexTooltip, VertexSlider as VertexSlider$1, VertexIconButton, VertexTextfield } from '@vertexvis/ui-react';
+import { UUID, Color } from '@vertexvis/utils';
+import { useRecoilValue, useRecoilCallback, atom, selector, atomFamily, useSetRecoilState, useRecoilValueLoadable, useRecoilState, RecoilRoot } from 'recoil';
+import { Point, Vector3, BoundingBox, Angle } from '@vertexvis/geometry';
+import Pino from 'pino';
+import { VertexSceneTreeTableLayout as VertexSceneTreeTableLayout$1, VertexSceneTreeTableColumn, VertexSceneTree as VertexSceneTree$1, VertexViewerToolbarGroup, VertexViewerToolbar, VertexViewerBoxQueryTool, VertexViewerViewCube as VertexViewerViewCube$1, VertexViewer as VertexViewer$1 } from '@vertexvis/viewer-react';
+import classNames from 'classnames';
+import { defineCustomElements } from '@vertexvis/viewer/loader';
+
+// DEPRECATED - avoid if possible
+const useRecoilReducer = ({ reducer, atom, }) => {
+    const state = useRecoilValue(atom);
+    const dispatch = useRecoilReducerDispatch({
+        reducer,
+        atom,
+    });
+    return [state, dispatch];
+};
+// DEPRECATED - avoid if possible
+const useRecoilReducerDispatch = ({ reducer, atom, }) => {
+    const dispatch = useRecoilCallback(({ set }) => async (action) => {
+        set(atom, (previousValue) => reducer(previousValue, action));
+    }, []);
+    return dispatch;
+};
+
+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);
+};
+
+const keyBindings = 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__default.useEffect(() => {
+        const id = 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__default.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__default.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__default.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();
+                }
+            }
+        };
+        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__default.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__default.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 useLongPress({ target, callback, delay = 500, onMovement, }) {
+    const [longPressTimeout, setLongPressTimeout] = React.useState();
+    const [touchStartPosition, setTouchStartPosition] = React.useState();
+    React.useEffect(() => {
+        const handleTouchStart = (e) => {
+            const event = e;
+            if (event.touches != null && event.touches.length === 1) {
+                if (longPressTimeout != null) {
+                    clearTimeout(longPressTimeout);
+                }
+                setTouchStartPosition(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 &&
+                Point.distance(touchStartPosition, 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 = atom({
+    key: 'contextMenuActive',
+    default: undefined,
+});
+const contextMenuPosition = atom({
+    key: 'contextMenuPosition',
+    default: undefined,
+});
+const contextMenuTarget = atom({
+    key: 'contextMenuTarget',
+    default: undefined,
+});
+const contextMenuItem = atom({
+    key: 'contextMenuItem',
+    default: undefined,
+});
+const contextMenuActions = atom({
+    key: 'contextMenuActions',
+    default: [],
+});
+const contextMenuActivePosition = 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 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 = atom({
+    key: 'viewerToolkitViewerElement',
+    default: undefined,
+    dangerouslyAllowMutability: true,
+});
+const viewerInitialSceneReady = atom({
+    key: 'viewerInitialSceneReady',
+    default: false,
+});
+const viewerBaseInteractionHandlerProvider = atom({
+    key: 'viewerBaseInteractionHandlerProvider',
+    default: Promise.resolve(undefined),
+    dangerouslyAllowMutability: true,
+});
+const viewerPrimaryInteractionType = atom({
+    key: 'viewerPrimaryInteractionType',
+    default: 'rotate',
+});
+
+const viewerSceneProvider = selector({
+    key: 'viewerScene',
+    get: ({ get }) => async () => { var _a; return (_a = get(viewerElement)) === null || _a === void 0 ? void 0 : _a.scene(); },
+    dangerouslyAllowMutability: true,
+});
+const viewerFrameScene = atom({
+    key: 'viewerFrameScene',
+    default: undefined,
+    dangerouslyAllowMutability: true,
+});
+const viewerSceneVisibleBoundingBox = selector({
+    key: 'viewerSceneVisibleBoundingBox',
+    get: ({ get }) => { var _a; return (_a = get(viewerFrameScene)) === null || _a === void 0 ? void 0 : _a.boundingBox; },
+});
+
+function useViewerSceneActions() {
+    const executeWithCorrelationId = useActionCallback(({ snapshot }) => async (alterationType, correlationId, ...transforms) => {
+        const sceneProvider = await snapshot.getPromise(viewerSceneProvider);
+        const scene = await sceneProvider();
+        if (transforms.length > 0) {
+            // TODO: track performance
+            await (scene === null || scene === void 0 ? void 0 : scene.items((op) => transforms.map((t) => t(op))).execute({
+                suppliedCorrelationId: correlationId,
+            }));
+        }
+    });
+    const selectItemsTransform = React__default.useCallback((...ids) => (op) => op.where((q) => q.withItemIds(ids)).select(), []);
+    const deselectItemsTransform = React__default.useCallback((...ids) => (op) => op.where((q) => q.withItemIds(ids)).deselect(), []);
+    const clearSelectionTransform = React__default.useCallback((op) => op.where((q) => q.all()).deselect(), []);
+    return {
+        executeWithCorrelationId,
+        execute: useActionCallback(() => async (alterationType, ...transforms) => {
+            const correlationId = UUID.create();
+            await executeWithCorrelationId(alterationType, correlationId, ...transforms);
+        }),
+        selectItemsTransform,
+        deselectItemsTransform,
+        clearSelectionTransform,
+    };
+}
+
+const DEFAULT_CAMERA_ANIMATION_DURATION = 500;
+function useViewerCameraActions() {
+    return {
+        flyToById: useActionCallback(({ snapshot }) => async (id, animationMs) => {
+            const sceneProvider = await snapshot.getPromise(viewerSceneProvider);
+            const scene = await sceneProvider();
+            await (scene === null || scene === void 0 ? void 0 : scene.camera().flyTo({
+                itemId: id,
+            }).render({
+                animation: {
+                    milliseconds: animationMs !== null && animationMs !== void 0 ? animationMs : DEFAULT_CAMERA_ANIMATION_DURATION,
+                },
+            }));
+        }),
+        flyToByBoundingBox: useActionCallback(({ snapshot }) => async (boundingBox, animationMs) => {
+            const sceneProvider = await snapshot.getPromise(viewerSceneProvider);
+            const scene = await sceneProvider();
+            await (scene === null || scene === void 0 ? void 0 : scene.camera().flyTo({
+                boundingBox,
+            }).render({
+                animation: {
+                    milliseconds: animationMs !== null && animationMs !== void 0 ? animationMs : DEFAULT_CAMERA_ANIMATION_DURATION,
+                },
+            }));
+        }),
+    };
+}
+
+class CrossSectionInteractionHandler {
+    constructor() {
+        this.interactionStarted = false;
+    }
+    initialize(element, api) {
+        this.api = api;
+    }
+    dispose() {
+        this.endInteraction();
+    }
+    async beginInteraction() {
+        var _a;
+        if (!this.interactionStarted) {
+            await ((_a = this.api) === null || _a === void 0 ? void 0 : _a.beginInteraction());
+            this.interactionStarted = true;
+        }
+    }
+    async endInteraction() {
+        var _a;
+        await ((_a = this.api) === null || _a === void 0 ? void 0 : _a.endInteraction());
+        this.interactionStarted = false;
+    }
+}
+
+const create = (normal, offset = 0) => ({
+    normal,
+    offset,
+});
+const forAxis = (axis, offset) => {
+    switch (axis) {
+        case 'x':
+            return x(offset);
+        case 'y':
+            return y(offset);
+        case 'z':
+            return z(offset);
+    }
+};
+const x = (offset) => create(Vector3.left(), -offset);
+const y = (offset) => create(Vector3.down(), -offset);
+const z = (offset) => create(Vector3.forward(), -offset);
+const getAxis = (axis, axes) => {
+    switch (axis) {
+        case 'x':
+            return xAxis(axes);
+        case 'y':
+            return yAxis(axes);
+        case 'z':
+            return zAxis(axes);
+    }
+};
+const defaultAxes = {
+    x: Vector3.left(),
+    y: Vector3.down(),
+    z: Vector3.forward(),
+};
+const xAxis = (axes) => axes.x;
+const yAxis = (axes) => axes.y || Vector3.create(axes.x.z, axes.x.x, axes.x.y);
+const zAxis = (axes) => axes.z || Vector3.create(axes.x.y, axes.x.z, axes.x.x);
+/**
+ * Returns the active axis of a plane based on the normal values
+ */
+const axis = (plane, xAxis, yAxis, zAxis) => plane &&
+    plane.normal &&
+    [
+        ['x', xAxis],
+        ['y', yAxis],
+        ['z', zAxis],
+    ]
+        .filter((a) => Vector3.magnitude(Vector3.cross(plane.normal, a[1])) === 0)
+        .map((a) => a[0])
+        .pop();
+const isNegativeNormal = (plane) => Vector3.dot(Vector3.create(-1, -1, -1), plane.normal) > 0;
+/**
+ * Returns an updated section plane where the normal of the section plane is
+ * faced towards the given vector. The effect is the internal of the cross
+ * section is visible from the given vector.
+ */
+const towardsVector = (vector, plane) => {
+    const dot = Vector3.dot(vector, plane.normal);
+    if (dot < 0) {
+        return invert(plane);
+    }
+    else {
+        return plane;
+    }
+};
+/**
+ * Returns an updated section plane where the normal of the section plane is
+ * faced towards given camera's view vector. The effect is the user sees the
+ * internal of the cross section.
+ */
+const towardsCamera = (camera, plane) => {
+    return towardsVector(camera.viewVector, plane);
+};
+/**
+ * Reverses the direction of the section plane's normal to point in the opposite
+ * direction.
+ */
+const invert = (plane) => {
+    return Object.assign(Object.assign({}, plane), { normal: Vector3.multiply(plane.normal, Vector3.create(-1, -1, -1)), offset: -plane.offset });
+};
+const fromHit = (hit, camera) => {
+    const sectionNormal = Vector3.normalize(hit.normal);
+    const sectionOffset = Vector3.dot(sectionNormal, hit.position);
+    return towardsCamera(camera, create(sectionNormal, sectionOffset));
+};
+const toAxis = (axis, axes, camera, boundingBox, position) => {
+    const fitAllCamera = camera.viewAll();
+    const sectionAxis = getAxis(axis, axes);
+    const plane = boundingBox != null && sectionAxis != null
+        ? create(sectionAxis, Vector3.dot(sectionAxis, position || BoundingBox.center(boundingBox)))
+        : forAxis(axis, fitAllCamera.lookAt[axis]);
+    return towardsCamera(camera, plane);
+};
+
+function corners(box) {
+    return [
+        // xMin, yMin, zMin
+        Vector3.create(box.min.x, box.min.y, box.min.z),
+        // xMin, yMin, zMax
+        Vector3.create(box.min.x, box.min.y, box.max.z),
+        // xMin, yMax, zMin
+        Vector3.create(box.min.x, box.max.y, box.min.z),
+        // xMin, yMax, zMax
+        Vector3.create(box.min.x, box.max.y, box.max.z),
+        // xMax, yMax, zMax
+        Vector3.create(box.max.x, box.max.y, box.max.z),
+        // xMax, yMax, zMin
+        Vector3.create(box.max.x, box.max.y, box.min.z),
+        // xMax, yMin, zMax
+        Vector3.create(box.max.x, box.min.y, box.max.z),
+        // xMax, yMin, zMin
+        Vector3.create(box.max.x, box.min.y, box.min.z),
+    ];
+}
+
+const DEFAULT_SLIDER_RANGE = {
+    default: 5,
+    min: 0,
+    max: 10,
+};
+const crossSectioningEnabled = atom({
+    key: 'crossSectioningEnabled',
+    default: false,
+});
+const crossSectioningHighlightColor = atom({
+    key: 'crossSectioningHighlightColor',
+    default: undefined,
+});
+const crossSectioningBorderWidth = atom({
+    key: 'crossSectioningBorderWidth',
+    default: undefined,
+});
+const crossSectioningPlanes = atom({
+    key: 'crossSectioningPlanes',
+    default: [],
+});
+const crossSectioningAlignment = atom({
+    key: 'crossSectioningAlignment',
+    default: {
+        mode: 'global',
+        hitPending: false,
+    },
+});
+const crossSectioningTargetBoundingBox = selector({
+    key: 'crossSectioningTargetBoundingBox',
+    get: async ({ get }) => {
+        const visibleBounds = get(viewerSceneVisibleBoundingBox);
+        return visibleBounds;
+    },
+});
+const crossSectioningIsInteractive = atom({
+    key: 'crossSectioningIsInteractive',
+    default: false,
+});
+const crossSectioningActiveAxis = atom({
+    key: 'crossSectioningActiveAxis',
+    default: 'x',
+});
+const crossSectioningAvailableAxes = atom({
+    key: 'crossSectioningAvailableAxes',
+    default: defaultAxes,
+});
+const crossSectioningOffsetScalar = selector({
+    key: 'crossSectioningOffsetScalar',
+    get: ({ get }) => {
+        const planes = get(crossSectioningPlanes);
+        if (planes.length > 0) {
+            return isNegativeNormal(planes[0]) ? -1 : 1;
+        }
+        return 1;
+    },
+});
+const crossSectioningSliderRange = selector({
+    key: 'crossSectioningSliderRange',
+    get: ({ get }) => {
+        const planes = get(crossSectioningPlanes);
+        const bounds = get(crossSectioningTargetBoundingBox);
+        const boundsCorners = bounds != null ? corners(bounds) : [];
+        if (planes.length > 0) {
+            const projectedCorners = boundsCorners.map((c) => Vector3.dot(c, isNegativeNormal(planes[0])
+                ? Vector3.multiply(planes[0].normal, Vector3.create(-1, -1, -1))
+                : planes[0].normal));
+            return {
+                default: planes[0].offset,
+                min: Math.min(...projectedCorners) - 2,
+                max: Math.max(...projectedCorners) + 2,
+            };
+        }
+        return DEFAULT_SLIDER_RANGE;
+    },
+});
+const crossSectioningPlaneDisplayOffset = selector({
+    key: 'crossSectioningPlaneDisplayOffset',
+    get: ({ get }) => {
+        const planes = get(crossSectioningPlanes);
+        const offsetScalar = get(crossSectioningOffsetScalar);
+        const sliderRange = get(crossSectioningSliderRange);
+        if (planes.length > 0) {
+            return planes[0].offset * offsetScalar;
+        }
+        else {
+            return sliderRange.default;
+        }
+    },
+});
+const crossSectioningAdditionalToolsOpen = atom({
+    key: 'crossSectioningAdditionalToolsOpen',
+    default: false,
+});
+const crossSectioningAlignmentToolsOpen = atom({
+    key: 'crossSectioningAlignmentToolsOpen',
+    default: false,
+});
+const crossSectioningAxisToolsOpen = atom({
+    key: 'crossSectioningAxisToolsOpen',
+    default: false,
+});
+const crossSectioningInteractionHandler = atom({
+    key: 'crossSectioningInteractionHandler',
+    default: new CrossSectionInteractionHandler(),
+    dangerouslyAllowMutability: true,
+});
+function useCrossSectioning(viewerElement, initialized) {
+    const interactionHandler = useRecoilValue(crossSectioningInteractionHandler);
+    React__default.useEffect(() => {
+        if (initialized) {
+            viewerElement === null || viewerElement === void 0 ? void 0 : viewerElement.registerInteractionHandler(interactionHandler);
+        }
+    }, [viewerElement, initialized, interactionHandler]);
+}
+
+const hitResultsTapDetails = atom({
+    key: 'hitResultsTapDetails',
+    default: undefined,
+});
+const hitResultsLongPressDetails = atom({
+    key: 'hitResultsLongPressDetails',
+    default: undefined,
+});
+const previousHitResult = atom({
+    key: 'previousHitResult',
+    default: undefined,
+});
+const currentHitResult = atom({
+    key: 'currentHitResult',
+    default: undefined,
+});
+const hitResult = selector({
+    key: 'hitResult',
+    get: async ({ get }) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const tapDetails = get(hitResultsTapDetails);
+        const longPressDetails = get(hitResultsLongPressDetails);
+        const details = tapDetails !== null && tapDetails !== void 0 ? tapDetails : longPressDetails;
+        const sceneProvider = get(viewerSceneProvider);
+        const scene = await sceneProvider();
+        const viewId = scene === null || scene === void 0 ? void 0 : scene.sceneViewId;
+        const raycaster = scene === null || scene === void 0 ? void 0 : scene.raycaster();
+        if (details != null && raycaster != null && viewId != null) {
+            const res = await raycaster.hitItems(details.position);
+            const sdkHit = ((res === null || res === void 0 ? void 0 : res.hits) || [])[0];
+            if (sdkHit != null) {
+                return {
+                    id: (_a = sdkHit.itemId) === null || _a === void 0 ? void 0 : _a.hex,
+                    normal: Vector3.create(((_b = sdkHit === null || sdkHit === void 0 ? void 0 : sdkHit.hitNormal) === null || _b === void 0 ? void 0 : _b.x) || 0, ((_c = sdkHit === null || sdkHit === void 0 ? void 0 : sdkHit.hitNormal) === null || _c === void 0 ? void 0 : _c.y) || 0, ((_d = sdkHit === null || sdkHit === void 0 ? void 0 : sdkHit.hitNormal) === null || _d === void 0 ? void 0 : _d.z) || 0),
+                    position: Vector3.create(((_e = sdkHit === null || sdkHit === void 0 ? void 0 : sdkHit.hitPoint) === null || _e === void 0 ? void 0 : _e.x) || 0, ((_f = sdkHit === null || sdkHit === void 0 ? void 0 : sdkHit.hitPoint) === null || _f === void 0 ? void 0 : _f.y) || 0, ((_g = sdkHit === null || sdkHit === void 0 ? void 0 : sdkHit.hitPoint) === null || _g === void 0 ? void 0 : _g.z) || 0),
+                    meta: details.metaKey || details.ctrlKey || false,
+                    metadata: [], // TODO: Include metadata types
+                    ancestors: ((_h = sdkHit === null || sdkHit === void 0 ? void 0 : sdkHit.ancestors) === null || _h === void 0 ? void 0 : _h.filter((a) => { var _a; return ((_a = a.itemId) === null || _a === void 0 ? void 0 : _a.hex) != null; }).map((a) => { var _a; return (_a = a.itemId) === null || _a === void 0 ? void 0 : _a.hex; })) || [],
+                };
+            }
+        }
+        return undefined;
+    },
+});
+// Whether to skip the next `tap` event's behavior. This is typically the
+// case when the `pointerdown` is associated to some other action.
+// E.g. a context menu without a backdrop being dismissed.
+const hitResultsSkipNextTap = atom({
+    key: 'hitResultsSkipNextTap',
+    default: false,
+});
+
+const alignToNormal = (camera, normal, boundingBox) => {
+    if (camera.toFrameCamera().isPerspective()) {
+        // when cos theta of the camera up vector and plane normal approaches |1|
+        // we will have unexpected results and need to find a better value for
+        // the new up vector.
+        // using negative value of cos0 in calculation for that up vector
+        // prevents flipping the model around the up vector
+        const cos0 = Vector3.dot(Vector3.normalize(camera.up), normal);
+        const up = Math.abs(cos0) > 0.98
+            ? Vector3.normalize(Vector3.scale(-cos0, camera.viewVector))
+            : camera.up;
+        const position = Vector3.add(Vector3.scale(Vector3.distance(camera.position, camera.lookAt), Vector3.multiply(normal, Vector3.create(-1, -1, -1))), camera.lookAt);
+        return camera.update({
+            up,
+            position,
+        });
+    }
+    else {
+        const angle = Vector3.angleTo(Vector3.normalize(camera.viewVector), normal);
+        const rotationPoint = boundingBox != null ? BoundingBox.center(boundingBox) : camera.lookAt;
+        const rotationAxis = Vector3.normalize(Vector3.cross(Vector3.normalize(camera.viewVector), normal));
+        return camera.rotateAroundAxisAtPoint(angle, rotationPoint, rotationAxis);
+    }
+};
+
+function isParallelTo(a, b) {
+    const angle = Angle.toDegrees(Vector3.angleTo(a, b));
+    return angle === 0 || angle === 180;
+}
+
+const DEFAULT_ALIGN_TO_PLANE_ANIMATION_DURATION_MS = 500;
+function useCrossSectioningActions() {
+    const applyCrossSection = useActionCallback(({ snapshot }) => async () => {
+        const borderWidth = await snapshot.getPromise(crossSectioningBorderWidth);
+        const highlightColor = await snapshot.getPromise(crossSectioningHighlightColor);
+        const planes = await snapshot.getPromise(crossSectioningPlanes);
+        const sceneProvider = await snapshot.getPromise(viewerSceneProvider);
+        const scene = await sceneProvider();
+        await (scene === null || scene === void 0 ? void 0 : scene.crossSectioning().update({
+            sectionPlanes: planes,
+            highlightColor: highlightColor
+                ? Color.fromHexString(highlightColor)
+                : undefined,
+            lineWidth: borderWidth,
+        }));
+    });
+    const applyCrossSectionGlobalDefault = useActionCallback(({ set, reset, snapshot }) => async () => {
+        const sceneProvider = await snapshot.getPromise(viewerSceneProvider);
+        const scene = await sceneProvider();
+        if (scene != null) {
+            const fitAllCamera = scene.camera().viewAll();
+            reset(crossSectioningAvailableAxes);
+            set(crossSectioningPlanes, [
+                towardsCamera(scene.camera(), x(fitAllCamera.lookAt.x)),
+            ]);
+            applyCrossSection();
+        }
+    });
+    const applyCrossSectionFromSceneHitItem = useActionCallback(retainSnapshot(({ snapshot, set }) => async () => {
+        const item = await snapshot.tryGetPromise(hitResult).then((r) => r.value);
+        const sceneProvider = await snapshot.getPromise(viewerSceneProvider);
+        const scene = await sceneProvider();
+        if (item != null && scene != null) {
+            const plane = fromHit(item, scene.camera());
+            set(crossSectioningPlanes, plane != null ? [plane] : []);
+            set(crossSectioningAvailableAxes, plane != null ? { x: plane.normal } : defaultAxes);
+            applyCrossSection();
+        }
+    }));
+    const enable = useActionCallback(({ set, snapshot }) => async () => {
+        const planes = await snapshot.getPromise(crossSectioningPlanes);
+        const isEnabled = await snapshot.getPromise(crossSectioningEnabled);
+        if (!isEnabled) {
+            set(crossSectioningEnabled, true);
+            if (planes.length === 0) {
+                await applyCrossSectionGlobalDefault();
+            }
+        }
+    });
+    const disable = useActionCallback(({ reset, snapshot }) => async () => {
+        const isEnabled = await snapshot.getPromise(crossSectioningEnabled);
+        if (isEnabled) {
+            reset(crossSectioningEnabled);
+            reset(crossSectioningAdditionalToolsOpen);
+            reset(crossSectioningAlignmentToolsOpen);
+            reset(crossSectioningAxisToolsOpen);
+            reset(crossSectioningPlanes);
+            reset(crossSectioningAlignment);
+            reset(crossSectioningActiveAxis);
+            await applyCrossSection();
+        }
+    });
+    return {
+        enable,
+        disable,
+        openAdditionalTools: useActionCallback(({ set, snapshot }) => async () => {
+            const isEnabled = await snapshot.getPromise(crossSectioningEnabled);
+            if (!isEnabled) {
+                enable();
+            }
+            set(crossSectioningAdditionalToolsOpen, true);
+        }),
+        closeAdditionalTools: useActionCallback(({ reset }) => async () => {
+            reset(crossSectioningAdditionalToolsOpen);
+        }),
+        openAlignmentTools: useActionCallback(({ set, reset }) => async () => {
+            reset(crossSectioningAxisToolsOpen);
+            set(crossSectioningAlignmentToolsOpen, true);
+        }),
+        closeAlignmentTools: useActionCallback(({ reset }) => async () => {
+            reset(crossSectioningAlignmentToolsOpen);
+        }),
+        openAxisTools: useActionCallback(({ set, reset }) => async () => {
+            reset(crossSectioningAlignmentToolsOpen);
+            set(crossSectioningAxisToolsOpen, true);
+        }),
+        closeAxisTools: useActionCallback(({ reset }) => async () => {
+            reset(crossSectioningAxisToolsOpen);
+        }),
+        beginInteraction: useActionCallback(({ set, snapshot }) => async () => {
+            const interactionHandler = await snapshot.getPromise(crossSectioningInteractionHandler);
+            set(crossSectioningIsInteractive, true);
+            await interactionHandler.beginInteraction();
+        }),
+        endInteraction: useActionCallback(({ reset, snapshot }) => async () => {
+            const interactionHandler = await snapshot.getPromise(crossSectioningInteractionHandler);
+            reset(crossSectioningIsInteractive);
+            await interactionHandler.endInteraction();
+        }),
+        updatePlanes: useActionCallback(retainSnapshot(({ set, snapshot }) => async (offset) => {
+            const existingPlanes = await snapshot.getPromise(crossSectioningPlanes);
+            if (existingPlanes.length > 0) {
+                const offsetScalar = await snapshot.getPromise(crossSectioningOffsetScalar);
+                const range = await snapshot.getPromise(crossSectioningSliderRange);
+                const minimum = offsetScalar < 0 ? range.max * -1 : range.min;
+                const maximum = offsetScalar < 0 ? range.min * -1 : range.max;
+                const updated = existingPlanes.map((plane) => (Object.assign(Object.assign({}, plane), { offset: Math.min(Math.max(offset * offsetScalar, minimum), maximum) })));
+                set(crossSectioningPlanes, updated);
+                applyCrossSection();
+            }
+        })),
+        flipPlanes: useActionCallback(({ set, snapshot }) => async () => {
+            const existingPlanes = await snapshot.getPromise(crossSectioningPlanes);
+            set(crossSectioningPlanes, existingPlanes.map((plane) => invert(plane)));
+            applyCrossSection();
+        }),
+        alignViewToPlane: useActionCallback(({ snapshot }) => async () => {
+            const existingPlanes = await snapshot.getPromise(crossSectioningPlanes);
+            const el = await snapshot.getPromise(viewerElement);
+            const scene = await (el === null || el === void 0 ? void 0 : el.scene());
+            if (existingPlanes.length > 0 && scene != null) {
+                await alignToNormal(scene.camera(), existingPlanes[0].normal, scene.boundingBox()).render({
+                    animation: {
+                        milliseconds: DEFAULT_ALIGN_TO_PLANE_ANIMATION_DURATION_MS,
+                    },
+                });
+            }
+        }),
+        updateAxis: useActionCallback(retainSnapshot(({ set, reset, snapshot }) => async (axis) => {
+            const existingPlanes = await snapshot.getPromise(crossSectioningPlanes);
+            const availableAxes = await snapshot.getPromise(crossSectioningAvailableAxes);
+            const targetBounds = await snapshot.getPromise(crossSectioningTargetBoundingBox);
+            const alignment = await snapshot.getPromise(crossSectioningAlignment);
+            const el = await snapshot.getPromise(viewerElement);
+            const scene = await (el === null || el === void 0 ? void 0 : el.scene());
+            const chosenAxis = availableAxes[axis];
+            const angleIsParallelOrNaN = chosenAxis != null &&
+                existingPlanes.length > 0 &&
+                isParallelTo(existingPlanes[0].normal, chosenAxis) &&
+                !isNaN(Vector3.angleTo(existingPlanes[0].normal, chosenAxis));
+            if (scene != null && !angleIsParallelOrNaN) {
+                const currentHitResult = await snapshot
+                    .tryGetPromise(hitResult)
+                    .then((r) => r.value);
+                set(crossSectioningActiveAxis, axis);
+                set(crossSectioningPlanes, [
+                    toAxis(axis, availableAxes, scene.camera(), targetBounds, alignment.mode !== 'global'
+                        ? currentHitResult === null || currentHitResult === void 0 ? void 0 : currentHitResult.position
+                        : undefined),
+                ]);
+            }
+            reset(crossSectioningAxisToolsOpen);
+            applyCrossSection();
+        })),
+        updateAlignment: useActionCallback(({ set, reset }) => async (alignment, hit) => {
+            reset(crossSectioningAlignmentToolsOpen);
+            set(crossSectioningAlignment, {
+                mode: alignment,
+                hitPending: alignment !== 'global' && hit == null,
+            });
+            if (alignment === 'global') {
+                reset(crossSectioningActiveAxis);
+                reset(crossSectioningAvailableAxes);
+                applyCrossSectionGlobalDefault();
+            }
+            else if (alignment === 'surface' && hit != null) {
+                await enable();
+                applyCrossSectionFromSceneHitItem();
+            }
+        }),
+        cancelCurrentHit: useActionCallback(({ set, snapshot }) => async () => {
+            const alignment = await snapshot.getPromise(crossSectioningAlignment);
+            if (alignment.hitPending) {
+                set(crossSectioningAlignment, Object.assign(Object.assign({}, alignment), { hitPending: false }));
+            }
+        }),
+        sectionCurrentHit: useActionCallback(({ set, snapshot }) => async () => {
+            const alignment = await snapshot.getPromise(crossSectioningAlignment);
+            if (alignment.hitPending) {
+                set(crossSectioningAlignment, Object.assign(Object.assign({}, alignment), { hitPending: false }));
+                if (alignment.mode === 'surface') {
+                    applyCrossSectionFromSceneHitItem();
+                }
+            }
+        }),
+    };
+}
+
+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
+});
+
+const useHitActions = () => {
+    const crossSectioningActions = useCrossSectioningActions();
+    const clearMeasurement = useActionCallback(retainSnapshot(({ snapshot }) => async () => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        await snapshot
+            .tryGetPromise(hitResult)
+            .then((r) => r.value);
+        // TODO: clear measurement
+    }));
+    const updateTransformWidgetPosition = useActionCallback(retainSnapshot(({ snapshot }) => async () => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        await snapshot
+            .tryGetPromise(hitResult)
+            .then((r) => r.value);
+        // TODO: update widget position
+    }));
+    const setContextMenuItem = useActionCallback(retainSnapshot(({ set, snapshot }) => async () => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const currentHitResult = await snapshot
+            .tryGetPromise(hitResult)
+            .then((r) => r.value);
+        set(contextMenuItem, currentHitResult);
+    }));
+    const setCurrentHitResult = useActionCallback(retainSnapshot(({ snapshot, set }) => async () => {
+        set(currentHitResult, await snapshot.tryGetPromise(hitResult).then((r) => r.value));
+    }));
+    return {
+        tap: useActionCallback(retainSnapshot(({ snapshot, set }) => async ({ detail }, ...standardTapActions) => {
+            const currentCrossSectioningAlignment = await snapshot.getPromise(crossSectioningAlignment);
+            const isStandardTap = (detail === null || detail === void 0 ? void 0 : detail.buttons) !== 2 && !(detail === null || detail === void 0 ? void 0 : detail.altKey);
+            detail.altKey ||
+                detail.ctrlKey ||
+                detail.metaKey ||
+                detail.shiftKey;
+            const isValidSelectionTap = isStandardTap && !currentCrossSectioningAlignment.hitPending;
+            const currentHitResult = await snapshot
+                .tryGetPromise(hitResult)
+                .then((r) => r.value);
+            set(previousHitResult, currentHitResult);
+            set(hitResultsTapDetails, detail);
+            clearMeasurement();
+            if (isValidSelectionTap) {
+                standardTapActions.forEach((action) => action());
+                {
+                    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 = 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, 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 = Point.create(xCoordinate, yCoordinate);
+                const pointDistance = downPosition != null ? 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 = 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 VertexContextMenu = ({ targetElement, menuType, disableBackdrop, openPredicate, onOpen, onClose, children, }) => {
+    const contextMenuActions = useContextMenuActions();
+    const activeContextMenu = useRecoilValue(contextMenuActive);
+    const activePosition = useRecoilValue(contextMenuActivePosition);
+    const fallbackPlacements = React__default.useMemo(() => ['bottom-end', 'top-start', 'top-end', 'right', 'left'], []);
+    useStackKeyBinding({
+        id: 'ContextMenu',
+        keyBind: 'Escape',
+        fn: contextMenuActions.clearActiveContextMenu,
+        addPredicate: () => activeContextMenu != null && activeContextMenu === menuType,
+        cancelPredicate: () => activeContextMenu == null,
+    }, [activeContextMenu]);
+    const target = React__default.useMemo(() => {
+        if (targetElement != null) {
+            return targetElement;
+        }
+        else if (openPredicate != null) {
+            return window;
+        }
+        return undefined;
+    }, [targetElement, openPredicate]);
+    useLongPress({
+        target,
+        callback: (e) => contextMenuActions.longPress(e, menuType, openPredicate, onOpen),
+        onMovement: () => contextMenuActions.clearActiveContextMenu(),
+    });
+    React__default.useEffect(() => {
+        const handleWindowPointerDown = (event) => {
+            const withinMenu = targetWithinMenu(event);
+            if (!withinMenu &&
+                event.buttons !== 2 &&
+                activeContextMenu === menuType) {
+                const skipNextHit = targetShouldSkipNextHit(event);
+                contextMenuActions.clearActiveContextMenu(skipNextHit);
+            }
+        };
+        if (disableBackdrop) {
+            window.addEventListener('pointerdown', handleWindowPointerDown);
+            return () => {
+                window.removeEventListener('pointerdown', handleWindowPointerDown);
+            };
+        }
+        return undefined;
+    }, [disableBackdrop, menuType, activeContextMenu]);
+    React__default.useEffect(() => {
+        const handlePointerDown = (event) => {
+            var _a, _b;
+            const pointerEvent = event;
+            const targetElement = target;
+            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, Point.create(xCoordinate, yCoordinate));
+        };
+        const handlePointerUp = (event) => {
+            var _a, _b;
+            const pointerEvent = event;
+            const targetElement = target;
+            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, Point.create(xCoordinate, yCoordinate));
+        };
+        const handleContextMenu = (event) => contextMenuActions.contextMenu(event, openPredicate);
+        target === null || target === void 0 ? void 0 : target.addEventListener('pointerdown', handlePointerDown);
+        target === null || target === void 0 ? void 0 : target.addEventListener('pointerup', handlePointerUp);
+        target === null || target === void 0 ? void 0 : target.addEventListener('contextmenu', handleContextMenu);
+        return () => {
+            target === null || target === void 0 ? void 0 : target.removeEventListener('pointerdown', handlePointerDown);
+            target === null || target === void 0 ? void 0 : target.removeEventListener('pointerup', handlePointerUp);
+            target === null || target === void 0 ? void 0 : target.removeEventListener('contextmenu', handleContextMenu);
+        };
+    }, [targetElement, menuType, openPredicate]);
+    return (jsx(VertexMenu, { "data-testid": `${menuType}-context-menu`, open: activeContextMenu === menuType, position: activePosition, fallbackPlacements: fallbackPlacements, backdrop: !disableBackdrop, onMenuClosed: () => {
+            contextMenuActions.clearActiveContextMenu();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }, children: jsx("div", { className: "pt-1", children: children }) }));
+};
+
+var SceneAlterationPerformanceType;
+(function (SceneAlterationPerformanceType) {
+    SceneAlterationPerformanceType["HIDE_ITEM"] = "Hide Item";
+    SceneAlterationPerformanceType["SHOW_ONLY_SELECTED"] = "Show Only Selected";
+    SceneAlterationPerformanceType["HIDE_SELECTED"] = "Hide Selected";
+    SceneAlterationPerformanceType["SHOW_ONLY_ITEM"] = "Show Only Item";
+    SceneAlterationPerformanceType["SHOW_ALL"] = "Show All";
+    SceneAlterationPerformanceType["HIDE_ALL"] = "Hide All";
+    SceneAlterationPerformanceType["SELECT_FILTERED_ITEMS"] = "Select Filtered Items";
+    SceneAlterationPerformanceType["INVERT_SELECTION"] = "Invert Selection";
+    SceneAlterationPerformanceType["CLEAR_ALL_TRANSFORMS"] = "Clear All Transforms";
+    SceneAlterationPerformanceType["CLEAR_SELECTED_TRANSFORMS"] = "Clear Selected Transforms";
+    SceneAlterationPerformanceType["CLEAR_SELECTION"] = "Clear Selection";
+    SceneAlterationPerformanceType["DESELECTING_ITEMS"] = "Deselecting Items";
+    SceneAlterationPerformanceType["SELECTING_ITEMS"] = "Selecting Items";
+    SceneAlterationPerformanceType["SELECTING_ONLY_ITEM"] = "Selecting Only Item";
+    SceneAlterationPerformanceType["SELECTING_ANCESTOR"] = "Selecting Ancestor";
+    SceneAlterationPerformanceType["APPLY_MATERIAL_OVERRIDE_TO_ALL"] = "Apply Material Override To All";
+    SceneAlterationPerformanceType["APPLY_MATERIAL_OVERRIDE_TO_SELECTION"] = "Apply Material Override To Selection";
+    SceneAlterationPerformanceType["CLEAR_ALL_MATERIAL_OVERRIDES"] = "Clear All Material Overrides";
+    SceneAlterationPerformanceType["CLEAR_SELECTED_MATERIAL_OVERRIDES"] = "Clear Selected Material Overrides";
+    // Phantom operations
+    SceneAlterationPerformanceType["SET_PHANTOM_ALL"] = "Set Phantom All";
+    SceneAlterationPerformanceType["SET_PHANTOM_SELECTED_ITEMS"] = "Set Phantom Selected Items";
+    SceneAlterationPerformanceType["CLEAR_PHANTOM_ALL"] = "Clear Phantom All";
+    SceneAlterationPerformanceType["CLEAR_PHANTOM_SELECTED_ITEMS"] = "Clear Phantom Selected Items";
+    SceneAlterationPerformanceType["SET_PHANTOM_NON_SELECTED_ITEMS"] = "Set Phantom Non Selected Items";
+    SceneAlterationPerformanceType["RESTORE_PHANTOM_OVERRIDES"] = "Restore Phantom Overrides";
+    // End item operations
+    SceneAlterationPerformanceType["SET_ITEM_AS_END_ITEM"] = "Set Item as End Item";
+    SceneAlterationPerformanceType["UNSET_ITEM_AS_END_ITEM"] = "Unset Item as End Item";
+    // PMI annotation operations
+    SceneAlterationPerformanceType["SHOW_ANNOTATION"] = "Show Annotation";
+    SceneAlterationPerformanceType["HIDE_ANNOTATION"] = "Hide Annotation";
+})(SceneAlterationPerformanceType || (SceneAlterationPerformanceType = {}));
+
+const selectionSelectedItems = atomFamily({
+    key: 'selectionSelectedItems',
+    default: undefined,
+});
+const selectionSelectedItemIds = atom({
+    key: 'selectionSelectedItemIds',
+    default: [],
+});
+const selectionLastSelected = atom({
+    key: 'selectionLastSelected',
+    default: undefined,
+});
+const selectionLastSelectionFromViewer = atom({
+    key: 'selectionLastSelectionFromViewer',
+    default: false,
+});
+const selectionLastSelectWasMultiSelect = atom({
+    key: 'selectionLastSelectWasMultiSelect',
+    default: false,
+});
+const selectionHighestSelectedAncestor = selector({
+    key: 'selectionHighestSelectedAncestor',
+    get: ({ get }) => {
+        var _a, _b;
+        const lastSelected = get(selectionLastSelected);
+        const selectedIds = get(selectionSelectedItemIds);
+        return ((_b = (_a = lastSelected === null || lastSelected === void 0 ? void 0 : lastSelected.ancestors) === null || _a === void 0 ? void 0 : _a.find((ancestorId) => selectedIds.includes(ancestorId))) !== null && _b !== void 0 ? _b : lastSelected === null || lastSelected === void 0 ? void 0 : lastSelected.id);
+    },
+});
+const selectionPreviousVisibleSummary = atom({
+    key: 'selectionPreviousVisibleSummary',
+    default: undefined,
+});
+const selectionVisibleSummary = atom({
+    key: 'selectionVisibleSummary',
+    default: undefined,
+});
+const selectionVisibleCount = selector({
+    key: 'selectionVisibleCount',
+    get: ({ get }) => { var _a, _b; return (_b = (_a = get(selectionVisibleSummary)) === null || _a === void 0 ? void 0 : _a.count) !== null && _b !== void 0 ? _b : 0; },
+});
+
+function useSelectionActions() {
+    const viewerActions = useViewerSceneActions();
+    const clearSelectedIds = useActionCallback(({ snapshot, reset }) => async () => {
+        const selectedIds = await snapshot.getPromise(selectionSelectedItemIds);
+        selectedIds.forEach((id) => reset(selectionSelectedItems(id)));
+    });
+    const select = useActionCallback(({ snapshot, reset, set }) => async (item, options) => {
+        var _a, _b;
+        const existing = await snapshot.getPromise(selectionSelectedItems(item.id));
+        const selectedIds = await snapshot.getPromise(selectionSelectedItemIds);
+        const nextAncestorId = (_b = [...((_a = item.ancestors) !== null && _a !== void 0 ? _a : [])]) === null || _b === void 0 ? void 0 : _b.reverse().find((id) => !selectedIds.includes(id));
+        if (existing != null && nextAncestorId != null) {
+            // If already selected and has a parent, select the parent
+            set(selectionSelectedItems(nextAncestorId), { id: nextAncestorId });
+            set(selectionSelectedItemIds, (previous) => [
+                ...previous,
+                nextAncestorId,
+            ]);
+            viewerActions.execute(SceneAlterationPerformanceType.SELECTING_ANCESTOR, viewerActions.selectItemsTransform(nextAncestorId));
+        }
+        else if (options === null || options === void 0 ? void 0 : options.clear) {
+            // Select only the current item since options.clear is true
+            set(selectionSelectedItems(item.id), item);
+            set(selectionSelectedItemIds, [item.id]);
+            viewerActions.execute(SceneAlterationPerformanceType.SELECTING_ONLY_ITEM, viewerActions.clearSelectionTransform, viewerActions.selectItemsTransform(item.id));
+        }
+        else {
+            // Add item to current selection without clearing previous selection
+            set(selectionSelectedItems(item.id), item);
+            set(selectionSelectedItemIds, (previous) => [...previous, item.id]);
+            viewerActions.execute(SceneAlterationPerformanceType.SELECTING_ITEMS, viewerActions.selectItemsTransform(item.id));
+        }
+        selectForModelViewsPanel(item);
+        set(selectionLastSelected, item);
+        set(selectionLastSelectionFromViewer, true);
+        reset(selectionLastSelectWasMultiSelect);
+    });
+    const deselect = useActionCallback(({ reset, set }) => async (deselectingId) => {
+        reset(selectionSelectedItems(deselectingId));
+        reset(selectionLastSelectWasMultiSelect);
+        set(selectionSelectedItemIds, (previous) => previous.filter((id) => id !== deselectingId));
+        viewerActions.execute(SceneAlterationPerformanceType.DESELECTING_ITEMS, viewerActions.deselectItemsTransform(deselectingId));
+    });
+    const toggleSelection = useActionCallback(({ snapshot }) => async (item) => {
+        const existing = await snapshot.getPromise(selectionSelectedItems(item.id));
+        if (existing != null) {
+            await deselect(existing.id);
+        }
+        else {
+            await select(item);
+        }
+    });
+    const clearAndSelect = useActionCallback(({ snapshot, reset, set }) => async (item, options = {}) => {
+        const existing = await snapshot.getPromise(selectionSelectedItems(item.id));
+        const selectedIds = await snapshot.getPromise(selectionSelectedItemIds);
+        selectedIds
+            .filter((id) => { var _a; return id !== item.id && !((_a = item.ancestors) === null || _a === void 0 ? void 0 : _a.includes(id)); })
+            .forEach((id) => reset(selectionSelectedItems(id)));
+        reset(selectionLastSelectWasMultiSelect);
+        if (!existing) {
+            reset(selectionSelectedItemIds);
+        }
+        else if (options.ignoreAncestorSelection) {
+            reset(selectionSelectedItemIds);
+            reset(selectionSelectedItems(existing.id));
+        }
+        else {
+            const selectedItemAndAncestors = selectedIds.filter((id) => { var _a; return id === item.id || ((_a = item.ancestors) === null || _a === void 0 ? void 0 : _a.includes(id)); });
+            set(selectionSelectedItemIds, selectedItemAndAncestors);
+        }
+        // TODO: clear PMI + transform manipulator orientation
+        await select(item, { clear: true });
+    });
+    const resetSelectionState = useActionCallback(({ reset }) => async () => {
+        await clearSelectedIds();
+        reset(selectionSelectedItemIds);
+        reset(selectionLastSelected);
+        reset(selectionLastSelectionFromViewer);
+        reset(selectionLastSelectWasMultiSelect);
+        // TODO: clear transform manipulator state
+    });
+    const clearSelection = useActionCallback(() => async () => {
+        await resetSelectionState();
+        viewerActions.execute(SceneAlterationPerformanceType.CLEAR_SELECTION, viewerActions.clearSelectionTransform);
+    });
+    const toggleLastSelectWasMultiSelect = useActionCallback(({ set }) => async (multiSelection) => {
+        set(selectionLastSelectWasMultiSelect, multiSelection);
+    });
+    const selectForModelViewsPanel = useActionCallback(({ reset, set }) => (item) => {
+        // TODO: clear loaded PMI
+    });
+    return {
+        select,
+        toggleSelection,
+        clearAndSelect,
+        selectCurrentHit: useActionCallback(retainSnapshot(({ snapshot }) => async () => {
+            const currentHitResult = await snapshot
+                .tryGetPromise(hitResult)
+                .then((r) => r.value);
+            const currentTapDetails = await snapshot.getPromise(hitResultsTapDetails);
+            const appendModifierPressed = (currentTapDetails === null || currentTapDetails === void 0 ? void 0 : currentTapDetails.metaKey) ||
+                (currentTapDetails === null || currentTapDetails === void 0 ? void 0 : currentTapDetails.ctrlKey) ||
+                (currentTapDetails === null || currentTapDetails === void 0 ? void 0 : currentTapDetails.shiftKey);
+            if (currentHitResult != null && !appendModifierPressed) {
+                clearAndSelect(currentHitResult);
+            }
+            else if (currentHitResult != null && appendModifierPressed) {
+                toggleSelection(currentHitResult);
+            }
+            else {
+                clearSelection();
+            }
+        })),
+        syncSelection: useActionCallback(({ set, reset }) => async (item, options) => {
+            if (options.selected) {
+                await clearSelectedIds();
+                set(selectionSelectedItems(item.id), item);
+                if (options.multiSelect) {
+                    set(selectionSelectedItemIds, (previous) => [
+                        ...previous.filter((id) => id !== item.id),
+                        item.id,
+                    ]);
+                }
+                else {
+                    set(selectionSelectedItemIds, [item.id]);
+                }
+                selectForModelViewsPanel(item);
+                set(selectionLastSelected, item);
+                set(selectionLastSelectionFromViewer, false);
+                set(selectionLastSelectWasMultiSelect, !!options.multiSelect);
+            }
+            else {
+                reset(selectionSelectedItems(item.id));
+                reset(selectionLastSelectWasMultiSelect);
+                set(selectionSelectedItemIds, (previous) => previous.filter((id) => id !== item.id));
+            }
+        }),
+        deselect,
+        clearSelection,
+        resetSelectionState,
+        toggleLastSelectWasMultiSelect,
+        selectForModelViewsPanel,
+    };
+}
+
+const selectionState = selector({
+    key: 'viewerToolkitSelectionState',
+    get: ({ get }) => {
+        const selectedItemIds = get(selectionSelectedItemIds);
+        const lastSelected = get(selectionLastSelected);
+        const highestSelectedAncestorId = get(selectionHighestSelectedAncestor);
+        const state = {
+            selectedItemIds,
+            lastSelected,
+            highestSelectedAncestorId,
+        };
+        return state;
+    },
+});
+
+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
+});
+
+atom({
+    key: 'sceneTreeLoaderVisible',
+    default: false,
+});
+const sceneTreeElement = atom({
+    key: 'sceneTreeElement',
+    default: undefined,
+});
+const sceneTreeWidth = atom({
+    key: 'sceneTreeWidth',
+    default: undefined,
+});
+selector({
+    key: 'sceneTreeController',
+    get: ({ get }) => { var _a; return (_a = get(sceneTreeElement)) === null || _a === void 0 ? void 0 : _a.controller; },
+    dangerouslyAllowMutability: true,
+});
+
+function useSceneTreeActions() {
+    const selectionActions = useSelectionActions();
+    const viewerCameraActions = useViewerCameraActions();
+    return {
+        toggleSelection: useActionCallback(({ snapshot }) => async (event, node, tree) => {
+            var _a, _b;
+            if (event.defaultPrevented || event.button !== 0) {
+                return;
+            }
+            if (!event.altKey) {
+                if ((event.ctrlKey || event.metaKey) && node.selected) {
+                    tree.deselectItem(node);
+                }
+                else if (node.selected) {
+                    tree.selectItem(node, {
+                        recurseParent: true,
+                    });
+                }
+                else if (!node.selected) {
+                    tree.selectItem(node, {
+                        append: event.ctrlKey || event.metaKey,
+                        range: event.shiftKey,
+                    });
+                }
+            }
+            if (node.id != null) {
+                const lastSelected = await snapshot.getPromise(selectionLastSelected);
+                selectionActions.syncSelection({
+                    id: (_a = node.id) === null || _a === void 0 ? void 0 : _a.hex,
+                    ancestors: (_b = lastSelected === null || lastSelected === void 0 ? void 0 : lastSelected.ancestors) !== null && _b !== void 0 ? _b : [],
+                }, {
+                    selected: event.metaKey || event.ctrlKey ? !node.selected : true,
+                    multiSelect: event.shiftKey || event.metaKey || event.ctrlKey,
+                });
+                // TODO: transform widget interaction
+            }
+        }),
+        toggleExpansion: useActionCallback(() => (event, node, tree) => {
+            tree.toggleExpandItem(node);
+        }),
+        toggleVisibility: useActionCallback(() => (event, node, tree) => {
+            tree.toggleItemVisibility(node);
+        }),
+        flyToRow: useActionCallback(({ snapshot }) => async (rowClientY) => {
+            var _a;
+            const element = await snapshot.getPromise(sceneTreeElement);
+            const row = await (element === null || element === void 0 ? void 0 : element.getRowAtClientY(rowClientY));
+            if (((_a = row === null || row === void 0 ? void 0 : row.node.id) === null || _a === void 0 ? void 0 : _a.hex) != null) {
+                await viewerCameraActions.flyToById(row.node.id.hex);
+            }
+        }),
+        setContextMenuItem: useActionCallback(({ set, snapshot }) => async (rowClientY) => {
+            const element = await snapshot.getPromise(sceneTreeElement);
+            const row = await (element === null || element === void 0 ? void 0 : element.getRowAtClientY(rowClientY));
+            set(contextMenuItem, row);
+        }),
+    };
+}
+
+function useSceneItemsOperations({ viewerElement }) {
+    const sceneItemsOperation = React__default.useCallback(async (f, ids) => {
+        const scene = await (viewerElement === null || viewerElement === void 0 ? void 0 : viewerElement.scene());
+        if (ids == null) {
+            await (scene === null || scene === void 0 ? void 0 : scene.items((op) => f(op.where((q) => q.all()))).execute());
+        }
+        else if (ids.length > 0) {
+            await (scene === null || scene === void 0 ? void 0 : scene.items((op) => f(op.where((q) => q.withItemIds(ids)))).execute());
+        }
+    }, [viewerElement]);
+    useApplyKeyBinding({
+        fn: React__default.useCallback(async () => {
+            const animation = { milliseconds: 500 };
+            const scene = await (viewerElement === null || viewerElement === void 0 ? void 0 : viewerElement.scene());
+            await (scene === null || scene === void 0 ? void 0 : scene.camera().viewAll().render({ animation }));
+        }, [viewerElement]),
+        keyBind: 'f',
+    });
+    const showOnlySelected = React__default.useCallback(async () => {
+        const scene = await (viewerElement === null || viewerElement === void 0 ? void 0 : viewerElement.scene());
+        scene === null || scene === void 0 ? void 0 : scene.items((op) => [
+            op.where((q) => q.all()).hide(),
+            op.where((q) => q.withSelected()).show(),
+        ]).execute();
+    }, [viewerElement]);
+    const hideSelected = React__default.useCallback(async () => {
+        const scene = await (viewerElement === null || viewerElement === void 0 ? void 0 : viewerElement.scene());
+        scene === null || scene === void 0 ? void 0 : scene.items((op) => [op.where((q) => q.withSelected()).hide()]).execute();
+    }, [viewerElement]);
+    const showOnlyItem = React__default.useCallback(async (id) => {
+        const scene = await (viewerElement === null || viewerElement === void 0 ? void 0 : viewerElement.scene());
+        scene === null || scene === void 0 ? void 0 : scene.items((op) => [
+            op.where((q) => q.all()).hide(),
+            op.where((q) => q.withItemIds([id])).show(),
+        ]).execute();
+    }, [viewerElement]);
+    return {
+        sceneItemsOperation,
+        showOnlySelected,
+        hideSelected,
+        showOnlyItem,
+    };
+}
+
+const VertexHideSelectedMenuItem = () => {
+    const viewerHTMLElement = useRecoilValue(viewerElement);
+    const selectedItems = useRecoilValue(selectionSelectedItemIds);
+    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
+    return (jsxs(VertexMenuItem, { "data-testid": "hide-selected-menu-option", onClick: () => sceneItemOperations.hideSelected(), disabled: selectedItems.length === 0, children: [jsx(VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsx("div", { className: "pl-2", children: "Hide Selected" })] }));
+};
+
+const VertexHideAllMenuItem = () => {
+    const viewerHTMLElement = useRecoilValue(viewerElement);
+    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
+    return (jsxs(VertexMenuItem, { "data-testid": "hide-all-menu-option", onClick: () => {
+            sceneItemOperations.sceneItemsOperation((builder) => builder.hide());
+        }, children: [jsx(VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsx("div", { className: "pl-2", children: "Hide All Parts" })] }));
+};
+
+const VertexShowOnlyMenuItem = () => {
+    const viewerHTMLElement = useRecoilValue(viewerElement);
+    const currentItem = useRecoilValue(contextMenuItem);
+    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
+    return (jsxs(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;
+            if (itemId != null) {
+                sceneItemOperations.showOnlyItem(itemId);
+            }
+        }, disabled: currentItem == null, children: [jsx(VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsx("div", { className: "pl-2", children: "Show Only Part" })] }));
+};
+
+const VertexShowOnlySelectedMenuItem = () => {
+    const viewerHTMLElement = useRecoilValue(viewerElement);
+    const selectedItems = useRecoilValue(selectionSelectedItemIds);
+    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
+    return (jsxs(VertexMenuItem, { "data-testid": "show-only-selected-menu-option", onClick: () => sceneItemOperations.showOnlySelected(), disabled: selectedItems.length === 0, children: [jsx(VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsx("div", { className: "pl-2", children: "Show Only Selected" })] }));
+};
+
+const VertexShowAllMenuItem = () => {
+    const viewerHTMLElement = useRecoilValue(viewerElement);
+    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
+    return (jsxs(VertexMenuItem, { "data-testid": "show-all-menu-option", onClick: () => {
+            sceneItemOperations.sceneItemsOperation((builder) => builder.show());
+        }, children: [jsx(VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsx("div", { className: "pl-2", children: "Show All Parts" })] }));
+};
+
+const VertexFitSelectedMenuItem = () => {
+    const selectedItems = useRecoilValue(selectionSelectedItemIds);
+    const selectedSummary = useRecoilValue(selectionVisibleSummary);
+    const cameraActions = useViewerCameraActions();
+    return (jsxs(VertexMenuItem, { "data-testid": "fit-selected-menu-option", onClick: () => {
+            if ((selectedSummary === null || selectedSummary === void 0 ? void 0 : selectedSummary.boundingBox) != null) {
+                cameraActions.flyToByBoundingBox(selectedSummary.boundingBox);
+            }
+        }, disabled: selectedItems.length === 0, children: [jsx(VertexIcon, { slot: "icon", name: "fit-selected", size: "sm" }), jsx("div", { className: "pl-2", children: "Fit Selected" })] }));
+};
+
+const VertexFlyToMenuItem = () => {
+    const cameraActions = useViewerCameraActions();
+    const currentItem = useRecoilValue(contextMenuItem);
+    return (jsxs(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;
+            if (itemId != null) {
+                cameraActions.flyToById(itemId);
+            }
+        }, disabled: currentItem == null, children: [jsx(VertexIcon, { slot: "icon", name: "paper-airplane", size: "sm" }), jsx("div", { className: "pl-2", children: "Fly To" })] }));
+};
+
+const DefaultSceneTreeContextMenu = () => {
+    return (jsxs("div", { className: "w-56", children: [jsx(VertexHideSelectedMenuItem, {}), jsx(VertexHideAllMenuItem, {}), jsx(VertexShowOnlyMenuItem, {}), jsx(VertexShowOnlySelectedMenuItem, {}), jsx(VertexShowAllMenuItem, {}), jsx(VertexMenuDivider, { className: "md:contents hidden short:hidden" }), jsx(VertexFitSelectedMenuItem, {}), jsx(VertexFlyToMenuItem, {})] }));
+};
+
+const VertexSceneTreeContextMenu = ({ children }) => {
+    const sceneTreeActions = useSceneTreeActions();
+    const sceneTreeHTMLElement = useRecoilValue(sceneTreeElement);
+    const hasDefinedChildren = children != null && children !== false;
+    return (jsx(VertexContextMenu, { menuType: "scene-tree", targetElement: sceneTreeHTMLElement, onOpen: async (event, _pt) => {
+            const pointerEvent = event;
+            await sceneTreeActions.setContextMenuItem(pointerEvent.clientY);
+        }, disableBackdrop: true, children: hasDefinedChildren
+            ? (children)
+            : (jsx(DefaultSceneTreeContextMenu, {})) }));
+};
+
+const VertexHidePartMenuItem = () => {
+    const viewerHTMLElement = useRecoilValue(viewerElement);
+    const currentItem = useRecoilValue(contextMenuItem);
+    const sceneItemOperations = useSceneItemsOperations({ viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null });
+    return (jsxs(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;
+            if (itemId != null) {
+                sceneItemOperations.sceneItemsOperation((builder) => builder.hide(), [itemId]);
+            }
+        }, disabled: currentItem == null, children: [jsx(VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsx("div", { className: "pl-2", children: "Hide Part" })] }));
+};
+
+const DefaultViewerContextMenu = () => {
+    return (jsxs("div", { className: "w-56", children: [jsx(VertexHidePartMenuItem, {}), jsx(VertexHideSelectedMenuItem, {}), jsx(VertexHideAllMenuItem, {}), jsx(VertexShowOnlyMenuItem, {}), jsx(VertexShowOnlySelectedMenuItem, {}), jsx(VertexShowAllMenuItem, {}), jsx(VertexMenuDivider, { className: "md:contents hidden short:hidden" }), jsx(VertexFitSelectedMenuItem, {}), jsx(VertexFlyToMenuItem, {})] }));
+};
+
+const VertexViewerContextMenu = ({ children }) => {
+    const viewerHTMLElement = useRecoilValue(viewerElement);
+    const hasDefinedChildren = children != null && children !== false;
+    return (jsx(VertexContextMenu, { menuType: "viewer", targetElement: viewerHTMLElement, disableBackdrop: true, children: hasDefinedChildren
+            ? (children)
+            : (jsx(DefaultViewerContextMenu, {})) }));
+};
+
+const sdkConfig = atom({
+    key: 'viewerToolkitSdkConfig',
+    default: undefined,
+});
+
+const targetIsElement = (target, tagName) => {
+    return target instanceof Element && target.tagName === tagName;
+};
+
+function useRecoilRef({ state, }) {
+    const callback = useRecoilCallback(({ set }) => (node) => {
+        set(state, node);
+    }, []);
+    return callback;
+}
+
+var AssemblyFontFace;
+(function (AssemblyFontFace) {
+    AssemblyFontFace["ROBOTO"] = "ROBOTO";
+    AssemblyFontFace["ROBOTO_MONO"] = "ROBOTO_MONO";
+})(AssemblyFontFace || (AssemblyFontFace = {}));
+
+function styleFromOptionalFont(font) {
+    return font != null
+        ? {
+            '--scene-tree-default-font-family': styleFromFontFace(font.fontFace),
+            '--scene-tree-default-font-color': font.color,
+        }
+        : {};
+}
+function styleFromOptionalBackgroundColors(backgroundColors) {
+    const depthColors = backgroundColors === null || backgroundColors === void 0 ? void 0 : backgroundColors.depthColors;
+    const depthColorStyles = depthColors != null
+        ? Object.keys(depthColors).reduce((res, key) => (Object.assign(Object.assign({}, res), { [`--scene-tree-row-background-color-depth-${key}`]: depthColors[parseInt(key)] })), {})
+        : {};
+    return backgroundColors != null
+        ? Object.assign(Object.assign({}, depthColorStyles), { '--scene-tree-hovered-row-background-color': backgroundColors.hovered, '--scene-tree-selected-row-background-color': backgroundColors.selected, '--scene-tree-row-background-color': backgroundColors.defaultColor }) : {};
+}
+function styleFromFontFace(fontFace) {
+    switch (fontFace) {
+        case AssemblyFontFace.ROBOTO_MONO:
+            return 'var(--vertex-ui-font-family-monospace)';
+        default:
+            return 'var(--vertex-ui-font-family)';
+    }
+}
+
+const DEFAULT_NAME_COLUMN = {
+    binding: '{{row.node.name}}',
+    label: 'Name',
+    metadataKeyName: 'VERTEX_SCENE_ITEM_NAME',
+};
+const sceneTreeColumnsActiveColumns = selector({
+    key: 'sceneTreeColumnsActiveColumns',
+    get: ({ get }) => {
+        const labels = []; // TODO: map to configured column list
+        const treeWidth = get(sceneTreeWidth);
+        if (treeWidth != null && treeWidth > 0) {
+            const nameWidth = (1 / (labels.length + 1)) * treeWidth;
+            const availableWidth = (treeWidth - nameWidth) / labels.length;
+            return {
+                Name: Object.assign(Object.assign({}, DEFAULT_NAME_COLUMN), { initialWidth: nameWidth, minWidth: availableWidth }),
+            };
+        }
+        return { Name: DEFAULT_NAME_COLUMN };
+    },
+});
+const sceneTreeColumnsActiveColumnNames = selector({
+    key: 'sceneTreeColumnsActiveColumnNames',
+    get: ({ get }) => Object.keys(get(sceneTreeColumnsActiveColumns)),
+});
+
+const VertexSceneTreeTableLayout = (sdkProps) => {
+    const activeColumns = useRecoilValue(sceneTreeColumnsActiveColumns);
+    const activeColumnNames = useRecoilValue(sceneTreeColumnsActiveColumnNames);
+    const columnWidths = []; // TODO: map to configured column sizes
+    return (jsx(VertexSceneTreeTableLayout$1, Object.assign({ "data-testid": "scene-tree-table-layout" }, sdkProps, { children: activeColumnNames.map((k, i) => {
+            var _a;
+            const column = activeColumns[k];
+            const initialWidth = (_a = columnWidths[i]) !== null && _a !== void 0 ? _a : column.initialWidth;
+            return (jsxs(VertexSceneTreeTableColumn, { "data-testid": `scene-tree-table-column-${i}`, initialWidth: initialWidth, minWidth: column.minWidth, children: [jsx("template", { slot: "header", dangerouslySetInnerHTML: {
+                            __html: `
+                  <div class="text-sm text-neutral-800 my-2">
+                    <div class="${classNames('truncate', {
+                                'pl-2': i === 0,
+                                'pr-2': i === activeColumnNames.length - 1,
+                            })}">
+                      ${column.label}
+                    </div>
+                  </div>
+                `,
+                        } }), jsx("template", { dangerouslySetInnerHTML: {
+                            __html: `
+                  <vertex-scene-tree-table-cell
+                    prop:value="${column.binding}"
+                    prop:selection-handler="{{row.data.handleSelection}}"
+                    prop:expansion-handler="{{row.data.handleExpansion}}"
+                    prop:visibility-handler="{{row.data.handleVisibility}}"
+                    ${i === 0 ? 'expand-toggle' : ''}
+                    ${i === activeColumnNames.length - 1
+                                ? 'isolate-button visibility-toggle'
+                                : ''}>
+                      <div class="flex items-center gap-2">
+                        <vertex-tooltip 
+                            class="truncate" 
+                            prop:content="${column.binding != null ? column.binding : '--'}" 
+                            placement="${i !== activeColumnNames.length - 1
+                                ? 'right'
+                                : 'top'}">
+                              <div class="flex items-center w-full">
+                                <div class="truncate">${column.binding}</div>
+                              </div>
+                          </vertex-tooltip>
+                      </div>
+                      
+
+                      <div slot="placeholder" class="flex items-center w-full truncate">
+                        <div> -- </div>
+                      </div>
+                    </vertex-scene-tree-table-cell>
+                  `,
+                        } })] }, column.label));
+        }) })));
+};
+
+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 = useRecoilValue(sdkConfig);
+    const selectionActions = useSelectionActions();
+    const sceneTreeActions = useSceneTreeActions();
+    const viewer = useRecoilValue(viewerElement);
+    const callbackRef = useRecoilRef({
+        state: sceneTreeElement,
+    });
+    const wrappedExpansionHandler = (event, node, tree) => {
+        sceneTreeActions.toggleExpansion(event, node, tree);
+        onToggleExpansion === null || onToggleExpansion === void 0 ? void 0 : onToggleExpansion(event, node, tree);
+    };
+    const wrappedSelectionHandler = (event, node, tree) => {
+        sceneTreeActions.toggleSelection(event, node, tree);
+        onToggleSelection === null || onToggleSelection === void 0 ? void 0 : onToggleSelection(event, node, tree);
+    };
+    const wrappedVisibilityHandler = (event, node, tree) => {
+        sceneTreeActions.toggleVisibility(event, node, tree);
+        onToggleVisibility === null || onToggleVisibility === void 0 ? void 0 : onToggleVisibility(event, node, tree);
+    };
+    const handleClick = (event) => {
+        if (event.altKey) {
+            sceneTreeActions.flyToRow(event.clientY);
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    const handlePointerDown = (event) => {
+        if (targetIsElement(event.target, 'VERTEX-SCENE-TREE-TABLE-COLUMN')) {
+            selectionActions.clearSelection();
+        }
+        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+    };
+    return (jsxs(VertexSceneTree$1, 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: [jsx(VertexSceneTreeTableLayout, {}), children] })));
+};
+
+const useSynchronizedProp = (state, value) => {
+    const setState = useSetRecoilState(state);
+    React__default.useEffect(() => {
+        setState(value);
+    }, [setState, value]);
+};
+
+const VertexPopupButton = (_a) => {
+    var { open, children } = _a, uiProps = __rest(_a, ["open", "children"]);
+    const anchor = children.find((c) => c.type === Anchor);
+    const others = children.filter((c) => c.type !== Anchor);
+    if (anchor == null) {
+        return jsx(Fragment, {});
+    }
+    return (jsxs(VertexPopover, Object.assign({ className: "flex", placement: "top", backdrop: false, open: open }, uiProps, { children: [anchor, jsx("div", { className: classNames('flex mb-1.5', {
+                    hidden: !open,
+                }), "data-testid": "align-plane-popover-menu", children: others })] })));
+};
+const Anchor = ({ tooltipContent, children }) => {
+    return (jsx("div", { slot: "anchor", children: jsx(VertexTooltip, { className: "cursor-pointer", content: tooltipContent, children: children }) }));
+};
+VertexPopupButton.Anchor = Anchor;
+
+const VertexSlider = (_a) => {
+    var { value, defaultValue, onChange, onValueChange, onValueInput } = _a, uiProps = __rest(_a, ["value", "defaultValue", "onChange", "onValueChange", "onValueInput"]);
+    const [displayedValue, setDisplayedValue] = React__default.useState(defaultValue);
+    return (jsx(VertexSlider$1, Object.assign({ className: "w-52 mx-2 items-center", value: value !== null && value !== void 0 ? value : displayedValue, onValueChange: (e) => {
+            setDisplayedValue(e.detail.value);
+            onChange === null || onChange === void 0 ? void 0 : onChange(e.detail.value);
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(e);
+        }, onValueInput: (e) => {
+            setDisplayedValue(e.detail.value);
+            onChange === null || onChange === void 0 ? void 0 : onChange(e.detail.value);
+            onValueInput === null || onValueInput === void 0 ? void 0 : onValueInput(e);
+        } }, uiProps)));
+};
+
+function VertexViewerToolbarDivider() {
+    return (jsx("div", { "data-testid": "toolbar-divider", className: "h-6 w-px bg-neutral-300 mx-1 items-center mt-1" }));
+}
+
+function VertexViewerCrossSectionAlignmentPopoverMenu() {
+    const crossSectioningActions = useCrossSectioningActions();
+    const open = useRecoilValue(crossSectioningAlignmentToolsOpen);
+    const alignment = useRecoilValue(crossSectioningAlignment);
+    const getBaseIcon = () => {
+        return `align-to-${alignment === null || alignment === void 0 ? void 0 : alignment.mode}`;
+    };
+    useStackKeyBinding({
+        id: 'CrossSectionAlignment',
+        keyBind: 'Escape',
+        fn: crossSectioningActions.cancelCurrentHit,
+        addPredicate: () => { var _a; return (_a = alignment === null || alignment === void 0 ? void 0 : alignment.hitPending) !== null && _a !== void 0 ? _a : false; },
+        cancelPredicate: () => !(alignment === null || alignment === void 0 ? void 0 : alignment.hitPending),
+    }, [alignment === null || alignment === void 0 ? void 0 : alignment.hitPending]);
+    return (jsxs(VertexPopupButton, { "data-testid": "section-alignment-popover", placement: "top", backdrop: false, open: open, onDismissed: crossSectioningActions.closeAlignmentTools, children: [jsx(VertexPopupButton.Anchor, { tooltipContent: "Section Alignment", children: jsx(VertexIconButton, { "data-testid": "section-alignment-icon-button", iconName: getBaseIcon(), iconColor: "secondary", onClick: open
+                        ? crossSectioningActions.closeAlignmentTools
+                        : crossSectioningActions.openAlignmentTools, children: jsx(VertexIcon, { "data-testid": "section-alignment-icon-chevron", name: "chevron-up", size: "sm" }) }) }), jsxs(VertexViewerToolbarGroup, { direction: "vertical", className: "flex justify-evenly items-center py-1 my-1 ring-1 ring-neutral-200 rounded bg-neutral-100 opacity-95", children: [jsx(VertexIconButton, { iconColor: "secondary", onClick: () => crossSectioningActions.updateAlignment('global'), className: "w-full text-neutral-800 hover:bg-neutral-300 rounded cursor-pointer mx-0.5 py-1 px-2", "data-testid": "section-alignment-align-global", iconName: "align-to-global", variant: "plain", children: jsx("div", { className: "text-base ml-2", children: "Align to Global" }) }), jsx(VertexIconButton, { iconColor: "secondary", onClick: () => crossSectioningActions.updateAlignment('surface'), className: "w-full text-neutral-800 hover:bg-neutral-300 rounded cursor-pointer mx-0.5 py-1 px-2", "data-testid": "section-alignment-align-surface", iconName: "align-to-surface", variant: "plain", children: jsx("div", { className: "text-base ml-2", children: "Align to Surface" }) })] })] }));
+}
+
+function VertexViewerCrossSectionAxisPopoverMenu() {
+    const crossSectioningActions = useCrossSectioningActions();
+    const open = useRecoilValue(crossSectioningAxisToolsOpen);
+    const planes = useRecoilValue(crossSectioningPlanes);
+    const availableAxes = useRecoilValueLoadable(crossSectioningAvailableAxes);
+    const baseIcon = React__default.useMemo(() => {
+        const axis$1 = planes.length > 0 && availableAxes.state === 'hasValue'
+            ? axis(planes[0], xAxis(availableAxes.contents), yAxis(availableAxes.contents), zAxis(availableAxes.contents))
+            : 'x';
+        return axis$1 != null ? `axis-${axis$1}` : 'axis-x';
+    }, [availableAxes.state, availableAxes.contents, planes]);
+    return (jsxs(VertexPopupButton, { "data-testid": "align-plane-popover", placement: "top", backdrop: false, open: open, onDismissed: crossSectioningActions.closeAxisTools, children: [jsx(VertexPopupButton.Anchor, { tooltipContent: "Align Plane", children: jsx(VertexIconButton, { onClick: open
+                        ? crossSectioningActions.closeAxisTools
+                        : crossSectioningActions.openAxisTools, iconName: baseIcon, "data-testid": "align-plane-icon", iconColor: "secondary", children: jsx(VertexIcon, { "data-testid": "align-plane-icon-chevron", name: "chevron-up", size: "sm" }) }) }), jsxs(VertexViewerToolbarGroup, { direction: "vertical", className: "flex justify-evenly items-center py-1 my-1 ring-1 ring-neutral-200 rounded bg-neutral-100 opacity-95", children: [jsx(VertexIconButton, { "data-testid": "align-plane-x-axis-button", className: "w-full text-neutral-800 hover:bg-neutral-300 rounded cursor-pointer mx-0.5 py-1 px-2", onClick: () => crossSectioningActions.updateAxis('x'), variant: "plain", iconColor: "secondary", iconName: "axis-x", children: jsx("div", { className: "text-base ml-2", children: "X-axis Plane" }) }), jsx(VertexIconButton, { className: "w-full text-neutral-800 hover:bg-neutral-300 rounded cursor-pointer mx-0.5 py-1 px-2", variant: "plain", iconColor: "secondary", iconName: "axis-y", "data-testid": "align-plane-y-axis-button", onClick: () => crossSectioningActions.updateAxis('y'), children: jsx("div", { className: "text-base ml-2", children: "Y-axis Plane" }) }), jsx(VertexIconButton, { "data-testid": "align-plane-z-axis-button", className: "w-full text-neutral-800 hover:bg-neutral-300 rounded cursor-pointer mx-0.5 py-1 px-2", onClick: () => crossSectioningActions.updateAxis('z'), variant: "plain", iconColor: "secondary", iconName: "axis-z", children: jsx("div", { className: "text-base ml-2", children: "Z-axis Plane" }) })] })] }));
+}
+
+/**
+ * Types of distance units
+ */
+var DistanceUnit;
+(function (DistanceUnit) {
+    DistanceUnit["mm"] = "millimeters";
+    DistanceUnit["cm"] = "centimeters";
+    DistanceUnit["m"] = "meters";
+    DistanceUnit["in"] = "inches";
+    DistanceUnit["ft"] = "feet";
+})(DistanceUnit || (DistanceUnit = {}));
+/**
+ * Conversion factors (based on mm)
+ */
+var DistanceUnitConversion;
+(function (DistanceUnitConversion) {
+    DistanceUnitConversion[DistanceUnitConversion["mm"] = 1] = "mm";
+    DistanceUnitConversion[DistanceUnitConversion["cm"] = 0.1] = "cm";
+    DistanceUnitConversion[DistanceUnitConversion["m"] = 0.001] = "m";
+    DistanceUnitConversion[DistanceUnitConversion["in"] = 0.03937007874015748] = "in";
+    DistanceUnitConversion[DistanceUnitConversion["ft"] = 0.0032808398950131233] = "ft";
+})(DistanceUnitConversion || (DistanceUnitConversion = {}));
+/**
+ * Converts a value from non-system units (in) to base system units (mm) using supplied conversion factor.
+ *
+ * @param value Value to convert.
+ * @param fromUnit Unit converting from (to base system units)
+ */
+const convertFrom = (value, fromUnit) => {
+    const conversionFactor = DistanceUnitConversion[fromUnit];
+    return value / conversionFactor;
+};
+/**
+ * Converts a value from base system units (mm) to another unit based on supplied conversion factor.
+ *
+ * @param value Value to convert.
+ * @param toUnit Unit to convert to (from base system units)
+ */
+const convertTo = (value, toUnit) => {
+    const conversionFactor = DistanceUnitConversion[toUnit];
+    return value * conversionFactor;
+};
+/**
+ * Formats a numeric value as a string with supplied unit and decimal places.
+ *
+ * @param value
+ * @param unit
+ * @param decimalPlaces
+ */
+const formatWithUnit = (value, unit, decimalPlaces) => {
+    return `${value.toFixed(decimalPlaces)} ${unit}`;
+};
+/**
+ * Formats a (millimeter based) numeric distance value
+ * for display, as converted to specificied units.
+ *
+ * @param value
+ * @param unit
+ * @param decimalPlaces
+ */
+const formatDistance = (value, unit, decimalPlaces) => {
+    return formatWithUnit(convertTo(value, unit), unit, decimalPlaces);
+};
+/**
+ * Returns a distance formatter function for a given pair of unit and decimal place params.
+ *
+ * @param unit
+ * @param decimalPlaces
+ */
+const createDistanceFormatter = (unit, decimalPlaces) => {
+    return (value) => formatDistance(value, unit, decimalPlaces);
+};
+
+function VertexViewerCrossSectionOffsetStepper({ offset, measurementUnit, decimalPlaces, onOffsetChange, }) {
+    const [value, setValue] = React__default.useState(convertTo(offset, measurementUnit));
+    React__default.useEffect(() => {
+        setValue(convertTo(offset, measurementUnit));
+    }, [measurementUnit, offset]);
+    const formatter = createDistanceFormatter(measurementUnit, decimalPlaces);
+    const handleIncrementalUpdate = (increment) => {
+        const updated = convertFrom(value + increment, measurementUnit);
+        onOffsetChange(updated);
+    };
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        onOffsetChange(convertFrom(value, measurementUnit));
+    };
+    const handleBlur = () => {
+        onOffsetChange(convertFrom(value, measurementUnit));
+    };
+    return (jsx(VertexTooltip, { content: "Plane Offset", children: jsx("form", { "data-testid": "cross-section-stepper-form", onSubmit: handleSubmit, children: jsxs(VertexTextfield, { "data-testid": "cross-section-stepper-input", className: "viewer-toolbar-input w-32 border-none ring-0 bg-white", type: "text", value: formatter(parseFloat(offset.toFixed(3))), onInputInput: (event) => {
+                    setValue(event.detail.value != null
+                        ? parseFloat(event.detail.value)
+                        : offset);
+                }, onBlur: handleBlur, children: [jsx("div", { "data-testid": "cross-section-stepper-decrement", className: "py-1 cursor-pointer", slot: "left", onClick: () => handleIncrementalUpdate(-1), children: jsx(VertexIcon, { name: "chevron-left", size: "sm" }) }), jsx("div", { "data-testid": "cross-section-stepper-increment", className: "py-1 cursor-pointer", slot: "right", onClick: () => handleIncrementalUpdate(1), children: jsx(VertexIcon, { name: "chevron-right", size: "sm" }) })] }) }) }));
+}
+
+const INTERACTIVITY_TIMEOUT_DEBOUNCE_THRESHOLD = 400;
+function VertexViewerCrossSectionPopupMenu({ decimalPlaces, measurementUnit, }) {
+    const crossSectioningActions = useCrossSectioningActions();
+    const open = useRecoilValue(crossSectioningAdditionalToolsOpen);
+    const sliderRange = useRecoilValueLoadable(crossSectioningSliderRange);
+    const displayOffset = useRecoilValueLoadable(crossSectioningPlaneDisplayOffset);
+    const interactiveTimeout = React__default.useRef();
+    const displayedRange = React__default.useMemo(() => sliderRange.state === 'hasValue'
+        ? sliderRange.contents
+        : DEFAULT_SLIDER_RANGE, [sliderRange.state, sliderRange.contents]);
+    const displayedOffset = React__default.useMemo(() => (displayOffset.state === 'hasValue' ? displayOffset.contents : 0), [displayOffset.state, displayOffset.contents]);
+    const handleCrossSectionValueChange = (value) => {
+        clearTimeout(interactiveTimeout.current);
+        interactiveTimeout.current = window.setTimeout(() => {
+            crossSectioningActions.endInteraction();
+        }, INTERACTIVITY_TIMEOUT_DEBOUNCE_THRESHOLD);
+        crossSectioningActions.beginInteraction();
+        crossSectioningActions.updatePlanes(value);
+    };
+    return (jsxs(VertexPopupButton, { "data-testid": "cross-section-popover", placement: "top", backdrop: false, open: open, onDismissed: crossSectioningActions.closeAdditionalTools, children: [jsx(VertexPopupButton.Anchor, { tooltipContent: "Section Tools", children: jsx("div", { className: "-ml-px py-1.5", children: jsx(VertexIcon, { "data-testid": "cross-section-popover-icon", name: "chevron-up", size: "sm", onClick: open
+                            ? crossSectioningActions.closeAdditionalTools
+                            : crossSectioningActions.openAdditionalTools }) }) }), jsxs(VertexViewerToolbarGroup, { className: "relative bottom-3 flex justify-evenly items-center p-1 ring-1 ring-neutral-200 rounded bg-neutral-100 opacity-95", children: [jsx(VertexViewerCrossSectionAlignmentPopoverMenu, {}), jsx(VertexTooltip, { className: "w-auto", content: "Reverse", children: jsx(VertexIconButton, { iconName: "flip", "data-testid": "viewer-toolbar-flip-button", onClick: crossSectioningActions.flipPlanes, iconColor: "secondary" }) }), jsx(VertexTooltip, { className: "w-auto", content: "Align View to Plane", children: jsx(VertexIconButton, { "data-testid": "viewer-toolbar-align-view-to-plane-button", iconName: "align-view-to-plane", onClick: crossSectioningActions.alignViewToPlane, iconColor: "secondary" }) }), jsx(VertexViewerToolbarDivider, {}), jsx(VertexViewerCrossSectionAxisPopoverMenu, {}), jsx(VertexSlider, { value: displayedOffset, defaultValue: displayedRange.default, disabled: sliderRange.state !== 'hasValue', min: displayedRange.min, max: displayedRange.max, step: 0.01, onChange: handleCrossSectionValueChange }), jsx("div", { className: "px-4", children: jsx(VertexViewerCrossSectionOffsetStepper, { decimalPlaces: decimalPlaces, measurementUnit: measurementUnit, offset: displayOffset.state === 'hasValue' ? displayOffset.contents : 0, onOffsetChange: handleCrossSectionValueChange }) })] })] }));
+}
+
+const VertexViewerCrossSectionButton = ({ decimalPlaces, measurementUnit, sectionLineWidth, sectionColor, }) => {
+    const crossSectioningActions = useCrossSectioningActions();
+    const isEnabled = useRecoilValue(crossSectioningEnabled);
+    useSynchronizedProp(crossSectioningBorderWidth, sectionLineWidth);
+    useSynchronizedProp(crossSectioningHighlightColor, sectionColor);
+    return (jsxs(Fragment, { children: [jsx(VertexTooltip, { content: isEnabled ? 'Hide Section' : 'Show Section', children: jsx(VertexIconButton, { "data-testid": "viewer-toolbar-cross-section-button", iconName: "cross-section", iconColor: isEnabled ? 'primary' : 'secondary', onClick: () => isEnabled
+                        ? crossSectioningActions.disable()
+                        : crossSectioningActions.enable() }) }), jsx(VertexViewerCrossSectionPopupMenu, { decimalPlaces: decimalPlaces !== null && decimalPlaces !== void 0 ? decimalPlaces : 2, measurementUnit: measurementUnit !== null && measurementUnit !== void 0 ? measurementUnit : 'mm' })] }));
+};
+
+const VertexFitAllButton = () => {
+    const viewerHTMLElement = useRecoilValue(viewerElement);
+    return (jsx(VertexTooltip, { content: "Fit All", children: jsx(VertexIconButton, { iconName: "fit-all", iconColor: "secondary", "data-testid": "viewer-toolbar-fit-all-button", onClick: async () => {
+                const scene = await (viewerHTMLElement === null || viewerHTMLElement === void 0 ? void 0 : viewerHTMLElement.scene());
+                await (scene === null || scene === void 0 ? void 0 : scene.camera().viewAll().render({ animation: { milliseconds: 500 } }));
+            } }) }));
+};
+
+const VertexPanButton = () => {
+    const viewerHTMLElement = useRecoilValue(viewerElement);
+    const sceneReady = useRecoilValue(viewerInitialSceneReady);
+    const [activeTool, setActiveTool] = useRecoilState(viewerPrimaryInteractionType);
+    const [interactionHandler, setInteractionHandler] = useRecoilState(viewerBaseInteractionHandlerProvider);
+    React__default.useEffect(() => {
+        if (viewerHTMLElement != null && sceneReady) {
+            setInteractionHandler(viewerHTMLElement.getBaseInteractionHandler());
+        }
+    }, [viewerHTMLElement, sceneReady, setInteractionHandler]);
+    return (jsx(VertexTooltip, { content: "Pan", children: jsx(VertexIconButton, { iconName: "pan", iconColor: activeTool === 'pan' ? 'primary' : 'secondary', "data-testid": "viewer-toolbar-pan-button", onClick: async () => {
+                setActiveTool('pan');
+                if (interactionHandler != null) {
+                    const handler = await interactionHandler;
+                    handler === null || handler === void 0 ? void 0 : handler.setPrimaryInteractionType('pan');
+                }
+            } }) }));
+};
+
+const VertexRotateButton = () => {
+    const viewerHTMLElement = useRecoilValue(viewerElement);
+    const sceneReady = useRecoilValue(viewerInitialSceneReady);
+    const [activeTool, setActiveTool] = useRecoilState(viewerPrimaryInteractionType);
+    const [interactionHandler, setInteractionHandler] = useRecoilState(viewerBaseInteractionHandlerProvider);
+    React__default.useEffect(() => {
+        if (viewerHTMLElement != null && sceneReady) {
+            setInteractionHandler(viewerHTMLElement.getBaseInteractionHandler());
+        }
+    }, [viewerHTMLElement, sceneReady, setInteractionHandler]);
+    return (jsx(VertexTooltip, { content: "Rotate", children: jsx(VertexIconButton, { iconName: "rotate", iconColor: activeTool === 'rotate' ? 'primary' : 'secondary', "data-testid": "viewer-toolbar-rotate-button", onClick: async () => {
+                setActiveTool('rotate');
+                if (interactionHandler != null) {
+                    const handler = await interactionHandler;
+                    handler === null || handler === void 0 ? void 0 : handler.setPrimaryInteractionType('rotate');
+                }
+            } }) }));
+};
+
+const boxSelectionEnabled = atom({
+    key: 'boxSelectionEnabled',
+    default: false,
+});
+const boxSelectionOperationType = atom({
+    key: 'boxSelectionOperationType',
+    default: 'clearAndSelect',
+});
+
+const useBoxSelectionActions = () => {
+    return {
+        enable: useActionCallback(({ set }) => () => {
+            set(boxSelectionEnabled, true);
+        }),
+        disable: useActionCallback(({ reset }) => async () => {
+            reset(boxSelectionEnabled);
+            reset(boxSelectionOperationType);
+        }),
+        setOperationType: useActionCallback(({ set }) => (operationType) => {
+            set(boxSelectionOperationType, operationType);
+        }),
+    };
+};
+
+const VertexBoxSelectionButton = () => {
+    const boxSelectionActions = useBoxSelectionActions();
+    const enabled = useRecoilValue(boxSelectionEnabled);
+    useStackKeyBinding({
+        id: 'ExitBoxSelection',
+        keyBind: 'Escape',
+        fn: boxSelectionActions.disable,
+        addPredicate: () => enabled,
+        cancelPredicate: () => !enabled,
+    }, [enabled]);
+    return (jsx(VertexTooltip, { content: "Box Selection", children: jsx(VertexIconButton, { iconName: "box-cursor", iconColor: enabled ? 'primary' : 'secondary', "data-testid": "viewer-toolbar-enable-box-selection-button", onClick: enabled ? boxSelectionActions.disable : boxSelectionActions.enable }) }));
+};
+
+const VertexZoomButton = () => {
+    const viewerHTMLElement = useRecoilValue(viewerElement);
+    const sceneReady = useRecoilValue(viewerInitialSceneReady);
+    const [activeTool, setActiveTool] = useRecoilState(viewerPrimaryInteractionType);
+    const [interactionHandler, setInteractionHandler] = useRecoilState(viewerBaseInteractionHandlerProvider);
+    React__default.useEffect(() => {
+        if (viewerHTMLElement != null && sceneReady) {
+            setInteractionHandler(viewerHTMLElement.getBaseInteractionHandler());
+        }
+    }, [viewerHTMLElement, sceneReady, setInteractionHandler]);
+    return (jsx(VertexTooltip, { content: "Zoom", children: jsx(VertexIconButton, { iconName: "zoom", iconColor: activeTool === 'zoom' ? 'primary' : 'secondary', "data-testid": "viewer-toolbar-zoom-button", onClick: async () => {
+                setActiveTool('zoom');
+                if (interactionHandler != null) {
+                    const handler = await interactionHandler;
+                    handler === null || handler === void 0 ? void 0 : handler.setPrimaryInteractionType('zoom');
+                }
+            } }) }));
+};
+
+const DefaultToolbar = () => {
+    return (jsx(VertexViewerToolbar, { placement: 'bottom-center', children: jsxs(VertexViewerToolbarGroup, { className: "p-1 border border-neutral-200 rounded bg-neutral-100 opacity-95", children: [jsx(VertexRotateButton, {}), jsx(VertexPanButton, {}), jsx(VertexZoomButton, {}), jsx(VertexFitAllButton, {}), jsx(VertexViewerToolbarDivider, {}), jsx(VertexBoxSelectionButton, {}), jsx(VertexViewerToolbarDivider, {}), jsx(VertexViewerCrossSectionButton, {})] }) }));
+};
+
+const VertexToolbar = ({ children }) => {
+    const hasDefinedChildren = children != null && children !== false;
+    return (jsx(VertexViewerToolbar, { placement: 'bottom-center', children: hasDefinedChildren ? (jsx(VertexViewerToolbarGroup, { className: "p-1 border border-neutral-200 rounded bg-neutral-100 opacity-95", children: children })) : (jsx(DefaultToolbar, {})) }));
+};
+
+function useViewerFrameActions() {
+    return {
+        frameDrawn: useActionCallback(({ set, reset, snapshot }) => async (event) => {
+            const currentSummary = await snapshot.getPromise(selectionVisibleSummary);
+            set(viewerFrameScene, event.detail.scene);
+            set(selectionVisibleSummary, event.detail.scene.sceneViewSummary.selectedVisibleSummary);
+            set(selectionPreviousVisibleSummary, currentSummary);
+        }),
+    };
+}
+
+function useCallbackRef(props) {
+    var _a;
+    const [element, setElement] = React__default.useState((_a = void 0 ) !== null && _a !== void 0 ? _a : null);
+    const callback = React__default.useCallback((node) => setElement(node), []);
+    return {
+        element,
+        callback,
+    };
+}
+
+const BoxSelectionTool = () => {
+    const { callback } = useCallbackRef();
+    const boxSelectionActions = useBoxSelectionActions();
+    const operationType = useRecoilValue(boxSelectionOperationType);
+    useApplyKeyBinding({
+        keyBind: 'Shift',
+        fn: React.useCallback(() => boxSelectionActions.setOperationType('select'), []),
+        off: React.useCallback(() => boxSelectionActions.setOperationType('clearAndSelect'), []),
+    });
+    return (jsx(VertexViewerBoxQueryTool, { ref: callback, "data-testid": "viewer-box-query-tool", operationType: operationType }));
+};
+
+const VertexViewerViewCube = (_a) => {
+    var { placement } = _a, sdkProps = __rest(_a, ["placement"]);
+    return (jsx(VertexViewerToolbar, { "data-testid": "view-cube-toolbar", placement: placement !== null && placement !== void 0 ? placement : 'top-right', children: jsx(VertexViewerViewCube$1, Object.assign({ className: "m-7" }, sdkProps)) }));
+};
+
+const VertexViewer = (_a) => {
+    var { id, disableSelection, onTap, onLongpress, onFrameDrawn, viewerRefCallback, children } = _a, sdkProps = __rest(_a, ["id", "disableSelection", "onTap", "onLongpress", "onFrameDrawn", "viewerRefCallback", "children"]);
+    const config = useRecoilValue(sdkConfig);
+    const callbackRef = useRecoilRef({
+        state: viewerElement,
+    });
+    const currentCrossSectionAlignment = useRecoilValue(crossSectioningAlignment);
+    const [sceneReady, setSceneReady] = useRecoilState(viewerInitialSceneReady);
+    const isBoxSelectionEnabled = useRecoilValue(boxSelectionEnabled);
+    const viewerFrameActions = useViewerFrameActions();
+    const hitActions = useHitActions();
+    const selectionActions = useSelectionActions();
+    const hasDefinedChildren = children != null && children !== false;
+    useKeyBindings();
+    return (jsxs(VertexViewer$1, Object.assign({ id: id !== null && id !== void 0 ? id : 'vertex-viewer', "data-testid": "vertex-viewer", ref: viewerRefCallback !== null && viewerRefCallback !== void 0 ? viewerRefCallback : callbackRef, className: classNames('flex w-full h-full', {
+            'cursor-crosshair': currentCrossSectionAlignment.hitPending,
+        }), config: config, onTap: (e) => {
+            const actions = [
+                ...(disableSelection ? [] : [selectionActions.selectCurrentHit]),
+            ];
+            hitActions.tap(e, ...actions);
+            onTap === null || onTap === void 0 ? void 0 : onTap(e);
+        }, onLongpress: (e) => {
+            hitActions.longPress(e);
+            onLongpress === null || onLongpress === void 0 ? void 0 : onLongpress(e);
+        }, onFrameDrawn: (e) => {
+            viewerFrameActions.frameDrawn(e);
+            onFrameDrawn === null || onFrameDrawn === void 0 ? void 0 : onFrameDrawn(e);
+        } }, sdkProps, { onSceneReady: () => {
+            if (!sceneReady) {
+                setSceneReady(true);
+            }
+        }, children: [isBoxSelectionEnabled && jsx(BoxSelectionTool, {}), hasDefinedChildren ? (children) : (jsxs(Fragment, { children: [jsx(VertexViewerViewCube, {}), jsx(VertexToolbar, {})] }))] })));
+};
+
+function toSdkConfig(config) {
+    if (isOnlyNetworkConfig(config)) {
+        return { network: config };
+    }
+    return config;
+}
+function isOnlyNetworkConfig(config) {
+    const asNetworkConfig = config;
+    if (asNetworkConfig.renderingHost != null) {
+        return true;
+    }
+    return false;
+}
+
+const VertexViewerToolkitEventListener = ({ onHitStateChange, onSelectionStateChange, }) => {
+    const hitState$1 = useRecoilValue(hitState);
+    const selectionState$1 = useRecoilValue(selectionState);
+    React__default.useEffect(() => {
+        onHitStateChange === null || onHitStateChange === void 0 ? void 0 : onHitStateChange(hitState$1);
+    }, [hitState$1, onHitStateChange]);
+    React__default.useEffect(() => {
+        onSelectionStateChange === null || onSelectionStateChange === void 0 ? void 0 : onSelectionStateChange(selectionState$1);
+    }, [selectionState$1, onSelectionStateChange]);
+    return jsx(Fragment, {});
+};
+
+const VertexViewerToolkitRoot = (_a) => {
+    var { override, children, config } = _a, eventWrapperProps = __rest(_a, ["override", "children", "config"]);
+    React__default.useEffect(() => {
+        defineCustomElements();
+    }, []);
+    return (jsx(RecoilRoot, { override: override, children: jsxs(Fragment, { children: [jsx(VertexViewerToolkitEventListener, Object.assign({}, eventWrapperProps)), jsx(VertexViewerToolkitRootConfig, { config: config, children: children })] }) }));
+};
+const VertexViewerToolkitRootConfig = ({ config, children, }) => {
+    const setSdkConfig = useSetRecoilState(sdkConfig);
+    React__default.useEffect(() => {
+        const parsedConfig = config != null ? toSdkConfig(config) : undefined;
+        setSdkConfig(parsedConfig);
+    }, [config, setSdkConfig]);
+    return jsx(Fragment, { children: children });
+};
+
+var index = /*#__PURE__*/Object.freeze({
+   __proto__: null,
+   get AssemblyFontFace () { return AssemblyFontFace; }
+});
+
+export { index$3 as CrossSection, index$2 as Hits, index as SceneTree, index$1 as Selection, VertexContextMenu, VertexFitAllButton, VertexFitSelectedMenuItem, VertexFlyToMenuItem, VertexHideAllMenuItem, VertexHidePartMenuItem, VertexHideSelectedMenuItem, VertexPanButton, VertexRotateButton, VertexSceneTree, VertexSceneTreeContextMenu, VertexSceneTreeTableLayout, VertexShowAllMenuItem, VertexShowOnlyMenuItem, VertexShowOnlySelectedMenuItem, VertexToolbar, VertexViewer, VertexViewerContextMenu, VertexViewerCrossSectionButton, VertexViewerToolbarDivider, VertexViewerToolkitRoot, VertexViewerViewCube, VertexZoomButton };
+//# sourceMappingURL=bundle.esm.js.map