@dxos/react-ui-mosaic 0.8.4-main.fcfe5033a5 → 0.9.0

package/dist/lib/browser/playwright/index.mjs

@@ -1,4 +1,5 @@
 // src/playwright/board-manager.ts
+import { expect } from "@playwright/test";
 var BoardManager = class {
   locator;
   _page;
@@ -73,26 +74,113 @@ var ItemManager = class {
   async dragTo(target, offset = {
     x: 0,
     y: 0
-  }) {
+  }, edge) {
     const handle = this.locator.getByTestId("mosaicBoard.cardDragHandle");
-    const box = await target.boundingBox();
-    if (box) {
-      await handle.hover();
-      await this._page.mouse.down();
-      await this._page.waitForTimeout(100);
+    const handleBox = await handle.boundingBox();
+    if (!handleBox) {
+      return;
+    }
+    const targetHandle = await target.elementHandle();
+    const box = targetHandle ? await targetHandle.boundingBox() : null;
+    if (!targetHandle || !box) {
+      return;
+    }
+    const sourceHandle = await this.locator.elementHandle();
+    await handle.hover();
+    await this._page.mouse.down();
+    await this._page.waitForTimeout(100);
+    if (edge) {
+      await this._page.mouse.move(handleBox.x + handleBox.width / 2 + 1, handleBox.y + handleBox.height / 2, {
+        steps: 1
+      });
+      await this._page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, {
+        steps: 4
+      });
+      await expect.poll(() => this._page.locator('[data-mosaic-container-state="active"]').count(), {
+        timeout: 2e3
+      }).toBeGreaterThan(0);
+      if (sourceHandle) {
+        await this._page.waitForFunction((el) => !el || !el.isConnected, sourceHandle, {
+          timeout: 2e3
+        });
+      }
+      const placeholderHandle = await this._adjacentPlaceholder(targetHandle, edge);
+      if (placeholderHandle) {
+        const phBox = await placeholderHandle.boundingBox();
+        if (phBox) {
+          const aimX = phBox.x + phBox.width / 2;
+          const aimY = phBox.y + Math.max(phBox.height / 2, 1);
+          await this._page.mouse.move(aimX, aimY, {
+            steps: 4
+          });
+          const isActive = () => placeholderHandle.evaluate((el) => el.getAttribute("data-mosaic-placeholder-state") === "active");
+          if (!await isActive()) {
+            const start = Date.now();
+            let nudge = 0;
+            while (Date.now() - start < 3e3) {
+              await this._page.waitForTimeout(100);
+              nudge = (nudge + 1) % 4;
+              const dx = nudge === 0 || nudge === 2 ? 1 : -1;
+              const dy = nudge === 1 || nudge === 2 ? 1 : -1;
+              await this._page.mouse.move(aimX + dx, aimY + dy, {
+                steps: 1
+              });
+              if (await isActive()) {
+                break;
+              }
+            }
+            await expect.poll(() => placeholderHandle.evaluate((el) => el.getAttribute("data-mosaic-placeholder-state")), {
+              timeout: 1e3
+            }).toBe("active");
+          }
+          const expanded = await placeholderHandle.boundingBox();
+          if (expanded) {
+            await this._page.mouse.move(expanded.x + expanded.width / 2, expanded.y + expanded.height / 2, {
+              steps: 2
+            });
+          }
+        }
+      }
+    } else {
       await this._page.mouse.move(offset.x + box.x + box.width / 2, offset.y + box.y + box.height / 2, {
         steps: 4
       });
       await this._page.waitForTimeout(100);
-      await this._page.mouse.up();
     }
+    await this._page.mouse.up();
   }
   /**
-  * Drag this item to a column's scroll bottom, hold to trigger auto-scroll,
-  * then wait for the drop target to become visible and drop on it.
+  * Find the placeholder element adjacent to `target` on the requested
+  * side via DOM walk. Returns `null` if the target has no matching
+  * sibling (e.g. when the caller passes a non-tile target).
+  */
+  async _adjacentPlaceholder(targetHandle, edge) {
+    const before = edge === "top" || edge === "left";
+    const result = await targetHandle.evaluateHandle((el, beforeArg) => {
+      let sibling = beforeArg ? el.previousElementSibling : el.nextElementSibling;
+      while (sibling && !sibling.hasAttribute("data-mosaic-placeholder-location")) {
+        sibling = beforeArg ? sibling.previousElementSibling : sibling.nextElementSibling;
+      }
+      return sibling;
+    }, before);
+    const handle = result.asElement();
+    if (!handle) {
+      return null;
+    }
+    const exists = await handle.evaluate((el) => el !== null);
+    return exists ? handle : null;
+  }
+  /**
+  * Drag this item to a column's scroll bottom, using auto-scroll when needed,
+  * then drop on the target item.
+  *
+  * When the target is already visible in the viewport (no scrolling needed), the
+  * item is dragged directly to the target. When the target is below the viewport,
+  * the mouse is held near the footer to trigger pragmatic auto-scroll until the
+  * target scrolls into view.
   *
   * @param holdTarget - The footer element; mouse is held ~20px above it to trigger auto-scroll.
-  * @param dropTarget - The element to drop on once it scrolls into view.
+  * @param dropTarget - The element to drop on.
   * @param dropOffset - Offset from the drop target center.
   */
   async dragToEndWithAutoScroll(holdTarget, dropTarget, dropOffset = {
@@ -106,9 +194,29 @@ var ItemManager = class {
     }
     const holdX = holdBox.x + holdBox.width / 2;
     const holdY = holdBox.y - 20;
+    const preDropBox = await dropTarget.boundingBox();
+    const needsScroll = !preDropBox || preDropBox.y >= holdBox.y;
     await handle.hover();
     await this._page.mouse.down();
     await this._page.waitForTimeout(100);
+    if (!needsScroll) {
+      await this._page.mouse.move(holdX, holdY, {
+        steps: 4
+      });
+      const dropBox = await dropTarget.boundingBox();
+      if (dropBox) {
+        const dropX = dropOffset.x + dropBox.x + dropBox.width / 2;
+        const dropY = dropOffset.y + dropBox.y + dropBox.height / 2;
+        await this._page.mouse.move(dropX, dropY, {
+          steps: 8
+        });
+        await this._page.waitForTimeout(200);
+        await this._page.mouse.up();
+        return;
+      }
+      await this._page.mouse.up();
+      return;
+    }
     await this._page.mouse.move(holdX, holdY, {
       steps: 4
     });

package/dist/lib/browser/playwright/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/playwright/board-manager.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport type { Locator, Page } from '@playwright/test';\n\nexport class BoardManager {\n  private readonly _page: Page;\n\n  constructor(readonly locator: Locator) {\n    this._page = locator.page();\n  }\n\n  columns(): Locator {\n    return this.locator.getByTestId('board-column');\n  }\n\n  column(index: number): ColumnManager {\n    return new ColumnManager(this.locator.getByTestId('board-column').nth(index));\n  }\n}\n\nexport class ColumnManager {\n  private readonly _page: Page;\n\n  constructor(readonly locator: Locator) {\n    this._page = locator.page();\n  }\n\n  items(): Locator {\n    return this.locator.getByTestId('board-item');\n  }\n\n  item(index: number): ItemManager {\n    return new ItemManager(this.locator.getByTestId('board-item').nth(index));\n  }\n\n  async addItem(): Promise<void> {\n    await this.locator.getByTestId('board-column-add-item').click();\n  }\n\n  header(): Locator {\n    return this.locator.getByTestId('board-column-header');\n  }\n\n  title(): Locator {\n    return this.locator.getByTestId('mosaicBoard.columnTitle');\n  }\n\n  async dragTo(target: Locator, offset = { x: 0, y: 0 }): Promise<void> {\n    const handle = this.header().getByTestId('mosaicBoard.columnDragHandle');\n    const handleBox = await handle.boundingBox();\n    if (!handleBox) {\n      return;\n    }\n\n    await handle.hover();\n    await this._page.mouse.down();\n    // Small initial movement to trigger the native drag start.\n    await this._page.mouse.move(handleBox.x + handleBox.width / 2 + 1, handleBox.y + handleBox.height / 2, {\n      steps: 1,\n    });\n    // Allow the drag monitor to register and the DOM to settle\n    // (the dragged column is removed from visible items, shifting remaining columns).\n    await this._page.waitForTimeout(200);\n    const box = await target.boundingBox();\n    if (box) {\n      await this._page.mouse.move(offset.x + box.x + box.width / 2, offset.y + box.y + box.height / 2, { steps: 4 });\n      // Allow the drop target to process the hover before releasing.\n      await this._page.waitForTimeout(100);\n      await this._page.mouse.up();\n    }\n  }\n}\n\nexport class ItemManager {\n  private readonly _page: Page;\n\n  constructor(readonly locator: Locator) {\n    this._page = locator.page();\n  }\n\n  title(): Locator {\n    return this.locator.getByTestId('mosaicBoard.cardTitle');\n  }\n\n  async dragTo(target: Locator, offset = { x: 0, y: 0 }): Promise<void> {\n    const handle = this.locator.getByTestId('mosaicBoard.cardDragHandle');\n    const box = await target.boundingBox();\n    if (box) {\n      await handle.hover();\n      await this._page.mouse.down();\n      // Allow the drag monitor to register the grab before moving.\n      await this._page.waitForTimeout(100);\n      await this._page.mouse.move(offset.x + box.x + box.width / 2, offset.y + box.y + box.height / 2, { steps: 4 });\n      // Allow the drop target to process the hover before releasing.\n      await this._page.waitForTimeout(100);\n      await this._page.mouse.up();\n    }\n  }\n\n  /**\n   * Drag this item to a column's scroll bottom, hold to trigger auto-scroll,\n   * then wait for the drop target to become visible and drop on it.\n   *\n   * @param holdTarget - The footer element; mouse is held ~20px above it to trigger auto-scroll.\n   * @param dropTarget - The element to drop on once it scrolls into view.\n   * @param dropOffset - Offset from the drop target center.\n   */\n  async dragToEndWithAutoScroll(holdTarget: Locator, dropTarget: Locator, dropOffset = { x: 0, y: 0 }): Promise<void> {\n    const handle = this.locator.getByTestId('mosaicBoard.cardDragHandle');\n    const holdBox = await holdTarget.boundingBox();\n    if (!holdBox) {\n      return;\n    }\n\n    // The hold position is ~20px above the footer to trigger pragmatic auto-scroll.\n    const holdX = holdBox.x + holdBox.width / 2;\n    const holdY = holdBox.y - 20;\n\n    await handle.hover();\n    await this._page.mouse.down();\n    // Allow the drag monitor to register the grab before moving.\n    await this._page.waitForTimeout(100);\n\n    // Move to hold position above the footer to trigger auto-scroll.\n    await this._page.mouse.move(holdX, holdY, { steps: 4 });\n\n    // Hold and nudge mouse periodically to keep auto-scroll active until drop target is visible.\n    for (let i = 0; i < 40; i++) {\n      // Wait between nudges to give auto-scroll time to advance.\n      await this._page.waitForTimeout(200);\n      // Small nudge to keep drag events firing (auto-scroll stalls without movement).\n      await this._page.mouse.move(holdX + (i % 2), holdY, { steps: 1 });\n\n      const dropBox = await dropTarget.boundingBox();\n      if (dropBox && dropBox.y + dropBox.height < holdY) {\n        // Drop target has scrolled into view. Re-read box so we use current position (scroll may have moved it).\n        const finalBox = await dropTarget.boundingBox();\n        if (!finalBox) {\n          await this._page.mouse.up();\n          return;\n        }\n\n        const dropX = dropOffset.x + finalBox.x + finalBox.width / 2;\n        const dropY = dropOffset.y + finalBox.y + finalBox.height / 2;\n        await this._page.mouse.move(dropX, dropY, { steps: 8 });\n        // Let drop target receive dragOver and settle (headless is faster; needs a moment to register).\n        await dropTarget.waitFor({ state: 'visible' });\n        await this._page.waitForTimeout(200);\n        await this._page.mouse.up();\n        return;\n      }\n    }\n\n    // Fallback: drop wherever we are.\n    await this._page.mouse.up();\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["BoardManager", "_page", "locator", "page", "columns", "getByTestId", "column", "index", "ColumnManager", "nth", "items", "item", "ItemManager", "addItem", "click", "header", "title", "dragTo", "target", "offset", "x", "y", "handle", "handleBox", "boundingBox", "hover", "mouse", "down", "move", "width", "height", "steps", "waitForTimeout", "box", "up", "dragToEndWithAutoScroll", "holdTarget", "dropTarget", "dropOffset", "holdBox", "holdX", "holdY", "i", "dropBox", "finalBox", "dropX", "dropY", "waitFor", "state"]
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Locator, type Page, expect } from '@playwright/test';\n\n/**\n * Edge of the target tile to drop on. Pragmatic-dnd assigns the closest edge\n * based on cursor position; a stale (pre-layout-shift) cursor can land in the\n * wrong half. When `dragTo` is called with an `edge`, the helper waits for the\n * target tile to register the drag, re-measures the target after the\n * placeholder has expanded, repositions the cursor near the requested edge,\n * and confirms via `data-mosaic-tile-edge` before releasing.\n */\nexport type DragEdge = 'top' | 'bottom' | 'left' | 'right';\n\nexport class BoardManager {\n  private readonly _page: Page;\n\n  constructor(readonly locator: Locator) {\n    this._page = locator.page();\n  }\n\n  columns(): Locator {\n    return this.locator.getByTestId('board-column');\n  }\n\n  column(index: number): ColumnManager {\n    return new ColumnManager(this.locator.getByTestId('board-column').nth(index));\n  }\n}\n\nexport class ColumnManager {\n  private readonly _page: Page;\n\n  constructor(readonly locator: Locator) {\n    this._page = locator.page();\n  }\n\n  items(): Locator {\n    return this.locator.getByTestId('board-item');\n  }\n\n  item(index: number): ItemManager {\n    return new ItemManager(this.locator.getByTestId('board-item').nth(index));\n  }\n\n  async addItem(): Promise<void> {\n    await this.locator.getByTestId('board-column-add-item').click();\n  }\n\n  header(): Locator {\n    return this.locator.getByTestId('board-column-header');\n  }\n\n  title(): Locator {\n    return this.locator.getByTestId('mosaicBoard.columnTitle');\n  }\n\n  async dragTo(target: Locator, offset = { x: 0, y: 0 }): Promise<void> {\n    const handle = this.header().getByTestId('mosaicBoard.columnDragHandle');\n    const handleBox = await handle.boundingBox();\n    if (!handleBox) {\n      return;\n    }\n\n    await handle.hover();\n    await this._page.mouse.down();\n    // Small initial movement to trigger the native drag start.\n    await this._page.mouse.move(handleBox.x + handleBox.width / 2 + 1, handleBox.y + handleBox.height / 2, {\n      steps: 1,\n    });\n    // Allow the drag monitor to register and the DOM to settle\n    // (the dragged column is removed from visible items, shifting remaining columns).\n    await this._page.waitForTimeout(200);\n    const box = await target.boundingBox();\n    if (box) {\n      await this._page.mouse.move(offset.x + box.x + box.width / 2, offset.y + box.y + box.height / 2, { steps: 4 });\n      // Allow the drop target to process the hover before releasing.\n      await this._page.waitForTimeout(100);\n      await this._page.mouse.up();\n    }\n  }\n}\n\nexport class ItemManager {\n  private readonly _page: Page;\n\n  constructor(readonly locator: Locator) {\n    this._page = locator.page();\n  }\n\n  title(): Locator {\n    return this.locator.getByTestId('mosaicBoard.cardTitle');\n  }\n\n  async dragTo(target: Locator, offset: { x: number; y: number } = { x: 0, y: 0 }, edge?: DragEdge): Promise<void> {\n    const handle = this.locator.getByTestId('mosaicBoard.cardDragHandle');\n    const handleBox = await handle.boundingBox();\n    if (!handleBox) {\n      return;\n    }\n\n    // Capture stable ElementHandles to source and target before the drag\n    // begins. Both `nth(N)` locators shift when `useVisibleItems` filters the\n    // source out of its column, so we need raw DOM references that survive\n    // the reconciliation.\n    const targetHandle = await target.elementHandle();\n    const box = targetHandle ? await targetHandle.boundingBox() : null;\n    if (!targetHandle || !box) {\n      return;\n    }\n    const sourceHandle = await this.locator.elementHandle();\n\n    await handle.hover();\n    await this._page.mouse.down();\n    // Allow the drag monitor to register the grab before moving.\n    await this._page.waitForTimeout(100);\n\n    if (edge) {\n      // Stage 1: trigger the dragstart. A 1-pixel nudge near the press\n      // point primes pragmatic-dnd's HTML5 dragstart, then a long move\n      // over the target tile commits the drag past every browser's\n      // \"click vs drag\" threshold.\n      await this._page.mouse.move(handleBox.x + handleBox.width / 2 + 1, handleBox.y + handleBox.height / 2, {\n        steps: 1,\n      });\n      await this._page.mouse.move(box.x + box.width / 2, box.y + box.height / 2, { steps: 4 });\n\n      // Wait for `data-mosaic-container-state=\"active\"` so we know the\n      // dragstart has been processed. This alone is *not* enough: pragmatic-\n      // dnd's `monitorForElements.onDragStart` (Root.tsx) and the\n      // `dropTargetForElements.onDragStart` (Container.tsx) write into\n      // independent React state, and only the latter drives the attribute.\n      // The former drives `useVisibleItems` filtering, which is what\n      // physically reflows the column. So we ALSO wait for the source tile\n      // to detach from the DOM — that's the unambiguous signal that the\n      // reflow has happened and any cached bbox is stale.\n      await expect\n        .poll(() => this._page.locator('[data-mosaic-container-state=\"active\"]').count(), { timeout: 2000 })\n        .toBeGreaterThan(0);\n      if (sourceHandle) {\n        await this._page.waitForFunction((el) => !el || !el.isConnected, sourceHandle, { timeout: 2000 });\n      }\n\n      // Stage 2: walk siblings on the (now reflowed) drag-time DOM and aim\n      // at the placeholder representing the requested edge. The Fragment\n      // keying on item id keeps the target tile's adjacent placeholder DOM\n      // node stable across reconciliation, but its `location` prop and bbox\n      // both change once the source is filtered out — measure after the\n      // reflow, never before.\n      const placeholderHandle = await this._adjacentPlaceholder(targetHandle, edge);\n      if (placeholderHandle) {\n        const phBox = await placeholderHandle.boundingBox();\n        if (phBox) {\n          const aimX = phBox.x + phBox.width / 2;\n          const aimY = phBox.y + Math.max(phBox.height / 2, 1);\n          await this._page.mouse.move(aimX, aimY, { steps: 4 });\n\n          // Some browser/CDP combinations need a follow-up nudge to push\n          // the dragOver event through — re-aim with a 1px offset and poll.\n          const isActive = () =>\n            placeholderHandle.evaluate((el) => el.getAttribute('data-mosaic-placeholder-state') === 'active');\n          if (!(await isActive())) {\n            const start = Date.now();\n            let nudge = 0;\n            while (Date.now() - start < 3000) {\n              await this._page.waitForTimeout(100);\n              nudge = (nudge + 1) % 4;\n              const dx = nudge === 0 || nudge === 2 ? 1 : -1;\n              const dy = nudge === 1 || nudge === 2 ? 1 : -1;\n              await this._page.mouse.move(aimX + dx, aimY + dy, { steps: 1 });\n              if (await isActive()) {\n                break;\n              }\n            }\n            await expect\n              .poll(() => placeholderHandle.evaluate((el) => el.getAttribute('data-mosaic-placeholder-state')), {\n                timeout: 1000,\n              })\n              .toBe('active');\n          }\n\n          // Re-centre on the now-expanded placeholder so the drop lands\n          // solidly inside it.\n          const expanded = await placeholderHandle.boundingBox();\n          if (expanded) {\n            await this._page.mouse.move(expanded.x + expanded.width / 2, expanded.y + expanded.height / 2, {\n              steps: 2,\n            });\n          }\n        }\n      }\n    } else {\n      // Legacy path: no explicit edge — rely on the offset placement and a\n      // small settle delay before releasing.\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.waitForTimeout(100);\n    }\n    await this._page.mouse.up();\n  }\n\n  /**\n   * Find the placeholder element adjacent to `target` on the requested\n   * side via DOM walk. Returns `null` if the target has no matching\n   * sibling (e.g. when the caller passes a non-tile target).\n   */\n  private async _adjacentPlaceholder(\n    targetHandle: import('@playwright/test').ElementHandle<Element | SVGElement | HTMLElement>,\n    edge: DragEdge,\n  ): Promise<import('@playwright/test').ElementHandle<HTMLElement> | null> {\n    const before = edge === 'top' || edge === 'left';\n    const result = await targetHandle.evaluateHandle((el, beforeArg) => {\n      let sibling: Element | null = beforeArg ? el.previousElementSibling : el.nextElementSibling;\n      while (sibling && !sibling.hasAttribute('data-mosaic-placeholder-location')) {\n        sibling = beforeArg ? sibling.previousElementSibling : sibling.nextElementSibling;\n      }\n      return sibling as HTMLElement | null;\n    }, before);\n    const handle = result.asElement() as import('@playwright/test').ElementHandle<HTMLElement> | null;\n    if (!handle) {\n      return null;\n    }\n    // `evaluateHandle` returning `null` still produces a non-null JSHandle —\n    // verify the underlying element actually exists.\n    const exists = await handle.evaluate((el) => el !== null);\n    return exists ? handle : null;\n  }\n\n  /**\n   * Drag this item to a column's scroll bottom, using auto-scroll when needed,\n   * then drop on the target item.\n   *\n   * When the target is already visible in the viewport (no scrolling needed), the\n   * item is dragged directly to the target. When the target is below the viewport,\n   * the mouse is held near the footer to trigger pragmatic auto-scroll until the\n   * target scrolls into view.\n   *\n   * @param holdTarget - The footer element; mouse is held ~20px above it to trigger auto-scroll.\n   * @param dropTarget - The element to drop on.\n   * @param dropOffset - Offset from the drop target center.\n   */\n  async dragToEndWithAutoScroll(holdTarget: Locator, dropTarget: Locator, dropOffset = { x: 0, y: 0 }): Promise<void> {\n    const handle = this.locator.getByTestId('mosaicBoard.cardDragHandle');\n    const holdBox = await holdTarget.boundingBox();\n    if (!holdBox) {\n      return;\n    }\n\n    // The hold position is ~20px above the footer to trigger pragmatic auto-scroll.\n    const holdX = holdBox.x + holdBox.width / 2;\n    const holdY = holdBox.y - 20;\n\n    // Check if drop target is already visible before starting the drag.\n    // Items may fit in the viewport without scrolling, in which case auto-scroll\n    // is not needed and the loop's exit condition would never be satisfied.\n    const preDropBox = await dropTarget.boundingBox();\n    const needsScroll = !preDropBox || preDropBox.y >= holdBox.y;\n\n    await handle.hover();\n    await this._page.mouse.down();\n    // Allow the drag monitor to register the grab before moving.\n    await this._page.waitForTimeout(100);\n\n    if (!needsScroll) {\n      // Target is already visible — drag directly without auto-scroll.\n      await this._page.mouse.move(holdX, holdY, { steps: 4 });\n      const dropBox = await dropTarget.boundingBox();\n      if (dropBox) {\n        const dropX = dropOffset.x + dropBox.x + dropBox.width / 2;\n        const dropY = dropOffset.y + dropBox.y + dropBox.height / 2;\n        await this._page.mouse.move(dropX, dropY, { steps: 8 });\n        await this._page.waitForTimeout(200);\n        await this._page.mouse.up();\n        return;\n      }\n      await this._page.mouse.up();\n      return;\n    }\n\n    // Move to hold position above the footer to trigger auto-scroll.\n    await this._page.mouse.move(holdX, holdY, { steps: 4 });\n\n    // Hold and nudge mouse periodically to keep auto-scroll active until drop target is visible.\n    for (let i = 0; i < 40; i++) {\n      // Wait between nudges to give auto-scroll time to advance.\n      await this._page.waitForTimeout(200);\n      // Small nudge to keep drag events firing (auto-scroll stalls without movement).\n      await this._page.mouse.move(holdX + (i % 2), holdY, { steps: 1 });\n\n      const dropBox = await dropTarget.boundingBox();\n      if (dropBox && dropBox.y + dropBox.height < holdY) {\n        // Drop target has scrolled into view. Re-read box so we use current position (scroll may have moved it).\n        const finalBox = await dropTarget.boundingBox();\n        if (!finalBox) {\n          await this._page.mouse.up();\n          return;\n        }\n\n        const dropX = dropOffset.x + finalBox.x + finalBox.width / 2;\n        const dropY = dropOffset.y + finalBox.y + finalBox.height / 2;\n        await this._page.mouse.move(dropX, dropY, { steps: 8 });\n        // Let drop target receive dragOver and settle (headless is faster; needs a moment to register).\n        await dropTarget.waitFor({ state: 'visible' });\n        await this._page.waitForTimeout(200);\n        await this._page.mouse.up();\n        return;\n      }\n    }\n\n    // Fallback: drop wherever we are.\n    await this._page.mouse.up();\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["expect", "BoardManager", "_page", "locator", "page", "columns", "getByTestId", "column", "index", "ColumnManager", "nth", "items", "item", "ItemManager", "addItem", "click", "header", "title", "dragTo", "target", "offset", "x", "y", "handle", "handleBox", "boundingBox", "hover", "mouse", "down", "move", "width", "height", "steps", "waitForTimeout", "box", "up", "edge", "targetHandle", "elementHandle", "sourceHandle", "poll", "count", "timeout", "toBeGreaterThan", "waitForFunction", "el", "isConnected", "placeholderHandle", "_adjacentPlaceholder", "phBox", "aimX", "aimY", "Math", "max", "isActive", "evaluate", "getAttribute", "start", "Date", "now", "nudge", "dx", "dy", "toBe", "expanded", "before", "result", "evaluateHandle", "beforeArg", "sibling", "previousElementSibling", "nextElementSibling", "hasAttribute", "asElement", "exists", "dragToEndWithAutoScroll", "holdTarget", "dropTarget", "dropOffset", "holdBox", "holdX", "holdY", "preDropBox", "needsScroll", "dropBox", "dropX", "dropY", "i", "finalBox", "waitFor", "state"]
 }

package/dist/lib/browser/testing/index.mjs

@@ -1,7 +1,7 @@
 import {
   Focus,
   Mosaic
-} from "../chunk-33NNDFD6.mjs";
+} from "../chunk-I3M5WM6C.mjs";
 
 // src/testing/decorator.tsx
 import React from "react";
@@ -11,24 +11,18 @@ var withMosaic = () => {
 
 // src/testing/types.ts
 import * as Schema from "effect/Schema";
-import { Ref, Type } from "@dxos/echo";
-import { ObjectId } from "@dxos/keys";
+import { DXN, Ref, Type } from "@dxos/echo";
+import { EntityId } from "@dxos/keys";
 var TestItem = Schema.Struct({
   name: Schema.String,
   description: Schema.optional(Schema.String),
   label: Schema.optional(Schema.String)
-}).pipe(Type.object({
-  typename: "com.example.type.item",
-  version: "0.1.0"
-}));
+}).pipe(Type.makeObject(DXN.make("com.example.type.item", "0.1.0")));
 var TestColumn = Schema.Struct({
-  id: ObjectId,
+  id: EntityId,
   name: Schema.String,
   items: Schema.mutable(Schema.Array(Ref.Ref(TestItem)))
-}).pipe(Type.object({
-  typename: "com.example.type.column",
-  version: "0.1.0"
-}));
+}).pipe(Type.makeObject(DXN.make("com.example.type.column", "0.1.0")));
 
 // src/testing/CardContainer.tsx
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
@@ -41,7 +35,6 @@ var CardContainer = ({ children, role, icon = "ph--arrow-line-down--regular" })
   switch (role) {
     case "popover":
       return /* @__PURE__ */ React2.createElement("div", {
-        role: "none",
         className: "flex justify-center"
       }, /* @__PURE__ */ React2.createElement(PopoverCardContainer, {
         icon
@@ -71,12 +64,10 @@ var IntrinsicCardContainer = ({ children, defaultSize, size: propSize, onSizeCha
     onChange: onSizeChange
   });
   return /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
     className: "relative p-2 grid overflow-hidden border-2 border-dashed border-green-500 rounded-lg",
     style: sizeStyle(size, "horizontal"),
     ...resizeAttributes
   }, /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
     className: "dx-container flex flex-col"
   }, children), /* @__PURE__ */ React2.createElement(ResizeHandle, {
     side: "inline-end",
@@ -92,14 +83,14 @@ import React3, { useMemo, useRef, useState } from "react";
 import { Obj } from "@dxos/echo";
 import { Card, Toolbar } from "@dxos/react-ui";
 import { Menu, createMenuAction } from "@dxos/react-ui-menu";
-import { Json } from "@dxos/react-ui-syntax-highlighter";
+import { JsonHighlighter } from "@dxos/react-ui-syntax-highlighter";
 var DefaultStackTile = (props) => {
   const dragHandleRef = useRef(null);
   const [open, setOpen] = useState(false);
   const menuItems = useMemo(() => [
     createMenuAction("toggle-details", () => setOpen((prev) => !prev), {
       label: open ? "Hide details" : "Show details",
-      icon: "ph--placeholder--regular"
+      icon: "ph--circle-dashed--regular"
     })
   ], [
     open
@@ -111,7 +102,7 @@ var DefaultStackTile = (props) => {
     asChild: true
   }, /* @__PURE__ */ React3.createElement(Card.Root, {
     className: "dx-current dx-hover"
-  }, /* @__PURE__ */ React3.createElement(Card.Toolbar, null, /* @__PURE__ */ React3.createElement(Card.DragHandle, {
+  }, /* @__PURE__ */ React3.createElement(Card.Header, null, /* @__PURE__ */ React3.createElement(Card.DragHandle, {
     ref: dragHandleRef
   }), /* @__PURE__ */ React3.createElement(Card.Title, null, Obj.getLabel(props.data) ?? props.data.id), /* @__PURE__ */ React3.createElement(Menu.Trigger, {
     asChild: true,
@@ -123,7 +114,7 @@ var DefaultStackTile = (props) => {
     label: "Menu"
   })), /* @__PURE__ */ React3.createElement(Menu.Content, {
     items: menuItems
-  })), open && /* @__PURE__ */ React3.createElement(Card.Row, null, /* @__PURE__ */ React3.createElement(Json.Data, {
+  })), open && /* @__PURE__ */ React3.createElement(Card.Row, null, /* @__PURE__ */ React3.createElement(JsonHighlighter, {
     data: props.data,
     classNames: "text-xs"
   }))))));

package/dist/lib/browser/testing/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/testing/decorator.tsx", "../../../../src/testing/types.ts", "../../../../src/testing/CardContainer.tsx", "../../../../src/testing/DefaultStackTile.tsx"],
-  "sourcesContent": ["//\n// Copyright 2026 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react-vite';\nimport React from 'react';\n\nimport { Mosaic } from '../components';\n\nexport const withMosaic = (): Decorator => {\n  return (Story) => (\n    <Mosaic.Root>\n      <Story />\n    </Mosaic.Root>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { Ref, Type } from '@dxos/echo';\nimport { ObjectId } from '@dxos/keys';\n\n//\n// Test Data\n//\n\nexport const TestItem = Schema.Struct({\n  name: Schema.String,\n  description: Schema.optional(Schema.String),\n  label: Schema.optional(Schema.String),\n}).pipe(\n  Type.object({\n    typename: 'com.example.type.item',\n    version: '0.1.0',\n  }),\n);\n\nexport interface TestItem extends Schema.Schema.Type<typeof TestItem> {}\n\nexport const TestColumn = Schema.Struct({\n  id: ObjectId,\n  name: Schema.String,\n  items: Schema.mutable(Schema.Array(Ref.Ref(TestItem))),\n}).pipe(\n  Type.object({\n    typename: 'com.example.type.column',\n    version: '0.1.0',\n  }),\n);\n\nexport interface TestColumn extends Schema.Schema.Type<typeof TestColumn> {}\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { Icon, Popover } from '@dxos/react-ui';\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\nconst DEFAULT_BLOCK_SIZE = 22;\nconst MIN_BLOCK_SIZE = 8;\n\n//\n// Card container.\n//\n\nexport type CardContainerProps = PropsWithChildren<{ role?: 'popover' | 'intrinsic'; icon?: string }>;\n\nexport const CardContainer = ({ children, role, icon = 'ph--arrow-line-down--regular' }: CardContainerProps) => {\n  switch (role) {\n    case 'popover':\n      return (\n        <div role='none' className='flex justify-center'>\n          <PopoverCardContainer icon={icon}>{children}</PopoverCardContainer>\n        </div>\n      );\n    case 'intrinsic':\n    default:\n      return <IntrinsicCardContainer>{children}</IntrinsicCardContainer>;\n  }\n};\n\n//\n// Popover\n//\n\nexport type PopoverCardContainerProps = PropsWithChildren<{ icon?: string }>;\n\nexport const PopoverCardContainer = ({\n  children,\n  icon = 'ph--arrow-line-down--regular',\n}: PopoverCardContainerProps) => {\n  return (\n    <Popover.Root open>\n      <Popover.Trigger asChild>\n        <Icon icon={icon} />\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content onOpenAutoFocus={(event: Event) => event.preventDefault()}>\n          <Popover.Viewport classNames='dx-card-popover'>{children}</Popover.Viewport>\n          <Popover.Arrow />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n\n//\n// Intrinsic card container (size constrained by card itself).\n//\n\nexport type IntrinsicCardContainerProps = PropsWithChildren<{\n  defaultSize?: Size;\n  size?: Size;\n  onSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const IntrinsicCardContainer = ({\n  children,\n  defaultSize,\n  size: propSize,\n  onSizeChange,\n}: IntrinsicCardContainerProps) => {\n  const [size = DEFAULT_BLOCK_SIZE, setSize] = useControllableState<Size>({\n    prop: propSize,\n    defaultProp: defaultSize,\n    onChange: onSizeChange,\n  });\n\n  return (\n    <div\n      role='none'\n      className='relative p-2 grid overflow-hidden border-2 border-dashed border-green-500 rounded-lg'\n      style={sizeStyle(size, 'horizontal')}\n      {...resizeAttributes}\n    >\n      <div role='none' className='dx-container flex flex-col'>\n        {children}\n      </div>\n      <ResizeHandle\n        side='inline-end'\n        fallbackSize={DEFAULT_BLOCK_SIZE}\n        minSize={MIN_BLOCK_SIZE}\n        size={size}\n        onSizeChange={setSize}\n      />\n    </div>\n  );\n};\n", "//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { useMemo, useRef, useState } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { Card, Toolbar } from '@dxos/react-ui';\nimport { Menu, createMenuAction } from '@dxos/react-ui-menu';\nimport { Json } from '@dxos/react-ui-syntax-highlighter';\n\nimport { Focus, Mosaic, type MosaicStackTileComponent } from '../components';\n\nexport const DefaultStackTile: MosaicStackTileComponent<Obj.Any> = (props) => {\n  const dragHandleRef = useRef<HTMLButtonElement>(null);\n  const [open, setOpen] = useState(false);\n  const menuItems = useMemo(\n    () => [\n      createMenuAction('toggle-details', () => setOpen((prev) => !prev), {\n        label: open ? 'Hide details' : 'Show details',\n        icon: 'ph--placeholder--regular',\n      }),\n    ],\n    [open],\n  );\n\n  return (\n    <Menu.Root>\n      <Mosaic.Tile {...props} asChild>\n        <Focus.Item asChild>\n          <Card.Root className='dx-current dx-hover'>\n            <Card.Toolbar>\n              <Card.DragHandle ref={dragHandleRef} />\n              <Card.Title>{Obj.getLabel(props.data) ?? props.data.id}</Card.Title>\n              <Menu.Trigger asChild disabled={!menuItems?.length}>\n                <Toolbar.IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Menu' />\n              </Menu.Trigger>\n              <Menu.Content items={menuItems} />\n            </Card.Toolbar>\n            {open && (\n              <Card.Row>\n                <Json.Data data={props.data} classNames='text-xs' />\n              </Card.Row>\n            )}\n          </Card.Root>\n        </Focus.Item>\n      </Mosaic.Tile>\n    </Menu.Root>\n  );\n};\n\nDefaultStackTile.displayName = 'DefaultStackTile';\n"],
-  "mappings": "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",
-  "names": ["React", "withMosaic", "Story", "Mosaic", "Root", "Schema", "Ref", "Type", "ObjectId", "TestItem", "Struct", "name", "String", "description", "optional", "label", "pipe", "Type", "object", "typename", "version", "TestColumn", "id", "ObjectId", "items", "mutable", "Array", "Ref", "useControllableState", "React", "Icon", "Popover", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_BLOCK_SIZE", "MIN_BLOCK_SIZE", "CardContainer", "children", "role", "icon", "React", "div", "className", "PopoverCardContainer", "IntrinsicCardContainer", "Popover", "Root", "open", "Trigger", "asChild", "Icon", "Portal", "Content", "onOpenAutoFocus", "event", "preventDefault", "Viewport", "classNames", "Arrow", "defaultSize", "size", "propSize", "onSizeChange", "setSize", "useControllableState", "prop", "defaultProp", "onChange", "style", "sizeStyle", "resizeAttributes", "ResizeHandle", "side", "fallbackSize", "minSize", "React", "useMemo", "useRef", "useState", "Obj", "Card", "Toolbar", "Menu", "createMenuAction", "Json", "DefaultStackTile", "props", "dragHandleRef", "useRef", "open", "setOpen", "useState", "menuItems", "useMemo", "createMenuAction", "prev", "label", "icon", "React", "Menu", "Root", "Mosaic", "Tile", "asChild", "Focus", "Item", "Card", "className", "Toolbar", "DragHandle", "ref", "Title", "Obj", "getLabel", "data", "id", "Trigger", "disabled", "length", "IconButton", "iconOnly", "variant", "Content", "items", "Row", "Json", "Data", "classNames", "displayName"]
+  "sourcesContent": ["//\n// Copyright 2026 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react-vite';\nimport React from 'react';\n\nimport { Mosaic } from '../components';\n\nexport const withMosaic = (): Decorator => {\n  return (Story) => (\n    <Mosaic.Root>\n      <Story />\n    </Mosaic.Root>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { DXN, Ref, Type } from '@dxos/echo';\nimport { EntityId } from '@dxos/keys';\n\n//\n// Test Data\n//\n\nexport const TestItem = Schema.Struct({\n  name: Schema.String,\n  description: Schema.optional(Schema.String),\n  label: Schema.optional(Schema.String),\n}).pipe(Type.makeObject(DXN.make('com.example.type.item', '0.1.0')));\n\nexport type TestItem = Type.InstanceType<typeof TestItem>;\n\nexport const TestColumn = Schema.Struct({\n  id: EntityId,\n  name: Schema.String,\n  items: Schema.mutable(Schema.Array(Ref.Ref(TestItem))),\n}).pipe(Type.makeObject(DXN.make('com.example.type.column', '0.1.0')));\n\nexport type TestColumn = Type.InstanceType<typeof TestColumn>;\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { Icon, Popover } from '@dxos/react-ui';\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\nconst DEFAULT_BLOCK_SIZE = 22;\nconst MIN_BLOCK_SIZE = 8;\n\n//\n// Card container.\n//\n\nexport type CardContainerProps = PropsWithChildren<{ role?: 'popover' | 'intrinsic'; icon?: string }>;\n\nexport const CardContainer = ({ children, role, icon = 'ph--arrow-line-down--regular' }: CardContainerProps) => {\n  switch (role) {\n    case 'popover':\n      return (\n        <div className='flex justify-center'>\n          <PopoverCardContainer icon={icon}>{children}</PopoverCardContainer>\n        </div>\n      );\n    case 'intrinsic':\n    default:\n      return <IntrinsicCardContainer>{children}</IntrinsicCardContainer>;\n  }\n};\n\n//\n// Popover\n//\n\nexport type PopoverCardContainerProps = PropsWithChildren<{ icon?: string }>;\n\nexport const PopoverCardContainer = ({\n  children,\n  icon = 'ph--arrow-line-down--regular',\n}: PopoverCardContainerProps) => {\n  return (\n    <Popover.Root open>\n      <Popover.Trigger asChild>\n        <Icon icon={icon} />\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content onOpenAutoFocus={(event: Event) => event.preventDefault()}>\n          <Popover.Viewport classNames='dx-card-popover'>{children}</Popover.Viewport>\n          <Popover.Arrow />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n\n//\n// Intrinsic card container (size constrained by card itself).\n//\n\nexport type IntrinsicCardContainerProps = PropsWithChildren<{\n  defaultSize?: Size;\n  size?: Size;\n  onSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const IntrinsicCardContainer = ({\n  children,\n  defaultSize,\n  size: propSize,\n  onSizeChange,\n}: IntrinsicCardContainerProps) => {\n  const [size = DEFAULT_BLOCK_SIZE, setSize] = useControllableState<Size>({\n    prop: propSize,\n    defaultProp: defaultSize,\n    onChange: onSizeChange,\n  });\n\n  return (\n    <div\n      className='relative p-2 grid overflow-hidden border-2 border-dashed border-green-500 rounded-lg'\n      style={sizeStyle(size, 'horizontal')}\n      {...resizeAttributes}\n    >\n      <div className='dx-container flex flex-col'>{children}</div>\n      <ResizeHandle\n        side='inline-end'\n        fallbackSize={DEFAULT_BLOCK_SIZE}\n        minSize={MIN_BLOCK_SIZE}\n        size={size}\n        onSizeChange={setSize}\n      />\n    </div>\n  );\n};\n", "//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { useMemo, useRef, useState } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { Card, Toolbar } from '@dxos/react-ui';\nimport { Menu, createMenuAction } from '@dxos/react-ui-menu';\nimport { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';\n\nimport { Focus, Mosaic, type MosaicStackTileComponent } from '../components';\n\nexport const DefaultStackTile: MosaicStackTileComponent<Obj.Any> = (props) => {\n  const dragHandleRef = useRef<HTMLButtonElement>(null);\n  const [open, setOpen] = useState(false);\n  const menuItems = useMemo(\n    () => [\n      createMenuAction('toggle-details', () => setOpen((prev) => !prev), {\n        label: open ? 'Hide details' : 'Show details',\n        icon: 'ph--circle-dashed--regular',\n      }),\n    ],\n    [open],\n  );\n\n  return (\n    <Menu.Root>\n      {/*\n       * `Mosaic.Tile` sets `aria-current` from `props.current`, which the\n       * Slot composition propagates down to `Card.Root`'s div. That's what\n       * makes `dx-current` (an `aria-[current=true]:` utility) actually\n       * fire here. See `ui-theme/src/css/components/selected.md`.\n       */}\n      <Mosaic.Tile {...props} asChild>\n        <Focus.Item asChild>\n          <Card.Root className='dx-current dx-hover'>\n            <Card.Header>\n              <Card.DragHandle ref={dragHandleRef} />\n              <Card.Title>{Obj.getLabel(props.data) ?? props.data.id}</Card.Title>\n              <Menu.Trigger asChild disabled={!menuItems?.length}>\n                <Toolbar.IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Menu' />\n              </Menu.Trigger>\n              <Menu.Content items={menuItems} />\n            </Card.Header>\n            {open && (\n              <Card.Row>\n                <JsonHighlighter data={props.data} classNames='text-xs' />\n              </Card.Row>\n            )}\n          </Card.Root>\n        </Focus.Item>\n      </Mosaic.Tile>\n    </Menu.Root>\n  );\n};\n\nDefaultStackTile.displayName = 'DefaultStackTile';\n"],
+  "mappings": "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",
+  "names": ["React", "withMosaic", "Story", "Mosaic", "Root", "Schema", "DXN", "Ref", "Type", "EntityId", "TestItem", "Struct", "name", "String", "description", "optional", "label", "pipe", "makeObject", "make", "TestColumn", "id", "items", "mutable", "Array", "useControllableState", "React", "Icon", "Popover", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_BLOCK_SIZE", "MIN_BLOCK_SIZE", "CardContainer", "children", "role", "icon", "div", "className", "PopoverCardContainer", "IntrinsicCardContainer", "Root", "open", "Trigger", "asChild", "Portal", "Content", "onOpenAutoFocus", "event", "preventDefault", "Viewport", "classNames", "Arrow", "defaultSize", "size", "propSize", "onSizeChange", "setSize", "prop", "defaultProp", "onChange", "style", "side", "fallbackSize", "minSize", "React", "useMemo", "useRef", "useState", "Obj", "Card", "Toolbar", "Menu", "createMenuAction", "JsonHighlighter", "DefaultStackTile", "props", "dragHandleRef", "useRef", "open", "setOpen", "useState", "menuItems", "useMemo", "createMenuAction", "prev", "label", "icon", "React", "Menu", "Root", "Mosaic", "Tile", "asChild", "Focus", "Item", "Card", "className", "Header", "DragHandle", "ref", "Title", "Obj", "getLabel", "data", "id", "Trigger", "disabled", "length", "Toolbar", "IconButton", "iconOnly", "variant", "Content", "items", "Row", "JsonHighlighter", "classNames", "displayName"]
 }

package/dist/lib/browser/translations.mjs

@@ -0,0 +1,18 @@
+// src/translations.ts
+var translationKey = "@dxos/react-ui-mosaic";
+var translations = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "action-menu.label": "Actions",
+        "add-item.label": "Add item",
+        "delete-menu.label": "Delete"
+      }
+    }
+  }
+];
+export {
+  translationKey,
+  translations
+};
+//# sourceMappingURL=translations.mjs.map

package/dist/lib/browser/translations.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/translations.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = '@dxos/react-ui-mosaic';\n\nexport const translations = [\n  {\n    'en-US': {\n      [translationKey]: {\n        'action-menu.label': 'Actions',\n        'add-item.label': 'Add item',\n        'delete-menu.label': 'Delete',\n      },\n    },\n  },\n] as const satisfies Resource[];\n"],
+  "mappings": ";AAMO,IAAMA,iBAAiB;AAEvB,IAAMC,eAAe;EAC1B;IACE,SAAS;MACP,CAACD,cAAAA,GAAiB;QAChB,qBAAqB;QACrB,kBAAkB;QAClB,qBAAqB;MACvB;IACF;EACF;;",
+  "names": ["translationKey", "translations"]
+}