@vuu-ui/vuu-layout 0.8.4-debug → 0.8.5-debug

package/esm/index.js

@@ -112,14 +112,14 @@ var isDrawer = (component) => component.type === Drawer_default;
 var isVertical = ({ props: { position = "left" } }) => position.match(/top|bottom/);
 var DockLayout = (props) => {
   const { children, className: classNameProp, id, style } = props;
-  const classBase9 = "vuuDockLayout";
+  const classBase14 = "vuuDockLayout";
   const [drawers, content] = partition(children, isDrawer);
   const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);
   const orientation = verticalDrawers.length === 0 ? "horizontal" : horizontalDrawers.length === 0 ? "vertical" : "both";
-  const className = cx2(classBase9, classNameProp, `${classBase9}-${orientation}`);
+  const className = cx2(classBase14, classNameProp, `${classBase14}-${orientation}`);
   return /* @__PURE__ */ jsxs2("div", { className, id, style, children: [
     drawers,
-    /* @__PURE__ */ jsx2("div", { className: `${classBase9}-content`, children: content })
+    /* @__PURE__ */ jsx2("div", { className: `${classBase14}-content`, children: content })
   ] });
 };
 DockLayout.displayName = "DockLayout";
@@ -417,6 +417,41 @@ function setRef(ref, value) {
   }
 }
 
+// src/utils/react-utils.ts
+import {
+  Children,
+  isValidElement as isValidElement2,
+  useLayoutEffect,
+  useMemo,
+  useRef
+} from "react";
+var EMPTY_ARRAY = [];
+var vuuComponentIdCount = 0;
+var asReactElements = (children) => {
+  const isArray = Array.isArray(children);
+  const count = isArray ? children.length : Children.count(children);
+  if (isArray && children.every(isValidElement2)) {
+    return children;
+  } else if (count === 1 && !isArray && isValidElement2(children)) {
+    return [children];
+  } else if (count > 1) {
+    return children;
+  } else {
+    return EMPTY_ARRAY;
+  }
+};
+var useLayoutEffectSkipFirst = (func, deps) => {
+  const goodToGo = useRef(false);
+  useLayoutEffect(() => {
+    if (goodToGo.current) {
+      func();
+    } else {
+      goodToGo.current = true;
+    }
+  }, deps);
+};
+var useId = (id) => useMemo(() => id != null ? id : `vuu-${++vuuComponentIdCount}`, [id]);
+
 // src/utils/styleUtils.ts
 var expandFlex = (flex) => {
   if (typeof flex !== "number") {
@@ -1036,11 +1071,11 @@ var DropTarget = class {
     } else if (dragState && dragState.hasIntrinsicSize()) {
       return this.getIntrinsicDropRect(dragState);
     } else {
-      const [l, t, r, b] = this.getDropRectOutline(
+      const [l, t, r2, b] = this.getDropRectOutline(
         lineWidth,
         dragState
       );
-      return { l, t, r, b };
+      return { l, t, r: r2, b };
     }
   }
   getDropTabOutline(lineWidth, tab) {
@@ -1052,12 +1087,12 @@ var DropTarget = class {
     const gap = Math.round(lineWidth / 2) + inset;
     const t = Math.round(top);
     const l = Math.round(left + gap);
-    const r = Math.round(right - gap);
+    const r2 = Math.round(right - gap);
     const b = Math.round(bottom - gap);
     const tabLeft = this.targetTabPos(tab);
     const tabWidth = 60;
     const tabHeight = ((_a = header == null ? void 0 : header.bottom) != null ? _a : 0) - ((_b = header == null ? void 0 : header.top) != null ? _b : 0);
-    return { l, t, r, b, tabLeft, tabWidth, tabHeight };
+    return { l, t, r: r2, b, tabLeft, tabWidth, tabHeight };
   }
   getIntrinsicDropRect(dragState) {
     var _a, _b, _c, _d;
@@ -1080,14 +1115,14 @@ var DropTarget = class {
       rect.bottom - height,
       Math.max(rect.top, Math.round(pos.y - y.mousePct * height))
     );
-    const [l, t, r, b] = this.dropRect = [
+    const [l, t, r2, b] = this.dropRect = [
       left,
       top,
       left + width,
       top + height
     ];
-    const guideLines = pos.position.EastOrWest ? [l, rect.top, l, rect.bottom, r, rect.top, r, rect.bottom] : [rect.left, t, rect.right, t, rect.left, b, rect.right, b];
-    return { l, r, t, b, guideLines };
+    const guideLines = pos.position.EastOrWest ? [l, rect.top, l, rect.bottom, r2, rect.top, r2, rect.bottom] : [rect.left, t, rect.right, t, rect.left, b, rect.right, b];
+    return { l, r: r2, t, b, guideLines };
   }
   /**
    * @returns  [left, top, right, bottom]
@@ -1100,7 +1135,7 @@ var DropTarget = class {
     const sizeHeight = (_b = intrinsicHeight != null ? intrinsicHeight : suggestedHeight) != null ? _b : 0;
     const sizeWidth = (_c = intrinsicWidth != null ? intrinsicWidth : suggestedWidth) != null ? _c : 0;
     this.dropRect = void 0;
-    const { top: t, left: l, right: r, bottom: b } = rect;
+    const { top: t, left: l, right: r2, bottom: b } = rect;
     const inset = 0;
     const gap = Math.round(lineWidth / 2) + inset;
     switch (position) {
@@ -1108,25 +1143,25 @@ var DropTarget = class {
       case Position.Header: {
         const halfHeight = Math.round((b - t) / 2);
         const height = sizeHeight ? Math.min(halfHeight, Math.round(sizeHeight)) : halfHeight;
-        return sizeWidth && l + sizeWidth < r ? [l + gap, t + gap, l + sizeWidth - gap, t + gap + height] : [l + gap, t + gap, r - gap, t + gap + height];
+        return sizeWidth && l + sizeWidth < r2 ? [l + gap, t + gap, l + sizeWidth - gap, t + gap + height] : [l + gap, t + gap, r2 - gap, t + gap + height];
       }
       case Position.West: {
-        const halfWidth = Math.round((r - l) / 2);
+        const halfWidth = Math.round((r2 - l) / 2);
         const width = sizeWidth ? Math.min(halfWidth, Math.round(sizeWidth)) : halfWidth;
         return sizeHeight && t + sizeHeight < b ? [l + gap, t + gap, l - gap + width, t + sizeHeight + gap] : [l + gap, t + gap, l - gap + width, b - gap];
       }
       case Position.East: {
-        const halfWidth = Math.round((r - l) / 2);
+        const halfWidth = Math.round((r2 - l) / 2);
         const width = sizeWidth ? Math.min(halfWidth, Math.round(sizeWidth)) : halfWidth;
-        return sizeHeight && t + sizeHeight < b ? [r - gap - width, t + gap, r - gap, t + sizeHeight + gap] : [r - gap - width, t + gap, r - gap, b - gap];
+        return sizeHeight && t + sizeHeight < b ? [r2 - gap - width, t + gap, r2 - gap, t + sizeHeight + gap] : [r2 - gap - width, t + gap, r2 - gap, b - gap];
       }
       case Position.South: {
         const halfHeight = Math.round((b - t) / 2);
         const height = sizeHeight ? Math.min(halfHeight, Math.round(sizeHeight)) : halfHeight;
-        return sizeWidth && l + sizeWidth < r ? [l + gap, b - gap - height, l + sizeWidth - gap, b - gap] : [l + gap, b - gap - height, r - gap, b - gap];
+        return sizeWidth && l + sizeWidth < r2 ? [l + gap, b - gap - height, l + sizeWidth - gap, b - gap] : [l + gap, b - gap - height, r2 - gap, b - gap];
       }
       case Position.Centre: {
-        return [l + gap, t + gap, r - gap, b - gap];
+        return [l + gap, t + gap, r2 - gap, b - gap];
       }
       default:
         console.warn(`DropTarget does not recognize position ${position}`);
@@ -1443,8 +1478,8 @@ var DropTargetCanvas = class {
       dragState
     );
     if (targetDropOutline) {
-      const { l, t, r, b, tabLeft, tabWidth, tabHeight, guideLines } = targetDropOutline;
-      const w = r - l;
+      const { l, t, r: r2, b, tabLeft, tabWidth, tabHeight, guideLines } = targetDropOutline;
+      const w = r2 - l;
       const h = b - t;
       if (this.currentPath) {
         const path2 = document.getElementById("vuu-drop-outline");
@@ -1719,8 +1754,8 @@ import { forwardRef as forwardRef3 } from "react";
 import { getUniqueId } from "@vuu-ui/vuu-utils";
 import React5, {
   useCallback as useCallback3,
-  useMemo,
-  useRef as useRef2,
+  useMemo as useMemo2,
+  useRef as useRef3,
   useState as useState2
 } from "react";
 
@@ -1755,7 +1790,7 @@ registerComponent("Placeholder", Placeholder);
 import cx5 from "classnames";
 import React3, {
   useCallback as useCallback2,
-  useRef,
+  useRef as useRef2,
   useState
 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
@@ -1767,9 +1802,9 @@ var Splitter = React3.memo(function Splitter2({
   onDragStart,
   style
 }) {
-  const ignoreClick = useRef();
-  const rootRef = useRef(null);
-  const lastPos = useRef(0);
+  const ignoreClick = useRef2();
+  const rootRef = useRef2(null);
+  const lastPos = useRef2(0);
   const [active, setActive] = useState(false);
   const handleKeyDownDrag = useCallback2(
     ({ key, shiftKey }) => {
@@ -1799,7 +1834,7 @@ var Splitter = React3.memo(function Splitter2({
     },
     [column, handleKeyDownDrag, index, onDragStart]
   );
-  const keyDownHandlerRef = useRef(handleKeyDownInitDrag);
+  const keyDownHandlerRef = useRef2(handleKeyDownInitDrag);
   const handleKeyDown = (evt) => keyDownHandlerRef.current(evt);
   const handleMouseMove = useCallback2(
     (e) => {
@@ -2102,7 +2137,7 @@ var findSplitterAndPlaceholderPositions = (childMeta) => {
   const count = childMeta.length;
   const allIntrinsic = childMeta.every(isIntrinsicallySized);
   const splitterPositions = Array(count).fill(0);
-  if (allIntrinsic) {
+  if (allIntrinsic && count > 0) {
     splitterPositions[0] = PLACEHOLDER;
     splitterPositions[count - 1] = PLACEHOLDER;
   }
@@ -2173,10 +2208,10 @@ var useSplitterResizing = ({
   onSplitterMoved,
   style
 }) => {
-  const rootRef = useRef2(null);
-  const metaRef = useRef2();
-  const contentRef = useRef2();
-  const assignedKeys = useRef2([]);
+  const rootRef = useRef3(null);
+  const metaRef = useRef3();
+  const contentRef = useRef3();
+  const assignedKeys = useRef3([]);
   const [, forceUpdate] = useState2({});
   const setContent = (content) => {
     contentRef.current = content;
@@ -2184,7 +2219,7 @@ var useSplitterResizing = ({
   };
   const isColumn = (style == null ? void 0 : style.flexDirection) === "column";
   const dimension = isColumn ? "height" : "width";
-  const children = useMemo(
+  const children = useMemo2(
     () => Array.isArray(childrenProp) ? childrenProp : React5.isValidElement(childrenProp) ? [childrenProp] : [],
     [childrenProp]
   );
@@ -2260,7 +2295,7 @@ var useSplitterResizing = ({
     },
     [handleDrag, handleDragEnd, handleDragStart, isColumn]
   );
-  useMemo(() => {
+  useMemo2(() => {
     const [content, meta] = buildContent(
       children,
       dimension,
@@ -2454,7 +2489,7 @@ import {
   useCallback as useCallback6,
   useContext,
   useEffect,
-  useRef as useRef4,
+  useRef as useRef5,
   useState as useState3
 } from "react";
 
@@ -2977,28 +3012,8 @@ function getStyledComponents(container, existingComponent, newComponent, targetR
   }
 }
 
-// src/layout-reducer/layoutTypes.ts
-var LayoutActionType = {
-  ADD: "add",
-  DRAG_START: "drag-start",
-  DRAG_DROP: "drag-drop",
-  LAYOUT_RESIZE: "layout-resize",
-  MAXIMIZE: "maximize",
-  MINIMIZE: "minimize",
-  REMOVE: "remove",
-  REPLACE: "replace",
-  RESTORE: "restore",
-  SAVE: "save",
-  SET_PROP: "set-prop",
-  SET_PROPS: "set-props",
-  SET_TITLE: "set-title",
-  SPLITTER_RESIZE: "splitter-resize",
-  SWITCH_TAB: "switch-tab",
-  TEAROUT: "tearout"
-};
-
-// src/layout-reducer/remove-layout-element.ts
-import React9 from "react";
+// src/layout-reducer/move-layout-element.ts
+import { cloneElement as cloneElement2 } from "react";
 
 // src/layout-reducer/replace-layout-element.ts
 import React8 from "react";
@@ -3081,7 +3096,52 @@ function restore(child) {
   });
 }
 
+// src/layout-reducer/move-layout-element.ts
+function moveChild(layoutRoot, { fromIndex, path, toIndex }) {
+  const target = followPath(layoutRoot, path, true);
+  const { children } = getProps(target);
+  const replacementChildren = moveChildWithinChildren(
+    children,
+    fromIndex,
+    toIndex
+  );
+  const replacement = cloneElement2(target, void 0, replacementChildren);
+  return swapChild(layoutRoot, target, replacement);
+}
+function moveChildWithinChildren(children, fromIndex, toIndex) {
+  const newChildren = children.slice();
+  const [child] = newChildren.splice(fromIndex, 1);
+  if (toIndex === -1) {
+    return newChildren.concat(child);
+  } else {
+    newChildren.splice(toIndex, 0, child);
+    return newChildren;
+  }
+}
+
+// src/layout-reducer/layoutTypes.ts
+var LayoutActionType = {
+  ADD: "add",
+  DRAG_START: "drag-start",
+  DRAG_DROP: "drag-drop",
+  LAYOUT_RESIZE: "layout-resize",
+  MAXIMIZE: "maximize",
+  MINIMIZE: "minimize",
+  MOVE_CHILD: "move-child",
+  REMOVE: "remove",
+  REPLACE: "replace",
+  RESTORE: "restore",
+  SAVE: "save",
+  SET_PROP: "set-prop",
+  SET_PROPS: "set-props",
+  SET_TITLE: "set-title",
+  SPLITTER_RESIZE: "splitter-resize",
+  SWITCH_TAB: "switch-tab",
+  TEAROUT: "tearout"
+};
+
 // src/layout-reducer/remove-layout-element.ts
+import React9 from "react";
 function removeChild(layoutRoot, { path }) {
   const target = followPath(layoutRoot, path);
   let targetParent = followPathToParent(layoutRoot, path);
@@ -3559,6 +3619,8 @@ var layoutReducer = (state, action) => {
       return resizeFlexChild(state, action);
     case LayoutActionType.SWITCH_TAB:
       return switchTab(state, action);
+    case LayoutActionType.MOVE_CHILD:
+      return moveChild(state, action);
     default:
       return state;
   }
@@ -3717,7 +3779,7 @@ var LayoutProviderContext = createContext({
 });
 
 // src/layout-provider/useLayoutDragDrop.ts
-import { useCallback as useCallback5, useRef as useRef3 } from "react";
+import { useCallback as useCallback5, useRef as useRef4 } from "react";
 var NO_INSTRUCTIONS = {};
 var NO_OFFSETS = [0, 0];
 var getDragElement = (rect, id, dragElement) => {
@@ -3746,9 +3808,9 @@ var determineDragOffsets = (draggedElement) => {
   }
 };
 var useLayoutDragDrop = (rootLayoutRef, dispatch) => {
-  const dragActionRef = useRef3();
-  const dragOperationRef = useRef3();
-  const draggableHTMLElementRef = useRef3();
+  const dragActionRef = useRef4();
+  const dragOperationRef = useRef4();
+  const draggableHTMLElementRef = useRef4();
   const handleDrag = useCallback5((x, y) => {
     if (dragOperationRef.current && draggableHTMLElementRef.current) {
       const {
@@ -3890,8 +3952,8 @@ var LayoutProviderVersion = () => {
 };
 var LayoutProvider = (props) => {
   const { children, layout, onLayoutChange } = props;
-  const state = useRef4(void 0);
-  const childrenRef = useRef4(children);
+  const state = useRef5(void 0);
+  const childrenRef = useRef5(children);
   const [, forceRefresh] = useState3(null);
   const serializeState = useCallback6(
     (source) => {
@@ -4012,13 +4074,13 @@ registerComponent("Flexbox", FlexboxLayout, "container");
 // src/flexbox/FluidGrid.tsx
 import { useForkRef as useForkRef2 } from "@salt-ds/core";
 import cx7 from "classnames";
-import { forwardRef as forwardRef4 } from "react";
+import { forwardRef as forwardRef4, useMemo as useMemo4 } from "react";
 
 // src/responsive/use-breakpoints.ts
-import { useCallback as useCallback9, useEffect as useEffect2, useRef as useRef6, useState as useState4 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect2, useRef as useRef7, useState as useState4 } from "react";
 
 // src/responsive/useResizeObserver.ts
-import { useCallback as useCallback8, useLayoutEffect, useRef as useRef5 } from "react";
+import { useCallback as useCallback8, useLayoutEffect as useLayoutEffect2, useRef as useRef6 } from "react";
 var WidthHeight = ["height", "width"];
 var HeightOnly = ["height"];
 var WidthOnly = ["width"];
@@ -4037,32 +4099,37 @@ var getTargetSize = (element, contentRect, dimension) => {
       return 0;
   }
 };
-var resizeObserver = new ResizeObserver((entries) => {
-  for (const entry of entries) {
-    const { target, contentRect } = entry;
-    const observedTarget = observedMap.get(target);
-    if (observedTarget) {
-      const { onResize, measurements } = observedTarget;
-      let sizeChanged = false;
-      for (const [dimension, size] of Object.entries(measurements)) {
-        const newSize = getTargetSize(
-          target,
-          contentRect,
-          dimension
-        );
-        if (newSize !== size) {
-          sizeChanged = true;
-          measurements[dimension] = newSize;
+var resizeObserver = new ResizeObserver(
+  (entries) => {
+    for (const entry of entries) {
+      const { target, contentRect } = entry;
+      const observedTarget = observedMap.get(target);
+      if (observedTarget) {
+        const { onResize, measurements } = observedTarget;
+        let sizeChanged = false;
+        for (const [dimension, size] of Object.entries(measurements)) {
+          const newSize = getTargetSize(
+            target,
+            contentRect,
+            dimension
+          );
+          if (newSize !== size) {
+            sizeChanged = true;
+            measurements[dimension] = newSize;
+          }
+        }
+        if (sizeChanged) {
+          onResize && onResize(measurements);
         }
-      }
-      if (sizeChanged) {
-        onResize && onResize(measurements);
       }
     }
   }
-});
-function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
-  const dimensionsRef = useRef5(dimensions);
+);
+function useResizeObserver(ref, dimensions2, onResize, reportInitialSize = false) {
+  console.log(`resizeObserver container`, {
+    ref: ref.current
+  });
+  const dimensionsRef = useRef6(dimensions2);
   const measure = useCallback8((target) => {
     const rect = target.getBoundingClientRect();
     return dimensionsRef.current.reduce(
@@ -4073,7 +4140,7 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
       {}
     );
   }, []);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const target = ref.current;
     let cleanedUp = false;
     async function registerObserver() {
@@ -4111,18 +4178,18 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
       }
     };
   }, [ref, measure, reportInitialSize, onResize]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const target = ref.current;
     const record = observedMap.get(target);
     if (record) {
-      if (dimensionsRef.current !== dimensions) {
-        dimensionsRef.current = dimensions;
+      if (dimensionsRef.current !== dimensions2) {
+        dimensionsRef.current = dimensions2;
         const measurements = measure(target);
         record.measurements = measurements;
       }
       record.onResize = onResize;
     }
-  }, [dimensions, measure, ref, onResize]);
+  }, [dimensions2, measure, ref, onResize]);
 }
 
 // src/responsive/breakpoints.ts
@@ -4158,16 +4225,16 @@ var getBreakPoints = (themeName) => {
 };
 
 // src/responsive/use-breakpoints.ts
-var EMPTY_ARRAY = [];
+var EMPTY_ARRAY2 = [];
 var useBreakpoints = ({ breakPoints: breakPointsProp, smallerThan }, ref) => {
   const [breakpointMatch, setBreakpointmatch] = useState4(
     smallerThan ? false : "lg"
   );
-  const bodyRef = useRef6(document.body);
-  const breakPointsRef = useRef6(
+  const bodyRef = useRef7(document.body);
+  const breakPointsRef = useRef7(
     breakPointsProp ? breakpointRamp(breakPointsProp) : getBreakPoints()
   );
-  const sizeRef = useRef6("lg");
+  const sizeRef = useRef7("lg");
   const stopFromMinWidth = useCallback9(
     (w) => {
       if (breakPointsRef.current) {
@@ -4199,7 +4266,7 @@ var useBreakpoints = ({ breakPoints: breakPointsProp, smallerThan }, ref) => {
   );
   useResizeObserver(
     ref || bodyRef,
-    breakPointsRef.current ? ["width"] : EMPTY_ARRAY,
+    breakPointsRef.current ? ["width"] : EMPTY_ARRAY2,
     ({ width: measuredWidth }) => {
       const result = matchSizeAgainstBreakpoints(measuredWidth);
       if (result !== sizeRef.current) {
@@ -4265,11 +4332,11 @@ var extractResponsiveProps = (props) => {
 // src/flexbox/useResponsiveSizing.ts
 import { getUniqueId as getUniqueId2 } from "@vuu-ui/vuu-utils";
 import {
-  cloneElement as cloneElement2,
-  isValidElement as isValidElement2,
+  cloneElement as cloneElement3,
+  isValidElement as isValidElement3,
   useCallback as useCallback10,
-  useMemo as useMemo2,
-  useRef as useRef7
+  useMemo as useMemo3,
+  useRef as useRef8
 } from "react";
 var breakPoints = ["xs", "sm", "md", "lg", "xl"];
 var DEFAULT_COLS = 12;
@@ -4278,14 +4345,14 @@ var useResponsiveSizing = ({
   cols: colsProp,
   style
 }) => {
-  const rootRef = useRef7(null);
-  const metaRef = useRef7(null);
-  const contentRef = useRef7();
+  const rootRef = useRef8(null);
+  const metaRef = useRef8(null);
+  const contentRef = useRef8();
   const cols = colsProp != null ? colsProp : DEFAULT_COLS;
   const isColumn = (style == null ? void 0 : style.flexDirection) === "column";
   const dimension = isColumn ? "height" : "width";
-  const children = useMemo2(
-    () => Array.isArray(childrenProp) ? childrenProp : isValidElement2(childrenProp) ? [childrenProp] : [],
+  const children = useMemo3(
+    () => Array.isArray(childrenProp) ? childrenProp : isValidElement3(childrenProp) ? [childrenProp] : [],
     [childrenProp]
   );
   const buildContent2 = useCallback10(
@@ -4299,7 +4366,7 @@ var useResponsiveSizing = ({
           style: { flex, ...rest }
         } = child.props;
         content.push(
-          cloneElement2(child, {
+          cloneElement3(child, {
             key: getUniqueId2(),
             style: {
               ...rest,
@@ -4313,7 +4380,7 @@ var useResponsiveSizing = ({
     },
     [cols]
   );
-  useMemo2(() => {
+  useMemo3(() => {
     const [content, meta] = buildContent2(children, dimension);
     metaRef.current = meta;
     contentRef.current = content;
@@ -4331,7 +4398,7 @@ var classBase5 = "hwFluidGrid";
 var FluidGrid = forwardRef4(function FluidGrid2(props, ref) {
   const {
     breakPoints: breakPoints2,
-    children,
+    children: childrenProp,
     column,
     cols: colsProp = 12,
     className: classNameProp,
@@ -4348,6 +4415,9 @@ var FluidGrid = forwardRef4(function FluidGrid2(props, ref) {
     style: styleProp,
     ...rest
   } = props;
+  const children = useMemo4(() => {
+    return asReactElements(childrenProp);
+  }, [childrenProp]);
   const { cols, content, rootRef } = useResponsiveSizing({
     children,
     cols: colsProp,
@@ -4399,9 +4469,9 @@ registerComponent("FluidGrid", FluidGridLayout, "container");
 
 // src/layout-header/Header.tsx
 import classnames2 from "classnames";
-import React15, {
-  useRef as useRef10,
-  useState as useState7
+import React17, {
+  useRef as useRef22,
+  useState as useState11
 } from "react";
 
 // src/layout-view/useViewActionDispatcher.ts
@@ -4501,18 +4571,18 @@ var useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
 };
 
 // src/layout-view/View.tsx
-import { useForkRef as useForkRef3, useIdMemo as useId } from "@salt-ds/core";
+import { useForkRef as useForkRef3, useIdMemo as useId2 } from "@salt-ds/core";
 import cx8 from "classnames";
 import React14, {
   forwardRef as forwardRef5,
   useCallback as useCallback14,
-  useMemo as useMemo4,
-  useRef as useRef9,
+  useMemo as useMemo6,
+  useRef as useRef10,
   useState as useState6
 } from "react";
 
 // src/layout-view/useView.tsx
-import { useCallback as useCallback12, useMemo as useMemo3 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo5 } from "react";
 var useView = ({
   id,
   rootRef,
@@ -4534,7 +4604,7 @@ var useView = ({
     path,
     dropTargets
   );
-  const title = useMemo3(
+  const title = useMemo5(
     () => {
       var _a;
       return (_a = loadState("view-title")) != null ? _a : titleProp;
@@ -4549,7 +4619,7 @@ var useView = ({
     },
     [layoutDispatch, path]
   );
-  const restoredState = useMemo3(() => loadState(id), [id, loadState]);
+  const restoredState = useMemo5(() => loadState(id), [id, loadState]);
   const load = useCallback12(
     (key) => loadState(id, key),
     [id, loadState]
@@ -4600,7 +4670,7 @@ var useView = ({
 
 // src/layout-view/useViewResize.ts
 import { useResizeObserver as useResizeObserver2, WidthHeight as WidthHeight2 } from "@heswell/salt-lab";
-import { useCallback as useCallback13, useRef as useRef8 } from "react";
+import { useCallback as useCallback13, useRef as useRef9 } from "react";
 var NO_MEASUREMENT = [];
 var useViewResize = ({
   mainRef,
@@ -4608,8 +4678,8 @@ var useViewResize = ({
   rootRef
 }) => {
   const deferResize = resize === "defer";
-  const mainSize = useRef8({});
-  const resizeHandle = useRef8();
+  const mainSize = useRef9({});
+  const resizeHandle = useRef9();
   const setMainSize = useCallback13(() => {
     if (mainRef.current) {
       mainRef.current.style.height = mainSize.current.height + "px";
@@ -4682,9 +4752,9 @@ var View = forwardRef5(function View2(props, forwardedRef) {
     title: titleProp,
     ...restProps
   } = props;
-  const id = useId(idProp);
-  const rootRef = useRef9(null);
-  const mainRef = useRef9(null);
+  const id = useId2(idProp);
+  const rootRef = useRef10(null);
+  const mainRef = useRef10(null);
   const [componentProps, _setComponentProps] = useState6();
   const {
     contributions,
@@ -4718,7 +4788,7 @@ var View = forwardRef5(function View2(props, forwardedRef) {
     }
     return children;
   };
-  const viewContextValue = useMemo4(
+  const viewContextValue = useMemo6(
     () => ({
       dispatch: dispatchViewAction,
       id,
@@ -4788,165 +4858,3072 @@ registerComponent("View", MemoView, "view");
 
 // src/layout-header/Header.tsx
 import {
-  EditableLabel,
   Toolbar,
   ToolbarButton,
   ToolbarField,
   Tooltray
 } from "@heswell/salt-lab";
 import { CloseIcon } from "@salt-ds/icons";
-import { jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
-var Header = ({
+
+// ../../node_modules/clsx/dist/clsx.m.js
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e)
+    n += e;
+  else if ("object" == typeof e)
+    if (Array.isArray(e))
+      for (t = 0; t < e.length; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    else
+      for (t in e)
+        e[t] && (n && (n += " "), n += t);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = ""; f < arguments.length; )
+    (e = arguments[f++]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// ../vuu-ui-controls/src/editable-label/EditableLabel.tsx
+import {
+  useCallback as useCallback15,
+  useLayoutEffect as useLayoutEffect3,
+  forwardRef as forwardRef6,
+  useRef as useRef11
+} from "react";
+import { useControlled as useControlled2 } from "@salt-ds/core";
+import { Input } from "@heswell/salt-lab";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var classBase7 = "vuuEditableLabel";
+var EditableLabel = forwardRef6(function EditableLabel2({
   className: classNameProp,
-  contributions,
-  collapsed,
-  closeable,
-  onEditTitle,
-  orientation: orientationProp = "horizontal",
-  style,
-  title = "Untitled"
-}) => {
-  const labelFieldRef = useRef10(null);
-  const [value, setValue] = useState7(title);
-  const [editing, setEditing] = useState7(false);
-  const viewDispatch = useViewDispatch();
-  const handleClose = (evt) => viewDispatch == null ? void 0 : viewDispatch({ type: "remove" }, evt);
-  const classBase9 = "vuuHeader";
-  const handleTitleMouseDown = () => {
-    var _a;
-    (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
+  defaultEditing,
+  defaultValue,
+  editing: editingProp,
+  onChange,
+  onEnterEditMode,
+  onExitEditMode,
+  value: valueProp,
+  ...restProps
+}, forwardedRef) {
+  const inputRef = useRef11(null);
+  const editingRef = useRef11(false);
+  const [value, setValue] = useControlled2({
+    controlled: valueProp,
+    default: defaultValue != null ? defaultValue : "",
+    name: "EditableLabel",
+    state: "value"
+  });
+  const [editing, _setEditing] = useControlled2({
+    controlled: editingProp,
+    default: defaultEditing != null ? defaultEditing : false,
+    name: "EditableLabel",
+    state: "editing"
+  });
+  const setEditing = useCallback15((value2) => {
+    _setEditing(editingRef.current = value2);
+  }, []);
+  const initialValue = useRef11(value);
+  useLayoutEffect3(() => {
+    if (editing) {
+      if (inputRef.current !== null) {
+        inputRef.current.select();
+        inputRef.current.focus();
+      }
+    }
+  }, [editing, inputRef]);
+  const enterEditMode = useCallback15(() => {
+    setEditing(true);
+    onEnterEditMode && onEnterEditMode();
+  }, [onEnterEditMode, setEditing]);
+  const exitEditMode = ({
+    cancelEdit = false,
+    allowDeactivation = false
+  } = {}) => {
+    setEditing(false);
+    const originalValue = initialValue.current;
+    if (originalValue !== value) {
+      if (cancelEdit) {
+        setValue(originalValue);
+      } else {
+        initialValue.current = value;
+      }
+    }
+    onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation, cancelEdit);
   };
-  const handleButtonMouseDown = (evt) => {
-    evt.stopPropagation();
+  const handleChange = (evt) => {
+    const { value: value2 } = evt.target;
+    setValue(value2);
+    onChange && onChange(value2);
   };
-  const orientation = collapsed || orientationProp;
-  const className = classnames2(
-    classBase9,
-    classNameProp,
-    `${classBase9}-${orientation}`
-  );
-  const handleEnterEditMode = () => {
-    setEditing(true);
+  const handleDoubleClick = () => {
+    enterEditMode();
   };
-  const handleTitleKeyDown = (evt) => {
-    if (evt.key === "Enter") {
-      setEditing(true);
+  const handleBlur = () => {
+    if (editingRef.current) {
+      exitEditMode({ allowDeactivation: true });
     }
   };
-  const handleExitEditMode = (originalValue = "", finalValue = "", allowDeactivation = true, editCancelled = false) => {
-    var _a;
-    setEditing(false);
-    if (editCancelled) {
-      setValue(originalValue);
-    } else if (finalValue !== originalValue) {
-      setValue(finalValue);
-      onEditTitle == null ? void 0 : onEditTitle(finalValue);
-    }
-    if (allowDeactivation === false) {
-      (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
+  const handleKeyDown = (evt) => {
+    if (editing && evt.key === "Enter") {
+      evt.stopPropagation();
+      exitEditMode();
+    } else if (evt.key === "ArrowRight" || evt.key === "ArrowLeft") {
+      evt.stopPropagation();
+    } else if (evt.key === "Escape") {
+      exitEditMode({ cancelEdit: true });
     }
   };
-  const handleMouseDown = (e) => {
-    viewDispatch == null ? void 0 : viewDispatch({ type: "mousedown" }, e);
-  };
-  const toolbarItems = [];
-  const postTitleContributedItems = [];
-  const actionButtons = [];
-  contributions == null ? void 0 : contributions.forEach((contribution, i) => {
-    switch (contribution.location) {
-      case "pre-title":
-        toolbarItems.push(React15.cloneElement(contribution.content, { key: i }));
-        break;
-      default:
-        postTitleContributedItems.push(
-          React15.cloneElement(contribution.content, { key: i })
-        );
-    }
+  const className = clsx(classBase7, classNameProp, {
+    [`${classBase7}-editing`]: editing
   });
-  title && toolbarItems.push(
-    /* @__PURE__ */ jsx15(ToolbarField, { className: "vuuHeader-title", children: /* @__PURE__ */ jsx15(
-      EditableLabel,
-      {
-        editing,
-        value,
-        onChange: setValue,
-        onMouseDownCapture: handleTitleMouseDown,
-        onEnterEditMode: handleEnterEditMode,
-        onExitEditMode: handleExitEditMode,
-        onKeyDown: handleTitleKeyDown,
-        ref: labelFieldRef,
-        tabIndex: 0
-      },
-      "title"
-    ) }, "title")
-  );
-  closeable && actionButtons.push(
-    /* @__PURE__ */ jsxs4(
-      ToolbarButton,
-      {
-        onClick: handleClose,
-        onMouseDown: handleButtonMouseDown,
-        children: [
-          /* @__PURE__ */ jsx15(CloseIcon, {}),
-          " Close"
-        ]
-      },
-      "close"
-    )
-  );
-  postTitleContributedItems.length > 0 && toolbarItems.push(
-    /* @__PURE__ */ jsx15(Tooltray, { "data-align-end": true, children: postTitleContributedItems }, "contributions")
-  );
-  actionButtons.length > 0 && toolbarItems.push(
-    /* @__PURE__ */ jsx15(Tooltray, { "data-align-end": true, children: actionButtons }, "actions")
-  );
   return /* @__PURE__ */ jsx15(
-    Toolbar,
+    "div",
     {
+      ...restProps,
       className,
-      orientation: orientationProp,
-      style,
-      onMouseDown: handleMouseDown,
-      children: toolbarItems
+      onDoubleClick: handleDoubleClick,
+      "data-text": value,
+      ref: forwardedRef,
+      children: editing ? /* @__PURE__ */ jsx15(
+        Input,
+        {
+          inputProps: { className: `${classBase7}-input` },
+          value,
+          onBlur: handleBlur,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          ref: inputRef,
+          style: { padding: 0 },
+          textAlign: "left"
+        }
+      ) : value
     }
   );
-};
+});
 
