@dxos/react-ui-stack 0.7.5-main.ff8607b → 0.7.5-staging.2ff1350

package/dist/lib/node/index.cjs

@@ -38,22 +38,25 @@ __export(node_exports, {
   StackItemContext: () => StackItemContext,
   autoScrollRootAttributes: () => autoScrollRootAttributes,
   railGridHorizontal: () => railGridHorizontal,
+  railGridHorizontalContainFitContent: () => railGridHorizontalContainFitContent,
   railGridVertical: () => railGridVertical,
+  railGridVerticalContainFitContent: () => railGridVerticalContainFitContent,
   translations: () => translations_default,
   useStack: () => useStack,
   useStackItem: () => useStackItem
 });
 module.exports = __toCommonJS(node_exports);
-var import_combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
-var import_adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var import_element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
-var import_closest_edge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var import_react_tabster = require("@fluentui/react-tabster");
 var import_react_compose_refs = require("@radix-ui/react-compose-refs");
 var import_react = __toESM(require("react"));
 var import_react_ui = require("@dxos/react-ui");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
 var import_react2 = require("react");
+var import_combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
+var import_adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var import_element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
+var import_closest_edge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
+var import_react3 = require("react");
 var import_combine2 = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var import_adapter2 = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var import_preserve_offset_on_source = require("@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source");
