@dxos/react-ui-stack 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/dist/lib/node/index.cjs

@@ -28,82 +28,103 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var node_exports = {};
 __export(node_exports, {
+  Card: () => Card,
+  CardDragPreview: () => CardDragPreview2,
+  CardStack: () => CardStack,
+  CardStackDragPreview: () => CardStackDragPreview,
   DEFAULT_EXTRINSIC_SIZE: () => DEFAULT_EXTRINSIC_SIZE,
   DEFAULT_HORIZONTAL_SIZE: () => DEFAULT_HORIZONTAL_SIZE,
   DEFAULT_VERTICAL_SIZE: () => DEFAULT_VERTICAL_SIZE,
-  LayoutControls: () => LayoutControls,
   Stack: () => Stack,
   StackContext: () => StackContext,
   StackItem: () => StackItem,
-  StackItemContext: () => StackItemContext,
+  StackItemDragPreview: () => StackItemDragPreview,
   autoScrollRootAttributes: () => autoScrollRootAttributes,
+  cardChrome: () => cardChrome,
+  cardContent: () => cardContent,
+  cardHeading: () => cardHeading,
+  cardRoot: () => cardRoot,
+  cardStackContent: () => cardStackContent,
+  cardStackFooter: () => cardStackFooter,
+  cardStackHeading: () => cardStackHeading,
+  cardStackRoot: () => cardStackRoot,
+  cardText: () => cardText,
   railGridHorizontal: () => railGridHorizontal,
   railGridHorizontalContainFitContent: () => railGridHorizontalContainFitContent,
   railGridVertical: () => railGridVertical,
   railGridVerticalContainFitContent: () => railGridVerticalContainFitContent,
-  translations: () => translations_default,
-  useStack: () => useStack,
-  useStackItem: () => useStackItem
+  translations: () => translations_default
 });
 module.exports = __toCommonJS(node_exports);
+var import_tracking = require("@preact-signals/safe-react/tracking");
 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_react2 = require("react");
 var import_react3 = require("react");
+var import_tracking2 = require("@preact-signals/safe-react/tracking");
 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");
-var import_scroll_just_enough_into_view = require("@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view");
+var import_set_custom_native_drag_preview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
 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_react4 = __toESM(require("react"));
+var import_react_dom = require("react-dom");
 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_tracking3 = require("@preact-signals/safe-react/tracking");
 var import_react5 = __toESM(require("react"));
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
+var import_tracking4 = require("@preact-signals/safe-react/tracking");
 var import_react_slot = require("@radix-ui/react-slot");
 var import_react6 = __toESM(require("react"));
+var import_tracking5 = require("@preact-signals/safe-react/tracking");
 var import_react_tabster3 = require("@fluentui/react-tabster");
+var import_react_slot2 = require("@radix-ui/react-slot");
 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_tracking6 = require("@preact-signals/safe-react/tracking");
 var import_react8 = __toESM(require("react"));
 var import_react_ui_dnd2 = require("@dxos/react-ui-dnd");
+var import_tracking7 = require("@preact-signals/safe-react/tracking");
 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_theme5 = require("@dxos/react-ui-theme");
 var import_util = require("@dxos/util");
+var import_tracking8 = require("@preact-signals/safe-react/tracking");
 var import_react10 = __toESM(require("react"));
+var import_tracking9 = require("@preact-signals/safe-react/tracking");
+var import_react_primitive = require("@radix-ui/react-primitive");
+var import_react_slot3 = require("@radix-ui/react-slot");
 var import_react11 = __toESM(require("react"));
 var import_react_ui4 = require("@dxos/react-ui");
