@dxos/react-ui-stack 0.8.2-main.f11618f → 0.8.2-staging.42af850

package/dist/types/src/components/StackItem/StackItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackItem/StackItem.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,EAIZ,KAAK,qBAAqB,EAE1B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,KAAK,eAAe,EAAY,MAAM,gBAAgB,CAAC;AAIhE,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAC3F,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,0BAA0B,EAChC,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAyB,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACjG,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,yBAAyB,EAE/B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAGjE,eAAO,MAAM,uBAAuB,KAA6B,CAAC;AAClE,eAAO,MAAM,qBAAqB,gBAAwC,CAAC;AAC3E,eAAO,MAAM,sBAAsB,KAAkD,CAAC;AAEtF,KAAK,kBAAkB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG;IACxE,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;CAC9C,CAAC;AA+LF,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE;QAAE,IAAI,EAAE,GAAG,CAAA;KAAE,KAAK,SAAS,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,cAAc,yBAAyB,6BAG3E,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;gCAL6B,yBAAyB;CAe3E,CAAC;AAEF,YAAY,EACV,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,0BAA0B,EAC1B,0BAA0B,EAC1B,wBAAwB,EACxB,mBAAmB,EACnB,yBAAyB,EACzB,oBAAoB,EACpB,yBAAyB,GAC1B,CAAC"}

package/dist/types/src/components/StackItem/StackItem.stories.d.ts

@@ -0,0 +1,8 @@
+import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { StackItem } from './StackItem';
+declare const meta: Meta<typeof StackItem.Root>;
+export default meta;
+type Story = StoryObj<typeof StackItem.Root>;
+export declare const Default: Story;
+//# sourceMappingURL=StackItem.stories.d.ts.map

package/dist/types/src/components/StackItem/StackItem.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackItem.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackItem/StackItem.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAM5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAAC,IAAI,CAwBrC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/dist/types/src/components/StackItem/StackItemContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackItemContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackItem/StackItemContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKtD,MAAM,MAAM,qBAAqB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,GAAG;IACrF;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;CACzC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;IAtB3B;;;OAGG;cACO,OAAO;IAEjB;;OAEG;gBACS,OAAO;IAEnB;;;OAGG;WACI,WAAW,GAAG,OAAO,GAAG,QAAQ;wCAmCxC,CAAC"}

package/dist/types/src/components/StackItem/StackItemDragHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackItemDragHandle.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackItem/StackItemDragHandle.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAI7D,MAAM,MAAM,wBAAwB,GAAG,wBAAwB,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC;AAEjG,eAAO,MAAM,mBAAmB,GAAI,uBAAuB,wBAAwB,sBAUlF,CAAC"}

package/dist/types/src/components/StackItem/StackItemHeading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackItemHeading.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackItem/StackItemHeading.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAErG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAgB,KAAK,YAAY,EAAE,KAAK,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAKzF,MAAM,MAAM,qBAAqB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;AAErF,eAAO,MAAM,gBAAgB,GAAI,oCAAoC,qBAAqB,sBAoBzF,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,eAAe,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,GAAG,YAAY,GAAG,OAAO,CAAC;AAE/G,eAAO,MAAM,qBAAqB,oHAgBjC,CAAC"}

package/dist/types/src/components/StackItem/StackItemResizeHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackItemResizeHandle.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackItem/StackItemResizeHandle.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,MAAM,0BAA0B,GAAG,EAAE,CAAC;AAE5C,eAAO,MAAM,qBAAqB,yBAajC,CAAC"}

package/dist/types/src/components/StackItem/StackItemSigil.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackItemSigil.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackItem/StackItemSigil.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAY,KAAK,iBAAiB,EAAwB,MAAM,OAAO,CAAC;AAEtF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAU,KAAK,WAAW,EAAyD,MAAM,gBAAgB,CAAC;AACjH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,OAAO,EAAgB,MAAM,0BAA0B,CAAC;AAOzF,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,YAAY,GAAG,MAAM,CAAC,CAAC;AAElF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAClE,YAAY,GACZ,OAAO,GAAG;IACR,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEJ,eAAO,MAAM,oBAAoB,kHAiBhC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CACjD;IACE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,oBAAoB,EAAE,EAAE,CAAC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACnD,GAAG,OAAO,CACZ,CAAC;AAEF,eAAO,MAAM,cAAc;mBARR,MAAM;kBACP,MAAM;cACV,oBAAoB,EAAE,EAAE;UAC5B,MAAM;eACD,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI;;;2CA6FpD,CAAC"}

