@dxos/react-ui-stack 0.7.4 → 0.7.5-feature-compute.4d9d99a

package/dist/lib/browser/index.mjs

@@ -1,6 +1,10 @@
 // packages/ui/react-ui-stack/src/components/Stack.tsx
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { useArrowNavigationGroup } from "@fluentui/react-tabster";
-import React, { Children, forwardRef } from "react";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import React, { Children, forwardRef, useLayoutEffect, useState } from "react";
+import { ListItem } from "@dxos/react-ui";
 import { mx } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-stack/src/components/StackContext.tsx
@@ -8,8 +12,7 @@ import { createContext, useContext } from "react";
 var StackContext = /* @__PURE__ */ createContext({
   orientation: "vertical",
   rail: true,
-  size: "intrinsic",
-  separators: true
+  size: "intrinsic"
 });
 var useStack = () => useContext(StackContext);
 var StackItemContext = /* @__PURE__ */ createContext({
@@ -24,7 +27,10 @@ var useStackItem = () => useContext(StackItemContext);
 // packages/ui/react-ui-stack/src/components/Stack.tsx
 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 Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientation = "vertical", rail = true, separators = true, size = "intrinsic", itemsCount = Children.count(children), ...props }, forwardedRef) => {
+var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientation = "vertical", rail = true, size = "intrinsic", onRearrange, itemsCount = Children.count(children), ...props }, forwardedRef) => {
+  const [stackElement, stackRef] = useState(null);
+  const composedItemRef = composeRefs(stackRef, forwardedRef);
+  const [dropping, setDropping] = useState(false);
   const arrowNavigationGroup = useArrowNavigationGroup({
     axis: orientation
   });
@@ -32,41 +38,88 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
     [orientation === "horizontal" ? "gridTemplateColumns" : "gridTemplateRows"]: `repeat(${itemsCount}, min-content)`,
     ...style
   };