-var StackContext = /* @__PURE__ */ (0, import_react2.createContext)({
-  orientation: "vertical",
-  rail: true,
-  size: "intrinsic"
-});
-var useStack = () => (0, import_react2.useContext)(StackContext);
-var StackItemContext = /* @__PURE__ */ (0, import_react2.createContext)({
-  selfDragHandleRef: () => {
-  },
-  size: "min-content",
-  setSize: () => {
-  }
-});
-var useStackItem = () => (0, import_react2.useContext)(StackItemContext);
-var useStackDropForElements = ({ element, selfDroppable, orientation, id, onRearrange }) => {
-  const [dropping, setDropping] = (0, import_react3.useState)(false);
-  (0, import_react3.useLayoutEffect)(() => {
+var import_react_ui_theme6 = require("@dxos/react-ui-theme");
+var import_tracking10 = require("@preact-signals/safe-react/tracking");
+var import_react12 = __toESM(require("react"));
+var import_react_ui_theme7 = require("@dxos/react-ui-theme");
+var import_tracking11 = require("@preact-signals/safe-react/tracking");
+var import_react_slot4 = require("@radix-ui/react-slot");
+var import_react13 = __toESM(require("react"));
+var import_react_ui_theme8 = require("@dxos/react-ui-theme");
+var import_tracking12 = require("@preact-signals/safe-react/tracking");
+var import_react14 = __toESM(require("react"));
+var import_react_ui5 = require("@dxos/react-ui");
+var import_react_ui_theme9 = require("@dxos/react-ui-theme");
+var useStackDropForElements = ({ id, element, scrollElement = element, selfDroppable, orientation, onRearrange }) => {
+  const [dropping, setDropping] = (0, import_react2.useState)(false);
+  (0, import_react2.useLayoutEffect)(() => {
     if (!element || !selfDroppable) {
       return;
     }
@@ -142,11 +163,12 @@ var useStackDropForElements = ({ element, selfDroppable, orientation, id, onRear
         }
       }
     }), (0, import_element.autoScrollForElements)({
-      element,
+      element: scrollElement,
       getAllowedAxis: () => orientation
     }));
   }, [
     element,
+    scrollElement,
     selfDroppable,
     orientation,
     id,
@@ -156,6 +178,26 @@ var useStackDropForElements = ({ element, selfDroppable, orientation, id, onRear
     dropping
   };
 };
+var StackContext = /* @__PURE__ */ (0, import_react3.createContext)({
+  orientation: "vertical",
+  rail: true,
+  size: "intrinsic"
+});
+var useStack = () => (0, import_react3.useContext)(StackContext);
+var idle = {
+  type: "idle"
+};
+var StackItemContext = /* @__PURE__ */ (0, import_react3.createContext)({
+  selfDragHandleRef: () => {
+  },
+  size: "min-content",
+  setSize: () => {
+  },
+  state: idle,
+  setState: () => {
+  }
+});
+var useStackItem = () => (0, import_react3.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 railGridHorizontalContainFitContent = "grid-rows-[[rail-start]_var(--rail-size)_[content-start]_fit-content(calc(100%-var(--rail-size)*2+2px))_[content-end]]";
@@ -163,146 +205,224 @@ var railGridVerticalContainFitContent = "grid-cols-[[rail-start]_var(--rail-size
 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 arrowNavigationAttrs = (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: {
+var Stack = /* @__PURE__ */ (0, import_react.forwardRef)(({ children, classNames, style, orientation = "vertical", rail = true, size = "intrinsic", onRearrange, itemsCount = import_react.Children.count(children), getDropElement, separatorOnScroll, ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const [stackElement, stackRef] = (0, import_react.useState)(null);
+    const composedItemRef = (0, import_react_compose_refs.composeRefs)(stackRef, forwardedRef);
+    const arrowNavigationAttrs = (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: getDropElement && stackElement ? getDropElement(stackElement) : stackElement,
+      scrollElement: stackElement,
+      selfDroppable,
       orientation,
-      rail,
-      size,
       onRearrange
-    }
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    ...props,
-    ...arrowNavigationAttrs,
-    className: (0, import_react_ui_theme.mx)("grid relative", gridClasses, (size === "contain" || size === "contain-fit-content") && (orientation === "horizontal" ? "overflow-x-auto min-bs-0 max-bs-full bs-full" : "overflow-y-auto min-is-0 max-is-full is-full"), classNames),
-    "data-rail": rail,
-    "aria-orientation": orientation,
-    style: styles,
-    ref: composedItemRef
-  }, children, selfDroppable && dropping && /* @__PURE__ */ import_react.default.createElement(import_react_ui.ListItem.DropIndicator, {
-    lineInset: 8,
-    terminalInset: -8,
-    gap: -8,
-    edge: orientation === "horizontal" ? "left" : "top"
-  })));
+    });
+    const handleScroll = (0, import_react.useCallback)(() => {
+      if (stackElement && Number.isFinite(separatorOnScroll)) {
+        const scrollPosition = orientation === "horizontal" ? stackElement.scrollLeft : stackElement.scrollTop;
+        const scrollSize = orientation === "horizontal" ? stackElement.scrollWidth : stackElement.scrollHeight;
+        const clientSize = orientation === "horizontal" ? stackElement.clientWidth : stackElement.clientHeight;
+        const separatorHost = stackElement.closest("[data-scroll-separator]");
+        if (separatorHost) {
+          separatorHost.setAttribute("data-scroll-separator", String(scrollPosition > separatorOnScroll));
+          separatorHost.setAttribute("data-scroll-separator-end", String(scrollSize - (scrollPosition + clientSize) > separatorOnScroll));
+        }
+      }
+    }, [
+      stackElement,
+      separatorOnScroll,
+      orientation
+    ]);
+    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
+    ]);
+    (0, import_react.useEffect)(() => {
+      if (!(stackElement && Number.isFinite(separatorOnScroll))) {
+        return;
+      }
+      const observer = new MutationObserver(() => {
+        handleScroll();
+      });
+      observer.observe(stackElement, {
+        childList: true,
+        subtree: true
+      });
+      return () => {
+        observer.disconnect();
+      };
+    }, [
+      stackElement,
+      handleScroll
+    ]);
+    return /* @__PURE__ */ import_react.default.createElement(StackContext.Provider, {
+      value: {
+        orientation,
+        rail,
+        size,
+        onRearrange
+      }
+    }, /* @__PURE__ */ import_react.default.createElement("div", {
+      ...props,
+      ...arrowNavigationAttrs,
+      className: (0, import_react_ui_theme.mx)("grid relative", gridClasses, (size === "contain" || size === "contain-fit-content") && (orientation === "horizontal" ? "overflow-x-auto min-bs-0 max-bs-full bs-full" : "overflow-y-auto min-is-0 max-is-full is-full"), classNames),
+      "data-rail": rail,
+      "aria-orientation": orientation,
+      style: styles,
+      ref: composedItemRef,
+      ...Number.isFinite(separatorOnScroll) && {
+        onScroll: handleScroll
+      }
+    }, children, selfDroppable && dropping && /* @__PURE__ */ import_react.default.createElement(import_react_ui.ListItem.DropIndicator, {
+      lineInset: 8,
+      terminalInset: -8,
+      gap: -8,
+      edge: orientation === "horizontal" ? "left" : "top"
+    })));
+  } finally {
+    _effect.f();
+  }
 });
 var StackItemContent = /* @__PURE__ */ (0, import_react5.forwardRef)(({ children, toolbar, statusbar, classNames, size = "intrinsic", ...props }, forwardedRef) => {
-  const { size: stackItemSize } = useStack();
-  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),
-    style: {
-      gridTemplateRows: [
-        ...toolbar ? [
-          "var(--rail-action)"
-        ] : [],
-        "1fr",
-        ...statusbar ? [
-          "var(--statusbar-size)"
-        ] : []
-      ].join(" ")
-    },
-    ref: forwardedRef
-  }, children);
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    const { size: stackItemSize } = useStack();
+    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),
+      style: {
+        gridTemplateRows: [
+          ...toolbar ? [
+            "var(--rail-action)"
+          ] : [],
+          "1fr",
+          ...statusbar ? [
+            "var(--statusbar-size)"
+          ] : []
+        ].join(" ")
+      },
+      "data-popover-collision-boundary": true,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
 });
 var StackItemDragHandle = ({ asChild, children }) => {
-  const { selfDragHandleRef } = useStackItem();
-  const Root = asChild ? import_react_slot.Slot : "div";
-  return /* @__PURE__ */ import_react6.default.createElement(Root, {
-    ref: selfDragHandleRef,
-    role: "button"
-  }, children);
+  var _effect = (0, import_tracking4.useSignals)();
+  try {
+    const { selfDragHandleRef } = useStackItem();
+    const Root = asChild ? import_react_slot.Slot : "div";
+    return /* @__PURE__ */ import_react6.default.createElement(Root, {
+      ref: selfDragHandleRef,
+      role: "button"
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
-var StackItemHeading = ({ children, classNames, ...props }) => {
-  const { orientation } = useStack();
-  const focusableGroupAttrs = (0, import_react_tabster3.useFocusableGroup)({
-    tabBehavior: "limited"
-  });
-  return /* @__PURE__ */ import_react7.default.createElement("div", {
-    role: "heading",
-    ...props,
-    tabIndex: 0,
-    ...focusableGroupAttrs,
-    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 StackItemHeading = ({ children, classNames, asChild, ...props }) => {
+  var _effect = (0, import_tracking5.useSignals)();
+  try {
+    const { orientation } = useStack();
+    const focusableGroupAttrs = (0, import_react_tabster3.useFocusableGroup)({
+      tabBehavior: "limited"
+    });
+    const Root = asChild ? import_react_slot2.Slot : "div";
+    return /* @__PURE__ */ import_react7.default.createElement(Root, {
+      role: "heading",
+      ...props,
+      tabIndex: 0,
+      ...focusableGroupAttrs,
+      className: (0, import_react_ui_theme4.mx)('flex items-center dx-focus-ring-inset-over-all relative !border-is-0 bg-headerSurface border-transparent [[data-scroll-separator="true"]_&]:border-subduedSeparator', orientation === "horizontal" ? "bs-[--rail-size]" : "is-[--rail-size] flex-col", orientation === "horizontal" ? "border-be" : "border-ie", classNames)
+    }, children);
+  } finally {
+    _effect.f();
+  }
 };
 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_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 _effect = (0, import_tracking5.useSignals)();
+  try {
+    const { hasAttention, isAncestor, isRelated } = (0, import_react_ui_attention.useAttention)(attendableId);
+    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
+    });
+  } finally {
+    _effect.f();
+  }
 });
 var MIN_WIDTH = 20;
 var MIN_HEIGHT = 3;
 var StackItemResizeHandle = () => {
-  const { orientation } = useStack();
-  const { setSize, size } = useStackItem();
-  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 _effect = (0, import_tracking6.useSignals)();
+  try {
+    const { orientation } = useStack();
+    const { setSize, size } = useStackItem();
+    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
+    });
+  } finally {
+    _effect.f();
+  }
+};
+var MenuSignifierHorizontal = () => {
+  var _effect = (0, import_tracking8.useSignals)();
+  try {
+    return /* @__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_react10.default.createElement("line", {
+      x1: 0.5,
+      y1: 0.75,
+      x2: 19,
+      y2: 0.75,
+      strokeWidth: 1.25,
+      strokeLinecap: "round",
+      strokeDasharray: "6 20",
+      strokeDashoffset: "-6.5"
+    }));
+  } finally {
+    _effect.f();
+  }
 };
-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_react10.default.createElement("line", {
-  x1: 0.5,
-  y1: 0.75,
-  x2: 19,
-  y2: 0.75,
-  strokeWidth: 1.25,
-  strokeLinecap: "round",
-  strokeDasharray: "6 20",
-  strokeDashoffset: "-6.5"
-}));
 var translationKey = "stack";
 var translations_default = [
   {
     "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",
@@ -314,219 +434,278 @@ var translations_default = [
   }
 ];
 var StackItemSigilButton = /* @__PURE__ */ (0, import_react9.forwardRef)(({ attendableId, classNames, related, isMenu = true, 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_react9.default.createElement(import_react_ui3.Button, {
-    ...props,
-    variant,
-    classNames: [
-      "shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative app-no-drag",
-      classNames
-    ],
-    ref: forwardedRef
-  }, isMenu && /* @__PURE__ */ import_react9.default.createElement(MenuSignifierHorizontal, null), children);
+  var _effect = (0, import_tracking7.useSignals)();
+  try {
+    const { hasAttention, isAncestor, isRelated } = (0, import_react_ui_attention2.useAttention)(attendableId);
+    const variant = related && isRelated || hasAttention || isAncestor ? "primary" : "ghost";
+    return /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.Button, {
+      ...props,
+      variant,
+      classNames: [
+        "shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative app-no-drag",
+        classNames
+      ],
+      ref: forwardedRef
+    }, isMenu && /* @__PURE__ */ import_react9.default.createElement(MenuSignifierHorizontal, null), children);
+  } finally {
+    _effect.f();
+  }
 });
 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_react9.useRef)(false);
-  const [optionsMenuOpen, setOptionsMenuOpen] = (0, import_react9.useState)(false);
-  const hasActions = actionGroups && actionGroups.length > 0;
-  const button = /* @__PURE__ */ import_react9.default.createElement(StackItemSigilButton, {
-    attendableId,
-    related,
-    isMenu: hasActions,
-    // 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_react9.default.createElement("span", {
-    className: "sr-only"
-  }, triggerLabel), /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.Icon, {
-    icon,
-    size: 5
-  }));
-  if (!hasActions) {
-    return button;
-  }
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Root, {
-    open: optionsMenuOpen,
-    onOpenChange: (nextOpen) => {
-      if (!nextOpen) {
-        suppressNextTooltip.current = true;
-      }
-      return setOptionsMenuOpen(nextOpen);
+  var _effect = (0, import_tracking7.useSignals)();
+  try {
+    const { t } = (0, import_react_ui3.useTranslation)(translationKey);
+    const [optionsMenuOpen, setOptionsMenuOpen] = (0, import_react9.useState)(false);
+    const hasActions = actionGroups && actionGroups.length > 0;
+    const button = /* @__PURE__ */ import_react9.default.createElement(StackItemSigilButton, {
+      attendableId,
+      related,
+      isMenu: hasActions,
+      // 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_react9.default.createElement("span", {
+      className: "sr-only"
+    }, triggerLabel), /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.Icon, {
+      icon,
+      size: 5
+    }));
+    if (!hasActions) {
+      return button;
     }
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Trigger, {
-    asChild: true,
-    ref: forwardedRef
-  }, 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_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_react9.default.createElement(Root, {
-        key: action.id,
-        onClick: (event) => {
-          if (action.properties.disabled) {
-            return;
+    return /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Root, {
+      open: optionsMenuOpen,
+      onOpenChange: setOptionsMenuOpen
+    }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.DropdownMenu.Trigger, {
+      asChild: true,
+      ref: forwardedRef
+    }, 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_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_react9.default.createElement(Root, {
+          key: action.id,
+          onClick: (event) => {
+            if (action.properties.disabled) {
+              return;
+            }
+            event.stopPropagation();
+            setOptionsMenuOpen(false);
+            onAction?.(action);
+          },
+          classNames: "gap-2",
+          disabled: action.properties.disabled,
+          checked: menuItemType === "toggle" ? action.properties.isChecked : void 0,
+          ...action.properties?.testId && {
+            "data-testid": action.properties.testId
           }
-          event.stopPropagation();
-          suppressNextTooltip.current = true;
-          setOptionsMenuOpen(false);
-          onAction?.(action);
-        },
-        classNames: "gap-2",
-        disabled: action.properties.disabled,
-        checked: menuItemType === "toggle" ? action.properties.isChecked : void 0,
-        ...action.properties?.testId && {
-          "data-testid": action.properties.testId
-        }
-      }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.Icon, {
-        icon: action.properties.icon ?? "ph--placeholder--regular",
-        size: 4
-      }), /* @__PURE__ */ import_react9.default.createElement("span", {
-        className: "grow truncate"
-      }, (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_react9.default.createElement(import_react_ui3.Icon, {
-        icon: "ph--check--regular",
-        size: 4
-      })), 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_react9.default.createElement(import_react_ui3.DropdownMenu.Arrow, null))));
+        }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui3.Icon, {
+          icon: action.properties.icon ?? "ph--placeholder--regular",
+          size: 4
+        }), /* @__PURE__ */ import_react9.default.createElement("span", {
+          className: "grow truncate"
+        }, (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_react9.default.createElement(import_react_ui3.Icon, {
+          icon: "ph--check--regular",
+          size: 4
+        })), 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_react9.default.createElement(import_react_ui3.DropdownMenu.Arrow, null))));
+  } finally {
+    _effect.f();
+  }
 });
 var DEFAULT_HORIZONTAL_SIZE = 48;
 var DEFAULT_VERTICAL_SIZE = "min-content";
 var DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE;
