@dxos/react-ui-stack 0.6.13 → 0.6.14-main.1366248

package/dist/types/src/next/Stack.d.ts

@@ -0,0 +1,9 @@
+import React, { type ComponentPropsWithoutRef } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+type Orientation = 'horizontal' | 'vertical';
+export type StackProps = Omit<ThemedClassName<ComponentPropsWithoutRef<'div'>>, 'aria-orientation'> & {
+    orientation?: Orientation;
+};
+export declare const Stack: ({ children, classNames, style, orientation, ...props }: StackProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=Stack.d.ts.map

package/dist/types/src/next/Stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/next/Stack.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAgC,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE3F,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAE7C,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,GAAG;IACpG,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,KAAK,2DAA4D,UAAU,sBAcvF,CAAC"}

package/dist/types/src/next/Stack.stories.d.ts

@@ -0,0 +1,8 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import React from 'react';
+declare const StorybookStack: () => React.JSX.Element;
+type Story = StoryObj<typeof StorybookStack>;
+export declare const Default: Story;
+declare const meta: Meta<typeof StorybookStack>;
+export default meta;
+//# sourceMappingURL=Stack.stories.d.ts.map

package/dist/types/src/next/Stack.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.stories.d.ts","sourceRoot":"","sources":["../../../../src/next/Stack.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAgC,MAAM,OAAO,CAAC;AA4BrD,QAAA,MAAM,cAAc,yBAgGnB,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAKrC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/src/next/StackItem.d.ts

@@ -0,0 +1,14 @@
+import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import React, { type ComponentPropsWithoutRef } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { type StackProps } from './Stack';
+export type StackItemProps = Omit<ThemedClassName<ComponentPropsWithoutRef<'div'>>, 'aria-orientation'> & {
+    item: {
+        id: string;
+        type: 'column' | 'card';
+    };
+    orientation?: StackProps['orientation'];
+    onReorder: (sourceId: string, targetId: string, closestEdge: Edge | null) => void;
+};
+export declare const StackItem: ({ item, children, classNames, orientation, onReorder, ...props }: StackItemProps) => React.JSX.Element;
+//# sourceMappingURL=StackItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackItem.d.ts","sourceRoot":"","sources":["../../../../src/next/StackItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,KAAK,IAAI,EAEV,MAAM,uDAAuD,CAAC;AAE/D,OAAO,KAAK,EAAE,EAA+B,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE1F,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,GAAG;IACxG,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAA;KAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IACxC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACnF,CAAC;AAEF,eAAO,MAAM,SAAS,qEAAsE,cAAc,sBAoDzG,CAAC"}

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

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

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

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

package/dist/types/src/playwright/playwright.config.d.ts

@@ -1,3 +1,3 @@
-import { defaultPlaywrightConfig } from '@dxos/test/playwright';
-export default defaultPlaywrightConfig;
+declare const _default: import("@playwright/test").PlaywrightTestConfig<{}, {}>;
+export default _default;
 //# sourceMappingURL=playwright.config.d.ts.map

package/dist/types/src/playwright/playwright.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"playwright.config.d.ts","sourceRoot":"","sources":["../../../../src/playwright/playwright.config.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"playwright.config.d.ts","sourceRoot":"","sources":["../../../../src/playwright/playwright.config.ts"],"names":[],"mappings":";AASA,wBAQG"}

package/dist/types/src/testing/TableContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableContent.d.ts","sourceRoot":"","sources":["../../../../src/testing/TableContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,KAAK,IAAI,GAAG;IACV,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA8BF,eAAO,MAAM,WAAW,cAAe,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,KAAG,cAAc,CAAC,IAAI,EAAE,GAAG,CAAC,EAqCzF,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,MAAM,WAWtC,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG,mBAAmB,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;AAEjG,eAAO,MAAM,YAAY,gCAAiC;IAAE,IAAI,EAAE,iBAAiB,CAAA;CAAE,sBAMpF,CAAC"}
+{"version":3,"file":"TableContent.d.ts","sourceRoot":"","sources":["../../../../src/testing/TableContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,KAAK,IAAI,GAAG;IACV,SAAS,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA8BF,eAAO,MAAM,WAAW,cAAe,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,KAAG,cAAc,CAAC,IAAI,EAAE,GAAG,CAAC,EAqCzF,CAAC;AAEF,eAAO,MAAM,WAAW,UAAW,MAAM,WAWtC,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG,mBAAmB,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,CAAC;AAEjG,eAAO,MAAM,YAAY,gCAAiC;IAAE,IAAI,EAAE,iBAAiB,CAAA;CAAE,sBAMpF,CAAC"}

package/dist/types/src/testing/generator.d.ts

@@ -1,4 +1,4 @@
-import { S, type EchoReactiveObject } from '@dxos/echo-schema';
+import { type ReactiveObject, S } from '@dxos/echo-schema';
 export declare const range: <T>(fn: (i: number) => T | undefined, length: number) => T[];
 export type TestItem = {
     id: string;
@@ -8,7 +8,7 @@ type ObjectDataGenerator = {
     createSchema?: () => S.Schema<any>;
     createData: () => any;
 };
-type ObjectFactory<T extends EchoReactiveObject<any>> = {
+type ObjectFactory<T extends ReactiveObject<any>> = {
     schema?: S.Schema<any>;
     createObject: () => T;
 };

package/dist/types/src/testing/generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../../src/testing/generator.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,CAAC,EAAU,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAIvE,eAAO,MAAM,KAAK,GAAI,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS,UAAU,MAAM,KAAG,CAAC,EAGlD,CAAC;AAG5B,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE1E,KAAK,mBAAmB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACnC,UAAU,EAAE,MAAM,GAAG,CAAC;CACvB,CAAC;AAEF,KAAK,aAAa,CAAC,CAAC,SAAS,kBAAkB,CAAC,GAAG,CAAC,IAAI;IACtD,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC,CAAC;CACvB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAA;CAAE,CAAC;AAW/D,eAAO,MAAM,MAAM,UAAgC,CAAC;AACpD,eAAO,MAAM,QAAQ,UAAkB,CAAC;AAExC,eAAO,MAAM,iBAAiB,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAAA;CA+BpE,CAAC;AAEF;;;GAGG;AAEH,qBAAa,mBAAmB;IAC9B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;gBAEhC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,SAAS,CAAC,EAAE,gBAAgB,CAAA;KAAO;IASzF,IAAI,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAE5B;IAED,YAAY,CAAC,EAAE,KAAK,EAAE,GAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;KAAO;IAMjD,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;CAGtE"}
+{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../../src/testing/generator.ts"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,cAAc,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAQnE,eAAO,MAAM,KAAK,GAAI,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS,UAAU,MAAM,KAAG,CAAC,EAGlD,CAAC;AAG5B,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE1E,KAAK,mBAAmB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACnC,UAAU,EAAE,MAAM,GAAG,CAAC;CACvB,CAAC;AAEF,KAAK,aAAa,CAAC,CAAC,SAAS,cAAc,CAAC,GAAG,CAAC,IAAI;IAClD,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC,CAAC;CACvB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAA;CAAE,CAAC;AAW/D,eAAO,MAAM,MAAM,UAAgC,CAAC;AACpD,eAAO,MAAM,QAAQ,UAAkB,CAAC;AAExC,eAAO,MAAM,iBAAiB,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAAA;CA+BpE,CAAC;AAEF;;;GAGG;AAEH,qBAAa,mBAAmB;IAC9B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;gBAEhC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,SAAS,CAAC,EAAE,gBAAgB,CAAA;KAAO;IASzF,IAAI,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAE5B;IAED,YAAY,CAAC,EAAE,KAAK,EAAE,GAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;KAAO;IAMjD,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;CAGtE"}

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

@@ -1,3 +1,2 @@
-export * from './generator';
 export * from './stack-manager';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAMA,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.6.13",
+  "version": "0.6.14-main.1366248",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
+  "sideEffects": true,
   "exports": {
     ".": {
+      "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
-      "node": {
-        "default": "./dist/lib/node/index.cjs"
-      },
-      "types": "./dist/types/src/index.d.ts"
+      "node": "./dist/lib/node-esm/index.mjs"
     },
     "./testing": {
+      "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": {
-        "default": "./dist/lib/node/testing/index.cjs"
-      },
-      "types": "./dist/types/src/testing/index.d.ts"
+        "require": "./dist/lib/node/testing/index.cjs",
+        "default": "./dist/lib/node-esm/testing/index.mjs"
+      }
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -35,6 +35,10 @@
     "src"
   ],
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
+    "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.3",
+    "@effect/schema": "^0.75.1",
     "@fluentui/react-tabster": "^9.19.0",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-collapsible": "^1.0.2",
@@ -43,11 +47,10 @@
     "@radix-ui/react-menu": "^2.0.6",
     "@radix-ui/react-use-controllable-state": "^1.0.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/react-ui": "0.6.13",
-    "@dxos/react-ui-attention": "0.6.13",
-    "@dxos/react-ui-deck": "0.6.13",
-    "@dxos/react-ui-mosaic": "0.6.13",
-    "@dxos/react-ui-theme": "0.6.13"
+    "@dxos/react-ui-attention": "0.6.14-main.1366248",
+    "@dxos/react-ui-mosaic": "0.6.14-main.1366248",
+    "@dxos/echo-schema": "0.6.14-main.1366248",
+    "@dxos/react-ui-deck": "0.6.14-main.1366248"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -55,22 +58,26 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "^5.3.4",
-    "@dxos/client": "0.6.13",
-    "@dxos/echo-schema": "0.6.13",
-    "@dxos/random": "0.6.13",
-    "@dxos/react-ui-editor": "0.6.13",
-    "@dxos/react-ui-table": "0.6.13",
-    "@dxos/util": "0.6.13",
-    "@dxos/storybook-utils": "0.6.13"
+    "vite": "5.4.7",
+    "@dxos/client": "0.6.14-main.1366248",
+    "@dxos/echo-schema": "0.6.14-main.1366248",
+    "@dxos/random": "0.6.14-main.1366248",
+    "@dxos/react-ui": "0.6.14-main.1366248",
+    "@dxos/react-ui-editor": "0.6.14-main.1366248",
+    "@dxos/react-ui-table": "0.6.14-main.1366248",
+    "@dxos/storybook-utils": "0.6.14-main.1366248",
+    "@dxos/react-ui-theme": "0.6.14-main.1366248",
+    "@dxos/test-utils": "0.6.14-main.1366248",
+    "@dxos/util": "0.6.14-main.1366248"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@dxos/client": "0.6.13",
-    "@dxos/random": "0.6.13",
-    "@dxos/echo-schema": "0.6.13"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/client": "0.6.14-main.1366248",
+    "@dxos/random": "0.6.14-main.1366248",
+    "@dxos/react-ui": "0.6.14-main.1366248",
+    "@dxos/react-ui-theme": "0.6.14-main.1366248"
   },
   "publishConfig": {
     "access": "public"

package/src/components/CaretDownUp.tsx

@@ -1,6 +1,7 @@
 //
 // Copyright 2024 DXOS.org
 //
+
 import { type IconProps } from '@phosphor-icons/react';
 import React from 'react';
 

package/src/components/ContentTypes.stories.tsx

@@ -42,7 +42,7 @@ const ContentTypesStoryStack = ({ items }: { items: StackSectionItem[] }) => {
 };
 
 export default {
-  title: 'react-ui-stack/ContentTypes',
+  title: 'ui/react-ui-stack/ContentTypes',
   component: ContentTypesStoryStack,
   decorators: [withTheme, withLayout({ tooltips: true })],
 };

package/src/components/Deck.stories.tsx

@@ -4,23 +4,13 @@
 
 import '@dxos-theme';
 
-import {
-  Books,
-  CardsThree,
-  CaretLeft,
-  CaretLineLeft,
-  CaretLineRight,
-  CaretRight,
-  SidebarSimple,
-  TextAa,
-  X,
-} from '@phosphor-icons/react';
+import { CaretLeft, CaretLineLeft, CaretLineRight, CaretRight, SidebarSimple, X } from '@phosphor-icons/react';
 import React, { type PropsWithChildren, useState, type ComponentProps } from 'react';
 
 import { faker } from '@dxos/random';
-import { Button, Main } from '@dxos/react-ui';
-import { AttentionProvider } from '@dxos/react-ui-attention';
-import { PlankHeading, plankHeadingIconProps, Deck as NaturalDeck, Plank } from '@dxos/react-ui-deck';
+import { Button, Icon, Main } from '@dxos/react-ui';
+import { RootAttentionProvider } from '@dxos/react-ui-attention';
+import { PlankHeading, Deck as NaturalDeck, Plank } from '@dxos/react-ui-deck';
 import { Mosaic, type MosaicDataItem } from '@dxos/react-ui-mosaic';
 import { withTheme } from '@dxos/storybook-utils';
 import { arrayMove } from '@dxos/util';
@@ -51,7 +41,7 @@ const SimpleContent = ({ data }: { data: MosaicDataItem & { title?: string; body
 const rollItems = (n: number): StackSectionItem[] => {
   return [...Array(n)].map(() => ({
     id: faker.string.uuid(),
-    icon: TextAa,
+    icon: 'ph--text-aa--regular',
     isResizable: true,
     object: {
       id: faker.string.uuid(),
@@ -74,7 +64,7 @@ const StackPlank = ({ label, items, id, children }: PropsWithChildren<PlankProps
     <>
       <PlankHeading.Root classNames='pli-px'>
         <PlankHeading.Button>
-          <CardsThree {...plankHeadingIconProps} />
+          <Icon icon='ph--cards-three--regular' size={5} />
         </PlankHeading.Button>
         <PlankHeading.Label classNames='flex-1 truncate'>{label}</PlankHeading.Label>
         {children}
@@ -103,7 +93,7 @@ const DemoStackPlank = (rootProps: Partial<ComponentProps<typeof Plank.Root>>) =
 
 export default {
   // NOTE(thure): This is intentionally organized under `react-ui-deck` so that related stories appear together in Storybook despite needing to live in separate packages based on dependencies.
-  title: 'react-ui-deck/Deck',
+  title: 'ui/react-ui-deck/Deck',
   component: NaturalDeck.Root,
   decorators: [withTheme],
   args: {},
@@ -112,10 +102,9 @@ export default {
 export const StaticBasicStacks = {
   args: {},
   render: () => {
-    const [attended] = useState(new Set<string>());
     return (
       <Mosaic.Root>
-        <AttentionProvider attended={attended}>
+        <RootAttentionProvider>
           <Mosaic.DragOverlay />
           <NaturalDeck.Root classNames='fixed inset-0 z-0'>
             <DemoStackPlank />
@@ -126,7 +115,7 @@ export const StaticBasicStacks = {
             <DemoStackPlank />
             <DemoStackPlank />
           </NaturalDeck.Root>
-        </AttentionProvider>
+        </RootAttentionProvider>
       </Mosaic.Root>
     );
   },
@@ -135,10 +124,9 @@ export const StaticBasicStacks = {
 export const StaticBasicStacksWithOverscrolling = {
   args: {},
   render: () => {
-    const [attended] = useState(new Set<string>());
     return (
       <Mosaic.Root>
-        <AttentionProvider attended={attended}>
+        <RootAttentionProvider>
           <Mosaic.DragOverlay />
           <NaturalDeck.Root classNames='fixed inset-0 z-0'>
             <DemoStackPlank />
@@ -149,7 +137,7 @@ export const StaticBasicStacksWithOverscrolling = {
             <DemoStackPlank />
             <DemoStackPlank />
           </NaturalDeck.Root>
-        </AttentionProvider>
+        </RootAttentionProvider>
       </Mosaic.Root>
     );
   },
@@ -205,7 +193,6 @@ export const DynamicBasicStacks = () => {
         return acc;
       }, {}),
   );
-  const [attended] = useState(new Set<string>());
 
   const [navOpen, setNavOpen] = useState(true);
   const [c11yOpen, setC11yOpen] = useState(false);
@@ -244,7 +231,7 @@ export const DynamicBasicStacks = () => {
     <>
       <PlankHeading.Root classNames='pli-px'>
         <PlankHeading.Button>
-          <Books {...plankHeadingIconProps} />
+          <Icon icon='ph--books--regular' size={5} />
         </PlankHeading.Button>
         <PlankHeading.Label classNames='grow'>Menu</PlankHeading.Label>
         {c11yContent === MENU ? (
@@ -295,7 +282,7 @@ export const DynamicBasicStacks = () => {
 
   return (
     <Mosaic.Root>
-      <AttentionProvider attended={attended}>
+      <RootAttentionProvider>
         <Main.Root complementarySidebarOpen={c11yOpen} navigationSidebarOpen={navOpen}>
           <Main.Overlay />
           <Mosaic.DragOverlay />
@@ -369,7 +356,7 @@ export const DynamicBasicStacks = () => {
             )}
           </NaturalDeck.Root>
         </Main.Root>
-      </AttentionProvider>
+      </RootAttentionProvider>
     </Mosaic.Root>
   );
 };

package/src/components/Section.stories.tsx

@@ -13,7 +13,7 @@ import { withTheme } from '@dxos/storybook-utils';
 import { Section, type SectionProps } from './Section';
 
 export default {
-  title: 'react-ui-stack/Section',
+  title: 'ui/react-ui-stack/Section',
   component: Section as any,
   decorators: [withTheme],
   args: {

package/src/components/Section.tsx

@@ -3,15 +3,7 @@
 //
 
 import { useFocusableGroup, useTabsterAttributes } from '@fluentui/react-tabster';
-import {
-  ArrowLineDown,
-  ArrowLineUp,
-  ArrowSquareOut,
-  CaretUpDown,
-  DotsNine,
-  type IconProps,
-  Trash,
-} from '@phosphor-icons/react';
+import { ArrowLineDown, ArrowLineUp, ArrowSquareOut, CaretUpDown, Trash } from '@phosphor-icons/react';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import React, {
   forwardRef,
@@ -26,6 +18,7 @@ import React, {
 import {
   Button,
   DropdownMenu,
+  Icon,
   type Label,
   List,
   ListItem,
@@ -35,7 +28,7 @@ import {
   toLocalizedString,
   useTranslation,
 } from '@dxos/react-ui';
-import { createAttendableAttributes, useHasAttention } from '@dxos/react-ui-attention';
+import { useAttendableAttributes } from '@dxos/react-ui-attention';
 import { DropDownMenuDragHandleTrigger, resizeHandle, resizeHandleHorizontal } from '@dxos/react-ui-deck';
 import {
   type MosaicActiveType,
@@ -92,14 +85,14 @@ export type StackSectionItem = MosaicDataItem & {
   };
   // TODO(wittjosiah): Common type? Factor out?
   metadata?: {
-    icon?: FC<IconProps>;
+    icon?: string;
     placeholder?: Label;
     viewActions?: (item: StackSectionItem) => StackAction;
   };
 };
 
 export type StackAction = {
-  icon: FC<IconProps>;
+  icon: string;
   label: Label;
   onClick: () => void;
 };
@@ -133,7 +126,7 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
     {
       id,
       title,
-      icon: Icon = DotsNine,
+      icon = 'ph--placeholder--regular',
       size = 'intrinsic',
       collapsed,
       active,
@@ -157,8 +150,7 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
       mover: { cyclic: true, direction: 1, memorizeCurrent: false },
     });
     const sectionContentGroup = useFocusableGroup({});
-    const attendableAttrs = createAttendableAttributes(id);
-    const hasAttention = useHasAttention(id);
+    const attendableAttrs = useAttendableAttributes(id);
 
     return (
       <CollapsiblePrimitive.Root
@@ -180,10 +172,9 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
             role='none'
             className={mx(
               'grid col-span-2 grid-cols-subgrid',
-              'bg-base focus-within:border-separator focus-within:attention-within',
+              'bg-base attention-surface',
               hoverableControls,
               hoverableFocusedWithinControls,
-              (active || hasAttention) && 'attention-surface border-separator',
               (active === 'origin' || active === 'rearrange' || active === 'destination') && 'opacity-0',
             )}
           >
@@ -206,7 +197,7 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
                   }}
                 >
                   <DropDownMenuDragHandleTrigger active={!!active} variant='ghost' classNames='m-0' {...draggableProps}>
-                    <Icon className={mx(getSize(5), 'transition-opacity')} />
+                    <Icon icon={icon} size={5} classNames='transition-opacity' />
                   </DropDownMenuDragHandleTrigger>
                   <DropdownMenu.Portal>
                     <DropdownMenu.Content>

package/src/components/Stack.stories.tsx

@@ -15,7 +15,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { type StackSectionContent, type StackSectionItem } from './Section';
 import { Stack, type StackProps } from './Stack';
-import { TestObjectGenerator } from '../testing';
+import { TestObjectGenerator } from '../testing/generator';
 
 faker.seed(3);
 
@@ -39,7 +39,7 @@ const ComplexContent = ({
 };
 
 export default {
-  title: 'react-ui-stack/Stack',
+  title: 'ui/react-ui-stack/Stack',
   component: Stack,
   decorators: [withTheme],
   render: ({ debug, ...args }: DemoStackProps & { debug: boolean }) => {

package/src/components/Stack.tsx

@@ -3,7 +3,7 @@
 //
 
 import { useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';
-import React, { forwardRef, useCallback } from 'react';
+import React, { type ReactNode, forwardRef, useCallback } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
 import { List, useTranslation } from '@dxos/react-ui';
@@ -44,7 +44,7 @@ export type StackProps<TData extends StackSectionContent = StackSectionContent>
     items?: StackSectionItem[];
     separation?: boolean; // TODO(burdon): Style.
     onCollapseSection?: (id: string, collapsed: boolean) => void;
-    emptyComponent?: React.ReactNode;
+    emptyComponent?: ReactNode;
   };
 
 export const Stack = ({

package/src/next/Stack.stories.tsx

@@ -0,0 +1,148 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+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';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { Stack } from './Stack';
+import { StackItem } from './StackItem';
+
+type CardItem = {
+  id: string;
+  type: 'card';
+  content: string;
+};
+
+type ColumnItem = {
+  id: string;
+  type: 'column';
+  title: string;
+  cards: CardItem[];
+};
+
+const KanbanBlock = ({ item }: { item: CardItem }) => {
+  return (
+    <div className='is-64 bs-24 bg-input rounded-lg border border-separator shadow-sm grid place-content-center'>
+      <span className='text-sm font-medium'>{item.content}</span>
+    </div>
+  );
+};
+
+const StorybookStack = () => {
+  const [columns, setColumns] = useState<ColumnItem[]>([
+    {
+      id: 'col-0',
+      type: 'column',
+      title: 'To Do',
+      cards: [
+        { id: 'banana', type: 'card', content: 'Banana' },
+        { id: 'pickle', type: 'card', content: 'Pickle' },
+        { id: 'wombat', type: 'card', content: 'Wombat' },
+        { id: 'kazoo', type: 'card', content: 'Kazoo' },
+      ],
+    },
+    {
+      id: 'col-1',
+      type: 'column',
+      title: 'In Progress',
+      cards: [
+        { id: 'noodle', type: 'card', content: 'Noodle' },
+        { id: 'squish', type: 'card', content: 'Squish' },
+        { id: 'wobble', type: 'card', content: 'Wobble' },
+        { id: 'floof', type: 'card', content: 'Floof' },
+      ],
+    },
+    {
+      id: 'col-2',
+      type: 'column',
+      title: 'Done',
+      cards: [
+        { id: 'snorkel', type: 'card', content: 'Snorkel' },
+        { id: 'bloop', type: 'card', content: 'Bloop' },
+        { id: 'wiggle', type: 'card', content: 'Wiggle' },
+        { id: 'zoop', type: 'card', content: 'Zoop' },
+      ],
+    },
+  ]);
+
+  const reorderItem = useCallback((sourceId: string, targetId: string, closestEdge: Edge | null) => {
+    setColumns((prevColumns) => {
+      const newColumns = [...prevColumns];
+      const sourceColumn = newColumns.find(
+        (col) => col.id === sourceId || col.cards.some((card) => card.id === sourceId),
+      );
+      const targetColumn = newColumns.find(
+        (col) => col.id === targetId || col.cards.some((card) => card.id === targetId),
+      );
+
+      if (sourceColumn && targetColumn) {
+        if (sourceId.startsWith('col-') && targetId.startsWith('col-')) {
+          // Reordering columns
+          const sourceIndex = newColumns.findIndex((col) => col.id === sourceId);
+          const targetIndex = newColumns.findIndex((col) => col.id === targetId);
+          const [movedColumn] = newColumns.splice(sourceIndex, 1);
+          const insertIndex = closestEdge === 'right' ? targetIndex + 1 : targetIndex;
+          newColumns.splice(insertIndex, 0, movedColumn);
+        } else {
+          // Reordering cards within a column
+          const sourceCardIndex = sourceColumn.cards.findIndex((card) => card.id === sourceId);
+          const targetCardIndex = targetColumn.cards.findIndex((card) => card.id === targetId);
+          const [movedCard] = sourceColumn.cards.splice(sourceCardIndex, 1);
+
+          let insertIndex;
+          if (sourceColumn === targetColumn && sourceCardIndex < targetCardIndex) {
+            insertIndex = closestEdge === 'bottom' ? targetCardIndex : targetCardIndex - 1;
+          } else {
+            insertIndex = closestEdge === 'bottom' ? targetCardIndex + 1 : targetCardIndex;
+          }
+          targetColumn.cards.splice(insertIndex, 0, movedCard);
+        }
+      }
+
+      return newColumns;
+    });
+  }, []);
+
+  return (
+    <Stack orientation={'horizontal'} classNames='gap-1'>
+      {columns.map((column) => (
+        <StackItem
+          key={column.id}
+          item={column}
+          orientation={'horizontal'}
+          classNames='p-4 bg-deck rounded-md'
+          onReorder={reorderItem}
+        >
+          <Stack orientation={'vertical'} classNames='gap-1'>
+            {column.cards.map((card) => (
+              <StackItem key={card.id} item={card} orientation={'vertical'} onReorder={reorderItem}>
+                <KanbanBlock item={card} />
+              </StackItem>
+            ))}
+          </Stack>
+        </StackItem>
+      ))}
+    </Stack>
+  );
+};
+
+type Story = StoryObj<typeof StorybookStack>;
+
+export const Default: Story = {
+  args: {
+    orientation: 'horizontal',
+  },
+};
+
+const meta: Meta<typeof StorybookStack> = {
+  title: 'ui/react-ui-stack-next/Stack',
+  component: StorybookStack,
+  decorators: [withTheme],
+  argTypes: { orientation: { control: 'radio', options: ['horizontal', 'vertical'] } },
+};
+
+export default meta;