@dxos/react-ui-stack 0.6.14-staging.9e90729 → 0.6.14-staging.c117501

package/dist/lib/node-esm/index.mjs

@@ -1,54 +1,226 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 
 // packages/ui/react-ui-stack/src/components/Stack.tsx
-import { useArrowNavigationGroup, useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
-import React3, { forwardRef as forwardRef2, useCallback } from "react";
-import { useResizeDetector } from "react-resize-detector";
-import { List as List2, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { Mosaic, Path, useContainer, useItemsWithPreview, useMosaic as useMosaic2 } from "@dxos/react-ui-mosaic";
-import { dropRingInner } from "@dxos/react-ui-theme";
+import { useArrowNavigationGroup } from "@fluentui/react-tabster";
+import React, { Children, forwardRef } from "react";
+import { mx } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-stack/src/components/Section.tsx
-import { useFocusableGroup, useTabsterAttributes } from "@fluentui/react-tabster";
-import { ArrowLineDown, ArrowLineUp, ArrowSquareOut, CaretUpDown, Trash } from "@phosphor-icons/react";
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import React2, { forwardRef, useState } from "react";
-import { Button, DropdownMenu, Icon, List, ListItem, ScrollArea, Toolbar, toLocalizedString, useTranslation } from "@dxos/react-ui";
-import { useAttendableAttributes } from "@dxos/react-ui-attention";
-import { DropDownMenuDragHandleTrigger, resizeHandle, resizeHandleHorizontal } from "@dxos/react-ui-deck";
-import { useMosaic } from "@dxos/react-ui-mosaic";
-import { focusRing, getSize, hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from "@dxos/react-ui-theme";
+// packages/ui/react-ui-stack/src/components/StackContext.tsx
+import { createContext, useContext } from "react";
+var StackContext = /* @__PURE__ */ createContext({
+  orientation: "vertical",
+  rail: true,
+  size: "intrinsic",
+  separators: true
+});
+var useStack = () => useContext(StackContext);
+var StackItemContext = /* @__PURE__ */ createContext({
+  selfDragHandleRef: () => {
+  },
+  size: "min-content",
+  setSize: () => {
+  }
+});
+var useStackItem = () => useContext(StackItemContext);
 
-// packages/ui/react-ui-stack/src/components/CaretDownUp.tsx
-import React from "react";
-var CaretDownUp = ({ children, weight, ...props }) => {
-  return /* @__PURE__ */ React.createElement("svg", {
+// packages/ui/react-ui-stack/src/components/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 Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientation = "vertical", rail = true, separators = true, size = "intrinsic", itemsCount = Children.count(children), ...props }, forwardedRef) => {
+  const arrowNavigationGroup = useArrowNavigationGroup({
+    axis: orientation
+  });
+  const styles = {
+    [orientation === "horizontal" ? "gridTemplateColumns" : "gridTemplateRows"]: `repeat(${itemsCount}, min-content)`,
+    ...style
+  };
+  return /* @__PURE__ */ React.createElement(StackContext.Provider, {
+    value: {
+      orientation,
+      rail,
+      size,
+      separators
+    }
+  }, /* @__PURE__ */ React.createElement("div", {
+    ...props,
+    ...arrowNavigationGroup,
+    className: 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));
+});
+
+// packages/ui/react-ui-stack/src/components/StackItem.tsx
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable as draggable2, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { DropIndicator } from "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box";
+import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import React7, { forwardRef as forwardRef4, useLayoutEffect as useLayoutEffect2, useState as useState2, useCallback } from "react";
+import { mx as mx6 } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-stack/src/components/StackItemContent.tsx
+import React2 from "react";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+var StackItemContent = ({ children, toolbar = true, statusbar, contentSize = "cover", classNames, ...props }) => {
+  const { size, separators } = useStack();
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    ...props,
+    className: mx2("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);
+};
+
+// packages/ui/react-ui-stack/src/components/StackItemHeading.tsx
+import { useFocusableGroup } from "@fluentui/react-tabster";
+import React3, { forwardRef as forwardRef2 } from "react";
+import { useAttention } from "@dxos/react-ui-attention";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+var StackItemHeading = ({ children, classNames, ...props }) => {
+  const { orientation } = useStack();
+  const { selfDragHandleRef } = useStackItem();
+  const focusableGroupAttrs = useFocusableGroup({
+    tabBehavior: "limited"
+  });
+  return /* @__PURE__ */ React3.createElement("div", {
+    role: "heading",
+    ...props,
+    tabIndex: 0,
+    ...focusableGroupAttrs,
+    className: mx3("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__ */ forwardRef2(({ attendableId, related, classNames, ...props }, forwardedRef) => {
+  const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);
+  return /* @__PURE__ */ React3.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", classNames),
+    ref: forwardedRef
+  });
+});
+
+// packages/ui/react-ui-stack/src/components/StackItemResizeHandle.tsx
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
+import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
+import React4, { useLayoutEffect, useRef } from "react";
+import { mx as mx4 } from "@dxos/react-ui-theme";
+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 = useRef(null);
+  const dragStartSize = useRef(size);
+  const client = orientation === "horizontal" ? "clientX" : "clientY";
+  useLayoutEffect(() => {
+    if (!buttonRef.current || buttonRef.current.hasAttribute("draggable")) {
+      return;
+    }
+    draggable({
+      element: buttonRef.current,
+      onGenerateDragPreview: ({ nativeSetDragImage }) => {
+        disableNativeDragPreview({
+          nativeSetDragImage
+        });
+        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__ */ React4.createElement("button", {
+    ref: buttonRef,
+    className: mx4(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__ */ React4.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__ */ React4.createElement(DragHandleSignifier, null)));
+};
+var DragHandleSignifier = () => {
+  return /* @__PURE__ */ React4.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 256 256",
-    ...props
-  }, /* @__PURE__ */ React.createElement("rect", {
-    width: "256",
-    height: "256",
-    fill: "none"
-  }), /* @__PURE__ */ React.createElement("polyline", {
-    points: "80 224 128 176 176 224",
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "16"
-  }), /* @__PURE__ */ React.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__ */ React4.createElement("path", {
+    d: "M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+  }), /* @__PURE__ */ React4.createElement("path", {
+    d: "M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+  }), /* @__PURE__ */ React4.createElement("path", {
+    d: "M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+  }), /* @__PURE__ */ React4.createElement("path", {
+    d: "M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z"
+  }));
 };
 
-// packages/ui/react-ui-stack/src/components/style-fragments.ts
-var stackColumns = "grid-cols-[var(--rail-size)_calc(100%-var(--rail-size))]";
+// packages/ui/react-ui-stack/src/components/StackItemSigil.tsx
+import React6, { Fragment, forwardRef as forwardRef3, useRef as useRef2, useState } from "react";
+import { keySymbols } from "@dxos/keyboard";
+import { Button, DropdownMenu, Icon, toLocalizedString, Tooltip, useTranslation } from "@dxos/react-ui";
+import { useAttention as useAttention2 } from "@dxos/react-ui-attention";
+import { descriptionText, mx as mx5 } from "@dxos/react-ui-theme";
+import { getHostPlatform } from "@dxos/util";
+
+// packages/ui/react-ui-stack/src/components/MenuSignifier.tsx
+import React5 from "react";
+var MenuSignifierHorizontal = () => /* @__PURE__ */ React5.createElement("svg", {
+  className: "absolute block-end-[7px]",
+  width: 20,
+  height: 2,
+  viewBox: "0 0 20 2",
+  stroke: "currentColor",
+  opacity: 0.5
+}, /* @__PURE__ */ React5.createElement("line", {
+  x1: 0.5,
+  y1: 0.75,
+  x2: 19,
+  y2: 0.75,
+  strokeWidth: 1.25,
+  strokeLinecap: "round",
+  strokeDasharray: "6 20",
+  strokeDashoffset: "-6.5"
+}));
 
 // packages/ui/react-ui-stack/src/translations.ts
 var translationKey = "stack";
@@ -56,323 +228,310 @@ 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"
       }
     }
   }
 ];
 
-// packages/ui/react-ui-stack/src/components/Section.tsx
-var sectionActionDimensions = "p-1 shrink-0 min-bs-0 is-[--rail-action] bs-min";
-var resizeHandleStyles = mx(resizeHandle, resizeHandleHorizontal, "is-full bs-[--rail-action] col-start-2");
-var Section = /* @__PURE__ */ forwardRef(({ id, title, icon = "ph--placeholder--regular", size = "intrinsic", collapsed, active, isResizable, draggableProps, draggableStyle, onDelete, onNavigate, onAddBefore, onAddAfter, onCollapseSection, children }, forwardedRef) => {
+// packages/ui/react-ui-stack/src/components/StackItemSigil.tsx
+var StackItemSigilButton = /* @__PURE__ */ forwardRef3(({ attendableId, classNames, related, children, ...props }, forwardedRef) => {
+  const { hasAttention, isAncestor, isRelated } = useAttention2(attendableId);
+  const variant = related && isRelated || hasAttention || isAncestor ? "primary" : "ghost";
+  return /* @__PURE__ */ React6.createElement(Button, {
+    ...props,
+    variant,
+    classNames: [
+      "m-1 shrink-0 pli-0 min-bs-0 is-[--rail-action] bs-[--rail-action] relative",
+      classNames
+    ],
+    ref: forwardedRef
+  }, /* @__PURE__ */ React6.createElement(MenuSignifierHorizontal, null), children);
+});
+var StackItemSigil = /* @__PURE__ */ forwardRef3(({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {
   const { t } = useTranslation(translationKey);
+  const suppressNextTooltip = useRef2(false);
   const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
-  const sectionActionsToolbar = useTabsterAttributes({
-    groupper: {},
-    focusable: {},
-    mover: {
-      cyclic: true,
-      direction: 1,
-      memorizeCurrent: false
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
+  return /* @__PURE__ */ React6.createElement(Tooltip.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
     }
-  });
-  const sectionContentGroup = useFocusableGroup({});
-  const attendableAttrs = useAttendableAttributes(id);
-  return /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Root, {
-    asChild: true,
-    open: !collapsed,
-    onOpenChange: (nextOpen) => onCollapseSection?.(id, !nextOpen)
-  }, /* @__PURE__ */ React2.createElement(ListItem.Root, {
-    ref: forwardedRef,
-    id,
-    ...attendableAttrs,
-    classNames: [
-      "grid col-span-2 group/section",
-      active === "overlay" ? stackColumns : "grid-cols-subgrid snap-start"
-    ],
-    style: draggableStyle
-  }, /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: mx("grid col-span-2 grid-cols-subgrid", "bg-base attention-surface", hoverableControls, hoverableFocusedWithinControls, (active === "origin" || active === "rearrange" || active === "destination") && "opacity-0")
-  }, /* @__PURE__ */ React2.createElement("div", {
-    role: "toolbar",
-    "aria-orientation": "vertical",
-    "aria-label": t("section controls label"),
-    ...!active && {
-      tabIndex: 0
-    },
-    ...!active && sectionActionsToolbar,
-    className: 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__ */ React2.createElement("div", {
-    role: "none",
-    className: "sticky -block-start-px bg-[--sticky-bg]"
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Root, {
     open: optionsMenuOpen,
-    onOpenChange: setOptionsMenuOpen
-  }, /* @__PURE__ */ React2.createElement(DropDownMenuDragHandleTrigger, {
-    active: !!active,
-    variant: "ghost",
-    classNames: "m-0",
-    ...draggableProps
-  }, /* @__PURE__ */ React2.createElement(Icon, {
-    icon,
-    size: 5,
-    classNames: "transition-opacity"
-  })), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, collapsed ? /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
-    onClick: onNavigate,
-    "data-testid": "section.navigate-to"
-  }, /* @__PURE__ */ React2.createElement(ArrowSquareOut, {
-    className: mx(getSize(5), "mr-2")
-  }), /* @__PURE__ */ React2.createElement("span", {
-    className: "grow"
-  }, t("navigate to section label"))) : /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Item, null, /* @__PURE__ */ React2.createElement(CaretDownUp, {
-    className: mx(getSize(5), "mr-2")
-  }), /* @__PURE__ */ React2.createElement("span", {
-    className: "grow"
-  }, t("collapse label")))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
-    onClick: onAddBefore,
-    "data-testid": "section.add-before"
-  }, /* @__PURE__ */ React2.createElement(ArrowLineUp, {
-    className: mx(getSize(5), "mr-2")
-  }), /* @__PURE__ */ React2.createElement("span", {
-    className: "grow"
-  }, t("add section before label"))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
-    onClick: onAddAfter,
-    "data-testid": "section.add-after"
-  }, /* @__PURE__ */ React2.createElement(ArrowLineDown, {
-    className: mx(getSize(5), "mr-2")
-  }), /* @__PURE__ */ React2.createElement("span", {
-    className: "grow"
-  }, t("add section after label"))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
-    onClick: () => onDelete?.(),
-    "data-testid": "section.remove"
-  }, /* @__PURE__ */ React2.createElement(Trash, {
-    className: mx(getSize(5), "mr-2")
-  }), /* @__PURE__ */ React2.createElement("span", {
-    className: "grow"
-  }, t("remove section label")))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))), collapsed ? /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Button, {
-    variant: "ghost",
-    classNames: sectionActionDimensions
-  }, /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, t("expand label")), /* @__PURE__ */ React2.createElement(CaretUpDown, {
-    className: getSize(4)
-  }))) : /* @__PURE__ */ React2.createElement(Button, {
-    variant: "ghost",
-    classNames: sectionActionDimensions,
-    onClick: onNavigate,
-    "data-testid": "section.navigate-to"
-  }, /* @__PURE__ */ React2.createElement(ArrowSquareOut, {
-    className: mx(getSize(4))
-  }), /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, t("navigate to section label"))))), /* @__PURE__ */ React2.createElement(ListItem.Heading, {
-    classNames: collapsed ? [
-      "grid grid-rows-subgrid grid-cols-subgrid items-center",
-      focusRing
-    ] : "sr-only",
-    ...collapsed && {
-      ...sectionContentGroup,
-      tabIndex: 0
+    onOpenChange: (nextOpen) => {
+      if (!nextOpen) {
+        suppressNextTooltip.current = true;
+      }
+      return setOptionsMenuOpen(nextOpen);
     }
-  }, /* @__PURE__ */ React2.createElement("span", {
-    className: "truncate"
-  }, title)), size === "intrinsic" ? /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Content, {
-    ...!collapsed && {
-      ...sectionContentGroup,
-      tabIndex: 0
-    },
-    // TODO(burdon): Add margin to fragment?
-    className: mx(focusRing, "m-[2px]")
-  }, children) : /* @__PURE__ */ React2.createElement(CollapsiblePrimitive.Content, {
+  }, /* @__PURE__ */ React6.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(ScrollArea.Root, {
-    type: "always",
-    ...!collapsed && {
-      ...sectionContentGroup,
-      tabIndex: 0
-    },
-    classNames: mx(focusRing, "is-full has-[[data-radix-scroll-area-viewport]]:pbe-4")
-  }, /* @__PURE__ */ React2.createElement(ScrollArea.Viewport, null, children), /* @__PURE__ */ React2.createElement(ScrollArea.Scrollbar, {
-    orientation: "horizontal",
-    variant: "coarse",
-    classNames: "hidden has-[div]:flex !inline-end-[max(.25rem,var(--radix-scroll-area-corner-width))]"
-  }, /* @__PURE__ */ React2.createElement(ScrollArea.Thumb, null)), /* @__PURE__ */ React2.createElement(ScrollArea.Scrollbar, {
-    orientation: "vertical",
-    variant: "coarse",
-    classNames: "hidden has-[div]:flex"
-  }, /* @__PURE__ */ React2.createElement(ScrollArea.Thumb, null)), /* @__PURE__ */ React2.createElement(ScrollArea.Corner, null)))), isResizable && !collapsed && /* @__PURE__ */ React2.createElement("button", {
-    className: resizeHandleStyles
-  }, /* @__PURE__ */ React2.createElement("span", {
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Trigger, {
+    asChild: true,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React6.createElement(StackItemSigilButton, {
+    attendableId,
+    related
+  }, /* @__PURE__ */ React6.createElement("span", {
     className: "sr-only"
-  }, t("resize section label")))));
-});
-var sectionToolbarLayout = "bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity";
-var SectionToolbar = ({ children, classNames }) => {
-  return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
-    orientation: "horizontal",
-    classNames: [
-      sectionToolbarLayout,
-      hoverableControlItem,
-      classNames
-    ]
-  }, children);
-};
-var SectionTile = /* @__PURE__ */ forwardRef(({ path, type, active, draggableStyle, draggableProps, item, itemContext }, forwardedRef) => {
-  const { t } = useTranslation(translationKey);
-  const { activeItem } = 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
-    }
-  ];
-  const title = transformedItem.view?.title ?? toLocalizedString(placeholder, t);
-  const section = /* @__PURE__ */ React2.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__ */ React2.createElement(SectionContent, {
-    data: transformedItem.object
-  }));
-  return active === "overlay" ? /* @__PURE__ */ React2.createElement(List, null, section) : section;
+  }, triggerLabel), /* @__PURE__ */ React6.createElement(Icon, {
+    icon,
+    size: 5
+  })))), /* @__PURE__ */ React6.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React6.createElement(DropdownMenu.Content, {
+    classNames: "z-[31]"
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Viewport, null, actionGroups?.map((actions, index) => {
+    const separator = index > 0 ? /* @__PURE__ */ React6.createElement(DropdownMenu.Separator, null) : null;
+    return /* @__PURE__ */ React6.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__ */ React6.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__ */ React6.createElement(Icon, {
+        icon: action.properties.icon ?? "ph--placeholder--regular",
+        size: 4
+      }), /* @__PURE__ */ React6.createElement("span", {
+        className: "grow truncate"
+      }, toLocalizedString(action.properties.label ?? "", t)), menuItemType === "toggle" && /* @__PURE__ */ React6.createElement(DropdownMenu.ItemIndicator, {
+        asChild: true
+      }, /* @__PURE__ */ React6.createElement(Icon, {
+        icon: "ph--check--regular",
+        size: 4
+      })), shortcut && /* @__PURE__ */ React6.createElement("span", {
+        className: mx5("shrink-0", descriptionText)
+      }, keySymbols(shortcut).join("")));
+    }));
+  }), children), /* @__PURE__ */ React6.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React6.createElement(Tooltip.Portal, null, /* @__PURE__ */ React6.createElement(Tooltip.Content, {
+    style: {
+      zIndex: 70
+    },
+    side: "bottom"
+  }, triggerLabel, /* @__PURE__ */ React6.createElement(Tooltip.Arrow, null))));
 });
 
