@dxos/react-ui-stack 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d

package/dist/lib/browser/chunk-FV7KWSG5.mjs

@@ -0,0 +1,1198 @@
+// src/components/StackContext.tsx
+import { createContext, useContext } from "react";
+var StackContext = /* @__PURE__ */ createContext({
+  orientation: "vertical",
+  rail: true,
+  size: "intrinsic"
+});
+var useStack = () => useContext(StackContext);
+var idle = {
+  type: "idle"
+};
+var StackItemContext = /* @__PURE__ */ createContext({
+  selfDragHandleRef: () => {
+  },
+  size: "min-content",
+  setSize: () => {
+  },
+  state: idle,
+  setState: () => {
+  }
+});
+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 { composeRefs } from "@radix-ui/react-compose-refs";
+import React, { Children, forwardRef, useCallback, useEffect, useMemo, useState as useState2 } from "react";
+import { ListItem } from "@dxos/react-ui";
+import { mx } 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);
+  useLayoutEffect(() => {
+    if (!element || !selfDroppable) {
+      return;
+    }
+    const acceptSourceType = orientation === "horizontal" ? "column" : "card";
+    return combine(dropTargetForElements({
+      element,
+      getData: ({ input, element: element2 }) => {
+        return attachClosestEdge({
+          id,
+          type: orientation === "horizontal" ? "card" : "column"
+        }, {
+          input,
+          element: element2,
+          allowedEdges: [
+            orientation === "horizontal" ? "left" : "top"
+          ]
+        });
+      },
+      onDragEnter: ({ source }) => {
+        if (source.data.type === acceptSourceType) {
+          setDropping(true);
+        }
+      },
+      onDrag: ({ source }) => {
+        if (source.data.type === acceptSourceType) {
+          setDropping(true);
+        }
+      },
+      onDragLeave: () => {
+        return setDropping(false);
+      },
+      onDrop: ({ self, source }) => {
+        setDropping(false);
+        if (source.data.type === acceptSourceType && selfDroppable && onRearrange) {
+          onRearrange(source.data, self.data, extractClosestEdge(self.data));
+        }
+      }
+    }), autoScrollForElements({
+      element: scrollElement,
+      getAllowedAxis: () => orientation
+    }));
+  }, [
+    element,
+    scrollElement,
+    selfDroppable,
+    orientation,
+    id,
+    onRearrange
+  ]);
+  return {
+    dropping
+  };
+};
+
+// src/components/Stack/Stack.tsx
+var railGridHorizontal = "grid-rows-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]";
+var railGridVertical = "grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]";
+var railGridHorizontalContainFitContent = "grid-rows-[[rail-start]_var(--rail-size)_[content-start]_fit-content(calc(100%-var(--rail-size)*2+2px))_[content-end]]";
+var railGridVerticalContainFitContent = "grid-cols-[[rail-start]_var(--rail-size)_[content-start]_fit-content(calc(100%-var(--rail-size)*2+2px))_[content-end]]";
+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));
+        }
+      }
+    }, [
+      stackElement,
+      separatorOnScroll,
+      orientation
+    ]);
+    const gridClasses = useMemo(() => {
+      if (!rail) {
+        return orientation === "horizontal" ? "grid-rows-1 pli-1" : "grid-cols-1 plb-1";
+      }
+      if (orientation === "horizontal") {
+        return size === "contain-fit-content" ? railGridHorizontalContainFitContent : railGridHorizontal;
+      } else {
+        return size === "contain-fit-content" ? railGridVerticalContainFitContent : railGridVertical;
+      }
+    }, [
+      rail,
+      orientation,
+      size
+    ]);
+    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
+      }
+    }, children, selfDroppable && dropping && /* @__PURE__ */ React.createElement(ListItem.DropIndicator, {
+      lineInset: 8,
+      terminalInset: -8,
+      gap: -8,
+      edge: orientation === "horizontal" ? "left" : "top"
+    })));
+  } 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"
+      }
+    }
+  }
+];
+
+// 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 { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
+import React8, { forwardRef as forwardRef5, useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useState as useState4 } from "react";
+import { 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";
+
+// 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%] 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),
+      style,
+      "data-popover-collision-boundary": true,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
+
+// 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";
+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();
+  }
+};
+
+// 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 { useAttention } from "@dxos/react-ui-attention";
+import { mx as mx3 } from "@dxos/react-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();
+  }
+};
+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();
+  }
+};
+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();
+  }
+});
+
+// src/components/StackItem/StackItemResizeHandle.tsx
+import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
+import React5 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();
+  }
+};
+
+// 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 { 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 { 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/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 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
+          }
+        }, /* @__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();
+  }
+});
+
+// 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;
+      }
+      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);
+        }
+      }), 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));
+          }
+        }
+      }));
+    }, [
+      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
+      },
+      ref: composedItemRef
+    }, children, shouldShowDropIndicator() && closestEdge && /* @__PURE__ */ React8.createElement(ListItem2.DropIndicator, {
+      lineInset: 8,
+      terminalInset: -8,
+      edge: closestEdge
+    })));
+  } finally {
+    _effect.f();
+  }
+});
+var StackItemDragPreview = ({ children }) => {
+  const { state } = useStackItem();
+  return state?.type === "preview" ? /* @__PURE__ */ createPortal(children({
+    item: state.item
+  }), state.container) : null;
+};
+var StackItem = {
+  Root: StackItemRoot,
+  Content: StackItemContent,
+  Heading: StackItemHeading,
+  HeadingLabel: StackItemHeadingLabel,
+  HeadingStickyContent: StackItemHeadingStickyContent,
+  ResizeHandle: StackItemResizeHandle,
+  DragHandle: StackItemDragHandle,
+  Sigil: StackItemSigil,
+  SigilButton: StackItemSigilButton,
+  DragPreview: StackItemDragPreview
+};
+
+// 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
+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";
+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, classNames }) => {
+  var _effect = _useSignals9();
+  try {
+    if ([
+      "card--popover",
+      "card--intrinsic",
+      "card--extrinsic"
+    ].includes(role)) {
+      return /* @__PURE__ */ React9.createElement("div", {
+        className: mx6(role === "card--popover" ? "popover-card-width" : [
+          "card--intrinsic",
+          "card--extrinsic"
+        ].includes(role) ? "contents" : "", classNames)
+      }, children);
+    } else {
+      return /* @__PURE__ */ React9.createElement(CardStaticRoot, {
+        classNames: [
+          role === "card--transclusion" && "mlb-[1em]",
+          role === "card--transclusion" && hoverableControls,
+          classNames
+        ]
+      }, 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
+};
+
+export {
+  StackContext,
+  railGridHorizontal,
+  railGridVertical,
+  railGridHorizontalContainFitContent,
+  railGridVerticalContainFitContent,
+  autoScrollRootAttributes,
+  Stack,
+  translationKey,
+  translations,
+  DEFAULT_HORIZONTAL_SIZE,
+  DEFAULT_VERTICAL_SIZE,
+  DEFAULT_EXTRINSIC_SIZE,
+  StackItemDragPreview,
+  StackItem,
+  cardRoot,
+  cardSpacing,
+  labelSpacing,
+  cardDialogContent,
+  cardDialogHeader,
+  cardDialogOverflow,
+  cardDialogPaddedOverflow,
+  cardDialogSearchListRoot,
+  cardText,
+  cardHeading,
+  cardChrome,
+  Card,
+  CardDragPreview2 as CardDragPreview,
+  cardStackHeading,
+  cardStackFooter,
+  cardStackContent,
+  cardStackRoot,
+  cardStackItem,
+  CardStack,
+  CardStackDragPreview
+};
+//# sourceMappingURL=chunk-FV7KWSG5.mjs.map