@dxos/react-ui-stack 0.6.12 → 0.6.13-main.09887cd

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/testing/generator.ts", "../../../../src/testing/stack-manager.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { create, type EchoReactiveObject, S } from '@dxos/echo-schema';\nimport { faker } from '@dxos/random';\n\n// TODO(burdon): Reconcile with @dxos/plugin-debug, @dxos/react-ui/testing.\n\n// TODO(burdon): Bug when adding stale objects to space (e.g., static objects already added in previous story invocation).\n\n// TODO(burdon): Util.\nexport const range = <T>(fn: (i: number) => T | undefined, length: number): T[] =>\n  Array.from({ length })\n    .map((_, i) => fn(i))\n    .filter(Boolean) as T[];\n\n// TODO(burdon): Commit to using ECHO to generate all test data? Or convert from raw data?\nexport type TestItem = { id: string; type: string } & Record<string, any>;\n\ntype ObjectDataGenerator = {\n  createSchema?: () => S.Schema<any>;\n  createData: () => any;\n};\n\ntype ObjectFactory<T extends EchoReactiveObject<any>> = {\n  schema?: S.Schema<any>; // TODO(burdon): Support both typed and expando schema.\n  createObject: () => T;\n};\n\ntype ObjectFactoryMap = { [type: string]: ObjectFactory<any> };\n\nconst createFactory = ({ createSchema, createData }: ObjectDataGenerator) => {\n  const schema = createSchema?.();\n  return {\n    schema,\n    createObject: () => (schema ? create(schema, createData()) : create(createData())),\n  };\n};\n\n// TODO(burdon): Handle restricted values.\nexport const Status = ['pending', 'active', 'done'];\nexport const Priority = [1, 2, 3, 4, 5];\n\nexport const defaultGenerators: { [type: string]: ObjectDataGenerator } = {\n  document: {\n    createData: () => ({\n      title: faker.lorem.sentence(3),\n      body: faker.lorem.sentences({ min: 1, max: faker.number.int({ min: 1, max: 3 }) }),\n    }),\n  },\n\n  image: {\n    createData: () => ({\n      title: faker.lorem.sentence(3),\n      image: faker.helpers.arrayElement(data.images),\n      body: faker.datatype.boolean() ? faker.lorem.sentences() : undefined,\n    }),\n  },\n\n  project: {\n    createSchema: () =>\n      S.Struct({\n        title: S.String,\n        repo: S.String,\n        status: S.String,\n        priority: S.Number,\n      }),\n    createData: () => ({\n      title: faker.commerce.productName(),\n      repo: faker.datatype.boolean({ probability: 0.3 }) ? faker.internet.url() : undefined,\n      status: faker.helpers.arrayElement(Status),\n      priority: faker.helpers.arrayElement(Priority),\n    }),\n  },\n};\n\n/**\n * Typed object generator.\n * @deprecated\n */\n// TODO(wittjosiah): Remove.\nexport class TestObjectGenerator {\n  public readonly factories: ObjectFactoryMap;\n\n  constructor({ types, factories }: { types?: string[]; factories?: ObjectFactoryMap } = {}) {\n    this.factories =\n      factories ??\n      (types ?? Object.keys(defaultGenerators)).reduce<ObjectFactoryMap>((acc, type) => {\n        acc[type] = createFactory(defaultGenerators[type]);\n        return acc;\n      }, {});\n  }\n\n  get schema(): S.Schema<any>[] {\n    return Object.values(this.factories).map((f) => f.schema!);\n  }\n\n  createObject({ types }: { types?: string[] } = {}) {\n    const type = faker.helpers.arrayElement(types ?? Object.keys(this.factories));\n    const factory = this.factories[type];\n    return factory?.createObject();\n  }\n\n  createObjects({ types, length }: { types?: string[]; length: number }) {\n    return range(() => this.createObject({ types }), length);\n  }\n}\n\n// https://unsplash.com\n// TODO(burdon): Use https://picsum.photos?\nconst data = {\n  images: [\n    '/images/image-1.png',\n    '/images/image-2.png',\n    '/images/image-3.png',\n    '/images/image-4.png',\n    '/images/image-5.png',\n    '/images/image-6.png',\n  ],\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport type { Locator, Page } from '@playwright/test';\n\nexport class StackManager {\n  private readonly _page: Page;\n\n  constructor(readonly locator: Locator) {\n    this._page = locator.page();\n  }\n\n  empty() {\n    return this.locator.getByTestId('stack.empty');\n  }\n\n  sections() {\n    return this.locator.locator('li');\n  }\n\n  order() {\n    return this.locator.locator('li').evaluateAll((els) => els.map((el) => el.getAttribute('id')));\n  }\n\n  section(index: number) {\n    return new SectionManager(this.locator.locator('li').nth(index));\n  }\n}\n\nexport class SectionManager {\n  private readonly _page: Page;\n\n  constructor(readonly locator: Locator) {\n    this._page = locator.page();\n  }\n\n  async id() {\n    return this.locator.getAttribute('id');\n  }\n\n  async remove() {\n    await this.locator.getByTestId('section.drag-handle-menu-trigger').click();\n    await this._page.getByTestId('section.remove').click();\n  }\n\n  async navigateTo() {\n    await this.locator.getByTestId('section.drag-handle-menu-trigger').click();\n    await this._page.getByTestId('section.navigate-to').click();\n  }\n\n  async dragTo(target: Locator, offset: { x: number; y: number } = { x: 0, y: 0 }) {\n    const active = this.locator.getByTestId('section.drag-handle-menu-trigger');\n    const box = await target.boundingBox();\n    if (box) {\n      await active.hover();\n      await this._page.mouse.down();\n      // Timeouts are for input discretization in WebKit\n      await this._page.waitForTimeout(100);\n      await this._page.pause();\n      await this._page.mouse.move(offset.x + box.x + box.width / 2, offset.y + box.y + box.height / 2, { steps: 4 });\n      await this._page.pause();\n      await this._page.waitForTimeout(100);\n      await this._page.mouse.up();\n    }\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["create", "S", "faker", "range", "fn", "length", "Array", "from", "map", "_", "i", "filter", "Boolean", "createFactory", "createSchema", "createData", "schema", "createObject", "create", "Status", "Priority", "defaultGenerators", "document", "title", "faker", "lorem", "sentence", "body", "sentences", "min", "max", "number", "int", "image", "helpers", "arrayElement", "data", "images", "datatype", "boolean", "undefined", "project", "S", "Struct", "String", "repo", "status", "priority", "Number", "commerce", "productName", "probability", "internet", "url", "TestObjectGenerator", "constructor", "types", "factories", "Object", "keys", "reduce", "acc", "type", "values", "f", "factory", "createObjects", "StackManager", "constructor", "locator", "_page", "page", "empty", "getByTestId", "sections", "order", "evaluateAll", "els", "map", "el", "getAttribute", "section", "index", "SectionManager", "nth", "id", "remove", "click", "navigateTo", "dragTo", "target", "offset", "x", "y", "active", "box", "boundingBox", "hover", "mouse", "down", "waitForTimeout", "pause", "move", "width", "height", "steps", "up"]
+}

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

