@vuu-ui/vuu-filters 0.8.10-debug → 0.8.11-debug

package/esm/index.js

@@ -199,14 +199,14 @@ var isDrawer = (component) => component.type === Drawer_default;
 var isVertical = ({ props: { position = "left" } }) => position.match(/top|bottom/);
 var DockLayout = (props) => {
   const { children, className: classNameProp, id, style } = props;
-  const classBase19 = "vuuDockLayout";
+  const classBase20 = "vuuDockLayout";
   const [drawers, content] = partition(children, isDrawer);
   const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);
   const orientation = verticalDrawers.length === 0 ? "horizontal" : horizontalDrawers.length === 0 ? "vertical" : "both";
-  const className = (0, import_classnames2.default)(classBase19, classNameProp, `${classBase19}-${orientation}`);
+  const className = (0, import_classnames2.default)(classBase20, classNameProp, `${classBase20}-${orientation}`);
   return /* @__PURE__ */ jsxs2("div", { className, id, style, children: [
     drawers,
-    /* @__PURE__ */ jsx2("div", { className: `${classBase19}-content`, children: content })
+    /* @__PURE__ */ jsx2("div", { className: `${classBase20}-content`, children: content })
   ] });
 };
 DockLayout.displayName = "DockLayout";
@@ -228,9 +228,9 @@ import React2, { isValidElement } from "react";
 // ../vuu-layout/src/utils/propUtils.ts
 var NO_PROPS = {};
 var getProp = (component, propName) => {
-  var _a;
+  var _a2;
   const props = getProps(component);
-  return (_a = props[propName]) != null ? _a : props[`data-${propName}`];
+  return (_a2 = props[propName]) != null ? _a2 : props[`data-${propName}`];
 };
 var getProps = (component) => (component == null ? void 0 : component.props) || component || NO_PROPS;
 
