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

package/cjs/index.js

@@ -54,16 +54,12 @@ __export(src_exports, {
   LayoutProviderVersion: () => LayoutProviderVersion,
   LayoutTreeViewer: () => LayoutTreeViewer,
   MARGIN_STYLES: () => MARGIN_STYLES,
-  MeasuredContainer: () => MeasuredContainer,
-  NO_WRAPPED_ITEMS: () => NO_WRAPPED_ITEMS,
-  OverflowContainer: () => OverflowContainer,
   PADDING_STYLES: () => PADDING_STYLES,
   Palette: () => Palette,
   PaletteItem: () => PaletteItem,
   Placeholder: () => Placeholder,
   Stack: () => Stack,
   StackLayout: () => StackLayout,
-  Toolbar: () => Toolbar,
   View: () => MemoView,
   ViewContext: () => ViewContext,
   WidthHeight: () => WidthHeight,
@@ -71,13 +67,9 @@ __export(src_exports, {
   XXXnormalizeStyles: () => XXXnormalizeStyles,
   applyLayout: () => applyLayout,
   applyLayoutProps: () => applyLayoutProps,
-  applyOverflowClassToWrappedItems: () => applyOverflowClassToWrappedItems,
-  asReactElements: () => asReactElements,
   componentToJson: () => componentToJson,
   computeMenuPosition: () => computeMenuPosition,
   containerOf: () => containerOf,
-  correctForWrappedHighPriorityItems: () => correctForWrappedHighPriorityItems,
-  correctForWrappedOverflowIndicator: () => correctForWrappedOverflowIndicator,
   createFlexbox: () => createFlexbox,
   createPlaceHolder: () => createPlaceHolder,
   expandFlex: () => expandFlex,
@@ -89,25 +81,22 @@ __export(src_exports, {
   getChild: () => getChild,
   getChildProp: () => getChildProp,
   getDefaultTabLabel: () => getDefaultTabLabel,
-  getElementsMarkedAsWrapped: () => getElementsMarkedAsWrapped,
   getFlexDimensions: () => getFlexDimensions,
   getFlexOrIntrinsicStyle: () => getFlexOrIntrinsicStyle,
   getFlexStyle: () => getFlexStyle,
   getIntrinsicSize: () => getIntrinsicSize,
   getManagedDimension: () => getManagedDimension,
-  getNonWrappedAndWrappedItems: () => getNonWrappedAndWrappedItems,
   getPersistentState: () => getPersistentState,
   getProp: () => getProp,
   getProps: () => getProps,
   hasPersistentState: () => hasPersistentState,
   hasUnboundedFlexStyle: () => hasUnboundedFlexStyle,
-  highPriorityItemsHaveWrappedButShouldNotHave: () => highPriorityItemsHaveWrappedButShouldNotHave,
   identifyDropTarget: () => identifyDropTarget,
   isApplicationLevelChange: () => isApplicationLevelChange,
   isContainer: () => isContainer,
   isLayoutComponent: () => isLayoutComponent,
+  isLayoutJSON: () => isLayoutJSON,
   isLayoutLevelChange: () => isLayoutLevelChange,
-  isOverflowElement: () => isOverflowElement,
   isResponsiveAttribute: () => isResponsiveAttribute,
   isTabstrip: () => isTabstrip,
   isTypeOf: () => isTypeOf,
@@ -116,14 +105,11 @@ __export(src_exports, {
   layoutQuery: () => layoutQuery,
   layoutReducer: () => layoutReducer,
   layoutToJSON: () => layoutToJSON,
-  markElementAsWrapped: () => markElementAsWrapped,
   nextLeaf: () => nextLeaf,
   nextStep: () => nextStep,
-  overflowIndicatorHasWrappedButShouldNotHave: () => overflowIndicatorHasWrappedButShouldNotHave,
   previousLeaf: () => previousLeaf,
   processLayoutElement: () => processLayoutElement,
   registerComponent: () => registerComponent,
-  removeOverflowIndicatorIfNoLongerNeeded: () => removeOverflowIndicatorIfNoLongerNeeded,
   resetPath: () => resetPath,
   resizeObserver: () => resizeObserver,
   resolveJSONPath: () => resolveJSONPath,
@@ -131,15 +117,11 @@ __export(src_exports, {
   serializeProps: () => serializeProps,
   setPersistentState: () => setPersistentState,
   setRef: () => setRef,
-  sortByScreenOrder: () => sortByScreenOrder,
-  switchWrappedItemIntoView: () => switchWrappedItemIntoView,
   typeOf: () => typeOf,
-  unmarkItemsWhichAreNoLongerWrapped: () => unmarkItemsWhichAreNoLongerWrapped,
   useBreakpoints: () => useBreakpoints,
   useLayoutCreateNewChild: () => useLayoutCreateNewChild,
   useLayoutProviderDispatch: () => useLayoutProviderDispatch,
   useLayoutProviderVersion: () => useLayoutProviderVersion,
-  useMeasuredContainer: () => useMeasuredContainer,
   usePersistentState: () => usePersistentState,
   useResizeObserver: () => useResizeObserver,
   useViewActionDispatcher: () => useViewActionDispatcher,
@@ -263,14 +245,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] = (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_clsx2.default)(classBase13, classNameProp, `${classBase13}-${orientation}`);
+  const className = (0, import_clsx2.default)(classBase11, classNameProp, `${classBase11}-${orientation}`);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className, id, style, children: [
     drawers,
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `${classBase13}-content`, children: content })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `${classBase11}-content`, children: content })
   ] });
 };
 DockLayout.displayName = "DockLayout";
@@ -334,6 +316,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) => {
@@ -618,23 +601,6 @@ function setRef(ref, value) {
   }
 }
 
-// src/utils/react-utils.ts
-var import_react4 = require("react");
-var EMPTY_ARRAY = [];
-var asReactElements = (children) => {
-  const isArray = Array.isArray(children);
-  const count = isArray ? children.length : import_react4.Children.count(children);
-  if (isArray && children.every(import_react4.isValidElement)) {
-    return children;
-  } else if (count === 1 && !isArray && (0, import_react4.isValidElement)(children)) {
-    return [children];
-  } else if (count > 1) {
-    return children;
-  } else {
-    return EMPTY_ARRAY;
-  }
-};
-
 // src/utils/styleUtils.ts
 var expandFlex = (flex) => {
   if (typeof flex !== "number") {
@@ -1912,9 +1878,9 @@ function onDragEnd() {
 
 // src/DraggableLayout.tsx
 var import_clsx4 = __toESM(require("clsx"));
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var DraggableLayout = (0, import_react5.forwardRef)(function DraggableLayout2({
+var DraggableLayout = (0, import_react4.forwardRef)(function DraggableLayout2({
   children,
   className: classNameProp,
   dropTarget,
@@ -1932,28 +1898,28 @@ registerComponent(componentName, DraggableLayout, "container");
 // src/flexbox/Flexbox.tsx
 var import_core5 = require("@salt-ds/core");
 var import_clsx9 = __toESM(require("clsx"));
-var import_react30 = require("react");
+var import_react29 = require("react");
 
 // src/flexbox/useSplitterResizing.ts
 var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
-var import_react29 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 
 // src/placeholder/Placeholder.tsx
 var import_clsx7 = __toESM(require("clsx"));
 
 // src/placeholder/LayoutStartPanel.tsx
 var import_core4 = require("@salt-ds/core");
-var import_react27 = require("react");
+var import_react26 = require("react");
 
 // src/layout-view/useViewActionDispatcher.ts
-var import_react19 = require("react");
+var import_react18 = require("react");
 
 // src/layout-provider/LayoutProvider.tsx
-var import_react18 = require("react");
+var import_react17 = require("react");
 
 // src/layout-reducer/flexUtils.ts
 var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
-var import_react6 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var placeHolderProps = { "data-placeholder": true, "data-resizeable": true };
 var NO_STYLE = {};
 var auto = "auto";
@@ -2124,7 +2090,7 @@ function createFlexbox(flexDirection3, props, children, path) {
   const { flexFill, style, resizeable = true } = props;
   const { flexBasis = flexFill ? void 0 : "auto" } = style;
   const flex = getFlexValue(flexBasis, flexFill);
-  return import_react6.default.createElement(
+  return import_react5.default.createElement(
     ComponentRegistry.Flexbox,
     {
       id,
@@ -2146,7 +2112,7 @@ function createFlexbox(flexDirection3, props, children, path) {
 var baseStyle = { flexGrow: 1, flexShrink: 1 };
 function createPlaceHolder(path, size, style, props) {
   const id = (0, import_vuu_utils3.uuid)();
-  return import_react6.default.createElement("div", {
+  return import_react5.default.createElement("div", {
     ...placeHolderProps,
     ...props,
     "data-path": path,
@@ -2157,25 +2123,25 @@ function createPlaceHolder(path, size, style, props) {
 }
 
 // src/layout-reducer/layout-reducer.ts
-var import_react15 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 
 // src/layout-reducer/insert-layout-element.ts
 var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
-var import_react9 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/layout-reducer/layoutUtils.ts
 var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
-var import_react8 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 
 // src/use-persistent-state.ts
-var import_react7 = require("react");
+var import_react6 = require("react");
 var persistentState = /* @__PURE__ */ new Map();
 var sessionState = /* @__PURE__ */ new Map();
 var getPersistentState = (id) => persistentState.get(id);
 var hasPersistentState = (id) => persistentState.has(id);
 var setPersistentState = (id, value) => persistentState.set(id, value);
 var usePersistentState = () => {
-  const loadSessionState = (0, import_react7.useCallback)((id, key) => {
+  const loadSessionState = (0, import_react6.useCallback)((id, key) => {
     const state = sessionState.get(id);
     if (state) {
       if (key !== void 0 && state[key] !== void 0) {
@@ -2187,7 +2153,7 @@ var usePersistentState = () => {
       return state;
     }
   }, []);
-  const saveSessionState = (0, import_react7.useCallback)((id, key, data) => {
+  const saveSessionState = (0, import_react6.useCallback)((id, key, data) => {
     if (key === void 0) {
       sessionState.set(id, data);
     } else if (sessionState.has(id)) {
@@ -2200,7 +2166,7 @@ var usePersistentState = () => {
       sessionState.set(id, { [key]: data });
     }
   }, []);
-  const purgeSessionState = (0, import_react7.useCallback)((id, key) => {
+  const purgeSessionState = (0, import_react6.useCallback)((id, key) => {
     if (sessionState.has(id)) {
       if (key === void 0) {
         sessionState.delete(id);
@@ -2217,7 +2183,7 @@ var usePersistentState = () => {
       }
     }
   }, []);
-  const loadState = (0, import_react7.useCallback)((id, key) => {
+  const loadState = (0, import_react6.useCallback)((id, key) => {
     const state = persistentState.get(id);
     if (state) {
       if (key !== void 0) {
@@ -2226,7 +2192,7 @@ var usePersistentState = () => {
       return state;
     }
   }, []);
-  const saveState = (0, import_react7.useCallback)(
+  const saveState = (0, import_react6.useCallback)(
     (id, key, data) => {
       if (key === void 0) {
         persistentState.set(id, data);
@@ -2242,7 +2208,7 @@ var usePersistentState = () => {
     },
     []
   );
-  const purgeState = (0, import_react7.useCallback)((id, key) => {
+  const purgeState = (0, import_react6.useCallback)((id, key) => {
     if (persistentState.has(id)) {
       if (key === void 0) {
         persistentState.delete(id);
@@ -2278,7 +2244,7 @@ var applyLayoutProps = (component, path = "0") => {
     component.props,
     path
   );
-  return import_react8.default.cloneElement(component, layoutProps, children);
+  return import_react7.default.cloneElement(component, layoutProps, children);
 };
 var processLayoutElement = (layoutElement, previousLayout) => {
   const type = typeOf(layoutElement);
@@ -2289,7 +2255,7 @@ var processLayoutElement = (layoutElement, previousLayout) => {
     void 0,
     previousLayout
   );
-  return (0, import_react8.cloneElement)(layoutElement, layoutProps, children);
+  return (0, import_react7.cloneElement)(layoutElement, layoutProps, children);
 };
 var applyLayout = (type, props, previousLayout) => {
   const [layoutProps, children] = getChildLayoutProps(
@@ -2340,7 +2306,7 @@ function getChildLayoutProps(type, props, path, parentType = null, previousLayou
   return [layoutProps, children];
 }
 function getLayoutChildren(type, children, path = "0", previousChildren) {
-  const kids = Array.isArray(children) ? children : import_react8.default.isValidElement(children) ? [children] : [];
+  const kids = Array.isArray(children) ? children : import_react7.default.isValidElement(children) ? [children] : [];
   return isContainer(type) ? kids.map((child, i) => {
     const childType = typeOf(child);
     const previousType = typeOf(previousChildren == null ? void 0 : previousChildren[i]);
@@ -2352,7 +2318,7 @@ function getLayoutChildren(type, children, path = "0", previousChildren) {
         type,
         previousChildren == null ? void 0 : previousChildren[i]
       );
-      return import_react8.default.cloneElement(child, layoutProps, children2);
+      return import_react7.default.cloneElement(child, layoutProps, children2);
     }
     return previousChildren == null ? void 0 : previousChildren[i];
   }) : children;
@@ -2397,7 +2363,7 @@ function layoutFromJson({ id = (0, import_vuu_utils4.uuid)(), type, children, pr
   if (state) {
     setPersistentState(id, state);
   }
-  return import_react8.default.createElement(
+  return import_react7.default.createElement(
     componentType,
     {
       id,
@@ -2420,7 +2386,7 @@ function componentToJson(component) {
     type,
     props: serializeProps(props),
     state,
-    children: import_react8.default.Children.map(children, componentToJson)
+    children: import_react7.default.Children.map(children, componentToJson)
   };
 }
 function serializeProps(props) {
@@ -2509,7 +2475,7 @@ function insertIntoContainer(container, targetContainer, newComponent) {
     )
   ];
   const active = typeOf(container) === "Stack" ? Array.isArray(insertedIdx) ? insertedIdx[0] : insertedIdx : containerActive;
-  return import_react9.default.cloneElement(container, { active }, children);
+  return import_react8.default.cloneElement(container, { active }, children);
 }
 var getDefaultTitle = (containerType, component, index, existingLabels) => containerType === "Stack" ? getDefaultTabLabel(component, index, existingLabels) : void 0;
 var getChildrenTitles = (children) => children.map((child) => child.props.title);
@@ -2573,7 +2539,7 @@ function insertBesideChild(container, existingComponent, newComponent, insertion
     )
   ];
   const active = typeOf(container) === "Stack" ? insertedIdx : containerActive;
-  return import_react9.default.cloneElement(container, { active }, children);
+  return import_react8.default.cloneElement(container, { active }, children);
 }
 function updateChildren(container, containerChildren, idx, newComponent, insertionPosition, pos, clientRect, dropRect) {
   const intrinsicSize = getIntrinsicSize(newComponent);
@@ -2710,10 +2676,10 @@ function getStyledComponents(container, existingComponent, newComponent, targetR
     );
     const newComponentStyle = getFlexOrIntrinsicStyle(newComponent, dim, size);
     return [
-      import_react9.default.cloneElement(existingComponent, {
+      import_react8.default.cloneElement(existingComponent, {
         style: existingComponentStyle
       }),
-      import_react9.default.cloneElement(newComponent, {
+      import_react8.default.cloneElement(newComponent, {
         id,
         version,
         style: newComponentStyle
@@ -2729,7 +2695,7 @@ function getStyledComponents(container, existingComponent, newComponent, targetR
     } = getProps(newComponent);
     return [
       existingComponent,
-      import_react9.default.cloneElement(newComponent, {
+      import_react8.default.cloneElement(newComponent, {
         id,
         version,
         style: { ...style, flex: "1 1 0px" }
@@ -2739,10 +2705,10 @@ function getStyledComponents(container, existingComponent, newComponent, targetR
 }
 
 // src/layout-reducer/move-layout-element.ts
-var import_react11 = require("react");
+var import_react10 = require("react");
 
 // src/layout-reducer/replace-layout-element.ts
-var import_react10 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 
 // src/layout-action.ts
 var Action = {
@@ -2777,7 +2743,7 @@ function _replaceChild(model, child, replacement) {
   const resizeable = getProp(child, "resizeable");
   const { style } = getProps(child);
   const newChild = applyLayoutProps(
-    import_react10.default.cloneElement(replacement, {
+    import_react9.default.cloneElement(replacement, {
       resizeable,
       style: {
         ...style,
@@ -2805,7 +2771,7 @@ function swapChild(model, child, replacement, op) {
   } else {
     children[idx] = swapChild(children[idx], child, replacement, op);
   }
-  return import_react10.default.cloneElement(model, void 0, children);
+  return import_react9.default.cloneElement(model, void 0, children);
 }
 function minimize(parent, child) {
   const { style: parentStyle } = getProps(parent);
@@ -2826,7 +2792,7 @@ function minimize(parent, child) {
   };
   const collapsed = parentStyle.flexDirection === "row" ? "vertical" : parentStyle.flexDirection === "column" ? "horizontal" : false;
   if (collapsed) {
-    return import_react10.default.cloneElement(child, {
+    return import_react9.default.cloneElement(child, {
       collapsed,
       restoreStyle,
       style
@@ -2841,7 +2807,7 @@ function restore(child) {
     ...rest,
     ...restoreStyle
   };
-  return import_react10.default.cloneElement(child, {
+  return import_react9.default.cloneElement(child, {
     collapsed: false,
     style,
     restoreStyle: void 0
@@ -2857,7 +2823,7 @@ function moveChild(layoutRoot, { fromIndex, path, toIndex }) {
     fromIndex,
     toIndex
   );
-  const replacement = (0, import_react11.cloneElement)(target, void 0, replacementChildren);
+  const replacement = (0, import_react10.cloneElement)(target, void 0, replacementChildren);
   return swapChild(layoutRoot, target, replacement);
 }
 function moveChildWithinChildren(children, fromIndex, toIndex) {
@@ -2908,7 +2874,7 @@ var isLayoutLevelChange = (layoutChangeReason) => [
 ].includes(layoutChangeReason);
 
 // src/layout-reducer/remove-layout-element.ts
-var import_react12 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 function removeChild(layoutRoot, { path }) {
   const target = followPath(layoutRoot, path);
   let targetParent = followPathToParent(layoutRoot, path);
@@ -2995,7 +2961,7 @@ function _removeChild(container, child) {
     children[idx] = _removeChild(children[idx], child);
   }
   children = children.map((child2, i) => resetPath(child2, `${path}.${i}`));
-  return import_react12.default.cloneElement(container, { active }, children);
+  return import_react11.default.cloneElement(container, { active }, children);
 }
 function unwrap(container, child) {
   const type = typeOf(container);
@@ -3005,7 +2971,7 @@ function unwrap(container, child) {
   } = getProps(container);
   let unwrappedChild = resetPath(child, path);
   if (path === "0") {
-    unwrappedChild = import_react12.default.cloneElement(unwrappedChild, {
+    unwrappedChild = import_react11.default.cloneElement(unwrappedChild, {
       style: {
         ...child.props.style,
         width,
@@ -3017,7 +2983,7 @@ function unwrap(container, child) {
     const {
       style: { [dim]: size, ...style }
     } = unwrappedChild.props;
-    unwrappedChild = import_react12.default.cloneElement(unwrappedChild, {
+    unwrappedChild = import_react11.default.cloneElement(unwrappedChild, {
       flexFill: void 0,
       style: {
         ...style,
@@ -3040,7 +3006,7 @@ var canBeMadeFlexible = (element) => {
 };
 var makeFlexible = (children) => {
   return children.map(
-    (child) => canBeMadeFlexible(child) ? import_react12.default.cloneElement(child, {
+    (child) => canBeMadeFlexible(child) ? import_react11.default.cloneElement(child, {
       style: {
         ...child.props.style,
         flexGrow: 1
@@ -3071,7 +3037,7 @@ var collapsePlaceholders = (container, target) => {
     children[idx] = collapsePlaceholders(children[idx], target);
   }
   children = children.map((child, i) => resetPath(child, `${path}.${i}`));
-  return import_react12.default.cloneElement(container, void 0, children);
+  return import_react11.default.cloneElement(container, void 0, children);
 };
 var _collapsePlaceHolders = (container) => {
   const { children } = getProps(container);
@@ -3096,7 +3062,7 @@ var _collapsePlaceHolders = (container) => {
     newChildren.push(mergePlaceholders(placeholders));
   }
   const containerPath = getProp(container, "path");
-  return import_react12.default.cloneElement(
+  return import_react11.default.cloneElement(
     container,
     void 0,
     newChildren.map((child, i) => resetPath(child, `${containerPath}.${i}`))
@@ -3112,7 +3078,7 @@ var mergePlaceholders = ([placeholder, ...placeholders]) => {
     flexGrow = Math.max(flexGrow, style.flexGrow);
     flexShrink = Math.max(flexShrink, style.flexShrink);
   }
-  return import_react12.default.cloneElement(placeholder, {
+  return import_react11.default.cloneElement(placeholder, {
     style: { ...targetStyle, flexBasis, flexGrow, flexShrink }
   });
 };
@@ -3121,7 +3087,7 @@ var allOtherChildrenArePlaceholders = (children, path) => children.every(
 );
 
 // src/layout-reducer/resize-flex-children.ts
-var import_react13 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 function resizeFlexChild(layoutRoot, { path, size }) {
   const target = followPath(layoutRoot, path, true);
   const { style } = getProps(target);
@@ -3129,7 +3095,7 @@ function resizeFlexChild(layoutRoot, { path, size }) {
     ...style,
     width: size
   };
-  const replacement = import_react13.default.cloneElement(target, { style: newStyle });
+  const replacement = import_react12.default.cloneElement(target, { style: newStyle });
   return swapChild(layoutRoot, target, replacement);
 }
 function resizeFlexChildren(layoutRoot, { path, sizes }) {
@@ -3137,7 +3103,7 @@ function resizeFlexChildren(layoutRoot, { path, sizes }) {
   const { children, style } = getProps(target);
   const dimension3 = style.flexDirection === "column" ? "height" : "width";
   const replacementChildren = applySizesToChildren(children, sizes, dimension3);
-  const replacement = import_react13.default.cloneElement(
+  const replacement = import_react12.default.cloneElement(
     target,
     void 0,
     replacementChildren
@@ -3156,7 +3122,7 @@ function applySizesToChildren(children, sizes, dimension3) {
     if (newSize === void 0 || size === newSize || actualFlexBasis === newSize) {
       return child;
     }
-    return import_react13.default.cloneElement(child, {
+    return import_react12.default.cloneElement(child, {
       style: applySizeToChild(child.props.style, dimension3, newSize)
     });
   });
@@ -3175,7 +3141,7 @@ function applySizeToChild(style, dimension3, newSize) {
 
 // src/layout-reducer/wrap-layout-element.ts
 var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
-var import_react14 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var isHtmlElement = (component) => {
   const [firstLetter] = typeOf(component);
   return firstLetter === firstLetter.toLowerCase();
@@ -3202,7 +3168,7 @@ function wrap(container, existingComponent, newComponent, pos, clientRect, dropR
       dropRect
     ) : child
   );
-  return import_react14.default.cloneElement(container, void 0, children);
+  return import_react13.default.cloneElement(container, void 0, children);
 }
 function updateChildren2(container, containerChildren, existingComponent, newComponent, pos, clientRect, dropRect) {
   const intrinsicSize = getIntrinsicSize(newComponent);
@@ -3262,7 +3228,7 @@ function wrapFlexComponent(container, containerChildren, existingComponent, newC
     splitterSize: (_a = typeOf(container) === "Flexbox" && container.props.splitterSize) != null ? _a : void 0
   } : void 0;
   const id = (0, import_vuu_utils6.uuid)();
-  const wrapper = import_react14.default.createElement(
+  const wrapper = import_react13.default.createElement(
     ComponentRegistry[type],
     {
       active,
@@ -3283,12 +3249,12 @@ function wrapFlexComponent(container, containerChildren, existingComponent, newC
         existingComponentProps
       ),
       applyLayoutProps(
-        import_react14.default.cloneElement(newComponent, newComponentProps),
+        import_react13.default.cloneElement(newComponent, newComponentProps),
         `${existingComponentPath}.1`
       )
     ] : [
       applyLayoutProps(
-        import_react14.default.cloneElement(newComponent, newComponentProps),
+        import_react13.default.cloneElement(newComponent, newComponentProps),
         `${existingComponentPath}.0`
       ),
       resetPath(
@@ -3417,21 +3383,21 @@ var layoutReducer = (state, action) => {
 };
 var switchTab = (state, { path, nextIdx }) => {
   const target = followPath(state, path, true);
-  const replacement = import_react15.default.cloneElement(target, {
+  const replacement = import_react14.default.cloneElement(target, {
     active: nextIdx
   });
   return swapChild(state, target, replacement);
 };
 var setProp = (state, { path, propName, propValue }) => {
   const target = followPath(state, path, true);
-  const replacement = import_react15.default.cloneElement(target, {
+  const replacement = import_react14.default.cloneElement(target, {
     [propName]: propValue
   });
   return swapChild(state, target, replacement);
 };
 var setProps = (state, { path, props }) => {
   const target = followPath(state, path, true);
-  const replacement = import_react15.default.cloneElement(target, props);
+  const replacement = import_react14.default.cloneElement(target, props);
   return swapChild(state, target, replacement);
 };
 var setChildProps = (state, { path, type }) => {
@@ -3562,17 +3528,17 @@ var isTerrace = (container) => {
 };
 
 // src/layout-provider/LayoutProviderContext.ts
-var import_react16 = require("react");
+var import_react15 = require("react");
 var unconfiguredLayoutProviderDispatch = (action) => console.log(
   `dispatch ${action.type}, have you forgotten to provide a LayoutProvider ?`
 );
-var LayoutProviderContext = (0, import_react16.createContext)({
+var LayoutProviderContext = (0, import_react15.createContext)({
   dispatchLayoutProvider: unconfiguredLayoutProviderDispatch,
   version: -1
 });
 
 // src/layout-provider/useLayoutDragDrop.ts
-var import_react17 = require("react");
+var import_react16 = require("react");
 var NO_INSTRUCTIONS = {};
 var NO_OFFSETS = [0, 0];
 var getDragElement = (rect2, id, dragElement) => {
@@ -3601,10 +3567,10 @@ var determineDragOffsets = (draggedElement) => {
   }
 };
 var useLayoutDragDrop = (rootLayoutRef, dispatch, pathToDropTarget) => {
-  const dragActionRef = (0, import_react17.useRef)();
-  const dragOperationRef = (0, import_react17.useRef)();
-  const draggableHTMLElementRef = (0, import_react17.useRef)();
-  const handleDrag = (0, import_react17.useCallback)((x, y) => {
+  const dragActionRef = (0, import_react16.useRef)();
+  const dragOperationRef = (0, import_react16.useRef)();
+  const draggableHTMLElementRef = (0, import_react16.useRef)();
+  const handleDrag = (0, import_react16.useCallback)((x, y) => {
     if (dragOperationRef.current && draggableHTMLElementRef.current) {
       const {
         dragOffsets: [offsetX, offsetY],
@@ -3620,7 +3586,7 @@ var useLayoutDragDrop = (rootLayoutRef, dispatch, pathToDropTarget) => {
       }
     }
   }, []);
-  const handleDrop = (0, import_react17.useCallback)(
+  const handleDrop = (0, import_react16.useCallback)(
     (dropTarget) => {
       if (dragOperationRef.current) {
         const {
@@ -3654,7 +3620,7 @@ var useLayoutDragDrop = (rootLayoutRef, dispatch, pathToDropTarget) => {
     },
     [dispatch]
   );
-  const handleDragStart = (0, import_react17.useCallback)(
+  const handleDragStart = (0, import_react16.useCallback)(
     (evt) => {
       if (dragActionRef.current) {
         const {
@@ -3717,7 +3683,7 @@ var useLayoutDragDrop = (rootLayoutRef, dispatch, pathToDropTarget) => {
     },
     [handleDrag, handleDrop, rootLayoutRef]
   );
-  const prepareToDrag = (0, import_react17.useCallback)(
+  const prepareToDrag = (0, import_react16.useCallback)(
     (action) => {
       const { evt, ...options } = action;
       dragActionRef.current = {
@@ -3769,10 +3735,10 @@ var LayoutProviderVersion = () => {
 };
 var LayoutProvider = (props) => {
   const { children, createNewChild, pathToDropTarget, layout, onLayoutChange } = props;
-  const state = (0, import_react18.useRef)(void 0);
-  const childrenRef = (0, import_react18.useRef)(children);
-  const [, forceRefresh] = (0, import_react18.useState)(null);
-  const serializeState = (0, import_react18.useCallback)(
+  const state = (0, import_react17.useRef)(void 0);
+  const childrenRef = (0, import_react17.useRef)(children);
+  const [, forceRefresh] = (0, import_react17.useState)(null);
+  const serializeState = (0, import_react17.useCallback)(
     (source, layoutChangeReason) => {
       if (onLayoutChange) {
         const targetContainer = findTarget(source, withDropTarget) || state.current;
@@ -3784,7 +3750,7 @@ var LayoutProvider = (props) => {
     },
     [onLayoutChange]
   );
-  const dispatchLayoutAction = (0, import_react18.useCallback)(
+  const dispatchLayoutAction = (0, import_react17.useCallback)(
     (action, suppressSave = false) => {
       const nextState = layoutReducer(state.current, action);
       if (nextState !== state.current) {
@@ -3797,7 +3763,7 @@ var LayoutProvider = (props) => {
     },
     [forceRefresh, serializeState]
   );
-  const layoutActionDispatcher = (0, import_react18.useCallback)(
+  const layoutActionDispatcher = (0, import_react17.useCallback)(
     (action) => {
       switch (action.type) {
         case "drag-start": {
@@ -3827,7 +3793,7 @@ var LayoutProvider = (props) => {
     layoutActionDispatcher,
     pathToDropTarget
   );
-  (0, import_react18.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (layout) {
       const targetContainer = findTarget(
         state.current,
@@ -3879,15 +3845,15 @@ var LayoutProvider = (props) => {
   );
 };
 var useLayoutProviderDispatch = () => {
-  const { dispatchLayoutProvider } = (0, import_react18.useContext)(LayoutProviderContext);
+  const { dispatchLayoutProvider } = (0, import_react17.useContext)(LayoutProviderContext);
   return dispatchLayoutProvider;
 };
 var useLayoutCreateNewChild = () => {
-  const { createNewChild } = (0, import_react18.useContext)(LayoutProviderContext);
+  const { createNewChild } = (0, import_react17.useContext)(LayoutProviderContext);
   return createNewChild;
 };
 var useLayoutProviderVersion = () => {
-  const { version } = (0, import_react18.useContext)(LayoutProviderContext);
+  const { version } = (0, import_react17.useContext)(LayoutProviderContext);
   return version;
 };
 
@@ -3895,11 +3861,11 @@ var useLayoutProviderVersion = () => {
 var useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
   var _a;
   const { loadSessionState, purgeSessionState, purgeState, saveSessionState } = usePersistentState();
-  const [contributions, setContributions] = (0, import_react19.useState)(
+  const [contributions, setContributions] = (0, import_react18.useState)(
     (_a = loadSessionState(id, "contributions")) != null ? _a : []
   );
   const dispatchLayoutAction = useLayoutProviderDispatch();
-  const updateContributions = (0, import_react19.useCallback)(
+  const updateContributions = (0, import_react18.useCallback)(
     (location, content) => {
       const updatedContributions = contributions.concat([
         { location, content }
@@ -3909,11 +3875,11 @@ var useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
     },
     [contributions, id, saveSessionState]
   );
-  const clearContributions = (0, import_react19.useCallback)(() => {
+  const clearContributions = (0, import_react18.useCallback)(() => {
     purgeSessionState(id, "contributions");
     setContributions([]);
   }, [id, purgeSessionState]);
-  const handleRemove = (0, import_react19.useCallback)(() => {
+  const handleRemove = (0, import_react18.useCallback)(() => {
     const ds = loadSessionState(id, "data-source");
     if (ds) {
       ds.unsubscribe();
@@ -3929,7 +3895,7 @@ var useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
     purgeState,
     viewPath
   ]);
-  const handleMouseDown = (0, import_react19.useCallback)(
+  const handleMouseDown = (0, import_react18.useCallback)(
     async (evt, index, preDragActivity) => {
       var _a2;
       evt.stopPropagation();
@@ -3949,7 +3915,7 @@ var useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
     },
     [root, dispatchLayoutAction, viewPath, dropTargets]
   );
-  const dispatchAction = (0, import_react19.useCallback)(
+  const dispatchAction = (0, import_react18.useCallback)(
     async (action, evt) => {
       var _a2;
       const { type } = action;
@@ -3994,13 +3960,13 @@ var useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
 var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
 var import_core3 = require("@salt-ds/core");
 var import_clsx6 = __toESM(require("clsx"));
-var import_react26 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 
 // src/layout-header/Header.tsx
 var import_vuu_ui_controls = require("@vuu-ui/vuu-ui-controls");
 var import_core2 = require("@salt-ds/core");
 var import_clsx5 = __toESM(require("clsx"));
-var import_react20 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var classBase3 = "vuuHeader";
 var Header = ({
@@ -4013,9 +3979,9 @@ var Header = ({
   style,
   title = "Untitled"
 }) => {
-  const labelFieldRef = (0, import_react20.useRef)(null);
-  const [value, setValue] = (0, import_react20.useState)(title);
-  const [editing, setEditing] = (0, import_react20.useState)(false);
+  const labelFieldRef = (0, import_react19.useRef)(null);
+  const [value, setValue] = (0, import_react19.useState)(title);
+  const [editing, setEditing] = (0, import_react19.useState)(false);
   const viewDispatch = useViewDispatch();
   const handleClose = (evt) => viewDispatch == null ? void 0 : viewDispatch({ type: "remove" }, evt);
   const handleTitleMouseDown = () => {
@@ -4061,11 +4027,11 @@ var Header = ({
   contributions == null ? void 0 : contributions.forEach((contribution, i) => {
     switch (contribution.location) {
       case "pre-title":
-        toolbarItems.push((0, import_react20.cloneElement)(contribution.content, { key: i }));
+        toolbarItems.push((0, import_react19.cloneElement)(contribution.content, { key: i }));
         break;
       default:
         postTitleContributedItems.push(
-          (0, import_react20.cloneElement)(contribution.content, { key: i })
+          (0, import_react19.cloneElement)(contribution.content, { key: i })
         );
     }
   });
@@ -4117,7 +4083,7 @@ var Header = ({
 };
 
 // src/layout-view/useView.tsx
-var import_react21 = require("react");
+var import_react20 = require("react");
 var useView = ({
   id,
   rootRef,
@@ -4139,14 +4105,14 @@ var useView = ({
     path,
     dropTargets
   );
-  const title = (0, import_react21.useMemo)(
+  const title = (0, import_react20.useMemo)(
     () => {
       var _a;
       return (_a = loadState("view-title")) != null ? _a : titleProp;
     },
     [loadState, titleProp]
   );
-  const onEditTitle = (0, import_react21.useCallback)(
+  const onEditTitle = (0, import_react20.useCallback)(
     (title2) => {
       if (path) {
         layoutDispatch({ type: "set-title", path, title: title2 });
@@ -4154,34 +4120,34 @@ var useView = ({
     },
     [layoutDispatch, path]
   );
-  const restoredState = (0, import_react21.useMemo)(() => loadState(id), [id, loadState]);
-  const load = (0, import_react21.useCallback)(
+  const restoredState = (0, import_react20.useMemo)(() => loadState(id), [id, loadState]);
+  const load = (0, import_react20.useCallback)(
     (key) => loadState(id, key),
     [id, loadState]
   );
-  const purge = (0, import_react21.useCallback)(
+  const purge = (0, import_react20.useCallback)(
     (key) => {
       purgeState(id, key);
       layoutDispatch({ type: "save" });
     },
     [id, layoutDispatch, purgeState]
   );
-  const save = (0, import_react21.useCallback)(
+  const save = (0, import_react20.useCallback)(
     (state, key) => {
       saveState(id, key, state);
       layoutDispatch({ type: "save" });
     },
     [id, layoutDispatch, saveState]
   );
-  const loadSession = (0, import_react21.useCallback)(
+  const loadSession = (0, import_react20.useCallback)(
     (key) => loadSessionState(id, key),
     [id, loadSessionState]
   );
-  const saveSession = (0, import_react21.useCallback)(
+  const saveSession = (0, import_react20.useCallback)(
     (state, key) => saveSessionState(id, key, state),
     [id, saveSessionState]
   );
-  const onConfigChange = (0, import_react21.useCallback)(
+  const onConfigChange = (0, import_react20.useCallback)(
     ({ type: key, ...config }) => {
       const { [key]: data } = config;
       save(data, key);
@@ -4204,10 +4170,10 @@ var useView = ({
 };
 
 // src/responsive/use-breakpoints.ts
-var import_react23 = require("react");
+var import_react22 = require("react");
 
 // src/responsive/useResizeObserver.ts
-var import_react22 = require("react");
+var import_react21 = require("react");
 var WidthHeight = ["height", "width"];
 var HeightOnly = ["height"];
 var WidthOnly = ["width"];
@@ -4253,8 +4219,8 @@ var resizeObserver = new ResizeObserver(
   }
 );
 function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
-  const dimensionsRef = (0, import_react22.useRef)(dimensions);
-  const measure = (0, import_react22.useCallback)((target) => {
+  const dimensionsRef = (0, import_react21.useRef)(dimensions);
+  const measure = (0, import_react21.useCallback)((target) => {
     const rect2 = target.getBoundingClientRect();
     return dimensionsRef.current.reduce(
       (map, dim) => {
@@ -4264,7 +4230,7 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
       {}
     );
   }, []);
-  (0, import_react22.useLayoutEffect)(() => {
+  (0, import_react21.useLayoutEffect)(() => {
     const target = ref.current;
     let cleanedUp = false;
     async function registerObserver() {
@@ -4302,7 +4268,7 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
       }
     };
   }, [ref, measure, reportInitialSize, onResize]);
-  (0, import_react22.useLayoutEffect)(() => {
+  (0, import_react21.useLayoutEffect)(() => {
     const target = ref.current;
     const record = observedMap.get(target);
     if (record) {
@@ -4349,17 +4315,17 @@ var getBreakPoints = (themeName) => {
 };
 
 // src/responsive/use-breakpoints.ts
-var EMPTY_ARRAY2 = [];
+var EMPTY_ARRAY = [];
 var useBreakpoints = ({ breakPoints: breakPointsProp, smallerThan }, ref) => {
-  const [breakpointMatch, setBreakpointmatch] = (0, import_react23.useState)(
+  const [breakpointMatch, setBreakpointmatch] = (0, import_react22.useState)(
     smallerThan ? false : "lg"
   );
-  const bodyRef = (0, import_react23.useRef)(document.body);
-  const breakPointsRef = (0, import_react23.useRef)(
+  const bodyRef = (0, import_react22.useRef)(document.body);
+  const breakPointsRef = (0, import_react22.useRef)(
     breakPointsProp ? breakpointRamp(breakPointsProp) : getBreakPoints()
   );
-  const sizeRef = (0, import_react23.useRef)("lg");
-  const stopFromMinWidth = (0, import_react23.useCallback)(
+  const sizeRef = (0, import_react22.useRef)("lg");
+  const stopFromMinWidth = (0, import_react22.useCallback)(
     (w) => {
       if (breakPointsRef.current) {
         for (const [name, size] of breakPointsRef.current) {
@@ -4371,7 +4337,7 @@ var useBreakpoints = ({ breakPoints: breakPointsProp, smallerThan }, ref) => {
     },
     [breakPointsRef]
   );
-  const matchSizeAgainstBreakpoints = (0, import_react23.useCallback)(
+  const matchSizeAgainstBreakpoints = (0, import_react22.useCallback)(
     (width) => {
       if (smallerThan) {
         const breakPointRamp = breakPointsRef.current.find(
@@ -4390,7 +4356,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) {
@@ -4400,7 +4366,7 @@ var useBreakpoints = ({ breakPoints: breakPointsProp, smallerThan }, ref) => {
     },
     true
   );
-  (0, import_react23.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const target = ref || bodyRef;
     if (target.current) {
       const prevSize = sizeRef.current;
@@ -4454,7 +4420,7 @@ var extractResponsiveProps = (props) => {
 };
 
 // src/layout-view/useViewResize.ts
-var import_react24 = require("react");
+var import_react23 = require("react");
 var NO_MEASUREMENT = [];
 var useViewResize = ({
   mainRef,
@@ -4462,16 +4428,16 @@ var useViewResize = ({
   rootRef
 }) => {
   const deferResize = resize === "defer";
-  const mainSize = (0, import_react24.useRef)({});
-  const resizeHandle = (0, import_react24.useRef)();
-  const setMainSize = (0, import_react24.useCallback)(() => {
+  const mainSize = (0, import_react23.useRef)({});
+  const resizeHandle = (0, import_react23.useRef)();
+  const setMainSize = (0, import_react23.useCallback)(() => {
     if (mainRef.current) {
       mainRef.current.style.height = mainSize.current.height + "px";
       mainRef.current.style.width = mainSize.current.width + "px";
     }
     resizeHandle.current = void 0;
   }, [mainRef]);
-  const onResize = (0, import_react24.useCallback)(
+  const onResize = (0, import_react23.useCallback)(
     ({ height, width }) => {
       mainSize.current.height = height;
       mainSize.current.width = width;
@@ -4491,15 +4457,15 @@ var useViewResize = ({
 };
 
 // src/layout-view/ViewContext.ts
-var import_react25 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var NO_CONTEXT = { dispatch: null };
-var ViewContext = import_react25.default.createContext(NO_CONTEXT);
+var ViewContext = import_react24.default.createContext(NO_CONTEXT);
 var useViewDispatch = () => {
   var _a;
-  const context = (0, import_react25.useContext)(ViewContext);
+  const context = (0, import_react24.useContext)(ViewContext);
   return (_a = context == null ? void 0 : context.dispatch) != null ? _a : null;
 };
-var useViewContext = () => (0, import_react25.useContext)(ViewContext);
+var useViewContext = () => (0, import_react24.useContext)(ViewContext);
 
 // src/layout-view/View.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -4513,7 +4479,7 @@ var getProps2 = (state, props) => {
   } else
     return state || props;
 };
-var View = (0, import_react26.forwardRef)(function View2(props, forwardedRef) {
+var View = (0, import_react25.forwardRef)(function View2(props, forwardedRef) {
   const {
     Header: Header2 = Header,
     children,
@@ -4537,9 +4503,9 @@ var View = (0, import_react26.forwardRef)(function View2(props, forwardedRef) {
     ...restProps
   } = props;
   const id = (0, import_vuu_utils7.useId)(idProp);
-  const rootRef = (0, import_react26.useRef)(null);
-  const mainRef = (0, import_react26.useRef)(null);
-  const [componentProps, _setComponentProps] = (0, import_react26.useState)();
+  const rootRef = (0, import_react25.useRef)(null);
+  const mainRef = (0, import_react25.useRef)(null);
+  const [componentProps, _setComponentProps] = (0, import_react25.useState)();
   const {
     contributions,
     dispatchViewAction,
@@ -4560,19 +4526,19 @@ var View = (0, import_react26.forwardRef)(function View2(props, forwardedRef) {
     title: titleProp
   });
   useViewResize({ mainRef, resize, rootRef });
-  const setComponentProps = (0, import_react26.useCallback)((props2) => {
+  const setComponentProps = (0, import_react25.useCallback)((props2) => {
     _setComponentProps(props2);
   }, []);
   const getContent = () => {
-    if (import_react26.default.isValidElement(children) && (restoredState || componentProps)) {
-      return import_react26.default.cloneElement(
+    if (import_react25.default.isValidElement(children) && (restoredState || componentProps)) {
+      return import_react25.default.cloneElement(
         children,
         getProps2(restoredState, componentProps)
       );
     }
     return children;
   };
-  const viewContextValue = (0, import_react26.useMemo)(
+  const viewContextValue = (0, import_react25.useMemo)(
     () => ({
       dispatch: dispatchViewAction,
       id,
@@ -4636,7 +4602,7 @@ var View = (0, import_react26.forwardRef)(function View2(props, forwardedRef) {
   );
 });
 View.displayName = "View";
-var MemoView = import_react26.default.memo(View);
+var MemoView = import_react25.default.memo(View);
 MemoView.displayName = "View";
 registerComponent("View", MemoView, "view");
 
@@ -4645,8 +4611,8 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 var classBase5 = "vuuLayoutStartPanel";
 var LayoutStartPanel = (htmlAttributes) => {
   const { dispatch, path } = useViewContext();
-  const [displayState, setDisplayState] = (0, import_react27.useState)();
-  (0, import_react27.useMemo)(() => {
+  const [displayState, setDisplayState] = (0, import_react26.useState)();
+  (0, import_react26.useMemo)(() => {
     dispatch == null ? void 0 : dispatch({
       type: "query",
       path,
@@ -4698,10 +4664,10 @@ registerComponent("Placeholder", Placeholder);
 
 // src/flexbox/Splitter.tsx
 var import_clsx8 = __toESM(require("clsx"));
-var import_react28 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var classBase7 = "vuuSplitter";
-var Splitter = import_react28.default.memo(function Splitter2({
+var Splitter = import_react27.default.memo(function Splitter2({
   column,
   index,
   onDrag,
@@ -4709,11 +4675,11 @@ var Splitter = import_react28.default.memo(function Splitter2({
   onDragStart,
   style
 }) {
-  const ignoreClick = (0, import_react28.useRef)();
-  const rootRef = (0, import_react28.useRef)(null);
-  const lastPos = (0, import_react28.useRef)(0);
-  const [active, setActive] = (0, import_react28.useState)(false);
-  const handleKeyDownDrag = (0, import_react28.useCallback)(
+  const ignoreClick = (0, import_react27.useRef)();
+  const rootRef = (0, import_react27.useRef)(null);
+  const lastPos = (0, import_react27.useRef)(0);
+  const [active, setActive] = (0, import_react27.useState)(false);
+  const handleKeyDownDrag = (0, import_react27.useCallback)(
     ({ key, shiftKey }) => {
       const distance = shiftKey ? 10 : 1;
       if (column && key === "ArrowDown") {
@@ -4728,7 +4694,7 @@ var Splitter = import_react28.default.memo(function Splitter2({
     },
     [column, index, onDrag]
   );
-  const handleKeyDownInitDrag = (0, import_react28.useCallback)(
+  const handleKeyDownInitDrag = (0, import_react27.useCallback)(
     (evt) => {
       const { key } = evt;
       const horizontalMove = key === "ArrowLeft" || key === "ArrowRight";
@@ -4741,9 +4707,9 @@ var Splitter = import_react28.default.memo(function Splitter2({
     },
     [column, handleKeyDownDrag, index, onDragStart]
   );
-  const keyDownHandlerRef = (0, import_react28.useRef)(handleKeyDownInitDrag);
+  const keyDownHandlerRef = (0, import_react27.useRef)(handleKeyDownInitDrag);
   const handleKeyDown = (evt) => keyDownHandlerRef.current(evt);
-  const handleMouseMove = (0, import_react28.useCallback)(
+  const handleMouseMove = (0, import_react27.useCallback)(
     (e) => {
       ignoreClick.current = true;
       const pos = e[column ? "clientY" : "clientX"];
@@ -4755,7 +4721,7 @@ var Splitter = import_react28.default.memo(function Splitter2({
     },
     [column, index, onDrag]
   );
-  const handleMouseUp = (0, import_react28.useCallback)(() => {
+  const handleMouseUp = (0, import_react27.useCallback)(() => {
     var _a;
     window.removeEventListener("mousemove", handleMouseMove, false);
     window.removeEventListener("mouseup", handleMouseUp, false);
@@ -4763,7 +4729,7 @@ var Splitter = import_react28.default.memo(function Splitter2({
     setActive(false);
     (_a = rootRef.current) == null ? void 0 : _a.focus();
   }, [handleMouseMove, onDragEnd2, setActive]);
-  const handleMouseDown = (0, import_react28.useCallback)(
+  const handleMouseDown = (0, import_react27.useCallback)(
     (e) => {
       lastPos.current = column ? e.clientY : e.clientX;
       onDragStart(index);
@@ -4913,22 +4879,22 @@ var useSplitterResizing = ({
   onSplitterMoved,
   style
 }) => {
-  const rootRef = (0, import_react29.useRef)(null);
-  const metaRef = (0, import_react29.useRef)();
-  const contentRef = (0, import_react29.useRef)();
-  const assignedKeys = (0, import_react29.useRef)([]);
-  const [, forceUpdate] = (0, import_react29.useState)({});
+  const rootRef = (0, import_react28.useRef)(null);
+  const metaRef = (0, import_react28.useRef)();
+  const contentRef = (0, import_react28.useRef)();
+  const assignedKeys = (0, import_react28.useRef)([]);
+  const [, forceUpdate] = (0, import_react28.useState)({});
   const setContent = (content) => {
     contentRef.current = content;
     forceUpdate({});
   };
   const isColumn = (style == null ? void 0 : style.flexDirection) === "column";
   const dimension3 = isColumn ? "height" : "width";
-  const children = (0, import_react29.useMemo)(
-    () => Array.isArray(childrenProp) ? childrenProp : import_react29.default.isValidElement(childrenProp) ? [childrenProp] : [],
+  const children = (0, import_react28.useMemo)(
+    () => Array.isArray(childrenProp) ? childrenProp : import_react28.default.isValidElement(childrenProp) ? [childrenProp] : [],
     [childrenProp]
   );
-  const handleDragStart = (0, import_react29.useCallback)(
+  const handleDragStart = (0, import_react28.useCallback)(
     (index) => {
       const { current: contentMeta } = metaRef;
       if (contentMeta) {
@@ -4961,7 +4927,7 @@ var useSplitterResizing = ({
     },
     [dimension3]
   );
-  const handleDrag = (0, import_react29.useCallback)(
+  const handleDrag = (0, import_react28.useCallback)(
     (idx, distance) => {
       if (contentRef.current && metaRef.current) {
         setContent(
@@ -4976,7 +4942,7 @@ var useSplitterResizing = ({
     },
     [dimension3]
   );
-  const handleDragEnd = (0, import_react29.useCallback)(() => {
+  const handleDragEnd = (0, import_react28.useCallback)(() => {
     const contentMeta = metaRef.current;
     if (contentMeta) {
       onSplitterMoved == null ? void 0 : onSplitterMoved(contentMeta.filter(originalContentOnly));
@@ -4987,9 +4953,9 @@ var useSplitterResizing = ({
       meta.flexOpen = false;
     });
   }, [onSplitterMoved]);
-  const createSplitter = (0, import_react29.useCallback)(
+  const createSplitter = (0, import_react28.useCallback)(
     (i) => {
-      return import_react29.default.createElement(Splitter, {
+      return import_react28.default.createElement(Splitter, {
         column: isColumn,
         index: i,
         key: `splitter-${i}`,
@@ -5000,7 +4966,7 @@ var useSplitterResizing = ({
     },
     [handleDrag, handleDragEnd, handleDragStart, isColumn]
   );
-  (0, import_react29.useMemo)(() => {
+  (0, import_react28.useMemo)(() => {
     const [content, meta] = buildContent(
       children,
       dimension3,
@@ -5028,7 +4994,7 @@ function buildContent(children, dimension3, createSplitter, keys) {
     }
     if (child.key == null) {
       const key = keys[i] || (keys[i] = (0, import_vuu_utils8.getUniqueId)());
-      content.push(import_react29.default.cloneElement(child, { key }));
+      content.push(import_react28.default.cloneElement(child, { key }));
     } else {
       content.push(child);
     }
@@ -5056,7 +5022,7 @@ function resizeContent(content, contentMeta, distance, dimension3) {
       const { flexBasis: actualFlexBasis } = child.props.style || {};
       const size = hasCurrentSize ? meta.currentSize : flexBasis;
       if (size !== actualFlexBasis) {
-        return import_react29.default.cloneElement(child, {
+        return import_react28.default.cloneElement(child, {
           style: {
             ...child.props.style,
             flexBasis: size,
@@ -5095,7 +5061,7 @@ function updateMeta(contentMeta, distance) {
   return true;
 }
 function createPlaceholder(index) {
-  return import_react29.default.createElement(Placeholder, {
+  return import_react28.default.createElement(Placeholder, {
     shim: index === 0,
     key: `placeholder-${index}`
   });
@@ -5111,7 +5077,7 @@ function measureElement(el, dimension3) {
 // src/flexbox/Flexbox.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var classBase8 = "hwFlexbox";
-var Flexbox = (0, import_react30.forwardRef)(function Flexbox2(props, ref) {
+var Flexbox = (0, import_react29.forwardRef)(function Flexbox2(props, ref) {
   const {
     breakPoints: breakPoints2,
     children,
@@ -5163,12 +5129,12 @@ Flexbox.displayName = "Flexbox";
 var Flexbox_default = Flexbox;
 
 // src/flexbox/FlexboxLayout.tsx
-var import_react31 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var FlexboxLayout = function FlexboxLayout2(props) {
   const { path } = props;
   const dispatch = useLayoutProviderDispatch();
-  const handleSplitterMoved = (0, import_react31.useCallback)(
+  const handleSplitterMoved = (0, import_react30.useCallback)(
     (sizes) => {
       dispatch({
         type: Action.SPLITTER_RESIZE,
@@ -5184,13 +5150,14 @@ FlexboxLayout.displayName = "Flexbox";
 registerComponent("Flexbox", FlexboxLayout, "container");
 
 // src/flexbox/FluidGrid.tsx
+var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
 var import_core6 = require("@salt-ds/core");
 var import_clsx10 = __toESM(require("clsx"));
-var import_react33 = require("react");
+var import_react32 = require("react");
 
 // src/flexbox/useResponsiveSizing.ts
 var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
-var import_react32 = require("react");
+var import_react31 = require("react");
 var breakPoints = ["xs", "sm", "md", "lg", "xl"];
 var DEFAULT_COLS = 12;
 var useResponsiveSizing = ({
@@ -5198,17 +5165,17 @@ var useResponsiveSizing = ({
   cols: colsProp,
   style
 }) => {
-  const rootRef = (0, import_react32.useRef)(null);
-  const metaRef = (0, import_react32.useRef)(null);
-  const contentRef = (0, import_react32.useRef)();
+  const rootRef = (0, import_react31.useRef)(null);
+  const metaRef = (0, import_react31.useRef)(null);
+  const contentRef = (0, import_react31.useRef)();
   const cols = colsProp != null ? colsProp : DEFAULT_COLS;
   const isColumn = (style == null ? void 0 : style.flexDirection) === "column";
   const dimension3 = isColumn ? "height" : "width";
-  const children = (0, import_react32.useMemo)(
-    () => Array.isArray(childrenProp) ? childrenProp : (0, import_react32.isValidElement)(childrenProp) ? [childrenProp] : [],
+  const children = (0, import_react31.useMemo)(
+    () => Array.isArray(childrenProp) ? childrenProp : (0, import_react31.isValidElement)(childrenProp) ? [childrenProp] : [],
     [childrenProp]
   );
-  const buildContent2 = (0, import_react32.useCallback)(
+  const buildContent2 = (0, import_react31.useCallback)(
     (children2, dimension4) => {
       const childMeta = gatherChildMeta(children2, dimension4, breakPoints);
       const content = [];
@@ -5219,7 +5186,7 @@ var useResponsiveSizing = ({
           style: { flex, ...rest }
         } = child.props;
         content.push(
-          (0, import_react32.cloneElement)(child, {
+          (0, import_react31.cloneElement)(child, {
             key: (0, import_vuu_utils9.getUniqueId)(),
             style: {
               ...rest,
@@ -5233,7 +5200,7 @@ var useResponsiveSizing = ({
     },
     [cols]
   );
-  (0, import_react32.useMemo)(() => {
+  (0, import_react31.useMemo)(() => {
     const [content, meta] = buildContent2(children, dimension3);
     metaRef.current = meta;
     contentRef.current = content;
@@ -5248,7 +5215,7 @@ var useResponsiveSizing = ({
 // src/flexbox/FluidGrid.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var classBase9 = "hwFluidGrid";
-var FluidGrid = (0, import_react33.forwardRef)(function FluidGrid2(props, ref) {
+var FluidGrid = (0, import_react32.forwardRef)(function FluidGrid2(props, ref) {
   const {
     breakPoints: breakPoints2,
     children: childrenProp,
@@ -5268,8 +5235,8 @@ var FluidGrid = (0, import_react33.forwardRef)(function FluidGrid2(props, ref) {
     style: styleProp,
     ...rest
   } = props;
-  const children = (0, import_react33.useMemo)(() => {
-    return asReactElements(childrenProp);
+  const children = (0, import_react32.useMemo)(() => {
+    return (0, import_vuu_utils10.asReactElements)(childrenProp);
   }, [childrenProp]);
   const { cols, content, rootRef } = useResponsiveSizing({
     children,
@@ -5320,960 +5287,128 @@ var FluidGridLayout = function FluidGridLayout2(props) {
 FluidGridLayout.displayName = "FluidGrid";
 registerComponent("FluidGrid", FluidGridLayout, "container");
 
-// src/measured-container/MeasuredContainer.tsx
-var import_react36 = require("react");
-
-// src/measured-container/useMeasuredContainer.ts
-var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
-var import_react35 = require("react");
-
-// src/measured-container/useResizeObserver.ts
-var import_react34 = require("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;
-  }
+// src/palette/Palette.tsx
+var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
+var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
+var import_clsx11 = __toESM(require("clsx"));
+var import_react33 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var clonePaletteItem = (paletteItem) => {
+  const dolly = paletteItem.cloneNode(true);
+  dolly.id = "";
+  delete dolly.dataset.idx;
+  return dolly;
 };
-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);
+var PaletteItem = (0, import_react33.memo)(
+  ({
+    className,
+    children: component,
+    idx,
+    resizeable,
+    header,
+    closeable,
+    ...props
+  }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_vuu_ui_controls2.ListItem,
+      {
+        className: (0, import_clsx11.default)("vuuPaletteItem", className),
+        "data-draggable": true,
+        "data-icon": "draggable",
+        ...props
       }
-    }
-  }
-});
-function useResizeObserver2(ref, dimensions, onResize, reportInitialSize = false) {
-  const dimensionsRef = (0, import_react34.useRef)(dimensions);
-  const measure = (0, import_react34.useCallback)((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;
-      },
-      {}
     );
-  }, []);
-  (0, import_react34.useEffect)(() => {
-    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]);
-  (0, import_react34.useEffect)(() => {
-    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 ((0, import_vuu_utils10.isValidNumber)(height) && (0, import_vuu_utils10.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 ((0, import_vuu_utils10.isValidNumber)(height) && (0, import_vuu_utils10.isValidNumber)(width)) {
-    return {
-      height,
-      width
-    };
   }
-};
-var useMeasuredContainer = ({
-  defaultHeight = 0,
-  defaultWidth = 0,
-  height,
-  onResize: onResizeProp,
-  width
+);
+PaletteItem.displayName = "PaletteItem";
+var Palette = ({
+  ListProps: ListProps2,
+  ViewProps: ViewProps3,
+  children,
+  className,
+  itemHeight = 41,
+  orientation = "horizontal",
+  ...props
 }) => {
-  const containerRef = (0, import_react35.useRef)(null);
-  const [size, setSize] = (0, import_react35.useState)({
-    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;
-  (0, import_react35.useMemo)(() => {
-    setSize((currentSize) => {
-      const { inner, outer } = currentSize;
-      if ((0, import_vuu_utils10.isValidNumber)(height) && (0, import_vuu_utils10.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_utils10.isValidNumber)(outerHeight) ? outerHeight - innerHeight : 0;
-          const widthDiff = (0, import_vuu_utils10.isValidNumber)(outerWidth) ? outerWidth - innerWidth : 0;
-          return {
-            ...currentSize,
-            outer: { height, width },
-            inner: { height: height - heightDiff, width: width - widthDiff }
-          };
-        }
+  const dispatch = useLayoutProviderDispatch();
+  const classBase11 = "vuuPalette";
+  function handleMouseDown(evt) {
+    var _a, _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 {
+      props: { caption, children: payload, template, ...props2 }
+    } = children[idx];
+    const { ViewProps: componentViewProps } = payload.props;
+    const { height, left, top, width } = listItemElement.getBoundingClientRect();
+    const id = (0, import_vuu_utils11.uuid)();
+    const identifiers = { id, key: id };
+    const component = template ? payload : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      MemoView,
+      {
+        ...ViewProps3,
+        ...identifiers,
+        ...props2,
+        ...componentViewProps,
+        title: props2.label,
+        children: payload
       }
-      return currentSize;
+    );
+    dispatch({
+      dragRect: {
+        left,
+        top,
+        right: left + width,
+        bottom: top + 150,
+        width,
+        height
+      },
+      dragElement: clonePaletteItem(listItemElement),
+      evt: evt.nativeEvent,
+      instructions: {
+        DoNotRemove: true,
+        DoNotTransform: true,
+        DriftHomeIfNoDropTarget: true,
+        RemoveDraggableOnDragEnd: true,
+        dragThreshold: 10
+      },
+      path: "*",
+      payload: component,
+      type: "drag-start"
     });
-  }, [height, width]);
-  const onResize = (0, import_react35.useCallback)(
-    ({ 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]
-  );
-  (0, import_react35.useEffect)(() => {
-    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
-var import_core7 = require("@salt-ds/core");
-var import_clsx11 = __toESM(require("clsx"));
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var baseClass = "vuuMeasuredContainer";
-var MeasuredContainer = (0, import_react36.forwardRef)(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 = (0, import_core7.useForkRef)(containerRef, forwardedRef);
-  return unmeasured ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    "div",
-    {
-      ...htmlAttributes,
-      className: (0, import_clsx11.default)(baseClass, `${baseClass}-ummeasured`),
-      style: getStyle3(),
-      ref: containerRef
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-    "div",
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_vuu_ui_controls2.List,
     {
-      ...htmlAttributes,
-      className: (0, import_clsx11.default)(baseClass, className),
-      ref: forkedRef,
-      style: getStyle3(),
-      children
+      ...ListProps2,
+      ...props,
+      className: (0, import_clsx11.default)(classBase11, className, `${classBase11}-${orientation}`),
+      itemHeight,
+      selected: null,
+      children: children.map(
+        (child, idx) => child.type === PaletteItem ? (0, import_react33.cloneElement)(child, {
+          key: idx,
+          onMouseDown: handleMouseDown
+        }) : child
+      )
     }
   );
-});
-
-// src/overflow-container/OverflowContainer.tsx
-var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
-var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
-var import_clsx12 = __toESM(require("clsx"));
-var import_react38 = __toESM(require("react"));
+};
+registerComponent("Palette", Palette, "view");
 
-// src/overflow-container/useOverflowContainer.ts
-var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
+// src/stack/Stack.tsx
+var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
-var import_react37 = require("react");
-
-// src/overflow-container/overflow-utils.ts
-var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
-var NON_WRAPPED_ITEM = ".vuuOverflowContainer-item:not(.wrapped)";
-var isOverflowElement = (element) => element !== null && element.dataset.index === "overflow" && element.parentElement !== null && element.parentElement.classList.contains(
-  "vuuOverflowContainer-wrapContainer-overflowed"
-);
-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 = (0, import_vuu_utils11.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 = (0, import_vuu_utils11.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] = (0, import_react37.useState)(null);
-  const wrappedItemsRef = (0, import_react37.useRef)(NO_WRAPPED_ITEMS);
-  const containerRef = (0, import_react37.useRef)(null);
-  const setOverflowTabIndex = (0, import_react37.useCallback)((tabIndex) => {
-    var _a;
-    if (containerRef.current) {
-      (_a = containerRef.current.querySelector(".vuuOverflowContainer-OverflowIndicator button")) == null ? void 0 : _a.setAttribute("tabindex", tabIndex);
-    }
-  }, []);
-  const handleResize = (0, import_react37.useCallback)(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] = (0, import_react37.useMemo)(() => {
-    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 = (0, import_react37.useMemo)(() => {
-    const { sizeProp } = import_vuu_utils12.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_utils12.isValidNumber)(size) && currentSize !== size) {
-          currentSize = size;
-          handleResize();
-        }
-      }
-    });
-  }, [handleResize, orientation]);
-  (0, import_vuu_utils12.useLayoutEffectSkipFirst)(() => {
-    handleResize();
-  }, [handleResize, itemCount]);
-  (0, import_react37.useMemo)(() => {
-    if (container) {
-      resizeObserver3.observe(container);
-    }
-  }, [container, resizeObserver3]);
-  const callbackRef = (0, import_react37.useCallback)((el) => {
-    setContainer(containerRef.current = el);
-  }, []);
-  const handleDrop = (0, import_react37.useCallback)(
-    (fromIndex, toIndex) => {
-      onMoveItem == null ? void 0 : onMoveItem(fromIndex, toIndex);
-    },
-    [onMoveItem]
-  );
-  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } = (0, import_vuu_ui_controls2.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
+var import_clsx12 = __toESM(require("clsx"));
+var import_react34 = __toESM(require("react"));
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var classBase10 = "vuuOverflowContainer";
-var WrapContainer = import_react38.default.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 = (0, import_clsx12.default)(`${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__ */ (0, import_jsx_runtime18.jsx)(
-        "div",
-        {
-          className: (0, import_clsx12.default)(`${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__ */ (0, import_jsx_runtime18.jsx)(
-      "div",
-      {
-        className: `${classBase10}-OverflowIndicator`,
-        "data-index": "overflow",
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          import_vuu_popups2.PopupMenu,
-          {
-            ...PopupMenuProps2,
-            icon: overflowIcon,
-            menuBuilder,
-            menuActionHandler,
-            tabIndex: -1
-          }
-        )
-      },
-      "overflow"
-    );
-    content.push(overflowIndicator);
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className, ref: rootRef, style, children: [
-      content,
-      draggable
-    ] });
-  }
-);
-WrapContainer.displayName = "OverflowContainer.InnerContainer";
-var OverflowContainer = (0, import_react38.forwardRef)(function OverflowContainer2({
-  PopupMenuProps: PopupMenuProps2,
-  allowDragDrop = false,
-  children,
-  className,
-  height = 44,
-  id: idProp,
-  onMoveItem,
-  onSwitchWrappedItemIntoView,
-  orientation,
-  overflowIcon,
-  overflowPosition,
-  ...htmlAttributes
-}, forwardedRef) {
-  const id = (0, import_vuu_utils13.useId)(idProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    "div",
-    {
-      ...htmlAttributes,
-      className: (0, import_clsx12.default)((0, import_clsx12.default)(className, classBase10)),
-      id,
-      ref: forwardedRef,
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        WrapContainer,
-        {
-          PopupMenuProps: PopupMenuProps2,
-          allowDragDrop,
-          height,
-          id,
-          orientation,
-          overflowIcon,
-          overflowPosition,
-          onMoveItem,
-          onSwitchWrappedItemIntoView,
-          children
-        }
-      )
-    }
-  );
-});
-
-// src/palette/Palette.tsx
-var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
-var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
-var import_clsx13 = __toESM(require("clsx"));
-var import_react39 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var clonePaletteItem = (paletteItem) => {
-  const dolly = paletteItem.cloneNode(true);
-  dolly.id = "";
-  delete dolly.dataset.idx;
-  return dolly;
-};
-var PaletteItem = (0, import_react39.memo)(
-  ({
-    className,
-    children: component,
-    idx,
-    resizeable,
-    header,
-    closeable,
-    ...props
-  }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_vuu_ui_controls3.ListItem,
-      {
-        className: (0, import_clsx13.default)("vuuPaletteItem", className),
-        "data-draggable": true,
-        "data-icon": "draggable",
-        ...props
-      }
-    );
-  }
-);
-PaletteItem.displayName = "PaletteItem";
-var Palette = ({
-  ListProps: ListProps2,
-  ViewProps: ViewProps3,
-  children,
-  className,
-  itemHeight = 41,
-  orientation = "horizontal",
-  ...props
-}) => {
-  const dispatch = useLayoutProviderDispatch();
-  const classBase13 = "vuuPalette";
-  function handleMouseDown(evt) {
-    var _a, _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 {
-      props: { caption, children: payload, template, ...props2 }
-    } = children[idx];
-    const { ViewProps: componentViewProps } = payload.props;
-    const { height, left, top, width } = listItemElement.getBoundingClientRect();
-    const id = (0, import_vuu_utils14.uuid)();
-    const identifiers = { id, key: id };
-    const component = template ? payload : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      MemoView,
-      {
-        ...ViewProps3,
-        ...identifiers,
-        ...props2,
-        ...componentViewProps,
-        title: props2.label,
-        children: payload
-      }
-    );
-    dispatch({
-      dragRect: {
-        left,
-        top,
-        right: left + width,
-        bottom: top + 150,
-        width,
-        height
-      },
-      dragElement: clonePaletteItem(listItemElement),
-      evt: evt.nativeEvent,
-      instructions: {
-        DoNotRemove: true,
-        DoNotTransform: true,
-        DriftHomeIfNoDropTarget: true,
-        RemoveDraggableOnDragEnd: true,
-        dragThreshold: 10
-      },
-      path: "*",
-      payload: component,
-      type: "drag-start"
-    });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_vuu_ui_controls3.List,
-    {
-      ...ListProps2,
-      ...props,
-      className: (0, import_clsx13.default)(classBase13, className, `${classBase13}-${orientation}`),
-      itemHeight,
-      selected: null,
-      children: children.map(
-        (child, idx) => child.type === PaletteItem ? (0, import_react39.cloneElement)(child, {
-          key: idx,
-          onMouseDown: handleMouseDown
-        }) : child
-      )
-    }
-  );
-};
-registerComponent("Palette", Palette, "view");
-
-// src/stack/Stack.tsx
-var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
-var import_clsx14 = __toESM(require("clsx"));
-var import_react40 = __toESM(require("react"));
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var classBase11 = "vuuTabs";
+var classBase10 = "vuuTabs";
 var getDefaultTabIcon = () => void 0;
 var getChildElements = (children) => {
   const elements = [];
-  import_react40.default.Children.forEach(children, (child) => {
-    if (import_react40.default.isValidElement(child)) {
+  import_react34.default.Children.forEach(children, (child) => {
+    if (import_react34.default.isValidElement(child)) {
       elements.push(child);
     } else {
       console.warn(`Stack has unexpected child element type`);
@@ -6286,7 +5421,7 @@ var DefaultTabstripProps = {
   allowCloseTab: false,
   allowRenameTab: false
 };
-var Stack = (0, import_react40.forwardRef)(function Stack2({
+var Stack = (0, import_react34.forwardRef)(function Stack2({
   TabstripProps: TabstripProps2 = DefaultTabstripProps,
   active = 0,
   children,
@@ -6305,14 +5440,14 @@ var Stack = (0, import_react40.forwardRef)(function Stack2({
   style
 }, ref) {
   var _a;
-  const id = (0, import_vuu_utils15.useId)(idProp);
-  const tabLabels = (0, import_react40.useRef)([]);
+  const id = (0, import_vuu_utils12.useId)(idProp);
+  const tabLabels = (0, import_react34.useRef)([]);
   const {
     allowCloseTab,
     allowRenameTab,
     className: tabstripClassName
   } = TabstripProps2;
-  const handleExitEditMode = (0, import_react40.useCallback)(
+  const handleExitEditMode = (0, import_react34.useCallback)(
     (_oldText, newText, _allowDeactivation, tabIndex) => {
       onTabEdit == null ? void 0 : onTabEdit(tabIndex, newText);
     },
@@ -6320,7 +5455,7 @@ var Stack = (0, import_react40.forwardRef)(function Stack2({
   );
   const activeChild = () => {
     var _a2;
-    if (import_react40.default.isValidElement(children)) {
+    if (import_react34.default.isValidElement(children)) {
       return children;
     }
     if (Array.isArray(children)) {
@@ -6336,8 +5471,8 @@ var Stack = (0, import_react40.forwardRef)(function Stack2({
     } = child2.props;
     const label = getTabLabel(child2, idx, tabLabels.current);
     tabLabels.current.push(label);
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_vuu_ui_controls4.Tab,
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      import_vuu_ui_controls3.Tab,
       {
         ariaControls: childId,
         "data-icon": getTabIcon(child2, idx),
@@ -6354,24 +5489,24 @@ var Stack = (0, import_react40.forwardRef)(function Stack2({
   const child = activeChild();
   const isHorizontal = showTabs === "left" || showTabs === "right";
   const tabstripOrientation = isHorizontal ? "vertical" : "horizontal";
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
-      className: (0, import_clsx14.default)(classBase11, classNameProp, {
-        [`${classBase11}-horizontal`]: isHorizontal
+      className: (0, import_clsx12.default)(classBase10, classNameProp, {
+        [`${classBase10}-horizontal`]: isHorizontal
       }),
       style,
       id,
       ref,
       children: [
-        showTabs ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_vuu_ui_controls4.Tabstrip,
+        showTabs ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_vuu_ui_controls3.Tabstrip,
           {
             ...TabstripProps2,
             activeTabIndex: (_a = TabstripProps2 == null ? void 0 : TabstripProps2.activeTabIndex) != null ? _a : child === null ? -1 : active,
             allowDragDrop: TabstripProps2.allowDragDrop !== false,
             animateSelectionThumb: true,
-            className: (0, import_clsx14.default)("vuuTabHeader", tabstripClassName),
+            className: (0, import_clsx12.default)("vuuTabHeader", tabstripClassName),
             "aria-label": "data tabs",
             keyBoardActivation,
             onActiveChange: onTabSelectionChanged,
@@ -6383,11 +5518,11 @@ var Stack = (0, import_react40.forwardRef)(function Stack2({
             children: renderTabs()
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "div",
           {
             "aria-labelledby": `${id}-${active}`,
-            className: `${classBase11}-tabPanel`,
+            className: `${classBase10}-tabPanel`,
             role: "tabpanel",
             children: child
           }
@@ -6399,10 +5534,10 @@ var Stack = (0, import_react40.forwardRef)(function Stack2({
 Stack.displayName = "Stack";
 
 // src/stack/StackLayout.tsx
-var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
-var import_react41 = __toESM(require("react"));
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var defaultCreateNewChild = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_react35 = __toESM(require("react"));
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var defaultCreateNewChild = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   Placeholder,
   {
     resizeable: true,
@@ -6411,7 +5546,7 @@ var defaultCreateNewChild = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
 );
 var StackLayout = (props) => {
   var _a;
-  const ref = (0, import_react41.useRef)(null);
+  const ref = (0, import_react35.useRef)(null);
   const dispatch = useLayoutProviderDispatch();
   const { loadState } = usePersistentState();
   const {
@@ -6422,7 +5557,7 @@ var StackLayout = (props) => {
     ...restProps
   } = props;
   const { children } = props;
-  const id = (0, import_vuu_utils16.useId)(idProp);
+  const id = (0, import_vuu_utils13.useId)(idProp);
   const [dispatchViewAction] = useViewActionDispatcher(id, ref, path);
   const createNewChildFromContext = useLayoutCreateNewChild();
   const createNewChild = (_a = createNewChildProp != null ? createNewChildProp : createNewChildFromContext) != null ? _a : defaultCreateNewChild;
@@ -6432,7 +5567,7 @@ var StackLayout = (props) => {
       onTabSelectionChanged == null ? void 0 : onTabSelectionChanged(nextIdx);
     }
   };
-  const handleTabClose = (0, import_react41.useCallback)(
+  const handleTabClose = (0, import_react35.useCallback)(
     (tabIndex) => {
       if (Array.isArray(children)) {
         const {
@@ -6443,9 +5578,9 @@ var StackLayout = (props) => {
     },
     [children, dispatch]
   );
-  const handleTabAdd = (0, import_react41.useCallback)(() => {
+  const handleTabAdd = (0, import_react35.useCallback)(() => {
     if (path) {
-      const tabIndex = import_react41.default.Children.count(children);
+      const tabIndex = import_react35.default.Children.count(children);
       const component = createNewChild(tabIndex);
       dispatch({
         type: "add",
@@ -6454,7 +5589,7 @@ var StackLayout = (props) => {
       });
     }
   }, [children, createNewChild, dispatch, path]);
-  const handleMoveTab = (0, import_react41.useCallback)(
+  const handleMoveTab = (0, import_react35.useCallback)(
     (fromIndex, toIndex) => {
       if (path) {
         dispatch({
@@ -6489,7 +5624,7 @@ var StackLayout = (props) => {
     return loadState(id2, "view-title") || title || // This will normally never be called as title is always assigned in layout model
     getDefaultTabLabel(component, idx, existingLabels);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     Stack,
     {
       ...restProps,
@@ -6508,617 +5643,33 @@ var StackLayout = (props) => {
 StackLayout.displayName = "Stack";
 registerComponent("Stack", StackLayout, "container");
 
-// src/toolbar/Toolbar.tsx
-var import_vuu_ui_controls6 = require("@vuu-ui/vuu-ui-controls");
-var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
-var import_clsx15 = __toESM(require("clsx"));
-var import_react45 = __toESM(require("react"));
-
-// src/toolbar/useToolbar.ts
-var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
-var import_react44 = require("react");
-
-// src/toolbar/useKeyboardNavigation.ts
-var import_core8 = require("@salt-ds/core");
-var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
-var import_react42 = require("react");
-var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
-
-// src/toolbar/toolbar-dom-utils.ts
-var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
-var getIndexOfItem = (container, query) => {
-  if (container) {
-    const targetTab = container.querySelector(
-      `[data-index]:has(${query})`
-    );
-    return (0, import_vuu_utils17.getElementDataIndex)(targetTab);
-  }
-  return -1;
-};
-var getIndexOfEditedItem = (container) => getIndexOfItem(container, ".vuuEditableLabel-editing");
-
-// src/toolbar/useKeyboardNavigation.ts
-var navigation = {
-  horizontal: {
-    [import_vuu_utils19.Home]: "start",
-    [import_vuu_utils19.End]: "end",
-    [import_vuu_utils19.ArrowLeft]: "bwd",
-    [import_vuu_utils19.ArrowRight]: "fwd"
-  },
-  vertical: {
-    [import_vuu_utils19.Home]: "start",
-    [import_vuu_utils19.End]: "end",
-    [import_vuu_utils19.ArrowUp]: "bwd",
-    [import_vuu_utils19.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 === import_vuu_utils19.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 = (0, import_react42.useRef)(false);
-  const focusedRef = (0, import_react42.useRef)(-1);
-  const [hasFocus, setHasFocus] = (0, import_react42.useState)(false);
-  const [highlightedIdx, _setHighlightedIdx] = (0, import_core8.useControlled)({
-    controlled: highlightedIdxProp,
-    default: defaultHighlightedIdx,
-    name: "UseKeyboardNavigation"
-  });
-  const setHighlightedIdx = (0, import_react42.useCallback)(
-    (value) => {
-      _setHighlightedIdx(focusedRef.current = value);
-    },
-    [_setHighlightedIdx]
-  );
-  const keyboardNavigation = (0, import_react42.useRef)(false);
-  const focusItem = (0, import_react42.useCallback)(
-    (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 = (0, import_vuu_utils18.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 = (0, import_vuu_utils18.getElementDataIndex)((0, import_vuu_utils18.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 = (0, import_react42.useCallback)(
-    () => {
-      var _a, _b;
-      return (_b = (_a = containerRef.current) == null ? void 0 : _a.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
-    },
-    [containerRef]
-  );
-  const nextFocusableItemIdx = (0, import_react42.useCallback)(
-    (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 = (0, import_react42.useCallback)(
-    (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 = (0, import_react42.useCallback)(() => {
-    const el = getElementByPosition(containerRef.current, highlightedIdx);
-    if (el) {
-      return el.querySelector(".vuuPopupMenu") != null;
-    }
-    return false;
-  }, [containerRef, highlightedIdx]);
-  const highlightedItemInEditState = (0, import_react42.useCallback)(() => {
-    const el = getElementByPosition(containerRef.current, highlightedIdx);
-    if (el) {
-      return el.querySelector(".vuuEditableLabel-input") != null;
-    }
-    return false;
-  }, [containerRef, highlightedIdx]);
-  const activateItemMenu = (0, import_react42.useCallback)(() => {
-    const el = getElementByPosition(containerRef.current, highlightedIdx);
-    const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
-    if (menuEl) {
-      (0, import_vuu_utils18.dispatchMouseEvent)(menuEl, "click");
-    }
-    return false;
-  }, [containerRef, highlightedIdx]);
-  const handleKeyDown = (0, import_react42.useCallback)(
-    (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 = (0, import_react42.useCallback)(() => {
-    if (!hasFocus) {
-      setHasFocus(true);
-      if (!mouseClickPending.current) {
-        keyboardNavigation.current = true;
-      } else {
-        mouseClickPending.current = false;
-      }
-    }
-  }, [hasFocus]);
-  const handleContainerMouseDown = (0, import_react42.useCallback)(() => {
-    if (!hasFocus) {
-      mouseClickPending.current = true;
-    }
-    keyboardNavigation.current = false;
-  }, [hasFocus]);
-  const handleOverflowMenuClose = (0, import_react42.useCallback)(
-    (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
-var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
-var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
-var import_react43 = require("react");
-var defaultSelectionKeys = ["Enter", " "];
-var NO_SELECTION_HANDLERS = {};
-var useSelection = ({
-  containerRef,
-  defaultSelected,
-  highlightedIdx,
-  itemQuery,
-  onSelectionChange,
-  selected: selectedProp,
-  selectionStrategy
-}) => {
-  const [selected, setSelected, isControlled] = (0, import_vuu_ui_controls5.useControlled)({
-    controlled: selectedProp,
-    default: defaultSelected != null ? defaultSelected : [],
-    name: "useSelection",
-    state: "selected"
-  });
-  const isSelectionEvent = (0, import_react43.useCallback)(
-    (evt) => defaultSelectionKeys.includes(evt.key),
-    []
-  );
-  const selectItem = (0, import_react43.useCallback)(
-    (itemIndex, specialKey = false) => {
-      const newSelected = (0, import_vuu_ui_controls5.allowMultipleSelection)(selectionStrategy, specialKey) ? selected.concat(itemIndex) : [itemIndex];
-      setSelected(newSelected);
-      onSelectionChange == null ? void 0 : onSelectionChange(newSelected);
-    },
-    [onSelectionChange, selected, selectionStrategy, setSelected]
-  );
-  const deselectItem = (0, import_react43.useCallback)(
-    (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 = (0, import_react43.useCallback)(
-    (e) => {
-      if (isSelectionEvent(e) && (0, import_vuu_utils20.isSelectableElement)(e.target)) {
-        if (!selected.includes(highlightedIdx)) {
-          e.stopPropagation();
-          e.preventDefault();
-          selectItem(highlightedIdx, e.shiftKey);
-        } else if ((0, import_vuu_ui_controls5.deselectionIsAllowed)(selectionStrategy)) {
-          e.stopPropagation();
-          e.preventDefault();
-          deselectItem(highlightedIdx, e.shiftKey);
-        }
-      }
-    },
-    [
-      isSelectionEvent,
-      selected,
-      highlightedIdx,
-      selectionStrategy,
-      selectItem,
-      deselectItem
-    ]
-  );
-  const handleClick = (0, import_react43.useCallback)(
-    (e, itemIndex) => {
-      const element = (0, import_vuu_utils20.getClosestIndexItem)(e.target);
-      if ((0, import_vuu_utils20.isSelectableElement)(element)) {
-        if (!selected.includes(itemIndex)) {
-          selectItem(itemIndex, e.shiftKey);
-        } else if ((0, import_vuu_ui_controls5.deselectionIsAllowed)(selectionStrategy)) {
-          deselectItem(itemIndex, e.shiftKey);
-        }
-      }
-    },
-    [deselectItem, selectItem, selected, selectionStrategy]
-  );
-  const itemHandlers = (0, import_vuu_ui_controls5.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 = (0, import_react44.useRef)(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 = (0, import_react44.useCallback)(
-    (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 && (0, import_vuu_utils21.isValidNumber)(index)) {
-          keyboardHookHandleClick(evt, index);
-          onClick == null ? void 0 : onClick(evt, index);
-        }
-      }
-    },
-    [keyboardHookHandleClick, onClick]
-  );
-  const handleKeyDown = (0, import_react44.useCallback)(
-    (evt) => {
-      keyboardHookHandleKeyDown(evt);
-      if (!evt.defaultPrevented) {
-        onKeyDown == null ? void 0 : onKeyDown(evt);
-      }
-    },
-    [keyboardHookHandleKeyDown, onKeyDown]
-  );
-  const onSwitchWrappedItemIntoView = (0, import_react44.useCallback)(
-    (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
-var import_jsx_runtime22 = require("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 = (0, import_react45.useRef)(null);
-  const {
-    activeItemIndex,
-    focusableIdx,
-    focusVisible,
-    itemProps,
-    ...toolbarHook
-  } = useToolbar({
-    activeItemIndex: activeItemIndexProp,
-    defaultActiveItemIndex,
-    containerRef: rootRef,
-    onActiveChange,
-    onNavigateOutOfBounds,
-    orientation,
-    selectionStrategy
-  });
-  const id = (0, import_vuu_utils22.useId)(idProp);
-  const items = (0, import_react45.useMemo)(
-    () => asReactElements(children).map((child, index) => {
-      const {
-        id: itemId = `${id}-tab-${index}`,
-        className: itemClassName,
-        ...ownProps
-      } = child.props;
-      const selected = activeItemIndex.includes(index);
-      return import_react45.default.cloneElement(child, {
-        ...(0, import_vuu_ui_controls6.forwardCallbackProps)(ownProps, itemProps),
-        className: (0, import_clsx15.default)("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__ */ (0, import_jsx_runtime22.jsx)(
-    OverflowContainer,
-    {
-      ...props,
-      ...toolbarHook.containerProps,
-      className: (0, import_clsx15.default)(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
-var import_react46 = __toESM(require("react"));
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react36 = __toESM(require("react"));
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var ConfigWrapper = ({ children }) => {
   const designMode = false;
-  const [layout, setLayout] = (0, import_react46.useState)(children);
-  const [selectedComponent, setSelectedComponent] = (0, import_react46.useState)(children);
+  const [layout, setLayout] = (0, import_react36.useState)(children);
+  const [selectedComponent, setSelectedComponent] = (0, import_react36.useState)(children);
   const handleSelection = (selectedPath) => {
     const targetComponent = followPathToComponent(layout, selectedPath);
     setSelectedComponent(targetComponent);
   };
   const handleChange = (property, value) => {
     console.log(`change ${property} -> ${value}`);
-    const newComponent = import_react46.default.cloneElement(selectedComponent, {
+    const newComponent = import_react36.default.cloneElement(selectedComponent, {
       style: {
         ...selectedComponent.props.style,
         [property]: value
       }
     });
     setSelectedComponent(newComponent);
-    setLayout(import_react46.default.cloneElement(layout, {}, newComponent));
+    setLayout(import_react36.default.cloneElement(layout, {}, newComponent));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { "data-design-mode": `${designMode}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { "data-design-mode": `${designMode}`, children: [
     layout,
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("br", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("br", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         LayoutConfigurator,
         {
           height: 300,
@@ -7128,7 +5679,7 @@ var ConfigWrapper = ({ children }) => {
           style: void 0
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         LayoutTreeViewer,
         {
           layout,
@@ -7141,8 +5692,8 @@ var ConfigWrapper = ({ children }) => {
 };
 
 // src/tools/devtools-box/layout-configurator.jsx
-var import_core9 = require("@salt-ds/core");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_core7 = require("@salt-ds/core");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var NO_STYLE2 = {};
 var DIMENSIONS = {
   margin: {
@@ -7165,36 +5716,36 @@ var DIMENSIONS = {
   }
 };
 var LayoutBox = ({ feature, children, style, onChange }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: `LayoutBox layout-${feature} layout-outer`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: `layout-top`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "layout-title", children: feature }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core9.FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        import_core9.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `LayoutBox layout-${feature} layout-outer`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `layout-top`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "layout-title", children: feature }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core7.FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        import_core7.Input,
         {
           value: style.top,
           onChange: (evt, value) => onChange(feature, "top", value)
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: `layout-inner`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `layout-left`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core9.FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        import_core9.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `layout-inner`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `layout-left`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core7.FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        import_core7.Input,
         {
           value: style.left,
           onChange: (evt, value) => onChange(feature, "left", value)
         }
       ) }) }),
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `layout-right`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core9.FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        import_core9.Input,
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `layout-right`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core7.FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        import_core7.Input,
         {
           value: style.right,
           onChange: (evt, value) => onChange(feature, "right", value)
         }
       ) }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `layout-bottom`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core9.FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      import_core9.Input,
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `layout-bottom`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core7.FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      import_core7.Input,
       {
         value: style.bottom,
         onChange: (evt, value) => onChange(feature, "bottom", value)
@@ -7260,25 +5811,25 @@ var LayoutConfigurator = ({
     paddingBottom: pb = 0,
     paddingLeft: pl = 0
   } = state;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "LayoutConfigurator", style: { width, height, ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "LayoutConfigurator", style: { width, height, ...style }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     LayoutBox,
     {
       feature: "margin",
       style: { top: mt, right: mr, bottom: mb, left: ml },
       onChange: handleChange,
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         LayoutBox,
         {
           feature: "border",
           style: { top: bt, right: br, bottom: bb, left: bl },
           onChange: handleChange,
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             LayoutBox,
             {
               feature: "padding",
               style: { top: pt, right: pr, bottom: pb, left: pl },
               onChange: handleChange,
-              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "layout-content" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "layout-content" })
             }
           )
         }
@@ -7446,16 +5997,16 @@ function normalizeStyle(managedStyle = NO_STYLE2) {
 }
 
 // src/tools/devtools-tree/layout-tree-viewer.jsx
-var import_react47 = __toESM(require("react"));
-var import_clsx16 = __toESM(require("clsx"));
-var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react37 = __toESM(require("react"));
+var import_clsx13 = __toESM(require("clsx"));
+var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var classBaseTree = "hwLayoutTreeViewer";
 var toTreeJson = (component, path = "0") => {
   return {
     label: typeOf(component),
     path,
-    childNodes: import_react47.default.Children.map(
+    childNodes: import_react37.default.Children.map(
       component.props.children,
       (child, i) => toTreeJson(child, path ? `${path}.${i}` : `${i}`)
     )
@@ -7466,8 +6017,8 @@ var LayoutTreeViewer = ({ layout, onSelect, style }) => {
   const handleSelection = (evt, [{ path }]) => {
     onSelect(path);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: (0, import_clsx16.default)(classBaseTree), style, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    import_vuu_ui_controls7.Tree,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx13.default)(classBaseTree), style, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_vuu_ui_controls4.Tree,
     {
       source: treeJson,
       groupSelection: "single",