@dxos/react-ui-stack 0.8.4-main.d05673bc65 → 0.8.4-main.dfabb4ec29

package/dist/lib/browser/index.mjs

@@ -1,14 +1,14 @@
 // src/components/Stack/Stack.tsx
 import { composeRefs } from "@radix-ui/react-compose-refs";
-import React, { Children, forwardRef, useCallback, useEffect, useMemo, useState as useState2 } from "react";
+import React, { Children, forwardRef, useCallback, useEffect, useState as useState2 } from "react";
 import { ListItem, useId } from "@dxos/react-ui";
 import { mx } from "@dxos/ui-theme";
 
 // src/hooks/useStackDropForElements.ts
-import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { useLayoutEffect, useState } from "react";
 var noop = () => {
 };
@@ -95,11 +95,6 @@ var useStackItem = () => useContext(StackItemContext);
 // src/components/Stack/Stack.tsx
 var railGridHorizontal = "grid-rows-[[rail-start]_var(--dx-rail-size)_[content-start]_1fr_[content-end]]";
 var railGridVertical = "grid-cols-[[rail-start]_var(--dx-rail-size)_[content-start]_1fr_[content-end]]";
-var railGridHorizontalContainFitContent = "grid-rows-[[rail-start]_var(--dx-rail-size)_[content-start]_fit-content(calc(100%-var(--dx-rail-size)*2+2px))_[content-end]]";
-var railGridVerticalContainFitContent = "grid-cols-[[rail-start]_var(--dx-rail-size)_[content-start]_fit-content(calc(100%-var(--dx-rail-size)*2+2px))_[content-end]]";
-var autoScrollRootAttributes = {
-  "data-drag-autoscroll": "idle"
-};
 var PERPENDICULAR_FOCUS_THRESHHOLD = 128;
 var scrollIntoViewAndFocus = (el, orientation) => {
   el.scrollIntoView({
@@ -108,18 +103,14 @@ var scrollIntoViewAndFocus = (el, orientation) => {
   });
   return el.focus();
 };
-var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientation = "vertical", rail = true, size = "intrinsic", onRearrange, itemsCount = Children.count(children), getDropElement, separatorOnScroll, circularFocus, ...props }, forwardedRef) => {
-  const stackId = useId("stack", props.id);
+var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, id, style, orientation = "vertical", rail = true, size = "intrinsic", itemsCount = Children.count(children), circularFocus, separatorOnScroll, getDropElement, onBlur, onKeyDown, onRearrange, ...props }, forwardedRef) => {
+  const stackId = useId("stack", id);
   const [stackElement, stackRef] = useState2(null);
   const [lastFocusedItem, setLastFocusedItem] = useState2();
   const composedItemRef = composeRefs(stackRef, forwardedRef);
-  const styles = {
-    [orientation === "horizontal" ? "gridTemplateColumns" : "gridTemplateRows"]: size === "split" ? `repeat(${itemsCount}, 1fr)` : `repeat(${itemsCount}, min-content) [tabster-dummies] 0`,
-    ...style
-  };
-  const selfDroppable = !!(itemsCount < 1 && onRearrange && props.id);
+  const selfDroppable = !!(itemsCount < 1 && onRearrange && id);
   const { dropping } = useStackDropForElements({
-    id: props.id,
+    id,
     element: getDropElement && stackElement ? getDropElement(stackElement) : stackElement,
     scrollElement: stackElement,
     selfDroppable,
@@ -150,116 +141,12 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
         setLastFocusedItem(closestStackItem?.getAttribute("data-dx-item-id") ?? void 0);
       }
     }
-    props.onBlur?.(event);
-  }, [
-    stackId,
-    props.onBlur
-  ]);
-  const handleKeyDown = useCallback((event) => {
-    const target = event.target;
-    if (event.key.startsWith("Arrow") && !target.closest(`input, textarea, [role="textbox"], [data-tabster*="mover"], [data-arrow-keys="all"], [data-arrow-keys~="${event.key.toLowerCase().slice(5)}"]`)) {
-      const closestOwnedItem = target.closest(`[data-dx-stack-item="${stackId}"]`);
-      const closestStack = target.closest("[data-dx-stack]");
-      const closestStackItems = Array.from(closestStack?.querySelectorAll(`[data-dx-stack-item="${stackId}"]`) ?? []);
-      const closestStackOrientation = closestStack?.getAttribute("aria-orientation");
-      const ancestorStack = closestStack?.parentElement?.closest("[data-dx-stack]");
-      if (closestOwnedItem && closestStack) {
-        const ancestorOrientation = ancestorStack?.getAttribute("aria-orientation");
-        const parallelDelta = (closestStackOrientation === "vertical" ? event.key === "ArrowUp" : event.key === "ArrowLeft") ? -1 : (closestStackOrientation === "vertical" ? event.key === "ArrowDown" : event.key === "ArrowRight") ? 1 : 0;
-        const perpendicularDelta = (closestStackOrientation === "vertical" ? event.key === "ArrowLeft" : event.key === "ArrowUp") ? -1 : (closestStackOrientation === "vertical" ? event.key === "ArrowRight" : event.key === "ArrowDown") ? 1 : 0;
-        if (parallelDelta !== 0) {
-          const currentIndex = closestStackItems.indexOf(closestOwnedItem);
-          const nextIndex = currentIndex + parallelDelta;
-          let adjacentItem;
-          if (circularFocus) {
-            adjacentItem = closestStackItems[(nextIndex + closestStackItems.length) % closestStackItems.length];
-          } else {
-            if (nextIndex >= 0 && nextIndex < closestStackItems.length) {
-              adjacentItem = closestStackItems[nextIndex];
-            }
-          }
-          if (adjacentItem) {
-            event.preventDefault();
-            scrollIntoViewAndFocus(adjacentItem, closestStackOrientation);
-          }
-        }
-        if (perpendicularDelta !== 0) {
-          if (ancestorStack && ancestorOrientation !== closestStackOrientation) {
-            const siblingStacks = Array.from(ancestorStack.querySelectorAll(`[data-dx-stack-item="${ancestorStack.getAttribute("data-dx-stack")}"] [data-dx-stack]`));
-            const currentStackIndex = siblingStacks.indexOf(closestStack);
-            const nextStackIndex = currentStackIndex + perpendicularDelta;
-            let adjacentStack;
-            if (ancestorStack.getAttribute("data-dx-stack-circular-focus") === "true") {
-              adjacentStack = siblingStacks[(nextStackIndex + siblingStacks.length) % siblingStacks.length];
-            } else {
-              if (nextStackIndex >= 0 && nextStackIndex < siblingStacks.length) {
-                adjacentStack = siblingStacks[nextStackIndex];
-              }
-            }
-            const adjacentStackSelfItem = adjacentStack?.closest(`[data-dx-stack-item=${ancestorStack.getAttribute("data-dx-stack")}]`);
-            const adjacentStackItems = adjacentStack ? Array.from(adjacentStack.querySelectorAll(`[data-dx-stack-item="${adjacentStack.getAttribute("data-dx-stack")}"]`)) : [];
-            if (adjacentStack && adjacentStackItems.length > 0) {
-              let closestItem = adjacentStackItems[0];
-              const lastFocusedItem2 = adjacentStack.querySelector(`[data-dx-item-id="${adjacentStack.getAttribute("data-dx-last-focused-item") ?? "never"}"]`);
-              if (lastFocusedItem2) {
-                closestItem = lastFocusedItem2;
-              } else {
-                const ownedItemRect = closestOwnedItem.getBoundingClientRect();
-                const targetPosition = closestStackOrientation === "vertical" ? ownedItemRect.top : ownedItemRect.left;
-                let closestDistance = Infinity;
-                for (const item of adjacentStackItems) {
-                  const itemRect = item.getBoundingClientRect();
-                  const itemPosition = closestStackOrientation === "vertical" ? itemRect.top : itemRect.left;
-                  const distance = Math.abs(itemPosition - targetPosition);
-                  if (distance < closestDistance) {
-                    closestDistance = distance;
-                    closestItem = item;
-                  }
-                  if (closestDistance <= PERPENDICULAR_FOCUS_THRESHHOLD) {
-                    break;
-                  }
-                }
-              }
-              event.preventDefault();
-              scrollIntoViewAndFocus(closestItem, closestStackOrientation);
-            } else if (adjacentStackSelfItem) {
-              event.preventDefault();
-              scrollIntoViewAndFocus(adjacentStackSelfItem, ancestorOrientation);
-            }
-          } else if (closestOwnedItem) {
-            const closestOwnedItemStack = closestOwnedItem.querySelector("[data-dx-stack]");
-            const closestOwnedItemStackItems = closestOwnedItemStack ? Array.from(closestOwnedItemStack.querySelectorAll(`[data-dx-stack-item="${closestOwnedItemStack.getAttribute("data-dx-stack")}"]`)) : [];
-            if (closestOwnedItemStackItems.length > 0) {
-              event.preventDefault();
-              scrollIntoViewAndFocus(closestOwnedItemStackItems[[
-                "ArrowUp",
-                "ArrowLeft"
-              ].includes(event.key) ? closestOwnedItemStackItems.length - 1 : 0], closestOwnedItemStack?.getAttribute("aria-orientation"));
-            }
-          }
-        }
-      }
-    }
-    props.onKeyDown?.(event);
+    onBlur?.(event);
   }, [
-    props.onKeyDown,
     stackId,
-    circularFocus
-  ]);
-  const gridClasses = useMemo(() => {
-    if (!rail) {
-      return orientation === "horizontal" ? "grid-rows-1 px-(--stack-gap)" : "grid-cols-1 py-(--stack-gap)";
-    }
-    if (orientation === "horizontal") {
-      return railGridHorizontal;
-    } else {
-      return railGridVertical;
-    }
-  }, [
-    rail,
-    orientation,
-    size
+    onBlur
   ]);
