@dxos/react-ui-stack 0.6.14-staging.e15392e → 0.7.0

package/dist/lib/node/index.cjs

@@ -28,374 +28,526 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var node_exports = {};
 __export(node_exports, {
-  DEFAULT_TYPE: () => DEFAULT_TYPE,
-  SectionToolbar: () => SectionToolbar,
+  DEFAULT_EXTRINSIC_SIZE: () => DEFAULT_EXTRINSIC_SIZE,
+  DEFAULT_HORIZONTAL_SIZE: () => DEFAULT_HORIZONTAL_SIZE,
+  DEFAULT_VERTICAL_SIZE: () => DEFAULT_VERTICAL_SIZE,
+  LayoutControls: () => LayoutControls,
   Stack: () => Stack,
-  sectionToolbarLayout: () => sectionToolbarLayout,
+  StackContext: () => StackContext,
+  StackItem: () => StackItem,
+  railGridHorizontal: () => railGridHorizontal,
+  railGridVertical: () => railGridVertical,
   translations: () => translations_default
 });
 module.exports = __toCommonJS(node_exports);
 var import_react_tabster = require("@fluentui/react-tabster");
 var import_react = __toESM(require("react"));
-var import_react_resize_detector = require("react-resize-detector");
-var import_react_ui = require("@dxos/react-ui");
-var import_react_ui_mosaic = require("@dxos/react-ui-mosaic");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
+var import_react2 = require("react");
+var import_combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
+var import_adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var import_closest_edge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
+var import_box = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box");
 var import_react_tabster2 = require("@fluentui/react-tabster");
-var import_react2 = require("@phosphor-icons/react");
-var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"));
+var import_react_compose_refs = require("@radix-ui/react-compose-refs");
 var import_react3 = __toESM(require("react"));
-var import_react_ui2 = require("@dxos/react-ui");
-var import_react_ui_attention = require("@dxos/react-ui-attention");
-var import_react_ui_deck = require("@dxos/react-ui-deck");
-var import_react_ui_mosaic2 = require("@dxos/react-ui-mosaic");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
 var import_react4 = __toESM(require("react"));
