@cloudscape-design/board-components 3.0.31 → 3.0.33

package/board/interfaces.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { InteractionType, Operation } from "../internal/dnd-controller/controller";
 import { BoardItemDefinition, BoardItemDefinitionBase, DataFallbackType, Direction, GridLayout, GridLayoutItem, ItemId, Rect } from "../internal/interfaces";
+import { LayoutEngine } from "../internal/layout-engine/engine";
 import { LayoutShift } from "../internal/layout-engine/interfaces";
 import { NonCancelableEventHandler } from "../internal/utils/events";
 import { Position } from "../internal/utils/position";
@@ -127,6 +128,7 @@ export interface Transition<D> {
     operation: Operation;
     interactionType: InteractionType;
     itemsLayout: GridLayout;
+    layoutEngine: LayoutEngine;
     insertionDirection: null | Direction;
     draggableItem: BoardItemDefinitionBase<D>;
     draggableRect: Rect;

package/board/internal.js

@@ -10,7 +10,6 @@ import { useDragSubscription } from "../internal/dnd-controller/controller";
 import { useGlobalDragStateStyles } from "../internal/global-drag-state-styles";
 import Grid from "../internal/grid";
 import { ItemContainer } from "../internal/item-container";
-import { LayoutEngine } from "../internal/layout-engine/engine";
 import LiveRegion from "../internal/live-region";
 import { ScreenReaderGridNavigation } from "../internal/screenreader-grid-navigation";
 import { createPlaceholdersLayout, getDefaultColumnSpan, getDefaultRowSpan, getMinColumnSpan, getMinRowSpan, interpretItems, } from "../internal/utils/layout";
@@ -72,9 +71,10 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
             const removedItemIndex = items.findIndex((it) => it.id === removeTransition.removedItem.id);
             const nextIndexToFocus = removedItemIndex !== items.length - 1 ? removedItemIndex : items.length - 2;
             focusNextRenderIndexRef.current = nextIndexToFocus;
+            onItemsChange(createItemsChangeEvent(items, removeTransition.layoutShift));
         }, TRANSITION_DURATION_MS);
         return () => clearTimeout(timeoutId);