-// src/palette/Palette.tsx
-import { uuid as uuid5 } from "@vuu-ui/vuu-utils";
-import { List, ListItem } from "@heswell/salt-lab";
+// ../vuu-ui-controls/src/tabstrip/Tabstrip.tsx
+import { Button as Button2 } from "@salt-ds/core";
 import cx9 from "classnames";
+import React16, { useMemo as useMemo12, useRef as useRef20 } from "react";
+
+// ../vuu-ui-controls/src/tabstrip/useTabstrip.ts
 import {
-  cloneElement as cloneElement3,
-  memo
+  useCallback as useCallback27,
+  useRef as useRef19
+} from "react";
+
+// ../vuu-ui-controls/src/drag-drop/DragDropProvider.tsx
+import {
+  createContext as createContext2,
+  useCallback as useCallback16,
+  useContext as useContext3,
+  useMemo as useMemo7
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
-var clonePaletteItem = (paletteItem) => {
-  const dolly = paletteItem.cloneNode(true);
-  dolly.id = "";
-  delete dolly.dataset.idx;
+var NO_DRAG_CONTEXT = {
+  isDragSource: false,
+  isDropTarget: false,
+  register: () => void 0
+};
+var unconfiguredRegistrationCall = () => console.log(`have you forgotten to provide a DragDrop Provider ?`);
+var DragDropContext = createContext2({
+  registerDragDropParty: unconfiguredRegistrationCall
+});
+var useDragDropProvider = (id) => {
+  var _a, _b;
+  const { dragSources, dropTargets, registerDragDropParty } = useContext3(DragDropContext);
+  if (id) {
+    const isDragSource = (_a = dragSources == null ? void 0 : dragSources.has(id)) != null ? _a : false;
+    const isDropTarget = (_b = dropTargets == null ? void 0 : dropTargets.has(id)) != null ? _b : false;
+    return {
+      isDragSource,
+      isDropTarget,
+      register: registerDragDropParty
+    };
+  } else {
+    return NO_DRAG_CONTEXT;
+  }
+};
+
+// ../vuu-ui-controls/src/drag-drop/useDragDropNaturalMovementNext.tsx
+import { useCallback as useCallback19, useMemo as useMemo9, useRef as useRef13, useState as useState7 } from "react";
+
+// ../vuu-ui-controls/src/drag-drop/useDragDisplacers.ts
+import { useCallback as useCallback18, useMemo as useMemo8, useRef as useRef12 } from "react";
+
+// ../vuu-ui-controls/src/drag-drop/drop-target-utils.ts
+var LEFT_RIGHT = ["left", "right"];
+var TOP_BOTTOM = ["top", "bottom"];
+var NOT_OVERFLOWED = ":not(.wrapped)";
+var NOT_HIDDEN = ':not([aria-hidden="true"])';
+var cloneElement4 = (element) => {
+  const dolly = element.cloneNode(true);
+  dolly.removeAttribute("id");
+  dolly.dataset.index = "-1";
   return dolly;
 };
-var PaletteItem = memo(
-  ({
-    className,
-    children: component,
-    idx,
-    resizeable,
-    header,
-    closeable,
-    ...props
-  }) => {
-    return /* @__PURE__ */ jsx16(
-      ListItem,
-      {
-        className: cx9("vuuPaletteItem", className),
-        "data-draggable": true,
-        ...props
-      }
-    );
+var measureElementSizeAndPosition = (element, dimension = "width", includeAutoMargin = false) => {
+  const pos = dimension === "width" ? "left" : "top";
+  const { [dimension]: size, [pos]: position } = element.getBoundingClientRect();
+  const { padEnd = false, padStart = false } = element.dataset;
+  const style = getComputedStyle(element);
+  const [start2, end] = dimension === "width" ? LEFT_RIGHT : TOP_BOTTOM;
+  const marginStart = padStart && !includeAutoMargin ? 0 : parseInt(style.getPropertyValue(`margin-${start2}`), 10);
+  const marginEnd = padEnd && !includeAutoMargin ? 0 : parseInt(style.getPropertyValue(`margin-${end}`), 10);
+  let minWidth = size;
+  const flexShrink = parseInt(style.getPropertyValue("flex-shrink"), 10);
+  if (flexShrink > 0) {
+    const flexBasis = parseInt(style.getPropertyValue("flex-basis"), 10);
+    if (!isNaN(flexBasis) && flexBasis > 0) {
+      minWidth = flexBasis;
+    }
   }
-);
+  return [position, marginStart + minWidth + marginEnd];
+};
+var DIMENSIONS = {
+  horizontal: {
+    CLIENT_POS: "clientX",
+    CLIENT_SIZE: "clientWidth",
+    CONTRA: "top",
+    CONTRA_CLIENT_POS: "clientY",
+    CONTRA_END: "bottom",
+    CONTRA_POS: "y",
+    DIMENSION: "width",
+    END: "right",
+    POS: "x",
+    SCROLL_POS: "scrollLeft",
+    SCROLL_SIZE: "scrollWidth",
+    START: "left"
+  },
+  vertical: {
+    CLIENT_POS: "clientY",
+    CLIENT_SIZE: "clientHeight",
+    CONTRA: "left",
+    CONTRA_CLIENT_POS: "clientX",
+    CONTRA_END: "right",
+    CONTRA_POS: "x",
+    DIMENSION: "height",
+    END: "bottom",
+    POS: "y",
+    SCROLL_POS: "scrollTop",
+    SCROLL_SIZE: "scrollHeight",
+    START: "top"
+  }
+};
+var dimensions = (orientation) => DIMENSIONS[orientation];
+var getItemById = (measuredItems, id) => {
+  const result = measuredItems.find((item) => item.id === id);
+  if (result) {
+    return result;
+  }
+};
+var removeDraggedItem = (measuredItems, index) => {
+  measuredItems.splice(index, 1);
+  for (let i = index; i < measuredItems.length; i++) {
+    measuredItems[i].currentIndex -= 1;
+  }
+};
+var measureDropTargets = (container, orientation, itemQuery, viewportRange, draggedItemId) => {
+  var _a;
+  const dragThresholds = [];
+  const { DIMENSION } = dimensions(orientation);
+  const children = Array.from(
+    itemQuery ? container.querySelectorAll(itemQuery) : container.children
+  );
+  const itemCount = children.length;
+  const start2 = typeof (viewportRange == null ? void 0 : viewportRange.from) === "number" ? viewportRange.atEnd ? Math.max(0, viewportRange.from - 1) : viewportRange.from : 0;
+  const end = typeof (viewportRange == null ? void 0 : viewportRange.to) === "number" ? Math.min(viewportRange.to + 2, itemCount - 1) : itemCount - 1;
+  for (let index = start2; index <= end; index++) {
+    const element = children[index];
+    const [start3, size] = measureElementSizeAndPosition(element, DIMENSION);
+    const isLast = index === itemCount - 1;
+    const id = element.id;
+    const dataIndex = parseInt((_a = element.dataset.index) != null ? _a : "-1");
+    dragThresholds.push({
+      currentIndex: index,
+      dataIndex: isNaN(dataIndex) ? -1 : dataIndex,
+      id,
+      index,
+      isDraggedItem: draggedItemId === id,
+      isLast,
+      isOverflowIndicator: element.dataset.index === "overflow",
+      element,
+      start: start3,
+      end: start3 + size,
+      size,
+      mid: start3 + size / 2
+    });
+  }
+  return dragThresholds;
+};
+var getIndexOfDraggedItem = (dropTargets) => dropTargets.findIndex((d) => d.isDraggedItem);
+var mutateDropTargetsSwitchDropTargetPosition = (dropTargets, direction) => {
+  const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
+  const indexOfTarget = direction === "fwd" ? indexOfDraggedItem + 1 : indexOfDraggedItem - 1;
+  if (indexOfTarget < 0 || indexOfTarget >= dropTargets.length) {
+    throw Error("switchDropTargetPosition index out of range");
+  }
+  const draggedItem = dropTargets.at(indexOfDraggedItem);
+  const targetItem = dropTargets.at(indexOfTarget);
+  const diff = targetItem.size - draggedItem.size;
+  if (direction === "fwd") {
+    const draggedStart = targetItem.start + diff;
+    const draggedEnd = targetItem.end;
+    const newDraggedItem = {
+      ...draggedItem,
+      start: draggedStart,
+      mid: Math.floor(draggedStart + (draggedEnd - draggedStart) / 2),
+      end: draggedEnd
+    };
+    const targetStart = draggedItem.start;
+    const targetEnd = draggedItem.end + diff;
+    const newTargetItem = {
+      ...targetItem,
+      start: targetStart,
+      mid: Math.floor(targetStart + (targetEnd - targetStart) / 2),
+      end: targetEnd
+    };
+    dropTargets.splice(indexOfDraggedItem, 2, newTargetItem, newDraggedItem);
+  } else {
+    const draggedStart = targetItem.start;
+    const draggedEnd = targetItem.end - diff;
+    const newDraggedItem = {
+      ...draggedItem,
+      start: draggedStart,
+      mid: Math.floor(draggedStart + (draggedEnd - draggedStart) / 2),
+      end: draggedEnd
+    };
+    const targetStart = draggedItem.start - diff;
+    const targetEnd = draggedItem.end;
+    const newTargetItem = {
+      ...targetItem,
+      start: targetStart,
+      mid: Math.floor(targetStart + (targetEnd - targetStart) / 2),
+      end: targetEnd
+    };
+    dropTargets.splice(indexOfTarget, 2, newDraggedItem, newTargetItem);
+  }
+};
+var getNextDropTarget = (dropTargets, pos, mouseMoveDirection) => {
+  const len = dropTargets.length;
+  const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
+  const draggedItem = dropTargets[indexOfDraggedItem];
+  if (mouseMoveDirection === "fwd") {
+    const leadingEdge = Math.round(pos + draggedItem.size);
+    for (let index = len - 1; index >= 0; index--) {
+      const dropTarget = dropTargets[index];
+      if (leadingEdge > dropTarget.mid) {
+        if (index < indexOfDraggedItem) {
+          return draggedItem;
+        } else {
+          return dropTarget;
+        }
+      }
+    }
+  } else {
+    const leadingEdge = Math.round(pos);
+    for (let index = 0; index < len; index++) {
+      const dropTarget = dropTargets[index];
+      if (leadingEdge < dropTarget.mid) {
+        if (index > indexOfDraggedItem) {
+          return draggedItem;
+        } else {
+          return dropTarget;
+        }
+      }
+    }
+  }
+  throw Error("no dropTraget identified");
+};
+function constrainRect(targetRect, constraintRect) {
+  const { height, left, top, width } = targetRect;
+  const { height: constrainedHeight, width: constrainedWidth } = constraintRect;
+  return {
+    height: Math.min(height, constrainedHeight),
+    left,
+    top,
+    width: Math.min(width, constrainedWidth)
+  };
+}
+
+// ../vuu-ui-controls/src/drag-drop/Draggable.tsx
+import { useForkRef as useForkRef4 } from "@salt-ds/core";
+import {
+  forwardRef as forwardRef7,
+  useCallback as useCallback17
+} from "react";
+import { Portal } from "@vuu-ui/vuu-popups";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var makeClassNames = (classNames) => classNames.split(" ").map((className) => `vuuDraggable-${className}`);
+var Draggable2 = forwardRef7(function Draggable3({ wrapperClassName, element, onTransitionEnd, style, scale = 1 }, forwardedRef) {
+  const callbackRef = useCallback17(
+    (el) => {
+      if (el) {
+        el.innerHTML = "";
+        el.appendChild(element);
+        if (scale !== 1) {
+          el.style.transform = `scale(${scale},${scale})`;
+        }
+      }
+    },
+    [element, scale]
+  );
+  const forkedRef = useForkRef4(forwardedRef, callbackRef);
+  return /* @__PURE__ */ jsx17(Portal, { children: /* @__PURE__ */ jsx17(
+    "div",
+    {
+      className: clsx("vuuDraggable", ...makeClassNames(wrapperClassName)),
+      ref: forkedRef,
+      onTransitionEnd,
+      style
+    }
+  ) });
+});
+var createDragSpacer = (transitioning) => {
+  const spacer = document.createElement("div");
+  spacer.className = "vuuDraggable-spacer";
+  if (transitioning) {
+    spacer.addEventListener("transitionend", () => {
+      transitioning.current = false;
+    });
+  }
+  return spacer;
+};
+var createDropIndicatorPosition = () => {
+  const spacer = document.createElement("div");
+  spacer.className = "vuuDraggable-dropIndicatorPosition";
+  return spacer;
+};
+var createDropIndicator = (transitioning) => {
+  const spacer = document.createElement("div");
+  spacer.className = "vuuDraggable-dropIndicator";
+  if (transitioning) {
+    spacer.addEventListener("transitionend", () => {
+      transitioning.current = false;
+    });
+  }
+  return spacer;
+};
+
+// ../vuu-ui-controls/src/drag-drop/useDragDisplacers.ts
+var useDragDisplacers = () => {
+  const animationFrame = useRef12(0);
+  const transitioning = useRef12(false);
+  const spacers = useMemo8(
+    // We only need to listen for transition end on one of the spacers
+    () => [createDragSpacer(transitioning), createDragSpacer()],
+    []
+  );
+  const clearSpacers = useCallback18(
+    () => spacers.forEach((spacer) => spacer.remove()),
+    [spacers]
+  );
+  const animateTransition = useCallback18(
+    (size, propertyName = "width") => {
+      const [spacer1, spacer2] = spacers;
+      animationFrame.current = requestAnimationFrame(() => {
+        transitioning.current = true;
+        spacer1.style.cssText = `${propertyName}: 0px`;
+        spacer2.style.cssText = `${propertyName}: ${size}px`;
+        spacers[0] = spacer2;
+        spacers[1] = spacer1;
+      });
+    },
+    [spacers]
+  );
+  const cancelAnyPendingAnimation = useCallback18(() => {
+    if (animationFrame.current) {
+      cancelAnimationFrame(animationFrame.current);
+      animationFrame.current = 0;
+    }
+  }, []);
+  const clearDisplacedItem = useCallback18(() => {
+    clearSpacers();
+  }, [clearSpacers]);
+  const displaceItem = useCallback18(
+    (dropTargets, dropTarget, size, useTransition = false, direction = "static", orientation = "horizontal") => {
+      if (dropTarget) {
+        const propertyName = orientation === "horizontal" ? "width" : "height";
+        const [spacer1, spacer2] = spacers;
+        cancelAnyPendingAnimation();
+        if (useTransition) {
+          if (transitioning.current) {
+            clearSpacers();
+            spacer1.style.cssText = `${propertyName}: ${size}px`;
+            spacer2.style.cssText = `${propertyName}: 0px`;
+            if (direction === "fwd") {
+              dropTarget.element.before(spacer1);
+              dropTarget.element.after(spacer2);
+            } else {
+              dropTarget.element.after(spacer1);
+              dropTarget.element.before(spacer2);
+            }
+          } else {
+            if (direction === "fwd") {
+              dropTarget.element.after(spacer2);
+            } else {
+              dropTarget.element.before(spacer2);
+            }
+          }
+          animateTransition(size, propertyName);
+        } else if (direction === "static") {
+          spacer1.style.cssText = `${propertyName}: ${size}px`;
+          dropTarget.element.before(spacer1);
+        } else {
+          throw Error(
+            "useDragDisplacers currently only supports noTransition for static displacement"
+          );
+        }
+        if (direction !== "static") {
+          mutateDropTargetsSwitchDropTargetPosition(dropTargets, direction);
+        }
+      }
+    },
+    [animateTransition, cancelAnyPendingAnimation, clearSpacers, spacers]
+  );
+  const displaceLastItem = useCallback18(
+    (dropTargets, dropTarget, size, useTransition = false, direction = "static", orientation = "horizontal") => {
+      const propertyName = orientation === "horizontal" ? "width" : "height";
+      const [spacer1, spacer2] = spacers;
+      cancelAnyPendingAnimation();
+      if (useTransition) {
+        if (transitioning.current) {
+          clearSpacers();
+          spacer1.style.cssText = `${propertyName}: ${size}px`;
+          spacer2.style.cssText = `${propertyName}: 0px`;
+          dropTarget.element.before(spacer1);
+          dropTarget.element.after(spacer2);
+        } else {
+          if (direction === "fwd") {
+            dropTarget.element.after(spacer2);
+          } else {
+            dropTarget.element.before(spacer2);
+          }
+        }
+        animateTransition(size, propertyName);
+      } else {
+        spacer1.style.cssText = `${propertyName}: ${size}px`;
+        dropTarget.element.after(spacer1);
+      }
+      if (direction !== "static") {
+        mutateDropTargetsSwitchDropTargetPosition(dropTargets, direction);
+      }
+    },
+    [animateTransition, cancelAnyPendingAnimation, clearSpacers, spacers]
+  );
+  return {
+    clearDisplacedItem,
+    displaceItem,
+    displaceLastItem,
+    clearSpacers
+  };
+};
+
+// ../vuu-ui-controls/src/drag-drop/useDragDropNaturalMovementNext.tsx
+var useDragDropNaturalMovement = ({
+  draggableRef,
+  onDrop,
+  orientation = "horizontal",
+  containerRef,
+  itemQuery = "*",
+  selected,
+  viewportRange
+}) => {
+  const dragDirectionRef = useRef13();
+  const isScrollable = useRef13(false);
+  const dragPosRef = useRef13(-1);
+  const measuredDropTargets = useRef13([]);
+  const overflowMenuShowingRef = useRef13(false);
+  const [showOverflow, setShowOverflow] = useState7(false);
+  const { clearDisplacedItem, clearSpacers, displaceItem, displaceLastItem } = useDragDisplacers();
+  const draggedItemRef = useRef13();
+  const fullItemQuery = `:is(${itemQuery}${NOT_OVERFLOWED}${NOT_HIDDEN},.vuuOverflowContainer-OverflowIndicator)`;
+  const indexOf = (dropTarget) => measuredDropTargets.current.findIndex((d) => d.id === dropTarget.id);
+  const rangeRef = useRef13();
+  rangeRef.current = viewportRange;
+  const handleScrollStart = useCallback19(() => {
+    clearDisplacedItem();
+  }, [clearDisplacedItem]);
+  const handleScrollStop = useCallback19(
+    (scrollDirection, _scrollPos, atEnd) => {
+      const { current: container } = containerRef;
+      const { current: draggedItem } = draggedItemRef;
+      if (container && draggedItem) {
+        measuredDropTargets.current = measureDropTargets(
+          container,
+          orientation,
+          fullItemQuery,
+          rangeRef.current
+        );
+        const { size } = draggedItem;
+        const dragPos = dragPosRef.current;
+        const midPos = dragPos + size / 2;
+        const { current: dropTargets } = measuredDropTargets;
+        const dropTarget = getNextDropTarget(dropTargets, midPos, "fwd");
+        if (dropTarget) {
+          const targetIndex = indexOf(dropTarget);
+          const nextInsertPos = targetIndex;
+          const nextDropTarget = dropTargets[nextInsertPos];
+          if (atEnd && scrollDirection === "fwd") {
+            displaceLastItem(
+              dropTargets,
+              dropTargets[dropTargets.length - 1],
+              size,
+              false,
+              "static",
+              orientation
+            );
+          } else {
+            displaceItem(
+              dropTargets,
+              nextDropTarget,
+              size,
+              true,
+              "static",
+              orientation
+            );
+          }
+        }
+      }
+    },
+    [
+      containerRef,
+      displaceItem,
+      displaceLastItem,
+      fullItemQuery,
+      orientation
+      // setVizData,
+    ]
+  );
+  const beginDrag = useCallback19(
+    (evt) => {
+      const evtTarget = evt.target;
+      const dragElement = evtTarget.closest(itemQuery);
+      if (
+        //TODO need a different check for selected
+        dragElement.ariaSelected && Array.isArray(selected) && selected.length > 1
+      ) {
+        console.log("its a selected element, and we have a multi select");
+      }
+      const { current: container } = containerRef;
+      if (container && dragElement) {
+        const { SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);
+        const { id: draggedItemId } = dragElement;
+        const { [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } = container;
+        isScrollable.current = scrollSize > clientSize;
+        const dropTargets = measuredDropTargets.current = measureDropTargets(
+          container,
+          orientation,
+          fullItemQuery,
+          viewportRange,
+          draggedItemId
+        );
+        console.log({ dropTargets });
+        const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
+        const draggedItem = dropTargets[indexOfDraggedItem];
+        if (draggedItem && container) {
+          draggedItemRef.current = draggedItem;
+          const displaceFunction = draggedItem.isLast ? displaceLastItem : displaceItem;
+          displaceFunction(
+            dropTargets,
+            draggedItem,
+            draggedItem.size,
+            false,
+            "static",
+            orientation
+          );
+        }
+      }
+    },
+    [
+      containerRef,
+      displaceItem,
+      displaceLastItem,
+      fullItemQuery,
+      itemQuery,
+      orientation,
+      selected,
+      // setVizData,
+      viewportRange
+    ]
+  );
+  const [showPopup, hidePopup] = useMemo9(() => {
+    let popupShowing = false;
+    const show = (dropTarget) => {
+      if (!popupShowing) {
+        popupShowing = true;
+        const button = dropTarget.element.querySelector(".vuuPopupMenu");
+        if (button) {
+          const evt = new MouseEvent("click", {
+            view: window,
+            bubbles: true,
+            cancelable: true
+          });
+          button.dispatchEvent(evt);
+        }
+      }
+    };
+    const hide = (dropTarget) => {
+      if (popupShowing) {
+        popupShowing = false;
+        const button = dropTarget.element.querySelector(".vuuPopupMenu");
+        if (button) {
+          const evt = new MouseEvent("click", {
+            view: window,
+            bubbles: true,
+            cancelable: true
+          });
+          button.dispatchEvent(evt);
+        }
+      }
+    };
+    return [show, hide];
+  }, []);
+  const drag = useCallback19(
+    (dragPos, mouseMoveDirection) => {
+      const { current: draggedItem } = draggedItemRef;
+      if (draggedItem) {
+        if (draggableRef.current && containerRef.current) {
+          dragPosRef.current = dragPos;
+          const { current: dropTargets } = measuredDropTargets;
+          const nextDropTarget = getNextDropTarget(
+            dropTargets,
+            dragPos,
+            mouseMoveDirection
+          );
+          if (nextDropTarget && !nextDropTarget.isDraggedItem) {
+            if (nextDropTarget.isOverflowIndicator) {
+              setShowOverflow(overflowMenuShowingRef.current = true);
+              showPopup(nextDropTarget);
+            } else {
+              const { size } = draggedItem;
+              const targetIndex = indexOf(nextDropTarget);
+              const displaceFunc = targetIndex === dropTargets.length - 1 ? displaceLastItem : displaceItem;
+              displaceFunc(
+                dropTargets,
+                nextDropTarget,
+                size,
+                true,
+                mouseMoveDirection,
+                orientation
+              );
+              const overflowIndicator = dropTargets.at(
+                -1
+              );
+              hidePopup(overflowIndicator);
+              setShowOverflow(overflowMenuShowingRef.current = false);
+            }
+          }
+          dragDirectionRef.current = mouseMoveDirection;
+        }
+      }
+    },
+    [
+      containerRef,
+      displaceItem,
+      displaceLastItem,
+      draggableRef,
+      hidePopup,
+      orientation,
+      showPopup
+    ]
+  );
+  const drop = useCallback19(() => {
+    var _a;
+    clearSpacers();
+    const { current: dropTargets } = measuredDropTargets;
+    const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);
+    const draggedItem = dropTargets[indexOfDraggedItem];
+    if (draggedItem) {
+      dragDirectionRef.current = void 0;
+      if (overflowMenuShowingRef.current) {
+        onDrop(draggedItem.index, -1);
+      } else {
+        onDrop(draggedItem.index, indexOfDraggedItem);
+      }
+    }
+    setShowOverflow(false);
+    if (containerRef.current) {
+      const scrollTop = (_a = containerRef.current) == null ? void 0 : _a.scrollTop;
+      if (indexOfDraggedItem < dropTargets.length) {
+        containerRef.current.scrollTop = scrollTop;
+      }
+    }
+  }, [clearSpacers, containerRef, onDrop]);
+  return {
+    beginDrag,
+    drag,
+    drop,
+    handleScrollStart,
+    handleScrollStop,
+    revealOverflowedItems: showOverflow
+  };
+};
+
+// ../vuu-ui-controls/src/drag-drop/useDragDropIndicator.tsx
+import { useCallback as useCallback21, useRef as useRef14, useState as useState8 } from "react";
+
+// ../vuu-ui-controls/src/drag-drop/useDropIndicator.ts
+import { useCallback as useCallback20, useMemo as useMemo10 } from "react";
+var useDropIndicator = () => {
+  const spacer = useMemo10(() => createDropIndicatorPosition(), []);
+  const clearSpacer = useCallback20(() => spacer.remove(), [spacer]);
+  const positionDropIndicator = useCallback20(
+    (dropTarget, dropZone2 = "end") => {
+      if (dropZone2 === "end") {
+        dropTarget.element.after(spacer);
+      } else {
+        dropTarget.element.before(spacer);
+      }
+      return spacer;
+    },
+    [spacer]
+  );
+  return {
+    positionDropIndicator,
+    clearSpacer
+  };
+};
+
+// ../vuu-ui-controls/src/drag-drop/useDragDropIndicator.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+var NOT_OVERFLOWED2 = ':not([data-overflowed="true"])';
+var NOT_HIDDEN2 = ':not([aria-hidden="true"])';
+var useDragDropIndicator = ({
+  draggableRef,
+  onDrop,
+  orientation = "horizontal",
+  containerRef,
+  itemQuery = "*",
+  selected,
+  viewportRange
+}) => {
+  const dragDirectionRef = useRef14();
+  const dropIndicatorRef = useRef14(null);
+  const dropTargetRef = useRef14(null);
+  const dropZoneRef = useRef14("");
+  const isScrollable = useRef14(false);
+  const dragPosRef = useRef14(-1);
+  const measuredDropTargets = useRef14([]);
+  const overflowMenuShowingRef = useRef14(false);
+  const [showOverflow, setShowOverflow] = useState8(false);
+  const [dropIndicator, setDropIndicator] = useState8();
+  const { clearSpacer, positionDropIndicator } = useDropIndicator();
+  const draggedItemRef = useRef14();
+  const fullItemQuery = `:is(${itemQuery}${NOT_OVERFLOWED2}${NOT_HIDDEN2},[data-overflow-indicator])`;
+  const indexOf = (dropTarget) => measuredDropTargets.current.findIndex((d) => d.id === dropTarget.id);
+  const reposition = (dropTarget, distance, indexShift) => {
+    dropTarget.start += distance;
+    dropTarget.mid += distance;
+    dropTarget.end += distance;
+    if (typeof indexShift === "number") {
+      dropTarget.currentIndex += indexShift;
+    }
+  };
+  const rangeRef = useRef14();
+  rangeRef.current = viewportRange;
+  const handleScrollStart = useCallback21(() => {
+    clearSpacer();
+  }, [clearSpacer]);
+  const handleScrollStop = useCallback21(
+    (scrollDirection, _scrollPos, atEnd) => {
+      const { current: container } = containerRef;
+      const { current: draggedItem } = draggedItemRef;
+      if (container && draggedItem) {
+        measuredDropTargets.current = measureDropTargets(
+          container,
+          orientation,
+          fullItemQuery,
+          rangeRef.current
+        );
+        const { size } = draggedItem;
+        const dragPos = dragPosRef.current;
+        const midPos = dragPos + size / 2;
+        const { current: dropTargets } = measuredDropTargets;
+        const nextDropTarget = getNextDropTarget(dropTargets, midPos, "fwd");
+        if (nextDropTarget) {
+          if (atEnd && scrollDirection === "fwd") {
+            positionDropIndicator(dropTargets[dropTargets.length - 1], "start");
+          } else {
+            positionDropIndicator(nextDropTarget, "start");
+          }
+        }
+      }
+    },
+    [
+      containerRef,
+      positionDropIndicator,
+      fullItemQuery,
+      orientation
+      // setVizData,
+    ]
+  );
+  const beginDrag = useCallback21(
+    (evt) => {
+      const evtTarget = evt.target;
+      const dragElement = evtTarget.closest(itemQuery);
+      if (dragElement.ariaSelected && Array.isArray(selected) && selected.length > 1) {
+        console.log("its a selected element, and we have a multi select");
+      }
+      const { current: container } = containerRef;
+      if (container && dragElement) {
+        const { SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);
+        const { id: draggedItemId } = dragElement;
+        const { [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } = container;
+        isScrollable.current = scrollSize > clientSize;
+        const dropTargets = measuredDropTargets.current = measureDropTargets(
+          container,
+          orientation,
+          fullItemQuery,
+          viewportRange
+        );
+        const draggedItem = getItemById(dropTargets, draggedItemId);
+        if (draggedItem && container) {
+          const targetIndex = indexOf(draggedItem);
+          removeDraggedItem(dropTargets, targetIndex);
+          draggedItemRef.current = draggedItem;
+          const { current: range } = rangeRef;
+          if (range == null ? void 0 : range.atEnd) {
+            for (let i = 0; i < dropTargets.length; i++) {
+              reposition(dropTargets[i], draggedItem.size);
+            }
+          }
+          for (let i = targetIndex; i < dropTargets.length; i++) {
+            reposition(dropTargets[i], -draggedItem.size, -1);
+          }
+          const [dropTarget, dropZone2] = draggedItem.isLast ? [dropTargets[dropTargets.length - 1], "end"] : [dropTargets[targetIndex], "start"];
+          dropTargetRef.current = dropTarget;
+          dropZoneRef.current = dropZone2;
+          const dropIndicatorPosition = positionDropIndicator(
+            dropTarget,
+            dropZone2
+          );
+          const { top, left, width } = dropIndicatorPosition.getBoundingClientRect();
+          const dropIndicatorRect = {
+            top: draggedItem.isLast ? (range == null ? void 0 : range.atEnd) && !range.atStart ? top + draggedItem.size - 2 : top - 2 : top - draggedItem.size - 2,
+            left,
+            width,
+            height: 2
+          };
+          setDropIndicator(
+            /* @__PURE__ */ jsx18(
+              Draggable2,
+              {
+                wrapperClassName: "dropIndicatorContainer",
+                style: dropIndicatorRect,
+                ref: dropIndicatorRef,
+                element: createDropIndicator()
+              }
+            )
+          );
+        }
+      }
+    },
+    [
+      itemQuery,
+      selected,
+      containerRef,
+      orientation,
+      fullItemQuery,
+      viewportRange,
+      // setVizData,
+      positionDropIndicator
+    ]
+  );
+  const drag = useCallback21(
+    (dragPos, mouseMoveDirection) => {
+      const { current: currentDropTarget } = dropTargetRef;
+      const { current: draggedItem } = draggedItemRef;
+      if (draggedItem) {
+        if (draggableRef.current && containerRef.current) {
+          const START = orientation === "horizontal" ? "left" : "top";
+          dragPosRef.current = dragPos;
+          const { current: dropTargets } = measuredDropTargets;
+          const nextDropTarget = getNextDropTarget(
+            dropTargets,
+            dragPos,
+            mouseMoveDirection
+          );
+          if (nextDropTarget && nextDropTarget.index !== (currentDropTarget == null ? void 0 : currentDropTarget.index)) {
+            if (nextDropTarget.isOverflowIndicator) {
+              setShowOverflow(overflowMenuShowingRef.current = true);
+            } else if (dropIndicatorRef.current) {
+              const targetIndex = indexOf(nextDropTarget);
+              if (targetIndex === dropTargets.length - 1) {
+                const dropTarget = dropTargets[dropTargets.length - 1];
+                const dropIndicatorPosition = positionDropIndicator(
+                  dropTarget,
+                  "start"
+                );
+                const dropIndicatorRect = dropIndicatorPosition.getBoundingClientRect();
+                dropIndicatorRef.current.style[START] = `${dropIndicatorRect.top}px`;
+              } else {
+                const dropIndicatorPosition = positionDropIndicator(
+                  nextDropTarget,
+                  "start"
+                );
+                const dropIndicatorRect = dropIndicatorPosition.getBoundingClientRect();
+                dropIndicatorRef.current.style[START] = `${dropIndicatorRect.top}px`;
+              }
+              setShowOverflow(overflowMenuShowingRef.current = false);
+            }
+            dropTargetRef.current = nextDropTarget;
+            dragDirectionRef.current = mouseMoveDirection;
+          }
+        }
+      }
+    },
+    [draggableRef, containerRef, orientation, positionDropIndicator]
+  );
+  const drop = useCallback21(() => {
+    clearSpacer();
+    const { current: draggedItem } = draggedItemRef;
+    const { current: dropTarget } = dropTargetRef;
+    const { current: dropZone2 } = dropZoneRef;
+    const { current: range } = rangeRef;
+    if (draggedItem && range && dropTarget) {
+      const { index: fromIndex } = draggedItem;
+      const dropBefore = dropZone2 === "start";
+      const {
+        index: originalDropTargetIndex,
+        currentIndex: currentDropTargetIndex
+      } = dropTarget;
+      dropTargetRef.current = null;
+      dragDirectionRef.current = void 0;
+      if (overflowMenuShowingRef.current) {
+        onDrop(fromIndex, -1);
+      } else {
+        if (fromIndex < originalDropTargetIndex) {
+          onDrop(
+            fromIndex,
+            dropBefore ? currentDropTargetIndex : currentDropTargetIndex + 1
+          );
+        } else {
+          onDrop(
+            fromIndex,
+            dropBefore ? originalDropTargetIndex : originalDropTargetIndex + 1
+          );
+        }
+      }
+      setDropIndicator(void 0);
+    }
+    setShowOverflow(false);
+  }, [clearSpacer, onDrop]);
+  return {
+    beginDrag,
+    drag,
+    drop,
+    dropIndicator,
+    handleScrollStart,
+    handleScrollStop,
+    revealOverflowedItems: showOverflow
+  };
+};
+
+// ../vuu-ui-controls/src/drag-drop/useDragDropNext.tsx
+import {
+  useCallback as useCallback23,
+  useLayoutEffect as useLayoutEffect4,
+  useRef as useRef16,
+  useState as useState9
+} from "react";
+
+// ../vuu-ui-controls/src/drag-drop/useAutoScroll.ts
+import { useCallback as useCallback22, useRef as useRef15 } from "react";
+var useAutoScroll = ({
+  containerRef,
+  onScrollingStopped,
+  orientation = "vertical"
+}) => {
+  const scrollTimer = useRef15(null);
+  const isScrolling = useRef15(false);
+  const scrollPosRef = useRef15(0);
+  const lastScrollDirectionRef = useRef15("fwd");
+  const stopScrolling = useCallback22(
+    (atEnd = false) => {
+      console.log("[useAutoScroll] stopScrolling");
+      if (scrollTimer.current !== null) {
+        clearTimeout(scrollTimer.current);
+        scrollTimer.current = null;
+      }
+      isScrolling.current = false;
+      onScrollingStopped == null ? void 0 : onScrollingStopped(
+        lastScrollDirectionRef.current,
+        scrollPosRef.current,
+        atEnd
+      );
+    },
+    [onScrollingStopped]
+  );
+  const startScrolling = useCallback22(
+    (direction, scrollRate, scrollUnit = 30) => {
+      const { current: container } = containerRef;
+      if (container) {
+        const { SCROLL_POS, SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);
+        const {
+          [SCROLL_POS]: scrollPos,
+          [SCROLL_SIZE]: scrollSize,
+          [CLIENT_SIZE]: clientSize
+        } = container;
+        const maxScroll = direction === "fwd" ? scrollSize - clientSize - scrollPos : scrollPos;
+        const nextScroll = Math.min(maxScroll, scrollUnit);
+        if (direction === "fwd") {
+          lastScrollDirectionRef.current = "fwd";
+          container[SCROLL_POS] = scrollPosRef.current = scrollPos + nextScroll;
+        } else {
+          lastScrollDirectionRef.current = "bwd";
+          container[SCROLL_POS] = scrollPosRef.current = scrollPos - nextScroll;
+        }
+        if (nextScroll === maxScroll) {
+          stopScrolling(true);
+        } else {
+          isScrolling.current = true;
+          scrollTimer.current = window.setTimeout(() => {
+            startScrolling(direction, scrollRate, scrollUnit);
+          }, 100);
+        }
+      }
+    },
+    [containerRef, orientation, stopScrolling]
+  );
+  return {
+    isScrolling,
+    startScrolling,
+    stopScrolling
+  };
+};
+
+// ../vuu-ui-controls/src/drag-drop/useDragDropNext.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var NULL_DRAG_DROP_RESULT = {
+  beginDrag: () => void 0,
+  drag: () => void 0,
+  draggableRef: { current: null },
+  drop: () => void 0,
+  isDragging: false,
+  isScrolling: false,
+  handleScrollStart: () => void 0,
+  handleScrollStop: () => void 0,
+  revealOverflowedItems: false
+};
+var UNBOUNDED = {
+  start: 0,
+  end: 1e3,
+  contraStart: 0,
+  contraEnd: 1e3
+};
+var noDragDrop = () => NULL_DRAG_DROP_RESULT;
+var dragThreshold = 3;
+var getDraggableElement = (el, query) => el.closest(query);
+var isOverflowElement = (element) => element.dataset.index === "overflow" && element.parentElement !== null && element.parentElement.classList.contains("overflowed");
+var getLastElement = (container, itemQuery) => {
+  const fullItemQuery = `:is(${itemQuery}${NOT_OVERFLOWED},.vuuOverflowContainer-OverflowIndicator)`;
+  const childElements = Array.from(container.querySelectorAll(fullItemQuery));
+  const lastElement = childElements.pop();
+  return [lastElement, isOverflowElement(lastElement)];
+};
+var useDragDropNext = ({
+  allowDragDrop,
+  containerRef,
+  draggableClassName,
+  itemQuery = "*",
+  onDragStart,
+  onDrop,
+  onDropSettle,
+  orientation,
+  ...dragDropProps
+}) => {
+  const dragBoundaries = useRef16({
+    start: 0,
+    end: 0,
+    contraStart: 0,
+    contraEnd: 0
+  });
+  const [draggableStatus, setDraggableStatus] = useState9({
+    draggable: void 0,
+    draggedItemIndex: -1,
+    isDragging: false
+  });
+  const draggableRef = useRef16(null);
+  const dragElementRef = useRef16();
+  const mouseDownTimer = useRef16(null);
+  const isScrollableRef = useRef16(false);
+  const mouseOffsetRef = useRef16({ x: 0, y: 0 });
+  const mousePosRef = useRef16({ x: 0, y: 0 });
+  const startPosRef = useRef16({ x: 0, y: 0 });
+  const settlingItemRef = useRef16(null);
+  const dropPosRef = useRef16(-1);
+  const dropIndexRef = useRef16(-1);
+  const handleScrollStopRef = useRef16();
+  const { isDragSource, isDropTarget, register } = useDragDropProvider(
+    dragDropProps.id
+  );
+  if (dragDropProps.id && (isDragSource || isDropTarget)) {
+    register(dragDropProps.id);
+  }
+  const terminateDrag = useCallback23(() => {
+    var _a;
+    const { current: toIndex } = dropIndexRef;
+    const droppedItem = (_a = containerRef.current) == null ? void 0 : _a.querySelector(
+      `${itemQuery}[data-index="${toIndex}"]`
+    );
+    if (droppedItem) {
+      droppedItem.classList.remove("vuuDropTarget-settling");
+    }
+    dropIndexRef.current = -1;
+    onDropSettle == null ? void 0 : onDropSettle(toIndex);
+    setDraggableStatus((status) => ({
+      ...status,
+      draggable: void 0
+    }));
+  }, [containerRef, itemQuery, onDropSettle]);
+  const getScrollDirection = useCallback23(
+    (mousePos) => {
+      if (containerRef.current) {
+        const { POS, SCROLL_POS, SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);
+        const {
+          [SCROLL_POS]: scrollPos,
+          [SCROLL_SIZE]: scrollSize,
+          [CLIENT_SIZE]: clientSize
+        } = containerRef.current;
+        const maxScroll = scrollSize - clientSize;
+        const canScrollFwd = scrollPos < maxScroll;
+        const viewportEnd = dragBoundaries.current.end;
+        const bwd = scrollPos > 0 && mousePos - mouseOffsetRef.current[POS] <= dragBoundaries.current.start;
+        const fwd = canScrollFwd && mousePos - mouseOffsetRef.current[POS] >= viewportEnd;
+        return bwd ? "bwd" : fwd ? "fwd" : "";
+      }
+    },
+    [containerRef, orientation]
+  );
+  const useDragDropHook = allowDragDrop === true || allowDragDrop === "natural-movement" ? useDragDropNaturalMovement : allowDragDrop === "drop-indicator" ? useDragDropIndicator : noDragDrop;
+  const onScrollingStopped = useCallback23(
+    (scrollDirection, scrollPos, atEnd) => {
+      var _a;
+      (_a = handleScrollStopRef.current) == null ? void 0 : _a.call(handleScrollStopRef, scrollDirection, scrollPos, atEnd);
+    },
+    []
+  );
+  const { isScrolling, startScrolling, stopScrolling } = useAutoScroll({
+    containerRef,
+    onScrollingStopped,
+    orientation
+  });
+  const handleDrop = useCallback23(
+    (fromIndex, toIndex) => {
+      dropPosRef.current = toIndex;
+      onDrop == null ? void 0 : onDrop(fromIndex, toIndex);
+      dropIndexRef.current = toIndex;
+    },
+    [onDrop]
+  );
+  const {
+    beginDrag,
+    drag,
+    drop,
+    handleScrollStart,
+    handleScrollStop,
+    ...dragResult
+  } = useDragDropHook({
+    ...dragDropProps,
+    containerRef,
+    draggableRef,
+    isDragSource,
+    isDropTarget,
+    itemQuery,
+    onDrop: handleDrop,
+    orientation
+  });
+  handleScrollStopRef.current = handleScrollStop;
+  const dragMouseMoveHandler = useCallback23(
+    (evt) => {
+      const { CLIENT_POS, CONTRA_CLIENT_POS, CONTRA_POS, POS } = dimensions(orientation);
+      const { clientX, clientY } = evt;
+      const { [CLIENT_POS]: clientPos, [CONTRA_CLIENT_POS]: clientContraPos } = evt;
+      const lastClientPos = mousePosRef.current[POS];
+      const lastClientContraPos = mousePosRef.current[CONTRA_POS];
+      const dragDistance = Math.abs(lastClientPos - clientPos);
+      const dragOutDistance = isDragSource ? Math.abs(lastClientContraPos - clientContraPos) : 0;
+      if (dragOutDistance - dragDistance > 5) {
+        dragBoundaries.current = UNBOUNDED;
+      }
+      mousePosRef.current.x = clientX;
+      mousePosRef.current.y = clientY;
+      if (dragBoundaries.current === UNBOUNDED && draggableRef.current) {
+        const dragPosX = mousePosRef.current.x - mouseOffsetRef.current.x;
+        const dragPosY = mousePosRef.current.y - mouseOffsetRef.current.y;
+        draggableRef.current.style.top = `${dragPosY}px`;
+        draggableRef.current.style.left = `${dragPosX}px`;
+      } else if (dragDistance > 0 && draggableRef.current) {
+        const mouseMoveDirection = lastClientPos < clientPos ? "fwd" : "bwd";
+        const scrollDirection = getScrollDirection(clientPos);
+        const dragPos = mousePosRef.current[POS] - mouseOffsetRef.current[POS];
+        if (scrollDirection && isScrollableRef.current && !isScrolling.current) {
+          handleScrollStart();
+          startScrolling(scrollDirection, 1);
+        } else if (!scrollDirection && isScrolling.current) {
+          stopScrolling();
+        }
+        if (!isScrolling.current) {
+          const renderDragPos = Math.round(
+            Math.max(
+              dragBoundaries.current.start,
+              Math.min(dragBoundaries.current.end, dragPos)
+            )
+          );
+          const START = orientation === "horizontal" ? "left" : "top";
+          draggableRef.current.style[START] = `${renderDragPos}px`;
+          drag(renderDragPos, mouseMoveDirection);
+        }
+      }
+    },
+    [
+      drag,
+      draggableRef,
+      getScrollDirection,
+      handleScrollStart,
+      isDragSource,
+      isScrolling,
+      orientation,
+      startScrolling,
+      stopScrolling
+    ]
+  );
+  const dragMouseUpHandler = useCallback23(() => {
+    document.removeEventListener("mousemove", dragMouseMoveHandler, false);
+    document.removeEventListener("mouseup", dragMouseUpHandler, false);
+    settlingItemRef.current = draggableRef.current;
+    drop();
+    setDraggableStatus((status) => ({
+      ...status,
+      draggedItemIndex: -1,
+      isDragging: false
+    }));
+    dragElementRef.current = void 0;
+  }, [dragMouseMoveHandler, draggableRef, drop]);
+  const dragStart = useCallback23(
+    (evt) => {
+      const { clientX, clientY, target } = evt;
+      const dragElement = getDraggableElement(target, itemQuery);
+      const { current: container } = containerRef;
+      if (container && dragElement) {
+        const {
+          CONTRA,
+          CONTRA_END,
+          DIMENSION,
+          END,
+          SCROLL_SIZE,
+          CLIENT_SIZE,
+          START
+        } = dimensions(orientation);
+        dragElementRef.current = dragElement;
+        const { [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } = container;
+        isScrollableRef.current = scrollSize > clientSize;
+        const [lastElement, lastItemIsOverflowIndicator] = getLastElement(
+          container,
+          itemQuery
+        );
+        const containerRect = container.getBoundingClientRect();
+        const draggableRect = dragElement.getBoundingClientRect();
+        const draggableSize = draggableRect[DIMENSION];
+        const { [START]: lastItemStart, [END]: lastItemEnd } = lastElement.getBoundingClientRect();
+        mouseOffsetRef.current.x = clientX - draggableRect.left;
+        mouseOffsetRef.current.y = clientY - draggableRect.top;
+        dragBoundaries.current.start = containerRect[START];
+        dragBoundaries.current.end = lastItemIsOverflowIndicator ? Math.max(lastItemStart, containerRect.right - draggableSize) : isScrollableRef.current ? containerRect[START] + containerRect[DIMENSION] - draggableSize : lastItemEnd - draggableSize;
+        dragBoundaries.current.contraStart = containerRect[CONTRA];
+        dragBoundaries.current.contraEnd = containerRect[CONTRA_END];
+        beginDrag(evt);
+        const {
+          dataset: { index = "-1" }
+        } = dragElement;
+        setDraggableStatus({
+          isDragging: true,
+          draggable: /* @__PURE__ */ jsx19(
+            Draggable2,
+            {
+              element: cloneElement4(dragElement),
+              onTransitionEnd: terminateDrag,
+              ref: draggableRef,
+              style: constrainRect(draggableRect, containerRect),
+              wrapperClassName: draggableClassName
+            }
+          ),
+          draggedItemIndex: parseInt(index)
+        });
+        onDragStart == null ? void 0 : onDragStart();
+        document.addEventListener("mousemove", dragMouseMoveHandler, false);
+        document.addEventListener("mouseup", dragMouseUpHandler, false);
+      }
+    },
+    [
+      beginDrag,
+      containerRef,
+      dragMouseMoveHandler,
+      dragMouseUpHandler,
+      draggableClassName,
+      draggableRef,
+      itemQuery,
+      onDragStart,
+      orientation,
+      terminateDrag
+    ]
+  );
+  const preDragMouseMoveHandler = useCallback23(
+    (evt) => {
+      const { CLIENT_POS, POS } = dimensions(orientation);
+      const { [CLIENT_POS]: clientPos } = evt;
+      const mouseMoveDistance = Math.abs(clientPos - startPosRef.current[POS]);
+      if (mouseMoveDistance > dragThreshold && containerRef.current) {
+        if (mouseDownTimer.current) {
+          window.clearTimeout(mouseDownTimer.current);
+          mouseDownTimer.current = null;
+        }
+        document.removeEventListener("mousemove", preDragMouseMoveHandler);
+        document.removeEventListener("mouseup", preDragMouseUpHandler, false);
+        dragStart(evt);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [containerRef, beginDrag, orientation]
+  );
+  const preDragMouseUpHandler = useCallback23(() => {
+    if (mouseDownTimer.current) {
+      window.clearTimeout(mouseDownTimer.current);
+      mouseDownTimer.current = null;
+    }
+    document.removeEventListener("mousemove", preDragMouseMoveHandler, false);
+    document.removeEventListener("mouseup", preDragMouseUpHandler, false);
+  }, [preDragMouseMoveHandler]);
+  const mouseDownHandler = useCallback23(
+    (evt) => {
+      console.log(`useDragDropNext onMouseDown`);
+      const { current: container } = containerRef;
+      if (container && !evt.defaultPrevented) {
+        const { clientX, clientY } = evt;
+        mousePosRef.current.x = startPosRef.current.x = clientX;
+        mousePosRef.current.y = startPosRef.current.y = clientY;
+        document.addEventListener("mousemove", preDragMouseMoveHandler, false);
+        document.addEventListener("mouseup", preDragMouseUpHandler, false);
+        evt.persist();
+        mouseDownTimer.current = window.setTimeout(() => {
+          document.removeEventListener(
+            "mousemove",
+            preDragMouseMoveHandler,
+            false
+          );
+          document.removeEventListener("mouseup", preDragMouseUpHandler, false);
+          dragStart(evt.nativeEvent);
+        }, 500);
+      }
+    },
+    [containerRef, dragStart, preDragMouseMoveHandler, preDragMouseUpHandler]
+  );
+  const { current: settlingItem } = settlingItemRef;
+  useLayoutEffect4(() => {
+    if (settlingItem && containerRef.current) {
+      const dropPos = dropPosRef.current;
+      const droppedItem = containerRef.current.querySelector(
+        `${itemQuery}[data-index="${dropPos}"]`
+      );
+      if (droppedItem) {
+        droppedItem.classList.add("vuuDropTarget-settling");
+        requestAnimationFrame(() => {
+          const { top: targetTop, left: targetLeft } = droppedItem.getBoundingClientRect();
+          const { top: currentTop, left: currentLeft } = settlingItem.getBoundingClientRect();
+          if (currentLeft !== targetLeft || currentTop !== targetTop) {
+            settlingItem.classList.add("vuuDraggable-settling");
+            settlingItem.style.top = `${targetTop}px`;
+            settlingItem.style.left = `${targetLeft}px`;
+          } else {
+            terminateDrag();
+          }
+        });
+      } else {
+        console.log(`dont have the dropped item (at ${dropPos})`);
+      }
+      settlingItemRef.current = null;
+    }
+  }, [containerRef, itemQuery, settlingItem, terminateDrag]);
+  return {
+    ...dragResult,
+    ...draggableStatus,
+    isScrolling,
+    onMouseDown: allowDragDrop ? mouseDownHandler : void 0
+  };
+};
+
+// ../vuu-ui-controls/src/tabstrip/TabMenuOptions.ts
+var isTabMenuOptions = (options) => typeof options === "object" && options !== null && "tabIndex" in options && typeof options.tabIndex === "number";
+var closeCommand = (options) => ({
+  label: `Close`,
+  location: "tab",
+  action: `close-tab`,
+  options
+});
+var renameCommand = (options) => ({
+  label: `Rename`,
+  location: "tab",
+  action: `rename-tab`,
+  options
+});
+
+// ../vuu-ui-controls/src/tabstrip/tabstrip-dom-utils.ts
+var getElementIndex = (el) => {
+  if (el) {
+    const index = parseInt(el.dataset.index || "");
+    if (!isNaN(index)) {
+      return index;
+    }
+  }
+  return -1;
+};
+var getIndexOfItem = (container, query) => {
+  if (container) {
+    const targetTab = container.querySelector(
+      `[data-index]:has(${query})`
+    );
+    return getElementIndex(targetTab);
+  }
+  return -1;
+};
+var getIndexOfSelectedTab = (container) => getIndexOfItem(container, '[aria-selected="true"]');
+var getIndexOfEditedItem = (container) => getIndexOfItem(container, ".vuuEditableLabel-editing");
+
+// ../vuu-ui-controls/src/tabstrip/useAnimatedSelectionThumb.ts
+import { useCallback as useCallback24, useMemo as useMemo11, useRef as useRef17 } from "react";
+var useAnimatedSelectionThumb = (containerRef, activeTabIndex) => {
+  const animationSuspendedRef = useRef17(false);
+  const suspendAnimation = useCallback24(() => {
+    animationSuspendedRef.current = true;
+  }, []);
+  const resumeAnimation = useCallback24(() => {
+    animationSuspendedRef.current = false;
+  }, []);
+  const onTransitionEnd = useCallback24(() => {
+    var _a, _b;
+    (_a = containerRef.current) == null ? void 0 : _a.style.setProperty("--tab-thumb-transition", "none");
+    (_b = containerRef.current) == null ? void 0 : _b.removeEventListener("transitionend", onTransitionEnd);
+  }, [containerRef]);
+  const lastSelectedRef = useRef17(-1);
+  return useMemo11(() => {
+    var _a, _b;
+    let offset = 0;
+    let width = 0;
+    if (lastSelectedRef.current !== -1) {
+      const oldSelected = (_a = containerRef.current) == null ? void 0 : _a.querySelector(".vuuTab-selected");
+      const newSelected = (_b = containerRef.current) == null ? void 0 : _b.querySelector(
+        `[data-index="${activeTabIndex}"] .vuuTab`
+      );
+      if (oldSelected && newSelected && !animationSuspendedRef.current) {
+        const { left: oldLeft, width: oldWidth } = oldSelected.getBoundingClientRect();
+        const { left: newLeft } = newSelected.getBoundingClientRect();
+        offset = oldLeft - newLeft;
+        width = oldWidth;
+        const duration = Math.abs(
+          offset / 1100
+          /* this is our speed */
+        );
+        requestAnimationFrame(() => {
+          var _a2, _b2, _c, _d;
+          (_a2 = containerRef.current) == null ? void 0 : _a2.style.setProperty("--tab-thumb-offset", "0px");
+          (_b2 = containerRef.current) == null ? void 0 : _b2.style.setProperty("--tab-thumb-width", "100%");
+          (_c = containerRef.current) == null ? void 0 : _c.style.setProperty(
+            "--tab-thumb-transition",
+            `all ${duration}s ease`
+          );
+          (_d = containerRef.current) == null ? void 0 : _d.addEventListener(
+            "transitionend",
+            onTransitionEnd
+          );
+        });
+      }
+    }
+    lastSelectedRef.current = activeTabIndex;
+    if (animationSuspendedRef.current) {
+      return {
+        containerStyle: {
+          "--tab-thumb-offset": "0px",
+          "--tab-thumb-width": "100%"
+        },
+        resumeAnimation,
+        suspendAnimation
+      };
+    } else {
+      return {
+        containerStyle: {
+          "--tab-thumb-offset": `${offset}px`,
+          "--tab-thumb-width": width ? `${width}px` : void 0
+        },
+        resumeAnimation,
+        suspendAnimation
+      };
+    }
+  }, [
+    activeTabIndex,
+    resumeAnimation,
+    suspendAnimation,
+    containerRef,
+    onTransitionEnd
+  ]);
+};
+
+// ../vuu-ui-controls/src/tabstrip/useKeyboardNavigation.ts
+import { useControlled as useControlled3 } from "@salt-ds/core";
+import { getFocusableElement } from "@vuu-ui/vuu-utils";
+import {
+  useCallback as useCallback25,
+  useRef as useRef18,
+  useState as useState10
+} from "react";
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowLeft,
+  ArrowRight,
+  Home,
+  End
+} from "@vuu-ui/vuu-utils";
+var navigation = {
+  horizontal: {
+    [Home]: "start",
+    [End]: "end",
+    [ArrowLeft]: "bwd",
+    [ArrowRight]: "fwd"
+  },
+  vertical: {
+    [Home]: "start",
+    [End]: "end",
+    [ArrowUp]: "bwd",
+    [ArrowDown]: "fwd"
+  }
+};
+var isNavigationKey = (key, orientation = "horizontal") => navigation[orientation][key] !== void 0;
+var isMenuActivationKey = (key) => key === ArrowDown;
+function nextItemIdx(count, direction, idx) {
+  if (direction === "start") {
+    return 0;
+  } else if (direction === "end") {
+    return count - 1;
+  } else if (direction === "bwd") {
+    if (idx > 0) {
+      return idx - 1;
+    } else {
+      return idx;
+    }
+  } else {
+    if (idx === null) {
+      return 0;
+    } else if (idx === count - 1) {
+      return idx;
+    } else {
+      return idx + 1;
+    }
+  }
+}
+var isNonWrappedElement = (element) => element !== null && !element.classList.contains("wrapped");
+var getElementByPosition = (container, index) => container ? container.querySelector(`[data-index="${index}"]`) : null;
+var useKeyboardNavigation = ({
+  containerRef,
+  defaultHighlightedIdx = -1,
+  highlightedIdx: highlightedIdxProp,
+  keyBoardActivation,
+  orientation,
+  selectedIndex: selectedTabIndex = 0
+}) => {
+  const manualActivation = keyBoardActivation === "manual";
+  const mouseClickPending = useRef18(false);
+  const focusedRef = useRef18(-1);
+  const [hasFocus, setHasFocus] = useState10(false);
+  const [, forceRefresh] = useState10({});
+  const [highlightedIdx, _setHighlightedIdx] = useControlled3({
+    controlled: highlightedIdxProp,
+    default: defaultHighlightedIdx,
+    name: "UseKeyboardNavigation"
+  });
+  const setHighlightedIdx = useCallback25(
+    (value) => {
+      _setHighlightedIdx(focusedRef.current = value);
+    },
+    [_setHighlightedIdx]
+  );
+  const keyboardNavigation = useRef18(false);
+  const focusTab = useCallback25(
+    (tabIndex, immediateFocus = false, withKeyboard, delay = 70) => {
+      setHighlightedIdx(tabIndex);
+      if (withKeyboard === true && !keyboardNavigation.current) {
+        keyboardNavigation.current = true;
+      }
+      const setFocus = () => {
+        const element = getElementByPosition(containerRef.current, tabIndex);
+        if (element) {
+          const focussableElement = getFocusableElement(element);
+          focussableElement == null ? void 0 : focussableElement.focus();
+        }
+      };
+      if (immediateFocus) {
+        setFocus();
+      } else {
+        setTimeout(setFocus, delay);
+      }
+    },
+    [containerRef, setHighlightedIdx]
+  );
+  const onFocus = (e) => {
+    console.log("ONFOCUS");
+    if (focusedRef.current === -1) {
+      if (e.target.tabIndex === -1) {
+      } else {
+        const index = getIndexOfEditedItem(containerRef.current);
+        if (index !== -1) {
+          requestAnimationFrame(() => {
+            setHighlightedIdx(index);
+          });
+        } else {
+          setTimeout(() => {
+            if (focusedRef.current === -1 && selectedTabIndex !== null) {
+              setHighlightedIdx(selectedTabIndex);
+            }
+          }, 200);
+        }
+      }
+    }
+  };
+  const getIndexCount = useCallback25(
+    () => {
+      var _a, _b;
+      return (_b = (_a = containerRef.current) == null ? void 0 : _a.querySelectorAll(`[data-index]`).length) != null ? _b : 0;
+    },
+    [containerRef]
+  );
+  const nextFocusableItemIdx = useCallback25(
+    (direction = "fwd", idx) => {
+      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;
+      while ((nextDirection === "fwd" && nextIdx < indexCount || nextDirection === "bwd" && nextIdx > 0) && !isNonWrappedElement(
+        getElementByPosition(containerRef.current, nextIdx)
+      )) {
+        const newIdx = nextItemIdx(indexCount, nextDirection, nextIdx);
+        if (newIdx === nextIdx) {
+          break;
+        } else {
+          nextIdx = newIdx;
+        }
+      }
+      return nextIdx;
+    },
+    [containerRef, getIndexCount]
+  );
+  const navigateChildItems = useCallback25(
+    (e, forceFocusVisible = false) => {
+      const direction = navigation[orientation][e.key];
+      const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
+      if (nextIdx !== highlightedIdx) {
+        const immediateFocus = true;
+        if (manualActivation) {
+          focusTab(nextIdx, immediateFocus);
+        } else {
+        }
+      } else if (forceFocusVisible) {
+        forceRefresh({});
+      }
+    },
+    [
+      highlightedIdx,
+      manualActivation,
+      nextFocusableItemIdx,
+      focusTab,
+      orientation
+    ]
+  );
+  const highlightedTabHasMenu = useCallback25(() => {
+    const el = getElementByPosition(containerRef.current, highlightedIdx);
+    if (el) {
+      return el.querySelector(".vuuPopupMenu") != null;
+    }
+    return false;
+  }, [containerRef, highlightedIdx]);
+  const activateTabMenu = useCallback25(() => {
+    const el = getElementByPosition(containerRef.current, highlightedIdx);
+    const menuEl = el == null ? void 0 : el.querySelector(".vuuPopupMenu");
+    if (menuEl) {
+      const evt = new MouseEvent("click", {
+        view: window,
+        bubbles: true,
+        cancelable: true
+      });
+      menuEl.dispatchEvent(evt);
+    }
+    return false;
+  }, [containerRef, highlightedIdx]);
+  const handleKeyDown = useCallback25(
+    (e) => {
+      if (getIndexCount() > 0 && isNavigationKey(e.key, orientation)) {
+        e.preventDefault();
+        if (keyboardNavigation.current) {
+          navigateChildItems(e);
+        } else {
+          keyboardNavigation.current = true;
+          navigateChildItems(e, true);
+        }
+      } else if (isMenuActivationKey(e.key) && highlightedTabHasMenu()) {
+        activateTabMenu();
+      }
+    },
+    [
+      activateTabMenu,
+      getIndexCount,
+      highlightedTabHasMenu,
+      navigateChildItems,
+      orientation
+    ]
+  );
+  const handleItemClick = (_, tabIndex) => {
+    setHighlightedIdx(tabIndex);
+  };
+  const handleFocus = useCallback25(() => {
+    if (!hasFocus) {
+      setHasFocus(true);
+      if (!mouseClickPending.current) {
+        keyboardNavigation.current = true;
+      } else {
+        mouseClickPending.current = false;
+      }
+    }
+  }, [hasFocus]);
+  const handleContainerMouseDown = useCallback25(() => {
+    if (!hasFocus) {
+      mouseClickPending.current = true;
+    }
+    keyboardNavigation.current = false;
+  }, [hasFocus]);
+  const containerProps = {
+    onBlur: (e) => {
+      const sourceTarget = e.target.closest(".vuuTabstrip");
+      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,
+    focusTab,
+    onClick: handleItemClick,
+    onFocus,
+    onKeyDown: handleKeyDown,
+    setHighlightedIdx
+  };
+};
+
+// ../vuu-ui-controls/src/tabstrip/useSelection.ts
+import { useControlled as useControlled4 } from "@salt-ds/core";
+import { useCallback as useCallback26 } from "react";
+var defaultSelectionKeys = ["Enter", " "];
+var isTabElement = (el) => el && el.matches('[class*="vuuTab "]');
+var useSelection = ({
+  defaultSelected,
+  highlightedIdx,
+  onSelectionChange,
+  selected: selectedProp
+}) => {
+  const [selected, setSelected, isControlled] = useControlled4({
+    controlled: selectedProp,
+    default: defaultSelected != null ? defaultSelected : 0,
+    name: "Tabstrip",
+    state: "value"
+  });
+  const isSelectionEvent = useCallback26(
+    (evt) => defaultSelectionKeys.includes(evt.key),
+    []
+  );
+  const selectItem = useCallback26(
+    (tabIndex) => {
+      setSelected(tabIndex);
+      onSelectionChange == null ? void 0 : onSelectionChange(tabIndex);
+    },
+    [onSelectionChange, setSelected]
+  );
+  const handleKeyDown = useCallback26(
+    (e) => {
+      const targetElement = e.target;
+      if (isSelectionEvent(e) && highlightedIdx !== selected && isTabElement(targetElement)) {
+        e.stopPropagation();
+        e.preventDefault();
+        selectItem(highlightedIdx);
+      }
+    },
+    [isSelectionEvent, highlightedIdx, selected, selectItem]
+  );
+  const onClick = useCallback26(
+    (e, tabIndex) => {
+      if (tabIndex !== selected) {
+        selectItem(tabIndex);
+      }
+    },
+    [selectItem, selected]
+  );
+  return {
+    activateTab: selectItem,
+    isControlled,
+    onClick,
+    onKeyDown: handleKeyDown,
+    selected
+  };
+};
+
+// ../vuu-ui-controls/src/tabstrip/useTabstrip.ts
+var editKeys = /* @__PURE__ */ new Set(["Enter", " "]);
+var isEditKey = (key) => editKeys.has(key);
+var getElementWithIndex = (container, index) => {
+  if (container) {
+    return container.querySelector(`[data-index="${index}"]`);
+  } else {
+    return null;
+  }
+};
+var useTabstrip = ({
+  activeTabIndex: activeTabIndexProp,
+  allowDragDrop,
+  animateSelectionThumb,
+  containerRef,
+  onActiveChange,
+  onAddTab,
+  onCloseTab,
+  onExitEditMode,
+  onMoveTab,
+  orientation,
+  keyBoardActivation
+}) => {
+  const lastSelection = useRef19(activeTabIndexProp);
+  const {
+    focusTab: keyboardHookFocusTab,
+    highlightedIdx,
+    onClick: keyboardHookHandleClick,
+    onKeyDown: keyboardHookHandleKeyDown,
+    setHighlightedIdx: keyboardHookSetHighlightedIndex,
+    ...keyboardHook
+  } = useKeyboardNavigation({
+    containerRef,
+    keyBoardActivation,
+    orientation,
+    selectedIndex: lastSelection.current
+  });
+  const {
+    activateTab: selectionHookActivateTab,
+    onClick: selectionHookHandleClick,
+    onKeyDown: selectionHookHandleKeyDown,
+    selected: selectionHookSelected
+  } = useSelection({
+    highlightedIdx,
+    onSelectionChange: onActiveChange,
+    selected: activeTabIndexProp
+  });
+  lastSelection.current = selectionHookSelected;
+  const { containerStyle, resumeAnimation, suspendAnimation } = useAnimatedSelectionThumb(
+    containerRef,
+    animateSelectionThumb ? selectionHookSelected : -1
+  );
+  const handleDrop = useCallback27(
+    (fromIndex, toIndex) => {
+      const { current: selected } = lastSelection;
+      console.log(
+        `useTabstrip handleDrop ${fromIndex} - ${toIndex}  ${selected}`
+      );
+      onMoveTab == null ? void 0 : onMoveTab(fromIndex, toIndex);
+      let nextSelectedTab = -1;
+      if (toIndex !== -1) {
+        if (selected === fromIndex) {
+          nextSelectedTab = toIndex;
+        } else if (fromIndex > selected && toIndex <= selected) {
+          nextSelectedTab = selected + 1;
+        } else if (fromIndex < selected && toIndex >= selected) {
+          nextSelectedTab = selected - 1;
+        }
+        if (nextSelectedTab !== -1) {
+          suspendAnimation();
+          selectionHookActivateTab(nextSelectedTab);
+          requestAnimationFrame(resumeAnimation);
+        }
+        keyboardHookFocusTab(toIndex, false, false, 350);
+      }
+    },
+    [
+      keyboardHookFocusTab,
+      onMoveTab,
+      resumeAnimation,
+      selectionHookActivateTab,
+      suspendAnimation
+    ]
+  );
+  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } = useDragDropNext({
+    allowDragDrop,
+    containerRef,
+    // this is for useDragDropNext
+    draggableClassName: `tabstrip-${orientation}`,
+    // extendedDropZone: overflowedItems.length > 0,
+    onDrop: handleDrop,
+    orientation: "horizontal",
+    itemQuery: ".vuuOverflowContainer-item"
+  });
+  const handleExitEditMode = useCallback27(
+    (originalValue, editedValue, allowDeactivation, tabIndex) => {
+      console.log(
+        `handleExitEditMode ${originalValue} ${editedValue} ${allowDeactivation} ${tabIndex}`
+      );
+      onExitEditMode == null ? void 0 : onExitEditMode(originalValue, editedValue, allowDeactivation, tabIndex);
+      if (!allowDeactivation) {
+        keyboardHookFocusTab(tabIndex, false, true);
+      }
+    },
+    [keyboardHookFocusTab, onExitEditMode]
+  );
+  const handleClick = useCallback27(
+    (evt, tabIndex) => {
+      keyboardHookHandleClick(evt, tabIndex);
+      selectionHookHandleClick(evt, tabIndex);
+    },
+    // [dragDropHook.isDragging, keyboardHook, selectionHook]
+    [keyboardHookHandleClick, selectionHookHandleClick]
+  );
+  const getEditableLabel = useCallback27(
+    (tabIndex = highlightedIdx) => {
+      const targetEl = getElementWithIndex(containerRef.current, tabIndex);
+      if (targetEl) {
+        return targetEl.querySelector(".vuuEditableLabel");
+      }
+    },
+    [containerRef, highlightedIdx]
+  );
+  const tabInEditMode = useCallback27(
+    (tabIndex = highlightedIdx) => {
+      const editableLabel = getEditableLabel(tabIndex);
+      if (editableLabel) {
+        return editableLabel.classList.contains("vuuEditableLabel-editing");
+      }
+      return false;
+    },
+    [getEditableLabel, highlightedIdx]
+  );
+  const editTab = useCallback27(
+    (tabIndex = highlightedIdx) => {
+      const editableLabelEl = getEditableLabel(tabIndex);
+      if (editableLabelEl) {
+        const evt = new MouseEvent("dblclick", {
+          view: window,
+          bubbles: true,
+          cancelable: true
+        });
+        editableLabelEl.dispatchEvent(evt);
+      }
+    },
+    [getEditableLabel, highlightedIdx]
+  );
+  const handleKeyDown = useCallback27(
+    (evt) => {
+      keyboardHookHandleKeyDown(evt);
+      if (!evt.defaultPrevented) {
+        selectionHookHandleKeyDown(evt);
+      }
+      if (!evt.defaultPrevented && isEditKey(evt.key)) {
+        editTab();
+      }
+    },
+    [editTab, keyboardHookHandleKeyDown, selectionHookHandleKeyDown]
+  );
+  const handleCloseTabFromMenu = useCallback27(
+    (tabIndex) => {
+      const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
+      const newActiveTabIndex = selectedTabIndex > tabIndex ? selectedTabIndex - 1 : selectedTabIndex === tabIndex ? 0 : selectedTabIndex;
+      suspendAnimation();
+      onCloseTab == null ? void 0 : onCloseTab(tabIndex, newActiveTabIndex);
+      setTimeout(() => {
+        resumeAnimation();
+      }, 200);
+      return true;
+    },
+    [containerRef, onCloseTab, resumeAnimation, suspendAnimation]
+  );
+  const handleRenameTabFromMenu = useCallback27(
+    (tabIndex) => {
+      editTab(tabIndex);
+      return true;
+    },
+    [editTab]
+  );
+  const handleTabMenuAction = useCallback27(
+    (action) => {
+      if (isTabMenuOptions(action.options)) {
+        switch (action.menuId) {
+          case "close-tab":
+            return handleCloseTabFromMenu(action.options.tabIndex);
+          case "rename-tab":
+            return handleRenameTabFromMenu(action.options.tabIndex);
+          default:
+            console.log(`tab menu action ${action.menuId}`);
+        }
+      }
+      return false;
+    },
+    [handleCloseTabFromMenu, handleRenameTabFromMenu]
+  );
+  const handleTabMenuClose = useCallback27(() => {
+    if (!tabInEditMode()) {
+      keyboardHookFocusTab(highlightedIdx);
+    } else {
+      keyboardHookSetHighlightedIndex(highlightedIdx);
+    }
+  }, [
+    highlightedIdx,
+    keyboardHookFocusTab,
+    keyboardHookSetHighlightedIndex,
+    tabInEditMode
+  ]);
+  const onSwitchWrappedItemIntoView = useCallback27(
+    (item) => {
+      const index = parseInt(item.index);
+      if (!isNaN(index)) {
+        selectionHookActivateTab(index);
+      }
+    },
+    [selectionHookActivateTab]
+  );
+  const navigationProps = {
+    onFocus: keyboardHook.onFocus,
+    onKeyDown: handleKeyDown
+  };
+  const handleAddTabClick = useCallback27(() => {
+    onAddTab == null ? void 0 : onAddTab();
+    requestAnimationFrame(() => {
+      const selectedTabIndex = getIndexOfSelectedTab(containerRef.current);
+      if (selectedTabIndex !== -1) {
+        keyboardHookFocusTab(selectedTabIndex);
+      }
+    });
+  }, [containerRef, keyboardHookFocusTab, onAddTab]);
+  const tabProps = {
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onExitEditMode: handleExitEditMode,
+    onMenuAction: handleTabMenuAction,
+    onMenuClose: handleTabMenuClose,
+    onMouseDown: dragDropHookHandleMouseDown
+  };
+  return {
+    activeTabIndex: selectionHookSelected,
+    containerStyle,
+    focusVisible: keyboardHook.focusVisible,
+    containerProps: {
+      ...keyboardHook.containerProps,
+      onSwitchWrappedItemIntoView
+    },
+    navigationProps,
+    onClickAddTab: handleAddTabClick,
+    tabProps,
+    ...dragDropHook
+  };
+};
+
+// ../vuu-ui-controls/src/tabstrip/Tabstrip.tsx
+import { Fragment, jsx as jsx20, jsxs as jsxs4 } from "react/jsx-runtime";
+import { createElement } from "react";
+var classBase8 = "vuuTabstrip";
+var Tabstrip = ({
+  activeTabIndex: activeTabIndexProp,
+  allowAddTab,
+  allowCloseTab,
+  allowDragDrop = false,
+  allowRenameTab = false,
+  animateSelectionThumb = false,
+  children,
+  className: classNameProp,
+  id: idProp,
+  keyBoardActivation = "manual",
+  location,
+  onActiveChange,
+  onAddTab,
+  onCloseTab,
+  onExitEditMode,
+  onMoveTab,
+  orientation = "horizontal",
+  showTabMenuButton,
+  style: styleProp,
+  ...htmlAttributes
+}) => {
+  const rootRef = useRef20(null);
+  const {
+    activeTabIndex,
+    focusVisible,
+    containerStyle,
+    draggedItemIndex,
+    onClickAddTab,
+    tabProps,
+    ...tabstripHook
+  } = useTabstrip({
+    activeTabIndex: activeTabIndexProp,
+    allowDragDrop,
+    animateSelectionThumb,
+    containerRef: rootRef,
+    keyBoardActivation,
+    onActiveChange,
+    onAddTab,
+    onCloseTab,
+    onExitEditMode,
+    onMoveTab,
+    orientation
+  });
+  const id = useId(idProp);
+  const className = cx9(classBase8, `${classBase8}-${orientation}`, classNameProp);
+  const style = styleProp || containerStyle ? {
+    ...styleProp,
+    ...containerStyle
+  } : void 0;
+  const tabs = useMemo12(
+    () => asReactElements(children).map((child, index) => {
+      const {
+        id: tabId = `${id}-tab-${index}`,
+        closeable = allowCloseTab,
+        editable = allowRenameTab,
+        showMenuButton = showTabMenuButton
+      } = child.props;
+      const selected = index === activeTabIndex;
+      return React16.cloneElement(child, {
+        ...tabProps,
+        ...tabstripHook.navigationProps,
+        closeable,
+        "data-overflow-priority": selected ? "1" : void 0,
+        dragging: draggedItemIndex === index,
+        editable,
+        focusVisible: focusVisible === index,
+        id: tabId,
+        index,
+        location,
+        selected,
+        showMenuButton,
+        tabIndex: selected ? 0 : -1
+      });
+    }).concat(
+      allowAddTab ? /* @__PURE__ */ createElement(
+        Button2,
+        {
+          ...tabstripHook.navigationProps,
+          "aria-label": "Create Tab",
+          className: `${classBase8}-addTabButton`,
+          "data-icon": "add",
+          "data-overflow-priority": "1",
+          key: "addButton",
+          onClick: onClickAddTab,
+          variant: "secondary",
+          tabIndex: -1
+        }
+      ) : []
+    ),
+    [
+      activeTabIndex,
+      allowAddTab,
+      allowCloseTab,
+      allowRenameTab,
+      children,
+      focusVisible,
+      id,
+      location,
+      onClickAddTab,
+      showTabMenuButton,
+      tabProps,
+      draggedItemIndex,
+      tabstripHook.navigationProps
+    ]
+  );
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx20(
+      OverflowContainer,
+      {
+        ...htmlAttributes,
+        ...tabstripHook.containerProps,
+        className,
+        height: 28,
+        id,
+        overflowIcon: "more-horiz",
+        ref: rootRef,
+        style,
+        children: tabs
+      }
+    ),
+    tabstripHook.draggable
+  ] });
+};
+
+// ../vuu-ui-controls/src/tabstrip/Tab.tsx
+import { useForkRef as useForkRef5 } from "@salt-ds/core";
+import cx11 from "classnames";
+import {
+  forwardRef as forwardRef8,
+  useCallback as useCallback28,
+  useRef as useRef21
+} from "react";
+
+// ../vuu-ui-controls/src/tabstrip/TabMenu.tsx
+import { PopupMenu } from "@vuu-ui/vuu-popups";
+import { useMemo as useMemo13 } from "react";
+import cx10 from "classnames";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var classBase9 = "vuuTabMenu";
+var TabMenu = ({
+  allowClose,
+  allowRename,
+  location,
+  onMenuAction,
+  onMenuClose,
+  index
+}) => {
+  const [menuBuilder, menuOptions] = useMemo13(
+    () => [
+      (_location, options) => {
+        const menuItems = [];
+        if (allowRename) {
+          menuItems.push(renameCommand(options));
+        }
+        if (allowClose) {
+          menuItems.push(closeCommand(options));
+        }
+        return menuItems;
+      },
+      {
+        tabIndex: index
+      }
+    ],
+    [allowClose, allowRename, index]
+  );
+  return /* @__PURE__ */ jsx21(
+    PopupMenu,
+    {
+      className: classBase9,
+      menuBuilder,
+      menuActionHandler: onMenuAction,
+      menuLocation: cx10("tab", location),
+      menuOptions,
+      onMenuClose,
+      tabIndex: -1
+    }
+  );
+};
+
+// ../vuu-ui-controls/src/tabstrip/Tab.tsx
+import { jsx as jsx22, jsxs as jsxs5 } from "react/jsx-runtime";
+var classBase10 = "vuuTab";
+var noop = () => void 0;
+var Tab = forwardRef8(function Tab2({
+  ariaControls,
+  children,
+  className,
+  closeable = false,
+  dragging,
+  editable = false,
+  editing,
+  focusVisible,
+  index,
+  label,
+  location,
+  onClick,
+  onClose,
+  onEnterEditMode = noop,
+  onExitEditMode = noop,
+  onFocus: onFocusProp,
+  onKeyUp,
+  onMenuAction,
+  onMenuClose,
+  orientation,
+  selected,
+  showMenuButton = closeable || editable,
+  tabIndex,
+  ...props
+}, ref) {
+  if (showMenuButton && typeof onMenuAction !== "function") {
+    throw Error("Tab onMenuAction must be provided if showMenuButton is set");
+  }
+  const rootRef = useRef21(null);
+  const editableRef = useRef21(null);
+  const setForkRef = useForkRef5(ref, rootRef);
+  const handleClick = useCallback28(
+    (e) => {
+      if (!editing) {
+        e.preventDefault();
+        onClick == null ? void 0 : onClick(e, index);
+      }
+    },
+    [editing, index, onClick]
+  );
+  const handleOnExitEditMode = (originalValue = "", editedValue = "", allowDeactivation = true) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);
+  const handleKeyUp = (e) => {
+    switch (e.key) {
+      case "Backspace":
+      case "Delete":
+        if (closeable) {
+          e.stopPropagation();
+          onClose && onClose(index);
+        }
+        break;
+      default:
+        onKeyUp && onKeyUp(e, index);
+    }
+  };
+  const getLabel = () => {
+    if (editable) {
+      return /* @__PURE__ */ jsx22(
+        EditableLabel,
+        {
+          editing,
+          defaultValue: label,
+          onEnterEditMode,
+          onExitEditMode: handleOnExitEditMode,
+          ref: editableRef
+        },
+        label
+      );
+    } else {
+      return label;
+    }
+  };
+  const handleFocus = (evt) => {
+    if (editableRef.current) {
+      const editable2 = editableRef.current;
+      const input = editable2.querySelector(
+        ".vuuEditableLabel-input"
+      );
+      input == null ? void 0 : input.focus();
+    }
+    onFocusProp == null ? void 0 : onFocusProp(evt);
+  };
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ...props,
+      "aria-controls": ariaControls,
+      "aria-selected": selected,
+      className: cx11(classBase10, {
+        [`${classBase10}-closeable`]: closeable,
+        "vuuDraggable-dragAway": dragging,
+        [`${classBase10}-editing`]: editing,
+        [`${classBase10}-selected`]: selected || void 0,
+        [`${classBase10}-vertical`]: orientation === "vertical",
+        [`saltFocusVisible`]: focusVisible
+      }),
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onKeyUp: handleKeyUp,
+      ref: setForkRef,
+      role: "tab",
+      tabIndex,
+      children: [
+        /* @__PURE__ */ jsx22("div", { className: `${classBase10}-main`, children: /* @__PURE__ */ jsx22(
+          "span",
+          {
+            className: `${classBase10}-text`,
+            "data-text": editable ? void 0 : label,
+            children: children != null ? children : getLabel()
+          }
+        ) }),
+        showMenuButton ? /* @__PURE__ */ jsx22(
+          TabMenu,
+          {
+            allowClose: closeable,
+            allowRename: editable,
+            location,
+            onMenuAction,
+            onMenuClose,
+            index
+          }
+        ) : null
+      ]
+    }
+  );
+});
+
+// src/layout-header/Header.tsx
+import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
+var Header = ({
+  className: classNameProp,
+  contributions,
+  collapsed,
+  closeable,
+  onEditTitle,
+  orientation: orientationProp = "horizontal",
+  style,
+  title = "Untitled"
+}) => {
+  const labelFieldRef = useRef22(null);
+  const [value, setValue] = useState11(title);
+  const [editing, setEditing] = useState11(false);
+  const viewDispatch = useViewDispatch();
+  const handleClose = (evt) => viewDispatch == null ? void 0 : viewDispatch({ type: "remove" }, evt);
+  const classBase14 = "vuuHeader";
+  const handleTitleMouseDown = () => {
+    var _a;
+    (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
+  };
+  const handleButtonMouseDown = (evt) => {
+    evt.stopPropagation();
+  };
+  const orientation = collapsed || orientationProp;
+  const className = classnames2(
+    classBase14,
+    classNameProp,
+    `${classBase14}-${orientation}`
+  );
+  const handleEnterEditMode = () => {
+    setEditing(true);
+  };
+  const handleTitleKeyDown = (evt) => {
+    if (evt.key === "Enter") {
+      setEditing(true);
+    }
+  };
+  const handleExitEditMode = (originalValue = "", finalValue = "", allowDeactivation = true, editCancelled = false) => {
+    var _a;
+    setEditing(false);
+    if (editCancelled) {
+      setValue(originalValue);
+    } else if (finalValue !== originalValue) {
+      setValue(finalValue);
+      onEditTitle == null ? void 0 : onEditTitle(finalValue);
+    }
+    if (allowDeactivation === false) {
+      (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
+    }
+  };
+  const handleMouseDown = (e) => {
+    viewDispatch == null ? void 0 : viewDispatch({ type: "mousedown" }, e);
+  };
+  const toolbarItems = [];
+  const postTitleContributedItems = [];
+  const actionButtons = [];
+  contributions == null ? void 0 : contributions.forEach((contribution, i) => {
+    switch (contribution.location) {
+      case "pre-title":
+        toolbarItems.push(React17.cloneElement(contribution.content, { key: i }));
+        break;
+      default:
+        postTitleContributedItems.push(
+          React17.cloneElement(contribution.content, { key: i })
+        );
+    }
+  });
+  title && toolbarItems.push(
+    /* @__PURE__ */ jsx23(ToolbarField, { className: "vuuHeader-title", children: /* @__PURE__ */ jsx23(
+      EditableLabel,
+      {
+        editing,
+        value,
+        onChange: setValue,
+        onMouseDownCapture: handleTitleMouseDown,
+        onEnterEditMode: handleEnterEditMode,
+        onExitEditMode: handleExitEditMode,
+        onKeyDown: handleTitleKeyDown,
+        ref: labelFieldRef,
+        tabIndex: 0
+      },
+      "title"
+    ) }, "title")
+  );
+  closeable && actionButtons.push(
+    /* @__PURE__ */ jsxs6(
+      ToolbarButton,
+      {
+        onClick: handleClose,
+        onMouseDown: handleButtonMouseDown,
+        children: [
+          /* @__PURE__ */ jsx23(CloseIcon, {}),
+          " Close"
+        ]
+      },
+      "close"
+    )
+  );
+  postTitleContributedItems.length > 0 && toolbarItems.push(
+    /* @__PURE__ */ jsx23(Tooltray, { "data-align-end": true, children: postTitleContributedItems }, "contributions")
+  );
+  actionButtons.length > 0 && toolbarItems.push(
+    /* @__PURE__ */ jsx23(Tooltray, { "data-align-end": true, children: actionButtons }, "actions")
+  );
+  return /* @__PURE__ */ jsx23(
+    Toolbar,
+    {
+      className,
+      orientation: orientationProp,
+      style,
+      onMouseDown: handleMouseDown,
+      children: toolbarItems
+    }
+  );
+};
+
+// src/overflow-container/OverflowContainer.tsx
+import React18, {
+  forwardRef as forwardRef9
+} from "react";
+import cx12 from "classnames";
+import { PopupMenu as PopupMenu2 } from "@vuu-ui/vuu-popups";
+
+// src/overflow-container/useOverflowContainer.ts
+import { useCallback as useCallback29, useMemo as useMemo14, useRef as useRef23, useState as useState12 } from "react";
+
+// src/overflow-container/overflow-utils.ts
+var NON_WRAPPED_ITEM = ".vuuOverflowContainer-item:not(.wrapped)";
+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) => {
+  const nonWrappedItems = [];
+  const wrappedItems = [];
+  let currentLeft = -1;
+  let overflowed = false;
+  const sortedChildren = sortByScreenOrder(
+    Array.from(container.children)
+  );
+  for (const child of sortedChildren) {
+    const element = child;
+    const {
+      dataset: { index = "?", label = "?", overflowPriority = "0" }
+    } = element;
+    const { left } = element.getBoundingClientRect();
+    if (left <= currentLeft) {
+      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 });
+    }
+    currentLeft = left;
+  }
+  return [nonWrappedItems, wrappedItems];
+};
+var applyOverflowClassToWrappedItems = (container, overflowedItems) => {
+  let ignoreOverflow = false;
+  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("overflowed");
+    } else {
+      container.classList.add("overflowed");
+    }
+    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 getElementByIndex = (container, item) => container.querySelector(`[data-index="${item.index}"]`);
+var markElementAsWrapped = (container, item) => {
+  const el = getElementByIndex(container, item);
+  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 = getElementByIndex(container, overflowItem);
+  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 = ({
+  itemCount,
+  onSwitchWrappedItemIntoView
+}) => {
+  const [container, setContainer] = useState12(null);
+  const wrappedItemsRef = useRef23(NO_WRAPPED_ITEMS);
+  const handleResize = useCallback29(async () => {
+    if (container) {
+      let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(container);
+      applyOverflowClassToWrappedItems(container, wrapped);
+      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;
+        }
+      }
+      wrappedItemsRef.current = wrapped;
+    }
+  }, [container]);
+  const hasOverflowItem = (opt) => typeof opt === "object" && opt !== null && "overflowItem" in opt;
+  const [menuBuilder, menuActionHandler] = useMemo14(() => {
+    return [
+      () => {
+        const { current: menuItems } = wrappedItemsRef;
+        return menuItems.map((item) => {
+          return {
+            label: item.label,
+            action: `activate-item-${item.index}`,
+            options: { overflowItem: item }
+          };
+        });
+      },
+      ({ 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 resizeObserver2 = useMemo14(() => {
+    let currentWidth = 0;
+    return new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width } = entry.contentRect;
+        if (currentWidth !== width) {
+          currentWidth = width;
+          handleResize();
+        }
+      }
+    });
+  }, [handleResize]);
+  useLayoutEffectSkipFirst(() => {
+    handleResize();
+  }, [handleResize, itemCount]);
+  useMemo14(() => {
+    if (container) {
+      resizeObserver2.observe(container);
+    }
+  }, [container, resizeObserver2]);
+  const callbackRef = useCallback29((el) => {
+    setContainer(el);
+  }, []);
+  return {
+    menuActionHandler,
+    menuBuilder,
+    rootRef: callbackRef
+  };
+};
+
+// src/overflow-container/OverflowContainer.tsx
+import { jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
+var classBase11 = "vuuOverflowContainer";
+var WrapContainer = React18.memo(
+  ({
+    children,
+    height,
+    onSwitchWrappedItemIntoView,
+    overflowIcon
+  }) => {
+    const childElements = asReactElements(children);
+    const { menuActionHandler, menuBuilder, rootRef } = useOverflowContainer({
+      itemCount: childElements.length,
+      onSwitchWrappedItemIntoView
+    });
+    const style = {
+      "--overflow-container-height": `${height}px`
+    };
+    return /* @__PURE__ */ jsxs7("div", { className: `${classBase11}-wrapContainer`, ref: rootRef, style, children: [
+      childElements.map((childEl, i) => {
+        const {
+          "data-overflow-priority": overflowPriority = "0",
+          id: itemId,
+          label = `Item ${i + 1}`
+        } = childEl.props;
+        return /* @__PURE__ */ jsx24(
+          "div",
+          {
+            className: cx12(`${classBase11}-item`),
+            "data-index": i,
+            "data-label": label,
+            "data-overflow-priority": overflowPriority,
+            id: `${itemId}-wrapper`,
+            children: childEl
+          },
+          i
+        );
+      }),
+      /* @__PURE__ */ jsx24("div", { className: `${classBase11}-OverflowIndicator`, "data-index": "overflow", children: /* @__PURE__ */ jsx24(
+        PopupMenu2,
+        {
+          icon: overflowIcon,
+          menuBuilder,
+          menuActionHandler
+        }
+      ) })
+    ] });
+  }
+);
+WrapContainer.displayName = "OverflowContainer.InnerContainer";
+var OverflowContainer = forwardRef9(function OverflowContainer2({
+  children,
+  className,
+  height = 44,
+  onSwitchWrappedItemIntoView,
+  overflowIcon,
+  ...htmlAttributes
+}, forwardedRef) {
+  return /* @__PURE__ */ jsx24(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx12(cx12(classBase11, className)),
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx24(
+        WrapContainer,
+        {
+          height,
+          overflowIcon,
+          onSwitchWrappedItemIntoView,
+          children
+        }
+      )
+    }
+  );
+});
+
+// src/palette/Palette.tsx
+import { uuid as uuid5 } from "@vuu-ui/vuu-utils";
+import { List, ListItem } from "@heswell/salt-lab";
+import cx13 from "classnames";
+import {
+  cloneElement as cloneElement5,
+  memo
+} from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var clonePaletteItem = (paletteItem) => {
+  const dolly = paletteItem.cloneNode(true);
+  dolly.id = "";
+  delete dolly.dataset.idx;
+  return dolly;
+};
+var PaletteItem = memo(
+  ({
+    className,
+    children: component,
+    idx,
+    resizeable,
+    header,
+    closeable,
+    ...props
+  }) => {
+    return /* @__PURE__ */ jsx25(
+      ListItem,
+      {
+        className: cx13("vuuPaletteItem", className),
+        "data-draggable": true,
+        ...props
+      }
+    );
+  }
+);
 PaletteItem.displayName = "PaletteItem";
 var Palette = ({
   children,
@@ -4956,7 +7933,7 @@ var Palette = ({
   ...props
 }) => {
   const dispatch = useLayoutProviderDispatch();
-  const classBase9 = "vuuPalette";
+  const classBase14 = "vuuPalette";
   function handleMouseDown(evt) {
     var _a;
     const target = evt.target;
@@ -4975,7 +7952,7 @@ var Palette = ({
     const { height, left, top, width } = listItemElement.getBoundingClientRect();
     const id = uuid5();
     const identifiers = { id, key: id };
-    const component = template ? payload : /* @__PURE__ */ jsx16(MemoView, { ...ViewProps2, ...identifiers, ...props2, title: props2.label, children: payload });
+    const component = template ? payload : /* @__PURE__ */ jsx25(MemoView, { ...ViewProps2, ...identifiers, ...props2, title: props2.label, children: payload });
     dispatch({
       dragRect: {
         left,
@@ -4998,16 +7975,16 @@ var Palette = ({
       type: "drag-start"
     });
   }
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx25(
     List,
     {
       ...props,
       borderless: true,
-      className: cx9(classBase9, className, `${classBase9}-${orientation}`),
+      className: cx13(classBase14, className, `${classBase14}-${orientation}`),
       maxHeight: 800,
       selected: null,
       children: children.map(
-        (child, idx) => child.type === PaletteItem ? cloneElement3(child, {
+        (child, idx) => child.type === PaletteItem ? cloneElement5(child, {
           key: idx,
           onMouseDown: handleMouseDown
         }) : child
@@ -5020,9 +7997,9 @@ registerComponent("Palette", Palette, "view");
 // src/palette/PaletteSalt.tsx
 import { uuid as uuid6 } from "@vuu-ui/vuu-utils";
 import { List as List2, ListItem as ListItem2 } from "@heswell/salt-lab";
-import cx10 from "classnames";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var classBase7 = "vuuPalette";
+import cx14 from "classnames";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var classBase12 = "vuuPalette";
 var PaletteListItem = (props) => {
   const { children, ViewProps: ViewProps2, label, onMouseDown, template, ...restProps } = props;
   const dispatch = useLayoutProviderDispatch();
@@ -5030,7 +8007,7 @@ var PaletteListItem = (props) => {
     const { left, top, width } = evt.currentTarget.getBoundingClientRect();
     const id = uuid6();
     const identifiers = { id, key: id };
-    const component = template ? children : /* @__PURE__ */ jsx17(MemoView, { ...identifiers, ...ViewProps2, title: props.label, children });
+    const component = template ? children : /* @__PURE__ */ jsx26(MemoView, { ...identifiers, ...ViewProps2, title: props.label, children });
     dispatch({
       type: "drag-start",
       evt: evt.nativeEvent,
@@ -5052,14 +8029,14 @@ var PaletteListItem = (props) => {
       }
     });
   };
-  return /* @__PURE__ */ jsx17(ListItem2, { onMouseDown: handleMouseDown, ...restProps, children: label });
+  return /* @__PURE__ */ jsx26(ListItem2, { onMouseDown: handleMouseDown, ...restProps, children: label });
 };
 var PaletteSalt = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx26(
     List2,
     {
       ...props,
-      className: cx10(classBase7, className),
+      className: cx14(classBase12, className),
       height: "100%",
       selectionStrategy: "none"
     }
@@ -5068,15 +8045,13 @@ var PaletteSalt = ({ className, ...props }) => {
 registerComponent("PaletteSalt", PaletteSalt, "view");
 
 // src/stack/Stack.tsx
-import { Tab, Tabstrip, Toolbar as Toolbar2, ToolbarField as ToolbarField2 } from "@heswell/salt-lab";
-import { useIdMemo as useId2 } from "@salt-ds/core";
-import cx11 from "classnames";
-import React16, {
-  forwardRef as forwardRef6,
-  useCallback as useCallback15
+import cx15 from "classnames";
+import React19, {
+  forwardRef as forwardRef10,
+  useCallback as useCallback30
 } from "react";
-import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
-var classBase8 = "Tabs";
+import { jsx as jsx27, jsxs as jsxs8 } from "react/jsx-runtime";
+var classBase13 = "Tabs";
 var getDefaultTabIcon = () => void 0;
 var getDefaultTabLabel = (component, tabIndex) => {
   var _a, _b;
@@ -5084,8 +8059,8 @@ var getDefaultTabLabel = (component, tabIndex) => {
 };
 var getChildElements = (children) => {
   const elements = [];
-  React16.Children.forEach(children, (child) => {
-    if (React16.isValidElement(child)) {
+  React19.Children.forEach(children, (child) => {
+    if (React19.isValidElement(child)) {
       elements.push(child);
     } else {
       console.warn(`Stack has unexpected child element type`);
@@ -5093,50 +8068,33 @@ var getChildElements = (children) => {
   });
   return elements;
 };
-var Stack = forwardRef6(function Stack2({
+var DefaultTabstripProps = {
+  allowAddTab: false,
+  allowCloseTab: false,
+  allowRenameTab: false
+};
+var Stack = forwardRef10(function Stack2({
   active = 0,
   children,
   className: classNameProp,
-  enableAddTab,
-  enableCloseTabs,
   getTabIcon = getDefaultTabIcon,
   getTabLabel = getDefaultTabLabel,
   id: idProp,
   keyBoardActivation = "manual",
-  onMouseDown,
-  onTabAdd,
+  // onMouseDown,
+  onAddTab,
+  onMoveTab,
   onTabClose,
   onTabEdit,
   onTabSelectionChanged,
-  showTabs,
+  showTabs = true,
   style,
-  TabstripProps
+  TabstripProps: TabstripProps2 = DefaultTabstripProps
 }, ref) {
   var _a;
-  const id = useId2(idProp);
-  const handleTabSelection = (nextIdx) => {
-    onTabSelectionChanged == null ? void 0 : onTabSelectionChanged(nextIdx);
-  };
-  const handleTabClose = (tabIndex) => {
-    onTabClose == null ? void 0 : onTabClose(tabIndex);
-  };
-  const handleAddTab = () => {
-    onTabAdd == null ? void 0 : onTabAdd(React16.Children.count(children));
-  };
-  const handleMouseDown = (e) => {
-    var _a2;
-    const target = e.target;
-    const tabElement = target.closest('[role^="tab"]');
-    const role = tabElement == null ? void 0 : tabElement.getAttribute("role");
-    if (role === "tab") {
-      const tabIndex = parseInt((_a2 = tabElement.dataset.idx) != null ? _a2 : "-1");
-      if (tabIndex === -1) {
-        throw Error("Stack: mousedown on tab with unknown index");
-      }
-      onMouseDown == null ? void 0 : onMouseDown(e, tabIndex);
-    }
-  };
-  const handleExitEditMode = useCallback15(
+  const id = useId(idProp);
+  const { allowCloseTab, allowRenameTab } = TabstripProps2;
+  const handleExitEditMode = useCallback30(
     (_oldText, newText, _allowDeactivation, tabIndex) => {
       onTabEdit == null ? void 0 : onTabEdit(tabIndex, newText);
     },
@@ -5144,7 +8102,7 @@ var Stack = forwardRef6(function Stack2({
   );
   const activeChild = () => {
     var _a2;
-    if (React16.isValidElement(children)) {
+    if (React19.isValidElement(children)) {
       return children;
     }
     if (Array.isArray(children)) {
@@ -5154,63 +8112,47 @@ var Stack = forwardRef6(function Stack2({
   };
   const renderTabs = () => getChildElements(children).map((child2, idx) => {
     const rootId = `${id}-${idx}`;
-    const { closeable, id: childId } = child2.props;
-    return /* @__PURE__ */ jsx18(
+    const { closeable = allowCloseTab, id: childId } = child2.props;
+    return /* @__PURE__ */ jsx27(
       Tab,
       {
         ariaControls: `${rootId}-tab`,
         "data-icon": getTabIcon(child2, idx),
-        draggable: true,
         id: rootId,
+        index: idx,
         label: getTabLabel(child2, idx),
-        closeable: closeable && (TabstripProps == null ? void 0 : TabstripProps.enableCloseTab) !== false,
-        editable: (TabstripProps == null ? void 0 : TabstripProps.enableRenameTab) !== false
+        closeable,
+        editable: allowRenameTab
       },
       childId != null ? childId : idx
     );
   });
   const child = activeChild();
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
-      className: cx11(classBase8, classNameProp, {
-        [`${classBase8}-horizontal`]: (TabstripProps == null ? void 0 : TabstripProps.orientation) === "vertical"
+      className: cx15(classBase13, classNameProp, {
+        [`${classBase13}-horizontal`]: (TabstripProps2 == null ? void 0 : TabstripProps2.orientation) === "vertical"
       }),
       style,
       id,
       ref,
       children: [
-        showTabs ? /* @__PURE__ */ jsx18(
-          Toolbar2,
+        showTabs ? /* @__PURE__ */ jsx27(
+          Tabstrip,
           {
-            className: "vuuTabHeader vuuHeader",
-            orientation: TabstripProps == null ? void 0 : TabstripProps.orientation,
-            children: /* @__PURE__ */ jsx18(
-              ToolbarField2,
-              {
-                disableFocusRing: true,
-                "data-collapsible": "dynamic",
-                "data-priority": "3",
-                style: { alignSelf: "flex-end" },
-                children: /* @__PURE__ */ jsx18(
-                  Tabstrip,
-                  {
-                    ...TabstripProps,
-                    activeTabIndex: (_a = TabstripProps == null ? void 0 : TabstripProps.activeTabIndex) != null ? _a : child === null ? -1 : active,
-                    enableRenameTab: (TabstripProps == null ? void 0 : TabstripProps.enableRenameTab) !== false,
-                    enableAddTab,
-                    enableCloseTab: enableCloseTabs,
-                    keyBoardActivation,
-                    onActiveChange: handleTabSelection,
-                    onAddTab: handleAddTab,
-                    onCloseTab: handleTabClose,
-                    onExitEditMode: handleExitEditMode,
-                    onMouseDown: handleMouseDown,
-                    children: renderTabs()
-                  }
-                )
-              }
-            )
+            ...TabstripProps2,
+            activeTabIndex: (_a = TabstripProps2 == null ? void 0 : TabstripProps2.activeTabIndex) != null ? _a : child === null ? -1 : active,
+            allowDragDrop: TabstripProps2.allowDragDrop !== false,
+            animateSelectionThumb: true,
+            className: "vuuTabHeader",
+            keyBoardActivation,
+            onActiveChange: onTabSelectionChanged,
+            onAddTab,
+            onCloseTab: onTabClose,
+            onExitEditMode: handleExitEditMode,
+            onMoveTab,
+            children: renderTabs()
           }
         ) : null,
         child
@@ -5222,9 +8164,9 @@ Stack.displayName = "Stack";
 
 // src/stack/StackLayout.tsx
 import { useIdMemo as useId3 } from "@salt-ds/core";
-import React17, { useRef as useRef11 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var defaultCreateNewChild = (index) => /* @__PURE__ */ jsx19(
+import React20, { useCallback as useCallback31, useRef as useRef24 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var defaultCreateNewChild = (index) => /* @__PURE__ */ jsx28(
   MemoView,
   {
     resizeable: true,
@@ -5232,11 +8174,11 @@ var defaultCreateNewChild = (index) => /* @__PURE__ */ jsx19(
     style: { flexGrow: 1, flexShrink: 0, flexBasis: 0 },
     header: true,
     closeable: true,
-    children: /* @__PURE__ */ jsx19(Component_default, { style: { flex: 1 } })
+    children: /* @__PURE__ */ jsx28(Component_default, { style: { flex: 1 } })
   }
 );
 var StackLayout = (props) => {
-  const ref = useRef11(null);
+  const ref = useRef24(null);
   const dispatch = useLayoutProviderDispatch();
   const { loadState } = usePersistentState();
   const {
@@ -5250,32 +8192,46 @@ var StackLayout = (props) => {
   const id = useId3(idProp);
   const [dispatchViewAction] = useViewActionDispatcher(id, ref, path);
   const handleTabSelection = (nextIdx) => {
-    console.log(`StackLayout handleTabSelection nextTab = ${nextIdx}`);
     if (path) {
       dispatch({ type: "switch-tab", path, nextIdx });
       onTabSelectionChanged == null ? void 0 : onTabSelectionChanged(nextIdx);
     }
   };
-  const handleTabClose = (tabIndex) => {
-    if (Array.isArray(children)) {
-      const {
-        props: { "data-path": dataPath, path: path2 = dataPath }
-      } = children[tabIndex];
-      dispatch({ type: "remove", path: path2 });
-    }
-  };
-  const handleTabAdd = (e, tabIndex = React17.Children.count(children)) => {
+  const handleTabClose = useCallback31(
+    (tabIndex) => {
+      if (Array.isArray(children)) {
+        const {
+          props: { "data-path": dataPath, path: path2 = dataPath }
+        } = children[tabIndex];
+        dispatch({ type: "remove", path: path2 });
+      }
+    },
+    [children, dispatch]
+  );
+  const handleTabAdd = useCallback31(() => {
     if (path) {
-      console.log(`[StackLayout] handleTabAdd`);
+      const tabIndex = React20.Children.count(children);
       const component = createNewChild(tabIndex);
-      console.log({ component });
       dispatch({
         type: "add",
         path,
         component
       });
     }
-  };
+  }, [children, createNewChild, dispatch, path]);
+  const handleMoveTab = useCallback31(
+    (fromIndex, toIndex) => {
+      if (path) {
+        dispatch({
+          fromIndex,
+          toIndex,
+          path,
+          type: "move-child"
+        });
+      }
+    },
+    [dispatch, path]
+  );
   const handleMouseDown = async (e, index) => {
     let readyToDrag;
     const preDragActivity = async () => new Promise((resolve) => {
@@ -5297,14 +8253,15 @@ var StackLayout = (props) => {
     const { id: id2, title } = component.props;
     return loadState(id2, "view-title") || title || `Tab ${idx + 1}`;
   };
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx28(
     Stack,
     {
       ...restProps,
       id,
       getTabLabel,
       onMouseDown: handleMouseDown,
-      onTabAdd: handleTabAdd,
+      onMoveTab: handleMoveTab,
+      onAddTab: handleTabAdd,
       onTabClose: handleTabClose,
       onTabEdit: handleTabEdit,
       onTabSelectionChanged: handleTabSelection,
@@ -5316,32 +8273,32 @@ StackLayout.displayName = "Stack";
 registerComponent("Stack", StackLayout, "container");
 
 // src/tools/config-wrapper/ConfigWrapper.tsx
-import React18, { useState as useState8 } from "react";
-import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
+import React21, { useState as useState13 } from "react";
+import { jsx as jsx29, jsxs as jsxs9 } from "react/jsx-runtime";
 var ConfigWrapper = ({ children }) => {
   const designMode = false;
-  const [layout, setLayout] = useState8(children);
-  const [selectedComponent, setSelectedComponent] = useState8(children);
+  const [layout, setLayout] = useState13(children);
+  const [selectedComponent, setSelectedComponent] = useState13(children);
   const handleSelection = (selectedPath) => {
     const targetComponent = followPathToComponent(layout, selectedPath);
     setSelectedComponent(targetComponent);
   };
   const handleChange = (property, value) => {
     console.log(`change ${property} -> ${value}`);
-    const newComponent = React18.cloneElement(selectedComponent, {
+    const newComponent = React21.cloneElement(selectedComponent, {
       style: {
         ...selectedComponent.props.style,
         [property]: value
       }
     });
     setSelectedComponent(newComponent);
-    setLayout(React18.cloneElement(layout, {}, newComponent));
+    setLayout(React21.cloneElement(layout, {}, newComponent));
   };
-  return /* @__PURE__ */ jsxs6("div", { "data-design-mode": `${designMode}`, children: [
+  return /* @__PURE__ */ jsxs9("div", { "data-design-mode": `${designMode}`, children: [
     layout,
-    /* @__PURE__ */ jsx20("br", {}),
-    /* @__PURE__ */ jsxs6("div", { style: { display: "flex" }, children: [
-      /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx29("br", {}),
+    /* @__PURE__ */ jsxs9("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ jsx29(
         LayoutConfigurator,
         {
           height: 300,
@@ -5351,7 +8308,7 @@ var ConfigWrapper = ({ children }) => {
           style: void 0
         }
       ),
-      /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsx29(
         LayoutTreeViewer,
         {
           layout,
@@ -5364,10 +8321,10 @@ var ConfigWrapper = ({ children }) => {
 };
 
 // src/tools/devtools-box/layout-configurator.jsx
-import { FormField, Input } from "@heswell/salt-lab";
-import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
+import { FormField, Input as Input2 } from "@heswell/salt-lab";
+import { jsx as jsx30, jsxs as jsxs10 } from "react/jsx-runtime";
 var NO_STYLE2 = {};
-var DIMENSIONS = {
+var DIMENSIONS2 = {
   margin: {
     top: "marginTop",
     right: "marginRight",
@@ -5388,36 +8345,36 @@ var DIMENSIONS = {
   }
 };
 var LayoutBox = ({ feature, children, style, onChange }) => {
-  return /* @__PURE__ */ jsxs7("div", { className: `LayoutBox layout-${feature} layout-outer`, children: [
-    /* @__PURE__ */ jsxs7("div", { className: `layout-top`, children: [
-      /* @__PURE__ */ jsx21("span", { className: "layout-title", children: feature }),
-      /* @__PURE__ */ jsx21(FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ jsx21(
-        Input,
+  return /* @__PURE__ */ jsxs10("div", { className: `LayoutBox layout-${feature} layout-outer`, children: [
+    /* @__PURE__ */ jsxs10("div", { className: `layout-top`, children: [
+      /* @__PURE__ */ jsx30("span", { className: "layout-title", children: feature }),
+      /* @__PURE__ */ jsx30(FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ jsx30(
+        Input2,
         {
           value: style.top,
           onChange: (evt, value) => onChange(feature, "top", value)
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: `layout-inner`, children: [
-      /* @__PURE__ */ jsx21("div", { className: `layout-left`, children: /* @__PURE__ */ jsx21(FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ jsx21(
-        Input,
+    /* @__PURE__ */ jsxs10("div", { className: `layout-inner`, children: [
+      /* @__PURE__ */ jsx30("div", { className: `layout-left`, children: /* @__PURE__ */ jsx30(FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ jsx30(
+        Input2,
         {
           value: style.left,
           onChange: (evt, value) => onChange(feature, "left", value)
         }
       ) }) }),
       children,
-      /* @__PURE__ */ jsx21("div", { className: `layout-right`, children: /* @__PURE__ */ jsx21(FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ jsx21(
-        Input,
+      /* @__PURE__ */ jsx30("div", { className: `layout-right`, children: /* @__PURE__ */ jsx30(FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ jsx30(
+        Input2,
         {
           value: style.right,
           onChange: (evt, value) => onChange(feature, "right", value)
         }
       ) }) })
     ] }),
-    /* @__PURE__ */ jsx21("div", { className: `layout-bottom`, children: /* @__PURE__ */ jsx21(FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ jsx21(
-      Input,
+    /* @__PURE__ */ jsx30("div", { className: `layout-bottom`, children: /* @__PURE__ */ jsx30(FormField, { className: "layout-input", style: { width: 30 }, children: /* @__PURE__ */ jsx30(
+      Input2,
       {
         value: style.bottom,
         onChange: (evt, value) => onChange(feature, "bottom", value)
@@ -5462,7 +8419,7 @@ var LayoutConfigurator = ({
   const state = normalizeStyle(managedStyle);
   const handleChange = (feature, dimension, strValue) => {
     const value = parseInt(strValue || "0", 10);
-    const property = DIMENSIONS[feature][dimension];
+    const property = DIMENSIONS2[feature][dimension];
     onChange(property, value);
   };
   const {
@@ -5483,25 +8440,25 @@ var LayoutConfigurator = ({
     paddingBottom: pb = 0,
     paddingLeft: pl = 0
   } = state;
-  return /* @__PURE__ */ jsx21("div", { className: "LayoutConfigurator", style: { width, height, ...style }, children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx30("div", { className: "LayoutConfigurator", style: { width, height, ...style }, children: /* @__PURE__ */ jsx30(
     LayoutBox,
     {
       feature: "margin",
       style: { top: mt, right: mr, bottom: mb, left: ml },
       onChange: handleChange,
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx30(
         LayoutBox,
         {
           feature: "border",
           style: { top: bt, right: br, bottom: bb, left: bl },
           onChange: handleChange,
-          children: /* @__PURE__ */ jsx21(
+          children: /* @__PURE__ */ jsx30(
             LayoutBox,
             {
               feature: "padding",
               style: { top: pt, right: pr, bottom: pb, left: pl },
               onChange: handleChange,
-              children: /* @__PURE__ */ jsx21("div", { className: "layout-content" })
+              children: /* @__PURE__ */ jsx30("div", { className: "layout-content" })
             }
           )
         }
@@ -5669,16 +8626,16 @@ function normalizeStyle(managedStyle = NO_STYLE2) {
 }
 
 // src/tools/devtools-tree/layout-tree-viewer.jsx
-import React19 from "react";
-import cx12 from "classnames";
+import React22 from "react";
+import cx16 from "classnames";
 import { Tree } from "@heswell/salt-lab";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var classBaseTree = "hwLayoutTreeViewer";
 var toTreeJson = (component, path = "0") => {
   return {
     label: typeOf(component),
     path,
-    childNodes: React19.Children.map(
+    childNodes: React22.Children.map(
       component.props.children,
       (child, i) => toTreeJson(child, path ? `${path}.${i}` : `${i}`)
     )
@@ -5689,7 +8646,7 @@ var LayoutTreeViewer = ({ layout, onSelect, style }) => {
   const handleSelection = (evt, [{ path }]) => {
     onSelect(path);
   };
-  return /* @__PURE__ */ jsx22("div", { className: cx12(classBaseTree), style, children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx31("div", { className: cx16(classBaseTree), style, children: /* @__PURE__ */ jsx31(
     Tree,
     {
       source: treeJson,
@@ -5722,6 +8679,8 @@ export {
   LayoutProviderVersion,
   LayoutTreeViewer,
   MARGIN_STYLES,
+  NO_WRAPPED_ITEMS,
+  OverflowContainer,
   PADDING_STYLES,
   Palette,
   PaletteItem,
@@ -5735,8 +8694,12 @@ export {
   WidthHeight,
   WidthOnly,
   XXXnormalizeStyles,
+  applyOverflowClassToWrappedItems,
+  asReactElements,
   computeMenuPosition,
   containerOf,
+  correctForWrappedHighPriorityItems,
+  correctForWrappedOverflowIndicator,
   expandFlex,
   extractResponsiveProps,
   findTarget,
@@ -5745,10 +8708,13 @@ export {
   followPathToParent,
   getChild,
   getChildProp,
+  getElementsMarkedAsWrapped,
+  getNonWrappedAndWrappedItems,
   getPersistentState,
   getProp,
   getProps,
   hasPersistentState,
+  highPriorityItemsHaveWrappedButShouldNotHave,
   identifyDropTarget,
   isContainer,
   isLayoutComponent,
@@ -5757,15 +8723,24 @@ export {
   isTabstrip,
   isTypeOf,
   isView,
+  markElementAsWrapped,
   nextLeaf,
   nextStep,
+  overflowIndicatorHasWrappedButShouldNotHave,
   previousLeaf,
   registerComponent,
+  removeOverflowIndicatorIfNoLongerNeeded,
   resetPath,
+  resizeObserver,
   setPersistentState,
   setRef,
+  sortByScreenOrder,
+  switchWrappedItemIntoView,
   typeOf,
+  unmarkItemsWhichAreNoLongerWrapped,
   useBreakpoints,
+  useId,
+  useLayoutEffectSkipFirst,
   useLayoutProviderDispatch,
   useLayoutProviderVersion,
   usePersistentState,