-var CaretDownUp = ({ children, weight, ...props }) => {
-  return /* @__PURE__ */ import_react4.default.createElement("svg", {
+var import_react_ui_theme3 = require("@dxos/react-ui-theme");
+var import_react_tabster3 = require("@fluentui/react-tabster");
+var import_react5 = __toESM(require("react"));
+var import_react_ui_attention = require("@dxos/react-ui-attention");
+var import_react_ui_theme4 = require("@dxos/react-ui-theme");
+var import_adapter2 = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var import_disable_native_drag_preview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
+var import_prevent_unhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
+var import_react6 = __toESM(require("react"));
+var import_react_ui_theme5 = require("@dxos/react-ui-theme");
+var import_react7 = __toESM(require("react"));
+var import_keyboard = require("@dxos/keyboard");
+var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_attention2 = require("@dxos/react-ui-attention");
+var import_react_ui_theme6 = require("@dxos/react-ui-theme");
+var import_util = require("@dxos/util");
+var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
+var import_react_ui2 = require("@dxos/react-ui");
+var StackContext = /* @__PURE__ */ (0, import_react2.createContext)({
+  orientation: "vertical",
+  rail: true,
+  size: "intrinsic",
+  separators: true
+});
+var useStack = () => (0, import_react2.useContext)(StackContext);
+var StackItemContext = /* @__PURE__ */ (0, import_react2.createContext)({
+  selfDragHandleRef: () => {
+  },
+  size: "min-content",
+  setSize: () => {
+  }
+});
+var useStackItem = () => (0, import_react2.useContext)(StackItemContext);
+var 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 Stack = /* @__PURE__ */ (0, import_react.forwardRef)(({ children, classNames, style, orientation = "vertical", rail = true, separators = true, size = "intrinsic", itemsCount = import_react.Children.count(children), ...props }, forwardedRef) => {
+  const arrowNavigationGroup = (0, import_react_tabster.useArrowNavigationGroup)({
+    axis: orientation
+  });
+  const styles = {
+    [orientation === "horizontal" ? "gridTemplateColumns" : "gridTemplateRows"]: `repeat(${itemsCount}, min-content)`,
+    ...style
+  };
+  return /* @__PURE__ */ import_react.default.createElement(StackContext.Provider, {
+    value: {
+      orientation,
+      rail,
+      size,
+      separators
+    }
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    ...props,
+    ...arrowNavigationGroup,
+    className: (0, import_react_ui_theme.mx)("grid relative", rail ? orientation === "horizontal" ? railGridHorizontal : railGridVertical : orientation === "horizontal" ? "grid-rows-1" : "grid-cols-1", size === "contain" && (orientation === "horizontal" ? "overflow-x-auto min-bs-0 bs-full max-bs-full" : "overflow-y-auto min-is-0 is-full max-is-full"), separators && (orientation === "horizontal" ? "divide-separator divide-x" : "divide-separator divide-y"), classNames),
+    "aria-orientation": orientation,
+    style: styles,
+    ref: forwardedRef
+  }, children));
+});
+var StackItemContent = ({ children, toolbar = true, statusbar, contentSize = "cover", classNames, ...props }) => {
+  const { size, separators } = useStack();
+  return /* @__PURE__ */ import_react4.default.createElement("div", {
+    role: "none",
+    ...props,
+    className: (0, import_react_ui_theme3.mx)("group grid grid-cols-[100%]", size === "contain" && "min-bs-0 overflow-hidden", separators && "divide-separator divide-y", classNames),
+    style: {
+      gridTemplateRows: [
+        ...toolbar ? [
+          "var(--rail-action)"
+        ] : [],
+        "1fr",
+        ...statusbar ? [
+          "var(--statusbar-size)"
+        ] : []
+      ].join(" ")
+    }
+  }, children);
+};
+var StackItemHeading = ({ children, classNames, ...props }) => {
+  const { orientation } = useStack();
+  const { selfDragHandleRef } = useStackItem();
+  const focusableGroupAttrs = (0, import_react_tabster3.useFocusableGroup)({
+    tabBehavior: "limited"
+  });
+  return /* @__PURE__ */ import_react5.default.createElement("div", {
+    role: "heading",
+    ...props,
+    tabIndex: 0,
+    ...focusableGroupAttrs,
+    className: (0, import_react_ui_theme4.mx)("flex items-center ch-focus-ring-inset-over-all relative !border-is-0", orientation === "horizontal" ? "bs-[--rail-size]" : "is-[--rail-size] flex-col", classNames),
+    ref: selfDragHandleRef
+  }, children);
+};
+var StackItemHeadingLabel = /* @__PURE__ */ (0, import_react5.forwardRef)(({ attendableId, related, classNames, ...props }, forwardedRef) => {
+  const { hasAttention, isAncestor, isRelated } = (0, import_react_ui_attention.useAttention)(attendableId);
+  return /* @__PURE__ */ import_react5.default.createElement("h1", {
+    ...props,
+    "data-attention": (related && isRelated || hasAttention || isAncestor).toString(),
+    className: (0, import_react_ui_theme4.mx)("pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText", classNames),
+    ref: forwardedRef
+  });
+});
+var REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
+var MIN_SIZE = 20;
+var measureStackItem = (element) => {
+  const stackItemElement = element.closest("[data-dx-stack-item]");
+  return stackItemElement?.getBoundingClientRect() ?? {
+    width: DEFAULT_EXTRINSIC_SIZE,
+    height: DEFAULT_EXTRINSIC_SIZE
+  };
+};
+var getNextSize = (startSize, location, client) => {
+  return Math.max(MIN_SIZE, startSize + (location.current.input[client] - location.initial.input[client]) / REM);
+};
+var StackItemResizeHandle = () => {
+  const { orientation } = useStack();
+  const { setSize, size } = useStackItem();
+  const buttonRef = (0, import_react6.useRef)(null);
+  const dragStartSize = (0, import_react6.useRef)(size);
+  const client = orientation === "horizontal" ? "clientX" : "clientY";
+  (0, import_react6.useLayoutEffect)(() => {
+    if (!buttonRef.current || buttonRef.current.hasAttribute("draggable")) {
+      return;
+    }
+    (0, import_adapter2.draggable)({
+      element: buttonRef.current,
+      onGenerateDragPreview: ({ nativeSetDragImage }) => {
+        (0, import_disable_native_drag_preview.disableNativeDragPreview)({
+          nativeSetDragImage
+        });
+        import_prevent_unhandled.preventUnhandled.start();
+      },
+      onDragStart: () => {
+        dragStartSize.current = dragStartSize.current === "min-content" ? measureStackItem(buttonRef.current)[orientation === "horizontal" ? "width" : "height"] / REM : dragStartSize.current;
+      },
+      onDrag: ({ location }) => {
+        if (typeof dragStartSize.current !== "number") {
+          return;
+        }
+        setSize(getNextSize(dragStartSize.current, location, client));
+      },
+      onDrop: ({ location }) => {
+        if (typeof dragStartSize.current !== "number") {
+          return;
+        }
+        const nextSize = getNextSize(dragStartSize.current, location, client);
+        setSize(nextSize, true);
+        dragStartSize.current = nextSize;
+      }
+    });
+  }, []);
+  return /* @__PURE__ */ import_react6.default.createElement("button", {
+    ref: buttonRef,
+    className: (0, import_react_ui_theme5.mx)(orientation === "horizontal" ? "cursor-col-resize" : "cursor-row-resize", "group absolute is-3 bs-full inline-end-[-1px] !border-lb-0", "before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100", "before:absolute before:block before:inset-block-0 before:inline-end-0 before:is-1 before:bg-accentFocusIndicator")
+  }, /* @__PURE__ */ import_react6.default.createElement("div", {
+    role: "none",
+    className: "absolute block-start-0 inline-end-[1px] bs-[--rail-size] flex items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0"
+  }, /* @__PURE__ */ import_react6.default.createElement(DragHandleSignifier, null)));
+};
+var DragHandleSignifier = () => {
+  return /* @__PURE__ */ import_react6.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 256 256",
-    ...props
-  }, /* @__PURE__ */ import_react4.default.createElement("rect", {
-    width: "256",
-    height: "256",
-    fill: "none"
-  }), /* @__PURE__ */ import_react4.default.createElement("polyline", {
-    points: "80 224 128 176 176 224",
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "16"
-  }), /* @__PURE__ */ import_react4.default.createElement("polyline", {
-    points: "80 32 128 80 176 32",
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "16"
-  }), children);
+    fill: "currentColor",
+    className: "shrink-0 bs-[1em] is-[1em] text-unAccent"
+  }, /* @__PURE__ */ import_react6.default.createElement("path", {
+    d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+  }), /* @__PURE__ */ import_react6.default.createElement("path", {
+    d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+  }), /* @__PURE__ */ import_react6.default.createElement("path", {
+    d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+  }), /* @__PURE__ */ import_react6.default.createElement("path", {
+    d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+  }));
 };
