@dxos/react-ui-stack 0.8.4-main.3a94e84 → 0.8.4-main.3c1ae3b

package/dist/lib/node-esm/{chunk-3WVEPAJ4.mjs → chunk-KCFYDRBZ.mjs}

@@ -1,5 +1,156 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 
+// src/components/Image/Image.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import React, { useCallback, useRef, useState } from "react";
+import { mx } from "@dxos/react-ui-theme";
+var cache = /* @__PURE__ */ new Map();
+var Image = ({ classNames, src, alt = "", crossOrigin = "anonymous", sampleSize = 64, contrast = 0.9 }) => {
+  var _effect = _useSignals();
+  try {
+    const [crossOriginState, setCrossOriginState] = useState(crossOrigin);
+    const [dominantColor, setDominantColor] = useState(void 0);
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const canvasRef = useRef(null);
+    const handleImageError = () => {
+      setCrossOriginState(void 0);
+    };
+    const handleImageLoad = useCallback(({ target }) => {
+      const rgb = cache.get(src);
+      if (rgb) {
+        setDominantColor(rgb);
+        setImageLoaded(true);
+        return;
+      }
+      const img = target;
+      if (!canvasRef.current) {
+        return;
+      }
+      try {
+        const color = extractDominantColor(canvasRef.current, img, {
+          sampleSize,
+          contrast
+        });
+        if (color) {
+          const rgb2 = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+          cache.set(src, rgb2);
+          setDominantColor(rgb2);
+        }
+      } catch {
+        setCrossOriginState(void 0);
+      }
+      setImageLoaded(true);
+    }, [
+      sampleSize,
+      contrast,
+      src
+    ]);
+    return /* @__PURE__ */ React.createElement("div", {
+      className: mx(`relative flex is-full justify-center overflow-hidden transition-all duration-700`, classNames),
+      style: {
+        backgroundColor: dominantColor
+      }
+    }, /* @__PURE__ */ React.createElement("canvas", {
+      ref: canvasRef,
+      style: {
+        display: "none"
+      },
+      "aria-hidden": "true"
+    }), /* @__PURE__ */ React.createElement("div", {
+      className: "absolute inset-0 pointer-events-none",
+      style: {
+        background: dominantColor ? `radial-gradient(circle at center, transparent 30%, ${dominantColor} 100%)` : void 0,
+        transition: "opacity 0.7s ease-in-out",
+        opacity: 0.5
+      }
+    }), /* @__PURE__ */ React.createElement("img", {
+      src,
+      alt,
+      crossOrigin: crossOriginState,
+      onError: handleImageError,
+      onLoad: handleImageLoad,
+      className: mx("z-10 object-contain transition-opacity duration-500", classNames),
+      style: {
+        opacity: imageLoaded ? 1 : 0
+      }
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+var extractDominantColor = (canvas, img, { sampleSize = 64, contrast = 0.95 }) => {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return null;
+  }
+  canvas.width = sampleSize;
+  canvas.height = sampleSize;
+  ctx.drawImage(img, 0, 0, sampleSize, sampleSize);
+  const imageData = ctx.getImageData(0, 0, sampleSize, sampleSize);
+  const pixels = imageData.data;
+  if (isTransparent(pixels, sampleSize)) {
+    return null;
+  }
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let totalWeight = 0;
+  const cornerSize = Math.floor(sampleSize * 0.125);
+  for (let y = 0; y < sampleSize; y++) {
+    for (let x = 0; x < sampleSize; x++) {
+      const isInTopLeft = x < cornerSize && y < cornerSize;
+      const isInTopRight = x >= sampleSize - cornerSize && y < cornerSize;
+      const isInBottomLeft = x < cornerSize && y >= sampleSize - cornerSize;
+      const isInBottomRight = x >= sampleSize - cornerSize && y >= sampleSize - cornerSize;
+      if (!isInTopLeft && !isInTopRight && !isInBottomLeft && !isInBottomRight) {
+        continue;
+      }
+      const i = (y * sampleSize + x) * 4;
+      const red = pixels[i];
+      const green = pixels[i + 1];
+      const blue = pixels[i + 2];
+      const alpha = pixels[i + 3];
+      if (alpha === 0) continue;
+      const max = Math.max(red, green, blue);
+      const min = Math.min(red, green, blue);
+      const saturation = max === 0 ? 0 : (max - min) / max;
+      const weight = 1 + saturation * 2;
+      r += red * weight;
+      g += green * weight;
+      b += blue * weight;
+      totalWeight += weight;
+    }
+  }
+  if (totalWeight > 0) {
+    r = Math.round(Math.round(r / totalWeight) * contrast);
+    g = Math.round(Math.round(g / totalWeight) * contrast);
+    b = Math.round(Math.round(b / totalWeight) * contrast);
+    return [
+      r,
+      g,
+      b
+    ];
+  }
+  return null;
+};
+var isTransparent = (pixels, sampleSize, threshold = 0.5) => {
+  let edgeTransparentPixels = 0;
+  const edgePixels = sampleSize * 4 - 4;
+  for (let x = 0; x < sampleSize; x++) {
+    const topIndex = x * 4;
+    if (pixels[topIndex + 3] === 0) edgeTransparentPixels++;
+    const bottomIndex = ((sampleSize - 1) * sampleSize + x) * 4;
+    if (pixels[bottomIndex + 3] === 0) edgeTransparentPixels++;
+  }
+  for (let y = 1; y < sampleSize - 1; y++) {
+    const leftIndex = y * sampleSize * 4;
+    if (pixels[leftIndex + 3] === 0) edgeTransparentPixels++;
+    const rightIndex = (y * sampleSize + sampleSize - 1) * 4;
+    if (pixels[rightIndex + 3] === 0) edgeTransparentPixels++;
+  }
+  return edgeTransparentPixels / edgePixels > threshold;
+};
+
 // src/components/StackContext.tsx
 import { createContext, useContext } from "react";
 var StackContext = /* @__PURE__ */ createContext({
@@ -24,27 +175,28 @@ var StackItemContext = /* @__PURE__ */ createContext({
 var useStackItem = () => useContext(StackItemContext);
 
 // src/components/Stack/Stack.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import { useArrowNavigationGroup } from "@fluentui/react-tabster";
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 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 React2, { Children, forwardRef, useCallback as useCallback2, useEffect, useMemo, useState as useState3 } from "react";
+import { ListItem, useId } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // src/hooks/useStackDropForElements.ts
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import { useLayoutEffect, useState } from "react";
-var useStackDropForElements = ({ id, element, scrollElement = element, selfDroppable, orientation, onRearrange }) => {
-  const [dropping, setDropping] = useState(false);
+import { useLayoutEffect, useState as useState2 } from "react";
+var noop = () => {
+};
+var useStackDropForElements = ({ id, element, scrollElement = element, orientation, selfDroppable, onRearrange }) => {
+  const [dropping, setDropping] = useState2(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({
@@ -77,10 +229,10 @@ var useStackDropForElements = ({ id, element, scrollElement = element, selfDropp
           onRearrange(source.data, self.data, extractClosestEdge(self.data));
         }
       }
-    }), autoScrollForElements({
+    }) : noop, scrollElement ? autoScrollForElements({
       element: scrollElement,
       getAllowedAxis: () => orientation
-    }));
+    }) : noop);
   }, [
     element,
     scrollElement,
@@ -102,16 +254,23 @@ 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();
+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) => {
+  var _effect = _useSignals2();
   try {
-    const [stackElement, stackRef] = useState2(null);
+    const stackId = useId("stack", props.id);
+    const [stackElement, stackRef] = useState3(null);
+    const [lastFocusedItem, setLastFocusedItem] = useState3();
     const composedItemRef = composeRefs(stackRef, forwardedRef);
-    const arrowNavigationAttrs = useArrowNavigationGroup({
-      axis: orientation
-    });
     const styles = {
-      [orientation === "horizontal" ? "gridTemplateColumns" : "gridTemplateRows"]: `repeat(${itemsCount}, min-content) [tabster-dummies] 0`,
+      [orientation === "horizontal" ? "gridTemplateColumns" : "gridTemplateRows"]: size === "split" ? `repeat(${itemsCount}, 1fr)` : `repeat(${itemsCount}, min-content) [tabster-dummies] 0`,
       ...style
     };
     const selfDroppable = !!(itemsCount < 1 && onRearrange && props.id);
@@ -123,7 +282,7 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
       orientation,
       onRearrange
     });
-    const handleScroll = useCallback(() => {
+    const handleScroll = useCallback2(() => {
       if (stackElement && Number.isFinite(separatorOnScroll)) {
         const scrollPosition = orientation === "horizontal" ? stackElement.scrollLeft : stackElement.scrollTop;
         const scrollSize = orientation === "horizontal" ? stackElement.scrollWidth : stackElement.scrollHeight;
@@ -139,14 +298,118 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
       separatorOnScroll,
       orientation
     ]);
+    const handleBlur = useCallback2((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);
+        }
+      }
+      props.onBlur?.(event);
+    }, [
+      stackId,
+      props.onBlur
+    ]);
+    const handleKeyDown = useCallback2((event) => {
+      const target = event.target;
+      if (event.key.startsWith("Arrow") && !target.closest(`input, textarea, [role="textbox"], [data-tabster*="mover"], [data-arrow-keys="all"], [data-arrow-keys~="${event.key.toLowerCase().slice(5)}"]`)) {
+        const closestOwnedItem = target.closest(`[data-dx-stack-item="${stackId}"]`);
+        const closestStack = target.closest("[data-dx-stack]");
+        const closestStackItems = Array.from(closestStack?.querySelectorAll(`[data-dx-stack-item="${stackId}"]`) ?? []);
+        const closestStackOrientation = closestStack?.getAttribute("aria-orientation");
+        const ancestorStack = closestStack?.parentElement?.closest("[data-dx-stack]");
+        if (closestOwnedItem && closestStack) {
+          const ancestorOrientation = ancestorStack?.getAttribute("aria-orientation");
+          const parallelDelta = (closestStackOrientation === "vertical" ? event.key === "ArrowUp" : event.key === "ArrowLeft") ? -1 : (closestStackOrientation === "vertical" ? event.key === "ArrowDown" : event.key === "ArrowRight") ? 1 : 0;
+          const perpendicularDelta = (closestStackOrientation === "vertical" ? event.key === "ArrowLeft" : event.key === "ArrowUp") ? -1 : (closestStackOrientation === "vertical" ? event.key === "ArrowRight" : event.key === "ArrowDown") ? 1 : 0;
+          if (parallelDelta !== 0) {
+            const currentIndex = closestStackItems.indexOf(closestOwnedItem);
+            const nextIndex = currentIndex + parallelDelta;
+            let adjacentItem;
+            if (circularFocus) {
+              adjacentItem = closestStackItems[(nextIndex + closestStackItems.length) % closestStackItems.length];
+            } else {
+              if (nextIndex >= 0 && nextIndex < closestStackItems.length) {
+                adjacentItem = closestStackItems[nextIndex];
+              }
+            }
+            if (adjacentItem) {
+              event.preventDefault();
+              scrollIntoViewAndFocus(adjacentItem, closestStackOrientation);
+            }
+          }
+          if (perpendicularDelta !== 0) {
+            if (ancestorStack && ancestorOrientation !== closestStackOrientation) {
+              const siblingStacks = Array.from(ancestorStack.querySelectorAll(`[data-dx-stack-item="${ancestorStack.getAttribute("data-dx-stack")}"] [data-dx-stack]`));
+              const currentStackIndex = siblingStacks.indexOf(closestStack);
+              const nextStackIndex = currentStackIndex + perpendicularDelta;
+              let adjacentStack;
+              if (ancestorStack.getAttribute("data-dx-stack-circular-focus") === "true") {
+                adjacentStack = siblingStacks[(nextStackIndex + siblingStacks.length) % siblingStacks.length];
+              } else {
+                if (nextStackIndex >= 0 && nextStackIndex < siblingStacks.length) {
+                  adjacentStack = siblingStacks[nextStackIndex];
+                }
+              }
+              const adjacentStackSelfItem = adjacentStack?.closest(`[data-dx-stack-item=${ancestorStack.getAttribute("data-dx-stack")}]`);
+              const adjacentStackItems = adjacentStack ? Array.from(adjacentStack.querySelectorAll(`[data-dx-stack-item="${adjacentStack.getAttribute("data-dx-stack")}"]`)) : [];
+              if (adjacentStack && adjacentStackItems.length > 0) {
+                let closestItem = adjacentStackItems[0];
+                const lastFocusedItem2 = adjacentStack.querySelector(`[data-dx-item-id="${adjacentStack.getAttribute("data-dx-last-focused-item") ?? "never"}"]`);
+                if (lastFocusedItem2) {
+                  closestItem = lastFocusedItem2;
+                } else {
+                  const ownedItemRect = closestOwnedItem.getBoundingClientRect();
+                  const targetPosition = closestStackOrientation === "vertical" ? ownedItemRect.top : ownedItemRect.left;
+                  let closestDistance = Infinity;
+                  for (const item of adjacentStackItems) {
+                    const itemRect = item.getBoundingClientRect();
+                    const itemPosition = closestStackOrientation === "vertical" ? itemRect.top : itemRect.left;
+                    const distance = Math.abs(itemPosition - targetPosition);
+                    if (distance < closestDistance) {
+                      closestDistance = distance;
+                      closestItem = item;
+                    }
+                    if (closestDistance <= PERPENDICULAR_FOCUS_THRESHHOLD) {
+                      break;
+                    }
+                  }
+                }
+                event.preventDefault();
+                scrollIntoViewAndFocus(closestItem, closestStackOrientation);
+              } else if (adjacentStackSelfItem) {
+                event.preventDefault();
+                scrollIntoViewAndFocus(adjacentStackSelfItem, ancestorOrientation);
+              }
+            } else if (closestOwnedItem) {
+              const closestOwnedItemStack = closestOwnedItem.querySelector("[data-dx-stack]");
+              const closestOwnedItemStackItems = closestOwnedItemStack ? Array.from(closestOwnedItemStack.querySelectorAll(`[data-dx-stack-item="${closestOwnedItemStack.getAttribute("data-dx-stack")}"]`)) : [];
+              if (closestOwnedItemStackItems.length > 0) {
+                event.preventDefault();
+                scrollIntoViewAndFocus(closestOwnedItemStackItems[[
+                  "ArrowUp",
+                  "ArrowLeft"
+                ].includes(event.key) ? closestOwnedItemStackItems.length - 1 : 0], closestOwnedItemStack?.getAttribute("aria-orientation"));
+              }
+            }
+          }
+        }
+      }
+      props.onKeyDown?.(event);
+    }, [
+      props.onKeyDown,
+      stackId,
+      circularFocus
+    ]);
     const gridClasses = useMemo(() => {
       if (!rail) {
-        return orientation === "horizontal" ? "grid-rows-1 pli-1" : "grid-cols-1 plb-1";
+        return orientation === "horizontal" ? "grid-rows-1 pli-[--stack-gap]" : "grid-cols-1 plb-[--stack-gap]";
       }
       if (orientation === "horizontal") {
-        return size === "contain-fit-content" ? railGridHorizontalContainFitContent : railGridHorizontal;
+        return railGridHorizontal;
       } else {
-        return size === "contain-fit-content" ? railGridVerticalContainFitContent : railGridVertical;
+        return railGridVertical;
       }
     }, [
       rail,
@@ -171,17 +434,22 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
       stackElement,
       handleScroll
     ]);
-    return /* @__PURE__ */ React.createElement(StackContext.Provider, {
+    return /* @__PURE__ */ React2.createElement(StackContext.Provider, {
       value: {
         orientation,
         rail,
         size,
-        onRearrange
+        onRearrange,
+        stackId
       }
-    }, /* @__PURE__ */ React.createElement("div", {
+    }, /* @__PURE__ */ React2.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),
+      className: mx2("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,
@@ -189,7 +457,7 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
       ...Number.isFinite(separatorOnScroll) && {
         onScroll: handleScroll
       }
-    }, children, selfDroppable && dropping && /* @__PURE__ */ React.createElement(ListItem.DropIndicator, {
+    }, children, selfDroppable && dropping && /* @__PURE__ */ React2.createElement(ListItem.DropIndicator, {
       lineInset: 8,
       terminalInset: -8,
       gap: -8,
@@ -220,26 +488,26 @@ var translations = [
 ];
 
 // src/components/StackItem/StackItem.tsx
-import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals9 } 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 React9, { forwardRef as forwardRef5, useCallback as useCallback3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useState as useState5 } 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 mx6 } from "@dxos/react-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();
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import React3, { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+var StackItemContent = /* @__PURE__ */ forwardRef2(({ children, toolbar, statusbar, layoutManaged, classNames, size = "intrinsic", scrollable, ...props }, forwardedRef) => {
+  var _effect = _useSignals3();
   try {
     const { size: stackItemSize } = useStack();
     const { role } = useStackItem();
@@ -258,10 +526,10 @@ var StackItemContent = /* @__PURE__ */ forwardRef2(({ children, toolbar, statusb
       statusbar,
       layoutManaged
     ]);
-    return /* @__PURE__ */ React2.createElement("div", {
+    return /* @__PURE__ */ React3.createElement("div", {
       role: "none",
       ...props,
-      className: mx2("group grid grid-cols-[100%] density-coarse", 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),
+      className: mx3("group grid grid-cols-[100%] density-coarse", size === "video" ? "aspect-video" : size === "square" && "aspect-square", stackItemSize === "contain" && "min-bs-0 overflow-hidden", scrollable ? "min-bs-0 overflow-y-auto scrollbar-thin contain-layout" : "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),
       style,
       "data-popover-collision-boundary": true,
       ref: forwardedRef
@@ -272,15 +540,15 @@ var StackItemContent = /* @__PURE__ */ forwardRef2(({ children, toolbar, statusb
 });
 
 // src/components/StackItem/StackItemDragHandle.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import { Slot } from "@radix-ui/react-slot";
-import React3 from "react";
+import React4 from "react";
 var StackItemDragHandle = ({ asChild, children }) => {
-  var _effect = _useSignals3();
+  var _effect = _useSignals4();
   try {
     const { selfDragHandleRef } = useStackItem();
     const Root = asChild ? Slot : "div";
-    return /* @__PURE__ */ React3.createElement(Root, {
+    return /* @__PURE__ */ React4.createElement(Root, {
       ref: selfDragHandleRef,
       role: "button"
     }, children);
@@ -290,35 +558,29 @@ var StackItemDragHandle = ({ asChild, children }) => {
 };
 
 // src/components/StackItem/StackItemHeading.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import { useFocusableGroup } from "@fluentui/react-tabster";
+import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
 import { Slot as Slot2 } from "@radix-ui/react-slot";
-import React4, { forwardRef as forwardRef3 } from "react";
+import React5, { forwardRef as forwardRef3 } from "react";
 import { useAttention } from "@dxos/react-ui-attention";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import { mx as mx4 } from "@dxos/react-ui-theme";
 var StackItemHeading = ({ children, classNames, asChild, separateOnScroll, ...props }) => {
-  var _effect = _useSignals4();
+  var _effect = _useSignals5();
   try {
     const { orientation } = useStack();
-    const focusableGroupAttrs = useFocusableGroup({
-      tabBehavior: "limited"
-    });
     const Root = asChild ? Slot2 : "div";
-    return /* @__PURE__ */ React4.createElement(Root, {
+    return /* @__PURE__ */ React5.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)
+      className: mx4("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);
   } finally {
     _effect.f();
   }
 };
 var StackItemHeadingStickyContent = ({ children }) => {
-  var _effect = _useSignals4();
+  var _effect = _useSignals5();
   try {
-    return /* @__PURE__ */ React4.createElement("div", {
+    return /* @__PURE__ */ React5.createElement("div", {
       role: "none",
       className: "sticky block-start-0 bg-[--sticky-bg] p-1 is-full"
     }, children);
@@ -327,13 +589,13 @@ var StackItemHeadingStickyContent = ({ children }) => {
   }
 };
 var StackItemHeadingLabel = /* @__PURE__ */ forwardRef3(({ attendableId, related, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals4();
+  var _effect = _useSignals5();
   try {
     const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);
-    return /* @__PURE__ */ React4.createElement("h1", {
+    return /* @__PURE__ */ React5.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),
+      className: mx4("pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText self-center", classNames),
       ref: forwardedRef
     });
   } finally {
@@ -342,17 +604,17 @@ var StackItemHeadingLabel = /* @__PURE__ */ forwardRef3(({ attendableId, related
 });
 
 // src/components/StackItem/StackItemResizeHandle.tsx
-import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
-import React5 from "react";
+import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
+import React6 from "react";
 import { ResizeHandle } from "@dxos/react-ui-dnd";
 var MIN_WIDTH = 20;
 var MIN_HEIGHT = 3;
 var StackItemResizeHandle = () => {
-  var _effect = _useSignals5();
+  var _effect = _useSignals6();
   try {
     const { orientation } = useStack();
     const { setSize, size } = useStackItem();
-    return /* @__PURE__ */ React5.createElement(ResizeHandle, {
+    return /* @__PURE__ */ React6.createElement(ResizeHandle, {
       side: orientation === "horizontal" ? "inline-end" : "block-end",
       fallbackSize: DEFAULT_EXTRINSIC_SIZE,
       minSize: orientation === "horizontal" ? MIN_WIDTH : MIN_HEIGHT,
@@ -365,28 +627,28 @@ var StackItemResizeHandle = () => {
 };
 
 // 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 { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
+import React8, { Fragment, forwardRef as forwardRef4, useState as useState4 } from "react";
 import { keySymbols } from "@dxos/keyboard";
 import { Button, DropdownMenu, Icon, toLocalizedString, useTranslation } 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 mx5 } from "@dxos/react-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";
+import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
+import React7 from "react";
 var MenuSignifierHorizontal = () => {
-  var _effect = _useSignals6();
+  var _effect = _useSignals7();
   try {
-    return /* @__PURE__ */ React6.createElement("svg", {
+    return /* @__PURE__ */ React7.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", {
+    }, /* @__PURE__ */ React7.createElement("line", {
       x1: 0.5,
       y1: 0.75,
       x2: 19,
@@ -403,11 +665,11 @@ var MenuSignifierHorizontal = () => {
 
 // src/components/StackItem/StackItemSigil.tsx
 var StackItemSigilButton = /* @__PURE__ */ forwardRef4(({ attendableId, classNames, related, isMenu = true, children, ...props }, forwardedRef) => {
-  var _effect = _useSignals7();
+  var _effect = _useSignals8();
   try {
     const { hasAttention, isAncestor, isRelated } = useAttention2(attendableId);
     const variant = related && isRelated || hasAttention || isAncestor ? "primary" : "ghost";
-    return /* @__PURE__ */ React7.createElement(Button, {
+    return /* @__PURE__ */ React8.createElement(Button, {
       ...props,
       variant,
       classNames: [
@@ -415,50 +677,50 @@ var StackItemSigilButton = /* @__PURE__ */ forwardRef4(({ attendableId, classNam
         classNames
       ],
       ref: forwardedRef
-    }, isMenu && /* @__PURE__ */ React7.createElement(MenuSignifierHorizontal, null), children);
+    }, isMenu && /* @__PURE__ */ React8.createElement(MenuSignifierHorizontal, null), children);
   } finally {
     _effect.f();
   }
 });
 var StackItemSigil = /* @__PURE__ */ forwardRef4(({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {
-  var _effect = _useSignals7();
+  var _effect = _useSignals8();
   try {
     const { t } = useTranslation(translationKey);
-    const [optionsMenuOpen, setOptionsMenuOpen] = useState3(false);
+    const [optionsMenuOpen, setOptionsMenuOpen] = useState4(false);
     const hasActions = actionGroups && actionGroups.length > 0;
-    const button = /* @__PURE__ */ React7.createElement(StackItemSigilButton, {
+    const button = /* @__PURE__ */ React8.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", {
+    }, /* @__PURE__ */ React8.createElement("span", {
       className: "sr-only"
-    }, triggerLabel), /* @__PURE__ */ React7.createElement(Icon, {
+    }, triggerLabel), /* @__PURE__ */ React8.createElement(Icon, {
       icon,
       size: 5
     }));
     if (!hasActions) {
       return button;
     }
-    return /* @__PURE__ */ React7.createElement(DropdownMenu.Root, {
+    return /* @__PURE__ */ React8.createElement(DropdownMenu.Root, {
       open: optionsMenuOpen,
       onOpenChange: setOptionsMenuOpen
-    }, /* @__PURE__ */ React7.createElement(DropdownMenu.Trigger, {
+    }, /* @__PURE__ */ React8.createElement(DropdownMenu.Trigger, {
       asChild: true,
       ref: forwardedRef
-    }, button), /* @__PURE__ */ React7.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React7.createElement(DropdownMenu.Content, {
+    }, button), /* @__PURE__ */ React8.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React8.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, {
+    }, /* @__PURE__ */ React8.createElement(DropdownMenu.Viewport, null, actionGroups?.map((actions, index) => {
+      const separator = index > 0 ? /* @__PURE__ */ React8.createElement(DropdownMenu.Separator, null) : null;
+      return /* @__PURE__ */ React8.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, {
+        return /* @__PURE__ */ React8.createElement(Root, {
           key: action.id,
           onClick: (event) => {
             if (action.properties.disabled) {
@@ -474,21 +736,21 @@ var StackItemSigil = /* @__PURE__ */ forwardRef4(({ actions: actionGroups, onAct
           ...action.properties?.testId && {
             "data-testid": action.properties.testId
           }
-        }, /* @__PURE__ */ React7.createElement(Icon, {
+        }, /* @__PURE__ */ React8.createElement(Icon, {
           icon: action.properties.icon ?? "ph--placeholder--regular",
           size: 4
-        }), /* @__PURE__ */ React7.createElement("span", {
+        }), /* @__PURE__ */ React8.createElement("span", {
           className: "grow truncate"
-        }, toLocalizedString(action.properties.label ?? "", t)), menuItemType === "toggle" && /* @__PURE__ */ React7.createElement(DropdownMenu.ItemIndicator, {
+        }, toLocalizedString(action.properties.label ?? "", t)), menuItemType === "toggle" && /* @__PURE__ */ React8.createElement(DropdownMenu.ItemIndicator, {
           asChild: true
-        }, /* @__PURE__ */ React7.createElement(Icon, {
+        }, /* @__PURE__ */ React8.createElement(Icon, {
           icon: "ph--check--regular",
           size: 4
-        })), shortcut && /* @__PURE__ */ React7.createElement("span", {
-          className: mx4("shrink-0", descriptionText)
+        })), shortcut && /* @__PURE__ */ React8.createElement("span", {
+          className: mx5("shrink-0", descriptionText)
         }, keySymbols(shortcut).join("")));
       }));
-    }), children), /* @__PURE__ */ React7.createElement(DropdownMenu.Arrow, null))));
+    }), children), /* @__PURE__ */ React8.createElement(DropdownMenu.Arrow, null))));
   } finally {
     _effect.f();
   }
@@ -499,18 +761,18 @@ 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();
+  var _effect = _useSignals9();
   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 [itemElement, itemRef] = useState5(null);
+    const [selfDragHandleElement, selfDragHandleRef] = useState5(null);
+    const [closestEdge, setEdge] = useState5(null);
+    const [sourceId, setSourceId] = useState5(null);
+    const [dragState, setDragState] = useState5(idle);
+    const { orientation, rail, onRearrange, size: stackSize, stackId } = useStack();
+    const [size = orientation === "horizontal" ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] = useState5(propsSize);
     const Root = role ?? "div";
     const composedItemRef = composeRefs2(itemRef, forwardedRef);
-    const setSize = useCallback2((nextSize, commit) => {
+    const setSize = useCallback3((nextSize, commit) => {
       setInternalSize(nextSize);
       if (commit) {
         onSizeChange?.(nextSize);
@@ -619,7 +881,7 @@ var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, s
       selfDragHandleElement,
       itemElement
     ]);
-    const focusableGroupAttrs = useFocusableGroup2({
+    const focusableGroupAttrs = useFocusableGroup({
       tabBehavior: "limited"
     });
     const shouldShowDropIndicator = () => {
@@ -654,24 +916,25 @@ var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, s
       setDragState,
       role
     ]);
-    return /* @__PURE__ */ React8.createElement(StackItemContext.Provider, {
+    return /* @__PURE__ */ React9.createElement(StackItemContext.Provider, {
       value: stackItemContextValue
-    }, /* @__PURE__ */ React8.createElement(Root, {
+    }, /* @__PURE__ */ React9.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,
+      className: mx6("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: {
-        ...sizeStyle(size, orientation),
+        ...stackSize !== "split" && sizeStyle(size, orientation),
         ...Number.isFinite(order) && {
           [orientation === "horizontal" ? "gridColumn" : "gridRow"]: `${order}`
         },
         ...style
       },
       ref: composedItemRef
-    }, children, shouldShowDropIndicator() && closestEdge && /* @__PURE__ */ React8.createElement(ListItem2.DropIndicator, {
+    }, children, shouldShowDropIndicator() && closestEdge && /* @__PURE__ */ React9.createElement(ListItem2.DropIndicator, {
       lineInset: 8,
       terminalInset: -8,
       edge: closestEdge
@@ -702,6 +965,7 @@ var StackItem = {
 // 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 cardNoSpacing = "pli-0 mlb-0";
 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";
@@ -709,18 +973,20 @@ 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";
+var cardHeading = "text-lg font-medium line-clamp-2 grow";
+var cardChrome = "pli-[--dx-cardSpacingChrome] mlb-[--dx-cardSpacingChrome] [&_.dx-button]:text-start [&_.dx-button]:is-full [&_.dx-button]:pis-[calc(var(--dx-cardSpacingInline)-var(--dx-cardSpacingChrome))]";
 
 // src/exemplars/Card/Card.tsx
-import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals10 } 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 React10, { 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";
-var CardStaticRoot = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "group", ...props }, forwardedRef) => {
-  var _effect = _useSignals9();
+import { cardMinInlineSize, hoverableControls, mx as mx7 } from "@dxos/react-ui-theme";
+var cardDefaultInlineSize = cardMinInlineSize;
+var cardStackDefaultInlineSizeRem = cardDefaultInlineSize + 2.125;
+var CardStaticRoot = /* @__PURE__ */ forwardRef6(({ children, classNames, id, asChild, role = "group", ...props }, forwardedRef) => {
+  var _effect = _useSignals10();
   try {
     const Root = asChild ? Slot3 : "div";
     const rootProps = asChild ? {
@@ -729,10 +995,13 @@ var CardStaticRoot = /* @__PURE__ */ forwardRef6(({ children, classNames, asChil
         classNames
       ]
     } : {
-      className: mx6(cardRoot, classNames),
+      className: mx7(cardRoot, classNames),
       role
     };
-    return /* @__PURE__ */ React9.createElement(Root, {
+    return /* @__PURE__ */ React10.createElement(Root, {
+      ...id && {
+        "data-object-id": id
+      },
       ...props,
       ...rootProps,
       ref: forwardedRef
@@ -741,35 +1010,41 @@ var CardStaticRoot = /* @__PURE__ */ forwardRef6(({ children, classNames, asChil
     _effect.f();
   }
 });
-var CardSurfaceRoot = ({ role = "never", children, classNames }) => {
-  var _effect = _useSignals9();
+var CardSurfaceRoot = /* @__PURE__ */ forwardRef6(({ id, role = "never", children, classNames }, forwardedRef) => {
+  var _effect = _useSignals10();
   try {
     if ([
       "card--popover",
       "card--intrinsic",
       "card--extrinsic"
     ].includes(role)) {
-      return /* @__PURE__ */ React9.createElement("div", {
-        className: mx6(role === "card--popover" ? "popover-card-width" : [
+      return /* @__PURE__ */ React10.createElement("div", {
+        ...id && {
+          "data-object-id": id
+        },
+        className: mx7(role === "card--popover" ? "popover-card-width" : [
           "card--intrinsic",
           "card--extrinsic"
-        ].includes(role) ? "contents" : "", classNames)
+        ].includes(role) ? "contents" : "", classNames),
+        ref: forwardedRef
       }, children);
     } else {
-      return /* @__PURE__ */ React9.createElement(CardStaticRoot, {
+      return /* @__PURE__ */ React10.createElement(CardStaticRoot, {
+        id,
         classNames: [
-          role === "card--transclusion" && "mlb-[1em]",
+          role === "card--transclusion" && "mlb-1",
           role === "card--transclusion" && hoverableControls,
           classNames
-        ]
+        ],
+        ref: forwardedRef
       }, children);
     }
   } finally {
     _effect.f();
   }
-};
+});
 var CardHeading = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "heading", ...props }, forwardedRef) => {
-  var _effect = _useSignals9();
+  var _effect = _useSignals10();
   try {
     const Root = asChild ? Slot3 : "div";
     const rootProps = asChild ? {
@@ -779,10 +1054,10 @@ var CardHeading = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild,
         classNames
       ]
     } : {
-      className: mx6(cardHeading, cardText, classNames),
+      className: mx7(cardHeading, cardText, classNames),
       role
     };
-    return /* @__PURE__ */ React9.createElement(Root, {
+    return /* @__PURE__ */ React10.createElement(Root, {
       ...props,
       ...rootProps,
       ref: forwardedRef
@@ -792,9 +1067,9 @@ var CardHeading = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild,
   }
 });
 var CardToolbar = /* @__PURE__ */ forwardRef6(({ children, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals9();
+  var _effect = _useSignals10();
   try {
-    return /* @__PURE__ */ React9.createElement(Toolbar.Root, {
+    return /* @__PURE__ */ React10.createElement(Toolbar.Root, {
       ...props,
       classNames: [
         "bg-transparent density-coarse",
@@ -809,11 +1084,11 @@ var CardToolbar = /* @__PURE__ */ forwardRef6(({ children, classNames, ...props
 var CardToolbarIconButton = Toolbar.IconButton;
 var CardToolbarSeparator = Toolbar.Separator;
 var CardDragHandle = /* @__PURE__ */ forwardRef6(({ toolbarItem }, forwardedRef) => {
-  var _effect = _useSignals9();
+  var _effect = _useSignals10();
   try {
     const { t } = useTranslation2(translationKey);
     const Root = toolbarItem ? Toolbar.IconButton : IconButton;
-    return /* @__PURE__ */ React9.createElement(Root, {
+    return /* @__PURE__ */ React10.createElement(Root, {
       iconOnly: true,
       icon: "ph--dots-six-vertical--regular",
       variant: "ghost",
@@ -828,22 +1103,26 @@ var CardDragHandle = /* @__PURE__ */ forwardRef6(({ toolbarItem }, forwardedRef)
 var CardDragPreview = StackItem.DragPreview;
 var CardMenu = Primitive.div;
 var CardPoster = (props) => {
-  var _effect = _useSignals9();
+  var _effect = _useSignals10();
   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`,
+      return /* @__PURE__ */ React10.createElement(Image, {
+        classNames: [
+          `dx-card__poster is-full`,
+          aspect,
+          props.classNames
+        ],
         src: props.image,
         alt: props.alt
       });
     }
     if (props.icon) {
-      return /* @__PURE__ */ React9.createElement("div", {
+      return /* @__PURE__ */ React10.createElement("div", {
         role: "image",
-        className: `dx-card__poster grid ${aspect} place-items-center bg-inputSurface text-subdued`,
+        className: mx7(`dx-card__poster grid place-items-center bg-inputSurface text-subdued`, aspect, props.classNames),
         "aria-label": props.alt
-      }, /* @__PURE__ */ React9.createElement(Icon2, {
+      }, /* @__PURE__ */ React10.createElement(Icon2, {
         icon: props.icon,
         size: 10
       }));
@@ -853,7 +1132,7 @@ var CardPoster = (props) => {
   }
 };
 var CardChrome = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  var _effect = _useSignals9();
+  var _effect = _useSignals10();
   try {
     const Root = asChild ? Slot3 : "div";
     const rootProps = asChild ? {
@@ -862,10 +1141,10 @@ var CardChrome = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, r
         classNames
       ]
     } : {
-      className: mx6(cardChrome, classNames),
+      className: mx7(cardChrome, classNames),
       role
     };
-    return /* @__PURE__ */ React9.createElement(Root, {
+    return /* @__PURE__ */ React10.createElement(Root, {
       ...props,
       ...rootProps,
       ref: forwardedRef
@@ -875,19 +1154,19 @@ var CardChrome = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, r
   }
 });
 var CardText = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
-  var _effect = _useSignals9();
+  var _effect = _useSignals10();
   try {
-    const Root = asChild ? Slot3 : "p";
+    const Root = asChild ? Slot3 : "div";
     const rootProps = asChild ? {
       classNames: [
         cardText,
         classNames
       ]
     } : {
-      className: mx6(cardText, classNames),
+      className: mx7(cardText, classNames),
       role
     };
-    return /* @__PURE__ */ React9.createElement(Root, {
+    return /* @__PURE__ */ React10.createElement(Root, {
       ...props,
       ...rootProps,
       ref: forwardedRef
@@ -912,13 +1191,13 @@ var Card = {
 };
 
 // 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";
+import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
+import React11 from "react";
+import { mx as mx8 } from "@dxos/react-ui-theme";
 var CardDragPreviewRoot = ({ children }) => {
-  var _effect = _useSignals10();
+  var _effect = _useSignals11();
   try {
-    return /* @__PURE__ */ React10.createElement("div", {
+    return /* @__PURE__ */ React11.createElement("div", {
       className: "p-2"
     }, children);
   } finally {
@@ -926,10 +1205,10 @@ var CardDragPreviewRoot = ({ children }) => {
   }
 };
 var CardDragPreviewContent = ({ children }) => {
-  var _effect = _useSignals10();
+  var _effect = _useSignals11();
   try {
-    return /* @__PURE__ */ React10.createElement("div", {
-      className: mx7(cardRoot, "ring-focusLine ring-neutralFocusIndicator")
+    return /* @__PURE__ */ React11.createElement("div", {
+      className: mx8(cardRoot, "ring-focusLine ring-neutralFocusIndicator")
     }, children);
   } finally {
     _effect.f();
@@ -941,51 +1220,25 @@ var CardDragPreview2 = {
 };
 
 // src/exemplars/CardStack/CardStack.tsx
-import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals12 } 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();
+import React12, { forwardRef as forwardRef7 } from "react";
+import { mx as mx9 } from "@dxos/react-ui-theme";
+var cardStackRoot = "flex flex-col";
+var CardStackRoot = /* @__PURE__ */ forwardRef7(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = _useSignals12();
   try {
     const Root = asChild ? Slot4 : "div";
     const rootProps = asChild ? {
       classNames: [
-        cardStackHeading,
+        cardStackRoot,
         classNames
       ]
     } : {
-      className: mx8(cardStackHeading, classNames),
+      className: mx9(cardStackRoot, classNames),
       role
     };
-    return /* @__PURE__ */ React11.createElement(Root, {
+    return /* @__PURE__ */ React12.createElement(Root, {
       ...props,
       ...rootProps,
       ref: forwardedRef
@@ -994,71 +1247,98 @@ var CardStackHeading = /* @__PURE__ */ forwardRef7(({ children, classNames, asCh
     _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();
+var cardStackContent = "shrink min-bs-0 grid dx-focus-ring-group-x-indicator bg-baseSurface";
+var CardStackContent = /* @__PURE__ */ forwardRef7(({ children, classNames, asChild, role = "none", footer, ...props }, forwardedRef) => {
+  var _effect = _useSignals12();
   try {
     const Root = asChild ? Slot4 : "div";
+    const baseClassNames = footer ? [
+      cardStackContent,
+      railGridHorizontalContainFitContent
+    ] : [
+      cardStackContent
+    ];
     const rootProps = asChild ? {
       classNames: [
-        cardStackFooter,
+        ...baseClassNames,
         classNames
       ]
     } : {
-      className: mx8(cardStackFooter, classNames),
+      className: mx9(...baseClassNames, classNames),
       role
     };
-    return /* @__PURE__ */ React11.createElement(Root, {
+    return /* @__PURE__ */ React12.createElement(Root, {
       ...props,
       ...rootProps,
+      "data-scroll-separator": "false",
       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();
+var CardStackStack = /* @__PURE__ */ forwardRef7(({ children, classNames, itemsCount = 0, ...props }, forwardedRef) => {
+  var _effect = _useSignals12();
+  try {
+    return /* @__PURE__ */ React12.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);
+  } 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 = _useSignals12();
   try {
     const Root = asChild ? Slot4 : "div";
     const rootProps = asChild ? {
       classNames: [
-        ...cardStackContent,
+        cardStackItem,
         classNames
       ]
     } : {
-      className: mx8(...cardStackContent, classNames),
+      className: mx9(cardStackItem, classNames),
       role
     };
-    return /* @__PURE__ */ React11.createElement(Root, {
+    return /* @__PURE__ */ React12.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();
+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 = _useSignals12();
   try {
     const Root = asChild ? Slot4 : "div";
     const rootProps = asChild ? {
       classNames: [
-        cardStackRoot,
+        cardStackHeading,
         classNames
       ]
     } : {
-      className: mx8(cardStackRoot, classNames),
+      className: mx9(cardStackHeading, classNames),
       role
     };
-    return /* @__PURE__ */ React11.createElement(Root, {
+    return /* @__PURE__ */ React12.createElement(Root, {
       ...props,
       ...rootProps,
       ref: forwardedRef
@@ -1067,21 +1347,21 @@ var CardStackRoot = /* @__PURE__ */ forwardRef7(({ children, classNames, asChild
     _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();
+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 = _useSignals12();
   try {
     const Root = asChild ? Slot4 : "div";
     const rootProps = asChild ? {
       classNames: [
-        cardStackItem,
+        cardStackFooter,
         classNames
       ]
     } : {
-      className: mx8(cardStackItem, classNames),
+      className: mx9(cardStackFooter, classNames),
       role
     };
-    return /* @__PURE__ */ React11.createElement(Root, {
+    return /* @__PURE__ */ React12.createElement(Root, {
       ...props,
       ...rootProps,
       ref: forwardedRef
@@ -1090,6 +1370,7 @@ var CardStackItem = /* @__PURE__ */ forwardRef7(({ children, classNames, asChild
     _effect.f();
   }
 });
+var CardStackDragHandle = Card.DragHandle;
 var CardStack = {
   Root: CardStackRoot,
   Content: CardStackContent,
@@ -1101,16 +1382,16 @@ var CardStack = {
 };
 
 // src/exemplars/CardStack/CardStackDragPreview.tsx
-import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
-import React12 from "react";
+import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
+import React13 from "react";
 import { IconButton as IconButton2, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { mx as mx9 } from "@dxos/react-ui-theme";
+import { mx as mx10 } from "@dxos/react-ui-theme";
 var CardStackDragPreviewRoot = ({ children }) => {
-  var _effect = _useSignals12();
+  var _effect = _useSignals13();
   try {
-    return /* @__PURE__ */ React12.createElement("div", {
+    return /* @__PURE__ */ React13.createElement("div", {
       className: "p-2"
-    }, /* @__PURE__ */ React12.createElement("div", {
+    }, /* @__PURE__ */ React13.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 {
@@ -1118,12 +1399,12 @@ var CardStackDragPreviewRoot = ({ children }) => {
   }
 };
 var CardStackDragPreviewHeading = ({ children }) => {
-  var _effect = _useSignals12();
+  var _effect = _useSignals13();
   try {
     const { t } = useTranslation3(translationKey);
-    return /* @__PURE__ */ React12.createElement("div", {
+    return /* @__PURE__ */ React13.createElement("div", {
       className: "flex items-center p-2"
-    }, /* @__PURE__ */ React12.createElement(IconButton2, {
+    }, /* @__PURE__ */ React13.createElement(IconButton2, {
       iconOnly: true,
       icon: "ph--dots-six-vertical--regular",
       variant: "ghost",
@@ -1135,19 +1416,19 @@ var CardStackDragPreviewHeading = ({ children }) => {
   }
 };
 var CardStackDragPreviewContent = ({ children, itemsCount = 0 }) => {
-  var _effect = _useSignals12();
+  var _effect = _useSignals13();
   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")
+    return /* @__PURE__ */ React13.createElement("div", {
+      className: mx10("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();
+  var _effect = _useSignals13();
   try {
-    return /* @__PURE__ */ React12.createElement("div", {
+    return /* @__PURE__ */ React13.createElement("div", {
       className: "p-2 border-t border-separator"
     }, children);
   } finally {
@@ -1162,6 +1443,7 @@ var CardStackDragPreview = {
 };
 
 export {
+  Image,
   StackContext,
   railGridHorizontal,
   railGridVertical,
@@ -1178,6 +1460,7 @@ export {
   StackItem,
   cardRoot,
   cardSpacing,
+  cardNoSpacing,
   labelSpacing,
   cardDialogContent,
   cardDialogHeader,
@@ -1187,14 +1470,16 @@ export {
   cardText,
   cardHeading,
   cardChrome,
+  cardDefaultInlineSize,
+  cardStackDefaultInlineSizeRem,
   Card,
   CardDragPreview2 as CardDragPreview,
-  cardStackHeading,
-  cardStackFooter,
-  cardStackContent,
   cardStackRoot,
+  cardStackContent,
   cardStackItem,
+  cardStackHeading,
+  cardStackFooter,
   CardStack,
   CardStackDragPreview
 };
-//# sourceMappingURL=chunk-3WVEPAJ4.mjs.map
+//# sourceMappingURL=chunk-KCFYDRBZ.mjs.map