-    }, [removeTransition, items]);
+    }, [removeTransition, items, onItemsChange]);
     const rows = selectTransitionRows(transitionState) || itemsLayout.rows;
     const placeholdersLayout = createPlaceholdersLayout(rows, itemsLayout.columns);
     function isElementOverBoard(rect) {
@@ -148,8 +148,6 @@ export function InternalBoard({ items, renderItem, onItemsChange, empty, i18nStr
     });
     const removeItemAction = (removedItem) => {
         dispatch({ type: "init-remove", items, itemsLayout, removedItem });
-        const layoutShift = new LayoutEngine(itemsLayout).remove(removedItem.id).getLayoutShift();
-        onItemsChange(createItemsChangeEvent(items, layoutShift));
     };
     function focusItem(itemId) {
         itemContainerRef.current[itemId].focusDragHandle();

package/board/styles.css.js

@@ -1,10 +1,10 @@
 
     import './styles.scoped.css';
     export default {
-  "placeholder": "awsui_placeholder_1h7dk_1yaxu_1",
-  "placeholder--active": "awsui_placeholder--active_1h7dk_1yaxu_5",
-  "placeholder--hover": "awsui_placeholder--hover_1h7dk_1yaxu_8",
-  "root": "awsui_root_1h7dk_1yaxu_12",
-  "empty": "awsui_empty_1h7dk_1yaxu_16"
+  "placeholder": "awsui_placeholder_1h7dk_inx8o_1",
+  "placeholder--active": "awsui_placeholder--active_1h7dk_inx8o_5",
+  "placeholder--hover": "awsui_placeholder--hover_1h7dk_inx8o_8",
+  "root": "awsui_root_1h7dk_inx8o_12",
+  "empty": "awsui_empty_1h7dk_inx8o_16"
 };
   

package/board/styles.scoped.css

@@ -1,23 +1,23 @@
-.awsui_placeholder_1h7dk_1yaxu_1:not(#\9) {
-  border-radius: var(--border-radius-container-pmtq2d, 16px);
+.awsui_placeholder_1h7dk_inx8o_1:not(#\9) {
+  border-radius: var(--border-radius-container-wqv1zi, 16px);
   height: 100%;
 }
-.awsui_placeholder--active_1h7dk_1yaxu_5:not(#\9) {
-  background-color: var(--color-board-placeholder-active-kxfgmn, #e9ebed);
+.awsui_placeholder--active_1h7dk_inx8o_5:not(#\9) {
+  background-color: var(--color-board-placeholder-active-jh49z8, #e9ebed);
 }
-.awsui_placeholder--hover_1h7dk_1yaxu_8:not(#\9) {
-  background-color: var(--color-board-placeholder-hover-8tcom5, #d3e7f9);
+.awsui_placeholder--hover_1h7dk_inx8o_8:not(#\9) {
+  background-color: var(--color-board-placeholder-hover-ombmcs, #d3e7f9);
 }
 
-.awsui_root_1h7dk_1yaxu_12:not(#\9) {
+.awsui_root_1h7dk_inx8o_12:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_empty_1h7dk_1yaxu_16:not(#\9) {
+.awsui_empty_1h7dk_inx8o_16:not(#\9) {
   box-sizing: border-box;
   width: 100%;
-  padding: var(--space-scaled-m-gxhdpl, 16px) var(--space-scaled-l-2rs0gk, 20px) var(--space-scaled-l-2rs0gk, 20px);
-  color: var(--color-text-empty-v5xueo, #5f6b7a);
+  padding: var(--space-scaled-m-mo5yse, 16px) var(--space-scaled-l-0hpmd7, 20px) var(--space-scaled-l-0hpmd7, 20px);
+  color: var(--color-text-empty-2wfcyr, #5f6b7a);
   display: flex;
   justify-content: center;
 }

package/board/styles.selectors.js

@@ -2,10 +2,10 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "placeholder": "awsui_placeholder_1h7dk_1yaxu_1",
-  "placeholder--active": "awsui_placeholder--active_1h7dk_1yaxu_5",
-  "placeholder--hover": "awsui_placeholder--hover_1h7dk_1yaxu_8",
-  "root": "awsui_root_1h7dk_1yaxu_12",
-  "empty": "awsui_empty_1h7dk_1yaxu_16"
+  "placeholder": "awsui_placeholder_1h7dk_inx8o_1",
+  "placeholder--active": "awsui_placeholder--active_1h7dk_inx8o_5",
+  "placeholder--hover": "awsui_placeholder--hover_1h7dk_inx8o_8",
+  "root": "awsui_root_1h7dk_inx8o_12",
+  "empty": "awsui_empty_1h7dk_inx8o_16"
 };
   

package/board/transition.js

@@ -38,6 +38,7 @@ function initTransition({ operation, interactionType, itemsLayout, draggableItem
         operation,
         interactionType,
         itemsLayout,
+        layoutEngine: new LayoutEngine(itemsLayout),
         insertionDirection: null,
         draggableItem,
         draggableRect,
@@ -67,7 +68,7 @@ function initTransition({ operation, interactionType, itemsLayout, draggableItem
     };
 }
 function initRemoveTransition({ items, removedItem, itemsLayout }) {
-    const layoutShift = new LayoutEngine(itemsLayout).remove(removedItem.id).refloat().getLayoutShift();
+    const layoutShift = new LayoutEngine(itemsLayout).remove(removedItem.id);
     const removeTransition = { items, removedItem, layoutShift };
     return { transition: null, removeTransition, announcement: null };
 }

package/board/utils/layout.js

@@ -1,6 +1,5 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { LayoutEngine } from "../../internal/layout-engine/engine";
 import { createPlaceholdersLayout, getDefaultColumnSpan, getDefaultRowSpan } from "../../internal/utils/layout";
 import { normalizeInsertionPath } from "./path";
 export function getLayoutColumns(transition) {
@@ -54,24 +53,21 @@ export function getLayoutShift(transition, path, insertionDirection) {
     if (path.length === 0) {
         return null;
     }
-    const engine = new LayoutEngine(transition.itemsLayout);
     const width = getDefaultColumnSpan(transition.draggableItem, getLayoutColumns(transition));
     const height = getDefaultRowSpan(transition.draggableItem);
     const rows = getLayoutRows(transition);
     const columns = getLayoutColumns(transition);
     switch (transition.operation) {
         case "resize":
-            return engine.resize({ itemId: transition.draggableItem.id, path }).getLayoutShift();
+            return transition.layoutEngine.resize({ itemId: transition.draggableItem.id, path });
         case "reorder":
-            return engine.move({ itemId: transition.draggableItem.id, path }).getLayoutShift();
+            return transition.layoutEngine.move({ itemId: transition.draggableItem.id, path });
         case "insert":
-            return engine
-                .insert({
+            return transition.layoutEngine.insert({
                 itemId: transition.draggableItem.id,
                 width,
                 height,
                 path: normalizeInsertionPath(path, insertionDirection !== null && insertionDirection !== void 0 ? insertionDirection : "right", columns, rows),
-            })
-                .getLayoutShift();
+            });
     }
 }

package/board-item/styles.css.js

@@ -1,16 +1,16 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_9ckv7_h85wa_1",
-  "container-override": "awsui_container-override_9ckv7_h85wa_6",
-  "active": "awsui_active_9ckv7_h85wa_6",
-  "header": "awsui_header_9ckv7_h85wa_31",
-  "flexible": "awsui_flexible_9ckv7_h85wa_37",
-  "handle": "awsui_handle_9ckv7_h85wa_41",
-  "refresh": "awsui_refresh_9ckv7_h85wa_44",
-  "header-content": "awsui_header-content_9ckv7_h85wa_48",
-  "settings": "awsui_settings_9ckv7_h85wa_52",
-  "fixed": "awsui_fixed_9ckv7_h85wa_60",
-  "resizer": "awsui_resizer_9ckv7_h85wa_64"
+  "root": "awsui_root_9ckv7_1p0lm_1",
+  "container-override": "awsui_container-override_9ckv7_1p0lm_6",
+  "active": "awsui_active_9ckv7_1p0lm_6",
+  "header": "awsui_header_9ckv7_1p0lm_31",
+  "flexible": "awsui_flexible_9ckv7_1p0lm_37",
+  "handle": "awsui_handle_9ckv7_1p0lm_41",
+  "refresh": "awsui_refresh_9ckv7_1p0lm_44",
+  "header-content": "awsui_header-content_9ckv7_1p0lm_48",
+  "settings": "awsui_settings_9ckv7_1p0lm_52",
+  "fixed": "awsui_fixed_9ckv7_1p0lm_60",
+  "resizer": "awsui_resizer_9ckv7_1p0lm_64"
 };
   

package/board-item/styles.scoped.css

@@ -1,21 +1,21 @@
-.awsui_root_9ckv7_h85wa_1:not(#\9) {
+.awsui_root_9ckv7_1p0lm_1:not(#\9) {
   display: contents;
 }
 
 /* TODO: use container API instead of styles override */
-.awsui_container-override_9ckv7_h85wa_6.awsui_active_9ckv7_h85wa_6:not(#\9) {
-  box-shadow: var(--shadow-container-active-x0fzbz, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
+.awsui_container-override_9ckv7_1p0lm_6.awsui_active_9ckv7_1p0lm_6:not(#\9) {
+  box-shadow: var(--shadow-container-active-7yvi6w, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
 }
-[data-awsui-focus-visible] .awsui_container-override_9ckv7_h85wa_6.awsui_active_9ckv7_h85wa_6:not(#\9) {
+[data-awsui-focus-visible] .awsui_container-override_9ckv7_1p0lm_6.awsui_active_9ckv7_1p0lm_6:not(#\9) {
   position: relative;
   box-sizing: border-box;
   outline: none;
 }
-[data-awsui-focus-visible] .awsui_container-override_9ckv7_h85wa_6.awsui_active_9ckv7_h85wa_6:not(#\9) {
+[data-awsui-focus-visible] .awsui_container-override_9ckv7_1p0lm_6.awsui_active_9ckv7_1p0lm_6:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: -1px;
 }
-[data-awsui-focus-visible] .awsui_container-override_9ckv7_h85wa_6.awsui_active_9ckv7_h85wa_6:not(#\9)::before {
+[data-awsui-focus-visible] .awsui_container-override_9ckv7_1p0lm_6.awsui_active_9ckv7_1p0lm_6:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -24,45 +24,45 @@
   top: calc(-1 * 0px);
   width: calc(100% + 2 * 0px);
   height: calc(100% + 2 * 0px);
-  border-radius: var(--border-radius-container-pmtq2d, 16px);
-  border: 2px solid var(--color-border-item-focused-4t19h5, #0972d3);
+  border-radius: var(--border-radius-container-wqv1zi, 16px);
+  border: 2px solid var(--color-border-item-focused-b2ntyl, #0972d3);
 }
 
-.awsui_header_9ckv7_h85wa_31:not(#\9) {
+.awsui_header_9ckv7_1p0lm_31:not(#\9) {
   display: flex;
   justify-items: center;
-  padding: var(--space-scaled-s-913kwi, 12px) calc(var(--space-container-horizontal-jxdgil, 20px) - var(--space-scaled-xs-wbfgrv, 8px));
+  padding: var(--space-scaled-s-aqzyko, 12px) calc(var(--space-container-horizontal-wfukh3, 20px) - var(--space-scaled-xs-26e2du, 8px));
 }
 
-.awsui_flexible_9ckv7_h85wa_37:not(#\9) {
+.awsui_flexible_9ckv7_1p0lm_37:not(#\9) {
   flex: 1 1 min-content;
 }
 
-.awsui_handle_9ckv7_h85wa_41:not(#\9) {
-  margin-top: calc(var(--space-scaled-xxs-t2t62i, 4px) + 1px);
+.awsui_handle_9ckv7_1p0lm_41:not(#\9) {
+  margin-top: calc(var(--space-scaled-xxs-7597g1, 4px) + 1px);
 }
-.awsui_refresh_9ckv7_h85wa_44 > .awsui_handle_9ckv7_h85wa_41:not(#\9) {
-  margin-top: calc(var(--space-static-xxxs-b6tgp7, 2px) + 1px);
+.awsui_refresh_9ckv7_1p0lm_44 > .awsui_handle_9ckv7_1p0lm_41:not(#\9) {
+  margin-top: calc(var(--space-static-xxxs-3gu9os, 2px) + 1px);
 }
 
-.awsui_header-content_9ckv7_h85wa_48:not(#\9) {
-  margin-left: var(--space-scaled-xxs-t2t62i, 4px);
+.awsui_header-content_9ckv7_1p0lm_48:not(#\9) {
+  margin-left: var(--space-scaled-xxs-7597g1, 4px);
 }
 
-.awsui_settings_9ckv7_h85wa_52:not(#\9) {
-  margin-top: calc(var(--space-scaled-xxxs-jdgipl, 2px) + 1px);
-  margin-left: var(--space-static-xs-zgeph4, 8px);
+.awsui_settings_9ckv7_1p0lm_52:not(#\9) {
+  margin-top: calc(var(--space-scaled-xxxs-27y4hv, 2px) + 1px);
+  margin-left: var(--space-static-xs-7sfb63, 8px);
 }
-.awsui_refresh_9ckv7_h85wa_44 > .awsui_settings_9ckv7_h85wa_52:not(#\9) {
+.awsui_refresh_9ckv7_1p0lm_44 > .awsui_settings_9ckv7_1p0lm_52:not(#\9) {
   margin-top: 0px;
 }
 
-.awsui_fixed_9ckv7_h85wa_60:not(#\9) {
+.awsui_fixed_9ckv7_1p0lm_60:not(#\9) {
   flex: 0 0 auto;
 }
 
-.awsui_resizer_9ckv7_h85wa_64:not(#\9) {
+.awsui_resizer_9ckv7_1p0lm_64:not(#\9) {
   position: absolute;
-  bottom: calc(var(--space-static-xs-zgeph4, 8px) - var(--space-static-xxxs-b6tgp7, 2px));
-  right: calc(var(--space-static-xs-zgeph4, 8px) - var(--space-static-xxxs-b6tgp7, 2px));
+  bottom: calc(var(--space-static-xs-7sfb63, 8px) - var(--space-static-xxxs-3gu9os, 2px));
+  right: calc(var(--space-static-xs-7sfb63, 8px) - var(--space-static-xxxs-3gu9os, 2px));
 }

package/board-item/styles.selectors.js

@@ -2,16 +2,16 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_9ckv7_h85wa_1",
-  "container-override": "awsui_container-override_9ckv7_h85wa_6",
-  "active": "awsui_active_9ckv7_h85wa_6",
-  "header": "awsui_header_9ckv7_h85wa_31",
-  "flexible": "awsui_flexible_9ckv7_h85wa_37",
-  "handle": "awsui_handle_9ckv7_h85wa_41",
-  "refresh": "awsui_refresh_9ckv7_h85wa_44",
-  "header-content": "awsui_header-content_9ckv7_h85wa_48",
-  "settings": "awsui_settings_9ckv7_h85wa_52",
-  "fixed": "awsui_fixed_9ckv7_h85wa_60",
-  "resizer": "awsui_resizer_9ckv7_h85wa_64"
+  "root": "awsui_root_9ckv7_1p0lm_1",
+  "container-override": "awsui_container-override_9ckv7_1p0lm_6",
+  "active": "awsui_active_9ckv7_1p0lm_6",
+  "header": "awsui_header_9ckv7_1p0lm_31",
+  "flexible": "awsui_flexible_9ckv7_1p0lm_37",
+  "handle": "awsui_handle_9ckv7_1p0lm_41",
+  "refresh": "awsui_refresh_9ckv7_1p0lm_44",
+  "header-content": "awsui_header-content_9ckv7_1p0lm_48",
+  "settings": "awsui_settings_9ckv7_1p0lm_52",
+  "fixed": "awsui_fixed_9ckv7_1p0lm_60",
+  "resizer": "awsui_resizer_9ckv7_1p0lm_64"
 };
   

package/internal/debug-tools/generators.js

@@ -218,7 +218,7 @@ export function generateInsert(grid, insertId = "X", options) {
     const textGrid = toMatrix(grid);
     const y = getRandomIndex(textGrid);
     const x = getRandomIndex(textGrid[y]);
-    const width = getRandomInt(1, maxWidth + 1 - x);
+    const width = getRandomInt(1, Math.max(1, maxWidth + 1 - x));
     const height = getRandomInt(1, maxHeight + 1);
     return { itemId: insertId, width, height, path: [new Position({ x, y })] };
 }

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "board-components";
-export var PACKAGE_VERSION = "3.0.0 (222f89e3)";
+export var PACKAGE_VERSION = "3.0.0 (99e2db90)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "board-components",
-  "PACKAGE_VERSION": "3.0.0 (222f89e3)",
+  "PACKAGE_VERSION": "3.0.0 (99e2db90)",
   "THEME": "open-source-visual-refresh",
   "ALWAYS_VISUAL_REFRESH": true
 }

package/internal/handle/styles.css.js

@@ -1,6 +1,6 @@
 
     import './styles.scoped.css';
     export default {
-  "handle": "awsui_handle_cc1pu_1yi9f_1"
+  "handle": "awsui_handle_cc1pu_y0i9t_1"
 };
   

package/internal/handle/styles.scoped.css

@@ -1,11 +1,11 @@
-.awsui_handle_cc1pu_1yi9f_1:not(#\9) {
+.awsui_handle_cc1pu_y0i9t_1:not(#\9) {
   -webkit-appearance: none;
           appearance: none;
   background: transparent;
   border: none;
-  padding: var(--space-scaled-xxs-t2t62i, 4px);
-  color: var(--color-text-interactive-default-2sml2m, #414d5c);
+  padding: var(--space-scaled-xxs-7597g1, 4px);
+  color: var(--color-text-interactive-default-lnx6lk, #414d5c);
 }
-.awsui_handle_cc1pu_1yi9f_1:not(#\9):hover {
-  color: var(--color-text-interactive-hover-8bpozs, #000716);
+.awsui_handle_cc1pu_y0i9t_1:not(#\9):hover {
+  color: var(--color-text-interactive-hover-mj8add, #000716);
 }

package/internal/handle/styles.selectors.js

@@ -2,6 +2,6 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "handle": "awsui_handle_cc1pu_1yi9f_1"
+  "handle": "awsui_handle_cc1pu_y0i9t_1"
 };
   

package/internal/layout-engine/engine-cache.d.ts

@@ -0,0 +1,32 @@
+import { Position } from "../utils/position";
+import { LayoutEngineState } from "./engine-state";
+/**
+ * The cache is used to avoid duplicate computations for the same initial state and path.
+ * The cache must be invalidated once the items layout has changed e.g. as result of the operation commit.
+ * The cache is a tree of nodes with the root node representing the initial state and empty path. The
+ * rest of the tree store all previous state computations per path.
+ */
+export declare class LayoutEngineCacheNode {
+    position: null | Position;
+    state: LayoutEngineState;
+    private next;
+    constructor(state: LayoutEngineState);
+    /**
+     * The function takes path position and the callback to compute the corresponding state if not yet cached.
+     * It returns the next cache node to take the next path position if available:
+     *
+     * const root = new LayoutEngineCacheNode(state)
+     *
+     * const x1y0 = root
+     *    .matches({ x: 0, y: 0 }, () => compute({ x: 0, y: 0 })) // computes
+     *    .matches({ x: 1, y: 0 }, () => compute({ x: 1, y: 0 })) // computes
+     *    .state;
+     *
+     * const x2y0 = root
+     *    .matches({ x: 0, y: 0 }, () => compute({ x: 0, y: 0 }))
+     *    .matches({ x: 1, y: 0 }, () => compute({ x: 1, y: 0 }))
+     *    .matches({ x: 2, y: 0 }, () => compute({ x: 2, y: 0 })) // computes
+     *    .state;
+     */
+    matches(position: Position, compute: () => LayoutEngineState): LayoutEngineCacheNode;
+}

package/internal/layout-engine/engine-cache.js

@@ -0,0 +1,43 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * The cache is used to avoid duplicate computations for the same initial state and path.
+ * The cache must be invalidated once the items layout has changed e.g. as result of the operation commit.
+ * The cache is a tree of nodes with the root node representing the initial state and empty path. The
+ * rest of the tree store all previous state computations per path.
+ */
+export class LayoutEngineCacheNode {
+    constructor(state) {
+        this.position = null;
+        this.next = new Array();
+        this.state = state;
+    }
+    /**
+     * The function takes path position and the callback to compute the corresponding state if not yet cached.
+     * It returns the next cache node to take the next path position if available:
+     *
+     * const root = new LayoutEngineCacheNode(state)
+     *
+     * const x1y0 = root
+     *    .matches({ x: 0, y: 0 }, () => compute({ x: 0, y: 0 })) // computes
+     *    .matches({ x: 1, y: 0 }, () => compute({ x: 1, y: 0 })) // computes
+     *    .state;
+     *
+     * const x2y0 = root
+     *    .matches({ x: 0, y: 0 }, () => compute({ x: 0, y: 0 }))
+     *    .matches({ x: 1, y: 0 }, () => compute({ x: 1, y: 0 }))
+     *    .matches({ x: 2, y: 0 }, () => compute({ x: 2, y: 0 })) // computes
+     *    .state;
+     */
+    matches(position, compute) {
+        for (const nextNode of this.next) {
+            if (nextNode.position.x === position.x && nextNode.position.y === position.y) {
+                return nextNode;
+            }
+        }
+        const nextNode = new LayoutEngineCacheNode(compute());
+        nextNode.position = position;
+        this.next.push(nextNode);
+        return nextNode;
+    }
+}

package/internal/layout-engine/engine-solution.d.ts

@@ -0,0 +1,25 @@
+import { Conflicts } from "./engine-state";
+import { LayoutEngineGrid, ReadonlyLayoutEngineGrid } from "./grid";
+import { CommittedMove } from "./interfaces";
+export type MoveSolution = [state: MoveSolutionState, nextMove: CommittedMove];
+export declare class MoveSolutionState {
+    grid: LayoutEngineGrid;
+    moves: CommittedMove[];
+    moveIndex: number;
+    conflicts: null | Conflicts;
+    overlaps: Map<string, string>;
+    score: number;
+    constructor(grid: ReadonlyLayoutEngineGrid, moves: readonly CommittedMove[], conflicts: null | Conflicts);
+    static clone({ grid, moves, moveIndex, conflicts, overlaps, score }: MoveSolutionState): {
+        grid: LayoutEngineGrid;
+        moves: CommittedMove[];
+        moveIndex: number;
+        conflicts: Conflicts | null;
+        overlaps: Map<string, string>;
+        score: number;
+    };
+}
+/**
+ * Given a solution state finds a set of all possible moves each resolving a particular overlap.
+ */
+export declare function findNextSolutions(state: MoveSolutionState): MoveSolution[];