-var stackColumns = "grid-cols-[var(--rail-size)_calc(100%-var(--rail-size))]";
+var MenuSignifierHorizontal = () => /* @__PURE__ */ import_react8.default.createElement("svg", {
+  className: "absolute block-end-[7px]",
+  width: 20,
+  height: 2,
+  viewBox: "0 0 20 2",
+  stroke: "currentColor",
+  opacity: 0.5
+}, /* @__PURE__ */ import_react8.default.createElement("line", {
+  x1: 0.5,
+  y1: 0.75,
+  x2: 19,
+  y2: 0.75,
+  strokeWidth: 1.25,
+  strokeLinecap: "round",
+  strokeDasharray: "6 20",
+  strokeDashoffset: "-6.5"
+}));
 var translationKey = "stack";
 var translations_default = [
   {
     "en-US": {
       [translationKey]: {
-        "empty stack message": "Drag items into the stack.",
-        "remove section label": "Delete",
-        "navigate to section label": "Navigate to item",
-        "untitled section title": "Untitled section",
-        "add section before label": "Add before",
-        "add section after label": "Add after",
-        "expand label": "Expand",
-        "collapse label": "Collapse"
+        "resize label": "Drag to resize",
+        "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",
+        "solo plank label": "Toggle solo mode",
+        "close label": "Close",
+        "minify label": "Minify"
       }
     }
   }
 ];
