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

package/cjs/index.js

@@ -244,14 +244,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] = (0, import_vuu_utils.partition)(children, isDrawer);
   const [verticalDrawers, horizontalDrawers] = (0, import_vuu_utils.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__ */ (0, import_jsx_runtime2.jsxs)("div", { className, id, style, children: [
     drawers,
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `${classBase19}-content`, children: content })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `${classBase20}-content`, children: content })
   ] });
 };
 DockLayout.displayName = "DockLayout";
@@ -273,9 +273,9 @@ var import_react3 = __toESM(require("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;
 
@@ -570,8 +570,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");
@@ -593,7 +593,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 },
@@ -607,7 +607,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;
@@ -755,12 +755,12 @@ var Splitter = import_react6.default.memo(function Splitter2({
     [column, index, onDrag]
   );
   const handleMouseUp = (0, import_react6.useCallback)(() => {
-    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 = (0, import_react6.useCallback)(
     (e) => {
@@ -774,11 +774,11 @@ var Splitter = import_react6.default.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 = () => {
@@ -853,9 +853,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 {
@@ -970,8 +970,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;
@@ -980,8 +980,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;
@@ -1760,10 +1760,10 @@ var import_react32 = require("react");
 // ../vuu-layout/src/layout-view/useViewActionDispatcher.ts
 var import_react27 = require("react");
 var useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
-  var _a;
+  var _a2;
   const { loadSessionState, purgeSessionState, purgeState, saveSessionState } = usePersistentState();
   const [contributions, setContributions] = (0, import_react27.useState)(
-    (_a = loadSessionState(id, "contributions")) != null ? _a : []
+    (_a2 = loadSessionState(id, "contributions")) != null ? _a2 : []
   );
   const dispatchLayoutAction = useLayoutProviderDispatch();
   const updateContributions = (0, import_react27.useCallback)(
@@ -1798,9 +1798,9 @@ var useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
   ]);
   const handleMouseDown = (0, import_react27.useCallback)(
     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",
@@ -1818,13 +1818,13 @@ var useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
   );
   const dispatchAction = (0, import_react27.useCallback)(
     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":
@@ -1880,8 +1880,8 @@ var useView = ({
   );
   const title = (0, import_react28.useMemo)(
     () => {
-      var _a;
-      return (_a = loadState("view-title")) != null ? _a : titleProp;
+      var _a2;
+      return (_a2 = loadState("view-title")) != null ? _a2 : titleProp;
     },
     [loadState, titleProp]
   );
@@ -1984,9 +1984,9 @@ var import_react30 = __toESM(require("react"));
 var NO_CONTEXT = { dispatch: null };
 var ViewContext = import_react30.default.createContext(NO_CONTEXT);
 var useViewDispatch = () => {
-  var _a;
+  var _a2;
   const context = (0, import_react30.useContext)(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
@@ -2147,8 +2147,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();
@@ -2168,7 +2168,7 @@ var Header = ({
     }
   };
   const handleExitEditMode = (originalValue = "", finalValue = "", allowDeactivation = true, editCancelled = false) => {
-    var _a;
+    var _a2;
     setEditing(false);
     if (editCancelled) {
       setValue(originalValue);
@@ -2177,7 +2177,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) => {
@@ -2244,15 +2244,781 @@ var Header = ({
   );
 };
 
-// ../vuu-layout/src/measured-container/MeasuredContainer.tsx
-var import_react35 = require("react");
+// ../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/measured-container/useMeasuredContainer.ts
+// ../vuu-layout/src/layout-persistence/LocalLayoutPersistenceManager.ts
 var import_vuu_utils9 = require("@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 = (0, import_vuu_utils9.getUniqueId)();
+          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_react33 = __toESM(require("react"));
+var import_classnames11 = __toESM(require_classnames());
+var import_jsx_runtime16 = require("react/jsx-runtime");
+
+// ../vuu-shell/src/density-switch/DensitySwitch.tsx
+var import_lab = require("@salt-ds/lab");
 var import_react34 = require("react");
+var import_classnames12 = __toESM(require_classnames());
+var import_jsx_runtime17 = require("react/jsx-runtime");
+
+// ../vuu-shell/src/feature/Feature.tsx
+var import_react36 = __toESM(require("react"));
+
+// ../vuu-shell/src/feature/FeatureErrorBoundary.tsx
+var import_react35 = __toESM(require("react"));
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var FeatureErrorBoundary = class extends import_react35.default.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__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h1", { children: "An error occured while creating component." }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { children: this.state.errorMessage })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+
+// ../vuu-shell/src/feature/Loader.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Loader = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("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
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var componentsMap = /* @__PURE__ */ new Map();
+var useCachedFeature = (url) => {
+  (0, import_react36.useEffect)(
+    () => () => {
+      componentsMap.delete(url);
+    },
+    [url]
+  );
+  if (!componentsMap.has(url)) {
+    componentsMap.set(
+      url,
+      import_react36.default.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__ */ (0, import_jsx_runtime20.jsx)(FeatureErrorBoundary, { url, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react36.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Loader, {}), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LazyFeature, { ...props, ...params }) }) });
+}
+var Feature = import_react36.default.memo(RawFeature);
+Feature.displayName = "Feature";
+registerComponent("Feature", Feature, "view");
+
+// ../vuu-shell/src/layout-management/SaveLayoutPanel.tsx
+var import_react37 = require("react");
+var import_core6 = require("@salt-ds/core");
+var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var classBase9 = "saveLayoutPanel";
+var formField = `${classBase9}-formField`;
+
+// ../vuu-shell/src/layout-management/LayoutList.tsx
+var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
+
+// ../vuu-shell/src/layout-management/useLayoutManager.tsx
+var import_react38 = __toESM(require("react"));
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var persistenceManager = new LocalLayoutPersistenceManager();
+var LayoutManagementContext = import_react38.default.createContext({
+  layoutMetadata: [],
+  saveLayout: () => {
+  },
+  applicationLayout: defaultLayout,
+  saveApplicationLayout: () => {
+  },
+  loadLayoutById: () => defaultLayout
+});
+
+// ../vuu-shell/src/layout-management/LayoutList.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+
+// ../vuu-icons/src/VuuLogo.tsx
+var import_react39 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var VuuLogo = (0, import_react39.memo)(() => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "svg",
+    {
+      width: "44",
+      height: "45",
+      viewBox: "0 0 44 45",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("g", { clipPath: "url(#clip0_217_6990)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "path",
+            {
+              d: "M39.8642 15.5509L35.9196 7.58974L34.3369 6.85464L24.6235 22.0825L39.1628 30.618L42.3152 25.6347L39.8642 15.5509Z",
+              fill: "url(#paint0_linear_217_6990)"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "path",
+            {
+              d: "M42.6246 24.8716C41.9199 25.9157 40.9625 26.824 39.767 27.4905C38.424 28.2396 36.9563 28.597 35.5081 28.597C32.7541 28.597 30.0715 27.3094 28.4466 24.9855L15.772 3.90967L15.7655 3.9206C13.3615 0.137431 8.25372 -1.13143 4.24754 1.10507C0.178173 3.37435 -1.20852 8.39359 1.14854 12.3125L18.3445 40.9095C19.1108 42.1846 20.1816 43.1834 21.4144 43.8764C21.4241 43.8826 21.4338 43.8889 21.4435 43.8951C21.4484 43.8982 21.4549 43.9013 21.4597 43.9045C22.0332 44.2228 22.6423 44.471 23.2725 44.6536C23.3194 44.6677 23.368 44.6817 23.415 44.6942C23.6418 44.7551 23.8702 44.8097 24.1019 44.8534C24.1456 44.8612 24.1894 44.8659 24.2331 44.8737C24.4194 44.9049 24.6073 44.9314 24.7952 44.9501C24.8698 44.9579 24.9443 44.9658 25.0188 44.9704C25.2342 44.9876 25.4497 44.9985 25.6668 45.0001C25.6781 45.0001 25.6895 45.0001 25.6992 45.0001C25.7024 45.0001 25.704 45.0001 25.7073 45.0001C25.7105 45.0001 25.7121 45.0001 25.7154 45.0001C25.9503 45.0001 26.1868 44.9876 26.4217 44.9689C26.4751 44.9642 26.5286 44.9595 26.5837 44.9533C26.8137 44.9299 27.0438 44.9002 27.2738 44.8596C27.277 44.8596 27.2803 44.8596 27.2835 44.8596C27.5362 44.8144 27.7889 44.7551 28.0384 44.6864C28.0546 44.6817 28.0692 44.677 28.0854 44.6723C28.4483 44.5709 28.8063 44.4445 29.1594 44.2931C29.1659 44.29 29.174 44.2868 29.1805 44.2837C29.4494 44.1682 29.7151 44.0418 29.9759 43.8967C30.24 43.75 30.491 43.5908 30.7308 43.4206C30.9398 43.2739 31.1407 43.1179 31.3367 42.9524C31.5748 42.7495 31.8 42.5373 32.009 42.3141C32.1661 42.1471 32.3168 41.9723 32.4609 41.7913C32.5079 41.732 32.5517 41.6711 32.5954 41.6118C32.6942 41.4807 32.7882 41.3465 32.8789 41.2091C32.9259 41.1373 32.9728 41.0671 33.0182 40.9953C33.036 40.9672 33.0555 40.9407 33.0717 40.9126L42.7153 24.8763H42.6214L42.6246 24.8716Z",
+              fill: "url(#paint1_linear_217_6990)"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "path",
+            {
+              d: "M42.8402 16.4218L42.1112 15.2232L38.9636 9.58433L37.504 7.19644C37.2286 6.56123 36.579 6.11331 35.8176 6.11331C34.8083 6.11331 33.9919 6.90147 33.9919 7.87223C33.9919 8.20154 34.0907 8.50432 34.2543 8.76808L34.2349 8.78056L39.9048 18.0808C40.5884 19.2186 40.7715 20.5437 40.4199 21.8141C40.0684 23.0845 39.226 24.1458 38.045 24.806C37.2675 25.2398 36.3846 25.4693 35.4936 25.4693C33.6727 25.4693 31.9766 24.5281 31.0662 23.0143L22.9161 9.63271H22.9323L19.4899 3.90958L19.4834 3.92051C19.4235 3.8253 19.3538 3.73947 19.2907 3.64738L19.1935 3.48663C19.1935 3.48663 19.1854 3.49131 19.1821 3.49443C17.5654 1.27666 14.9799 0.0390178 12.3118 0.00936427V0H7.91199V0.02185C10.9851 -0.184164 14.0582 1.23296 15.7656 3.92051L15.7721 3.90958L28.4451 24.987C30.0699 27.3093 32.7542 28.5985 35.5066 28.5985C36.9548 28.5985 38.4225 28.2426 39.7655 27.4919C40.961 26.8255 41.9168 25.9156 42.6231 24.8731H42.717L42.6846 24.9261C43.1366 24.2347 43.4833 23.4731 43.7068 22.6615C44.2916 20.5452 43.9871 18.3352 42.8369 16.4234L42.8402 16.4218Z",
+              fill: "#F37880"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("g", { opacity: "0.86", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "path",
+              {
+                d: "M34.2332 8.78212L39.9031 18.0824C40.5868 19.2202 40.7698 20.5452 40.4183 21.8156C40.2044 22.5897 39.8059 23.2858 39.2616 23.8617C39.9744 23.2343 40.4879 22.4243 40.7423 21.5035C41.0938 20.2331 40.9107 18.908 40.2271 17.7703L34.5572 8.46998L34.5767 8.4575C34.413 8.19374 34.3142 7.89096 34.3142 7.56165C34.3142 7.15586 34.4584 6.78285 34.6982 6.48476C34.2672 6.80626 33.9902 7.30881 33.9902 7.87379C33.9902 8.2031 34.0891 8.50588 34.2527 8.76964L34.2332 8.78212Z",
+                fill: "white"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "path",
+              {
+                d: "M42.6917 24.9169L42.6863 24.9256C42.6863 24.9256 42.6899 24.9187 42.6935 24.9152C42.6935 24.9152 42.6935 24.9152 42.6935 24.9169H42.6917Z",
+                fill: "white"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "path",
+              {
+                d: "M40.0911 27.1798C38.7481 27.9289 37.2804 28.2863 35.8322 28.2863C33.0782 28.2863 30.3955 26.9988 28.7707 24.6749L16.0961 3.59744L16.0896 3.60837C14.9281 1.78077 13.1364 0.543128 11.1422 0H7.91199V0.02185C10.9851 -0.184164 14.0582 1.23296 15.7656 3.92051L15.7721 3.90958L28.4451 24.987C30.0699 27.3093 32.7542 28.5985 35.5066 28.5985C36.9548 28.5985 38.4225 28.2426 39.7655 27.4919C40.4815 27.0924 41.1084 26.6055 41.6511 26.0561C41.1862 26.479 40.6662 26.8583 40.0894 27.1798H40.0911Z",
+                fill: "white"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            "linearGradient",
+            {
+              id: "paint0_linear_217_6990",
+              x1: "24.6235",
+              y1: "18.7363",
+              x2: "42.3152",
+              y2: "18.7363",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("stop", { stopColor: "#4906A5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("stop", { offset: "1", stopColor: "#D3423A" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            "linearGradient",
+            {
+              id: "paint1_linear_217_6990",
+              x1: "-2.35794e-05",
+              y1: "22.5009",
+              x2: "42.7186",
+              y2: "22.5009",
+              gradientUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("stop", { stopColor: "#7C06A5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("stop", { offset: "1", stopColor: "#D3423A" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("clipPath", { id: "clip0_217_6990", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("rect", { width: "44", height: "45", fill: "white" }) })
+        ] })
+      ]
+    }
+  );
+});
+VuuLogo.displayName = "VuuLogo";
+
+// ../vuu-shell/src/left-nav/LeftNav.tsx
+var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
+var import_classnames14 = __toESM(require_classnames());
+var import_react41 = require("react");
+
+// ../vuu-shell/src/feature-list/FeatureList.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+
+// ../vuu-shell/src/theme-provider/ThemeProvider.tsx
+var import_react40 = require("react");
+var import_classnames13 = __toESM(require_classnames());
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var DEFAULT_DENSITY = "medium";
+var DEFAULT_THEME = "salt-theme";
+var DEFAULT_THEME_MODE = "light";
+var ThemeContext = (0, import_react40.createContext)({
+  density: "high",
+  theme: "vuu",
+  themeMode: "light"
+});
+var createThemedChildren = (children, theme, themeMode, density) => {
+  var _a2;
+  if ((0, import_react40.isValidElement)(children)) {
+    return (0, import_react40.cloneElement)(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
+  } = (0, import_react40.useContext)(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__ */ (0, import_jsx_runtime26.jsx)(ThemeContext.Provider, { value: { themeMode, density, theme }, children: themedChildren });
+};
+ThemeProvider.displayName = "ThemeProvider";
+
+// ../vuu-shell/src/left-nav/LeftNav.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+
+// ../vuu-shell/src/login/LoginPanel.tsx
+var import_react42 = require("react");
+var import_core7 = require("@salt-ds/core");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+
+// ../vuu-shell/src/login/login-utils.ts
+var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
+var getAuthModeFromCookies = () => {
+  const mode = (0, import_vuu_utils11.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_react43 = require("react");
+var import_classnames15 = __toESM(require_classnames());
+var import_core8 = require("@salt-ds/core");
+var import_core9 = require("@salt-ds/core");
+var import_vuu_data = require("@vuu-ui/vuu-data");
+var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+
+// ../vuu-shell/src/shell.tsx
+var import_vuu_data2 = require("@vuu-ui/vuu-data");
+var import_classnames19 = __toESM(require_classnames());
+var import_react53 = require("react");
+
+// ../vuu-shell/src/app-header/AppHeader.tsx
+var import_react50 = require("react");
+
+// ../vuu-shell/src/user-profile/UserProfile.tsx
+var import_core11 = require("@salt-ds/core");
+var import_lab3 = require("@salt-ds/lab");
+
+// ../../node_modules/@salt-ds/icons/dist-es/icon/Icon.js
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react46 = require("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
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react44 = require("react");
+var WindowContext = (0, import_react44.createContext)(
+  typeof window !== "undefined" ? window : null
+);
+if (true) {
+  WindowContext.displayName = "WindowContext";
+}
+function useWindow() {
+  return (0, import_react44.useContext)(WindowContext);
+}
+
+// ../../node_modules/@salt-ds/styles/dist-es/use-style-injection/useStyleInjection.js
+var React20 = __toESM(require("react"));
+
+// ../../node_modules/@salt-ds/styles/dist-es/use-style-injection/InsertionPointProvider.js
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react45 = require("react");
+var InsertionPointContext = (0, import_react45.createContext)(null);
+if (true) {
+  InsertionPointContext.displayName = "InsertionPointContext";
+}
+function useInsertionPoint() {
+  const value = (0, import_react45.useContext)(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 = (0, import_react46.forwardRef)(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__ */ (0, import_jsx_runtime32.jsx)("svg", {
+    className: clsx(withBaseName(), className),
+    style,
+    role: "img",
+    ...rest,
+    ref,
+    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("g", {
+      "aria-hidden": true,
+      children
+    })
+  });
+});
+
+// ../../node_modules/@salt-ds/icons/dist-es/components/Export.js
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react47 = require("react");
+var ExportIcon = (0, import_react47.forwardRef)(
+  function ExportIcon2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Icon, {
+      "data-testid": "ExportIcon",
+      "aria-label": "export",
+      viewBox: "0 0 12 12",
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", {
+          d: "M5 1H1v10h4v-1H2V2h3V1Z"
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", {
+          d: "M3 5h5V3l4 3-4 3V7H3V5Z"
+        })
+      ]
+    });
+  }
+);
+
+// ../vuu-shell/src/user-profile/UserPanel.tsx
+var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_lab2 = require("@salt-ds/lab");
+var import_core10 = require("@salt-ds/core");
+var import_react48 = require("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
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var byLastUpdate = ({ lastUpdate: l1 }, { lastUpdate: l2 }) => {
+  return l2 === l1 ? 0 : l2 < l1 ? -1 : 1;
+};
+var HistoryListItem = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lab2.ListItem, { ...props });
+};
+var UserPanel = (0, import_react48.forwardRef)(function UserPanel2({ loginUrl, onNavigate, user, layoutId = "latest" }, forwardedRef) {
+  const [history, setHistory] = (0, import_react48.useState)([]);
+  (0, import_react48.useEffect)(() => {
+    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 ${(0, import_vuu_utils13.formatDate)(new Date(lastUpdate), "kk:mm:ss")}`
+      }));
+      console.log({ sortedHistory });
+      setHistory(sortedHistory);
+    }
+    getHistory();
+  }, [user]);
+  const handleHisorySelected = (0, import_react48.useCallback)(
+    (evt, selected2) => {
+      if (selected2) {
+        onNavigate(selected2.id);
+      }
+    },
+    [onNavigate]
+  );
+  const handleLogout = (0, import_react48.useCallback)(() => {
+    logout(loginUrl);
+  }, [loginUrl]);
+  const selected = history.length === 0 ? null : layoutId === "latest" ? history[0] : history.find((i) => i.id === layoutId);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "vuuUserPanel", ref: forwardedRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      import_lab2.List,
+      {
+        ListItem: HistoryListItem,
+        className: "vuuUserPanel-history",
+        onSelect: handleHisorySelected,
+        selected,
+        source: history
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "vuuUserPanel-buttonBar", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core10.Button, { "aria-label": "logout", onClick: handleLogout, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ExportIcon, {}),
+      " Logout"
+    ] }) })
+  ] });
+});
+
+// ../vuu-shell/src/user-profile/UserProfile.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+
+// ../vuu-shell/src/theme-switch/ThemeSwitch.tsx
+var import_classnames16 = __toESM(require_classnames());
+var import_core12 = require("@salt-ds/core");
+var import_react49 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+
+// ../vuu-shell/src/app-header/AppHeader.tsx
+var import_classnames17 = __toESM(require_classnames());
+var import_jsx_runtime37 = require("react/jsx-runtime");
+
+// ../vuu-shell/src/shell.tsx
+var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
+
+// ../vuu-shell/src/shell-layouts/context-panel/ContextPanel.tsx
+var import_core13 = require("@salt-ds/core");
+var import_classnames18 = __toESM(require_classnames());
+var import_react51 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+
+// ../vuu-shell/src/shell-layouts/useFullHeightLeftPanel.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+
+// ../vuu-shell/src/shell-layouts/useInlayLeftPanel.tsx
+var import_react52 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+
+// ../vuu-shell/src/shell.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var { error } = (0, import_vuu_utils14.logger)("Shell");
+
+// ../vuu-shell/src/ShellContextProvider.tsx
+var import_react54 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var defaultConfig = {};
+var ShellContext = (0, import_react54.createContext)(defaultConfig);
+
+// ../vuu-layout/src/layout-persistence/useLayoutContextMenuItems.tsx
+var import_react55 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+
+// ../vuu-layout/src/measured-container/MeasuredContainer.tsx
+var import_react58 = require("react");
+
+// ../vuu-layout/src/measured-container/useMeasuredContainer.ts
+var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
+var import_react57 = require("react");
 
 // ../vuu-layout/src/measured-container/useResizeObserver.ts
-var import_react33 = require("react");
+var import_react56 = require("react");
 var observedMap2 = /* @__PURE__ */ new Map();
 var getTargetSize2 = (element, size, dimension3) => {
   switch (dimension3) {
@@ -2303,8 +3069,8 @@ var resizeObserver2 = new ResizeObserver((entries) => {
   }
 });
 function useResizeObserver2(ref, dimensions, onResize, reportInitialSize = false) {
-  const dimensionsRef = (0, import_react33.useRef)(dimensions);
-  const measure = (0, import_react33.useCallback)((target) => {
+  const dimensionsRef = (0, import_react56.useRef)(dimensions);
+  const measure = (0, import_react56.useCallback)((target) => {
     const { width, height } = target.getBoundingClientRect();
     const { clientWidth: contentWidth, clientHeight: contentHeight } = target;
     return dimensionsRef.current.reduce(
@@ -2319,7 +3085,7 @@ function useResizeObserver2(ref, dimensions, onResize, reportInitialSize = false
       {}
     );
   }, []);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     const target = ref.current;
     async function registerObserver() {
       observedMap2.set(target, { measurements: {} });
@@ -2356,7 +3122,7 @@ function useResizeObserver2(ref, dimensions, onResize, reportInitialSize = false
       }
     };
   }, [measure, ref]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     const target = ref.current;
     const record = observedMap2.get(target);
     if (record) {
@@ -2378,7 +3144,7 @@ var NO_MEASUREMENT2 = [];
 var isNumber = (val) => Number.isFinite(val);
 var FULL_SIZE = { height: "100%", width: "100%" };
 var getInitialCssSize = (height, width) => {
-  if ((0, import_vuu_utils9.isValidNumber)(height) && (0, import_vuu_utils9.isValidNumber)(width)) {
+  if ((0, import_vuu_utils15.isValidNumber)(height) && (0, import_vuu_utils15.isValidNumber)(width)) {
     return {
       height: `${height}px`,
       width: `${width}px`
@@ -2393,7 +3159,7 @@ var getInitialCssSize = (height, width) => {
   }
 };
 var getInitialInnerSize = (height, width) => {
-  if ((0, import_vuu_utils9.isValidNumber)(height) && (0, import_vuu_utils9.isValidNumber)(width)) {
+  if ((0, import_vuu_utils15.isValidNumber)(height) && (0, import_vuu_utils15.isValidNumber)(width)) {
     return {
       height,
       width
@@ -2407,8 +3173,8 @@ var useMeasuredContainer = ({
   onResize: onResizeProp,
   width
 }) => {
-  const containerRef = (0, import_react34.useRef)(null);
-  const [size, setSize] = (0, import_react34.useState)({
+  const containerRef = (0, import_react57.useRef)(null);
+  const [size, setSize] = (0, import_react57.useState)({
     css: getInitialCssSize(height, width),
     inner: getInitialInnerSize(height, width),
     outer: {
@@ -2419,15 +3185,15 @@ var useMeasuredContainer = ({
   const fixedHeight = typeof height === "number";
   const fixedWidth = typeof width === "number";
   const dimensions = fixedHeight && fixedWidth ? NO_MEASUREMENT2 : fixedHeight ? WidthOnly : fixedWidth ? HeightOnly : ClientWidthHeight;
-  (0, import_react34.useMemo)(() => {
+  (0, import_react57.useMemo)(() => {
     setSize((currentSize) => {
       const { inner, outer } = currentSize;
-      if ((0, import_vuu_utils9.isValidNumber)(height) && (0, import_vuu_utils9.isValidNumber)(width) && inner && outer) {
+      if ((0, import_vuu_utils15.isValidNumber)(height) && (0, import_vuu_utils15.isValidNumber)(width) && inner && outer) {
         const { height: innerHeight, width: innerWidth } = inner;
         const { height: outerHeight, width: outerWidth } = outer;
         if (outerHeight !== height || outerWidth !== width) {
-          const heightDiff = (0, import_vuu_utils9.isValidNumber)(outerHeight) ? outerHeight - innerHeight : 0;
-          const widthDiff = (0, import_vuu_utils9.isValidNumber)(outerWidth) ? outerWidth - innerWidth : 0;
+          const heightDiff = (0, import_vuu_utils15.isValidNumber)(outerHeight) ? outerHeight - innerHeight : 0;
+          const widthDiff = (0, import_vuu_utils15.isValidNumber)(outerWidth) ? outerWidth - innerWidth : 0;
           return {
             ...currentSize,
             outer: { height, width },
@@ -2438,7 +3204,7 @@ var useMeasuredContainer = ({
       return currentSize;
     });
   }, [height, width]);
-  const onResize = (0, import_react34.useCallback)(
+  const onResize = (0, import_react57.useCallback)(
     ({ clientWidth, clientHeight }) => {
       const { css, inner, outer } = size;
       let newState = size;
@@ -2476,7 +3242,7 @@ var useMeasuredContainer = ({
     },
     [defaultHeight, defaultWidth, fixedHeight, fixedWidth, height, size, width]
   );
-  (0, import_react34.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (size.inner) {
       onResizeProp == null ? void 0 : onResizeProp(size.inner);
     }
@@ -2491,11 +3257,11 @@ var useMeasuredContainer = ({
 };
 
 // ../vuu-layout/src/measured-container/MeasuredContainer.tsx
-var import_core6 = require("@salt-ds/core");
-var import_classnames11 = __toESM(require_classnames());
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_core14 = require("@salt-ds/core");
+var import_classnames20 = __toESM(require_classnames());
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var baseClass = "vuuMeasuredContainer";
-var MeasuredContainer = (0, import_react35.forwardRef)(function MeasuredContainer2({
+var MeasuredContainer = (0, import_react58.forwardRef)(function MeasuredContainer2({
   children,
   className,
   height,
@@ -2523,20 +3289,20 @@ var MeasuredContainer = (0, import_react35.forwardRef)(function MeasuredContaine
       "--measured-px-width": `${innerSize == null ? void 0 : innerSize.width}px`
     };
   };
-  const forkedRef = (0, import_core6.useForkRef)(containerRef, forwardedRef);
-  return unmeasured ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const forkedRef = (0, import_core14.useForkRef)(containerRef, forwardedRef);
+  return unmeasured ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "div",
     {
       ...htmlAttributes,
-      className: (0, import_classnames11.default)(baseClass, `${baseClass}-ummeasured`),
+      className: (0, import_classnames20.default)(baseClass, `${baseClass}-ummeasured`),
       style: getStyle2(),
       ref: containerRef
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "div",
     {
       ...htmlAttributes,
-      className: (0, import_classnames11.default)(baseClass, className),
+      className: (0, import_classnames20.default)(baseClass, className),
       ref: forkedRef,
       style: getStyle2(),
       children
@@ -2546,16 +3312,16 @@ var MeasuredContainer = (0, import_react35.forwardRef)(function MeasuredContaine
 
 // ../vuu-layout/src/overflow-container/OverflowContainer.tsx
 var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
-var import_classnames12 = __toESM(require_classnames());
-var import_react37 = __toESM(require("react"));
+var import_classnames21 = __toESM(require_classnames());
+var import_react60 = __toESM(require("react"));
 
 // ../vuu-layout/src/overflow-container/useOverflowContainer.ts
-var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
-var import_react36 = require("react");
+var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
+var import_react59 = require("react");
 
 // ../vuu-layout/src/overflow-container/overflow-utils.ts
-var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
 var NON_WRAPPED_ITEM = ".vuuOverflowContainer-item:not(.wrapped)";
 var sortByScreenOrder = (elements) => elements.sort((e1, e2) => {
   const {
@@ -2638,8 +3404,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;
@@ -2652,7 +3418,7 @@ var getHighestPriorityItem = (overflowItems) => {
   return highestPriorityItem;
 };
 var highPriorityItemsHaveWrappedButShouldNotHave = (nonWrappedItems, wrappedItems) => {
-  var _a;
+  var _a2;
   const minNonwrappedPriority = nonWrappedItems.reduce(
     minPriority,
     Number.MAX_SAFE_INTEGER
@@ -2661,7 +3427,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) => {
@@ -2688,7 +3454,7 @@ var correctForWrappedHighPriorityItems = (container, nonWrapped, wrapped) => new
   });
 });
 var markElementAsWrapped = (container, item) => {
-  const el = (0, import_vuu_utils10.getElementByDataIndex)(container, item.index);
+  const el = (0, import_vuu_utils16.getElementByDataIndex)(container, item.index);
   if (el) {
     el.classList.add("wrapped");
   } else {
@@ -2762,7 +3528,7 @@ var getNonwrappedItemsByPriority = (container) => Array.from(container.querySele
 );
 var switchWrappedItemIntoView = (container, overflowItem) => {
   const unwrappedItems = getNonwrappedItemsByPriority(container);
-  const targetElement = (0, import_vuu_utils10.getElementByDataIndex)(
+  const targetElement = (0, import_vuu_utils16.getElementByDataIndex)(
     container,
     overflowItem.index,
     true
@@ -2812,10 +3578,16 @@ var useOverflowContainer = ({
   onSwitchWrappedItemIntoView,
   orientation = "horizontal"
 }) => {
-  const [container, setContainer] = (0, import_react36.useState)(null);
-  const wrappedItemsRef = (0, import_react36.useRef)(NO_WRAPPED_ITEMS);
-  const containerRef = (0, import_react36.useRef)(null);
-  const handleResize = (0, import_react36.useCallback)(async () => {
+  const [container, setContainer] = (0, import_react59.useState)(null);
+  const wrappedItemsRef = (0, import_react59.useRef)(NO_WRAPPED_ITEMS);
+  const containerRef = (0, import_react59.useRef)(null);
+  const setOverflowTabIndex = (0, import_react59.useCallback)((tabIndex) => {
+    var _a2;
+    if (containerRef.current) {
+      (_a2 = containerRef.current.querySelector(".vuuOverflowContainer-OverflowIndicator button")) == null ? void 0 : _a2.setAttribute("tabindex", tabIndex);
+    }
+  }, []);
+  const handleResize = (0, import_react59.useCallback)(async () => {
     if (container) {
       let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(
         container,
@@ -2837,11 +3609,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] = (0, import_react36.useMemo)(() => {
+  const [menuBuilder, menuActionHandler] = (0, import_react59.useMemo)(() => {
     return [
       () => {
         const { current: menuItems } = wrappedItemsRef;
@@ -2866,14 +3643,14 @@ var useOverflowContainer = ({
       }
     ];
   }, [container, onSwitchWrappedItemIntoView]);
-  const resizeObserver3 = (0, import_react36.useMemo)(() => {
-    const { sizeProp } = import_vuu_utils11.MEASURES[orientation];
+  const resizeObserver3 = (0, import_react59.useMemo)(() => {
+    const { sizeProp } = import_vuu_utils17.MEASURES[orientation];
     let currentSize = 0;
     return new ResizeObserver((entries) => {
       for (const entry of entries) {
         const { [sizeProp]: actualSize } = entry.contentRect;
         const size = Math.round(actualSize);
-        if ((0, import_vuu_utils11.isValidNumber)(size) && currentSize !== size) {
+        if ((0, import_vuu_utils17.isValidNumber)(size) && currentSize !== size) {
           currentSize = size;
           handleResize();
         }
@@ -2883,21 +3660,21 @@ var useOverflowContainer = ({
   useLayoutEffectSkipFirst(() => {
     handleResize();
   }, [handleResize, itemCount]);
-  (0, import_react36.useMemo)(() => {
+  (0, import_react59.useMemo)(() => {
     if (container) {
       resizeObserver3.observe(container);
     }
   }, [container, resizeObserver3]);
-  const callbackRef = (0, import_react36.useCallback)((el) => {
+  const callbackRef = (0, import_react59.useCallback)((el) => {
     setContainer(containerRef.current = el);
   }, []);
-  const handleDrop = (0, import_react36.useCallback)(
+  const handleDrop = (0, import_react59.useCallback)(
     (fromIndex, toIndex) => {
       onMoveItem == null ? void 0 : onMoveItem(fromIndex, toIndex);
     },
     [onMoveItem]
   );
-  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } = (0, import_vuu_ui_controls2.useDragDropNext)({
+  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } = (0, import_vuu_ui_controls5.useDragDropNext)({
     allowDragDrop,
     containerRef,
     // this is for useDragDropNext
@@ -2917,9 +3694,9 @@ var useOverflowContainer = ({
 };
 
 // ../vuu-layout/src/overflow-container/OverflowContainer.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var classBase9 = "vuuOverflowContainer";
-var WrapContainer = import_react37.default.memo(
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var classBase10 = "vuuOverflowContainer";
+var WrapContainer = import_react60.default.memo(
   ({
     allowDragDrop,
     children,
@@ -2947,16 +3724,13 @@ var WrapContainer = import_react37.default.memo(
       onSwitchWrappedItemIntoView,
       orientation
     });
-    console.log(
-      `Overflow container WRAPPER ${import_react37.default.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 {
@@ -2965,10 +3739,10 @@ var WrapContainer = import_react37.default.memo(
         id: itemId = `${id}-${i}`,
         label = `Item ${i + 1}`
       } = childEl.props;
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         "div",
         {
-          className: (0, import_classnames12.default)(`${classBase9}-item`, {
+          className: (0, import_classnames21.default)(`${classBase10}-item`, {
             "vuuDraggable-dragAway": draggedItemIndex === i
           }),
           "data-index": i,
@@ -2982,31 +3756,32 @@ var WrapContainer = import_react37.default.memo(
         i
       );
     });
-    const overflowIndicator = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    const overflowIndicator = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       "div",
       {
-        className: `${classBase9}-OverflowIndicator`,
+        className: `${classBase10}-OverflowIndicator`,
         "data-index": "overflow",
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           import_vuu_popups2.PopupMenu,
           {
             icon: overflowIcon,
             menuBuilder,
-            menuActionHandler
+            menuActionHandler,
+            tabIndex: -1
           }
         )
       },
       "overflow"
     );
     content.push(overflowIndicator);
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className, ref: rootRef, style, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className, ref: rootRef, style, children: [
       content,
       draggable
     ] });
   }
 );
 WrapContainer.displayName = "OverflowContainer.InnerContainer";
-var OverflowContainer = (0, import_react37.forwardRef)(function OverflowContainer2({
+var OverflowContainer = (0, import_react60.forwardRef)(function OverflowContainer2({
   allowDragDrop = false,
   children,
   className,
@@ -3020,15 +3795,14 @@ var OverflowContainer = (0, import_react37.forwardRef)(function OverflowContaine
   ...htmlAttributes
 }, forwardedRef) {
   const id = useId(idProp);
-  console.log(`Overflow container ${import_react37.default.Children.count(children)} children`);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "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__ */ (0, import_jsx_runtime17.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         WrapContainer,
         {
           allowDragDrop,
@@ -3047,18 +3821,18 @@ var OverflowContainer = (0, import_react37.forwardRef)(function OverflowContaine
 });
 
 // ../vuu-layout/src/palette/Palette.tsx
-var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
-var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
-var import_classnames13 = __toESM(require_classnames());
-var import_react38 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
+var import_vuu_ui_controls6 = require("@vuu-ui/vuu-ui-controls");
+var import_classnames22 = __toESM(require_classnames());
+var import_react61 = require("react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var clonePaletteItem = (paletteItem) => {
   const dolly = paletteItem.cloneNode(true);
   dolly.id = "";
   delete dolly.dataset.idx;
   return dolly;
 };
-var PaletteItem = (0, import_react38.memo)(
+var PaletteItem = (0, import_react61.memo)(
   ({
     className,
     children: component,
@@ -3068,10 +3842,10 @@ var PaletteItem = (0, import_react38.memo)(
     closeable,
     ...props
   }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_vuu_ui_controls3.ListItem,
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      import_vuu_ui_controls6.ListItem,
       {
-        className: (0, import_classnames13.default)("vuuPaletteItem", className),
+        className: (0, import_classnames22.default)("vuuPaletteItem", className),
         "data-draggable": true,
         "data-icon": "draggable",
         ...props
@@ -3089,19 +3863,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 = (0, import_vuu_utils12.uuid)();
+    const id = (0, import_vuu_utils18.uuid)();
     const identifiers = { id, key: id };
-    const component = template ? payload : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(MemoView, { ...ViewProps2, ...identifiers, ...props2, title: props2.label, children: payload });
+    const component = template ? payload : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(MemoView, { ...ViewProps2, ...identifiers, ...props2, title: props2.label, children: payload });
     dispatch({
       dragRect: {
         left,
@@ -3125,15 +3899,15 @@ var Palette = ({
       type: "drag-start"
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    import_vuu_ui_controls3.List,
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    import_vuu_ui_controls6.List,
     {
       ...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 ? (0, import_react38.cloneElement)(child, {
+        (child, idx) => child.type === PaletteItem ? (0, import_react61.cloneElement)(child, {
           key: idx,
           onMouseDown: handleMouseDown
         }) : child
@@ -3144,20 +3918,20 @@ var Palette = ({
 registerComponent("Palette", Palette, "view");
 
 // ../vuu-layout/src/stack/Stack.tsx
-var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
-var import_classnames14 = __toESM(require_classnames());
-var import_react39 = __toESM(require("react"));
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var classBase10 = "Tabs";
+var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
+var import_classnames23 = __toESM(require_classnames());
+var import_react62 = __toESM(require("react"));
+var import_jsx_runtime47 = require("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 = [];
-  import_react39.default.Children.forEach(children, (child) => {
-    if (import_react39.default.isValidElement(child)) {
+  import_react62.default.Children.forEach(children, (child) => {
+    if (import_react62.default.isValidElement(child)) {
       elements.push(child);
     } else {
       console.warn(`Stack has unexpected child element type`);
@@ -3170,7 +3944,7 @@ var DefaultTabstripProps = {
   allowCloseTab: false,
   allowRenameTab: false
 };
-var Stack = (0, import_react39.forwardRef)(function Stack2({
+var Stack = (0, import_react62.forwardRef)(function Stack2({
   active = 0,
   children,
   className: classNameProp,
@@ -3188,26 +3962,26 @@ var Stack = (0, import_react39.forwardRef)(function Stack2({
   style,
   TabstripProps: TabstripProps2 = DefaultTabstripProps
 }, ref) {
-  var _a;
+  var _a2;
   const id = useId(idProp);
   const {
     allowCloseTab,
     allowRenameTab,
     className: tabstripClassName
   } = TabstripProps2;
-  const handleExitEditMode = (0, import_react39.useCallback)(
+  const handleExitEditMode = (0, import_react62.useCallback)(
     (_oldText, newText, _allowDeactivation, tabIndex) => {
       onTabEdit == null ? void 0 : onTabEdit(tabIndex, newText);
     },
     [onTabEdit]
   );
   const activeChild = () => {
-    var _a2;
-    if (import_react39.default.isValidElement(children)) {
+    var _a3;
+    if (import_react62.default.isValidElement(children)) {
       return children;
     }
     if (Array.isArray(children)) {
-      return (_a2 = children[active]) != null ? _a2 : null;
+      return (_a3 = children[active]) != null ? _a3 : null;
     }
     return null;
   };
@@ -3217,8 +3991,8 @@ var Stack = (0, import_react39.forwardRef)(function Stack2({
       id: childId = `${id}-${idx}`,
       "data-tab-location": tabLocation
     } = child2.props;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_vuu_ui_controls4.Tab,
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      import_vuu_ui_controls7.Tab,
       {
         ariaControls: childId,
         "data-icon": getTabIcon(child2, idx),
@@ -3235,24 +4009,24 @@ var Stack = (0, import_react39.forwardRef)(function Stack2({
   const child = activeChild();
   const isHorizontal = showTabs === "left" || showTabs === "right";
   const tabstripOrientation = isHorizontal ? "vertical" : "horizontal";
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     "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__ */ (0, import_jsx_runtime19.jsx)(
-          import_vuu_ui_controls4.Tabstrip,
+        showTabs ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_vuu_ui_controls7.Tabstrip,
           {
             ...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,
@@ -3271,10 +4045,10 @@ var Stack = (0, import_react39.forwardRef)(function Stack2({
 Stack.displayName = "Stack";
 
 // ../vuu-layout/src/stack/StackLayout.tsx
-var import_core7 = require("@salt-ds/core");
-var import_react40 = __toESM(require("react"));
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var defaultCreateNewChild = (index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+var import_core15 = require("@salt-ds/core");
+var import_react63 = __toESM(require("react"));
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var defaultCreateNewChild = (index) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
   MemoView,
   {
     resizeable: true,
@@ -3282,12 +4056,12 @@ var defaultCreateNewChild = (index) => /* @__PURE__ */ (0, import_jsx_runtime20.
     style: { flexGrow: 1, flexShrink: 0, flexBasis: 0 },
     header: true,
     closeable: true,
-    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Component_default, { style: { flex: 1 } })
+    children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Component_default, { style: { flex: 1 } })
   }
 );
 var StackLayout = (props) => {
-  var _a;
-  const ref = (0, import_react40.useRef)(null);
+  var _a2;
+  const ref = (0, import_react63.useRef)(null);
   const dispatch = useLayoutProviderDispatch();
   const { loadState } = usePersistentState();
   const {
@@ -3298,17 +4072,17 @@ var StackLayout = (props) => {
     ...restProps
   } = props;
   const { children } = props;
-  const id = (0, import_core7.useIdMemo)(idProp);
+  const id = (0, import_core15.useIdMemo)(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 = (0, import_react40.useCallback)(
+  const handleTabClose = (0, import_react63.useCallback)(
     (tabIndex) => {
       if (Array.isArray(children)) {
         const {
@@ -3319,9 +4093,9 @@ var StackLayout = (props) => {
     },
     [children, dispatch]
   );
-  const handleTabAdd = (0, import_react40.useCallback)(() => {
+  const handleTabAdd = (0, import_react63.useCallback)(() => {
     if (path) {
-      const tabIndex = import_react40.default.Children.count(children);
+      const tabIndex = import_react63.default.Children.count(children);
       const component = createNewChild(tabIndex);
       dispatch({
         type: "add",
@@ -3330,7 +4104,7 @@ var StackLayout = (props) => {
       });
     }
   }, [children, createNewChild, dispatch, path]);
-  const handleMoveTab = (0, import_react40.useCallback)(
+  const handleMoveTab = (0, import_react63.useCallback)(
     (fromIndex, toIndex) => {
       if (path) {
         dispatch({
@@ -3364,7 +4138,7 @@ var StackLayout = (props) => {
     const { id: id2, title } = component.props;
     return loadState(id2, "view-title") || title || `Tab ${idx + 1}`;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     Stack,
     {
       ...restProps,
@@ -3384,27 +4158,27 @@ StackLayout.displayName = "Stack";
 registerComponent("Stack", StackLayout, "container");
 
 // ../vuu-layout/src/toolbar/Toolbar.tsx
-var import_classnames15 = __toESM(require_classnames());
-var import_react44 = __toESM(require("react"));
+var import_classnames24 = __toESM(require_classnames());
+var import_react67 = __toESM(require("react"));
 
 // ../vuu-layout/src/toolbar/useToolbar.ts
-var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
-var import_react43 = require("react");
+var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
+var import_react66 = require("react");
 
 // ../vuu-layout/src/toolbar/useKeyboardNavigation.ts
-var import_core8 = require("@salt-ds/core");
-var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
-var import_react41 = require("react");
-var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
+var import_core16 = require("@salt-ds/core");
+var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
+var import_react64 = require("react");
+var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
 
 // ../vuu-layout/src/toolbar/tabstrip-dom-utils.ts
-var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
 var getIndexOfItem = (container, query) => {
   if (container) {
     const targetTab = container.querySelector(
       `[data-index]:has(${query})`
     );
-    return (0, import_vuu_utils13.getElementDataIndex)(targetTab);
+    return (0, import_vuu_utils19.getElementDataIndex)(targetTab);
   }
   return -1;
 };
@@ -3413,20 +4187,20 @@ var getIndexOfEditedItem = (container) => getIndexOfItem(container, ".vuuEditabl
 // ../vuu-layout/src/toolbar/useKeyboardNavigation.ts
 var navigation = {
   horizontal: {
-    [import_vuu_utils15.Home]: "start",
-    [import_vuu_utils15.End]: "end",
-    [import_vuu_utils15.ArrowLeft]: "bwd",
-    [import_vuu_utils15.ArrowRight]: "fwd"
+    [import_vuu_utils21.Home]: "start",
+    [import_vuu_utils21.End]: "end",
+    [import_vuu_utils21.ArrowLeft]: "bwd",
+    [import_vuu_utils21.ArrowRight]: "fwd"
   },
   vertical: {
-    [import_vuu_utils15.Home]: "start",
-    [import_vuu_utils15.End]: "end",
-    [import_vuu_utils15.ArrowUp]: "bwd",
-    [import_vuu_utils15.ArrowDown]: "fwd"
+    [import_vuu_utils21.Home]: "start",
+    [import_vuu_utils21.End]: "end",
+    [import_vuu_utils21.ArrowUp]: "bwd",
+    [import_vuu_utils21.ArrowDown]: "fwd"
   }
 };
 var isNavigationKey = (key, orientation = "horizontal") => navigation[orientation][key] !== void 0;
-var isMenuActivationKey = (key) => key === import_vuu_utils15.ArrowDown;
+var isMenuActivationKey = (key) => key === import_vuu_utils21.ArrowDown;
 function nextItemIdx(count, direction, idx) {
   if (direction === "start") {
     return 0;
@@ -3459,23 +4233,23 @@ var useKeyboardNavigation = ({
   selectedIndex: selectedItemIndex = []
 }) => {
   const manualActivation = keyBoardActivation === "manual";
-  const mouseClickPending = (0, import_react41.useRef)(false);
-  const focusedRef = (0, import_react41.useRef)(-1);
-  const [hasFocus, setHasFocus] = (0, import_react41.useState)(false);
-  const [, forceRefresh] = (0, import_react41.useState)({});
-  const [highlightedIdx, _setHighlightedIdx] = (0, import_core8.useControlled)({
+  const mouseClickPending = (0, import_react64.useRef)(false);
+  const focusedRef = (0, import_react64.useRef)(-1);
+  const [hasFocus, setHasFocus] = (0, import_react64.useState)(false);
+  const [, forceRefresh] = (0, import_react64.useState)({});
+  const [highlightedIdx, _setHighlightedIdx] = (0, import_core16.useControlled)({
     controlled: highlightedIdxProp,
     default: defaultHighlightedIdx,
     name: "UseKeyboardNavigation"
   });
-  const setHighlightedIdx = (0, import_react41.useCallback)(
+  const setHighlightedIdx = (0, import_react64.useCallback)(
     (value) => {
       _setHighlightedIdx(focusedRef.current = value);
     },
     [_setHighlightedIdx]
   );
-  const keyboardNavigation = (0, import_react41.useRef)(false);
-  const focusItem = (0, import_react41.useCallback)(
+  const keyboardNavigation = (0, import_react64.useRef)(false);
+  const focusItem = (0, import_react64.useCallback)(
     (itemIndex, immediateFocus = false, withKeyboard, delay = 70) => {
       setHighlightedIdx(itemIndex);
       if (withKeyboard === true && !keyboardNavigation.current) {
@@ -3484,7 +4258,7 @@ var useKeyboardNavigation = ({
       const setFocus = () => {
         const element = getElementByPosition(containerRef.current, itemIndex);
         if (element) {
-          const focussableElement = (0, import_vuu_utils14.getFocusableElement)(element);
+          const focussableElement = (0, import_vuu_utils20.getFocusableElement)(element);
           focussableElement == null ? void 0 : focussableElement.focus();
         }
       };
@@ -3516,14 +4290,14 @@ var useKeyboardNavigation = ({
       }
     }
   };
-  const getIndexCount = (0, import_react41.useCallback)(
+  const getIndexCount = (0, import_react64.useCallback)(
     () => {
-      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 = (0, import_react41.useCallback)(
+  const nextFocusableItemIdx = (0, import_react64.useCallback)(
     (direction = "fwd", idx) => {
       const indexCount = getIndexCount();
       const index = typeof idx === "number" ? idx : indexCount;
@@ -3543,7 +4317,7 @@ var useKeyboardNavigation = ({
     },
     [containerRef, getIndexCount]
   );
-  const navigateChildItems = (0, import_react41.useCallback)(
+  const navigateChildItems = (0, import_react64.useCallback)(
     (e, forceFocusVisible = false) => {
       const direction = navigation[orientation][e.key];
       const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
@@ -3565,29 +4339,29 @@ var useKeyboardNavigation = ({
       orientation
     ]
   );
-  const highlightedItemHasMenu = (0, import_react41.useCallback)(() => {
+  const highlightedItemHasMenu = (0, import_react64.useCallback)(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuPopupMenu") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const highlightedItemInEditState = (0, import_react41.useCallback)(() => {
+  const highlightedItemInEditState = (0, import_react64.useCallback)(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     if (el) {
       return el.querySelector(".vuuEditableLabel-input") != null;
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const activateItemMenu = (0, import_react41.useCallback)(() => {
+  const activateItemMenu = (0, import_react64.useCallback)(() => {
     const el = getElementByPosition(containerRef.current, highlightedIdx);
     const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
     if (menuEl) {
-      (0, import_vuu_utils14.dispatchMouseEvent)(menuEl, "click");
+      (0, import_vuu_utils20.dispatchMouseEvent)(menuEl, "click");
     }
     return false;
   }, [containerRef, highlightedIdx]);
-  const handleKeyDown = (0, import_react41.useCallback)(
+  const handleKeyDown = (0, import_react64.useCallback)(
     (e) => {
       if (getIndexCount() > 0 && isNavigationKey(e.key, orientation)) {
         e.preventDefault();
@@ -3613,7 +4387,7 @@ var useKeyboardNavigation = ({
   const handleItemClick = (_, itemIndex) => {
     setHighlightedIdx(itemIndex);
   };
-  const handleFocus = (0, import_react41.useCallback)(() => {
+  const handleFocus = (0, import_react64.useCallback)(() => {
     if (!hasFocus) {
       setHasFocus(true);
       if (!mouseClickPending.current) {
@@ -3623,7 +4397,7 @@ var useKeyboardNavigation = ({
       }
     }
   }, [hasFocus]);
-  const handleContainerMouseDown = (0, import_react41.useCallback)(() => {
+  const handleContainerMouseDown = (0, import_react64.useCallback)(() => {
     if (!hasFocus) {
       mouseClickPending.current = true;
     }
@@ -3660,9 +4434,9 @@ var useKeyboardNavigation = ({
 };
 
 // ../vuu-layout/src/toolbar/useSelection.ts
-var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
-var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
-var import_react42 = require("react");
+var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
+var import_vuu_ui_controls8 = require("@vuu-ui/vuu-ui-controls");
+var import_react65 = require("react");
 var defaultSelectionKeys = ["Enter", " "];
 var NO_SELECTION_HANDLERS = {};
 var useSelection = ({
@@ -3674,25 +4448,25 @@ var useSelection = ({
   selected: selectedProp,
   selectionStrategy
 }) => {
-  const [selected, setSelected, isControlled] = (0, import_vuu_ui_controls5.useControlled)({
+  const [selected, setSelected, isControlled] = (0, import_vuu_ui_controls8.useControlled)({
     controlled: selectedProp,
     default: defaultSelected != null ? defaultSelected : [],
     name: "useSelection",
     state: "selected"
   });
-  const isSelectionEvent = (0, import_react42.useCallback)(
+  const isSelectionEvent = (0, import_react65.useCallback)(
     (evt) => defaultSelectionKeys.includes(evt.key),
     []
   );
-  const selectItem = (0, import_react42.useCallback)(
+  const selectItem = (0, import_react65.useCallback)(
     (itemIndex, specialKey = false) => {
-      const newSelected = (0, import_vuu_ui_controls5.allowMultipleSelection)(selectionStrategy, specialKey) ? selected.concat(itemIndex) : [itemIndex];
+      const newSelected = (0, import_vuu_ui_controls8.allowMultipleSelection)(selectionStrategy, specialKey) ? selected.concat(itemIndex) : [itemIndex];
       setSelected(newSelected);
       onSelectionChange == null ? void 0 : onSelectionChange(newSelected);
     },
     [onSelectionChange, selected, selectionStrategy, setSelected]
   );
-  const deselectItem = (0, import_react42.useCallback)(
+  const deselectItem = (0, import_react65.useCallback)(
     (itemIndex, specialKey = false) => {
       const newSelected = selectionStrategy === "deselectable" || selectionStrategy === "multiple-special-key" && !specialKey ? [] : selected.filter((index) => index !== itemIndex);
       setSelected(newSelected);
@@ -3700,14 +4474,14 @@ var useSelection = ({
     },
     [onSelectionChange, selected, selectionStrategy, setSelected]
   );
-  const handleKeyDown = (0, import_react42.useCallback)(
+  const handleKeyDown = (0, import_react65.useCallback)(
     (e) => {
-      if (isSelectionEvent(e) && (0, import_vuu_utils16.isSelectableElement)(e.target)) {
+      if (isSelectionEvent(e) && (0, import_vuu_utils22.isSelectableElement)(e.target)) {
         if (!selected.includes(highlightedIdx)) {
           e.stopPropagation();
           e.preventDefault();
           selectItem(highlightedIdx, e.shiftKey);
-        } else if ((0, import_vuu_ui_controls5.deselectionIsAllowed)(selectionStrategy)) {
+        } else if ((0, import_vuu_ui_controls8.deselectionIsAllowed)(selectionStrategy)) {
           e.stopPropagation();
           e.preventDefault();
           deselectItem(highlightedIdx, e.shiftKey);
@@ -3723,20 +4497,20 @@ var useSelection = ({
       deselectItem
     ]
   );
-  const handleClick = (0, import_react42.useCallback)(
+  const handleClick = (0, import_react65.useCallback)(
     (e, itemIndex) => {
-      const element = (0, import_vuu_utils16.getClosestIndexItem)(e.target);
-      if ((0, import_vuu_utils16.isSelectableElement)(element)) {
+      const element = (0, import_vuu_utils22.getClosestIndexItem)(e.target);
+      if ((0, import_vuu_utils22.isSelectableElement)(element)) {
         if (!selected.includes(itemIndex)) {
           selectItem(itemIndex, e.shiftKey);
-        } else if ((0, import_vuu_ui_controls5.deselectionIsAllowed)(selectionStrategy)) {
+        } else if ((0, import_vuu_ui_controls8.deselectionIsAllowed)(selectionStrategy)) {
           deselectItem(itemIndex, e.shiftKey);
         }
       }
     },
     [deselectItem, selectItem, selected, selectionStrategy]
   );
-  const itemHandlers = (0, import_vuu_ui_controls5.selectionIsDisallowed)(selectionStrategy) ? NO_SELECTION_HANDLERS : {
+  const itemHandlers = (0, import_vuu_ui_controls8.selectionIsDisallowed)(selectionStrategy) ? NO_SELECTION_HANDLERS : {
     onClick: handleClick,
     onKeyDown: handleKeyDown
   };
@@ -3758,8 +4532,8 @@ var useToolbar = ({
   orientation,
   selectionStrategy
 }) => {
-  var _a;
-  const lastSelection = (0, import_react43.useRef)(activeItemIndexProp);
+  var _a2;
+  const lastSelection = (0, import_react66.useRef)(activeItemIndexProp);
   const {
     focusItem: keyboardHookFocusItem,
     highlightedIdx,
@@ -3771,7 +4545,7 @@ var useToolbar = ({
     containerRef,
     keyBoardActivation: "manual",
     orientation,
-    selectedIndex: (_a = lastSelection.current) != null ? _a : []
+    selectedIndex: (_a2 = lastSelection.current) != null ? _a2 : []
   });
   const {
     activateItem: selectionHookActivateItem,
@@ -3787,14 +4561,14 @@ var useToolbar = ({
     selectionStrategy
   });
   lastSelection.current = selectionHookSelected;
-  const handleClick = (0, import_react43.useCallback)(
+  const handleClick = (0, import_react66.useCallback)(
     (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 && (0, import_vuu_utils17.isValidNumber)(index)) {
+        const index = parseInt((_a3 = toolbarItem.dataset.index) != null ? _a3 : "-1");
+        if (index !== -1 && (0, import_vuu_utils23.isValidNumber)(index)) {
           keyboardHookHandleClick(evt, index);
           onClick == null ? void 0 : onClick(evt, index);
         }
@@ -3802,7 +4576,7 @@ var useToolbar = ({
     },
     [keyboardHookHandleClick, onClick]
   );
-  const handleKeyDown = (0, import_react43.useCallback)(
+  const handleKeyDown = (0, import_react66.useCallback)(
     (evt) => {
       keyboardHookHandleKeyDown(evt);
       if (!evt.defaultPrevented) {
@@ -3811,7 +4585,7 @@ var useToolbar = ({
     },
     [keyboardHookHandleKeyDown, onKeyDown]
   );
-  const onSwitchWrappedItemIntoView = (0, import_react43.useCallback)(
+  const onSwitchWrappedItemIntoView = (0, import_react66.useCallback)(
     (item) => {
       const index = parseInt(item.index);
       if (!isNaN(index)) {
@@ -3837,9 +4611,9 @@ var useToolbar = ({
 };
 
 // ../vuu-layout/src/toolbar/Toolbar.tsx
-var import_vuu_ui_controls6 = require("@vuu-ui/vuu-ui-controls");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var classBase11 = "vuuToolbar";
+var import_vuu_ui_controls9 = require("@vuu-ui/vuu-ui-controls");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var classBase12 = "vuuToolbar";
 var Toolbar = ({
   activeItemIndex: activeItemIndexProp,
   defaultActiveItemIndex,
@@ -3851,7 +4625,7 @@ var Toolbar = ({
   selectionStrategy = "none",
   ...props
 }) => {
-  const rootRef = (0, import_react44.useRef)(null);
+  const rootRef = (0, import_react67.useRef)(null);
   const { activeItemIndex, focusVisible, itemProps, ...toolbarHook } = useToolbar({
     activeItemIndex: activeItemIndexProp,
     defaultActiveItemIndex,
@@ -3861,8 +4635,8 @@ var Toolbar = ({
     selectionStrategy
   });
   const id = useId(idProp);
-  const className = (0, import_classnames15.default)(classBase11, `${classBase11}-${orientation}`, classNameProp);
-  const items = (0, import_react44.useMemo)(
+  const className = (0, import_classnames24.default)(classBase12, `${classBase12}-${orientation}`, classNameProp);
+  const items = (0, import_react67.useMemo)(
     () => asReactElements(children).map((child, index) => {
       const {
         id: itemId = `${id}-tab-${index}`,
@@ -3870,9 +4644,9 @@ var Toolbar = ({
         ...ownProps
       } = child.props;
       const selected = activeItemIndex.includes(index);
-      return import_react44.default.cloneElement(child, {
-        ...(0, import_vuu_ui_controls6.forwardCallbackProps)(ownProps, itemProps),
-        className: (0, import_classnames15.default)("vuuToolbarItem", itemClassName, {
+      return import_react67.default.cloneElement(child, {
+        ...(0, import_vuu_ui_controls9.forwardCallbackProps)(ownProps, itemProps),
+        className: (0, import_classnames24.default)("vuuToolbarItem", itemClassName, {
           vuuFocusVisible: focusVisible === index
         }),
         "data-overflow-priority": selected ? "1" : void 0,
@@ -3884,12 +4658,12 @@ var Toolbar = ({
     }),
     [activeItemIndex, children, focusVisible, id, itemProps]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     OverflowContainer,
     {
       ...props,
       ...toolbarHook.containerProps,
-      className: (0, import_classnames15.default)(classBase11, className),
+      className: (0, import_classnames24.default)(classBase12, className),
       ...props,
       ref: rootRef,
       children: items
@@ -3898,46 +4672,45 @@ var Toolbar = ({
 };
 
 // ../vuu-layout/src/tools/config-wrapper/ConfigWrapper.tsx
-var import_react45 = __toESM(require("react"));
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react68 = __toESM(require("react"));
+var import_jsx_runtime50 = require("react/jsx-runtime");
 
 // ../vuu-layout/src/tools/devtools-box/layout-configurator.jsx
-var import_core9 = require("@salt-ds/core");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_core17 = require("@salt-ds/core");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var CSS_DIGIT = "(\\d+)(?:px)?";
 var CSS_MEASURE = `^(?:${CSS_DIGIT}(?:\\s${CSS_DIGIT}(?:\\s${CSS_DIGIT}(?:\\s${CSS_DIGIT})?)?)?)$`;
 var CSS_REX = new RegExp(CSS_MEASURE);
 
 // ../vuu-layout/src/tools/devtools-tree/layout-tree-viewer.jsx
-var import_react46 = __toESM(require("react"));
-var import_classnames16 = __toESM(require_classnames());
-var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react69 = __toESM(require("react"));
+var import_classnames25 = __toESM(require_classnames());
+var import_vuu_ui_controls10 = require("@vuu-ui/vuu-ui-controls");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 
 // src/filter-bar/FilterBar.tsx
 var import_vuu_popups5 = require("@vuu-ui/vuu-popups");
-var import_core11 = require("@salt-ds/core");
-var import_classnames21 = __toESM(require_classnames(), 1);
-var import_react57 = require("react");
+var import_core19 = require("@salt-ds/core");
+var import_classnames30 = __toESM(require_classnames(), 1);
+var import_react80 = require("react");
 
 // src/filter-builder-menu/FilterBuilderMenu.tsx
-var import_react47 = require("react");
+var import_react70 = require("react");
 var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
-var import_vuu_ui_controls8 = require("@vuu-ui/vuu-ui-controls");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var classBase12 = "vuuFilterBuilderMenu";
+var import_vuu_ui_controls11 = require("@vuu-ui/vuu-ui-controls");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var classBase13 = "vuuFilterBuilderMenu";
 var FilterBuilderMenu = ({ onMenuAction }) => {
-  const ref = (0, import_react47.useRef)(null);
-  const listRef = (0, import_react47.useCallback)((el) => {
+  const ref = (0, import_react70.useRef)(null);
+  const listRef = (0, import_react70.useCallback)((el) => {
     if (el) {
-      el.focus();
+      requestAnimationFrame(() => {
+        el.focus();
+      });
     }
   }, []);
-  const handleSelect = (0, import_react47.useCallback)(
+  const handleSelect = (0, import_react70.useCallback)(
     (evt, selected) => {
-      console.log({
-        selected
-      });
       const {
         props: { "data-action": action }
       } = selected;
@@ -3945,12 +4718,12 @@ var FilterBuilderMenu = ({ onMenuAction }) => {
     },
     [onMenuAction]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: `${classBase12}-trigger`, ref }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_vuu_popups3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_vuu_popups3.PopupComponent, { anchorElement: ref, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-      import_vuu_ui_controls8.List,
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: `${classBase13}-trigger`, ref }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_vuu_popups3.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_vuu_popups3.PopupComponent, { anchorElement: ref, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      import_vuu_ui_controls11.List,
       {
-        className: `${classBase12}List`,
+        className: `${classBase13}List`,
         defaultHighlightedIndex: 1,
         itemHeight: 22,
         ref: listRef,
@@ -3958,9 +4731,9 @@ var FilterBuilderMenu = ({ onMenuAction }) => {
         style: { position: "relative" },
         width: 100,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_vuu_ui_controls8.ListItem, { "data-action": "apply-save", className: "vuuMenuButton", children: "APPLY AND SAVE" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_vuu_ui_controls8.ListItem, { "data-action": "and-clause", children: "AND" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_vuu_ui_controls8.ListItem, { "data-action": "or-clause", children: "OR" })
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_vuu_ui_controls11.ListItem, { "data-action": "apply-save", className: "vuuMenuButton", children: "APPLY AND SAVE" }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_vuu_ui_controls11.ListItem, { "data-action": "and-clause", children: "AND" }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_vuu_ui_controls11.ListItem, { "data-action": "or-clause", children: "OR" })
         ]
       }
     ) }) })
@@ -3968,40 +4741,57 @@ var FilterBuilderMenu = ({ onMenuAction }) => {
 };
 
 // src/filter-clause/ExpandoCombobox.tsx
-var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
-var import_vuu_ui_controls9 = require("@vuu-ui/vuu-ui-controls");
-var import_classnames17 = __toESM(require_classnames(), 1);
-var import_react48 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var classBase13 = "vuuExpandoCombobox";
+var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
+var import_vuu_ui_controls12 = require("@vuu-ui/vuu-ui-controls");
+var import_classnames26 = __toESM(require_classnames(), 1);
+var import_react71 = require("react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var classBase14 = "vuuExpandoCombobox";
 var NO_INPUT_PROPS = {};
-var ExpandoCombobox = (0, import_react48.forwardRef)(function ExpandoCombobox2({
-  allowMultipleSelection: allowMultipleSelection2 = false,
+var ExpandoCombobox = (0, import_react71.forwardRef)(function ExpandoCombobox2({
   className: classNameProp,
   InputProps: InputPropsProp = NO_INPUT_PROPS,
   ListProps: ListPropsProp,
   onInputChange,
   onSelectionChange,
+  selectionStrategy,
+  style,
   value = "",
   ...props
 }, forwardedRef) {
-  const [text, setText] = (0, import_react48.useState)(value);
-  const { itemToString = import_vuu_utils18.itemToString } = props;
-  const initialValue = (0, import_react48.useRef)(value);
-  const handleInputChange = (0, import_react48.useCallback)(
+  const [text, setText] = (0, import_react71.useState)(value);
+  const { itemToString = import_vuu_utils24.itemToString } = props;
+  const initialValue = (0, import_react71.useRef)(value);
+  const itemsToString = (0, import_react71.useCallback)(
+    (items) => {
+      const [first, ...rest] = items;
+      if (rest.length) {
+        return `${itemToString(first)} + ${rest.length}`;
+      } else {
+        return itemToString(first);
+      }
+    },
+    [itemToString]
+  );
+  const handleInputChange = (0, import_react71.useCallback)(
     (evt) => {
       const { value: value2 } = evt.target;
+      console.log(`onInputChange ${value2}`);
       setText(value2);
       onInputChange == null ? void 0 : onInputChange(evt);
     },
     [onInputChange]
   );
-  const [InputProps, ListProps] = (0, import_react48.useMemo)(() => {
+  const handleSetSelectedText = (0, import_react71.useCallback)((text2) => {
+    console.log(`handleSetSelectedText ${text2}`);
+    setText(text2);
+  }, []);
+  const [InputProps, ListProps] = (0, import_react71.useMemo)(() => {
     const { inputProps, ...restInputProps } = InputPropsProp;
     return [
       {
         ...restInputProps,
-        className: `${classBase13}-Input`,
+        className: `${classBase14}-Input`,
         endAdornment: null,
         inputProps: {
           ...inputProps,
@@ -4011,7 +4801,7 @@ var ExpandoCombobox = (0, import_react48.forwardRef)(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",
@@ -4023,41 +4813,46 @@ var ExpandoCombobox = (0, import_react48.forwardRef)(function ExpandoCombobox2({
       }
     ];
   }, [InputPropsProp, handleInputChange, ListPropsProp]);
-  const handleSelectionChange = (0, import_react48.useCallback)(
-    (evt, item) => {
-      const selectedValue = item === null ? "" : itemToString(item);
-      setText(selectedValue);
-      onSelectionChange == null ? void 0 : onSelectionChange(evt, item);
+  const handleSelectionChange = (0, import_react71.useCallback)(
+    (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] = (0, import_react48.useState)([]);
-  const handleMultiSelectChange = (0, import_react48.useCallback)((evt, selected2) => {
-    setSelected(selected2);
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  const popupProps = {
+    minWidth: 102
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "div",
     {
-      className: (0, import_classnames17.default)(classBase13, classNameProp),
+      className: (0, import_classnames26.default)(classBase14, classNameProp),
       "data-text": text,
       ref: forwardedRef,
-      children: allowMultipleSelection2 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_vuu_ui_controls9.ComboBox,
-        {
-          ...props,
-          defaultValue: initialValue.current,
-          ListProps,
-          InputProps,
-          onSelectionChange: handleSelectionChange
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_vuu_ui_controls9.ComboBox,
+      style,
+      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        import_vuu_ui_controls12.ComboBox,
         {
           ...props,
+          PopupProps: popupProps,
           defaultValue: initialValue.current,
+          fullWidth: true,
           ListProps,
           InputProps,
-          onSelectionChange: handleSelectionChange
+          itemsToString,
+          onSelectionChange: handleSelectionChange,
+          onSetSelectedText: handleSetSelectedText,
+          selectionStrategy
         }
       )
     }
@@ -4065,14 +4860,14 @@ var ExpandoCombobox = (0, import_react48.forwardRef)(function ExpandoCombobox2({
 });
 
 // src/filter-clause/FilterClauseEditor.tsx
-var import_classnames18 = __toESM(require_classnames(), 1);
-var import_react52 = require("react");
+var import_classnames27 = __toESM(require_classnames(), 1);
+var import_react75 = require("react");
 
 // src/filter-clause/CloseButton.tsx
-var import_core10 = require("@salt-ds/core");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var CloseButton = ({ className, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-  import_core10.Button,
+var import_core18 = require("@salt-ds/core");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var CloseButton = ({ className, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  import_core18.Button,
   {
     className,
     "data-icon": "close",
@@ -4082,11 +4877,11 @@ var CloseButton = ({ className, onClick }) => /* @__PURE__ */ (0, import_jsx_run
 );
 
 // src/filter-clause/NumericInput.tsx
-var import_react49 = require("react");
-var import_vuu_ui_controls10 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var NumericInput = (0, import_react49.forwardRef)(function NumericInput2({
+var import_react72 = require("react");
+var import_vuu_ui_controls13 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils25 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var NumericInput = (0, import_react72.forwardRef)(function NumericInput2({
   InputProps,
   className,
   column,
@@ -4095,31 +4890,31 @@ var NumericInput = (0, import_react49.forwardRef)(function NumericInput2({
   // operator,
   value: valueProp
 }, forwardedRef) {
-  const [value, setValue] = (0, import_react49.useState)(
-    (0, import_vuu_utils19.isValidNumber)(valueProp) ? valueProp.toString() : ""
+  const [value, setValue] = (0, import_react72.useState)(
+    (0, import_vuu_utils25.isValidNumber)(valueProp) ? valueProp.toString() : ""
   );
-  const handleChange = (0, import_react49.useCallback)((evt) => {
+  const handleChange = (0, import_react72.useCallback)((evt) => {
     const { value: value2 } = evt.target;
     const numericValue = parseFloat(value2);
-    if ((0, import_vuu_utils19.isValidNumber)(numericValue)) {
+    if ((0, import_vuu_utils25.isValidNumber)(numericValue)) {
       console.log("its valid");
     }
     setValue(value2);
   }, []);
-  const handleKeyDown = (0, import_react49.useCallback)(
+  const handleKeyDown = (0, import_react72.useCallback)(
     (evt) => {
       if (evt.key === "Enter") {
         const { value: value2 } = evt.target;
         const numericValue = parseFloat(value2);
-        if ((0, import_vuu_utils19.isValidNumber)(numericValue)) {
+        if ((0, import_vuu_utils25.isValidNumber)(numericValue)) {
           onInputComplete(numericValue);
         }
       }
     },
     [onInputComplete]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-    import_vuu_ui_controls10.ExpandoInput,
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    import_vuu_ui_controls13.ExpandoInput,
     {
       ...InputProps,
       className,
@@ -4132,13 +4927,13 @@ var NumericInput = (0, import_react49.forwardRef)(function NumericInput2({
 });
 
 // src/filter-clause/operator-utils.ts
-var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
 var textOperators = ["=", "in", "!=", "starts", "ends"];
 var numericperators = ["=", "!=", ">", ">=", "<", "<="];
 var getOperators = (column) => {
-  if ((0, import_vuu_utils20.isTextColumn)(column)) {
+  if ((0, import_vuu_utils26.isTextColumn)(column)) {
     return textOperators;
-  } else if ((0, import_vuu_utils20.isNumericColumn)(column)) {
+  } else if ((0, import_vuu_utils26.isNumericColumn)(column)) {
     return numericperators;
   } else {
     throw Error("getOperators only supports text and numeric columns");
@@ -4146,33 +4941,40 @@ var getOperators = (column) => {
 };
 
 // src/filter-clause/TextInput.tsx
-var import_react50 = require("react");
+var import_react73 = require("react");
 var import_vuu_data_react = require("@vuu-ui/vuu-data-react");
-var import_vuu_ui_controls11 = require("@vuu-ui/vuu-ui-controls");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var TextInput = (0, import_react50.forwardRef)(function TextInput2({
+var import_vuu_ui_controls14 = require("@vuu-ui/vuu-ui-controls");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var TextInput = (0, import_react73.forwardRef)(function TextInput2({
   InputProps: InputPropsProp = {},
   className,
   column,
-  filterClause,
   onInputComplete,
   operator,
   suggestionProvider = import_vuu_data_react.useTypeaheadSuggestions,
   table,
   value
 }, forwardedRef) {
-  const [valueInputValue, setValueInputValue] = (0, import_react50.useState)(value != null ? value : "");
-  const [typeaheadValues, setTypeaheadValues] = (0, import_react50.useState)([]);
+  const [valueInputValue, setValueInputValue] = (0, import_react73.useState)(value != null ? value : "");
+  const [typeaheadValues, setTypeaheadValues] = (0, import_react73.useState)([]);
   const getSuggestions = suggestionProvider();
-  const handleValueSelectionChange = (0, import_react50.useCallback)(
+  const handleSingleValueSelectionChange = (0, import_react73.useCallback)(
+    (evt, value2) => onInputComplete(value2),
+    [onInputComplete]
+  );
+  const handleMultiValueSelectionChange = (0, import_react73.useCallback)(
     (evt, value2) => {
-      onInputComplete(value2 != null ? value2 : "");
+      if (value2.length === 1) {
+        onInputComplete(value2[0]);
+      } else if (value2.length > 1) {
+        onInputComplete(value2);
+      }
     },
     [onInputComplete]
   );
-  (0, import_react50.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
   }, [column]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     if (table) {
       const params = valueInputValue ? [table, column.name, valueInputValue] : [table, column.name];
       getSuggestions(params).then((suggestions) => {
@@ -4182,11 +4984,11 @@ var TextInput = (0, import_react50.forwardRef)(function TextInput2({
       });
     }
   }, [table, column, valueInputValue, getSuggestions]);
-  const handleInputChange = (0, import_react50.useCallback)((evt) => {
+  const handleInputChange = (0, import_react73.useCallback)((evt) => {
     const { value: value2 } = evt.target;
     setValueInputValue(value2);
   }, []);
-  const InputProps = (0, import_react50.useMemo)(() => {
+  const InputProps = (0, import_react73.useMemo)(() => {
     if (operator === "starts" || operator === "ends") {
       const { inputProps, ...restInputProps } = InputPropsProp;
       return {
@@ -4194,13 +4996,13 @@ var TextInput = (0, import_react50.forwardRef)(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);
             }
           }
         }
@@ -4209,10 +5011,10 @@ var TextInput = (0, import_react50.forwardRef)(function TextInput2({
       return InputPropsProp;
     }
   }, [InputPropsProp, onInputComplete, operator, valueInputValue]);
-  const getValueInputField = (0, import_react50.useCallback)(() => {
+  const getValueInputField = (0, import_react73.useCallback)(() => {
     switch (operator) {
       case "in":
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           ExpandoCombobox,
           {
             InputProps,
@@ -4220,13 +5022,14 @@ var TextInput = (0, import_react50.forwardRef)(function TextInput2({
             initialHighlightedIndex: 0,
             source: typeaheadValues,
             onInputChange: handleInputChange,
-            onSelectionChange: handleValueSelectionChange,
+            onSelectionChange: handleMultiValueSelectionChange,
             ref: forwardedRef,
+            selectionStrategy: "multiple",
             value
           }
         );
       case "starts":
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           ExpandoCombobox,
           {
             InputProps,
@@ -4239,14 +5042,14 @@ var TextInput = (0, import_react50.forwardRef)(function TextInput2({
             initialHighlightedIndex: 0,
             source: typeaheadValues,
             onInputChange: handleInputChange,
-            onSelectionChange: handleValueSelectionChange,
+            onSelectionChange: handleSingleValueSelectionChange,
             ref: forwardedRef,
             value
           }
         );
       case "ends":
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          import_vuu_ui_controls11.ExpandoInput,
+        return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          import_vuu_ui_controls14.ExpandoInput,
           {
             ...InputProps,
             className,
@@ -4256,15 +5059,16 @@ var TextInput = (0, import_react50.forwardRef)(function TextInput2({
           }
         );
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           ExpandoCombobox,
           {
             InputProps,
             className,
             initialHighlightedIndex: 0,
             source: typeaheadValues,
+            title: "value",
             onInputChange: handleInputChange,
-            onSelectionChange: handleValueSelectionChange,
+            onSelectionChange: handleSingleValueSelectionChange,
             ref: forwardedRef,
             value
           }
@@ -4276,34 +5080,50 @@ var TextInput = (0, import_react50.forwardRef)(function TextInput2({
     className,
     typeaheadValues,
     handleInputChange,
-    handleValueSelectionChange,
+    handleMultiValueSelectionChange,
     forwardedRef,
     value,
+    handleSingleValueSelectionChange,
     valueInputValue
   ]);
   return getValueInputField();
 });
 
 // src/filter-clause/useFilterClauseEditor.ts
-var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
-var import_vuu_data = require("@vuu-ui/vuu-data");
-var import_react51 = require("react");
+var import_vuu_utils27 = require("@vuu-ui/vuu-utils");
+var import_vuu_data3 = require("@vuu-ui/vuu-data");
+var import_react74 = require("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();
     }
   }
 };
@@ -4321,6 +5141,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();
@@ -4347,9 +5168,9 @@ var navigateToNextInputIfAtBoundary = (evt) => {
   }
 };
 var getFilterClauseValue = (filterClause) => {
-  if ((0, import_vuu_utils21.isMultiValueFilter)(filterClause)) {
+  if ((0, import_vuu_utils27.isMultiValueFilter)(filterClause)) {
     return filterClause.values;
-  } else if ((0, import_vuu_utils21.isSingleValueFilter)(filterClause)) {
+  } else if ((0, import_vuu_utils27.isSingleValueFilter)(filterClause)) {
     return filterClause.value;
   } else {
     return void 0;
@@ -4360,43 +5181,59 @@ var useFilterClauseEditor = ({
   onChange,
   tableSchema
 }) => {
-  const [selectedColumn, setSelectedColumn] = (0, import_react51.useState)((0, import_vuu_data.getColumnByName)(tableSchema, filterClause.column));
-  const [operator, setOperator] = (0, import_react51.useState)(
+  const columnRef = (0, import_react74.useRef)(null);
+  const operatorRef = (0, import_react74.useRef)(null);
+  const valueRef = (0, import_react74.useRef)(null);
+  const [selectedColumn, setSelectedColumn] = (0, import_react74.useState)((0, import_vuu_data3.getColumnByName)(tableSchema, filterClause.column));
+  const [operator, _setOperator] = (0, import_react74.useState)(
     filterClause.op
   );
-  const [value, setValue] = (0, import_react51.useState)(
+  const setOperator = (0, import_react74.useCallback)((op) => {
+    _setOperator(op);
+  }, []);
+  const [value, setValue] = (0, import_react74.useState)(
     getFilterClauseValue(filterClause)
   );
-  const handleSelectionChangeColumn = (0, import_react51.useCallback)(
+  const handleSelectionChangeColumn = (0, import_react74.useCallback)(
     (evt, column) => {
       setSelectedColumn(column != null ? column : void 0);
       setOperator(void 0);
       setValue(void 0);
+      focusNextElement();
     },
-    []
+    [setOperator]
   );
-  const handleSelectionChangeOperator = (0, import_react51.useCallback)(
-    (evt, operator2) => {
-      const op = operator2 != null ? operator2 : void 0;
-      if (op === void 0 || (0, import_vuu_utils21.isValidFilterClauseOp)(op)) {
+  const handleSelectionChangeOperator = (0, import_react74.useCallback)(
+    (evt, selected) => {
+      const op = selected;
+      if (op === void 0 || (0, import_vuu_utils27.isValidFilterClauseOp)(op)) {
         setOperator(op);
+        focusNextElement();
       } else {
         throw Error(
           `FilterClauseEditor, invalid value ${op} for filter clause`
         );
       }
     },
-    []
+    [setOperator]
   );
-  const handleChangeValue = (0, import_react51.useCallback)(
+  const handleChangeValue = (0, import_react74.useCallback)(
     (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();
         });
@@ -4404,7 +5241,7 @@ var useFilterClauseEditor = ({
     },
     [onChange, operator, selectedColumn == null ? void 0 : selectedColumn.name]
   );
-  const handleKeyDownInput = (0, import_react51.useCallback)(
+  const handleKeyDownInput = (0, import_react74.useCallback)(
     (evt) => {
       if (["ArrowLeft", "ArrowRight"].includes(evt.key)) {
         navigateToNextInputIfAtBoundary(evt);
@@ -4414,7 +5251,7 @@ var useFilterClauseEditor = ({
     },
     [operator]
   );
-  const InputProps = (0, import_react51.useMemo)(
+  const InputProps = (0, import_react74.useMemo)(
     () => ({
       inputProps: {
         onKeyDown: handleKeyDownInput
@@ -4422,20 +5259,28 @@ var useFilterClauseEditor = ({
     }),
     [handleKeyDownInput]
   );
+  (0, import_react74.useEffect)(() => {
+    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
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var classBase14 = "vuuFilterClause";
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var classBase15 = "vuuFilterClause";
 var FilterClauseEditor = ({
   className,
   onChange,
@@ -4445,53 +5290,36 @@ var FilterClauseEditor = ({
   tableSchema,
   ...htmlAttributes
 }) => {
-  var _a;
+  var _a2;
   const { table, columns } = tableSchema;
-  const columnRef = (0, import_react52.useRef)(null);
-  const operatorRef = (0, import_react52.useRef)(null);
-  const valueRef = (0, import_react52.useRef)(null);
   const {
     InputProps,
+    columnRef,
     onChangeValue,
     onSelectionChangeColumn,
     onSelectionChangeOperator,
     operator,
+    operatorRef,
     selectedColumn,
-    value
+    value,
+    valueRef
   } = useFilterClauseEditor({
     filterClause,
     onChange,
     tableSchema
   });
-  (0, import_react52.useEffect)(() => {
-    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]);
-  (0, import_react52.useEffect)(() => {
-    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 = (0, import_react52.useCallback)(() => {
+  const getInputElement = (0, import_react75.useCallback)(() => {
     if (selectedColumn === null || operator === void 0) {
       return null;
     }
     switch (selectedColumn == null ? void 0 : selectedColumn.serverDataType) {
       case "string":
       case "char":
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           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,
@@ -4505,11 +5333,11 @@ var FilterClauseEditor = ({
       case "int":
       case "long":
       case "double":
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           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,
@@ -4530,30 +5358,33 @@ var FilterClauseEditor = ({
     InputProps,
     filterClause,
     onChangeValue,
+    valueRef,
     suggestionProvider,
     table,
     value
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: (0, import_classnames18.default)(classBase14, className), ...htmlAttributes, tabIndex: 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: (0, import_classnames27.default)(classBase15, className), ...htmlAttributes, tabIndex: 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       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__ */ (0, import_jsx_runtime30.jsx)(
+    (selectedColumn == null ? void 0 : selectedColumn.name) ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       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,
@@ -4563,20 +5394,20 @@ var FilterClauseEditor = ({
       }
     ) : null,
     getInputElement(),
-    value !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseButton, { className: `${classBase14}-closeButton`, onClick: onClose }) : null
+    value !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CloseButton, { className: `${classBase15}-closeButton`, onClick: onClose }) : null
   ] });
 };
 
 // src/filter-pill/FilterPill.tsx
-var import_vuu_ui_controls12 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
-var import_classnames20 = __toESM(require_classnames(), 1);
-var import_react54 = require("react");
+var import_vuu_ui_controls15 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils29 = require("@vuu-ui/vuu-utils");
+var import_classnames29 = __toESM(require_classnames(), 1);
+var import_react77 = require("react");
 
 // src/filter-pill-menu/FilterPillMenu.tsx
 var import_vuu_popups4 = require("@vuu-ui/vuu-popups");
-var import_react53 = require("react");
-var import_classnames19 = __toESM(require_classnames(), 1);
+var import_react76 = require("react");
+var import_classnames28 = __toESM(require_classnames(), 1);
 
 // src/filter-pill-menu/FilterPillMenuOptions.ts
 var closeCommand = (options) => ({
@@ -4605,8 +5436,8 @@ var editCommand = (options) => ({
 });
 
 // src/filter-pill-menu/FilterPillMenu.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var classBase15 = "vuuFilterPillMenu";
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var classBase16 = "vuuFilterPillMenu";
 var FilterPillMenu = ({
   allowClose = true,
   allowDelete = true,
@@ -4617,7 +5448,7 @@ var FilterPillMenu = ({
   onMenuAction,
   onMenuClose
 }) => {
-  const [menuBuilder, menuOptions] = (0, import_react53.useMemo)(
+  const [menuBuilder, menuOptions] = (0, import_react76.useMemo)(
     () => [
       (_location, options) => {
         const menuItems = [];
@@ -4641,13 +5472,13 @@ var FilterPillMenu = ({
     ],
     [allowClose, allowDelete, allowEdit, allowRename, filter]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     import_vuu_popups4.PopupMenu,
     {
-      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
@@ -4656,7 +5487,7 @@ var FilterPillMenu = ({
 };
 
 // src/filter-utils.ts
-var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
 var AND = "and";
 var EQUALS = "=";
 var GREATER_THAN = ">";
@@ -4667,7 +5498,7 @@ var ENDS_WITH = "ends";
 var IN = "in";
 var filterClauses = (filter, clauses = []) => {
   if (filter) {
-    if ((0, import_vuu_utils22.isMultiClauseFilter)(filter)) {
+    if ((0, import_vuu_utils28.isMultiClauseFilter)(filter)) {
       filter.filters.forEach((f) => clauses.push(...filterClauses(f)));
     } else {
       clauses.push(filter);
@@ -4679,8 +5510,8 @@ var DEFAULT_ADD_FILTER_OPTS = {
   combineWith: "and"
 };
 var addClause = (existingFilter, clause, { combineWith = AND } = DEFAULT_ADD_FILTER_OPTS) => {
-  if ((0, import_vuu_utils22.isMultiClauseFilter)(existingFilter) && existingFilter.op === combineWith) {
-    if ((0, import_vuu_utils22.isCompleteFilter)(clause)) {
+  if ((0, import_vuu_utils28.isMultiClauseFilter)(existingFilter) && existingFilter.op === combineWith) {
+    if ((0, import_vuu_utils28.isCompleteFilter)(clause)) {
       return {
         ...existingFilter,
         filters: existingFilter.filters.concat(clause)
@@ -4698,7 +5529,7 @@ var addClause = (existingFilter, clause, { combineWith = AND } = DEFAULT_ADD_FIL
   }
 };
 var replaceClause = (existingFilter, clause) => {
-  if ((0, import_vuu_utils22.isMultiClauseFilter)(existingFilter)) {
+  if ((0, import_vuu_utils28.isMultiClauseFilter)(existingFilter)) {
     return {
       ...existingFilter,
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -4710,18 +5541,18 @@ var replaceClause = (existingFilter, clause) => {
   }
 };
 var addFilter = (existingFilter, filter, { combineWith = AND } = DEFAULT_ADD_FILTER_OPTS) => {
-  var _a;
+  var _a2;
   if (includesNoValues(filter)) {
-    if ((0, import_vuu_utils22.isMultiClauseFilter)(filter)) {
+    if ((0, import_vuu_utils28.isMultiClauseFilter)(filter)) {
     } else {
       existingFilter = removeFilterForColumn(existingFilter, {
         name: filter.column
       });
     }
   } else if (includesAllValues(filter)) {
-    if ((0, import_vuu_utils22.isMultiClauseFilter)(filter)) {
+    if ((0, import_vuu_utils28.isMultiClauseFilter)(filter)) {
     }
-    return removeFilterForColumn(existingFilter, { name: (_a = filter.column) != null ? _a : "" });
+    return removeFilterForColumn(existingFilter, { name: (_a2 = filter.column) != null ? _a2 : "" });
   }
   if (!existingFilter) {
     return filter;
@@ -4754,10 +5585,10 @@ var includesNoValues = (filter) => {
   if (!filter) {
     return false;
   }
-  if ((0, import_vuu_utils22.isInFilter)(filter) && filter.values.length === 0) {
+  if ((0, import_vuu_utils28.isInFilter)(filter) && filter.values.length === 0) {
     return true;
   }
-  return (0, import_vuu_utils22.isAndFilter)(filter) && filter.filters.some((f) => includesNoValues(f));
+  return (0, import_vuu_utils28.isAndFilter)(filter) && filter.filters.some((f) => includesNoValues(f));
 };
 var includesAllValues = (filter) => {
   if (!filter) {
@@ -4775,7 +5606,7 @@ var merge = (f1, f2) => {
   if (includesNoValues(f2)) {
     return f2;
   }
-  if ((0, import_vuu_utils22.isInFilter)(f1) && (0, import_vuu_utils22.isInFilter)(f2)) {
+  if ((0, import_vuu_utils28.isInFilter)(f1) && (0, import_vuu_utils28.isInFilter)(f2)) {
     return {
       ...f1,
       values: [
@@ -4785,7 +5616,7 @@ var merge = (f1, f2) => {
         )
       ]
     };
-  } else if ((0, import_vuu_utils22.isInFilter)(f1) && f2.op === EQUALS) {
+  } else if ((0, import_vuu_utils28.isInFilter)(f1) && f2.op === EQUALS) {
     return {
       ...f1,
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -4841,14 +5672,14 @@ var splitFilterOnColumn = (columnName, filter) => {
   if (filter.op !== AND) {
     return [void 0, filter];
   }
-  const [[columnFilter = void 0], filters] = (0, import_vuu_utils22.partition)(
+  const [[columnFilter = void 0], filters] = (0, import_vuu_utils28.partition)(
     filter.filters,
     (f) => f.column === columnName
   );
   return filters.length === 1 ? [columnFilter, filters[0]] : [columnFilter, { op: AND, filters }];
 };
 var overrideColName = (filter, column) => {
-  if ((0, import_vuu_utils22.isMultiClauseFilter)(filter)) {
+  if ((0, import_vuu_utils28.isMultiClauseFilter)(filter)) {
     return {
       op: filter.op,
       filters: filter.filters.map((f) => overrideColName(f, column))
@@ -4877,7 +5708,7 @@ var removeFilterForColumn = (sourceFilter, column) => {
   if (sourceFilter.column === colName) {
     return void 0;
   }
-  if ((0, import_vuu_utils22.isAndFilter)(sourceFilter) || (0, import_vuu_utils22.isOrFilter)(sourceFilter)) {
+  if ((0, import_vuu_utils28.isAndFilter)(sourceFilter) || (0, import_vuu_utils28.isOrFilter)(sourceFilter)) {
     const { op } = sourceFilter;
     const filters = sourceFilter.filters;
     const otherColFilters = filters.filter((f) => f.column !== colName);
@@ -4909,7 +5740,7 @@ var filterEquals = (f1, f2, strict = false) => {
     return true;
   }
   if (f1 && f2 && canMerge(f1, f2)) {
-    return f1.op === f2.op && ((0, import_vuu_utils22.isSingleValueFilter)(f1) && (0, import_vuu_utils22.isSingleValueFilter)(f2) && f1.value === f2.value || (0, import_vuu_utils22.isMultiValueFilter)(f1) && (0, import_vuu_utils22.isMultiValueFilter)(f2) && sameValues(f1.values, f2.values));
+    return f1.op === f2.op && ((0, import_vuu_utils28.isSingleValueFilter)(f1) && (0, import_vuu_utils28.isSingleValueFilter)(f2) && f1.value === f2.value || (0, import_vuu_utils28.isMultiValueFilter)(f1) && (0, import_vuu_utils28.isMultiValueFilter)(f2) && sameValues(f1.values, f2.values));
   }
   return false;
 };
@@ -4926,7 +5757,7 @@ var updateFilter = (filter, newFilter, mode) => {
     }
     const { column: columnName } = newFilter;
     if (columnName) {
-      const existingClause = newFilter.column ? (0, import_vuu_utils22.extractFilterForColumn)(filter, columnName) : void 0;
+      const existingClause = newFilter.column ? (0, import_vuu_utils28.extractFilterForColumn)(filter, columnName) : void 0;
       if (existingClause && columnName) {
         const result = removeFilterForColumn(filter, { name: columnName });
         return updateFilter(result, newFilter, "add");
@@ -4969,16 +5800,16 @@ var getNumericFilter = (column, op, value) => {
 };
 
 // src/filter-pill/FilterPill.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var classBase16 = "vuuFilterPill";
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var classBase17 = "vuuFilterPill";
 var getFilterLabel = (filter) => {
   if (filter.name) {
     return filter.name;
-  } else if ((0, import_vuu_utils23.isMultiClauseFilter)(filter)) {
+  } else if ((0, import_vuu_utils29.isMultiClauseFilter)(filter)) {
     const [firstClause] = filterClauses(filter);
-    return `${(0, import_vuu_utils23.filterAsQuery)(firstClause)} ${filter.op} ...`;
+    return `${(0, import_vuu_utils29.filterAsQuery)(firstClause)} ${filter.op} ...`;
   } else {
-    return (0, import_vuu_utils23.filterAsQuery)(filter);
+    return (0, import_vuu_utils29.filterAsQuery)(filter);
   }
 };
 var FilterPill = ({
@@ -4991,12 +5822,12 @@ var FilterPill = ({
   showMenu = true,
   ...htmlAttributes
 }) => {
-  const rootRef = (0, import_react54.useRef)(null);
-  const handleEnterEditMode = (0, import_react54.useCallback)(() => {
+  const rootRef = (0, import_react77.useRef)(null);
+  const handleEnterEditMode = (0, import_react77.useCallback)(() => {
     onBeginEdit == null ? void 0 : onBeginEdit(filter);
   }, [filter, onBeginEdit]);
   const label = getFilterLabel(filter);
-  const handleMenuClose = (0, import_react54.useCallback)((reason) => {
+  const handleMenuClose = (0, import_react77.useCallback)((reason) => {
     if ((reason == null ? void 0 : reason.type) === "escape") {
       requestAnimationFrame(() => {
         if (rootRef.current) {
@@ -5005,24 +5836,24 @@ var FilterPill = ({
       });
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "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__ */ (0, import_jsx_runtime32.jsx)(
-          import_vuu_ui_controls12.EditableLabel,
+        editable && onExitEditMode ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          import_vuu_ui_controls15.EditableLabel,
           {
             defaultValue: label,
             onEnterEditMode: handleEnterEditMode,
             onExitEditMode
           },
           label
-        ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: `${classBase16}-label`, children: label }),
-        showMenu && onMenuAction ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: `${classBase17}-label`, children: label }),
+        showMenu && onMenuAction ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           FilterPillMenu,
           {
             filter,
@@ -5036,24 +5867,24 @@ var FilterPill = ({
 };
 
 // src/filter-bar/useFilterBar.ts
-var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
-var import_react56 = require("react");
+var import_vuu_utils30 = require("@vuu-ui/vuu-utils");
+var import_react79 = require("react");
 
 // src/filter-bar/useFilters.ts
-var import_vuu_ui_controls13 = require("@vuu-ui/vuu-ui-controls");
-var import_react55 = require("react");
+var import_vuu_ui_controls16 = require("@vuu-ui/vuu-ui-controls");
+var import_react78 = require("react");
 var useFilters = ({
   defaultFilters,
   filters: filtersProp,
   onFiltersChanged
 }) => {
-  const [filters, setFilters] = (0, import_vuu_ui_controls13.useControlled)({
+  const [filters, setFilters] = (0, import_vuu_ui_controls16.useControlled)({
     controlled: filtersProp,
     default: defaultFilters != null ? defaultFilters : [],
     name: "useFilters",
     state: "Filters"
   });
-  const handleAddFilter = (0, import_react55.useCallback)(
+  const handleAddFilter = (0, import_react78.useCallback)(
     (filter) => {
       const index = filters.length;
       const newFilters = filters.concat(filter);
@@ -5063,7 +5894,7 @@ var useFilters = ({
     },
     [filters, onFiltersChanged, setFilters]
   );
-  const handleDeleteFilter = (0, import_react55.useCallback)(
+  const handleDeleteFilter = (0, import_react78.useCallback)(
     (filter) => {
       let index = -1;
       const newFilters = filters.filter((f, i) => {
@@ -5080,7 +5911,7 @@ var useFilters = ({
     },
     [filters, onFiltersChanged, setFilters]
   );
-  const handleRenameFilter = (0, import_react55.useCallback)(
+  const handleRenameFilter = (0, import_react78.useCallback)(
     (filter, name) => {
       let index = -1;
       const newFilters = filters.map((f, i) => {
@@ -5097,7 +5928,7 @@ var useFilters = ({
     },
     [filters, onFiltersChanged, setFilters]
   );
-  const handleChangeFilter = (0, import_react55.useCallback)(
+  const handleChangeFilter = (0, import_react78.useCallback)(
     (filter) => {
       let index = -1;
       const newFilters = filters.map((f, i) => {
@@ -5129,16 +5960,15 @@ var useFilterBar = ({
   activeFilterIndex: activeFilterIdexProp = [],
   containerRef,
   filters: filtersProp,
-  onActiveChange,
   onApplyFilter,
   onFiltersChanged,
   showMenu: showMenuProp
 }) => {
-  const editingFilter = (0, import_react56.useRef)();
-  const [activeFilterIndex, setActiveFilterIndex] = (0, import_react56.useState)(activeFilterIdexProp);
-  const [showMenu, setShowMenu] = (0, import_react56.useState)(showMenuProp);
-  const [editFilter, setEditFilter] = (0, import_react56.useState)();
-  const [promptProps, setPromptProps] = (0, import_react56.useState)(null);
+  const editingFilter = (0, import_react79.useRef)();
+  const [activeFilterIndex, setActiveFilterIndex] = (0, import_react79.useState)(activeFilterIdexProp);
+  const [showMenu, setShowMenu] = (0, import_react79.useState)(showMenuProp);
+  const [editFilter, setEditFilter] = (0, import_react79.useState)();
+  const [promptProps, setPromptProps] = (0, import_react79.useState)(null);
   const {
     filters,
     onAddFilter,
@@ -5149,11 +5979,11 @@ var useFilterBar = ({
     filters: filtersProp,
     onFiltersChanged
   });
-  const editPillLabel = (0, import_react56.useCallback)(
+  const editPillLabel = (0, import_react79.useCallback)(
     (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]) {
@@ -5161,18 +5991,18 @@ var useFilterBar = ({
             ".vuuEditableLabel"
           );
           if (editableLabel) {
-            (0, import_vuu_utils24.dispatchMouseEvent)(editableLabel, "dblclick");
+            (0, import_vuu_utils30.dispatchMouseEvent)(editableLabel, "dblclick");
           }
         }
       });
     },
     [containerRef]
   );
-  const focusFilterClause = (0, import_react56.useCallback)(
+  const focusFilterClause = (0, import_react79.useCallback)(
     (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) {
@@ -5182,11 +6012,11 @@ var useFilterBar = ({
     },
     [containerRef]
   );
-  const focusFilterPill = (0, import_react56.useCallback)(
+  const focusFilterPill = (0, import_react79.useCallback)(
     (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]"
@@ -5198,9 +6028,9 @@ var useFilterBar = ({
     },
     [containerRef]
   );
-  const applyFilter = (0, import_react56.useCallback)(
+  const applyFilter = (0, import_react79.useCallback)(
     (filter) => {
-      const filterQuery = filter ? (0, import_vuu_utils24.filterAsQuery)(filter) : "";
+      const filterQuery = filter ? (0, import_vuu_utils30.filterAsQuery)(filter) : "";
       onApplyFilter({
         filter: filterQuery,
         filterStruct: filter
@@ -5208,30 +6038,7 @@ var useFilterBar = ({
     },
     [onApplyFilter]
   );
-  const handleFilterActivation = (0, import_react56.useCallback)(
-    (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 = (0, import_react56.useCallback)(
+  const deleteConfirmed = (0, import_react79.useCallback)(
     (filter) => {
       const indexOfFilter = filters.indexOf(filter);
       if (activeFilterIndex.includes(indexOfFilter)) {
@@ -5241,8 +6048,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(() => {
@@ -5251,15 +6058,9 @@ var useFilterBar = ({
         }
       });
     },
-    [
-      activeFilterIndex,
-      filters,
-      focusFilterPill,
-      handleFilterActivation,
-      onDeleteFilter
-    ]
+    [activeFilterIndex, filters, focusFilterPill, onDeleteFilter]
   );
-  const getDeletePrompt = (0, import_react56.useMemo)(
+  const getDeletePrompt = (0, import_react79.useMemo)(
     () => (filter) => {
       const close = () => {
         setPromptProps(null);
@@ -5281,7 +6082,7 @@ var useFilterBar = ({
     },
     [deleteConfirmed, focusFilterPill]
   );
-  const deleteFilter = (0, import_react56.useCallback)(
+  const deleteFilter = (0, import_react79.useCallback)(
     (filter, withPrompt) => {
       if (withPrompt) {
         setPromptProps(getDeletePrompt(filter));
@@ -5291,10 +6092,10 @@ var useFilterBar = ({
     },
     [deleteConfirmed, getDeletePrompt]
   );
-  const handleBeginEditFilterName = (0, import_react56.useCallback)((filter) => {
+  const handleBeginEditFilterName = (0, import_react79.useCallback)((filter) => {
     editingFilter.current = filter;
   }, []);
-  const handleExitEditFilterName = (0, import_react56.useCallback)(
+  const handleExitEditFilterName = (0, import_react79.useCallback)(
     (_, editedValue = "") => {
       if (editingFilter.current) {
         const indexOfEditedFilter = onRenameFilter(
@@ -5307,7 +6108,7 @@ var useFilterBar = ({
     },
     [focusFilterPill, onRenameFilter]
   );
-  const handlePillMenuAction = (0, import_react56.useCallback)(
+  const handlePillMenuAction = (0, import_react79.useCallback)(
     ({ menuId, options }) => {
       switch (menuId) {
         case "delete-filter": {
@@ -5334,7 +6135,7 @@ var useFilterBar = ({
     },
     [deleteFilter, editPillLabel, filters, focusFilterClause]
   );
-  const handleMenuAction = (0, import_react56.useCallback)(
+  const handleMenuAction = (0, import_react79.useCallback)(
     ({ menuId }) => {
       switch (menuId) {
         case "apply-save": {
@@ -5346,11 +6147,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":
@@ -5369,20 +6169,36 @@ var useFilterBar = ({
           return false;
       }
     },
-    [
-      activeFilterIndex,
-      applyFilter,
-      editFilter,
-      editPillLabel,
-      handleFilterActivation,
-      onAddFilter,
-      onChangeFilter
-    ]
+    [editFilter, editPillLabel, onAddFilter, onChangeFilter]
+  );
+  (0, import_react79.useEffect)(() => {
+    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 = (0, import_react79.useCallback)(
+    (itemIndex) => {
+      setActiveFilterIndex(itemIndex);
+    },
+    []
   );
-  const handleClickAddFilter = (0, import_react56.useCallback)(() => {
+  const handleClickAddFilter = (0, import_react79.useCallback)(() => {
     setEditFilter({});
   }, []);
-  const handleClickRemoveFilter = (0, import_react56.useCallback)(() => {
+  const handleClickRemoveFilter = (0, import_react79.useCallback)(() => {
     setEditFilter(void 0);
   }, []);
   const pillProps = {
@@ -5391,12 +6207,13 @@ var useFilterBar = ({
     onExitEditMode: handleExitEditFilterName
   };
   const handleChangeFilterClause = (filterClause) => {
+    console.log({ filterClause });
     if (filterClause !== void 0) {
       setEditFilter((filter) => replaceClause(filter, filterClause));
       setShowMenu(true);
     }
   };
-  const onKeyDown = (0, import_react56.useCallback)(
+  const onKeyDown = (0, import_react79.useCallback)(
     (evt) => {
       if (evt.key === "Escape" && editFilter !== void 0) {
         setEditFilter(void 0);
@@ -5410,10 +6227,10 @@ var useFilterBar = ({
     activeFilterIndex,
     editFilter,
     filters,
+    onChangeActiveFilterIndex: handleChangeActiveFilterIndex,
     onClickAddFilter: handleClickAddFilter,
     onClickRemoveFilter: handleClickRemoveFilter,
     onChangeFilterClause: handleChangeFilterClause,
-    onFilterActivation: handleFilterActivation,
     onKeyDown,
     onMenuAction: handleMenuAction,
     pillProps,
@@ -5423,22 +6240,21 @@ var useFilterBar = ({
 };
 
 // src/filter-bar/FilterBar.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var import_react58 = require("react");
-var classBase17 = "vuuFilterBar";
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_react81 = require("react");
+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 = (0, import_react57.useRef)(null);
+  const rootRef = (0, import_react80.useRef)(null);
   const {
     activeFilterIndex,
     editFilter,
@@ -5446,7 +6262,7 @@ var FilterBar = ({
     onClickAddFilter,
     onClickRemoveFilter,
     onChangeFilterClause,
-    onFilterActivation,
+    onChangeActiveFilterIndex,
     onKeyDown,
     onMenuAction,
     pillProps,
@@ -5456,14 +6272,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 = () => {
@@ -5471,28 +6286,15 @@ var FilterBar = ({
     if (editFilter === void 0) {
       filters.forEach((filter, i) => {
         items.push(
-          /* @__PURE__ */ (0, import_react58.createElement)(FilterPill, { ...pillProps, filter, key: `filter-${i}` })
+          /* @__PURE__ */ (0, import_react81.createElement)(FilterPill, { ...pillProps, filter, key: `filter-${i}` })
         );
       });
-      items.push(
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          import_core11.Button,
-          {
-            className: `${classBase17}-add`,
-            "data-icon": "plus",
-            "data-selectable": false,
-            onClick: onClickAddFilter,
-            variant: "primary"
-          },
-          "filter-add"
-        )
-      );
       return items;
     } else if (editFilter) {
       const filterClauses2 = filterClauses(editFilter);
       filterClauses2.forEach((filterClause, i) => {
         items.push(
-          /* @__PURE__ */ (0, import_react58.createElement)(
+          /* @__PURE__ */ (0, import_react81.createElement)(
             FilterClauseEditor,
             {
               ...FilterClauseEditorProps2,
@@ -5507,14 +6309,14 @@ var FilterBar = ({
       });
       if (showMenu) {
         items.push(
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FilterBuilderMenu, { onMenuAction }, "menu")
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FilterBuilderMenu, { onMenuAction }, "menu")
         );
       }
       items.push(
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          import_core11.Button,
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          import_core19.Button,
           {
-            className: `${classBase17}-remove`,
+            className: `${classBase18}-remove`,
             "data-align": "right",
             "data-icon": "cross",
             onClick: onClickRemoveFilter,
@@ -5526,7 +6328,7 @@ var FilterBar = ({
       return items;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
       ...htmlAttributes,
@@ -5534,18 +6336,30 @@ var FilterBar = ({
       onKeyDown,
       ref: rootRef,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: `${classBase17}-icon`, "data-icon": "tune" }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: `${classBase18}-icon`, "data-icon": "tune" }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           Toolbar,
           {
             activeItemIndex: activeFilterIndex,
             height: 26,
-            onActiveChange: onFilterActivation,
+            onActiveChange: onChangeActiveFilterIndex,
             selectionStrategy: "multiple-special-key",
             children: getChildren2()
           }
         ),
-        promptProps ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        editFilter === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+          import_core19.Button,
+          {
+            className: `${classBase18}-add`,
+            "data-icon": "plus",
+            "data-selectable": false,
+            onClick: onClickAddFilter,
+            tabIndex: 0,
+            variant: "primary"
+          },
+          "filter-add"
+        ) : null,
+        promptProps ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           import_vuu_popups5.Prompt,
           {
             ...promptProps,
@@ -5562,7 +6376,7 @@ var FilterBar = ({
 };
 
 // src/filter-input/FilterInput.tsx
-var import_core12 = require("@salt-ds/core");
+var import_core20 = require("@salt-ds/core");
 
 // src/filter-input/useCodeMirrorEditor.ts
 var import_vuu_codemirror5 = require("@vuu-ui/vuu-codemirror");
@@ -5983,7 +6797,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)
@@ -5993,7 +6807,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 (; ; ) {
@@ -6143,8 +6957,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);
@@ -6322,8 +7136,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);
@@ -6637,7 +7451,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;
@@ -6803,7 +7617,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();
@@ -6872,7 +7686,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.
@@ -6927,8 +7741,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
@@ -6947,7 +7761,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);
@@ -6962,7 +7776,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;
@@ -7621,11 +8435,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;
   }
@@ -8256,7 +9070,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([]);
@@ -8436,13 +9250,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 });
@@ -8552,14 +9366,14 @@ var parser = LRParser.deserialize({
 });
 
 // ../vuu-filter-parser/src/FilterTreeWalker.ts
-var import_vuu_utils25 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils31 = require("@vuu-ui/vuu-utils");
 var _filter;
 var FilterExpression = class {
   constructor() {
     __privateAdd(this, _filter, void 0);
   }
   setFilterCombinatorOp(op, filter = __privateGet(this, _filter)) {
-    if ((0, import_vuu_utils25.isMultiClauseFilter)(filter) && filter.op === op) {
+    if ((0, import_vuu_utils31.isMultiClauseFilter)(filter) && filter.op === op) {
       return;
     } else {
       __privateSet(this, _filter, {
@@ -8571,14 +9385,14 @@ var FilterExpression = class {
   add(filter) {
     if (__privateGet(this, _filter) === void 0) {
       __privateSet(this, _filter, filter);
-    } else if ((0, import_vuu_utils25.isMultiClauseFilter)(__privateGet(this, _filter))) {
+    } else if ((0, import_vuu_utils31.isMultiClauseFilter)(__privateGet(this, _filter))) {
       __privateGet(this, _filter).filters.push(filter);
     } else {
       throw Error(`Invalid filter passed to FilterExpression`);
     }
   }
   setColumn(column, filter = __privateGet(this, _filter)) {
-    if ((0, import_vuu_utils25.isMultiClauseFilter)(filter)) {
+    if ((0, import_vuu_utils31.isMultiClauseFilter)(filter)) {
       const target = filter.filters.at(-1);
       if (target) {
         this.setColumn(column, target);
@@ -8588,7 +9402,7 @@ var FilterExpression = class {
     }
   }
   setOp(value, filter = __privateGet(this, _filter)) {
-    if ((0, import_vuu_utils25.isMultiClauseFilter)(filter)) {
+    if ((0, import_vuu_utils31.isMultiClauseFilter)(filter)) {
       const target = filter.filters.at(-1);
       if (target) {
         this.setOp(value, target);
@@ -8598,16 +9412,16 @@ var FilterExpression = class {
     }
   }
   setValue(value, filter = __privateGet(this, _filter)) {
-    var _a;
-    if ((0, import_vuu_utils25.isMultiClauseFilter)(filter)) {
+    var _a2;
+    if ((0, import_vuu_utils31.isMultiClauseFilter)(filter)) {
       const target = filter.filters.at(-1);
       if (target) {
         this.setValue(value, target);
       }
-    } else if ((0, import_vuu_utils25.isMultiValueFilter)(filter)) {
-      (_a = filter.values) != null ? _a : filter.values = [];
+    } else if ((0, import_vuu_utils31.isMultiValueFilter)(filter)) {
+      (_a2 = filter.values) != null ? _a2 : filter.values = [];
       filter.values.push(value);
-    } else if ((0, import_vuu_utils25.isSingleValueFilter)(filter)) {
+    } else if ((0, import_vuu_utils31.isSingleValueFilter)(filter)) {
       filter.value = value;
     }
   }
@@ -8670,8 +9484,8 @@ var walkTree = (tree, source) => {
 var strictParser = parser.configure({ strict: true });
 
 // src/filter-input/useCodeMirrorEditor.ts
-var import_classnames22 = __toESM(require_classnames(), 1);
-var import_react60 = require("react");
+var import_classnames31 = __toESM(require_classnames(), 1);
+var import_react83 = require("react");
 
 // src/filter-input/FilterLanguage.ts
 var import_vuu_codemirror = require("@vuu-ui/vuu-codemirror");
@@ -8776,7 +9590,7 @@ var vuuTheme = import_vuu_codemirror3.EditorView.theme(
 
 // src/filter-input/useFilterAutoComplete.ts
 var import_vuu_codemirror4 = require("@vuu-ui/vuu-codemirror");
-var import_react59 = require("react");
+var import_react82 = require("react");
 var getOperator = (node, state) => {
   let maybeColumnNode = node.prevSibling || node.parent;
   while (maybeColumnNode && !["Column", "Operator", "In"].includes(maybeColumnNode.name)) {
@@ -8846,7 +9660,7 @@ var getSetValues = (node, state) => {
   return values;
 };
 var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
-  const makeSuggestions = (0, import_react59.useCallback)(
+  const makeSuggestions = (0, import_react82.useCallback)(
     async (context, suggestionType, optionalArgs = {}) => {
       const { startsWith = "" } = optionalArgs;
       const options = await suggestionProvider.getSuggestions(
@@ -8857,11 +9671,11 @@ var useAutoComplete = (suggestionProvider, onSubmit, existingFilter) => {
     },
     [suggestionProvider]
   );
-  return (0, import_react59.useCallback)(
+  return (0, import_react82.useCallback)(
     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
@@ -9023,7 +9837,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
   });
 };
@@ -9041,15 +9855,15 @@ var useCodeMirrorEditor = ({
   onSubmitFilter,
   suggestionProvider
 }) => {
-  const editorRef = (0, import_react60.useRef)(null);
-  const onSubmit = (0, import_react60.useRef)(noop);
-  const viewRef = (0, import_react60.useRef)();
+  const editorRef = (0, import_react83.useRef)(null);
+  const onSubmit = (0, import_react83.useRef)(noop);
+  const viewRef = (0, import_react83.useRef)();
   const completionFn = useAutoComplete(
     suggestionProvider,
     onSubmit,
     existingFilter
   );
-  const [createState, clearInput] = (0, import_react60.useMemo)(() => {
+  const [createState, clearInput] = (0, import_react83.useMemo)(() => {
     const parseFilter2 = () => {
       const view = getView(viewRef);
       const source = view.state.doc.toString();
@@ -9124,7 +9938,7 @@ var useCodeMirrorEditor = ({
     };
     return [createState2, clearInput2];
   }, [completionFn, onSubmitFilter]);
-  (0, import_react60.useEffect)(() => {
+  (0, import_react83.useEffect)(() => {
     if (!editorRef.current) {
       throw Error("editor not in dom");
     }
@@ -9133,16 +9947,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
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var classBase18 = "vuuFilterInput";
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var classBase19 = "vuuFilterInput";
 var FilterInput = ({
   existingFilter,
   iconName = "filter",
@@ -9156,20 +9970,20 @@ var FilterInput = ({
     onSubmitFilter,
     suggestionProvider
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ...props, className: classBase18, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      import_core12.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { ...props, className: classBase19, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      import_core20.Button,
       {
-        className: `${classBase18}-FilterButton`,
+        className: `${classBase19}-FilterButton`,
         "data-icon": iconName,
         tabIndex: -1
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `${classBase18}-Editor`, ref: editorRef }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-      import_core12.Button,
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: `${classBase19}-Editor`, ref: editorRef }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      import_core20.Button,
       {
-        className: `${classBase18}-ClearButton`,
+        className: `${classBase19}-ClearButton`,
         "data-icon": "close-circle",
         onClick: clearInput
       }
@@ -9180,16 +9994,16 @@ var FilterInput = ({
 // src/filter-input/useFilterSuggestionProvider.ts
 var import_vuu_codemirror6 = require("@vuu-ui/vuu-codemirror");
 var import_vuu_data_react2 = require("@vuu-ui/vuu-data-react");
-var import_react61 = require("react");
+var import_react84 = require("react");
 
 // src/filter-input/filterInfo.ts
-var import_vuu_utils26 = require("@vuu-ui/vuu-utils");
+var import_vuu_utils32 = require("@vuu-ui/vuu-utils");
 var filterInfo = (filterName, filterQuery) => {
-  const rootElement = (0, import_vuu_utils26.createEl)("div", "vuuFunctionDoc");
-  const headingElement = (0, import_vuu_utils26.createEl)("div", "function-heading");
-  const nameElement = (0, import_vuu_utils26.createEl)("span", "function-name", filterName);
+  const rootElement = (0, import_vuu_utils32.createEl)("div", "vuuFunctionDoc");
+  const headingElement = (0, import_vuu_utils32.createEl)("div", "function-heading");
+  const nameElement = (0, import_vuu_utils32.createEl)("span", "function-name", filterName);
   headingElement.appendChild(nameElement);
-  const child2 = (0, import_vuu_utils26.createEl)("p", void 0, filterQuery);
+  const child2 = (0, import_vuu_utils32.createEl)("p", void 0, filterQuery);
   rootElement.appendChild(headingElement);
   rootElement.appendChild(child2);
   return rootElement;
@@ -9276,9 +10090,9 @@ var useFilterSuggestionProvider = ({
   table,
   typeaheadHook: useTypeahead = import_vuu_data_react2.useTypeaheadSuggestions
 }) => {
-  const latestSuggestionsRef = (0, import_react61.useRef)();
+  const latestSuggestionsRef = (0, import_react84.useRef)();
   const getTypeaheadSuggestions = useTypeahead();
-  const getSuggestions = (0, import_react61.useCallback)(
+  const getSuggestions = (0, import_react84.useCallback)(
     async (suggestionType, options = NONE) => {
       const {
         columnName,
@@ -9368,7 +10182,7 @@ var useFilterSuggestionProvider = ({
     },
     [columns, getTypeaheadSuggestions, namedFilters, saveOptions, table]
   );
-  const isPartialMatch = (0, import_react61.useCallback)(
+  const isPartialMatch = (0, import_react84.useCallback)(
     async (valueType, columnName, pattern) => {
       const suggestions = (
         // latestSuggestions && latestSuggestions.length > 0