@vuu-ui/vuu-data-react 0.8.14-debug → 0.8.15-debug

package/cjs/index.js

@@ -19697,7 +19697,7 @@ var MovingWindow = class {
 var import_vuu_data6 = require("@vuu-ui/vuu-data");
 
 // ../vuu-shell/src/app-header/AppHeader.tsx
-var import_react226 = require("react");
+var import_react227 = require("react");
 var import_classnames70 = __toESM(require_classnames());
 
 // ../vuu-layout/src/dock-layout/DockLayout.tsx
@@ -22526,7 +22526,8 @@ var Tooltip = ({
   onMouseEnter,
   onMouseLeave,
   placement,
-  status
+  status,
+  style: styleProp
 }) => {
   const position = useAnchoredPosition2({ anchorElement, placement });
   if (position === void 0) {
@@ -22540,7 +22541,7 @@ var Tooltip = ({
       }),
       "data-align": placement,
       id,
-      style: position,
+      style: { ...styleProp, ...position },
       children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "span",
         {
@@ -24394,7 +24395,7 @@ var useCollectionItems = ({
   // revealSelected = false,
   source
 }) => {
-  var _a4;
+  var _a4, _b;
   const { getItemId } = options;
   const [, forceUpdate] = (0, import_react79.useState)(null);
   const inheritedCollectionHook = useCollection();
@@ -24402,6 +24403,7 @@ var useCollectionItems = ({
   const flattenedDataRef = (0, import_react79.useRef)([]);
   const EMPTY_COLLECTION = (0, import_react79.useMemo)(() => [], []);
   const filterPattern = (0, import_react79.useRef)((_a4 = options.filterPattern) != null ? _a4 : "");
+  const disableFilter = (_b = options.disableFilter) != null ? _b : false;
   const {
     getFilterRegex = getDefaultFilterRegex,
     noChildrenLabel,
@@ -24413,14 +24415,14 @@ var useCollectionItems = ({
   const addMetadataToItems = (0, import_react79.useCallback)(
     (items, indexer, level = 1, path = "", results = [], flattenedCollection2 = [], flattenedSource2 = []) => {
       items.forEach((item, i, all) => {
-        var _a5, _b;
+        var _a5, _b2;
         const isCollapsibleHeader = item.header && options.collapsibleHeaders;
         const isNonCollapsibleGroupNode = item.childNodes && options.collapsibleHeaders === false;
         const isLeaf3 = !item.childNodes || item.childNodes.length === 0;
         const nonCollapsible = isNonCollapsibleGroupNode || isLeaf3 && !isCollapsibleHeader;
         const childPath = path ? `${path}.${i}` : `item-${i}`;
         const id = (_a5 = item.id) != null ? _a5 : getItemId ? getItemId(i) : `${idRoot}-${childPath}`;
-        const expanded = nonCollapsible ? void 0 : (_b = item.expanded) != null ? _b : isExpanded2();
+        const expanded = nonCollapsible ? void 0 : (_b2 = item.expanded) != null ? _b2 : isExpanded2();
         const normalisedItem = {
           ...item,
           childNodes: void 0,
@@ -24455,12 +24457,12 @@ var useCollectionItems = ({
     [options.collapsibleHeaders, getItemId, idRoot, isExpanded2]
   );
   const getFilter = (0, import_react79.useCallback)(() => {
-    if (filterPattern.current) {
+    if (filterPattern.current && !disableFilter) {
       return getDefaultFilter(filterPattern.current, getFilterRegex);
     } else {
       return null;
     }
-  }, [getFilterRegex]);
+  }, [disableFilter, getFilterRegex]);
   const collectVisibleItems = (0, import_react79.useCallback)(
     (items, filter = getFilter(), results = [], idx = { value: 0 }) => {
       let skipToNextHeader = false;
@@ -25685,7 +25687,7 @@ var useSelection = ({
   onSelectionChange,
   selected: selectedProp,
   selectionStrategy,
-  selectionKeys = defaultSelectionKeys,
+  selectionKeys: selectionKeys2 = defaultSelectionKeys,
   tabToSelect
 }) => {
   const isDeselectable = selectionStrategy === "deselectable";
@@ -25693,8 +25695,8 @@ var useSelection = ({
   const isExtendedSelect = selectionStrategy === "extended";
   const lastActive = (0, import_react89.useRef)(-1);
   const isSelectionEvent = (0, import_react89.useCallback)(
-    (evt) => selectionKeys.includes(evt.key),
-    [selectionKeys]
+    (evt) => selectionKeys2.includes(evt.key),
+    [selectionKeys2]
   );
   const [selected, setSelected] = useControlled2({
     controlled: selectedProp,
@@ -27891,7 +27893,7 @@ var useList = ({
   scrollContainerRef,
   selected,
   selectionStrategy,
-  selectionKeys,
+  selectionKeys: selectionKeys2,
   stickyHeaders,
   tabToSelect,
   viewportRange
@@ -27989,7 +27991,7 @@ var useList = ({
     onSelectionChange: handleSelectionChange,
     selected,
     selectionStrategy,
-    selectionKeys,
+    selectionKeys: selectionKeys2,
     tabToSelect
   });
   const { handleDrop, onDropSettle } = useListDrop({
@@ -28314,7 +28316,7 @@ var List = (0, import_react107.forwardRef)(function List2({
   checkable = selectionStrategy === "multiple",
   scrollingApiRef,
   // TODO do we still need these ?
-  selectionKeys,
+  selectionKeys: selectionKeys2,
   showEmptyMessage = false,
   source,
   style: styleProp,
@@ -28405,7 +28407,7 @@ var List = (0, import_react107.forwardRef)(function List2({
     scrollContainerRef,
     selected: collectionHook.itemToCollectionItemId(selectedProp),
     selectionStrategy,
-    selectionKeys,
+    selectionKeys: selectionKeys2,
     stickyHeaders,
     tabToSelect,
     viewportRange
@@ -28692,7 +28694,7 @@ var VirtualizedList = (0, import_react110.forwardRef)(function List3({
   selectionStrategy,
   scrollingApiRef,
   // TODO do we still need these ?
-  selectionKeys,
+  selectionKeys: selectionKeys2,
   showEmptyMessage = false,
   source,
   style: styleProp,
@@ -28750,7 +28752,7 @@ var VirtualizedList = (0, import_react110.forwardRef)(function List3({
     restoreLastFocus,
     selected: collectionHook.itemToCollectionItemId(selectedProp),
     selectionStrategy,
-    selectionKeys,
+    selectionKeys: selectionKeys2,
     stickyHeaders,
     tabToSelect
   });
@@ -28979,7 +28981,7 @@ var Dropdown2 = (0, import_react112.forwardRef)(function Dropdown3({
   source,
   triggerComponent,
   ListItem: ListItem4,
-  ListProps: ListProps5,
+  ListProps: ListProps6,
   width = 180,
   ...props
 }, forwardedRef) {
@@ -29004,14 +29006,14 @@ var Dropdown2 = (0, import_react112.forwardRef)(function Dropdown3({
     ...dropdownListHook
   } = useDropdown({
     collectionHook,
-    defaultHighlightedIndex: ListProps5 == null ? void 0 : ListProps5.defaultHighlightedIndex,
+    defaultHighlightedIndex: ListProps6 == null ? void 0 : ListProps6.defaultHighlightedIndex,
     defaultIsOpen,
     defaultSelected: collectionHook.itemToCollectionItemId(defaultSelected),
-    highlightedIndex: ListProps5 == null ? void 0 : ListProps5.highlightedIndex,
+    highlightedIndex: ListProps6 == null ? void 0 : ListProps6.highlightedIndex,
     isOpen: isOpenProp,
     itemToString: itemToString2,
     listRef,
-    onHighlight: ListProps5 == null ? void 0 : ListProps5.onHighlight,
+    onHighlight: ListProps6 == null ? void 0 : ListProps6.onHighlight,
     onOpenChange,
     onSelectionChange,
     onSelect,
@@ -29061,7 +29063,7 @@ var Dropdown2 = (0, import_react112.forwardRef)(function Dropdown3({
       id,
       isOpen: dropdownListHook.isOpen,
       onOpenChange: dropdownListHook.onOpenChange,
-      placement: (ListProps5 == null ? void 0 : ListProps5.width) === void 0 ? "below-full-width" : "below",
+      placement: (ListProps6 == null ? void 0 : ListProps6.width) === void 0 ? "below-full-width" : "below",
       ref: forkedRef,
       width,
       children: [
@@ -29071,7 +29073,7 @@ var Dropdown2 = (0, import_react112.forwardRef)(function Dropdown3({
           {
             ListItem: ListItem4,
             itemToString: itemToString2,
-            ...ListProps5,
+            ...ListProps6,
             highlightedIndex,
             listHandlers,
             onSelectionChange,
@@ -29090,6 +29092,7 @@ var Dropdown2 = (0, import_react112.forwardRef)(function Dropdown3({
 var import_react113 = require("react");
 var EnterOnly = ["Enter"];
 var useCombobox = ({
+  allowBackspaceClearsSelection,
   allowFreeText,
   ariaLabel,
   collectionHook,
@@ -29099,6 +29102,7 @@ var useCombobox = ({
   onBlur,
   onFocus,
   onChange,
+  onDeselect,
   onSelect,
   id,
   initialHighlightedIndex = -1,
@@ -29111,6 +29115,7 @@ var useCombobox = ({
   onSelectionChange,
   onSetSelectedText,
   selected: selectedProp,
+  selectionKeys: selectionKeys2 = EnterOnly,
   selectionStrategy,
   value: valueProp,
   InputProps: inputProps = {
@@ -29121,7 +29126,7 @@ var useCombobox = ({
   }
 }) => {
   const isMultiSelect = isMultiSelection(selectionStrategy);
-  const { setFilterPattern } = collectionHook;
+  const { data, setFilterPattern } = collectionHook;
   const setHighlightedIndexRef = (0, import_react113.useRef)(null);
   const selectedRef = (0, import_react113.useRef)(isMultiSelect ? [] : null);
   const ignoreSelectOnFocus = (0, import_react113.useRef)(true);
@@ -29140,7 +29145,6 @@ var useCombobox = ({
   const highlightSelectedItem = (0, import_react113.useCallback)((selected2) => {
     var _a4;
     if (Array.isArray(selected2)) {
-      console.log("TODO multi selection");
     } else if (selected2 == null) {
       (_a4 = setHighlightedIndexRef.current) == null ? void 0 : _a4.call(setHighlightedIndexRef, -1);
     }
@@ -29238,7 +29242,7 @@ var useCombobox = ({
         setTextValue("", false);
       }
       setIsOpen(open);
-      onOpenChange == null ? void 0 : onOpenChange(open);
+      onOpenChange == null ? void 0 : onOpenChange(open, closeReason);
       if (!open && closeReason !== "Escape") {
         if (!selectFreeTextInputValue()) {
           applySelection();
@@ -29281,11 +29285,11 @@ var useCombobox = ({
     disableAriaActiveDescendant,
     disableHighlightOnFocus: true,
     disableTypeToSelect: true,
+    label: "combobox",
     onKeyboardNavigation: handleKeyboardNavigation,
-    // onKeyDown: handleInputKeyDown,
     onSelectionChange: handleSelectionChange,
     selected: collectionHook.itemToCollectionItemId(selectedProp),
-    selectionKeys: EnterOnly,
+    selectionKeys: selectionKeys2,
     selectionStrategy,
     tabToSelect: !isMultiSelect
   });
@@ -29312,6 +29316,15 @@ var useCombobox = ({
     },
     [setFilterPattern, setIsOpen, setValue]
   );
+  const handleInputKeyDown = (0, import_react113.useCallback)(
+    (e) => {
+      if (e.key === "Backspace" && allowBackspaceClearsSelection) {
+        selectedRef.current = null;
+        onDeselect == null ? void 0 : onDeselect();
+      }
+    },
+    [allowBackspaceClearsSelection, onDeselect]
+  );
   const { onFocus: inputOnFocus = onFocus } = inputProps;
   const { onFocus: listOnFocus } = listControlProps;
   const handleInputFocus = (0, import_react113.useCallback)(
@@ -29373,7 +29386,8 @@ var useCombobox = ({
     ...inputProps.inputProps,
     // "aria-owns": listId,
     "aria-label": ariaLabel,
-    autoComplete: "off"
+    autoComplete: "off",
+    onKeyDown: handleInputKeyDown
   };
   return {
     focusVisible,
@@ -29416,16 +29430,18 @@ var ChevronIcon = (props) => {
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var ComboBox = (0, import_react114.forwardRef)(function Combobox({
   InputProps: InputProps4,
-  ListProps: ListProps5,
+  ListProps: ListProps6,
   PopupProps,
   ListItem: ListItem4,
   "aria-label": ariaLabel,
+  allowBackspaceClearsSelection,
   allowFreeText,
   children,
   defaultIsOpen,
   defaultSelected,
   defaultValue,
   disabled,
+  disableFilter,
   onBlur,
   onFocus,
   onChange,
@@ -29437,9 +29453,11 @@ var ComboBox = (0, import_react114.forwardRef)(function Combobox({
   isOpen: isOpenProp,
   itemToString: itemToString2 = itemToString,
   itemsToString,
+  onDeselect,
   onOpenChange: onOpenChangeProp,
   onSelectionChange,
   selected: selectedProp,
+  selectionKeys: selectionKeys2,
   selectionStrategy,
   source,
   value: valueProp,
@@ -29461,6 +29479,7 @@ var ComboBox = (0, import_react114.forwardRef)(function Combobox({
     source,
     children,
     options: {
+      disableFilter,
       filterPattern: initialValue,
       getFilterRegex,
       itemToString: itemToString2
@@ -29477,6 +29496,7 @@ var ComboBox = (0, import_react114.forwardRef)(function Combobox({
     selected
   } = useCombobox({
     InputProps: InputProps4,
+    allowBackspaceClearsSelection,
     allowFreeText,
     ariaLabel,
     collectionHook,
@@ -29489,6 +29509,7 @@ var ComboBox = (0, import_react114.forwardRef)(function Combobox({
     label: props.title,
     listRef,
     onBlur,
+    onDeselect,
     onFocus,
     onChange,
     onSelect,
@@ -29500,6 +29521,7 @@ var ComboBox = (0, import_react114.forwardRef)(function Combobox({
     onSelectionChange,
     onSetSelectedText,
     selected: selectedProp,
+    selectionKeys: selectionKeys2,
     selectionStrategy,
     value: initialValue
   });
@@ -29541,13 +29563,12 @@ var ComboBox = (0, import_react114.forwardRef)(function Combobox({
         /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
           List,
           {
-            ...ListProps5,
+            ...ListProps6,
             ListItem: ListItem4,
             defaultSelected: void 0,
             focusVisible,
             highlightedIndex,
             itemTextHighlightPattern: String(inputProps.value) || void 0,
-            id: `${id}-list`,
             listHandlers,
             onSelectionChange,
             ref: listRef,
@@ -51229,26 +51250,6 @@ var buildContextMenuDescriptors = (dataSource) => (location, options) => {
       label: `DataGrid Settings`,
       options
     });
-  } else if (location === "filter") {
-    const { column, filter } = options;
-    const colIsOnlyFilter = (filter == null ? void 0 : filter.column) === (column == null ? void 0 : column.name);
-    descriptors.push({
-      label: "Edit filter",
-      action: "filter-edit",
-      options
-    });
-    descriptors.push({
-      label: "Remove filter",
-      action: "filter-remove-column",
-      options
-    });
-    if (column && !colIsOnlyFilter) {
-      descriptors.push({
-        label: `Remove all filters`,
-        action: "remove-filters",
-        options
-      });
-    }
   }
   return descriptors;
 };
@@ -52158,7 +52159,7 @@ var NO_SELECTION = [];
 var defaultSelectionKeys2 = ["Enter", " "];
 var useSelection2 = ({
   highlightedIndexRef,
-  selectionKeys = defaultSelectionKeys2,
+  selectionKeys: selectionKeys2 = defaultSelectionKeys2,
   selectionModel,
   onSelect,
   onSelectionChange
@@ -52167,8 +52168,8 @@ var useSelection2 = ({
   const lastActiveRef = (0, import_react150.useRef)(-1);
   const selectedRef = (0, import_react150.useRef)(NO_SELECTION);
   const isSelectionEvent = (0, import_react150.useCallback)(
-    (evt) => selectionKeys.includes(evt.key),
-    [selectionKeys]
+    (evt) => selectionKeys2.includes(evt.key),
+    [selectionKeys2]
   );
   const handleRowClick = (0, import_react150.useCallback)(
     (row, rangeSelect, keepExistingSelection) => {
@@ -55511,15 +55512,15 @@ var useSelection4 = ({
   onChange,
   selected: selectedProp,
   selection = SINGLE,
-  selectionKeys = defaultSelectionKeys4
+  selectionKeys: selectionKeys2 = defaultSelectionKeys4
 }) => {
   const singleSelect = selection === SINGLE;
   const multiSelect = selection === MULTI || selection.startsWith(CHECKBOX);
   const extendedSelect = selection === EXTENDED;
   const lastActive = (0, import_react178.useRef)(-1);
   const isSelectionEvent = (0, import_react178.useCallback)(
-    (evt) => selectionKeys.includes(evt.key),
-    [selectionKeys]
+    (evt) => selectionKeys2.includes(evt.key),
+    [selectionKeys2]
   );
   const [selected, setSelected] = useControlled({
     controlled: selectedProp,
@@ -56754,7 +56755,7 @@ var View = (0, import_react192.forwardRef)(function View2(props, forwardedRef) {
     title: titleProp,
     ...restProps
   } = props;
-  const id = useIdMemo(idProp);
+  const id = useId2(idProp);
   const rootRef = (0, import_react192.useRef)(null);
   const mainRef = (0, import_react192.useRef)(null);
   const [componentProps, _setComponentProps] = (0, import_react192.useState)();
@@ -57007,7 +57008,7 @@ var defaultApplicationJson = {
 
 // ../vuu-filters/src/filter-bar/FilterBar.tsx
 var import_classnames61 = __toESM(require_classnames(), 1);
-var import_react204 = require("react");
+var import_react205 = require("react");
 
 // ../vuu-filters/src/filter-builder-menu/FilterBuilderMenu.tsx
 var import_react194 = require("react");
@@ -57031,7 +57032,6 @@ var ExpandoCombobox = (0, import_react195.forwardRef)(function ExpandoCombobox2(
   value = "",
   ...props
 }, forwardedRef) {
-  var _a4;
   const [text, setText] = (0, import_react195.useState)(value);
   const { itemToString: itemToString2 = import_vuu_utils73.itemToString } = props;
   const initialValue = (0, import_react195.useRef)(value);
@@ -57049,7 +57049,6 @@ var ExpandoCombobox = (0, import_react195.forwardRef)(function ExpandoCombobox2(
   const handleInputChange = (0, import_react195.useCallback)(
     (evt) => {
       const { value: value2 } = evt.target;
-      console.log(`onInputChange ${value2}`);
       setText(value2);
       onInputChange == null ? void 0 : onInputChange(evt);
     },
@@ -57058,7 +57057,7 @@ var ExpandoCombobox = (0, import_react195.forwardRef)(function ExpandoCombobox2(
   const handleSetSelectedText = (0, import_react195.useCallback)((text2) => {
     setText(text2);
   }, []);
-  const [InputProps4, ListProps5] = (0, import_react195.useMemo)(() => {
+  const [InputProps4, ListProps6] = (0, import_react195.useMemo)(() => {
     const { inputProps, ...restInputProps } = InputPropsProp;
     return [
       {
@@ -57105,7 +57104,7 @@ var ExpandoCombobox = (0, import_react195.forwardRef)(function ExpandoCombobox2(
   const popupProps = {
     minWidth: "fit-content"
   };
-  return ((_a4 = props.source) == null ? void 0 : _a4.length) === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
     "div",
     {
       className: (0, import_classnames57.default)(classBase46, classNameProp),
@@ -57119,7 +57118,7 @@ var ExpandoCombobox = (0, import_react195.forwardRef)(function ExpandoCombobox2(
           PopupProps: popupProps,
           defaultValue: initialValue.current,
           fullWidth: true,
-          ListProps: ListProps5,
+          ListProps: ListProps6,
           InputProps: InputProps4,
           itemsToString,
           onSelectionChange: handleSelectionChange,
@@ -57190,10 +57189,14 @@ var import_vuu_utils75 = require("@vuu-ui/vuu-utils");
 // ../vuu-filters/src/filter-clause/TextInput.tsx
 var import_react197 = require("react");
 var import_jsx_runtime112 = require("react/jsx-runtime");
+var selectionKeys = ["Enter", " "];
+var NO_DATA_MATCH = ["No matching data"];
 var TextInput = (0, import_react197.forwardRef)(function TextInput2({
   InputProps: InputPropsProp = {},
   className,
   column,
+  "data-field": dataField,
+  onDeselect,
   onInputComplete,
   operator: operator2,
   suggestionProvider = useTypeaheadSuggestions,
@@ -57223,7 +57226,11 @@ var TextInput = (0, import_react197.forwardRef)(function TextInput2({
     if (table) {
       const params = valueInputValue ? [table, column.name, valueInputValue] : [table, column.name];
       getSuggestions(params).then((suggestions) => {
-        setTypeaheadValues(suggestions);
+        if (suggestions.length === 0 && valueInputValue) {
+          setTypeaheadValues(NO_DATA_MATCH);
+        } else {
+          setTypeaheadValues(suggestions);
+        }
       }).catch((err) => {
         console.error("Error getting suggestions", err);
       });
@@ -57257,6 +57264,9 @@ var TextInput = (0, import_react197.forwardRef)(function TextInput2({
     }
   }, [InputPropsProp, onInputComplete, operator2, valueInputValue]);
   const getValueInputField = (0, import_react197.useCallback)(() => {
+    if (typeaheadValues.length === 0) {
+      return null;
+    }
     switch (operator2) {
       case "in":
         return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
@@ -57264,16 +57274,18 @@ var TextInput = (0, import_react197.forwardRef)(function TextInput2({
           {
             InputProps: InputProps4,
             className,
+            "data-field": dataField,
             initialHighlightedIndex: 0,
             source: typeaheadValues,
             onInputChange: handleInputChange,
             onSelectionChange: handleMultiValueSelectionChange,
             ref: forwardedRef,
             selectionStrategy: "multiple",
+            selectionKeys,
             value
           }
         );
-      case "starts":
+      case "starts": {
         return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
           ExpandoCombobox,
           {
@@ -57284,7 +57296,9 @@ var TextInput = (0, import_react197.forwardRef)(function TextInput2({
             },
             allowFreeText: true,
             className,
+            "data-field": dataField,
             initialHighlightedIndex: 0,
+            disableFilter: typeaheadValues === NO_DATA_MATCH && (valueInputValue == null ? void 0 : valueInputValue.length) > 0,
             source: typeaheadValues,
             onInputChange: handleInputChange,
             onSelectionChange: handleSingleValueSelectionChange,
@@ -57292,12 +57306,14 @@ var TextInput = (0, import_react197.forwardRef)(function TextInput2({
             value
           }
         );
+      }
       case "ends":
         return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
           ExpandoInput,
           {
             ...InputProps4,
             className,
+            "data-field": dataField,
             value: valueInputValue,
             ref: forwardedRef,
             onChange: handleInputChange
@@ -57308,11 +57324,14 @@ var TextInput = (0, import_react197.forwardRef)(function TextInput2({
           ExpandoCombobox,
           {
             InputProps: InputProps4,
+            allowBackspaceClearsSelection: true,
             className,
+            "data-field": dataField,
             initialHighlightedIndex: 0,
             source: typeaheadValues,
             title: "value",
             onInputChange: handleInputChange,
+            onDeselect,
             onSelectionChange: handleSingleValueSelectionChange,
             ref: forwardedRef,
             value
@@ -57323,13 +57342,15 @@ var TextInput = (0, import_react197.forwardRef)(function TextInput2({
     operator2,
     InputProps4,
     className,
+    dataField,
     typeaheadValues,
     handleInputChange,
     handleMultiValueSelectionChange,
     forwardedRef,
     value,
-    handleSingleValueSelectionChange,
-    valueInputValue
+    valueInputValue,
+    onDeselect,
+    handleSingleValueSelectionChange
   ]);
   return getValueInputField();
 });
@@ -57343,7 +57364,7 @@ var import_react198 = require("react");
 var import_jsx_runtime113 = require("react/jsx-runtime");
 
 // ../vuu-filters/src/filter-pill/FilterPill.tsx
-var import_vuu_utils78 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils79 = require("@vuu-ui/vuu-utils");
 var import_classnames60 = __toESM(require_classnames(), 1);
 var import_react201 = require("react");
 
@@ -57355,24 +57376,34 @@ var import_jsx_runtime114 = require("react/jsx-runtime");
 // ../vuu-filters/src/filter-utils.ts
 var import_vuu_utils77 = require("@vuu-ui/vuu-utils");
 
-// ../vuu-filters/src/filter-pill/FilterPill.tsx
+// ../vuu-filters/src/filter-pill/filterAsReactNode.tsx
+var import_vuu_utils78 = require("@vuu-ui/vuu-utils");
 var import_jsx_runtime115 = require("react/jsx-runtime");
 
+// ../vuu-filters/src/filter-pill/FilterPill.tsx
+var import_jsx_runtime116 = require("react/jsx-runtime");
+
 // ../vuu-filters/src/filter-bar/useFilterBar.ts
-var import_vuu_utils79 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils80 = require("@vuu-ui/vuu-utils");
 var import_react203 = require("react");
 
 // ../vuu-filters/src/filter-bar/useFilters.ts
 var import_react202 = require("react");
 
+// ../vuu-filters/src/filter-bar/useFilterBarMenu.ts
+var import_react204 = require("react");
+
+// ../vuu-filters/src/filter-bar/FilterBarMenu.tsx
+var import_jsx_runtime117 = require("react/jsx-runtime");
+
 // ../vuu-filters/src/filter-bar/FilterBar.tsx
-var import_jsx_runtime116 = require("react/jsx-runtime");
-var import_react205 = require("react");
+var import_jsx_runtime118 = require("react/jsx-runtime");
+var import_react206 = require("react");
 
 // ../vuu-filters/src/filter-input/useCodeMirrorEditor.ts
 var import_vuu_filter_parser2 = require("@vuu-ui/vuu-filter-parser");
 var import_classnames62 = __toESM(require_classnames(), 1);
-var import_react207 = require("react");
+var import_react208 = require("react");
 
 // ../vuu-filters/src/filter-input/FilterLanguage.ts
 var import_vuu_filter_parser = require("@vuu-ui/vuu-filter-parser");
@@ -57472,16 +57503,16 @@ var vuuTheme2 = EditorView.theme(
 );
 
 // ../vuu-filters/src/filter-input/useFilterAutoComplete.ts
-var import_react206 = require("react");
+var import_react207 = require("react");
 
 // ../vuu-filters/src/filter-input/FilterInput.tsx
-var import_jsx_runtime117 = require("react/jsx-runtime");
+var import_jsx_runtime119 = require("react/jsx-runtime");
 
 // ../vuu-filters/src/filter-input/useFilterSuggestionProvider.ts
-var import_react208 = require("react");
+var import_react209 = require("react");
 
 // ../vuu-filters/src/filter-input/filterInfo.ts
-var import_vuu_utils80 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils81 = require("@vuu-ui/vuu-utils");
 
 // ../vuu-filters/src/local-config.ts
 var getLocalEntity = (url) => {
@@ -57498,7 +57529,7 @@ var saveLocalEntity = (url, data) => {
 };
 
 // ../vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts
-var import_vuu_utils81 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils82 = require("@vuu-ui/vuu-utils");
 var metadataSaveLocation = "layouts/metadata";
 var layoutsSaveLocation = "layouts/layouts";
 var _urlKey;
@@ -57513,11 +57544,11 @@ var LocalLayoutPersistenceManager = class {
     return new Promise((resolve) => {
       Promise.all([this.loadLayouts(), this.loadMetadata()]).then(
         ([existingLayouts, existingMetadata]) => {
-          const id = (0, import_vuu_utils81.getUniqueId)();
+          const id = (0, import_vuu_utils82.getUniqueId)();
           const newMetadata = {
             ...metadata,
             id,
-            created: (0, import_vuu_utils81.formatDate)(/* @__PURE__ */ new Date(), "dd.mm.yyyy")
+            created: (0, import_vuu_utils82.formatDate)("dd.mm.yyyy")(/* @__PURE__ */ new Date())
           };
           this.saveLayoutsWithMetadata(
             [...existingLayouts, { id, json: layout }],
@@ -57646,18 +57677,18 @@ var LocalLayoutPersistenceManager = class {
 _urlKey = new WeakMap();
 
 // ../vuu-layout/src/layout-persistence/useLayoutContextMenuItems.tsx
-var import_react209 = require("react");
-var import_jsx_runtime118 = require("react/jsx-runtime");
+var import_react210 = require("react");
+var import_jsx_runtime120 = require("react/jsx-runtime");
 
 // ../vuu-layout/src/measured-container/MeasuredContainer.tsx
-var import_react212 = require("react");
+var import_react213 = require("react");
 
 // ../vuu-layout/src/measured-container/useMeasuredContainer.ts
-var import_vuu_utils82 = require("@vuu-ui/vuu-utils");
-var import_react211 = require("react");
+var import_vuu_utils83 = require("@vuu-ui/vuu-utils");
+var import_react212 = require("react");
 
 // ../vuu-layout/src/measured-container/useResizeObserver.ts
-var import_react210 = require("react");
+var import_react211 = require("react");
 var observedMap3 = /* @__PURE__ */ new Map();
 var getTargetSize3 = (element, size, dimension3) => {
   switch (dimension3) {
@@ -57708,8 +57739,8 @@ var resizeObserver3 = new ResizeObserver((entries) => {
   }
 });
 function useResizeObserver3(ref, dimensions2, onResize, reportInitialSize = false) {
-  const dimensionsRef = (0, import_react210.useRef)(dimensions2);
-  const measure = (0, import_react210.useCallback)((target) => {
+  const dimensionsRef = (0, import_react211.useRef)(dimensions2);
+  const measure = (0, import_react211.useCallback)((target) => {
     const { width, height } = target.getBoundingClientRect();
     const { clientWidth: contentWidth, clientHeight: contentHeight } = target;
     const flooredHeight = Math.floor(height);
@@ -57731,7 +57762,7 @@ function useResizeObserver3(ref, dimensions2, onResize, reportInitialSize = fals
       {}
     );
   }, []);
-  (0, import_react210.useEffect)(() => {
+  (0, import_react211.useEffect)(() => {
     const target = ref.current;
     async function registerObserver() {
       observedMap3.set(target, { measurements: {} });
@@ -57768,7 +57799,7 @@ function useResizeObserver3(ref, dimensions2, onResize, reportInitialSize = fals
       }
     };
   }, [measure, ref]);
-  (0, import_react210.useEffect)(() => {
+  (0, import_react211.useEffect)(() => {
     const target = ref.current;
     const record = observedMap3.get(target);
     if (record) {
@@ -57790,7 +57821,7 @@ var NO_MEASUREMENT2 = [];
 var isNumber = (val) => Number.isFinite(val);
 var FULL_SIZE = { height: "100%", width: "auto" };
 var getInitialCssSize = (height, width) => {
-  if ((0, import_vuu_utils82.isValidNumber)(height) && (0, import_vuu_utils82.isValidNumber)(width)) {
+  if ((0, import_vuu_utils83.isValidNumber)(height) && (0, import_vuu_utils83.isValidNumber)(width)) {
     return {
       height: `${height}px`,
       width: `${width}px`
@@ -57805,7 +57836,7 @@ var getInitialCssSize = (height, width) => {
   }
 };
 var getInitialInnerSize = (height, width) => {
-  if ((0, import_vuu_utils82.isValidNumber)(height) && (0, import_vuu_utils82.isValidNumber)(width)) {
+  if ((0, import_vuu_utils83.isValidNumber)(height) && (0, import_vuu_utils83.isValidNumber)(width)) {
     return {
       height,
       width
@@ -57819,8 +57850,8 @@ var useMeasuredContainer = ({
   onResize: onResizeProp,
   width
 }) => {
-  const containerRef = (0, import_react211.useRef)(null);
-  const [size, setSize] = (0, import_react211.useState)({
+  const containerRef = (0, import_react212.useRef)(null);
+  const [size, setSize] = (0, import_react212.useState)({
     css: getInitialCssSize(height, width),
     inner: getInitialInnerSize(height, width),
     outer: {
@@ -57831,15 +57862,15 @@ var useMeasuredContainer = ({
   const fixedHeight = typeof height === "number";
   const fixedWidth = typeof width === "number";
   const dimensions2 = fixedHeight && fixedWidth ? NO_MEASUREMENT2 : fixedHeight ? WidthOnly2 : fixedWidth ? HeightOnly4 : ClientWidthHeight;
-  (0, import_react211.useMemo)(() => {
+  (0, import_react212.useMemo)(() => {
     setSize((currentSize) => {
       const { inner, outer } = currentSize;
-      if ((0, import_vuu_utils82.isValidNumber)(height) && (0, import_vuu_utils82.isValidNumber)(width) && inner && outer) {
+      if ((0, import_vuu_utils83.isValidNumber)(height) && (0, import_vuu_utils83.isValidNumber)(width) && inner && outer) {
         const { height: innerHeight2, width: innerWidth } = inner;
         const { height: outerHeight, width: outerWidth } = outer;
         if (outerHeight !== height || outerWidth !== width) {
-          const heightDiff = (0, import_vuu_utils82.isValidNumber)(outerHeight) ? outerHeight - innerHeight2 : 0;
-          const widthDiff = (0, import_vuu_utils82.isValidNumber)(outerWidth) ? outerWidth - innerWidth : 0;
+          const heightDiff = (0, import_vuu_utils83.isValidNumber)(outerHeight) ? outerHeight - innerHeight2 : 0;
+          const widthDiff = (0, import_vuu_utils83.isValidNumber)(outerWidth) ? outerWidth - innerWidth : 0;
           return {
             ...currentSize,
             outer: { height, width },
@@ -57850,7 +57881,7 @@ var useMeasuredContainer = ({
       return currentSize;
     });
   }, [height, width]);
-  const onResize = (0, import_react211.useCallback)(
+  const onResize = (0, import_react212.useCallback)(
     ({ clientWidth, clientHeight }) => {
       const { css, inner, outer } = size;
       let newState = size;
@@ -57888,7 +57919,7 @@ var useMeasuredContainer = ({
     },
     [defaultHeight, defaultWidth, fixedHeight, fixedWidth, height, size, width]
   );
-  (0, import_react211.useEffect)(() => {
+  (0, import_react212.useEffect)(() => {
     if (size.inner) {
       onResizeProp == null ? void 0 : onResizeProp(size.inner);
     }
@@ -57904,9 +57935,9 @@ var useMeasuredContainer = ({
 
 // ../vuu-layout/src/measured-container/MeasuredContainer.tsx
 var import_classnames63 = __toESM(require_classnames());
-var import_jsx_runtime119 = require("react/jsx-runtime");
+var import_jsx_runtime121 = require("react/jsx-runtime");
 var baseClass2 = "vuuMeasuredContainer";
-var MeasuredContainer = (0, import_react212.forwardRef)(function MeasuredContainer2({
+var MeasuredContainer = (0, import_react213.forwardRef)(function MeasuredContainer2({
   children,
   className,
   height,
@@ -57935,7 +57966,7 @@ var MeasuredContainer = (0, import_react212.forwardRef)(function MeasuredContain
     };
   };
   const forkedRef = useForkRef(containerRef, forwardedRef);
-  return unmeasured ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+  return unmeasured ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     "div",
     {
       ...htmlAttributes,
@@ -57943,7 +57974,7 @@ var MeasuredContainer = (0, import_react212.forwardRef)(function MeasuredContain
       style: getStyle2(),
       ref: containerRef
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
     "div",
     {
       ...htmlAttributes,
@@ -57957,14 +57988,14 @@ var MeasuredContainer = (0, import_react212.forwardRef)(function MeasuredContain
 
 // ../vuu-layout/src/overflow-container/OverflowContainer.tsx
 var import_classnames64 = __toESM(require_classnames());
-var import_react214 = __toESM(require("react"));
+var import_react215 = __toESM(require("react"));
 
 // ../vuu-layout/src/overflow-container/useOverflowContainer.ts
-var import_vuu_utils84 = require("@vuu-ui/vuu-utils");
-var import_react213 = require("react");
+var import_vuu_utils85 = require("@vuu-ui/vuu-utils");
+var import_react214 = require("react");
 
 // ../vuu-layout/src/overflow-container/overflow-utils.ts
-var import_vuu_utils83 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils84 = require("@vuu-ui/vuu-utils");
 var NON_WRAPPED_ITEM = ".vuuOverflowContainer-item:not(.wrapped)";
 var isOverflowElement = (element) => element !== null && element.dataset.index === "overflow" && element.parentElement !== null && element.parentElement.classList.contains(
   "vuuOverflowContainer-wrapContainer-overflowed"
@@ -58101,7 +58132,7 @@ var correctForWrappedHighPriorityItems = (container, nonWrapped, wrapped) => new
   });
 });
 var markElementAsWrapped = (container, item) => {
-  const el = (0, import_vuu_utils83.getElementByDataIndex)(container, item.index);
+  const el = (0, import_vuu_utils84.getElementByDataIndex)(container, item.index);
   if (el) {
     el.classList.add("wrapped");
   } else {
@@ -58175,7 +58206,7 @@ var getNonwrappedItemsByPriority = (container) => Array.from(container.querySele
 );
 var switchWrappedItemIntoView = (container, overflowItem) => {
   const unwrappedItems = getNonwrappedItemsByPriority(container);
-  const targetElement = (0, import_vuu_utils83.getElementByDataIndex)(
+  const targetElement = (0, import_vuu_utils84.getElementByDataIndex)(
     container,
     overflowItem.index,
     true
@@ -58225,16 +58256,16 @@ var useOverflowContainer = ({
   onSwitchWrappedItemIntoView,
   orientation = "horizontal"
 }) => {
-  const [container, setContainer] = (0, import_react213.useState)(null);
-  const wrappedItemsRef = (0, import_react213.useRef)(NO_WRAPPED_ITEMS);
-  const containerRef = (0, import_react213.useRef)(null);
-  const setOverflowTabIndex = (0, import_react213.useCallback)((tabIndex) => {
+  const [container, setContainer] = (0, import_react214.useState)(null);
+  const wrappedItemsRef = (0, import_react214.useRef)(NO_WRAPPED_ITEMS);
+  const containerRef = (0, import_react214.useRef)(null);
+  const setOverflowTabIndex = (0, import_react214.useCallback)((tabIndex) => {
     var _a4;
     if (containerRef.current) {
       (_a4 = containerRef.current.querySelector(".vuuOverflowContainer-OverflowIndicator button")) == null ? void 0 : _a4.setAttribute("tabindex", tabIndex);
     }
   }, []);
-  const handleResize = (0, import_react213.useCallback)(async () => {
+  const handleResize = (0, import_react214.useCallback)(async () => {
     if (container) {
       let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(
         container,
@@ -58269,7 +58300,7 @@ var useOverflowContainer = ({
     }
   }, [container, orientation, setOverflowTabIndex]);
   const hasOverflowItem = (opt) => typeof opt === "object" && opt !== null && "overflowItem" in opt;
-  const [menuBuilder, menuActionHandler] = (0, import_react213.useMemo)(() => {
+  const [menuBuilder, menuActionHandler] = (0, import_react214.useMemo)(() => {
     return [
       () => {
         const { current: menuItems } = wrappedItemsRef;
@@ -58296,14 +58327,14 @@ var useOverflowContainer = ({
       }
     ];
   }, [container, onSwitchWrappedItemIntoView]);
-  const resizeObserver4 = (0, import_react213.useMemo)(() => {
-    const { sizeProp } = import_vuu_utils84.MEASURES[orientation];
+  const resizeObserver4 = (0, import_react214.useMemo)(() => {
+    const { sizeProp } = import_vuu_utils85.MEASURES[orientation];
     let currentSize = 0;
     return new ResizeObserver((entries) => {
       for (const entry of entries) {
         const { [sizeProp]: actualSize } = entry.contentRect;
         const size = Math.round(actualSize);
-        if ((0, import_vuu_utils84.isValidNumber)(size) && currentSize !== size) {
+        if ((0, import_vuu_utils85.isValidNumber)(size) && currentSize !== size) {
           currentSize = size;
           handleResize();
         }
@@ -58313,15 +58344,15 @@ var useOverflowContainer = ({
   useLayoutEffectSkipFirst(() => {
     handleResize();
   }, [handleResize, itemCount]);
-  (0, import_react213.useMemo)(() => {
+  (0, import_react214.useMemo)(() => {
     if (container) {
       resizeObserver4.observe(container);
     }
   }, [container, resizeObserver4]);
-  const callbackRef = (0, import_react213.useCallback)((el) => {
+  const callbackRef = (0, import_react214.useCallback)((el) => {
     setContainer(containerRef.current = el);
   }, []);
-  const handleDrop = (0, import_react213.useCallback)(
+  const handleDrop = (0, import_react214.useCallback)(
     (fromIndex, toIndex) => {
       onMoveItem == null ? void 0 : onMoveItem(fromIndex, toIndex);
     },
@@ -58347,9 +58378,9 @@ var useOverflowContainer = ({
 };
 
 // ../vuu-layout/src/overflow-container/OverflowContainer.tsx
-var import_jsx_runtime120 = require("react/jsx-runtime");
+var import_jsx_runtime122 = require("react/jsx-runtime");
 var classBase47 = "vuuOverflowContainer";
-var WrapContainer = import_react214.default.memo(
+var WrapContainer = import_react215.default.memo(
   ({
     PopupMenuProps: PopupMenuProps2,
     allowDragDrop,
@@ -58393,7 +58424,7 @@ var WrapContainer = import_react214.default.memo(
         id: itemId = `${id}-${i}`,
         label = `Item ${i + 1}`
       } = childEl.props;
-      return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
         "div",
         {
           className: (0, import_classnames64.default)(`${classBase47}-item`, {
@@ -58410,12 +58441,12 @@ var WrapContainer = import_react214.default.memo(
         i
       );
     });
-    const overflowIndicator = /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+    const overflowIndicator = /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
       "div",
       {
         className: `${classBase47}-OverflowIndicator`,
         "data-index": "overflow",
-        children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
           PopupMenu,
           {
             ...PopupMenuProps2,
@@ -58429,14 +58460,14 @@ var WrapContainer = import_react214.default.memo(
       "overflow"
     );
     content2.push(overflowIndicator);
-    return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className, ref: rootRef, style, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className, ref: rootRef, style, children: [
       content2,
       draggable
     ] });
   }
 );
 WrapContainer.displayName = "OverflowContainer.InnerContainer";
-var OverflowContainer = (0, import_react214.forwardRef)(function OverflowContainer2({
+var OverflowContainer = (0, import_react215.forwardRef)(function OverflowContainer2({
   PopupMenuProps: PopupMenuProps2,
   allowDragDrop = false,
   children,
@@ -58451,14 +58482,14 @@ var OverflowContainer = (0, import_react214.forwardRef)(function OverflowContain
   ...htmlAttributes
 }, forwardedRef) {
   const id = useId2(idProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
     "div",
     {
       ...htmlAttributes,
       className: (0, import_classnames64.default)((0, import_classnames64.default)(className, classBase47)),
       id,
       ref: forwardedRef,
-      children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
         WrapContainer,
         {
           PopupMenuProps: PopupMenuProps2,
@@ -58478,17 +58509,17 @@ var OverflowContainer = (0, import_react214.forwardRef)(function OverflowContain
 });
 
 // ../vuu-layout/src/palette/Palette.tsx
-var import_vuu_utils85 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils86 = require("@vuu-ui/vuu-utils");
 var import_classnames65 = __toESM(require_classnames());
-var import_react215 = require("react");
-var import_jsx_runtime121 = require("react/jsx-runtime");
+var import_react216 = require("react");
+var import_jsx_runtime123 = require("react/jsx-runtime");
 var clonePaletteItem = (paletteItem) => {
   const dolly = paletteItem.cloneNode(true);
   dolly.id = "";
   delete dolly.dataset.idx;
   return dolly;
 };
-var PaletteItem = (0, import_react215.memo)(
+var PaletteItem = (0, import_react216.memo)(
   ({
     className,
     children: component,
@@ -58498,7 +58529,7 @@ var PaletteItem = (0, import_react215.memo)(
     closeable,
     ...props
   }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
       ListItem,
       {
         className: (0, import_classnames65.default)("vuuPaletteItem", className),
@@ -58511,7 +58542,7 @@ var PaletteItem = (0, import_react215.memo)(
 );
 PaletteItem.displayName = "PaletteItem";
 var Palette = ({
-  ListProps: ListProps5,
+  ListProps: ListProps6,
   ViewProps: ViewProps4,
   children,
   className,
@@ -58531,9 +58562,9 @@ var Palette = ({
     } = children[idx];
     const { ViewProps: componentViewProps } = payload.props;
     const { height, left, top: top2, width } = listItemElement.getBoundingClientRect();
-    const id = (0, import_vuu_utils85.uuid)();
+    const id = (0, import_vuu_utils86.uuid)();
     const identifiers = { id, key: id };
-    const component = template ? payload : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    const component = template ? payload : /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
       MemoView,
       {
         ...ViewProps4,
@@ -58567,16 +58598,16 @@ var Palette = ({
       type: "drag-start"
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
     List,
     {
-      ...ListProps5,
+      ...ListProps6,
       ...props,
       className: (0, import_classnames65.default)(classBase50, className, `${classBase50}-${orientation}`),
       itemHeight,
       selected: null,
       children: children.map(
-        (child, idx) => child.type === PaletteItem ? (0, import_react215.cloneElement)(child, {
+        (child, idx) => child.type === PaletteItem ? (0, import_react216.cloneElement)(child, {
           key: idx,
           onMouseDown: handleMouseDown
         }) : child
@@ -58588,14 +58619,14 @@ registerComponent("Palette", Palette, "view");
 
 // ../vuu-layout/src/stack/Stack.tsx
 var import_classnames66 = __toESM(require_classnames());
-var import_react216 = __toESM(require("react"));
-var import_jsx_runtime122 = require("react/jsx-runtime");
-var classBase48 = "Tabs";
+var import_react217 = __toESM(require("react"));
+var import_jsx_runtime124 = require("react/jsx-runtime");
+var classBase48 = "vuuTabs";
 var getDefaultTabIcon = () => void 0;
 var getChildElements = (children) => {
   const elements = [];
-  import_react216.default.Children.forEach(children, (child) => {
-    if (import_react216.default.isValidElement(child)) {
+  import_react217.default.Children.forEach(children, (child) => {
+    if (import_react217.default.isValidElement(child)) {
       elements.push(child);
     } else {
       console.warn(`Stack has unexpected child element type`);
@@ -58608,7 +58639,7 @@ var DefaultTabstripProps = {
   allowCloseTab: false,
   allowRenameTab: false
 };
-var Stack2 = (0, import_react216.forwardRef)(function Stack3({
+var Stack2 = (0, import_react217.forwardRef)(function Stack3({
   TabstripProps: TabstripProps2 = DefaultTabstripProps,
   active = 0,
   children,
@@ -58628,13 +58659,13 @@ var Stack2 = (0, import_react216.forwardRef)(function Stack3({
 }, ref) {
   var _a4;
   const id = useId2(idProp);
-  const tabLabels = (0, import_react216.useRef)([]);
+  const tabLabels = (0, import_react217.useRef)([]);
   const {
     allowCloseTab,
     allowRenameTab,
     className: tabstripClassName
   } = TabstripProps2;
-  const handleExitEditMode = (0, import_react216.useCallback)(
+  const handleExitEditMode = (0, import_react217.useCallback)(
     (_oldText, newText, _allowDeactivation, tabIndex) => {
       onTabEdit == null ? void 0 : onTabEdit(tabIndex, newText);
     },
@@ -58642,7 +58673,7 @@ var Stack2 = (0, import_react216.forwardRef)(function Stack3({
   );
   const activeChild = () => {
     var _a5;
-    if (import_react216.default.isValidElement(children)) {
+    if (import_react217.default.isValidElement(children)) {
       return children;
     }
     if (Array.isArray(children)) {
@@ -58658,7 +58689,7 @@ var Stack2 = (0, import_react216.forwardRef)(function Stack3({
     } = child2.props;
     const label = getTabLabel(child2, idx, tabLabels.current);
     tabLabels.current.push(label);
-    return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
       Tab,
       {
         ariaControls: childId,
@@ -58676,7 +58707,7 @@ var Stack2 = (0, import_react216.forwardRef)(function Stack3({
   const child = activeChild();
   const isHorizontal = showTabs === "left" || showTabs === "right";
   const tabstripOrientation = isHorizontal ? "vertical" : "horizontal";
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
     "div",
     {
       className: (0, import_classnames66.default)(classBase48, classNameProp, {
@@ -58686,7 +58717,7 @@ var Stack2 = (0, import_react216.forwardRef)(function Stack3({
       id,
       ref,
       children: [
-        showTabs ? /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+        showTabs ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
           Tabstrip,
           {
             ...TabstripProps2,
@@ -58704,7 +58735,7 @@ var Stack2 = (0, import_react216.forwardRef)(function Stack3({
             children: renderTabs()
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
           "div",
           {
             "aria-labelledby": `${id}-${active}`,
@@ -58720,9 +58751,9 @@ var Stack2 = (0, import_react216.forwardRef)(function Stack3({
 Stack2.displayName = "Stack";
 
 // ../vuu-layout/src/stack/StackLayout.tsx
-var import_react217 = __toESM(require("react"));
-var import_jsx_runtime123 = require("react/jsx-runtime");
-var defaultCreateNewChild = () => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+var import_react218 = __toESM(require("react"));
+var import_jsx_runtime125 = require("react/jsx-runtime");
+var defaultCreateNewChild = () => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
   Placeholder,
   {
     resizeable: true,
@@ -58731,7 +58762,7 @@ var defaultCreateNewChild = () => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)
 );
 var StackLayout = (props) => {
   var _a4;
-  const ref = (0, import_react217.useRef)(null);
+  const ref = (0, import_react218.useRef)(null);
   const dispatch = useLayoutProviderDispatch();
   const { loadState } = usePersistentState();
   const {
@@ -58752,7 +58783,7 @@ var StackLayout = (props) => {
       onTabSelectionChanged == null ? void 0 : onTabSelectionChanged(nextIdx);
     }
   };
-  const handleTabClose = (0, import_react217.useCallback)(
+  const handleTabClose = (0, import_react218.useCallback)(
     (tabIndex) => {
       if (Array.isArray(children)) {
         const {
@@ -58763,9 +58794,9 @@ var StackLayout = (props) => {
     },
     [children, dispatch]
   );
-  const handleTabAdd = (0, import_react217.useCallback)(() => {
+  const handleTabAdd = (0, import_react218.useCallback)(() => {
     if (path) {
-      const tabIndex = import_react217.default.Children.count(children);
+      const tabIndex = import_react218.default.Children.count(children);
       const component = createNewChild(tabIndex);
       dispatch({
         type: "add",
@@ -58774,7 +58805,7 @@ var StackLayout = (props) => {
       });
     }
   }, [children, createNewChild, dispatch, path]);
-  const handleMoveTab = (0, import_react217.useCallback)(
+  const handleMoveTab = (0, import_react218.useCallback)(
     (fromIndex, toIndex) => {
       if (path) {
         dispatch({
@@ -58809,7 +58840,7 @@ var StackLayout = (props) => {
     return loadState(id2, "view-title") || title || // This will normally never be called as title is always assigned in layout model
     getDefaultTabLabel(component, idx, existingLabels);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
     Stack2,
     {
       ...restProps,
@@ -58830,92 +58861,92 @@ registerComponent("Stack", StackLayout, "container");
 
 // ../vuu-layout/src/toolbar/Toolbar.tsx
 var import_classnames67 = __toESM(require_classnames());
-var import_react221 = __toESM(require("react"));
+var import_react222 = __toESM(require("react"));
 
 // ../vuu-layout/src/toolbar/useToolbar.ts
-var import_vuu_utils90 = require("@vuu-ui/vuu-utils");
-var import_react220 = require("react");
+var import_vuu_utils91 = require("@vuu-ui/vuu-utils");
+var import_react221 = require("react");
 
 // ../vuu-layout/src/toolbar/useKeyboardNavigation.ts
-var import_vuu_utils87 = require("@vuu-ui/vuu-utils");
-var import_react218 = require("react");
 var import_vuu_utils88 = require("@vuu-ui/vuu-utils");
+var import_react219 = require("react");
+var import_vuu_utils89 = require("@vuu-ui/vuu-utils");
 
 // ../vuu-layout/src/toolbar/toolbar-dom-utils.ts
-var import_vuu_utils86 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils87 = require("@vuu-ui/vuu-utils");
 
 // ../vuu-layout/src/toolbar/useKeyboardNavigation.ts
 var navigation2 = {
   horizontal: {
-    [import_vuu_utils88.Home]: "start",
-    [import_vuu_utils88.End]: "end",
-    [import_vuu_utils88.ArrowLeft]: "bwd",
-    [import_vuu_utils88.ArrowRight]: "fwd"
+    [import_vuu_utils89.Home]: "start",
+    [import_vuu_utils89.End]: "end",
+    [import_vuu_utils89.ArrowLeft]: "bwd",
+    [import_vuu_utils89.ArrowRight]: "fwd"
   },
   vertical: {
-    [import_vuu_utils88.Home]: "start",
-    [import_vuu_utils88.End]: "end",
-    [import_vuu_utils88.ArrowUp]: "bwd",
-    [import_vuu_utils88.ArrowDown]: "fwd"
+    [import_vuu_utils89.Home]: "start",
+    [import_vuu_utils89.End]: "end",
+    [import_vuu_utils89.ArrowUp]: "bwd",
+    [import_vuu_utils89.ArrowDown]: "fwd"
   }
 };
 
 // ../vuu-layout/src/toolbar/useSelection.ts
-var import_vuu_utils89 = require("@vuu-ui/vuu-utils");
-var import_react219 = require("react");
+var import_vuu_utils90 = require("@vuu-ui/vuu-utils");
+var import_react220 = require("react");
 
 // ../vuu-layout/src/toolbar/Toolbar.tsx
-var import_jsx_runtime124 = require("react/jsx-runtime");
+var import_jsx_runtime126 = require("react/jsx-runtime");
 
 // ../vuu-layout/src/tools/config-wrapper/ConfigWrapper.tsx
-var import_react222 = __toESM(require("react"));
-var import_jsx_runtime125 = require("react/jsx-runtime");
+var import_react223 = __toESM(require("react"));
+var import_jsx_runtime127 = require("react/jsx-runtime");
 
 // ../vuu-layout/src/tools/devtools-box/layout-configurator.jsx
-var import_jsx_runtime126 = require("react/jsx-runtime");
+var import_jsx_runtime128 = require("react/jsx-runtime");
 var CSS_DIGIT = "(\\d+)(?:px)?";
 var CSS_MEASURE = `^(?:${CSS_DIGIT}(?:\\s${CSS_DIGIT}(?:\\s${CSS_DIGIT}(?:\\s${CSS_DIGIT})?)?)?)$`;
 var CSS_REX = new RegExp(CSS_MEASURE);
 
 // ../vuu-layout/src/tools/devtools-tree/layout-tree-viewer.jsx
-var import_react223 = __toESM(require("react"));
+var import_react224 = __toESM(require("react"));
 var import_classnames68 = __toESM(require_classnames());
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_jsx_runtime129 = require("react/jsx-runtime");
 
 // ../vuu-shell/src/login/LoginPanel.tsx
-var import_react225 = require("react");
+var import_react226 = require("react");
 
 // ../vuu-shell/src/login/VuuLogo.tsx
-var import_react224 = require("react");
-var import_jsx_runtime128 = require("react/jsx-runtime");
+var import_react225 = require("react");
+var import_jsx_runtime130 = require("react/jsx-runtime");
 
 // ../vuu-shell/src/login/LoginPanel.tsx
 var import_classnames69 = __toESM(require_classnames());
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_jsx_runtime131 = require("react/jsx-runtime");
 
 // ../vuu-shell/src/login/login-utils.ts
-var import_vuu_utils91 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils92 = require("@vuu-ui/vuu-utils");
 
 // ../vuu-shell/src/app-header/AppHeader.tsx
-var import_jsx_runtime130 = require("react/jsx-runtime");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 
 // ../vuu-shell/src/connection-status/ConnectionStatusIcon.tsx
-var import_react227 = __toESM(require("react"));
+var import_react228 = __toESM(require("react"));
 var import_classnames71 = __toESM(require_classnames());
-var import_jsx_runtime131 = require("react/jsx-runtime");
+var import_jsx_runtime133 = require("react/jsx-runtime");
 
 // ../vuu-shell/src/density-switch/DensitySwitch.tsx
-var import_react228 = require("react");
+var import_react229 = require("react");
 var import_classnames72 = __toESM(require_classnames());
-var import_jsx_runtime132 = require("react/jsx-runtime");
+var import_jsx_runtime134 = require("react/jsx-runtime");
 
 // ../vuu-shell/src/feature/Feature.tsx
-var import_react230 = __toESM(require("react"));
+var import_react231 = __toESM(require("react"));
 
 // ../vuu-shell/src/feature/FeatureErrorBoundary.tsx
-var import_react229 = __toESM(require("react"));
-var import_jsx_runtime133 = require("react/jsx-runtime");
-var FeatureErrorBoundary = class extends import_react229.default.Component {
+var import_react230 = __toESM(require("react"));
+var import_jsx_runtime135 = require("react/jsx-runtime");
+var FeatureErrorBoundary = class extends import_react230.default.Component {
   constructor(props) {
     super(props);
     this.state = { errorMessage: null };
@@ -58929,9 +58960,9 @@ var FeatureErrorBoundary = class extends import_react229.default.Component {
   }
   render() {
     if (this.state.errorMessage) {
-      return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(import_jsx_runtime133.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("h1", { children: "An error occured while creating component." }),
-        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("p", { children: this.state.errorMessage })
+      return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("h1", { children: "An error occured while creating component." }),
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { children: this.state.errorMessage })
       ] });
     }
     return this.props.children;
@@ -58939,8 +58970,8 @@ var FeatureErrorBoundary = class extends import_react229.default.Component {
 };
 
 // ../vuu-shell/src/feature/Loader.tsx
-var import_jsx_runtime134 = require("react/jsx-runtime");
-var Loader = () => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "hwLoader" });
+var import_jsx_runtime136 = require("react/jsx-runtime");
+var Loader = () => /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: "hwLoader" });
 
 // ../vuu-shell/src/feature/css-module-loader.ts
 var importCSS = async (path) => {
@@ -58949,10 +58980,10 @@ var importCSS = async (path) => {
 };
 
 // ../vuu-shell/src/feature/Feature.tsx
-var import_jsx_runtime135 = require("react/jsx-runtime");
+var import_jsx_runtime137 = require("react/jsx-runtime");
 var componentsMap = /* @__PURE__ */ new Map();
 var useCachedFeature = (url) => {
-  (0, import_react230.useEffect)(
+  (0, import_react231.useEffect)(
     () => () => {
       componentsMap.delete(url);
     },
@@ -58961,7 +58992,7 @@ var useCachedFeature = (url) => {
   if (!componentsMap.has(url)) {
     componentsMap.set(
       url,
-      import_react230.default.lazy(() => import(
+      import_react231.default.lazy(() => import(
         /* @vite-ignore */
         url
       ))
@@ -58989,23 +59020,24 @@ function RawFeature({
     });
   }
   const LazyFeature = useCachedFeature(url);
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(FeatureErrorBoundary, { url, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_react230.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Loader, {}), children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(LazyFeature, { ...props, ...params }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(FeatureErrorBoundary, { url, children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_react231.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Loader, {}), children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(LazyFeature, { ...props, ...params }) }) });
 }
-var Feature = import_react230.default.memo(RawFeature);
+var Feature = import_react231.default.memo(RawFeature);
 Feature.displayName = "Feature";
 registerComponent("Feature", Feature, "view");
 
 // ../vuu-shell/src/layout-management/SaveLayoutPanel.tsx
-var import_react231 = require("react");
-var import_vuu_utils92 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime136 = require("react/jsx-runtime");
+var import_react232 = require("react");
+var import_vuu_utils93 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime138 = require("react/jsx-runtime");
 var classBase49 = "saveLayoutPanel";
 var formField = `${classBase49}-formField`;
 
 // ../vuu-shell/src/layout-management/useLayoutManager.tsx
-var import_react232 = __toESM(require("react"));
-var import_jsx_runtime137 = require("react/jsx-runtime");
-var LayoutManagementContext = import_react232.default.createContext({
+var import_react233 = __toESM(require("react"));
+var import_jsx_runtime139 = require("react/jsx-runtime");
+var LayoutManagementContext = import_react233.default.createContext({
+  getApplicationSettings: () => void 0,
   layoutMetadata: [],
   saveLayout: () => void 0,
   // The default Application JSON will be served if no LayoutManagementProvider
@@ -59016,13 +59048,13 @@ var LayoutManagementContext = import_react232.default.createContext({
 });
 
 // ../vuu-shell/src/layout-management/LayoutList.tsx
-var import_jsx_runtime138 = require("react/jsx-runtime");
+var import_jsx_runtime140 = require("react/jsx-runtime");
 
 // ../vuu-icons/src/VuuLogo.tsx
-var import_react233 = require("react");
-var import_jsx_runtime139 = require("react/jsx-runtime");
-var VuuLogo2 = (0, import_react233.memo)(() => {
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
+var import_react234 = require("react");
+var import_jsx_runtime141 = require("react/jsx-runtime");
+var VuuLogo2 = (0, import_react234.memo)(() => {
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
     "svg",
     {
       width: "44",
@@ -59031,44 +59063,44 @@ var VuuLogo2 = (0, import_react233.memo)(() => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("g", { clipPath: "url(#clip0_217_6990)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("g", { clipPath: "url(#clip0_217_6990)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
             "path",
             {
               d: "M39.8642 15.5509L35.9196 7.58974L34.3369 6.85464L24.6235 22.0825L39.1628 30.618L42.3152 25.6347L39.8642 15.5509Z",
               fill: "url(#paint0_linear_217_6990)"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
             "path",
             {
               d: "M42.6246 24.8716C41.9199 25.9157 40.9625 26.824 39.767 27.4905C38.424 28.2396 36.9563 28.597 35.5081 28.597C32.7541 28.597 30.0715 27.3094 28.4466 24.9855L15.772 3.90967L15.7655 3.9206C13.3615 0.137431 8.25372 -1.13143 4.24754 1.10507C0.178173 3.37435 -1.20852 8.39359 1.14854 12.3125L18.3445 40.9095C19.1108 42.1846 20.1816 43.1834 21.4144 43.8764C21.4241 43.8826 21.4338 43.8889 21.4435 43.8951C21.4484 43.8982 21.4549 43.9013 21.4597 43.9045C22.0332 44.2228 22.6423 44.471 23.2725 44.6536C23.3194 44.6677 23.368 44.6817 23.415 44.6942C23.6418 44.7551 23.8702 44.8097 24.1019 44.8534C24.1456 44.8612 24.1894 44.8659 24.2331 44.8737C24.4194 44.9049 24.6073 44.9314 24.7952 44.9501C24.8698 44.9579 24.9443 44.9658 25.0188 44.9704C25.2342 44.9876 25.4497 44.9985 25.6668 45.0001C25.6781 45.0001 25.6895 45.0001 25.6992 45.0001C25.7024 45.0001 25.704 45.0001 25.7073 45.0001C25.7105 45.0001 25.7121 45.0001 25.7154 45.0001C25.9503 45.0001 26.1868 44.9876 26.4217 44.9689C26.4751 44.9642 26.5286 44.9595 26.5837 44.9533C26.8137 44.9299 27.0438 44.9002 27.2738 44.8596C27.277 44.8596 27.2803 44.8596 27.2835 44.8596C27.5362 44.8144 27.7889 44.7551 28.0384 44.6864C28.0546 44.6817 28.0692 44.677 28.0854 44.6723C28.4483 44.5709 28.8063 44.4445 29.1594 44.2931C29.1659 44.29 29.174 44.2868 29.1805 44.2837C29.4494 44.1682 29.7151 44.0418 29.9759 43.8967C30.24 43.75 30.491 43.5908 30.7308 43.4206C30.9398 43.2739 31.1407 43.1179 31.3367 42.9524C31.5748 42.7495 31.8 42.5373 32.009 42.3141C32.1661 42.1471 32.3168 41.9723 32.4609 41.7913C32.5079 41.732 32.5517 41.6711 32.5954 41.6118C32.6942 41.4807 32.7882 41.3465 32.8789 41.2091C32.9259 41.1373 32.9728 41.0671 33.0182 40.9953C33.036 40.9672 33.0555 40.9407 33.0717 40.9126L42.7153 24.8763H42.6214L42.6246 24.8716Z",
               fill: "url(#paint1_linear_217_6990)"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
             "path",
             {
               d: "M42.8402 16.4218L42.1112 15.2232L38.9636 9.58433L37.504 7.19644C37.2286 6.56123 36.579 6.11331 35.8176 6.11331C34.8083 6.11331 33.9919 6.90147 33.9919 7.87223C33.9919 8.20154 34.0907 8.50432 34.2543 8.76808L34.2349 8.78056L39.9048 18.0808C40.5884 19.2186 40.7715 20.5437 40.4199 21.8141C40.0684 23.0845 39.226 24.1458 38.045 24.806C37.2675 25.2398 36.3846 25.4693 35.4936 25.4693C33.6727 25.4693 31.9766 24.5281 31.0662 23.0143L22.9161 9.63271H22.9323L19.4899 3.90958L19.4834 3.92051C19.4235 3.8253 19.3538 3.73947 19.2907 3.64738L19.1935 3.48663C19.1935 3.48663 19.1854 3.49131 19.1821 3.49443C17.5654 1.27666 14.9799 0.0390178 12.3118 0.00936427V0H7.91199V0.02185C10.9851 -0.184164 14.0582 1.23296 15.7656 3.92051L15.7721 3.90958L28.4451 24.987C30.0699 27.3093 32.7542 28.5985 35.5066 28.5985C36.9548 28.5985 38.4225 28.2426 39.7655 27.4919C40.961 26.8255 41.9168 25.9156 42.6231 24.8731H42.717L42.6846 24.9261C43.1366 24.2347 43.4833 23.4731 43.7068 22.6615C44.2916 20.5452 43.9871 18.3352 42.8369 16.4234L42.8402 16.4218Z",
               fill: "#F37880"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("g", { opacity: "0.86", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("g", { opacity: "0.86", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
               "path",
               {
                 d: "M34.2332 8.78212L39.9031 18.0824C40.5868 19.2202 40.7698 20.5452 40.4183 21.8156C40.2044 22.5897 39.8059 23.2858 39.2616 23.8617C39.9744 23.2343 40.4879 22.4243 40.7423 21.5035C41.0938 20.2331 40.9107 18.908 40.2271 17.7703L34.5572 8.46998L34.5767 8.4575C34.413 8.19374 34.3142 7.89096 34.3142 7.56165C34.3142 7.15586 34.4584 6.78285 34.6982 6.48476C34.2672 6.80626 33.9902 7.30881 33.9902 7.87379C33.9902 8.2031 34.0891 8.50588 34.2527 8.76964L34.2332 8.78212Z",
                 fill: "white"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
               "path",
               {
                 d: "M42.6917 24.9169L42.6863 24.9256C42.6863 24.9256 42.6899 24.9187 42.6935 24.9152C42.6935 24.9152 42.6935 24.9152 42.6935 24.9169H42.6917Z",
                 fill: "white"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
               "path",
               {
                 d: "M40.0911 27.1798C38.7481 27.9289 37.2804 28.2863 35.8322 28.2863C33.0782 28.2863 30.3955 26.9988 28.7707 24.6749L16.0961 3.59744L16.0896 3.60837C14.9281 1.78077 13.1364 0.543128 11.1422 0H7.91199V0.02185C10.9851 -0.184164 14.0582 1.23296 15.7656 3.92051L15.7721 3.90958L28.4451 24.987C30.0699 27.3093 32.7542 28.5985 35.5066 28.5985C36.9548 28.5985 38.4225 28.2426 39.7655 27.4919C40.4815 27.0924 41.1084 26.6055 41.6511 26.0561C41.1862 26.479 40.6662 26.8583 40.0894 27.1798H40.0911Z",
@@ -59077,8 +59109,8 @@ var VuuLogo2 = (0, import_react233.memo)(() => {
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("defs", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
             "linearGradient",
             {
               id: "paint0_linear_217_6990",
@@ -59088,12 +59120,12 @@ var VuuLogo2 = (0, import_react233.memo)(() => {
               y2: "18.7363",
               gradientUnits: "userSpaceOnUse",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("stop", { stopColor: "#4906A5" }),
-                /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("stop", { offset: "1", stopColor: "#D3423A" })
+                /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("stop", { stopColor: "#4906A5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("stop", { offset: "1", stopColor: "#D3423A" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
             "linearGradient",
             {
               id: "paint1_linear_217_6990",
@@ -59103,12 +59135,12 @@ var VuuLogo2 = (0, import_react233.memo)(() => {
               y2: "22.5009",
               gradientUnits: "userSpaceOnUse",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("stop", { stopColor: "#7C06A5" }),
-                /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("stop", { offset: "1", stopColor: "#D3423A" })
+                /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("stop", { stopColor: "#7C06A5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("stop", { offset: "1", stopColor: "#D3423A" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("clipPath", { id: "clip0_217_6990", children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)("rect", { width: "44", height: "45", fill: "white" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("clipPath", { id: "clip0_217_6990", children: /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("rect", { width: "44", height: "45", fill: "white" }) })
         ] })
       ]
     }
@@ -59118,19 +59150,19 @@ VuuLogo2.displayName = "VuuLogo";
 
 // ../vuu-shell/src/left-nav/LeftNav.tsx
 var import_classnames74 = __toESM(require_classnames());
-var import_react235 = require("react");
+var import_react236 = require("react");
 
 // ../vuu-shell/src/feature-list/FeatureList.tsx
-var import_jsx_runtime140 = require("react/jsx-runtime");
+var import_jsx_runtime142 = require("react/jsx-runtime");
 
 // ../vuu-shell/src/theme-provider/ThemeProvider.tsx
-var import_react234 = require("react");
+var import_react235 = require("react");
 var import_classnames73 = __toESM(require_classnames());
-var import_jsx_runtime141 = require("react/jsx-runtime");
+var import_jsx_runtime143 = require("react/jsx-runtime");
 var DEFAULT_DENSITY2 = "medium";
 var DEFAULT_THEME = "salt-theme";
 var DEFAULT_THEME_MODE = "light";
-var ThemeContext2 = (0, import_react234.createContext)({
+var ThemeContext2 = (0, import_react235.createContext)({
   density: "high",
   theme: "vuu",
   themeMode: "light"
@@ -59141,7 +59173,7 @@ var DEFAULT_THEME_ATTRIBUTES = [
   "light"
 ];
 var useThemeAttributes = (themeAttributes) => {
-  const context = (0, import_react234.useContext)(ThemeContext2);
+  const context = (0, import_react235.useContext)(ThemeContext2);
   if (themeAttributes) {
     return [
       themeAttributes.themeClass,
@@ -59159,8 +59191,8 @@ var useThemeAttributes = (themeAttributes) => {
 };
 var createThemedChildren = (children, theme2, themeMode, density) => {
   var _a4;
-  if ((0, import_react234.isValidElement)(children)) {
-    return (0, import_react234.cloneElement)(children, {
+  if ((0, import_react235.isValidElement)(children)) {
+    return (0, import_react235.cloneElement)(children, {
       className: (0, import_classnames73.default)(
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         (_a4 = children.props) == null ? void 0 : _a4.className,
@@ -59192,69 +59224,69 @@ var ThemeProvider = ({
     density: inheritedDensity,
     themeMode: inheritedThemeMode,
     theme: inheritedTheme
-  } = (0, import_react234.useContext)(ThemeContext2);
+  } = (0, import_react235.useContext)(ThemeContext2);
   const density = (_a4 = densityProp != null ? densityProp : inheritedDensity) != null ? _a4 : DEFAULT_DENSITY2;
   const themeMode = (_b = themeModeProp != null ? themeModeProp : inheritedThemeMode) != null ? _b : DEFAULT_THEME_MODE;
   const theme2 = (_c = themeProp != null ? themeProp : inheritedTheme) != null ? _c : DEFAULT_THEME;
   const themedChildren = applyThemeClasses ? createThemedChildren(children, theme2, themeMode, density) : children;
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(ThemeContext2.Provider, { value: { themeMode, density, theme: theme2 }, children: themedChildren });
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(ThemeContext2.Provider, { value: { themeMode, density, theme: theme2 }, children: themedChildren });
 };
 ThemeProvider.displayName = "ThemeProvider";
 
 // ../vuu-shell/src/left-nav/LeftNav.tsx
-var import_jsx_runtime142 = require("react/jsx-runtime");
+var import_jsx_runtime144 = require("react/jsx-runtime");
 
 // ../vuu-shell/src/session-editing-form/SessionEditingForm.tsx
-var import_react236 = require("react");
+var import_react237 = require("react");
 var import_classnames75 = __toESM(require_classnames());
 var import_vuu_data4 = require("@vuu-ui/vuu-data");
-var import_vuu_utils93 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime143 = require("react/jsx-runtime");
+var import_vuu_utils94 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime145 = require("react/jsx-runtime");
 
 // ../vuu-shell/src/shell.tsx
 var import_vuu_data5 = require("@vuu-ui/vuu-data");
-var import_vuu_utils94 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils95 = require("@vuu-ui/vuu-utils");
 var import_classnames78 = __toESM(require_classnames());
-var import_react240 = require("react");
+var import_react241 = require("react");
 
 // ../vuu-shell/src/shell-layouts/context-panel/ContextPanel.tsx
 var import_classnames76 = __toESM(require_classnames());
-var import_react237 = require("react");
-var import_jsx_runtime144 = require("react/jsx-runtime");
+var import_react238 = require("react");
+var import_jsx_runtime146 = require("react/jsx-runtime");
 
 // ../vuu-shell/src/shell-layouts/side-panel/SidePanel.tsx
-var import_react238 = require("react");
+var import_react239 = require("react");
 var import_classnames77 = __toESM(require_classnames());
-var import_jsx_runtime145 = require("react/jsx-runtime");
+var import_jsx_runtime147 = require("react/jsx-runtime");
 
 // ../vuu-shell/src/shell-layouts/useFullHeightLeftPanel.tsx
-var import_jsx_runtime146 = require("react/jsx-runtime");
+var import_jsx_runtime148 = require("react/jsx-runtime");
 
 // ../vuu-shell/src/shell-layouts/useInlayLeftPanel.tsx
-var import_react239 = require("react");
-var import_jsx_runtime147 = require("react/jsx-runtime");
+var import_react240 = require("react");
+var import_jsx_runtime149 = require("react/jsx-runtime");
 
 // ../vuu-shell/src/shell.tsx
-var import_jsx_runtime148 = require("react/jsx-runtime");
-var { error } = (0, import_vuu_utils94.logger)("Shell");
+var import_jsx_runtime150 = require("react/jsx-runtime");
+var { error } = (0, import_vuu_utils95.logger)("Shell");
 
 // ../vuu-shell/src/ShellContextProvider.tsx
-var import_react241 = require("react");
-var import_jsx_runtime149 = require("react/jsx-runtime");
+var import_react242 = require("react");
+var import_jsx_runtime151 = require("react/jsx-runtime");
 var defaultConfig = {};
-var ShellContext = (0, import_react241.createContext)(defaultConfig);
+var ShellContext = (0, import_react242.createContext)(defaultConfig);
 var useShellContext = () => {
-  return (0, import_react241.useContext)(ShellContext);
+  return (0, import_react242.useContext)(ShellContext);
 };
 
 // ../vuu-shell/src/theme-switch/ThemeSwitch.tsx
 var import_classnames79 = __toESM(require_classnames());
-var import_react242 = require("react");
-var import_jsx_runtime150 = require("react/jsx-runtime");
+var import_react243 = require("react");
+var import_jsx_runtime152 = require("react/jsx-runtime");
 
 // src/hooks/useLookupValues.ts
-var import_vuu_utils95 = require("@vuu-ui/vuu-utils");
-var import_react243 = require("react");
+var import_vuu_utils96 = require("@vuu-ui/vuu-utils");
+var import_react244 = require("react");
 var NO_VALUES = [];
 var lookupValueMap = /* @__PURE__ */ new Map();
 var loadLookupValues = ({
@@ -59269,7 +59301,7 @@ var loadLookupValues = ({
   } else {
     const promise = new Promise((resolve) => {
       const columns = [valueColumn, labelColumn];
-      const columnMap = (0, import_vuu_utils95.buildColumnMap)(columns);
+      const columnMap = (0, import_vuu_utils96.buildColumnMap)(columns);
       const dataSource = new import_vuu_data6.RemoteDataSource({
         bufferSize: 0,
         table
@@ -59305,7 +59337,7 @@ var getSelectedOption = (values, selectedValue) => {
   return (_a4 = values.find((option) => option.value === selectedValue)) != null ? _a4 : null;
 };
 var getLookupDetails = ({ name: name3, type }) => {
-  if ((0, import_vuu_utils95.isTypeDescriptor)(type) && (0, import_vuu_utils95.isLookupRenderer)(type.renderer)) {
+  if ((0, import_vuu_utils96.isTypeDescriptor)(type) && (0, import_vuu_utils96.isLookupRenderer)(type.renderer)) {
     return type.renderer.lookup;
   } else {
     throw Error(
@@ -59316,7 +59348,7 @@ var getLookupDetails = ({ name: name3, type }) => {
 var useLookupValues = (column, initialValueProp) => {
   const lookupDetails = getLookupDetails(column);
   const { getLookupValues } = useShellContext();
-  const initialState = (0, import_react243.useMemo)(() => {
+  const initialState = (0, import_react244.useMemo)(() => {
     var _a4;
     const values2 = (_a4 = getLookupValues == null ? void 0 : getLookupValues(lookupDetails.table)) != null ? _a4 : NO_VALUES;
     return {
@@ -59324,8 +59356,8 @@ var useLookupValues = (column, initialValueProp) => {
       values: values2
     };
   }, [getLookupValues, initialValueProp, lookupDetails.table]);
-  const [{ initialValue, values }, setLookupState] = (0, import_react243.useState)(initialState);
-  (0, import_react243.useMemo)(() => {
+  const [{ initialValue, values }, setLookupState] = (0, import_react244.useState)(initialState);
+  (0, import_react244.useMemo)(() => {
     if (values === NO_VALUES) {
       loadLookupValues(lookupDetails).then(
         (values2) => setLookupState({
@@ -59342,17 +59374,17 @@ var useLookupValues = (column, initialValueProp) => {
 };
 
 // src/hooks/useServerConnectionStatus.ts
-var import_react244 = require("react");
+var import_react245 = require("react");
 var import_vuu_data7 = require("@vuu-ui/vuu-data");
 var useServerConnectionStatus = () => {
-  const [connectionStatus, setConnectionStatus] = (0, import_react244.useState)("disconnected");
-  const handleStatusChange = (0, import_react244.useCallback)(
+  const [connectionStatus, setConnectionStatus] = (0, import_react245.useState)("disconnected");
+  const handleStatusChange = (0, import_react245.useCallback)(
     ({ status }) => {
       setConnectionStatus(status);
     },
     []
   );
-  (0, import_react244.useEffect)(() => {
+  (0, import_react245.useEffect)(() => {
     import_vuu_data7.ConnectionManager.on("connection-status", handleStatusChange);
     return () => {
       import_vuu_data7.ConnectionManager.removeListener("connection-status", handleStatusChange);
@@ -59362,14 +59394,14 @@ var useServerConnectionStatus = () => {
 };
 
 // src/hooks/useServerConnectionQuality.ts
-var import_react245 = require("react");
+var import_react246 = require("react");
 var import_vuu_data8 = require("@vuu-ui/vuu-data");
 var useServerConnectionQuality = () => {
-  const [messagesPerSecond, setMessagesPerSecond] = (0, import_react245.useState)(0);
-  const handleConnectivityMessage = (0, import_react245.useCallback)(({ messages }) => {
+  const [messagesPerSecond, setMessagesPerSecond] = (0, import_react246.useState)(0);
+  const handleConnectivityMessage = (0, import_react246.useCallback)(({ messages }) => {
     setMessagesPerSecond(messages.messagesLength);
   }, []);
-  (0, import_react245.useEffect)(() => {
+  (0, import_react246.useEffect)(() => {
     import_vuu_data8.ConnectionManager.on("connection-metrics", handleConnectivityMessage);
     return () => {
       import_vuu_data8.ConnectionManager.removeListener(
@@ -59382,7 +59414,7 @@ var useServerConnectionQuality = () => {
 };
 
 // src/hooks/useTypeaheadSuggestions.ts
-var import_react246 = require("react");
+var import_react247 = require("react");
 var import_vuu_data9 = require("@vuu-ui/vuu-data");
 var TYPEAHEAD_MESSAGE_CONSTANTS = {
   type: "RPC_CALL",
@@ -59394,7 +59426,7 @@ var getTypeaheadParams = (table, column, text = "", selectedValues = []) => {
   }
   return [table, column];
 };
-var useTypeaheadSuggestions = () => (0, import_react246.useCallback)(async (params) => {
+var useTypeaheadSuggestions = () => (0, import_react247.useCallback)(async (params) => {
   const rpcMessage = params.length === 2 ? {
     method: "getUniqueFieldValues",
     params,
@@ -59409,10 +59441,10 @@ var useTypeaheadSuggestions = () => (0, import_react246.useCallback)(async (para
 
 // src/hooks/useVuuMenuActions.ts
 var import_vuu_filter_parser3 = require("@vuu-ui/vuu-filter-parser");
-var import_vuu_utils96 = require("@vuu-ui/vuu-utils");
-var import_react247 = require("react");
+var import_vuu_utils97 = require("@vuu-ui/vuu-utils");
+var import_react248 = require("react");
 var addRowsFromInstruments = "addRowsFromInstruments";
-var { KEY: KEY3 } = import_vuu_utils96.metadataKeys;
+var { KEY: KEY3 } = import_vuu_utils97.metadataKeys;
 var NO_CONFIG = {};
 var isMenuItem = (menu) => "rpcName" in menu;
 var isGroupMenuItem = (menu) => "menus" in menu;
@@ -59491,7 +59523,7 @@ var getMenuItemOptions = (menu, options) => {
     case "row":
       return {
         ...menu,
-        row: (0, import_vuu_utils96.getRowRecord)(options.row, options.columnMap),
+        row: (0, import_vuu_utils97.getRowRecord)(options.row, options.columnMap),
         rowKey: options.row[KEY3]
       };
     default:
@@ -59555,7 +59587,7 @@ var useVuuMenuActions = ({
   menuActionConfig = NO_CONFIG,
   onRpcResponse
 }) => {
-  const buildViewserverMenuOptions = (0, import_react247.useCallback)(
+  const buildViewserverMenuOptions = (0, import_react248.useCallback)(
     (location, options) => {
       const { links, menu } = dataSource;
       const { visualLink } = menuActionConfig;
@@ -59577,7 +59609,7 @@ var useVuuMenuActions = ({
           location,
           options
         );
-        if (isRoot2(menu) && (0, import_vuu_utils96.isGroupMenuItemDescriptor)(menuDescriptor)) {
+        if (isRoot2(menu) && (0, import_vuu_utils97.isGroupMenuItemDescriptor)(menuDescriptor)) {
           descriptors.push(...menuDescriptor.children);
         } else if (menuDescriptor) {
           descriptors.push(menuDescriptor);
@@ -59587,7 +59619,7 @@ var useVuuMenuActions = ({
     },
     [dataSource, menuActionConfig]
   );
-  const handleMenuAction = (0, import_react247.useCallback)(
+  const handleMenuAction = (0, import_react248.useCallback)(
     ({ menuId, options }) => {
       if (clientSideMenuActionHandler == null ? void 0 : clientSideMenuActionHandler(menuId, options)) {
         return true;
@@ -59618,17 +59650,17 @@ var useVuuMenuActions = ({
 
 // src/hooks/useVuuTables.ts
 var import_vuu_data10 = require("@vuu-ui/vuu-data");
-var import_react248 = require("react");
+var import_react249 = require("react");
 var useVuuTables = () => {
-  const [tables, setTables] = (0, import_react248.useState)();
-  const buildTables = (0, import_react248.useCallback)((schemas) => {
+  const [tables, setTables] = (0, import_react249.useState)();
+  const buildTables = (0, import_react249.useCallback)((schemas) => {
     const vuuTables = /* @__PURE__ */ new Map();
     schemas.forEach((schema) => {
       vuuTables.set(schema.table.table, schema);
     });
     return vuuTables;
   }, []);
-  (0, import_react248.useEffect)(() => {
+  (0, import_react249.useEffect)(() => {
     async function fetchTableMetadata() {
       console.log("GET TABLE LIST");
       const server = await (0, import_vuu_data10.getServerAPI)();