@dxos/react-ui-stack 0.6.11-staging.e6894a4 → 0.6.12-main.5cc132e

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\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\nimport { S, create, type EchoReactiveObject } from '@dxos/echo-schema';\nimport { faker } from '@dxos/random';\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": ["S", "create", "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/ContentTypes.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentTypes.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ContentTypes.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAuB,gBAAgB,EAAE,MAAM,WAAW,CAAC;;;2BAiB5B;QAAE,KAAK,EAAE,gBAAgB,EAAE,CAAA;KAAE;;;AAgBxE,wBAIE;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAUnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAelB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyB5B,CAAC"}
+{"version":3,"file":"ContentTypes.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ContentTypes.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAuB,gBAAgB,EAAE,MAAM,WAAW,CAAC;;;2BAiB5B;QAAE,KAAK,EAAE,gBAAgB,EAAE,CAAA;KAAE;;;AAcxE,wBAIE;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAUnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAelB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyB5B,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.6.11-staging.e6894a4",
+  "version": "0.6.12-main.5cc132e",
   "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"
     }
@@ -43,11 +45,11 @@
     "@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.11-staging.e6894a4",
-    "@dxos/react-ui-mosaic": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui-theme": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui-attention": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui-deck": "0.6.11-staging.e6894a4"
+    "@dxos/react-ui": "0.6.12-main.5cc132e",
+    "@dxos/react-ui-deck": "0.6.12-main.5cc132e",
+    "@dxos/react-ui-attention": "0.6.12-main.5cc132e",
+    "@dxos/react-ui-mosaic": "0.6.12-main.5cc132e",
+    "@dxos/react-ui-theme": "0.6.12-main.5cc132e"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -55,22 +57,23 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "^5.3.4",
-    "@dxos/client": "0.6.11-staging.e6894a4",
-    "@dxos/echo-schema": "0.6.11-staging.e6894a4",
-    "@dxos/random": "0.6.11-staging.e6894a4",
-    "@dxos/storybook-utils": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui-editor": "0.6.11-staging.e6894a4",
-    "@dxos/react-ui-table": "0.6.11-staging.e6894a4",
-    "@dxos/util": "0.6.11-staging.e6894a4"
+    "vite": "5.4.7",
+    "@dxos/client": "0.6.12-main.5cc132e",
+    "@dxos/random": "0.6.12-main.5cc132e",
+    "@dxos/echo-schema": "0.6.12-main.5cc132e",
+    "@dxos/react-ui-editor": "0.6.12-main.5cc132e",
+    "@dxos/react-ui-table": "0.6.12-main.5cc132e",
+    "@dxos/test-utils": "0.6.12-main.5cc132e",
+    "@dxos/storybook-utils": "0.6.12-main.5cc132e",
+    "@dxos/util": "0.6.12-main.5cc132e"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@dxos/client": "0.6.11-staging.e6894a4",
-    "@dxos/echo-schema": "0.6.11-staging.e6894a4",
-    "@dxos/random": "0.6.11-staging.e6894a4"
+    "@dxos/echo-schema": "0.6.12-main.5cc132e",
+    "@dxos/client": "0.6.12-main.5cc132e",
+    "@dxos/random": "0.6.12-main.5cc132e"
   },
   "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

@@ -7,9 +7,8 @@ import '@dxos-theme';
 import React from 'react';
 
 import { faker } from '@dxos/random';
-import { Tooltip } from '@dxos/react-ui';
 import { Mosaic } from '@dxos/react-ui-mosaic';
-import { withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import type { StackSectionContent, StackSectionItem } from './Section';
 import { Stack, type StackProps } from './Stack';
@@ -30,24 +29,22 @@ const ContentTypeDelegator: StackProps['SectionContent'] = (section: { data: Sta
 
 const ContentTypesStoryStack = ({ items }: { items: StackSectionItem[] }) => {
   return (
-    <Tooltip.Provider>
-      <Mosaic.Root>
-        <Mosaic.DragOverlay />
-        <Stack
-          id='stack-editors'
-          SectionContent={ContentTypeDelegator}
-          items={items}
-          classNames='max-is-[min(100dvw,60rem)]'
-        />
-      </Mosaic.Root>
-    </Tooltip.Provider>
+    <Mosaic.Root>
+      <Mosaic.DragOverlay />
+      <Stack
+        id='stack-editors'
+        SectionContent={ContentTypeDelegator}
+        items={items}
+        classNames='max-is-[min(100dvw,60rem)]'
+      />
+    </Mosaic.Root>
   );
 };
 
 export default {
   title: 'react-ui-stack/ContentTypes',
   component: ContentTypesStoryStack,
-  decorators: [withTheme],
+  decorators: [withTheme, withLayout({ tooltips: true })],
 };
 
 export const Editors = {

package/src/components/Section.tsx

@@ -158,7 +158,7 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
     });
     const sectionContentGroup = useFocusableGroup({});
     const attendableAttrs = createAttendableAttributes(id);
-    const attended = useHasAttention(id);
+    const hasAttention = useHasAttention(id);
 
     return (
       <CollapsiblePrimitive.Root
@@ -180,10 +180,10 @@ 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:bg-attention',
+              'bg-base focus-within:border-separator focus-within:attention-within',
               hoverableControls,
               hoverableFocusedWithinControls,
-              (active || attended) && 'bg-attention border-separator',
+              (active || hasAttention) && 'attention-surface border-separator',
               (active === 'origin' || active === 'rearrange' || active === 'destination') && 'opacity-0',
             )}
           >

package/src/components/Stack.stories.tsx

@@ -11,7 +11,7 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { faker } from '@dxos/random';
 import { Mosaic, type MosaicDropEvent, type MosaicMoveEvent, type MosaicOperation, Path } from '@dxos/react-ui-mosaic';
-import { withFullscreen, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { type StackSectionContent, type StackSectionItem } from './Section';
 import { Stack, type StackProps } from './Stack';
@@ -95,7 +95,7 @@ export const Transfer = {
       </Mosaic.Root>
     );
   },
-  decorators: [withTheme, withFullscreen()],
+  decorators: [withTheme, withLayout({ fullscreen: true })],
 };
 
 export const Copy = {
@@ -117,7 +117,7 @@ export const Copy = {
       </Mosaic.Root>
     );
   },