-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_react4.useState)(propsSize);
-  const Root = role ?? "div";
-  const composedItemRef = (0, import_react_compose_refs2.composeRefs)(itemRef, forwardedRef);
-  const setSize = (0, import_react4.useCallback)((nextSize, commit) => {
-    setInternalSize(nextSize);
-    if (commit) {
-      onSizeChange?.(nextSize);
-    }
-  }, [
-    onSizeChange
-  ]);
-  const type = orientation === "horizontal" ? "column" : "card";
-  (0, import_react4.useLayoutEffect)(() => {
-    if (!itemElement || !onRearrange || disableRearrange) {
-      return;
-    }
-    return (0, import_combine2.combine)((0, import_adapter2.draggable)({
-      element: itemElement,
-      ...selfDragHandleElement && {
-        dragHandle: selfDragHandleElement
-      },
-      getInitialData: () => ({
-        id: item.id,
-        type
-      }),
-      onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
-        document.body.setAttribute("data-drag-preview", "true");
-        (0, import_scroll_just_enough_into_view.scrollJustEnoughIntoView)({
-          element: source.element
-        });
-        const { x, y } = (0, import_preserve_offset_on_source.preserveOffsetOnSource)({
-          element: source.element,
-          input: location.current.input
-        })({
-          container: source.element.offsetParent ?? document.body
-        });
-        nativeSetDragImage?.(source.element, x, y);
-      },
-      onDragStart: () => {
-        document.body.removeAttribute("data-drag-preview");
-        itemElement?.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "active");
-      },
-      onDrop: () => {
-        itemElement?.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "idle");
+var StackItemRoot = /* @__PURE__ */ (0, import_react4.forwardRef)(({ item, children, classNames, size: propsSize, onSizeChange, role, order, prevSiblingId, nextSiblingId, style, disableRearrange, focusIndicatorVariant = "over-all", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    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 [sourceId, setSourceId] = (0, import_react4.useState)(null);
+    const [dragState, setDragState] = (0, import_react4.useState)(idle);
+    const { orientation, rail, onRearrange } = useStack();
+    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_react4.useCallback)((nextSize, commit) => {
+      setInternalSize(nextSize);
+      if (commit) {
+        onSizeChange?.(nextSize);
+      }
+    }, [
+      onSizeChange
+    ]);
+    const type = orientation === "horizontal" ? "column" : "card";
+    (0, import_react4.useLayoutEffect)(() => {
+      if (!itemElement || !onRearrange || disableRearrange) {
+        return;
       }
-    }), (0, import_adapter2.dropTargetForElements)({
-      element: itemElement,
-      getData: ({ input, element }) => {
-        return (0, import_closest_edge2.attachClosestEdge)({
+      return (0, import_combine2.combine)((0, import_adapter2.draggable)({
+        element: itemElement,
+        ...selfDragHandleElement && {
+          dragHandle: selfDragHandleElement
+        },
+        getInitialData: () => ({
           id: item.id,
           type
-        }, {
-          input,
-          element,
-          allowedEdges: orientation === "horizontal" ? [
-            "left",
-            "right"
-          ] : [
-            "top",
-            "bottom"
-          ]
-        });
-      },
-      onDragEnter: ({ self, source }) => {
-        if (source.data.type === self.data.type) {
-          setEdge((0, import_closest_edge2.extractClosestEdge)(self.data));
-        }
-      },
-      onDrag: ({ self, source }) => {
-        if (source.data.type === self.data.type) {
-          setEdge((0, import_closest_edge2.extractClosestEdge)(self.data));
+        }),
+        onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
+          document.body.setAttribute("data-drag-preview", "true");
+          const offsetFn = (0, import_preserve_offset_on_source.preserveOffsetOnSource)({
+            element: source.element,
+            input: location.current.input
+          });
+          const rect = source.element.getBoundingClientRect();
+          (0, import_set_custom_native_drag_preview.setCustomNativeDragPreview)({
+            nativeSetDragImage,
+            getOffset: ({ container }) => {
+              return offsetFn({
+                container
+              });
+            },
+            render: ({ container }) => {
+              container.style.width = rect.width + "px";
+              setDragState({
+                type: "preview",
+                container,
+                item
+              });
+              return () => {
+              };
+            }
+          });
+        },
+        onDragStart: () => {
+          document.body.removeAttribute("data-drag-preview");
+          itemElement?.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "active");
+          setDragState({
+            type: "is-dragging",
+            item
+          });
+        },
+        onDrop: () => {
+          itemElement?.closest("[data-drag-autoscroll]")?.setAttribute("data-drag-autoscroll", "idle");
+          setDragState(idle);
         }
-      },
-      onDragLeave: () => setEdge(null),
-      onDrop: ({ self, source }) => {
-        setEdge(null);
-        if (source.data.type === self.data.type) {
-          onRearrange(source.data, self.data, (0, import_closest_edge2.extractClosestEdge)(self.data));
+      }), (0, import_adapter2.dropTargetForElements)({
+        element: itemElement,
+        getData: ({ input, element }) => {
+          return (0, import_closest_edge2.attachClosestEdge)({
+            id: item.id,
+            type
+          }, {
+            input,
+            element,
+            allowedEdges: orientation === "horizontal" ? [
+              "left",
+              "right"
+            ] : [
+              "top",
+              "bottom"
+            ]
+          });
+        },
+        onDragEnter: ({ self, source }) => {
+          if (source.data.type === self.data.type) {
+            setEdge((0, import_closest_edge2.extractClosestEdge)(self.data));
+            setSourceId(source.data.id);
+          }
+        },
+        onDrag: ({ self, source }) => {
+          if (source.data.type === self.data.type) {
+            setEdge((0, import_closest_edge2.extractClosestEdge)(self.data));
+            setSourceId(source.data.id);
+          }
+        },
+        onDragLeave: () => {
+          setEdge(null);
+          setSourceId(null);
+        },
+        onDrop: ({ self, source }) => {
+          setEdge(null);
+          setSourceId(null);
+          if (source.data.type === self.data.type) {
+            onRearrange(source.data, self.data, (0, import_closest_edge2.extractClosestEdge)(self.data));
+          }
         }
+      }));
+    }, [
+      orientation,
+      item,
+      onRearrange,
+      selfDragHandleElement,
+      itemElement
+    ]);
+    const focusableGroupAttrs = (0, import_react_tabster2.useFocusableGroup)({
+      tabBehavior: "limited"
+    });
+    const shouldShowDropIndicator = () => {
+      if (!closestEdge || !sourceId) {
+        return false;
       }
-    }));
-  }, [
-    orientation,
-    item,
-    onRearrange,
-    selfDragHandleElement,
-    itemElement
-  ]);
-  const focusableGroupAttrs = (0, import_react_tabster2.useFocusableGroup)({
-    tabBehavior: "limited"
-  });
-  return /* @__PURE__ */ import_react4.default.createElement(StackItemContext.Provider, {
-    value: {
-      selfDragHandleRef,
-      size,
-      setSize
-    }
-  }, /* @__PURE__ */ import_react4.default.createElement(Root, {
-    ...props,
-    tabIndex: 0,
-    ...focusableGroupAttrs,
-    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: {
-      ...(0, import_react_ui_dnd.sizeStyle)(size, orientation),
-      ...Number.isFinite(order) && {
-        [orientation === "horizontal" ? "gridColumn" : "gridRow"]: `${order}`
+      if (sourceId === item.id) {
+        return false;
+      }
+      const isTrailingEdgeOfPrevSibling = prevSiblingId !== void 0 && sourceId === prevSiblingId && (orientation === "horizontal" && closestEdge === "left" || orientation === "vertical" && closestEdge === "top");
+      if (isTrailingEdgeOfPrevSibling) {
+        return false;
+      }
+      const isLeadingEdgeOfNextSibling = nextSiblingId !== void 0 && sourceId === nextSiblingId && (orientation === "horizontal" && closestEdge === "right" || orientation === "vertical" && closestEdge === "bottom");
+      if (isLeadingEdgeOfNextSibling) {
+        return false;
+      }
+      return true;
+    };
+    return /* @__PURE__ */ import_react4.default.createElement(StackItemContext.Provider, {
+      value: {
+        selfDragHandleRef,
+        size,
+        setSize,
+        state: dragState,
+        setState: setDragState
+      }
+    }, /* @__PURE__ */ import_react4.default.createElement(Root, {
+      ...props,
+      tabIndex: 0,
+      ...focusableGroupAttrs,
+      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: {
+        ...(0, import_react_ui_dnd.sizeStyle)(size, orientation),
+        ...Number.isFinite(order) && {
+          [orientation === "horizontal" ? "gridColumn" : "gridRow"]: `${order}`
+        },
+        ...style
       },
-      ...style
-    },
-    ref: composedItemRef
-  }, children, closestEdge && /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.ListItem.DropIndicator, {
-    lineInset: 8,
-    terminalInset: -8,
-    edge: closestEdge
-  })));
+      ref: composedItemRef
+    }, children, shouldShowDropIndicator() && closestEdge && /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.ListItem.DropIndicator, {
+      lineInset: 8,
+      terminalInset: -8,
+      edge: closestEdge
+    })));
+  } finally {
+    _effect.f();
+  }
 });
