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

package/dist/bundle.cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var uiReact = require('@vertexvis/ui-react');
 var classNames = require('classnames');
@@ -9,6 +10,7 @@ var geometry = require('@vertexvis/geometry');
 var utils = require('@vertexvis/utils');
 var React = require('react');
 var viewerReact = require('@vertexvis/viewer-react');
+var loader$1 = require('@vertexvis/ui/loader');
 var loader = require('@vertexvis/viewer/loader');
 
 function _interopNamespaceDefault(e) {
@@ -31,11 +33,12 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const DEFAULT_VERTICAL_SCALE = 1;
-const VertexResizableContent = ({ displayShadow, heading, id, initialScale, position = 'left', children, onResize, }) => {
-    const isHorizontallyPositioned = position === 'left' || position === 'right';
-    const isVerticallyPositioned = position === 'top';
+const VertexResizableContent = (_a) => {
+    var { className, style, displayShadow, heading, id, initialScale, placement = 'left', children, onResize } = _a, uiProps = tslib.__rest(_a, ["className", "style", "displayShadow", "heading", "id", "initialScale", "placement", "children", "onResize"]);
+    const isHorizontallyPositioned = placement === 'left' || placement === 'right';
+    const isVerticallyPositioned = placement === 'top';
     function getHorizontalResizeDirection() {
-        switch (position) {
+        switch (placement) {
             case 'left':
                 return 'right';
             case 'right':
@@ -45,23 +48,22 @@ const VertexResizableContent = ({ displayShadow, heading, id, initialScale, posi
         }
     }
     function getVerticalResizeDirection() {
-        return position === 'top' ? 'top' : 'none';
+        return placement === 'top' ? 'top' : 'none';
     }
     const initialVerticalScale = initialScale != null ? initialScale : DEFAULT_VERTICAL_SCALE;
-    return (jsxRuntime.jsx(uiReact.VertexResizable, { id: id, "data-testid": `resizable-content-position-${position}`, className: classNames('pointer-events-auto z-popover md:z-overlay bg-white bg-opacity-95 flex-grow-0 flex-shrink-0', {
-            ['border-r min-w-75 max-w-half']: position === 'left',
-            ['sidebar-shadow-right']: position === 'left' && displayShadow,
-            ['border-l right-0 relative']: position === 'right',
-            ['sidebar-shadow-left']: position === 'right' && displayShadow,
-            ['border-t bottom-0 fixed']: position === 'top',
+    return (jsxRuntime.jsx(uiReact.VertexResizable, Object.assign({ id: id, "data-testid": `resizable-content-position-${placement}`, className: classNames(className, 'pointer-events-auto z-popover md:z-overlay bg-white bg-opacity-95 flex-grow-0 flex-shrink-0 border-neutral-300', {
+            ['border-r min-w-75 max-w-half']: placement === 'left',
+            ['sidebar-shadow-right']: placement === 'left' && displayShadow,
+            ['border-l right-0 relative']: placement === 'right',
+            ['sidebar-shadow-left']: placement === 'right' && displayShadow,
+            ['border-t bottom-0 fixed']: placement === 'top',
             ['min-h-12 sheet']: isVerticallyPositioned,
-        }), style: {
+        }), style: Object.assign({ 
             // This corrects an issue on mobile where `100vh` reflects the space
             // under the address bar and bottom toolbar in CSS.
-            maxHeight: position === 'top' ? window.innerHeight : undefined,
-        }, initialHorizontalScale: isHorizontallyPositioned ? initialScale : undefined, initialVerticalScale: isVerticallyPositioned ? initialVerticalScale : undefined, horizontalDirection: getHorizontalResizeDirection(), verticalDirection: getVerticalResizeDirection(), position: position === 'right' || position === 'top' ? 'absolute' : 'relative', onResizeEnd: () => onResize === null || onResize === void 0 ? void 0 : onResize(), children: jsxRuntime.jsxs("div", { className: "flex flex-col h-full w-full", children: [jsxRuntime.jsx("div", { className: "flex justify-center w-full", children: jsxRuntime.jsx("div", { className: "block md:hidden w-20 h-0.5 mt-0.5 bg-neutral-600 rounded" }) }), heading, jsxRuntime.jsx("div", { className: classNames('w-full flex flex-col h-0 flex-grow', {
-                        ['right-0']: position === 'right',
-                    }), children: children })] }) }));
+            maxHeight: placement === 'top' ? window.innerHeight : undefined }, style), initialHorizontalScale: isHorizontallyPositioned ? initialScale : undefined, initialVerticalScale: isVerticallyPositioned ? initialVerticalScale : undefined, horizontalDirection: getHorizontalResizeDirection(), verticalDirection: getVerticalResizeDirection(), position: placement === 'right' || placement === 'top' ? 'absolute' : 'relative', onResizeEnd: () => onResize === null || onResize === void 0 ? void 0 : onResize() }, uiProps, { children: jsxRuntime.jsxs("div", { className: "flex flex-col h-full w-full", children: [jsxRuntime.jsx("div", { className: "flex justify-center w-full", children: jsxRuntime.jsx("div", { className: "block md:hidden w-20 h-0.5 mt-0.5 bg-neutral-600 rounded" }) }), heading, jsxRuntime.jsx("div", { className: classNames('w-full flex flex-col h-0 flex-grow', {
+                        ['right-0']: placement === 'right',
+                    }), children: children })] }) })));
 };
 
 function contextMenuItemIsRow(item) {
@@ -93,40 +95,6 @@ const contextMenuActivePosition = recoil.selector({
     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: {
@@ -234,7 +202,7 @@ function useActionCallback(fn, deps = []) {
  */
 function retainSnapshot(fn) {
     return (_a) => {
-        var { snapshot } = _a, cb = __rest(_a, ["snapshot"]);
+        var { snapshot } = _a, cb = tslib.__rest(_a, ["snapshot"]);
         return async (...args) => {
             const release = snapshot.retain();
             try {
@@ -1005,22 +973,20 @@ var index$2 = /*#__PURE__*/Object.freeze({
 
 function useContextMenuActions() {
     return {
-        pointerDown: useActionCallback(({ set }) => async (event, pointOverride) => {
-            var _a, _b;
+        pointerDown: useActionCallback(({ set }) => async (event) => {
             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;
+                const xCoordinate = event.clientX;
+                const yCoordinate = event === null || event === void 0 ? void 0 : event.clientY;
                 set(contextMenuPosition, geometry.Point.create(xCoordinate, yCoordinate));
                 set(contextMenuTarget, event.target);
             }
         }),
-        pointerUp: useActionCallback(({ snapshot, set }) => async (event, type, predicate, onOpen, pointOverride) => {
-            var _a, _b;
+        pointerUp: useActionCallback(({ snapshot, set }) => async (event, type, predicate, onOpen) => {
             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 xCoordinate = event.clientX;
+                const yCoordinate = event === null || event === void 0 ? void 0 : event.clientY;
                 const point = geometry.Point.create(xCoordinate, yCoordinate);
                 const pointDistance = downPosition != null ? geometry.Point.distance(downPosition, point) : 0;
                 const predicateResult = predicate == null || predicate(event);
@@ -1322,6 +1288,18 @@ const useKeyBindings = ({ keydownRepeatInterval = 25, keydownIgnorePredicate = i
     }, [state.applyBindings, state.lastPressed]);
 };
 
+function useDefaultKeybindings() {
+    useApplyKeyBinding({
+        fn: useActionCallback(({ snapshot }) => async () => {
+            const sceneProvider = await snapshot.getPromiseRequired(viewerSceneProvider);
+            const animation = { milliseconds: 500 };
+            const scene = await sceneProvider();
+            await (scene === null || scene === void 0 ? void 0 : scene.camera().viewAll().render({ animation }));
+        }),
+        keyBind: 'f',
+    });
+}
+
 function useLongPress({ target, callback, delay = 500, onMovement, }) {
     const [longPressTimeout, setLongPressTimeout] = React__namespace.useState();
     const [touchStartPosition, setTouchStartPosition] = React__namespace.useState();
@@ -1368,6 +1346,7 @@ const VertexContextMenu = ({ targetElement, menuType, disableBackdrop, openPredi
     const activeContextMenu = recoil.useRecoilValue(contextMenuActive);
     const activePosition = recoil.useRecoilValue(contextMenuActivePosition);
     const fallbackPlacements = React.useMemo(() => ['bottom-end', 'top-start', 'top-end', 'right', 'left'], []);
+    const isOpen = activeContextMenu === menuType;
     useStackKeyBinding({
         id: 'ContextMenu',
         keyBind: 'Escape',
@@ -1409,26 +1388,10 @@ const VertexContextMenu = ({ targetElement, menuType, disableBackdrop, openPredi
     }, [disableBackdrop, menuType, activeContextMenu]);
     React.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, geometry.Point.create(xCoordinate, yCoordinate));
+            contextMenuActions.pointerDown(event);
         };
         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, geometry.Point.create(xCoordinate, yCoordinate));
+            contextMenuActions.pointerUp(event, menuType, openPredicate, onOpen);
         };
         const handleContextMenu = (event) => contextMenuActions.contextMenu(event, openPredicate);
         target === null || target === void 0 ? void 0 : target.addEventListener('pointerdown', handlePointerDown);
@@ -1440,7 +1403,9 @@ const VertexContextMenu = ({ targetElement, menuType, disableBackdrop, openPredi
             target === null || target === void 0 ? void 0 : target.removeEventListener('contextmenu', handleContextMenu);
         };
     }, [targetElement, menuType, openPredicate]);
-    return (jsxRuntime.jsx(uiReact.VertexMenu, { "data-testid": `${menuType}-context-menu`, open: activeContextMenu === menuType, position: activePosition, fallbackPlacements: fallbackPlacements, backdrop: !disableBackdrop, onMenuClosed: () => {
+    return (jsxRuntime.jsx(uiReact.VertexMenu, { className: classNames({
+            hidden: !isOpen,
+        }), "data-testid": `${menuType}-context-menu`, open: isOpen, position: activePosition, fallbackPlacements: fallbackPlacements, backdrop: !disableBackdrop, onMenuClosed: () => {
             contextMenuActions.clearActiveContextMenu();
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }, children: jsxRuntime.jsx("div", { className: "pt-1", children: children }) }));
@@ -1723,66 +1688,63 @@ const VertexFlyToMenuItem = () => {
         }, disabled: currentItem == null, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "paper-airplane", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Fly To" })] }));
 };
 
-function useSceneItemsOperations({ viewerElement, }) {
+function useSceneItemsOperations() {
+    const viewer = recoil.useRecoilValue(viewerElement);
     const sceneItemsOperation = React.useCallback(async (f, ids) => {
-        const scene = await (viewerElement === null || viewerElement === void 0 ? void 0 : viewerElement.scene());
+        const scene = await (viewer === null || viewer === void 0 ? void 0 : viewer.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.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',
-    });
+    }, [viewer]);
     const showOnlySelected = React.useCallback(async () => {
-        const scene = await (viewerElement === null || viewerElement === void 0 ? void 0 : viewerElement.scene());
+        const scene = await (viewer === null || viewer === void 0 ? void 0 : viewer.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]);
+    }, [viewer]);
     const hideSelected = React.useCallback(async () => {
-        const scene = await (viewerElement === null || viewerElement === void 0 ? void 0 : viewerElement.scene());
+        const scene = await (viewer === null || viewer === void 0 ? void 0 : viewer.scene());
         scene === null || scene === void 0 ? void 0 : scene.items((op) => [op.where((q) => q.withSelected()).hide()]).execute();
-    }, [viewerElement]);
+    }, [viewer]);
     const showOnlyItem = React.useCallback(async (id) => {
-        const scene = await (viewerElement === null || viewerElement === void 0 ? void 0 : viewerElement.scene());
+        const scene = await (viewer === null || viewer === void 0 ? void 0 : viewer.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]);
+    }, [viewer]);
+    const ghostSelected = React.useCallback(async () => {
+        const scene = await (viewer === null || viewer === void 0 ? void 0 : viewer.scene());
+        scene === null || scene === void 0 ? void 0 : scene.items((op) => [op.where((q) => q.withSelected()).setPhantom(true)]).execute();
+    }, [viewer]);
+    const unGhostSelected = React.useCallback(async () => {
+        const scene = await (viewer === null || viewer === void 0 ? void 0 : viewer.scene());
+        scene === null || scene === void 0 ? void 0 : scene.items((op) => [op.where((q) => q.withSelected()).setPhantom(false)]).execute();
+    }, [viewer]);
     return {
         sceneItemsOperation,
         showOnlySelected,
         hideSelected,
         showOnlyItem,
+        ghostSelected,
+        unGhostSelected,
     };
 }
 
 const VertexHideAllMenuItem = () => {
-    const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
-    const sceneItemOperations = useSceneItemsOperations({
-        viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null,
-    });
+    const sceneItemOperations = useSceneItemsOperations();
     return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "hide-all-menu-option", onClick: () => {
             sceneItemOperations.sceneItemsOperation((builder) => builder.hide());
         }, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Hide All Parts" })] }));
 };
 
 const VertexHidePartMenuItem = () => {
-    const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
     const currentItem = recoil.useRecoilValue(contextMenuItem);
-    const sceneItemOperations = useSceneItemsOperations({
-        viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null,
-    });
+    const sceneItemOperations = useSceneItemsOperations();
     return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "hide-menu-option", onClick: () => {
             var _a;
             const isRow = contextMenuItemIsRow(currentItem);
@@ -1794,30 +1756,21 @@ const VertexHidePartMenuItem = () => {
 };
 
 const VertexHideSelectedMenuItem = () => {
-    const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
     const selectedItems = recoil.useRecoilValue(selectionSelectedItemIds);
-    const sceneItemOperations = useSceneItemsOperations({
-        viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null,
-    });
+    const sceneItemOperations = useSceneItemsOperations();
     return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "hide-selected-menu-option", onClick: () => sceneItemOperations.hideSelected(), disabled: selectedItems.length === 0, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-hidden", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Hide Selected" })] }));
 };
 
 const VertexShowAllMenuItem = () => {
-    const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
-    const sceneItemOperations = useSceneItemsOperations({
-        viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null,
-    });
+    const sceneItemOperations = useSceneItemsOperations();
     return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "show-all-menu-option", onClick: () => {
             sceneItemOperations.sceneItemsOperation((builder) => builder.show());
         }, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Show All Parts" })] }));
 };
 
 const VertexShowOnlyMenuItem = () => {
-    const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
     const currentItem = recoil.useRecoilValue(contextMenuItem);
-    const sceneItemOperations = useSceneItemsOperations({
-        viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null,
-    });
+    const sceneItemOperations = useSceneItemsOperations();
     return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "show-only-menu-option", onClick: () => {
             var _a;
             const isRow = contextMenuItemIsRow(currentItem);
@@ -1829,11 +1782,8 @@ const VertexShowOnlyMenuItem = () => {
 };
 
 const VertexShowOnlySelectedMenuItem = () => {
-    const viewerHTMLElement = recoil.useRecoilValue(viewerElement);
     const selectedItems = recoil.useRecoilValue(selectionSelectedItemIds);
-    const sceneItemOperations = useSceneItemsOperations({
-        viewerElement: viewerHTMLElement !== null && viewerHTMLElement !== void 0 ? viewerHTMLElement : null,
-    });
+    const sceneItemOperations = useSceneItemsOperations();
     return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "show-only-selected-menu-option", onClick: () => sceneItemOperations.showOnlySelected(), disabled: selectedItems.length === 0, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Show Only Selected" })] }));
 };
 
@@ -1914,8 +1864,20 @@ function useSceneTreeActions() {
     };
 }
 
+const VertexGhostSelectedMenuItem = () => {
+    const selectedItems = recoil.useRecoilValue(selectionSelectedItemIds);
+    const sceneItemOperations = useSceneItemsOperations();
+    return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "ghost-selected-menu-option", onClick: () => sceneItemOperations.ghostSelected(), disabled: selectedItems.length === 0, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-partial", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Ghost Selected" })] }));
+};
+
+const VertexUnghostSelectedMenuItem = () => {
+    const selectedItems = recoil.useRecoilValue(selectionSelectedItemIds);
+    const sceneItemOperations = useSceneItemsOperations();
+    return (jsxRuntime.jsxs(uiReact.VertexMenuItem, { "data-testid": "unghost-selected-menu-option", onClick: () => sceneItemOperations.unGhostSelected(), disabled: selectedItems.length === 0, children: [jsxRuntime.jsx(uiReact.VertexIcon, { slot: "icon", name: "visibility-visible", size: "sm" }), jsxRuntime.jsx("div", { className: "pl-2", children: "Unghost Selected" })] }));
+};
+
 const DefaultSceneTreeContextMenu = () => {
-    return (jsxRuntime.jsxs("div", { className: "w-56", children: [jsxRuntime.jsx(VertexHideSelectedMenuItem, {}), jsxRuntime.jsx(VertexHideAllMenuItem, {}), jsxRuntime.jsx(VertexShowOnlyMenuItem, {}), jsxRuntime.jsx(VertexShowOnlySelectedMenuItem, {}), jsxRuntime.jsx(VertexShowAllMenuItem, {}), jsxRuntime.jsx(uiReact.VertexMenuDivider, { className: "md:contents hidden short:hidden" }), jsxRuntime.jsx(VertexFitSelectedMenuItem, {}), jsxRuntime.jsx(VertexFlyToMenuItem, {})] }));
+    return (jsxRuntime.jsxs("div", { className: "w-56", children: [jsxRuntime.jsx(VertexHideSelectedMenuItem, {}), jsxRuntime.jsx(VertexHideAllMenuItem, {}), jsxRuntime.jsx(VertexShowOnlyMenuItem, {}), jsxRuntime.jsx(VertexShowOnlySelectedMenuItem, {}), jsxRuntime.jsx(VertexShowAllMenuItem, {}), jsxRuntime.jsx(VertexGhostSelectedMenuItem, {}), jsxRuntime.jsx(VertexUnghostSelectedMenuItem, {}), jsxRuntime.jsx(uiReact.VertexMenuDivider, {}), jsxRuntime.jsx(VertexFitSelectedMenuItem, {}), jsxRuntime.jsx(VertexFlyToMenuItem, {})] }));
 };
 
 const VertexSceneTreeContextMenu = ({ children, }) => {
@@ -1929,7 +1891,7 @@ const VertexSceneTreeContextMenu = ({ children, }) => {
 };
 
 const DefaultViewerContextMenu = () => {
-    return (jsxRuntime.jsxs("div", { className: "w-56", children: [jsxRuntime.jsx(VertexHidePartMenuItem, {}), jsxRuntime.jsx(VertexHideSelectedMenuItem, {}), jsxRuntime.jsx(VertexHideAllMenuItem, {}), jsxRuntime.jsx(VertexShowOnlyMenuItem, {}), jsxRuntime.jsx(VertexShowOnlySelectedMenuItem, {}), jsxRuntime.jsx(VertexShowAllMenuItem, {}), jsxRuntime.jsx(uiReact.VertexMenuDivider, { className: "md:contents hidden short:hidden" }), jsxRuntime.jsx(VertexFitSelectedMenuItem, {}), jsxRuntime.jsx(VertexFlyToMenuItem, {})] }));
+    return (jsxRuntime.jsxs("div", { className: "w-56", children: [jsxRuntime.jsx(VertexHidePartMenuItem, {}), jsxRuntime.jsx(VertexHideSelectedMenuItem, {}), jsxRuntime.jsx(VertexHideAllMenuItem, {}), jsxRuntime.jsx(VertexShowOnlyMenuItem, {}), jsxRuntime.jsx(VertexShowOnlySelectedMenuItem, {}), jsxRuntime.jsx(VertexShowAllMenuItem, {}), jsxRuntime.jsx(VertexGhostSelectedMenuItem, {}), jsxRuntime.jsx(VertexUnghostSelectedMenuItem, {}), jsxRuntime.jsx(uiReact.VertexMenuDivider, {}), jsxRuntime.jsx(VertexFitSelectedMenuItem, {}), jsxRuntime.jsx(VertexFlyToMenuItem, {})] }));
 };
 
 const VertexViewerContextMenu = ({ children }) => {
@@ -2003,6 +1965,11 @@ function VertexSceneTreeToolbar() {
     return (jsxRuntime.jsx(viewerReact.VertexSceneTreeToolbar, { className: "h-10 border-b border-neutral-300 box-border", children: jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 w-full text-neutral-700 items-center gap mx-2", children: [jsxRuntime.jsx(VertexSceneTreeExpandAll, {}), jsxRuntime.jsx(VertexSceneTreeCollapseAll, {})] }) }));
 }
 
+const VertexSceneTreeHeader = ({ children }) => {
+    const hasDefinedChildren = children != null && children !== false;
+    return (jsxRuntime.jsx("div", { slot: "header", className: "flex flex-col", children: hasDefinedChildren ? (children) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(viewerReact.VertexSceneTreeSearch, { className: "border-b border-neutral-300" }), jsxRuntime.jsx(VertexSceneTreeToolbar, {})] })) }));
+};
+
 const DEFAULT_NAME_COLUMN = {
     binding: '{{row.node.name}}',
     label: 'Name',
@@ -2082,7 +2049,7 @@ const VertexSceneTreeTableLayout = (sdkProps) => {
 };
 
 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"]);
+    var { id, font, backgroundColors, children, style, onPointerDown, onClick, onToggleSelection, onToggleExpansion, onToggleVisibility, className, rowData } = _a, sdkProps = tslib.__rest(_a, ["id", "font", "backgroundColors", "children", "style", "onPointerDown", "onClick", "onToggleSelection", "onToggleExpansion", "onToggleVisibility", "className", "rowData"]);
     const config = recoil.useRecoilValue(sdkConfig);
     const selectionActions = useSelectionActions();
     const sceneTreeActions = useSceneTreeActions();
@@ -2090,6 +2057,7 @@ const VertexSceneTree = (_a) => {
     const callbackRef = useRecoilRef({
         state: sceneTreeElement,
     });
+    const hasDefinedChildren = children != null && children !== false;
     const wrappedExpansionHandler = (event, node, tree) => {
         sceneTreeActions.toggleExpansion(event, node, tree);
         onToggleExpansion === null || onToggleExpansion === void 0 ? void 0 : onToggleExpansion(event, node, tree);
@@ -2114,13 +2082,13 @@ const VertexSceneTree = (_a) => {
         }
         onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
     };
-    return (jsxRuntime.jsx("div", { className: "flex flex-col w-full h-full", children: jsxRuntime.jsx("div", { className: "flex group h-full", children: jsxRuntime.jsxs(viewerReact.VertexSceneTree, Object.assign({ id: id !== null && id !== void 0 ? id : 'vertex-scene-tree', "data-testid": "vertex-scene-tree", config: config, ref: callbackRef, className: classNames('flex-1', className), style: Object.assign(Object.assign(Object.assign({}, styleFromOptionalFont(font)), styleFromOptionalBackgroundColors(backgroundColors)), style), onConnectionError: (e) => {
+    return (jsxRuntime.jsx("div", { className: classNames('flex flex-col w-full h-full', className), children: jsxRuntime.jsx("div", { className: "flex group h-full", children: jsxRuntime.jsx(viewerReact.VertexSceneTree, Object.assign({ id: id !== null && id !== void 0 ? id : 'vertex-scene-tree', "data-testid": "vertex-scene-tree", config: config, ref: callbackRef, className: "flex-1", style: Object.assign(Object.assign(Object.assign({}, styleFromOptionalFont(font)), styleFromOptionalBackgroundColors(backgroundColors)), style), onConnectionError: (e) => {
                     logger.error('Scene Tree Connection Error: ', e.detail);
                 }, viewer: viewer, onPointerDown: handlePointerDown, onClick: handleClick, rowData: (row) => {
                     var _a;
                     const providedRowData = (_a = rowData === null || rowData === void 0 ? void 0 : rowData(row)) !== null && _a !== void 0 ? _a : {};
                     return Object.assign({ handleExpansion: wrappedExpansionHandler, handleSelection: wrappedSelectionHandler, handleVisibility: wrappedVisibilityHandler }, providedRowData);
-                } }, sdkProps, { children: [jsxRuntime.jsx(VertexSceneTreeToolbar, {}), jsxRuntime.jsx(VertexSceneTreeTableLayout, {}), children] })) }) }));
+                } }, sdkProps, { children: hasDefinedChildren ? (children) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(VertexSceneTreeHeader, {}), jsxRuntime.jsx(VertexSceneTreeTableLayout, {}), jsxRuntime.jsx(VertexSceneTreeContextMenu, {})] })) })) }) }));
 };
 
 const useSynchronizedProp = (state, value) => {
@@ -2131,7 +2099,7 @@ const useSynchronizedProp = (state, value) => {
 };
 
 const VertexPopupButton = (_a) => {
-    var { open, children } = _a, uiProps = __rest(_a, ["open", "children"]);
+    var { open, children } = _a, uiProps = tslib.__rest(_a, ["open", "children"]);
     const anchor = children.find((c) => c.type === Anchor);
     const others = children.filter((c) => c.type !== Anchor);
     if (anchor == null) {
@@ -2147,7 +2115,7 @@ const Anchor = ({ tooltipContent, children }) => {
 VertexPopupButton.Anchor = Anchor;
 
 const VertexSlider = (_a) => {
-    var { value, defaultValue, onChange, onValueChange, onValueInput } = _a, uiProps = __rest(_a, ["value", "defaultValue", "onChange", "onValueChange", "onValueInput"]);
+    var { value, defaultValue, onChange, onValueChange, onValueInput } = _a, uiProps = tslib.__rest(_a, ["value", "defaultValue", "onChange", "onValueChange", "onValueInput"]);
     const [displayedValue, setDisplayedValue] = React.useState(defaultValue);
     return (jsxRuntime.jsx(uiReact.VertexSlider, Object.assign({ className: "w-52 mx-2 items-center", value: value !== null && value !== void 0 ? value : displayedValue, onValueChange: (e) => {
             setDisplayedValue(e.detail.value);
@@ -2488,7 +2456,7 @@ const BoxSelectionTool = () => {
 };
 
 const VertexViewerViewCube = (_a) => {
-    var { placement, children } = _a, sdkProps = __rest(_a, ["placement", "children"]);
+    var { placement, children } = _a, sdkProps = tslib.__rest(_a, ["placement", "children"]);
     const childrenAsArray = Array.isArray(children)
         ? children
         : [children];
@@ -2500,7 +2468,7 @@ const VertexViewerViewCube = (_a) => {
 };
 
 const VertexViewer = (_a) => {
-    var { id, disableSelection, onTap, onLongpress, onFrameDrawn, viewerRefCallback, children } = _a, sdkProps = __rest(_a, ["id", "disableSelection", "onTap", "onLongpress", "onFrameDrawn", "viewerRefCallback", "children"]);
+    var { id, className, disableSelection, onTap, onLongpress, onFrameDrawn, viewerRefCallback, children } = _a, sdkProps = tslib.__rest(_a, ["id", "className", "disableSelection", "onTap", "onLongpress", "onFrameDrawn", "viewerRefCallback", "children"]);
     const config = recoil.useRecoilValue(sdkConfig);
     const callbackRef = useRecoilRef({
         state: viewerElement,
@@ -2513,7 +2481,8 @@ const VertexViewer = (_a) => {
     const selectionActions = useSelectionActions();
     const hasDefinedChildren = children != null && children !== false;
     useKeyBindings();
-    return (jsxRuntime.jsxs(viewerReact.VertexViewer, 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', {
+    useDefaultKeybindings();
+    return (jsxRuntime.jsxs(viewerReact.VertexViewer, 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', className, {
             'cursor-crosshair': currentCrossSectionAlignment.hitPending,
         }), config: config, onTap: (e) => {
             const actions = [
@@ -2531,7 +2500,7 @@ const VertexViewer = (_a) => {
             if (!sceneReady) {
                 setSceneReady(true);
             }
-        }, children: [isBoxSelectionEnabled && jsxRuntime.jsx(BoxSelectionTool, {}), hasDefinedChildren ? (children) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(VertexViewerViewCube, {}), jsxRuntime.jsx(VertexToolbar, {})] }))] })));
+        }, children: [isBoxSelectionEnabled && jsxRuntime.jsx(BoxSelectionTool, {}), hasDefinedChildren ? (children) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(VertexViewerViewCube, {}), jsxRuntime.jsx(VertexToolbar, {}), jsxRuntime.jsx(VertexViewerContextMenu, {})] }))] })));
 };
 
 function toSdkConfig(config) {
@@ -2561,9 +2530,10 @@ const VertexViewerToolkitEventListener = ({ onHitStateChange, onSelectionStateCh
 };
 
 const VertexViewerToolkitRoot = (_a) => {
-    var { override, children, config } = _a, eventWrapperProps = __rest(_a, ["override", "children", "config"]);
+    var { override, children, config } = _a, eventWrapperProps = tslib.__rest(_a, ["override", "children", "config"]);
     React.useEffect(() => {
         loader.defineCustomElements();
+        loader$1.defineCustomElements();
     }, []);
     return (jsxRuntime.jsx(recoil.RecoilRoot, { override: override, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(VertexViewerToolkitEventListener, Object.assign({}, eventWrapperProps)), jsxRuntime.jsx(VertexViewerToolkitRootConfig, { config: config, children: children })] }) }));
 };
@@ -2597,6 +2567,7 @@ exports.VertexResizableContent = VertexResizableContent;
 exports.VertexRotateButton = VertexRotateButton;
 exports.VertexSceneTree = VertexSceneTree;
 exports.VertexSceneTreeContextMenu = VertexSceneTreeContextMenu;
+exports.VertexSceneTreeHeader = VertexSceneTreeHeader;
 exports.VertexSceneTreeTableLayout = VertexSceneTreeTableLayout;
 exports.VertexShowAllMenuItem = VertexShowAllMenuItem;
 exports.VertexShowOnlyMenuItem = VertexShowOnlyMenuItem;