-  decorators: [withTheme, withFullscreen()],
+  decorators: [withTheme, withLayout({ fullscreen: true })],
 };
 
 export type DemoStackProps = StackProps & {

package/src/playwright/playwright.config.ts

@@ -2,6 +2,17 @@
 // Copyright 2023 DXOS.org
 //
 
-import { defaultPlaywrightConfig } from '@dxos/test/playwright';
+import { nxE2EPreset } from '@nx/playwright/preset';
+import { defineConfig } from '@playwright/test';
 
-export default defaultPlaywrightConfig;
+import { e2ePreset } from '@dxos/test-utils/playwright';
+
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: __dirname }),
+  ...e2ePreset(__dirname),
+  webServer: {
+    command: 'pnpm -w nx storybook-e2e stories',
+    port: 9009,
+    reuseExistingServer: !process.env.CI,
+  },
+});

package/src/playwright/smoke.spec.ts

@@ -4,7 +4,7 @@
 
 import { expect, test } from '@playwright/test';
 
-import { setupPage } from '@dxos/test/playwright';
+import { setupPage } from '@dxos/test-utils/playwright';
 
 import { StackManager } from '../testing';
 
@@ -13,10 +13,8 @@ const storybookUrl = (storyId: string) => `http://localhost:9009/iframe.html?id=
 
 test.describe('Stack', () => {
   test('remove', async ({ browser }) => {
-    const { page } = await setupPage(browser, {
-      url: storybookUrl('react-ui-stack-stack--transfer'),
-      waitFor: (page) => page.getByTestId('stack-transfer').isVisible(),
-    });
+    const { page } = await setupPage(browser, { url: storybookUrl('react-ui-stack-stack--transfer') });
+    await page.getByTestId('stack-transfer').waitFor({ state: 'visible' });
 
     const stack = new StackManager(page.getByTestId('stack-1'));
     await expect(stack.sections()).toHaveCount(8);
@@ -28,10 +26,8 @@ test.describe('Stack', () => {
   });
 
   test('rearrange', async ({ browser }) => {
-    const { page } = await setupPage(browser, {
-      url: storybookUrl('react-ui-stack-stack--transfer'),
-      waitFor: (page) => page.getByTestId('stack-transfer').isVisible(),
-    });
+    const { page } = await setupPage(browser, { url: storybookUrl('react-ui-stack-stack--transfer') });
+    await page.getByTestId('stack-transfer').waitFor({ state: 'visible' });
 
     const stack = new StackManager(page.getByTestId('stack-1'));
     const sectionText = await stack.section(0).locator.innerText();
@@ -47,10 +43,8 @@ test.describe('Stack', () => {
       test.skip();
     }
 
-    const { page } = await setupPage(browser, {
-      url: storybookUrl('react-ui-stack-stack--transfer'),
-      waitFor: (page) => page.getByTestId('stack-transfer').isVisible(),
-    });
+    const { page } = await setupPage(browser, { url: storybookUrl('react-ui-stack-stack--transfer') });
+    await page.getByTestId('stack-transfer').waitFor({ state: 'visible' });
 
     const stack1 = new StackManager(page.getByTestId('stack-1'));
     const stack2 = new StackManager(page.getByTestId('stack-2'));
@@ -69,10 +63,8 @@ test.describe('Stack', () => {
   });
 
   test('copy', async ({ browser }) => {
-    const { page } = await setupPage(browser, {
-      url: storybookUrl('react-ui-stack-stack--copy'),
-      waitFor: (page) => page.getByTestId('stack-copy').isVisible(),
-    });
+    const { page } = await setupPage(browser, { url: storybookUrl('react-ui-stack-stack--copy') });
+    await page.getByTestId('stack-copy').waitFor({ state: 'visible' });
 
     const stack1 = new StackManager(page.getByTestId('stack-1'));
     const stack2 = new StackManager(page.getByTestId('stack-2'));

package/src/testing/EditorContent.tsx

@@ -34,7 +34,7 @@ export const EditorContent = ({ data: { content = '' } }: { data: StackSectionCo
         formattingObserver,
         createBasicExtensions(),
         createMarkdownExtensions({ themeMode }),
-        createThemeExtensions({ themeMode, slots: { editor: { className: 'p-2' } } }),
+        createThemeExtensions({ themeMode, syntaxHighlighting: true, slots: { editor: { className: 'p-2' } } }),
         decorateMarkdown(),
         formattingKeymap(),
       ],

package/src/testing/TableContent.tsx

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