@vuu-ui/vuu-layout 0.8.22-debug → 0.8.23-debug

package/esm/index.js

@@ -112,14 +112,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 classBase13 = "vuuDockLayout";
+  const classBase11 = "vuuDockLayout";
   const [drawers, content] = partition(children, isDrawer);
   const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);
   const orientation = verticalDrawers.length === 0 ? "horizontal" : horizontalDrawers.length === 0 ? "vertical" : "both";
-  const className = cx2(classBase13, classNameProp, `${classBase13}-${orientation}`);
+  const className = cx2(classBase11, classNameProp, `${classBase11}-${orientation}`);
   return /* @__PURE__ */ jsxs2("div", { className, id, style, children: [
     drawers,
-    /* @__PURE__ */ jsx2("div", { className: `${classBase13}-content`, children: content })
+    /* @__PURE__ */ jsx2("div", { className: `${classBase11}-content`, children: content })
   ] });
 };
 DockLayout.displayName = "DockLayout";
@@ -183,6 +183,7 @@ function typeOf(element) {
   }
 }
 var isTypeOf = (element, type) => typeOf(element) === type;
+var isLayoutJSON = (layout) => layout !== void 0 && "type" in layout;
 
 // src/utils/pathUtils.ts
 var removeFinalPathSegment = (path) => {
@@ -467,23 +468,6 @@ function setRef(ref, value) {
   }
 }
 