@@ -1 +1 @@
-{"version":3,"file":"CaretDownUp.d.ts","sourceRoot":"","sources":["../../../../src/components/CaretDownUp.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,WAAW,mCAAoC,SAAS,sBAuBpE,CAAC"}
+{"version":3,"file":"CaretDownUp.d.ts","sourceRoot":"","sources":["../../../../src/components/CaretDownUp.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,WAAW,mCAAoC,SAAS,sBAuBpE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Deck.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Deck.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAarB,OAAO,KAAgE,MAAM,OAAO,CAAC;;;;;;;AAsFrF,wBAME;AAEF,eAAO,MAAM,iBAAiB;;;CAqB7B,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;CAqB9C,CAAC;AA2CF,eAAO,MAAM,kBAAkB,yBAgL9B,CAAC"}
+{"version":3,"file":"Deck.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Deck.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAgE,MAAM,OAAO,CAAC;;;;;;;AAsFrF,wBAME;AAEF,eAAO,MAAM,iBAAiB;;;CAqB7B,CAAC;AAEF,eAAO,MAAM,kCAAkC;;;CAqB9C,CAAC;AA2CF,eAAO,MAAM,kBAAkB,yBAgL9B,CAAC"}

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

@@ -1,4 +1,3 @@
-import { type IconProps } from '@phosphor-icons/react';
 import React, { type ForwardRefExoticComponent, type RefAttributes, type FC, type PropsWithChildren, type ComponentPropsWithRef } from 'react';
 import { type Label, type ThemedClassName } from '@dxos/react-ui';
 import { type MosaicActiveType, type MosaicDataItem, type MosaicTileComponent, type MosaicTileProps } from '@dxos/react-ui-mosaic';
@@ -30,13 +29,13 @@ export type StackSectionItem = MosaicDataItem & {
         custom?: Record<string, any>;
     };
     metadata?: {
-        icon?: FC<IconProps>;
+        icon?: string;
         placeholder?: Label;
         viewActions?: (item: StackSectionItem) => StackAction;
     };
 };
 export type StackAction = {
-    icon: FC<IconProps>;
+    icon: string;
     label: Label;
     onClick: () => void;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../src/components/Section.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../src/components/Section.tsx"],"names":[],"mappings":"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"}

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,EAAsB,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAEjF,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;
+declare const meta: Meta<typeof StorybookStack>;
+export default meta;
+type Story = StoryObj<typeof StorybookStack>;
+export declare const Default: Story;
+//# 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,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAKrC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAErB,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,EAAoB,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE/E,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 EchoReactiveObject, S } from '@dxos/echo-schema';
 export declare const range: <T>(fn: (i: number) => T | undefined, length: number) => T[];
 export type TestItem = {
     id: string;

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,kBAAkB,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAQvE,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.6.12",
+  "version": "0.6.13-main.09887cd",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,14 +10,16 @@
     ".": {
       "browser": "./dist/lib/browser/index.mjs",
       "node": {
-        "default": "./dist/lib/node/index.cjs"
+        "require": "./dist/lib/node/index.cjs",
+        "default": "./dist/lib/node-esm/index.mjs"
       },
       "types": "./dist/types/src/index.d.ts"
     },
     "./testing": {
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": {
-        "default": "./dist/lib/node/testing/index.cjs"
+        "require": "./dist/lib/node/testing/index.cjs",
+        "default": "./dist/lib/node-esm/testing/index.mjs"
       },
       "types": "./dist/types/src/testing/index.d.ts"
     }
@@ -35,6 +37,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 +49,12 @@
     "@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.12",
-    "@dxos/react-ui-attention": "0.6.12",
-    "@dxos/react-ui-deck": "0.6.12",
-    "@dxos/react-ui-theme": "0.6.12",
-    "@dxos/react-ui-mosaic": "0.6.12"
+    "@dxos/echo-schema": "0.6.13-main.09887cd",
+    "@dxos/react-ui-attention": "0.6.13-main.09887cd",
+    "@dxos/react-ui": "0.6.13-main.09887cd",
+    "@dxos/react-ui-deck": "0.6.13-main.09887cd",
+    "@dxos/react-ui-theme": "0.6.13-main.09887cd",
+    "@dxos/react-ui-mosaic": "0.6.13-main.09887cd"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -55,22 +62,22 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "^5.3.4",
-    "@dxos/client": "0.6.12",
-    "@dxos/random": "0.6.12",
-    "@dxos/echo-schema": "0.6.12",
-    "@dxos/react-ui-table": "0.6.12",
-    "@dxos/react-ui-editor": "0.6.12",
-    "@dxos/storybook-utils": "0.6.12",
-    "@dxos/util": "0.6.12"
+    "vite": "5.4.7",
+    "@dxos/client": "0.6.13-main.09887cd",
+    "@dxos/echo-schema": "0.6.13-main.09887cd",
+    "@dxos/random": "0.6.13-main.09887cd",
+    "@dxos/react-ui-editor": "0.6.13-main.09887cd",
+    "@dxos/react-ui-table": "0.6.13-main.09887cd",
+    "@dxos/storybook-utils": "0.6.13-main.09887cd",
+    "@dxos/test-utils": "0.6.13-main.09887cd",
+    "@dxos/util": "0.6.13-main.09887cd"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@dxos/client": "0.6.12",
-    "@dxos/random": "0.6.12",
-    "@dxos/echo-schema": "0.6.12"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/client": "0.6.13-main.09887cd",
+    "@dxos/random": "0.6.13-main.09887cd"
   },
   "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/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}
@@ -112,10 +102,10 @@ export default {
 export const StaticBasicStacks = {
   args: {},
   render: () => {
-    const [attended] = useState(new Set<string>());
+    const [attention] = useState({ attended: [] });
     return (
       <Mosaic.Root>
-        <AttentionProvider attended={attended}>
+        <RootAttentionProvider attention={attention}>
           <Mosaic.DragOverlay />
           <NaturalDeck.Root classNames='fixed inset-0 z-0'>
             <DemoStackPlank />
@@ -126,7 +116,7 @@ export const StaticBasicStacks = {
             <DemoStackPlank />
             <DemoStackPlank />
           </NaturalDeck.Root>
-        </AttentionProvider>
+        </RootAttentionProvider>
       </Mosaic.Root>
     );
   },
@@ -135,10 +125,10 @@ export const StaticBasicStacks = {
 export const StaticBasicStacksWithOverscrolling = {
   args: {},
   render: () => {
-    const [attended] = useState(new Set<string>());
+    const [attention] = useState({ attended: [] });
     return (
       <Mosaic.Root>
-        <AttentionProvider attended={attended}>
+        <RootAttentionProvider attention={attention}>
           <Mosaic.DragOverlay />
           <NaturalDeck.Root classNames='fixed inset-0 z-0'>
             <DemoStackPlank />
@@ -149,7 +139,7 @@ export const StaticBasicStacksWithOverscrolling = {
             <DemoStackPlank />
             <DemoStackPlank />
           </NaturalDeck.Root>
-        </AttentionProvider>
+        </RootAttentionProvider>
       </Mosaic.Root>
     );
   },
@@ -205,7 +195,7 @@ export const DynamicBasicStacks = () => {
         return acc;
       }, {}),
   );
-  const [attended] = useState(new Set<string>());
+  const [attention] = useState({ attended: [] });
 
   const [navOpen, setNavOpen] = useState(true);
   const [c11yOpen, setC11yOpen] = useState(false);
@@ -244,7 +234,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 +285,7 @@ export const DynamicBasicStacks = () => {
 
   return (
     <Mosaic.Root>
-      <AttentionProvider attended={attended}>
+      <RootAttentionProvider attention={attention}>
         <Main.Root complementarySidebarOpen={c11yOpen} navigationSidebarOpen={navOpen}>
           <Main.Overlay />
           <Mosaic.DragOverlay />
@@ -369,7 +359,7 @@ export const DynamicBasicStacks = () => {
             )}
           </NaturalDeck.Root>
         </Main.Root>
-      </AttentionProvider>
+      </RootAttentionProvider>
     </Mosaic.Root>
   );
 };

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/next/Stack.stories.tsx

@@ -0,0 +1,146 @@
+//
+// 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>
+  );
+};
+
+const meta: Meta<typeof StorybookStack> = {
+  title: 'react-ui-stack-next/Stack',
+  component: StorybookStack,
+  decorators: [withTheme],
+  argTypes: { orientation: { control: 'radio', options: ['horizontal', 'vertical'] } },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StorybookStack>;
+
+export const Default: Story = {
+  args: { orientation: 'horizontal' },
+};