+var StackItemDragPreview = ({ children }) => {
+  const { state } = useStackItem();
+  return state?.type === "preview" ? /* @__PURE__ */ (0, import_react_dom.createPortal)(children({
+    item: state.item
+  }), state.container) : null;
+};
 var StackItem = {
   Root: StackItemRoot,
   Content: StackItemContent,
@@ -535,87 +714,449 @@ var StackItem = {
   ResizeHandle: StackItemResizeHandle,
   DragHandle: StackItemDragHandle,
   Sigil: StackItemSigil,
-  SigilButton: StackItemSigilButton
+  SigilButton: StackItemSigilButton,
+  DragPreview: StackItemDragPreview
 };
-var LayoutControl = ({ icon, label, ...props }) => {
-  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_react11.default.createElement(import_react_ui4.Button, {
-    variant: "ghost",
-    ...props
-  }, /* @__PURE__ */ import_react11.default.createElement("span", {
-    className: "sr-only"
-  }, label), /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Icon, {
-    icon
-  }))), /* @__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 cardRoot = "contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0";
+var cardContent = "rounded overflow-hidden bg-cardSurface border border-separator dark:border-subduedSeparator dx-focus-ring-group-y-indicator relative min-bs-[--rail-item] group/card";
+var cardText = "pli-3 mlb-3";
+var cardHeading = "text-lg font-medium line-clamp-2";
+var cardChrome = "pli-1.5 mlb-1.5 [&_.dx-button]:pli-1.5 [&_.dx-button]:text-start [&_.dx-button]:is-full";
+var CardRoot = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot3.Slot : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardRoot,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme6.mx)(cardRoot, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react11.default.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardContent = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, classNames, asChild, role = "group", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot3.Slot : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardContent,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme6.mx)(cardContent, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react11.default.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardConditionalContent = ({ role, children }) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    if ([
+      "popover",
+      "card--kanban"
+    ].includes(role ?? "never")) {
+      return /* @__PURE__ */ import_react11.default.createElement("div", {
+        className: role === "popover" ? "popover-card-width" : role === "card--kanban" ? "contents" : ""
+      }, children);
+    } else {
+      return /* @__PURE__ */ import_react11.default.createElement(CardContent, null, children);
+    }
+  } finally {
+    _effect.f();
+  }
 };
