@dxos/react-ui-stack 0.8.4-main.84f28bd → 0.8.4-main.937b3ca

package/dist/lib/browser/index.mjs

@@ -1,10 +1,14 @@
+// src/components/CardStack/CardStack.tsx
+import { Slot } from "@radix-ui/react-slot";
+import React2, { forwardRef as forwardRef2 } from "react";
+import { Card } from "@dxos/react-ui-mosaic";
+import { cardDefaultInlineSize, mx as mx2 } from "@dxos/ui-theme";
+
 // src/components/Stack/Stack.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import { useArrowNavigationGroup } from "@fluentui/react-tabster";
 import { composeRefs } from "@radix-ui/react-compose-refs";
-import React, { Children, forwardRef, useState as useState2, useMemo, useCallback, useEffect } from "react";
-import { ListItem } from "@dxos/react-ui";
-import { mx } from "@dxos/react-ui-theme";
+import React, { Children, forwardRef, useCallback, useEffect, useMemo, 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";
@@ -12,14 +16,16 @@ import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { useLayoutEffect, useState } from "react";
-var useStackDropForElements = ({ id, element, scrollElement = element, selfDroppable, orientation, onRearrange }) => {
+var noop = () => {
+};
+var useStackDropForElements = ({ id, element, scrollElement = element, orientation, selfDroppable, onRearrange }) => {
   const [dropping, setDropping] = useState(false);
   useLayoutEffect(() => {
-    if (!element || !selfDroppable) {
+    if (!element) {
       return;
     }
     const acceptSourceType = orientation === "horizontal" ? "column" : "card";
-    return combine(dropTargetForElements({
+    return combine(selfDroppable ? dropTargetForElements({
       element,
       getData: ({ input, element: element2 }) => {
         return attachClosestEdge({
@@ -52,16 +58,16 @@ var useStackDropForElements = ({ id, element, scrollElement = element, selfDropp
           onRearrange(source.data, self.data, extractClosestEdge(self.data));
         }
       }
-    }), autoScrollForElements({
+    }) : noop, scrollElement ? autoScrollForElements({
       element: scrollElement,
       getAllowedAxis: () => orientation
-    }));
+    }) : noop);
   }, [
+    id,
     element,
     scrollElement,
     selfDroppable,
     orientation,
-    id,
     onRearrange
   ]);
   return {
@@ -100,583 +106,801 @@ var railGridVerticalContainFitContent = "grid-cols-[[rail-start]_var(--rail-size
 var autoScrollRootAttributes = {
   "data-drag-autoscroll": "idle"
 };
-var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientation = "vertical", rail = true, size = "intrinsic", onRearrange, itemsCount = Children.count(children), getDropElement, separatorOnScroll, ...props }, forwardedRef) => {
-  var _effect = _useSignals();
-  try {
-    const [stackElement, stackRef] = useState2(null);
-    const composedItemRef = composeRefs(stackRef, forwardedRef);
-    const arrowNavigationAttrs = 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,
-      onRearrange
-    });
-    const handleScroll = 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));
-        }
+var PERPENDICULAR_FOCUS_THRESHHOLD = 128;
+var scrollIntoViewAndFocus = (el, orientation) => {
+  el.scrollIntoView({
+    behavior: "instant",
+    [orientation === "vertical" ? "block" : "inline"]: "center"
+  });
+  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);
+  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 { dropping } = useStackDropForElements({
+    id: props.id,
+    element: getDropElement && stackElement ? getDropElement(stackElement) : stackElement,
+    scrollElement: stackElement,
+    selfDroppable,
+    orientation,
+    onRearrange
+  });
+  const handleScroll = 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 = useMemo(() => {
-      if (!rail) {
-        return orientation === "horizontal" ? "grid-rows-1 pli-1" : "grid-cols-1 plb-1";
+    }
+  }, [
+    stackElement,
+    separatorOnScroll,
+    orientation
+  ]);
+  const handleBlur = useCallback((event) => {
+    if (event.target) {
+      const target = event.target;
+      const closestStackItem = target.closest(`[data-dx-item-id]`);
+      if (closestStackItem?.closest(`[data-dx-stack="${stackId}"]`)) {
+        setLastFocusedItem(closestStackItem?.getAttribute("data-dx-item-id") ?? void 0);
       }
-      if (orientation === "horizontal") {
-        return size === "contain-fit-content" ? railGridHorizontalContainFitContent : railGridHorizontal;
-      } else {
-        return size === "contain-fit-content" ? railGridVerticalContainFitContent : railGridVertical;
+    }
+    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"));
+            }
+          }
+        }
       }
-    }, [
-      rail,
+    }
+    props.onKeyDown?.(event);
+  }, [
+    props.onKeyDown,
+    stackId,
+    circularFocus
+  ]);
+  const gridClasses = useMemo(() => {
+    if (!rail) {
+      return orientation === "horizontal" ? "grid-rows-1 pli-[--stack-gap]" : "grid-cols-1 plb-[--stack-gap]";
+    }
+    if (orientation === "horizontal") {
+      return railGridHorizontal;
+    } else {
+      return railGridVertical;
+    }
+  }, [
+    rail,
+    orientation,
+    size
+  ]);
+  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__ */ React.createElement(StackContext.Provider, {
+    value: {
       orientation,
-      size
-    ]);
-    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__ */ React.createElement(StackContext.Provider, {
-      value: {
-        orientation,
-        rail,
-        size,
-        onRearrange
-      }
-    }, /* @__PURE__ */ React.createElement("div", {
-      ...props,
-      ...arrowNavigationAttrs,
-      className: 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
+      rail,
+      size,
+      onRearrange,
+      stackId
+    }
+  }, /* @__PURE__ */ React.createElement("div", {
+    ...props,
+    className: mx("grid relative [--stack-gap:var(--dx-trimXs)]", gridClasses, size === "contain" && (orientation === "horizontal" ? "overflow-x-auto overscroll-x-contain min-bs-0 max-bs-full bs-full" : "overflow-y-auto min-is-0 max-is-full is-full"), classNames),
+    onKeyDown: handleKeyDown,
+    onBlur: handleBlur,
+    "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
+    }
+  }, children, selfDroppable && dropping && /* @__PURE__ */ React.createElement(ListItem.DropIndicator, {
+    lineInset: 8,
+    terminalInset: -8,
+    gap: -8,
+    edge: orientation === "horizontal" ? "left" : "top"
+  })));
+});
+
+// src/components/CardStack/CardStack.tsx
+var cardStackDefaultInlineSizeRem = cardDefaultInlineSize + 2.125;
+var cardStackRoot = "flex flex-col";
+var CardStackRoot = /* @__PURE__ */ forwardRef2(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  const Root = asChild ? Slot : "div";
+  const rootProps = asChild ? {
+    classNames: [
+      cardStackRoot,
+      classNames
+    ]
+  } : {
+    className: mx2(cardStackRoot, classNames),
+    role
+  };
+  return /* @__PURE__ */ React2.createElement(Root, {
+    ...props,
+    ...rootProps,
+    ref: forwardedRef
+  }, children);
+});
+var cardStackContent = "shrink min-bs-0 grid dx-focus-ring-group-x-indicator bg-baseSurface";
+var CardStackContent = /* @__PURE__ */ forwardRef2(({ children, classNames, asChild, role = "none", footer, ...props }, forwardedRef) => {
+  const Root = asChild ? Slot : "div";
+  const baseClassNames = footer ? [
+    cardStackContent,
+    railGridHorizontalContainFitContent
+  ] : [
+    cardStackContent
+  ];
+  const rootProps = asChild ? {
+    classNames: [
+      ...baseClassNames,
+      classNames
+    ]
+  } : {
+    className: mx2(...baseClassNames, classNames),
+    role
+  };
+  return /* @__PURE__ */ React2.createElement(Root, {
+    ...props,
+    ...rootProps,
+    "data-scroll-separator": "false",
+    ref: forwardedRef
+  }, children);
+});
+var CardStackStack = /* @__PURE__ */ forwardRef2(({ children, classNames, itemsCount = 0, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React2.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-2",
+        classNames
+      ]
+    ),
+    itemsCount,
+    separatorOnScroll: 9,
+    "data-density": "fine",
+    ...props,
+    ref: forwardedRef
+  }, children);
+});
+var cardStackItem = "contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0";
+var CardStackItem = /* @__PURE__ */ forwardRef2(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  const Root = asChild ? Slot : "div";
+  const rootProps = asChild ? {
+    classNames: [
+      cardStackItem,
+      classNames
+    ]
+  } : {
+    className: mx2(cardStackItem, classNames),
+    role
+  };
+  return /* @__PURE__ */ React2.createElement(Root, {
+    ...props,
+    ...rootProps,
+    ref: forwardedRef
+  }, children);
+});
+var cardStackHeading = "mli-2 order-first bg-transparent rounded-bs-md flex items-center";
+var CardStackHeading = /* @__PURE__ */ forwardRef2(({ children, classNames, asChild, role = "heading", ...props }, forwardedRef) => {
+  const Root = asChild ? Slot : "div";
+  const rootProps = asChild ? {
+    classNames: [
+      cardStackHeading,
+      classNames
+    ]
+  } : {
+    className: mx2(cardStackHeading, classNames),
+    role
+  };
+  return /* @__PURE__ */ React2.createElement(Root, {
+    ...props,
+    ...rootProps,
+    ref: forwardedRef
+  }, children);
+});
+var cardStackFooter = 'plb-2 mli-2 border-bs border-transparent [[data-scroll-separator-end="true"]_&]:border-subduedSeparator';
+var CardStackFooter = /* @__PURE__ */ forwardRef2(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  const Root = asChild ? Slot : "div";
+  const rootProps = asChild ? {
+    classNames: [
+      cardStackFooter,
+      classNames
+    ]
+  } : {
+    className: mx2(cardStackFooter, classNames),
+    role
+  };
+  return /* @__PURE__ */ React2.createElement(Root, {
+    ...props,
+    ...rootProps,
+    ref: forwardedRef
+  }, children);
+});
+var CardStackDragHandle = Card.DragHandle;
+var CardStack = {
+  Root: CardStackRoot,
+  Content: CardStackContent,
+  Stack: CardStackStack,
+  Heading: CardStackHeading,
+  Footer: CardStackFooter,
+  DragHandle: CardStackDragHandle,
+  Item: CardStackItem
+};
+
+// src/components/CardStack/CardStackDragPreview.tsx
+import React3 from "react";
+import { IconButton, useTranslation } from "@dxos/react-ui";
+import { mx as mx3 } from "@dxos/ui-theme";
+
+// 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"
       }