-var sectionActionDimensions = "p-1 shrink-0 min-bs-0 is-[--rail-action] bs-min";
-var resizeHandleStyles = (0, import_react_ui_theme2.mx)(import_react_ui_deck.resizeHandle, import_react_ui_deck.resizeHandleHorizontal, "is-full bs-[--rail-action] col-start-2");
-var Section = /* @__PURE__ */ (0, import_react3.forwardRef)(({ id, title, icon = "ph--placeholder--regular", size = "intrinsic", collapsed, active, isResizable, draggableProps, draggableStyle, onDelete, onNavigate, onAddBefore, onAddAfter, onCollapseSection, children }, forwardedRef) => {
-  const { t } = (0, import_react_ui2.useTranslation)(translationKey);
-  const [optionsMenuOpen, setOptionsMenuOpen] = (0, import_react3.useState)(false);
-  const sectionActionsToolbar = (0, import_react_tabster2.useTabsterAttributes)({
-    groupper: {},
-    focusable: {},
-    mover: {
-      cyclic: true,
-      direction: 1,
-      memorizeCurrent: false
-    }
-  });
-  const sectionContentGroup = (0, import_react_tabster2.useFocusableGroup)({});
-  const attendableAttrs = (0, import_react_ui_attention.useAttendableAttributes)(id);
-  return /* @__PURE__ */ import_react3.default.createElement(CollapsiblePrimitive.Root, {
-    asChild: true,
-    open: !collapsed,
-    onOpenChange: (nextOpen) => onCollapseSection?.(id, !nextOpen)
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ListItem.Root, {
-    ref: forwardedRef,
-    id,
-    ...attendableAttrs,
+var StackItemSigilButton = /* @__PURE__ */ (0, import_react7.forwardRef)(({ attendableId, classNames, related, children, ...props }, forwardedRef) => {
+  const { hasAttention, isAncestor, isRelated } = (0, import_react_ui_attention2.useAttention)(attendableId);
+  const variant = related && isRelated || hasAttention || isAncestor ? "primary" : "ghost";
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui.Button, {
+    ...props,
+    variant,
     classNames: [
-      "grid col-span-2 group/section",
-      active === "overlay" ? stackColumns : "grid-cols-subgrid snap-start"
+      "m-1 shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative",
+      classNames
     ],
-    style: draggableStyle
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    role: "none",
-    className: (0, import_react_ui_theme2.mx)("grid col-span-2 grid-cols-subgrid", "bg-base attention-surface", import_react_ui_theme2.hoverableControls, import_react_ui_theme2.hoverableFocusedWithinControls, (active === "origin" || active === "rearrange" || active === "destination") && "opacity-0")
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    role: "toolbar",
-    "aria-orientation": "vertical",
-    "aria-label": t("section controls label"),
-    ...!active && {
-      tabIndex: 0
-    },
-    ...!active && sectionActionsToolbar,
-    className: (0, import_react_ui_theme2.mx)("grid grid-cols-subgrid ch-focus-ring rounded-sm grid-rows-[min-content_min-content_1fr] m-1", "group-has-[[role=toolbar][aria-orientation=horizontal]]/section:pbs-[--rail-action]")
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
-    role: "none",
-    className: "sticky -block-start-px bg-[--sticky-bg]"
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Root, {
+    ref: forwardedRef
+  }, /* @__PURE__ */ import_react7.default.createElement(MenuSignifierHorizontal, null), children);
+});
+var StackItemSigil = /* @__PURE__ */ (0, import_react7.forwardRef)(({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {
+  const { t } = (0, import_react_ui.useTranslation)(translationKey);
+  const suppressNextTooltip = (0, import_react7.useRef)(false);
+  const [optionsMenuOpen, setOptionsMenuOpen] = (0, import_react7.useState)(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = (0, import_react7.useState)(false);
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui.Tooltip.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui.DropdownMenu.Root, {
     open: optionsMenuOpen,
-    onOpenChange: setOptionsMenuOpen
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui_deck.DropDownMenuDragHandleTrigger, {
-    active: !!active,
-    variant: "ghost",
-    classNames: "m-0",
-    ...draggableProps
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Icon, {
-    icon,
-    size: 5,
-    classNames: "transition-opacity"
-  })), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Portal, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Content, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Viewport, null, collapsed ? /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Item, {
-    onClick: onNavigate,
-    "data-testid": "section.navigate-to"
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react2.ArrowSquareOut, {
-    className: (0, import_react_ui_theme2.mx)((0, import_react_ui_theme2.getSize)(5), "mr-2")
-  }), /* @__PURE__ */ import_react3.default.createElement("span", {
-    className: "grow"
-  }, t("navigate to section label"))) : /* @__PURE__ */ import_react3.default.createElement(CollapsiblePrimitive.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Item, null, /* @__PURE__ */ import_react3.default.createElement(CaretDownUp, {
-    className: (0, import_react_ui_theme2.mx)((0, import_react_ui_theme2.getSize)(5), "mr-2")
-  }), /* @__PURE__ */ import_react3.default.createElement("span", {
-    className: "grow"
-  }, t("collapse label")))), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Item, {
-    onClick: onAddBefore,
-    "data-testid": "section.add-before"
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react2.ArrowLineUp, {
-    className: (0, import_react_ui_theme2.mx)((0, import_react_ui_theme2.getSize)(5), "mr-2")
-  }), /* @__PURE__ */ import_react3.default.createElement("span", {
-    className: "grow"
-  }, t("add section before label"))), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Item, {
-    onClick: onAddAfter,
-    "data-testid": "section.add-after"
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react2.ArrowLineDown, {
-    className: (0, import_react_ui_theme2.mx)((0, import_react_ui_theme2.getSize)(5), "mr-2")
-  }), /* @__PURE__ */ import_react3.default.createElement("span", {
-    className: "grow"
-  }, t("add section after label"))), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Item, {
-    onClick: () => onDelete?.(),
-    "data-testid": "section.remove"
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react2.Trash, {
-    className: (0, import_react_ui_theme2.mx)((0, import_react_ui_theme2.getSize)(5), "mr-2")
-  }), /* @__PURE__ */ import_react3.default.createElement("span", {
-    className: "grow"
-  }, t("remove section label")))), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Arrow, null)))), collapsed ? /* @__PURE__ */ import_react3.default.createElement(CollapsiblePrimitive.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Button, {
-    variant: "ghost",
-    classNames: sectionActionDimensions
-  }, /* @__PURE__ */ import_react3.default.createElement("span", {
-    className: "sr-only"
-  }, t("expand label")), /* @__PURE__ */ import_react3.default.createElement(import_react2.CaretUpDown, {
-    className: (0, import_react_ui_theme2.getSize)(4)
-  }))) : /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Button, {
-    variant: "ghost",
-    classNames: sectionActionDimensions,
-    onClick: onNavigate,
-    "data-testid": "section.navigate-to"
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react2.ArrowSquareOut, {
-    className: (0, import_react_ui_theme2.mx)((0, import_react_ui_theme2.getSize)(4))
-  }), /* @__PURE__ */ import_react3.default.createElement("span", {
-    className: "sr-only"
-  }, t("navigate to section label"))))), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ListItem.Heading, {
-    classNames: collapsed ? [
-      "grid grid-rows-subgrid grid-cols-subgrid items-center",
-      import_react_ui_theme2.focusRing
-    ] : "sr-only",
-    ...collapsed && {
-      ...sectionContentGroup,
-      tabIndex: 0
+    onOpenChange: (nextOpen) => {
+      if (!nextOpen) {
+        suppressNextTooltip.current = true;
+      }
+      return setOptionsMenuOpen(nextOpen);
     }
-  }, /* @__PURE__ */ import_react3.default.createElement("span", {
-    className: "truncate"
-  }, title)), size === "intrinsic" ? /* @__PURE__ */ import_react3.default.createElement(CollapsiblePrimitive.Content, {
-    ...!collapsed && {
-      ...sectionContentGroup,
-      tabIndex: 0
-    },
-    // TODO(burdon): Add margin to fragment?
-    className: (0, import_react_ui_theme2.mx)(import_react_ui_theme2.focusRing, "m-[2px]")
-  }, children) : /* @__PURE__ */ import_react3.default.createElement(CollapsiblePrimitive.Content, {
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui.Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ScrollArea.Root, {
-    type: "always",
-    ...!collapsed && {
-      ...sectionContentGroup,
-      tabIndex: 0
-    },
-    classNames: (0, import_react_ui_theme2.mx)(import_react_ui_theme2.focusRing, "is-full has-[[data-radix-scroll-area-viewport]]:pbe-4")
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ScrollArea.Viewport, null, children), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ScrollArea.Scrollbar, {
-    orientation: "horizontal",
-    variant: "coarse",
-    classNames: "hidden has-[div]:flex !inline-end-[max(.25rem,var(--radix-scroll-area-corner-width))]"
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ScrollArea.Thumb, null)), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ScrollArea.Scrollbar, {
-    orientation: "vertical",
-    variant: "coarse",
-    classNames: "hidden has-[div]:flex"
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ScrollArea.Thumb, null)), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ScrollArea.Corner, null)))), isResizable && !collapsed && /* @__PURE__ */ import_react3.default.createElement("button", {
-    className: resizeHandleStyles
-  }, /* @__PURE__ */ import_react3.default.createElement("span", {
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui.DropdownMenu.Trigger, {
+    asChild: true,
+    ref: forwardedRef
+  }, /* @__PURE__ */ import_react7.default.createElement(StackItemSigilButton, {
+    attendableId,
+    related
+  }, /* @__PURE__ */ import_react7.default.createElement("span", {
     className: "sr-only"
-  }, t("resize section label")))));
+  }, triggerLabel), /* @__PURE__ */ import_react7.default.createElement(import_react_ui.Icon, {
+    icon,
+    size: 5
+  })))), /* @__PURE__ */ import_react7.default.createElement(import_react_ui.DropdownMenu.Portal, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui.DropdownMenu.Content, {
+    classNames: "z-[31]"
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui.DropdownMenu.Viewport, null, actionGroups?.map((actions, index) => {
+    const separator = index > 0 ? /* @__PURE__ */ import_react7.default.createElement(import_react_ui.DropdownMenu.Separator, null) : null;
+    return /* @__PURE__ */ import_react7.default.createElement(import_react7.Fragment, {
+      key: index
+    }, separator, actions.map((action) => {
+      const shortcut = typeof action.properties.keyBinding === "string" ? action.properties.keyBinding : action.properties.keyBinding?.[(0, import_util.getHostPlatform)()];
+      const menuItemType = action.properties.menuItemType;
+      const Root = menuItemType === "toggle" ? import_react_ui.DropdownMenu.CheckboxItem : import_react_ui.DropdownMenu.Item;
+      return /* @__PURE__ */ import_react7.default.createElement(Root, {
+        key: action.id,
+        onClick: (event) => {
+          if (action.properties.disabled) {
+            return;
+          }
+          event.stopPropagation();
+          suppressNextTooltip.current = true;
+          setOptionsMenuOpen(false);
+          onAction?.(action);
+        },
+        classNames: "gap-2",
+        disabled: action.properties.disabled,
+        checked: menuItemType === "toggle" ? action.properties.isChecked : void 0,
+        ...action.properties?.testId && {
+          "data-testid": action.properties.testId
+        }
+      }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui.Icon, {
+        icon: action.properties.icon ?? "ph--placeholder--regular",
+        size: 4
+      }), /* @__PURE__ */ import_react7.default.createElement("span", {
+        className: "grow truncate"
+      }, (0, import_react_ui.toLocalizedString)(action.properties.label ?? "", t)), menuItemType === "toggle" && /* @__PURE__ */ import_react7.default.createElement(import_react_ui.DropdownMenu.ItemIndicator, {
+        asChild: true
+      }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui.Icon, {
+        icon: "ph--check--regular",
+        size: 4
+      })), shortcut && /* @__PURE__ */ import_react7.default.createElement("span", {
+        className: (0, import_react_ui_theme6.mx)("shrink-0", import_react_ui_theme6.descriptionText)
+      }, (0, import_keyboard.keySymbols)(shortcut).join("")));
+    }));
+  }), children), /* @__PURE__ */ import_react7.default.createElement(import_react_ui.DropdownMenu.Arrow, null)))), /* @__PURE__ */ import_react7.default.createElement(import_react_ui.Tooltip.Portal, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui.Tooltip.Content, {
+    style: {
+      zIndex: 70
+    },
+    side: "bottom"
+  }, triggerLabel, /* @__PURE__ */ import_react7.default.createElement(import_react_ui.Tooltip.Arrow, null))));
 });