-// packages/ui/react-ui-stack/src/components/Stack.tsx
-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 } = useResizeDetector({
-    refreshRate: 200
-  });
-  const { operation, overItem } = useMosaic2();
-  const itemsWithPreview = useItemsWithPreview({
-    path: id,
-    items
-  });
-  const getOverlayStyle = useCallback(() => ({
-    width
-  }), [
-    width
+// packages/ui/react-ui-stack/src/components/StackItem.tsx
+var DEFAULT_HORIZONTAL_SIZE = 44;
+var DEFAULT_VERTICAL_SIZE = "min-content";
+var DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE;
+var StackItemRoot = /* @__PURE__ */ forwardRef4(({ item, children, classNames, onRearrange, size: propsSize, onSizeChange, role, order, style, ...props }, forwardedRef) => {
+  const [itemElement, itemRef] = useState2(null);
+  const [selfDragHandleElement, selfDragHandleRef] = useState2(null);
+  const [closestEdge, setEdge] = useState2(null);
+  const { orientation, rail, separators } = useStack();
+  const [size = orientation === "horizontal" ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] = useState2(propsSize);
+  const Root = role ?? "div";
+  const composedItemRef = composeRefs(itemRef, forwardedRef);
+  const setSize = useCallback((nextSize, commit) => {
+    setInternalSize(nextSize);
+    if (commit) {
+      onSizeChange?.(nextSize);
+    }
+  }, [
+    onSizeChange
   ]);
-  const getOverlayProps = useCallback(() => ({
-    itemContext: {
-      transform,
-      SectionContent
+  const type = orientation === "horizontal" ? "column" : "card";
+  useLayoutEffect2(() => {
+    if (!itemElement || !onRearrange) {
+      return;
     }
-  }), [
-    transform,
-    SectionContent
+    return combine(draggable2({
+      element: itemElement,
+      ...selfDragHandleElement && {
+        dragHandle: selfDragHandleElement
+      },
+      getInitialData: () => ({
+        id: item.id,
+        type
+      })
+    }), dropTargetForElements({
+      element: itemElement,
+      getData: ({ input, element }) => {
+        return 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(extractClosestEdge(self.data));
+        }
+      },
+      onDrag: ({ self, source }) => {
+        if (source.data.type === self.data.type) {
+          setEdge(extractClosestEdge(self.data));
+        }
+      },
+      onDragLeave: () => setEdge(null),
+      onDrop: ({ self, source }) => {
+        setEdge(null);
+        if (source.data.type === self.data.type) {
+          onRearrange(source.data, self.data, extractClosestEdge(self.data));
+        }
+      }
+    }));
+  }, [
+    orientation,
+    item,
+    onRearrange,
+    selfDragHandleElement,
+    itemElement
   ]);
-  const stackModifier = useCallback((_activeItem, { transform: transform2, activeNodeRect, overlayNodeRect }) => {
-    if (activeNodeRect && overlayNodeRect) {
-      transform2.y += activeNodeRect?.top - overlayNodeRect?.top;
+  const focusGroupAttrs = useFocusableGroup2({
+    tabBehavior: "limited"
+  });
+  return /* @__PURE__ */ React7.createElement(StackItemContext.Provider, {
+    value: {
+      selfDragHandleRef,
+      size,
+      setSize
     }
-    return transform2;
-  }, []);
-  return /* @__PURE__ */ React3.createElement(Mosaic.Container, {
-    id,
-    type,
-    Component: SectionTile,
-    getOverlayStyle,
-    getOverlayProps,
-    onOver,
-    onDrop,
-    modifier: stackModifier
-  }, /* @__PURE__ */ React3.createElement(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 && Path.hasRoot(overItem.path, id) && (operation === "copy" || operation === "transfer"),
-    Component: StackTile,
+  }, /* @__PURE__ */ React7.createElement(Root, {
     ...props,
-    ref: containerRef
-  }));
+    tabIndex: 0,
+    ...focusGroupAttrs,
+    className: mx6("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__ */ React7.createElement(DropIndicator, {
+    edge: closestEdge
+  })));
+});
+var StackItem = {
+  Root: StackItemRoot,
+  Content: StackItemContent,
+  Heading: StackItemHeading,
+  HeadingLabel: StackItemHeadingLabel,
+  ResizeHandle: StackItemResizeHandle,
+  Sigil: StackItemSigil,
+  SigilButton: StackItemSigilButton
 };
-var StackTile = /* @__PURE__ */ forwardRef2(({ classNames, path, isOver, item: { items }, itemContext, type: _type, emptyComponent, ...props }, forwardedRef) => {
-  const { t } = useTranslation2(translationKey);
-  const { Component, type } = useContainer();
-  const domAttributes = useArrowNavigationGroup({
-    axis: "grid"
-  });
-  const { activeItem } = useMosaic2();
-  const _group = useFocusableGroup2();
-  return /* @__PURE__ */ React3.createElement(List2, {
-    ref: forwardedRef,
-    classNames: [
-      "grid relative",
-      stackColumns,
-      isOver && dropRingInner,
-      classNames
-    ],
-    ...!activeItem && domAttributes,
+
+// packages/ui/react-ui-stack/src/components/LayoutControls.tsx
+import React8, { forwardRef as forwardRef5 } from "react";
+import { Button as Button2, ButtonGroup, Icon as Icon2, Tooltip as Tooltip2, useTranslation as useTranslation2 } from "@dxos/react-ui";
+var LayoutControl = ({ icon, label, ...props }) => {
+  return /* @__PURE__ */ React8.createElement(Tooltip2.Root, null, /* @__PURE__ */ React8.createElement(Tooltip2.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React8.createElement(Button2, {
+    variant: "ghost",
     ...props
-  }, items.length > 0 ? /* @__PURE__ */ React3.createElement(Mosaic.SortableContext, {
-    items,
-    direction: "vertical"
-  }, items.map((item, index) => /* @__PURE__ */ React3.createElement(Mosaic.SortableTile, {
-    key: item.id,
-    item,
-    itemContext,
-    path,
-    type,
-    position: index,
-    Component
-  }))) : emptyComponent !== void 0 ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, emptyComponent) : /* @__PURE__ */ React3.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__ */ React8.createElement("span", {
+    className: "sr-only"
+  }, label), /* @__PURE__ */ React8.createElement(Icon2, {
+    icon
+  }))), /* @__PURE__ */ React8.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React8.createElement(Tooltip2.Content, {
+    side: "bottom",
+    classNames: "z-[70]"
+  }, label)));
+};
+var LayoutControls = /* @__PURE__ */ forwardRef5(({ onClick, variant = "default", capabilities: can, isSolo, pin, close = false, children, ...props }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey);
+  const buttonClassNames = variant === "hide-disabled" ? "disabled:hidden !p-1" : "!p-1";
+  return /* @__PURE__ */ React8.createElement(ButtonGroup, {
+    ...props,
+    ref: forwardedRef
+  }, pin && !isSolo && [
+    "both",
+    "start"
+  ].includes(pin) && /* @__PURE__ */ React8.createElement(LayoutControl, {
+    label: t("pin start label"),
+    variant: "ghost",
+    classNames: buttonClassNames,
+    onClick: () => onClick?.("pin-start"),
+    icon: "ph--caret-line-left--regular"
+  }), can.solo && /* @__PURE__ */ React8.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__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(LayoutControl, {
+    label: t("increment start label"),
+    disabled: !can.incrementStart,
+    classNames: buttonClassNames,
+    onClick: () => onClick?.("increment-start"),
+    icon: "ph--caret-left--regular"
+  }), /* @__PURE__ */ React8.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__ */ React8.createElement(LayoutControl, {
+    label: t("pin end label"),
+    classNames: buttonClassNames,
+    onClick: () => onClick?.("pin-end"),
+    icon: "ph--caret-line-right--regular"
+  }), close && !isSolo && /* @__PURE__ */ React8.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);
 });
 export {
-  DEFAULT_TYPE,
-  SectionToolbar,
+  DEFAULT_EXTRINSIC_SIZE,
+  DEFAULT_HORIZONTAL_SIZE,
+  DEFAULT_VERTICAL_SIZE,
+  LayoutControls,
   Stack,
-  sectionToolbarLayout,
+  StackContext,
+  StackItem,
+  railGridHorizontal,
+  railGridVertical,
   translations_default as translations
 };
 //# sourceMappingURL=index.mjs.map