+  const handleKeyDown = useKeyDown(stackId, circularFocus, onKeyDown);
   useEffect(() => {
     if (!(stackElement && Number.isFinite(separatorOnScroll))) {
       return;
@@ -280,27 +167,30 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
   ]);
   return /* @__PURE__ */ React.createElement(StackContext.Provider, {
     value: {
+      stackId,
       orientation,
       rail,
       size,
-      onRearrange,
-      stackId
+      onRearrange
     }
   }, /* @__PURE__ */ React.createElement("div", {
     ...props,
-    className: mx("grid relative [--stack-gap:var(--spacing-trim-xs)]", gridClasses, size === "contain" && (orientation === "horizontal" ? "overflow-x-auto overscroll-x-contain min-h-0 max-h-full h-full" : "overflow-y-auto min-w-0 max-w-full w-full"), classNames),
-    onKeyDown: handleKeyDown,
-    onBlur: handleBlur,
+    ...Number.isFinite(separatorOnScroll) && {
+      onScroll: handleScroll
+    },
+    className: mx("relative grid [--stack-gap:var(--spacing-trim-xs)]", size === "contain" && (orientation === "horizontal" ? "overflow-x-auto overscroll-x-contain min-h-0 max-h-full h-full" : "overflow-y-auto min-w-0 max-w-full w-full"), rail ? orientation === "horizontal" ? railGridHorizontal : railGridVertical : orientation === "horizontal" ? "grid-rows-1 px-(--stack-gap)" : "grid-cols-1 py-(--stack-gap)", classNames),
+    style: {
+      [orientation === "horizontal" ? "gridTemplateColumns" : "gridTemplateRows"]: size === "split" ? `repeat(${itemsCount}, 1fr)` : `repeat(${itemsCount}, min-content) [tabster-dummies] 0`,
+      ...style
+    },
+    "aria-orientation": orientation,
     "data-dx-stack": stackId,
     "data-dx-stack-circular-focus": circularFocus,
     "data-dx-last-focused-item": lastFocusedItem,
     "data-rail": rail,
-    "aria-orientation": orientation,
-    style: styles,
-    ref: composedItemRef,
-    ...Number.isFinite(separatorOnScroll) && {
-      onScroll: handleScroll
-    }
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    ref: composedItemRef
   }, children, selfDroppable && dropping && /* @__PURE__ */ React.createElement(ListItem.DropIndicator, {
     lineInset: 8,
     terminalInset: -8,
@@ -308,28 +198,119 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
     edge: orientation === "horizontal" ? "left" : "top"
   })));
 });