-    }, children, selfDroppable && dropping && /* @__PURE__ */ React.createElement(ListItem.DropIndicator, {
-      lineInset: 8,
-      terminalInset: -8,
-      gap: -8,
-      edge: orientation === "horizontal" ? "left" : "top"
-    })));
-  } finally {
-    _effect.f();
+    }
   }
-});
+];
+
+// src/components/CardStack/CardStackDragPreview.tsx
+var CardStackDragPreviewRoot = ({ children }) => {
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: "p-2"
+  }, /* @__PURE__ */ React3.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));
+};
+var CardStackDragPreviewHeading = ({ children }) => {
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: "flex items-center p-2"
+  }, /* @__PURE__ */ React3.createElement(IconButton, {
+    iconOnly: true,
+    icon: "ph--dots-six-vertical--regular",
+    variant: "ghost",
+    label: t("column drag handle label"),
+    classNames: "pli-2"
+  }), children);
+};
+var CardStackDragPreviewContent = ({ children, itemsCount = 0 }) => {
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: mx3("overflow-y-auto flex-1 pli-2 flex flex-col gap-2", "plb-1", itemsCount > 0 ? "plb-2" : "plb-1")
+  }, children);
+};
+var CardStackDragPreviewFooter = ({ children }) => {
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: "p-2 border-bs border-separator"
+  }, children);
+};
+var CardStackDragPreview = {
+  Root: CardStackDragPreviewRoot,
+  Heading: CardStackDragPreviewHeading,
+  Content: CardStackDragPreviewContent,
+  Footer: CardStackDragPreviewFooter
+};
 
 // src/components/StackItem/StackItem.tsx
-import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
 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 as useFocusableGroup2 } from "@fluentui/react-tabster";