-var sectionToolbarLayout = "bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity";
-var SectionToolbar = ({ children, classNames }) => {
-  return /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Toolbar.Root, {
-    orientation: "horizontal",
-    classNames: [
-      sectionToolbarLayout,
-      import_react_ui_theme2.hoverableControlItem,
-      classNames
-    ]
-  }, children);
-};
-var SectionTile = /* @__PURE__ */ (0, import_react3.forwardRef)(({ path, type, active, draggableStyle, draggableProps, item, itemContext }, forwardedRef) => {
-  const { t } = (0, import_react_ui2.useTranslation)(translationKey);
-  const { activeItem } = (0, import_react_ui_mosaic2.useMosaic)();
-  const separation = !!itemContext?.separation;
-  const isResizable = !!itemContext?.isResizable;
-  const { transform, onDeleteSection, onNavigateToSection, onAddSection, onCollapseSection, SectionContent } = itemContext;
-  const transformedItem = transform ? transform(
-    item,
-    // TODO(wittjosiah): `active` doesn't always seem to be accurate here.
-    activeItem?.item.id === item.id ? activeItem?.type : type
-  ) : item;
-  const placeholder = transformedItem.metadata?.placeholder ?? [
-    "untitled section title",
-    {
-      ns: translationKey
+var DEFAULT_HORIZONTAL_SIZE = 44;
+var DEFAULT_VERTICAL_SIZE = "min-content";
+var DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE;
+var StackItemRoot = /* @__PURE__ */ (0, import_react3.forwardRef)(({ item, children, classNames, onRearrange, size: propsSize, onSizeChange, role, order, style, ...props }, forwardedRef) => {
+  const [itemElement, itemRef] = (0, import_react3.useState)(null);
+  const [selfDragHandleElement, selfDragHandleRef] = (0, import_react3.useState)(null);
+  const [closestEdge, setEdge] = (0, import_react3.useState)(null);
+  const { orientation, rail, separators } = useStack();
+  const [size = orientation === "horizontal" ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] = (0, import_react3.useState)(propsSize);
+  const Root = role ?? "div";
+  const composedItemRef = (0, import_react_compose_refs.composeRefs)(itemRef, forwardedRef);
+  const setSize = (0, import_react3.useCallback)((nextSize, commit) => {
+    setInternalSize(nextSize);
+    if (commit) {
+      onSizeChange?.(nextSize);
     }
-  ];
-  const title = transformedItem.view?.title ?? (0, import_react_ui2.toLocalizedString)(placeholder, t);
-  const section = /* @__PURE__ */ import_react3.default.createElement(Section, {
-    ref: forwardedRef,
-    title,
-    id: transformedItem.id,
-    size: transformedItem.view?.size,
-    icon: transformedItem.metadata?.icon,
-    collapsed: transformedItem.view?.collapsed,
-    separation,
-    active,
-    draggableProps,
-    draggableStyle,
-    onCollapseSection,
-    isResizable,
-    onDelete: () => onDeleteSection?.(path),
-    onNavigate: () => onNavigateToSection?.(transformedItem),
-    onAddAfter: () => onAddSection?.(path, "after"),
-    onAddBefore: () => onAddSection?.(path, "before")
-  }, SectionContent && /* @__PURE__ */ import_react3.default.createElement(SectionContent, {
-    data: transformedItem.object
-  }));
-  return active === "overlay" ? /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.List, null, section) : section;
-});
-var DEFAULT_TYPE = "stack-section";
-var Stack = ({ id, type = DEFAULT_TYPE, SectionContent, items = [], separation = true, transform, onOver, onDrop, onAddSection, onDeleteSection, onNavigateToSection, onCollapseSection, ...props }) => {
-  const { ref: containerRef, width = 0 } = (0, import_react_resize_detector.useResizeDetector)({
-    refreshRate: 200
-  });
-  const { operation, overItem } = (0, import_react_ui_mosaic.useMosaic)();
-  const itemsWithPreview = (0, import_react_ui_mosaic.useItemsWithPreview)({
-    path: id,
-    items
-  });
-  const getOverlayStyle = (0, import_react.useCallback)(() => ({
-    width
-  }), [
-    width
+  }, [
+    onSizeChange
   ]);
-  const getOverlayProps = (0, import_react.useCallback)(() => ({
-    itemContext: {
-      transform,
-      SectionContent
+  const type = orientation === "horizontal" ? "column" : "card";
+  (0, import_react3.useLayoutEffect)(() => {
+    if (!itemElement || !onRearrange) {
+      return;
     }
-  }), [
-    transform,
-    SectionContent
+    return (0, import_combine.combine)((0, import_adapter.draggable)({
+      element: itemElement,
+      ...selfDragHandleElement && {
+        dragHandle: selfDragHandleElement
+      },
+      getInitialData: () => ({
+        id: item.id,
+        type
+      })
+    }), (0, import_adapter.dropTargetForElements)({
+      element: itemElement,
+      getData: ({ input, element }) => {
+        return (0, import_closest_edge.attachClosestEdge)({
+          id: item.id,
+          type
+        }, {
+          input,
+          element,
+          allowedEdges: orientation === "horizontal" ? [
+            "left",
+            "right"
+          ] : [
+            "top",
+            "bottom"
+          ]
+        });
+      },
+      onDragEnter: ({ self, source }) => {
+        if (source.data.type === self.data.type) {
+          setEdge((0, import_closest_edge.extractClosestEdge)(self.data));
+        }
+      },
+      onDrag: ({ self, source }) => {
+        if (source.data.type === self.data.type) {
+          setEdge((0, import_closest_edge.extractClosestEdge)(self.data));
+        }
+      },
+      onDragLeave: () => setEdge(null),
+      onDrop: ({ self, source }) => {
+        setEdge(null);
+        if (source.data.type === self.data.type) {
+          onRearrange(source.data, self.data, (0, import_closest_edge.extractClosestEdge)(self.data));
+        }
+      }
+    }));
+  }, [
+    orientation,
+    item,
+    onRearrange,
+    selfDragHandleElement,
+    itemElement
   ]);
-  const stackModifier = (0, import_react.useCallback)((_activeItem, { transform: transform2, activeNodeRect, overlayNodeRect }) => {
-    if (activeNodeRect && overlayNodeRect) {
-      transform2.y += activeNodeRect?.top - overlayNodeRect?.top;
+  const focusGroupAttrs = (0, import_react_tabster2.useFocusableGroup)({
+    tabBehavior: "limited"
+  });
+  return /* @__PURE__ */ import_react3.default.createElement(StackItemContext.Provider, {
+    value: {
+      selfDragHandleRef,
+      size,
+      setSize
     }
-    return transform2;
-  }, []);
-  return /* @__PURE__ */ import_react.default.createElement(import_react_ui_mosaic.Mosaic.Container, {
-    id,
-    type,
-    Component: SectionTile,
-    getOverlayStyle,
-    getOverlayProps,
-    onOver,
-    onDrop,
-    modifier: stackModifier
-  }, /* @__PURE__ */ import_react.default.createElement(import_react_ui_mosaic.Mosaic.DroppableTile, {
-    path: id,
-    type,
-    item: {
-      id,
-      items: itemsWithPreview
-    },
-    // TODO(wittjosiah): Should this actually be a context?
-    itemContext: {
-      separation,
-      transform,
-      onDeleteSection,
-      onNavigateToSection,
-      onAddSection,
-      onCollapseSection,
-      SectionContent
-    },
-    isOver: overItem && !!overItem.path && import_react_ui_mosaic.Path.hasRoot(overItem.path, id) && (operation === "copy" || operation === "transfer"),
-    Component: StackTile,
+  }, /* @__PURE__ */ import_react3.default.createElement(Root, {
     ...props,
-    ref: containerRef
-  }));
+    tabIndex: 0,
+    ...focusGroupAttrs,
+    className: (0, import_react_ui_theme2.mx)("group/stack-item grid relative ch-focus-ring-inset-over-all", size === "min-content" && (orientation === "horizontal" ? "is-min" : "bs-min"), orientation === "horizontal" ? "grid-rows-subgrid" : "grid-cols-subgrid", rail && (orientation === "horizontal" ? "row-span-2" : "col-span-2"), separators && (orientation === "horizontal" ? "divide-separator divide-y" : "divide-separator divide-x"), classNames),
+    "data-dx-stack-item": true,
+    style: {
+      ...size !== "min-content" && {
+        [orientation === "horizontal" ? "inlineSize" : "blockSize"]: `${size}rem`
+      },
+      ...Number.isFinite(order) && {
+        [orientation === "horizontal" ? "gridColumn" : "gridRow"]: `${order}`
+      },
+      ...style
+    },
+    ref: composedItemRef
+  }, children, closestEdge && /* @__PURE__ */ import_react3.default.createElement(import_box.DropIndicator, {
+    edge: closestEdge
+  })));
+});
+var StackItem = {
+  Root: StackItemRoot,
+  Content: StackItemContent,
+  Heading: StackItemHeading,
+  HeadingLabel: StackItemHeadingLabel,
+  ResizeHandle: StackItemResizeHandle,
+  Sigil: StackItemSigil,
+  SigilButton: StackItemSigilButton
 };
-var StackTile = /* @__PURE__ */ (0, import_react.forwardRef)(({ classNames, path, isOver, item: { items }, itemContext, type: _type, emptyComponent, ...props }, forwardedRef) => {
-  const { t } = (0, import_react_ui.useTranslation)(translationKey);
-  const { Component, type } = (0, import_react_ui_mosaic.useContainer)();
-  const domAttributes = (0, import_react_tabster.useArrowNavigationGroup)({
-    axis: "grid"
-  });
-  const { activeItem } = (0, import_react_ui_mosaic.useMosaic)();
-  const _group = (0, import_react_tabster.useFocusableGroup)();
-  return /* @__PURE__ */ import_react.default.createElement(import_react_ui.List, {
-    ref: forwardedRef,
-    classNames: [
-      "grid relative",
-      stackColumns,
-      isOver && import_react_ui_theme.dropRingInner,
-      classNames
-    ],
-    ...!activeItem && domAttributes,
+var LayoutControl = ({ icon, label, ...props }) => {
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui2.Tooltip.Root, null, /* @__PURE__ */ import_react9.default.createElement(import_react_ui2.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui2.Button, {
+    variant: "ghost",
     ...props
-  }, items.length > 0 ? /* @__PURE__ */ import_react.default.createElement(import_react_ui_mosaic.Mosaic.SortableContext, {
-    items,
-    direction: "vertical"
-  }, items.map((item, index) => /* @__PURE__ */ import_react.default.createElement(import_react_ui_mosaic.Mosaic.SortableTile, {
-    key: item.id,
-    item,
-    itemContext,
-    path,
-    type,
-    position: index,
-    Component
-  }))) : emptyComponent !== void 0 ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, emptyComponent) : /* @__PURE__ */ import_react.default.createElement("p", {
-    className: "grid col-span-2 text-center p-4 border border-dashed border-neutral-500/50 rounded",
-    "data-testid": "stack.empty"
-  }, t("empty stack message")));
+  }, /* @__PURE__ */ import_react9.default.createElement("span", {
+    className: "sr-only"
+  }, label), /* @__PURE__ */ import_react9.default.createElement(import_react_ui2.Icon, {
+    icon
+  }))), /* @__PURE__ */ import_react9.default.createElement(import_react_ui2.Tooltip.Portal, null, /* @__PURE__ */ import_react9.default.createElement(import_react_ui2.Tooltip.Content, {
+    side: "bottom",
+    classNames: "z-[70]"
+  }, label)));
+};
+var LayoutControls = /* @__PURE__ */ (0, import_react9.forwardRef)(({ onClick, variant = "default", capabilities: can, isSolo, pin, close = false, children, ...props }, forwardedRef) => {
+  const { t } = (0, import_react_ui2.useTranslation)(translationKey);
+  const buttonClassNames = variant === "hide-disabled" ? "disabled:hidden !p-1" : "!p-1";
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui2.ButtonGroup, {
+    ...props,
+    ref: forwardedRef
+  }, pin && !isSolo && [
+    "both",
+    "start"
+  ].includes(pin) && /* @__PURE__ */ import_react9.default.createElement(LayoutControl, {
+    label: t("pin start label"),
+    variant: "ghost",
+    classNames: buttonClassNames,
+    onClick: () => onClick?.("pin-start"),
+    icon: "ph--caret-line-left--regular"
+  }), can.solo && /* @__PURE__ */ import_react9.default.createElement(LayoutControl, {
+    label: t("solo layout label"),
+    classNames: buttonClassNames,
+    onClick: () => onClick?.("solo"),
+    icon: isSolo ? "ph--arrows-in--regular" : "ph--arrows-out--regular"
+  }), !isSolo && can.solo && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(LayoutControl, {
+    label: t("increment start label"),
+    disabled: !can.incrementStart,
+    classNames: buttonClassNames,
+    onClick: () => onClick?.("increment-start"),
+    icon: "ph--caret-left--regular"
+  }), /* @__PURE__ */ import_react9.default.createElement(LayoutControl, {
+    label: t("increment end label"),
+    disabled: !can.incrementEnd,
+    classNames: buttonClassNames,
+    onClick: () => onClick?.("increment-end"),
+    icon: "ph--caret-right--regular"
+  })), pin && !isSolo && [
+    "both",
+    "end"
+  ].includes(pin) && /* @__PURE__ */ import_react9.default.createElement(LayoutControl, {
+    label: t("pin end label"),
+    classNames: buttonClassNames,
+    onClick: () => onClick?.("pin-end"),
+    icon: "ph--caret-line-right--regular"
+  }), close && !isSolo && /* @__PURE__ */ import_react9.default.createElement(LayoutControl, {
+    label: t(`${typeof close === "string" ? "minify" : "close"} label`),
+    classNames: buttonClassNames,
+    onClick: () => onClick?.("close"),
+    "data-testid": "layoutHeading.close",
+    icon: close === "minify-start" ? "ph--caret-line-left--regular" : close === "minify-end" ? "ph--caret-line-right--regular" : "ph--minus--regular"
+  }), children);
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  DEFAULT_TYPE,
-  SectionToolbar,
+  DEFAULT_EXTRINSIC_SIZE,
+  DEFAULT_HORIZONTAL_SIZE,
+  DEFAULT_VERTICAL_SIZE,
+  LayoutControls,
   Stack,
-  sectionToolbarLayout,
+  StackContext,
+  StackItem,
+  railGridHorizontal,
+  railGridVertical,
   translations
 });
 //# sourceMappingURL=index.cjs.map