-// src/utils/react-utils.ts
-import { Children, isValidElement as isValidElement2 } from "react";
-var EMPTY_ARRAY = [];
-var asReactElements = (children) => {
-  const isArray = Array.isArray(children);
-  const count = isArray ? children.length : Children.count(children);
-  if (isArray && children.every(isValidElement2)) {
-    return children;
-  } else if (count === 1 && !isArray && isValidElement2(children)) {
-    return [children];
-  } else if (count > 1) {
-    return children;
-  } else {
-    return EMPTY_ARRAY;
-  }
-};
-
 // src/utils/styleUtils.ts
 var expandFlex = (flex) => {
   if (typeof flex !== "number") {
@@ -4222,7 +4206,7 @@ var getBreakPoints = (themeName) => {
 };
 
 // src/responsive/use-breakpoints.ts
-var EMPTY_ARRAY2 = [];
+var EMPTY_ARRAY = [];
 var useBreakpoints = ({ breakPoints: breakPointsProp, smallerThan }, ref) => {
   const [breakpointMatch, setBreakpointmatch] = useState4(
     smallerThan ? false : "lg"
@@ -4263,7 +4247,7 @@ var useBreakpoints = ({ breakPoints: breakPointsProp, smallerThan }, ref) => {
   );
   useResizeObserver(
     ref || bodyRef,
-    breakPointsRef.current ? ["width"] : EMPTY_ARRAY2,
+    breakPointsRef.current ? ["width"] : EMPTY_ARRAY,
     ({ width: measuredWidth }) => {
       const result = matchSizeAgainstBreakpoints(measuredWidth);
       if (result !== sizeRef.current) {
@@ -5061,6 +5045,7 @@ FlexboxLayout.displayName = "Flexbox";
 registerComponent("Flexbox", FlexboxLayout, "container");
 
 // src/flexbox/FluidGrid.tsx
+import { asReactElements } from "@vuu-ui/vuu-utils";
 import { useForkRef as useForkRef3 } from "@salt-ds/core";
 import cx9 from "clsx";
 import { forwardRef as forwardRef5, useMemo as useMemo6 } from "react";
@@ -5069,7 +5054,7 @@ import { forwardRef as forwardRef5, useMemo as useMemo6 } from "react";
 import { getUniqueId as getUniqueId2 } from "@vuu-ui/vuu-utils";
 import {
   cloneElement as cloneElement4,
-  isValidElement as isValidElement3,
+  isValidElement as isValidElement2,
   useCallback as useCallback14,
   useMemo as useMemo5,
   useRef as useRef10
@@ -5088,7 +5073,7 @@ var useResponsiveSizing = ({
   const isColumn = (style == null ? void 0 : style.flexDirection) === "column";
   const dimension3 = isColumn ? "height" : "width";
   const children = useMemo5(
-    () => Array.isArray(childrenProp) ? childrenProp : isValidElement3(childrenProp) ? [childrenProp] : [],
+    () => Array.isArray(childrenProp) ? childrenProp : isValidElement2(childrenProp) ? [childrenProp] : [],
     [childrenProp]
   );
   const buildContent2 = useCallback14(
@@ -5203,862 +5188,18 @@ var FluidGridLayout = function FluidGridLayout2(props) {
 FluidGridLayout.displayName = "FluidGrid";
 registerComponent("FluidGrid", FluidGridLayout, "container");
 
-// src/measured-container/MeasuredContainer.tsx
-import { forwardRef as forwardRef6 } from "react";
-
-// src/measured-container/useMeasuredContainer.ts
-import { isValidNumber } from "@vuu-ui/vuu-utils";
-import {
-  useCallback as useCallback16,
-  useEffect as useEffect4,
-  useMemo as useMemo7,
-  useRef as useRef12,
-  useState as useState9
-} from "react";
-
-// src/measured-container/useResizeObserver.ts
-import { useCallback as useCallback15, useEffect as useEffect3, useRef as useRef11 } from "react";
-var observedMap2 = /* @__PURE__ */ new Map();
-var getTargetSize2 = (element, size, dimension3) => {
-  switch (dimension3) {
-    case "height":
-      return size.height;
-    case "clientHeight":
-      return Math.floor(element.clientHeight);
-    case "clientWidth":
-      return Math.floor(element.clientWidth);
-    case "contentHeight":
-      return size.contentHeight;
-    case "contentWidth":
-      return size.contentWidth;
-    case "scrollHeight":
-      return Math.ceil(Math.floor(element.scrollHeight));
-    case "scrollWidth":
-      return Math.ceil(Math.floor(element.scrollWidth));
-    case "width":
-      return size.width;
-    default:
-      return 0;
-  }
-};
-var resizeObserver2 = new ResizeObserver((entries) => {
-  for (const entry of entries) {
-    const { target, borderBoxSize, contentBoxSize } = entry;
-    const observedTarget = observedMap2.get(target);
-    if (observedTarget) {
-      const [{ blockSize: height, inlineSize: width }] = borderBoxSize;
-      const [{ blockSize: contentHeight, inlineSize: contentWidth }] = contentBoxSize;
-      const { onResize, measurements } = observedTarget;
-      let sizeChanged = false;
-      for (const [dimension3, size] of Object.entries(measurements)) {
-        const newSize = getTargetSize2(
-          target,
-          { height, width, contentHeight, contentWidth },
-          dimension3
-        );
-        if (newSize !== size) {
-          sizeChanged = true;
-          measurements[dimension3] = newSize;
-        }
-      }
-      if (sizeChanged) {
-        onResize && onResize(measurements);
-      }
-    }
-  }
-});
-function useResizeObserver2(ref, dimensions, onResize, reportInitialSize = false) {
-  const dimensionsRef = useRef11(dimensions);
-  const measure = useCallback15((target) => {
-    const { width, height } = target.getBoundingClientRect();
-    const { clientWidth: contentWidth, clientHeight: contentHeight } = target;
-    const flooredHeight = Math.floor(height);
-    const flooredWidth = Math.floor(width);
-    return dimensionsRef.current.reduce(
-      (map, dim) => {
-        map[dim] = getTargetSize2(
-          target,
-          {
-            width: flooredWidth,
-            height: flooredHeight,
-            contentHeight,
-            contentWidth
-          },
-          dim
-        );
-        return map;
-      },
-      {}
-    );
-  }, []);
-  useEffect3(() => {
-    const target = ref.current;
-    async function registerObserver() {
-      observedMap2.set(target, { measurements: {} });
-      const observedTarget = observedMap2.get(target);
-      if (observedTarget) {
-        const measurements = measure(target);
-        observedTarget.measurements = measurements;
-        resizeObserver2.observe(target);
-        if (reportInitialSize) {
-          onResize(measurements);
-        }
-      } else {
-        console.log(
-          `%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation`,
-          "font-weight:bold; color:red;"
-        );
-      }
-    }
-    if (target) {
-      if (observedMap2.has(target)) {
-        console.log(
-          `useResizeObserver attemping to observe same element twice`,
-          {
-            target
-          }
-        );
-      }
-      registerObserver();
-    }
-    return () => {
-      if (target && observedMap2.has(target)) {
-        resizeObserver2.unobserve(target);
-        observedMap2.delete(target);
-      }
-    };
-  }, [measure, ref]);
-  useEffect3(() => {
-    const target = ref.current;
-    const record = observedMap2.get(target);
-    if (record) {
-      if (dimensionsRef.current !== dimensions) {
-        dimensionsRef.current = dimensions;
-        const measurements = measure(target);
-        record.measurements = measurements;
-      }
-      record.onResize = onResize;
-    }
-  }, [dimensions, measure, ref, onResize]);
-}
-
-// src/measured-container/useMeasuredContainer.ts
-var ClientWidthHeight = ["clientHeight", "clientWidth"];
-var WidthOnly2 = ["clientWidth"];
-var HeightOnly2 = ["clientHeight"];
-var NO_MEASUREMENT2 = [];
-var isNumber = (val) => Number.isFinite(val);
-var FULL_SIZE = { height: "100%", width: "auto" };
-var getInitialCssSize = (height, width) => {
-  if (isValidNumber(height) && isValidNumber(width)) {
-    return {
-      height: `${height}px`,
-      width: `${width}px`
-    };
-  } else if (typeof height === "string" || typeof width === "string") {
-    return {
-      height: height != null ? height : "100%",
-      width: width != null ? width : "auto"
-    };
-  } else {
-    return FULL_SIZE;
-  }
-};
-var getInitialInnerSize = (height, width) => {
-  if (isValidNumber(height) && isValidNumber(width)) {
-    return {
-      height,
-      width
-    };
-  }
-};
-var useMeasuredContainer = ({
-  defaultHeight = 0,
-  defaultWidth = 0,
-  height,
-  onResize: onResizeProp,
-  width
-}) => {
-  const containerRef = useRef12(null);
-  const [size, setSize] = useState9({
-    css: getInitialCssSize(height, width),
-    inner: getInitialInnerSize(height, width),
-    outer: {
-      height: height != null ? height : "100%",
-      width: width != null ? width : "auto"
-    }
-  });
-  const fixedHeight = typeof height === "number";
-  const fixedWidth = typeof width === "number";
-  const dimensions = fixedHeight && fixedWidth ? NO_MEASUREMENT2 : fixedHeight ? WidthOnly2 : fixedWidth ? HeightOnly2 : ClientWidthHeight;
-  useMemo7(() => {
-    setSize((currentSize) => {
-      const { inner, outer } = currentSize;
-      if (isValidNumber(height) && isValidNumber(width) && inner && outer) {
-        const { height: innerHeight, width: innerWidth } = inner;
-        const { height: outerHeight, width: outerWidth } = outer;
-        if (outerHeight !== height || outerWidth !== width) {
-          const heightDiff = isValidNumber(outerHeight) ? outerHeight - innerHeight : 0;
-          const widthDiff = isValidNumber(outerWidth) ? outerWidth - innerWidth : 0;
-          return {
-            ...currentSize,
-            outer: { height, width },
-            inner: { height: height - heightDiff, width: width - widthDiff }
-          };
-        }
-      }
-      return currentSize;
-    });
-  }, [height, width]);
-  const onResize = useCallback16(
-    ({ clientWidth, clientHeight }) => {
-      const { css, inner, outer } = size;
-      let newState = size;
-      if (fixedHeight && isNumber(clientWidth) && Math.floor(clientWidth) !== (inner == null ? void 0 : inner.width)) {
-        newState = {
-          css,
-          outer,
-          inner: {
-            width: Math.floor(clientWidth) || defaultWidth,
-            height
-          }
-        };
-      } else if (fixedWidth && isNumber(clientHeight) && Math.floor(clientHeight) !== (inner == null ? void 0 : inner.height)) {
-        newState = {
-          css,
-          outer,
-          inner: {
-            height: Math.floor(clientHeight) || defaultHeight,
-            width
-          }
-        };
-      } else if (isNumber(clientHeight) && isNumber(clientWidth) && (clientWidth !== (inner == null ? void 0 : inner.width) || clientHeight !== (inner == null ? void 0 : inner.height))) {
-        newState = {
-          css,
-          outer,
-          inner: {
-            width: Math.floor(clientWidth) || defaultWidth,
-            height: Math.floor(clientHeight) || defaultHeight
-          }
-        };
-      }
-      if (newState !== size) {
-        setSize(newState);
-      }
-    },
-    [defaultHeight, defaultWidth, fixedHeight, fixedWidth, height, size, width]
-  );
-  useEffect4(() => {
-    if (size.inner) {
-      onResizeProp == null ? void 0 : onResizeProp(size.inner);
-    }
-  }, [onResizeProp, size.inner]);
-  useResizeObserver2(containerRef, dimensions, onResize, true);
-  return {
-    containerRef,
-    cssSize: size.css,
-    outerSize: size.outer,
-    innerSize: size.inner
-  };
-};
-
-// src/measured-container/MeasuredContainer.tsx
-import { useForkRef as useForkRef4 } from "@salt-ds/core";
-import cx10 from "clsx";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var baseClass = "vuuMeasuredContainer";
-var MeasuredContainer = forwardRef6(function MeasuredContainer2({
-  children,
-  className,
-  height,
-  onResize,
-  style,
-  width,
-  ...htmlAttributes
-}, forwardedRef) {
-  const { containerRef, ...containerMeasurements } = useMeasuredContainer({
-    height,
-    onResize,
-    width
-  });
-  const { cssSize, innerSize } = containerMeasurements;
-  const unmeasured = innerSize === void 0;
-  const getStyle3 = () => {
-    return unmeasured ? {
-      "--measured-css-height": `${cssSize.height}`,
-      "--measured-css-width": `${cssSize.width}`
-    } : {
-      ...style,
-      "--measured-css-height": `${cssSize.height}`,
-      "--measured-css-width": `${cssSize.width}`,
-      "--measured-px-height": `${innerSize == null ? void 0 : innerSize.height}px`,
-      "--measured-px-width": `${innerSize == null ? void 0 : innerSize.width}px`
-    };
-  };
-  const forkedRef = useForkRef4(containerRef, forwardedRef);
-  return unmeasured ? /* @__PURE__ */ jsx17(
-    "div",
-    {
-      ...htmlAttributes,
-      className: cx10(baseClass, `${baseClass}-ummeasured`),
-      style: getStyle3(),
-      ref: containerRef
-    }
-  ) : /* @__PURE__ */ jsx17(
-    "div",
-    {
-      ...htmlAttributes,
-      className: cx10(baseClass, className),
-      ref: forkedRef,
-      style: getStyle3(),
-      children
-    }
-  );
-});
-
-// src/overflow-container/OverflowContainer.tsx
-import { PopupMenu } from "@vuu-ui/vuu-popups";
-import { useId as useId2 } from "@vuu-ui/vuu-utils";
-import cx11 from "clsx";
-import React15, {
-  forwardRef as forwardRef7
-} from "react";
-
-// src/overflow-container/useOverflowContainer.ts
-import { useDragDrop } from "@vuu-ui/vuu-ui-controls";
-import {
-  isValidNumber as isValidNumber2,
-  MEASURES,
-  useLayoutEffectSkipFirst
-} from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback17, useMemo as useMemo8, useRef as useRef13, useState as useState10 } from "react";
-
-// src/overflow-container/overflow-utils.ts
-import { getElementByDataIndex } from "@vuu-ui/vuu-utils";
-var NON_WRAPPED_ITEM = ".vuuOverflowContainer-item:not(.wrapped)";
-var isOverflowElement = (element) => element !== null && element.dataset.index === "overflow" && element.parentElement !== null && element.parentElement.classList.contains(
-  "vuuOverflowContainer-wrapContainer-overflowed"
-);
-var sortByScreenOrder = (elements) => elements.sort((e1, e2) => {
-  const {
-    dataset: { index: idx1 = "?" }
-  } = e1;
-  const {
-    dataset: { index: idx2 = "?" }
-  } = e2;
-  const isOverflowed1 = e1.classList.contains("wrapped");
-  const isOverflowed2 = e2.classList.contains("wrapped");
-  const isOverflowedIndicator1 = idx1 === "overflow";
-  const isOverflowedIndicator2 = idx2 === "overflow";
-  if (isOverflowed1 && !isOverflowed2) {
-    return 1;
-  } else if (!isOverflowed1 && isOverflowed2) {
-    return -1;
-  }
-  if (isOverflowedIndicator1) {
-    return 1;
-  } else if (isOverflowedIndicator2) {
-    return -1;
-  }
-  return parseInt(idx1) > parseInt(idx2) ? 1 : -1;
-});
-var NO_WRAPPED_ITEMS = [];
-var getNonWrappedAndWrappedItems = (container, orientation = "horizontal") => {
-  const nonWrappedItems = [];
-  const wrappedItems = [];
-  let currentPosition = -1;
-  let overflowed = false;
-  const sortedChildren = sortByScreenOrder(
-    Array.from(container.children)
-  );
-  const positionAttribute = orientation === "vertical" ? "top" : "left";
-  for (const child of sortedChildren) {
-    const element = child;
-    const {
-      dataset: { index = "?", label = "?", overflowPriority = "0" }
-    } = element;
-    const { [positionAttribute]: position } = element.getBoundingClientRect();
-    if (position <= currentPosition) {
-      if (index === "overflow") {
-        wrappedItems.push(nonWrappedItems.pop());
-      } else {
-        wrappedItems.push({ index, label, overflowPriority });
-      }
-      overflowed = true;
-    } else if (overflowed) {
-      wrappedItems.push({ index, label, overflowPriority });
-    } else {
-      nonWrappedItems.push({ index, label, overflowPriority });
-    }
-    currentPosition = position;
-  }
-  return [nonWrappedItems, wrappedItems];
-};
-var applyOverflowClassToWrappedItems = (container, overflowedItems, classBase13) => {
-  let ignoreOverflow = false;
-  const className = classBase13 ? `${classBase13}-overflowed` : "overflow";
-  if (overflowedItems.find(({ index }) => index === "overflow")) {
-    if (overflowedItems.length === 1) {
-      ignoreOverflow = true;
-    }
-  }
-  for (const element of container.children) {
-    const {
-      dataset: { index = "?" }
-    } = element;
-    if (overflowedItems.length === 0 || ignoreOverflow) {
-      container.classList.remove(className);
-    } else {
-      container.classList.add(className);
-    }
-    if (index !== "overflow" && overflowedItems.find((item) => item.index === index)) {
-      element.classList.add("wrapped");
-    } else {
-      element.classList.remove("wrapped");
-    }
-  }
-};
-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 getHighestPriorityItem = (overflowItems) => {
-  let [highestPriorityItem] = overflowItems;
-  for (let i = 1; i < overflowItems.length; i++) {
-    const item = overflowItems[i];
-    if (parseInt(item.overflowPriority) > parseInt(highestPriorityItem.overflowPriority)) {
-      highestPriorityItem = item;
-    }
-  }
-  return highestPriorityItem;
-};
-var highPriorityItemsHaveWrappedButShouldNotHave = (nonWrappedItems, wrappedItems) => {
-  var _a;
-  const minNonwrappedPriority = nonWrappedItems.reduce(
-    minPriority,
-    Number.MAX_SAFE_INTEGER
-  );
-  const maxwrappedPriority = wrappedItems.reduce(maxPriority, 0);
-  if (maxwrappedPriority > minNonwrappedPriority) {
-    return true;
-  } else {
-    return wrappedItems.length > 1 && ((_a = wrappedItems.at(-1)) == null ? void 0 : _a.index) === "overflow";
-  }
-};
-var correctForWrappedOverflowIndicator = (container, overflowedItems) => new Promise((resolve) => {
-  requestAnimationFrame(() => {
-    const [, o2] = getNonWrappedAndWrappedItems(container);
-    const newlyOverflowed = getNewItems(overflowedItems, o2);
-    newlyOverflowed.forEach((item) => markElementAsWrapped(container, item));
-    resolve(o2);
-  });
-});
-var correctForWrappedHighPriorityItems = (container, nonWrapped, wrapped) => new Promise((resolve) => {
-  requestAnimationFrame(() => {
-    const [, o2] = getNonWrappedAndWrappedItems(container);
-    const highPriorityWrappedItem = getHighestPriorityItem(o2);
-    if (highPriorityWrappedItem) {
-      const [nonWrappedItems, wrappedItems] = switchWrappedItemIntoView(
-        container,
-        highPriorityWrappedItem
-      );
-      resolve([nonWrappedItems, wrappedItems]);
-    } else {
-      resolve([nonWrapped, wrapped]);
-    }
-  });
-});
-var markElementAsWrapped = (container, item) => {
-  const el = getElementByDataIndex(container, item.index);
-  if (el) {
-    el.classList.add("wrapped");
-  } else {
-    throw Error(
-      `markElementAsWrapped element item with index ${item.index} not found`
-    );
-  }
-};
-var getElementsMarkedAsWrapped = (container) => Array.from(container.querySelectorAll(".wrapped"));
-var getNewItems = (items1, items2) => {
-  const newItems = [];
-  for (const item of items2) {
-    if (!items1.find(({ index }) => index === item.index)) {
-      newItems.push(item);
-    }
-  }
-  return newItems;
-};
-var unmarkItemsWhichAreNoLongerWrapped = (container, wrappedItems) => {
-  const elementssMarkedAsWrapped = getElementsMarkedAsWrapped(container);
-  elementssMarkedAsWrapped.forEach((el) => {
-    const {
-      dataset: { index = "?" }
-    } = el;
-    if (!wrappedItems.find((i) => i.index === index)) {
-      el.classList.remove("wrapped");
-    }
-  });
-};
-var getOverflowIndicator = (container) => container.querySelector('[data-index="overflow"]');
-var getOverflowedItem = (container) => container.querySelector(".wrapped");
-var getElementWidth = (el) => parseInt(getComputedStyle(el).getPropertyValue("width"));
-var getAvailableSpace = (container, overflowIndicator) => {
-  const { right: containerRight } = container.getBoundingClientRect();
-  const paddingRight = parseInt(
-    getComputedStyle(container).getPropertyValue("padding-right")
-  );
-  const { right: indicatorRight } = overflowIndicator.getBoundingClientRect();
-  return containerRight - paddingRight - indicatorRight;
-};
-var removeOverflowIndicatorIfNoLongerNeeded = (container) => {
-  const overflowIndicator = getOverflowIndicator(container);
-  const availableSpace = getAvailableSpace(container, overflowIndicator);
-  const indicatorWidth = getElementWidth(overflowIndicator);
-  const overflowedItem = getOverflowedItem(container);
-  const overflowWidth = getElementWidth(overflowedItem);
-  if (overflowWidth <= availableSpace + indicatorWidth) {
-    container.classList.remove("overflowed");
-    overflowedItem.classList.remove("wrapped");
-    return true;
-  }
-  return false;
-};
-var byPriorityDescending = (h1, h2) => {
-  const {
-    dataset: { index: i1 = "0", overflowPriority: p1 = "0" }
-  } = h1;
-  const {
-    dataset: { index: i2 = "0", overflowPriority: p2 = "0" }
-  } = h2;
-  if (p1 > p2) {
-    return -1;
-  } else if (p1 < p2) {
-    return 1;
-  } else {
-    return parseInt(i1) - parseInt(i2);
-  }
-};
-var getNonwrappedItemsByPriority = (container) => Array.from(container.querySelectorAll(NON_WRAPPED_ITEM)).sort(
-  byPriorityDescending
-);
-var switchWrappedItemIntoView = (container, overflowItem) => {
-  const unwrappedItems = getNonwrappedItemsByPriority(container);
-  const targetElement = getElementByDataIndex(
-    container,
-    overflowItem.index,
-    true
-  );
-  let pos = -1;
-  let unwrappedItem = unwrappedItems.at(pos);
-  const itemWidth = getElementWidth(unwrappedItem);
-  const targetWidth = getElementWidth(targetElement);
-  const overflowIndicator = getOverflowIndicator(container);
-  let availableSpace = getAvailableSpace(container, overflowIndicator) + itemWidth;
-  if (availableSpace >= targetWidth) {
-    switchWrapOnElements(targetElement, unwrappedItem);
-  } else {
-    const { left: lastLeft } = unwrappedItem.getBoundingClientRect();
-    const baseAvailableSpace = availableSpace;
-    const wrapTargets = [unwrappedItem];
-    while (availableSpace < targetWidth) {
-      pos -= 1;
-      unwrappedItem = unwrappedItems.at(pos);
-      wrapTargets.push(unwrappedItem);
-      const { left: nextLeft } = unwrappedItem.getBoundingClientRect();
-      const extraSpace = lastLeft - nextLeft;
-      availableSpace = baseAvailableSpace + extraSpace;
-    }
-    targetElement == null ? void 0 : targetElement.classList.remove("wrapped");
-    wrapTargets.forEach((item) => {
-      item.classList.add("wrapped");
-    });
-  }
-  const [nonWrappedItems, wrappedItems] = getNonWrappedAndWrappedItems(container);
-  unmarkItemsWhichAreNoLongerWrapped(container, wrappedItems);
-  return [nonWrappedItems, wrappedItems];
-};
-var switchWrapOnElements = (wrappedElement, nonWrappedElement) => {
-  if (!wrappedElement || !nonWrappedElement) {
-    throw Error("switchWrapOnElements, element undefined");
-  }
-  wrappedElement.classList.remove("wrapped");
-  nonWrappedElement.classList.add("wrapped");
-};
-
-// src/overflow-container/useOverflowContainer.ts
-var useOverflowContainer = ({
-  allowDragDrop = false,
-  itemCount,
-  onMoveItem,
-  onSwitchWrappedItemIntoView,
-  orientation = "horizontal"
-}) => {
-  const [container, setContainer] = useState10(null);
-  const wrappedItemsRef = useRef13(NO_WRAPPED_ITEMS);
-  const containerRef = useRef13(null);
-  const setOverflowTabIndex = useCallback17((tabIndex) => {
-    var _a;
-    if (containerRef.current) {
-      (_a = containerRef.current.querySelector(".vuuOverflowContainer-OverflowIndicator button")) == null ? void 0 : _a.setAttribute("tabindex", tabIndex);
-    }
-  }, []);
-  const handleResize = useCallback17(async () => {
-    if (container) {
-      let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(
-        container,
-        orientation
-      );
-      applyOverflowClassToWrappedItems(
-        container,
-        wrapped,
-        "vuuOverflowContainer-wrapContainer"
-      );
-      if (overflowIndicatorHasWrappedButShouldNotHave(wrapped)) {
-        wrapped = await correctForWrappedOverflowIndicator(container, wrapped);
-      }
-      while (highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped)) {
-        [nonWrapped, wrapped] = await correctForWrappedHighPriorityItems(
-          container,
-          nonWrapped,
-          wrapped
-        );
-      }
-      if (wrapped.length === 1) {
-        if (removeOverflowIndicatorIfNoLongerNeeded(container)) {
-          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, setOverflowTabIndex]);
-  const hasOverflowItem = (opt) => typeof opt === "object" && opt !== null && "overflowItem" in opt;
-  const [menuBuilder, menuActionHandler] = useMemo8(() => {
-    return [
-      () => {
-        const { current: menuItems } = wrappedItemsRef;
-        return menuItems.map((item) => {
-          return {
-            label: item.label,
-            action: `activate-item-${item.index}`,
-            options: { overflowItem: item }
-          };
-        });
-      },
-      // The menu items are our overflowed items, selecting one by default
-      // brings it back onto the toolbar - TODO is this right ?
-      ({ options }) => {
-        if (container && hasOverflowItem(options)) {
-          const [, wrappedItems] = switchWrappedItemIntoView(
-            container,
-            options.overflowItem
-          );
-          wrappedItemsRef.current = wrappedItems;
-          onSwitchWrappedItemIntoView == null ? void 0 : onSwitchWrappedItemIntoView(options.overflowItem);
-        }
-        return true;
-      }
-    ];
-  }, [container, onSwitchWrappedItemIntoView]);
-  const resizeObserver3 = useMemo8(() => {
-    const { sizeProp } = MEASURES[orientation];
-    let currentSize = 0;
-    return new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const { [sizeProp]: actualSize } = entry.contentRect;
-        const size = Math.round(actualSize);
-        if (isValidNumber2(size) && currentSize !== size) {
-          currentSize = size;
-          handleResize();
-        }
-      }
-    });
-  }, [handleResize, orientation]);
-  useLayoutEffectSkipFirst(() => {
-    handleResize();
-  }, [handleResize, itemCount]);
-  useMemo8(() => {
-    if (container) {
-      resizeObserver3.observe(container);
-    }
-  }, [container, resizeObserver3]);
-  const callbackRef = useCallback17((el) => {
-    setContainer(containerRef.current = el);
-  }, []);
-  const handleDrop = useCallback17(
-    (fromIndex, toIndex) => {
-      onMoveItem == null ? void 0 : onMoveItem(fromIndex, toIndex);
-    },
-    [onMoveItem]
-  );
-  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } = useDragDrop({
-    allowDragDrop,
-    containerRef,
-    // this is for useDragDropNext
-    draggableClassName: `vuuOverflowContainer`,
-    // extendedDropZone: overflowedItems.length > 0,
-    onDrop: handleDrop,
-    orientation: "horizontal",
-    itemQuery: ".vuuOverflowContainer-item"
-  });
-  return {
-    menuActionHandler,
-    menuBuilder,
-    onItemMouseDown: dragDropHookHandleMouseDown,
-    rootRef: callbackRef,
-    ...dragDropHook
-  };
-};
-
-// src/overflow-container/OverflowContainer.tsx
-import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
-var classBase10 = "vuuOverflowContainer";
-var WrapContainer = React15.memo(
-  ({
-    PopupMenuProps: PopupMenuProps2,
-    allowDragDrop,
-    children,
-    className: classNameProp,
-    height: heightProp,
-    id,
-    onMoveItem,
-    onSwitchWrappedItemIntoView,
-    orientation = "horizontal",
-    overflowIcon,
-    overflowPosition = "end"
-  }) => {
-    const childElements = asReactElements(children);
-    const {
-      draggable,
-      draggedItemIndex,
-      menuActionHandler,
-      menuBuilder,
-      onItemMouseDown,
-      rootRef
-    } = useOverflowContainer({
-      allowDragDrop,
-      itemCount: childElements.length,
-      onMoveItem,
-      onSwitchWrappedItemIntoView,
-      orientation
-    });
-    const height = orientation === "vertical" ? "100%" : `${heightProp}px`;
-    const style = {
-      "--overflow-container-height": `${height}`
-    };
-    const className = cx11(`${classBase10}-wrapContainer`, classNameProp, {
-      [`${classBase10}-horizontal`]: orientation === "horizontal",
-      [`${classBase10}-vertical`]: orientation === "vertical"
-    });
-    const content = childElements.map((childEl, i) => {
-      const {
-        "data-align": align,
-        "data-overflow-priority": overflowPriority = "0",
-        id: itemId = `${id}-${i}`,
-        label = `Item ${i + 1}`
-      } = childEl.props;
-      return /* @__PURE__ */ jsx18(
-        "div",
-        {
-          className: cx11(`${classBase10}-item`, {
-            "vuuDraggable-dragAway": draggedItemIndex === i
-          }),
-          "data-index": i,
-          "data-align": align,
-          "data-label": label,
-          "data-overflow-priority": overflowPriority,
-          id: `${itemId}-wrapper`,
-          onMouseDown: onItemMouseDown,
-          children: childEl
-        },
-        i
-      );
-    });
-    const overflowIndicator = /* @__PURE__ */ jsx18(
-      "div",
-      {
-        className: `${classBase10}-OverflowIndicator`,
-        "data-index": "overflow",
-        children: /* @__PURE__ */ jsx18(
-          PopupMenu,
-          {
-            ...PopupMenuProps2,
-            icon: overflowIcon,
-            menuBuilder,
-            menuActionHandler,
-            tabIndex: -1
-          }
-        )
-      },
-      "overflow"
-    );
-    content.push(overflowIndicator);
-    return /* @__PURE__ */ jsxs5("div", { className, ref: rootRef, style, children: [
-      content,
-      draggable
-    ] });
-  }
-);
-WrapContainer.displayName = "OverflowContainer.InnerContainer";
-var OverflowContainer = forwardRef7(function OverflowContainer2({
-  PopupMenuProps: PopupMenuProps2,
-  allowDragDrop = false,
-  children,
-  className,
-  height = 44,
-  id: idProp,
-  onMoveItem,
-  onSwitchWrappedItemIntoView,
-  orientation,
-  overflowIcon,
-  overflowPosition,
-  ...htmlAttributes
-}, forwardedRef) {
-  const id = useId2(idProp);
-  return /* @__PURE__ */ jsx18(
-    "div",
-    {
-      ...htmlAttributes,
-      className: cx11(cx11(className, classBase10)),
-      id,
-      ref: forwardedRef,
-      children: /* @__PURE__ */ jsx18(
-        WrapContainer,
-        {
-          PopupMenuProps: PopupMenuProps2,
-          allowDragDrop,
-          height,
-          id,
-          orientation,
-          overflowIcon,
-          overflowPosition,
-          onMoveItem,
-          onSwitchWrappedItemIntoView,
-          children
-        }
-      )
-    }
-  );
-});
-
 // src/palette/Palette.tsx
 import { uuid as uuid5 } from "@vuu-ui/vuu-utils";
 import {
   List,
   ListItem
 } from "@vuu-ui/vuu-ui-controls";
-import cx12 from "clsx";
+import cx10 from "clsx";
 import {
   cloneElement as cloneElement5,
   memo
 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var clonePaletteItem = (paletteItem) => {
   const dolly = paletteItem.cloneNode(true);
   dolly.id = "";
@@ -6075,10 +5216,10 @@ var PaletteItem = memo(
     closeable,
     ...props
   }) => {
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx17(
       ListItem,
       {
-        className: cx12("vuuPaletteItem", className),
+        className: cx10("vuuPaletteItem", className),
         "data-draggable": true,
         "data-icon": "draggable",
         ...props
@@ -6097,7 +5238,7 @@ var Palette = ({
   ...props
 }) => {
   const dispatch = useLayoutProviderDispatch();
-  const classBase13 = "vuuPalette";
+  const classBase11 = "vuuPalette";
   function handleMouseDown(evt) {
     var _a, _b;
     const target = evt.target;
@@ -6110,7 +5251,7 @@ var Palette = ({
     const { height, left, top, width } = listItemElement.getBoundingClientRect();
     const id = uuid5();
     const identifiers = { id, key: id };
-    const component = template ? payload : /* @__PURE__ */ jsx19(
+    const component = template ? payload : /* @__PURE__ */ jsx17(
       MemoView,
       {
         ...ViewProps3,
@@ -6144,12 +5285,12 @@ var Palette = ({
       type: "drag-start"
     });
   }
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx17(
     List,
     {
       ...ListProps2,
       ...props,
-      className: cx12(classBase13, className, `${classBase13}-${orientation}`),
+      className: cx10(classBase11, className, `${classBase11}-${orientation}`),
       itemHeight,
       selected: null,
       children: children.map(
@@ -6165,20 +5306,20 @@ registerComponent("Palette", Palette, "view");
 
 // src/stack/Stack.tsx
 import { Tab, Tabstrip } from "@vuu-ui/vuu-ui-controls";
-import { useId as useId3 } from "@vuu-ui/vuu-utils";
-import cx13 from "clsx";
-import React16, {
-  forwardRef as forwardRef8,
-  useCallback as useCallback18,
-  useRef as useRef14
+import { useId as useId2 } from "@vuu-ui/vuu-utils";
+import cx11 from "clsx";
+import React15, {
+  forwardRef as forwardRef6,
+  useCallback as useCallback15,
+  useRef as useRef11
 } from "react";
-import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
-var classBase11 = "vuuTabs";
+import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+var classBase10 = "vuuTabs";
 var getDefaultTabIcon = () => void 0;
 var getChildElements = (children) => {
   const elements = [];
-  React16.Children.forEach(children, (child) => {
-    if (React16.isValidElement(child)) {
+  React15.Children.forEach(children, (child) => {
+    if (React15.isValidElement(child)) {
       elements.push(child);
     } else {
       console.warn(`Stack has unexpected child element type`);
@@ -6191,7 +5332,7 @@ var DefaultTabstripProps = {
   allowCloseTab: false,
   allowRenameTab: false
 };
-var Stack = forwardRef8(function Stack2({
+var Stack = forwardRef6(function Stack2({
   TabstripProps: TabstripProps2 = DefaultTabstripProps,
   active = 0,
   children,
@@ -6210,14 +5351,14 @@ var Stack = forwardRef8(function Stack2({
   style
 }, ref) {
   var _a;
-  const id = useId3(idProp);
-  const tabLabels = useRef14([]);
+  const id = useId2(idProp);
+  const tabLabels = useRef11([]);
   const {
     allowCloseTab,
     allowRenameTab,
     className: tabstripClassName
   } = TabstripProps2;
-  const handleExitEditMode = useCallback18(
+  const handleExitEditMode = useCallback15(
     (_oldText, newText, _allowDeactivation, tabIndex) => {
       onTabEdit == null ? void 0 : onTabEdit(tabIndex, newText);
     },
@@ -6225,7 +5366,7 @@ var Stack = forwardRef8(function Stack2({
   );
   const activeChild = () => {
     var _a2;
-    if (React16.isValidElement(children)) {
+    if (React15.isValidElement(children)) {
       return children;
     }
     if (Array.isArray(children)) {
@@ -6241,7 +5382,7 @@ var Stack = forwardRef8(function Stack2({
     } = child2.props;
     const label = getTabLabel(child2, idx, tabLabels.current);
     tabLabels.current.push(label);
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx18(
       Tab,
       {
         ariaControls: childId,
@@ -6259,24 +5400,24 @@ var Stack = forwardRef8(function Stack2({
   const child = activeChild();
   const isHorizontal = showTabs === "left" || showTabs === "right";
   const tabstripOrientation = isHorizontal ? "vertical" : "horizontal";
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
-      className: cx13(classBase11, classNameProp, {
-        [`${classBase11}-horizontal`]: isHorizontal
+      className: cx11(classBase10, classNameProp, {
+        [`${classBase10}-horizontal`]: isHorizontal
       }),
       style,
       id,
       ref,
       children: [
-        showTabs ? /* @__PURE__ */ jsx20(
+        showTabs ? /* @__PURE__ */ jsx18(
           Tabstrip,
           {
             ...TabstripProps2,
             activeTabIndex: (_a = TabstripProps2 == null ? void 0 : TabstripProps2.activeTabIndex) != null ? _a : child === null ? -1 : active,
             allowDragDrop: TabstripProps2.allowDragDrop !== false,
             animateSelectionThumb: true,
-            className: cx13("vuuTabHeader", tabstripClassName),
+            className: cx11("vuuTabHeader", tabstripClassName),
             "aria-label": "data tabs",
             keyBoardActivation,
             onActiveChange: onTabSelectionChanged,
@@ -6288,11 +5429,11 @@ var Stack = forwardRef8(function Stack2({
             children: renderTabs()
           }
         ) : null,
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx18(
           "div",
           {
             "aria-labelledby": `${id}-${active}`,
-            className: `${classBase11}-tabPanel`,
+            className: `${classBase10}-tabPanel`,
             role: "tabpanel",
             children: child
           }
@@ -6304,10 +5445,10 @@ var Stack = forwardRef8(function Stack2({
 Stack.displayName = "Stack";
 
 // src/stack/StackLayout.tsx
-import { useId as useId4 } from "@vuu-ui/vuu-utils";
-import React17, { useCallback as useCallback19, useRef as useRef15 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var defaultCreateNewChild = () => /* @__PURE__ */ jsx21(
+import { useId as useId3 } from "@vuu-ui/vuu-utils";
+import React16, { useCallback as useCallback16, useRef as useRef12 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var defaultCreateNewChild = () => /* @__PURE__ */ jsx19(
   Placeholder,
   {
     resizeable: true,
@@ -6316,7 +5457,7 @@ var defaultCreateNewChild = () => /* @__PURE__ */ jsx21(
 );
 var StackLayout = (props) => {
   var _a;
-  const ref = useRef15(null);
+  const ref = useRef12(null);
   const dispatch = useLayoutProviderDispatch();
   const { loadState } = usePersistentState();
   const {
@@ -6327,7 +5468,7 @@ var StackLayout = (props) => {
     ...restProps
   } = props;
   const { children } = props;
-  const id = useId4(idProp);
+  const id = useId3(idProp);
   const [dispatchViewAction] = useViewActionDispatcher(id, ref, path);
   const createNewChildFromContext = useLayoutCreateNewChild();
   const createNewChild = (_a = createNewChildProp != null ? createNewChildProp : createNewChildFromContext) != null ? _a : defaultCreateNewChild;
@@ -6337,7 +5478,7 @@ var StackLayout = (props) => {
       onTabSelectionChanged == null ? void 0 : onTabSelectionChanged(nextIdx);
     }
   };
-  const handleTabClose = useCallback19(
+  const handleTabClose = useCallback16(
     (tabIndex) => {
       if (Array.isArray(children)) {
         const {
@@ -6348,9 +5489,9 @@ var StackLayout = (props) => {
     },
     [children, dispatch]
   );
-  const handleTabAdd = useCallback19(() => {
+  const handleTabAdd = useCallback16(() => {
     if (path) {
-      const tabIndex = React17.Children.count(children);
+      const tabIndex = React16.Children.count(children);
       const component = createNewChild(tabIndex);
       dispatch({
         type: "add",
@@ -6359,7 +5500,7 @@ var StackLayout = (props) => {
       });
     }
   }, [children, createNewChild, dispatch, path]);
-  const handleMoveTab = useCallback19(
+  const handleMoveTab = useCallback16(
     (fromIndex, toIndex) => {
       if (path) {
         dispatch({
@@ -6394,7 +5535,7 @@ var StackLayout = (props) => {
     return loadState(id2, "view-title") || title || // This will normally never be called as title is always assigned in layout model
     getDefaultTabLabel(component, idx, existingLabels);
   };
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx19(
     Stack,
     {
       ...restProps,
@@ -6413,643 +5554,33 @@ var StackLayout = (props) => {
 StackLayout.displayName = "Stack";
 registerComponent("Stack", StackLayout, "container");
 
-// src/toolbar/Toolbar.tsx
-import {
-  forwardCallbackProps
-} from "@vuu-ui/vuu-ui-controls";
-import { useId as useId5 } from "@vuu-ui/vuu-utils";
-import cx14 from "clsx";
-import React18, { useMemo as useMemo9, useRef as useRef18 } from "react";
-
-// src/toolbar/useToolbar.ts
-import { isValidNumber as isValidNumber3 } from "@vuu-ui/vuu-utils";
-import {
-  useCallback as useCallback22,
-  useRef as useRef17
-} from "react";
-
-// src/toolbar/useKeyboardNavigation.ts
-import { useControlled as useControlled2 } from "@salt-ds/core";
-import {
-  dispatchMouseEvent,
-  getClosest,
-  getElementDataIndex as getElementDataIndex2,
-  getFocusableElement
-} from "@vuu-ui/vuu-utils";
-import {
-  useCallback as useCallback20,
-  useRef as useRef16,
-  useState as useState11
-} from "react";
-import {
-  ArrowDown,
-  ArrowUp,
-  ArrowLeft,
-  ArrowRight,
-  Home,
-  End
-} from "@vuu-ui/vuu-utils";
-
-// src/toolbar/toolbar-dom-utils.ts
-import { getElementDataIndex } from "@vuu-ui/vuu-utils";
-var getIndexOfItem = (container, query) => {
-  if (container) {
-    const targetTab = container.querySelector(
-      `[data-index]:has(${query})`
-    );
-    return getElementDataIndex(targetTab);
-  }
-  return -1;
-};
-var getIndexOfEditedItem = (container) => getIndexOfItem(container, ".vuuEditableLabel-editing");
-
-// src/toolbar/useKeyboardNavigation.ts
-var navigation = {
-  horizontal: {
-    [Home]: "start",
-    [End]: "end",
-    [ArrowLeft]: "bwd",
-    [ArrowRight]: "fwd"
-  },
-  vertical: {
-    [Home]: "start",
-    [End]: "end",
-    [ArrowUp]: "bwd",
-    [ArrowDown]: "fwd"
-  }
-};
-var isOverflowIndicator = (el) => el !== null && el.dataset.index === "overflow";
-var itemIsNotFocusable = (container, direction, indexCount, nextIdx, hasOverflowedItem) => {
-  if (container) {
-    const withinRangeBwd = direction === "bwd" && nextIdx > 0;
-    const withinRangeFwd = direction === "fwd" && nextIdx < indexCount;
-    const withinRange = withinRangeBwd || withinRangeFwd;
-    const nextElement = getElementByPosition(container, nextIdx, true);
-    const isOverflowedItem = hasOverflowedItem && !isNonWrappedElement(nextElement);
-    const isHiddenOverflowIndicator = !hasOverflowedItem && isOverflowIndicator(nextElement);
-    hasOverflowedItem && !isNonWrappedElement(nextElement);
-    return withinRange && (isOverflowedItem || isHiddenOverflowIndicator);
-  } else {
-    return false;
-  }
-};
-var isNavigationKey = (key, orientation = "horizontal") => navigation[orientation][key] !== void 0;
-var isMenuActivationKey = (key) => key === ArrowDown;
-function nextItemIdx(count, direction, idx) {
-  if (direction === "start") {
-    return 0;
-  } else if (direction === "end") {
-    return count - 1;
-  } else if (direction === "bwd") {
-    if (idx > 0) {
-      return idx - 1;
-    } else {
-      return idx;
-    }
-  } else {
-    if (idx === null) {
-      return 0;
-    } else if (idx === count - 1) {
-      return idx;
-    } else {
-      return idx + 1;
-    }
-  }
-}
-var isNonWrappedElement = (element) => element !== null && !element.classList.contains("wrapped");
-var getToolbarItems = (container) => Array.from(container.querySelectorAll("[data-index]"));
-var getIndexOfOverflowItem = (container) => {
-  if (container === null) {
-    return -1;
-  } else {
-    const targets = getToolbarItems(container);
-    const indexValues = targets.map((el) => el.dataset.index);
-    return indexValues.indexOf("overflow");
-  }
-};
-var getElementByPosition = (container, index, includeOverflowInd = false) => {
-  if (container !== null) {
-    const targets = getToolbarItems(container);
-    const target = targets[index];
-    if (!includeOverflowInd && isOverflowIndicator(target)) {
-      return null;
-    } else {
-      return target;
-    }
-  }
-  return null;
-};
-var useKeyboardNavigation = ({
-  containerRef,
-  defaultHighlightedIdx = -1,
-  highlightedIdx: highlightedIdxProp,
-  onNavigateOutOfBounds,
-  orientation
-}) => {
-  const mouseClickPending = useRef16(false);
-  const focusedRef = useRef16(-1);
-  const [hasFocus, setHasFocus] = useState11(false);
-  const [highlightedIdx, _setHighlightedIdx] = useControlled2({
-    controlled: highlightedIdxProp,
-    default: defaultHighlightedIdx,
-    name: "UseKeyboardNavigation"
-  });
-  const setHighlightedIdx = useCallback20(
-    (value) => {
-      _setHighlightedIdx(focusedRef.current = value);
-    },
-    [_setHighlightedIdx]
-  );
-  const keyboardNavigation = useRef16(false);
-  const focusItem = useCallback20(
-    (itemIndex, immediateFocus = false, withKeyboard, delay = 70) => {
-      console.log(`focus item ${itemIndex}`);
-      setHighlightedIdx(itemIndex);
-      if (withKeyboard === true && !keyboardNavigation.current) {
-        keyboardNavigation.current = true;
-      }
-      const setFocus = () => {
-        const element = getElementByPosition(
-          containerRef.current,
-          itemIndex,
-          true
-        );
-        if (element) {
-          const focussableElement = getFocusableElement(element);
-          focussableElement == null ? void 0 : focussableElement.focus();
-        }
-      };
-      if (immediateFocus) {
-        setFocus();
-      } else {
-        setTimeout(setFocus, delay);
-      }
-    },
-    [containerRef, setHighlightedIdx]
-  );
-  const onFocus = (e) => {
-    if (focusedRef.current === -1) {
-      if (e.target.tabIndex === 0) {
-        const index = getElementDataIndex2(getClosest(e.target, "index"));
-        setHighlightedIdx(index);
-      } else if (e.target.tabIndex === -1) {
-      } else {
-        const index = getIndexOfEditedItem(containerRef.current);
-        if (index !== -1) {
-          requestAnimationFrame(() => {
-            setHighlightedIdx(index);
-          });
-        }
-      }
-    }
-  };
-  const getIndexCount = useCallback20(
-    () => {
-      var _a, _b;
-      return (_b = (_a = containerRef.current) == null ? void 0 : _a.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
-    },
-    [containerRef]
-  );
-  const nextFocusableItemIdx = useCallback20(
-    (direction = "fwd", idx) => {
-      var _a;
-      const indexCount = getIndexCount();
-      const index = typeof idx === "number" ? idx : indexCount;
-      let nextIdx = nextItemIdx(indexCount, direction, index);
-      const nextDirection = direction === "start" ? "fwd" : direction === "end" ? "bwd" : direction;
-      const hasOverflowedItem = ((_a = containerRef.current) == null ? void 0 : _a.querySelector(
-        ".vuuOverflowContainer-wrapContainer-overflowed"
-      )) != null;
-      while (itemIsNotFocusable(
-        containerRef.current,
-        nextDirection,
-        indexCount,
-        nextIdx,
-        hasOverflowedItem
-      )) {
-        const newIdx = nextItemIdx(indexCount, nextDirection, nextIdx);
-        if (newIdx === nextIdx) {
-          return index;
-        } else {
-          nextIdx = newIdx;
-        }
-      }
-      return nextIdx;
-    },
-    [containerRef, getIndexCount]
-  );
-  const navigateChildItems = useCallback20(
-    (e) => {
-      const direction = navigation[orientation][e.key];
-      const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
-      console.log(`highlightedIdx = ${highlightedIdx}, nextIdx = ${nextIdx} `);
-      if (nextIdx !== highlightedIdx) {
-        const immediateFocus = true;
-        focusItem(nextIdx, immediateFocus);
-      } else {
-        onNavigateOutOfBounds == null ? void 0 : onNavigateOutOfBounds(direction === "bwd" ? "start" : "end");
-      }
-    },
-    [
-      orientation,
-      nextFocusableItemIdx,
-      highlightedIdx,
-      focusItem,
-      onNavigateOutOfBounds
-    ]
-  );
-  const highlightedItemHasMenu = useCallback20(() => {
-    const el = getElementByPosition(containerRef.current, highlightedIdx);
-    if (el) {
-      return el.querySelector(".vuuPopupMenu") != null;
-    }
-    return false;
-  }, [containerRef, highlightedIdx]);
-  const highlightedItemInEditState = useCallback20(() => {
-    const el = getElementByPosition(containerRef.current, highlightedIdx);
-    if (el) {
-      return el.querySelector(".vuuEditableLabel-input") != null;
-    }
-    return false;
-  }, [containerRef, highlightedIdx]);
-  const activateItemMenu = useCallback20(() => {
-    const el = getElementByPosition(containerRef.current, highlightedIdx);
-    const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
-    if (menuEl) {
-      dispatchMouseEvent(menuEl, "click");
-    }
-    return false;
-  }, [containerRef, highlightedIdx]);
-  const handleKeyDown = useCallback20(
-    (e) => {
-      if (getIndexCount() > 0 && isNavigationKey(e.key, orientation)) {
-        e.preventDefault();
-        if (keyboardNavigation.current) {
-          navigateChildItems(e);
-        } else {
-          keyboardNavigation.current = true;
-          navigateChildItems(e);
-        }
-      } else if (isMenuActivationKey(e.key) && highlightedItemHasMenu() && !highlightedItemInEditState()) {
-        activateItemMenu();
-      }
-    },
-    [
-      activateItemMenu,
-      getIndexCount,
-      highlightedItemHasMenu,
-      highlightedItemInEditState,
-      navigateChildItems,
-      orientation
-    ]
-  );
-  const handleItemClick = (_, itemIndex) => {
-    setHighlightedIdx(itemIndex);
-  };
-  const handleFocus = useCallback20(() => {
-    if (!hasFocus) {
-      setHasFocus(true);
-      if (!mouseClickPending.current) {
-        keyboardNavigation.current = true;
-      } else {
-        mouseClickPending.current = false;
-      }
-    }
-  }, [hasFocus]);
-  const handleContainerMouseDown = useCallback20(() => {
-    if (!hasFocus) {
-      mouseClickPending.current = true;
-    }
-    keyboardNavigation.current = false;
-  }, [hasFocus]);
-  const handleOverflowMenuClose = useCallback20(
-    (closeReason) => {
-      if ((closeReason == null ? void 0 : closeReason.type) === "escape") {
-        const index = getIndexOfOverflowItem(containerRef.current);
-        if (index !== -1) {
-          focusItem(index);
-        }
-      }
-    },
-    [containerRef, focusItem]
-  );
-  const containerProps = {
-    onBlur: (e) => {
-      const sourceTarget = e.target.closest(".vuuToolbar");
-      const destTarget = e.relatedTarget;
-      if (sourceTarget && !(sourceTarget == null ? void 0 : sourceTarget.contains(destTarget))) {
-        setHighlightedIdx(-1);
-        setHasFocus(false);
-      }
-    },
-    onMouseDownCapture: handleContainerMouseDown,
-    onFocus: handleFocus,
-    onMouseLeave: () => {
-      keyboardNavigation.current = true;
-      setHighlightedIdx(-1);
-      mouseClickPending.current = false;
-    }
-  };
-  return {
-    containerProps,
-    focusVisible: keyboardNavigation.current ? highlightedIdx : -1,
-    focusIsWithinComponent: hasFocus,
-    highlightedIdx,
-    focusableIdx: 0,
-    focusItem,
-    onClick: handleItemClick,
-    onFocus,
-    onKeyDown: handleKeyDown,
-    onOverflowMenuClose: handleOverflowMenuClose,
-    setHighlightedIdx
-  };
-};
-
-// src/toolbar/useSelection.ts
-import { isSelectableElement, getClosestIndexItem } from "@vuu-ui/vuu-utils";
-import {
-  allowMultipleSelection,
-  deselectionIsAllowed,
-  selectionIsDisallowed,
-  useControlled as useControlled3
-} from "@vuu-ui/vuu-ui-controls";
-import { useCallback as useCallback21 } from "react";
-var defaultSelectionKeys = ["Enter", " "];
-var NO_SELECTION_HANDLERS = {};
-var useSelection = ({
-  containerRef,
-  defaultSelected,
-  highlightedIdx,
-  itemQuery,
-  onSelectionChange,
-  selected: selectedProp,
-  selectionStrategy
-}) => {
-  const [selected, setSelected, isControlled] = useControlled3({
-    controlled: selectedProp,
-    default: defaultSelected != null ? defaultSelected : [],
-    name: "useSelection",
-    state: "selected"
-  });
-  const isSelectionEvent = useCallback21(
-    (evt) => defaultSelectionKeys.includes(evt.key),
-    []
-  );
-  const selectItem = useCallback21(
-    (itemIndex, specialKey = false) => {
-      const newSelected = allowMultipleSelection(selectionStrategy, specialKey) ? selected.concat(itemIndex) : [itemIndex];
-      setSelected(newSelected);
-      onSelectionChange == null ? void 0 : onSelectionChange(newSelected);
-    },
-    [onSelectionChange, selected, selectionStrategy, setSelected]
-  );
-  const deselectItem = useCallback21(
-    (itemIndex, specialKey = false) => {
-      const newSelected = selectionStrategy === "deselectable" || selectionStrategy === "multiple-special-key" && !specialKey ? [] : selected.filter((index) => index !== itemIndex);
-      setSelected(newSelected);
-      onSelectionChange == null ? void 0 : onSelectionChange(newSelected);
-    },
-    [onSelectionChange, selected, selectionStrategy, setSelected]
-  );
-  const handleKeyDown = useCallback21(
-    (e) => {
-      if (isSelectionEvent(e) && isSelectableElement(e.target)) {
-        if (!selected.includes(highlightedIdx)) {
-          e.stopPropagation();
-          e.preventDefault();
-          selectItem(highlightedIdx, e.shiftKey);
-        } else if (deselectionIsAllowed(selectionStrategy)) {
-          e.stopPropagation();
-          e.preventDefault();
-          deselectItem(highlightedIdx, e.shiftKey);
-        }
-      }
-    },
-    [
-      isSelectionEvent,
-      selected,
-      highlightedIdx,
-      selectionStrategy,
-      selectItem,
-      deselectItem
-    ]
-  );
-  const handleClick = useCallback21(
-    (e, itemIndex) => {
-      const element = getClosestIndexItem(e.target);
-      if (isSelectableElement(element)) {
-        if (!selected.includes(itemIndex)) {
-          selectItem(itemIndex, e.shiftKey);
-        } else if (deselectionIsAllowed(selectionStrategy)) {
-          deselectItem(itemIndex, e.shiftKey);
-        }
-      }
-    },
-    [deselectItem, selectItem, selected, selectionStrategy]
-  );
-  const itemHandlers = selectionIsDisallowed(selectionStrategy) ? NO_SELECTION_HANDLERS : {
-    onClick: handleClick,
-    onKeyDown: handleKeyDown
-  };
-  return {
-    activateItem: selectItem,
-    itemHandlers,
-    isControlled,
-    selected
-  };
-};
-
-// src/toolbar/useToolbar.ts
-var useToolbar = ({
-  activeItemIndex: activeItemIndexProp,
-  defaultActiveItemIndex,
-  containerRef,
-  itemQuery = "vuuToolbarItem",
-  onActiveChange,
-  onNavigateOutOfBounds,
-  orientation,
-  selectionStrategy
-}) => {
-  const lastSelection = useRef17(activeItemIndexProp);
-  const {
-    focusItem: keyboardHookFocusItem,
-    highlightedIdx,
-    onClick: keyboardHookHandleClick,
-    onKeyDown: keyboardHookHandleKeyDown,
-    setHighlightedIdx: keyboardHookSetHighlightedIndex,
-    ...keyboardHook
-  } = useKeyboardNavigation({
-    containerRef,
-    onNavigateOutOfBounds,
-    orientation
-  });
-  const {
-    activateItem: selectionHookActivateItem,
-    itemHandlers: { onClick, onKeyDown },
-    selected: selectionHookSelected
-  } = useSelection({
-    containerRef,
-    defaultSelected: defaultActiveItemIndex,
-    highlightedIdx,
-    itemQuery,
-    onSelectionChange: onActiveChange,
-    selected: activeItemIndexProp,
-    selectionStrategy
-  });
-  lastSelection.current = selectionHookSelected;
-  const handleClick = useCallback22(
-    (evt) => {
-      var _a;
-      const target = evt.target;
-      const toolbarItem = target.closest("[data-index]");
-      if (toolbarItem) {
-        const index = parseInt((_a = toolbarItem.dataset.index) != null ? _a : "-1");
-        if (index !== -1 && isValidNumber3(index)) {
-          keyboardHookHandleClick(evt, index);
-          onClick == null ? void 0 : onClick(evt, index);
-        }
-      }
-    },
-    [keyboardHookHandleClick, onClick]
-  );
-  const handleKeyDown = useCallback22(
-    (evt) => {
-      keyboardHookHandleKeyDown(evt);
-      if (!evt.defaultPrevented) {
-        onKeyDown == null ? void 0 : onKeyDown(evt);
-      }
-    },
-    [keyboardHookHandleKeyDown, onKeyDown]
-  );
-  const onSwitchWrappedItemIntoView = useCallback22(
-    (item) => {
-      const index = parseInt(item.index);
-      if (!isNaN(index)) {
-        selectionHookActivateItem(index);
-        keyboardHookFocusItem(index);
-      }
-    },
-    [keyboardHookFocusItem, selectionHookActivateItem]
-  );
-  const itemProps = {
-    onClick: handleClick,
-    onFocus: keyboardHook.onFocus,
-    onKeyDown: handleKeyDown
-  };
-  return {
-    activeItemIndex: selectionHookSelected,
-    focusableIdx: keyboardHook.focusableIdx,
-    focusVisible: keyboardHook.focusVisible,
-    containerProps: {
-      PopupMenuProps: {
-        onKeyDown: handleKeyDown,
-        onMenuClose: keyboardHook.onOverflowMenuClose
-      },
-      ...keyboardHook.containerProps,
-      onSwitchWrappedItemIntoView
-    },
-    itemProps
-  };
-};
-
-// src/toolbar/Toolbar.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
-var classBase12 = "vuuToolbar";
-var Toolbar = ({
-  activeItemIndex: activeItemIndexProp,
-  alignItems = "start",
-  defaultActiveItemIndex,
-  children,
-  className,
-  id: idProp,
-  onActiveChange,
-  onNavigateOutOfBounds,
-  orientation = "horizontal",
-  selectionStrategy = "none",
-  showSeparators = false,
-  ...props
-}) => {
-  const rootRef = useRef18(null);
-  const {
-    activeItemIndex,
-    focusableIdx,
-    focusVisible,
-    itemProps,
-    ...toolbarHook
-  } = useToolbar({
-    activeItemIndex: activeItemIndexProp,
-    defaultActiveItemIndex,
-    containerRef: rootRef,
-    onActiveChange,
-    onNavigateOutOfBounds,
-    orientation,
-    selectionStrategy
-  });
-  const id = useId5(idProp);
-  const items = useMemo9(
-    () => asReactElements(children).map((child, index) => {
-      const {
-        id: itemId = `${id}-tab-${index}`,
-        className: itemClassName,
-        ...ownProps
-      } = child.props;
-      const selected = activeItemIndex.includes(index);
-      return React18.cloneElement(child, {
-        ...forwardCallbackProps(ownProps, itemProps),
-        className: cx14("vuuToolbarItem", itemClassName),
-        "data-overflow-priority": selected ? "1" : void 0,
-        id: itemId,
-        key: index,
-        "aria-selected": selected,
-        tabIndex: focusableIdx === index ? 0 : -1
-      });
-    }),
-    [activeItemIndex, children, focusableIdx, id, itemProps]
-  );
-  return /* @__PURE__ */ jsx22(
-    OverflowContainer,
-    {
-      ...props,
-      ...toolbarHook.containerProps,
-      className: cx14(className, classBase12, `${classBase12}-${orientation}`, {
-        [`${classBase12}-alignCenter`]: alignItems === "center",
-        [`${classBase12}-alignEnd`]: alignItems === "end",
-        [`${classBase12}-withSeparators`]: showSeparators
-      }),
-      ...props,
-      ref: rootRef,
-      children: items
-    }
-  );
-};
-
 // src/tools/config-wrapper/ConfigWrapper.tsx
-import React19, { useState as useState12 } from "react";
-import { jsx as jsx23, jsxs as jsxs7 } from "react/jsx-runtime";
+import React17, { useState as useState9 } from "react";
+import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
 var ConfigWrapper = ({ children }) => {
   const designMode = false;
-  const [layout, setLayout] = useState12(children);
-  const [selectedComponent, setSelectedComponent] = useState12(children);
+  const [layout, setLayout] = useState9(children);
+  const [selectedComponent, setSelectedComponent] = useState9(children);
   const handleSelection = (selectedPath) => {
     const targetComponent = followPathToComponent(layout, selectedPath);
     setSelectedComponent(targetComponent);
   };
   const handleChange = (property, value) => {
     console.log(`change ${property} -> ${value}`);
-    const newComponent = React19.cloneElement(selectedComponent, {
+    const newComponent = React17.cloneElement(selectedComponent, {
       style: {
         ...selectedComponent.props.style,
         [property]: value
       }
     });
     setSelectedComponent(newComponent);
-    setLayout(React19.cloneElement(layout, {}, newComponent));
+    setLayout(React17.cloneElement(layout, {}, newComponent));
   };
-  return /* @__PURE__ */ jsxs7("div", { "data-design-mode": `${designMode}`, children: [
+  return /* @__PURE__ */ jsxs6("div", { "data-design-mode": `${designMode}`, children: [
     layout,
-    /* @__PURE__ */ jsx23("br", {}),
-    /* @__PURE__ */ jsxs7("div", { style: { display: "flex" }, children: [
-      /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx20("br", {}),
+    /* @__PURE__ */ jsxs6("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ jsx20(
         LayoutConfigurator,
         {
           height: 300,
@@ -7059,7 +5590,7 @@ var ConfigWrapper = ({ children }) => {
           style: void 0
         }
       ),
-      /* @__PURE__ */ jsx23(
+      /* @__PURE__ */ jsx20(
         LayoutTreeViewer,
         {
           layout,
@@ -7073,7 +5604,7 @@ var ConfigWrapper = ({ children }) => {
 
 // src/tools/devtools-box/layout-configurator.jsx
 import { FormField, Input } from "@salt-ds/core";
-import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
 var NO_STYLE2 = {};
 var DIMENSIONS = {
   margin: {
@@ -7096,10 +5627,10 @@ var DIMENSIONS = {
   }
 };
 var LayoutBox = ({ feature, children, style, onChange }) => {
-  return /* @__PURE__ */ jsxs8("div", { className: `LayoutBox layout-${feature} layout-outer`, children: [
-    /* @__PURE__ */ jsxs8("div", { className: `layout-top`, children: [
-      /* @__PURE__ */ jsx24("span", { className: "layout-title", children: feature }),
-      /* @__PURE__ */ jsx24(FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsxs7("div", { className: `LayoutBox layout-${feature} layout-outer`, children: [
+    /* @__PURE__ */ jsxs7("div", { className: `layout-top`, children: [
+      /* @__PURE__ */ jsx21("span", { className: "layout-title", children: feature }),
+      /* @__PURE__ */ jsx21(FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ jsx21(
         Input,
         {
           value: style.top,
@@ -7107,8 +5638,8 @@ var LayoutBox = ({ feature, children, style, onChange }) => {
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: `layout-inner`, children: [
-      /* @__PURE__ */ jsx24("div", { className: `layout-left`, children: /* @__PURE__ */ jsx24(FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsxs7("div", { className: `layout-inner`, children: [
+      /* @__PURE__ */ jsx21("div", { className: `layout-left`, children: /* @__PURE__ */ jsx21(FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ jsx21(
         Input,
         {
           value: style.left,
@@ -7116,7 +5647,7 @@ var LayoutBox = ({ feature, children, style, onChange }) => {
         }
       ) }) }),
       children,
-      /* @__PURE__ */ jsx24("div", { className: `layout-right`, children: /* @__PURE__ */ jsx24(FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ jsx24(
+      /* @__PURE__ */ jsx21("div", { className: `layout-right`, children: /* @__PURE__ */ jsx21(FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ jsx21(
         Input,
         {
           value: style.right,
@@ -7124,7 +5655,7 @@ var LayoutBox = ({ feature, children, style, onChange }) => {
         }
       ) }) })
     ] }),
-    /* @__PURE__ */ jsx24("div", { className: `layout-bottom`, children: /* @__PURE__ */ jsx24(FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx21("div", { className: `layout-bottom`, children: /* @__PURE__ */ jsx21(FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ jsx21(
       Input,
       {
         value: style.bottom,
@@ -7191,25 +5722,25 @@ var LayoutConfigurator = ({
     paddingBottom: pb = 0,
     paddingLeft: pl = 0
   } = state;
-  return /* @__PURE__ */ jsx24("div", { className: "LayoutConfigurator", style: { width, height, ...style }, children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx21("div", { className: "LayoutConfigurator", style: { width, height, ...style }, children: /* @__PURE__ */ jsx21(
     LayoutBox,
     {
       feature: "margin",
       style: { top: mt, right: mr, bottom: mb, left: ml },
       onChange: handleChange,
-      children: /* @__PURE__ */ jsx24(
+      children: /* @__PURE__ */ jsx21(
         LayoutBox,
         {
           feature: "border",
           style: { top: bt, right: br, bottom: bb, left: bl },
           onChange: handleChange,
-          children: /* @__PURE__ */ jsx24(
+          children: /* @__PURE__ */ jsx21(
             LayoutBox,
             {
               feature: "padding",
               style: { top: pt, right: pr, bottom: pb, left: pl },
               onChange: handleChange,
-              children: /* @__PURE__ */ jsx24("div", { className: "layout-content" })
+              children: /* @__PURE__ */ jsx21("div", { className: "layout-content" })
             }
           )
         }
@@ -7377,16 +5908,16 @@ function normalizeStyle(managedStyle = NO_STYLE2) {
 }
 
 // src/tools/devtools-tree/layout-tree-viewer.jsx
-import React20 from "react";
-import cx15 from "clsx";
+import React18 from "react";
+import cx12 from "clsx";
 import { Tree } from "@vuu-ui/vuu-ui-controls";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var classBaseTree = "hwLayoutTreeViewer";
 var toTreeJson = (component, path = "0") => {
   return {
     label: typeOf(component),
     path,
-    childNodes: React20.Children.map(
+    childNodes: React18.Children.map(
       component.props.children,
       (child, i) => toTreeJson(child, path ? `${path}.${i}` : `${i}`)
     )
@@ -7397,7 +5928,7 @@ var LayoutTreeViewer = ({ layout, onSelect, style }) => {
   const handleSelection = (evt, [{ path }]) => {
     onSelect(path);
   };
-  return /* @__PURE__ */ jsx25("div", { className: cx15(classBaseTree), style, children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx22("div", { className: cx12(classBaseTree), style, children: /* @__PURE__ */ jsx22(
     Tree,
     {
       source: treeJson,
@@ -7431,16 +5962,12 @@ export {
   LayoutProviderVersion,
   LayoutTreeViewer,
   MARGIN_STYLES,
-  MeasuredContainer,
-  NO_WRAPPED_ITEMS,
-  OverflowContainer,
   PADDING_STYLES,
   Palette,
   PaletteItem,
   Placeholder,
   Stack,
   StackLayout,
-  Toolbar,
   MemoView as View,
   ViewContext,
   WidthHeight,
@@ -7448,13 +5975,9 @@ export {
   XXXnormalizeStyles,
   applyLayout,
   applyLayoutProps,
-  applyOverflowClassToWrappedItems,
-  asReactElements,
   componentToJson,
   computeMenuPosition,
   containerOf,
-  correctForWrappedHighPriorityItems,
-  correctForWrappedOverflowIndicator,
   createFlexbox,
   createPlaceHolder,
   expandFlex,
@@ -7466,25 +5989,22 @@ export {
   getChild,
   getChildProp,
   getDefaultTabLabel,
-  getElementsMarkedAsWrapped,
   getFlexDimensions,
   getFlexOrIntrinsicStyle,
   getFlexStyle,
   getIntrinsicSize,
   getManagedDimension,
-  getNonWrappedAndWrappedItems,
   getPersistentState,
   getProp,
   getProps,
   hasPersistentState,
   hasUnboundedFlexStyle,
-  highPriorityItemsHaveWrappedButShouldNotHave,
   identifyDropTarget,
   isApplicationLevelChange,
   isContainer,
   isLayoutComponent,
+  isLayoutJSON,
   isLayoutLevelChange,
-  isOverflowElement,
   isResponsiveAttribute,
   isTabstrip,
   isTypeOf,
@@ -7493,14 +6013,11 @@ export {
   layoutQuery,
   layoutReducer,
   layoutToJSON,
-  markElementAsWrapped,
   nextLeaf,
   nextStep,
-  overflowIndicatorHasWrappedButShouldNotHave,
   previousLeaf,
   processLayoutElement,
   registerComponent,
-  removeOverflowIndicatorIfNoLongerNeeded,
   resetPath,
   resizeObserver,
   resolveJSONPath,
@@ -7508,15 +6025,11 @@ export {
   serializeProps,
   setPersistentState,
   setRef,
-  sortByScreenOrder,
-  switchWrappedItemIntoView,
   typeOf,
-  unmarkItemsWhichAreNoLongerWrapped,
   useBreakpoints,
   useLayoutCreateNewChild,
   useLayoutProviderDispatch,
   useLayoutProviderVersion,
-  useMeasuredContainer,
   usePersistentState,
   useResizeObserver,
   useViewActionDispatcher,