@@ -61,30 +64,28 @@ var import_scroll_just_enough_into_view = require("@atlaskit/pragmatic-drag-and-
 var import_closest_edge2 = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var import_react_tabster2 = require("@fluentui/react-tabster");
 var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_react_ui2 = require("@dxos/react-ui");
+var import_react_ui_dnd = require("@dxos/react-ui-dnd");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
 var import_react_slot = require("@radix-ui/react-slot");
-var import_react5 = __toESM(require("react"));
-var import_react_tabster3 = require("@fluentui/react-tabster");
 var import_react6 = __toESM(require("react"));
+var import_react_tabster3 = require("@fluentui/react-tabster");
+var import_react7 = __toESM(require("react"));
 var import_react_ui_attention = require("@dxos/react-ui-attention");
 var import_react_ui_theme4 = require("@dxos/react-ui-theme");
-var import_adapter3 = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
-var import_disable_native_drag_preview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
-var import_prevent_unhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
-var import_react7 = __toESM(require("react"));
-var import_react_ui_theme5 = require("@dxos/react-ui-theme");
 var import_react8 = __toESM(require("react"));
+var import_react_ui_dnd2 = require("@dxos/react-ui-dnd");
+var import_react9 = __toESM(require("react"));
 var import_keyboard = require("@dxos/keyboard");
 var import_react_ui3 = require("@dxos/react-ui");
 var import_react_ui_attention2 = require("@dxos/react-ui-attention");
-var import_react_ui_theme6 = require("@dxos/react-ui-theme");
+var import_react_ui_theme5 = require("@dxos/react-ui-theme");
 var import_util = require("@dxos/util");
-var import_react9 = __toESM(require("react"));
 var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_react_ui4 = require("@dxos/react-ui");
 var StackContext = /* @__PURE__ */ (0, import_react2.createContext)({
   orientation: "vertical",
@@ -100,37 +101,22 @@ var StackItemContext = /* @__PURE__ */ (0, import_react2.createContext)({
   }
 });
 var useStackItem = () => (0, import_react2.useContext)(StackItemContext);
-var railGridHorizontal = "grid-rows-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]";
-var railGridVertical = "grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]";
-var autoScrollRootAttributes = {
-  "data-drag-autoscroll": "idle"
-};
-var Stack = /* @__PURE__ */ (0, import_react.forwardRef)(({ children, classNames, style, orientation = "vertical", rail = true, size = "intrinsic", onRearrange, itemsCount = import_react.Children.count(children), ...props }, forwardedRef) => {
-  const [stackElement, stackRef] = (0, import_react.useState)(null);
-  const composedItemRef = (0, import_react_compose_refs.composeRefs)(stackRef, forwardedRef);
-  const [dropping, setDropping] = (0, import_react.useState)(false);
-  const arrowNavigationGroup = (0, import_react_tabster.useArrowNavigationGroup)({
-    axis: orientation
-  });
-  const styles = {
-    [orientation === "horizontal" ? "gridTemplateColumns" : "gridTemplateRows"]: `repeat(${itemsCount}, min-content)`,
-    ...style
-  };
-  const selfDroppable = !!(itemsCount < 1 && onRearrange && props.id);
-  (0, import_react.useLayoutEffect)(() => {
-    if (!stackElement || !selfDroppable) {
+var useStackDropForElements = ({ element, selfDroppable, orientation, id, onRearrange }) => {
+  const [dropping, setDropping] = (0, import_react3.useState)(false);
+  (0, import_react3.useLayoutEffect)(() => {
+    if (!element || !selfDroppable) {
       return;
     }
     const acceptSourceType = orientation === "horizontal" ? "column" : "card";
     return (0, import_combine.combine)((0, import_adapter.dropTargetForElements)({
-      element: stackElement,
-      getData: ({ input, element }) => {
+      element,
+      getData: ({ input, element: element2 }) => {
         return (0, import_closest_edge.attachClosestEdge)({
-          id: props.id,
+          id,
           type: orientation === "horizontal" ? "card" : "column"
         }, {
           input,
-          element,
+          element: element2,
           allowedEdges: [
             orientation === "horizontal" ? "left" : "top"
           ]
@@ -146,21 +132,68 @@ var Stack = /* @__PURE__ */ (0, import_react.forwardRef)(({ children, classNames
           setDropping(true);
         }
       },
-      onDragLeave: () => setDropping(false),
+      onDragLeave: () => {
+        return setDropping(false);
+      },
       onDrop: ({ self, source }) => {
         setDropping(false);
-        if (source.data.type === acceptSourceType && selfDroppable) {
+        if (source.data.type === acceptSourceType && selfDroppable && onRearrange) {
           onRearrange(source.data, self.data, (0, import_closest_edge.extractClosestEdge)(self.data));
         }
       }
     }), (0, import_element.autoScrollForElements)({
-      element: stackElement,
+      element,
       getAllowedAxis: () => orientation
     }));
   }, [
-    stackElement,
+    element,
     selfDroppable,
-    orientation
+    orientation,
+    id,
+    onRearrange
+  ]);
+  return {
+    dropping
+  };
+};
+var railGridHorizontal = "grid-rows-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]";
+var railGridVertical = "grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]";
+var railGridHorizontalContainFitContent = "grid-rows-[[rail-start]_var(--rail-size)_[content-start]_fit-content(calc(100%-var(--rail-size)*2+2px))_[content-end]]";
+var railGridVerticalContainFitContent = "grid-cols-[[rail-start]_var(--rail-size)_[content-start]_fit-content(calc(100%-var(--rail-size)*2+2px))_[content-end]]";
+var autoScrollRootAttributes = {
+  "data-drag-autoscroll": "idle"
+};
+var Stack = /* @__PURE__ */ (0, import_react.forwardRef)(({ children, classNames, style, orientation = "vertical", rail = true, size = "intrinsic", onRearrange, itemsCount = import_react.Children.count(children), ...props }, forwardedRef) => {
+  const [stackElement, stackRef] = (0, import_react.useState)(null);
+  const composedItemRef = (0, import_react_compose_refs.composeRefs)(stackRef, forwardedRef);
+  const arrowNavigationGroup = (0, import_react_tabster.useArrowNavigationGroup)({
+    axis: orientation
+  });
+  const styles = {
+    [orientation === "horizontal" ? "gridTemplateColumns" : "gridTemplateRows"]: `repeat(${itemsCount}, min-content) [tabster-dummies] 0`,
+    ...style
+  };
+  const selfDroppable = !!(itemsCount < 1 && onRearrange && props.id);
+  const { dropping } = useStackDropForElements({
+    id: props.id,
+    element: stackElement,
+    selfDroppable,
+    orientation,
+    onRearrange
+  });
+  const gridClasses = (0, import_react.useMemo)(() => {
+    if (!rail) {
+      return orientation === "horizontal" ? "grid-rows-1 pli-1" : "grid-cols-1 plb-1";
+    }
+    if (orientation === "horizontal") {
+      return size === "contain-fit-content" ? railGridHorizontalContainFitContent : railGridHorizontal;
+    } else {
+      return size === "contain-fit-content" ? railGridVerticalContainFitContent : railGridVertical;
+    }
+  }, [
+    rail,
+    orientation,
+    size
   ]);
   return /* @__PURE__ */ import_react.default.createElement(StackContext.Provider, {
     value: {
@@ -172,7 +205,7 @@ var Stack = /* @__PURE__ */ (0, import_react.forwardRef)(({ children, classNames
   }, /* @__PURE__ */ import_react.default.createElement("div", {
     ...props,
     ...arrowNavigationGroup,
-    className: (0, import_react_ui_theme.mx)("grid relative", rail ? orientation === "horizontal" ? railGridHorizontal : railGridVertical : orientation === "horizontal" ? "grid-rows-1 pli-1" : "grid-cols-1 plb-1", size === "contain" && (orientation === "horizontal" ? "overflow-x-auto min-bs-0 bs-full max-bs-full" : "overflow-y-auto min-is-0 is-full max-is-full"), classNames),
+    className: (0, import_react_ui_theme.mx)("grid relative", gridClasses, (size === "contain" || size === "contain-fit-content") && (orientation === "horizontal" ? "overflow-x-auto min-bs-0 bs-full max-bs-full" : "overflow-y-auto min-is-0 is-full max-is-full"), classNames),
     "data-rail": rail,
     "aria-orientation": orientation,
     style: styles,
@@ -184,9 +217,9 @@ var Stack = /* @__PURE__ */ (0, import_react.forwardRef)(({ children, classNames
     edge: orientation === "horizontal" ? "left" : "top"
   })));
 });
-var StackItemContent = /* @__PURE__ */ (0, import_react4.forwardRef)(({ children, toolbar, statusbar, classNames, size = "intrinsic", ...props }, forwardedRef) => {
+var StackItemContent = /* @__PURE__ */ (0, import_react5.forwardRef)(({ children, toolbar, statusbar, classNames, size = "intrinsic", ...props }, forwardedRef) => {
   const { size: stackItemSize } = useStack();
-  return /* @__PURE__ */ import_react4.default.createElement("div", {
+  return /* @__PURE__ */ import_react5.default.createElement("div", {
     role: "none",
     ...props,
     className: (0, import_react_ui_theme3.mx)("group grid grid-cols-[100%]", stackItemSize === "contain" && "min-bs-0 overflow-hidden", size === "video" ? "aspect-video" : size === "square" && "aspect-square", classNames),
@@ -207,7 +240,7 @@ var StackItemContent = /* @__PURE__ */ (0, import_react4.forwardRef)(({ children
 var StackItemDragHandle = ({ asChild, children }) => {
   const { selfDragHandleRef } = useStackItem();
   const Root = asChild ? import_react_slot.Slot : "div";
-  return /* @__PURE__ */ import_react5.default.createElement(Root, {
+  return /* @__PURE__ */ import_react6.default.createElement(Root, {
     ref: selfDragHandleRef,
     role: "button"
   }, children);
@@ -217,7 +250,7 @@ var StackItemHeading = ({ children, classNames, ...props }) => {
   const focusableGroupAttrs = (0, import_react_tabster3.useFocusableGroup)({
     tabBehavior: "limited"
   });
-  return /* @__PURE__ */ import_react6.default.createElement("div", {
+  return /* @__PURE__ */ import_react7.default.createElement("div", {
     role: "heading",
     ...props,
     tabIndex: 0,
@@ -225,99 +258,36 @@ var StackItemHeading = ({ children, classNames, ...props }) => {
     className: (0, import_react_ui_theme4.mx)("flex items-center dx-focus-ring-inset-over-all relative !border-is-0", orientation === "horizontal" ? "bs-[--rail-size]" : "is-[--rail-size] flex-col", classNames)
   }, children);
 };
-var StackItemHeadingLabel = /* @__PURE__ */ (0, import_react6.forwardRef)(({ attendableId, related, classNames, ...props }, forwardedRef) => {
+var StackItemHeadingLabel = /* @__PURE__ */ (0, import_react7.forwardRef)(({ attendableId, related, classNames, ...props }, forwardedRef) => {
   const { hasAttention, isAncestor, isRelated } = (0, import_react_ui_attention.useAttention)(attendableId);
-  return /* @__PURE__ */ import_react6.default.createElement("h1", {
+  return /* @__PURE__ */ import_react7.default.createElement("h1", {
     ...props,
     "data-attention": (related && isRelated || hasAttention || isAncestor).toString(),
     className: (0, import_react_ui_theme4.mx)("pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText self-center", classNames),
     ref: forwardedRef
   });
 });
-var REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
 var MIN_WIDTH = 20;
 var MIN_HEIGHT = 3;
-var measureStackItem = (element) => {
-  const stackItemElement = element.closest("[data-dx-stack-item]");
-  return stackItemElement?.getBoundingClientRect() ?? {
-    width: DEFAULT_EXTRINSIC_SIZE,
-    height: DEFAULT_EXTRINSIC_SIZE
-  };
-};
-var getNextSize = (startSize, location, client) => {
-  return Math.max(client === "clientX" ? MIN_WIDTH : MIN_HEIGHT, startSize + (location.current.input[client] - location.initial.input[client]) / REM);
-};
 var StackItemResizeHandle = () => {
   const { orientation } = useStack();
   const { setSize, size } = useStackItem();
-  const buttonRef = (0, import_react7.useRef)(null);
-  const dragStartSize = (0, import_react7.useRef)(size);
-  const client = orientation === "horizontal" ? "clientX" : "clientY";
-  (0, import_react7.useLayoutEffect)(() => {
-    if (!buttonRef.current || buttonRef.current.hasAttribute("draggable")) {
-      return;
-    }
-    (0, import_adapter3.draggable)({
-      element: buttonRef.current,
-      onGenerateDragPreview: ({ nativeSetDragImage }) => {
-        (0, import_disable_native_drag_preview.disableNativeDragPreview)({
-          nativeSetDragImage
-        });
-        import_prevent_unhandled.preventUnhandled.start();
-      },
-      onDragStart: () => {
-        dragStartSize.current = dragStartSize.current === "min-content" ? measureStackItem(buttonRef.current)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
-      },
-      onDrag: ({ location }) => {
-        if (typeof dragStartSize.current !== "number") {
-          return;
-        }
-        setSize(getNextSize(dragStartSize.current, location, client));
-      },
-      onDrop: ({ location }) => {
-        if (typeof dragStartSize.current !== "number") {
-          return;
-        }
-        const nextSize = getNextSize(dragStartSize.current, location, client);
-        setSize(nextSize, true);
-        dragStartSize.current = nextSize;
-      }
-    });
-  }, []);
-  return /* @__PURE__ */ import_react7.default.createElement("button", {
-    ref: buttonRef,
-    className: (0, import_react_ui_theme5.mx)("group absolute", orientation === "horizontal" ? "cursor-col-resize is-3 bs-full inline-end-[-1px] !border-lb-0 before:inset-block-0 before:inline-end-0 before:is-1" : "cursor-row-resize bs-3 is-full block-end-[-1px] !border-li-0 before:inset-inline-0 before:block-end-0 before:bs-1", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:bg-accentFocusIndicator")
-  }, /* @__PURE__ */ import_react7.default.createElement("div", {
-    role: "none",
-    className: (0, import_react_ui_theme5.mx)("absolute flex items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0", orientation === "horizontal" ? "block-start-0 inline-end-px bs-[--rail-size]" : "inline-start-0 block-end-px is-[--rail-size] flex justify-center")
-  }, /* @__PURE__ */ import_react7.default.createElement(DragHandleSignifier, {
-    orientation
-  })));
-};
-var DragHandleSignifier = ({ orientation }) => {
-  return /* @__PURE__ */ import_react7.default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 256 256",
-    fill: "currentColor",
-    className: (0, import_react_ui_theme5.mx)("shrink-0 bs-[1em] is-[1em] text-unAccent", orientation === "vertical" && "rotate-90")
-  }, /* @__PURE__ */ import_react7.default.createElement("path", {
-    d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ import_react7.default.createElement("path", {
-    d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ import_react7.default.createElement("path", {
-    d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ import_react7.default.createElement("path", {
-    d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }));
+  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui_dnd2.ResizeHandle, {
+    side: orientation === "horizontal" ? "inline-end" : "block-end",
+    fallbackSize: DEFAULT_EXTRINSIC_SIZE,
+    minSize: orientation === "horizontal" ? MIN_WIDTH : MIN_HEIGHT,
+    size,
+    onSizeChange: setSize
+  });
 };
-var MenuSignifierHorizontal = () => /* @__PURE__ */ import_react9.default.createElement("svg", {
+var MenuSignifierHorizontal = () => /* @__PURE__ */ import_react10.default.createElement("svg", {
   className: "absolute block-end-[7px]",
   width: 20,
   height: 2,
   viewBox: "0 0 20 2",
   stroke: "currentColor",
   opacity: 0.5
-}, /* @__PURE__ */ import_react9.default.createElement("line", {
+}, /* @__PURE__ */ import_react10.default.createElement("line", {
   x1: 0.5,
   y1: 0.75,
   x2: 19,
@@ -343,10 +313,10 @@ var translations_default = [
     }
   }
 ];
-var StackItemSigilButton = /* @__PURE__ */ (0, import_react8.forwardRef)(({ attendableId, classNames, related, children, ...props }, forwardedRef) => {
+var StackItemSigilButton = /* @__PURE__ */ (0, import_react9.forwardRef)(({ attendableId, classNames, related, children, ...props }, forwardedRef) => {
   const { hasAttention, isAncestor, isRelated } = (0, import_react_ui_attention2.useAttention)(attendableId);
   const variant = related && isRelated || hasAttention || isAncestor ? "primary" : "ghost";
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.Button, {
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.Button, {
     ...props,
     variant,
     classNames: [
@@ -354,29 +324,29 @@ var StackItemSigilButton = /* @__PURE__ */ (0, import_react8.forwardRef)(({ atte
       classNames
     ],
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react8.default.createElement(MenuSignifierHorizontal, null), children);
+  }, /* @__PURE__ */ import_react9.default.createElement(MenuSignifierHorizontal, null), children);
 });
-var StackItemSigil = /* @__PURE__ */ (0, import_react8.forwardRef)(({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {
+var StackItemSigil = /* @__PURE__ */ (0, import_react9.forwardRef)(({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {
   const { t } = (0, import_react_ui3.useTranslation)(translationKey);
-  const suppressNextTooltip = (0, import_react8.useRef)(false);
-  const [optionsMenuOpen, setOptionsMenuOpen] = (0, import_react8.useState)(false);
+  const suppressNextTooltip = (0, import_react9.useRef)(false);
+  const [optionsMenuOpen, setOptionsMenuOpen] = (0, import_react9.useState)(false);
   const hasActions = actionGroups && actionGroups.length > 0;
-  const button = /* @__PURE__ */ import_react8.default.createElement(StackItemSigilButton, {
+  const button = /* @__PURE__ */ import_react9.default.createElement(StackItemSigilButton, {
     attendableId,
     related,
     // TODO(wittjosiah): Better disabling of interactive styles when no action are available.
     //   Remove underscore icon when no actions are available?
     classNames: !hasActions && "cursor-default"
-  }, /* @__PURE__ */ import_react8.default.createElement("span", {
+  }, /* @__PURE__ */ import_react9.default.createElement("span", {
     className: "sr-only"
-  }, triggerLabel), /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.Icon, {
+  }, triggerLabel), /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.Icon, {
     icon,
     size: 5
   }));
   if (!hasActions) {
     return button;
   }
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Root, {
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Root, {
     open: optionsMenuOpen,
     onOpenChange: (nextOpen) => {
       if (!nextOpen) {
@@ -384,20 +354,20 @@ var StackItemSigil = /* @__PURE__ */ (0, import_react8.forwardRef)(({ actions: a
       }
       return setOptionsMenuOpen(nextOpen);
     }
-  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, button), /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Portal, null, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Content, {
+  }, button), /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Portal, null, /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Content, {
     classNames: "z-[31]"
-  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Viewport, null, actionGroups?.map((actions, index) => {
-    const separator = index > 0 ? /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Separator, null) : null;
-    return /* @__PURE__ */ import_react8.default.createElement(import_react8.Fragment, {
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Viewport, null, actionGroups?.map((actions, index) => {
+    const separator = index > 0 ? /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Separator, null) : null;
+    return /* @__PURE__ */ import_react9.default.createElement(import_react9.Fragment, {
       key: index
     }, separator, actions.map((action) => {
       const shortcut = typeof action.properties.keyBinding === "string" ? action.properties.keyBinding : action.properties.keyBinding?.[(0, import_util.getHostPlatform)()];
       const menuItemType = action.properties.menuItemType;
       const Root = menuItemType === "toggle" ? import_react_ui3.DropdownMenu.CheckboxItem : import_react_ui3.DropdownMenu.Item;
-      return /* @__PURE__ */ import_react8.default.createElement(Root, {
+      return /* @__PURE__ */ import_react9.default.createElement(Root, {
         key: action.id,
         onClick: (event) => {
           if (action.properties.disabled) {
@@ -414,34 +384,34 @@ var StackItemSigil = /* @__PURE__ */ (0, import_react8.forwardRef)(({ actions: a
         ...action.properties?.testId && {
           "data-testid": action.properties.testId
         }
-      }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.Icon, {
+      }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.Icon, {
         icon: action.properties.icon ?? "ph--placeholder--regular",
         size: 4
-      }), /* @__PURE__ */ import_react8.default.createElement("span", {
+      }), /* @__PURE__ */ import_react9.default.createElement("span", {
         className: "grow truncate"
-      }, (0, import_react_ui3.toLocalizedString)(action.properties.label ?? "", t)), menuItemType === "toggle" && /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.ItemIndicator, {
+      }, (0, import_react_ui3.toLocalizedString)(action.properties.label ?? "", t)), menuItemType === "toggle" && /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.ItemIndicator, {
         asChild: true
-      }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.Icon, {
+      }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.Icon, {
         icon: "ph--check--regular",
         size: 4
-      })), shortcut && /* @__PURE__ */ import_react8.default.createElement("span", {
-        className: (0, import_react_ui_theme6.mx)("shrink-0", import_react_ui_theme6.descriptionText)
+      })), shortcut && /* @__PURE__ */ import_react9.default.createElement("span", {
+        className: (0, import_react_ui_theme5.mx)("shrink-0", import_react_ui_theme5.descriptionText)
       }, (0, import_keyboard.keySymbols)(shortcut).join("")));
     }));
-  }), children), /* @__PURE__ */ import_react8.default.createElement(import_react_ui3.DropdownMenu.Arrow, null))));
+  }), children), /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Arrow, null))));
 });
 var DEFAULT_HORIZONTAL_SIZE = 44;
 var DEFAULT_VERTICAL_SIZE = "min-content";
 var DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE;
-var StackItemRoot = /* @__PURE__ */ (0, import_react3.forwardRef)(({ item, children, classNames, size: propsSize, onSizeChange, role, order, style, disableRearrange, focusIndicatorVariant = "over-all", ...props }, forwardedRef) => {
-  const [itemElement, itemRef] = (0, import_react3.useState)(null);
-  const [selfDragHandleElement, selfDragHandleRef] = (0, import_react3.useState)(null);
-  const [closestEdge, setEdge] = (0, import_react3.useState)(null);
+var StackItemRoot = /* @__PURE__ */ (0, import_react4.forwardRef)(({ item, children, classNames, size: propsSize, onSizeChange, role, order, style, disableRearrange, focusIndicatorVariant = "over-all", ...props }, forwardedRef) => {
+  const [itemElement, itemRef] = (0, import_react4.useState)(null);
+  const [selfDragHandleElement, selfDragHandleRef] = (0, import_react4.useState)(null);
+  const [closestEdge, setEdge] = (0, import_react4.useState)(null);
   const { orientation, rail, onRearrange } = useStack();
-  const [size = orientation === "horizontal" ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] = (0, import_react3.useState)(propsSize);
+  const [size = orientation === "horizontal" ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] = (0, import_react4.useState)(propsSize);
   const Root = role ?? "div";
   const composedItemRef = (0, import_react_compose_refs2.composeRefs)(itemRef, forwardedRef);
-  const setSize = (0, import_react3.useCallback)((nextSize, commit) => {
+  const setSize = (0, import_react4.useCallback)((nextSize, commit) => {
     setInternalSize(nextSize);
     if (commit) {
       onSizeChange?.(nextSize);
@@ -450,7 +420,7 @@ var StackItemRoot = /* @__PURE__ */ (0, import_react3.forwardRef)(({ item, child
     onSizeChange
   ]);
   const type = orientation === "horizontal" ? "column" : "card";
-  (0, import_react3.useLayoutEffect)(() => {
+  (0, import_react4.useLayoutEffect)(() => {
     if (!itemElement || !onRearrange || disableRearrange) {
       return;
     }
@@ -529,29 +499,28 @@ var StackItemRoot = /* @__PURE__ */ (0, import_react3.forwardRef)(({ item, child
   const focusGroupAttrs = (0, import_react_tabster2.useFocusableGroup)({
     tabBehavior: "limited"
   });
-  return /* @__PURE__ */ import_react3.default.createElement(StackItemContext.Provider, {
+  return /* @__PURE__ */ import_react4.default.createElement(StackItemContext.Provider, {
     value: {
       selfDragHandleRef,
       size,
       setSize
     }
-  }, /* @__PURE__ */ import_react3.default.createElement(Root, {
+  }, /* @__PURE__ */ import_react4.default.createElement(Root, {
     ...props,
     tabIndex: 0,
     ...focusGroupAttrs,
-    className: (0, import_react_ui_theme2.mx)("group/stack-item grid relative", focusIndicatorVariant === "over-all" ? "dx-focus-ring-inset-over-all" : orientation === "horizontal" ? "dx-focus-ring-group-x" : "dx-focus-ring-group-y", size === "min-content" && (orientation === "horizontal" ? "is-min" : "bs-min"), orientation === "horizontal" ? "grid-rows-subgrid" : "grid-cols-subgrid", rail && (orientation === "horizontal" ? "row-span-2" : "col-span-2"), classNames),
+    className: (0, import_react_ui_theme2.mx)("group/stack-item grid relative", focusIndicatorVariant === "over-all" ? "dx-focus-ring-inset-over-all" : orientation === "horizontal" ? "dx-focus-ring-group-x" : "dx-focus-ring-group-y", orientation === "horizontal" ? "grid-rows-subgrid" : "grid-cols-subgrid", rail && (orientation === "horizontal" ? "row-span-2" : "col-span-2"), classNames),
     "data-dx-stack-item": true,
+    ...import_react_ui_dnd.resizeAttributes,
     style: {
-      ...size !== "min-content" && {
-        [orientation === "horizontal" ? "inlineSize" : "blockSize"]: `${size}rem`
-      },
+      ...(0, import_react_ui_dnd.sizeStyle)(size, orientation),
       ...Number.isFinite(order) && {
         [orientation === "horizontal" ? "gridColumn" : "gridRow"]: `${order}`
       },
       ...style
     },
     ref: composedItemRef
-  }, children, closestEdge && /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ListItem.DropIndicator, {
+  }, children, closestEdge && /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.ListItem.DropIndicator, {
     lineInset: 8,
     terminalInset: -8,
     edge: closestEdge
@@ -568,46 +537,46 @@ var StackItem = {
   SigilButton: StackItemSigilButton
 };
 var LayoutControl = ({ icon, label, ...props }) => {
-  return /* @__PURE__ */ import_react10.default.createElement(import_react_ui4.Tooltip.Root, null, /* @__PURE__ */ import_react10.default.createElement(import_react_ui4.Tooltip.Trigger, {
+  return /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Tooltip.Root, null, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui4.Button, {
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Button, {
     variant: "ghost",
     ...props
-  }, /* @__PURE__ */ import_react10.default.createElement("span", {
+  }, /* @__PURE__ */ import_react11.default.createElement("span", {
     className: "sr-only"
-  }, label), /* @__PURE__ */ import_react10.default.createElement(import_react_ui4.Icon, {
+  }, label), /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Icon, {
     icon
-  }))), /* @__PURE__ */ import_react10.default.createElement(import_react_ui4.Tooltip.Portal, null, /* @__PURE__ */ import_react10.default.createElement(import_react_ui4.Tooltip.Content, {
+  }))), /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Tooltip.Portal, null, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Tooltip.Content, {
     side: "bottom"
   }, label)));
 };
-var LayoutControls = /* @__PURE__ */ (0, import_react10.forwardRef)(({ onClick, variant = "default", capabilities: can, isSolo, pin, close = false, children, ...props }, forwardedRef) => {
+var LayoutControls = /* @__PURE__ */ (0, import_react11.forwardRef)(({ onClick, variant = "default", capabilities: can, isSolo, pin, close = false, children, ...props }, forwardedRef) => {
   const { t } = (0, import_react_ui4.useTranslation)(translationKey);
   const buttonClassNames = variant === "hide-disabled" ? "disabled:hidden !p-1" : "!p-1";
-  return /* @__PURE__ */ import_react10.default.createElement(import_react_ui4.ButtonGroup, {
+  return /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.ButtonGroup, {
     ...props,
     ref: forwardedRef
   }, pin && !isSolo && [
     "both",
     "start"
-  ].includes(pin) && /* @__PURE__ */ import_react10.default.createElement(LayoutControl, {
+  ].includes(pin) && /* @__PURE__ */ import_react11.default.createElement(LayoutControl, {
     label: t("pin start label"),
     variant: "ghost",
     classNames: buttonClassNames,
     onClick: () => onClick?.("pin-start"),
     icon: "ph--caret-line-left--regular"
-  }), can.solo && /* @__PURE__ */ import_react10.default.createElement(LayoutControl, {
+  }), can.solo && /* @__PURE__ */ import_react11.default.createElement(LayoutControl, {
     label: t("solo layout label"),
     classNames: buttonClassNames,
     onClick: () => onClick?.("solo"),
     icon: isSolo ? "ph--arrows-in--regular" : "ph--arrows-out--regular"
-  }), !isSolo && can.solo && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(LayoutControl, {
+  }), !isSolo && can.solo && /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(LayoutControl, {
     label: t("increment start label"),
     disabled: !can.incrementStart,
     classNames: buttonClassNames,
     onClick: () => onClick?.("increment-start"),
     icon: "ph--caret-left--regular"
-  }), /* @__PURE__ */ import_react10.default.createElement(LayoutControl, {
+  }), /* @__PURE__ */ import_react11.default.createElement(LayoutControl, {
     label: t("increment end label"),
     disabled: !can.incrementEnd,
     classNames: buttonClassNames,
@@ -616,12 +585,12 @@ var LayoutControls = /* @__PURE__ */ (0, import_react10.forwardRef)(({ onClick,
   })), pin && !isSolo && [
     "both",
     "end"
-  ].includes(pin) && /* @__PURE__ */ import_react10.default.createElement(LayoutControl, {
+  ].includes(pin) && /* @__PURE__ */ import_react11.default.createElement(LayoutControl, {
     label: t("pin end label"),
     classNames: buttonClassNames,
     onClick: () => onClick?.("pin-end"),
     icon: "ph--caret-line-right--regular"
-  }), close && !isSolo && /* @__PURE__ */ import_react10.default.createElement(LayoutControl, {
+  }), close && !isSolo && /* @__PURE__ */ import_react11.default.createElement(LayoutControl, {
     label: t(`${typeof close === "string" ? "minify" : "close"} label`),
     classNames: buttonClassNames,
     onClick: () => onClick?.("close"),
@@ -641,7 +610,9 @@ var LayoutControls = /* @__PURE__ */ (0, import_react10.forwardRef)(({ onClick,
   StackItemContext,
   autoScrollRootAttributes,
   railGridHorizontal,
+  railGridHorizontalContainFitContent,
   railGridVertical,
+  railGridVerticalContainFitContent,
   translations,
   useStack,
   useStackItem