+  const selfDroppable = !!(itemsCount < 1 && onRearrange && props.id);
+  useLayoutEffect(() => {
+    if (!stackElement || !selfDroppable) {
+      return;
+    }
+    const acceptSourceType = orientation === "horizontal" ? "column" : "card";
+    return dropTargetForElements({
+      element: stackElement,
+      getData: ({ input, element }) => {
+        return attachClosestEdge({
+          id: props.id,
+          type: orientation === "horizontal" ? "card" : "column"
+        }, {
+          input,
+          element,
+          allowedEdges: [
+            orientation === "horizontal" ? "left" : "top"
+          ]
+        });
+      },
+      onDragEnter: ({ source }) => {
+        if (source.data.type === acceptSourceType) {
+          setDropping(true);
+        }
+      },
+      onDrag: ({ source }) => {
+        if (source.data.type === acceptSourceType) {
+          setDropping(true);
+        }
+      },
+      onDragLeave: () => setDropping(false),
+      onDrop: ({ self, source }) => {
+        setDropping(false);
+        if (source.data.type === acceptSourceType && selfDroppable) {
+          onRearrange(source.data, self.data, extractClosestEdge(self.data));
+        }
+      }
+    });
+  }, [
+    stackElement,
+    selfDroppable
+  ]);
   return /* @__PURE__ */ React.createElement(StackContext.Provider, {
     value: {
       orientation,
       rail,
       size,
-      separators
+      onRearrange
     }
   }, /* @__PURE__ */ React.createElement("div", {
     ...props,
     ...arrowNavigationGroup,
-    className: mx("grid relative", rail ? orientation === "horizontal" ? railGridHorizontal : railGridVertical : orientation === "horizontal" ? "grid-rows-1" : "grid-cols-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"), separators && (orientation === "horizontal" ? "divide-separator divide-x" : "divide-separator divide-y"), classNames),
+    className: mx("grid relative", rail ? orientation === "horizontal" ? railGridHorizontal : railGridVertical : orientation === "horizontal" ? "grid-rows-1" : "grid-cols-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),
     "aria-orientation": orientation,
     style: styles,
-    ref: forwardedRef
-  }, children));
+    ref: composedItemRef
+  }, children, selfDroppable && dropping && /* @__PURE__ */ React.createElement(ListItem.DropIndicator, {
+    edge: orientation === "horizontal" ? "left" : "top"
+  })));
 });
 
 // packages/ui/react-ui-stack/src/components/StackItem.tsx
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import { draggable as draggable2, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { draggable as draggable2, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { disableNativeDragPreview as disableNativeDragPreview2 } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
+import { preventUnhandled as preventUnhandled2 } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
+import { attachClosestEdge as attachClosestEdge2, extractClosestEdge as extractClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
-import { composeRefs } from "@radix-ui/react-compose-refs";
-import React7, { forwardRef as forwardRef4, useLayoutEffect as useLayoutEffect2, useState as useState2, useCallback } from "react";
+import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
+import React8, { forwardRef as forwardRef5, useLayoutEffect as useLayoutEffect3, useState as useState3, useCallback } from "react";
+import { ListItem as ListItem2 } from "@dxos/react-ui";
 import { mx as mx6 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-stack/src/components/StackItemContent.tsx
-import React2 from "react";
+import React2, { forwardRef as forwardRef2 } from "react";
 import { mx as mx2 } from "@dxos/react-ui-theme";
-var StackItemContent = ({ children, toolbar = true, statusbar, classNames, ...props }) => {
-  const { size, separators } = useStack();
+var StackItemContent = /* @__PURE__ */ forwardRef2(({ children, toolbar, statusbar, classNames, size = "intrinsic", ...props }, forwardedRef) => {
+  const { size: stackItemSize } = useStack();
   return /* @__PURE__ */ React2.createElement("div", {
     role: "none",
     ...props,
-    className: mx2("group grid grid-cols-[100%]", size === "contain" && "min-bs-0 overflow-hidden", separators && "divide-separator divide-y", classNames),
+    className: mx2("group grid grid-cols-[100%]", stackItemSize === "contain" && "min-bs-0 overflow-hidden", size === "video" ? "aspect-video" : size === "square" && "aspect-square", classNames),
     style: {
       gridTemplateRows: [
         ...toolbar ? [
@@ -77,36 +130,47 @@ var StackItemContent = ({ children, toolbar = true, statusbar, classNames, ...pr
           "var(--statusbar-size)"
         ] : []
       ].join(" ")
-    }
+    },
+    ref: forwardedRef
+  }, children);
+});
+
+// packages/ui/react-ui-stack/src/components/StackItemDragHandle.tsx
+import { Slot } from "@radix-ui/react-slot";
+import React3 from "react";
+var StackItemDragHandle = ({ asChild, children }) => {
+  const { selfDragHandleRef } = useStackItem();
+  const Root = asChild ? Slot : "div";
+  return /* @__PURE__ */ React3.createElement(Root, {
+    ref: selfDragHandleRef,
+    role: "button"
   }, children);
 };
 
 // packages/ui/react-ui-stack/src/components/StackItemHeading.tsx
 import { useFocusableGroup } from "@fluentui/react-tabster";
-import React3, { forwardRef as forwardRef2 } from "react";
+import React4, { forwardRef as forwardRef3 } from "react";
 import { useAttention } from "@dxos/react-ui-attention";
 import { mx as mx3 } from "@dxos/react-ui-theme";
 var StackItemHeading = ({ children, classNames, ...props }) => {
   const { orientation } = useStack();
-  const { selfDragHandleRef } = useStackItem();
   const focusableGroupAttrs = useFocusableGroup({
     tabBehavior: "limited"
   });
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     role: "heading",
     ...props,
     tabIndex: 0,
     ...focusableGroupAttrs,
-    className: mx3("flex items-center ch-focus-ring-inset-over-all relative !border-is-0", orientation === "horizontal" ? "bs-[--rail-size]" : "is-[--rail-size] flex-col", classNames),
-    ref: selfDragHandleRef
+    className: mx3("flex items-center ch-focus-ring-inset-over-all relative !border-is-0", orientation === "horizontal" ? "bs-[--rail-size]" : "is-[--rail-size] flex-col", classNames)
   }, children);
 };
-var StackItemHeadingLabel = /* @__PURE__ */ forwardRef2(({ attendableId, related, classNames, ...props }, forwardedRef) => {
+var StackItemHeadingLabel = /* @__PURE__ */ forwardRef3(({ attendableId, related, classNames, ...props }, forwardedRef) => {
   const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);
-  return /* @__PURE__ */ React3.createElement("h1", {
+  return /* @__PURE__ */ React4.createElement("h1", {
     ...props,
     "data-attention": (related && isRelated || hasAttention || isAncestor).toString(),
-    className: mx3("pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText", classNames),
+    className: mx3("pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText self-center", classNames),
     ref: forwardedRef
   });
 });
@@ -115,7 +179,7 @@ var StackItemHeadingLabel = /* @__PURE__ */ forwardRef2(({ attendableId, related
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
 import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
-import React4, { useLayoutEffect, useRef } from "react";
+import React5, { useLayoutEffect as useLayoutEffect2, useRef } from "react";
 import { mx as mx4 } from "@dxos/react-ui-theme";
 var REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
 var MIN_SIZE = 20;
@@ -135,7 +199,7 @@ var StackItemResizeHandle = () => {
   const buttonRef = useRef(null);
   const dragStartSize = useRef(size);
   const client = orientation === "horizontal" ? "clientX" : "clientY";
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!buttonRef.current || buttonRef.current.hasAttribute("draggable")) {
       return;
     }
@@ -166,33 +230,33 @@ var StackItemResizeHandle = () => {
       }
     });
   }, []);
-  return /* @__PURE__ */ React4.createElement("button", {
+  return /* @__PURE__ */ React5.createElement("button", {
     ref: buttonRef,
     className: mx4(orientation === "horizontal" ? "cursor-col-resize" : "cursor-row-resize", "group absolute is-3 bs-full inline-end-[-1px] !border-lb-0", "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:inset-block-0 before:inline-end-0 before:is-1 before:bg-accentFocusIndicator")
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     className: "absolute block-start-0 inline-end-[1px] bs-[--rail-size] flex items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0"
-  }, /* @__PURE__ */ React4.createElement(DragHandleSignifier, null)));
+  }, /* @__PURE__ */ React5.createElement(DragHandleSignifier, null)));
 };
 var DragHandleSignifier = () => {
-  return /* @__PURE__ */ React4.createElement("svg", {
+  return /* @__PURE__ */ React5.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 256 256",
     fill: "currentColor",
     className: "shrink-0 bs-[1em] is-[1em] text-unAccent"
-  }, /* @__PURE__ */ React4.createElement("path", {
+  }, /* @__PURE__ */ React5.createElement("path", {
     d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ React4.createElement("path", {
+  }), /* @__PURE__ */ React5.createElement("path", {
     d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ React4.createElement("path", {
+  }), /* @__PURE__ */ React5.createElement("path", {
     d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
-  }), /* @__PURE__ */ React4.createElement("path", {
+  }), /* @__PURE__ */ React5.createElement("path", {
     d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
   }));
 };
 
 // packages/ui/react-ui-stack/src/components/StackItemSigil.tsx
-import React6, { Fragment, forwardRef as forwardRef3, useRef as useRef2, useState } from "react";
+import React7, { Fragment, forwardRef as forwardRef4, useRef as useRef2, useState as useState2 } from "react";
 import { keySymbols } from "@dxos/keyboard";
 import { Button, DropdownMenu, Icon, toLocalizedString, Tooltip, useTranslation } from "@dxos/react-ui";
 import { useAttention as useAttention2 } from "@dxos/react-ui-attention";
@@ -200,15 +264,15 @@ import { descriptionText, mx as mx5 } from "@dxos/react-ui-theme";
 import { getHostPlatform } from "@dxos/util";
 
 // packages/ui/react-ui-stack/src/components/MenuSignifier.tsx
-import React5 from "react";
-var MenuSignifierHorizontal = () => /* @__PURE__ */ React5.createElement("svg", {
+import React6 from "react";
+var MenuSignifierHorizontal = () => /* @__PURE__ */ React6.createElement("svg", {
   className: "absolute block-end-[7px]",
   width: 20,
   height: 2,
   viewBox: "0 0 20 2",
   stroke: "currentColor",
   opacity: 0.5
-}, /* @__PURE__ */ React5.createElement("line", {
+}, /* @__PURE__ */ React6.createElement("line", {
   x1: 0.5,
   y1: 0.75,
   x2: 19,
@@ -238,25 +302,25 @@ var translations_default = [
 ];
 
 // packages/ui/react-ui-stack/src/components/StackItemSigil.tsx
-var StackItemSigilButton = /* @__PURE__ */ forwardRef3(({ attendableId, classNames, related, children, ...props }, forwardedRef) => {
+var StackItemSigilButton = /* @__PURE__ */ forwardRef4(({ attendableId, classNames, related, children, ...props }, forwardedRef) => {
   const { hasAttention, isAncestor, isRelated } = useAttention2(attendableId);
   const variant = related && isRelated || hasAttention || isAncestor ? "primary" : "ghost";
-  return /* @__PURE__ */ React6.createElement(Button, {
+  return /* @__PURE__ */ React7.createElement(Button, {
     ...props,
     variant,
     classNames: [
-      "m-1 shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative",
+      "shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative",
       classNames
     ],
     ref: forwardedRef
-  }, /* @__PURE__ */ React6.createElement(MenuSignifierHorizontal, null), children);
+  }, /* @__PURE__ */ React7.createElement(MenuSignifierHorizontal, null), children);
 });
-var StackItemSigil = /* @__PURE__ */ forwardRef3(({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {
+var StackItemSigil = /* @__PURE__ */ forwardRef4(({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {
   const { t } = useTranslation(translationKey);
   const suppressNextTooltip = useRef2(false);
-  const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
-  return /* @__PURE__ */ React6.createElement(Tooltip.Root, {
+  const [optionsMenuOpen, setOptionsMenuOpen] = useState2(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState2(false);
+  return /* @__PURE__ */ React7.createElement(Tooltip.Root, {
     open: triggerTooltipOpen,
     onOpenChange: (nextOpen) => {
       if (suppressNextTooltip.current) {
@@ -266,7 +330,7 @@ var StackItemSigil = /* @__PURE__ */ forwardRef3(({ actions: actionGroups, onAct
         setTriggerTooltipOpen(nextOpen);
       }
     }
-  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Root, {
+  }, /* @__PURE__ */ React7.createElement(DropdownMenu.Root, {
     open: optionsMenuOpen,
     onOpenChange: (nextOpen) => {
       if (!nextOpen) {
@@ -274,30 +338,30 @@ var StackItemSigil = /* @__PURE__ */ forwardRef3(({ actions: actionGroups, onAct
       }
       return setOptionsMenuOpen(nextOpen);
     }
-  }, /* @__PURE__ */ React6.createElement(Tooltip.Trigger, {
+  }, /* @__PURE__ */ React7.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React7.createElement(DropdownMenu.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React6.createElement(StackItemSigilButton, {
+  }, /* @__PURE__ */ React7.createElement(StackItemSigilButton, {
     attendableId,
     related
-  }, /* @__PURE__ */ React6.createElement("span", {
+  }, /* @__PURE__ */ React7.createElement("span", {
     className: "sr-only"
-  }, triggerLabel), /* @__PURE__ */ React6.createElement(Icon, {
+  }, triggerLabel), /* @__PURE__ */ React7.createElement(Icon, {
     icon,
     size: 5
-  })))), /* @__PURE__ */ React6.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React6.createElement(DropdownMenu.Content, {
+  })))), /* @__PURE__ */ React7.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React7.createElement(DropdownMenu.Content, {
     classNames: "z-[31]"
-  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Viewport, null, actionGroups?.map((actions, index) => {
-    const separator = index > 0 ? /* @__PURE__ */ React6.createElement(DropdownMenu.Separator, null) : null;
-    return /* @__PURE__ */ React6.createElement(Fragment, {
+  }, /* @__PURE__ */ React7.createElement(DropdownMenu.Viewport, null, actionGroups?.map((actions, index) => {
+    const separator = index > 0 ? /* @__PURE__ */ React7.createElement(DropdownMenu.Separator, null) : null;
+    return /* @__PURE__ */ React7.createElement(Fragment, {
       key: index
     }, separator, actions.map((action) => {
       const shortcut = typeof action.properties.keyBinding === "string" ? action.properties.keyBinding : action.properties.keyBinding?.[getHostPlatform()];
       const menuItemType = action.properties.menuItemType;
       const Root = menuItemType === "toggle" ? DropdownMenu.CheckboxItem : DropdownMenu.Item;
-      return /* @__PURE__ */ React6.createElement(Root, {
+      return /* @__PURE__ */ React7.createElement(Root, {
         key: action.id,
         onClick: (event) => {
           if (action.properties.disabled) {
@@ -314,40 +378,37 @@ var StackItemSigil = /* @__PURE__ */ forwardRef3(({ actions: actionGroups, onAct
         ...action.properties?.testId && {
           "data-testid": action.properties.testId
         }
-      }, /* @__PURE__ */ React6.createElement(Icon, {
+      }, /* @__PURE__ */ React7.createElement(Icon, {
         icon: action.properties.icon ?? "ph--placeholder--regular",
         size: 4
-      }), /* @__PURE__ */ React6.createElement("span", {
+      }), /* @__PURE__ */ React7.createElement("span", {
         className: "grow truncate"
-      }, toLocalizedString(action.properties.label ?? "", t)), menuItemType === "toggle" && /* @__PURE__ */ React6.createElement(DropdownMenu.ItemIndicator, {
+      }, toLocalizedString(action.properties.label ?? "", t)), menuItemType === "toggle" && /* @__PURE__ */ React7.createElement(DropdownMenu.ItemIndicator, {
         asChild: true
-      }, /* @__PURE__ */ React6.createElement(Icon, {
+      }, /* @__PURE__ */ React7.createElement(Icon, {
         icon: "ph--check--regular",
         size: 4
-      })), shortcut && /* @__PURE__ */ React6.createElement("span", {
+      })), shortcut && /* @__PURE__ */ React7.createElement("span", {
         className: mx5("shrink-0", descriptionText)
       }, keySymbols(shortcut).join("")));
     }));
-  }), children), /* @__PURE__ */ React6.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React6.createElement(Tooltip.Portal, null, /* @__PURE__ */ React6.createElement(Tooltip.Content, {
-    style: {
-      zIndex: 70
-    },
+  }), children), /* @__PURE__ */ React7.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React7.createElement(Tooltip.Portal, null, /* @__PURE__ */ React7.createElement(Tooltip.Content, {
     side: "bottom"
-  }, triggerLabel, /* @__PURE__ */ React6.createElement(Tooltip.Arrow, null))));
+  }, triggerLabel, /* @__PURE__ */ React7.createElement(Tooltip.Arrow, null))));
 });
 
 // packages/ui/react-ui-stack/src/components/StackItem.tsx
 var DEFAULT_HORIZONTAL_SIZE = 44;
 var DEFAULT_VERTICAL_SIZE = "min-content";
 var DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE;
-var StackItemRoot = /* @__PURE__ */ forwardRef4(({ item, children, classNames, onRearrange, size: propsSize, onSizeChange, role, order, style, ...props }, forwardedRef) => {
-  const [itemElement, itemRef] = useState2(null);
-  const [selfDragHandleElement, selfDragHandleRef] = useState2(null);
-  const [_closestEdge, setEdge] = useState2(null);
-  const { orientation, rail, separators } = useStack();
-  const [size = orientation === "horizontal" ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] = useState2(propsSize);
+var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, size: propsSize, onSizeChange, role, order, style, ...props }, forwardedRef) => {
+  const [itemElement, itemRef] = useState3(null);
+  const [selfDragHandleElement, selfDragHandleRef] = useState3(null);
+  const [closestEdge, setEdge] = useState3(null);
+  const { orientation, rail, onRearrange } = useStack();
+  const [size = orientation === "horizontal" ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] = useState3(propsSize);
   const Root = role ?? "div";
-  const composedItemRef = composeRefs(itemRef, forwardedRef);
+  const composedItemRef = composeRefs2(itemRef, forwardedRef);
   const setSize = useCallback((nextSize, commit) => {
     setInternalSize(nextSize);
     if (commit) {
@@ -357,7 +418,7 @@ var StackItemRoot = /* @__PURE__ */ forwardRef4(({ item, children, classNames, o
     onSizeChange
   ]);
   const type = orientation === "horizontal" ? "column" : "card";
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!itemElement || !onRearrange) {
       return;
     }
@@ -369,11 +430,18 @@ var StackItemRoot = /* @__PURE__ */ forwardRef4(({ item, children, classNames, o
       getInitialData: () => ({
         id: item.id,
         type
-      })
-    }), dropTargetForElements({
+      }),
+      // TODO(thure): tabster focus honeypots are causing the preview to render with the wrong dimensions; what do?
+      onGenerateDragPreview: ({ nativeSetDragImage }) => {
+        disableNativeDragPreview2({
+          nativeSetDragImage
+        });
+        preventUnhandled2.start();
+      }
+    }), dropTargetForElements2({
       element: itemElement,
       getData: ({ input, element }) => {
-        return attachClosestEdge({
+        return attachClosestEdge2({
           id: item.id,
           type
         }, {
@@ -390,19 +458,19 @@ var StackItemRoot = /* @__PURE__ */ forwardRef4(({ item, children, classNames, o
       },
       onDragEnter: ({ self, source }) => {
         if (source.data.type === self.data.type) {
-          setEdge(extractClosestEdge(self.data));
+          setEdge(extractClosestEdge2(self.data));
         }
       },
       onDrag: ({ self, source }) => {
         if (source.data.type === self.data.type) {
-          setEdge(extractClosestEdge(self.data));
+          setEdge(extractClosestEdge2(self.data));
         }
       },
       onDragLeave: () => setEdge(null),
       onDrop: ({ self, source }) => {
         setEdge(null);
         if (source.data.type === self.data.type) {
-          onRearrange(source.data, self.data, extractClosestEdge(self.data));
+          onRearrange(source.data, self.data, extractClosestEdge2(self.data));
         }
       }
     }));
@@ -416,17 +484,17 @@ var StackItemRoot = /* @__PURE__ */ forwardRef4(({ item, children, classNames, o
   const focusGroupAttrs = useFocusableGroup2({
     tabBehavior: "limited"
   });
-  return /* @__PURE__ */ React7.createElement(StackItemContext.Provider, {
+  return /* @__PURE__ */ React8.createElement(StackItemContext.Provider, {
     value: {
       selfDragHandleRef,
       size,
       setSize
     }
-  }, /* @__PURE__ */ React7.createElement(Root, {
+  }, /* @__PURE__ */ React8.createElement(Root, {
     ...props,
     tabIndex: 0,
     ...focusGroupAttrs,
-    className: mx6("group/stack-item grid relative ch-focus-ring-inset-over-all", 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"), separators && (orientation === "horizontal" ? "divide-separator divide-y" : "divide-separator divide-x"), classNames),
+    className: mx6("group/stack-item grid relative ch-focus-ring-inset-over-all", 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),
     "data-dx-stack-item": true,
     style: {
       ...size !== "min-content" && {
@@ -438,7 +506,9 @@ var StackItemRoot = /* @__PURE__ */ forwardRef4(({ item, children, classNames, o
       ...style
     },
     ref: composedItemRef
-  }, children));
+  }, children, closestEdge && /* @__PURE__ */ React8.createElement(ListItem2.DropIndicator, {
+    edge: closestEdge
+  })));
 });
 var StackItem = {
   Root: StackItemRoot,
@@ -446,55 +516,55 @@ var StackItem = {
   Heading: StackItemHeading,
   HeadingLabel: StackItemHeadingLabel,
   ResizeHandle: StackItemResizeHandle,
+  DragHandle: StackItemDragHandle,
   Sigil: StackItemSigil,
   SigilButton: StackItemSigilButton
 };
 
 // packages/ui/react-ui-stack/src/components/LayoutControls.tsx
-import React8, { forwardRef as forwardRef5 } from "react";
+import React9, { forwardRef as forwardRef6 } from "react";
 import { Button as Button2, ButtonGroup, Icon as Icon2, Tooltip as Tooltip2, useTranslation as useTranslation2 } from "@dxos/react-ui";
 var LayoutControl = ({ icon, label, ...props }) => {
-  return /* @__PURE__ */ React8.createElement(Tooltip2.Root, null, /* @__PURE__ */ React8.createElement(Tooltip2.Trigger, {
+  return /* @__PURE__ */ React9.createElement(Tooltip2.Root, null, /* @__PURE__ */ React9.createElement(Tooltip2.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React8.createElement(Button2, {
+  }, /* @__PURE__ */ React9.createElement(Button2, {
     variant: "ghost",
     ...props
-  }, /* @__PURE__ */ React8.createElement("span", {
+  }, /* @__PURE__ */ React9.createElement("span", {
     className: "sr-only"
-  }, label), /* @__PURE__ */ React8.createElement(Icon2, {
+  }, label), /* @__PURE__ */ React9.createElement(Icon2, {
     icon
-  }))), /* @__PURE__ */ React8.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React8.createElement(Tooltip2.Content, {
-    side: "bottom",
-    classNames: "z-[70]"
+  }))), /* @__PURE__ */ React9.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React9.createElement(Tooltip2.Content, {
+    side: "bottom"
   }, label)));
 };
-var LayoutControls = /* @__PURE__ */ forwardRef5(({ onClick, variant = "default", capabilities: can, isSolo, pin, close = false, children, ...props }, forwardedRef) => {
+var LayoutControls = /* @__PURE__ */ forwardRef6(({ onClick, variant = "default", capabilities: can, isSolo, pin, close = false, children, ...props }, forwardedRef) => {
   const { t } = useTranslation2(translationKey);
   const buttonClassNames = variant === "hide-disabled" ? "disabled:hidden !p-1" : "!p-1";
-  return /* @__PURE__ */ React8.createElement(ButtonGroup, {
+  return /* @__PURE__ */ React9.createElement(ButtonGroup, {
     ...props,
     ref: forwardedRef
   }, pin && !isSolo && [
     "both",
     "start"
-  ].includes(pin) && /* @__PURE__ */ React8.createElement(LayoutControl, {
+  ].includes(pin) && /* @__PURE__ */ React9.createElement(LayoutControl, {
     label: t("pin start label"),
     variant: "ghost",
     classNames: buttonClassNames,
     onClick: () => onClick?.("pin-start"),
     icon: "ph--caret-line-left--regular"
-  }), can.solo && /* @__PURE__ */ React8.createElement(LayoutControl, {
+  }), can.solo && /* @__PURE__ */ React9.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__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(LayoutControl, {
+  }), !isSolo && can.solo && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(LayoutControl, {
     label: t("increment start label"),
     disabled: !can.incrementStart,
     classNames: buttonClassNames,
     onClick: () => onClick?.("increment-start"),
     icon: "ph--caret-left--regular"
-  }), /* @__PURE__ */ React8.createElement(LayoutControl, {
+  }), /* @__PURE__ */ React9.createElement(LayoutControl, {
     label: t("increment end label"),
     disabled: !can.incrementEnd,
     classNames: buttonClassNames,
@@ -503,12 +573,12 @@ var LayoutControls = /* @__PURE__ */ forwardRef5(({ onClick, variant = "default"
   })), pin && !isSolo && [
     "both",
     "end"
-  ].includes(pin) && /* @__PURE__ */ React8.createElement(LayoutControl, {
+  ].includes(pin) && /* @__PURE__ */ React9.createElement(LayoutControl, {
     label: t("pin end label"),
     classNames: buttonClassNames,
     onClick: () => onClick?.("pin-end"),
     icon: "ph--caret-line-right--regular"
-  }), close && !isSolo && /* @__PURE__ */ React8.createElement(LayoutControl, {
+  }), close && !isSolo && /* @__PURE__ */ React9.createElement(LayoutControl, {
     label: t(`${typeof close === "string" ? "minify" : "close"} label`),
     classNames: buttonClassNames,
     onClick: () => onClick?.("close"),
@@ -524,8 +594,11 @@ export {
   Stack,
   StackContext,
   StackItem,
+  StackItemContext,
   railGridHorizontal,
   railGridVertical,
-  translations_default as translations
+  translations_default as translations,
+  useStack,
+  useStackItem
 };
 //# sourceMappingURL=index.mjs.map