package/dist/types/src/components/StackItem/index.d.ts

@@ -0,0 +1,2 @@
+export * from './StackItem';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/StackItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/StackItem/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC"}

package/dist/types/src/components/defs.d.ts

@@ -0,0 +1,18 @@
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { type Size as DndSize } from '@dxos/react-ui-dnd';
+import { type Orientation, type Size } from './Stack';
+export type StackItemSize = DndSize;
+export type StackItemData = {
+    id: string;
+    type: 'column' | 'card';
+};
+export type StackItemRearrangeHandler<Data extends {
+    id: string;
+} = StackItemData> = (source: Data, target: Data, closestEdge: Edge | null) => void;
+export type StackContextValue = {
+    orientation: Orientation;
+    rail: boolean;
+    size: Size;
+    onRearrange?: StackItemRearrangeHandler;
+};
+//# sourceMappingURL=defs.d.ts.map

package/dist/types/src/components/defs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../src/components/defs.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uDAAuD,CAAC;AAElF,OAAO,EAAE,KAAK,IAAI,IAAI,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;AAEpC,MAAM,MAAM,aAAa,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAA;CAAE,CAAC;AAEpE,MAAM,MAAM,yBAAyB,CAAC,IAAI,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG,aAAa,IAAI,CACnF,MAAM,EAAE,IAAI,EACZ,MAAM,EAAE,IAAI,EACZ,WAAW,EAAE,IAAI,GAAG,IAAI,KACrB,IAAI,CAAC;AAEV,MAAM,MAAM,iBAAiB,GAAG;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,WAAW,CAAC,EAAE,yBAAyB,CAAC;CACzC,CAAC"}

package/dist/types/src/components/deprecated/LayoutControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutControls.d.ts","sourceRoot":"","sources":["../../../../../src/components/deprecated/LayoutControls.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAe,KAAK,gBAAgB,EAAgD,MAAM,gBAAgB,CAAC;AAIlH,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,KAAK,GAAG,WAAW,IAAI,OAAO,GAAG,KAAK,EAAE,CAAC;AAChG,MAAM,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;AAEvE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,gBAAgB,EAAE,SAAS,CAAC,GAAG;IACpE,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,OAAO,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IACtC,KAAK,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,YAAY,CAAC;IAChD,YAAY,EAAE,kBAAkB,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;CAChC,CAAC;AAMF,eAAO,MAAM,cAAc,yGA4E1B,CAAC"}

package/dist/types/src/components/index.d.ts

@@ -1,5 +1,4 @@
+export * from './defs';
 export * from './Stack';
 export * from './StackItem';
-export * from './LayoutControls';
-export * from './StackContext';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AAEvB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}

package/dist/types/src/hooks/useStackDropForElements.d.ts

@@ -1,13 +1,12 @@
-import { type Orientation } from '../components/Stack';
-import { type StackItemRearrangeHandler } from '../components/StackContext';
+import { type StackItemRearrangeHandler, type Orientation } from '../components';
 /**
  * Hook to handle drag and drop functionality for Stack components.
  */