@@ -531,8 +531,8 @@ var DropTargetCanvas = class {
       dragState
     );
     if (targetDropOutline) {
-      const { l, t, r, b, tabLeft, tabWidth, tabHeight, guideLines } = targetDropOutline;
-      const w = r - l;
+      const { l, t, r: r2, b, tabLeft, tabWidth, tabHeight, guideLines } = targetDropOutline;
+      const w = r2 - l;
       const h = b - t;
       if (this.currentPath) {
         const path2 = document.getElementById("vuu-drop-outline");
@@ -554,7 +554,7 @@ var DropTargetCanvas = class {
 var cssShiftRight = "transition:margin-left .4s ease-out;margin-left: 63px";
 var cssShiftBack = "transition:margin-left .4s ease-out;margin-left: 0px";
 function moveExistingTabs(dropTarget) {
-  var _a, _b;
+  var _a2, _b;
   const { AFTER, BEFORE } = RelativeDropPosition;
   const {
     clientRect: { Stack: Stack4 },
@@ -568,7 +568,7 @@ function moveExistingTabs(dropTarget) {
   if (Stack4 && tab && tab.positionRelativeToTab !== AFTER) {
     const tabOffset = tab.positionRelativeToTab === BEFORE ? 1 : 2;
     const selector = `:scope .hwTabstrip > .hwTabstrip-inner > .hwTab:nth-child(${tab.index + tabOffset})`;
-    tabEl = (_a = document.getElementById(id)) == null ? void 0 : _a.querySelector(selector);
+    tabEl = (_a2 = document.getElementById(id)) == null ? void 0 : _a2.querySelector(selector);
     if (tabEl) {
       if (_shiftedTab === null || _shiftedTab !== tabEl) {
         tabEl.style.cssText = cssShiftRight;
@@ -725,12 +725,12 @@ var Splitter = React3.memo(function Splitter2({
     [column, index, onDrag]
   );
   const handleMouseUp = useCallback2(() => {
-    var _a;
+    var _a2;
     window.removeEventListener("mousemove", handleMouseMove, false);
     window.removeEventListener("mouseup", handleMouseUp, false);
     onDragEnd();
     setActive(false);
-    (_a = rootRef.current) == null ? void 0 : _a.focus();
+    (_a2 = rootRef.current) == null ? void 0 : _a2.focus();
   }, [handleMouseMove, onDragEnd, setActive]);
   const handleMouseDown = useCallback2(
     (e) => {
@@ -744,11 +744,11 @@ var Splitter = React3.memo(function Splitter2({
     [column, handleMouseMove, handleMouseUp, index, onDragStart, setActive]
   );
   const handleClick = () => {
-    var _a;
+    var _a2;
     if (ignoreClick.current) {
       ignoreClick.current = false;
     } else {
-      (_a = rootRef.current) == null ? void 0 : _a.focus();
+      (_a2 = rootRef.current) == null ? void 0 : _a2.focus();
     }
   };
   const handleBlur = () => {
@@ -823,9 +823,9 @@ var getBreakPointValues = (breakPoints2, component) => {
 };
 var gatherChildMeta = (children, dimension3, breakPoints2) => {
   return children.map((child, index) => {
-    var _a;
+    var _a2;
     const resizeable = getProp(child, "resizeable");
-    const { [dimension3]: intrinsicSize } = (_a = getIntrinsicSize(child)) != null ? _a : NO_INTRINSIC_SIZE;
+    const { [dimension3]: intrinsicSize } = (_a2 = getIntrinsicSize(child)) != null ? _a2 : NO_INTRINSIC_SIZE;
     const flexOpen = hasUnboundedFlexStyle(child);
     if (breakPoints2) {
       return {
@@ -940,8 +940,8 @@ var useSplitterResizing = ({
         );
         if (participants) {
           participants.forEach((index2) => {
-            var _a;
-            const el = (_a = rootRef.current) == null ? void 0 : _a.childNodes[index2];
+            var _a2;
+            const el = (_a2 = rootRef.current) == null ? void 0 : _a2.childNodes[index2];
             if (el) {
               const { size, minSize } = measureElement(el, dimension3);
               contentMeta[index2].currentSize = size;
@@ -950,8 +950,8 @@ var useSplitterResizing = ({
           });
           if (bystanders) {
             bystanders.forEach((index2) => {
-              var _a;
-              const el = (_a = rootRef.current) == null ? void 0 : _a.childNodes[index2];
+              var _a2;
+              const el = (_a2 = rootRef.current) == null ? void 0 : _a2.childNodes[index2];
               if (el) {
                 const { [dimension3]: size } = el.getBoundingClientRect();
                 contentMeta[index2].flexBasis = size;
@@ -1749,10 +1749,10 @@ import {
   useState as useState5
 } from "react";
 var useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
-  var _a;
+  var _a2;
   const { loadSessionState, purgeSessionState, purgeState, saveSessionState } = usePersistentState();
   const [contributions, setContributions] = useState5(
-    (_a = loadSessionState(id, "contributions")) != null ? _a : []
+    (_a2 = loadSessionState(id, "contributions")) != null ? _a2 : []
   );
   const dispatchLayoutAction = useLayoutProviderDispatch();
   const updateContributions = useCallback11(
@@ -1787,9 +1787,9 @@ var useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
   ]);
   const handleMouseDown = useCallback11(
     async (evt, index, preDragActivity) => {
-      var _a2;
+      var _a3;
       evt.stopPropagation();
-      const dragRect = (_a2 = root.current) == null ? void 0 : _a2.getBoundingClientRect();
+      const dragRect = (_a3 = root.current) == null ? void 0 : _a3.getBoundingClientRect();
       return new Promise((resolve, reject) => {
         dispatchLayoutAction({
           type: "drag-start",
@@ -1807,13 +1807,13 @@ var useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
   );
   const dispatchAction = useCallback11(
     async (action, evt) => {
-      var _a2;
+      var _a3;
       const { type } = action;
       switch (type) {
         case "maximize":
         case "minimize":
         case "restore":
-          return dispatchLayoutAction({ type, path: (_a2 = action.path) != null ? _a2 : viewPath });
+          return dispatchLayoutAction({ type, path: (_a3 = action.path) != null ? _a3 : viewPath });
         case "remove":
           return handleRemove();
         case "mousedown":
@@ -1875,8 +1875,8 @@ var useView = ({
   );
   const title = useMemo5(
     () => {
-      var _a;
-      return (_a = loadState("view-title")) != null ? _a : titleProp;
+      var _a2;
+      return (_a2 = loadState("view-title")) != null ? _a2 : titleProp;
     },
     [loadState, titleProp]
   );
@@ -1979,9 +1979,9 @@ import React13, { useContext as useContext2 } from "react";
 var NO_CONTEXT = { dispatch: null };
 var ViewContext = React13.createContext(NO_CONTEXT);
 var useViewDispatch = () => {
-  var _a;
+  var _a2;
   const context = useContext2(ViewContext);
-  return (_a = context == null ? void 0 : context.dispatch) != null ? _a : null;
+  return (_a2 = context == null ? void 0 : context.dispatch) != null ? _a2 : null;
 };
 
 // ../vuu-layout/src/layout-view/View.tsx
@@ -2142,8 +2142,8 @@ var Header = ({
   const viewDispatch = useViewDispatch();
   const handleClose = (evt) => viewDispatch == null ? void 0 : viewDispatch({ type: "remove" }, evt);
   const handleTitleMouseDown = () => {
-    var _a;
-    (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
+    var _a2;
+    (_a2 = labelFieldRef.current) == null ? void 0 : _a2.focus();
   };
   const handleButtonMouseDown = (evt) => {
     evt.stopPropagation();
@@ -2163,7 +2163,7 @@ var Header = ({
     }
   };
   const handleExitEditMode = (originalValue = "", finalValue = "", allowDeactivation = true, editCancelled = false) => {
-    var _a;
+    var _a2;
     setEditing(false);
     if (editCancelled) {
       setValue(originalValue);
@@ -2172,7 +2172,7 @@ var Header = ({
       onEditTitle == null ? void 0 : onEditTitle(finalValue);
     }
     if (allowDeactivation === false) {
-      (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
+      (_a2 = labelFieldRef.current) == null ? void 0 : _a2.focus();
     }
   };
   const handleMouseDown = (e) => {
@@ -2239,21 +2239,815 @@ var Header = ({
   );
 };
 
-// ../vuu-layout/src/measured-container/MeasuredContainer.tsx
+// ../vuu-layout/src/layout-persistence/data.ts
+var defaultLayout = {
+  type: "Stack",
+  id: "main-tabs",
+  props: {
+    className: "vuuShell-mainTabs",
+    TabstripProps: {
+      allowAddTab: true,
+      allowRenameTab: true,
+      animateSelectionThumb: false,
+      location: "main-tab",
+      allowCloseTab: true
+    },
+    preserve: true,
+    active: 0
+  },
+  children: [
+    {
+      props: {
+        id: "tab1",
+        className: "vuuShell-Placeholder"
+      },
+      type: "Placeholder"
+    }
+  ]
+};
+
+// ../vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts
+import { getUniqueId as getUniqueId3 } from "@vuu-ui/vuu-utils";
+var metadataSaveLocation = "layouts/metadata";
+var layoutsSaveLocation = "layouts/layouts";
+var LocalLayoutPersistenceManager = class {
+  createLayout(metadata, layout) {
+    return new Promise((resolve) => {
+      console.log(
+        `Saving layout as ${metadata.name} to group ${metadata.group}...`
+      );
+      Promise.all([this.loadLayouts(), this.loadMetadata()]).then(
+        ([existingLayouts, existingMetadata]) => {
+          const id = getUniqueId3();
+          this.appendAndPersist(
+            id,
+            metadata,
+            layout,
+            existingLayouts,
+            existingMetadata
+          );
+          resolve(id);
+        }
+      );
+    });
+  }
+  updateLayout(id, newMetadata, newLayout) {
+    return new Promise((resolve, reject) => {
+      this.validateIds(id).then(() => Promise.all([this.loadLayouts(), this.loadMetadata()])).then(([existingLayouts, existingMetadata]) => {
+        const layouts = existingLayouts.filter((layout) => layout.id !== id);
+        const metadata = existingMetadata.filter(
+          (metadata2) => metadata2.id !== id
+        );
+        this.appendAndPersist(id, newMetadata, newLayout, layouts, metadata);
+        resolve();
+      }).catch((e) => reject(e));
+    });
+  }
+  deleteLayout(id) {
+    return new Promise((resolve, reject) => {
+      this.validateIds(id).then(() => Promise.all([this.loadLayouts(), this.loadMetadata()])).then(([existingLayouts, existingMetadata]) => {
+        const layouts = existingLayouts.filter((layout) => layout.id !== id);
+        const metadata = existingMetadata.filter(
+          (metadata2) => metadata2.id !== id
+        );
+        this.saveLayoutsWithMetadata(layouts, metadata);
+        resolve();
+      }).catch((e) => reject(e));
+    });
+  }
+  loadLayout(id) {
+    return new Promise((resolve, reject) => {
+      this.validateId(id, "layout").then(() => this.loadLayouts()).then((existingLayouts) => {
+        const layouts = existingLayouts.find(
+          (layout) => layout.id === id
+        );
+        resolve(layouts.json);
+      }).catch((e) => reject(e));
+    });
+  }
+  loadMetadata() {
+    return new Promise((resolve) => {
+      const metadata = getLocalEntity(metadataSaveLocation);
+      resolve(metadata || []);
+    });
+  }
+  loadApplicationLayout() {
+    return new Promise((resolve) => {
+      const applicationLayout = getLocalEntity("api/vui");
+      if (applicationLayout) {
+        resolve(applicationLayout);
+      } else {
+        resolve(defaultLayout);
+      }
+    });
+  }
+  saveApplicationLayout(layout) {
+    return new Promise((resolve, reject) => {
+      const savedLayout = saveLocalEntity("api/vui", layout);
+      if (savedLayout) {
+        resolve();
+      } else {
+        reject(new Error("Layout failed to save"));
+      }
+    });
+  }
+  loadLayouts() {
+    return new Promise((resolve) => {
+      const layouts = getLocalEntity(layoutsSaveLocation);
+      resolve(layouts || []);
+    });
+  }
+  appendAndPersist(newId, newMetadata, newLayout, existingLayouts, existingMetadata) {
+    existingLayouts.push({ id: newId, json: newLayout });
+    existingMetadata.push({ id: newId, ...newMetadata });
+    this.saveLayoutsWithMetadata(existingLayouts, existingMetadata);
+  }
+  saveLayoutsWithMetadata(layouts, metadata) {
+    saveLocalEntity(layoutsSaveLocation, layouts);
+    saveLocalEntity(metadataSaveLocation, metadata);
+  }
+  // Ensures that there is exactly one Layout entry and exactly one Metadata
+  // entry in local storage corresponding to the provided ID.
+  async validateIds(id) {
+    return Promise.all([
+      this.validateId(id, "metadata").catch((error2) => error2.message),
+      this.validateId(id, "layout").catch((error2) => error2.message)
+    ]).then((errorMessages) => {
+      const combinedMessage = errorMessages.filter((msg) => msg !== void 0).join("; ");
+      if (combinedMessage) {
+        throw new Error(combinedMessage);
+      }
+    });
+  }
+  // Ensures that there is exactly one element (Layout or Metadata) in local
+  // storage corresponding to the provided ID.
+  validateId(id, dataType) {
+    return new Promise((resolve, reject) => {
+      const loadFunc = dataType === "metadata" ? this.loadMetadata : this.loadLayouts;
+      loadFunc().then((array) => {
+        const count = array.filter((element) => element.id === id).length;
+        switch (count) {
+          case 1: {
+            resolve();
+            break;
+          }
+          case 0: {
+            reject(new Error(`No ${dataType} with ID ${id}`));
+            break;
+          }
+          default:
+            reject(new Error(`Non-unique ${dataType} with ID ${id}`));
+        }
+      });
+    });
+  }
+};
+
+// ../vuu-shell/src/connection-status/ConnectionStatusIcon.tsx
+var import_classnames11 = __toESM(require_classnames());
+import React15, { useEffect as useEffect3, useState as useState8 } from "react";
+import { Fragment, jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
+
+// ../vuu-shell/src/density-switch/DensitySwitch.tsx
+var import_classnames12 = __toESM(require_classnames());
+import { Dropdown } from "@salt-ds/lab";
+import { useCallback as useCallback15 } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+
+// ../vuu-shell/src/feature/Feature.tsx
+import React17, { Suspense, useEffect as useEffect4 } from "react";
+
+// ../vuu-shell/src/feature/FeatureErrorBoundary.tsx
+import React16 from "react";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+var FeatureErrorBoundary = class extends React16.Component {
+  constructor(props) {
+    super(props);
+    this.state = { errorMessage: null };
+  }
+  static getDerivedStateFromError(error2) {
+    return { errorMessage: error2.message };
+  }
+  componentDidCatch(error2, errorInfo) {
+    console.log(`error creating component at ${this.props.url}`);
+    console.log(error2, errorInfo);
+  }
+  render() {
+    if (this.state.errorMessage) {
+      return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        /* @__PURE__ */ jsx18("h1", { children: "An error occured while creating component." }),
+        /* @__PURE__ */ jsx18("p", { children: this.state.errorMessage })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+
+// ../vuu-shell/src/feature/Loader.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Loader = () => /* @__PURE__ */ jsx19("div", { className: "hwLoader", children: "loading" });
+
+// ../vuu-shell/src/feature/css-module-loader.ts
+var importCSS = async (path) => {
+  const container = new CSSStyleSheet();
+  return fetch(path).then((x) => x.text()).then((x) => container.replace(x));
+};
+
+// ../vuu-shell/src/feature/Feature.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var componentsMap = /* @__PURE__ */ new Map();
+var useCachedFeature = (url) => {
+  useEffect4(
+    () => () => {
+      componentsMap.delete(url);
+    },
+    [url]
+  );
+  if (!componentsMap.has(url)) {
+    componentsMap.set(
+      url,
+      React17.lazy(() => import(
+        /* @vite-ignore */
+        url
+      ))
+    );
+  }
+  const lazyFeature = componentsMap.get(url);
+  if (!lazyFeature) {
+    throw Error(`Unable to load Lazy Feature at url ${url}`);
+  } else {
+    return lazyFeature;
+  }
+};
+function RawFeature({
+  url,
+  css,
+  ComponentProps: params,
+  ...props
+}) {
+  if (css) {
+    importCSS(css).then((styleSheet) => {
+      document.adoptedStyleSheets = [
+        ...document.adoptedStyleSheets,
+        styleSheet
+      ];
+    });
+  }
+  const LazyFeature = useCachedFeature(url);
+  return /* @__PURE__ */ jsx20(FeatureErrorBoundary, { url, children: /* @__PURE__ */ jsx20(Suspense, { fallback: /* @__PURE__ */ jsx20(Loader, {}), children: /* @__PURE__ */ jsx20(LazyFeature, { ...props, ...params }) }) });
+}
+var Feature = React17.memo(RawFeature);
+Feature.displayName = "Feature";
+registerComponent("Feature", Feature, "view");
+
+// ../vuu-shell/src/layout-management/SaveLayoutPanel.tsx
+import { useEffect as useEffect5, useState as useState9 } from "react";
+import { Input, Button as Button3, FormField, FormFieldLabel, Text } from "@salt-ds/core";
+import { ComboBox, Checkbox, RadioButton } from "@vuu-ui/vuu-ui-controls";
+import { formatDate, takeScreenshot } from "@vuu-ui/vuu-utils";
+import { jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
+var classBase9 = "saveLayoutPanel";
+var formField = `${classBase9}-formField`;
+
+// ../vuu-shell/src/layout-management/LayoutList.tsx
+import { List } from "@vuu-ui/vuu-ui-controls";
+
+// ../vuu-shell/src/layout-management/useLayoutManager.tsx
+import React18, { useState as useState10, useCallback as useCallback16, useContext as useContext3, useEffect as useEffect6 } from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var persistenceManager = new LocalLayoutPersistenceManager();
+var LayoutManagementContext = React18.createContext({
+  layoutMetadata: [],
+  saveLayout: () => {
+  },
+  applicationLayout: defaultLayout,
+  saveApplicationLayout: () => {
+  },
+  loadLayoutById: () => defaultLayout
+});
+
+// ../vuu-shell/src/layout-management/LayoutList.tsx
+import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// ../vuu-icons/src/VuuLogo.tsx
+import { memo } from "react";
+import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
+var VuuLogo = memo(() => {
+  return /* @__PURE__ */ jsxs8(
+    "svg",
+    {
+      width: "44",
+      height: "45",
+      viewBox: "0 0 44 45",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxs8("g", { clipPath: "url(#clip0_217_6990)", children: [
+          /* @__PURE__ */ jsx24(
+            "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__ */ jsx24(
+            "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__ */ jsx24(
+            "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__ */ jsxs8("g", { opacity: "0.86", children: [
+            /* @__PURE__ */ jsx24(
+              "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__ */ jsx24(
+              "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__ */ jsx24(
+              "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",
+                fill: "white"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs8("defs", { children: [
+          /* @__PURE__ */ jsxs8(
+            "linearGradient",
+            {
+              id: "paint0_linear_217_6990",
+              x1: "24.6235",
+              y1: "18.7363",
+              x2: "42.3152",
+              y2: "18.7363",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ jsx24("stop", { stopColor: "#4906A5" }),
+                /* @__PURE__ */ jsx24("stop", { offset: "1", stopColor: "#D3423A" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs8(
+            "linearGradient",
+            {
+              id: "paint1_linear_217_6990",
+              x1: "-2.35794e-05",
+              y1: "22.5009",
+              x2: "42.7186",
+              y2: "22.5009",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ jsx24("stop", { stopColor: "#7C06A5" }),
+                /* @__PURE__ */ jsx24("stop", { offset: "1", stopColor: "#D3423A" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx24("clipPath", { id: "clip0_217_6990", children: /* @__PURE__ */ jsx24("rect", { width: "44", height: "45", fill: "white" }) })
+        ] })
+      ]
+    }
+  );
+});
+VuuLogo.displayName = "VuuLogo";
+
+// ../vuu-shell/src/left-nav/LeftNav.tsx
+var import_classnames14 = __toESM(require_classnames());
+import { Tab, Tabstrip } from "@vuu-ui/vuu-ui-controls";
+import { useCallback as useCallback17, useState as useState11 } from "react";
+
+// ../vuu-shell/src/feature-list/FeatureList.tsx
+import { jsx as jsx25, jsxs as jsxs9 } from "react/jsx-runtime";
+
+// ../vuu-shell/src/theme-provider/ThemeProvider.tsx
+var import_classnames13 = __toESM(require_classnames());
+import {
+  createContext as createContext2,
+  isValidElement as isValidElement4,
+  cloneElement as cloneElement5,
+  useContext as useContext4
+} from "react";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var DEFAULT_DENSITY = "medium";
+var DEFAULT_THEME = "salt-theme";
+var DEFAULT_THEME_MODE = "light";
+var ThemeContext = createContext2({
+  density: "high",
+  theme: "vuu",
+  themeMode: "light"
+});
+var createThemedChildren = (children, theme, themeMode, density) => {
+  var _a2;
+  if (isValidElement4(children)) {
+    return cloneElement5(children, {
+      className: (0, import_classnames13.default)(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        (_a2 = children.props) == null ? void 0 : _a2.className,
+        `${theme}-theme`,
+        `${theme}-density-${density}`
+      ),
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      "data-mode": themeMode
+    });
+  } else {
+    console.warn(
+      `
+ThemeProvider can only apply CSS classes for theming to a single nested child element of the ThemeProvider.
+          Wrap elements with a single container`
+    );
+    return children;
+  }
+};
+var ThemeProvider = ({
+  applyThemeClasses = false,
+  children,
+  theme: themeProp,
+  themeMode: themeModeProp,
+  density: densityProp
+}) => {
+  var _a2, _b, _c;
+  const {
+    density: inheritedDensity,
+    themeMode: inheritedThemeMode,
+    theme: inheritedTheme
+  } = useContext4(ThemeContext);
+  const density = (_a2 = densityProp != null ? densityProp : inheritedDensity) != null ? _a2 : DEFAULT_DENSITY;
+  const themeMode = (_b = themeModeProp != null ? themeModeProp : inheritedThemeMode) != null ? _b : DEFAULT_THEME_MODE;
+  const theme = (_c = themeProp != null ? themeProp : inheritedTheme) != null ? _c : DEFAULT_THEME;
+  const themedChildren = applyThemeClasses ? createThemedChildren(children, theme, themeMode, density) : children;
+  return /* @__PURE__ */ jsx26(ThemeContext.Provider, { value: { themeMode, density, theme }, children: themedChildren });
+};
+ThemeProvider.displayName = "ThemeProvider";
+
+// ../vuu-shell/src/left-nav/LeftNav.tsx
+import { jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
+
+// ../vuu-shell/src/login/LoginPanel.tsx
+import { useState as useState12 } from "react";
+import { Button as Button4, FormField as FormField2, FormFieldLabel as FormFieldLabel2, Input as Input2 } from "@salt-ds/core";
+import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
+
+// ../vuu-shell/src/login/login-utils.ts
+import { getCookieValue } from "@vuu-ui/vuu-utils";
+var getAuthModeFromCookies = () => {
+  const mode = getCookieValue("vuu-auth-mode");
+  return mode != null ? mode : "";
+};
+var getDefaultLoginUrl = () => {
+  const authMode = getAuthModeFromCookies();
+  return authMode === "login" ? "login.html" : "demo.html";
+};
+var redirectToLogin = (loginUrl = getDefaultLoginUrl()) => {
+  window.location.href = loginUrl;
+};
+var logout = (loginUrl) => {
+  document.cookie = "vuu-username= ; expires = Thu, 01 Jan 1970 00:00:00 GMT";
+  document.cookie = "vuu-auth-token= ; expires = Thu, 01 Jan 1970 00:00:00 GMT";
+  redirectToLogin(loginUrl);
+};
+
+// ../vuu-shell/src/session-editing-form/SessionEditingForm.tsx
+var import_classnames15 = __toESM(require_classnames());
+import {
+  useCallback as useCallback18,
+  useEffect as useEffect7,
+  useMemo as useMemo7,
+  useRef as useRef12,
+  useState as useState13
+} from "react";
+import { useIdMemo } from "@salt-ds/core";
+import { Button as Button5 } from "@salt-ds/core";
+import {
+  hasAction,
+  isErrorResponse,
+  RemoteDataSource
+} from "@vuu-ui/vuu-data";
+import {
+  buildColumnMap,
+  isValidNumber,
+  shallowEquals
+} from "@vuu-ui/vuu-utils";
+import { jsx as jsx29, jsxs as jsxs12 } from "react/jsx-runtime";
+
+// ../vuu-shell/src/shell.tsx
+var import_classnames19 = __toESM(require_classnames());
+import { connectToServer } from "@vuu-ui/vuu-data";
+import {
+  useCallback as useCallback24,
+  useEffect as useEffect9,
+  useRef as useRef14
+} from "react";
+
+// ../vuu-shell/src/app-header/AppHeader.tsx
+import { useCallback as useCallback21 } from "react";
+
+// ../vuu-shell/src/user-profile/UserProfile.tsx
+import { Button as Button7 } from "@salt-ds/core";
+import { DropdownBase } from "@salt-ds/lab";
+
+// ../../node_modules/@salt-ds/icons/dist-es/icon/Icon.js
+import { jsx as jsx32 } from "react/jsx-runtime";
 import { forwardRef as forwardRef6 } from "react";
 
+// ../../node_modules/@salt-ds/icons/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e)
+    n += e;
+  else if ("object" == typeof e)
+    if (Array.isArray(e))
+      for (t = 0; t < e.length; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    else
+      for (t in e)
+        e[t] && (n && (n += " "), n += t);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = ""; f < arguments.length; )
+    (e = arguments[f++]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// ../../node_modules/@salt-ds/window/dist-es/WindowProvider.js
+import { jsx as jsx30 } from "react/jsx-runtime";
+import { createContext as createContext3, useContext as useContext5 } from "react";
+var WindowContext = createContext3(
+  typeof window !== "undefined" ? window : null
+);
+if (true) {
+  WindowContext.displayName = "WindowContext";
+}
+function useWindow() {
+  return useContext5(WindowContext);
+}
+
+// ../../node_modules/@salt-ds/styles/dist-es/use-style-injection/useStyleInjection.js
+import * as React20 from "react";
+
+// ../../node_modules/@salt-ds/styles/dist-es/use-style-injection/InsertionPointProvider.js
+import { jsx as jsx31 } from "react/jsx-runtime";
+import { createContext as createContext4, useMemo as useMemo8, useContext as useContext6 } from "react";
+var InsertionPointContext = createContext4(null);
+if (true) {
+  InsertionPointContext.displayName = "InsertionPointContext";
+}
+function useInsertionPoint() {
+  const value = useContext6(InsertionPointContext);
+  return value;
+}
+
+// ../../node_modules/@salt-ds/styles/dist-es/use-style-injection/useStyleInjection.js
+var _a;
+var maybeUseInsertionEffect = (_a = React20[`${"useInsertionEffect"}${""}`]) != null ? _a : React20.useLayoutEffect;
+var windowSheetsMap = /* @__PURE__ */ new WeakMap();
+function useComponentCssInjection({
+  testId,
+  css,
+  window: targetWindow
+}) {
+  const insertionPoint = useInsertionPoint();
+  maybeUseInsertionEffect(() => {
+    var _a2, _b;
+    if (!targetWindow) {
+      return;
+    }
+    const sheetsMap = (_a2 = windowSheetsMap.get(targetWindow)) != null ? _a2 : /* @__PURE__ */ new Map();
+    const styleMap = (_b = sheetsMap.get(css)) != null ? _b : { styleElement: null, count: 0 };
+    if (styleMap.styleElement == null) {
+      styleMap.styleElement = targetWindow.document.createElement("style");
+      styleMap.styleElement.setAttribute("type", "text/css");
+      styleMap.styleElement.setAttribute("data-salt-style", testId || "");
+      styleMap.styleElement.textContent = css;
+      styleMap.count = 1;
+      targetWindow.document.head.insertBefore(
+        styleMap.styleElement,
+        insertionPoint || targetWindow.document.head.firstChild
+      );
+    } else {
+      styleMap.styleElement.textContent = css;
+      styleMap.count++;
+    }
+    sheetsMap.set(css, styleMap);
+    windowSheetsMap.set(targetWindow, sheetsMap);
+    return () => {
+      const sheetsMap2 = windowSheetsMap.get(targetWindow);
+      const styleMap2 = sheetsMap2 == null ? void 0 : sheetsMap2.get(css);
+      if (styleMap2 == null ? void 0 : styleMap2.styleElement) {
+        styleMap2.count--;
+        if (styleMap2.count < 1) {
+          targetWindow.document.head.removeChild(styleMap2.styleElement);
+          styleMap2.styleElement = null;
+          sheetsMap2 == null ? void 0 : sheetsMap2.delete(css);
+        }
+      }
+    };
+  }, [testId, css, targetWindow]);
+}
+
+// ../../node_modules/@salt-ds/icons/dist-es/icon/Icon.css.js
+var css_248z = "/* Style applied to the root element */\n.saltIcon {\n  --icon-color: var(--saltIcon-color, var(--salt-text-secondary-foreground));\n  --icon-size-multiplier: var(--saltIcon-size-multiplier, 1);\n  --icon-base-size: var(--salt-icon-size-base, 12px);\n  /**\n   * Icon size will be the multiplier (an integer from the size prop) * the base size (set by the theme per density)\n   * Icons should never be smaller than 12px for readability so we've added a max() to enforce this\n   * Consumers can use --saltIcon-size variable to override this rule as an escape hatch\n  */\n  --icon-size: var(--saltIcon-size, max(calc(var(--icon-base-size) * var(--icon-size-multiplier)), 12px));\n}\n\n.saltIcon {\n  fill: var(--saltIcon-color, var(--icon-color));\n  display: inline-block;\n  margin: var(--saltIcon-margin, 0);\n  position: relative;\n  width: var(--icon-size);\n  height: var(--icon-size);\n  min-width: var(--icon-size);\n  min-height: var(--icon-size);\n}\n\n.saltIcon:hover {\n  --icon-color: var(--saltIcon-color-hover, var(--salt-text-secondary-foreground));\n}\n\n.saltIcon:active {\n  --icon-color: var(--saltIcon-color-active, var(--salt-text-secondary-foreground));\n}\n";
+
+// ../../node_modules/@salt-ds/icons/dist-es/icon/Icon.js
+var makePrefixer = (prefix) => (...names) => [prefix, ...names].join("-");
+var withBaseName = makePrefixer("saltIcon");
+var DEFAULT_ICON_SIZE = 1;
+var Icon = forwardRef6(function Icon2({ children, className, size = DEFAULT_ICON_SIZE, style: styleProp, ...rest }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-icon",
+    css: css_248z,
+    window: targetWindow
+  });
+  const style = {
+    ...styleProp,
+    "--saltIcon-size-multiplier": `${size}`
+  };
+  return /* @__PURE__ */ jsx32("svg", {
+    className: clsx(withBaseName(), className),
+    style,
+    role: "img",
+    ...rest,
+    ref,
+    children: /* @__PURE__ */ jsx32("g", {
+      "aria-hidden": true,
+      children
+    })
+  });
+});
+
+// ../../node_modules/@salt-ds/icons/dist-es/components/Export.js
+import { jsxs as jsxs13, jsx as jsx33 } from "react/jsx-runtime";
+import { forwardRef as forwardRef7 } from "react";
+var ExportIcon = forwardRef7(
+  function ExportIcon2(props, ref) {
+    return /* @__PURE__ */ jsxs13(Icon, {
+      "data-testid": "ExportIcon",
+      "aria-label": "export",
+      viewBox: "0 0 12 12",
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx33("path", {
+          d: "M5 1H1v10h4v-1H2V2h3V1Z"
+        }),
+        /* @__PURE__ */ jsx33("path", {
+          d: "M3 5h5V3l4 3-4 3V7H3V5Z"
+        })
+      ]
+    });
+  }
+);
+
+// ../vuu-shell/src/user-profile/UserPanel.tsx
+import { formatDate as formatDate2 } from "@vuu-ui/vuu-utils";
+import { List as List2, ListItem } from "@salt-ds/lab";
+import { Button as Button6 } from "@salt-ds/core";
+import {
+  forwardRef as forwardRef8,
+  useCallback as useCallback19,
+  useEffect as useEffect8,
+  useState as useState14
+} from "react";
+
+// ../vuu-shell/src/get-layout-history.ts
+var getLayoutHistory = async (user) => {
+  const history = await fetch(`api/vui/${user.username}`, {}).then((response) => {
+    return response.ok ? response.json() : null;
+  }).catch(() => {
+    console.log("error getting history");
+  });
+  return history;
+};
+
+// ../vuu-shell/src/user-profile/UserPanel.tsx
+import { jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
+var byLastUpdate = ({ lastUpdate: l1 }, { lastUpdate: l2 }) => {
+  return l2 === l1 ? 0 : l2 < l1 ? -1 : 1;
+};
+var HistoryListItem = (props) => {
+  return /* @__PURE__ */ jsx34(ListItem, { ...props });
+};
+var UserPanel = forwardRef8(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
+  const [history, setHistory] = useState14([]);
+  useEffect8(() => {
+    async function getHistory() {
+      const history2 = await getLayoutHistory(user);
+      const sortedHistory = history2.filter((item) => item.id !== "latest").sort(byLastUpdate).map(({ id, lastUpdate }) => ({
+        lastUpdate,
+        id,
+        label: `Saved at ${formatDate2(new Date(lastUpdate), "kk:mm:ss")}`
+      }));
+      console.log({ sortedHistory });
+      setHistory(sortedHistory);
+    }
+    getHistory();
+  }, [user]);
+  const handleHisorySelected = useCallback19(
+    (evt, selected2) => {
+      if (selected2) {
+        onNavigate(selected2.id);
+      }
+    },
+    [onNavigate]
+  );
+  const handleLogout = useCallback19(() => {
+    logout(loginUrl);
+  }, [loginUrl]);
+  const selected = history.length === 0 ? null : layoutId === "latest" ? history[0] : history.find((i) => i.id === layoutId);
+  return /* @__PURE__ */ jsxs14("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
+    /* @__PURE__ */ jsx34(
+      List2,
+      {
+        ListItem: HistoryListItem,
+        className: "vuuUserPanel-history",
+        onSelect: handleHisorySelected,
+        selected,
+        source: history
+      }
+    ),
+    /* @__PURE__ */ jsx34("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ jsxs14(Button6, { "aria-label": "logout", onClick: handleLogout, children: [
+      /* @__PURE__ */ jsx34(ExportIcon, {}),
+      " Logout"
+    ] }) })
+  ] });
+});
+
+// ../vuu-shell/src/user-profile/UserProfile.tsx
+import { jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
+
+// ../vuu-shell/src/theme-switch/ThemeSwitch.tsx
+var import_classnames16 = __toESM(require_classnames());
+import { ToggleButton, ToggleButtonGroup, useControlled as useControlled2 } from "@salt-ds/core";
+import { useCallback as useCallback20 } from "react";
+import { jsx as jsx36, jsxs as jsxs16 } from "react/jsx-runtime";
+
+// ../vuu-shell/src/app-header/AppHeader.tsx
+var import_classnames17 = __toESM(require_classnames());
+import { jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
+
+// ../vuu-shell/src/shell.tsx
+import { logger } from "@vuu-ui/vuu-utils";
+
+// ../vuu-shell/src/shell-layouts/context-panel/ContextPanel.tsx
+var import_classnames18 = __toESM(require_classnames());
+import { Button as Button8 } from "@salt-ds/core";
+import { useCallback as useCallback22, useMemo as useMemo9 } from "react";
+import { jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
+
+// ../vuu-shell/src/shell-layouts/useFullHeightLeftPanel.tsx
+import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
+
+// ../vuu-shell/src/shell-layouts/useInlayLeftPanel.tsx
+import { useCallback as useCallback23, useRef as useRef13, useState as useState15 } from "react";
+import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
+
+// ../vuu-shell/src/shell.tsx
+import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
+var { error } = logger("Shell");
+
+// ../vuu-shell/src/ShellContextProvider.tsx
+import { createContext as createContext5, useContext as useContext7 } from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var defaultConfig = {};
+var ShellContext = createContext5(defaultConfig);
+
+// ../vuu-layout/src/layout-persistence/useLayoutContextMenuItems.tsx
+import { useCallback as useCallback25, useMemo as useMemo10, useState as useState16 } from "react";
+import { jsx as jsx43 } from "react/jsx-runtime";
+
+// ../vuu-layout/src/measured-container/MeasuredContainer.tsx
+import { forwardRef as forwardRef9 } from "react";
+
 // ../vuu-layout/src/measured-container/useMeasuredContainer.ts
-import { isValidNumber } from "@vuu-ui/vuu-utils";
+import { isValidNumber as isValidNumber2 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback16,
-  useEffect as useEffect4,
-  useMemo as useMemo7,
-  useRef as useRef13,
-  useState as useState8
+  useCallback as useCallback27,
+  useEffect as useEffect11,
+  useMemo as useMemo11,
+  useRef as useRef16,
+  useState as useState17
 } from "react";
 
 // ../vuu-layout/src/measured-container/useResizeObserver.ts
-import { useCallback as useCallback15, useEffect as useEffect3, useRef as useRef12 } from "react";
+import { useCallback as useCallback26, useEffect as useEffect10, useRef as useRef15 } from "react";
 var observedMap2 = /* @__PURE__ */ new Map();
 var getTargetSize2 = (element, size, dimension3) => {
   switch (dimension3) {
@@ -2304,8 +3098,8 @@ var resizeObserver2 = new ResizeObserver((entries) => {
   }
 });
 function useResizeObserver2(ref, dimensions, onResize, reportInitialSize = false) {
-  const dimensionsRef = useRef12(dimensions);
-  const measure = useCallback15((target) => {
+  const dimensionsRef = useRef15(dimensions);
+  const measure = useCallback26((target) => {
     const { width, height } = target.getBoundingClientRect();
     const { clientWidth: contentWidth, clientHeight: contentHeight } = target;
     return dimensionsRef.current.reduce(
@@ -2320,7 +3114,7 @@ function useResizeObserver2(ref, dimensions, onResize, reportInitialSize = false
       {}
     );
   }, []);
-  useEffect3(() => {
+  useEffect10(() => {
     const target = ref.current;
     async function registerObserver() {
       observedMap2.set(target, { measurements: {} });
@@ -2357,7 +3151,7 @@ function useResizeObserver2(ref, dimensions, onResize, reportInitialSize = false
       }
     };
   }, [measure, ref]);
-  useEffect3(() => {
+  useEffect10(() => {
     const target = ref.current;
     const record = observedMap2.get(target);
     if (record) {
@@ -2379,7 +3173,7 @@ var NO_MEASUREMENT2 = [];
 var isNumber = (val) => Number.isFinite(val);
 var FULL_SIZE = { height: "100%", width: "100%" };
 var getInitialCssSize = (height, width) => {
-  if (isValidNumber(height) && isValidNumber(width)) {
+  if (isValidNumber2(height) && isValidNumber2(width)) {
     return {
       height: `${height}px`,
       width: `${width}px`
@@ -2394,7 +3188,7 @@ var getInitialCssSize = (height, width) => {
   }
 };
 var getInitialInnerSize = (height, width) => {
-  if (isValidNumber(height) && isValidNumber(width)) {
+  if (isValidNumber2(height) && isValidNumber2(width)) {
     return {
       height,
       width
@@ -2408,8 +3202,8 @@ var useMeasuredContainer = ({
   onResize: onResizeProp,
   width
 }) => {
-  const containerRef = useRef13(null);
-  const [size, setSize] = useState8({
+  const containerRef = useRef16(null);
+  const [size, setSize] = useState17({
     css: getInitialCssSize(height, width),
     inner: getInitialInnerSize(height, width),
     outer: {
@@ -2420,15 +3214,15 @@ var useMeasuredContainer = ({
   const fixedHeight = typeof height === "number";
   const fixedWidth = typeof width === "number";
   const dimensions = fixedHeight && fixedWidth ? NO_MEASUREMENT2 : fixedHeight ? WidthOnly : fixedWidth ? HeightOnly : ClientWidthHeight;
-  useMemo7(() => {
+  useMemo11(() => {
     setSize((currentSize) => {
       const { inner, outer } = currentSize;
-      if (isValidNumber(height) && isValidNumber(width) && inner && outer) {
+      if (isValidNumber2(height) && isValidNumber2(width) && inner && outer) {
         const { height: innerHeight, width: innerWidth } = inner;
         const { height: outerHeight, width: outerWidth } = outer;
         if (outerHeight !== height || outerWidth !== width) {
-          const heightDiff = isValidNumber(outerHeight) ? outerHeight - innerHeight : 0;
-          const widthDiff = isValidNumber(outerWidth) ? outerWidth - innerWidth : 0;
+          const heightDiff = isValidNumber2(outerHeight) ? outerHeight - innerHeight : 0;
+          const widthDiff = isValidNumber2(outerWidth) ? outerWidth - innerWidth : 0;
           return {
             ...currentSize,
             outer: { height, width },
@@ -2439,7 +3233,7 @@ var useMeasuredContainer = ({
       return currentSize;
     });
   }, [height, width]);
-  const onResize = useCallback16(
+  const onResize = useCallback27(
     ({ clientWidth, clientHeight }) => {
       const { css, inner, outer } = size;
       let newState = size;
@@ -2477,7 +3271,7 @@ var useMeasuredContainer = ({
     },
     [defaultHeight, defaultWidth, fixedHeight, fixedWidth, height, size, width]
   );
-  useEffect4(() => {
+  useEffect11(() => {
     if (size.inner) {
       onResizeProp == null ? void 0 : onResizeProp(size.inner);
     }
@@ -2492,11 +3286,11 @@ var useMeasuredContainer = ({
 };
 
 // ../vuu-layout/src/measured-container/MeasuredContainer.tsx
-var import_classnames11 = __toESM(require_classnames());
+var import_classnames20 = __toESM(require_classnames());
 import { useForkRef as useForkRef4 } from "@salt-ds/core";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var baseClass = "vuuMeasuredContainer";
-var MeasuredContainer = forwardRef6(function MeasuredContainer2({
+var MeasuredContainer = forwardRef9(function MeasuredContainer2({
   children,
   className,
   height,
@@ -2525,19 +3319,19 @@ var MeasuredContainer = forwardRef6(function MeasuredContainer2({
     };
   };
   const forkedRef = useForkRef4(containerRef, forwardedRef);
-  return unmeasured ? /* @__PURE__ */ jsx16(
+  return unmeasured ? /* @__PURE__ */ jsx44(
     "div",
     {
       ...htmlAttributes,
-      className: (0, import_classnames11.default)(baseClass, `${baseClass}-ummeasured`),
+      className: (0, import_classnames20.default)(baseClass, `${baseClass}-ummeasured`),
       style: getStyle2(),
       ref: containerRef
     }
-  ) : /* @__PURE__ */ jsx16(
+  ) : /* @__PURE__ */ jsx44(
     "div",
     {
       ...htmlAttributes,
-      className: (0, import_classnames11.default)(baseClass, className),
+      className: (0, import_classnames20.default)(baseClass, className),
       ref: forkedRef,
       style: getStyle2(),
       children
@@ -2547,15 +3341,15 @@ var MeasuredContainer = forwardRef6(function MeasuredContainer2({
 
 // ../vuu-layout/src/overflow-container/OverflowContainer.tsx
 import { PopupMenu } from "@vuu-ui/vuu-popups";
-var import_classnames12 = __toESM(require_classnames());
-import React15, {
-  forwardRef as forwardRef7
+var import_classnames21 = __toESM(require_classnames());
+import React21, {
+  forwardRef as forwardRef10
 } from "react";
 
 // ../vuu-layout/src/overflow-container/useOverflowContainer.ts
 import { useDragDropNext as useDragDrop } from "@vuu-ui/vuu-ui-controls";
-import { isValidNumber as isValidNumber2, MEASURES } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback17, useMemo as useMemo8, useRef as useRef14, useState as useState9 } from "react";
+import { isValidNumber as isValidNumber3, MEASURES } from "@vuu-ui/vuu-utils";
+import { useCallback as useCallback28, useMemo as useMemo12, useRef as useRef17, useState as useState18 } from "react";
 
 // ../vuu-layout/src/overflow-container/overflow-utils.ts
 import { getElementByDataIndex } from "@vuu-ui/vuu-utils";
@@ -2641,8 +3435,8 @@ var applyOverflowClassToWrappedItems = (container, overflowedItems) => {
 var maxPriority = (priority, { overflowPriority }) => Math.max(priority, parseInt(overflowPriority));
 var minPriority = (priority, { overflowPriority }) => Math.min(priority, parseInt(overflowPriority));
 var overflowIndicatorHasWrappedButShouldNotHave = (wrappedItems) => {
-  var _a;
-  return wrappedItems.length > 1 && ((_a = wrappedItems.at(-1)) == null ? void 0 : _a.index) === "overflow";
+  var _a2;
+  return wrappedItems.length > 1 && ((_a2 = wrappedItems.at(-1)) == null ? void 0 : _a2.index) === "overflow";
 };
 var getHighestPriorityItem = (overflowItems) => {
   let [highestPriorityItem] = overflowItems;
@@ -2655,7 +3449,7 @@ var getHighestPriorityItem = (overflowItems) => {
   return highestPriorityItem;
 };
 var highPriorityItemsHaveWrappedButShouldNotHave = (nonWrappedItems, wrappedItems) => {
-  var _a;
+  var _a2;
   const minNonwrappedPriority = nonWrappedItems.reduce(
     minPriority,
     Number.MAX_SAFE_INTEGER
@@ -2664,7 +3458,7 @@ var highPriorityItemsHaveWrappedButShouldNotHave = (nonWrappedItems, wrappedItem
   if (maxwrappedPriority > minNonwrappedPriority) {
     return true;
   } else {
-    return wrappedItems.length > 1 && ((_a = wrappedItems.at(-1)) == null ? void 0 : _a.index) === "overflow";
+    return wrappedItems.length > 1 && ((_a2 = wrappedItems.at(-1)) == null ? void 0 : _a2.index) === "overflow";
   }
 };
 var correctForWrappedOverflowIndicator = (container, overflowedItems) => new Promise((resolve) => {
@@ -2815,10 +3609,16 @@ var useOverflowContainer = ({
   onSwitchWrappedItemIntoView,
   orientation = "horizontal"
 }) => {
-  const [container, setContainer] = useState9(null);
-  const wrappedItemsRef = useRef14(NO_WRAPPED_ITEMS);
-  const containerRef = useRef14(null);
-  const handleResize = useCallback17(async () => {
+  const [container, setContainer] = useState18(null);
+  const wrappedItemsRef = useRef17(NO_WRAPPED_ITEMS);
+  const containerRef = useRef17(null);
+  const setOverflowTabIndex = useCallback28((tabIndex) => {
+    var _a2;
+    if (containerRef.current) {
+      (_a2 = containerRef.current.querySelector(".vuuOverflowContainer-OverflowIndicator button")) == null ? void 0 : _a2.setAttribute("tabindex", tabIndex);
+    }
+  }, []);
+  const handleResize = useCallback28(async () => {
     if (container) {
       let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(
         container,
@@ -2840,11 +3640,16 @@ var useOverflowContainer = ({
           wrapped = NO_WRAPPED_ITEMS;
         }
       }
+      if (wrappedItemsRef.current.length === 0 && wrapped.length > 0) {
+        setOverflowTabIndex("0");
+      } else if (wrappedItemsRef.current.length > 0 && wrapped.length === 0) {
+        setOverflowTabIndex("-1");
+      }
       wrappedItemsRef.current = wrapped;
     }
-  }, [container, orientation]);
+  }, [container, orientation, setOverflowTabIndex]);
   const hasOverflowItem = (opt) => typeof opt === "object" && opt !== null && "overflowItem" in opt;
-  const [menuBuilder, menuActionHandler] = useMemo8(() => {
+  const [menuBuilder, menuActionHandler] = useMemo12(() => {
     return [
       () => {
         const { current: menuItems } = wrappedItemsRef;
@@ -2869,14 +3674,14 @@ var useOverflowContainer = ({
       }
     ];
   }, [container, onSwitchWrappedItemIntoView]);
-  const resizeObserver3 = useMemo8(() => {
+  const resizeObserver3 = useMemo12(() => {
     const { sizeProp } = 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 (isValidNumber2(size) && currentSize !== size) {
+        if (isValidNumber3(size) && currentSize !== size) {
           currentSize = size;
           handleResize();
         }
@@ -2886,15 +3691,15 @@ var useOverflowContainer = ({
   useLayoutEffectSkipFirst(() => {
     handleResize();
   }, [handleResize, itemCount]);
-  useMemo8(() => {
+  useMemo12(() => {
     if (container) {
       resizeObserver3.observe(container);
     }
   }, [container, resizeObserver3]);
-  const callbackRef = useCallback17((el) => {
+  const callbackRef = useCallback28((el) => {
     setContainer(containerRef.current = el);
   }, []);
-  const handleDrop = useCallback17(
+  const handleDrop = useCallback28(
     (fromIndex, toIndex) => {
       onMoveItem == null ? void 0 : onMoveItem(fromIndex, toIndex);
     },
@@ -2920,9 +3725,9 @@ var useOverflowContainer = ({
 };
 
 // ../vuu-layout/src/overflow-container/OverflowContainer.tsx
-import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
-var classBase9 = "vuuOverflowContainer";
-var WrapContainer = React15.memo(
+import { jsx as jsx45, jsxs as jsxs22 } from "react/jsx-runtime";
+var classBase10 = "vuuOverflowContainer";
+var WrapContainer = React21.memo(
   ({
     allowDragDrop,
     children,
@@ -2950,16 +3755,13 @@ var WrapContainer = React15.memo(
       onSwitchWrappedItemIntoView,
       orientation
     });
-    console.log(
-      `Overflow container WRAPPER ${React15.Children.count(children)} children`
-    );
     const height = orientation === "vertical" ? "100%" : `${heightProp}px`;
     const style = {
       "--overflow-container-height": `${height}`
     };
-    const className = (0, import_classnames12.default)(`${classBase9}-wrapContainer`, classNameProp, {
-      [`${classBase9}-horizontal`]: orientation === "horizontal",
-      [`${classBase9}-vertical`]: orientation === "vertical"
+    const className = (0, import_classnames21.default)(`${classBase10}-wrapContainer`, classNameProp, {
+      [`${classBase10}-horizontal`]: orientation === "horizontal",
+      [`${classBase10}-vertical`]: orientation === "vertical"
     });
     const content = childElements.map((childEl, i) => {
       const {
@@ -2968,10 +3770,10 @@ var WrapContainer = React15.memo(
         id: itemId = `${id}-${i}`,
         label = `Item ${i + 1}`
       } = childEl.props;
-      return /* @__PURE__ */ jsx17(
+      return /* @__PURE__ */ jsx45(
         "div",
         {
-          className: (0, import_classnames12.default)(`${classBase9}-item`, {
+          className: (0, import_classnames21.default)(`${classBase10}-item`, {
             "vuuDraggable-dragAway": draggedItemIndex === i
           }),
           "data-index": i,
@@ -2985,31 +3787,32 @@ var WrapContainer = React15.memo(
         i
       );
     });
-    const overflowIndicator = /* @__PURE__ */ jsx17(
+    const overflowIndicator = /* @__PURE__ */ jsx45(
       "div",
       {
-        className: `${classBase9}-OverflowIndicator`,
+        className: `${classBase10}-OverflowIndicator`,
         "data-index": "overflow",
-        children: /* @__PURE__ */ jsx17(
+        children: /* @__PURE__ */ jsx45(
           PopupMenu,
           {
             icon: overflowIcon,
             menuBuilder,
-            menuActionHandler
+            menuActionHandler,
+            tabIndex: -1
           }
         )
       },
       "overflow"
     );
     content.push(overflowIndicator);
-    return /* @__PURE__ */ jsxs4("div", { className, ref: rootRef, style, children: [
+    return /* @__PURE__ */ jsxs22("div", { className, ref: rootRef, style, children: [
       content,
       draggable
     ] });
   }
 );
 WrapContainer.displayName = "OverflowContainer.InnerContainer";
-var OverflowContainer = forwardRef7(function OverflowContainer2({
+var OverflowContainer = forwardRef10(function OverflowContainer2({
   allowDragDrop = false,
   children,
   className,
@@ -3023,15 +3826,14 @@ var OverflowContainer = forwardRef7(function OverflowContainer2({
   ...htmlAttributes
 }, forwardedRef) {
   const id = useId(idProp);
-  console.log(`Overflow container ${React15.Children.count(children)} children`);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       ...htmlAttributes,
-      className: (0, import_classnames12.default)((0, import_classnames12.default)(classBase9, className)),
+      className: (0, import_classnames21.default)((0, import_classnames21.default)(classBase10, className)),
       id,
       ref: forwardedRef,
-      children: /* @__PURE__ */ jsx17(
+      children: /* @__PURE__ */ jsx45(
         WrapContainer,
         {
           allowDragDrop,
@@ -3050,21 +3852,21 @@ var OverflowContainer = forwardRef7(function OverflowContainer2({
 });
 
 // ../vuu-layout/src/palette/Palette.tsx
-var import_classnames13 = __toESM(require_classnames());
+var import_classnames22 = __toESM(require_classnames());
 import { uuid as uuid5 } from "@vuu-ui/vuu-utils";
-import { List, ListItem } from "@vuu-ui/vuu-ui-controls";
+import { List as List3, ListItem as ListItem2 } from "@vuu-ui/vuu-ui-controls";
 import {
-  cloneElement as cloneElement5,
-  memo
+  cloneElement as cloneElement6,
+  memo as memo2
 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var clonePaletteItem = (paletteItem) => {
   const dolly = paletteItem.cloneNode(true);
   dolly.id = "";
   delete dolly.dataset.idx;
   return dolly;
 };
-var PaletteItem = memo(
+var PaletteItem = memo2(
   ({
     className,
     children: component,
@@ -3074,10 +3876,10 @@ var PaletteItem = memo(
     closeable,
     ...props
   }) => {
-    return /* @__PURE__ */ jsx18(
-      ListItem,
+    return /* @__PURE__ */ jsx46(
+      ListItem2,
       {
-        className: (0, import_classnames13.default)("vuuPaletteItem", className),
+        className: (0, import_classnames22.default)("vuuPaletteItem", className),
         "data-draggable": true,
         "data-icon": "draggable",
         ...props
@@ -3095,19 +3897,19 @@ var Palette = ({
   ...props
 }) => {
   const dispatch = useLayoutProviderDispatch();
-  const classBase19 = "vuuPalette";
+  const classBase20 = "vuuPalette";
   function handleMouseDown(evt) {
-    var _a, _b;
+    var _a2, _b;
     const target = evt.target;
     const listItemElement = target.closest(".vuuPaletteItem");
-    const idx = parseInt((_b = (_a = listItemElement.dataset) == null ? void 0 : _a.index) != null ? _b : "-1");
+    const idx = parseInt((_b = (_a2 = listItemElement.dataset) == null ? void 0 : _a2.index) != null ? _b : "-1");
     const {
       props: { caption, children: payload, template, ...props2 }
     } = children[idx];
     const { height, left, top, width } = listItemElement.getBoundingClientRect();
     const id = uuid5();
     const identifiers = { id, key: id };
-    const component = template ? payload : /* @__PURE__ */ jsx18(MemoView, { ...ViewProps2, ...identifiers, ...props2, title: props2.label, children: payload });
+    const component = template ? payload : /* @__PURE__ */ jsx46(MemoView, { ...ViewProps2, ...identifiers, ...props2, title: props2.label, children: payload });
     dispatch({
       dragRect: {
         left,
@@ -3131,15 +3933,15 @@ var Palette = ({
       type: "drag-start"
     });
   }
-  return /* @__PURE__ */ jsx18(
-    List,
+  return /* @__PURE__ */ jsx46(
+    List3,
     {
       ...props,
-      className: (0, import_classnames13.default)(classBase19, className, `${classBase19}-${orientation}`),
+      className: (0, import_classnames22.default)(classBase20, className, `${classBase20}-${orientation}`),
       itemHeight,
       selected: null,
       children: children.map(
-        (child, idx) => child.type === PaletteItem ? cloneElement5(child, {
+        (child, idx) => child.type === PaletteItem ? cloneElement6(child, {
           key: idx,
           onMouseDown: handleMouseDown
         }) : child
@@ -3150,26 +3952,26 @@ var Palette = ({
 registerComponent("Palette", Palette, "view");
 
 // ../vuu-layout/src/stack/Stack.tsx
-var import_classnames14 = __toESM(require_classnames());
+var import_classnames23 = __toESM(require_classnames());
 import {
-  Tab,
-  Tabstrip
+  Tab as Tab2,
+  Tabstrip as Tabstrip2
 } from "@vuu-ui/vuu-ui-controls";
-import React16, {
-  forwardRef as forwardRef8,
-  useCallback as useCallback18
+import React22, {
+  forwardRef as forwardRef11,
+  useCallback as useCallback29
 } from "react";
-import { jsx as jsx19, jsxs as jsxs5 } from "react/jsx-runtime";
-var classBase10 = "Tabs";
+import { jsx as jsx47, jsxs as jsxs23 } from "react/jsx-runtime";
+var classBase11 = "Tabs";
 var getDefaultTabIcon = () => void 0;
 var getDefaultTabLabel = (component, tabIndex) => {
-  var _a, _b, _c, _d;
-  return (_d = (_c = (_a = component.props) == null ? void 0 : _a.title) != null ? _c : (_b = component.props) == null ? void 0 : _b["data-tab-title"]) != null ? _d : `Tab ${tabIndex + 1}`;
+  var _a2, _b, _c, _d;
+  return (_d = (_c = (_a2 = component.props) == null ? void 0 : _a2.title) != null ? _c : (_b = component.props) == null ? void 0 : _b["data-tab-title"]) != null ? _d : `Tab ${tabIndex + 1}`;
 };
 var getChildElements = (children) => {
   const elements = [];
-  React16.Children.forEach(children, (child) => {
-    if (React16.isValidElement(child)) {
+  React22.Children.forEach(children, (child) => {
+    if (React22.isValidElement(child)) {
       elements.push(child);
     } else {
       console.warn(`Stack has unexpected child element type`);
@@ -3182,7 +3984,7 @@ var DefaultTabstripProps = {
   allowCloseTab: false,
   allowRenameTab: false
 };
-var Stack = forwardRef8(function Stack2({
+var Stack = forwardRef11(function Stack2({
   active = 0,
   children,
   className: classNameProp,
@@ -3200,26 +4002,26 @@ var Stack = forwardRef8(function Stack2({
   style,
   TabstripProps: TabstripProps2 = DefaultTabstripProps
 }, ref) {
-  var _a;
+  var _a2;
   const id = useId(idProp);
   const {
     allowCloseTab,
     allowRenameTab,
     className: tabstripClassName
   } = TabstripProps2;
-  const handleExitEditMode = useCallback18(
+  const handleExitEditMode = useCallback29(
     (_oldText, newText, _allowDeactivation, tabIndex) => {
       onTabEdit == null ? void 0 : onTabEdit(tabIndex, newText);
     },
     [onTabEdit]
   );
   const activeChild = () => {
-    var _a2;
-    if (React16.isValidElement(children)) {
+    var _a3;
+    if (React22.isValidElement(children)) {
       return children;
     }
     if (Array.isArray(children)) {
-      return (_a2 = children[active]) != null ? _a2 : null;
+      return (_a3 = children[active]) != null ? _a3 : null;
     }
     return null;
   };
@@ -3229,8 +4031,8 @@ var Stack = forwardRef8(function Stack2({
       id: childId = `${id}-${idx}`,
       "data-tab-location": tabLocation
     } = child2.props;
-    return /* @__PURE__ */ jsx19(
-      Tab,
+    return /* @__PURE__ */ jsx47(
+      Tab2,
       {
         ariaControls: childId,
         "data-icon": getTabIcon(child2, idx),
@@ -3247,24 +4049,24 @@ var Stack = forwardRef8(function Stack2({
   const child = activeChild();
   const isHorizontal = showTabs === "left" || showTabs === "right";
   const tabstripOrientation = isHorizontal ? "vertical" : "horizontal";
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
-      className: (0, import_classnames14.default)(classBase10, classNameProp, {
-        [`${classBase10}-horizontal`]: isHorizontal
+      className: (0, import_classnames23.default)(classBase11, classNameProp, {
+        [`${classBase11}-horizontal`]: isHorizontal
       }),
       style,
       id,
       ref,
       children: [
-        showTabs ? /* @__PURE__ */ jsx19(
-          Tabstrip,
+        showTabs ? /* @__PURE__ */ jsx47(
+          Tabstrip2,
           {
             ...TabstripProps2,
-            activeTabIndex: (_a = TabstripProps2 == null ? void 0 : TabstripProps2.activeTabIndex) != null ? _a : child === null ? -1 : active,
+            activeTabIndex: (_a2 = TabstripProps2 == null ? void 0 : TabstripProps2.activeTabIndex) != null ? _a2 : child === null ? -1 : active,
             allowDragDrop: TabstripProps2.allowDragDrop !== false,
             animateSelectionThumb: true,
-            className: (0, import_classnames14.default)("vuuTabHeader", tabstripClassName),
+            className: (0, import_classnames23.default)("vuuTabHeader", tabstripClassName),
             keyBoardActivation,
             onActiveChange: onTabSelectionChanged,
             onAddTab,
@@ -3284,9 +4086,9 @@ Stack.displayName = "Stack";
 
 // ../vuu-layout/src/stack/StackLayout.tsx
 import { useIdMemo as useId3 } from "@salt-ds/core";
-import React17, { useCallback as useCallback19, useRef as useRef15 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var defaultCreateNewChild = (index) => /* @__PURE__ */ jsx20(
+import React23, { useCallback as useCallback30, useRef as useRef18 } from "react";
+import { jsx as jsx48 } from "react/jsx-runtime";
+var defaultCreateNewChild = (index) => /* @__PURE__ */ jsx48(
   MemoView,
   {
     resizeable: true,
@@ -3294,12 +4096,12 @@ var defaultCreateNewChild = (index) => /* @__PURE__ */ jsx20(
     style: { flexGrow: 1, flexShrink: 0, flexBasis: 0 },
     header: true,
     closeable: true,
-    children: /* @__PURE__ */ jsx20(Component_default, { style: { flex: 1 } })
+    children: /* @__PURE__ */ jsx48(Component_default, { style: { flex: 1 } })
   }
 );
 var StackLayout = (props) => {
-  var _a;
-  const ref = useRef15(null);
+  var _a2;
+  const ref = useRef18(null);
   const dispatch = useLayoutProviderDispatch();
   const { loadState } = usePersistentState();
   const {
@@ -3313,14 +4115,14 @@ var StackLayout = (props) => {
   const id = useId3(idProp);
   const [dispatchViewAction] = useViewActionDispatcher(id, ref, path);
   const createNewChildFromContext = useLayoutCreateNewChild();
-  const createNewChild = (_a = createNewChildProp != null ? createNewChildProp : createNewChildFromContext) != null ? _a : defaultCreateNewChild;
+  const createNewChild = (_a2 = createNewChildProp != null ? createNewChildProp : createNewChildFromContext) != null ? _a2 : defaultCreateNewChild;
   const handleTabSelection = (nextIdx) => {
     if (path) {
       dispatch({ type: "switch-tab", id, path, nextIdx });
       onTabSelectionChanged == null ? void 0 : onTabSelectionChanged(nextIdx);
     }
   };
-  const handleTabClose = useCallback19(
+  const handleTabClose = useCallback30(
     (tabIndex) => {
       if (Array.isArray(children)) {
         const {
@@ -3331,9 +4133,9 @@ var StackLayout = (props) => {
     },
     [children, dispatch]
   );
-  const handleTabAdd = useCallback19(() => {
+  const handleTabAdd = useCallback30(() => {
     if (path) {
-      const tabIndex = React17.Children.count(children);
+      const tabIndex = React23.Children.count(children);
       const component = createNewChild(tabIndex);
       dispatch({
         type: "add",
@@ -3342,7 +4144,7 @@ var StackLayout = (props) => {
       });
     }
   }, [children, createNewChild, dispatch, path]);
-  const handleMoveTab = useCallback19(
+  const handleMoveTab = useCallback30(
     (fromIndex, toIndex) => {
       if (path) {
         dispatch({
@@ -3376,7 +4178,7 @@ var StackLayout = (props) => {
     const { id: id2, title } = component.props;
     return loadState(id2, "view-title") || title || `Tab ${idx + 1}`;
   };
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx48(
     Stack,
     {
       ...restProps,
@@ -3396,26 +4198,26 @@ StackLayout.displayName = "Stack";
 registerComponent("Stack", StackLayout, "container");
 
 // ../vuu-layout/src/toolbar/Toolbar.tsx
-var import_classnames15 = __toESM(require_classnames());
-import React18, { useMemo as useMemo9, useRef as useRef18 } from "react";
+var import_classnames24 = __toESM(require_classnames());
+import React24, { useMemo as useMemo13, useRef as useRef21 } from "react";
 
 // ../vuu-layout/src/toolbar/useToolbar.ts
-import { isValidNumber as isValidNumber3 } from "@vuu-ui/vuu-utils";
+import { isValidNumber as isValidNumber4 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback22,
-  useRef as useRef17
+  useCallback as useCallback33,
+  useRef as useRef20
 } from "react";
 
 // ../vuu-layout/src/toolbar/useKeyboardNavigation.ts
-import { useControlled as useControlled2 } from "@salt-ds/core";
+import { useControlled as useControlled3 } from "@salt-ds/core";
 import {
   dispatchMouseEvent,
   getFocusableElement
 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback20,
-  useRef as useRef16,
-  useState as useState10
+  useCallback as useCallback31,
+  useRef as useRef19,
+  useState as useState19
 } from "react";
 import {
   ArrowDown,
@@ -3488,23 +4290,23 @@ var useKeyboardNavigation = ({
   selectedIndex: selectedItemIndex = []
 }) => {
   const manualActivation = keyBoardActivation === "manual";
-  const mouseClickPending = useRef16(false);
-  const focusedRef = useRef16(-1);
-  const [hasFocus, setHasFocus] = useState10(false);
-  const [, forceRefresh] = useState10({});
-  const [highlightedIdx, _setHighlightedIdx] = useControlled2({
+  const mouseClickPending = useRef19(false);
+  const focusedRef = useRef19(-1);
+  const [hasFocus, setHasFocus] = useState19(false);
+  const [, forceRefresh] = useState19({});
+  const [highlightedIdx, _setHighlightedIdx] = useControlled3({
     controlled: highlightedIdxProp,
     default: defaultHighlightedIdx,
     name: "UseKeyboardNavigation"
   });
-  const setHighlightedIdx = useCallback20(
+  const setHighlightedIdx = useCallback31(
     (value) => {
       _setHighlightedIdx(focusedRef.current = value);
     },
     [_setHighlightedIdx]
   );
-  const keyboardNavigation = useRef16(false);
-  const focusItem = useCallback20(
+  const keyboardNavigation = useRef19(false);
+  const focusItem = useCallback31(
     (itemIndex, immediateFocus = false, withKeyboard, delay = 70) => {
       setHighlightedIdx(itemIndex);
       if (withKeyboard === true && !keyboardNavigation.current) {
@@ -3545,14 +4347,14 @@ var useKeyboardNavigation = ({
       }
     }
   };
-  const getIndexCount = useCallback20(
+  const getIndexCount = useCallback31(
     () => {
-      var _a, _b;
-      return (_b = (_a = containerRef.current) == null ? void 0 : _a.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
+      var _a2, _b;
+      return (_b = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
     },
     [containerRef]
   );
-  const nextFocusableItemIdx = useCallback20(
+  const nextFocusableItemIdx = useCallback31(
     (direction = "fwd", idx) => {
       const indexCount = getIndexCount();
       const index = typeof idx === "number" ? idx : indexCount;
@@ -3572,7 +4374,7 @@ var useKeyboardNavigation = ({
     },
     [containerRef, getIndexCount]
   );
-  const navigateChildItems = useCallback20(
+  const navigateChildItems = useCallback31(
     (e, forceFocusVisible = false) => {
       const direction = navigation[orientation][e.key];
       const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
@@ -3594,21 +4396,21 @@ var useKeyboardNavigation = ({
       orientation
     ]
   );
-  const highlightedItemHasMenu = useCallback20(() => {
+  const highlightedItemHasMenu = useCallback31(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuPopupMenu") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const highlightedItemInEditState = useCallback20(() => {
+  const highlightedItemInEditState = useCallback31(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuEditableLabel-input") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const activateItemMenu = useCallback20(() => {
+  const activateItemMenu = useCallback31(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
     if (menuEl) {
@@ -3616,7 +4418,7 @@ var useKeyboardNavigation = ({
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const handleKeyDown = useCallback20(
+  const handleKeyDown = useCallback31(
     (e) => {
       if (getIndexCount() > 0 && isNavigationKey(e.key, orientation)) {
         e.preventDefault();
@@ -3642,7 +4444,7 @@ var useKeyboardNavigation = ({
   const handleItemClick = (_, itemIndex) => {
     setHighlightedIdx(itemIndex);
   };
-  const handleFocus = useCallback20(() => {
+  const handleFocus = useCallback31(() => {
     if (!hasFocus) {
       setHasFocus(true);
       if (!mouseClickPending.current) {
@@ -3652,7 +4454,7 @@ var useKeyboardNavigation = ({
       }
     }
   }, [hasFocus]);
-  const handleContainerMouseDown = useCallback20(() => {
+  const handleContainerMouseDown = useCallback31(() => {
     if (!hasFocus) {
       mouseClickPending.current = true;
     }
@@ -3694,9 +4496,9 @@ import {
   allowMultipleSelection,
   deselectionIsAllowed,
   selectionIsDisallowed,
-  useControlled as useControlled3
+  useControlled as useControlled4
 } from "@vuu-ui/vuu-ui-controls";
-import { useCallback as useCallback21 } from "react";
+import { useCallback as useCallback32 } from "react";
 var defaultSelectionKeys = ["Enter", " "];
 var NO_SELECTION_HANDLERS = {};
 var useSelection = ({
@@ -3708,17 +4510,17 @@ var useSelection = ({
   selected: selectedProp,
   selectionStrategy
 }) => {
-  const [selected, setSelected, isControlled] = useControlled3({
+  const [selected, setSelected, isControlled] = useControlled4({
     controlled: selectedProp,
     default: defaultSelected != null ? defaultSelected : [],
     name: "useSelection",
     state: "selected"
   });
-  const isSelectionEvent = useCallback21(
+  const isSelectionEvent = useCallback32(
     (evt) => defaultSelectionKeys.includes(evt.key),
     []
   );
-  const selectItem = useCallback21(
+  const selectItem = useCallback32(
     (itemIndex, specialKey = false) => {
       const newSelected = allowMultipleSelection(selectionStrategy, specialKey) ? selected.concat(itemIndex) : [itemIndex];
       setSelected(newSelected);
@@ -3726,7 +4528,7 @@ var useSelection = ({
     },
     [onSelectionChange, selected, selectionStrategy, setSelected]
   );
-  const deselectItem = useCallback21(
+  const deselectItem = useCallback32(
     (itemIndex, specialKey = false) => {
       const newSelected = selectionStrategy === "deselectable" || selectionStrategy === "multiple-special-key" && !specialKey ? [] : selected.filter((index) => index !== itemIndex);
       setSelected(newSelected);
@@ -3734,7 +4536,7 @@ var useSelection = ({
     },
     [onSelectionChange, selected, selectionStrategy, setSelected]
   );
-  const handleKeyDown = useCallback21(
+  const handleKeyDown = useCallback32(
     (e) => {
       if (isSelectionEvent(e) && isSelectableElement(e.target)) {
         if (!selected.includes(highlightedIdx)) {
@@ -3757,7 +4559,7 @@ var useSelection = ({
       deselectItem
     ]
   );
-  const handleClick = useCallback21(
+  const handleClick = useCallback32(
     (e, itemIndex) => {
       const element = getClosestIndexItem(e.target);
       if (isSelectableElement(element)) {
@@ -3792,8 +4594,8 @@ var useToolbar = ({
   orientation,
   selectionStrategy
 }) => {
-  var _a;
-  const lastSelection = useRef17(activeItemIndexProp);
+  var _a2;
+  const lastSelection = useRef20(activeItemIndexProp);
   const {
     focusItem: keyboardHookFocusItem,
     highlightedIdx,
@@ -3805,7 +4607,7 @@ var useToolbar = ({
     containerRef,
     keyBoardActivation: "manual",
     orientation,
-    selectedIndex: (_a = lastSelection.current) != null ? _a : []
+    selectedIndex: (_a2 = lastSelection.current) != null ? _a2 : []
   });
   const {
     activateItem: selectionHookActivateItem,
@@ -3821,14 +4623,14 @@ var useToolbar = ({
     selectionStrategy
   });
   lastSelection.current = selectionHookSelected;
-  const handleClick = useCallback22(
+  const handleClick = useCallback33(
     (evt) => {
-      var _a2;
+      var _a3;
       const target = evt.target;
       const toolbarItem = target.closest("[data-index]");
       if (toolbarItem) {
-        const index = parseInt((_a2 = toolbarItem.dataset.index) != null ? _a2 : "-1");
-        if (index !== -1 && isValidNumber3(index)) {
+        const index = parseInt((_a3 = toolbarItem.dataset.index) != null ? _a3 : "-1");
+        if (index !== -1 && isValidNumber4(index)) {
           keyboardHookHandleClick(evt, index);
           onClick == null ? void 0 : onClick(evt, index);
         }
@@ -3836,7 +4638,7 @@ var useToolbar = ({
     },
     [keyboardHookHandleClick, onClick]
   );
-  const handleKeyDown = useCallback22(
+  const handleKeyDown = useCallback33(
     (evt) => {
       keyboardHookHandleKeyDown(evt);
       if (!evt.defaultPrevented) {
@@ -3845,7 +4647,7 @@ var useToolbar = ({
     },
     [keyboardHookHandleKeyDown, onKeyDown]
   );
-  const onSwitchWrappedItemIntoView = useCallback22(
+  const onSwitchWrappedItemIntoView = useCallback33(
     (item) => {
       const index = parseInt(item.index);
       if (!isNaN(index)) {
@@ -3874,8 +4676,8 @@ var useToolbar = ({
 import {
   forwardCallbackProps
 } from "@vuu-ui/vuu-ui-controls";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var classBase11 = "vuuToolbar";
+import { jsx as jsx49 } from "react/jsx-runtime";
+var classBase12 = "vuuToolbar";
 var Toolbar = ({
   activeItemIndex: activeItemIndexProp,
   defaultActiveItemIndex,
@@ -3887,7 +4689,7 @@ var Toolbar = ({
   selectionStrategy = "none",
   ...props
 }) => {
-  const rootRef = useRef18(null);
+  const rootRef = useRef21(null);
   const { activeItemIndex, focusVisible, itemProps, ...toolbarHook } = useToolbar({
     activeItemIndex: activeItemIndexProp,
     defaultActiveItemIndex,
@@ -3897,8 +4699,8 @@ var Toolbar = ({
     selectionStrategy
   });
   const id = useId(idProp);
-  const className = (0, import_classnames15.default)(classBase11, `${classBase11}-${orientation}`, classNameProp);
-  const items = useMemo9(
+  const className = (0, import_classnames24.default)(classBase12, `${classBase12}-${orientation}`, classNameProp);
+  const items = useMemo13(
     () => asReactElements(children).map((child, index) => {
       const {
         id: itemId = `${id}-tab-${index}`,
@@ -3906,9 +4708,9 @@ var Toolbar = ({
         ...ownProps
       } = child.props;
       const selected = activeItemIndex.includes(index);
-      return React18.cloneElement(child, {
+      return React24.cloneElement(child, {
         ...forwardCallbackProps(ownProps, itemProps),
-        className: (0, import_classnames15.default)("vuuToolbarItem", itemClassName, {
+        className: (0, import_classnames24.default)("vuuToolbarItem", itemClassName, {
           vuuFocusVisible: focusVisible === index
         }),
         "data-overflow-priority": selected ? "1" : void 0,
@@ -3920,12 +4722,12 @@ var Toolbar = ({
     }),
     [activeItemIndex, children, focusVisible, id, itemProps]
   );
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx49(
     OverflowContainer,
     {
       ...props,
       ...toolbarHook.containerProps,
-      className: (0, import_classnames15.default)(classBase11, className),
+      className: (0, import_classnames24.default)(classBase12, className),
       ...props,
       ref: rootRef,
       children: items
@@ -3934,46 +4736,45 @@ var Toolbar = ({
 };
 
 // ../vuu-layout/src/tools/config-wrapper/ConfigWrapper.tsx
-import React19, { useState as useState11 } from "react";
-import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
+import React25, { useState as useState20 } from "react";
+import { jsx as jsx50, jsxs as jsxs24 } from "react/jsx-runtime";
 
 // ../vuu-layout/src/tools/devtools-box/layout-configurator.jsx
-import { FormField, Input } from "@salt-ds/core";
-import { jsx as jsx23, jsxs as jsxs7 } from "react/jsx-runtime";
+import { FormField as FormField3, Input as Input3 } from "@salt-ds/core";
+import { jsx as jsx51, jsxs as jsxs25 } from "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_classnames16 = __toESM(require_classnames());
-import React20 from "react";
+var import_classnames25 = __toESM(require_classnames());
+import React26 from "react";
 import { Tree } from "@vuu-ui/vuu-ui-controls";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 
 // src/filter-bar/FilterBar.tsx
-var import_classnames21 = __toESM(require_classnames(), 1);
+var import_classnames30 = __toESM(require_classnames(), 1);
 import { Prompt } from "@vuu-ui/vuu-popups";
-import { Button as Button4 } from "@salt-ds/core";
-import { useRef as useRef25 } from "react";
+import { Button as Button10 } from "@salt-ds/core";
+import { useRef as useRef28 } from "react";
 
 // src/filter-builder-menu/FilterBuilderMenu.tsx
-import { useCallback as useCallback23, useRef as useRef19 } from "react";
+import { useCallback as useCallback34, useRef as useRef22 } from "react";
 import { PopupComponent as Popup, Portal } from "@vuu-ui/vuu-popups";
-import { List as List2, ListItem as ListItem2 } from "@vuu-ui/vuu-ui-controls";
-import { Fragment, jsx as jsx25, jsxs as jsxs8 } from "react/jsx-runtime";
-var classBase12 = "vuuFilterBuilderMenu";
+import { List as List4, ListItem as ListItem3 } from "@vuu-ui/vuu-ui-controls";
+import { Fragment as Fragment4, jsx as jsx53, jsxs as jsxs26 } from "react/jsx-runtime";
+var classBase13 = "vuuFilterBuilderMenu";
 var FilterBuilderMenu = ({ onMenuAction }) => {
-  const ref = useRef19(null);
-  const listRef = useCallback23((el) => {
+  const ref = useRef22(null);
+  const listRef = useCallback34((el) => {
     if (el) {
-      el.focus();
+      requestAnimationFrame(() => {
+        el.focus();
+      });
     }
   }, []);
-  const handleSelect = useCallback23(
+  const handleSelect = useCallback34(
     (evt, selected) => {
-      console.log({
-        selected
-      });
       const {
         props: { "data-action": action }
       } = selected;
@@ -3981,12 +4782,12 @@ var FilterBuilderMenu = ({ onMenuAction }) => {
     },
     [onMenuAction]
   );
-  return /* @__PURE__ */ jsxs8(Fragment, { children: [
-    /* @__PURE__ */ jsx25("span", { className: `${classBase12}-trigger`, ref }),
-    /* @__PURE__ */ jsx25(Portal, { children: /* @__PURE__ */ jsx25(Popup, { anchorElement: ref, placement: "right", children: /* @__PURE__ */ jsxs8(
-      List2,
+  return /* @__PURE__ */ jsxs26(Fragment4, { children: [
+    /* @__PURE__ */ jsx53("span", { className: `${classBase13}-trigger`, ref }),
+    /* @__PURE__ */ jsx53(Portal, { children: /* @__PURE__ */ jsx53(Popup, { anchorElement: ref, placement: "right", children: /* @__PURE__ */ jsxs26(
+      List4,
       {
-        className: `${classBase12}List`,
+        className: `${classBase13}List`,
         defaultHighlightedIndex: 1,
         itemHeight: 22,
         ref: listRef,
@@ -3994,9 +4795,9 @@ var FilterBuilderMenu = ({ onMenuAction }) => {
         style: { position: "relative" },
         width: 100,
         children: [
-          /* @__PURE__ */ jsx25(ListItem2, { "data-action": "apply-save", className: "vuuMenuButton", children: "APPLY AND SAVE" }),
-          /* @__PURE__ */ jsx25(ListItem2, { "data-action": "and-clause", children: "AND" }),
-          /* @__PURE__ */ jsx25(ListItem2, { "data-action": "or-clause", children: "OR" })
+          /* @__PURE__ */ jsx53(ListItem3, { "data-action": "apply-save", className: "vuuMenuButton", children: "APPLY AND SAVE" }),
+          /* @__PURE__ */ jsx53(ListItem3, { "data-action": "and-clause", children: "AND" }),
+          /* @__PURE__ */ jsx53(ListItem3, { "data-action": "or-clause", children: "OR" })
         ]
       }
     ) }) })
@@ -4004,46 +4805,65 @@ var FilterBuilderMenu = ({ onMenuAction }) => {
 };
 
 // src/filter-clause/ExpandoCombobox.tsx
-var import_classnames17 = __toESM(require_classnames(), 1);
+var import_classnames26 = __toESM(require_classnames(), 1);
 import { itemToString as defaultToString } from "@vuu-ui/vuu-utils";
-import { ComboBox } from "@vuu-ui/vuu-ui-controls";
 import {
-  forwardRef as forwardRef9,
-  useCallback as useCallback24,
-  useMemo as useMemo10,
-  useRef as useRef20,
-  useState as useState12
+  ComboBox as ComboBox2
+} from "@vuu-ui/vuu-ui-controls";
+import {
+  forwardRef as forwardRef12,
+  useCallback as useCallback35,
+  useMemo as useMemo14,
+  useRef as useRef23,
+  useState as useState21
 } from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var classBase13 = "vuuExpandoCombobox";
+import { jsx as jsx54 } from "react/jsx-runtime";
+var classBase14 = "vuuExpandoCombobox";
 var NO_INPUT_PROPS = {};
-var ExpandoCombobox = forwardRef9(function ExpandoCombobox2({
-  allowMultipleSelection: allowMultipleSelection2 = false,
+var ExpandoCombobox = forwardRef12(function ExpandoCombobox2({
   className: classNameProp,
   InputProps: InputPropsProp = NO_INPUT_PROPS,
   ListProps: ListPropsProp,
   onInputChange,
   onSelectionChange,
+  selectionStrategy,
+  style,
   value = "",
   ...props
 }, forwardedRef) {
-  const [text, setText] = useState12(value);
+  const [text, setText] = useState21(value);
   const { itemToString = defaultToString } = props;
-  const initialValue = useRef20(value);
-  const handleInputChange = useCallback24(
+  const initialValue = useRef23(value);
+  const itemsToString = useCallback35(
+    (items) => {
+      const [first, ...rest] = items;
+      if (rest.length) {
+        return `${itemToString(first)} + ${rest.length}`;
+      } else {
+        return itemToString(first);
+      }
+    },
+    [itemToString]
+  );
+  const handleInputChange = useCallback35(
     (evt) => {
       const { value: value2 } = evt.target;
+      console.log(`onInputChange ${value2}`);
       setText(value2);
       onInputChange == null ? void 0 : onInputChange(evt);
     },
     [onInputChange]
   );
-  const [InputProps, ListProps] = useMemo10(() => {
+  const handleSetSelectedText = useCallback35((text2) => {
+    console.log(`handleSetSelectedText ${text2}`);
+    setText(text2);
+  }, []);
+  const [InputProps, ListProps] = useMemo14(() => {
     const { inputProps, ...restInputProps } = InputPropsProp;
     return [
       {
         ...restInputProps,
-        className: `${classBase13}-Input`,
+        className: `${classBase14}-Input`,
         endAdornment: null,
         inputProps: {
           ...inputProps,
@@ -4053,7 +4873,7 @@ var ExpandoCombobox = forwardRef9(function ExpandoCombobox2({
       },
       {
         ...ListPropsProp,
-        className: (0, import_classnames17.default)("vuuMenuList", ListPropsProp == null ? void 0 : ListPropsProp.className),
+        className: (0, import_classnames26.default)("vuuMenuList", ListPropsProp == null ? void 0 : ListPropsProp.className),
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         "data-mode": "light",
@@ -4065,41 +4885,46 @@ var ExpandoCombobox = forwardRef9(function ExpandoCombobox2({
       }
     ];
   }, [InputPropsProp, handleInputChange, ListPropsProp]);
-  const handleSelectionChange = useCallback24(
-    (evt, item) => {
-      const selectedValue = item === null ? "" : itemToString(item);
-      setText(selectedValue);
-      onSelectionChange == null ? void 0 : onSelectionChange(evt, item);
+  const handleSelectionChange = useCallback35(
+    (evt, selected) => {
+      if (Array.isArray(selected)) {
+        onSelectionChange == null ? void 0 : onSelectionChange(
+          null,
+          selected
+        );
+      } else if (selected) {
+        setText(itemToString(selected));
+        onSelectionChange == null ? void 0 : onSelectionChange(
+          null,
+          selected
+        );
+      }
     },
     [itemToString, onSelectionChange]
   );
-  const [selected, setSelected] = useState12([]);
-  const handleMultiSelectChange = useCallback24((evt, selected2) => {
-    setSelected(selected2);
-  }, []);
-  return /* @__PURE__ */ jsx26(
+  const popupProps = {
+    minWidth: 102
+  };
+  return /* @__PURE__ */ jsx54(
     "div",
     {
-      className: (0, import_classnames17.default)(classBase13, classNameProp),
+      className: (0, import_classnames26.default)(classBase14, classNameProp),
       "data-text": text,
       ref: forwardedRef,
-      children: allowMultipleSelection2 ? /* @__PURE__ */ jsx26(
-        ComboBox,
-        {
-          ...props,
-          defaultValue: initialValue.current,
-          ListProps,
-          InputProps,
-          onSelectionChange: handleSelectionChange
-        }
-      ) : /* @__PURE__ */ jsx26(
-        ComboBox,
+      style,
+      children: /* @__PURE__ */ jsx54(
+        ComboBox2,
         {
           ...props,
+          PopupProps: popupProps,
           defaultValue: initialValue.current,
+          fullWidth: true,
           ListProps,
           InputProps,
-          onSelectionChange: handleSelectionChange
+          itemsToString,
+          onSelectionChange: handleSelectionChange,
+          onSetSelectedText: handleSetSelectedText,
+          selectionStrategy
         }
       )
     }
@@ -4107,14 +4932,14 @@ var ExpandoCombobox = forwardRef9(function ExpandoCombobox2({
 });
 
 // src/filter-clause/FilterClauseEditor.tsx
-var import_classnames18 = __toESM(require_classnames(), 1);
-import { useCallback as useCallback28, useEffect as useEffect6, useRef as useRef22 } from "react";
+var import_classnames27 = __toESM(require_classnames(), 1);
+import { useCallback as useCallback39 } from "react";
 
 // src/filter-clause/CloseButton.tsx
-import { Button as Button3 } from "@salt-ds/core";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var CloseButton = ({ className, onClick }) => /* @__PURE__ */ jsx27(
-  Button3,
+import { Button as Button9 } from "@salt-ds/core";
+import { jsx as jsx55 } from "react/jsx-runtime";
+var CloseButton = ({ className, onClick }) => /* @__PURE__ */ jsx55(
+  Button9,
   {
     className,
     "data-icon": "close",
@@ -4125,14 +4950,14 @@ var CloseButton = ({ className, onClick }) => /* @__PURE__ */ jsx27(
 
 // src/filter-clause/NumericInput.tsx
 import {
-  forwardRef as forwardRef10,
-  useState as useState13,
-  useCallback as useCallback25
+  forwardRef as forwardRef13,
+  useState as useState22,
+  useCallback as useCallback36
 } from "react";
 import { ExpandoInput } from "@vuu-ui/vuu-ui-controls";
-import { isValidNumber as isValidNumber4 } from "@vuu-ui/vuu-utils";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var NumericInput = forwardRef10(function NumericInput2({
+import { isValidNumber as isValidNumber5 } from "@vuu-ui/vuu-utils";
+import { jsx as jsx56 } from "react/jsx-runtime";
+var NumericInput = forwardRef13(function NumericInput2({
   InputProps,
   className,
   column,
@@ -4141,30 +4966,30 @@ var NumericInput = forwardRef10(function NumericInput2({
   // operator,
   value: valueProp
 }, forwardedRef) {
-  const [value, setValue] = useState13(
-    isValidNumber4(valueProp) ? valueProp.toString() : ""
+  const [value, setValue] = useState22(
+    isValidNumber5(valueProp) ? valueProp.toString() : ""
   );
-  const handleChange = useCallback25((evt) => {
+  const handleChange = useCallback36((evt) => {
     const { value: value2 } = evt.target;
     const numericValue = parseFloat(value2);
-    if (isValidNumber4(numericValue)) {
+    if (isValidNumber5(numericValue)) {
       console.log("its valid");
     }
     setValue(value2);
   }, []);
-  const handleKeyDown = useCallback25(
+  const handleKeyDown = useCallback36(
     (evt) => {
       if (evt.key === "Enter") {
         const { value: value2 } = evt.target;
         const numericValue = parseFloat(value2);
-        if (isValidNumber4(numericValue)) {
+        if (isValidNumber5(numericValue)) {
           onInputComplete(numericValue);
         }
       }
     },
     [onInputComplete]
   );
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx56(
     ExpandoInput,
     {
       ...InputProps,
@@ -4193,40 +5018,49 @@ var getOperators = (column) => {
 
 // src/filter-clause/TextInput.tsx
 import {
-  forwardRef as forwardRef11,
-  useCallback as useCallback26,
-  useEffect as useEffect5,
-  useMemo as useMemo11,
-  useState as useState14
+  forwardRef as forwardRef14,
+  useCallback as useCallback37,
+  useEffect as useEffect12,
+  useMemo as useMemo15,
+  useState as useState23
 } from "react";
 import {
   useTypeaheadSuggestions
 } from "@vuu-ui/vuu-data-react";
-import { ExpandoInput as ExpandoInput2 } from "@vuu-ui/vuu-ui-controls";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var TextInput = forwardRef11(function TextInput2({
+import {
+  ExpandoInput as ExpandoInput2
+} from "@vuu-ui/vuu-ui-controls";
+import { jsx as jsx57 } from "react/jsx-runtime";
+var TextInput = forwardRef14(function TextInput2({
   InputProps: InputPropsProp = {},
   className,
   column,
-  filterClause,
   onInputComplete,
   operator,
   suggestionProvider = useTypeaheadSuggestions,
   table,
   value
 }, forwardedRef) {
-  const [valueInputValue, setValueInputValue] = useState14(value != null ? value : "");
-  const [typeaheadValues, setTypeaheadValues] = useState14([]);
+  const [valueInputValue, setValueInputValue] = useState23(value != null ? value : "");
+  const [typeaheadValues, setTypeaheadValues] = useState23([]);
   const getSuggestions = suggestionProvider();
-  const handleValueSelectionChange = useCallback26(
+  const handleSingleValueSelectionChange = useCallback37(
+    (evt, value2) => onInputComplete(value2),
+    [onInputComplete]
+  );
+  const handleMultiValueSelectionChange = useCallback37(
     (evt, value2) => {
-      onInputComplete(value2 != null ? value2 : "");
+      if (value2.length === 1) {
+        onInputComplete(value2[0]);
+      } else if (value2.length > 1) {
+        onInputComplete(value2);
+      }
     },
     [onInputComplete]
   );
-  useEffect5(() => {
+  useEffect12(() => {
   }, [column]);
-  useEffect5(() => {
+  useEffect12(() => {
     if (table) {
       const params = valueInputValue ? [table, column.name, valueInputValue] : [table, column.name];
       getSuggestions(params).then((suggestions) => {
@@ -4236,11 +5070,11 @@ var TextInput = forwardRef11(function TextInput2({
       });
     }
   }, [table, column, valueInputValue, getSuggestions]);
-  const handleInputChange = useCallback26((evt) => {
+  const handleInputChange = useCallback37((evt) => {
     const { value: value2 } = evt.target;
     setValueInputValue(value2);
   }, []);
-  const InputProps = useMemo11(() => {
+  const InputProps = useMemo15(() => {
     if (operator === "starts" || operator === "ends") {
       const { inputProps, ...restInputProps } = InputPropsProp;
       return {
@@ -4248,13 +5082,13 @@ var TextInput = forwardRef11(function TextInput2({
         inputProps: {
           ...inputProps,
           onKeyDown: (evt) => {
-            var _a;
+            var _a2;
             if (evt.key === "Enter" && valueInputValue !== "") {
               evt.stopPropagation();
               evt.preventDefault();
               onInputComplete(valueInputValue);
             } else {
-              (_a = inputProps == null ? void 0 : inputProps.onKeyDown) == null ? void 0 : _a.call(inputProps, evt);
+              (_a2 = inputProps == null ? void 0 : inputProps.onKeyDown) == null ? void 0 : _a2.call(inputProps, evt);
             }
           }
         }
@@ -4263,10 +5097,10 @@ var TextInput = forwardRef11(function TextInput2({
       return InputPropsProp;
     }
   }, [InputPropsProp, onInputComplete, operator, valueInputValue]);
-  const getValueInputField = useCallback26(() => {
+  const getValueInputField = useCallback37(() => {
     switch (operator) {
       case "in":
-        return /* @__PURE__ */ jsx29(
+        return /* @__PURE__ */ jsx57(
           ExpandoCombobox,
           {
             InputProps,
@@ -4274,13 +5108,14 @@ var TextInput = forwardRef11(function TextInput2({
             initialHighlightedIndex: 0,
             source: typeaheadValues,
             onInputChange: handleInputChange,
-            onSelectionChange: handleValueSelectionChange,
+            onSelectionChange: handleMultiValueSelectionChange,
             ref: forwardedRef,
+            selectionStrategy: "multiple",
             value
           }
         );
       case "starts":
-        return /* @__PURE__ */ jsx29(
+        return /* @__PURE__ */ jsx57(
           ExpandoCombobox,
           {
             InputProps,
@@ -4293,13 +5128,13 @@ var TextInput = forwardRef11(function TextInput2({
             initialHighlightedIndex: 0,
             source: typeaheadValues,
             onInputChange: handleInputChange,
-            onSelectionChange: handleValueSelectionChange,
+            onSelectionChange: handleSingleValueSelectionChange,
             ref: forwardedRef,
             value
           }
         );
       case "ends":
-        return /* @__PURE__ */ jsx29(
+        return /* @__PURE__ */ jsx57(
           ExpandoInput2,
           {
             ...InputProps,
@@ -4310,15 +5145,16 @@ var TextInput = forwardRef11(function TextInput2({
           }
         );
       default:
-        return /* @__PURE__ */ jsx29(
+        return /* @__PURE__ */ jsx57(
           ExpandoCombobox,
           {
             InputProps,
             className,
             initialHighlightedIndex: 0,
             source: typeaheadValues,
+            title: "value",
             onInputChange: handleInputChange,
-            onSelectionChange: handleValueSelectionChange,
+            onSelectionChange: handleSingleValueSelectionChange,
             ref: forwardedRef,
             value
           }
@@ -4330,9 +5166,10 @@ var TextInput = forwardRef11(function TextInput2({
     className,
     typeaheadValues,
     handleInputChange,
-    handleValueSelectionChange,
+    handleMultiValueSelectionChange,
     forwardedRef,
     value,
+    handleSingleValueSelectionChange,
     valueInputValue
   ]);
   return getValueInputField();
@@ -4346,26 +5183,43 @@ import {
 } from "@vuu-ui/vuu-utils";
 import { getColumnByName } from "@vuu-ui/vuu-data";
 import {
-  useCallback as useCallback27,
-  useMemo as useMemo12,
-  useState as useState15
+  useCallback as useCallback38,
+  useEffect as useEffect13,
+  useMemo as useMemo16,
+  useRef as useRef24,
+  useState as useState24
 } from "react";
 var cursorAtTextStart = (input) => input.selectionStart === 0;
 var cursorAtTextEnd = (input) => input.selectionStart === input.value.length;
 var getFieldName = (field) => (field == null ? void 0 : field.classList.contains("vuuFilterClauseColumn")) ? "column" : (field == null ? void 0 : field.classList.contains("vuuFilterClauseOperator")) ? "operator" : "value";
+var getFocusedField = () => {
+  var _a2;
+  return (_a2 = document.activeElement) == null ? void 0 : _a2.closest(".vuuFilterClauseField");
+};
+var focusNextFocusableElement = (direction = "fwd") => {
+  var _a2;
+  const activeField = getFocusedField();
+  const filterClause = activeField == null ? void 0 : activeField.closest(".vuuFilterClause");
+  if ((filterClause == null ? void 0 : filterClause.lastChild) === activeField) {
+    requestAnimationFrame(() => {
+      focusNextFocusableElement();
+    });
+  } else {
+    const nextField = direction === "fwd" ? activeField.nextElementSibling : activeField.previousElementSibling;
+    (_a2 = nextField == null ? void 0 : nextField.querySelector("input")) == null ? void 0 : _a2.focus();
+  }
+};
 var focusNextElement = () => {
-  var _a;
-  const filterClauseField = (_a = document.activeElement) == null ? void 0 : _a.closest(
-    ".vuuFilterClauseField"
-  );
+  const filterClauseField = getFocusedField();
   const filterClause = filterClauseField == null ? void 0 : filterClauseField.closest(".vuuFilterClause");
   if (filterClause && filterClauseField) {
     if (filterClauseField.classList.contains("vuuFilterClauseValue")) {
-      console.log("focus on clear button");
       const clearButton = filterClause.querySelector(
         ".vuuFilterClause-closeButton"
       );
       clearButton == null ? void 0 : clearButton.focus();
+    } else {
+      focusNextFocusableElement();
     }
   }
 };
@@ -4383,6 +5237,7 @@ var navigateToNextInputIfAtBoundary = (evt) => {
         const nextField = field.previousSibling;
         const nextInput = nextField == null ? void 0 : nextField.querySelector("input");
         evt.preventDefault();
+        console.log("%cfocus nextInput", "color:green;font-weight:bold");
         nextInput == null ? void 0 : nextInput.focus();
         requestAnimationFrame(() => {
           nextInput == null ? void 0 : nextInput.select();
@@ -4422,43 +5277,59 @@ var useFilterClauseEditor = ({
   onChange,
   tableSchema
 }) => {
-  const [selectedColumn, setSelectedColumn] = useState15(getColumnByName(tableSchema, filterClause.column));
-  const [operator, setOperator] = useState15(
+  const columnRef = useRef24(null);
+  const operatorRef = useRef24(null);
+  const valueRef = useRef24(null);
+  const [selectedColumn, setSelectedColumn] = useState24(getColumnByName(tableSchema, filterClause.column));
+  const [operator, _setOperator] = useState24(
     filterClause.op
   );
-  const [value, setValue] = useState15(
+  const setOperator = useCallback38((op) => {
+    _setOperator(op);
+  }, []);
+  const [value, setValue] = useState24(
     getFilterClauseValue(filterClause)
   );
-  const handleSelectionChangeColumn = useCallback27(
+  const handleSelectionChangeColumn = useCallback38(
     (evt, column) => {
       setSelectedColumn(column != null ? column : void 0);
       setOperator(void 0);
       setValue(void 0);
+      focusNextElement();
     },
-    []
+    [setOperator]
   );
-  const handleSelectionChangeOperator = useCallback27(
-    (evt, operator2) => {
-      const op = operator2 != null ? operator2 : void 0;
+  const handleSelectionChangeOperator = useCallback38(
+    (evt, selected) => {
+      const op = selected;
       if (op === void 0 || isValidFilterClauseOp(op)) {
         setOperator(op);
+        focusNextElement();
       } else {
         throw Error(
           `FilterClauseEditor, invalid value ${op} for filter clause`
         );
       }
     },
-    []
+    [setOperator]
   );
-  const handleChangeValue = useCallback27(
+  const handleChangeValue = useCallback38(
     (value2) => {
       setValue(value2);
       if (value2 !== null && value2 !== "") {
-        onChange({
-          column: selectedColumn == null ? void 0 : selectedColumn.name,
-          op: operator,
-          value: value2
-        });
+        if (Array.isArray(value2)) {
+          onChange({
+            column: selectedColumn == null ? void 0 : selectedColumn.name,
+            op: operator,
+            values: value2
+          });
+        } else {
+          onChange({
+            column: selectedColumn == null ? void 0 : selectedColumn.name,
+            op: operator,
+            value: value2
+          });
+        }
         requestAnimationFrame(() => {
           focusNextElement();
         });
@@ -4466,7 +5337,7 @@ var useFilterClauseEditor = ({
     },
     [onChange, operator, selectedColumn == null ? void 0 : selectedColumn.name]
   );
-  const handleKeyDownInput = useCallback27(
+  const handleKeyDownInput = useCallback38(
     (evt) => {
       if (["ArrowLeft", "ArrowRight"].includes(evt.key)) {
         navigateToNextInputIfAtBoundary(evt);
@@ -4476,7 +5347,7 @@ var useFilterClauseEditor = ({
     },
     [operator]
   );
-  const InputProps = useMemo12(
+  const InputProps = useMemo16(
     () => ({
       inputProps: {
         onKeyDown: handleKeyDownInput
@@ -4484,20 +5355,28 @@ var useFilterClauseEditor = ({
     }),
     [handleKeyDownInput]
   );
+  useEffect13(() => {
+    var _a2;
+    const columnInput = (_a2 = columnRef.current) == null ? void 0 : _a2.querySelector("input");
+    columnInput == null ? void 0 : columnInput.focus();
+  }, []);
   return {
     InputProps,
+    columnRef,
     onChangeValue: handleChangeValue,
     onSelectionChangeColumn: handleSelectionChangeColumn,
     onSelectionChangeOperator: handleSelectionChangeOperator,
     operator,
+    operatorRef,
     selectedColumn,
-    value
+    value,
+    valueRef
   };
 };
 
 // src/filter-clause/FilterClauseEditor.tsx
-import { jsx as jsx30, jsxs as jsxs9 } from "react/jsx-runtime";
-var classBase14 = "vuuFilterClause";
+import { jsx as jsx58, jsxs as jsxs27 } from "react/jsx-runtime";
+var classBase15 = "vuuFilterClause";
 var FilterClauseEditor = ({
   className,
   onChange,
@@ -4507,53 +5386,36 @@ var FilterClauseEditor = ({
   tableSchema,
   ...htmlAttributes
 }) => {
-  var _a;
+  var _a2;
   const { table, columns } = tableSchema;
-  const columnRef = useRef22(null);
-  const operatorRef = useRef22(null);
-  const valueRef = useRef22(null);
   const {
     InputProps,
+    columnRef,
     onChangeValue,
     onSelectionChangeColumn,
     onSelectionChangeOperator,
     operator,
+    operatorRef,
     selectedColumn,
-    value
+    value,
+    valueRef
   } = useFilterClauseEditor({
     filterClause,
     onChange,
     tableSchema
   });
-  useEffect6(() => {
-    var _a2;
-    if (selectedColumn === void 0) {
-      const columnInput = (_a2 = columnRef.current) == null ? void 0 : _a2.querySelector("input");
-      columnInput == null ? void 0 : columnInput.focus();
-    } else if (selectedColumn !== void 0 && operator === void 0 && operatorRef.current) {
-      const operatorInput = operatorRef.current.querySelector("input");
-      operatorInput == null ? void 0 : operatorInput.focus();
-    }
-  }, [operator, selectedColumn]);
-  useEffect6(() => {
-    if (operator !== void 0 && value === void 0 && valueRef.current) {
-      console.log(`Looks like operator has changed, is now ${operator}`);
-      const valueInput = valueRef.current.querySelector("input");
-      valueInput == null ? void 0 : valueInput.focus();
-    }
-  }, [operator, value]);
-  const getInputElement = useCallback28(() => {
+  const getInputElement = useCallback39(() => {
     if (selectedColumn === null || operator === void 0) {
       return null;
     }
     switch (selectedColumn == null ? void 0 : selectedColumn.serverDataType) {
       case "string":
       case "char":
-        return /* @__PURE__ */ jsx30(
+        return /* @__PURE__ */ jsx58(
           TextInput,
           {
             InputProps,
-            className: (0, import_classnames18.default)(`${classBase14}Field`, `${classBase14}Value`),
+            className: (0, import_classnames27.default)(`${classBase15}Field`, `${classBase15}Value`),
             column: selectedColumn,
             filterClause,
             onInputComplete: onChangeValue,
@@ -4567,11 +5429,11 @@ var FilterClauseEditor = ({
       case "int":
       case "long":
       case "double":
-        return /* @__PURE__ */ jsx30(
+        return /* @__PURE__ */ jsx58(
           NumericInput,
           {
             InputProps,
-            className: (0, import_classnames18.default)(`${classBase14}Field`, `${classBase14}Value`),
+            className: (0, import_classnames27.default)(`${classBase15}Field`, `${classBase15}Value`),
             column: selectedColumn,
             filterClause,
             onInputComplete: onChangeValue,
@@ -4592,30 +5454,33 @@ var FilterClauseEditor = ({
     InputProps,
     filterClause,
     onChangeValue,
+    valueRef,
     suggestionProvider,
     table,
     value
   ]);
-  return /* @__PURE__ */ jsxs9("div", { className: (0, import_classnames18.default)(classBase14, className), ...htmlAttributes, tabIndex: 0, children: [
-    /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs27("div", { className: (0, import_classnames27.default)(classBase15, className), ...htmlAttributes, tabIndex: 0, children: [
+    /* @__PURE__ */ jsx58(
       ExpandoCombobox,
       {
+        title: "column",
         InputProps,
-        className: (0, import_classnames18.default)(`${classBase14}Field`, `${classBase14}Column`),
+        className: (0, import_classnames27.default)(`${classBase15}Field`, `${classBase15}Column`),
         initialHighlightedIndex: 0,
         itemToString: (column) => column.name,
         ref: columnRef,
         source: columns,
         onSelectionChange: onSelectionChangeColumn,
-        value: (_a = selectedColumn == null ? void 0 : selectedColumn.name) != null ? _a : ""
+        value: (_a2 = selectedColumn == null ? void 0 : selectedColumn.name) != null ? _a2 : ""
       }
     ),
-    (selectedColumn == null ? void 0 : selectedColumn.name) ? /* @__PURE__ */ jsx30(
+    (selectedColumn == null ? void 0 : selectedColumn.name) ? /* @__PURE__ */ jsx58(
       ExpandoCombobox,
       {
+        title: "operator",
         InputProps,
-        className: (0, import_classnames18.default)(`${classBase14}Field`, `${classBase14}Operator`, {
-          [`${classBase14}Operator-hidden`]: selectedColumn === null
+        className: (0, import_classnames27.default)(`${classBase15}Field`, `${classBase15}Operator`, {
+          [`${classBase15}Operator-hidden`]: selectedColumn === null
         }),
         initialHighlightedIndex: 0,
         ref: operatorRef,
@@ -4625,20 +5490,20 @@ var FilterClauseEditor = ({
       }
     ) : null,
     getInputElement(),
-    value !== void 0 ? /* @__PURE__ */ jsx30(CloseButton, { className: `${classBase14}-closeButton`, onClick: onClose }) : null
+    value !== void 0 ? /* @__PURE__ */ jsx58(CloseButton, { className: `${classBase15}-closeButton`, onClick: onClose }) : null
   ] });
 };
 
 // src/filter-pill/FilterPill.tsx
-var import_classnames20 = __toESM(require_classnames(), 1);
+var import_classnames29 = __toESM(require_classnames(), 1);
 import { EditableLabel as EditableLabel2 } from "@vuu-ui/vuu-ui-controls";
 import { filterAsQuery, isMultiClauseFilter as isMultiClauseFilter2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback29, useRef as useRef23 } from "react";
+import { useCallback as useCallback40, useRef as useRef26 } from "react";
 
 // src/filter-pill-menu/FilterPillMenu.tsx
-var import_classnames19 = __toESM(require_classnames(), 1);
+var import_classnames28 = __toESM(require_classnames(), 1);
 import { PopupMenu as PopupMenu2 } from "@vuu-ui/vuu-popups";
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo17 } from "react";
 
 // src/filter-pill-menu/FilterPillMenuOptions.ts
 var closeCommand = (options) => ({
@@ -4667,8 +5532,8 @@ var editCommand = (options) => ({
 });
 
 // src/filter-pill-menu/FilterPillMenu.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
-var classBase15 = "vuuFilterPillMenu";
+import { jsx as jsx59 } from "react/jsx-runtime";
+var classBase16 = "vuuFilterPillMenu";
 var FilterPillMenu = ({
   allowClose = true,
   allowDelete = true,
@@ -4679,7 +5544,7 @@ var FilterPillMenu = ({
   onMenuAction,
   onMenuClose
 }) => {
-  const [menuBuilder, menuOptions] = useMemo13(
+  const [menuBuilder, menuOptions] = useMemo17(
     () => [
       (_location, options) => {
         const menuItems = [];
@@ -4703,13 +5568,13 @@ var FilterPillMenu = ({
     ],
     [allowClose, allowDelete, allowEdit, allowRename, filter]
   );
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx59(
     PopupMenu2,
     {
-      className: classBase15,
+      className: classBase16,
       menuBuilder,
       menuActionHandler: onMenuAction,
-      menuLocation: (0, import_classnames19.default)("filter", location),
+      menuLocation: (0, import_classnames28.default)("filter", location),
       menuOptions,
       onMenuClose,
       tabIndex: -1
@@ -4782,7 +5647,7 @@ var replaceClause = (existingFilter, clause) => {
   }
 };
 var addFilter = (existingFilter, filter, { combineWith = AND } = DEFAULT_ADD_FILTER_OPTS) => {
-  var _a;
+  var _a2;
   if (includesNoValues(filter)) {
     if (isMultiClauseFilter(filter)) {
     } else {
@@ -4793,7 +5658,7 @@ var addFilter = (existingFilter, filter, { combineWith = AND } = DEFAULT_ADD_FIL
   } else if (includesAllValues(filter)) {
     if (isMultiClauseFilter(filter)) {
     }
-    return removeFilterForColumn(existingFilter, { name: (_a = filter.column) != null ? _a : "" });
+    return removeFilterForColumn(existingFilter, { name: (_a2 = filter.column) != null ? _a2 : "" });
   }
   if (!existingFilter) {
     return filter;
@@ -5041,8 +5906,8 @@ var getNumericFilter = (column, op, value) => {
 };
 
 // src/filter-pill/FilterPill.tsx
-import { jsx as jsx32, jsxs as jsxs10 } from "react/jsx-runtime";
-var classBase16 = "vuuFilterPill";
+import { jsx as jsx60, jsxs as jsxs28 } from "react/jsx-runtime";
+var classBase17 = "vuuFilterPill";
 var getFilterLabel = (filter) => {
   if (filter.name) {
     return filter.name;
@@ -5063,12 +5928,12 @@ var FilterPill = ({
   showMenu = true,
   ...htmlAttributes
 }) => {
-  const rootRef = useRef23(null);
-  const handleEnterEditMode = useCallback29(() => {
+  const rootRef = useRef26(null);
+  const handleEnterEditMode = useCallback40(() => {
     onBeginEdit == null ? void 0 : onBeginEdit(filter);
   }, [filter, onBeginEdit]);
   const label = getFilterLabel(filter);
-  const handleMenuClose = useCallback29((reason) => {
+  const handleMenuClose = useCallback40((reason) => {
     if ((reason == null ? void 0 : reason.type) === "escape") {
       requestAnimationFrame(() => {
         if (rootRef.current) {
@@ -5077,15 +5942,15 @@ var FilterPill = ({
       });
     }
   }, []);
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       ...htmlAttributes,
-      className: (0, import_classnames20.default)(classBase16, classNameProp),
+      className: (0, import_classnames29.default)(classBase17, classNameProp),
       "data-text": label,
       ref: rootRef,
       children: [
-        editable && onExitEditMode ? /* @__PURE__ */ jsx32(
+        editable && onExitEditMode ? /* @__PURE__ */ jsx60(
           EditableLabel2,
           {
             defaultValue: label,
@@ -5093,8 +5958,8 @@ var FilterPill = ({
             onExitEditMode
           },
           label
-        ) : /* @__PURE__ */ jsx32("span", { className: `${classBase16}-label`, children: label }),
-        showMenu && onMenuAction ? /* @__PURE__ */ jsx32(
+        ) : /* @__PURE__ */ jsx60("span", { className: `${classBase17}-label`, children: label }),
+        showMenu && onMenuAction ? /* @__PURE__ */ jsx60(
           FilterPillMenu,
           {
             filter,
@@ -5110,27 +5975,28 @@ var FilterPill = ({
 // src/filter-bar/useFilterBar.ts
 import { dispatchMouseEvent as dispatchMouseEvent2, filterAsQuery as filterAsQuery2 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback31,
-  useMemo as useMemo14,
-  useRef as useRef24,
-  useState as useState16
+  useCallback as useCallback42,
+  useEffect as useEffect15,
+  useMemo as useMemo18,
+  useRef as useRef27,
+  useState as useState25
 } from "react";
 
 // src/filter-bar/useFilters.ts
-import { useControlled as useControlled4 } from "@vuu-ui/vuu-ui-controls";
-import { useCallback as useCallback30 } from "react";
+import { useControlled as useControlled5 } from "@vuu-ui/vuu-ui-controls";
+import { useCallback as useCallback41 } from "react";
 var useFilters = ({
   defaultFilters,
   filters: filtersProp,
   onFiltersChanged
 }) => {
-  const [filters, setFilters] = useControlled4({
+  const [filters, setFilters] = useControlled5({
     controlled: filtersProp,
     default: defaultFilters != null ? defaultFilters : [],
     name: "useFilters",
     state: "Filters"
   });
-  const handleAddFilter = useCallback30(
+  const handleAddFilter = useCallback41(
     (filter) => {
       const index = filters.length;
       const newFilters = filters.concat(filter);
@@ -5140,7 +6006,7 @@ var useFilters = ({
     },
     [filters, onFiltersChanged, setFilters]
   );
-  const handleDeleteFilter = useCallback30(
+  const handleDeleteFilter = useCallback41(
     (filter) => {
       let index = -1;
       const newFilters = filters.filter((f, i) => {
@@ -5157,7 +6023,7 @@ var useFilters = ({
     },
     [filters, onFiltersChanged, setFilters]
   );
-  const handleRenameFilter = useCallback30(
+  const handleRenameFilter = useCallback41(
     (filter, name) => {
       let index = -1;
       const newFilters = filters.map((f, i) => {
@@ -5174,7 +6040,7 @@ var useFilters = ({
     },
     [filters, onFiltersChanged, setFilters]
   );
-  const handleChangeFilter = useCallback30(
+  const handleChangeFilter = useCallback41(
     (filter) => {
       let index = -1;
       const newFilters = filters.map((f, i) => {
@@ -5206,16 +6072,15 @@ var useFilterBar = ({
   activeFilterIndex: activeFilterIdexProp = [],
   containerRef,
   filters: filtersProp,
-  onActiveChange,
   onApplyFilter,
   onFiltersChanged,
   showMenu: showMenuProp
 }) => {
-  const editingFilter = useRef24();
-  const [activeFilterIndex, setActiveFilterIndex] = useState16(activeFilterIdexProp);
-  const [showMenu, setShowMenu] = useState16(showMenuProp);
-  const [editFilter, setEditFilter] = useState16();
-  const [promptProps, setPromptProps] = useState16(null);
+  const editingFilter = useRef27();
+  const [activeFilterIndex, setActiveFilterIndex] = useState25(activeFilterIdexProp);
+  const [showMenu, setShowMenu] = useState25(showMenuProp);
+  const [editFilter, setEditFilter] = useState25();
+  const [promptProps, setPromptProps] = useState25(null);
   const {
     filters,
     onAddFilter,
@@ -5226,11 +6091,11 @@ var useFilterBar = ({
     filters: filtersProp,
     onFiltersChanged
   });
-  const editPillLabel = useCallback31(
+  const editPillLabel = useCallback42(
     (index) => {
       requestAnimationFrame(() => {
-        var _a;
-        const pills = (_a = containerRef.current) == null ? void 0 : _a.querySelectorAll(
+        var _a2;
+        const pills = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelectorAll(
           ".vuuFilterPill"
         );
         if (pills == null ? void 0 : pills[index]) {
@@ -5245,11 +6110,11 @@ var useFilterBar = ({
     },
     [containerRef]
   );
-  const focusFilterClause = useCallback31(
+  const focusFilterClause = useCallback42(
     (index = 0) => {
       requestAnimationFrame(() => {
-        var _a;
-        const input = (_a = containerRef.current) == null ? void 0 : _a.querySelector(
+        var _a2;
+        const input = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector(
           ".vuuFilterClause .saltInput-input"
         );
         if (input) {
@@ -5259,11 +6124,11 @@ var useFilterBar = ({
     },
     [containerRef]
   );
-  const focusFilterPill = useCallback31(
+  const focusFilterPill = useCallback42(
     (index) => {
       requestAnimationFrame(() => {
-        var _a, _b;
-        const target = typeof index === "number" ? (_a = containerRef.current) == null ? void 0 : _a.querySelector(
+        var _a2, _b;
+        const target = typeof index === "number" ? (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector(
           `.vuuOverflowContainer-item[data-index="${index}"] .vuuFilterPill`
         ) : (_b = containerRef.current) == null ? void 0 : _b.querySelector(
           ".vuuFilterPill[tabindex]"
@@ -5275,7 +6140,7 @@ var useFilterBar = ({
     },
     [containerRef]
   );
-  const applyFilter = useCallback31(
+  const applyFilter = useCallback42(
     (filter) => {
       const filterQuery = filter ? filterAsQuery2(filter) : "";
       onApplyFilter({
@@ -5285,30 +6150,7 @@ var useFilterBar = ({
     },
     [onApplyFilter]
   );
-  const handleFilterActivation = useCallback31(
-    (activeIndices) => {
-      if (activeIndices.length > 0) {
-        const activeFilters = activeIndices.map(
-          (index) => filters[index]
-        );
-        if (activeFilters.length === 1) {
-          const [filter] = activeFilters;
-          applyFilter(filter);
-        } else {
-          applyFilter({
-            op: "and",
-            filters: activeFilters
-          });
-        }
-      } else {
-        applyFilter();
-      }
-      setActiveFilterIndex(activeIndices);
-      onActiveChange == null ? void 0 : onActiveChange(activeIndices);
-    },
-    [applyFilter, filters, onActiveChange]
-  );
-  const deleteConfirmed = useCallback31(
+  const deleteConfirmed = useCallback42(
     (filter) => {
       const indexOfFilter = filters.indexOf(filter);
       if (activeFilterIndex.includes(indexOfFilter)) {
@@ -5318,8 +6160,8 @@ var useFilterBar = ({
       }
       const indexOfDeletedFilter = onDeleteFilter == null ? void 0 : onDeleteFilter(filter);
       if (activeFilterIndex.includes(indexOfDeletedFilter)) {
-        handleFilterActivation(
-          activeFilterIndex.filter((i) => i !== indexOfDeletedFilter)
+        setActiveFilterIndex(
+          (indices) => indices.filter((i) => i !== indexOfDeletedFilter)
         );
       }
       requestAnimationFrame(() => {
@@ -5328,15 +6170,9 @@ var useFilterBar = ({
         }
       });
     },
-    [
-      activeFilterIndex,
-      filters,
-      focusFilterPill,
-      handleFilterActivation,
-      onDeleteFilter
-    ]
+    [activeFilterIndex, filters, focusFilterPill, onDeleteFilter]
   );
-  const getDeletePrompt = useMemo14(
+  const getDeletePrompt = useMemo18(
     () => (filter) => {
       const close = () => {
         setPromptProps(null);
@@ -5358,7 +6194,7 @@ var useFilterBar = ({
     },
     [deleteConfirmed, focusFilterPill]
   );
-  const deleteFilter = useCallback31(
+  const deleteFilter = useCallback42(
     (filter, withPrompt) => {
       if (withPrompt) {
         setPromptProps(getDeletePrompt(filter));
@@ -5368,10 +6204,10 @@ var useFilterBar = ({
     },
     [deleteConfirmed, getDeletePrompt]
   );
-  const handleBeginEditFilterName = useCallback31((filter) => {
+  const handleBeginEditFilterName = useCallback42((filter) => {
     editingFilter.current = filter;
   }, []);
-  const handleExitEditFilterName = useCallback31(
+  const handleExitEditFilterName = useCallback42(
     (_, editedValue = "") => {
       if (editingFilter.current) {
         const indexOfEditedFilter = onRenameFilter(
@@ -5384,7 +6220,7 @@ var useFilterBar = ({
     },
     [focusFilterPill, onRenameFilter]
   );
-  const handlePillMenuAction = useCallback31(
+  const handlePillMenuAction = useCallback42(
     ({ menuId, options }) => {
       switch (menuId) {
         case "delete-filter": {
@@ -5411,7 +6247,7 @@ var useFilterBar = ({
     },
     [deleteFilter, editPillLabel, filters, focusFilterClause]
   );
-  const handleMenuAction = useCallback31(
+  const handleMenuAction = useCallback42(
     ({ menuId }) => {
       switch (menuId) {
         case "apply-save": {
@@ -5423,11 +6259,10 @@ var useFilterBar = ({
             editPillLabel(indexOfNewFilter);
           }
           setEditFilter(void 0);
-          if (!activeFilterIndex.includes(indexOfNewFilter)) {
-            handleFilterActivation(activeFilterIndex.concat(indexOfNewFilter));
-          }
+          setActiveFilterIndex(
+            (indices) => indices.includes(indexOfNewFilter) ? indices : indices.concat(indexOfNewFilter)
+          );
           setShowMenu(false);
-          applyFilter(newFilter);
           return true;
         }
         case "and-clause":
@@ -5446,20 +6281,36 @@ var useFilterBar = ({
           return false;
       }
     },
-    [
-      activeFilterIndex,
-      applyFilter,
-      editFilter,
-      editPillLabel,
-      handleFilterActivation,
-      onAddFilter,
-      onChangeFilter
-    ]
+    [editFilter, editPillLabel, onAddFilter, onChangeFilter]
+  );
+  useEffect15(() => {
+    if (activeFilterIndex.length > 0) {
+      const activeFilters = activeFilterIndex.map(
+        (index) => filters[index]
+      );
+      if (activeFilters.length === 1) {
+        const [filter] = activeFilters;
+        applyFilter(filter);
+      } else {
+        applyFilter({
+          op: "and",
+          filters: activeFilters
+        });
+      }
+    } else {
+      applyFilter();
+    }
+  }, [activeFilterIndex, applyFilter, filters]);
+  const handleChangeActiveFilterIndex = useCallback42(
+    (itemIndex) => {
+      setActiveFilterIndex(itemIndex);
+    },
+    []
   );
-  const handleClickAddFilter = useCallback31(() => {
+  const handleClickAddFilter = useCallback42(() => {
     setEditFilter({});
   }, []);
-  const handleClickRemoveFilter = useCallback31(() => {
+  const handleClickRemoveFilter = useCallback42(() => {
     setEditFilter(void 0);
   }, []);
   const pillProps = {
@@ -5468,12 +6319,13 @@ var useFilterBar = ({
     onExitEditMode: handleExitEditFilterName
   };
   const handleChangeFilterClause = (filterClause) => {
+    console.log({ filterClause });
     if (filterClause !== void 0) {
       setEditFilter((filter) => replaceClause(filter, filterClause));
       setShowMenu(true);
     }
   };
-  const onKeyDown = useCallback31(
+  const onKeyDown = useCallback42(
     (evt) => {
       if (evt.key === "Escape" && editFilter !== void 0) {
         setEditFilter(void 0);
@@ -5487,10 +6339,10 @@ var useFilterBar = ({
     activeFilterIndex,
     editFilter,
     filters,
+    onChangeActiveFilterIndex: handleChangeActiveFilterIndex,
     onClickAddFilter: handleClickAddFilter,
     onClickRemoveFilter: handleClickRemoveFilter,
     onChangeFilterClause: handleChangeFilterClause,
-    onFilterActivation: handleFilterActivation,
     onKeyDown,
     onMenuAction: handleMenuAction,
     pillProps,
@@ -5500,22 +6352,21 @@ var useFilterBar = ({
 };
 
 // src/filter-bar/FilterBar.tsx
-import { jsx as jsx33, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs29 } from "react/jsx-runtime";
 import { createElement } from "react";
-var classBase17 = "vuuFilterBar";
+var classBase18 = "vuuFilterBar";
 var FilterBar = ({
-  activeFilterIndex: activeFilterIndexProp,
+  activeFilterIndex: activeFilterIndexProp = [],
   FilterClauseEditorProps: FilterClauseEditorProps2,
   className: classNameProp,
   filters: filtersProp,
-  onActiveChange,
   onApplyFilter,
   onFiltersChanged,
   showMenu: showMenuProp = false,
   tableSchema,
   ...htmlAttributes
 }) => {
-  const rootRef = useRef25(null);
+  const rootRef = useRef28(null);
   const {
     activeFilterIndex,
     editFilter,
@@ -5523,7 +6374,7 @@ var FilterBar = ({
     onClickAddFilter,
     onClickRemoveFilter,
     onChangeFilterClause,
-    onFilterActivation,
+    onChangeActiveFilterIndex,
     onKeyDown,
     onMenuAction,
     pillProps,
@@ -5533,14 +6384,13 @@ var FilterBar = ({
     activeFilterIndex: activeFilterIndexProp,
     containerRef: rootRef,
     filters: filtersProp,
-    onActiveChange,
     onApplyFilter,
     onFiltersChanged,
     showMenu: showMenuProp
   });
-  const className = (0, import_classnames21.default)(classBase17, classNameProp, {
-    [`${classBase17}-display`]: editFilter === void 0,
-    [`${classBase17}-edit`]: editFilter !== void 0
+  const className = (0, import_classnames30.default)(classBase18, classNameProp, {
+    [`${classBase18}-display`]: editFilter === void 0,
+    [`${classBase18}-edit`]: editFilter !== void 0
   });
   const onClose = () => console.log("Closing filter component");
   const getChildren2 = () => {
@@ -5551,19 +6401,6 @@ var FilterBar = ({
           /* @__PURE__ */ createElement(FilterPill, { ...pillProps, filter, key: `filter-${i}` })
         );
       });
-      items.push(
-        /* @__PURE__ */ jsx33(
-          Button4,
-          {
-            className: `${classBase17}-add`,
-            "data-icon": "plus",
-            "data-selectable": false,
-            onClick: onClickAddFilter,
-            variant: "primary"
-          },
-          "filter-add"
-        )
-      );
       return items;
     } else if (editFilter) {
       const filterClauses2 = filterClauses(editFilter);
@@ -5584,14 +6421,14 @@ var FilterBar = ({
       });
       if (showMenu) {
         items.push(
-          /* @__PURE__ */ jsx33(FilterBuilderMenu, { onMenuAction }, "menu")
+          /* @__PURE__ */ jsx61(FilterBuilderMenu, { onMenuAction }, "menu")
         );
       }
       items.push(
-        /* @__PURE__ */ jsx33(
-          Button4,
+        /* @__PURE__ */ jsx61(
+          Button10,
           {
-            className: `${classBase17}-remove`,
+            className: `${classBase18}-remove`,
             "data-align": "right",
             "data-icon": "cross",
             onClick: onClickRemoveFilter,
@@ -5603,7 +6440,7 @@ var FilterBar = ({
       return items;
     }
   };
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       ...htmlAttributes,
@@ -5611,18 +6448,30 @@ var FilterBar = ({
       onKeyDown,
       ref: rootRef,
       children: [
-        /* @__PURE__ */ jsx33("span", { className: `${classBase17}-icon`, "data-icon": "tune" }),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx61("span", { className: `${classBase18}-icon`, "data-icon": "tune" }),
+        /* @__PURE__ */ jsx61(
           Toolbar,
           {
             activeItemIndex: activeFilterIndex,
             height: 26,
-            onActiveChange: onFilterActivation,
+            onActiveChange: onChangeActiveFilterIndex,
             selectionStrategy: "multiple-special-key",
             children: getChildren2()
           }
         ),
-        promptProps ? /* @__PURE__ */ jsx33(
+        editFilter === void 0 ? /* @__PURE__ */ jsx61(
+          Button10,
+          {
+            className: `${classBase18}-add`,
+            "data-icon": "plus",
+            "data-selectable": false,
+            onClick: onClickAddFilter,
+            tabIndex: 0,
+            variant: "primary"
+          },
+          "filter-add"
+        ) : null,
+        promptProps ? /* @__PURE__ */ jsx61(
           Prompt,
           {
             ...promptProps,
@@ -5639,7 +6488,7 @@ var FilterBar = ({
 };
 
 // src/filter-input/FilterInput.tsx
-import { Button as Button5 } from "@salt-ds/core";
+import { Button as Button11 } from "@salt-ds/core";
 
 // src/filter-input/useCodeMirrorEditor.ts
 import {
@@ -6069,7 +6918,7 @@ function enterUnfinishedNodesBefore(node, pos) {
   return node;
 }
 function resolveNode(node, pos, side, overlays) {
-  var _a;
+  var _a2;
   while (node.from == node.to || (side < 1 ? node.from >= pos : node.from > pos) || (side > -1 ? node.to <= pos : node.to < pos)) {
     let parent = !overlays && node instanceof TreeNode && node.index < 0 ? null : node.parent;
     if (!parent)
@@ -6079,7 +6928,7 @@ function resolveNode(node, pos, side, overlays) {
   let mode = overlays ? 0 : IterMode.IgnoreOverlays;
   if (overlays)
     for (let scan = node, parent = scan.parent; parent; scan = parent, parent = scan.parent) {
-      if (scan instanceof TreeNode && scan.index < 0 && ((_a = parent.enter(pos, side, mode)) === null || _a === void 0 ? void 0 : _a.from) != scan.from)
+      if (scan instanceof TreeNode && scan.index < 0 && ((_a2 = parent.enter(pos, side, mode)) === null || _a2 === void 0 ? void 0 : _a2.from) != scan.from)
         node = parent;
     }
   for (; ; ) {
@@ -6229,8 +7078,8 @@ var TreeNode = class {
     return enterUnfinishedNodesBefore(this, pos);
   }
   getChild(type, before = null, after = null) {
-    let r = getChildren(this, type, before, after);
-    return r.length ? r[0] : null;
+    let r2 = getChildren(this, type, before, after);
+    return r2.length ? r2[0] : null;
   }
   getChildren(type, before = null, after = null) {
     return getChildren(this, type, before, after);
@@ -6408,8 +7257,8 @@ var BufferNode = class {
     return this.context.buffer.childString(this.index);
   }
   getChild(type, before = null, after = null) {
-    let r = getChildren(this, type, before, after);
-    return r.length ? r[0] : null;
+    let r2 = getChildren(this, type, before, after);
+    return r2.length ? r2[0] : null;
   }
   getChildren(type, before = null, after = null) {
     return getChildren(this, type, before, after);
@@ -6723,7 +7572,7 @@ function hasChild(tree) {
   return tree.children.some((ch) => ch instanceof TreeBuffer || !ch.type.isAnonymous || hasChild(ch));
 }
 function buildTree(data) {
-  var _a;
+  var _a2;
   let { buffer, nodeSet, maxBufferLength = DefaultBufferLength, reused = [], minRepeatType = nodeSet.types.length } = data;
   let cursor = Array.isArray(buffer) ? new FlatBufferCursor(buffer, buffer.length) : buffer;
   let types = nodeSet.types;
@@ -6889,7 +7738,7 @@ function buildTree(data) {
   let children = [], positions = [];
   while (cursor.pos > 0)
     takeNode(data.start || 0, data.bufferStart || 0, children, positions, -1);
-  let length = (_a = data.length) !== null && _a !== void 0 ? _a : children.length ? positions[0] + children[0].length : 0;
+  let length = (_a2 = data.length) !== null && _a2 !== void 0 ? _a2 : children.length ? positions[0] + children[0].length : 0;
   return new Tree2(types[data.topID], children.reverse(), positions.reverse(), length);
 }
 var nodeSizeCache = /* @__PURE__ */ new WeakMap();
@@ -6958,7 +7807,7 @@ var Parser = class {
   startParse(input, fragments, ranges) {
     if (typeof input == "string")
       input = new StringInput(input);
-    ranges = !ranges ? [new Range(0, input.length)] : ranges.length ? ranges.map((r) => new Range(r.from, r.to)) : [new Range(0, 0)];
+    ranges = !ranges ? [new Range(0, input.length)] : ranges.length ? ranges.map((r2) => new Range(r2.from, r2.to)) : [new Range(0, 0)];
     return this.createParse(input, fragments || [], ranges);
   }
   /// Run a full parse, returning the resulting tree.
@@ -7013,8 +7862,8 @@ var Stack3 = class {
   // Start an empty stack
   /// @internal
   static start(p, state, pos = 0) {
-    let cx22 = p.parser.context;
-    return new Stack3(p, [], state, pos, pos, 0, [], 0, cx22 ? new StackContext(cx22, cx22.start) : null, 0, null);
+    let cx31 = p.parser.context;
+    return new Stack3(p, [], state, pos, pos, 0, [], 0, cx31 ? new StackContext(cx31, cx31.start) : null, 0, null);
   }
   /// The stack's current [context](#lr.ContextTracker) value, if
   /// any. Its type will depend on the context tracker's type
@@ -7033,7 +7882,7 @@ var Stack3 = class {
   // Apply a reduce action
   /// @internal
   reduce(action) {
-    var _a;
+    var _a2;
     let depth = action >> 19, type = action & 65535;
     let { parser: parser2 } = this.p;
     let dPrec = parser2.dynamicPrecedence(type);
@@ -7048,7 +7897,7 @@ var Stack3 = class {
     }
     let base = this.stack.length - (depth - 1) * 3 - (action & 262144 ? 6 : 0);
     let start2 = base ? this.stack[base - 2] : this.p.ranges[0].from, size = this.reducePos - start2;
-    if (size >= 2e3 && !((_a = this.p.parser.nodeSet.types[type]) === null || _a === void 0 ? void 0 : _a.isAnonymous)) {
+    if (size >= 2e3 && !((_a2 = this.p.parser.nodeSet.types[type]) === null || _a2 === void 0 ? void 0 : _a2.isAnonymous)) {
       if (start2 == this.p.lastBigReductionStart) {
         this.p.bigReductionCount++;
         this.p.lastBigReductionSize = size;
@@ -7707,11 +8556,11 @@ var InputStream = class {
     if (from >= this.range.from && to <= this.range.to)
       return this.input.read(from, to);
     let result = "";
-    for (let r of this.ranges) {
-      if (r.from >= to)
+    for (let r2 of this.ranges) {
+      if (r2.from >= to)
         break;
-      if (r.to > from)
-        result += this.input.read(Math.max(r.from, from), Math.min(r.to, to));
+      if (r2.to > from)
+        result += this.input.read(Math.max(r2.from, from), Math.min(r2.to, to));
     }
     return result;
   }
@@ -8342,7 +9191,7 @@ var LRParser = class extends Parser {
     this.minRepeatTerm = nodeNames.length;
     for (let i = 0; i < spec.repeatNodeCount; i++)
       nodeNames.push("");
-    let topTerms = Object.keys(spec.topRules).map((r) => spec.topRules[r][1]);
+    let topTerms = Object.keys(spec.topRules).map((r2) => spec.topRules[r2][1]);
     let nodeProps = [];
     for (let i = 0; i < nodeNames.length; i++)
       nodeProps.push([]);
@@ -8522,13 +9371,13 @@ var LRParser = class extends Parser {
     }
     if (config.tokenizers)
       copy.tokenizers = this.tokenizers.map((t) => {
-        let found = config.tokenizers.find((r) => r.from == t);
+        let found = config.tokenizers.find((r2) => r2.from == t);
         return found ? found.to : t;
       });
     if (config.specializers) {
       copy.specializers = this.specializers.slice();
       copy.specializerSpecs = this.specializerSpecs.map((s, i) => {
-        let found = config.specializers.find((r) => r.from == s.external);
+        let found = config.specializers.find((r2) => r2.from == s.external);
         if (!found)
           return s;
         let spec = Object.assign(Object.assign({}, s), { external: found.to });
@@ -8688,14 +9537,14 @@ var FilterExpression = class {
     }
   }
   setValue(value, filter = __privateGet(this, _filter)) {
-    var _a;
+    var _a2;
     if (isMultiClauseFilter3(filter)) {
       const target = filter.filters.at(-1);
       if (target) {
         this.setValue(value, target);
       }
     } else if (isMultiValueFilter3(filter)) {
-      (_a = filter.values) != null ? _a : filter.values = [];
+      (_a2 = filter.values) != null ? _a2 : filter.values = [];
       filter.values.push(value);
     } else if (isSingleValueFilter3(filter)) {
       filter.value = value;
@@ -8760,8 +9609,8 @@ var walkTree = (tree, source) => {
 var strictParser = parser.configure({ strict: true });
 
 // src/filter-input/useCodeMirrorEditor.ts
-var import_classnames22 = __toESM(require_classnames(), 1);
-import { useEffect as useEffect7, useMemo as useMemo15, useRef as useRef26 } from "react";
+var import_classnames31 = __toESM(require_classnames(), 1);
+import { useEffect as useEffect16, useMemo as useMemo19, useRef as useRef29 } from "react";
 
 // src/filter-input/FilterLanguage.ts
 import {
@@ -8879,7 +9728,7 @@ import {
   getValue,
   syntaxTree
 } from "@vuu-ui/vuu-codemirror";
-import { useCallback as useCallback32 } from "react";
+import { useCallback as useCallback43 } from "react";
 var getOperator = (node, state) => {
   let maybeColumnNode = node.prevSibling || node.parent;
   while (maybeColumnNode && !["Column", "Operator", "In"].includes(maybeColumnNode.name)) {
@@ -8949,7 +9798,7 @@ var getSetValues = (node, state) => {
   return values;
 };
 var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
-  const makeSuggestions = useCallback32(
+  const makeSuggestions = useCallback43(
     async (context, suggestionType, optionalArgs = {}) => {
       const { startsWith = "" } = optionalArgs;
       const options = await suggestionProvider.getSuggestions(
@@ -8960,11 +9809,11 @@ var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
     },
     [suggestionProvider]
   );
-  return useCallback32(
+  return useCallback43(
     async (context) => {
-      var _a, _b;
+      var _a2, _b;
       const { state, pos } = context;
-      const word = (_a = context.matchBefore(/\w*/)) != null ? _a : {
+      const word = (_a2 = context.matchBefore(/\w*/)) != null ? _a2 : {
         from: 0,
         to: 0,
         text: void 0
@@ -9126,7 +9975,7 @@ var getView = (ref) => {
   return ref.current;
 };
 var getOptionClass = (completion) => {
-  return (0, import_classnames22.default)("vuuSuggestion", {
+  return (0, import_classnames31.default)("vuuSuggestion", {
     vuuIllustration: completion.isIllustration
   });
 };
@@ -9144,15 +9993,15 @@ var useCodeMirrorEditor = ({
   onSubmitFilter,
   suggestionProvider
 }) => {
-  const editorRef = useRef26(null);
-  const onSubmit = useRef26(noop);
-  const viewRef = useRef26();
+  const editorRef = useRef29(null);
+  const onSubmit = useRef29(noop);
+  const viewRef = useRef29();
   const completionFn = useAutoComplete(
     suggestionProvider,
     onSubmit,
     existingFilter
   );
-  const [createState, clearInput] = useMemo15(() => {
+  const [createState, clearInput] = useMemo19(() => {
     const parseFilter2 = () => {
       const view = getView(viewRef);
       const source = view.state.doc.toString();
@@ -9227,7 +10076,7 @@ var useCodeMirrorEditor = ({
     };
     return [createState2, clearInput2];
   }, [completionFn, onSubmitFilter]);
-  useEffect7(() => {
+  useEffect16(() => {
     if (!editorRef.current) {
       throw Error("editor not in dom");
     }
@@ -9236,16 +10085,16 @@ var useCodeMirrorEditor = ({
       parent: editorRef.current
     });
     return () => {
-      var _a;
-      (_a = viewRef.current) == null ? void 0 : _a.destroy();
+      var _a2;
+      (_a2 = viewRef.current) == null ? void 0 : _a2.destroy();
     };
   }, [completionFn, createState]);
   return { editorRef, clearInput };
 };
 
 // src/filter-input/FilterInput.tsx
-import { jsx as jsx34, jsxs as jsxs12 } from "react/jsx-runtime";
-var classBase18 = "vuuFilterInput";
+import { jsx as jsx62, jsxs as jsxs30 } from "react/jsx-runtime";
+var classBase19 = "vuuFilterInput";
 var FilterInput = ({
   existingFilter,
   iconName = "filter",
@@ -9259,20 +10108,20 @@ var FilterInput = ({
     onSubmitFilter,
     suggestionProvider
   });
-  return /* @__PURE__ */ jsxs12("div", { ...props, className: classBase18, children: [
-    /* @__PURE__ */ jsx34(
-      Button5,
+  return /* @__PURE__ */ jsxs30("div", { ...props, className: classBase19, children: [
+    /* @__PURE__ */ jsx62(
+      Button11,
       {
-        className: `${classBase18}-FilterButton`,
+        className: `${classBase19}-FilterButton`,
         "data-icon": iconName,
         tabIndex: -1
       }
     ),
-    /* @__PURE__ */ jsx34("div", { className: `${classBase18}-Editor`, ref: editorRef }),
-    /* @__PURE__ */ jsx34(
-      Button5,
+    /* @__PURE__ */ jsx62("div", { className: `${classBase19}-Editor`, ref: editorRef }),
+    /* @__PURE__ */ jsx62(
+      Button11,
       {
-        className: `${classBase18}-ClearButton`,
+        className: `${classBase19}-ClearButton`,
         "data-icon": "close-circle",
         onClick: clearInput
       }
@@ -9293,7 +10142,7 @@ import {
   getTypeaheadParams,
   useTypeaheadSuggestions as useTypeaheadSuggestions2
 } from "@vuu-ui/vuu-data-react";
-import { useCallback as useCallback33, useRef as useRef27 } from "react";
+import { useCallback as useCallback44, useRef as useRef30 } from "react";
 
 // src/filter-input/filterInfo.ts
 import { createEl } from "@vuu-ui/vuu-utils";
@@ -9389,9 +10238,9 @@ var useFilterSuggestionProvider = ({
   table,
   typeaheadHook: useTypeahead = useTypeaheadSuggestions2
 }) => {
-  const latestSuggestionsRef = useRef27();
+  const latestSuggestionsRef = useRef30();
   const getTypeaheadSuggestions = useTypeahead();
-  const getSuggestions = useCallback33(
+  const getSuggestions = useCallback44(
     async (suggestionType, options = NONE) => {
       const {
         columnName,
@@ -9481,7 +10330,7 @@ var useFilterSuggestionProvider = ({
     },
     [columns, getTypeaheadSuggestions, namedFilters, saveOptions, table]
   );
-  const isPartialMatch = useCallback33(
+  const isPartialMatch = useCallback44(
     async (valueType, columnName, pattern) => {
       const suggestions = (
         // latestSuggestions && latestSuggestions.length > 0