+var useKeyDown = (stackId, circularFocus, onKeyDown) => useCallback((event) => {
+  const target = event.target;
+  if (event.key.startsWith("Arrow") && !target.closest(`input, textarea, [role="textbox"], [data-tabster*="mover"], [data-arrow-keys="all"], [data-arrow-keys~="${event.key.toLowerCase().slice(5)}"]`)) {
+    const closestOwnedItem = target.closest(`[data-dx-stack-item="${stackId}"]`);
+    const closestStack = target.closest("[data-dx-stack]");
+    const closestStackItems = Array.from(closestStack?.querySelectorAll(`[data-dx-stack-item="${stackId}"]`) ?? []);
+    const closestStackOrientation = closestStack?.getAttribute("aria-orientation");
+    const ancestorStack = closestStack?.parentElement?.closest("[data-dx-stack]");
+    if (closestOwnedItem && closestStack) {
+      const ancestorOrientation = ancestorStack?.getAttribute("aria-orientation");
+      const parallelDelta = (closestStackOrientation === "vertical" ? event.key === "ArrowUp" : event.key === "ArrowLeft") ? -1 : (closestStackOrientation === "vertical" ? event.key === "ArrowDown" : event.key === "ArrowRight") ? 1 : 0;
+      const perpendicularDelta = (closestStackOrientation === "vertical" ? event.key === "ArrowLeft" : event.key === "ArrowUp") ? -1 : (closestStackOrientation === "vertical" ? event.key === "ArrowRight" : event.key === "ArrowDown") ? 1 : 0;
+      if (parallelDelta !== 0) {
+        const currentIndex = closestStackItems.indexOf(closestOwnedItem);
+        const nextIndex = currentIndex + parallelDelta;
+        let adjacentItem;
+        if (circularFocus) {
+          adjacentItem = closestStackItems[(nextIndex + closestStackItems.length) % closestStackItems.length];
+        } else {
+          if (nextIndex >= 0 && nextIndex < closestStackItems.length) {
+            adjacentItem = closestStackItems[nextIndex];
+          }
+        }
+        if (adjacentItem) {
+          event.preventDefault();
+          scrollIntoViewAndFocus(adjacentItem, closestStackOrientation);
+        }
+      }
+      if (perpendicularDelta !== 0) {
+        if (ancestorStack && ancestorOrientation !== closestStackOrientation) {
+          const siblingStacks = Array.from(ancestorStack.querySelectorAll(`[data-dx-stack-item="${ancestorStack.getAttribute("data-dx-stack")}"] [data-dx-stack]`));
+          const currentStackIndex = siblingStacks.indexOf(closestStack);
+          const nextStackIndex = currentStackIndex + perpendicularDelta;
+          let adjacentStack;
+          if (ancestorStack.getAttribute("data-dx-stack-circular-focus") === "true") {
+            adjacentStack = siblingStacks[(nextStackIndex + siblingStacks.length) % siblingStacks.length];
+          } else {
+            if (nextStackIndex >= 0 && nextStackIndex < siblingStacks.length) {
+              adjacentStack = siblingStacks[nextStackIndex];
+            }
+          }
+          const adjacentStackSelfItem = adjacentStack?.closest(`[data-dx-stack-item=${ancestorStack.getAttribute("data-dx-stack")}]`);
+          const adjacentStackItems = adjacentStack ? Array.from(adjacentStack.querySelectorAll(`[data-dx-stack-item="${adjacentStack.getAttribute("data-dx-stack")}"]`)) : [];
+          if (adjacentStack && adjacentStackItems.length > 0) {
+            let closestItem = adjacentStackItems[0];
+            const lastFocusedItem = adjacentStack.querySelector(`[data-dx-item-id="${adjacentStack.getAttribute("data-dx-last-focused-item") ?? "never"}"]`);
+            if (lastFocusedItem) {
+              closestItem = lastFocusedItem;
+            } else {
+              const ownedItemRect = closestOwnedItem.getBoundingClientRect();
+              const targetPosition = closestStackOrientation === "vertical" ? ownedItemRect.top : ownedItemRect.left;
+              let closestDistance = Infinity;
+              for (const item of adjacentStackItems) {
+                const itemRect = item.getBoundingClientRect();
+                const itemPosition = closestStackOrientation === "vertical" ? itemRect.top : itemRect.left;
+                const distance = Math.abs(itemPosition - targetPosition);
+                if (distance < closestDistance) {
+                  closestDistance = distance;
+                  closestItem = item;
+                }
+                if (closestDistance <= PERPENDICULAR_FOCUS_THRESHHOLD) {
+                  break;
+                }
+              }
+            }
+            event.preventDefault();
+            scrollIntoViewAndFocus(closestItem, closestStackOrientation);
+          } else if (adjacentStackSelfItem) {
+            event.preventDefault();
+            scrollIntoViewAndFocus(adjacentStackSelfItem, ancestorOrientation);
+          }
+        } else if (closestOwnedItem) {
+          const closestOwnedItemStack = closestOwnedItem.querySelector("[data-dx-stack]");
+          const closestOwnedItemStackItems = closestOwnedItemStack ? Array.from(closestOwnedItemStack.querySelectorAll(`[data-dx-stack-item="${closestOwnedItemStack.getAttribute("data-dx-stack")}"]`)) : [];
+          if (closestOwnedItemStackItems.length > 0) {
+            event.preventDefault();
+            scrollIntoViewAndFocus(closestOwnedItemStackItems[[
+              "ArrowUp",
+              "ArrowLeft"
+            ].includes(event.key) ? closestOwnedItemStackItems.length - 1 : 0], closestOwnedItemStack?.getAttribute("aria-orientation"));
+          }
+        }
+      }
+    }
+  }
+  onKeyDown?.(event);
+}, [
+  onKeyDown,
+  stackId,
+  circularFocus
+]);
 
 // src/components/StackItem/StackItem.tsx