-export declare const useStackDropForElements: ({ element, selfDroppable, orientation, id, onRearrange, }: {
+export declare const useStackDropForElements: ({ id, element, selfDroppable, orientation, onRearrange, }: {
+    id?: string;
     element: HTMLDivElement | null;
     selfDroppable: boolean;
     orientation: Orientation;
-    id?: string;
     onRearrange?: StackItemRearrangeHandler;
 }) => {
     dropping: boolean;

package/dist/types/src/hooks/useStackDropForElements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useStackDropForElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useStackDropForElements.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,KAAK,yBAAyB,EAAsB,MAAM,4BAA4B,CAAC;AAEhG;;GAEG;AACH,eAAO,MAAM,uBAAuB,8DAMjC;IACD,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,yBAAyB,CAAC;CACzC;;CA4CA,CAAC"}
+{"version":3,"file":"useStackDropForElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useStackDropForElements.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,yBAAyB,EAAsB,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAErG;;GAEG;AACH,eAAO,MAAM,uBAAuB,GAAI,2DAMrC;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,yBAAyB,CAAC;CACzC;;CA4CA,CAAC"}

package/dist/types/src/testing/stack-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stack-manager.d.ts","sourceRoot":"","sources":["../../../../src/testing/stack-manager.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAQ,MAAM,kBAAkB,CAAC;AAEtD,qBAAa,YAAY;IAGX,QAAQ,CAAC,OAAO,EAAE,OAAO;IAFrC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAO;gBAER,OAAO,EAAE,OAAO;IAIrC,QAAQ;IAIR,KAAK;IAIL,OAAO,CAAC,KAAK,EAAE,MAAM;CAGtB;AAED,qBAAa,cAAc;IAGb,QAAQ,CAAC,OAAO,EAAE,OAAO;IAFrC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAO;gBAER,OAAO,EAAE,OAAO;IAI/B,EAAE;IAIF,MAAM;IAKN,UAAU;IAKV,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,GAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAmB;CAehF"}
+{"version":3,"file":"stack-manager.d.ts","sourceRoot":"","sources":["../../../../src/testing/stack-manager.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAQ,MAAM,kBAAkB,CAAC;AAEtD,qBAAa,YAAY;IAGX,QAAQ,CAAC,OAAO,EAAE,OAAO;IAFrC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAO;gBAER,OAAO,EAAE,OAAO;IAIrC,QAAQ,IAAI,OAAO;IAInB,KAAK;IAIL,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc;CAGvC;AAED,qBAAa,cAAc;IAGb,QAAQ,CAAC,OAAO,EAAE,OAAO;IAFrC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAO;gBAER,OAAO,EAAE,OAAO;IAI/B,EAAE,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IAI5B,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAKvB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAK3B,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,GAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAmB,GAAG,OAAO,CAAC,IAAI,CAAC;CAehG"}

package/dist/types/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"version":"5.7.3"}
+{"version":"5.8.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.8.2-main.f11618f",
+  "version": "0.8.2-staging.42af850",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -40,6 +40,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@fluentui/react-tabster": "^9.24.2",
+    "@preact-signals/safe-react": "^0.9.0",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
@@ -47,12 +48,12 @@
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/echo-schema": "0.8.2-main.f11618f",
-    "@dxos/keyboard": "0.8.2-main.f11618f",
-    "@dxos/live-object": "0.8.2-main.f11618f",
-    "@dxos/react-ui-dnd": "0.8.2-main.f11618f",
-    "@dxos/util": "0.8.2-main.f11618f",
-    "@dxos/react-ui-attention": "0.8.2-main.f11618f"
+    "@dxos/echo-schema": "0.8.2-staging.42af850",
+    "@dxos/live-object": "0.8.2-staging.42af850",
+    "@dxos/keyboard": "0.8.2-staging.42af850",
+    "@dxos/react-ui-attention": "0.8.2-staging.42af850",
+    "@dxos/react-ui-dnd": "0.8.2-staging.42af850",
+    "@dxos/util": "0.8.2-staging.42af850"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -61,24 +62,24 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/app-graph": "0.8.2-main.f11618f",
-    "@dxos/client": "0.8.2-main.f11618f",
-    "@dxos/echo-schema": "0.8.2-main.f11618f",
-    "@dxos/react-ui": "0.8.2-main.f11618f",
-    "@dxos/random": "0.8.2-main.f11618f",
-    "@dxos/react-ui-editor": "0.8.2-main.f11618f",
-    "@dxos/react-ui-theme": "0.8.2-main.f11618f",
-    "@dxos/storybook-utils": "0.8.2-main.f11618f",
-    "@dxos/test-utils": "0.8.2-main.f11618f"
+    "@dxos/app-graph": "0.8.2-staging.42af850",
+    "@dxos/client": "0.8.2-staging.42af850",
+    "@dxos/random": "0.8.2-staging.42af850",
+    "@dxos/react-ui": "0.8.2-staging.42af850",
+    "@dxos/react-ui-theme": "0.8.2-staging.42af850",
+    "@dxos/storybook-utils": "0.8.2-staging.42af850",
+    "@dxos/react-ui-editor": "0.8.2-staging.42af850",
+    "@dxos/echo-schema": "0.8.2-staging.42af850",
+    "@dxos/test-utils": "0.8.2-staging.42af850"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/client": "0.8.2-main.f11618f",
-    "@dxos/random": "0.8.2-main.f11618f",
-    "@dxos/react-ui-theme": "0.8.2-main.f11618f",
-    "@dxos/react-ui": "0.8.2-main.f11618f"
+    "@dxos/client": "0.8.2-staging.42af850",
+    "@dxos/random": "0.8.2-staging.42af850",
+    "@dxos/react-ui": "0.8.2-staging.42af850",
+    "@dxos/react-ui-theme": "0.8.2-staging.42af850"
   },
   "publishConfig": {
     "access": "public"

package/src/components/{Stack.stories.tsx → Stack/Stack.stories.tsx}

@@ -2,6 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
+import '@dxos-theme';
+
 import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React, { useState, useCallback } from 'react';
@@ -10,8 +12,8 @@ import { faker } from '@dxos/random';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Stack } from './Stack';
-import { type StackItemData } from './StackContext';
-import { StackItem } from './StackItem';
+import { StackItem } from '../StackItem';
+import { type StackItemData } from '../defs';
 
 type StoryStackItem = {
   id: string;
@@ -27,7 +29,7 @@ const KanbanBlock = ({ item }: { item: StoryStackItem }) => {
   );
 };
 
-const StorybookStack = () => {
+const DefaultStory = () => {
   const [columns, setColumns] = useState<StoryStackItem[]>(
     faker.helpers.multiple(
       () =>
@@ -95,14 +97,24 @@ const StorybookStack = () => {
   return (
     <main className='fixed inset-0'>
       <Stack orientation='horizontal' size='contain' onRearrange={reorderItem}>
-        {columns.map((column) => (
-          <StackItem.Root key={column.id} item={column}>
+        {columns.map((column, columnIndex, columnsArray) => (
+          <StackItem.Root
+            key={column.id}
+            item={column}
+            prevSiblingId={columnIndex > 0 ? columnsArray[columnIndex - 1].id : undefined}
+            nextSiblingId={columnIndex < columnsArray.length - 1 ? columnsArray[columnIndex + 1].id : undefined}
+          >
             <StackItem.Heading>
               <StackItem.ResizeHandle />
             </StackItem.Heading>
             <Stack orientation='vertical' size='contain'>
-              {column.items?.map((card) => (
-                <StackItem.Root key={card.id} item={card}>
+              {column.items?.map((card, cardIndex, cardsArray) => (
+                <StackItem.Root
+                  key={card.id}
+                  item={card}
+                  prevSiblingId={cardIndex > 0 ? cardsArray[cardIndex - 1].id : undefined}
+                  nextSiblingId={cardIndex < cardsArray.length - 1 ? cardsArray[cardIndex + 1].id : undefined}
+                >
                   <StackItem.Heading>
                     <StackItem.ResizeHandle />
                   </StackItem.Heading>
@@ -117,19 +129,19 @@ const StorybookStack = () => {
   );
 };
 
-type Story = StoryObj<typeof StorybookStack>;
-
-export const Default: Story = {
-  args: {
-    orientation: 'horizontal',
-  },
-};
-
-const meta: Meta<typeof StorybookStack> = {
+const meta: Meta<typeof DefaultStory> = {
   title: 'ui/react-ui-stack/Stack',
-  component: StorybookStack,
+  component: DefaultStory,
   decorators: [withTheme],
   argTypes: { orientation: { control: 'radio', options: ['horizontal', 'vertical'] } },
 };
 
 export default meta;
+
+type Story = StoryObj<typeof DefaultStory>;
+
+export const Default: Story = {
+  args: {
+    orientation: 'horizontal',
+  },
+};

package/src/components/{Stack.tsx → Stack/Stack.tsx}

@@ -4,19 +4,32 @@
 
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { composeRefs } from '@radix-ui/react-compose-refs';
-import React, { Children, type CSSProperties, type ComponentPropsWithRef, forwardRef, useState, useMemo } from 'react';
+import React, {
+  Children,
+  type CSSProperties,
+  type ComponentPropsWithRef,
+  forwardRef,
+  useState,
+  useMemo,
+  useCallback,
+} from 'react';
 
 import { type ThemedClassName, ListItem } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { type StackContextValue, StackContext } from './StackContext';
-import { useStackDropForElements } from '../hooks';
+import { useStackDropForElements } from '../../hooks';
+import { StackContext } from '../StackContext';
+import { type StackContextValue } from '../defs';
 
 export type Orientation = 'horizontal' | 'vertical';
 export type Size = 'intrinsic' | 'contain' | 'contain-fit-content';
 
 export type StackProps = Omit<ThemedClassName<ComponentPropsWithRef<'div'>>, 'aria-orientation'> &
-  Partial<StackContextValue> & { itemsCount?: number };
+  Partial<StackContextValue> & {
+    itemsCount?: number;
+    getDropElement?: (stackElement: HTMLDivElement) => HTMLDivElement;
+    separatorOnScroll?: number;
+  };
 
 export const railGridHorizontal = 'grid-rows-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]';
 export const railGridVertical = 'grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]';
@@ -40,6 +53,8 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
       size = 'intrinsic',
       onRearrange,
       itemsCount = Children.count(children),
+      getDropElement,
+      separatorOnScroll,
       ...props
     },
     forwardedRef,
@@ -58,12 +73,28 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
 
     const { dropping } = useStackDropForElements({
       id: props.id,
-      element: stackElement,
+      element: getDropElement && stackElement ? getDropElement(stackElement) : 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';
@@ -93,6 +124,7 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
           aria-orientation={orientation}
           style={styles}
           ref={composedItemRef}
+          {...(Number.isFinite(separatorOnScroll) && { onScroll: handleScroll })}
         >
           {children}
           {selfDroppable && dropping && (

package/src/components/Stack/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './Stack';

package/src/components/StackContext.tsx

@@ -2,22 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { createContext, useContext } from 'react';
 
-import { type Size as DndSize } from '@dxos/react-ui-dnd';
-
 import { type Orientation, type Size } from './Stack';
-
-export type StackItemSize = DndSize;
-
-export type StackItemData = { id: string; type: 'column' | 'card' };
-
-export type StackItemRearrangeHandler<Data extends { id: string } = StackItemData> = (
-  source: Data,
-  target: Data,
-  closestEdge: Edge | null,
-) => void;
+import { type StackItemSize, type StackItemRearrangeHandler } from './defs';
 
 export type StackContextValue = {
   orientation: Orientation;
@@ -34,16 +22,36 @@ export const StackContext = createContext<StackContextValue>({
 
 export const useStack = () => useContext(StackContext);
 
+export type ItemDragState =
+  | {
+      type: 'idle';
+    }
+  | {
+      type: 'preview';
+      container: HTMLElement;
+      item: any;
+    }
+  | {
+      type: 'is-dragging';
+      item: any;
+    };
+
+export const idle: ItemDragState = { type: 'idle' };
+
 export type StackItemContextValue = {
   selfDragHandleRef: (element: HTMLDivElement | null) => void;
   size: StackItemSize;
   setSize: (nextSize: StackItemSize, commit?: boolean) => void;
+  state: ItemDragState;
+  setState: (state: ItemDragState) => void;
 };
 
 export const StackItemContext = createContext<StackItemContextValue>({
   selfDragHandleRef: () => {},
   size: 'min-content',
   setSize: () => {},
+  state: idle,
+  setState: () => {},
 });
 
 export const useStackItem = () => useContext(StackItemContext);

package/src/components/StackItem/StackItem.stories.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Icon, DropdownMenu } from '@dxos/react-ui';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { StackItem } from './StackItem';
+
+const meta: Meta<typeof StackItem.Root> = {
+  title: 'ui/react-ui-stack/StackItem',
+  component: StackItem.Root,
+  render: (args) => (
+    <StackItem.Root role='section' {...args} classNames='w-[20rem] border border-separator'>
+      <StackItem.Heading>
+        <span className='sr-only'>Title</span>
+        <div role='none' className='sticky -block-start-px bg-[--sticky-bg] p-1 is-full'>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>
+              <StackItem.SigilButton>
+                <Icon icon={'ph--dots-three--regular'} size={5} />
+              </StackItem.SigilButton>
+            </DropdownMenu.Trigger>
+          </DropdownMenu.Root>
+        </div>
+      </StackItem.Heading>
+      <StackItem.Content classNames='p-2'>Content</StackItem.Content>
+    </StackItem.Root>
+  ),
+  decorators: [withTheme],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StackItem.Root>;
+
+export const Default: Story = {
+  args: {
+    item: { id: '1' },
+  },
+};