+import { useFocusableGroup } from "@fluentui/react-tabster";
 import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
-import React8, { forwardRef as forwardRef5, useLayoutEffect as useLayoutEffect2, useState as useState4, useCallback as useCallback2, useMemo as useMemo3 } from "react";
+import React10, { forwardRef as forwardRef6, useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, 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/react-ui-theme";
+import { mx as mx7 } from "@dxos/ui-theme";
 
 // src/components/StackItem/StackItemContent.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React2, { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-var StackItemContent = /* @__PURE__ */ forwardRef2(({ children, toolbar, statusbar, layoutManaged, classNames, size = "intrinsic", ...props }, forwardedRef) => {
-  var _effect = _useSignals2();
-  try {
-    const { size: stackItemSize } = useStack();
-    const { role } = useStackItem();
-    const style = useMemo2(() => layoutManaged ? {} : {
-      gridTemplateRows: [
-        ...toolbar ? [
-          role === "section" ? "calc(var(--toolbar-size) - 1px)" : "var(--toolbar-size)"
-        ] : [],
-        "1fr",
-        ...statusbar ? [
-          "var(--statusbar-size)"
-        ] : []
-      ].join(" ")
-    }, [
-      toolbar,
-      statusbar,
-      layoutManaged
-    ]);
-    return /* @__PURE__ */ React2.createElement("div", {
-      role: "none",
-      ...props,
-      className: mx2("group grid grid-cols-[100%]", stackItemSize === "contain" && "min-bs-0 overflow-hidden", size === "video" ? "aspect-video" : size === "square" && "aspect-square", toolbar && "[&_.dx-toolbar]:relative [&_.dx-toolbar]:border-be [&_.dx-toolbar]:border-subduedSeparator", role === "section" && toolbar && "[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:block-start-0 [&_.dx-toolbar]:-mbe-px [&_.dx-toolbar]:min-is-0", classNames),
-      style,
-      "data-popover-collision-boundary": true,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
+import React4, { forwardRef as forwardRef3, useMemo as useMemo2 } from "react";
+import { mx as mx4 } from "@dxos/ui-theme";
+var StackItemContent = /* @__PURE__ */ forwardRef3(({ classNames, children, toolbar, statusbar, ...props }, forwardedRef) => {
+  const { size: stackItemSize } = useStack();
+  const { role } = useStackItem();
+  const style = useMemo2(() => ({
+    gridTemplateRows: [
+      ...toolbar ? [
+        role === "section" ? "calc(var(--toolbar-size) - 1px)" : "var(--toolbar-size)"
+      ] : [],
+      "1fr",
+      ...statusbar ? [
+        "var(--statusbar-size)"
+      ] : []
+    ].join(" ")
+  }), [
+    toolbar,
+    statusbar
+  ]);
+  return /* @__PURE__ */ React4.createElement("div", {
+    ...props,
+    role: "none",
+    style,
+    className: mx4("group grid grid-cols-[100%] density-coarse", stackItemSize === "contain" && "min-bs-0 overflow-hidden", role === "section" && toolbar && "[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:block-start-0 [&_.dx-toolbar]:-mbe-px [&_.dx-toolbar]:min-is-0", toolbar && "[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator", classNames),
+    "data-popover-collision-boundary": true,
+    ref: forwardedRef
+  }, children);
 });
+StackItemContent.displayName = "StackItemContent";
 
 // src/components/StackItem/StackItemDragHandle.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import { Slot } from "@radix-ui/react-slot";
-import React3 from "react";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import React5 from "react";
 var StackItemDragHandle = ({ asChild, children }) => {
-  var _effect = _useSignals3();
-  try {
-    const { selfDragHandleRef } = useStackItem();
-    const Root = asChild ? Slot : "div";
-    return /* @__PURE__ */ React3.createElement(Root, {
-      ref: selfDragHandleRef,
-      role: "button"
-    }, children);
-  } finally {
-    _effect.f();
-  }
+  const { selfDragHandleRef } = useStackItem();
+  const Root = asChild ? Slot2 : "div";
+  return /* @__PURE__ */ React5.createElement(Root, {
+    ref: selfDragHandleRef,
+    role: "button"
+  }, children);
 };
 
 // src/components/StackItem/StackItemHeading.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import { useFocusableGroup } from "@fluentui/react-tabster";
-import { Slot as Slot2 } from "@radix-ui/react-slot";
-import React4, { forwardRef as forwardRef3 } from "react";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import React6, { forwardRef as forwardRef4 } from "react";
 import { useAttention } from "@dxos/react-ui-attention";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import { mx as mx5 } from "@dxos/ui-theme";
 var StackItemHeading = ({ children, classNames, asChild, separateOnScroll, ...props }) => {
-  var _effect = _useSignals4();
-  try {
-    const { orientation } = useStack();
-    const focusableGroupAttrs = useFocusableGroup({
-      tabBehavior: "limited"
-    });
-    const Root = asChild ? Slot2 : "div";
-    return /* @__PURE__ */ React4.createElement(Root, {
-      role: "heading",
-      ...props,
-      tabIndex: 0,
-      ...focusableGroupAttrs,
-      className: mx3("flex items-center dx-focus-ring-inset-over-all relative !border-is-0 bg-headerSurface", separateOnScroll ? 'border-transparent [[data-scroll-separator="true"]_&]:border-subduedSeparator' : "border-subduedSeparator", orientation === "horizontal" ? "bs-[--rail-size]" : "is-[--rail-size] flex-col", orientation === "horizontal" ? "border-be" : "border-ie", classNames)
-    }, children);
-  } finally {
-    _effect.f();
-  }
+  const { orientation } = useStack();
+  const Root = asChild ? Slot3 : "div";
+  return /* @__PURE__ */ React6.createElement(Root, {
+    role: "heading",
+    ...props,
+    className: mx5("flex items-center !border-is-0 bg-headerSurface", separateOnScroll ? 'border-transparent [[data-scroll-separator="true"]_&]:border-subduedSeparator' : "border-subduedSeparator", orientation === "horizontal" ? "bs-[--rail-size]" : "is-[--rail-size] flex-col", orientation === "horizontal" ? "border-be" : "border-ie", classNames)
+  }, children);
 };
 var StackItemHeadingStickyContent = ({ children }) => {
-  var _effect = _useSignals4();
-  try {
-    return /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      className: "sticky block-start-0 bg-[--sticky-bg] p-1 is-full"
-    }, children);
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React6.createElement("div", {
+    role: "none",
+    className: "sticky block-start-0 bg-[--sticky-bg] p-1 is-full"
+  }, children);
 };
-var StackItemHeadingLabel = /* @__PURE__ */ forwardRef3(({ attendableId, related, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals4();
-  try {
-    const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);
-    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 self-center", classNames),
-      ref: forwardedRef
-    });
-  } finally {
-    _effect.f();
-  }
+var StackItemHeadingLabel = /* @__PURE__ */ forwardRef4(({ attendableId, related, classNames, ...props }, forwardedRef) => {
+  const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);
+  return /* @__PURE__ */ React6.createElement("h1", {
+    ...props,
+    "data-attention": (related && isRelated || hasAttention || isAncestor).toString(),
+    className: mx5("pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText self-center", classNames),
+    ref: forwardedRef
+  });
 });
 
 // src/components/StackItem/StackItemResizeHandle.tsx
-import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
-import React5 from "react";
+import React7 from "react";
 import { ResizeHandle } from "@dxos/react-ui-dnd";
 var MIN_WIDTH = 20;
 var MIN_HEIGHT = 3;
 var StackItemResizeHandle = () => {
-  var _effect = _useSignals5();
-  try {
-    const { orientation } = useStack();
-    const { setSize, size } = useStackItem();
-    return /* @__PURE__ */ React5.createElement(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();
-  }
+  const { orientation } = useStack();
+  const { setSize, size } = useStackItem();
+  return /* @__PURE__ */ React7.createElement(ResizeHandle, {
+    side: orientation === "horizontal" ? "inline-end" : "block-end",
+    fallbackSize: DEFAULT_EXTRINSIC_SIZE,
+    minSize: orientation === "horizontal" ? MIN_WIDTH : MIN_HEIGHT,
+    size,
+    onSizeChange: setSize
+  });
 };
 
 // src/components/StackItem/StackItemSigil.tsx
-import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
-import React7, { Fragment, forwardRef as forwardRef4, useState as useState3 } from "react";
+import React9, { Fragment, forwardRef as forwardRef5, useState as useState3 } from "react";
 import { keySymbols } from "@dxos/keyboard";
-import { Button, DropdownMenu, Icon, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { Button, DropdownMenu, Icon, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { useAttention as useAttention2 } from "@dxos/react-ui-attention";
-import { descriptionText, mx as mx4 } from "@dxos/react-ui-theme";
+import { descriptionText, mx as mx6 } from "@dxos/ui-theme";
 import { getHostPlatform } from "@dxos/util";
 
 // src/components/StackItem/MenuSignifier.tsx
-import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
-import React6 from "react";
-var MenuSignifierHorizontal = () => {
-  var _effect = _useSignals6();
-  try {
-    return /* @__PURE__ */ React6.createElement("svg", {
-      className: "absolute block-end-[7px]",
-      width: 20,
-      height: 2,
-      viewBox: "0 0 20 2",
-      stroke: "currentColor",
-      opacity: 0.5
-    }, /* @__PURE__ */ React6.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();
-  }
-};
-
-// src/translations.ts
-var translationKey = "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 React8 from "react";
+var MenuSignifierHorizontal = () => /* @__PURE__ */ React8.createElement("svg", {
+  className: "absolute block-end-[7px]",
+  width: 20,
+  height: 2,
+  viewBox: "0 0 20 2",
+  stroke: "currentColor",
+  opacity: 0.5
+}, /* @__PURE__ */ React8.createElement("line", {
+  x1: 0.5,
+  y1: 0.75,
+  x2: 19,
+  y2: 0.75,
+  strokeWidth: 1.25,
+  strokeLinecap: "round",
+  strokeDasharray: "6 20",
+  strokeDashoffset: "-6.5"
+}));
 
 // src/components/StackItem/StackItemSigil.tsx
-var StackItemSigilButton = /* @__PURE__ */ forwardRef4(({ attendableId, classNames, related, isMenu = true, children, ...props }, forwardedRef) => {
-  var _effect = _useSignals7();
-  try {
-    const { hasAttention, isAncestor, isRelated } = useAttention2(attendableId);
-    const variant = related && isRelated || hasAttention || isAncestor ? "primary" : "ghost";
-    return /* @__PURE__ */ React7.createElement(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__ */ React7.createElement(MenuSignifierHorizontal, null), children);
-  } finally {
-    _effect.f();
-  }
+var StackItemSigilButton = /* @__PURE__ */ forwardRef5(({ attendableId, classNames, related, isMenu = true, children, ...props }, forwardedRef) => {
+  const { hasAttention, isAncestor, isRelated } = useAttention2(attendableId);
+  const variant = related && isRelated || hasAttention || isAncestor ? "primary" : "ghost";
+  return /* @__PURE__ */ React9.createElement(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__ */ React9.createElement(MenuSignifierHorizontal, null), children);
 });
-var StackItemSigil = /* @__PURE__ */ forwardRef4(({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {
-  var _effect = _useSignals7();
-  try {
-    const { t } = useTranslation(translationKey);
-    const [optionsMenuOpen, setOptionsMenuOpen] = useState3(false);
-    const hasActions = actionGroups && actionGroups.length > 0;
-    const button = /* @__PURE__ */ React7.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__ */ React7.createElement("span", {
-      className: "sr-only"
-    }, triggerLabel), /* @__PURE__ */ React7.createElement(Icon, {
-      icon,
-      size: 5
-    }));
-    if (!hasActions) {
-      return button;
-    }
-    return /* @__PURE__ */ React7.createElement(DropdownMenu.Root, {
-      open: optionsMenuOpen,
-      onOpenChange: setOptionsMenuOpen
-    }, /* @__PURE__ */ React7.createElement(DropdownMenu.Trigger, {
-      asChild: true,
-      ref: forwardedRef
-    }, button), /* @__PURE__ */ React7.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React7.createElement(DropdownMenu.Content, {
-      classNames: "z-[31]"
-    }, /* @__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__ */ React7.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
+var StackItemSigil = /* @__PURE__ */ forwardRef5(({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey);
+  const [optionsMenuOpen, setOptionsMenuOpen] = useState3(false);
+  const hasActions = actionGroups && actionGroups.length > 0;
+  const button = /* @__PURE__ */ React9.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__ */ React9.createElement("span", {
+    className: "sr-only"
+  }, triggerLabel), /* @__PURE__ */ React9.createElement(Icon, {
+    icon,
+    size: 5
+  }));
+  if (!hasActions) {
+    return button;
+  }
+  return /* @__PURE__ */ React9.createElement(DropdownMenu.Root, {
+    open: optionsMenuOpen,
+    onOpenChange: setOptionsMenuOpen
+  }, /* @__PURE__ */ React9.createElement(DropdownMenu.Trigger, {
+    asChild: true,
+    ref: forwardedRef
+  }, button), /* @__PURE__ */ React9.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React9.createElement(DropdownMenu.Content, {
+    classNames: "z-[31]"
+  }, /* @__PURE__ */ React9.createElement(DropdownMenu.Viewport, null, actionGroups?.map((actions, index) => {
+    const separator = index > 0 ? /* @__PURE__ */ React9.createElement(DropdownMenu.Separator, null) : null;
+    return /* @__PURE__ */ React9.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__ */ React9.createElement(Root, {
+        key: action.id,
+        onClick: (event) => {
+          if (action.properties.disabled) {
+            return;
           }
-        }, /* @__PURE__ */ React7.createElement(Icon, {
-          icon: action.properties.icon ?? "ph--placeholder--regular",
-          size: 4
-        }), /* @__PURE__ */ React7.createElement("span", {
-          className: "grow truncate"
-        }, toLocalizedString(action.properties.label ?? "", t)), menuItemType === "toggle" && /* @__PURE__ */ React7.createElement(DropdownMenu.ItemIndicator, {
-          asChild: true
-        }, /* @__PURE__ */ React7.createElement(Icon, {
-          icon: "ph--check--regular",
-          size: 4
-        })), shortcut && /* @__PURE__ */ React7.createElement("span", {
-          className: mx4("shrink-0", descriptionText)
-        }, keySymbols(shortcut).join("")));
-      }));
-    }), children), /* @__PURE__ */ React7.createElement(DropdownMenu.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
+          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
+        }
+      }, /* @__PURE__ */ React9.createElement(Icon, {
+        icon: action.properties.icon ?? "ph--placeholder--regular",
+        size: 4
+      }), /* @__PURE__ */ React9.createElement("span", {
+        className: "grow truncate"
+      }, toLocalizedString(action.properties.label ?? "", t)), menuItemType === "toggle" && /* @__PURE__ */ React9.createElement(DropdownMenu.ItemIndicator, {
+        asChild: true
+      }, /* @__PURE__ */ React9.createElement(Icon, {
+        icon: "ph--check--regular",
+        size: 4
+      })), shortcut && /* @__PURE__ */ React9.createElement("span", {
+        className: mx6("shrink-0", descriptionText)
+      }, keySymbols(shortcut).join("")));
+    }));
+  }), children), /* @__PURE__ */ React9.createElement(DropdownMenu.Arrow, null))));
 });
 
 // src/components/StackItem/StackItem.tsx
 var DEFAULT_HORIZONTAL_SIZE = 48;
 var DEFAULT_VERTICAL_SIZE = "min-content";
 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 _effect = _useSignals8();
-  try {
-    const [itemElement, itemRef] = useState4(null);
-    const [selfDragHandleElement, selfDragHandleRef] = useState4(null);
-    const [closestEdge, setEdge] = useState4(null);
-    const [sourceId, setSourceId] = useState4(null);
-    const [dragState, setDragState] = useState4(idle);
-    const { orientation, rail, onRearrange } = useStack();
-    const [size = orientation === "horizontal" ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] = useState4(propsSize);
-    const Root = role ?? "div";
-    const composedItemRef = composeRefs2(itemRef, forwardedRef);
-    const setSize = useCallback2((nextSize, commit) => {
-      setInternalSize(nextSize);
-      if (commit) {
-        onSizeChange?.(nextSize);
-      }
-    }, [
-      onSizeChange
-    ]);
-    const type = orientation === "horizontal" ? "column" : "card";
-    useLayoutEffect2(() => {
-      if (!itemElement || !onRearrange || disableRearrange) {
-        return;
+var StackItemRoot = /* @__PURE__ */ forwardRef6(({ item, children, classNames, size: propsSize, onSizeChange, role, order, prevSiblingId, nextSiblingId, style, disableRearrange, focusIndicatorVariant = "over-all", ...props }, forwardedRef) => {
+  const [itemElement, itemRef] = useState4(null);
+  const composedItemRef = composeRefs2(itemRef, forwardedRef);
+  const [selfDragHandleElement, selfDragHandleRef] = useState4(null);
+  const [closestEdge, setEdge] = useState4(null);
+  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 Root = role ?? "div";
+  const setSize = useCallback2((nextSize, commit) => {
+    setInternalSize(nextSize);
+    if (commit) {
+      onSizeChange?.(nextSize);
+    }
+  }, [
+    onSizeChange
+  ]);
+  const type = orientation === "horizontal" ? "column" : "card";
+  useLayoutEffect2(() => {
+    if (!itemElement || !onRearrange || disableRearrange) {
+      return;
+    }
+    return combine2(draggable({
+      element: itemElement,
+      ...selfDragHandleElement && {
+        dragHandle: selfDragHandleElement
+      },
+      getInitialData: () => ({
+        id: item.id,
+        type
+      }),
+      onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
+        document.body.setAttribute("data-drag-preview", "true");
+        const offsetFn = preserveOffsetOnSource({
+          element: source.element,
+          input: location.current.input
+        });
+        const rect = source.element.getBoundingClientRect();
+        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);
       }
-      return combine2(draggable({
-        element: itemElement,
-        ...selfDragHandleElement && {
-          dragHandle: selfDragHandleElement
-        },
-        getInitialData: () => ({
+    }), dropTargetForElements2({
+      element: itemElement,
+      getData: ({ input, element }) => {
+        return attachClosestEdge2({
           id: item.id,
           type
-        }),
-        onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
-          document.body.setAttribute("data-drag-preview", "true");
-          const offsetFn = preserveOffsetOnSource({
-            element: source.element,
-            input: location.current.input
-          });
-          const rect = source.element.getBoundingClientRect();
-          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);
+        }, {
+          input,
+          element,
+          allowedEdges: orientation === "horizontal" ? [
+            "left",
+            "right"
+          ] : [
+            "top",
+            "bottom"
+          ]
+        });
+      },
+      onDragEnter: ({ self, source }) => {
+        if (source.data.type === self.data.type) {
+          setEdge(extractClosestEdge2(self.data));
+          setSourceId(source.data.id);
         }
-      }), dropTargetForElements2({
-        element: itemElement,
-        getData: ({ input, element }) => {
-          return attachClosestEdge2({
-            id: item.id,
-            type
-          }, {
-            input,
-            element,
-            allowedEdges: orientation === "horizontal" ? [
-              "left",
-              "right"
-            ] : [
-              "top",
-              "bottom"
-            ]
-          });
-        },
-        onDragEnter: ({ self, source }) => {
-          if (source.data.type === self.data.type) {
-            setEdge(extractClosestEdge2(self.data));
-            setSourceId(source.data.id);
-          }
-        },
-        onDrag: ({ self, source }) => {
-          if (source.data.type === self.data.type) {
-            setEdge(extractClosestEdge2(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, extractClosestEdge2(self.data));
-          }
+      },
+      onDrag: ({ self, source }) => {
+        if (source.data.type === self.data.type) {
+          setEdge(extractClosestEdge2(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, extractClosestEdge2(self.data));
         }
-      }));
-    }, [
-      orientation,
-      item,
-      onRearrange,
-      selfDragHandleElement,
-      itemElement
-    ]);
-    const focusableGroupAttrs = useFocusableGroup2({
-      tabBehavior: "limited"
-    });
-    const shouldShowDropIndicator = () => {
-      if (!closestEdge || !sourceId) {
-        return false;
-      }
-      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;
-    };
-    const stackItemContextValue = useMemo3(() => ({
-      selfDragHandleRef,
-      size,
-      setSize,
-      state: dragState,
-      setState: setDragState,
-      role
-    }), [
-      selfDragHandleRef,
-      size,
-      setSize,
-      dragState,
-      setDragState,
-      role
-    ]);
-    return /* @__PURE__ */ React8.createElement(StackItemContext.Provider, {
-      value: stackItemContextValue
-    }, /* @__PURE__ */ React8.createElement(Root, {
-      ...props,
-      tabIndex: 0,
-      ...focusableGroupAttrs,
-      className: mx5("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"), role === "section" && orientation !== "horizontal" && "border-be border-subduedSeparator", classNames),
-      "data-dx-stack-item": true,
-      ...resizeAttributes,
-      style: {
-        ...sizeStyle(size, orientation),
-        ...Number.isFinite(order) && {
-          [orientation === "horizontal" ? "gridColumn" : "gridRow"]: `${order}`
-        },
-        ...style
+    }));
+  }, [
+    orientation,
+    item,
+    onRearrange,
+    selfDragHandleElement,
+    itemElement
+  ]);
+  const focusableGroupAttrs = useFocusableGroup({
+    tabBehavior: "limited"
+  });
+  const shouldShowDropIndicator = () => {
+    if (!closestEdge || !sourceId) {
+      return false;
+    }
+    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;
+  };
+  const stackItemContextValue = useMemo3(() => ({
+    selfDragHandleRef,
+    size,
+    setSize,
+    state: dragState,
+    setState: setDragState,
+    role
+  }), [
+    selfDragHandleRef,
+    size,
+    setSize,
+    dragState,
+    setDragState,
+    role
+  ]);
+  return /* @__PURE__ */ React10.createElement(StackItemContext.Provider, {
+    value: stackItemContextValue
+  }, /* @__PURE__ */ React10.createElement(Root, {
+    ...props,
+    tabIndex: 0,
+    ...focusableGroupAttrs,
+    className: mx7("group/stack-item grid relative", focusIndicatorVariant === "over-all" ? "dx-focus-ring-inset-over-all" : focusIndicatorVariant === "over-all-always" ? "dx-focus-ring-inset-over-all-always" : orientation === "horizontal" ? focusIndicatorVariant === "group-always" ? "dx-focus-ring-group-x-always" : "dx-focus-ring-group-x" : focusIndicatorVariant === "group-always" ? "dx-focus-ring-group-y-always" : "dx-focus-ring-group-y", orientation === "horizontal" ? "grid-rows-subgrid" : "grid-cols-subgrid", rail && (orientation === "horizontal" ? "row-span-2" : "col-span-2"), role === "section" && orientation !== "horizontal" && "border-be border-subduedSeparator", classNames),
+    "data-dx-stack-item": stackId,
+    "data-dx-item-id": item.id,
+    ...resizeAttributes,
+    style: {
+      ...stackSize !== "split" && sizeStyle(size, orientation),
+      ...Number.isFinite(order) && {
+        [orientation === "horizontal" ? "gridColumn" : "gridRow"]: `${order}`
       },
-      ref: composedItemRef
-    }, children, shouldShowDropIndicator() && closestEdge && /* @__PURE__ */ React8.createElement(ListItem2.DropIndicator, {
-      lineInset: 8,
-      terminalInset: -8,
-      edge: closestEdge
-    })));
-  } finally {
-    _effect.f();
-  }
+      ...style
+    },
+    ref: composedItemRef
+  }, children, shouldShowDropIndicator() && closestEdge && /* @__PURE__ */ React10.createElement(ListItem2.DropIndicator, {
+    lineInset: 8,
+    terminalInset: -8,
+    edge: closestEdge
+  })));
 });
 var StackItemDragPreview = ({ children }) => {
   const { state } = useStackItem();
@@ -687,477 +911,16 @@ var StackItemDragPreview = ({ children }) => {
 var StackItem = {
   Root: StackItemRoot,
   Content: StackItemContent,
+  DragHandle: StackItemDragHandle,
+  DragPreview: StackItemDragPreview,
   Heading: StackItemHeading,
   HeadingLabel: StackItemHeadingLabel,
   HeadingStickyContent: StackItemHeadingStickyContent,
   ResizeHandle: StackItemResizeHandle,
-  DragHandle: StackItemDragHandle,
   Sigil: StackItemSigil,
-  SigilButton: StackItemSigilButton,
-  DragPreview: StackItemDragPreview
-};
-
-// src/exemplars/Card/Card.tsx
-import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
-import { Primitive } from "@radix-ui/react-primitive";
-import { Slot as Slot3 } from "@radix-ui/react-slot";
-import React9, { forwardRef as forwardRef6 } from "react";
-import { Icon as Icon2, IconButton, Toolbar, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { hoverableControls, mx as mx6 } from "@dxos/react-ui-theme";
-
-// src/exemplars/Card/fragments.ts
-var cardRoot = "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 cardSpacing = "pli-cardSpacingInline mlb-cardSpacingBlock";
-var labelSpacing = "mbs-inputSpacingBlock mbe-labelSpacingBlock";
-var cardDialogContent = "p-0 bs-content min-bs-[8rem] max-bs-full md:max-is-[32rem] overflow-hidden";
-var cardDialogHeader = "pli-cardSpacingInline mbs-cardSpacingBlock flex justify-between";
-var cardDialogOverflow = "overflow-y-auto min-bs-0 flex-1";
-var cardDialogPaddedOverflow = `${cardDialogOverflow} plb-cardSpacingBlock`;
-var cardDialogSearchListRoot = "pli-cardSpacingInline pbs-cardSpacingBlock [&>input]:mbe-0 min-bs-0 flex-1 flex flex-col";
-var cardText = cardSpacing;
-var cardHeading = "text-lg font-medium line-clamp-2";
-var cardChrome = "pli-[--dx-cardSpacingChrome] mlb-[--dx-cardSpacingChrome] [&_.dx-button]:text-start [&_.dx-button]:is-full";
-
-// src/exemplars/Card/Card.tsx
-var CardStaticRoot = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "group", ...props }, forwardedRef) => {
-  var _effect = _useSignals9();
-  try {
-    const Root = asChild ? Slot3 : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        cardRoot,
-        classNames
-      ]
-    } : {
-      className: mx6(cardRoot, classNames),
-      role
-    };
-    return /* @__PURE__ */ React9.createElement(Root, {
-      ...props,
-      ...rootProps,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var CardSurfaceRoot = ({ role = "never", children }) => {
-  var _effect = _useSignals9();
-  try {
-    if ([
-      "popover",
-      "card--kanban"
-    ].includes(role)) {
-      return /* @__PURE__ */ React9.createElement("div", {
-        className: role === "popover" ? "popover-card-width" : role === "card--kanban" ? "contents" : ""
-      }, children);
-    } else {
-      return /* @__PURE__ */ React9.createElement(CardStaticRoot, role === "card--document" && {
-        classNames: [
-          "mlb-[1em]",
-          hoverableControls
-        ]
-      }, children);
-    }
-  } finally {
-    _effect.f();
-  }
-};
-var CardHeading = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "heading", ...props }, forwardedRef) => {
-  var _effect = _useSignals9();
-  try {
-    const Root = asChild ? Slot3 : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        cardHeading,
-        cardText,
-        classNames
-      ]
-    } : {
-      className: mx6(cardHeading, cardText, classNames),
-      role
-    };
-    return /* @__PURE__ */ React9.createElement(Root, {
-      ...props,
-      ...rootProps,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var CardToolbar = /* @__PURE__ */ forwardRef6(({ children, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals9();
-  try {
-    return /* @__PURE__ */ React9.createElement(Toolbar.Root, {
-      ...props,
-      classNames: [
-        "bg-transparent density-coarse",
-        classNames
-      ],
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var CardToolbarIconButton = Toolbar.IconButton;
-var CardToolbarSeparator = Toolbar.Separator;
-var CardDragHandle = /* @__PURE__ */ forwardRef6(({ toolbarItem }, forwardedRef) => {
-  var _effect = _useSignals9();
-  try {
-    const { t } = useTranslation2(translationKey);
-    const Root = toolbarItem ? Toolbar.IconButton : IconButton;
-    return /* @__PURE__ */ React9.createElement(Root, {
-      iconOnly: true,
-      icon: "ph--dots-six-vertical--regular",
-      variant: "ghost",
-      label: t("drag handle label"),
-      classNames: "pli-2",
-      ref: forwardedRef
-    });
-  } finally {
-    _effect.f();
-  }
-});
-var CardDragPreview = StackItem.DragPreview;
-var CardMenu = Primitive.div;
-var CardPoster = (props) => {
-  var _effect = _useSignals9();
-  try {
-    const aspect = props.aspect === "auto" ? "aspect-auto" : "aspect-video";
-    if (props.image) {
-      return /* @__PURE__ */ React9.createElement("img", {
-        className: `dx-card__poster ${aspect} object-cover is-full bs-auto`,
-        src: props.image,
-        alt: props.alt
-      });
-    }
-    if (props.icon) {
-      return /* @__PURE__ */ React9.createElement("div", {
-        role: "image",
-        className: `dx-card__poster grid ${aspect} place-items-center bg-inputSurface text-subdued`,
-        "aria-label": props.alt
-      }, /* @__PURE__ */ React9.createElement(Icon2, {
-        icon: props.icon,
-        size: 10
-      }));
-    }
-  } finally {
-    _effect.f();
-  }
-};
-var CardChrome = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  var _effect = _useSignals9();
-  try {
-    const Root = asChild ? Slot3 : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        cardChrome,
-        classNames
-      ]
-    } : {
-      className: mx6(cardChrome, classNames),
-      role
-    };
-    return /* @__PURE__ */ React9.createElement(Root, {
-      ...props,
-      ...rootProps,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var CardText = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  var _effect = _useSignals9();
-  try {
-    const Root = asChild ? Slot3 : "p";
-    const rootProps = asChild ? {
-      classNames: [
-        cardText,
-        classNames
-      ]
-    } : {
-      className: mx6(cardText, classNames),
-      role
-    };
-    return /* @__PURE__ */ React9.createElement(Root, {
-      ...props,
-      ...rootProps,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var Card = {
-  StaticRoot: CardStaticRoot,
-  SurfaceRoot: CardSurfaceRoot,
-  Heading: CardHeading,
-  Toolbar: CardToolbar,
-  ToolbarIconButton: CardToolbarIconButton,
-  ToolbarSeparator: CardToolbarSeparator,
-  DragHandle: CardDragHandle,
-  DragPreview: CardDragPreview,
-  Menu: CardMenu,
-  Poster: CardPoster,
-  Chrome: CardChrome,
-  Text: CardText
-};
-
-// src/exemplars/Card/CardDragPreview.tsx
-import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
-import React10 from "react";
-import { mx as mx7 } from "@dxos/react-ui-theme";
-var CardDragPreviewRoot = ({ children }) => {
-  var _effect = _useSignals10();
-  try {
-    return /* @__PURE__ */ React10.createElement("div", {
-      className: "p-2"
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var CardDragPreviewContent = ({ children }) => {
-  var _effect = _useSignals10();
-  try {
-    return /* @__PURE__ */ React10.createElement("div", {
-      className: mx7(cardRoot, "ring-focusLine ring-neutralFocusIndicator")
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var CardDragPreview2 = {
-  Root: CardDragPreviewRoot,
-  Content: CardDragPreviewContent
-};
-
-// src/exemplars/CardStack/CardStack.tsx
-import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
-import { Slot as Slot4 } from "@radix-ui/react-slot";
-import React11, { forwardRef as forwardRef7 } from "react";
-import { mx as mx8 } from "@dxos/react-ui-theme";
-var CardStackStack = /* @__PURE__ */ forwardRef7(({ children, classNames, itemsCount = 0, ...props }, forwardedRef) => {
-  var _effect = _useSignals11();
-  try {
-    return /* @__PURE__ */ React11.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,
-      "data-density": "fine",
-      ...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__ */ forwardRef7(({ children, classNames, asChild, role = "heading", ...props }, forwardedRef) => {
-  var _effect = _useSignals11();
-  try {
-    const Root = asChild ? Slot4 : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        cardStackHeading,
-        classNames
-      ]
-    } : {
-      className: mx8(cardStackHeading, classNames),
-      role
-    };
-    return /* @__PURE__ */ React11.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__ */ forwardRef7(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  var _effect = _useSignals11();
-  try {
-    const Root = asChild ? Slot4 : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        cardStackFooter,
-        classNames
-      ]
-    } : {
-      className: mx8(cardStackFooter, classNames),
-      role
-    };
-    return /* @__PURE__ */ React11.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__ */ forwardRef7(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  var _effect = _useSignals11();
-  try {
-    const Root = asChild ? Slot4 : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        ...cardStackContent,
-        classNames
-      ]
-    } : {
-      className: mx8(...cardStackContent, classNames),
-      role
-    };
-    return /* @__PURE__ */ React11.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__ */ forwardRef7(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  var _effect = _useSignals11();
-  try {
-    const Root = asChild ? Slot4 : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        cardStackRoot,
-        classNames
-      ]
-    } : {
-      className: mx8(cardStackRoot, classNames),
-      role
-    };
-    return /* @__PURE__ */ React11.createElement(Root, {
-      ...props,
-      ...rootProps,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var cardStackItem = "contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0";
-var CardStackItem = /* @__PURE__ */ forwardRef7(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  var _effect = _useSignals11();
-  try {
-    const Root = asChild ? Slot4 : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        cardStackItem,
-        classNames
-      ]
-    } : {
-      className: mx8(cardStackItem, classNames),
-      role
-    };
-    return /* @__PURE__ */ React11.createElement(Root, {
-      ...props,
-      ...rootProps,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var CardStack = {
-  Root: CardStackRoot,
-  Content: CardStackContent,
-  Stack: CardStackStack,
-  Heading: CardStackHeading,
-  Footer: CardStackFooter,
-  DragHandle: CardStackDragHandle,
-  Item: CardStackItem
-};
-
-// src/exemplars/CardStack/CardStackDragPreview.tsx
-import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
-import React12 from "react";
-import { IconButton as IconButton2, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { mx as mx9 } from "@dxos/react-ui-theme";
-var CardStackDragPreviewRoot = ({ children }) => {
-  var _effect = _useSignals12();
-  try {
-    return /* @__PURE__ */ React12.createElement("div", {
-      className: "p-2"
-    }, /* @__PURE__ */ React12.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 = _useSignals12();
-  try {
-    const { t } = useTranslation3(translationKey);
-    return /* @__PURE__ */ React12.createElement("div", {
-      className: "flex items-center p-2"
-    }, /* @__PURE__ */ React12.createElement(IconButton2, {
-      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 = _useSignals12();
-  try {
-    return /* @__PURE__ */ React12.createElement("div", {
-      className: mx9("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 = _useSignals12();
-  try {
-    return /* @__PURE__ */ React12.createElement("div", {
-      className: "p-2 border-t border-separator"
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var CardStackDragPreview = {
-  Root: CardStackDragPreviewRoot,
-  Heading: CardStackDragPreviewHeading,
-  Content: CardStackDragPreviewContent,
-  Footer: CardStackDragPreviewFooter
+  SigilButton: StackItemSigilButton
 };
 export {
-  Card,
-  CardDragPreview2 as CardDragPreview,
   CardStack,
   CardStackDragPreview,
   DEFAULT_EXTRINSIC_SIZE,
@@ -1166,24 +929,13 @@ export {
   Stack,
   StackContext,
   StackItem,
-  StackItemDragPreview,
   autoScrollRootAttributes,
-  cardChrome,
-  cardDialogContent,
-  cardDialogHeader,
-  cardDialogOverflow,
-  cardDialogPaddedOverflow,
-  cardDialogSearchListRoot,
-  cardHeading,
-  cardRoot,
-  cardSpacing,
   cardStackContent,
+  cardStackDefaultInlineSizeRem,
   cardStackFooter,
   cardStackHeading,
   cardStackItem,
   cardStackRoot,
-  cardText,
-  labelSpacing,
   railGridHorizontal,
   railGridHorizontalContainFitContent,
   railGridVertical,