+import { attachClosestEdge as attachClosestEdge2, extractClosestEdge as extractClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { preserveOffsetOnSource } from "@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source";
 import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
-import { attachClosestEdge as attachClosestEdge2, extractClosestEdge as extractClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
-import React8, { forwardRef as forwardRef5, useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useState as useState4 } from "react";
+import React8, { forwardRef as forwardRef5, useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 import { ListItem as ListItem2 } from "@dxos/react-ui";
 import { resizeAttributes, sizeStyle } from "@dxos/react-ui-dnd";
 import { mx as mx5 } from "@dxos/ui-theme";
 
 // src/components/StackItem/StackItemContent.tsx
-import React2, { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
+import React2, { forwardRef as forwardRef2, useMemo } from "react";
 import { mx as mx2 } from "@dxos/ui-theme";
 var StackItemContent = /* @__PURE__ */ forwardRef2(({ classNames, children, toolbar, statusbar, ...props }, forwardedRef) => {
   const { size: stackItemSize } = useStack();
   const { role } = useStackItem();
-  const style = useMemo2(() => ({
+  const style = useMemo(() => ({
     gridTemplateRows: [
       toolbar && role === "section" ? "calc(var(--dx-toolbar-size) - 1px)" : "var(--dx-toolbar-size)",
       "1fr",
@@ -341,7 +322,6 @@ var StackItemContent = /* @__PURE__ */ forwardRef2(({ classNames, children, tool
   ]);
   return /* @__PURE__ */ React2.createElement("div", {
     ...props,
-    role: "none",
     style,
     className: mx2("group grid grid-cols-[100%] dx-density-coarse", stackItemSize === "contain" && "min-h-0 overflow-hidden", toolbar && role === "section" && "[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:top-0 [&_.dx-toolbar]:-mb-px [&_.dx-toolbar]:min-w-0", toolbar && "[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-b [&>.dx-toolbar]:border-subdued-separator", classNames),
     "data-popover-collision-boundary": true,
@@ -369,18 +349,17 @@ import { Slot as Slot2 } from "@radix-ui/react-slot";
 import React4, { forwardRef as forwardRef3 } from "react";
 import { useAttention } from "@dxos/react-ui-attention";
 import { mx as mx3 } from "@dxos/ui-theme";
-var StackItemHeading = ({ children, classNames, asChild, separateOnScroll, ...props }) => {
+var StackItemHeading = ({ children, classNames, asChild, separateOnScroll, role, ...props }) => {
   const { orientation } = useStack();
   const Comp = asChild ? Slot2 : Primitive2.div;
   return /* @__PURE__ */ React4.createElement(Comp, {
-    role: "heading",
     ...props,
+    role: role ?? "heading",
     className: mx3("flex items-center border-x-0! bg-header-surface", separateOnScroll ? 'border-transparent [[data-scroll-separator="true"]_&]:border-subdued-separator' : "border-subdued-separator", orientation === "horizontal" ? "h-(--dx-rail-size)" : "w-(--dx-rail-size) flex-col", orientation === "horizontal" ? "border-b" : "border-e", classNames)
   }, children);
 };
 var StackItemHeadingStickyContent = ({ children }) => {
   return /* @__PURE__ */ React4.createElement("div", {
-    role: "none",
     className: "sticky top-0 bg-(--sticky-bg) p-1 w-full"
   }, children);
 };
@@ -418,25 +397,7 @@ import { Button, DropdownMenu, Icon, toLocalizedString, useTranslation } from "@
 import { useAttention as useAttention2 } from "@dxos/react-ui-attention";
 import { mx as mx4 } from "@dxos/ui-theme";
 import { getHostPlatform } from "@dxos/util";
-
-// src/translations.ts
-var translationKey = "@dxos/react-ui-stack";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "resize label": "Drag to resize",
-        "drag handle label": "Drag to rearrange",
-        "pin start label": "Pin to the left sidebar",
-        "pin end label": "Pin to the right sidebar",
-        "increment start label": "Move to the left",
-        "increment end label": "Move to the right",
-        "close label": "Close",
-        "minify label": "Minify"
-      }
-    }
-  }
-];
+import { translationKey } from "#translations";
 
 // src/components/StackItem/MenuSignifier.tsx
 import React6 from "react";
@@ -486,8 +447,7 @@ var StackItemSigil = /* @__PURE__ */ forwardRef4(({ actions: actionGroups, onAct
   }, /* @__PURE__ */ React7.createElement("span", {
     className: "sr-only"
   }, triggerLabel), /* @__PURE__ */ React7.createElement(Icon, {
-    icon,
-    size: 5
+    icon
   }));
   if (!hasActions) {
     return button;
@@ -542,10 +502,10 @@ var StackItemSigil = /* @__PURE__ */ forwardRef4(({ actions: actionGroups, onAct
 });
 
 // src/components/StackItem/StackItem.tsx
-var DEFAULT_HORIZONTAL_SIZE = 48;
 var DEFAULT_VERTICAL_SIZE = "min-content";
+var DEFAULT_HORIZONTAL_SIZE = 50;
 var DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE;
-var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, size: propsSize, onSizeChange, role, order, prevSiblingId, nextSiblingId, style, disableRearrange, focusIndicatorVariant = "over-all", ...props }, forwardedRef) => {
+var StackItemRoot = /* @__PURE__ */ forwardRef5(({ classNames, children, style, role, item, order, prevSiblingId, nextSiblingId, size: sizeProp, onSizeChange, disableRearrange, focusIndicatorVariant = "over-all", ...props }, forwardedRef) => {
   const [itemElement, itemRef] = useState4(null);
   const composedItemRef = composeRefs2(itemRef, forwardedRef);
   const [selfDragHandleElement, selfDragHandleRef] = useState4(null);
@@ -553,7 +513,7 @@ var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, s
   const [sourceId, setSourceId] = useState4(null);
   const [dragState, setDragState] = useState4(idle);
   const { orientation, rail, onRearrange, size: stackSize, stackId } = useStack();
-  const [size = orientation === "horizontal" ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] = useState4(propsSize);
+  const [size = orientation === "horizontal" ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] = useState4(sizeProp);
   const Root = role ?? "div";
   const setSize = useCallback2((nextSize, commit) => {
     setInternalSize(nextSize);
@@ -607,7 +567,7 @@ var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, s
         document.body.removeAttribute("data-drag-preview");
         itemElement?.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "active");
         setDragState({
-          type: "w-dragging",
+          type: "is-dragging",
           item
         });
       },
@@ -684,7 +644,7 @@ var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, s
     }
     return true;
   };
-  const stackItemContextValue = useMemo3(() => ({
+  const stackItemContextValue = useMemo2(() => ({
     selfDragHandleRef,
     size,
     setSize,
@@ -748,12 +708,7 @@ export {
   Stack,
   StackContext,
   StackItem,
-  autoScrollRootAttributes,
   railGridHorizontal,
-  railGridHorizontalContainFitContent,
-  railGridVertical,
-  railGridVerticalContainFitContent,
-  translationKey,
-  translations
+  railGridVertical
 };
 //# sourceMappingURL=index.mjs.map