-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_react11.default.createElement(import_react_ui4.ButtonGroup, {
-    ...props,
-    ref: forwardedRef
-  }, pin && !isSolo && [
-    "both",
-    "start"
-  ].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_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_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_react11.default.createElement(LayoutControl, {
-    label: t("increment end label"),
-    disabled: !can.incrementEnd,
-    classNames: buttonClassNames,
-    onClick: () => onClick?.("increment-end"),
-    icon: "ph--caret-right--regular"
-  })), pin && !isSolo && [
-    "both",
-    "end"
-  ].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_react11.default.createElement(LayoutControl, {
-    label: t(`${typeof close === "string" ? "minify" : "close"} label`),
-    classNames: buttonClassNames,
-    onClick: () => onClick?.("close"),
-    "data-testid": "layoutHeading.close",
-    icon: close === "minify-start" ? "ph--caret-line-left--regular" : close === "minify-end" ? "ph--caret-line-right--regular" : "ph--x--regular"
-  }), children);
+var CardHeading = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, classNames, asChild, role = "heading", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot3.Slot : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardHeading,
+        cardText,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme6.mx)(cardHeading, cardText, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react11.default.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
 });
+var CardToolbar = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Toolbar.Root, {
+      ...props,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardToolbarIconButton = import_react_ui4.Toolbar.IconButton;
+var CardToolbarSeparator = import_react_ui4.Toolbar.Separator;
+var CardDragHandle = /* @__PURE__ */ (0, import_react11.forwardRef)(({ toolbarItem }, forwardedRef) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    const { t } = (0, import_react_ui4.useTranslation)(translationKey);
+    const Root = toolbarItem ? import_react_ui4.Toolbar.IconButton : import_react_ui4.IconButton;
+    return /* @__PURE__ */ import_react11.default.createElement(Root, {
+      iconOnly: true,
+      icon: "ph--dots-six-vertical--regular",
+      variant: "ghost",
+      label: t("card drag handle label"),
+      classNames: "pli-2",
+      ref: forwardedRef
+    });
+  } finally {
+    _effect.f();
+  }
+});
+var CardDragPreview = StackItem.DragPreview;
+var CardMenu = import_react_primitive.Primitive.div;
+var CardPoster = (props) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    const aspect = props.aspect === "auto" ? "aspect-auto" : "aspect-video";
+    if (props.image) {
+      return /* @__PURE__ */ import_react11.default.createElement("img", {
+        className: `dx-card__poster ${aspect} object-cover is-full bs-auto`,
+        src: props.image,
+        alt: props.alt
+      });
+    }
+    if (props.icon) {
+      return /* @__PURE__ */ import_react11.default.createElement("div", {
+        role: "image",
+        className: `dx-card__poster grid ${aspect} place-items-center bg-inputSurface text-subdued`,
+        "aria-label": props.alt
+      }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Icon, {
+        icon: props.icon,
+        size: 10
+      }));
+    }
+  } finally {
+    _effect.f();
+  }
+};
+var CardChrome = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot3.Slot : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardChrome,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme6.mx)(cardChrome, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react11.default.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardText = /* @__PURE__ */ (0, import_react11.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot3.Slot : "p";
+    const rootProps = asChild ? {
+      classNames: [
+        cardText,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme6.mx)(cardText, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react11.default.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var Card = {
+  Root: CardRoot,
+  Content: CardContent,
+  Container: CardConditionalContent,
+  Heading: CardHeading,
+  Toolbar: CardToolbar,
+  ToolbarIconButton: CardToolbarIconButton,
+  ToolbarSeparator: CardToolbarSeparator,
+  DragHandle: CardDragHandle,
+  DragPreview: CardDragPreview,
+  Menu: CardMenu,
+  Poster: CardPoster,
+  Chrome: CardChrome,
+  Text: CardText
+};
+var CardDragPreviewRoot = ({ children }) => {
+  var _effect = (0, import_tracking10.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react12.default.createElement("div", {
+      className: "p-2"
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var CardDragPreviewContent = ({ children }) => {
+  var _effect = (0, import_tracking10.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react12.default.createElement("div", {
+      className: (0, import_react_ui_theme7.mx)(cardContent, "ring-focusLine ring-neutralFocusIndicator")
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var CardDragPreview2 = {
+  Root: CardDragPreviewRoot,
+  Content: CardDragPreviewContent
+};
+var CardStackStack = /* @__PURE__ */ (0, import_react13.forwardRef)(({ children, classNames, itemsCount = 0, ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking11.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react13.default.createElement(Stack, {
+      orientation: "vertical",
+      size: "contain",
+      rail: false,
+      classNames: (
+        /* NOTE(thure): Do not let this element have zero intrinsic size, otherwise the drop indicator will not display. See #9035. */
+        [
+          "plb-1",
+          itemsCount > 0 && "plb-2",
+          classNames
+        ]
+      ),
+      itemsCount,
+      separatorOnScroll: 9,
+      ...props,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardStackDragHandle = Card.DragHandle;
+var cardStackHeading = "mli-2 order-first bg-transparent rounded-bs-md flex items-center";
+var CardStackHeading = /* @__PURE__ */ (0, import_react13.forwardRef)(({ children, classNames, asChild, role = "heading", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking11.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot4.Slot : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardStackHeading,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme8.mx)(cardStackHeading, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react13.default.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var cardStackFooter = 'plb-2 mli-2 border-bs border-transparent [[data-scroll-separator-end="true"]_&]:border-subduedSeparator';
+var CardStackFooter = /* @__PURE__ */ (0, import_react13.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking11.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot4.Slot : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardStackFooter,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme8.mx)(cardStackFooter, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react13.default.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var cardStackContent = [
+  "shrink min-bs-0 bg-baseSurface border border-separator rounded-md grid dx-focus-ring-group-x-indicator kanban-drop",
+  railGridHorizontalContainFitContent
+];
+var CardStackContent = /* @__PURE__ */ (0, import_react13.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking11.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot4.Slot : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        ...cardStackContent,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme8.mx)(...cardStackContent, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react13.default.createElement(Root, {
+      ...props,
+      ...rootProps,
+      "data-scroll-separator": "false",
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var cardStackRoot = "flex flex-col pli-2 plb-2";
+var CardStackRoot = /* @__PURE__ */ (0, import_react13.forwardRef)(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = (0, import_tracking11.useSignals)();
+  try {
+    const Root = asChild ? import_react_slot4.Slot : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardStackRoot,
+        classNames
+      ]
+    } : {
+      className: (0, import_react_ui_theme8.mx)(cardStackRoot, classNames),
+      role
+    };
+    return /* @__PURE__ */ import_react13.default.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+var CardStack = {
+  Root: CardStackRoot,
+  Content: CardStackContent,
+  Stack: CardStackStack,
+  Heading: CardStackHeading,
+  Footer: CardStackFooter,
+  DragHandle: CardStackDragHandle
+};
+var CardStackDragPreviewRoot = ({ children }) => {
+  var _effect = (0, import_tracking12.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react14.default.createElement("div", {
+      className: "p-2"
+    }, /* @__PURE__ */ import_react14.default.createElement("div", {
+      className: "rounded-md max-bs-[calc(100dvh-1rem)] overflow-hidden bg-baseSurface border border-separator ring-focusLine ring-neutralFocusIndicator flex flex-col"
+    }, children));
+  } finally {
+    _effect.f();
+  }
+};
+var CardStackDragPreviewHeading = ({ children }) => {
+  var _effect = (0, import_tracking12.useSignals)();
+  try {
+    const { t } = (0, import_react_ui5.useTranslation)(translationKey);
+    return /* @__PURE__ */ import_react14.default.createElement("div", {
+      className: "flex items-center p-2"
+    }, /* @__PURE__ */ import_react14.default.createElement(import_react_ui5.IconButton, {
+      iconOnly: true,
+      icon: "ph--dots-six-vertical--regular",
+      variant: "ghost",
+      label: t("column drag handle label"),
+      classNames: "pli-2"
+    }), children);
+  } finally {
+    _effect.f();
+  }
+};
+var CardStackDragPreviewContent = ({ children, itemsCount = 0 }) => {
+  var _effect = (0, import_tracking12.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react14.default.createElement("div", {
+      className: (0, import_react_ui_theme9.mx)("overflow-y-auto flex-1 pli-2 flex flex-col gap-2", "plb-1", itemsCount > 0 ? "plb-2" : "plb-1")
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var CardStackDragPreviewFooter = ({ children }) => {
+  var _effect = (0, import_tracking12.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react14.default.createElement("div", {
+      className: "p-2 border-t border-separator"
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+var CardStackDragPreview = {
+  Root: CardStackDragPreviewRoot,
+  Heading: CardStackDragPreviewHeading,
+  Content: CardStackDragPreviewContent,
+  Footer: CardStackDragPreviewFooter
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Card,
+  CardDragPreview,
+  CardStack,
+  CardStackDragPreview,
   DEFAULT_EXTRINSIC_SIZE,
   DEFAULT_HORIZONTAL_SIZE,
   DEFAULT_VERTICAL_SIZE,
-  LayoutControls,
   Stack,
   StackContext,
   StackItem,
-  StackItemContext,
+  StackItemDragPreview,
   autoScrollRootAttributes,
+  cardChrome,
+  cardContent,
+  cardHeading,
+  cardRoot,
+  cardStackContent,
+  cardStackFooter,
+  cardStackHeading,
+  cardStackRoot,
+  cardText,
   railGridHorizontal,
   railGridHorizontalContainFitContent,
   railGridVertical,
   railGridVerticalContainFitContent,
-  translations,
-  useStack,
-  useStackItem
+  translations
 });
 //# sourceMappingURL=index.cjs.map